Changeset 211282 in webkit

Timestamp:

Jan 27, 2017 7:58:05 AM (7 years ago)

Author:

Wenson Hsieh

Message:

Unreviewed, update scroll snapping demos to use current Module 1 spec

• demos/scroll-snap/index.html:

Adopt the new CSS properties scroll-snap-type and scroll-snap-align.

Location:

trunk/Websites/webkit.org

Files:

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

trunk/Websites/webkit.org/ChangeLog

@@ +1 @@
+2017-01-27  Wenson Hsieh  <wenson_hsieh@apple.com>
+
+        Unreviewed, update scroll snapping demos to use current Module 1 spec
+
+        * demos/scroll-snap/index.html:
+
+        Adopt the new CSS properties scroll-snap-type and scroll-snap-align.
+
 2017-01-26  Wenson Hsieh  <wenson_hsieh@apple.com>
 

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

@@ -124 +124 @@
         #snap-scroll-container {
             -webkit-scroll-snap-type: mandatory;
-            scroll-snap-type: mandatory;
+            scroll-snap-type: x mandatory;
             -webkit-scroll-snap-points-x: repeat(100%);
             scroll-snap-points-x: repeat(100%);
         }
 
+        #snap-scroll-container > .child {
+            scroll-snap-align: start;
+        }
+
         #snap-scroll-container-coordinates {
             -webkit-scroll-snap-type: mandatory;
-            scroll-snap-type: mandatory;
+            scroll-snap-type: x mandatory;
         }
 
@@ -137 +141 @@
             -webkit-scroll-snap-coordinate: 0% 0%;
             scroll-snap-coordinate: 0% 0%;
+            scroll-snap-align: start;
         }
 
@@ -142 +147 @@
             width: 402px;
             -webkit-scroll-snap-type: mandatory;
-            scroll-snap-type: mandatory;
+            scroll-snap-type: x mandatory;
             -webkit-scroll-snap-destination: 50% 50%;
             scroll-snap-destination: 50% 50%;
@@ -150 +155 @@
             -webkit-scroll-snap-coordinate: 50% 50%;
             scroll-snap-coordinate: 50% 50%;
+            scroll-snap-align: center;
         }
 
@@ -182 +188 @@
         #snap-scroll-container-2D-rotated {
             -webkit-scroll-snap-type: mandatory;
-            scroll-snap-type: mandatory;
+            scroll-snap-type: both mandatory;
             -webkit-scroll-snap-destination: 50% 50%;
             scroll-snap-destination: 50% 50%;
@@ -197 +203 @@
             width: 400px;
             height: 400px;
+            scroll-snap-align: center;
         }