contain-size-inline-block-001.html (2188B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Test: 'contain: size' on inline-block elements should cause them to be sized as if they had no contents and baseline-aligned regularly.</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-inline-block-001-ref.html"> 9 <style> 10 .contain { 11 display: inline-block; 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: 50px; 23 } 24 .height { 25 height: 50px; 26 } 27 .minWidth { 28 min-width: 50px; 29 } 30 .width { 31 width: 50px; 32 } 33 </style> 34 </head> 35 <body> 36 <!--CSS Test: A size-contained inline-block element with no specified size should render at 0 height and 0 width regardless of content.--> 37 <div class="contain"><div class="innerContents">inner</div></div> 38 <br> 39 40 <!--CSS Test: A size-contained inline-block element should perform baseline alignment regularly.--> 41 outside before<div class="contain"><div class="innerContents">inner</div></div>outside after 42 <br> 43 44 <!--CSS Test: A size-contained inline-block element with specified min-height should render at given min-height and 0 width regardless of content.--> 45 <div class="contain minHeight"><div class="innerContents">inner</div></div> 46 <br> 47 48 <!--CSS Test: A size-contained inline-block element with specified height should render at given height and 0 width regardless of content.--> 49 <div class="contain height"><div class="innerContents">inner</div></div> 50 <br> 51 52 <!--CSS Test: A size-contained inline-block element with specified min-width should render at given min-width and 0 height regardless of content.--> 53 <div class="contain minWidth"><div class="innerContents">inner</div></div> 54 <br> 55 56 <!--CSS Test: A size-contained inline-block element with specified width should render at given width and 0 height regardless of content.--> 57 <div class="contain width"><div class="innerContents">inner</div></div> 58 </body> 59 </html>