[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}
web-platform-tests · Dec 13, 2024 · 24f3b8d · 24f3b8d
1 parent e45da16
commit 24f3b8d
Show file tree

Hide file tree

Showing 20 changed files with 118 additions and 117 deletions.
diff --git a/css/css-scroll-snap-2/parsing/scroll-start-target-computed.html b/css/css-scroll-snap-2/parsing/scroll-start-target-computed.html
@@ -3,8 +3,8 @@
 
 <head>
   <meta charset="utf-8">
-  <title> CSS Scroll Snap 2 Test: scroll-start-target-* computed values</title>
-  <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#scroll-start-target">
+  <title> CSS Scroll Snap 2 Test: scroll-initial-target-* computed values</title>
+  <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#scroll-initial-target">
   <script src="/resources/testharness.js"></script>
   <script src="/resources/testharnessreport.js"></script>
   <script src="/css/support/computed-testcommon.js"></script>
@@ -13,8 +13,8 @@
 <body>
   <div id="target"></div>
   <script>
-    test_computed_value("scroll-start-target", "auto");
-    test_computed_value("scroll-start-target", "none");
+    test_computed_value("scroll-initial-target", "nearest");
+    test_computed_value("scroll-initial-target", "none");
     </script>
 </body>
 

diff --git a/css/css-scroll-snap-2/parsing/scroll-start-target-invalid.html b/css/css-scroll-snap-2/parsing/scroll-start-target-invalid.html
@@ -2,19 +2,19 @@
 <html>
 <head>
   <meta charset="utf-8">
-  <title> CSS Scroll Snap 2 Test: scroll-start-target-* with invalid values</title>
-  <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#scroll-start">
+  <title> CSS Scroll Snap 2 Test: scroll-initial-target-* with invalid values</title>
+  <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#scroll-initial-target">
   <script src="/resources/testharness.js"></script>
   <script src="/resources/testharnessreport.js"></script>
   <script src="/css/support/parsing-testcommon.js"></script>
 </head>
 <body>
   <script>
-    test_invalid_value("scroll-start-target", "invalid_keyword");
-    test_invalid_value("scroll-start-target", "100px");
-    test_invalid_value("scroll-start-target", "none none none");
-    test_invalid_value("scroll-start-target", "invalid_keyword1 invalid_keyword2");
-    test_invalid_value("scroll-start-target", "100px 100px");
+    test_invalid_value("scroll-initial-target", "invalid_keyword");
+    test_invalid_value("scroll-initial-target", "100px");
+    test_invalid_value("scroll-initial-target", "none none none");
+    test_invalid_value("scroll-initial-target", "invalid_keyword1 invalid_keyword2");
+    test_invalid_value("scroll-initial-target", "100px 100px");
   </script>
 </body>
 </html>
diff --git a/css/css-scroll-snap-2/parsing/scroll-start-target-valid.html b/css/css-scroll-snap-2/parsing/scroll-start-target-valid.html
@@ -3,17 +3,17 @@
 
 <head>
   <meta charset="utf-8">
-  <title> CSS Scroll Snap 2 Test: scroll-start-target-* with valid values</title>
-  <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#scroll-start-target">
+  <title> CSS Scroll Snap 2 Test: scroll-initial-target-* with valid values</title>
+  <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#scroll-initial-target">
   <script src="/resources/testharness.js"></script>
   <script src="/resources/testharnessreport.js"></script>
   <script src="/css/support/parsing-testcommon.js"></script>
 </head>
 
 <body>
   <script>
-    test_valid_value("scroll-start-target", "none");
-    test_valid_value("scroll-start-target", "auto");
+    test_valid_value("scroll-initial-target", "none");
+    test_valid_value("scroll-initial-target", "nearest");
   </script>
 </body>
 

diff --git a/...roll-snap-2/scroll-start-target/scroll-start-target-aligns-with-snap-align.tentative.html b/...roll-snap-2/scroll-start-target/scroll-start-target-aligns-with-snap-align.tentative.html
@@ -2,8 +2,8 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title> CSS Scroll Snap 2 Test: scroll-start-target*</title>
-    <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#scroll-start-target">
+    <title> CSS Scroll Snap 2 Test: scroll-initial-target*</title>
+    <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#scroll-initial-target">
     <script src="/resources/testharness.js"></script>
     <script src="/resources/testharnessreport.js"></script>
     <script src="/dom/events/scrolling/scroll_support.js"></script>
@@ -26,7 +26,7 @@
         width: 100px;
         height: 100px;
         background-color: pink;
