Bug 1669673 - Part 3: Wrap manual wpt pointerevent_drag_interaction-manual.html into mochitest test; r=smaug

Depends on D93296

Differential Revision: https://phabricator.services.mozilla.com/D93295
This commit is contained in:
Edgar Chen 2020-10-15 23:08:28 +00:00
Родитель 4c27dea7ec
Коммит 6ecb24d4d2
5 изменённых файлов: 182 добавлений и 5 удалений

Просмотреть файл

@ -0,0 +1,103 @@
<html>
<head>
<title>Pointer Events interaction with drag and drop</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="../pointerevent_styles.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<!-- Additional helper script for common checks across event types -->
<script type="text/javascript" src="../pointerevent_support.js"></script>
<script>
var eventList = ['pointerdown', 'pointerup', 'pointercancel', 'gotpointercapture', 'lostpointercapture', 'dragstart', 'mousedown'];
PhaseEnum = {
DndWithoutCapture: 0,
DndWithCapture: 1,
DndWithCaptureMouse: 2,
DndPrevented: 3,
Done: 4,
};
var phase = PhaseEnum.DndWithoutCapture;
var received_events = [];
var pointerId = -1;
function resetTestState() {
phase = PhaseEnum.DndWithoutCapture;
}
function run() {
var test_pointerEvent = setup_pointerevent_test("pointer events vs drag and drop", ['mouse']);
var target0 = document.querySelector('#target0');
var target1 = document.querySelector('#target1');
function handleEvent(e) {
if (e.type == 'pointerdown') {
received_events = [];
if (phase == PhaseEnum.DndWithCapture) {
target0.setPointerCapture(e.pointerId);
} else if (phase == PhaseEnum.DndWithCaptureMouse) {
pointerId = e.pointerId;
}
}
if (e.type == 'mousedown') {
if (phase == PhaseEnum.DndWithCaptureMouse) {
target0.setPointerCapture(pointerId);
}
}
received_events.push(e.type + "@" + e.target.id);
if (e.type == 'dragstart') {
e.dataTransfer.setData('text/plain', 'dragstart test');
if (phase == PhaseEnum.DndPrevented)
e.preventDefault();
}
if (phase == PhaseEnum.DndWithoutCapture && e.type == 'pointercancel') {
phase++;
test(() => {
assert_equals(received_events.join(', '), "pointerdown@target0, mousedown@target0, dragstart@target0, pointercancel@target0", "Pointercancel should be fired with the expected order when drag operation starts.");
}, "Pointercancel when drag operation starts");
} else if (phase == PhaseEnum.DndWithCapture && e.type == 'lostpointercapture') {
test(() => {
assert_equals(received_events.join(', '), "pointerdown@target0, mousedown@target0, gotpointercapture@target0, dragstart@target0, pointercancel@target0, lostpointercapture@target0", "Pointercancel and lostpointercapture should be fired with the expected order when drag operation starts.");
}, "Pointercancel while capturing when drag operation starts");
phase++;
} else if (phase == PhaseEnum.DndWithCaptureMouse && e.type == 'lostpointercapture') {
test(() => {
assert_equals(received_events.join(', '), "pointerdown@target0, mousedown@target0, gotpointercapture@target0, dragstart@target0, pointercancel@target0, lostpointercapture@target0", "Pointercancel and lostpointercapture should be fired with the expected order when drag operation starts.");
}, "Pointercancel while capturing on mousedown when drag operation starts");
phase++;
} else if (phase == PhaseEnum.DndPrevented && e.type == 'pointerup') {
test(() => {
assert_equals(received_events.join(', '), "pointerdown@target0, mousedown@target0, dragstart@target0, pointerup@target1", "Pointerevent stream shouldn't get interrupted when drag is prevented.");
}, "Pointerevent stream when drag is prevented.");
phase++;
test_pointerEvent.done();
}
}
eventList.forEach(function(eventName) {
on_event(target0, eventName, handleEvent);
on_event(target1, eventName, handleEvent);
});
}
</script>
</head>
<body onload="run()">
<h1>Pointer Events interaction with drag and drop</h1>
<h2 id="pointerTypeDescription"></h2>
<h4>
Test Description: This test checks that the pointercancel (and if needed lostpointercapture) is dispatched when drag starts.
<ol>
<li>Press down on the black square.</li>
<li>Move your pointer to purple square and release.</li>
<li>Repeat the first two steps.</li>
<li>Repeat the first two steps once again.</li>
<li>Repeat the first two steps once again.</li>
</ol>
Test passes if the proper behavior of the events is observed.
</h4>
<div id="testContainer">
<div draggable="true" id="target0"></div>
<div id="target1"></div>
</div>
</body>
</html>

Просмотреть файл

