Changeset 112544 in webkit


Ignore:
Timestamp:
Mar 29, 2012 10:16:39 AM (12 years ago)
Author:
tony@chromium.org
Message:

Need to implement flex-line-pack
​https://bugs.webkit.org/show_bug.cgi?id=70794

Reviewed by Ojan Vafai.

Source/WebCore:

Tests: css3/flexbox/multiline-line-pack-horizontal-column.html

css3/flexbox/multiline-line-pack.html

  • rendering/RenderFlexibleBox.cpp:

(WebCore::RenderFlexibleBox::repositionLogicalHeightDependentFlexItems):
(WebCore::initialLinePackingOffset): Similar to initialPackingOffset.
(WebCore):
(WebCore::linePackingSpaceBetweenChildren): Similar to packingSpaceBetweenChildren.
(WebCore::RenderFlexibleBox::packFlexLines): Move lines based on flex-line-pack.

Note that we don't need to relayout on stretch because
alignChildren will do that for us (only auto size needs stretching).

(WebCore::RenderFlexibleBox::flipForWrapReverse): Pull out the initial

cross axis offset before calling packFlexLines because we can
move the the line contexts.

  • rendering/RenderFlexibleBox.h:

LayoutTests:

Updated the old multiline tests to have -webkit-flex-line-pack: start,
which was the previous default behavior. The correct default behavior
is stretch.

  • css3/flexbox/multiline-align.html:
  • css3/flexbox/multiline-column-auto.html:
  • css3/flexbox/multiline-line-pack-expected.txt: Added.
  • css3/flexbox/multiline-line-pack-horizontal-column-expected.txt: Added.
  • css3/flexbox/multiline-line-pack-horizontal-column.html: Added.
  • css3/flexbox/multiline-line-pack.html: Added.
  • css3/flexbox/multiline-pack.html:
  • css3/flexbox/multiline-reverse-wrap-overflow.html:
  • css3/flexbox/multiline-shrink-to-fit.html:
  • css3/flexbox/multiline.html:
