| 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>Reference: repeat(auto-fill/auto-fit)</title> | 8 <title>Reference: 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 <style type="text/css"> | 10 <style type="text/css"> |
| (...skipping 60 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 71 grid-row: auto / c -1; | 71 grid-row: auto / c -1; |
| 72 } | 72 } |
| 73 | 73 |
| 74 x:first-child { | 74 x:first-child { |
| 75 background: lime; | 75 background: lime; |
| 76 } | 76 } |
| 77 x:last-child { | 77 x:last-child { |
| 78 background: blue; | 78 background: blue; |
| 79 } | 79 } |
| 80 | 80 |
| 81 fill,fit { |
| 82 float: left; |
| 83 width: 375px; |
| 84 } |
| 85 |
| 81 </style> | 86 </style> |
| 82 </head> | 87 </head> |
| 83 <body> | 88 <body> |
| 84 | 89 |
| 85 <fill> | 90 <fill> |
| 86 | 91 |
| 87 <div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div> | 92 <div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div> |
| 88 <div class="grid r1 float"><x></x><x></x><a></a><b></b><x></x></div> | 93 <div class="grid r1 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 89 <div class="grid r14 w100"><x></x><x></x><a></a><b></b><x></x></div> | 94 <div class="grid r14 w100"><x></x><x></x><a></a><b></b><x></x></div> |
| 90 <div class="grid r13 w80"><x></x><x></x><a></a><b></b><x></x></div> | 95 <div class="grid r13 w80"><x></x><x></x><a></a><b></b><x></x></div> |
| (...skipping 33 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 124 <div class="grid r30 xw80"><x></x><x></x><a></a><b></b><x></x></div> | 129 <div class="grid r30 xw80"><x></x><x></x><a></a><b></b><x></x></div> |
| 125 <div class="grid r30 xw50"><x></x><x></x><a></a><b></b><x></x></div> | 130 <div class="grid r30 xw50"><x></x><x></x><a></a><b></b><x></x></div> |
| 126 <div class="grid r30 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> | 131 <div class="grid r30 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> |
| 127 <div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> | 132 <div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 128 <div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> | 133 <div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 129 <div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> | 134 <div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 130 <div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> | 135 <div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 131 | 136 |
| 132 </fill> | 137 </fill> |
| 133 | 138 |
| 139 <!-- This was in the original Mozilla tests. We need to remove it to keep the wh
ole content in the viewport without scrolls. --> |
| 140 <!-- <br clear="all"> |
| 141 <br clear="all"> --> |
| 142 |
| 143 <fit> |
| 144 |
| 145 <div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div> |
| 146 <div class="grid r1 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 147 <div class="grid r13 w100"><x></x><x></x><a></a><b></b><x></x></div> |
| 148 <div class="grid r13 w80"><x></x><x></x><a></a><b></b><x></x></div> |
| 149 <div class="grid r12 w50"><x></x><x></x><a></a><b></b><x></x></div> |
| 150 <div class="grid r13 xw80"><x></x><x></x><a></a><b></b><x></x></div> |
| 151 <div class="grid r12 xw50"><x></x><x></x><a></a><b></b><x></x></div> |
| 152 <div class="grid r13 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> |
| 153 <div class="grid r13 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 154 <div class="grid r13 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 155 <div class="grid r13 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 156 <div class="grid r13 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 157 |
| 134 <br clear="all"> | 158 <br clear="all"> |
| 135 <br clear="all"> | 159 <br clear="all"> |
| 136 | 160 |
| 137 <!-- <fit> | 161 <div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div> |
| 162 <div class="grid r2 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 163 <div class="grid r23 w100"><x></x><x></x><a></a><b></b><x></x></div> |
| 164 <div class="grid r22 w80"><x></x><x></x><a></a><b></b><x></x></div> |
| 165 <div class="grid r20 w50"><x></x><x></x><a></a><b></b><x></x></div> |
| 166 <div class="grid r22 xw80"><x></x><x></x><a></a><b></b><x></x></div> |
| 167 <div class="grid r20 xw50"><x></x><x></x><a></a><b></b><x></x></div> |
| 168 <div class="grid r22 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> |
| 169 <div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 170 <div class="grid r23 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 171 <div class="grid r23 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 172 <div class="grid r23 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 138 | 173 |
| 139 <div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div> | 174 <br clear="all"> |
| 140 <div class="grid r1 float"><x></x><x></x><a></a><b></b><x></x></div> | 175 <br clear="all"> |
| 141 <div class="grid r13 w100"><x></x><x></x><a></a><b></b><x></x></div> | |
| 142 <div class="grid r13 w80"><x></x><x></x><a></a><b></b><x></x></div> | |
| 143 <div class="grid r12 w50"><x></x><x></x><a></a><b></b><x></x></div> | |
| 144 <div class="grid r13 xw80"><x></x><x></x><a></a><b></b><x></x></div> | |
| 145 <div class="grid r12 xw50"><x></x><x></x><a></a><b></b><x></x></div> | |
| 146 <div class="grid r13 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> | |
| 147 <div class="grid r13 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> | |
| 148 <div class="grid r13 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> | |
| 149 <div class="grid r13 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></
div> | |
| 150 <div class="grid r13 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></
div> | |
| 151 | 176 |
| 152 <br clear="all"> | 177 <div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div> |
| 153 <br clear="all"> | 178 <div class="grid r3 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 179 <div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div> |
| 180 <div class="grid r30 w80"><x></x><x></x><a></a><b></b><x></x></div> |
| 181 <div class="grid r30 w50"><x></x><x></x><a></a><b></b><x></x></div> |
| 182 <div class="grid r30 xw80"><x></x><x></x><a></a><b></b><x></x></div> |
| 183 <div class="grid r30 xw50"><x></x><x></x><a></a><b></b><x></x></div> |
| 184 <div class="grid r30 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> |
| 185 <div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 186 <div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 187 <div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 188 <div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 154 | 189 |
| 155 <div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div> | 190 <br clear="all"> |
| 156 <div class="grid r2 float"><x></x><x></x><a></a><b></b><x></x></div> | 191 <br clear="all"> |
| 157 <div class="grid r23 w100"><x></x><x></x><a></a><b></b><x></x></div> | |
| 158 <div class="grid r22 w80"><x></x><x></x><a></a><b></b><x></x></div> | |
| 159 <div class="grid r20 w50"><x></x><x></x><a></a><b></b><x></x></div> | |
| 160 <div class="grid r22 xw80"><x></x><x></x><a></a><b></b><x></x></div> | |
| 161 <div class="grid r20 xw50"><x></x><x></x><a></a><b></b><x></x></div> | |
| 162 <div class="grid r22 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> | |
| 163 <div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> | |
| 164 <div class="grid r23 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> | |
| 165 <div class="grid r23 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></
div> | |
| 166 <div class="grid r23 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></
div> | |
| 167 | 192 |
| 168 <br clear="all"> | 193 </fit> |
| 169 <br clear="all"> | |
| 170 | |
| 171 <div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div> | |
| 172 <div class="grid r3 float"><x></x><x></x><a></a><b></b><x></x></div> | |
| 173 <div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div> | |
| 174 <div class="grid r30 w80"><x></x><x></x><a></a><b></b><x></x></div> | |
| 175 <div class="grid r30 w50"><x></x><x></x><a></a><b></b><x></x></div> | |
| 176 <div class="grid r30 xw80"><x></x><x></x><a></a><b></b><x></x></div> | |
| 177 <div class="grid r30 xw50"><x></x><x></x><a></a><b></b><x></x></div> | |
| 178 <div class="grid r30 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> | |
| 179 <div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> | |
| 180 <div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> | |
| 181 <div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></d
iv> | |
| 182 <div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></d
iv> | |
| 183 | |
| 184 <br clear="all"> | |
| 185 <br clear="all"> | |
| 186 | |
| 187 </fit> --> | |
| 188 | 194 |
| 189 | 195 |
| 190 </body> | 196 </body> |
| 191 </html> | 197 </html> |
| OLD | NEW |