blob: 6a01618c20c1d08b8b8687a5af868b57b61a32ed [file] [log] [blame]
<!DOCTYPE html>
<script src='../../resources/testharness.js'></script>
<script src='../../resources/testharnessreport.js'></script>
<script src='../../resources/gesture-util.js'></script>
<style>
body, html {
margin: 0;
}
#fixed {
position: fixed;
width: 80%;
height: 80%;
top: 10%;
left: 10%;
padding: 20px;
box-sizing: border-box;
background-color: PaleTurquoise;
}
#instructions {
width: 100%;
text-align: center;
}
#scroller {
position: absolute;
border: 5px solid salmon;
clip: rect(0px, 1000px, 500px, 0px);
width: 90%;
height: 150px;
overflow-y: scroll;
}
.spacer {
height: 400%;
background:repeating-linear-gradient(#FFF 0%, #FFF 10%, #000 10%, #000 20%);
}
</style>
<div id="fixed">
<div id="instructions">
<p>
This turquoise box is a position: fixed box. The black-and-white scroller
beelow has a clip region so should be non-composited. The document has
scrolling of its own.
</p>
<p>
Scroll the document down (nothing will move since this box is position:
fixed). Now attempt to scroll over the black-and-white scroller with
wheel or touch. If the box scrolls, the test passes. The document must
not scroll.
</p>
</div>
<div id="scroller">
<div class="spacer"></div>
</div>
</div>
<div style="height:1000px"></div>
<script>
window.onload = async () => {
await waitForCompositorCommit();
const scroller = document.getElementById('scroller');
promise_test(async () => {
assert_equals(scroller.scrollTop, 0, "Scroller starts off unscrolled.");
assert_equals(window.scrollY, 0, "Window starts off unscrolled.");
// Scroll over the document so that the page gets scrolled down.
{
const delta = 1000;
const location = { x: 5, y: 5 };
await smoothScroll(delta,
location.x,
location.y,
GestureSourceType.TOUCH_INPUT,
'down',
SPEED_INSTANT);
// Ensure we've scrolled more than the scroller height to ensure a
// NonFastScrollableRect bug related to scroll would be reproducible
// over the entire scroller.
assert_greater_than(window.scrollY, 150,
"Document should have been scrolled.");
}
// Now perform a scroll over the scroller rect. Ensure we targetted the
// correct scroller.
{
const delta = 100;
const location = elementCenter(scroller);
await smoothScroll(delta,
location.x,
location.y,
GestureSourceType.TOUCH_INPUT,
'down',
SPEED_INSTANT);
assert_greater_than(scroller.scrollTop, 0,
"Scroller should be scrolled.");
}
}, 'Scrolling over an uncomposited scroller inside a composited position' +
': fixed element.');
}
</script>