beenull/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2024-11-22 23:50:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

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
Notes: sideshowbarker 2024-07-17 04:01:41 +09:00 
Author: https://github.com/awesomekling
Commit: https://github.com/SerenityOS/serenity/commit/27ddfa84fa
Pull-request: https://github.com/SerenityOS/serenity/pull/20685
Reviewed-by: https://github.com/AtkinsSJ
4 changed files with 49 additions and 2 deletions
Show stats 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,∞]"
],
"valid-identifiers": [
"auto"
"auto",
"fit-content",
"max-content",
"min-content"
],
"percentages-resolve-to": "length",
"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)
{
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;