layout/reftests/transform/partial-prerender-expansion-rotate.html

   1 <!DOCTYPE html>
   2 <html class="reftest-wait reftest-no-flush">
   3 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
   4 <style>
   5 html {
   6   overflow: hidden;
   7 }
   8 body {
   9   margin: 0px;
  10   padding: 0px;
  11 }
  12 @keyframes anim {
  13   from { transform: translate(-50vw, -50vh) rotate(85deg); }
  14   to { transform: translate(-50vw, -50vh) rotate(90deg); }
  15 }
  16 #target {
  17   width: 200vw;
  18   height: 200vh;
  19   position: absolute;
  20   transform-origin: 100vw 100vh;
  21 }
  22 </style>
  23 <div id="target">
  24   <!--
  25     Put an SVG element so that the transform display item has a blob on
  26     Webrender which means this test properly fails without the proper fix.
  27     -->
  28   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  29     <rect fill="green" width="16" height="16"></rect>
  30   </svg>
  31 </div>
  32 <script>
  33 // Waiting MozReftestInvalidate event makes this test fail for some reasons.
  34 // so we use window.onload instead.
  35 window.onload = () => {
  36   target.style.animation = "anim 100s step-end reverse";
  37   target.addEventListener("animationstart", () => {
  38     document.documentElement.classList.remove("reftest-wait");
  39   });
  40 };
  41 </script>
  42 </html>