forked from web-platform-tests/wpt
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Change abspos fit-content sizing so as not to provide a basis for per…
…cent resolution in its children. Differential Revision: https://phabricator.services.mozilla.com/D231996 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1936450 gecko-commit: 09b40893c7428cad149b1a197f3b5b527a9e5e3a gecko-reviewers: layout-reviewers, emilio
- Loading branch information
1 parent
4fffa23
commit e415e6c
Showing
4 changed files
with
124 additions
and
0 deletions.
There are no files selected for viewing
31 changes: 31 additions & 0 deletions
31
css/css-sizing/abspos-auto-sizing-fit-content-percentage-001.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,31 @@ | ||
| <!DOCTYPE html> | ||
| <link rel="author" title="David Shin" href="mailto:dshin@mozilla.com"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-position-3/#abspos-auto-size"> | ||
| <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1936450"> | ||
| <link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> | ||
| <meta name="assert" content="Ensures that abspos elements with fit-content sizing disallows percent-size resolution in its children."> | ||
| <style> | ||
| .container { | ||
| position: relative; | ||
| width: 100px; | ||
| height: 100px; | ||
| background: red; | ||
| } | ||
|
|
||
| .abs { | ||
| position: absolute; | ||
| background: green; | ||
| } | ||
|
|
||
| .child { | ||
| width: 100px; | ||
| height: 100px; | ||
| margin-left: -50%; | ||
| } | ||
| </style> | ||
| <p>Test passes if there is a filled green square.</p> | ||
| <div class="container"> | ||
| <div class="abs"> | ||
| <div class="child"></div> | ||
| </div> | ||
| </div> |
31 changes: 31 additions & 0 deletions
31
css/css-sizing/abspos-auto-sizing-fit-content-percentage-002.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,31 @@ | ||
| <!DOCTYPE html> | ||
| <link rel="author" title="David Shin" href="mailto:dshin@mozilla.com"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-position-3/#abspos-auto-size"> | ||
| <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1936450"> | ||
| <link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> | ||
| <meta name="assert" content="Ensures that abspos elements with fit-content sizing disallows percent-size resolution in its children."> | ||
| <style> | ||
| .container { | ||
| position: relative; | ||
| width: 100px; | ||
| height: 100px; | ||
| background: red; | ||
| } | ||
|
|
||
| .abs { | ||
| position: absolute; | ||
| background: green; | ||
| } | ||
|
|
||
| .child { | ||
| width: 100px; | ||
| height: 100px; | ||
| margin-right: -50%; | ||
| } | ||
| </style> | ||
| <p>Test passes if there is a filled green square.</p> | ||
| <div class="container"> | ||
| <div class="abs"> | ||
| <div class="child"></div> | ||
| </div> | ||
| </div> |
31 changes: 31 additions & 0 deletions
31
css/css-sizing/abspos-auto-sizing-fit-content-percentage-003.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,31 @@ | ||
| <!DOCTYPE html> | ||
| <link rel="author" title="David Shin" href="mailto:dshin@mozilla.com"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-position-3/#abspos-auto-size"> | ||
| <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1936450"> | ||
| <link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> | ||
| <meta name="assert" content="Ensures that abspos elements with fit-content sizing disallows percent-size resolution in its children."> | ||
| <style> | ||
| .container { | ||
| position: relative; | ||
| width: 100px; | ||
| height: 100px; | ||
| background: red; | ||
| } | ||
|
|
||
| .abs { | ||
| position: absolute; | ||
| background: green; | ||
| } | ||
|
|
||
| .child { | ||
| width: 100px; | ||
| height: 100px; | ||
| padding-left: 50%; | ||
| } | ||
| </style> | ||
| <p>Test passes if there is a filled green square.</p> | ||
| <div class="container"> | ||
| <div class="abs"> | ||
| <div class="child"></div> | ||
| </div> | ||
| </div> |
31 changes: 31 additions & 0 deletions
31
css/css-sizing/abspos-auto-sizing-fit-content-percentage-004.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,31 @@ | ||
| <!DOCTYPE html> | ||
| <link rel="author" title="David Shin" href="mailto:dshin@mozilla.com"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-position-3/#abspos-auto-size"> | ||
| <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1936450"> | ||
| <link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> | ||
| <meta name="assert" content="Ensures that abspos elements with fit-content sizing disallows percent-size resolution in its children."> | ||
| <style> | ||
| .container { | ||
| position: relative; | ||
| width: 100px; | ||
| height: 100px; | ||
| background: red; | ||
| } | ||
|
|
||
| .abs { | ||
| position: absolute; | ||
| background: green; | ||
| } | ||
|
|
||
| .child { | ||
| width: 100px; | ||
| height: 100px; | ||
| padding-right: 50%; | ||
| } | ||
| </style> | ||
| <p>Test passes if there is a filled green square.</p> | ||
| <div class="container"> | ||
| <div class="abs"> | ||
| <div class="child"></div> | ||
| </div> | ||
| </div> |