| <!DOCTYPE html> |
| <style> |
| .container { |
| width: 300px; |
| height: 120px; |
| border: 2px solid green; |
| padding: 2px; |
| writing-mode: vertical-rl; |
| overflow: scroll; |
| } |
| .container .container { |
| width: 150px; |
| height: 100px; |
| } |
| .bloat { |
| width: 1000px; |
| height: 1000px; |
| } |
| .content { |
| width: 50px; |
| height: 80px; |
| border: 1px solid blue; |
| background: lightgray; |
| } |
| .composited { |
| will-change: transform; |
| } |
| </style> |
| Neither container is composited: |
| <div class="container"> |
| <div class="bloat"> |
| <div class="content">Non-composited</div> |
| <div id="c1" class="content composited">Composited</div> |
| <div class="container"> |
| <div class="bloat"> |
| <div class="content">Non-composited</div> |
| <div id="c2" class="content composited">Composited</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| Only the outer container is composited: |
| <div class="container composited"> |
| <div class="bloat"> |
| <div class="content">Non-composited</div> |
| <div class="content composited">Composited</div> |
| <div class="container"> |
| <div class="bloat"> |
| <div class="content">Non-composited</div> |
| <div class="content composited">Composited</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| Only the inner container is composited: |
| <div class="container"> |
| <div class="bloat"> |
| <div class="content">Non-composited</div> |
| <div class="content composited">Composited</div> |
| <div class="container composited"> |
| <div class="bloat"> |
| <div class="content">Non-composited</div> |
| <div class="content composited">Composited</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| Both containers are composited: |
| <div class="container composited"> |
| <div class="bloat"> |
| <div class="content">Non-composited</div> |
| <div class="content composited">Composited</div> |
| <div class="container composited"> |
| <div class="bloat"> |
| <div class="content">Non-composited</div> |
| <div class="content composited">Composited</div> |
| </div> |
| </div> |
| </div> |
| </div> |