<html>
<head>
<script src="../resources/js-test.js"></script>
</head>
<body>
<p id="description"></p>
<div id="container" style="height: 100px; overflow: scroll">
<button id="upper_target">Upper Target</button>
<div style="border: 1px solid #000; height: 5000px;">5000-pixel box</div>
<button id="lower_target">Lower Target</button>
</div>
<div id="console"></div>
<script>
description("Tests that scrolling to make an element visible successfully scrolls an arbitrary HTML element that has CSS overflow set to 'scroll'.");
function runTest() {
window.container = document.getElementById("container");
var upperTarget = document.getElementById("upper_target");
var lowerTarget = document.getElementById("lower_target");
if (window.accessibilityController) {
lowerTarget.focus();
var lowerTargetAccessibleObject = accessibilityController.focusedElement;
upperTarget.focus();
var upperTargetAccessibleObject = accessibilityController.focusedElement;
}
// Reset the initial scroll position (since calling focus() can scroll the page too).
container.scrollTop = 0;
shouldBe("container.scrollTop", "0");
// Scroll to make lower target visible and check.
if (window.accessibilityController)
lowerTargetAccessibleObject.scrollToMakeVisible();
var top = lowerTarget.offsetTop - container.offsetTop;
window.minYOffset = top + lowerTarget.offsetHeight - container.offsetHeight;
window.maxYOffset = top;
shouldBe("container.scrollTop >= minYOffset", "true");
shouldBe("container.scrollTop <= maxYOffset", "true");
// Do it again. It shouldn't scroll.
if (window.accessibilityController)
lowerTargetAccessibleObject.scrollToMakeVisible();
var top = lowerTarget.offsetTop - container.offsetTop;
window.minYOffset = top + lowerTarget.offsetHeight - container.offsetHeight;
window.maxYOffset = top;
shouldBe("container.scrollTop >= minYOffset", "true");
shouldBe("container.scrollTop <= maxYOffset", "true");
// Scroll to make upper target visible and check.
if (window.accessibilityController)
upperTargetAccessibleObject.scrollToMakeVisible();
top = upperTarget.offsetTop - container.offsetTop;
window.minYOffset = top + upperTarget.offsetHeight - container.offsetHeight;
window.maxYOffset = top;
shouldBe("container.scrollTop >= minYOffset", "true");
shouldBe("container.scrollTop <= maxYOffset", "true");
finishJSTest();
}
runTest();
</script>
</body>
</html>