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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-template-shorthand-get-set.html

Issue 1702013003: [css-grid] Swap columns and rows in grid-template shorthand (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Swap columns and rows in tests under fast/repaint/ Created 4 years, 10 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 | « third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-shorthand-get-set.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/implicit-tracks-before-explicit.html » ('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 PUBLIC "-//IETF//DTD HTML//EN"> 1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
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 #gridTemplateWithNone { 6 #gridTemplateWithNone {
7 grid-template: none; 7 grid-template: none;
8 } 8 }
9 #gridTemplateSimpleForm { 9 #gridTemplateSimpleForm {
10 grid-template: 10px / 15px; 10 grid-template: 15px / 10px;
11 } 11 }
12 #gridTemplateSimpleFormWithNoneColumns { 12 #gridTemplateSimpleFormWithNoneColumns {
13 grid-template: none / 15px; 13 grid-template: 15px / none;
14 } 14 }
15 #gridTemplateSimpleFormWithNoneRows { 15 #gridTemplateSimpleFormWithNoneRows {
16 grid-template: 10px / none; 16 grid-template: none / 10px;
17 } 17 }
18 #gridTemplateSimpleFormWithNone { 18 #gridTemplateSimpleFormWithNone {
19 grid-template: none / none; 19 grid-template: none / none;
20 } 20 }
21 #gridTemplateComplexForm { 21 #gridTemplateComplexForm {
22 grid-template: 10px / "a" 15px; 22 grid-template: "a" 15px / 10px;
23 } 23 }
24 #gridTemplateComplexFormWithLineNames { 24 #gridTemplateComplexFormWithLineNames {
25 grid-template: 10px / [head] "a" 15px [tail]; 25 grid-template: [head] "a" 15px [tail] / 10px;
26 } 26 }
27 #gridTemplateComplexFormWithLineNamesMultipleColumns { 27 #gridTemplateComplexFormWithLineNamesMultipleColumns {
28 grid-template: 10px / [head] "a b" 15px [tail] 28 grid-template: [head] "a b" 15px [tail] / 10px;
29 } 29 }
30 #gridTemplateComplexFormWithLineNamesMultipleRows { 30 #gridTemplateComplexFormWithLineNamesMultipleRows {
31 grid-template: 10px / [head1] "a" 15px [tail1] 31 grid-template: [head1] "a" 15px [tail1]
32 [head2] "b" 20px [tail2]; 32 [head2] "b" 20px [tail2] / 10px;
33 } 33 }
34 #gridTemplateComplexFormWithLineNamesMultipleRowsAndColumns { 34 #gridTemplateComplexFormWithLineNamesMultipleRowsAndColumns {
35 grid-template: [first] 10px repeat(2, [nav nav2] 15px) / "a b c" 100px [nav] 35 grid-template: "a b c" 100px [nav]
36 [nav2] "d e f" 25px [nav] 36 [nav2] "d e f" 25px [nav]
37 [nav2] "g h i" 25px [last]; 37 [nav2] "g h i" 25px [last] / [first] 10px repeat(2, [nav nav 2] 15px);
38 } 38 }
39 #gridTemplateComplexFormWithAuto { 39 #gridTemplateComplexFormWithAuto {
40 grid-template: 10px / "a"; 40 grid-template: "a" / 10px;
41 } 41 }
42 #gridTemplateComplexFormOnlyAreas { 42 #gridTemplateComplexFormOnlyAreas {
43 grid-template: "a"; 43 grid-template: "a";
44 } 44 }
45 #gridTemplateNoColumnsRowWithEmptyTrailingLineNames { 45 #gridTemplateNoColumnsRowWithEmptyTrailingLineNames {
46 grid-template: [first] "a" auto []; 46 grid-template: [first] "a" auto [];
47 } 47 }
48 #gridTemplateConsecutiveAreas { 48 #gridTemplateConsecutiveAreas {
49 grid-template: 10px / "a" 49 grid-template: "a"
50 "a"; 50 "a" / 10px;
51 } 51 }
52 52
53 /* Bad values. */ 53 /* Bad values. */
54 54
55 #gridTemplateMultipleSlash { 55 #gridTemplateMultipleSlash {
56 grid-template: 10px / 20px / 30px; 56 grid-template: 10px / 20px / 30px;
57 } 57 }
58 #gridTemplateSimpleFormJustColumns { 58 #gridTemplateSimpleFormJustColumns {
59 grid-template: 10px; 59 grid-template: 10px;
60 } 60 }
61 #gridTemplateSimpleFormNoRows { 61 #gridTemplateSimpleFormNoRows {
62 grid-template: / 10px;
63 }
64 #gridTemplateSimpleFormNoColumns {
62 grid-template: 10px /; 65 grid-template: 10px /;
63 } 66 }
64 #gridTemplateSimpleFormNoColumns {
65 grid-template: / 10px;
66 }
67 #gridTemplateSimpleFormNoColumnSize { 67 #gridTemplateSimpleFormNoColumnSize {
68 grid-template: [line] / 10px; 68 grid-template: 10px / [line];
69 } 69 }
70 #gridTemplateSimpleFormWithFitContent { 70 #gridTemplateSimpleFormWithFitContent {
71 grid-template: -webkit-fit-content / 10px; 71 grid-template: -webkit-fit-content / 10px;
72 } 72 }
73 #gridTemplateSimpleFormWithWrongRepeat { 73 #gridTemplateSimpleFormWithWrongRepeat {
74 grid-template: repeat(2, 50% [title] a) / 10px; 74 grid-template: repeat(2, 50% [title] a) / 10px;
75 } 75 }
76 #gridTemplateSimpleFormWithMisplacedNone1 { 76 #gridTemplateSimpleFormWithMisplacedNone1 {
77 grid-template: 10px / none 20px; 77 grid-template: 10px / none 20px;
78 } 78 }
79 #gridTemplateSimpleFormWithMisplacedNone2 { 79 #gridTemplateSimpleFormWithMisplacedNone2 {
80 grid-template: 10px / 20px none; 80 grid-template: 10px / 20px none;
81 } 81 }
82 #gridTemplateSimpleFormWithMisplacedNone3 { 82 #gridTemplateSimpleFormWithMisplacedNone3 {
83 grid-template: none 10px / 20px; 83 grid-template: none 10px / 20px;
84 } 84 }
85 #gridTemplateSimpleFormWithMisplacedNone4 { 85 #gridTemplateSimpleFormWithMisplacedNone4 {
86 grid-template: 10px none / 20px; 86 grid-template: 10px none / 20px;
87 } 87 }
88 #gridTemplateComplexFormWithRepeat { 88 #gridTemplateComplexFormWithRepeat {
89 grid-template: 10px / "a" repeat(2, 50% [title]); 89 grid-template: "a" repeat(2, 50% [title]) / 10px;
90 } 90 }
91 #gridTemplateComplexFormWithWrongRepeat { 91 #gridTemplateComplexFormWithWrongRepeat {
92 grid-template: repeat(2, 50% [title] a) / "a"; 92 grid-template: "a" / repeat(2, 50% [title] a);
93 } 93 }
94 #griTemplateComplexFormdWithFitAvailable { 94 #griTemplateComplexFormdWithFitAvailable {
95 grid-template: -webkit-fit-available / "a"; 95 grid-template: "a" / -webkit-fit-available;
96 } 96 }
97 #gridTemplateComplexFormNoColumnSize { 97 #gridTemplateComplexFormNoColumnSize {
98 grid-template: [line] / "a"; 98 grid-template: "a" / [line];
99 } 99 }
100 #gridTemplateComplexFormMisplacedRowsSize1 { 100 #gridTemplateComplexFormMisplacedRowsSize1 {
101 grid-template: 25px / 10px "a"; 101 grid-template: 10px "a" / 25px;
102 } 102 }
103 #gridTemplateComplexFormMisplacedRowsSize2 { 103 #gridTemplateComplexFormMisplacedRowsSize2 {
104 grid-template: 25px / "a" [name] 10px; 104 grid-template: "a" [name] 10px / 25px;
105 } 105 }
106 #gridTemplateComplexFormColumnsNotParsing1 { 106 #gridTemplateComplexFormColumnsNotParsing1 {
107 grid-template: a / "a" [name] 10px; 107 grid-template: "a" [name] 10px / a;
108 } 108 }
109 #gridTemplateComplexFormColumnsNotParsing2 { 109 #gridTemplateComplexFormColumnsNotParsing2 {
110 grid-template: "B" / "a" [name] 10px; 110 grid-template: "a" [name] 10px / "B";
111 } 111 }
112 #gridTemplateComplexFormWithNoneColumns { 112 #gridTemplateComplexFormWithNoneColumns {
113 grid-template: none / "a" [name] 10px; 113 grid-template: "a" [name] 10px / none;
114 } 114 }
115 #gridTemplateNoColumnsRowWithTwoEmptyTrailingLineNames { 115 #gridTemplateNoColumnsRowWithTwoEmptyTrailingLineNames {
116 grid-template: [first] "a" auto [] []; 116 grid-template: [first] "a" auto [] [];
117 } 117 }
118 #gridTemplateNoColumnsRowWithEmptyTrailingLineNamesAndNonEmptyLeadingLineNames { 118 #gridTemplateNoColumnsRowWithEmptyTrailingLineNamesAndNonEmptyLeadingLineNames {
119 grid-template: [first] "a" auto [] [tail]; 119 grid-template: [first] "a" auto [] [tail];
120 } 120 }
121 121
122 </style> 122 </style>
123 <script src="../../resources/js-test.js"></script> 123 <script src="../../resources/js-test.js"></script>
(...skipping 85 matching lines...) Expand 10 before | Expand all | Expand 10 after
209 debug("Test the initial value"); 209 debug("Test the initial value");
210 var element = document.createElement("div"); 210 var element = document.createElement("div");
211 document.body.appendChild(element); 211 document.body.appendChild(element);
212 testGridDefinitionsValues(element, "none", "none", "none"); 212 testGridDefinitionsValues(element, "none", "none", "none");
213 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-colu mns')", "'none'"); 213 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-colu mns')", "'none'");
214 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows ')", "'none'"); 214 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows ')", "'none'");
215 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-area s')", "'none'"); 215 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-area s')", "'none'");
216 216
217 debug(""); 217 debug("");
218 debug("Test setting grid-template-columns and grid-template-rows back to 'no ne' through JS"); 218 debug("Test setting grid-template-columns and grid-template-rows back to 'no ne' through JS");
219 testGridDefinitionsSetJSValues("10px / [line] 'a' 20px", "10px", "[line] 20p x", "\"a\""); 219 testGridDefinitionsSetJSValues("[line] 'a' 20px / 10px", "10px", "[line] 20p x", "\"a\"");
220 testGridDefinitionsSetJSValues("none", "none", "none", "none"); 220 testGridDefinitionsSetJSValues("none", "none", "none", "none");
221 221
222 debug(""); 222 debug("");
223 debug("Test getting and setting grid-template shorthand through JS"); 223 debug("Test getting and setting grid-template shorthand through JS");
224 testGridDefinitionsSetJSValues("18px / 66px", "18px", "66px", "none"); 224 testGridDefinitionsSetJSValues("66px / 18px", "18px", "66px", "none");
225 testGridDefinitionsSetJSValues("10px / [head] 'a' 15px [tail]", "10px", "[he ad] 15px [tail]", "\"a\""); 225 testGridDefinitionsSetJSValues("[head] 'a' 15px [tail] / 10px", "10px", "[he ad] 15px [tail]", "\"a\"");
226 testGridDefinitionsSetJSValues("'a'", "none", "0px", "\"a\"", "none", "auto" ); 226 testGridDefinitionsSetJSValues("'a'", "none", "0px", "\"a\"", "none", "auto" );
227 227
228 debug(""); 228 debug("");
229 debug("Test setting grid-template shorthand to bad values through JS"); 229 debug("Test setting grid-template shorthand to bad values through JS");
230 testGridDefinitionsSetBadJSValues("none / 'a'"); 230 testGridDefinitionsSetBadJSValues("'a' / none");
231 testGridDefinitionsSetBadJSValues("25px / 'a' [name] 10px"); 231 testGridDefinitionsSetBadJSValues("'a' [name] 10px / 25px");
232 testGridDefinitionsSetBadJSValues("'a' / 'b'"); 232 testGridDefinitionsSetBadJSValues("'a' / 'b'");
233 testGridDefinitionsSetBadJSValues("15px"); 233 testGridDefinitionsSetBadJSValues("15px");
234 testGridDefinitionsSetBadJSValues("15px / 20px none"); 234 testGridDefinitionsSetBadJSValues("20px none / 15px");
235 testGridDefinitionsSetBadJSValues("25px / 10px 'a'"); 235 testGridDefinitionsSetBadJSValues("10px 'a' / 25px");
236 236
237 </script> 237 </script>
238 </body> 238 </body>
239 </html> 239 </html>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-shorthand-get-set.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/implicit-tracks-before-explicit.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698