Skip to content
Permalink
Browse files
Implement last baseline alignment for Flexbox containers.
https://bugs.webkit.org/show_bug.cgi?id=244734
rdar://99506835

Reviewed by Brent Fulgham.

In order to implement last baseline alignment for flex containers, we
need to hold a little bit more information. Currently,
RenderFlexibleBox::LineContext holds a maxAscent value, which holds the
value of the furthest baseline in the cross axis. This is then used to
shift the other flex items to this baseline. A new field called
lastBaselineMaxAscent was added to achieve this same functionality for
the last baseline elements. This needs to be a separate field in
scenarios where you may have certain items being aligned by their
baselines and others by their last baselines.

This patch also adds the “margin before” to the first baseline of table
elements since it was not being added before. This is needed in order to
properly align other elements alongside a table with margins. Without
this addition, we were rendering the expectation for both
css-flexbox/flexbox-align-self-baseline-horiz-001a and
css-flexbox/flexbox-align-self-baseline-horiz-001b incorrectly.

* LayoutTests/TestExpectations:
* Source/WebCore/rendering/RenderFlexibleBox.cpp:
(WebCore::RenderFlexibleBox::LineContext::LineContext):
(WebCore::RenderFlexibleBox::marginBoxAscentForChild):
Since marginBoxAscentForChild is being called during alignment purposes,
we can determine what type of alignment is being done here and return
the appropriate ascent (first baseline vs last baseline).

(WebCore::alignmentOffset):
(WebCore::RenderFlexibleBox::layoutAndPlaceChildren):
Depending on whether the item is being first baseline aligned or last
baseline aligned, we need to either update maxAscent or
lastBaselineMaxAscent. Later on when the alignment is being done, we
can check the type of alignment one more time and use the correct
value.

(WebCore::RenderFlexibleBox::alignChildren):
Since items need to be pushed to the end of the cross axis when
wrap-reverse is specified, we can use the same logic to push the items
that are being last baseline aligned. There was also a little bit of
cleanup that I was able to do here. Instead of waiting until all of the
lines have had their items aligned to make any adjustments (e.g. due
to wrap-reverse), we can do it after laying out each line. We can
determine whether or not we need to loop over the line again by checking
the value of minMarginAfterBaseline. If this value was set then that
means that not only is there room to move the items in the flex line,
but also that we need to because the flex container has wrap-reverse
set or some items are being last baseline aligned.

(WebCore::RenderFlexibleBox::childIsParticipatingInBaselineAlignment const):
* Source/WebCore/rendering/RenderFlexibleBox.h:
* Source/WebCore/rendering/RenderTableSection.cpp:
(WebCore::RenderTable::baselinePosition const):
This is not directly related to the last baseline implementation but to
a test case for it. There were 2 expectation files we were rendering
incorrectly
(css-flexbox/flexbox-align-self-baseline-horiz-001a-expected.xhtml and
flexbox-align-self-baseline-horiz-001b-expected.xhtml).

These were using the first baseline for table elements and we were not
computing the correct first baseline. This caused us to fail the tests
even though we were rendering the actual test file correctly.

Canonical link: https://commits.webkit.org/255383@main
  • Loading branch information
sgill26 authored and rreno committed Oct 11, 2022
1 parent cfc5483 commit a7e014a014305d26b5504f91e940b56e94848714
Show file tree
Hide file tree
Showing 32 changed files with 255 additions and 181 deletions.
@@ -4480,10 +4480,7 @@ webkit.org/b/221474 imported/w3c/web-platform-tests/css/css-flexbox/svg-root-as-
webkit.org/b/221478 imported/w3c/web-platform-tests/css/css-flexbox/baseline-synthesis-001.html [ ImageOnlyFailure ]
webkit.org/b/221478 imported/w3c/web-platform-tests/css/css-flexbox/baseline-synthesis-003.html [ ImageOnlyFailure ]
webkit.org/b/221478 imported/w3c/web-platform-tests/css/css-flexbox/baseline-synthesis-004.html [ ImageOnlyFailure ]
webkit.org/b/221478 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-001a.xhtml [ ImageOnlyFailure ]
webkit.org/b/221478 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-001b.xhtml [ ImageOnlyFailure ]
webkit.org/b/221478 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-006.xhtml [ ImageOnlyFailure ]
webkit.org/b/221478 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-007.xhtml [ ImageOnlyFailure ]
webkit.org/b/221478 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-008.xhtml [ ImageOnlyFailure ]
webkit.org/b/221478 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-vert-001.html [ ImageOnlyFailure ]
webkit.org/b/221478 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-vert-002.html [ ImageOnlyFailure ]
@@ -16,15 +16,15 @@ FAIL #target > div 1 assert_equals:
offsetLeft expected 120 but got 20
FAIL #target > div 2 assert_equals:
<div data-offset-x="105">line1<br>line2</div>
offsetLeft expected 105 but got 0
offsetLeft expected 105 but got 140
FAIL #target > div 3 assert_equals:
<div data-offset-x="126">line1<br>line2</div>
offsetLeft expected 126 but got 0
offsetLeft expected 126 but got 168
PASS #target > div 4
FAIL #target > div 5 assert_equals:
<div data-offset-x="35">line1<br>line2</div>
offsetLeft expected 35 but got 0
offsetLeft expected 35 but got 140
FAIL #target > div 6 assert_equals:
<div data-offset-x="42">line1<br>line2</div>
offsetLeft expected 42 but got 0
offsetLeft expected 42 but got 168

