1 files changed, 113 insertions, 0 deletions
diff --git a/testing/web-platform/tests/scroll-animations/view-timelines/block-view-timeline-nested-subject.tentative.html b/testing/web-platform/tests/scroll-animations/view-timelines/block-view-timeline-nested-subject.tentative.html
new file mode 100644
index 0000000000..6fdc7c6822
--- /dev/null
+++ b/testing/web-platform/tests/scroll-animations/view-timelines/block-view-timeline-nested-subject.tentative.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html id="top">
+<meta charset="utf-8">
+<title>View timeline nested subject</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 type="text/css">
+  #container {
+    overflow-y: scroll;
+    height:  300px;
+    width: 300px;
+  }
+  .big-spacer {
+    height:  800px;
+  }
+  .small-spacer {
+    height:  100px;
+  }
+  #block {
+    background-color:  #ddd;
+  }
+  #target {
+    background-color:  green;
+    height:  100px;
+    width:  100px;
+  }
+</style>
+<body>
+  <div id="container">
+    <div class="big-spacer"></div>
+    <div id="block">
+      <div class="small-spacer"></div>
+      <div id="target"></div>
+    </div>
+    <div class="big-spacer"></div>
+  </div>
+</body>
+<script type="text/javascript">
+  promise_test(async t => {
+    container.scrollTop = 0;
+    await waitForNextFrame();
+
+    const anim = CreateViewTimelineOpacityAnimation(t, target);
+    const timeline = anim.timeline;
+    await anim.ready;
+
+    // start offset = 800 + 100 - 300 = 600
+    // end offset = 800 + 100 + 100 = 1000
+    // scroll limit = L = 800 + 200 + 800 - 300 = 1500
+    // progress = P =  (current - start) / (end - start)
+    // P(0) = -600 / 400 = -1.5
+    // P(L) = 900 / 400 = 2.5
+
+    // Initially before start-offset and animation effect is in the before
+    // phase.
+    assert_percents_equal(timeline.currentTime, -150,
+                          "Timeline's currentTime at container start boundary");
+    assert_percents_equal(anim.currentTime, -150,
+                          "Animation's currentTime at container start boundary");
+    assert_equals(getComputedStyle(target).opacity, "1",
+                  'Effect is inactive in the before phase');
+
+
+    // Advance to the start offset, which triggers entry to the active phase.
+    container.scrollTop = 600;
+    await waitForNextFrame();
+    assert_percents_equal(timeline.currentTime, 0,
+                          "Timeline's current time at start offset");
+    assert_percents_equal(anim.currentTime, 0,
+                          "Animation's current time at start offset");
+    assert_equals(getComputedStyle(target).opacity, '0.3',
+                  'Effect at the start of the active phase');
+
+    // Advance to the midpoint of the animation.
+    container.scrollTop = 800;
+    await waitForNextFrame();
+    assert_percents_equal(timeline.currentTime, 50,
+                          "Timeline's currentTime at midpoint");
+    assert_percents_equal(anim.currentTime, 50,
+                          "Animation's currentTime at midpoint");
+    assert_equals(getComputedStyle(target).opacity,'0.5',
+                  'Effect at the midpoint of the active range');
+
+    // Advance to the end of the animation.
+    container.scrollTop = 1000;
+    await waitForNextFrame();
+    assert_percents_equal(timeline.currentTime, 100,
+                          "Timeline's currentTime at end offset");
+    assert_percents_equal(anim.currentTime, 100,
+                          "Animation's currentTime at end offset");
+    assert_equals(getComputedStyle(target).opacity, '1',
+                  'Effect is in the after phase at effect end time');
+
+    // Advance to the scroll limit.
+    container.scrollTop = 1600;
+    await waitForNextFrame();
+    assert_percents_equal(timeline.currentTime, 225,
+                          "Timeline's currentTime at scroll limit");
+    // Hold time set when the animation finishes, which clamps the value of
+    // the animation's currentTime.
+    assert_percents_equal(anim.currentTime, 100,
+                          "Animation's currentTime at scroll limit");
+    // In the after phase, so the effect should not be applied.
+    assert_equals(getComputedStyle(target).opacity, '1',
+                  'After phase at scroll limit');
+  }, 'View timeline with subject that is not a direct descendant of the ' +
+     'scroll container');
+</script>
+</html>