Skip to content

Commit 63c2a61

Browse files
Sam Davis Omekarachromium-wpt-export-bot
Sam Davis Omekara
authored and
chromium-wpt-export-bot
committed
[Gap Decorations]: Refactor GapAccumulator design in Grid
This CL refactors the `GapAccumulator` class to improve its design as suggested in [1]. The main change is the removal of the `GapGeometry` object as a member. Instead of initializing a `GapGeometry` member on construction, its creation is now deferred until its actually needed (i.e. in the `BuildGapGeometry()` method). To support this, four members are added: {column}{row}_intersections and {col}{row}_gutter_size. These are populated during the layout algorithm. As part of this shift, `MarkGapIntersectionBlocked` has been moved from the `GapGeometry` class to `GapAccumulator`. This refactor also resolves two bugs: 1.) Creation of a GapGeometry with empty rows or columns. 2.) Use of gap intersection points when the gap property is not specified. Both issues are addressed in `BuildGapGeometry`, where we now: * Return nullptr if no intersection points were constructed. * Set intersection points only when the corresponding gutter size is greater than zero. [1]: https://chromium-review.googlesource.com/c/chromium/src/+/6460775/comment/5252c3a9_0b6876ac/ Fixed: 420421606 Fixed: 420421605 Bug: 393631108 Change-Id: I796cf3e2630a30c02f12ffcba32b411ebd876373 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6593336 Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Commit-Queue: Sam Davis Omekara <samomekarajr@microsoft.com> Reviewed-by: Kurt Catti-Schmidt <kschmi@microsoft.com> Cr-Commit-Position: refs/heads/main@{#1467138}
1 parent 0fd8fdc commit 63c2a61

3 files changed

Lines changed: 80 additions & 0 deletions

File tree

‎css/css-gaps/grid/grid-gap-decorations-041-crash.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<title>
3+
CSS Gap Decorations: Renderer doesn't crash when gap decorations is used on grid with no rows/columns.
4+
</title>
5+
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
6+
<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com">
7+
<style>
8+
.grid-container {
9+
display: grid;
10+
11+
column-rule: solid blue;
12+
row-rule: dotted red;
13+
}
14+
</style>
15+
16+
<div class="grid-container"></div>

‎css/css-gaps/grid/grid-gap-decorations-042-ref.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
3+
<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com">
4+
<style>
5+
.grid-container {
6+
display: grid;
7+
grid-template-columns: repeat(4, 1fr);
8+
width: 430px;
9+
height: 430px;
10+
}
11+
12+
.grid-item {
13+
background-color: gray;
14+
opacity: 0.5;
15+
border: 1px solid #000;
16+
}
17+
</style>
18+
19+
<div class="grid-container">
20+
<div class="grid-item" style="grid-column: 1 / 3; grid-row: 1 / 2;"></div>
21+
<div class="grid-item" style="grid-column: 3 / 4; grid-row: 1 / 3;"></div>
22+
<div class="grid-item" style="grid-row: 2 / 4;"></div>
23+
<div class="grid-item" style="grid-column: 2 / 4; grid-row: 3 / 4;"></div>
24+
<div class="grid-item" style="grid-column: 2 / 3; grid-row: 2 / 3;"></div>
25+
<div class="grid-item" style="grid-column: 4 / 5; grid-row: 1 / 4;"></div>
26+
<div class="grid-item" style="grid-column: 1 / 4; grid-row: 4 / 5;"></div>
27+
<div class="grid-item" style="grid-column: 4 / 5; grid-row: 4 / 5;"></div>
28+
</div>

‎css/css-gaps/grid/grid-gap-decorations-042.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<title>
3+
CSS Gap Decorations: gap decorations are not painted when there are no gaps.
4+
</title>
5+
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
6+
<link rel="match" href="grid-gap-decorations-042-ref.html">
7+
<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com">
8+
<style>
9+
.grid-container {
10+
display: grid;
11+
grid-template-columns: repeat(4, 1fr);
12+
13+
width: 430px;
14+
height: 430px;
15+
16+
column-rule: 5px solid blue;
17+
row-rule: 5px dotted red;
18+
}
19+
20+
.grid-item {
21+
background-color: gray;
22+
opacity: 0.5;
23+
border: 1px solid #000;
24+
}
25+
26+
</style>
27+
<div class="grid-container">
28+
<div class="grid-item" style="grid-column: 1 / 3; grid-row: 1 / 2;"></div>
29+
<div class="grid-item" style="grid-column: 3 / 4; grid-row: 1 / 3;"></div>
30+
<div class="grid-item" style="grid-row: 2 / 4;"></div>
31+
<div class="grid-item" style="grid-column: 2 / 4; grid-row: 3 / 4;"></div>
32+
<div class="grid-item" style="grid-column: 2 / 3; grid-row: 2 / 3;"></div>
33+
<div class="grid-item" style="grid-column: 4 / 5; grid-row: 1 / 4;"></div>
34+
<div class="grid-item" style="grid-column: 1 / 4; grid-row: 4 / 5;"></div>
35+
<div class="grid-item" style="grid-column: 4 / 5; grid-row: 4 / 5;"></div>
36+
</div>

0 commit comments

Comments
 (0)