Update pointerevents test pointerevent_coordinates_when_locked.html (#16561)
* Update pointerevents/pointerlock/pointerevent_coordinates_when_locked.html
close #16406
* update test instruction
diff --git a/pointerevents/pointerlock/pointerevent_coordinates_when_locked.html b/pointerevents/pointerlock/pointerevent_coordinates_when_locked.html
index 9dfd5e1..a793272 100644
--- a/pointerevents/pointerlock/pointerevent_coordinates_when_locked.html
+++ b/pointerevents/pointerlock/pointerevent_coordinates_when_locked.html
@@ -3,7 +3,7 @@
<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">
+ <link rel="stylesheet" type="text/css" href="../pointerevent_styles.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
@@ -36,21 +36,19 @@
var test_pointerEvent = setup_pointerevent_test("Test pointerevent coordinates when pointer is locked", ['mouse']);
var div1 = document.getElementById("target");
- on_event(div1, 'pointerdown', function(event) {
+ on_event(div1, 'click', function(event) {
if (test_state == kStateInit)
div1.requestPointerLock();
- });
- on_event(div1, 'pointerup', function(event) {
- if (test_state == kStateLocked)
+ else if (test_state == kStateLocked)
document.exitPointerLock();
});
on_event(div1, 'pointermove', function(event) {
if (test_state == kStateLocked) {
test_pointerEvent.step(function() {
- assert_equals(last_pointer_client_pos['x'], event.clientX)
- assert_equals(last_pointer_client_pos['y'], event.clientY)
- assert_equals(last_pointer_screen_pos['x'], event.screenX)
- assert_equals(last_pointer_screen_pos['y'], event.screenY)
+ assert_equals(event.clientX, last_pointer_client_pos['x'], 'clientX')
+ assert_equals(event.clientY, last_pointer_client_pos['y'], 'clientY')
+ assert_equals(event.screenX, last_pointer_screen_pos['x'], 'screenX')
+ assert_equals(event.screenY, last_pointer_screen_pos['y'], 'screenY')
});
} else {
last_pointer_client_pos = {'x': event.clientX, 'y': event.clientY}
@@ -63,6 +61,17 @@
test_pointerEvent.step(function() {
assert_equals(document.pointerLockElement, div1, "document.pointerLockElement should be div1.");
});
+
+ var actions = new test_driver.Actions();
+ pos_x = div1.offsetWidth / 2;
+ pos_y = div1.offsetHeight / 2;
+ for (var i = 0; i < 10; i++) {
+ // Move left and up.
+ pos_x += 10;
+ pos_y -= 10;
+ actions.pointerMove(pos_x, pos_y, {origin: div1});
+ }
+ actions.pointerDown().pointerUp().send();
} else if (test_state == kStateLocked) {
test_state = kStateUnlocked;
test_pointerEvent.step(function() {
@@ -72,18 +81,7 @@
}
});
- var actions = new test_driver.Actions();
- actions.pointerMove(/* x = */ 0, /* y = */ 0, {origin: div1}).pointerDown();
-
- pos_x = div1.offsetWidth / 2;
- pos_y = div1.offsetHeight / 2;
- for (var i = 0; i < 10; i++) {
- // Alternatively move left/right and up/down.
- pos_x += ((-1)**i) * i * 10;
- pos_y -= ((-1)**i) * i * 10;
- actions.pointerMove(pos_x, pos_y, {origin: div1});
- }
- actions.pointerUp().send();
+ new test_driver.Actions().pointerMove(/* x = */ 0, /* y = */ 0, {origin: div1}).pointerDown().pointerUp().send();
}
</script>
</head>
@@ -93,16 +91,16 @@
<h4>
Test Description: This test checks the pointer event coordinates stays unchanged 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>
- <li>Release mouse button. </li>
+ <li>Click left mouse button on the green rectangle.</li>
+ <li>Move the mouse around.</li>
+ <li>Click left mouse button again. </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 id="target" style="width:200px;height:200px;background:green"></div>
</div>
<div class="spacer"></div>
</body>
