Changeset 272742 in webkit

Timestamp:

Feb 11, 2021, 11:33:25 AM (5 years ago)

Author:

commit-queue@webkit.org

Message:

scroll-snap demo should use new spec
​https://bugs.webkit.org/show_bug.cgi?id=184046

Patch by Martin Robinson <​mrobinson@igalia.com> on 2021-02-11
Reviewed by Wenson Hsieh.

Update the scroll-snap demo to reflect the modern specification. This
demo isn't currently linked from the site, but if it's every linked again
it will now reflect the current specification.

This maintains the old CSS so that the demo continues to work with
old versions of Safari.

• demos/scroll-snap/index.html: Update the descriptions in the demo to reflect

the newest version of the specification.

Location:

trunk/Websites/webkit.org

Files:

• ChangeLog (modified) (1 diff)
• demos/scroll-snap/index.html (modified) (5 diffs)

trunk/Websites/webkit.org/ChangeLog

@@ +1 @@
+2021-02-11  Martin Robinson  <mrobinson@igalia.com>
+
+        scroll-snap demo should use new spec
+        https://bugs.webkit.org/show_bug.cgi?id=184046
+
+        Reviewed by Wenson Hsieh.
+
+        Update the scroll-snap demo to reflect the modern specification. This
+        demo isn't currently linked from the site, but if it's every linked again
+        it will now reflect the current specification.
+
+        This maintains the old CSS so that the demo continues to work with
+        old versions of Safari.
+
+        * demos/scroll-snap/index.html: Update the descriptions in the demo to reflect
+        the newest version of the specification.
+
 2021-01-29  Beth Dakin  <bdakin@apple.com>
 

trunk/Websites/webkit.org/demos/scroll-snap/index.html

@@ -292 +292 @@
         </div>
         <p>The CSS for the above container is:</p>
-        <pre>-webkit-scroll-snap-type: mandatory;<br>-webkit-scroll-snap-points-x: repeat(100%);</pre>
+        <pre>scroll-snap-type: x mandatory;</pre>
+        <p>The CSS for each of the container&rsquo;s children is:</p>
+        <pre>scroll-snap-align: start;</pre>
 
         <!-- Scroll snapping container using coordinates -->
@@ -350 +352 @@
         </div>
         <p>The CSS for the above container is:</p>
-        <pre>-webkit-scroll-snap-type: mandatory;</pre>
+        <pre>scroll-snap-type: x mandatory;</pre>
         <p>The CSS for each of the container&rsquo;s children is:</p>
-        <pre>-webkit-scroll-snap-coordinate: 0% 0%;</pre>
+        <pre>scroll-snap-align: start;</pre>
 
         <!-- Centered scroll snapping container using coordinates -->
@@ -410 +412 @@
         </div>
         <p>The CSS for the above container is:</p>
-        <pre>-webkit-scroll-snap-type: mandatory;<br>-webkit-scroll-snap-destination: 50% 50%;</pre>
+        <pre>scroll-snap-type: x mandatory;</pre>
         <p>The CSS for each of the container&rsquo;s children is:</p>
-        <pre>-webkit-scroll-snap-coordinate: 50% 50%;</pre>
+        <pre>scroll-snap-align: center;</pre>
 
         <!-- Centered scroll snapping container in 2D -->
@@ -424 +426 @@
         </div>
         <p>The CSS for the above container is:</p>
-        <pre>-webkit-scroll-snap-type: mandatory;<br>-webkit-scroll-snap-destination: 50% 50%;</pre>
+        <pre>scroll-snap-type: both mandatory;</pre>
         <p>The CSS for each of the container&rsquo;s children is:</p>
-        <pre>-webkit-scroll-snap-coordinate: 50% 50%;</pre>
+        <pre>scroll-snap-align: center;</pre>
 
         <!-- Centered scroll snapping container in 2D, rotated -->
@@ -438 +440 @@
         </div>
         <p>The CSS for the above container is:</p>
-        <pre>-webkit-scroll-snap-type: mandatory;<br>-webkit-scroll-snap-destination: 50% 50%;<br>-webkit-transform: rotate(30deg);</pre>
+        <pre>scroll-snap-type: both mandatory;<br>transform: rotate(30deg);</pre>
         <p>The CSS for each of the container&rsquo;s children is:</p>
-        <pre>-webkit-scroll-snap-coordinate: 50% 50%;</pre>
+        <pre>scroll-snap-align: center;</pre>
 
         <p id="nasa">Images from <a target="_blank" href="https://www.nasa.gov/multimedia/imagegallery/iotd.html">NASA&rsquo;s image of the day gallery</a>.</p>