content-visibility-paint-containment-002-ref.html (697B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <title>content-visibility and paint containment (reference)</title> 5 6 <style> 7 #container { 8 width: 100px; 9 height: 100px; 10 background: green; 11 content-visibility: hidden; 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 .red { 25 background: red; 26 } 27 </style> 28 29 <body> 30 <p>PASS if you see a green square and no red.</p> 31 <div id="container"> 32 <div id="overflowing"><div class="square"></div><div class="square"></div><div class="red square"></div></div> 33 </div> 34 </body> 35 </html>