layout/reftests/transform/partial-prerender-translate-5.html

   1 <!DOCTYPE html>
   2 <html class="reftest-wait reftest-no-flush"
   3       reftest-async-scroll
   4       reftest-displayport-x="0" reftest-displayport-y="0"
   5       reftest-displayport-w="800" reftest-displayport-h="2000"
   6       reftest-async-scroll-x="0" reftest-async-scroll-y="1000">
   7 <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   8 <!--
   9   A test that a partial pre-rendered transform animation is in a position:fixed
  10   layer.
  11   -->
  12 <style>
  13 html {
  14   overflow-x: hidden;
  15 }
  16 body {
  17   margin: 0px;
  18   padding: 0px;
  19 }
  20 @keyframes anim {
  21   to { transform: translateY(-500px); }
  22 }
  23 #target {
  24   width: 800px;
  25   height: 1600px;
  26   transform: translateY(-400px);
  27 }
  28 </style>
  29 <div style="width: 800px; height: 2000px"><!-- spacer --></div>
  30 <div style="position: fixed; top: 400px">
  31   <div id="target">
  32     <!--
  33       Put an SVG element so that the transform display item has a blob on
  34       WebRender which means this test properly fails without the proper fix.
  35       -->
  36     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 1600">
  37       <rect fill="green" y="0"    width="800" height="1000"></rect>
  38       <rect fill="blue"  y="1000" width="800" height="125"></rect>
  39       <rect fill="red"   y="1125" width="800" height="875"></rect>
  40     </svg>
  41   </div>
  42 </div>
  43 <script>
  44 document.addEventListener("MozReftestInvalidate", () => {
  45   target.style.animation = "anim 100s 1s step-start";
  46   target.addEventListener("animationstart", () => {
  47     // animationstart event is fired just before requestAnimationFrame callbacks,
  48     // so we need to wait two rAF to make sure the initial animation value is
  49     // composited on the compositor.
  50     requestAnimationFrame(() => {
  51       requestAnimationFrame(() => {
  52         document.documentElement.classList.remove("reftest-wait");
  53       });
  54     });
  55   });
  56 }, { once: true });
  57 </script>
  58 </html>