@@ -16,17 +16,17 @@ FAIL #target > div 1 assert_equals:
offsetLeft expected 120 but got 0
FAIL #target > div 2 assert_equals:
<div data-offset-x="105">line1<br>line2</div>
offsetLeft expected 105 but got 0
offsetLeft expected 105 but got 140
FAIL #target > div 3 assert_equals:
<div data-offset-x="126">line1<br>line2</div>
offsetLeft expected 126 but got 0
offsetLeft expected 126 but got 161
FAIL #target > div 4 assert_equals:
<div data-offset-x="20">line1<br>line2</div>
offsetLeft expected 20 but got 30
FAIL #target > div 5 assert_equals:
<div data-offset-x="35">line1<br>line2</div>
offsetLeft expected 35 but got 0
offsetLeft expected 35 but got 125
FAIL #target > div 6 assert_equals:
<div data-offset-x="42">line1<br>line2</div>
offsetLeft expected 42 but got 0
offsetLeft expected 42 but got 153

@@ -16,17 +16,17 @@ FAIL #target > div 1 assert_equals:
offsetLeft expected 120 but got 110
FAIL #target > div 2 assert_equals:
<div data-offset-x="105">line1<br>line2</div>
offsetLeft expected 105 but got 140
offsetLeft expected 105 but got 15
FAIL #target > div 3 assert_equals:
<div data-offset-x="126">line1<br>line2</div>
offsetLeft expected 126 but got 168
offsetLeft expected 126 but got 15
FAIL #target > div 4 assert_equals:
<div data-offset-x="20">line1<br>line2</div>
offsetLeft expected 20 but got 140
FAIL #target > div 5 assert_equals:
<div data-offset-x="35">line1<br>line2</div>
offsetLeft expected 35 but got 140
offsetLeft expected 35 but got 0
FAIL #target > div 6 assert_equals:
<div data-offset-x="42">line1<br>line2</div>
offsetLeft expected 42 but got 168
offsetLeft expected 42 but got 7

@@ -17,7 +17,7 @@ offsetLeft expected 15 but got 120
PASS #target > div 2
FAIL #target > div 3 assert_equals:
<div data-offset-x="21">line1<br>line2</div>
offsetLeft expected 21 but got 0
offsetLeft expected 21 but got 28
FAIL #target > div 4 assert_equals:
<div data-offset-x="125">line1<br>line2</div>
offsetLeft expected 125 but got 120
@@ -26,5 +26,5 @@ FAIL #target > div 5 assert_equals:
offsetLeft expected 140 but got 0
FAIL #target > div 6 assert_equals:
<div data-offset-x="147">line1<br>line2</div>
offsetLeft expected 147 but got 0
offsetLeft expected 147 but got 28

@@ -2,11 +2,7 @@



FAIL #target > div 1 assert_equals:
<div data-offset-y="20"><span></span><br><span></span></div>
offsetTop expected 20 but got 0
PASS #target > div 1
PASS #target > div 2
FAIL #target > div 3 assert_equals:
<div data-offset-y="50"><span></span><br><span></span></div>
offsetTop expected 50 but got 0
PASS #target > div 3

@@ -2,11 +2,11 @@



FAIL #target > div 1 assert_equals:
<div data-offset-y="20"><span></span><br><span></span></div>
offsetTop expected 20 but got 0
PASS #target > div 2
PASS #target > div 1
FAIL #target > div 2 assert_equals:
<div data-offset-y="0"><span></span><br><span></span></div>
offsetTop expected 0 but got 20
FAIL #target > div 3 assert_equals:
<div data-offset-y="55"><span></span><br><span></span></div>
offsetTop expected 55 but got 0
offsetTop expected 55 but got 65

@@ -2,11 +2,11 @@



