RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 04:37:34 +00:00
Code Issues Activity Actions

LibWeb: Fix grid line name placement when repeat() is used

Browse source 
Before this change, parsed grid-template-columns/grid-template-rows
were represented as two lists: line names and track sizes. The problem
with this approach is that it erases the relationship between tracks
and their names, which results in unnecessarily complicated code that
restores this data (incorrectly if repeat() is involved) during layout.
This change solves that by representing line definitions as a list of
sizes and names in the order they were defined.

Visual progression https://genius.com/
This commit is contained in:
Aliaksandr Kalenik 2024-01-05 04:24:36 +01:00 • committed by Andreas Kling
parent c4d75ac11a
commit cfcc459140
7 changed files with 168 additions and 104 deletions
Download patch file Download diff file Expand all files Collapse all files

18
Tests/LibWeb/Layout/expected/grid/line-placement-with-repeat.txt Normal file
View file

@ -0,0 +1,18 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x33.46875 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x17.46875 children: not-inline
Box <div.container> at (8,8) content-size 784x17.46875 [GFC] children: not-inline
BlockContainer <div.item> at (8,8) content-size 480x17.46875 [BFC] children: not-inline
BlockContainer <div.box> at (8,8) content-size 480x17.46875 children: inline
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [8,8 6.34375x17.46875]
"1"
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x33.46875]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x17.46875]
PaintableBox (Box<DIV>.container) [8,8 784x17.46875]
PaintableWithLines (BlockContainer<DIV>.item) [8,8 480x17.46875]
PaintableWithLines (BlockContainer<DIV>.box) [8,8 480x17.46875]
TextPaintable (TextNode<#text>)

14
Tests/LibWeb/Layout/input/grid/line-placement-with-repeat.html Normal file
View file

@ -0,0 +1,14 @@
<!DOCTYPE html><html><style type="text/css">
.container {
display: grid;
grid-template-columns: [grid-start] repeat(12, 40px) [grid-end];
background: pink;
}
.item {
grid-column: grid-start / grid-end;
}
.box {
width: 100%;
outline: 5px solid black;
}
</style><div class="container"><div class="item"><div class="box">1</div></div>