partial-prerender-in-svg-1.html (1518B)
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>