diff options
author | Aliaksandr Kalenik <kalenik.aliaksandr@gmail.com> | 2023-05-14 19:16:26 +0300 |
---|---|---|
committer | Andreas Kling <kling@serenityos.org> | 2023-05-14 19:32:34 +0200 |
commit | 87a7299078fe563b3e49f15994ee697b89d380a2 (patch) | |
tree | 715b87809187b60324b024d601f18901dc8b4cc3 /Tests/LibWeb/Layout/input | |
parent | 7a5603052a3ed21f6830fbce396deb1555259c8a (diff) | |
download | serenity-87a7299078fe563b3e49f15994ee697b89d380a2.zip |
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
Diffstat (limited to 'Tests/LibWeb/Layout/input')
-rw-r--r-- | Tests/LibWeb/Layout/input/grid/row-span-2.html | 53 |
1 files changed, 53 insertions, 0 deletions
diff --git a/Tests/LibWeb/Layout/input/grid/row-span-2.html b/Tests/LibWeb/Layout/input/grid/row-span-2.html new file mode 100644 index 0000000000..1ebede8ea1 --- /dev/null +++ b/Tests/LibWeb/Layout/input/grid/row-span-2.html @@ -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>
\ No newline at end of file |