From 0d5e0d27aac73967753ba1efe4e89c080b71f978 Mon Sep 17 00:00:00 2001 From: Andreas Kling Date: Tue, 18 Apr 2023 09:10:28 +0200 Subject: [PATCH] LibWeb: Treat unresolvable percentage flex-basis values as 'content' Per CSS-FLEXBOX-1, we should treat percentage values of flex-basis as 'content' if they resolve against an indefinite size of the flex container. --- ...sis-with-indefinite-flex-container-size.txt | 9 +++++++++ ...is-with-indefinite-flex-container-size.html | 18 ++++++++++++++++++ .../LibWeb/Layout/FlexFormattingContext.cpp | 9 +++++++++ 3 files changed, 36 insertions(+) create mode 100644 Tests/LibWeb/Layout/expected/flex/percentage-flex-basis-with-indefinite-flex-container-size.txt create mode 100644 Tests/LibWeb/Layout/input/flex/percentage-flex-basis-with-indefinite-flex-container-size.html diff --git a/Tests/LibWeb/Layout/expected/flex/percentage-flex-basis-with-indefinite-flex-container-size.txt b/Tests/LibWeb/Layout/expected/flex/percentage-flex-basis-with-indefinite-flex-container-size.txt new file mode 100644 index 0000000000..df5bd83588 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/flex/percentage-flex-basis-with-indefinite-flex-container-size.txt @@ -0,0 +1,9 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (0,0) content-size 800x33.46875 children: not-inline + Box at (8,8) content-size 200x17.46875 flex-container(column) children: not-inline + BlockContainer at (8,8) content-size 200x17.46875 flex-item children: not-inline + BlockContainer at (8,8) content-size 200x17.46875 children: inline + line 0 width: 174.234375, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 20, rect: [8,8 174.234375x17.46875] + "percentages are hard" + TextNode <#text> diff --git a/Tests/LibWeb/Layout/input/flex/percentage-flex-basis-with-indefinite-flex-container-size.html b/Tests/LibWeb/Layout/input/flex/percentage-flex-basis-with-indefinite-flex-container-size.html new file mode 100644 index 0000000000..80f796b277 --- /dev/null +++ b/Tests/LibWeb/Layout/input/flex/percentage-flex-basis-with-indefinite-flex-container-size.html @@ -0,0 +1,18 @@ +
percentages are hard diff --git a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp index 57100e1ac6..bd6d2f9289 100644 --- a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp @@ -572,6 +572,15 @@ CSS::FlexBasisData FlexFormattingContext::used_flex_basis_for_item(FlexItem cons } } + // For example, percentage values of flex-basis are resolved against the flex item’s containing block + // (i.e. its flex container); and if that containing block’s size is indefinite, + // the used value for flex-basis is content. + if (flex_basis.type == CSS::FlexBasis::LengthPercentage + && flex_basis.length_percentage->is_percentage() + && !has_definite_main_size(flex_container())) { + flex_basis.type = CSS::FlexBasis::Content; + } + return flex_basis; }