[webkit-changes] [WebKit/WebKit] a7e014: Implement last baseline alignment for Flexbox cont...

Tue Oct 11 08:35:27 PDT 2022

  Branch: refs/heads/main
  Home:   https://github.com/WebKit/WebKit
  Commit: a7e014a014305d26b5504f91e940b56e94848714
      https://github.com/WebKit/WebKit/commit/a7e014a014305d26b5504f91e940b56e94848714
  Author: Sammy Gill <sammy.gill at apple.com>
  Date:   2022-10-11 (Tue, 11 Oct 2022)

  Changed paths:
    M LayoutTests/TestExpectations
    M LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-001-expected.txt
    M LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-002-expected.txt
    M LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-003-expected.txt
    M LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-004-expected.txt
    M LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-005-expected.txt
    M LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-006-expected.txt
    M LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-007-expected.txt
    M LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-fieldset-001-expected.txt
    M LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-fieldset-002-expected.txt
    M LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-fieldset-003-expected.txt
    M LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-flex-001-expected.txt
    M LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-flex-002-expected.txt
    M LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-flex-003-expected.txt
    M LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-flex-004-expected.txt
    M LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-grid-001-expected.txt
    M LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-grid-002-expected.txt
    M LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-grid-003-expected.txt
    M LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-line-clamp-001.tentative-expected.txt
    M LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-line-clamp-002.tentative-expected.txt
    M LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-line-clamp-003.tentative-expected.txt
    M LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-overflow-001-expected.txt
    M LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-overflow-002-expected.txt
    M LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-overflow-003-expected.txt
    M LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-table-001-expected.txt
    M LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-table-002-expected.txt
    M LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-table-003-expected.txt
    A LayoutTests/platform/ios/imported/w3c/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-table-001-expected.txt
    A LayoutTests/platform/ios/imported/w3c/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-table-002-expected.txt
    A LayoutTests/platform/ios/imported/w3c/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-table-003-expected.txt
    M Source/WebCore/layout/integration/inline/LayoutIntegrationLineLayout.h
    M Source/WebCore/rendering/RenderFlexibleBox.cpp

  Log Message:
  -----------
  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