<!DOCTYPE html>
<script src='../../resources/testharness.js'></script>
<script src='../../resources/testharnessreport.js'></script>
<script src='../../resources/gesture-util.js'></script>
<style type="text/css">
#outer {
background: #fff;
position: absolute
}
#inner {
max-height: 300px;
max-width: 116px;
overflow-y: auto;
will-change: transform;
}
/* Custom scrollbar so they're updated on the main thread only */
::-webkit-scrollbar {
height: 16px;
width: 16px
}
::-webkit-scrollbar-thumb {
background-color: grey;
}
/* An interesting background so we can tell we're scrolling */
#spacer {
height: 3000px;
width: 100px;
background-color: #FFF;
background-size: 50px 50px;
background-position: 0 0, 25px 25px;
background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
}
</style>
<div id="outer">
<div id="inner">
<div id="spacer"></div>
</div>
<p>
Scroll the above box with wheel or touch. If the scrollbar moves with the
scroll the test passes.
</p>
</div>
<script>
addEventListener('load', async () => {
let scroller = document.getElementById('inner');
// Add style that will cause the PaintLayer and associated compositing
// layers to get deleted.
scroller.style.overflowY = 'visible';
scroller.style.willChange = 'auto';
// Force a style and layout recalc.
scroller.offsetHeight;
// Remove the style so that a new PaintLayer and compositing layers are
// re-added.
scroller.style.willChange = '';
scroller.style.overflowY = '';
await waitForCompositorCommit();
promise_test(async () => {
const delta = 1000;
const location = { x: 50, y: 50 };
await smoothScroll(delta,
location.x,
location.y,
GestureSourceType.TOUCH_INPUT,
'down',
SPEED_INSTANT);
// Will throw exception if window.scrollY not greater than 0.
assert_greater_than(scroller.scrollTop, 0,
"Scroller should be scrolled.");
}, 'Tests that composited scrolling works after de-and-re-compositing scroller.');
});
</script>