Skip to content

Commit

Permalink
Deflake pointerevent_touch-action-inherit_parent-none_touch.html
Browse files Browse the repository at this point in the history 
Rewrote the test to use promise_test and a simpler action/event
sequencing in an attempt to get rid of the flaky behavior.

Bug: 1304759
Change-Id: I9285c0c56f98544629e873c643ceef9673ff0d04
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3820163
Commit-Queue: Mustaq Ahmed <mustaq@chromium.org>
Reviewed-by: Robert Flack <flackr@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1033154}
  • Loading branch information
@mustaqahmed
mustaqahmed authored and Chromium LUCI CQ committed Aug 9, 2022
1 parent eb359e9 commit fa27400
Show file tree
Hide file tree
Showing 2 changed files with 43 additions and 92 deletions.
133 changes: 42 additions & 91 deletions ...tests/external/wpt/pointerevents/pointerevent_touch-action-inherit_parent-none_touch.html
View file
Expand Up @@ -2,8 +2,6 @@
<html>
<head>
<title>touch-action: inherit from parent: none</title>
<meta name="timeout" content="long">
<meta name="assert" content="TA15.8 - when a user touches an element, the effect of that touch is determined by the value of the touch-action property and the default touch behaviors on the element and its ancestors. Scrollable-Parent: `none` Child: `auto`">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<script src="/resources/testharness.js"></script>
Expand All @@ -14,115 +12,68 @@
<script src="pointerevent_support.js"></script>
<style>
.scroller {
touch-action: none;
touch-action: none;
}
#scrollTarget {
margin: 10px;
width: 125vh;
height: 125vh;
}
</style>
</head>
<body onload="run()">
<h1>Pointer Events touch-action attribute support</h1>
<h4 id="desc">Test Description: Try to scroll element DOWN then RIGHT inside blue rectangle. Tap Complete button under the rectangle when done. Expected: no panning</h4>
<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">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
Try to scroll DOWN then RIGHT from here.
</div>
</div>
<input type="button" id="btnComplete" value="Complete test">
<script type='text/javascript'>
var detected_pointertypes = {};
add_completion_callback(showPointerTypes);
let target0 = document.getElementById("target0");
let btnComplete = document.getElementById("btnComplete");

var test_touchaction = async_test("touch-action attribute test");
let pointerup_received = false;
let pointercancel_received = false;
let scroll_received = false;

function run() {
var target0 = document.getElementById("target0");
var btnComplete = document.getElementById("btnComplete");
var actions_promise;
target0.addEventListener("pointerup", () => pointerup_received = true);
target0.addEventListener("pointercancel", () => pointercancel_received = true);
target0.addEventListener("scroll", () => scroll_received = true);

// Check if touch-action attribute works properly for embedded divs
//
// TA: 15.8
on_event(btnComplete, 'click', function(event) {
detected_pointertypes[event.pointerType] = true;
test_touchaction.step(function() {
assert_equals(target0.scrollLeft, 0, "scroll x offset should be 0 in the end of the test");
assert_equals(target0.scrollTop, 0, "scroll y offset should be 0 in the end of the test");
});
let detected_pointertypes = {};
add_completion_callback(showPointerTypes);

// Make sure the test finishes after all the input actions are completed.
actions_promise.then( () => {
test_touchaction.done();
});
updateDescriptionComplete();
});
promise_test(async () => {
let button_complete_click = getEvent("click", btnComplete);

on_event(target0, 'scroll', function(event) {
test_touchaction.step(failOnScroll, "scroll received while touch-action is none");
});
await touchScrollInTarget(scrollTarget, 'down');
await touchScrollInTarget(scrollTarget, 'right');
await clickInTarget("touch", btnComplete);
await button_complete_click;

// Inject touch inputs.
actions_promise = touchScrollInTarget(scrollTarget, 'down').then(function() {
return touchScrollInTarget(scrollTarget, 'right');
}).then(function() {
return clickInTarget("touch", 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");

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>
</html>
</html>
2 changes: 1 addition & 1 deletion .../blink/web_tests/external/wpt/pointerevents/pointerevent_touch-action-modified_touch.html
View file
Expand Up @@ -42,7 +42,7 @@ <h4 id="desc">
document.body.addEventListener("pointerdown", () => target.parentElement.removeChild(target));
document.body.addEventListener("pointercancel", () => pointercancel_received = true);

var detected_pointertypes = {};
let detected_pointertypes = {};
add_completion_callback(showPointerTypes);

promise_test(async () => {
Expand Down

0 comments on commit fa27400

Please sign in to comment.