| <!DOCTYPE html> |
| <head> |
| <script src="../resources/js-test.js"></script> |
| </head> |
| <body> |
| |
| <p id="description"></p> |
| |
| <div id="container" style="width: 100px; overflow: scroll"> |
| <div style="border: 1px solid #000; width: 1000px; height: 5000px;">5000-pixel box</div> |
| <button id="target1">Target</button> |
| <button id="target2">Target</button> |
| <button id="target3">Target</button> |
| <div style="border: 1px solid #000; width: 1000px; height: 5000px;">5000-pixel box</div> |
| </div> |
| |
| <div id="console"></div> |
| |
| <script> |
| description("Tests that scrolling to make an element visible works when the inner scroll container doesn't need to be scrolled, but the other one does."); |
| |
| function runTest() { |
| window.container = document.getElementById("container"); |
| window.target1 = document.getElementById("target1"); |
| window.target2 = document.getElementById("target2"); |
| window.target3 = document.getElementById("target3"); |
| |
| var target1AccessibleObject; |
| var target2AccessibleObject; |
| var target3AccessibleObject; |
| if (window.accessibilityController) { |
| target1.focus(); |
| target1AccessibleObject = accessibilityController.focusedElement; |
| target2.focus(); |
| target2AccessibleObject = accessibilityController.focusedElement; |
| target3.focus(); |
| target3AccessibleObject = accessibilityController.focusedElement; |
| } |
| |
| // Reset the initial scroll positions (since calling focus() can scroll the page too). |
| window.scrollTo(0, 0); |
| container.scrollTop = 0; |
| shouldBeZero("window.pageYOffset"); |
| shouldBeZero("container.scrollTop"); |
| shouldBeGreaterThanOrEqual("target1.getBoundingClientRect().top", "5000"); |
| |
| // Scroll to make the middle target visible. |
| if (window.accessibilityController) |
| target2AccessibleObject.scrollToMakeVisible(); |
| |
| // Instead of testing the exact scroll offsets of the two containers, just test that |
| // the new absolute position of the target is on-screen. |
| shouldBeGreaterThanOrEqual("window.innerHeight", "target2.getBoundingClientRect().bottom"); |
| |
| // Make sure that calling scrollToMakeVisible on target1 and target3 don't result in any |
| // scrolling, because they should already be within the viewport. |
| window.target2top = target2.getBoundingClientRect().top; |
| if (window.accessibilityController) |
| target1AccessibleObject.scrollToMakeVisible(); |
| shouldBe("target2top", "target2.getBoundingClientRect().top"); |
| if (window.accessibilityController) |
| target3AccessibleObject.scrollToMakeVisible(); |
| shouldBe("target2top", "target2.getBoundingClientRect().top"); |
| |
| finishJSTest(); |
| } |
| |
| runTest(); |
| |
| </script> |
| |
| </body> |
| </html> |
