diff options
| author | Andreas Kling <kling@serenityos.org> | 2023-06-02 15:34:26 +0200 |
|---|---|---|
| committer | Andreas Kling <kling@serenityos.org> | 2023-06-02 17:17:45 +0200 |
| commit | 06617a982e13f78f850db7ce93fc76139717e6ac (patch) | |
| tree | f6a24d5ea2c6a7a5bf2968989cf622fec3b948a8 | |
| parent | d6c3cbd9585219fa88ab7e6fa920200e391e1b94 (diff) | |
| download | serenity-06617a982e13f78f850db7ce93fc76139717e6ac.zip | |
LibWeb: Support flex items with calc() main size containing percentages
If a flex item's main size is a CSS calc() value that resolves to a
length and contains a percentage, we can only resolve it when we have
the corresponding reference size for the containing block.
3 files changed, 38 insertions, 3 deletions
diff --git a/Tests/LibWeb/Layout/expected/flex/flex-item-with-calc-main-size-and-layout-dependent-containing-block-size.txt b/Tests/LibWeb/Layout/expected/flex/flex-item-with-calc-main-size-and-layout-dependent-containing-block-size.txt new file mode 100644 index 0000000000..e4c300014f --- /dev/null +++ b/Tests/LibWeb/Layout/expected/flex/flex-item-with-calc-main-size-and-layout-dependent-containing-block-size.txt @@ -0,0 +1,15 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer <html> at (0,0) content-size 800x69.34375 [BFC] children: not-inline + Box <body.pink> at (8,8) content-size 784x53.34375 flex-container(row) [FFC] children: not-inline + Box <div.orange> at (8,8) content-size 194.71875x53.34375 flex-container(row) flex-item [FFC] children: not-inline + BlockContainer <div.lime> at (8,8) content-size 87.358999x53.34375 flex-item [BFC] children: inline + line 0 width: 74.75, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 9, rect: [8,8 74.75x17.46875] + "This is a" + line 1 width: 71.828125, height: 17.9375, bottom: 35.40625, baseline: 13.53125 + frag 0 from TextNode start: 10, length: 8, rect: [8,25 71.828125x17.46875] + "bunch of" + line 2 width: 32.140625, height: 18.40625, bottom: 53.34375, baseline: 13.53125 + frag 0 from TextNode start: 19, length: 4, rect: [8,42 32.140625x17.46875] + "text" + TextNode <#text> diff --git a/Tests/LibWeb/Layout/input/flex/flex-item-with-calc-main-size-and-layout-dependent-containing-block-size.html b/Tests/LibWeb/Layout/input/flex/flex-item-with-calc-main-size-and-layout-dependent-containing-block-size.html new file mode 100644 index 0000000000..8963dc6311 --- /dev/null +++ b/Tests/LibWeb/Layout/input/flex/flex-item-with-calc-main-size-and-layout-dependent-containing-block-size.html @@ -0,0 +1,17 @@ +<!doctype html><style> + html { + background: white; + } + body { + background: pink; + display: flex; + } + .orange { + background: orange; + display: flex; + } + .lime { + background: lime; + width: calc(50% - 10px); + } +</style><body class=pink><div class=orange><div class=lime>This is a bunch of text diff --git a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp index 7f238a9db2..406edf019a 100644 --- a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp @@ -623,10 +623,13 @@ void FlexFormattingContext::determine_flex_base_size_and_hypothetical_main_size( if (flex_basis.length_percentage->is_calculated()) { auto const& calc_value = *flex_basis.length_percentage->calculated(); - if (calc_value.resolves_to_length()) - return true; - if (calc_value.resolves_to_percentage() || (calc_value.resolves_to_length() && calc_value.contains_percentage())) + if (calc_value.resolves_to_percentage()) return can_resolve_percentages; + if (calc_value.resolves_to_length()) { + if (calc_value.contains_percentage()) + return can_resolve_percentages; + return true; + } return false; } VERIFY(flex_basis.length_percentage->is_percentage()); |