<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/gesture-util.js"></script>
<script src="../../resources/percent-based-util.js"></script>
<style>
html, body { margin:0; overflow: hidden; }
</style>
<div>
This tests that a usually overflow: hidden viewport should be scrollable when
scaled. Otherwise, you can't get to content you would have been able to get to
had you not been zoomed it.
</div>
<div id="console"></div>
<div style='font-size:40px; height: 1000px;'>
</div>
<script>
const MOUSE_INPUT = GestureSourceType.MOUSE_INPUT;
async function runTest() {
promise_test( async () => {
assert_true(typeof(window.internals) !== "undefined",
"This test requires window.internals.");
// Force a layout.
document.body.offsetLeft;
internals.setPageScaleFactor(2);
await waitForCompositorCommit();
// Note that with ScrollTopLeftInterop enabled,
// document.scrollingElement is null because document.body is
// potentially scrollable (with overflow:hidden the box can still
// be scrolled programmatically).
assert_equals(window.visualViewport.pageTop, 0);
const { y: pixelsToScrollY } = calculatePixelsToScroll(
document.scrollingElement, 0, 700
);
await smoothScroll(
pixelsToScrollY, 100, 100, MOUSE_INPUT, 'down', SPEED_INSTANT, !isPercentBasedScrollingEnabled()
);
await waitForAnimationEndTimeBased(() => {
return window.visualViewport.pageTop;
});
const expectedPageTop = 300;
assert_equals(
window.visualViewport.pageTop,
expectedPageTop,
"Visual viewport is scrolled fully to the bottom"
);
},
"Viewport with overflow: hidden can still be panned when pinch-zoomed in.");
}
window.addEventListener("load", runTest);
</script>