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 { -webkit-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.dumpAsText(true); | 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 |