partial-prerender-translate-11.html (1497B)
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 case that the nearest oveflow:hidden scroll frame is the clip frame 6 for the partial pre-render transform animation. 7 --> 8 <style> 9 html, body { 10 margin: 0; 11 padding: 0; 12 } 13 #target { 14 width: 30000px; 15 height: 100px; 16 transform: translateX(-2500px); 17 /* 18 * 1s delay so that we can avoid undesired composition, i.e. the first 19 * composition on the composition would be the final transition value. 20 */ 21 transition: transform 100s step-start 1s; 22 } 23 </style> 24 <div style="width: 50%; overflow: hidden"> 25 <div id="target"> 26 <!-- 27 Put an SVG element so that the transform display item has a blob on 28 WebRender which means this test properly fails without the proper fix. 29 --> 30 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30000 100"> 31 <rect fill="green" x="2500" width="400" height="100"></rect> 32 <rect fill="blue" x="2900" width="100" height="100"></rect> 33 </svg> 34 </div> 35 </div> 36 <script> 37 document.addEventListener("MozReftestInvalidate", () => { 38 target.style.transform = "translateX(-2600px)"; 39 target.addEventListener("transitionstart", () => { 40 // Wait a second to make sure the transition has been composited on the 41 // compositor. 42 setTimeout(() => { 43 document.documentElement.classList.remove("reftest-wait"); 44 }, 1000); 45 }); 46 }, { once: true }); 47 </script> 48 </html>