test_bug417255.html (2002B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=417255 5 --> 6 <head> 7 <title>Test for Bug 417255</title> 8 <script src="/tests/SimpleTest/SimpleTest.js"></script> 9 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> 10 <style> 11 .spacer { display:inline-block; height:10px; } 12 </style> 13 </head> 14 <body> 15 16 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=417255">Mozilla Bug 417255</a> 17 <div id="display" style="width:800px"></div> 18 19 <div><span id="s1" style="border:2px dotted red;"><span class="spacer" style="width:100px"></span> 20 <div style="width:500px; height:100px; background:yellow;"></div> 21 <span class="spacer" style="width:200px"></span></span></div> 22 23 <div><span id="s2" style="border:2px dotted red;"><span class="spacer" style="width:100px"></span> 24 <div style="width:150px; height:100px; background:yellow;"></div> 25 <span class="spacer" style="width:200px"></span></span></div> 26 27 <!-- test nested spans around the IB split --> 28 <div><span id="s3" style="border:2px dotted red;"><span><span class="spacer" style="width:100px"></span> 29 <div style="width:500px; height:100px; background:yellow;"></div> 30 <span class="spacer" style="width:200px"></span></span></span></div> 31 32 <div id="content" style="display: none"> 33 34 </div> 35 36 <pre id="test"> 37 <script class="testbody" type="text/javascript"> 38 39 function getWidth(box) { 40 return box.right - box.left; 41 } 42 43 function doTest(id, boundsWidth, w1, w2, w3) { 44 var s = document.getElementById(id); 45 is(s.offsetWidth, boundsWidth, "bad offsetWidth"); 46 is(getWidth(s.getBoundingClientRect()), boundsWidth, "bad getBoundingClientRect width"); 47 is(getWidth(s.getClientRects()[0]), w1, "bad getClientRects width"); 48 is(getWidth(s.getClientRects()[1]), w2, "bad getClientRects width"); 49 is(getWidth(s.getClientRects()[2]), w3, "bad getClientRects width"); 50 } 51 52 doTest("s1", 500, 102, 500, 202); 53 doTest("s2", 202, 102, 150, 202); 54 doTest("s3", 500, 102, 500, 202); 55 56 </script> 57 </pre> 58 </body> 59 60 </html>