Use align-content when calculating the static position of absolutely-…

…positioned flexbox children.

https://bugs.webkit.org/show_bug.cgi?id=221472
rdar://74278896

Reviewed by Sergio Villar Senin.

Absolutely-positioned children of multi-line flex containers were not taking into account
the value of align-content. Since abspos children are statically positioned as if they
were the only flex item, we must compute the alignment of the hypothetical flex line that
they would be on.

* Source/WebCore/rendering/RenderFlexibleBox.cpp:
(WebCore::RenderFlexibleBox::staticCrossAxisPositionForPositionedChild const):
    Added a lambda for computing the alignment offset of the hypothetical flex line that
    an abspos child of a flex container lives on. We don't fully implement the spec
    at this time since there is a webcompat issue for fallback behavior for
    align-content: stretch. We maintain our current behavior and compatibility with all other
    engines and we compute position as if the hypothetical flex line stretches to fill the container.

(WebCore::RenderFlexibleBox::availableAlignmentSpaceForChild const):
(WebCore::RenderFlexibleBox::availableAlignmentSpaceForChild): Deleted.
    Made into a const member function.
(WebCore::RenderFlexibleBox::staticCrossAxisPositionForPositionedChild): Deleted.
    Made into a const member function.
* Source/WebCore/rendering/RenderFlexibleBox.h:

LayoutTests:
    Rebaseline css/css-flexbox/abspos tests.
* LayoutTests/TestExpectations:
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-001-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-002-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-003-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-004-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-005-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-006-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-007-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-008-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-rtl-001-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-rtl-002-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-vertWM-001-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-vertWM-002-expected.txt:

Canonical link: https://commits.webkit.org/253389@main

LayoutTests/TestExpectations

@@ -4407,7 +4407,6 @@ webkit.org/b/233196 imported/w3c/web-platform-tests/css/css-flexbox/percentage-h
 
 # Static position alignment in Flexbox.
 webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-safe-001.html [ ImageOnlyFailure ]
-webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-fallback-align-content-001.html [ ImageOnlyFailure ]
 
 # Tables as flex items.
 webkit.org/b/221473 imported/w3c/web-platform-tests/css/css-flexbox/table-as-item-min-height-1.html [ ImageOnlyFailure ]

LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-001-expected.txt

@@ -10,55 +10,31 @@
 
 
 PASS .container > div 1
-FAIL .container > div 2 assert_equals:
-<div class="container" style="align-content: baseline"><div data-offset-x="2" data-offset-y="1"></div></div>
-offsetTop expected 1 but got 3
+PASS .container > div 2
 FAIL .container > div 3 assert_equals:
 <div class="container" style="align-content: last baseline"><div data-offset-x="2" data-offset-y="5"></div></div>
-offsetTop expected 5 but got 3
-FAIL .container > div 4 assert_equals:
-<div class="container" style="align-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div>
-offsetTop expected 1 but got 3
+offsetTop expected 5 but got 1
+PASS .container > div 4
 PASS .container > div 5
 PASS .container > div 6
 PASS .container > div 7
 PASS .container > div 8
-FAIL .container > div 9 assert_equals:
-<div class="container" style="align-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
-offsetTop expected 1 but got 3
-FAIL .container > div 10 assert_equals:
-<div class="container" style="align-content: end"><div data-offset-x="2" data-offset-y="5"></div></div>
-offsetTop expected 5 but got 3
-FAIL .container > div 11 assert_equals:
-<div class="container" style="align-content: flex-start"><div data-offset-x="2" data-offset-y="1"></div></div>
-offsetTop expected 1 but got 3
-FAIL .container > div 12 assert_equals:
-<div class="container" style="align-content: flex-end"><div data-offset-x="2" data-offset-y="5"></div></div>
-offsetTop expected 5 but got 3
+PASS .container > div 9
+PASS .container > div 10
+PASS .container > div 11
+PASS .container > div 12
 PASS .container > div 13
