| OLD | NEW |
| 1 <!DOCTYPE HTML> | 1 <!DOCTYPE HTML> |
| 2 <!-- | 2 <!-- |
| 3 Any copyright is dedicated to the Public Domain. | 3 Any copyright is dedicated to the Public Domain. |
| 4 http://creativecommons.org/publicdomain/zero/1.0/ | 4 http://creativecommons.org/publicdomain/zero/1.0/ |
| 5 --> | 5 --> |
| 6 <html><head> | 6 <html><head> |
| 7 <meta charset="utf-8"> | 7 <meta charset="utf-8"> |
| 8 <title>CSS Grid Test: repeat(auto-fill/auto-fit)</title> | 8 <title>CSS Grid Test: repeat(auto-fill/auto-fit)</title> |
| 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/sh
ow_bug.cgi?id=1118820"> | 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/sh
ow_bug.cgi?id=1118820"> |
| 10 <link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-repeat-auto-f
ill"> | 10 <link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-repeat-auto-f
ill"> |
| (...skipping 49 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 60 | 60 |
| 61 x:first-child { | 61 x:first-child { |
| 62 background: lime; | 62 background: lime; |
| 63 } | 63 } |
| 64 x:last-child { | 64 x:last-child { |
| 65 background: blue; | 65 background: blue; |
| 66 } | 66 } |
| 67 | 67 |
| 68 fill,fit { | 68 fill,fit { |
| 69 float: left; | 69 float: left; |
| 70 width: 400px; | 70 width: 390px; |
| 71 } | 71 } |
| 72 </style> | 72 </style> |
| 73 </head> | 73 </head> |
| 74 <body> | 74 <body> |
| 75 | 75 |
| 76 <fill> | 76 <fill> |
| 77 | 77 |
| 78 <div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div> | 78 <div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div> |
| 79 <div class="grid r1 float"><x></x><x></x><a></a><b></b><x></x></div> | 79 <div class="grid r1 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 80 <div class="grid r1 w100"><x></x><x></x><a></a><b></b><x></x></div> | 80 <div class="grid r1 w100"><x></x><x></x><a></a><b></b><x></x></div> |
| (...skipping 34 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 115 <div class="grid r3 xw80"><x></x><x></x><a></a><b></b><x></x></div> | 115 <div class="grid r3 xw80"><x></x><x></x><a></a><b></b><x></x></div> |
| 116 <div class="grid r3 xw50"><x></x><x></x><a></a><b></b><x></x></div> | 116 <div class="grid r3 xw50"><x></x><x></x><a></a><b></b><x></x></div> |
| 117 <div class="grid r3 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> | 117 <div class="grid r3 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> |
| 118 <div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> | 118 <div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 119 <div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> | 119 <div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 120 <div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> | 120 <div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 121 <div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> | 121 <div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 122 | 122 |
| 123 </fill> | 123 </fill> |
| 124 | 124 |
| 125 <!-- TODO(svillar): uncomment these tests when enabling auto-fit. --> | 125 <fit> |
| 126 <!-- <fit> | |
| 127 | 126 |
| 128 <div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div> | 127 <div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div> |
| 129 <div class="grid r1 float"><x></x><x></x><a></a><b></b><x></x></div> | 128 <div class="grid r1 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 130 <div class="grid r1 w100"><x></x><x></x><a></a><b></b><x></x></div> | 129 <div class="grid r1 w100"><x></x><x></x><a></a><b></b><x></x></div> |
| 131 <div class="grid r1 w80"><x></x><x></x><a></a><b></b><x></x></div> | 130 <div class="grid r1 w80"><x></x><x></x><a></a><b></b><x></x></div> |
| 132 <div class="grid r1 w50"><x></x><x></x><a></a><b></b><x></x></div> | 131 <div class="grid r1 w50"><x></x><x></x><a></a><b></b><x></x></div> |
| 133 <div class="grid r1 xw80"><x></x><x></x><a></a><b></b><x></x></div> | 132 <div class="grid r1 xw80"><x></x><x></x><a></a><b></b><x></x></div> |
| 134 <div class="grid r1 xw50"><x></x><x></x><a></a><b></b><x></x></div> | 133 <div class="grid r1 xw50"><x></x><x></x><a></a><b></b><x></x></div> |
| 135 <div class="grid r1 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> | 134 <div class="grid r1 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> |
| 136 <div class="grid r1 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> | 135 <div class="grid r1 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 137 <div class="grid r1 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> | 136 <div class="grid r1 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 138 <div class="grid r1 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></d
iv> | 137 <div class="grid r1 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 139 <div class="grid r1 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></d
iv> | 138 <div class="grid r1 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 140 | 139 |
| 141 <br clear="all"> | 140 <br clear="all"> |
| 142 <br clear="all"> | 141 <br clear="all"> |
| 143 | 142 |
| 144 <div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div> | 143 <div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div> |
| 145 <div class="grid r2 float"><x></x><x></x><a></a><b></b><x></x></div> | 144 <div class="grid r2 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 146 <div class="grid r2 w100"><x></x><x></x><a></a><b></b><x></x></div> | 145 <div class="grid r2 w100"><x></x><x></x><a></a><b></b><x></x></div> |
| 147 <div class="grid r2 w80"><x></x><x></x><a></a><b></b><x></x></div> | 146 <div class="grid r2 w80"><x></x><x></x><a></a><b></b><x></x></div> |
| 148 <div class="grid r2 w50"><x></x><x></x><a></a><b></b><x></x></div> | 147 <div class="grid r2 w50"><x></x><x></x><a></a><b></b><x></x></div> |
| 149 <div class="grid r2 xw80"><x></x><x></x><a></a><b></b><x></x></div> | 148 <div class="grid r2 xw80"><x></x><x></x><a></a><b></b><x></x></div> |
| 150 <div class="grid r2 xw50"><x></x><x></x><a></a><b></b><x></x></div> | 149 <div class="grid r2 xw50"><x></x><x></x><a></a><b></b><x></x></div> |
| 151 <div class="grid r2 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> | 150 <div class="grid r2 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> |
| 152 <div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> | 151 <div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 153 <div class="grid r2 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> | 152 <div class="grid r2 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 154 <div class="grid r2 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></d
iv> | 153 <div class="grid r2 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 155 <div class="grid r2 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></d
iv> | 154 <div class="grid r2 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 156 | 155 |
| 157 <br clear="all"> | 156 <br clear="all"> |
| 158 <br clear="all"> | 157 <br clear="all"> |
| 159 | 158 |
| 160 <div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div> | 159 <div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div> |
| 161 <div class="grid r3 float"><x></x><x></x><a></a><b></b><x></x></div> | 160 <div class="grid r3 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 162 <div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div> | 161 <div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div> |
| 163 <div class="grid r3 w80"><x></x><x></x><a></a><b></b><x></x></div> | 162 <div class="grid r3 w80"><x></x><x></x><a></a><b></b><x></x></div> |
| 164 <div class="grid r3 w50"><x></x><x></x><a></a><b></b><x></x></div> | 163 <div class="grid r3 w50"><x></x><x></x><a></a><b></b><x></x></div> |
| 165 <div class="grid r3 xw80"><x></x><x></x><a></a><b></b><x></x></div> | 164 <div class="grid r3 xw80"><x></x><x></x><a></a><b></b><x></x></div> |
| 166 <div class="grid r3 xw50"><x></x><x></x><a></a><b></b><x></x></div> | 165 <div class="grid r3 xw50"><x></x><x></x><a></a><b></b><x></x></div> |
| 167 <div class="grid r3 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> | 166 <div class="grid r3 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> |
| 168 <div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> | 167 <div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 169 <div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> | 168 <div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 170 <div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></d
iv> | 169 <div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 171 <div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></d
iv> | 170 <div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 172 | 171 |
| 173 <br clear="all"> | 172 <br clear="all"> |
| 174 <br clear="all"> | 173 <br clear="all"> |
| 175 | 174 |
| 176 </fit> --> | 175 </fit> |
| 177 | 176 |
| 178 </body> | 177 </body> |
| 179 </html> | 178 </html> |
| OLD | NEW |