third_party/WebKit/LayoutTests/fast/box-sizing/css-table-with-box-sizing.html

   1 <html>
   2 <head>
   3   <style>
   4     .test {
   5       width:120px;
   6       height:120px;
   7       border:10px solid black;
   8     }
   9
  10     .border-box {
  11       box-sizing:border-box;
  12       -moz-box-sizing:border-box;
  13     }
  14
  15         .content-box {
  16       box-sizing:content-box;
  17       -moz-box-sizing:content-box;
  18     }
  19
  20     .css-inline-table {
  21       display:inline-table;
  22     }
  23
  24     .css-table {
  25       display:table;
  26     }
  27   </style>
  28 </head>
  29 <body>
  30 <div id="testContent">
  31   <p id="t1" class="test css-inline-table border-box">120x120<br>css-inline-table<br>border-box</p>
  32   <p id="t2" class="test css-table border-box">120x120<br>css-table<br>border-box</p>
  33   <p id="t3" class="test css-inline-table content-box">120x120<br>css-inline-table<br>content-box</p>
  34   <p id="t4" class="test css-table content-box">120x120<br>css-table<br>content-box</p>
  35 </div>
  36   <script src="../../resources/js-test.js"></script>
  37   <script>
  38     description("Test case for bug 89819. This tests CSS 'table' and 'inline-table' with box-sizing.");
  39
  40     shouldBe('document.getElementById("t1").offsetWidth', '120');
  41     shouldBe('document.getElementById("t1").offsetHeight', '120');
  42     shouldBe('document.getElementById("t2").offsetWidth', '120');
  43     shouldBe('document.getElementById("t2").offsetHeight', '120');
  44     shouldBe('document.getElementById("t3").offsetWidth', '140');
  45     shouldBe('document.getElementById("t3").offsetHeight', '140');
  46     shouldBe('document.getElementById("t4").offsetWidth', '140');
  47     shouldBe('document.getElementById("t4").offsetHeight', '140');
  48
  49     document.getElementById("testContent").style.display = 'none';
  50 </script>
  51 </body>
  52 </html>