canvas-fillPath-alpha-shadow.html | Explore in Territory

<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<body>
<script>
var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
canvas.setAttribute('width', '600');
canvas.setAttribute('height', '1100');
var ctx = canvas.getContext('2d');

ctx.save();
ctx.fillStyle = 'rgba(0, 0, 255, 0.5)';
ctx.shadowColor = 'rgba(255, 0, 0, 0.5)';
ctx.shadowOffsetX = 250;

function fillShape(x, y) {
    ctx.beginPath();
    ctx.arc(x, y, 100, 0, Math.PI*2, true);
    ctx.arc(x, y, 50,  0, Math.PI*2, false);
    ctx.fill();
}

// Alpha shadow.
ctx.shadowBlur = 0;
fillShape(150, 150);

// Blurry shadow.
ctx.shadowBlur = 10;
fillShape(150, 400);

ctx.rotate(Math.PI/2);

// Rotated alpha shadow.
ctx.shadowBlur = 0;
fillShape(650, -150);

// Rotated blurry shadow.
ctx.shadowBlur = 10;
fillShape(900, -150);

ctx.restore();
ctx.fillStyle = 'black';

function testPixelShadow(pixel, reference, alphaApprox) {
    var testPassed = true;
    for(i = 0; i < 3; i++)
        if(pixel[i] != reference[i]) {
            testPassed = false;
            break;
        }
    assert_true(testPassed);
    assert_approx_equals(pixel[3], reference[3], alphaApprox);
}

testScenarios =
        [
            ['TestAlphaShadow 1', ctx.getImageData(400, 150, 1, 1).data, [ 0, 0, 0, 0, 0], 0],
            ['TestAlphaShadow 2', ctx.getImageData(400, 75, 1, 1).data, [ 255,  0, 0, 64], 15],
            ['TestAlphaShadow 3', ctx.getImageData(400, 225, 1, 1).data, [ 255, 0, 0, 64], 15],
            ['TestAlphaShadow 4', ctx.getImageData(325, 150, 1, 1).data, [ 255, 0, 0, 64], 15],
            ['TestAlphaShadow 5', ctx.getImageData(475, 150, 1, 1).data, [ 255, 0, 0, 64], 15],

            ['TestBlurryShadow 1', ctx.getImageData(400, 400, 1, 1).data, [ 0, 0, 0, 0, 0], 0],
            ['TestBlurryShadow 2', ctx.getImageData(400, 300, 1, 1).data, [ 255, 0, 0, 31], 15],
            ['TestBlurryShadow 3', ctx.getImageData(400, 500, 1, 1).data, [ 255, 0, 0, 31], 15],
            ['TestBlurryShadow 4', ctx.getImageData(300, 400, 1, 1).data, [ 255, 0, 0, 31], 15],
            ['TestBlurryShadow 5', ctx.getImageData(500, 400, 1, 1).data, [ 255, 0, 0, 31], 15],

            ['TestRotatedAlphaShadow 1', ctx.getImageData(400, 650, 1, 1).data, [ 0, 0, 0, 0, 0], 0],
            ['TestRotatedAlphaShadow 2', ctx.getImageData(400, 575, 1, 1).data, [ 255, 0, 0, 64], 15],
            ['TestRotatedAlphaShadow 3', ctx.getImageData(400, 725, 1, 1).data, [ 255, 0, 0, 64], 15],
            ['TestRotatedAlphaShadow 4', ctx.getImageData(325, 650, 1, 1).data, [ 255, 0, 0, 64], 15],
            ['TestRotatedAlphaShadow 5', ctx.getImageData(475, 650, 1, 1).data, [ 255, 0, 0, 64], 15],

            ['TestRotatedBlurryShadow 1', ctx.getImageData(400, 900, 1, 1).data, [ 0, 0, 0, 0, 0], 0],
            ['TestRotatedBlurryShadow 2', ctx.getImageData(400, 800, 1, 1).data, [ 255, 0, 0, 31], 15],
            ['TestRotatedBlurryShadow 3', ctx.getImageData(400, 1000, 1, 1).data, [ 255, 0, 0, 31], 15],
            ['TestRotatedBlurryShadow 4', ctx.getImageData(300, 900, 1, 1).data, [ 255, 0, 0, 31], 15],
            ['TestRotatedBlurryShadow 5', ctx.getImageData(500, 900, 1, 1).data, [ 255, 0, 0, 31], 15],    
        ];

generate_tests(testPixelShadow, testScenarios);
        
 </script>
</body>
chromium/third_party/blink/web_tests/fast/canvas/canvas-fillPath-alpha-shadow.html