Location:
trunk
Files:
4 added
10 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r112534 r112544  
     12012-03-29  Tony Chang  <tony@chromium.org>
     2
     3        Need to implement flex-line-pack
     4        https://bugs.webkit.org/show_bug.cgi?id=70794
     5
     6        Reviewed by Ojan Vafai.
     7
     8        Updated the old multiline tests to have -webkit-flex-line-pack: start,
     9        which was the previous default behavior. The correct default behavior
     10        is stretch.
     11
     12        * css3/flexbox/multiline-align.html:
     13        * css3/flexbox/multiline-column-auto.html:
     14        * css3/flexbox/multiline-line-pack-expected.txt: Added.
     15        * css3/flexbox/multiline-line-pack-horizontal-column-expected.txt: Added.
     16        * css3/flexbox/multiline-line-pack-horizontal-column.html: Added.
     17        * css3/flexbox/multiline-line-pack.html: Added.
     18        * css3/flexbox/multiline-pack.html:
     19        * css3/flexbox/multiline-reverse-wrap-overflow.html:
     20        * css3/flexbox/multiline-shrink-to-fit.html:
     21        * css3/flexbox/multiline.html:
     22
    1232012-03-29  Csaba Osztrogonác  <ossy@webkit.org>
    224

  • trunk/LayoutTests/css3/flexbox/multiline-align.html

    r110583 r112544  
    77    background-color: grey;
    88    max-width: 600px;
     9    -webkit-flex-line-pack: start;
    910}
    1011.title {

  • trunk/LayoutTests/css3/flexbox/multiline-column-auto.html

    r110747 r112544  
    88    -webkit-flex-flow: column wrap;
    99    margin-top: 20px;
     10    -webkit-flex-line-pack: start;
    1011}
    1112.flexbox > div {

  • trunk/LayoutTests/css3/flexbox/multiline-pack.html

    r110583 r112544  
    77    background-color: grey;
    88    max-width: 100px;
     9    -webkit-flex-line-pack: start;
    910}
    1011.title {

  • trunk/LayoutTests/css3/flexbox/multiline-reverse-wrap-overflow.html

    r110634 r112544  
    88    -webkit-flex-wrap: wrap-reverse;
    99    margin-top: 20px;
     10    -webkit-flex-line-pack: start;
    1011}
    1112.flexbox > div {

  • trunk/LayoutTests/css3/flexbox/multiline-shrink-to-fit.html

    r110747 r112544  
    99    -webkit-flex-direction: column;
    1010    float: left;
     11    -webkit-flex-line-pack: start;
    1112}
    1213

  • trunk/LayoutTests/css3/flexbox/multiline.html

    r110583 r112544  
    77    background-color: grey;
    88    max-width: 600px;
     9    -webkit-flex-line-pack: start;
    910}
    1011.title {
    … …  
    4243}
    4344.wrap {
    44   -webkit-flex-wrap: wrap;
     45    -webkit-flex-wrap: wrap;
    4546}
    4647.wrap-reverse {
    47   -webkit-flex-wrap: wrap-reverse;
     48    -webkit-flex-wrap: wrap-reverse;
    4849}
    4950.flexbox > :nth-child(1) {

  • trunk/Source/WebCore/ChangeLog

    r112541 r112544  
     12012-03-29  Tony Chang  <tony@chromium.org>
     2
     3        Need to implement flex-line-pack
     4        https://bugs.webkit.org/show_bug.cgi?id=70794
     5
     6        Reviewed by Ojan Vafai.
     7
     8        Tests: css3/flexbox/multiline-line-pack-horizontal-column.html
     9               css3/flexbox/multiline-line-pack.html
     10
     11        * rendering/RenderFlexibleBox.cpp:
     12        (WebCore::RenderFlexibleBox::repositionLogicalHeightDependentFlexItems):
     13        (WebCore::initialLinePackingOffset): Similar to initialPackingOffset.
     14        (WebCore):
     15        (WebCore::linePackingSpaceBetweenChildren): Similar to packingSpaceBetweenChildren.
     16        (WebCore::RenderFlexibleBox::packFlexLines): Move lines based on flex-line-pack.
     17            Note that we don't need to relayout on stretch because
     18            alignChildren will do that for us (only auto size needs stretching).
     19        (WebCore::RenderFlexibleBox::flipForWrapReverse): Pull out the initial
     20            cross axis offset before calling packFlexLines because we can
     21            move the the line contexts.
     22        * rendering/RenderFlexibleBox.h:
     23
    1242012-03-29  Vsevolod Vlasov  <vsevik@chromium.org>
    225

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

    r112425 r112544  
    297297void RenderFlexibleBox::repositionLogicalHeightDependentFlexItems(FlexOrderIterator& iterator, WTF::Vector<LineContext>& lineContexts, LayoutUnit& oldClientAfterEdge)
    298298{
     299    LayoutUnit crossAxisStartEdge = lineContexts.isEmpty() ? 0 : lineContexts[0].crossAxisOffset;
     300    packFlexLines(iterator, lineContexts);
     301
    299302    // If we have a single line flexbox, the line height is all the available space.
    300303    // For flex-direction: row, this means we need to use the height, so we do this after calling computeLogicalHeight.
    … …  
    306309        if (isHorizontalFlow())
    307310            oldClientAfterEdge = clientLogicalBottom();
    308         flipForWrapReverse(iterator, lineContexts);
     311        flipForWrapReverse(iterator, lineContexts, crossAxisStartEdge);
    309312    }
    310313
    … …  
    971974        mainAxisOffset -= flowAwareMarginStartForChild(child);
    972975        mainAxisOffset -= packingSpaceBetweenChildren(availableFreeSpace, style()->flexPack(), childSizes.size());
     976    }
     977}
     978
     979static LayoutUnit initialLinePackingOffset(LayoutUnit availableFreeSpace, EFlexLinePack linePack, size_t numberOfLines)
     980{
     981    if (linePack == LinePackEnd)
     982        return availableFreeSpace;
     983    if (linePack == LinePackCenter)
     984        return availableFreeSpace / 2;
     985    if (linePack == LinePackDistribute) {
     986        if (availableFreeSpace > 0 && numberOfLines)
     987            return availableFreeSpace / (2 * numberOfLines);
     988        if (availableFreeSpace < 0)
     989            return availableFreeSpace / 2;
     990    }
     991    return 0;
     992}
     993
     994static LayoutUnit linePackingSpaceBetweenChildren(LayoutUnit availableFreeSpace, EFlexLinePack linePack, size_t numberOfLines)
     995{
     996    if (availableFreeSpace > 0 && numberOfLines > 1) {
     997        if (linePack == LinePackJustify)
     998            return availableFreeSpace / (numberOfLines - 1);
     999        if (linePack == LinePackDistribute || linePack == LinePackStretch)
     1000            return availableFreeSpace / numberOfLines;
     1001    }
     1002    return 0;
     1003}
     1004
     1005void RenderFlexibleBox::packFlexLines(FlexOrderIterator& iterator, WTF::Vector<LineContext>& lineContexts)
     1006{
     1007    if (!isMultiline() || style()->flexLinePack() == LinePackStart)
     1008        return;
     1009
     1010    LayoutUnit availableCrossAxisSpace = crossAxisContentExtent();
     1011    for (size_t i = 0; i < lineContexts.size(); ++i)
     1012        availableCrossAxisSpace -= lineContexts[i].crossAxisExtent;
     1013
     1014    RenderBox* child = iterator.first();
     1015    LayoutUnit lineOffset = initialLinePackingOffset(availableCrossAxisSpace, style()->flexLinePack(), lineContexts.size());
     1016    for (size_t lineNumber = 0; lineNumber < lineContexts.size(); ++lineNumber) {
     1017        lineContexts[lineNumber].crossAxisOffset += lineOffset;
     1018        for (size_t childNumber = 0; childNumber < lineContexts[lineNumber].numberOfChildren; ++childNumber, child = iterator.next())
     1019            adjustAlignmentForChild(child, lineOffset);
     1020
     1021        if (style()->flexLinePack() == LinePackStretch && availableCrossAxisSpace > 0)
     1022            lineContexts[lineNumber].crossAxisExtent += availableCrossAxisSpace / lineContexts.size();
     1023
     1024        lineOffset += linePackingSpaceBetweenChildren(availableCrossAxisSpace, style()->flexLinePack(), lineContexts.size());
    9731025    }
    9741026}
    … …  
    10881140}
    10891141
    1090 void RenderFlexibleBox::flipForWrapReverse(FlexOrderIterator& iterator, const WTF::Vector<LineContext>& lineContexts)
     1142void RenderFlexibleBox::flipForWrapReverse(FlexOrderIterator& iterator, const WTF::Vector<LineContext>& lineContexts, LayoutUnit crossAxisStartEdge)
    10911143{
    10921144    LayoutUnit contentExtent = crossAxisContentExtent();
    … …  
    10971149            LayoutPoint location = flowAwareLocationForChild(child);
    10981150            LayoutUnit lineCrossAxisExtent = lineContexts[lineNumber].crossAxisExtent;
    1099             LayoutUnit originalOffset = lineContexts[lineNumber].crossAxisOffset - lineContexts[0].crossAxisOffset;
     1151            LayoutUnit originalOffset = lineContexts[lineNumber].crossAxisOffset - crossAxisStartEdge;
    11001152            LayoutUnit newOffset = contentExtent - originalOffset - lineCrossAxisExtent;
    11011153            location.setY(location.y() + newOffset - originalOffset);

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

    r112316 r112544  
    123123    void layoutAndPlaceChildren(LayoutUnit& crossAxisOffset, const OrderedFlexItemList&, const WTF::Vector<LayoutUnit>& childSizes, LayoutUnit availableFreeSpace, WTF::Vector<LineContext>&);
    124124    void layoutColumnReverse(const OrderedFlexItemList&, const WTF::Vector<LayoutUnit>& childSizes, LayoutUnit crossAxisOffset, LayoutUnit availableFreeSpace);
     125    void packFlexLines(FlexOrderIterator&, WTF::Vector<LineContext>&);
    125126    void alignChildren(FlexOrderIterator&, const WTF::Vector<LineContext>&);
    126127    void applyStretchAlignmentToChild(RenderBox*, LayoutUnit lineCrossAxisExtent);
    127128    void flipForRightToLeftColumn(FlexOrderIterator&);
    128     void flipForWrapReverse(FlexOrderIterator&, const WTF::Vector<LineContext>&);
     129    void flipForWrapReverse(FlexOrderIterator&, const WTF::Vector<LineContext>&, LayoutUnit crossAxisStartEdge);
    129130};
    130131
Note: See TracChangeset for help on using the changeset viewer.