content-visibility-001.html (1254B)
1 <!doctype HTML> 2 <html> 3 <meta charset="utf8"> 4 <title>CSS Content Visibility: hidden does not paint</title> 5 <link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> 6 <link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility"> 7 <link rel="match" href="container-ref.html"> 8 <meta name="assert" content="content-visibility hidden subtrees are not painted"> 9 10 <style> 11 #container { 12 content-visibility: hidden; 13 width: 150px; 14 height: 150px; 15 background: lightblue; 16 } 17 #child { 18 width: 50px; 19 height: 50px; 20 background: lightgreen; 21 } 22 .abspos { position: absolute; } 23 .relpos { position: relative; } 24 .fixedpos { position: fixed; } 25 .start { top: 0; left: 0; } 26 .mid { top: 10px; left: 10px; } 27 .end { bottom: 0; right: 0; } 28 .zindex { z-index: 1; } 29 .small { width: 10px; height: 10px; background: blue; } 30 .medium { width: 20px; height: 20px; background: green; } 31 .large { width: 30px; height: 30px; background: pink; } 32 </style> 33 34 <div id=container> 35 Text. 36 <div id=child></div> 37 <span>inline child</span> 38 <div class="abspos start small"></div> 39 <div class="relpos mid medium"></div> 40 <div class="fixedpos end large"></div> 41 <div class=relpos> 42 <div class="abspos mid small zindex"></div> 43 </div> 44 </div> 45 </html>