Changeset 282078 in webkit


Ignore:
Timestamp:
Sep 7, 2021 4:11:18 AM (11 months ago)
Author:
svillar@igalia.com
Message:

[css-flexbox] Add support for left & right css-align-3 positional alignment properties
​https://bugs.webkit.org/show_bug.cgi?id=229756

Reviewed by Javier Fernandez.

Source/WebCore:

Added support for Left and Right positional alignment properties from
​https://drafts.csswg.org/css-align-3/#positional-values. These two properties
align the flex item to be flush with the alignment container's (the flex line)
line-left|right or physical left|right whichever is in the appropriate axis. Note that
contrary to start/end which change according to the text direction, left always refer
to where ltr text would start and right always refer to where rtl text would start.

The only caveat is that specs mention that in the case of having orthogonal start<->end and
left<->right axis (only happens in column flexboxes) then both left|right behave as start.

  • rendering/RenderFlexibleBox.cpp:

(WebCore::initialJustifyContentOffset):
(WebCore::alignmentOffset):
(WebCore::RenderFlexibleBox::staticMainAxisPositionForPositionedChild):
(WebCore::RenderFlexibleBox::alignmentForChild const):
(WebCore::RenderFlexibleBox::layoutAndPlaceChildren):
(WebCore::RenderFlexibleBox::layoutColumnReverse):

LayoutTests:

