contain-size-fieldset-003.html (3148B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Test: 'contain: size' on fieldset 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-fieldset-003-ref.html"> 9 <style> 10 .contain { 11 contain: size; 12 visibility: hidden; 13 border: none; 14 color: transparent; 15 } 16 .container { 17 border: 10px solid green; 18 display: inline-block; 19 vertical-align: top; 20 } 21 .innerContents { 22 height: 50px; 23 width: 50px; 24 } 25 .minHeight { 26 min-height: 30px; 27 } 28 .height { 29 height: 30px; 30 } 31 .minWidth { 32 min-width: 30px; 33 } 34 .width { 35 width: 30px; 36 } 37 </style> 38 </head> 39 <body> 40 <!--Note: The following .container class is used to help test if size-contained 41 fieldsets and non-contained fieldsets have the same size. Normally, we'd test 42 that a fieldset with children and size-containment is drawn identically to a 43 fieldset without containment or children. However, when we have a legend as 44 a child, border placement and padding of the fieldset are changed. 45 To check the dimensions between the ref-case and test-case without 46 failing because of the border/padding differences, we make the fieldset 47 {visibility:hidden; border:none;} and add a .container wrapper div.--> 48 49 <!--CSS Test: A size-contained fieldset element with no specified size should size itself as if it had no contents.--> 50 <div class="container"> 51 <fieldset class="contain"> 52 <legend>legend</legend> 53 <div class="innerContents">inner</div> 54 </fieldset> 55 </div> 56 <br> 57 58 <!--CSS Test: A size-contained fieldset element with specified min-height should size itself as if it had no contents.--> 59 <div class="container"> 60 <fieldset class="contain minHeight"> 61 <legend>legend</legend> 62 <div class="innerContents">inner</div> 63 </fieldset> 64 </div> 65 <br> 66 67 <!--CSS Test: A size-contained fieldset element with specified height should size itself as if it had no contents.--> 68 <div class="container"> 69 <fieldset class="contain height"> 70 <legend>legend</legend> 71 <div class="innerContents">inner</div> 72 </fieldset> 73 </div> 74 <br> 75 76 <!--CSS Test: A size-contained fieldset element with specified min-width should size itself as if it had no contents.--> 77 <div class="container"> 78 <fieldset class="contain minWidth"> 79 <legend>legend</legend> 80 <div class="innerContents">inner</div> 81 </fieldset> 82 </div> 83 <br> 84 85 <!--CSS Test: A size-contained fieldset element with specified width should size itself as if it had no contents.--> 86 <div class="container"> 87 <fieldset class="contain width"> 88 <legend>legend</legend> 89 <div class="innerContents">inner</div> 90 </fieldset> 91 </div> 92 <br> 93 94 <!--CSS Test: A size contained fieldset element with a legend should draw its legend and border in the same way as a non-contained fieldset element--> 95 <fieldset class="height" style="contain:size;"> 96 <legend>legend</legend> 97 </fieldset> 98 </body> 99 </html>