<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<script src="../../../../resources/testharness.js"></script>
<script src="../../../../resources/testharnessreport.js"></script>
<script src="../../../../resources/gesture-util.js"></script>
<style type="text/css">
#touchtarget {
width: 100px;
height: 100px;
position: relative;
background: white;
}
::-webkit-scrollbar {
width: 0px;
height: 0px;
}
#movingbox {
width: 100%;
height: 100%;
position: absolute;
word-wrap: break-word;
overflow-y: scroll;
overflow-x: scroll;
display: block;
}
#greenbox {
width: 100px;
height: 100px;
background: green;
padding: 0px;
margin: 0px;
}
#redbox {
width: 100px;
height: 100px;
background: red;
padding: 0px;
margin: 0px;
}
td {
padding: 0px;
}
</style>
<body style="margin:0">
<div id="touchtarget">
<div id="movingbox">
<table border="0" cellspacing="0px" id="tablefoo">
<tr>
<td><div id="redbox"></div></td>
<td><div id="greenbox"></div></td>
</tr>
<tr>
<td><div id="greenbox"></div></td>
<td><div id="greenbox"></div></td>
</tr>
</table>
</div>
</div>
</body>
<script type="text/javascript">
var movingdiv = document.getElementById('movingbox');
var expectedGesturesTotal = 2;
var gesturesOccurred = 0;
var scrollAmountX = [80, 80];
var scrollAmountY = [0, 32];
var scrollEventsOccurred = 0;
var expectedScrollEventsOccurred = 2;
var scrolledElement = movingdiv;
var x = 45;
var y = 12;
function firstGestureScroll() {
testRunner.setPageZoomFactor(0.5);
return smoothScroll(40, x, y, GestureSourceType.TOUCH_INPUT, "right",
SPEED_INSTANT);
}
function secondGestureScroll() {
x = 12;
y = 47;
testRunner.setPageZoomFactor(1.25);
return smoothScroll(40, x, y, GestureSourceType.TOUCH_INPUT, "down",
SPEED_INSTANT);
}
promise_test (async () => {
movingdiv.addEventListener("scroll", recordScroll);
await firstGestureScroll();
await waitFor(checkScrollOffset);
await secondGestureScroll();
await waitFor(checkScrollOffset);
}, 'This tests gesture event scrolling of an overflow div with browser zoom.');
</script>