Ignore:
Timestamp:
Feb 24, 2014, 2:29:20 PM (12 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:
File:
1 edited

Legend:

Unmodified
Added
Removed

  • 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>
Note: See TracChangeset for help on using the changeset viewer.