| <!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</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"> |
| <path id="line" d="M 50 0 V 3000"></path> |
| </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> |