-FAIL .container > div 14 assert_equals:
-<div class="container" style="align-content: baseline"><div data-offset-x="2" data-offset-y="1"></div></div>
-offsetTop expected 1 but got -1
+PASS .container > div 14
 FAIL .container > div 15 assert_equals:
 <div class="container" style="align-content: last baseline"><div data-offset-x="2" data-offset-y="-3"></div></div>
-offsetTop expected -3 but got -1
-FAIL .container > div 16 assert_equals:
-<div class="container" style="align-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div>
-offsetTop expected 1 but got -1
+offsetTop expected -3 but got 1
+PASS .container > div 16
 PASS .container > div 17
 PASS .container > div 18
 PASS .container > div 19
 PASS .container > div 20
-FAIL .container > div 21 assert_equals:
-<div class="container" style="align-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
-offsetTop expected 1 but got -1
-FAIL .container > div 22 assert_equals:
-<div class="container" style="align-content: end"><div data-offset-x="2" data-offset-y="-3"></div></div>
-offsetTop expected -3 but got -1
-FAIL .container > div 23 assert_equals:
-<div class="container" style="align-content: flex-start"><div data-offset-x="2" data-offset-y="1"></div></div>
-offsetTop expected 1 but got -1
-FAIL .container > div 24 assert_equals:
-<div class="container" style="align-content: flex-end"><div data-offset-x="2" data-offset-y="-3"></div></div>
-offsetTop expected -3 but got -1
+PASS .container > div 21
+PASS .container > div 22
+PASS .container > div 23
+PASS .container > div 24
 

LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-002-expected.txt

@@ -10,55 +10,31 @@
 
 
 PASS .container > div 1
-FAIL .container > div 2 assert_equals:
-<div class="container" style="align-content: baseline"><div data-offset-x="2" data-offset-y="1"></div></div>
-offsetTop expected 1 but got 3
+PASS .container > div 2
 FAIL .container > div 3 assert_equals:
 <div class="container" style="align-content: last baseline"><div data-offset-x="2" data-offset-y="5"></div></div>
-offsetTop expected 5 but got 3
-FAIL .container > div 4 assert_equals:
-<div class="container" style="align-content: space-between"><div data-offset-x="2" data-offset-y="5"></div></div>
-offsetTop expected 5 but got 3
+offsetTop expected 5 but got 1
+PASS .container > div 4
 PASS .container > div 5
 PASS .container > div 6
 PASS .container > div 7
 PASS .container > div 8
-FAIL .container > div 9 assert_equals:
-<div class="container" style="align-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
-offsetTop expected 1 but got 3
-FAIL .container > div 10 assert_equals:
-<div class="container" style="align-content: end"><div data-offset-x="2" data-offset-y="5"></div></div>
-offsetTop expected 5 but got 3
-FAIL .container > div 11 assert_equals:
-<div class="container" style="align-content: flex-start"><div data-offset-x="2" data-offset-y="5"></div></div>
-offsetTop expected 5 but got 3
-FAIL .container > div 12 assert_equals:
-<div class="container" style="align-content: flex-end"><div data-offset-x="2" data-offset-y="1"></div></div>
-offsetTop expected 1 but got 3
+PASS .container > div 9
+PASS .container > div 10
+PASS .container > div 11
+PASS .container > div 12
 PASS .container > div 13
-FAIL .container > div 14 assert_equals:
-<div class="container" style="align-content: baseline"><div data-offset-x="2" data-offset-y="1"></div></div>
-offsetTop expected 1 but got -1
+PASS .container > div 14
 FAIL .container > div 15 assert_equals:
 <div class="container" style="align-content: last baseline"><div data-offset-x="2" data-offset-y="-3"></div></div>
