[aspect-ratio] Use correct box-sizing when calculating block size

https://bugs.webkit.org/show_bug.cgi?id=243369 Reviewed by Darin Adler. When calculating block size and having both box-sizing and "auto && <ratio>" aspect ratio specified use the specified box-sizing and not the box-sizing implied by "auto && <ratio>". * LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/block-aspect-ratio-033.html: * Source/WebCore/rendering/RenderBox.cpp: (WebCore::RenderBox::computeLogicalHeight const): Canonical link: https://commits.webkit.org/253064@main
WebKit · Aug 3, 2022 · 871d8bc · 871d8bc
1 parent a9c8a56
commit 871d8bc
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 1 deletion.
diff --git a/...ed/w3c/web-platform-tests/css/css-sizing/aspect-ratio/block-aspect-ratio-050-expected.xht b/...ed/w3c/web-platform-tests/css/css-sizing/aspect-ratio/block-aspect-ratio-050-expected.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: green;
+  height: 100px;
+  width: 100px;
+  }
+  ]]></style>
+ </head>
+ <body>
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+  <div></div>
+ </body>
+</html>
diff --git a/...s/imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/block-aspect-ratio-050.html b/...s/imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/block-aspect-ratio-050.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<title>CSS aspect-ratio: Use correct box-sizing when calculating block size</title>
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#valdef-aspect-ratio-auto--ratio">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-minimum">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
+<meta name="assert" content="CSS aspect-ratio: Use correct box-sizing when calculating block size.">
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div style="background: green; width: 100px; aspect-ratio: auto 1/1; box-sizing: border-box; padding-top:10px; padding-left: 50px">
+    <div style="height: 90px"></div>
+</div>
diff --git a/Source/WebCore/rendering/RenderBox.cpp b/Source/WebCore/rendering/RenderBox.cpp
@@ -3189,7 +3189,7 @@ RenderBox::LogicalExtentComputedValues RenderBox::computeLogicalHeight(LayoutUni
             if (computedValues.m_extent != LayoutUnit::max())
                 intrinsicHeight = computedValues.m_extent;
             if (shouldComputeLogicalHeightFromAspectRatio()) {
-                if (intrinsicHeight && style().boxSizingForAspectRatio() == BoxSizing::ContentBox)
+                if (intrinsicHeight && style().boxSizing() == BoxSizing::ContentBox)
                     *intrinsicHeight -= RenderBox::borderBefore() + RenderBox::paddingBefore() + RenderBox::borderAfter() + RenderBox::paddingAfter();
                 heightResult = blockSizeFromAspectRatio(horizontalBorderAndPaddingExtent(), verticalBorderAndPaddingExtent(), style().logicalAspectRatio(), style().boxSizingForAspectRatio(), logicalWidth());
             } else {