mirror of
https://github.com/RGBCube/serenity
synced 2025-07-27 10:47:35 +00:00
LibWeb: Implement more of spanning tracks sizing in GFC
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
Andreas Kling
parent
943ecaede6
commit
409333d80a
6 changed files with 554 additions and 21 deletions
105
Tests/LibWeb/Layout/expected/grid/row-span-2-maxcontent.txt
Normal file
105
Tests/LibWeb/Layout/expected/grid/row-span-2-maxcontent.txt
Normal file
|
|
@ -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 784x315.40625 children: not-inline
|
||||
Box <div.grid-container> at (8,8) content-size 784x315.40625 [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>
|
||||
186
Tests/LibWeb/Layout/expected/grid/row-span-2-mincontent.txt
Normal file
186
Tests/LibWeb/Layout/expected/grid/row-span-2-mincontent.txt
Normal file
|
|
@ -0,0 +1,186 @@
|
|||
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 784x560.0625 children: not-inline
|
||||
Box <div.grid-container> at (8,8) content-size 784x560.0625 [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 (108.640625,8) content-size 101.515625x244.65625 [BFC] children: inline
|
||||
line 0 width: 31.546875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 1, length: 4, rect: [108.640625,8 31.546875x17.46875]
|
||||
"In a"
|
||||
line 1 width: 84.84375, height: 17.9375, bottom: 35.40625, baseline: 13.53125
|
||||
frag 0 from TextNode start: 6, length: 12, rect: [108.640625,25 84.84375x17.46875]
|
||||
"sollicitudin"
|
||||
line 2 width: 86.046875, height: 18.40625, bottom: 53.34375, baseline: 13.53125
|
||||
frag 0 from TextNode start: 19, length: 10, rect: [108.640625,42 86.046875x17.46875]
|
||||
"augue. Sed"
|
||||
line 3 width: 92.734375, height: 17.875, bottom: 70.28125, baseline: 13.53125
|
||||
frag 0 from TextNode start: 30, length: 11, rect: [108.640625,60 92.734375x17.46875]
|
||||
"ante augue,"
|
||||
line 4 width: 101.3125, height: 18.34375, bottom: 88.21875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 42, length: 11, rect: [108.640625,77 101.3125x17.46875]
|
||||
"rhoncus nec"
|
||||
line 5 width: 98.40625, height: 17.8125, bottom: 105.15625, baseline: 13.53125
|
||||
frag 0 from TextNode start: 54, length: 13, rect: [108.640625,95 98.40625x17.46875]
|
||||
"porttitor id,"
|
||||
line 6 width: 74.125, height: 18.28125, bottom: 123.09375, baseline: 13.53125
|
||||
frag 0 from TextNode start: 68, length: 10, rect: [108.640625,112 74.125x17.46875]
|
||||
"lacinia et"
|
||||
line 7 width: 37.28125, height: 17.75, bottom: 140.03125, baseline: 13.53125
|
||||
frag 0 from TextNode start: 79, length: 5, rect: [108.640625,130 37.28125x17.46875]
|
||||
"nibh."
|
||||
line 8 width: 101.515625, height: 18.21875, bottom: 157.96875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 85, length: 12, rect: [108.640625,147 101.515625x17.46875]
|
||||
"Pellentesque"
|
||||
line 9 width: 93.1875, height: 17.6875, bottom: 174.90625, baseline: 13.53125
|
||||
frag 0 from TextNode start: 98, length: 12, rect: [108.640625,165 93.1875x17.46875]
|
||||
"diam libero,"
|
||||
line 10 width: 101.0625, height: 18.15625, bottom: 192.84375, baseline: 13.53125
|
||||
frag 0 from TextNode start: 111, length: 13, rect: [108.640625,182 101.0625x17.46875]
|
||||
"ultrices eget"
|
||||
line 11 width: 88.109375, height: 17.625, bottom: 209.78125, baseline: 13.53125
|
||||
frag 0 from TextNode start: 125, length: 12, rect: [108.640625,200 88.109375x17.46875]
|
||||
"eleifend at,"
|
||||
line 12 width: 83.953125, height: 18.09375, bottom: 227.71875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 138, length: 9, rect: [108.640625,217 83.953125x17.46875]
|
||||
"consequat"
|
||||
line 13 width: 61.609375, height: 17.5625, bottom: 244.65625, baseline: 13.53125
|
||||
frag 0 from TextNode start: 148, length: 8, rect: [108.640625,235 61.609375x17.46875]
|
||||
"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 (108.640625,252.65625) content-size 101.515625x315.40625 [BFC] children: inline
|
||||
line 0 width: 98.65625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 1, length: 11, rect: [108.640625,252.65625 98.65625x17.46875]
|
||||
"Suspendisse"
|
||||
line 1 width: 60.734375, height: 17.9375, bottom: 35.40625, baseline: 13.53125
|
||||
frag 0 from TextNode start: 13, length: 8, rect: [108.640625,269.65625 60.734375x17.46875]
|
||||
"potenti."
|
||||
line 2 width: 101.515625, height: 18.40625, bottom: 53.34375, baseline: 13.53125
|
||||
frag 0 from TextNode start: 22, length: 12, rect: [108.640625,286.65625 101.515625x17.46875]
|
||||
"Pellentesque"
|
||||
line 3 width: 74.25, height: 17.875, bottom: 70.28125, baseline: 13.53125
|
||||
frag 0 from TextNode start: 35, length: 9, rect: [108.640625,304.65625 74.25x17.46875]
|
||||
"at varius"
|
||||
line 4 width: 80.546875, height: 18.34375, bottom: 88.21875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 45, length: 10, rect: [108.640625,321.65625 80.546875x17.46875]
|
||||
"lacus, sed"
|
||||
line 5 width: 84.84375, height: 17.8125, bottom: 105.15625, baseline: 13.53125
|
||||
frag 0 from TextNode start: 56, length: 12, rect: [108.640625,339.65625 84.84375x17.46875]
|
||||
"sollicitudin"
|
||||
line 6 width: 27.65625, height: 18.28125, bottom: 123.09375, baseline: 13.53125
|
||||
frag 0 from TextNode start: 69, length: 4, rect: [108.640625,356.65625 27.65625x17.46875]
|
||||
"leo."
|
||||
line 7 width: 101.515625, height: 17.75, bottom: 140.03125, baseline: 13.53125
|
||||
frag 0 from TextNode start: 74, length: 12, rect: [108.640625,374.65625 101.515625x17.46875]
|
||||
"Pellentesque"
|
||||
line 8 width: 80.15625, height: 18.21875, bottom: 157.96875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 87, length: 9, rect: [108.640625,391.65625 80.15625x17.46875]
|
||||
"malesuada"
|
||||
line 9 width: 56.625, height: 17.6875, bottom: 174.90625, baseline: 13.53125
|
||||
frag 0 from TextNode start: 97, length: 7, rect: [108.640625,409.65625 56.625x17.46875]
|
||||
"mi eget"
|
||||
line 10 width: 99.40625, height: 18.15625, bottom: 192.84375, baseline: 13.53125
|
||||
frag 0 from TextNode start: 105, length: 12, rect: [108.640625,426.65625 99.40625x17.46875]
|
||||
"pellentesque"
|
||||
line 11 width: 60.734375, height: 17.625, bottom: 209.78125, baseline: 13.53125
|
||||
frag 0 from TextNode start: 118, length: 7, rect: [108.640625,444.65625 60.734375x17.46875]
|
||||
"tempor."
|
||||
line 12 width: 48.71875, height: 18.09375, bottom: 227.71875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 126, length: 5, rect: [108.640625,461.65625 48.71875x17.46875]
|
||||
"Donec"
|
||||
line 13 width: 59.890625, height: 17.5625, bottom: 244.65625, baseline: 13.53125
|
||||
frag 0 from TextNode start: 132, length: 7, rect: [108.640625,479.65625 59.890625x17.46875]
|
||||
"egestas"
|
||||
line 14 width: 92.015625, height: 18.03125, bottom: 262.59375, baseline: 13.53125
|
||||
frag 0 from TextNode start: 140, length: 11, rect: [108.640625,496.65625 92.015625x17.46875]
|
||||
"mauris est,"
|
||||
line 15 width: 88.640625, height: 17.5, bottom: 279.53125, baseline: 13.53125
|
||||
frag 0 from TextNode start: 152, length: 11, rect: [108.640625,514.65625 88.640625x17.46875]
|
||||
"ut lobortis"
|
||||
line 16 width: 84.9375, height: 17.96875, bottom: 297.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 164, length: 11, rect: [108.640625,531.65625 84.9375x17.46875]
|
||||
"nisi luctus"
|
||||
line 17 width: 20.546875, height: 18.4375, bottom: 315.40625, baseline: 13.53125
|
||||
frag 0 from TextNode start: 176, length: 3, rect: [108.640625,548.65625 20.546875x17.46875]
|
||||
"at."
|
||||
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 100.640625x560.0625 [BFC] children: inline
|
||||
line 0 width: 50.96875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 1, length: 5, rect: [8,8 50.96875x17.46875]
|
||||
"Lorem"
|
||||
line 1 width: 94.9375, height: 17.9375, bottom: 35.40625, baseline: 13.53125
|
||||
frag 0 from TextNode start: 7, length: 11, rect: [8,25 94.9375x17.46875]
|
||||
"ipsum dolor"
|
||||
line 2 width: 70.9375, height: 18.40625, bottom: 53.34375, baseline: 13.53125
|
||||
frag 0 from TextNode start: 19, length: 9, rect: [8,42 70.9375x17.46875]
|
||||
"sit amet,"
|
||||
line 3 width: 96.84375, height: 17.875, bottom: 70.28125, baseline: 13.53125
|
||||
frag 0 from TextNode start: 29, length: 11, rect: [8,60 96.84375x17.46875]
|
||||
"consectetur"
|
||||
line 4 width: 75.71875, height: 18.34375, bottom: 88.21875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 41, length: 10, rect: [8,77 75.71875x17.46875]
|
||||
"adipiscing"
|
||||
line 5 width: 65.265625, height: 17.8125, bottom: 105.15625, baseline: 13.53125
|
||||
frag 0 from TextNode start: 52, length: 9, rect: [8,95 65.265625x17.46875]
|
||||
"elit. Sed"
|
||||
line 6 width: 37.6875, height: 18.28125, bottom: 123.09375, baseline: 13.53125
|
||||
frag 0 from TextNode start: 62, length: 5, rect: [8,112 37.6875x17.46875]
|
||||
"vitae"
|
||||
line 7 width: 100.640625, height: 17.75, bottom: 140.03125, baseline: 13.53125
|
||||
frag 0 from TextNode start: 68, length: 11, rect: [8,130 100.640625x17.46875]
|
||||
"condimentum"
|
||||
line 8 width: 65.03125, height: 18.21875, bottom: 157.96875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 80, length: 8, rect: [8,147 65.03125x17.46875]
|
||||
"erat, ac"
|
||||
line 9 width: 65.15625, height: 17.6875, bottom: 174.90625, baseline: 13.53125
|
||||
frag 0 from TextNode start: 89, length: 7, rect: [8,165 65.15625x17.46875]
|
||||
"posuere"
|
||||
line 10 width: 41.171875, height: 18.15625, bottom: 192.84375, baseline: 13.53125
|
||||
frag 0 from TextNode start: 97, length: 5, rect: [8,182 41.171875x17.46875]
|
||||
"arcu."
|
||||
line 11 width: 60.265625, height: 17.625, bottom: 209.78125, baseline: 13.53125
|
||||
frag 0 from TextNode start: 103, length: 6, rect: [8,200 60.265625x17.46875]
|
||||
"Aenean"
|
||||
line 12 width: 93.34375, height: 18.09375, bottom: 227.71875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 110, length: 12, rect: [8,217 93.34375x17.46875]
|
||||
"tincidunt mi"
|
||||
line 13 width: 73.90625, height: 17.5625, bottom: 244.65625, baseline: 13.53125
|
||||
frag 0 from TextNode start: 123, length: 11, rect: [8,235 73.90625x17.46875]
|
||||
"ligula, vel"
|
||||
line 14 width: 57.234375, height: 18.03125, bottom: 262.59375, baseline: 13.53125
|
||||
frag 0 from TextNode start: 135, length: 6, rect: [8,252 57.234375x17.46875]
|
||||
"semper"
|
||||
line 15 width: 41.640625, height: 17.5, bottom: 279.53125, baseline: 13.53125
|
||||
frag 0 from TextNode start: 142, length: 5, rect: [8,270 41.640625x17.46875]
|
||||
"dolor"
|
||||
line 16 width: 83.09375, height: 17.96875, bottom: 297.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 148, length: 11, rect: [8,287 83.09375x17.46875]
|
||||
"aliquet at."
|
||||
line 17 width: 75.8125, height: 18.4375, bottom: 315.40625, baseline: 13.53125
|
||||
frag 0 from TextNode start: 160, length: 9, rect: [8,304 75.8125x17.46875]
|
||||
"Phasellus"
|
||||
line 18 width: 92.1875, height: 17.90625, bottom: 332.34375, baseline: 13.53125
|
||||
frag 0 from TextNode start: 170, length: 11, rect: [8,322 92.1875x17.46875]
|
||||
"scelerisque"
|
||||
line 19 width: 59.765625, height: 18.375, bottom: 350.28125, baseline: 13.53125
|
||||
frag 0 from TextNode start: 182, length: 7, rect: [8,339 59.765625x17.46875]
|
||||
"dapibus"
|
||||
line 20 width: 67.890625, height: 17.84375, bottom: 367.21875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 190, length: 8, rect: [8,357 67.890625x17.46875]
|
||||
"diam sed"
|
||||
line 21 width: 70.4375, height: 18.3125, bottom: 385.15625, baseline: 13.53125
|
||||
frag 0 from TextNode start: 199, length: 8, rect: [8,374 70.4375x17.46875]
|
||||
"rhoncus."
|
||||
line 22 width: 78.8125, height: 17.78125, bottom: 402.09375, baseline: 13.53125
|
||||
frag 0 from TextNode start: 208, length: 9, rect: [8,392 78.8125x17.46875]
|
||||
"Proin sed"
|
||||
line 23 width: 68.296875, height: 18.25, bottom: 420.03125, baseline: 13.53125
|
||||
frag 0 from TextNode start: 218, length: 9, rect: [8,409 68.296875x17.46875]
|
||||
"orci leo."
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
53
Tests/LibWeb/Layout/input/grid/row-span-2-maxcontent.html
Normal file
53
Tests/LibWeb/Layout/input/grid/row-span-2-maxcontent.html
Normal 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
43
Tests/LibWeb/Layout/input/grid/row-span-2-mincontent.html
Normal 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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue