content/canvas/test/test_canvas.html
author David Anderson <danderson@mozilla.com>
Thu, 02 Feb 2012 15:06:21 -0800
changeset 105709 43b55878da4625751bc635fc425816e95583cf2f
parent 105619 8eb8ea0086b6506d8f33aaf83aac3efdba31e149
parent 85922 738e02c121ae550e6be9c30a11dbc2e928e68cc4
child 105926 f322d97d334c0003b93679a4943de623383c523a
permissions -rw-r--r--
Merge from mozilla-central.

<!DOCTYPE HTML>
<title>Canvas Tests</title>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" href="/tests/SimpleTest/test.css">
<body>
<script>

SimpleTest.waitForExplicitFinish();

function IsD2DEnabled() {
    var enabled = false;

    try {
        netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
        enabled = Components.classes["@mozilla.org/gfx/info;1"].getService(Components.interfaces.nsIGfxInfo).D2DEnabled;
    } catch(e) {}
    
    return enabled;
}

function IsMacOSX10_5orOlder() {
    var is105orOlder = false;

    if (navigator.platform.indexOf("Mac") == 0) {
        netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
        var version = Components.classes["@mozilla.org/system-info;1"]
                            .getService(Components.interfaces.nsIPropertyBag2)
                            .getProperty("version");
        // the next line is correct: Mac OS 10.6 corresponds to Darwin version 10 !
        // Mac OS 10.5 would be Darwin version 9. the |version| string we've got here
        // is the Darwin version.
        is105orOlder = (parseFloat(version) < 10.0);
    }
    return is105orOlder;
}


function IsAzureEnabled() {
  var enabled = false;

  try {
    netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
    enabled = Components.classes["@mozilla.org/gfx/info;1"].getService(Components.interfaces.nsIGfxInfo).AzureEnabled;
  } catch (e) { }

  return enabled;
}

function IsAzureSkia() {
  var enabled = false;
  
  try {
    netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
    var backend = Components.classes["@mozilla.org/gfx/info;1"].getService(Components.interfaces.nsIGfxInfo).getInfo().AzureBackend;
    enabled = (backend == "skia");
  } catch (e) { }

  return enabled;
}

</script>
<!-- Includes all the tests in the content/canvas/tests except for test_bug397524.html -->

<!-- [[[ test_2d.canvas.readonly.html ]]] -->

<p>Canvas test: 2d.canvas.readonly</p>
<!-- Testing: CanvasRenderingContext2D.canvas is readonly -->
<canvas id="c1" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>

function test_2d_canvas_readonly() {

var canvas = document.getElementById('c1');
var ctx = canvas.getContext('2d');

var c = document.createElement('canvas');
var d = ctx.canvas;
ok(c !== d, "c !== d");
try { ctx.canvas = c; } catch (e) {} // not sure whether this should throw or not...
ok(ctx.canvas === d, "ctx.canvas === d");


}
</script>

<!-- [[[ test_2d.canvas.reference.html ]]] -->

<p>Canvas test: 2d.canvas.reference</p>
<!-- Testing: CanvasRenderingContext2D.canvas refers back to its canvas -->
<canvas id="c2" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>

function test_2d_canvas_reference() {

var canvas = document.getElementById('c2');
var ctx = canvas.getContext('2d');

ok(ctx.canvas === canvas, "ctx.canvas === canvas");


}
</script>

<!-- [[[ test_2d.clearRect.basic.html ]]] -->

<p>Canvas test: 2d.clearRect.basic</p>
<canvas id="c3" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function isPixel(ctx, x,y, r,g,b,a, d) {
	var pos = x + "," + y;
	var colour = r + "," + g + "," + b + "," + a;
    var pixel = ctx.getImageData(x, y, 1, 1);
    var pr = pixel.data[0],
        pg = pixel.data[1],
        pb = pixel.data[2],
        pa = pixel.data[3];
    ok(r-d <= pr && pr <= r+d &&
       g-d <= pg && pg <= g+d &&
       b-d <= pb && pb <= b+d &&
       a-d <= pa && pa <= a+d,
       "pixel "+pos+" of "+ctx.canvas.id+" is "+pr+","+pg+","+pb+","+pa+"; expected "+colour+" +/- "+d);
}

function test_2d_clearRect_basic() {

var canvas = document.getElementById('c3');
var ctx = canvas.getContext('2d');

ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.clearRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,0,0,0, 0);


}
</script>

<!-- [[[ test_2d.clearRect.clip.html ]]] -->

<p>Canvas test: 2d.clearRect.clip</p>
<canvas id="c4" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_clearRect_clip() {

var canvas = document.getElementById('c4');
var ctx = canvas.getContext('2d');

ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);

ctx.beginPath();
ctx.rect(0, 0, 16, 16);
ctx.clip();

ctx.clearRect(0, 0, 100, 50);

ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 16, 16);

isPixel(ctx, 50,25, 0,255,0,255, 0);


}
</script>

<!-- [[[ test_2d.clearRect.globalalpha.html ]]] -->

<p>Canvas test: 2d.clearRect.globalalpha</p>
<canvas id="c5" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_clearRect_globalalpha() {

var canvas = document.getElementById('c5');
var ctx = canvas.getContext('2d');

ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.globalAlpha = 0.1;
ctx.clearRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,0,0,0, 0);


}
</script>

<!-- [[[ test_2d.clearRect.globalcomposite.html ]]] -->

<p>Canvas test: 2d.clearRect.globalcomposite</p>
<canvas id="c6" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_clearRect_globalcomposite() {

var canvas = document.getElementById('c6');
var ctx = canvas.getContext('2d');

ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'destination-atop';
ctx.clearRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,0,0,0, 0);


}
</script>

<!-- [[[ test_2d.clearRect.negative.html ]]] -->

<p>Canvas test: 2d.clearRect.negative</p>
<canvas id="c7" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_clearRect_negative() {

var canvas = document.getElementById('c7');
var ctx = canvas.getContext('2d');

ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.clearRect(0, 0, 50, 25);
ctx.clearRect(100, 0, -50, 25);
ctx.clearRect(0, 50, 50, -25);
ctx.clearRect(100, 50, -50, -25);
isPixel(ctx, 25,12, 0,0,0,0, 0);
isPixel(ctx, 75,12, 0,0,0,0, 0);
isPixel(ctx, 25,37, 0,0,0,0, 0);
isPixel(ctx, 75,37, 0,0,0,0, 0);


}
</script>

<!-- [[[ test_2d.clearRect.nonfinite.html ]]] -->

<p>Canvas test: 2d.clearRect.nonfinite</p>
<!-- Testing: clearRect() with Infinity/NaN is ignored -->
<canvas id="c8" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_clearRect_nonfinite() {

var canvas = document.getElementById('c8');
var ctx = canvas.getContext('2d');

var _thrown_outer = false;
try {

ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);

ctx.clearRect(Infinity, 0, 100, 50);
ctx.clearRect(-Infinity, 0, 100, 50);
ctx.clearRect(NaN, 0, 100, 50);
ctx.clearRect(0, Infinity, 100, 50);
ctx.clearRect(0, -Infinity, 100, 50);
ctx.clearRect(0, NaN, 100, 50);
ctx.clearRect(0, 0, Infinity, 50);
ctx.clearRect(0, 0, -Infinity, 50);
ctx.clearRect(0, 0, NaN, 50);
ctx.clearRect(0, 0, 100, Infinity);
ctx.clearRect(0, 0, 100, -Infinity);
ctx.clearRect(0, 0, 100, NaN);
ctx.clearRect(Infinity, Infinity, 100, 50);
ctx.clearRect(Infinity, Infinity, Infinity, 50);
ctx.clearRect(Infinity, Infinity, Infinity, Infinity);
ctx.clearRect(Infinity, Infinity, 100, Infinity);
ctx.clearRect(Infinity, 0, Infinity, 50);
ctx.clearRect(Infinity, 0, Infinity, Infinity);
ctx.clearRect(Infinity, 0, 100, Infinity);
ctx.clearRect(0, Infinity, Infinity, 50);
ctx.clearRect(0, Infinity, Infinity, Infinity);
ctx.clearRect(0, Infinity, 100, Infinity);
ctx.clearRect(0, 0, Infinity, Infinity);

isPixel(ctx, 50,25, 0,255,0,255, 0);

} catch (e) {
    _thrown_outer = true;
}
ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');


}
</script>

<!-- [[[ test_2d.clearRect.path.html ]]] -->

<p>Canvas test: 2d.clearRect.path</p>
<canvas id="c9" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_clearRect_path() {

var canvas = document.getElementById('c9');
var ctx = canvas.getContext('2d');

ctx.fillStyle = '#0f0';
ctx.beginPath();
ctx.rect(0, 0, 100, 50);
ctx.clearRect(0, 0, 16, 16);
ctx.fill();
isPixel(ctx, 50,25, 0,255,0,255, 0);


}
</script>

<!-- [[[ test_2d.clearRect.shadow.html ]]] -->

<p>Canvas test: 2d.clearRect.shadow</p>
<canvas id="c10" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_clearRect_shadow() {

var canvas = document.getElementById('c10');
var ctx = canvas.getContext('2d');

ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.shadowColor = '#f00';
ctx.shadowBlur = 0;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 50;
ctx.clearRect(0, -50, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);


}
</script>

<!-- [[[ test_2d.clearRect.transform.html ]]] -->

<p>Canvas test: 2d.clearRect.transform</p>
<canvas id="c11" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_clearRect_transform() {

var canvas = document.getElementById('c11');
var ctx = canvas.getContext('2d');

ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.scale(10, 10);
ctx.translate(0, 5);
ctx.clearRect(0, -5, 10, 5);
isPixel(ctx, 50,25, 0,0,0,0, 0);


}
</script>

<!-- [[[ test_2d.clearRect.zero.html ]]] -->

<p>Canvas test: 2d.clearRect.zero</p>
<canvas id="c12" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_clearRect_zero() {

var canvas = document.getElementById('c12');
var ctx = canvas.getContext('2d');

ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.clearRect(0, 0, 100, 0);
ctx.clearRect(0, 0, 0, 50);
ctx.clearRect(0, 0, 0, 0);
isPixel(ctx, 50,25, 0,255,0,255, 0);


}
</script>

<!-- [[[ test_2d.composite.canvas.copy.html ]]] -->

<p>Canvas test: 2d.composite.canvas.copy</p>
<canvas id="c13" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_composite_canvas_copy() {

var canvas = document.getElementById('c13');
var ctx = canvas.getContext('2d');


var canvas2 = document.createElement('canvas');
canvas2.width = canvas.width;
canvas2.height = canvas.height;
var ctx2 = canvas2.getContext('2d');
ctx2.drawImage(document.getElementById('yellow75_1.png'), 0, 0);
ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'copy';
ctx.drawImage(canvas2, 0, 0);
isPixel(ctx, 50,25, 255,255,0,191, 5);


}
</script>
<img src="image_yellow75.png" id="yellow75_1.png" class="resource">

<!-- [[[ test_2d.composite.canvas.destination-atop.html ]]] -->

<p>Canvas test: 2d.composite.canvas.destination-atop</p>
<canvas id="c14" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_composite_canvas_destination_atop() {

var canvas = document.getElementById('c14');
var ctx = canvas.getContext('2d');


var canvas2 = document.createElement('canvas');
canvas2.width = canvas.width;
canvas2.height = canvas.height;
var ctx2 = canvas2.getContext('2d');
ctx2.drawImage(document.getElementById('yellow75_2.png'), 0, 0);
ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'destination-atop';
ctx.drawImage(canvas2, 0, 0);
isPixel(ctx, 50,25, 127,255,127,191, 5);


}
</script>
<img src="image_yellow75.png" id="yellow75_2.png" class="resource">

<!-- [[[ test_2d.composite.canvas.destination-in.html ]]] -->

<p>Canvas test: 2d.composite.canvas.destination-in</p>
<canvas id="c15" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_composite_canvas_destination_in() {

var canvas = document.getElementById('c15');
var ctx = canvas.getContext('2d');


var canvas2 = document.createElement('canvas');
canvas2.width = canvas.width;
canvas2.height = canvas.height;
var ctx2 = canvas2.getContext('2d');
ctx2.drawImage(document.getElementById('yellow75_3.png'), 0, 0);
ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'destination-in';
ctx.drawImage(canvas2, 0, 0);
isPixel(ctx, 50,25, 0,255,255,95, 5);


}
</script>
<img src="image_yellow75.png" id="yellow75_3.png" class="resource">

<!-- [[[ test_2d.composite.canvas.destination-out.html ]]] -->

<p>Canvas test: 2d.composite.canvas.destination-out</p>
<canvas id="c16" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_composite_canvas_destination_out() {

var canvas = document.getElementById('c16');
var ctx = canvas.getContext('2d');


var canvas2 = document.createElement('canvas');
canvas2.width = canvas.width;
canvas2.height = canvas.height;
var ctx2 = canvas2.getContext('2d');
ctx2.drawImage(document.getElementById('yellow75_4.png'), 0, 0);
ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'destination-out';
ctx.drawImage(canvas2, 0, 0);
isPixel(ctx, 50,25, 0,255,255,31, 5);


}
</script>
<img src="image_yellow75.png" id="yellow75_4.png" class="resource">

<!-- [[[ test_2d.composite.canvas.destination-over.html ]]] -->

<p>Canvas test: 2d.composite.canvas.destination-over</p>
<canvas id="c17" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_composite_canvas_destination_over() {

var canvas = document.getElementById('c17');
var ctx = canvas.getContext('2d');


var canvas2 = document.createElement('canvas');
canvas2.width = canvas.width;
canvas2.height = canvas.height;
var ctx2 = canvas2.getContext('2d');
ctx2.drawImage(document.getElementById('yellow75_5.png'), 0, 0);
ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'destination-over';
ctx.drawImage(canvas2, 0, 0);
isPixel(ctx, 50,25, 109,255,145,223, 5);


}
</script>
<img src="image_yellow75.png" id="yellow75_5.png" class="resource">

<!-- [[[ test_2d.composite.canvas.lighter.html ]]] -->

<p>Canvas test: 2d.composite.canvas.lighter</p>
<canvas id="c18" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_composite_canvas_lighter() {

var canvas = document.getElementById('c18');
var ctx = canvas.getContext('2d');


var canvas2 = document.createElement('canvas');
canvas2.width = canvas.width;
canvas2.height = canvas.height;
var ctx2 = canvas2.getContext('2d');
ctx2.drawImage(document.getElementById('yellow75_6.png'), 0, 0);
ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'lighter';
ctx.drawImage(canvas2, 0, 0);
isPixel(ctx, 50,25, 191,255,127,255, 5);


}
</script>
<img src="image_yellow75.png" id="yellow75_6.png" class="resource">

<!-- [[[ test_2d.composite.canvas.source-atop.html ]]] -->

<p>Canvas test: 2d.composite.canvas.source-atop</p>
<canvas id="c19" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_composite_canvas_source_atop() {

var canvas = document.getElementById('c19');
var ctx = canvas.getContext('2d');


var canvas2 = document.createElement('canvas');
canvas2.width = canvas.width;
canvas2.height = canvas.height;
var ctx2 = canvas2.getContext('2d');
ctx2.drawImage(document.getElementById('yellow75_7.png'), 0, 0);
ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'source-atop';
ctx.drawImage(canvas2, 0, 0);
isPixel(ctx, 50,25, 191,255,63,127, 5);


}
</script>
<img src="image_yellow75.png" id="yellow75_7.png" class="resource">

<!-- [[[ test_2d.composite.canvas.source-in.html ]]] -->

<p>Canvas test: 2d.composite.canvas.source-in</p>
<canvas id="c20" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_composite_canvas_source_in() {

var canvas = document.getElementById('c20');
var ctx = canvas.getContext('2d');


var canvas2 = document.createElement('canvas');
canvas2.width = canvas.width;
canvas2.height = canvas.height;
var ctx2 = canvas2.getContext('2d');
ctx2.drawImage(document.getElementById('yellow75_8.png'), 0, 0);
ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'source-in';
ctx.drawImage(canvas2, 0, 0);
isPixel(ctx, 50,25, 255,255,0,95, 5);


}
</script>
<img src="image_yellow75.png" id="yellow75_8.png" class="resource">

<!-- [[[ test_2d.composite.canvas.source-out.html ]]] -->

