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 | |
| 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')
| -rw-r--r-- | Tests/LibWeb/Layout/expected/grid/row-span-2.txt | 105 | ||||
| -rw-r--r-- | Tests/LibWeb/Layout/input/grid/row-span-2.html | 53 |
2 files changed, 158 insertions, 0 deletions
diff --git a/Tests/LibWeb/Layout/expected/grid/row-span-2.txt b/Tests/LibWeb/Layout/expected/grid/row-span-2.txt new file mode 100644 index 0000000000..fd01a6aba5 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/grid/row-span-2.txt @@ -0,0 +1,105 @@ +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 784x193.375 children: not-inline + Box <div.grid-container> at (8,8) content-size 784x193.375 [GFC] children: not-inline + BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline + TextNode <#text> + BlockContainer <div.grid-item.item-span-one-one> at (401.46875,8) content-size 392x131.296875 [BFC] children: inline + line 0 width: 319.171875, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 1, length: 40, rect: [401.46875,8 319.171875x17.46875] + "In a sollicitudin augue. Sed ante augue," + line 1 width: 335.125, height: 17.9375, bottom: 35.40625, baseline: 13.53125 + frag 0 from TextNode start: 42, length: 42, rect: [401.46875,25 335.125x17.46875] + "rhoncus nec porttitor id, lacinia et nibh." + line 2 width: 378.625, height: 18.40625, bottom: 53.34375, baseline: 13.53125 + frag 0 from TextNode start: 85, length: 48, rect: [401.46875,42 378.625x17.46875] + "Pellentesque diam libero, ultrices eget eleifend" + line 3 width: 182.8125, height: 17.875, bottom: 70.28125, baseline: 13.53125 + frag 0 from TextNode start: 134, length: 22, rect: [401.46875,60 182.8125x17.46875] + "at, consequat ut orci." + TextNode <#text> + BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline + TextNode <#text> + BlockContainer <div.grid-item.item-span-one-two> at (401.46875,139.296875) content-size 392x184.109375 [BFC] children: inline + line 0 width: 359.15625, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 1, length: 43, rect: [401.46875,139.296875 359.15625x17.46875] + "Suspendisse potenti. Pellentesque at varius" + line 1 width: 318.5625, height: 17.9375, bottom: 35.40625, baseline: 13.53125 + frag 0 from TextNode start: 45, length: 41, rect: [401.46875,156.296875 318.5625x17.46875] + "lacus, sed sollicitudin leo. Pellentesque" + line 2 width: 377.640625, height: 18.40625, bottom: 53.34375, baseline: 13.53125 + frag 0 from TextNode start: 87, length: 44, rect: [401.46875,173.296875 377.640625x17.46875] + "malesuada mi eget pellentesque tempor. Donec" + line 3 width: 378.03125, height: 17.875, bottom: 70.28125, baseline: 13.53125 + frag 0 from TextNode start: 132, length: 47, rect: [401.46875,191.296875 378.03125x17.46875] + "egestas mauris est, ut lobortis nisi luctus at." + line 4 width: 345.953125, height: 18.34375, bottom: 88.21875, baseline: 13.53125 + frag 0 from TextNode start: 180, length: 41, rect: [401.46875,208.296875 345.953125x17.46875] + "Vivamus eleifend, lorem vulputate maximus" + line 5 width: 312.765625, height: 17.8125, bottom: 105.15625, baseline: 13.53125 + frag 0 from TextNode start: 222, length: 37, rect: [401.46875,226.296875 312.765625x17.46875] + "porta, nunc metus porttitor nibh, nec" + line 6 width: 242.921875, height: 18.28125, bottom: 123.09375, baseline: 13.53125 + frag 0 from TextNode start: 260, length: 31, rect: [401.46875,243.296875 242.921875x17.46875] + "bibendum nulla lectus ut felis." + TextNode <#text> + BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline + TextNode <#text> + BlockContainer <div.grid-item.item-span-two> at (8,8) content-size 393.46875x315.40625 [BFC] children: inline + line 0 width: 337.6875, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 1, length: 39, rect: [8,8 337.6875x17.46875] + "Lorem ipsum dolor sit amet, consectetur" + line 1 width: 376.34375, height: 17.9375, bottom: 35.40625, baseline: 13.53125 + frag 0 from TextNode start: 41, length: 47, rect: [8,25 376.34375x17.46875] + "adipiscing elit. Sed vitae condimentum erat, ac" + line 2 width: 365.84375, height: 18.40625, bottom: 53.34375, baseline: 13.53125 + frag 0 from TextNode start: 89, length: 45, rect: [8,42 365.84375x17.46875] + "posuere arcu. Aenean tincidunt mi ligula, vel" + line 3 width: 381.96875, height: 17.875, bottom: 70.28125, baseline: 13.53125 + frag 0 from TextNode start: 135, length: 46, rect: [8,60 381.96875x17.46875] + "semper dolor aliquet at. Phasellus scelerisque" + line 4 width: 377.203125, height: 18.34375, bottom: 88.21875, baseline: 13.53125 + frag 0 from TextNode start: 182, length: 45, rect: [8,77 377.203125x17.46875] + "dapibus diam sed rhoncus. Proin sed orci leo." + line 5 width: 375.390625, height: 17.8125, bottom: 105.15625, baseline: 13.53125 + frag 0 from TextNode start: 228, length: 45, rect: [8,95 375.390625x17.46875] + "Praesent pellentesque mi eu nunc gravida, vel" + line 6 width: 383.53125, height: 18.28125, bottom: 123.09375, baseline: 13.53125 + frag 0 from TextNode start: 274, length: 46, rect: [8,112 383.53125x17.46875] + "consectetur nulla malesuada. Sed pellentesque," + line 7 width: 344.8125, height: 17.75, bottom: 140.03125, baseline: 13.53125 + frag 0 from TextNode start: 321, length: 47, rect: [8,130 344.8125x17.46875] + "elit sit amet sollicitudin sollicitudin, lectus" + line 8 width: 374.703125, height: 18.21875, bottom: 157.96875, baseline: 13.53125 + frag 0 from TextNode start: 369, length: 46, rect: [8,147 374.703125x17.46875] + "justo facilisis lacus, ac vehicula metus neque" + line 9 width: 384.125, height: 17.6875, bottom: 174.90625, baseline: 13.53125 + frag 0 from TextNode start: 416, length: 45, rect: [8,165 384.125x17.46875] + "ac mi. In in augue et massa maximus venenatis" + line 10 width: 373.25, height: 18.15625, bottom: 192.84375, baseline: 13.53125 + frag 0 from TextNode start: 462, length: 44, rect: [8,182 373.25x17.46875] + "auctor fermentum dui. Aliquam dictum finibus" + line 11 width: 288.203125, height: 17.625, bottom: 209.78125, baseline: 13.53125 + frag 0 from TextNode start: 507, length: 35, rect: [8,200 288.203125x17.46875] + "urna, quis lacinia massa laoreet a." + line 12 width: 316.296875, height: 18.09375, bottom: 227.71875, baseline: 13.53125 + frag 0 from TextNode start: 543, length: 36, rect: [8,217 316.296875x17.46875] + "Suspendisse elementum non lectus nec" + line 13 width: 388.78125, height: 17.5625, bottom: 244.65625, baseline: 13.53125 + frag 0 from TextNode start: 580, length: 48, rect: [8,235 388.78125x17.46875] + "elementum. Quisque ultricies suscipit porttitor." + line 14 width: 373.828125, height: 18.03125, bottom: 262.59375, baseline: 13.53125 + frag 0 from TextNode start: 629, length: 45, rect: [8,252 373.828125x17.46875] + "Sed non urna rutrum, mattis nulla at, feugiat" + line 15 width: 368.75, height: 17.5, bottom: 279.53125, baseline: 13.53125 + frag 0 from TextNode start: 675, length: 48, rect: [8,270 368.75x17.46875] + "erat. Duis orci elit, vehicula sed blandit eget," + line 16 width: 390.625, height: 17.96875, bottom: 297.46875, baseline: 13.53125 + frag 0 from TextNode start: 724, length: 46, rect: [8,287 390.625x17.46875] + "auctor in arcu. Ut cursus magna sit amet nulla" + line 17 width: 294.90625, height: 18.4375, bottom: 315.40625, baseline: 13.53125 + frag 0 from TextNode start: 771, length: 36, rect: [8,304 294.90625x17.46875] + "cursus, vitae gravida mauris dictum." + TextNode <#text> + BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline + TextNode <#text> 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 |