fillrect_gradient.html | Explore in Territory

<body>
<style type="text/css">
canvas { border: 1px solid black; }
</style>

Each square canvas should contain a colored gradient bordered by a narrow white margin and a black line.
The column on the left contains linear gradients, the column on the right radial gradients.<br>

<script>
    var counter = 1;
    function Test(description, gradient) {
        // Create canvas elements
        var lin = document.createElement('canvas');
        lin.setAttribute('id', 'canvas' + counter + 'lin');
        lin.setAttribute('height', 50);
        lin.setAttribute('width', 50);
        var rad = document.createElement('canvas');
        rad.setAttribute('id', 'canvas' + counter + 'rad');
        rad.setAttribute('height', 50);
        rad.setAttribute('width', 50);

        document.body.appendChild(lin);
        document.body.appendChild(rad);
        document.body.appendChild(document.createTextNode(' ' + description));
        document.body.appendChild(document.createElement('br'));

        // Find canvas contexts
        var linctx = lin.getContext('2d')
        var radctx = rad.getContext('2d')

        // Create linear and radial gradients from array
        var lingrad = linctx.createLinearGradient(0, 0, 0, 50);
        var radgrad = linctx.createRadialGradient(25, 25, 0, 25, 25, 25);
        for (var i = 0; i < gradient.length - 1; i+=2) {
            lingrad.addColorStop(gradient[i], gradient[i + 1]);
            radgrad.addColorStop(gradient[i], gradient[i + 1]);
        }

        // Apply them
        linctx.fillStyle = lingrad;
        linctx.fillRect(2, 2, 46, 46);
        radctx.fillStyle = radgrad;
        radctx.fillRect(2, 2, 46, 46);

        counter++;
    }

    // Note: This test won't be as useful with many more cases added, since
    // they'll scroll below the pixel-test boundary.

    // Simple gradient
    Test('Green to white',
         new Array(0, '#0f0',
                   1, '#fff'));

    // Multiple sections
    Test('Green to white to red',
         new Array(  0, '#0f0',
                   0.5, '#fff',
                   1,   '#f00'));

    // No stops at 0.0 or 1.0
    Test('Larger green to white to larger red',
         new Array(0.4, '#0f0',
                   0.5, '#fff',
                   0.6, '#f00'));

    // Only one stop, at zero
    Test('Solid red',
         new Array(0.0, '#f00'));

    // Only one stop, at 1.0
    Test('Solid red',
         new Array(1.0, '#f00'));

    // Only one stop, in the middle
    Test('Solid red',
         new Array(0.5, '#f00'));

    // Disjoint gradients (multiple stops at the same offset)
    Test('Blue to white in the top (inner) half, red to yellow in the bottom (outer) half',
         new Array(  0, '#00f',
                   0.5, '#fff',
                   0.5, '#f00',
                   1,   '#ff0'));

    // Ignored stops
    Test('Blue to white, red to yellow (same as previous)',
         new Array(0,   '#00f',
                   0.5, '#fff',
                   0.5, '#aaa',
                   0.5, '#abc',
                   0.5, '#f00',
                   1,   '#ff0'));

    // Unsorted stops
    Test('Blue to white, red to yellow (same as previous)',
         new Array(0.5, '#fff',
                   0.5, '#aaa',
                   1,   '#ff0',
                   0.5, '#abc',
                   0.5, '#f00',
                   0,   '#00f'));
</script>
</body>
chromium/third_party/blink/web_tests/fast/canvas/fillrect_gradient.html
