Skip to content

Commit 40cb124

Browse files
David Awogbemilachromium-wpt-export-bot
David Awogbemila
authored and
chromium-wpt-export-bot
committed
[carousel] Use block axis as primary scroll-marker selection axis
The CSS working group resolution[1], as clarified in the linked bug, is to use the block axis as the primary axis when selecting the active scroll-marker in 2-D. [1] w3c/csswg-drafts#11198 (comment) Bug: 391612675 Change-Id: I3b9ecb5e2d2ef4c58dcb47c6e06b45c66ccd6f2b Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6310080 Commit-Queue: David Awogbemila <[email protected]> Reviewed-by: Steve Kobes <[email protected]> Cr-Commit-Position: refs/heads/main@{#1426563}
1 parent 3f8c984 commit 40cb124

File tree

2 files changed

+164
-0
lines changed

2 files changed

+164
-0
lines changed

‎css/css-overflow/scroll-marker-selection-in-2d-ref.html‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<body>
4+
<style>
5+
.scroller {
6+
width: 200px;
7+
height: 200px;
8+
position: relative;
9+
border: solid;
10+
scroll-marker-group: after;
11+
overflow: scroll;
12+
}
13+
.scroll_marker_group {
14+
height: 100px;
15+
width: 200px;
16+
border: solid;
17+
white-space: nowrap;
18+
display: grid;
19+
grid-auto-flow: column;
20+
}
21+
.vwm {
22+
writing-mode: vertical-lr;
23+
}
24+
.box {
25+
position: absolute;
26+
height: 50px;
27+
width: 50px;
28+
font-size: 50px;
29+
background-color: blue;
30+
}
31+
.current {
32+
border: solid blue;
33+
}
34+
.scroll_marker {
35+
height: 40px;
36+
width: 40px;
37+
font-size: 20px;
38+
display: inline-block;
39+
}
40+
.top_right {
41+
top: 0px;
42+
left: 100px;
43+
&>scroll_marker {
44+
background-color: teal;
45+
}
46+
}
47+
.bottom_left {
48+
top: 100px;
49+
left: 0px;
50+
}
51+
.tr.scroll_marker {
52+
background-color: teal;
53+
}
54+
.bl.scroll_marker {
55+
background-color: brown;
56+
}
57+
.space {
58+
height: 800px;
59+
width: 800px;
60+
position: absolute;
61+
}
62+
</style>
63+
<div>
64+
<div class="scroller">
65+
<div class="space"></div>
66+
<div class="top_right box">TR</div>
67+
<div class="bottom_left box">BL</div>
68+
</div>
69+
<div class="scroll_marker_group">
70+
<div class="current tr scroll_marker"></div>
71+
<div class="bl scroll_marker"></div>
72+
</div>
73+
<div class="vwm scroller">
74+
<div class="space"></div>
75+
<div class="top_right box">TR</div>
76+
<div class="bottom_left box">BL</div>
77+
</div>
78+
<div class="vwm scroll_marker_group">
79+
<div class="tr scroll_marker"></div>
80+
<div class="bl current scroll_marker"></div>
81+
</div>
82+
</div>
83+
</body>
84+
</html>

‎css/css-overflow/scroll-marker-selection-in-2d.html‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>CSS Test: scroll tracking for ::scroll-markers on 2-D scrollers selects from block and then from inline. </title>
5+
<link rel="help" href="https://drafts.csswg.org/css-overflow-5/#active-scroll-marker">
6+
<link rel="match" href="scroll-marker-selection-in-2d-ref.html">
7+
</head>
8+
<body>
9+
<style>
10+
.scroller {
11+
width: 200px;
12+
height: 200px;
13+
position: relative;
14+
border: solid;
15+
scroll-marker-group: after;
16+
overflow: scroll;
17+
&::scroll-marker-group {
18+
height: 100px;
19+
width: 200px;
20+
border: solid;
21+
display: grid;
22+
grid-auto-flow: column;
23+
white-space: nowrap;
24+
};
25+
}
26+
.vwm { /* vertical writing-mode */
27+
writing-mode: vertical-lr;
28+
}
29+
.box {
30+
position: absolute;
31+
height: 50px;
32+
width: 50px;
33+
font-size: 50px;
34+
background-color: blue;
35+
&::scroll-marker {
36+
height: 40px;
37+
width: 40px;
38+
font-size: 20px;
39+
display: inline-block;
40+
}
41+
&::scroll-marker:target-current {
42+
border: solid blue;
43+
}
44+
}
45+
.top_right {
46+
top: 0px;
47+
left: 100px;
48+
&::scroll-marker {
49+
content: "";
50+
background-color: teal;
51+
}
52+
}
53+
.bottom_left {
54+
top: 100px;
55+
left: 0px;
56+
&::scroll-marker {
57+
content: "";
58+
background-color: brown;
59+
}
60+
}
61+
.space {
62+
height: 800px;
63+
width: 800px;
64+
position: absolute;
65+
}
66+
</style>
67+
<div>
68+
<div class="scroller">
69+
<div class="space"></div>
70+
<div class="top_right box">TR</div>
71+
<div class="bottom_left box">BL</div>
72+
</div>
73+
<div class="vwm scroller">
74+
<div class="space"></div>
75+
<div class="top_right box">TR</div>
76+
<div class="bottom_left box">BL</div>
77+
</div>
78+
</div>
79+
</body>
80+
</html>

0 commit comments

Comments
 (0)