canvas-currentColor.html | Explore in Territory

<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>
chromium/third_party/blink/web_tests/fast/canvas/canvas-currentColor.html