-        scroll-start-target: auto;
+        scroll-initial-target: nearest;
         position: absolute;
         top: 400px;
         left: 400px;
@@ -68,7 +68,7 @@
             "scroller is vertically aligned to target's top");
         assert_equals(scroller.scrollLeft, 400,
             "scroller is horizontally aligned to target's left");
-      }, "scroll-start-target aligns with scroll-snap-align");
+      }, "scroll-initial-target aligns with scroll-snap-align");
     </script>
   </body>
 </html>
diff --git a/css/css-scroll-snap-2/scroll-start-target/scroll-start-target-display-toggled.tentative.html b/css/css-scroll-snap-2/scroll-start-target/scroll-start-target-display-toggled.tentative.html
@@ -2,8 +2,8 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title> CSS Scroll Snap 2 Test: scroll-start-target*</title>
-    <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#scroll-start-target">
+    <title> CSS Scroll Snap 2 Test: scroll-initial-target*</title>
+    <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#scroll-initial-target">
     <script src="/resources/testharness.js"></script>
     <script src="/resources/testharnessreport.js"></script>
   </head>
@@ -33,7 +33,7 @@
         width: 100px;
         height: 100px;
         background-color: pink;
-        scroll-start-target: auto;
+        scroll-initial-target: nearest;
       }
     </style>
     <div id="outer-container">
@@ -89,7 +89,7 @@
         let initial_expected_scroll_top =
             total_content_height - inner_scroller.clientHeight;
         assert_equals(inner_scroller.scrollTop, initial_expected_scroll_top,
-          "inner-scroller is scrolled to scroll-start-target");
+          "inner-scroller is scrolled to scroll-initial-target");
 
         let display_promise = waitForDisplay(target, "none");
         target.style.display = "none";
@@ -98,14 +98,14 @@
         let final_expected_scroll_top = initial_expected_scroll_top - target_height;
         assert_equals(inner_scroller.scrollTop, final_expected_scroll_top,
           "inner scroller is clamped to updated scroll range");
-      }, "display:block scroll-start-target becomes display: none");
+      }, "display:block scroll-initial-target becomes display: none");
 
       promise_test(async (t) => {
         await resetDisplay();
         let initial_expected_scroll_top =
             total_content_height - inner_scroller.clientHeight;
         assert_equals(inner_scroller.scrollTop, initial_expected_scroll_top,
-          "inner-scroller is scrolled to scroll-start-target");
+          "inner-scroller is scrolled to scroll-initial-target");
 
         let display_promise = waitForDisplay(target, "none");
         target.style.display = "none";
@@ -118,8 +118,8 @@
         target.style.display = "block";
         await display_promise;
         assert_equals(inner_scroller.scrollTop, initial_expected_scroll_top,
-            "inner scroller is updated as scroll-start-target reappears");
-      }, "display:none scroll-start-target becomes display: block");
+            "inner scroller is updated as scroll-initial-target reappears");
+      }, "display:none scroll-initial-target becomes display: block");
     </script>
   </body>
 </html>
diff --git a/...css-scroll-snap-2/scroll-start-target/scroll-start-target-nested-container.tentative.html b/...css-scroll-snap-2/scroll-start-target/scroll-start-target-nested-container.tentative.html
@@ -2,8 +2,8 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title> CSS Scroll Snap 2 Test: scroll-start-target*</title>
-    <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#scroll-start-target">
+    <title> CSS Scroll Snap 2 Test: scroll-initial-target*</title>
+    <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#scroll-initial-target">
     <script src="/resources/testharness.js"></script>
     <script src="/resources/testharnessreport.js"></script>
     <script src="/resources/testdriver.js"></script>
@@ -49,7 +49,7 @@
         width: 100px;
         height: 100px;
         background-color: pink;
-        scroll-start-target: auto;
+        scroll-initial-target: nearest;
       }
     </style>
     <div id="outer-container">
