[css-flex] Allow indefinite size flex items to be definite wrt resolv…

…ing percentages inside them

https://bugs.webkit.org/show_bug.cgi?id=212264

Reviewed by Manuel Rego Casasnovas.

LayoutTests/imported/w3c:

* web-platform-tests/css/css-flexbox/percentage-heights-003-expected.txt: There were 3 subtests
marked as failures. All of them work fine now.

Source/WebCore:

Implement w3c/csswg-drafts@5b5db39 which modified
the way percentages were resolved in flexible items with indefinite sizes. From now on we can pretend that
they're really definite.

This allows us to mark 3 tests which were testing percentages in flex items as correct.

Based on Blink's crrev.com/1247184 by <cbiesinger@chromium.org>

This is a reland of r263399 which got reverted due to bug 214655. This same patch was previously relanded in
r262124 which got reverted due to the bug fixed in r263389.

* rendering/RenderFlexibleBox.cpp:
(WebCore::RenderFlexibleBox::mainSizeForPercentageResolution): Do only check flex container main size
definiteness when computing the main size for percentage resolution, no need to check flex basis at all.

LayoutTests:

* css3/flexbox/definite-main-size-expected.txt: Updated expectation.
* css3/flexbox/definite-main-size.html: Updated comment.

Canonical link: https://commits.webkit.org/229065@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@266696 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog

@@ -1,3 +1,13 @@
+2020-09-07  Sergio Villar Senin  <svillar@igalia.com>
+
+        [css-flex] Allow indefinite size flex items to be definite wrt resolving percentages inside them
+        https://bugs.webkit.org/show_bug.cgi?id=212264
+
+        Reviewed by Manuel Rego Casasnovas.
+
+        * css3/flexbox/definite-main-size-expected.txt: Updated expectation.
+        * css3/flexbox/definite-main-size.html: Updated comment.
+
 2020-09-02  Sergio Villar Senin  <svillar@igalia.com>
 
         [css-flexbox] min-height: auto not applied to nested flexboxes.

LayoutTests/css3/flexbox/definite-main-size-expected.txt

@@ -9,6 +9,6 @@ auto flex-basis. However, as this is a width, we follow regular width rules and
 
 Simple case of percentage resolution, columns:
 
-auto flex-basis, we should ignore the percentage height here:
+auto flex-basis. This is still definite.
 
 

LayoutTests/css3/flexbox/definite-main-size.html

@@ -61,10 +61,10 @@
   <div class="rect flex-none"></div>
 </div>
 
-<p>auto flex-basis, we should ignore the percentage height here:</p>
+<p>auto flex-basis. This is still definite.</p>
 <div class="flexbox column" style="height: 300px;">
   <div data-expected-height="50">
-    <div style="height: 50%;" data-expected-height="50">
+    <div style="height: 50%;" data-expected-height="25">
       <div class="rect"></div>
     </div>
   </div>

LayoutTests/imported/w3c/ChangeLog

@@ -1,3 +1,13 @@
+2020-09-07  Sergio Villar Senin  <svillar@igalia.com>
+
+        [css-flex] Allow indefinite size flex items to be definite wrt resolving percentages inside them
+        https://bugs.webkit.org/show_bug.cgi?id=212264
+
+        Reviewed by Manuel Rego Casasnovas.
+
+        * web-platform-tests/css/css-flexbox/percentage-heights-003-expected.txt: There were 3 subtests
+        marked as failures. All of them work fine now.
+
 2020-09-06  Chris Dumez  <cdumez@apple.com>
 
         ConvolverNode incorrectly outputs silence because m_reverb is null

LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/percentage-heights-003-expected.txt

@@ -1,30 +1,9 @@
 
