jump-start-animation-before-phase.html (1033B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>Validates rendering of an animated element with jump-start in the before phase</title> 4 <link rel="help" href="https://www.w3.org/TR/css-animations-1"> 5 <link rel="help" href="https://www.w3.org/TR/web-animations-1/#calculating-the-transformed-progress"> 6 <link rel="match" href="jump-start-animation-before-phase-ref.html"> 7 <style type="text/css" media="screen"> 8 body { 9 margin: 0; 10 } 11 12 @keyframes slide { 13 from { transform: translateX(100px); } 14 to { transform: translateX(200px); } 15 } 16 17 #target { 18 background-color: green; 19 height: 100px; 20 width: 100px; 21 margin: 0; 22 animation: slide 10000s 5000s steps(1, jump-start) backwards; 23 } 24 </style> 25 <body> 26 <div id="target"></div> 27 </body> 28 <script src="/common/reftest-wait.js"></script> 29 <script src="support/testcommon.js"></script> 30 <script type="text/javascript"> 31 window.onload = async () => { 32 await document.getAnimations()[0].ready; 33 await waitForNextFrame(); 34 takeScreenshot(); 35 } 36 </script>