layer-splitting-1.html (1247B)
1 <!DOCTYPE html> 2 <html lang="en" class="reftest-wait"> 3 <meta charset="utf-8"> 4 <title>Moving the transform under the absolutely-positioned layer should cause that to invalidate</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 .absolute { 16 position: absolute; 17 z-index: 2; 18 top: 20px; 19 left: 240px; 20 } 21 22 .reftest-no-paint { 23 border-color: lime; 24 } 25 26 .transform { 27 will-change: transform; 28 } 29 30 body { 31 margin: 0; 32 padding: 20px; 33 height: 3000px; 34 } 35 36 </style> 37 38 <div class="transform content" id="aboutToMoveUnderAbsolute"> 39 <!-- 40 This transform is active + prerendered, and will move under the 41 absolutely-positioned item. 42 --> 43 </div> 44 45 <div class="absolute reftest-no-paint content"> 46 <!-- 47 This absolutely-positioned element should get its own PaintedLayer above the 48 transform. 49 50 It shouldn't attempt to pull up an opaque background color from the page, 51 because the transform can move under it. 52 --> 53 </div> 54 55 <script> 56 57 function doTest() { 58 document.querySelector("#aboutToMoveUnderAbsolute").style.transform = "translateX(100px)"; 59 document.documentElement.removeAttribute("class"); 60 } 61 document.addEventListener("MozReftestInvalidate", doTest); 62 63 </script>