ChangeLog

2014-02-07  Sergio Villar Senin  <svillar@igalia.com>

        [CSS Grid Layout] Percentages of indefinite sizes should compute to auto

        https://bugs.webkit.org/show_bug.cgi?id=128173

        Reviewed by NOBODY (OOPS!).

        We should treat percentages of indefinite sizes as auto as

        mandated by the spec. Otherwise we would end up calculating a

        percentage of -1, the value we use to represent infinite.

        Added some test cases to the current tests.

        * rendering/RenderGrid.cpp:

        (WebCore::RenderGrid::gridTrackSize):

        * rendering/style/GridTrackSize.h:

        (WebCore::GridTrackSize::isPercentage):

2014-01-29  Sergio Villar Senin  <svillar@igalia.com>

        [CSS Grid Layout] getComputedStyle() is wrong for grid-definition-{columns|rows}

Source/WebCore/rendering/RenderGrid.cpp

@@const GridTrackSize& RenderGrid::gridTrackSize(GridTrackSizingDirection directio

    if (i >= trackStyles.size())

        return (direction == ForColumns) ? style().gridAutoColumns() : style().gridAutoRows();

408 return trackStyles[i];

    const GridTrackSize& trackSize = trackStyles[i];

    // If the logical width/height of the grid container is indefinite, percentage values are treated as <auto>.

    if (trackSize.isPercentage()) {

        Length logicalSize = direction == ForColumns ? style().logicalWidth() : style().logicalHeight();

        if (logicalSize.isIntrinsicOrAuto()) {

            DEFINE_STATIC_LOCAL(GridTrackSize, autoTrackSize, (Auto));

            return autoTrackSize;

        }

    }

    return trackSize;

}

size_t RenderGrid::explicitGridColumnCount() const

Source/WebCore/rendering/style/GridTrackSize.h

@@public:

    bool isContentSized() const { return m_minTrackBreadth.isContentSized() || m_maxTrackBreadth.isContentSized(); }

99 bool isPercentage() const { return m_type == LengthTrackSizing && length().isLength() && length().length().isPercent(); }

