2d.gradient.hueInterpolationMethod.html (18379B)
1 <!DOCTYPE html> 2 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> 3 <meta charset="UTF-8"> 4 <link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css"> 5 <link rel="match" href="2d.gradient.hueInterpolationMethod-expected.html"> 6 <meta name=fuzzy content="maxDifference=0-1; totalPixels=0-60000"> 7 <title>Canvas test: 2d.gradient.hueInterpolationMethod</title> 8 <h1>2d.gradient.hueInterpolationMethod</h1> 9 <p class="desc">CSS hue interpolation methods work for CanvasGradients</p> 10 11 <div class="grid-container" style="--grid-width: 4"> 12 <span> 13 <div>shorter</div> 14 <div>hsl</div> 15 <canvas class="grid-cell-content" id="canvas0" width="100" height="50"> 16 <p class="fallback">FAIL (fallback content)</p> 17 </canvas> 18 <script type="module"> 19 const canvas = document.getElementById("canvas0"); 20 const ctx = canvas.getContext('2d'); 21 22 // Generate two gradients, one from red to green, the other from red to blue. 23 // In the first instance "shorter" is equivalent to "increasing". 24 // In the second, "shorter" is equivalent to "decreasing". 25 26 var g = ctx.createLinearGradient(0, 0, 100, 0); 27 g.addColorStop(0, 'color(srgb 1 0 0)'); 28 g.addColorStop(1, 'color(srgb 0 1 0)'); 29 g.colorInterpolationMethod = 'hsl'; 30 g.hueInterpolationMethod = 'shorter'; 31 ctx.fillStyle = g; 32 ctx.fillRect(0, 0, 100, 25); 33 34 var g2 = ctx.createLinearGradient(0, 0, 100, 0); 35 g2.addColorStop(0, 'color(srgb 1 0 0)'); 36 g2.addColorStop(1, 'color(srgb 0 0 1)'); 37 g2.colorInterpolationMethod = 'hsl'; 38 g2.hueInterpolationMethod = 'shorter'; 39 ctx.fillStyle = g2; 40 ctx.fillRect(0, 25, 100, 25); 41 </script> 42 </span> 43 44 <span> 45 <div>longer</div> 46 <div>hsl</div> 47 <canvas class="grid-cell-content" id="canvas1" width="100" height="50"> 48 <p class="fallback">FAIL (fallback content)</p> 49 </canvas> 50 <script type="module"> 51 const canvas = document.getElementById("canvas1"); 52 const ctx = canvas.getContext('2d'); 53 54 // Generate two gradients, one from red to green, the other from red to blue. 55 // In the first instance "shorter" is equivalent to "increasing". 56 // In the second, "shorter" is equivalent to "decreasing". 57 58 var g = ctx.createLinearGradient(0, 0, 100, 0); 59 g.addColorStop(0, 'color(srgb 1 0 0)'); 60 g.addColorStop(1, 'color(srgb 0 1 0)'); 61 g.colorInterpolationMethod = 'hsl'; 62 g.hueInterpolationMethod = 'longer'; 63 ctx.fillStyle = g; 64 ctx.fillRect(0, 0, 100, 25); 65 66 var g2 = ctx.createLinearGradient(0, 0, 100, 0); 67 g2.addColorStop(0, 'color(srgb 1 0 0)'); 68 g2.addColorStop(1, 'color(srgb 0 0 1)'); 69 g2.colorInterpolationMethod = 'hsl'; 70 g2.hueInterpolationMethod = 'longer'; 71 ctx.fillStyle = g2; 72 ctx.fillRect(0, 25, 100, 25); 73 </script> 74 </span> 75 76 <span> 77 <div>increasing</div> 78 <div>hsl</div> 79 <canvas class="grid-cell-content" id="canvas2" width="100" height="50"> 80 <p class="fallback">FAIL (fallback content)</p> 81 </canvas> 82 <script type="module"> 83 const canvas = document.getElementById("canvas2"); 84 const ctx = canvas.getContext('2d'); 85 86 // Generate two gradients, one from red to green, the other from red to blue. 87 // In the first instance "shorter" is equivalent to "increasing". 88 // In the second, "shorter" is equivalent to "decreasing". 89 90 var g = ctx.createLinearGradient(0, 0, 100, 0); 91 g.addColorStop(0, 'color(srgb 1 0 0)'); 92 g.addColorStop(1, 'color(srgb 0 1 0)'); 93 g.colorInterpolationMethod = 'hsl'; 94 g.hueInterpolationMethod = 'increasing'; 95 ctx.fillStyle = g; 96 ctx.fillRect(0, 0, 100, 25); 97 98 var g2 = ctx.createLinearGradient(0, 0, 100, 0); 99 g2.addColorStop(0, 'color(srgb 1 0 0)'); 100 g2.addColorStop(1, 'color(srgb 0 0 1)'); 101 g2.colorInterpolationMethod = 'hsl'; 102 g2.hueInterpolationMethod = 'increasing'; 103 ctx.fillStyle = g2; 104 ctx.fillRect(0, 25, 100, 25); 105 </script> 106 </span> 107 108 <span> 109 <div>decreasing</div> 110 <div>hsl</div> 111 <canvas class="grid-cell-content" id="canvas3" width="100" height="50"> 112 <p class="fallback">FAIL (fallback content)</p> 113 </canvas> 114 <script type="module"> 115 const canvas = document.getElementById("canvas3"); 116 const ctx = canvas.getContext('2d'); 117 118 // Generate two gradients, one from red to green, the other from red to blue. 119 // In the first instance "shorter" is equivalent to "increasing". 120 // In the second, "shorter" is equivalent to "decreasing". 121 122 var g = ctx.createLinearGradient(0, 0, 100, 0); 123 g.addColorStop(0, 'color(srgb 1 0 0)'); 124 g.addColorStop(1, 'color(srgb 0 1 0)'); 125 g.colorInterpolationMethod = 'hsl'; 126 g.hueInterpolationMethod = 'decreasing'; 127 ctx.fillStyle = g; 128 ctx.fillRect(0, 0, 100, 25); 129 130 var g2 = ctx.createLinearGradient(0, 0, 100, 0); 131 g2.addColorStop(0, 'color(srgb 1 0 0)'); 132 g2.addColorStop(1, 'color(srgb 0 0 1)'); 133 g2.colorInterpolationMethod = 'hsl'; 134 g2.hueInterpolationMethod = 'decreasing'; 135 ctx.fillStyle = g2; 136 ctx.fillRect(0, 25, 100, 25); 137 </script> 138 </span> 139 140 <span> 141 <div>shorter</div> 142 <div>hwb</div> 143 <canvas class="grid-cell-content" id="canvas4" width="100" height="50"> 144 <p class="fallback">FAIL (fallback content)</p> 145 </canvas> 146 <script type="module"> 147 const canvas = document.getElementById("canvas4"); 148 const ctx = canvas.getContext('2d'); 149 150 // Generate two gradients, one from red to green, the other from red to blue. 151 // In the first instance "shorter" is equivalent to "increasing". 152 // In the second, "shorter" is equivalent to "decreasing". 153 154 var g = ctx.createLinearGradient(0, 0, 100, 0); 155 g.addColorStop(0, 'color(srgb 1 0 0)'); 156 g.addColorStop(1, 'color(srgb 0 1 0)'); 157 g.colorInterpolationMethod = 'hwb'; 158 g.hueInterpolationMethod = 'shorter'; 159 ctx.fillStyle = g; 160 ctx.fillRect(0, 0, 100, 25); 161 162 var g2 = ctx.createLinearGradient(0, 0, 100, 0); 163 g2.addColorStop(0, 'color(srgb 1 0 0)'); 164 g2.addColorStop(1, 'color(srgb 0 0 1)'); 165 g2.colorInterpolationMethod = 'hwb'; 166 g2.hueInterpolationMethod = 'shorter'; 167 ctx.fillStyle = g2; 168 ctx.fillRect(0, 25, 100, 25); 169 </script> 170 </span> 171 172 <span> 173 <div>longer</div> 174 <div>hwb</div> 175 <canvas class="grid-cell-content" id="canvas5" width="100" height="50"> 176 <p class="fallback">FAIL (fallback content)</p> 177 </canvas> 178 <script type="module"> 179 const canvas = document.getElementById("canvas5"); 180 const ctx = canvas.getContext('2d'); 181 182 // Generate two gradients, one from red to green, the other from red to blue. 183 // In the first instance "shorter" is equivalent to "increasing". 184 // In the second, "shorter" is equivalent to "decreasing". 185 186 var g = ctx.createLinearGradient(0, 0, 100, 0); 187 g.addColorStop(0, 'color(srgb 1 0 0)'); 188 g.addColorStop(1, 'color(srgb 0 1 0)'); 189 g.colorInterpolationMethod = 'hwb'; 190 g.hueInterpolationMethod = 'longer'; 191 ctx.fillStyle = g; 192 ctx.fillRect(0, 0, 100, 25); 193 194 var g2 = ctx.createLinearGradient(0, 0, 100, 0); 195 g2.addColorStop(0, 'color(srgb 1 0 0)'); 196 g2.addColorStop(1, 'color(srgb 0 0 1)'); 197 g2.colorInterpolationMethod = 'hwb'; 198 g2.hueInterpolationMethod = 'longer'; 199 ctx.fillStyle = g2; 200 ctx.fillRect(0, 25, 100, 25); 201 </script> 202 </span> 203 204 <span> 205 <div>increasing</div> 206 <div>hwb</div> 207 <canvas class="grid-cell-content" id="canvas6" width="100" height="50"> 208 <p class="fallback">FAIL (fallback content)</p> 209 </canvas> 210 <script type="module"> 211 const canvas = document.getElementById("canvas6"); 212 const ctx = canvas.getContext('2d'); 213 214 // Generate two gradients, one from red to green, the other from red to blue. 215 // In the first instance "shorter" is equivalent to "increasing". 216 // In the second, "shorter" is equivalent to "decreasing". 217 218 var g = ctx.createLinearGradient(0, 0, 100, 0); 219 g.addColorStop(0, 'color(srgb 1 0 0)'); 220 g.addColorStop(1, 'color(srgb 0 1 0)'); 221 g.colorInterpolationMethod = 'hwb'; 222 g.hueInterpolationMethod = 'increasing'; 223 ctx.fillStyle = g; 224 ctx.fillRect(0, 0, 100, 25); 225 226 var g2 = ctx.createLinearGradient(0, 0, 100, 0); 227 g2.addColorStop(0, 'color(srgb 1 0 0)'); 228 g2.addColorStop(1, 'color(srgb 0 0 1)'); 229 g2.colorInterpolationMethod = 'hwb'; 230 g2.hueInterpolationMethod = 'increasing'; 231 ctx.fillStyle = g2; 232 ctx.fillRect(0, 25, 100, 25); 233 </script> 234 </span> 235 236 <span> 237 <div>decreasing</div> 238 <div>hwb</div> 239 <canvas class="grid-cell-content" id="canvas7" width="100" height="50"> 240 <p class="fallback">FAIL (fallback content)</p> 241 </canvas> 242 <script type="module"> 243 const canvas = document.getElementById("canvas7"); 244 const ctx = canvas.getContext('2d'); 245 246 // Generate two gradients, one from red to green, the other from red to blue. 247 // In the first instance "shorter" is equivalent to "increasing". 248 // In the second, "shorter" is equivalent to "decreasing". 249 250 var g = ctx.createLinearGradient(0, 0, 100, 0); 251 g.addColorStop(0, 'color(srgb 1 0 0)'); 252 g.addColorStop(1, 'color(srgb 0 1 0)'); 253 g.colorInterpolationMethod = 'hwb'; 254 g.hueInterpolationMethod = 'decreasing'; 255 ctx.fillStyle = g; 256 ctx.fillRect(0, 0, 100, 25); 257 258 var g2 = ctx.createLinearGradient(0, 0, 100, 0); 259 g2.addColorStop(0, 'color(srgb 1 0 0)'); 260 g2.addColorStop(1, 'color(srgb 0 0 1)'); 261 g2.colorInterpolationMethod = 'hwb'; 262 g2.hueInterpolationMethod = 'decreasing'; 263 ctx.fillStyle = g2; 264 ctx.fillRect(0, 25, 100, 25); 265 </script> 266 </span> 267 268 <span> 269 <div>shorter</div> 270 <div>lch</div> 271 <canvas class="grid-cell-content" id="canvas8" width="100" height="50"> 272 <p class="fallback">FAIL (fallback content)</p> 273 </canvas> 274 <script type="module"> 275 const canvas = document.getElementById("canvas8"); 276 const ctx = canvas.getContext('2d'); 277 278 // Generate two gradients, one from red to green, the other from red to blue. 279 // In the first instance "shorter" is equivalent to "increasing". 280 // In the second, "shorter" is equivalent to "decreasing". 281 282 var g = ctx.createLinearGradient(0, 0, 100, 0); 283 g.addColorStop(0, 'color(srgb 1 0 0)'); 284 g.addColorStop(1, 'color(srgb 0 1 0)'); 285 g.colorInterpolationMethod = 'lch'; 286 g.hueInterpolationMethod = 'shorter'; 287 ctx.fillStyle = g; 288 ctx.fillRect(0, 0, 100, 25); 289 290 var g2 = ctx.createLinearGradient(0, 0, 100, 0); 291 g2.addColorStop(0, 'color(srgb 1 0 0)'); 292 g2.addColorStop(1, 'color(srgb 0 0 1)'); 293 g2.colorInterpolationMethod = 'lch'; 294 g2.hueInterpolationMethod = 'shorter'; 295 ctx.fillStyle = g2; 296 ctx.fillRect(0, 25, 100, 25); 297 </script> 298 </span> 299 300 <span> 301 <div>longer</div> 302 <div>lch</div> 303 <canvas class="grid-cell-content" id="canvas9" width="100" height="50"> 304 <p class="fallback">FAIL (fallback content)</p> 305 </canvas> 306 <script type="module"> 307 const canvas = document.getElementById("canvas9"); 308 const ctx = canvas.getContext('2d'); 309 310 // Generate two gradients, one from red to green, the other from red to blue. 311 // In the first instance "shorter" is equivalent to "increasing". 312 // In the second, "shorter" is equivalent to "decreasing". 313 314 var g = ctx.createLinearGradient(0, 0, 100, 0); 315 g.addColorStop(0, 'color(srgb 1 0 0)'); 316 g.addColorStop(1, 'color(srgb 0 1 0)'); 317 g.colorInterpolationMethod = 'lch'; 318 g.hueInterpolationMethod = 'longer'; 319 ctx.fillStyle = g; 320 ctx.fillRect(0, 0, 100, 25); 321 322 var g2 = ctx.createLinearGradient(0, 0, 100, 0); 323 g2.addColorStop(0, 'color(srgb 1 0 0)'); 324 g2.addColorStop(1, 'color(srgb 0 0 1)'); 325 g2.colorInterpolationMethod = 'lch'; 326 g2.hueInterpolationMethod = 'longer'; 327 ctx.fillStyle = g2; 328 ctx.fillRect(0, 25, 100, 25); 329 </script> 330 </span> 331 332 <span> 333 <div>increasing</div> 334 <div>lch</div> 335 <canvas class="grid-cell-content" id="canvas10" width="100" height="50"> 336 <p class="fallback">FAIL (fallback content)</p> 337 </canvas> 338 <script type="module"> 339 const canvas = document.getElementById("canvas10"); 340 const ctx = canvas.getContext('2d'); 341 342 // Generate two gradients, one from red to green, the other from red to blue. 343 // In the first instance "shorter" is equivalent to "increasing". 344 // In the second, "shorter" is equivalent to "decreasing". 345 346 var g = ctx.createLinearGradient(0, 0, 100, 0); 347 g.addColorStop(0, 'color(srgb 1 0 0)'); 348 g.addColorStop(1, 'color(srgb 0 1 0)'); 349 g.colorInterpolationMethod = 'lch'; 350 g.hueInterpolationMethod = 'increasing'; 351 ctx.fillStyle = g; 352 ctx.fillRect(0, 0, 100, 25); 353 354 var g2 = ctx.createLinearGradient(0, 0, 100, 0); 355 g2.addColorStop(0, 'color(srgb 1 0 0)'); 356 g2.addColorStop(1, 'color(srgb 0 0 1)'); 357 g2.colorInterpolationMethod = 'lch'; 358 g2.hueInterpolationMethod = 'increasing'; 359 ctx.fillStyle = g2; 360 ctx.fillRect(0, 25, 100, 25); 361 </script> 362 </span> 363 364 <span> 365 <div>decreasing</div> 366 <div>lch</div> 367 <canvas class="grid-cell-content" id="canvas11" width="100" height="50"> 368 <p class="fallback">FAIL (fallback content)</p> 369 </canvas> 370 <script type="module"> 371 const canvas = document.getElementById("canvas11"); 372 const ctx = canvas.getContext('2d'); 373 374 // Generate two gradients, one from red to green, the other from red to blue. 375 // In the first instance "shorter" is equivalent to "increasing". 376 // In the second, "shorter" is equivalent to "decreasing". 377 378 var g = ctx.createLinearGradient(0, 0, 100, 0); 379 g.addColorStop(0, 'color(srgb 1 0 0)'); 380 g.addColorStop(1, 'color(srgb 0 1 0)'); 381 g.colorInterpolationMethod = 'lch'; 382 g.hueInterpolationMethod = 'decreasing'; 383 ctx.fillStyle = g; 384 ctx.fillRect(0, 0, 100, 25); 385 386 var g2 = ctx.createLinearGradient(0, 0, 100, 0); 387 g2.addColorStop(0, 'color(srgb 1 0 0)'); 388 g2.addColorStop(1, 'color(srgb 0 0 1)'); 389 g2.colorInterpolationMethod = 'lch'; 390 g2.hueInterpolationMethod = 'decreasing'; 391 ctx.fillStyle = g2; 392 ctx.fillRect(0, 25, 100, 25); 393 </script> 394 </span> 395 396 <span> 397 <div>shorter</div> 398 <div>oklch</div> 399 <canvas class="grid-cell-content" id="canvas12" width="100" height="50"> 400 <p class="fallback">FAIL (fallback content)</p> 401 </canvas> 402 <script type="module"> 403 const canvas = document.getElementById("canvas12"); 404 const ctx = canvas.getContext('2d'); 405 406 // Generate two gradients, one from red to green, the other from red to blue. 407 // In the first instance "shorter" is equivalent to "increasing". 408 // In the second, "shorter" is equivalent to "decreasing". 409 410 var g = ctx.createLinearGradient(0, 0, 100, 0); 411 g.addColorStop(0, 'color(srgb 1 0 0)'); 412 g.addColorStop(1, 'color(srgb 0 1 0)'); 413 g.colorInterpolationMethod = 'oklch'; 414 g.hueInterpolationMethod = 'shorter'; 415 ctx.fillStyle = g; 416 ctx.fillRect(0, 0, 100, 25); 417 418 var g2 = ctx.createLinearGradient(0, 0, 100, 0); 419 g2.addColorStop(0, 'color(srgb 1 0 0)'); 420 g2.addColorStop(1, 'color(srgb 0 0 1)'); 421 g2.colorInterpolationMethod = 'oklch'; 422 g2.hueInterpolationMethod = 'shorter'; 423 ctx.fillStyle = g2; 424 ctx.fillRect(0, 25, 100, 25); 425 </script> 426 </span> 427 428 <span> 429 <div>longer</div> 430 <div>oklch</div> 431 <canvas class="grid-cell-content" id="canvas13" width="100" height="50"> 432 <p class="fallback">FAIL (fallback content)</p> 433 </canvas> 434 <script type="module"> 435 const canvas = document.getElementById("canvas13"); 436 const ctx = canvas.getContext('2d'); 437 438 // Generate two gradients, one from red to green, the other from red to blue. 439 // In the first instance "shorter" is equivalent to "increasing". 440 // In the second, "shorter" is equivalent to "decreasing". 441 442 var g = ctx.createLinearGradient(0, 0, 100, 0); 443 g.addColorStop(0, 'color(srgb 1 0 0)'); 444 g.addColorStop(1, 'color(srgb 0 1 0)'); 445 g.colorInterpolationMethod = 'oklch'; 446 g.hueInterpolationMethod = 'longer'; 447 ctx.fillStyle = g; 448 ctx.fillRect(0, 0, 100, 25); 449 450 var g2 = ctx.createLinearGradient(0, 0, 100, 0); 451 g2.addColorStop(0, 'color(srgb 1 0 0)'); 452 g2.addColorStop(1, 'color(srgb 0 0 1)'); 453 g2.colorInterpolationMethod = 'oklch'; 454 g2.hueInterpolationMethod = 'longer'; 455 ctx.fillStyle = g2; 456 ctx.fillRect(0, 25, 100, 25); 457 </script> 458 </span> 459 460 <span> 461 <div>increasing</div> 462 <div>oklch</div> 463 <canvas class="grid-cell-content" id="canvas14" width="100" height="50"> 464 <p class="fallback">FAIL (fallback content)</p> 465 </canvas> 466 <script type="module"> 467 const canvas = document.getElementById("canvas14"); 468 const ctx = canvas.getContext('2d'); 469 470 // Generate two gradients, one from red to green, the other from red to blue. 471 // In the first instance "shorter" is equivalent to "increasing". 472 // In the second, "shorter" is equivalent to "decreasing". 473 474 var g = ctx.createLinearGradient(0, 0, 100, 0); 475 g.addColorStop(0, 'color(srgb 1 0 0)'); 476 g.addColorStop(1, 'color(srgb 0 1 0)'); 477 g.colorInterpolationMethod = 'oklch'; 478 g.hueInterpolationMethod = 'increasing'; 479 ctx.fillStyle = g; 480 ctx.fillRect(0, 0, 100, 25); 481 482 var g2 = ctx.createLinearGradient(0, 0, 100, 0); 483 g2.addColorStop(0, 'color(srgb 1 0 0)'); 484 g2.addColorStop(1, 'color(srgb 0 0 1)'); 485 g2.colorInterpolationMethod = 'oklch'; 486 g2.hueInterpolationMethod = 'increasing'; 487 ctx.fillStyle = g2; 488 ctx.fillRect(0, 25, 100, 25); 489 </script> 490 </span> 491 492 <span> 493 <div>decreasing</div> 494 <div>oklch</div> 495 <canvas class="grid-cell-content" id="canvas15" width="100" height="50"> 496 <p class="fallback">FAIL (fallback content)</p> 497 </canvas> 498 <script type="module"> 499 const canvas = document.getElementById("canvas15"); 500 const ctx = canvas.getContext('2d'); 501 502 // Generate two gradients, one from red to green, the other from red to blue. 503 // In the first instance "shorter" is equivalent to "increasing". 504 // In the second, "shorter" is equivalent to "decreasing". 505 506 var g = ctx.createLinearGradient(0, 0, 100, 0); 507 g.addColorStop(0, 'color(srgb 1 0 0)'); 508 g.addColorStop(1, 'color(srgb 0 1 0)'); 509 g.colorInterpolationMethod = 'oklch'; 510 g.hueInterpolationMethod = 'decreasing'; 511 ctx.fillStyle = g; 512 ctx.fillRect(0, 0, 100, 25); 513 514 var g2 = ctx.createLinearGradient(0, 0, 100, 0); 515 g2.addColorStop(0, 'color(srgb 1 0 0)'); 516 g2.addColorStop(1, 'color(srgb 0 0 1)'); 517 g2.colorInterpolationMethod = 'oklch'; 518 g2.hueInterpolationMethod = 'decreasing'; 519 ctx.fillStyle = g2; 520 ctx.fillRect(0, 25, 100, 25); 521 </script> 522 </span> 523 524 </div>