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

LibWeb: Implement more of spanning tracks sizing in GFC

Browse source 
Implements more parts of sizing algorithm for tracks with spanning
items to archive parity with implementation for sizing of tracks
with non-spanning items.
This commit is contained in:
Aliaksandr Kalenik 2023-05-20 17:46:21 +03:00 • committed by Andreas Kling
parent 943ecaede6
commit 409333d80a
6 changed files with 554 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -0,0 +1,53 @@
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto;
grid-template-rows: max-content max-content;
}
.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>

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

@ -0,0 +1,43 @@
<style>
.grid-container {
display: grid;
grid-template-columns: min-content min-content;
grid-template-rows: min-content min-content;
}
.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.
</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.
</div>
</div>