test_bug332246.html (2859B)
1 <html> 2 <!-- 3 https://bugzilla.mozilla.org/show_bug.cgi?id=332246 4 --> 5 <head> 6 <title>Test for Bug 332246 - scrollIntoView(false) doesn't work correctly for inline elements that wrap at multiple lines</title> 7 <script src="/tests/SimpleTest/SimpleTest.js"></script> 8 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> 9 </head> 10 <body> 11 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=332246">Mozilla Bug 332246</a> 12 <p id="display"></p> 13 <div id="content"> 14 15 <div id="a1" style="height: 100px; width: 100px; overflow: hidden; outline:1px dotted black;"> 16 <div style="height: 100px"></div> 17 <a id="a2" href="#" style="display:block; background:yellow; height:200px;">Top</a> 18 <div style="height: 100px"></div> 19 </div> 20 21 <div id="b1" style="height: 100px; width: 100px; overflow: hidden; outline:1px dotted black;"> 22 <div style="height: 100px"></div> 23 <div id="b2" href="#" style="border:10px solid black; background:yellow; height:200px;"></div> 24 <div style="height: 100px"></div> 25 </div> 26 27 <br> 28 29 <div id="c1" style="height: 100px; width: 100px; overflow: hidden; position: relative; outline:1px dotted black;"> 30 <div id="c2" style="border: 10px solid black; height: 200px; width: 50px; position: absolute; top: 100px;"></div> 31 <div style="height: 100px"></div> 32 </div> 33 34 </div> 35 <pre id="test"> 36 <script class="testbody" type="text/javascript"> 37 38 /** Test for Bug 332246 */ 39 40 function isWithFuzz(itIs, itShouldBe, fuzz, description) { 41 ok(Math.abs(itIs - itShouldBe) <= fuzz, `${description} - expected a value between ${itShouldBe - fuzz} and ${itShouldBe + fuzz}, got ${itIs}`); 42 } 43 44 var a1 = document.getElementById('a1'); 45 var a2 = document.getElementById('a2'); 46 isWithFuzz(a1.scrollHeight, 400, 1, "Wrong a1.scrollHeight"); 47 is(a1.offsetHeight, 100, "Wrong a1.offsetHeight"); 48 a2.scrollIntoView(true); 49 is(a1.scrollTop, 100, "Wrong scrollTop value after a2.scrollIntoView(true)"); 50 a2.scrollIntoView(false); 51 is(a1.scrollTop, 200, "Wrong scrollTop value after a2.scrollIntoView(false)"); 52 53 var b1 = document.getElementById('b1'); 54 var b2 = document.getElementById('b2'); 55 isWithFuzz(b1.scrollHeight, 420, 1, "Wrong b1.scrollHeight"); 56 is(b1.offsetHeight, 100, "Wrong b1.offsetHeight"); 57 b2.scrollIntoView(true); 58 is(b1.scrollTop, 100, "Wrong scrollTop value after b2.scrollIntoView(true)"); 59 b2.scrollIntoView(false); 60 is(b1.scrollTop, 220, "Wrong scrollTop value after b2.scrollIntoView(false)"); 61 62 var c1 = document.getElementById('c1'); 63 var c2 = document.getElementById('c2'); 64 isWithFuzz(c1.scrollHeight, 320, 1, "Wrong c1.scrollHeight"); 65 is(c1.offsetHeight, 100, "Wrong c1.offsetHeight"); 66 c2.scrollIntoView(true); 67 is(c1.scrollTop, 100, "Wrong scrollTop value after c2.scrollIntoView(true)"); 68 c2.scrollIntoView(false); 69 isWithFuzz(c1.scrollTop, 220, 1, "Wrong scrollTop value after c2.scrollIntoView(false)"); 70 71 </script> 72 </pre> 73 </body> 74 </html>