svg-graphics-element-002.html (1405B)
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 in a nested <svg></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 <svg> 26 <path id="line" d="M 50 0 V 3000"></path> 27 </svg> 28 </svg> 29 <div class="spacer"></div> 30 </body> 31 <script src="/resources/testharness.js"></script> 32 <script src="/resources/testharnessreport.js"></script> 33 <script src="/web-animations/testcommon.js"></script> 34 <script> 35 promise_test(async t => { 36 const scroller = document.scrollingElement; 37 const target = document.getElementById('line'); 38 const anim = target.getAnimations()[0]; 39 await anim.ready; 40 assert_equals(getComputedStyle(target).stroke, 'rgb(0, 0, 254)'); 41 await runAndWaitForFrameUpdate(() => { 42 scroller.scrollTop = 43 0.5*(scroller.scrollHeight - scroller.clientHeight); 44 }); 45 assert_equals(getComputedStyle(target).stroke, 'rgb(0, 64, 127)'); 46 }, 'View timeline attached to SVG graphics element'); 47 </script> 48 </html>