Changeset 122508 in webkit


Ignore:
Timestamp:
Jul 12, 2012 2:38:33 PM (12 years ago)
Author:
ojan@chromium.org
Message:

Implied minimum size of flex items is min-content
​https://bugs.webkit.org/show_bug.cgi?id=87546

Reviewed by Tony Chang.

Source/WebCore:

​http://dev.w3.org/csswg/css3-flexbox/#min-size-auto
In the main axis direction, min-size of auto means min-content.

Test: css3/flexbox/flex-item-min-size.html

  • rendering/RenderBox.cpp:

(WebCore::RenderBox::computeLogicalWidthInRegionUsing):
(WebCore::RenderBox::computeContentLogicalHeightUsing):
(WebCore::RenderBox::computeReplacedLogicalWidthUsing):
(WebCore::RenderBox::computeReplacedLogicalHeightUsing):
(WebCore::RenderBox::computePositionedLogicalWidthUsing):
(WebCore::RenderBox::computePositionedLogicalHeightUsing):
It turned out that these FIXMEs are all unnecessary with the changes to RenderFlexibleBox.

  • rendering/RenderFlexibleBox.cpp:

(WebCore::RenderFlexibleBox::computeMainAxisPreferredSizes):
(WebCore::RenderFlexibleBox::adjustChildSizeForMinAndMax):

LayoutTests:

Mostly just set min-height/min-width:0 as appropriate to keep the tests testing
what the used to be testing. I made sure that each rendering was correct before
making the changes. In a couple cases, I changed expectations where I thought
the test was still testing was it was intending to test.

  • css3/flexbox/child-overflow.html:
  • css3/flexbox/columns-auto-size.html:
  • css3/flexbox/cross-axis-scrollbar.html:
  • css3/flexbox/flex-item-min-size-expected.txt: Added.
  • css3/flexbox/flex-item-min-size.html: Added.
  • css3/flexbox/flexitem.html:
  • css3/flexbox/line-wrapping.html:
  • css3/flexbox/perpendicular-writing-modes-inside-flex-item.html:
  • css3/flexbox/repaint-rtl-column.html:
Location:
trunk
Files:
2 added
11 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r122505 r122508  
     12012-07-12  Ojan Vafai  <ojan@chromium.org>
     2
     3        Implied minimum size of flex items is min-content
     4        https://bugs.webkit.org/show_bug.cgi?id=87546
     5
     6        Reviewed by Tony Chang.
     7
     8        Mostly just set min-height/min-width:0 as appropriate to keep the tests testing
     9        what the used to be testing. I made sure that each rendering was correct before
     10        making the changes. In a couple cases, I changed expectations where I thought
     11        the test was still testing was it was intending to test.
     12
     13        * css3/flexbox/child-overflow.html:
     14        * css3/flexbox/columns-auto-size.html:
     15        * css3/flexbox/cross-axis-scrollbar.html:
     16        * css3/flexbox/flex-item-min-size-expected.txt: Added.
     17        * css3/flexbox/flex-item-min-size.html: Added.
     18        * css3/flexbox/flexitem.html:
     19        * css3/flexbox/line-wrapping.html:
     20        * css3/flexbox/perpendicular-writing-modes-inside-flex-item.html:
     21        * css3/flexbox/repaint-rtl-column.html:
     22
    1232012-07-12  Dirk Pranke  <dpranke@chromium.org>
    224

  • trunk/LayoutTests/css3/flexbox/child-overflow.html

    r121611 r122508  
    4949.flexbox > div {
    5050    overflow: auto;
     51    min-width: 0;
     52    min-height: 0;
    5153}
    5254

  • trunk/LayoutTests/css3/flexbox/columns-auto-size.html

    r119990 r122508  
    6060  <div data-expected-height="10" data-offset-y="0" style="height: 10px;"></div>
    6161  <div data-expected-height="10" data-offset-y="10" style="-webkit-flex: 1 auto"><div style="height: 10px"></div></div>
    62   <div data-expected-height="0" data-offset-y="20" style="-webkit-flex: 1"><div data-expected-height="10" data-offset-y="20" class="child-div" style="height: 10px"></div></div>
     62  <div data-expected-height="0" data-offset-y="20" style="min-height: 0; -webkit-flex: 1"><div data-expected-height="10" data-offset-y="20" class="child-div" style="height: 10px"></div></div>
    6363</div>
    6464
    … …  
    8888
    8989<div class="flexbox horizontal" style="min-height: 5px; max-height: 17px;" data-expected-height="17">
    90   <div data-expected-height="9" data-offset-y="0" style="-webkit-flex: 0 1 auto"><div style="height: 10px"></div></div>
    91   <div data-expected-height="8" data-offset-y="9" style="-webkit-flex: 0 2 auto"><div style="height: 10px"></div></div>
     90  <div data-expected-height="9" data-offset-y="0" style="min-height: 0; -webkit-flex: 0 1 auto"><div style="height: 10px"></div></div>
     91  <div data-expected-height="8" data-offset-y="9" style="min-height: 0; -webkit-flex: 0 2 auto"><div style="height: 10px"></div></div>
    9292</div>
    9393
    9494<div class="flexbox horizontal" style="min-height: 5px; max-height: 30px; padding-top: 1px; padding-bottom: 2px;" data-expected-height="33">
    95   <div data-expected-height="15" data-offset-y="1" style="-webkit-flex: 0 1 auto"><div style="height: 20px"></div></div>
    96   <div data-expected-height="15" data-offset-y="16" style="-webkit-flex: 0 1 auto"><div style="height: 20px"></div></div>
     95  <div data-expected-height="15" data-offset-y="1" style="min-height: 0; -webkit-flex: 0 1 auto"><div style="height: 20px"></div></div>
     96  <div data-expected-height="15" data-offset-y="16" style="min-height: 0; -webkit-flex: 0 1 auto"><div style="height: 20px"></div></div>
    9797</div>
    9898
    … …  
    109109<!-- The first div overflows to the left, so give it a margin-left so we can see box it paints. -->
    110110<div class="flexbox vertical" style="margin-left: 100px;">
    111   <div data-expected-width="0" data-offset-x="20" style="-webkit-flex: 1"><div data-expected-width="50" data-offset-x="-30" class="child-div" style="width: 50px"></div></div>
     111  <div data-expected-width="0" data-offset-x="20" style="min-width: 0; -webkit-flex: 1"><div data-expected-width="50" data-offset-x="-30" class="child-div" style="width: 50px"></div></div>
    112112  <div data-expected-width="0" data-offset-x="20" style="-webkit-flex: 1"></div>
    113113  <div data-expected-width="10" data-offset-x="10" style="width: 10px;"></div>

  • trunk/LayoutTests/css3/flexbox/cross-axis-scrollbar.html

    r119405 r122508  
    3434    -webkit-flex: 1;
    3535    height: 50px;
     36    min-height: 0;
    3637}
    3738

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

    r121613 r122508  
    1515    padding: 0;
    1616    font-size: 12px;
     17    min-width: 0;
    1718}
    1819</style>

  • trunk/LayoutTests/css3/flexbox/line-wrapping.html

    r119990 r122508  
    150150</div>
    151151
    152 <div data-expected-width=500 data-expected-height=0 class="flexbox auto column horizontal-tb">
    153     <div data-expected-width=500 data-expected-height=0>
     152<div data-expected-width=500 data-expected-height=80 class="flexbox auto column horizontal-tb">
     153    <div data-expected-width=500 data-expected-height=40>
    154154        <div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=20 data-offset-x=0></div>
    155155    </div>
    156     <div data-expected-width=500 data-expected-height=0 style="-webkit-align-self: flex-start;">
    157         <div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=20 data-offset-x=0></div>
     156    <div data-expected-width=500 data-expected-height=40 style="-webkit-align-self: flex-start;">
     157        <div data-offset-y=40></div><div data-offset-y=40></div><div data-offset-y=40></div><div data-offset-y=40></div><div data-offset-y=40></div><div data-offset-y=60 data-offset-x=0></div>
    158158    </div>
    159159</div>
    … …  
    197197</div>
    198198
    199 <div data-expected-height=500 data-expected-width=0 class="flexbox auto column vertical-lr">
    200     <div data-expected-height=500 data-expected-width=0>
     199<div data-expected-height=500 data-expected-width=80 class="flexbox auto column vertical-lr">
     200    <div data-expected-height=500 data-expected-width=40>
    201201        <div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=24 data-offset-y=0></div>
    202202    </div>
    203     <div data-expected-height=500 data-expected-width=0 style="-webkit-align-self: flex-start;">
    204         <div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=24 data-offset-y=0></div>
     203    <div data-expected-height=500 data-expected-width=40 style="-webkit-align-self: flex-start;">
     204        <div data-offset-x=44></div><div data-offset-x=44></div><div data-offset-x=44></div><div data-offset-x=44></div><div data-offset-x=44></div><div data-offset-x=64 data-offset-y=0></div>
    205205    </div>
    206206</div>
    … …  
    243243</div>
    244244
    245 <!-- Not sure if these negative offsets are correct, but if there's a bug it's not a flexbox bug, e.g. the following html gets the same negative offsets:
    246 <div style="-webkit-writing-mode:vertical-rl;"><div style="width: 0"><div style="display: inline-block; height: 40px; width: 20px; background-color: blue;"></div></div></div>
    247 -->
    248 <div data-expected-height=500 data-expected-width=0 class="flexbox auto column vertical-rl">
    249     <div data-expected-height=500 data-expected-width=0>
    250         <div data-offset-x=-20></div><div data-offset-x=-20></div><div data-offset-x=-20></div><div data-offset-x=-20></div><div data-offset-x=-20></div><div data-offset-x=-40 data-offset-y=0></div>
    251     </div>
    252     <div data-expected-height=500 data-expected-width=0 style="-webkit-align-self: flex-start;">
    253         <div data-offset-x=-20></div><div data-offset-x=-20></div><div data-offset-x=-20></div><div data-offset-x=-20></div><div data-offset-x=-20></div><div data-offset-x=-40 data-offset-y=0></div>
     245<div data-expected-height=500 data-expected-width=80 class="flexbox auto column vertical-rl">
     246    <div data-expected-height=500 data-expected-width=40>
     247        <div data-offset-x=60></div><div data-offset-x=60></div><div data-offset-x=60></div><div data-offset-x=60></div><div data-offset-x=60></div><div data-offset-x=40 data-offset-y=0></div>
     248    </div>
     249    <div data-expected-height=500 data-expected-width=40 style="-webkit-align-self: flex-start;">
     250        <div data-offset-x=20></div><div data-offset-x=20></div><div data-offset-x=20></div><div data-offset-x=20></div><div data-offset-x=20></div><div data-offset-x=0 data-offset-y=0></div>
    254251    </div>
    255252</div>

  • trunk/LayoutTests/css3/flexbox/perpendicular-writing-modes-inside-flex-item.html

    r119990 r122508  
    1313    padding: 3px;
    1414    border: 4px solid cyan;
     15    min-height: 0;
    1516}
    1617.vertical {

  • trunk/LayoutTests/css3/flexbox/repaint-rtl-column.html

    r122374 r122508  
    1010    -webkit-flex: 1;
    1111    background-color: yellow;
     12    min-height: 0;
    1213}
    1314#content {
    1415    -webkit-flex: 1;
    1516    border: 5px solid blue;
     17    min-height: 0;
    1618}
    1719#content > div {

  • trunk/Source/WebCore/ChangeLog

    r122506 r122508  
     12012-07-12  Ojan Vafai  <ojan@chromium.org>
     2
     3        Implied minimum size of flex items is min-content
     4        https://bugs.webkit.org/show_bug.cgi?id=87546
     5
     6        Reviewed by Tony Chang.
     7
     8        http://dev.w3.org/csswg/css3-flexbox/#min-size-auto
     9        In the main axis direction, min-size of auto means min-content.
     10
     11        Test: css3/flexbox/flex-item-min-size.html
     12
     13        * rendering/RenderBox.cpp:
     14        (WebCore::RenderBox::computeLogicalWidthInRegionUsing):
     15        (WebCore::RenderBox::computeContentLogicalHeightUsing):
     16        (WebCore::RenderBox::computeReplacedLogicalWidthUsing):
     17        (WebCore::RenderBox::computeReplacedLogicalHeightUsing):
     18        (WebCore::RenderBox::computePositionedLogicalWidthUsing):
     19        (WebCore::RenderBox::computePositionedLogicalHeightUsing):
     20        It turned out that these FIXMEs are all unnecessary with the changes to RenderFlexibleBox.
     21
     22        * rendering/RenderFlexibleBox.cpp:
     23        (WebCore::RenderFlexibleBox::computeMainAxisPreferredSizes):
     24        (WebCore::RenderFlexibleBox::adjustChildSizeForMinAndMax):
     25
    1262012-07-12  Eric Penner  <epenner@google.com>
    227

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

    r122501 r122508  
    17411741    ASSERT(!logicalWidth.isUndefined());
    17421742
    1743     // FIXME: minWidth:auto on a flex-item needs to go down the intrinsicOrAuto path below.
    17441743    if (widthType == MinSize && logicalWidth.isAuto())
    17451744        return computeBorderBoxLogicalWidth(0);
    … …  
    20772076LayoutUnit RenderBox::computeContentLogicalHeightUsing(SizeType heightType, const Length& height)
    20782077{
    2079     // FIXME: For flexboxes, minHeight:auto should be min-content.
    20802078    if (height.isAuto())
    20812079        return heightType == MinSize ? 0 : -1;
    2082  
    20832080    if (height.isFixed())
    20842081        return height.value();
    … …  
    21892186LayoutUnit RenderBox::computeReplacedLogicalWidthUsing(SizeType sizeType, Length logicalWidth) const
    21902187{
    2191     // FIXME: For flexboxes, minWidth:auto should be min-content.
    21922188    if (sizeType == MinSize && logicalWidth.isAuto())
    21932189        return computeContentBoxLogicalWidth(0);
    … …  
    22322228LayoutUnit RenderBox::computeReplacedLogicalHeightUsing(SizeType sizeType, Length logicalHeight) const
    22332229{
    2234     // FIXME: For flexboxes, minWidth:auto should be min-content.
    22352230    if (sizeType == MinSize && logicalHeight.isAuto())
    22362231        return computeContentBoxLogicalHeight(0);
    … …  
    26702665                                                   LayoutUnit& logicalWidthValue, LayoutUnit& marginLogicalLeftValue, LayoutUnit& marginLogicalRightValue, LayoutUnit& logicalLeftPos)
    26712666{
    2672     // FIXME: What should flex items do here since min-width:auto == min-width:min-content instead of min-width:auto == min-width:0.
    26732667    if (widthSizeType == MinSize && logicalWidth.isAuto())
    26742668        logicalWidth = Length(0, Fixed);
    … …  
    30042998                                                    LayoutUnit& logicalHeightValue, LayoutUnit& marginBeforeValue, LayoutUnit& marginAfterValue, LayoutUnit& logicalTopPos)
    30052999{
    3006     // FIXME: What should flex items do here since min-height:auto == min-height:min-content instead of min-height:auto == min-height:0.
    30073000    if (heightSizeType == MinSize && logicalHeightLength.isAuto())
    30083001        logicalHeightLength = Length(0, Fixed);
    … …  
    30163009    LayoutUnit logicalTopValue = 0;
    30173010
    3018     // FIXME: For non-flexboxes + min-height, this needs to treat non-flexboxes as 0.
    30193011    bool logicalHeightIsAuto = logicalHeightLength.isAuto();
    30203012    bool logicalTopIsAuto = logicalTop.isAuto();

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

    r122264 r122508  
    752752        child->clearOverrideSize();
    753753        // Only need to layout here if we will need to get the logicalHeight of the child in computeNextFlexLine.
    754         if (hasOrthogonalFlow(child) && flexBasisForChild(child).isAuto()) {
     754        Length childMainAxisMin = isHorizontalFlow() ? child->style()->minWidth() : child->style()->minHeight();
     755        if (hasOrthogonalFlow(child) && (flexBasisForChild(child).isAuto() || childMainAxisMin.isAuto())) {
    755756            if (!relayoutChildren)
    756757                child->setChildNeedsLayout(true);
    … …  
    793794    if (max.isSpecified() && childSize > valueForLength(max, flexboxAvailableContentExtent, renderView))
    794795        childSize = valueForLength(max, flexboxAvailableContentExtent, renderView);
    795     // FIXME: Treat auto min values as min-content.
     796
    796797    if (min.isSpecified() && childSize < valueForLength(min, flexboxAvailableContentExtent, renderView))
    797         childSize = valueForLength(min, flexboxAvailableContentExtent, renderView);
     798        return valueForLength(min, flexboxAvailableContentExtent, renderView);
     799
     800    // FIXME: Support min/max sizes of fit-content, max-content and fill-available.
     801    if (min.isAuto()) {
     802        LayoutUnit minContent = hasOrthogonalFlow(child) ? child->logicalHeight() : child->minPreferredLogicalWidth();
     803        minContent -= mainAxisBorderAndPaddingExtentForChild(child);
     804        return std::max(childSize, minContent);
     805    }
     806
    798807    return childSize;
    799808}
Note: See TracChangeset for help on using the changeset viewer.