RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-10-31 17:52:45 +00:00
Code Issues Activity Actions

LibWeb: Add tests for flex formatting context

Browse source
This commit is contained in:
Aliaksandr Kalenik 2023-02-08 01:40:38 +03:00 • committed by Andreas Kling
parent 9be9bf3379
commit 92cb32b905
30 changed files with 785 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

29
Tests/LibWeb/Layout/expected/flex-auto.txt Normal file
View 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
View 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>

29
Tests/LibWeb/Layout/expected/flex-column-constrained-nowrap.txt Normal file
View 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 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>

29
Tests/LibWeb/Layout/expected/flex-column-height-constrained-width-constrained.txt Normal file
View 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 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>

29
Tests/LibWeb/Layout/expected/flex-column-height-constrained.txt Normal file
View 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> 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>

29
Tests/LibWeb/Layout/expected/flex-container-constrained-nowrap.txt Normal file
View 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 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-container-constrained-wrap.txt Normal file
View file

@ -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>

29
Tests/LibWeb/Layout/expected/flex-container-width-constrained.txt Normal file
View 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.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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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>

24
Tests/LibWeb/Layout/input/flex-column-constrained-nowrap.html Normal file
View file

@ -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>

24
Tests/LibWeb/Layout/input/flex-column-height-constrained-width-constrained.html Normal file
View file

@ -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>

23
Tests/LibWeb/Layout/input/flex-column-height-constrained.html Normal file
View file

@ -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>

23
Tests/LibWeb/Layout/input/flex-container-constrained-nowrap.html Normal file
View file

@ -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>

23
Tests/LibWeb/Layout/input/flex-container-constrained-wrap.html Normal file
View file

@ -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>

22
Tests/LibWeb/Layout/input/flex-container-width-constrained.html Normal file
View 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 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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>