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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/fast/css-grid-layout/named-grid-line-get-set.html

Issue 1168453002: [CSSGridLayout] Switch from parentheses to brackets for grid line names (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Patch for landing v2 Created 5 years, 6 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 unified diff | Download patch
« no previous file with comments | « LayoutTests/fast/css-grid-layout/grid-template-shorthand-get-set-expected.txt ('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 <link href="resources/grid.css" rel="stylesheet"> 4 <link href="resources/grid.css" rel="stylesheet">
5 <style> 5 <style>
6 .grid { 6 .grid {
7 /* Give an explicit size to the grid so that percentage grid tracks have a c onsistent resolution */ 7 /* Give an explicit size to the grid so that percentage grid tracks have a c onsistent resolution */
8 width: 800px; 8 width: 800px;
9 height: 600px; 9 height: 600px;
10 } 10 }
11 .gridItem { 11 .gridItem {
12 grid-column: 1; 12 grid-column: 1;
13 grid-row: 1; 13 grid-row: 1;
14 height: 22px; 14 height: 22px;
15 width: 77px; 15 width: 77px;
16 } 16 }
17 .gridWithFixed { 17 .gridWithFixed {
18 grid-template-columns: (first) 10px; 18 grid-template-columns: [first] 10px;
19 grid-template-rows: (first) 15px; 19 grid-template-rows: [first] 15px;
20 } 20 }
21 .gridWithPercent { 21 .gridWithPercent {
22 grid-template-columns: 53% (last); 22 grid-template-columns: 53% [last];
23 grid-template-rows: 27% (last); 23 grid-template-rows: 27% [last];
24 } 24 }
25 .gridWithAuto { 25 .gridWithAuto {
26 grid-template-columns: (first) auto; 26 grid-template-columns: [first] auto;
27 grid-template-rows: auto (last); 27 grid-template-rows: auto [last];
28 } 28 }
29 .gridWithMinMax { 29 .gridWithMinMax {
30 grid-template-columns: (first) minmax(10%, 15px); 30 grid-template-columns: [first] minmax(10%, 15px);
31 grid-template-rows: minmax(20px, 50%) (last); 31 grid-template-rows: minmax(20px, 50%) [last];
32 } 32 }
33 .gridWithFixedMultiple { 33 .gridWithFixedMultiple {
34 grid-template-columns: (first nav) 10px (last); 34 grid-template-columns: [first nav] 10px [last];
35 grid-template-rows: (first nav) 15px (last); 35 grid-template-rows: [first nav] 15px [last];
36 } 36 }
37 .gridWithPercentageSameStringMultipleTimes { 37 .gridWithPercentageSameStringMultipleTimes {
38 grid-template-columns: (first nav) 10% (nav) 15% (last); 38 grid-template-columns: [first nav] 10% [nav] 15% [last];
39 grid-template-rows: (first nav2) 25% (nav2) 75% (last); 39 grid-template-rows: [first nav2] 25% [nav2] 75% [last];
40 } 40 }
41 .gridWithRepeat { 41 .gridWithRepeat {
42 grid-template-columns: (first) 10px repeat(2, (nav nav2) 50%); 42 grid-template-columns: [first] 10px repeat(2, [nav nav2] 50%);
43 grid-template-rows: 100px repeat(2, (nav nav2) 25%) (last); 43 grid-template-rows: 100px repeat(2, [nav nav2] 25%) [last];
44 } 44 }
45 .gridWithEmptyParentheses { 45 .gridWithEmptyBrackets {
46 grid-template-columns: () 10px; 46 grid-template-columns: [] 10px;
47 grid-template-rows: 20px ( ) 50px (); 47 grid-template-rows: 20px [ ] 50px [];
48 } 48 }
49 .gridWithoutParentheses { 49 .gridWithoutBrackets {
50 grid-template-columns: first nav 10px; 50 grid-template-columns: first nav 10px;
51 grid-template-rows: first 50% last; 51 grid-template-rows: first 50% last;
52 } 52 }
53 .gridWithInvalidNestedParentheses { 53 .gridWithInvalidNestedBrackets {
54 grid-template-columns: (first (nav)) 10px (last); 54 grid-template-columns: [first [nav]] 10px [last];
55 grid-template-rows: (first) 50% (last (nav) nav2); 55 grid-template-rows: [first] 50% [last [nav] nav2];
56 } 56 }
57 .gridWithUnbalancedParentheses { 57 .gridWithUnbalancedBrackets {
58 grid-template-columns: (first nav 10px; 58 grid-template-columns: [first nav 10px;
59 grid-template-rows: (first) 50% last); 59 grid-template-rows: [first] 50% last];
60 } 60 }
61 .gridWithMisplacedParentheses { 61 .gridWithMisplacedBrackets {
62 grid-template-columns: (first 10px) 50%; 62 grid-template-columns: [first 10px] 50%;
63 grid-template-rows: (first) (nav 50%); 63 grid-template-rows: [first] [nav 50%];
64 } 64 }
65 .gridWithContiguousParentheses { 65 .gridWithContiguousBrackets {
66 grid-template-columns: (first) (nav) 10px; 66 grid-template-columns: [first] [nav] 10px;
67 grid-template-rows: 50px (nav nav2) (middle) 10px; 67 grid-template-rows: 50px [nav nav2] [middle] 10px;
68 }
69 .gridWithInvalidCustomIdents {
70 grid-template-columns: [first span] 10px;
71 grid-template-rows: 50px [inherit] 10px;
68 } 72 }
69 </style> 73 </style>
70 <script src="../../resources/js-test.js"></script> 74 <script src="../../resources/js-test.js"></script>
71 </head> 75 </head>
72 <body> 76 <body>
73 <div class="grid gridWithFixed" id="gridWithFixedElement"></div> 77 <div class="grid gridWithFixed" id="gridWithFixedElement"></div>
74 <div class="grid gridWithPercent" id="gridWithPercentElement"></div> 78 <div class="grid gridWithPercent" id="gridWithPercentElement"></div>
75 <div class="indefiniteSizeGrid gridWithPercent" id="gridWithPercentWithoutSize"> </div> 79 <div class="indefiniteSizeGrid gridWithPercent" id="gridWithPercentWithoutSize"> </div>
76 <div class="indefiniteSizeGrid gridWithPercent" id="gridWithPercentWithoutSizeWi thChildren"> 80 <div class="indefiniteSizeGrid gridWithPercent" id="gridWithPercentWithoutSizeWi thChildren">
77 <div class="gridItem"></div> 81 <div class="gridItem"></div>
78 </div> 82 </div>
79 <div class="grid gridWithAuto" id="gridWithAutoElement"></div> 83 <div class="grid gridWithAuto" id="gridWithAutoElement"></div>
80 <div class="grid gridWithAuto" id="gridWithAutoWithChildrenElement"> 84 <div class="grid gridWithAuto" id="gridWithAutoWithChildrenElement">
81 <div class="gridItem"></div> 85 <div class="gridItem"></div>
82 </div> 86 </div>
83 <div class="grid gridWithMinMax" id="gridWithMinMax"></div> 87 <div class="grid gridWithMinMax" id="gridWithMinMax"></div>
84 <div class="grid gridWithFixedMultiple" id="gridWithFixedMultiple"></div> 88 <div class="grid gridWithFixedMultiple" id="gridWithFixedMultiple"></div>
85 <div class="grid gridWithPercentageSameStringMultipleTimes" id="gridWithPercenta geSameStringMultipleTimes"></div> 89 <div class="grid gridWithPercentageSameStringMultipleTimes" id="gridWithPercenta geSameStringMultipleTimes"></div>
86 <div class="grid gridWithRepeat" id="gridWithRepeatElement"></div> 90 <div class="grid gridWithRepeat" id="gridWithRepeatElement"></div>
87 <div class="grid gridWithEmptyParentheses" id="gridWithEmptyParentheses"></div> 91 <div class="grid gridWithEmptyBrackets" id="gridWithEmptyBrackets"></div>
88 <div class="grid gridWithoutParentheses" id="gridWithoutParentheses"></div> 92 <div class="grid gridWithoutBrackets" id="gridWithoutBrackets"></div>
89 <div class="grid gridWithInvalidNestedParentheses" id="gridWithInvalidNestedPare ntheses"></div> 93 <div class="grid gridWithInvalidNestedBrackets" id="gridWithInvalidNestedBracket s"></div>
90 <div class="grid gridWithUnbalancedParentheses" id="gridWithUnbalancedParenthese s"></div> 94 <div class="grid gridWithUnbalancedBrackets" id="gridWithUnbalancedBrackets"></d iv>
91 <div class="grid gridWithMisplacedParentheses" id="gridWithMisplacedParentheses" ></div> 95 <div class="grid gridWithMisplacedBrackets" id="gridWithMisplacedBrackets"></div >
92 <div class="grid gridWithContiguousParentheses" id="gridWithContiguousParenthese s"></div> 96 <div class="grid gridWithContiguousBrackets" id="gridWithContiguousBrackets"></d iv>
97 <div class="grid gridWithInvalidCustomIdents" id="gridWithInvalidCustomIdents">< /div>
93 98
94 <script src="resources/grid-definitions-parsing-utils.js"></script> 99 <script src="resources/grid-definitions-parsing-utils.js"></script>
95 <script> 100 <script>
96 description('Test that setting and getting grid-template-columns and grid-te mplate-rows works as expected'); 101 description('Test that setting and getting grid-template-columns and grid-te mplate-rows works as expected');
97 102
98 debug("Test getting grid-template-columns and grid-template-rows set through CSS"); 103 debug("Test getting grid-template-columns and grid-template-rows set through CSS");
99 testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), " (first) 10px", "(first) 15px"); 104 testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), " [first] 10px", "[first] 15px");
100 testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "424px (last)", "162px (last)"); 105 testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "424px [last]", "162px [last]");
101 testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSiz e"), "0px (last)", "0px (last)"); 106 testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSiz e"), "0px [last]", "0px [last]");
102 testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSiz eWithChildren"), "77px (last)", "22px (last)"); 107 testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSiz eWithChildren"), "77px [last]", "22px [last]");
103 testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "( first) 0px", "0px (last)"); 108 testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "[ first] 0px", "0px [last]");
104 testGridDefinitionsValues(document.getElementById("gridWithAutoWithChildrenE lement"), "(first) 77px", "22px (last)"); 109 testGridDefinitionsValues(document.getElementById("gridWithAutoWithChildrenE lement"), "[first] 77px", "22px [last]");
105 testGridDefinitionsValues(document.getElementById("gridWithMinMax"), "(first ) 80px", "300px (last)"); 110 testGridDefinitionsValues(document.getElementById("gridWithMinMax"), "[first ] 80px", "300px [last]");
106 testGridDefinitionsValues(document.getElementById("gridWithFixedMultiple"), "(first nav) 10px (last)", "(first nav) 15px (last)"); 111 testGridDefinitionsValues(document.getElementById("gridWithFixedMultiple"), "[first nav] 10px [last]", "[first nav] 15px [last]");
107 testGridDefinitionsValues(document.getElementById("gridWithPercentageSameStr ingMultipleTimes"), "(first nav) 80px (nav) 120px (last)", "(first nav2) 150px ( nav2) 450px (last)"); 112 testGridDefinitionsValues(document.getElementById("gridWithPercentageSameStr ingMultipleTimes"), "[first nav] 80px [nav] 120px [last]", "[first nav2] 150px [ nav2] 450px [last]");
108 testGridDefinitionsValues(document.getElementById("gridWithRepeatElement"), "(first) 10px (nav nav2) 400px (nav nav2) 400px", "100px (nav nav2) 150px (nav n av2) 150px (last)"); 113 testGridDefinitionsValues(document.getElementById("gridWithRepeatElement"), "[first] 10px [nav nav2] 400px [nav nav2] 400px", "100px [nav nav2] 150px [nav n av2] 150px [last]");
109 testGridDefinitionsValues(document.getElementById("gridWithEmptyParentheses" ), "10px", "20px 50px"); 114 testGridDefinitionsValues(document.getElementById("gridWithEmptyBrackets"), "10px", "20px 50px");
110 115
111 debug(""); 116 debug("");
112 debug("Test getting and setting grid-template-columns and grid-template-rows through JS"); 117 debug("Test getting and setting grid-template-columns and grid-template-rows through JS");
113 testGridDefinitionsSetJSValues("(first) 18px", "66px (last)", "(first) 18px" , "66px (last)", "(first) 18px", "66px (last)"); 118 testGridDefinitionsSetJSValues("[first] 18px", "66px [last]", "[first] 18px" , "66px [last]", "[first] 18px", "66px [last]");
114 testGridDefinitionsSetJSValues("(first) 55%", "40% (last)", "(first) 440px", "240px (last)", "(first) 55%", "40% (last)"); 119 testGridDefinitionsSetJSValues("[first] 55%", "40% [last]", "[first] 440px", "240px [last]", "[first] 55%", "40% [last]");
115 testGridDefinitionsSetJSValues("(first) auto", "auto (last)", "(first) 0px", "0px (last)", "(first) auto", "auto (last)"); 120 testGridDefinitionsSetJSValues("[first] auto", "auto [last]", "[first] 0px", "0px [last]", "[first] auto", "auto [last]");
116 testGridDefinitionsSetJSValues("(first) min-content", "min-content (last)", "(first) 0px", "0px (last)", "(first) min-content", "min-content (last)"); 121 testGridDefinitionsSetJSValues("[first] min-content", "min-content [last]", "[first] 0px", "0px [last]", "[first] min-content", "min-content [last]");
117 testGridDefinitionsSetJSValues("(first) max-content", "max-content (last)", "(first) 0px", "0px (last)", "(first) max-content", "max-content (last)"); 122 testGridDefinitionsSetJSValues("[first] max-content", "max-content [last]", "[first] 0px", "0px [last]", "[first] max-content", "max-content [last]");
118 testGridDefinitionsSetJSValues("(first) minmax(55%, 45px)", "minmax(30px, 40 %) (last)", "(first) 440px", "240px (last)", "(first) minmax(55%, 45px)", "minma x(30px, 40%) (last)"); 123 testGridDefinitionsSetJSValues("[first] minmax(55%, 45px)", "minmax(30px, 40 %) [last]", "[first] 440px", "240px [last]", "[first] minmax(55%, 45px)", "minma x(30px, 40%) [last]");
119 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)"); 124 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]");
120 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)"); 125 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]");
121 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)"); 126 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]");
122 testGridDefinitionsSetJSValues("(first nav) minmax(min-content, max-content) (last)", "(first nav) minmax(max-content, min-content) (last)", "(first nav) 0p x (last)", "(first nav) 0px (last)", "(first nav) minmax(min-content, max-conten t) (last)", "(first nav) minmax(max-content, min-content) (last)"); 127 testGridDefinitionsSetJSValues("[first nav] minmax(min-content, max-content) [last]", "[first nav] minmax(max-content, min-content) [last]", "[first nav] 0p x [last]", "[first nav] 0px [last]", "[first nav] minmax(min-content, max-conten t) [last]", "[first nav] minmax(max-content, min-content) [last]");
123 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 (na v2) 15px (last)", "(first nav) minmax(min-content, max-content) (nav) auto (last )", "(first nav2) minmax(max-content, min-content) (nav2) minmax(10px, 15px) (la st)"); 128 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 [na v2] 15px [last]", "[first nav] minmax(min-content, max-content) [nav] auto [last ]", "[first nav2] minmax(max-content, min-content) [nav2] minmax(10px, 15px) [la st]");
124 testGridDefinitionsSetJSValues("(foo bar) auto (foo) auto (bar)", "(foo bar) auto (foo) auto (bar)", "(foo bar) 0px (foo) 0px (bar)", "(foo bar) 0px (foo) 0 px (bar)", "(foo bar) auto (foo) auto (bar)", "(foo bar) auto (foo) auto (bar)") ; 129 testGridDefinitionsSetJSValues("[foo bar] auto [foo] auto [bar]", "[foo bar] auto [foo] auto [bar]", "[foo bar] 0px [foo] 0px [bar]", "[foo bar] 0px [foo] 0 px [bar]", "[foo bar] auto [foo] auto [bar]", "[foo bar] auto [foo] auto [bar]") ;
125 testGridDefinitionsSetJSValues("(first) auto repeat(2, (foo bar) 20px)", "22 0px (foo) repeat(1, 50% (baz)", "(first) 0px (foo bar) 20px (foo bar) 20px", "22 0px (foo) 300px (baz)", "(first) auto (foo bar) 20px (foo bar) 20px", "220px (fo o) 50% (baz)"); 130 testGridDefinitionsSetJSValues("[first] auto repeat(2, [foo bar] 20px)", "22 0px [foo] repeat(1, 50% [baz]", "[first] 0px [foo bar] 20px [foo bar] 20px", "22 0px [foo] 300px [baz]", "[first] auto [foo bar] 20px [foo bar] 20px", "220px [fo o] 50% [baz]");
126 131
127 debug(""); 132 debug("");
128 debug("Test getting invalid grid-template-columns and grid-template-rows set through CSS"); 133 debug("Test getting invalid grid-template-columns and grid-template-rows set through CSS");
129 testGridDefinitionsValues(document.getElementById("gridWithoutParentheses"), "none", "none"); 134 testGridDefinitionsValues(document.getElementById("gridWithoutBrackets"), "n one", "none");
130 testGridDefinitionsValues(document.getElementById("gridWithInvalidNestedPare ntheses"), "none", "none"); 135 testGridDefinitionsValues(document.getElementById("gridWithInvalidNestedBrac kets"), "none", "none");
131 testGridDefinitionsValues(document.getElementById("gridWithUnbalancedParenth eses"), "none", "none"); 136 testGridDefinitionsValues(document.getElementById("gridWithUnbalancedBracket s"), "none", "none");
132 testGridDefinitionsValues(document.getElementById("gridWithMisplacedParenthe ses"), "none", "none"); 137 testGridDefinitionsValues(document.getElementById("gridWithMisplacedBrackets "), "none", "none");
133 testGridDefinitionsValues(document.getElementById("gridWithContiguousParenth eses"), "none", "none"); 138 testGridDefinitionsValues(document.getElementById("gridWithContiguousBracket s"), "none", "none");
139 testGridDefinitionsValues(document.getElementById("gridWithInvalidCustomIden ts"), "none", "none");
134 140
135 debug(""); 141 debug("");
136 debug("Test getting and setting invalid grid-template-columns and grid-templ ate-rows through JS"); 142 debug("Test getting and setting invalid grid-template-columns and grid-templ ate-rows through JS");
137 testGridDefinitionsSetBadJSValues("(foo)", "(bar"); 143 testGridDefinitionsSetBadJSValues("[foo]", "[bar");
138 testGridDefinitionsSetBadJSValues("(foo bar)", "(bar foo)"); 144 testGridDefinitionsSetBadJSValues("[foo bar]", "[bar foo]");
139 testGridDefinitionsSetBadJSValues("foo bar 10px", "50% baz bar foo 2em"); 145 testGridDefinitionsSetBadJSValues("foo bar 10px", "50% baz bar foo 2em");
140 testGridDefinitionsSetBadJSValues("(foo (bar)) 10px", "50% ((baz bar) foo) 2 em"); 146 testGridDefinitionsSetBadJSValues("[foo [bar]] 10px", "50% [[baz bar] foo] 2 em");
141 testGridDefinitionsSetBadJSValues("(foo bar 10px", "50% (baz bar) foo) 2em") ; 147 testGridDefinitionsSetBadJSValues("[foo bar 10px", "50% [baz bar] foo] 2em") ;
142 testGridDefinitionsSetBadJSValues("(foo 10px) 2em", "(50% bar) (foo)"); 148 testGridDefinitionsSetBadJSValues("[foo 10px] 2em", "[50% bar] [foo]");
149 testGridDefinitionsSetBadJSValues("[auto] 2em", "50% [bar initial]");
143 </script> 150 </script>
144 </body> 151 </body>
145 </html> 152 </html>
OLDNEW
« no previous file with comments | « LayoutTests/fast/css-grid-layout/grid-template-shorthand-get-set-expected.txt ('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