partial-prerender-translate-6.html (1998B)
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 is (1125x900). Thus -325px(= 800 - 1125) is the boundary where jank */ 15 /* happens, so we choose a value close to -325px so that within a next */ 16 /* couple of frames jank should happen. */ 17 0% { transform: translateX(-324px); } 18 100% { transform: translateX(-2000px); } 19 } 20 #target { 21 width: 1600px; 22 /* Use a smallar value than the reftest window height to avoid bloating up */ 23 /* svg inside this element beyond the window height */ 24 height: 900px; 25 position: absolute; 26 transform: translateX(0px); 27 } 28 </style> 29 <div id="target"> 30 <!-- 31 Put an SVG element so that the transform display item has a blob on 32 WebRender which means this test properly fails without the proper fix. 33 Note: As SVG items get "webrenderized" this test won't work. For now 34 rounded rectangles go through the blob path. 35 --> 36 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 900"> 37 <!-- green on the pre-render area --> 38 <rect fill="green" x="0" width="1125" height="900" rx="0.1"></rect> 39 <rect fill="red" x="1125" width="875" height="900" rx="0.1"></rect> 40 </svg> 41 </div> 42 <script> 43 document.addEventListener("MozReftestInvalidate", () => { 44 // A shorter animation-duration than we normally use (100s) because if we used 45 // the longer duration it may NOT fail this test even if any jank happens. 46 target.style.animation = "anim 10s 1s"; 47 target.addEventListener("animationstart", () => { 48 // Wait a second to make sure the animation gets stucked (i.e. jank) at the 49 // boundary (325px). 50 setTimeout(() => { 51 document.documentElement.classList.remove("reftest-wait"); 52 }, 1000); 53 }); 54 }, { once: true }); 55 </script> 56 </html>