Attachment 346757 Details for Bug 188403 – Patch

[patch] Patch

bug-188403-20180808073512.patch (text/plain), 120.44 KB, created by Manuel Rego Casasnovas on 2018-08-07 22:35:14 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Manuel Rego Casasnovas

Created: 2018-08-07 22:35:14 PDT

Size: 120.44 KB

patch

obsolete

>Subversion Revision: 234668
>diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
>index ec38d74d5e8ffb0b4428d55ad0a2e572adf60074..97a62a2bfb619966c6ad3dc2c8c952b1deae5fd8 100644
>--- a/Source/WebCore/ChangeLog
>+++ b/Source/WebCore/ChangeLog
>@@ -1,3 +1,43 @@
>+2018-08-07  Manuel Rego Casasnovas  <rego@igalia.com>
>+
>+        [css-grid] Update behavior of percentage row tracks and gutters
>+        https://bugs.webkit.org/show_bug.cgi?id=188403
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        The CSSWG decided to change how percentage row tracks and gutters
>+        in a grid container with indefinite height are resolved.
>+
>+        The CSSWG issues are:
>+        - https://github.com/w3c/csswg-drafts/issues/1921
>+        - https://github.com/w3c/csswg-drafts/issues/509
>+
>+        So far they were resolved as "auto", like it happens with
>+        percentage heights in regular blocks. But now they're going to behave
>+        similar to what happens in the columns axis, they would be ignored
>+        to compute the intrinsic height.
>+        This causes that we need to repeat the track sizing algorithm
>+        when we have a grid container with indefinite height
>+        that has some percentage rows using the intrinsic height
>+        calculated on the first pass. Then the percentages will be resolved
>+        against the intrinsic height.
>+
>+        Tests: imported/w3c/web-platform-tests/css/css-grid/alignment/grid-content-alignment-second-pass-001.html
>+               imported/w3c/web-platform-tests/css/css-grid/alignment/grid-content-alignment-second-pass-002.html
>+               imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-001.html
>+               imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-002.html
>+
>+        * rendering/GridTrackSizingAlgorithm.cpp:
>+        (WebCore::GridTrackSizingAlgorithm::gridTrackSize const):
>+        (WebCore::GridTrackSizingAlgorithm::initializeTrackSizes):
>+        (WebCore::GridTrackSizingAlgorithm::setup):
>+        (WebCore::GridTrackSizingAlgorithm::reset):
>+        * rendering/GridTrackSizingAlgorithm.h:
>+        * rendering/RenderGrid.cpp:
>+        (WebCore::RenderGrid::availableSpaceForGutters const):
>+        (WebCore::RenderGrid::repeatTracksSizingIfNeeded):
>+        (WebCore::RenderGrid::layoutBlock):
>+
> 2018-08-07  Ryan Haddad  <ryanhaddad@apple.com>
> 
>         Unreviewed, suppress warnings to fix the build.
>diff --git a/Source/WebCore/rendering/GridTrackSizingAlgorithm.cpp b/Source/WebCore/rendering/GridTrackSizingAlgorithm.cpp
>index df588e19473a5a1c6e1061922126b8ed338b5e14..753fbb812680acacf91c057aadb4f2ca529d6a93 100644
>--- a/Source/WebCore/rendering/GridTrackSizingAlgorithm.cpp
>+++ b/Source/WebCore/rendering/GridTrackSizingAlgorithm.cpp
>@@ -587,16 +587,11 @@ GridTrackSize GridTrackSizingAlgorithm::gridTrackSize(GridTrackSizingDirection d
> 
>     // FIXME: Ensure this condition for determining whether a size is indefinite or not is working
>     // correctly for orthogonal flows.
>-    if (minTrackBreadth.isPercentage() || maxTrackBreadth.isPercentage()) {
>-        // FIXME: we should remove the second check later. We need it because during the second
>-        // iteration of the algorithm we set definite sizes in the grid container so percents would
>-        // not resolve properly (it would think that the height is definite when it is not).
>-        if (!availableSpace(direction) || (direction == ForRows && !m_renderGrid->hasDefiniteLogicalHeight())) {
>-            if (minTrackBreadth.isPercentage())
>-                minTrackBreadth = Length(Auto);
>-            if (maxTrackBreadth.isPercentage())
>-                maxTrackBreadth = Length(Auto);
>-        }
>+    if (!availableSpace(direction) && (minTrackBreadth.isPercentage() || maxTrackBreadth.isPercentage())) {
>+        if (minTrackBreadth.isPercentage())
>+            minTrackBreadth = Length(Auto);
>+        if (maxTrackBreadth.isPercentage())
>+            maxTrackBreadth = Length(Auto);
>     }
> 
>     // Flex sizes are invalid as a min sizing function. However we still can have a flexible |minTrackBreadth|
>@@ -970,9 +965,11 @@ void GridTrackSizingAlgorithm::initializeTrackSizes()
>     ASSERT(m_contentSizedTracksIndex.isEmpty());
>     ASSERT(m_flexibleSizedTracksIndex.isEmpty());
>     ASSERT(m_autoSizedTracksForStretchIndex.isEmpty());
>+    ASSERT(!m_hasPercentSizedRowsIndefiniteHeight);
> 
>     Vector<GridTrack>& allTracks = tracks(m_direction);
>     const bool hasDefiniteFreeSpace = !!availableSpace();
>+    const bool indefiniteHeight = m_direction == ForRows && !m_renderGrid->hasDefiniteLogicalHeight();
>     LayoutUnit maxSize = std::max(LayoutUnit(), availableSpace().value_or(LayoutUnit()));
>     // 1. Initialize per Grid track variables.
>     for (unsigned i = 0; i < allTracks.size(); ++i) {
>@@ -994,6 +991,12 @@ void GridTrackSizingAlgorithm::initializeTrackSizes()
>             m_flexibleSizedTracksIndex.append(i);
>         if (trackSize.hasAutoMaxTrackBreadth() && !trackSize.isFitContent())
>             m_autoSizedTracksForStretchIndex.append(i);
>+
>+        if (!m_hasPercentSizedRowsIndefiniteHeight && indefiniteHeight) {
>+            auto& rawTrackSize = rawGridTrackSize(m_direction, i);
>+            if (rawTrackSize.minTrackBreadth().isPercentage() || rawTrackSize.maxTrackBreadth().isPercentage())
>+                m_hasPercentSizedRowsIndefiniteHeight = true;
>+        }
>     }
> }
> 
>@@ -1145,6 +1148,7 @@ void GridTrackSizingAlgorithm::setup(GridTrackSizingDirection direction, unsigne
>     tracks(direction).resize(numTracks);
> 
>     m_needsSetup = false;
>+    m_hasPercentSizedRowsIndefiniteHeight = false;
> }
> 
> void GridTrackSizingAlgorithm::run()
>@@ -1190,6 +1194,7 @@ void GridTrackSizingAlgorithm::reset()
>     m_autoSizedTracksForStretchIndex.shrink(0);
>     setAvailableSpace(ForRows, std::nullopt);
>     setAvailableSpace(ForColumns, std::nullopt);
>+    m_hasPercentSizedRowsIndefiniteHeight = false;
> }
> 
> #ifndef NDEBUG
>diff --git a/Source/WebCore/rendering/GridTrackSizingAlgorithm.h b/Source/WebCore/rendering/GridTrackSizingAlgorithm.h
>index 75bc2101d97f8250032ee6ac9f87b6bcffcb463d..725f4a0569f3e6e248e73281eaff60650ad65393 100644
>--- a/Source/WebCore/rendering/GridTrackSizingAlgorithm.h
>+++ b/Source/WebCore/rendering/GridTrackSizingAlgorithm.h
>@@ -116,6 +116,10 @@ public:
>     std::optional<LayoutUnit> availableSpace(GridTrackSizingDirection direction) const { return direction == ForColumns ? m_availableSpaceColumns : m_availableSpaceRows; }
>     void setAvailableSpace(GridTrackSizingDirection, std::optional<LayoutUnit>);
> 
>+    LayoutUnit computeTrackBasedSize() const;
>+
>+    bool hasAnyPercentSizedRowsIndefiniteHeight() const { return m_hasPercentSizedRowsIndefiniteHeight; }
>+
> #ifndef NDEBUG
>     bool tracksAreWiderThanMinTrackBreadth() const;
> #endif
>@@ -124,7 +128,6 @@ private:
>     std::optional<LayoutUnit> availableSpace() const { return availableSpace(m_direction); }
>     const GridTrackSize& rawGridTrackSize(GridTrackSizingDirection, unsigned translatedIndex) const;
>     LayoutUnit assumedRowsSizeForOrthogonalChild(const RenderBox&) const;
>-    LayoutUnit computeTrackBasedSize() const;
> 
>     // Helper methods for step 1. initializeTrackSizes().
>     LayoutUnit initialBaseSize(const GridTrackSize&) const;
>@@ -160,6 +163,7 @@ private:
>     bool isValidTransition() const;
> 
>     bool m_needsSetup { true };
>+    bool m_hasPercentSizedRowsIndefiniteHeight { false };
>     std::optional<LayoutUnit> m_availableSpaceRows;
>     std::optional<LayoutUnit> m_availableSpaceColumns;
> 
>diff --git a/Source/WebCore/rendering/RenderGrid.cpp b/Source/WebCore/rendering/RenderGrid.cpp
>index 3dd28d3abcd53f2ed6ef19bdd0747eb614508793..b903ef00ace2f694bd0dc3b6964d76e0ed6ab79c 100644
>--- a/Source/WebCore/rendering/RenderGrid.cpp
>+++ b/Source/WebCore/rendering/RenderGrid.cpp
>@@ -144,20 +144,7 @@ std::optional<LayoutUnit> RenderGrid::availableSpaceForGutters(GridTrackSizingDi
>     if (gapLength.isNormal() || !gapLength.length().isPercentOrCalculated())
>         return std::nullopt;
> 
>-    return isRowAxis ? availableLogicalWidth() : availableLogicalHeightForPercentageComputation();
>-}
>-
>-LayoutUnit RenderGrid::computeTrackBasedLogicalHeight() const
>-{
>-    LayoutUnit logicalHeight;
>-
>-    auto& allRows = m_trackSizingAlgorithm.tracks(ForRows);
>-    for (const auto& row : allRows)
>-        logicalHeight += row.baseSize();
>-
>-    logicalHeight += guttersSize(m_grid, ForRows, 0, allRows.size(), availableSpaceForGutters(ForRows));
>-
>-    return logicalHeight;
>+    return isRowAxis ? availableLogicalWidth() : contentLogicalHeight();
> }
> 
> void RenderGrid::computeTrackSizesForDefiniteSize(GridTrackSizingDirection direction, LayoutUnit availableSpace)
>@@ -181,7 +168,7 @@ void RenderGrid::repeatTracksSizingIfNeeded(LayoutUnit availableSpaceForColumns,
>     // a new cycle of the sizing algorithm; there may be more. In addition, not all the
>     // cases with orthogonal flows require this extra cycle; we need a more specific
>     // condition to detect whether child's min-content contribution has changed or not.
>-    if (m_grid.hasAnyOrthogonalGridItem()) {
>+    if (m_grid.hasAnyOrthogonalGridItem() || m_trackSizingAlgorithm.hasAnyPercentSizedRowsIndefiniteHeight()) {
>         computeTrackSizesForDefiniteSize(ForColumns, availableSpaceForColumns);
>         computeTrackSizesForDefiniteSize(ForRows, availableSpaceForRows);
>     }
>@@ -258,7 +245,7 @@ void RenderGrid::layoutBlock(bool relayoutChildren, LayoutUnit)
>             *m_maxContentHeight += scrollbarHeight;
>         } else
>             computeTrackSizesForDefiniteSize(ForRows, availableLogicalHeight(ExcludeMarginBorderPadding));
>-        LayoutUnit trackBasedLogicalHeight = computeTrackBasedLogicalHeight() + borderAndPaddingLogicalHeight() + scrollbarLogicalHeight();
>+        LayoutUnit trackBasedLogicalHeight = m_trackSizingAlgorithm.computeTrackBasedSize() + borderAndPaddingLogicalHeight() + scrollbarLogicalHeight();
>         setLogicalHeight(trackBasedLogicalHeight);
> 
>         LayoutUnit oldClientAfterEdge = clientLogicalBottom();
>diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
>index 27315aac57d204301788c588959c8883c59bcc53..ff52aa83c45c95ab4a62168b8ecd4c3983f5504d 100644
>--- a/LayoutTests/ChangeLog
>+++ b/LayoutTests/ChangeLog
>@@ -1,3 +1,28 @@
>+2018-08-07  Manuel Rego Casasnovas  <rego@igalia.com>
>+
>+        [css-grid] Update behavior of percentage row tracks and gutters
>+        https://bugs.webkit.org/show_bug.cgi?id=188403
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        Update tests as needed according to the new behavior.
>+
>+        * TestExpectations: Two grid gutters tests from WPT css-align suite are passing now.
>+        * 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-gutters-as-percentage-expected.txt:
>+        * fast/css-grid-layout/grid-gutters-as-percentage.html:
>+        * fast/css-grid-layout/grid-track-sizing-with-percentages-and-orthogonal-flows-expected.txt:
>+        * fast/css-grid-layout/grid-track-sizing-with-percentages-and-orthogonal-flows.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/nested-grid-expected.html:
>+        * fast/css-grid-layout/percent-track-breadths-regarding-container-size.html:
>+        * fast/css-grid-layout/resources/grid-columns-rows-get-set-multiple.js:
>+        * fast/css-grid-layout/resources/grid-columns-rows-get-set.js:
>+
> 2018-08-07  Wenson Hsieh  <wenson_hsieh@apple.com>
> 
>         REGRESSION (r233778): Text selection sometimes cannot be extended in iframes
>diff --git a/LayoutTests/imported/w3c/ChangeLog b/LayoutTests/imported/w3c/ChangeLog
>index 7989a883d956d87048873d94c320e6b58a89de75..4b39da5e0d8dcfd916215ad89d600eecddf05362 100644
>--- a/LayoutTests/imported/w3c/ChangeLog
>+++ b/LayoutTests/imported/w3c/ChangeLog
>@@ -1,3 +1,24 @@
>+2018-08-07  Manuel Rego Casasnovas  <rego@igalia.com>
>+
>+        [css-grid] Update behavior of percentage row tracks and gutters
>+        https://bugs.webkit.org/show_bug.cgi?id=188403
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        Import tests from WPT related to this issue.
>+
>+        * web-platform-tests/css/css-grid/alignment/grid-content-alignment-second-pass-001-expected.txt: Added.
>+        * web-platform-tests/css/css-grid/alignment/grid-content-alignment-second-pass-001.html: Added.
>+        * web-platform-tests/css/css-grid/alignment/grid-content-alignment-second-pass-002-expected.txt: Added.
>+        * web-platform-tests/css/css-grid/alignment/grid-content-alignment-second-pass-002.html: Added.
>+        * web-platform-tests/css/css-grid/alignment/w3c-import.log:
>+        * web-platform-tests/css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-001-expected.txt: Added.
>+        * web-platform-tests/css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-001.html: Added.
>+        * web-platform-tests/css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-002-expected.txt: Added.
>+        * web-platform-tests/css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-002.html: Added.
>+        * web-platform-tests/css/css-grid/grid-definition/w3c-import.log:
>+        * web-platform-tests/css/css-grid/grid-layout-properties.html: Update test to reflect the new behavior.
>+
> 2018-08-06  Ryosuke Niwa  <rniwa@webkit.org>
> 
>         HTML parser should execute custom element reactions for setting attributes immediately after creating a custom element
>diff --git a/LayoutTests/TestExpectations b/LayoutTests/TestExpectations
>index 74f649272eed43f9928322b174995df2942635fa..6094b4943288fc17836aaaa409296a63435b4e83 100644
>--- a/LayoutTests/TestExpectations
>+++ b/LayoutTests/TestExpectations
>@@ -2154,7 +2154,6 @@ imported/w3c/web-platform-tests/css/css-shapes/shape-outside/shape-image/gradien
> imported/w3c/web-platform-tests/css/css-display/run-in/run-in-basic-005.xht [ ImageOnlyFailure ]
> imported/w3c/web-platform-tests/css/css-display/run-in/run-in-basic-009.xht [ ImageOnlyFailure ]
> imported/w3c/web-platform-tests/css/mediaqueries/viewport-script-dynamic.html [ ImageOnlyFailure ]
>-imported/w3c/web-platform-tests/css/css-grid/alignment/grid-gutters-009.html [ ImageOnlyFailure ]
> imported/w3c/web-platform-tests/css/css-display/run-in/run-in-clear-002.xht [ ImageOnlyFailure ]
> imported/w3c/web-platform-tests/css/css-display/run-in/run-in-restyle-003.xht [ ImageOnlyFailure ]
> imported/w3c/web-platform-tests/css/css-display/run-in/run-in-contains-table-column-group-001.xht [ ImageOnlyFailure ]
>@@ -2187,7 +2186,6 @@ imported/w3c/web-platform-tests/css/selectors/selection-image-001.html [ ImageOn
> imported/w3c/web-platform-tests/css/css-display/run-in/run-in-contains-inline-block-001.xht [ ImageOnlyFailure ]
> imported/w3c/web-platform-tests/css/css-display/run-in/run-in-basic-002.xht [ ImageOnlyFailure ]
> imported/w3c/web-platform-tests/css/css-display/run-in/run-in-table-row-between-003.xht [ ImageOnlyFailure ]
>-imported/w3c/web-platform-tests/css/css-grid/alignment/grid-gutters-010.html [ ImageOnlyFailure ]
> imported/w3c/web-platform-tests/css/css-display/run-in/run-in-breaking-001.xht [ ImageOnlyFailure ]
> imported/w3c/web-platform-tests/css/css-ui/text-overflow-027.html [ ImageOnlyFailure ]
> imported/w3c/web-platform-tests/css/css-text-decor/text-emphasis-style-012.html [ ImageOnlyFailure ]
>diff --git a/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-expected.txt b/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-expected.txt
>index 06368e2c7efde1e174002ed48ed0141d4762c859..f71e54e2f6637d733742ff218fdd8e064278ae14 100644
>--- a/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-expected.txt
>+++ b/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-expected.txt
>@@ -9,15 +9,15 @@ PASS window.getComputedStyle(gridWithNoneElement, '').getPropertyValue('grid-tem
> PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-template-columns') is "10px"
> PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-template-rows') is "15px"
> PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-template-columns') is "400px"
>-PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-template-rows') is "162px"
>+PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-template-rows') is "150px"
> PASS window.getComputedStyle(gridWithPercentWithoutSize, '').getPropertyValue('grid-template-columns') is "0px"
> PASS window.getComputedStyle(gridWithPercentWithoutSize, '').getPropertyValue('grid-template-rows') is "0px"
> PASS window.getComputedStyle(gridWithPercentWithoutSizeWithChildren, '').getPropertyValue('grid-template-columns') is "3.5px"
>-PASS window.getComputedStyle(gridWithPercentWithoutSizeWithChildren, '').getPropertyValue('grid-template-rows') is "11px"
>+PASS window.getComputedStyle(gridWithPercentWithoutSizeWithChildren, '').getPropertyValue('grid-template-rows') is "4px"
> PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-template-columns') is "0px"
> PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-template-rows') is "0px"
> PASS window.getComputedStyle(gridWithAutoWithChildrenElement, '').getPropertyValue('grid-template-columns') is "7px"
>-PASS window.getComputedStyle(gridWithAutoWithChildrenElement, '').getPropertyValue('grid-template-rows') is "11px"
>+PASS window.getComputedStyle(gridWithAutoWithChildrenElement, '').getPropertyValue('grid-template-rows') is "16px"
> PASS window.getComputedStyle(gridWithEMElement, '').getPropertyValue('grid-template-columns') is "100px"
> PASS window.getComputedStyle(gridWithEMElement, '').getPropertyValue('grid-template-rows') is "150px"
> PASS window.getComputedStyle(gridWithViewPortPercentageElement, '').getPropertyValue('grid-template-columns') is "64px"
>@@ -27,11 +27,11 @@ PASS window.getComputedStyle(gridWithMinMaxElement, '').getPropertyValue('grid-t
> PASS window.getComputedStyle(gridWithMinContentElement, '').getPropertyValue('grid-template-columns') is "0px"
> PASS window.getComputedStyle(gridWithMinContentElement, '').getPropertyValue('grid-template-rows') is "0px"
> PASS window.getComputedStyle(gridWithMinContentWithChildrenElement, '').getPropertyValue('grid-template-columns') is "17px"
>-PASS window.getComputedStyle(gridWithMinContentWithChildrenElement, '').getPropertyValue('grid-template-rows') is "11px"
>+PASS window.getComputedStyle(gridWithMinContentWithChildrenElement, '').getPropertyValue('grid-template-rows') is "16px"
> PASS window.getComputedStyle(gridWithMaxContentElement, '').getPropertyValue('grid-template-columns') is "0px"
> PASS window.getComputedStyle(gridWithMaxContentElement, '').getPropertyValue('grid-template-rows') is "0px"
> PASS window.getComputedStyle(gridWithMaxContentWithChildrenElement, '').getPropertyValue('grid-template-columns') is "17px"
>-PASS window.getComputedStyle(gridWithMaxContentWithChildrenElement, '').getPropertyValue('grid-template-rows') is "11px"
>+PASS window.getComputedStyle(gridWithMaxContentWithChildrenElement, '').getPropertyValue('grid-template-rows') is "16px"
> PASS window.getComputedStyle(gridWithFractionElement, '').getPropertyValue('grid-template-columns') is "800px"
> PASS window.getComputedStyle(gridWithFractionElement, '').getPropertyValue('grid-template-rows') is "600px"
> PASS window.getComputedStyle(gridWithCalcElement, '').getPropertyValue('grid-template-columns') is "150px"
>@@ -43,9 +43,9 @@ PASS window.getComputedStyle(gridWithCalcInsideMinMaxElement, '').getPropertyVal
> PASS window.getComputedStyle(gridWithCalcComplexInsideMinMaxElement, '').getPropertyValue('grid-template-columns') is "415px"
> PASS window.getComputedStyle(gridWithCalcComplexInsideMinMaxElement, '').getPropertyValue('grid-template-rows') is "300px"
> PASS window.getComputedStyle(gridWithAutoInsideMinMaxElement, '').getPropertyValue('grid-template-columns') is "20px"
>-PASS window.getComputedStyle(gridWithAutoInsideMinMaxElement, '').getPropertyValue('grid-template-rows') is "11px"
>+PASS window.getComputedStyle(gridWithAutoInsideMinMaxElement, '').getPropertyValue('grid-template-rows') is "16px"
> PASS window.getComputedStyle(gridWithFitContentFunctionElement, '').getPropertyValue('grid-template-columns') is "7px"
>-PASS window.getComputedStyle(gridWithFitContentFunctionElement, '').getPropertyValue('grid-template-rows') is "11px"
>+PASS window.getComputedStyle(gridWithFitContentFunctionElement, '').getPropertyValue('grid-template-rows') is "16px"
> 
> Test getting wrong values for grid-template-columns and grid-template-rows through CSS (they should resolve to the default: 'none')
> PASS window.getComputedStyle(gridWithFitContentElement, '').getPropertyValue('grid-template-columns') is "none"
>diff --git a/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-multiple-expected.txt b/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-multiple-expected.txt
>index 78fd7335e37de690db2a9e591f707d99bc11fe08..cf10b39cf430074aa8bcaa08cab1707354e749a2 100644
>--- a/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-multiple-expected.txt
>+++ b/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-multiple-expected.txt
>@@ -7,9 +7,9 @@ Test getting |grid-template-columns| and |grid-template-rows| set through CSS
> PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-template-columns') is "7px 11px"
> PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-template-rows') is "17px 2px"
> PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-template-columns') is "400px 800px"
>-PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-template-rows') is "162px 312px"
>+PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-template-rows') is "150px 450px"
> PASS window.getComputedStyle(gridWithPercentWithoutSize, '').getPropertyValue('grid-template-columns') is "3.5px 7px"
>-PASS window.getComputedStyle(gridWithPercentWithoutSize, '').getPropertyValue('grid-template-rows') is "11px 0px"
>+PASS window.getComputedStyle(gridWithPercentWithoutSize, '').getPropertyValue('grid-template-rows') is "4px 12px"
> PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-template-columns') is "0px 17px"
> PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-template-rows') is "0px 3px"
> PASS window.getComputedStyle(gridWithEMElement, '').getPropertyValue('grid-template-columns') is "100px 120px"
>@@ -23,7 +23,7 @@ PASS window.getComputedStyle(gridWithFitContentAndFitAvailable, '').getPropertyV
> PASS window.getComputedStyle(gridWithMinMaxContent, '').getPropertyValue('grid-template-columns') is "0px 0px"
> PASS window.getComputedStyle(gridWithMinMaxContent, '').getPropertyValue('grid-template-rows') is "0px 0px"
> PASS window.getComputedStyle(gridWithMinMaxContentWithChildrenElement, '').getPropertyValue('grid-template-columns') is "7px 17px"
>-PASS window.getComputedStyle(gridWithMinMaxContentWithChildrenElement, '').getPropertyValue('grid-template-rows') is "11px 3px"
>+PASS window.getComputedStyle(gridWithMinMaxContentWithChildrenElement, '').getPropertyValue('grid-template-rows') is "16px 3px"
> PASS window.getComputedStyle(gridWithMinMaxAndFixed, '').getPropertyValue('grid-template-columns') is "240px 15px"
> PASS window.getComputedStyle(gridWithMinMaxAndFixed, '').getPropertyValue('grid-template-rows') is "120px 210px"
> PASS window.getComputedStyle(gridWithMinMaxAndMinMaxContent, '').getPropertyValue('grid-template-columns') is "240px 15px"
>diff --git a/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-multiple.html b/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-multiple.html
>index 55de5811b6d09421da7f0598a737fa903b8c1912..3c989ea6b358934ca319db6e229b41e7e04ebc87 100644
>--- a/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-multiple.html
>+++ b/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-multiple.html
>@@ -14,7 +14,7 @@
>     grid-column: 1;
>     grid-row: 1;
>     width: 7px;
>-    height: 11px;
>+    height: 16px;
> }
> .gridItem2 {
>     grid-column: 2;
>@@ -28,7 +28,7 @@
> }
> .gridWithPercent {
>     grid-template-columns: 50% 100%;
>-    grid-template-rows: 27% 52%;
>+    grid-template-rows: 25% 75%;
> }
> .gridWithAuto {
>     grid-template-columns: auto auto;
>diff --git a/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set.html b/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set.html
>index dc6e6432b09adadfa639bf19f47c6f1f262cb98f..68360a7c7fe6b9259fa17b98b628f548cb0f79d5 100644
>--- a/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set.html
>+++ b/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set.html
>@@ -14,7 +14,7 @@
>     grid-column: 1;
>     grid-row: 1;
>     width: 7px;
>-    height: 11px;
>+    height: 16px;
> }
> .gridItem2 {
>     grid-column: 1;
>@@ -32,7 +32,7 @@
> }
> .gridWithPercent {
>     grid-template-columns: 50%;
>-    grid-template-rows: 27%;
>+    grid-template-rows: 25%;
> }
> .gridWithAuto {
>     grid-template-columns: auto;
>diff --git a/LayoutTests/fast/css-grid-layout/grid-gutters-as-percentage-expected.txt b/LayoutTests/fast/css-grid-layout/grid-gutters-as-percentage-expected.txt
>index d8a7b5e14564621f42a655c86f730fa8e3bd9aed..30842c63d593c190ca6aa1b5b0667ea3a2ec42ab 100644
>--- a/LayoutTests/fast/css-grid-layout/grid-gutters-as-percentage-expected.txt
>+++ b/LayoutTests/fast/css-grid-layout/grid-gutters-as-percentage-expected.txt
>@@ -15,43 +15,43 @@ PASS .grid 13
> PASS .grid 14 
> PASS .grid 15 
> PASS .grid 16 
>-Height is indefinite, so row gaps should be 0. Column gaps based on a grid's 'auto' width, which will reduce the available space for tracks; however, they can grow exceeding their content's max-width.
>+Height is indefinite, so row gaps should be based on grid's 'auto' height. Column gaps based on a grid's 'auto' width, which will reduce the available space for tracks; however, they can grow exceeding their content's max-width.
> 
> XXX X XX X
> XX XXX X X
> X XX XXX X
> XXXXX X XX
>-Height is indefinite, so row gaps should be 0. Column gaps based on a grid's 'instrinsic' width, which reduce the available space for tracks; however, since we use 'fit-content' intrinsic size, first column's width is reduced and height increased to let its content to fit.
>+Height is indefinite, so row gaps should be based on grid's 'auto' height. Column gaps based on a grid's 'instrinsic' width, which reduce the available space for tracks; however, since we use 'fit-content' intrinsic size, first column's width is reduced and height increased to let its content to fit.
> 
> XXX X XX X
> XX XXX X X
> X XX XXX X
> XXXXX X XX
>-Height is indefinite, so row gaps should be 0. Column gaps based on a grid's 'auto' width, which will reduce the available space for tracks; however, they can grow exceeding their content's max-width.
>+Height is indefinite, so row gaps should be based on grid's 'auto' height. Column gaps based on a grid's 'auto' width, which will reduce the available space for tracks; however, they can grow exceeding their content's max-width.
> 
> XXX X XX X
> XX XXX X X
> X XX XXX X
> XXXXX X XX
>-Height is indefinite, so row gaps should be 0. Column gaps based on a grid's 'instrinsic' width, which reduce the available space for tracks; however, since we use 'fit-content' intrinsic size, first column's width is reduced and height increased to let its content to fit.
>+Height is indefinite, so row gaps should be based on grid's 'auto' height. Column gaps based on a grid's 'instrinsic' width, which reduce the available space for tracks; however, since we use 'fit-content' intrinsic size, first column's width is reduced and height increased to let its content to fit.
> 
> XXX X XX X
> XX XXX X X
> X XX XXX X
> XXXXX X XX
>-Height is indefinite, so row gaps should be 0. Column gaps based on a grid's 'auto' width, which reduce the available space for tracks; however, they are fixed sized and fit.
>+Height is indefinite, so row gaps should be based on grid's 'auto' height. Column gaps based on a grid's 'auto' width, which reduce the available space for tracks; however, they are fixed sized and fit.
> 
> XXX X XX X
> XX XXX X X
> X XX XXX X
> XXXXX X XX
>-Height is indefinite, so row gaps should be 0. Column gaps based on a grid's 'intrinsic' width, which reduce the available space for tracks; however, they are fixed sized and don't fit so they overflow the grid container.
>+Height is indefinite, so row gaps should be based on grid's 'auto' height. Column gaps based on a grid's 'intrinsic' width, which reduce the available space for tracks; however, they are fixed sized and don't fit so they overflow the grid container.
> 
> XXX X XX X
> XX XXX X X
> X XX XXX X
> XXXXX X XX
>-Height is indefinite, so row gaps should be 0. Column gaps based on a grid's 'auto' width, which reduce the available space for tracks; however, they are fixed sized and fit.
>+Height is indefinite, so row gaps should be based on grid's 'auto' height. Column gaps based on a grid's 'auto' width, which reduce the available space for tracks; however, they are fixed sized and fit.
> 
> XXX X XX X
> XX XXX X X
>@@ -81,7 +81,7 @@ XXX X XX X
> XX XXX X X
> X XX XXX X
> XXXXX X XX
>-Height is indefinite, so row gaps should be 0. Column gaps based on a grid's 'instrinsic' width, which reduce the available space for tracks; however, since we use 'fit-content' intrinsic size, only 1 repeteation is allowed, so tracks are adjusted to fit in the intrinsic size reduced by the gaps.
>+Height is indefinite, so row gaps should be based on grid's 'auto' height. Column gaps based on a grid's 'instrinsic' width, which reduce the available space for tracks; however, since we use 'fit-content' intrinsic size, only 1 repeteation is allowed, so tracks are adjusted to fit in the intrinsic size reduced by the gaps.
> 
> XXX X XX X
> XX XXX X X
>@@ -101,7 +101,7 @@ XXX X XX X
> XX XXX X X
> X XX XXX X
> XXXXX X XX
>-Grid with positioned items. Height is indefinite, so row gaps should be 0. Column gaps based on a grid's 'auto' width, which reduce the available space for tracks; however, they are fixed sized and fit.
>+Grid with positioned items. Height is indefinite, so row gaps should be based on grid's 'auto' height. Column gaps based on a grid's 'auto' width, which reduce the available space for tracks; however, they are fixed sized and fit.
> 
> XXX X XX XXX XXX X XX XX XXX XXXXXX X XX
> Grid with positioned items. Both row and column gaps are based on definite sizes, they will reduce the available space for tracks; however, they are fixed sized and don't fit so they overflow the grid container.
>diff --git a/LayoutTests/fast/css-grid-layout/grid-gutters-as-percentage.html b/LayoutTests/fast/css-grid-layout/grid-gutters-as-percentage.html
>index 4b4f4f26cfea7a19e05f5bee056e3755ebc64d4c..3a4f96f44cdf83143e3e46a0cec4c78c1d56a038 100644
>--- a/LayoutTests/fast/css-grid-layout/grid-gutters-as-percentage.html
>+++ b/LayoutTests/fast/css-grid-layout/grid-gutters-as-percentage.html
>@@ -11,8 +11,8 @@ body { margin: 0; }
> .width200 { width: 200px; }
> .height200 { height: 200px; }
> .height100 { height: 100px; }
>-.two100pxColumns { grid-template-columns: 100px 100px; }
>-.two50pxRows { grid-template-rows: 50px 50px; }
>+.columns100-100 { grid-template-columns: 100px 100px; }
>+.rows50-50 { grid-template-rows: 50px 50px; }
> .autoRepeat { grid-template: repeat(auto-fill, 50px) / repeat(auto-fill, 100px); }
> .columnGap10Percent { grid-column-gap: 10% }
> .rowGap20Percent { grid-row-gap: 20% }
>@@ -26,73 +26,73 @@ body { margin: 0; }
> <body onload="checkLayout('.grid')">
> <div id="log"></div>
> 
>-<p>Height is indefinite, so row gaps should be 0. Column gaps based on a grid's 'auto' width, which will reduce the available space for tracks; however, they can grow exceeding their content's max-width.</p>
>+<p>Height is indefinite, so row gaps should be based on grid's 'auto' height. Column gaps based on a grid's 'auto' width, which will reduce the available space for tracks; however, they can grow exceeding their content's max-width.</p>
> <div class="width400">
>     <div class="grid columnGap10Percent rowGap20Percent" data-expected-width="400" data-expected-height="20">
>         <div class="firstRowFirstColumn"   data-offset-x="0"   data-offset-y="0"  data-expected-width="180" data-expected-height="10">XXX X XX X</div>
>         <div class="firstRowSecondColumn"  data-offset-x="220" data-offset-y="0"  data-expected-width="180" data-expected-height="10">XX XXX X X</div>
>-        <div class="secondRowFirstColumn"  data-offset-x="0"   data-offset-y="10" data-expected-width="180" data-expected-height="10">X XX XXX X</div>
>-        <div class="secondRowSecondColumn" data-offset-x="220" data-offset-y="10" data-expected-width="180" data-expected-height="10">XXXXX X XX</div>
>+        <div class="secondRowFirstColumn"  data-offset-x="0"   data-offset-y="14" data-expected-width="180" data-expected-height="10">X XX XXX X</div>
>+        <div class="secondRowSecondColumn" data-offset-x="220" data-offset-y="14" data-expected-width="180" data-expected-height="10">XXXXX X XX</div>
>     </div>
> </div>
> 
>-<p>Height is indefinite, so row gaps should be 0. Column gaps based on a grid's 'instrinsic' width, which reduce the available space for tracks; however, since we use 'fit-content' intrinsic size, first column's width is reduced and height increased to let its content to fit.</p>
>+<p>Height is indefinite, so row gaps should be based on grid's 'auto' height. Column gaps based on a grid's 'instrinsic' width, which reduce the available space for tracks; however, since we use 'fit-content' intrinsic size, first column's width is reduced and height increased to let its content to fit.</p>
> <div class="width400">
>     <div class="grid fit-content heightAuto columnGap10Percent rowGap20Percent" data-expected-width="200" data-expected-height="40">
>         <div class="firstRowFirstColumn"   data-offset-x="0"   data-offset-y="0"  data-expected-width="80"  data-expected-height="20">XXX X XX X</div>
>         <div class="firstRowSecondColumn"  data-offset-x="100" data-offset-y="0"  data-expected-width="100" data-expected-height="20">XX XXX X X</div>
>-        <div class="secondRowFirstColumn"  data-offset-x="0"   data-offset-y="20" data-expected-width="80"  data-expected-height="20">X XX XXX X</div>
>-        <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="20" data-expected-width="100" data-expected-height="20">XXXXX X XX</div>
>+        <div class="secondRowFirstColumn"  data-offset-x="0"   data-offset-y="28" data-expected-width="80"  data-expected-height="20">X XX XXX X</div>
>+        <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="28" data-expected-width="100" data-expected-height="20">XXXXX X XX</div>
>     </div>
> </div>
> 
>-<p>Height is indefinite, so row gaps should be 0. Column gaps based on a grid's 'auto' width, which will reduce the available space for tracks; however, they can grow exceeding their content's max-width.</p>
>+<p>Height is indefinite, so row gaps should be based on grid's 'auto' height. Column gaps based on a grid's 'auto' width, which will reduce the available space for tracks; however, they can grow exceeding their content's max-width.</p>
> <div class="width400">
>     <div class="grid fit-content widthAuto columnGap10Percent rowGap20Percent" data-expected-width="400" data-expected-height="20">
>         <div class="firstRowFirstColumn"   data-offset-x="0"   data-offset-y="0"  data-expected-width="180" data-expected-height="10">XXX X XX X</div>
>         <div class="firstRowSecondColumn"  data-offset-x="220" data-offset-y="0"  data-expected-width="180" data-expected-height="10">XX XXX X X</div>
>-        <div class="secondRowFirstColumn"  data-offset-x="0"   data-offset-y="10" data-expected-width="180" data-expected-height="10">X XX XXX X</div>
>-        <div class="secondRowSecondColumn" data-offset-x="220" data-offset-y="10" data-expected-width="180" data-expected-height="10">XXXXX X XX</div>
>+        <div class="secondRowFirstColumn"  data-offset-x="0"   data-offset-y="14" data-expected-width="180" data-expected-height="10">X XX XXX X</div>
>+        <div class="secondRowSecondColumn" data-offset-x="220" data-offset-y="14" data-expected-width="180" data-expected-height="10">XXXXX X XX</div>
>     </div>
> </div>
> 
>-<p>Height is indefinite, so row gaps should be 0. Column gaps based on a grid's 'instrinsic' width, which reduce the available space for tracks; however, since we use 'fit-content' intrinsic size, first column's width is reduced and height increased to let its content to fit.</p>
>+<p>Height is indefinite, so row gaps should be based on grid's 'auto' height. Column gaps based on a grid's 'instrinsic' width, which reduce the available space for tracks; however, since we use 'fit-content' intrinsic size, first column's width is reduced and height increased to let its content to fit.</p>
> <div class="width400">
>     <div class="grid fit-content columnGap10Percent rowGap20Percent" data-expected-width="200" data-expected-height="40">
>         <div class="firstRowFirstColumn"   data-offset-x="0"   data-offset-y="0"  data-expected-width="80"  data-expected-height="20">XXX X XX X</div>
>         <div class="firstRowSecondColumn"  data-offset-x="100" data-offset-y="0"  data-expected-width="100" data-expected-height="20">XX XXX X X</div>
>-        <div class="secondRowFirstColumn"  data-offset-x="0"   data-offset-y="20" data-expected-width="80"  data-expected-height="20">X XX XXX X</div>
>-        <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="20" data-expected-width="100" data-expected-height="20">XXXXX X XX</div>
>+        <div class="secondRowFirstColumn"  data-offset-x="0"   data-offset-y="28" data-expected-width="80"  data-expected-height="20">X XX XXX X</div>
>+        <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="28" data-expected-width="100" data-expected-height="20">XXXXX X XX</div>
>     </div>
> </div>
> 
>-<p>Height is indefinite, so row gaps should be 0. Column gaps based on a grid's 'auto' width, which reduce the available space for tracks; however, they are fixed sized and fit.</p>
>+<p>Height is indefinite, so row gaps should be based on grid's 'auto' height. Column gaps based on a grid's 'auto' width, which reduce the available space for tracks; however, they are fixed sized and fit.</p>
> <div class="width400">
>-     <div class="grid two100pxColumns two50pxRows columnGap10Percent rowGap20Percent" data-expected-width="400" data-expected-height="100">
>+     <div class="grid columns100-100 rows50-50 columnGap10Percent rowGap20Percent" data-expected-width="400" data-expected-height="100">
>          <div class="firstRowFirstColumn"   data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="50">XXX X XX X</div>
>          <div class="firstRowSecondColumn"  data-offset-x="140" data-offset-y="0"  data-expected-width="100" data-expected-height="50">XX XXX X X</div>
>-         <div class="secondRowFirstColumn"  data-offset-x="0"   data-offset-y="50" data-expected-width="100" data-expected-height="50">X XX XXX X</div>
>-         <div class="secondRowSecondColumn" data-offset-x="140" data-offset-y="50" data-expected-width="100" data-expected-height="50">XXXXX X XX</div>
>+         <div class="secondRowFirstColumn"  data-offset-x="0"   data-offset-y="70" data-expected-width="100" data-expected-height="50">X XX XXX X</div>
>+         <div class="secondRowSecondColumn" data-offset-x="140" data-offset-y="70" data-expected-width="100" data-expected-height="50">XXXXX X XX</div>
>      </div>
> </div>
> 
>-<p>Height is indefinite, so row gaps should be 0. Column gaps based on a grid's 'intrinsic' width, which reduce the available space for tracks; however, they are fixed sized and don't fit so they overflow the grid container.</p>
>+<p>Height is indefinite, so row gaps should be based on grid's 'auto' height. Column gaps based on a grid's 'intrinsic' width, which reduce the available space for tracks; however, they are fixed sized and don't fit so they overflow the grid container.</p>
> <div class="width400">
>-     <div class="grid fit-content heightAuto two100pxColumns two50pxRows columnGap10Percent rowGap20Percent" data-expected-width="200" data-expected-height="100">
>+     <div class="grid fit-content heightAuto columns100-100 rows50-50 columnGap10Percent rowGap20Percent" data-expected-width="200" data-expected-height="100">
>          <div class="firstRowFirstColumn"   data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="50">XXX X XX X</div>
>          <div class="firstRowSecondColumn"  data-offset-x="120" data-offset-y="0"  data-expected-width="100" data-expected-height="50">XX XXX X X</div>
>-         <div class="secondRowFirstColumn"  data-offset-x="0"   data-offset-y="50" data-expected-width="100" data-expected-height="50">X XX XXX X</div>
>-         <div class="secondRowSecondColumn" data-offset-x="120" data-offset-y="50" data-expected-width="100" data-expected-height="50">XXXXX X XX</div>
>+         <div class="secondRowFirstColumn"  data-offset-x="0"   data-offset-y="70" data-expected-width="100" data-expected-height="50">X XX XXX X</div>
>+         <div class="secondRowSecondColumn" data-offset-x="120" data-offset-y="70" data-expected-width="100" data-expected-height="50">XXXXX X XX</div>
>      </div>
> </div>
> 
>-<p>Height is indefinite, so row gaps should be 0. Column gaps based on a grid's 'auto' width, which reduce the available space for tracks; however, they are fixed sized and fit.</p>
>+<p>Height is indefinite, so row gaps should be based on grid's 'auto' height. Column gaps based on a grid's 'auto' width, which reduce the available space for tracks; however, they are fixed sized and fit.</p>
> <div class="width400">
>-     <div class="grid fit-content widthAuto two100pxColumns two50pxRows columnGap10Percent rowGap20Percent" data-expected-width="400" data-expected-height="100">
>+     <div class="grid fit-content widthAuto columns100-100 rows50-50 columnGap10Percent rowGap20Percent" data-expected-width="400" data-expected-height="100">
>          <div class="firstRowFirstColumn"   data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="50">XXX X XX X</div>
>          <div class="firstRowSecondColumn"  data-offset-x="140" data-offset-y="0"  data-expected-width="100" data-expected-height="50">XX XXX X X</div>
>-         <div class="secondRowFirstColumn"  data-offset-x="0"   data-offset-y="50" data-expected-width="100" data-expected-height="50">X XX XXX X</div>
>-         <div class="secondRowSecondColumn" data-offset-x="140" data-offset-y="50" data-expected-width="100" data-expected-height="50">XXXXX X XX</div>
>+         <div class="secondRowFirstColumn"  data-offset-x="0"   data-offset-y="70" data-expected-width="100" data-expected-height="50">X XX XXX X</div>
>+         <div class="secondRowSecondColumn" data-offset-x="140" data-offset-y="70" data-expected-width="100" data-expected-height="50">XXXXX X XX</div>
>      </div>
> </div>
> 
>@@ -118,7 +118,7 @@ body { margin: 0; }
> 
> <p>Both row and column gaps are based on definite sizes, they will reduce the available space for tracks; however, they are fixed sized and don't fit so they overflow the grid container.</p>
> <div class="width400">
>-    <div class="grid width200 height100 two100pxColumns two50pxRows columnGap10Percent rowGap20Percent" data-expected-width="200" data-expected-height="100">
>+    <div class="grid width200 height100 columns100-100 rows50-50 columnGap10Percent rowGap20Percent" data-expected-width="200" data-expected-height="100">
>         <div class="firstRowFirstColumn"   data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="50">XXX X XX X</div>
>         <div class="firstRowSecondColumn"  data-offset-x="120" data-offset-y="0"  data-expected-width="100" data-expected-height="50">XX XXX X X</div>
>         <div class="secondRowFirstColumn"  data-offset-x="0"   data-offset-y="70" data-expected-width="100" data-expected-height="50">X XX XXX X</div>
>@@ -128,7 +128,7 @@ body { margin: 0; }
> 
> <p>Both row and column gaps are based on definite sizes, they will reduce the available space for tracks; however, they are fixed sized and fit.</p>
> <div class="width400">
>-    <div class="grid width400 height200 two100pxColumns two50pxRows columnGap10Percent rowGap20Percent" data-expected-width="400" data-expected-height="200">
>+    <div class="grid width400 height200 columns100-100 rows50-50 columnGap10Percent rowGap20Percent" data-expected-width="400" data-expected-height="200">
>         <div class="firstRowFirstColumn"   data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="50">XXX X XX X</div>
>         <div class="firstRowSecondColumn"  data-offset-x="140" data-offset-y="0"  data-expected-width="100" data-expected-height="50">XX XXX X X</div>
>         <div class="secondRowFirstColumn"  data-offset-x="0"   data-offset-y="90" data-expected-width="100" data-expected-height="50">X XX XXX X</div>
>@@ -136,13 +136,13 @@ body { margin: 0; }
>     </div>
> </div>
> 
>-<p>Height is indefinite, so row gaps should be 0. Column gaps based on a grid's 'instrinsic' width, which reduce the available space for tracks; however, since we use 'fit-content' intrinsic size, only 1 repeteation is allowed, so tracks are adjusted to fit in the intrinsic size reduced by the gaps.</p>
>+<p>Height is indefinite, so row gaps should be based on grid's 'auto' height. Column gaps based on a grid's 'instrinsic' width, which reduce the available space for tracks; however, since we use 'fit-content' intrinsic size, only 1 repeteation is allowed, so tracks are adjusted to fit in the intrinsic size reduced by the gaps.</p>
> <div class="width400">
>     <div class="grid fit-content autoRepeat columnGap10Percent rowGap20Percent" data-expected-width="200" data-expected-height="70">
>         <div class="firstRowFirstColumn"   data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="50">XXX X XX X</div>
>         <div class="firstRowSecondColumn"  data-offset-x="120" data-offset-y="0"  data-expected-width="80" data-expected-height="50">XX XXX X X</div>
>-        <div class="secondRowFirstColumn"  data-offset-x="0"   data-offset-y="50" data-expected-width="100" data-expected-height="20">X XX XXX X</div>
>-        <div class="secondRowSecondColumn" data-offset-x="120" data-offset-y="50" data-expected-width="80" data-expected-height="20">XXXXX X XX</div>
>+        <div class="secondRowFirstColumn"  data-offset-x="0"   data-offset-y="64" data-expected-width="100" data-expected-height="20">X XX XXX X</div>
>+        <div class="secondRowSecondColumn" data-offset-x="120" data-offset-y="64" data-expected-width="80" data-expected-height="20">XXXXX X XX</div>
>     </div>
> </div>
> 
>@@ -168,19 +168,19 @@ body { margin: 0; }
>     </div>
> </div>
> 
>-<p>Grid with positioned items. Height is indefinite, so row gaps should be 0. Column gaps based on a grid's 'auto' width, which reduce the available space for tracks; however, they are fixed sized and fit.</p>
>+<p>Grid with positioned items. Height is indefinite, so row gaps should be based on grid's 'auto' height. Column gaps based on a grid's 'auto' width, which reduce the available space for tracks; however, they are fixed sized and fit.</p>
> <div class="width400">
>-    <div class="grid two100pxColumns two50pxRows columnGap10Percent rowGap20Percent" data-expected-width="400" data-expected-height="100">
>+    <div class="grid columns100-100 rows50-50 columnGap10Percent rowGap20Percent" data-expected-width="400" data-expected-height="100">
>         <div class="positioned onlyFirstRowOnlyFirstColumn"   data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="50">XXX X XX X</div>
>         <div class="positioned onlyFirstRowOnlySecondColumn"  data-offset-x="140" data-offset-y="0"  data-expected-width="100" data-expected-height="50">XX XXX X X</div>
>-        <div class="positioned onlySecondRowOnlyFirstColumn"  data-offset-x="0"   data-offset-y="50" data-expected-width="100" data-expected-height="50">X XX XXX X</div>
>-        <div class="positioned onlySecondRowOnlySecondColumn" data-offset-x="140" data-offset-y="50" data-expected-width="100" data-expected-height="50">XXXXX X XX</div>
>+        <div class="positioned onlySecondRowOnlyFirstColumn"  data-offset-x="0"   data-offset-y="70" data-expected-width="100" data-expected-height="50">X XX XXX X</div>
>+        <div class="positioned onlySecondRowOnlySecondColumn" data-offset-x="140" data-offset-y="70" data-expected-width="100" data-expected-height="50">XXXXX X XX</div>
>     </div>
> </div>
> 
> <p>Grid with positioned items. Both row and column gaps are based on definite sizes, they will reduce the available space for tracks; however, they are fixed sized and don't fit so they overflow the grid container.</p>
> <div class="">
>-    <div class="grid width200 height100 two100pxColumns two50pxRows columnGap10Percent rowGap20Percent" data-expected-width="200" data-expected-height="100">
>+    <div class="grid width200 height100 columns100-100 rows50-50 columnGap10Percent rowGap20Percent" data-expected-width="200" data-expected-height="100">
>         <div class="positioned onlyFirstRowOnlyFirstColumn"   data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="50">XXX X XX X</div>
>         <div class="positioned onlyFirstRowOnlySecondColumn"  data-offset-x="120" data-offset-y="0"  data-expected-width="100" data-expected-height="50">XX XXX X X</div>
>         <div class="positioned onlySecondRowOnlyFirstColumn"  data-offset-x="0"   data-offset-y="70" data-expected-width="100" data-expected-height="50">X XX XXX X</div>
>diff --git a/LayoutTests/fast/css-grid-layout/grid-track-sizing-with-percentages-and-orthogonal-flows-expected.txt b/LayoutTests/fast/css-grid-layout/grid-track-sizing-with-percentages-and-orthogonal-flows-expected.txt
>index 3eedf5193f6dcc5eae42b9f152f8eea4d3d078b3..bbfea887f57f6a78e59ba91942bad69de3353d25 100644
>--- a/LayoutTests/fast/css-grid-layout/grid-track-sizing-with-percentages-and-orthogonal-flows-expected.txt
>+++ b/LayoutTests/fast/css-grid-layout/grid-track-sizing-with-percentages-and-orthogonal-flows-expected.txt
>@@ -1,3 +1,9 @@
>+
>+PASS .grid 1 
>+PASS .grid 2 
>+PASS .grid 3 
>+PASS .grid 4 
>+PASS .grid 5 
> This test checks that grid tracks are correctly sized when using percentage lengths and orthogonal flows.
> 
> HORIZONTAL-TB container with VERTICAL-LR items.
>@@ -6,29 +12,24 @@ X X X
> X X X X X X
> X X X X X X
> X X X X X X X X X X X X
>-PASS
> HORIZONTAL-TB container with VERTICAL-RL items.
> 
> X X X
> X X X X X X
> X X X X X X
> X X X X X X X X X X X X
>-PASS
> VERTICAL-LR container with HORIZONTAL-TB items.
> 
> X X X
> X X X X X X
> X X X X X X
> X X X X X X X X X X X X
>-PASS
> VERTICAL-RL container with HORIZONTAL-TB items.
> 
> X X X
> X X X X X X
> X X X X X X
> X X X X X X X X X X X X
>-PASS
> HORIZONTAL-TB container with VERTICAL-LR item with percentage gaps.
> 
> XXXX XXXXX
>-PASS
>diff --git a/LayoutTests/fast/css-grid-layout/grid-track-sizing-with-percentages-and-orthogonal-flows.html b/LayoutTests/fast/css-grid-layout/grid-track-sizing-with-percentages-and-orthogonal-flows.html
>index cc3424eebd3bfd024cd7ac1c582380d77bc39001..373336f9f4f6b6d8787e257f7bf71be7ef6b3e03 100644
>--- a/LayoutTests/fast/css-grid-layout/grid-track-sizing-with-percentages-and-orthogonal-flows.html
>+++ b/LayoutTests/fast/css-grid-layout/grid-track-sizing-with-percentages-and-orthogonal-flows.html
>@@ -24,10 +24,15 @@ body {
>     grid-column-gap: 20%;
>     height: 200px;
>     width: 100px;
>+    justify-content: start;
>+    align-content: start;
> }
> </style>
>-<script src="../../resources/check-layout.js"></script>
>+<script src="../../resources/testharness.js"></script>
>+<script src="../../resources/testharnessreport.js"></script>
>+<script src="../../resources/check-layout-th.js"></script>
> <body onload="checkLayout('.grid')">
>+<div id="log"></div>
> <p>This test checks that grid tracks are correctly sized when using percentage lengths and orthogonal flows.</p>
> 
> <p>HORIZONTAL-TB container with VERTICAL-LR items.</p>
>@@ -35,8 +40,8 @@ body {
>     <div class="grid itemsStart contentStart fit-content" data-expected-width="120" data-expected-height="260">
>         <div class="firstRowFirstColumn   verticalLR" data-offset-x="0"  data-offset-y="0"  data-expected-width="10" data-expected-height="50">X X X</div>
>         <div class="firstRowSecondColumn  verticalLR" data-offset-x="100" data-offset-y="0"  data-expected-width="10" data-expected-height="110">X X X X X X</div>
>-        <div class="secondRowFirstColumn  verticalLR" data-offset-x="0"  data-offset-y="110" data-expected-width="10" data-expected-height="110">X X X X X X</div>
>-        <div class="secondRowSecondColumn verticalLR" data-offset-x="100" data-offset-y="110" data-expected-width="20" data-expected-height="150">X X X X X X X X X X X X</div>
>+        <div class="secondRowFirstColumn  verticalLR" data-offset-x="0"  data-offset-y="130" data-expected-width="10" data-expected-height="110">X X X X X X</div>
>+        <div class="secondRowSecondColumn verticalLR" data-offset-x="100" data-offset-y="130" data-expected-width="20" data-expected-height="150">X X X X X X X X X X X X</div>
>     </div>
> </div>
> 
>@@ -45,8 +50,8 @@ body {
>     <div class="grid itemsStart contentStart fit-content" data-expected-width="120" data-expected-height="260">
>         <div class="firstRowFirstColumn   verticalRL" data-offset-x="0"  data-offset-y="0"  data-expected-width="10" data-expected-height="50">X X X</div>
>         <div class="firstRowSecondColumn  verticalRL" data-offset-x="100" data-offset-y="0"  data-expected-width="10" data-expected-height="110">X X X X X X</div>
>-        <div class="secondRowFirstColumn  verticalRL" data-offset-x="0"  data-offset-y="110" data-expected-width="10" data-expected-height="110">X X X X X X</div>
>-        <div class="secondRowSecondColumn verticalRL" data-offset-x="100" data-offset-y="110" data-expected-width="20" data-expected-height="150">X X X X X X X X X X X X</div>
>+        <div class="secondRowFirstColumn  verticalRL" data-offset-x="0"  data-offset-y="130" data-expected-width="10" data-expected-height="110">X X X X X X</div>
>+        <div class="secondRowSecondColumn verticalRL" data-offset-x="100" data-offset-y="130" data-expected-width="20" data-expected-height="150">X X X X X X X X X X X X</div>
>     </div>
> </div>
> 
>@@ -55,8 +60,8 @@ body {
>     <div class="grid itemsStart contentStart verticalLR fit-content" data-expected-width="260" data-expected-height="120">
>         <div class="firstRowFirstColumn   horizontalTB" data-offset-x="0"   data-offset-y="0"  data-expected-width="50" data-expected-height="10">X X X</div>
>         <div class="firstRowSecondColumn  horizontalTB" data-offset-x="0" data-offset-y="100" data-expected-width="110" data-expected-height="10">X X X X X X</div>
>-        <div class="secondRowFirstColumn  horizontalTB" data-offset-x="110"   data-offset-y="0"  data-expected-width="110" data-expected-height="10">X X X X X X</div>
>-        <div class="secondRowSecondColumn horizontalTB" data-offset-x="110" data-offset-y="100" data-expected-width="150" data-expected-height="20">X X X X X X X X X X X X</div>
>+        <div class="secondRowFirstColumn  horizontalTB" data-offset-x="130"   data-offset-y="0"  data-expected-width="110" data-expected-height="10">X X X X X X</div>
>+        <div class="secondRowSecondColumn horizontalTB" data-offset-x="130" data-offset-y="100" data-expected-width="150" data-expected-height="20">X X X X X X X X X X X X</div>
>     </div>
> </div>
> 
>@@ -65,13 +70,13 @@ body {
>     <div class="grid itemsStart contentStart verticalRL fit-content" data-expected-width="260" data-expected-height="120">
>         <div class="firstRowFirstColumn   horizontalTB" data-offset-x="210"   data-offset-y="0"  data-expected-width="50" data-expected-height="10">X X X</div>
>         <div class="firstRowSecondColumn  horizontalTB" data-offset-x="150" data-offset-y="100" data-expected-width="110" data-expected-height="10">X X X X X X</div>
>-        <div class="secondRowFirstColumn  horizontalTB" data-offset-x="40"   data-offset-y="0"  data-expected-width="110" data-expected-height="10">X X X X X X</div>
>-        <div class="secondRowSecondColumn horizontalTB" data-offset-x="0" data-offset-y="100" data-expected-width="150" data-expected-height="20">X X X X X X X X X X X X</div>
>+        <div class="secondRowFirstColumn  horizontalTB" data-offset-x="20"   data-offset-y="0"  data-expected-width="110" data-expected-height="10">X X X X X X</div>
>+        <div class="secondRowSecondColumn horizontalTB" data-offset-x="-20" data-offset-y="100" data-expected-width="150" data-expected-height="20">X X X X X X X X X X X X</div>
>     </div>
> </div>
> 
> <p>HORIZONTAL-TB container with VERTICAL-LR item with percentage gaps.</p>
>-<div class="grid definiteGridWithPercentageGaps contentStart" data-expected-width="100" data-expected-height="200">
>+<div class="grid definiteGridWithPercentageGaps" data-expected-width="100" data-expected-height="200">
>     <div class="bothRowFirstColumn verticalLR" style="background: cyan;" data-expected-width="10" data-expected-height="170">XXXX XXXXX</div>
> </div>
> 
>diff --git a/LayoutTests/fast/css-grid-layout/named-grid-line-get-set-expected.txt b/LayoutTests/fast/css-grid-layout/named-grid-line-get-set-expected.txt
>index b3a412ca242da220f31c066decac7c1565ecc198..e95c4b2e1f5f276c0ca8baf6e3b453adfeea6990 100644
>--- a/LayoutTests/fast/css-grid-layout/named-grid-line-get-set-expected.txt
>+++ b/LayoutTests/fast/css-grid-layout/named-grid-line-get-set-expected.txt
>@@ -7,11 +7,11 @@ Test getting grid-template-columns and grid-template-rows set through CSS
> PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-template-columns') is "[first] 10px"
> PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-template-rows') is "[first] 15px"
> PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-template-columns') is "400px [last]"
>-PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-template-rows') is "162px [last]"
>+PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-template-rows') is "150px [last]"
> PASS window.getComputedStyle(gridWithPercentWithoutSize, '').getPropertyValue('grid-template-columns') is "0px [last]"
> PASS window.getComputedStyle(gridWithPercentWithoutSize, '').getPropertyValue('grid-template-rows') is "0px [last]"
> PASS window.getComputedStyle(gridWithPercentWithoutSizeWithChildren, '').getPropertyValue('grid-template-columns') is "38.5px [last]"
>-PASS window.getComputedStyle(gridWithPercentWithoutSizeWithChildren, '').getPropertyValue('grid-template-rows') is "22px [last]"
>+PASS window.getComputedStyle(gridWithPercentWithoutSizeWithChildren, '').getPropertyValue('grid-template-rows') is "5.5px [last]"
> PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-template-columns') is "[first] 0px"
> PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-template-rows') is "0px [last]"
> PASS window.getComputedStyle(gridWithAutoWithChildrenElement, '').getPropertyValue('grid-template-columns') is "[first] 77px"
>diff --git a/LayoutTests/fast/css-grid-layout/named-grid-line-get-set.html b/LayoutTests/fast/css-grid-layout/named-grid-line-get-set.html
>index b7f8cf7dda0a70f8b40b4afee839e2c36fd31ca1..f3c3b9ac72c6156fbf398f33aaaf2bb8dbe4d04d 100644
>--- a/LayoutTests/fast/css-grid-layout/named-grid-line-get-set.html
>+++ b/LayoutTests/fast/css-grid-layout/named-grid-line-get-set.html
>@@ -22,7 +22,7 @@
> }
> .gridWithPercent {
>     grid-template-columns: 50% [last];
>-    grid-template-rows: 27% [last];
>+    grid-template-rows: 25% [last];
> }
> .gridWithAuto {
>     grid-template-columns: [first] auto;
>@@ -99,9 +99,9 @@
> 
>     debug("Test getting grid-template-columns and grid-template-rows set through CSS");
>     testGridTemplatesValues(document.getElementById("gridWithFixedElement"), "[first] 10px", "[first] 15px");
>-    testGridTemplatesValues(document.getElementById("gridWithPercentElement"), "400px [last]", "162px [last]");
>+    testGridTemplatesValues(document.getElementById("gridWithPercentElement"), "400px [last]", "150px [last]");
>     testGridTemplatesValues(document.getElementById("gridWithPercentWithoutSize"), "0px [last]", "0px [last]");
>-    testGridTemplatesValues(document.getElementById("gridWithPercentWithoutSizeWithChildren"), "38.5px [last]", "22px [last]");
>+    testGridTemplatesValues(document.getElementById("gridWithPercentWithoutSizeWithChildren"), "38.5px [last]", "5.5px [last]");
>     testGridTemplatesValues(document.getElementById("gridWithAutoElement"), "[first] 0px", "0px [last]");
>     testGridTemplatesValues(document.getElementById("gridWithAutoWithChildrenElement"), "[first] 77px", "22px [last]");
>     testGridTemplatesValues(document.getElementById("gridWithMinMax"), "[first] 80px", "300px [last]");
>diff --git a/LayoutTests/fast/css-grid-layout/nested-grid-expected.html b/LayoutTests/fast/css-grid-layout/nested-grid-expected.html
>index 969c6cbf9d68d3fb35355e1efae929d0983f75ee..b5e59c2e4abde7912136fdead001d11e1728426b 100644
>--- a/LayoutTests/fast/css-grid-layout/nested-grid-expected.html
>+++ b/LayoutTests/fast/css-grid-layout/nested-grid-expected.html
>@@ -76,7 +76,7 @@
> 
> <div class="outerGrid">
>     <div class="innerGrid" style="height: 20px;">
>-        <div class="gridItem" style="height: 75%">X X<br>XX</div>
>+        <div class="gridItem" style="height: 7.5px;">X X<br>XX</div>
>     </div>
> </div>
> 
>diff --git a/LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size.html b/LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size.html
>index a49a8603eb822e6b23a34d2b961607be753ae84a..4406814003fd4e3ba73536e87f2bf529a265cf60 100644
>--- a/LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size.html
>+++ b/LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size.html
>@@ -26,10 +26,6 @@
>     height: 50%;
> }
> 
>-.absolutelyPositioned {
>-    position: absolute;
>-}
>-
> .indefiniteHeight {
>     height: auto;
> }
>@@ -57,17 +53,17 @@
>     <p>This test checks percentage track breadths are resolved properly regarding the container size.</p>
>     <div class="unconstrainedContainer">
>         <div class="grid">
>-            <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="200" data-expected-height="10">XX</div>
>-            <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="500" data-expected-height="10">XXXXX</div>
>-            <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="300" data-expected-height="10">XXX</div>
>+            <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="200" data-expected-height="4">XX</div>
>+            <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="500" data-expected-height="4">XXXXX</div>
>+            <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="300" data-expected-height="4">XXX</div>
>         </div>
>     </div>
> 
>-    <div class="indefiniteHeight fit-content">
>+    <div class="fit-content indefiniteHeight">
>         <div class="grid">
>-            <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
>-            <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
>-            <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="10">XXX</div>
>+            <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="4">XX</div>
>+            <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="4">XXXXX</div>
>+            <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="4">XXX</div>
>         </div>
>     </div>
> 
>@@ -88,10 +84,10 @@
>     </div>
> 
>     <div class="fit-content indefiniteHeight">
>-        <div class="grid calculatedSize justifyContentStart">
>-            <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="44" data-expected-height="10">XX</div>
>-            <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="110" data-expected-height="10">XXXXX</div>
>-            <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="66" data-expected-height="10">XXX</div>
>+        <div class="grid calculatedSize">
>+            <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="44" data-expected-height="4">XX</div>
>+            <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="110" data-expected-height="4">XXXXX</div>
>+            <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="66" data-expected-height="4">XXX</div>
>         </div>
>     </div>
> 
>@@ -105,9 +101,9 @@
> 
>     <div class="fit-content indefiniteHeight">
>         <div class="grid percentageSize">
>-            <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="10" data-expected-height="10">XX</div>
>-            <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="25" data-expected-height="10">XXXXX</div>
>-            <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="15" data-expected-height="10">XXX</div>
>+            <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="10" data-expected-height="4">XX</div>
>+            <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="25" data-expected-height="4">XXXXX</div>
>+            <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="15" data-expected-height="4">XXX</div>
>         </div>
>     </div>
> 
>@@ -120,34 +116,34 @@
>     </div>
> 
>     <div class="fit-content indefiniteHeight">
>-        <div class="grid absolutelyPositioned">
>-            <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
>-            <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
>-            <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="10">XXX</div>
>+        <div class="grid fit-content indefiniteHeight">
>+            <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="4">XX</div>
>+            <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="4">XXXXX</div>
>+            <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="4">XXX</div>
>         </div>
>     </div>
> 
>     <div class="unconstrainedContainer">
>-        <div class="grid absolutelyPositioned">
>-            <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
>-            <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
>-            <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="10">XXX</div>
>+        <div class="grid fit-content indefiniteHeight">
>+            <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="4">XX</div>
>+            <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="4">XXXXX</div>
>+            <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="4">XXX</div>
>         </div>
>     </div>
> 
>-    <div class="fit-content indefiniteHeight">
>-        <div class="grid fit-content indefiniteHeight">
>-            <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
>-            <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
>-            <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="10">XXX</div>
>+    <div class="indefiniteHeight fit-content">
>+        <div class="grid fit-content">
>+            <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="4">XX</div>
>+            <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="4">XXXXX</div>
>+            <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="4">XXX</div>
>         </div>
>     </div>
> 
>     <div class="unconstrainedContainer">
>         <div class="grid fit-content">
>-            <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
>-            <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
>-            <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="10">XXX</div>
>+            <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="4">XX</div>
>+            <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="4">XXXXX</div>
>+            <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="4">XXX</div>
>         </div>
>     </div>
> 
>diff --git a/LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set-multiple.js b/LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set-multiple.js
>index f5796f5d1e14dda08eb09d3fb41d32cb2747bc65..73e8069fd0396c548c4f9d79f40e929ba1ccca57 100644
>--- a/LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set-multiple.js
>+++ b/LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set-multiple.js
>@@ -2,15 +2,15 @@ description('Test that setting and getting grid-template-columns and grid-templa
> 
> debug("Test getting |grid-template-columns| and |grid-template-rows| set through CSS");
> testGridTemplatesValues(document.getElementById("gridWithFixedElement"), "7px 11px", "17px 2px");
>-testGridTemplatesValues(document.getElementById("gridWithPercentElement"), "50% 100%", "27% 52%", "400px 800px", "162px 312px");
>-testGridTemplatesValues(document.getElementById("gridWithPercentWithoutSize"), "50% 100%", "27% 52%", "3.5px 7px", "11px 0px");
>+testGridTemplatesValues(document.getElementById("gridWithPercentElement"), "50% 100%", "27% 52%", "400px 800px", "150px 450px");
>+testGridTemplatesValues(document.getElementById("gridWithPercentWithoutSize"), "50% 100%", "27% 52%", "3.5px 7px", "4px 12px");
> testGridTemplatesValues(document.getElementById("gridWithAutoElement"), "auto auto", "auto auto", "0px 17px", "0px 3px");
> testGridTemplatesValues(document.getElementById("gridWithEMElement"), "100px 120px", "150px 170px");
> testGridTemplatesValues(document.getElementById("gridWithThreeItems"), "15px auto 100px", "120px 18px auto", "15px 0px 100px", "120px 18px 0px");
> testGridTemplatesValues(document.getElementById("gridWithPercentAndViewportPercent"), "50% 120px", "35% 168px", "400px 120px", "210px 168px");
> testGridTemplatesValues(document.getElementById("gridWithFitContentAndFitAvailable"), "none", "none");
> testGridTemplatesValues(document.getElementById("gridWithMinMaxContent"), "min-content max-content", "max-content min-content", "0px 0px", "0px 0px");
>-testGridTemplatesValues(document.getElementById("gridWithMinMaxContentWithChildrenElement"), "min-content max-content", "max-content min-content", "7px 17px", "11px 3px");
>+testGridTemplatesValues(document.getElementById("gridWithMinMaxContentWithChildrenElement"), "min-content max-content", "max-content min-content", "7px 17px", "16px 3px");
> testGridTemplatesValues(document.getElementById("gridWithMinMaxAndFixed"), "minmax(45px, 30%) 15px", "120px minmax(35%, 10px)", "240px 15px", "120px 210px");
> testGridTemplatesValues(document.getElementById("gridWithMinMaxAndMinMaxContent"), "minmax(min-content, 30%) 15px", "120px minmax(35%, max-content)", "240px 15px", "120px 210px");
> testGridTemplatesValues(document.getElementById("gridWithFractionFraction"), "1fr 2fr", "3fr 4fr", "320px 480px", "225px 375px");
>diff --git a/LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set.js b/LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set.js
>index 8cf8da37bb340c7ae6003e4bf25168f4a188fb26..0a5959fb89c7d7a03ae3b69797bd212d4168d56b 100644
>--- a/LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set.js
>+++ b/LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set.js
>@@ -3,25 +3,25 @@ description('Test that setting and getting grid-template-columns and grid-templa
> debug("Test getting grid-template-columns and grid-template-rows set through CSS");
> testGridTemplatesValues(document.getElementById("gridWithNoneElement"), "none", "none");
> testGridTemplatesValues(document.getElementById("gridWithFixedElement"), "10px", "15px");
>-testGridTemplatesValues(document.getElementById("gridWithPercentElement"), "400px", "162px");
>+testGridTemplatesValues(document.getElementById("gridWithPercentElement"), "400px", "150px");
> testGridTemplatesValues(document.getElementById("gridWithPercentWithoutSize"), "0px", "0px");
>-testGridTemplatesValues(document.getElementById("gridWithPercentWithoutSizeWithChildren"), "3.5px", "11px");
>+testGridTemplatesValues(document.getElementById("gridWithPercentWithoutSizeWithChildren"), "3.5px", "4px");
> testGridTemplatesValues(document.getElementById("gridWithAutoElement"), "0px", "0px");
>-testGridTemplatesValues(document.getElementById("gridWithAutoWithChildrenElement"), "7px", "11px");
>+testGridTemplatesValues(document.getElementById("gridWithAutoWithChildrenElement"), "7px", "16px");
> testGridTemplatesValues(document.getElementById("gridWithEMElement"), "100px", "150px");
> testGridTemplatesValues(document.getElementById("gridWithViewPortPercentageElement"), "64px", "60px");
> testGridTemplatesValues(document.getElementById("gridWithMinMaxElement"), "80px", "300px");
> testGridTemplatesValues(document.getElementById("gridWithMinContentElement"), "0px", "0px");
>-testGridTemplatesValues(document.getElementById("gridWithMinContentWithChildrenElement"), "17px", "11px");
>+testGridTemplatesValues(document.getElementById("gridWithMinContentWithChildrenElement"), "17px", "16px");
> testGridTemplatesValues(document.getElementById("gridWithMaxContentElement"), "0px", "0px");
>-testGridTemplatesValues(document.getElementById("gridWithMaxContentWithChildrenElement"), "17px", "11px");
>+testGridTemplatesValues(document.getElementById("gridWithMaxContentWithChildrenElement"), "17px", "16px");
> testGridTemplatesValues(document.getElementById("gridWithFractionElement"), "800px", "600px");
> testGridTemplatesValues(document.getElementById("gridWithCalcElement"), "150px", "75px");
> testGridTemplatesValues(document.getElementById("gridWithCalcComplexElement"), "550px", "465px");
> testGridTemplatesValues(document.getElementById("gridWithCalcInsideMinMaxElement"), "minmax(10%, 15px)", "minmax(20px, 50%)", "80px", "300px");
> testGridTemplatesValues(document.getElementById("gridWithCalcComplexInsideMinMaxElement"), "minmax(10%, 415px)", "minmax(80px, 50%)", "415px", "300px");
>-testGridTemplatesValues(document.getElementById("gridWithAutoInsideMinMaxElement"), "20px", "11px");
>-testGridTemplatesValues(document.getElementById("gridWithFitContentFunctionElement"), "7px", "11px");
>+testGridTemplatesValues(document.getElementById("gridWithAutoInsideMinMaxElement"), "20px", "16px");
>+testGridTemplatesValues(document.getElementById("gridWithFitContentFunctionElement"), "7px", "16px");
> 
> debug("");
> debug("Test getting wrong values for grid-template-columns and grid-template-rows through CSS (they should resolve to the default: 'none')");
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-content-alignment-second-pass-001-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-content-alignment-second-pass-001-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..ff8f6a22bcc93470d39a1de3ab5c8c32528d85a2
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-content-alignment-second-pass-001-expected.txt
>@@ -0,0 +1,20 @@
>+
>+PASS .grid 1 
>+PASS .grid 2 
>+PASS .grid 3 
>+PASS .grid 4 
>+PASS .grid 5 
>+PASS .grid 6 
>+PASS .grid 7 
>+PASS .grid 8 
>+XX X
>+XX X
>+XX X
>+XX X
>+XX X
>+XX X
>+X
>+XX X
>+X
>+XX X
>+X
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-content-alignment-second-pass-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-content-alignment-second-pass-001.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..5b4bbabbb160079796aa4eb6786ea15383f6dd75
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-content-alignment-second-pass-001.html
>@@ -0,0 +1,65 @@
>+<!DOCTYPE html>
>+<meta charset="utf-8">
>+<title>CSS Grid Layout Test: Content alignment second pass</title>
>+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
>+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
>+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-overview">
>+<meta name="flags" content="ahem dom">
>+<meta name="assert" content="This test checks that content alignment is properly applied when the size of the tracks changes in the second pass of the track sizing algorithm.">
>+<link rel="stylesheet" href="../../support/grid.css">
>+<link rel="stylesheet" href="../../support/alignment.css">
>+
>+<style>
>+.grid {
>+  position: relative;
>+  width: 100px;
>+  height: 50px;
>+  font: 25px/1 Ahem;
>+  margin: 10px;
>+}
>+</style>
>+
>+<script src="/resources/testharness.js"></script>
>+<script src="/resources/testharnessreport.js"></script>
>+<script src="/resources/check-layout-th.js"></script>
>+
>+<body onLoad="checkLayout('.grid');">
>+
>+<div id="log"></div>
>+
>+<div class="grid">
>+  <div class="firstRowFirstColumn verticalLR" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">XX X</div>
>+</div>
>+
>+<div class="grid contentStretch">
>+  <div class="firstRowFirstColumn verticalLR" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">XX X</div>
>+</div>
>+
>+<div class="grid contentStart">
>+  <div class="firstRowFirstColumn verticalLR" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">XX X</div>
>+</div>
>+
>+<div class="grid contentCenter">
>+  <div class="firstRowFirstColumn verticalLR" data-offset-x="25" data-offset-y="0" data-expected-width="50" data-expected-height="50">XX X</div>
>+</div>
>+
>+<div class="grid contentEnd">
>+  <div class="firstRowFirstColumn verticalLR" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50">XX X</div>
>+</div>
>+
>+<div class="grid contentSpaceBetween">
>+  <div class="firstRowFirstColumn verticalLR" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">XX X</div>
>+  <div class="firstRowSecondColumn" data-offset-x="75" data-offset-y="0" data-expected-width="25" data-expected-height="50">X</div>
>+</div>
>+
>+<div class="grid contentSpaceEvenly" style="width: 105px;">
>+  <div class="firstRowFirstColumn verticalLR" data-offset-x="10" data-offset-y="0" data-expected-width="50" data-expected-height="50">XX X</div>
>+  <div class="firstRowSecondColumn" data-offset-x="70" data-offset-y="0" data-expected-width="25" data-expected-height="50">X</div>
>+</div>
>+
>+<div class="grid contentSpaceAround" style="width: 115px;">
>+  <div class="firstRowFirstColumn verticalLR" data-offset-x="10" data-offset-y="0" data-expected-width="50" data-expected-height="50">XX X</div>
>+  <div class="firstRowSecondColumn" data-offset-x="80" data-offset-y="0" data-expected-width="25" data-expected-height="50">X</div>
>+</div>
>+
>+</body>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-content-alignment-second-pass-002-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-content-alignment-second-pass-002-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..1d9bff15b5696e82f8fd854e0420d2512f6e0e0e
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-content-alignment-second-pass-002-expected.txt
>@@ -0,0 +1,29 @@
>+
>+PASS .grid 1 
>+PASS .grid 2 
>+PASS .grid 3 
>+PASS .grid 4 
>+PASS .grid 5 
>+PASS .grid 6 
>+PASS .grid 7 
>+PASS .grid 8 
>+XXX X
>+ 
>+XXX X
>+ 
>+XXX X
>+ 
>+XXX X
>+ 
>+XXX X
>+ 
>+XXX X
>+X
>+XXX X
>+X
>+X
>+ 
>+XXX X
>+X
>+X
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-content-alignment-second-pass-002.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-content-alignment-second-pass-002.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..a6837e3debba198fc6c9fb8fff1a649e3408314a
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-content-alignment-second-pass-002.html
>@@ -0,0 +1,65 @@
>+<!DOCTYPE html>
>+<meta charset="utf-8">
>+<title>CSS Grid Layout Test: Content alignment second pass</title>
>+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
>+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
>+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-overview">
>+<meta name="flags" content="ahem dom">
>+<meta name="assert" content="This test checks that content alignment is properly applied when the size of the tracks changes in the second pass of the track sizing algorithm.">
>+<link rel="stylesheet" href="../../support/grid.css">
>+<link rel="stylesheet" href="../../support/alignment.css">
>+
>+<style>
>+.grid {
>+  position: relative;
>+  font: 20px/1 Ahem;
>+  margin: 10px;
>+  display: inline-grid;
>+  grid: 50% / 70%;
>+}
>+</style>
>+
>+<script src="/resources/testharness.js"></script>
>+<script src="/resources/testharnessreport.js"></script>
>+<script src="/resources/check-layout-th.js"></script>
>+
>+<body onLoad="checkLayout('.grid');">
>+
>+<div id="log"></div>
>+
>+<div class="grid" data-expected-width="100" data-expected-height="40">
>+  <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="20">XXX X</div>
>+</div>
>+
>+<div class="grid contentStretch" data-expected-width="100" data-expected-height="40">
>+  <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="20">XXX X</div>
>+</div>
>+
>+<div class="grid contentStart" data-expected-width="100" data-expected-height="40">
>+  <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="20">XXX X</div>
>+</div>
>+
>+<div class="grid contentCenter" data-expected-width="100" data-expected-height="40">
>+  <div class="firstRowFirstColumn" data-offset-x="15" data-offset-y="10" data-expected-width="70" data-expected-height="20">XXX X</div>
>+</div>
>+
>+<div class="grid contentEnd" data-expected-width="100" data-expected-height="40">
>+  <div class="firstRowFirstColumn" data-offset-x="30" data-offset-y="20" data-expected-width="70" data-expected-height="20">XXX X</div>
>+</div>
>+
>+<div class="grid contentSpaceBetween" data-expected-width="100" data-expected-height="60">
>+  <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="30">XXX X</div>
>+  <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="40" data-expected-width="70" data-expected-height="20">X</div>
>+</div>
>+
>+<div class="grid contentSpaceEvenly" style="grid-template-rows: 30%;" data-expected-width="100" data-expected-height="80">
>+  <div class="firstRowFirstColumn" data-offset-x="15" data-offset-y="5" data-expected-width="70" data-expected-height="24">XXX X</div>
>+  <div class="secondRowFirstColumn" data-offset-x="15" data-offset-y="35" data-expected-width="70" data-expected-height="40">X<br>X</div>
>+</div>
>+
>+<div class="grid contentSpaceAround" style="grid-template-rows: 25%;" data-expected-width="100" data-expected-height="80">
>+  <div class="firstRowFirstColumn" data-offset-x="15" data-offset-y="5" data-expected-width="70" data-expected-height="20">XXX X</div>
>+  <div class="secondRowFirstColumn" data-offset-x="15" data-offset-y="35" data-expected-width="70" data-expected-height="40">X<br>X</div>
>+</div>
>+
>+</body>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/w3c-import.log b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/w3c-import.log
>index 88d324291b6d8d3ffba9de6c21a46671bfb65034..a5062b735d5c1723692170a0fe3ccd59421ad092 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/w3c-import.log
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/w3c-import.log
>@@ -1,7 +1,7 @@
> The tests in this directory were imported from the W3C repository.
> Do NOT modify these tests directly in WebKit.
> Instead, create a pull request on the WPT github:
>-	https://github.com/w3c/web-platform-tests
>+	https://github.com/web-platform-tests/wpt
> 
> Then run the Tools/Scripts/import-w3c-tests in WebKit to reimport
> 
>@@ -73,6 +73,8 @@ List of files:
> /LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-002.html
> /LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-003.html
> /LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-004.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-content-alignment-second-pass-001.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-content-alignment-second-pass-002.html
> /LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-content-distribution-001-expected.html
> /LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-content-distribution-001.html
> /LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-content-distribution-002-expected.html
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-001-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-001-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..e9826dc1bb0ab867fd185a6a0689a568a353446c
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-001-expected.txt
>@@ -0,0 +1,301 @@
>+
>+PASS .grid 1 
>+PASS .grid 2 
>+PASS .grid 3 
>+PASS .grid 4 
>+PASS .grid 5 
>+PASS .grid 6 
>+PASS .grid 7 
>+PASS .grid 8 
>+PASS .grid 9 
>+PASS .grid 10 
>+PASS .grid 11 
>+PASS .grid 12 
>+PASS .grid 13 
>+PASS .grid 14 
>+PASS .grid 15 
>+PASS .grid 16 
>+PASS .grid 17 
>+PASS .grid 18 
>+PASS .grid 19 
>+PASS .grid 20 
>+PASS .grid 21 
>+PASS .grid 22 
>+PASS .grid 23 
>+PASS .grid 24 
>+PASS .grid 25 
>+PASS .grid 26 
>+PASS .grid 27 
>+PASS .grid 28 
>+PASS .grid 29 
>+PASS .grid 30 
>+PASS .grid 31 
>+PASS .grid 32 
>+PASS .grid 33 
>+PASS .grid 34 
>+PASS .grid 35 
>+PASS .grid 36 
>+PASS .grid 37 
>+PASS .grid 38 
>+PASS .grid 39 
>+PASS .grid 40 
>+PASS .grid 41 
>+PASS .grid 42 
>+PASS .grid 43 
>+PASS .grid 44 
>+PASS .grid 45 
>+PASS .grid 46 
>+PASS .grid 47 
>+PASS .grid 48 
>+PASS .grid 49 
>+PASS .grid 50 
>+PASS .grid 51 
>+PASS .grid 52 
>+PASS .grid 53 
>+PASS .grid 54 
>+PASS .grid 55 
>+PASS .grid 56 
>+PASS .grid 57 
>+PASS .grid 58 
>+PASS .grid 59 
>+PASS .grid 60 
>+PASS .grid 61 
>+PASS .grid 62 
>+PASS .grid 63 
>+PASS .grid 64 
>+PASS .grid 65 
>+PASS .grid 66 
>+PASS .grid 67 
>+PASS .grid 68 
>+PASS .grid 69 
>+PASS .grid 70 
>+PASS .grid 71 
>+PASS .grid 72 
>+PASS .grid 73 
>+PASS .grid 74 
>+PASS .grid 75 
>+PASS .grid 76 
>+PASS .grid 77 
>+PASS .grid 78 
>+PASS .grid 79 
>+PASS .grid 80 
>+PASS .grid 81 
>+PASS .grid 82 
>+PASS .grid 83 
>+PASS .grid 84 
>+PASS .grid 85 
>+PASS .grid 86 
>+PASS .grid 87 
>+PASS .grid 88 
>+PASS .grid 89 
>+PASS .grid 90 
>+PASS .grid 91 
>+PASS .grid 92 
>+PASS .grid 93 
>+PASS .grid 94 
>+PASS .grid 95 
>+PASS .grid 96 
>+PASS .grid 97 
>+PASS .grid 98 
>+PASS .grid 99 
>+PASS .grid 100 
>+PASS .grid 101 
>+PASS .grid 102 
>+PASS .grid 103 
>+PASS .grid 104 
>+PASS .grid 105 
>+PASS .grid 106 
>+PASS .grid 107 
>+PASS .grid 108 
>+PASS .grid 109 
>+PASS .grid 110 
>+PASS .grid 111 
>+PASS .grid 112 
>+PASS .grid 113 
>+PASS .grid 114 
>+PASS .grid 115 
>+PASS .grid 116 
>+PASS .grid 117 
>+PASS .grid 118 
>+PASS .grid 119 
>+PASS .grid 120 
>+grid-template-rows: 60%;
>+
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+grid-template-rows: 140%;
>+
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+grid-template-rows: 100px 60%;
>+
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+grid-template-rows: 100px 140%;
>+
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+grid-template-rows: auto 60%;
>+
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+grid-template-rows: auto 140%;
>+
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>+X
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-001.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..cdae02a8debf3d0f87508675774cc7e48a5566e3
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-001.html
>@@ -0,0 +1,572 @@
>+<!DOCTYPE html>
>+<html lang="en">
>+<meta charset="utf-8">
>+<title>CSS Grid Layout Test: Percentage rows indefinite height</title>
>+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
>+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#track-sizing">
>+<meta name="assert" content="This test checks that percentage rows on grid containers with indefinite height are treated as 'auto' to compute the intrinsic height, but are later resolved against the intrinsic height during layout.">
>+<meta name="flags" content="ahem">
>+<link rel="stylesheet" href="support/grid.css">
>+<style>
>+.grid {
>+  position: relative;
>+  font: 25px/1 Ahem;
>+  margin: 50px 0;
>+}
>+
>+.border {
>+  border: 10px solid;
>+}
>+
>+.padding {
>+  padding: 5px;
>+}
>+</style>
>+<script src="/resources/testharness.js"></script>
>+<script src="/resources/testharnessreport.js"></script>
>+<script src="/resources/check-layout-th.js"></script>
>+<body onload="checkLayout('.grid');">
>+
>+<div id="log"></div>
>+
>+<p>grid-template-rows: 60%;</p>
>+
>+<div class="grid" style="grid-template-rows: 60%;" data-expected-height="0">
>+  <div class="firstRowFirstColumn" data-expected-height="0"></div>
>+</div>
>+
>+<div class="grid" style="grid-template-rows: 60%;" data-expected-height="25">
>+  <div class="firstRowFirstColumn" data-expected-height="15">X</div>
>+</div>
>+
>+<div class="grid" style="grid-template-rows: 60%;" data-expected-height="50">
>+  <div class="firstRowFirstColumn" data-expected-height="30">X<br>X</div>
>+</div>
>+
>+<div class="grid border" style="grid-template-rows: 60%;" data-expected-height="20">
>+  <div class="firstRowFirstColumn" data-expected-height="0"></div>
>+</div>
>+
>+<div class="grid border" style="grid-template-rows: 60%;" data-expected-height="45">
>+  <div class="firstRowFirstColumn" data-expected-height="15">X</div>
>+</div>
>+
>+<div class="grid border" style="grid-template-rows: 60%;" data-expected-height="70">
>+  <div class="firstRowFirstColumn" data-expected-height="30">X<br>X</div>
>+</div>
>+
>+<div class="grid padding" style="grid-template-rows: 60%;" data-expected-height="10">
>+  <div class="firstRowFirstColumn" data-expected-height="0"></div>
>+</div>
>+
>+<div class="grid padding" style="grid-template-rows: 60%;" data-expected-height="35">
>+  <div class="firstRowFirstColumn" data-expected-height="15">X</div>
>+</div>
>+
>+<div class="grid padding" style="grid-template-rows: 60%;" data-expected-height="60">
>+  <div class="firstRowFirstColumn" data-expected-height="30">X<br>X</div>
>+</div>
>+
>+<div class="grid border padding" style="grid-template-rows: 60%;" data-expected-height="30">
>+  <div class="firstRowFirstColumn" data-expected-height="0"></div>
>+</div>
>+
>+<div class="grid border padding" style="grid-template-rows: 60%;" data-expected-height="55">
>+  <div class="firstRowFirstColumn" data-expected-height="15">X</div>
>+</div>
>+
>+<div class="grid border padding" style="grid-template-rows: 60%;" data-expected-height="80">
>+  <div class="firstRowFirstColumn" data-expected-height="30">X<br>X</div>
>+</div>
>+
>+<p>grid-template-rows: 140%;</p>
>+
>+<div class="grid" style="grid-template-rows: 140%;" data-expected-height="0">
>+  <div class="firstRowFirstColumn" data-expected-height="0"></div>
>+</div>
>+
>+<div class="grid" style="grid-template-rows: 140%;" data-expected-height="25">
>+  <div class="firstRowFirstColumn" data-expected-height="35">X</div>
>+</div>
>+
>+<div class="grid" style="grid-template-rows: 140%;" data-expected-height="50">
>+  <div class="firstRowFirstColumn" data-expected-height="70">X<br>X</div>
>+</div>
>+
>+<div class="grid border" style="grid-template-rows: 140%;" data-expected-height="20">
>+  <div class="firstRowFirstColumn" data-expected-height="0"></div>
>+</div>
>+
>+<div class="grid border" style="grid-template-rows: 140%;" data-expected-height="45">
>+  <div class="firstRowFirstColumn" data-expected-height="35">X</div>
>+</div>
>+
>+<div class="grid border" style="grid-template-rows: 140%;" data-expected-height="70">
>+  <div class="firstRowFirstColumn" data-expected-height="70">X<br>X</div>
>+</div>
>+
>+<div class="grid padding" style="grid-template-rows: 140%;" data-expected-height="10">
>+  <div class="firstRowFirstColumn" data-expected-height="0"></div>
>+</div>
>+
>+<div class="grid padding" style="grid-template-rows: 140%;" data-expected-height="35">
>+  <div class="firstRowFirstColumn" data-expected-height="35">X</div>
>+</div>
>+
>+<div class="grid padding" style="grid-template-rows: 140%;" data-expected-height="60">
>+  <div class="firstRowFirstColumn" data-expected-height="70">X<br>X</div>
>+</div>
>+
>+<div class="grid border padding" style="grid-template-rows: 140%;" data-expected-height="30">
>+  <div class="firstRowFirstColumn" data-expected-height="0"></div>
>+</div>
>+
>+<div class="grid border padding" style="grid-template-rows: 140%;" data-expected-height="55">
>+  <div class="firstRowFirstColumn" data-expected-height="35">X</div>
>+</div>
>+
>+<div class="grid border padding" style="grid-template-rows: 140%;" data-expected-height="80">
>+  <div class="firstRowFirstColumn" data-expected-height="70">X<br>X</div>
>+</div>
>+
>+<p>grid-template-rows: 100px 60%;</p>
>+
>+<div class="grid" style="grid-template-rows: 100px 60%;" data-expected-height="100">
>+  <div class="secondRowFirstColumn" data-expected-height="60"></div>
>+</div>
>+
>+<div class="grid" style="grid-template-rows: 100px 60%;" data-expected-height="125">
>+  <div class="secondRowFirstColumn" data-expected-height="75">X</div>
>+</div>
>+
>+<div class="grid" style="grid-template-rows: 100px 60%;" data-expected-height="150">
>+  <div class="secondRowFirstColumn" data-expected-height="90">X<br>X</div>
>+</div>
>+
>+<div class="grid" style="grid-template-rows: 100px 60%;" data-expected-height="100">
>+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
>+  <div class="secondRowFirstColumn" data-expected-height="60"></div>
>+</div>
>+
>+<div class="grid" style="grid-template-rows: 100px 60%;" data-expected-height="125">
>+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
>+  <div class="secondRowFirstColumn" data-expected-height="75">X</div>
>+</div>
>+
>+<div class="grid" style="grid-template-rows: 100px 60%;" data-expected-height="150">
>+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
>+  <div class="secondRowFirstColumn" data-expected-height="90">X<br>X</div>
>+</div>
>+
>+<div class="grid border" style="grid-template-rows: 100px 60%;" data-expected-height="120">
>+  <div class="secondRowFirstColumn" data-expected-height="60"></div>
>+</div>
>+
>+<div class="grid border" style="grid-template-rows: 100px 60%;" data-expected-height="145">
>+  <div class="secondRowFirstColumn" data-expected-height="75">X</div>
>+</div>
>+
>+<div class="grid border" style="grid-template-rows: 100px 60%;" data-expected-height="170">
>+  <div class="secondRowFirstColumn" data-expected-height="90">X<br>X</div>
>+</div>
>+
>+<div class="grid border" style="grid-template-rows: 100px 60%;" data-expected-height="120">
>+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
>+  <div class="secondRowFirstColumn" data-expected-height="60"></div>
>+</div>
>+
>+<div class="grid border" style="grid-template-rows: 100px 60%;" data-expected-height="145">
>+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
>+  <div class="secondRowFirstColumn" data-expected-height="75">X</div>
>+</div>
>+
>+<div class="grid border" style="grid-template-rows: 100px 60%;" data-expected-height="170">
>+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
>+  <div class="secondRowFirstColumn" data-expected-height="90">X<br>X</div>
>+</div>
>+
>+<div class="grid padding" style="grid-template-rows: 100px 60%;" data-expected-height="110">
>+  <div class="secondRowFirstColumn" data-expected-height="60"></div>
>+</div>
>+
>+<div class="grid padding" style="grid-template-rows: 100px 60%;" data-expected-height="135">
>+  <div class="secondRowFirstColumn" data-expected-height="75">X</div>
>+</div>
>+
>+<div class="grid padding" style="grid-template-rows: 100px 60%;" data-expected-height="160">
>+  <div class="secondRowFirstColumn" data-expected-height="90">X<br>X</div>
>+</div>
>+
>+<div class="grid padding" style="grid-template-rows: 100px 60%;" data-expected-height="110">
>+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
>+  <div class="secondRowFirstColumn" data-expected-height="60"></div>
>+</div>
>+
>+<div class="grid padding" style="grid-template-rows: 100px 60%;" data-expected-height="135">
>+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
>+  <div class="secondRowFirstColumn" data-expected-height="75">X</div>
>+</div>
>+
>+<div class="grid padding" style="grid-template-rows: 100px 60%;" data-expected-height="160">
>+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
>+  <div class="secondRowFirstColumn" data-expected-height="90">X<br>X</div>
>+</div>
>+
>+<div class="grid border padding" style="grid-template-rows: 100px 60%;" data-expected-height="130">
>+  <div class="secondRowFirstColumn" data-expected-height="60"></div>
>+</div>
>+
>+<div class="grid border padding" style="grid-template-rows: 100px 60%;" data-expected-height="155">
>+  <div class="secondRowFirstColumn" data-expected-height="75">X</div>
>+</div>
>+
>+<div class="grid border padding" style="grid-template-rows: 100px 60%;" data-expected-height="180">
>+  <div class="secondRowFirstColumn" data-expected-height="90">X<br>X</div>
>+</div>
>+
>+<div class="grid border padding" style="grid-template-rows: 100px 60%;" data-expected-height="130">
>+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
>+  <div class="secondRowFirstColumn" data-expected-height="60"></div>
>+</div>
>+
>+<div class="grid border padding" style="grid-template-rows: 100px 60%;" data-expected-height="155">
>+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
>+  <div class="secondRowFirstColumn" data-expected-height="75">X</div>
>+</div>
>+
>+<div class="grid border padding" style="grid-template-rows: 100px 60%;" data-expected-height="180">
>+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
>+  <div class="secondRowFirstColumn" data-expected-height="90">X<br>X</div>
>+</div>
>+
>+<p>grid-template-rows: 100px 140%;</p>
>+
>+<div class="grid" style="grid-template-rows: 100px 140%;" data-expected-height="100">
>+  <div class="secondRowFirstColumn" data-expected-height="140"></div>
>+</div>
>+
>+<div class="grid" style="grid-template-rows: 100px 140%;" data-expected-height="125">
>+  <div class="secondRowFirstColumn" data-expected-height="175">X</div>
>+</div>
>+
>+<div class="grid" style="grid-template-rows: 100px 140%;" data-expected-height="150">
>+  <div class="secondRowFirstColumn" data-expected-height="210">X<br>X</div>
>+</div>
>+
>+<div class="grid" style="grid-template-rows: 100px 140%;" data-expected-height="100">
>+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
>+  <div class="secondRowFirstColumn" data-expected-height="140"></div>
>+</div>
>+
>+<div class="grid" style="grid-template-rows: 100px 140%;" data-expected-height="125">
>+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
>+  <div class="secondRowFirstColumn" data-expected-height="175">X</div>
>+</div>
>+
>+<div class="grid" style="grid-template-rows: 100px 140%;" data-expected-height="150">
>+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
>+  <div class="secondRowFirstColumn" data-expected-height="210">X<br>X</div>
>+</div>
>+
>+<div class="grid border" style="grid-template-rows: 100px 140%;" data-expected-height="120">
>+  <div class="secondRowFirstColumn" data-expected-height="140"></div>
>+</div>
>+
>+<div class="grid border" style="grid-template-rows: 100px 140%;" data-expected-height="145">
>+  <div class="secondRowFirstColumn" data-expected-height="175">X</div>
>+</div>
>+
>+<div class="grid border" style="grid-template-rows: 100px 140%;" data-expected-height="170">
>+  <div class="secondRowFirstColumn" data-expected-height="210">X<br>X</div>
>+</div>
>+
>+<div class="grid border" style="grid-template-rows: 100px 140%;" data-expected-height="120">
>+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
>+  <div class="secondRowFirstColumn" data-expected-height="140"></div>
>+</div>
>+
>+<div class="grid border" style="grid-template-rows: 100px 140%;" data-expected-height="145">
>+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
>+  <div class="secondRowFirstColumn" data-expected-height="175">X</div>
>+</div>
>+
>+<div class="grid border" style="grid-template-rows: 100px 140%;" data-expected-height="170">
>+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
>+  <div class="secondRowFirstColumn" data-expected-height="210">X<br>X</div>
>+</div>
>+
>+<div class="grid padding" style="grid-template-rows: 100px 140%;" data-expected-height="110">
>+  <div class="secondRowFirstColumn" data-expected-height="140"></div>
>+</div>
>+
>+<div class="grid padding" style="grid-template-rows: 100px 140%;" data-expected-height="135">
>+  <div class="secondRowFirstColumn" data-expected-height="175">X</div>
>+</div>
>+
>+<div class="grid padding" style="grid-template-rows: 100px 140%;" data-expected-height="160">
>+  <div class="secondRowFirstColumn" data-expected-height="210">X<br>X</div>
>+</div>
>+
>+<div class="grid padding" style="grid-template-rows: 100px 140%;" data-expected-height="110">
>+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
>+  <div class="secondRowFirstColumn" data-expected-height="140"></div>
>+</div>
>+
>+<div class="grid padding" style="grid-template-rows: 100px 140%;" data-expected-height="135">
>+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
>+  <div class="secondRowFirstColumn" data-expected-height="175">X</div>
>+</div>
>+
>+<div class="grid padding" style="grid-template-rows: 100px 140%;" data-expected-height="160">
>+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
>+  <div class="secondRowFirstColumn" data-expected-height="210">X<br>X</div>
>+</div>
>+
>+<div class="grid border padding" style="grid-template-rows: 100px 140%;" data-expected-height="130">
>+  <div class="secondRowFirstColumn" data-expected-height="140"></div>
>+</div>
>+
>+<div class="grid border padding" style="grid-template-rows: 100px 140%;" data-expected-height="155">
>+  <div class="secondRowFirstColumn" data-expected-height="175">X</div>
>+</div>
>+
>+<div class="grid border padding" style="grid-template-rows: 100px 140%;" data-expected-height="180">
>+  <div class="secondRowFirstColumn" data-expected-height="210">X<br>X</div>
>+</div>
>+
>+<div class="grid border padding" style="grid-template-rows: 100px 140%;" data-expected-height="130">
>+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
>+  <div class="secondRowFirstColumn" data-expected-height="140"></div>
>+</div>
>+
>+<div class="grid border padding" style="grid-template-rows: 100px 140%;" data-expected-height="155">
>+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
>+  <div class="secondRowFirstColumn" data-expected-height="175">X</div>
>+</div>
>+
>+<div class="grid border padding" style="grid-template-rows: 100px 140%;" data-expected-height="180">
>+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
>+  <div class="secondRowFirstColumn" data-expected-height="210">X<br>X</div>
>+</div>
>+
>+<p>grid-template-rows: auto 60%;</p>
>+
>+<div class="grid" style="grid-template-rows: auto 60%;" data-expected-height="0">
>+  <div class="secondRowFirstColumn" data-expected-height="0"></div>
>+</div>
>+
>+<div class="grid" style="grid-template-rows: auto 60%;" data-expected-height="25">
>+  <div class="secondRowFirstColumn" data-expected-height="15">X</div>
>+</div>
>+
>+<div class="grid" style="grid-template-rows: auto 60%;" data-expected-height="50">
>+  <div class="secondRowFirstColumn" data-expected-height="30">X<br>X</div>
>+</div>
>+
>+<div class="grid" style="grid-template-rows: auto 60%;" data-expected-height="25">
>+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
>+  <div class="secondRowFirstColumn" data-expected-height="15"></div>
>+</div>
>+
>+<div class="grid" style="grid-template-rows: auto 60%;" data-expected-height="50">
>+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
>+  <div class="secondRowFirstColumn" data-expected-height="30">X</div>
>+</div>
>+
>+<div class="grid" style="grid-template-rows: auto 60%;" data-expected-height="75">
>+  <div class="firstRowFirstColumn" data-expected-height="30">X</div>
>+  <div class="secondRowFirstColumn" data-expected-height="45">X<br>X</div>
>+</div>
>+
>+<div class="grid border" style="grid-template-rows: auto 60%;" data-expected-height="20">
>+  <div class="secondRowFirstColumn" data-expected-height="0"></div>
>+</div>
>+
>+<div class="grid border" style="grid-template-rows: auto 60%;" data-expected-height="45">
>+  <div class="secondRowFirstColumn" data-expected-height="15">X</div>
>+</div>
>+
>+<div class="grid border" style="grid-template-rows: auto 60%;" data-expected-height="70">
>+  <div class="secondRowFirstColumn" data-expected-height="30">X<br>X</div>
>+</div>
>+
>+<div class="grid border" style="grid-template-rows: auto 60%;" data-expected-height="45">
>+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
>+  <div class="secondRowFirstColumn" data-expected-height="15"></div>
>+</div>
>+
>+<div class="grid border" style="grid-template-rows: auto 60%;" data-expected-height="70">
>+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
>+  <div class="secondRowFirstColumn" data-expected-height="30">X</div>
>+</div>
>+
>+<div class="grid border" style="grid-template-rows: auto 60%;" data-expected-height="95">
>+  <div class="firstRowFirstColumn" data-expected-height="30">X</div>
>+  <div class="secondRowFirstColumn" data-expected-height="45">X<br>X</div>
>+</div>
>+
>+<div class="grid padding" style="grid-template-rows: auto 60%;" data-expected-height="10">
>+  <div class="secondRowFirstColumn" data-expected-height="0"></div>
>+</div>
>+
>+<div class="grid padding" style="grid-template-rows: auto 60%;" data-expected-height="35">
>+  <div class="secondRowFirstColumn" data-expected-height="15">X</div>
>+</div>
>+
>+<div class="grid padding" style="grid-template-rows: auto 60%;" data-expected-height="60">
>+  <div class="secondRowFirstColumn" data-expected-height="30">X<br>X</div>
>+</div>
>+
>+<div class="grid padding" style="grid-template-rows: auto 60%;" data-expected-height="35">
>+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
>+  <div class="secondRowFirstColumn" data-expected-height="15"></div>
>+</div>
>+
>+<div class="grid padding" style="grid-template-rows: auto 60%;" data-expected-height="60">
>+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
>+  <div class="secondRowFirstColumn" data-expected-height="30">X</div>
>+</div>
>+
>+<div class="grid padding" style="grid-template-rows: auto 60%;" data-expected-height="85">
>+  <div class="firstRowFirstColumn" data-expected-height="30">X</div>
>+  <div class="secondRowFirstColumn" data-expected-height="45">X<br>X</div>
>+</div>
>+
>+<div class="grid border padding" style="grid-template-rows: auto 60%;" data-expected-height="30">
>+  <div class="secondRowFirstColumn" data-expected-height="0"></div>
>+</div>
>+
>+<div class="grid border padding" style="grid-template-rows: auto 60%;" data-expected-height="55">
>+  <div class="secondRowFirstColumn" data-expected-height="15">X</div>
>+</div>
>+
>+<div class="grid border padding" style="grid-template-rows: auto 60%;" data-expected-height="80">
>+  <div class="secondRowFirstColumn" data-expected-height="30">X<br>X</div>
>+</div>
>+
>+<div class="grid border padding" style="grid-template-rows: auto 60%;" data-expected-height="55">
>+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
>+  <div class="secondRowFirstColumn" data-expected-height="15"></div>
>+</div>
>+
>+<div class="grid border padding" style="grid-template-rows: auto 60%;" data-expected-height="80">
>+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
>+  <div class="secondRowFirstColumn" data-expected-height="30">X</div>
>+</div>
>+
>+<div class="grid border padding" style="grid-template-rows: auto 60%;" data-expected-height="105">
>+  <div class="firstRowFirstColumn" data-expected-height="30">X</div>
>+  <div class="secondRowFirstColumn" data-expected-height="45">X<br>X</div>
>+</div>
>+
>+<p>grid-template-rows: auto 140%;</p>
>+
>+<div class="grid" style="grid-template-rows: auto 140%;" data-expected-height="0">
>+  <div class="secondRowFirstColumn" data-expected-height="0"></div>
>+</div>
>+
>+<div class="grid" style="grid-template-rows: auto 140%;" data-expected-height="25">
>+  <div class="secondRowFirstColumn" data-expected-height="35">X</div>
>+</div>
>+
>+<div class="grid" style="grid-template-rows: auto 140%;" data-expected-height="50">
>+  <div class="secondRowFirstColumn" data-expected-height="70">X<br>X</div>
>+</div>
>+
>+<div class="grid" style="grid-template-rows: auto 140%;" data-expected-height="25">
>+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
>+  <div class="secondRowFirstColumn" data-expected-height="35"></div>
>+</div>
>+
>+<div class="grid" style="grid-template-rows: auto 140%;" data-expected-height="50">
>+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
>+  <div class="secondRowFirstColumn" data-expected-height="70">X</div>
>+</div>
>+
>+<div class="grid" style="grid-template-rows: auto 140%;" data-expected-height="75">
>+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
>+  <div class="secondRowFirstColumn" data-expected-height="105">X<br>X</div>
>+</div>
>+
>+<div class="grid border" style="grid-template-rows: auto 140%;" data-expected-height="20">
>+  <div class="secondRowFirstColumn" data-expected-height="0"></div>
>+</div>
>+
>+<div class="grid border" style="grid-template-rows: auto 140%;" data-expected-height="45">
>+  <div class="secondRowFirstColumn" data-expected-height="35">X</div>
>+</div>
>+
>+<div class="grid border" style="grid-template-rows: auto 140%;" data-expected-height="70">
>+  <div class="secondRowFirstColumn" data-expected-height="70">X<br>X</div>
>+</div>
>+
>+<div class="grid border" style="grid-template-rows: auto 140%;" data-expected-height="45">
>+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
>+  <div class="secondRowFirstColumn" data-expected-height="35"></div>
>+</div>
>+
>+<div class="grid border" style="grid-template-rows: auto 140%;" data-expected-height="70">
>+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
>+  <div class="secondRowFirstColumn" data-expected-height="70">X</div>
>+</div>
>+
>+<div class="grid border" style="grid-template-rows: auto 140%;" data-expected-height="95">
>+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
>+  <div class="secondRowFirstColumn" data-expected-height="105">X<br>X</div>
>+</div>
>+
>+<div class="grid padding" style="grid-template-rows: auto 140%;" data-expected-height="10">
>+  <div class="secondRowFirstColumn" data-expected-height="0"></div>
>+</div>
>+
>+<div class="grid padding" style="grid-template-rows: auto 140%;" data-expected-height="35">
>+  <div class="secondRowFirstColumn" data-expected-height="35">X</div>
>+</div>
>+
>+<div class="grid padding" style="grid-template-rows: auto 140%;" data-expected-height="60">
>+  <div class="secondRowFirstColumn" data-expected-height="70">X<br>X</div>
>+</div>
>+
>+<div class="grid padding" style="grid-template-rows: auto 140%;" data-expected-height="35">
>+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
>+  <div class="secondRowFirstColumn" data-expected-height="35"></div>
>+</div>
>+
>+<div class="grid padding" style="grid-template-rows: auto 140%;" data-expected-height="60">
>+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
>+  <div class="secondRowFirstColumn" data-expected-height="70">X</div>
>+</div>
>+
>+<div class="grid padding" style="grid-template-rows: auto 140%;" data-expected-height="85">
>+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
>+  <div class="secondRowFirstColumn" data-expected-height="105">X<br>X</div>
>+</div>
>+
>+<div class="grid border padding" style="grid-template-rows: auto 140%;" data-expected-height="30">
>+  <div class="secondRowFirstColumn" data-expected-height="0"></div>
>+</div>
>+
>+<div class="grid border padding" style="grid-template-rows: auto 140%;" data-expected-height="55">
>+  <div class="secondRowFirstColumn" data-expected-height="35">X</div>
>+</div>
>+
>+<div class="grid border padding" style="grid-template-rows: auto 140%;" data-expected-height="80">
>+  <div class="secondRowFirstColumn" data-expected-height="70">X<br>X</div>
>+</div>
>+
>+<div class="grid border padding" style="grid-template-rows: auto 140%;" data-expected-height="55">
>+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
>+  <div class="secondRowFirstColumn" data-expected-height="35"></div>
>+</div>
>+
>+<div class="grid border padding" style="grid-template-rows: auto 140%;" data-expected-height="80">
>+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
>+  <div class="secondRowFirstColumn" data-expected-height="70">X</div>
>+</div>
>+
>+<div class="grid border padding" style="grid-template-rows: auto 140%;" data-expected-height="105">
>+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
>+  <div class="secondRowFirstColumn" data-expected-height="105">X<br>X</div>
>+</div>
>+
>+</body>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-002-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-002-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..949c47b1219e4682dfacfcdd042bdd47cf444a4d
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-002-expected.txt
>@@ -0,0 +1,13 @@
>+
>+PASS .grid 1 
>+PASS .grid 2 
>+PASS .grid 3 
>+PASS .grid 4 
>+X
>+X
>+X
>+X
>+X X X X
>+X
>+X X X X
>+X
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-002.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-002.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..8285a91d8ba57f9a6167afc28b95e9dee0aef2b7
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-002.html
>@@ -0,0 +1,49 @@
>+<!DOCTYPE html>
>+<html lang="en">
>+<meta charset="utf-8">
>+<title>CSS Grid Layout Test: Percentage rows indefinite height 2nd pass</title>
>+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
>+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#track-sizing">
>+<meta name="assert" content="This test checkds that when we have percentage rows in indefinite height grid containers, we need to do a second pass of the track sizing algorithm to get the expected results.">
>+<meta name="flags" content="ahem">
>+<style>
>+.grid {
>+  display: grid;
>+  border: solid 5px;
>+  position: relative;
>+  font: 25px/1 Ahem;
>+  margin: 50px 0;
>+}
>+</style>
>+<script src="/resources/testharness.js"></script>
>+<script src="/resources/testharnessreport.js"></script>
>+<script src="/resources/check-layout-th.js"></script>
>+<body onload="checkLayout('.grid');">
>+
>+<div id="log"></div>
>+
>+<div class="grid" style="grid-template-rows: auto 60% auto;" data-expected-height="35">
>+  <div style="grid-row: 1; grid-column: 1; background: cyan;" data-expected-height="5" data-offset-top="0"></div>
>+  <div style="grid-row: 1 / 4; grid-column: 2; background: magenta;" data-expected-height="25" data-offset-top="0">X</div>
>+  <div style="grid-row: 3; grid-column: 3; background: lime;" data-expected-height="5" data-offset-top="20"></div>
>+</div>
>+
>+<div class="grid" style="grid-template-rows: auto 20% auto;" data-expected-height="60">
>+  <div style="grid-row: 1; grid-column: 1; background: cyan;" data-expected-height="25" data-offset-top="0">X</div>
>+  <div style="grid-row: 1 / 4; grid-column: 2; background: magenta;" data-expected-height="60" data-offset-top="0">X</div>
>+  <div style="grid-row: 3; grid-column: 3; background: lime;" data-expected-height="25" data-offset-top="35">X</div>
>+</div>
>+
>+<div class="grid" style="grid-template-rows: auto 10% auto; grid-template-columns: repeat(3, 50px);" data-expected-height="110">
>+  <div style="grid-row: 1; grid-column: 1; background: cyan;" data-expected-height="45"></div>
>+  <div style="grid-row: 1 / 4; grid-column: 2; background: magenta;" data-expected-height="100">X X X X</div>
>+  <div style="grid-row: 3; grid-column: 3; background: lime;" data-expected-height="45"></div>
>+</div>
>+
>+<div class="grid" style="grid-template-rows: auto 10% auto; grid-template-columns: repeat(3, 50px);" data-expected-height="110">
>+  <div style="grid-row: 1; grid-column: 1; background: cyan;" data-expected-height="45">X</div>
>+  <div style="grid-row: 1 / 4; grid-column: 2; background: magenta;" data-expected-height="100">X X X X</div>
>+  <div style="grid-row: 3; grid-column: 3; background: lime;" data-expected-height="45">X</div>
>+</div>
>+
>+</body>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/w3c-import.log b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/w3c-import.log
>index abcab4bd46cade9876b9eb87cdc2cc62838167a4..f7045c3743bfcad141ac4a2d7520e167437287d2 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/w3c-import.log
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/w3c-import.log
>@@ -1,7 +1,7 @@
> The tests in this directory were imported from the W3C repository.
> Do NOT modify these tests directly in WebKit.
> Instead, create a pull request on the WPT github:
>-	https://github.com/w3c/web-platform-tests
>+	https://github.com/web-platform-tests/wpt
> 
> Then run the Tools/Scripts/import-w3c-tests in WebKit to reimport
> 
>@@ -32,6 +32,8 @@ List of files:
> /LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-layout-basic.html
> /LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-layout-repeat-notation-expected.html
> /LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-layout-repeat-notation.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-001.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-002.html
> /LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-shorthand-001.html
> /LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-support-flexible-lengths-001.html
> /LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-definition/grid-support-grid-template-areas-001.html
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-layout-properties.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-layout-properties.html
>index 5945550d9c48096a03962dc58f81a6b69ff8de03..f25c90f41518117a307f0b6c4c9d82a1fff87e89 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-layout-properties.html
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-layout-properties.html
>@@ -94,7 +94,7 @@
>         '<line-names>': ['[a] auto [b] auto [c]', '[a] 50px [b] 50px [c] 50px'],
>         '<track-size>.auto': ['auto', '50px 50px 50px'],
>         '<track-size>.<track-breadth>.<length>': ['100px', '100px 50px 50px'],
>-        '<track-size>.<track-breadth>.<percentage>': ['100%', '50px 50px 50px'],
>+        '<track-size>.<track-breadth>.<percentage>': ['100%', '150px 50px 50px'],
>         '<track-size>.<track-breadth>.<flex>': ['1fr', '50px 50px 50px'],
>         '<track-size>.<track-breadth>.min-content': ['min-content', '50px 50px 50px'],
>         '<track-size>.<track-breadth>.max-content': ['max-content', '50px 50px 50px'],

Actions: View | Formatted Diff | Diff

Attachments on bug 188403: 346757