@@ -96,7 +96,7 @@
       promise_test(async (t) => {
         await resetDisplay();
         assert_equals(outer_container.scrollTop, outer_to_target_scrolltop,
-          "outer-container is scrolled to scroll-start-target");
+          "outer-container is scrolled to scroll-initial-target");
 
         // Remove large_space_outer so we can observe outer-container adjust to
         // its new content height.
@@ -113,14 +113,14 @@
         await waitForAnimationFrames(2);
 
         assert_equals(outer_container.scrollTop, outer_to_target_scrolltop,
-            "outer-scroller is updated as scroll-start-target reappears");
-      }, "display:none scroll-start-target becomes display:block");
+            "outer-scroller is updated as scroll-initial-target reappears");
+      }, "display:none scroll-initial-target becomes display:block");
 
       promise_test(async (t) => {
         await waitForCompositorCommit();
         await resetDisplay();
         assert_equals(outer_container.scrollTop, outer_to_target_scrolltop,
-            "outer-container is scrolled to scroll-start-target");
+            "outer-container is scrolled to scroll-initial-target");
 
         // Remove large_space_outer so we can observe outer-container adjust to
         // its new content height.
@@ -129,7 +129,7 @@
         await waitForAnimationFrames(2);
 
         // inner-container has become a scroller and should be scrolled to
-        // scroll-start-target.
+        // scroll-initial-target.
         assert_equals(inner_container.scrollTop,
           inner_to_target_scrolltop,
           "inner-container is fully scrolled to target");
@@ -152,55 +152,55 @@
 
       promise_test(async (t) => {
         // This test verifies that:
-        // 1. when both the child and grandchild are scroll-start-targets, the
+        // 1. when both the child and grandchild are scroll-initial-targets, the
         //    first-in-tree-order (i.e. the child) wins/is scrolled to.
-        // 2. if/when the grandchild stops being a scroll-start-target, the
+        // 2. if/when the grandchild stops being a scroll-initial-target, the
         //    child (inner container) is scrolled to.
         await waitForCompositorCommit();
         await resetDisplay();
         t.add_cleanup(async () => {
-          inner_container.style.scrollStartTarget = "none";
+          inner_container.style.scrollInitialTarget = "none";
           await waitForAnimationFrames(2);
         });
 
         assert_equals(outer_container.scrollTop, outer_to_target_scrolltop,
-          "outer-container is scrolled to scroll-start-target");
-        // Make the inner container a scroll-start-target.
-        inner_container.style.scrollStartTarget = "auto";
+          "outer-container is scrolled to scroll-initial-target");
+        // Make the inner container a scroll-initial-target.
+        inner_container.style.scrollInitialTarget = "nearest";
         await waitForAnimationFrames(2);
 
         // The inner container has overflow: visible, so it's not the scroll
         // container of target.
         assert_equals(outer_container.scrollTop,
           outer_to_inner_scrolltop,
           "outer-container is scrolled to inner-container (which is before the" +
-          "inner scroll-start-target in tree order)");
-      }, "outer scroll-start-target takes precedence over inner");
+          "inner scroll-initial-target in tree order)");
+      }, "outer scroll-initial-target takes precedence over inner");
 
       promise_test(async (t) => {
         // This test verifies that a child which is a scroller, is a
-        // scroll-start-target, and has a scroll-start-target is scrolled to by
-        // its scrolling container, and also scrolls to its own
-        // scroll-start-target.
+        // scroll-initial-target, and has a scroll-initial-target is scrolled to
+        // by its scrolling container, and also scrolls to its own
+        // scroll-initial-target.
         await waitForCompositorCommit();
         await resetDisplay();
         t.add_cleanup(async () => {
           inner_container.style.overflow = "visible";
-          inner_container.style.scrollStartTarget = "none";
+          inner_container.style.scrollInitialTarget = "none";
           await waitForAnimationFrames(2);
         });
 
         assert_equals(outer_container.scrollTop, outer_to_target_scrolltop,
-          "outer-container is scrolled to scroll-start-target");
+          "outer-container is scrolled to scroll-initial-target");
 
-        // Make the inner container a scroll-start-target.
-        inner_container.style.scrollStartTarget = "auto";
+        // Make the inner container a scroll-initial-target.
+        inner_container.style.scrollInitialTarget = "nearest";
         await waitForAnimationFrames(2);
 
         assert_equals(outer_container.scrollTop,
           outer_to_inner_scrolltop,
           "outer-container is still scrolled to inner scroll-container" +
-          "as it is a scroll-start-target and comes before #target in " +
+          "as it is a scroll-initial-target and comes before #target in " +
           "tree-order");
 
         // Make the inner container a scroller.
@@ -213,7 +213,7 @@
         assert_equals(inner_container.scrollTop,
           inner_to_target_scrolltop,
           "inner-container is scrolled to target");
-      }, "scroll containers can also be scroll-start-targets");
+      }, "scroll containers can also be scroll-initial-targets");
     </script>
   </body>
 </html>
diff --git a/css/css-scroll-snap-2/scroll-start-target/scroll-start-target-root.tentative.html b/css/css-scroll-snap-2/scroll-start-target/scroll-start-target-root.tentative.html
@@ -3,8 +3,8 @@
 
 <head>
   <meta charset="utf-8">
