| <html> |
| <head> |
| <style> |
| .test { |
| width:120px; |
| height:120px; |
| border:10px solid black; |
| } |
| |
| .border-box { |
| box-sizing:border-box; |
| -moz-box-sizing:border-box; |
| } |
| |
| .content-box { |
| box-sizing:content-box; |
| -moz-box-sizing:content-box; |
| } |
| |
| .css-inline-table { |
| display:inline-table; |
| } |
| |
| .css-table { |
| display:table; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="testContent"> |
| <p id="t1" class="test css-inline-table border-box">120x120<br>css-inline-table<br>border-box</p> |
| <p id="t2" class="test css-table border-box">120x120<br>css-table<br>border-box</p> |
| <p id="t3" class="test css-inline-table content-box">120x120<br>css-inline-table<br>content-box</p> |
| <p id="t4" class="test css-table content-box">120x120<br>css-table<br>content-box</p> |
| </div> |
| <script src="../../resources/js-test.js"></script> |
| <script> |
| description("Test case for bug 89819. This tests CSS 'table' and 'inline-table' with box-sizing."); |
| |
| shouldBe('document.getElementById("t1").offsetWidth', '120'); |
| shouldBe('document.getElementById("t1").offsetHeight', '120'); |
| shouldBe('document.getElementById("t2").offsetWidth', '120'); |
| shouldBe('document.getElementById("t2").offsetHeight', '120'); |
| shouldBe('document.getElementById("t3").offsetWidth', '140'); |
| shouldBe('document.getElementById("t3").offsetHeight', '140'); |
| shouldBe('document.getElementById("t4").offsetWidth', '140'); |
| shouldBe('document.getElementById("t4").offsetHeight', '140'); |
| |
| document.getElementById("testContent").style.display = 'none'; |
| </script> |
| </body> |
| </html> |
