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-003.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-003.html')
| -rw-r--r-- | testing/web-platform/tests/css/css-values/getComputedStyle-calc-mixed-units-003.html | 88 |
1 files changed, 88 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-values/getComputedStyle-calc-mixed-units-003.html b/testing/web-platform/tests/css/css-values/getComputedStyle-calc-mixed-units-003.html new file mode 100644 index 0000000000..fae9682b2c --- /dev/null +++ b/testing/web-platform/tests/css/css-values/getComputedStyle-calc-mixed-units-003.html @@ -0,0 +1,88 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Values Test: computed value of calc() values using multiplication/division with mixed units</title> + + <link rel="help" href="https://www.w3.org/TR/css-values-4/#calc-computed-value"> + + <meta name="flags" content=""> + <meta content="This meta-test checks for the resolution and absolutization of computed values with mixed units to 'px' when multiplication/division is used." name="assert"> + + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + + <style> + html { + font-size: 30px; + } + + body { + font-size: 16px; + line-height: 1.25; /* computed value: 20px */ + width: 520px; + height: 500px; + margin: 20px; + } + + 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(5px * 10lh / 1px)", "1000px"); + /* + 10lh = 200px + 5px * 200px / 1px = 1000px^2 / 1px = 1000px + Total = 1000px + */ + + verifyComputedStyle("width", "calc(20% * 0.5em / 1px)", "832px"); + /* + 20% of 520px = 104px + 0.5em = 8px + 104px * 8px / 1px = 832px^2 / 1px = 832px + Total = 832px + */ + + verifyComputedStyle("width", "calc(4px * 4em / 1px)", "256px"); + /* + 4em = 64px + 4px * 64px / 1px = 256px^2 / 1px = 256px + Total = 256px + */ + + verifyComputedStyle("width", "calc(400px / 4lh * 1px)", "5px"); + /* + 4lh = 80px + 400px / 80px * 1px = 5 * 1px = 5px + Total = 5px + */ + + verifyComputedStyle("width", "calc(20% / 0.5em * 1px)", "13px"); + /* + 20% of 520px = 104px + 0.5em = 8px + 104px / 8px * 1px = 13 * 1px = 13px + Total = 13px + */ + } + + startTesting(); + + </script> |