FAIL #target > div 1 assert_equals:
<div data-offset-y="20"><span></span><br><span></span></div>
offsetTop expected 20 but got 0
PASS #target > div 2
PASS #target > div 1
FAIL #target > div 2 assert_equals:
<div data-offset-y="0"><span></span><br><span></span></div>
offsetTop expected 0 but got 20
FAIL #target > div 3 assert_equals:
<div data-offset-y="55"><span></span><br><span></span></div>
offsetTop expected 55 but got 0
offsetTop expected 55 but got 65

@@ -15,5 +15,11 @@ offsetTop expected 0 but got 10
FAIL .target > * 3 assert_equals:
<div data-offset-y="40"><span></span></div>
offsetTop expected 40 but got 0
PASS .target > * 4
FAIL .target > * 4 assert_equals:
<fieldset data-offset-y="0">
<span></span><br><span></span>
<legend><span></span></legend>

</fieldset>
offsetTop expected 0 but got 10

@@ -8,6 +8,6 @@ offsetLeft expected 35 but got 65
PASS .target > * 2
FAIL .target > * 3 assert_equals:
<div data-offset-x="15"><span></span></div>
offsetLeft expected 15 but got 60
offsetLeft expected 15 but got 65
PASS .target > * 4

@@ -15,5 +15,11 @@ offsetLeft expected 0 but got 5
FAIL .target > * 3 assert_equals:
<div data-offset-x="45"><span></span></div>
offsetLeft expected 45 but got 0
PASS .target > * 4
FAIL .target > * 4 assert_equals:
<fieldset data-offset-x="0">
<span></span><br><span></span>
<legend><span></span></legend>

</fieldset>
offsetLeft expected 0 but got 5

@@ -1,90 +1,82 @@

PASS .target > * 1
PASS .target > * 2
FAIL .target > * 3 assert_equals:
<div data-offset-y="35"><span></span></div>
offsetTop expected 35 but got 10
PASS .target > * 3
PASS .target > * 4
FAIL .target > * 5 assert_equals:
<div data-offset-y="35"><span></span></div>
offsetTop expected 35 but got 15
PASS .target > * 6
FAIL .target > * 7 assert_equals:
<div data-offset-y="15"><span></span></div>
offsetTop expected 15 but got 10
offsetTop expected 15 but got 35
PASS .target > * 8
PASS .target > * 9
PASS .target > * 10
FAIL .target > * 11 assert_equals:
<div data-offset-y="45"><span></span></div>
offsetTop expected 45 but got 10
PASS .target > * 11
PASS .target > * 12
FAIL .target > * 13 assert_equals:
<div data-offset-y="35"><span></span></div>
offsetTop expected 35 but got 45
PASS .target > * 14
FAIL .target > * 15 assert_equals:
<div data-offset-y="45"><span></span></div>
offsetTop expected 45 but got 10
offsetTop expected 45 but got 35
PASS .target > * 16
PASS .target > * 17
PASS .target > * 18
FAIL .target > * 19 assert_equals:
<div data-offset-y="70"><span></span></div>
offsetTop expected 70 but got 10
PASS .target > * 19
PASS .target > * 20
FAIL .target > * 21 assert_equals:
<div data-offset-y="35"><span></span></div>
offsetTop expected 35 but got 25
PASS .target > * 22
FAIL .target > * 23 assert_equals:
<div data-offset-y="45"><span></span></div>
offsetTop expected 45 but got 10
offsetTop expected 45 but got 70
PASS .target > * 24
PASS .target > * 25
PASS .target > * 26
FAIL .target > * 27 assert_equals:
<div data-offset-y="50"><span></span></div>
offsetTop expected 50 but got 10
PASS .target > * 27
PASS .target > * 28
FAIL .target > * 29 assert_equals:
<div data-offset-y="35"><span></span></div>
offsetTop expected 35 but got 55
PASS .target > * 30
FAIL .target > * 31 assert_equals:
<div data-offset-y="55"><span></span></div>
offsetTop expected 55 but got 10
offsetTop expected 55 but got 45
PASS .target > * 32
FAIL .target > * 33 assert_equals:
<div data-offset-y="15"><span></span></div>
offsetTop expected 15 but got 60
PASS .target > * 34
FAIL .target > * 35 assert_equals:
<div data-offset-y="70"><span></span></div>
offsetTop expected 70 but got 10
offsetTop expected 70 but got 40
PASS .target > * 36
FAIL .target > * 37 assert_equals:
<div data-offset-y="40"><span></span></div>
offsetTop expected 40 but got 60
PASS .target > * 38
FAIL .target > * 39 assert_equals:
<div data-offset-y="60"><span></span></div>
offsetTop expected 60 but got 10
offsetTop expected 60 but got 40
PASS .target > * 40
FAIL .target > * 41 assert_equals:
<div data-offset-y="15"><span></span></div>
offsetTop expected 15 but got 25
PASS .target > * 42
FAIL .target > * 43 assert_equals:
<div data-offset-y="55"><span></span></div>
offsetTop expected 55 but got 10
offsetTop expected 55 but got 50
PASS .target > * 44
FAIL .target > * 45 assert_equals:
<div data-offset-y="45"><span></span></div>
offsetTop expected 45 but got 55
PASS .target > * 46
FAIL .target > * 47 assert_equals:
<div data-offset-y="55"><span></span></div>
offsetTop expected 55 but got 10
offsetTop expected 55 but got 45
PASS .target > * 48

