Changeset 189911 in webkit


Ignore:
Timestamp:
Sep 17, 2015 5:13:30 AM (9 years ago)
Author:
svillar@igalia.com
Message:

[CSS Grid Layout] Using automatic (instead of min-content) minimums for 'auto' tracks
​https://bugs.webkit.org/show_bug.cgi?id=142329

Reviewed by Darin Adler.

Based on Blink's r198697 by <​svillar@igalia.com> and r200478 by <​jfernandez@igalia.com>

Source/WebCore:

More precisely (syntax-wise), this would allow 'auto' to be used within the
minmax() function (it's currently forbidden) and have the 'auto' keyword map
to minmax(auto, auto) instead of minmax(min-content, max-content).

  • As a minimum, 'auto' would mean "use the specified minimum size, or if

that is auto, treat as 0 or min-content per Flexbox rules".

  • As a maximum, 'auto' would mean "use the max-content size".

Regarding the implementation, a new phase is added to the track sizing
algorithm called ResolveIntrinsicMinimums (the former ResolveIntrinsicMinimums
is now called ResolveContentBasedMinimums which does not include 'auto'
resolution) which will be run before any other. This phase uses the minimum
size of grid items (as specified by min-width/height).

Tests: fast/css-grid-layout/grid-automatic-minimum-for-auto-columns.html

fast/css-grid-layout/grid-automatic-minimum-for-auto-rows.html

  • css/CSSParser.cpp:

(WebCore::CSSParser::parseGridBreadth):

  • rendering/RenderGrid.cpp:

(WebCore::RenderGrid::computeUsedBreadthOfMinLength):
(WebCore::RenderGrid::computeUsedBreadthOfMaxLength):
(WebCore::RenderGrid::minSizeForChild):
(WebCore::RenderGrid::resolveContentBasedTrackSizingFunctions):
(WebCore::RenderGrid::resolveContentBasedTrackSizingFunctionsForNonSpanningItems):
(WebCore::RenderGrid::trackSizeForTrackSizeComputationPhase):
(WebCore::RenderGrid::shouldProcessTrackForTrackSizeComputationPhase):
(WebCore::RenderGrid::trackShouldGrowBeyondGrowthLimitsForTrackSizeComputationPhase):
(WebCore::RenderGrid::markAsInfinitelyGrowableForTrackSizeComputationPhase):
(WebCore::RenderGrid::updateTrackSizeForTrackSizeComputationPhase):
(WebCore::RenderGrid::currentItemSizeForTrackSizeComputationPhase):

  • rendering/RenderGrid.h:
  • rendering/style/GridTrackSize.h:

(WebCore::GridTrackSize::minTrackBreadth):
(WebCore::GridTrackSize::maxTrackBreadth):
(WebCore::GridTrackSize::cacheMinMaxTrackBreadthTypes):
(WebCore::GridTrackSize::hasIntrinsicMinTrackBreadth):
(WebCore::GridTrackSize::hasAutoMinTrackBreadth):
(WebCore::GridTrackSize::hasAutoMaxTrackBreadth):
(WebCore::GridTrackSize::hasMaxContentOrAutoMaxTrackBreadth):
(WebCore::GridTrackSize::hasAutoOrMinContentMinTrackBreadthAndIntrinsicMaxTrackBreadth):
(WebCore::GridTrackSize::hasMinContentMinTrackBreadthAndMinOrMaxContentMaxTrackBreadth): Deleted.

LayoutTests:

New tests to verify that auto is a valid keyword inside
minmax. Updated the expectations of existing tests to
reflect the new status of auto.

  • fast/css-grid-layout/grid-auto-columns-rows-get-set-expected.txt:
  • fast/css-grid-layout/grid-auto-columns-rows-get-set.html:
  • fast/css-grid-layout/grid-automatic-minimum-for-auto-columns-expected.txt: Added.
  • fast/css-grid-layout/grid-automatic-minimum-for-auto-columns.html: Added.
  • fast/css-grid-layout/grid-automatic-minimum-for-auto-rows-expected.txt: Added.
  • fast/css-grid-layout/grid-automatic-minimum-for-auto-rows.html: Added.
  • fast/css-grid-layout/grid-columns-rows-get-set-expected.txt:
  • fast/css-grid-layout/grid-columns-rows-get-set-multiple-expected.txt:
  • fast/css-grid-layout/grid-columns-rows-get-set-multiple.html:
  • fast/css-grid-layout/grid-columns-rows-get-set.html:
  • fast/css-grid-layout/non-grid-columns-rows-get-set-expected.txt:
  • fast/css-grid-layout/non-grid-columns-rows-get-set-multiple-expected.txt:
  • fast/css-grid-layout/non-grid-columns-rows-get-set-multiple.html:
  • fast/css-grid-layout/non-grid-columns-rows-get-set.html:
  • fast/css-grid-layout/resources/grid-columns-rows-get-set-multiple.js:
  • fast/css-grid-layout/resources/grid-columns-rows-get-set.js:
  • fast/css-grid-layout/resources/non-grid-columns-rows-get-set-multiple.js:
  • fast/css-grid-layout/resources/non-grid-columns-rows-get-set.js:
Location:
trunk
Files:
4 added
20 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r189910 r189911  
     12015-09-15  Sergio Villar Senin  <svillar@igalia.com>
     2
     3        [CSS Grid Layout]  Using automatic (instead of min-content) minimums for 'auto' tracks
     4        https://bugs.webkit.org/show_bug.cgi?id=142329
     5
     6        Reviewed by Darin Adler.
     7
     8        Based on Blink's r198697 by <svillar@igalia.com> and r200478 by <jfernandez@igalia.com>
     9
     10        New tests to verify that auto is a valid keyword inside
     11        minmax. Updated the expectations of existing tests to
     12        reflect the new status of auto.
     13
     14        * fast/css-grid-layout/grid-auto-columns-rows-get-set-expected.txt:
     15        * fast/css-grid-layout/grid-auto-columns-rows-get-set.html:
     16        * fast/css-grid-layout/grid-automatic-minimum-for-auto-columns-expected.txt: Added.
     17        * fast/css-grid-layout/grid-automatic-minimum-for-auto-columns.html: Added.
     18        * fast/css-grid-layout/grid-automatic-minimum-for-auto-rows-expected.txt: Added.
     19        * fast/css-grid-layout/grid-automatic-minimum-for-auto-rows.html: Added.
     20        * fast/css-grid-layout/grid-columns-rows-get-set-expected.txt:
     21        * fast/css-grid-layout/grid-columns-rows-get-set-multiple-expected.txt:
     22        * fast/css-grid-layout/grid-columns-rows-get-set-multiple.html:
     23        * fast/css-grid-layout/grid-columns-rows-get-set.html:
     24        * fast/css-grid-layout/non-grid-columns-rows-get-set-expected.txt:
     25        * fast/css-grid-layout/non-grid-columns-rows-get-set-multiple-expected.txt:
     26        * fast/css-grid-layout/non-grid-columns-rows-get-set-multiple.html:
     27        * fast/css-grid-layout/non-grid-columns-rows-get-set.html:
     28        * fast/css-grid-layout/resources/grid-columns-rows-get-set-multiple.js:
     29        * fast/css-grid-layout/resources/grid-columns-rows-get-set.js:
     30        * fast/css-grid-layout/resources/non-grid-columns-rows-get-set-multiple.js:
     31        * fast/css-grid-layout/resources/non-grid-columns-rows-get-set.js:
     32
    1332015-09-17  Javier Fernandez  <jfernandez@igalia.com>
    234

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

    r173156 r189911  
    1111PASS window.getComputedStyle(gridAutoMinMaxContent, '').getPropertyValue('-webkit-grid-auto-rows') is "-webkit-min-content"
    1212PASS window.getComputedStyle(gridAutoMinMaxContent, '').getPropertyValue('-webkit-grid-auto-columns') is "-webkit-max-content"
     13PASS window.getComputedStyle(gridAutoAutoInMinMax, '').getPropertyValue('-webkit-grid-auto-rows') is "minmax(auto, 48px)"
     14PASS window.getComputedStyle(gridAutoAutoInMinMax, '').getPropertyValue('-webkit-grid-auto-columns') is "minmax(80px, auto)"
    1315
    1416Test that getting grid-template-columns and grid-template-rows set through CSS lists every track listed whether implicitly or explicitly created
    … …  
    5153PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns') is 'auto'
    5254PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows') is 'auto'
    53 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns') is 'auto'
    54 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows') is 'auto'
    5555
    5656Test setting grid-auto-columns and grid-auto-rows to 'inherit' through JS

  • trunk/LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-get-set.html

    r173156 r189911  
    2727}
    2828
     29.gridAutoAutoInMinMax {
     30    -webkit-grid-auto-rows: minmax(auto, 8vh);
     31    -webkit-grid-auto-columns: minmax(10vw, auto);
     32}
     33
    2934</style>
    3035<script src="../../resources/js-test-pre.js"></script>
    … …  
    3540<div class="grid gridAutoMinMax" id="gridAutoMinMax"></div>
    3641<div class="grid gridAutoMinMaxContent" id="gridAutoMinMaxContent"></div>
     42<div class="grid gridAutoAutoInMinMax" id="gridAutoAutoInMinMax"></div>
    3743<div class="grid gridAutoFixedFixed" id="gridAutoFixedFixedWithChildren">
    3844    <div class="sizedToGridArea firstRowFirstColumn"></div>
    … …  
    4955testGridAutoDefinitionsValues(document.getElementById("gridAutoMinMax"), "minmax(10%, 15px)", "minmax(30%, 100px)");
    5056testGridAutoDefinitionsValues(document.getElementById("gridAutoMinMaxContent"), "-webkit-min-content", "-webkit-max-content");
     57testGridAutoDefinitionsValues(document.getElementById("gridAutoAutoInMinMax"), "minmax(auto, 48px)", "minmax(80px, auto)");
    5158
    5259debug("");
    … …  
    123130element = document.createElement("div");
    124131document.body.appendChild(element);
    125 // Auto is not allowed inside minmax.
    126 element.style.webkitGridAutoColumns = "minmax(auto, 8vh)";
    127 element.style.webkitGridAutoRows = "minmax(10vw, auto)";
    128 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns')", "'auto'");
    129 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows')", "'auto'");
    130 
    131 element = document.createElement("div");
    132 document.body.appendChild(element);
    133132// None is not allowed for grid-auto-{rows|columns}.
    134133element.style.webkitGridAutoColumns = "none";

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

    r185147 r189911  
    4343PASS window.getComputedStyle(gridWithCalcComplexInsideMinMaxElement, '').getPropertyValue('-webkit-grid-template-columns') is "415px"
    4444PASS window.getComputedStyle(gridWithCalcComplexInsideMinMaxElement, '').getPropertyValue('-webkit-grid-template-rows') is "300px"
     45PASS window.getComputedStyle(gridWithAutoInsideMinMaxElement, '').getPropertyValue('-webkit-grid-template-columns') is "20px"
     46PASS window.getComputedStyle(gridWithAutoInsideMinMaxElement, '').getPropertyValue('-webkit-grid-template-rows') is "11px"
    4547
    4648Test getting wrong values for -webkit-grid-template-columns and -webkit-grid-template-rows through CSS (they should resolve to the default: 'none')
    … …  
    101103PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "0px"
    102104PASS element.style.webkitGridTemplateRows is "minmax(-webkit-max-content, -webkit-min-content)"
     105PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "0px"
     106PASS element.style.webkitGridTemplateColumns is "minmax(auto, -webkit-max-content)"
     107PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "80px"
     108PASS element.style.webkitGridTemplateRows is "minmax(10vw, auto)"
    103109PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "800px"
    104110PASS element.style.webkitGridTemplateColumns is "3600fr"
    … …  
    157163PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
    158164PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
    159 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
    160 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
    161165
    162166Test setting grid-template-columns and grid-template-rows back to 'none' through JS

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

    r185147 r189911  
    4141PASS window.getComputedStyle(gridWithCalcInsideMinMax, '').getPropertyValue('-webkit-grid-template-columns') is "400px 120px"
    4242PASS window.getComputedStyle(gridWithCalcInsideMinMax, '').getPropertyValue('-webkit-grid-template-rows') is "150px 175px"
     43PASS window.getComputedStyle(gridWithAutoInsideMinMax, '').getPropertyValue('-webkit-grid-template-columns') is "0px 30px"
     44PASS window.getComputedStyle(gridWithAutoInsideMinMax, '').getPropertyValue('-webkit-grid-template-rows') is "132px 60px"
    4345
    4446Test the initial value
    … …  
    7981PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "100px 0px"
    8082PASS element.style.webkitGridTemplateRows is "minmax(calc(75% - 350px), -webkit-max-content) auto"
     83PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "0px 16px"
     84PASS element.style.webkitGridTemplateColumns is "auto minmax(16px, auto)"
     85PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "90px 80px"
     86PASS element.style.webkitGridTemplateRows is "minmax(auto, 15%) 10vw"
    8187
    8288Test getting wrong values set from CSS
    … …  
    8793
    8894Test setting and getting wrong values from JS
    89 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
    90 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
    9195PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
    9296PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"

  • trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-multiple.html

    r168416 r189911  
    100100    font: 10px Ahem;
    101101}
     102.gridWithAutoInsideMinMax {
     103    -webkit-grid-template-columns: minmax(auto, -webkit-min-content) 30px;
     104    -webkit-grid-template-rows: calc(100px + 2em) minmax(10%, auto);
     105}
    102106</style>
    103107<script src="../../resources/js-test-pre.js"></script>
    … …  
    131135<div class="grid gridWithCalcAndMinMax" id="gridWithCalcAndMinMax"></div>
    132136<div class="grid gridWithCalcInsideMinMax" id="gridWithCalcInsideMinMax"></div>
     137<div class="grid gridWithAutoInsideMinMax" id="gridWithAutoInsideMinMax"></div>
    133138<script src="resources/grid-definitions-parsing-utils.js"></script>
    134139<script src="resources/grid-columns-rows-get-set-multiple.js"></script>

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

    r168416 r189911  
    1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
     1<!DOCTYPE html>
    22<html>
    33<head>
    … …  
    8686    -webkit-grid-template-rows: minmax(calc(20px + 10%), 50%);
    8787}
     88.gridWithAutoInsideMinMax {
     89    -webkit-grid-template-columns: minmax(auto, 20px);
     90    -webkit-grid-template-rows: minmax(max-content, auto);
     91}
    8892</style>
    8993<script src="../../resources/js-test-pre.js"></script>
    … …  
    121125<div class="grid gridWithCalcInsideMinMax" id="gridWithCalcInsideMinMaxElement"></div>
    122126<div class="grid gridWithCalcComplexInsideMinMax" id="gridWithCalcComplexInsideMinMaxElement"></div>
     127<div class="grid gridWithAutoInsideMinMax" id="gridWithAutoInsideMinMaxElement">
     128    <div class="gridItem"></div>
     129</div>
    123130<script src="resources/grid-definitions-parsing-utils.js"></script>
    124131<script src="resources/grid-columns-rows-get-set.js"></script>

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

    r185147 r189911  
    3333PASS window.getComputedStyle(gridWithCalcComplexInsideMinMax, '').getPropertyValue('-webkit-grid-template-columns') is "minmax(10%, calc(50% + 15px))"
    3434PASS window.getComputedStyle(gridWithCalcComplexInsideMinMax, '').getPropertyValue('-webkit-grid-template-rows') is "minmax(calc(20px + 10%), 50%)"
     35PASS window.getComputedStyle(gridWithAutoInsideMinMax, '').getPropertyValue('-webkit-grid-template-columns') is "minmax(auto, 20px)"
     36PASS window.getComputedStyle(gridWithAutoInsideMinMax, '').getPropertyValue('-webkit-grid-template-rows') is "minmax(-webkit-min-content, auto)"
    3537
    3638Test getting wrong values for grid-template-columns and grid-template-rows through CSS (they should resolve to the default: 'none')
    … …  
    105107PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "4fr"
    106108PASS element.style.webkitGridTemplateRows is "4fr"
     109PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "minmax(auto, 48px)"
     110PASS element.style.webkitGridTemplateColumns is "minmax(auto, 8vh)"
     111PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "minmax(80px, auto)"
     112PASS element.style.webkitGridTemplateRows is "minmax(10vw, auto)"
    107113
    108114Test setting grid-template-columns and grid-template-rows to bad values through JS
    109 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
    110 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
    111115PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
    112116PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"

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

    r185147 r189911  
    3737PASS window.getComputedStyle(gridWithCalcInsideMinMax, '').getPropertyValue('-webkit-grid-template-columns') is "minmax(calc(23px + 10%), 400px) 120px"
    3838PASS window.getComputedStyle(gridWithCalcInsideMinMax, '').getPropertyValue('-webkit-grid-template-rows') is "150px minmax(5%, calc(50% - 125px))"
     39PASS window.getComputedStyle(gridWithAutoInsideMinMax, '').getPropertyValue('-webkit-grid-template-columns') is "minmax(auto, 20px) 10%"
     40PASS window.getComputedStyle(gridWithAutoInsideMinMax, '').getPropertyValue('-webkit-grid-template-rows') is "-webkit-max-content minmax(-webkit-min-content, auto)"
    3941
    4042Test the initial value
    … …  
    7173PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "5% 510px"
    7274PASS element.style.webkitGridTemplateRows is "5% 85vh"
     75PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "auto minmax(16px, auto)"
     76PASS element.style.webkitGridTemplateColumns is "auto minmax(16px, auto)"
     77PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "minmax(auto, 15%) 80px"
     78PASS element.style.webkitGridTemplateRows is "minmax(auto, 15%) 10vw"
    7379
    7480Test getting wrong values set from CSS
    … …  
    7985
    8086Test setting and getting wrong values from JS
    81 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
    82 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
    8387PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
    8488PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"

  • trunk/LayoutTests/fast/css-grid-layout/non-grid-columns-rows-get-set-multiple.html

    r168416 r189911  
    8484    font: 10px Ahem;
    8585}
     86.gridWithAutoInsideMinMax {
     87    -webkit-grid-template-columns: minmax(auto, 20px) 10%;
     88    -webkit-grid-template-rows: -webkit-max-content minmax(-webkit-min-content, auto);
     89}
    8690</style>
    8791<script src="../../resources/js-test-pre.js"></script>
    … …  
    106110<div class="gridWithCalcAndMinMax" id="gridWithCalcAndMinMax"></div>
    107111<div class="gridWithCalcInsideMinMax" id="gridWithCalcInsideMinMax"></div>
     112<div class="gridWithAutoInsideMinMax" id="gridWithAutoInsideMinMax"></div>
    108113<script src="resources/grid-definitions-parsing-utils.js"></script>
    109114<script src="resources/non-grid-columns-rows-get-set-multiple.js"></script>

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

    r168416 r189911  
    6969    -webkit-grid-template-rows: minmax(calc(20px + 10%), 50%);
    7070}
     71.gridWithAutoInsideMinMax {
     72    -webkit-grid-template-columns: minmax(auto, 20px);
     73    -webkit-grid-template-rows: minmax(-webkit-min-content, auto);
     74}
    7175</style>
    7276<script src="../../resources/js-test-pre.js"></script>
    … …  
    8993<div class="gridWithCalcInsideMinMax" id="gridWithCalcInsideMinMax"></div>
    9094<div class="gridWithCalcComplexInsideMinMax" id="gridWithCalcComplexInsideMinMax"></div>
     95<div class="gridWithAutoInsideMinMax" id="gridWithAutoInsideMinMax"></div>
    9196<script src="resources/grid-definitions-parsing-utils.js"></script>
    9297<script src="resources/non-grid-columns-rows-get-set.js"></script>

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

    r185147 r189911  
    2020testGridTemplatesValues(document.getElementById("gridWithCalcAndMinMax"), "190px minmax(-webkit-min-content, 80px)", "minmax(25%, -webkit-max-content) 53px", "190px 80px", "150px 53px");
    2121testGridTemplatesValues(document.getElementById("gridWithCalcInsideMinMax"), "minmax(103px, 400px) 120px", "150px minmax(5%, 175px)", "400px 120px", "150px 175px");
     22testGridTemplatesValues(document.getElementById("gridWithAutoInsideMinMax"), "0px 30px", "132px 60px");
    2223
    2324debug("");
    … …  
    3839testGridTemplatesSetJSValues("calc(25px) calc(2em)", "auto calc(10%)", "25px 20px", "0px 60px", "calc(25px) calc(2em)", "auto calc(10%)");
    3940testGridTemplatesSetJSValues("calc(25px + 40%) minmax(-webkit-min-content, calc(10% + 12px))", "minmax(calc(75% - 350px), -webkit-max-content) auto", "345px 92px", "100px 0px", "calc(25px + 40%) minmax(-webkit-min-content, calc(10% + 12px))", "minmax(calc(75% - 350px), -webkit-max-content) auto");
     41testGridTemplatesSetJSValues("auto minmax(16px, auto)", "minmax(auto, 15%) 10vw", "0px 16px", "90px 80px");
    4042
    4143debug("");
    … …  
    5254testGridTemplatesSetBadJSValues("auto none 16em", "auto 18em none");
    5355testGridTemplatesSetBadJSValues("-webkit-fit-content -webkit-fit-content", "-webkit-fit-available -webkit-fit-available");
    54 testGridTemplatesSetBadJSValues("auto minmax(16px, auto)", "minmax(auto, 15%) 10vw");
    5556
    5657// Negative values are not allowed.

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

    r185745 r189911  
    2121testGridTemplatesValues(document.getElementById("gridWithCalcInsideMinMaxElement"), "minmax(10%, 15px)", "minmax(20px, 50%)", "80px", "300px");
    2222testGridTemplatesValues(document.getElementById("gridWithCalcComplexInsideMinMaxElement"), "minmax(10%, 415px)", "minmax(80px, 50%)", "415px", "300px");
     23testGridTemplatesValues(document.getElementById("gridWithAutoInsideMinMaxElement"), "20px", "11px");
    2324
    2425debug("");
    … …  
    5253testGridTemplatesSetJSValues("minmax(22em, -webkit-max-content)", "minmax(-webkit-max-content, 5em)", "220px", "50px");
    5354testGridTemplatesSetJSValues("minmax(-webkit-min-content, -webkit-max-content)", "minmax(-webkit-max-content, -webkit-min-content)", "0px", "0px");
     55testGridTemplatesSetJSValues("minmax(auto, -webkit-max-content)", "minmax(10vw, auto)", "0px", "80px");
    5456// Unit comparison should be case-insensitive.
    5557testGridTemplatesSetJSValues("3600Fr", "154fR", "800px", "600px", "3600fr", "154fr");
    … …  
    7779testGridTemplatesSetBadJSValues("minmax()", "minmax(30px 30% 30em)");
    7880
    79 // Auto is not allowed inside minmax.
    80 testGridTemplatesSetBadJSValues("minmax(auto, 8vh)", "minmax(10vw, auto)");
    8181testGridTemplatesSetBadJSValues("-2fr", "3ffr");
    8282testGridTemplatesSetBadJSValues("-2.05fr", "+-3fr");

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

    r185147 r189911  
    1818testGridTemplatesValues(document.getElementById("gridWithCalcAndMinMax"), "calc(30px + 20%) minmax(-webkit-min-content, 80px)", "minmax(25%, -webkit-max-content) calc(10% - 7px)");
    1919testGridTemplatesValues(document.getElementById("gridWithCalcInsideMinMax"), "minmax(calc(23px + 10%), 400px) 120px", "150px minmax(5%, calc(50% - 125px))");
     20testGridTemplatesValues(document.getElementById("gridWithAutoInsideMinMax"), "minmax(auto, 20px) 10%", "-webkit-max-content minmax(-webkit-min-content, auto)");
    2021
    2122debug("");
    … …  
    3536testNonGridTemplatesSetJSValues("16em 2fr", "14fr auto", "160px 2fr");
    3637testNonGridTemplatesSetJSValues("50% 12vw", "5% 85vh", "50% 96px", "5% 510px");
     38testNonGridTemplatesSetJSValues("auto minmax(16px, auto)", "minmax(auto, 15%) 10vw", "auto minmax(16px, auto)", "minmax(auto, 15%) 80px");
    3739
    3840debug("");
    … …  
    5456testGridTemplatesSetBadJSValues("auto none 16em", "auto 18em none");
    5557testGridTemplatesSetBadJSValues("-webkit-fit-content -webkit-fit-content", "-webkit-fit-available -webkit-fit-available");
    56 testGridTemplatesSetBadJSValues("auto minmax(16px, auto)", "minmax(auto, 15%) 10vw");
    5758// Negative values are not allowed.
    5859testGridTemplatesSetBadJSValues("-10px minmax(16px, 32px)", "minmax(10%, 15%) -10vw");

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

    r185745 r189911  
    1616testGridTemplatesValues(document.getElementById("gridWithCalcInsideMinMax"), "minmax(10%, 15px)", "minmax(20px, 50%)");
    1717testGridTemplatesValues(document.getElementById("gridWithCalcComplexInsideMinMax"), "minmax(10%, calc(50% + 15px))", "minmax(calc(20px + 10%), 50%)");
     18testGridTemplatesValues(document.getElementById("gridWithAutoInsideMinMax"), "minmax(auto, 20px)", "minmax(-webkit-min-content, auto)");
    1819
    1920debug("");
    … …  
    5556// A leading '+' is allowed.
    5657testNonGridTemplatesSetJSValues("+3fr", "+4fr", "3fr", "4fr", "3fr", "4fr");
     58testNonGridTemplatesSetJSValues("minmax(auto, 8vh)", "minmax(10vw, auto)", "minmax(auto, 48px)", "minmax(80px, auto)");
    5759
    5860debug("");
    … …  
    6466// No breadth value and no comma.
    6567testGridTemplatesSetBadJSValues("minmax()", "minmax(30px 30% 30em)");
    66 // Auto is not allowed inside minmax.
    67 testGridTemplatesSetBadJSValues("minmax(auto, 8vh)", "minmax(10vw, auto)");
    6868testGridTemplatesSetBadJSValues("-2fr", "3ffr");
    6969testGridTemplatesSetBadJSValues("-2.05fr", "+-3fr");

  • trunk/Source/WebCore/ChangeLog

    r189910 r189911  
     12015-09-15  Sergio Villar Senin  <svillar@igalia.com>
     2
     3        [CSS Grid Layout]  Using automatic (instead of min-content) minimums for 'auto' tracks
     4        https://bugs.webkit.org/show_bug.cgi?id=142329
     5
     6        Reviewed by Darin Adler.
     7
     8        Based on Blink's r198697 by <svillar@igalia.com> and r200478 by <jfernandez@igalia.com>
     9
     10        More precisely (syntax-wise), this would allow 'auto' to be used within the
     11        minmax() function (it's currently forbidden) and have the 'auto' keyword map
     12        to minmax(auto, auto) instead of minmax(min-content, max-content).
     13        - As a minimum, 'auto' would mean "use the specified minimum size, or if
     14        that is auto, treat as 0 or min-content per Flexbox rules".
     15        - As a maximum, 'auto' would mean "use the max-content size".
     16
     17        Regarding the implementation, a new phase is added to the track sizing
     18        algorithm called ResolveIntrinsicMinimums (the former ResolveIntrinsicMinimums
     19        is now called ResolveContentBasedMinimums which does not include 'auto'
     20        resolution) which will be run before any other. This phase uses the minimum
     21        size of grid items (as specified by min-width/height).
     22
     23        Tests: fast/css-grid-layout/grid-automatic-minimum-for-auto-columns.html
     24               fast/css-grid-layout/grid-automatic-minimum-for-auto-rows.html
     25
     26        * css/CSSParser.cpp:
     27        (WebCore::CSSParser::parseGridBreadth):
     28        * rendering/RenderGrid.cpp:
     29        (WebCore::RenderGrid::computeUsedBreadthOfMinLength):
     30        (WebCore::RenderGrid::computeUsedBreadthOfMaxLength):
     31        (WebCore::RenderGrid::minSizeForChild):
     32        (WebCore::RenderGrid::resolveContentBasedTrackSizingFunctions):
     33        (WebCore::RenderGrid::resolveContentBasedTrackSizingFunctionsForNonSpanningItems):
     34        (WebCore::RenderGrid::trackSizeForTrackSizeComputationPhase):
     35        (WebCore::RenderGrid::shouldProcessTrackForTrackSizeComputationPhase):
     36        (WebCore::RenderGrid::trackShouldGrowBeyondGrowthLimitsForTrackSizeComputationPhase):
     37        (WebCore::RenderGrid::markAsInfinitelyGrowableForTrackSizeComputationPhase):
     38        (WebCore::RenderGrid::updateTrackSizeForTrackSizeComputationPhase):
     39        (WebCore::RenderGrid::currentItemSizeForTrackSizeComputationPhase):
     40        * rendering/RenderGrid.h:
     41        * rendering/style/GridTrackSize.h:
     42        (WebCore::GridTrackSize::minTrackBreadth):
     43        (WebCore::GridTrackSize::maxTrackBreadth):
     44        (WebCore::GridTrackSize::cacheMinMaxTrackBreadthTypes):
     45        (WebCore::GridTrackSize::hasIntrinsicMinTrackBreadth):
     46        (WebCore::GridTrackSize::hasAutoMinTrackBreadth):
     47        (WebCore::GridTrackSize::hasAutoMaxTrackBreadth):
     48        (WebCore::GridTrackSize::hasMaxContentOrAutoMaxTrackBreadth):
     49        (WebCore::GridTrackSize::hasAutoOrMinContentMinTrackBreadthAndIntrinsicMaxTrackBreadth):
     50        (WebCore::GridTrackSize::hasMinContentMinTrackBreadthAndMinOrMaxContentMaxTrackBreadth): Deleted.
     51
    1522015-09-17  Javier Fernandez  <jfernandez@igalia.com>
    253

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

    r189830 r189911  
    57445744RefPtr<CSSPrimitiveValue> CSSParser::parseGridBreadth(CSSParserValue& value)
    57455745{
    5746     if (value.id == CSSValueWebkitMinContent || value.id == CSSValueWebkitMaxContent)
     5746    if (value.id == CSSValueWebkitMinContent || value.id == CSSValueWebkitMaxContent || value.id == CSSValueAuto)
    57475747        return CSSValuePool::singleton().createIdentifierValue(value.id);
    57485748

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

    r189910 r189911  
    470470
    471471    const Length& trackLength = gridLength.length();
    472     ASSERT(!trackLength.isAuto());
    473472    if (trackLength.isSpecified())
    474473        return computeUsedBreadthOfSpecifiedLength(direction, trackLength);
    475474
    476     ASSERT(trackLength.isMinContent() || trackLength.isMaxContent());
     475    ASSERT(trackLength.isMinContent() || trackLength.isAuto() || trackLength.isMaxContent());
    477476    return 0;
    478477}
    … …  
    484483
    485484    const Length& trackLength = gridLength.length();
    486     ASSERT(!trackLength.isAuto());
    487485    if (trackLength.isSpecified()) {
    488486        LayoutUnit computedBreadth = computeUsedBreadthOfSpecifiedLength(direction, trackLength);
    … …  
    491489    }
    492490
    493     ASSERT(trackLength.isMinContent() || trackLength.isMaxContent());
     491    ASSERT(trackLength.isMinContent() || trackLength.isAuto() || trackLength.isMaxContent());
    494492    return infinity;
    495493}
    … …  
    599597    child.layoutIfNeeded();
    600598    return child.logicalHeight() + child.marginLogicalHeight();
     599}
     600
     601LayoutUnit RenderGrid::minSizeForChild(RenderBox& child, GridTrackSizingDirection direction, Vector<GridTrack>& columnTracks)
     602{
     603    bool hasOrthogonalWritingMode = child.isHorizontalWritingMode() != isHorizontalWritingMode();
     604    // FIXME: Properly support orthogonal writing mode.
     605    if (hasOrthogonalWritingMode)
     606        return { };
     607
     608    const Length& childMinSize = direction == ForColumns ? child.style().logicalMinWidth() : child.style().logicalMinHeight();
     609    if (childMinSize.isAuto()) {
     610        // FIXME: Implement intrinsic aspect ratio support (transferred size in specs).
     611        return minContentForChild(child, direction, columnTracks);
     612    }
     613
     614    if (direction == ForColumns)
     615        return child.computeLogicalWidthInRegionUsing(MinSize, childMinSize, contentLogicalWidth(), this, nullptr);
     616
     617    return child.computeContentAndScrollbarLogicalHeightUsing(MinSize, childMinSize, child.logicalHeight()).valueOr(0);
    601618}
    602619
    … …  
    717734        GridItemsSpanGroupRange spanGroupRange = { it, std::upper_bound(it, end, *it) };
    718735        resolveContentBasedTrackSizingFunctionsForItems<ResolveIntrinsicMinimums>(direction, sizingData, spanGroupRange);
     736        resolveContentBasedTrackSizingFunctionsForItems<ResolveContentBasedMinimums>(direction, sizingData, spanGroupRange);
    719737        resolveContentBasedTrackSizingFunctionsForItems<ResolveMaxContentMinimums>(direction, sizingData, spanGroupRange);
    720738        resolveContentBasedTrackSizingFunctionsForItems<ResolveIntrinsicMaximums>(direction, sizingData, spanGroupRange);
    … …  
    739757    else if (trackSize.hasMaxContentMinTrackBreadth())
    740758        track.setBaseSize(std::max(track.baseSize(), maxContentForChild(gridItem, direction, columnTracks)));
     759    else if (trackSize.hasAutoMinTrackBreadth())
     760        track.setBaseSize(std::max(track.baseSize(), minSizeForChild(gridItem, direction, columnTracks)));
    741761
    742762    if (trackSize.hasMinContentMaxTrackBreadth())
    743763        track.setGrowthLimit(std::max(track.growthLimit(), minContentForChild(gridItem, direction, columnTracks)));
    744     else if (trackSize.hasMaxContentMaxTrackBreadth())
     764    else if (trackSize.hasMaxContentOrAutoMaxTrackBreadth())
    745765        track.setGrowthLimit(std::max(track.growthLimit(), maxContentForChild(gridItem, direction, columnTracks)));
    746766}
    … …  
    750770    switch (phase) {
    751771    case ResolveIntrinsicMinimums:
     772    case ResolveContentBasedMinimums:
    752773    case ResolveMaxContentMinimums:
    753774    case MaximizeTracks:
    … …  
    766787    switch (phase) {
    767788    case ResolveIntrinsicMinimums:
     789        return trackSize.hasIntrinsicMinTrackBreadth();
     790    case ResolveContentBasedMinimums:
    768791        return trackSize.hasMinOrMaxContentMinTrackBreadth();
    769792    case ResolveMaxContentMinimums:
    … …  
    772795        return trackSize.hasMinOrMaxContentMaxTrackBreadth();
    773796    case ResolveMaxContentMaximums:
    774         return trackSize.hasMaxContentMaxTrackBreadth();
     797        return trackSize.hasMaxContentOrAutoMaxTrackBreadth();
    775798    case MaximizeTracks:
    776799        ASSERT_NOT_REACHED();
    … …  
    786809    switch (phase) {
    787810    case ResolveIntrinsicMinimums:
    788         return trackSize.hasMinContentMinTrackBreadthAndMinOrMaxContentMaxTrackBreadth();
     811    case ResolveContentBasedMinimums:
     812        return trackSize.hasAutoOrMinContentMinTrackBreadthAndIntrinsicMaxTrackBreadth();
    789813    case ResolveMaxContentMinimums:
    790814        return trackSize.hasMaxContentMinTrackBreadthAndMaxContentMaxTrackBreadth();
    … …  
    805829    switch (phase) {
    806830    case ResolveIntrinsicMinimums:
     831    case ResolveContentBasedMinimums:
    807832    case ResolveMaxContentMinimums:
    808833        return;
    … …  
    827852    switch (phase) {
    828853    case ResolveIntrinsicMinimums:
     854    case ResolveContentBasedMinimums:
    829855    case ResolveMaxContentMinimums:
    830856        track.setBaseSize(track.plannedSize());
    … …  
    846872    switch (phase) {
    847873    case ResolveIntrinsicMinimums:
     874        return minSizeForChild(gridItem, direction, columnTracks);
     875    case ResolveContentBasedMinimums:
    848876    case ResolveIntrinsicMaximums:
    849877        return minContentForChild(gridItem, direction, columnTracks);

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

    r189910 r189911  
    9696    enum TrackSizeComputationPhase {
    9797        ResolveIntrinsicMinimums,
     98        ResolveContentBasedMinimums,
    9899        ResolveMaxContentMinimums,
    99100        ResolveIntrinsicMaximums,
    … …  
    118119
    119120    LayoutUnit logicalContentHeightForChild(RenderBox&, Vector<GridTrack>&);
     121    LayoutUnit minSizeForChild(RenderBox&, GridTrackSizingDirection, Vector<GridTrack>& columnTracks);
    120122    LayoutUnit minContentForChild(RenderBox&, GridTrackSizingDirection, Vector<GridTrack>& columnTracks);
    121123    LayoutUnit maxContentForChild(RenderBox&, GridTrackSizingDirection, Vector<GridTrack>& columnTracks);

  • trunk/Source/WebCore/rendering/style/GridTrackSize.h

    r184055 r189911  
    7171    }
    7272
    73     const GridLength& minTrackBreadth() const
    74     {
    75         if (m_minTrackBreadth.isLength() && m_minTrackBreadth.length().isAuto()) {
    76             static NeverDestroyed<const GridLength> minContent{Length(MinContent)};
    77             return minContent;
    78         }
    79         return m_minTrackBreadth;
    80     }
     73    const GridLength& minTrackBreadth() const { return m_minTrackBreadth; }
    8174
    82     const GridLength& maxTrackBreadth() const
    83     {
    84         if (m_maxTrackBreadth.isLength() && m_maxTrackBreadth.length().isAuto()) {
    85             static NeverDestroyed<const GridLength> maxContent{Length(MaxContent)};
    86             return maxContent;
    87         }
    88         return m_maxTrackBreadth;
    89     }
     75    const GridLength& maxTrackBreadth() const { return m_maxTrackBreadth; }
    9076
    9177    GridTrackSizeType type() const { return m_type; }
    … …  
    10288    void cacheMinMaxTrackBreadthTypes()
    10389    {
     90        m_minTrackBreadthIsAuto = minTrackBreadth().isLength() && minTrackBreadth().length().isAuto();
    10491        m_minTrackBreadthIsMinContent = minTrackBreadth().isLength() && minTrackBreadth().length().isMinContent();
    10592        m_minTrackBreadthIsMaxContent = minTrackBreadth().isLength() && minTrackBreadth().length().isMaxContent();
    10693        m_maxTrackBreadthIsMaxContent = maxTrackBreadth().isLength() && maxTrackBreadth().length().isMaxContent();
    10794        m_maxTrackBreadthIsMinContent = maxTrackBreadth().isLength() && maxTrackBreadth().length().isMinContent();
     95        m_maxTrackBreadthIsAuto = maxTrackBreadth().isLength() && maxTrackBreadth().length().isAuto();
    10896    }
    10997
     98    bool hasIntrinsicMinTrackBreadth() const { return m_minTrackBreadthIsMaxContent || m_minTrackBreadthIsMinContent || m_minTrackBreadthIsAuto; }
    11099    bool hasMinOrMaxContentMinTrackBreadth() const { return m_minTrackBreadthIsMaxContent || m_minTrackBreadthIsMinContent; }
     100    bool hasAutoMinTrackBreadth() const { return m_minTrackBreadthIsAuto; }
     101    bool hasAutoMaxTrackBreadth() const { return m_maxTrackBreadthIsAuto; }
    111102    bool hasMaxContentMaxTrackBreadth() const { return m_maxTrackBreadthIsMaxContent; }
     103    bool hasMaxContentOrAutoMaxTrackBreadth() const { return m_maxTrackBreadthIsMaxContent || m_maxTrackBreadthIsAuto; }
    112104    bool hasMinContentMaxTrackBreadth() const { return m_maxTrackBreadthIsMinContent; }
    113105    bool hasMinOrMaxContentMaxTrackBreadth() const { return m_maxTrackBreadthIsMaxContent || m_maxTrackBreadthIsMinContent; }
    114106    bool hasMaxContentMinTrackBreadth() const { return m_minTrackBreadthIsMaxContent; }
    115107    bool hasMinContentMinTrackBreadth() const { return m_minTrackBreadthIsMinContent; }
    116     bool hasMinContentMinTrackBreadthAndMinOrMaxContentMaxTrackBreadth() const { return m_minTrackBreadthIsMinContent && hasMinOrMaxContentMaxTrackBreadth(); }
    117108    bool hasMaxContentMinTrackBreadthAndMaxContentMaxTrackBreadth() const { return m_minTrackBreadthIsMaxContent && m_maxTrackBreadthIsMaxContent; }
     109    bool hasAutoOrMinContentMinTrackBreadthAndIntrinsicMaxTrackBreadth() const { return (m_minTrackBreadthIsMinContent || m_minTrackBreadthIsAuto) && (m_maxTrackBreadthIsAuto || hasMinOrMaxContentMaxTrackBreadth()); }
    118110
    119111private:
    … …  
    121113    GridLength m_minTrackBreadth;
    122114    GridLength m_maxTrackBreadth;
     115    bool m_minTrackBreadthIsAuto;
    123116    bool m_minTrackBreadthIsMaxContent;
    124117    bool m_minTrackBreadthIsMinContent;
     118    bool m_maxTrackBreadthIsAuto;
    125119    bool m_maxTrackBreadthIsMaxContent;
    126120    bool m_maxTrackBreadthIsMinContent;
Note: See TracChangeset for help on using the changeset viewer.