| <html> |
| <head> |
| <style> |
| .container { |
| position: relative; |
| height: 50px; |
| background-color: gray; |
| } |
| |
| .auto-width { |
| position: absolute; |
| left: 0; |
| } |
| |
| .with-border-padding { |
| border: 2px; |
| padding: 5px; |
| } |
| |
| .border-box { |
| box-sizing: border-box; |
| -moz-box-sizing: border-box; |
| width: 200px; |
| height: 20px; |
| } |
| </style> |
| </head> |
| <body> |
| <div>Check if the elements shrink to fit as per their 'intrinsic' width for Button, input, select and textarea. If you see any the elements strech to available width, then the test has failed.</div> |
| <div class="container"> |
| <button id="button" class="auto-width">Button</button> |
| </div> |
| <div class="container"> |
| <input id="inputText" type="text" class="auto-width"> |
| </div> |
| <div class="container"> |
| <select id="select" class="auto-width"></select> |
| </div> |
| <div class="container"> |
| <textarea id="textarea" class="auto-width">Text area</textarea> |
| </div> |
| <div class="container"> |
| <button id="buttonBorderPadding" class="auto-width with-border-padding">Button</button> |
| </div> |
| <div class="container"> |
| <input id="inputTextBorderPadding" type="text" class="auto-width with-border-padding"> |
| </div> |
| <div class="container"> |
| <select id="selectBorderPadding" class="auto-width with-border-padding"></select> |
| </div> |
| <div class="container"> |
| <textarea id="textareaBorderPadding" class="auto-width with-border-padding">Text area</textarea> |
| </div> |
| <div class="container"> |
| <button id="button-border-box" class="auto-width border-box with-border-padding">Button</button> |
| </div> |
| <div class="container"> |
| <input id="inputText-border-box" type="text" class="auto-width border-box with-border-padding"> |
| </div> |
| <div class="container"> |
| <select id="select-border-box" class="auto-width border-box with-border-padding"></select> |
| </div> |
| <div class="container"> |
| <textarea id="textarea-border-box" class="auto-width border-box with-border-padding">Text area</textarea> |
| </div> |
| </body> |
| </html> |
