contain-size-inline-block-004.html (2172B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Test: 'contain: size' on 'overflow:hidden' 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="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 7 <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu"> 8 <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size"> 9 <link rel="match" href="contain-size-inline-block-004-ref.html"> 10 <style> 11 .contain { 12 display: inline-block; 13 overflow: hidden; 14 contain:size; 15 border: 2px solid green; 16 } 17 .innerContents { 18 color: transparent; 19 height: 100px; 20 width: 100px; 21 } 22 .minHeight { 23 min-height: 60px; 24 } 25 .height { 26 height: 60px; 27 } 28 .minWidth { 29 min-width: 60px; 30 } 31 .width { 32 width: 60px; 33 } 34 </style> 35 </head> 36 <body> 37 <!-- NOTE: In all cases below, the expectation is that the size-contained 38 element should be sized as if it had no contents (while honoring 39 whatever sizing properties are provided). --> 40 41 <!-- A size-contained scrollable inline-block with no specified size --> 42 <div class="contain"><div class="innerContents">inner</div></div> 43 <br> 44 45 <!-- A size-contained scrollable inline-block should perform baseline 46 alignment regularly, based on contents' baseline. --> 47 outside before 48 <div class="contain"><div class="innerContents">inner</div></div> 49 outside after 50 <br> 51 52 <!-- A size-contained scrollable inline-block with specified min-height --> 53 <div class="contain minHeight"><div class="innerContents">inner</div></div> 54 <br> 55 56 <!-- A size-contained scrollable inline-block with specified height --> 57 <div class="contain height"><div class="innerContents">inner</div></div> 58 <br> 59 60 <!-- A size-contained scrollable inline-block with specified min-width --> 61 <div class="contain minWidth"><div class="innerContents">inner</div></div> 62 <br> 63 64 <!-- A size-contained scrollable inline-block with specified width --> 65 <div class="contain width"><div class="innerContents">inner</div></div> 66 </body> 67 </html>