100

    bool operator==(const GridTrackSize& other) const

    {

        return m_type == other.m_type && m_minTrackBreadth == other.m_minTrackBreadth && m_maxTrackBreadth == other.m_maxTrackBreadth;

LayoutTests/ChangeLog

2014-02-07  Sergio Villar Senin  <svillar@igalia.com>

        [CSS Grid Layout] Percentages of indefinite sizes should compute to auto

        https://bugs.webkit.org/show_bug.cgi?id=128173

        Reviewed by NOBODY (OOPS!).

        Added a grid with indefinite sizes to check that we use auto to

        compute the track breadths instead of the specified percentages.

        * 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/grid-element-repeat-get-set-expected.txt:

        * fast/css-grid-layout/grid-element-repeat-get-set.html:

        * fast/css-grid-layout/named-grid-line-get-set-expected.txt:

        * fast/css-grid-layout/named-grid-line-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/grid.css:

        (.indefiniteSizeGrid):

2014-01-29  Sergio Villar Senin  <svillar@igalia.com>

        [CSS Grid Layout] getComputedStyle() is wrong for grid-definition-{columns|rows}

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

@@PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('-webkit

PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('-webkit-grid-definition-rows') is "15px"

PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('-webkit-grid-definition-columns') is "424px"

PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('-webkit-grid-definition-rows') is "162px"

PASS window.getComputedStyle(gridWithPercentWithoutSize, '').getPropertyValue('-webkit-grid-definition-columns') is "0px"

PASS window.getComputedStyle(gridWithPercentWithoutSize, '').getPropertyValue('-webkit-grid-definition-rows') is "0px"

PASS window.getComputedStyle(gridWithPercentWithoutSizeWithChildren, '').getPropertyValue('-webkit-grid-definition-columns') is "7px"

PASS window.getComputedStyle(gridWithPercentWithoutSizeWithChildren, '').getPropertyValue('-webkit-grid-definition-rows') is "11px"

PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('-webkit-grid-definition-columns') is "0px"

PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('-webkit-grid-definition-rows') is "0px"

PASS window.getComputedStyle(gridWithAutoWithChildrenElement, '').getPropertyValue('-webkit-grid-definition-columns') is "7px"

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

@@PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('-webkit

PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('-webkit-grid-definition-rows') is "17px 2px"

PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('-webkit-grid-definition-columns') is "424px 792px"

PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('-webkit-grid-definition-rows') is "162px 312px"

11PASS window.getComputedStyle(gridWithPercentWithoutSize, '').getPropertyValue('-webkit-grid-definition-columns') is "7px 0px"

12PASS window.getComputedStyle(gridWithPercentWithoutSize, '').getPropertyValue('-webkit-grid-definition-rows') is "11px 0px"

PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('-webkit-grid-definition-columns') is "0px 17px"

PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('-webkit-grid-definition-rows') is "0px 3px"

PASS window.getComputedStyle(gridWithEMElement, '').getPropertyValue('-webkit-grid-definition-columns') is "100px 120px"

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

@@if (window.testRunner)

<body>

<div class="grid gridWithFixed" id="gridWithFixedElement"></div>

<div class="grid gridWithPercent" id="gridWithPercentElement"></div>

<div class="indefiniteSizeGrid gridWithPercent" id="gridWithPercentWithoutSize">

    <div class="gridItem"></div>

</div>

<div class="grid gridWithAuto" id="gridWithAutoElement">

  <div class="gridItem2"></div>

</div>

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

@@if (window.testRunner)

<div class="grid gridWithNone" id="gridWithNoneElement"></div>

<div class="grid gridWithFixed" id="gridWithFixedElement"></div>

<div class="grid gridWithPercent" id="gridWithPercentElement"></div>

<div class="indefiniteSizeGrid gridWithPercent" id="gridWithPercentWithoutSize"></div>

<div class="indefiniteSizeGrid gridWithPercent" id="gridWithPercentWithoutSizeWithChildren">

    <div class="gridItem"></div>

</div>

<div class="grid gridWithAuto" id="gridWithAutoElement"></div>

<div class="grid gridWithAuto" id="gridWithAutoWithChildrenElement">

  <div class="gridItem"></div>

LayoutTests/fast/css-grid-layout/grid-element-repeat-get-set-expected.txt

@@On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE

Test getting grid-definition-columns and grid-definition-rows set through CSS

PASS window.getComputedStyle(singleSingleTrackRepeatWithSize, '').getPropertyValue('-webkit-grid-definition-columns') is "120px"

PASS window.getComputedStyle(singleSingleTrackRepeatWithSize, '').getPropertyValue('-webkit-grid-definition-rows') is "18px"

9PASS window.getComputedStyle(singleSingleTrackRepeatWithoutSize, '').getPropertyValue('-webkit-grid-definition-columns') is "0px"

10PASS window.getComputedStyle(singleSingleTrackRepeatWithoutSize, '').getPropertyValue('-webkit-grid-definition-rows') is "18px"

PASS window.getComputedStyle(twoSingleTrackRepeat, '').getPropertyValue('-webkit-grid-definition-columns') is "400px 400px"

PASS window.getComputedStyle(twoSingleTrackRepeat, '').getPropertyValue('-webkit-grid-definition-rows') is "0px 0px"

PASS window.getComputedStyle(twoSingleTrackRepeatWithChildren, '').getPropertyValue('-webkit-grid-definition-columns') is "400px 400px"

LayoutTests/fast/css-grid-layout/grid-element-repeat-get-set.html

@@if (window.testRunner)

</head>

<body>

<div class="grid singleSingleTrackRepeat" id="singleSingleTrackRepeatWithSize"></div>

79<div class="indefiniteSizeGrid singleSingleTrackRepeat" id="singleSingleTrackRepeatWithoutSize"></div>

<div class="grid twoSingleTrackRepeat" id="twoSingleTrackRepeat"></div>

<div class="grid twoSingleTrackRepeat" id="twoSingleTrackRepeatWithChildren">

    <div class="gridItem"></div>

@@if (window.testRunner)

    debug("Test getting grid-definition-columns and grid-definition-rows set through CSS");

    testGridDefinitionsValues(document.getElementById("singleSingleTrackRepeatWithSize"), "120px", "18px");

107 testGridDefinitionsValues(document.getElementById("singleSingleTrackRepeatWithoutSize"), "0px", "18px");

    testGridDefinitionsValues(document.getElementById("twoSingleTrackRepeat"), "400px 400px", "0px 0px");

    testGridDefinitionsValues(document.getElementById("twoSingleTrackRepeatWithChildren"), "400px 400px", "44px 77px");

    testGridDefinitionsValues(document.getElementById("twoDoubleTrackRepeat"), "33px 120px 0px 120px", "10px 77px 10px 0px");

LayoutTests/fast/css-grid-layout/named-grid-line-get-set-expected.txt

@@PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('-webkit

PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('-webkit-grid-definition-rows') is "first 15px"

PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('-webkit-grid-definition-columns') is "424px last"

PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('-webkit-grid-definition-rows') is "162px last"

PASS window.getComputedStyle(gridWithPercentWithoutSize, '').getPropertyValue('-webkit-grid-definition-columns') is "0px last"

PASS window.getComputedStyle(gridWithPercentWithoutSize, '').getPropertyValue('-webkit-grid-definition-rows') is "0px last"

PASS window.getComputedStyle(gridWithPercentWithoutSizeWithChildren, '').getPropertyValue('-webkit-grid-definition-columns') is "77px last"

PASS window.getComputedStyle(gridWithPercentWithoutSizeWithChildren, '').getPropertyValue('-webkit-grid-definition-rows') is "22px last"

PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('-webkit-grid-definition-columns') is "first 0px"

PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('-webkit-grid-definition-rows') is "0px last"

PASS window.getComputedStyle(gridWithAutoWithChildrenElement, '').getPropertyValue('-webkit-grid-definition-columns') is "first 77px"

LayoutTests/fast/css-grid-layout/named-grid-line-get-set.html

@@if (window.testRunner)

<body>

<div class="grid gridWithFixed" id="gridWithFixedElement"></div>

<div class="grid gridWithPercent" id="gridWithPercentElement"></div>

<div class="indefiniteSizeGrid gridWithPercent" id="gridWithPercentWithoutSize"></div>

<div class="indefiniteSizeGrid gridWithPercent" id="gridWithPercentWithoutSizeWithChildren">

    <div class="gridItem"></div>

</div>

<div class="grid gridWithAuto" id="gridWithAutoElement"></div>

<div class="grid gridWithAuto" id="gridWithAutoWithChildrenElement">

    <div class="gridItem"></div>

@@if (window.testRunner)

    debug("Test getting -webkit-grid-definition-columns and -webkit-grid-definition-rows set through CSS");

    testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), "first 10px", "first 15px");

    testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "424px last", "162px last");

69 testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSize"), "0px last", "0px last");

70 testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSizeWithChildren"), "77px last", "22px last");

    testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "first 0px", "0px last");

    testGridDefinitionsValues(document.getElementById("gridWithAutoWithChildrenElement"), "first 77px", "22px last");

    testGridDefinitionsValues(document.getElementById("gridWithMinMax"), "first 80px", "300px last");

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

