Skip to content

Commit

Permalink
[GridFragmentation] Add MinSizeShouldEncompassIntrinsicSize.
Browse files Browse the repository at this point in the history 
This flag will allow us to ensure we don't have content overflow, even
if we have a stretch block-size applied to a grid-item.

This will be used to "expand" the grid row according to:
https://drafts.csswg.org/css-grid-1/#fragmentation-alg
if required.

Bug: 614667
Change-Id: I9d045996698a22ca8205296e8b16601288e63c53
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3246331
Commit-Queue: Ian Kilpatrick <[email protected]>
Reviewed-by: Kurt Catti-Schmidt <[email protected]>
Reviewed-by: Morten Stenshorne <[email protected]>
Reviewed-by: Alison Maher <[email protected]>
Cr-Commit-Position: refs/heads/main@{#937958}
  • Loading branch information
@bfgeek @chromium-wpt-export-bot
bfgeek authored and chromium-wpt-export-bot committed Nov 3, 2021
1 parent 8e0e52c commit 8ea569e
Show file tree
Hide file tree
Showing 8 changed files with 107 additions and 0 deletions.
13 changes: 13 additions & 0 deletions css/css-break/grid/grid-item-fragmentation-010.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<title>Tests that a grid-item with a min-content min-track grows due to fragmentation.</title>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;">
<div style="display: grid; grid-template-rows: minmax(min-content, 10px);">
<div style="line-height: 0; background: green;"> <!-- Spans an min-content min row. -->
<div style="display: inline-block; width: 50px; height: 50px;"></div>
<div style="display: inline-block; width: 50px; height: 100px;"></div>
</div>
</div>
</div>
13 changes: 13 additions & 0 deletions css/css-break/grid/grid-item-fragmentation-011.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<title>Tests that a grid-item with auto track(s) grows due to fragmentation.</title>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;">
<div style="display: grid; grid-template-rows: auto;">
<div style="line-height: 0; background: green;">
<div style="display: inline-block; width: 50px; height: 50px;"></div>
<div style="display: inline-block; width: 50px; height: 100px;"></div>
</div>
</div>
</div>
13 changes: 13 additions & 0 deletions css/css-break/grid/grid-item-fragmentation-012.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<title>Tests that a grid-item with a flexible track grows due to fragmentation.</title>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;">
<div style="display: grid; grid-template-rows: 1fr;">
<div style="line-height: 0; background: green;">
<div style="display: inline-block; width: 50px; height: 50px;"></div>
<div style="display: inline-block; width: 50px; height: 100px;"></div>
</div>
</div>
</div>
13 changes: 13 additions & 0 deletions css/css-break/grid/grid-item-fragmentation-013.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<title>Tests that a grid-item with a minmax(0, auto) track inside an auto-grid grows due to fragmentation.</title>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;">
<div style="display: grid; grid-template-rows: minmax(0, auto);">
<div style="line-height: 0; background: green;">
<div style="display: inline-block; width: 50px; height: 50px;"></div>
<div style="display: inline-block; width: 50px; height: 100px;"></div>
</div>
</div>
</div>
14 changes: 14 additions & 0 deletions css/css-break/grid/grid-item-fragmentation-014.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<title>Tests that a grid-item with a minmax(0, auto) track inside a non-auto-grid *doesn't* grow due to fragmentation.</title>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;">
<div style="display: grid; height: 200px; grid-template-rows: minmax(0, auto);">
<div style="line-height: 0; background: green;">
<div style="display: inline-block; width: 50px; height: 50px;"></div>
<div style="display: inline-block; width: 50px; height: 100px;"></div>
<div style="display: inline-block; width: 50px; height: 100px;"></div>
</div>
</div>
</div>
13 changes: 13 additions & 0 deletions css/css-break/grid/grid-item-fragmentation-015.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<title>Tests that a grid-item with a minmax(0, 1fr) track inside an auto-grid grows due to fragmentation.</title>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;">
<div style="display: grid; grid-template-rows: minmax(0, 1fr);">
<div style="line-height: 0; background: green;">
<div style="display: inline-block; width: 50px; height: 50px;"></div>
<div style="display: inline-block; width: 50px; height: 100px;"></div>
</div>
</div>
</div>
14 changes: 14 additions & 0 deletions css/css-break/grid/grid-item-fragmentation-016.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<title>Tests that a grid-item with a minmax(0, 1fr) track inside a non-auto-grid *doesn't* grow due to fragmentation.</title>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;">
<div style="display: grid; height: 200px; grid-template-rows: minmax(0, 1fr);">
<div style="line-height: 0; background: green;">
<div style="display: inline-block; width: 50px; height: 50px;"></div>
<div style="display: inline-block; width: 50px; height: 100px;"></div>
<div style="display: inline-block; width: 50px; height: 100px;"></div>
</div>
</div>
</div>
14 changes: 14 additions & 0 deletions css/css-break/grid/grid-item-fragmentation-017.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<title>Tests that a grid-item with a fixed track *doesn't* grow due to fragmentation.</title>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;">
<div style="display: grid; grid-template-rows: 200px;">
<div style="line-height: 0; background: green;">
<div style="display: inline-block; width: 50px; height: 50px;"></div>
<div style="display: inline-block; width: 50px; height: 100px;"></div>
<div style="display: inline-block; width: 50px; height: 100px;"></div>
</div>
</div>
</div>

0 comments on commit 8ea569e

Please sign in to comment.