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