Skip to content

Commit 24f3b8d

Browse files
David Awogbemilachromium-wpt-export-bot
David Awogbemila
authored and
chromium-wpt-export-bot
committed
[css-scroll-snap-2] Rename scroll-start-target to scroll-initial-target
In line with the CSS working group's resolution[1] to rename scroll-start-target to scroll-initial-target and its keyword auto to nearest, this patch updates Blink's implementation. This patch only does the rename on the code in the relevant files. A follow-up patch will rename the relevant files. [1] w3c/csswg-drafts#11173 (comment) Bug: 40909052 Change-Id: I8ec8ab8fbd994f3f737d7c1d6a40af015fc6d2d4 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6088389 Reviewed-by: Steve Kobes <[email protected]> Commit-Queue: David Awogbemila <[email protected]> Cr-Commit-Position: refs/heads/main@{#1395987}
1 parent e45da16 commit 24f3b8d

20 files changed

+118
-117
lines changed

‎css/css-scroll-snap-2/parsing/scroll-start-target-computed.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33

44
<head>
55
<meta charset="utf-8">
6-
<title> CSS Scroll Snap 2 Test: scroll-start-target-* computed values</title>
7-
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#scroll-start-target">
6+
<title> CSS Scroll Snap 2 Test: scroll-initial-target-* computed values</title>
7+
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#scroll-initial-target">
88
<script src="/resources/testharness.js"></script>
99
<script src="/resources/testharnessreport.js"></script>
1010
<script src="/css/support/computed-testcommon.js"></script>
@@ -13,8 +13,8 @@
1313
<body>
1414
<div id="target"></div>
1515
<script>
16-
test_computed_value("scroll-start-target", "auto");
17-
test_computed_value("scroll-start-target", "none");
16+
test_computed_value("scroll-initial-target", "nearest");
17+
test_computed_value("scroll-initial-target", "none");
1818
</script>
1919
</body>
2020

‎css/css-scroll-snap-2/parsing/scroll-start-target-invalid.html

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,19 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5-
<title> CSS Scroll Snap 2 Test: scroll-start-target-* with invalid values</title>
6-
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#scroll-start">
5+
<title> CSS Scroll Snap 2 Test: scroll-initial-target-* with invalid values</title>
6+
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#scroll-initial-target">
77
<script src="/resources/testharness.js"></script>
88
<script src="/resources/testharnessreport.js"></script>
99
<script src="/css/support/parsing-testcommon.js"></script>
1010
</head>
1111
<body>
1212
<script>
13-
test_invalid_value("scroll-start-target", "invalid_keyword");
14-
test_invalid_value("scroll-start-target", "100px");
15-
test_invalid_value("scroll-start-target", "none none none");
16-
test_invalid_value("scroll-start-target", "invalid_keyword1 invalid_keyword2");
17-
test_invalid_value("scroll-start-target", "100px 100px");
13+
test_invalid_value("scroll-initial-target", "invalid_keyword");
14+
test_invalid_value("scroll-initial-target", "100px");
15+
test_invalid_value("scroll-initial-target", "none none none");
16+
test_invalid_value("scroll-initial-target", "invalid_keyword1 invalid_keyword2");
17+
test_invalid_value("scroll-initial-target", "100px 100px");
1818
</script>
1919
</body>
2020
</html>

‎css/css-scroll-snap-2/parsing/scroll-start-target-valid.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,17 @@
33

44
<head>
55
<meta charset="utf-8">
6-
<title> CSS Scroll Snap 2 Test: scroll-start-target-* with valid values</title>
7-
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#scroll-start-target">
6+
<title> CSS Scroll Snap 2 Test: scroll-initial-target-* with valid values</title>
7+
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#scroll-initial-target">
88
<script src="/resources/testharness.js"></script>
99
<script src="/resources/testharnessreport.js"></script>
1010
<script src="/css/support/parsing-testcommon.js"></script>
1111
</head>
1212

1313
<body>
1414
<script>
15-
test_valid_value("scroll-start-target", "none");
16-
test_valid_value("scroll-start-target", "auto");
15+
test_valid_value("scroll-initial-target", "none");
16+
test_valid_value("scroll-initial-target", "nearest");
1717
</script>
1818
</body>
1919

