partial-prerender-translate-1.html (1851B)
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 animation moves to a place where 6 the whole area of the transform animation is out of the viewport. 7 We consider it jank, thus we report it to the main-thread, then we clear out 8 the initial green rectangle, thus the result should be a blank page. 9 --> 10 <style> 11 html { 12 overflow: hidden; 13 } 14 body { 15 margin: 0px; 16 padding: 0px; 17 } 18 @keyframes anim { 19 /* translate to a position the element is completely outside of the */ 20 /* viewport */ 21 to { transform: translateX(-300vw); } 22 } 23 #target { 24 width: 200vw; 25 height: 200vh; 26 position: absolute; 27 /* Some part of this element needs to be visible initially so that */ 28 /* a display item for this element is generated, thus the transform */ 29 /* animation runs on the compositor. */ 30 transform: translateX(-110vw); 31 } 32 </style> 33 <div id="target"> 34 <!-- 35 Put an SVG element so that the transform display item has a blob on 36 WebRender which means this test properly fails without the proper fix. 37 --> 38 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"> 39 <rect fill="green" width="16" height="16"></rect> 40 </svg> 41 </div> 42 <script> 43 document.addEventListener("MozReftestInvalidate", () => { 44 target.style.animation = "anim 100s 1s step-start"; 45 target.addEventListener("animationstart", () => { 46 // Wait 100ms to make sure we can report the jank to the main-thread and 47 // in response to the report we can do a paint process on the main-thread. 48 setTimeout(() => { 49 document.documentElement.classList.remove("reftest-wait"); 50 }, 100); 51 }); 52 }, { once: true }); 53 </script> 54 </html>