partial-prerender-translate-4.html (1721B)
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 that a partial pre-rendered transform animation is transformed by an 6 ancestor transform value. 7 If we don't factor the ancestor's transform, we mis-recognize janks, which 8 means janked at the initial translateX(0vw) position, thus white blank area 9 will appears. 10 --> 11 <style> 12 html { 13 overflow: hidden; 14 } 15 body { 16 margin: 0px; 17 padding: 0px; 18 } 19 @keyframes anim { 20 /* translate to a position where the left edge of partial pre-rendered on */ 21 /* the left edge of the viewport. */ 22 to { transform: translateX(-50vw); } 23 } 24 #target { 25 width: 300vw; 26 height: 300vh; 27 transform: translateX(0vw); 28 } 29 </style> 30 <div style="transform: translateX(50vw);"> 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 16 16"> 37 <rect fill="green" width="16" height="16"></rect> 38 </svg> 39 </div> 40 </div> 41 <script> 42 document.addEventListener("MozReftestInvalidate", () => { 43 target.style.animation = "anim 100s 1s step-start"; 44 target.addEventListener("animationstart", () => { 45 // animationstart event is fired just before requestAnimationFrame callbacks, 46 // so we need to wait two rAF to make sure the initial animation value is 47 // composited on the compositor. 48 requestAnimationFrame(() => { 49 requestAnimationFrame(() => { 50 document.documentElement.classList.remove("reftest-wait"); 51 }); 52 }); 53 }); 54 }, { once: true }); 55 </script> 56 </html>