Changeset 101897 in webkit


Ignore:
Timestamp:
Dec 2, 2011 7:50:24 PM (12 years ago)
Author:
tony@chromium.org
Message:

Need to implement flex-flow: column-reverse
​https://bugs.webkit.org/show_bug.cgi?id=73504

Reviewed by David Hyatt.

Source/WebCore:

We can't just change the direction of the FlexOrderIterator because we want the overflow to be
on the top. We can't just position them in the reverse location since we don't know where the
bottom edge is until we've layed out the flex items. So we do an extra pass, but it should be
fast since we're not laying out, just moving.

  • rendering/RenderFlexibleBox.cpp:

(WebCore::RenderFlexibleBox::flowAwareBorderEnd):
(WebCore::RenderFlexibleBox::flowAwarePaddingEnd):
(WebCore::RenderFlexibleBox::layoutAndPlaceChildren):
(WebCore::RenderFlexibleBox::layoutColumnReverse): Do an extra pass to reposition flexitems in the reverse order.

  • rendering/RenderFlexibleBox.h:

LayoutTests:

Enable testing of column-reverse.

  • css3/flexbox/flex-flow-expected.txt:
  • css3/flexbox/flex-flow.html: Added test cases to make sure start and end still apply to the text flow direction.
  • css3/flexbox/flex-flow-border-expected.txt:
  • css3/flexbox/flex-flow-border.html: Single flexitem, so reverse does nothing.
  • css3/flexbox/flex-flow-margins-auto-size-expected.txt:
  • css3/flexbox/flex-flow-margins-auto-size.html: Ditto. The vertical tests cases (orthogonal directions) have always failed.
  • css3/flexbox/flex-flow-margins-expected.txt:
  • css3/flexbox/flex-flow-margins.html: Ditto.
  • css3/flexbox/flex-flow-orientations-expected.txt:
  • css3/flexbox/flex-flow-orientations.html: This test has 2 flexitems, the positions of which are now flipped.
  • css3/flexbox/flex-flow-overflow-expected.txt:
  • css3/flexbox/flex-flow-overflow.html: The overflow should go in the opposite direction vertically, but the same direction horizontally.
  • css3/flexbox/flex-flow-padding-expected.txt:
  • css3/flexbox/flex-flow-padding.html: Single flexitem, no change.
