diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
| commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
| tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/css-values/getComputedStyle-calc-mixed-units-002.html | |
| parent | Initial commit. (diff) | |
| download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip | |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-values/getComputedStyle-calc-mixed-units-002.html')
| -rw-r--r-- | testing/web-platform/tests/css/css-values/getComputedStyle-calc-mixed-units-002.html | 222 |
1 files changed, 222 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-values/getComputedStyle-calc-mixed-units-002.html b/testing/web-platform/tests/css/css-values/getComputedStyle-calc-mixed-units-002.html new file mode 100644 index 0000000000..cf98b1c59e --- /dev/null +++ b/testing/web-platform/tests/css/css-values/getComputedStyle-calc-mixed-units-002.html @@ -0,0 +1,222 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Values Test: computed value of 8 calc() values that involve mixed units</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-values-4/#calc-computed-value"> + + <meta name="flags" content=""> + <meta content="This meta-test verifies that terms with a length value that can be resolved at computed-value time must be resolved and must be absolutized to 'px'. In this meta-test, we test percentage unit (%), three font-relative length units (em, rem, lh) and some absolute length units (pc, pt, px, cm, mm, Q, in). " name="assert"> + + <!-- + + NOT Tested in this test are: + + Viewport-percentage Length units: + vh, svh, lvh, dvh, + vw, svw, lvw, dvw, + vmin, svmin, lvmin, dvmin, + vmax, svmax, lvmax, dvmax, + vi, svi, lvi, dvi, + vb, svb, lvb, dvb + + and these of font-relative length units: + ex, rex, + cap, rcap, + ch, rch, + ic, ric, + rlh + + --> + + <script src="/resources/testharness.js"></script> + + <script src="/resources/testharnessreport.js"></script> + + <style> + html + { + font-size: 30px; /* for checking rem unit */ + } + + body + { + font-size: 16px; + line-height: 1.25; /* computed value: 20px; for checking lh unit */ + height: 500px; + margin: 20px; + width: 520px; + } + + div#target + { + height: 100px; + width: 100px; + } + </style> + + <div id="target"></div> + + <script> + function startTesting() + { + + var targetElement = document.getElementById("target"); + + function verifyComputedStyle(property_name, specified_value, expected_value) + { + + test(function() + { + + targetElement.style.setProperty(property_name, "initial"); + + targetElement.style.setProperty(property_name, specified_value); + + assert_equals(getComputedStyle(targetElement)[property_name], expected_value); + + }, `testing ${property_name}: ${specified_value}`); + } + + verifyComputedStyle("width", "calc(10% + 2em)", "84px"); + + /* + + 520px mult 10% == 52px + + + + + 16px mult 2 == 32px + + ======= + + 84px + + */ + + + verifyComputedStyle("width", "calc(5% + 4rem)", "146px"); + + /* + + 520px mult 5% == 26px + + + + + 30px mult 4 == 120px + + ======= + + 146px + + */ + + + verifyComputedStyle("width", "calc(8lh + 7px)", "167px"); + + /* + + 8 mult 20px == 160px + + + + + 7px + + ======= + + 167px + + */ + + + verifyComputedStyle("height", "calc(10% + 6pt)", "58px"); + + /* + + 10% mult 500 == 50px + + + + + 6pt == 8px + + ======== + + 58px + + */ + + + verifyComputedStyle("width", "calc(4em + 2.6458333cm)", "164px"); + + /* + + 4 mult 16px == 64px + + + + + 2.6458333cm == 100px + + ======== + + 164px + + */ + + + verifyComputedStyle("height", "calc(5em + 26.458333mm)", "180px"); + + /* + + 5 mult 16px == 80px + + + + + 26.458333mm == 100px + + ======== + + 180px + + */ + + + verifyComputedStyle("width", "calc(2in + 101.6Q)", "288px"); + + /* + + 2 mult 96px == 192px + + + + + 101.6Q == 96px + + ======== + + 288px + + */ + + + verifyComputedStyle("height", "calc(1pc + 3pt)", "20px"); + + /* + + 1pc == 16px + + + + + 3pt == 4px + + ======= + + 20px + + */ + + } + + startTesting(); + + </script> |