Skip to content
Permalink
Browse files
Consider Container Percentage Sizes When Determining Definite Cross Size
https://bugs.webkit.org/show_bug.cgi?id=245194
rdar://99469852

Reviewed by Alan Bujtas.

When computing the transferred size suggestion for the minimum size of
flex items, we need to use the intrinsic aspect ratio and the definite
cross size. Both the Flexbox specification and CSS-Sizing specification
provide information on when a size can be considered definite. This
patch implements the following portion of the Flexbox spec to determine
the definite cross size:

If a single-line flex container has a definite cross size, the outer
cross size of any 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.

The new test case provides an instance of a scenario where this addition
is important. The image is being used as a flex item, but the flex
container is being constrained by another containing block that has a
specified height that is smaller than the image. When computing the
automatic minimum size (specifically the transferred size suggestion),
we can determine that the flex container has a definite cross size using
its percentage specified height along with the height available to it.
Then, we can use this cross size along with the image's aspect ratio
to determine the appropriate main size.

Spec: https://www.w3.org/TR/css-flexbox-1/#min-size-auto
https://www.w3.org/TR/css-flexbox-1/#definite

* Source/WebCore/rendering/RenderFlexibleBox.cpp:
(WebCore::RenderFlexibleBox::childCrossSizeShouldUseContainerCrossSize const):
(WebCore::RenderFlexibleBox::computeCrossSizeForChildUsingContainerCrossSize const):

Canonical link: https://commits.webkit.org/254758@main
  • Loading branch information
sgill26 authored and stwrt committed Sep 22, 2022
1 parent 8530532 commit 39cc41965e9ea32db1eecab5bea00b539397d22a
Show file tree
Hide file tree
Showing 4 changed files with 64 additions and 3 deletions.
@@ -0,0 +1,17 @@
<html>
<meta charset="utf-8">
<link rel="author" href="mailto:sammy.gill@apple.com" title="Sammy Gill">
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#min-size-auto">
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#definite">
<link rel="help" href="https://www.w3.org/TR/css-sizing-3/#definite">
<title>Flex item cross size set by definite flex container size with percentage height</title>
<style>
img {
width: 25px;
height: 25px;
}
</style>
<body>
<img src="support/60x60-green.png">
</body>
</html>
@@ -0,0 +1,17 @@
<html>
<meta charset="utf-8">
<link rel="author" href="mailto:sammy.gill@apple.com" title="Sammy Gill">
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#min-size-auto">
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#definite">
<link rel="help" href="https://www.w3.org/TR/css-sizing-3/#definite">
<title>Flex item cross size set by definite flex container size with percentage height</title>
<style>
img {
width: 25px;
height: 25px;
}
</style>
<body>
<img src="support/60x60-green.png">
</body>
</html>
@@ -0,0 +1,26 @@
<html>
<meta charset="utf-8">
<link rel="match" href="flexbox-definite-cross-size-constrained-percentage-ref.html">
<link rel="author" href="mailto:sammy.gill@apple.com" title="Sammy Gill">
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#min-size-auto">
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#definite">
<link rel="help" href="https://www.w3.org/TR/css-sizing-3/#definite">
<title>Flex item cross size set by definite flex container size with percentage height</title>
<style>
.constraining-container {
height: 50px;
}

.flex-container {
height: 50%;
display: flex;
}
</style>
<body>
<div class="constraining-container">
<div class="flex-container">
<img src="support/60x60-green.png">
</div>
</div>
</body>
</html>
@@ -1020,9 +1020,8 @@ bool RenderFlexibleBox::childCrossSizeShouldUseContainerCrossSize(const RenderBo
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();
return crossSize.isFixed();
return crossSize.isFixed() || (crossSize.isPercent() && availableLogicalHeightForPercentageComputation());
}
return false;
}
@@ -1794,8 +1793,10 @@ LayoutUnit RenderFlexibleBox::computeCrossSizeForChildUsingContainerCrossSize(co
// Let's compute the definite size value for the flex item (value that we can resolve without running layout).
auto isHorizontal = isHorizontalFlow();
auto size = isHorizontal ? style().height() : style().width();
ASSERT(size.isFixed());
ASSERT(size.isFixed() || (size.isPercent() && availableLogicalHeightForPercentageComputation()));
auto definiteValue = LayoutUnit { size.value() };
if (size.isPercent())
definiteValue = availableLogicalHeightForPercentageComputation().value_or(0_lu);

auto maximumSize = isHorizontal ? style().maxHeight() : style().maxWidth();
if (maximumSize.isFixed())

0 comments on commit 39cc419

Please sign in to comment.