[AspectRatio] Fix flex-aspect-ratio-026.html in legacy
Implement min/max size transfers for replaced elements:
https://drafts.csswg.org/css-sizing-4/#aspect-ratio-size-transfers
Mark both flex-aspect-ratio-025.html and flex-aspect-ratio-026.html as
passing for legacy and update these tests to take both main and cross
size padding into account.
Add flex-aspect-ratio-027.html to verify that min/max-size transfer does not always happen just because aspect-ratio is present.
Bug: 1164135
Change-Id: I20a26cbe256ae5d6a66c5763c7b12f814a3d7ef6
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2721723
Commit-Queue: Rob Buis <rbuis@igalia.com>
Reviewed-by: Christian Biesinger <cbiesinger@chromium.org>
Cr-Commit-Position: refs/heads/master@{#859812}
diff --git a/css/css-sizing/aspect-ratio/flex-aspect-ratio-025.html b/css/css-sizing/aspect-ratio/flex-aspect-ratio-025.html
index fa9ce8e..c4ff811 100644
--- a/css/css-sizing/aspect-ratio/flex-aspect-ratio-025.html
+++ b/css/css-sizing/aspect-ratio/flex-aspect-ratio-025.html
@@ -14,6 +14,7 @@
.item {
background: green;
padding-top: 15px;
+ padding-left: 10px;
box-sizing: border-box;
}
</style>
@@ -49,25 +50,25 @@
because its value contains 'auto'. -->
<div class="flexContainer" style="width: auto;">
<!-- The content-box height 10px is transferred to the main axis,
- yielding a resolved flex base size of 200px. -->
- <div class="item" style="min-width:0; height: 25px; aspect-ratio: auto 20/1;"></div>
+ yielding a resolved flex base size of 190px. -->
+ <div class="item" style="min-width:0; height: 25px; aspect-ratio: auto 19/1;"></div>
</div>
<div class="flexContainer">
<!-- The content-box height 10px is transferred to the main axis,
- yielding a resolved min-width:auto of 200px. -->
- <div class="item" style="height: 25px; aspect-ratio: auto 20/1;"></div>
+ yielding a resolved min-width:auto of 190px. -->
+ <div class="item" style="height: 25px; aspect-ratio: auto 19/1;"></div>
</div>
<div class="flexContainer">
<!-- The content-box min-height 10px is transferred to the main axis,
- yielding a resolved min-width:auto of 200px. -->
- <div class="item" style="min-height: 25px; aspect-ratio: auto 20/1;"></div>
+ yielding a resolved min-width:auto of 190px. -->
+ <div class="item" style="min-height: 25px; aspect-ratio: auto 19/1;"></div>
</div>
<div class="flexContainer">
<!-- The content-box height 10px (clamped by max-height) is transferred
- to the main axis, yielding a resolved min-width:auto of 200px. -->
- <div class="item" style="max-height: 25px; height: 100px; aspect-ratio: auto 20/1;"></div>
+ to the main axis, yielding a resolved min-width:auto of 190px. -->
+ <div class="item" style="max-height: 25px; height: 100px; aspect-ratio: auto 19/1;"></div>
</div>
</html>
diff --git a/css/css-sizing/aspect-ratio/flex-aspect-ratio-026.html b/css/css-sizing/aspect-ratio/flex-aspect-ratio-026.html
index 1df1446..c4a2508 100644
--- a/css/css-sizing/aspect-ratio/flex-aspect-ratio-026.html
+++ b/css/css-sizing/aspect-ratio/flex-aspect-ratio-026.html
@@ -15,6 +15,7 @@
.item {
background: green;
padding-left: 15px;
+ padding-top: 10px;
box-sizing: border-box;
}
.item > div {
@@ -53,25 +54,25 @@
because its value contains 'auto'. -->
<div class="flexContainer" style="height: auto;">
<!-- The content-box width 10px is transferred to the main axis,
- yielding a resolved flex base size of 200px. -->
- <div class="item" style="min-height:0; width: 25px; aspect-ratio: auto 1/20;"><div></div></div>
+ yielding a resolved flex base size of 190px. -->
+ <div class="item" style="min-height:0; width: 25px; aspect-ratio: auto 1/19;"><div></div></div>
</div>
<div class="flexContainer">
<!-- The content-box width 10px is transferred to the main axis,
- yielding a resolved min-height:auto of 200px. -->
- <div class="item" style="width: 25px; aspect-ratio: auto 1/20;"><div></div></div>
+ yielding a resolved min-height:auto of 190px. -->
+ <div class="item" style="width: 25px; aspect-ratio: auto 1/19;"><div></div></div>
</div>
<div class="flexContainer">
<!-- The content-box min-width 10px is transferred to the main axis,
- yielding a resolved min-height:auto of 200px. -->
- <div class="item" style="min-width: 25px; aspect-ratio: auto 1/20;"><div></div></div>
+ yielding a resolved min-height:auto of 190px. -->
+ <div class="item" style="min-width: 25px; aspect-ratio: auto 1/19;"><div></div></div>
</div>
<div class="flexContainer">
<!-- The content-box width 10px (clamped by max-width) is transferred to the main axis,
- yielding a resolved min-height:auto of 200px. -->
- <div class="item" style="max-width: 25px; width: 100px; aspect-ratio: auto 1/20;"><div></div></div>
+ yielding a resolved min-height:auto of 190px. -->
+ <div class="item" style="max-width: 25px; width: 100px; aspect-ratio: auto 1/19;"><div></div></div>
</div>
</html>
diff --git a/css/css-sizing/aspect-ratio/flex-aspect-ratio-027.html b/css/css-sizing/aspect-ratio/flex-aspect-ratio-027.html
new file mode 100644
index 0000000..c10f1f3
--- /dev/null
+++ b/css/css-sizing/aspect-ratio/flex-aspect-ratio-027.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<title>CSS aspect-ratio: Row flexbox and transferred min/max-size</title>
+<link rel="author" title="Google LLC" href="https://www.google.com/">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div style="display: flex; flex-direction: row;">
+ <div style="background: green; width: 40px; height: 50px;" ></div>
+ <div style="background: green; width: 60px; max-height: 50px; aspect-ratio: 1/1;"></div>
+</div>
+<div style="display: flex; flex-direction: row;">
+ <div style="background: green; width: 40px; height: 50px;" ></div>
+ <div style="background: green; width: 60px; height: 60px; max-height: 50px; aspect-ratio: 1/1;"></div>
+</div>
