Changeset 126503 in webkit


Ignore:
Timestamp:
Aug 23, 2012 4:41:09 PM (12 years ago)
Author:
commit-queue@webkit.org
Message:

Fix cross-direction stretch for replaced elements in column flexbox
​https://bugs.webkit.org/show_bug.cgi?id=94604

Patch by Shezan Baig <​shezbaig.wk@gmail.com> on 2012-08-23
Reviewed by Ojan Vafai.

Source/WebCore:

Moved the logic that constrains logical width by MinSize and MaxSize to
a new helper function called constrainLogicalWidthInRegionByMinMax.
This helper function is used from both computeLogicalWidthInRegion and
RenderFlexibleBox::applyStretchAlignmentToChild.

RenderFlexibleBox no longer checks for isMultiline when stretching
elements in a column flexbox. Instead, we now constrain the available
width by the child's min-width and max-width, and set the override
width only if that constrained width is different from the child's
current logicalWidth.

No new tests. The existing css3/flexbox/flexitem.html test was extended
to exercise the new code.

  • rendering/RenderBox.cpp:

(WebCore::RenderBox::constrainLogicalWidthInRegionByMinMax): New helper
method to constrain logical width by min-width and max-width.
(WebCore):
(WebCore::RenderBox::computeLogicalWidthInRegion): Changed to use the
new constrainLogicalWidthInRegionByMinMax helper method.

  • rendering/RenderBox.h:

(RenderBox):

  • rendering/RenderFlexibleBox.cpp:

(WebCore::RenderFlexibleBox::applyStretchAlignmentToChild): Changed to
use constrainLogicalWidthInRegionByMinMax to determine the override
width for the child.

LayoutTests:

Fixed failing test cases. Add tests for min/max width/height.

  • css3/flexbox/flexitem-expected.txt:
  • css3/flexbox/flexitem.html:
