flexbox-widget-flex-items-4.html (1314B)
1 <!DOCTYPE html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <!-- 7 This testcase checks that, for any widgets that have a single valid size 8 (and hence refuse to flex), we don't stretch them in the cross-axis, 9 despite the "align-self: stretch" property. 10 11 These widgets can be allowed to be resized on some platforms but not others. 12 We'll account for that by giving them height: 100% in the reference case, 13 so that if they're allowed to stretch, then they'll stretch in both the 14 reference case and the testcase. 15 --> 16 <html> 17 <head> 18 <style> 19 div.flexbox { 20 display: flex; 21 background: lightgray; 22 float: left; 23 height: 60px; 24 margin-right: 10px; 25 } 26 div.flexbox > * { 27 outline: 1px dashed black; 28 margin: 0; 29 vertical-align: top; 30 height: auto; 31 align-self: stretch; 32 } 33 br { clear: left; } 34 </style> 35 </head> 36 <body> 37 <div class="flexbox"><input type="button"></div> 38 <div class="flexbox"><input type="checkbox"></div> 39 <br> 40 <div class="flexbox"><input type="image"></div> 41 <div class="flexbox"><input type="radio"></div> 42 <br> 43 <div class="flexbox"><input type="reset"></div> 44 <div class="flexbox"><input type="submit"></div> 45 </body> 46 </html>