Timing data must be invalidated after layout changes

If viewport size, subject size, insets, ... change, and as a result the start offset and end offset changes, then the timing on the KeyframeEffect should be invalidated. Bug: 1375998 Change-Id: I56296c10fc17bb4327dc98b224938af3a69526b2 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3968997 Reviewed-by: Kevin Ellis <kevers@chromium.org> Commit-Queue: Mehdi Kazemi <mehdika@chromium.org> Cr-Commit-Position: refs/heads/main@{#1062178}
web-platform-tests · Oct 21, 2022 · 811673c · 811673c
1 parent 38ddcd3
commit 811673c
Showing 1 changed file with 79 additions and 0 deletions.
diff --git a/scroll-animations/view-timelines/view-timeline-subject-size-changes.html b/scroll-animations/view-timelines/view-timeline-subject-size-changes.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html id="top">
+<meta charset="utf-8">
+<title>View timeline Subject size changes after creation of Animation</title>
+<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#viewtimeline-interface">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/web-animations/testcommon.js"></script>
+<script src="/scroll-animations/scroll-timelines/testcommon.js"></script>
+<script src="/scroll-animations/view-timelines/testcommon.js"></script>
+<style>
+  #container {
+    border:  10px solid lightgray;
+    overflow-y: scroll;
+    height:  400px;
+    width: 400px;
+  }
+  .spacer {
+    height:  500px;
+  }
+  #target {
+    background-color:  green;
+    height:  100px;
+    width:  100px;
+  }
+</style>
+<body>
+  <div id="container">
+    <div class="spacer"></div>
+    <div id="target"></div>
+    <div class="spacer"></div>
+  </div>
+</body>
+
+<script type="text/javascript">
+promise_test(async t => {
+  const options = {
+    axis: 'vertical',
+    timing: {
+      delay: { phase: 'enter', percent: CSS.percent(0) },
+      endDelay: { phase: 'enter', percent: CSS.percent(100) },
+      // Set fill to accommodate floating point precision errors at the endpoints.
+      fill: 'both'
+    }
+  };
+
+  container.scrollTop = 0;
+  await waitForNextFrame();
+
+  const anim = CreateViewTimelineOpacityAnimation(t, target, options);
+  anim.effect.updateTiming(options.timing);
+  await anim.ready;
+
+  // Advance to the start offset, which triggers entry to the active phase.
+  container.scrollTop = 100;
+  await waitForNextFrame();
+  assert_equals(getComputedStyle(target).opacity, '0.3',
+                `Effect at the start of the active phase`);
+
+  // Advance to the midpoint of the animation.
+  container.scrollTop = 150;
+  await waitForNextFrame();
+  assert_equals(getComputedStyle(target).opacity,'0.5',
+                `Effect at the midpoint of the active range`);
+
+  // Since the height of the target is cut in half, the animation should be at the end now.
+  target.style.height = '50px';
+  await waitForNextFrame();
+  assert_equals(getComputedStyle(target).opacity, '0.7',
+                `Effect at the end of the active range`);
+
+  // Advance to the midpoint of the animation again.
+  container.scrollTop = 125;
+  await waitForNextFrame();
+  assert_equals(getComputedStyle(target).opacity,'0.5',
+                `Effect at the midpoint of the active range again`);
+
+  }, 'View timeline with subject size change after the creation of the animation');
+</script>