Location:
trunk
Files:
7 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r126499 r126503  
     12012-08-23  Shezan Baig  <shezbaig.wk@gmail.com>
     2
     3        Fix cross-direction stretch for replaced elements in column flexbox
     4        https://bugs.webkit.org/show_bug.cgi?id=94604
     5
     6        Reviewed by Ojan Vafai.
     7
     8        Fixed failing test cases. Add tests for min/max width/height.
     9
     10        * css3/flexbox/flexitem-expected.txt:
     11        * css3/flexbox/flexitem.html:
     12
    1132012-08-23  Kenneth Russell  <kbr@google.com>
    214

  • trunk/LayoutTests/css3/flexbox/flexitem-expected.txt

    r126257 r126503  
    2626PASS
    2727
    28 FAIL:
    29 Expected 100px for width, but got 300.
    30 
    31 <div class="flexbox column" style="width:100px">
    32   <!-- FIXME: The iframe should shrink in the cross direction: https://webkit.org/b/94604 -->
    33   <iframe data-expected-display="block" data-expected-width="100px" src="data:text/html,&lt;body bgcolor=#fff&gt;iframe&lt;/body&gt;"></iframe>
    34   <iframe seamless="" data-expected-display="block" data-expected-width="100px" src="data:text/html,&lt;body bgcolor=#fff&gt;iframe&lt;/body&gt;"></iframe>
    35 </div>
     28PASS
    3629button
    3730
    3831object
    3932
    40 FAIL:
    41 Expected 600 for width, but got 34.
    42 Expected 600 for width, but got 60.
    43 Expected 600 for width, but got 300.
    44 Expected 600 for width, but got 56.
    45 Expected 600 for width, but got 155.
     33PASS
    4634
    47 <div class="flexbox column" style="height:210px">
    48   <!-- FIXME: The button should stretch in the cross direction. -->
    49   <button data-expected-display="block" data-expected-width="600" data-expected-height="30">button</button>
    50   <!-- FIXME: The canvas should stretch in the cross direction: https://webkit.org/b/94604 -->
    51   <canvas data-expected-display="block" data-expected-width="600" data-expected-height="30" style="height:30px">canvas</canvas>
    52   <!-- FIXME: The iframe should stretch in the cross direction: https://webkit.org/b/94604 -->
    53   <iframe data-expected-display="block" data-expected-width="600" data-expected-height="30" style="height:30px" src="data:text/html,&lt;body bgcolor=#fff&gt;iframe&lt;/body&gt;"></iframe>
    54   <iframe seamless="" data-expected-display="block" data-expected-width="600" data-expected-height="30" style="height:30px" src="data:text/html,&lt;body bgcolor=#fff&gt;iframe&lt;/body&gt;"></iframe>
    55   <object data-expected-display="block" data-expected-width="600" data-expected-height="30">object</object>
    56   <!-- FIXME: The select should stretch in the cross direction. -->
    57   <select data-expected-display="block" data-expected-width="600" data-expected-height="30">
    58     <option>select</option>
    59   </select>
    60   <!-- FIXME: The textarea should stretch in the cross direction. -->
    61   <textarea data-expected-display="block" data-expected-width="600" data-expected-height="30">textarea</textarea>
    62 </div>
     35PASS
     36
     37PASS
     38
     39PASS
     40
     41PASS

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

    r126257 r126503  
    126126</div>
    127127
     128<!-- tests that min-height expands the height of flex items beyond the height of the flexbox -->
     129<div class="flexbox" style="height:50px">
     130    <img data-expected-height="60" style="min-height:60px" src="../images/resources/blue-100.png">
     131    <img data-expected-height="60" style="min-height:60px" src="../images/resources/green-10.png">
     132    <img data-expected-height="75" style="min-height:150%" src="../images/resources/blue-100.png">
     133    <img data-expected-height="75" style="min-height:150%" src="../images/resources/green-10.png">
     134    <!-- TODO: test min-content, max-content, fill-available, fit-content when these are implemented for height -->
     135</div>
     136
     137<!-- tests that max-height shrinks the height of flex items less than the height of the flexbox -->
     138<div class="flexbox" style="height:50px">
     139    <img data-expected-height="40" style="max-height:40px" src="../images/resources/blue-100.png">
     140    <img data-expected-height="40" style="max-height:40px" src="../images/resources/green-10.png">
     141    <img data-expected-height="25" style="max-height:50%" src="../images/resources/blue-100.png">
     142    <img data-expected-height="25" style="max-height:50%" src="../images/resources/green-10.png">
     143    <!-- TODO: test min-content, max-content, fill-available, fit-content when these are implemented for height -->
     144</div>
     145
     146<!-- tests that min-width expands the width of flex items beyond the width of the flexbox -->
     147<div class="flexbox column" style="width:50px">
     148    <img data-expected-width="60" style="min-width:60px" src="../images/resources/blue-100.png">
     149    <img data-expected-width="60" style="min-width:60px" src="../images/resources/green-10.png">
     150    <img data-expected-width="75" style="min-width:150%" src="../images/resources/blue-100.png">
     151    <img data-expected-width="75" style="min-width:150%" src="../images/resources/green-10.png">
     152    <img data-expected-width="100" style="min-width:-webkit-min-content" src="../images/resources/blue-100.png">
     153    <img data-expected-width="50" style="min-width:-webkit-min-content" src="../images/resources/green-10.png">
     154    <img data-expected-width="100" style="min-width:-webkit-max-content" src="../images/resources/blue-100.png">
     155    <img data-expected-width="50" style="min-width:-webkit-max-content" src="../images/resources/green-10.png">
     156    <img data-expected-width="50" style="min-width:-webkit-fill-available" src="../images/resources/blue-100.png">
     157    <img data-expected-width="50" style="min-width:-webkit-fill-available" src="../images/resources/green-10.png">
     158    <img data-expected-width="100" style="min-width:-webkit-fit-content" src="../images/resources/blue-100.png">
     159    <img data-expected-width="50" style="min-width:-webkit-fit-content" src="../images/resources/green-10.png">
     160</div>
     161
     162<!-- tests that max-width shrinks the width of flex items less than the width of the flexbox -->
     163<div class="flexbox column" style="width:50px">
     164    <img data-expected-width="40" style="max-width:40px" src="../images/resources/blue-100.png">
     165    <img data-expected-width="40" style="max-width:40px" src="../images/resources/green-10.png">
     166    <img data-expected-width="25" style="max-width:50%" src="../images/resources/blue-100.png">
     167    <img data-expected-width="25" style="max-width:50%" src="../images/resources/green-10.png">
     168    <img data-expected-width="50" style="max-width:-webkit-min-content" src="../images/resources/blue-100.png">
     169    <img data-expected-width="10" style="max-width:-webkit-min-content" src="../images/resources/green-10.png">
     170    <img data-expected-width="50" style="max-width:-webkit-max-content" src="../images/resources/blue-100.png">
     171    <img data-expected-width="10" style="max-width:-webkit-max-content" src="../images/resources/green-10.png">
     172    <img data-expected-width="50" style="max-width:-webkit-fill-available" src="../images/resources/blue-100.png">
     173    <img data-expected-width="50" style="max-width:-webkit-fill-available" src="../images/resources/green-10.png">
     174    <img data-expected-width="50" style="max-width:-webkit-fit-content" src="../images/resources/blue-100.png">
     175    <img data-expected-width="10" style="max-width:-webkit-fit-content" src="../images/resources/green-10.png">
     176</div>
     177
    128178</html>

  • trunk/Source/WebCore/ChangeLog

    r126502 r126503  
     12012-08-23  Shezan Baig  <shezbaig.wk@gmail.com>
     2
     3        Fix cross-direction stretch for replaced elements in column flexbox
     4        https://bugs.webkit.org/show_bug.cgi?id=94604
     5
     6        Reviewed by Ojan Vafai.
     7
     8        Moved the logic that constrains logical width by MinSize and MaxSize to
     9        a new helper function called constrainLogicalWidthInRegionByMinMax.
     10        This helper function is used from both computeLogicalWidthInRegion and
     11        RenderFlexibleBox::applyStretchAlignmentToChild.
     12
     13        RenderFlexibleBox no longer checks for isMultiline when stretching
     14        elements in a column flexbox. Instead, we now constrain the available
     15        width by the child's min-width and max-width, and set the override
     16        width only if that constrained width is different from the child's
     17        current logicalWidth.
     18
     19        No new tests. The existing css3/flexbox/flexitem.html test was extended
     20        to exercise the new code.
     21
     22        * rendering/RenderBox.cpp:
     23        (WebCore::RenderBox::constrainLogicalWidthInRegionByMinMax): New helper
     24        method to constrain logical width by min-width and max-width.
     25        (WebCore):
     26        (WebCore::RenderBox::computeLogicalWidthInRegion): Changed to use the
     27        new constrainLogicalWidthInRegionByMinMax helper method.
     28        * rendering/RenderBox.h:
     29        (RenderBox):
     30        * rendering/RenderFlexibleBox.cpp:
     31        (WebCore::RenderFlexibleBox::applyStretchAlignmentToChild): Changed to
     32        use constrainLogicalWidthInRegionByMinMax to determine the override
     33        width for the child.
     34
    1352012-08-23  Adam Barth  <abarth@webkit.org>
    236

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

    r126468 r126503  
    434434}
    435435
     436LayoutUnit RenderBox::constrainLogicalWidthInRegionByMinMax(LayoutUnit logicalWidth, LayoutUnit availableWidth, RenderBlock* cb, RenderRegion* region, LayoutUnit offsetFromLogicalTopOfFirstPage)
     437{
     438    RenderStyle* styleToUse = style();
     439    if (!styleToUse->logicalMaxWidth().isUndefined())
     440        logicalWidth = min(logicalWidth, computeLogicalWidthInRegionUsing(MaxSize, availableWidth, cb, region, offsetFromLogicalTopOfFirstPage));
     441    return max(logicalWidth, computeLogicalWidthInRegionUsing(MinSize, availableWidth, cb, region, offsetFromLogicalTopOfFirstPage));
     442}
     443
    436444LayoutUnit RenderBox::constrainLogicalHeightByMinMax(LayoutUnit logicalHeight)
    437445{
    438446    RenderStyle* styleToUse = style();
    439447    if (!styleToUse->logicalMaxHeight().isUndefined()) {
    440         // Constrain by MaxSize.
    441448        LayoutUnit maxH = computeLogicalHeightUsing(MaxSize, styleToUse->logicalMaxHeight());
    442449        if (maxH != -1)
    443450            logicalHeight = min(logicalHeight, maxH);
    444451    }
    445     // Constrain by MinSize.
    446452    return max(logicalHeight, computeLogicalHeightUsing(MinSize, styleToUse->logicalMinHeight()));
    447453}
    … …  
    16891695        setLogicalWidth(logicalWidthLength.value() + borderAndPaddingLogicalWidth());
    16901696    else {
    1691         // Calculate LogicalWidth
    1692         setLogicalWidth(computeLogicalWidthInRegionUsing(MainOrPreferredSize, containerWidthInInlineDirection, cb, region, offsetFromLogicalTopOfFirstPage));
    1693 
    1694         // Calculate MaxLogicalWidth
    1695         if (!styleToUse->logicalMaxWidth().isUndefined()) {
    1696             LayoutUnit maxLogicalWidth = computeLogicalWidthInRegionUsing(MaxSize, containerWidthInInlineDirection, cb, region, offsetFromLogicalTopOfFirstPage);
    1697             if (logicalWidth() > maxLogicalWidth)
    1698                 setLogicalWidth(maxLogicalWidth);
    1699         }
    1700 
    1701         // Calculate MinLogicalWidth
    1702         LayoutUnit minLogicalWidth = computeLogicalWidthInRegionUsing(MinSize, containerWidthInInlineDirection, cb, region, offsetFromLogicalTopOfFirstPage);
    1703         if (logicalWidth() < minLogicalWidth)
    1704             setLogicalWidth(minLogicalWidth);
     1697        LayoutUnit preferredWidth = computeLogicalWidthInRegionUsing(MainOrPreferredSize, containerWidthInInlineDirection, cb, region, offsetFromLogicalTopOfFirstPage);
     1698        setLogicalWidth(constrainLogicalWidthInRegionByMinMax(preferredWidth, containerWidthInInlineDirection, cb, region, offsetFromLogicalTopOfFirstPage));
    17051699    }
    17061700

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

    r126468 r126503  
    7676    LayoutUnit logicalHeight() const { return style()->isHorizontalWritingMode() ? height() : width(); }
    7777
     78    LayoutUnit constrainLogicalWidthInRegionByMinMax(LayoutUnit, LayoutUnit, RenderBlock*, RenderRegion* = 0, LayoutUnit offsetFromLogicalTopOfFirstPage = ZERO_LAYOUT_UNIT);
    7879    LayoutUnit constrainLogicalHeightByMinMax(LayoutUnit);
    7980

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

    r126468 r126503  
    12471247            }
    12481248        }
    1249     } else if (isColumnFlow() && child->style()->logicalWidth().isAuto() && isMultiline()) {
    1250         // FIXME: Handle min-width and max-width.
    1251         // FIXME: We only need to relayout here if the width changes.
    1252         // FIXME: The isMultiline check above may not be necessary if the width has not changed. See https://webkit.org/b/94237
    1253         LayoutUnit childWidth = lineCrossAxisExtent - crossAxisMarginExtentForChild(child);
    1254         child->setOverrideLogicalContentWidth(std::max(ZERO_LAYOUT_UNIT, childWidth));
    1255         child->setChildNeedsLayout(true, MarkOnlyThis);
    1256         child->layoutIfNeeded();
     1249    } else if (isColumnFlow() && child->style()->logicalWidth().isAuto()) {
     1250        // FIXME: If the child doesn't have orthogonal flow, then it already has an override width set, so use it.
     1251        if (hasOrthogonalFlow(child)) {
     1252            LayoutUnit childWidth = std::max(ZERO_LAYOUT_UNIT, lineCrossAxisExtent - crossAxisMarginExtentForChild(child));
     1253            childWidth = child->constrainLogicalWidthInRegionByMinMax(childWidth, childWidth, this);
     1254
     1255            if (childWidth != child->logicalWidth()) {
     1256                child->setOverrideLogicalContentWidth(childWidth);
     1257                child->setChildNeedsLayout(true, MarkOnlyThis);
     1258                child->layoutIfNeeded();
     1259            }
     1260        }
    12571261    }
    12581262}
Note: See TracChangeset for help on using the changeset viewer.