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

LibWeb: Account for gap in auto-fill columns count calculation in GFC

Browse source 
Fixes https://github.com/SerenityOS/serenity/issues/22603
This commit is contained in:
Aliaksandr Kalenik 2024-01-05 21:04:22 +01:00 • committed by Andreas Kling
parent f0288e7f94
commit 90142ad307
3 changed files with 37 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

13
Tests/LibWeb/Layout/expected/grid/columns-auto-fill-with-gap.txt Normal file
View file

@ -0,0 +1,13 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x200 [BFC] children: not-inline
BlockContainer <body> at (0,0) content-size 470x200 children: not-inline
Box <div.grid> at (0,0) content-size 470x200 [GFC] children: not-inline
BlockContainer <div.item> at (0,0) content-size 470x100 [BFC] children: not-inline
BlockContainer <div.item> at (0,100) content-size 470x100 [BFC] children: not-inline
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x200]
PaintableWithLines (BlockContainer<BODY>) [0,0 470x200]
PaintableBox (Box<DIV>.grid) [0,0 470x200]
PaintableWithLines (BlockContainer<DIV>.item) [0,0 470x100]
PaintableWithLines (BlockContainer<DIV>.item) [0,100 470x100]

20
Tests/LibWeb/Layout/input/grid/columns-auto-fill-with-gap.html Normal file
View file

@ -0,0 +1,20 @@
<!doctype html><style>
* {
margin: 0px;
box-sizing: border-box;
outline: 1px solid black;
}
body {
width: 470px;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
column-gap: 150px;
background: pink;
}
.item {
height: 100px;
background: orange;
}
</style><body><div class="grid"><div class="item"></div><div class="item"></div>