flexbox-widget-flex-items-1.html (1379B)
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 flex containers honor those widgets (if any) in 8 our system theme that have only a single valid size (and hence should 9 refuse to flex). 10 11 e.g. in Gecko with a GTK theme, checkboxes and radio buttons have a single 12 valid size, and any specified widths (and min/max-widths) will have no 13 effect on their rendering (regardless of whether they're in a flex 14 container). 15 --> 16 <html> 17 <head> 18 <style> 19 div.flexbox { 20 display: flex; 21 align-items: flex-start; 22 border: 2px dotted lightgray; 23 width: 400px; 24 height: 40px; 25 margin-bottom: 10px; 26 } 27 div.flexbox > * { 28 flex: 1; 29 outline: 1px dashed black; 30 margin: 0; 31 vertical-align: top; 32 } 33 </style> 34 </head> 35 <body> 36 <div class="flexbox"><input type="button"></div> 37 <div class="flexbox"><input type="checkbox"></div> 38 <div class="flexbox"><input type="file"></div> 39 <div class="flexbox"><input type="image"></div> 40 <div class="flexbox"><input type="password"></div> 41 <div class="flexbox"><input type="radio"></div> 42 <div class="flexbox"><input type="reset"></div> 43 <div class="flexbox"><input type="submit"></div> 44 <div class="flexbox"><input type="text"></div> 45 </body> 46 </html>