radiobutton-min-size.html (1096B)
1 <!DOCTYPE html> 2 <title>CSS Flexbox: minimum size of the radio button</title> 3 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-property"> 4 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto"> 5 <meta name="assert" content="This test ensures that radio buttons used as flex items do not shrink below their default sizes."> 6 <style> 7 .flex { 8 display: flex; 9 width: 500px; 10 } 11 12 .wide { 13 width: 600px; 14 flex: none; 15 } 16 </style> 17 18 <script src="/resources/testharness.js"></script> 19 <script src="/resources/testharnessreport.js"></script> 20 21 <p>You should see two identical-looking lines, both with a radio button at the 22 beginning.</p> 23 24 <div class="flex"> 25 <input type="radio" id="check"> 26 <div class="wide">Text</div> 27 </div> 28 29 <div> 30 <input type="radio" style="vertical-align: top;" id="ref"><span>Text</span> 31 </div> 32 33 <script> 34 var ref = document.getElementById("ref"); 35 var check = document.getElementById("check"); 36 37 test(function() { 38 assert_equals(ref.offsetWidth, check.offsetWidth, "width should be equal"); 39 }, "two radio button widths are identical"); 40 </script>