<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="../../resources/js-test-pre.js"></script>
</head>
<body>
<canvas id="canvas" width="200" height="200"></canvas>
<script>
description('Test Path2D as argument for clip.');

function areaColor(data, refColor) {
    if (!data.length)
        return true;
    var c = {r:0,g:0,b:0,a:0};
    for (var i = 0; i < data.length; i += 4) {
        c.r += data[i];
        c.g += data[i+1];
        c.b += data[i+2];
        c.a += data[i+3];
    }
    if (refColor.r == Math.round(c.r/data.length*4)
        && refColor.g == Math.round(c.g/data.length*4)
        && refColor.b == Math.round(c.b/data.length*4)
        && refColor.a == Math.round(c.a/data.length*4))
        return true;
    return false;
}

var ctx = document.createElement('canvas').getContext('2d');
document.body.appendChild(ctx.canvas);

var path = new Path2D();
path.moveTo(0,0);
path.lineTo(100,0);
path.lineTo(100,100);
path.lineTo(0,100);
path.lineTo(0,20);
path.lineTo(80,20);
path.lineTo(80,80);
path.lineTo(20,80);
path.lineTo(20,20);
path.lineTo(0,20);
path.closePath();

debug('Simple test of Path2D as argumeny for clip().');
ctx.fillStyle = 'rgb(0,255,0)';
ctx.save();
ctx.clip(path);
ctx.fillRect(0,0,300,150);
ctx.restore();
var imageData = ctx.getImageData(0, 0, 100, 100);
shouldBe('areaColor(imageData.data, {r:0,g:255,b:0,a:255})', 'true');
imageData = ctx.getImageData(100, 100, 50, 50);
shouldBe('areaColor(imageData.data, {r:0,g:0,b:0,a:0})', 'true');
debug('');

ctx.clearRect(0,0,300,150);
debug('Transform context and apply clip(). Context path should be ignored.');
ctx.save();
ctx.scale(2,2);
ctx.translate(50,50);
ctx.beginPath();
ctx.rect(-100,-100,100,100); // Ignore this path.
ctx.clip(path);
ctx.fillRect(0,0,300,150);
ctx.restore();
imageData = ctx.getImageData(100, 100, 200, 50);
shouldBe('areaColor(imageData.data, {r:0,g:255,b:0,a:255})', 'true');
imageData = ctx.getImageData(0, 0, 100, 100);
shouldBe('areaColor(imageData.data, {r:0,g:0,b:0,a:0})', 'true');
debug('');

ctx.clearRect(0,0,300,150);
debug('Path2D should not affect context path.');
ctx.save();
ctx.beginPath();
ctx.rect(100,100,50,50);
ctx.clip(path);
ctx.fillRect(0,0,300,150);
ctx.restore();
imageData = ctx.getImageData(0, 0, 100, 100);
shouldBe('areaColor(imageData.data, {r:0,g:255,b:0,a:255})', 'true');
imageData = ctx.getImageData(100, 100, 50, 50);
shouldBe('areaColor(imageData.data, {r:0,g:0,b:0,a:0})', 'true');
ctx.clearRect(0,0,300,150);
ctx.save();
ctx.clip();
ctx.fillRect(0,0,300,150);
ctx.restore();
imageData = ctx.getImageData(0, 0, 100, 100);
shouldBe('areaColor(imageData.data, {r:0,g:0,b:0,a:0})', 'true');
imageData = ctx.getImageData(100, 100, 50, 50);
shouldBe('areaColor(imageData.data, {r:0,g:255,b:0,a:255})', 'true');
debug('');

ctx.clearRect(0,0,300,150);
debug('Test WindingRule for Path2D.');
ctx.save();
ctx.clip(path, 'nonzero');
ctx.fillRect(0,0,300,150);
ctx.restore();
imageData = ctx.getImageData(0, 0, 100, 100);
shouldBe('areaColor(imageData.data, {r:0,g:255,b:0,a:255})', 'true');
ctx.clearRect(0,0,300,150);
ctx.save();
ctx.clip(path, 'evenodd');
ctx.fillRect(0,0,300,150);
ctx.restore();
imageData = ctx.getImageData(0, 0, 100, 20);
shouldBe('areaColor(imageData.data, {r:0,g:255,b:0,a:255})', 'true');
imageData = ctx.getImageData(0, 80, 100, 20);
shouldBe('areaColor(imageData.data, {r:0,g:255,b:0,a:255})', 'true');
imageData = ctx.getImageData(0, 20, 20, 60);
shouldBe('areaColor(imageData.data, {r:0,g:255,b:0,a:255})', 'true');
imageData = ctx.getImageData(80, 20, 20, 60);
shouldBe('areaColor(imageData.data, {r:0,g:255,b:0,a:255})', 'true');
imageData = ctx.getImageData(20, 20, 60, 60);
shouldBe('areaColor(imageData.data, {r:0,g:0,b:0,a:0})', 'true');

shouldThrow("ctx.clip(0)");
shouldThrow("ctx.clip(null)");
shouldThrow("ctx.clip('path2d')");
shouldNotThrow("ctx.clip(undefined)");
shouldThrow("ctx.clip(Number.MAX_VALUE)");
shouldThrow("ctx.clip(function() {})");
shouldThrow("ctx.clip(false)");
shouldThrow("ctx.clip(new Date())");
shouldThrow("ctx.clip(0, 'nonzero')");
shouldThrow("ctx.clip(null, 'nonzero')");
shouldThrow("ctx.clip('path2d', 'nonzero')");
shouldThrow("ctx.clip(undefined, 'nonzero')");
shouldThrow("ctx.clip(Number.MAX_VALUE, 'nonzero')");
shouldThrow("ctx.clip(function() {}, 'nonzero')");
shouldThrow("ctx.clip(false, 'nonzero')");
shouldThrow("ctx.clip(new Date(), 'nonzero')");
</script>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>