RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-05-31 23:58:11 +00:00
Code Issues Activity Actions

LibWeb+Base: Fix row-height bug in Grid when there is a column gap

Browse source 
This fixes a bug in the CSS Grid when there is a column and/or row gap,
as previously it would take the index of the incorrect column when
finding the `AvailableSize`.

There is a mild complication in the GridFormattingContext as the
OccupationGrid does not take into account the gap columns and rows that
later appear in the `Vector<TemporaryTrack>` columns and rows. The
PositionedBoxes are kind of a connection between the two, and so it's
now more explicit whether you would like to refer to a column by its
position taking into the gap columns/rows or not.
This commit is contained in:
Tom 2023-03-10 17:40:24 +01:00 • committed by Andreas Kling
parent da861fe7af
commit 52e45fb6fa
3 changed files with 84 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

14
Base/res/html/misc/display-grid.html
View file

@ -6,8 +6,13 @@
.grid-item {
background-color: lightblue;
}
.with-border {
border: 1px solid black;
}
</style>
<body style="margin-bottom: 2rem;">
<!-- A basic grid -->
<p>Should render a 2x2 grid</p>
<div
@ -588,3 +593,12 @@ class="grid-container"
<div class="grid-item" style="grid-area: two;">max-content</div>
<div class="grid-item" style="grid-area: three;">1fr</div>
</div>
<p>Bug with column gaps - grid items should have normal height</p>
<div class="grid-container with-border" style="
grid-column-gap: 10px;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
">
<div class="grid-item with-border">left side text</div>
<div class="grid-item with-border">right side text right side text right side text</div>
</div>