‎css/css-scroll-snap-2/scroll-start-target/scroll-start-target-aligns-with-snap-align.tentative.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5-
<title> CSS Scroll Snap 2 Test: scroll-start-target*</title>
6-
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#scroll-start-target">
5+
<title> CSS Scroll Snap 2 Test: scroll-initial-target*</title>
6+
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#scroll-initial-target">
77
<script src="/resources/testharness.js"></script>
88
<script src="/resources/testharnessreport.js"></script>
99
<script src="/dom/events/scrolling/scroll_support.js"></script>
@@ -26,7 +26,7 @@
2626
width: 100px;
2727
height: 100px;
2828
background-color: pink;
29-
scroll-start-target: auto;
29+
scroll-initial-target: nearest;
3030
position: absolute;
3131
top: 400px;
3232
left: 400px;
@@ -68,7 +68,7 @@
6868
"scroller is vertically aligned to target's top");
6969
assert_equals(scroller.scrollLeft, 400,
7070
"scroller is horizontally aligned to target's left");
71-
}, "scroll-start-target aligns with scroll-snap-align");
71+
}, "scroll-initial-target aligns with scroll-snap-align");
7272
</script>
7373
</body>
7474
</html>

‎css/css-scroll-snap-2/scroll-start-target/scroll-start-target-display-toggled.tentative.html

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5-
<title> CSS Scroll Snap 2 Test: scroll-start-target*</title>
6-
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#scroll-start-target">
5+
<title> CSS Scroll Snap 2 Test: scroll-initial-target*</title>
6+
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#scroll-initial-target">
77
<script src="/resources/testharness.js"></script>
88
<script src="/resources/testharnessreport.js"></script>
99
</head>
@@ -33,7 +33,7 @@
3333
width: 100px;
3434
height: 100px;
3535
background-color: pink;
36-
scroll-start-target: auto;
36+
scroll-initial-target: nearest;
3737
}
3838
</style>
3939
<div id="outer-container">
@@ -89,7 +89,7 @@
8989
let initial_expected_scroll_top =
9090
total_content_height - inner_scroller.clientHeight;
9191
assert_equals(inner_scroller.scrollTop, initial_expected_scroll_top,
92-
"inner-scroller is scrolled to scroll-start-target");
92+
"inner-scroller is scrolled to scroll-initial-target");
9393

9494
let display_promise = waitForDisplay(target, "none");
9595
target.style.display = "none";
@@ -98,14 +98,14 @@
9898
let final_expected_scroll_top = initial_expected_scroll_top - target_height;
9999
assert_equals(inner_scroller.scrollTop, final_expected_scroll_top,
100100
"inner scroller is clamped to updated scroll range");
101-
}, "display:block scroll-start-target becomes display: none");
101+
}, "display:block scroll-initial-target becomes display: none");
102102

103103
promise_test(async (t) => {
104104
await resetDisplay();
105105
let initial_expected_scroll_top =
106106
total_content_height - inner_scroller.clientHeight;
107107
assert_equals(inner_scroller.scrollTop, initial_expected_scroll_top,
108-
"inner-scroller is scrolled to scroll-start-target");
108+
"inner-scroller is scrolled to scroll-initial-target");
109109

110110
let display_promise = waitForDisplay(target, "none");
111111
target.style.display = "none";
@@ -118,8 +118,8 @@
118118
target.style.display = "block";
119119
await display_promise;
120120
assert_equals(inner_scroller.scrollTop, initial_expected_scroll_top,
121-
"inner scroller is updated as scroll-start-target reappears");
122-
}, "display:none scroll-start-target becomes display: block");
121+
"inner scroller is updated as scroll-initial-target reappears");
122+
}, "display:none scroll-initial-target becomes display: block");
123123
</script>
124124
</body>
125125
</html>

‎css/css-scroll-snap-2/scroll-start-target/scroll-start-target-nested-container.tentative.html

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5-
<title> CSS Scroll Snap 2 Test: scroll-start-target*</title>
6-
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#scroll-start-target">
5+
<title> CSS Scroll Snap 2 Test: scroll-initial-target*</title>
6+
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#scroll-initial-target">
77
<script src="/resources/testharness.js"></script>
88
<script src="/resources/testharnessreport.js"></script>
99
<script src="/resources/testdriver.js"></script>
@@ -49,7 +49,7 @@
4949
width: 100px;
5050
height: 100px;
5151
background-color: pink;
52-
scroll-start-target: auto;
52+
scroll-initial-target: nearest;
5353
}
5454
</style>
5555
<div id="outer-container">
@@ -96,7 +96,7 @@
9696
promise_test(async (t) => {
9797
await resetDisplay();
9898
assert_equals(outer_container.scrollTop, outer_to_target_scrolltop,
99-
"outer-container is scrolled to scroll-start-target");
99+
"outer-container is scrolled to scroll-initial-target");
100100

101101
// Remove large_space_outer so we can observe outer-container adjust to
102102
// its new content height.
@@ -113,14 +113,14 @@
113113
await waitForAnimationFrames(2);
114114

115115
assert_equals(outer_container.scrollTop, outer_to_target_scrolltop,
116-
"outer-scroller is updated as scroll-start-target reappears");
117-
}, "display:none scroll-start-target becomes display:block");
116+
"outer-scroller is updated as scroll-initial-target reappears");
117+
}, "display:none scroll-initial-target becomes display:block");
118118

