[css-grid] Allow percentage values for column and row gutters

third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-gutters-get-set.html

Index: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-gutters-get-set.html
diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-gutters-get-set.html b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-gutters-get-set.html
index 7af88faab4538864b835896ba7ccf141c946a17e..75e51ef3d86f8e741bb372e3ec6211e1be84bc61 100644
--- a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-gutters-get-set.html
+++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-gutters-get-set.html
@@ -4,13 +4,19 @@
 <link href="resources/grid.css" rel="stylesheet">
 <style>
 .gridGap { grid-gap: 20px 15px; }
+.gridPercentGap { grid-gap: 10% 15%; }
 .gridSimpleGap { grid-gap: 25px; }
+.gridSimplePercentGap { grid-gap: 10%; }
 .gridColumnGap { grid-column-gap: 2vw; }
 .gridRowGap { grid-row-gap: 2em; }
 .gridRowColumnGaps {
     grid-row-gap: 12px;
     grid-column-gap: 1rem;
 }
+.gridRowColumnPercentGaps {
+    grid-row-gap: 10%;
+    grid-column-gap: 15%;
+}
 .gridRowColumnInheritGaps {
     grid-row-gap: inherit;
     grid-column-gap: inherit;
@@ -23,7 +29,7 @@
     grid-row-gap: calc(10px + 3px);
     grid-column-gap: calc(2px + 1vw);
 }
-.gridInvalidRowGap { grid-row-gap: 10%; }
+.gridInvalidRowGap { grid-row-gap: -10px; }
 .gridInvalidColumnGap { grid-column-gap: -webkit-max-content; }
 .gridInvalidMultipleRowColumnGaps {
     grid-row-gap: 10px 1px;
@@ -44,11 +50,14 @@
 
 <div class="grid" id="defaultGrid"></div>
 <div class="grid gridGap" id="gridGap"></div>
+<div class="grid gridPercentGap" id="gridPercentGap"></div>
 <div class="grid gridSimpleGap" id="gridSimpleGap"></div>
+<div class="grid gridSimplePercentGap" id="gridSimplePercentGap"></div>
 <div class="grid gridColumnGap" id="gridColumnGap"></div>
 <div class="grid gridRowGap" id="gridRowGap"></div>
 <div class="grid gridCalcGaps" id="gridCalcGaps"></div>
 <div class="grid gridRowColumnGaps" id="gridRowColumnGaps"></div>
+<div class="grid gridRowColumnPercentGaps" id="gridRowColumnPercentGaps"></div>
 <div class="grid gridSimpleGap">
     <div class="grid gridRowColumnInheritGaps" id="gridRowColumnInheritGaps"></div>
 </div>
@@ -72,12 +81,15 @@ debug("Test getting grid-column-gap and grid-row-gap set through CSS");
 
 testGridGapDefinitionsValues("defaultGrid", "0px", "0px");
 testGridGapDefinitionsValues("gridGap", "20px", "15px");
+testGridGapDefinitionsValues("gridPercentGap", "10%", "15%");
 testGridGapDefinitionsValues("gridSimpleGap", "25px", "25px");
+testGridGapDefinitionsValues("gridSimplePercentGap", "10%", "10%");
 testGridGapDefinitionsValues("gridColumnGap", "0px", "16px");
 testGridGapDefinitionsValues("gridRowGap", "32px", "0px");
 testGridGapDefinitionsValues("gridCalcGaps", "13px", "10px");
 testGridGapDefinitionsValues("gridRowColumnGaps", "12px", "16px");
 testGridGapDefinitionsValues("gridRowColumnGaps", "12px", "16px");
+testGridGapDefinitionsValues("gridRowColumnPercentGaps", "10%", "15%");
 testGridGapDefinitionsValues("gridRowColumnInheritGaps", "25px", "25px");
 testGridGapDefinitionsValues("gridRowColumnInitialGaps", "0px", "0px");