partial-prerender-translate-5.html (1845B)
1 <!DOCTYPE html> 2 <html class="reftest-wait reftest-no-flush" 3 reftest-async-scroll 4 reftest-displayport-x="0" reftest-displayport-y="0" 5 reftest-displayport-w="800" reftest-displayport-h="2000" 6 reftest-async-scroll-x="0" reftest-async-scroll-y="1000"> 7 <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> 8 <!-- 9 A test that a partial pre-rendered transform animation is in a position:fixed 10 layer. 11 --> 12 <style> 13 html { 14 overflow-x: hidden; 15 } 16 body { 17 margin: 0px; 18 padding: 0px; 19 } 20 @keyframes anim { 21 to { transform: translateY(-500px); } 22 } 23 #target { 24 width: 800px; 25 height: 1600px; 26 transform: translateY(-400px); 27 } 28 </style> 29 <div style="width: 800px; height: 2000px"><!-- spacer --></div> 30 <div style="position: fixed; top: 400px"> 31 <div id="target"> 32 <!-- 33 Put an SVG element so that the transform display item has a blob on 34 WebRender which means this test properly fails without the proper fix. 35 --> 36 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 1600"> 37 <rect fill="green" y="0" width="800" height="1000"></rect> 38 <rect fill="blue" y="1000" width="800" height="125"></rect> 39 <rect fill="red" y="1125" width="800" height="875"></rect> 40 </svg> 41 </div> 42 </div> 43 <script> 44 document.addEventListener("MozReftestInvalidate", () => { 45 target.style.animation = "anim 100s 1s step-start"; 46 target.addEventListener("animationstart", () => { 47 // animationstart event is fired just before requestAnimationFrame callbacks, 48 // so we need to wait two rAF to make sure the initial animation value is 49 // composited on the compositor. 50 requestAnimationFrame(() => { 51 requestAnimationFrame(() => { 52 document.documentElement.classList.remove("reftest-wait"); 53 }); 54 }); 55 }); 56 }, { once: true }); 57 </script> 58 </html>