-offsetTop expected -3 but got -1
-FAIL .container > div 16 assert_equals:
-<div class="container" style="align-content: space-between"><div data-offset-x="2" data-offset-y="-3"></div></div>
-offsetTop expected -3 but got -1
+offsetTop expected -3 but got 1
+PASS .container > div 16
 PASS .container > div 17
 PASS .container > div 18
 PASS .container > div 19
 PASS .container > div 20
-FAIL .container > div 21 assert_equals:
-<div class="container" style="align-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
-offsetTop expected 1 but got -1
-FAIL .container > div 22 assert_equals:
-<div class="container" style="align-content: end"><div data-offset-x="2" data-offset-y="-3"></div></div>
-offsetTop expected -3 but got -1
-FAIL .container > div 23 assert_equals:
-<div class="container" style="align-content: flex-start"><div data-offset-x="2" data-offset-y="-3"></div></div>
-offsetTop expected -3 but got -1
-FAIL .container > div 24 assert_equals:
-<div class="container" style="align-content: flex-end"><div data-offset-x="2" data-offset-y="1"></div></div>
-offsetTop expected 1 but got -1
+PASS .container > div 21
+PASS .container > div 22
+PASS .container > div 23
+PASS .container > div 24
 

LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-003-expected.txt

@@ -10,55 +10,31 @@
 
 
 PASS .container > div 1
-FAIL .container > div 2 assert_equals:
-<div class="container" style="align-content: baseline"><div data-offset-x="10" data-offset-y="1"></div></div>
-offsetTop expected 1 but got 3
+PASS .container > div 2
 FAIL .container > div 3 assert_equals:
 <div class="container" style="align-content: last baseline"><div data-offset-x="10" data-offset-y="5"></div></div>
-offsetTop expected 5 but got 3
-FAIL .container > div 4 assert_equals:
-<div class="container" style="align-content: space-between"><div data-offset-x="10" data-offset-y="1"></div></div>
-offsetTop expected 1 but got 3
+offsetTop expected 5 but got 1
+PASS .container > div 4
 PASS .container > div 5
 PASS .container > div 6
 PASS .container > div 7
 PASS .container > div 8
-FAIL .container > div 9 assert_equals:
-<div class="container" style="align-content: start"><div data-offset-x="10" data-offset-y="1"></div></div>
-offsetTop expected 1 but got 3
-FAIL .container > div 10 assert_equals:
-<div class="container" style="align-content: end"><div data-offset-x="10" data-offset-y="5"></div></div>
-offsetTop expected 5 but got 3
-FAIL .container > div 11 assert_equals:
-<div class="container" style="align-content: flex-start"><div data-offset-x="10" data-offset-y="1"></div></div>
-offsetTop expected 1 but got 3
-FAIL .container > div 12 assert_equals:
-<div class="container" style="align-content: flex-end"><div data-offset-x="10" data-offset-y="5"></div></div>
-offsetTop expected 5 but got 3
+PASS .container > div 9
+PASS .container > div 10
+PASS .container > div 11
+PASS .container > div 12
 PASS .container > div 13
-FAIL .container > div 14 assert_equals:
-<div class="container" style="align-content: baseline"><div data-offset-x="-2" data-offset-y="1"></div></div>
-offsetTop expected 1 but got -1
+PASS .container > div 14
 FAIL .container > div 15 assert_equals:
 <div class="container" style="align-content: last baseline"><div data-offset-x="-2" data-offset-y="-3"></div></div>
-offsetTop expected -3 but got -1
-FAIL .container > div 16 assert_equals:
-<div class="container" style="align-content: space-between"><div data-offset-x="-2" data-offset-y="1"></div></div>
-offsetTop expected 1 but got -1
+offsetTop expected -3 but got 1
+PASS .container > div 16
 PASS .container > div 17
 PASS .container > div 18
 PASS .container > div 19
 PASS .container > div 20
