Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /html/canvas/element/manual/draw-element-image/onpaint-zindex.tentative.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>canvas.onpaint event should not fire after z-index changes</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
div {
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
}
#childa {
background: blue;
z-index: 1;
}
#childb {
background: green;
z-index: 2;
}
</style>
<canvas id="canvas" width="200" height="200" layoutsubtree>
<div id="childa"></div>
<div id="childb"></div>
</canvas>
<script>
'use strict';
async function waitForOneFrame() {
await new Promise(requestAnimationFrame);
await new Promise(setTimeout);
}
promise_test(async t => {
// Wait a frame.
await waitForOneFrame();
let onPaintCount = 0;
let lastChanged = [];
canvas.onpaint = (event) => {
onPaintCount++;
lastChanged = event.changedElements;
};
// 1. Make a change that causes #childa to change z-order.
childa.style.zIndex = '3';
// 2. Wait a frame and assert that onpaint does not fire.
await waitForOneFrame();
assert_equals(onPaintCount, 0,
'onpaint should not fire after #childa z-order changes.');
// 3. Make a change that causes #childb to change z-order.
childb.style.zIndex = '4';
// 4. Wait a frame and assert that onpaint does not fire.
await waitForOneFrame();
assert_equals(onPaintCount, 0,
'onpaint should not fire after #childb z-order changes.');
}, 'The paint event should not fire after z-index changes');
</script>