Attachment 184051 Details for Bug 107044 – Proposed change 3: s/id/class/g.

[patch] Proposed change 3: s/id/class/g.

bug-107044-20130122144644.patch (text/plain), 75.30 KB, created by Julien Chaffraix on 2013-01-22 14:49:49 PST

(hide)

Description:

Filename:

MIME Type:

Creator: Julien Chaffraix

Created: 2013-01-22 14:49:49 PST

Size: 75.30 KB

patch

obsolete

>Subversion Revision: 140445
>diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
>index 8480970643af178da2f1b90c6d912aa72e9c8e53..735be9855ba5a3cf636c2b92a9658b2b48059a33 100644
>--- a/LayoutTests/ChangeLog
>+++ b/LayoutTests/ChangeLog
>@@ -1,3 +1,38 @@
>+2013-01-22  Julien Chaffraix  <jchaffraix@webkit.org>
>+
>+        [CSS Grid Layout] Add grid.css to hold the common grid testing code
>+        https://bugs.webkit.org/show_bug.cgi?id=107044
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        * fast/css-grid-layout/containing-block-grids.html:
>+        Removed 2 bad display: none rules that where overriden by
>+        the inline style declaration.
>+
>+        * fast/css-grid-layout/minmax-fixed-logical-height-only.html:
>+        * fast/css-grid-layout/breadth-size-resolution-grid.html:
>+        * fast/css-grid-layout/calc-resolution-grid-item.html:
>+        * fast/css-grid-layout/display-grid-set-get.html:
>+        * fast/css-grid-layout/grid-columns-rows-get-set-multiple.html:
>+        * fast/css-grid-layout/grid-columns-rows-get-set.html:
>+        * fast/css-grid-layout/grid-element-padding-margin.html:
>+        * fast/css-grid-layout/minmax-fixed-logical-width-only.html:
>+        * fast/css-grid-layout/minmax-min-content-column-resolution-columns.html:
>+        * fast/css-grid-layout/minmax-min-content-column-resolution-rows.html:
>+        * fast/css-grid-layout/percent-grid-item-in-percent-grid-track-in-percent-grid.html:
>+        * fast/css-grid-layout/percent-grid-item-in-percent-grid-track-update.html:
>+        * fast/css-grid-layout/percent-grid-item-in-percent-grid-track.html:
>+        * fast/css-grid-layout/percent-padding-margin-resolution-grid-item-update.html:
>+        * fast/css-grid-layout/percent-padding-margin-resolution-grid-item.html:
>+        * fast/css-grid-layout/percent-resolution-grid-item.html:
>+        * fast/css-grid-layout/place-cell-by-index.html:
>+        Updated all the files above to:
>+        - use grid.css.
>+        - rename 'a', 'b', 'c' and 'd' to more meaningful.
>+        - change the previous ids to be classes as we ended up having several divs with the same id.
>+
>+        * fast/css-grid-layout/resources/grid.css: Added.
>+
> 2013-01-22  Sheriff Bot  <webkit.review.bot@gmail.com>
> 
>         Unreviewed, rolling out r140435.
>diff --git a/LayoutTests/fast/css-grid-layout/breadth-size-resolution-grid.html b/LayoutTests/fast/css-grid-layout/breadth-size-resolution-grid.html
>index ce3db687171e8f504b03a4d0240056d1dc376430..2659b22fe2a3446f1347436dce8df1fb0cdd2e6f 100644
>--- a/LayoutTests/fast/css-grid-layout/breadth-size-resolution-grid.html
>+++ b/LayoutTests/fast/css-grid-layout/breadth-size-resolution-grid.html
>@@ -4,49 +4,32 @@
> if (window.testRunner)
>     testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
> </script>
>+<link href="resources/grid.css" rel="stylesheet">
> <style>
> .grid {
>-    display: -webkit-grid;
>-    background-color: grey;
>     -webkit-grid-columns: 100px 10vw;
>     -webkit-grid-rows: 10vh 100px;
> }
> 
>-#a {
>-    background-color: blue;
>-    -webkit-grid-column: 1;
>-    -webkit-grid-row: 1;
>+.firstRowFirstColumn {
>     width: 100%;
>     height: 100%;
> }
> 
>-#b {
>-    background-color: lime;
>-    -webkit-grid-column: 2;
>-    -webkit-grid-row: 1;
>+.firstRowSecondColumn {
>     width: 100%;
>     height: 100%;
> }
> 
>-#c {
>-    background-color: purple;
>-    -webkit-grid-column: 1;
>-    -webkit-grid-row: 2;
>+.secondRowFirstColumn {
>     width: 100%;
>     height: 100%;
> }
> 
>-#d {
>-    background-color: orange;
>-    -webkit-grid-column: 2;
>-    -webkit-grid-row: 2;
>+.secondRowSecondColumn {
>     width: 100%;
>     height: 100%;
> }
>-
>-.verticalRL {
>-    -webkit-writing-mode: vertical-rl;
>-}
> </style>
> <script src="../../resources/check-layout.js"></script>
> <body onload="checkLayout('.grid')">
>@@ -54,24 +37,24 @@ if (window.testRunner)
> <p>Test that specifying the track breadth sizes works properly with all the allowed length types and in different writing modes.</p>
> 
> <div class="grid">
>-    <div id="a" data-expected-width="100" data-expected-height="60"></div>
>-    <div id="b" data-expected-width="80" data-expected-height="60"></div>
>-    <div id="c" data-expected-width="100" data-expected-height="100"></div>
>-    <div id="d" data-expected-width="80" data-expected-height="100"></div>
>+    <div class="firstRowFirstColumn" data-expected-width="100" data-expected-height="60"></div>
>+    <div class="firstRowSecondColumn" data-expected-width="80" data-expected-height="60"></div>
>+    <div class="secondRowFirstColumn" data-expected-width="100" data-expected-height="100"></div>
>+    <div class="secondRowSecondColumn" data-expected-width="80" data-expected-height="100"></div>
> </div>
> 
> <div class="grid verticalRL">
>-    <div id="a" data-expected-width="60" data-expected-height="100"></div>
>-    <div id="b" data-expected-width="60" data-expected-height="80"></div>
>-    <div id="c" data-expected-width="100" data-expected-height="100"></div>
>-    <div id="d" data-expected-width="100" data-expected-height="80"></div>
>+    <div class="firstRowFirstColumn" data-expected-width="60" data-expected-height="100"></div>
>+    <div class="firstRowSecondColumn" data-expected-width="60" data-expected-height="80"></div>
>+    <div class="secondRowFirstColumn" data-expected-width="100" data-expected-height="100"></div>
>+    <div class="secondRowSecondColumn" data-expected-width="100" data-expected-height="80"></div>
> </div>
> 
> <div class="grid">
>-     <div id="a" class="verticalRL" data-expected-width="100" data-expected-height="60"></div>
>-     <div id="b" data-expected-width="80" data-expected-height="60"></div>
>-     <div id="c" class="verticalRL" data-expected-width="100" data-expected-height="100"></div>
>-     <div id="d" data-expected-width="80" data-expected-height="100"></div>
>+     <div class="firstRowFirstColumn" class="verticalRL" data-expected-width="100" data-expected-height="60"></div>
>+     <div class="firstRowSecondColumn" data-expected-width="80" data-expected-height="60"></div>
>+     <div class="secondRowFirstColumn" class="verticalRL" data-expected-width="100" data-expected-height="100"></div>
>+     <div class="secondRowSecondColumn" data-expected-width="80" data-expected-height="100"></div>
> </div>
> 
> </body>
>diff --git a/LayoutTests/fast/css-grid-layout/calc-resolution-grid-item.html b/LayoutTests/fast/css-grid-layout/calc-resolution-grid-item.html
>index 6ce0427b7163ef57e170d2debb8f0effb28427a2..c47207ff618f3ca9f0b323faf72c6e0861be4af8 100644
>--- a/LayoutTests/fast/css-grid-layout/calc-resolution-grid-item.html
>+++ b/LayoutTests/fast/css-grid-layout/calc-resolution-grid-item.html
>@@ -4,40 +4,15 @@
> if (window.testRunner)
>     testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
> </script>
>+<link href="resources/grid.css" rel="stylesheet">
> <style>
> .grid {
>-    display: -webkit-grid;
>-    background-color: grey;
>     -webkit-grid-columns: 100px 300px;
>     -webkit-grid-rows: 50px 150px;
>     height: 200px;
>     width: 400px;
> }
> 
>-#a {
>-    background-color: blue;
>-    -webkit-grid-column: 1;
>-    -webkit-grid-row: 1;
>-}
>-
>-#b {
>-    background-color: lime;
>-    -webkit-grid-column: 2;
>-    -webkit-grid-row: 1;
>-}
>-
>-#c {
>-    background-color: purple;
>-    -webkit-grid-column: 1;
>-    -webkit-grid-row: 2;
>-}
>-
>-#d {
>-    background-color: orange;
>-    -webkit-grid-column: 2;
>-    -webkit-grid-row: 2;
>-}
>-
> .calcWidth {
>     width: -webkit-calc(80% + 20%);
>     height: 15px;
>@@ -52,10 +27,6 @@ if (window.testRunner)
>     width: -webkit-calc(80% + 20px);
>     height: -webkit-calc(70% + 30%);
> }
>-
>-.verticalRL {
>-    -webkit-writing-mode: vertical-rl;
>-}
> </style>
> <script src="../../resources/check-layout.js"></script>
> <body onload="checkLayout('.grid')">
>@@ -63,31 +34,31 @@ if (window.testRunner)
> <p>Test that resolving calc lengths on grid items works properly on a fixed grid with different writing modes.</p>
> 
> <div class="grid">
>-    <div id="a" class="calcWidth" data-expected-width="100" data-expected-height="15"></div>
>-    <div id="b" class="calcHeight" data-expected-width="15" data-expected-height="60"></div>
>-    <div id="c" class="calcHeightAndWidth" data-expected-width="100" data-expected-height="150"></div>
>-    <div id="d" class="calcHeightAndWidth" data-expected-width="260" data-expected-height="150"></div>
>+    <div class="firstRowFirstColumn calcWidth" data-expected-width="100" data-expected-height="15"></div>
>+    <div class="firstRowSecondColumn calcHeight" data-expected-width="15" data-expected-height="60"></div>
>+    <div class="secondRowFirstColumn calcHeightAndWidth" data-expected-width="100" data-expected-height="150"></div>
>+    <div class="secondRowSecondColumn calcHeightAndWidth" data-expected-width="260" data-expected-height="150"></div>
> </div>
> 
> <div class="grid verticalRL">
>-    <div id="a" class="calcWidth" data-expected-width="50" data-expected-height="15"></div>
>-    <div id="b" class="calcHeight" data-expected-width="15" data-expected-height="260"></div>
>-    <div id="c" class="calcHeightAndWidth" data-expected-width="140" data-expected-height="100"></div>
>-    <div id="d" class="calcHeightAndWidth" data-expected-width="140" data-expected-height="300"></div>
>+    <div class="firstRowFirstColumn calcWidth" data-expected-width="50" data-expected-height="15"></div>
>+    <div class="firstRowSecondColumn calcHeight" data-expected-width="15" data-expected-height="260"></div>
>+    <div class="secondRowFirstColumn calcHeightAndWidth" data-expected-width="140" data-expected-height="100"></div>
>+    <div class="secondRowSecondColumn calcHeightAndWidth" data-expected-width="140" data-expected-height="300"></div>
> </div>
> 
> <div class="grid">
>-    <div id="a" class="calcWidth verticalRL" data-expected-width="100" data-expected-height="15"></div>
>-    <div id="b" class="calcHeight verticalRL" data-expected-width="15" data-expected-height="60"></div>
>-    <div id="c" class="calcHeightAndWidth verticalRL" data-expected-width="100" data-expected-height="150"></div>
>-    <div id="d" class="calcHeightAndWidth verticalRL" data-expected-width="260" data-expected-height="150"></div>
>+    <div class="firstRowFirstColumn calcWidth verticalRL" data-expected-width="100" data-expected-height="15"></div>
>+    <div class="firstRowSecondColumn calcHeight verticalRL" data-expected-width="15" data-expected-height="60"></div>
>+    <div class="secondRowFirstColumn calcHeightAndWidth verticalRL" data-expected-width="100" data-expected-height="150"></div>
>+    <div class="secondRowSecondColumn calcHeightAndWidth verticalRL" data-expected-width="260" data-expected-height="150"></div>
> </div>
> 
> <div class="grid">
>-    <div id="a" class="calcWidth verticalRL" data-expected-width="100" data-expected-height="15"></div>
>-    <div id="b" class="calcHeight" data-expected-width="15" data-expected-height="60"></div>
>-    <div id="c" class="calcHeightAndWidth verticalRL" data-expected-width="100" data-expected-height="150"></div>
>-    <div id="d" class="calcHeightAndWidth" data-expected-width="260" data-expected-height="150"></div>
>+    <div class="firstRowFirstColumn calcWidth verticalRL" data-expected-width="100" data-expected-height="15"></div>
>+    <div class="firstRowSecondColumn calcHeight" data-expected-width="15" data-expected-height="60"></div>
>+    <div class="secondRowFirstColumn calcHeightAndWidth verticalRL" data-expected-width="100" data-expected-height="150"></div>
>+    <div class="secondRowSecondColumn calcHeightAndWidth" data-expected-width="260" data-expected-height="150"></div>
> </div>
> </body>
> </html>
>diff --git a/LayoutTests/fast/css-grid-layout/containing-block-grids.html b/LayoutTests/fast/css-grid-layout/containing-block-grids.html
>index 8bb4b8abdf79ca53b82a74b3151f585367bc52be..67230161453d7ce409e0ec9694a62f3fab978884 100644
>--- a/LayoutTests/fast/css-grid-layout/containing-block-grids.html
>+++ b/LayoutTests/fast/css-grid-layout/containing-block-grids.html
>@@ -5,15 +5,16 @@
>         if (window.testRunner)
>             testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
>     </script>
>+    <link href="resources/grid.css" rel="stylesheet">
>     <style>
>         div { width: 100px; height: 100px; }
>-        .relative-positioned-grid { display: none; background-color: red; position:relative; }
>-        .relative-positioned-inline-grid { display: none; background-color: red; position: relative; }
>+        .relative-positioned-grid { background-color: red; position:relative; }
>+        .relative-positioned-inline-grid { background-color: red; position: relative; }
>     </style>
> </head>
> <body>
> <p>Grids can act as containing blocks for positioned content.</p>
>-<div class="relative-positioned-grid" style="display: -webkit-grid"><div style="background-color: green; left: 0; top: 0"></div></div>
>-<div class="relative-positioned-inline-grid" style="display: -webkit-inline-grid"><div style="background-color:green; left: 0; top: 0"></div></div>
>+<div class="relative-positioned-grid grid"><div style="background-color: green; left: 0; top: 0"></div></div>
>+<div class="relative-positioned-inline-grid inline-grid"><div style="background-color:green; left: 0; top: 0"></div></div>
> </body>
> </html>
>diff --git a/LayoutTests/fast/css-grid-layout/display-grid-set-get.html b/LayoutTests/fast/css-grid-layout/display-grid-set-get.html
>index f3ac6464a80b02be7ce10338fa652d6eae842665..694cc76d4c57b08edf4af46cf06750a419e2ea53 100755
>--- a/LayoutTests/fast/css-grid-layout/display-grid-set-get.html
>+++ b/LayoutTests/fast/css-grid-layout/display-grid-set-get.html
>@@ -5,15 +5,12 @@
> if (window.testRunner)
>     testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
> </script>
>-<style>
>-.grid { display: -webkit-grid; }
>-.inlineGrid { display: -webkit-inline-grid; }
>-</style>
>+<link href="resources/grid.css" rel="stylesheet">
> <script src="../js/resources/js-test-pre.js"></script>
> </head>
> <body>
> <div class="grid" id="gridElement"></div>
>-<div class="inlineGrid" id="inlineGridElement"></div>
>+<div class="inline-grid" id="inlineGridElement"></div>
> <script src="resources/display-grid-set-get.js"></script>
> <script src="../js/resources/js-test-post.js"></script>
> </body>
>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 168700d037bc1820d61d6ce917820fb9d6194b6d..70b3165e40884518ef6f47d3c2fb834532d6cc9c 100755
>--- 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
>@@ -5,68 +5,57 @@
> if (window.testRunner)
>     testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
> </script>
>+<link href="resources/grid.css" rel="stylesheet">
> <style>
> .gridWithFixed {
>-    display: -webkit-grid;
>     -webkit-grid-columns: 7px 11px;
>     -webkit-grid-rows: 17px 2px;
> }
> 
> .gridWithPercent {
>-    display: -webkit-grid;
>     -webkit-grid-columns: 53% 99%;
>     -webkit-grid-rows: 27% 52%;
> }
> .gridWithAuto {
>-    display: -webkit-grid;
>     -webkit-grid-columns: auto auto;
>     -webkit-grid-rows: auto auto;
> }
> .gridWithEM {
>-    display: -webkit-grid;
>     -webkit-grid-columns: 10em 12em;
>     -webkit-grid-rows: 15em 17em;
>     font: 10px Ahem;
> }
> .gridWithNoneAndAuto {
>-    display: -webkit-grid;
>     -webkit-grid-columns: none auto;
>     -webkit-grid-rows: none auto;
> }
> .gridNoneWithAndFixed {
>-    display: -webkit-grid;
>     -webkit-grid-columns: none 15px;
>     -webkit-grid-rows: none 22px;
> }
> .gridWithThreeItems {
>-    display: -webkit-grid;
>     -webkit-grid-columns: 15px auto 10em;
>     -webkit-grid-rows: 12em 18px auto;
>     font: 10px Ahem;
> }
> .gridWithPercentAndViewportPercent {
>-    display: -webkit-grid;
>     -webkit-grid-columns: 50% 15vw;
>     -webkit-grid-rows: 35% 28vh;
> }
> .gridWithFitContentAndFitAvailable {
>-    display: -webkit-grid;
>     -webkit-grid-columns: -webkit-content-available;
>     -webkit-grid-rows: -webkit-fitcontent -webkit-fit-available;
> }
> .gridWithMinMaxContent {
>-    display: -webkit-grid;
>     -webkit-grid-columns: -webkit-min-content -webkit-max-content;
>     -webkit-grid-rows: -webkit-max-content -webkit-min-content;
> }
> .gridWithMinMaxAndFixed {
>-    display: -webkit-grid;
>     -webkit-grid-columns: minmax(45px, 30%) 15px;
>     -webkit-grid-rows: 12em minmax(35%, 10px);
>     font: 10px Ahem;
> }
> .gridWithMinMaxAndMinMaxContent {
>-    display: -webkit-grid;
>     -webkit-grid-columns: minmax(-webkit-min-content, 30%) 15px;
>     -webkit-grid-rows: 12em minmax(35%, -webkit-max-content);
>     font: 10px Ahem;
>@@ -75,18 +64,18 @@ if (window.testRunner)
> <script src="../js/resources/js-test-pre.js"></script>
> </head>
> <body>
>-<div class="gridWithFixed" id="gridWithFixedElement"></div>
>-<div class="gridWithPercent" id="gridWithPercentElement"></div>
>-<div class="gridWithAuto" id="gridWithAutoElement"></div>
>-<div class="gridWithEM" id="gridWithEMElement"></div>
>-<div class="gridWithNoneAndAuto" id="gridWithNoneAndAuto"></div>
>-<div class="gridWithNoneAndFixed" id="gridWithNoneAndFixed"></div>
>-<div class="gridWithThreeItems" id="gridWithThreeItems"></div>
>-<div class="gridWithPercentAndViewportPercent" id="gridWithPercentAndViewportPercent"></div>
>-<div class="gridWithFitContentAndFitAvailable" id="gridWithFitContentAndFitAvailable"></div>
>-<div class="gridWithMinMaxContent" id="gridWithMinMaxContent"></div>
>-<div class="gridWithMinMaxAndFixed" id="gridWithMinMaxAndFixed"></div>
>-<div class="gridWithMinMaxAndMinMaxContent" id="gridWithMinMaxAndMinMaxContent"></div>
>+<div class="grid gridWithFixed" id="gridWithFixedElement"></div>
>+<div class="grid gridWithPercent" id="gridWithPercentElement"></div>
>+<div class="grid gridWithAuto" id="gridWithAutoElement"></div>
>+<div class="grid gridWithEM" id="gridWithEMElement"></div>
>+<div class="grid gridWithNoneAndAuto" id="gridWithNoneAndAuto"></div>
>+<div class="grid gridWithNoneAndFixed" id="gridWithNoneAndFixed"></div>
>+<div class="grid gridWithThreeItems" id="gridWithThreeItems"></div>
>+<div class="grid gridWithPercentAndViewportPercent" id="gridWithPercentAndViewportPercent"></div>
>+<div class="grid gridWithFitContentAndFitAvailable" id="gridWithFitContentAndFitAvailable"></div>
>+<div class="grid gridWithMinMaxContent" id="gridWithMinMaxContent"></div>
>+<div class="grid gridWithMinMaxAndFixed" id="gridWithMinMaxAndFixed"></div>
>+<div class="grid gridWithMinMaxAndMinMaxContent" id="gridWithMinMaxAndMinMaxContent"></div>
> <script src="resources/grid-columns-rows-get-set-multiple.js"></script>
> <script src="../js/resources/js-test-post.js"></script>
> </body>
>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 6bf27a78180c5a04995a8fd2b449d6e7f9a3f4fd..5d77596ec065788608c660e64aa1e57bc9c88183 100755
>--- a/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set.html
>+++ b/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set.html
>@@ -5,10 +5,8 @@
> if (window.testRunner)
>     testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
> </script>
>+<link href="resources/grid.css" rel="stylesheet">
> <style>
>-.grid {
>-    display: -webkit-grid;
>-}
> .gridWithNone {
>     -webkit-grid-columns: none;
>     -webkit-grid-rows: none;
>diff --git a/LayoutTests/fast/css-grid-layout/grid-element-padding-margin.html b/LayoutTests/fast/css-grid-layout/grid-element-padding-margin.html
>index 507e0d882dc9b09a5ec106aed27ee34b836a8cd1..5be88b4c5a06173e8fb7cc1b1f0b7e1a6bb0ace9 100644
>--- a/LayoutTests/fast/css-grid-layout/grid-element-padding-margin.html
>+++ b/LayoutTests/fast/css-grid-layout/grid-element-padding-margin.html
>@@ -4,10 +4,9 @@
> if (window.testRunner)
>     testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
> </script>
>+<link href="resources/grid.css" rel="stylesheet">
> <style>
> .grid {
>-    display: -webkit-grid;
>-    background-color: grey;
>     -webkit-grid-columns: 100px;
>     -webkit-grid-rows: 50px;
>     /* Force the grid element to be shrink-to-fit. */
>@@ -23,10 +22,6 @@ if (window.testRunner)
>     border-color: green;
>     border-width: 10px 20px 30px 40px;
> }
>-
>-.verticalRL {
>-    -webkit-writing-mode: vertical-rl;
>-}
> </style>
> <script src="../../resources/check-layout.js"></script>
> <body onload="checkLayout('.grid')">
>diff --git a/LayoutTests/fast/css-grid-layout/minmax-fixed-logical-height-only.html b/LayoutTests/fast/css-grid-layout/minmax-fixed-logical-height-only.html
>index 5d8575cac704c81c91f699d73e1ff22c4d571e76..aa11c7b0c1b46372de3dc76a611cc413e98fa957 100644
>--- a/LayoutTests/fast/css-grid-layout/minmax-fixed-logical-height-only.html
>+++ b/LayoutTests/fast/css-grid-layout/minmax-fixed-logical-height-only.html
>@@ -4,10 +4,9 @@
> if (window.testRunner)
>     testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
> </script>
>+<link href="resources/grid.css" rel="stylesheet">
> <style>
> .grid {
>-    display: -webkit-grid;
>-    background-color: grey;
>     width: 100px;
>     height: 200px;
> }
>@@ -48,22 +47,15 @@ if (window.testRunner)
>     -webkit-writing-mode: horizontal-bt;
> }
> 
>-#a {
>-    background-color: blue;
>-    -webkit-grid-column: 1;
>-    -webkit-grid-row: 1;
>+.firstRowFirstColumn {
>     width: 100%;
>     height: 100%;
> }
> 
>-#b {
>-    background-color: green;
>-    -webkit-grid-column: 1;
>-    -webkit-grid-row: 2;
>+.secondRowFirstColumn {
>     width: 100%;
>     height: 100%;
> }
>-
> </style>
> <script src="../../resources/check-layout.js"></script>
> <body onload="checkLayout('.grid')">
>@@ -72,33 +64,33 @@ if (window.testRunner)
> <p>Checks that a grid element with fixed minmax properly compute the logical height in several writing-mode.</p>
> 
> <div class="grid" id="grid1" data-expected-width="100" data-expected-height="200">
>-    <div id="a" data-expected-height="40" data-expected-width="30"></div>
>-    <div id="b" data-expected-height="160" data-expected-width="30"></div>
>+    <div class="firstRowFirstColumn" data-expected-height="40" data-expected-width="30"></div>
>+    <div class="secondRowFirstColumn" data-expected-height="160" data-expected-width="30"></div>
> </div>
> 
> <div class="grid" id="grid2" data-expected-width="100" data-expected-height="200">
>-    <div id="a" data-expected-height="120" data-expected-width="30"></div>
>-    <div id="b" data-expected-height="80" data-expected-width="30"></div>
>+    <div class="firstRowFirstColumn" data-expected-height="120" data-expected-width="30"></div>
>+    <div class="secondRowFirstColumn" data-expected-height="80" data-expected-width="30"></div>
> </div>
> 
> <div class="grid" id="grid3" data-expected-width="100" data-expected-height="200">
>-    <div id="a" data-expected-height="90" data-expected-width="30"></div>
>-    <div id="b" data-expected-height="110" data-expected-width="30"></div>
>+    <div class="firstRowFirstColumn" data-expected-height="90" data-expected-width="30"></div>
>+    <div class="secondRowFirstColumn" data-expected-height="110" data-expected-width="30"></div>
> </div>
> 
> <div class="grid" id="grid4" data-expected-width="100" data-expected-height="200">
>-    <div id="a" data-expected-height="30" data-expected-width="40"></div>
>-    <div id="b" data-expected-height="30" data-expected-width="60"></div>
>+    <div class="firstRowFirstColumn" data-expected-height="30" data-expected-width="40"></div>
>+    <div class="secondRowFirstColumn" data-expected-height="30" data-expected-width="60"></div>
> </div>
> 
> <div class="grid" id="grid5" data-expected-width="100" data-expected-height="200">
>-    <div id="a" data-expected-height="30" data-expected-width="90"></div>
>-    <div id="b" data-expected-height="30" data-expected-width="10"></div>
>+    <div class="firstRowFirstColumn" data-expected-height="30" data-expected-width="90"></div>
>+    <div class="secondRowFirstColumn" data-expected-height="30" data-expected-width="10"></div>
> </div>
> 
> <div class="grid" id="grid6" data-expected-width="100" data-expected-height="200">
>-    <div id="a" data-expected-height="90" data-expected-width="30"></div>
>-    <div id="b" data-expected-height="110" data-expected-width="30"></div>
>+    <div class="firstRowFirstColumn" data-expected-height="90" data-expected-width="30"></div>
>+    <div class="secondRowFirstColumn" data-expected-height="110" data-expected-width="30"></div>
> </div>
> 
> </body>
>diff --git a/LayoutTests/fast/css-grid-layout/minmax-fixed-logical-width-only.html b/LayoutTests/fast/css-grid-layout/minmax-fixed-logical-width-only.html
>index 94ab9a12d5bac3c6274c8f1a2fcad01aa9971cd4..3841080607fcfc15894311536b312cdea5f348bd 100644
>--- a/LayoutTests/fast/css-grid-layout/minmax-fixed-logical-width-only.html
>+++ b/LayoutTests/fast/css-grid-layout/minmax-fixed-logical-width-only.html
>@@ -4,10 +4,9 @@
> if (window.testRunner)
>     testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
> </script>
>+<link href="resources/grid.css" rel="stylesheet">
> <style>
> .grid {
>-    display: -webkit-grid;
>-    background-color: grey;
>     width: 100px;
>     height: 200px;
> }
>@@ -49,22 +48,15 @@ if (window.testRunner)
>     -webkit-writing-mode: horizontal-bt;
> }
> 
>-#a {
>-    background-color: blue;
>-    -webkit-grid-column: 1;
>-    -webkit-grid-row: 1;
>+.firstRowFirstColumn {
>     width: 100%;
>     height: 100%;
> }
> 
>-#b {
>-    background-color: green;
>-    -webkit-grid-column: 2;
>-    -webkit-grid-row: 1;
>+.firstRowSecondColumn {
>     width: 100%;
>     height: 100%;
> }
>-
> </style>
> <script src="../../resources/check-layout.js"></script>
> <body onload="checkLayout('.grid')">
>@@ -73,33 +65,33 @@ if (window.testRunner)
> <p>Checks that a grid element with fixed minmax properly compute the logical width in several writing-mode.</p>
> 
> <div class="grid" id="grid1" data-expected-width="100" data-expected-height="200">
>-    <div id="a" data-expected-height="30" data-expected-width="40"></div>
>-    <div id="b" data-expected-height="30" data-expected-width="60"></div>
>+    <div class="firstRowFirstColumn" data-expected-height="30" data-expected-width="40"></div>
>+    <div class="firstRowSecondColumn" data-expected-height="30" data-expected-width="60"></div>
> </div>
> 
> <div class="grid" id="grid2" data-expected-width="100" data-expected-height="200">
>-    <div id="a" data-expected-height="30" data-expected-width="60"></div>
>-    <div id="b" data-expected-height="30" data-expected-width="40"></div>
>+    <div class="firstRowFirstColumn" data-expected-height="30" data-expected-width="60"></div>
>+    <div class="firstRowSecondColumn" data-expected-height="30" data-expected-width="40"></div>
> </div>
> 
> <div class="grid" id="grid3" data-expected-width="100" data-expected-height="200">
>-    <div id="a" data-expected-height="30" data-expected-width="50"></div>
>-    <div id="b" data-expected-height="30" data-expected-width="50"></div>
>+    <div class="firstRowFirstColumn" data-expected-height="30" data-expected-width="50"></div>
>+    <div class="firstRowSecondColumn" data-expected-height="30" data-expected-width="50"></div>
> </div>
> 
> <div class="grid" id="grid4" data-expected-width="100" data-expected-height="200">
>-    <div id="a" data-expected-height="40" data-expected-width="30"></div>
>-    <div id="b" data-expected-height="160" data-expected-width="30"></div>
>+    <div class="firstRowFirstColumn" data-expected-height="40" data-expected-width="30"></div>
>+    <div class="firstRowSecondColumn" data-expected-height="160" data-expected-width="30"></div>
> </div>
> 
> <div class="grid" id="grid5" data-expected-width="100" data-expected-height="200">
>-    <div id="a" data-expected-height="100" data-expected-width="30"></div>
>-    <div id="b" data-expected-height="100" data-expected-width="30"></div>
>+    <div class="firstRowFirstColumn" data-expected-height="100" data-expected-width="30"></div>
>+    <div class="firstRowSecondColumn" data-expected-height="100" data-expected-width="30"></div>
> </div>
> 
> <div class="grid" id="grid6" data-expected-width="100" data-expected-height="200">
>-    <div id="a" data-expected-height="30" data-expected-width="40"></div>
>-    <div id="b" data-expected-height="30" data-expected-width="60"></div>
>+    <div class="firstRowFirstColumn" data-expected-height="30" data-expected-width="40"></div>
>+    <div class="firstRowSecondColumn" data-expected-height="30" data-expected-width="60"></div>
> </div>
> 
> </body>
>diff --git a/LayoutTests/fast/css-grid-layout/minmax-min-content-column-resolution-columns.html b/LayoutTests/fast/css-grid-layout/minmax-min-content-column-resolution-columns.html
>index feeab07407ed7be32af47a7772ef57225bca27d8..d5f47c6f5083ed926312f48dd07a3a538b8dcc62 100644
>--- a/LayoutTests/fast/css-grid-layout/minmax-min-content-column-resolution-columns.html
>+++ b/LayoutTests/fast/css-grid-layout/minmax-min-content-column-resolution-columns.html
>@@ -4,17 +4,14 @@
> if (window.testRunner)
>     testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
> </script>
>+<link href="resources/grid.css" rel="stylesheet">
> <style>
> .gridMinMinContent {
>-    display: -webkit-grid;
>-    background-color: grey;
>     -webkit-grid-columns: minmax(-webkit-min-content, 40px);
>     -webkit-grid-rows: 50px;
> }
> 
> .gridMaxMinContent {
>-    display: -webkit-grid;
>-    background-color: grey;
>     -webkit-grid-columns: minmax(30px, -webkit-min-content);
>     -webkit-grid-rows: 20px;
> }
>@@ -25,10 +22,7 @@ if (window.testRunner)
>     height: 10px;
> }
> 
>-#a {
>-    background-color: blue;
>-    -webkit-grid-column: 1;
>-    -webkit-grid-row: 1;
>+.firstRowFirstColumn {
>     font: 10px/1 Ahem;
>     /* Make us fit our grid area. */
>     width: 100%;
>@@ -41,68 +35,68 @@ if (window.testRunner)
> <p>Test that resolving minmax function with min-content on grid items works properly.</p>
> 
> <div class="constrainedContainer">
>-    <div class="gridMinMinContent">
>-        <div id="a" data-expected-width="30" data-expected-height="50">XXX XXX XXX</div>
>+    <div class="grid gridMinMinContent">
>+        <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="50">XXX XXX XXX</div>
>     </div>
> </div>
> 
> <div class="constrainedContainer">
>-    <div class="gridMinMinContent">
>+    <div class="grid gridMinMinContent">
>         
>-        <div id="a" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX XXXXX</div>
>+        <div class="firstRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX XXXXX</div>
>     </div>
> </div>
> 
> <div class="constrainedContainer">
>-    <div class="gridMinMinContent">
>-        <div id="a" data-expected-width="20" data-expected-height="50">XX XX XX XX XX XX</div>
>+    <div class="grid gridMinMinContent">
>+        <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="50">XX XX XX XX XX XX</div>
>     </div>
> </div>
> 
> 
> <div style="width: 40px; height: 10px">
>-    <div class="gridMinMinContent">
>-        <div id="a" data-expected-width="40" data-expected-height="50">XX XX XX XX XX XX</div>
>+    <div class="grid gridMinMinContent">
>+        <div class="firstRowFirstColumn" data-expected-width="40" data-expected-height="50">XX XX XX XX XX XX</div>
>     </div>
> </div>
> 
> <div style="width: 100px; height: 10px;">
>-    <div class="gridMinMinContent">
>+    <div class="grid gridMinMinContent">
>         
>-        <div id="a" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX XXXXX</div>
>+        <div class="firstRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX XXXXX</div>
>     </div>
> </div>
> 
> <div class="constrainedContainer">
>-    <div class="gridMaxMinContent">
>-        <div id="a" data-expected-width="30" data-expected-height="20">XXX XXX XXX</div>
>+    <div class="grid gridMaxMinContent">
>+        <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="20">XXX XXX XXX</div>
>     </div>
> </div>
> 
> <div class="constrainedContainer">
>-    <div class="gridMaxMinContent">
>-        <div id="a" data-expected-width="30" data-expected-height="20">XXXXX XXXXX XXXXX XXXXX</div>
>+    <div class="grid gridMaxMinContent">
>+        <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="20">XXXXX XXXXX XXXXX XXXXX</div>
>     </div>
> </div>
> 
> <div class="constrainedContainer">
>-    <div class="gridMaxMinContent">
>-        <div id="a" data-expected-width="30" data-expected-height="20">XX XX XX XX XX XX</div>
>+    <div class="grid gridMaxMinContent">
>+        <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="20">XX XX XX XX XX XX</div>
>     </div>
> </div>
> 
> 
> 
> <div style="width: 100px; height: 20px">
>-    <div class="gridMaxMinContent">
>-        <div id="a" data-expected-width="50" data-expected-height="20">XXXXX XXXXX XXXXX XXXXX</div>
>+    <div class="grid gridMaxMinContent">
>+        <div class="firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXXX XXXXX XXXXX</div>
>     </div>
> </div>
> 
> <div style="width: 100px; height: 20px">
>-    <div class="gridMaxMinContent">
>+    <div class="grid gridMaxMinContent">
>         
>-        <div id="a" data-expected-width="30" data-expected-height="20">XX XX XX XX XX XX</div>
>+        <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="20">XX XX XX XX XX XX</div>
>     </div>
> </div>
> 
>diff --git a/LayoutTests/fast/css-grid-layout/minmax-min-content-column-resolution-rows.html b/LayoutTests/fast/css-grid-layout/minmax-min-content-column-resolution-rows.html
>index 35b7d1a0b2edb7e35ffc685585c8675808db1efe..ce88ceb99397fa30ace4dec179560f857a496529 100644
>--- a/LayoutTests/fast/css-grid-layout/minmax-min-content-column-resolution-rows.html
>+++ b/LayoutTests/fast/css-grid-layout/minmax-min-content-column-resolution-rows.html
>@@ -4,17 +4,14 @@
> if (window.testRunner)
>     testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
> </script>
>+<link href="resources/grid.css" rel="stylesheet">
> <style>
> .gridMinMinContent {
>-    display: -webkit-grid;
>-    background-color: grey;
>     -webkit-grid-columns: 30px;
>     -webkit-grid-rows: minmax(-webkit-min-content, 40px);
> }
> 
> .gridMaxMinContent {
>-    display: -webkit-grid;
>-    background-color: grey;
>     -webkit-grid-columns: 30px;
>     -webkit-grid-rows: minmax(30px, -webkit-min-content);
> }
>@@ -25,10 +22,7 @@ if (window.testRunner)
>     height: 10px;
> }
> 
>-#a {
>-    background-color: blue;
>-    -webkit-grid-column: 1;
>-    -webkit-grid-row: 1;
>+.firstRowFirstColumn {
>     font: 10px/1 Ahem;
>     /* Make us fit our grid area. */
>     width: 100%;
>@@ -41,61 +35,61 @@ if (window.testRunner)
> <p>Test that resolving minmax function with min-content on grid items works properly.</p>
> 
> <div class="constrainedContainer">
>-    <div class="gridMinMinContent">
>-        <div id="a" data-expected-width="30" data-expected-height="20">XXX XXX</div>
>+    <div class="grid gridMinMinContent">
>+        <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="20">XXX XXX</div>
>     </div>
> </div>
> 
> <div class="constrainedContainer">
>-    <div class="gridMinMinContent">
>-        <div id="a" data-expected-width="30" data-expected-height="40">XXX XXX XXX XXX</div>
>+    <div class="grid gridMinMinContent">
>+        <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="40">XXX XXX XXX XXX</div>
>     </div>
> </div>
> 
> <div class="constrainedContainer">
>-    <div class="gridMinMinContent">
>-        <div id="a" data-expected-width="30" data-expected-height="60">XX XX XX XX XX XX</div>
>+    <div class="grid gridMinMinContent">
>+        <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="60">XX XX XX XX XX XX</div>
>     </div>
> </div>
> 
> 
> <div style="width: 30px; height: 100px">
>-    <div class="gridMinMinContent">
>-        <div id="a" data-expected-width="30" data-expected-height="40">XXX XXX</div>
>+    <div class="grid gridMinMinContent">
>+        <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="40">XXX XXX</div>
>     </div>
> </div>
> 
> <div style="width: 30px; height: 100px">
>-    <div class="gridMinMinContent">
>-        <div id="a" data-expected-width="30" data-expected-height="60">XX XX XX XX XX XX</div>
>+    <div class="grid gridMinMinContent">
>+        <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="60">XX XX XX XX XX XX</div>
>     </div>
> </div>
> 
> <div class="constrainedContainer">
>-    <div class="gridMaxMinContent">
>+    <div class="grid gridMaxMinContent">
>         
>-        <div id="a" data-expected-width="30" data-expected-height="30">XXX XXX</div>
>+        <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="30">XXX XXX</div>
>     </div>
> </div>
> 
> <div class="constrainedContainer">
>-    <div class="gridMaxMinContent">
>-        <div id="a" data-expected-width="30" data-expected-height="30">XXX XXX XXX</div>
>+    <div class="grid gridMaxMinContent">
>+        <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="30">XXX XXX XXX</div>
>     </div>
> </div>
> 
> 
> 
> <div style="width: 30px; height: 100px">
>-    <div class="gridMaxMinContent">
>-        <div id="a" data-expected-width="30" data-expected-height="60">XX XX XX XX XX XX</div>
>+    <div class="grid gridMaxMinContent">
>+        <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="60">XX XX XX XX XX XX</div>
>     </div>
> </div>
> 
> <div style="width: 30px; height: 100px">
>-    <div class="gridMaxMinContent">
>+    <div class="grid gridMaxMinContent">
>         
>-        <div id="a" data-expected-width="30" data-expected-height="30">XXX XXX</div>
>+        <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="30">XXX XXX</div>
>     </div>
> </div>
> 
>diff --git a/LayoutTests/fast/css-grid-layout/percent-grid-item-in-percent-grid-track-in-percent-grid.html b/LayoutTests/fast/css-grid-layout/percent-grid-item-in-percent-grid-track-in-percent-grid.html
>index 8df42cf8e85fe79d543a75e1f6e162137c3f8699..1a2e5b60f4b3dc619f7ed8a5e65dac80b4bddfca 100644
>--- a/LayoutTests/fast/css-grid-layout/percent-grid-item-in-percent-grid-track-in-percent-grid.html
>+++ b/LayoutTests/fast/css-grid-layout/percent-grid-item-in-percent-grid-track-in-percent-grid.html
>@@ -4,6 +4,7 @@
> if (window.testRunner)
>     testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
> </script>
>+<link href="resources/grid.css" rel="stylesheet">
> <style>
> .container {
>     position: relative;
>@@ -12,39 +13,28 @@ if (window.testRunner)
> }
> 
> .grid {
>-    display: -webkit-grid;
>     -webkit-grid-columns: 40% 60%;
>     -webkit-grid-rows: 30% 70%;
>-    background-color: grey;
>     width: 80%;
>     height: 50%;
> }
> 
>-#a {
>-    background-color: blue;
>-    -webkit-grid-column: 1;
>-    -webkit-grid-row: 1;
>+.firstRowFirstColumn {
>     width: 100%;
>     height: 15px;
> }
>-#b {
>-    background-color: green;
>-    -webkit-grid-column: 2;
>-    -webkit-grid-row: 1;
>+
>+.firstRowSecondColumn {
>     width: 15px;
>     height: 100%;
> }
>-#c {
>-    background-color: red;
>-    -webkit-grid-column: 1;
>-    -webkit-grid-row: 2;
>+
>+.secondRowFirstColumn {
>     width: 50%;
>     height: 50%;
> }
>-#d {
>-    background-color: orange;
>-    -webkit-grid-column: 2;
>-    -webkit-grid-row: 2;
>+
>+.secondRowSecondColumn {
>     width: -webkit-calc(100%);
>     height: -webkit-calc(100%);
> }
>@@ -56,37 +46,37 @@ if (window.testRunner)
> 
> <div class="container">
> <div class="grid" data-expected-width="400" data-expected-height="300">
>-    <div id="a" data-expected-width="160" data-expected-height="15"></div>
>-    <div id="b" data-expected-width="15" data-expected-height="90"></div>
>-    <div id="c" data-expected-width="80" data-expected-height="105"></div>
>-    <div id="d" data-expected-width="240" data-expected-height="210"></div>
>+    <div class="firstRowFirstColumn" data-expected-width="160" data-expected-height="15"></div>
>+    <div class="firstRowSecondColumn" data-expected-width="15" data-expected-height="90"></div>
>+    <div class="secondRowFirstColumn" data-expected-width="80" data-expected-height="105"></div>
>+    <div class="secondRowSecondColumn" data-expected-width="240" data-expected-height="210"></div>
> </div>
> </div>
> 
> <div class="container">
> <div class="grid" style="-webkit-writing-mode: horizontal-bt" data-expected-width="400" data-expected-height="300">
>-    <div id="a" data-expected-width="160" data-expected-height="15"></div>
>-    <div id="b" data-expected-width="15" data-expected-height="90"></div>
>-    <div id="c" data-expected-width="80" data-expected-height="105"></div>
>-    <div id="d" data-expected-width="240" data-expected-height="210"></div>
>+    <div class="firstRowFirstColumn" data-expected-width="160" data-expected-height="15"></div>
>+    <div class="firstRowSecondColumn" data-expected-width="15" data-expected-height="90"></div>
>+    <div class="secondRowFirstColumn" data-expected-width="80" data-expected-height="105"></div>
>+    <div class="secondRowSecondColumn" data-expected-width="240" data-expected-height="210"></div>
> </div>
> </div>
> 
> <div class="container">
> <div class="grid" style="-webkit-writing-mode: vertical-rl;" data-expected-width="400" data-expected-height="300">
>-    <div id="a" data-expected-width="120" data-expected-height="15"></div>
>-    <div id="b" data-expected-width="15" data-expected-height="180"></div>
>-    <div id="c" data-expected-width="140" data-expected-height="60"></div>
>-    <div id="d" data-expected-width="280" data-expected-height="180"></div>
>+    <div class="firstRowFirstColumn" data-expected-width="120" data-expected-height="15"></div>
>+    <div class="firstRowSecondColumn" data-expected-width="15" data-expected-height="180"></div>
>+    <div class="secondRowFirstColumn" data-expected-width="140" data-expected-height="60"></div>
>+    <div class="secondRowSecondColumn" data-expected-width="280" data-expected-height="180"></div>
> </div>
> </div>
> 
> <div class="container">
> <div class="grid" style="-webkit-writing-mode: vertical-lr;" data-expected-width="400" data-expected-height="300">
>-    <div id="a" data-expected-width="120" data-expected-height="15"></div>
>-    <div id="b" data-expected-width="15" data-expected-height="180"></div>
>-    <div id="c" data-expected-width="140" data-expected-height="60"></div>
>-    <div id="d" data-expected-width="280" data-expected-height="180"></div>
>+    <div class="firstRowFirstColumn" data-expected-width="120" data-expected-height="15"></div>
>+    <div class="firstRowSecondColumn" data-expected-width="15" data-expected-height="180"></div>
>+    <div class="secondRowFirstColumn" data-expected-width="140" data-expected-height="60"></div>
>+    <div class="secondRowSecondColumn" data-expected-width="280" data-expected-height="180"></div>
> </div>
> </div>
> 
>diff --git a/LayoutTests/fast/css-grid-layout/percent-grid-item-in-percent-grid-track-update.html b/LayoutTests/fast/css-grid-layout/percent-grid-item-in-percent-grid-track-update.html
>index 034b5fda31b6bdb196b5a6b5f21aa0d6cd3272a6..0f8138f2c1254a0c6b9662fcdb9c6bd9c197eb57 100644
>--- a/LayoutTests/fast/css-grid-layout/percent-grid-item-in-percent-grid-track-update.html
>+++ b/LayoutTests/fast/css-grid-layout/percent-grid-item-in-percent-grid-track-update.html
>@@ -4,41 +4,31 @@
> if (window.testRunner)
>     testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
> </script>
>+<link href="resources/grid.css" rel="stylesheet">
> <style>
> .grid {
>-    display: -webkit-grid;
>     -webkit-grid-columns: 70% 30%;
>     -webkit-grid-rows: 40% 60%;
>-    background-color: grey;
>     width: 400px;
>     height: 300px;
> }
> 
>-#a {
>-    background-color: blue;
>-    -webkit-grid-column: 1;
>-    -webkit-grid-row: 1;
>+.firstRowFirstColumn {
>     width: 100%;
>     height: 15px;
> }
>-#b {
>-    background-color: green;
>-    -webkit-grid-column: 2;
>-    -webkit-grid-row: 1;
>+
>+.firstRowSecondColumn {
>     width: 15px;
>     height: 100%;
> }
>-#c {
>-    background-color: purple;
>-    -webkit-grid-column: 1;
>-    -webkit-grid-row: 2;
>+
>+.secondRowFirstColumn {
>     width: 50%;
>     height: 50%;
> }
>-#d {
>-    background-color: orange;
>-    -webkit-grid-column: 2;
>-    -webkit-grid-row: 2;
>+
>+.secondRowSecondColumn {
>     width: -webkit-calc(100%);
>     height: -webkit-calc(100%);
> }
>@@ -68,28 +58,28 @@ window.addEventListener("load", changeGridDefinitionsAndCheckValues, false);
> 
> <div style="position: relative">
> <div class="grid" data-expected-width="400" data-expected-height="300">
>-    <div id="a" data-expected-width="160" data-expected-height="15"></div>
>-    <div id="b" data-expected-width="15" data-expected-height="120"></div>
>-    <div id="c" data-expected-width="80" data-expected-height="90"></div>
>-    <div id="d" data-expected-width="240" data-expected-height="180"></div>
>+    <div class="firstRowFirstColumn" data-expected-width="160" data-expected-height="15"></div>
>+    <div class="firstRowSecondColumn" data-expected-width="15" data-expected-height="120"></div>
>+    <div class="secondRowFirstColumn" data-expected-width="80" data-expected-height="90"></div>
>+    <div class="secondRowSecondColumn" data-expected-width="240" data-expected-height="180"></div>
> </div>
> </div>
> 
> <div style="position: relative">
> <div class="grid" data-expected-width="400" data-expected-height="300">
>-    <div id="a" data-expected-width="280" data-expected-height="15"></div>
>-    <div id="b" data-expected-width="15" data-expected-height="90"></div>
>-    <div id="c" data-expected-width="140" data-expected-height="105"></div>
>-    <div id="d" data-expected-width="120" data-expected-height="210"></div>
>+    <div class="firstRowFirstColumn" data-expected-width="280" data-expected-height="15"></div>
>+    <div class="firstRowSecondColumn" data-expected-width="15" data-expected-height="90"></div>
>+    <div class="secondRowFirstColumn" data-expected-width="140" data-expected-height="105"></div>
>+    <div class="secondRowSecondColumn" data-expected-width="120" data-expected-height="210"></div>
> </div>
> </div>
> 
> <div style="position: relative">
> <div class="grid" data-expected-width="400" data-expected-height="300">
>-    <div id="a" data-expected-width="160" data-expected-height="15"></div>
>-    <div id="b" data-expected-width="15" data-expected-height="90"></div>
>-    <div id="c" data-expected-width="80" data-expected-height="105"></div>
>-    <div id="d" data-expected-width="240" data-expected-height="210"></div>
>+    <div class="firstRowFirstColumn" data-expected-width="160" data-expected-height="15"></div>
>+    <div class="firstRowSecondColumn" data-expected-width="15" data-expected-height="90"></div>
>+    <div class="secondRowFirstColumn" data-expected-width="80" data-expected-height="105"></div>
>+    <div class="secondRowSecondColumn" data-expected-width="240" data-expected-height="210"></div>
> </div>
> </div>
> 
>diff --git a/LayoutTests/fast/css-grid-layout/percent-grid-item-in-percent-grid-track.html b/LayoutTests/fast/css-grid-layout/percent-grid-item-in-percent-grid-track.html
>index 77dff2f1b90afb33d52bf99abea38735bdc40293..1568422b2719bfbca00085c4c6c04b0072430175 100644
>--- a/LayoutTests/fast/css-grid-layout/percent-grid-item-in-percent-grid-track.html
>+++ b/LayoutTests/fast/css-grid-layout/percent-grid-item-in-percent-grid-track.html
>@@ -4,41 +4,31 @@
> if (window.testRunner)
>     testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
> </script>
>+<link href="resources/grid.css" rel="stylesheet">
> <style>
> .grid {
>-    display: -webkit-grid;
>     -webkit-grid-columns: 40% 60%;
>     -webkit-grid-rows: 30% 70%;
>-    background-color: grey;
>     width: 400px;
>     height: 300px;
> }
> 
>-#a {
>-    background-color: blue;
>-    -webkit-grid-column: 1;
>-    -webkit-grid-row: 1;
>+.firstRowFirstColumn {
>     width: 100%;
>     height: 15px;
> }
>-#b {
>-    background-color: green;
>-    -webkit-grid-column: 2;
>-    -webkit-grid-row: 1;
>+
>+.firstRowSecondColumn {
>     width: 15px;
>     height: 100%;
> }
>-#c {
>-    background-color: red;
>-    -webkit-grid-column: 1;
>-    -webkit-grid-row: 2;
>+
>+.secondRowFirstColumn {
>     width: 50%;
>     height: 50%;
> }
>-#d {
>-    background-color: orange;
>-    -webkit-grid-column: 2;
>-    -webkit-grid-row: 2;
>+
>+.secondRowSecondColumn {
>     width: -webkit-calc(100%);
>     height: -webkit-calc(100%);
> }
>@@ -50,37 +40,37 @@ if (window.testRunner)
> 
> <div style="position: relative">
> <div class="grid" data-expected-width="400" data-expected-height="300">
>-    <div id="a" data-expected-width="160" data-expected-height="15"></div>
>-    <div id="b" data-expected-width="15" data-expected-height="90"></div>
>-    <div id="c" data-expected-width="80" data-expected-height="105"></div>
>-    <div id="d" data-expected-width="240" data-expected-height="210"></div>
>+    <div class="firstRowFirstColumn" data-expected-width="160" data-expected-height="15"></div>
>+    <div class="firstRowSecondColumn" data-expected-width="15" data-expected-height="90"></div>
>+    <div class="secondRowFirstColumn" data-expected-width="80" data-expected-height="105"></div>
>+    <div class="secondRowSecondColumn" data-expected-width="240" data-expected-height="210"></div>
> </div>
> </div>
> 
> <div style="position: relative">
> <div class="grid" style="-webkit-writing-mode: horizontal-bt" data-expected-width="400" data-expected-height="300">
>-    <div id="a" data-expected-width="160" data-expected-height="15"></div>
>-    <div id="b" data-expected-width="15" data-expected-height="90"></div>
>-    <div id="c" data-expected-width="80" data-expected-height="105"></div>
>-    <div id="d" data-expected-width="240" data-expected-height="210"></div>
>+    <div class="firstRowFirstColumn" data-expected-width="160" data-expected-height="15"></div>
>+    <div class="firstRowSecondColumn" data-expected-width="15" data-expected-height="90"></div>
>+    <div class="secondRowFirstColumn" data-expected-width="80" data-expected-height="105"></div>
>+    <div class="secondRowSecondColumn" data-expected-width="240" data-expected-height="210"></div>
> </div>
> </div>
> 
> <div style="position: relative">
> <div class="grid" style="-webkit-writing-mode: vertical-rl;" data-expected-width="400" data-expected-height="300">
>-    <div id="a" data-expected-width="120" data-expected-height="15"></div>
>-    <div id="b" data-expected-width="15" data-expected-height="180"></div>
>-    <div id="c" data-expected-width="140" data-expected-height="60"></div>
>-    <div id="d" data-expected-width="280" data-expected-height="180"></div>
>+    <div class="firstRowFirstColumn" data-expected-width="120" data-expected-height="15"></div>
>+    <div class="firstRowSecondColumn" data-expected-width="15" data-expected-height="180"></div>
>+    <div class="secondRowFirstColumn" data-expected-width="140" data-expected-height="60"></div>
>+    <div class="secondRowSecondColumn" data-expected-width="280" data-expected-height="180"></div>
> </div>
> </div>
> 
> <div style="position: relative">
> <div class="grid" style="-webkit-writing-mode: vertical-lr;" data-expected-width="400" data-expected-height="300">
>-    <div id="a" data-expected-width="120" data-expected-height="15"></div>
>-    <div id="b" data-expected-width="15" data-expected-height="180"></div>
>-    <div id="c" data-expected-width="140" data-expected-height="60"></div>
>-    <div id="d" data-expected-width="280" data-expected-height="180"></div>
>+    <div class="firstRowFirstColumn" data-expected-width="120" data-expected-height="15"></div>
>+    <div class="firstRowSecondColumn" data-expected-width="15" data-expected-height="180"></div>
>+    <div class="secondRowFirstColumn" data-expected-width="140" data-expected-height="60"></div>
>+    <div class="secondRowSecondColumn" data-expected-width="280" data-expected-height="180"></div>
> </div>
> </div>
> 
>diff --git a/LayoutTests/fast/css-grid-layout/percent-padding-margin-resolution-grid-item-update.html b/LayoutTests/fast/css-grid-layout/percent-padding-margin-resolution-grid-item-update.html
>index f32879a472c3bb38b825f24a22cfc387de546dc8..8f6b86707da2ce49eb969b327e1c1234f5a82966 100644
>--- a/LayoutTests/fast/css-grid-layout/percent-padding-margin-resolution-grid-item-update.html
>+++ b/LayoutTests/fast/css-grid-layout/percent-padding-margin-resolution-grid-item-update.html
>@@ -4,40 +4,15 @@
> if (window.testRunner)
>     testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
> </script>
>+<link href="resources/grid.css" rel="stylesheet">
> <style>
> .grid {
>-    display: -webkit-grid;
>-    background-color: grey;
>     -webkit-grid-columns: 200px 200px;
>     -webkit-grid-rows: 100px 100px;
>     height: 200px;
>     width: 400px;
> }
> 
>-#a {
>-    background-color: blue;
>-    -webkit-grid-column: 1;
>-    -webkit-grid-row: 1;
>-}
>-
>-#b {
>-    background-color: lime;
>-    -webkit-grid-column: 2;
>-    -webkit-grid-row: 1;
>-}
>-
>-#c {
>-    background-color: purple;
>-    -webkit-grid-column: 1;
>-    -webkit-grid-row: 2;
>-}
>-
>-#d {
>-    background-color: orange;
>-    -webkit-grid-column: 2;
>-    -webkit-grid-row: 2;
>-}
>-
> .percentPadding {
>     width: 0px;
>     height: 0px;
>@@ -56,10 +31,6 @@ if (window.testRunner)
>     padding: 10%;
>     margin: 20%;
> }
>-
>-.verticalRL {
>-    -webkit-writing-mode: vertical-rl;
>-}
> </style>
> <script src="../../resources/check-layout.js"></script>
> <script>
>@@ -78,10 +49,10 @@ window.addEventListener("load", changeGridTrackSizesAndCheckLayout, false);
> <p>Test that changing grid tracks size forces the grid items' to resolve percentage padding and margin</p>
> 
> <div class="grid">
>-    <div id="a" class="percentPadding" data-expected-padding-top="50" data-expected-padding-right="50" data-expected-padding-bottom="50" data-expected-padding-left="50"></div>
>-    <div id="b" class="percentMargin" data-expected-margin-top="150" data-expected-margin-right="150" data-expected-margin-bottom="150" data-expected-margin-left="150"></div>
>-    <div id="c" class="percentPaddingAndMargin" data-expected-padding-top="10" data-expected-padding-right="10" data-expected-padding-bottom="10" data-expected-padding-left="10" data-expected-margin-top="20" data-expected-margin-right="20" data-expected-margin-bottom="20" data-expected-margin-left="20"></div>
>-    <div id="d" class="percentPaddingAndMargin" data-expected-padding-top="30" data-expected-padding-right="30" data-expected-padding-bottom="30" data-expected-padding-left="30" data-expected-margin-top="60" data-expected-margin-right="60" data-expected-margin-bottom="60" data-expected-margin-left="60"></div>
>+    <div class="firstRowFirstColumn percentPadding" data-expected-padding-top="50" data-expected-padding-right="50" data-expected-padding-bottom="50" data-expected-padding-left="50"></div>
>+    <div class="firstRowSecondColumn percentMargin" data-expected-margin-top="150" data-expected-margin-right="150" data-expected-margin-bottom="150" data-expected-margin-left="150"></div>
>+    <div class="secondRowFirstColumn percentPaddingAndMargin" data-expected-padding-top="10" data-expected-padding-right="10" data-expected-padding-bottom="10" data-expected-padding-left="10" data-expected-margin-top="20" data-expected-margin-right="20" data-expected-margin-bottom="20" data-expected-margin-left="20"></div>
>+    <div class="secondRowSecondColumn percentPaddingAndMargin" data-expected-padding-top="30" data-expected-padding-right="30" data-expected-padding-bottom="30" data-expected-padding-left="30" data-expected-margin-top="60" data-expected-margin-right="60" data-expected-margin-bottom="60" data-expected-margin-left="60"></div>
> </div>
> 
> </body>
>diff --git a/LayoutTests/fast/css-grid-layout/percent-padding-margin-resolution-grid-item.html b/LayoutTests/fast/css-grid-layout/percent-padding-margin-resolution-grid-item.html
>index eb57648fde96fcfc3a40b20e8f3ab06e15f46b2b..71addf4a947ef58c3e99d169ad6a4a36fb69da1d 100644
>--- a/LayoutTests/fast/css-grid-layout/percent-padding-margin-resolution-grid-item.html
>+++ b/LayoutTests/fast/css-grid-layout/percent-padding-margin-resolution-grid-item.html
>@@ -4,40 +4,15 @@
> if (window.testRunner)
>     testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
> </script>
>+<link href="resources/grid.css" rel="stylesheet">
> <style>
> .grid {
>-    display: -webkit-grid;
>-    background-color: grey;
>     -webkit-grid-columns: 100px 300px;
>     -webkit-grid-rows: 50px 150px;
>     height: 200px;
>     width: 400px;
> }
> 
>-#a {
>-    background-color: blue;
>-    -webkit-grid-column: 1;
>-    -webkit-grid-row: 1;
>-}
>-
>-#b {
>-    background-color: lime;
>-    -webkit-grid-column: 2;
>-    -webkit-grid-row: 1;
>-}
>-
>-#c {
>-    background-color: purple;
>-    -webkit-grid-column: 1;
>-    -webkit-grid-row: 2;
>-}
>-
>-#d {
>-    background-color: orange;
>-    -webkit-grid-column: 2;
>-    -webkit-grid-row: 2;
>-}
>-
> .percentPadding {
>     width: 0px;
>     height: 0px;
>@@ -56,10 +31,6 @@ if (window.testRunner)
>     padding: 10%;
>     margin: 20%;
> }
>-
>-.verticalRL {
>-    -webkit-writing-mode: vertical-rl;
>-}
> </style>
> <script src="../../resources/check-layout.js"></script>
> <body onload="checkLayout('.grid')">
>@@ -67,31 +38,31 @@ if (window.testRunner)
> <p>Test that resolving percentage padding and margin on grid items works properly on a fixed grid with different writing modes.</p>
> 
> <div class="grid">
>-    <div id="a" class="percentPadding" data-expected-padding-top="50" data-expected-padding-right="50" data-expected-padding-bottom="50" data-expected-padding-left="50"></div>
>-    <div id="b" class="percentMargin" data-expected-margin-top="150" data-expected-margin-right="150" data-expected-margin-bottom="150" data-expected-margin-left="150"></div>
>-    <div id="c" class="percentPaddingAndMargin" data-expected-padding-top="10" data-expected-padding-right="10" data-expected-padding-bottom="10" data-expected-padding-left="10" data-expected-margin-top="20" data-expected-margin-right="20" data-expected-margin-bottom="20" data-expected-margin-left="20"></div>
>-    <div id="d" class="percentPaddingAndMargin" data-expected-padding-top="30" data-expected-padding-right="30" data-expected-padding-bottom="30" data-expected-padding-left="30" data-expected-margin-top="60" data-expected-margin-right="60" data-expected-margin-bottom="60" data-expected-margin-left="60"></div>
>+    <div class="firstRowFirstColumn percentPadding" data-expected-padding-top="50" data-expected-padding-right="50" data-expected-padding-bottom="50" data-expected-padding-left="50"></div>
>+    <div class="firstRowSecondColumn percentMargin" data-expected-margin-top="150" data-expected-margin-right="150" data-expected-margin-bottom="150" data-expected-margin-left="150"></div>
>+    <div class="secondRowFirstColumn percentPaddingAndMargin" data-expected-padding-top="10" data-expected-padding-right="10" data-expected-padding-bottom="10" data-expected-padding-left="10" data-expected-margin-top="20" data-expected-margin-right="20" data-expected-margin-bottom="20" data-expected-margin-left="20"></div>
>+    <div class="secondRowSecondColumn percentPaddingAndMargin" data-expected-padding-top="30" data-expected-padding-right="30" data-expected-padding-bottom="30" data-expected-padding-left="30" data-expected-margin-top="60" data-expected-margin-right="60" data-expected-margin-bottom="60" data-expected-margin-left="60"></div>
> </div>
> 
> <div class="grid verticalRL">
>-    <div id="a" class="percentPadding" data-expected-padding-top="50" data-expected-padding-right="50" data-expected-padding-bottom="50" data-expected-padding-left="50"></div>
>-    <div id="b" class="percentMargin" data-expected-margin-top="150" data-expected-margin-right="150" data-expected-margin-bottom="150" data-expected-margin-left="150"></div>
>-    <div id="c" class="percentPaddingAndMargin" data-expected-padding-top="10" data-expected-padding-right="10" data-expected-padding-bottom="10" data-expected-padding-left="10" data-expected-margin-top="20" data-expected-margin-right="20" data-expected-margin-bottom="20" data-expected-margin-left="20"></div>
>-    <div id="d" class="percentPaddingAndMargin" data-expected-padding-top="30" data-expected-padding-right="30" data-expected-padding-bottom="30" data-expected-padding-left="30" data-expected-margin-top="60" data-expected-margin-right="60" data-expected-margin-bottom="60" data-expected-margin-left="60"></div>
>+    <div class="firstRowFirstColumn percentPadding" data-expected-padding-top="50" data-expected-padding-right="50" data-expected-padding-bottom="50" data-expected-padding-left="50"></div>
>+    <div class="firstRowSecondColumn percentMargin" data-expected-margin-top="150" data-expected-margin-right="150" data-expected-margin-bottom="150" data-expected-margin-left="150"></div>
>+    <div class="secondRowFirstColumn percentPaddingAndMargin" data-expected-padding-top="10" data-expected-padding-right="10" data-expected-padding-bottom="10" data-expected-padding-left="10" data-expected-margin-top="20" data-expected-margin-right="20" data-expected-margin-bottom="20" data-expected-margin-left="20"></div>
>+    <div class="secondRowSecondColumn percentPaddingAndMargin" data-expected-padding-top="30" data-expected-padding-right="30" data-expected-padding-bottom="30" data-expected-padding-left="30" data-expected-margin-top="60" data-expected-margin-right="60" data-expected-margin-bottom="60" data-expected-margin-left="60"></div>
> </div>
> 
> <div class="grid">
>-    <div id="a" class="percentPadding verticalRL" data-expected-padding-top="50" data-expected-padding-right="50" data-expected-padding-bottom="50" data-expected-padding-left="50"></div>
>-    <div id="b" class="percentMargin verticalRL" data-expected-margin-top="150" data-expected-margin-right="150" data-expected-margin-bottom="150" data-expected-margin-left="150"></div>
>-    <div id="c" class="percentPaddingAndMargin verticalRL" data-expected-padding-top="10" data-expected-padding-right="10" data-expected-padding-bottom="10" data-expected-padding-left="10" data-expected-margin-top="20" data-expected-margin-right="20" data-expected-margin-bottom="20" data-expected-margin-left="20"></div>
>-    <div id="d" class="percentPaddingAndMargin verticalRL" data-expected-padding-top="30" data-expected-padding-right="30" data-expected-padding-bottom="30" data-expected-padding-left="30" data-expected-margin-top="60" data-expected-margin-right="60" data-expected-margin-bottom="60" data-expected-margin-left="60"></div>
>+    <div class="firstRowFirstColumn percentPadding verticalRL" data-expected-padding-top="50" data-expected-padding-right="50" data-expected-padding-bottom="50" data-expected-padding-left="50"></div>
>+    <div class="firstRowSecondColumn percentMargin verticalRL" data-expected-margin-top="150" data-expected-margin-right="150" data-expected-margin-bottom="150" data-expected-margin-left="150"></div>
>+    <div class="secondRowFirstColumn percentPaddingAndMargin verticalRL" data-expected-padding-top="10" data-expected-padding-right="10" data-expected-padding-bottom="10" data-expected-padding-left="10" data-expected-margin-top="20" data-expected-margin-right="20" data-expected-margin-bottom="20" data-expected-margin-left="20"></div>
>+    <div class="secondRowSecondColumn percentPaddingAndMargin verticalRL" data-expected-padding-top="30" data-expected-padding-right="30" data-expected-padding-bottom="30" data-expected-padding-left="30" data-expected-margin-top="60" data-expected-margin-right="60" data-expected-margin-bottom="60" data-expected-margin-left="60"></div>
> </div>
> 
> <div class="grid">
>-    <div id="a" class="percentPadding verticalRL" data-expected-padding-top="50" data-expected-padding-right="50" data-expected-padding-bottom="50" data-expected-padding-left="50"></div>
>-    <div id="b" class="percentMargin" data-expected-margin-top="150" data-expected-margin-right="150" data-expected-margin-bottom="150" data-expected-margin-left="150"></div>
>-    <div id="c" class="percentPaddingAndMargin verticalRL" data-expected-padding-top="10" data-expected-padding-right="10" data-expected-padding-bottom="10" data-expected-padding-left="10" data-expected-margin-top="20" data-expected-margin-right="20" data-expected-margin-bottom="20" data-expected-margin-left="20"></div>
>-    <div id="d" class="percentPaddingAndMargin" data-expected-padding-top="30" data-expected-padding-right="30" data-expected-padding-bottom="30" data-expected-padding-left="30" data-expected-margin-top="60" data-expected-margin-right="60" data-expected-margin-bottom="60" data-expected-margin-left="60"></div>
>+    <div class="firstRowFirstColumn percentPadding verticalRL" data-expected-padding-top="50" data-expected-padding-right="50" data-expected-padding-bottom="50" data-expected-padding-left="50"></div>
>+    <div class="firstRowSecondColumn percentMargin" data-expected-margin-top="150" data-expected-margin-right="150" data-expected-margin-bottom="150" data-expected-margin-left="150"></div>
>+    <div class="secondRowFirstColumn percentPaddingAndMargin verticalRL" data-expected-padding-top="10" data-expected-padding-right="10" data-expected-padding-bottom="10" data-expected-padding-left="10" data-expected-margin-top="20" data-expected-margin-right="20" data-expected-margin-bottom="20" data-expected-margin-left="20"></div>
>+    <div class="secondRowSecondColumn percentPaddingAndMargin" data-expected-padding-top="30" data-expected-padding-right="30" data-expected-padding-bottom="30" data-expected-padding-left="30" data-expected-margin-top="60" data-expected-margin-right="60" data-expected-margin-bottom="60" data-expected-margin-left="60"></div>
> </div>
> 
> </body>
>diff --git a/LayoutTests/fast/css-grid-layout/percent-resolution-grid-item.html b/LayoutTests/fast/css-grid-layout/percent-resolution-grid-item.html
>index 97e1e59f0d77f779a2cd59ed94846812fd58a837..de151671bd9242cf1c728a0a729eaaf214269a38 100644
>--- a/LayoutTests/fast/css-grid-layout/percent-resolution-grid-item.html
>+++ b/LayoutTests/fast/css-grid-layout/percent-resolution-grid-item.html
>@@ -4,40 +4,15 @@
> if (window.testRunner)
>     testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
> </script>
>+<link href="resources/grid.css" rel="stylesheet">
> <style>
> .grid {
>-    display: -webkit-grid;
>-    background-color: grey;
>     -webkit-grid-columns: 100px 300px;
>     -webkit-grid-rows: 50px 150px;
>     height: 200px;
>     width: 400px;
> }
> 
>-#a {
>-    background-color: blue;
>-    -webkit-grid-column: 1;
>-    -webkit-grid-row: 1;
>-}
>-
>-#b {
>-    background-color: lime;
>-    -webkit-grid-column: 2;
>-    -webkit-grid-row: 1;
>-}
>-
>-#c {
>-    background-color: purple;
>-    -webkit-grid-column: 1;
>-    -webkit-grid-row: 2;
>-}
>-
>-#d {
>-    background-color: orange;
>-    -webkit-grid-column: 2;
>-    -webkit-grid-row: 2;
>-}
>-
> .percentWidth {
>     width: 100%;
>     height: 15px;
>@@ -52,10 +27,6 @@ if (window.testRunner)
>     width: 100%;
>     height: 100%;
> }
>-
>-.verticalRL {
>-    -webkit-writing-mode: vertical-rl;
>-}
> </style>
> <script src="../../resources/check-layout.js"></script>
> <body onload="checkLayout('.grid')">
>@@ -63,31 +34,31 @@ if (window.testRunner)
> <p>Test that resolving percent lengths on grid items works properly on a fixed grid with different writing modes.</p>
> 
> <div class="grid">
>-    <div id="a" class="percentWidth" data-expected-width="100" data-expected-height="15"></div>
>-    <div id="b" class="percentHeight" data-expected-width="15" data-expected-height="50"></div>
>-    <div id="c" class="percentHeightAndWidth" data-expected-width="100" data-expected-height="150"></div>
>-    <div id="d" class="percentHeightAndWidth" data-expected-width="300" data-expected-height="150"></div>
>+    <div class="firstRowFirstColumn percentWidth" data-expected-width="100" data-expected-height="15"></div>
>+    <div class="firstRowSecondColumn percentHeight" data-expected-width="15" data-expected-height="50"></div>
>+    <div class="secondRowFirstColumn percentHeightAndWidth" data-expected-width="100" data-expected-height="150"></div>
>+    <div class="secondRowSecondColumn percentHeightAndWidth" data-expected-width="300" data-expected-height="150"></div>
> </div>
> 
> <div class="grid verticalRL">
>-    <div id="a" class="percentWidth" data-expected-width="50" data-expected-height="15"></div>
>-    <div id="b" class="percentHeight" data-expected-width="15" data-expected-height="300"></div>
>-    <div id="c" class="percentHeightAndWidth" data-expected-width="150" data-expected-height="100"></div>
>-    <div id="d" class="percentHeightAndWidth" data-expected-width="150" data-expected-height="300"></div>
>+    <div class="firstRowFirstColumn percentWidth" data-expected-width="50" data-expected-height="15"></div>
>+    <div class="firstRowSecondColumn percentHeight" data-expected-width="15" data-expected-height="300"></div>
>+    <div class="secondRowFirstColumn percentHeightAndWidth" data-expected-width="150" data-expected-height="100"></div>
>+    <div class="secondRowSecondColumn percentHeightAndWidth" data-expected-width="150" data-expected-height="300"></div>
> </div>
> 
> <div class="grid">
>-    <div id="a" class="percentWidth verticalRL" data-expected-width="100" data-expected-height="15"></div>
>-    <div id="b" class="percentHeight verticalRL" data-expected-width="15" data-expected-height="50"></div>
>-    <div id="c" class="percentHeightAndWidth verticalRL" data-expected-width="100" data-expected-height="150"></div>
>-    <div id="d" class="percentHeightAndWidth verticalRL" data-expected-width="300" data-expected-height="150"></div>
>+    <div class="firstRowFirstColumn percentWidth verticalRL" data-expected-width="100" data-expected-height="15"></div>
>+    <div class="firstRowSecondColumn percentHeight verticalRL" data-expected-width="15" data-expected-height="50"></div>
>+    <div class="secondRowFirstColumn percentHeightAndWidth verticalRL" data-expected-width="100" data-expected-height="150"></div>
>+    <div class="secondRowSecondColumn percentHeightAndWidth verticalRL" data-expected-width="300" data-expected-height="150"></div>
> </div>
> 
> <div class="grid">
>-    <div id="a" class="percentWidth verticalRL" data-expected-width="100" data-expected-height="15"></div>
>-    <div id="b" class="percentHeight" data-expected-width="15" data-expected-height="50"></div>
>-    <div id="c" class="percentHeightAndWidth verticalRL" data-expected-width="100" data-expected-height="150"></div>
>-    <div id="d" class="percentHeightAndWidth" data-expected-width="300" data-expected-height="150"></div>
>+    <div class="firstRowFirstColumn percentWidth verticalRL" data-expected-width="100" data-expected-height="15"></div>
>+    <div class="firstRowSecondColumn percentHeight" data-expected-width="15" data-expected-height="50"></div>
>+    <div class="secondRowFirstColumn percentHeightAndWidth verticalRL" data-expected-width="100" data-expected-height="150"></div>
>+    <div class="secondRowSecondColumn percentHeightAndWidth" data-expected-width="300" data-expected-height="150"></div>
> </div>
> </body>
> </html>
>diff --git a/LayoutTests/fast/css-grid-layout/place-cell-by-index.html b/LayoutTests/fast/css-grid-layout/place-cell-by-index.html
>index ecf4f4747b393addea45533b86d0874881d2163b..5d579f9057f05ac173f0fb4723865c75484bcd81 100644
>--- a/LayoutTests/fast/css-grid-layout/place-cell-by-index.html
>+++ b/LayoutTests/fast/css-grid-layout/place-cell-by-index.html
>@@ -4,40 +4,30 @@
> if (window.testRunner)
>     testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
> </script>
>+<link href="resources/grid.css" rel="stylesheet">
> <style>
> .grid {
>-    display: -webkit-grid;
>     -webkit-grid-columns: 50px 60px;
>     -webkit-grid-rows: 20px 30px;
>-    background-color: grey;
>     max-width: 110px;
> }
> 
>-#a {
>-    background-color: blue;
>-    -webkit-grid-column: 1;
>-    -webkit-grid-row: 1;
>+.firstRowFirstColumn {
>     width: 10px;
>     height: 15px;
> }
>-#b {
>-    background-color: green;
>-    -webkit-grid-column: 2;
>-    -webkit-grid-row: 1;
>+
>+.firstRowSecondColumn {
>     width: 10px;
>     height: 15px;
> }
>-#c {
>-    background-color: red;
>-    -webkit-grid-column: 1;
>-    -webkit-grid-row: 2;
>+
>+.secondRowFirstColumn {
>     width: 10px;
>     height: 15px;
> }
>-#d {
>-    background-color: orange;
>-    -webkit-grid-column: 2;
>-    -webkit-grid-row: 2;
>+
>+.secondRowSecondColumn {
>     width: 10px;
>     height: 15px;
> }
>@@ -51,37 +41,37 @@ if (window.testRunner)
>      them once we properly implement stretching / alignment. -->
> <div style="position: relative">
> <div class="grid" data-expected-width="110" data-expected-height="50">
>-    <div id="a" data-offset-x="0" data-offset-y="0"></div>
>-    <div id="b" data-offset-x="50" data-offset-y="0"></div>
>-    <div id="c" data-offset-x="0" data-offset-y="20"></div>
>-    <div id="d" data-offset-x="50" data-offset-y="20"></div>
>+    <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
>+    <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0"></div>
>+    <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="20"></div>
>+    <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="20"></div>
> </div>
> </div>
> 
> <div style="position: relative">
> <div class="grid" style="-webkit-writing-mode: horizontal-bt" data-expected-width="110" data-expected-height="50">
>-    <div id="a" data-offset-x="0" data-offset-y="35"></div>
>-    <div id="b" data-offset-x="50" data-offset-y="35"></div>
>-    <div id="c" data-offset-x="0" data-offset-y="15"></div>
>-    <div id="d" data-offset-x="50" data-offset-y="15"></div>
>+    <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="35"></div>
>+    <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="35"></div>
>+    <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="15"></div>
>+    <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="15"></div>
> </div>
> </div>
> 
> <div style="position: relative">
> <div class="grid" style="-webkit-writing-mode: vertical-rl; margin-bottom: 60px;" data-expected-width="50" data-expected-height="110">
>-    <div id="a" data-offset-x="40" data-offset-y="0"></div>
>-    <div id="b" data-offset-x="40" data-offset-y="50"></div>
>-    <div id="c" data-offset-x="20" data-offset-y="0"></div>
>-    <div id="d" data-offset-x="20" data-offset-y="50"></div>
>+    <div class="firstRowFirstColumn" data-offset-x="40" data-offset-y="0"></div>
>+    <div class="firstRowSecondColumn" data-offset-x="40" data-offset-y="50"></div>
>+    <div class="secondRowFirstColumn" data-offset-x="20" data-offset-y="0"></div>
>+    <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="50"></div>
> </div>
> </div>
> 
> <div style="position: relative">
> <div class="grid" style="-webkit-writing-mode: vertical-lr; margin-bottom: 60px;" data-expected-width="50" data-expected-height="110">
>-    <div id="a" data-offset-x="0" data-offset-y="0"></div>
>-    <div id="b" data-offset-x="0" data-offset-y="50"></div>
>-    <div id="c" data-offset-x="20" data-offset-y="0"></div>
>-    <div id="d" data-offset-x="20" data-offset-y="50"></div>
>+    <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
>+    <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="50"></div>
>+    <div class="secondRowFirstColumn" data-offset-x="20" data-offset-y="0"></div>
>+    <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="50"></div>
> </div>
> </div>
> 
>diff --git a/LayoutTests/fast/css-grid-layout/resources/grid.css b/LayoutTests/fast/css-grid-layout/resources/grid.css
>new file mode 100644
>index 0000000000000000000000000000000000000000..b48862d7a19fcf619f363a28c514ee73dab2b889
>--- /dev/null
>+++ b/LayoutTests/fast/css-grid-layout/resources/grid.css
>@@ -0,0 +1,37 @@
>+.grid {
>+    display: -webkit-grid;
>+    background-color: grey;
>+}
>+
>+.inline-grid {
>+    display: -webkit-inline-grid;
>+    background-color: grey;
>+}
>+
>+.firstRowFirstColumn {
>+    background-color: blue;
>+    -webkit-grid-column: 1;
>+    -webkit-grid-row: 1;
>+}
>+
>+.firstRowSecondColumn {
>+    background-color: lime;
>+    -webkit-grid-column: 2;
>+    -webkit-grid-row: 1;
>+}
>+
>+.secondRowFirstColumn {
>+    background-color: purple;
>+    -webkit-grid-column: 1;
>+    -webkit-grid-row: 2;
>+}
>+
>+.secondRowSecondColumn {
>+    background-color: orange;
>+    -webkit-grid-column: 2;
>+    -webkit-grid-row: 2;
>+}
>+
>+.verticalRL {
>+    -webkit-writing-mode: vertical-rl;
>+}

Actions: View | Formatted Diff | Diff

Attachments on bug 107044: 183578 | 184037 | 184051