119119
promise_test(async (t) => {
120120
await waitForCompositorCommit();
121121
await resetDisplay();
122122
assert_equals(outer_container.scrollTop, outer_to_target_scrolltop,
123-
"outer-container is scrolled to scroll-start-target");
123+
"outer-container is scrolled to scroll-initial-target");
124124

125125
// Remove large_space_outer so we can observe outer-container adjust to
126126
// its new content height.
@@ -129,7 +129,7 @@
129129
await waitForAnimationFrames(2);
130130

131131
// inner-container has become a scroller and should be scrolled to
132-
// scroll-start-target.
132+
// scroll-initial-target.
133133
assert_equals(inner_container.scrollTop,
134134
inner_to_target_scrolltop,
135135
"inner-container is fully scrolled to target");
@@ -152,55 +152,55 @@
152152

153153
promise_test(async (t) => {
154154
// This test verifies that:
155-
// 1. when both the child and grandchild are scroll-start-targets, the
155+
// 1. when both the child and grandchild are scroll-initial-targets, the
156156
// first-in-tree-order (i.e. the child) wins/is scrolled to.
157-
// 2. if/when the grandchild stops being a scroll-start-target, the
157+
// 2. if/when the grandchild stops being a scroll-initial-target, the
158158
// child (inner container) is scrolled to.
159159
await waitForCompositorCommit();
160160
await resetDisplay();
161161
t.add_cleanup(async () => {
162-
inner_container.style.scrollStartTarget = "none";
162+
inner_container.style.scrollInitialTarget = "none";
163163
await waitForAnimationFrames(2);
164164
});
165165

166166
assert_equals(outer_container.scrollTop, outer_to_target_scrolltop,
167-
"outer-container is scrolled to scroll-start-target");
168-
// Make the inner container a scroll-start-target.
169-
inner_container.style.scrollStartTarget = "auto";
167+
"outer-container is scrolled to scroll-initial-target");
168+
// Make the inner container a scroll-initial-target.
169+
inner_container.style.scrollInitialTarget = "nearest";
170170
await waitForAnimationFrames(2);
171171

172172
// The inner container has overflow: visible, so it's not the scroll
173173
// container of target.
174174
assert_equals(outer_container.scrollTop,
175175
outer_to_inner_scrolltop,
176176
"outer-container is scrolled to inner-container (which is before the" +
177-
"inner scroll-start-target in tree order)");
178-
}, "outer scroll-start-target takes precedence over inner");
177+
"inner scroll-initial-target in tree order)");
178+
}, "outer scroll-initial-target takes precedence over inner");
179179

180180
promise_test(async (t) => {
181181
// This test verifies that a child which is a scroller, is a
182-
// scroll-start-target, and has a scroll-start-target is scrolled to by
183-
// its scrolling container, and also scrolls to its own
184-
// scroll-start-target.
182+
// scroll-initial-target, and has a scroll-initial-target is scrolled to
183+
// by its scrolling container, and also scrolls to its own
184+
// scroll-initial-target.
185185
await waitForCompositorCommit();
186186
await resetDisplay();
187187
t.add_cleanup(async () => {
188188
inner_container.style.overflow = "visible";
189-
inner_container.style.scrollStartTarget = "none";
189+
inner_container.style.scrollInitialTarget = "none";
190190
await waitForAnimationFrames(2);
191191
});
192192

193193
assert_equals(outer_container.scrollTop, outer_to_target_scrolltop,
194-
"outer-container is scrolled to scroll-start-target");
194+
"outer-container is scrolled to scroll-initial-target");
195195

196-
// Make the inner container a scroll-start-target.
197-
inner_container.style.scrollStartTarget = "auto";
196+
// Make the inner container a scroll-initial-target.
197+
inner_container.style.scrollInitialTarget = "nearest";
198198
await waitForAnimationFrames(2);
199199

200200
assert_equals(outer_container.scrollTop,
201201
outer_to_inner_scrolltop,
202202
"outer-container is still scrolled to inner scroll-container" +
203-
"as it is a scroll-start-target and comes before #target in " +
203+
"as it is a scroll-initial-target and comes before #target in " +
204204
"tree-order");
205205

206206
// Make the inner container a scroller.
@@ -213,7 +213,7 @@
213213
assert_equals(inner_container.scrollTop,
214214
inner_to_target_scrolltop,
215215
"inner-container is scrolled to target");
216-
}, "scroll containers can also be scroll-start-targets");
216+
}, "scroll containers can also be scroll-initial-targets");
217217
</script>
218218
</body>
219219
</html>

