partial-prerender-translate-2.html (1830B)
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 <!-- 5 A test for a partial pre-rendered transform animation moves to a place where 6 jank happens. 7 --> 8 <style> 9 html { 10 overflow: hidden; 11 } 12 body { 13 margin: 0px; 14 padding: 0px; 15 } 16 @keyframes anim { 17 /* The reftest window size is (800x1000), which means the partial prerender */ 18 /* area is (1125x1125). Thus -325px(= 800 - 1125) is the boundary where */ 19 /* jank happens, so we choose a value close to -325px so that within a next */ 20 /* couple of frames jank should happen. */ 21 0% { transform: translateX(-324px); } 22 100% { transform: translateX(-2000px); } 23 } 24 #target { 25 width: 2000px; 26 height: 2000px; 27 position: absolute; 28 transform: translateX(0px); 29 } 30 </style> 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 2000 2000"> 37 <!-- green on the pre-render area --> 38 <rect fill="green" x="0" width="1125" height="2000"></rect> 39 <rect fill="red" x="1125" width="875" height="2000"></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>