Changeset 126257 in webkit


Ignore:
Timestamp:
Aug 21, 2012 8:35:38 PM (12 years ago)
Author:
commit-queue@webkit.org
Message:

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

Patch by Shezan Baig <Shezan Baig> on 2012-08-21
Reviewed by Ojan Vafai.

Source/WebCore:

When stretching, don't take into account the instrinsic size of child
replaced elements. Only the fixed size, min size, and max size of the
child should be taken into account. The logic that computed this was
moved from RenderBox::computeLogicalHeight to a new helper method
called logicalHeightConstrainedByMinMax. This helper method is now
used from RenderFlexibleBox::applyStretchAlignmentToChild, instead of
using RenderBox::computeLogicalHeight.

A similar change will need to be made for column-flowing flexboxes.
This will be addressed in ​https://webkit.org/b/94604.

No new tests. The existing css3/flexbox/flexitem.html test was
extended to cover this case.

  • rendering/RenderBox.cpp:

(WebCore::RenderBox::logicalHeightConstrainedByMinMax): New helper
method that is used by RenderBox::computeLogicalHeight and also by
RenderFlexibleBox::applyStretchAlignmentToChild.
(WebCore):
(WebCore::RenderBox::computeLogicalHeight): Updated to use the new
logicalHeightConstrainedByMinMax helper method.

  • rendering/RenderBox.h:

(RenderBox):

  • rendering/RenderFlexibleBox.cpp:

(WebCore::RenderFlexibleBox::applyStretchAlignmentToChild): Use
logicalHeightConstrainedByMinMax instead of computeLogicalHeight.

LayoutTests:

