animation-offscreen-to-onscreen.html (1192B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>Validates rendering of a transformed element when the element is initially off screen</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/#the-current-ready-promise"> 6 <link rel="match" href="animation-offscreen-to-onscreen-ref.html"> 7 <style type="text/css" media="screen"> 8 body { 9 margin: 0; 10 } 11 12 @keyframes anim { 13 from { transform: translate(100px, 0px); } 14 to { transform: translate(100px, 0px); } 15 } 16 17 #box { 18 position: absolute; 19 left: 0px; 20 top: 100px; 21 height: 100px; 22 width: 100px; 23 margin: 0; 24 background-color: green; 25 transform: translate(-2000px, 0px); 26 animation-duration: 10s; 27 animation-direction: normal; 28 animation-timing-function: linear; 29 animation-name: anim; 30 } 31 </style> 32 <body> 33 <div id="box"></div> 34 </body> 35 <script src="/common/reftest-wait.js"></script> 36 <script src="support/testcommon.js"></script> 37 <script type="text/javascript"> 38 window.onload = async () => { 39 await document.getAnimations()[0].ready; 40 await waitForNextFrame(); 41 takeScreenshot(); 42 } 43 </script> 44 </html>