paintedlayer-recycling-8.html (1493B)
1 <!DOCTYPE html> 2 <html lang="en" class="reftest-wait"> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 5 <title>PaintedLayer recycling should use the right translation</title> 6 <style> 7 body { 8 overflow: hidden; 9 background-color: grey; 10 } 11 12 .fixed { 13 position: fixed; 14 width: 800px; 15 height: 800px; 16 } 17 18 .container { 19 position: relative; 20 top: 50px; 21 left: 50px; 22 width: 400px; 23 height: 400px; 24 z-index: 1; 25 pointer-events: none; 26 } 27 28 .not-transformed { 29 background-color: blue; 30 width: 200px; 31 height: 200px; 32 position: absolute; 33 top: 0px; 34 left: 0px; 35 z-index: 1; 36 } 37 38 .transformed { 39 position: relative; 40 top: 50px; 41 left: 50px; 42 width: 200px; 43 height: 200px; 44 background: red; 45 transform: scale(1.5); 46 } 47 </style> 48 </head> 49 <body> 50 <div class="fixed"> 51 <div class="container"> 52 <div class="not-transformed"></div> 53 <div class="transformed"></div> 54 </div> 55 </div> 56 </body> 57 <script type="text/javascript"> 58 function end() { 59 document.documentElement.removeAttribute("class"); 60 } 61 62 function runAfterNextPaint(cb) { 63 requestAnimationFrame(() => requestAnimationFrame(cb)) 64 } 65 66 function change() { 67 document.querySelector(".not-transformed").style["background-color"] = "lightblue"; 68 runAfterNextPaint(end); 69 } 70 71 function doTest() { 72 document.querySelector(".container").style.transform = "scale(1.0)"; 73 runAfterNextPaint(change); 74 } 75 76 document.addEventListener("MozReftestInvalidate", doTest); 77 78 //setTimeout(doTest, 5000); 79 </script> 80 </html>