- Revision
- 287976
- Author
- [email protected]
- Date
- 2022-01-13 05:04:00 -0800 (Thu, 13 Jan 2022)
Log Message
[css-flexbox] Incorrect height of flex items with aspect-ratio whenever the cross axis intrinsic size is larger than the viewport
https://bugs.webkit.org/show_bug.cgi?id=234564
<rdar://problem/86958389>
Reviewed by Manuel Rego Casasnovas.
Source/WebCore:
Automatic preferred sizes were considered always indefinite. However whenever they correspond to
the (physical) width we could consider them as definite. This allows us to use that size instead of
the flex item intrinsic size when computing the transferred size contribution. This way, flex items
with aspect ratio and large intrinsic size are not abnormally stretched due to the min-size:auto
computation.
* rendering/RenderFlexibleBox.cpp:
(WebCore::RenderFlexibleBox::computeMainSizeFromAspectRatioUsing const): Use availableLogical{Width|Height}
to compute the cross size when then automatic preferred size is the physical width.
(WebCore::RenderFlexibleBox::childCrossAxisIsPhysicalWidth const):
(WebCore::RenderFlexibleBox::childCrossSizeShouldUseContainerCrossSize const): Handle the cases of
automatic preferred widths.
* rendering/RenderFlexibleBox.h:
LayoutTests:
Adjusted the canvas-css-size-after-height-change-with-display-flex.html test case and expectations so it behaves as other engines.
* TestExpectations: Unskipped a test that is passing now.
* fast/canvas/canvas-css-size-after-height-change-with-display-flex-expected.html:
* fast/canvas/canvas-css-size-after-height-change-with-display-flex.html:
Modified Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (287975 => 287976)
--- trunk/LayoutTests/ChangeLog 2022-01-13 09:42:56 UTC (rev 287975)
+++ trunk/LayoutTests/ChangeLog 2022-01-13 13:04:00 UTC (rev 287976)
@@ -1,3 +1,17 @@
+2022-01-10 Sergio Villar Senin <[email protected]>
+
+ [css-flexbox] Incorrect height of flex items with aspect-ratio whenever the cross axis intrinsic size is larger than the viewport
+ https://bugs.webkit.org/show_bug.cgi?id=234564
+ <rdar://problem/86958389>
+
+ Reviewed by Manuel Rego Casasnovas.
+
+ Adjusted the canvas-css-size-after-height-change-with-display-flex.html test case and expectations so it behaves as other engines.
+
+ * TestExpectations: Unskipped a test that is passing now.
+ * fast/canvas/canvas-css-size-after-height-change-with-display-flex-expected.html:
+ * fast/canvas/canvas-css-size-after-height-change-with-display-flex.html:
+
2022-01-13 Youenn Fablet <[email protected]>
imported/w3c/web-platform-tests/web-locks/clientids.tentative.https.html is consistently passing on bots
Modified: trunk/LayoutTests/TestExpectations (287975 => 287976)
--- trunk/LayoutTests/TestExpectations 2022-01-13 09:42:56 UTC (rev 287975)
+++ trunk/LayoutTests/TestExpectations 2022-01-13 13:04:00 UTC (rev 287976)
@@ -1355,7 +1355,6 @@
webkit.org/b/136754 css3/flexbox/csswg/ttwf-reftest-flex-order.html [ ImageOnlyFailure ]
webkit.org/b/136754 css3/flexbox/csswg/ttwf-reftest-flex-wrap-reverse.html [ ImageOnlyFailure ]
webkit.org/b/136754 css3/flexbox/csswg/ttwf-reftest-flex-wrap.html [ ImageOnlyFailure ]
-webkit.org/b/136754 imported/w3c/web-platform-tests/css/css-flexbox/canvas-dynamic-change-001.html [ Failure ]
webkit.org/b/136754 imported/w3c/web-platform-tests/css/css-flexbox/flex-aspect-ratio-img-row-015.html [ ImageOnlyFailure ]
webkit.org/b/136754 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-safe-overflow-position-001.html [ ImageOnlyFailure ]
webkit.org/b/210243 imported/w3c/web-platform-tests/css/css-flexbox/percentage-size-quirks-002.html [ Failure ]
@@ -4202,7 +4201,6 @@
webkit.org/b/219343 imported/w3c/web-platform-tests/css/css-flexbox/flex-aspect-ratio-img-row-007.html [ ImageOnlyFailure ]
webkit.org/b/219343 imported/w3c/web-platform-tests/css/css-flexbox/flex-aspect-ratio-img-row-010.html [ ImageOnlyFailure ]
webkit.org/b/219343 imported/w3c/web-platform-tests/css/css-flexbox/aspect-ratio-intrinsic-size-005.html [ ImageOnlyFailure ]
-webkit.org/b/234564 imported/w3c/web-platform-tests/css/css-flexbox/aspect-ratio-intrinsic-size-007.html [ ImageOnlyFailure ]
webkit.org/b/145176 imported/w3c/web-platform-tests/css/css-flexbox/flexbox_align-items-stretch-3.html [ ImageOnlyFailure ]
webkit.org/b/210093 imported/w3c/web-platform-tests/css/css-flexbox/select-element-zero-height-001.html [ ImageOnlyFailure ]
Modified: trunk/LayoutTests/fast/canvas/canvas-css-size-after-height-change-with-display-flex-expected.html (287975 => 287976)
--- trunk/LayoutTests/fast/canvas/canvas-css-size-after-height-change-with-display-flex-expected.html 2022-01-13 09:42:56 UTC (rev 287975)
+++ trunk/LayoutTests/fast/canvas/canvas-css-size-after-height-change-with-display-flex-expected.html 2022-01-13 13:04:00 UTC (rev 287976)
@@ -1 +1 @@
-<div style="height: 500px; background-color: blue;"></div>
+<div style="width: 600px; height: 600px; background-color: blue;"></div>
Modified: trunk/LayoutTests/fast/canvas/canvas-css-size-after-height-change-with-display-flex.html (287975 => 287976)
--- trunk/LayoutTests/fast/canvas/canvas-css-size-after-height-change-with-display-flex.html 2022-01-13 09:42:56 UTC (rev 287975)
+++ trunk/LayoutTests/fast/canvas/canvas-css-size-after-height-change-with-display-flex.html 2022-01-13 13:04:00 UTC (rev 287976)
@@ -1,11 +1,11 @@
<div style="display: flex; flex-direction: column;">
- <canvas style="background-color: blue;">
+ <canvas style="background-color: blue; max-width: 600px">
<script>
if (window.testRunner)
testRunner.waitUntilDone();
window.requestAnimationFrame(function() {
- document.querySelector("canvas").height = "500";
+ document.querySelector("canvas").height = "300";
if (window.testRunner)
testRunner.notifyDone();
});
Modified: trunk/Source/WebCore/ChangeLog (287975 => 287976)
--- trunk/Source/WebCore/ChangeLog 2022-01-13 09:42:56 UTC (rev 287975)
+++ trunk/Source/WebCore/ChangeLog 2022-01-13 13:04:00 UTC (rev 287976)
@@ -1,3 +1,25 @@
+2022-01-10 Sergio Villar Senin <[email protected]>
+
+ [css-flexbox] Incorrect height of flex items with aspect-ratio whenever the cross axis intrinsic size is larger than the viewport
+ https://bugs.webkit.org/show_bug.cgi?id=234564
+ <rdar://problem/86958389>
+
+ Reviewed by Manuel Rego Casasnovas.
+
+ Automatic preferred sizes were considered always indefinite. However whenever they correspond to
+ the (physical) width we could consider them as definite. This allows us to use that size instead of
+ the flex item intrinsic size when computing the transferred size contribution. This way, flex items
+ with aspect ratio and large intrinsic size are not abnormally stretched due to the min-size:auto
+ computation.
+
+ * rendering/RenderFlexibleBox.cpp:
+ (WebCore::RenderFlexibleBox::computeMainSizeFromAspectRatioUsing const): Use availableLogical{Width|Height}
+ to compute the cross size when then automatic preferred size is the physical width.
+ (WebCore::RenderFlexibleBox::childCrossAxisIsPhysicalWidth const):
+ (WebCore::RenderFlexibleBox::childCrossSizeShouldUseContainerCrossSize const): Handle the cases of
+ automatic preferred widths.
+ * rendering/RenderFlexibleBox.h:
+
2022-01-12 Antti Koivisto <[email protected]>
[:has() pseudo-class] Collect invalidation selectors for child invalidation
Modified: trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp (287975 => 287976)
--- trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp 2022-01-13 09:42:56 UTC (rev 287975)
+++ trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp 2022-01-13 13:04:00 UTC (rev 287976)
@@ -914,9 +914,10 @@
std::optional<LayoutUnit> crossSize;
if (crossSizeLength.isFixed())
crossSize = adjustForBoxSizing(child, crossSizeLength);
- else if (crossSizeLength.isAuto())
+ else if (crossSizeLength.isAuto()) {
+ ASSERT(childCrossSizeShouldUseContainerCrossSize(child));
crossSize = computeCrossSizeForChildUsingContainerCrossSize(child);
- else {
+ } else {
ASSERT(crossSizeLength.isPercentOrCalculated());
crossSize = mainAxisIsChildInlineAxis(child) ? child.computePercentageLogicalHeight(crossSizeLength) : adjustBorderBoxLogicalWidthForBoxSizing(valueForLength(crossSizeLength, contentWidth()), crossSizeLength.type());
if (!crossSize)
@@ -987,6 +988,11 @@
&& (childCrossSizeIsDefinite(child, crossSizeLengthForChild(MainOrPreferredSize, child)) || childCrossSizeShouldUseContainerCrossSize(child));
}
+bool RenderFlexibleBox::crossAxisIsPhysicalWidth() const
+{
+ return (isHorizontalWritingMode() && isColumnFlow()) || (!isHorizontalWritingMode() && !isColumnFlow());
+}
+
bool RenderFlexibleBox::childCrossSizeShouldUseContainerCrossSize(const RenderBox& child) const
{
// 9.8 https://drafts.csswg.org/css-flexbox/#definite-sizes
@@ -994,6 +1000,8 @@
// stretched flex items is the flex container's inner cross size (clamped to the flex item's min and max cross size)
// and is considered definite.
if (!isMultiline() && alignmentForChild(child) == ItemPosition::Stretch && !hasAutoMarginsInCrossAxis(child) && crossSizeLengthForChild(MainOrPreferredSize, child).isAuto()) {
+ if (crossAxisIsPhysicalWidth())
+ return true;
// This must be kept in sync with computeMainSizeFromAspectRatioUsing().
// FIXME: so far we're only considered fixed sizes but we should extend it to other definite sizes.
auto& crossSize = isHorizontalFlow() ? style().height() : style().width();
@@ -1741,6 +1749,9 @@
// This refers to https://drafts.csswg.org/css-flexbox-1/#definite-sizes, section 1).
LayoutUnit RenderFlexibleBox::computeCrossSizeForChildUsingContainerCrossSize(const RenderBox& child) const
{
+ if (crossAxisIsPhysicalWidth())
+ return contentWidth();
+
// Keep this sync'ed with childCrossSizeShouldUseContainerCrossSize().
auto definiteSizeValue = [&] {
// Let's compute the definite size value for the flex item (value that we can resolve without running layout).
Modified: trunk/Source/WebCore/rendering/RenderFlexibleBox.h (287975 => 287976)
--- trunk/Source/WebCore/rendering/RenderFlexibleBox.h 2022-01-13 09:42:56 UTC (rev 287975)
+++ trunk/Source/WebCore/rendering/RenderFlexibleBox.h 2022-01-13 13:04:00 UTC (rev 287976)
@@ -146,6 +146,7 @@
LayoutPoint flowAwareLocationForChild(const RenderBox& child) const;
bool childHasComputableAspectRatio(const RenderBox&) const;
bool childHasComputableAspectRatioAndCrossSizeIsConsideredDefinite(const RenderBox&);
+ bool crossAxisIsPhysicalWidth() const;
bool childCrossSizeShouldUseContainerCrossSize(const RenderBox& child) const;
LayoutUnit computeCrossSizeForChildUsingContainerCrossSize(const RenderBox& child) const;
void computeChildIntrinsicLogicalWidths(RenderObject&, LayoutUnit& minLogicalWidth, LayoutUnit& maxLogicalWidth) const override;
