| OLD | NEW |
| (Empty) |
| 1 <!-- Based on fast/repaint/fixed-child-of-transformed-move-after-scroll.html --> | |
| 2 <html> | |
| 3 <head> | |
| 4 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> | |
| 5 <script src="resources/paint-invalidation-test.js"></script> | |
| 6 <script type="text/javascript"> | |
| 7 function scrollAndRepaint() | |
| 8 { | |
| 9 scrollBy(0, 200); | |
| 10 runPaintInvalidationTest(); | |
| 11 } | |
| 12 function paintInvalidationTest() | |
| 13 { | |
| 14 document.getElementById('toMove').style.left = "150px"; | |
| 15 document.getElementById('toMove').style.backgroundColor = "green"; | |
| 16 } | |
| 17 </script> | |
| 18 </head> | |
| 19 <body onload="scrollAndRepaint()" style="height: 3000px;"> | |
| 20 <div style="position: absolute: top: 0; left: 0; transform: translate(0, 0);
"> | |
| 21 <p style="position: absolute; top: 210px">You should see a yellow rect on
the left, and a green one on the right. No red pixels.</p> | |
| 22 <div id="toMove" style="width: 100px; height: 100px; background-color: red
; position: fixed; top: 270px; left: 10px;"></div> | |
| 23 <div style="width: 100px; height: 100px; background-color: yellow; positio
n: absolute; top: 270px; left: 10px; z-index: -5;"></div> | |
| 24 </div> | |
| 25 </body> | |
| 26 </html> | |
| OLD | NEW |