partial-prerender-expansion-rotate.html (1129B)
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: translate(-50vw, -50vh) rotate(85deg); } 14 to { transform: translate(-50vw, -50vh) rotate(90deg); } 15 } 16 #target { 17 width: 200vw; 18 height: 200vh; 19 position: absolute; 20 transform-origin: 100vw 100vh; 21 } 22 </style> 23 <div id="target"> 24 <!-- 25 Put an SVG element so that the transform display item has a blob on 26 Webrender which means this test properly fails without the proper fix. 27 --> 28 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"> 29 <rect fill="green" width="16" height="16"></rect> 30 </svg> 31 </div> 32 <script> 33 // Waiting MozReftestInvalidate event makes this test fail for some reasons. 34 // so we use window.onload instead. 35 window.onload = () => { 36 target.style.animation = "anim 100s step-end reverse"; 37 target.addEventListener("animationstart", () => { 38 document.documentElement.classList.remove("reftest-wait"); 39 }); 40 }; 41 </script> 42 </html>