diff options
3 files changed, 36 insertions, 0 deletions
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 <html> at (0,0) content-size 800x33.46875 children: not-inline + Box <body.outer> at (8,8) content-size 200x17.46875 flex-container(column) children: not-inline + BlockContainer <div.middle> at (8,8) content-size 200x17.46875 flex-item children: not-inline + BlockContainer <div.inner> 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 @@ +<!doctype html><style> +* { + font: 16px SerenitySans; +} +.outer { + display: flex; + flex-direction: column; + width: 200px; +} +.middle { + flex-basis: 0%; + height: 100px; + background: red; +} +.inner { + background: lime; +} +</style><body class="outer"><div class="middle"><div class="inner">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; } |