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