svg-graphics-element-001.html (1365B)
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 stroke { 10 from { stroke: rgb(0, 0, 254); } 11 to { stroke: rgb(0, 128, 0); } 12 } 13 14 #line { 15 animation: stroke auto linear both; 16 animation-timeline: view(); 17 animation-range: exit-crossing; 18 } 19 .spacer { 20 height: 100vh; 21 } 22 </style> 23 <body> 24 <svg width="100" height="3000" stroke="red" stroke-width="5"> 25 <path id="line" d="M 50 0 V 3000"></path> 26 </svg> 27 <div class="spacer"></div> 28 </body> 29 <script src="/resources/testharness.js"></script> 30 <script src="/resources/testharnessreport.js"></script> 31 <script src="/web-animations/testcommon.js"></script> 32 <script> 33 promise_test(async t => { 34 const scroller = document.scrollingElement; 35 const target = document.getElementById('line'); 36 const anim = target.getAnimations()[0]; 37 await anim.ready; 38 assert_equals(getComputedStyle(target).stroke, 'rgb(0, 0, 254)'); 39 await runAndWaitForFrameUpdate(() => { 40 scroller.scrollTop = 41 0.5*(scroller.scrollHeight - scroller.clientHeight); 42 }); 43 assert_equals(getComputedStyle(target).stroke, 'rgb(0, 64, 127)'); 44 }, 'View timeline attached to SVG graphics element'); 45 </script> 46 </html>