contain-size-grid-005.html (2478B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Test: 'contain: size' on grid elements should cause them to be sized as if they had no contents.</title> 6 <link rel="author" title="Gerald Squelart" href="mailto:gsquelart@mozilla.com"> 7 <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size"> 8 <link rel="match" href="reference/contain-size-grid-005-ref.html"> 9 <style> 10 .contain { 11 display: grid; 12 contain:size; 13 border: 1em solid green; 14 background: red; 15 } 16 .innerContents { 17 color: transparent; 18 height: 100px; 19 width: 100px; 20 } 21 .minHeight { 22 min-height: 40px; 23 background: lightblue; 24 } 25 .height { 26 height: 40px; 27 background: lightblue; 28 } 29 .maxWidth { 30 max-width: 40px; 31 } 32 .width { 33 width: 40px; 34 } 35 .floatLBasic { 36 float: left; 37 } 38 .floatLWidth { 39 float: left; 40 width: 40px; 41 } 42 </style> 43 </head> 44 <body> 45 <!--CSS Test: A size-contained grid 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 grid 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 grid 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 grid 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 grid 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 grid 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 grid 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>