Changeset 201325 in webkit


Ignore:
Timestamp:
May 24, 2016 1:55:13 AM (8 years ago)
Author:
Manuel Rego Casasnovas
Message:

[css-grid] Fix behavior of flexible track breadths
​https://bugs.webkit.org/show_bug.cgi?id=157834

Reviewed by Sergio Villar Senin.

This patch is fixing 2 issues that are interrelated:
Source/WebCore:

1) Flex sizes are invalid as min track sizing function.

The syntax has been recently updated on the spec:

<track-size> =

<track-breadth> |
minmax( <inflexible-breadth> , <track-breadth> )

2) Flex sizes outside minmax() behave as auto minimum.

Flex sizes outside minmax() were previously behaving like
minimum and maximum (e.g. 1fr => minmax(1fr, 1fr)).
However the spec changed and now this would be invalid,
so they should behave like auto minimum (e.g. minmax(auto, 1fr)).

  • css/CSSParser.cpp:

(WebCore::CSSParser::parseGridTrackSize): Call parseGridBreadth()
for min sizing function using "InflexibleSizeOnly" restriction
when needed.
(WebCore::CSSParser::parseGridBreadth): Add check for
"InflexibleSizeOnly" resctriction.

  • css/CSSParser.h: Add new type of restriction "InflexibleSizeOnly".
  • rendering/RenderGrid.cpp:

(WebCore::RenderGrid::gridTrackSize): Add new condition to make
|minTrackBreadth| auto if it was a flex size.

LayoutTests:

1) Flex sizes are invalid as min track sizing function.
2) Flex sizes outside minmax() behave as auto minimum.

The patch includes new test cases checking specifically these 2 issues.
In addition several tests results have been updated to reflect
the new behavior. Also, some cases that are now invalid and
were not testing anything new have been removed.

  • fast/css-grid-layout/flex-and-content-sized-resolution-columns-expected.txt:
  • fast/css-grid-layout/flex-and-content-sized-resolution-columns.html:
  • fast/css-grid-layout/flex-content-resolution-columns-expected.txt:
  • fast/css-grid-layout/flex-content-resolution-columns.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-columns-rows-get-set-expected.txt:
  • 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-preferred-logical-widths.html:
  • fast/css-grid-layout/non-grid-columns-rows-get-set-expected.txt:
  • fast/css-grid-layout/resources/grid-columns-rows-get-set.js:
  • fast/css-grid-layout/resources/non-grid-columns-rows-get-set.js:
Location:
trunk
Files:
18 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r201324 r201325  
     12016-05-24  Manuel Rego Casasnovas  <rego@igalia.com>
     2
     3        [css-grid] Fix behavior of flexible track breadths
     4        https://bugs.webkit.org/show_bug.cgi?id=157834
     5
     6        Reviewed by Sergio Villar Senin.
     7
     8        This patch is fixing 2 issues that are interrelated:
     9        1) Flex sizes are invalid as min track sizing function.
     10        2) Flex sizes outside minmax() behave as auto minimum.
     11
     12        The patch includes new test cases checking specifically these 2 issues.
     13        In addition several tests results have been updated to reflect
     14        the new behavior. Also, some cases that are now invalid and
     15        were not testing anything new have been removed.
     16
     17        * fast/css-grid-layout/flex-and-content-sized-resolution-columns-expected.txt:
     18        * fast/css-grid-layout/flex-and-content-sized-resolution-columns.html:
     19        * fast/css-grid-layout/flex-content-resolution-columns-expected.txt:
     20        * fast/css-grid-layout/flex-content-resolution-columns.html:
     21        * fast/css-grid-layout/flex-content-resolution-rows-expected.txt:
     22        * fast/css-grid-layout/flex-content-resolution-rows.html:
     23        * fast/css-grid-layout/grid-columns-rows-get-set-expected.txt:
     24        * fast/css-grid-layout/grid-gutters-and-flex-content-expected.txt:
     25        * fast/css-grid-layout/grid-gutters-and-flex-content.html:
     26        * fast/css-grid-layout/grid-preferred-logical-widths.html:
     27        * fast/css-grid-layout/non-grid-columns-rows-get-set-expected.txt:
     28        * fast/css-grid-layout/resources/grid-columns-rows-get-set.js:
     29        * fast/css-grid-layout/resources/non-grid-columns-rows-get-set.js:
     30
    1312016-05-24  Youenn Fablet  <youenn.fablet@crf.canon.fr>
    232

  • trunk/LayoutTests/fast/css-grid-layout/flex-and-content-sized-resolution-columns-expected.txt

    r200510 r201325  
    33PASS window.getComputedStyle(gridMinMaxFixedFlexAndMaxContentAndAuto, '').getPropertyValue('grid-template-columns') is "60px 20px 20px"
    44PASS window.getComputedStyle(gridMinMaxFixedFlexAndMaxContentAndAutoNoFlexSpanningItems, '').getPropertyValue('grid-template-columns') is "100px 0px 0px"
    5 PASS window.getComputedStyle(gridMinMaxFlexFixedAndMinContentAndFixed, '').getPropertyValue('grid-template-columns') is "35px 5px 25px"
     5PASS window.getComputedStyle(gridMinMaxAutoFixedAndMinContentAndFixed, '').getPropertyValue('grid-template-columns') is "35px 20px 25px"
    66PASS window.getComputedStyle(gridMinContentAndMinMaxFixedMinContentAndFlex, '').getPropertyValue('grid-template-columns') is "20px 20px 60px"
    77PASS window.getComputedStyle(gridMaxContentAndMinMaxFixedMaxContentAndFlex, '').getPropertyValue('grid-template-columns') is "70px 20px 10px"

  • trunk/LayoutTests/fast/css-grid-layout/flex-and-content-sized-resolution-columns.html

    r200510 r201325  
    1616}
    1717
    18 .gridMinMaxFlexFixedAndMinContentAndFixed {
    19      grid-template-columns: minmax(0.5fr, 35px) -webkit-min-content 25px;
     18.gridMinMaxAutoFixedAndMinContentAndFixed {
     19     grid-template-columns: minmax(auto, 35px) -webkit-min-content 25px;
    2020}
    2121
    … …  
    6464
    6565<div style="position: relative; width: 100px;">
    66     <div id="gridMinMaxFlexFixedAndMinContentAndFixed" class="grid gridMinMaxFlexFixedAndMinContentAndFixed">
     66    <div id="gridMinMaxAutoFixedAndMinContentAndFixed" class="grid gridMinMaxAutoFixedAndMinContentAndFixed">
    6767        <div style="grid-column: 1 / span 2;">XXXX XXXX</div>
    6868        <div style="grid-column: 2 / span 2; grid-row: 2;">XXX XXX</div>
    … …  
    101101checkColumns("gridMinMaxFixedFlexAndMaxContentAndAuto", "60px 20px 20px");
    102102checkColumns("gridMinMaxFixedFlexAndMaxContentAndAutoNoFlexSpanningItems", "100px 0px 0px");
    103 checkColumns("gridMinMaxFlexFixedAndMinContentAndFixed", "35px 5px 25px");
     103checkColumns("gridMinMaxAutoFixedAndMinContentAndFixed", "35px 20px 25px");
    104104checkColumns("gridMinContentAndMinMaxFixedMinContentAndFlex", "20px 20px 60px");
    105105checkColumns("gridMaxContentAndMinMaxFixedMaxContentAndFlex", "70px 20px 10px");

  • trunk/LayoutTests/fast/css-grid-layout/flex-content-resolution-columns-expected.txt

    r190308 r201325  
    11Test that resolving auto tracks on grid items works properly.
    22
     3PASS
     4XX
     5XXX
     6PASS
     7PASS
     8PASS
     9XXX
     10XXXX
     11PASS
     12PASS
     13XXX
     14XXXX
    315PASS
    416PASS
    … …  
    1628PASS
    1729PASS
    18 PASS
    19 PASS
    20 PASS

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

    r200510 r201325  
    33<link href="resources/grid.css" rel="stylesheet">
    44<style>
    5 .gridMinFlexContent {
    6     grid-template-columns: minmax(1fr, 50px);
     5.gridFlexContent {
     6    grid-template-columns: 1fr 1fr;
    77    grid-template-rows: 50px;
    88}
    99.gridZeroFlexContent {
    10     grid-template-columns: minmax(1fr, 0px);
     10    grid-template-columns: minmax(auto, 0px);
    1111    grid-template-rows: 50px;
    1212}
    … …  
    5555
    5656<div style="width: 0px">
    57     <div class="grid gridMinFlexContent">
     57    <div class="grid gridFlexContent">
    5858        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="0" data-expected-height="50"></div>
     59    </div>
     60</div>
     61
     62<div style="width: 0px; position: relative;">
     63    <div class="grid gridFlexContent">
     64        <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="50">XX</div>
     65        <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="20" data-offset-y="0" data-expected-width="30" data-expected-height="50">XXX</div>
    5966    </div>
    6067</div>
    … …  
    6875<!-- Allow the extra logical space distribution to occur. -->
    6976<div style="width: 40px; height: 10px">
    70     <div class="grid gridMinFlexContent">
    71         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="40" data-expected-height="50"></div>
     77    <div class="grid gridFlexContent">
     78        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="20" data-expected-height="50"></div>
     79    </div>
     80</div>
     81
     82<div style="width: 40px; height: 10px; position: relative;">
     83    <div class="grid gridFlexContent">
     84        <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="30" data-expected-height="50">XXX</div>
     85        <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="30" data-offset-y="0" data-expected-width="40" data-expected-height="50">XXXX</div>
    7286    </div>
    7387</div>
    7488
    7589<div style="width: 100px; height: 10px;">
    76     <div class="grid gridMinFlexContent">
     90    <div class="grid gridFlexContent">
    7791        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
     92    </div>
     93</div>
     94
     95<div style="width: 100px; height: 10px; position: relative;">
     96    <div class="grid gridFlexContent">
     97        <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">XXX</div>
     98        <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50">XXXX</div>
    7899    </div>
    79100</div>

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

    r190308 r201325  
    11Test that resolving auto tracks on grid items works properly.
    22
     3PASS
     4PASS
     5X
     6X
     7X
     8X
     9X
     10PASS
     11X
     12X
     13X
     14X
     15X
     16PASS
     17PASS
     18PASS
     19PASS
     20X
     21X
     22X
     23X
     24X
     25X
     26X
     27PASS
     28X
     29X
     30X
     31X
     32X
     33X
     34X
     35PASS
     36PASS
     37PASS
     38X
     39X
     40X
     41X
     42X
     43X
     44X
     45PASS
     46X
     47X
     48X
     49X
     50X
     51X
     52X
    353PASS
    454PASS
    … …  
    2575PASS
    2676PASS
    27 PASS
    28 PASS
    29 PASS
    30 PASS
    31 PASS

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

    r200510 r201325  
    33<link href="resources/grid.css" rel="stylesheet">
    44<style>
    5 .gridMinFlexContent {
    6     grid-template-columns: 50px;
    7     grid-template-rows: minmax(1fr, 50px);
     5.gridFlexContent {
     6    grid-template-columns: 50px;
     7    grid-template-rows: 1fr 1fr;
    88}
    99.gridZeroFlexContent {
    1010    grid-template-columns: 50px;
    11     grid-template-rows: minmax(1fr, 0px);
     11    grid-template-rows: minmax(auto, 0px);
    1212}
    1313.gridMaxFlexContent {
    … …  
    5151
    5252<div style="height: 0px">
    53     <div class="grid gridMinFlexContent" style="height: 100%">
    54         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="0"></div>
     53    <div class="grid gridFlexContent">
     54        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="0"></div>
     55    </div>
     56</div>
     57
     58<div style="height: 0px">
     59    <div class="grid gridFlexContent" style="height: 100%;">
     60        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="0"></div>
     61    </div>
     62</div>
     63
     64<div style="height: 0px; position: relative;">
     65    <div class="grid gridFlexContent">
     66        <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="30">X<br>X</div>
     67        <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="30" data-expected-width="50" data-expected-height="30">X<br>X<br>X</div>
     68    </div>
     69</div>
     70
     71<div style="height: 0px; position: relative;">
     72    <div class="grid gridFlexContent" style="height: 100%;">
     73        <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="20">X<br>X</div>
     74        <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="20" data-expected-width="50" data-expected-height="30">X<br>X<br>X</div>
    5575    </div>
    5676</div>
    … …  
    6282</div>
    6383
    64 <div style="height: 0px">
    65     <div class="grid gridMinFlexContent">
    66         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
    67     </div>
    68 </div>
    69 
    7084<!-- Allow the extra logical space distribution to occur. -->
    7185<div style="width: 10px; height: 40px">
    72     <div class="grid gridMinFlexContent" style="height: 100%">
    73         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
     86    <div class="grid gridFlexContent">
     87        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="0"></div>
    7488    </div>
    7589</div>
    7690
    7791<div style="width: 10px; height: 40px">
    78     <div class="grid gridMinFlexContent">
    79         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
     92    <div class="grid gridFlexContent" style="height: 100%;">
     93        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
     94    </div>
     95</div>
     96
     97<div style="width: 10px; height: 40px; position: relative">
     98    <div class="grid gridFlexContent">
     99        <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="40">X<br>X<br>X</div>
     100        <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="40" data-expected-width="50" data-expected-height="40">X<br>X<br>X<br>X</div>
     101    </div>
     102</div>
     103
     104<div style="width: 10px; height: 40px; position: relative">
     105    <div class="grid gridFlexContent" style="height: 100%;">
     106        <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="30">X<br>X<br>X</div>
     107        <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="30" data-expected-width="50" data-expected-height="40">X<br>X<br>X<br>X</div>
    80108    </div>
    81109</div>
    82110
    83111<div style="width: 10px; height: 100px;">
    84     <div class="grid gridMinFlexContent">
    85         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
     112    <div class="grid gridFlexContent">
     113        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="0"></div>
     114    </div>
     115</div>
     116
     117<div style="width: 10px; height: 100px;">
     118    <div class="grid gridFlexContent" style="height: 100%;">
     119        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
     120    </div>
     121</div>
     122
     123<div style="width: 10px; height: 100px; position: relative;">
     124    <div class="grid gridFlexContent">
     125        <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="40">X<br>X<br>X</div>
     126        <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="40" data-expected-width="50" data-expected-height="40">X<br>X<br>X<br>X</div>
     127    </div>
     128</div>
     129
     130<div style="width: 10px; height: 100px; position: relative;">
     131    <div class="grid gridFlexContent" style="height: 100%;">
     132        <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">X<br>X<br>X</div>
     133        <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50">X<br>X<br>X<br>X</div>
    86134    </div>
    87135</div>

  • trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-expected.txt

    r200510 r201325  
    163163PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
    164164PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
     165PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
     166PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
     167PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
     168PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
    165169
    166170Test setting grid-template-columns and grid-template-rows back to 'none' through JS

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

    r198486 r201325  
    88PASS
    99PASS
    10 XXXX XXXX
    11 XXX XXX
    12 XXXXX XXXXX
    13 XX XX XX XX
    14 PASS
    1510XXXXX
    1611XXX XXX XXX

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

    r200510 r201325  
    1414.gridRowsTwoDoubleMaxFlexContent { grid-template: minmax(10px, 0.5fr) minmax(10px, 2fr) / 50px; }
    1515
    16 .gridMinMaxFlexFixedAndMinContentAndFixed { grid-template-columns: minmax(0.5fr, 35px) -webkit-min-content 25px; }
    1716.gridMinContentAndMinMaxFixedMinContentAndFlex { grid-template-columns: -webkit-min-content minmax(20px, -webkit-min-content) 2fr; }
    1817.gridMaxContentAndMinMaxFixedMaxContentAndFlex { grid-template-columns: -webkit-max-content minmax(20px, -webkit-max-content) 1fr; }
    … …  
    7776
    7877<div style="position: relative; width: 100px;">
    79     <div class="grid gridMinMaxFlexFixedAndMinContentAndFixed gridRowColumnGaps" data-expected-width="100" data-expected-height="199">
    80         <div style="grid-column: 1 / span 2;" data-expected-width="54" data-expected-height="20">XXXX XXXX</div>
    81         <div style="grid-column: 2 / span 2; grid-row: 2;" data-expected-width="44" data-expected-height="20">XXX XXX</div>
    82         <div style="grid-column: 1 / -1; grid-row: 3;" data-expected-width="98" data-expected-height="20">XXXXX XXXXX</div>
    83         <div style="grid-column: 2 / span 2; grid-row: 4;" data-expected-width="44" data-expected-height="40">XX XX XX XX</div>
    84     </div>
    85 </div>
    86 
    87 <div style="position: relative; width: 100px;">
    8878    <div class="grid gridMinContentAndMinMaxFixedMinContentAndFlex gridRowColumnGaps" data-expected-width="100" data-expected-height="149">
    8979        <div style="grid-column: 2 / span 2;" data-expected-width="80">XXXXX</div>

  • trunk/LayoutTests/fast/css-grid-layout/grid-preferred-logical-widths.html

    r200510 r201325  
    3636
    3737.gridFixedFraction {
    38     grid-template-columns: minmax(10px, 1fr) minmax(2fr, 20px);
     38    grid-template-columns: minmax(10px, 1fr) minmax(20px, 2fr);
    3939    grid-template-rows: 10px;
    4040}
    … …  
    102102</div>
    103103
    104 <div class="grid gridFixedFraction min-content" data-expected-height="10" data-expected-width="10"></div>
     104<div class="grid gridFixedFraction min-content" data-expected-height="10" data-expected-width="30"></div>
    105105
    106106<div class="grid gridFixedFraction max-content" data-expected-height="10" data-expected-width="30"></div>

  • trunk/LayoutTests/fast/css-grid-layout/non-grid-columns-rows-get-set-expected.txt

    r200510 r201325  
    133133PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
    134134PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
     135PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
     136PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
     137PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
     138PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
    135139
    136140Test setting grid-template-columns and grid-template-rows back to 'none' through JS

  • trunk/LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set.js

    r200510 r201325  
    7878// No breadth value and no comma.
    7979testGridTemplatesSetBadJSValues("minmax()", "minmax(30px 30% 30em)");
     80// Flexible lengths are invalid on the min slot of minmax().
     81testGridTemplatesSetBadJSValues("minmax(0fr, 100px)", "minmax(.0fr, 200px)");
     82testGridTemplatesSetBadJSValues("minmax(1fr, 100px)", "minmax(2.5fr, 200px)");
    8083
    8184testGridTemplatesSetBadJSValues("-2fr", "3ffr");

  • trunk/LayoutTests/fast/css-grid-layout/resources/non-grid-columns-rows-get-set.js

    r200510 r201325  
    6666// No breadth value and no comma.
    6767testGridTemplatesSetBadJSValues("minmax()", "minmax(30px 30% 30em)");
     68// Flexible lengths are invalid on the min slot of minmax().
     69testGridTemplatesSetBadJSValues("minmax(0fr, 100px)", "minmax(.0fr, 200px)");
     70testGridTemplatesSetBadJSValues("minmax(1fr, 100px)", "minmax(2.5fr, 200px)");
     71
    6872testGridTemplatesSetBadJSValues("-2fr", "3ffr");
    6973testGridTemplatesSetBadJSValues("-2.05fr", "+-3fr");

  • trunk/Source/WebCore/ChangeLog

    r201324 r201325  
     12016-05-24  Manuel Rego Casasnovas  <rego@igalia.com>
     2
     3        [css-grid] Fix behavior of flexible track breadths
     4        https://bugs.webkit.org/show_bug.cgi?id=157834
     5
     6        Reviewed by Sergio Villar Senin.
     7
     8        This patch is fixing 2 issues that are interrelated:
     9
     10        1) Flex sizes are invalid as min track sizing function.
     11
     12          The syntax has been recently updated on the spec:
     13            <track-size> =
     14              <track-breadth> |
     15              minmax( <inflexible-breadth> , <track-breadth> )
     16
     17        2) Flex sizes outside minmax() behave as auto minimum.
     18
     19          Flex sizes outside minmax() were previously behaving like
     20          minimum and maximum (e.g. 1fr => minmax(1fr, 1fr)).
     21          However the spec changed and now this would be invalid,
     22          so they should behave like auto minimum (e.g. minmax(auto, 1fr)).
     23
     24        * css/CSSParser.cpp:
     25        (WebCore::CSSParser::parseGridTrackSize): Call parseGridBreadth()
     26        for min sizing function using "InflexibleSizeOnly" restriction
     27        when needed.
     28        (WebCore::CSSParser::parseGridBreadth): Add check for
     29        "InflexibleSizeOnly" resctriction.
     30        * css/CSSParser.h: Add new type of restriction "InflexibleSizeOnly".
     31        * rendering/RenderGrid.cpp:
     32        (WebCore::RenderGrid::gridTrackSize): Add new condition to make
     33        |minTrackBreadth| auto if it was a flex size.
     34
    1352016-05-24  Youenn Fablet  <youenn.fablet@crf.canon.fr>
    236

  • trunk/Source/WebCore/css/CSSParser.cpp

    r201318 r201325  
    59785978            return nullptr;
    59795979
    5980         RefPtr<CSSPrimitiveValue> minTrackBreadth = parseGridBreadth(*arguments->valueAt(0), restriction);
     5980        TrackSizeRestriction minTrackBreadthRestriction = restriction == AllowAll ? InflexibleSizeOnly : restriction;
     5981        RefPtr<CSSPrimitiveValue> minTrackBreadth = parseGridBreadth(*arguments->valueAt(0), minTrackBreadthRestriction);
    59815982        if (!minTrackBreadth)
    59825983            return nullptr;
    … …  
    60066007
    60076008    if (value.unit == CSSPrimitiveValue::CSS_FR) {
    6008         if (restriction == FixedSizeOnly)
     6009        if (restriction == FixedSizeOnly || restriction == InflexibleSizeOnly)
    60096010            return nullptr;
    60106011

  • trunk/Source/WebCore/css/CSSParser.h

    r201290 r201325  
    241241    RefPtr<CSSValue> parseGridTrackList();
    242242    bool parseGridTrackRepeatFunction(CSSValueList&, bool& isAutoRepeat);
    243     enum TrackSizeRestriction { FixedSizeOnly, AllowAll };
     243    enum TrackSizeRestriction { FixedSizeOnly, InflexibleSizeOnly, AllowAll };
    244244    RefPtr<CSSValue> parseGridTrackSize(CSSParserValueList& inputList, TrackSizeRestriction = AllowAll);
    245245    RefPtr<CSSPrimitiveValue> parseGridBreadth(CSSParserValue&, TrackSizeRestriction = AllowAll);

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

    r200618 r201325  
    747747        }
    748748    }
     749
     750    // Flex sizes are invalid as a min sizing function. However we still can have a flexible |minTrackBreadth|
     751    // if the track size is just a flex size (e.g. "1fr"), the spec says that in this case it implies an automatic minimum.
     752    if (minTrackBreadth.isFlex())
     753        minTrackBreadth = Length(Auto);
    749754
    750755    return GridTrackSize(minTrackBreadth, maxTrackBreadth);
Note: See TracChangeset for help on using the changeset viewer.