RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-25 14:17:36 +00:00
Code Issues Activity Actions

LibWeb: Accept height: {min,max,fit}-content

Browse source 
And treat them as "auto" for now, per CSS-SIZING-3, with a FIXME about
supporting more layout directions.

This fixes an issue on MDN where `height: max-content` was not
overriding height from non-CSS presentational hints.
This commit is contained in:
Andreas Kling 2023-08-20 18:25:54 +02:00
parent 90e95d38d7
commit 27ddfa84fa
4 changed files with 49 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

26
Tests/LibWeb/Layout/expected/height-min-max-fit-content.txt Normal file
View file

@ -0,0 +1,26 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x139.46875 [BFC] children: not-inline
BlockContainer <body> 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 <img.min> at (8,8) content-size 120x120 children: not-inline
TextNode <#text>
ImageBox <img.max> at (136,8) content-size 120x120 children: not-inline
TextNode <#text>
ImageBox <img.fit> at (264,8) content-size 120x120 children: not-inline
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x139.46875]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x123.46875]
ImagePaintable (ImageBox<IMG>.min) [8,8 120x120]
TextPaintable (TextNode<#text>)
ImagePaintable (ImageBox<IMG>.max) [136,8 120x120]
TextPaintable (TextNode<#text>)
ImagePaintable (ImageBox<IMG>.fit) [264,8 120x120]

8
Tests/LibWeb/Layout/input/height-min-max-fit-content.html Normal file
View file

@ -0,0 +1,8 @@
<!doctype html><style>
.min{ height: min-content; }
.max { height: max-content; }
.fit { height: fit-content; }
</style>
<img class="min" src="120.png" width="120" height="60" />
<img class="max" src="120.png" width="120" height="60" />
<img class="fit" src="120.png" width="120" height="60" />

5
Userland/Libraries/LibWeb/CSS/Properties.json
View file

@ -1182,7 +1182,10 @@
"percentage [0,∞]" "percentage [0,∞]"
], ],
"valid-identifiers": [ "valid-identifiers": [
"auto" "auto",
"fit-content",
"max-content",
"min-content"
], ],
"percentages-resolve-to": "length", "percentages-resolve-to": "length",
"quirks": [ "quirks": [

12
Userland/Libraries/LibWeb/Layout/FormattingContext.cpp
View file

@ -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) 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; 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 (box.computed_values().height().contains_percentage()) {
if (available_space.height.is_max_content()) if (available_space.height.is_max_content())
return true; return true;