content-visibility-paint-containment-001-ref.html (993B)
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 } 12 .hidden { 13 contain: layout paint style; 14 } 15 .visible { 16 contain: none; 17 } 18 #overflowing { 19 width: 400px; 20 height: 100px; 21 } 22 .square { 23 display: inline-block; 24 width: 50px; 25 height: 50px; 26 margin: 5px; 27 } 28 .red { 29 background: red; 30 } 31 .green { 32 background: green; 33 } 34 </style> 35 36 <body> 37 <p>PASS if you see a green square and no red.</p> 38 <div class="hidden container"> 39 <div id="overflowing"><div class="square"></div><div class="square"></div><div class="red square"></div></div> 40 </div> 41 <p>PASS if you see <em>two</em> green squares.</p> 42 <div class="visible container"> 43 <div id="overflowing"><div class="square"></div><div class="square"></div><div class="green square"></div></div> 44 </div> 45 </body> 46 </html>