2d.gradient.hueInterpolationMethod-expected.html (9153B)
1 <!DOCTYPE html> 2 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> 3 <meta charset="UTF-8"> 4 <title>Canvas test: 2d.gradient.hueInterpolationMethod</title> 5 <link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css"> 6 <h1>2d.gradient.hueInterpolationMethod</h1> 7 <p class="desc">CSS hue interpolation methods work for CanvasGradients</p> 8 9 <div class="grid-container" style="--grid-width: 4"> 10 <span> 11 <div>shorter</div> 12 <div>hsl</div> 13 <div class="grid-cell-content" 14 style="width: 100px; height: 50px;"> 15 <style> 16 .swatch { 17 width: 100%; 18 height: 50%; 19 } 20 </style> 21 <div class="swatch" style="background: 22 linear-gradient(to right in hsl shorter 23 hue, color(srgb 1 0 0), color(srgb 0 1 0)); 24 "></div> 25 <div class="swatch" style="background: 26 linear-gradient(to right in hsl shorter 27 hue, color(srgb 1 0 0), color(srgb 0 0 1)); 28 "></div> 29 </div> 30 </span> 31 32 <span> 33 <div>longer</div> 34 <div>hsl</div> 35 <div class="grid-cell-content" 36 style="width: 100px; height: 50px;"> 37 <style> 38 .swatch { 39 width: 100%; 40 height: 50%; 41 } 42 </style> 43 <div class="swatch" style="background: 44 linear-gradient(to right in hsl longer 45 hue, color(srgb 1 0 0), color(srgb 0 1 0)); 46 "></div> 47 <div class="swatch" style="background: 48 linear-gradient(to right in hsl longer 49 hue, color(srgb 1 0 0), color(srgb 0 0 1)); 50 "></div> 51 </div> 52 </span> 53 54 <span> 55 <div>increasing</div> 56 <div>hsl</div> 57 <div class="grid-cell-content" 58 style="width: 100px; height: 50px;"> 59 <style> 60 .swatch { 61 width: 100%; 62 height: 50%; 63 } 64 </style> 65 <div class="swatch" style="background: 66 linear-gradient(to right in hsl increasing 67 hue, color(srgb 1 0 0), color(srgb 0 1 0)); 68 "></div> 69 <div class="swatch" style="background: 70 linear-gradient(to right in hsl increasing 71 hue, color(srgb 1 0 0), color(srgb 0 0 1)); 72 "></div> 73 </div> 74 </span> 75 76 <span> 77 <div>decreasing</div> 78 <div>hsl</div> 79 <div class="grid-cell-content" 80 style="width: 100px; height: 50px;"> 81 <style> 82 .swatch { 83 width: 100%; 84 height: 50%; 85 } 86 </style> 87 <div class="swatch" style="background: 88 linear-gradient(to right in hsl decreasing 89 hue, color(srgb 1 0 0), color(srgb 0 1 0)); 90 "></div> 91 <div class="swatch" style="background: 92 linear-gradient(to right in hsl decreasing 93 hue, color(srgb 1 0 0), color(srgb 0 0 1)); 94 "></div> 95 </div> 96 </span> 97 98 <span> 99 <div>shorter</div> 100 <div>hwb</div> 101 <div class="grid-cell-content" 102 style="width: 100px; height: 50px;"> 103 <style> 104 .swatch { 105 width: 100%; 106 height: 50%; 107 } 108 </style> 109 <div class="swatch" style="background: 110 linear-gradient(to right in hwb shorter 111 hue, color(srgb 1 0 0), color(srgb 0 1 0)); 112 "></div> 113 <div class="swatch" style="background: 114 linear-gradient(to right in hwb shorter 115 hue, color(srgb 1 0 0), color(srgb 0 0 1)); 116 "></div> 117 </div> 118 </span> 119 120 <span> 121 <div>longer</div> 122 <div>hwb</div> 123 <div class="grid-cell-content" 124 style="width: 100px; height: 50px;"> 125 <style> 126 .swatch { 127 width: 100%; 128 height: 50%; 129 } 130 </style> 131 <div class="swatch" style="background: 132 linear-gradient(to right in hwb longer 133 hue, color(srgb 1 0 0), color(srgb 0 1 0)); 134 "></div> 135 <div class="swatch" style="background: 136 linear-gradient(to right in hwb longer 137 hue, color(srgb 1 0 0), color(srgb 0 0 1)); 138 "></div> 139 </div> 140 </span> 141 142 <span> 143 <div>increasing</div> 144 <div>hwb</div> 145 <div class="grid-cell-content" 146 style="width: 100px; height: 50px;"> 147 <style> 148 .swatch { 149 width: 100%; 150 height: 50%; 151 } 152 </style> 153 <div class="swatch" style="background: 154 linear-gradient(to right in hwb increasing 155 hue, color(srgb 1 0 0), color(srgb 0 1 0)); 156 "></div> 157 <div class="swatch" style="background: 158 linear-gradient(to right in hwb increasing 159 hue, color(srgb 1 0 0), color(srgb 0 0 1)); 160 "></div> 161 </div> 162 </span> 163 164 <span> 165 <div>decreasing</div> 166 <div>hwb</div> 167 <div class="grid-cell-content" 168 style="width: 100px; height: 50px;"> 169 <style> 170 .swatch { 171 width: 100%; 172 height: 50%; 173 } 174 </style> 175 <div class="swatch" style="background: 176 linear-gradient(to right in hwb decreasing 177 hue, color(srgb 1 0 0), color(srgb 0 1 0)); 178 "></div> 179 <div class="swatch" style="background: 180 linear-gradient(to right in hwb decreasing 181 hue, color(srgb 1 0 0), color(srgb 0 0 1)); 182 "></div> 183 </div> 184 </span> 185 186 <span> 187 <div>shorter</div> 188 <div>lch</div> 189 <div class="grid-cell-content" 190 style="width: 100px; height: 50px;"> 191 <style> 192 .swatch { 193 width: 100%; 194 height: 50%; 195 } 196 </style> 197 <div class="swatch" style="background: 198 linear-gradient(to right in lch shorter 199 hue, color(srgb 1 0 0), color(srgb 0 1 0)); 200 "></div> 201 <div class="swatch" style="background: 202 linear-gradient(to right in lch shorter 203 hue, color(srgb 1 0 0), color(srgb 0 0 1)); 204 "></div> 205 </div> 206 </span> 207 208 <span> 209 <div>longer</div> 210 <div>lch</div> 211 <div class="grid-cell-content" 212 style="width: 100px; height: 50px;"> 213 <style> 214 .swatch { 215 width: 100%; 216 height: 50%; 217 } 218 </style> 219 <div class="swatch" style="background: 220 linear-gradient(to right in lch longer 221 hue, color(srgb 1 0 0), color(srgb 0 1 0)); 222 "></div> 223 <div class="swatch" style="background: 224 linear-gradient(to right in lch longer 225 hue, color(srgb 1 0 0), color(srgb 0 0 1)); 226 "></div> 227 </div> 228 </span> 229 230 <span> 231 <div>increasing</div> 232 <div>lch</div> 233 <div class="grid-cell-content" 234 style="width: 100px; height: 50px;"> 235 <style> 236 .swatch { 237 width: 100%; 238 height: 50%; 239 } 240 </style> 241 <div class="swatch" style="background: 242 linear-gradient(to right in lch increasing 243 hue, color(srgb 1 0 0), color(srgb 0 1 0)); 244 "></div> 245 <div class="swatch" style="background: 246 linear-gradient(to right in lch increasing 247 hue, color(srgb 1 0 0), color(srgb 0 0 1)); 248 "></div> 249 </div> 250 </span> 251 252 <span> 253 <div>decreasing</div> 254 <div>lch</div> 255 <div class="grid-cell-content" 256 style="width: 100px; height: 50px;"> 257 <style> 258 .swatch { 259 width: 100%; 260 height: 50%; 261 } 262 </style> 263 <div class="swatch" style="background: 264 linear-gradient(to right in lch decreasing 265 hue, color(srgb 1 0 0), color(srgb 0 1 0)); 266 "></div> 267 <div class="swatch" style="background: 268 linear-gradient(to right in lch decreasing 269 hue, color(srgb 1 0 0), color(srgb 0 0 1)); 270 "></div> 271 </div> 272 </span> 273 274 <span> 275 <div>shorter</div> 276 <div>oklch</div> 277 <div class="grid-cell-content" 278 style="width: 100px; height: 50px;"> 279 <style> 280 .swatch { 281 width: 100%; 282 height: 50%; 283 } 284 </style> 285 <div class="swatch" style="background: 286 linear-gradient(to right in oklch shorter 287 hue, color(srgb 1 0 0), color(srgb 0 1 0)); 288 "></div> 289 <div class="swatch" style="background: 290 linear-gradient(to right in oklch shorter 291 hue, color(srgb 1 0 0), color(srgb 0 0 1)); 292 "></div> 293 </div> 294 </span> 295 296 <span> 297 <div>longer</div> 298 <div>oklch</div> 299 <div class="grid-cell-content" 300 style="width: 100px; height: 50px;"> 301 <style> 302 .swatch { 303 width: 100%; 304 height: 50%; 305 } 306 </style> 307 <div class="swatch" style="background: 308 linear-gradient(to right in oklch longer 309 hue, color(srgb 1 0 0), color(srgb 0 1 0)); 310 "></div> 311 <div class="swatch" style="background: 312 linear-gradient(to right in oklch longer 313 hue, color(srgb 1 0 0), color(srgb 0 0 1)); 314 "></div> 315 </div> 316 </span> 317 318 <span> 319 <div>increasing</div> 320 <div>oklch</div> 321 <div class="grid-cell-content" 322 style="width: 100px; height: 50px;"> 323 <style> 324 .swatch { 325 width: 100%; 326 height: 50%; 327 } 328 </style> 329 <div class="swatch" style="background: 330 linear-gradient(to right in oklch increasing 331 hue, color(srgb 1 0 0), color(srgb 0 1 0)); 332 "></div> 333 <div class="swatch" style="background: 334 linear-gradient(to right in oklch increasing 335 hue, color(srgb 1 0 0), color(srgb 0 0 1)); 336 "></div> 337 </div> 338 </span> 339 340 <span> 341 <div>decreasing</div> 342 <div>oklch</div> 343 <div class="grid-cell-content" 344 style="width: 100px; height: 50px;"> 345 <style> 346 .swatch { 347 width: 100%; 348 height: 50%; 349 } 350 </style> 351 <div class="swatch" style="background: 352 linear-gradient(to right in oklch decreasing 353 hue, color(srgb 1 0 0), color(srgb 0 1 0)); 354 "></div> 355 <div class="swatch" style="background: 356 linear-gradient(to right in oklch decreasing 357 hue, color(srgb 1 0 0), color(srgb 0 0 1)); 358 "></div> 359 </div> 360 </span> 361 362 </div>