| OLD | NEW |
| 1 <html> | 1 <html> |
| 2 <head> | 2 <head> |
| 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 font: 10px/1 Ahem; | 6 font: 10px/1 Ahem; |
| 7 } | 7 } |
| 8 .gridMinContentFixedAndAuto { | 8 .gridMinContentFixedAndAuto { |
| 9 grid-template-columns: minmax(min-content, 15px) auto; | 9 grid-template-columns: minmax(min-content, 15px) auto; |
| 10 } | 10 } |
| (...skipping 23 matching lines...) Expand all Loading... |
| 34 } | 34 } |
| 35 .gridAutoMaxContent { | 35 .gridAutoMaxContent { |
| 36 grid-template-columns: auto max-content; | 36 grid-template-columns: auto max-content; |
| 37 } | 37 } |
| 38 .gridMaxContentAndMinContentFixed { | 38 .gridMaxContentAndMinContentFixed { |
| 39 grid-template-columns: max-content minmax(min-content, 35px); | 39 grid-template-columns: max-content minmax(min-content, 35px); |
| 40 } | 40 } |
| 41 .gridMaxContentAndMaxContentFixed { | 41 .gridMaxContentAndMaxContentFixed { |
| 42 grid-template-columns: max-content minmax(max-content, 35px); | 42 grid-template-columns: max-content minmax(max-content, 35px); |
| 43 } | 43 } |
| 44 .gridMinContentFixedAndFixedFixedAndAuto { |
| 45 grid-template-columns: minmax(min-content, 20px) minmax(20px, 30px) auto; |
| 46 } |
| 47 .gridAutoAndFixedFixedAndMaxContentFixed { |
| 48 grid-template-columns: auto minmax(20px, 30px) minmax(max-content, 20px); |
| 49 } |
| 44 | 50 |
| 45 </style> | 51 </style> |
| 46 <script src="../../resources/js-test.js"></script> | 52 <script src="../../resources/js-test.js"></script> |
| 47 </head> | 53 </head> |
| 48 <body> | 54 <body> |
| 49 <div class="grid gridMinContentFixedAndAuto" id="gridMinContentFixedAndAuto"> | 55 <div class="grid gridMinContentFixedAndAuto" id="gridMinContentFixedAndAuto"> |
| 50 <div class="firstRowBothColumn">XXXX XXXX</div> | 56 <div class="firstRowBothColumn">XXXX XXXX</div> |
| 51 </div> | 57 </div> |
| 52 | 58 |
| 53 <div class="grid gridAutoAndAuto" id="gridAutoAndAuto"> | 59 <div class="grid gridAutoAndAuto" id="gridAutoAndAuto"> |
| (...skipping 37 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 91 <div class="constrainedContainer"> | 97 <div class="constrainedContainer"> |
| 92 <div class="grid gridMaxContentAndMinContentFixed" id="gridMaxContentAndMinConte
ntFixed"> | 98 <div class="grid gridMaxContentAndMinContentFixed" id="gridMaxContentAndMinConte
ntFixed"> |
| 93 <div class="firstRowBothColumn">XXXX XXXX</div> | 99 <div class="firstRowBothColumn">XXXX XXXX</div> |
| 94 </div> | 100 </div> |
| 95 </div> | 101 </div> |
| 96 | 102 |
| 97 <div class="grid gridMaxContentAndMaxContentFixed" id="gridMaxContentAndMaxConte
ntFixed"> | 103 <div class="grid gridMaxContentAndMaxContentFixed" id="gridMaxContentAndMaxConte
ntFixed"> |
| 98 <div class="firstRowBothColumn">XXXX XXXX</div> | 104 <div class="firstRowBothColumn">XXXX XXXX</div> |
| 99 </div> | 105 </div> |
| 100 | 106 |
| 107 <!-- The next four force the grid to grow only a particular subset of tracks abo
ve the limits --> |
| 108 <div class="constrainedContainer"> |
| 109 <div class="grid gridMinContentFixedAndAuto" id="gridMinContentFixedAndAutoA
boveLimits"> |
| 110 <div class="firstRowBothColumn">XXXX XXXX</div> |
| 111 <div class="firstRowBothColumn">XXXXXXXXXXX</div> |
| 112 </div> |
| 113 </div> |
| 114 |
| 115 <div class="constrainedContainer"> |
| 116 <div class="grid gridMaxContentFixedAndAuto" id="gridMaxContentFixedAndAutoA
boveLimits"> |
| 117 <div class="firstRowBothColumn">XXXX XXXX</div> |
| 118 <div class="firstRowBothColumn">XXXXXXXXXXXXXXX</div> |
| 119 </div> |
| 120 </div> |
| 121 |
| 122 <div class="constrainedContainer"> |
| 123 <div class="grid gridMinContentFixedAndFixedFixedAndAuto" id="gridMinContent
FixedAndFixedFixedAndAuto"> |
| 124 <div class="firstRowBothColumn">XXXX XXXX</div> |
| 125 <div class="firstRowBothColumn">XXXXXXXXXX</div> |
| 126 </div> |
| 127 </div> |
| 128 |
| 129 <div class="constrainedContainer"> |
| 130 <div class="grid gridAutoAndFixedFixedAndMaxContentFixed" id="gridAutoAndFix
edFixedAndMaxContentFixed"> |
| 131 <div class="firstRowBothColumn">XXXX XXXX</div> |
| 132 <div class="firstRowBothColumn">XXXXXXXXXXXXXXX</div> |
| 133 </div> |
| 134 </div> |
| 135 |
| 101 <script> | 136 <script> |
| 102 function testGridColumnsValues(id, computedColumnValue) | 137 function testGridColumnsValues(id, computedColumnValue) |
| 103 { | 138 { |
| 104 shouldBeEqualToString("window.getComputedStyle(" + id + ", '').getPropert
yValue('grid-template-columns')", computedColumnValue); | 139 shouldBeEqualToString("window.getComputedStyle(" + id + ", '').getPropert
yValue('grid-template-columns')", computedColumnValue); |
| 105 } | 140 } |
| 106 | 141 |
| 107 testGridColumnsValues("gridMinContentFixedAndAuto", "15px 75px"); | 142 testGridColumnsValues("gridMinContentFixedAndAuto", "15px 75px"); |
| 108 testGridColumnsValues("gridAutoAndAuto", "45px 45px"); | 143 testGridColumnsValues("gridAutoAndAuto", "45px 45px"); |
| 109 testGridColumnsValues("gridMinContentAndMinContentFixed", "20px 30px"); | 144 testGridColumnsValues("gridMinContentAndMinContentFixed", "20px 30px"); |
| 110 testGridColumnsValues("gridMaxContentAndMinContent", "70px 20px"); | 145 testGridColumnsValues("gridMaxContentAndMinContent", "70px 20px"); |
| 111 testGridColumnsValues("gridFixedMinContentAndMaxContent", "10px 80px"); | 146 testGridColumnsValues("gridFixedMinContentAndMaxContent", "10px 80px"); |
| 112 testGridColumnsValues("gridFixedMaxContentAndMinContent", "60px 30px"); | 147 testGridColumnsValues("gridFixedMaxContentAndMinContent", "60px 30px"); |
| 113 testGridColumnsValues("gridMinContentAndMaxContentFixed", "20px 70px"); | 148 testGridColumnsValues("gridMinContentAndMaxContentFixed", "20px 70px"); |
| 114 testGridColumnsValues("gridMaxContentFixedAndAuto", "65px 25px"); | 149 testGridColumnsValues("gridMaxContentFixedAndAuto", "65px 25px"); |
| 115 testGridColumnsValues("gridAutoMinContent", "70px 20px"); | 150 testGridColumnsValues("gridAutoMinContent", "70px 20px"); |
| 116 testGridColumnsValues("gridAutoMaxContent", "20px 70px"); | 151 testGridColumnsValues("gridAutoMaxContent", "20px 70px"); |
| 117 testGridColumnsValues("gridMaxContentAndMinContentFixed", "70px 20px"); | 152 testGridColumnsValues("gridMaxContentAndMinContentFixed", "70px 20px"); |
| 118 testGridColumnsValues("gridMaxContentAndMaxContentFixed", "55px 35px"); | 153 testGridColumnsValues("gridMaxContentAndMaxContentFixed", "55px 35px"); |
| 154 |
| 155 testGridColumnsValues("gridMinContentFixedAndAutoAboveLimits", "15px 95px"); |
| 156 testGridColumnsValues("gridMaxContentFixedAndAutoAboveLimits", "65px 85px"); |
| 157 testGridColumnsValues("gridMinContentFixedAndFixedFixedAndAuto", "20px 20px 6
0px"); |
| 158 testGridColumnsValues("gridAutoAndFixedFixedAndMaxContentFixed", "40px 20px 9
0px"); |
| 119 </script> | 159 </script> |
| 120 </body> | 160 </body> |
| 121 </html> | 161 </html> |
| OLD | NEW |