Changeset 198486 in webkit


Ignore:
Timestamp:
Mar 21, 2016 3:42:33 AM (8 years ago)
Author:
svillar@igalia.com
Message:

[css-grid] Fix percentage tracks' size computation in grids with gutters
​https://bugs.webkit.org/show_bug.cgi?id=153825

Reviewed by Darin Adler.

Source/WebCore:

The track sizing algorithm is passed an available size
(freeSpace in the code) where to size the tracks. The total size of the grid
gutters was pre-removed from that available size because we cannot use it to size
the tracks. However that available size is also used to compute the size of
percentage tracks. As we're removing the size of the gutters, the base size for
percentage computations is smaller than it should be.

  • rendering/RenderGrid.cpp:

(WebCore::RenderGrid::computeUsedBreadthOfGridTracks):

LayoutTests:

  • fast/css-grid-layout/grid-gutters-and-flex-content-expected.txt:
  • fast/css-grid-layout/grid-gutters-and-flex-content.html:
  • fast/css-grid-layout/grid-gutters-and-tracks-expected.txt:
  • fast/css-grid-layout/grid-gutters-and-tracks.html:
Location:
trunk
Files:
7 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r198482 r198486  
     12016-02-03  Sergio Villar Senin  <svillar@igalia.com>
     2
     3        [css-grid] Fix percentage tracks' size computation in grids with gutters
     4        https://bugs.webkit.org/show_bug.cgi?id=153825
     5
     6        Reviewed by Darin Adler.
     7
     8        * fast/css-grid-layout/grid-gutters-and-flex-content-expected.txt:
     9        * fast/css-grid-layout/grid-gutters-and-flex-content.html:
     10        * fast/css-grid-layout/grid-gutters-and-tracks-expected.txt:
     11        * fast/css-grid-layout/grid-gutters-and-tracks.html:
     12
    1132016-03-20  Jinwoo Jeong  <jw00.jeong@samsung.com>
    214

  • trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-flex-content-expected.txt

    r190663 r198486  
    22
    33TEST COMPLETE
     4PASS
     5PASS
    46PASS
    57PASS

  • trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-flex-content.html

    r196934 r198486  
    66<script src="../../resources/js-test.js"></script>
    77<style>
    8 .gridMaxFlexContent { -webkit-grid-template: 50px / minmax(30px, 2fr); }
     8.gridPercentAndFlexContent { -webkit-grid-template: 50px / 50% minmax(30px, 2fr); }
    99.gridTwoDoubleMaxFlexContent { -webkit-grid-template: 50px / minmax(10px, 0.5fr) minmax(10px, 2fr); }
    1010.gridIgnoreSecondGridItem { -webkit-grid-template: 50px / minmax(300px, 3fr) minmax(150px, 1fr); }
    1111
    12 .gridRowsMaxFlexContent { -webkit-grid-template: minmax(30px, 2fr) / 50px; }
     12.gridRowsPercentAndFlexContent { -webkit-grid-template: minmax(30px, 2fr) 50% / 50px; }
    1313.gridRowsTwoMaxFlexContent { -webkit-grid-template: minmax(10px, 1fr) minmax(10px, 2fr) / 50px; }
    1414.gridRowsTwoDoubleMaxFlexContent { -webkit-grid-template: minmax(10px, 0.5fr) minmax(10px, 2fr) / 50px; }
    … …  
    4444</div>
    4545
     46<div style="width: 120px; height: 10px;">
     47    <div class="grid gridPercentAndFlexContent gridRowColumnGaps" data-expected-width="120" data-expected-height="50">
     48        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="60" data-expected-height="50"></div>
     49        <div class="firstRowSecondColumn" data-expected-width="41" data-expected-height="50"></div>
     50    </div>
     51</div>
     52
    4653<!-- Check that gutters do not interfere with flex content resolution for rows -->
    4754
    … …  
    5764        <div class="firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
    5865        <div class="secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
     66    </div>
     67</div>
     68
     69<div style="width: 10px;">
     70    <div class="grid gridRowsPercentAndFlexContent gridRowColumnGaps" style="height: 150px" data-expected-width="10" data-expected-height="150">
     71        <div class="firstRowFirstColumn" data-expected-width="50" data-expected-height="42"></div>
     72        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="75"></div>
    5973    </div>
    6074</div>

  • trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-tracks-expected.txt

    r190663 r198486  
    4545XX XX
    4646PASS
     47PASS
    4748XXXXX
    4849X
    … …  
    5758PASS
    5859PASS
     60PASS

  • trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-tracks.html

    r196934 r198486  
    2121.gridMultipleFixed { -webkit-grid-template: [first] 37px [foo] 57px [bar] 77px [last] / [first] 15px [foo] 25px [bar] 35px [last]; }
    2222.gridFixed100 { -webkit-grid-template: repeat(2, 100px) / repeat(2, 100px); }
     23.gridWithPercent { -webkit-grid-template: 10% 10px / 10px 20% repeat(1, 30px); }
     24.gridWithDoublePercent { -webkit-grid-template: 35% 65% / 60% 40%; }
     25
     26.fixedSizeGrid {
     27    width: 220px;
     28    height: 300px;
     29}
     30.gridFixedAutoTracks {
     31    -webkit-grid-auto-rows: 20px;
     32    -webkit-grid-auto-columns: 40px;
     33}
    2334
    2435.thirdRowThirdColumn { -webkit-grid-area: 3 / 3; }
    … …  
    101112</div>
    102113
     114<div style="position: relative">
     115    <div class="grid gridWithPercent fixedSizeGrid gridRowColumnGaps gridFixedAutoTracks" data-expected-width="220" data-expected-height="300">
     116        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="30"></div>
     117        <div class="secondRowSecondColumn" data-offset-x="33" data-offset-y="42" data-expected-width="44" data-expected-height="10"></div>
     118        <div class="thirdRowThirdColumn" data-offset-x="100" data-offset-y="64" data-expected-width="30" data-expected-height="20"></div>
     119    </div>
     120</div>
     121
    103122<!-- Check that gutters contribute to the size of spanning items. -->
    104123<div style="position: relative">
    … …  
    115134        <div style="-webkit-grid-row: first / last; -webkit-grid-column-start: 2" data-offset-x="38" data-offset-y="0" data-expected-width="25" data-expected-height="195">X XX X XX X</div>
    116135        <div style="-webkit-grid-row: 1 / 3; -webkit-grid-column: first / bar" data-offset-x="0" data-offset-y="0" data-expected-width="63" data-expected-height="106">XXX XX<br>XX<br>XXXXX</div>
     136    </div>
     137</div>
     138
     139<div style="position: relative">
     140    <div class="grid gridWithDoublePercent fixedSizeGrid gridRowColumnGaps gridFixedAutoTracks" data-expected-width="220" data-expected-height="300">
     141        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="132" data-expected-height="105"></div>
     142        <div class="secondRowSecondColumn" data-offset-x="155" data-offset-y="117" data-expected-width="88" data-expected-height="195"></div>
     143        <div class="secondRowBothColumn" data-offset-x="0" data-offset-y="117" data-expected-width="243" data-expected-height="195"></div>
    117144    </div>
    118145</div>

  • trunk/Source/WebCore/ChangeLog

    r198484 r198486  
     12016-02-03  Sergio Villar Senin  <svillar@igalia.com>
     2
     3        [css-grid] Fix percentage tracks' size computation in grids with gutters
     4        https://bugs.webkit.org/show_bug.cgi?id=153825
     5
     6        Reviewed by Darin Adler.
     7
     8        The track sizing algorithm is passed an available size
     9        (freeSpace in the code) where to size the tracks. The total size of the grid
     10        gutters was pre-removed from that available size because we cannot use it to size
     11        the tracks. However that available size is also used to compute the size of
     12        percentage tracks. As we're removing the size of the gutters, the base size for
     13        percentage computations is smaller than it should be.
     14
     15        * rendering/RenderGrid.cpp:
     16        (WebCore::RenderGrid::computeUsedBreadthOfGridTracks):
     17
    1182016-03-21  Carlos Garcia Campos  <cgarcia@igalia.com>
    219

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

    r198399 r198486  
    504504    sizingData.contentSizedTracksIndex.shrink(0);
    505505
    506     const LayoutUnit maxSize = initialFreeSpace.valueOr(0);
     506    LayoutUnit maxSize = initialFreeSpace.valueOr(0);
     507    // Grid gutters were removed from freeSpace by the caller (if freeSpace is definite),
     508    // but we must use them to compute relative (i.e. percentages) sizes.
     509    if (initialFreeSpace)
     510        maxSize += guttersSize(direction, direction == ForColumns ? gridColumnCount() : gridRowCount());
     511
    507512    // 1. Initialize per Grid track variables.
    508513    for (unsigned i = 0; i < tracks.size(); ++i) {
Note: See TracChangeset for help on using the changeset viewer.