select-element-001.html (1044B)
1 <!DOCTYPE html> 2 <title>CSS aspect-ratio: select elements with min-width</title> 3 <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> 4 <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> 5 <link rel="match" href="select-element-001-ref.html"> 6 <!-- WebKit uses quirky em in user agent sheet for margins of select, avoid it --> 7 <style> 8 select { 9 margin: 0px; 10 } 11 </style> 12 13 <!-- Sanity Check - aspect-ratio should be applied on the select element --> 14 <select style="height: 50px; aspect-ratio: 1/1; background: green;"> 15 <option value=""></option> 16 </select> 17 <br> 18 <!-- The content size shouldn't override the size when min-width is non-auto --> 19 <select style="height: 50px; aspect-ratio: 1/1; background: green; min-width: 0px;"> 20 <option value="">The long text is selected</option> 21 </select> 22 <br> 23 <!-- The content size should override the size when min-width is auto --> 24 <select style="height: 50px; aspect-ratio: 1/1; background: green;"> 25 <option value="">The long text is selected</option> 26 </select>