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

LibWeb: Consider span > 1 while getting available space for items in GFC

Browse source
This commit is contained in:
Aliaksandr Kalenik 2023-05-17 12:33:22 +03:00 • committed by Andreas Kling
parent 79e76ae64c
commit 628efda754
3 changed files with 72 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

21
Tests/LibWeb/Layout/expected/grid/item-column-span-2.txt Normal file
View file

@ -0,0 +1,21 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x35.40625 children: not-inline
Box <div.container> at (8,8) content-size 784x35.40625 [GFC] children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
TextNode <#text>
BlockContainer <div.item-left> at (8,8) content-size 100x35.40625 [BFC] children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
TextNode <#text>
BlockContainer <div.item-right> at (108.000061,8) content-size 683.999938x35.40625 [BFC] children: inline
line 0 width: 625.953125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 77, rect: [108.000061,8 625.953125x17.46875]
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis venenatis"
line 1 width: 304.0625, height: 17.9375, bottom: 35.40625, baseline: 13.53125
frag 0 from TextNode start: 78, length: 39, rect: [108.000061,25 304.0625x17.46875]
"purus, eget blandit velit venenatis at."
TextNode <#text>
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,43.40625) content-size 784x0 children: inline
TextNode <#text>

21
Tests/LibWeb/Layout/input/grid/item-column-span-2.html Normal file
View file

@ -0,0 +1,21 @@
<style>
.container {
display: grid;
grid-template-columns: auto 0 minmax(0, calc(100%));
background-color: red;
}
.item-left {
grid-column: 1;
width: 100px;
background-color: blueviolet;
}
.item-right {
grid-column: 2 / span 2;
}
</style>
<div class="container">
<div class="item-left"></div>
<div class="item-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis venenatis purus, eget blandit velit venenatis at.</div>
</div>