diff options
| author | Andreas Kling <kling@serenityos.org> | 2023-03-15 10:22:37 +0100 |
|---|---|---|
| committer | Andreas Kling <kling@serenityos.org> | 2023-03-15 11:43:54 +0100 |
| commit | db545b51ef439f463ca530ff56f86d63d4c14c72 (patch) | |
| tree | 191caaf14711db0ba6649f19b9c8016e27a84dfe /Tests/LibWeb | |
| parent | 52e2095a3f09ef2b39f0dde8ffc2b393dfbefce3 (diff) | |
| download | serenity-db545b51ef439f463ca530ff56f86d63d4c14c72.zip | |
LibWeb: Make sure `float: left` boxes get pushed down if they can't fit
Diffstat (limited to 'Tests/LibWeb')
4 files changed, 104 insertions, 0 deletions
diff --git a/Tests/LibWeb/Layout/expected/bfc-float-left-break-vertically-2.txt b/Tests/LibWeb/Layout/expected/bfc-float-left-break-vertically-2.txt new file mode 100644 index 0000000000..ce53aa59f8 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/bfc-float-left-break-vertically-2.txt @@ -0,0 +1,10 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer <html> at (0,0) content-size 800x150 children: not-inline + BlockContainer <body> at (0,0) content-size 200x0 children: not-inline + BlockContainer <ul> at (0,0) content-size 200x0 children: inline + BlockContainer <div.red> at (0,0) content-size 150x50 floating children: not-inline + BlockContainer <div.green> at (0,50) content-size 150x50 floating children: not-inline + TextNode <#text> + BlockContainer <div.orange> at (0,100) content-size 150x50 floating children: not-inline + BlockContainer <(anonymous)> at (0,0) content-size 200x0 children: inline + TextNode <#text> diff --git a/Tests/LibWeb/Layout/expected/bfc-float-left-break-vertically.txt b/Tests/LibWeb/Layout/expected/bfc-float-left-break-vertically.txt new file mode 100644 index 0000000000..8be04e1370 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/bfc-float-left-break-vertically.txt @@ -0,0 +1,18 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer <html> at (1,1) content-size 798x107 children: not-inline + BlockContainer <(anonymous)> at (1,1) content-size 798x0 children: inline + TextNode <#text> + BlockContainer <body> at (2,2) content-size 400x2 children: not-inline + BlockContainer <(anonymous)> at (2,2) content-size 400x0 children: inline + TextNode <#text> + BlockContainer <div.ul> at (3,3) content-size 398x0 children: inline + TextNode <#text> + BlockContainer <div.yellow> at (4,4) content-size 60x50 floating children: not-inline + TextNode <#text> + BlockContainer <div.orange> at (66,4) content-size 250x50 floating children: not-inline + TextNode <#text> + BlockContainer <(anonymous)> at (2,4) content-size 400x0 children: inline + TextNode <#text> + BlockContainer <div.green> at (3,57) content-size 100x50 floating children: not-inline + BlockContainer <(anonymous)> at (2,4) content-size 400x0 children: inline + TextNode <#text> diff --git a/Tests/LibWeb/Layout/input/bfc-float-left-break-vertically-2.html b/Tests/LibWeb/Layout/input/bfc-float-left-break-vertically-2.html new file mode 100644 index 0000000000..003cf703ee --- /dev/null +++ b/Tests/LibWeb/Layout/input/bfc-float-left-break-vertically-2.html @@ -0,0 +1,32 @@ +<!DOCTYPE html><html><head><style> + * { + margin: 0; + padding: 0; + } + + body { + width: 200px; + } + + div { + float: left; + width: 150px; + height: 50px; + } + + .red { + background: red; + } + + .green { + background: green; + } + + .blue { + background: blue; + } + + .orange { + background: orange; + } +</style></head><body><ul><div class="red"></div><div class="green"></div> </ul><div class="orange"></div> diff --git a/Tests/LibWeb/Layout/input/bfc-float-left-break-vertically.html b/Tests/LibWeb/Layout/input/bfc-float-left-break-vertically.html new file mode 100644 index 0000000000..064d8cc2da --- /dev/null +++ b/Tests/LibWeb/Layout/input/bfc-float-left-break-vertically.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> + <head> + <style> + * { + border: 1px solid black !important; + margin: 0; + padding: 0; + } + + body { + width: 400px; + } + + .yellow { + width: 60px; + height: 50px; + float: left; + background: yellow; + } + + .orange { + width: 250px; + height: 50px; + float: left; + background: orange; + } + + .green { + background: lime; + width: 100px; + height: 50px; + float: left; + } + </style> + </head> + <body> + <div class="ul"> + <div class="yellow"></div> + <div class="orange"></div> + </div> + <div class="green"></div> + </body> +</html> |