<!DOCTYPE html>
<style>
body {
width: 800px;
height: 800px;
overflow-y: hidden;
}
#text-wrapper {
padding: 20px;
overflow-y: scroll;
background-color:#ccc;
height: 40px;
width: 100px;
}
</style>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script type="text/javascript">
var scrollTopBefore;
var maxScrollLeft;
const testCase = async_test(
"If an autoscroll starts from within a " +
"scrollable div, it does not propagate to its non-scrollable document " +
"body. Furthermore, it tests that if the body has only one of overflowX " +
"or overflowY set to hidden, the scrollable axis actually scrolls. Note " +
"that this test is pertaining to crbug.com/531525.");
const finishTest = testCase.step_func_done(() => {
eventSender.mouseUp();
// Because only overflowY:hidden is set, horizontal scroll should happen and
// vertical scroll shouldn't.
assert_equals(document.scrollingElement.scrollTop, scrollTopBefore);
assert_equals(document.scrollingElement.scrollLeft, maxScrollLeft);
document.getElementById('text-wrapper').style.display = 'none';
});
window.onload = function () {
scrollTopBefore = document.scrollingElement.scrollTop;
maxScrollLeft = document.scrollingElement.scrollWidth - window.innerWidth;
var element = document.getElementById('select');
var x = element.offsetLeft + 7;
var y = element.offsetTop + 7;
eventSender.dragMode = false;
eventSender.mouseMoveTo(x, y);
eventSender.mouseDown();
eventSender.mouseMoveTo(x + 795, y);
eventSender.mouseMoveTo(x + 795, y + 795);
window.requestAnimationFrame(finishTest);
}
</script>
<div id="text-wrapper">
<span id="select">This text could be anything but should be long enough to be scrollable.</span>
</div>