Changeset 164609 in webkit


Ignore:
Timestamp:
Feb 24, 2014 2:29:20 PM (10 years ago)
Author:
commit-queue@webkit.org
Message:

[CSS Grid Layout] handle undefined RemainingSpace in computeUsedBreadthOfGridTracks algorithm
​https://bugs.webkit.org/show_bug.cgi?id=128372

Patch by Javier Fernandez <​jfernandez@igalia.com> on 2014-02-24
Reviewed by David Hyatt.

From Blink r165692 by <​svillar@igalia.com>

Source/WebCore:

The spec defines a different code path for the computeUsedBreadthOfGridTracks algorithm
​http://dev.w3.org/csswg/css-grid/#function-ComputeUsedBreadthOfGridTracks.

Basically the track breadth is different when the available size is undefined and thus,
cannot be taken into account during the computations.
The available size is undefined whenever the height is auto or the grid element has a
shrink-to-fit behavior.

It was also renamed the function to match the specs so the function name starts with
'compute' instead of 'computed'.

No new tests, but added new cases to some of them.

  • rendering/RenderGrid.cpp:

(WebCore::RenderGrid::computeIntrinsicLogicalWidths):
(WebCore::RenderGrid::computeUsedBreadthOfGridTracks):
(WebCore::gridElementIsShrinkToFit):
(WebCore::RenderGrid::computeNormalizedFractionBreadth):
(WebCore::RenderGrid::layoutGridItems):

  • rendering/RenderGrid.h:

LayoutTests:

Adapt tests to consider also cases for undefined RemainingSpace.

  • fast/css-grid-layout/flex-and-minmax-content-resolution-rows-expected.txt:
  • fast/css-grid-layout/flex-and-minmax-content-resolution-rows.html:
  • fast/css-grid-layout/flex-content-resolution-rows-expected.txt:
  • fast/css-grid-layout/flex-content-resolution-rows.html:
  • fast/css-grid-layout/grid-auto-columns-rows-update-expected.txt:
  • fast/css-grid-layout/grid-auto-columns-rows-update.html:
  • fast/css-grid-layout/grid-dynamic-updates-relayout-expected.txt:
  • fast/css-grid-layout/grid-dynamic-updates-relayout.html:
  • fast/css-grid-layout/grid-item-addition-track-breadth-update-expected.txt:
  • fast/css-grid-layout/grid-item-addition-track-breadth-update.html:
  • fast/css-grid-layout/grid-item-multiple-minmax-content-resolution-expected.txt:
  • fast/css-grid-layout/grid-item-multiple-minmax-content-resolution.html:
  • fast/css-grid-layout/grid-item-removal-track-breadth-update-expected.txt:
  • fast/css-grid-layout/grid-item-removal-track-breadth-update.html:
  • fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution-expected.txt:
  • fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution.html:
  • fast/css-grid-layout/implicit-position-dynamic-change-expected.txt:
  • fast/css-grid-layout/implicit-position-dynamic-change.html:
  • fast/css-grid-layout/minmax-max-content-resolution-rows-expected.txt:
  • fast/css-grid-layout/minmax-max-content-resolution-rows.html:
  • fast/css-grid-layout/minmax-min-content-column-resolution-rows-expected.txt:
  • fast/css-grid-layout/minmax-min-content-column-resolution-rows.html:
  • fast/css-grid-layout/minmax-spanning-resolution-rows-expected.txt:
  • fast/css-grid-layout/minmax-spanning-resolution-rows.html:
