contain-size-button-002.html (3947B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Test: 'contain: size' on buttons 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-button-002-ref.html"> 9 <style> 10 button { 11 contain: size; 12 margin: 0; 13 border: 1em solid green; 14 /* In case the testcase's 'inner' text is taller than the button, don't let 15 it influence its line-box's size. This lets us more-easily compare 16 sizing between empty buttons vs. contained nonempty buttons. */ 17 vertical-align: top; 18 } 19 .vaBaseline { 20 vertical-align: baseline; 21 } 22 .innerContents { 23 color: transparent; 24 height: 100px; 25 width: 100px; 26 } 27 .minWidth { 28 min-width: 50px; 29 } 30 .width { 31 width: 50px; 32 } 33 .minHeight { 34 min-height: 50px; 35 background: lightblue; 36 } 37 .height { 38 height: 50px; 39 background: lightblue; 40 } 41 .floatLBasic { 42 float: left; 43 } 44 .floatLWidth { 45 float: left; 46 width: 50px; 47 } 48 br { clear: both } 49 .iFlexBasic { 50 display: inline-flex; 51 } 52 .iFlexWidth { 53 display: inline-flex; 54 width: 50px; 55 } 56 .orthog { 57 writing-mode: vertical-lr; 58 } 59 </style> 60 </head> 61 <body> 62 <!--CSS Test: A size-contained button with no specified size should render at 0 height regardless of content.--> 63 <button><div class="innerContents">inner</div></button> 64 <br> 65 66 <!--CSS Test: A size-contained floated button with no specified size should render at 0px by 0px regardless of content.--> 67 <button class="floatLBasic"><div class="innerContents">inner</div></button> 68 <br> 69 70 <!--CSS Test: A size-contained floated button with specified width and no specified height should render at given width and 0 height regardless of content.--> 71 <button class="floatLWidth"><div class="innerContents">inner</div></button> 72 <br> 73 74 <!--CSS Test: A size-contained inline-flex button with no specified size should render at 0px by 0px regardless of content.--> 75 <button class="iFlexBasic"><div class="innerContents">inner</div></button> 76 <br> 77 78 <!--CSS Test: A size-contained inline-flex button with specified width and no specified height should render at given width and 0 height regardless of content.--> 79 <button class="iFlexWidth"><div class="innerContents">inner</div></button> 80 <br> 81 82 <!--CSS Test: A size-contained button should perform baseline alignment regularly.--> 83 outside before<button class="vaBaseline"><div class="innerContents">inner</div></button>outside after 84 <br> 85 86 <!--CSS Test: A size-contained button with specified min-width should render at given min-width and zero height regardless of content.--> 87 <button class="minWidth"><div class="innerContents">inner</div></button> 88 <br> 89 90 <!--CSS Test: A size-contained button with specified width should render at given width and zero height regardless of content.--> 91 <button class="width"><div class="innerContents">inner</div></button> 92 <br> 93 94 <!--CSS Test: A size-contained button with specified min-height should render at given min-height regardless of content.--> 95 <button class="minHeight"><div class="innerContents">inner</div></button> 96 <br> 97 98 <!--CSS Test: A size-contained button with specified height should render at given height regardless of content.--> 99 <button class="height"><div class="innerContents">inner</div></button> 100 <br> 101 102 <!--CSS Test: A size-contained button with vertical text should perform baseline alignment regularly.--> 103 s<button class="orthog vaBaseline"><div class="innerContents">inner</div></button>endtext 104 <br> 105 106 <!--CSS Test: A size-contained button with inner text should layout the text in the same manner as a container of the same type with identical contents.--> 107 <button class="height width">inside</button> 108 </body> 109 </html>