-FAIL .flexbox 1 assert_equals: 
-<div class="flexbox column" style="height: 0">
-        <div>
-            <span data-expected-height="100"></span>
-        </div>
-    </div>
-height expected 100 but got 0
-FAIL .flexbox 2 assert_equals: 
-<div class="flexbox column-wrap" style="height: 0">
-       <div>
-            <span data-expected-height="50"></span>
-        </div>
-        <div>
-            <span data-expected-height="50"></span>
-        </div>
-    </div>
-height expected 50 but got 0
+PASS .flexbox 1 
+PASS .flexbox 2 
 PASS .flexbox 3 
 PASS .flexbox 4 
 PASS .flexbox 5 
 PASS .flexbox 6 
-FAIL .flexbox 7 assert_equals: 
-<div class="flexbox vert-wm">
-        <div class="horiz-wm">
-            <span data-expected-height="100"></span>
-        </div>
-    </div>
-height expected 100 but got 0
+PASS .flexbox 7 
 

Source/WebCore/ChangeLog

@@ -1,3 +1,25 @@
+2020-09-07  Sergio Villar Senin  <svillar@igalia.com>
+
+        [css-flex] Allow indefinite size flex items to be definite wrt resolving percentages inside them
+        https://bugs.webkit.org/show_bug.cgi?id=212264
+
+        Reviewed by Manuel Rego Casasnovas.
+
+        Implement https://github.com/w3c/csswg-drafts/commit/5b5db39d21f3658ae2f4d7992daaf822aca178d8 which modified
+        the way percentages were resolved in flexible items with indefinite sizes. From now on we can pretend that
+        they're really definite.
+
+        This allows us to mark 3 tests which were testing percentages in flex items as correct.
+
+        Based on Blink's crrev.com/1247184 by <cbiesinger@chromium.org>
+
+        This is a reland of r263399 which got reverted due to bug 214655. This same patch was previously relanded in
+        r262124 which got reverted due to the bug fixed in r263389.
+
+        * rendering/RenderFlexibleBox.cpp:
+        (WebCore::RenderFlexibleBox::mainSizeForPercentageResolution): Do only check flex container main size
+        definiteness when computing the main size for percentage resolution, no need to check flex basis at all.
+
 2020-09-02  Sergio Villar Senin  <svillar@igalia.com>
 
         [css-flexbox] min-height: auto not applied to nested flexboxes.

Source/WebCore/rendering/RenderFlexibleBox.cpp

@@ -1194,20 +1194,11 @@ Optional<LayoutUnit> RenderFlexibleBox::crossSizeForPercentageResolution(const R
 Optional<LayoutUnit> RenderFlexibleBox::mainSizeForPercentageResolution(const RenderBox& child)
 {
     ASSERT(hasOrthogonalFlow(child));
-    // This function implements section 9.8. Definite and Indefinite Sizes, case
-    // 2) of the flexbox spec.
-    // We need to check for the flexbox to have a definite main size, and for the
-    // flex item to have a definite flex basis.
-    const Length& flexBasis = flexBasisForChild(child);
-    if (!mainAxisLengthIsDefinite(child, flexBasis))
+    // This function implements section 9.8. Definite and Indefinite Sizes, case 2) of the flexbox spec.
+    // If the flex container has a definite main size the flex item post-flexing main size is also treated
+    // as definite. We make up a percentage to check whether we have a definite size.
+    if (!mainAxisLengthIsDefinite(child, Length(0, Percent)))
         return WTF::nullopt;
-    if (!flexBasis.isPercentOrCalculated()) {
-        // If flex basis had a percentage, our size is guaranteed to be definite or
-        // the flex item's size could not be definite. Otherwise, we make up a
-        // percentage to check whether we have a definite size.
-        if (!mainAxisLengthIsDefinite(child, Length(0, Percent)))
-            return WTF::nullopt;
-    }
 
     return child.hasOverrideContentLogicalHeight() ? Optional<LayoutUnit>(child.overrideContentLogicalHeight() - child.scrollbarLogicalHeight()) : WTF::nullopt;
 }