| OLD | NEW |
|---|
| 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 grid-template-areas: "firstArea secondArea" | 7 grid-template-areas: "firstArea secondArea" |
| 8 "thirdArea thirdArea"; | 8 "thirdArea thirdArea"; |
| 9 } | 9 } |
| 10 | 10 |
| 11 #oneValueGridArea { | 11 #oneValueGridArea { |
| 12 grid-area: 1; | 12 grid-area: 1; |
| 13 } | 13 } |
| 14 | 14 |
| 15 #oneValueIdentGridArea { | 15 #oneValueIdentGridArea { |
| 16 grid-area: thirdArea; | 16 grid-area: thirdArea; |
| 17 } | 17 } |
| 18 | 18 |
| 19 #twoValueGridArea { | 19 #twoValueGridArea { |
| 20 grid-area: -1 / span 1; | 20 grid-area: -1 / span 1; |
| 21 } | 21 } |
| 22 | 22 |
| 23 #twoValueIdentGridArea { | 23 #twoValueIdentGridArea { |
| 24 grid-area: firstArea / secondArea; | 24 grid-area: firstArea / secondArea; |
| 25 } | 25 } |
| 26 | 26 |
| 27 #threeValueGridArea { | 27 #threeValueGridArea { |
| 28 grid-area: span / 10 / -1; | 28 grid-area: span 1 / 10 / -1; |
| 29 } | 29 } |
| 30 | 30 |
| 31 #fourValueGridArea { | 31 #fourValueGridArea { |
| 32 grid-area: -5 / 5 span / span 8 / 9; | 32 grid-area: -5 / 5 span / span 8 / 9; |
| 33 } | 33 } |
| 34 | 34 |
| 35 #fourValueMixedGridArea { | 35 #fourValueMixedGridArea { |
| 36 grid-area: firstArea / span / nonExistent / 1 foobar; | 36 grid-area: firstArea / span 1 / nonExistent / 1 foobar; |
| 37 } | 37 } |
| 38 </style> | 38 </style> |
| 39 <script src="../../resources/js-test.js"></script> | 39 <script src="../../resources/js-test.js"></script> |
| 40 </head> | 40 </head> |
| 41 <body> | 41 <body> |
| 42 <div class="grid"> | 42 <div class="grid"> |
| 43 <div id="oneValueGridArea"></div> | 43 <div id="oneValueGridArea"></div> |
| 44 <div id="oneValueIdentGridArea"></div> | 44 <div id="oneValueIdentGridArea"></div> |
| 45 <div id="twoValueGridArea"></div> | 45 <div id="twoValueGridArea"></div> |
| 46 <div id="twoValueIdentGridArea"></div> | 46 <div id="twoValueIdentGridArea"></div> |
| (...skipping 100 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 147 | 147 |
| 148 debug(""); | 148 debug(""); |
| 149 debug("Test setting some positions to invalid values through JS"); | 149 debug("Test setting some positions to invalid values through JS"); |
| 150 testGridAreaInvalidJSParsing("span / span / span /"); | 150 testGridAreaInvalidJSParsing("span / span / span /"); |
| 151 testGridAreaInvalidJSParsing("1/ span span / 1 / span"); | 151 testGridAreaInvalidJSParsing("1/ span span / 1 / span"); |
| 152 testGridAreaInvalidJSParsing("span / 1 / -1 / 1 -1"); | 152 testGridAreaInvalidJSParsing("span / 1 / -1 / 1 -1"); |
| 153 testGridAreaInvalidJSParsing("span / 1 / -1 / 1 span -1"); | 153 testGridAreaInvalidJSParsing("span / 1 / -1 / 1 span -1"); |
| 154 </script> | 154 </script> |
| 155 </body> | 155 </body> |
| 156 </html> | 156 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1970573004:
[css-grid] Consider invalid using just "span" as grid-line value (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master