‎css/css-scroll-snap-2/scroll-start-target/scroll-start-target-root.tentative.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33

44
<head>
55
<meta charset="utf-8">
6-
<title> CSS Scroll Snap 2 Test: scroll-start-target*</title>
7-
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#scroll-start-target">
6+
<title> CSS Scroll Snap 2 Test: scroll-initial-target*</title>
7+
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#scroll-initial-target">
88
<script src="/resources/testharness.js"></script>
99
<script src="/resources/testharnessreport.js"></script>
1010
</head>
@@ -32,7 +32,7 @@
3232
top: 60vh;
3333
left: 60vw;
3434
background-color: purple;
35-
scroll-start-target: auto;
35+
scroll-initial-target: nearest;
3636
}
3737

3838
.bottom_right {
@@ -54,9 +54,9 @@
5454
const expected_scroll_left = top_left_box.getBoundingClientRect().width;
5555

5656
assert_approx_equals(scroller.scrollTop, expected_scroll_top, 1,
57-
"scroll-start-target sets initial vertical scroll position");
57+
"scroll-initial-target sets initial vertical scroll position");
5858
assert_approx_equals(scroller.scrollLeft, expected_scroll_left, 1,
59-
"scroll-start-target sets initial horizontal scroll position");
59+
"scroll-initial-target sets initial horizontal scroll position");
6060
});
6161
</script>
6262
</body>

‎css/css-scroll-snap-2/scroll-start-target/scroll-start-target-rtl.tentative.html

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33

44
<head>
55
<meta charset="utf-8">
6-
<title> CSS Scroll Snap 2 Test: scroll-start-target*</title>
7-
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#scroll-start-target">
6+
<title> CSS Scroll Snap 2 Test: scroll-initial-target*</title>
7+
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#scroll-initial-target">
88
<script src="/resources/testharness.js"></script>
99
<script src="/resources/testharnessreport.js"></script>
1010
</head>
@@ -34,7 +34,7 @@
3434
.center {
3535
top: 60%;
3636
background-color: purple;
37-
scroll-start-target: auto;
37+
scroll-initial-target: nearest;
3838
}
3939

4040
.bottom_left {
@@ -53,10 +53,10 @@
5353

5454
test((t) => {
5555
assert_equals(scroller.scrollTop, initial_expected_scroll_top,
56-
"scroller is vertically scrolled to scroll-start-target");
56+
"scroller is vertically scrolled to scroll-initial-target");
5757
assert_equals(scroller.scrollLeft, initial_expected_scroll_left,
58-
"scroller is horizontally scrolled to scroll-start-target");
59-
}, "scroll-start-target reflects vertical rtl writing mode.");
58+
"scroller is horizontally scrolled to scroll-initial-target");
59+
}, "scroll-initial-target reflects vertical rtl writing mode.");
6060
</script>
6161
</body>
6262

‎css/css-scroll-snap-2/scroll-start-target/scroll-start-target-span.tentative.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5-
<title> CSS Scroll Snap 2 Test: scroll-start-target with a &lt;span> element</title>
6-
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#scroll-start-target">
5+
<title> CSS Scroll Snap 2 Test: scroll-initial-target with a &lt;span> element</title>
6+
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#scroll-initial-target">
77
<script src="/resources/testharness.js"></script>
88
<script src="/resources/testharnessreport.js"></script>
99
<script src="/css/css-animations/support/testcommon.js"></script>
@@ -24,7 +24,7 @@
2424
background-color: turquoise;
2525
}
2626
.target {
27-
scroll-start-target: auto;
27+
scroll-initial-target: nearest;
2828
}
2929
.scroller {
3030
overflow: scroll;
@@ -46,8 +46,8 @@
4646
const target = document.getElementById("target");
4747

4848
assert_equals(scroller.scrollTop, target.offsetTop,
49-
"scroller is initially scrolled to it <span> scroll-start-target");
50-
}, "<span> scroll-start-target is honored");
49+
"scroller is initially scrolled to it <span> scroll-initial-target");
50+
}, "<span> scroll-initial-target is honored");
5151
</script>
5252
</body>
5353
</html>

‎css/css-scroll-snap-2/scroll-start-target/scroll-start-target-with-anchor-navigation-inner-frame.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
#middle_box {
2424
width: 100px;
2525
height: 60vh;
26-
scroll-start-target: auto;
26+
scroll-initial-target: nearest;
2727
background-color: purple;
2828
}
2929
#bottom_box {

0 commit comments

Comments
 (0)