third_party/WebKit/LayoutTests/fast/box-sizing/table-cell.html

   1 <!DOCTYPE html>
   2
   3 <style>
   4 .styledForTest {
   5   -moz-box-sizing: border-box;
   6   box-sizing: border-box;
   7   background-color: orange;
   8   color: white;
   9   border: 7px solid black;
  10   padding: 5px;
  11   width: 80px;
  12   height: 30px;
  13   margin: 2px;
  14 }
  15 </style>
  16
  17 <p id="description">All of the boxes should be 80x30 and look identical.</p>
  18 <div id="console"></div>
  19
  20 <div id="expected" class="styledForTest"></div>
  21
  22 <div id="div-display-table-cell" class="styledForTest" style="display: table-cell;"></div>
  23
  24 <table>
  25 <tr>
  26 <td id="td" class="styledForTest"></td>
  27 </tr>
  28 </table>
  29
  30 <script src="../../resources/js-test.js"></script>
  31 <script>
  32 description('Tests that display: table-cell and box-sizing: border-box work when used together.');
  33
  34 ['div-display-table-cell', 'td'].forEach(function (id) {
  35   debug(id);
  36   element = document.querySelector('#' + id);
  37   shouldBe('element.offsetWidth', '80');
  38   shouldBe('element.offsetHeight', '30');
  39 });
  40
  41 </script>