tab-size-computed-value-001.html (3960B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Text Test: computed value of 'tab-size'</title> 6 7 <!-- 8 9 Issue 463: [css-text] The computed value and animation type of tab-size 10 https://github.com/w3c/csswg-drafts/issues/463 11 12 --> 13 14 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> 15 <link rel="help" href="https://www.w3.org/TR/css-text-3/#tab-size-property"> 16 17 <meta content="This test checks that the computed value of 'tab-size' is a number when it is specified as such or is a length (absolute or relative) when it is specified as such." name="assert"> 18 19 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 20 21 <script src="/resources/testharness.js"></script> 22 23 <script src="/resources/testharnessreport.js"></script> 24 25 <style> 26 div#target 27 { 28 font-family: Ahem; 29 font-size: 20px; 30 } 31 </style> 32 33 <div id="target">A</div> 34 35 <div id="log"></div> 36 37 <script> 38 function startTesting() 39 { 40 41 var targetElement = document.getElementById("target"); 42 43 function verifyComputedStyle(property_name, specified_value, expected_value) 44 { 45 46 test(function() 47 { 48 49 targetElement.style.setProperty(property_name, "initial"); 50 51 /* 52 The purpose of setting the property to its initial value 53 is to act as a fallback value in case the specified value 54 fails. Since we are running 11 consecutive tests on the 55 same element, then it is necessary to 'reset' its property 56 to an initial value. 57 */ 58 59 targetElement.style.setProperty(property_name, specified_value); 60 61 assert_equals(getComputedStyle(targetElement)[property_name], expected_value); 62 63 }, `testing ${property_name}: ${specified_value}`); 64 } 65 66 function compareValueCloseTo(property_name, specified_value, epsilon, expected_value) 67 { 68 69 test(function() 70 { 71 72 targetElement.style.setProperty(property_name, "initial"); 73 74 targetElement.style.setProperty(property_name, specified_value); 75 76 var computedSpecifiedValue = parseFloat(getComputedStyle(targetElement)[property_name]); 77 78 assert_true(isFinite(computedSpecifiedValue)); /* We can not accept NaN as value */ 79 80 targetElement.style.setProperty(property_name, expected_value); 81 82 var computedExpectedValue = parseFloat(getComputedStyle(targetElement)[property_name]); 83 84 assert_array_approx_equals(computedSpecifiedValue, computedExpectedValue, epsilon); 85 86 }, `testing ${property_name}: ${specified_value}`); 87 88 } 89 90 verifyComputedStyle("tab-size", "4", "4"); 91 92 /* verifyComputedStyle(property_name, initial_value, specified_value, expected_value) */ 93 94 /* absolute length units: in, cm, mm, pt, pc, Q, px */ 95 96 verifyComputedStyle("tab-size", "0.5in", "48px"); 97 98 verifyComputedStyle("tab-size", "2.54cm", "96px"); 99 100 verifyComputedStyle("tab-size", "25.4mm", "96px"); 101 102 verifyComputedStyle("tab-size", "18pt", "24px"); 103 104 verifyComputedStyle("tab-size", "5pc", "80px"); 105 106 verifyComputedStyle("tab-size", "101.6Q", "96px"); 107 108 verifyComputedStyle("tab-size", "7px", "7px"); 109 110 /* verifyComputedStyle(property_name, specified_value, expected_value) */ 111 112 /* relative length units: em, ex, rem */ 113 114 verifyComputedStyle("tab-size", "1em", "20px"); 115 116 /* compareValueCloseTo(property_name, specified_value, epsilon, expected_value) */ 117 118 compareValueCloseTo("tab-size", "2ex", 0.001, "32px"); 119 120 /* 121 For this sub-test, we set the tolerance precision (epsilon) 122 to (0.001 === 1 thousandth). 123 */ 124 125 verifyComputedStyle("tab-size", "3rem", "48px"); 126 127 /* 128 129 NOT tested are: vw, vh, vmin, vmax and ch units 130 131 verifyComputedStyle("tab-size", "4vw", "?px"); 132 133 verifyComputedStyle("tab-size", "5vh", "?px"); 134 135 verifyComputedStyle("tab-size", "6vmin", "?px"); 136 137 verifyComputedStyle("tab-size", "7vmax", "?px"); 138 139 verifyComputedStyle("tab-size", "8ch", "?px"); 140 141 */ 142 143 } 144 145 startTesting(); 146 147 </script>