Location:
trunk
Files:
28 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r164602 r164609  
     12014-02-24  Javier Fernandez  <jfernandez@igalia.com>
     2
     3        [CSS Grid Layout] handle undefined RemainingSpace in computeUsedBreadthOfGridTracks algorithm
     4        https://bugs.webkit.org/show_bug.cgi?id=128372
     5
     6        Reviewed by David Hyatt.
     7
     8        From Blink r165692 by <svillar@igalia.com>
     9
     10        Adapt tests to consider also cases for undefined RemainingSpace.
     11
     12        * fast/css-grid-layout/flex-and-minmax-content-resolution-rows-expected.txt:
     13        * fast/css-grid-layout/flex-and-minmax-content-resolution-rows.html:
     14        * fast/css-grid-layout/flex-content-resolution-rows-expected.txt:
     15        * fast/css-grid-layout/flex-content-resolution-rows.html:
     16        * fast/css-grid-layout/grid-auto-columns-rows-update-expected.txt:
     17        * fast/css-grid-layout/grid-auto-columns-rows-update.html:
     18        * fast/css-grid-layout/grid-dynamic-updates-relayout-expected.txt:
     19        * fast/css-grid-layout/grid-dynamic-updates-relayout.html:
     20        * fast/css-grid-layout/grid-item-addition-track-breadth-update-expected.txt:
     21        * fast/css-grid-layout/grid-item-addition-track-breadth-update.html:
     22        * fast/css-grid-layout/grid-item-multiple-minmax-content-resolution-expected.txt:
     23        * fast/css-grid-layout/grid-item-multiple-minmax-content-resolution.html:
     24        * fast/css-grid-layout/grid-item-removal-track-breadth-update-expected.txt:
     25        * fast/css-grid-layout/grid-item-removal-track-breadth-update.html:
     26        * fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution-expected.txt:
     27        * fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution.html:
     28        * fast/css-grid-layout/implicit-position-dynamic-change-expected.txt:
     29        * fast/css-grid-layout/implicit-position-dynamic-change.html:
     30        * fast/css-grid-layout/minmax-max-content-resolution-rows-expected.txt:
     31        * fast/css-grid-layout/minmax-max-content-resolution-rows.html:
     32        * fast/css-grid-layout/minmax-min-content-column-resolution-rows-expected.txt:
     33        * fast/css-grid-layout/minmax-min-content-column-resolution-rows.html:
     34        * fast/css-grid-layout/minmax-spanning-resolution-rows-expected.txt:
     35        * fast/css-grid-layout/minmax-spanning-resolution-rows.html:
     36
    1372014-02-24  Thiago de Barros Lacerda  <thiago.lacerda@openbossa.org>
    238

  • trunk/LayoutTests/fast/css-grid-layout/flex-and-minmax-content-resolution-rows-expected.txt

    r157393 r164609  
    11Test that resolving auto tracks on grid items works properly.
    22
     3XXXXX
     4PASS
     5XXXXX
     6PASS
    37XXXXX
    48PASS
    … …  
    1620XXXXX XXXX
    1721PASS
     22XXXXX XXXX
     23XXXXX XXXX
     24PASS
     25XXXXX XXXX
     26XXXXX XXXX
     27PASS
     28XXXXX XXXX
     29XXXXX XXXX
     30PASS
    1831XXXXX XXXXX XXXXX XXXXX
     32PASS
     33XXXXX XXXXX XXXXX XXXXX
     34PASS
     35XXXXX XXXXX XXXXX XXXXX XXXXX
     36XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX
    1937PASS
    2038XXXXX XXXXX XXXXX XXXXX XXXXX
    … …  
    3048XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX
    3149PASS
     50XXXXX XXXXX XXXXX XXXXX
     51XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX
     52PASS
     53XXXXX XXXXX XXXXX XXXXX
     54XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX
     55PASS
     56XXXXX XXXXX XXXXX XXXXX
     57XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX
     58PASS

  • trunk/LayoutTests/fast/css-grid-layout/flex-and-minmax-content-resolution-rows.html

    r163625 r164609  
    5555<!-- Allow the extra logical space distribution to occur. -->
    5656<div style="width: 10px; height: 40px">
     57    <div class="grid gridMaxMaxContent" style="height: 100%">
     58        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX</div>
     59        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
     60    </div>
     61</div>
     62
     63<div style="width: 10px; height: 40px">
    5764    <div class="grid gridMaxMaxContent">
    5865        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX</div>
    59         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
     66        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
     67    </div>
     68</div>
     69
     70<div style="width: 10px; height: 110px;">
     71    <div class="grid gridMaxMaxContent" style="height: 100%">
     72        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX</div>
     73        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="100"></div>
    6074    </div>
    6175</div>
    … …  
    6478    <div class="grid gridMaxMaxContent">
    6579        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX</div>
    66         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="100"></div>
    67     </div>
    68 </div>
    69 
     80        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
     81    </div>
     82</div>
     83
     84<div class="constrainedContainer">
     85    <div class="grid gridMinMinContent" style="height: 100%">
     86        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX XXXX</div>
     87        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXX</div>
     88    </div>
     89</div>
    7090
    7191<div class="constrainedContainer">
    7292    <div class="grid gridMinMinContent">
    73         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX XXXX</div>
    74         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXX</div>
     93        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXX</div>
     94        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX XXXX</div>
    7595    </div>
    7696</div>
    … …  
    7898<!-- Allow the extra logical space distribution to occur. -->
    7999<div style="width: 10px; height: 40px">
    80     <div class="grid gridMinMinContent">
     100    <div class="grid gridMinMinContent" style="height: 100%">
    81101        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX XXXX</div>
    82102        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXX</div>
    … …  
    84104</div>
    85105
    86 <div style="width: 10px; height: 110px;">
     106<div style="width: 10px; height: 40px">
    87107    <div class="grid gridMinMinContent">
     108        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXX</div>
     109        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX XXXX</div>
     110    </div>
     111</div>
     112
     113<div style="width: 10px; height: 110px;">
     114    <div class="grid gridMinMinContent" style="height: 100%">
    88115        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXX</div>
    89116        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX XXXX</div>
    … …  
    91118</div>
    92119
     120<div style="width: 10px; height: 110px;">
     121    <div class="grid gridMinMinContent">
     122        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXX</div>
     123        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX XXXX</div>
     124    </div>
     125</div>
     126
     127<div style="width: 10px; height: 60px;">
     128    <div class="grid gridWithIntrinsicSizeBiggerThanFlex" style="height: 100%">
     129        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div>
     130        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
     131    </div>
     132</div>
    93133
    94134<div style="width: 10px; height: 60px;">
    95135    <div class="grid gridWithIntrinsicSizeBiggerThanFlex">
    96136        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div>
    97         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
    98     </div>
    99 </div>
    100 
    101 
    102 <div style="width: 10px; height: 60px;">
    103     <div class="grid gridShrinkBelowItemsIntrinsicSize">
     137        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="160"></div>
     138    </div>
     139</div>
     140
     141<div style="width: 10px; height: 60px;">
     142    <div class="grid gridShrinkBelowItemsIntrinsicSize" style="height: 100%">
    104143        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXXX XXXXX XXXXX XXXXX</div>
    105144        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
    … …  
    107146</div>
    108147
     148<div style="width: 10px; height: 60px;">
     149    <div class="grid gridShrinkBelowItemsIntrinsicSize">
     150        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX XXXXX XXXXX</div>
     151        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
     152    </div>
     153</div>
    109154
    110155<!-- No space available for the <flex> -->
    111156<div style="width: 10px; height: 100px;">
     157    <div class="grid gridWithNonFlexingItems" style="height: 100%">
     158        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
     159        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div>
     160        <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
     161        <div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
     162    </div>
     163</div>
     164
     165<div style="width: 10px; height: 100px;">
    112166    <div class="grid gridWithNonFlexingItems">
    113167        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
    114168        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div>
    115169        <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
    116         <div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
     170        <div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="80"></div>
    117171    </div>
    118172</div>
    … …  
    120174<!-- The second track should be sized after the min-content as the <flex> value should be too small. -->
    121175<div style="width: 10px; height: 180px;">
     176    <div class="grid gridWithNonFlexingItems" style="height: 100%">
     177        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
     178        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div>
     179        <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
     180        <div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
     181    </div>
     182</div>
     183
     184<div style="width: 10px; height: 180px;">
    122185    <div class="grid gridWithNonFlexingItems">
    123186        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
    124187        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div>
    125188        <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
    126         <div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
     189        <div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="80"></div>
     190    </div>
     191</div>
     192
     193<div style="width: 10px; height: 400px;">
     194    <div class="grid gridWithNonFlexingItems" style="height: 100%">
     195        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
     196        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX XXXXX</div>
     197        <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
     198        <div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="200"></div>
    127199    </div>
    128200</div>
    … …  
    131203    <div class="grid gridWithNonFlexingItems">
    132204        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
    133         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX XXXXX</div>
    134         <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
    135         <div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="200"></div>
     205        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div>
     206        <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
     207        <div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="80"></div>
    136208    </div>
    137209</div>

  • trunk/LayoutTests/fast/css-grid-layout/flex-content-resolution-rows-expected.txt

    r157393 r164609  
    1313PASS
    1414PASS
     15PASS
     16PASS
     17PASS
     18PASS
     19PASS
     20PASS
     21PASS
     22PASS
     23PASS
     24PASS

  • trunk/LayoutTests/fast/css-grid-layout/flex-content-resolution-rows.html

    r163625 r164609  
    3030
    3131<div style="height: 0px">
     32    <div class="grid gridMinFlexContent" style="height: 100%">
     33        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="0"></div>
     34    </div>
     35</div>
     36
     37<div style="height: 0px">
    3238    <div class="grid gridMinFlexContent">
    33         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="0"></div>
     39        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
    3440    </div>
    3541</div>
    … …  
    3743<!-- Allow the extra logical space distribution to occur. -->
    3844<div style="width: 10px; height: 40px">
     45    <div class="grid gridMinFlexContent" style="height: 100%">
     46        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
     47    </div>
     48</div>
     49
     50<div style="width: 10px; height: 40px">
    3951    <div class="grid gridMinFlexContent">
    40         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
     52        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
    4153    </div>
    4254</div>
    … …  
    5769<!-- Allow the extra logical space distribution to occur. -->
    5870<div style="width: 10px; height: 40px">
     71    <div class="grid gridMaxFlexContent" style="height: 100%;">
     72        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
     73    </div>
     74</div>
     75
     76<div style="width: 10px; height: 40px">
    5977    <div class="grid gridMaxFlexContent">
    60         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
     78        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
     79    </div>
     80</div>
     81
     82<div style="width: 10px; height: 100px;">
     83    <div class="grid gridMaxFlexContent" style="height: 100%;">
     84        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="100"></div>
    6185    </div>
    6286</div>
    … …  
    6488<div style="width: 10px; height: 100px;">
    6589    <div class="grid gridMaxFlexContent">
    66         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="100"></div>
     90        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
    6791    </div>
    6892</div>
    6993
    70 
    7194<div class="constrainedContainer">
    72     <div class="grid gridTwoMaxFlexContent">
     95    <div class="grid gridTwoMaxFlexContent" style="height: 100%">
    7396        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
    7497        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
    … …  
    7699</div>
    77100
     101<div class="constrainedContainer">
     102    <div class="grid gridTwoMaxFlexContent">
     103        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
     104        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
     105    </div>
     106</div>
     107
    78108<!-- Allow the extra logical space distribution to occur. -->
    79109<div style="width: 10px; height: 60px">
    80     <div class="grid gridTwoMaxFlexContent">
     110    <div class="grid gridTwoMaxFlexContent" style="height: 100%">
    81111        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
    82112        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
    … …  
    84114</div>
    85115
     116<div style="width: 10px; height: 60px">
     117    <div class="grid gridTwoMaxFlexContent">
     118        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
     119        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
     120    </div>
     121</div>
     122
    86123<div style="width: 10px; height: 120px;">
    87     <div class="grid gridTwoMaxFlexContent">
     124    <div class="grid gridTwoMaxFlexContent" style="height: 100%">
    88125        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
    89126        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="80"></div>
    … …  
    91128</div>
    92129
     130<div style="width: 10px; height: 120px;">
     131    <div class="grid gridTwoMaxFlexContent">
     132        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
     133        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
     134    </div>
     135</div>
    93136
    94137<div class="constrainedContainer">
    95     <div class="grid gridTwoDoubleMaxFlexContent">
     138    <div class="grid gridTwoDoubleMaxFlexContent" style="height: 100%">
    96139        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
    97140        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
    … …  
    99142</div>
    100143
     144<div class="constrainedContainer">
     145    <div class="grid gridTwoDoubleMaxFlexContent">
     146        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
     147        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
     148    </div>
     149</div>
     150
    101151<!-- Allow the extra logical space distribution to occur. -->
    102152<div style="width: 10px; height: 60px">
    103     <div class="grid gridTwoDoubleMaxFlexContent">
     153    <div class="grid gridTwoDoubleMaxFlexContent" style="height: 100%">
    104154        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="12"></div>
    105155        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="48"></div>
    … …  
    107157</div>
    108158
     159<div style="width: 10px; height: 60px">
     160    <div class="grid gridTwoDoubleMaxFlexContent">
     161        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
     162        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
     163    </div>
     164</div>
     165
    109166<div style="width: 10px; height: 120px;">
    110     <div class="grid gridTwoDoubleMaxFlexContent">
     167    <div class="grid gridTwoDoubleMaxFlexContent" style="height: 100%">
    111168        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="24"></div>
    112169        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="96"></div>
    … …  
    114171</div>
    115172
     173<div style="width: 10px; height: 120px;">
     174    <div class="grid gridTwoDoubleMaxFlexContent">
     175        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
     176        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
     177    </div>
     178</div>
     179
    116180</body>
    117181</html>

  • trunk/LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-update-expected.txt

    r146467 r164609  
    2020PASS
    2121PASS
     22XXXXX XXXXXX
     23PASS
     24PASS
     25PASS
     26PASS
     27PASS
     28PASS
     29PASS
     30PASS
     31PASS

  • trunk/LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-update.html

    r163625 r164609  
    4848    updateAndCheck("unconstrainedGrid", { 'rows': 'minmax(20em, 15px)', 'columns': '50px' }, { 'width': '50px', 'height': '200px' });
    4949    updateAndCheck("unconstrainedGrid", { 'rows': 'minmax(20em, 15px)', 'columns': 'minmax(10%, 100px)' }, { 'width': '100px', 'height': '200px' });
    50     updateAndCheck("unconstrainedGrid", { 'rows': 'minmax(-webkit-min-content, 15px)', 'columns': 'minmax(10%, 100px)' }, { 'width': '100px', 'height': '20px' });
     50    updateAndCheck("unconstrainedGrid", { 'rows': 'minmax(-webkit-min-content, 15px)', 'columns': 'minmax(10%, 100px)' }, { 'width': '100px', 'height': '15px' });
    5151    updateAndCheck("unconstrainedGrid", { 'rows': 'minmax(-webkit-min-content, 15px)', 'columns': 'minmax(10%, -webkit-max-content)' }, { 'width': '120px', 'height': '15px' });
    5252    updateAndCheck("unconstrainedGrid", { 'rows': 'minmax(-webkit-min-content, 15px)', 'columns': 'minmax(10%, -webkit-max-content)' }, { 'width': '120px', 'height': '15px' });
    … …  
    5454    updateAndCheck("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(20em, -webkit-max-content)' }, { 'width': '200px', 'height': '10px' });
    5555    updateAndCheck("unconstrainedGrid", { 'rows': 'auto', 'columns': 'auto' }, { 'width': '120px', 'height': '10px' });
     56
     57    updateAndCheck("constrainedGridUndefinedHeight", { 'rows': 'minmax(20em, 15px)', 'columns': '50px' }, { 'width': '50px', 'height': '200px' });
     58    updateAndCheck("constrainedGridUndefinedHeight", { 'rows': 'minmax(20em, 15px)', 'columns': 'minmax(10%, 100px)' }, { 'width': '1px', 'height': '200px' });
     59    updateAndCheck("constrainedGridUndefinedHeight", { 'rows': 'minmax(-webkit-min-content, 15px)', 'columns': 'minmax(10%, 100px)' }, { 'width': '1px', 'height': '15px' });
     60    updateAndCheck("constrainedGridUndefinedHeight", { 'rows': 'minmax(-webkit-min-content, 15px)', 'columns': 'minmax(-webkit-max-content, 100px)' }, { 'width': '120px', 'height': '15px' });
     61    updateAndCheck("constrainedGridUndefinedHeight", { 'rows': 'minmax(40em, 15px)', 'columns': 'minmax(-webkit-max-content, 100px)' }, { 'width': '120px', 'height': '400px' });
     62    updateAndCheck("constrainedGridUndefinedHeight", { 'rows': 'minmax(40em, 15px)', 'columns': 'minmax(10%, 100px)' }, { 'width': '1px', 'height': '400px' });
     63    updateAndCheck("constrainedGridUndefinedHeight", { 'rows': 'minmax(40em, 15px)', 'columns': 'auto' }, { 'width': '60px', 'height': '400px' });
     64    updateAndCheck("constrainedGridUndefinedHeight", { 'rows': 'auto', 'columns': 'auto' }, { 'width': '60px', 'height': '20px' });
    5665}
    5766
    … …  
    6372
    6473<div class="constrainedContainer" style="position: relative">
    65     <div class="grid" id="constrainedGrid">
     74    <div class="grid" id="constrainedGrid" style="height: 100%">
    6675        <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="10" data-offset-y="20" data-expected-width="50" data-expected-height="30">XXXXX XXXXXX</div>
    6776    </div>
    … …  
    7483</div>
    7584
     85<div class="constrainedContainer" style="position: relative;">
     86    <div class="grid" id="constrainedGridUndefinedHeight">
     87        <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="10" data-offset-y="20" data-expected-width="50" data-expected-height="30">XXXXX XXXXXX</div>
     88    </div>
     89</div>
     90
    7691</body>
    7792</html>

  • trunk/LayoutTests/fast/css-grid-layout/grid-dynamic-updates-relayout-expected.txt

    r157393 r164609  
    11This test checks that grid-{rows|columns} dynamic updates properly relayout the grid items.
     2XXXXX XXXXXX
     3PASS
     4PASS
     5PASS
     6PASS
     7PASS
     8PASS
    29XXXXX XXXXXX
    310PASS

  • trunk/LayoutTests/fast/css-grid-layout/grid-dynamic-updates-relayout.html

    r163625 r164609  
    2929    testLayout("constrainedGrid", { 'rows': '70px', 'columns': 'minmax(-webkit-max-content, 50px)' }, { 'width': '120', 'height': '70' });
    3030
     31    testLayout("constrainedGridUndefinedHeight", { 'rows': 'minmax(20px, 50px)', 'columns': 'minmax(30px, 50px)' }, { 'width': '30', 'height': '50' });
     32    testLayout("constrainedGridUndefinedHeight", { 'rows': 'minmax(40px, 50px)', 'columns': 'minmax(30px, 50px)' }, { 'width': '30', 'height': '50' });
     33    testLayout("constrainedGridUndefinedHeight", { 'rows': 'minmax(40px, 50px)', 'columns': 'minmax(50px, 50px)' }, { 'width': '50', 'height': '50' });
     34    testLayout("constrainedGridUndefinedHeight", { 'rows': 'auto', 'columns': 'minmax(50px, 50px)' }, { 'width': '50', 'height': '20' });
     35    testLayout("constrainedGridUndefinedHeight", { 'rows': 'auto', 'columns': 'minmax(-webkit-max-content, 50px)' }, { 'width': '120', 'height': '10' });
     36    testLayout("constrainedGridUndefinedHeight", { 'rows': '70px', 'columns': 'minmax(-webkit-max-content, 50px)' }, { 'width': '120', 'height': '70' });
     37
    3138    testLayout("unconstrainedGrid", { 'rows': 'minmax(20px, 50px)', 'columns': 'minmax(20px, 60px)' }, { 'width': '60', 'height': '50' });
    3239    testLayout("unconstrainedGrid", { 'rows': 'minmax(20px, 50px)', 'columns': 'minmax(20px, 40px)' }, { 'width': '40', 'height': '50' });
    … …  
    4552<div>This test checks that grid-{rows|columns} dynamic updates properly relayout the grid items.</div>
    4653<div class="constrainedContainer">
    47     <div class="grid" id="constrainedGrid">
     54    <div class="grid" id="constrainedGrid" style="height: 100%">
     55        <div class="sizedToGridArea">XXXXX XXXXXX</div>
     56    </div>
     57</div>
     58
     59<div class="constrainedContainer">
     60    <div class="grid" id="constrainedGridUndefinedHeight">
    4861        <div class="sizedToGridArea">XXXXX XXXXXX</div>
    4962    </div>

  • trunk/LayoutTests/fast/css-grid-layout/grid-item-addition-track-breadth-update-expected.txt

    r142798 r164609  
    11This test checks that we properly recompute our grid tracks' sizes when we add more grid items.
    22
     3XXXX XXXX XXXX
     4XXXX XXXX XXXX
     5XXXX XXXX XXXX
     6XXXX XXXX XXXX
     7XXXX XXXX XXXX
     8XXXX XXXX XXXX
     9XXXX XXXX XXXX
     10XXXX XXXX XXXX
     11XXXX XXXX XXXX
     12XXXX XXXX XXXX
     13XXXX XXXX XXXX
     14XXXX XXXX XXXX
     15XXXX XXXX XXXX
     16XXXX XXXX XXXX
     17XXXX XXXX XXXX
     18XXXX XXXX XXXX
     19XXXX XXXX XXXX
     20XXXX XXXX XXXX
     21XXXX XXXX XXXX
     22XXXX XXXX XXXX
     23XXXX XXXX XXXX
     24PASS
     25PASS
     26PASS
     27PASS
     28PASS
     29PASS
     30PASS
     31PASS
     32PASS
     33PASS
     34PASS
     35PASS
     36PASS
     37PASS
     38PASS
     39PASS
     40PASS
     41PASS
     42PASS
     43PASS
     44PASS
    345XXXX XXXX XXXX
    446XXXX XXXX XXXX

  • trunk/LayoutTests/fast/css-grid-layout/grid-item-addition-track-breadth-update.html

    r163625 r164609  
    6363    testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '4', 'row': '5' }, { 'width': '50', 'height': '30' });
    6464
     65
     66    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '10', 'row': '15' }, { 'width': '40', 'height': '30' });
     67
     68    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '1', 'row': '1' }, { 'width': '50', 'height': '70' });
     69    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '1', 'row': '2' }, { 'width': '50', 'height': '70' });
     70    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '1', 'row': '3' }, { 'width': '50', 'height': '50' });
     71    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '1', 'row': '4' }, { 'width': '50', 'height': '65' });
     72    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '1', 'row': '5' }, { 'width': '50', 'height': '30' });
     73
     74    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '2', 'row': '1' }, { 'width': '40', 'height': '70' });
     75    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '2', 'row': '2' }, { 'width': '40', 'height': '70' });
     76    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '2', 'row': '3' }, { 'width': '40', 'height': '50' });
     77    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '2', 'row': '4' }, { 'width': '40', 'height': '65' });
     78    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '2', 'row': '5' }, { 'width': '40', 'height': '30' });
     79
     80    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '3', 'row': '1' }, { 'width': '140', 'height': '70' });
     81    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '3', 'row': '2' }, { 'width': '140', 'height': '70' });
     82    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '3', 'row': '3' }, { 'width': '140', 'height': '50' });
     83    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '3', 'row': '4' }, { 'width': '140', 'height': '65' });
     84    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '3', 'row': '5' }, { 'width': '140', 'height': '30' });
     85
     86    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '4', 'row': '1' }, { 'width': '50', 'height': '70' });
     87    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '4', 'row': '2' }, { 'width': '50', 'height': '70' });
     88    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '4', 'row': '3' }, { 'width': '50', 'height': '50' });
     89    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '4', 'row': '4' }, { 'width': '50', 'height': '65' });
     90    testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '4', 'row': '5' }, { 'width': '50', 'height': '30' });
     91
    6592    testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '10', 'row': '15' }, { 'width': '130', 'height': '10' });
    6693
    … …  
    96123
    97124<div class="constrainedContainer">
    98     <div class="grid gridFixedContent" id="constrainedGrid"></div>
     125    <div class="grid gridFixedContent" id="constrainedGrid" style="height: 100%"></div>
     126</div>
     127
     128<div class="constrainedContainer">
     129    <div class="grid gridFixedContent" id="constrainedGridUndefinedHeight"></div>
    99130</div>
    100131

  • trunk/LayoutTests/fast/css-grid-layout/grid-item-multiple-minmax-content-resolution-expected.txt

    r146697 r164609  
    1616XXXXX XXXXX XXXXX XXXXX
    1717PASS
     18XXXXX XXXXX
     19XXXXX XXXXX XXXXX
     20XXXXX XXXXX
     21XXXXX XXXXX XXXXX XXXXX
     22PASS

  • trunk/LayoutTests/fast/css-grid-layout/grid-item-multiple-minmax-content-resolution.html

    r163625 r164609  
    2727
    2828<div class="constrainedContainer" style="position: relative;">
    29 <div class="grid gridMinMaxAutoWithColumnMinMaxAuto">
     29<div class="grid gridMinMaxAutoWithColumnMinMaxAuto" style="height: 100%">
    3030    <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXXX</div>
    3131    <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXXX XXXXX</div>
    … …  
    3535</div>
    3636
     37<div class="constrainedContainer" style="position: relative;">
     38<div class="grid gridMinMaxAutoWithColumnMinMaxAuto">
     39    <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXXX</div>
     40    <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXXX XXXXX</div>
     41    <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="100">XXXXX XXXXX</div>
     42    <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX XXXXX</div>
     43</div>
     44</div>
     45
    3746<div style="height: 100px; width: 220px; position: relative;">
    3847<div class="grid gridMinMaxAutoWithColumnMinMaxAuto">
    3948    <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="110" data-expected-height="20">XXXXX XXXXX</div>
    4049    <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="110" data-expected-height="20">XXXXX XXXXX XXXXX</div>
    41     <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="110" data-expected-height="80">XXXXX XXXXX</div>
    42     <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="110" data-expected-height="80">XXXXX XXXXX XXXXX XXXXX</div>
     50    <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="110" data-expected-height="100">XXXXX XXXXX</div>
     51    <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="110" data-expected-height="100">XXXXX XXXXX XXXXX XXXXX</div>
    4352</div>
    4453</div>

  • trunk/LayoutTests/fast/css-grid-layout/grid-item-removal-track-breadth-update-expected.txt

    r142798 r164609  
    11This test checks that the tracks' breadth are recomputed after removing a grid item.
    22
     3XXX XXX XXX
     4PASS
     5PASS
     6PASS
     7XXX XXX XXX
     8PASS
     9PASS
     10PASS
    311XXX XXX XXX
    412PASS
    … …  
    6169PASS
    6270PASS
     71XX XX XX XX XX XX
     72PASS
     73PASS
     74PASS
     75XX XX XX XX XX XX
     76PASS
     77PASS
     78PASS
     79XX XX XX XX XX XX
     80PASS
     81PASS
     82PASS
     83XX XX XX XX XX XX
     84PASS
     85PASS
     86PASS
     87XX XX XX XX XX XX
     88PASS
     89PASS
     90PASS

  • trunk/LayoutTests/fast/css-grid-layout/grid-item-removal-track-breadth-update.html

    r163625 r164609  
    7777    testRemoval("constrainedAutoGrid", { 'width': '50', 'height': '40' }, { 'width': '40', 'height': '40' }, { 'width': '30', 'height': '30' });
    7878    testRemoval("constrainedMinContentFixedGrid", { 'width': '50', 'height': '40' }, { 'width': '40', 'height': '40' }, { 'width': '30', 'height': '30' });
     79    testRemoval("constrainedMinContentFixedGridUndefinedHeight", { 'width': '50', 'height': '40' }, { 'width': '40', 'height': '40' }, { 'width': '30', 'height': '40' });
    7980    testRemoval("constrainedMaxContentFixedGrid", { 'width': '190', 'height': '10' }, { 'width': '190', 'height': '10' }, { 'width': '110', 'height': '10' });
     81    testRemoval("constrainedMaxContentFixedGridUndefinedHeight", { 'width': '190', 'height': '40' }, { 'width': '190', 'height': '40' }, { 'width': '110', 'height': '40' });
    8082    testRemoval("constrainedFixedMinContentGrid", { 'width': '100', 'height': '40' }, { 'width': '100', 'height': '40' }, { 'width': '100', 'height': '40' });
    8183    testRemoval("constrainedFixedMaxContentGrid", { 'width': '100', 'height': '40' }, { 'width': '100', 'height': '40' }, { 'width': '100', 'height': '40' });
    … …  
    8385    testRemoval("unconstrainedAutoGrid", { 'width': '390', 'height': '10' }, { 'width': '350', 'height': '10' }, { 'width': '170', 'height': '10' });
    8486    testRemoval("unconstrainedMinContentFixedGrid", { 'width': '100', 'height': '60' }, { 'width': '100', 'height': '60' }, { 'width': '100', 'height': '40' });
     87    testRemoval("unconstrainedMinContentFixedGridUndefinedHeight", { 'width': '100', 'height': '40' }, { 'width': '100', 'height': '40' }, { 'width': '100', 'height': '40' });
    8588    testRemoval("unconstrainedMaxContentFixedGrid", { 'width': '390', 'height': '40' }, { 'width': '350', 'height': '40' }, { 'width': '170', 'height': '40' });
    8689    testRemoval("unconstrainedFixedMinContentGrid", { 'width': '100', 'height': '60' }, { 'width': '100', 'height': '60' }, { 'width': '100', 'height': '40' });
    … …  
    8992    testRemoval("lessConstrainedAutoGrid", { 'width': '60', 'height': '90' }, { 'width': '60', 'height': '60' }, { 'width': '60', 'height': '30' });
    9093    testRemoval("lessConstrainedMinContentFixedGrid", { 'width': '60', 'height': '90' }, { 'width': '60', 'height': '60' }, { 'width': '60', 'height': '30' });
     94    testRemoval("lessConstrainedMinContentFixedGridUndefinedHeight", { 'width': '60', 'height': '40' }, { 'width': '60', 'height': '40' }, { 'width': '60', 'height': '40' });
    9195    testRemoval("lessConstrainedMaxContentFixedGrid", { 'width': '350', 'height': '20' }, { 'width': '350', 'height': '20' }, { 'width': '170', 'height': '20' });
     96    testRemoval("lessConstrainedMaxContentFixedGridUndefinedHeight", { 'width': '350', 'height': '40' }, { 'width': '350', 'height': '40' }, { 'width': '170', 'height': '40' });
    9297    testRemoval("lessConstrainedFixedMinContentGrid", { 'width': '100', 'height': '40' }, { 'width': '100', 'height': '40' }, { 'width': '100', 'height': '40' });
     98    testRemoval("lessConstrainedFixedMinContentGridUndefinedHeight", { 'width': '100', 'height': '60' }, { 'width': '100', 'height': '60' }, { 'width': '100', 'height': '40' });
    9399    testRemoval("lessConstrainedFixedMaxContentGrid", { 'width': '100', 'height': '40' }, { 'width': '100', 'height': '40' }, { 'width': '100', 'height': '40' });
     100    testRemoval("lessConstrainedFixedMaxContentGridUndefinedHeight", { 'width': '100', 'height': '60' }, { 'width': '100', 'height': '60' }, { 'width': '100', 'height': '40' });
    94101}
    95102window.addEventListener("load", testRemovals, false);
    … …  
    108115
    109116<div class="constrainedContainer">
    110     <div class="grid gridMinContentFixed" id="constrainedMinContentFixedGrid">
    111         <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX</div>
    112         <div class="firstRowFirstColumn">XXXX XXXX XXXX XXXX</div>
    113         <div class="firstRowFirstColumn">XXX XXX XXX</div>
    114     </div>
    115 </div>
    116 
    117 <div class="constrainedContainer">
    118     <div class="grid gridMaxContentFixed" id="constrainedMaxContentFixedGrid">
     117    <div class="grid gridMinContentFixed" id="constrainedMinContentFixedGrid" style="height: 100%">
     118        <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX</div>
     119        <div class="firstRowFirstColumn">XXXX XXXX XXXX XXXX</div>
     120        <div class="firstRowFirstColumn">XXX XXX XXX</div>
     121    </div>
     122</div>
     123
     124<div class="constrainedContainer">
     125    <div class="grid gridMinContentFixed" id="constrainedMinContentFixedGridUndefinedHeight">
     126        <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX</div>
     127        <div class="firstRowFirstColumn">XXXX XXXX XXXX XXXX</div>
     128        <div class="firstRowFirstColumn">XXX XXX XXX</div>
     129    </div>
     130</div>
     131
     132<div class="constrainedContainer">
     133    <div class="grid gridMaxContentFixed" id="constrainedMaxContentFixedGrid" style="height: 100%">
     134        <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX</div>
     135        <div class="firstRowFirstColumn">XXXX XXXX XXXX XXXX</div>
     136        <div class="firstRowFirstColumn">XXX XXX XXX</div>
     137    </div>
     138</div>
     139
     140<div class="constrainedContainer">
     141    <div class="grid gridMaxContentFixed" id="constrainedMaxContentFixedGridUndefinedHeight">
    119142        <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX</div>
    120143        <div class="firstRowFirstColumn">XXXX XXXX XXXX XXXX</div>
    … …  
    149172
    150173<div class="unconstrainedContainer">
    151     <div class="grid gridMinContentFixed" id="unconstrainedMinContentFixedGrid">
     174    <div class="grid gridMinContentFixed" id="unconstrainedMinContentFixedGrid" style="height: 100%">
     175        <div class="firstRowFirstColumn">XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
     176        <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
     177        <div class="firstRowFirstColumn">XX XX XX XX XX XX</div>
     178    </div>
     179</div>
     180
     181<div class="unconstrainedContainer">
     182    <div class="grid gridMinContentFixed" id="unconstrainedMinContentFixedGridUndefinedHeight">
    152183        <div class="firstRowFirstColumn">XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
    153184        <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
    … …  
    190221
    191222<div class="lessConstrainedContainer">
    192     <div class="grid gridMinContentFixed" id="lessConstrainedMinContentFixedGrid">
    193         <div class="firstRowFirstColumn">XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
    194         <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
    195         <div class="firstRowFirstColumn">XX XX XX XX XX XX</div>
    196     </div>
    197 </div>
    198 
    199 <div class="lessConstrainedContainer">
    200     <div class="grid gridMaxContentFixed" id="lessConstrainedMaxContentFixedGrid">
    201         <div class="firstRowFirstColumn">XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
    202         <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
    203         <div class="firstRowFirstColumn">XX XX XX XX XX XX</div>
    204     </div>
    205 </div>
    206 
    207 <div class="lessConstrainedContainer">
    208     <div class="grid gridFixedMinContent" id="lessConstrainedFixedMinContentGrid">
    209         <div class="firstRowFirstColumn">XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
    210         <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
    211         <div class="firstRowFirstColumn">XX XX XX XX XX XX</div>
    212     </div>
    213 </div>
    214 
    215 <div class="lessConstrainedContainer">
    216     <div class="grid gridFixedMaxContent" id="lessConstrainedFixedMaxContentGrid">
     223    <div class="grid gridMinContentFixed" id="lessConstrainedMinContentFixedGrid" style="height: 100%">
     224        <div class="firstRowFirstColumn">XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
     225        <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
     226        <div class="firstRowFirstColumn">XX XX XX XX XX XX</div>
     227    </div>
     228</div>
     229
     230<div class="lessConstrainedContainer">
     231    <div class="grid gridMinContentFixed" id="lessConstrainedMinContentFixedGridUndefinedHeight">
     232        <div class="firstRowFirstColumn">XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
     233        <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
     234        <div class="firstRowFirstColumn">XX XX XX XX XX XX</div>
     235    </div>
     236</div>
     237
     238<div class="lessConstrainedContainer">
     239    <div class="grid gridMaxContentFixed" id="lessConstrainedMaxContentFixedGrid" style="height: 100%">
     240        <div class="firstRowFirstColumn">XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
     241        <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
     242        <div class="firstRowFirstColumn">XX XX XX XX XX XX</div>
     243    </div>
     244</div>
     245
     246<div class="lessConstrainedContainer">
     247    <div class="grid gridMaxContentFixed" id="lessConstrainedMaxContentFixedGridUndefinedHeight">
     248        <div class="firstRowFirstColumn">XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
     249        <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
     250        <div class="firstRowFirstColumn">XX XX XX XX XX XX</div>
     251    </div>
     252</div>
     253
     254<div class="lessConstrainedContainer">
     255    <div class="grid gridFixedMinContent" id="lessConstrainedFixedMinContentGrid" style="height: 100%">
     256        <div class="firstRowFirstColumn">XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
     257        <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
     258        <div class="firstRowFirstColumn">XX XX XX XX XX XX</div>
     259    </div>
     260</div>
     261
     262<div class="lessConstrainedContainer">
     263    <div class="grid gridFixedMinContent" id="lessConstrainedFixedMinContentGridUndefinedHeight">
     264        <div class="firstRowFirstColumn">XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
     265        <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
     266        <div class="firstRowFirstColumn">XX XX XX XX XX XX</div>
     267    </div>
     268</div>
     269
     270<div class="lessConstrainedContainer">
     271    <div class="grid gridFixedMaxContent" id="lessConstrainedFixedMaxContentGrid" style="height: 100%">
     272        <div class="firstRowFirstColumn">XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
     273        <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
     274        <div class="firstRowFirstColumn">XX XX XX XX XX XX</div>
     275    </div>
     276</div>
     277
     278<div class="lessConstrainedContainer">
     279    <div class="grid gridFixedMaxContent" id="lessConstrainedFixedMaxContentGridUndefinedHeight">
    217280        <div class="firstRowFirstColumn">XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
    218281        <div class="firstRowFirstColumn">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>

  • trunk/LayoutTests/fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution-expected.txt

    r146697 r164609  
    11Test that grid items with a percentage logical height inside a grid without explicit sizes resolve their size properly.
    22
     3XXXXX XXXXXX
     4XXXXX XXXXXX
     5XXXXX XXXXXX
     6XXXXX XXXXXX
     7PASS
    38XXXXX XXXXXX
    49XXXXX XXXXXX

  • trunk/LayoutTests/fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution.html

    r163625 r164609  
    3535    <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXXXX</div>
    3636    <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="20">XXXXX XXXXXX</div>
     37    <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="100">XXXXX XXXXXX</div>
     38    <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="100" data-expected-height="100">XXXXX XXXXXX</div>
     39</div>
     40</div>
     41
     42<div style="position: relative;">
     43<div class="grid gridMinMaxMinMax" style="height: 100px;">
     44    <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXXXX</div>
     45    <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="20">XXXXX XXXXXX</div>
    3746    <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="80">XXXXX XXXXXX</div>
    3847    <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="100" data-expected-height="80">XXXXX XXXXXX</div>

  • trunk/LayoutTests/fast/css-grid-layout/implicit-position-dynamic-change-expected.txt

    r141963 r164609  
    11This test checks that we properly recompute our grid tracks' sizes when a grid item changes its -webkit-grid-row or -webkit-grid-column.
    22
     3XXXX XXXX XXXX
     4PASS
     5PASS
     6PASS
     7PASS
     8PASS
     9PASS
     10PASS
     11PASS
     12PASS
     13PASS
     14PASS
     15PASS
     16PASS
     17PASS
     18PASS
     19PASS
     20PASS
     21PASS
     22PASS
     23PASS
     24PASS
    325XXXX XXXX XXXX
    426PASS

  • trunk/LayoutTests/fast/css-grid-layout/implicit-position-dynamic-change.html

    r163625 r164609  
    5353    testPosition("constrainedGrid", { 'column': '10', 'row': '15' }, { 'width': '40', 'height': '30' });
    5454
     55    var gridItem = document.getElementById("constrainedGridUndefinedHeight").firstChild;
     56    testPosition("constrainedGridUndefinedHeight", { 'column': '1', 'row': '1' }, { 'width': '50', 'height': '70' });
     57    testPosition("constrainedGridUndefinedHeight", { 'column': '1', 'row': '2' }, { 'width': '50', 'height': '70' });
     58    testPosition("constrainedGridUndefinedHeight", { 'column': '1', 'row': '3' }, { 'width': '50', 'height': '50' });
     59    testPosition("constrainedGridUndefinedHeight", { 'column': '1', 'row': '4' }, { 'width': '50', 'height': '65' });
     60    testPosition("constrainedGridUndefinedHeight", { 'column': '1', 'row': '5' }, { 'width': '50', 'height': '30' });
     61
     62    testPosition("constrainedGridUndefinedHeight", { 'column': '2', 'row': '1' }, { 'width': '40', 'height': '70' });
     63    testPosition("constrainedGridUndefinedHeight", { 'column': '2', 'row': '2' }, { 'width': '40', 'height': '70' });
     64    testPosition("constrainedGridUndefinedHeight", { 'column': '2', 'row': '3' }, { 'width': '40', 'height': '50' });
     65    testPosition("constrainedGridUndefinedHeight", { 'column': '2', 'row': '4' }, { 'width': '40', 'height': '65' });
     66    testPosition("constrainedGridUndefinedHeight", { 'column': '2', 'row': '5' }, { 'width': '40', 'height': '30' });
     67
     68    testPosition("constrainedGridUndefinedHeight", { 'column': '3', 'row': '1' }, { 'width': '140', 'height': '70' });
     69    testPosition("constrainedGridUndefinedHeight", { 'column': '3', 'row': '2' }, { 'width': '140', 'height': '70' });
     70    testPosition("constrainedGridUndefinedHeight", { 'column': '3', 'row': '3' }, { 'width': '140', 'height': '50' });
     71    testPosition("constrainedGridUndefinedHeight", { 'column': '3', 'row': '4' }, { 'width': '140', 'height': '65' });
     72    testPosition("constrainedGridUndefinedHeight", { 'column': '3', 'row': '5' }, { 'width': '140', 'height': '10' });
     73
     74    testPosition("constrainedGridUndefinedHeight", { 'column': '4', 'row': '1' }, { 'width': '50', 'height': '70' });
     75    testPosition("constrainedGridUndefinedHeight", { 'column': '4', 'row': '2' }, { 'width': '50', 'height': '70' });
     76    testPosition("constrainedGridUndefinedHeight", { 'column': '4', 'row': '3' }, { 'width': '50', 'height': '50' });
     77    testPosition("constrainedGridUndefinedHeight", { 'column': '4', 'row': '4' }, { 'width': '50', 'height': '65' });
     78    testPosition("constrainedGridUndefinedHeight", { 'column': '4', 'row': '5' }, { 'width': '50', 'height': '30' });
     79
     80    testPosition("constrainedGridUndefinedHeight", { 'column': '10', 'row': '15' }, { 'width': '40', 'height': '30' });
     81
    5582    gridItem = document.getElementById("unconstrainedGrid").firstChild;
    5683    testPosition("unconstrainedGrid", { 'column': '1', 'row': '1' }, { 'width': '50', 'height': '70' });
    … …  
    87114
    88115<div class="constrainedContainer">
    89     <div class="grid gridFixedContent" id="constrainedGrid"><div class="sizedToGridArea">XXXX XXXX XXXX</div></div>
     116    <div class="grid gridFixedContent" id="constrainedGrid" style="height: 100%"><div class="sizedToGridArea">XXXX XXXX XXXX</div></div>
     117</div>
     118
     119<div class="constrainedContainer">
     120    <div class="grid gridFixedContent" id="constrainedGridUndefinedHeight"><div class="sizedToGridArea">XXXX XXXX XXXX</div></div>
    90121</div>
    91122

  • trunk/LayoutTests/fast/css-grid-layout/minmax-max-content-resolution-rows-expected.txt

    r140583 r164609  
    11Test that resolving minmax function with max-content on grid items works properly.
    22
     3XX XX XX
     4PASS
    35XX XX XX
    46PASS
    … …  
    79XX XX XX XX XX XX XX XX
    810PASS
     11XX XX XX XX XX XX XX XX
     12PASS
    913XX XX XX
     14PASS
     15XX XX XX XX XX XX XX XX
    1016PASS
    1117XX XX XX XX XX XX XX XX
    … …  
    1723XX XX XX XX XX
    1824PASS
     25XX XX XX XX XX
     26PASS
    1927XX XX XX
    2028PASS
    2129XX XX XX XX XX
    2230PASS
     31XX XX XX XX XX
     32PASS

  • trunk/LayoutTests/fast/css-grid-layout/minmax-max-content-resolution-rows.html

    r163625 r164609  
    3434
    3535<div class="constrainedContainer">
     36    <div class="grid gridMinMaxContent" style="height: 100%">
     37        <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="30">XX XX XX</div>
     38    </div>
     39</div>
     40
     41<div class="constrainedContainer">
    3642    <div class="grid gridMinMaxContent">
    37         <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="30">XX XX XX</div>
     43        <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="50">XX XX XX</div>
    3844    </div>
    3945</div>
    … …  
    4652
    4753<div class="constrainedContainer">
    48     <div class="grid gridMinMaxContent">
     54    <div class="grid gridMinMaxContent" style="height: 100%">
    4955        <!-- The 'max' logical width ends up being smaller than the 'min' so per the spec we ignore the 'max'. -->
    5056        <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="80">XX XX XX XX XX XX XX XX</div>
     57    </div>
     58</div>
     59
     60<div class="constrainedContainer">
     61    <div class="grid gridMinMaxContent">
     62        <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="50">XX XX XX XX XX XX XX XX</div>
    5163    </div>
    5264</div>
    … …  
    6072
    6173<div style="width: 10px; height: 100px;">
     74    <div class="grid gridMinMaxContent" style="height: 100%">
     75        <!-- The 'max' logical width ends up being smaller than the 'min' so per the spec we ignore the 'max'. -->
     76        <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="80">XX XX XX XX XX XX XX XX</div>
     77    </div>
     78</div>
     79
     80<div style="width: 10px; height: 100px;">
    6281    <div class="grid gridMinMaxContent">
    6382        <!-- The 'max' logical width ends up being smaller than the 'min' so per the spec we ignore the 'max'. -->
    64         <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="80">XX XX XX XX XX XX XX XX</div>
     83        <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="50">XX XX XX XX XX XX XX XX</div>
    6584    </div>
    6685</div>
    … …  
    7998
    8099<div class="constrainedContainer">
     100    <div class="grid gridMaxMaxContent" style="height: 100%">
     101        <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="30">XX XX XX XX XX</div>
     102    </div>
     103</div>
     104
     105<div class="constrainedContainer">
    81106    <div class="grid gridMaxMaxContent">
    82         <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="30">XX XX XX XX XX</div>
     107        <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="50">XX XX XX XX XX</div>
    83108    </div>
    84109</div>
    … …  
    93118
    94119<div style="width: 100px; height: 20px">
    95     <div class="grid gridMaxMaxContent">
     120    <div class="grid gridMaxMaxContent" style="height: 100%">
    96121        <!-- The 'max' logical width ends up being smaller than the 'min' so per the spec we ignore the 'max'. -->
    97122        <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="30">XX XX XX XX XX</div>
    … …  
    99124</div>
    100125
     126<div style="width: 100px; height: 20px">
     127    <div class="grid gridMaxMaxContent">
     128        <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="50">XX XX XX XX XX</div>
     129    </div>
     130</div>
     131
    101132</body>
    102133</html>

  • trunk/LayoutTests/fast/css-grid-layout/minmax-min-content-column-resolution-rows-expected.txt

    r140198 r164609  
    11Test that resolving minmax function with min-content on grid items works properly.
    22
     3XXX XXX
     4PASS
    35XXX XXX
    46PASS
    … …  
    79XX XX XX XX XX XX
    810PASS
     11XX XX XX XX XX XX
     12PASS
    913XXX XXX
     14PASS
     15XX XX XX XX XX XX
    1016PASS
    1117XX XX XX XX XX XX

  • trunk/LayoutTests/fast/css-grid-layout/minmax-min-content-column-resolution-rows.html

    r163625 r164609  
    3030
    3131<div class="constrainedContainer">
     32    <div class="grid gridMinMinContent" style="height: 100%">
     33        <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="20">XXX XXX</div>
     34    </div>
     35</div>
     36
     37<div class="constrainedContainer">
    3238    <div class="grid gridMinMinContent">
    33         <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="20">XXX XXX</div>
     39        <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="40">XXX XXX</div>
    3440    </div>
    3541</div>
    … …  
    4248
    4349<div class="constrainedContainer">
     50    <div class="grid gridMinMinContent" style="height: 100%">
     51        <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="60">XX XX XX XX XX XX</div>
     52    </div>
     53</div>
     54
     55<div class="constrainedContainer">
    4456    <div class="grid gridMinMinContent">
    45         <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="60">XX XX XX XX XX XX</div>
     57        <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="40">XX XX XX XX XX XX</div>
    4658    </div>
    4759</div>
    … …  
    5567
    5668<div style="width: 30px; height: 100px">
     69    <div class="grid gridMinMinContent" style="height: 100%">
     70        <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="60">XX XX XX XX XX XX</div>
     71    </div>
     72</div>
     73
     74<div style="width: 30px; height: 100px">
    5775    <div class="grid gridMinMinContent">
    58         <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="60">XX XX XX XX XX XX</div>
     76        <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="40">XX XX XX XX XX XX</div>
    5977    </div>
    6078</div>

  • trunk/LayoutTests/fast/css-grid-layout/minmax-spanning-resolution-rows-expected.txt

    r146482 r164609  
    2727XXXXX XXXXX XXXXX
    2828PASS
     29XXXXX XXXXX XXXXX
     30PASS
     31XXXXX XXXXX XXXXX XXXXX XXXXX
     32PASS
    2933XXXXX XXXXX XXXXX XXXXX XXXXX
    3034PASS
    3135XXXXX XXXXX XXXXX
     36PASS
     37XXXXX XXXXX XXXXX
     38PASS
     39XXXXX XXXXX XXXXX XXXXX XXXXX
    3240PASS
    3341XXXXX XXXXX XXXXX XXXXX XXXXX

  • trunk/LayoutTests/fast/css-grid-layout/minmax-spanning-resolution-rows.html

    r163625 r164609  
    143143
    144144<div class="constrainedContainer">
    145     <div class="grid gridMinMaxMin">
    146         <div class="sizedToGridArea bothRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXXX XXXXX</div>
    147         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="15"></div>
    148         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="15"></div>
    149     </div>
    150 </div>
    151 
    152 <div class="constrainedContainer">
    153     <div class="grid gridMinMaxMin">
    154         <div class="sizedToGridArea bothRowBothColumn" data-expected-width="150" data-expected-height="30">XXXXX XXXXX XXXXX XXXXX XXXXX</div>
    155         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="15"></div>
    156         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="15"></div>
    157         <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="15"></div>
    158         <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="100" data-expected-height="15"></div>
    159     </div>
    160 </div>
    161 
    162 <!-- Allow the extra logical space distribution to occur. -->
    163 <div style="width: 50px; height: 60px">
    164     <div class="grid gridMinMaxMin">
     145    <div class="grid gridMinMaxMin" style="height: 100%">
     146        <div class="sizedToGridArea bothRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXXX XXXXX</div>
     147        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="15"></div>
     148        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="15"></div>
     149    </div>
     150</div>
     151
     152<div class="constrainedContainer">
     153    <div class="grid gridMinMaxMin">
     154        <div class="sizedToGridArea bothRowFirstColumn" data-expected-width="50" data-expected-height="190">XXXXX XXXXX XXXXX</div>
     155        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
     156        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="140"></div>
     157    </div>
     158</div>
     159
     160<div class="constrainedContainer">
     161    <div class="grid gridMinMaxMin" style="height: 100%">
     162        <div class="sizedToGridArea bothRowBothColumn" data-expected-width="150" data-expected-height="30">XXXXX XXXXX XXXXX XXXXX XXXXX</div>
     163        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="15"></div>
     164        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="15"></div>
     165        <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="15"></div>
     166        <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="100" data-expected-height="15"></div>
     167    </div>
     168</div>
     169
     170<div class="constrainedContainer">
     171    <div class="grid gridMinMaxMin">
     172        <div class="sizedToGridArea bothRowBothColumn" data-expected-width="150" data-expected-height="190">XXXXX XXXXX XXXXX XXXXX XXXXX</div>
     173        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
     174        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="140"></div>
     175        <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="50"></div>
     176        <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="100" data-expected-height="140"></div>
     177    </div>
     178</div>
     179
     180<!-- Allow the extra logical space distribution to occur. -->
     181<div style="width: 50px; height: 60px">
     182    <div class="grid gridMinMaxMin" style="height: 100%">
    165183        <div class="sizedToGridArea bothRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX</div>
    166184        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
    … …  
    171189<div style="width: 50px; height: 60px">
    172190    <div class="grid gridMinMaxMin">
     191        <div class="sizedToGridArea bothRowFirstColumn" data-expected-width="50" data-expected-height="190">XXXXX XXXXX XXXXX</div>
     192        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
     193        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="140"></div>
     194    </div>
     195</div>
     196
     197<div style="width: 50px; height: 60px">
     198    <div class="grid gridMinMaxMin" style="height: 100%">
    173199        <div class="sizedToGridArea bothRowBothColumn" data-expected-width="150" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX</div>
    174200        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
    … …  
    179205</div>
    180206
     207<div style="width: 50px; height: 60px">
     208    <div class="grid gridMinMaxMin">
     209        <div class="sizedToGridArea bothRowBothColumn" data-expected-width="150" data-expected-height="190">XXXXX XXXXX XXXXX XXXXX XXXXX</div>
     210        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
     211        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="140"></div>
     212        <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="50"></div>
     213        <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="100" data-expected-height="140"></div>
     214    </div>
     215</div>
     216
    181217<div class="unconstrainedContainer">
    182218    <div class="grid gridMinMaxMin">

  • trunk/Source/WebCore/ChangeLog

    r164608 r164609  
     12014-02-24  Javier Fernandez  <jfernandez@igalia.com>
     2
     3        [CSS Grid Layout] handle undefined RemainingSpace in computeUsedBreadthOfGridTracks algorithm
     4        https://bugs.webkit.org/show_bug.cgi?id=128372
     5
     6        Reviewed by David Hyatt.
     7
     8        From Blink r165692 by <svillar@igalia.com>
     9
     10        The spec defines a different code path for the computeUsedBreadthOfGridTracks algorithm
     11        http://dev.w3.org/csswg/css-grid/#function-ComputeUsedBreadthOfGridTracks.
     12
     13        Basically the track breadth is different when the available size is undefined and thus,
     14        cannot be taken into account during the computations.
     15        The available size is undefined whenever the height is auto or the grid element has a
     16        shrink-to-fit behavior.
     17
     18        It was also renamed the function to match the specs so the function name starts with
     19        'compute' instead of 'computed'.
     20
     21        No new tests, but added new cases to some of them.
     22
     23        * rendering/RenderGrid.cpp:
     24        (WebCore::RenderGrid::computeIntrinsicLogicalWidths):
     25        (WebCore::RenderGrid::computeUsedBreadthOfGridTracks):
     26        (WebCore::gridElementIsShrinkToFit):
     27        (WebCore::RenderGrid::computeNormalizedFractionBreadth):
     28        (WebCore::RenderGrid::layoutGridItems):
     29        * rendering/RenderGrid.h:
     30
    1312014-02-24  Roger Fong  <roger_fong@apple.com>
    232

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

    r164214 r164609  
    223223    GridSizingData sizingData(gridColumnCount(), gridRowCount());
    224224    LayoutUnit availableLogicalSpace = 0;
    225     const_cast<RenderGrid*>(this)->computedUsedBreadthOfGridTracks(ForColumns, sizingData, availableLogicalSpace);
     225    const_cast<RenderGrid*>(this)->computeUsedBreadthOfGridTracks(ForColumns, sizingData, availableLogicalSpace);
    226226
    227227    for (size_t i = 0; i < sizingData.columnTracks.size(); ++i) {
    … …  
    258258}
    259259
    260 void RenderGrid::computedUsedBreadthOfGridTracks(GridTrackSizingDirection direction, GridSizingData& sizingData)
     260void RenderGrid::computeUsedBreadthOfGridTracks(GridTrackSizingDirection direction, GridSizingData& sizingData)
    261261{
    262262    LayoutUnit availableLogicalSpace = (direction == ForColumns) ? availableLogicalWidth() : availableLogicalHeight(IncludeMarginBorderPadding);
    263     computedUsedBreadthOfGridTracks(direction, sizingData, availableLogicalSpace);
    264 }
    265 
    266 void RenderGrid::computedUsedBreadthOfGridTracks(GridTrackSizingDirection direction, GridSizingData& sizingData, LayoutUnit& availableLogicalSpace)
     263    computeUsedBreadthOfGridTracks(direction, sizingData, availableLogicalSpace);
     264}
     265
     266bool RenderGrid::gridElementIsShrinkToFit()
     267{
     268    return isFloatingOrOutOfFlowPositioned();
     269}
     270
     271void RenderGrid::computeUsedBreadthOfGridTracks(GridTrackSizingDirection direction, GridSizingData& sizingData, LayoutUnit& availableLogicalSpace)
    267272{
    268273    Vector<GridTrack>& tracks = (direction == ForColumns) ? sizingData.columnTracks : sizingData.rowTracks;
     274    Vector<size_t> flexibleSizedTracksIndex;
    269275    sizingData.contentSizedTracksIndex.shrink(0);
     276
     277    // 1. Initialize per Grid track variables.
    270278    for (size_t i = 0; i < tracks.size(); ++i) {
    271279        GridTrack& track = tracks[i];
    … …  
    281289        if (trackSize.isContentSized())
    282290            sizingData.contentSizedTracksIndex.append(i);
    283     }
    284 
     291        if (trackSize.maxTrackBreadth().isFlex())
     292            flexibleSizedTracksIndex.append(i);
     293    }
     294
     295    // 2. Resolve content-based TrackSizingFunctions.
    285296    if (!sizingData.contentSizedTracksIndex.isEmpty())
    286297        resolveContentBasedTrackSizingFunctions(direction, sizingData);
    … …  
    291302    }
    292303
    293     if (availableLogicalSpace <= 0)
     304    const bool hasUndefinedRemainingSpace = (direction == ForRows) ? style().logicalHeight().isAuto() : gridElementIsShrinkToFit();
     305
     306    if (!hasUndefinedRemainingSpace && availableLogicalSpace <= 0)
    294307        return;
    295308
     309    // 3. Grow all Grid tracks in GridTracks from their UsedBreadth up to their MaxBreadth value until
     310    // availableLogicalSpace (RemainingSpace in the specs) is exhausted.
    296311    const size_t tracksSize = tracks.size();
    297     Vector<GridTrack*> tracksForDistribution(tracksSize);
    298     for (size_t i = 0; i < tracksSize; ++i)
    299         tracksForDistribution[i] = tracks.data() + i;
    300 
    301     distributeSpaceToTracks(tracksForDistribution, 0, &GridTrack::usedBreadth, &GridTrack::growUsedBreadth, sizingData, availableLogicalSpace);
     312    if (!hasUndefinedRemainingSpace) {
     313        Vector<GridTrack*> tracksForDistribution(tracksSize);
     314        for (size_t i = 0; i < tracksSize; ++i)
     315            tracksForDistribution[i] = tracks.data() + i;
     316
     317        distributeSpaceToTracks(tracksForDistribution, 0, &GridTrack::usedBreadth, &GridTrack::growUsedBreadth, sizingData, availableLogicalSpace);
     318    } else {
     319        for (size_t i = 0; i < tracksSize; ++i)
     320            tracks[i].m_usedBreadth = tracks[i].m_maxBreadth;
     321    }
     322
     323    if (flexibleSizedTracksIndex.isEmpty())
     324        return;
    302325
    303326    // 4. Grow all Grid tracks having a fraction as the MaxTrackSizingFunction.
    304 
    305     // FIXME: Handle the case where RemainingSpace is not defined.
    306     double normalizedFractionBreadth = computeNormalizedFractionBreadth(tracks, direction, availableLogicalSpace);
    307     for (size_t i = 0; i < tracksSize; ++i) {
    308         const GridTrackSize& trackSize = gridTrackSize(direction, i);
    309         if (!trackSize.maxTrackBreadth().isFlex())
    310             continue;
    311 
    312         tracks[i].m_usedBreadth = std::max<LayoutUnit>(tracks[i].m_usedBreadth, normalizedFractionBreadth * trackSize.maxTrackBreadth().flex());
     327    double normalizedFractionBreadth = 0;
     328    if (!hasUndefinedRemainingSpace)
     329        normalizedFractionBreadth = computeNormalizedFractionBreadth(tracks, GridSpan(0, tracks.size() - 1), direction, availableLogicalSpace);
     330    else {
     331        for (size_t i = 0; i < flexibleSizedTracksIndex.size(); ++i) {
     332            const size_t trackIndex = flexibleSizedTracksIndex[i];
     333            const GridTrackSize& trackSize = gridTrackSize(direction, trackIndex);
     334            normalizedFractionBreadth = std::max(normalizedFractionBreadth, tracks[trackIndex].m_usedBreadth / trackSize.maxTrackBreadth().flex());
     335        }
     336
     337        for (size_t i = 0; i < flexibleSizedTracksIndex.size(); ++i) {
     338            GridIterator iterator(m_grid, direction, flexibleSizedTracksIndex[i]);
     339            while (RenderBox* gridItem = iterator.nextGridItem()) {
     340                const GridCoordinate coordinate = cachedGridCoordinate(gridItem);
     341                const GridSpan span = (direction == ForColumns) ? coordinate.columns : coordinate.rows;
     342
     343                // Do not include already processed items.
     344                if (i > 0 && span.initialPositionIndex <= flexibleSizedTracksIndex[i - 1])
     345                    continue;
     346
     347                double itemNormalizedFlexBreadth = computeNormalizedFractionBreadth(tracks, span, direction, maxContentForChild(gridItem, direction, sizingData.columnTracks));
     348                normalizedFractionBreadth = std::max(normalizedFractionBreadth, itemNormalizedFlexBreadth);
     349            }
     350        }
     351    }
     352
     353    for (size_t i = 0; i < flexibleSizedTracksIndex.size(); ++i) {
     354        const size_t trackIndex = flexibleSizedTracksIndex[i];
     355        const GridTrackSize& trackSize = gridTrackSize(direction, trackIndex);
     356
     357        tracks[trackIndex].m_usedBreadth = std::max<LayoutUnit>(tracks[trackIndex].m_usedBreadth, normalizedFractionBreadth * trackSize.maxTrackBreadth().flex());
    313358    }
    314359}
    … …  
    351396}
    352397
    353 double RenderGrid::computeNormalizedFractionBreadth(Vector<GridTrack>& tracks, GridTrackSizingDirection direction, LayoutUnit availableLogicalSpace) const
     398double RenderGrid::computeNormalizedFractionBreadth(Vector<GridTrack>& tracks, const GridSpan& tracksSpan, GridTrackSizingDirection direction, LayoutUnit availableLogicalSpace) const
    354399{
    355400    // |availableLogicalSpace| already accounts for the used breadths so no need to remove it here.
    356401
    357402    Vector<GridTrackForNormalization> tracksForNormalization;
    358     for (size_t i = 0; i < tracks.size(); ++i) {
     403    for (size_t i = tracksSpan.initialPositionIndex; i <= tracksSpan.finalPositionIndex; ++i) {
    359404        const GridTrackSize& trackSize = gridTrackSize(direction, i);
    360405        if (!trackSize.maxTrackBreadth().isFlex())
    … …  
    364409    }
    365410
    366     // FIXME: Ideally we shouldn't come here without any <flex> grid track.
    367     if (tracksForNormalization.isEmpty())
    368         return LayoutUnit();
     411    // The function is not called if we don't have <flex> grid tracks
     412    ASSERT(!tracksForNormalization.isEmpty());
    369413
    370414    std::sort(tracksForNormalization.begin(), tracksForNormalization.end(),
    … …  
    749793
    750794    GridSizingData sizingData(gridColumnCount(), gridRowCount());
    751     computedUsedBreadthOfGridTracks(ForColumns, sizingData);
     795    computeUsedBreadthOfGridTracks(ForColumns, sizingData);
    752796    ASSERT(tracksAreWiderThanMinTrackBreadth(ForColumns, sizingData.columnTracks));
    753     computedUsedBreadthOfGridTracks(ForRows, sizingData);
     797    computeUsedBreadthOfGridTracks(ForRows, sizingData);
    754798    ASSERT(tracksAreWiderThanMinTrackBreadth(ForRows, sizingData.rowTracks));
    755799

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

    r163547 r164609  
    7373    class GridSizingData;
    7474    enum GridTrackSizingDirection { ForColumns, ForRows };
    75     void computedUsedBreadthOfGridTracks(GridTrackSizingDirection, GridSizingData&);
    76     void computedUsedBreadthOfGridTracks(GridTrackSizingDirection, GridSizingData&, LayoutUnit& availableLogicalSpace);
     75    void computeUsedBreadthOfGridTracks(GridTrackSizingDirection, GridSizingData&);
     76    void computeUsedBreadthOfGridTracks(GridTrackSizingDirection, GridSizingData&, LayoutUnit& availableLogicalSpace);
     77    bool gridElementIsShrinkToFit();
    7778    LayoutUnit computeUsedBreadthOfMinLength(GridTrackSizingDirection, const GridLength&) const;
    7879    LayoutUnit computeUsedBreadthOfMaxLength(GridTrackSizingDirection, const GridLength&, LayoutUnit usedBreadth) const;
    … …  
    102103    void distributeSpaceToTracks(Vector<GridTrack*>&, Vector<GridTrack*>* tracksForGrowthAboveMaxBreadth, AccumulatorGetter, AccumulatorGrowFunction, GridSizingData&, LayoutUnit& availableLogicalSpace);
    103104
    104     double computeNormalizedFractionBreadth(Vector<GridTrack>&, GridTrackSizingDirection, LayoutUnit availableLogicalSpace) const;
     105    double computeNormalizedFractionBreadth(Vector<GridTrack>&, const GridSpan& tracksSpan, GridTrackSizingDirection, LayoutUnit availableLogicalSpace) const;
    105106
    106107    const GridTrackSize& gridTrackSize(GridTrackSizingDirection, size_t) const;
Note: See TracChangeset for help on using the changeset viewer.