| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <link href="resources/grid.css" rel="stylesheet"> | 4 <link href="resources/grid.css" rel="stylesheet"> |
| 5 <style> | 5 <style> |
| 6 .grid { | 6 .grid { |
| 7 grid-template-columns: 20% 50% 30%; | 7 grid-template-columns: 20% 50% 30%; |
| 8 grid-template-rows: 40%; | 8 grid-template-rows: 40%; |
| 9 } | 9 } |
| 10 | 10 |
| (...skipping 10 matching lines...) Expand all Loading... |
| 21 .percentageSize { | 21 .percentageSize { |
| 22 width: 50%; | 22 width: 50%; |
| 23 height: 50%; | 23 height: 50%; |
| 24 } | 24 } |
| 25 | 25 |
| 26 .indefiniteSize { | 26 .indefiniteSize { |
| 27 width: -webkit-fit-content; | 27 width: -webkit-fit-content; |
| 28 height: auto; | 28 height: auto; |
| 29 } | 29 } |
| 30 | 30 |
| 31 .legacyIntrinsicSize { | 31 .fitContentSize { |
| 32 width: intrinsic; | 32 width: fit-content; |
| 33 height: intrinsic; | 33 height: fit-content; |
| 34 } | 34 } |
| 35 | 35 |
| 36 .firstRowFirstColumn { | 36 .firstRowFirstColumn { |
| 37 color: blue; | 37 color: blue; |
| 38 background-color: cyan; | 38 background-color: cyan; |
| 39 } | 39 } |
| 40 | 40 |
| 41 .firstRowSecondColumn { | 41 .firstRowSecondColumn { |
| 42 color: green; | 42 color: green; |
| 43 background-color: lime; | 43 background-color: lime; |
| (...skipping 84 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 128 | 128 |
| 129 <div class="unconstrainedContainer"> | 129 <div class="unconstrainedContainer"> |
| 130 <div class="grid indefiniteSize"> | 130 <div class="grid indefiniteSize"> |
| 131 <div class="firstRowFirstColumn sizedToGridArea" data-expected-width
="20" data-expected-height="10">XX</div> | 131 <div class="firstRowFirstColumn sizedToGridArea" data-expected-width
="20" data-expected-height="10">XX</div> |
| 132 <div class="firstRowSecondColumn sizedToGridArea" data-expected-widt
h="50" data-expected-height="10">XXXXX</div> | 132 <div class="firstRowSecondColumn sizedToGridArea" data-expected-widt
h="50" data-expected-height="10">XXXXX</div> |
| 133 <div class="firstRowThirdColumn sizedToGridArea" data-expected-width
="30" data-expected-height="10">XXX</div> | 133 <div class="firstRowThirdColumn sizedToGridArea" data-expected-width
="30" data-expected-height="10">XXX</div> |
| 134 </div> | 134 </div> |
| 135 </div> | 135 </div> |
| 136 | 136 |
| 137 <div class="indefiniteSize"> | 137 <div class="indefiniteSize"> |
| 138 <div class="grid legacyIntrinsicSize"> | 138 <div class="grid fitContentSize"> |
| 139 <div class="firstRowFirstColumn sizedToGridArea" data-expected-width
="20" data-expected-height="10">XX</div> | 139 <div class="firstRowFirstColumn sizedToGridArea" data-expected-width
="20" data-expected-height="10">XX</div> |
| 140 <div class="firstRowSecondColumn sizedToGridArea" data-expected-widt
h="50" data-expected-height="10">XXXXX</div> | 140 <div class="firstRowSecondColumn sizedToGridArea" data-expected-widt
h="50" data-expected-height="10">XXXXX</div> |
| 141 <div class="firstRowThirdColumn sizedToGridArea" data-expected-width
="30" data-expected-height="10">XXX</div> | 141 <div class="firstRowThirdColumn sizedToGridArea" data-expected-width
="30" data-expected-height="10">XXX</div> |
| 142 </div> | 142 </div> |
| 143 </div> | 143 </div> |
| 144 | 144 |
| 145 <div class="unconstrainedContainer"> | 145 <div class="unconstrainedContainer"> |
| 146 <div class="grid legacyIntrinsicSize"> | 146 <div class="grid fitContentSize"> |
| 147 <div class="firstRowFirstColumn sizedToGridArea" data-expected-width
="20" data-expected-height="10">XX</div> | 147 <div class="firstRowFirstColumn sizedToGridArea" data-expected-width
="20" data-expected-height="10">XX</div> |
| 148 <div class="firstRowSecondColumn sizedToGridArea" data-expected-widt
h="50" data-expected-height="10">XXXXX</div> | 148 <div class="firstRowSecondColumn sizedToGridArea" data-expected-widt
h="50" data-expected-height="10">XXXXX</div> |
| 149 <div class="firstRowThirdColumn sizedToGridArea" data-expected-width
="30" data-expected-height="10">XXX</div> | 149 <div class="firstRowThirdColumn sizedToGridArea" data-expected-width
="30" data-expected-height="10">XXX</div> |
| 150 </div> | 150 </div> |
| 151 </div> | 151 </div> |
| 152 | 152 |
| 153 </body> | 153 </body> |
| 154 </html> | 154 </html> |
| OLD | NEW |