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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side 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 unified diff | 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 »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE HTML> 1 <!DOCTYPE HTML>
2 <html> 2 <html>
3 <head> 3 <head>
4 <script> 4 <script>
5 if (window.testRunner) 5 if (window.testRunner)
6 testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1); 6 testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
7 </script> 7 </script>
8 <link href="resources/grid.css" rel="stylesheet"> 8 <link href="resources/grid.css" rel="stylesheet">
9 <style> 9 <style>
10 .grid { 10 .grid {
11 /* Give an explicit size to the grid so that percentage grid tracks have a c onsistent resolution */ 11 /* Give an explicit size to the grid so that percentage grid tracks have a c onsistent resolution */
12 width: 800px; 12 width: 800px;
13 height: 600px; 13 height: 600px;
14 } 14 }
15 .gridItem { 15 .gridItem {
16 grid-column: 1; 16 grid-column: 1;
17 grid-row: 1; 17 grid-row: 1;
18 height: 22px; 18 height: 22px;
19 width: 77px; 19 width: 77px;
20 } 20 }
21 .gridWithFixed { 21 .gridWithFixed {
22 grid-definition-columns: "first" 10px; 22 grid-definition-columns: (first) 10px;
23 grid-definition-rows: "first" 15px; 23 grid-definition-rows: (first) 15px;
24 } 24 }
25 .gridWithPercent { 25 .gridWithPercent {
26 grid-definition-columns: 53% "last"; 26 grid-definition-columns: 53% (last);
27 grid-definition-rows: 27% "last"; 27 grid-definition-rows: 27% (last);
28 } 28 }
29 .gridWithAuto { 29 .gridWithAuto {
30 grid-definition-columns: "first" auto; 30 grid-definition-columns: (first) auto;
31 grid-definition-rows: auto "last"; 31 grid-definition-rows: auto (last);
32 } 32 }
33 .gridWithMinMax { 33 .gridWithMinMax {
34 grid-definition-columns: "first" minmax(10%, 15px); 34 grid-definition-columns: (first) minmax(10%, 15px);
35 grid-definition-rows: minmax(20px, 50%) "last"; 35 grid-definition-rows: minmax(20px, 50%) (last);
36 } 36 }
37 .gridWithFixedMultiple { 37 .gridWithFixedMultiple {
38 grid-definition-columns: "first" "nav" 10px "last"; 38 grid-definition-columns: (first nav) 10px (last);
39 grid-definition-rows: "first" "nav" 15px "last"; 39 grid-definition-rows: (first nav) 15px (last);
40 } 40 }
41 .gridWithPercentageSameStringMultipleTimes { 41 .gridWithPercentageSameStringMultipleTimes {
42 grid-definition-columns: "first" "nav" 10% "nav" 15% "last"; 42 grid-definition-columns: (first nav) 10% (nav) 15% (last);
43 grid-definition-rows: "first" "nav2" 25% "nav2" 75% "last"; 43 grid-definition-rows: (first nav2) 25% (nav2) 75% (last);
44 }
45 .gridWithRepeat {
46 grid-definition-columns: (first) 10px repeat(2, (nav nav2) 50%);
47 grid-definition-rows: 100px repeat(2, (nav nav2) 25%) (last);
48 }
49 .gridWithoutParentheses {
50 grid-definition-columns: first nav 10px;
51 grid-definition-rows: first 50% last;
52 }
53 .gridWithInvalidNestedParentheses {
54 grid-definition-columns: (first (nav)) 10px (last);
55 grid-definition-rows: (first) 50% (last (nav) nav2);
56 }
57 .gridWithUnbalancedParentheses {
58 grid-definition-columns: (first nav 10px;
59 grid-definition-rows: (first) 50% last);
60 }
61 .gridWithMisplacedParentheses {
62 grid-definition-columns: (first 10px) 50%;
63 grid-definition-rows: (first) (nav 50%);
44 } 64 }
Julien - ping for review 2013/11/13 02:18:52 NIt: How about an empty parentheses case? (e.g. gr
45 </style> 65 </style>
46 <script src="../../resources/js-test.js"></script> 66 <script src="../../resources/js-test.js"></script>
47 </head> 67 </head>
48 <body> 68 <body>
49 <div class="grid gridWithFixed" id="gridWithFixedElement"></div> 69 <div class="grid gridWithFixed" id="gridWithFixedElement"></div>
50 <div class="grid gridWithPercent" id="gridWithPercentElement"></div> 70 <div class="grid gridWithPercent" id="gridWithPercentElement"></div>
51 <div class="grid gridWithAuto" id="gridWithAutoElement"></div> 71 <div class="grid gridWithAuto" id="gridWithAutoElement"></div>
52 <div class="grid gridWithAuto" id="gridWithAutoWithChildrenElement"> 72 <div class="grid gridWithAuto" id="gridWithAutoWithChildrenElement">
53 <div class="gridItem"></div> 73 <div class="gridItem"></div>
54 </div> 74 </div>
55 <div class="grid gridWithMinMax" id="gridWithMinMax"></div> 75 <div class="grid gridWithMinMax" id="gridWithMinMax"></div>
56 <div class="grid gridWithFixedMultiple" id="gridWithFixedMultiple"></div> 76 <div class="grid gridWithFixedMultiple" id="gridWithFixedMultiple"></div>
57 <div class="grid gridWithPercentageSameStringMultipleTimes" id="gridWithPercenta geSameStringMultipleTimes"></div> 77 <div class="grid gridWithPercentageSameStringMultipleTimes" id="gridWithPercenta geSameStringMultipleTimes"></div>
78 <div class="grid gridWithRepeat" id="gridWithRepeatElement"></div>
79 <div class="grid gridWithoutParentheses" id="gridWithoutParenthesesElement"></di v>
80 <div class="grid gridWithInvalidNestedParentheses" id="gridWithInvalidNestedPare nthesesElement"></div>
81 <div class="grid gridWithUnbalancedParentheses" id="gridWithUnbalancedParenthese sElement"></div>
82 <div class="grid gridWithMisplacedParentheses" id="gridWithMisplacedParenthesesE lement"></div>
58 83
59 <script src="resources/grid-definitions-parsing-utils.js"></script> 84 <script src="resources/grid-definitions-parsing-utils.js"></script>
60 <script> 85 <script>
61 description('Test that setting and getting grid-definition-columns and grid- definition-rows works as expected'); 86 description('Test that setting and getting grid-definition-columns and grid- definition-rows works as expected');
62 87
63 debug("Test getting grid-definition-columns and grid-definition-rows set thr ough CSS"); 88 debug("Test getting grid-definition-columns and grid-definition-rows set thr ough CSS");
64 testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), " first 10px", "first 15px"); 89 testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), " first 10px", "first 15px");
65 testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "424px last", "162px last"); 90 testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "424px last", "162px last");
66 testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "f irst 0px", "0px last"); 91 testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "f irst 0px", "0px last");
67 testGridDefinitionsValues(document.getElementById("gridWithAutoWithChildrenE lement"), "first 77px", "22px last"); 92 testGridDefinitionsValues(document.getElementById("gridWithAutoWithChildrenE lement"), "first 77px", "22px last");
68 testGridDefinitionsValues(document.getElementById("gridWithMinMax"), "first 80px", "300px last"); 93 testGridDefinitionsValues(document.getElementById("gridWithMinMax"), "first 80px", "300px last");
69 testGridDefinitionsValues(document.getElementById("gridWithFixedMultiple"), "first nav 10px last", "first nav 15px last"); 94 testGridDefinitionsValues(document.getElementById("gridWithFixedMultiple"), "first nav 10px last", "first nav 15px last");
70 testGridDefinitionsValues(document.getElementById("gridWithPercentageSameStr ingMultipleTimes"), "first nav 80px nav 120px last", "first nav2 150px nav2 450p x last"); 95 testGridDefinitionsValues(document.getElementById("gridWithPercentageSameStr ingMultipleTimes"), "first nav 80px nav 120px last", "first nav2 150px nav2 450p x last");
96 testGridDefinitionsValues(document.getElementById("gridWithRepeatElement"), "first 10px nav nav2 400px nav nav2 400px", "100px nav nav2 150px nav nav2 150px last");
71 97
72 debug(""); 98 debug("");
73 debug("Test getting and setting grid-definition-columns and grid-definition- rows through JS"); 99 debug("Test getting and setting grid-definition-columns and grid-definition- rows through JS");
74 testGridDefinitionsSetJSValues("'first' 18px", "66px 'last'", "first 18px", "66px last", "first 18px", "66px last"); 100 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
75 testGridDefinitionsSetJSValues("'first' 55%", "40% 'last'", "first 440px", " 240px last", "first 55%", "40% last"); 101 testGridDefinitionsSetJSValues("(first) 55%", "40% (last)", "first 440px", " 240px last", "first 55%", "40% last");
76 testGridDefinitionsSetJSValues("'first' auto", "auto 'last'", "first 0px", " 0px last", "first auto", "auto last"); 102 testGridDefinitionsSetJSValues("(first) auto", "auto (last)", "first 0px", " 0px last", "first auto", "auto last");
77 testGridDefinitionsSetJSValues("'first' min-content", "min-content 'last'", "first 0px", "0px last", "first min-content", "min-content last"); 103 testGridDefinitionsSetJSValues("(first) min-content", "min-content (last)", "first 0px", "0px last", "first min-content", "min-content last");
78 testGridDefinitionsSetJSValues("'first' max-content", "max-content 'last'", "first 0px", "0px last", "first max-content", "max-content last"); 104 testGridDefinitionsSetJSValues("(first) max-content", "max-content (last)", "first 0px", "0px last", "first max-content", "max-content last");
79 testGridDefinitionsSetJSValues("'first' minmax(55%, 45px)", "minmax(30px, 40 %) 'last'", "first 440px", "240px last", "first minmax(55%, 45px)", "minmax(30px , 40%) last"); 105 testGridDefinitionsSetJSValues("(first) minmax(55%, 45px)", "minmax(30px, 40 %) (last)", "first 440px", "240px last", "first minmax(55%, 45px)", "minmax(30px , 40%) last");
80 testGridDefinitionsSetJSValues("'first' minmax(22em, max-content)", "minmax( max-content, 5em) 'last'", "first 220px", "50px last", "first minmax(22em, max-c ontent)", "minmax(max-content, 5em) last"); 106 testGridDefinitionsSetJSValues("(first) minmax(22em, max-content)", "minmax( max-content, 5em) (last)", "first 220px", "50px last", "first minmax(22em, max-c ontent)", "minmax(max-content, 5em) last");
81 testGridDefinitionsSetJSValues("'first' minmax(22em, min-content)", "minmax( min-content, 5em) 'last'", "first 220px", "50px last", "first minmax(22em, min-c ontent)", "minmax(min-content, 5em) last"); 107 testGridDefinitionsSetJSValues("(first) minmax(22em, min-content)", "minmax( min-content, 5em) (last)", "first 220px", "50px last", "first minmax(22em, min-c ontent)", "minmax(min-content, 5em) last");
82 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"); 108 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");
83 testGridDefinitionsSetJSValues("'first' 'nav' minmax(min-content, max-conten t) 'last'", "'first' 'nav' minmax(max-content, min-content) 'last'", "first nav 0px last", "first nav 0px last", "first nav minmax(min-content, max-content) las t", "first nav minmax(max-content, min-content) last"); 109 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");
84 testGridDefinitionsSetJSValues("'first' 'nav' minmax(min-content, max-conten t) 'nav' auto 'last'", "'first' 'nav2' minmax(max-content, min-content) 'nav2' m inmax(10px, 15px) 'last'", "first nav 0px nav 0px last", "first nav2 0px nav2 15 px last", "first nav minmax(min-content, max-content) nav auto last", "first nav 2 minmax(max-content, min-content) nav2 minmax(10px, 15px) last"); 110 testGridDefinitionsSetJSValues("(first nav) minmax(min-content, max-content) (nav) auto (last)", "(first nav2) minmax(max-content, min-content) (nav2) minma x(10px, 15px) (last)", "first nav 0px nav 0px last", "first nav2 0px nav2 15px l ast", "first nav minmax(min-content, max-content) nav auto last", "first nav2 mi nmax(max-content, min-content) nav2 minmax(10px, 15px) last");
85 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"); 111 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");
112 testGridDefinitionsSetJSValues("(first) auto repeat(2, (foo bar) 20px)", "22 0px (foo) repeat(1, 50% (baz)", "first 0px foo bar 20px foo bar 20px", "220px fo o 300px baz", "first auto foo bar 20px foo bar 20px", "220px foo 50% baz");
113
114 debug("");
115 debug("Test getting invalid grid-definition-columns and grid-definition-rows set through CSS");
116 testGridDefinitionsValues(document.getElementById("gridWithoutParenthesesEle ment"), "none", "none");
117 testGridDefinitionsValues(document.getElementById("gridWithInvalidNestedPare nthesesElement"), "none", "none");
118 testGridDefinitionsValues(document.getElementById("gridWithUnbalancedParenth esesElement"), "none", "none");
119 testGridDefinitionsValues(document.getElementById("gridWithMisplacedParenthe sesElement"), "none", "none");
86 120
87 debug(""); 121 debug("");
88 debug("Test getting and setting invalid grid-definition-columns and grid-def inition-rows through JS"); 122 debug("Test getting and setting invalid grid-definition-columns and grid-def inition-rows through JS");
89 element = document.createElement("div"); 123 testGridDefinitionsSetBadJSValues("(foo)", "(bar");
90 document.body.appendChild(element); 124 testGridDefinitionsSetBadJSValues("(foo bar)", "(bar foo)");
91 element.style.display = "grid"; 125 testGridDefinitionsSetBadJSValues("foo bar 10px", "50% baz bar foo 2em");
92 element.style.gridDefinitionColumns = "'foo'"; 126 testGridDefinitionsSetBadJSValues("(foo (bar)) 10px", "50% ((baz bar) foo) 2 em");
93 element.style.gridDefinitionRows = "'bar"; 127 testGridDefinitionsSetBadJSValues("(foo bar 10px", "50% (baz bar) foo) 2em") ;
94 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid- definition-columns')", "none"); 128 testGridDefinitionsSetBadJSValues("(foo 10px) 2em", "(50% bar) (foo)");
95 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid- definition-rows')", "none");
96
97 element = document.createElement("div");
98 document.body.appendChild(element);
99 element.style.display = "grid";
100 element.style.gridDefinitionColumns = "'foo' 'bar'";
101 element.style.gridDefinitionRows = "'bar' 'foo'";
102 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid- definition-columns')", "none");
103 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid- definition-rows')", "none");
104 </script> 129 </script>
105 </body> 130 </body>
106 </html> 131 </html>
OLDNEW
« 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