<p>Canvas test: 2d.composite.canvas.source-out</p>
<canvas id="c21" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_composite_canvas_source_out() {

var canvas = document.getElementById('c21');
var ctx = canvas.getContext('2d');


var canvas2 = document.createElement('canvas');
canvas2.width = canvas.width;
canvas2.height = canvas.height;
var ctx2 = canvas2.getContext('2d');
ctx2.drawImage(document.getElementById('yellow75_9.png'), 0, 0);
ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'source-out';
ctx.drawImage(canvas2, 0, 0);
isPixel(ctx, 50,25, 255,255,0,95, 5);


}
</script>
<img src="image_yellow75.png" id="yellow75_9.png" class="resource">

<!-- [[[ test_2d.composite.canvas.source-over.html ]]] -->

<p>Canvas test: 2d.composite.canvas.source-over</p>
<canvas id="c22" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_composite_canvas_source_over() {

var canvas = document.getElementById('c22');
var ctx = canvas.getContext('2d');


var canvas2 = document.createElement('canvas');
canvas2.width = canvas.width;
canvas2.height = canvas.height;
var ctx2 = canvas2.getContext('2d');
ctx2.drawImage(document.getElementById('yellow75_10.png'), 0, 0);
ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'source-over';
ctx.drawImage(canvas2, 0, 0);
isPixel(ctx, 50,25, 218,255,36,223, 5);


}
</script>
<img src="image_yellow75.png" id="yellow75_10.png" class="resource">

<!-- [[[ test_2d.composite.canvas.xor.html ]]] -->

<p>Canvas test: 2d.composite.canvas.xor</p>
<canvas id="c23" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_composite_canvas_xor() {

var canvas = document.getElementById('c23');
var ctx = canvas.getContext('2d');


var canvas2 = document.createElement('canvas');
canvas2.width = canvas.width;
canvas2.height = canvas.height;
var ctx2 = canvas2.getContext('2d');
ctx2.drawImage(document.getElementById('yellow75_11.png'), 0, 0);
ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'xor';
ctx.drawImage(canvas2, 0, 0);
isPixel(ctx, 50,25, 191,255,63,127, 5);


}
</script>
<img src="image_yellow75.png" id="yellow75_11.png" class="resource">

<!-- [[[ test_2d.composite.clip.copy.html ]]] -->

<p>Canvas test: 2d.composite.clip.copy</p>
<!-- Testing: fill() does not affect pixels outside the clip region. -->
<canvas id="c24" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_composite_clip_copy() {

var canvas = document.getElementById('c24');
var ctx = canvas.getContext('2d');


ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'copy';
ctx.rect(-20, -20, 10, 10);
ctx.clip();
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 50, 50);
isPixel(ctx, 25,25, 0,255,0,255, 0);
isPixel(ctx, 75,25, 0,255,0,255, 0);


}
</script>

<!-- [[[ test_2d.composite.clip.destination-atop.html ]]] -->

<p>Canvas test: 2d.composite.clip.destination-atop</p>
<!-- Testing: fill() does not affect pixels outside the clip region. -->
<canvas id="c25" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_composite_clip_destination_atop() {

var canvas = document.getElementById('c25');
var ctx = canvas.getContext('2d');


ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'destination-atop';
ctx.rect(-20, -20, 10, 10);
ctx.clip();
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 50, 50);
isPixel(ctx, 25,25, 0,255,0,255, 0);
isPixel(ctx, 75,25, 0,255,0,255, 0);


}
</script>

<!-- [[[ test_2d.composite.clip.destination-in.html ]]] -->

<p>Canvas test: 2d.composite.clip.destination-in</p>
<!-- Testing: fill() does not affect pixels outside the clip region. -->
<canvas id="c26" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_composite_clip_destination_in() {

var canvas = document.getElementById('c26');
var ctx = canvas.getContext('2d');


ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'destination-in';
ctx.rect(-20, -20, 10, 10);
ctx.clip();
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 50, 50);
isPixel(ctx, 25,25, 0,255,0,255, 0);
isPixel(ctx, 75,25, 0,255,0,255, 0);


}
</script>

<!-- [[[ test_2d.composite.clip.destination-out.html ]]] -->

<p>Canvas test: 2d.composite.clip.destination-out</p>
<!-- Testing: fill() does not affect pixels outside the clip region. -->
<canvas id="c27" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_composite_clip_destination_out() {

var canvas = document.getElementById('c27');
var ctx = canvas.getContext('2d');


ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'destination-out';
ctx.rect(-20, -20, 10, 10);
ctx.clip();
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 50, 50);
isPixel(ctx, 25,25, 0,255,0,255, 0);
isPixel(ctx, 75,25, 0,255,0,255, 0);


}
</script>

<!-- [[[ test_2d.composite.clip.destination-over.html ]]] -->

<p>Canvas test: 2d.composite.clip.destination-over</p>
<!-- Testing: fill() does not affect pixels outside the clip region. -->
<canvas id="c28" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_composite_clip_destination_over() {

var canvas = document.getElementById('c28');
var ctx = canvas.getContext('2d');


ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'destination-over';
ctx.rect(-20, -20, 10, 10);
ctx.clip();
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 50, 50);
isPixel(ctx, 25,25, 0,255,0,255, 0);
isPixel(ctx, 75,25, 0,255,0,255, 0);


}
</script>

<!-- [[[ test_2d.composite.clip.lighter.html ]]] -->

<p>Canvas test: 2d.composite.clip.lighter</p>
<!-- Testing: fill() does not affect pixels outside the clip region. -->
<canvas id="c29" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_composite_clip_lighter() {

var canvas = document.getElementById('c29');
var ctx = canvas.getContext('2d');


ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'lighter';
ctx.rect(-20, -20, 10, 10);
ctx.clip();
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 50, 50);
isPixel(ctx, 25,25, 0,255,0,255, 0);
isPixel(ctx, 75,25, 0,255,0,255, 0);


}
</script>

<!-- [[[ test_2d.composite.clip.source-atop.html ]]] -->

<p>Canvas test: 2d.composite.clip.source-atop</p>
<!-- Testing: fill() does not affect pixels outside the clip region. -->
<canvas id="c30" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_composite_clip_source_atop() {

var canvas = document.getElementById('c30');
var ctx = canvas.getContext('2d');


ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'source-atop';
ctx.rect(-20, -20, 10, 10);
ctx.clip();
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 50, 50);
isPixel(ctx, 25,25, 0,255,0,255, 0);
isPixel(ctx, 75,25, 0,255,0,255, 0);


}
</script>

<!-- [[[ test_2d.composite.clip.source-in.html ]]] -->

<p>Canvas test: 2d.composite.clip.source-in</p>
<!-- Testing: fill() does not affect pixels outside the clip region. -->
<canvas id="c31" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_composite_clip_source_in() {

var canvas = document.getElementById('c31');
var ctx = canvas.getContext('2d');


ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'source-in';
ctx.rect(-20, -20, 10, 10);
ctx.clip();
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 50, 50);
isPixel(ctx, 25,25, 0,255,0,255, 0);
isPixel(ctx, 75,25, 0,255,0,255, 0);


}
</script>

<!-- [[[ test_2d.composite.clip.source-out.html ]]] -->

<p>Canvas test: 2d.composite.clip.source-out</p>
<!-- Testing: fill() does not affect pixels outside the clip region. -->
<canvas id="c32" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_composite_clip_source_out() {

var canvas = document.getElementById('c32');
var ctx = canvas.getContext('2d');


ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'source-out';
ctx.rect(-20, -20, 10, 10);
ctx.clip();
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 50, 50);
isPixel(ctx, 25,25, 0,255,0,255, 0);
isPixel(ctx, 75,25, 0,255,0,255, 0);


}
</script>

<!-- [[[ test_2d.composite.clip.source-over.html ]]] -->

<p>Canvas test: 2d.composite.clip.source-over</p>
<!-- Testing: fill() does not affect pixels outside the clip region. -->
<canvas id="c33" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_composite_clip_source_over() {

var canvas = document.getElementById('c33');
var ctx = canvas.getContext('2d');


ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'source-over';
ctx.rect(-20, -20, 10, 10);
ctx.clip();
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 50, 50);
isPixel(ctx, 25,25, 0,255,0,255, 0);
isPixel(ctx, 75,25, 0,255,0,255, 0);


}
</script>

<!-- [[[ test_2d.composite.clip.xor.html ]]] -->

<p>Canvas test: 2d.composite.clip.xor</p>
<!-- Testing: fill() does not affect pixels outside the clip region. -->
<canvas id="c34" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_composite_clip_xor() {

var canvas = document.getElementById('c34');
var ctx = canvas.getContext('2d');


ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'xor';
ctx.rect(-20, -20, 10, 10);
ctx.clip();
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 50, 50);
isPixel(ctx, 25,25, 0,255,0,255, 0);
isPixel(ctx, 75,25, 0,255,0,255, 0);


}
</script>

<!-- [[[ test_2d.composite.globalAlpha.canvas.html ]]] -->

<p>Canvas test: 2d.composite.globalAlpha.canvas</p>
<canvas id="c35" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_composite_globalAlpha_canvas() {

var canvas = document.getElementById('c35');
var ctx = canvas.getContext('2d');

var canvas2 = document.createElement('canvas');
canvas2.width = 100;
canvas2.height = 50;
var ctx2 = canvas2.getContext('2d');
ctx2.fillStyle = '#f00';
ctx2.fillRect(0, 0, 100, 50);

ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.globalAlpha = 0.01; // avoid any potential alpha=0 optimisations
ctx.drawImage(canvas2, 0, 0);
isPixel(ctx, 50,25, 2,253,0,255, 2);


}
</script>

<!-- [[[ test_2d.composite.globalAlpha.canvaspattern.html ]]] -->

<p>Canvas test: 2d.composite.globalAlpha.canvaspattern - bug 401790</p>
<canvas id="c36" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>

function todo_isPixel(ctx, x,y, r,g,b,a, d) {
	var pos = x + "," + y;
	var colour = r + "," + g + "," + b + "," + a;
    var pixel = ctx.getImageData(x, y, 1, 1);
    var pr = pixel.data[0],
        pg = pixel.data[1],
        pb = pixel.data[2],
        pa = pixel.data[3];
    todo(r-d <= pr && pr <= r+d &&
       g-d <= pg && pg <= g+d &&
       b-d <= pb && pb <= b+d &&
       a-d <= pa && pa <= a+d,
       "pixel "+pos+" of "+ctx.canvas.id+" is "+pr+","+pg+","+pb+","+pa+" (marked todo); expected "+colour+" +/- " + d);
}

function test_2d_composite_globalAlpha_canvaspattern() {

var canvas = document.getElementById('c36');
var ctx = canvas.getContext('2d');

var canvas2 = document.createElement('canvas');
canvas2.width = 100;
canvas2.height = 50;
var ctx2 = canvas2.getContext('2d');
ctx2.fillStyle = '#f00';
ctx2.fillRect(0, 0, 100, 50);

ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = ctx.createPattern(canvas2, 'no-repeat');
ctx.globalAlpha = 0.01; // avoid any potential alpha=0 optimisations
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 2,253,0,255, 2);


}
</script>

<!-- [[[ test_2d.composite.globalAlpha.default.html ]]] -->

<p>Canvas test: 2d.composite.globalAlpha.default</p>
<canvas id="c37" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>

function test_2d_composite_globalAlpha_default() {

var canvas = document.getElementById('c37');
var ctx = canvas.getContext('2d');

ok(ctx.globalAlpha === 1.0, "ctx.globalAlpha === 1.0");


}
</script>

<!-- [[[ test_2d.composite.globalAlpha.fill.html ]]] -->

<p>Canvas test: 2d.composite.globalAlpha.fill</p>
<canvas id="c38" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_composite_globalAlpha_fill() {

var canvas = document.getElementById('c38');
var ctx = canvas.getContext('2d');

ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.globalAlpha = 0.01; // avoid any potential alpha=0 optimisations
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 2,253,0,255, 2);


}
</script>

<!-- [[[ test_2d.composite.globalAlpha.image.html ]]] -->

<p>Canvas test: 2d.composite.globalAlpha.image</p>
<canvas id="c39" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_composite_globalAlpha_image() {

var canvas = document.getElementById('c39');
var ctx = canvas.getContext('2d');

ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.globalAlpha = 0.01; // avoid any potential alpha=0 optimisations
ctx.drawImage(document.getElementById('red_1.png'), 0, 0);
isPixel(ctx, 50,25, 2,253,0,255, 2);


}
</script>
<img src="image_red.png" id="red_1.png" class="resource">

<!-- [[[ test_2d.composite.globalAlpha.imagepattern.html ]]] -->

<p>Canvas test: 2d.composite.globalAlpha.imagepattern - bug 401790</p>
<canvas id="c40" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>



function test_2d_composite_globalAlpha_imagepattern() {

var canvas = document.getElementById('c40');
var ctx = canvas.getContext('2d');

ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = ctx.createPattern(document.getElementById('red_2.png'), 'no-repeat');
ctx.globalAlpha = 0.01; // avoid any potential alpha=0 optimisations
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 2,253,0,255, 2);


}
</script>
<img src="image_red.png" id="red_2.png" class="resource">

<!-- [[[ test_2d.composite.globalAlpha.invalid.html ]]] -->

<p>Canvas test: 2d.composite.globalAlpha.invalid</p>
<canvas id="c41" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>

function test_2d_composite_globalAlpha_invalid() {

var canvas = document.getElementById('c41');
var ctx = canvas.getContext('2d');

ctx.globalAlpha = 0.5;
var a = ctx.globalAlpha; // might not be exactly 0.5, if it is rounded/quantised, so remember for future comparisons
ctx.globalAlpha = Infinity;
ok(ctx.globalAlpha === a, "ctx.globalAlpha === a");
ctx.globalAlpha = -Infinity;
ok(ctx.globalAlpha === a, "ctx.globalAlpha === a");
ctx.globalAlpha = NaN;
ok(ctx.globalAlpha === a, "ctx.globalAlpha === a");

}
</script>

<!-- [[[ test_2d.composite.globalAlpha.range.html ]]] -->

<p>Canvas test: 2d.composite.globalAlpha.range</p>
<canvas id="c42" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>

function test_2d_composite_globalAlpha_range() {

var canvas = document.getElementById('c42');
var ctx = canvas.getContext('2d');

ctx.globalAlpha = 0.5;
var a = ctx.globalAlpha; // might not be exactly 0.5, if it is rounded/quantised, so remember for future comparisons
ctx.globalAlpha = 1.1;
ok(ctx.globalAlpha == a, "ctx.globalAlpha == a");
ctx.globalAlpha = -0.1;
ok(ctx.globalAlpha == a, "ctx.globalAlpha == a");
ctx.globalAlpha = 0;
ok(ctx.globalAlpha == 0, "ctx.globalAlpha == 0");
ctx.globalAlpha = 1;
ok(ctx.globalAlpha == 1, "ctx.globalAlpha == 1");


}
</script>

<!-- [[[ test_2d.composite.image.copy.html ]]] -->

<p>Canvas test: 2d.composite.image.copy</p>
<canvas id="c43" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_composite_image_copy() {

var canvas = document.getElementById('c43');
var ctx = canvas.getContext('2d');


ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'copy';
ctx.drawImage(document.getElementById('yellow75_12.png'), 0, 0);
isPixel(ctx, 50,25, 255,255,0,191, 5);


}
</script>
<img src="image_yellow75.png" id="yellow75_12.png" class="resource">

<!-- [[[ test_2d.composite.image.destination-atop.html ]]] -->

<p>Canvas test: 2d.composite.image.destination-atop</p>
<canvas id="c44" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_composite_image_destination_atop() {

var canvas = document.getElementById('c44');
var ctx = canvas.getContext('2d');


ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'destination-atop';
ctx.drawImage(document.getElementById('yellow75_13.png'), 0, 0);
isPixel(ctx, 50,25, 127,255,127,191, 5);


}
</script>
<img src="image_yellow75.png" id="yellow75_13.png" class="resource">

<!-- [[[ test_2d.composite.image.destination-in.html ]]] -->

<p>Canvas test: 2d.composite.image.destination-in</p>
<canvas id="c45" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_composite_image_destination_in() {

var canvas = document.getElementById('c45');
var ctx = canvas.getContext('2d');


ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'destination-in';
ctx.drawImage(document.getElementById('yellow75_14.png'), 0, 0);
isPixel(ctx, 50,25, 0,255,255,95, 5);


}
</script>
<img src="image_yellow75.png" id="yellow75_14.png" class="resource">

