| <!DOCTYPE html> |
| <html> |
| <meta charset="utf-8"> |
| <title>min-width: Should apply to buttons</title> |
| <link rel="author" title="Mason Freed" href="mailto:masonfreed@chromium.org"> |
| <link rel="help" href="https://www.w3.org/TR/CSS2/visudet.html#min-max-widths"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <style> |
| .button-row { |
| background-color: #BBB; |
| display: flex; |
| flex-direction: row; |
| width: 400px; |
| margin-top: 8px; |
| } |
| button { |
| flex: 0 0 auto; |
| margin: 0px; |
| } |
| </style> |
| <div> |
| <p>Expected: All buttons should be 200px wide</p> |
| </div> |
| <div class="button-row"> |
| <button style="min-width: 200px">Foo</button> |
| <button style="min-width: 200px">Bar</button> |
| </div> |
| <div class="button-row"> |
| <button style="min-width: 50%">Foo</button> |
| <button style="min-width: 50%">Bar</button> |
| </div> |
| <div class="button-row" style="writing-mode: vertical-rl; height: 100px;flex-direction:column"> |
| <button style="min-width: 200px">Foo</button> |
| <button style="min-width: 200px">Bar</button> |
| </div> |
| <div class="button-row" style="zoom:2"> |
| <button style="min-width: 200px">Foo</button> |
| <button style="min-width: 200px">Bar</button> |
| </div> |
| <script> |
| test(() => { |
| let buttons = document.querySelectorAll("button"); |
| for (let button of document.querySelectorAll("button")) |
| assert_equals(button.offsetWidth, 200); |
| }, 'min-width should force all buttons to be 200px wide'); |
| </script> |