| <!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 (<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> |
