<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', 100);
        lin.setAttribute('width', 100);
        var rad = document.createElement('canvas');
        rad.setAttribute('id', 'canvas' + counter + 'rad');
        rad.setAttribute('height', 100);
        rad.setAttribute('width', 100);
        
        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, 100);
        var radgrad = linctx.createRadialGradient(50, 50, 0, 50, 50, 50);
        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(5, 5, 90, 90);
        radctx.fillStyle = radgrad;
        radctx.fillRect(5, 5, 90, 90);

        counter++;
    }

    // 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'));

    // 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>