Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 1 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /html/canvas/element/manual/draw-element-image/onpaint-after-scroll.tentative.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>canvas.onpaint should fire for scrolls</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="/dom/events/scrolling/scroll_support.js"></script>
<style>
#target {
width: 150px;
height: 150px;
}
#scroller {
width: 100px;
height: 100px;
overflow-y: scroll;
}
#scrolled {
width: 50px;
height: 150px;
background: green;
border-top: 50px solid red;
}
</style>
<canvas id="canvas" width="200" height="200" layoutsubtree>
<div id="target">
<div id="scroller">
<div id="scrolled"></div>
</div>
</div>
</canvas>
<script>
'use strict';
async function waitForOneFrame() {
await new Promise(requestAnimationFrame);
await new Promise(setTimeout);
}
promise_test(async t => {
const ctx = document.getElementById('canvas').getContext('2d');
let onPaintCount = 0;
let lastChanged = [];
canvas.onpaint = (event) => {
onPaintCount++;
lastChanged = event.changedElements;
};
// Request an initial paint.
canvas.requestPaint();
await waitForOneFrame();
assert_equals(onPaintCount, 1, 'There should be an initial onpaint');
await waitForOneFrame();
assert_equals(onPaintCount, 1, 'Only one initial onpaint should fire');
let scrollEndPromise = waitForScrollEndFallbackToDelayWithoutScrollEvent(scroller);
await new test_driver.Actions()
.scroll(0, 0, 0, 100, { origin: scroller, duration: 100 })
.send();
await scrollEndPromise;
await waitForOneFrame();
assert_equals(scroller.scrollTop, 100);
assert_greater_than(onPaintCount, 1, 'onpaint should fire for scrolls');
assert_array_equals(lastChanged, [target],
'#target should be changed when a descendant scrolls');
}, 'onpaint should fire for scrolls');
</script>