| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <link href="resources/grid.css" rel="stylesheet"> | 3 <link href="resources/grid.css" rel="stylesheet"> |
| 4 <style> | 4 <style> |
| 5 .grid { | 5 .grid { |
| 6 width: 100px; | 6 width: 100px; |
| 7 height: 200px; | 7 height: 200px; |
| 8 } | 8 } |
| 9 | 9 |
| 10 #grid1 { | 10 #grid1 { |
| 11 grid-template-columns: minmax(20px, 80px) 60px; | 11 grid-template-columns: minmax(20px, 80px) 60px; |
| 12 grid-template-rows: 30px; | 12 grid-template-rows: 30px; |
| 13 } | 13 } |
| 14 | 14 |
| 15 #grid2 { | 15 #grid2 { |
| 16 /* First minmax more constraining than available logical width. */ | 16 /* First minmax more constraining than available logical width. */ |
| 17 grid-template-columns: minmax(50%, 60px) minmax(10px, 40%); | 17 grid-template-columns: minmax(50%, 60px) minmax(10px, 40%); |
| 18 grid-template-rows: 30px; | 18 grid-template-rows: 30px; |
| 19 } | 19 } |
| 20 | 20 |
| 21 #grid3 { | 21 #grid3 { |
| 22 /* Overlapping range. */ | 22 /* Overlapping range. */ |
| 23 grid-template-columns: minmax(10px, 80px) minmax(20px, 50px); | 23 grid-template-columns: minmax(10px, 80px) minmax(20px, 50px); |
| 24 grid-template-rows: 30px; | 24 grid-template-rows: 30px; |
| 25 } | 25 } |
| 26 | 26 |
| 27 #grid4 { | 27 #grid4 { |
| 28 grid-template-columns: minmax(20px, 80px) 160px; | 28 grid-template-columns: minmax(20px, 80px) 160px; |
| 29 grid-template-rows: 30px; | 29 grid-template-rows: 30px; |
| 30 -webkit-writing-mode: vertical-rl; | |
| 31 } | 30 } |
| 32 | 31 |
| 33 #grid5 { | 32 #grid5 { |
| 34 /* 50% > 80px, 80px should be ignored. */ | 33 /* 50% > 80px, 80px should be ignored. */ |
| 35 grid-template-columns: minmax(50%, 80px) minmax(10px, 60%); | 34 grid-template-columns: minmax(50%, 80px) minmax(10px, 60%); |
| 36 grid-template-rows: 30px; | 35 grid-template-rows: 30px; |
| 37 -webkit-writing-mode: vertical-lr; | |
| 38 } | 36 } |
| 39 | 37 |
| 40 #grid6 { | 38 #grid6 { |
| 41 /* Overlapping range. */ | 39 /* Overlapping range. */ |
| 42 grid-template-columns: minmax(10px, 180px) minmax(30px, 150px); | 40 grid-template-columns: minmax(10px, 180px) minmax(30px, 150px); |
| 43 grid-template-rows: 30px; | 41 grid-template-rows: 30px; |
| 44 -webkit-writing-mode: horizontal-bt; | |
| 45 } | 42 } |
| 46 | 43 |
| 47 .firstRowFirstColumn { | 44 .firstRowFirstColumn { |
| 48 width: 100%; | 45 width: 100%; |
| 49 height: 100%; | 46 height: 100%; |
| 50 } | 47 } |
| 51 | 48 |
| 52 .firstRowSecondColumn { | 49 .firstRowSecondColumn { |
| 53 width: 100%; | 50 width: 100%; |
| 54 height: 100%; | 51 height: 100%; |
| (...skipping 13 matching lines...) Expand all Loading... |
| 68 <div class="grid" id="grid2" data-expected-width="100" data-expected-height="200
"> | 65 <div class="grid" id="grid2" data-expected-width="100" data-expected-height="200
"> |
| 69 <div class="firstRowFirstColumn" data-expected-height="30" data-expected-wid
th="60"></div> | 66 <div class="firstRowFirstColumn" data-expected-height="30" data-expected-wid
th="60"></div> |
| 70 <div class="firstRowSecondColumn" data-expected-height="30" data-expected-wi
dth="40"></div> | 67 <div class="firstRowSecondColumn" data-expected-height="30" data-expected-wi
dth="40"></div> |
| 71 </div> | 68 </div> |
| 72 | 69 |
| 73 <div class="grid" id="grid3" data-expected-width="100" data-expected-height="200
"> | 70 <div class="grid" id="grid3" data-expected-width="100" data-expected-height="200
"> |
| 74 <div class="firstRowFirstColumn" data-expected-height="30" data-expected-wid
th="50"></div> | 71 <div class="firstRowFirstColumn" data-expected-height="30" data-expected-wid
th="50"></div> |
| 75 <div class="firstRowSecondColumn" data-expected-height="30" data-expected-wi
dth="50"></div> | 72 <div class="firstRowSecondColumn" data-expected-height="30" data-expected-wi
dth="50"></div> |
| 76 </div> | 73 </div> |
| 77 | 74 |
| 78 <div class="grid" id="grid4" data-expected-width="100" data-expected-height="200
"> | 75 <div class="grid verticalRL" id="grid4" data-expected-width="100" data-expected-
height="200"> |
| 79 <div class="firstRowFirstColumn" data-expected-height="40" data-expected-wid
th="30"></div> | 76 <div class="firstRowFirstColumn" data-expected-height="40" data-expected-wid
th="30"></div> |
| 80 <div class="firstRowSecondColumn" data-expected-height="160" data-expected-w
idth="30"></div> | 77 <div class="firstRowSecondColumn" data-expected-height="160" data-expected-w
idth="30"></div> |
| 81 </div> | 78 </div> |
| 82 | 79 |
| 83 <div class="grid" id="grid5" data-expected-width="100" data-expected-height="200
"> | 80 <div class="grid verticalLR" id="grid5" data-expected-width="100" data-expected-
height="200"> |
| 84 <div class="firstRowFirstColumn" data-expected-height="100" data-expected-wi
dth="30"></div> | 81 <div class="firstRowFirstColumn" data-expected-height="100" data-expected-wi
dth="30"></div> |
| 85 <div class="firstRowSecondColumn" data-expected-height="100" data-expected-w
idth="30"></div> | 82 <div class="firstRowSecondColumn" data-expected-height="100" data-expected-w
idth="30"></div> |
| 86 </div> | 83 </div> |
| 87 | 84 |
| 88 <div class="grid" id="grid6" data-expected-width="100" data-expected-height="200
"> | 85 <div class="grid horizontalBT" id="grid6" data-expected-width="100" data-expecte
d-height="200"> |
| 89 <div class="firstRowFirstColumn" data-expected-height="30" data-expected-wid
th="40"></div> | 86 <div class="firstRowFirstColumn" data-expected-height="30" data-expected-wid
th="40"></div> |
| 90 <div class="firstRowSecondColumn" data-expected-height="30" data-expected-wi
dth="60"></div> | 87 <div class="firstRowSecondColumn" data-expected-height="30" data-expected-wi
dth="60"></div> |
| 91 </div> | 88 </div> |
| 92 | 89 |
| 93 </body> | 90 </body> |
| 94 </html> | 91 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1488493003:
[css-grid] refactoring of layout tests (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master