Skip to content

Commit f9e5c1d

Browse files
David Awogbemilamoz-wptsync-bot
David Awogbemila
authored and
moz-wptsync-bot
committed
Bug 1941839 [wpt PR 50101] - [css-scroll-snap-2] Add shadow DOM test for scroll-initial-target, a=testonly
Automatic update from web-platform-tests [css-scroll-snap-2] Add shadow DOM test for scroll-initial-target Per request[1] from HTML spec reviewers, this adds a test that scroll containers in shadow trees also honor their scroll-initial-targets. [1] whatwg/html#10759 (review) Bug: 40909052 Change-Id: I5ff8029dbe043ebdcf3cc18473e014140247c0e3 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6165203 Reviewed-by: Steve Kobes <[email protected]> Commit-Queue: David Awogbemila <[email protected]> Cr-Commit-Position: refs/heads/main@{#1406768} -- wpt-commits: d3a159497499ebf65e5915d536c0379264eb0669 wpt-pr: 50101
1 parent f96aeb7 commit f9e5c1d

File tree

1 file changed

+136
-0
lines changed

1 file changed

+136
-0
lines changed

‎testing/web-platform/tests/css/css-scroll-snap-2/scroll-initial-target/scroll-initial-target-shadow-dom.tentative.html

+136
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title> CSS Scroll Snap 2 Test: scroll-initial-target for scroller in shadow DOM</title>
5+
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#scroll-initial-target">
6+
<script src="/resources/testharness.js"></script>
7+
<script src="/resources/testharnessreport.js"></script>
8+
</head>
9+
<body>
10+
<style>
11+
.space {
12+
width: 50px;
13+
height: 500px;
14+
}
15+
.scroller {
16+
width: 100px;
17+
height: 100px;
18+
overflow: scroll;
19+
border: solid 2px;
20+
}
21+
.purpleborder {
22+
border: solid 2px purple;
23+
}
24+
.target {
25+
scroll-initial-target: nearest;
26+
width: 50px;
27+
height: 50px;
28+
background-color: green
29+
}
30+
#wrapper {
31+
/* Hide everything initially to ensure that the test sees the scroll */
32+
/* events from the scrolls to the scroll-initial-targets. */
33+
display: none;
34+
}
35+
</style>
36+
<div id="wrapper">
37+
<div id="scroller_before" class="scroller">
38+
<div class="space"></div>
39+
<div class="target"></div>
40+
</div>
41+
<div id="shadowDomHost">
42+
<template shadowrootmode="open">
43+
<style>
44+
.space {
45+
width: 50px;
46+
height: 500px;
47+
}
48+
.scroller {
49+
width: 100px;
50+
height: 100px;
51+
overflow: scroll;
52+
border: solid 2px red;
53+
}
54+
.target {
55+
scroll-initial-target: nearest;
56+
width: 50px;
57+
height: 50px;
58+
background-color: green
59+
}
60+
</style>
61+
<slot name="slot1"></slot>
62+
<div id="shadow_scroller" class="scroller">
63+
<div id="space" class="space"></div>
64+
<div id="target" class="target"></div>
65+
</div>
66+
<slot name="slot2"></slot>
67+
</template>
68+
<div id="slot1scroller" slot="slot1" class="purpleborder scroller">
69+
<div id="space" class="space"></div>
70+
<div class="target"></div>
71+
</div>
72+
<div id="slot2scroller" slot="slot2" class="purpleborder scroller">
73+
<div id="space" class="space"></div>
74+
<div class="target"></div>
75+
</div>
76+
</div>
77+
<div id="scroller_after" class="scroller">
78+
<div class="space"></div>
79+
<div class="target"></div>
80+
</div>
81+
</div>
82+
<script>
83+
const scroller_before = document.getElementById("scroller_before");
84+
const slot1scroller = document.getElementById("slot1scroller");
85+
const shadow_scroller =
86+
shadowDomHost.shadowRoot.querySelector(".scroller");
87+
const slot2scroller = document.getElementById("slot2scroller");
88+
const scroller_after = document.getElementById("scroller_after");
89+
90+
const scrollers = [scroller_before, slot1scroller, shadow_scroller,
91+
slot2scroller, scroller_after];
92+
const scroll_log = [];
93+
94+
function setUpLogging() {
95+
let promises = [];
96+
for (const scroller of scrollers) {
97+
promises.push(new Promise((resolve) => {
98+
scroller.addEventListener("scroll", () => {
99+
scroll_log.push(scroller.id);
100+
resolve();
101+
}, { once: true });
102+
}));
103+
}
104+
return Promise.all(promises);
105+
}
106+
107+
function verifyScrollPositions() {
108+
for (const scroller of scrollers) {
109+
// Each scroller's target is at the scroller's very bottom so the
110+
// scroller should be scrolled all the way down.
111+
assert_equals(scroller.scrollTop,
112+
scroller.scrollHeight - scroller.clientHeight,
113+
`${scroller.id} is scrolled to its target`);
114+
}
115+
}
116+
117+
promise_test(async (t) => {
118+
// Arm the promises that should be resolved due to scrolling to the
119+
// scroll-initial-targets.
120+
const scroll_promises = setUpLogging();
121+
122+
const wrapper = document.getElementById("wrapper");
123+
wrapper.style.display = "initial";
124+
125+
await scroll_promises;
126+
127+
// Verify that the order in which the scroll containers were scrolled
128+
// matches flat tree order.
129+
assert_array_equals(scroll_log, ["scroller_before", "slot1scroller",
130+
"shadow_scroller", "slot2scroller", "scroller_after"]);
131+
132+
verifyScrollPositions();
133+
}, "scroll-initial-target in shadow DOM is scrolled to initially.");
134+
</script>
135+
</body>
136+
</html>

0 commit comments

Comments
 (0)