svg-graphics-element-003.html (1523B)
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 (<foreignObject>)</title> 7 </head> 8 <style type="text/css"> 9 @keyframes color { 10 from { color: rgb(0, 0, 254); } 11 to { color: rgb(0, 128, 0); } 12 } 13 14 #fo { 15 animation: color 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" color="red"> 25 <foreignObject id="fo" x="47.5" width="3000" height="5" 26 transform="rotate(90, 47.5, 0)"> 27 <div style="width: 100%; height: 200%; background-color: currentcolor"></div> 28 </foreignObject> 29 </svg> 30 <div class="spacer"></div> 31 </body> 32 <script src="/resources/testharness.js"></script> 33 <script src="/resources/testharnessreport.js"></script> 34 <script src="/web-animations/testcommon.js"></script> 35 <script> 36 promise_test(async t => { 37 const scroller = document.scrollingElement; 38 const target = document.getElementById('fo'); 39 const anim = target.getAnimations()[0]; 40 await anim.ready; 41 assert_equals(getComputedStyle(target).color, 'rgb(0, 0, 254)'); 42 await runAndWaitForFrameUpdate(() => { 43 scroller.scrollTop = 44 0.5*(scroller.scrollHeight - scroller.clientHeight); 45 }); 46 assert_equals(getComputedStyle(target).color, 'rgb(0, 64, 127)'); 47 }, 'View timeline attached to SVG graphics element'); 48 </script> 49 </html>