<!DOCTYPE HTML>
<!--
Tentative due to:
https://github.com/w3c/pointerevents/issues/492
-->
<title>
Enter/leave events fired to parent after child is added
right before compat mouse-event
</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 attachChild(e) {
if (e.eventPhase == e.AT_TARGET) {
parent.appendChild(child);
event_log.push("(child-attached)");
}
}
let child_moved = false;
function moveChild(e) {
if (!child_moved) {
child_moved = true;
parent.appendChild(child);
event_log.push("(child-moved)");
}
}
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);
});
targets[i].addEventListener("click", logEvent);
}
}
function addPromiseTestForNewChild(attaching_event,
tested_event_prefix, expected_events) {
const test_name = `${tested_event_prefix} events from ${pointer_type} `+
`received before/after child attached at ${attaching_event}`;
promise_test(async test => {
event_log = [];
logged_event_prefix = tested_event_prefix;
// We started with child attached to ease event listener setup above.
parent.removeChild(child);
parent.addEventListener(attaching_event, attachChild);
test.add_cleanup(() => {
parent.removeEventListener(attaching_event, attachChild);
});
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);
}
function addPromiseTestForMovedChild(mover_event,
tested_event_prefix, expected_events) {
const test_name = `${tested_event_prefix} events from ${pointer_type} `+
`received before/after child moved at ${mover_event}`;
promise_test(async test => {
event_log = [];
logged_event_prefix = tested_event_prefix;
child_moved = false;
child.addEventListener(mover_event, moveChild);
test.add_cleanup(() => {
child.removeEventListener(mover_event, moveChild);
});
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();
// Tests for dispatched compatibility mouse events
// after DOM modification through pointer events.
addPromiseTestForNewChild("pointerdown", "mouse", [
"mouseover@parent", "mouseenter@parent",
"mousedown@parent", "(child-attached)",
"mouseover@child", "mouseenter@child",
"mouseup@child", "click@parent",
"mousedown@child", "mouseup@child", "click@child",
"mouseout@child", "mouseleave@child", "mouseleave@parent"
]);
addPromiseTestForNewChild("pointerup", "mouse", [
"mouseover@parent", "mouseenter@parent",
"mousedown@parent", "mouseup@parent", "(child-attached)", "click@parent",
"mouseover@child", "mouseenter@child",
"mousedown@child", "mouseup@child", "click@child",
"mouseout@child", "mouseleave@child", "mouseleave@parent"
]);
addPromiseTestForMovedChild("pointerdown", "mouse", [
"mouseover@child", "mouseenter@parent", "mouseenter@child",
"mousedown@child", "(child-moved)",
"mouseover@child", "mouseenter@child",
"mouseup@child", "click@child",
"mousedown@child", "mouseup@child", "click@child",
"mouseout@child", "mouseleave@child", "mouseleave@parent"
]);
addPromiseTestForMovedChild("pointerup", "mouse", [
"mouseover@child", "mouseenter@parent", "mouseenter@child",
"mousedown@child", "mouseup@child", "(child-moved)", "click@child",
"mouseover@child", "mouseenter@child",
"mousedown@child", "mouseup@child", "click@child",
"mouseout@child", "mouseleave@child", "mouseleave@parent"
]);
</script>
Codebase Browser
chromium