partial-prerender-translate-3.html (1714B)
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 the partial pre-rendered area is completely out of the viewport but still 7 there remains some amount of area of the entire transform element. 8 If we mis-recognize it as NOT a jank, checkerboading will happen. 9 --> 10 <style> 11 html { 12 overflow: hidden; 13 } 14 body { 15 margin: 0px; 16 padding: 0px; 17 } 18 @keyframes anim { 19 /* translate to a position the partial pre-rendered area is outside of the */ 20 /* viewport but still there should remain visible area. */ 21 to { transform: translateX(-150vw); } 22 } 23 #target { 24 width: 200vw; 25 height: 200vh; 26 position: absolute; 27 transform: translateX(0vw); 28 } 29 </style> 30 <div id="target"> 31 <!-- 32 Put an SVG element so that the transform display item has a blob on 33 WebRender which means this test properly fails without the proper fix. 34 --> 35 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"> 36 <rect fill="green" width="16" height="16"></rect> 37 </svg> 38 </div> 39 <script> 40 document.addEventListener("MozReftestInvalidate", () => { 41 target.style.animation = "anim 100s 1s step-start"; 42 target.addEventListener("animationstart", () => { 43 // animationstart event is fired just before requestAnimationFrame callbacks, 44 // so we need to wait two rAF to make sure the initial animation value is 45 // composited on the compositor. 46 requestAnimationFrame(() => { 47 requestAnimationFrame(() => { 48 document.documentElement.classList.remove("reftest-wait"); 49 }); 50 }); 51 }); 52 }, { once: true }); 53 </script> 54 </html>