|
1 | 1 | <!DOCTYPE html> |
2 | | -<html> |
3 | 2 | <link rel="match" href="../expected/css-gradients-ref.html" /> |
4 | | -<meta name="fuzzy" content="maxDifference=0-63;totalPixels=0-362"> |
| 3 | +<meta name="fuzzy" content="maxDifference=0-63;totalPixels=0-215"> |
5 | 4 | <style> |
6 | 5 | body { |
7 | 6 | background-color: white; |
8 | 7 | } |
9 | 8 |
|
| 9 | + section.boxes { |
| 10 | + display: grid; |
| 11 | + grid-template-columns: repeat(6, 1fr); |
| 12 | + } |
| 13 | + |
| 14 | + section.rects { |
| 15 | + display: grid; |
| 16 | + grid-template-columns: repeat(3, 1fr); |
| 17 | + } |
| 18 | + |
10 | 19 | div { |
11 | 20 | border: 1px solid black; |
12 | | - margin: 20px; |
| 21 | + margin: 5px; |
13 | 22 | } |
14 | 23 |
|
15 | 24 | .box { |
|
210 | 219 | background-image: repeating-radial-gradient(circle at calc(100% - 10px) calc(20% + 10px), #333, #333 10px, #eee 10px, #eee 20px); |
211 | 220 | } |
212 | 221 | </style> |
213 | | -<body> |
| 222 | +<section class="boxes"> |
214 | 223 | <div class="box grad-0"></div> |
215 | 224 | <div class="box grad-1"></div> |
216 | 225 | <div class="box grad-2"></div> |
|
220 | 229 | <div class="box grad-6"></div> |
221 | 230 | <div class="box grad-rainbow"></div> |
222 | 231 | <div class="box grad-hints"></div> |
223 | | - <div class="rect grad-7"></div> |
224 | 232 | <div class="box grad-8"></div> |
225 | 233 | <div class="box grad-9"></div> |
226 | 234 | <div class="box grad-10"></div> |
227 | | - <div class="rect grad-11"></div> |
228 | | - <div class="rect grad-12"></div> |
229 | | - <div class="rect grad-13"></div> |
230 | | - <div class="rect grad-14"></div> |
231 | | - <div class="rect grad-15"></div> |
232 | 235 | <div class="box grad-webkit"></div> |
233 | 236 | <div class="box grad-repeat-0"></div> |
234 | 237 | <div class="box grad-repeat-1"></div> |
|
243 | 246 | <div class="box grad-conic-6"></div> |
244 | 247 | <div class="box grad-conic-repeat-1"></div> |
245 | 248 | <div class="box grad-conic-repeat-2"></div> |
| 249 | +</section> |
| 250 | +<section class="rects"> |
| 251 | + <div class="rect grad-7"></div> |
| 252 | + <div class="rect grad-11"></div> |
| 253 | + <div class="rect grad-12"></div> |
| 254 | + <div class="rect grad-13"></div> |
| 255 | + <div class="rect grad-14"></div> |
| 256 | + <div class="rect grad-15"></div> |
246 | 257 | <div class="rect grad-radial-1"></div> |
247 | 258 | <div class="rect grad-radial-2"></div> |
248 | 259 | <div class="rect grad-radial-3"></div> |
|
251 | 262 | <div class="rect grad-radial-repeat-2"></div> |
252 | 263 | <div class="rect grad-radial-repeat-3"></div> |
253 | 264 | <div class="rect grad-radial-calc"></div> |
254 | | -</body> |
255 | | -</html> |
| 265 | +</section> |
0 commit comments