Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(94)

Unified Diff: LayoutTests/fast/css-grid-layout/grid-item-column-row-get-set.html

Issue 22215002: Allow grid positions to be named grid areas (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Created 7 years, 4 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
Index: LayoutTests/fast/css-grid-layout/grid-item-column-row-get-set.html
diff --git a/LayoutTests/fast/css-grid-layout/grid-item-column-row-get-set.html b/LayoutTests/fast/css-grid-layout/grid-item-column-row-get-set.html
index 0c89db4e79a04dcc4b144ec66b1a417dcd47e1b7..aa7b589ae448585413688467abd228b37d0b4504 100755
--- a/LayoutTests/fast/css-grid-layout/grid-item-column-row-get-set.html
+++ b/LayoutTests/fast/css-grid-layout/grid-item-column-row-get-set.html
@@ -1,11 +1,13 @@
<!DOCTYPE html>
<html>
<head>
-<script>
-if (window.testRunner)
- testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
-</script>
+<link href="resources/grid.css" rel="stylesheet">
<style>
+.grid {
+ grid-template: "firstArea" "secondArea"
+ "thirdArea" "thirdArea";
+}
+
.gridItemWithPositiveInteger {
grid-column: 10;
grid-row: 15;
@@ -62,27 +64,39 @@ if (window.testRunner)
grid-column: 1 /span 3 "first";
grid-row: -1 / "last" 2 span ;
}
+.gridItemWithSingleNamedGridArea {
+ grid-column: thirdArea;
+ grid-row: firstArea;
+}
+.gridItemWithNamedGridAreaAndSpan {
+ grid-column: thirdArea / span;
+ grid-row: firstArea / span 2;
+}
</style>
<script src="resources/grid-item-column-row-parsing-utils.js"></script>
<script src="../js/resources/js-test-pre.js"></script>
</head>
<body>
-<!-- The first has no properties set on it. -->
-<div id="gridItemWithNoCSSRule"></div>
-<div class="gridItemWithPositiveInteger" id="gridItemWithPositiveInteger"></div>
-<div class="gridItemWithNegativeInteger" id="gridItemWithNegativeInteger"></div>
-<div class="gridItemWithAuto" id="gridItemWithAutoElement"></div>
-<div class="gridItemWith2Integer" id="gridItemWith2IntegerElement"></div>
-<div class="gridItemWithNegativePositiveInteger" id="gridItemWithNegativePositiveIntegerElement"></div>
-<div class="gridItemWith2Auto" id="gridItemWith2AutoElement"></div>
-<div class="gridItemWithBeforeSpan" id="gridItemWithBeforeSpanElement"></div>
-<div class="gridItemWithAfterSpan" id="gridItemWithAfterSpanElement"></div>
-<div class="gridItemWith2OnlySpan" id="gridItemWith2OnlySpanElement"></div>
-<div class="gridItemWithNegativePositiveInteger gridItemWithBothLongHand" id="gridItemWithBothShortLongHandElement"></div>
-<div class="gridItemWithNoSpace" id="gridItemWithNoSpaceElement"></div>
-<div class="gridItemWithString" id="gridItemWithString"></div>
-<div class="gridItemWithSpanString" id="gridItemWithSpanString"></div>
-<div class="gridItemWithSpanNumberString" id="gridItemWithSpanNumberString"></div>
+<div class="grid">
+ <!-- The first has no properties set on it. -->
+ <div id="gridItemWithNoCSSRule"></div>
+ <div class="gridItemWithPositiveInteger" id="gridItemWithPositiveInteger"></div>
+ <div class="gridItemWithNegativeInteger" id="gridItemWithNegativeInteger"></div>
+ <div class="gridItemWithAuto" id="gridItemWithAutoElement"></div>
+ <div class="gridItemWith2Integer" id="gridItemWith2IntegerElement"></div>
+ <div class="gridItemWithNegativePositiveInteger" id="gridItemWithNegativePositiveIntegerElement"></div>
+ <div class="gridItemWith2Auto" id="gridItemWith2AutoElement"></div>
+ <div class="gridItemWithBeforeSpan" id="gridItemWithBeforeSpanElement"></div>
+ <div class="gridItemWithAfterSpan" id="gridItemWithAfterSpanElement"></div>
+ <div class="gridItemWith2OnlySpan" id="gridItemWith2OnlySpanElement"></div>
+ <div class="gridItemWithNegativePositiveInteger gridItemWithBothLongHand" id="gridItemWithBothShortLongHandElement"></div>
+ <div class="gridItemWithNoSpace" id="gridItemWithNoSpaceElement"></div>
+ <div class="gridItemWithString" id="gridItemWithString"></div>
+ <div class="gridItemWithSpanString" id="gridItemWithSpanString"></div>
+ <div class="gridItemWithSpanNumberString" id="gridItemWithSpanNumberString"></div>
+ <div class="gridItemWithSingleNamedGridArea" id="gridItemWithSingleNamedGridArea"></div>
+ <div class="gridItemWithNamedGridAreaAndSpan" id="gridItemWithNamedGridAreaAndSpan"></div>
+</div>
<script>
description('Test that setting and getting grid-column and grid-row works as expected');
@@ -101,6 +115,8 @@ if (window.testRunner)
testColumnRowCSSParsing("gridItemWithString", "1 first / auto", "1 last / auto");
testColumnRowCSSParsing("gridItemWithSpanString", "1 / span 1 first", "-1 / span 1 last");
testColumnRowCSSParsing("gridItemWithSpanNumberString", "1 / span 3 first", "-1 / span 2 last");
+ testColumnRowCSSParsing("gridItemWithSingleNamedGridArea", "thirdArea / thirdArea", "firstArea / firstArea");
+ testColumnRowCSSParsing("gridItemWithNamedGridAreaAndSpan", "thirdArea / span 1", "firstArea / span 2");
debug("");
debug("Test the initial value");
@@ -128,6 +144,9 @@ if (window.testRunner)
testColumnRowJSParsing("'first' / 'last'", "'nav' / 'last' span", "1 first / 1 last", "1 nav / span 1 last");
testColumnRowJSParsing("3 'first' / 2 'last'", "5 'nav' / 'last' 7 span", "3 first / 2 last", "5 nav / span 7 last");
testColumnRowJSParsing("3 'first' span / -3 'last'", "'last' 2 span / -1 'nav'", "span 3 first / -3 last", "span 2 last / -1 nav");
+ testColumnRowJSParsing("5 / none", "8 / foobar");
+ testColumnRowJSParsing("nonExistent / none", "nonExistent / foobar");
+ testColumnRowJSParsing("span 'first' 3 / none", "'last' span / foobar", "span 3 first / none", "span 1 last / foobar");
debug("");
debug("Test setting grid-column and grid-row back to 'auto' through JS");
@@ -163,7 +182,6 @@ if (window.testRunner)
debug("Test getting and setting invalid grid-column and grid-row through JS");
testColumnRowInvalidJSParsing("4 5", "5 8");
testColumnRowInvalidJSParsing("4 /", "5 /");
- testColumnRowInvalidJSParsing("5 / none", "8 / foobar");
testColumnRowInvalidJSParsing("5 5", "8 auto");
testColumnRowInvalidJSParsing("5 / /", "8 / /");

Powered by Google App Engine
This is Rietveld 408576698