| 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 type="text/css"> | 5 <style type="text/css"> |
| 6 | 6 |
| 7 .gridAreas { | 7 .gridAreas { |
| 8 grid-template-areas: ". a a" | 8 grid-template-areas: ". a a" |
| 9 "c a a" | 9 "c a a" |
| 10 ". . d"; | 10 ". . d"; |
| 11 } | 11 } |
| 12 | 12 |
| 13 .gridAreasSpecial { | 13 .gridAreasSpecial { |
| 14 grid-template-areas: ". a-start a-start" | 14 grid-template-areas: ". a-start a-start" |
| 15 "c a-end a-end" | 15 "c a-end a-end" |
| 16 ". . d"; | 16 ". . d"; |
| 17 } | 17 } |
| 18 | 18 |
| 19 .gridNoLineNames { | 19 .gridNoLineNames { |
| 20 grid-template-columns: 50px 100px 200px; | 20 grid-template-columns: 50px 100px 200px; |
| 21 grid-template-rows: 50px 100px 200px; | 21 grid-template-rows: 50px 100px 200px; |
| 22 } | 22 } |
| 23 | 23 |
| 24 .gridUniqueNames { | 24 .gridUniqueNames { |
| 25 grid-template-columns: (a) 50px (b b-start) 100px (c -start) 200px (d); | 25 grid-template-columns: [a] 50px [b b-start] 100px [c -start] 200px [d]; |
| 26 grid-template-rows: (e) 50px (f -end) 100px (g g-start) 200px (h); | 26 grid-template-rows: [e] 50px [f -end] 100px [g g-start] 200px [h]; |
| 27 } | 27 } |
| 28 | 28 |
| 29 .gridWithNamedLineBeforeGridArea { | 29 .gridWithNamedLineBeforeGridArea { |
| 30 grid-template-columns: (a-start c-start) 50px (d-start) 100px 200px; | 30 grid-template-columns: [a-start c-start] 50px [d-start] 100px 200px; |
| 31 grid-template-rows: (c-start) 50px (d-start) 100px 200px; | 31 grid-template-rows: [c-start] 50px [d-start] 100px 200px; |
| 32 } | 32 } |
| 33 | 33 |
| 34 .gridWithNamedLineAfterGridArea { | 34 .gridWithNamedLineAfterGridArea { |
| 35 grid-template-columns: 50px 100px (a-start) 200px; | 35 grid-template-columns: 50px 100px [a-start] 200px; |
| 36 grid-template-rows: 50px 100px (c-start) 200px; | 36 grid-template-rows: 50px 100px [c-start] 200px; |
| 37 } | 37 } |
| 38 | 38 |
| 39 .gridWithEndLines { | 39 .gridWithEndLines { |
| 40 grid-template-columns: 50px 100px (a-end) 200px (c-end); | 40 grid-template-columns: 50px 100px [a-end] 200px [c-end]; |
| 41 grid-template-rows: 50px (c-end) 100px (d-end) 200px; | 41 grid-template-rows: 50px [c-end] 100px [d-end] 200px; |
| 42 } | 42 } |
| 43 | 43 |
| 44 .gridRepeatedNames { | 44 .gridRepeatedNames { |
| 45 grid-template-columns: (d-start) 50px (d-start) 100px (d-start) 200px; | 45 grid-template-columns: [d-start] 50px [d-start] 100px [d-start] 200px; |
| 46 grid-template-rows: 50px (c-end) 100px (c-end) 200px (c-end); | 46 grid-template-rows: 50px [c-end] 100px [c-end] 200px [c-end]; |
| 47 } | 47 } |
| 48 | 48 |
| 49 .gridImplicitArea { | 49 .gridImplicitArea { |
| 50 grid-template-columns: 50px (z-start) 100px (z-end) 200px; | 50 grid-template-columns: 50px [z-start] 100px [z-end] 200px; |
| 51 grid-template-rows: 50px (z-start) 100px 200px (z-end); | 51 grid-template-rows: 50px [z-start] 100px 200px [z-end]; |
| 52 } | 52 } |
| 53 | 53 |
| 54 </style> | 54 </style> |
| 55 <script src="../../resources/check-layout.js"></script> | 55 <script src="../../resources/check-layout.js"></script> |
| 56 </head> | 56 </head> |
| 57 <body onload="checkLayout('.grid')"> | 57 <body onload="checkLayout('.grid')"> |
| 58 | 58 |
| 59 <p>This test checks that we resolve named grid line per the specification.</p> | 59 <p>This test checks that we resolve named grid line per the specification.</p> |
| 60 | 60 |
| 61 <!-- Check positioning using unique grid-line names --> | 61 <!-- Check positioning using unique grid-line names --> |
| (...skipping 186 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 248 <div style="position: relative"> | 248 <div style="position: relative"> |
| 249 <div class="grid gridAreas gridImplicitArea"> | 249 <div class="grid gridAreas gridImplicitArea"> |
| 250 <div class="sizedToGridArea" style="grid-column: z;" data-offset-x="50" data
-offset-y="0" data-expected-width="100" data-expected-height="50"></div> | 250 <div class="sizedToGridArea" style="grid-column: z;" data-offset-x="50" data
-offset-y="0" data-expected-width="100" data-expected-height="50"></div> |
| 251 <div class="sizedToGridArea" style="grid-row: z;" data-offset-x="0" data-off
set-y="50" data-expected-width="50" data-expected-height="300"></div> | 251 <div class="sizedToGridArea" style="grid-row: z;" data-offset-x="0" data-off
set-y="50" data-expected-width="50" data-expected-height="300"></div> |
| 252 <div class="sizedToGridArea" style="grid-column-end: z; grid-row-start: z;"
data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-he
ight="100"></div> | 252 <div class="sizedToGridArea" style="grid-column-end: z; grid-row-start: z;"
data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-he
ight="100"></div> |
| 253 </div> | 253 </div> |
| 254 </div> | 254 </div> |
| 255 | 255 |
| 256 </body> | 256 </body> |
| 257 </html> | 257 </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