LibWeb: Don't treat auto insets as definite for child of abspos element

This fixes an issue where the welcome screen wasn't showing up the first time you visit https://puter.com/ :^) (cherry picked from commit a74954e1453f742f18024840f7de9b18d2c791a2)
nico · Nov 29, 2024 · b8f5163 · b8f5163
1 parent 50b7fff
commit b8f5163
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 2 deletions.
diff --git a/Tests/LibWeb/Layout/expected/child-of-abspos-percentage-height.txt b/Tests/LibWeb/Layout/expected/child-of-abspos-percentage-height.txt
@@ -0,0 +1,13 @@
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
+  BlockContainer <html> at (0,0) content-size 800x0 [BFC] children: not-inline
+    BlockContainer <body> at (8,8) content-size 36.84375x17 positioned [BFC] children: not-inline
+      BlockContainer <div> at (8,8) content-size 36.84375x17 children: inline
+        frag 0 from TextNode start: 0, length: 5, rect: [8,8 36.84375x17] baseline: 13.296875
+            "hello"
+        TextNode <#text>
+
+ViewportPaintable (Viewport<#document>) [0,0 800x600]
+  PaintableWithLines (BlockContainer<HTML>) [0,0 800x0]
+    PaintableWithLines (BlockContainer<BODY>) [8,8 36.84375x17]
+      PaintableWithLines (BlockContainer<DIV>) [8,8 36.84375x17]
+        TextPaintable (TextNode<#text>)
diff --git a/Tests/LibWeb/Layout/input/child-of-abspos-percentage-height.html b/Tests/LibWeb/Layout/input/child-of-abspos-percentage-height.html
@@ -0,0 +1,5 @@
+<!doctype html><style>
+* { outline: 1px solid black; }
+body { position: absolute; }
+div { height: 100%; }
+</style><body><div>hello
diff --git a/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp
@@ -1255,10 +1255,15 @@ void FormattingContext::layout_absolutely_positioned_element(Box const& box, Ava
 
     // If the box width and/or height is fixed and/or or resolved from inset properties,
     // mark the size as being definite (since layout was not required to resolve it, per CSS-SIZING-3).
-    if (box.computed_values().inset().left().is_length() && box.computed_values().inset().right().is_length()) {
+    auto is_length_but_not_auto = [](auto& length_percentage) {
+        return length_percentage.is_length() && !length_percentage.is_auto();
+    };
+    if (is_length_but_not_auto(box.computed_values().inset().left())
+        && is_length_but_not_auto(box.computed_values().inset().right())) {
         box_state.set_has_definite_width(true);
     }
-    if (box.computed_values().inset().top().is_length() && box.computed_values().inset().bottom().is_length()) {
+    if (is_length_but_not_auto(box.computed_values().inset().top())
+        && is_length_but_not_auto(box.computed_values().inset().bottom())) {
         box_state.set_has_definite_height(true);
     }