layout/reftests/transform/partial-prerender-in-svg-1.html

   1 <!DOCTYPE html>
   2 <html class="reftest-wait reftest-no-flush">
   3 <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   4 <style>
   5 html {
   6   overflow: hidden;
   7 }
   8 body {
   9   margin: 0px;
  10   padding: 0px;
  11 }
  12 @keyframes anim {
  13   /* The reftest window size is (800x1000), which means the partial prerender */
  14   /* area of (400x400) clipped target is (1125x400). Thus -725px(= 400 - 1125)*/
  15   /* is the boundary where jank happens, so we choose a value close to -725px */
  16   /* so that within a next couple of frames jank should happen. */
  17   0% { transform: translateX(-724px); }
  18   100% { transform: translateX(-2000px); }
  19 }
  20 </style>
  21 <svg xmlns="http://www.w3.org/2000/svg" width="400" height="400">
  22   <g id="target">
  23     <svg xmlns="http://www.w3.org/2000/svg" width="10000">
  24       <rect fill="green" x="0"    width="1125" height="400"></rect>
  25       <rect fill="red"   x="1125" width="800"  height="400"></rect>
  26     </svg>
  27   </g>
  28 </svg>
  29 <script>
  30 document.addEventListener("MozReftestInvalidate", () => {
  31   // A shorter animation-duration than we normally use (100s) because if we used
  32   // the longer duration it may NOT fail this test even if any jank happens.
  33   target.style.animation = "anim 10s 1s";
  34   target.addEventListener("animationstart", () => {
  35     // Wait a second to make sure the animation gets stucked (i.e. jank) at the
  36     // boundary (725px).
  37     setTimeout(() => {
  38       document.documentElement.classList.remove("reftest-wait");
  39     }, 1000);
  40   });
  41 }, { once: true });
  42 </script>
  43 </html>