-FAIL .container > div 21 assert_equals:
-<div class="container" style="align-content: start"><div data-offset-x="-2" data-offset-y="1"></div></div>
-offsetTop expected 1 but got -1
-FAIL .container > div 22 assert_equals:
-<div class="container" style="align-content: end"><div data-offset-x="-2" data-offset-y="-3"></div></div>
-offsetTop expected -3 but got -1
-FAIL .container > div 23 assert_equals:
-<div class="container" style="align-content: flex-start"><div data-offset-x="-2" data-offset-y="1"></div></div>
-offsetTop expected 1 but got -1
-FAIL .container > div 24 assert_equals:
-<div class="container" style="align-content: flex-end"><div data-offset-x="-2" data-offset-y="-3"></div></div>
-offsetTop expected -3 but got -1
+PASS .container > div 21
+PASS .container > div 22
+PASS .container > div 23
+PASS .container > div 24
 

LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-004-expected.txt

@@ -10,55 +10,31 @@
 
 
 PASS .container > div 1
-FAIL .container > div 2 assert_equals:
-<div class="container" style="align-content: baseline"><div data-offset-x="10" data-offset-y="1"></div></div>
-offsetTop expected 1 but got 3
+PASS .container > div 2
 FAIL .container > div 3 assert_equals:
 <div class="container" style="align-content: last baseline"><div data-offset-x="10" data-offset-y="5"></div></div>
-offsetTop expected 5 but got 3
-FAIL .container > div 4 assert_equals:
-<div class="container" style="align-content: space-between"><div data-offset-x="10" data-offset-y="5"></div></div>
-offsetTop expected 5 but got 3
+offsetTop expected 5 but got 1
+PASS .container > div 4
 PASS .container > div 5
 PASS .container > div 6
 PASS .container > div 7
 PASS .container > div 8
-FAIL .container > div 9 assert_equals:
-<div class="container" style="align-content: start"><div data-offset-x="10" data-offset-y="1"></div></div>
-offsetTop expected 1 but got 3
-FAIL .container > div 10 assert_equals:
-<div class="container" style="align-content: end"><div data-offset-x="10" data-offset-y="5"></div></div>
-offsetTop expected 5 but got 3
-FAIL .container > div 11 assert_equals:
-<div class="container" style="align-content: flex-start"><div data-offset-x="10" data-offset-y="5"></div></div>
-offsetTop expected 5 but got 3
-FAIL .container > div 12 assert_equals:
-<div class="container" style="align-content: flex-end"><div data-offset-x="10" data-offset-y="1"></div></div>
-offsetTop expected 1 but got 3
+PASS .container > div 9
+PASS .container > div 10
+PASS .container > div 11
+PASS .container > div 12
 PASS .container > div 13
-FAIL .container > div 14 assert_equals:
-<div class="container" style="align-content: baseline"><div data-offset-x="-2" data-offset-y="1"></div></div>
-offsetTop expected 1 but got -1
+PASS .container > div 14
 FAIL .container > div 15 assert_equals:
 <div class="container" style="align-content: last baseline"><div data-offset-x="-2" data-offset-y="-3"></div></div>
-offsetTop expected -3 but got -1
-FAIL .container > div 16 assert_equals:
-<div class="container" style="align-content: space-between"><div data-offset-x="-2" data-offset-y="-3"></div></div>
-offsetTop expected -3 but got -1
+offsetTop expected -3 but got 1
+PASS .container > div 16
 PASS .container > div 17
 PASS .container > div 18
 PASS .container > div 19
 PASS .container > div 20
