Changeset 111094 in webkit


Ignore:
Timestamp:
Mar 16, 2012 5:16:37 PM (12 years ago)
Author:
tony@chromium.org
Message:

flex-item-align: stretch should only grow, never shrink
​https://bugs.webkit.org/show_bug.cgi?id=80882

Reviewed by Ojan Vafai.

Source/WebCore:

New test cases in css3/flexbox/flex-align-stretch.html.

  • rendering/RenderFlexibleBox.cpp:

(WebCore::RenderFlexibleBox::alignChildren): Move stretch code into a separate function.
(WebCore::RenderFlexibleBox::alignChildStretch): Add an early return if our height is shrinking.
(WebCore):

  • rendering/RenderFlexibleBox.h:

(RenderFlexibleBox):

LayoutTests:

  • css3/flexbox/child-overflow-expected.html:
  • css3/flexbox/child-overflow.html: For cases that overflow the height, we now just overflow rather than reducing the height.
  • css3/flexbox/flex-align-stretch-expected.txt:
  • css3/flexbox/flex-align-stretch.html: New test cases.
Location:
trunk
Files:
8 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r111090 r111094  
     12012-03-16  Tony Chang  <tony@chromium.org>
     2
     3        flex-item-align: stretch should only grow, never shrink
     4        https://bugs.webkit.org/show_bug.cgi?id=80882
     5
     6        Reviewed by Ojan Vafai.
     7
     8        * css3/flexbox/child-overflow-expected.html:
     9        * css3/flexbox/child-overflow.html: For cases that overflow the height, we now just overflow rather than reducing the height.
     10        * css3/flexbox/flex-align-stretch-expected.txt:
     11        * css3/flexbox/flex-align-stretch.html: New test cases.
     12
    1132012-03-16  Daniel Cheng  <dcheng@chromium.org>
    214

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

    r104785 r111094  
    55.container {
    66    display: inline-block;
    7     margin-right: 5px;
     7    margin-right: 30px;
     8    width: 100px;
     9    height: 100px;
     10    border: 5px solid pink;
     11    position: relative;
    812}
    913
    1014.container > div {
    11     border: 5px solid pink;
    1215    overflow: auto;
     16    width: 100px;
    1317    height: 100px;
    14     width: 100px;
    1518}
    1619
    … …  
    2023    background: -webkit-radial-gradient(center, ellipse cover, rgba(30,87,153,1) 0%,rgba(89,148,202,1) 62%,rgba(95,154,207,0.7) 68%,rgba(125,185,232,0) 100%);
    2124}
     25
     26p {
     27    margin-bottom: 30px;
     28}
    2229</style>
    2330</head>
    2431<body>
    25     <p>Scrollbars should work in all the flexboxes and each row should show four identical boxes.</p>
    26 </body>
     32    <p>Scrollbars should work in all the flexboxes. The first and third
     33    columns should overflow the logical height. Each row should be aligned
     34    to the same corner.</p>
     35
     36    <div class="container bottomLeft"><div style="height: auto; position: absolute; bottom: 0"><div></div></div></div>
     37    <div class="container bottomLeft"><div><div></div></div></div>
     38    <div class="container bottomLeft"><div style="height: auto; position: absolute; bottom: 0"><div></div></div></div>
     39    <div class="container bottomLeft"><div><div></div></div></div>
     40    <br>
     41    <div class="container topRight"><div style="width: auto; overflow-x: hidden; overflow-y: scroll; position: absolute; right: 0"><div></div></div></div>
     42    <div class="container topRight"><div><div></div></div></div>
     43    <div class="container topRight"><div style="width: auto; overflow-x: hidden; overflow-y: scroll; position: absolute; right: 0"><div></div></div></div>
     44    <div class="container topRight"><div><div></div></div></div>
     45    <br>
     46    <div class="container"><div style="width: auto; overflow-x: hidden; overflow-y: scroll; position: absolute;"><div></div></div></div>
     47    <div class="container"><div><div></div></div></div>
     48    <div class="container"><div style="width: auto; overflow-x: hidden; overflow-y: scroll; position: absolute;"><div></div></div></div>
     49    <div class="container"><div><div></div></div></div>
     50    <br>
     51    <div class="container"><div style="height: auto"><div></div></div></div>
     52    <div class="container"><div><div></div></div></div>
     53    <div class="container"><div style="height: auto"><div></div></div></div>
     54    <div class="container"><div><div></div></div></div>
     55
    2756<script>
    28 var origins = ['', 'bottomLeft', 'topRight', ''];
    29 
    30 origins.forEach(function(origin) {
    31     for (var i = 0; i < 4; ++i) {
    32         var containerClass = 'container ' + origin;
    33         document.body.innerHTML +=
    34             "<div class='" + containerClass + "'>" +
    35             "<div><div></div></div>" +
    36             "</div>";
    37     }
    38     document.body.innerHTML += "<br>";
    39 });
    4057
    4158Array.prototype.forEach.call(document.querySelectorAll('.bottomLeft'), function(element) {

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

    r104785 r111094  
    55.container {
    66    display: inline-block;
    7     margin-right: 5px;
     7    margin-right: 30px;
    88}
    99
    … …  
    5656    background: -webkit-radial-gradient(center, ellipse cover, rgba(30,87,153,1) 0%,rgba(89,148,202,1) 62%,rgba(95,154,207,0.7) 68%,rgba(125,185,232,0) 100%);
    5757}
     58
     59p {
     60    margin-bottom: 30px;
     61}
    5862</style>
    5963</head>
    6064<body>
    61     <p>Scrollbars should work in all the flexboxes and each row should show four identical boxes.</p>
     65    <p>Scrollbars should work in all the flexboxes. The first and third
     66    columns should overflow the logical height. Each row should be aligned
     67    to the same corner.</p>
    6268</body>
    6369<script>
    64 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-rl', 'vertical-lr'];
     70var writingModes = ['horizontal-bt', 'vertical-rl', 'vertical-lr', 'horizontal-tb'];
    6571var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse'];
    6672writingModes.forEach(function(writingMode) {
    … …  
    7379            "<div style='width: -webkit-flex(0 1 auto); height: -webkit-flex(0 1 auto)'><div></div></div>" +
    7480            "</div>" +
    75             "</div>";
     81            "</div> ";
    7682    });
    7783    document.body.innerHTML += "<br>";

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

    r104313 r111094  
    33PASS
    44PASS
     5PASS
     6PASS

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

    r104313 r111094  
    8383</div>
    8484
     85<!-- When overflowing the height, flex-align: stretch doesn't cause the flex item to get smaller. -->
     86<div class="flexbox" style="height: 50px; width: 600px;">
     87  <div data-expected-height="60" style="background-color: yellow; width: 300px">
     88    <div data-expected-height="60" style="height: 60px; width: 10px; background-color: orange"></div>
     89  </div>
     90</div>
     91
     92<!-- In the column case, the width of the flex item is constrained by the width of the flexbox, so flex-align: stretch doesn't change the width. -->
     93<div class="flexbox" style="-webkit-flex-direction: column; width: 100px;">
     94  <div data-expected-width="100" data-expected-height="50" style="background-color: yellow;">
     95    <div data-expected-width="200" style="height: 50px; width: 200px; background-color: orange"></div>
     96  </div>
     97</div>
     98
    8599</html>

  • trunk/Source/WebCore/ChangeLog

    r111091 r111094  
     12012-03-16  Tony Chang  <tony@chromium.org>
     2
     3        flex-item-align: stretch should only grow, never shrink
     4        https://bugs.webkit.org/show_bug.cgi?id=80882
     5
     6        Reviewed by Ojan Vafai.
     7
     8        New test cases in css3/flexbox/flex-align-stretch.html.
     9
     10        * rendering/RenderFlexibleBox.cpp:
     11        (WebCore::RenderFlexibleBox::alignChildren): Move stretch code into a separate function.
     12        (WebCore::RenderFlexibleBox::alignChildStretch): Add an early return if our height is shrinking.
     13        (WebCore):
     14        * rendering/RenderFlexibleBox.h:
     15        (RenderFlexibleBox):
     16
    1172012-03-16  Raphael Kubo da Costa  <kubo@profusion.mobi>
    218

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

    r111053 r111094  
    975975            break;
    976976        case AlignStretch: {
    977             if (!isColumnFlow() && child->style()->logicalHeight().isAuto()) {
    978                 LayoutUnit logicalHeightBefore = child->logicalHeight();
    979                 LayoutUnit stretchedLogicalHeight = child->logicalHeight() + availableAlignmentSpaceForChild(lineCrossAxisExtent, child);
    980                 child->setLogicalHeight(stretchedLogicalHeight);
    981                 child->computeLogicalHeight();
    982 
    983                 if (child->logicalHeight() != logicalHeightBefore) {
    984                     child->setOverrideHeight(child->logicalHeight());
    985                     child->setLogicalHeight(0);
    986                     child->setChildNeedsLayout(true);
    987                     child->layoutIfNeeded();
    988                 }
    989             } else if (isColumnFlow() && child->style()->logicalWidth().isAuto() && isMultiline()) {
    990                 // FIXME: Handle min-width and max-width.
    991                 LayoutUnit childWidth = lineCrossAxisExtent - crossAxisMarginExtentForChild(child);
    992                 child->setOverrideWidth(std::max(0, childWidth));
    993                 child->setChildNeedsLayout(true);
    994                 child->layoutIfNeeded();
    995             }
     977            applyStretchAlignmentToChild(child, lineCrossAxisExtent);
    996978            // Since wrap-reverse flips cross start and cross end, strech children should be aligned with the cross end.
    997979            if (style()->flexWrap() == FlexWrapReverse)
    … …  
    10301012}
    10311013
     1014void RenderFlexibleBox::applyStretchAlignmentToChild(RenderBox* child, LayoutUnit lineCrossAxisExtent)
     1015{
     1016    if (!isColumnFlow() && child->style()->logicalHeight().isAuto()) {
     1017        LayoutUnit logicalHeightBefore = child->logicalHeight();
     1018        LayoutUnit stretchedLogicalHeight = child->logicalHeight() + availableAlignmentSpaceForChild(lineCrossAxisExtent, child);
     1019        if (stretchedLogicalHeight < logicalHeightBefore)
     1020            return;
     1021
     1022        child->setLogicalHeight(stretchedLogicalHeight);
     1023        child->computeLogicalHeight();
     1024
     1025        if (child->logicalHeight() != logicalHeightBefore) {
     1026            child->setOverrideHeight(child->logicalHeight());
     1027            child->setLogicalHeight(0);
     1028            child->setChildNeedsLayout(true);
     1029            child->layoutIfNeeded();
     1030        }
     1031    } else if (isColumnFlow() && child->style()->logicalWidth().isAuto() && isMultiline()) {
     1032        // FIXME: Handle min-width and max-width.
     1033        LayoutUnit childWidth = lineCrossAxisExtent - crossAxisMarginExtentForChild(child);
     1034        child->setOverrideWidth(std::max(0, childWidth));
     1035        child->setChildNeedsLayout(true);
     1036        child->layoutIfNeeded();
     1037    }
     1038}
     1039
    10321040void RenderFlexibleBox::flipForRightToLeftColumn(FlexOrderIterator& iterator)
    10331041{

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

    r110772 r111094  
    113113    void layoutColumnReverse(const OrderedFlexItemList&, const WTF::Vector<LayoutUnit>& childSizes, LayoutUnit crossAxisOffset, LayoutUnit availableFreeSpace);
    114114    void alignChildren(const OrderedFlexItemList&, LayoutUnit lineCrossAxisExtent, LayoutUnit maxAscent);
     115    void applyStretchAlignmentToChild(RenderBox*, LayoutUnit lineCrossAxisExtent);
    115116    void flipForRightToLeftColumn(FlexOrderIterator&);
    116117    void flipForWrapReverse(FlexOrderIterator&, const WrapReverseContext&);
Note: See TracChangeset for help on using the changeset viewer.