Update timeline and animations when children of source element are re…

…sized
flackr · Jan 25, 2024 · 1fba765 · 1fba765
1 parent 028fc68
commit 1fba765
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/src/scroll-timeline-base.js b/src/scroll-timeline-base.js
@@ -248,7 +248,8 @@ function updateMeasurements(source) {
 }
 
 function updateSource(timeline, source) {
-  const oldSource = scrollTimelineOptions.get(timeline).source;
+  const timelineDetails = scrollTimelineOptions.get(timeline);
+  const oldSource = timelineDetails.source;
   if (oldSource == source)
     return;
 
@@ -272,7 +273,7 @@ function updateSource(timeline, source) {
       }
     }
   }
-  scrollTimelineOptions.get(timeline).source = source;
+  timelineDetails.source = source;
   if (source) {
     let details = sourceDetails.get(source);
     if (!details) {
@@ -287,10 +288,13 @@ function updateSource(timeline, source) {
       // Use resize observer to detect changes to source size
       const resizeObserver = new ResizeObserver((entries) => {
         for (const entry of entries) {
-          updateMeasurements(entry.target)
+          updateMeasurements(timelineDetails.source)
         }
       });
       resizeObserver.observe(source);
+      for (const child of source.children) {
+        resizeObserver.observe(child)
+      }
 
       // Use mutation observer to detect updated style attributes on source element
       const mutationObserver = new MutationObserver((records) => {

diff --git a/test/expected.txt b/test/expected.txt
@@ -956,6 +956,6 @@ PASS	/scroll-animations/view-timelines/view-timeline-source.tentative.html	View
 PASS	/scroll-animations/view-timelines/view-timeline-source.tentative.html	View timeline source is null when display:none
 FAIL	/scroll-animations/view-timelines/view-timeline-sticky-block.html	View timeline with sticky target, block axis.
 FAIL	/scroll-animations/view-timelines/view-timeline-sticky-inline.html	View timeline with sticky target, block axis.
-FAIL	/scroll-animations/view-timelines/view-timeline-subject-size-changes.html	View timeline with subject size change after the creation of the animation
+PASS	/scroll-animations/view-timelines/view-timeline-subject-size-changes.html	View timeline with subject size change after the creation of the animation
 FAIL	/scroll-animations/view-timelines/zero-intrinsic-iteration-duration.tentative.html	Intrinsic iteration duration is non-negative
-Passed 434 of 959 tests.
+Passed 436 of 960 tests.