OLD | NEW |
(Empty) | |
| 1 <style> |
| 2 #scroller { |
| 3 background: gray local content-box; |
| 4 border: 10px solid rgba(0, 255, 0, 0.5); |
| 5 overflow: scroll; |
| 6 padding: 10px; |
| 7 width: 200px; |
| 8 height: 200px; |
| 9 will-change: transform; |
| 10 } |
| 11 |
| 12 .child { |
| 13 width: 30px; |
| 14 height: 30px; |
| 15 padding: 10px; |
| 16 border: 10px solid green; |
| 17 background: green content-box; |
| 18 } |
| 19 |
| 20 .spacer { |
| 21 height: 300px; |
| 22 } |
| 23 </style> |
| 24 <!-- When the #scroller is composited, its local attached background will be |
| 25 drawn into the composited layer as well as the background of its non |
| 26 composited .child. This tests that the .child background is drawn |
| 27 correctly to its bounds as they do include borders unlike #scroller. --> |
| 28 <div id="scroller"> |
| 29 <div class="child"></div> |
| 30 <div class="spacer"></div> |
| 31 </div> |
OLD | NEW |