Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 4 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /pointerevents/pointerevent_after_target_removed.html?mouse - WPT Dashboard Interop Dashboard
- /pointerevents/pointerevent_after_target_removed.html?pen - WPT Dashboard Interop Dashboard
- /pointerevents/pointerevent_after_target_removed.html?touch - WPT Dashboard Interop Dashboard
<!DOCTYPE HTML>
<link rel="help" href="https://w3c.github.io/pointerevents/#firing-events-using-the-pointerevent-interface">
<title>Enter/leave events fired to parent after child is removed</title>
<meta name="variant" content="?mouse">
<meta name="variant" content="?touch">
<meta name="variant" content="?pen">
<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="pointerevent_support.js"></script>
<style>
div.target {
width: 100px;
height: 100px;
}
</style>
<div class="target" id="parent">
<div class="target" id="child">child</div>
</div>
<div id="done">done</div>
<script>
'use strict';
const pointer_type = location.search.substring(1);
const parent = document.getElementById("parent");
const child = document.getElementById("child");
const done = document.getElementById("done");
let event_log = [];
let logged_event_prefix = "";
let received_compat_mouse_events = false;
function logEvent(e) {
if (e.type.startsWith(logged_event_prefix) && e.eventPhase == e.AT_TARGET) {
event_log.push(e.type + "@" + e.target.id);
}
if (e.type.startsWith("mouse")) {
received_compat_mouse_events = true;
}
}
function removeChild() {
child.remove();
event_log.push("(child-removed)");
}
function setup() {
const logged_event_suffixes =
["over", "out", "enter", "leave", "down", "up"];
let targets = document.getElementsByClassName("target");
for (let i = 0; i < targets.length; i++) {
logged_event_suffixes.forEach(suffix => {
targets[i].addEventListener("pointer" + suffix, logEvent);
targets[i].addEventListener("mouse" + suffix, logEvent);
});
}
}
function addPromiseTest(remover_event, tested_event_prefix, expected_events) {
const test_name = `${tested_event_prefix} events from ${pointer_type} `+
`received before/after child removal at ${remover_event}`;
promise_test(async test => {
event_log = [];
logged_event_prefix = tested_event_prefix;
child.addEventListener(remover_event, removeChild);
test.add_cleanup(() => {
child.removeEventListener(remover_event, removeChild);
if (!child.parentElement) {
parent.appendChild(child);
}
});
let done_click_promise = getEvent("click", done);
let actions = new test_driver.Actions()
.addPointer("TestPointer", pointer_type)
.pointerMove(-30, -30, {origin: parent})
.pointerDown()
.pointerUp()
.pointerMove(30, 30, {origin: parent})
.pointerDown()
.pointerUp()
.pointerMove(0, 0, {origin: done})
.pointerDown()
.pointerUp();
await actions.send();
await done_click_promise;
if (tested_event_prefix == "mouse" && !received_compat_mouse_events) {
expected_events = [];
}
assert_equals(event_log.toString(), expected_events.toString(),
"events received");
}, test_name);
}
setup();
const hoverable = pointer_type != "touch";
// Tests for dispatched pointer events.
addPromiseTest(
"pointerdown",
"pointer",
hoverable
? ["pointerover@child", "pointerenter@parent", "pointerenter@child",
"pointerdown@child", "(child-removed)", "pointerover@parent", "pointerup@parent",
"pointerdown@parent", "pointerup@parent",
"pointerout@parent", "pointerleave@parent"]
: ["pointerover@child", "pointerenter@parent", "pointerenter@child", "pointerdown@child",
"(child-removed)", "pointerover@parent",
// pointerup should cause pointerout/pointerleave if the input source is not hoverable.
"pointerup@parent", "pointerout@parent", "pointerleave@parent",
// then, pointerdown should imply a pointermove again.
"pointerover@parent", "pointerenter@parent", "pointerdown@parent",
"pointerup@parent", "pointerout@parent", "pointerleave@parent"]
);
addPromiseTest(
"pointerup",
"pointer",
hoverable
? ["pointerover@child", "pointerenter@parent", "pointerenter@child",
"pointerdown@child", "pointerup@child", "(child-removed)",
"pointerover@parent", "pointerdown@parent", "pointerup@parent",
"pointerout@parent", "pointerleave@parent"]
: ["pointerover@child", "pointerenter@parent", "pointerenter@child",
"pointerdown@child", "pointerup@child", "(child-removed)",
// only pointerleave should be fired if the input source is not hoverable
// because pointerup removed the pointerout event target which is not
// received pointerover event, but the pointer becomes invalid.
"pointerleave@parent",
// then, pointerdown should imply a pointermove again.
"pointerover@parent", "pointerenter@parent", "pointerdown@parent", "pointerup@parent",
"pointerout@parent", "pointerleave@parent"]
);
// Same tests for dispatched compatibility mouse events.
addPromiseTest("mousedown", "mouse", [
"mouseover@child", "mouseenter@parent", "mouseenter@child",
"mousedown@child", "(child-removed)", "mouseover@parent", "mouseup@parent",
"mousedown@parent", "mouseup@parent",
"mouseout@parent", "mouseleave@parent"
]);
addPromiseTest("mouseup", "mouse", [
"mouseover@child", "mouseenter@parent", "mouseenter@child",
"mousedown@child", "mouseup@child", "(child-removed)",
"mouseover@parent", "mousedown@parent", "mouseup@parent",
"mouseout@parent", "mouseleave@parent"
]);
</script>