contain-paint-dynamic-002-ref.html (658B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <title>Dynamic change to paint containment (reference)</title> 5 6 <style> 7 #container { 8 width: 100px; 9 height: 100px; 10 background: green; 11 contain: paint; 12 } 13 #overflowing { 14 width: 400px; 15 height: 100px; 16 } 17 .square { 18 display: inline-block; 19 width: 50px; 20 height: 50px; 21 margin: 5px; 22 } 23 .red { 24 background: red; 25 } 26 </style> 27 28 <body> 29 <p>PASS if you see a green square and no red.</p> 30 <div id="container"> 31 <div id="overflowing"><div class="square"></div><div class="square"></div><div class="red square"></div></div> 32 </div> 33 </body> 34 </html>