| <!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, description) | |
| { | |
| test(function() | |
| { | |
| targetElement.style.setProperty(property_name, "initial"); | |
| targetElement.style.setProperty(property_name, specified_value); | |
| assert_equals(getComputedStyle(targetElement)[property_name], expected_value); | |
| }, description); | |
| } | |
| verifyComputedStyle("width", "calc(10% + 2em)", "84px", "testing width: calc(10% + 2em)"); | |
| /* | |
| 520px mult 10% == 52px | |
| + | |
| 16px mult 2 == 32px | |
| ======= | |
| 84px | |
| */ | |
| verifyComputedStyle("width", "calc(5% + 4rem)", "146px", "testing width: calc(5% + 4rem)"); | |
| /* | |
| 520px mult 5% == 26px | |
| + | |
| 30px mult 4 == 120px | |
| ======= | |
| 146px | |
| */ | |
| verifyComputedStyle("width", "calc(8lh + 7px)", "167px", "testing width: calc(8lh + 7px)"); | |
| /* | |
| 8 mult 20px == 160px | |
| + | |
| 7px | |
| ======= | |
| 167px | |
| */ | |
| verifyComputedStyle("height", "calc(10% + 6pt)", "58px", "testing height: calc(10% + 6pt)"); | |
| /* | |
| 10% mult 500 == 50px | |
| + | |
| 6pt == 8px | |
| ======== | |
| 58px | |
| */ | |
| verifyComputedStyle("width", "calc(4em + 2.6458333cm)", "164px", "testing width: calc(4em + 2.6458333cm)"); | |
| /* | |
| 4 mult 16px == 64px | |
| + | |
| 2.6458333cm == 100px | |
| ======== | |
| 164px | |
| */ | |
| verifyComputedStyle("height", "calc(5em + 26.458333mm)", "180px", "testing height: calc(5em + 26.458333mm)"); | |
| /* | |
| 5 mult 16px == 80px | |
| + | |
| 26.458333mm == 100px | |
| ======== | |
| 180px | |
| */ | |
| verifyComputedStyle("width", "calc(2in + 101.6Q)", "288px", "testing width: calc(2in + 101.6Q)"); | |
| /* | |
| 2 mult 96px == 192px | |
| + | |
| 101.6Q == 96px | |
| ======== | |
| 288px | |
| */ | |
| verifyComputedStyle("height", "calc(1pc + 3pt)", "20px", "testing height: calc(1pc + 3pt)"); | |
| /* | |
| 1pc == 16px | |
| + | |
| 3pt == 4px | |
| ======= | |
| 20px | |
| */ | |
| } | |
| startTesting(); | |
| </script> |