Skip to content

Commit

Permalink
Update a pointerevent WPT to match original Interop 2023 target
Browse files Browse the repository at this point in the history
Few months ago we inadvertently added sub-tests for interleaved
handling of PointerEvents and MouseEvents.  We are moving those
sub-tests into separate tentative tests for Issue 1500354, and
updating the original ones to be MouseEvent-only tests.

Bug: 1147998, 1500354
Change-Id: Iedbfe5dd9f7c928534009762dcc8b567279d421a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5008504
Commit-Queue: Mustaq Ahmed <mustaq@chromium.org>
Reviewed-by: Robert Flack <flackr@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1222577}
  • Loading branch information
mustaqahmed authored and chromium-wpt-export-bot committed Nov 9, 2023
1 parent 70bbf27 commit e1e0093
Show file tree
Hide file tree
Showing 4 changed files with 337 additions and 10 deletions.
9 changes: 4 additions & 5 deletions pointerevents/pointerevent_after_target_appended.html
Original file line number Diff line number Diff line change
Expand Up @@ -190,31 +190,30 @@
]);

// Same tests for dispatched compatibility mouse events.
addPromiseTestForNewChild("pointerdown", "mouse", [
addPromiseTestForNewChild("mousedown", "mouse", [
"mouseover@parent", "mouseenter@parent",
"mousedown@parent", "(child-attached)",
"mouseover@child", "mouseenter@child",
"mouseup@child",
"mousedown@child", "mouseup@child",
"mouseout@child", "mouseleave@child", "mouseleave@parent"
]);
addPromiseTestForNewChild("pointerup", "mouse", [
addPromiseTestForNewChild("mouseup", "mouse", [
"mouseover@parent", "mouseenter@parent",
"mousedown@parent", "mouseup@parent", "(child-attached)",
"mouseover@child", "mouseenter@child",
"mousedown@child", "mouseup@child",
"mouseout@child", "mouseleave@child", "mouseleave@parent"
]);

addPromiseTestForMovedChild("pointerdown", "mouse", [
addPromiseTestForMovedChild("mousedown", "mouse", [
"mouseover@child", "mouseenter@parent", "mouseenter@child",
"mousedown@child", "(child-moved)",
"mouseover@child", "mouseenter@child",
"mouseup@child",
"mousedown@child", "mouseup@child",
"mouseout@child", "mouseleave@child", "mouseleave@parent"
]);
addPromiseTestForMovedChild("pointerup", "mouse", [
addPromiseTestForMovedChild("mouseup", "mouse", [
"mouseover@child", "mouseenter@parent", "mouseenter@child",
"mousedown@child", "mouseup@child", "(child-moved)",
"mouseover@child", "mouseenter@child",
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,200 @@
<!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>
10 changes: 5 additions & 5 deletions pointerevents/pointerevent_after_target_removed.html
Original file line number Diff line number Diff line change
Expand Up @@ -118,16 +118,16 @@
]);

// Same tests for dispatched compatibility mouse events.
addPromiseTest("pointerdown", "mouse", [
addPromiseTest("mousedown", "mouse", [
"mouseover@child", "mouseenter@parent", "mouseenter@child",
"(child-removed)", "mouseover@parent", "mousedown@parent", "mouseup@parent",
"mousedown@child", "(child-removed)", "mouseover@parent", "mouseup@parent",
"mousedown@parent", "mouseup@parent",
"mouseout@parent", "mouseleave@parent"
]);
addPromiseTest("pointerup", "mouse", [
addPromiseTest("mouseup", "mouse", [
"mouseover@child", "mouseenter@parent", "mouseenter@child",
"mousedown@child", "(child-removed)", "mouseover@parent", "mouseup@parent",
"mousedown@parent", "mouseup@parent",
"mousedown@child", "mouseup@child", "(child-removed)",
"mouseover@parent", "mousedown@parent", "mouseup@parent",
"mouseout@parent", "mouseleave@parent"
]);
</script>
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
<!DOCTYPE HTML>
<!--
Tentative due to:
https://github.com/w3c/pointerevents/issues/492
-->
<title>
Enter/leave events fired to parent after child is removed
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 removeChild() {
parent.removeChild(child);
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);
});
targets[i].addEventListener("click", 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();

// Tests for dispatched compatibility mouse events
// after DOM modification through pointer events.
addPromiseTest("pointerdown", "mouse", [
"mouseover@child", "mouseenter@parent", "mouseenter@child",
"(child-removed)", "mouseover@parent", "mousedown@parent", "mouseup@parent", "click@parent",
"mousedown@parent", "mouseup@parent", "click@parent",
"mouseout@parent", "mouseleave@parent"
]);
addPromiseTest("pointerup", "mouse", [
"mouseover@child", "mouseenter@parent", "mouseenter@child",
"mousedown@child", "(child-removed)", "mouseover@parent", "mouseup@parent", "click@parent",
"mousedown@parent", "mouseup@parent", "click@parent",
"mouseout@parent", "mouseleave@parent"
]);
</script>

0 comments on commit e1e0093

Please sign in to comment.