inline-subject.html (1395B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title>View Timeline attached to an SVG graphics element</title> 7 </head> 8 <style type="text/css"> 9 @keyframes bg { 10 from { background-color: blue; } 11 to { background-color: green; } 12 } 13 14 #colorize { 15 animation: bg steps(2, jump-none) both; 16 animation-timeline: view(); 17 animation-range: contain; 18 background-color: red; 19 color: white; 20 } 21 22 .spacer { 23 height: 80vh; 24 } 25 </style> 26 <body> 27 <div class="spacer"></div> 28 <div id="content"> 29 <p>Hello <span id="colorize">world</span></p> 30 </div> 31 <div class="spacer"></div> 32 </body> 33 <script src="/resources/testharness.js"></script> 34 <script src="/resources/testharnessreport.js"></script> 35 <script src="/web-animations/testcommon.js"></script> 36 <script> 37 promise_test(async t => { 38 const scroller = document.scrollingElement; 39 const anim = document.getAnimations()[0]; 40 await anim.ready; 41 assert_equals(getComputedStyle(anim.effect.target) 42 .backgroundColor, 'rgb(0, 0, 255)'); 43 44 await runAndWaitForFrameUpdate(() => { 45 scroller.scrollTop = scroller.scrollHeight - scroller.clientHeight; 46 }); 47 assert_equals(getComputedStyle(anim.effect.target) 48 .backgroundColor, 'rgb(0, 128, 0)'); 49 }, 'View timeline attached to SVG graphics element'); 50 </script> 51 </html>