1 files changed, 59 insertions, 0 deletions
diff --git a/testing/web-platform/tests/scroll-animations/view-timelines/unattached-subject-inset.html b/testing/web-platform/tests/scroll-animations/view-timelines/unattached-subject-inset.html
new file mode 100644
index 0000000000..86262db8f8
--- /dev/null
+++ b/testing/web-platform/tests/scroll-animations/view-timelines/unattached-subject-inset.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Test construction of a view timeline with a detached subject</title>
+</head>
+<style type="text/css">
+  #container {
+    overflow:  hidden;
+    height:  200px;
+    width:  200px;
+  }
+
+  #block {
+    background:  green;
+    height:  100px;
+    width:  100px;
+  }
+
+  .filler {
+    height:  200px;
+  }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/web-animations/testcommon.js"></script>
+<body>
+  <div id="container">
+    <div class="filler"></div>
+  </div>
+</body>
+<script>
+  promise_test(async t => {
+    const element = document.createElement('div');
+    element.id = 'block';
+    const timeline = new ViewTimeline({
+      subject: element,
+      inset: new CSSMathNegate(CSS.px(144))
+    });
+    assert_equals(timeline.source, null, 'Null source while detached');
+    await waitForNextFrame();
+    const scroller = document.getElementById('container');
+    scroller.appendChild(element);
+    assert_equals(timeline.source, scroller, 'Source resolved once attached');
+    await waitForNextFrame();
+
+    // Start offset = cover 0%
+    //              = target offset - viewport height + end side inset
+    //              = 200 - 200 + (-144) = -144
+    assert_equals(timeline.startOffset.toString(), CSS.px(-144).toString());
+    // End offset = cover 100%
+    //            = target offset + target height - start side inset
+    //            = 200 + 100 - (-144) = 444
+    assert_equals(timeline.endOffset.toString(), CSS.px(444).toString());
+  }, 'Creating a view timeline with a subject that is not attached to the ' +
+     'document works as expected');
+</script>
+</html>