-
Notifications
You must be signed in to change notification settings - Fork 3.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Deflake pointerevent_touch-action-inherit_parent-non_touch test
A look at the failures suggests unexpected scrolls, which in turns suggests that we did not pick up the touch-action: none style. The script tag being before the end of the file further suggests that JS execution can begin before loading is complete. Resolved by waiting for onload as well as reading the touch-action style before setting up the event listeners. The style read ensures that any necessary style recalcs are performed. Reformatted the test for 2 space indent and 80-column line length. Bug: 1304759 Change-Id: I730f8a2220ae5dae7e489ed77f5fa99be92b3a68 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3913685 Reviewed-by: Mustaq Ahmed <[email protected]> Commit-Queue: Kevin Ellis <[email protected]> Cr-Commit-Position: refs/heads/main@{#1051889}
- Loading branch information
1 parent
03bd35a
commit 51db598
Showing
1 changed file
with
86 additions
and
68 deletions.
There are no files selected for viewing
154 changes: 86 additions & 68 deletions
154
pointerevents/pointerevent_touch-action-inherit_parent-none_touch.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,79 +1,97 @@ | ||
| <!doctype html> | ||
| <html> | ||
| <head> | ||
| <title>touch-action: inherit from parent: none</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> | ||
| <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> | ||
| .scroller { | ||
| touch-action: none; | ||
| } | ||
| #scrollTarget { | ||
| margin: 10px; | ||
| width: 125vh; | ||
| height: 125vh; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <h1>Pointer Events: effective touch-action is "none" when parent has "none" and target has "auto"</h1> | ||
| <h4 id="desc"> | ||
| Try to scroll DOWN then RIGHT from inside blue rectangle. | ||
| Tap Complete button under the rectangle when done. | ||
| Expectation: no panning | ||
| </h4> | ||
| <p>Note: this test is for touch-devices only</p> | ||
| <div class="scroller" id="target0"> | ||
| <div id="scrollTarget"> | ||
| Try to scroll DOWN then RIGHT from here. | ||
| </div> | ||
| <head> | ||
| <title>touch-action: inherit from parent: none</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> | ||
| <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> | ||
| .scroller { | ||
| touch-action: none; | ||
| } | ||
| #scrollTarget { | ||
| margin: 10px; | ||
| width: 125vh; | ||
| height: 125vh; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <h1>Pointer Events: effective touch-action is "none" when parent has "none" | ||
| and target has "auto"</h1> | ||
| <h4 id="desc"> | ||
| Try to scroll DOWN then RIGHT from inside blue rectangle. | ||
| Tap Complete button under the rectangle when done. | ||
| Expectation: no panning | ||
| </h4> | ||
| <p>Note: this test is for touch-devices only</p> | ||
| <div class="scroller" id="target0"> | ||
| <div id="scrollTarget"> | ||
| Try to scroll DOWN then RIGHT from here. | ||
| </div> | ||
| <input type="button" id="btnComplete" value="Complete test"> | ||
| <script type='text/javascript'> | ||
| let target0 = document.getElementById("target0"); | ||
| let btnComplete = document.getElementById("btnComplete"); | ||
| </div> | ||
| <input type="button" id="btnComplete" value="Complete test"> | ||
| <h1>behavior: none</h1> | ||
| <div id="complete-notice"> | ||
| <p>The following pointer types were detected: | ||
| <span id="pointertype-log"></span>.</p> | ||
| </div> | ||
| <div id="log"></div> | ||
| </body> | ||
| <script type='text/javascript'> | ||
| window.onload = async () => { | ||
| const target0 = document.getElementById("target0"); | ||
| const btnComplete = document.getElementById("btnComplete"); | ||
|
|
||
| let pointerup_received = false; | ||
| let pointercancel_received = false; | ||
| let scroll_received = false; | ||
| assert_equals(getComputedStyle(target0).touchAction,'none', | ||
| 'Expect touch-action:none'); | ||
|
|
||
| target0.addEventListener("pointerup", () => pointerup_received = true); | ||
| target0.addEventListener("pointercancel", () => pointercancel_received = true); | ||
| target0.addEventListener("scroll", () => scroll_received = true); | ||
| let pointerup_received = false; | ||
| let pointercancel_received = false; | ||
| let scroll_received = false; | ||
|
|
||
| let detected_pointertypes = {}; | ||
| add_completion_callback(showPointerTypes); | ||
| target0.addEventListener("pointerup", | ||
| () => pointerup_received = true); | ||
| target0.addEventListener("pointercancel", | ||
| () => pointercancel_received = true); | ||
| target0.addEventListener("scroll", | ||
| () => scroll_received = true); | ||
|
|
||
| promise_test(async () => { | ||
| let button_complete_click = getEvent("click", btnComplete); | ||
| let detected_pointertypes = {}; | ||
| add_completion_callback(showPointerTypes); | ||
|
|
||
| await touchScrollInTarget(scrollTarget, 'down'); | ||
| await touchScrollInTarget(scrollTarget, 'right'); | ||
| await clickInTarget("touch", btnComplete); | ||
| await button_complete_click; | ||
| promise_test(async () => { | ||
| const button_complete_click = getEvent("click", btnComplete); | ||
|
|
||
| assert_true(pointerup_received, | ||
| "expected pointerup event with scroll gestures on touch-action:none"); | ||
| assert_false(pointercancel_received, | ||
| "unexpected pointercancel event with scroll gestures on touch-action:none"); | ||
| assert_false(scroll_received, | ||
| "unexecpted scroll event with scroll gestures on touch-action:none"); | ||
| assert_equals(target0.scrollLeft, 0, "expected scrollLeft 0 in the end of the test"); | ||
| assert_equals(target0.scrollTop, 0, "expected scrollTop 0 in the end of the test"); | ||
| await touchScrollInTarget(scrollTarget, 'down'); | ||
| await touchScrollInTarget(scrollTarget, 'right'); | ||
| await clickInTarget("touch", btnComplete); | ||
| await button_complete_click; | ||
|
|
||
| updateDescriptionComplete(); | ||
| }, "touch-action attribute test"); | ||
| </script> | ||
| <h1>behaviour: none</h1> | ||
| <div id="complete-notice"> | ||
| <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> | ||
| </div> | ||
| <div id="log"></div> | ||
| </body> | ||
| assert_true( | ||
| pointerup_received, | ||
| "expected pointerup event with scroll gestures on " + | ||
| "touch-action:none"); | ||
| assert_false( | ||
| pointercancel_received, | ||
| "unexpected pointercancel event with scroll gestures on " + | ||
| "touch-action:none"); | ||
| assert_false( | ||
| scroll_received, | ||
| "unexpected scroll event with scroll gestures on " + | ||
| "touch-action:none"); | ||
| assert_equals(target0.scrollLeft, 0, | ||
| "expected scrollLeft 0 in the end of the test"); | ||
| assert_equals(target0.scrollTop, 0, | ||
| "expected scrollTop 0 in the end of the test"); | ||
|
|
||
| updateDescriptionComplete(); | ||
| }, "touch-action attribute test"); | ||
| }; | ||
| </script> | ||
| </html> |