<html> <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=332246 --> <head> <title>Test for Bug 332246 - scrollIntoView(false) doesn't work correctly for inline elements that wrap at multiple lines</title> <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script> <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> </head> <body> <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=332246">Mozilla Bug 332246</a> <p id="display"></p> <div id="content"> <div id="a1" style="height: 100px; width: 100px; overflow: hidden; outline:1px dotted black;"> <div style="height: 100px"></div> <a id="a2" href="#" style="display:block; background:yellow; height:200px;">Top</a> <div style="height: 100px"></div> </div> <div id="b1" style="height: 100px; width: 100px; overflow: hidden; outline:1px dotted black;"> <div style="height: 100px"></div> <div id="b2" href="#" style="border:10px solid black; background:yellow; height:200px;"></div> <div style="height: 100px"></div> </div> <br> <div id="c1" style="height: 100px; width: 100px; overflow: hidden; position: relative; outline:1px dotted black;"> <div id="c2" style="border: 10px solid black; height: 200px; width: 50px; position: absolute; top: 100px;"></div> <div style="height: 100px"></div> </div> </div> <pre id="test"> <script class="testbody" type="text/javascript"> /** Test for Bug 332246 **/ function isWithFuzz(itIs, itShouldBe, fuzz, description) { ok(Math.abs(itIs - itShouldBe) <= fuzz, `${description} - expected a value between ${itShouldBe - fuzz} and ${itShouldBe + fuzz}, got ${itIs}`); } var a1 = document.getElementById('a1'); var a2 = document.getElementById('a2'); isWithFuzz(a1.scrollHeight, 400, 1, "Wrong a1.scrollHeight"); is(a1.offsetHeight, 100, "Wrong a1.offsetHeight"); a2.scrollIntoView(true); is(a1.scrollTop, 100, "Wrong scrollTop value after a2.scrollIntoView(true)"); a2.scrollIntoView(false); is(a1.scrollTop, 200, "Wrong scrollTop value after a2.scrollIntoView(false)"); var b1 = document.getElementById('b1'); var b2 = document.getElementById('b2'); isWithFuzz(b1.scrollHeight, 420, 1, "Wrong b1.scrollHeight"); is(b1.offsetHeight, 100, "Wrong b1.offsetHeight"); b2.scrollIntoView(true); is(b1.scrollTop, 100, "Wrong scrollTop value after b2.scrollIntoView(true)"); b2.scrollIntoView(false); is(b1.scrollTop, 220, "Wrong scrollTop value after b2.scrollIntoView(false)"); var c1 = document.getElementById('c1'); var c2 = document.getElementById('c2'); isWithFuzz(c1.scrollHeight, 320, 1, "Wrong c1.scrollHeight"); is(c1.offsetHeight, 100, "Wrong c1.offsetHeight"); c2.scrollIntoView(true); is(c1.scrollTop, 100, "Wrong scrollTop value after c2.scrollIntoView(true)"); c2.scrollIntoView(false); isWithFuzz(c1.scrollTop, 220, 1, "Wrong scrollTop value after c2.scrollIntoView(false)"); </script> </pre> </body> </html>