Changeset 286654 in webkit


Ignore:
Timestamp:
Dec 8, 2021 7:34:07 AM (7 months ago)
Author:
commit-queue@webkit.org
Message:

[css-flexbox] gap does not work correctly when flex-direction: column-reverse is applied
​https://bugs.webkit.org/show_bug.cgi?id=225278
Source/WebCore:

rdar://problem/77708991

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

Whenever flex-direction: column-reverse is specified flexbox does always compute the flex item sizes and positions
ignoring the -reverse direction until the very end. After completing the computations we just need to swap offsets
to get the reversed positions. The code was properly considering space between items added by content justification
but it was not adding gaps. Fixed it by adding the gap size to the flex items' offsets.

Test: imported/w3c/web-platform-tests/css/css-flexbox/column-reverse-gap.html

  • rendering/RenderFlexibleBox.cpp:

(WebCore::RenderFlexibleBox::layoutAndPlaceChildren):
(WebCore::RenderFlexibleBox::layoutColumnReverse):

  • rendering/RenderFlexibleBox.h:

LayoutTests:

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

  • imported/w3c/web-platform-tests/css/css-flexbox/column-reverse-gap-expected.txt: Added.
  • imported/w3c/web-platform-tests/css/css-flexbox/column-reverse-gap.html: Added.
Location:
trunk
Files:
2 added
4 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r286652 r286654  
     12021-12-08  Vitaly Dyachkov  <obyknovenius@me.com>
     2
     3        [css-flexbox] `gap` does not work correctly when `flex-direction: column-reverse` is applied
     4        https://bugs.webkit.org/show_bug.cgi?id=225278
     5
     6        Reviewed by Sergio Villar Senin.
     7
     8        * imported/w3c/web-platform-tests/css/css-flexbox/column-reverse-gap-expected.txt: Added.
     9        * imported/w3c/web-platform-tests/css/css-flexbox/column-reverse-gap.html: Added.
     10
    1112021-12-08  Antoine Quint  <graouts@webkit.org>
    212

  • trunk/Source/WebCore/ChangeLog

    r286653 r286654  
     12021-12-08  Vitaly Dyachkov  <obyknovenius@me.com>
     2
     3        [css-flexbox] `gap` does not work correctly when `flex-direction: column-reverse` is applied
     4        https://bugs.webkit.org/show_bug.cgi?id=225278
     5        rdar://problem/77708991
     6
     7        Reviewed by Sergio Villar Senin.
     8
     9        Whenever flex-direction: column-reverse is specified flexbox does always compute the flex item sizes and positions
     10        ignoring the -reverse direction until the very end. After completing the computations we just need to swap offsets
     11        to get the reversed positions. The code was properly considering space between items added by content justification
     12        but it was not adding gaps. Fixed it by adding the gap size to the flex items' offsets.
     13
     14        Test: imported/w3c/web-platform-tests/css/css-flexbox/column-reverse-gap.html
     15
     16        * rendering/RenderFlexibleBox.cpp:
     17        (WebCore::RenderFlexibleBox::layoutAndPlaceChildren):
     18        (WebCore::RenderFlexibleBox::layoutColumnReverse):
     19        * rendering/RenderFlexibleBox.h:
     20
    1212021-12-08  Lauro Moura  <lmoura@igalia.com>
    222

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

    r286593 r286654  
    20242024        // only know after we've positioned all the flex items.
    20252025        updateLogicalHeight();
    2026         layoutColumnReverse(children, crossAxisOffset, availableFreeSpace);
     2026        layoutColumnReverse(children, crossAxisOffset, availableFreeSpace, gapBetweenItems);
    20272027    }
    20282028
    … …  
    20332033}
    20342034
    2035 void RenderFlexibleBox::layoutColumnReverse(const Vector<FlexItem>& children, LayoutUnit crossAxisOffset, LayoutUnit availableFreeSpace)
     2035void RenderFlexibleBox::layoutColumnReverse(const Vector<FlexItem>& children, LayoutUnit crossAxisOffset, LayoutUnit availableFreeSpace, LayoutUnit gapBetweenItems)
    20362036{
    20372037    // This is similar to the logic in layoutAndPlaceChildren, except we place
    … …  
    20502050        setFlowAwareLocationForChild(child, LayoutPoint(mainAxisOffset, crossAxisOffset + flowAwareMarginBeforeForChild(child)));
    20512051        mainAxisOffset -= flowAwareMarginStartForChild(child);
    2052         mainAxisOffset -= justifyContentSpaceBetweenChildren(availableFreeSpace, distribution, children.size());
     2052       
     2053        if (i != children.size() - 1) {
     2054            // The last item does not get extra space added.
     2055            mainAxisOffset -= justifyContentSpaceBetweenChildren(availableFreeSpace, distribution, children.size()) + gapBetweenItems;
     2056        }
    20532057    }
    20542058}

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

    r286421 r286654  
    190190    void prepareChildForPositionedLayout(RenderBox& child);
    191191    void layoutAndPlaceChildren(LayoutUnit& crossAxisOffset, Vector<FlexItem>&, LayoutUnit availableFreeSpace, bool relayoutChildren, Vector<LineContext>&, LayoutUnit gapBetweenItems);
    192     void layoutColumnReverse(const Vector<FlexItem>&, LayoutUnit crossAxisOffset, LayoutUnit availableFreeSpace);
     192    void layoutColumnReverse(const Vector<FlexItem>&, LayoutUnit crossAxisOffset, LayoutUnit availableFreeSpace, LayoutUnit gapBetweenItems);
    193193    void alignFlexLines(Vector<LineContext>&, LayoutUnit gapBetweenLines);
    194194    void alignChildren(const Vector<LineContext>&);
Note: See TracChangeset for help on using the changeset viewer.