Attachment 479079 Details for Bug 272527 – Patch

[patch] Patch

bug-272527-20260414195510.patch (text/plain), 7.27 KB, created by alan on 2026-04-14 19:55:11 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: alan

Created: 2026-04-14 19:55:11 PDT

Size: 7.27 KB

patch

obsolete

>From 25c7b016e1b75d7e5b3b8080763a9f90017bad84 Mon Sep 17 00:00:00 2001
>From: Alan Baradlay <zalan@apple.com>
>Date: Tue, 14 Apr 2026 19:40:14 -0700
>Subject: [PATCH] Elements with border, position: absolute and aspect-ratio: 1
> are not square https://bugs.webkit.org/show_bug.cgi?id=272527
> <rdar://problem/126292577>
>
>Reviewed by NOBODY (OOPS!).
>
>Given:
>
>  div {
>      position: absolute;
>      height: 100px;
>      aspect-ratio: 1 / 1;
>      border: 150px solid;
>  }
>
>The div should be a 400x400 square (100px content + 150px border on
>each side). Instead it is 700x400 - the border was counted twice in the width.
>
>For abspos elements with auto width and aspect-ratio, the width is
>computed from the height via computeLogicalWidthFromAspectRatio().
>This function returns a border-box value (400px).
>
>But the caller (computeOutOfFlowPositionedLogicalWidth) expects a
>content-box value. Every other code path in that function returns
>content-box, and the caller adds border + padding at the end.
>So the border was added once inside the aspect-ratio function and again by the caller: 100 + 300 + 300 = 700.
>
>The fix converts the aspect-ratio result to content-box (by subtracting
>border+padding) so the caller can add it back correctly. When
>box-sizing is border-box, the result is already in the right
>coordinate space for the border-box path at the call site, so no
>subtraction is needed.
>
>* LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/abspos-aspect-ratio-border.html: Added.
>* Source/WebCore/rendering/RenderBox.cpp:
>(WebCore::RenderBox::computeOutOfFlowPositionedLogicalWidthUsing):
>
>Per CSS Sizing 4 (https://drafts.csswg.org/css-sizing-4/#aspect-ratio),
>aspect-ratio maps between the content box dimensions by default (when
>box-sizing is content-box). Per CSS Positioned Layout / CSS2 10.3.7
>(https://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width),
>the width of an abspos element is resolved through a constraint
>equation that operates on content-box values, with border + padding
>added at the end.
>---
> Source/WebCore/rendering/RenderBox.cpp        |  6 +-
> .../abspos-aspect-ratio-border-expected.txt   |  8 ++
> .../abspos-aspect-ratio-border.html           | 73 +++++++++++++++++++
> 3 files changed, 85 insertions(+), 2 deletions(-)
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/abspos-aspect-ratio-border-expected.txt
> create mode 100644 LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/abspos-aspect-ratio-border.html
>
>diff --git a/Source/WebCore/rendering/RenderBox.cpp b/Source/WebCore/rendering/RenderBox.cpp
>index 341f8f27a350..c6d2959c88d9 100644
>--- a/Source/WebCore/rendering/RenderBox.cpp
>+++ b/Source/WebCore/rendering/RenderBox.cpp
>@@ -4275,8 +4275,10 @@ template<typename SizeType> LayoutUnit RenderBox::computeOutOfFlowPositionedLogi
>                 }
>                 return 0_lu;
>             } else {
>-                if (shouldComputeLogicalWidthFromAspectRatio())
>-                    return computeLogicalWidthFromAspectRatio();
>+                if (shouldComputeLogicalWidthFromAspectRatio()) {
>+                    auto logicalWidth = computeLogicalWidthFromAspectRatio();
>+                    return style().boxSizingForAspectRatio() == BoxSizing::BorderBox ? logicalWidth : logicalWidth - inlineConstraints.bordersPlusPadding();
>+                }
>                 return fallback();
>             }
>         },
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/abspos-aspect-ratio-border-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/abspos-aspect-ratio-border-expected.txt
>new file mode 100644
>index 000000000000..b06415c8944f
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/abspos-aspect-ratio-border-expected.txt
>@@ -0,0 +1,8 @@
>+
>+PASS aspect-ratio 1/1 with border on abspos
>+PASS aspect-ratio 1/1 with padding on abspos
>+PASS aspect-ratio 1/1 with border and padding on abspos
>+PASS aspect-ratio 2/1 with border on abspos
>+FAIL aspect-ratio 1/1 with border-box sizing on abspos assert_equals: Should be a square with box-sizing: border-box expected 100 but got 60
>+PASS aspect-ratio 1/1 without border on abspos (sanity)
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/abspos-aspect-ratio-border.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/abspos-aspect-ratio-border.html
>new file mode 100644
>index 000000000000..24f3fdcb20ce
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/abspos-aspect-ratio-border.html
>@@ -0,0 +1,73 @@
>+<!DOCTYPE html>
>+<script src="/resources/testharness.js"></script>
>+<script src="/resources/testharnessreport.js"></script>
>+<style>
>+.container {
>+    position: relative;
>+    width: 800px;
>+    height: 600px;
>+}
>+</style>
>+
>+<div class="container">
>+    
>+    <div id="t1" style="position: absolute; height: 100px; aspect-ratio: 1/1; border: 150px solid;"></div>
>+
>+    
>+    <div id="t2" style="position: absolute; height: 100px; aspect-ratio: 1/1; padding: 150px;"></div>
>+
>+    
>+    <div id="t3" style="position: absolute; height: 80px; aspect-ratio: 1/1; border: 50px solid; padding: 30px;"></div>
>+
>+    
>+    <div id="t4" style="position: absolute; height: 100px; aspect-ratio: 2/1; border: 50px solid;"></div>
>+
>+    
>+    <div id="t5" style="position: absolute; height: 100px; aspect-ratio: 1/1; border: 20px solid; box-sizing: border-box;"></div>
>+
>+    
>+    <div id="t6" style="position: absolute; height: 100px; aspect-ratio: 1/1;"></div>
>+</div>
>+
>+<script>
>+function dims(id) {
>+    var el = document.getElementById(id);
>+    return { w: el.offsetWidth, h: el.offsetHeight };
>+}
>+
>+test(function() {
>+    var d = dims("t1");
>+    assert_equals(d.w, d.h, "Should be a square (border 150px, content 100px)");
>+    assert_equals(d.w, 400, "100 content + 150*2 border = 400");
>+}, "aspect-ratio 1/1 with border on abspos");
>+
>+test(function() {
>+    var d = dims("t2");
>+    assert_equals(d.w, d.h, "Should be a square (padding 150px, content 100px)");
>+    assert_equals(d.w, 400, "100 content + 150*2 padding = 400");
>+}, "aspect-ratio 1/1 with padding on abspos");
>+
>+test(function() {
>+    var d = dims("t3");
>+    assert_equals(d.w, d.h, "Should be a square (border 50px + padding 30px, content 80px)");
>+    assert_equals(d.w, 240, "80 content + (50+30)*2 = 240");
>+}, "aspect-ratio 1/1 with border and padding on abspos");
>+
>+test(function() {
>+    var d = dims("t4");
>+    assert_equals(d.h, 200, "100 content + 50*2 border = 200");
>+    assert_equals(d.w, 300, "200 content + 50*2 border = 300");
>+}, "aspect-ratio 2/1 with border on abspos");
>+
>+test(function() {
>+    var d = dims("t5");
>+    assert_equals(d.w, d.h, "Should be a square with box-sizing: border-box");
>+    assert_equals(d.w, 100, "border-box: 100px total");
>+}, "aspect-ratio 1/1 with border-box sizing on abspos");
>+
>+test(function() {
>+    var d = dims("t6");
>+    assert_equals(d.w, 100, "No border: just 100px content");
>+    assert_equals(d.h, 100);
>+}, "aspect-ratio 1/1 without border on abspos (sanity)");
>+</script>

Actions: View | Formatted Diff | Diff

Attachments on bug 272527: 470863 | 470865 | 470866 | 470878 | 470923 | 479078 | 479079 | 479085