mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2024-09-11 05:25:32 +03:00
LibWeb: Add tests for flex formatting context
This commit is contained in:
Aliaksandr Kalenik
Andreas Kling
parent
9be9bf3379
commit
92cb32b905
Notes:
sideshowbarker
2024-07-17 06:51:48 +09:00
Author: https://github.com/kalenikaliaksandr Commit: https://github.com/SerenityOS/serenity/commit/92cb32b905 Pull-request: https://github.com/SerenityOS/serenity/pull/17365
29
Tests/LibWeb/Layout/expected/flex-auto.txt
Normal file
29
Tests/LibWeb/Layout/expected/flex-auto.txt
Normal file
@ -0,0 +1,29 @@
|
||||
InitialContainingBlock <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x120 children: not-inline
|
||||
BlockContainer <body> at (8,8) content-size 784x104 children: not-inline
|
||||
Box <div.container> at (9,9) content-size 500x102 flex-container(row) children: not-inline
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (10,10) content-size 164.666671x100 flex-item children: inline
|
||||
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [10,10 6.34375x17.46875]
|
||||
"1"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (176.666671,10) content-size 164.666671x100 flex-item children: inline
|
||||
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [176.666671,10 8.8125x17.46875]
|
||||
"2"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (343.333343,10) content-size 164.666671x100 flex-item children: inline
|
||||
line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [343.333343,10 9.09375x17.46875]
|
||||
"3"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,112) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
29
Tests/LibWeb/Layout/expected/flex-column-constained-wrap.txt
Normal file
29
Tests/LibWeb/Layout/expected/flex-column-constained-wrap.txt
Normal file
@ -0,0 +1,29 @@
|
||||
InitialContainingBlock <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x268 children: not-inline
|
||||
BlockContainer <body> at (8,8) content-size 784x252 children: not-inline
|
||||
Box <div.container.column> at (9,9) content-size 250x250 flex-container(column) children: not-inline
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (10,10) content-size 100x100 flex-item children: inline
|
||||
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [10,10 6.34375x17.46875]
|
||||
"1"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (10,112) content-size 100x100 flex-item children: inline
|
||||
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [10,112 8.8125x17.46875]
|
||||
"2"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (135,10) content-size 100x100 flex-item children: inline
|
||||
line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [135,10 9.09375x17.46875]
|
||||
"3"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,260) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
@ -0,0 +1,29 @@
|
||||
InitialContainingBlock <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x268 children: not-inline
|
||||
BlockContainer <body> at (8,8) content-size 784x252 children: not-inline
|
||||
Box <div.container.column> at (9,9) content-size 782x250 flex-container(column) children: not-inline
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (10,10) content-size 100x81.333328 flex-item children: inline
|
||||
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [10,10 6.34375x17.46875]
|
||||
"1"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (10,93.333328) content-size 100x81.333328 flex-item children: inline
|
||||
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [10,93.333328 8.8125x17.46875]
|
||||
"2"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (10,176.666656) content-size 100x81.333328 flex-item children: inline
|
||||
line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [10,176.666656 9.09375x17.46875]
|
||||
"3"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,260) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
@ -0,0 +1,29 @@
|
||||
InitialContainingBlock <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x268 children: not-inline
|
||||
BlockContainer <body> at (8,8) content-size 784x252 children: not-inline
|
||||
Box <div.container.column> at (9,9) content-size 250x250 flex-container(column) children: not-inline
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (10,10) content-size 100x81.333328 flex-item children: inline
|
||||
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [10,10 6.34375x17.46875]
|
||||
"1"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (10,93.333328) content-size 100x81.333328 flex-item children: inline
|
||||
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [10,93.333328 8.8125x17.46875]
|
||||
"2"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (10,176.666656) content-size 100x81.333328 flex-item children: inline
|
||||
line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [10,176.666656 9.09375x17.46875]
|
||||
"3"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,260) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
@ -0,0 +1,29 @@
|
||||
InitialContainingBlock <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x268 children: not-inline
|
||||
BlockContainer <body> at (8,8) content-size 784x252 children: not-inline
|
||||
Box <div.container> at (9,9) content-size 782x250 flex-container(column) children: not-inline
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (10,10) content-size 100x81.333328 flex-item children: inline
|
||||
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [10,10 6.34375x17.46875]
|
||||
"1"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (10,93.333328) content-size 100x81.333328 flex-item children: inline
|
||||
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [10,93.333328 8.8125x17.46875]
|
||||
"2"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (10,176.666656) content-size 100x81.333328 flex-item children: inline
|
||||
line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [10,176.666656 9.09375x17.46875]
|
||||
"3"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,260) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
@ -0,0 +1,29 @@
|
||||
InitialContainingBlock <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x120 children: not-inline
|
||||
BlockContainer <body> at (8,8) content-size 784x104 children: not-inline
|
||||
Box <div.container> at (9,9) content-size 250x102 flex-container(row) children: not-inline
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (10,10) content-size 81.333328x100 flex-item children: inline
|
||||
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [10,10 6.34375x17.46875]
|
||||
"1"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (93.333328,10) content-size 81.333328x100 flex-item children: inline
|
||||
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [93.333328,10 8.8125x17.46875]
|
||||
"2"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (176.666656,10) content-size 81.333328x100 flex-item children: inline
|
||||
line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [176.666656,10 9.09375x17.46875]
|
||||
"3"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,112) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
@ -0,0 +1,29 @@
|
||||
InitialContainingBlock <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x222 children: not-inline
|
||||
BlockContainer <body> at (8,8) content-size 784x206 children: not-inline
|
||||
Box <div.container> at (9,9) content-size 250x204 flex-container(row) children: not-inline
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (10,10) content-size 100x100 flex-item children: inline
|
||||
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [10,10 6.34375x17.46875]
|
||||
"1"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (112,10) content-size 100x100 flex-item children: inline
|
||||
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [112,10 8.8125x17.46875]
|
||||
"2"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (10,112) content-size 100x100 flex-item children: inline
|
||||
line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [10,112 9.09375x17.46875]
|
||||
"3"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,214) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
@ -0,0 +1,29 @@
|
||||
InitialContainingBlock <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x120 children: not-inline
|
||||
BlockContainer <body> at (8,8) content-size 784x104 children: not-inline
|
||||
Box <div.container.width-constrained> at (9,9) content-size 250x102 flex-container(row) children: not-inline
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (10,10) content-size 81.333328x100 flex-item children: inline
|
||||
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [10,10 6.34375x17.46875]
|
||||
"1"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (93.333328,10) content-size 81.333328x100 flex-item children: inline
|
||||
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [93.333328,10 8.8125x17.46875]
|
||||
"2"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (176.666656,10) content-size 81.333328x100 flex-item children: inline
|
||||
line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [176.666656,10 9.09375x17.46875]
|
||||
"3"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,112) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
29
Tests/LibWeb/Layout/expected/flex-grow-0-column.txt
Normal file
29
Tests/LibWeb/Layout/expected/flex-grow-0-column.txt
Normal file
@ -0,0 +1,29 @@
|
||||
InitialContainingBlock <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x76.40625 children: not-inline
|
||||
BlockContainer <body> at (8,8) content-size 784x60.40625 children: not-inline
|
||||
Box <div.container> at (9,9) content-size 500x58.40625 flex-container(column) children: not-inline
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (10,10) content-size 100x17.46875 flex-item children: inline
|
||||
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [10,10 6.34375x17.46875]
|
||||
"1"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (10,29.46875) content-size 100x17.46875 flex-item children: inline
|
||||
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [10,29.46875 8.8125x17.46875]
|
||||
"2"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (10,48.9375) content-size 100x17.46875 flex-item children: inline
|
||||
line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [10,48.9375 9.09375x17.46875]
|
||||
"3"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,68.40625) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
29
Tests/LibWeb/Layout/expected/flex-grow-1.txt
Normal file
29
Tests/LibWeb/Layout/expected/flex-grow-1.txt
Normal file
@ -0,0 +1,29 @@
|
||||
InitialContainingBlock <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x120 children: not-inline
|
||||
BlockContainer <body> at (8,8) content-size 784x104 children: not-inline
|
||||
Box <div.container> at (9,9) content-size 500x102 flex-container(row) children: not-inline
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (10,10) content-size 229.333343x100 flex-item children: inline
|
||||
line 0 width: 144.546875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 17, rect: [10,10 144.546875x17.46875]
|
||||
"1 I grow the most"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (241.333343,10) content-size 164.666671x100 flex-item children: inline
|
||||
line 0 width: 67.375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 8, rect: [241.333343,10 67.375x17.46875]
|
||||
"2 I grow"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (408,10) content-size 100x100 flex-item children: inline
|
||||
line 0 width: 68, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 9, rect: [408,10 68x17.46875]
|
||||
"3 I don't"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,112) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
29
Tests/LibWeb/Layout/expected/flex-grow-2.txt
Normal file
29
Tests/LibWeb/Layout/expected/flex-grow-2.txt
Normal file
@ -0,0 +1,29 @@
|
||||
InitialContainingBlock <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x120 children: not-inline
|
||||
BlockContainer <body> at (8,8) content-size 784x104 children: not-inline
|
||||
Box <div.container> at (9,9) content-size 500x102 flex-container(row) children: not-inline
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (10,10) content-size 132.333343x100 flex-item children: inline
|
||||
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [10,10 6.34375x17.46875]
|
||||
"1"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (144.333343,10) content-size 164.666671x100 flex-item children: inline
|
||||
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [144.333343,10 8.8125x17.46875]
|
||||
"2"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (311,10) content-size 197x100 flex-item children: inline
|
||||
line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [311,10 9.09375x17.46875]
|
||||
"3"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,112) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
29
Tests/LibWeb/Layout/expected/flex-row.txt
Normal file
29
Tests/LibWeb/Layout/expected/flex-row.txt
Normal file
@ -0,0 +1,29 @@
|
||||
InitialContainingBlock <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x120 children: not-inline
|
||||
BlockContainer <body> at (8,8) content-size 784x104 children: not-inline
|
||||
Box <div.container> at (9,9) content-size 782x102 flex-container(row) children: not-inline
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (10,10) content-size 100x100 flex-item children: inline
|
||||
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [10,10 6.34375x17.46875]
|
||||
"1"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (112,10) content-size 100x100 flex-item children: inline
|
||||
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [112,10 8.8125x17.46875]
|
||||
"2"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (214,10) content-size 100x100 flex-item children: inline
|
||||
line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [214,10 9.09375x17.46875]
|
||||
"3"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,112) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
38
Tests/LibWeb/Layout/expected/flex-shrink-1.txt
Normal file
38
Tests/LibWeb/Layout/expected/flex-shrink-1.txt
Normal file
@ -0,0 +1,38 @@
|
||||
InitialContainingBlock <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x120 children: not-inline
|
||||
BlockContainer <body> at (8,8) content-size 784x104 children: not-inline
|
||||
Box <div.container> at (9,9) content-size 250x102 flex-container(row) children: not-inline
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (10,10) content-size 62.666664x100 flex-item children: inline
|
||||
line 0 width: 18.9375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 3, rect: [10,10 18.9375x17.46875]
|
||||
"1 I"
|
||||
line 1 width: 49.359375, height: 17.9375, bottom: 35.40625, baseline: 13.53125
|
||||
frag 0 from TextNode start: 4, length: 6, rect: [10,27 49.359375x17.46875]
|
||||
"shrink"
|
||||
line 2 width: 24.875, height: 18.40625, bottom: 53.34375, baseline: 13.53125
|
||||
frag 0 from TextNode start: 11, length: 3, rect: [10,44 24.875x17.46875]
|
||||
"the"
|
||||
line 3 width: 38.765625, height: 17.875, bottom: 70.28125, baseline: 13.53125
|
||||
frag 0 from TextNode start: 15, length: 4, rect: [10,62 38.765625x17.46875]
|
||||
"most"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (74.666664,10) content-size 81.333328x100 flex-item children: inline
|
||||
line 0 width: 78.765625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 10, rect: [74.666664,10 78.765625x17.46875]
|
||||
"2 I shrink"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (158,10) content-size 100x100 flex-item children: inline
|
||||
line 0 width: 68, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 9, rect: [158,10 68x17.46875]
|
||||
"3 I don't"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,112) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
29
Tests/LibWeb/Layout/expected/flex-shrink-2.txt
Normal file
29
Tests/LibWeb/Layout/expected/flex-shrink-2.txt
Normal file
@ -0,0 +1,29 @@
|
||||
InitialContainingBlock <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x120 children: not-inline
|
||||
BlockContainer <body> at (8,8) content-size 784x104 children: not-inline
|
||||
Box <div.container> at (9,9) content-size 500x102 flex-container(row) children: not-inline
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (10,10) content-size 47.000030x100 flex-item children: inline
|
||||
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [10,10 6.34375x17.46875]
|
||||
"1"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (59.000030,10) content-size 164.666671x100 flex-item children: inline
|
||||
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [59.000030,10 8.8125x17.46875]
|
||||
"2"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (225.666702,10) content-size 282.333312x100 flex-item children: inline
|
||||
line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [225.666702,10 9.09375x17.46875]
|
||||
"3"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,112) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
29
Tests/LibWeb/Layout/expected/flex-shrink-3.txt
Normal file
29
Tests/LibWeb/Layout/expected/flex-shrink-3.txt
Normal file
@ -0,0 +1,29 @@
|
||||
InitialContainingBlock <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x120 children: not-inline
|
||||
BlockContainer <body> at (8,8) content-size 784x104 children: not-inline
|
||||
Box <div.container> at (9,9) content-size 500x102 flex-container(row) children: not-inline
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (10,10) content-size 100x100 flex-item children: inline
|
||||
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [10,10 6.34375x17.46875]
|
||||
"1"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (112,10) content-size 100x100 flex-item children: inline
|
||||
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [112,10 8.8125x17.46875]
|
||||
"2"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (214,10) content-size 100x100 flex-item children: inline
|
||||
line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [214,10 9.09375x17.46875]
|
||||
"3"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,112) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
23
Tests/LibWeb/Layout/input/flex-auto.html
Normal file
23
Tests/LibWeb/Layout/input/flex-auto.html
Normal file
@ -0,0 +1,23 @@
|
||||
<style>
|
||||
body {
|
||||
font-family: 'SerenitySans';
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
border: 1px solid salmon;
|
||||
flex-flow: row nowrap;
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
<div class="container">
|
||||
<div class="box" style="flex: auto;">1</div>
|
||||
<div class="box" style="flex: auto;">2</div>
|
||||
<div class="box" style="flex: auto;">3</div>
|
||||
</div>
|
||||
25
Tests/LibWeb/Layout/input/flex-column-constained-wrap.html
Normal file
25
Tests/LibWeb/Layout/input/flex-column-constained-wrap.html
Normal file
@ -0,0 +1,25 @@
|
||||
<style>
|
||||
body {
|
||||
font-family: 'SerenitySans';
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
border: 1px solid salmon;
|
||||
flex-direction: column;
|
||||
height: 250px;
|
||||
width: 250px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
<div class="container column">
|
||||
<div class="box">1</div>
|
||||
<div class="box">2</div>
|
||||
<div class="box">3</div>
|
||||
</div>
|
||||
@ -0,0 +1,24 @@
|
||||
<style>
|
||||
body {
|
||||
font-family: 'SerenitySans';
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
border: 1px solid salmon;
|
||||
flex-direction: column;
|
||||
height: 250px;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
<div class="container column">
|
||||
<div class="box">1</div>
|
||||
<div class="box">2</div>
|
||||
<div class="box">3</div>
|
||||
</div>
|
||||
@ -0,0 +1,24 @@
|
||||
<style>
|
||||
body {
|
||||
font-family: 'SerenitySans';
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
border: 1px solid salmon;
|
||||
flex-direction: column;
|
||||
height: 250px;
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
<div class="container column">
|
||||
<div class="box">1</div>
|
||||
<div class="box">2</div>
|
||||
<div class="box">3</div>
|
||||
</div>
|
||||
@ -0,0 +1,23 @@
|
||||
<style>
|
||||
body {
|
||||
font-family: 'SerenitySans';
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
border: 1px solid salmon;
|
||||
flex-direction: column;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
<div class="container">
|
||||
<div class="box">1</div>
|
||||
<div class="box">2</div>
|
||||
<div class="box">3</div>
|
||||
</div>
|
||||
@ -0,0 +1,23 @@
|
||||
<style>
|
||||
body {
|
||||
font-family: 'SerenitySans';
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
border: 1px solid salmon;
|
||||
width: 250px;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
<div class="container">
|
||||
<div class="box">1</div>
|
||||
<div class="box">2</div>
|
||||
<div class="box">3</div>
|
||||
</div>
|
||||
@ -0,0 +1,23 @@
|
||||
<style>
|
||||
body {
|
||||
font-family: 'SerenitySans';
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
border: 1px solid salmon;
|
||||
width: 250px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
<div class="container">
|
||||
<div class="box">1</div>
|
||||
<div class="box">2</div>
|
||||
<div class="box">3</div>
|
||||
</div>
|
||||
@ -0,0 +1,22 @@
|
||||
<style>
|
||||
body {
|
||||
font-family: 'SerenitySans';
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
border: 1px solid salmon;
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
<div class="container width-constrained">
|
||||
<div class="box">1</div>
|
||||
<div class="box">2</div>
|
||||
<div class="box">3</div>
|
||||
</div>
|
||||
23
Tests/LibWeb/Layout/input/flex-grow-0-column.html
Normal file
23
Tests/LibWeb/Layout/input/flex-grow-0-column.html
Normal file
@ -0,0 +1,23 @@
|
||||
<style>
|
||||
body {
|
||||
font-family: 'SerenitySans';
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
border: 1px solid salmon;
|
||||
width: 500px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
<div class="container">
|
||||
<div class="box" style="flex: 0 0 0;">1</div>
|
||||
<div class="box" style="flex: 0 0 0;">2</div>
|
||||
<div class="box" style="flex: 0 0 0;">3</div>
|
||||
</div>
|
||||
22
Tests/LibWeb/Layout/input/flex-grow-1.html
Normal file
22
Tests/LibWeb/Layout/input/flex-grow-1.html
Normal file
@ -0,0 +1,22 @@
|
||||
<style>
|
||||
body {
|
||||
font-family: 'SerenitySans';
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
border: 1px solid salmon;
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
<div class="container">
|
||||
<div class="box" style="flex-grow: 4;">1 I grow the most</div>
|
||||
<div class="box" style="flex-grow: 2;">2 I grow</div>
|
||||
<div class="box" style="flex-grow: 0;">3 I don't</div>
|
||||
</div>
|
||||
22
Tests/LibWeb/Layout/input/flex-grow-2.html
Normal file
22
Tests/LibWeb/Layout/input/flex-grow-2.html
Normal file
@ -0,0 +1,22 @@
|
||||
<style>
|
||||
body {
|
||||
font-family: 'SerenitySans';
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
border: 1px solid salmon;
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
<div class="container">
|
||||
<div class="box" style="flex: 1;">1</div>
|
||||
<div class="box" style="flex: 2;">2</div>
|
||||
<div class="box" style="flex: 3;">3</div>
|
||||
</div>
|
||||
21
Tests/LibWeb/Layout/input/flex-row.html
Normal file
21
Tests/LibWeb/Layout/input/flex-row.html
Normal file
@ -0,0 +1,21 @@
|
||||
<style>
|
||||
body {
|
||||
font-family: 'SerenitySans';
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
border: 1px solid salmon;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
<div class="container">
|
||||
<div class="box">1</div>
|
||||
<div class="box">2</div>
|
||||
<div class="box">3</div>
|
||||
</div>
|
||||
22
Tests/LibWeb/Layout/input/flex-shrink-1.html
Normal file
22
Tests/LibWeb/Layout/input/flex-shrink-1.html
Normal file
@ -0,0 +1,22 @@
|
||||
<style>
|
||||
body {
|
||||
font-family: 'SerenitySans';
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
border: 1px solid salmon;
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
<div class="container">
|
||||
<div class="box" style="flex-shrink: 4;">1 I shrink the most</div>
|
||||
<div class="box" style="flex-shrink: 2;">2 I shrink</div>
|
||||
<div class="box" style="flex-shrink: 0;">3 I don't</div>
|
||||
</div>
|
||||
22
Tests/LibWeb/Layout/input/flex-shrink-2.html
Normal file
22
Tests/LibWeb/Layout/input/flex-shrink-2.html
Normal file
@ -0,0 +1,22 @@
|
||||
<style>
|
||||
body {
|
||||
font-family: 'SerenitySans';
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
border: 1px solid salmon;
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
<div class="container">
|
||||
<div class="box" style="flex: 80% 0 3;">1</div>
|
||||
<div class="box" style="flex: 80% 0 2;">2</div>
|
||||
<div class="box" style="flex: 80% 0 1;">3</div>
|
||||
</div>
|
||||
22
Tests/LibWeb/Layout/input/flex-shrink-3.html
Normal file
22
Tests/LibWeb/Layout/input/flex-shrink-3.html
Normal file
@ -0,0 +1,22 @@
|
||||
<style>
|
||||
body {
|
||||
font-family: 'SerenitySans';
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
border: 1px solid salmon;
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
<div class="container">
|
||||
<div class="box" style="flex: auto 0 1;">1</div>
|
||||
<div class="box" style="flex: auto 0 2;">2</div>
|
||||
<div class="box" style="flex: auto 0 3;">3</div>
|
||||
</div>
|
||||
Loading…
Reference in New Issue
Block a user