content-visibility-paint-containment-001.html (1318B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <title>content-visibility and paint containment</title> 5 <link rel="help" href="https://drafts.csswg.org/css-contain/#contain-property"> 6 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1765615"> 7 <meta name="assert" content="Verify paint containment is implied by content-visibility."> 8 <link rel="match" href="content-visibility-paint-containment-001-ref.html"> 9 10 <style> 11 .container { 12 width: 100px; 13 height: 100px; 14 background: green; 15 } 16 .hidden { 17 content-visibility: hidden; 18 } 19 .visible { 20 content-visibility: visible; 21 } 22 #overflowing { 23 width: 400px; 24 height: 100px; 25 } 26 .square { 27 display: inline-block; 28 width: 50px; 29 height: 50px; 30 margin: 5px; 31 } 32 .red { 33 background: red; 34 } 35 .green { 36 background: green; 37 } 38 </style> 39 40 <body> 41 <p>PASS if you see a green square and no red.</p> 42 <div class="hidden container"> 43 <div id="overflowing"><div class="square"></div><div class="square"></div><div class="red square"></div></div> 44 </div> 45 <p>PASS if you see <em>two</em> green squares.</p> 46 <div class="visible container"> 47 <div id="overflowing"><div class="square"></div><div class="square"></div><div class="green square"></div></div> 48 </div> 49 </body> 50 </html>