@ -85,6 +85,8 @@ support-files = pointerevent_setpointercapture_to_same_element_twice-manual.html
support-files = pointerevent_suppress_compat_events_on_click-manual.html
[test_pointerevent_suppress_compat_events_on_drag_mouse-manual.html]
support-files = pointerevent_suppress_compat_events_on_drag_mouse-manual.html
[test_pointerevent_drag_interaction-manual.html]
support-files = ./html/pointerevent_drag_interaction-manual.html
[test_touch_action.html]
skip-if = os == 'android' # Bug 1312791
support-files =

Просмотреть файл

@ -221,6 +221,16 @@ function sendTouchEvent(int_win, elemId, touchEventType, params) {
}
}
// Helper function to trigger drag and drop.
async function doDragAndDrop(int_win, srcElemId, destElemId, params = {}) {
params.srcElement = int_win.document.getElementById(srcElemId);
params.destElement = int_win.document.getElementById(destElemId);
params.srcWindow = int_win;
params.destWindow = int_win;
params.id = MouseEventHelper.MOUSE_ID;
await synthesizePlainDragAndDrop(params);
}
// Helper function to run Point Event test in a new tab.
function runTestInNewWindow(aFile) {
var testURL =
@ -236,7 +246,10 @@ function runTestInNewWindow(aFile) {
function() {
var e = testWindow.document.createElement("script");
e.type = "text/javascript";
e.src = "mochitest_support_internal.js";
e.src =
aFile.lastIndexOf("/") < 0
? "mochitest_support_internal.js"
: "../mochitest_support_internal.js";
testWindow.document.getElementsByTagName("head")[0].appendChild(e);
},
{ once: true }

Просмотреть файл

@ -0,0 +1,39 @@
<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=1669673
-->
<head>
<meta charset="utf-8">
<title>Test for Bug 1669673</title>
<meta name="author" content="Maksim Lebedev" />
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<script src="/tests/SimpleTest/EventUtils.js"></script>
<script type="text/javascript" src="mochitest_support_external.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
<script type="text/javascript">
SimpleTest.waitForExplicitFinish();
function startTest() {
runTestInNewWindow("html/pointerevent_drag_interaction-manual.html");
}
async function executeTest(int_win) {
info("executeTest");
// DndWithoutCapture
await doDragAndDrop(int_win, "target0", "target1");
// DndWithCapture
await doDragAndDrop(int_win, "target0", "target1");
// DndWithCaptureMouse
await doDragAndDrop(int_win, "target0", "target1");
// DndPrevented
await doDragAndDrop(int_win, "target0", "target1", {
expectCancelDragStart: true,
// Move mouse to target1.
stepX: 2,
stepY: 33
});
}
</script>
</head>
<body>
</body>
</html>

Просмотреть файл

@ -2823,6 +2823,7 @@ function _computeSrcElementFromSrcSelection(aSrcSelection) {
* stepY: The y-axis step for mousemove inside srcElement
* finalX: The final x coordinate inside srcElement
* finalY: The final x coordinate inside srcElement
* id: The pointer event id
* srcWindow: The window for dispatching event on srcElement,
* defaults to the current window object
* destWindow: The window for dispatching event on destElement,
@ -2845,6 +2846,7 @@ async function synthesizePlainDragAndDrop(aParams) {
stepY = 9,
finalX = srcX + stepX * 2,
finalY = srcY + stepY * 2,
id = _getDOMWindowUtils(window).DEFAULT_MOUSE_POINTER_ID,
srcWindow = window,
destWindow = window,
expectCancelDragStart = false,
@ -2916,7 +2918,13 @@ async function synthesizePlainDragAndDrop(aParams) {
await new Promise(r => setTimeout(r, 0));
synthesizeMouse(srcElement, srcX, srcY, { type: "mousedown" }, srcWindow);
synthesizeMouse(
srcElement,
srcX,
srcY,
{ type: "mousedown", id },
srcWindow
);
if (logFunc) {
logFunc(`mousedown at ${srcX}, ${srcY}`);
}
@ -2956,7 +2964,13 @@ async function synthesizePlainDragAndDrop(aParams) {
srcX += stepX;
srcY += stepY;
synthesizeMouse(srcElement, srcX, srcY, { type: "mousemove" }, srcWindow);
synthesizeMouse(
srcElement,
srcX,
srcY,
{ type: "mousemove", id },
srcWindow
);
if (logFunc) {
logFunc(`first mousemove at ${srcX}, ${srcY}`);
}
@ -2965,7 +2979,13 @@ async function synthesizePlainDragAndDrop(aParams) {
srcX += stepX;
srcY += stepY;
synthesizeMouse(srcElement, srcX, srcY, { type: "mousemove" }, srcWindow);
synthesizeMouse(
srcElement,
srcX,
srcY,
{ type: "mousemove", id },
srcWindow
);
if (logFunc) {
logFunc(`second mousemove at ${srcX}, ${srcY}`);
}
@ -2991,7 +3011,7 @@ async function synthesizePlainDragAndDrop(aParams) {
srcElement,
finalX,
finalY,
{ type: "mouseup" },
{ type: "mouseup", id },
srcWindow
);
return;