Fix test cases for images stretching in the cross direction. Also,
added test cases for stretching/shrinking iframes, seamless iframes,
and also tests for vertically flowing flexboxes.

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

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r126255 r126257  
     12012-08-21  Shezan Baig  <sbaig1@bloomberg.net>
     2
     3        Fix cross-direction stretch for replaced elements in row flexbox
     4        https://bugs.webkit.org/show_bug.cgi?id=94237
     5
     6        Reviewed by Ojan Vafai.
     7
     8        Fix test cases for images stretching in the cross direction. Also,
     9        added test cases for stretching/shrinking iframes, seamless iframes,
     10        and also tests for vertically flowing flexboxes.
     11
     12        * css3/flexbox/flexitem-expected.txt:
     13        * css3/flexbox/flexitem.html:
     14
    1152012-08-21  Kenneth Russell  <kbr@google.com>
    216

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

    r121613 r126257  
    77PASS
    88
    9 FAIL:
    10 Expected 100 for height, but got 10.
     9PASS
    1110
    12 <div class="flexbox">
    13   <img data-expected-display="block" data-expected-width="345" style="-webkit-flex: 1 0 auto;" src="../images/resources/blue-100.png">
    14   <!-- FIXME: The image should stretch in the cross direction. -->
    15   <img data-expected-display="block" data-expected-width="255" data-expected-height="100" style="-webkit-flex: 1 0 auto;" src="../images/resources/green-10.png">
    16 </div>
    17 
    18 FAIL:
    19 Expected 100 for height, but got 20.
    20 Expected 100 for height, but got 20.
    21 
    22 <div class="flexbox">
    23   <img data-expected-display="block" data-expected-width="200" style="-webkit-flex: 1 0 auto;" src="../images/resources/blue-100.png">
    24   <!-- FIXME: The missing image placeholders should stretch in the cross direction. -->
    25   <img data-expected-display="block" data-expected-width="200" data-expected-height="100" style="-webkit-flex: 2 0 0;" src="doesnotexist.png">
    26   <img data-expected-display="block" data-expected-width="200" data-expected-height="100" style="-webkit-flex: 2 0 0;" src="doesnotexist.png" alt="placeholder text">
    27 </div>
     11PASS
    2812PASS
    2913button
    … …  
    3721  <div data-expected-display="table" data-expected-width="600" style="display: inline-table"></div>
    3822</div>
     23
     24PASS
     25
     26PASS
     27
     28FAIL:
     29Expected 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>
     36button
     37
     38object
     39
     40FAIL:
     41Expected 600 for width, but got 34.
     42Expected 600 for width, but got 60.
     43Expected 600 for width, but got 300.
     44Expected 600 for width, but got 56.
     45Expected 600 for width, but got 155.
     46
     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>

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

    r124685 r126257  
    1717    min-width: 0;
    1818}
     19.column {
     20    -webkit-flex-direction: column;
     21}
    1922</style>
    2023<script>
    … …  
    2427<script src="../../resources/check-layout.js"></script>
    2528<body onload="checkLayout('.flexbox')">
    26 <div class="flexbox">
    27   <button data-expected-display="block" data-expected-width="100">button</button>
    28   <canvas data-expected-display="block" data-expected-width="100">canvas</canvas>
    29   <iframe data-expected-display="block" data-expected-width="100" src="data:text/html,<body bgcolor=#fff>iframe</body>"></iframe>
    30   <object data-expected-display="block" data-expected-width="100">object</object>
    31   <select data-expected-display="block" data-expected-width="100">
     29<div class="flexbox" style="height:200px">
     30  <button data-expected-display="block" data-expected-width="100" data-expected-height="200">button</button>
     31  <canvas data-expected-display="block" data-expected-width="100" data-expected-height="200">canvas</canvas>
     32  <iframe data-expected-display="block" data-expected-width="100" data-expected-height="200" src="data:text/html,<body bgcolor=#fff>iframe</body>"></iframe>
     33  <object data-expected-display="block" data-expected-width="100" data-expected-height="200">object</object>
     34  <select data-expected-display="block" data-expected-width="100" data-expected-height="200">
    3235    <option>select</option>
    3336  </select>
    34   <textarea data-expected-display="block" data-expected-width="100">textarea</textarea>
     37  <textarea data-expected-display="block" data-expected-width="100" data-expected-height="200">textarea</textarea>
    3538</div>
    3639
    … …  
    4952<div class="flexbox">
    5053  <img data-expected-display="block" data-expected-width="345" style="-webkit-flex: 1 0 auto;" src="../images/resources/blue-100.png">
    51   <!-- FIXME: The image should stretch in the cross direction. -->
    5254  <img data-expected-display="block" data-expected-width="255" data-expected-height="100" style="-webkit-flex: 1 0 auto;" src="../images/resources/green-10.png">
    5355</div>
    … …  
    5557<div class="flexbox">
    5658  <img data-expected-display="block" data-expected-width="200" style="-webkit-flex: 1 0 auto;" src="../images/resources/blue-100.png">
    57   <!-- FIXME: The missing image placeholders should stretch in the cross direction. -->
    5859  <img data-expected-display="block" data-expected-width="200" data-expected-height="100" style="-webkit-flex: 2 0 0;" src="doesnotexist.png">
    5960  <img data-expected-display="block" data-expected-width="200" data-expected-height="100" style="-webkit-flex: 2 0 0;" src="doesnotexist.png" alt="placeholder text">
    … …  
    9293</div>
    9394
     95<div class="flexbox" style="height:200px">
     96  <iframe data-expected-display="block" data-expected-height="200" src="data:text/html,<body bgcolor=#fff>iframe</body>"></iframe>
     97  <iframe seamless data-expected-display="block" data-expected-height="200" src="data:text/html,<body bgcolor=#fff>iframe</body>"></iframe>
     98</div>
     99
     100<div class="flexbox" style="height:100px">
     101  <iframe data-expected-display="block" data-expected-height="100" src="data:text/html,<body bgcolor=#fff>iframe</body>"></iframe>
     102  <iframe seamless data-expected-display="block" data-expected-height="100" src="data:text/html,<body bgcolor=#fff>iframe</body>"></iframe>
     103</div>
     104
     105<div class="flexbox column" style="width:100px">
     106  <!-- FIXME: The iframe should shrink in the cross direction: https://webkit.org/b/94604 -->
     107  <iframe data-expected-display="block" data-expected-width="100px" src="data:text/html,<body bgcolor=#fff>iframe</body>"></iframe>
     108  <iframe seamless data-expected-display="block" data-expected-width="100px" src="data:text/html,<body bgcolor=#fff>iframe</body>"></iframe>
     109</div>
     110
     111<div class="flexbox column" style="height:210px">
     112  <!-- FIXME: The button should stretch in the cross direction. -->
     113  <button data-expected-display="block" data-expected-width="600" data-expected-height="30">button</button>
     114  <!-- FIXME: The canvas should stretch in the cross direction: https://webkit.org/b/94604 -->
     115  <canvas data-expected-display="block" data-expected-width="600" data-expected-height="30" style="height:30px">canvas</canvas>
     116  <!-- FIXME: The iframe should stretch in the cross direction: https://webkit.org/b/94604 -->
     117  <iframe data-expected-display="block" data-expected-width="600" data-expected-height="30" style="height:30px" src="data:text/html,<body bgcolor=#fff>iframe</body>"></iframe>
     118  <iframe seamless data-expected-display="block" data-expected-width="600" data-expected-height="30" style="height:30px" src="data:text/html,<body bgcolor=#fff>iframe</body>"></iframe>
     119  <object data-expected-display="block" data-expected-width="600" data-expected-height="30">object</object>
     120  <!-- FIXME: The select should stretch in the cross direction. -->
     121  <select data-expected-display="block" data-expected-width="600" data-expected-height="30">
     122    <option>select</option>
     123  </select>
     124  <!-- FIXME: The textarea should stretch in the cross direction. -->
     125  <textarea data-expected-display="block" data-expected-width="600" data-expected-height="30">textarea</textarea>
     126</div>
     127
    94128</html>

  • trunk/Source/WebCore/ChangeLog

    r126256 r126257  
     12012-08-21  Shezan Baig  <sbaig1@bloomberg.net>
     2
     3        Fix cross-direction stretch for replaced elements in row flexbox
     4        https://bugs.webkit.org/show_bug.cgi?id=94237
     5
     6        Reviewed by Ojan Vafai.
     7
     8        When stretching, don't take into account the instrinsic size of child
     9        replaced elements. Only the fixed size, min size, and max size of the
     10        child should be taken into account. The logic that computed this was
     11        moved from RenderBox::computeLogicalHeight to a new helper method
     12        called logicalHeightConstrainedByMinMax.  This helper method is now
     13        used from RenderFlexibleBox::applyStretchAlignmentToChild, instead of
     14        using RenderBox::computeLogicalHeight.
     15
     16        A similar change will need to be made for column-flowing flexboxes.
     17        This will be addressed in https://webkit.org/b/94604.
     18
     19        No new tests.  The existing css3/flexbox/flexitem.html test was
     20        extended to cover this case.
     21
     22        * rendering/RenderBox.cpp:
     23        (WebCore::RenderBox::logicalHeightConstrainedByMinMax): New helper
     24        method that is used by RenderBox::computeLogicalHeight and also by
     25        RenderFlexibleBox::applyStretchAlignmentToChild.
     26        (WebCore):
     27        (WebCore::RenderBox::computeLogicalHeight): Updated to use the new
     28        logicalHeightConstrainedByMinMax helper method.
     29        * rendering/RenderBox.h:
     30        (RenderBox):
     31        * rendering/RenderFlexibleBox.cpp:
     32        (WebCore::RenderFlexibleBox::applyStretchAlignmentToChild): Use
     33        logicalHeightConstrainedByMinMax instead of computeLogicalHeight.
     34
    1352012-08-21  Hayato Ito  <hayato@chromium.org>
    236

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

    r125938 r126257  
    434434}
    435435
     436LayoutUnit RenderBox::logicalHeightConstrainedByMinMax(LayoutUnit availableHeight)
     437{
     438    RenderStyle* styleToUse = style();
     439    LayoutUnit result = computeLogicalHeightUsing(MainOrPreferredSize, styleToUse->logicalHeight());
     440    if (result == -1)
     441        result = availableHeight;
     442    LayoutUnit minH = computeLogicalHeightUsing(MinSize, styleToUse->logicalMinHeight()); // Leave as -1 if unset.
     443    LayoutUnit maxH = styleToUse->logicalMaxHeight().isUndefined() ? result : computeLogicalHeightUsing(MaxSize, styleToUse->logicalMaxHeight());
     444    if (maxH == -1)
     445        maxH = result;
     446    result = min(maxH, result);
     447    result = max(minH, result);
     448    return result;
     449}
     450
    436451IntRect RenderBox::absoluteContentBox() const
    437452{
    … …  
    19801995        // FIXME: Account for block-flow in flexible boxes.
    19811996        // https://bugs.webkit.org/show_bug.cgi?id=46418
    1982         RenderStyle* styleToUse = style();
    19831997        if (hasOverrideHeight() && parent()->isFlexibleBoxIncludingDeprecated())
    19841998            h = Length(overrideLogicalContentHeight(), Fixed);
    … …  
    19862000            h = Length(computeReplacedLogicalHeight(), Fixed);
    19872001        else {
    1988             h = styleToUse->logicalHeight();
     2002            h = style()->logicalHeight();
    19892003            checkMinMaxHeight = true;
    19902004        }
    … …  
    20002014
    20012015        LayoutUnit heightResult;
    2002         if (checkMinMaxHeight) {
    2003             heightResult = computeLogicalHeightUsing(MainOrPreferredSize, styleToUse->logicalHeight());
    2004             if (heightResult == -1)
    2005                 heightResult = logicalHeight();
    2006             LayoutUnit minH = computeLogicalHeightUsing(MinSize, styleToUse->logicalMinHeight()); // Leave as -1 if unset.
    2007             LayoutUnit maxH = styleToUse->logicalMaxHeight().isUndefined() ? heightResult : computeLogicalHeightUsing(MaxSize, styleToUse->logicalMaxHeight());
    2008             if (maxH == -1)
    2009                 maxH = heightResult;
    2010             heightResult = min(maxH, heightResult);
    2011             heightResult = max(minH, heightResult);
    2012         } else {
     2016        if (checkMinMaxHeight)
     2017            heightResult = logicalHeightConstrainedByMinMax(logicalHeight());
     2018        else {
    20132019            // The only times we don't check min/max height are when a fixed length has
    20142020            // been given as an override.  Just use that.  The value has already been adjusted

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

    r125794 r126257  
    7676    LayoutUnit logicalHeight() const { return style()->isHorizontalWritingMode() ? height() : width(); }
    7777
     78    LayoutUnit logicalHeightConstrainedByMinMax(LayoutUnit);
     79
    7880    int pixelSnappedLogicalHeight() const { return style()->isHorizontalWritingMode() ? pixelSnappedHeight() : pixelSnappedWidth(); }
    7981    int pixelSnappedLogicalWidth() const { return style()->isHorizontalWritingMode() ? pixelSnappedWidth() : pixelSnappedHeight(); }

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

    r125262 r126257  
    12341234{
    12351235    if (!isColumnFlow() && child->style()->logicalHeight().isAuto()) {
    1236         LayoutUnit logicalHeightBefore = child->logicalHeight();
    1237         LayoutUnit stretchedLogicalHeight = child->logicalHeight() + availableAlignmentSpaceForChild(lineCrossAxisExtent, child);
    1238 
    1239         child->setLogicalHeight(stretchedLogicalHeight);
    1240         child->computeLogicalHeight();
    1241 
    1242         // FIXME: Can avoid laying out here in some cases. See https://webkit.org/b/87905.
    1243         if (child->logicalHeight() != logicalHeightBefore) {
    1244             child->setOverrideLogicalContentHeight(child->logicalHeight() - child->borderAndPaddingLogicalHeight());
    1245             child->setLogicalHeight(0);
    1246             child->setChildNeedsLayout(true, MarkOnlyThis);
    1247             child->layoutIfNeeded();
     1236        // FIXME: If the child has orthogonal flow, then it already has an override height set. How do we stretch?
     1237        if (!hasOrthogonalFlow(child)) {
     1238            LayoutUnit stretchedLogicalHeight = child->logicalHeight() + availableAlignmentSpaceForChild(lineCrossAxisExtent, child);
     1239            LayoutUnit desiredLogicalHeight = child->logicalHeightConstrainedByMinMax(stretchedLogicalHeight);
     1240
     1241            // FIXME: Can avoid laying out here in some cases. See https://webkit.org/b/87905.
     1242            if (desiredLogicalHeight != child->logicalHeight()) {
     1243                child->setOverrideLogicalContentHeight(desiredLogicalHeight - child->borderAndPaddingLogicalHeight());
     1244                child->setLogicalHeight(0);
     1245                child->setChildNeedsLayout(true, MarkOnlyThis);
     1246                child->layoutIfNeeded();
     1247            }
    12481248        }
    12491249    } else if (isColumnFlow() && child->style()->logicalWidth().isAuto() && isMultiline()) {
    12501250        // 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
    12511253        LayoutUnit childWidth = lineCrossAxisExtent - crossAxisMarginExtentForChild(child);
    12521254        child->setOverrideLogicalContentWidth(std::max(ZERO_LAYOUT_UNIT, childWidth));
Note: See TracChangeset for help on using the changeset viewer.