<!-- [[[ test_2d.composite.image.destination-out.html ]]] -->

<p>Canvas test: 2d.composite.image.destination-out</p>
<canvas id="c46" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_composite_image_destination_out() {

var canvas = document.getElementById('c46');
var ctx = canvas.getContext('2d');


ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'destination-out';
ctx.drawImage(document.getElementById('yellow75_15.png'), 0, 0);
isPixel(ctx, 50,25, 0,255,255,31, 5);


}
</script>
<img src="image_yellow75.png" id="yellow75_15.png" class="resource">

<!-- [[[ test_2d.composite.image.destination-over.html ]]] -->

<p>Canvas test: 2d.composite.image.destination-over</p>
<canvas id="c47" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_composite_image_destination_over() {

var canvas = document.getElementById('c47');
var ctx = canvas.getContext('2d');


ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'destination-over';
ctx.drawImage(document.getElementById('yellow75_16.png'), 0, 0);
isPixel(ctx, 50,25, 109,255,145,223, 5);


}
</script>
<img src="image_yellow75.png" id="yellow75_16.png" class="resource">

<!-- [[[ test_2d.composite.image.lighter.html ]]] -->

<p>Canvas test: 2d.composite.image.lighter</p>
<canvas id="c48" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_composite_image_lighter() {

var canvas = document.getElementById('c48');
var ctx = canvas.getContext('2d');


ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'lighter';
ctx.drawImage(document.getElementById('yellow75_17.png'), 0, 0);
isPixel(ctx, 50,25, 191,255,127,255, 5);


}
</script>
<img src="image_yellow75.png" id="yellow75_17.png" class="resource">

<!-- [[[ test_2d.composite.image.source-atop.html ]]] -->

<p>Canvas test: 2d.composite.image.source-atop</p>
<canvas id="c49" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_composite_image_source_atop() {

var canvas = document.getElementById('c49');
var ctx = canvas.getContext('2d');


ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'source-atop';
ctx.drawImage(document.getElementById('yellow75_18.png'), 0, 0);
isPixel(ctx, 50,25, 191,255,63,127, 5);


}
</script>
<img src="image_yellow75.png" id="yellow75_18.png" class="resource">

<!-- [[[ test_2d.composite.image.source-in.html ]]] -->

<p>Canvas test: 2d.composite.image.source-in</p>
<canvas id="c50" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_composite_image_source_in() {

var canvas = document.getElementById('c50');
var ctx = canvas.getContext('2d');


ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'source-in';
ctx.drawImage(document.getElementById('yellow75_19.png'), 0, 0);
isPixel(ctx, 50,25, 255,255,0,95, 5);


}
</script>
<img src="image_yellow75.png" id="yellow75_19.png" class="resource">

<!-- [[[ test_2d.composite.image.source-out.html ]]] -->

<p>Canvas test: 2d.composite.image.source-out</p>
<canvas id="c51" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_composite_image_source_out() {

var canvas = document.getElementById('c51');
var ctx = canvas.getContext('2d');


ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'source-out';
ctx.drawImage(document.getElementById('yellow75_20.png'), 0, 0);
isPixel(ctx, 50,25, 255,255,0,95, 5);


}
</script>
<img src="image_yellow75.png" id="yellow75_20.png" class="resource">

<!-- [[[ test_2d.composite.image.source-over.html ]]] -->

<p>Canvas test: 2d.composite.image.source-over</p>
<canvas id="c52" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_composite_image_source_over() {

var canvas = document.getElementById('c52');
var ctx = canvas.getContext('2d');


ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'source-over';
ctx.drawImage(document.getElementById('yellow75_21.png'), 0, 0);
isPixel(ctx, 50,25, 218,255,36,223, 5);


}
</script>
<img src="image_yellow75.png" id="yellow75_21.png" class="resource">

<!-- [[[ test_2d.composite.image.xor.html ]]] -->

<p>Canvas test: 2d.composite.image.xor</p>
<canvas id="c53" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_composite_image_xor() {

var canvas = document.getElementById('c53');
var ctx = canvas.getContext('2d');


ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'xor';
ctx.drawImage(document.getElementById('yellow75_22.png'), 0, 0);
isPixel(ctx, 50,25, 191,255,63,127, 5);


}
</script>
<img src="image_yellow75.png" id="yellow75_22.png" class="resource">

<!-- [[[ test_2d.composite.operation.casesensitive.html ]]] -->

<p>Canvas test: 2d.composite.operation.casesensitive - bug 401788</p>
<canvas id="c54" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>

function test_2d_composite_operation_casesensitive() {

var canvas = document.getElementById('c54');
var ctx = canvas.getContext('2d');

var _thrown_outer = false;
try {

ctx.globalCompositeOperation = 'xor';
ctx.globalCompositeOperation = 'Source-over';
ok(ctx.globalCompositeOperation == 'xor', "ctx.globalCompositeOperation == 'xor'");

} catch (e) {
    _thrown_outer = true;
}
ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');


}
</script>

<!-- [[[ test_2d.composite.operation.clear.html ]]] -->

<p>Canvas test: 2d.composite.operation.clear</p>
<canvas id="c55" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>

function test_2d_composite_operation_clear() {

var canvas = document.getElementById('c55');
var ctx = canvas.getContext('2d');

ctx.globalCompositeOperation = 'xor';
ctx.globalCompositeOperation = 'clear';
ok(ctx.globalCompositeOperation == 'xor', "ctx.globalCompositeOperation == 'xor'");


}
</script>

<!-- [[[ test_2d.composite.operation.darker.html ]]] -->

<p>Canvas test: 2d.composite.operation.darker</p>
<canvas id="c56" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>

function test_2d_composite_operation_darker() {

var canvas = document.getElementById('c56');
var ctx = canvas.getContext('2d');

ctx.globalCompositeOperation = 'xor';
ctx.globalCompositeOperation = 'darker';
ok(ctx.globalCompositeOperation == 'xor', "ctx.globalCompositeOperation == 'xor'");


}
</script>

<!-- [[[ test_2d.composite.operation.default.html ]]] -->

<p>Canvas test: 2d.composite.operation.default</p>
<canvas id="c57" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>

function test_2d_composite_operation_default() {

var canvas = document.getElementById('c57');
var ctx = canvas.getContext('2d');

ok(ctx.globalCompositeOperation == 'source-over', "ctx.globalCompositeOperation == 'source-over'");


}
</script>

<!-- [[[ test_2d.composite.operation.get.html ]]] -->

<p>Canvas test: 2d.composite.operation.get</p>
<canvas id="c58" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>

function test_2d_composite_operation_get() {

var canvas = document.getElementById('c58');
var ctx = canvas.getContext('2d');

var modes = ['source-atop', 'source-in', 'source-out', 'source-over',
    'destination-atop', 'destination-in', 'destination-out', 'destination-over',
    'lighter', 'copy', 'xor'];
for (var i = 0; i < modes.length; ++i)
{
    ctx.globalCompositeOperation = modes[i];
    ok(ctx.globalCompositeOperation == modes[i], "ctx.globalCompositeOperation == modes[\""+(i)+"\"]");
}


}
</script>

<!-- [[[ test_2d.composite.operation.highlight.html ]]] -->

<p>Canvas test: 2d.composite.operation.highlight - bug 401788</p>
<canvas id="c59" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>

function test_2d_composite_operation_highlight() {

var canvas = document.getElementById('c59');
var ctx = canvas.getContext('2d');

var _thrown_outer = false;
try {

ctx.globalCompositeOperation = 'xor';
ctx.globalCompositeOperation = 'highlight';
ok(ctx.globalCompositeOperation == 'xor', "ctx.globalCompositeOperation == 'xor'");

} catch (e) {
    _thrown_outer = true;
}
ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');


}
</script>

<!-- [[[ test_2d.composite.operation.nullsuffix.html ]]] -->

<p>Canvas test: 2d.composite.operation.nullsuffix - bug 401788</p>
<canvas id="c60" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>

function test_2d_composite_operation_nullsuffix() {

var canvas = document.getElementById('c60');
var ctx = canvas.getContext('2d');

var _thrown_outer = false;
try {

ctx.globalCompositeOperation = 'xor';
ctx.globalCompositeOperation = 'source-over\0';
ok(ctx.globalCompositeOperation == 'xor', "ctx.globalCompositeOperation == 'xor'");

} catch (e) {
    _thrown_outer = true;
}
ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');


}
</script>

<!-- [[[ test_2d.composite.operation.over.html ]]] -->

<p>Canvas test: 2d.composite.operation.over</p>
<canvas id="c61" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>

function test_2d_composite_operation_over() {

var canvas = document.getElementById('c61');
var ctx = canvas.getContext('2d');

ctx.globalCompositeOperation = 'xor';
ctx.globalCompositeOperation = 'over';
ok(ctx.globalCompositeOperation == 'xor', "ctx.globalCompositeOperation == 'xor'");


}
</script>

<!-- [[[ test_2d.composite.operation.unrecognised.html ]]] -->

<p>Canvas test: 2d.composite.operation.unrecognised - bug 401788</p>
<canvas id="c62" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>

function test_2d_composite_operation_unrecognised() {

var canvas = document.getElementById('c62');
var ctx = canvas.getContext('2d');

var _thrown_outer = false;
try {

ctx.globalCompositeOperation = 'xor';
ctx.globalCompositeOperation = 'nonexistent';
ok(ctx.globalCompositeOperation == 'xor', "ctx.globalCompositeOperation == 'xor'");

} catch (e) {
    _thrown_outer = true;
}
ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');


}
</script>

<!-- [[[ test_2d.composite.solid.copy.html ]]] -->

<p>Canvas test: 2d.composite.solid.copy</p>
<canvas id="c63" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_composite_solid_copy() {

var canvas = document.getElementById('c63');
var ctx = canvas.getContext('2d');


ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'copy';
ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 255,255,0,255, 5);


}
</script>

<!-- [[[ test_2d.composite.solid.destination-atop.html ]]] -->

<p>Canvas test: 2d.composite.solid.destination-atop</p>
<canvas id="c64" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_composite_solid_destination_atop() {

var canvas = document.getElementById('c64');
var ctx = canvas.getContext('2d');


ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'destination-atop';
ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,255,255, 5);


}
</script>

<!-- [[[ test_2d.composite.solid.destination-in.html ]]] -->

<p>Canvas test: 2d.composite.solid.destination-in</p>
<canvas id="c65" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_composite_solid_destination_in() {

var canvas = document.getElementById('c65');
var ctx = canvas.getContext('2d');


ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'destination-in';
ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,255,255, 5);


}
</script>

<!-- [[[ test_2d.composite.solid.destination-out.html ]]] -->

<p>Canvas test: 2d.composite.solid.destination-out</p>
<canvas id="c66" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_composite_solid_destination_out() {

var canvas = document.getElementById('c66');
var ctx = canvas.getContext('2d');


ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'destination-out';
ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,0,0,0, 5);


}
</script>

<!-- [[[ test_2d.composite.solid.destination-over.html ]]] -->

<p>Canvas test: 2d.composite.solid.destination-over</p>
<canvas id="c67" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_composite_solid_destination_over() {

var canvas = document.getElementById('c67');
var ctx = canvas.getContext('2d');


ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'destination-over';
ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,255,255, 5);


}
</script>

<!-- [[[ test_2d.composite.solid.lighter.html ]]] -->

<p>Canvas test: 2d.composite.solid.lighter</p>
<canvas id="c68" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_composite_solid_lighter() {

var canvas = document.getElementById('c68');
var ctx = canvas.getContext('2d');


ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'lighter';
ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 255,255,255,255, 5);


}
</script>

<!-- [[[ test_2d.composite.solid.source-atop.html ]]] -->

<p>Canvas test: 2d.composite.solid.source-atop</p>
<canvas id="c69" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_composite_solid_source_atop() {

var canvas = document.getElementById('c69');
var ctx = canvas.getContext('2d');


ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'source-atop';
ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 255,255,0,255, 5);


}
</script>

<!-- [[[ test_2d.composite.solid.source-in.html ]]] -->

<p>Canvas test: 2d.composite.solid.source-in</p>
<canvas id="c70" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_composite_solid_source_in() {

var canvas = document.getElementById('c70');
var ctx = canvas.getContext('2d');


ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'source-in';
ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 255,255,0,255, 5);


}
</script>

<!-- [[[ test_2d.composite.solid.source-out.html ]]] -->

<p>Canvas test: 2d.composite.solid.source-out</p>
<canvas id="c71" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_composite_solid_source_out() {

var canvas = document.getElementById('c71');
var ctx = canvas.getContext('2d');


ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'source-out';
ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,0,0,0, 5);


}
</script>

<!-- [[[ test_2d.composite.solid.source-over.html ]]] -->

<p>Canvas test: 2d.composite.solid.source-over</p>
<canvas id="c72" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_composite_solid_source_over() {

var canvas = document.getElementById('c72');
var ctx = canvas.getContext('2d');


ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 255,255,0,255, 5);


}
</script>

<!-- [[[ test_2d.composite.solid.xor.html ]]] -->

<p>Canvas test: 2d.composite.solid.xor</p>
<canvas id="c73" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_composite_solid_xor() {

var canvas = document.getElementById('c73');
var ctx = canvas.getContext('2d');


ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'xor';
ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,0,0,0, 5);


}
</script>

<!-- [[[ test_2d.composite.transparent.copy.html ]]] -->

<p>Canvas test: 2d.composite.transparent.copy</p>
<canvas id="c74" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_composite_transparent_copy() {

var canvas = document.getElementById('c74');
var ctx = canvas.getContext('2d');


ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'copy';
ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,0,255,191, 5);


}
</script>

<!-- [[[ test_2d.composite.transparent.destination-atop.html ]]] -->

<p>Canvas test: 2d.composite.transparent.destination-atop</p>
<canvas id="c75" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_composite_transparent_destination_atop() {

var canvas = document.getElementById('c75');
var ctx = canvas.getContext('2d');


ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'destination-atop';
ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,127,127,191, 5);


}
</script>

<!-- [[[ test_2d.composite.transparent.destination-in.html ]]] -->

<p>Canvas test: 2d.composite.transparent.destination-in</p>
<canvas id="c76" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_composite_transparent_destination_in() {

var canvas = document.getElementById('c76');
var ctx = canvas.getContext('2d');


ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'destination-in';
ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,95, 5);


}
</script>

<!-- [[[ test_2d.composite.transparent.destination-out.html ]]] -->

<p>Canvas test: 2d.composite.transparent.destination-out</p>
<canvas id="c77" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_composite_transparent_destination_out() {

var canvas = document.getElementById('c77');
var ctx = canvas.getContext('2d');


ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'destination-out';
ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,31, 5);


}
</script>

<!-- [[[ test_2d.composite.transparent.destination-over.html ]]] -->

<p>Canvas test: 2d.composite.transparent.destination-over</p>
<canvas id="c78" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_composite_transparent_destination_over() {

var canvas = document.getElementById('c78');
var ctx = canvas.getContext('2d');


ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'destination-over';
ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,145,109,223, 5);


}
</script>

<!-- [[[ test_2d.composite.transparent.lighter.html ]]] -->

<p>Canvas test: 2d.composite.transparent.lighter</p>
<canvas id="c79" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_composite_transparent_lighter() {

var canvas = document.getElementById('c79');
var ctx = canvas.getContext('2d');


ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'lighter';
ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,127,191,255, 5);


}
</script>

<!-- [[[ test_2d.composite.transparent.source-atop.html ]]] -->

<p>Canvas test: 2d.composite.transparent.source-atop</p>
<canvas id="c80" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_composite_transparent_source_atop() {

var canvas = document.getElementById('c80');
var ctx = canvas.getContext('2d');


ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'source-atop';
ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,63,191,127, 5);


}
</script>

<!-- [[[ test_2d.composite.transparent.source-in.html ]]] -->

<p>Canvas test: 2d.composite.transparent.source-in</p>
<canvas id="c81" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_composite_transparent_source_in() {

var canvas = document.getElementById('c81');
var ctx = canvas.getContext('2d');


ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'source-in';
ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,0,255,95, 5);


}
</script>

<!-- [[[ test_2d.composite.transparent.source-out.html ]]] -->

