contain-size-multicol-002.html (2516B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Test: 'contain: size' on multicol elements should cause them to be sized as if they had no contents.</title> 6 <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu"> 7 <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size"> 8 <link rel="match" href="contain-size-multicol-002-ref.html"> 9 <style> 10 .contain { 11 contain: size; 12 border: 1em solid green; 13 background: red; 14 column-count: 3; 15 } 16 .innerContents { 17 color: transparent; 18 height: 50px; 19 width: 50px; 20 } 21 .minHeight { 22 min-height: 20px; 23 background: lightblue; 24 } 25 .height { 26 height: 20px; 27 background: lightblue; 28 } 29 .maxWidth { 30 max-width: 20px; 31 } 32 .width { 33 width: 20px; 34 } 35 .floatLBasic { 36 float: left; 37 } 38 .floatLWidth { 39 float: left; 40 width: 20px; 41 } 42 </style> 43 </head> 44 <body> 45 <!--CSS Test: A size-contained multicol element with no specified size should render at 0 height regardless of content.--> 46 <div class="contain"><div class="innerContents">inner</div></div> 47 <br> 48 49 <!--CSS Test: A size-contained multicol element with specified min-height should render at given min-height regardless of content.--> 50 <div class="contain minHeight"><div class="innerContents">inner</div></div> 51 <br> 52 53 <!--CSS Test: A size-contained multicol element with specified height should render at given height regardless of content.--> 54 <div class="contain height"><div class="innerContents">inner</div></div> 55 <br> 56 57 <!--CSS Test: A size-contained multicol element with specified max-width should render at given max-width and zero height regardless of content.--> 58 <div class="contain maxWidth"><div class="innerContents">inner</div></div> 59 <br> 60 61 <!--CSS Test: A size-contained multicol element with specified width should render at given width and zero height regardless of content.--> 62 <div class="contain width"><div class="innerContents">inner</div></div> 63 <br> 64 65 <!--CSS Test: A size-contained floated multicol element with no specified size should render at 0px by 0px regardless of content.--> 66 <div class="contain floatLBasic"><div class="innerContents">inner</div></div> 67 <br> 68 69 <!--CSS Test: A size-contained floated multicol element with specified width and no specified height should render at given width and 0 height regardless of content.--> 70 <div class="contain floatLWidth"><div class="innerContents">inner</div></div> 71 </body> 72 </html>