contain-size-inline-flex-001.html (1145B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Test: 'contain: size' on inline-flex 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-flex-001-ref.html"> 9 <style> 10 .contain { 11 display: inline-flex; 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 .width { 22 width: 50px; 23 } 24 </style> 25 </head> 26 <body> 27 <!--CSS Test: A size-contained inline-flex element without dimensions should ensure baseline alignment behaves regularly.--> 28 aa<div class="contain"><div class="innerContents">inner</div></div>bb 29 <br> 30 31 <!--CSS Test: A size-contained inline-flex element with specified width should ensure baseline alignment behaves regularly.--> 32 aa<div class="contain width"><div class="innerContents">inner</div></div>bb 33 </body> 34 </html>