partial-prerender-translate-7.html (1570B)
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 Another variant of partial-prerender-translate-2.html, but the transform 6 animation is scaled by the parent element. 7 --> 8 <style> 9 html { 10 overflow: hidden; 11 } 12 body { 13 margin: 0px; 14 padding: 0px; 15 } 16 @keyframes anim { 17 /* translate to a position where the left edge of partial pre-rendered on */ 18 /* the left edge of the viewport. */ 19 0% { transform: translateX(-649px); } 20 100% { transform: translateX(-2000px); } 21 } 22 #target { 23 width: 4000px; 24 height: 2000px; 25 position: absolute; 26 transform: translateX(0); 27 } 28 </style> 29 <div style="transform: scale(0.5); transform-origin: 0 0"> 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 4000 2000"> 36 <rect fill="green" x="0" width="2250" height="2000"></rect> 37 <rect fill="red" x="2250" width="1750" height="2000"></rect> 38 </svg> 39 </div> 40 </div> 41 <script> 42 document.addEventListener("MozReftestInvalidate", () => { 43 target.style.animation = "anim 10s 1s"; 44 target.addEventListener("animationstart", () => { 45 // Wait a second to make sure the animation gets stucked (i.e. jank) at the 46 // boundary (650px). 47 setTimeout(() => { 48 document.documentElement.classList.remove("reftest-wait"); 49 }, 1000); 50 }); 51 }, { once: true }); 52 </script> 53 </html>