partial-prerender-translate-8.html (2659B)
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 for a partial pre-rendered transform in an iframe, if the clip 6 rectangle of the transform animation were wrong, e.g. (800, 1000), the 7 transform animation janks at the initial position. 8 --> 9 <style> 10 html { 11 overflow: hidden; 12 } 13 body { 14 margin: 0px; 15 padding: 0px; 16 } 17 </style> 18 <!-- a half width of the view port --> 19 <iframe style="width:400px; height:1000px; border: 0" 20 srcdoc="<!DOCTYPE HTML> 21 <html> 22 <style> 23 html { 24 overflow: hidden; 25 scrollbar-width: none; 26 } 27 html, body { 28 margin: 0; 29 padding: 0; 30 } 31 @keyframes anim { 32 /* the partial prerender area is (1125, 1000), thus */ 33 /* translateX(-725px) is the position where the right edge */ 34 /* of the partial prerender is positioned at the right edge */ 35 /* of the clip rect (400, 1000). */ 36 to { transform: translateX(-725px); } 37 } 38 #target { 39 width: 1600px; 40 height: 1000px; 41 transform: translateX(0px); 42 } 43 </style> 44 <div id='target'> 45 <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000'> 46 <rect fill='green' x='0' width='800' height='1000'></rect> 47 <rect fill='blue' x='800' width='325' height='1000'></rect> 48 <rect fill='red' x='1125' width='675' height='1000'></rect> 49 </svg> 50 </div> 51 <script> 52 window.addEventListener('message', () => { 53 if (event.data == 'start') { 54 target.style.animation = 'anim 100s 1s step-start'; 55 target.addEventListener('animationstart', () => { 56 parent.postMessage('animationstart', '*'); 57 }); 58 } 59 }); 60 </script></html>"> 61 </iframe> 62 <script> 63 document.addEventListener("MozReftestInvalidate", () => { 64 document.querySelector("iframe").contentWindow.postMessage("start", "*"); 65 }, { once: true }); 66 67 window.addEventListener("message", event => { 68 if (event.data == "animationstart") { 69 document.documentElement.classList.remove('reftest-wait'); 70 } 71 }); 72 </script> 73 </html>