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