LibWeb: Fallback to auto when aspect ratio is degenerate as per spec

Magnus Johansson · awesomekling · commit c6f77f4818a0 · 2024-10-27T10:56:17.000+01:00
When aspect-ratio is degenerate (e.g. 0/1 or 1/0) we should
fallback to the same behaviour as `aspect-ratio: auto` according to spec
This commit explicitly handles this case and fixes five WPT test in
css/css-sizing/aspect-ratio (zero-or-infinity-[006-010])
diff --git a/Tests/LibWeb/Layout/expected/aspect-ratio-degenerate-ratio.txt b/Tests/LibWeb/Layout/expected/aspect-ratio-degenerate-ratio.txt
@@ -0,0 +1,10 @@
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
+  BlockContainer <html> at (0,0) content-size 800x216 [BFC] children: not-inline
+    BlockContainer <body> at (8,8) content-size 784x200 children: inline
+      frag 0 from ImageBox start: 0, length: 0, rect: [8,8 200x200] baseline: 200
+      ImageBox <img> at (8,8) content-size 200x200 children: not-inline
+
+ViewportPaintable (Viewport<#document>) [0,0 800x600]
+  PaintableWithLines (BlockContainer<HTML>) [0,0 800x216]
+    PaintableWithLines (BlockContainer<BODY>) [8,8 784x200]
+      ImagePaintable (ImageBox<IMG>) [8,8 200x200]
diff --git a/Tests/LibWeb/Layout/input/aspect-ratio-degenerate-ratio.html b/Tests/LibWeb/Layout/input/aspect-ratio-degenerate-ratio.html
@@ -0,0 +1,6 @@
+<!doctype html><style>
+    img {
+        width: 200px;
+        aspect-ratio: 0/1;
+    }
+</style><img src="120.png"/>
diff --git a/Userland/Libraries/LibWeb/Layout/Node.cpp b/Userland/Libraries/LibWeb/Layout/Node.cpp
@@ -880,7 +880,12 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& computed_style)
     } else if (aspect_ratio->is_keyword() && aspect_ratio->as_keyword().keyword() == CSS::Keyword::Auto) {
         computed_values.set_aspect_ratio({ true, {} });
     } else if (aspect_ratio->is_ratio()) {
-        computed_values.set_aspect_ratio({ false, aspect_ratio->as_ratio().ratio() });
+        // https://drafts.csswg.org/css-sizing-4/#aspect-ratio
+        // If the <ratio> is degenerate, the property instead behaves as auto.
+        if (aspect_ratio->as_ratio().ratio().is_degenerate())
+            computed_values.set_aspect_ratio({ true, {} });
+        else
+            computed_values.set_aspect_ratio({ false, aspect_ratio->as_ratio().ratio() });
     }
 
     auto math_shift_value = computed_style.property(CSS::PropertyID::MathShift);
