paintedlayer-recycling-1.html (1564B)
1 <!DOCTYPE html> 2 <html lang="en" class="reftest-wait"> 3 <meta charset="utf-8"> 4 <title>Switching the transform to animate shouldn't invalidate the fixed layer</title> 5 6 <style> 7 8 .content { 9 box-sizing: border-box; 10 width: 200px; 11 height: 200px; 12 border: 1px solid black; 13 } 14 15 .fixed { 16 position: fixed; 17 background-color: white; 18 top: 20px; 19 left: 240px; 20 } 21 22 .reftest-no-paint { 23 border-color: lime; 24 } 25 26 .transform { 27 transform: translateY(0.1px); 28 } 29 30 .aboveTransform { 31 margin-top: 20px; 32 border-color: blue; 33 position: relative; 34 } 35 36 body { 37 margin: 0; 38 padding: 20px; 39 height: 3000px; 40 } 41 42 </style> 43 44 <div class="transform content" id="aboutToAnimate"> 45 <!-- 46 This transform starts out inactive and is going to turn active + prerendered. 47 --> 48 </div> 49 50 <div class="aboveTransform content"> 51 <!-- 52 This content is on top of .transform in z-order but starts out in the 53 same layer as .transform (and the canvas background). Once the transform 54 turns active, this needs its own PaintedLayer because the prerendered 55 transform might asynchronously move underneath it. 56 --> 57 </div> 58 59 <div class="fixed reftest-no-paint content"> 60 <!-- 61 This fixed layer gets its own PaintedLayer above the rest. 62 When .aboveTransform requires its own PaintedLayer, it should not cause 63 .fixed to change layers. 64 --> 65 </div> 66 67 <script> 68 69 function doTest() { 70 document.querySelector("#aboutToAnimate").style.willChange = "transform"; 71 document.documentElement.removeAttribute("class"); 72 } 73 document.addEventListener("MozReftestInvalidate", doTest); 74 75 </script>