Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
Implement margin-trim for grid containers.
https://bugs.webkit.org/show_bug.cgi?id=249210 rdar://103285873 Reviewed by Alan Baradlay. Adds support for the margin-trim property on grids. This will trim the margin of items that are adjacent to the edges of the container specified by the property values. This can be done by checking the placement of the grid items on the track. After RenderGrid::placeItemsOnGrid is finished, each grid item should have a position in the grid that we can look at. Since we are supposed to ignore collapsed tracks, gridItemSpan may not return the correct values to compare. gridItemSpanIgnoringCollapsedTracks was added to try and address this. It will get the value returned by gridItemSpan, but it will also try to adjust the position in the grid so that it ignores the collapsed tracks. Spec reference: https://drafts.csswg.org/css-box-4/#margin-trim-grid * LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/grid-block-end-expected.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/grid-block-end.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/grid-block-expected.html: Added. * LayoutTests/imported/w3c/web-iplatform-tests/css/css-box/margin-trim/grid-block-start-expected.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/grid-block-start.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/grid-block.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/grid-inline-end-expected.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/grid-inline-end.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/grid-inline-expected.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/grid-inline-start-expected.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/grid-inline-start.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/grid-inline.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/grid-trim-ignores-collapsed-tracks-expected.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/grid-trim-ignores-collapsed-tracks.html: Added. * Source/WebCore/rendering/Grid.cpp: (WebCore::Grid::gridItemSpanIgnoringCollapsedTracks const): * Source/WebCore/rendering/Grid.h: * Source/WebCore/rendering/RenderGrid.cpp: (WebCore::RenderGrid::shouldTrimChildMargin const): * Source/WebCore/rendering/RenderGrid.h: Canonical link: https://commits.webkit.org/258587@main
- Loading branch information
Showing
18 changed files
with
445 additions
and
0 deletions.
There are no files selected for viewing
29 changes: 29 additions & 0 deletions
29
...ests/imported/w3c/web-platform-tests/css/css-box/margin-trim/grid-block-end-expected.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> | ||
| <title>margin-trim: grid-block-end-001</title> | ||
| <link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-grid"> | ||
| <meta name="assert" content="block-end should trim block-end margins of items on last row"> | ||
| <style> | ||
| grid { | ||
| display: inline-grid; | ||
| border: 1px solid black; | ||
| grid-template-columns: auto auto; | ||
| } | ||
| item { | ||
| display: block; | ||
| background-color: green; | ||
| width: 50px; | ||
| height: 50px; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <grid> | ||
| <item style="grid-row: span 2; height: auto;"></item> | ||
| <item style="margin-block-end: 10px;"></item> | ||
| <item></item> | ||
| </grid> | ||
| </body> | ||
| </html> |
33 changes: 33 additions & 0 deletions
33
LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/grid-block-end.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,33 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>margin-trim: grid-block-end-001</title> | ||
| <link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-grid"> | ||
| <link rel="match" href="grid-block-end-001-ref.html"> | ||
| <meta name="assert" content="block-end should trim block-end margins of items on last row"> | ||
| <style> | ||
| grid { | ||
| display: inline-grid; | ||
| border: 1px solid black; | ||
| grid-template-columns: auto auto; | ||
| margin-trim: block-end; | ||
| } | ||
|
|
||
| item { | ||
| display: block; | ||
| background-color: green; | ||
| width: 50px; | ||
| height: 50px; | ||
| margin-block-end: 10px; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <grid> | ||
| <item style="grid-row: span 2; height: auto;"></item> | ||
| <item></item> | ||
| <item></item> | ||
| </grid> | ||
| </body> | ||
| </html> |
12 changes: 12 additions & 0 deletions
12
LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/grid-block-expected.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,12 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>margin-trim: grid-block-001</title> | ||
| <link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> | ||
| <meta name="assert" content="block should trim block-start margin of items on first row and block-end margins of items on last row"> | ||
| </head> | ||
| <body> | ||
| <p>Test passes if there is a filled green square.</p> | ||
| <div style="width:100px; height: 100px; background-color: green;"></div> | ||
| </body> | ||
| </html> |
33 changes: 33 additions & 0 deletions
33
...ts/imported/w3c/web-platform-tests/css/css-box/margin-trim/grid-block-start-expected.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,33 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>margin-trim: grid-block-start-001</title> | ||
| <link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-grid"> | ||
| <meta name="assert" content="block-start should trim block-start margins of items on first row"> | ||
| <style> | ||
| grid { | ||
| display: inline-grid; | ||
| border: 1px solid black; | ||
| grid-template-columns: auto auto; | ||
| } | ||
| item { | ||
| display: block; | ||
| background-color: green; | ||
| width: 50px; | ||
| height: 50px; | ||
| } | ||
| .block-start-margin { | ||
| margin-block-start: 10px; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <grid> | ||
| <item></item> | ||
| <item></item> | ||
| <item class="block-start-margin"></item> | ||
| <item class="block-start-margin"></item> | ||
| </grid> | ||
| </body> | ||
| </html> |
33 changes: 33 additions & 0 deletions
33
LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/grid-block-start.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,33 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>margin-trim: grid-block-start-001</title> | ||
| <link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-grid"> | ||
| <link rel="match" href="grid-block-start-001-ref.html"> | ||
| <meta name="assert" content="block-start should trim block-start margins of items on first row"> | ||
| <style> | ||
| grid { | ||
| display: inline-grid; | ||
| border: 1px solid black; | ||
| grid-template-columns: auto auto; | ||
| margin-trim: block-start; | ||
| } | ||
| item { | ||
| display: block; | ||
| background-color: green; | ||
| width: 50px; | ||
| height: 50px; | ||
| margin-block-start: 10px; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <grid> | ||
| <item></item> | ||
| <item></item> | ||
| <item></item> | ||
| <item></item> | ||
| </grid> | ||
| </body> | ||
| </html> |
38 changes: 38 additions & 0 deletions
38
LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/grid-block.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,38 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>margin-trim: grid-block-001</title> | ||
| <link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-grid"> | ||
| <link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html"> | ||
| <meta name="assert" content="block should trim block-start margin of items on first row and block-end margins of items on last row"> | ||
| <style> | ||
| grid { | ||
| display: inline-grid; | ||
| grid-template-columns: auto auto; | ||
| margin-trim: block; | ||
| } | ||
| item { | ||
| display: block; | ||
| background-color: green; | ||
| width: 50px; | ||
| height: 50px; | ||
| } | ||
| .block-start-margin { | ||
| margin-block-start: 10px; | ||
| } | ||
| .block-end-margin { | ||
| margin-block-end: 20px; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <p>Test passes if there is a filled green square.</p> | ||
| <grid> | ||
| <item class="block-start-margin"></item> | ||
| <item class="block-start-margin"></item> | ||
| <item class="block-end-margin"></item> | ||
| <item class="block-end-margin"></item> | ||
| </grid> | ||
| </body> | ||
| </html> |
32 changes: 32 additions & 0 deletions
32
...sts/imported/w3c/web-platform-tests/css/css-box/margin-trim/grid-inline-end-expected.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> | ||
| <html> | ||
| <head> | ||
| <title>margin-trim: grid-inline-end-001</title> | ||
| <link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-grid"> | ||
| <link rel="match" href=""> | ||
| <meta name="assert" content="inline-end should trim inline-end margins of items on last column"> | ||
| <style> | ||
| grid { | ||
| display: inline-grid; | ||
| border: 1px solid black; | ||
| grid-template-columns: auto auto; | ||
| margin-trim: inline-end; | ||
| } | ||
|
|
||
| item { | ||
| display: block; | ||
| background-color: green; | ||
| width: 50px; | ||
| height: 50px; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <grid> | ||
| <item style="grid-column: span 2; width: auto;"></item> | ||
| <item style="margin-inline-end: 10px;"></item> | ||
| <item></item> | ||
| </grid> | ||
| </body> | ||
| </html> |
33 changes: 33 additions & 0 deletions
33
LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/grid-inline-end.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,33 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>margin-trim: grid-inline-end-001</title> | ||
| <link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-grid"> | ||
| <link rel="match" href="grid-inline-end-001-ref.html"> | ||
| <meta name="assert" content="inline-end should trim inline-end margins of items on last column"> | ||
| <style> | ||
| grid { | ||
| display: inline-grid; | ||
| border: 1px solid black; | ||
| grid-template-columns: auto auto; | ||
| margin-trim: inline-end; | ||
| } | ||
|
|
||
| item { | ||
| display: block; | ||
| background-color: green; | ||
| width: 50px; | ||
| height: 50px; | ||
| margin-inline-end: 10px; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <grid> | ||
| <item style="grid-column: span 2; width: auto;"></item> | ||
| <item></item> | ||
| <item></item> | ||
| </grid> | ||
| </body> | ||
| </html> |
12 changes: 12 additions & 0 deletions
12
...utTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/grid-inline-expected.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,12 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>margin-trim: grid-inline-001</title> | ||
| <link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> | ||
| <meta name="assert" content="inline should trim inline-start margin of items on first column and inline-end margins of items on last column"> | ||
| </head> | ||
| <body> | ||
| <p>Test passes if there is a filled green square.</p> | ||
| <div style="width:100px; height: 100px; background-color: green;"></div> | ||
| </body> | ||
| </html> |
35 changes: 35 additions & 0 deletions
35
...s/imported/w3c/web-platform-tests/css/css-box/margin-trim/grid-inline-start-expected.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,35 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>margin-trim: grid-inline-start-001</title> | ||
| <link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-grid"> | ||
| <meta name="assert" content="inline-start should trim inline-start margins of items on first column"> | ||
| <style> | ||
| grid { | ||
| display: inline-grid; | ||
| border: 1px solid black; | ||
| grid-template-columns: auto auto; | ||
| margin-trim: inline-start; | ||
| } | ||
|
|
||
| item { | ||
| display: block; | ||
| background-color: green; | ||
| width: 50px; | ||
| height: 50px; | ||
| } | ||
| .inline-start-margin { | ||
| margin-inline-start: 10px; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <grid> | ||
| <item></item> | ||
| <item class="inline-start-margin"></item> | ||
| <item></item> | ||
| <item class="inline-start-margin"></item> | ||
| </grid> | ||
| </body> | ||
| </html> |
34 changes: 34 additions & 0 deletions
34
LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/grid-inline-start.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> | ||
| <html> | ||
| <head> | ||
| <title>margin-trim: grid-inline-start-001</title> | ||
| <link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-grid"> | ||
| <link rel="match" href="grid-inline-start-001-ref.html"> | ||
| <meta name="assert" content="inline-start should trim inline-start margins of items on first column"> | ||
| <style> | ||
| grid { | ||
| display: inline-grid; | ||
| border: 1px solid black; | ||
| grid-template-columns: auto auto; | ||
| margin-trim: inline-start; | ||
| } | ||
|
|
||
| item { | ||
| display: block; | ||
| background-color: green; | ||
| width: 50px; | ||
| height: 50px; | ||
| margin-inline-start: 10px; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <grid> | ||
| <item></item> | ||
| <item></item> | ||
| <item></item> | ||
| <item></item> | ||
| </grid> | ||
| </body> | ||
| </html> |
38 changes: 38 additions & 0 deletions
38
LayoutTests/imported/w3c/web-platform-tests/css/css-box/margin-trim/grid-inline.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,38 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>margin-trim: grid-inline-001</title> | ||
| <link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-grid"> | ||
| <link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html"> | ||
| <meta name="assert" content="inline should trim inline-start margin of items on first column and inline-end margins of items on last column"> | ||
| <style> | ||
| grid { | ||
| display: inline-grid; | ||
| grid-template-columns: auto auto; | ||
| margin-trim: inline; | ||
| } | ||
| item { | ||
| display: block; | ||
| background-color: green; | ||
| width: 50px; | ||
| height: 50px; | ||
| } | ||
| item:nth-child(odd) { | ||
| margin-inline-start: 10px; | ||
| } | ||
| item:nth-child(even) { | ||
| margin-inline-end: 20px; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <p>Test passes if there is a filled green square.</p> | ||
| <grid> | ||
| <item></item> | ||
| <item></item> | ||
| <item></item> | ||
| <item></item> | ||
| </grid> | ||
| </body> | ||
| </html> |
12 changes: 12 additions & 0 deletions
12
...b-platform-tests/css/css-box/margin-trim/grid-trim-ignores-collapsed-tracks-expected.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,12 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>margin-trim: grid-inline-001</title> | ||
| <link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> | ||
| <meta name="assert" content="should ignore collapsed margins when determining if an edge should be trimmed"> | ||
| </head> | ||
| <body> | ||
| <p>Test passes if there is a filled green square.</p> | ||
| <div style="width:100px; height: 100px; background-color: green;"></div> | ||
| </body> | ||
| </html> |
Oops, something went wrong.