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.
[FlexNG] Properly handle vertical writing modes when fragmenting
Previously, we would check is_horizontal_flow_ to determine if we were handling a row/column flex container when fragmenting. This produced incorrect results when the container was in a vertical writing-mode. Instead, check is_column_. I chose two tests at random from each container type and updated the writing mode to make sure this is now working as expected. Bug: 660611 Change-Id: I5a6d9f401a8b44634c9b5ba035d55c588f3ae26c Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3573778 Reviewed-by: David Grogan <[email protected]> Reviewed-by: Morten Stenshorne <[email protected]> Commit-Queue: Alison Maher <[email protected]> Cr-Commit-Position: refs/heads/main@{#989635}
- Loading branch information
1 parent
c885424
commit 054bcff
Showing
8 changed files
with
270 additions
and
0 deletions.
There are no files selected for viewing
51 changes: 51 additions & 0 deletions
51
css/css-break/flexbox/multi-line-column-flex-fragmentation-046.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,51 @@ | ||
| <!DOCTYPE html> | ||
| <title> | ||
| Multi-line column flex fragmentation: early break inside columns w/ vertical | ||
| writing-mode. | ||
| </title> | ||
| <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> | ||
| <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> | ||
| <style> | ||
| .multicol { | ||
| column-count: 2; | ||
| column-fill: auto; | ||
| column-gap: 0px; | ||
| block-size: 100px; | ||
| inline-size: 100px; | ||
| position: relative; | ||
| background: red; | ||
| } | ||
| .abs { | ||
| position: absolute; | ||
| inline-size: 50px; | ||
| background: white; | ||
| } | ||
| #flex { | ||
| display: flex; | ||
| flex-direction: column; | ||
| flex-wrap: wrap; | ||
| block-size: 200px; | ||
| } | ||
| #flex > div { | ||
| background: green; | ||
| inline-size: 25px; | ||
| } | ||
| </style> | ||
| <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> | ||
| <div style="writing-mode: vertical-lr;"> | ||
| <div class="multicol"> | ||
| <div class="abs" style="top: 100px; block-size: 50px;"></div> | ||
| <div id="flex"> | ||
| <div> | ||
| <div style="block-size: 50px; inline-size: 25px;"></div> | ||
| <div style="block-size: 50px; inline-size: 25px;"></div> | ||
| </div> | ||
| <div style="block-size: 100px; break-before: avoid;"></div> | ||
| <div> | ||
| <div style="block-size: 50px; inline-size: 25px;"></div> | ||
| <div style="block-size: 50px; inline-size: 25px; break-after: avoid;"></div> | ||
| </div> | ||
| <div style="block-size: 100px;"></div> | ||
| </div> | ||
| </div> | ||
| </div> |
36 changes: 36 additions & 0 deletions
36
css/css-break/flexbox/multi-line-column-flex-fragmentation-047.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,36 @@ | ||
| <!DOCTYPE html> | ||
| <title> | ||
| Multi-line column flex fragmentation: Tall margins with forced break and | ||
| vertical writing-mode. | ||
| </title> | ||
| <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> | ||
| <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> | ||
| <style> | ||
| #flex { | ||
| display: flex; | ||
| flex-direction: column; | ||
| flex-wrap: wrap; | ||
| block-size: 500px; | ||
| position: relative; | ||
| } | ||
| #flex > div { | ||
| background: green; | ||
| inline-size: 10px; | ||
| } | ||
| </style> | ||
| <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> | ||
| <div style="writing-mode: vertical-rl;"> | ||
| <div style="inline-size: 100px; block-size: 100px; columns: 5; column-gap: 0; column-fill: auto; background: red;"> | ||
| <div id="flex"> | ||
| <div style="block-size: 50px;"></div> | ||
| <div style="block-size: 50px; margin-right: 100px; break-before: column;"></div> | ||
| <div style="block-size: 200px; margin-right: 50px;"></div> | ||
| <div style="block-size: 50px; background: white;"></div> | ||
| <div style="block-size: 50px; margin-right: 100px; break-before: column;"></div> | ||
| <div style="block-size: 200px; margin-right: 50px;"></div> | ||
| <div style="position: absolute; block-size: 150px; right: 50px;"></div> | ||
| <div style="position: absolute; block-size: 200px; top: 10px;"></div> | ||
| <div style="position: absolute; block-size: 50px; inline-size: 20px; right: 250px;"></div> | ||
| </div> | ||
| </div> | ||
| </div> |
30 changes: 30 additions & 0 deletions
30
css/css-break/flexbox/multi-line-row-flex-fragmentation-056.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> | ||
| <title> | ||
| Multi-line row flex fragmentation: Item overflow and stretching w/ vertical | ||
| writing-mode. | ||
| </title> | ||
| <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> | ||
| <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> | ||
| <style> | ||
| #flex { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| } | ||
| #flex > div { | ||
| background: green; | ||
| inline-size: 50%; | ||
| } | ||
| </style> | ||
| <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> | ||
| <div style="writing-mode: vertical-lr;"> | ||
| <div style="inline-size: 100px; block-size: 100px; columns: 5; column-gap: 0; column-fill: auto; position: relative; background: red;"> | ||
| <div id="flex"> | ||
| <div style="block-size: 100px;"> | ||
| <div style="block-size: 200px;"></div> | ||
| </div> | ||
| <div></div> | ||
| <div style="block-size: 400px;"></div> | ||
| <div></div> | ||
| </div> | ||
| </div> | ||
| </div> |
40 changes: 40 additions & 0 deletions
40
css/css-break/flexbox/multi-line-row-flex-fragmentation-057.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> | ||
| <title> | ||
| Multi-line row flex fragmentation with items in the same row ending layout | ||
| in different fragmentainers w/ vertical writing-mode. | ||
| </title> | ||
| <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> | ||
| <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> | ||
| <style> | ||
| #flex { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| } | ||
| #flex > div { | ||
| background: green; | ||
| inline-size: 10px; | ||
| } | ||
| .abs { | ||
| position: absolute; | ||
| inline-size: 10px; | ||
| block-size: 100px; | ||
| background: green; | ||
| } | ||
| </style> | ||
| <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> | ||
| <div style="writing-mode: vertical-rl;"> | ||
| <div style="inline-size: 100px; block-size: 100px; columns: 5; column-gap: 0; column-fill: auto; background: red;"> | ||
| <div id="flex"> | ||
| <div style="block-size: 300px;"></div> | ||
| <div style="position: relative; block-size: 200px;"> | ||
| <div style="inline-size: 10px; block-size: 200px;"></div> | ||
| <div class="abs"></div> | ||
| </div> | ||
| <div style="block-size: 200px;"></div> | ||
| <div style="position: relative; block-size: 100px;"> | ||
| <div style="inline-size: 10px; block-size: 100px;"></div> | ||
| <div class="abs"></div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> |
20 changes: 20 additions & 0 deletions
20
css/css-break/flexbox/single-line-column-flex-fragmentation-044.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,20 @@ | ||
| <!DOCTYPE html> | ||
| <title> | ||
| Tests that flex-items get pushed down due to a previous multicol flex-item | ||
| expanding as a result of fragmentation w/ vertical writing-mode. | ||
| </title> | ||
| <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> | ||
| <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> | ||
| <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> | ||
| <div style="writing-mode: vertical-lr;"> | ||
| <div style="inline-size: 100px; block-size: 100px; columns: 2; column-gap: 0; column-fill: auto; background: red;"> | ||
| <div style="display: flex; flex-direction: column;"> | ||
| <div style="inline-size: 50px; columns: 2; column-gap: 0; column-fill: auto; background: green;"> | ||
| <div style="inline-size: 50px; block-size: 160px;"></div> | ||
| <div style="column-span: all; block-size: 30px; break-inside: avoid;"></div> | ||
| </div> | ||
| <div style="background: green; block-size: 50px;"></div> | ||
| <div style="background: green; block-size: 20px;"></div> | ||
| </div> | ||
| </div> | ||
| </div> |
41 changes: 41 additions & 0 deletions
41
css/css-break/flexbox/single-line-column-flex-fragmentation-045.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,41 @@ | ||
| <!DOCTYPE html> | ||
| <title> | ||
| Single-line column flex fragmentation: column balancing with forced break | ||
| w/ vertical writing-mode. | ||
| </title> | ||
| <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> | ||
| <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> | ||
| <style> | ||
| #flex { | ||
| display: flex; | ||
| flex-direction: column; | ||
| background: green; | ||
| block-size: 100px; | ||
| } | ||
| #flex > div { | ||
| inline-size: 25px; | ||
| background: green; | ||
| flex: none; | ||
| } | ||
| </style> | ||
| <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> | ||
| <div style="writing-mode: vertical-rl;"> | ||
| <div style="inline-size: 100px; block-size: 100px; background: red;"> | ||
| <div style="inline-size: 100px; columns: 4; column-gap: 0; position: relative;"> | ||
| <div id="flex"> | ||
| <div style="block-size: 5px;"></div> | ||
| <div style="block-size: 10px; break-before: column;"></div> | ||
| <div style="block-size: 5px;"> | ||
| <div style="block-size: 90px; inline-size: 25px; background: green;"></div> | ||
| </div> | ||
| <div style="block-size: 85px;"></div> | ||
| <div style="block-size: 5px;"></div> | ||
| <div style="block-size: 10px; break-before: column;"></div> | ||
| <div style="block-size: 5px;"> | ||
| <div style="block-size: 90px; inline-size: 25px; background: green;"></div> | ||
| </div> | ||
| </div> | ||
| <div style="position: absolute; right: 5px; top: 50px; block-size: 95px; inline-size: 25px; background: green;"></div> | ||
| </div> | ||
| </div> | ||
| </div> |
22 changes: 22 additions & 0 deletions
22
css/css-break/flexbox/single-line-row-flex-fragmentation-030.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,22 @@ | ||
| <!DOCTYPE html> | ||
| <title> | ||
| Single-line row flex fragmentation: If the fragmentainer is out of space | ||
| but a flex row should break before if it has content w/ vertical | ||
| writing-mode. | ||
| </title> | ||
| <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> | ||
| <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> | ||
| <style> | ||
| #flex { | ||
| display: flex; | ||
| } | ||
| </style> | ||
| <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> | ||
| <div style="writing-mode: vertical-lr;"> | ||
| <div style="inline-size: 100px; block-size: 100px; columns: 2; column-gap: 0; column-fill: auto; background: red;"> | ||
| <div style="block-size: 100px; inline-size: 100px; background: green;"></div> | ||
| <div id="flex"> | ||
| <div style="block-size: 100px; inline-size: 100px; background: green;"></div> | ||
| </div> | ||
| </div> | ||
| </div> |
30 changes: 30 additions & 0 deletions
30
css/css-break/flexbox/single-line-row-flex-fragmentation-031.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> | ||
| <title> | ||
| Single-line row flex fragmentation: OOF static position and alignment | ||
| w/ vertical writing-mode. | ||
| </title> | ||
| <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> | ||
| <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> | ||
| <style> | ||
| #flex { | ||
| display: flex; | ||
| block-size: 200px; | ||
| position: relative; | ||
| align-items: flex-end; | ||
| } | ||
| #flex > div { | ||
| inline-size: 100px; | ||
| block-size: 100px; | ||
| flex: none; | ||
| } | ||
| </style> | ||
| <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> | ||
| <div style="writing-mode: vertical-rl;"> | ||
| <div style="margin-top: -50px; inline-size: 100px; block-size: 100px; columns: 2; column-fill: auto; column-gap: 0;"> | ||
| <div id="flex"> | ||
| <div style="position: absolute; background: green;"></div> | ||
| <div style="background: red;"></div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> |