<p>Canvas test: 2d.composite.transparent.source-out</p>
<canvas id="c82" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_composite_transparent_source_out() {

var canvas = document.getElementById('c82');
var ctx = canvas.getContext('2d');


ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'source-out';
ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,0,255,95, 5);


}
</script>

<!-- [[[ test_2d.composite.transparent.source-over.html ]]] -->

<p>Canvas test: 2d.composite.transparent.source-over</p>
<canvas id="c83" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_composite_transparent_source_over() {

var canvas = document.getElementById('c83');
var ctx = canvas.getContext('2d');


ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,36,218,223, 5);


}
</script>

<!-- [[[ test_2d.composite.transparent.xor.html ]]] -->

<p>Canvas test: 2d.composite.transparent.xor</p>
<canvas id="c84" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_composite_transparent_xor() {

var canvas = document.getElementById('c84');
var ctx = canvas.getContext('2d');


ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'xor';
ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,63,191,127, 5);


}
</script>

<!-- [[[ test_2d.composite.uncovered.fill.copy.html ]]] -->

<p>Canvas test: 2d.composite.uncovered.fill.copy</p>
<!-- Testing: fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. -->
<canvas id="c85" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>



function test_2d_composite_uncovered_fill_copy() {

var canvas = document.getElementById('c85');
var ctx = canvas.getContext('2d');


ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'copy';
ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
ctx.translate(0, 25);
ctx.fillRect(0, 50, 100, 50);
isPixel(ctx, 50,25, 0,0,0,0, 5);


}
</script>

<!-- [[[ test_2d.composite.uncovered.fill.destination-atop.html ]]] -->

<p>Canvas test: 2d.composite.uncovered.fill.destination-atop</p>
<!-- Testing: fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. -->
<canvas id="c86" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>



function test_2d_composite_uncovered_fill_destination_atop() {

var canvas = document.getElementById('c86');
var ctx = canvas.getContext('2d');


ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'destination-atop';
ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
ctx.translate(0, 25);
ctx.fillRect(0, 50, 100, 50);
isPixel(ctx, 50,25, 0,0,0,0, 5);


}
</script>

<!-- [[[ test_2d.composite.uncovered.fill.destination-in.html ]]] -->

<p>Canvas test: 2d.composite.uncovered.fill.destination-in</p>
<!-- Testing: fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. -->
<canvas id="c87" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>



function test_2d_composite_uncovered_fill_destination_in() {

var canvas = document.getElementById('c87');
var ctx = canvas.getContext('2d');


ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'destination-in';
ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
ctx.translate(0, 25);
ctx.fillRect(0, 50, 100, 50);
isPixel(ctx, 50,25, 0,0,0,0, 5);


}
</script>

<!-- [[[ test_2d.composite.uncovered.fill.source-in.html ]]] -->

<p>Canvas test: 2d.composite.uncovered.fill.source-in</p>
<!-- Testing: fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. -->
<canvas id="c88" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>



function test_2d_composite_uncovered_fill_source_in() {

var canvas = document.getElementById('c88');
var ctx = canvas.getContext('2d');


ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'source-in';
ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
ctx.translate(0, 25);
ctx.fillRect(0, 50, 100, 50);
isPixel(ctx, 50,25, 0,0,0,0, 5);


}
</script>

<!-- [[[ test_2d.composite.uncovered.fill.source-out.html ]]] -->

<p>Canvas test: 2d.composite.uncovered.fill.source-out</p>
<!-- Testing: fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. -->
<canvas id="c89" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>



function test_2d_composite_uncovered_fill_source_out() {

var canvas = document.getElementById('c89');
var ctx = canvas.getContext('2d');


ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'source-out';
ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
ctx.translate(0, 25);
ctx.fillRect(0, 50, 100, 50);
isPixel(ctx, 50,25, 0,0,0,0, 5);


}
</script>

<!-- [[[ test_2d.composite.uncovered.image.copy.html ]]] -->

<p>Canvas test: 2d.composite.uncovered.image.copy</p>
<!-- Testing: drawImage() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. -->
<canvas id="c90" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>



function test_2d_composite_uncovered_image_copy() {

var canvas = document.getElementById('c90');
var ctx = canvas.getContext('2d');


ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'copy';
ctx.drawImage(document.getElementById('yellow_1.png'), 40, 40, 10, 10, 40, 50, 10, 10);
isPixel(ctx, 15,15, 0,0,0,0, 5);
isPixel(ctx, 50,25, 0,0,0,0, 5);


}
</script>
<img src="image_yellow.png" id="yellow_1.png" class="resource">

<!-- [[[ test_2d.composite.uncovered.image.destination-atop.html ]]] -->

<p>Canvas test: 2d.composite.uncovered.image.destination-atop</p>
<!-- Testing: drawImage() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. -->
<canvas id="c91" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>



function test_2d_composite_uncovered_image_destination_atop() {

var canvas = document.getElementById('c91');
var ctx = canvas.getContext('2d');


ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'destination-atop';
ctx.drawImage(document.getElementById('yellow_2.png'), 40, 40, 10, 10, 40, 50, 10, 10);
isPixel(ctx, 15,15, 0,0,0,0, 5);
isPixel(ctx, 50,25, 0,0,0,0, 5);


}
</script>
<img src="image_yellow.png" id="yellow_2.png" class="resource">

<!-- [[[ test_2d.composite.uncovered.image.destination-in.html ]]] -->

<p>Canvas test: 2d.composite.uncovered.image.destination-in</p>
<!-- Testing: drawImage() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. -->
<canvas id="c92" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>



function test_2d_composite_uncovered_image_destination_in() {

var canvas = document.getElementById('c92');
var ctx = canvas.getContext('2d');


ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'destination-in';
ctx.drawImage(document.getElementById('yellow_3.png'), 40, 40, 10, 10, 40, 50, 10, 10);
isPixel(ctx, 15,15, 0,0,0,0, 5);
isPixel(ctx, 50,25, 0,0,0,0, 5);


}
</script>
<img src="image_yellow.png" id="yellow_3.png" class="resource">

<!-- [[[ test_2d.composite.uncovered.image.source-in.html ]]] -->

<p>Canvas test: 2d.composite.uncovered.image.source-in</p>
<!-- Testing: drawImage() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. -->
<canvas id="c93" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>



function test_2d_composite_uncovered_image_source_in() {

var canvas = document.getElementById('c93');
var ctx = canvas.getContext('2d');


ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'source-in';
ctx.drawImage(document.getElementById('yellow_4.png'), 40, 40, 10, 10, 40, 50, 10, 10);
isPixel(ctx, 15,15, 0,0,0,0, 5);
isPixel(ctx, 50,25, 0,0,0,0, 5);


}
</script>
<img src="image_yellow.png" id="yellow_4.png" class="resource">

<!-- [[[ test_2d.composite.uncovered.image.source-out.html ]]] -->

<p>Canvas test: 2d.composite.uncovered.image.source-out</p>
<!-- Testing: drawImage() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. -->
<canvas id="c94" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>



function test_2d_composite_uncovered_image_source_out() {

var canvas = document.getElementById('c94');
var ctx = canvas.getContext('2d');


ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'source-out';
ctx.drawImage(document.getElementById('yellow_5.png'), 40, 40, 10, 10, 40, 50, 10, 10);
isPixel(ctx, 15,15, 0,0,0,0, 5);
isPixel(ctx, 50,25, 0,0,0,0, 5);


}
</script>
<img src="image_yellow.png" id="yellow_5.png" class="resource">

<!-- [[[ test_2d.composite.uncovered.pattern.copy.html ]]] -->

<p>Canvas test: 2d.composite.uncovered.pattern.copy</p>
<!-- Testing: Pattern fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. -->
<canvas id="c95" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>



function test_2d_composite_uncovered_pattern_copy() {

var canvas = document.getElementById('c95');
var ctx = canvas.getContext('2d');


ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'copy';
ctx.fillStyle = ctx.createPattern(document.getElementById('yellow_6.png'), 'no-repeat');
ctx.fillRect(0, 50, 100, 50);
isPixel(ctx, 50,25, 0,0,0,0, 5);


}
</script>
<img src="image_yellow.png" id="yellow_6.png" class="resource">

<!-- [[[ test_2d.composite.uncovered.pattern.destination-atop.html ]]] -->

<p>Canvas test: 2d.composite.uncovered.pattern.destination-atop</p>
<!-- Testing: Pattern fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. -->
<canvas id="c96" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>



function test_2d_composite_uncovered_pattern_destination_atop() {

var canvas = document.getElementById('c96');
var ctx = canvas.getContext('2d');


ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'destination-atop';
ctx.fillStyle = ctx.createPattern(document.getElementById('yellow_7.png'), 'no-repeat');
ctx.fillRect(0, 50, 100, 50);
isPixel(ctx, 50,25, 0,0,0,0, 5);


}
</script>
<img src="image_yellow.png" id="yellow_7.png" class="resource">

<!-- [[[ test_2d.composite.uncovered.pattern.destination-in.html ]]] -->

<p>Canvas test: 2d.composite.uncovered.pattern.destination-in</p>
<!-- Testing: Pattern fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. -->
<canvas id="c97" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>



function test_2d_composite_uncovered_pattern_destination_in() {

var canvas = document.getElementById('c97');
var ctx = canvas.getContext('2d');


ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'destination-in';
ctx.fillStyle = ctx.createPattern(document.getElementById('yellow_8.png'), 'no-repeat');
ctx.fillRect(0, 50, 100, 50);
isPixel(ctx, 50,25, 0,0,0,0, 5);


}
</script>
<img src="image_yellow.png" id="yellow_8.png" class="resource">

<!-- [[[ test_2d.composite.uncovered.pattern.source-in.html ]]] -->

<p>Canvas test: 2d.composite.uncovered.pattern.source-in</p>
<!-- Testing: Pattern fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. -->
<canvas id="c98" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>



function test_2d_composite_uncovered_pattern_source_in() {

var canvas = document.getElementById('c98');
var ctx = canvas.getContext('2d');


ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'source-in';
ctx.fillStyle = ctx.createPattern(document.getElementById('yellow_9.png'), 'no-repeat');
ctx.fillRect(0, 50, 100, 50);
isPixel(ctx, 50,25, 0,0,0,0, 5);


}
</script>
<img src="image_yellow.png" id="yellow_9.png" class="resource">

<!-- [[[ test_2d.composite.uncovered.pattern.source-out.html ]]] -->

<p>Canvas test: 2d.composite.uncovered.pattern.source-out</p>
<!-- Testing: Pattern fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. -->
<canvas id="c99" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>



function test_2d_composite_uncovered_pattern_source_out() {

var canvas = document.getElementById('c99');
var ctx = canvas.getContext('2d');


ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'source-out';
ctx.fillStyle = ctx.createPattern(document.getElementById('yellow_10.png'), 'no-repeat');
ctx.fillRect(0, 50, 100, 50);
isPixel(ctx, 50,25, 0,0,0,0, 5);


}
</script>
<img src="image_yellow.png" id="yellow_10.png" class="resource">

<!-- [[[ test_2d.drawImage.3arg.html ]]] -->

<p>Canvas test: 2d.drawImage.3arg</p>
<canvas id="c100" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_drawImage_3arg() {

var canvas = document.getElementById('c100');
var ctx = canvas.getContext('2d');

ctx.drawImage(document.getElementById('green_1.png'), 0, 0);
ctx.drawImage(document.getElementById('red_3.png'), -100, 0);
ctx.drawImage(document.getElementById('red_3.png'), 100, 0);
ctx.drawImage(document.getElementById('red_3.png'), 0, -50);
ctx.drawImage(document.getElementById('red_3.png'), 0, 50);

isPixel(ctx, 0,0, 0,255,0,255, 2);
isPixel(ctx, 99,0, 0,255,0,255, 2);
isPixel(ctx, 0,49, 0,255,0,255, 2);
isPixel(ctx, 99,49, 0,255,0,255, 2);


}
</script>
<img src="image_red.png" id="red_3.png" class="resource">
<img src="image_green.png" id="green_1.png" class="resource">

<!-- [[[ test_2d.drawImage.5arg.html ]]] -->

<p>Canvas test: 2d.drawImage.5arg</p>
<canvas id="c101" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_drawImage_5arg() {

var canvas = document.getElementById('c101');
var ctx = canvas.getContext('2d');

ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.drawImage(document.getElementById('green_2.png'), 50, 0, 50, 50);
ctx.drawImage(document.getElementById('red_4.png'), 0, 0, 50, 50);
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 50, 50);

isPixel(ctx, 0,0, 0,255,0,255, 2);
isPixel(ctx, 99,0, 0,255,0,255, 2);
isPixel(ctx, 0,49, 0,255,0,255, 2);
isPixel(ctx, 99,49, 0,255,0,255, 2);


}
</script>
<img src="image_red.png" id="red_4.png" class="resource">
<img src="image_green.png" id="green_2.png" class="resource">

<!-- [[[ test_2d.drawImage.9arg.basic.html ]]] -->

<p>Canvas test: 2d.drawImage.9arg.basic</p>
<canvas id="c102" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_drawImage_9arg_basic() {

var canvas = document.getElementById('c102');
var ctx = canvas.getContext('2d');

ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.drawImage(document.getElementById('green_3.png'), 0, 0, 100, 50, 0, 0, 100, 50);
isPixel(ctx, 0,0, 0,255,0,255, 2);
isPixel(ctx, 99,0, 0,255,0,255, 2);
isPixel(ctx, 0,49, 0,255,0,255, 2);
isPixel(ctx, 99,49, 0,255,0,255, 2);


}
</script>
<img src="image_green.png" id="green_3.png" class="resource">

<!-- [[[ test_2d.drawImage.9arg.destpos.html ]]] -->

<p>Canvas test: 2d.drawImage.9arg.destpos</p>
<canvas id="c103" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_drawImage_9arg_destpos() {

var canvas = document.getElementById('c103');
var ctx = canvas.getContext('2d');

ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.drawImage(document.getElementById('green_4.png'), 0, 0, 100, 50, 0, 0, 100, 50);
ctx.drawImage(document.getElementById('red_5.png'), 0, 0, 100, 50, -100, 0, 100, 50);
ctx.drawImage(document.getElementById('red_5.png'), 0, 0, 100, 50, 100, 0, 100, 50);
ctx.drawImage(document.getElementById('red_5.png'), 0, 0, 100, 50, 0, -50, 100, 50);
ctx.drawImage(document.getElementById('red_5.png'), 0, 0, 100, 50, 0, 50, 100, 50);
isPixel(ctx, 0,0, 0,255,0,255, 2);
isPixel(ctx, 99,0, 0,255,0,255, 2);
isPixel(ctx, 0,49, 0,255,0,255, 2);
isPixel(ctx, 99,49, 0,255,0,255, 2);


}
</script>
<img src="image_red.png" id="red_5.png" class="resource">
<img src="image_green.png" id="green_4.png" class="resource">

<!-- [[[ test_2d.drawImage.9arg.destsize.html ]]] -->

<p>Canvas test: 2d.drawImage.9arg.destsize</p>
<canvas id="c104" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_drawImage_9arg_destsize() {

var canvas = document.getElementById('c104');
var ctx = canvas.getContext('2d');

ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.drawImage(document.getElementById('green_5.png'), 1, 1, 1, 1, 0, 0, 100, 50);
ctx.drawImage(document.getElementById('red_6.png'), 0, 0, 100, 50, -50, 0, 50, 50);
ctx.drawImage(document.getElementById('red_6.png'), 0, 0, 100, 50, 100, 0, 50, 50);
ctx.drawImage(document.getElementById('red_6.png'), 0, 0, 100, 50, 0, -25, 100, 25);
ctx.drawImage(document.getElementById('red_6.png'), 0, 0, 100, 50, 0, 50, 100, 25);
isPixel(ctx, 0,0, 0,255,0,255, 2);
isPixel(ctx, 99,0, 0,255,0,255, 2);
isPixel(ctx, 0,49, 0,255,0,255, 2);
isPixel(ctx, 99,49, 0,255,0,255, 2);


}
</script>
<img src="image_red.png" id="red_6.png" class="resource">
<img src="image_green.png" id="green_5.png" class="resource">

<!-- [[[ test_2d.drawImage.9arg.sourcepos.html ]]] -->

