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

awesomekling · awesomekling · commit 27ddfa84fabf · 2023-08-20T19:37:50.000+02:00
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.
diff --git a/Tests/LibWeb/Layout/expected/height-min-max-fit-content.txt 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 <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]
diff --git a/Tests/LibWeb/Layout/input/height-min-max-fit-content.html b/Tests/LibWeb/Layout/input/height-min-max-fit-content.html
@@ -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" />
diff --git 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
@@ -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;
