<!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>