| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| body { |
| font-size: 13px; |
| text-rendering:optimizeLegibility; |
| } |
| .px-tab-size { |
| tab-size: 60px; |
| } |
| .em-tab-size { |
| tab-size: 7em; |
| } |
| .int-tab-size { |
| tab-size: 9; |
| } |
| </style> |
| <script src="../resources/js-test.js"></script> |
| </head> |
| <body> |
| <div id="container" style="background-repeat: repeat-x;"> |
| <div><pre id="leading-px" class="px-tab-size">	<span>leading text, tab-size in px.</span></pre></div> |
| <div><pre id="leading-em" class="em-tab-size">	<span>leading text, tab-size in em.</span></pre></div> |
| <div><pre id="leading-int" class="int-tab-size">	<span>leading text, tab-size in spaces.</span></pre></div> |
| <div><pre id="trailing-px" class="px-tab-size"><span>leading text</span>	<span>trailing text, tab-size in px.</span></pre></div> |
| <div><pre id="trailing-em" class="em-tab-size"><span>leading text</span>	<span>trailing text, tab-size in em.</span></pre></div> |
| <div><pre id="trailing-int" class="int-tab-size"><span>leading text</span>	<span>trailing text, tab-size in spaces.</span></pre></div> |
| <div><pre>Some spaces... '<span id="space-size-reference"> </span>' ... for size reference.</pre></div> |
| <div><pre>'<span id="leading-text-size-reference">leading text</span>', for size reference.</pre></div> |
| <script> |
| |
| description('Test tab-size measurements.'); |
| |
| // Tests with a tab character at the beginning of the line. |
| |
| var pxPre = document.getElementById('leading-px'); |
| var emPre = document.getElementById('leading-em'); |
| var intPre = document.getElementById('leading-int'); |
| |
| var pxLeadingSpan = pxPre.firstElementChild; |
| var emLeadingSpan = emPre.firstElementChild; |
| var intLeadingSpan = intPre.firstElementChild; |
| |
| var pxExpected = 60; // tab size in px. |
| var emExpected = 13 * 7; // (font size) * (tab size in em) |
| var intExpected = document.getElementById('space-size-reference').getBoundingClientRect().width; |
| |
| var pxTabLength = pxLeadingSpan.getBoundingClientRect().left - pxPre.getBoundingClientRect().left; |
| var emTabLength = emLeadingSpan.getBoundingClientRect().left - emPre.getBoundingClientRect().left; |
| var intTabLength = intLeadingSpan.getBoundingClientRect().left - intPre.getBoundingClientRect().left; |
| |
| shouldBe("pxTabLength", "pxExpected", false, 0.02); |
| shouldBe("emTabLength", "emExpected", false, 0.02); |
| shouldBe("intTabLength", "intExpected", false, 0.02); |
| |
| // Tests with a tab character after leading text. |
| |
| var leadingTextSize = document.getElementById('leading-text-size-reference').getBoundingClientRect().width; |
| pxExpected = pxExpected - (leadingTextSize % pxExpected); |
| emExpected = emExpected - (leadingTextSize % emExpected); |
| intExpected = intExpected - (leadingTextSize % intExpected); |
| |
| pxPre = document.getElementById('trailing-px'); |
| emPre = document.getElementById('trailing-em'); |
| intPre = document.getElementById('trailing-int'); |
| |
| pxLeadingSpan = pxPre.firstElementChild; |
| emLeadingSpan = emPre.firstElementChild; |
| intLeadingSpan = intPre.firstElementChild; |
| |
| pxTrailingSpan = pxPre.lastElementChild; |
| emTrailingSpan = emPre.lastElementChild; |
| intTrailingSpan = intPre.lastElementChild; |
| |
| pxTabLength = pxTrailingSpan.getBoundingClientRect().left - pxLeadingSpan.getBoundingClientRect().right; |
| emTabLength = emTrailingSpan.getBoundingClientRect().left - emLeadingSpan.getBoundingClientRect().right; |
| intTabLength = intTrailingSpan.getBoundingClientRect().left - intLeadingSpan.getBoundingClientRect().right; |
| |
| shouldBe("pxTabLength", "pxExpected", false, 0.02); |
| shouldBe("emTabLength", "emExpected", false, 0.02); |
| shouldBe("intTabLength", "intExpected", false, 0.02); |
| |
| if (window.testRunner) |
| container.style.display = "none"; |
| </script> |
| </body> |
| </html> |
