contain-size-button-002-ref.html (1757B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Reftest Reference</title> 6 <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu"> 7 <style> 8 button { 9 border: 1em solid green; 10 margin: 0; 11 /* In case the testcase's 'inner' text is taller than the button, don't let 12 it influence its line-box's size. This lets us more-easily compare 13 sizing between empty buttons vs. contained nonempty buttons. */ 14 vertical-align: top; 15 } 16 .vaBaseline { 17 vertical-align: baseline; 18 } 19 .width-ref { 20 width: 50px; 21 } 22 .height-ref { 23 height: 50px; 24 background: lightblue; 25 } 26 .floatLBasic-ref { 27 float: left; 28 } 29 .floatLWidth-ref { 30 float: left; 31 width: 50px; 32 } 33 br { clear: both } 34 .iFlexBasic-ref { 35 display: inline-flex; 36 } 37 .iFlexWidth-ref { 38 display: inline-flex; 39 width: 50px; 40 } 41 .innerContents { 42 color: transparent; 43 height: 0; 44 width: 0; 45 } 46 .orthog-ref { 47 writing-mode: vertical-lr; 48 } 49 </style> 50 </head> 51 <body> 52 <button></button> 53 <br> 54 55 <button class="floatLBasic-ref"></button> 56 <br> 57 58 <button class="floatLWidth-ref"></button> 59 <br> 60 61 <button class="iFlexBasic-ref"></button> 62 <br> 63 64 <button class="iFlexWidth-ref"></button> 65 <br> 66 67 outside before<button class="vaBaseline"><div class="innerContents">inner</div></button>outside after 68 <br> 69 70 <button class="width-ref"></button> 71 <br> 72 73 <button class="width-ref"></button> 74 <br> 75 76 <button class="height-ref"></button> 77 <br> 78 79 <button class="height-ref"></button> 80 <br> 81 82 s<button class="orthog-ref vaBaseline"><div class="innerContents">inner</div></button>endtext 83 <br> 84 85 <button class="height-ref width-ref">inside</button> 86 </body> 87 </html>