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/layoutsubtree-no-hit-test.tentative.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html>
<title>Canvas.drawElementImage: no hit testing without layoutsubtree</title>
<link rel="author" href="mailto:vmpstr@chromium.org">
<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>
<style>
#child {
width: 100px;
height: 100px;
background: green;
}
#canvas {
width: 200px;
height: 200px;
background: grey;
}
</style>
<canvas id=canvas width="200" height="200">
<div id=child></div>
</canvas>
<script>
function moveMouse(x, y) {
return new test_driver.Actions().pointerMove(x, y).send();
}
function clickMouse(x, y) {
return new test_driver.Actions()
.pointerMove(x, y)
.pointerDown()
.pointerUp()
.addTick()
.send();
}
async_test((t) => {
t.step(() => {
assert_equals(document.elementFromPoint(20, 20), canvas);
assert_equals(document.elementFromPoint(40, 40), canvas);
assert_equals(document.elementFromPoint(100, 100), canvas);
assert_equals(document.elementFromPoint(150, 150), canvas);
});
t.done();
}, "canvas elementFromPoint");
promise_test(() => {
return new Promise((resolve, reject) => {
child.addEventListener("pointerenter", e => reject(`${e.x}, ${e.y}`));
requestAnimationFrame(async () => {
await moveMouse(20, 20);
await moveMouse(40, 40);
await moveMouse(100, 100);
await moveMouse(150, 150);
requestAnimationFrame(resolve);
});
});
}, "canvas mouseenter");
promise_test(() => {
return new Promise((resolve, reject) => {
child.addEventListener("click", e => reject(`${e.x}, ${e.y}`));
requestAnimationFrame(async () => {
await clickMouse(20, 20);
await clickMouse(40, 40);
await clickMouse(100, 100);
await clickMouse(150, 150);
requestAnimationFrame(resolve);
});
});
}, "canvas click");
</script>
</html>