diff --git a/Tests/LibWeb/Layout/expected/aspect-ratio-degenerate-ratio.txt b/Tests/LibWeb/Layout/expected/aspect-ratio-degenerate-ratio.txt new file mode 100644 index 00000000000..3ad1c4a7e15 --- /dev/null +++ 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 at (0,0) content-size 800x216 [BFC] children: not-inline + BlockContainer at (8,8) content-size 784x200 children: inline + frag 0 from ImageBox start: 0, length: 0, rect: [8,8 200x200] baseline: 200 + ImageBox at (8,8) content-size 200x200 children: not-inline + +ViewportPaintable (Viewport<#document>) [0,0 800x600] + PaintableWithLines (BlockContainer) [0,0 800x216] + PaintableWithLines (BlockContainer) [8,8 784x200] + ImagePaintable (ImageBox) [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 new file mode 100644 index 00000000000..291fad94b64 --- /dev/null +++ b/Tests/LibWeb/Layout/input/aspect-ratio-degenerate-ratio.html @@ -0,0 +1,6 @@ + \ No newline at end of file diff --git a/Userland/Libraries/LibWeb/Layout/Node.cpp b/Userland/Libraries/LibWeb/Layout/Node.cpp index 2db2c7f4394..f199dd9dd49 100644 --- 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 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);