partial-prerender-in-svg-2.html (1548B)
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 style="overflow: scroll"> 23 <g id="target"> 24 <svg xmlns="http://www.w3.org/2000/svg" width="10000"> 25 <rect fill="green" x="0" width="1125" height="400"></rect> 26 <rect fill="red" x="1125" width="800" height="400"></rect> 27 </svg> 28 </g> 29 </svg> 30 <script> 31 document.addEventListener("MozReftestInvalidate", () => { 32 // A shorter animation-duration than we normally use (100s) because if we used 33 // the longer duration it may NOT fail this test even if any jank happens. 34 target.style.animation = "anim 10s 1s"; 35 target.addEventListener("animationstart", () => { 36 // Wait a second to make sure the animation gets stucked (i.e. jank) at the 37 // boundary (725px). 38 setTimeout(() => { 39 document.documentElement.classList.remove("reftest-wait"); 40 }, 1000); 41 }); 42 }, { once: true }); 43 </script> 44 </html>