Ignore:
Timestamp:
Sep 29, 2015, 5:32:48 AM (10 years ago)
Author:
jfernandez@igalia.com
Message:

[CSS Grid Layout] Flex tracks sizing alg must handle 0fr values
​https://bugs.webkit.org/show_bug.cgi?id=148944

Reviewed by Darin Adler.

Source/WebCore:

We don't allow 0 as flexible size value, which is not following current
specs; it just states that it must be a positive value. This patch
adds such change in the parser but some additional logic must be added
as well to handle 0 values during the flex tracks sizing algorithm.

The old algorithm didn't take 0 values into account, so there is the risk
of division by zero. Additionally, it was not handling fraction values
in the best way. The last versions of the spec changed this algorithm in
order to handle fraction values so that they don't cause exponential
grow of tracks using values bigger than 1.

This patch implements also such new algorithm, so we can deal not only
with 0 values, but managing fraction values properly.

No new tests, just some additional test cases and some of them rebaselined.

  • rendering/RenderGrid.cpp:

(WebCore::normalizedFlexFraction):
(WebCore::RenderGrid::computeUsedBreadthOfGridTracks):
(WebCore::RenderGrid::computeFlexFactorUnitSize): Added.
(WebCore::RenderGrid::findFlexFactorUnitSize): Added.
(WebCore::RenderGrid::GridTrackForNormalization): Deleted.
(WebCore::RenderGrid::computeNormalizedFractionBreadth): Deleted.

  • rendering/RenderGrid.h:

LayoutTests:

Allow 0 as flex factor value and implement the new flex track sizing algorithm.

  • fast/css-grid-layout/flex-and-minmax-content-resolution-rows.html: Updated some cases.
  • fast/css-grid-layout/flex-content-resolution-columns-expected.txt:
  • fast/css-grid-layout/flex-content-resolution-columns.html: Added some new cases.
  • fast/css-grid-layout/flex-content-resolution-rows-expected.txt:
  • fast/css-grid-layout/flex-content-resolution-rows.html: Added some new cases.
File:
1 edited

Legend:

Unmodified
Added
Removed

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

    r168416 r190308  
    77    -webkit-grid-template-rows: minmax(1fr, 50px);
    88}
     9.gridZeroFlexContent {
     10    -webkit-grid-template-columns: 50px;
     11    -webkit-grid-template-rows: minmax(1fr, 0px);
     12}
    913.gridMaxFlexContent {
    1014    -webkit-grid-template-columns: 50px;
    … …  
    1822    -webkit-grid-template-columns: 50px;
    1923    -webkit-grid-template-rows: minmax(10px, 0.5fr) minmax(10px, 2fr);
     24}
     25.gridRespectBaseSize {
     26    -webkit-grid-template-columns: 50px;
     27    -webkit-grid-template-rows: minmax(75px, 1fr) minmax(0px, 2fr);
     28}
     29.gridRespectProportions {
     30    -webkit-grid-template-columns: 50px;
     31    -webkit-grid-template-rows: minmax(25px, .25fr) minmax(0px, .5fr) minmax(0px, 2fr);
     32}
     33.gridRespectBaseSizeProportions {
     34    -webkit-grid-template-columns: 50px;
     35    -webkit-grid-template-rows: minmax(50px, .25fr) minmax(0px, .5fr) minmax(0px, 1fr);
     36}
     37.gridRespectBaseSizeBeforeProportions {
     38    -webkit-grid-template-columns: 50px;
     39    -webkit-grid-template-rows: minmax(50px, .25fr) minmax(0px, .5fr) minmax(0px, 1fr);
     40}
     41.thirdRowFirstColumn {
     42    background-color: yellow;
     43    -webkit-grid-column: 1;
     44    -webkit-grid-row: 3;
    2045}
    2146</style>
    … …  
    3257
    3358<div style="height: 0px">
     59    <div class="grid gridZeroFlexContent">
     60        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="0"></div>
     61    </div>
     62</div>
     63
     64<div style="height: 0px">
    3465    <div class="grid gridMinFlexContent">
    3566        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
    … …  
    138169</div>
    139170
     171<!-- We normalize fraction flex factors to 1, so we don't keep exact proportions with >1 factors. -->
    140172<div class="constrainedContainer">
    141173    <div class="grid gridTwoDoubleMaxFlexContent">
    142174        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
    143         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
     175        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
    144176    </div>
    145177</div>
    … …  
    153185</div>
    154186
     187<!-- We normalize fraction flex factors to 1, so we don't keep exact proportions with >1 factors. -->
    155188<div style="width: 10px; height: 60px">
    156189    <div class="grid gridTwoDoubleMaxFlexContent">
    157190        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
    158         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
     191        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
    159192    </div>
    160193</div>
    … …  
    167200</div>
    168201
     202<!-- We normalize fraction flex factors to 1, so we don't keep exact proportions with >1 factors. -->
    169203<div style="width: 10px; height: 120px;">
    170204    <div class="grid gridTwoDoubleMaxFlexContent">
    171205        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
    172         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
     206        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
     207    </div>
     208</div>
     209
     210<!-- Flex track lengths must be proportional to their flex factors.. -->
     211<div style="width: 10px; height: 275px;">
     212    <div class="grid gridRespectProportions" style="height: 100%;">
     213        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="25"></div>
     214        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
     215        <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="200"></div>
     216    </div>
     217</div>
     218
     219<div style="width: 10px; height: 275px;">
     220    <div class="grid gridRespectProportions">
     221        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="25"></div>
     222        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="13"></div>
     223        <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
     224    </div>
     225</div>
     226
     227<!-- Flex track lengths must be proportional but still respecting their base sizes. -->
     228<div style="width: 10px; height: 350px;">
     229    <div class="grid gridRespectBaseSizeProportions" style="height: 100%;">
     230        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
     231        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="100"></div>
     232        <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="200"></div>
     233    </div>
     234</div>
     235
     236<div style="width: 10px; height: 350px;">
     237    <div class="grid gridRespectBaseSizeProportions">
     238        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
     239        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="25"></div>
     240        <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
     241    </div>
     242</div>
     243
     244<!-- Not enough space to repsect proportions, because minTrackBreadh it's a harder requirement -->
     245<div style="width: 10px; height: 275px;">
     246    <div class="grid gridRespectBaseSizeBeforeProportions" style="height: 100%;">
     247        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
     248        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="75"></div>
     249        <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="150"></div>
     250    </div>
     251</div>
     252
     253<div style="width: 10px; height: 275px;">
     254    <div class="grid gridRespectBaseSizeBeforeProportions">
     255        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
     256        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="25"></div>
     257        <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
    173258    </div>
    174259</div>
Note: See TracChangeset for help on using the changeset viewer.