Changeset 112154 in webkit


Ignore:
Timestamp:
Mar 26, 2012 3:26:02 PM (12 years ago)
Author:
tony@chromium.org
Message:

apply cross axis constraints before aligning children in flexbox
​https://bugs.webkit.org/show_bug.cgi?id=82240

Reviewed by Ojan Vafai.

Source/WebCore:

We weren't applying max-height constraints before aligning children.
This would cause center, end, stretch alignment to be wrong if we hit
a max-height on a flexbox.

This patch also moves the repositioning logic to happen after
computeLogicalHeight, which will be useful for flex-line-pack.

New test case in css3/flexbox/flex-align.html

  • rendering/RenderFlexibleBox.cpp:

(WebCore::RenderFlexibleBox::layoutBlock):
(WebCore::RenderFlexibleBox::layoutFlexItems):
(WebCore::RenderFlexibleBox::layoutAndPlaceChildren):

  • rendering/RenderFlexibleBox.h:

LayoutTests:

  • css3/flexbox/flex-align-expected.txt:
  • css3/flexbox/flex-align.html:
Location:
trunk
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r112151 r112154  
     12012-03-26  Tony Chang  <tony@chromium.org>
     2
     3        apply cross axis constraints before aligning children in flexbox
     4        https://bugs.webkit.org/show_bug.cgi?id=82240
     5
     6        Reviewed by Ojan Vafai.
     7
     8        * css3/flexbox/flex-align-expected.txt:
     9        * css3/flexbox/flex-align.html:
     10
    1112012-03-26  Ojan Vafai  <ojan@chromium.org>
    212

  • trunk/LayoutTests/css3/flexbox/flex-align-expected.txt

    r105015 r112154  
     1PASS
    12PASS
    23PASS

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

    r105015 r112154  
    223223</div>
    224224
     225<div class="flexbox" style="max-height: 20px">
     226  <div data-expected-height="40" data-offset-y="-10" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: center; height: 40px;"></div>
     227  <div data-expected-height="40" data-offset-y="-20" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: end; height: 40px;"></div>
     228  <div data-expected-height="40" data-offset-y="0" style="width: -webkit-flex(1 0 0); height: 40px;"></div>
     229  <div data-expected-height="20" data-offset-y="0" style="width: -webkit-flex(1 0 0);"></div>
     230</div>
     231
    225232<div class="flexbox" style="font-family: test;">
    226233  <div id="baseline1" style="width: -webkit-flex(1 0 0); -webkit-flex-item-align: baseline;">ahem</div>

  • trunk/Source/WebCore/ChangeLog

    r112148 r112154  
     12012-03-26  Tony Chang  <tony@chromium.org>
     2
     3        apply cross axis constraints before aligning children in flexbox
     4        https://bugs.webkit.org/show_bug.cgi?id=82240
     5
     6        Reviewed by Ojan Vafai.
     7
     8        We weren't applying max-height constraints before aligning children.
     9        This would cause center, end, stretch alignment to be wrong if we hit
     10        a max-height on a flexbox.
     11
     12        This patch also moves the repositioning logic to happen after
     13        computeLogicalHeight, which will be useful for flex-line-pack.
     14
     15        New test case in css3/flexbox/flex-align.html
     16
     17        * rendering/RenderFlexibleBox.cpp:
     18        (WebCore::RenderFlexibleBox::layoutBlock):
     19        (WebCore::RenderFlexibleBox::layoutFlexItems):
     20        (WebCore::RenderFlexibleBox::layoutAndPlaceChildren):
     21        * rendering/RenderFlexibleBox.h:
     22
    1232012-03-26  Anders Carlsson  <andersca@apple.com>
    224

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

    r111961 r112154  
    251251
    252252    setLogicalHeight(0);
    253     // We need to call both of these because we grab both crossAxisExtent and mainAxisExtent in layoutFlexItems.
    254253    computeLogicalWidth();
    255     computeLogicalHeight();
    256254
    257255    m_overflow.clear();
    … …  
    265263    }
    266264
    267     layoutFlexItems(relayoutChildren);
     265    WTF::Vector<LineContext> lineContexts;
     266    FlexOrderHashSet flexOrderValues;
     267    computeMainAxisPreferredSizes(relayoutChildren, flexOrderValues);
     268    FlexOrderIterator flexIterator(this, flexOrderValues);
     269    layoutFlexItems(relayoutChildren, flexIterator, lineContexts);
    268270
    269271    LayoutUnit oldClientAfterEdge = clientLogicalBottom();
    270272    computeLogicalHeight();
     273    repositionLogicalHeightDependentFlexItems(flexIterator, lineContexts, oldClientAfterEdge);
    271274
    272275    if (size() != previousSize)
    … …  
    290293
    291294    setNeedsLayout(false);
     295}
     296
     297void RenderFlexibleBox::repositionLogicalHeightDependentFlexItems(FlexOrderIterator& iterator, WTF::Vector<LineContext>& lineContexts, LayoutUnit& oldClientAfterEdge)
     298{
     299    // If we have a single line flexbox, the line height is all the available space.
     300    // For flex-direction: row, this means we need to use the height, so we do this after calling computeLogicalHeight.
     301    if (!isMultiline() && lineContexts.size() == 1)
     302        lineContexts[0].crossAxisExtent = crossAxisContentExtent();
     303    alignChildren(iterator, lineContexts);
     304
     305    if (style()->flexWrap() == FlexWrapReverse) {
     306        if (isHorizontalFlow())
     307            oldClientAfterEdge = clientLogicalBottom();
     308        flipForWrapReverse(iterator, lineContexts);
     309    }
     310
     311    // direction:rtl + flex-direction:column means the cross-axis direction is flipped.
     312    flipForRightToLeftColumn(iterator);
    292313}
    293314
    … …  
    590611}
    591612
    592 void RenderFlexibleBox::layoutFlexItems(bool relayoutChildren)
    593 {
    594     FlexOrderHashSet flexOrderValues;
    595     computeMainAxisPreferredSizes(relayoutChildren, flexOrderValues);
    596 
     613void RenderFlexibleBox::layoutFlexItems(bool relayoutChildren, FlexOrderIterator& iterator, WTF::Vector<LineContext>& lineContexts)
     614{
    597615    OrderedFlexItemList orderedChildren;
    598616    LayoutUnit preferredMainAxisExtent;
    … …  
    600618    float totalNegativeFlexibility;
    601619    LayoutUnit minMaxAppliedMainAxisExtent;
    602     WTF::Vector<LineContext> lineContexts;
    603     FlexOrderIterator flexIterator(this, flexOrderValues);
    604620
    605621    LayoutUnit crossAxisOffset = flowAwareBorderBefore() + flowAwarePaddingBefore();
    606     while (computeNextFlexLine(flexIterator, orderedChildren, preferredMainAxisExtent, totalPositiveFlexibility, totalNegativeFlexibility, minMaxAppliedMainAxisExtent)) {
     622    while (computeNextFlexLine(iterator, orderedChildren, preferredMainAxisExtent, totalPositiveFlexibility, totalNegativeFlexibility, minMaxAppliedMainAxisExtent)) {
    607623        LayoutUnit availableFreeSpace = computeAvailableFreeSpace(preferredMainAxisExtent);
    608624        FlexSign flexSign = (minMaxAppliedMainAxisExtent < preferredMainAxisExtent + availableFreeSpace) ? PositiveFlexibility : NegativeFlexibility;
    … …  
    616632        layoutAndPlaceChildren(crossAxisOffset, orderedChildren, childSizes, availableFreeSpace, lineContexts);
    617633    }
    618 //
    619     alignChildren(flexIterator, lineContexts);
    620 
    621     if (style()->flexWrap() == FlexWrapReverse)
    622         flipForWrapReverse(flexIterator, lineContexts);
    623 
    624     // direction:rtl + flex-direction:column means the cross-axis direction is flipped.
    625     flipForRightToLeftColumn(flexIterator);
    626634}
    627635
    … …  
    928936    }
    929937
    930     LayoutUnit lineCrossAxisExtent = isMultiline() ? maxChildCrossAxisExtent : crossAxisContentExtent();
    931     lineContexts.append(LineContext(crossAxisOffset, lineCrossAxisExtent, children.size(), maxAscent));
    932     crossAxisOffset += lineCrossAxisExtent;
     938    lineContexts.append(LineContext(crossAxisOffset, maxChildCrossAxisExtent, children.size(), maxAscent));
     939    crossAxisOffset += maxChildCrossAxisExtent;
    933940}
    934941
    … …  
    10771084void RenderFlexibleBox::flipForWrapReverse(FlexOrderIterator& iterator, const WTF::Vector<LineContext>& lineContexts)
    10781085{
    1079     if (!isColumnFlow())
    1080         computeLogicalHeight();
    1081 
    10821086    LayoutUnit contentExtent = crossAxisContentExtent();
    10831087    RenderBox* child = iterator.first();

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

    r111767 r112154  
    101101    LayoutUnit preferredMainAxisContentExtentForChild(RenderBox* child) const;
    102102
    103     void layoutFlexItems(bool relayoutChildren);
     103    void layoutFlexItems(bool relayoutChildren, FlexOrderIterator&, WTF::Vector<LineContext>&);
     104    void repositionLogicalHeightDependentFlexItems(FlexOrderIterator&, WTF::Vector<LineContext>&, LayoutUnit& oldClientAfterEdge);
    104105
    105106    float positiveFlexForChild(RenderBox* child) const;
    … …  
    120121    void setLogicalOverrideSize(RenderBox* child, LayoutUnit childPreferredSize);
    121122    void prepareChildForPositionedLayout(RenderBox* child, LayoutUnit mainAxisOffset, LayoutUnit crossAxisOffset);
    122     void layoutAndPlaceChildren(LayoutUnit& crossAxisOffset, const OrderedFlexItemList&, const WTF::Vector<LayoutUnit>& childSizes, LayoutUnit availableFreeSpace, WTF::Vector<LineContext>& lineContexts);
     123    void layoutAndPlaceChildren(LayoutUnit& crossAxisOffset, const OrderedFlexItemList&, const WTF::Vector<LayoutUnit>& childSizes, LayoutUnit availableFreeSpace, WTF::Vector<LineContext>&);
    123124    void layoutColumnReverse(const OrderedFlexItemList&, const WTF::Vector<LayoutUnit>& childSizes, LayoutUnit crossAxisOffset, LayoutUnit availableFreeSpace);
    124125    void alignChildren(FlexOrderIterator&, const WTF::Vector<LineContext>&);
Note: See TracChangeset for help on using the changeset viewer.