Allow self keyword as the source type (#189)

flackr · Jan 19, 2024 · db93642 · db93642
1 parent 147d187
commit db93642
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 5 deletions.
diff --git a/demo/basic/anonymous-scroll-timeline-animation-shorthand.html b/demo/basic/anonymous-scroll-timeline-animation-shorthand.html
@@ -16,12 +16,30 @@
     to { width: 120px; }
   }
 
+@keyframes outlineChange {
+  from { outline: 0px solid lime; }
+  to { outline: 10px solid lime; }
+}
+
   #box_one {
     width: 100px;
     height: 100px;
     background-color: green;
-    animation: linear colorChange both, linear widthChange both, move linear;
-    animation-timeline: scroll(root), auto, scroll(nearest y);
+    overflow-y: scroll;
+    animation:
+      linear colorChange both,
+      linear widthChange both,
+      move linear,
+      linear outlineChange both;
+    animation-timeline:
+      scroll(root),
+      auto,
+      scroll(nearest y),
+      scroll(self y);
+  }
+
+  .content {
+    height: 400px;
   }
 
   .spacer {
@@ -44,7 +62,9 @@
 <body>
 
   <div id="container">
-    <div id="box_one"></div>
+    <div id="box_one">
+      <div class="content"></div>
+    </div>
     <div class="spacer"></div>
   </div>
 

diff --git a/src/scroll-timeline-base.js b/src/scroll-timeline-base.js
@@ -491,7 +491,16 @@ function findClosestAncestor(element, matcher) {
 }
 
 export function getAnonymousSourceElement(sourceType, node) {
-  return sourceType == 'root' ? document.scrollingElement : getScrollParent(node);
+  switch (sourceType) {
+    case 'root':
+      return document.scrollingElement;
+    case 'nearest':
+      return getScrollParent(node);
+    case 'self':
+      return node;
+    default:
+      throw new TypeError('Invalid ScrollTimeline Source Type.');
+  }
 }
 
 function isBlockContainer(element) {

diff --git a/src/scroll-timeline-css-parser.js b/src/scroll-timeline-css-parser.js
@@ -35,7 +35,7 @@ const ANIMATION_KEYWORDS = [
 ];
 
 const TIMELINE_AXIS_TYPES = ['block', 'inline', 'x', 'y'];
-const ANONYMOUS_TIMELINE_SOURCE_TYPES = ['nearest', 'root'];
+const ANONYMOUS_TIMELINE_SOURCE_TYPES = ['nearest', 'root', 'self'];
 
 // Parse a styleSheet to extract the relevant elements needed for
 // scroll-driven animations.