| OLD | NEW |
|---|
| 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: 10px / 15px; |
| 11 } | 11 } |
| 12 #gridTemplateSimpleFormWithNoneColumns { | 12 #gridTemplateSimpleFormWithNoneColumns { |
| 13 grid-template: none / 15px; | 13 grid-template: none / 15px; |
| 14 } | 14 } |
| 15 #gridTemplateSimpleFormWithNoneRows { | 15 #gridTemplateSimpleFormWithNoneRows { |
| 16 grid-template: 10px / none; | 16 grid-template: 10px / none; |
| 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: 10px / "a" 15px; |
| 23 } | 23 } |
| 24 #gridTemplateComplexFormWithLineNames { | 24 #gridTemplateComplexFormWithLineNames { |
| 25 grid-template: 10px / (head) "a" 15px (tail); | 25 grid-template: 10px / [head] "a" 15px [tail]; |
| 26 } | 26 } |
| 27 #gridTemplateComplexFormWithLineNamesMultipleColumns { | 27 #gridTemplateComplexFormWithLineNamesMultipleColumns { |
| 28 grid-template: 10px / (head) "a b" 15px (tail) | 28 grid-template: 10px / [head] "a b" 15px [tail] |
| 29 } | 29 } |
| 30 #gridTemplateComplexFormWithLineNamesMultipleRows { | 30 #gridTemplateComplexFormWithLineNamesMultipleRows { |
| 31 grid-template: 10px / (head1) "a" 15px (tail1) | 31 grid-template: 10px / [head1] "a" 15px [tail1] |
| 32 (head2) "b" 20px (tail2); | 32 [head2] "b" 20px [tail2]; |
| 33 } | 33 } |
| 34 #gridTemplateComplexFormWithLineNamesMultipleRowsAndColumns { | 34 #gridTemplateComplexFormWithLineNamesMultipleRowsAndColumns { |
| 35 grid-template: (first) 10px repeat(2, (nav nav2) 15px) / "a b c" 100px
(nav) | 35 grid-template: [first] 10px repeat(2, [nav nav2] 15px) / "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]; |
| 38 } | 38 } |
| 39 #gridTemplateComplexFormWithAuto { | 39 #gridTemplateComplexFormWithAuto { |
| 40 grid-template: 10px / "a"; | 40 grid-template: 10px / "a"; |
| 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 | 48 |
| 49 /* Bad values. */ | 49 /* Bad values. */ |
| 50 | 50 |
| 51 #gridTemplateMultipleSlash { | 51 #gridTemplateMultipleSlash { |
| 52 grid-template: 10px / 20px / 30px; | 52 grid-template: 10px / 20px / 30px; |
| 53 } | 53 } |
| 54 #gridTemplateSimpleFormJustColumns { | 54 #gridTemplateSimpleFormJustColumns { |
| 55 grid-template: 10px; | 55 grid-template: 10px; |
| 56 } | 56 } |
| 57 #gridTemplateSimpleFormNoRows { | 57 #gridTemplateSimpleFormNoRows { |
| 58 grid-template: 10px /; | 58 grid-template: 10px /; |
| 59 } | 59 } |
| 60 #gridTemplateSimpleFormNoColumns { | 60 #gridTemplateSimpleFormNoColumns { |
| 61 grid-template: / 10px; | 61 grid-template: / 10px; |
| 62 } | 62 } |
| 63 #gridTemplateSimpleFormNoColumnSize { | 63 #gridTemplateSimpleFormNoColumnSize { |
| 64 grid-template: (line) / 10px; | 64 grid-template: [line] / 10px; |
| 65 } | 65 } |
| 66 #gridTemplateSimpleFormWithFitContent { | 66 #gridTemplateSimpleFormWithFitContent { |
| 67 grid-template: -webkit-fit-content / 10px; | 67 grid-template: -webkit-fit-content / 10px; |
| 68 } | 68 } |
| 69 #gridTemplateSimpleFormWithWrongRepeat { | 69 #gridTemplateSimpleFormWithWrongRepeat { |
| 70 grid-template: repeat(2, 50% (title) a) / 10px; | 70 grid-template: repeat(2, 50% [title] a) / 10px; |
| 71 } | 71 } |
| 72 #gridTemplateSimpleFormWithMisplacedNone1 { | 72 #gridTemplateSimpleFormWithMisplacedNone1 { |
| 73 grid-template: 10px / none 20px; | 73 grid-template: 10px / none 20px; |
| 74 } | 74 } |
| 75 #gridTemplateSimpleFormWithMisplacedNone2 { | 75 #gridTemplateSimpleFormWithMisplacedNone2 { |
| 76 grid-template: 10px / 20px none; | 76 grid-template: 10px / 20px none; |
| 77 } | 77 } |
| 78 #gridTemplateSimpleFormWithMisplacedNone3 { | 78 #gridTemplateSimpleFormWithMisplacedNone3 { |
| 79 grid-template: none 10px / 20px; | 79 grid-template: none 10px / 20px; |
| 80 } | 80 } |
| 81 #gridTemplateSimpleFormWithMisplacedNone4 { | 81 #gridTemplateSimpleFormWithMisplacedNone4 { |
| 82 grid-template: 10px none / 20px; | 82 grid-template: 10px none / 20px; |
| 83 } | 83 } |
| 84 #gridTemplateComplexFormWithRepeat { | 84 #gridTemplateComplexFormWithRepeat { |
| 85 grid-template: 10px / "a" repeat(2, 50% (title)); | 85 grid-template: 10px / "a" repeat(2, 50% [title]); |
| 86 } | 86 } |
| 87 #gridTemplateComplexFormWithWrongRepeat { | 87 #gridTemplateComplexFormWithWrongRepeat { |
| 88 grid-template: repeat(2, 50% (title) a) / "a"; | 88 grid-template: repeat(2, 50% [title] a) / "a"; |
| 89 } | 89 } |
| 90 #griTemplateComplexFormdWithFitAvailable { | 90 #griTemplateComplexFormdWithFitAvailable { |
| 91 grid-template: -webkit-fit-available / "a"; | 91 grid-template: -webkit-fit-available / "a"; |
| 92 } | 92 } |
| 93 #gridTemplateComplexFormNoColumnSize { | 93 #gridTemplateComplexFormNoColumnSize { |
| 94 grid-template: (line) / "a"; | 94 grid-template: [line] / "a"; |
| 95 } | 95 } |
| 96 #gridTemplateComplexFormMisplacedRowsSize1 { | 96 #gridTemplateComplexFormMisplacedRowsSize1 { |
| 97 grid-template: 25px / 10px "a"; | 97 grid-template: 25px / 10px "a"; |
| 98 } | 98 } |
| 99 #gridTemplateComplexFormMisplacedRowsSize2 { | 99 #gridTemplateComplexFormMisplacedRowsSize2 { |
| 100 grid-template: 25px / "a" (name) 10px; | 100 grid-template: 25px / "a" [name] 10px; |
| 101 } | 101 } |
| 102 #gridTemplateComplexFormColumnsNotParsing1 { | 102 #gridTemplateComplexFormColumnsNotParsing1 { |
| 103 grid-template: a / "a" (name) 10px; | 103 grid-template: a / "a" [name] 10px; |
| 104 } | 104 } |
| 105 #gridTemplateComplexFormColumnsNotParsing2 { | 105 #gridTemplateComplexFormColumnsNotParsing2 { |
| 106 grid-template: "B" / "a" (name) 10px; | 106 grid-template: "B" / "a" [name] 10px; |
| 107 } | 107 } |
| 108 #gridTemplateComplexFormWithNoneColumns { | 108 #gridTemplateComplexFormWithNoneColumns { |
| 109 grid-template: none / "a" (name) 10px; | 109 grid-template: none / "a" [name] 10px; |
| 110 } | 110 } |
| 111 #gridTemplateNoColumnsRowWithTwoEmptyTrailingLineNames { | 111 #gridTemplateNoColumnsRowWithTwoEmptyTrailingLineNames { |
| 112 grid-template: (first) "a" auto () (); | 112 grid-template: [first] "a" auto [] []; |
| 113 } | 113 } |
| 114 #gridTemplateNoColumnsRowWithEmptyTrailingLineNamesAndNonEmptyLeadingLineNames { | 114 #gridTemplateNoColumnsRowWithEmptyTrailingLineNamesAndNonEmptyLeadingLineNames { |
| 115 grid-template: (first) "a" auto () (tail); | 115 grid-template: [first] "a" auto [] [tail]; |
| 116 } | 116 } |
| 117 | 117 |
| 118 </style> | 118 </style> |
| 119 <script src="../../resources/js-test.js"></script> | 119 <script src="../../resources/js-test.js"></script> |
| 120 </head> | 120 </head> |
| 121 <body> | 121 <body> |
| 122 <div class="grid" id="gridTemplateWithNone"></div> | 122 <div class="grid" id="gridTemplateWithNone"></div> |
| 123 <div class="grid" id="gridTemplateSimpleForm"></div> | 123 <div class="grid" id="gridTemplateSimpleForm"></div> |
| 124 <div class="grid" id="gridTemplateSimpleFormWithNoneColumns"></div> | 124 <div class="grid" id="gridTemplateSimpleFormWithNoneColumns"></div> |
| 125 <div class="grid" id="gridTemplateSimpleFormWithNoneRows"></div> | 125 <div class="grid" id="gridTemplateSimpleFormWithNoneRows"></div> |
| (...skipping 33 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 159 <script> | 159 <script> |
| 160 description("This test checks that the 'grid-template' shorthand is properly
parsed and the longhand properties correctly assigned."); | 160 description("This test checks that the 'grid-template' shorthand is properly
parsed and the longhand properties correctly assigned."); |
| 161 | 161 |
| 162 debug("Test getting grid-template-areas set through CSS."); | 162 debug("Test getting grid-template-areas set through CSS."); |
| 163 testGridDefinitionsValues(document.getElementById("gridTemplateWithNone"), "
none", "none", "none"); | 163 testGridDefinitionsValues(document.getElementById("gridTemplateWithNone"), "
none", "none", "none"); |
| 164 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleForm"),
"10px", "15px", "none"); | 164 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleForm"),
"10px", "15px", "none"); |
| 165 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWit
hNoneColumns"), "none", "15px", "none"); | 165 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWit
hNoneColumns"), "none", "15px", "none"); |
| 166 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWit
hNoneRows"), "10px", "none", "none"); | 166 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWit
hNoneRows"), "10px", "none", "none"); |
| 167 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWit
hNone"), "none", "none", "none"); | 167 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWit
hNone"), "none", "none", "none"); |
| 168 testGridDefinitionsValues(document.getElementById("gridTemplateComplexForm")
, "10px", "15px", '"a"'); | 168 testGridDefinitionsValues(document.getElementById("gridTemplateComplexForm")
, "10px", "15px", '"a"'); |
| 169 testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWi
thLineNames"), "10px", "(head) 15px (tail)", '"a"'); | 169 testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWi
thLineNames"), "10px", "[head] 15px [tail]", '"a"'); |
| 170 testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWi
thLineNamesMultipleColumns"), "10px", "(head) 15px (tail)", '"a b"'); | 170 testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWi
thLineNamesMultipleColumns"), "10px", "[head] 15px [tail]", '"a b"'); |
| 171 testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWi
thLineNamesMultipleRows"), "10px", "(head1) 15px (tail1 head2) 20px (tail2)", '"
a" "b"'); | 171 testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWi
thLineNamesMultipleRows"), "10px", "[head1] 15px [tail1 head2] 20px [tail2]", '"
a" "b"'); |
| 172 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"'); | 172 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"'); |
| 173 testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWi
thAuto"), "10px", "0px", '"a"'); | 173 testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWi
thAuto"), "10px", "0px", '"a"'); |
| 174 testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormOn
lyAreas"), "none", "0px", '"a"'); | 174 testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormOn
lyAreas"), "none", "0px", '"a"'); |
| 175 testGridDefinitionsValues(document.getElementById("gridTemplateNoColumnsRowW
ithEmptyTrailingLineNames"), "none", "(first) 0px", '"a"'); | 175 testGridDefinitionsValues(document.getElementById("gridTemplateNoColumnsRowW
ithEmptyTrailingLineNames"), "none", "[first] 0px", '"a"'); |
| 176 | 176 |
| 177 debug(""); | 177 debug(""); |
| 178 debug("Test getting wrong values for grid-template shorthand through CSS (th
ey should resolve to the default: 'none')"); | 178 debug("Test getting wrong values for grid-template shorthand through CSS (th
ey should resolve to the default: 'none')"); |
| 179 testGridDefinitionsValues(document.getElementById("gridTemplateMultipleSlash
"), "none", "none", "none"); | 179 testGridDefinitionsValues(document.getElementById("gridTemplateMultipleSlash
"), "none", "none", "none"); |
| 180 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormJus
tColumns"), "none", "none", "none"); | 180 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormJus
tColumns"), "none", "none", "none"); |
| 181 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormNoR
ows"), "none", "none", "none"); | 181 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormNoR
ows"), "none", "none", "none"); |
| 182 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormNoC
olumns"), "none", "none", "none"); | 182 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormNoC
olumns"), "none", "none", "none"); |
| 183 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormNoC
olumnSize"), "none", "none", "none"); | 183 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormNoC
olumnSize"), "none", "none", "none"); |
| 184 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWit
hFitContent"), "none", "none", "none"); | 184 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWit
hFitContent"), "none", "none", "none"); |
| 185 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWit
hWrongRepeat"), "none", "none", "none"); | 185 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWit
hWrongRepeat"), "none", "none", "none"); |
| (...skipping 17 matching lines...) Expand all Loading... |
| 203 debug("Test the initial value"); | 203 debug("Test the initial value"); |
| 204 var element = document.createElement("div"); | 204 var element = document.createElement("div"); |
| 205 document.body.appendChild(element); | 205 document.body.appendChild(element); |
| 206 testGridDefinitionsValues(element, "none", "none", "none"); | 206 testGridDefinitionsValues(element, "none", "none", "none"); |
| 207 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-colu
mns')", "'none'"); | 207 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-colu
mns')", "'none'"); |
| 208 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows
')", "'none'"); | 208 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows
')", "'none'"); |
| 209 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-area
s')", "'none'"); | 209 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-area
s')", "'none'"); |
| 210 | 210 |
| 211 debug(""); | 211 debug(""); |
| 212 debug("Test setting grid-template-columns and grid-template-rows back to 'no
ne' through JS"); | 212 debug("Test setting grid-template-columns and grid-template-rows back to 'no
ne' through JS"); |
| 213 testGridDefinitionsSetJSValues("10px / (line) 'a' 20px", "10px", "(line) 20p
x", "\"a\""); | 213 testGridDefinitionsSetJSValues("10px / [line] 'a' 20px", "10px", "[line] 20p
x", "\"a\""); |
| 214 testGridDefinitionsSetJSValues("none", "none", "none", "none"); | 214 testGridDefinitionsSetJSValues("none", "none", "none", "none"); |
| 215 | 215 |
| 216 debug(""); | 216 debug(""); |
| 217 debug("Test getting and setting grid-template shorthand through JS"); | 217 debug("Test getting and setting grid-template shorthand through JS"); |
| 218 testGridDefinitionsSetJSValues("18px / 66px", "18px", "66px", "none"); | 218 testGridDefinitionsSetJSValues("18px / 66px", "18px", "66px", "none"); |
| 219 testGridDefinitionsSetJSValues("10px / (head) 'a' 15px (tail)", "10px", "(he
ad) 15px (tail)", "\"a\""); | 219 testGridDefinitionsSetJSValues("10px / [head] 'a' 15px [tail]", "10px", "[he
ad] 15px [tail]", "\"a\""); |
| 220 testGridDefinitionsSetJSValues("'a'", "none", "0px", "\"a\"", "none", "auto"
); | 220 testGridDefinitionsSetJSValues("'a'", "none", "0px", "\"a\"", "none", "auto"
); |
| 221 | 221 |
| 222 debug(""); | 222 debug(""); |
| 223 debug("Test setting grid-template shorthand to bad values through JS"); | 223 debug("Test setting grid-template shorthand to bad values through JS"); |
| 224 testGridDefinitionsSetBadJSValues("none / 'a'"); | 224 testGridDefinitionsSetBadJSValues("none / 'a'"); |
| 225 testGridDefinitionsSetBadJSValues("25px / 'a' (name) 10px"); | 225 testGridDefinitionsSetBadJSValues("25px / 'a' [name] 10px"); |
| 226 testGridDefinitionsSetBadJSValues("'a' / 'b'"); | 226 testGridDefinitionsSetBadJSValues("'a' / 'b'"); |
| 227 testGridDefinitionsSetBadJSValues("15px"); | 227 testGridDefinitionsSetBadJSValues("15px"); |
| 228 testGridDefinitionsSetBadJSValues("15px / 20px none"); | 228 testGridDefinitionsSetBadJSValues("15px / 20px none"); |
| 229 testGridDefinitionsSetBadJSValues("25px / 10px 'a'"); | 229 testGridDefinitionsSetBadJSValues("25px / 10px 'a'"); |
| 230 | 230 |
| 231 </script> | 231 </script> |
| 232 </body> | 232 </body> |
| 233 </html> | 233 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1168453002:
[CSSGridLayout] Switch from parentheses to brackets for grid line names (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master