partial-prerender-expansion-with-resolution-2.html (2758B)
1 <!DOCTYPE html> 2 <html class="reftest-wait reftest-no-flush" reftest-resolution="0.5"> 3 <meta name="viewport" content="width=device-width,minimum-scale=0.5,initial-scale=1"> 4 <!-- 5 A variant of partial-prerender-expansion-with-resolution-2.html, a partial 6 pre-rendered transform animation in an iframe with <1.0 resolution. 7 --> 8 <style> 9 html { 10 scrollbar-width: none; 11 } 12 body { 13 margin: 0px; 14 padding: 0px; 15 } 16 </style> 17 <iframe style="width:1600px; height:2000px; border: 0" 18 srcdoc="<!DOCTYPE HTML> 19 <html> 20 <style> 21 html { 22 scrollbar-width: none; 23 } 24 html, body { 25 margin: 0; 26 padding: 0; 27 } 28 29 @keyframes anim { 30 /* The reftest window size is (800x1000) and it's scaled by */ 31 /* 0.5 (= 1600x2000), which means the partial pre-render */ 32 /* size is (2250x2250) so move to a position inside the */ 33 /* pre-render area and away from the pre-render right edge, */ 34 /* translateX(-650px), so that we can avoid blurry edges in */ 35 /* comparison with the reference. */ 36 to { transform: translateX(-400px); } 37 } 38 #target { 39 width: 4000px; 40 height: 4000px; 41 position: absolute; 42 transform: translateX(0px); 43 } 44 </style> 45 <div id='target'> 46 <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4000 4000'> 47 <rect fill='green' x='0' width='1600' height='4000'></rect> 48 <rect fill='blue' x='1600' width='650' height='4000'></rect> 49 <rect fill='red' x='2250' width='1750' height='4000'></rect> 50 </svg> 51 </div> 52 <script> 53 window.addEventListener('message', () => { 54 if (event.data == 'start') { 55 target.style.animation = 'anim 100s 1s step-start'; 56 target.addEventListener('animationstart', () => { 57 parent.postMessage('animationstart', '*'); 58 }); 59 } 60 }); 61 </script></html>"> 62 </iframe> 63 <script> 64 document.addEventListener("MozReftestInvalidate", () => { 65 document.querySelector("iframe").contentWindow.postMessage("start", "*"); 66 }, { once: true }); 67 68 window.addEventListener("message", event => { 69 if (event.data == "animationstart") { 70 document.documentElement.classList.remove('reftest-wait'); 71 } 72 }); 73 </script> 74 </html>