Skip to content
Permalink
Browse files
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
  • Loading branch information
rreno authored and Brent Fulgham committed Aug 12, 2022
1 parent 2ee999b commit 62e012dfc64a13172b55d9115d77119ec8dbe794
Show file tree
Hide file tree
Showing 15 changed files with 206 additions and 463 deletions.
@@ -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 ]
@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

0 comments on commit 62e012d

Please sign in to comment.