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

LibWeb: Start implementing sizing for tracks with span > 1 items in GFC

Browse source 
Partially implements:
- Increase sizes to accommodate spanning items crossing content-sized
  tracks
- Increase sizes to accommodate spanning items crossing flexible tracks

from https://www.w3.org/TR/css-grid-2/#algo-content
This commit is contained in:
Aliaksandr Kalenik 2023-05-14 19:16:26 +03:00 • committed by Andreas Kling
parent 7a5603052a
commit 87a7299078
4 changed files with 305 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

53
Tests/LibWeb/Layout/input/grid/row-span-2.html Normal file
View file

@ -0,0 +1,53 @@
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto;
grid-template-rows: auto auto;
}
.item-span-one-one {
background-color: lightpink;
grid-row: 1 / span 1;
grid-column: 2;
}
.item-span-one-two {
background-color: lightgreen;
grid-row: 2 / span 1;
grid-column: 2;
}
.item-span-two {
background-color: lightskyblue;
grid-row: 1 / span 2;
grid-column: 1;
}
</style>
<div class="grid-container">
<div class="grid-item item-span-one-one">
In a sollicitudin augue. Sed ante augue, rhoncus nec porttitor id,
lacinia et nibh. Pellentesque diam libero, ultrices eget eleifend at,
consequat ut orci.
</div>
<div class="grid-item item-span-one-two">
Suspendisse potenti. Pellentesque at varius lacus, sed sollicitudin leo.
Pellentesque malesuada mi eget pellentesque tempor. Donec egestas mauris
est, ut lobortis nisi luctus at. Vivamus eleifend, lorem vulputate
maximus porta, nunc metus porttitor nibh, nec bibendum nulla lectus ut
felis.
</div>
<div class="grid-item item-span-two">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae
condimentum erat, ac posuere arcu. Aenean tincidunt mi ligula, vel
semper dolor aliquet at. Phasellus scelerisque dapibus diam sed rhoncus.
Proin sed orci leo. Praesent pellentesque mi eu nunc gravida, vel
consectetur nulla malesuada. Sed pellentesque, elit sit amet
sollicitudin sollicitudin, lectus justo facilisis lacus, ac vehicula
metus neque ac mi. In in augue et massa maximus venenatis auctor
fermentum dui. Aliquam dictum finibus urna, quis lacinia massa laoreet
a. Suspendisse elementum non lectus nec elementum. Quisque ultricies
suscipit porttitor. Sed non urna rutrum, mattis nulla at, feugiat erat.
Duis orci elit, vehicula sed blandit eget, auctor in arcu. Ut cursus
magna sit amet nulla cursus, vitae gravida mauris dictum.
</div>
</div>