tab-size.html (5174B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Test: CSS value type of the CSS property 'tab-size'</title> 4 <link rel="help" href="https://drafts.csswg.org/css-text-3/#tab-size-property"> 5 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 6 <style> 7 body { 8 font-family: Ahem; 9 font-size: 13px; 10 } 11 .px-tab-size { 12 tab-size: 60px; 13 } 14 .em-tab-size { 15 tab-size: 7em; 16 } 17 .int-tab-size { 18 tab-size: 9; 19 } 20 .fractional-tab-size { 21 tab-size: 2.5; 22 } 23 </style> 24 <script src=/resources/testharness.js></script> 25 <script src=/resources/testharnessreport.js></script> 26 <div style="background-repeat: repeat-x;"> 27 <div><pre id="leading-px" class="px-tab-size">	<span>leading text, tab-size in px.</span></pre></div> 28 <div><pre id="leading-em" class="em-tab-size">	<span>leading text, tab-size in em.</span></pre></div> 29 <div><pre id="leading-int" class="int-tab-size">	<span>leading text, tab-size in spaces.</span></pre></div> 30 <div><pre id="leading-fraction" class="fractional-tab-size">	<span>leading text, tab-size in fraction.</span></pre></div> 31 <div><pre id="trailing-px" class="px-tab-size"><span>leading text</span>	<span>trailing text, tab-size in px.</span></pre></div> 32 <div><pre id="trailing-em" class="em-tab-size"><span>leading text</span>	<span>trailing text, tab-size in em.</span></pre></div> 33 <div><pre id="trailing-int" class="int-tab-size"><span>leading text</span>	<span>trailing text, tab-size in spaces.</span></pre></div> 34 <div><pre id="trailing-fraction" class="fractional-tab-size"><span>leading text</span>	<span>trailing text, tab-size in fraction.</span></pre></div> 35 <div><pre>Some spaces... '<span id="space-size-reference"> </span>' ... for size reference.</pre></div> 36 <div><pre>A space... '<span id="one-space-size-reference"> </span>' ... for size reference.</pre></div> 37 <div><pre>'<span id="leading-text-size-reference">leading text</span>', for size reference.</pre></div> 38 <script> 39 test(function() { 40 // Tests with a tab character at the beginning of the line. 41 var pxPre = document.getElementById('leading-px'); 42 var emPre = document.getElementById('leading-em'); 43 var intPre = document.getElementById('leading-int'); 44 var fractionPre = document.getElementById("leading-fraction"); 45 46 var pxLeadingSpan = pxPre.firstElementChild; 47 var emLeadingSpan = emPre.firstElementChild; 48 var intLeadingSpan = intPre.firstElementChild; 49 var fractionLeadingspan = fractionPre.firstElementChild; 50 51 var pxExpected = 60; // tab size in px. 52 var emExpected = 13 * 7; // (font size) * (tab size in em) 53 var intExpected = document.getElementById('space-size-reference').getBoundingClientRect().width; 54 var fractionExpected = 2.5 * document.getElementById('one-space-size-reference').getBoundingClientRect().width; 55 56 var pxTabLength = pxLeadingSpan.getBoundingClientRect().left - pxPre.getBoundingClientRect().left; 57 var emTabLength = emLeadingSpan.getBoundingClientRect().left - emPre.getBoundingClientRect().left; 58 var intTabLength = intLeadingSpan.getBoundingClientRect().left - intPre.getBoundingClientRect().left; 59 var fractionTabLength = fractionLeadingspan.getBoundingClientRect().left - fractionPre.getBoundingClientRect().left; 60 61 assert_approx_equals(pxTabLength, pxExpected, 0.02); 62 assert_approx_equals(emTabLength, emExpected, 0.02); 63 assert_approx_equals(intTabLength, intExpected, 0.02); 64 assert_approx_equals(fractionTabLength, fractionExpected, 0.02); 65 66 // Tests with a tab character after leading text. 67 var leadingTextSize = document.getElementById('leading-text-size-reference').getBoundingClientRect().width; 68 pxExpected = pxExpected - (leadingTextSize % pxExpected); 69 emExpected = emExpected - (leadingTextSize % emExpected); 70 intExpected = intExpected - (leadingTextSize % intExpected); 71 fractionExpected = fractionExpected - (leadingTextSize % fractionExpected); 72 73 pxPre = document.getElementById('trailing-px'); 74 emPre = document.getElementById('trailing-em'); 75 intPre = document.getElementById('trailing-int'); 76 fractionPre = document.getElementById("trailing-fraction"); 77 78 pxLeadingSpan = pxPre.firstElementChild; 79 emLeadingSpan = emPre.firstElementChild; 80 intLeadingSpan = intPre.firstElementChild; 81 fractionLeadingspan = fractionPre.firstElementChild; 82 83 pxTrailingSpan = pxPre.lastElementChild; 84 emTrailingSpan = emPre.lastElementChild; 85 intTrailingSpan = intPre.lastElementChild; 86 fractionTrailingSpan = fractionPre.lastElementChild; 87 88 pxTabLength = pxTrailingSpan.getBoundingClientRect().left - pxLeadingSpan.getBoundingClientRect().right; 89 emTabLength = emTrailingSpan.getBoundingClientRect().left - emLeadingSpan.getBoundingClientRect().right; 90 intTabLength = intTrailingSpan.getBoundingClientRect().left - intLeadingSpan.getBoundingClientRect().right; 91 fractionTabLength = fractionTrailingSpan.getBoundingClientRect().left - fractionLeadingspan.getBoundingClientRect().right; 92 93 assert_approx_equals(pxTabLength, pxExpected, 0.02); 94 assert_approx_equals(emTabLength, emExpected, 0.02); 95 assert_approx_equals(intTabLength, intExpected, 0.02); 96 assert_approx_equals(fractionTabLength, fractionExpected, 0.02); 97 }, "Test tab-size measurements"); 98 </script>