<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>