canvas-webgl-translate-in-animation.html (1213B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <title>CSS Test: translate webgl canvas in an animation via set current time.</title> 4 <link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"/> 5 <link rel="help" href="https://www.w3.org/TR/css-transforms-1/#funcdef-transform-translate"/> 6 <link rel="match" href="canvas-webgl-translate-in-animation-ref.html"/> 7 <meta name="assert" content="canvas is translated by half the total distance"/> 8 <script src="/common/reftest-wait.js"></script> 9 10 <style> 11 @keyframes move { 12 to { transform: translate(300px); } 13 } 14 15 canvas { 16 will-change: transform; 17 animation: move; 18 animation-duration: 1s; 19 animation-timing-function: linear; 20 animation-play-state: paused; 21 } 22 </style> 23 24 <canvas id="canvas" width="150" height="150"></canvas> 25 26 <script> 27 async function runTest() { 28 const gl = canvas.getContext("webgl"); 29 if(gl != null) { 30 gl.clearColor(0.0, 1.0, 0.0, 1.0); 31 gl.clear(gl.COLOR_BUFFER_BIT); 32 } 33 34 requestAnimationFrame(() => { 35 document.getAnimations().forEach((animation) => { 36 animation.currentTime = 500; 37 }); 38 takeScreenshot(); 39 }); 40 } 41 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 42 </script> 43 </html>