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"); |