Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Showing
5 changed files
with
507 additions
and
0 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,142 @@ | ||
<!DOCTYPE HTML> | ||
<html> | ||
<head> | ||
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> | ||
<meta name="timeout" content="long"> | ||
<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 tests = [ | ||
{ | ||
origin: "viewport", | ||
scrollX: 40, | ||
scrollY: 2, | ||
scrollingElement: document.scrollingElement, | ||
targetElement: firstRootSpacer, | ||
title: 'Wheel events are grouped and are not targetted at following elements.', | ||
}, | ||
{ | ||
origin: "viewport", | ||
scrollX: 40, | ||
scrollY: 27, | ||
scrollingElement: document.scrollingElement, | ||
targetElement: secondRootSpacer, | ||
title: 'Wheel events are grouped and are not sent to a child scroll frames.', | ||
}, | ||
{ | ||
origin: innerDiv, | ||
scrollX: 40, | ||
scrollY: 2, | ||
scrollingElement: scrollableDiv, | ||
targetElement: innerDiv, | ||
title: 'Wheel events are not bound to a scroll frame.', | ||
}, | ||
{ | ||
origin: secondInnerSpacer, | ||
scrollX: 40, | ||
scrollY: 2, | ||
scrollingElement: scrollableDiv, | ||
targetElement: secondInnerSpacer, | ||
title: 'Wheel event groups beyond the origin bound have the same target.', | ||
}, | ||
]; | ||
|
||
function runTest() { | ||
let wheelEventTargets = []; | ||
|
||
function pushTargetToWheelEventTargets(e) { | ||
wheelEventTargets.push(e.target) | ||
} | ||
|
||
tests.forEach((testInfo) => { | ||
promise_test(async (t) => { | ||
await waitForCompositorCommit(); | ||
|
||
// Wait some extra time to ensure nothing from the prior test impacts this one. | ||
// At a minimum this should be greater than 500ms to ensure that the wheel events | ||
// in this test are in a new wheel event group | ||
await new Promise(resolve => step_timeout(resolve, 1000)); | ||
|
||
await waitForCompositorCommit(); | ||
|
||
wheelEventTargets = []; | ||
|
||
window.addEventListener("wheel", pushTargetToWheelEventTargets, {passive: 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(testInfo.scrollX, testInfo.scrollY, 0, 30, {origin: testInfo.origin}) | ||
.pause(1) | ||
.scroll(testInfo.scrollX, testInfo.scrollY, 0, 30, {origin: testInfo.origin}) | ||
.pause(1) | ||
.scroll(testInfo.scrollX, testInfo.scrollY, 0, 30, {origin: testInfo.origin}) | ||
.send(); | ||
|
||
// TODO(dlrobertson): Use the scrollend event here to wait for the | ||
// wheel scroll to finish instead of waitForAnimationEnd(). | ||
await waitForAnimationEnd(() => { return testInfo.scrollingElement.scrollTop; }); | ||
await waitForCompositorCommit(); | ||
|
||
testInfo.scrollingElement.scrollTo({top: 0, left: 0, behavior: "instant"}); | ||
|
||
// Ensure that all the captured wheel events are the expected target. | ||
wheelEventTargets.forEach((wheelEventTarget) => { | ||
assert_equals(wheelEventTarget, testInfo.targetElement, | ||
"All wheel events in the group have the same target"); | ||
}); | ||
|
||
window.removeEventListener("wheel", pushTargetToWheelEventTargets, {passive: true}); | ||
}, testInfo.title); | ||
}); | ||
} | ||
</script> | ||
</html> |
80 changes: 80 additions & 0 deletions
80
dom/events/scrolling/wheel-event-groups-target-elements.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 |
---|---|---|
@@ -0,0 +1,80 @@ | ||
<!DOCTYPE HTML> | ||
<html> | ||
<head> | ||
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> | ||
<meta name="timeout" content="long"> | ||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.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="scroll_support.js"></script> | ||
<style> | ||
body { | ||
margin: 0; | ||
padding: 0; | ||
height: 200vh; | ||
} | ||
|
||
.spacer { | ||
width: 100%; | ||
height: 25px; | ||
padding: 0; | ||
margin: 0; | ||
font: 25px/1 Ahem; | ||
} | ||
|
||
</style> | ||
<head> | ||
<body onload=runTest()> | ||
<div id="firstRootSpacer" class="spacer" style="background: green">X</div> | ||
<div id="secondRootSpacer" class="spacer" style="background: blue"></div> | ||
</body> | ||
|
||
<script> | ||
|
||
function runTest() { | ||
promise_test(async (t) => { | ||
await waitForCompositorCommit(); | ||
|
||
// Wait some extra time to ensure nothing from prior tests impacts this one. | ||
// At a minimum this should be greater than 500ms to ensure that the wheel events | ||
// in this test are in a new wheel event group | ||
await new Promise(resolve => step_timeout(resolve, 1000)); | ||
|
||
await waitForCompositorCommit(); | ||
|
||
let wheelEventTargets = []; | ||
|
||
window.addEventListener("wheel", (e) => { | ||
wheelEventTargets.push(e.target); | ||
}, {passive: true}); | ||
|
||
await waitForCompositorCommit(); | ||
|
||
await new test_driver.Actions() | ||
.addWheel("wheel1") | ||
.scroll(12, 12, 0, 30, {origin: "viewport"}) | ||
.pause(1) | ||
.scroll(12, 12, 0, 30, {origin: "viewport"}) | ||
.pause(1) | ||
.scroll(12, 12, 0, 30, {origin: "viewport"}) | ||
.send(); | ||
|
||
// TODO(dlrobertson): Use the scrollend event here to wait for the | ||
// wheel scroll to finish instead of waitForAnimationEnd(). | ||
await waitForAnimationEnd(() => { return document.scrollingElement.scrollTop; }); | ||
await waitForCompositorCommit(); | ||
|
||
document.scrollingElement.scrollTo({top: 0, left: 0, behavior: "instant"}); | ||
|
||
// All of the wheel events should have the first div as their target. | ||
wheelEventTargets.forEach((wheelEventTarget) => { | ||
assert_equals(wheelEventTarget, firstRootSpacer, | ||
"All following wheel events in the group have the same target"); | ||
}); | ||
}, "Wheel event groups do not target the text"); | ||
} | ||
</script> | ||
</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 |
---|---|---|
@@ -0,0 +1,94 @@ | ||
<!DOCTYPE HTML> | ||
<html> | ||
<head> | ||
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> | ||
<meta name="timeout" content="long"> | ||
<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; | ||
} | ||
|
||
</style> | ||
<head> | ||
<body onload=runTest()> | ||
<div id="initialTarget" class="spacer" style="background: red"></div> | ||
<div id="firstRootSpacer" class="spacer" style="background: green"></div> | ||
<div id="secondRootSpacer" class="spacer" style="background: blue"></div> | ||
</body> | ||
|
||
<script> | ||
|
||
function runTest() { | ||
promise_test(async (t) => { | ||
await waitForCompositorCommit(); | ||
|
||
// Wait some extra time to ensure nothing from prior tests impacts this one. | ||
// At a minimum this should be greater than 500ms to ensure that the wheel events | ||
// in this test are in a new wheel event group | ||
await new Promise(resolve => step_timeout(resolve, 1000)); | ||
|
||
await waitForCompositorCommit(); | ||
|
||
let wheelEventTargets = []; | ||
let movedInitialTarget = false; | ||
|
||
// Move the initial element the wheel event is targetted at once we fire the | ||
// first wheel event, then log the subsequent wheel event targets. | ||
function moveInitialElement(e) { | ||
wheelEventTargets.push(e.target); | ||
if (!movedInitialTarget) { | ||
movedInitialTarget = true; | ||
secondRootSpacer.insertAdjacentElement('afterend', e.target); | ||
} | ||
} | ||
window.addEventListener("wheel", moveInitialElement, {passive: true}); | ||
|
||
await waitForCompositorCommit(); | ||
|
||
await new test_driver.Actions() | ||
.addWheel("wheel1") | ||
.scroll(40, 2, 0, 30, {origin: "viewport"}) | ||
.pause(1) | ||
.scroll(40, 2, 0, 30, {origin: "viewport"}) | ||
.pause(1) | ||
.scroll(40, 2, 0, 30, {origin: "viewport"}) | ||
.send(); | ||
|
||
// TODO(dlrobertson): Use the scrollend event here to wait for the | ||
// wheel scroll to finish instead of waitForAnimationEnd(). | ||
await waitForAnimationEnd(() => { return document.scrollingElement.scrollTop; }); | ||
await waitForCompositorCommit(); | ||
|
||
document.scrollingElement.scrollTo({top: 0, left: 0, behavior: "instant"}); | ||
|
||
// The first wheel event should be targetted at the moved element. | ||
assert_equals(wheelEventTargets.shift(), initialTarget, | ||
"Initial wheel event is has the moved element as the target"); | ||
|
||
// All subsequent wheel events following the removal of the initial target | ||
// should have the same event target. | ||
wheelEventTargets.forEach((wheelEventTarget) => { | ||
assert_equals(wheelEventTarget, firstRootSpacer, | ||
"All following wheel events in the group have the same target"); | ||
}); | ||
|
||
window.removeEventListener("wheel", moveInitialElement, {passive: true}); | ||
}, "Move the initial wheel event target."); | ||
} | ||
</script> | ||
</html> |
Oops, something went wrong.