| <!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 bg { |
| from { background-color: blue; } |
| to { background-color: green; } |
| } |
| |
| #colorize { |
| animation: bg steps(2, jump-none) both; |
| animation-timeline: view(); |
| animation-range: contain; |
| background-color: red; |
| color: white; |
| } |
| |
| .spacer { |
| height: 80vh; |
| } |
| </style> |
| <body> |
| <div class="spacer"></div> |
| <div id="content"> |
| <p>Hello <span id="colorize">world</span></p> |
| </div> |
| <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 anim = document.getAnimations()[0]; |
| await anim.ready; |
| assert_equals(getComputedStyle(anim.effect.target) |
| .backgroundColor, 'rgb(0, 0, 255)'); |
| scroller.scrollTop = |
| scroller.scrollHeight - scroller.clientHeight; |
| await waitForNextFrame(); |
| assert_equals(getComputedStyle(anim.effect.target) |
| .backgroundColor, 'rgb(0, 128, 0)'); |
| }, 'View timeline attached to SVG graphics element'); |
| </script> |
| </html> |
