[css-flex] Change some test expectations for image flex items

When an item with an aspect ratio stretches to the container's cross
size causing the item's cross size to be considered definite, the flex
base size can be computed differently.

Specifically, the flex base size calculation could fall under the
purview of https://drafts.csswg.org/css-flexbox/#algo-main-item part B,
which requires the item to have a definite cross size.

Both chrome 86 and firefox 82b2 get this wrong.

Bug: 704294
Change-Id: I8410be91d3006ee9d055562887fc5c3fe7b9aa5e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2428164Reviewed-by: Christian Biesinger <cbiesinger@chromium.org>
Commit-Queue: David Grogan <dgrogan@chromium.org>
Cr-Commit-Position: refs/heads/master@{#810867}

third_party/blink/web_tests/TestExpectations

@@ -760,7 +760,7 @@ crbug.com/1111708 external/wpt/css/css-flexbox/flexbox_justifycontent-center-ove
 crbug.com/1111128 external/wpt/css/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-min-height-auto-002b.html [ Failure ]
 crbug.com/1128262 external/wpt/css/css-flexbox/table-as-item-specified-width.html [ Failure ]
 
-# These have some incorrect expectations and will supposedly be deleted soon (Sep 2020) by mozilla.
+# These are scheduled to deleted by mozilla. https://bugzilla.mozilla.org/show_bug.cgi?id=1664938
 crbug.com/704294 external/wpt/css/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-intrinsic-ratio-003.html [ Failure ]
 crbug.com/704294 external/wpt/css/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-intrinsic-ratio-003v.html [ Failure ]
 crbug.com/704294 external/wpt/css/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-intrinsic-ratio-004.html [ Failure ]

third_party/blink/web_tests/external/wpt/css/css-flexbox/image-as-flexitem-size-003-expected.txt

-This is a testharness.js-based test.
-FAIL .flexbox > img 1 assert_equals: 
-<img src="support/solidblue.png" data-expected-width="16" data-expected-height="40">
-width expected 16 but got 40
-PASS .flexbox > img 2
-PASS .flexbox > img 3
-PASS .flexbox > img 4
-FAIL .flexbox > img 5 assert_equals: 
-<img src="support/solidblue.png" style="min-width: 34px" data-expected-width="34" data-expected-height="40">
-width expected 34 but got 40
-FAIL .flexbox > img 6 assert_equals: 
-<img src="support/solidblue.png" style="min-height: 34px" data-expected-width="34" data-expected-height="40">
-width expected 34 but got 40
-FAIL .flexbox > img 7 assert_equals: 
-<img src="support/solidblue.png" style="min-width: 30px;
-                                              min-height: 34px" data-expected-width="34" data-expected-height="40">
-width expected 34 but got 40
-FAIL .flexbox > img 8 assert_equals: 
-<img src="support/solidblue.png" style="min-width: 34px;
-                                              min-height: 30px" data-expected-width="34" data-expected-height="40">
-width expected 34 but got 40
-PASS .flexbox > img 9
-PASS .flexbox > img 10
-PASS .flexbox > img 11
-PASS .flexbox > img 12
-PASS .flexbox > img 13
-PASS .flexbox > img 14
-PASS .flexbox > img 15
-PASS .flexbox > img 16
-PASS .flexbox > img 17
-PASS .flexbox > img 18
-Harness: the test ran to completion.
-

third_party/blink/web_tests/external/wpt/css/css-flexbox/image-as-flexitem-size-003.html

@@ -46,7 +46,7 @@
 
     <!-- Row 1: no special sizing: -->
     <div class="flexbox">
-      <img src="support/solidblue.png" data-expected-width="16" data-expected-height="40">
+      <img src="support/solidblue.png" data-expected-width="40" data-expected-height="40">
     </div>
     <br>
 
@@ -64,18 +64,18 @@
 
     <!-- Row 3: min main-size OR min cross-size, or both -->
     <div class="flexbox">
-      <img src="support/solidblue.png" style="min-width: 34px" data-expected-width="34" data-expected-height="40">
+      <img src="support/solidblue.png" style="min-width: 34px" data-expected-width="40" data-expected-height="40">
     </div>
     <div class="flexbox">
-      <img src="support/solidblue.png" style="min-height: 34px" data-expected-width="34" data-expected-height="40">
+      <img src="support/solidblue.png" style="min-height: 34px" data-expected-width="40" data-expected-height="40">
     </div>
     <div class="flexbox">
       <img src="support/solidblue.png" style="min-width: 30px;
-                                              min-height: 34px" data-expected-width="34" data-expected-height="40">
+                                              min-height: 34px" data-expected-width="40" data-expected-height="40">
     </div>
     <div class="flexbox">
       <img src="support/solidblue.png" style="min-width: 34px;
-                                              min-height: 30px" data-expected-width="34" data-expected-height="40">
+                                              min-height: 30px" data-expected-width="40" data-expected-height="40">
     </div>
     <br>
 

third_party/blink/web_tests/external/wpt/css/css-flexbox/image-as-flexitem-size-003v-expected.txt

-This is a testharness.js-based test.
-FAIL .flexbox > img 1 assert_equals: 
-<img src="support/solidblue.png" data-expected-width="16" data-expected-height="40">
-width expected 16 but got 40
-PASS .flexbox > img 2
-PASS .flexbox > img 3
-PASS .flexbox > img 4
-FAIL .flexbox > img 5 assert_equals: 
-<img src="support/solidblue.png" style="min-width: 34px" data-expected-width="34" data-expected-height="40">
-width expected 34 but got 40
-FAIL .flexbox > img 6 assert_equals: 
-<img src="support/solidblue.png" style="min-height: 34px" data-expected-width="34" data-expected-height="40">
-width expected 34 but got 40
-FAIL .flexbox > img 7 assert_equals: 
-<img src="support/solidblue.png" style="min-width: 30px;
-                                              min-height: 34px" data-expected-width="34" data-expected-height="40">
-width expected 34 but got 40
-FAIL .flexbox > img 8 assert_equals: 
-<img src="support/solidblue.png" style="min-width: 34px;
-                                              min-height: 30px" data-expected-width="34" data-expected-height="40">
-width expected 34 but got 40
-PASS .flexbox > img 9
-PASS .flexbox > img 10
-PASS .flexbox > img 11
-PASS .flexbox > img 12
-PASS .flexbox > img 13
-PASS .flexbox > img 14
-PASS .flexbox > img 15
-PASS .flexbox > img 16
-PASS .flexbox > img 17
-PASS .flexbox > img 18
-Harness: the test ran to completion.
-

third_party/blink/web_tests/external/wpt/css/css-flexbox/image-as-flexitem-size-003v.html

@@ -49,7 +49,7 @@
 
     <!-- Row 1: no special sizing: -->
     <div class="flexbox">
-      <img src="support/solidblue.png" data-expected-width="16" data-expected-height="40">
+      <img src="support/solidblue.png" data-expected-width="40" data-expected-height="40">
     </div>
     <br>
 
@@ -67,18 +67,18 @@
 
     <!-- Row 3: min main-size OR min cross-size, or both -->
     <div class="flexbox">
-      <img src="support/solidblue.png" style="min-width: 34px" data-expected-width="34" data-expected-height="40">
+      <img src="support/solidblue.png" style="min-width: 34px" data-expected-width="40" data-expected-height="40">
     </div>
     <div class="flexbox">
-      <img src="support/solidblue.png" style="min-height: 34px" data-expected-width="34" data-expected-height="40">
+      <img src="support/solidblue.png" style="min-height: 34px" data-expected-width="40" data-expected-height="40">
     </div>
     <div class="flexbox">
       <img src="support/solidblue.png" style="min-width: 30px;
-                                              min-height: 34px" data-expected-width="34" data-expected-height="40">
+                                              min-height: 34px" data-expected-width="40" data-expected-height="40">
     </div>
     <div class="flexbox">
       <img src="support/solidblue.png" style="min-width: 34px;
-                                              min-height: 30px" data-expected-width="34" data-expected-height="40">
+                                              min-height: 30px" data-expected-width="40" data-expected-height="40">
     </div>
     <br>
 

third_party/blink/web_tests/external/wpt/css/css-flexbox/image-as-flexitem-size-004-expected.txt

-This is a testharness.js-based test.
-FAIL .flexbox > img 1 assert_equals: 
-<img src="support/solidblue.png" data-expected-width="40" data-expected-height="16">
-height expected 16 but got 40
-PASS .flexbox > img 2
-PASS .flexbox > img 3
-PASS .flexbox > img 4
-FAIL .flexbox > img 5 assert_equals: 
-<img src="support/solidblue.png" style="min-width: 34px" data-expected-width="40" data-expected-height="34">
-height expected 34 but got 40
-FAIL .flexbox > img 6 assert_equals: 
-<img src="support/solidblue.png" style="min-height: 34px" data-expected-width="40" data-expected-height="34">
-height expected 34 but got 40
-FAIL .flexbox > img 7 assert_equals: 
-<img src="support/solidblue.png" style="min-width: 30px;
-                                              min-height: 34px" data-expected-width="40" data-expected-height="34">
-height expected 34 but got 40
-FAIL .flexbox > img 8 assert_equals: 
-<img src="support/solidblue.png" style="min-width: 34px;
-                                              min-height: 30px" data-expected-width="40" data-expected-height="34">
-height expected 34 but got 40
-PASS .flexbox > img 9
-PASS .flexbox > img 10
-PASS .flexbox > img 11
-PASS .flexbox > img 12
-PASS .flexbox > img 13
-PASS .flexbox > img 14
-PASS .flexbox > img 15
-PASS .flexbox > img 16
-PASS .flexbox > img 17
-PASS .flexbox > img 18
-Harness: the test ran to completion.
-

third_party/blink/web_tests/external/wpt/css/css-flexbox/image-as-flexitem-size-004.html

@@ -46,7 +46,7 @@
 
     <!-- Row 1: no special sizing: -->
     <div class="flexbox">
-      <img src="support/solidblue.png" data-expected-width="40" data-expected-height="16">
+      <img src="support/solidblue.png" data-expected-width="40" data-expected-height="40">
     </div>
     <br>
 
@@ -64,18 +64,18 @@
 
     <!-- Row 3: min main-size OR min cross-size, or both -->
     <div class="flexbox">
-      <img src="support/solidblue.png" style="min-width: 34px" data-expected-width="40" data-expected-height="34">
+      <img src="support/solidblue.png" style="min-width: 34px" data-expected-width="40" data-expected-height="40">
     </div>
     <div class="flexbox">
-      <img src="support/solidblue.png" style="min-height: 34px" data-expected-width="40" data-expected-height="34">
+      <img src="support/solidblue.png" style="min-height: 34px" data-expected-width="40" data-expected-height="40">
     </div>
     <div class="flexbox">
       <img src="support/solidblue.png" style="min-width: 30px;
-                                              min-height: 34px" data-expected-width="40" data-expected-height="34">
+                                              min-height: 34px" data-expected-width="40" data-expected-height="40">
     </div>
     <div class="flexbox">
       <img src="support/solidblue.png" style="min-width: 34px;
-                                              min-height: 30px" data-expected-width="40" data-expected-height="34">
+                                              min-height: 30px" data-expected-width="40" data-expected-height="40">
     </div>
     <br>
 

third_party/blink/web_tests/external/wpt/css/css-flexbox/image-as-flexitem-size-004v-expected.txt

-This is a testharness.js-based test.
-FAIL .flexbox > img 1 assert_equals: 
-<img src="support/solidblue.png" data-expected-width="40" data-expected-height="16">
-height expected 16 but got 40
-PASS .flexbox > img 2
-PASS .flexbox > img 3
-PASS .flexbox > img 4
-FAIL .flexbox > img 5 assert_equals: 
-<img src="support/solidblue.png" style="min-width: 34px" data-expected-width="40" data-expected-height="34">
-height expected 34 but got 40
-FAIL .flexbox > img 6 assert_equals: 
-<img src="support/solidblue.png" style="min-height: 34px" data-expected-width="40" data-expected-height="34">
-height expected 34 but got 40
-FAIL .flexbox > img 7 assert_equals: 
-<img src="support/solidblue.png" style="min-width: 30px;
-                                              min-height: 34px" data-expected-width="40" data-expected-height="34">
-height expected 34 but got 40
-FAIL .flexbox > img 8 assert_equals: 
-<img src="support/solidblue.png" style="min-width: 34px;
-                                              min-height: 30px" data-expected-width="40" data-expected-height="34">
-height expected 34 but got 40
-PASS .flexbox > img 9
-PASS .flexbox > img 10
-PASS .flexbox > img 11
-PASS .flexbox > img 12
-PASS .flexbox > img 13
-PASS .flexbox > img 14
-PASS .flexbox > img 15
-PASS .flexbox > img 16
-PASS .flexbox > img 17
-PASS .flexbox > img 18
-Harness: the test ran to completion.
-

third_party/blink/web_tests/external/wpt/css/css-flexbox/image-as-flexitem-size-004v.html

@@ -49,7 +49,7 @@
 
     <!-- Row 1: no special sizing: -->
     <div class="flexbox">
-      <img src="support/solidblue.png" data-expected-width="40" data-expected-height="16">
+      <img src="support/solidblue.png" data-expected-width="40" data-expected-height="40">
     </div>
     <br>
 
@@ -67,18 +67,18 @@
 
     <!-- Row 3: min main-size OR min cross-size, or both -->
     <div class="flexbox">
-      <img src="support/solidblue.png" style="min-width: 34px" data-expected-width="40" data-expected-height="34">
+      <img src="support/solidblue.png" style="min-width: 34px" data-expected-width="40" data-expected-height="40">
     </div>
     <div class="flexbox">
-      <img src="support/solidblue.png" style="min-height: 34px" data-expected-width="40" data-expected-height="34">
+      <img src="support/solidblue.png" style="min-height: 34px" data-expected-width="40" data-expected-height="40">
     </div>
     <div class="flexbox">
       <img src="support/solidblue.png" style="min-width: 30px;
-                                              min-height: 34px" data-expected-width="40" data-expected-height="34">
+                                              min-height: 34px" data-expected-width="40" data-expected-height="40">
     </div>
     <div class="flexbox">
       <img src="support/solidblue.png" style="min-width: 34px;
-                                              min-height: 30px" data-expected-width="40" data-expected-height="34">
+                                              min-height: 30px" data-expected-width="40" data-expected-height="40">
     </div>
     <br>