diff --git a/Tests/LibWeb/Layout/expected/inline-flex-with-aspect-ratio.txt b/Tests/LibWeb/Layout/expected/inline-flex-with-aspect-ratio.txt index a72034d40c..bc0a0fb316 100644 --- a/Tests/LibWeb/Layout/expected/inline-flex-with-aspect-ratio.txt +++ b/Tests/LibWeb/Layout/expected/inline-flex-with-aspect-ratio.txt @@ -1,8 +1,8 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline BlockContainer at (0,0) content-size 800x33 [BFC] children: not-inline BlockContainer at (8,8) content-size 784x17 children: inline - frag 0 from Box start: 0, length: 0, rect: [8,8 784x17] baseline: 13.296875 - Box at (8,8) content-size 784x17 flex-container(row) [FFC] children: not-inline + frag 0 from Box start: 0, length: 0, rect: [8,8 10x10.3125] baseline: 13.296875 + Box at (8,8) content-size 10x10.3125 flex-container(row) [FFC] children: not-inline BlockContainer at (8,8) content-size 10x17 flex-item [BFC] children: inline frag 0 from ImageBox start: 0, length: 0, rect: [8,11 10x10] baseline: 10 ImageBox at (8,11) content-size 10x10 children: not-inline @@ -10,6 +10,6 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline ViewportPaintable (Viewport<#document>) [0,0 800x600] PaintableWithLines (BlockContainer) [0,0 800x33] PaintableWithLines (BlockContainer) [8,8 784x17] - PaintableBox (Box
.inline-flex.aspect-ratio) [8,8 784x17] + PaintableBox (Box
.inline-flex.aspect-ratio) [8,8 10x10.3125] overflow: [8,8 10x17] PaintableWithLines (BlockContainer
.img-wrapper) [8,8 10x17] ImagePaintable (ImageBox) [8,11 10x10] diff --git a/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp index efba48cadf..bcc76cd396 100644 --- a/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp @@ -1978,7 +1978,30 @@ bool box_is_sized_as_replaced_element(Box const& box) // replaced element with a natural aspect ratio and no natural size in that axis, see e.g. CSS2 §10 // and CSS Flexible Box Model Level 1 §9.2. // https://www.w3.org/TR/css-sizing-4/#aspect-ratio-automatic - return is(box) || box.has_preferred_aspect_ratio(); + if (is(box)) + return true; + + if (box.has_preferred_aspect_ratio()) { + // From CSS2: + // If height and width both have computed values of auto and the element has an intrinsic ratio but no intrinsic height or width, + // then the used value of width is undefined in CSS 2. + // However, it is suggested that, if the containing block’s width does not itself depend on the replaced element’s width, + // then the used value of width is calculated from the constraint equation used for block-level, non-replaced elements in normal flow. + + // AD-HOC: For inline-level boxes, we don't want to end up in a situation where we apply stretch-fit sizing, + // since that would not match other browsers. Because of that, we specifically reject this case here + // instead of allowing it to proceed. + if (box.display().is_inline_outside() + && box.computed_values().height().is_auto() + && box.computed_values().width().is_auto() + && !box.has_natural_width() + && !box.has_natural_height()) { + return false; + } + return true; + } + + return false; } bool FormattingContext::should_treat_max_width_as_none(Box const& box, AvailableSize const& available_width) const