button-min-width.html (1435B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <title>min-width: Should apply to buttons</title> 5 <link rel="author" href="mailto:masonf@chromium.org"> 6 <link rel="help" href="https://www.w3.org/TR/CSS2/visudet.html#min-max-widths"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <style> 10 .button-row { 11 background-color: #BBB; 12 display: flex; 13 flex-direction: row; 14 width: 400px; 15 margin-top: 8px; 16 } 17 button { 18 flex: 0 0 auto; 19 margin: 0px; 20 } 21 </style> 22 <div> 23 <p>Expected: All buttons should be 200px wide</p> 24 </div> 25 <div class="button-row"> 26 <button style="min-width: 200px">Foo</button> 27 <button style="min-width: 200px">Bar</button> 28 </div> 29 <div class="button-row"> 30 <button style="min-width: 50%">Foo</button> 31 <button style="min-width: 50%">Bar</button> 32 </div> 33 <div class="button-row" style="writing-mode: vertical-rl; height: 100px;flex-direction:column"> 34 <button style="min-width: 200px">Foo</button> 35 <button style="min-width: 200px">Bar</button> 36 </div> 37 <div class="button-row" style="zoom:2"> 38 <button style="min-width: 200px">Foo</button> 39 <button style="min-width: 200px">Bar</button> 40 </div> 41 <script> 42 test(() => { 43 let buttons = document.querySelectorAll("button"); 44 for (let button of document.querySelectorAll("button")) 45 assert_equals(button.offsetWidth, 200); 46 }, 'min-width should force all buttons to be 200px wide'); 47 </script>