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

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: Added some new tests Created 7 years, 3 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
« 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') | Source/core/css/CSSGrammar.y.in » ('J')
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 4fb9f3421c0f1d4e4ff88e7bac92a24334863f30..2a36362f7b67975c0e30f6c910f449643ae25dc0 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
@@ -8,28 +8,48 @@ if (window.testRunner)
<link href="resources/grid.css" rel="stylesheet">
<style>
.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%);
}
</style>
<script src="../js/resources/js-test-pre.js"></script>
@@ -41,6 +61,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>
description('Test that setting and getting grid-definition-columns and grid-definition-rows works as expected');
@@ -63,95 +88,133 @@ if (window.testRunner)
testCSSValue("gridWithMinMax", "first minmax(10%, 15px)", "minmax(20px, 50%) last");
testCSSValue("gridWithFixedMultiple", "first nav 10px last", "first nav 15px last");
testCSSValue("gridWithPercentageSameStringMultipleTimes", "first nav 10% nav 15% last", "first nav2 25% nav2 75% last");
+ testCSSValue("gridWithRepeatElement", "first 10px nav nav2 50% nav nav2 50%", "100px nav nav2 25% nav nav2 25% last");
+
+ debug("");
+ debug("Test getting invalid grid-definition-columns and grid-definition-rows set through CSS");
+ testCSSValue("gridWithoutParenthesesElement", "none", "none");
+ testCSSValue("gridWithInvalidNestedParenthesesElement", "none", "none");
+ testCSSValue("gridWithUnbalancedParenthesesElement", "none", "none");
+ testCSSValue("gridWithMisplacedParenthesesElement", "none", "none");
debug("");
debug("Test getting and setting grid-definition-columns and grid-definition-rows through JS");
var element = document.createElement("div");
document.body.appendChild(element);
- element.style.gridDefinitionColumns = "'first' 18px";
- element.style.gridDefinitionRows = "66px 'last'";
+ element.style.gridDefinitionColumns = "(first) 18px";
+ element.style.gridDefinitionRows = "66px (last)";
testValue(element, "first 18px", "66px last");
element = document.createElement("div");
document.body.appendChild(element);
- element.style.gridDefinitionColumns = "'first' 55%";
- element.style.gridDefinitionRows = "40% 'last'";
+ element.style.gridDefinitionColumns = "(first) 55%";
+ element.style.gridDefinitionRows = "40% (last)";
testValue(element, "first 55%", "40% last");
element = document.createElement("div");
document.body.appendChild(element);
- element.style.gridDefinitionColumns = "'first' auto";
- element.style.gridDefinitionRows = "auto 'last'";
+ element.style.gridDefinitionColumns = "(first) auto";
+ element.style.gridDefinitionRows = "auto (last)";
testValue(element, "first auto", "auto last");
element = document.createElement("div");
document.body.appendChild(element);
- element.style.gridDefinitionColumns = "'first' min-content";
- element.style.gridDefinitionRows = "min-content 'last'";
+ element.style.gridDefinitionColumns = "(first) min-content";
+ element.style.gridDefinitionRows = "min-content (last)";
testValue(element, "first min-content", "min-content last");
element = document.createElement("div");
document.body.appendChild(element);
- element.style.gridDefinitionColumns = "'first' max-content";
- element.style.gridDefinitionRows = "max-content 'last'";
+ element.style.gridDefinitionColumns = "(first) max-content";
+ element.style.gridDefinitionRows = "max-content (last)";
testValue(element, "first max-content", "max-content last");
element = document.createElement("div");
document.body.appendChild(element);
- element.style.gridDefinitionColumns = "'first' minmax(55%, 45px)";
- element.style.gridDefinitionRows = "minmax(30px, 40%) 'last'";
+ element.style.gridDefinitionColumns = "(first) minmax(55%, 45px)";
+ element.style.gridDefinitionRows = "minmax(30px, 40%) (last)";
testValue(element, "first minmax(55%, 45px)", "minmax(30px, 40%) last");
element = document.createElement("div");
document.body.appendChild(element);
element.style.font = "10px Ahem";
- element.style.gridDefinitionColumns = "'first' minmax(22em, max-content)";
- element.style.gridDefinitionRows = "minmax(max-content, 5em) 'last'";
+ element.style.gridDefinitionColumns = "(first) minmax(22em, max-content)";
+ element.style.gridDefinitionRows = "minmax(max-content, 5em) (last)";
testValue(element, "first minmax(220px, max-content)", "minmax(max-content, 50px) last");
element = document.createElement("div");
document.body.appendChild(element);
element.style.font = "10px Ahem";
- element.style.gridDefinitionColumns = "'first' minmax(22em, max-content)";
- element.style.gridDefinitionRows = "minmax(max-content, 5em) 'last'";
+ element.style.gridDefinitionColumns = "(first) minmax(22em, max-content)";
+ element.style.gridDefinitionRows = "minmax(max-content, 5em) (last)";
testValue(element, "first minmax(220px, max-content)", "minmax(max-content, 50px) last");
element = document.createElement("div");
document.body.appendChild(element);
- element.style.gridDefinitionColumns = "'first' minmax(min-content, max-content)";
- element.style.gridDefinitionRows = "minmax(max-content, min-content) 'last'";
+ element.style.gridDefinitionColumns = "(first) minmax(min-content, max-content)";
+ element.style.gridDefinitionRows = "minmax(max-content, min-content) (last)";
testValue(element, "first minmax(min-content, max-content)", "minmax(max-content, min-content) last");
element = document.createElement("div");
document.body.appendChild(element);
- element.style.gridDefinitionColumns = "'first' 'nav' minmax(min-content, max-content) 'last'";
- element.style.gridDefinitionRows = "'first' 'nav' minmax(max-content, min-content) 'last'";
+ element.style.gridDefinitionColumns = "(first nav) minmax(min-content, max-content) (last)";
+ element.style.gridDefinitionRows = "(first nav) minmax(max-content, min-content) (last)";
testValue(element, "first nav minmax(min-content, max-content) last", "first nav minmax(max-content, min-content) last");
element = document.createElement("div");
document.body.appendChild(element);
- element.style.gridDefinitionColumns = "'first' 'nav' minmax(min-content, max-content) 'nav' auto 'last'";
- element.style.gridDefinitionRows = "'first' 'nav2' minmax(max-content, min-content) 'nav2' minmax(10px, 15px) 'last'";
+ element.style.gridDefinitionColumns = "(first nav) minmax(min-content, max-content) (nav) auto (last)";
+ element.style.gridDefinitionRows = "(first nav2) minmax(max-content, min-content) (nav2) minmax(10px, 15px) (last)";
testValue(element, "first nav minmax(min-content, max-content) nav auto last", "first nav2 minmax(max-content, min-content) nav2 minmax(10px, 15px) last");
element = document.createElement("div");
document.body.appendChild(element);
- element.style.gridDefinitionColumns = "'foo' 'bar' auto 'foo' auto 'bar'";
- element.style.gridDefinitionRows = "'foo' 'bar' auto 'foo' auto 'bar'";
+ element.style.gridDefinitionColumns = "(foo bar) auto (foo) auto (bar)";
+ element.style.gridDefinitionRows = "(foo bar) auto (foo) auto (bar)";
testValue(element, "foo bar auto foo auto bar", "foo bar auto foo auto bar");
+ element = document.createElement("div");
+ document.body.appendChild(element);
+ element.style.gridDefinitionColumns = "(first) auto repeat(2, (foo bar) 20px)";
+ element.style.gridDefinitionRows = "220px (foo) repeat(1, 50% (baz)";
+ testValue(element, "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.gridDefinitionColumns = "'foo'";
- element.style.gridDefinitionRows = "'bar";
+ element.style.gridDefinitionColumns = "(foo)";
+ element.style.gridDefinitionRows = "(bar";
+ testValue(element, "none", "none");
+
+ element = document.createElement("div");
+ document.body.appendChild(element);
+ element.style.gridDefinitionColumns = "(foo bar)";
+ element.style.gridDefinitionRows = "(bar foo)";
+ testValue(element, "none", "none");
+
+ element = document.createElement("div");
+ document.body.appendChild(element);
+ element.style.gridDefinitionColumns = "foo bar 10px";
+ element.style.gridDefinitionRows = "50% baz bar foo 2em";
+ testValue(element, "none", "none");
+
+ element = document.createElement("div");
+ document.body.appendChild(element);
+ element.style.gridDefinitionColumns = "(foo (bar)) 10px";
+ element.style.gridDefinitionRows = "50% ((baz bar) foo) 2em";
+ testValue(element, "none", "none");
+
+ element = document.createElement("div");
+ document.body.appendChild(element);
+ element.style.gridDefinitionColumns = "(foo bar 10px";
+ element.style.gridDefinitionRows = "50% (baz bar) foo) 2em";
testValue(element, "none", "none");
element = document.createElement("div");
document.body.appendChild(element);
- element.style.gridDefinitionColumns = "'foo' 'bar'";
- element.style.gridDefinitionRows = "'bar' 'foo'";
+ element.style.gridDefinitionColumns = "(foo 10px) 2em";
+ element.style.gridDefinitionRows = "(50% bar) (foo)";
testValue(element, "none", "none");
</script>
<script src="../js/resources/js-test-post.js"></script>
« 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') | Source/core/css/CSSGrammar.y.in » ('J')

Powered by Google App Engine
This is Rietveld 408576698