third_party/WebKit/LayoutTests/fast/lists/calc-width-with-space.html

   1 <head>
   2 <style>
   3      ol { margin: 0px; }
   4 </style>
   5 <script>
   6 function run()
   7 {
   8     // Check if the two divs aren't overflowed by checking they have
   9     // the same height.
  10     var ref = document.getElementById("ref");
  11     var test = document.getElementById("test");
  12     var result = document.getElementById("result");
  13     if (ref.scrollHeight == test.scrollHeight)
  14         result.appendChild(document.createTextNode("SUCCESS"));
  15     else
  16         result.appendChild(document.createTextNode("FAILED"));
  17 }
  18
  19 if (window.testRunner)
  20     testRunner.dumpAsText();
  21 </script>
  22 </head>
  23
  24 <body onload="run();">
  25
  26 These two lines should look same as spaces after a list marker should
  27 be ignored. There are 18 characters in each line. As they are 20px
  28 width, the total width should be 360px + a few pixels for table.
  29 If the space character after the list marker in "test" isn't ignored,
  30 the number of characters become 19 and 370px div will be overflowed.
  31 Note that this test requires Ahem font.
  32
  33 <div style="height: 20px; overflow-y: scroll;" id="ref">
  34 <table style="width: 370px; font: 20px Ahem;">
  35  <tr>
  36   <td><ol><li>XpX XpX</ol></td>
  37   <td><ol><li>XpX XpX</ol></td>
  38  </tr>
  39 </table>
  40 </div>
  41
  42 <div style="height: 20px; overflow-y: scroll;" id="test">
  43 <table style="width: 370px; font: 20px Ahem;">
  44  <tr>
  45   <td><ol><li> XpX XpX</ol></td>
  46   <td><ol><li>XpX XpX</ol></td>
  47  </tr>
  48 </table>
  49 </div>
  50
  51 <div id="result">
  52 </div>
  53
  54 </body>