content-visibility-paint-containment-003-ref.html (700B)
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 content-visibility: visible; 12 contain: style; 13 } 14 #overflowing { 15 width: 400px; 16 height: 100px; 17 } 18 .square { 19 display: inline-block; 20 width: 50px; 21 height: 50px; 22 margin: 5px; 23 } 24 .green { 25 background: green; 26 } 27 </style> 28 29 <body> 30 <p>PASS if you see <em>two</em> green squares.</p> 31 <div id="container"> 32 <div id="overflowing"><div class="square"></div><div class="square"></div><div class="green square"></div></div> 33 </div> 34 </body> 35 </html>