mirror of
https://github.com/RGBCube/serenity
synced 2025-07-27 22:57:44 +00:00
LibWeb: Start implementing sizing for tracks with span > 1 items in GFC
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:
parent
7a5603052a
commit
87a7299078
4 changed files with 305 additions and 45 deletions
53
Tests/LibWeb/Layout/input/grid/row-span-2.html
Normal file
53
Tests/LibWeb/Layout/input/grid/row-span-2.html
Normal 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>
|
Loading…
Add table
Add a link
Reference in a new issue