| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html lang="en"> | 2 <html lang="en"> |
| 3 <head> | 3 <head> |
| 4 <style> | 4 <style> |
| 5 .region, .content { | 5 .region, .content { |
| 6 font: 50px/1 Ahem, sans-serif; | 6 font: 50px/1 Ahem, sans-serif; |
| 7 } | 7 } |
| 8 .region { | 8 .region { |
| 9 width: 100px; | 9 width: 100px; |
| 10 height: 100px; | 10 height: 100px; |
| (...skipping 48 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 59 padding: 0; margin: 0; | 59 padding: 0; margin: 0; |
| 60 } | 60 } |
| 61 .old-flexbox.content * { | 61 .old-flexbox.content * { |
| 62 display: -webkit-inline-box; | 62 display: -webkit-inline-box; |
| 63 } | 63 } |
| 64 .new-flexbox.content * { | 64 .new-flexbox.content * { |
| 65 display: -webkit-inline-flex; | 65 display: -webkit-inline-flex; |
| 66 } | 66 } |
| 67 .grid.content * { | 67 .grid.content * { |
| 68 display: inline-grid; | 68 display: inline-grid; |
| 69 grid-definition-rows: 100px; | 69 grid-template-rows: 100px; |
| 70 grid-definition-columns: 100px; | 70 grid-template-columns: 100px; |
| 71 } | 71 } |
| 72 .grid.content * { | 72 .grid.content * { |
| 73 grid-row-start: 1; | 73 grid-row-start: 1; |
| 74 grid-column-start: 1; | 74 grid-column-start: 1; |
| 75 } | 75 } |
| 76 </style> | 76 </style> |
| 77 </head> | 77 </head> |
| 78 <body> | 78 <body> |
| 79 <p>This test covers inline blocks and floats inside of regions with a shape-
inside set. | 79 <p>This test covers inline blocks and floats inside of regions with a shape-
inside set. |
| 80 It requires the Ahem font. For each test case, you should see a 2x2 green sq
uare.</p> | 80 It requires the Ahem font. For each test case, you should see a 2x2 green sq
uare.</p> |
| (...skipping 40 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 121 <div>xxxx</div> | 121 <div>xxxx</div> |
| 122 </div> | 122 </div> |
| 123 | 123 |
| 124 <p>Grid</p> | 124 <p>Grid</p> |
| 125 <div class='region grid'></div> | 125 <div class='region grid'></div> |
| 126 <div class='content grid'> | 126 <div class='content grid'> |
| 127 <div>xxxx</div> | 127 <div>xxxx</div> |
| 128 </div> | 128 </div> |
| 129 </body> | 129 </body> |
| 130 </html> | 130 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 146773002:
[CSS Grid Layout] Rename grid-definition-{columns|rows} to match the new syntax (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master