-
Notifications
You must be signed in to change notification settings - Fork 3.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
WebKit export of https://bugs.webkit.org/show_bug.cgi?id=252358 (#47341)
Block level boxes with block-step-size other than none should establish an independent formatting context.
- Loading branch information
Showing
3 changed files
with
86 additions
and
0 deletions.
There are no files selected for viewing
29 changes: 29 additions & 0 deletions
29
css/css-rhythm/block-step-size-establishes-block-formatting-context-list-item.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,29 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <link rel="author" href="mailto:[email protected]"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-rhythm/#block-step-size"> | ||
| <link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html"> | ||
| <meta name="assert" content="block-step-size values other than none on a block box causes it to establish a block formatting context"> | ||
| <style> | ||
| div { | ||
| width: 50px; | ||
| height: 100px; | ||
| background-color: green; | ||
| } | ||
| .floating { | ||
| float: left; | ||
| } | ||
| .block-step-size { | ||
| display: list-item; | ||
| list-style: none; | ||
| block-step-size: 1px; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <p>Test passes if there is a filled green square.</p> | ||
| <div class="floating"></div> | ||
| <div class="block-step-size"></div> | ||
| </body> | ||
| </html> |
27 changes: 27 additions & 0 deletions
27
css/css-rhythm/block-step-size-establishes-block-formatting-context.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,27 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <link rel="author" href="mailto:[email protected]"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-rhythm/#block-step-size"> | ||
| <link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html"> | ||
| <meta name="assert" content="block-step-size values other than none on a block box causes it to establish a block formatting context"> | ||
| <style> | ||
| div { | ||
| width: 50px; | ||
| height: 100px; | ||
| background-color: green; | ||
| } | ||
| .floating { | ||
| float: left; | ||
| } | ||
| .block-step-size { | ||
| block-step-size: 1px; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <p>Test passes if there is a filled green square.</p> | ||
| <div class="floating"></div> | ||
| <div class="block-step-size"></div> | ||
| </body> | ||
| </html> |
30 changes: 30 additions & 0 deletions
30
css/css-rhythm/block-step-size-none-does-not-establish-block-formatting-context.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,30 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <link rel="author" href="mailto:[email protected]"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-rhythm/#block-step-size"> | ||
| <link rel="match" href="/css/reference/ref-filled-green-100px-square.xht"> | ||
| <meta name="assert" content="block-step-size none should not establish a block formatting context for the block box"> | ||
| <style> | ||
| div { | ||
| width: 100px; | ||
| height: 100px; | ||
| background-color: green; | ||
| } | ||
| .floating { | ||
| position: relative; | ||
| z-index: -1; | ||
| float: left; | ||
| background-color: red; | ||
| } | ||
| .block-step-size { | ||
| block-step-size: none; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> | ||
| <div class="floating"></div> | ||
| <div class="block-step-size"></div> | ||
| </body> | ||
| </html> |