1 files changed, 47 insertions, 0 deletions
diff --git a/testing/web-platform/tests/scroll-animations/view-timelines/svg-graphics-element-002.html b/testing/web-platform/tests/scroll-animations/view-timelines/svg-graphics-element-002.html
new file mode 100644
index 0000000000..e173a649ef
--- /dev/null
+++ b/testing/web-platform/tests/scroll-animations/view-timelines/svg-graphics-element-002.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>View Timeline attached to an SVG graphics element in a nested &lt;svg></title>
+</head>
+<style type="text/css">
+  @keyframes stroke {
+    from { stroke: rgb(0, 0, 254); }
+    to { stroke: rgb(0, 128, 0); }
+  }
+
+  #line {
+    animation: stroke auto linear both;
+    animation-timeline: view();
+    animation-range: exit-crossing;
+  }
+  .spacer {
+    height:  100vh;
+  }
+</style>
+<body>
+<svg width="100" height="3000" stroke="red" stroke-width="5">
+  <svg>
+    <path id="line" d="M 50 0 V 3000"></path>
+  </svg>
+</svg>
+<div class="spacer"></div>
+</body>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/web-animations/testcommon.js"></script>
+<script>
+  promise_test(async t => {
+    const scroller = document.scrollingElement;
+    const target = document.getElementById('line');
+    const anim = target.getAnimations()[0];
+    await anim.ready;
+    assert_equals(getComputedStyle(target).stroke, 'rgb(0, 0, 254)');
+    scroller.scrollTop =
+        0.5*(scroller.scrollHeight - scroller.clientHeight);
+    await waitForNextFrame();
+    assert_equals(getComputedStyle(target).stroke, 'rgb(0, 64, 127)');
+  }, 'View timeline attached to SVG graphics element');
+</script>
+</html>