Move movementX/Y calculation for aura pointer-locked state to Blink. (#17295)
This change moves movementX/Y calculation for aura pointer-locked
state to Blink.
On aura, pointer lock use "move to center" to make cursor stays in
the window. With the calculation done in blink side, the move to
center event is marked as synthesize move, so that we can update
the blink side states and do not dispatch the event.
The change is under content feature flag kConsolidatedMovementXY
Bug: 802067
Change-Id: I05360dadd18a2f41481a0de9ef78a05199493857
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1618306
Commit-Queue: Ella Ge <eirage@chromium.org>
Reviewed-by: Ken Buchanan <kenrb@chromium.org>
Reviewed-by: Avi Drissman <avi@chromium.org>
Reviewed-by: David Bokan <bokan@chromium.org>
Reviewed-by: Navid Zolghadr <nzolghadr@chromium.org>
Reviewed-by: Mustaq Ahmed <mustaq@chromium.org>
Cr-Commit-Position: refs/heads/master@{#674237}
diff --git a/pointerevents/pointerevent_support.js b/pointerevents/pointerevent_support.js
index 9a491dd..ae9b55c 100644
--- a/pointerevents/pointerevent_support.js
+++ b/pointerevents/pointerevent_support.js
@@ -325,3 +325,31 @@
.pointerUp()
.send();
}
+
+function pointerHoverInTarget(pointerType, target, direction) {
+ var x_delta = 0;
+ var y_delta = 0;
+ if (direction == "down") {
+ x_delta = 0;
+ y_delta = 10;
+ } else if (direction == "up") {
+ x_delta = 0;
+ y_delta = -10;
+ } else if (direction == "right") {
+ x_delta = 10;
+ y_delta = 0;
+ } else if (direction == "left") {
+ x_delta = -10;
+ y_delta = 0;
+ } else {
+ throw("drag direction '" + direction + "' is not expected, direction should be 'down', 'up', 'left' or 'right'");
+ }
+ var pointerId = pointerType + "Pointer1";
+ return new test_driver.Actions()
+ .addPointer(pointerId, pointerType)
+ .pointerMove(0, 0, {origin: target})
+ .pointerMove(x_delta, y_delta, {origin: target})
+ .pointerMove(2 * x_delta, 2 * y_delta, {origin: target})
+ .pointerMove(3 * x_delta, 3 * y_delta, {origin: target})
+ .send();
+}
diff --git a/pointerevents/pointerlock/pointerevent_movementxy_when_locked.html b/pointerevents/pointerlock/pointerevent_movementxy_when_locked.html
deleted file mode 100644
index bdad97d..0000000
--- a/pointerevents/pointerlock/pointerevent_movementxy_when_locked.html
+++ /dev/null
@@ -1,89 +0,0 @@
-<!doctype html>
-<html>
- <head>
- <title>Pointer Events pointer lock tests</title>
- <meta name="viewport" content="width=device-width">
- <link rel="stylesheet" type="text/css" href="/external/wpt/pointerevents/pointerevent_styles.css">
- <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 type="text/javascript" src="../pointerevent_support.js"></script>
- <style>
- #testContainer {
- touch-action: none;
- user-select: none;
- position: relative;
- }
- </style>
- <script>
- var lock_change_count = 0;
- var mouseeventMovements = []
- var pointereventMovements = []
-
- function resetTestState() {
- }
-
- function run() {
- var test_pointerEvent = setup_pointerevent_test("pointerevent movementX/Y when lock test", ['mouse']);
- var div1 = document.getElementById("target");
-
- on_event(div1, 'pointerdown', function(event) {
- if (lock_change_count == 0)
- div1.requestPointerLock();
- });
- on_event(div1, 'pointerup', function(event) {
- if (lock_change_count == 1)
- document.exitPointerLock();
- });
- on_event(div1, 'pointermove', function(event) {
- if (lock_change_count == 1) {
- pointereventMovements.push(`${event.movementX}, ${event.movementY}`);
- }
- });
- on_event(div1, 'mousemove', function(event) {
- if (lock_change_count == 1) {
- mouseeventMovements.push(`${event.movementX}, ${event.movementY}`);
- }
- });
- on_event(document, 'pointerlockchange', function(event) {
- lock_change_count++;
- if (lock_change_count == 1) {
- test_pointerEvent.step(function() {
- assert_equals(document.pointerLockElement, div1, "document.pointerLockElement should be div1.");
- });
- } else if (lock_change_count == 2) {
- test_pointerEvent.step(function() {
- assert_equals(document.pointerLockElement, null, "document.pointerLockElement should be null.");
- assert_not_equals(mouseeventMovements.length, 0);
- assert_array_equals(pointereventMovements, mouseeventMovements, "pointermove should have movementX/Y same as mousemove");
- });
- test_pointerEvent.done();
- }
- });
-
- // Inject mouse inputs.
- pointerDragInTarget('mouse', target, 'right');
- }
- </script>
- </head>
- <body onload="run()">
- <h1>Pointer Events movement in locked state test</h1>
- <h2 id="pointerTypeDescription"></h2>
- <h4>
- Test Description: This test checks if pointermove.movementX/Y matches mousemove.movementX/Y when pointer is locked.
- <ol>
- <li>Press left button down on the green rectangle and hold it.</li>
- <li>Move the mouse inside the green rectangle.</li>
- </ol>
- </ol>
-
- Test passes if the proper behavior of the events is observed.
- </h4>
- <div id="testContainer">
- <div id="target" style="width:800px;height:250px;background:green"></div>
- </div>
- <div class="spacer"></div>
- </body>
-</html>
diff --git a/pointerevents/pointerlock/pointerevent_movementxy_with_pointerlock.html b/pointerevents/pointerlock/pointerevent_movementxy_with_pointerlock.html
new file mode 100644
index 0000000..00a2b85
--- /dev/null
+++ b/pointerevents/pointerlock/pointerevent_movementxy_with_pointerlock.html
@@ -0,0 +1,123 @@
+<!doctype html>
+<html>
+ <head>
+ <title>Pointer Events pointer lock tests</title>
+ <meta name="viewport" content="width=device-width">
+ <link rel="stylesheet" type="text/css" href="/external/wpt/pointerevents/pointerevent_styles.css">
+ <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 type="text/javascript" src="../pointerevent_support.js"></script>
+ <style>
+ #testContainer {
+ touch-action: none;
+ user-select: none;
+ position: relative;
+ }
+ </style>
+ <script>
+ PhaseEnum = {
+ BeforeLocked: 0,
+ PointerLocked: 1,
+ PointerUnlocked: 2,
+ Done: 3,
+ };
+ var phase = PhaseEnum.BeforeLocked;
+ var last_event;
+ var mouseeventMovements = []
+ var pointereventMovements = []
+
+ function resetTestState() {
+ }
+
+ function run() {
+ var test_pointerEvent = setup_pointerevent_test("pointerevent movementX/Y with pointerlock test", ['mouse']);
+
+ function testPointerMoves(event) {
+ if (last_event) {
+ if (phase == PhaseEnum.PointerLocked){
+ test_pointerEvent.step(function() {
+ assert_equals(event.screenX, last_event.screenX);
+ assert_equals(event.screenY, last_event.screenY);
+ });
+ } else { // BeforeLocked || Unlocked
+ test_pointerEvent.step(function() {
+ assert_equals(event.screenX - last_event.screenX, event.movementX);
+ assert_equals(event.screenY - last_event.screenY, event.movementY);
+ });
+ }
+ }
+ last_event = event;
+ }
+
+ on_event(target, 'click', function(event) {
+ if (phase == PhaseEnum.BeforeLocked)
+ target.requestPointerLock();
+ else if (phase == PhaseEnum.PointerLocked)
+ document.exitPointerLock();
+ else if (phase == PhaseEnum.PointerUnlocked)
+ test_pointerEvent.done();
+ });
+ on_event(target, 'pointermove', function(event) {
+ if (phase == PhaseEnum.PointerLocked) {
+ pointereventMovements.push(`${event.movementX}, ${event.movementY}`);
+ }
+ testPointerMoves(event);
+ });
+ on_event(target, 'mousemove', function(event) {
+ if (phase == PhaseEnum.PointerLocked) {
+ mouseeventMovements.push(`${event.movementX}, ${event.movementY}`);
+ }
+ });
+ on_event(document, 'pointerlockchange', function(event) {
+ phase++;
+ last_event = null;
+ if (phase == PhaseEnum.PointerLocked) {
+ test_pointerEvent.step(function() {
+ assert_equals(document.pointerLockElement, target, "document.pointerLockElement should be target.");
+ });
+ } else if (phase == PhaseEnum.PointerUnlocked) {
+ test_pointerEvent.step(function() {
+ assert_equals(document.pointerLockElement, null, "document.pointerLockElement should be null.");
+ assert_not_equals(mouseeventMovements.length, 0);
+ assert_array_equals(pointereventMovements, mouseeventMovements, "pointermove should have movementX/Y same as mousemove");
+ });
+ }
+ pointerHoverInTarget('mouse', target, 'right').then(function() {
+ return clickInTarget("mouse", target);
+ });
+ });
+
+ // Inject mouse inputs.
+ pointerHoverInTarget('mouse', target, 'right').then(function() {
+ return clickInTarget("mouse", target);
+ });
+ }
+ </script>
+ </head>
+ <body onload="run()">
+ <h1>Pointer Events movement with pointerlock test</h1>
+ <h2 id="pointerTypeDescription"></h2>
+ <h4>
+ Test Description: This test checks pointerevent movementX/Y value with pointerlock.
+ It checks whether movement X/Y matches event.screenX/Y - last_event.screenX/Y when pointer is not locked;
+ And if pointermove.movementX/Y matches mousemove.movementX/Y when pointer is locked.
+ <ol>
+ <li>Move the mouse inside the green rectangle.</li>
+ <li>Click left button on the green rectangle.(Enter pointerlock)</li>
+ <li>Move the mouse around.</li>
+ <li>Click left button again</li>
+ <li>Move the mouse inside the green rectangle.</li>
+ <li>Click left button again to end the test.</li>
+ </ol>
+
+ Test passes if the proper behavior of the events is observed.
+ </h4>
+ <div id="testContainer">
+ <div id="target" style="width:800px;height:250px;background:green"></div>
+ </div>
+ <div class="spacer"></div>
+ </body>
+</html>
