Skip to content

Commit 375f26a

Browse files
danielsakhapovchromium-wpt-export-bot
danielsakhapov
authored and
chromium-wpt-export-bot
committed
[carousel] Support ::scroll-button(*) activation on root element
This CL also fixes scroll propagation for root elements with ::scroll-marker-group which is tested by: root-scroll-marker-activation-and-scroll-tracking.html Bug: 401453191 Change-Id: I0ea8a34002016558b89ba8cd320e6f7d1b6b020f Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6395513 Reviewed-by: Robert Flack <[email protected]> Commit-Queue: Daniil Sakhapov <[email protected]> Cr-Commit-Position: refs/heads/main@{#1442843}
1 parent 42eb416 commit 375f26a

5 files changed

+166
-0
lines changed

‎css/css-overflow/resources/root-scroll-marker-activation-iframe.html

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Overflow: ::scroll-marker with ::scroll-marker-group doesn't propagate scroll from frame</title>
4+
<style>
5+
:root {
6+
scroll-marker-group: before;
7+
}
8+
9+
.item {
10+
height: 100vh;
11+
}
12+
13+
.item::scroll-marker {
14+
content: '';
15+
background-color: blue;
16+
width: 20px;
17+
height: 20px;
18+
display: inline-block;
19+
margin-left: 10px;
20+
}
21+
</style>
22+
<div class=item></div>
23+
<div class=item></div>
24+
<div class=item></div>
25+
<div class=item></div>
26+
<div class=item></div>

‎css/css-overflow/root-scroll-button-activation.html

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Overflow: ::scroll-button on root element activation</title>
4+
<link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-buttons">
5+
<script src="/resources/testharness.js"></script>
6+
<script src="/resources/testharnessreport.js"></script>
7+
<script src="/resources/testdriver.js"></script>
8+
<script src="/resources/testdriver-actions.js"></script>
9+
<script src="/resources/testdriver-vendor.js"></script>
10+
<style>
11+
body {
12+
margin: 0;
13+
}
14+
15+
:root::scroll-button(block-end) {
16+
content: "down";
17+
position: absolute;
18+
top: 0;
19+
}
20+
21+
div {
22+
width: 600px;
23+
height: 300px;
24+
margin-bottom: 20px;
25+
background: green;
26+
}
27+
</style>
28+
<div></div>
29+
<div></div>
30+
<div></div>
31+
<script>
32+
promise_test(async t => {
33+
await new test_driver.Actions()
34+
.pointerMove(10, 10)
35+
.pointerDown()
36+
.pointerUp()
37+
.pointerDown()
38+
.pointerUp()
39+
.send();
40+
assert_equals(window.scrollY, 360);
41+
});
42+
</script>

‎css/css-overflow/root-scroll-button-ref.html

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Overflow: ::scroll-button on root element</title>
4+
<style>
5+
body {
6+
margin: 0;
7+
}
8+
9+
.item {
10+
width: 600px;
11+
height: 300px;
12+
margin-bottom: 20px;
13+
background: green;
14+
}
15+
</style>
16+
<button style="position: absolute;">down</button>
17+
<div id="first" class="item"></div>
18+
<div class="item"></div>
19+
<div class="item"></div>

‎css/css-overflow/root-scroll-button.html

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Overflow: ::scroll-button on root element</title>
4+
<link rel="match" href="root-scroll-button-ref.html">
5+
<link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-buttons">
6+
<style>
7+
body {
8+
margin: 0;
9+
}
10+
11+
:root::scroll-button(block-end) {
12+
content: "down";
13+
position: absolute;
14+
top: 0;
15+
}
16+
17+
div {
18+
width: 600px;
19+
height: 300px;
20+
margin-bottom: 20px;
21+
background: green;
22+
}
23+
</style>
24+
<div></div>
25+
<div></div>
26+
<div></div>

‎css/css-overflow/root-scroll-marker-activation-in-iframe.html

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<html class="reftest-wait">
4+
<title>CSS Overflow: ::scroll-marker with ::scroll-marker-group on root element doesn't propagate scrolling</title>
5+
<link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-marker-pseudo">
6+
<script src="/resources/testharness.js"></script>
7+
<script src="/resources/testharnessreport.js"></script>
8+
<script src="/resources/testdriver.js"></script>
9+
<script src="/resources/testdriver-actions.js"></script>
10+
<script src="/resources/testdriver-vendor.js"></script>
11+
<script src="/dom/events/scrolling/scroll_support.js"></script>
12+
<style>
13+
body {
14+
margin: 0;
15+
}
16+
17+
#container {
18+
overflow: auto;
19+
height: 600px;
20+
position: relative;
21+
}
22+
23+
iframe {
24+
width: 600px;
25+
height: 400px;
26+
position: absolute;
27+
top: 500px;
28+
border: 2px solid black;
29+
}
30+
</style>
31+
<div id="container">
32+
<iframe id="target" onload="run_test()" src="resources/root-scroll-marker-activation-iframe.html"></iframe>
33+
</div>
34+
<script>
35+
function run_test() {
36+
promise_test(async t => {
37+
const iframe = document.getElementById("target");
38+
const container = document.getElementById("container");
39+
const target = iframe.contentWindow;
40+
const scrollEndPromise = waitForScrollEndFallbackToDelayWithoutScrollEvent(target);
41+
await new test_driver.Actions()
42+
.pointerMove(140, 510)
43+
.pointerDown()
44+
.pointerUp()
45+
.send();
46+
await scrollEndPromise;
47+
assert_equals(container.scrollTop, 0, "scrolling is not propagated from iframe to the main frame");
48+
assert_greater_than(target.scrollY, 0, "scroll marker activation scrolls iframe");
49+
document.documentElement.classList.remove("reftest-wait");
50+
});
51+
}
52+
</script>
53+
</html>

0 commit comments

Comments
 (0)