| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <style> | 4 <style> |
| 5 html { overflow: hidden; } | 5 html { overflow: hidden; } |
| 6 div { height: 100px; width: 100px; } | 6 div { height: 100px; width: 100px; } |
| 7 .fixed { position: fixed; } | 7 .fixed { position: fixed; } |
| 8 .green { background-color: green; } | 8 .green { background-color: green; } |
| 9 .red { background-color: red; } | 9 .red { background-color: red; } |
| 10 .composited { -webkit-transform: translateZ(0); } | 10 .composited { transform: translateZ(0); } |
| 11 </style> | 11 </style> |
| 12 <script type="text/javascript"> | 12 <script type="text/javascript"> |
| 13 if (window.testRunner) | 13 if (window.testRunner) |
| 14 testRunner.dumpAsTextWithPixelResults(); | 14 testRunner.dumpAsTextWithPixelResults(); |
| 15 function moveFixedDiv() | 15 function moveFixedDiv() |
| 16 { | 16 { |
| 17 document.getElementById('fixedDiv').style.top = '200px'; | 17 document.getElementById('fixedDiv').style.top = '200px'; |
| 18 } | 18 } |
| 19 window.addEventListener('load', moveFixedDiv, false); | 19 window.addEventListener('load', moveFixedDiv, false); |
| 20 </script> | 20 </script> |
| 21 </head> | 21 </head> |
| 22 <body style="height:2000px;"> | 22 <body style="height:2000px;"> |
| 23 <!-- You should see 1 green rectangle in the output and no red. --> | 23 <!-- You should see 1 green rectangle in the output and no red. --> |
| 24 <div style="top: 200px; left: 100px;" class="fixed red"></div> | 24 <div style="top: 200px; left: 100px;" class="fixed red"></div> |
| 25 <div id="fixedDiv" style="top: 500px; left:100px;" class="fixed green compos
ited"></div></div> | 25 <div id="fixedDiv" style="top: 500px; left:100px;" class="fixed green compos
ited"></div></div> |
| 26 </body> | 26 </body> |
| 27 </html> | 27 </html> |
| OLD | NEW |