| <!DOCTYPE html> |
| <html> |
| <meta charset="utf-8"> |
| <title>Dynamic change to paint containment (reference)</title> |
| |
| <style> |
| #container { |
| width: 100px; |
| height: 100px; |
| background: green; |
| contain: paint; |
| } |
| #overflowing { |
| width: 400px; |
| height: 100px; |
| } |
| .square { |
| display: inline-block; |
| width: 50px; |
| height: 50px; |
| margin: 5px; |
| } |
| .red { |
| background: red; |
| } |
| </style> |
| |
| <body> |
| <p>PASS if you see a green square and no red.</p> |
| <div id="container"> |
| <div id="overflowing"><div class="square"></div><div class="square"></div><div class="red square"></div></div> |
| </div> |
| </body> |
| </html> |
