| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <head> |
| 4 <style> |
| 5 .container { |
| 6 position: relative; |
| 7 height: 50px; |
| 8 background-color: gray; |
| 9 } |
| 10 |
| 11 .auto-width { |
| 12 position: absolute; |
| 13 left: 0; |
| 14 } |
| 15 |
| 16 .with-border-padding { |
| 17 border: 2px; |
| 18 padding: 5px; |
| 19 } |
| 20 |
| 21 .border-box { |
| 22 box-sizing: border-box; |
| 23 -moz-box-sizing: border-box; |
| 24 width: 200px; |
| 25 height: 20px; |
| 26 } |
| 27 </style> |
| 28 </head> |
| 29 <body> |
| 30 <div>Check if the elements shrink to fit as per their 'intrinsic' width for Butt
on, input, select and textarea. If you see any the elements strech to available
width, then the test has failed.</div> |
| 31 <div class="container"> |
| 32 <button id="button" class="auto-width">Button</button> |
| 33 </div> |
| 34 <div class="container"> |
| 35 <input id="inputText" type="text" class="auto-width"> |
| 36 </div> |
| 37 <div class="container"> |
| 38 <select id="select" class="auto-width"></select> |
| 39 </div> |
| 40 <div class="container"> |
| 41 <textarea id="textarea" class="auto-width">Text area</textarea> |
| 42 </div> |
| 43 <div class="container"> |
| 44 <button id="buttonBorderPadding" class="auto-width with-border-padding">Button</
button> |
| 45 </div> |
| 46 <div class="container"> |
| 47 <input id="inputTextBorderPadding" type="text" class="auto-width with-border-pad
ding"> |
| 48 </div> |
| 49 <div class="container"> |
| 50 <select id="selectBorderPadding" class="auto-width with-border-padding"></select
> |
| 51 </div> |
| 52 <div class="container"> |
| 53 <textarea id="textareaBorderPadding" class="auto-width with-border-padding">Text
area</textarea> |
| 54 </div> |
| 55 <div class="container"> |
| 56 <button id="button-border-box" class="auto-width border-box with-border-padding"
>Button</button> |
| 57 </div> |
| 58 <div class="container"> |
| 59 <input id="inputText-border-box" type="text" class="auto-width border-box with-b
order-padding"> |
| 60 </div> |
| 61 <div class="container"> |
| 62 <select id="select-border-box" class="auto-width border-box with-border-padding"
></select> |
| 63 </div> |
| 64 <div class="container"> |
| 65 <textarea id="textarea-border-box" class="auto-width border-box with-border-padd
ing">Text area</textarea> |
| 66 </div> |
| 67 </body> |
| 68 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 24360004:
Use shrink-to-fit for width for Button, input, select, textarea, and legend treat width value of 'a… (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master