@@ -1,90 +1,86 @@

PASS .target > * 1
PASS .target > * 2
FAIL .target > * 3 assert_equals:
<div data-offset-x="30"><span></span></div>
offsetLeft expected 30 but got 50
PASS .target > * 3
PASS .target > * 4
FAIL .target > * 5 assert_equals:
<div data-offset-x="30"><span></span></div>
offsetLeft expected 30 but got 40
PASS .target > * 6
FAIL .target > * 7 assert_equals:
<div data-offset-x="40"><span></span></div>
offsetLeft expected 40 but got 50
offsetLeft expected 40 but got 30
PASS .target > * 8
PASS .target > * 9
PASS .target > * 10
FAIL .target > * 11 assert_equals:
<div data-offset-x="30"><span></span></div>
offsetLeft expected 30 but got 60
PASS .target > * 11
PASS .target > * 12
FAIL .target > * 13 assert_equals:
<div data-offset-x="40"><span></span></div>
offsetLeft expected 40 but got 20
PASS .target > * 14
FAIL .target > * 15 assert_equals:
<div data-offset-x="20"><span></span></div>
offsetLeft expected 20 but got 60
offsetLeft expected 20 but got 40
PASS .target > * 16
PASS .target > * 17
PASS .target > * 18
FAIL .target > * 19 assert_equals:
<div data-offset-x="33"><span></span></div>
offsetLeft expected 33 but got 85
offsetLeft expected 33 but got 32
PASS .target > * 20
FAIL .target > * 21 assert_equals:
<div data-offset-x="65"><span></span></div>
offsetLeft expected 65 but got 70
PASS .target > * 22
FAIL .target > * 23 assert_equals:
<div data-offset-x="45"><span></span></div>
offsetLeft expected 45 but got 85
offsetLeft expected 45 but got 32
PASS .target > * 24
PASS .target > * 25
PASS .target > * 26
FAIL .target > * 27 assert_equals:
<div data-offset-x="38"><span></span></div>
offsetLeft expected 38 but got 70
offsetLeft expected 38 but got 37
PASS .target > * 28
FAIL .target > * 29 assert_equals:
<div data-offset-x="50"><span></span></div>
offsetLeft expected 50 but got 25
PASS .target > * 30
FAIL .target > * 31 assert_equals:
<div data-offset-x="20"><span></span></div>
offsetLeft expected 20 but got 70
offsetLeft expected 20 but got 42
PASS .target > * 32
FAIL .target > * 33 assert_equals:
<div data-offset-x="75"><span></span></div>
offsetLeft expected 75 but got 35
PASS .target > * 34
FAIL .target > * 35 assert_equals:
<div data-offset-x="30"><span></span></div>
offsetLeft expected 30 but got 85
offsetLeft expected 30 but got 62
PASS .target > * 36
FAIL .target > * 37 assert_equals:
<div data-offset-x="63"><span></span></div>
offsetLeft expected 63 but got 35
PASS .target > * 38
FAIL .target > * 39 assert_equals:
<div data-offset-x="35"><span></span></div>
offsetLeft expected 35 but got 85
offsetLeft expected 35 but got 62
PASS .target > * 40
FAIL .target > * 41 assert_equals:
<div data-offset-x="60"><span></span></div>
offsetLeft expected 60 but got 55
PASS .target > * 42
FAIL .target > * 43 assert_equals:
<div data-offset-x="30"><span></span></div>
offsetLeft expected 30 but got 70
offsetLeft expected 30 but got 37
PASS .target > * 44
FAIL .target > * 45 assert_equals:
<div data-offset-x="43"><span></span></div>
offsetLeft expected 43 but got 25
PASS .target > * 46
FAIL .target > * 47 assert_equals:
<div data-offset-x="25"><span></span></div>
offsetLeft expected 25 but got 70
offsetLeft expected 25 but got 42
PASS .target > * 48

0 comments on commit a7e014a

Please sign in to comment.