1 files changed, 48 insertions, 0 deletions
diff --git a/testing/web-platform/tests/scroll-animations/view-timelines/svg-graphics-element-003.html b/testing/web-platform/tests/scroll-animations/view-timelines/svg-graphics-element-003.html
new file mode 100644
index 0000000000..48e238c8ed
--- /dev/null
+++ b/testing/web-platform/tests/scroll-animations/view-timelines/svg-graphics-element-003.html
@@ -0,0 +1,48 @@
+<!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 (&lt;foreignObject>)</title>
+</head>
+<style type="text/css">
+  @keyframes color {
+    from { color: rgb(0, 0, 254); }
+    to { color: rgb(0, 128, 0); }
+  }
+
+  #fo {
+    animation: color auto linear both;
+    animation-timeline: view();
+    animation-range: exit-crossing;
+  }
+  .spacer {
+    height:  100vh;
+  }
+</style>
+<body>
+<svg width="100" height="3000" color="red">
+  <foreignObject id="fo" x="47.5" width="3000" height="5"
+                 transform="rotate(90, 47.5, 0)">
+    <div style="width: 100%; height: 200%; background-color: currentcolor"></div>
+  </foreignObject>
+</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('fo');
+    const anim = target.getAnimations()[0];
+    await anim.ready;
+    assert_equals(getComputedStyle(target).color, 'rgb(0, 0, 254)');
+    scroller.scrollTop =
+        0.5*(scroller.scrollHeight - scroller.clientHeight);
+    await waitForNextFrame();
+    assert_equals(getComputedStyle(target).color, 'rgb(0, 64, 127)');
+  }, 'View timeline attached to SVG graphics element');
+</script>
+</html>