layout/reftests/bugs/1804872-3.html

   1 <!DOCTYPE html>
   2 <html class="reftest-wait reftest-no-flush">
   3 <style>
   4 html {
   5   /* Suppress scrollbars to avoid periodical unthrottling for transform */
   6   /* animations on the compositor. */
   7   overflow: hidden;
   8 }
   9 body {
  10   margin: 0px;
  11   padding: 0px;
  12 }
  13
  14 @keyframes anim {
  15   0% { scale: 2.0; }
  16   100% { scale: 2.0; }
  17 }
  18
  19 #target {
  20   width: 100px;
  21   height: 100px;
  22   position: absolute;
  23   background-image: url(pinwheel_logo.svg);
  24   background-size: 200px 200px;
  25   background-position: -50px -50px;
  26   background-color: green;
  27   scale:0.1;
  28 }
  29 </style>
  30 <div id="target">
  31
  32
  33 <script>
  34 document.addEventListener('MozReftestInvalidate', () => {
  35   // Set a bit longer animation delay to avoid painting the initial animation
  36   // style on the main thread.
  37   target.style.animation = "anim 100s 1s";
  38   target.addEventListener("animationstart", () => {
  39     requestAnimationFrame(() => {
  40       requestAnimationFrame(() => {
  41         document.documentElement.classList.remove("reftest-wait");
  42       });
  43     });
  44   });
  45 }, { once: true });
  46 </script>
  47 </html>