Changeset 173156 in webkit


Ignore:
Timestamp:
Sep 1, 2014 2:33:07 AM (10 years ago)
Author:
svillar@igalia.com
Message:

[CSS Grid Layout] Resolved value of grid-template-* must include every track listed
​https://bugs.webkit.org/show_bug.cgi?id=136362

Reviewed by Darin Adler.

Source/WebCore:

Section 5.1.5 of the specs clearly states that the resolved value
for grid-template-* must include every listed track, whether
explicitly or implicitly created. We were only listing the
explicit grid tracks.

  • css/CSSComputedStyleDeclaration.cpp:

(WebCore::valueForGridTrackList):

LayoutTests:

Added new test cases to verify that both explicit and implicit
tracks are listed in grid-template-* resolved values. Also
refactored a testing function to improve the readability of the test.

  • 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/resources/grid-definitions-parsing-utils.js:

(testGridAutoDefinitionsValues):

Location:
trunk
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r173139 r173156  
     12014-08-29  Sergio Villar Senin  <svillar@igalia.com>
     2
     3        [CSS Grid Layout] Resolved value of grid-template-* must include every track listed
     4        https://bugs.webkit.org/show_bug.cgi?id=136362
     5
     6        Reviewed by Darin Adler.
     7
     8        Added new test cases to verify that both explicit and implicit
     9        tracks are listed in grid-template-* resolved values. Also
     10        refactored a testing function to improve the readability of the test.
     11
     12        * fast/css-grid-layout/grid-auto-columns-rows-get-set-expected.txt:
     13        * fast/css-grid-layout/grid-auto-columns-rows-get-set.html:
     14        * fast/css-grid-layout/resources/grid-definitions-parsing-utils.js:
     15        (testGridAutoDefinitionsValues):
     16
    1172014-08-30  Gyuyoung Kim  <gyuyoung.kim@samsung.com>
    218

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

    r158838 r173156  
    55
    66Test getting -webkit-grid-auto-columns and -webkit-grid-auto-rows set through CSS
    7 PASS getComputedStyle(gridAutoFixedFixed, '').getPropertyValue('-webkit-grid-auto-rows') is '30px'
    8 PASS getComputedStyle(gridAutoFixedFixed, '').getPropertyValue('-webkit-grid-auto-columns') is '50px'
    9 PASS getComputedStyle(gridAutoMinMax, '').getPropertyValue('-webkit-grid-auto-rows') is 'minmax(10%, 15px)'
    10 PASS getComputedStyle(gridAutoMinMax, '').getPropertyValue('-webkit-grid-auto-columns') is 'minmax(30%, 100px)'
    11 PASS getComputedStyle(gridAutoMinMaxContent, '').getPropertyValue('-webkit-grid-auto-rows') is '-webkit-min-content'
    12 PASS getComputedStyle(gridAutoMinMaxContent, '').getPropertyValue('-webkit-grid-auto-columns') is '-webkit-max-content'
     7PASS window.getComputedStyle(gridAutoFixedFixed, '').getPropertyValue('-webkit-grid-auto-rows') is "30px"
     8PASS window.getComputedStyle(gridAutoFixedFixed, '').getPropertyValue('-webkit-grid-auto-columns') is "50px"
     9PASS window.getComputedStyle(gridAutoMinMax, '').getPropertyValue('-webkit-grid-auto-rows') is "minmax(10%, 15px)"
     10PASS window.getComputedStyle(gridAutoMinMax, '').getPropertyValue('-webkit-grid-auto-columns') is "minmax(30%, 100px)"
     11PASS window.getComputedStyle(gridAutoMinMaxContent, '').getPropertyValue('-webkit-grid-auto-rows') is "-webkit-min-content"
     12PASS window.getComputedStyle(gridAutoMinMaxContent, '').getPropertyValue('-webkit-grid-auto-columns') is "-webkit-max-content"
     13
     14Test that getting grid-template-columns and grid-template-rows set through CSS lists every track listed whether implicitly or explicitly created
     15PASS window.getComputedStyle(gridAutoFixedFixedWithChildren, '').getPropertyValue('-webkit-grid-auto-rows') is "30px"
     16PASS window.getComputedStyle(gridAutoFixedFixedWithChildren, '').getPropertyValue('-webkit-grid-auto-columns') is "50px"
     17PASS window.getComputedStyle(gridAutoFixedFixedWithChildren, '').getPropertyValue('-webkit-grid-template-columns') is "50px"
     18PASS window.getComputedStyle(gridAutoFixedFixedWithChildren, '').getPropertyValue('-webkit-grid-template-rows') is "30px"
     19PASS window.getComputedStyle(gridAutoFixedFixedWithFixedFixedWithChildren, '').getPropertyValue('-webkit-grid-auto-rows') is "30px"
     20PASS window.getComputedStyle(gridAutoFixedFixedWithFixedFixedWithChildren, '').getPropertyValue('-webkit-grid-auto-columns') is "40px"
     21PASS window.getComputedStyle(gridAutoFixedFixedWithFixedFixedWithChildren, '').getPropertyValue('-webkit-grid-template-columns') is "20px 40px 40px"
     22PASS window.getComputedStyle(gridAutoFixedFixedWithFixedFixedWithChildren, '').getPropertyValue('-webkit-grid-template-rows') is "15px 30px 30px"
     23
     24Test that grid-template-* definitions are not affected by grid-auto-* definitions
     25PASS window.getComputedStyle(gridAutoFixedFixed, '').getPropertyValue('-webkit-grid-template-columns') is "none"
     26PASS window.getComputedStyle(gridAutoFixedFixed, '').getPropertyValue('-webkit-grid-template-rows') is "none"
     27PASS window.getComputedStyle(gridAutoMinMax, '').getPropertyValue('-webkit-grid-template-columns') is "none"
     28PASS window.getComputedStyle(gridAutoMinMax, '').getPropertyValue('-webkit-grid-template-rows') is "none"
     29PASS window.getComputedStyle(gridAutoMinMaxContent, '').getPropertyValue('-webkit-grid-template-columns') is "none"
     30PASS window.getComputedStyle(gridAutoMinMaxContent, '').getPropertyValue('-webkit-grid-template-rows') is "none"
    1331
    1432Test the initial value

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

    r168416 r173156  
    1818    -webkit-grid-auto-columns: -webkit-max-content;
    1919}
     20
     21
     22.gridAutoFixedFixedWithFixedFixed {
     23    -webkit-grid-auto-rows: 30px;
     24    -webkit-grid-auto-columns: 40px;
     25    -webkit-grid-template-rows: 15px;
     26    -webkit-grid-template-columns: 20px;
     27}
     28
    2029</style>
    2130<script src="../../resources/js-test-pre.js"></script>
     31<script src="resources/grid-definitions-parsing-utils.js"></script>
    2232</head>
    2333<body>
    … …  
    2535<div class="grid gridAutoMinMax" id="gridAutoMinMax"></div>
    2636<div class="grid gridAutoMinMaxContent" id="gridAutoMinMaxContent"></div>
     37<div class="grid gridAutoFixedFixed" id="gridAutoFixedFixedWithChildren">
     38    <div class="sizedToGridArea firstRowFirstColumn"></div>
     39</div>
     40<div class="grid gridAutoFixedFixedWithFixedFixed" id="gridAutoFixedFixedWithFixedFixedWithChildren">
     41    <div class="sizedToGridArea thirdRowAutoColumn"></div>
     42    <div class="sizedToGridArea autoRowThirdColumn"></div>
     43</div>
    2744<script>
    2845description('Test that setting and getting grid-auto-columns and grid-auto-rows works as expected');
    2946
    3047debug("Test getting -webkit-grid-auto-columns and -webkit-grid-auto-rows set through CSS");
    31 var gridAutoFixedFixed = document.getElementById("gridAutoFixedFixed");
    32 shouldBe("getComputedStyle(gridAutoFixedFixed, '').getPropertyValue('-webkit-grid-auto-rows')", "'30px'");
    33 shouldBe("getComputedStyle(gridAutoFixedFixed, '').getPropertyValue('-webkit-grid-auto-columns')", "'50px'");
     48testGridAutoDefinitionsValues(document.getElementById("gridAutoFixedFixed"), "30px", "50px");
     49testGridAutoDefinitionsValues(document.getElementById("gridAutoMinMax"), "minmax(10%, 15px)", "minmax(30%, 100px)");
     50testGridAutoDefinitionsValues(document.getElementById("gridAutoMinMaxContent"), "-webkit-min-content", "-webkit-max-content");
    3451
    35 var gridAutoMinMax = document.getElementById("gridAutoMinMax");
    36 shouldBe("getComputedStyle(gridAutoMinMax, '').getPropertyValue('-webkit-grid-auto-rows')", "'minmax(10%, 15px)'");
    37 shouldBe("getComputedStyle(gridAutoMinMax, '').getPropertyValue('-webkit-grid-auto-columns')", "'minmax(30%, 100px)'");
     52debug("");
     53debug("Test that getting grid-template-columns and grid-template-rows set through CSS lists every track listed whether implicitly or explicitly created");
     54testGridAutoDefinitionsValues(document.getElementById("gridAutoFixedFixedWithChildren"), "30px", "50px");
     55testGridTemplatesValues(document.getElementById("gridAutoFixedFixedWithChildren"), "50px", "30px");
     56testGridAutoDefinitionsValues(document.getElementById("gridAutoFixedFixedWithFixedFixedWithChildren"), "30px", "40px");
     57testGridTemplatesValues(document.getElementById("gridAutoFixedFixedWithFixedFixedWithChildren"), "20px", "15px", "20px 40px 40px", "15px 30px 30px");
    3858
    39 var gridAutoMinMaxContent = document.getElementById("gridAutoMinMaxContent");
    40 shouldBe("getComputedStyle(gridAutoMinMaxContent, '').getPropertyValue('-webkit-grid-auto-rows')", "'-webkit-min-content'");
    41 shouldBe("getComputedStyle(gridAutoMinMaxContent, '').getPropertyValue('-webkit-grid-auto-columns')", "'-webkit-max-content'");
     59debug("");
     60debug("Test that grid-template-* definitions are not affected by grid-auto-* definitions");
     61testGridTemplatesValues(document.getElementById("gridAutoFixedFixed"), "none", "none");
     62testGridTemplatesValues(document.getElementById("gridAutoMinMax"), "none", "none");
     63testGridTemplatesValues(document.getElementById("gridAutoMinMaxContent"), "none", "none");
    4264
    4365debug("");

  • trunk/LayoutTests/fast/css-grid-layout/resources/grid-definitions-parsing-utils.js

    r171183 r173156  
    6060    document.body.removeChild(element);
    6161}
     62
     63function testGridAutoDefinitionsValues(element, computedRowValue, computedColumnValue)
     64{
     65    window.element = element;
     66    var elementID = element.id || "element";
     67    shouldBeEqualToString("window.getComputedStyle(" + elementID + ", '').getPropertyValue('-webkit-grid-auto-rows')", computedRowValue);
     68    shouldBeEqualToString("window.getComputedStyle(" + elementID + ", '').getPropertyValue('-webkit-grid-auto-columns')", computedColumnValue);
     69}

  • trunk/Source/WebCore/ChangeLog

    r173155 r173156  
     12014-08-29  Sergio Villar Senin  <svillar@igalia.com>
     2
     3        [CSS Grid Layout] Resolved value of grid-template-* must include every track listed
     4        https://bugs.webkit.org/show_bug.cgi?id=136362
     5
     6        Reviewed by Darin Adler.
     7
     8        Section 5.1.5 of the specs clearly states that the resolved value
     9        for grid-template-* must include every listed track, whether
     10        explicitly or implicitly created. We were only listing the
     11        explicit grid tracks.
     12
     13        * css/CSSComputedStyleDeclaration.cpp:
     14        (WebCore::valueForGridTrackList):
     15
    1162014-09-01  Gyuyoung Kim  <gyuyoung.kim@samsung.com>
    217

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

    r173047 r173156  
    10181018    const Vector<GridTrackSize>& trackSizes = direction == ForColumns ? style->gridColumns() : style->gridRows();
    10191019    const OrderedNamedGridLinesMap& orderedNamedGridLines = direction == ForColumns ? style->orderedNamedGridColumnLines() : style->orderedNamedGridRowLines();
    1020 
    1021     // Handle the 'none' case here.
    1022     if (!trackSizes.size()) {
     1020    bool isRenderGrid = renderer && renderer->isRenderGrid();
     1021
     1022    // Handle the 'none' case.
     1023    bool trackListIsEmpty = trackSizes.isEmpty();
     1024    if (isRenderGrid && trackListIsEmpty) {
     1025        // For grids we should consider every listed track, whether implicitly or explicitly created. If we don't have
     1026        // any explicit track and there are no children then there are no implicit tracks. We cannot simply check the
     1027        // number of rows/columns in our internal grid representation because it's always at least 1x1 (see r143331).
     1028        trackListIsEmpty = !toRenderBlock(renderer)->firstChild();
     1029    }
     1030
     1031    if (trackListIsEmpty) {
    10231032        ASSERT(orderedNamedGridLines.isEmpty());
    10241033        return cssValuePool().createIdentifierValue(CSSValueNone);
    … …  
    10261035
    10271036    auto list = CSSValueList::createSpaceSeparated();
    1028     if (renderer && renderer->isRenderGrid()) {
     1037    if (isRenderGrid) {
    10291038        const Vector<LayoutUnit>& trackPositions = direction == ForColumns ? toRenderGrid(renderer)->columnPositions() : toRenderGrid(renderer)->rowPositions();
    10301039        // There are at least #tracks + 1 grid lines (trackPositions). Apart from that, the grid container can generate implicit grid tracks,
    … …  
    10321041        ASSERT(trackPositions.size() - 1 >= trackSizes.size());
    10331042
    1034         for (unsigned i = 0; i < trackSizes.size(); ++i) {
     1043        for (unsigned i = 0; i < trackPositions.size() - 1; ++i) {
    10351044            addValuesForNamedGridLinesAtIndex(orderedNamedGridLines, i, list.get());
    10361045            list.get().append(zoomAdjustedPixelValue(trackPositions[i + 1] - trackPositions[i], style));
Note: See TracChangeset for help on using the changeset viewer.