Changeset 129154 in webkit


Ignore:
Timestamp:
Sep 20, 2012 12:29:51 PM (12 years ago)
Author:
tony@chromium.org
Message:

Implement absolutely positioned flex items
https://bugs.webkit.org/show_bug.cgi?id=93798

Reviewed by Ojan Vafai.

Source/WebCore:

Previously, we treated absolutely positioned flex items as a 0x0 placeholder element.
Now we position the 0x0 placeholder where the next item would go. This causes the
following changes:

  • justify-content: space-{around,between} no longer change due to the existence of absolutely positioned flex items.
  • alignment doesn't change the placement of absolutely positioned flex items.
  • auto margins in the alignment direction don't do anything on absolutely positioned flex items.

Test: css3/flexbox/position-absolute-children.html

  • rendering/RenderFlexibleBox.cpp:

(WebCore::RenderFlexibleBox::availableAlignmentSpaceForChild): Absolutely positioned flex items should not use this.
(WebCore::RenderFlexibleBox::updateAutoMarginsInCrossAxis): Absolutely positioned flex items should not use this.
(WebCore::initialJustifyContentOffset): If there are no flex items, space-around should center an absolutely positioned flex item.
(WebCore::RenderFlexibleBox::numberOfInFlowPositionedChildren): Helper method for helping to compute space-between and space-around.
(WebCore::RenderFlexibleBox::layoutAndPlaceChildren): Fix spacing when space-between or space-around.
(WebCore::RenderFlexibleBox::layoutColumnReverse): Fix spacing when space-between or space-around.
(WebCore::RenderFlexibleBox::alignChildren): Treat absolutely positioned children like flex-start.

  • rendering/RenderFlexibleBox.h: numberOfInFlowPositionedChildren method.

LayoutTests:

Fix position of absolute flex items and add some additional tests.

  • css3/flexbox/align-absolute-child-expected.txt:
  • css3/flexbox/align-absolute-child.html: New test cases and update expectations.
  • css3/flexbox/position-absolute-child.html: Update expectations.
  • css3/flexbox/position-absolute-children-expected.txt: Added.
  • css3/flexbox/position-absolute-children.html: Added. Tests having only absolutely positioned children.
Location:
trunk
Files:
2 added
7 edited

Legend:

Unmodified
Added
Removed
  • trunk/LayoutTests/ChangeLog

    r129153 r129154  
     12012-09-20  Tony Chang  <tony@chromium.org>
     2
     3        Implement absolutely positioned flex items
     4        https://bugs.webkit.org/show_bug.cgi?id=93798
     5
     6        Reviewed by Ojan Vafai.
     7
     8        Fix position of absolute flex items and add some additional tests.
     9
     10        * css3/flexbox/align-absolute-child-expected.txt:
     11        * css3/flexbox/align-absolute-child.html: New test cases and update expectations.
     12        * css3/flexbox/position-absolute-child.html: Update expectations.
     13        * css3/flexbox/position-absolute-children-expected.txt: Added.
     14        * css3/flexbox/position-absolute-children.html: Added. Tests having only absolutely positioned children.
     15
    1162012-09-20  Ojan Vafai  <ojan@chromium.org>
    217
  • trunk/LayoutTests/css3/flexbox/align-absolute-child-expected.txt

    r118818 r129154  
    1212PASS
    1313PASS
     14PASS
     15PASS
  • trunk/LayoutTests/css3/flexbox/align-absolute-child.html

    r122623 r129154  
    6767}
    6868
     69.wrap {
     70    -webkit-flex-wrap: wrap;
     71}
     72
    6973.wrap-reverse {
    7074    -webkit-flex-wrap: wrap-reverse;
     
    105109<div class='flexbox relative align-center'>
    106110    <div data-offset-x=0 data-offset-y=40></div>
    107     <div class='absolute' data-offset-x=20 data-offset-y=50></div>
     111    <div class='absolute' data-offset-x=20 data-offset-y=0></div>
    108112    <div data-offset-x=20 data-offset-y=40></div>
    109113    <div class="absolute" style="top: 5px; left: 5px" data-offset-x=5 data-offset-y=5></div>
     
    113117<div class='flexbox align-center'>
    114118    <div data-offset-x=10 data-offset-y=40></div>
    115     <div class='absolute' data-offset-x=30 data-offset-y=50></div>
     119    <div class='absolute' data-offset-x=30 data-offset-y=0></div>
    116120    <div data-offset-x=30 data-offset-y=40></div>
    117121    <div class="absolute" style="top: 5px; left: 5px" data-offset-x=5 data-offset-y=5></div>
     
    140144<div class='flexbox relative'>
    141145    <div style="margin: auto;" data-offset-x=40 data-offset-y=40></div>
    142     <div class="absolute" style="margin: auto;" data-offset-x=100 data-offset-y=50></div>
    143     <div class="absolute" style="margin: auto;" data-offset-x=100 data-offset-y=50></div>
     146    <div class="absolute" style="margin: auto;" data-offset-x=100 data-offset-y=0></div>
     147    <div class="absolute" style="margin: auto;" data-offset-x=100 data-offset-y=0></div>
    144148    <div class="absolute" style="margin: auto; top: 5px; left: 5px" data-offset-x=5 data-offset-y=5></div>
    145149</div>
     
    149153    <div class="absolute" style="height: auto" data-offset-x=20 data-offset-y=0 data-expected-height=0></div>
    150154    <div class="absolute" style="height: auto; top: 5px; left: 5px" data-offset-x=5 data-offset-y=5 data-expected-height=0></div>
     155</div>
     156
     157<div class="flexbox wrap relative">
     158  <div style="width: 100px;" data-offset-x=0 data-offset-y=0></div>
     159  <div class="absolute" data-offset-x=100 data-offset-y=0></div>
     160  <div style="width: 50px;" data-offset-x=0 data-offset-y=50></div>
     161  <div class="absolute" data-offset-x=50 data-offset-y=50></div>
     162  <div style="width: 50px;" data-offset-x=50 data-offset-y=50></div>
     163  <div class="absolute" data-offset-x=100 data-offset-y=50></div>
     164</div>
     165
     166<div class="flexbox wrap relative" style="-webkit-align-items: flex-end">
     167  <div style="width: 100px;" data-offset-x=0 data-offset-y=30></div>
     168  <div class="absolute" data-offset-x=100 data-offset-y=0></div>
     169  <div style="width: 50px;" data-offset-x=0 data-offset-y=80></div>
     170  <div class="absolute" data-offset-x=50 data-offset-y=50></div>
     171  <div style="width: 50px;" data-offset-x=50 data-offset-y=80></div>
     172  <div class="absolute" data-offset-x=100 data-offset-y=50></div>
    151173</div>
    152174
  • trunk/LayoutTests/css3/flexbox/position-absolute-child.html

    r122623 r129154  
    9090                { offsets: [0, 150, 150], sizes: [150, 0, 450] },
    9191                { offsets: [0, 200, 600], sizes: [200, 400, 0] },
    92                 { offsets: [0, 260, 560] },
    93                 { offsets: [0, 300, 560] },
    94                 { offsets: [0, 300, 600] },
    95                 { offsets: [10, 10, 50], crossAxisOffset: 50 },
    96                 { offsets: [10, 50, 50], crossAxisOffset: 50 },
    97                 { offsets: [10, 50, 90], crossAxisOffset: 50 },
    98             ],
    99             rtl: [
    100                 { offsets: [600, 360, 0], sizes: [0, 240, 360] },
    101                 { offsets: [450, 450, 0], sizes: [150, 0, 450] },
    102                 { offsets: [400, 0, 0], sizes: [200, 400, 0] },
    103                 { offsets: [580, 300, 0] },
    104                 { offsets: [560, 280, 0] },
    105                 { offsets: [560, 260, -20] },
    106                 { offsets: [50, 50, 10], crossAxisOffset: 50 },
    107                 { offsets: [50, 10, 10], crossAxisOffset: 50 },
    108                 { offsets: [50, 10, -30], crossAxisOffset: 50 },
     92                { offsets: [0, 0, 560] },
     93                { offsets: [0, 560, 560] },
     94                { offsets: [0, 560, 600] },
     95                { offsets: [10, 10, 50], crossAxisOffset: 0 },
     96                { offsets: [10, 50, 50], crossAxisOffset: 0 },
     97                { offsets: [10, 50, 90], crossAxisOffset: 0 },
     98            ],
     99            rtl: [
     100                { offsets: [600, 360, 0], sizes: [0, 240, 360] },
     101                { offsets: [450, 450, 0], sizes: [150, 0, 450] },
     102                { offsets: [400, 0, 0], sizes: [200, 400, 0] },
     103                { offsets: [580, 560, 0] },
     104                { offsets: [560, 20, 0] },
     105                { offsets: [560, 0, -20] },
     106                { offsets: [50, 50, 10], crossAxisOffset: 0 },
     107                { offsets: [50, 10, 10], crossAxisOffset: 0 },
     108                { offsets: [50, 10, -30], crossAxisOffset: 0 },
    109109            ],
    110110        },
     
    114114                { offsets: [0, 30, 30], sizes: [30, 0, 90] },
    115115                { offsets: [0, 40, 120], sizes: [40, 80, 0] },
    116                 { offsets: [0, 20, 80] },
    117                 { offsets: [0, 60, 80] },
    118                 { offsets: [0, 60, 120] },
    119                 { offsets: [10, 10, 50], crossAxisOffset: 50 },
    120                 { offsets: [10, 50, 50], crossAxisOffset: 50 },
    121                 { offsets: [10, 50, 90], crossAxisOffset: 50 },
    122             ],
    123             rtl: [
    124                 { offsets: [0, 0, 48], sizes: [0, 48, 72] },
    125                 { offsets: [0, 30, 30], sizes: [30, 0, 90] },
    126                 { offsets: [0, 40, 120], sizes: [40, 80, 0] },
    127                 { offsets: [0, 20, 80] },
    128                 { offsets: [0, 60, 80] },
    129                 { offsets: [0, 60, 120] },
    130                 { offsets: [10, 10, 50], crossAxisOffset: 10 },
    131                 { offsets: [10, 50, 50], crossAxisOffset: 10 },
    132                 { offsets: [10, 50, 90], crossAxisOffset: 10 },
     116                { offsets: [0, 0, 80] },
     117                { offsets: [0, 80, 80] },
     118                { offsets: [0, 80, 120] },
     119                { offsets: [10, 10, 50], crossAxisOffset: 0 },
     120                { offsets: [10, 50, 50], crossAxisOffset: 0 },
     121                { offsets: [10, 50, 90], crossAxisOffset: 0 },
     122            ],
     123            rtl: [
     124                { offsets: [0, 0, 48], sizes: [0, 48, 72] },
     125                { offsets: [0, 30, 30], sizes: [30, 0, 90] },
     126                { offsets: [0, 40, 120], sizes: [40, 80, 0] },
     127                { offsets: [0, 0, 80] },
     128                { offsets: [0, 80, 80] },
     129                { offsets: [0, 80, 120] },
     130                { offsets: [10, 10, 50], crossAxisOffset: 60 },
     131                { offsets: [10, 50, 50], crossAxisOffset: 60 },
     132                { offsets: [10, 50, 90], crossAxisOffset: 60 },
    133133            ],
    134134        },
     
    138138                { offsets: [450, 450, 0], sizes: [150, 0, 450] },
    139139                { offsets: [400, 0, 0], sizes: [200, 400, 0] },
    140                 { offsets: [600, 300, 0] },
    141                 { offsets: [560, 300, 0] },
    142                 { offsets: [560, 260, 0] },
    143                 { offsets: [90, 50, 10], crossAxisOffset: 50 },
    144                 { offsets: [50, 50, 10], crossAxisOffset: 50 },
    145                 { offsets: [50, 10, 10], crossAxisOffset: 50 },
    146             ],
    147             rtl: [
    148                 { offsets: [0, 0, 240], sizes: [0, 240, 360] },
    149                 { offsets: [0, 150, 150], sizes: [150, 0, 450] },
    150                 { offsets: [0, 200, 600], sizes: [200, 400, 0] },
    151                 { offsets: [-20, 260, 560] },
    152                 { offsets: [0, 280, 560] },
    153                 { offsets: [0, 300, 580] },
    154                 { offsets: [-30, 10, 50], crossAxisOffset: 50 },
    155                 { offsets: [10, 10, 50], crossAxisOffset: 50 },
    156                 { offsets: [10, 50, 50], crossAxisOffset: 50 },
     140                { offsets: [600, 560, 0] },
     141                { offsets: [560, 40, 0] },
     142                { offsets: [560, 0, 0] },
     143                { offsets: [90, 50, 10], crossAxisOffset: 0 },
     144                { offsets: [50, 50, 10], crossAxisOffset: 0 },
     145                { offsets: [50, 10, 10], crossAxisOffset: 0 },
     146            ],
     147            rtl: [
     148                { offsets: [0, 0, 240], sizes: [0, 240, 360] },
     149                { offsets: [0, 150, 150], sizes: [150, 0, 450] },
     150                { offsets: [0, 200, 600], sizes: [200, 400, 0] },
     151                { offsets: [-20, 0, 560] },
     152                { offsets: [0, 540, 560] },
     153                { offsets: [0, 560, 580] },
     154                { offsets: [-30, 10, 50], crossAxisOffset: 0 },
     155                { offsets: [10, 10, 50], crossAxisOffset: 0 },
     156                { offsets: [10, 50, 50], crossAxisOffset: 0 },
    157157            ],
    158158        },
     
    162162                { offsets: [90, 90, 0], sizes: [30, 0, 90] },
    163163                { offsets: [80, 0, 0], sizes: [40, 80, 0] },
    164                 { offsets: [120, 60, 0] },
    165                 { offsets: [80, 60, 0] },
    166                 { offsets: [80, 20, 0] },
    167                 { offsets: [90, 50, 10], crossAxisOffset: 50 },
    168                 { offsets: [50, 50, 10], crossAxisOffset: 50 },
    169                 { offsets: [50, 10, 10], crossAxisOffset: 50 },
    170             ],
    171             rtl: [
    172                 { offsets: [120, 72, 0], sizes: [0, 48, 72] },
    173                 { offsets: [90, 90, 0], sizes: [30, 0, 90] },
    174                 { offsets: [80, 0, 0], sizes: [40, 80, 0] },
    175                 { offsets: [120, 60, 0] },
    176                 { offsets: [80, 60, 0] },
    177                 { offsets: [80, 20, 0] },
    178                 { offsets: [90, 50, 10], crossAxisOffset: 10 },
    179                 { offsets: [50, 50, 10], crossAxisOffset: 10 },
    180                 { offsets: [50, 10, 10], crossAxisOffset: 10 },
     164                { offsets: [120, 80, 0] },
     165                { offsets: [80, 40, 0] },
     166                { offsets: [80, 0, 0] },
     167                { offsets: [90, 50, 10], crossAxisOffset: 0 },
     168                { offsets: [50, 50, 10], crossAxisOffset: 0 },
     169                { offsets: [50, 10, 10], crossAxisOffset: 0 },
     170            ],
     171            rtl: [
     172                { offsets: [120, 72, 0], sizes: [0, 48, 72] },
     173                { offsets: [90, 90, 0], sizes: [30, 0, 90] },
     174                { offsets: [80, 0, 0], sizes: [40, 80, 0] },
     175                { offsets: [120, 80, 0] },
     176                { offsets: [80, 40, 0] },
     177                { offsets: [80, 0, 0] },
     178                { offsets: [90, 50, 10], crossAxisOffset: 60 },
     179                { offsets: [50, 50, 10], crossAxisOffset: 60 },
     180                { offsets: [50, 10, 10], crossAxisOffset: 60 },
    181181            ],
    182182        },
     
    189189                { offsets: [0, 150, 150], sizes: [150, 0, 450] },
    190190                { offsets: [0, 200, 600], sizes: [200, 400, 0] },
    191                 { offsets: [0, 260, 560] },
    192                 { offsets: [0, 300, 560] },
    193                 { offsets: [0, 300, 600] },
    194                 { offsets: [10, 10, 50], crossAxisOffset: 10 },
    195                 { offsets: [10, 50, 50], crossAxisOffset: 10 },
    196                 { offsets: [10, 50, 90], crossAxisOffset: 10 },
    197             ],
    198             rtl: [
    199                 { offsets: [600, 360, 0], sizes: [0, 240, 360] },
    200                 { offsets: [450, 450, 0], sizes: [150, 0, 450] },
    201                 { offsets: [400, 0, 0], sizes: [200, 400, 0] },
    202                 { offsets: [580, 300, 0] },
    203                 { offsets: [560, 280, 0] },
    204                 { offsets: [560, 260, -20] },
    205                 { offsets: [50, 50, 10], crossAxisOffset: 10 },
    206                 { offsets: [50, 10, 10], crossAxisOffset: 10 },
    207                 { offsets: [50, 10, -30], crossAxisOffset: 10 },
     191                { offsets: [0, 0, 560] },
     192                { offsets: [0, 560, 560] },
     193                { offsets: [0, 560, 600] },
     194                { offsets: [10, 10, 50], crossAxisOffset: 60 },
     195                { offsets: [10, 50, 50], crossAxisOffset: 60 },
     196                { offsets: [10, 50, 90], crossAxisOffset: 60 },
     197            ],
     198            rtl: [
     199                { offsets: [600, 360, 0], sizes: [0, 240, 360] },
     200                { offsets: [450, 450, 0], sizes: [150, 0, 450] },
     201                { offsets: [400, 0, 0], sizes: [200, 400, 0] },
     202                { offsets: [580, 560, 0] },
     203                { offsets: [560, 20, 0] },
     204                { offsets: [560, 0, -20] },
     205                { offsets: [50, 50, 10], crossAxisOffset: 60 },
     206                { offsets: [50, 10, 10], crossAxisOffset: 60 },
     207                { offsets: [50, 10, -30], crossAxisOffset: 60 },
    208208            ],
    209209        },
     
    214214                { offsets: [90, 90, 0], sizes: [30, 0, 90] },
    215215                { offsets: [80, 0, 0], sizes: [40, 80, 0] },
    216                 { offsets: [100, 60, 0] },
    217                 { offsets: [80, 40, 0] },
    218                 { offsets: [80, 20, -20] },
    219                 { offsets: [50, 50, 10], crossAxisOffset: 50 },
    220                 { offsets: [50, 10, 10], crossAxisOffset: 50 },
    221                 { offsets: [50, 10, -30], crossAxisOffset: 50 },
    222             ],
    223             rtl: [
    224                 { offsets: [120, 72, 0], sizes: [0, 48, 72] },
    225                 { offsets: [90, 90, 0], sizes: [30, 0, 90] },
    226                 { offsets: [80, 0, 0], sizes: [40, 80, 0] },
    227                 { offsets: [100, 60, 0] },
    228                 { offsets: [80, 40, 0] },
    229                 { offsets: [80, 20, -20] },
    230                 { offsets: [50, 50, 10], crossAxisOffset: 10 },
    231                 { offsets: [50, 10, 10], crossAxisOffset: 10 },
    232                 { offsets: [50, 10, -30], crossAxisOffset: 10 },
     216                { offsets: [100, 80, 0] },
     217                { offsets: [80, 20, 0] },
     218                { offsets: [80, 0, -20] },
     219                { offsets: [50, 50, 10], crossAxisOffset: 0 },
     220                { offsets: [50, 10, 10], crossAxisOffset: 0 },
     221                { offsets: [50, 10, -30], crossAxisOffset: 0 },
     222            ],
     223            rtl: [
     224                { offsets: [120, 72, 0], sizes: [0, 48, 72] },
     225                { offsets: [90, 90, 0], sizes: [30, 0, 90] },
     226                { offsets: [80, 0, 0], sizes: [40, 80, 0] },
     227                { offsets: [100, 80, 0] },
     228                { offsets: [80, 20, 0] },
     229                { offsets: [80, 0, -20] },
     230                { offsets: [50, 50, 10], crossAxisOffset: 60 },
     231                { offsets: [50, 10, 10], crossAxisOffset: 60 },
     232                { offsets: [50, 10, -30], crossAxisOffset: 60 },
    233233            ],
    234234        },
     
    238238                { offsets: [450, 450, 0], sizes: [150, 0, 450] },
    239239                { offsets: [400, 0, 0], sizes: [200, 400, 0] },
    240                 { offsets: [600, 300, 0] },
    241                 { offsets: [560, 300, 0] },
    242                 { offsets: [560, 260, 0] },
    243                 { offsets: [90, 50, 10], crossAxisOffset: 10 },
    244                 { offsets: [50, 50, 10], crossAxisOffset: 10 },
    245                 { offsets: [50, 10, 10], crossAxisOffset: 10 },
    246             ],
    247             rtl: [
    248                 { offsets: [0, 0, 240], sizes: [0, 240, 360] },
    249                 { offsets: [0, 150, 150], sizes: [150, 0, 450] },
    250                 { offsets: [0, 200, 600], sizes: [200, 400, 0] },
    251                 { offsets: [-20, 260, 560] },
    252                 { offsets: [0, 280, 560] },
    253                 { offsets: [0, 300, 580] },
    254                 { offsets: [-30, 10, 50], crossAxisOffset: 10 },
    255                 { offsets: [10, 10, 50], crossAxisOffset: 10 },
    256                 { offsets: [10, 50, 50], crossAxisOffset: 10 },
     240                { offsets: [600, 560, 0] },
     241                { offsets: [560, 40, 0] },
     242                { offsets: [560, 0, 0] },
     243                { offsets: [90, 50, 10], crossAxisOffset: 60 },
     244                { offsets: [50, 50, 10], crossAxisOffset: 60 },
     245                { offsets: [50, 10, 10], crossAxisOffset: 60 },
     246            ],
     247            rtl: [
     248                { offsets: [0, 0, 240], sizes: [0, 240, 360] },
     249                { offsets: [0, 150, 150], sizes: [150, 0, 450] },
     250                { offsets: [0, 200, 600], sizes: [200, 400, 0] },
     251                { offsets: [-20, 0, 560] },
     252                { offsets: [0, 540, 560] },
     253                { offsets: [0, 560, 580] },
     254                { offsets: [-30, 10, 50], crossAxisOffset: 60 },
     255                { offsets: [10, 10, 50], crossAxisOffset: 60 },
     256                { offsets: [10, 50, 50], crossAxisOffset: 60 },
    257257            ],
    258258        },
     
    262262                { offsets: [0, 30, 30], sizes: [30, 0, 90] },
    263263                { offsets: [0, 40, 120], sizes: [40, 80, 0] },
    264                 { offsets: [-20, 20, 80] },
    265                 { offsets: [0, 40, 80] },
    266                 { offsets: [0, 60, 100] },
    267                 { offsets: [-30, 10, 50], crossAxisOffset: 50 },
    268                 { offsets: [10, 10, 50], crossAxisOffset: 50 },
    269                 { offsets: [10, 50, 50], crossAxisOffset: 50 },
    270             ],
    271             rtl: [
    272                 { offsets: [0, 0, 48], sizes: [0, 48, 72] },
    273                 { offsets: [0, 30, 30], sizes: [30, 0, 90] },
    274                 { offsets: [0, 40, 120], sizes: [40, 80, 0] },
    275                 { offsets: [-20, 20, 80] },
    276                 { offsets: [0, 40, 80] },
    277                 { offsets: [0, 60, 100] },
    278                 { offsets: [-30, 10, 50], crossAxisOffset: 10 },
    279                 { offsets: [10, 10, 50], crossAxisOffset: 10 },
    280                 { offsets: [10, 50, 50], crossAxisOffset: 10 },
     264                { offsets: [-20, 0, 80] },
     265                { offsets: [0, 60, 80] },
     266                { offsets: [0, 80, 100] },
     267                { offsets: [-30, 10, 50], crossAxisOffset: 0 },
     268                { offsets: [10, 10, 50], crossAxisOffset: 0 },
     269                { offsets: [10, 50, 50], crossAxisOffset: 0 },
     270            ],
     271            rtl: [
     272                { offsets: [0, 0, 48], sizes: [0, 48, 72] },
     273                { offsets: [0, 30, 30], sizes: [30, 0, 90] },
     274                { offsets: [0, 40, 120], sizes: [40, 80, 0] },
     275                { offsets: [-20, 0, 80] },
     276                { offsets: [0, 60, 80] },
     277                { offsets: [0, 80, 100] },
     278                { offsets: [-30, 10, 50], crossAxisOffset: 60 },
     279                { offsets: [10, 10, 50], crossAxisOffset: 60 },
     280                { offsets: [10, 50, 50], crossAxisOffset: 60 },
    281281            ],
    282282        },
     
    289289                { offsets: [0, 30, 30], sizes: [30, 0, 90] },
    290290                { offsets: [0, 40, 120], sizes: [40, 80, 0] },
    291                 { offsets: [0, 20, 80] },
    292                 { offsets: [0, 60, 80] },
    293                 { offsets: [0, 60, 120] },
    294                 { offsets: [10, 10, 50], crossAxisOffset: 10 },
    295                 { offsets: [10, 50, 50], crossAxisOffset: 10 },
    296                 { offsets: [10, 50, 90], crossAxisOffset: 10 },
    297             ],
    298             rtl: [
    299                 { offsets: [120, 72, 0], sizes: [0, 48, 72] },
    300                 { offsets: [90, 90, 0], sizes: [30, 0, 90] },
    301                 { offsets: [80, 0, 0], sizes: [40, 80, 0] },
    302                 { offsets: [100, 60, 0] },
    303                 { offsets: [80, 40, 0] },
    304                 { offsets: [80, 20, -20] },
    305                 { offsets: [50, 50, 10], crossAxisOffset: 10 },
    306                 { offsets: [50, 10, 10], crossAxisOffset: 10 },
    307                 { offsets: [50, 10, -30], crossAxisOffset: 10 },
     291                { offsets: [0, 0, 80] },
     292                { offsets: [0, 80, 80] },
     293                { offsets: [0, 80, 120] },
     294                { offsets: [10, 10, 50], crossAxisOffset: 60 },
     295                { offsets: [10, 50, 50], crossAxisOffset: 60 },
     296                { offsets: [10, 50, 90], crossAxisOffset: 60 },
     297            ],
     298            rtl: [
     299                { offsets: [120, 72, 0], sizes: [0, 48, 72] },
     300                { offsets: [90, 90, 0], sizes: [30, 0, 90] },
     301                { offsets: [80, 0, 0], sizes: [40, 80, 0] },
     302                { offsets: [100, 80, 0] },
     303                { offsets: [80, 20, 0] },
     304                { offsets: [80, 0, -20] },
     305                { offsets: [50, 50, 10], crossAxisOffset: 60 },
     306                { offsets: [50, 10, 10], crossAxisOffset: 60 },
     307                { offsets: [50, 10, -30], crossAxisOffset: 60 },
    308308            ],
    309309        },
     
    314314                { offsets: [450, 450, 0], sizes: [150, 0, 450] },
    315315                { offsets: [400, 0, 0], sizes: [200, 400, 0] },
    316                 { offsets: [580, 300, 0] },
    317                 { offsets: [560, 280, 0] },
    318                 { offsets: [560, 260, -20] },
    319                 { offsets: [50, 50, 10], crossAxisOffset: 50 },
    320                 { offsets: [50, 10, 10], crossAxisOffset: 50 },
    321                 { offsets: [50, 10, -30], crossAxisOffset: 50 },
    322             ],
    323             rtl: [
    324                 { offsets: [600, 360, 0], sizes: [0, 240, 360] },
    325                 { offsets: [450, 450, 0], sizes: [150, 0, 450] },
    326                 { offsets: [400, 0, 0], sizes: [200, 400, 0] },
    327                 { offsets: [580, 300, 0] },
    328                 { offsets: [560, 280, 0] },
    329                 { offsets: [560, 260, -20] },
    330                 { offsets: [50, 50, 10], crossAxisOffset: 10 },
    331                 { offsets: [50, 10, 10], crossAxisOffset: 10 },
    332                 { offsets: [50, 10, -30], crossAxisOffset: 10 },
     316                { offsets: [580, 560, 0] },
     317                { offsets: [560, 20, 0] },
     318                { offsets: [560, 0, -20] },
     319                { offsets: [50, 50, 10], crossAxisOffset: 0 },
     320                { offsets: [50, 10, 10], crossAxisOffset: 0 },
     321                { offsets: [50, 10, -30], crossAxisOffset: 0 },
     322            ],
     323            rtl: [
     324                { offsets: [600, 360, 0], sizes: [0, 240, 360] },
     325                { offsets: [450, 450, 0], sizes: [150, 0, 450] },
     326                { offsets: [400, 0, 0], sizes: [200, 400, 0] },
     327                { offsets: [580, 560, 0] },
     328                { offsets: [560, 20, 0] },
     329                { offsets: [560, 0, -20] },
     330                { offsets: [50, 50, 10], crossAxisOffset: 60 },
     331                { offsets: [50, 10, 10], crossAxisOffset: 60 },
     332                { offsets: [50, 10, -30], crossAxisOffset: 60 },
    333333            ],
    334334        },
     
    338338                { offsets: [90, 90, 0], sizes: [30, 0, 90] },
    339339                { offsets: [80, 0, 0], sizes: [40, 80, 0] },
    340                 { offsets: [120, 60, 0] },
    341                 { offsets: [80, 60, 0] },
    342                 { offsets: [80, 20, 0] },
    343                 { offsets: [90, 50, 10], crossAxisOffset: 10 },
    344                 { offsets: [50, 50, 10], crossAxisOffset: 10 },
    345                 { offsets: [50, 10, 10], crossAxisOffset: 10 },
    346             ],
    347             rtl: [
    348                 { offsets: [0, 0, 48], sizes: [0, 48, 72] },
    349                 { offsets: [0, 30, 30], sizes: [30, 0, 90] },
    350                 { offsets: [0, 40, 120], sizes: [40, 80, 0] },
    351                 { offsets: [-20, 20, 80] },
    352                 { offsets: [0, 40, 80] },
    353                 { offsets: [0, 60, 100] },
    354                 { offsets: [-30, 10, 50], crossAxisOffset: 10 },
    355                 { offsets: [10, 10, 50], crossAxisOffset: 10 },
    356                 { offsets: [10, 50, 50], crossAxisOffset: 10 },
     340                { offsets: [120, 80, 0] },
     341                { offsets: [80, 40, 0] },
     342                { offsets: [80, 0, 0] },
     343                { offsets: [90, 50, 10], crossAxisOffset: 60 },
     344                { offsets: [50, 50, 10], crossAxisOffset: 60 },
     345                { offsets: [50, 10, 10], crossAxisOffset: 60 },
     346            ],
     347            rtl: [
     348                { offsets: [0, 0, 48], sizes: [0, 48, 72] },
     349                { offsets: [0, 30, 30], sizes: [30, 0, 90] },
     350                { offsets: [0, 40, 120], sizes: [40, 80, 0] },
     351                { offsets: [-20, 0, 80] },
     352                { offsets: [0, 60, 80] },
     353                { offsets: [0, 80, 100] },
     354                { offsets: [-30, 10, 50], crossAxisOffset: 60 },
     355                { offsets: [10, 10, 50], crossAxisOffset: 60 },
     356                { offsets: [10, 50, 50], crossAxisOffset: 60 },
    357357            ],
    358358        },
     
    362362                { offsets: [0, 150, 150], sizes: [150, 0, 450] },
    363363                { offsets: [0, 200, 600], sizes: [200, 400, 0] },
    364                 { offsets: [-20, 260, 560] },
    365                 { offsets: [0, 280, 560] },
    366                 { offsets: [0, 300, 580] },
    367                 { offsets: [-30, 10, 50], crossAxisOffset: 50 },
    368                 { offsets: [10, 10, 50], crossAxisOffset: 50 },
    369                 { offsets: [10, 50, 50], crossAxisOffset: 50 },
    370             ],
    371             rtl: [
    372                 { offsets: [0, 0, 240], sizes: [0, 240, 360] },
    373                 { offsets: [0, 150, 150], sizes: [150, 0, 450] },
    374                 { offsets: [0, 200, 600], sizes: [200, 400, 0] },
    375                 { offsets: [-20, 260, 560] },
    376                 { offsets: [0, 280, 560] },
    377                 { offsets: [0, 300, 580] },
    378                 { offsets: [-30, 10, 50], crossAxisOffset: 10 },
    379                 { offsets: [10, 10, 50], crossAxisOffset: 10 },
    380                 { offsets: [10, 50, 50], crossAxisOffset: 10 },
     364                { offsets: [-20, 0, 560] },
     365                { offsets: [0, 540, 560] },
     366                { offsets: [0, 560, 580] },
     367                { offsets: [-30, 10, 50], crossAxisOffset: 0 },
     368                { offsets: [10, 10, 50], crossAxisOffset: 0 },
     369                { offsets: [10, 50, 50], crossAxisOffset: 0 },
     370            ],
     371            rtl: [
     372                { offsets: [0, 0, 240], sizes: [0, 240, 360] },
     373                { offsets: [0, 150, 150], sizes: [150, 0, 450] },
     374                { offsets: [0, 200, 600], sizes: [200, 400, 0] },
     375                { offsets: [-20, 0, 560] },
     376                { offsets: [0, 540, 560] },
     377                { offsets: [0, 560, 580] },
     378                { offsets: [-30, 10, 50], crossAxisOffset: 60 },
     379                { offsets: [10, 10, 50], crossAxisOffset: 60 },
     380                { offsets: [10, 50, 50], crossAxisOffset: 60 },
    381381            ],
    382382        }
     
    389389                { offsets: [0, 30, 30], sizes: [30, 0, 90] },
    390390                { offsets: [0, 40, 120], sizes: [40, 80, 0] },
    391                 { offsets: [0, 20, 80] },
    392                 { offsets: [0, 60, 80] },
    393                 { offsets: [0, 60, 120] },
    394                 { offsets: [10, 10, 50], crossAxisOffset: 50 },
    395                 { offsets: [10, 50, 50], crossAxisOffset: 50 },
    396                 { offsets: [10, 50, 90], crossAxisOffset: 50 },
    397             ],
    398             rtl: [
    399                 { offsets: [120, 72, 0], sizes: [0, 48, 72] },
    400                 { offsets: [90, 90, 0], sizes: [30, 0, 90] },
    401                 { offsets: [80, 0, 0], sizes: [40, 80, 0] },
    402                 { offsets: [100, 60, 0] },
    403                 { offsets: [80, 40, 0] },
    404                 { offsets: [80, 20, -20] },
    405                 { offsets: [50, 50, 10], crossAxisOffset: 50 },
    406                 { offsets: [50, 10, 10], crossAxisOffset: 50 },
    407                 { offsets: [50, 10, -30], crossAxisOffset: 50 },
     391                { offsets: [0, 0, 80] },
     392                { offsets: [0, 80, 80] },
     393                { offsets: [0, 80, 120] },
     394                { offsets: [10, 10, 50], crossAxisOffset: 0 },
     395                { offsets: [10, 50, 50], crossAxisOffset: 0 },
     396                { offsets: [10, 50, 90], crossAxisOffset: 0 },
     397            ],
     398            rtl: [
     399                { offsets: [120, 72, 0], sizes: [0, 48, 72] },
     400                { offsets: [90, 90, 0], sizes: [30, 0, 90] },
     401                { offsets: [80, 0, 0], sizes: [40, 80, 0] },
     402                { offsets: [100, 80, 0] },
     403                { offsets: [80, 20, 0] },
     404                { offsets: [80, 0, -20] },
     405                { offsets: [50, 50, 10], crossAxisOffset: 0 },
     406                { offsets: [50, 10, 10], crossAxisOffset: 0 },
     407                { offsets: [50, 10, -30], crossAxisOffset: 0 },
    408408            ],
    409409        },
     
    414414                { offsets: [0, 150, 150], sizes: [150, 0, 450] },
    415415                { offsets: [0, 200, 600], sizes: [200, 400, 0] },
    416                 { offsets: [0, 260, 560] },
    417                 { offsets: [0, 300, 560] },
    418                 { offsets: [0, 300, 600] },
    419                 { offsets: [10, 10, 50], crossAxisOffset: 50 },
    420                 { offsets: [10, 50, 50], crossAxisOffset: 50 },
    421                 { offsets: [10, 50, 90], crossAxisOffset: 50 },
    422             ],
    423             rtl: [
    424                 { offsets: [0, 0, 240], sizes: [0, 240, 360] },
    425                 { offsets: [0, 150, 150], sizes: [150, 0, 450] },
    426                 { offsets: [0, 200, 600], sizes: [200, 400, 0] },
    427                 { offsets: [0, 260, 560] },
    428                 { offsets: [0, 300, 560] },
    429                 { offsets: [0, 300, 600] },
    430                 { offsets: [10, 10, 50], crossAxisOffset: 10 },
    431                 { offsets: [10, 50, 50], crossAxisOffset: 10 },
    432                 { offsets: [10, 50, 90], crossAxisOffset: 10 },
     416                { offsets: [0, 0, 560] },
     417                { offsets: [0, 560, 560] },
     418                { offsets: [0, 560, 600] },
     419                { offsets: [10, 10, 50], crossAxisOffset: 0 },
     420                { offsets: [10, 50, 50], crossAxisOffset: 0 },
     421                { offsets: [10, 50, 90], crossAxisOffset: 0 },
     422            ],
     423            rtl: [
     424                { offsets: [0, 0, 240], sizes: [0, 240, 360] },
     425                { offsets: [0, 150, 150], sizes: [150, 0, 450] },
     426                { offsets: [0, 200, 600], sizes: [200, 400, 0] },
     427                { offsets: [0, 0, 560] },
     428                { offsets: [0, 560, 560] },
     429                { offsets: [0, 560, 600] },
     430                { offsets: [10, 10, 50], crossAxisOffset: 60 },
     431                { offsets: [10, 50, 50], crossAxisOffset: 60 },
     432                { offsets: [10, 50, 90], crossAxisOffset: 60 },
    433433            ],
    434434        },
     
    438438                { offsets: [90, 90, 0], sizes: [30, 0, 90] },
    439439                { offsets: [80, 0, 0], sizes: [40, 80, 0] },
    440                 { offsets: [120, 60, 0] },
    441                 { offsets: [80, 60, 0] },
    442                 { offsets: [80, 20, 0] },
    443                 { offsets: [90, 50, 10], crossAxisOffset: 50 },
    444                 { offsets: [50, 50, 10], crossAxisOffset: 50 },
    445                 { offsets: [50, 10, 10], crossAxisOffset: 50 },
    446             ],
    447             rtl: [
    448                 { offsets: [0, 0, 48], sizes: [0, 48, 72] },
    449                 { offsets: [0, 30, 30], sizes: [30, 0, 90] },
    450                 { offsets: [0, 40, 120], sizes: [40, 80, 0] },
    451                 { offsets: [-20, 20, 80] },
    452                 { offsets: [0, 40, 80] },
    453                 { offsets: [0, 60, 100] },
    454                 { offsets: [-30, 10, 50], crossAxisOffset: 50 },
    455                 { offsets: [10, 10, 50], crossAxisOffset: 50 },
    456                 { offsets: [10, 50, 50], crossAxisOffset: 50 },
     440                { offsets: [120, 80, 0] },
     441                { offsets: [80, 40, 0] },
     442                { offsets: [80, 0, 0] },
     443                { offsets: [90, 50, 10], crossAxisOffset: 0 },
     444                { offsets: [50, 50, 10], crossAxisOffset: 0 },
     445                { offsets: [50, 10, 10], crossAxisOffset: 0 },
     446            ],
     447            rtl: [
     448                { offsets: [0, 0, 48], sizes: [0, 48, 72] },
     449                { offsets: [0, 30, 30], sizes: [30, 0, 90] },
     450                { offsets: [0, 40, 120], sizes: [40, 80, 0] },
     451                { offsets: [-20, 0, 80] },
     452                { offsets: [0, 60, 80] },
     453                { offsets: [0, 80, 100] },
     454                { offsets: [-30, 10, 50], crossAxisOffset: 0 },
     455                { offsets: [10, 10, 50], crossAxisOffset: 0 },
     456                { offsets: [10, 50, 50], crossAxisOffset: 0 },
    457457            ],
    458458        },
     
    462462                { offsets: [450, 450, 0], sizes: [150, 0, 450] },
    463463                { offsets: [400, 0, 0], sizes: [200, 400, 0] },
    464                 { offsets: [600, 300, 0] },
    465                 { offsets: [560, 300, 0] },
    466                 { offsets: [560, 260, 0] },
    467                 { offsets: [90, 50, 10], crossAxisOffset: 50 },
    468                 { offsets: [50, 50, 10], crossAxisOffset: 50 },
    469                 { offsets: [50, 10, 10], crossAxisOffset: 50 },
    470             ],
    471             rtl: [
    472                 { offsets: [600, 360, 0], sizes: [0, 240, 360] },
    473                 { offsets: [450, 450, 0], sizes: [150, 0, 450] },
    474                 { offsets: [400, 0, 0], sizes: [200, 400, 0] },
    475                 { offsets: [600, 300, 0] },
    476                 { offsets: [560, 300, 0] },
    477                 { offsets: [560, 260, 0] },
    478                 { offsets: [90, 50, 10], crossAxisOffset: 10 },
    479                 { offsets: [50, 50, 10], crossAxisOffset: 10 },
    480                 { offsets: [50, 10, 10], crossAxisOffset: 10 },
     464                { offsets: [600, 560, 0] },
     465                { offsets: [560, 40, 0] },
     466                { offsets: [560, 0, 0] },
     467                { offsets: [90, 50, 10], crossAxisOffset: 0 },
     468                { offsets: [50, 50, 10], crossAxisOffset: 0 },
     469                { offsets: [50, 10, 10], crossAxisOffset: 0 },
     470            ],
     471            rtl: [
     472                { offsets: [600, 360, 0], sizes: [0, 240, 360] },
     473                { offsets: [450, 450, 0], sizes: [150, 0, 450] },
     474                { offsets: [400, 0, 0], sizes: [200, 400, 0] },
     475                { offsets: [600, 560, 0] },
     476                { offsets: [560, 40, 0] },
     477                { offsets: [560, 0, 0] },
     478                { offsets: [90, 50, 10], crossAxisOffset: 60 },
     479                { offsets: [50, 50, 10], crossAxisOffset: 60 },
     480                { offsets: [50, 10, 10], crossAxisOffset: 60 },
    481481            ],
    482482        },
  • trunk/Source/WebCore/ChangeLog

    r129152 r129154  
     12012-09-20  Tony Chang  <tony@chromium.org>
     2
     3        Implement absolutely positioned flex items
     4        https://bugs.webkit.org/show_bug.cgi?id=93798
     5
     6        Reviewed by Ojan Vafai.
     7
     8        Previously, we treated absolutely positioned flex items as a 0x0 placeholder element.
     9        Now we position the 0x0 placeholder where the next item would go. This causes the
     10        following changes:
     11        - justify-content: space-{around,between} no longer change due to the existence of absolutely positioned flex items.
     12        - alignment doesn't change the placement of absolutely positioned flex items.
     13        - auto margins in the alignment direction don't do anything on absolutely positioned flex items.
     14
     15        Test: css3/flexbox/position-absolute-children.html
     16
     17        * rendering/RenderFlexibleBox.cpp:
     18        (WebCore::RenderFlexibleBox::availableAlignmentSpaceForChild): Absolutely positioned flex items should not use this.
     19        (WebCore::RenderFlexibleBox::updateAutoMarginsInCrossAxis): Absolutely positioned flex items should not use this.
     20        (WebCore::initialJustifyContentOffset): If there are no flex items, space-around should center an absolutely positioned flex item.
     21        (WebCore::RenderFlexibleBox::numberOfInFlowPositionedChildren): Helper method for helping to compute space-between and space-around.
     22        (WebCore::RenderFlexibleBox::layoutAndPlaceChildren): Fix spacing when space-between or space-around.
     23        (WebCore::RenderFlexibleBox::layoutColumnReverse): Fix spacing when space-between or space-around.
     24        (WebCore::RenderFlexibleBox::alignChildren): Treat absolutely positioned children like flex-start.
     25        * rendering/RenderFlexibleBox.h: numberOfInFlowPositionedChildren method.
     26
    1272012-09-20  Sheriff Bot  <webkit.review.bot@gmail.com>
    228
  • trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp

    r128786 r129154  
    690690LayoutUnit RenderFlexibleBox::availableAlignmentSpaceForChild(LayoutUnit lineCrossAxisExtent, RenderBox* child)
    691691{
    692     LayoutUnit childCrossExtent = 0;
    693     if (!child->isOutOfFlowPositioned())
    694         childCrossExtent = crossAxisMarginExtentForChild(child) + crossAxisExtentForChild(child);
     692    ASSERT(!child->isOutOfFlowPositioned());
     693    LayoutUnit childCrossExtent = crossAxisMarginExtentForChild(child) + crossAxisExtentForChild(child);
    695694    return lineCrossAxisExtent - childCrossExtent;
    696695}
     
    698697bool RenderFlexibleBox::updateAutoMarginsInCrossAxis(RenderBox* child, LayoutUnit availableAlignmentSpace)
    699698{
     699    ASSERT(!child->isOutOfFlowPositioned());
     700
    700701    bool isHorizontal = isHorizontalFlow();
    701702    Length start = isHorizontal ? child->style()->marginTop() : child->style()->marginLeft();
     
    900901        if (availableFreeSpace > 0 && numberOfChildren)
    901902            return availableFreeSpace / (2 * numberOfChildren);
    902         if (availableFreeSpace < 0)
     903        else
    903904            return availableFreeSpace / 2;
    904905    }
     
    959960}
    960961
     962size_t RenderFlexibleBox::numberOfInFlowPositionedChildren(const OrderedFlexItemList& children) const
     963{
     964    size_t count = 0;
     965    for (size_t i = 0; i < children.size(); ++i) {
     966        RenderBox* child = children[i];
     967        if (!child->isOutOfFlowPositioned())
     968            ++count;
     969    }
     970    return count;
     971}
     972
    961973void RenderFlexibleBox::layoutAndPlaceChildren(LayoutUnit& crossAxisOffset, const OrderedFlexItemList& children, const WTF::Vector<LayoutUnit>& childSizes, LayoutUnit availableFreeSpace, WTF::Vector<LineContext>& lineContexts)
    962974{
    963975    ASSERT(childSizes.size() == children.size());
    964976
     977    size_t numberOfChildrenForJustifyContent = numberOfInFlowPositionedChildren(children);
    965978    LayoutUnit autoMarginOffset = autoMarginOffsetInMainAxis(children, availableFreeSpace);
    966979    LayoutUnit mainAxisOffset = flowAwareBorderStart() + flowAwarePaddingStart();
    967     mainAxisOffset += initialJustifyContentOffset(availableFreeSpace, style()->justifyContent(), childSizes.size());
     980    mainAxisOffset += initialJustifyContentOffset(availableFreeSpace, style()->justifyContent(), numberOfChildrenForJustifyContent);
    968981    if (style()->flexDirection() == FlowRowReverse)
    969982        mainAxisOffset += isHorizontalFlow() ? verticalScrollbarWidth() : horizontalScrollbarHeight();
     
    972985    LayoutUnit maxAscent = 0, maxDescent = 0; // Used when align-items: baseline.
    973986    LayoutUnit maxChildCrossAxisExtent = 0;
     987    size_t seenInFlowPositionedChildren = 0;
    974988    bool shouldFlipMainAxis = !isColumnFlow() && !isLeftToRightFlow();
    975989    for (size_t i = 0; i < children.size(); ++i) {
     
    977991        if (child->isOutOfFlowPositioned()) {
    978992            prepareChildForPositionedLayout(child, mainAxisOffset, crossAxisOffset, FlipForRowReverse);
    979             mainAxisOffset += justifyContentSpaceBetweenChildren(availableFreeSpace, style()->justifyContent(), childSizes.size());
    980993            continue;
    981994        }
     
    10131026        mainAxisOffset += childMainExtent + flowAwareMarginEndForChild(child);
    10141027
    1015         mainAxisOffset += justifyContentSpaceBetweenChildren(availableFreeSpace, style()->justifyContent(), childSizes.size());
     1028        ++seenInFlowPositionedChildren;
     1029        if (seenInFlowPositionedChildren < numberOfChildrenForJustifyContent)
     1030            mainAxisOffset += justifyContentSpaceBetweenChildren(availableFreeSpace, style()->justifyContent(), numberOfChildrenForJustifyContent);
    10161031    }
    10171032
     
    10231038        // on the height of the flexbox, which we only know after we've positioned all the flex items.
    10241039        updateLogicalHeight();
    1025         layoutColumnReverse(children, childSizes, crossAxisOffset, availableFreeSpace);
     1040        layoutColumnReverse(children, crossAxisOffset, availableFreeSpace);
    10261041    }
    10271042
     
    10301045}
    10311046
    1032 void RenderFlexibleBox::layoutColumnReverse(const OrderedFlexItemList& children, const WTF::Vector<LayoutUnit>& childSizes, LayoutUnit crossAxisOffset, LayoutUnit availableFreeSpace)
     1047void RenderFlexibleBox::layoutColumnReverse(const OrderedFlexItemList& children, LayoutUnit crossAxisOffset, LayoutUnit availableFreeSpace)
    10331048{
    10341049    // This is similar to the logic in layoutAndPlaceChildren, except we place the children
    10351050    // starting from the end of the flexbox. We also don't need to layout anything since we're
    10361051    // just moving the children to a new position.
     1052    size_t numberOfChildrenForJustifyContent = numberOfInFlowPositionedChildren(children);
    10371053    LayoutUnit mainAxisOffset = logicalHeight() - flowAwareBorderEnd() - flowAwarePaddingEnd();
    1038     mainAxisOffset -= initialJustifyContentOffset(availableFreeSpace, style()->justifyContent(), childSizes.size());
     1054    mainAxisOffset -= initialJustifyContentOffset(availableFreeSpace, style()->justifyContent(), numberOfChildrenForJustifyContent);
    10391055    mainAxisOffset -= isHorizontalFlow() ? verticalScrollbarWidth() : horizontalScrollbarHeight();
    10401056
     1057    size_t seenInFlowPositionedChildren = 0;
    10411058    for (size_t i = 0; i < children.size(); ++i) {
    10421059        RenderBox* child = children[i];
    10431060        if (child->isOutOfFlowPositioned()) {
    10441061            child->layer()->setStaticBlockPosition(mainAxisOffset);
    1045             mainAxisOffset -= justifyContentSpaceBetweenChildren(availableFreeSpace, style()->justifyContent(), childSizes.size());
    10461062            continue;
    10471063        }
     
    10541070
    10551071        mainAxisOffset -= flowAwareMarginStartForChild(child);
    1056         mainAxisOffset -= justifyContentSpaceBetweenChildren(availableFreeSpace, style()->justifyContent(), childSizes.size());
     1072
     1073        ++seenInFlowPositionedChildren;
     1074        if (seenInFlowPositionedChildren < numberOfChildrenForJustifyContent)
     1075            mainAxisOffset -= justifyContentSpaceBetweenChildren(availableFreeSpace, style()->justifyContent(), numberOfChildrenForJustifyContent);
    10571076    }
    10581077}
     
    11421161        for (size_t childNumber = 0; childNumber < lineContexts[lineNumber].numberOfChildren; ++childNumber, child = iterator.next()) {
    11431162            ASSERT(child);
     1163            if (child->isOutOfFlowPositioned()) {
     1164                if (style()->flexWrap() == FlexWrapReverse)
     1165                    adjustAlignmentForChild(child, lineCrossAxisExtent);
     1166                continue;
     1167            }
     1168
    11441169            if (updateAutoMarginsInCrossAxis(child, availableAlignmentSpaceForChild(lineCrossAxisExtent, child)))
    11451170                continue;
  • trunk/Source/WebCore/rendering/RenderFlexibleBox.h

    r128494 r129154  
    131131    void setLogicalOverrideSize(RenderBox* child, LayoutUnit childPreferredSize);
    132132    void prepareChildForPositionedLayout(RenderBox* child, LayoutUnit mainAxisOffset, LayoutUnit crossAxisOffset, PositionedLayoutMode);
     133    size_t numberOfInFlowPositionedChildren(const OrderedFlexItemList&) const;
    133134    void layoutAndPlaceChildren(LayoutUnit& crossAxisOffset, const OrderedFlexItemList&, const WTF::Vector<LayoutUnit>& childSizes, LayoutUnit availableFreeSpace, WTF::Vector<LineContext>&);
    134     void layoutColumnReverse(const OrderedFlexItemList&, const WTF::Vector<LayoutUnit>& childSizes, LayoutUnit crossAxisOffset, LayoutUnit availableFreeSpace);
     135    void layoutColumnReverse(const OrderedFlexItemList&, LayoutUnit crossAxisOffset, LayoutUnit availableFreeSpace);
    135136    void alignFlexLines(OrderIterator&, WTF::Vector<LineContext>&);
    136137    void alignChildren(OrderIterator&, const WTF::Vector<LineContext>&);
Note: See TracChangeset for help on using the changeset viewer.