Branch: refs/heads/main
Home: https://github.com/WebKit/WebKit
Commit: d6461def54855ef53d9bd1719184634ea9848057
https://github.com/WebKit/WebKit/commit/d6461def54855ef53d9bd1719184634ea9848057
Author: Alan Baradlay <[email protected]>
Date: 2026-05-11 (Mon, 11 May 2026)
Changed paths:
M LayoutTests/TestExpectations
A
LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/intrinsic-percent-replaced-031-expected.html
A
LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/intrinsic-percent-replaced-031.html
A
LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/intrinsic-percent-replaced-032-expected.html
A
LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/intrinsic-percent-replaced-032.html
M Source/WebCore/rendering/RenderBox.cpp
M Source/WebCore/rendering/RenderBox.h
M Source/WebCore/rendering/RenderReplaced.cpp
M Source/WebCore/rendering/RenderReplaced.h
Log Message:
-----------
Replaced element with percentage width and resolvable percentage height
produces wrong intrinsic width
https://bugs.webkit.org/show_bug.cgi?id=300476
<rdar://problem/162373271>
Reviewed by Antti Koivisto.
<div style="display: flex">
<div style="height: 160px">
<img width="260" height="120" style="width: 100%; height: 100%">
</div>
</div>
The <img> was only 2px wide instead of ~349px. The preferred width should come
from the aspect ratio and the resolved height:
height: 100% of 160px = 160px
aspect ratio: 260/120 (from HTML width/height attributes)
preferred width: 160 * (260/120) = ~347px + 2px border = ~349px
The old code (computeAspectRatioAdjustedIntrinsicLogicalWidths) only resolved
fixed heights via tryFixed(). A percentage height like height: 100% that
resolves
to a definite value (because the containing block has height: 160px) was not
handled - it fell back to the raw intrinsic width instead.
The fix is to rely on the non-replaced codepath to resolve aspect ratio
(i.e. share aspect ratio code between replaced and non-replaced content).
canDerivePreferredWidthFromAspectRatio() checks whether the
replaced element has an intrinsic aspect ratio and a resolvable block size
(fixed,
flex/grid overriding height, or resolvable percentage). When true, we use
computeLogicalWidthFromAspectRatioInternal() to derive the preferred width from
the aspect ratio - the same path non-replaced elements already use.
This is safe during preferred width computation because the flex algorithm sets
up an overriding cross-axis size on the flex item (via
ScopedCrossAxisOverrideForFlexItem)
before computing preferred widths. The percentage height resolves through this
overriding size.
computeLogicalWidthFromAspectRatioInternal() now uses preferredAspectRatio()
instead of style().logicalAspectRatio() so it handles replaced elements with
intrinsic ratios (not just CSS aspect-ratio).
computeAspectRatioAdjustedIntrinsicLogicalWidths() is removed as it is now
unused.
* LayoutTests/TestExpectations:
*
LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/intrinsic-percent-replaced-031-expected.html:
Added.
*
LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/intrinsic-percent-replaced-031.html:
Added.
*
LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/intrinsic-percent-replaced-032-expected.html:
Added.
*
LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/intrinsic-percent-replaced-032.html:
Added.
* Source/WebCore/rendering/RenderBox.cpp:
(WebCore::RenderBox::computePreferredLogicalWidths):
(WebCore::RenderBox::computeLogicalWidthFromAspectRatioInternal const):
(WebCore::RenderBox::applyTransferredMinMaxSizesFromAspectRatio):
* Source/WebCore/rendering/RenderBox.h:
* Source/WebCore/rendering/RenderReplaced.cpp:
(WebCore::canDerivePreferredWidthFromAspectRatio):
(WebCore::RenderReplaced::computePreferredLogicalWidths):
(WebCore::RenderReplaced::computeAspectRatioAdjustedIntrinsicLogicalWidths
const): Deleted.
* Source/WebCore/rendering/RenderReplaced.h:
Canonical link: https://commits.webkit.org/313003@main
To unsubscribe from these emails, change your notification settings at
https://github.com/WebKit/WebKit/settings/notifications
