contain-size-block-001.html (2783B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Test: 'contain: size' on block 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-block-001-ref.html"> 9 <style> 10 .contain { 11 contain: size; 12 border: 1em solid green; 13 background: red; 14 } 15 .innerContents { 16 color: transparent; 17 height: 100px; 18 width: 100px; 19 } 20 .minHeight { 21 min-height: 50px; 22 background: lightblue; 23 } 24 .height { 25 height: 50px; 26 background: lightblue; 27 } 28 .maxWidth { 29 max-width: 50px; 30 } 31 .width { 32 width: 50px; 33 } 34 .floatLBasic { 35 float: left; 36 } 37 .floatLWidth { 38 float: left; 39 width: 50px; 40 } 41 .flexBaselineCheck { 42 display: flex; 43 align-items: baseline; 44 } 45 </style> 46 </head> 47 <body> 48 <!--CSS Test: A size-contained block element with no specified size should render at 0 height regardless of content.--> 49 <div class="contain"><div class="innerContents">inner</div></div> 50 <br> 51 52 <!--CSS Test: A size-contained block element with specified min-height should render at given min-height regardless of content.--> 53 <div class="contain minHeight"><div class="innerContents">inner</div></div> 54 <br> 55 56 <!--CSS Test: A size-contained block element with specified height should render at given height regardless of content.--> 57 <div class="contain height"><div class="innerContents">inner</div></div> 58 <br> 59 60 <!--CSS Test: A size-contained block element with specified max-width should render at given max-width and zero height regardless of content.--> 61 <div class="contain maxWidth"><div class="innerContents">inner</div></div> 62 <br> 63 64 <!--CSS Test: A size-contained block element with specified width should render at given width and zero height regardless of content.--> 65 <div class="contain width"><div class="innerContents">inner</div></div> 66 <br> 67 68 <!--CSS Test: A size-contained floated block element with no specified size should render at 0px by 0px regardless of content.--> 69 <div class="contain floatLBasic"><div class="innerContents">inner</div></div> 70 <br> 71 72 <!--CSS Test: A size-contained floated block element with specified width and no specified height should render at given width and 0 height regardless of content.--> 73 <div class="contain floatLWidth"><div class="innerContents">inner</div></div> 74 <br> 75 76 <!--CSS Test: A size-contained block element should perform baseline alignment regularly.--> 77 <div class="flexBaselineCheck"> 78 outside before<div class="contain"><div class="innerContents">inner</div></div>outside after 79 </div> 80 </body> 81 </html>