partial-prerender-expansion-translate.html (1265B)
1 <!DOCTYPE html> 2 <html class="reftest-wait reftest-no-flush"> 3 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> 4 <style> 5 html { 6 overflow: hidden; 7 } 8 body { 9 margin: 0px; 10 padding: 0px; 11 } 12 @keyframes anim { 13 from { transform: translateX(0px); } 14 } 15 #target { 16 width: 200vw; 17 height: 100vh; 18 position: absolute; 19 /* Some part of this element needs to be visible initially so that */ 20 /* a display item for this element is generated, thus the transform */ 21 /* animation runs on the compositor. */ 22 transform: translateX(90vw); 23 } 24 </style> 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 16 16"> 31 <rect fill="green" width="16" height="16"></rect> 32 </svg> 33 </div> 34 <script> 35 // Waiting MozReftestInvalidate event makes this test fail for some reasons. 36 // so we use window.onload instead. 37 window.onload = () => { 38 target.style.animation = "anim 100s step-end reverse"; 39 target.addEventListener("animationstart", () => { 40 document.documentElement.classList.remove("reftest-wait"); 41 }); 42 }; 43 </script> 44 </html>