[css-grid][aspect-ratio] availableLogicalHeightUsing needs to conside…

…r AvailableLogicalHeightType when computing logical height from the aspect ratio https://bugs.webkit.org/show_bug.cgi?id=263310 rdar://117138268 Reviewed by Alan Baradlay. When availableLogicalHeightUsing determines that it needs to use the box's logical width and aspect-ratio to compute the logical height, it simply returns the value given from blockSizeFromAspectRatio. This is not correct because blockSizeFromAspectRatio returns the computed border box size which is not what the caller may want depending on the specified value of heightType. If the caller specifies a heightType of ExcludeMarginBorderPadding, then we should remove the border and padding from the block sides of the box. This is what grid expects when calling availableLogicalHeight(ExcludeMarginBorderPadding)) to compute the definite free space for the rows for the track sizing algorithm. * LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-with-aspect-ratio-uses-content-box-height-for-track-sizing-expected.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-with-aspect-ratio-uses-content-box-height-for-track-sizing.html: Added. * Source/WebCore/rendering/RenderBox.cpp: (WebCore::RenderBox::availableLogicalHeightUsing const): Canonical link: https://commits.webkit.org/270098@main
WebKit · Nov 2, 2023 · 2c5b455 · 2c5b455
1 parent e2b5ce4
commit 2c5b455
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 2 deletions.
diff --git a/...ss/css-grid/grid-with-aspect-ratio-uses-content-box-height-for-track-sizing-expected.html b/...ss/css-grid/grid-with-aspect-ratio-uses-content-box-height-for-track-sizing-expected.html
@@ -0,0 +1,11 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com">
+</head>
+<body>
+<p>Test passes if there is a filled green square.</p>
+<div style="width:100px; height: 100px; background-color: green;"></div>
+</body>
+</html>
diff --git a/...m-tests/css/css-grid/grid-with-aspect-ratio-uses-content-box-height-for-track-sizing.html b/...m-tests/css/css-grid/grid-with-aspect-ratio-uses-content-box-height-for-track-sizing.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" title="Sammy Gill" href="sammy.gill@apple.com">
+<meta name="assert" content="Grid's definite free space for row track sizing should be the content box logical height when computed from the aspect ratio">
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#algo-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#free-space">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#definite">
+<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html">
+<style>
+.grid {
+  display: grid;
+  width: 100px;
+  border-block: 10px solid green;
+  padding-block: 20px;
+  background: green;
+  aspect-ratio: 5 / 2;
+}
+</style>
+</head>
+<body>
+  <p>Test passes if there is a filled green square.</p>
+  <div class="grid">
+    <div></div>
+  </div>
+</body>
+</html>
diff --git a/Source/WebCore/rendering/RenderBox.cpp b/Source/WebCore/rendering/RenderBox.cpp
@@ -3761,8 +3761,13 @@ LayoutUnit RenderBox::availableLogicalHeightUsing(const Length& h, AvailableLogi
     if (isFlexItem() && downcast<RenderFlexibleBox>(*parent()).useChildOverridingLogicalHeightForPercentageResolution(*this))
         return overridingContentLogicalHeight();
 
-    if (shouldComputeLogicalHeightFromAspectRatio())
-        return blockSizeFromAspectRatio(borderAndPaddingLogicalWidth(), borderAndPaddingLogicalHeight(), style().logicalAspectRatio(), style().boxSizingForAspectRatio(), logicalWidth(), style().aspectRatioType(), isRenderReplaced());
+    if (shouldComputeLogicalHeightFromAspectRatio()) {
+        auto borderAndPaddingLogicalHeight = this->borderAndPaddingLogicalHeight();
+        auto borderBoxLogicalHeight = blockSizeFromAspectRatio(borderAndPaddingLogicalWidth(), borderAndPaddingLogicalHeight, style().logicalAspectRatio(), style().boxSizingForAspectRatio(), logicalWidth(), style().aspectRatioType(), isRenderReplaced());
+        if (heightType == AvailableLogicalHeightType::ExcludeMarginBorderPadding)
+            return borderBoxLogicalHeight - borderAndPaddingLogicalHeight;
+        return borderBoxLogicalHeight;
+    }
 
     if (h.isPercentOrCalculated() && isOutOfFlowPositioned() && !isRenderFragmentedFlow()) {
         // FIXME: This is wrong if the containingBlock has a perpendicular writing mode.