diff --git a/Tests/LibWeb/Layout/expected/height-min-max-fit-content.txt b/Tests/LibWeb/Layout/expected/height-min-max-fit-content.txt new file mode 100644 index 0000000000..858958e2f4 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/height-min-max-fit-content.txt @@ -0,0 +1,26 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (0,0) content-size 800x139.46875 [BFC] children: not-inline + BlockContainer at (8,8) content-size 784x123.46875 children: inline + line 0 width: 376, height: 123.46875, bottom: 123.46875, baseline: 120 + frag 0 from ImageBox start: 0, length: 0, rect: [8,8 120x120] + frag 1 from TextNode start: 0, length: 1, rect: [128,114 8x17.46875] + " " + frag 2 from ImageBox start: 0, length: 0, rect: [136,8 120x120] + frag 3 from TextNode start: 0, length: 1, rect: [256,114 8x17.46875] + " " + frag 4 from ImageBox start: 0, length: 0, rect: [264,8 120x120] + ImageBox at (8,8) content-size 120x120 children: not-inline + TextNode <#text> + ImageBox at (136,8) content-size 120x120 children: not-inline + TextNode <#text> + ImageBox at (264,8) content-size 120x120 children: not-inline + TextNode <#text> + +ViewportPaintable (Viewport<#document>) [0,0 800x600] + PaintableWithLines (BlockContainer) [0,0 800x139.46875] + PaintableWithLines (BlockContainer) [8,8 784x123.46875] + ImagePaintable (ImageBox.min) [8,8 120x120] + TextPaintable (TextNode<#text>) + ImagePaintable (ImageBox.max) [136,8 120x120] + TextPaintable (TextNode<#text>) + ImagePaintable (ImageBox.fit) [264,8 120x120] diff --git a/Tests/LibWeb/Layout/input/height-min-max-fit-content.html b/Tests/LibWeb/Layout/input/height-min-max-fit-content.html new file mode 100644 index 0000000000..40d818d9f5 --- /dev/null +++ b/Tests/LibWeb/Layout/input/height-min-max-fit-content.html @@ -0,0 +1,8 @@ + + + + diff --git a/Userland/Libraries/LibWeb/CSS/Properties.json b/Userland/Libraries/LibWeb/CSS/Properties.json index b4c6582992..e9e2b60fc4 100644 --- a/Userland/Libraries/LibWeb/CSS/Properties.json +++ b/Userland/Libraries/LibWeb/CSS/Properties.json @@ -1182,7 +1182,10 @@ "percentage [0,∞]" ], "valid-identifiers": [ - "auto" + "auto", + "fit-content", + "max-content", + "min-content" ], "percentages-resolve-to": "length", "quirks": [ diff --git a/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp index 6aaaff89bd..2ae6c9bdd0 100644 --- a/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp @@ -1627,8 +1627,18 @@ bool FormattingContext::should_treat_width_as_auto(Box const& box, AvailableSpac bool FormattingContext::should_treat_height_as_auto(Box const& box, AvailableSpace const& available_space) { - if (box.computed_values().height().is_auto()) + auto computed_height = box.computed_values().height(); + if (computed_height.is_auto()) return true; + + // https://www.w3.org/TR/css-sizing-3/#valdef-width-min-content + // https://www.w3.org/TR/css-sizing-3/#valdef-width-max-content + // https://www.w3.org/TR/css-sizing-3/#valdef-width-fit-content + // For a box’s block size, unless otherwise specified, this is equivalent to its automatic size. + // FIXME: If height is not the block axis size, then we should be concerned with the width instead. + if (computed_height.is_min_content() || computed_height.is_max_content() || computed_height.is_fit_content()) + return true; + if (box.computed_values().height().contains_percentage()) { if (available_space.height.is_max_content()) return true;