Permalink
Show file tree
Hide file tree
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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
Showing
32 changed files
with
255 additions
and
181 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
|
|
Oops, something went wrong.