calc-numbers.html (3762B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Values and Units Test: computed value of 'tab-size' and 'opacity' when specified with calc() function</title> 6 7 <!-- 8 9 Original test is: 10 11 https://chromium.googlesource.com/chromium/src/+/c825d655f6aaf73484f9d56e9012793f5b9668cc/third_party/WebKit/LayoutTests/css3/calc/calc-numbers.html 12 13 --> 14 15 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> 16 <link rel="help" href="https://www.w3.org/TR/css-color-3/#transparency"> 17 <link rel="help" href="https://www.w3.org/TR/css-text-3/#tab-size-property"> 18 <link rel="help" href="https://www.w3.org/TR/css3-values/#calc-computed-value"> 19 <link rel="help" href="https://www.w3.org/TR/css3-values/#calc-range"> 20 21 <meta name="flags" content="invalid"> 22 <meta content="This test verifies how 11 calc() functions are computed for 'opacity' and 'tab-size'." name="assert"> 23 24 <script src="/resources/testharness.js"></script> 25 26 <script src="/resources/testharnessreport.js"></script> 27 28 <div id="target"></div> 29 30 <script> 31 function startTesting() 32 { 33 34 function verifyComputedStyle(property_name, initial_value, specified_value, expected_value, description) 35 { 36 37 var elemTarget = document.getElementById("target"); 38 39 test(function() 40 { 41 42 elemTarget.style.setProperty(property_name, initial_value); 43 44 /* 45 In exactly 6 out of the 11 sub-tests, the initial_value will 46 act as a fallback value because the specified value generates 47 an invalid value. Since we are running 11 consecutive tests 48 on the same element, then it is necessary to 'reset' its 49 property to an initial value. 50 */ 51 52 elemTarget.style.setProperty(property_name, specified_value); 53 54 assert_equals(getComputedStyle(elemTarget)[property_name], expected_value, specified_value + ' should compute to ' + expected_value); 55 56 }, description); 57 } 58 59 /* verifyComputedStyle(property_name, initial_value, specified_value, expected_value, description) */ 60 61 verifyComputedStyle("tab-size", "initial", "calc(2 * 3)", "6", "testing tab-size: calc(2 * 3)"); 62 63 verifyComputedStyle("tab-size", "12345", "calc(2 * -4)", "0", "testing tab-size: calc(2 * -4)"); 64 /* 65 an out-of-range value inside a calc() does not cause 66 the declaration to become invalid. The value resulting 67 from an expression must be clamped to the range 68 allowed in the target context. 69 https://www.w3.org/TR/css-values-3/#calc-range 70 */ 71 72 verifyComputedStyle("opacity", "initial", "calc(2 / 4)", "0.5", "testing opacity: calc(2 / 4)"); 73 74 verifyComputedStyle("tab-size", "12345", "calc(2 / 4)", "0.5", "testing tab-size: calc(2 / 4)"); 75 /* 76 'tab-size' accepts <number> values. 77 */ 78 79 verifyComputedStyle("opacity", "0.9", "calc(2 / 4) * 1px", "0.9", "testing opacity: calc(2 / 4) * 1px"); 80 81 verifyComputedStyle("opacity", "0.9", "calc(90%)", "0.9", "testing opacity: calc(90%)"); 82 83 verifyComputedStyle("tab-size", "12345", "calc(1 + 1px)", "12345", "testing tab-size: calc(1 + 1px)"); 84 85 verifyComputedStyle("tab-size", "12345", "calc(1 + 100%)", "12345", "testing tab-size: calc(1 + 100%)"); 86 87 verifyComputedStyle("tab-size", "12345", "calc(100%)", "12345", "testing tab-size: calc(100%)"); 88 89 verifyComputedStyle("tab-size", "12345", "calc(10px) bla", "12345", "testing tab-size: calc(10px) bla"); 90 91 verifyComputedStyle("tab-size", "12345", "calc(bla) 10px", "12345", "testing tab-size: calc(bla) 10px"); 92 93 verifyComputedStyle("tab-size", "initial", "calc(10px)", "10px", "testing tab-size: calc(10px)"); 94 95 /* verifyComputedStyle(property_name, initial_value, specified_value, expected_value, description) */ 96 } 97 98 startTesting(); 99 100 </script>