From db93642a02f0271c2a96a1f15861d04813b67b10 Mon Sep 17 00:00:00 2001 From: Bramus Date: Fri, 19 Jan 2024 19:59:56 +0000 Subject: [PATCH] Allow self keyword as the source type (#189) --- ...s-scroll-timeline-animation-shorthand.html | 26 ++++++++++++++++--- src/scroll-timeline-base.js | 11 +++++++- src/scroll-timeline-css-parser.js | 2 +- 3 files changed, 34 insertions(+), 5 deletions(-) diff --git a/demo/basic/anonymous-scroll-timeline-animation-shorthand.html b/demo/basic/anonymous-scroll-timeline-animation-shorthand.html index 38ae8e14..722a378b 100644 --- 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 @@
-
+
+
+
diff --git a/src/scroll-timeline-base.js b/src/scroll-timeline-base.js index c9c093f1..593be392 100644 --- 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 index cb167e5e..ec718bb7 100644 --- 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.