⚠ Archived content — this site is no longer maintained.   Current WebKit documentation is at docs.webkit.org.

Changeset 238488 in webkit


Ignore:
Timestamp:
Nov 26, 2018, 12:06:52 AM (8 years ago)
Author:
Manuel Rego Casasnovas
Message:

[css-grid] Fix grid container sizing under min-content height
​https://bugs.webkit.org/show_bug.cgi?id=191889

Reviewed by Javier Fernandez.

LayoutTests/imported/w3c:

Imported tests from WPT.

  • web-platform-tests/css/css-grid/grid-model/grid-container-sizing-constraints-001-expected.txt: Added.
  • web-platform-tests/css/css-grid/grid-model/grid-container-sizing-constraints-001.html: Added.
  • web-platform-tests/css/css-grid/grid-model/w3c-import.log:

Source/WebCore:

The spec is quite clear
(​https://drafts.csswg.org/css-sizing/#valdef-width-min-content):

"min-content

If specified for the inline axis, use the min-content inline size;
otherwise behaves as the property’s initial value."

So if a grid container has "height: min-content" it should behave
the same than with "height: auto".

The patch removes computeIntrinsicLogicalContentHeightUsing() in
RenderGrid as we don't need a custom one anymore.
We can also get rid of m_minContentHeight and m_maxContentHeight
attributes that were only used for this logic.

Test: fast/css-grid-layout/grid-track-sizing-with-orthogonal-flows.html

fast/css-grid-layout/maximize-tracks-definite-indefinite-height.html
imported/w3c/web-platform-tests/css/css-grid/grid-model/grid-container-sizing-constraints-001.html

  • rendering/RenderGrid.cpp:

(WebCore::RenderGrid::layoutBlock):
(WebCore::RenderGrid::computeIntrinsicLogicalWidths const):
(WebCore::RenderGrid::computeTrackSizesForIndefiniteSize const):

  • rendering/RenderGrid.h:

LayoutTests:

Update tests results to the new behavior.
Also modified a little bit the test to keep them in sync with Blink versions.

  • fast/css-grid-layout/grid-track-sizing-with-orthogonal-flows-expected.txt:
  • fast/css-grid-layout/grid-track-sizing-with-orthogonal-flows.html:
  • fast/css-grid-layout/maximize-tracks-definite-indefinite-height.html:
Location:
trunk
Files:
2 added
9 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r238487 r238488  
     12018-11-26  Manuel Rego Casasnovas  <rego@igalia.com>
     2
     3        [css-grid] Fix grid container sizing under min-content height
     4        https://bugs.webkit.org/show_bug.cgi?id=191889
     5
     6        Reviewed by Javier Fernandez.
     7
     8        Update tests results to the new behavior.
     9        Also modified a little bit the test to keep them in sync with Blink versions.
     10
     11        * fast/css-grid-layout/grid-track-sizing-with-orthogonal-flows-expected.txt:
     12        * fast/css-grid-layout/grid-track-sizing-with-orthogonal-flows.html:
     13        * fast/css-grid-layout/maximize-tracks-definite-indefinite-height.html:
     14
    1152018-11-25  Ryan Haddad  <ryanhaddad@apple.com>
    216

  • trunk/LayoutTests/fast/css-grid-layout/grid-track-sizing-with-orthogonal-flows-expected.txt

    r203501 r238488  
     1
     2PASS .grid 1
     3PASS .grid 2
     4PASS .grid 3
     5PASS .grid 4
     6PASS .grid 5
     7PASS .grid 6
     8PASS .grid 7
     9PASS .grid 8
     10PASS .grid 9
     11PASS .grid 10
     12PASS .grid 11
     13PASS .grid 12
     14PASS .grid 13
     15PASS .grid 14
     16PASS .grid 15
     17PASS .grid 16
     18PASS .grid 17
    119This test checks that grid tracks are sizing correctly with orthogonal flows, so grid container's intrinsic size is computed accordingly.
    220
    … …  
    826X XXX XX XXXXX XX XXX X XXXX X XX
    927XXXX XX X XX XXX
    10 PASS
    1128Grid width under min-content constrain and fixed height.
    1229All grid items sized with min-{width, height} auto.
    … …  
    1633X XXX XX XXXXX XX XXX X XXXX X XX
    1734XXXX XX X XX XXX
    18 PASS
    1935Grid width under max-content constrain and fixed height.
    2036All grid items sized with min-{width, height} auto.
    … …  
    2440X XXX XX XXXXX XX XXX X XXXX X XX
    2541XXXX XX X XX XXX
    26 PASS
    2742Grid width under fit-content constrain and fixed height.
    2843All grid items sized with min-{width, height} auto.
    … …  
    3247X XXX XX XXXXX XX XXX X XXXX X XX
    3348XXXX XX X XX XXX
    34 PASS
    3549Grid with fixed width and height under min-content constrain.
    3650All grid items sized with min-{width, height} auto.
    … …  
    4054X XXX XX XXXXX XX XXX X XXXX X XX
    4155XXXX XX X XX XXX
    42 PASS
    4356Grid with fixed width and height under min-content constrain.
    4457All grid items sized with min-{width, height} auto.
    … …  
    4861X XXX XX XXXXX XX XXX X XXXX X XX
    4962XXXX XX X XX XXX
    50 PASS
    5163Grid with fixed width and height under min-content constrain.
    5264All grid items sized with min-{width, height} auto.
    … …  
    5668X XXX XX XXXXX XX XXX X XXXX X XX
    5769XXXX XX X XX XXX
    58 PASS
    5970Grid using fixed width and height.
    6071All grid items sized with min-width: 0px, min-height: auto.
    … …  
    6475X XXX XX XXXXX XX XXX X XXXX X XX
    6576XXXX XX X XX XXX
    66 PASS
    6777Grid width under min-content constrain and fixed height.
    6878All grid items sized with min-width: 0px, min-height: auto.
    … …  
    7282X XXX XX XXXXX XX XXX X XXXX X XX
    7383XXXX XX X XX XXX
    74 PASS
    7584Grid width under max-content constrain and fixed height.
    7685All grid items sized with min-width: 0px, min-height: auto.
    … …  
    8089X XXX XX XXXXX XX XXX X XXXX X XX
    8190XXXX XX X XX XXX
    82 PASS
    8391Grid with fixed width and height under min-content constrain.
    8492All grid items sized with min-width: auto, min-height: 0px.
    … …  
    8896X XXX XX XXXXX XX XXX X XXXX X XX
    8997XXXX XX X XX XXX
    90 PASS
    9198Grid with fixed width and height under max-content constrain.
    9299All grid items sized with min-width: auto, min-height: 0px.
    … …  
    96103X XXX XX XXXXX XX XXX X XXXX X XX
    97104XXXX XX X XX XXX
    98 PASS
    99105Grid using fixed width and height.
    100106All grid items sized with min-width: 50px, min-height: auto.
    … …  
    104110X XXX XX XXXXX XX XXX X XXXX X XX
    105111XXXX XX X XX XXX
    106 PASS
    107112Grid width under min-content constrain and fixed height.
    108113All grid items sized with min-width: 50px, min-height: auto.
    … …  
    112117X XXX XX XXXXX XX XXX X XXXX X XX
    113118XXXX XX X XX XXX
    114 PASS
    115119Grid width under max-content constrain and fixed height.
    116120All grid items sized with min-width: 50px, min-height: auto.
    … …  
    120124X XXX XX XXXXX XX XXX X XXXX X XX
    121125XXXX XX X XX XXX
    122 PASS
    123126Grid with fixed width and height under min-content constrain.
    124127All grid items sized with min-width: auto, min-height: 50px.
    … …  
    128131X XXX XX XXXXX XX XXX X XXXX X XX
    129132XXXX XX X XX XXX
    130 PASS
    131133Grid with fixed width and height under max-content constrain.
    132134All grid items sized with min-width: auto, min-height: 50px.
    … …  
    136138X XXX XX XXXXX XX XXX X XXXX X XX
    137139XXXX XX X XX XXX
    138 PASS

  • trunk/LayoutTests/fast/css-grid-layout/grid-track-sizing-with-orthogonal-flows.html

    r216574 r238488  
    3232}
    3333</style>
    34 <script src="../../resources/check-layout.js"></script>
     34<script src="../../resources/testharness.js"></script>
     35<script src="../../resources/testharnessreport.js"></script>
     36<script src="../../resources/check-layout-th.js"></script>
    3537<body onload="checkLayout('.grid')">
     38<div id="log"></div>
    3639<p>This test checks that grid tracks are sizing correctly with orthogonal flows, so grid container's intrinsic size is computed accordingly.</p>
    3740
    … …  
    7477<div class="container">
    7578    <p>Grid with <b>fixed</b> width and height under <b>min-content</b> constrain.<br >All grid items sized with <b>min-{width, height} auto</b>.<br> Since there is enough space in the inline-axis, the orthogonal green row sets the min-content size, which is 50px because of the 5 chars line.</p>
    76     <div class="grid itemsStart contentStart min-content width300" data-expected-width="300" data-expected-height="90">
     79    <div class="grid itemsStart contentStart min-content width300" data-expected-width="300" data-expected-height="490">
    7780        <div class="firstRowFirstColumn"             data-offset-x="0"   data-offset-y="0"   data-expected-width="150" data-expected-height="10">XX XXX X XXX XX</div>
    78         <div class="verticalLR firstRowSecondColumn" data-offset-x="150" data-offset-y="0"   data-expected-width="70"  data-expected-height="50">X XXX XX XXXXX XX XXX X XXXX X XX</div>
    79         <div class="verticalLR secondRowFirstColumn" data-offset-x="0"   data-offset-y="50"  data-expected-width="40"  data-expected-height="40">XXXX XX X XX XXX</div>
     81        <div class="verticalLR firstRowSecondColumn" data-offset-x="150" data-offset-y="0"   data-expected-width="10"  data-expected-height="330">X XXX XX XXXXX XX XXX X XXXX X XX</div>
     82        <div class="verticalLR secondRowFirstColumn" data-offset-x="0"   data-offset-y="330"  data-expected-width="10"  data-expected-height="160">XXXX XX X XX XXX</div>
    8083    </div>
    8184</div>
    … …  
    130133<div class="container">
    131134    <p>Grid with <b>fixed</b> width and height under <b>min-content</b> constrain.<br> All grid items sized with <b>min-width: auto, min-height: 0px</b>.<br> Both parallel and orthogonal column tracks are 0px because of item's min-width and container's min-content constrain.</p>
    132     <div class="grid itemsStart contentStart min-content width300 " data-expected-width="300" data-expected-height="0">
     135    <div class="grid itemsStart contentStart min-content width300 " data-expected-width="300" data-expected-height="490">
    133136        <div class="minHeightZero firstRowFirstColumn"              data-offset-x="0"   data-offset-y="0"   data-expected-width="150" data-expected-height="10">XX XXX X XXX XX</div>
    134         <div class="minHeightZero verticalLR firstRowSecondColumn"  data-offset-x="150" data-offset-y="0"   data-expected-width="70"  data-expected-height="50">X XXX XX XXXXX XX XXX X XXXX X XX</div>
    135         <div class="minHeightZero verticalLR secondRowFirstColumn"  data-offset-x="0"   data-offset-y="0"   data-expected-width="40"  data-expected-height="40">XXXX XX X XX XXX</div>
     137        <div class="minHeightZero verticalLR firstRowSecondColumn"  data-offset-x="150" data-offset-y="0"   data-expected-width="10"  data-expected-height="330">X XXX XX XXXXX XX XXX X XXXX X XX</div>
     138        <div class="minHeightZero verticalLR secondRowFirstColumn"  data-offset-x="0"   data-offset-y="330"   data-expected-width="10"  data-expected-height="160">XXXX XX X XX XXX</div>
    136139    </div>
    137140</div>
    … …  
    175178<div class="container">
    176179    <p>Grid with <b>fixed</b> width and height under <b>min-content</b> constrain.<br> All grid items sized with <b>min-width: auto, min-height: 50px</b>.<br> Parallel blue row track must grow to fulfill min-height restriction, while orthogonal shrink to satisfy container's min-content constrain.</p>
    177     <div class="grid itemsStart contentStart min-content width300" data-expected-width="300" data-expected-height="100">
     180    <div class="grid itemsStart contentStart min-content width300" data-expected-width="300" data-expected-height="490">
    178181        <div class="minHeightFixed firstRowFirstColumn"             data-offset-x="0"   data-offset-y="0"   data-expected-width="150" data-expected-height="50">XX XXX X XXX XX</div>
    179         <div class="minHeightFixed verticalLR firstRowSecondColumn" data-offset-x="150" data-offset-y="0"   data-expected-width="70"  data-expected-height="50">X XXX XX XXXXX XX XXX X XXXX X XX</div>
    180         <div class="minHeightFixed verticalLR secondRowFirstColumn" data-offset-x="0"   data-offset-y="50"  data-expected-width="40"  data-expected-height="50">XXXX XX X XX XXX</div>
     182        <div class="minHeightFixed verticalLR firstRowSecondColumn" data-offset-x="150" data-offset-y="0"   data-expected-width="10"  data-expected-height="330">X XXX XX XXXXX XX XXX X XXXX X XX</div>
     183        <div class="minHeightFixed verticalLR secondRowFirstColumn" data-offset-x="0"   data-offset-y="330"  data-expected-width="10"  data-expected-height="160">XXXX XX X XX XXX</div>
    181184    </div>
    182185</div>

  • trunk/LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-height.html

    r206253 r238488  
    22
    33<link href="resources/grid.css" rel="stylesheet">
     4<link href="resources/grid-alignment.css" rel="stylesheet">
    45<link href="../css-intrinsic-dimensions/resources/height-keyword-classes.css" rel="stylesheet">
    56
    … …  
    89    grid-template-rows: minmax(0px, 100px);
    910    width: 40px;
    10 
    11     align-items: start;
    12     justify-items: start;
    1311}
    1412
    … …  
    2523<h2>Check the behavior of grids under max-content constraints.</h2>
    2624<div class="max-content max-height-35">
    27     <div class="grid" data-expected-width="40" data-expected-height="100">
     25    <div class="grid itemsStart" data-expected-width="40" data-expected-height="100">
    2826        <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XXX XX XXX</div>
    2927    </div>
    … …  
    3129
    3230<div class="max-content max-height-min-content">
    33     <div class="grid" data-expected-width="40" data-expected-height="100">
     31    <div class="grid itemsStart" data-expected-width="40" data-expected-height="100">
    3432        <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XXX X</div>
    3533    </div>
    … …  
    3735
    3836<div class="max-height-min-content">
    39     <div class="grid" data-expected-width="40" data-expected-height="100">
     37    <div class="grid itemsStart" data-expected-width="40" data-expected-height="100">
    4038        <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XXX</div>
    4139    </div>
    … …  
    4341
    4442<div class="max-content max-height-fill-available">
    45     <div class="grid" data-expected-width="40" data-expected-height="100">
     43    <div class="grid itemsStart" data-expected-width="40" data-expected-height="100">
    4644        <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XXX X XXX</div>
    4745    </div>
    … …  
    4947
    5048<div class="max-content">
    51     <div class="grid" data-expected-width="40" data-expected-height="100">
     49    <div class="grid itemsStart" data-expected-width="40" data-expected-height="100">
    5250        <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XXX XXX XX</div>
    5351    </div>
    … …  
    5856</div>
    5957
    60 <div class="grid max-content max-height-min-content" data-expected-width="40" data-expected-height="0">
     58<div class="grid max-content max-height-min-content" data-expected-width="40" data-expected-height="100">
    6159    <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XXX X</div>
    6260</div>
    6361
    64 <div class="grid max-height-min-content" data-expected-width="40" data-expected-height="0">
     62<div class="grid max-height-min-content" data-expected-width="40" data-expected-height="100">
    6563    <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XXX</div>
    6664</div>
    … …  
    7775<h2>Check the behavior of grids under min-content contstraints.</h2>
    7876<div class="min-content">
    79     <div class="grid" data-expected-width="40" data-expected-height="100">
     77    <div class="grid itemsStart" data-expected-width="40" data-expected-height="100">
    8078        <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XX XX</div>
    8179    </div>
    … …  
    8381
    8482<div class="min-content min-height-50">
    85     <div class="grid" data-expected-width="40" data-expected-height="100">
     83    <div class="grid itemsStart" data-expected-width="40" data-expected-height="100">
    8684        <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX X</div>
    8785    </div>
    … …  
    8987
    9088<div class="min-content min-height-fit-content">
    91     <div class="grid" data-expected-width="40" data-expected-height="100">
     89    <div class="grid itemsStart" data-expected-width="40" data-expected-height="100">
    9290        <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XXX XXXX</div>
    9391    </div>
    … …  
    9694<div style="height: 200px;">
    9795    <div class="min-content min-height-fill-available">
    98         <div class="grid" data-expected-width="40" data-expected-height="100">
     96        <div class="grid itemsStart" data-expected-width="40" data-expected-height="100">
    9997            <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XXXX XXXX XXX</div>
    10098        </div>
    … …  
    103101
    104102<div class="min-content min-height-min-content">
    105     <div class="grid" data-expected-width="40" data-expected-height="100">
     103    <div class="grid itemsStart" data-expected-width="40" data-expected-height="100">
    106104        <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XXX</div>
    107105    </div>
    … …  
    109107
    110108<div class="min-content min-height-35">
    111     <div class="grid" data-expected-width="40" data-expected-height="100">
     109    <div class="grid itemsStart" data-expected-width="40" data-expected-height="100">
    112110        <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XX</div>
    113111    </div>
    … …  
    115113
    116114<div class="min-content min-height-max-content">
    117     <div class="grid" data-expected-width="40" data-expected-height="100">
     115    <div class="grid itemsStart" data-expected-width="40" data-expected-height="100">
    118116        <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">X XXX X</div>
    119117    </div>
    … …  
    121119
    122120<div class="min-content min-height-50">
    123     <div class="grid" data-expected-width="40" data-expected-height="100">
     121    <div class="grid itemsStart" data-expected-width="40" data-expected-height="100">
    124122        <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XXXX XXXX XXXX XXXX</div>
    125123    </div>
    … …  
    127125
    128126<div class="min-content max-height-50">
    129     <div class="grid" data-expected-width="40" data-expected-height="100">
     127    <div class="grid itemsStart" data-expected-width="40" data-expected-height="100">
    130128        <div class="sizedToGridArea min-height-fill-available" data-expected-width="40" data-expected-height="100">XXXX X X XXXX</div>
    131129    </div>
    132130</div>
    133131
    134 <div class="grid min-content" data-expected-width="40" data-expected-height="0">
     132<div class="grid itemsStart min-content" data-expected-width="40" data-expected-height="100">
    135133    <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XX XX</div>
    136134</div>
    137135
    138 <div class="grid min-content min-height-50" data-expected-width="40" data-expected-height="50">
    139     <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX X</div>
    140 </div>
    141 
    142 <div class="grid min-content min-height-fit-content" data-expected-width="40" data-expected-height="100">
     136<div class="grid itemsStart min-content min-height-50" data-expected-width="40" data-expected-height="100">
     137    <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX X</div>
     138</div>
     139
     140<div class="grid itemsStart min-content min-height-fit-content" data-expected-width="40" data-expected-height="100">
    143141    <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XXX XXXX</div>
    144142</div>
    145143
    146144<div style="height: 200px;">
    147     <div class="grid min-content min-height-fill-available" data-expected-width="40" data-expected-height="200">
     145    <div class="grid itemsStart min-content min-height-fill-available" data-expected-width="40" data-expected-height="200">
    148146        <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XXXX XXXX XXX</div>
    149147    </div>
    150148</div>
    151149
    152 <div class="grid min-content min-height-min-content" data-expected-width="40" data-expected-height="0">
     150<div class="grid itemsStart min-content min-height-min-content" data-expected-width="40" data-expected-height="100">
    153151    <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XXX</div>
    154152</div>
    155153
    156 <div class="grid min-content min-height-35" data-expected-width="40" data-expected-height="35">
     154<div class="grid itemsStart min-content min-height-35" data-expected-width="40" data-expected-height="100">
    157155    <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XX</div>
    158156</div>
    159157
    160 <div class="grid min-content min-height-max-content" data-expected-width="40" data-expected-height="100">
     158<div class="grid itemsStart min-content min-height-max-content" data-expected-width="40" data-expected-height="100">
    161159    <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">X XXX X</div>
    162160</div>
    163161
    164 <div class="grid min-content min-height-50" data-expected-width="40" data-expected-height="50">
     162<div class="grid itemsStart min-content min-height-50" data-expected-width="40" data-expected-height="100">
    165163    <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XXXX XXXX XXXX XXXX</div>
    166164</div>
    167165
    168 <div class="grid min-content max-height-50" data-expected-width="40" data-expected-height="0">
     166<div class="grid itemsStart min-content max-height-50" data-expected-width="40" data-expected-height="50">
    169167    <div class="sizedToGridArea min-height-fill-available" data-expected-width="40" data-expected-height="100">XXXX X X XXXX</div>
    170168</div>
    … …  
    172170<br>
    173171<h2>Check the behavior of grids with definite available space.</h2>
    174 <div class="grid" style="height: 100px;" data-expected-width="40" data-expected-height="100">
     172<div class="grid itemsStart" style="height: 100px;" data-expected-width="40" data-expected-height="100">
    175173    <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XXX X</div>
    176174</div>
    177175
    178 <div class="grid max-height-35" style="height: 100px;" data-expected-width="40" data-expected-height="35">
     176<div class="grid itemsStart max-height-35" style="height: 100px;" data-expected-width="40" data-expected-height="35">
    179177    <div class="sizedToGridArea" data-expected-width="40" data-expected-height="35">XX XX</div>
    180178</div>
    181179
    182 <div class="grid min-height-50" style="height: 10px;" data-expected-width="40" data-expected-height="50">
     180<div class="grid itemsStart min-height-50" style="height: 10px;" data-expected-width="40" data-expected-height="50">
    183181    <div class="sizedToGridArea" data-expected-width="40" data-expected-height="50">XX XXXX</div>
    184182</div>
    185183
    186 <div class="grid min-height-50" style="height: 20px; data-expected-width="40" data-expected-height="50">
     184<div class="grid itemsStart min-height-50" style="height: 20px;" data-expected-width="40" data-expected-height="50">
    187185    <div class="sizedToGridArea" data-expected-width="40" data-expected-height="50">XX XXX XX XXX XX XXX</div>
    188186</div>
    189187
    190188<div style="height: 100px;">
    191     <div class="grid" style="height: 37%;" data-expected-width="40" data-expected-height="37">
     189    <div class="grid itemsStart" style="height: 37%;" data-expected-width="40" data-expected-height="37">
    192190        <div class="sizedToGridArea" data-expected-width="40" data-expected-height="37">X X X X</div>
    193191    </div>
    194     <div class="grid min-height-50" style="height: 37%;" data-expected-width="40" data-expected-height="50">
     192    <div class="grid itemsStart min-height-50" style="height: 37%;" data-expected-width="40" data-expected-height="50">
    195193        <div class="sizedToGridArea" data-expected-width="40" data-expected-height="50">XX XX XX</div>
    196194    </div>
    197     <div class="grid min-height-35" style="height: 37%;" data-expected-width="40" data-expected-height="37">
     195    <div class="grid itemsStart min-height-35" style="height: 37%;" data-expected-width="40" data-expected-height="37">
    198196        <div class="sizedToGridArea" data-expected-width="40" data-expected-height="37">XXXX</div>
    199197    </div>
    … …  
    203201<h2>Check the behavior of grids with indefinite available space.</h2>
    204202<div class="fit-content">
    205     <div class="grid" data-expected-width="40" data-expected-height="100">
     203    <div class="grid itemsStart" data-expected-width="40" data-expected-height="100">
    206204        <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XXX</div>
    207205    </div>
    208     <div class="grid min-height-35" data-expected-width="40" data-expected-height="100">
     206    <div class="grid itemsStart min-height-35" data-expected-width="40" data-expected-height="100">
    209207        <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">X XXXX X</div>
    210208    </div>
    211     <div class="grid max-height-min-content" data-expected-width="40" data-expected-height="0">
     209    <div class="grid itemsStart max-height-min-content" data-expected-width="40" data-expected-height="100">
    212210        <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XX XX</div>
    213211    </div>
    214     <div class="grid fit-content" data-expected-width="40" data-expected-height="100">
     212    <div class="grid itemsStart fit-content" data-expected-width="40" data-expected-height="100">
    215213        <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">X XX X</div>
    216214    </div>
    … …  
    218216
    219217<div class="fit-content" style="height: 125px;">
    220     <div class="grid fill-available" data-expected-width="40" data-expected-height="125">
     218    <div class="grid itemsStart fill-available" data-expected-width="40" data-expected-height="125">
    221219        <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">X XX X</div>
    222220    </div>
    … …  
    224222
    225223<div class="fit-content min-height-50">
    226     <div class="grid" data-expected-width="40" data-expected-height="100">
     224    <div class="grid itemsStart" data-expected-width="40" data-expected-height="100">
    227225        <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XXXX XX X XXX</div>
    228226    </div>
    229     <div class="grid min-height-35" data-expected-width="40" data-expected-height="100">
     227    <div class="grid itemsStart min-height-35" data-expected-width="40" data-expected-height="100">
    230228        <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XXXX X X</div>
    231229    </div>
    232     <div class="grid max-height-min-content" data-expected-width="40" data-expected-height="0">
     230    <div class="grid itemsStart max-height-min-content" data-expected-width="40" data-expected-height="100">
    233231        <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">X XXX XX</div>
    234232    </div>
    235     <div class="grid fit-content" data-expected-width="40" data-expected-height="100">
     233    <div class="grid itemsStart fit-content" data-expected-width="40" data-expected-height="100">
    236234        <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XXX XX X</div>
    237235    </div>
    … …  
    239237
    240238<div class="fit-content min-height-50" style="height: 75px;">
    241     <div class="grid fill-available" data-expected-width="40" data-expected-height="75">
    242         <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX X</div>
    243     </div>
     239  <div class="grid itemsStart fill-available" data-expected-width="40" data-expected-height="75">
     240    <div class="sizedToGridArea" data-expected-width="40" data-expected-height="75">XX X</div>
     241  </div>
    244242</div>
    245243
    246244<div style="height: 25px;">
    247     <div class="grid fit-content" data-expected-width="40" data-expected-height="25">
    248         <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX X</div>
    249     </div>
    250     <div class="grid fill-available" data-expected-width="40" data-expected-height="25">
    251         <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX X</div>
    252     </div>
    253     <div class="grid fit-content min-height-35" data-expected-width="40" data-expected-height="35">
    254         <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX X</div>
    255     </div>
    256     <div class="grid fit-content max-height-min-content" data-expected-width="40" data-expected-height="0">
    257         <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX X</div>
    258     </div>
     245  <div class="grid itemsStart fit-content" data-expected-width="40" data-expected-height="100">
     246    <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX X</div>
     247  </div>
     248  <div class="grid itemsStart fill-available" data-expected-width="40" data-expected-height="25">
     249    <div class="sizedToGridArea" data-expected-width="40" data-expected-height="25">XX X</div>
     250  </div>
     251  <div class="grid itemsStart fit-content min-height-35" data-expected-width="40" data-expected-height="100">
     252    <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX X</div>
     253  </div>
     254  <div class="grid itemsStart fit-content max-height-min-content" data-expected-width="40" data-expected-height="100">
     255    <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX X</div>
     256  </div>
    259257</div>
    260258

  • trunk/LayoutTests/imported/w3c/ChangeLog

    r238457 r238488  
     12018-11-26  Manuel Rego Casasnovas  <rego@igalia.com>
     2
     3        [css-grid] Fix grid container sizing under min-content height
     4        https://bugs.webkit.org/show_bug.cgi?id=191889
     5
     6        Reviewed by Javier Fernandez.
     7
     8        Imported tests from WPT.
     9
     10        * web-platform-tests/css/css-grid/grid-model/grid-container-sizing-constraints-001-expected.txt: Added.
     11        * web-platform-tests/css/css-grid/grid-model/grid-container-sizing-constraints-001.html: Added.
     12        * web-platform-tests/css/css-grid/grid-model/w3c-import.log:
     13
    1142018-11-23  Javier Fernandez  <jfernandez@igalia.com>
    215

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-model/w3c-import.log

    r238395 r238488  
    3131/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-rl-001-expected.html
    3232/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-rl-001.html
     33/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-model/grid-container-sizing-constraints-001.html
    3334/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-model/grid-display-grid-001-expected.xht
    3435/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-model/grid-display-grid-001.html

  • trunk/Source/WebCore/ChangeLog

    r238482 r238488  
     12018-11-26  Manuel Rego Casasnovas  <rego@igalia.com>
     2
     3        [css-grid] Fix grid container sizing under min-content height
     4        https://bugs.webkit.org/show_bug.cgi?id=191889
     5
     6        Reviewed by Javier Fernandez.
     7
     8        The spec is quite clear
     9        (https://drafts.csswg.org/css-sizing/#valdef-width-min-content):
     10          "min-content
     11             If specified for the inline axis, use the min-content inline size;
     12             otherwise behaves as the property’s initial value."
     13
     14        So if a grid container has "height: min-content" it should behave
     15        the same than with "height: auto".
     16
     17        The patch removes computeIntrinsicLogicalContentHeightUsing() in
     18        RenderGrid as we don't need a custom one anymore.
     19        We can also get rid of m_minContentHeight and m_maxContentHeight
     20        attributes that were only used for this logic.
     21
     22        Test: fast/css-grid-layout/grid-track-sizing-with-orthogonal-flows.html
     23              fast/css-grid-layout/maximize-tracks-definite-indefinite-height.html
     24              imported/w3c/web-platform-tests/css/css-grid/grid-model/grid-container-sizing-constraints-001.html
     25
     26        * rendering/RenderGrid.cpp:
     27        (WebCore::RenderGrid::layoutBlock):
     28        (WebCore::RenderGrid::computeIntrinsicLogicalWidths const):
     29        (WebCore::RenderGrid::computeTrackSizesForIndefiniteSize const):
     30        * rendering/RenderGrid.h:
     31
    1322018-11-25  Zalan Bujtas  <zalan@apple.com>
    233

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

    r238463 r238488  
    246246        // 2- Next, the track sizing algorithm resolves the sizes of the grid rows,
    247247        // using the grid column sizes calculated in the previous step.
    248         if (!hasDefiniteLogicalHeight) {
    249             m_minContentHeight = 0_lu;
    250             m_maxContentHeight = 0_lu;
    251             computeTrackSizesForIndefiniteSize(m_trackSizingAlgorithm, ForRows, *m_minContentHeight, *m_maxContentHeight);
    252             // FIXME: This should be really added to the intrinsic height in RenderBox::computeContentAndScrollbarLogicalHeightUsing().
    253             // Remove this when that is fixed.
    254             ASSERT(m_minContentHeight);
    255             ASSERT(m_maxContentHeight);
    256             LayoutUnit scrollbarHeight = scrollbarLogicalHeight();
    257             *m_minContentHeight += scrollbarHeight;
    258             *m_maxContentHeight += scrollbarHeight;
    259         } else
     248        if (!hasDefiniteLogicalHeight)
     249            computeTrackSizesForIndefiniteSize(m_trackSizingAlgorithm, ForRows);
     250        else
    260251            computeTrackSizesForDefiniteSize(ForRows, availableLogicalHeight(ExcludeMarginBorderPadding));
    261252        LayoutUnit trackBasedLogicalHeight = m_trackSizingAlgorithm.computeTrackBasedSize() + borderAndPaddingLogicalHeight() + scrollbarLogicalHeight();
    … …  
    417408    }
    418409
    419     computeTrackSizesForIndefiniteSize(algorithm, ForColumns, minLogicalWidth, maxLogicalWidth);
     410    computeTrackSizesForIndefiniteSize(algorithm, ForColumns, &minLogicalWidth, &maxLogicalWidth);
    420411
    421412    if (hadExcludedChildren) {
    … …  
    429420}
    430421
    431 void RenderGrid::computeTrackSizesForIndefiniteSize(GridTrackSizingAlgorithm& algorithm, GridTrackSizingDirection direction, LayoutUnit& minIntrinsicSize, LayoutUnit& maxIntrinsicSize) const
     422void RenderGrid::computeTrackSizesForIndefiniteSize(GridTrackSizingAlgorithm& algorithm, GridTrackSizingDirection direction, LayoutUnit* minIntrinsicSize, LayoutUnit* maxIntrinsicSize) const
    432423{
    433424    const Grid& grid = algorithm.grid();
    … …  
    438429    LayoutUnit totalGuttersSize = guttersSize(grid, direction, 0, numberOfTracks, std::nullopt);
    439430
    440     minIntrinsicSize = algorithm.minContentSize() + totalGuttersSize;
    441     maxIntrinsicSize = algorithm.maxContentSize() + totalGuttersSize;
     431    if (minIntrinsicSize)
     432        *minIntrinsicSize = algorithm.minContentSize() + totalGuttersSize;
     433    if (maxIntrinsicSize)
     434        *maxIntrinsicSize = algorithm.maxContentSize() + totalGuttersSize;
    442435
    443436    ASSERT(algorithm.tracksAreWiderThanMinTrackBreadth());
    444 }
    445 
    446 std::optional<LayoutUnit> RenderGrid::computeIntrinsicLogicalContentHeightUsing(Length logicalHeightLength, std::optional<LayoutUnit> intrinsicLogicalHeight, LayoutUnit borderAndPadding) const
    447 {
    448     if (!intrinsicLogicalHeight)
    449         return std::nullopt;
    450 
    451     if (logicalHeightLength.isMinContent())
    452         return m_minContentHeight;
    453 
    454     if (logicalHeightLength.isMaxContent())
    455         return m_maxContentHeight;
    456 
    457     if (logicalHeightLength.isFitContent()) {
    458         LayoutUnit fillAvailableExtent = containingBlock()->availableLogicalHeight(ExcludeMarginBorderPadding);
    459         return std::min(m_maxContentHeight.value_or(0), std::max(m_minContentHeight.value_or(0), fillAvailableExtent));
    460     }
    461 
    462     if (logicalHeightLength.isFillAvailable())
    463         return containingBlock()->availableLogicalHeight(ExcludeMarginBorderPadding) - borderAndPadding;
    464     ASSERT_NOT_REACHED();
    465     return std::nullopt;
    466437}
    467438

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

    r238463 r238488  
    102102    bool namedGridLinesDefinitionDidChange(const RenderStyle&) const;
    103103
    104     std::optional<LayoutUnit> computeIntrinsicLogicalContentHeightUsing(Length logicalHeightLength, std::optional<LayoutUnit> intrinsicContentHeight, LayoutUnit borderAndPadding) const override;
    105 
    106104    unsigned computeAutoRepeatTracksCount(GridTrackSizingDirection, std::optional<LayoutUnit> availableSize) const;
    107105
    … …  
    128126
    129127    void computeTrackSizesForDefiniteSize(GridTrackSizingDirection, LayoutUnit availableSpace);
    130     void computeTrackSizesForIndefiniteSize(GridTrackSizingAlgorithm&, GridTrackSizingDirection, LayoutUnit& minIntrinsicSize, LayoutUnit& maxIntrinsicSize) const;
     128    void computeTrackSizesForIndefiniteSize(GridTrackSizingAlgorithm&, GridTrackSizingDirection, LayoutUnit* minIntrinsicSize = nullptr, LayoutUnit* maxIntrinsicSize = nullptr) const;
    131129    LayoutUnit computeTrackBasedLogicalHeight() const;
    132130
    … …  
    201199    OutOfFlowPositionsMap m_outOfFlowItemRow;
    202200
    203     std::optional<LayoutUnit> m_minContentHeight;
    204     std::optional<LayoutUnit> m_maxContentHeight;
    205 
    206201    bool m_hasAnyOrthogonalItem {false};
    207202    bool m_baselineItemsCached {false};
Note: See TracChangeset for help on using the changeset viewer.