| 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 50 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 61 grid-row: auto / c -1; | 61 grid-row: auto / c -1; |
| 62 } | 62 } |
| 63 | 63 |
| 64 x:first-child { | 64 x:first-child { |
| 65 background: lime; | 65 background: lime; |
| 66 } | 66 } |
| 67 x:last-child { | 67 x:last-child { |
| 68 background: blue; | 68 background: blue; |
| 69 } | 69 } |
| 70 | 70 |
| 71 fill,fit { |
| 72 float: left; |
| 73 width: 375px; |
| 74 } |
| 71 </style> | 75 </style> |
| 72 </head> | 76 </head> |
| 73 <body> | 77 <body> |
| 74 | 78 |
| 75 <fill> | 79 <fill> |
| 76 | 80 |
| 77 <div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div> | 81 <div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div> |
| 78 <div class="grid r1 float"><x></x><x></x><a></a><b></b><x></x></div> | 82 <div class="grid r1 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 79 <div class="grid r1 w100"><x></x><x></x><a></a><b></b><x></x></div> | 83 <div class="grid r1 w100"><x></x><x></x><a></a><b></b><x></x></div> |
| 80 <div class="grid r1 w80"><x></x><x></x><a></a><b></b><x></x></div> | 84 <div class="grid r1 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... |
| 114 <div class="grid r3 xw80"><x></x><x></x><a></a><b></b><x></x></div> | 118 <div class="grid r3 xw80"><x></x><x></x><a></a><b></b><x></x></div> |
| 115 <div class="grid r3 xw50"><x></x><x></x><a></a><b></b><x></x></div> | 119 <div class="grid r3 xw50"><x></x><x></x><a></a><b></b><x></x></div> |
| 116 <div class="grid r3 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> | 120 <div class="grid r3 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> |
| 117 <div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> | 121 <div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 118 <div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> | 122 <div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 119 <div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> | 123 <div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 120 <div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> | 124 <div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 121 | 125 |
| 122 </fill> | 126 </fill> |
| 123 | 127 |
| 128 <!-- This was in the original Mozilla tests. We need to remove it to keep the wh
ole content in the viewport without scrolls. --> |
| 129 <!-- <br clear="all"> |
| 130 <br clear="all"> --> |
| 131 |
| 132 <fit> |
| 133 |
| 134 <div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div> |
| 135 <div class="grid r1 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 136 <div class="grid r1 w100"><x></x><x></x><a></a><b></b><x></x></div> |
| 137 <div class="grid r1 w80"><x></x><x></x><a></a><b></b><x></x></div> |
| 138 <div class="grid r1 w50"><x></x><x></x><a></a><b></b><x></x></div> |
| 139 <div class="grid r1 xw80"><x></x><x></x><a></a><b></b><x></x></div> |
| 140 <div class="grid r1 xw50"><x></x><x></x><a></a><b></b><x></x></div> |
| 141 <div class="grid r1 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> |
| 142 <div class="grid r1 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 143 <div class="grid r1 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 144 <div class="grid r1 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 145 <div class="grid r1 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 146 |
| 124 <br clear="all"> | 147 <br clear="all"> |
| 125 <br clear="all"> | 148 <br clear="all"> |
| 126 | 149 |
| 127 <!-- TODO(svillar): uncomment these tests when enabling auto-fit. --> | 150 <div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div> |
| 128 <!-- <fit> | 151 <div class="grid r2 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 152 <div class="grid r2 w100"><x></x><x></x><a></a><b></b><x></x></div> |
| 153 <div class="grid r2 w80"><x></x><x></x><a></a><b></b><x></x></div> |
| 154 <div class="grid r2 w50"><x></x><x></x><a></a><b></b><x></x></div> |
| 155 <div class="grid r2 xw80"><x></x><x></x><a></a><b></b><x></x></div> |
| 156 <div class="grid r2 xw50"><x></x><x></x><a></a><b></b><x></x></div> |
| 157 <div class="grid r2 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> |
| 158 <div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 159 <div class="grid r2 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 160 <div class="grid r2 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 161 <div class="grid r2 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 129 | 162 |
| 130 <div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div> | 163 <br clear="all"> |
| 131 <div class="grid r1 float"><x></x><x></x><a></a><b></b><x></x></div> | 164 <br clear="all"> |
| 132 <div class="grid r1 w100"><x></x><x></x><a></a><b></b><x></x></div> | |
| 133 <div class="grid r1 w80"><x></x><x></x><a></a><b></b><x></x></div> | |
| 134 <div class="grid r1 w50"><x></x><x></x><a></a><b></b><x></x></div> | |
| 135 <div class="grid r1 xw80"><x></x><x></x><a></a><b></b><x></x></div> | |
| 136 <div class="grid r1 xw50"><x></x><x></x><a></a><b></b><x></x></div> | |
| 137 <div class="grid r1 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> | |
| 138 <div class="grid r1 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> | |
| 139 <div class="grid r1 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> | |
| 140 <div class="grid r1 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></d
iv> | |
| 141 <div class="grid r1 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></d
iv> | |
| 142 | 165 |
| 143 <br clear="all"> | 166 <div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div> |
| 144 <br clear="all"> | 167 <div class="grid r3 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 168 <div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div> |
| 169 <div class="grid r3 w80"><x></x><x></x><a></a><b></b><x></x></div> |
| 170 <div class="grid r3 w50"><x></x><x></x><a></a><b></b><x></x></div> |
| 171 <div class="grid r3 xw80"><x></x><x></x><a></a><b></b><x></x></div> |
| 172 <div class="grid r3 xw50"><x></x><x></x><a></a><b></b><x></x></div> |
| 173 <div class="grid r3 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> |
| 174 <div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 175 <div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 176 <div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 177 <div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> |
| 145 | 178 |
| 146 <div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div> | 179 <br clear="all"> |
| 147 <div class="grid r2 float"><x></x><x></x><a></a><b></b><x></x></div> | 180 <br clear="all"> |
| 148 <div class="grid r2 w100"><x></x><x></x><a></a><b></b><x></x></div> | |
| 149 <div class="grid r2 w80"><x></x><x></x><a></a><b></b><x></x></div> | |
| 150 <div class="grid r2 w50"><x></x><x></x><a></a><b></b><x></x></div> | |
| 151 <div class="grid r2 xw80"><x></x><x></x><a></a><b></b><x></x></div> | |
| 152 <div class="grid r2 xw50"><x></x><x></x><a></a><b></b><x></x></div> | |
| 153 <div class="grid r2 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> | |
| 154 <div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> | |
| 155 <div class="grid r2 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> | |
| 156 <div class="grid r2 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></d
iv> | |
| 157 <div class="grid r2 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></d
iv> | |
| 158 | 181 |
| 159 <br clear="all"> | 182 </fit> |
| 160 <br clear="all"> | |
| 161 | |
| 162 <div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div> | |
| 163 <div class="grid r3 float"><x></x><x></x><a></a><b></b><x></x></div> | |
| 164 <div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div> | |
| 165 <div class="grid r3 w80"><x></x><x></x><a></a><b></b><x></x></div> | |
| 166 <div class="grid r3 w50"><x></x><x></x><a></a><b></b><x></x></div> | |
| 167 <div class="grid r3 xw80"><x></x><x></x><a></a><b></b><x></x></div> | |
| 168 <div class="grid r3 xw50"><x></x><x></x><a></a><b></b><x></x></div> | |
| 169 <div class="grid r3 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> | |
| 170 <div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> | |
| 171 <div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> | |
| 172 <div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></d
iv> | |
| 173 <div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></d
iv> | |
| 174 | |
| 175 <br clear="all"> | |
| 176 <br clear="all"> | |
| 177 | |
| 178 </fit> --> | |
| 179 | 183 |
| 180 | 184 |
| 181 </body> | 185 </body> |
| 182 </html> | 186 </html> |
| OLD | NEW |