calc-z-index-fractions-001.html (2075B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Values and Units Test: computed value of 'z-index' when specified with calc() function and fractional values</title> 6 7 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> 8 <link rel="help" href="https://www.w3.org/TR/css-values-4/#calc-range"> 9 10 <meta content="This test verifies how 2 calc() functions are computed for 'z-index' when involved expressions end up being numbers halfway between adjacent integers." name="assert"> 11 12 <script src="/resources/testharness.js"></script> 13 14 <script src="/resources/testharnessreport.js"></script> 15 16 <div id="target"></div> 17 18 <script> 19 function startTesting() 20 { 21 22 var targetElement = document.getElementById("target"); 23 24 function verifyComputedStyle(property_name, initial_value, specified_value, expected_value) 25 { 26 27 test(function() 28 { 29 30 targetElement.style.setProperty(property_name, initial_value); 31 32 /* 33 The purpose of the initial_value is to act as a fallback 34 value in case the calc() function in the specified value 35 fails or in case it generates an invalid value. Since we 36 are running 2 consecutive tests on the same element, 37 then it is necessary to reset its property to an initial 38 value. 39 */ 40 41 targetElement.style.setProperty(property_name, specified_value); 42 43 assert_equals(getComputedStyle(targetElement)[property_name], expected_value); 44 45 }, `testing ${property_name}: ${specified_value}`); 46 } 47 48 /* verifyComputedStyle(property_name, initial_value, specified_value, expected_value) */ 49 verifyComputedStyle("z-index", "auto", "calc(2.5 / 2)", "1"); 50 verifyComputedStyle("z-index", "auto", "calc(3 / 2)", "2"); 51 verifyComputedStyle("z-index", "auto", "calc(3.5 / 2)", "2"); 52 verifyComputedStyle("z-index", "auto", "calc(-2.5 / 2)", "-1"); 53 verifyComputedStyle("z-index", "auto", "calc(-3 / 2)", "-1"); 54 verifyComputedStyle("z-index", "auto", "calc(-3.5 / 2)", "-2"); 55 } 56 57 startTesting(); 58 59 </script>