| <!DOCTYPE html> |
| <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6789"> |
| <link rel="match" href="position-absolute-semi-replaced-stretch-other-ref.html"> |
| <title>Semi-replaced elements should stretch with an auto main size, and explicit insets in that direction.</title> |
| <style> |
| .cb { |
| position: relative; |
| border: 3px solid black; |
| height: 100px; |
| width: 150px; |
| display: inline-block; |
| vertical-align: top; |
| margin: 5px; |
| } |
| .wide { |
| /* Some of the form controls are wider than others |
| and need a wider CB in order to see if they're |
| stretching or shrinking. */ |
| width: 350px; |
| } |
| .abs { |
| margin: 0; |
| position: absolute; |
| box-sizing: border-box; |
| top: 3px; |
| right: 3px; |
| bottom: 3px; |
| left: 3px; |
| outline: 2px solid lime; |
| width: auto; |
| height: auto; |
| } |
| </style> |
| <div class="cb"><select class="abs"><option>select</option></select></div> |
| <div class="cb"><output class="abs">output</output></div> |
| <div class="cb"><label class="abs">label</output></div> |
| <div class="cb"><fieldset class="abs">fieldset</fieldset></div> |
| <div class="cb wide"><textarea class="abs">textarea</textarea></div> |
| <div class="cb wide"><progress value="0.4" class="abs"></div> |
| <div class="cb wide"><meter value="0.4" class="abs"></div> |
