| <!DOCTYPE html> |
| <head> |
| <style> |
| #bluebox { |
| width: 100px; |
| height: 100px; |
| background: blue; |
| padding: 0px; |
| margin: 0px; |
| } |
| #redbox { |
| width: 100px; |
| height: 100px; |
| background: red; |
| padding: 0px; |
| margin: 0px; |
| } |
| #spacer { |
| width: 2000px; |
| height: 2000px; |
| padding: 0px; |
| margin: 0px; |
| } |
| #container-vertical { |
| width: 200px; |
| height: 100px; |
| } |
| #container-horizontal { |
| width: 200px; |
| height: 100px; |
| } |
| </style> |
| <script src="../../resources/js-test.js"></script> |
| <script> |
| |
| function focusTextboxHorizontal() { |
| document.getElementById('textBox-horizontal').focus(); |
| } |
| |
| function collapseToggleHorizontal() { |
| var element = document.getElementById('container-horizontal'); |
| |
| if (element.clientWidth > 0) |
| element.style.width = "0px"; |
| else |
| element.style.width = "200px"; |
| } |
| |
| function focusTextboxVertical() { |
| document.getElementById('textBox-vertical').focus(); |
| } |
| |
| function collapseToggleVertical() { |
| var element = document.getElementById('container-vertical'); |
| |
| if (element.clientHeight > 0) |
| element.style.height = "0px"; |
| else |
| element.style.height = "100px"; |
| } |
| |
| addEventListener('load', function() { |
| description('Tests that scrollIntoViewIfNeeded works correctly if the ' |
| + 'enclosing div has no height.'); |
| |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| |
| window.scrollTo(0, 190); |
| document.getElementById('scroller-vertical').scrollTop = 1000; |
| document.getElementById('container-vertical').style.height = "0px"; |
| document.getElementById('scroller-horizontal').scrollTop = 0; |
| document.getElementById('container-horizontal').style.width = "0px"; |
| |
| shouldBe("window.scrollY", "190"); |
| |
| document.getElementById('textBox-vertical').scrollIntoViewIfNeeded(); |
| |
| shouldBe("window.scrollY", "190"); |
| |
| shouldBe("window.scrollX", "0"); |
| |
| document.getElementById('textBox-horizontal').scrollIntoViewIfNeeded(); |
| |
| shouldBe("window.scrollX", "0"); |
| }); |
| </script> |
| </head> |
| <body> |
| <div style="height:200px"></div> |
| <div id="container-vertical" > |
| <div id="scroller-vertical" style="height: 100%; overflow: auto"> |
| <input type="text" id="textBox-vertical"> |
| <div id="bluebox"></div><div id="redbox"></div> |
| <div id="bluebox"></div><div id="redbox"></div> |
| <div id="bluebox"></div><div id="redbox"></div> |
| <div id="bluebox"></div><div id="redbox"></div> |
| <div id="bluebox"></div><div id="redbox"></div> |
| </div> |
| </div> |
| <button onclick="focusTextboxVertical();">Focus Textbox</button> |
| <button onclick="collapseToggleVertical();">Collapse Div With Textbox</button> |
| <div style="padding-left: 300px"> |
| <div id="container-horizontal" > |
| <div id="scroller-horizontal" style="height: 100%; overflow: auto"> |
| <div style="padding-left: 1000px"><input type="text" id="textBox-horizontal"></div> |
| </div> |
| </div> |
| <button onclick="focusTextboxHorizontal();">Focus Textbox</button> |
| <button onclick="collapseToggleHorizontal();">Collapse Div With Textbox</button> |
| </div> |
| <div id="console"></div> |
| <div id="spacer"></div> |
| </body> |
