Changeset 287128 in webkit


Ignore:
Timestamp:
Dec 16, 2021 3:03:48 AM (7 months ago)
Author:
commit-queue@webkit.org
Message:

Flexbox ignores margins of absolute positioned children when align-items: flex-end or justify-content: flex-end
​https://bugs.webkit.org/show_bug.cgi?id=234143

Patch by Vitaly Dyachkov <​obyknovenius@me.com> on 2021-12-16
Reviewed by Sergio Villar Senin.

LayoutTests/imported/w3c:

  • web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-margin-003-expected.html: Added.
  • web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-margin-003.html: Added.
  • web-platform-tests/css/css-flexbox/abspos/position-absolute-015-expected.txt: Replaced FAIL

by PASS expectations.

Source/WebCore:

When flexbox layouts its children every absolutely-positioned child is processed separately from regular flex items as it were the sole flex item.
Absolutely-positioned can be both main- and cross-axis aligned. To correctly align it we first must calculate available space for it.
To do that the code was correctly subtracting the size of the item from the size of the container but was not subtracting the margins.
Fixed by including the margins into available size calculation.

Test: imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-margin-003.html

  • rendering/RenderFlexibleBox.cpp:

(WebCore::RenderFlexibleBox::mainAxisMarginExtentForChild const):
(WebCore::RenderFlexibleBox::staticMainAxisPositionForPositionedChild):

LayoutTests:

Location:
trunk
Files:
2 added
7 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r287121 r287128  
     12021-12-16  Vitaly Dyachkov  <obyknovenius@me.com>
     2
     3        Flexbox ignores margins of absolute positioned children when `align-items: flex-end` or `justify-content: flex-end`
     4        https://bugs.webkit.org/show_bug.cgi?id=234143
     5
     6        Reviewed by Sergio Villar Senin.
     7
     8        * TestExpectations: Unksipped a flexbox test that is now passing.
     9
    1102021-12-15  Alex Christensen  <achristensen@webkit.org>
    211

  • trunk/LayoutTests/TestExpectations

    r287118 r287128  
    42404240webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-safe-001.html [ ImageOnlyFailure ]
    42414241webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-fallback-align-content-001.html [ ImageOnlyFailure ]
    4242 webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-margin-002.html [ ImageOnlyFailure ]
    42434242
    42444243# Tables as flex items.

  • trunk/LayoutTests/imported/w3c/ChangeLog

    r287127 r287128  
     12021-12-16  Vitaly Dyachkov  <obyknovenius@me.com>
     2
     3        Flexbox ignores margins of absolute positioned children when `align-items: flex-end` or `justify-content: flex-end`
     4        https://bugs.webkit.org/show_bug.cgi?id=234143
     5
     6        Reviewed by Sergio Villar Senin.
     7
     8        * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-margin-003-expected.html: Added.
     9        * web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-margin-003.html: Added.
     10        * web-platform-tests/css/css-flexbox/abspos/position-absolute-015-expected.txt: Replaced FAIL
     11        by PASS expectations.
     12
    1132021-12-16  Joonghun Park  <jh718.park@samsung.com>
    214

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/abspos/position-absolute-015-expected.txt

    r272644 r287128  
    11
    2 FAIL #abspos 1 assert_equals:
    3 <div style="background: cyan; margin: 20px; position: absolute; width: 30px; height: 40px;" data-offset-x="150" id="abspos"></div>
    4 offsetLeft expected 150 but got 190
     2PASS #abspos 1
    53

  • trunk/Source/WebCore/ChangeLog

    r287126 r287128  
     12021-12-16  Vitaly Dyachkov  <obyknovenius@me.com>
     2
     3        Flexbox ignores margins of absolute positioned children when `align-items: flex-end` or `justify-content: flex-end`
     4        https://bugs.webkit.org/show_bug.cgi?id=234143
     5
     6        Reviewed by Sergio Villar Senin.
     7
     8        When flexbox layouts its children every absolutely-positioned child is processed separately from regular flex items as it were the sole flex item.
     9        Absolutely-positioned can be both main- and cross-axis aligned. To correctly align it we first must calculate available space for it.
     10        To do that the code was correctly subtracting the size of the item from the size of the container but was not subtracting the margins.
     11        Fixed by including the margins into available size calculation.
     12
     13        Test: imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-margin-003.html
     14
     15        * rendering/RenderFlexibleBox.cpp:
     16        (WebCore::RenderFlexibleBox::mainAxisMarginExtentForChild const):
     17        (WebCore::RenderFlexibleBox::staticMainAxisPositionForPositionedChild):
     18
    1192021-12-15  Andres Gonzalez  <andresg_22@apple.com>
    220

  • trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp

    r287064 r287128  
    822822    ASSERT_NOT_REACHED();
    823823    return marginTop();
     824}
     825
     826LayoutUnit RenderFlexibleBox::mainAxisMarginExtentForChild(const RenderBox& child) const
     827{
     828    if (!child.needsLayout())
     829        return isHorizontalFlow() ? child.horizontalMarginExtent() : child.verticalMarginExtent();
     830
     831    LayoutUnit marginStart;
     832    LayoutUnit marginEnd;
     833    if (isHorizontalFlow())
     834        child.computeInlineDirectionMargins(*this, child.containingBlockLogicalWidthForContentInFragment(nullptr), child.logicalWidth(), marginStart, marginEnd);
     835    else
     836        child.computeBlockDirectionMargins(*this, marginStart, marginEnd);
     837    return marginStart + marginEnd;
    824838}
    825839
    … …  
    16741688LayoutUnit RenderFlexibleBox::staticMainAxisPositionForPositionedChild(const RenderBox& child)
    16751689{
    1676     const LayoutUnit availableSpace = mainAxisContentExtent(contentLogicalHeight()) - mainAxisExtentForChild(child);
     1690    auto childMainExtent = mainAxisMarginExtentForChild(child) + mainAxisExtentForChild(child);
     1691    auto availableSpace = mainAxisContentExtent(contentLogicalHeight()) - childMainExtent;
    16771692    auto isReverse = isColumnOrRowReverse();
    16781693    LayoutUnit offset = initialJustifyContentOffset(style(), availableSpace, 1, isReverse);

  • trunk/Source/WebCore/rendering/RenderFlexibleBox.h

    r286654 r287128  
    141141    LayoutUnit flowAwareMarginBeforeForChild(const RenderBox& child) const;
    142142    LayoutUnit crossAxisMarginExtentForChild(const RenderBox& child) const;
     143    LayoutUnit mainAxisMarginExtentForChild(const RenderBox& child) const;
    143144    LayoutUnit crossAxisScrollbarExtent() const;
    144145    LayoutUnit crossAxisScrollbarExtentForChild(const RenderBox& child) const;
Note: See TracChangeset for help on using the changeset viewer.