OLD | NEW |
1 <script> | 1 <script> |
2 if (window.testRunner) | 2 if (window.testRunner) |
3 testRunner.waitUntilDone(); | 3 testRunner.waitUntilDone(); |
4 onload = function() { | 4 onload = function() { |
5 // Double rAF to ensure content is painted before scroll. | 5 // Double rAF to ensure content is painted before scroll. |
6 requestAnimationFrame(function() { | 6 requestAnimationFrame(function() { |
7 requestAnimationFrame(function() { | 7 requestAnimationFrame(function() { |
8 document.getElementById('scroller').scrollTo(0, 200); | 8 document.getElementById('scroller').scrollTop = 200; |
9 if (window.testRunner) | 9 if (window.testRunner) |
10 window.testRunner.notifyDone(); | 10 window.testRunner.notifyDone(); |
11 }) | 11 }) |
12 }); | 12 }); |
13 } | 13 } |
14 </script> | 14 </script> |
15 <style> | 15 <style> |
16 #scroller { | 16 #scroller { |
17 background: gray local content-box; | 17 background: url('../resources/apple.jpg') local; |
18 border: 10px solid rgba(0, 255, 0, 0.5); | 18 border: 10px solid rgba(0, 255, 0, 0.5); |
19 overflow: scroll; | 19 overflow: scroll; |
20 padding: 10px; | 20 padding: 10px; |
21 width: 200px; | 21 width: 200px; |
22 height: 200px; | 22 height: 200px; |
23 will-change: transform; | 23 will-change: transform; |
24 } | 24 } |
25 | 25 |
26 .spacer { | 26 .spacer { |
27 height: 300px; | 27 height: 300px; |
28 } | 28 } |
29 </style> | 29 </style> |
30 <!-- #scroller has a locally attached background with padding so when it is | 30 <!-- This scroller has a locally attached background image which should |
31 scrolled we can see the background slide up. Doing this on a composited | 31 scroll with the content. --> |
32 element without repainting requires the background to be painted into | |
33 the scrolling contents layer and correctly account for that layer not | |
34 including the border in its bounds. --> | |
35 <div id="scroller"> | 32 <div id="scroller"> |
36 <div class="spacer"></div> | 33 <div class="spacer"></div> |
37 </div> | 34 </div> |
OLD | NEW |