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