<!DOCTYPE html> <html class="reftest-wait reftest-no-flush"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> <style> html { overflow: hidden; } body { margin: 0px; padding: 0px; } @keyframes anim { from { transform: translateX(0px); } } #target { width: 200vw; height: 100vh; position: absolute; /* Some part of this element needs to be visible initially so that */ /* a display item for this element is generated, thus the transform */ /* animation runs on the compositor. */ transform: translateX(90vw); } </style> <div id="target"> <!-- Put an SVG element so that the transform display item has a blob on Webrender which means this test properly fails without the proper fix. --> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"> <rect fill="green" width="16" height="16"></rect> </svg> </div> <script> // Waiting MozReftestInvalidate event makes this test fail for some reasons. // so we use window.onload instead. window.onload = () => { target.style.animation = "anim 100s step-end reverse"; target.addEventListener("animationstart", () => { document.documentElement.classList.remove("reftest-wait"); }); }; </script> </html>