calc-background-position-002.html (2722B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Values and Units Test: computed value of 'background-position' when specified with calc() function</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-3/#calc-computed-value"> 9 10 <meta content="This test verifies how 6 calc() functions are computed for 'background-position'." 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 6 consecutive tests on the same element, 37 then it is necessary to 'reset' its property to an 38 initial 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 50 verifyComputedStyle("background-position", "initial", "calc(2px + 3px) calc(4px + 5px)", "5px 9px"); 51 52 verifyComputedStyle("background-position", "initial", "calc(18px - 7px) calc(19px - 7px)", "11px 12px"); 53 54 verifyComputedStyle("background-position", "initial", "calc(4 * 5px) calc(6px * 4)", "20px 24px"); 55 56 verifyComputedStyle("background-position", "initial", "calc(100px / 4) calc(119px / 7)", "25px 17px"); 57 58 verifyComputedStyle("background-position", "initial", "calc(6px + 21%) calc(7em + 22%)", "calc(21% + 6px) calc(22% + 112px)"); 59 60 /* 61 " 62 (...) background-position has layout-dependent behavior for 63 percentage values, and thus does not resolve percentages 64 until used-value time. Due to this, background-position 65 computation preserves the percentage in a calc(). (...) 66 " 67 https://www.w3.org/TR/css-values-3/#calc-computed-value 68 */ 69 70 verifyComputedStyle("background-position", "initial", "calc(-8px + 23%) calc(-9em + 24%)", "calc(23% - 8px) calc(24% - 144px)"); 71 72 /* verifyComputedStyle(property_name, initial_value, specified_value, expected_value) */ 73 } 74 75 startTesting(); 76 77 </script>