Location:
trunk
Files:
18 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r101895 r101897  
     12011-12-02  Tony Chang  <tony@chromium.org>
     2
     3        Need to implement flex-flow: column-reverse
     4        https://bugs.webkit.org/show_bug.cgi?id=73504
     5
     6        Reviewed by David Hyatt.
     7
     8        Enable testing of column-reverse.
     9
     10        * css3/flexbox/flex-flow-expected.txt:
     11        * css3/flexbox/flex-flow.html: Added test cases to make sure start and end still apply to the text flow direction.
     12        * css3/flexbox/flex-flow-border-expected.txt:
     13        * css3/flexbox/flex-flow-border.html: Single flexitem, so reverse does nothing.
     14        * css3/flexbox/flex-flow-margins-auto-size-expected.txt:
     15        * css3/flexbox/flex-flow-margins-auto-size.html: Ditto.  The vertical tests cases (orthogonal directions) have always failed.
     16        * css3/flexbox/flex-flow-margins-expected.txt:
     17        * css3/flexbox/flex-flow-margins.html: Ditto.
     18        * css3/flexbox/flex-flow-orientations-expected.txt:
     19        * css3/flexbox/flex-flow-orientations.html: This test has 2 flexitems, the positions of which are now flipped.
     20        * css3/flexbox/flex-flow-overflow-expected.txt:
     21        * css3/flexbox/flex-flow-overflow.html: The overflow should go in the opposite direction vertically, but the same direction horizontally.
     22        * css3/flexbox/flex-flow-padding-expected.txt:
     23        * css3/flexbox/flex-flow-padding.html: Single flexitem, no change.
     24
    1252011-12-02  Stephen Chenney  <schenney@chromium.org>
    226

  • trunk/LayoutTests/css3/flexbox/flex-flow-border-expected.txt

    r101703 r101897  
    2222PASS
    2323horizontal-tb ltr row-reverse logical
     24PASS
     25horizontal-tb rtl column-reverse physical
     26PASS
     27horizontal-tb rtl column-reverse logical
     28PASS
     29horizontal-tb ltr column-reverse physical
     30PASS
     31horizontal-tb ltr column-reverse logical
    2432PASS
    2533horizontal-bt rtl row physical
    … …  
    4755horizontal-bt ltr row-reverse logical
    4856PASS
     57horizontal-bt rtl column-reverse physical
     58PASS
     59horizontal-bt rtl column-reverse logical
     60PASS
     61horizontal-bt ltr column-reverse physical
     62PASS
     63horizontal-bt ltr column-reverse logical
     64PASS
    4965vertical-lr rtl row physical
    5066PASS
    … …  
    7086PASS
    7187vertical-lr ltr row-reverse logical
     88PASS
     89vertical-lr rtl column-reverse physical
     90PASS
     91vertical-lr rtl column-reverse logical
     92PASS
     93vertical-lr ltr column-reverse physical
     94PASS
     95vertical-lr ltr column-reverse logical
    7296PASS
    7397vertical-rl rtl row physical
    … …  
    95119vertical-rl ltr row-reverse logical
    96120PASS
     121vertical-rl rtl column-reverse physical
     122PASS
     123vertical-rl rtl column-reverse logical
     124PASS
     125vertical-rl ltr column-reverse physical
     126PASS
     127vertical-rl ltr column-reverse logical
     128PASS
    97129

  • trunk/LayoutTests/css3/flexbox/flex-flow-border.html

    r101703 r101897  
    225225
    226226var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-rl'];
    227 // FIXME: Test column-reverse.
    228 var flexFlows = ['row', 'column', 'row-reverse'];
     227var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse'];
    229228var directions = ['rtl', 'ltr'];
    230229var marginTypes = ['physical', 'logical'];

  • trunk/LayoutTests/css3/flexbox/flex-flow-expected.txt

    r101703 r101897  
    77PASS
    88PASS
     9PASS
     10PASS
     11PASS
     12PASS

  • trunk/LayoutTests/css3/flexbox/flex-flow-margins-auto-size-expected.txt

    r101703 r101897  
    1111horizontal-tb ltr row-reverse
    1212PASS
     13horizontal-tb rtl column-reverse
     14PASS
     15horizontal-tb ltr column-reverse
     16PASS
    1317horizontal-bt rtl row
    1418PASS
    … …  
    2226PASS
    2327horizontal-bt ltr row-reverse
     28PASS
     29horizontal-bt rtl column-reverse
     30PASS
     31horizontal-bt ltr column-reverse
    2432PASS
    2533vertical-lr rtl row
    … …  
    6371
    6472<div class="container" data-expected-width="90" data-expected-height="90"><div class="flexbox vertical-lr ltr row-reverse" data-offset-x="40" data-offset-y="10">
     73<div style="width: -webkit-flex(1 20px); height: -webkit-flex(1 20px);" data-expected-width="20" data-expected-height="20" data-offset-x="48" data-offset-y="23"></div>
     74</div></div>
     75vertical-lr rtl column-reverse
     76FAIL:
     77Expected 90 for width, but got 60.
     78
     79<div class="container" data-expected-width="90" data-expected-height="90"><div class="flexbox vertical-lr rtl column-reverse" data-offset-x="40" data-offset-y="10">
     80<div style="width: -webkit-flex(1 20px); height: -webkit-flex(1 20px);" data-expected-width="20" data-expected-height="20" data-offset-x="48" data-offset-y="23"></div>
     81</div></div>
     82vertical-lr ltr column-reverse
     83FAIL:
     84Expected 90 for width, but got 60.
     85
     86<div class="container" data-expected-width="90" data-expected-height="90"><div class="flexbox vertical-lr ltr column-reverse" data-offset-x="40" data-offset-y="10">
    6587<div style="width: -webkit-flex(1 20px); height: -webkit-flex(1 20px);" data-expected-width="20" data-expected-height="20" data-offset-x="48" data-offset-y="23"></div>
    6688</div></div>
    … …  
    107129<div style="width: -webkit-flex(1 20px); height: -webkit-flex(1 20px);" data-expected-width="20" data-expected-height="20" data-offset-x="48" data-offset-y="23"></div>
    108130</div></div>
     131vertical-rl rtl column-reverse
     132FAIL:
     133Expected 90 for width, but got 60.
    109134
     135<div class="container" data-expected-width="90" data-expected-height="90"><div class="flexbox vertical-rl rtl column-reverse" data-offset-x="40" data-offset-y="10">
     136<div style="width: -webkit-flex(1 20px); height: -webkit-flex(1 20px);" data-expected-width="20" data-expected-height="20" data-offset-x="48" data-offset-y="23"></div>
     137</div></div>
     138vertical-rl ltr column-reverse
     139FAIL:
     140Expected 90 for width, but got 60.
     141
     142<div class="container" data-expected-width="90" data-expected-height="90"><div class="flexbox vertical-rl ltr column-reverse" data-offset-x="40" data-offset-y="10">
     143<div style="width: -webkit-flex(1 20px); height: -webkit-flex(1 20px);" data-expected-width="20" data-expected-height="20" data-offset-x="48" data-offset-y="23"></div>
     144</div></div>
     145

  • trunk/LayoutTests/css3/flexbox/flex-flow-margins-auto-size.html

    r101703 r101897  
    6363// https://bugs.webkit.org/show_bug.cgi?id=70769
    6464var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-rl'];
    65 // FIXME: Test column-reverse.
    66 var flexFlows = ['row', 'column', 'row-reverse'];
     65var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse'];
    6766var directions = ['rtl', 'ltr'];
    6867

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

    r101703 r101897  
    1414PASS
    1515horizontal-tb ltr column logical
     16PASS
     17horizontal-tb rtl row-reverse physical
     18PASS
     19horizontal-tb rtl row-reverse logical
     20PASS
     21horizontal-tb ltr row-reverse physical
     22PASS
     23horizontal-tb ltr row-reverse logical
    1624PASS
    1725horizontal-tb rtl row-reverse physical
    … …  
    4755horizontal-bt ltr row-reverse logical
    4856PASS
     57horizontal-bt rtl row-reverse physical
     58PASS
     59horizontal-bt rtl row-reverse logical
     60PASS
     61horizontal-bt ltr row-reverse physical
     62PASS
     63horizontal-bt ltr row-reverse logical
     64PASS
    4965vertical-lr rtl row physical
    5066PASS
    … …  
    6278PASS
    6379vertical-lr ltr column logical
     80PASS
     81vertical-lr rtl row-reverse physical
     82PASS
     83vertical-lr rtl row-reverse logical
     84PASS
     85vertical-lr ltr row-reverse physical
     86PASS
     87vertical-lr ltr row-reverse logical
    6488PASS
    6589vertical-lr rtl row-reverse physical
    … …  
    95119vertical-rl ltr row-reverse logical
    96120PASS
     121vertical-rl rtl row-reverse physical
     122PASS
     123vertical-rl rtl row-reverse logical
     124PASS
     125vertical-rl ltr row-reverse physical
     126PASS
     127vertical-rl ltr row-reverse logical
     128PASS
    97129

  • trunk/LayoutTests/css3/flexbox/flex-flow-margins.html

    r101703 r101897  
    215215
    216216var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-rl'];
    217 // FIXME: Test column-reverse.
    218 var flexFlows = ['row', 'column', 'row-reverse'];
     217var flexFlows = ['row', 'column', 'row-reverse', 'row-reverse'];
    219218var directions = ['rtl', 'ltr'];
    220219var marginTypes = ['physical', 'logical'];

  • trunk/LayoutTests/css3/flexbox/flex-flow-orientations-expected.txt

    r101703 r101897  
    1010PASS
    1111horizontal-tb ltr row-reverse
     12PASS
     13horizontal-tb rtl column-reverse
     14PASS
     15horizontal-tb ltr column-reverse
    1216PASS
    1317horizontal-bt rtl row
    … …  
    2327horizontal-bt ltr row-reverse
    2428PASS
     29horizontal-bt rtl column-reverse
     30PASS
     31horizontal-bt ltr column-reverse
     32PASS
    2533vertical-lr rtl row
    2634PASS
    … …  
    3442PASS
    3543vertical-lr ltr row-reverse
     44PASS
     45vertical-lr rtl column-reverse
     46PASS
     47vertical-lr ltr column-reverse
    3648PASS
    3749vertical-rl rtl row
    … …  
    4759vertical-rl ltr row-reverse
    4860PASS
     61vertical-rl rtl column-reverse
     62PASS
     63vertical-rl ltr column-reverse
     64PASS
    4965

  • trunk/LayoutTests/css3/flexbox/flex-flow-orientations.html

    r101703 r101897  
    7676            ltr: [[0, 0], [0, 20]]
    7777        },
     78        'column-reverse': {
     79            rtl: [[80, 80], [80, 60]],
     80            ltr: [[0, 80], [0, 60]]
     81        },
    7882        row: {
    7983            rtl: [[80, 0], [60, 0]],
    … …  
    8993            rtl: [[80, 80], [80, 60]],
    9094            ltr: [[0, 80], [0, 60]]
     95        },
     96        'column-reverse': {
     97            rtl: [[80, 0], [80, 20]],
     98            ltr: [[0, 0], [0, 20]]
    9199        },
    92100        row: {
    … …  
    104112            ltr: [[0, 0], [20, 0]]
    105113        },
     114        'column-reverse': {
     115            rtl: [[80, 80], [60, 80]],
     116            ltr: [[80, 0], [60, 0]]
     117        },
    106118        row: {
    107119            rtl: [[0, 80], [0, 60]],
    … …  
    118130            ltr: [[80, 0], [60, 0]]
    119131        },
     132        'column-reverse': {
     133            rtl: [[0, 80], [20, 80]],
     134            ltr: [[0, 0], [20, 0]]
     135        },
    120136        row: {
    121137            rtl: [[80, 80], [80, 60]],
    … …  
    130146
    131147var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-rl'];
    132 // FIXME: Test column-reverse.
    133 var flexFlows = ['row', 'column', 'row-reverse'];
     148var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse'];
    134149var directions = ['rtl', 'ltr'];
    135150

  • trunk/LayoutTests/css3/flexbox/flex-flow-overflow-expected.txt

    r101703 r101897  
    1010PASS
    1111horizontal-tb ltr row-reverse
     12PASS
     13horizontal-tb rtl column-reverse
     14PASS
     15horizontal-tb ltr column-reverse
    1216PASS
    1317horizontal-bt rtl row
    … …  
    2327horizontal-bt ltr row-reverse
    2428PASS
     29horizontal-bt rtl column-reverse
     30PASS
     31horizontal-bt ltr column-reverse
     32PASS
    2533vertical-lr rtl row
    2634PASS
    … …  
    3442PASS
    3543vertical-lr ltr row-reverse
     44PASS
     45vertical-lr rtl column-reverse
     46PASS
     47vertical-lr ltr column-reverse
    3648PASS
    3749vertical-rl rtl row
    … …  
    4759vertical-rl ltr row-reverse
    4860PASS
     61vertical-rl rtl column-reverse
     62PASS
     63vertical-rl ltr column-reverse
     64PASS
    4965

  • trunk/LayoutTests/css3/flexbox/flex-flow-overflow.html

    r101703 r101897  
    7474    'horizontal-tb': {
    7575        rtl: [-5, 0],
    76         ltr: [0, 0]
     76        ltr: [0, 0],
     77        'rtl-column-reverse': [-5, -5],
     78        'ltr-column-reverse': [0, -5],
    7779    },
    7880    'horizontal-bt': {
    7981        rtl: [-5, -5],
    80         ltr: [0, -5]
     82        ltr: [0, -5],
     83        'rtl-column-reverse': [-5, 0],
     84        'ltr-column-reverse': [0, 0],
    8185    },
    8286    'vertical-lr': {
    8387        rtl: [0, -5],
    84         ltr: [0, 0]
     88        ltr: [0, 0],
     89        'rtl-column-reverse': [-5, -5],
     90        'ltr-column-reverse': [-5, 0],
    8591    },
    8692    'vertical-rl': {
    8793        rtl: [-5, -5],
    88         ltr: [-5, 0]
     94        ltr: [-5, 0],
     95        'rtl-column-reverse': [0, -5],
     96        'ltr-column-reverse': [0, 0],
    8997    }
    9098}
    9199
    92100var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-rl'];
    93 // FIXME: Test column-reverse.
    94 var flexFlows = ['row', 'column', 'row-reverse'];
     101var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse'];
    95102var directions = ['rtl', 'ltr'];
    96103
    … …  
    110117
    111118            var flowDirection = direction;
    112             if (flexFlow.indexOf("-reverse") != -1)
     119            // row-reverse is the same as flipping the writing direction.
     120            if (flexFlow == "row-reverse")
    113121                flowDirection = direction == "rtl" ? "ltr" : "rtl";
     122            else if (flexFlow == "column-reverse")
     123                flowDirection = direction + "-column-reverse";
    114124
    115125            container.innerHTML = '\n<div class="flexbox ' + flexboxClassName + '" ' + sizeAsString(containerSize) + '>\n' +

  • trunk/LayoutTests/css3/flexbox/flex-flow-padding-expected.txt

    r101703 r101897  
    2222PASS
    2323horizontal-tb ltr row-reverse logical
     24PASS
     25horizontal-tb rtl column-reverse physical
     26PASS
     27horizontal-tb rtl column-reverse logical
     28PASS
     29horizontal-tb ltr column-reverse physical
     30PASS
     31horizontal-tb ltr column-reverse logical
    2432PASS
    2533horizontal-bt rtl row physical
    … …  
    4755horizontal-bt ltr row-reverse logical
    4856PASS
     57horizontal-bt rtl column-reverse physical
     58PASS
     59horizontal-bt rtl column-reverse logical
     60PASS
     61horizontal-bt ltr column-reverse physical
     62PASS
     63horizontal-bt ltr column-reverse logical
     64PASS
    4965vertical-lr rtl row physical
    5066PASS
    … …  
    7086PASS
    7187vertical-lr ltr row-reverse logical
     88PASS
     89vertical-lr rtl column-reverse physical
     90PASS
     91vertical-lr rtl column-reverse logical
     92PASS
     93vertical-lr ltr column-reverse physical
     94PASS
     95vertical-lr ltr column-reverse logical
    7296PASS
    7397vertical-rl rtl row physical
    … …  
    95119vertical-rl ltr row-reverse logical
    96120PASS
     121vertical-rl rtl column-reverse physical
     122PASS
     123vertical-rl rtl column-reverse logical
     124PASS
     125vertical-rl ltr column-reverse physical
     126PASS
     127vertical-rl ltr column-reverse logical
     128PASS
    97129

  • trunk/LayoutTests/css3/flexbox/flex-flow-padding.html

    r101703 r101897  
    228228
    229229var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-rl'];
    230 // FIXME: Test column-reverse.
    231 var flexFlows = ['row', 'column', 'row-reverse'];
     230var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse'];
    232231var directions = ['rtl', 'ltr'];
    233232var marginTypes = ['physical', 'logical'];

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

    r101703 r101897  
    103103
    104104<div style="position: relative;">
     105<div class="flexbox column-reverse">
     106  <div data-expected-height="150" data-offset-y="450" style="height: -webkit-flex(1 0 0); margin: auto 200px auto 150px;"></div>
     107  <div data-expected-height="300" data-offset-y="150" style="height: -webkit-flex(2 0 0); -webkit-padding-start: 200px"><div data-offset-y="150" data-offset-x="200"></div></div>
     108  <div data-expected-height="150" data-offset-y="0" style="height: -webkit-flex(1 0 0); -webkit-margin-end: 100px;"></div>
     109</div>
     110</div>
     111
     112<div style="position: relative;">
    105113<div class="flexbox column rtl">
    106114  <div data-expected-height="150" data-offset-y="0" data-offset-x="480" style="height: -webkit-flex(1 0 0); margin: auto 100px auto 50px;"></div>
    107115  <div data-expected-height="300" data-offset-y="150" style="height: -webkit-flex(2 0 0); -webkit-padding-start: 200px"><div data-offset-y="150" data-offset-x="380"></div></div>
    108116  <div data-expected-height="150" data-offset-y="450" data-offset-x="580" style="height: -webkit-flex(1 0 0); -webkit-margin-end: 100px;"></div>
     117</div>
     118</div>
     119
     120<div style="position: relative;">
     121<div class="flexbox column-reverse rtl">
     122  <div data-expected-height="150" data-offset-y="450" data-offset-x="480" style="height: -webkit-flex(1 0 0); margin: auto 100px auto 50px;"></div>
     123  <div data-expected-height="300" data-offset-y="150" style="height: -webkit-flex(2 0 0); -webkit-padding-start: 200px"><div data-offset-y="150" data-offset-x="380"></div></div>
     124  <div data-expected-height="150" data-offset-y="0" data-offset-x="580" style="height: -webkit-flex(1 0 0); -webkit-margin-end: 100px;"></div>
    109125</div>
    110126</div>
    … …  
    118134
    119135<div style="position: relative;">
     136<div data-expected-height="600" class="flexbox vertical-lr column-reverse">
     137  <div data-offset-x="100" data-expected-width="500" style="width: -webkit-flex(1 0 0); min-width: 300px"></div>
     138  <div data-offset-x="0" data-offset-y="100" data-expected-width="100" style="width: -webkit-flex(1 0 200px); max-width: 100px; margin: 100px 0 50px 0;"></div>
     139</div>
     140</div>
     141
     142<div style="position: relative;">
    120143<div data-expected-height="600" class="flexbox vertical-rl column">
    121144  <div data-offset-x="100" data-expected-width="500" style="width: -webkit-flex(1 0 0); min-width: 300px; margin-bottom: 100px"></div>
    … …  
    124147</div>
    125148
     149<div style="position: relative;">
     150<div data-expected-height="600" class="flexbox vertical-rl column-reverse">
     151  <div data-offset-x="0" data-expected-width="500" style="width: -webkit-flex(1 0 0); min-width: 300px; margin-bottom: 100px"></div>
     152  <div data-offset-x="500" data-offset-y="100" data-expected-width="100" style="width: -webkit-flex(1 0 200px); max-width: 100px; margin: 100px 0 50px 0;"></div>
     153</div>
     154</div>
     155
    126156</body>
    127157</html>

  • trunk/Source/WebCore/ChangeLog

    r101895 r101897  
     12011-12-02  Tony Chang  <tony@chromium.org>
     2
     3        Need to implement flex-flow: column-reverse
     4        https://bugs.webkit.org/show_bug.cgi?id=73504
     5
     6        Reviewed by David Hyatt.
     7
     8        We can't just change the direction of the FlexOrderIterator because we want the overflow to be
     9        on the top. We can't just position them in the reverse location since we don't know where the
     10        bottom edge is until we've layed out the flex items. So we do an extra pass, but it should be
     11        fast since we're not laying out, just moving.
     12
     13        * rendering/RenderFlexibleBox.cpp:
     14        (WebCore::RenderFlexibleBox::flowAwareBorderEnd):
     15        (WebCore::RenderFlexibleBox::flowAwarePaddingEnd):
     16        (WebCore::RenderFlexibleBox::layoutAndPlaceChildren):
     17        (WebCore::RenderFlexibleBox::layoutColumnReverse): Do an extra pass to reposition flexitems in the reverse order.
     18        * rendering/RenderFlexibleBox.h:
     19
    1202011-12-02  Stephen Chenney  <schenney@chromium.org>
    221

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

    r101703 r101897  
    299299}
    300300
     301LayoutUnit RenderFlexibleBox::flowAwareBorderEnd() const
     302{
     303    if (isHorizontalFlow())
     304        return isLeftToRightFlow() ? borderRight() : borderLeft();
     305    return isLeftToRightFlow() ? borderBottom() : borderTop();
     306}
     307
    301308LayoutUnit RenderFlexibleBox::flowAwareBorderBefore() const
    302309{
    … …  
    325332        return isLeftToRightFlow() ? paddingLeft() : paddingRight();
    326333    return isLeftToRightFlow() ? paddingTop() : paddingBottom();
     334}
     335
     336LayoutUnit RenderFlexibleBox::flowAwarePaddingEnd() const
     337{
     338    if (isHorizontalFlow())
     339        return isLeftToRightFlow() ? paddingRight() : paddingLeft();
     340    return isLeftToRightFlow() ? paddingBottom() : paddingTop();
    327341}
    328342
    … …  
    556570}
    557571
     572static LayoutUnit initialPackingOffset(LayoutUnit availableFreeSpace, float totalPositiveFlexibility, EFlexPack flexPack)
     573{
     574    if (hasPackingSpace(availableFreeSpace, totalPositiveFlexibility)) {
     575        if (flexPack == PackEnd)
     576            return availableFreeSpace;
     577        if (flexPack == PackCenter)
     578            return availableFreeSpace / 2;
     579    }
     580    return 0;
     581}
     582
     583static LayoutUnit packingSpaceBetweenChildren(LayoutUnit availableFreeSpace, float totalPositiveFlexibility, EFlexPack flexPack, size_t numberOfChildren)
     584{
     585    if (hasPackingSpace(availableFreeSpace, totalPositiveFlexibility) && flexPack == PackJustify && numberOfChildren > 1)
     586        return availableFreeSpace / (numberOfChildren - 1);
     587    return 0;
     588}
     589
    558590void RenderFlexibleBox::setLogicalOverrideSize(RenderBox* child, LayoutUnit childPreferredSize)
    559591{
    … …  
    568600{
    569601    LayoutUnit startEdge = flowAwareBorderStart() + flowAwarePaddingStart();
    570 
    571     if (hasPackingSpace(availableFreeSpace, totalPositiveFlexibility)) {
    572         if (style()->flexPack() == PackEnd)
    573             startEdge += availableFreeSpace;
    574         else if (style()->flexPack() == PackCenter)
    575             startEdge += availableFreeSpace / 2;
    576     }
     602    startEdge += initialPackingOffset(availableFreeSpace, totalPositiveFlexibility, style()->flexPack());
    577603
    578604    LayoutUnit logicalTop = flowAwareBorderBefore() + flowAwarePaddingBefore();
    … …  
    609635        startEdge += childMainExtent + flowAwareMarginEndForChild(child);
    610636
    611         if (hasPackingSpace(availableFreeSpace, totalPositiveFlexibility) && style()->flexPack() == PackJustify && childSizes.size() > 1)
    612             startEdge += availableFreeSpace / (childSizes.size() - 1);
     637        startEdge += packingSpaceBetweenChildren(availableFreeSpace, totalPositiveFlexibility, style()->flexPack(), childSizes.size());
    613638
    614639        if (isColumnFlow())
    615640            setLogicalHeight(startEdge);
    616641    }
     642
     643    if (style()->flexFlow() == FlowColumnReverse) {
     644        // We have to do an extra pass for column-reverse to reposition the flex items since the start depends
     645        // on the height of the flexbox, which we only know after we've positioned all the flex items.
     646        computeLogicalHeight();
     647        layoutColumnReverse(iterator, childSizes, availableFreeSpace, totalPositiveFlexibility);
     648    }
     649
    617650    alignChildren(iterator, maxAscent);
     651}
     652
     653void RenderFlexibleBox::layoutColumnReverse(FlexOrderIterator& iterator, const WTF::Vector<LayoutUnit>& childSizes, LayoutUnit availableFreeSpace, float totalPositiveFlexibility)
     654{
     655    // This is similar to the logic in layoutAndPlaceChildren, except we place the children
     656    // starting from the end of the flexbox. We also don't need to layout anything since we're
     657    // just moving the children to a new position.
     658    LayoutUnit mainAxisOffset = logicalHeight() - flowAwareBorderEnd() - flowAwarePaddingEnd();
     659    mainAxisOffset -= initialPackingOffset(availableFreeSpace, totalPositiveFlexibility, style()->flexPack());
     660
     661    LayoutUnit crossAxisOffset = flowAwareBorderBefore() + flowAwarePaddingBefore();
     662    size_t i = 0;
     663    for (RenderBox* child = iterator.first(); child; child = iterator.next(), ++i) {
     664        mainAxisOffset -= mainAxisExtentForChild(child) + flowAwareMarginEndForChild(child);
     665
     666        LayoutRect oldRect = child->frameRect();
     667        setFlowAwareLocationForChild(child, IntPoint(mainAxisOffset, crossAxisOffset + flowAwareMarginBeforeForChild(child)));
     668        if (!selfNeedsLayout() && child->checkForRepaintDuringLayout())
     669            child->repaintDuringLayoutIfMoved(oldRect);
     670
     671        mainAxisOffset -= flowAwareMarginStartForChild(child);
     672        mainAxisOffset -= packingSpaceBetweenChildren(availableFreeSpace, totalPositiveFlexibility, style()->flexPack(), childSizes.size());
     673    }
    618674}
    619675

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

    r101703 r101897  
    6969    LayoutUnit flowAwareBorderStart() const;
    7070    LayoutUnit flowAwareBorderBefore() const;
     71    LayoutUnit flowAwareBorderEnd() const;
    7172    LayoutUnit crossAxisBorderAndPaddingExtent() const;
    7273    LayoutUnit flowAwarePaddingStart() const;
    7374    LayoutUnit flowAwarePaddingBefore() const;
     75    LayoutUnit flowAwarePaddingEnd() const;
    7476    LayoutUnit flowAwareMarginStartForChild(RenderBox* child) const;
    7577    LayoutUnit flowAwareMarginEndForChild(RenderBox* child) const;
    … …  
    9799    void setLogicalOverrideSize(RenderBox* child, LayoutUnit childPreferredSize);
    98100    void layoutAndPlaceChildren(FlexOrderIterator&, const WTF::Vector<LayoutUnit>& childSizes, LayoutUnit availableFreeSpace, float totalPositiveFlexibility);
     101    void layoutColumnReverse(FlexOrderIterator&, const WTF::Vector<LayoutUnit>& childSizes, LayoutUnit availableFreeSpace, float totalPositiveFlexibility);
    99102    void alignChildren(FlexOrderIterator&, LayoutUnit maxAscent);
    100103};
Note: See TracChangeset for help on using the changeset viewer.