getComputedStyle-calc-mixed-units-001.html (3076B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Values Test: computed value of 3 calc() values</title> 6 7 8 <!-- 9 " 10 Where percentages are not resolved at computed-value time, 11 they are not resolved in math functions, e.g. 12 'calc(100% - 100% + 1px)' resolves to 'calc(0% + 1px)', not to 13 '1px'. If there are special rules for computing percentages 14 in a value (e.g. the 'height' property), they apply whenever 15 a math function contains percentages. 16 " 17 § 10.11 Computed Value 18 https://www.w3.org/TR/css-values-4/#calc-computed-value 19 --> 20 21 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> 22 <link rel="help" href="https://www.w3.org/TR/css-values-4/#calc-computed-value"> 23 24 <meta name="flags" content=""> 25 <meta content="This test verifies that terms with a percentage unit that can not be resolved at computed-value time will require a calc() wrapper. A term with an em value, on the other hand, must be resolved at computed-value time and therefore must be absolutized to 'px'." name="assert"> 26 27 <script src="/resources/testharness.js"></script> 28 29 <script src="/resources/testharnessreport.js"></script> 30 31 <style> 32 html, body 33 { 34 font-size: 16px; 35 height: 570px; 36 } 37 38 div#target 39 { 40 background-color: yellow; 41 background-image: url("support/cat.png"); 42 background-position: top center; 43 background-repeat: no-repeat; 44 background-size: 14% 50%; /* entirely arbitrary and random background-size values */ 45 height: 200px; 46 } 47 </style> 48 49 <div id="target"></div> 50 51 <script> 52 function startTesting() 53 { 54 55 var targetElement = document.getElementById("target"); 56 57 function verifyComputedStyle(property_name, specified_value, expected_value) 58 { 59 60 test(function() 61 { 62 63 targetElement.style.setProperty(property_name, specified_value); 64 65 assert_equals(getComputedStyle(targetElement)[property_name], expected_value); 66 67 }, `testing ${property_name}: ${specified_value}`); 68 } 69 70 verifyComputedStyle("background-size", "calc(67% - 54% + 4em) 50%", "calc(13% + 64px) 50%"); 71 72 /* 73 "Where percentages are not resolved at computed-value time, 74 they are not resolved in math functions (...)" 75 https://www.w3.org/TR/css-values-4/#calc-serialize 76 77 Therefore here, the percentage is preserved and 78 a calc() wrapper must be used. The 4em term 79 must be resolved though. 80 */ 81 82 verifyComputedStyle("background-position", "calc(100% - 100% + 20em)", "calc(0% + 320px) 50%"); 83 84 /* 85 Here too, the percentage is preserved and 86 a calc() wrapper must be used. The 20em term 87 must be resolved though. 88 */ 89 90 91 verifyComputedStyle("height", "calc(60% - 50% + 3em)", "105px"); 92 93 /* 94 95 The height of the containing block of div#target is not auto. 96 So, such percentage can and must be resolved at 97 computed-value time. 98 99 570px mult 10% == 57px 100 101 + 48px 102 ============ 103 105px 104 105 */ 106 } 107 108 startTesting(); 109 110 </script>