diff options
| author | Andreas Kling <kling@serenityos.org> | 2023-05-16 16:59:47 +0200 |
|---|---|---|
| committer | Andreas Kling <kling@serenityos.org> | 2023-05-17 07:40:17 +0200 |
| commit | 2e13f65ff4448bb1c41eda8f3775aa158f294d7b (patch) | |
| tree | b9bb8670e4e780770b81aee27fcc8e923e46e095 /Tests | |
| parent | e81d4ca1ac92972f5d66132dac177c75b5d83a2f (diff) | |
| download | serenity-2e13f65ff4448bb1c41eda8f3775aa158f294d7b.zip | |
LibWeb: Support flex-basis: calc(...)
1. Propagate calc() values from StyleProperties to ComputedValues.
2. Actually resolve calc() values when determining the used flex basis.
This makes the "support" section on https://shopify.com/ show up
correctly as a 2x2 grid (instead of 1x4). :^)
Diffstat (limited to 'Tests')
| -rw-r--r-- | Tests/LibWeb/Layout/expected/flex/calc-flex-basis.txt | 24 | ||||
| -rw-r--r-- | Tests/LibWeb/Layout/input/flex/calc-flex-basis.html | 18 |
2 files changed, 42 insertions, 0 deletions
diff --git a/Tests/LibWeb/Layout/expected/flex/calc-flex-basis.txt b/Tests/LibWeb/Layout/expected/flex/calc-flex-basis.txt new file mode 100644 index 0000000000..ffd4d53431 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/flex/calc-flex-basis.txt @@ -0,0 +1,24 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer <html> at (1,1) content-size 798x80 [BFC] children: not-inline + BlockContainer <body> at (10,10) content-size 780x62 children: not-inline + Box <div.flex-container> at (11,11) content-size 778x60 flex-container(row) [FFC] children: not-inline + BlockContainer <div.flex-item> at (12,12) content-size 386x28 flex-item [BFC] children: inline + line 0 width: 58.398437, height: 21.835937, bottom: 21.835937, baseline: 16.914062 + frag 0 from TextNode start: 0, length: 6, rect: [12,12 58.398437x21.835937] + "Item 1" + TextNode <#text> + BlockContainer <div.flex-item> at (401,12) content-size 386x28 flex-item [BFC] children: inline + line 0 width: 61.484375, height: 21.835937, bottom: 21.835937, baseline: 16.914062 + frag 0 from TextNode start: 0, length: 6, rect: [401,12 61.484375x21.835937] + "Item 2" + TextNode <#text> + BlockContainer <div.flex-item> at (12,42) content-size 386x28 flex-item [BFC] children: inline + line 0 width: 61.835937, height: 21.835937, bottom: 21.835937, baseline: 16.914062 + frag 0 from TextNode start: 0, length: 6, rect: [12,42 61.835937x21.835937] + "Item 3" + TextNode <#text> + BlockContainer <div.flex-item> at (401,42) content-size 386x28 flex-item [BFC] children: inline + line 0 width: 60.15625, height: 21.835937, bottom: 21.835937, baseline: 16.914062 + frag 0 from TextNode start: 0, length: 6, rect: [401,42 60.15625x21.835937] + "Item 4" + TextNode <#text> diff --git a/Tests/LibWeb/Layout/input/flex/calc-flex-basis.html b/Tests/LibWeb/Layout/input/flex/calc-flex-basis.html new file mode 100644 index 0000000000..c9a8a2f49a --- /dev/null +++ b/Tests/LibWeb/Layout/input/flex/calc-flex-basis.html @@ -0,0 +1,18 @@ +<!doctype html><style> +* { + border: 1px solid black; + box-sizing: border-box; + font: 20px SerenitySans; +} +.flex-container { + display: flex; + flex-wrap: wrap; + background: pink; + column-gap: 1px; +} +.flex-item { + flex-basis: calc(50% - 1px); + background: orange; + height: 30px; +} +</style><div class="flex-container"><div class="flex-item">Item 1</div><div class="flex-item">Item 2</div><div class="flex-item">Item 3</div><div class="flex-item">Item 4</div></div>
\ No newline at end of file |