<p>Canvas test: 2d.drawImage.9arg.sourcepos</p>
<canvas id="c105" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_drawImage_9arg_sourcepos() {

var canvas = document.getElementById('c105');
var ctx = canvas.getContext('2d');

ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.drawImage(document.getElementById('rgrg-256x256_1.png'), 140, 20, 100, 50, 0, 0, 100, 50);
isPixel(ctx, 0,0, 0,255,0,255, 2);
isPixel(ctx, 99,0, 0,255,0,255, 2);
isPixel(ctx, 0,49, 0,255,0,255, 2);
isPixel(ctx, 99,49, 0,255,0,255, 2);


}
</script>
<img src="image_rgrg-256x256.png" id="rgrg-256x256_1.png" class="resource">

<!-- [[[ test_2d.drawImage.9arg.sourcesize.html ]]] -->

<p>Canvas test: 2d.drawImage.9arg.sourcesize</p>
<canvas id="c106" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_drawImage_9arg_sourcesize() {

var canvas = document.getElementById('c106');
var ctx = canvas.getContext('2d');

ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.drawImage(document.getElementById('rgrg-256x256_2.png'), 0, 0, 256, 256, 0, 0, 100, 50);
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 51, 26);
ctx.fillRect(49, 24, 51, 26);
isPixel(ctx, 0,0, 0,255,0,255, 2);
isPixel(ctx, 99,0, 0,255,0,255, 2);
isPixel(ctx, 0,49, 0,255,0,255, 2);
isPixel(ctx, 99,49, 0,255,0,255, 2);
isPixel(ctx, 20,20, 0,255,0,255, 2);
isPixel(ctx, 80,20, 0,255,0,255, 2);
isPixel(ctx, 20,30, 0,255,0,255, 2);
isPixel(ctx, 80,30, 0,255,0,255, 2);


}
</script>
<img src="image_rgrg-256x256.png" id="rgrg-256x256_2.png" class="resource">

<!-- [[[ test_2d.drawImage.alpha.html ]]] -->

<p>Canvas test: 2d.drawImage.alpha</p>
<canvas id="c107" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_drawImage_alpha() {

var canvas = document.getElementById('c107');
var ctx = canvas.getContext('2d');

ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.globalAlpha = 0;
ctx.drawImage(document.getElementById('red_7.png'), 0, 0);
isPixel(ctx, 50,25, 0,255,0,255, 2);


}
</script>
<img src="image_red.png" id="red_7.png" class="resource">

<!-- [[[ test_2d.drawImage.animated.apng.html ]]] -->

<p>Canvas test: 2d.drawImage.animated.apng</p>
<!-- Testing: drawImage() of an APNG with no poster frame draws the first frame -->
<canvas id="c108" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function deferTest() {
    _deferred = true;
}
function wrapFunction(f) {
    return function () {
        f.apply(null, arguments);
    };
}

var canvas108 = document.getElementById('c108');
var ctx108 = canvas108.getContext('2d');
var isDone_test_2d_drawImage_animated_apng = false;

function test_2d_drawImage_animated_apng() {

deferTest();
setTimeout(wrapFunction(function () {
    ctx108.drawImage(document.getElementById('anim-gr_1.png'), 0, 0);
    isPixel(ctx108, 50,25, 0,255,0,255, 2);
	isDone_test_2d_drawImage_animated_apng = true;
}), 5000);


}
</script>
<img src="image_anim-gr.png" id="anim-gr_1.png" class="resource">

<!-- [[[ test_2d.drawImage.animated.gif.html ]]] -->

<p>Canvas test: 2d.drawImage.animated.gif</p>
<!-- Testing: drawImage() of an animated GIF draws the first frame -->
<canvas id="c109" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>

var canvas109 = document.getElementById('c109');
var ctx109 = canvas109.getContext('2d');
var isDone_test_2d_drawImage_animated_gif = false;

function test_2d_drawImage_animated_gif() {

deferTest();
setTimeout(wrapFunction(function () {
    ctx109.drawImage(document.getElementById('anim-gr_1.gif'), 0, 0);
    isPixel(ctx109, 50,25, 0,255,0,255, 2);
	isDone_test_2d_drawImage_animated_gif = true;
}), 5000);


}
</script>
<img src="image_anim-gr.gif" id="anim-gr_1.gif" class="resource">

<!-- [[[ test_2d.drawImage.animated.poster.html ]]] -->

<p>Canvas test: 2d.drawImage.animated.poster</p>
<!-- Testing: drawImage() of an APNG draws the poster frame -->
<canvas id="c110" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>

var canvas110 = document.getElementById('c110');
var ctx110 = canvas110.getContext('2d');


function test_2d_drawImage_animated_poster() {

ctx110.drawImage(document.getElementById('anim-poster-gr_1.png'), 0, 0);
todo_isPixel(ctx110, 50,25, 0,255,0,255, 2);


}
</script>
<img src="image_anim-poster-gr.png" id="anim-poster-gr_1.png" class="resource">

<!-- [[[ test_2d.drawImage.broken.html ]]] -->

<p>Canvas test: 2d.drawImage.broken</p>
<canvas id="c111" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>

function test_2d_drawImage_broken() {

var canvas = document.getElementById('c111');
var ctx = canvas.getContext('2d');

var img = document.getElementById('broken_1.png');
todo(img.complete === false, "img.complete === false");
var _thrown = undefined; try {
  ctx.drawImage(img, 0, 0);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.code == DOMException.INVALID_STATE_ERR, "should throw INVALID_STATE_ERR");


}
</script>
<img src="image_broken.png" id="broken_1.png" class="resource">

<!-- [[[ test_2d.drawImage.canvas.html ]]] -->

<p>Canvas test: 2d.drawImage.canvas</p>
<canvas id="c112" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_drawImage_canvas() {

var canvas = document.getElementById('c112');
var ctx = canvas.getContext('2d');

var canvas2 = document.createElement('canvas');
canvas2.width = 100;
canvas2.height = 50;
var ctx2 = canvas2.getContext('2d');
ctx2.fillStyle = '#0f0';
ctx2.fillRect(0, 0, 100, 50);

ctx.fillStyle = '#f00';
ctx.drawImage(canvas2, 0, 0);

isPixel(ctx, 0,0, 0,255,0,255, 2);
isPixel(ctx, 99,0, 0,255,0,255, 2);
isPixel(ctx, 0,49, 0,255,0,255, 2);
isPixel(ctx, 99,49, 0,255,0,255, 2);


}
</script>

<!-- [[[ test_2d.drawImage.clip.html ]]] -->

<p>Canvas test: 2d.drawImage.clip</p>
<canvas id="c113" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_drawImage_clip() {

var canvas = document.getElementById('c113');
var ctx = canvas.getContext('2d');

ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.rect(-10, -10, 1, 1);
ctx.clip();
ctx.drawImage(document.getElementById('red_8.png'), 0, 0);
isPixel(ctx, 50,25, 0,255,0,255, 2);


}
</script>
<img src="image_red.png" id="red_8.png" class="resource">

<!-- [[[ test_2d.drawImage.composite.html ]]] -->

<p>Canvas test: 2d.drawImage.composite</p>
<canvas id="c114" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_drawImage_composite() {

var canvas = document.getElementById('c114');
var ctx = canvas.getContext('2d');

ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'destination-over';
ctx.drawImage(document.getElementById('red_9.png'), 0, 0);
isPixel(ctx, 50,25, 0,255,0,255, 2);


}
</script>
<img src="image_red.png" id="red_9.png" class="resource">

<!-- [[[ test_2d.drawImage.floatsource.html ]]] -->

<p>Canvas test: 2d.drawImage.floatsource</p>
<canvas id="c115" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_drawImage_floatsource() {

var canvas = document.getElementById('c115');
var ctx = canvas.getContext('2d');

ctx.drawImage(document.getElementById('green_6.png'), 10.1, 10.1, 0.1, 0.1, 0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 2);


}
</script>
<img src="image_green.png" id="green_6.png" class="resource">

<!-- [[[ test_2d.drawImage.incomplete.html ]]] -->

<p>Canvas test: 2d.drawImage.incomplete</p>
<canvas id="c116" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>

function test_2d_drawImage_incomplete() {

var canvas = document.getElementById('c116');
var ctx = canvas.getContext('2d');

var img = new Image();
todo(img.complete === false, "img.complete === false");
var _thrown = undefined; try {
  ctx.drawImage(img, 0, 0);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.code == DOMException.INVALID_STATE_ERR, "should throw INVALID_STATE_ERR");


}
</script>

<!-- [[[ test_2d.drawImage.negativedest.html ]]] -->

<p>Canvas test: 2d.drawImage.negativedest</p>
<canvas id="c117" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_drawImage_negativedest() {

var canvas = document.getElementById('c117');
var ctx = canvas.getContext('2d');

var _thrown_outer = false;
try {

ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.drawImage(document.getElementById('ggrr-256x256_1.png'), 100, 78, 50, 50, 0, 50, 50, -50);
ctx.drawImage(document.getElementById('ggrr-256x256_1.png'), 100, 128, 50, -50, 100, 50, -50, -50);
isPixel(ctx, 1,1, 0,255,0,255, 2);
isPixel(ctx, 1,48, 0,255,0,255, 2);
isPixel(ctx, 98,1, 0,255,0,255, 2);
isPixel(ctx, 98,48, 0,255,0,255, 2);
isPixel(ctx, 48,1, 0,255,0,255, 2);
isPixel(ctx, 48,48, 0,255,0,255, 2);
isPixel(ctx, 51,1, 0,255,0,255, 2);
isPixel(ctx, 51,48, 0,255,0,255, 2);
isPixel(ctx, 25,25, 0,255,0,255, 2);
isPixel(ctx, 75,25, 0,255,0,255, 2);

} catch (e) {
    _thrown_outer = true;
}
todo(!_thrown_outer, 'should not throw exception');


}
</script>
<img src="image_ggrr-256x256.png" id="ggrr-256x256_1.png" class="resource">

<!-- [[[ test_2d.drawImage.negativesource.html ]]] -->

<p>Canvas test: 2d.drawImage.negativesource</p>
<canvas id="c118" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_drawImage_negativesource() {

var canvas = document.getElementById('c118');
var ctx = canvas.getContext('2d');

var _thrown_outer = false;
try {

ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.drawImage(document.getElementById('ggrr-256x256_2.png'), 100, 78, -100, 50, 0, 0, 50, 50);
ctx.drawImage(document.getElementById('ggrr-256x256_2.png'), 100, 128, -100, -50, 50, 0, 50, 50);
isPixel(ctx, 1,1, 0,255,0,255, 2);
isPixel(ctx, 1,48, 0,255,0,255, 2);
isPixel(ctx, 98,1, 0,255,0,255, 2);
isPixel(ctx, 98,48, 0,255,0,255, 2);
isPixel(ctx, 48,1, 0,255,0,255, 2);
isPixel(ctx, 48,48, 0,255,0,255, 2);
isPixel(ctx, 51,1, 0,255,0,255, 2);
isPixel(ctx, 51,48, 0,255,0,255, 2);
isPixel(ctx, 25,25, 0,255,0,255, 2);
isPixel(ctx, 75,25, 0,255,0,255, 2);

} catch (e) {
    _thrown_outer = true;
}
todo(!_thrown_outer, 'should not throw exception');


}
</script>
<img src="image_ggrr-256x256.png" id="ggrr-256x256_2.png" class="resource">

<!-- [[[ test_2d.drawImage.nonfinite.html ]]] -->

