| <style> |
| #scroller { |
| background: gray local content-box; |
| border: 10px solid rgba(0, 255, 0, 0.5); |
| overflow: scroll; |
| padding: 10px; |
| width: 200px; |
| height: 200px; |
| } |
| |
| .child { |
| width: 30px; |
| height: 30px; |
| padding: 10px; |
| border: 10px solid green; |
| background: green content-box; |
| } |
| |
| .spacer { |
| height: 300px; |
| } |
| </style> |
| <!-- When the #scroller is composited, its local attached background will be |
| drawn into the composited layer as well as the background of its non |
| composited .child. This tests that the .child background is drawn |
| correctly to its bounds as they do include borders unlike #scroller. --> |
| <div id="scroller"> |
| <div class="child"></div> |
| <div class="spacer"></div> |
| </div> |