Bug 1660570 [wpt PR 25195] - [css-flex] Use definite cross size and aspect ratio for flex base size, a=testonly
authorDavid Grogan <dgrogan@chromium.org>
Wed, 26 Aug 2020 08:55:29 +0000
changeset 546502 54cc4ecca32bd7b7820b9d51d4265898e5fa3029
parent 546501 90a2631e4e987c618b18742dab0170553f5aadc2
child 546503 35b297a3360247b8f3e6446680b0a3b0d6ff4b3d
push id37735
push userabutkovits@mozilla.com
push dateThu, 27 Aug 2020 21:29:40 +0000
treeherdermozilla-central@109f3a4de567 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1660570, 25195, 704294, 2368321, 800801
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1660570 [wpt PR 25195] - [css-flex] Use definite cross size and aspect ratio for flex base size, a=testonly Automatic update from web-platform-tests [css-flex] Use definite cross size and aspect ratio for flex base size When an aspect-ratio item has a definite cross size, we are supposed to compute the flex base size by multiplying those two. Blink did this when the item had a computed definite cross size, but not when the item had a definite cross size due to stretching. Firefox has the same bug. The modified canvas test relied on the buggy behavior. The tests we now fail also assert the buggy behavior, but are only one-way synced from mozilla's repository, so we can't change them. This fix is behind a flag. Bug: 704294 Change-Id: Ie17c451c7ec81ccb36fb96ff1543885bd7352bcc Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2368321 Reviewed-by: Christian Biesinger <cbiesinger@chromium.org> Commit-Queue: David Grogan <dgrogan@chromium.org> Cr-Commit-Position: refs/heads/master@{#800801} -- wpt-commits: 9503a10b444a62efb325d2b5d5ec393a0188e0ed wpt-pr: 25195
--- a/testing/web-platform/tests/css/css-flexbox/canvas-dynamic-change-001.html
+++ b/testing/web-platform/tests/css/css-flexbox/canvas-dynamic-change-001.html
@@ -1,31 +1,35 @@
 <!DOCTYPE html>
 <meta charset="UTF-8">
 <title>Canvas size dynamic change in flexbox layout</title>
 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-items">
 <meta name="assert" content="This test ensures proper layouting of canvas element as flex-items"/>
 <link href="support/flexbox.css" rel="stylesheet">
 .red {
+  width: 600px;
   height: 400px;
   background: red;
 canvas {
   background: green;
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/resources/check-layout-th.js"></script>
 <div id=log></div>
 <div class="red">
   <div class="flexbox column">
-    <canvas id="canvas" data-expected-height="400"></canvas>
+    <!-- The height=400 attribute makes the aspect ratio be 300x400. 300 from
+         the fallback width of replaced elements. 400 from the attribute.
+	 After stretching to 600px wide, the height should be 800px. -->
+    <canvas id="canvas" data-expected-height="800"></canvas>
 var canvas = document.getElementById('canvas');
 requestAnimationFrame(function() {
   canvas.height = 400;
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-flexbox/flex-aspect-ratio-img-row-006.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<title>Aspect-ratio items with definite cross sizes from stretching</title>
+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item" title="Section B">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#definite-sizes" title="1.">
+<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="Flex base size is derived from aspect ratio when item has definite cross size due to stretching.">
+<p>Test passes if there is a filled green square.</p>
+<!-- Firefox 80 and Chrome 86 fail this test identically. They both show a 150x100 green rectangle. -->
+<div style="display: flex; width: 150px; height: 100px;">
+  <img src="support/200x200-green.png" style="min-width: 0px; flex-shrink: 0;">