Location:
trunk
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r282075 r282078  
     12021-09-01  Sergio Villar Senin  <svillar@igalia.com>
     2
     3        [css-flexbox] Add support for left & right css-align-3 positional alignment properties
     4        https://bugs.webkit.org/show_bug.cgi?id=229756
     5
     6        Reviewed by Javier Fernandez.
     7
     8        * TestExpectations: Removed 13 WPT tests that are now passing.
     9
    1102021-09-07  Rob Buis  <rbuis@igalia.com>
    211

  • trunk/LayoutTests/TestExpectations

    r282071 r282078  
    41404140webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-align-self-vertWM-004.html [ ImageOnlyFailure ]
    41414141webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-fallback-align-content-001.html [ ImageOnlyFailure ]
    4142 webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-001.html [ ImageOnlyFailure ]
    41434142webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-002.html [ ImageOnlyFailure ]
    41444143webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-003.html [ ImageOnlyFailure ]
    … …  
    41474146webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-007.html [ ImageOnlyFailure ]
    41484147webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-008.html [ ImageOnlyFailure ]
    4149 webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-rtl-001.html [ ImageOnlyFailure ]
    41504148webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-vertWM-001.html [ ImageOnlyFailure ]
    41514149webkit.org/b/221472 imported/w3c/web-platform-tests/css/css-flexbox/abspos/flex-abspos-staticpos-justify-content-vertWM-002.html [ ImageOnlyFailure ]
    … …  
    41674165webkit.org/b/221475 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-014.html [ ImageOnlyFailure ]
    41684166webkit.org/b/221475 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-writing-mode-015.html [ ImageOnlyFailure ]
    4169 
    4170 # justify-content in flexbox.
    4171 webkit.org/b/221477 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-001a.xhtml [ ImageOnlyFailure ]
    4172 webkit.org/b/221477 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-001b.xhtml [ ImageOnlyFailure ]
    4173 webkit.org/b/221477 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-003.xhtml [ ImageOnlyFailure ]
    4174 webkit.org/b/221477 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-005.xhtml [ ImageOnlyFailure ]
    4175 webkit.org/b/221477 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-horiz-006.xhtml [ ImageOnlyFailure ]
    4176 webkit.org/b/221477 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-vert-006.xhtml [ ImageOnlyFailure ]
    4177 webkit.org/b/221477 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-justify-content-wmvert-001.xhtml [ ImageOnlyFailure ]
    4178 webkit.org/b/221477 imported/w3c/web-platform-tests/css/css-flexbox/flexbox_justifycontent-left-001.html [ ImageOnlyFailure ]
    4179 webkit.org/b/221477 imported/w3c/web-platform-tests/css/css-flexbox/flexbox_justifycontent-left-002.html [ ImageOnlyFailure ]
    4180 webkit.org/b/221477 imported/w3c/web-platform-tests/css/css-flexbox/flexbox_justifycontent-right-001.html [ ImageOnlyFailure ]
    4181 webkit.org/b/221477 imported/w3c/web-platform-tests/css/css-flexbox/flexbox_justifycontent-right-002.html [ ImageOnlyFailure ]
    41824167
    41834168webkit.org/b/221468 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-horiz-002.xhtml [ ImageOnlyFailure ]

  • trunk/Source/WebCore/ChangeLog

    r282075 r282078  
     12021-09-01  Sergio Villar Senin  <svillar@igalia.com>
     2
     3        [css-flexbox] Add support for left & right css-align-3 positional alignment properties
     4        https://bugs.webkit.org/show_bug.cgi?id=229756
     5
     6        Reviewed by Javier Fernandez.
     7
     8        Added support for Left and Right positional alignment properties from
     9        https://drafts.csswg.org/css-align-3/#positional-values. These two properties
     10        align the flex item to be flush with the alignment container's (the flex line)
     11        line-left|right or physical left|right whichever is in the appropriate axis. Note that
     12        contrary to start/end which change according to the text direction, left always refer
     13        to where ltr text would start and right always refer to where rtl text would start.
     14
     15        The only caveat is that specs mention that in the case of having orthogonal start<->end and
     16        left<->right axis (only happens in column flexboxes) then both left|right behave as start.
     17
     18        * rendering/RenderFlexibleBox.cpp:
     19        (WebCore::initialJustifyContentOffset):
     20        (WebCore::alignmentOffset):
     21        (WebCore::RenderFlexibleBox::staticMainAxisPositionForPositionedChild):
     22        (WebCore::RenderFlexibleBox::alignmentForChild const):
     23        (WebCore::RenderFlexibleBox::layoutAndPlaceChildren):
     24        (WebCore::RenderFlexibleBox::layoutColumnReverse):
     25
    1262021-09-07  Rob Buis  <rbuis@igalia.com>
    227

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

    r281840 r282078  
    3838#include "RenderLayer.h"
    3939#include "RenderLayoutState.h"
     40#include "RenderStyleConstants.h"
    4041#include "RenderView.h"
    4142#include <limits>
    … …  
    14991500}
    15001501
    1501 static LayoutUnit initialJustifyContentOffset(LayoutUnit availableFreeSpace, ContentPosition justifyContent, ContentDistribution justifyContentDistribution, unsigned numberOfChildren, bool isReversed)
    1502 {
     1502static LayoutUnit initialJustifyContentOffset(const RenderStyle& style, LayoutUnit availableFreeSpace, unsigned numberOfChildren, bool isReversed)
     1503{
     1504    ContentPosition justifyContent = style.resolvedJustifyContentPosition(contentAlignmentNormalBehavior());
     1505    ContentDistribution justifyContentDistribution = style.resolvedJustifyContentDistribution(contentAlignmentNormalBehavior());
     1506
     1507    // First of all resolve Left and Right so we could convert it to their equivalent properties handled bellow.
     1508    // If the property's axis is not parallel with either left<->right axis, this value behaves as start. Currently,
     1509    // the only case where the property's axis is not parallel with either left<->right axis is in a column flexbox.
     1510    // https: //www.w3.org/TR/css-align-3/#valdef-justify-content-left
     1511    if ((justifyContent == ContentPosition::Left || justifyContent == ContentPosition::Right) && style.isColumnFlexDirection() && style.isHorizontalWritingMode())
     1512        justifyContent = ContentPosition::Start;
     1513
     1514    if (justifyContent == ContentPosition::Left) {
     1515        if (style.isColumnFlexDirection() && style.isFlippedBlocksWritingMode())
     1516            justifyContent = ContentPosition::End;
     1517        else
     1518            justifyContent = style.isLeftToRightDirection() ? ContentPosition::Start : ContentPosition::End;
     1519    }
     1520    if (justifyContent == ContentPosition::Right) {
     1521        if (style.isColumnFlexDirection() && !style.isFlippedLinesWritingMode())
     1522            justifyContent = ContentPosition::Start;
     1523        else
     1524            justifyContent = style.isLeftToRightDirection() ? ContentPosition::End : ContentPosition::Start;
     1525    }
     1526    ASSERT(justifyContent != ContentPosition::Left);
     1527    ASSERT(justifyContent != ContentPosition::Right);
     1528
    15031529    if (justifyContent == ContentPosition::FlexEnd
    15041530        || (justifyContent == ContentPosition::End && !isReversed)
    … …  
    15451571    case ItemPosition::Start:
    15461572    case ItemPosition::End:
     1573    case ItemPosition::Left:
     1574    case ItemPosition::Right:
    15471575        ASSERT_NOT_REACHED("%u alignmentForChild should have transformed this position value to something we handle below.", static_cast<uint8_t>(position));
    15481576        break;
    … …  
    15711599    case ItemPosition::SelfStart:
    15721600    case ItemPosition::SelfEnd:
    1573     case ItemPosition::Left:
    1574     case ItemPosition::Right:
    15751601        // FIXME: Implement last baseline.
    15761602        break;
    … …  
    15901616{
    15911617    const LayoutUnit availableSpace = mainAxisContentExtent(contentLogicalHeight()) - mainAxisExtentForChild(child);
    1592 
    1593     ContentPosition position = style().resolvedJustifyContentPosition(contentAlignmentNormalBehavior());
    1594     ContentDistribution distribution = style().resolvedJustifyContentDistribution(contentAlignmentNormalBehavior());
    15951618    auto isReverse = isColumnOrRowReverse();
    1596     LayoutUnit offset = initialJustifyContentOffset(availableSpace, position, distribution, 1, isReverse);
     1619    LayoutUnit offset = initialJustifyContentOffset(style(), availableSpace, 1, isReverse);
    15971620    if (isReverse)
    15981621        offset = availableSpace - offset;
    … …  
    16851708    ItemPosition align = child.style().resolvedAlignSelf(&style(), selfAlignmentNormalBehavior()).position();
    16861709    ASSERT(align != ItemPosition::Auto && align != ItemPosition::Normal);
     1710    // Left and Right are only for justify-*.
     1711    ASSERT(align != ItemPosition::Left && align != ItemPosition::Right);
    16871712
    16881713    if (align == ItemPosition::Baseline && !mainAxisIsChildInlineAxis(child))
    … …  
    18261851void RenderFlexibleBox::layoutAndPlaceChildren(LayoutUnit& crossAxisOffset, Vector<FlexItem>& children, LayoutUnit availableFreeSpace, bool relayoutChildren, Vector<LineContext>& lineContexts, LayoutUnit gapBetweenItems)
    18271852{
    1828     ContentPosition position = style().resolvedJustifyContentPosition(contentAlignmentNormalBehavior());
    1829     ContentDistribution distribution = style().resolvedJustifyContentDistribution(contentAlignmentNormalBehavior());
    1830 
    18311853    LayoutUnit autoMarginOffset = autoMarginOffsetInMainAxis(children, availableFreeSpace);
    18321854    LayoutUnit mainAxisOffset = flowAwareBorderStart() + flowAwarePaddingStart();
    1833     mainAxisOffset += initialJustifyContentOffset(availableFreeSpace, position, distribution, children.size(), isColumnOrRowReverse());
     1855    mainAxisOffset += initialJustifyContentOffset(style(), availableFreeSpace, children.size(), isColumnOrRowReverse());
    18341856    if (style().flexDirection() == FlexDirection::RowReverse)
    18351857        mainAxisOffset += isHorizontalFlow() ? verticalScrollbarWidth() : horizontalScrollbarHeight();
    … …  
    18381860    LayoutUnit maxAscent, maxDescent; // Used when align-items: baseline.
    18391861    LayoutUnit maxChildCrossAxisExtent;
     1862    ContentDistribution distribution = style().resolvedJustifyContentDistribution(contentAlignmentNormalBehavior());
    18401863    bool shouldFlipMainAxis = !isColumnFlow() && !isLeftToRightFlow();
    18411864    for (size_t i = 0; i < children.size(); ++i) {
    … …  
    19321955void RenderFlexibleBox::layoutColumnReverse(const Vector<FlexItem>& children, LayoutUnit crossAxisOffset, LayoutUnit availableFreeSpace)
    19331956{
    1934     ContentPosition position = style().resolvedJustifyContentPosition(contentAlignmentNormalBehavior());
    1935     ContentDistribution distribution = style().resolvedJustifyContentDistribution(contentAlignmentNormalBehavior());
    1936    
    19371957    // This is similar to the logic in layoutAndPlaceChildren, except we place
    19381958    // the children starting from the end of the flexbox. We also don't need to
    19391959    // layout anything since we're just moving the children to a new position.
    19401960    LayoutUnit mainAxisOffset = logicalHeight() - flowAwareBorderEnd() - flowAwarePaddingEnd();
    1941     mainAxisOffset -= initialJustifyContentOffset(availableFreeSpace, position, distribution, children.size(), isColumnOrRowReverse());
     1961    mainAxisOffset -= initialJustifyContentOffset(style(), availableFreeSpace, children.size(), isColumnOrRowReverse());
    19421962    mainAxisOffset -= isHorizontalFlow() ? verticalScrollbarWidth() : horizontalScrollbarHeight();
    1943    
     1963
     1964    ContentDistribution distribution = style().resolvedJustifyContentDistribution(contentAlignmentNormalBehavior());
     1965
    19441966    for (size_t i = 0; i < children.size(); ++i) {
    19451967        auto& child = children[i].box;
Note: See TracChangeset for help on using the changeset viewer.