| <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> |
| <html> |
| <head> |
| <script src="../../resources/js-test-pre.js"></script> |
| </head> |
| <body> |
| <script> |
| description("Test that CanvasRenderingContext2D supports the 'currentColor' value."); |
| |
| 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]; |
| } |
| |
| // First we test with the canvas out-of-document, 'currentColor' should mean black |
| shouldBe("ctx.shadowColor = '#f00'; ctx.shadowColor", "'#ff0000'"); |
| shouldBe("ctx.shadowColor = 'currentColor'; ctx.shadowColor", "'#000000'"); |
| shouldBe("ctx.fillStyle = '#f00'; ctx.fillStyle", "'#ff0000'"); |
| shouldBe("ctx.fillStyle = 'currentColor'; ctx.fillStyle", "'#000000'"); |
| shouldBe("ctx.strokeStyle = '#f00'; ctx.strokeStyle", "'#ff0000'"); |
| shouldBe("ctx.strokeStyle = 'currentColor'; ctx.strokeStyle", "'#000000'"); |
| shouldBe("ctx.setShadow(0, 0, 0, '#f00'); ctx.shadowColor", "'#ff0000'"); |
| shouldBe("ctx.setShadow(0, 0, 0, 'currentColor'); ctx.shadowColor", "'#000000'"); |
| shouldBe("ctx.setShadow(0, 0, 0, '#f00', 0.0); ctx.shadowColor", "'rgba(255, 0, 0, 0)'"); |
| shouldBe("ctx.setShadow(0, 0, 0, 'currentColor', 0.0); ctx.shadowColor", "'rgba(0, 0, 0, 0)'"); |
| shouldBe("ctx.setStrokeColor('#f00'); ctx.strokeStyle", "'#ff0000'"); |
| shouldBe("ctx.setStrokeColor('currentColor'); ctx.strokeStyle", "'#000000'"); |
| shouldBe("ctx.setStrokeColor('#f00', 0.0); ctx.strokeStyle", "'rgba(255, 0, 0, 0)'"); |
| shouldBe("ctx.setStrokeColor('currentColor', 0.0); ctx.strokeStyle", "'rgba(0, 0, 0, 0)'"); |
| shouldBe("ctx.setFillColor('#f00'); ctx.fillStyle", "'#ff0000'"); |
| shouldBe("ctx.setFillColor('currentColor'); ctx.fillStyle", "'#000000'"); |
| shouldBe("ctx.setFillColor('#f00', 0.0); ctx.fillStyle", "'rgba(255, 0, 0, 0)'"); |
| shouldBe("ctx.setFillColor('currentColor', 0.0); ctx.fillStyle", "'rgba(0, 0, 0, 0)'"); |
| shouldBe("tryLinearGradientColor('#f00')", "'255,0,0,255'"); |
| shouldBe("tryLinearGradientColor('currentColor')", "'0,0,0,255'"); |
| shouldBe("tryRadialGradientColor('#f00')", "'255,0,0,255'"); |
| shouldBe("tryRadialGradientColor('currentColor')", "'0,0,0,255'"); |
| |
| // Attach to the document and set the canvas's color to #123456 |
| shouldBe("attachCanvasToDocument()", "true"); |
| shouldBe("canvas.style.color = '#123456'; canvas.style.color", "'rgb(18, 52, 86)'"); |
| |
| // 'currentColor' should now mean #123456 |
| shouldBe("ctx.shadowColor = '#f00'; ctx.shadowColor", "'#ff0000'"); |
| shouldBe("ctx.shadowColor = 'currentColor'; ctx.shadowColor", "'#123456'"); |
| shouldBe("ctx.fillStyle = '#f00'; ctx.fillStyle", "'#ff0000'"); |
| shouldBe("ctx.fillStyle = 'currentColor'; ctx.fillStyle", "'#123456'"); |
| shouldBe("ctx.strokeStyle = '#f00'; ctx.strokeStyle", "'#ff0000'"); |
| shouldBe("ctx.strokeStyle = 'currentColor'; ctx.strokeStyle", "'#123456'"); |
| shouldBe("ctx.setShadow(0, 0, 0, '#f00'); ctx.shadowColor", "'#ff0000'"); |
| shouldBe("ctx.setShadow(0, 0, 0, 'currentColor'); ctx.shadowColor", "'#123456'"); |
| shouldBe("ctx.setShadow(0, 0, 0, '#f00', 0.0); ctx.shadowColor", "'rgba(255, 0, 0, 0)'"); |
| shouldBe("ctx.setShadow(0, 0, 0, 'currentColor', 0.0); ctx.shadowColor", "'rgba(18, 52, 86, 0)'"); |
| shouldBe("ctx.setStrokeColor('#f00'); ctx.strokeStyle", "'#ff0000'"); |
| shouldBe("ctx.setStrokeColor('currentColor'); ctx.strokeStyle", "'#123456'"); |
| shouldBe("ctx.setStrokeColor('#f00', 0.0); ctx.strokeStyle", "'rgba(255, 0, 0, 0)'"); |
| shouldBe("ctx.setStrokeColor('currentColor', 0.0); ctx.strokeStyle", "'rgba(18, 52, 86, 0)'"); |
| shouldBe("ctx.setFillColor('#f00'); ctx.fillStyle", "'#ff0000'"); |
| shouldBe("ctx.setFillColor('currentColor'); ctx.fillStyle", "'#123456'"); |
| shouldBe("ctx.setFillColor('#f00', 0.0); ctx.fillStyle", "'rgba(255, 0, 0, 0)'"); |
| shouldBe("ctx.setFillColor('currentColor', 0.0); ctx.fillStyle", "'rgba(18, 52, 86, 0)'"); |
| shouldBe("tryLinearGradientColor('#f00')", "'255,0,0,255'"); |
| shouldBe("tryLinearGradientColor('currentColor')", "'0,0,0,255'"); |
| shouldBe("tryRadialGradientColor('#f00')", "'255,0,0,255'"); |
| shouldBe("tryRadialGradientColor('currentColor')", "'0,0,0,255'"); |
| |
| // Last but not least, verify that we're case insensitive |
| shouldBe("ctx.shadowColor = '#f00'; ctx.shadowColor", "'#ff0000'"); |
| shouldBe("ctx.shadowColor = 'CURRENTCOLOR'; ctx.shadowColor", "'#123456'"); |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
