Changeset 117897 in webkit


Ignore:
Timestamp:
May 21, 2012 9:08:40 PM (12 years ago)
Author:
tony@chromium.org
Message:

auto margins on flexbox should allocate space in the flex direction
​https://bugs.webkit.org/show_bug.cgi?id=83086

Reviewed by Ojan Vafai.

Source/WebCore:

Test: css3/flexbox/flex-flow-auto-margins.html

  • rendering/RenderFlexibleBox.cpp:

(WebCore::RenderFlexibleBox::autoMarginOffsetInMainAxis):
(WebCore):
(WebCore::RenderFlexibleBox::updateAutoMarginsInMainAxis):
(WebCore::RenderFlexibleBox::layoutAndPlaceChildren): Update the margins on the RenderBox *after* we do the final child layout.

  • rendering/RenderFlexibleBox.h:

LayoutTests:

  • css3/flexbox/flex-algorithm-with-margins-expected.txt:
  • css3/flexbox/flex-algorithm-with-margins.html: Added safe centering test case.
  • css3/flexbox/flex-flow-auto-margins-expected.txt: Added.
  • css3/flexbox/flex-flow-auto-margins.html: Added.
  • css3/flexbox/flex-pack.html: Fixed old results.
Location:
trunk
Files:
2 added
7 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r117896 r117897  
     12012-05-21  Tony Chang  <tony@chromium.org>
     2
     3        auto margins on flexbox should allocate space in the flex direction
     4        https://bugs.webkit.org/show_bug.cgi?id=83086
     5
     6        Reviewed by Ojan Vafai.
     7
     8        * css3/flexbox/flex-algorithm-with-margins-expected.txt:
     9        * css3/flexbox/flex-algorithm-with-margins.html: Added safe centering test case.
     10        * css3/flexbox/flex-flow-auto-margins-expected.txt: Added.
     11        * css3/flexbox/flex-flow-auto-margins.html: Added.
     12        * css3/flexbox/flex-pack.html: Fixed old results.
     13
    1142012-05-21  Abhishek Arya  <inferno@chromium.org>
    215

  • trunk/LayoutTests/css3/flexbox/flex-algorithm-with-margins-expected.txt

    r110253 r117897  
    1010PASS
    1111PASS
     12PASS

  • trunk/LayoutTests/css3/flexbox/flex-algorithm-with-margins.html

    r117385 r117897  
    4444</div>
    4545
    46 <!-- Margins set to auto have a value of 0. -->
     46<!-- Margins set to auto get space only if there's space available after flexing. -->
    4747<div class="flexbox">
    4848  <div data-expected-width="200" style="-webkit-flex: 1 0 0;"></div>
    … …  
    5252
    5353<div class="flexbox">
    54   <div data-expected-width="133" style="-webkit-flex: 1 0 0;"></div>
    55   <div data-expected-width="233" data-offset-x="133" style="-webkit-flex: 1 0 100px; margin-left: auto;"></div>
    56   <div data-expected-width="133" data-offset-x="366" style="-webkit-flex: 1 0 0; margin-right: 100px"></div>
     54  <div data-expected-width="100" style="-webkit-flex: 1 0 0;"></div>
     55  <div data-expected-width="300" data-offset-x="100" style="-webkit-flex: 2 0 100px; margin-left: auto;"></div>
     56  <div data-expected-width="100" data-offset-x="400" style="-webkit-flex: 1 0 0; margin-right: 100px"></div>
    5757</div>
    5858
    59 <!-- Margins set to auto don't have negative flex either. -->
     59<!-- Margins set to auto don't have negative flex. -->
    6060<div class="flexbox">
    6161  <div data-expected-width="150" style="-webkit-flex: 1 1 300px;"></div>
    … …  
    6464</div>
    6565
    66 <!-- Margins set to auto don't center in flexboxen. -->
    6766<div class="flexbox">
    68   <div data-expected-width="300px" data-offset-x="0" style="-webkit-flex: 0 0 300px; margin: 0 auto;"></div>
     67  <div data-expected-width="300px" data-offset-x="150" style="-webkit-flex: 0 0 300px; margin: 0 auto;"></div>
     68</div>
     69
     70<!-- margin: auto safe centers, which means it won't overflow to before the start of the flexbox. -->
     71<div class="flexbox">
     72  <div data-expected-width="700px" data-offset-x="0" style="-webkit-flex: 0 0 700px; margin: 0 auto;"></div>
    6973</div>
    7074

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

    r117385 r117897  
    9797<div class="flexbox" style="-webkit-flex-pack: distribute"></div>
    9898
    99 <!-- margin:auto does nothing here. -->
     99<!-- margin:auto applies before packing. -->
    100100<div class="flexbox" style="-webkit-flex-pack: end">
    101   <div data-expected-width="100" data-offset-x="300" style="width: 100px;"></div>
    102   <div data-expected-width="100" data-offset-x="400" style="width: 100px; margin-right: auto"></div>
     101  <div data-expected-width="100" data-offset-x="0" style="width: 100px;"></div>
     102  <div data-expected-width="100" data-offset-x="100" style="width: 100px; margin-right: auto"></div>
    103103  <div data-expected-width="100" data-offset-x="500" style="width: 100px;"></div>
    104104</div>

  • trunk/Source/WebCore/ChangeLog

    r117890 r117897  
     12012-05-21  Tony Chang  <tony@chromium.org>
     2
     3        auto margins on flexbox should allocate space in the flex direction
     4        https://bugs.webkit.org/show_bug.cgi?id=83086
     5
     6        Reviewed by Ojan Vafai.
     7
     8        Test: css3/flexbox/flex-flow-auto-margins.html
     9
     10        * rendering/RenderFlexibleBox.cpp:
     11        (WebCore::RenderFlexibleBox::autoMarginOffsetInMainAxis):
     12        (WebCore):
     13        (WebCore::RenderFlexibleBox::updateAutoMarginsInMainAxis):
     14        (WebCore::RenderFlexibleBox::layoutAndPlaceChildren): Update the margins on the RenderBox *after* we do the final child layout.
     15        * rendering/RenderFlexibleBox.h:
     16
    1172012-05-21  Gyuyoung Kim  <gyuyoung.kim@samsung.com>
    218

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

    r116038 r117897  
    643643}
    644644
     645LayoutUnit RenderFlexibleBox::autoMarginOffsetInMainAxis(const OrderedFlexItemList& children, LayoutUnit& availableFreeSpace)
     646{
     647    if (availableFreeSpace <= 0)
     648        return 0;
     649
     650    int numberOfAutoMargins = 0;
     651    bool isHorizontal = isHorizontalFlow();
     652    for (size_t i = 0; i < children.size(); ++i) {
     653        RenderBox* child = children[i];
     654        if (child->isPositioned())
     655            continue;
     656        if (isHorizontal) {
     657            if (child->style()->marginLeft().isAuto())
     658                ++numberOfAutoMargins;
     659            if (child->style()->marginRight().isAuto())
     660                ++numberOfAutoMargins;
     661        } else {
     662            if (child->style()->marginTop().isAuto())
     663                ++numberOfAutoMargins;
     664            if (child->style()->marginBottom().isAuto())
     665                ++numberOfAutoMargins;
     666        }
     667    }
     668    if (!numberOfAutoMargins)
     669        return 0;
     670
     671    LayoutUnit sizeOfAutoMargin = availableFreeSpace / numberOfAutoMargins;
     672    availableFreeSpace = 0;
     673    return sizeOfAutoMargin;
     674}
     675
     676void RenderFlexibleBox::updateAutoMarginsInMainAxis(RenderBox* child, LayoutUnit autoMarginOffset)
     677{
     678    if (isHorizontalFlow()) {
     679        if (child->style()->marginLeft().isAuto())
     680            child->setMarginLeft(autoMarginOffset);
     681        if (child->style()->marginRight().isAuto())
     682            child->setMarginRight(autoMarginOffset);
     683    } else {
     684        if (child->style()->marginTop().isAuto())
     685            child->setMarginTop(autoMarginOffset);
     686        if (child->style()->marginBottom().isAuto())
     687            child->setMarginBottom(autoMarginOffset);
     688    }
     689}
     690
    645691LayoutUnit RenderFlexibleBox::availableAlignmentSpaceForChild(LayoutUnit lineCrossAxisExtent, RenderBox* child)
    646692{
    … …  
    674720        }
    675721
    676         // We set the margins because we want to make sure 'auto' has a margin
    677         // of 0 and because if we're not auto sizing, we don't do a layout that
    678         // computes the start/end margins.
     722        // Before running the flex algorithm, 'auto' has a margin of 0.
     723        // Also, if we're not auto sizing, we don't do a layout that computes the start/end margins.
    679724        if (isHorizontalFlow()) {
    680725            child->setMarginLeft(minimumValueForLength(child->style()->marginLeft(), flexboxAvailableContentExtent, renderView));
    … …  
    882927{
    883928    ASSERT(childSizes.size() == children.size());
     929
     930    LayoutUnit autoMarginOffset = autoMarginOffsetInMainAxis(children, availableFreeSpace);
    884931    LayoutUnit mainAxisOffset = flowAwareBorderStart() + flowAwarePaddingStart();
    885932    mainAxisOffset += initialPackingOffset(availableFreeSpace, style()->flexPack(), childSizes.size());
    … …  
    902949        child->setChildNeedsLayout(true);
    903950        child->layoutIfNeeded();
     951
     952        updateAutoMarginsInMainAxis(child, autoMarginOffset);
    904953
    905954        LayoutUnit childCrossAxisMarginBoxExtent;

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

    r115668 r117897  
    102102
    103103    void layoutFlexItems(FlexOrderIterator&, WTF::Vector<LineContext>&);
     104    LayoutUnit autoMarginOffsetInMainAxis(const OrderedFlexItemList&, LayoutUnit& availableFreeSpace);
     105    void updateAutoMarginsInMainAxis(RenderBox* child, LayoutUnit autoMarginOffset);
    104106    void repositionLogicalHeightDependentFlexItems(FlexOrderIterator&, WTF::Vector<LineContext>&, LayoutUnit& oldClientAfterEdge);
    105107
Note: See TracChangeset for help on using the changeset viewer.