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

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: LayoutTests/fast/css-grid-layout/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: New parsing based on rune's and jchaffraix's comments 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
« no previous file with comments | « LayoutTests/fast/css-grid-layout/grid-item-position-changed-dynamic.html ('k') | LayoutTests/fast/css-grid-layout/named-grid-line-get-set-expected.txt » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: LayoutTests/fast/css-grid-layout/named-grid-line-get-set.html
diff --git a/LayoutTests/fast/css-grid-layout/named-grid-line-get-set.html b/LayoutTests/fast/css-grid-layout/named-grid-line-get-set.html
index c8d8b2ac62fe71eafb60c43cbe25fed23a2a26f4..006c9b736967e5087bb351377e859d22ec4f7a49 100755
--- a/LayoutTests/fast/css-grid-layout/named-grid-line-get-set.html
+++ b/LayoutTests/fast/css-grid-layout/named-grid-line-get-set.html
@@ -19,28 +19,48 @@ if (window.testRunner)
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);
+}
+.gridWithoutParentheses {
+ grid-definition-columns: first nav 10px;
+ grid-definition-rows: first 50% last;
+}
+.gridWithInvalidNestedParentheses {
+ grid-definition-columns: (first (nav)) 10px (last);
+ grid-definition-rows: (first) 50% (last (nav) nav2);
+}
+.gridWithUnbalancedParentheses {
+ grid-definition-columns: (first nav 10px;
+ grid-definition-rows: (first) 50% last);
+}
+.gridWithMisplacedParentheses {
+ grid-definition-columns: (first 10px) 50%;
+ grid-definition-rows: (first) (nav 50%);
}
Julien - ping for review 2013/11/13 02:18:52 NIt: How about an empty parentheses case? (e.g. gr
</style>
<script src="../../resources/js-test.js"></script>
@@ -55,6 +75,11 @@ if (window.testRunner)
<div class="grid gridWithMinMax" id="gridWithMinMax"></div>
<div class="grid gridWithFixedMultiple" id="gridWithFixedMultiple"></div>
<div class="grid gridWithPercentageSameStringMultipleTimes" id="gridWithPercentageSameStringMultipleTimes"></div>
+<div class="grid gridWithRepeat" id="gridWithRepeatElement"></div>
+<div class="grid gridWithoutParentheses" id="gridWithoutParenthesesElement"></div>
+<div class="grid gridWithInvalidNestedParentheses" id="gridWithInvalidNestedParenthesesElement"></div>
+<div class="grid gridWithUnbalancedParentheses" id="gridWithUnbalancedParenthesesElement"></div>
+<div class="grid gridWithMisplacedParentheses" id="gridWithMisplacedParenthesesElement"></div>
<script src="resources/grid-definitions-parsing-utils.js"></script>
<script>
@@ -68,39 +93,39 @@ if (window.testRunner)
testGridDefinitionsValues(document.getElementById("gridWithMinMax"), "first 80px", "300px last");
testGridDefinitionsValues(document.getElementById("gridWithFixedMultiple"), "first nav 10px last", "first nav 15px last");
testGridDefinitionsValues(document.getElementById("gridWithPercentageSameStringMultipleTimes"), "first nav 80px nav 120px last", "first nav2 150px nav2 450px last");
+ testGridDefinitionsValues(document.getElementById("gridWithRepeatElement"), "first 10px nav nav2 400px nav nav2 400px", "100px nav nav2 150px nav nav2 150px last");
debug("");
debug("Test getting and setting grid-definition-columns and grid-definition-rows through JS");
- testGridDefinitionsSetJSValues("'first' 18px", "66px 'last'", "first 18px", "66px last", "first 18px", "66px last");
- testGridDefinitionsSetJSValues("'first' 55%", "40% 'last'", "first 440px", "240px last", "first 55%", "40% last");
- testGridDefinitionsSetJSValues("'first' auto", "auto 'last'", "first 0px", "0px last", "first auto", "auto last");
- testGridDefinitionsSetJSValues("'first' min-content", "min-content 'last'", "first 0px", "0px last", "first min-content", "min-content last");
- testGridDefinitionsSetJSValues("'first' max-content", "max-content 'last'", "first 0px", "0px last", "first max-content", "max-content last");
- testGridDefinitionsSetJSValues("'first' minmax(55%, 45px)", "minmax(30px, 40%) 'last'", "first 440px", "240px last", "first minmax(55%, 45px)", "minmax(30px, 40%) last");
- testGridDefinitionsSetJSValues("'first' minmax(22em, max-content)", "minmax(max-content, 5em) 'last'", "first 220px", "50px last", "first minmax(22em, max-content)", "minmax(max-content, 5em) last");
- testGridDefinitionsSetJSValues("'first' minmax(22em, min-content)", "minmax(min-content, 5em) 'last'", "first 220px", "50px last", "first minmax(22em, min-content)", "minmax(min-content, 5em) last");
- testGridDefinitionsSetJSValues("'first' minmax(min-content, max-content)", "minmax(max-content, min-content) 'last'", "first 0px", "0px last", "first minmax(min-content, max-content)", "minmax(max-content, min-content) last");
- testGridDefinitionsSetJSValues("'first' 'nav' minmax(min-content, max-content) 'last'", "'first' 'nav' minmax(max-content, min-content) 'last'", "first nav 0px last", "first nav 0px last", "first nav minmax(min-content, max-content) last", "first nav minmax(max-content, min-content) last");
- testGridDefinitionsSetJSValues("'first' 'nav' minmax(min-content, max-content) 'nav' auto 'last'", "'first' 'nav2' minmax(max-content, min-content) 'nav2' minmax(10px, 15px) 'last'", "first nav 0px nav 0px last", "first nav2 0px nav2 15px last", "first nav minmax(min-content, max-content) nav auto last", "first nav2 minmax(max-content, min-content) nav2 minmax(10px, 15px) last");
- testGridDefinitionsSetJSValues("'foo' 'bar' auto 'foo' auto 'bar'", "'foo' 'bar' auto 'foo' auto 'bar'", "foo bar 0px foo 0px bar", "foo bar 0px foo 0px bar", "foo bar auto foo auto bar", "foo bar auto foo auto bar");
+ testGridDefinitionsSetJSValues("(first) 18px", "66px (last)", "first 18px", "66px last", "first 18px", "66px last");
rune 2013/11/14 21:16:49 So this means you didn't change the serialization
+ testGridDefinitionsSetJSValues("(first) 55%", "40% (last)", "first 440px", "240px last", "first 55%", "40% last");
+ testGridDefinitionsSetJSValues("(first) auto", "auto (last)", "first 0px", "0px last", "first auto", "auto last");
+ testGridDefinitionsSetJSValues("(first) min-content", "min-content (last)", "first 0px", "0px last", "first min-content", "min-content last");
+ testGridDefinitionsSetJSValues("(first) max-content", "max-content (last)", "first 0px", "0px last", "first max-content", "max-content last");
+ testGridDefinitionsSetJSValues("(first) minmax(55%, 45px)", "minmax(30px, 40%) (last)", "first 440px", "240px last", "first minmax(55%, 45px)", "minmax(30px, 40%) last");
+ testGridDefinitionsSetJSValues("(first) minmax(22em, max-content)", "minmax(max-content, 5em) (last)", "first 220px", "50px last", "first minmax(22em, max-content)", "minmax(max-content, 5em) last");
+ testGridDefinitionsSetJSValues("(first) minmax(22em, min-content)", "minmax(min-content, 5em) (last)", "first 220px", "50px last", "first minmax(22em, min-content)", "minmax(min-content, 5em) last");
+ testGridDefinitionsSetJSValues("(first) minmax(min-content, max-content)", "minmax(max-content, min-content) (last)", "first 0px", "0px last", "first minmax(min-content, max-content)", "minmax(max-content, min-content) last");
+ testGridDefinitionsSetJSValues("(first nav) minmax(min-content, max-content) (last)", "(first nav) minmax(max-content, min-content) (last)", "first nav 0px last", "first nav 0px last", "first nav minmax(min-content, max-content) last", "first nav minmax(max-content, min-content) last");
+ testGridDefinitionsSetJSValues("(first nav) minmax(min-content, max-content) (nav) auto (last)", "(first nav2) minmax(max-content, min-content) (nav2) minmax(10px, 15px) (last)", "first nav 0px nav 0px last", "first nav2 0px nav2 15px last", "first nav minmax(min-content, max-content) nav auto last", "first nav2 minmax(max-content, min-content) nav2 minmax(10px, 15px) last");
+ testGridDefinitionsSetJSValues("(foo bar) auto (foo) auto (bar)", "(foo bar) auto (foo) auto (bar)", "foo bar 0px foo 0px bar", "foo bar 0px foo 0px bar", "foo bar auto foo auto bar", "foo bar auto foo auto bar");
+ testGridDefinitionsSetJSValues("(first) auto repeat(2, (foo bar) 20px)", "220px (foo) repeat(1, 50% (baz)", "first 0px foo bar 20px foo bar 20px", "220px foo 300px baz", "first auto foo bar 20px foo bar 20px", "220px foo 50% baz");
debug("");
- debug("Test getting and setting invalid grid-definition-columns and grid-definition-rows through JS");
- element = document.createElement("div");
- document.body.appendChild(element);
- element.style.display = "grid";
- element.style.gridDefinitionColumns = "'foo'";
- element.style.gridDefinitionRows = "'bar";
- shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid-definition-columns')", "none");
- shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid-definition-rows')", "none");
+ debug("Test getting invalid grid-definition-columns and grid-definition-rows set through CSS");
+ testGridDefinitionsValues(document.getElementById("gridWithoutParenthesesElement"), "none", "none");
+ testGridDefinitionsValues(document.getElementById("gridWithInvalidNestedParenthesesElement"), "none", "none");
+ testGridDefinitionsValues(document.getElementById("gridWithUnbalancedParenthesesElement"), "none", "none");
+ testGridDefinitionsValues(document.getElementById("gridWithMisplacedParenthesesElement"), "none", "none");
- element = document.createElement("div");
- document.body.appendChild(element);
- element.style.display = "grid";
- element.style.gridDefinitionColumns = "'foo' 'bar'";
- element.style.gridDefinitionRows = "'bar' 'foo'";
- shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid-definition-columns')", "none");
- shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid-definition-rows')", "none");
+ debug("");
+ debug("Test getting and setting invalid grid-definition-columns and grid-definition-rows through JS");
+ testGridDefinitionsSetBadJSValues("(foo)", "(bar");
+ testGridDefinitionsSetBadJSValues("(foo bar)", "(bar foo)");
+ testGridDefinitionsSetBadJSValues("foo bar 10px", "50% baz bar foo 2em");
+ testGridDefinitionsSetBadJSValues("(foo (bar)) 10px", "50% ((baz bar) foo) 2em");
+ testGridDefinitionsSetBadJSValues("(foo bar 10px", "50% (baz bar) foo) 2em");
+ testGridDefinitionsSetBadJSValues("(foo 10px) 2em", "(50% bar) (foo)");
</script>
</body>
</html>
« no previous file with comments | « LayoutTests/fast/css-grid-layout/grid-item-position-changed-dynamic.html ('k') | LayoutTests/fast/css-grid-layout/named-grid-line-get-set-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698