-FAIL .container > div 21 assert_equals:
-<div class="container" style="align-content: start"><div data-offset-x="-2" data-offset-y="1"></div></div>
-offsetTop expected 1 but got -1
-FAIL .container > div 22 assert_equals:
-<div class="container" style="align-content: end"><div data-offset-x="-2" data-offset-y="-3"></div></div>
-offsetTop expected -3 but got -1
-FAIL .container > div 23 assert_equals:
-<div class="container" style="align-content: flex-start"><div data-offset-x="-2" data-offset-y="-3"></div></div>
-offsetTop expected -3 but got -1
-FAIL .container > div 24 assert_equals:
-<div class="container" style="align-content: flex-end"><div data-offset-x="-2" data-offset-y="1"></div></div>
-offsetTop expected 1 but got -1
+PASS .container > div 21
+PASS .container > div 22
+PASS .container > div 23
+PASS .container > div 24
 

LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-005-expected.txt

@@ -10,55 +10,31 @@
 
 
 PASS .container > div 1
-FAIL .container > div 2 assert_equals:
-<div class="container" style="align-content: baseline"><div data-offset-x="2" data-offset-y="1"></div></div>
-offsetLeft expected 2 but got 6
+PASS .container > div 2
 FAIL .container > div 3 assert_equals:
 <div class="container" style="align-content: last baseline"><div data-offset-x="10" data-offset-y="1"></div></div>
-offsetLeft expected 10 but got 6
-FAIL .container > div 4 assert_equals:
-<div class="container" style="align-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div>
-offsetLeft expected 2 but got 6
+offsetLeft expected 10 but got 2
+PASS .container > div 4
 PASS .container > div 5
 PASS .container > div 6
 PASS .container > div 7
 PASS .container > div 8
-FAIL .container > div 9 assert_equals:
-<div class="container" style="align-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
-offsetLeft expected 2 but got 6
-FAIL .container > div 10 assert_equals:
-<div class="container" style="align-content: end"><div data-offset-x="10" data-offset-y="1"></div></div>
-offsetLeft expected 10 but got 6
-FAIL .container > div 11 assert_equals:
-<div class="container" style="align-content: flex-start"><div data-offset-x="2" data-offset-y="1"></div></div>
-offsetLeft expected 2 but got 6
-FAIL .container > div 12 assert_equals:
-<div class="container" style="align-content: flex-end"><div data-offset-x="10" data-offset-y="1"></div></div>
-offsetLeft expected 10 but got 6
+PASS .container > div 9
+PASS .container > div 10
+PASS .container > div 11
+PASS .container > div 12
 PASS .container > div 13
-FAIL .container > div 14 assert_equals:
-<div class="container" style="align-content: baseline"><div data-offset-x="2" data-offset-y="1"></div></div>
-offsetLeft expected 2 but got 0
+PASS .container > div 14
 FAIL .container > div 15 assert_equals:
 <div class="container" style="align-content: last baseline"><div data-offset-x="-2" data-offset-y="1"></div></div>
-offsetLeft expected -2 but got 0
-FAIL .container > div 16 assert_equals:
-<div class="container" style="align-content: space-between"><div data-offset-x="2" data-offset-y="1"></div></div>
-offsetLeft expected 2 but got 0
+offsetLeft expected -2 but got 2
+PASS .container > div 16
 PASS .container > div 17
 PASS .container > div 18
 PASS .container > div 19
 PASS .container > div 20
-FAIL .container > div 21 assert_equals:
-<div class="container" style="align-content: start"><div data-offset-x="2" data-offset-y="1"></div></div>
-offsetLeft expected 2 but got 0
-FAIL .container > div 22 assert_equals:
-<div class="container" style="align-content: end"><div data-offset-x="-2" data-offset-y="1"></div></div>
-offsetLeft expected -2 but got 0
-FAIL .container > div 23 assert_equals:
-<div class="container" style="align-content: flex-start"><div data-offset-x="2" data-offset-y="1"></div></div>
-offsetLeft expected 2 but got 0
-FAIL .container > div 24 assert_equals:
-<div class="container" style="align-content: flex-end"><div data-offset-x="-2" data-offset-y="1"></div></div>
-offsetLeft expected -2 but got 0
+PASS .container > div 21
+PASS .container > div 22
+PASS .container > div 23
+PASS .container > div 24