-  <title> CSS Scroll Snap 2 Test: scroll-start-target*</title>
-  <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#scroll-start-target">
+  <title> CSS Scroll Snap 2 Test: scroll-initial-target*</title>
+  <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#scroll-initial-target">
   <script src="/resources/testharness.js"></script>
   <script src="/resources/testharnessreport.js"></script>
 </head>
@@ -32,7 +32,7 @@
       top: 60vh;
       left: 60vw;
       background-color: purple;
-      scroll-start-target: auto;
+      scroll-initial-target: nearest;
     }
 
     .bottom_right {
@@ -54,9 +54,9 @@
       const expected_scroll_left = top_left_box.getBoundingClientRect().width;
 
       assert_approx_equals(scroller.scrollTop, expected_scroll_top, 1,
-        "scroll-start-target sets initial vertical scroll position");
+        "scroll-initial-target sets initial vertical scroll position");
       assert_approx_equals(scroller.scrollLeft, expected_scroll_left, 1,
-        "scroll-start-target sets initial horizontal scroll position");
+        "scroll-initial-target sets initial horizontal scroll position");
     });
   </script>
 </body>

diff --git a/css/css-scroll-snap-2/scroll-start-target/scroll-start-target-rtl.tentative.html b/css/css-scroll-snap-2/scroll-start-target/scroll-start-target-rtl.tentative.html
@@ -3,8 +3,8 @@
 
 <head>
   <meta charset="utf-8">
-  <title> CSS Scroll Snap 2 Test: scroll-start-target*</title>
-  <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#scroll-start-target">
+  <title> CSS Scroll Snap 2 Test: scroll-initial-target*</title>
+  <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#scroll-initial-target">
   <script src="/resources/testharness.js"></script>
   <script src="/resources/testharnessreport.js"></script>
 </head>
@@ -34,7 +34,7 @@
     .center {
       top: 60%;
       background-color: purple;
-      scroll-start-target: auto;
+      scroll-initial-target: nearest;
     }
 
     .bottom_left {
@@ -53,10 +53,10 @@
 
     test((t) => {
       assert_equals(scroller.scrollTop, initial_expected_scroll_top,
-          "scroller is vertically scrolled to scroll-start-target");
+          "scroller is vertically scrolled to scroll-initial-target");
       assert_equals(scroller.scrollLeft, initial_expected_scroll_left,
-          "scroller is horizontally scrolled to scroll-start-target");
-    }, "scroll-start-target reflects vertical rtl writing mode.");
+          "scroller is horizontally scrolled to scroll-initial-target");
+    }, "scroll-initial-target reflects vertical rtl writing mode.");
   </script>
 </body>
 

diff --git a/css/css-scroll-snap-2/scroll-start-target/scroll-start-target-span.tentative.html b/css/css-scroll-snap-2/scroll-start-target/scroll-start-target-span.tentative.html
@@ -2,8 +2,8 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title> CSS Scroll Snap 2 Test: scroll-start-target with a &lt;span> element</title>
-    <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#scroll-start-target">
+    <title> CSS Scroll Snap 2 Test: scroll-initial-target with a &lt;span> element</title>
+    <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#scroll-initial-target">
     <script src="/resources/testharness.js"></script>
     <script src="/resources/testharnessreport.js"></script>
     <script src="/css/css-animations/support/testcommon.js"></script>
@@ -24,7 +24,7 @@
         background-color: turquoise;
       }
       .target {
-        scroll-start-target: auto;
+        scroll-initial-target: nearest;
       }
       .scroller {
         overflow: scroll;
@@ -46,8 +46,8 @@
         const target = document.getElementById("target");
 
         assert_equals(scroller.scrollTop, target.offsetTop,
-          "scroller is initially scrolled to it <span> scroll-start-target");
-      }, "<span> scroll-start-target is honored");
+          "scroller is initially scrolled to it <span> scroll-initial-target");
+      }, "<span> scroll-initial-target is honored");
     </script>
   </body>
 </html>
diff --git a/...ll-snap-2/scroll-start-target/scroll-start-target-with-anchor-navigation-inner-frame.html b/...ll-snap-2/scroll-start-target/scroll-start-target-with-anchor-navigation-inner-frame.html
@@ -23,7 +23,7 @@
     #middle_box {
       width: 100px;
       height: 60vh;
-      scroll-start-target: auto;
+      scroll-initial-target: nearest;
       background-color: purple;
     }
     #bottom_box {