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

Unified Diff: LayoutTests/fast/css-grid-layout/non-named-grid-line-get-set.html

Issue 23528004: [CSS Grid Layout] Update named grid lines syntax to the last version of the specs (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@named
Patch Set: Patch for landing v2 Created 7 years, 1 month 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/non-named-grid-line-get-set.html
diff --git a/LayoutTests/fast/css-grid-layout/non-named-grid-line-get-set.html b/LayoutTests/fast/css-grid-layout/non-named-grid-line-get-set.html
index f28e974bd653d93132930c2a80cba323118126ee..adba071d1c212f4e16bcdaed7a2fbbe597d82a27 100644
--- a/LayoutTests/fast/css-grid-layout/non-named-grid-line-get-set.html
+++ b/LayoutTests/fast/css-grid-layout/non-named-grid-line-get-set.html
@@ -10,28 +10,36 @@
width: 77px;
}
.gridWithFixed {
- grid-definition-columns: "first" 10px;
- grid-definition-rows: "first" 15px;
+ grid-definition-columns: (first) 10px;
+ grid-definition-rows: (first) 15px;
}
.gridWithPercent {
- grid-definition-columns: 53% "last";
- grid-definition-rows: 27% "last";
+ grid-definition-columns: 53% (last);
+ grid-definition-rows: 27% (last);
}
.gridWithAuto {
- grid-definition-columns: "first" auto;
- grid-definition-rows: auto "last";
+ grid-definition-columns: (first) auto;
+ grid-definition-rows: auto (last);
}
.gridWithMinMax {
- grid-definition-columns: "first" minmax(10%, 15px);
- grid-definition-rows: minmax(20px, 50%) "last";
+ grid-definition-columns: (first) minmax(10%, 15px);
+ grid-definition-rows: minmax(20px, 50%) (last);
}
.gridWithFixedMultiple {
- grid-definition-columns: "first" "nav" 10px "last";
- grid-definition-rows: "first" "nav" 15px "last";
+ grid-definition-columns: (first nav) 10px (last);
+ grid-definition-rows: (first nav) 15px (last);
}
.gridWithPercentageSameStringMultipleTimes {
- grid-definition-columns: "first" "nav" 10% "nav" 15% "last";
- grid-definition-rows: "first" "nav2" 25% "nav2" 75% "last";
+ grid-definition-columns: (first nav) 10% (nav) 15% (last);
+ grid-definition-rows: (first nav2) 25% (nav2) 75% (last);
+}
+.gridWithRepeat {
+ grid-definition-columns: (first) 10px repeat(2, (nav nav2) 50%);
+ grid-definition-rows: 100px repeat(2, (nav nav2) 25%) (last);
+}
+.gridWithEmptyParentheses {
+ grid-definition-columns: () 10px;
+ grid-definition-rows: 20px ( ) 50px ();
}
</style>
<script src="../../resources/js-test.js"></script>
@@ -46,33 +54,37 @@
<div class="gridWithMinMax" id="gridWithMinMax"></div>
<div class="gridWithFixedMultiple" id="gridWithFixedMultiple"></div>
<div class="gridWithPercentageSameStringMultipleTimes" id="gridWithPercentageSameStringMultipleTimes"></div>
+<div class="gridWithRepeat" id="gridWithRepeatElement"></div>
+<div class="gridWithEmptyParentheses" id="gridWithEmptyParentheses"></div>
<script src="resources/grid-definitions-parsing-utils.js"></script>
<script>
description('Test that setting and getting grid-definition-columns and grid-definition-rows works as expected');
debug("Test getting grid-definition-columns and grid-definition-rows set through CSS");
- testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), "first 10px", "first 15px");
- testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "53% last", "27% last");
- testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "first auto", "auto last");
- testGridDefinitionsValues(document.getElementById("gridWithMinMax"), "first minmax(10%, 15px)", "minmax(20px, 50%) last");
- testGridDefinitionsValues(document.getElementById("gridWithFixedMultiple"), "first nav 10px last", "first nav 15px last");
- testGridDefinitionsValues(document.getElementById("gridWithPercentageSameStringMultipleTimes"), "first nav 10% nav 15% last", "first nav2 25% nav2 75% last");
+ testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), "(first) 10px", "(first) 15px");
+ testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "53% (last)", "27% (last)");
+ testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "(first) auto", "auto (last)");
+ testGridDefinitionsValues(document.getElementById("gridWithMinMax"), "(first) minmax(10%, 15px)", "minmax(20px, 50%) (last)");
+ testGridDefinitionsValues(document.getElementById("gridWithFixedMultiple"), "(first nav) 10px (last)", "(first nav) 15px (last)");
+ testGridDefinitionsValues(document.getElementById("gridWithPercentageSameStringMultipleTimes"), "(first nav) 10% (nav) 15% (last)", "(first nav2) 25% (nav2) 75% (last)");
+ testGridDefinitionsValues(document.getElementById("gridWithRepeatElement"), "(first) 10px (nav nav2) 50% (nav nav2) 50%", "100px (nav nav2) 25% (nav nav2) 25% (last)");
+ testGridDefinitionsValues(document.getElementById("gridWithEmptyParentheses"), "10px", "20px 50px");
debug("");
debug("Test getting and setting grid-definition-columns and grid-definition-rows through JS");
- testNonGridDefinitionsSetJSValues("'first' 18px", "66px 'last'", "first 18px", "66px last", "first 18px", "66px last");
- testNonGridDefinitionsSetJSValues("'first' 55%", "40% 'last'", "first 55%", "40% last", "first 55%", "40% last");
- testNonGridDefinitionsSetJSValues("'first' auto", "auto 'last'", "first auto", "auto last", "first auto", "auto last");
- testNonGridDefinitionsSetJSValues("'first' min-content", "min-content 'last'", "first min-content", "min-content last", "first min-content", "min-content last");
- testNonGridDefinitionsSetJSValues("'first' max-content", "max-content 'last'", "first max-content", "max-content last", "first max-content", "max-content last");
- testNonGridDefinitionsSetJSValues("'first' minmax(55%, 45px)", "minmax(30px, 40%) 'last'", "first minmax(55%, 45px)", "minmax(30px, 40%) last", "first minmax(55%, 45px)", "minmax(30px, 40%) last");
- testNonGridDefinitionsSetJSValues("'first' minmax(22em, max-content)", "minmax(max-content, 5em) 'last'", "first minmax(220px, max-content)", "minmax(max-content, 50px) last", "first minmax(22em, max-content)", "minmax(max-content, 5em) last", "first minmax(220px, max-content)", "minmax(max-content, 50px) last", "minmax(max-content, 50px) last");
- testNonGridDefinitionsSetJSValues("'first' minmax(22em, min-content)", "minmax(min-content, 5em) 'last'", "first minmax(220px, min-content)", "minmax(min-content, 50px) last", "first minmax(22em, min-content)", "minmax(min-content, 5em) last", "first minmax(220px, min-content)", "minmax(min-content, 50px) last", "minmax(min-content, 50px) last");
- testNonGridDefinitionsSetJSValues("'first' minmax(min-content, max-content)", "minmax(max-content, min-content) 'last'", "first minmax(min-content, max-content)", "minmax(max-content, min-content) last", "first minmax(min-content, max-content)", "minmax(max-content, min-content) last");
- testNonGridDefinitionsSetJSValues("'first' 'nav' minmax(min-content, max-content) 'last'", "'first' 'nav' minmax(max-content, min-content) 'last'", "first nav minmax(min-content, max-content) last", "first nav minmax(max-content, min-content) last", "first nav minmax(min-content, max-content) last", "first nav minmax(max-content, min-content) last");
- testNonGridDefinitionsSetJSValues("'first' 'nav' minmax(min-content, max-content) 'nav' auto 'last'", "'first' 'nav2' minmax(max-content, min-content) 'nav2' minmax(10px, 15px) 'last'", "first nav minmax(min-content, max-content) nav auto last", "first nav2 minmax(max-content, min-content) nav2 minmax(10px, 15px) last", "first nav minmax(min-content, max-content) nav auto last", "first nav2 minmax(max-content, min-content) nav2 minmax(10px, 15px) last");;
- testNonGridDefinitionsSetJSValues("'foo' 'bar' auto 'foo' auto 'bar'", "'foo' 'bar' auto 'foo' auto 'bar'", "foo bar auto foo auto bar", "foo bar auto foo auto bar", "foo bar auto foo auto bar", "foo bar auto foo auto bar");
+ testNonGridDefinitionsSetJSValues("(first) 18px", "66px (last)", "(first) 18px", "66px (last)", "(first) 18px", "66px (last)");
+ testNonGridDefinitionsSetJSValues("(first) 55%", "40% (last)", "(first) 55%", "40% (last)", "(first) 55%", "40% (last)");
+ testNonGridDefinitionsSetJSValues("(first) auto", "auto (last)", "(first) auto", "auto (last)", "(first) auto", "auto (last)");
+ testNonGridDefinitionsSetJSValues("(first) min-content", "min-content (last)", "(first) min-content", "min-content (last)", "(first) min-content", "min-content (last)");
+ testNonGridDefinitionsSetJSValues("(first) max-content", "max-content (last)", "(first) max-content", "max-content (last)", "(first) max-content", "max-content (last)");
+ testNonGridDefinitionsSetJSValues("(first) minmax(55%, 45px)", "minmax(30px, 40%) (last)", "(first) minmax(55%, 45px)", "minmax(30px, 40%) (last)", "(first) minmax(55%, 45px)", "minmax(30px, 40%) (last)");
+ testNonGridDefinitionsSetJSValues("(first) minmax(22em, max-content)", "minmax(max-content, 5em) (last)", "(first) minmax(220px, max-content)", "minmax(max-content, 50px) (last)", "(first) minmax(22em, max-content)", "minmax(max-content, 5em) (last)", "(first) minmax(220px, max-content)", "minmax(max-content, 50px) (last)", "minmax(max-content, 50px) (last)");
+ testNonGridDefinitionsSetJSValues("(first) minmax(22em, min-content)", "minmax(min-content, 5em) (last)", "(first) minmax(220px, min-content)", "minmax(min-content, 50px) (last)", "(first) minmax(22em, min-content)", "minmax(min-content, 5em) (last)", "(first) minmax(220px, min-content)", "minmax(min-content, 50px) (last)", "minmax(min-content, 50px) (last)");
+ testNonGridDefinitionsSetJSValues("(first) minmax(min-content, max-content)", "minmax(max-content, min-content) (last)", "(first) minmax(min-content, max-content)", "minmax(max-content, min-content) (last)", "(first) minmax(min-content, max-content)", "minmax(max-content, min-content) (last)");
+ testNonGridDefinitionsSetJSValues("(first nav) minmax(min-content, max-content) (last)", "(first nav) minmax(max-content, min-content) (last)", "(first nav) minmax(min-content, max-content) (last)", "(first nav) minmax(max-content, min-content) (last)", "(first nav) minmax(min-content, max-content) (last)", "(first nav) minmax(max-content, min-content) (last)");
+ testNonGridDefinitionsSetJSValues("(first nav) minmax(min-content, max-content) (nav) auto (last)", "(first nav2) minmax(max-content, min-content) (nav2) minmax(10px, 15px) (last)", "(first nav) minmax(min-content, max-content) (nav) auto (last)", "(first nav2) minmax(max-content, min-content) (nav2) minmax(10px, 15px) (last)", "(first nav) minmax(min-content, max-content) (nav) auto (last)", "(first nav2) minmax(max-content, min-content) (nav2) minmax(10px, 15px) (last)");;
+ testNonGridDefinitionsSetJSValues("(foo bar) auto (foo) auto (bar)", "(foo bar) auto (foo) auto (bar)", "(foo bar) auto (foo) auto (bar)", "(foo bar) auto (foo) auto (bar)");
debug("");
debug("Test getting and setting invalid grid-definition-columns and grid-definition-rows through JS");

Powered by Google App Engine
This is Rietveld 408576698