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