<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<body>
<script>

var canvas;
function fillWithColor(context, color) {
    context.save();
    context.fillStyle = color;
    context.fillRect(0, 0, canvas.width, canvas.height);
    context.restore();
}

test(function(t) {
    canvas = document.createElement("canvas");
    canvas.height = 100;
    canvas.width = 100;
    canvas.style.height = "100";
    canvas.style.width = "100";
    
    document.body.appendChild(canvas);
    
    var greenImage = document.createElement("canvas");
    greenImage.height = 10;
    greenImage.width = 10;
    var greenCtx = greenImage.getContext('2d');
    fillWithColor(greenCtx, "green");
    var greenPixel = greenCtx.getImageData(0, 0, 1, 1).data;
    
    var ctx = canvas.getContext('2d');
    var gradient = ctx.createLinearGradient(0, 0, 10, 0);
    gradient.addColorStop(0, "blue");
    gradient.addColorStop(1, "red");
    ctx.fillStyle = gradient;
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(10, 5);
    ctx.lineTo(10, 10);
    ctx.lineTo(5, 10);
    ctx.closePath();
    ctx.fill();
    
    ctx.fillStyle = "green";
    ctx.fillRect(20, 20, 10, 10);
    
    assert_array_equals(ctx.getImageData(20, 20, 1, 1).data, greenPixel);

}, "Test for canvas regression where gradient clips were not cleared https://bugs.webkit.org/show_bug.cgi?id=21498")
</script>
</body>