<p>Canvas test: 2d.drawImage.nonfinite</p>
<!-- Testing: drawImage() with Infinity/NaN is ignored -->
<canvas id="c119" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_drawImage_nonfinite() {

var canvas = document.getElementById('c119');
var ctx = canvas.getContext('2d');

var _thrown_outer = false;

try {

ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
var red = document.getElementById('red_10.png');
ctx.drawImage(red, Infinity, 0);
ctx.drawImage(red, -Infinity, 0);
ctx.drawImage(red, NaN, 0);
ctx.drawImage(red, 0, Infinity);
ctx.drawImage(red, 0, -Infinity);
ctx.drawImage(red, 0, NaN);
ctx.drawImage(red, Infinity, Infinity);
ctx.drawImage(red, Infinity, 0, 100, 50);
ctx.drawImage(red, -Infinity, 0, 100, 50);
ctx.drawImage(red, NaN, 0, 100, 50);
ctx.drawImage(red, 0, Infinity, 100, 50);
ctx.drawImage(red, 0, -Infinity, 100, 50);
ctx.drawImage(red, 0, NaN, 100, 50);
ctx.drawImage(red, 0, 0, Infinity, 50);
ctx.drawImage(red, 0, 0, -Infinity, 50);
ctx.drawImage(red, 0, 0, NaN, 50);
ctx.drawImage(red, 0, 0, 100, Infinity);
ctx.drawImage(red, 0, 0, 100, -Infinity);
ctx.drawImage(red, 0, 0, 100, NaN);
ctx.drawImage(red, Infinity, Infinity, 100, 50);
ctx.drawImage(red, Infinity, Infinity, Infinity, 50);
ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity);
ctx.drawImage(red, Infinity, Infinity, 100, Infinity);
ctx.drawImage(red, Infinity, 0, Infinity, 50);
ctx.drawImage(red, Infinity, 0, Infinity, Infinity);
ctx.drawImage(red, Infinity, 0, 100, Infinity);
ctx.drawImage(red, 0, Infinity, Infinity, 50);
ctx.drawImage(red, 0, Infinity, Infinity, Infinity);
ctx.drawImage(red, 0, Infinity, 100, Infinity);
ctx.drawImage(red, 0, 0, Infinity, Infinity);
ctx.drawImage(red, Infinity, 0, 100, 50, 0, 0, 100, 50);
ctx.drawImage(red, -Infinity, 0, 100, 50, 0, 0, 100, 50);
ctx.drawImage(red, NaN, 0, 100, 50, 0, 0, 100, 50);
ctx.drawImage(red, 0, Infinity, 100, 50, 0, 0, 100, 50);
ctx.drawImage(red, 0, -Infinity, 100, 50, 0, 0, 100, 50);
ctx.drawImage(red, 0, NaN, 100, 50, 0, 0, 100, 50);
ctx.drawImage(red, 0, 0, Infinity, 50, 0, 0, 100, 50);
ctx.drawImage(red, 0, 0, -Infinity, 50, 0, 0, 100, 50);
ctx.drawImage(red, 0, 0, NaN, 50, 0, 0, 100, 50);
ctx.drawImage(red, 0, 0, 100, Infinity, 0, 0, 100, 50);
ctx.drawImage(red, 0, 0, 100, -Infinity, 0, 0, 100, 50);
ctx.drawImage(red, 0, 0, 100, NaN, 0, 0, 100, 50);
ctx.drawImage(red, 0, 0, 100, 50, Infinity, 0, 100, 50);
ctx.drawImage(red, 0, 0, 100, 50, -Infinity, 0, 100, 50);
ctx.drawImage(red, 0, 0, 100, 50, NaN, 0, 100, 50);
ctx.drawImage(red, 0, 0, 100, 50, 0, Infinity, 100, 50);
ctx.drawImage(red, 0, 0, 100, 50, 0, -Infinity, 100, 50);
ctx.drawImage(red, 0, 0, 100, 50, 0, NaN, 100, 50);
ctx.drawImage(red, 0, 0, 100, 50, 0, 0, Infinity, 50);
ctx.drawImage(red, 0, 0, 100, 50, 0, 0, -Infinity, 50);
ctx.drawImage(red, 0, 0, 100, 50, 0, 0, NaN, 50);
ctx.drawImage(red, 0, 0, 100, 50, 0, 0, 100, Infinity);
ctx.drawImage(red, 0, 0, 100, 50, 0, 0, 100, -Infinity);
ctx.drawImage(red, 0, 0, 100, 50, 0, 0, 100, NaN);
ctx.drawImage(red, Infinity, Infinity, 100, 50, 0, 0, 100, 50);
ctx.drawImage(red, Infinity, Infinity, Infinity, 50, 0, 0, 100, 50);
ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, 0, 0, 100, 50);
ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, Infinity, 0, 100, 50);
ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity, 100, 50);
ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity, 50);
ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity);
ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity, 100, Infinity);
ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, Infinity, 0, Infinity, 50);
ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, Infinity, 0, Infinity, Infinity);
ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, Infinity, 0, 100, Infinity);
ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, 0, Infinity, 100, 50);
ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, 0, Infinity, Infinity, 50);
ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, 0, Infinity, Infinity, Infinity);
ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, 0, Infinity, 100, Infinity);
ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, 0, 0, Infinity, 50);
ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, 0, 0, Infinity, Infinity);
ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, 0, 0, 100, Infinity);
ctx.drawImage(red, Infinity, Infinity, Infinity, 50, Infinity, 0, 100, 50);
ctx.drawImage(red, Infinity, Infinity, Infinity, 50, Infinity, Infinity, 100, 50);
ctx.drawImage(red, Infinity, Infinity, Infinity, 50, Infinity, Infinity, Infinity, 50);
ctx.drawImage(red, Infinity, Infinity, Infinity, 50, Infinity, Infinity, Infinity, Infinity);
ctx.drawImage(red, Infinity, Infinity, Infinity, 50, Infinity, Infinity, 100, Infinity);
ctx.drawImage(red, Infinity, Infinity, Infinity, 50, Infinity, 0, Infinity, 50);
ctx.drawImage(red, Infinity, Infinity, Infinity, 50, Infinity, 0, Infinity, Infinity);
ctx.drawImage(red, Infinity, Infinity, Infinity, 50, Infinity, 0, 100, Infinity);
ctx.drawImage(red, Infinity, Infinity, Infinity, 50, 0, Infinity, 100, 50);
ctx.drawImage(red, Infinity, Infinity, Infinity, 50, 0, Infinity, Infinity, 50);
ctx.drawImage(red, Infinity, Infinity, Infinity, 50, 0, Infinity, Infinity, Infinity);
ctx.drawImage(red, Infinity, Infinity, Infinity, 50, 0, Infinity, 100, Infinity);
ctx.drawImage(red, Infinity, Infinity, Infinity, 50, 0, 0, Infinity, 50);
ctx.drawImage(red, Infinity, Infinity, Infinity, 50, 0, 0, Infinity, Infinity);
ctx.drawImage(red, Infinity, Infinity, Infinity, 50, 0, 0, 100, Infinity);
ctx.drawImage(red, Infinity, Infinity, 100, Infinity, 0, 0, 100, 50);
ctx.drawImage(red, Infinity, Infinity, 100, Infinity, Infinity, 0, 100, 50);
ctx.drawImage(red, Infinity, Infinity, 100, Infinity, Infinity, Infinity, 100, 50);
ctx.drawImage(red, Infinity, Infinity, 100, Infinity, Infinity, Infinity, Infinity, 50);
ctx.drawImage(red, Infinity, Infinity, 100, Infinity, Infinity, Infinity, Infinity, Infinity);
ctx.drawImage(red, Infinity, Infinity, 100, Infinity, Infinity, Infinity, 100, Infinity);
ctx.drawImage(red, Infinity, Infinity, 100, Infinity, Infinity, 0, Infinity, 50);
ctx.drawImage(red, Infinity, Infinity, 100, Infinity, Infinity, 0, Infinity, Infinity);
ctx.drawImage(red, Infinity, Infinity, 100, Infinity, Infinity, 0, 100, Infinity);
ctx.drawImage(red, Infinity, Infinity, 100, Infinity, 0, Infinity, 100, 50);
ctx.drawImage(red, Infinity, Infinity, 100, Infinity, 0, Infinity, Infinity, 50);
ctx.drawImage(red, Infinity, Infinity, 100, Infinity, 0, Infinity, Infinity, Infinity);
ctx.drawImage(red, Infinity, Infinity, 100, Infinity, 0, Infinity, 100, Infinity);
ctx.drawImage(red, Infinity, Infinity, 100, Infinity, 0, 0, Infinity, 50);
ctx.drawImage(red, Infinity, Infinity, 100, Infinity, 0, 0, Infinity, Infinity);
ctx.drawImage(red, Infinity, Infinity, 100, Infinity, 0, 0, 100, Infinity);
ctx.drawImage(red, Infinity, Infinity, 100, 50, Infinity, 0, 100, 50);
ctx.drawImage(red, Infinity, Infinity, 100, 50, Infinity, Infinity, 100, 50);
ctx.drawImage(red, Infinity, Infinity, 100, 50, Infinity, Infinity, Infinity, 50);
ctx.drawImage(red, Infinity, Infinity, 100, 50, Infinity, Infinity, Infinity, Infinity);
ctx.drawImage(red, Infinity, Infinity, 100, 50, Infinity, Infinity, 100, Infinity);
ctx.drawImage(red, Infinity, Infinity, 100, 50, Infinity, 0, Infinity, 50);
ctx.drawImage(red, Infinity, Infinity, 100, 50, Infinity, 0, Infinity, Infinity);
ctx.drawImage(red, Infinity, Infinity, 100, 50, Infinity, 0, 100, Infinity);
ctx.drawImage(red, Infinity, Infinity, 100, 50, 0, Infinity, 100, 50);
ctx.drawImage(red, Infinity, Infinity, 100, 50, 0, Infinity, Infinity, 50);
ctx.drawImage(red, Infinity, Infinity, 100, 50, 0, Infinity, Infinity, Infinity);
ctx.drawImage(red, Infinity, Infinity, 100, 50, 0, Infinity, 100, Infinity);
ctx.drawImage(red, Infinity, Infinity, 100, 50, 0, 0, Infinity, 50);
ctx.drawImage(red, Infinity, Infinity, 100, 50, 0, 0, Infinity, Infinity);
ctx.drawImage(red, Infinity, Infinity, 100, 50, 0, 0, 100, Infinity);
ctx.drawImage(red, Infinity, 0, Infinity, 50, 0, 0, 100, 50);
ctx.drawImage(red, Infinity, 0, Infinity, Infinity, 0, 0, 100, 50);
ctx.drawImage(red, Infinity, 0, Infinity, Infinity, Infinity, 0, 100, 50);
ctx.drawImage(red, Infinity, 0, Infinity, Infinity, Infinity, Infinity, 100, 50);
ctx.drawImage(red, Infinity, 0, Infinity, Infinity, Infinity, Infinity, Infinity, 50);
ctx.drawImage(red, Infinity, 0, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity);
ctx.drawImage(red, Infinity, 0, Infinity, Infinity, Infinity, Infinity, 100, Infinity);
ctx.drawImage(red, Infinity, 0, Infinity, Infinity, Infinity, 0, Infinity, 50);
ctx.drawImage(red, Infinity, 0, Infinity, Infinity, Infinity, 0, Infinity, Infinity);
ctx.drawImage(red, Infinity, 0, Infinity, Infinity, Infinity, 0, 100, Infinity);
ctx.drawImage(red, Infinity, 0, Infinity, Infinity, 0, Infinity, 100, 50);
ctx.drawImage(red, Infinity, 0, Infinity, Infinity, 0, Infinity, Infinity, 50);
ctx.drawImage(red, Infinity, 0, Infinity, Infinity, 0, Infinity, Infinity, Infinity);
ctx.drawImage(red, Infinity, 0, Infinity, Infinity, 0, Infinity, 100, Infinity);
ctx.drawImage(red, Infinity, 0, Infinity, Infinity, 0, 0, Infinity, 50);
ctx.drawImage(red, Infinity, 0, Infinity, Infinity, 0, 0, Infinity, Infinity);
ctx.drawImage(red, Infinity, 0, Infinity, Infinity, 0, 0, 100, Infinity);
ctx.drawImage(red, Infinity, 0, Infinity, 50, Infinity, 0, 100, 50);
ctx.drawImage(red, Infinity, 0, Infinity, 50, Infinity, Infinity, 100, 50);
ctx.drawImage(red, Infinity, 0, Infinity, 50, Infinity, Infinity, Infinity, 50);
ctx.drawImage(red, Infinity, 0, Infinity, 50, Infinity, Infinity, Infinity, Infinity);
ctx.drawImage(red, Infinity, 0, Infinity, 50, Infinity, Infinity, 100, Infinity);
ctx.drawImage(red, Infinity, 0, Infinity, 50, Infinity, 0, Infinity, 50);
ctx.drawImage(red, Infinity, 0, Infinity, 50, Infinity, 0, Infinity, Infinity);
ctx.drawImage(red, Infinity, 0, Infinity, 50, Infinity, 0, 100, Infinity);
ctx.drawImage(red, Infinity, 0, Infinity, 50, 0, Infinity, 100, 50);
ctx.drawImage(red, Infinity, 0, Infinity, 50, 0, Infinity, Infinity, 50);
ctx.drawImage(red, Infinity, 0, Infinity, 50, 0, Infinity, Infinity, Infinity);
ctx.drawImage(red, Infinity, 0, Infinity, 50, 0, Infinity, 100, Infinity);
ctx.drawImage(red, Infinity, 0, Infinity, 50, 0, 0, Infinity, 50);
ctx.drawImage(red, Infinity, 0, Infinity, 50, 0, 0, Infinity, Infinity);
ctx.drawImage(red, Infinity, 0, Infinity, 50, 0, 0, 100, Infinity);
ctx.drawImage(red, Infinity, 0, 100, Infinity, 0, 0, 100, 50);
ctx.drawImage(red, Infinity, 0, 100, Infinity, Infinity, 0, 100, 50);
ctx.drawImage(red, Infinity, 0, 100, Infinity, Infinity, Infinity, 100, 50);
ctx.drawImage(red, Infinity, 0, 100, Infinity, Infinity, Infinity, Infinity, 50);
ctx.drawImage(red, Infinity, 0, 100, Infinity, Infinity, Infinity, Infinity, Infinity);
ctx.drawImage(red, Infinity, 0, 100, Infinity, Infinity, Infinity, 100, Infinity);
ctx.drawImage(red, Infinity, 0, 100, Infinity, Infinity, 0, Infinity, 50);
ctx.drawImage(red, Infinity, 0, 100, Infinity, Infinity, 0, Infinity, Infinity);
ctx.drawImage(red, Infinity, 0, 100, Infinity, Infinity, 0, 100, Infinity);
ctx.drawImage(red, Infinity, 0, 100, Infinity, 0, Infinity, 100, 50);
ctx.drawImage(red, Infinity, 0, 100, Infinity, 0, Infinity, Infinity, 50);
ctx.drawImage(red, Infinity, 0, 100, Infinity, 0, Infinity, Infinity, Infinity);
ctx.drawImage(red, Infinity, 0, 100, Infinity, 0, Infinity, 100, Infinity);
ctx.drawImage(red, Infinity, 0, 100, Infinity, 0, 0, Infinity, 50);
ctx.drawImage(red, Infinity, 0, 100, Infinity, 0, 0, Infinity, Infinity);
ctx.drawImage(red, Infinity, 0, 100, Infinity, 0, 0, 100, Infinity);
ctx.drawImage(red, Infinity, 0, 100, 50, Infinity, 0, 100, 50);
ctx.drawImage(red, Infinity, 0, 100, 50, Infinity, Infinity, 100, 50);
ctx.drawImage(red, Infinity, 0, 100, 50, Infinity, Infinity, Infinity, 50);
ctx.drawImage(red, Infinity, 0, 100, 50, Infinity, Infinity, Infinity, Infinity);
ctx.drawImage(red, Infinity, 0, 100, 50, Infinity, Infinity, 100, Infinity);
ctx.drawImage(red, Infinity, 0, 100, 50, Infinity, 0, Infinity, 50);
ctx.drawImage(red, Infinity, 0, 100, 50, Infinity, 0, Infinity, Infinity);
ctx.drawImage(red, Infinity, 0, 100, 50, Infinity, 0, 100, Infinity);
ctx.drawImage(red, Infinity, 0, 100, 50, 0, Infinity, 100, 50);
ctx.drawImage(red, Infinity, 0, 100, 50, 0, Infinity, Infinity, 50);
ctx.drawImage(red, Infinity, 0, 100, 50, 0, Infinity, Infinity, Infinity);
ctx.drawImage(red, Infinity, 0, 100, 50, 0, Infinity, 100, Infinity);
ctx.drawImage(red, Infinity, 0, 100, 50, 0, 0, Infinity, 50);
ctx.drawImage(red, Infinity, 0, 100, 50, 0, 0, Infinity, Infinity);
ctx.drawImage(red, Infinity, 0, 100, 50, 0, 0, 100, Infinity);
ctx.drawImage(red, 0, Infinity, Infinity, 50, 0, 0, 100, 50);
ctx.drawImage(red, 0, Infinity, Infinity, Infinity, 0, 0, 100, 50);
ctx.drawImage(red, 0, Infinity, Infinity, Infinity, Infinity, 0, 100, 50);
ctx.drawImage(red, 0, Infinity, Infinity, Infinity, Infinity, Infinity, 100, 50);
ctx.drawImage(red, 0, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity, 50);
ctx.drawImage(red, 0, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity);
ctx.drawImage(red, 0, Infinity, Infinity, Infinity, Infinity, Infinity, 100, Infinity);
ctx.drawImage(red, 0, Infinity, Infinity, Infinity, Infinity, 0, Infinity, 50);
ctx.drawImage(red, 0, Infinity, Infinity, Infinity, Infinity, 0, Infinity, Infinity);
ctx.drawImage(red, 0, Infinity, Infinity, Infinity, Infinity, 0, 100, Infinity);
ctx.drawImage(red, 0, Infinity, Infinity, Infinity, 0, Infinity, 100, 50);
ctx.drawImage(red, 0, Infinity, Infinity, Infinity, 0, Infinity, Infinity, 50);
ctx.drawImage(red, 0, Infinity, Infinity, Infinity, 0, Infinity, Infinity, Infinity);
ctx.drawImage(red, 0, Infinity, Infinity, Infinity, 0, Infinity, 100, Infinity);
ctx.drawImage(red, 0, Infinity, Infinity, Infinity, 0, 0, Infinity, 50);
ctx.drawImage(red, 0, Infinity, Infinity, Infinity, 0, 0, Infinity, Infinity);
ctx.drawImage(red, 0, Infinity, Infinity, Infinity, 0, 0, 100, Infinity);
ctx.drawImage(red, 0, Infinity, Infinity, 50, Infinity, 0, 100, 50);
ctx.drawImage(red, 0, Infinity, Infinity, 50, Infinity, Infinity, 100, 50);
ctx.drawImage(red, 0, Infinity, Infinity, 50, Infinity, Infinity, Infinity, 50);
ctx.drawImage(red, 0, Infinity, Infinity, 50, Infinity, Infinity, Infinity, Infinity);
ctx.drawImage(red, 0, Infinity, Infinity, 50, Infinity, Infinity, 100, Infinity);
ctx.drawImage(red, 0, Infinity, Infinity, 50, Infinity, 0, Infinity, 50);
ctx.drawImage(red, 0, Infinity, Infinity, 50, Infinity, 0, Infinity, Infinity);
ctx.drawImage(red, 0, Infinity, Infinity, 50, Infinity, 0, 100, Infinity);
ctx.drawImage(red, 0, Infinity, Infinity, 50, 0, Infinity, 100, 50);
ctx.drawImage(red, 0, Infinity, Infinity, 50, 0, Infinity, Infinity, 50);
ctx.drawImage(red, 0, Infinity, Infinity, 50, 0, Infinity, Infinity, Infinity);
ctx.drawImage(red, 0, Infinity, Infinity, 50, 0, Infinity, 100, Infinity);
ctx.drawImage(red, 0, Infinity, Infinity, 50, 0, 0, Infinity, 50);
ctx.drawImage(red, 0, Infinity, Infinity, 50, 0, 0, Infinity, Infinity);
ctx.drawImage(red, 0, Infinity, Infinity, 50, 0, 0, 100, Infinity);
ctx.drawImage(red, 0, Infinity, 100, Infinity, 0, 0, 100, 50);
ctx.drawImage(red, 0, Infinity, 100, Infinity, Infinity, 0, 100, 50);
ctx.drawImage(red, 0, Infinity, 100, Infinity, Infinity, Infinity, 100, 50);
ctx.drawImage(red, 0, Infinity, 100, Infinity, Infinity, Infinity, Infinity, 50);
ctx.drawImage(red, 0, Infinity, 100, Infinity, Infinity, Infinity, Infinity, Infinity);
ctx.drawImage(red, 0, Infinity, 100, Infinity, Infinity, Infinity, 100, Infinity);
ctx.drawImage(red, 0, Infinity, 100, Infinity, Infinity, 0, Infinity, 50);
ctx.drawImage(red, 0, Infinity, 100, Infinity, Infinity, 0, Infinity, Infinity);
ctx.drawImage(red, 0, Infinity, 100, Infinity, Infinity, 0, 100, Infinity);
ctx.drawImage(red, 0, Infinity, 100, Infinity, 0, Infinity, 100, 50);
ctx.drawImage(red, 0, Infinity, 100, Infinity, 0, Infinity, Infinity, 50);
ctx.drawImage(red, 0, Infinity, 100, Infinity, 0, Infinity, Infinity, Infinity);
ctx.drawImage(red, 0, Infinity, 100, Infinity, 0, Infinity, 100, Infinity);
ctx.drawImage(red, 0, Infinity, 100, Infinity, 0, 0, Infinity, 50);
ctx.drawImage(red, 0, Infinity, 100, Infinity, 0, 0, Infinity, Infinity);
ctx.drawImage(red, 0, Infinity, 100, Infinity, 0, 0, 100, Infinity);
ctx.drawImage(red, 0, Infinity, 100, 50, Infinity, 0, 100, 50);
ctx.drawImage(red, 0, Infinity, 100, 50, Infinity, Infinity, 100, 50);
ctx.drawImage(red, 0, Infinity, 100, 50, Infinity, Infinity, Infinity, 50);
ctx.drawImage(red, 0, Infinity, 100, 50, Infinity, Infinity, Infinity, Infinity);
ctx.drawImage(red, 0, Infinity, 100, 50, Infinity, Infinity, 100, Infinity);
ctx.drawImage(red, 0, Infinity, 100, 50, Infinity, 0, Infinity, 50);
ctx.drawImage(red, 0, Infinity, 100, 50, Infinity, 0, Infinity, Infinity);
ctx.drawImage(red, 0, Infinity, 100, 50, Infinity, 0, 100, Infinity);
ctx.drawImage(red, 0, Infinity, 100, 50, 0, Infinity, 100, 50);
ctx.drawImage(red, 0, Infinity, 100, 50, 0, Infinity, Infinity, 50);
ctx.drawImage(red, 0, Infinity, 100, 50, 0, Infinity, Infinity, Infinity);
ctx.drawImage(red, 0, Infinity, 100, 50, 0, Infinity, 100, Infinity);
ctx.drawImage(red, 0, Infinity, 100, 50, 0, 0, Infinity, 50);
ctx.drawImage(red, 0, Infinity, 100, 50, 0, 0, Infinity, Infinity);
ctx.drawImage(red, 0, Infinity, 100, 50, 0, 0, 100, Infinity);
ctx.drawImage(red, 0, 0, Infinity, Infinity, 0, 0, 100, 50);
ctx.drawImage(red, 0, 0, Infinity, Infinity, Infinity, 0, 100, 50);
ctx.drawImage(red, 0, 0, Infinity, Infinity, Infinity, Infinity, 100, 50);
ctx.drawImage(red, 0, 0, Infinity, Infinity, Infinity, Infinity, Infinity, 50);
ctx.drawImage(red, 0, 0, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity);
ctx.drawImage(red, 0, 0, Infinity, Infinity, Infinity, Infinity, 100, Infinity);
ctx.drawImage(red, 0, 0, Infinity, Infinity, Infinity, 0, Infinity, 50);
ctx.drawImage(red, 0, 0, Infinity, Infinity, Infinity, 0, Infinity, Infinity);
ctx.drawImage(red, 0, 0, Infinity, Infinity, Infinity, 0, 100, Infinity);
ctx.drawImage(red, 0, 0, Infinity, Infinity, 0, Infinity, 100, 50);
ctx.drawImage(red, 0, 0, Infinity, Infinity, 0, Infinity, Infinity, 50);
ctx.drawImage(red, 0, 0, Infinity, Infinity, 0, Infinity, Infinity, Infinity);
ctx.drawImage(red, 0, 0, Infinity, Infinity, 0, Infinity, 100, Infinity);
ctx.drawImage(red, 0, 0, Infinity, Infinity, 0, 0, Infinity, 50);
ctx.drawImage(red, 0, 0, Infinity, Infinity, 0, 0, Infinity, Infinity);
ctx.drawImage(red, 0, 0, Infinity, Infinity, 0, 0, 100, Infinity);
ctx.drawImage(red, 0, 0, Infinity, 50, Infinity, 0, 100, 50);
ctx.drawImage(red, 0, 0, Infinity, 50, Infinity, Infinity, 100, 50);
ctx.drawImage(red, 0, 0, Infinity, 50, Infinity, Infinity, Infinity, 50);
ctx.drawImage(red, 0, 0, Infinity, 50, Infinity, Infinity, Infinity, Infinity);
ctx.drawImage(red, 0, 0, Infinity, 50, Infinity, Infinity, 100, Infinity);
ctx.drawImage(red, 0, 0, Infinity, 50, Infinity, 0, Infinity, 50);
ctx.drawImage(red, 0, 0, Infinity, 50, Infinity, 0, Infinity, Infinity);
ctx.drawImage(red, 0, 0, Infinity, 50, Infinity, 0, 100, Infinity);
ctx.drawImage(red, 0, 0, Infinity, 50, 0, Infinity, 100, 50);
ctx.drawImage(red, 0, 0, Infinity, 50, 0, Infinity, Infinity, 50);
ctx.drawImage(red, 0, 0, Infinity, 50, 0, Infinity, Infinity, Infinity);
ctx.drawImage(red, 0, 0, Infinity, 50, 0, Infinity, 100, Infinity);
ctx.drawImage(red, 0, 0, Infinity, 50, 0, 0, Infinity, 50);
ctx.drawImage(red, 0, 0, Infinity, 50, 0, 0, Infinity, Infinity);
ctx.drawImage(red, 0, 0, Infinity, 50, 0, 0, 100, Infinity);
ctx.drawImage(red, 0, 0, 100, Infinity, Infinity, 0, 100, 50);
ctx.drawImage(red, 0, 0, 100, Infinity, Infinity, Infinity, 100, 50);
ctx.drawImage(red, 0, 0, 100, Infinity, Infinity, Infinity, Infinity, 50);
ctx.drawImage(red, 0, 0, 100, Infinity, Infinity, Infinity, Infinity, Infinity);
ctx.drawImage(red, 0, 0, 100, Infinity, Infinity, Infinity, 100, Infinity);
ctx.drawImage(red, 0, 0, 100, Infinity, Infinity, 0, Infinity, 50);
ctx.drawImage(red, 0, 0, 100, Infinity, Infinity, 0, Infinity, Infinity);
ctx.drawImage(red, 0, 0, 100, Infinity, Infinity, 0, 100, Infinity);
ctx.drawImage(red, 0, 0, 100, Infinity, 0, Infinity, 100, 50);
ctx.drawImage(red, 0, 0, 100, Infinity, 0, Infinity, Infinity, 50);
ctx.drawImage(red, 0, 0, 100, Infinity, 0, Infinity, Infinity, Infinity);
ctx.drawImage(red, 0, 0, 100, Infinity, 0, Infinity, 100, Infinity);
ctx.drawImage(red, 0, 0, 100, Infinity, 0, 0, Infinity, 50);
ctx.drawImage(red, 0, 0, 100, Infinity, 0, 0, Infinity, Infinity);
ctx.drawImage(red, 0, 0, 100, Infinity, 0, 0, 100, Infinity);
ctx.drawImage(red, 0, 0, 100, 50, Infinity, Infinity, 100, 50);
ctx.drawImage(red, 0, 0, 100, 50, Infinity, Infinity, Infinity, 50);
ctx.drawImage(red, 0, 0, 100, 50, Infinity, Infinity, Infinity, Infinity);
ctx.drawImage(red, 0, 0, 100, 50, Infinity, Infinity, 100, Infinity);
ctx.drawImage(red, 0, 0, 100, 50, Infinity, 0, Infinity, 50);
ctx.drawImage(red, 0, 0, 100, 50, Infinity, 0, Infinity, Infinity);
ctx.drawImage(red, 0, 0, 100, 50, Infinity, 0, 100, Infinity);
ctx.drawImage(red, 0, 0, 100, 50, 0, Infinity, Infinity, 50);
ctx.drawImage(red, 0, 0, 100, 50, 0, Infinity, Infinity, Infinity);
ctx.drawImage(red, 0, 0, 100, 50, 0, Infinity, 100, Infinity);
ctx.drawImage(red, 0, 0, 100, 50, 0, 0, Infinity, Infinity);
isPixel(ctx, 50,25, 0,255,0,255, 0);

} catch (e) {
    _thrown_outer = true;
}
ok(!_thrown_outer, 'should not throw exception');


}
</script>
<img src="image_red.png" id="red_10.png" class="resource">

