| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <body> |
| <script> |
| canvas = document.createElement('canvas'); |
| canvas.width = 100; |
| canvas.height = 100; |
| ctx = canvas.getContext('2d'); |
| |
| function attachCanvasToDocument() { |
| document.body.appendChild(canvas); |
| return document.body.parentNode != null; |
| } |
| |
| function tryLinearGradientColor(color) { |
| var gradient = ctx.createLinearGradient(0, 0, 100, 100); |
| gradient.addColorStop(0, color); |
| gradient.addColorStop(1, color); |
| ctx.fillStyle = gradient; |
| ctx.fillRect(0, 0, 100, 100); |
| var data = ctx.getImageData(0, 0, 1, 1).data; |
| return '' + data[0] + ',' + data[1] + ',' + data[2] + ',' + data[3]; |
| } |
| |
| function tryRadialGradientColor(color) { |
| var gradient = ctx.createRadialGradient(0, 0, 100, 100, 100, 100); |
| gradient.addColorStop(0, color); |
| gradient.addColorStop(1, color); |
| ctx.fillStyle = gradient; |
| ctx.fillRect(0, 0, 100, 100); |
| var data = ctx.getImageData(0, 0, 1, 1).data; |
| return '' + data[0] + ',' + data[1] + ',' + data[2] + ',' + data[3]; |
| } |
| |
| test(function(t) { |
| // First we test with the canvas out-of-document, 'currentColor' should mean transparent black |
| ctx.shadowColor = '#f00'; |
| assert_equals(ctx.shadowColor, '#ff0000'); |
| ctx.shadowColor = 'currentColor'; |
| assert_equals(ctx.shadowColor, '#000000'); |
| ctx.fillStyle = '#f00'; |
| assert_equals(ctx.fillStyle, '#ff0000'); |
| ctx.fillStyle = 'currentColor'; |
| assert_equals(ctx.fillStyle, '#000000'); |
| ctx.strokeStyle = '#f00'; |
| assert_equals(ctx.strokeStyle, '#ff0000'); |
| ctx.strokeStyle = 'currentColor'; |
| assert_equals(ctx.strokeStyle, '#000000'); |
| assert_equals(tryLinearGradientColor('#f00'), '255,0,0,255'); |
| assert_equals(tryLinearGradientColor('currentColor'), '0,0,0,255'); |
| assert_equals(tryRadialGradientColor('#f00'), '255,0,0,255'); |
| assert_equals(tryRadialGradientColor('currentColor'), '0,0,0,255'); |
| |
| // Attach to the document and set the canvas's color to #123456 |
| assert_equals(attachCanvasToDocument(), true); |
| canvas.style.color = '#123456'; |
| assert_equals(canvas.style.color, 'rgb(18, 52, 86)'); |
| |
| // 'currentColor' should now mean #123456 |
| ctx.shadowColor = '#f00'; |
| assert_equals(ctx.shadowColor, '#ff0000'); |
| ctx.shadowColor = 'currentColor'; |
| assert_equals(ctx.shadowColor, '#123456'); |
| ctx.fillStyle = '#f00'; |
| assert_equals(ctx.fillStyle, '#ff0000'); |
| ctx.fillStyle = 'currentColor'; |
| assert_equals(ctx.fillStyle, '#123456'); |
| ctx.strokeStyle = '#f00'; |
| assert_equals(ctx.strokeStyle, '#ff0000'); |
| ctx.strokeStyle = 'currentColor'; |
| assert_equals(ctx.strokeStyle, '#123456'); |
| assert_equals(tryLinearGradientColor('#f00'), '255,0,0,255'); |
| assert_equals(tryLinearGradientColor('currentColor'), '0,0,0,255'); |
| assert_equals(tryRadialGradientColor('#f00'), '255,0,0,255'); |
| assert_equals(tryRadialGradientColor('currentColor'), '0,0,0,255'); |
| |
| // Last but not least, verify that we're case insensitive |
| ctx.shadowColor = '#f00'; |
| assert_equals(ctx.shadowColor, '#ff0000'); |
| ctx.shadowColor = 'CURRENTCOLOR'; |
| assert_equals(ctx.shadowColor, '#123456'); |
| }, "Test that CanvasRenderingContext2D supports the 'currentColor' value."); |
| </script> |
| </body> |
