[webkit-changes] [WebKit/WebKit] c4b5ac: [css-flex][baseline-alignment] Baseline aligned fl...

[Sammy Gill]

  Branch: refs/heads/main
  Home:   https://github.com/WebKit/WebKit
  Commit: c4b5ac727df88b0b59f8e541b87e3ef091af5518
      https://github.com/WebKit/WebKit/commit/c4b5ac727df88b0b59f8e541b87e3ef091af5518
  Author: Sammy Gill <sammy.gill at apple.com>
  Date:   2023-08-17 (Thu, 17 Aug 2023)

  Changed paths:
    M LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-items-baseline-column-vert-rl-flexbox-item-expected.txt
    M LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-items-baseline-column-vert-rl-grid-item-expected.txt
    M LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-items-baseline-column-vert-rl-items-expected.txt
    M LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-items-baseline-column-vert-rl-table-item-expected.txt
    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 Source/WebCore/rendering/RenderFlexibleBox.cpp
    M Source/WebCore/rendering/RenderFlexibleBox.h
    M Source/WebCore/rendering/style/RenderStyle.h
    M Source/WebCore/rendering/style/RenderStyleInlines.h

  Log Message:
  -----------
  [css-flex][baseline-alignment] Baseline aligned flex items should be also aligned using their fallback alignment.
https://bugs.webkit.org/show_bug.cgi?id=256947
rdar://109496710

Reviewed by Alan Baradlay.

css-align-3 states the following to be done after items have been aligned
within their baseline sharing groups:

9.3. Aligning Boxes by Baseline step 3:
Position the aligned baseline-sharing group within the alignment container
according to its fallback alignment. The fallback alignment of a
baseline-sharing group is the fallback alignment of its items as
resolved to physical directions.

For flex layout we only need to consider the case where we may need to
push a baseline sharing group towards the cross axis end of the flexbox.
This is because when we align items within the baseline sharing group,
we align the items with respect to the item that has the highest ascent
in the flexbox. In other words, the item that has this max ascent value,
will already be placed flush against the cross axis start of the flexbox,
so the baseline sharing group could not be pushed closer towards it.

shouldAdjustItemTowardsCrossAxisEnd is a small helper function that will
help us determine if we need to move a baseline sharing group towards
the end of the cross axis. This is done by iterating over each item in
the baseline sharing group and taking 3 things into consideration:

1.) The alignment of the flex item (first vs last baseline)
2.) The used writing mode of the flex item
3.) The direction of the flexbox's cross axis

We need these 3 things in order to be able to resolve the fallback
alignment of the group/item in terms of physical directions.

First baseline aligned items need to be be adjusted when their block
flow direction is opposite of the cross axis direction. This is because
the self-start will be in that direction. Example:

<div style="outline: 1px solid black; display: flex; flex-direction: column; align-items: baseline; width: 200px; height: 200px">
  <div style="writing-mode: vertical-rl;">
    one <br/> two <br/> three
  </div>
</div>

Last baseline aligned items need to be adjusted when their block
direction is the same as the flexbox's cross axis direction. self-end
will be in that direction. Example:

<div style="outline: 1px solid black; display: flex; flex-direction: column; align-items: last baseline; width: 200px; height: 200px">
  <div style="writing-mode: vertical-lr;">
    one <br/> two <br/> three
  </div>
</div>

* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-items-baseline-column-vert-rl-flexbox-item-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-items-baseline-column-vert-rl-grid-item-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-items-baseline-column-vert-rl-items-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/align-items-baseline-column-vert-rl-table-item-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-001-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-002-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-003-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/alignment/flex-align-baseline-004-expected.txt:
* Source/WebCore/rendering/RenderFlexibleBox.cpp:
(WebCore::RenderFlexibleBox::performBaselineAlignment):
* Source/WebCore/rendering/RenderFlexibleBox.h:
(WebCore::RenderFlexibleBox::crossAxisDirection const):
* Source/WebCore/rendering/style/RenderStyle.h:
* Source/WebCore/rendering/style/RenderStyleInlines.h:
(WebCore::RenderStyle::isRowFlexDirection const):

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