diff options
| author | Aliaksandr Kalenik <kalenik.aliaksandr@gmail.com> | 2023-02-08 01:40:38 +0300 |
|---|---|---|
| committer | Andreas Kling <kling@serenityos.org> | 2023-02-11 10:42:52 +0100 |
| commit | 92cb32b905481b22bbd4e79f694b3a822c06b900 (patch) | |
| tree | 6e920927f3ea886061f31666be7d38854c7303ff | |
| parent | 9be9bf337993999dca1d0fc012c8ab2cf61ea18e (diff) | |
| download | serenity-92cb32b905481b22bbd4e79f694b3a822c06b900.zip | |
LibWeb: Add tests for flex formatting context
30 files changed, 785 insertions, 0 deletions
diff --git a/Tests/LibWeb/Layout/expected/flex-auto.txt b/Tests/LibWeb/Layout/expected/flex-auto.txt new file mode 100644 index 0000000000..9e92653790 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/flex-auto.txt @@ -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> diff --git a/Tests/LibWeb/Layout/expected/flex-column-constained-wrap.txt b/Tests/LibWeb/Layout/expected/flex-column-constained-wrap.txt new file mode 100644 index 0000000000..21558799b8 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/flex-column-constained-wrap.txt @@ -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> diff --git a/Tests/LibWeb/Layout/expected/flex-column-constrained-nowrap.txt b/Tests/LibWeb/Layout/expected/flex-column-constrained-nowrap.txt new file mode 100644 index 0000000000..115695a0da --- /dev/null +++ b/Tests/LibWeb/Layout/expected/flex-column-constrained-nowrap.txt @@ -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> diff --git a/Tests/LibWeb/Layout/expected/flex-column-height-constrained-width-constrained.txt b/Tests/LibWeb/Layout/expected/flex-column-height-constrained-width-constrained.txt new file mode 100644 index 0000000000..785c0babe6 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/flex-column-height-constrained-width-constrained.txt @@ -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> diff --git a/Tests/LibWeb/Layout/expected/flex-column-height-constrained.txt b/Tests/LibWeb/Layout/expected/flex-column-height-constrained.txt new file mode 100644 index 0000000000..dec4cab714 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/flex-column-height-constrained.txt @@ -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> diff --git a/Tests/LibWeb/Layout/expected/flex-container-constrained-nowrap.txt b/Tests/LibWeb/Layout/expected/flex-container-constrained-nowrap.txt new file mode 100644 index 0000000000..47bf401521 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/flex-container-constrained-nowrap.txt @@ -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> diff --git a/Tests/LibWeb/Layout/expected/flex-container-constrained-wrap.txt b/Tests/LibWeb/Layout/expected/flex-container-constrained-wrap.txt new file mode 100644 index 0000000000..9b05b40187 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/flex-container-constrained-wrap.txt @@ -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> diff --git a/Tests/LibWeb/Layout/expected/flex-container-width-constrained.txt b/Tests/LibWeb/Layout/expected/flex-container-width-constrained.txt new file mode 100644 index 0000000000..5252c93588 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/flex-container-width-constrained.txt @@ -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> diff --git a/Tests/LibWeb/Layout/expected/flex-grow-0-column.txt b/Tests/LibWeb/Layout/expected/flex-grow-0-column.txt new file mode 100644 index 0000000000..0aed1b12b8 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/flex-grow-0-column.txt @@ -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> diff --git a/Tests/LibWeb/Layout/expected/flex-grow-1.txt b/Tests/LibWeb/Layout/expected/flex-grow-1.txt new file mode 100644 index 0000000000..a44dc86878 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/flex-grow-1.txt @@ -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> diff --git a/Tests/LibWeb/Layout/expected/flex-grow-2.txt b/Tests/LibWeb/Layout/expected/flex-grow-2.txt new file mode 100644 index 0000000000..2e011a1568 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/flex-grow-2.txt @@ -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> diff --git a/Tests/LibWeb/Layout/expected/flex-row.txt b/Tests/LibWeb/Layout/expected/flex-row.txt new file mode 100644 index 0000000000..73395de3c7 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/flex-row.txt @@ -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> diff --git a/Tests/LibWeb/Layout/expected/flex-shrink-1.txt b/Tests/LibWeb/Layout/expected/flex-shrink-1.txt new file mode 100644 index 0000000000..0479ca917c --- /dev/null +++ b/Tests/LibWeb/Layout/expected/flex-shrink-1.txt @@ -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> diff --git a/Tests/LibWeb/Layout/expected/flex-shrink-2.txt b/Tests/LibWeb/Layout/expected/flex-shrink-2.txt new file mode 100644 index 0000000000..35e8e1652d --- /dev/null +++ b/Tests/LibWeb/Layout/expected/flex-shrink-2.txt @@ -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> diff --git a/Tests/LibWeb/Layout/expected/flex-shrink-3.txt b/Tests/LibWeb/Layout/expected/flex-shrink-3.txt new file mode 100644 index 0000000000..690980ac98 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/flex-shrink-3.txt @@ -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> diff --git a/Tests/LibWeb/Layout/input/flex-auto.html b/Tests/LibWeb/Layout/input/flex-auto.html new file mode 100644 index 0000000000..d537da07c4 --- /dev/null +++ b/Tests/LibWeb/Layout/input/flex-auto.html @@ -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> diff --git a/Tests/LibWeb/Layout/input/flex-column-constained-wrap.html b/Tests/LibWeb/Layout/input/flex-column-constained-wrap.html new file mode 100644 index 0000000000..e92e3c1a9e --- /dev/null +++ b/Tests/LibWeb/Layout/input/flex-column-constained-wrap.html @@ -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> diff --git a/Tests/LibWeb/Layout/input/flex-column-constrained-nowrap.html b/Tests/LibWeb/Layout/input/flex-column-constrained-nowrap.html new file mode 100644 index 0000000000..54a069d502 --- /dev/null +++ b/Tests/LibWeb/Layout/input/flex-column-constrained-nowrap.html @@ -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> diff --git a/Tests/LibWeb/Layout/input/flex-column-height-constrained-width-constrained.html b/Tests/LibWeb/Layout/input/flex-column-height-constrained-width-constrained.html new file mode 100644 index 0000000000..ec05bd9d11 --- /dev/null +++ b/Tests/LibWeb/Layout/input/flex-column-height-constrained-width-constrained.html @@ -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> diff --git a/Tests/LibWeb/Layout/input/flex-column-height-constrained.html b/Tests/LibWeb/Layout/input/flex-column-height-constrained.html new file mode 100644 index 0000000000..1664939c2d --- /dev/null +++ b/Tests/LibWeb/Layout/input/flex-column-height-constrained.html @@ -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> diff --git a/Tests/LibWeb/Layout/input/flex-container-constrained-nowrap.html b/Tests/LibWeb/Layout/input/flex-container-constrained-nowrap.html new file mode 100644 index 0000000000..bf6dafec9f --- /dev/null +++ b/Tests/LibWeb/Layout/input/flex-container-constrained-nowrap.html @@ -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> diff --git a/Tests/LibWeb/Layout/input/flex-container-constrained-wrap.html b/Tests/LibWeb/Layout/input/flex-container-constrained-wrap.html new file mode 100644 index 0000000000..cf8e1ebaec --- /dev/null +++ b/Tests/LibWeb/Layout/input/flex-container-constrained-wrap.html @@ -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> diff --git a/Tests/LibWeb/Layout/input/flex-container-width-constrained.html b/Tests/LibWeb/Layout/input/flex-container-width-constrained.html new file mode 100644 index 0000000000..874118f62c --- /dev/null +++ b/Tests/LibWeb/Layout/input/flex-container-width-constrained.html @@ -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> diff --git a/Tests/LibWeb/Layout/input/flex-grow-0-column.html b/Tests/LibWeb/Layout/input/flex-grow-0-column.html new file mode 100644 index 0000000000..6b11f5f358 --- /dev/null +++ b/Tests/LibWeb/Layout/input/flex-grow-0-column.html @@ -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> diff --git a/Tests/LibWeb/Layout/input/flex-grow-1.html b/Tests/LibWeb/Layout/input/flex-grow-1.html new file mode 100644 index 0000000000..fab45baee2 --- /dev/null +++ b/Tests/LibWeb/Layout/input/flex-grow-1.html @@ -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> diff --git a/Tests/LibWeb/Layout/input/flex-grow-2.html b/Tests/LibWeb/Layout/input/flex-grow-2.html new file mode 100644 index 0000000000..518b7f742c --- /dev/null +++ b/Tests/LibWeb/Layout/input/flex-grow-2.html @@ -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> diff --git a/Tests/LibWeb/Layout/input/flex-row.html b/Tests/LibWeb/Layout/input/flex-row.html new file mode 100644 index 0000000000..7fdaa43586 --- /dev/null +++ b/Tests/LibWeb/Layout/input/flex-row.html @@ -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> diff --git a/Tests/LibWeb/Layout/input/flex-shrink-1.html b/Tests/LibWeb/Layout/input/flex-shrink-1.html new file mode 100644 index 0000000000..c62775f0b6 --- /dev/null +++ b/Tests/LibWeb/Layout/input/flex-shrink-1.html @@ -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> diff --git a/Tests/LibWeb/Layout/input/flex-shrink-2.html b/Tests/LibWeb/Layout/input/flex-shrink-2.html new file mode 100644 index 0000000000..70d65839af --- /dev/null +++ b/Tests/LibWeb/Layout/input/flex-shrink-2.html @@ -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> diff --git a/Tests/LibWeb/Layout/input/flex-shrink-3.html b/Tests/LibWeb/Layout/input/flex-shrink-3.html new file mode 100644 index 0000000000..d5a7acf37a --- /dev/null +++ b/Tests/LibWeb/Layout/input/flex-shrink-3.html @@ -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> |