<!-- [[[ test_2d.drawImage.nowrap.html ]]] -->

<p>Canvas test: 2d.drawImage.nowrap</p>
<!-- Testing: Stretched images do not get pixels wrapping around the edges -->
<canvas id="c120" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_drawImage_nowrap() {

var canvas = document.getElementById('c120');
var ctx = canvas.getContext('2d');

ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.drawImage(document.getElementById('redtransparent_1.png'), -1950, 0, 2000, 50);
isPixel(ctx, 45,25, 0,255,0,255, 2);
isPixel(ctx, 50,25, 0,255,0,255, 2);
isPixel(ctx, 55,25, 0,255,0,255, 2);


}
</script>
<img src="image_redtransparent.png" id="redtransparent_1.png" class="resource">

<!-- [[[ test_2d.drawImage.null.html ]]] -->

<p>Canvas test: 2d.drawImage.null</p>
<canvas id="c121" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>

function test_2d_drawImage_null() {

var canvas = document.getElementById('c121');
var ctx = canvas.getContext('2d');

var _thrown = undefined; try {
  ctx.drawImage(null, 0, 0);
} catch (e) { _thrown = e }; ok(_thrown && _thrown.code == DOMException.TYPE_MISMATCH_ERR, "should throw TYPE_MISMATCH_ERR");


}
</script>

<!-- [[[ test_2d.drawImage.outsidesource.html ]]] -->

<p>Canvas test: 2d.drawImage.outsidesource</p>
<canvas id="c122" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>



