Chromium Code Reviews Chromium Code Reviews
Issue 149373004:
[CSS Grid Layout] Implementation of the grid-template shorthand. (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@grid-template-working| OLD | NEW |
|---|---|
| (Empty) | |
| 1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> | |
| 2 <html> | |
| 3 <head> | |
| 4 <script> | |
| 5 if (window.testRunner) | |
| 6 testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1); | |
|
Julien - ping for review
2014/03/31 17:56:29
This line is unneeded.
jfernandez
2014/03/31 23:02:14
Done.
| |
| 7 </script> | |
| 8 <link href="resources/grid.css" rel="stylesheet"> | |
| 9 <style> | |
| 10 #gridTemplateWithNone { | |
| 11 grid-template: none; | |
| 12 } | |
| 13 #gridTemplateSimpleForm { | |
| 14 grid-template: 10px / 15px; | |
| 15 } | |
| 16 #gridTemplateSimpleFormWithNoneColumns { | |
| 17 grid-template: none / 15px; | |
| 18 } | |
| 19 #gridTemplateSimpleFormWithNoneRows { | |
| 20 grid-template: 10px / none; | |
| 21 } | |
| 22 #gridTemplateSimpleFormWithNone { | |
| 23 grid-template: none / none; | |
| 24 } | |
| 25 #gridTemplateComplexForm { | |
| 26 grid-template: 10px / "a" 15px; | |
| 27 } | |
| 28 #gridTemplateComplexFormWithLineNames { | |
| 29 grid-template: 10px / (head) "a" 15px (tail); | |
| 30 } | |
| 31 #gridTemplateComplexFormWithLineNamesMultipleColumns { | |
| 32 grid-template: 10px / (head) "a b" 15px (tail) | |
| 33 } | |
| 34 #gridTemplateComplexFormWithLineNamesMultipleRows { | |
| 35 grid-template: 10px / (head1) "a" 15px (tail1) | |
| 36 (head2) "b" 20px (tail2); | |
| 37 } | |
| 38 #gridTemplateComplexFormWithLineNamesMultipleRowsAndColumns { | |
| 39 grid-template: (first) 10px repeat(2, (nav nav2) 15px) / "a b c" 100px (nav) | |
| 40 (nav2) "d e f" 25px (nav) | |
| 41 (nav2) "g h i" 25px (last); | |
| 42 } | |
| 43 #gridTemplateComplexFormWithAuto { | |
| 44 grid-template: 10px / "a"; | |
| 45 } | |
| 46 #gridTemplateComplexFormOnlyAreas { | |
| 47 grid-template: "a"; | |
| 48 } | |
| 49 | |
| 50 /* Bad values. */ | |
| 51 | |
| 52 #gridTemplateMultipleSlash { | |
| 53 grid-template: 10px / 20px / 30px; | |
| 54 } | |
| 55 #gridTemplateSimpleFormJustColumns { | |
| 56 grid-template: 10px; | |
| 57 } | |
| 58 #gridTemplateSimpleFormNoRows { | |
| 59 grid-template: 10px /; | |
| 60 } | |
| 61 #gridTemplateSimpleFormNoColumns { | |
| 62 grid-template: / 10px; | |
| 63 } | |
| 64 #gridTemplateSimpleFormNoColumnSize { | |
| 65 grid-template: (line) / 10px; | |
| 66 } | |
| 67 #gridTemplateSimpleFormWithFitContent { | |
| 68 grid-template: -webkit-fit-content / 10px; | |
| 69 } | |
| 70 #gridTemplateSimpleFormWithWrongRepeat { | |
| 71 grid-template: repeat(2, 50% (title) a) / 10px; | |
| 72 } | |
| 73 #gridTemplateSimpleFormWithMisplacedNone1 { | |
| 74 grid-template: 10px / none 20px; | |
| 75 } | |
| 76 #gridTemplateSimpleFormWithMisplacedNone2 { | |
| 77 grid-template: 10px / 20px none; | |
| 78 } | |
| 79 #gridTemplateSimpleFormWithMisplacedNone3 { | |
| 80 grid-template: none 10px / 20px; | |
| 81 } | |
| 82 #gridTemplateSimpleFormWithMisplacedNone4 { | |
| 83 grid-template: 10px none / 20px; | |
| 84 } | |
| 85 #gridTemplateComplexFormWithRepeat { | |
| 86 grid-template: 10px / "a" repeat(2, 50% (title)); | |
| 87 } | |
| 88 #gridTemplateComplexFormWithWrongRepeat { | |
| 89 grid-template: repeat(2, 50% (title) a) / "a"; | |
| 90 } | |
| 91 #griTemplateComplexFormdWithFitAvailable { | |
| 92 grid-template: -webkit-fit-available / "a"; | |
| 93 } | |
| 94 #gridTemplateComplexFormNoColumnSize { | |
| 95 grid-template: (line) / "a"; | |
| 96 } | |
| 97 #gridTemplateComplexFormMisplacedRowsSize1 { | |
| 98 grid-template: 25px / 10px "a"; | |
| 99 } | |
| 100 #gridTemplateComplexFormMisplacedRowsSize2 { | |
| 101 grid-template: 25px / "a" (name) 10px; | |
| 102 } | |
| 103 #gridTemplateComplexFormColumnsNotParsing1 { | |
| 104 grid-template: a / "a" (name) 10px; | |
| 105 } | |
| 106 #gridTemplateComplexFormColumnsNotParsing2 { | |
| 107 grid-template: "B" / "a" (name) 10px; | |
| 108 } | |
| 109 #gridTemplateComplexFormWithNoneColumns { | |
| 110 grid-template: none / "a" (name) 10px; | |
| 111 } | |
| 112 | |
| 113 </style> | |
| 114 <script src="../../resources/js-test.js"></script> | |
| 115 </head> | |
| 116 <body> | |
| 117 <div class="grid" id="gridTemplateWithNone"></div> | |
| 118 <div class="grid" id="gridTemplateSimpleForm"></div> | |
| 119 <div class="grid" id="gridTemplateSimpleFormWithNoneColumns"></div> | |
| 120 <div class="grid" id="gridTemplateSimpleFormWithNoneRows"></div> | |
| 121 <div class="grid" id="gridTemplateSimpleFormWithNone"></div> | |
| 122 <div class="grid" id="gridTemplateComplexForm"></div> | |
| 123 <div class="grid" id="gridTemplateComplexFormWithLineNames"></div> | |
| 124 <div class="grid" id="gridTemplateComplexFormWithLineNamesMultipleColumns"></div > | |
| 125 <div class="grid" id="gridTemplateComplexFormWithLineNamesMultipleRows"></div> | |
| 126 <div class="grid" id="gridTemplateComplexFormWithLineNamesMultipleRowsAndColumns "></div> | |
| 127 <div class="grid" id="gridTemplateComplexFormWithAuto"></div> | |
| 128 <div class="grid" id="gridTemplateComplexFormOnlyAreas"></div> | |
| 129 <div class="grid" id="gridTemplateMultipleSlash"></div> | |
| 130 <div class="grid" id="gridTemplateSimpleFormJustColumns"></div> | |
| 131 <div class="grid" id="gridTemplateSimpleFormNoRows"></div> | |
| 132 <div class="grid" id="gridTemplateSimpleFormNoColumns"></div> | |
| 133 <div class="grid" id="gridTemplateSimpleFormNoColumnSize"></div> | |
| 134 <div class="grid" id="gridTemplateSimpleFormWithFitContent"></div> | |
| 135 <div class="grid" id="gridTemplateSimpleFormWithWrongRepeat"></div> | |
| 136 <div class="grid" id="gridTemplateSimpleFormWithMisplacedNone1"></div> | |
| 137 <div class="grid" id="gridTemplateSimpleFormWithMisplacedNone2"></div> | |
| 138 <div class="grid" id="gridTemplateSimpleFormWithMisplacedNone3"></div> | |
| 139 <div class="grid" id="gridTemplateSimpleFormWithMisplacedNone4"></div> | |
| 140 <div class="grid" id="gridTemplateComplexFormWithRepeat"></div> | |
| 141 <div class="grid" id="gridTemplateComplexFormWithWrongRepeat"></div> | |
| 142 <div class="grid" id="griTemplateComplexFormdWithFitAvailable"></div> | |
| 143 <div class="grid" id="gridTemplateComplexFormNoColumnSize"></div> | |
| 144 <div class="grid" id="gridTemplateComplexFormMisplacedRowsSize1"></div> | |
| 145 <div class="grid" id="gridTemplateComplexFormMisplacedRowsSize2"></div> | |
| 146 <div class="grid" id="gridTemplateComplexFormColumnsNotParsing1"></div> | |
| 147 <div class="grid" id="gridTemplateComplexFormColumnsNotParsing2"></div> | |
| 148 <div class="grid" id="gridTemplateComplexFormWithNoneColumns"></div> | |
| 149 <script src="resources/grid-template-shorthand-parsing-utils.js"></script> | |
| 150 <script> | |
| 151 description("This test checks that the 'grid-template' shorthand is properly parsed and the longhand properties correctly assigned."); | |
| 152 | |
| 153 debug("Test getting grid-template-areas set through CSS."); | |
| 154 testGridDefinitionsValues(document.getElementById("gridTemplateWithNone"), " none", "none", "none"); | |
| 155 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleForm"), "10px", "15px", "none"); | |
| 156 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWit hNoneColumns"), "none", "15px", "none"); | |
| 157 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWit hNoneRows"), "10px", "none", "none"); | |
| 158 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWit hNone"), "none", "none", "none"); | |
| 159 testGridDefinitionsValues(document.getElementById("gridTemplateComplexForm") , "10px", "15px", '"a"'); | |
| 160 testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWi thLineNames"), "10px", "(head) 15px (tail)", '"a"'); | |
| 161 testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWi thLineNamesMultipleColumns"), "10px", "(head) 15px (tail)", '"a b"'); | |
| 162 testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWi thLineNamesMultipleRows"), "10px", "(head1) 15px (tail1 head2) 20px (tail2)", '" a" "b"'); | |
| 163 testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWi thLineNamesMultipleRowsAndColumns"), "(first) 10px (nav nav2) 15px (nav nav2) 15 px", "100px (nav nav2) 25px (nav nav2) 25px (last)", '"a b c" "d e f" "g h i"'); | |
| 164 testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWi thAuto"), "10px", "0px", '"a"'); | |
| 165 testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormOn lyAreas"), "none", "0px", '"a"'); | |
| 166 | |
| 167 debug(""); | |
| 168 debug("Test getting wrong values for grid-template shorthand through CSS (th ey should resolve to the default: 'none')"); | |
| 169 testGridDefinitionsValues(document.getElementById("gridTemplateMultipleSlash "), "none", "none", "none"); | |
| 170 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormJus tColumns"), "none", "none", "none"); | |
| 171 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormNoR ows"), "none", "none", "none"); | |
| 172 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormNoC olumns"), "none", "none", "none"); | |
| 173 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormNoC olumnSize"), "none", "none", "none"); | |
| 174 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWit hFitContent"), "none", "none", "none"); | |
| 175 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWit hWrongRepeat"), "none", "none", "none"); | |
| 176 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWit hMisplacedNone1"), "none", "none", "none"); | |
| 177 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWit hMisplacedNone2"), "none", "none", "none"); | |
| 178 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWit hMisplacedNone3"), "none", "none", "none"); | |
| 179 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWit hMisplacedNone4"), "none", "none", "none"); | |
| 180 testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWi thRepeat"), "none", "none", "none"); | |
| 181 testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWi thWrongRepeat"), "none", "none", "none"); | |
| 182 testGridDefinitionsValues(document.getElementById("griTemplateComplexFormdWi thFitAvailable"), "none", "none", "none"); | |
| 183 testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormNo ColumnSize"), "none", "none", "none"); | |
| 184 testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormMi splacedRowsSize1"), "none", "none", "none"); | |
| 185 testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormMi splacedRowsSize2"), "none", "none", "none"); | |
| 186 testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormCo lumnsNotParsing1"), "none", "none", "none"); | |
| 187 testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormCo lumnsNotParsing2"), "none", "none", "none"); | |
| 188 testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWi thNoneColumns"), "none", "none", "none"); | |
| 189 | |
| 190 debug(""); | |
| 191 debug("Test the initial value"); | |
| 192 var element = document.createElement("div"); | |
| 193 document.body.appendChild(element); | |
| 194 testGridDefinitionsValues(element, "none", "none", "none"); | |
| 195 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-colu mns')", "'none'"); | |
| 196 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows ')", "'none'"); | |
| 197 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-area s')", "'none'"); | |
| 198 | |
| 199 debug(""); | |
| 200 debug("Test setting grid-template-columns and grid-template-rows back to 'no ne' through JS"); | |
| 201 testGridDefinitionsSetJSValues("10px / (line) 'a' 20px", "10px", "(line) 20p x", "\"a\""); | |
| 202 testGridDefinitionsSetJSValues("none", "none", "none", "none"); | |
| 203 | |
| 204 debug(""); | |
| 205 debug("Test getting and setting grid-template shorthand through JS"); | |
| 206 testGridDefinitionsSetJSValues("18px / 66px", "18px", "66px", "none"); | |
| 207 testGridDefinitionsSetJSValues("10px / (head) 'a' 15px (tail)", "10px", "(he ad) 15px (tail)", "\"a\""); | |
| 208 testGridDefinitionsSetJSValues("'a'", "none", "0px", "\"a\"", "none", "auto" ); | |
| 209 | |
| 210 debug(""); | |
| 211 debug("Test setting grid-template shorthand to bad values through JS"); | |
| 212 testGridDefinitionsSetBadJSValues("none / 'a'"); | |
| 213 testGridDefinitionsSetBadJSValues("25px / 'a' (name) 10px"); | |
| 214 testGridDefinitionsSetBadJSValues("'a' / 'b'"); | |
| 215 testGridDefinitionsSetBadJSValues("15px"); | |
| 216 testGridDefinitionsSetBadJSValues("15px / 20px none"); | |
| 217 testGridDefinitionsSetBadJSValues("25px / 10px 'a'"); | |
| 218 | |
| 219 </script> | |
| 220 </body> | |
| 221 </html> | |
| OLD | NEW |
