-
Notifications
You must be signed in to change notification settings - Fork 3.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[layout] Stretch semi-replaced elements when OOF in inline direction.
As per: w3c/csswg-drafts#6789 Removes the tests which were previously testing the shrink-to-fit behaviour, and adds new tests for the stretch behaviour (on more elements). Bug: 1274898 Change-Id: I5c40a4b88fe06d7ef79113a66ef3976375d026eb
- Loading branch information
1 parent
9811acc
commit 7c403d0
Showing
8 changed files
with
208 additions
and
41 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
26 changes: 26 additions & 0 deletions
26
css/css-position/position-absolute-semi-replaced-stretch-button-ref.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| <!DOCTYPE html> | ||
| <style> | ||
| .cb { | ||
| position: relative; | ||
| border: 3px solid black; | ||
| height: 100px; | ||
| width: 150px; | ||
| display: inline-block; | ||
| vertical-align: top; | ||
| margin: 5px; | ||
| } | ||
| .wide { | ||
| width: 350px; | ||
| } | ||
| .abs { | ||
| margin: 0; | ||
| position: absolute; | ||
| box-sizing: border-box; | ||
| top: 3px; | ||
| left: 3px; | ||
| outline: 2px solid lime; | ||
| width: calc(100% - 6px); | ||
| height: calc(100% - 6px); | ||
| } | ||
| </style> | ||
| <div class="cb"><button class="abs">button</button></div> |
34 changes: 34 additions & 0 deletions
34
css/css-position/position-absolute-semi-replaced-stretch-button.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| <!DOCTYPE html> | ||
| <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6789"> | ||
| <link rel="match" href="position-absolute-semi-replaced-stretch-button-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"><button class="abs">button</button></div> |
34 changes: 34 additions & 0 deletions
34
css/css-position/position-absolute-semi-replaced-stretch-input-ref.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| <!DOCTYPE html> | ||
| <style> | ||
| .cb { | ||
| position: relative; | ||
| border: 3px solid black; | ||
| height: 100px; | ||
| width: 150px; | ||
| display: inline-block; | ||
| vertical-align: top; | ||
| margin: 5px; | ||
| } | ||
| .wide { | ||
| width: 350px; | ||
| } | ||
| .abs { | ||
| margin: 0; | ||
| position: absolute; | ||
| box-sizing: border-box; | ||
| top: 3px; | ||
| left: 3px; | ||
| outline: 2px solid lime; | ||
| width: calc(100% - 6px); | ||
| height: calc(100% - 6px); | ||
| } | ||
| </style> | ||
| <div class="cb"><input type="button" class="abs" value="input-btn"></div> | ||
| <div class="cb"><input type="submit" class="abs"></div> | ||
| <div class="cb"><input type="reset" class="abs"></div> | ||
| <div class="cb"><input type="color" class="abs"></div> | ||
| <div class="cb wide"><input type="text" class="abs" value="text"></div> | ||
| <div class="cb wide"><input type="password" class="abs" value="pass"></div> | ||
| <div class="cb wide"><input type="date" class="abs" value="text"></div> | ||
| <div class="cb wide"><input type="file" class="abs"></div> | ||
| <div class="cb wide"><input type="range" class="abs"></div> |
42 changes: 42 additions & 0 deletions
42
css/css-position/position-absolute-semi-replaced-stretch-input.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| <!DOCTYPE html> | ||
| <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6789"> | ||
| <link rel="match" href="position-absolute-semi-replaced-stretch-input-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"><input type="button" class="abs" value="input-btn"></div> | ||
| <div class="cb"><input type="submit" class="abs"></div> | ||
| <div class="cb"><input type="reset" class="abs"></div> | ||
| <div class="cb"><input type="color" class="abs"></div> | ||
| <div class="cb wide"><input type="text" class="abs" value="text"></div> | ||
| <div class="cb wide"><input type="password" class="abs" value="pass"></div> | ||
| <div class="cb wide"><input type="date" class="abs" value="text"></div> | ||
| <div class="cb wide"><input type="file" class="abs"></div> | ||
| <div class="cb wide"><input type="range" class="abs"></div> |
32 changes: 32 additions & 0 deletions
32
css/css-position/position-absolute-semi-replaced-stretch-other-ref.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| <!DOCTYPE html> | ||
| <style> | ||
| .cb { | ||
| position: relative; | ||
| border: 3px solid black; | ||
| height: 100px; | ||
| width: 150px; | ||
| display: inline-block; | ||
| vertical-align: top; | ||
| margin: 5px; | ||
| } | ||
| .wide { | ||
| width: 350px; | ||
| } | ||
| .abs { | ||
| margin: 0; | ||
| position: absolute; | ||
| box-sizing: border-box; | ||
| top: 3px; | ||
| left: 3px; | ||
| outline: 2px solid lime; | ||
| width: calc(100% - 6px); | ||
| height: calc(100% - 6px); | ||
| } | ||
| </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> |
40 changes: 40 additions & 0 deletions
40
css/css-position/position-absolute-semi-replaced-stretch-other.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| <!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> |
This file was deleted.
Oops, something went wrong.