| 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: 30px; | 11 grid-template-columns: 30px; |
| 12 grid-template-rows: minmax(20px, 80px) 160px; | 12 grid-template-rows: minmax(20px, 80px) 160px; |
| 13 } | 13 } |
| 14 | 14 |
| 15 #grid2 { | 15 #grid2 { |
| 16 grid-template-columns: 30px; | 16 grid-template-columns: 30px; |
| 17 grid-template-rows: minmax(50%, 120px) minmax(20px, 40%); | 17 grid-template-rows: minmax(50%, 120px) minmax(20px, 40%); |
| 18 } | 18 } |
| 19 | 19 |
| 20 #grid3 { | 20 #grid3 { |
| 21 grid-template-columns: 30px; | 21 grid-template-columns: 30px; |
| 22 /* Overlapping range. */ | 22 /* Overlapping range. */ |
| 23 grid-template-rows: minmax(10px, 180px) minmax(30px, 150px); | 23 grid-template-rows: minmax(10px, 180px) minmax(30px, 150px); |
| 24 } | 24 } |
| 25 | 25 |
| 26 #grid4 { | 26 #grid4 { |
| 27 grid-template-columns: 30px; | 27 grid-template-columns: 30px; |
| 28 grid-template-rows: minmax(20px, 80px) 60px; | 28 grid-template-rows: minmax(20px, 80px) 60px; |
| 29 -webkit-writing-mode: vertical-rl; | |
| 30 } | 29 } |
| 31 | 30 |
| 32 #grid5 { | 31 #grid5 { |
| 33 grid-template-columns: 30px; | 32 grid-template-columns: 30px; |
| 34 /* 90% > 80px, 80px should be ignored. */ | 33 /* 90% > 80px, 80px should be ignored. */ |
| 35 grid-template-rows: minmax(90%, 80px) minmax(10px, 60%); | 34 grid-template-rows: minmax(90%, 80px) minmax(10px, 60%); |
| 36 -webkit-writing-mode: vertical-lr; | |
| 37 } | 35 } |
| 38 | 36 |
| 39 #grid6 { | 37 #grid6 { |
| 40 /* Overlapping range. */ | 38 /* Overlapping range. */ |
| 41 grid-template-columns: 30px; | 39 grid-template-columns: 30px; |
| 42 grid-template-rows: minmax(10px, 180px) minmax(30px, 150px); | 40 grid-template-rows: minmax(10px, 180px) minmax(30px, 150px); |
| 43 -webkit-writing-mode: horizontal-bt; | |
| 44 } | 41 } |
| 45 | 42 |
| 46 .firstRowFirstColumn { | 43 .firstRowFirstColumn { |
| 47 width: 100%; | 44 width: 100%; |
| 48 height: 100%; | 45 height: 100%; |
| 49 } | 46 } |
| 50 | 47 |
| 51 .secondRowFirstColumn { | 48 .secondRowFirstColumn { |
| 52 width: 100%; | 49 width: 100%; |
| 53 height: 100%; | 50 height: 100%; |
| (...skipping 13 matching lines...) Expand all Loading... |
| 67 <div class="grid" id="grid2" data-expected-width="100" data-expected-height="200
"> | 64 <div class="grid" id="grid2" data-expected-width="100" data-expected-height="200
"> |
| 68 <div class="firstRowFirstColumn" data-expected-height="120" data-expected-wi
dth="30"></div> | 65 <div class="firstRowFirstColumn" data-expected-height="120" data-expected-wi
dth="30"></div> |
| 69 <div class="secondRowFirstColumn" data-expected-height="80" data-expected-wi
dth="30"></div> | 66 <div class="secondRowFirstColumn" data-expected-height="80" data-expected-wi
dth="30"></div> |
| 70 </div> | 67 </div> |
| 71 | 68 |
| 72 <div class="grid" id="grid3" data-expected-width="100" data-expected-height="200
"> | 69 <div class="grid" id="grid3" data-expected-width="100" data-expected-height="200
"> |
| 73 <div class="firstRowFirstColumn" data-expected-height="90" data-expected-wid
th="30"></div> | 70 <div class="firstRowFirstColumn" data-expected-height="90" data-expected-wid
th="30"></div> |
| 74 <div class="secondRowFirstColumn" data-expected-height="110" data-expected-w
idth="30"></div> | 71 <div class="secondRowFirstColumn" data-expected-height="110" data-expected-w
idth="30"></div> |
| 75 </div> | 72 </div> |
| 76 | 73 |
| 77 <div class="grid" id="grid4" data-expected-width="100" data-expected-height="200
"> | 74 <div class="grid verticalRL" id="grid4" data-expected-width="100" data-expected-
height="200"> |
| 78 <div class="firstRowFirstColumn" data-expected-height="30" data-expected-wid
th="40"></div> | 75 <div class="firstRowFirstColumn" data-expected-height="30" data-expected-wid
th="40"></div> |
| 79 <div class="secondRowFirstColumn" data-expected-height="30" data-expected-wi
dth="60"></div> | 76 <div class="secondRowFirstColumn" data-expected-height="30" data-expected-wi
dth="60"></div> |
| 80 </div> | 77 </div> |
| 81 | 78 |
| 82 <div class="grid" id="grid5" data-expected-width="100" data-expected-height="200
"> | 79 <div class="grid verticalLR" id="grid5" data-expected-width="100" data-expected-
height="200"> |
| 83 <div class="firstRowFirstColumn" data-expected-height="30" data-expected-wid
th="90"></div> | 80 <div class="firstRowFirstColumn" data-expected-height="30" data-expected-wid
th="90"></div> |
| 84 <div class="secondRowFirstColumn" data-expected-height="30" data-expected-wi
dth="10"></div> | 81 <div class="secondRowFirstColumn" data-expected-height="30" data-expected-wi
dth="10"></div> |
| 85 </div> | 82 </div> |
| 86 | 83 |
| 87 <div class="grid" id="grid6" data-expected-width="100" data-expected-height="200
"> | 84 <div class="grid horizontalBT" id="grid6" data-expected-width="100" data-expecte
d-height="200"> |
| 88 <div class="firstRowFirstColumn" data-expected-height="90" data-expected-wid
th="30"></div> | 85 <div class="firstRowFirstColumn" data-expected-height="90" data-expected-wid
th="30"></div> |
| 89 <div class="secondRowFirstColumn" data-expected-height="110" data-expected-w
idth="30"></div> | 86 <div class="secondRowFirstColumn" data-expected-height="110" data-expected-w
idth="30"></div> |
| 90 </div> | 87 </div> |
| 91 | 88 |
| 92 </body> | 89 </body> |
| 93 </html> | 90 </html> |
| OLD | NEW |