container-with-pos-children-ref.html (1502B)
1 <!doctype HTML> 2 <html> 3 <meta charset="utf8"> 4 <title>CSS Content Visibility: container with child and text (reference)</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 8 <style> 9 .container { 10 width: 150px; 11 height: 150px; 12 background: lightblue; 13 contain: layout; 14 } 15 #child { 16 width: 50px; 17 height: 50px; 18 background: lightgreen; 19 } 20 .abspos { position: absolute; } 21 .relpos { position: relative; } 22 .fixedpos { position: fixed; } 23 .start { top: 0; left: 0; } 24 .mid { top: 10px; left: 10px; } 25 .end { bottom: 0; right: 0; } 26 .zindex { z-index: 1; } 27 .small { width: 10px; height: 10px; background: blue; } 28 .medium { width: 20px; height: 20px; background: green; } 29 .large { width: 30px; height: 30px; background: pink; } 30 </style> 31 32 <p>This test passes if the two light blue boxes below have the same content. 33 34 <div class=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 <br> 46 <div class=container> 47 Text. 48 <div id=child></div> 49 <span>inline child</span> 50 <div class="abspos start small"></div> 51 <div class="relpos mid medium"></div> 52 <div class="fixedpos end large"></div> 53 <div class=relpos> 54 <div class="abspos mid small zindex"></div> 55 </div> 56 </div>