Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Showing
2 changed files
with
213 additions
and
3 deletions.
There are no files selected for viewing
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
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 |
---|---|---|
@@ -0,0 +1,211 @@ | ||
<!DOCTYPE HTML> | ||
<html> | ||
<head> | ||
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> | ||
<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="scroll_support.js"></script> | ||
<style> | ||
body { | ||
margin: 0; | ||
padding: 0; | ||
height: 200vh; | ||
} | ||
|
||
.spacer { | ||
width: 100%; | ||
height: 25px; | ||
padding: 0; | ||
margin: 0; | ||
} | ||
|
||
#scrollableDiv { | ||
width: 100%; | ||
height: 500px; | ||
overflow: scroll; | ||
background: yellow; | ||
} | ||
|
||
#innerDiv { | ||
width: 100%; | ||
height: 4000px; | ||
background: red; | ||
} | ||
|
||
</style> | ||
<head> | ||
<body onload=runTest()> | ||
<div id="firstRootSpacer" class="spacer" style="background: cyan"></div> | ||
<div id="secondRootSpacer" class="spacer" style="background: magenta"></div> | ||
<div id="scrollableDiv"> | ||
<div id="innerDiv"> | ||
<div id="firstInnerSpacer" class="spacer" style="background: green"> | ||
</div> | ||
<div id="secondInnerSpacer" class="spacer" style="background: blue"> | ||
</div> | ||
</div> | ||
</div> | ||
</body> | ||
|
||
<script> | ||
|
||
let scrollable_wheel_event = false; | ||
function onScrollableWheelEvent(e) { | ||
e.stopPropagation(); | ||
scrollable_wheel_event = true; | ||
} | ||
|
||
let inner_wheel_event = false; | ||
function onInnerWheelEvent(e) { | ||
e.stopPropagation(); | ||
e.stopPropagation(); | ||
inner_wheel_event = true; | ||
} | ||
|
||
function runTest() { | ||
promise_test(async (t) => { | ||
scrollableDiv.addEventListener("wheel", onScrollableWheelEvent); | ||
innerDiv.addEventListener("wheel", onInnerWheelEvent); | ||
|
||
// Start a wheel scroll above the scrollable child element, and | ||
// scroll over the child element to ensure that wheel events | ||
// part of this transaction have the root element as their target. | ||
await new test_driver.Actions() | ||
.addWheel("wheel1") | ||
.scroll(40, 26, 0, 20, {origin: "viewport"}) | ||
.scroll(40, 26, 0, 100, {origin: "viewport"}) | ||
.pause(1) | ||
.scroll(40, 26, 0, 50, {origin: "viewport"}) | ||
.pause(500) | ||
.send(); | ||
|
||
await waitForCompositorCommit(); | ||
await waitForAnimationEnd(() => { return document.scrollingElement.scrollTop; }); | ||
|
||
assert_equals(inner_wheel_event, false, | ||
"Wheel event was not fired to the inner element"); | ||
assert_equals(scrollable_wheel_event, false, | ||
"Wheel event was not fired to the scrollable child"); | ||
|
||
scrollableDiv.removeEventListener("wheel", onScrollableWheelEvent); | ||
scrollableDiv.removeEventListener("wheel", onInnerWheelEvent); | ||
}, 'Wheel events are grouped and are not sent to a child element'); | ||
|
||
promise_test(async (t) => { | ||
await new Promise(resolve => setTimeout(resolve, 1000)); | ||
|
||
document.scrollingElement.scrollTo({top: 0, left: 0, behavior: "instant"}); | ||
|
||
await waitForCompositorCommit(); | ||
|
||
let expectedTarget = firstRootSpacer; | ||
let eventTargettedExpectedElement = true; | ||
|
||
function targetIsExpected(e) { | ||
if (e.target != expectedTarget) { | ||
eventTargettedExpectedElement = false; | ||
} | ||
} | ||
|
||
await new Promise(resolve => setTimeout(resolve, 1000)); | ||
|
||
window.addEventListener("wheel", targetIsExpected); | ||
|
||
// Start a wheel event over the first spacer in the root element, and ensure | ||
// that all the following wheel events have it as the target. | ||
await new test_driver.Actions() | ||
.addWheel("wheel1") | ||
.scroll(30, 1, 0, 20, {origin: "viewport"}) | ||
.scroll(30, 1, 0, 20, {origin: "viewport"}) | ||
.scroll(30, 1, 0, 20, {origin: "viewport"}) | ||
.send(); | ||
|
||
await waitForCompositorCommit(); | ||
await waitForAnimationEnd(() => { return document.scrollingElement.scrollTop; }); | ||
|
||
assert_equals(eventTargettedExpectedElement, true, | ||
"All events targetted the first root spacer element"); | ||
|
||
window.removeEventListener("wheel", targetIsExpected); | ||
}, 'All elements in a wheel event group have the same target'); | ||
|
||
promise_test(async (t) => { | ||
await new Promise(resolve => setTimeout(resolve, 1000)); | ||
|
||
await new Promise(resolve => setTimeout(resolve, 1000)); | ||
document.scrollingElement.scrollTo({top: 0, left: 0}); | ||
|
||
scrollable_wheel_event = false; | ||
inner_wheel_event = false; | ||
|
||
await waitForCompositorCommit(); | ||
|
||
await new Promise(resolve => setTimeout(resolve, 1000)); | ||
|
||
scrollableDiv.addEventListener("wheel", onScrollableWheelEvent); | ||
innerDiv.addEventListener("wheel", onInnerWheelEvent); | ||
|
||
// Scroll in the child and ensure that wheel events in the group are not | ||
// directly fired to the scrollable element. | ||
await new test_driver.Actions() | ||
.addWheel("wheel1") | ||
.scroll(40, 26, 0, 20, {origin: innerDiv}) | ||
.scroll(40, 26, 0, 100, {origin: innerDiv}) | ||
.pause(1) | ||
.scroll(40, 26, 0, 50, {origin: innerDiv}) | ||
.pause(500) | ||
.send(); | ||
|
||
assert_equals(inner_wheel_event, true, "Wheel event was fired to inner div"); | ||
assert_equals(scrollable_wheel_event, false, "Wheel event was not fired to scrollable child"); | ||
}, 'Wheel events are not bound to a scroll frame'); | ||
|
||
promise_test(async (t) => { | ||
await new Promise(resolve => setTimeout(resolve, 1000)); | ||
|
||
document.scrollingElement.scrollTo({top: 0, left: 0}); | ||
scrollableDiv.scrollTo({top: 0, left: 0}); | ||
scrollable_wheel_event = false; | ||
inner_wheel_event = false; | ||
|
||
await waitForCompositorCommit(); | ||
|
||
await new Promise(resolve => setTimeout(resolve, 1000)); | ||
|
||
scrollableDiv.addEventListener("wheel", onScrollableWheelEvent); | ||
innerDiv.addEventListener("wheel", onInnerWheelEvent); | ||
|
||
let first_spacer_wheel_event = false; | ||
firstInnerSpacer.addEventListener("wheel", (e) => { | ||
e.stopPropagation(); | ||
first_spacer_wheel_event = true; | ||
}); | ||
|
||
let second_spacer_wheel_event = false; | ||
secondInnerSpacer.addEventListener("wheel", (e) => { | ||
e.stopPropagation(); | ||
second_spacer_wheel_event = true; | ||
}); | ||
|
||
// Scroll past the boundary of the original element to ensure all events in | ||
// group have the same target. | ||
await new test_driver.Actions() | ||
.addWheel("wheel1") | ||
.scroll(40, 2, 0, 20, {origin: firstInnerSpacer}) | ||
.scroll(40, 2, 0, 100, {origin: firstInnerSpacer}) | ||
.pause(1) | ||
.scroll(40, 2, 0, 50, {origin: firstInnerSpacer}) | ||
.pause(500) | ||
.send(); | ||
|
||
assert_equals(first_spacer_wheel_event, true, "Wheel event was fired to the first spacer"); | ||
assert_equals(second_spacer_wheel_event, false, "Wheel event should not be fired to the second spacer"); | ||
assert_equals(inner_wheel_event, false, "Wheel event should not be fired to inner div"); | ||
assert_equals(scrollable_wheel_event, false, "Wheel event was not fired to scrollable child"); | ||
}, 'Wheel event groups beyond the origin bound have the same target'); | ||
} | ||
</script> | ||
</html> |