third_party/WebKit/LayoutTests/css3/tab-size.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <style>
   5 body {
   6   font-size: 13px;
   7 }
   8 .px-tab-size {
   9   tab-size: 60px;
  10 }
  11 .em-tab-size {
  12   tab-size: 7em;
  13 }
  14 .int-tab-size {
  15   tab-size: 9;
  16 }
  17     </style>
  18     <script src="../resources/js-test.js"></script>
  19   </head>
  20   <body>
  21     <div style="background-repeat: repeat-x;">
  22     <div><pre id="leading-px" class="px-tab-size">&Tab;<span>leading text, tab-size in px.</span></pre></div>
  23     <div><pre id="leading-em" class="em-tab-size">&Tab;<span>leading text, tab-size in em.</span></pre></div>
  24     <div><pre id="leading-int" class="int-tab-size">&Tab;<span>leading text, tab-size in spaces.</span></pre></div>
  25     <div><pre id="trailing-px" class="px-tab-size"><span>leading text</span>&Tab;<span>trailing text, tab-size in px.</span></pre></div>
  26     <div><pre id="trailing-em" class="em-tab-size"><span>leading text</span>&Tab;<span>trailing text, tab-size in em.</span></pre></div>
  27     <div><pre id="trailing-int" class="int-tab-size"><span>leading text</span>&Tab;<span>trailing text, tab-size in spaces.</span></pre></div>
  28     <div><pre>Some spaces... '<span id="space-size-reference">         </span>' ... for size reference.</pre></div>
  29     <div><pre>'<span id="leading-text-size-reference">leading text</span>', for size reference.</pre></div>
  30     <script>
  31
  32 description('Test tab-size measurements.');
  33
  34 // Tests with a tab character at the beginning of the line.
  35
  36 var pxPre = document.getElementById('leading-px');
  37 var emPre = document.getElementById('leading-em');
  38 var intPre = document.getElementById('leading-int');
  39
  40 var pxLeadingSpan = pxPre.firstElementChild;
  41 var emLeadingSpan = emPre.firstElementChild;
  42 var intLeadingSpan = intPre.firstElementChild;
  43
  44 var pxExpected = 60;  // tab size in px.
  45 var emExpected = 13 * 7;  // (font size) * (tab size in em)
  46 var intExpected = document.getElementById('space-size-reference').getBoundingClientRect().width;
  47
  48 var pxTabLength = pxLeadingSpan.getBoundingClientRect().left - pxPre.getBoundingClientRect().left;
  49 var emTabLength = emLeadingSpan.getBoundingClientRect().left - emPre.getBoundingClientRect().left;
  50 var intTabLength = intLeadingSpan.getBoundingClientRect().left - intPre.getBoundingClientRect().left;
  51
  52 shouldBe("pxTabLength", "pxExpected", false, 0.02);
  53 shouldBe("emTabLength", "emExpected", false, 0.02);
  54 shouldBe("intTabLength", "intExpected", false, 0.02);
  55
  56 // Tests with a tab character after leading text.
  57
  58 var leadingTextSize = document.getElementById('leading-text-size-reference').getBoundingClientRect().width;
  59 pxExpected = pxExpected - (leadingTextSize % pxExpected);
  60 emExpected = emExpected - (leadingTextSize % emExpected);
  61 intExpected = intExpected - (leadingTextSize % intExpected);
  62
  63 pxPre = document.getElementById('trailing-px');
  64 emPre = document.getElementById('trailing-em');
  65 intPre = document.getElementById('trailing-int');
  66
  67 pxLeadingSpan = pxPre.firstElementChild;
  68 emLeadingSpan = emPre.firstElementChild;
  69 intLeadingSpan = intPre.firstElementChild;
  70
  71 pxTrailingSpan = pxPre.lastElementChild;
  72 emTrailingSpan = emPre.lastElementChild;
  73 intTrailingSpan = intPre.lastElementChild;
  74
  75 pxTabLength = pxTrailingSpan.getBoundingClientRect().left - pxLeadingSpan.getBoundingClientRect().right;
  76 emTabLength = emTrailingSpan.getBoundingClientRect().left - emLeadingSpan.getBoundingClientRect().right;
  77 intTabLength = intTrailingSpan.getBoundingClientRect().left - intLeadingSpan.getBoundingClientRect().right;
  78
  79 shouldBe("pxTabLength", "pxExpected", false, 0.02);
  80 shouldBe("emTabLength", "emExpected", false, 0.02);
  81 shouldBe("intTabLength", "intExpected", false, 0.02);
  82     </script>
  83   </body>
  84 </html>