@@description('Test that setting and getting grid-definition-columns and grid-defi

debug("Test getting |grid-definition-columns| and |grid-definition-rows| set through CSS");

testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), "7px 11px", "17px 2px");

testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "53% 99%", "27% 52%", "424px 792px", "162px 312px");

6testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSize"), "53% 99%", "27% 52%", "7px 0px", "11px 0px");

testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "auto auto", "auto auto", "0px 17px", "0px 3px");

testGridDefinitionsValues(document.getElementById("gridWithEMElement"), "100px 120px", "150px 170px");

testGridDefinitionsValues(document.getElementById("gridWithThreeItems"), "15px auto 100px", "120px 18px auto", "15px 0px 100px", "120px 18px 0px");

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

@@debug("Test getting -webkit-grid-definition-columns and -webkit-grid-definition-

testGridDefinitionsValues(document.getElementById("gridWithNoneElement"), "none", "none");

testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), "10px", "15px");

testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "424px", "162px");

7testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSize"), "0px", "0px");

8testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSizeWithChildren"), "7px", "11px");

testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "0px", "0px");

testGridDefinitionsValues(document.getElementById("gridWithAutoWithChildrenElement"), "7px", "11px");

testGridDefinitionsValues(document.getElementById("gridWithEMElement"), "100px", "150px");

LayoutTests/fast/css-grid-layout/resources/grid.css

    background-color: grey;

}

.indefiniteSizeGrid {

    display: -webkit-grid;

    background-color: grey;

    width: -webkit-min-content;

    height: auto;

}

.inline-grid {

    display: -webkit-inline-grid;

    background-color: grey;