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 |