2d.gradient.hueInterpolationMethod.w.html (29952B)
1 <!DOCTYPE html> 2 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> 3 <meta charset="UTF-8"> 4 <html class="reftest-wait"> 5 <link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css"> 6 <link rel="match" href="2d.gradient.hueInterpolationMethod-expected.html"> 7 <meta name=fuzzy content="maxDifference=0-1; totalPixels=0-60000"> 8 <title>Canvas test: 2d.gradient.hueInterpolationMethod</title> 9 <h1>2d.gradient.hueInterpolationMethod</h1> 10 <p class="desc">CSS hue interpolation methods work for CanvasGradients</p> 11 <script>pending_tests = 16;</script> 12 13 <div class="grid-container" style="--grid-width: 4"> 14 <span> 15 <div>shorter</div> 16 <div>hsl</div> 17 <canvas class="grid-cell-content" id="canvas0" width="100" height="50"> 18 <p class="fallback">FAIL (fallback content)</p> 19 </canvas> 20 <script id="myWorker0" type="text/worker"> 21 self.onmessage = function(e) { 22 const canvas = new OffscreenCanvas(100, 50); 23 const ctx = canvas.getContext('2d'); 24 25 // Generate two gradients, one from red to green, the other from red to blue. 26 // In the first instance "shorter" is equivalent to "increasing". 27 // In the second, "shorter" is equivalent to "decreasing". 28 29 var g = ctx.createLinearGradient(0, 0, 100, 0); 30 g.addColorStop(0, 'color(srgb 1 0 0)'); 31 g.addColorStop(1, 'color(srgb 0 1 0)'); 32 g.colorInterpolationMethod = 'hsl'; 33 g.hueInterpolationMethod = 'shorter'; 34 ctx.fillStyle = g; 35 ctx.fillRect(0, 0, 100, 25); 36 37 var g2 = ctx.createLinearGradient(0, 0, 100, 0); 38 g2.addColorStop(0, 'color(srgb 1 0 0)'); 39 g2.addColorStop(1, 'color(srgb 0 0 1)'); 40 g2.colorInterpolationMethod = 'hsl'; 41 g2.hueInterpolationMethod = 'shorter'; 42 ctx.fillStyle = g2; 43 ctx.fillRect(0, 25, 100, 25); 44 45 const bitmap = canvas.transferToImageBitmap(); 46 self.postMessage(bitmap, bitmap); 47 }; 48 </script> 49 <script type="module"> 50 const blob = new Blob([document.getElementById('myWorker0').textContent]); 51 const worker = new Worker(URL.createObjectURL(blob)); 52 worker.addEventListener('message', msg => { 53 const outputCanvas = document.getElementById('canvas0'); 54 const outputCtx = outputCanvas.getContext('2d'); 55 outputCtx.drawImage(msg.data, 0, 0); 56 if (--pending_tests == 0) { 57 document.documentElement.classList.remove('reftest-wait'); 58 } 59 }); 60 worker.postMessage(null); 61 </script> 62 </span> 63 64 <span> 65 <div>longer</div> 66 <div>hsl</div> 67 <canvas class="grid-cell-content" id="canvas1" width="100" height="50"> 68 <p class="fallback">FAIL (fallback content)</p> 69 </canvas> 70 <script id="myWorker1" type="text/worker"> 71 self.onmessage = function(e) { 72 const canvas = new OffscreenCanvas(100, 50); 73 const ctx = canvas.getContext('2d'); 74 75 // Generate two gradients, one from red to green, the other from red to blue. 76 // In the first instance "shorter" is equivalent to "increasing". 77 // In the second, "shorter" is equivalent to "decreasing". 78 79 var g = ctx.createLinearGradient(0, 0, 100, 0); 80 g.addColorStop(0, 'color(srgb 1 0 0)'); 81 g.addColorStop(1, 'color(srgb 0 1 0)'); 82 g.colorInterpolationMethod = 'hsl'; 83 g.hueInterpolationMethod = 'longer'; 84 ctx.fillStyle = g; 85 ctx.fillRect(0, 0, 100, 25); 86 87 var g2 = ctx.createLinearGradient(0, 0, 100, 0); 88 g2.addColorStop(0, 'color(srgb 1 0 0)'); 89 g2.addColorStop(1, 'color(srgb 0 0 1)'); 90 g2.colorInterpolationMethod = 'hsl'; 91 g2.hueInterpolationMethod = 'longer'; 92 ctx.fillStyle = g2; 93 ctx.fillRect(0, 25, 100, 25); 94 95 const bitmap = canvas.transferToImageBitmap(); 96 self.postMessage(bitmap, bitmap); 97 }; 98 </script> 99 <script type="module"> 100 const blob = new Blob([document.getElementById('myWorker1').textContent]); 101 const worker = new Worker(URL.createObjectURL(blob)); 102 worker.addEventListener('message', msg => { 103 const outputCanvas = document.getElementById('canvas1'); 104 const outputCtx = outputCanvas.getContext('2d'); 105 outputCtx.drawImage(msg.data, 0, 0); 106 if (--pending_tests == 0) { 107 document.documentElement.classList.remove('reftest-wait'); 108 } 109 }); 110 worker.postMessage(null); 111 </script> 112 </span> 113 114 <span> 115 <div>increasing</div> 116 <div>hsl</div> 117 <canvas class="grid-cell-content" id="canvas2" width="100" height="50"> 118 <p class="fallback">FAIL (fallback content)</p> 119 </canvas> 120 <script id="myWorker2" type="text/worker"> 121 self.onmessage = function(e) { 122 const canvas = new OffscreenCanvas(100, 50); 123 const ctx = canvas.getContext('2d'); 124 125 // Generate two gradients, one from red to green, the other from red to blue. 126 // In the first instance "shorter" is equivalent to "increasing". 127 // In the second, "shorter" is equivalent to "decreasing". 128 129 var g = ctx.createLinearGradient(0, 0, 100, 0); 130 g.addColorStop(0, 'color(srgb 1 0 0)'); 131 g.addColorStop(1, 'color(srgb 0 1 0)'); 132 g.colorInterpolationMethod = 'hsl'; 133 g.hueInterpolationMethod = 'increasing'; 134 ctx.fillStyle = g; 135 ctx.fillRect(0, 0, 100, 25); 136 137 var g2 = ctx.createLinearGradient(0, 0, 100, 0); 138 g2.addColorStop(0, 'color(srgb 1 0 0)'); 139 g2.addColorStop(1, 'color(srgb 0 0 1)'); 140 g2.colorInterpolationMethod = 'hsl'; 141 g2.hueInterpolationMethod = 'increasing'; 142 ctx.fillStyle = g2; 143 ctx.fillRect(0, 25, 100, 25); 144 145 const bitmap = canvas.transferToImageBitmap(); 146 self.postMessage(bitmap, bitmap); 147 }; 148 </script> 149 <script type="module"> 150 const blob = new Blob([document.getElementById('myWorker2').textContent]); 151 const worker = new Worker(URL.createObjectURL(blob)); 152 worker.addEventListener('message', msg => { 153 const outputCanvas = document.getElementById('canvas2'); 154 const outputCtx = outputCanvas.getContext('2d'); 155 outputCtx.drawImage(msg.data, 0, 0); 156 if (--pending_tests == 0) { 157 document.documentElement.classList.remove('reftest-wait'); 158 } 159 }); 160 worker.postMessage(null); 161 </script> 162 </span> 163 164 <span> 165 <div>decreasing</div> 166 <div>hsl</div> 167 <canvas class="grid-cell-content" id="canvas3" width="100" height="50"> 168 <p class="fallback">FAIL (fallback content)</p> 169 </canvas> 170 <script id="myWorker3" type="text/worker"> 171 self.onmessage = function(e) { 172 const canvas = new OffscreenCanvas(100, 50); 173 const ctx = canvas.getContext('2d'); 174 175 // Generate two gradients, one from red to green, the other from red to blue. 176 // In the first instance "shorter" is equivalent to "increasing". 177 // In the second, "shorter" is equivalent to "decreasing". 178 179 var g = ctx.createLinearGradient(0, 0, 100, 0); 180 g.addColorStop(0, 'color(srgb 1 0 0)'); 181 g.addColorStop(1, 'color(srgb 0 1 0)'); 182 g.colorInterpolationMethod = 'hsl'; 183 g.hueInterpolationMethod = 'decreasing'; 184 ctx.fillStyle = g; 185 ctx.fillRect(0, 0, 100, 25); 186 187 var g2 = ctx.createLinearGradient(0, 0, 100, 0); 188 g2.addColorStop(0, 'color(srgb 1 0 0)'); 189 g2.addColorStop(1, 'color(srgb 0 0 1)'); 190 g2.colorInterpolationMethod = 'hsl'; 191 g2.hueInterpolationMethod = 'decreasing'; 192 ctx.fillStyle = g2; 193 ctx.fillRect(0, 25, 100, 25); 194 195 const bitmap = canvas.transferToImageBitmap(); 196 self.postMessage(bitmap, bitmap); 197 }; 198 </script> 199 <script type="module"> 200 const blob = new Blob([document.getElementById('myWorker3').textContent]); 201 const worker = new Worker(URL.createObjectURL(blob)); 202 worker.addEventListener('message', msg => { 203 const outputCanvas = document.getElementById('canvas3'); 204 const outputCtx = outputCanvas.getContext('2d'); 205 outputCtx.drawImage(msg.data, 0, 0); 206 if (--pending_tests == 0) { 207 document.documentElement.classList.remove('reftest-wait'); 208 } 209 }); 210 worker.postMessage(null); 211 </script> 212 </span> 213 214 <span> 215 <div>shorter</div> 216 <div>hwb</div> 217 <canvas class="grid-cell-content" id="canvas4" width="100" height="50"> 218 <p class="fallback">FAIL (fallback content)</p> 219 </canvas> 220 <script id="myWorker4" type="text/worker"> 221 self.onmessage = function(e) { 222 const canvas = new OffscreenCanvas(100, 50); 223 const ctx = canvas.getContext('2d'); 224 225 // Generate two gradients, one from red to green, the other from red to blue. 226 // In the first instance "shorter" is equivalent to "increasing". 227 // In the second, "shorter" is equivalent to "decreasing". 228 229 var g = ctx.createLinearGradient(0, 0, 100, 0); 230 g.addColorStop(0, 'color(srgb 1 0 0)'); 231 g.addColorStop(1, 'color(srgb 0 1 0)'); 232 g.colorInterpolationMethod = 'hwb'; 233 g.hueInterpolationMethod = 'shorter'; 234 ctx.fillStyle = g; 235 ctx.fillRect(0, 0, 100, 25); 236 237 var g2 = ctx.createLinearGradient(0, 0, 100, 0); 238 g2.addColorStop(0, 'color(srgb 1 0 0)'); 239 g2.addColorStop(1, 'color(srgb 0 0 1)'); 240 g2.colorInterpolationMethod = 'hwb'; 241 g2.hueInterpolationMethod = 'shorter'; 242 ctx.fillStyle = g2; 243 ctx.fillRect(0, 25, 100, 25); 244 245 const bitmap = canvas.transferToImageBitmap(); 246 self.postMessage(bitmap, bitmap); 247 }; 248 </script> 249 <script type="module"> 250 const blob = new Blob([document.getElementById('myWorker4').textContent]); 251 const worker = new Worker(URL.createObjectURL(blob)); 252 worker.addEventListener('message', msg => { 253 const outputCanvas = document.getElementById('canvas4'); 254 const outputCtx = outputCanvas.getContext('2d'); 255 outputCtx.drawImage(msg.data, 0, 0); 256 if (--pending_tests == 0) { 257 document.documentElement.classList.remove('reftest-wait'); 258 } 259 }); 260 worker.postMessage(null); 261 </script> 262 </span> 263 264 <span> 265 <div>longer</div> 266 <div>hwb</div> 267 <canvas class="grid-cell-content" id="canvas5" width="100" height="50"> 268 <p class="fallback">FAIL (fallback content)</p> 269 </canvas> 270 <script id="myWorker5" type="text/worker"> 271 self.onmessage = function(e) { 272 const canvas = new OffscreenCanvas(100, 50); 273 const ctx = canvas.getContext('2d'); 274 275 // Generate two gradients, one from red to green, the other from red to blue. 276 // In the first instance "shorter" is equivalent to "increasing". 277 // In the second, "shorter" is equivalent to "decreasing". 278 279 var g = ctx.createLinearGradient(0, 0, 100, 0); 280 g.addColorStop(0, 'color(srgb 1 0 0)'); 281 g.addColorStop(1, 'color(srgb 0 1 0)'); 282 g.colorInterpolationMethod = 'hwb'; 283 g.hueInterpolationMethod = 'longer'; 284 ctx.fillStyle = g; 285 ctx.fillRect(0, 0, 100, 25); 286 287 var g2 = ctx.createLinearGradient(0, 0, 100, 0); 288 g2.addColorStop(0, 'color(srgb 1 0 0)'); 289 g2.addColorStop(1, 'color(srgb 0 0 1)'); 290 g2.colorInterpolationMethod = 'hwb'; 291 g2.hueInterpolationMethod = 'longer'; 292 ctx.fillStyle = g2; 293 ctx.fillRect(0, 25, 100, 25); 294 295 const bitmap = canvas.transferToImageBitmap(); 296 self.postMessage(bitmap, bitmap); 297 }; 298 </script> 299 <script type="module"> 300 const blob = new Blob([document.getElementById('myWorker5').textContent]); 301 const worker = new Worker(URL.createObjectURL(blob)); 302 worker.addEventListener('message', msg => { 303 const outputCanvas = document.getElementById('canvas5'); 304 const outputCtx = outputCanvas.getContext('2d'); 305 outputCtx.drawImage(msg.data, 0, 0); 306 if (--pending_tests == 0) { 307 document.documentElement.classList.remove('reftest-wait'); 308 } 309 }); 310 worker.postMessage(null); 311 </script> 312 </span> 313 314 <span> 315 <div>increasing</div> 316 <div>hwb</div> 317 <canvas class="grid-cell-content" id="canvas6" width="100" height="50"> 318 <p class="fallback">FAIL (fallback content)</p> 319 </canvas> 320 <script id="myWorker6" type="text/worker"> 321 self.onmessage = function(e) { 322 const canvas = new OffscreenCanvas(100, 50); 323 const ctx = canvas.getContext('2d'); 324 325 // Generate two gradients, one from red to green, the other from red to blue. 326 // In the first instance "shorter" is equivalent to "increasing". 327 // In the second, "shorter" is equivalent to "decreasing". 328 329 var g = ctx.createLinearGradient(0, 0, 100, 0); 330 g.addColorStop(0, 'color(srgb 1 0 0)'); 331 g.addColorStop(1, 'color(srgb 0 1 0)'); 332 g.colorInterpolationMethod = 'hwb'; 333 g.hueInterpolationMethod = 'increasing'; 334 ctx.fillStyle = g; 335 ctx.fillRect(0, 0, 100, 25); 336 337 var g2 = ctx.createLinearGradient(0, 0, 100, 0); 338 g2.addColorStop(0, 'color(srgb 1 0 0)'); 339 g2.addColorStop(1, 'color(srgb 0 0 1)'); 340 g2.colorInterpolationMethod = 'hwb'; 341 g2.hueInterpolationMethod = 'increasing'; 342 ctx.fillStyle = g2; 343 ctx.fillRect(0, 25, 100, 25); 344 345 const bitmap = canvas.transferToImageBitmap(); 346 self.postMessage(bitmap, bitmap); 347 }; 348 </script> 349 <script type="module"> 350 const blob = new Blob([document.getElementById('myWorker6').textContent]); 351 const worker = new Worker(URL.createObjectURL(blob)); 352 worker.addEventListener('message', msg => { 353 const outputCanvas = document.getElementById('canvas6'); 354 const outputCtx = outputCanvas.getContext('2d'); 355 outputCtx.drawImage(msg.data, 0, 0); 356 if (--pending_tests == 0) { 357 document.documentElement.classList.remove('reftest-wait'); 358 } 359 }); 360 worker.postMessage(null); 361 </script> 362 </span> 363 364 <span> 365 <div>decreasing</div> 366 <div>hwb</div> 367 <canvas class="grid-cell-content" id="canvas7" width="100" height="50"> 368 <p class="fallback">FAIL (fallback content)</p> 369 </canvas> 370 <script id="myWorker7" type="text/worker"> 371 self.onmessage = function(e) { 372 const canvas = new OffscreenCanvas(100, 50); 373 const ctx = canvas.getContext('2d'); 374 375 // Generate two gradients, one from red to green, the other from red to blue. 376 // In the first instance "shorter" is equivalent to "increasing". 377 // In the second, "shorter" is equivalent to "decreasing". 378 379 var g = ctx.createLinearGradient(0, 0, 100, 0); 380 g.addColorStop(0, 'color(srgb 1 0 0)'); 381 g.addColorStop(1, 'color(srgb 0 1 0)'); 382 g.colorInterpolationMethod = 'hwb'; 383 g.hueInterpolationMethod = 'decreasing'; 384 ctx.fillStyle = g; 385 ctx.fillRect(0, 0, 100, 25); 386 387 var g2 = ctx.createLinearGradient(0, 0, 100, 0); 388 g2.addColorStop(0, 'color(srgb 1 0 0)'); 389 g2.addColorStop(1, 'color(srgb 0 0 1)'); 390 g2.colorInterpolationMethod = 'hwb'; 391 g2.hueInterpolationMethod = 'decreasing'; 392 ctx.fillStyle = g2; 393 ctx.fillRect(0, 25, 100, 25); 394 395 const bitmap = canvas.transferToImageBitmap(); 396 self.postMessage(bitmap, bitmap); 397 }; 398 </script> 399 <script type="module"> 400 const blob = new Blob([document.getElementById('myWorker7').textContent]); 401 const worker = new Worker(URL.createObjectURL(blob)); 402 worker.addEventListener('message', msg => { 403 const outputCanvas = document.getElementById('canvas7'); 404 const outputCtx = outputCanvas.getContext('2d'); 405 outputCtx.drawImage(msg.data, 0, 0); 406 if (--pending_tests == 0) { 407 document.documentElement.classList.remove('reftest-wait'); 408 } 409 }); 410 worker.postMessage(null); 411 </script> 412 </span> 413 414 <span> 415 <div>shorter</div> 416 <div>lch</div> 417 <canvas class="grid-cell-content" id="canvas8" width="100" height="50"> 418 <p class="fallback">FAIL (fallback content)</p> 419 </canvas> 420 <script id="myWorker8" type="text/worker"> 421 self.onmessage = function(e) { 422 const canvas = new OffscreenCanvas(100, 50); 423 const ctx = canvas.getContext('2d'); 424 425 // Generate two gradients, one from red to green, the other from red to blue. 426 // In the first instance "shorter" is equivalent to "increasing". 427 // In the second, "shorter" is equivalent to "decreasing". 428 429 var g = ctx.createLinearGradient(0, 0, 100, 0); 430 g.addColorStop(0, 'color(srgb 1 0 0)'); 431 g.addColorStop(1, 'color(srgb 0 1 0)'); 432 g.colorInterpolationMethod = 'lch'; 433 g.hueInterpolationMethod = 'shorter'; 434 ctx.fillStyle = g; 435 ctx.fillRect(0, 0, 100, 25); 436 437 var g2 = ctx.createLinearGradient(0, 0, 100, 0); 438 g2.addColorStop(0, 'color(srgb 1 0 0)'); 439 g2.addColorStop(1, 'color(srgb 0 0 1)'); 440 g2.colorInterpolationMethod = 'lch'; 441 g2.hueInterpolationMethod = 'shorter'; 442 ctx.fillStyle = g2; 443 ctx.fillRect(0, 25, 100, 25); 444 445 const bitmap = canvas.transferToImageBitmap(); 446 self.postMessage(bitmap, bitmap); 447 }; 448 </script> 449 <script type="module"> 450 const blob = new Blob([document.getElementById('myWorker8').textContent]); 451 const worker = new Worker(URL.createObjectURL(blob)); 452 worker.addEventListener('message', msg => { 453 const outputCanvas = document.getElementById('canvas8'); 454 const outputCtx = outputCanvas.getContext('2d'); 455 outputCtx.drawImage(msg.data, 0, 0); 456 if (--pending_tests == 0) { 457 document.documentElement.classList.remove('reftest-wait'); 458 } 459 }); 460 worker.postMessage(null); 461 </script> 462 </span> 463 464 <span> 465 <div>longer</div> 466 <div>lch</div> 467 <canvas class="grid-cell-content" id="canvas9" width="100" height="50"> 468 <p class="fallback">FAIL (fallback content)</p> 469 </canvas> 470 <script id="myWorker9" type="text/worker"> 471 self.onmessage = function(e) { 472 const canvas = new OffscreenCanvas(100, 50); 473 const ctx = canvas.getContext('2d'); 474 475 // Generate two gradients, one from red to green, the other from red to blue. 476 // In the first instance "shorter" is equivalent to "increasing". 477 // In the second, "shorter" is equivalent to "decreasing". 478 479 var g = ctx.createLinearGradient(0, 0, 100, 0); 480 g.addColorStop(0, 'color(srgb 1 0 0)'); 481 g.addColorStop(1, 'color(srgb 0 1 0)'); 482 g.colorInterpolationMethod = 'lch'; 483 g.hueInterpolationMethod = 'longer'; 484 ctx.fillStyle = g; 485 ctx.fillRect(0, 0, 100, 25); 486 487 var g2 = ctx.createLinearGradient(0, 0, 100, 0); 488 g2.addColorStop(0, 'color(srgb 1 0 0)'); 489 g2.addColorStop(1, 'color(srgb 0 0 1)'); 490 g2.colorInterpolationMethod = 'lch'; 491 g2.hueInterpolationMethod = 'longer'; 492 ctx.fillStyle = g2; 493 ctx.fillRect(0, 25, 100, 25); 494 495 const bitmap = canvas.transferToImageBitmap(); 496 self.postMessage(bitmap, bitmap); 497 }; 498 </script> 499 <script type="module"> 500 const blob = new Blob([document.getElementById('myWorker9').textContent]); 501 const worker = new Worker(URL.createObjectURL(blob)); 502 worker.addEventListener('message', msg => { 503 const outputCanvas = document.getElementById('canvas9'); 504 const outputCtx = outputCanvas.getContext('2d'); 505 outputCtx.drawImage(msg.data, 0, 0); 506 if (--pending_tests == 0) { 507 document.documentElement.classList.remove('reftest-wait'); 508 } 509 }); 510 worker.postMessage(null); 511 </script> 512 </span> 513 514 <span> 515 <div>increasing</div> 516 <div>lch</div> 517 <canvas class="grid-cell-content" id="canvas10" width="100" height="50"> 518 <p class="fallback">FAIL (fallback content)</p> 519 </canvas> 520 <script id="myWorker10" type="text/worker"> 521 self.onmessage = function(e) { 522 const canvas = new OffscreenCanvas(100, 50); 523 const ctx = canvas.getContext('2d'); 524 525 // Generate two gradients, one from red to green, the other from red to blue. 526 // In the first instance "shorter" is equivalent to "increasing". 527 // In the second, "shorter" is equivalent to "decreasing". 528 529 var g = ctx.createLinearGradient(0, 0, 100, 0); 530 g.addColorStop(0, 'color(srgb 1 0 0)'); 531 g.addColorStop(1, 'color(srgb 0 1 0)'); 532 g.colorInterpolationMethod = 'lch'; 533 g.hueInterpolationMethod = 'increasing'; 534 ctx.fillStyle = g; 535 ctx.fillRect(0, 0, 100, 25); 536 537 var g2 = ctx.createLinearGradient(0, 0, 100, 0); 538 g2.addColorStop(0, 'color(srgb 1 0 0)'); 539 g2.addColorStop(1, 'color(srgb 0 0 1)'); 540 g2.colorInterpolationMethod = 'lch'; 541 g2.hueInterpolationMethod = 'increasing'; 542 ctx.fillStyle = g2; 543 ctx.fillRect(0, 25, 100, 25); 544 545 const bitmap = canvas.transferToImageBitmap(); 546 self.postMessage(bitmap, bitmap); 547 }; 548 </script> 549 <script type="module"> 550 const blob = new Blob([document.getElementById('myWorker10').textContent]); 551 const worker = new Worker(URL.createObjectURL(blob)); 552 worker.addEventListener('message', msg => { 553 const outputCanvas = document.getElementById('canvas10'); 554 const outputCtx = outputCanvas.getContext('2d'); 555 outputCtx.drawImage(msg.data, 0, 0); 556 if (--pending_tests == 0) { 557 document.documentElement.classList.remove('reftest-wait'); 558 } 559 }); 560 worker.postMessage(null); 561 </script> 562 </span> 563 564 <span> 565 <div>decreasing</div> 566 <div>lch</div> 567 <canvas class="grid-cell-content" id="canvas11" width="100" height="50"> 568 <p class="fallback">FAIL (fallback content)</p> 569 </canvas> 570 <script id="myWorker11" type="text/worker"> 571 self.onmessage = function(e) { 572 const canvas = new OffscreenCanvas(100, 50); 573 const ctx = canvas.getContext('2d'); 574 575 // Generate two gradients, one from red to green, the other from red to blue. 576 // In the first instance "shorter" is equivalent to "increasing". 577 // In the second, "shorter" is equivalent to "decreasing". 578 579 var g = ctx.createLinearGradient(0, 0, 100, 0); 580 g.addColorStop(0, 'color(srgb 1 0 0)'); 581 g.addColorStop(1, 'color(srgb 0 1 0)'); 582 g.colorInterpolationMethod = 'lch'; 583 g.hueInterpolationMethod = 'decreasing'; 584 ctx.fillStyle = g; 585 ctx.fillRect(0, 0, 100, 25); 586 587 var g2 = ctx.createLinearGradient(0, 0, 100, 0); 588 g2.addColorStop(0, 'color(srgb 1 0 0)'); 589 g2.addColorStop(1, 'color(srgb 0 0 1)'); 590 g2.colorInterpolationMethod = 'lch'; 591 g2.hueInterpolationMethod = 'decreasing'; 592 ctx.fillStyle = g2; 593 ctx.fillRect(0, 25, 100, 25); 594 595 const bitmap = canvas.transferToImageBitmap(); 596 self.postMessage(bitmap, bitmap); 597 }; 598 </script> 599 <script type="module"> 600 const blob = new Blob([document.getElementById('myWorker11').textContent]); 601 const worker = new Worker(URL.createObjectURL(blob)); 602 worker.addEventListener('message', msg => { 603 const outputCanvas = document.getElementById('canvas11'); 604 const outputCtx = outputCanvas.getContext('2d'); 605 outputCtx.drawImage(msg.data, 0, 0); 606 if (--pending_tests == 0) { 607 document.documentElement.classList.remove('reftest-wait'); 608 } 609 }); 610 worker.postMessage(null); 611 </script> 612 </span> 613 614 <span> 615 <div>shorter</div> 616 <div>oklch</div> 617 <canvas class="grid-cell-content" id="canvas12" width="100" height="50"> 618 <p class="fallback">FAIL (fallback content)</p> 619 </canvas> 620 <script id="myWorker12" type="text/worker"> 621 self.onmessage = function(e) { 622 const canvas = new OffscreenCanvas(100, 50); 623 const ctx = canvas.getContext('2d'); 624 625 // Generate two gradients, one from red to green, the other from red to blue. 626 // In the first instance "shorter" is equivalent to "increasing". 627 // In the second, "shorter" is equivalent to "decreasing". 628 629 var g = ctx.createLinearGradient(0, 0, 100, 0); 630 g.addColorStop(0, 'color(srgb 1 0 0)'); 631 g.addColorStop(1, 'color(srgb 0 1 0)'); 632 g.colorInterpolationMethod = 'oklch'; 633 g.hueInterpolationMethod = 'shorter'; 634 ctx.fillStyle = g; 635 ctx.fillRect(0, 0, 100, 25); 636 637 var g2 = ctx.createLinearGradient(0, 0, 100, 0); 638 g2.addColorStop(0, 'color(srgb 1 0 0)'); 639 g2.addColorStop(1, 'color(srgb 0 0 1)'); 640 g2.colorInterpolationMethod = 'oklch'; 641 g2.hueInterpolationMethod = 'shorter'; 642 ctx.fillStyle = g2; 643 ctx.fillRect(0, 25, 100, 25); 644 645 const bitmap = canvas.transferToImageBitmap(); 646 self.postMessage(bitmap, bitmap); 647 }; 648 </script> 649 <script type="module"> 650 const blob = new Blob([document.getElementById('myWorker12').textContent]); 651 const worker = new Worker(URL.createObjectURL(blob)); 652 worker.addEventListener('message', msg => { 653 const outputCanvas = document.getElementById('canvas12'); 654 const outputCtx = outputCanvas.getContext('2d'); 655 outputCtx.drawImage(msg.data, 0, 0); 656 if (--pending_tests == 0) { 657 document.documentElement.classList.remove('reftest-wait'); 658 } 659 }); 660 worker.postMessage(null); 661 </script> 662 </span> 663 664 <span> 665 <div>longer</div> 666 <div>oklch</div> 667 <canvas class="grid-cell-content" id="canvas13" width="100" height="50"> 668 <p class="fallback">FAIL (fallback content)</p> 669 </canvas> 670 <script id="myWorker13" type="text/worker"> 671 self.onmessage = function(e) { 672 const canvas = new OffscreenCanvas(100, 50); 673 const ctx = canvas.getContext('2d'); 674 675 // Generate two gradients, one from red to green, the other from red to blue. 676 // In the first instance "shorter" is equivalent to "increasing". 677 // In the second, "shorter" is equivalent to "decreasing". 678 679 var g = ctx.createLinearGradient(0, 0, 100, 0); 680 g.addColorStop(0, 'color(srgb 1 0 0)'); 681 g.addColorStop(1, 'color(srgb 0 1 0)'); 682 g.colorInterpolationMethod = 'oklch'; 683 g.hueInterpolationMethod = 'longer'; 684 ctx.fillStyle = g; 685 ctx.fillRect(0, 0, 100, 25); 686 687 var g2 = ctx.createLinearGradient(0, 0, 100, 0); 688 g2.addColorStop(0, 'color(srgb 1 0 0)'); 689 g2.addColorStop(1, 'color(srgb 0 0 1)'); 690 g2.colorInterpolationMethod = 'oklch'; 691 g2.hueInterpolationMethod = 'longer'; 692 ctx.fillStyle = g2; 693 ctx.fillRect(0, 25, 100, 25); 694 695 const bitmap = canvas.transferToImageBitmap(); 696 self.postMessage(bitmap, bitmap); 697 }; 698 </script> 699 <script type="module"> 700 const blob = new Blob([document.getElementById('myWorker13').textContent]); 701 const worker = new Worker(URL.createObjectURL(blob)); 702 worker.addEventListener('message', msg => { 703 const outputCanvas = document.getElementById('canvas13'); 704 const outputCtx = outputCanvas.getContext('2d'); 705 outputCtx.drawImage(msg.data, 0, 0); 706 if (--pending_tests == 0) { 707 document.documentElement.classList.remove('reftest-wait'); 708 } 709 }); 710 worker.postMessage(null); 711 </script> 712 </span> 713 714 <span> 715 <div>increasing</div> 716 <div>oklch</div> 717 <canvas class="grid-cell-content" id="canvas14" width="100" height="50"> 718 <p class="fallback">FAIL (fallback content)</p> 719 </canvas> 720 <script id="myWorker14" type="text/worker"> 721 self.onmessage = function(e) { 722 const canvas = new OffscreenCanvas(100, 50); 723 const ctx = canvas.getContext('2d'); 724 725 // Generate two gradients, one from red to green, the other from red to blue. 726 // In the first instance "shorter" is equivalent to "increasing". 727 // In the second, "shorter" is equivalent to "decreasing". 728 729 var g = ctx.createLinearGradient(0, 0, 100, 0); 730 g.addColorStop(0, 'color(srgb 1 0 0)'); 731 g.addColorStop(1, 'color(srgb 0 1 0)'); 732 g.colorInterpolationMethod = 'oklch'; 733 g.hueInterpolationMethod = 'increasing'; 734 ctx.fillStyle = g; 735 ctx.fillRect(0, 0, 100, 25); 736 737 var g2 = ctx.createLinearGradient(0, 0, 100, 0); 738 g2.addColorStop(0, 'color(srgb 1 0 0)'); 739 g2.addColorStop(1, 'color(srgb 0 0 1)'); 740 g2.colorInterpolationMethod = 'oklch'; 741 g2.hueInterpolationMethod = 'increasing'; 742 ctx.fillStyle = g2; 743 ctx.fillRect(0, 25, 100, 25); 744 745 const bitmap = canvas.transferToImageBitmap(); 746 self.postMessage(bitmap, bitmap); 747 }; 748 </script> 749 <script type="module"> 750 const blob = new Blob([document.getElementById('myWorker14').textContent]); 751 const worker = new Worker(URL.createObjectURL(blob)); 752 worker.addEventListener('message', msg => { 753 const outputCanvas = document.getElementById('canvas14'); 754 const outputCtx = outputCanvas.getContext('2d'); 755 outputCtx.drawImage(msg.data, 0, 0); 756 if (--pending_tests == 0) { 757 document.documentElement.classList.remove('reftest-wait'); 758 } 759 }); 760 worker.postMessage(null); 761 </script> 762 </span> 763 764 <span> 765 <div>decreasing</div> 766 <div>oklch</div> 767 <canvas class="grid-cell-content" id="canvas15" width="100" height="50"> 768 <p class="fallback">FAIL (fallback content)</p> 769 </canvas> 770 <script id="myWorker15" type="text/worker"> 771 self.onmessage = function(e) { 772 const canvas = new OffscreenCanvas(100, 50); 773 const ctx = canvas.getContext('2d'); 774 775 // Generate two gradients, one from red to green, the other from red to blue. 776 // In the first instance "shorter" is equivalent to "increasing". 777 // In the second, "shorter" is equivalent to "decreasing". 778 779 var g = ctx.createLinearGradient(0, 0, 100, 0); 780 g.addColorStop(0, 'color(srgb 1 0 0)'); 781 g.addColorStop(1, 'color(srgb 0 1 0)'); 782 g.colorInterpolationMethod = 'oklch'; 783 g.hueInterpolationMethod = 'decreasing'; 784 ctx.fillStyle = g; 785 ctx.fillRect(0, 0, 100, 25); 786 787 var g2 = ctx.createLinearGradient(0, 0, 100, 0); 788 g2.addColorStop(0, 'color(srgb 1 0 0)'); 789 g2.addColorStop(1, 'color(srgb 0 0 1)'); 790 g2.colorInterpolationMethod = 'oklch'; 791 g2.hueInterpolationMethod = 'decreasing'; 792 ctx.fillStyle = g2; 793 ctx.fillRect(0, 25, 100, 25); 794 795 const bitmap = canvas.transferToImageBitmap(); 796 self.postMessage(bitmap, bitmap); 797 }; 798 </script> 799 <script type="module"> 800 const blob = new Blob([document.getElementById('myWorker15').textContent]); 801 const worker = new Worker(URL.createObjectURL(blob)); 802 worker.addEventListener('message', msg => { 803 const outputCanvas = document.getElementById('canvas15'); 804 const outputCtx = outputCanvas.getContext('2d'); 805 outputCtx.drawImage(msg.data, 0, 0); 806 if (--pending_tests == 0) { 807 document.documentElement.classList.remove('reftest-wait'); 808 } 809 }); 810 worker.postMessage(null); 811 </script> 812 </span> 813 814 </div> 815 </html>