function test_2d_drawImage_outsidesource() {

var canvas = document.getElementById('c122');
var ctx = canvas.getContext('2d');

var _thrown_outer = false;
try {

ctx.drawImage(document.getElementById('green_7.png'), 10.5, 10.5, 89.5, 39.5, 0, 0, 100, 50);
ctx.drawImage(document.getElementById('green_7.png'), 5.5, 5.5, -5.5, -5.5, 0, 0, 100, 50);
ctx.drawImage(document.getElementById('green_7.png'), 100, 50, -5, -5, 0, 0, 100, 50);
var _thrown = undefined; try {
  ctx.drawImage(document.getElementById('red_11.png'), -0.001, 0, 100, 50, 0, 0, 100, 50);
} catch (e) { _thrown = e }; ok(_thrown && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw INDEX_SIZE_ERR");
var _thrown = undefined; try {
  ctx.drawImage(document.getElementById('red_11.png'), 0, -0.001, 100, 50, 0, 0, 100, 50);
} catch (e) { _thrown = e }; ok(_thrown && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw INDEX_SIZE_ERR");
var _thrown = undefined; try {
  ctx.drawImage(document.getElementById('red_11.png'), 0, 0, 100.001, 50, 0, 0, 100, 50);
} catch (e) { _thrown = e }; ok(_thrown && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw INDEX_SIZE_ERR");
var _thrown = undefined; try {
  ctx.drawImage(document.getElementById('red_11.png'), 0, 0, 100, 50.001, 0, 0, 100, 50);
} catch (e) { _thrown = e }; ok(_thrown && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw INDEX_SIZE_ERR");
var _thrown = undefined; try {
  ctx.drawImage(document.getElementById('red_11.png'), 50, 0, 50.001, 50, 0, 0, 100, 50);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw INDEX_SIZE_ERR");
var _thrown = undefined; try {
  ctx.drawImage(document.getElementById('red_11.png'), 0, 0, -5, 5, 0, 0, 100, 50);
} catch (e) { _thrown = e }; ok(_thrown && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw INDEX_SIZE_ERR");
var _thrown = undefined; try {
  ctx.drawImage(document.getElementById('red_11.png'), 0, 0, 5, -5, 0, 0, 100, 50);
} catch (e) { _thrown = e }; ok(_thrown && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw INDEX_SIZE_ERR");
var _thrown = undefined; try {
  ctx.drawImage(document.getElementById('red_11.png'), 110, 60, -20, -20, 0, 0, 100, 50);
} catch (e) { _thrown = e }; ok(_thrown && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw INDEX_SIZE_ERR");
todo_isPixel(ctx, 50,25, 0,255,0,255, 2);

} catch (e) {
    _thrown_outer = true;
}
todo(!_thrown_outer, 'should not throw exception');


}
</script>
<img src="image_green.png" id="green_7.png" class="resource">
<img src="image_red.png" id="red_11.png" class="resource">

<!-- [[[ test_2d.drawImage.path.html ]]] -->

<p>Canvas test: 2d.drawImage.path</p>
<canvas id="c123" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_drawImage_path() {

var canvas = document.getElementById('c123');
var ctx = canvas.getContext('2d');

ctx.fillStyle = '#0f0';
ctx.rect(0, 0, 100, 50);
ctx.drawImage(document.getElementById('red_12.png'), 0, 0);
ctx.fill();
isPixel(ctx, 50,25, 0,255,0,255, 2);


}
</script>
<img src="image_red.png" id="red_12.png" class="resource">

<!-- [[[ test_2d.drawImage.self.1.html ]]] -->

<p>Canvas test: 2d.drawImage.self.1 - bug 433235</p>
<canvas id="c124" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_drawImage_self_1() {

var canvas = document.getElementById('c124');
var ctx = canvas.getContext('2d');

ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 50, 50);
ctx.fillStyle = '#f00';
ctx.fillRect(50, 0, 50, 50);
ctx.drawImage(canvas, 50, 0);

isPixel(ctx, 0,0, 0,255,0,255, 2);
isPixel(ctx, 99,0, 0,255,0,255, 2);
isPixel(ctx, 0,49, 0,255,0,255, 2);
isPixel(ctx, 99,49, 0,255,0,255, 2);


}
</script>

<!-- [[[ test_2d.drawImage.self.2.html ]]] -->

<p>Canvas test: 2d.drawImage.self.2 - bug 433235</p>
<canvas id="c125" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_drawImage_self_2() {

var canvas = document.getElementById('c125');
var ctx = canvas.getContext('2d');

ctx.fillStyle = '#0f0';
ctx.fillRect(0, 1, 100, 49);
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 1);
ctx.drawImage(canvas, 0, 1);
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 2);

isPixel(ctx, 0,0, 0,255,0,255, 2);
isPixel(ctx, 99,0, 0,255,0,255, 2);
isPixel(ctx, 0,49, 0,255,0,255, 2);
isPixel(ctx, 99,49, 0,255,0,255, 2);


}
</script>

<!-- [[[ test_2d.drawImage.transform.html ]]] -->

<p>Canvas test: 2d.drawImage.transform</p>
<canvas id="c126" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_drawImage_transform() {

var canvas = document.getElementById('c126');
var ctx = canvas.getContext('2d');

ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.translate(100, 0);
ctx.drawImage(document.getElementById('red_13.png'), 0, 0);
isPixel(ctx, 50,25, 0,255,0,255, 2);


}
</script>
<img src="image_red.png" id="red_13.png" class="resource">

<!-- [[[ test_2d.drawImage.wrongtype.html ]]] -->

<p>Canvas test: 2d.drawImage.wrongtype</p>
<canvas id="c127" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>

function test_2d_drawImage_wrongtype() {

netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");

var canvas = document.getElementById('c127');
var ctx = canvas.getContext('2d');

var _thrown = undefined; try {
  ctx.drawImage(undefined, 0, 0);
} catch (e) { _thrown = e }; ok(_thrown && _thrown.code == DOMException.TYPE_MISMATCH_ERR, "should throw TYPE_MISMATCH_ERR");
var _thrown = undefined; try {
  ctx.drawImage(0, 0, 0);
} catch (e) { _thrown = e }; ok(_thrown && _thrown.result == Components.results.NS_ERROR_XPC_BAD_CONVERT_JS_ZERO_ISNOT_NULL, "should throw NS_ERROR_XPC_BAD_CONVERT_JS_ZERO_ISNOT_NULL");
var _thrown = undefined; try {
  ctx.drawImage("", 0, 0);
} catch (e) { _thrown = e }; ok(_thrown && _thrown.result == Components.results.NS_ERROR_XPC_BAD_CONVERT_JS, "should throw NS_ERROR_XPC_BAD_CONVERT_JS");
var _thrown = undefined; try {
  ctx.drawImage(document.createElement('p'), 0, 0);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.code == DOMException.TYPE_MISMATCH_ERR, "should throw TYPE_MISMATCH_ERR");


}
</script>

<!-- [[[ test_2d.drawImage.zerosource.html ]]] -->

<p>Canvas test: 2d.drawImage.zerosource</p>
<!-- Testing: drawImage with zero-sized source rectangle throws INDEX_SIZE_ERR -->
<canvas id="c128" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_drawImage_zerosource() {

var canvas = document.getElementById('c128');
var ctx = canvas.getContext('2d');

ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
var _thrown = undefined; try {
  ctx.drawImage(document.getElementById('red_14.png'), 10, 10, 0, 1, 0, 0, 100, 50);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw INDEX_SIZE_ERR");
var _thrown = undefined; try {
  ctx.drawImage(document.getElementById('red_14.png'), 10, 10, 1, 0, 0, 0, 100, 50);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw INDEX_SIZE_ERR");
var _thrown = undefined; try {
  ctx.drawImage(document.getElementById('red_14.png'), 10, 10, 0, 0, 0, 0, 100, 50);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw INDEX_SIZE_ERR");
isPixel(ctx, 50,25, 0,255,0,255, 2);


}
</script>
<img src="image_red.png" id="red_14.png" class="resource">

<!-- [[[ test_2d.fillRect.basic.html ]]] -->

<p>Canvas test: 2d.fillRect.basic</p>
<canvas id="c129" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_fillRect_basic() {

var canvas = document.getElementById('c129');
var ctx = canvas.getContext('2d');

ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);


}
</script>

<!-- [[[ test_2d.fillRect.clip.html ]]] -->

<p>Canvas test: 2d.fillRect.clip</p>
<canvas id="c130" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_fillRect_clip() {

var canvas = document.getElementById('c130');
var ctx = canvas.getContext('2d');

ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);

ctx.beginPath();
ctx.rect(0, 0, 16, 16);
ctx.clip();

ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);

ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 16, 16);

isPixel(ctx, 50,25, 0,255,0,255, 0);


}
</script>

<!-- [[[ test_2d.fillRect.negative.html ]]] -->

<p>Canvas test: 2d.fillRect.negative</p>
<canvas id="c131" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_fillRect_negative() {

var canvas = document.getElementById('c131');
var ctx = canvas.getContext('2d');

ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 50, 25);
ctx.fillRect(100, 0, -50, 25);
ctx.fillRect(0, 50, 50, -25);
ctx.fillRect(100, 50, -50, -25);
isPixel(ctx, 25,12, 0,255,0,255, 0);
isPixel(ctx, 75,12, 0,255,0,255, 0);
isPixel(ctx, 25,37, 0,255,0,255, 0);
isPixel(ctx, 75,37, 0,255,0,255, 0);


}
</script>

<!-- [[[ test_2d.fillRect.nonfinite.html ]]] -->

<p>Canvas test: 2d.fillRect.nonfinite</p>
<!-- Testing: fillRect() with Infinity/NaN is ignored -->
<canvas id="c132" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_fillRect_nonfinite() {

var canvas = document.getElementById('c132');
var ctx = canvas.getContext('2d');

var _thrown_outer = false;
try {

ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);

ctx.fillStyle = '#f00';
ctx.fillRect(Infinity, 0, 100, 50);
ctx.fillRect(-Infinity, 0, 100, 50);
ctx.fillRect(NaN, 0, 100, 50);
ctx.fillRect(0, Infinity, 100, 50);
ctx.fillRect(0, -Infinity, 100, 50);
ctx.fillRect(0, NaN, 100, 50);
ctx.fillRect(0, 0, Infinity, 50);
ctx.fillRect(0, 0, -Infinity, 50);
ctx.fillRect(0, 0, NaN, 50);
ctx.fillRect(0, 0, 100, Infinity);
ctx.fillRect(0, 0, 100, -Infinity);
ctx.fillRect(0, 0, 100, NaN);
ctx.fillRect(Infinity, Infinity, 100, 50);
ctx.fillRect(Infinity, Infinity, Infinity, 50);
ctx.fillRect(Infinity, Infinity, Infinity, Infinity);
ctx.fillRect(Infinity, Infinity, 100, Infinity);
ctx.fillRect(Infinity, 0, Infinity, 50);
ctx.fillRect(Infinity, 0, Infinity, Infinity);
ctx.fillRect(Infinity, 0, 100, Infinity);
ctx.fillRect(0, Infinity, Infinity, 50);
ctx.fillRect(0, Infinity, Infinity, Infinity);
ctx.fillRect(0, Infinity, 100, Infinity);
ctx.fillRect(0, 0, Infinity, Infinity);

isPixel(ctx, 50,25, 0,255,0,255, 0);

} catch (e) {
    _thrown_outer = true;
}
ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');


}
</script>

<!-- [[[ test_2d.fillRect.path.html ]]] -->

<p>Canvas test: 2d.fillRect.path</p>
<canvas id="c133" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_fillRect_path() {

var canvas = document.getElementById('c133');
var ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.rect(0, 0, 100, 50);
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 16, 16);
ctx.fillStyle = '#0f0';
ctx.fill();
isPixel(ctx, 50,25, 0,255,0,255, 0);


}
</script>

<!-- [[[ test_2d.fillRect.shadow.html ]]] -->

<p>Canvas test: 2d.fillRect.shadow</p>
<canvas id="c134" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_fillRect_shadow() {

var canvas = document.getElementById('c134');
var ctx = canvas.getContext('2d');

ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);

ctx.fillStyle = '#f00';
ctx.shadowBlur = 0;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 50;

// Shadows are optional, so just test that if they apply to fill() then they apply to fillRect() too
ctx.beginPath();
ctx.rect(0, -50, 100, 50);
ctx.shadowColor = '#f00';
ctx.fill();

ctx.shadowColor = '#0f0';
ctx.fillRect(0, -50, 100, 50);

isPixel(ctx, 50,25, 0,255,0,255, 0);


}
</script>

<!-- [[[ test_2d.fillRect.transform.html ]]] -->

<p>Canvas test: 2d.fillRect.transform</p>
<canvas id="c135" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_fillRect_transform() {

var canvas = document.getElementById('c135');
var ctx = canvas.getContext('2d');

ctx.scale(10, 10);
ctx.translate(0, 5);
ctx.fillStyle = '#0f0';
ctx.fillRect(0, -5, 10, 5);
isPixel(ctx, 50,25, 0,255,0,255, 0);


}
</script>

<!-- [[[ test_2d.fillRect.zero.html ]]] -->

<p>Canvas test: 2d.fillRect.zero</p>
<canvas id="c136" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_fillRect_zero() {

var canvas = document.getElementById('c136');
var ctx = canvas.getContext('2d');

ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 0);
ctx.fillRect(0, 0, 0, 50);
ctx.fillRect(0, 0, 0, 0);
isPixel(ctx, 50,25, 0,255,0,255, 0);


}
</script>

<!-- [[[ test_2d.fillStyle.default.html ]]] -->

<p>Canvas test: 2d.fillStyle.default</p>
<canvas id="c137" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>

function test_2d_fillStyle_default() {

var canvas = document.getElementById('c137');
var ctx = canvas.getContext('2d');

ok(ctx.fillStyle == '#000000', "ctx.fillStyle == '#000000'");


}
</script>

<!-- [[[ test_2d.fillStyle.get.semitransparent.html ]]] -->

<p>Canvas test: 2d.fillStyle.get.semitransparent</p>
<canvas id="c138" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>

function test_2d_fillStyle_get_semitransparent() {

var canvas = document.getElementById('c138');
var ctx = canvas.getContext('2d');

ctx.fillStyle = 'rgba(255,255,255,0.45)';
ok(/^rgba\(255, 255, 255, 0\.4\d+\)$/.test(ctx.fillStyle), "ctx.fillStyle =~ /^rgba\\(255, 255, 255, 0\\.4\\d+\\)$/");


}
</script>

<!-- [[[ test_2d.fillStyle.get.solid.html ]]] -->

<p>Canvas test: 2d.fillStyle.get.solid</p>
<canvas id="c139" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>

function test_2d_fillStyle_get_solid() {

var canvas = document.getElementById('c139');
var ctx = canvas.getContext('2d');

ctx.fillStyle = '#fa0';
ok(ctx.fillStyle === '#ffaa00', "ctx.fillStyle === '#ffaa00'");


}
</script>

<!-- [[[ test_2d.fillStyle.get.transparent.html ]]] -->

<p>Canvas test: 2d.fillStyle.get.transparent</p>
<canvas id="c140" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>

function test_2d_fillStyle_get_transparent() {

var canvas = document.getElementById('c140');
var ctx = canvas.getContext('2d');

ctx.fillStyle = 'rgba(0,0,0,0)';
is(ctx.fillStyle, 'rgba(0, 0, 0, 0)', "ctx.fillStyle should be what we set it to");


}
</script>

<!-- [[[ test_2d.fillStyle.invalidstring.html ]]] -->

<p>Canvas test: 2d.fillStyle.invalidstring</p>
<canvas id="c141" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_fillStyle_invalidstring() {

var canvas = document.getElementById('c141');
var ctx = canvas.getContext('2d');

ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = '#0f0';
ctx.fillStyle = 'invalid';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);


}
</script>

<!-- [[[ test_2d.fillStyle.invalidtype.html ]]] -->

<p>Canvas test: 2d.fillStyle.invalidtype</p>
<canvas id="c142" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_fillStyle_invalidtype() {

var canvas = document.getElementById('c142');
var ctx = canvas.getContext('2d');

ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = '#0f0';
ctx.fillStyle = null;
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);


}
</script>

<!-- [[[ test_2d.fillStyle.parse.current.basic.html ]]] -->

<p>Canvas test: 2d.fillStyle.parse.current.basic</p>
<!-- Testing: currentColor is computed from the canvas element -->
<canvas id="c143" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>



function test_2d_fillStyle_parse_current_basic() {

var canvas = document.getElementById('c143');
var ctx = canvas.getContext('2d');

canvas.setAttribute('style', 'color: #0f0');
ctx.fillStyle = '#f00';
ctx.fillStyle = 'currentColor';
ctx.fillRect(0, 0, 100, 50);
todo_isPixel(ctx, 50,25, 0,255,0,255, 0);


}
</script>

<!-- [[[ test_2d.fillStyle.parse.current.changed.html ]]] -->

<p>Canvas test: 2d.fillStyle.parse.current.changed</p>
<!-- Testing: currentColor is computed when the attribute is set, not when it is painted -->
<canvas id="c144" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>



function test_2d_fillStyle_parse_current_changed() {

var canvas = document.getElementById('c144');
var ctx = canvas.getContext('2d');

canvas.setAttribute('style', 'color: #0f0');
ctx.fillStyle = '#f00';
ctx.fillStyle = 'currentColor';
canvas.setAttribute('style', 'color: #f00');
ctx.fillRect(0, 0, 100, 50);
todo_isPixel(ctx, 50,25, 0,255,0,255, 0);


}
</script>

<!-- [[[ test_2d.fillStyle.parse.current.removed.html ]]] -->

<p>Canvas test: 2d.fillStyle.parse.current.removed</p>
<!-- Testing: currentColor is solid black when the canvas element is not in a document -->
<canvas id="c145" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>



function test_2d_fillStyle_parse_current_removed() {

var canvas = document.getElementById('c145');
var ctx = canvas.getContext('2d');

// Try not to let it undetectably incorrectly pick up opaque-black
// from other parts of the document:
document.body.parentNode.setAttribute('style', 'color: #f00');
document.body.setAttribute('style', 'color: #f00');
canvas.setAttribute('style', 'color: #f00');

var canvas2 = document.createElement('canvas');
var ctx2 = canvas2.getContext('2d');
ctx2.fillStyle = '#f00';
ctx2.fillStyle = 'currentColor';
ctx2.fillRect(0, 0, 100, 50);
ctx.drawImage(canvas2, 0, 0);

document.body.parentNode.removeAttribute('style');
document.body.removeAttribute('style');

todo_isPixel(ctx, 50,25, 0,0,0,255, 0);


}
</script>

<!-- [[[ test_2d.fillStyle.parse.hex3.html ]]] -->

<p>Canvas test: 2d.fillStyle.parse.hex3</p>
<canvas id="c146" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_fillStyle_parse_hex3() {

var canvas = document.getElementById('c146');
var ctx = canvas.getContext('2d');


ctx.fillStyle = '#f00';
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);


}
</script>

<!-- [[[ test_2d.fillStyle.parse.hex6.html ]]] -->

<p>Canvas test: 2d.fillStyle.parse.hex6</p>
<canvas id="c147" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_fillStyle_parse_hex6() {

var canvas = document.getElementById('c147');
var ctx = canvas.getContext('2d');


ctx.fillStyle = '#f00';
ctx.fillStyle = '#00fF00';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);


}
</script>

<!-- [[[ test_2d.fillStyle.parse.hsl-1.html ]]] -->

<p>Canvas test: 2d.fillStyle.parse.hsl-1</p>
<canvas id="c148" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_fillStyle_parse_hsl_1() {

var canvas = document.getElementById('c148');
var ctx = canvas.getContext('2d');


ctx.fillStyle = '#f00';
ctx.fillStyle = 'hsl(120, 100%, 50%)';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);


}
</script>

<!-- [[[ test_2d.fillStyle.parse.hsl-2.html ]]] -->

<p>Canvas test: 2d.fillStyle.parse.hsl-2</p>
<canvas id="c149" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_fillStyle_parse_hsl_2() {

var canvas = document.getElementById('c149');
var ctx = canvas.getContext('2d');


ctx.fillStyle = '#f00';
ctx.fillStyle = 'hsl( -240 , 100% , 50% )';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);


}
</script>

<!-- [[[ test_2d.fillStyle.parse.hsl-3.html ]]] -->

<p>Canvas test: 2d.fillStyle.parse.hsl-3</p>
<canvas id="c150" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_fillStyle_parse_hsl_3() {

var canvas = document.getElementById('c150');
var ctx = canvas.getContext('2d');


ctx.fillStyle = '#f00';
ctx.fillStyle = 'hsl(360120, 100%, 50%)';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);


}
</script>

<!-- [[[ test_2d.fillStyle.parse.hsl-4.html ]]] -->

<p>Canvas test: 2d.fillStyle.parse.hsl-4</p>
<canvas id="c151" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_fillStyle_parse_hsl_4() {

var canvas = document.getElementById('c151');
var ctx = canvas.getContext('2d');


ctx.fillStyle = '#f00';
ctx.fillStyle = 'hsl(-360240, 100%, 50%)';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);


}
</script>

<!-- [[[ test_2d.fillStyle.parse.hsl-5.html ]]] -->

<p>Canvas test: 2d.fillStyle.parse.hsl-5</p>
<canvas id="c152" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_fillStyle_parse_hsl_5() {

var canvas = document.getElementById('c152');
var ctx = canvas.getContext('2d');


ctx.fillStyle = '#f00';
ctx.fillStyle = 'hsl(120.0, 100.0%, 50.0%)';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);


}
</script>

<!-- [[[ test_2d.fillStyle.parse.hsl-clamp-1.html ]]] -->

<p>Canvas test: 2d.fillStyle.parse.hsl-clamp-1</p>
<canvas id="c153" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>


function test_2d_fillStyle_parse_hsl_clamp_1() {

var canvas = document.getElementById('c153');
var ctx = canvas.getContext('2d');


ctx.fillStyle = '#f00';
ctx.fillStyle = 'hsl(120, 200%, 50%)';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);


}
</script>

<!-- [[[ test_2d.fillStyle.parse.hsl-clamp-2.html ]]] -->

<p>Canvas test: 2d.fillStyle.parse.hsl-clamp-2</p>
<canvas id="c154" width="100"