mozilla-central/dom/canvas/test/test_canvas.html

Source code

Revision control

Copy as Markdown

Other Tools

Test Info:

<!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();
SimpleTest.requestFlakyTimeout("untriaged");
const Cc = SpecialPowers.Cc;
const Cr = SpecialPowers.Cr;
function IsD2DEnabled() {
var enabled = false;
try {
enabled = Cc["@mozilla.org/gfx/info;1"].getService(SpecialPowers.Ci.nsIGfxInfo).D2DEnabled;
} catch(e) {}
return enabled;
}
function IsLinux() {
var os = "";
try {
os = Cc["@mozilla.org/xre/app-info;1"]
.getService(SpecialPowers.Ci.nsIXULRuntime).OS;
} catch (e) {}
return os.indexOf("Linux") == 0 &&
!navigator.appVersion.includes("Android");
}
function IsWindows() {
var os = "";
try {
os = Cc["@mozilla.org/xre/app-info;1"]
.getService(SpecialPowers.Ci.nsIXULRuntime).OS;
} catch (e) {}
return os.indexOf("WINNT") == 0;
}
function IsAzureSkia() {
var enabled = false;
try {
var backend = Cc["@mozilla.org/gfx/info;1"].getService(SpecialPowers.Ci.nsIGfxInfo).AzureCanvasBackend;
enabled = (backend == "skia");
} catch (e) { }
return enabled;
}
function IsAzureCairo() {
var enabled = false;
try {
var backend = Cc["@mozilla.org/gfx/info;1"].getService(SpecialPowers.Ci.nsIGfxInfo).AzureCanvasBackend;
enabled = (backend == "cairo");
} catch (e) { }
return enabled;
}
</script>
<!-- Includes all the tests in the dom/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.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, 3);
isPixel(ctx, 99,0, 0,255,0,255, 3);
isPixel(ctx, 0,49, 0,255,0,255, 3);
isPixel(ctx, 99,49, 0,255,0,255, 3);
isPixel(ctx, 20,20, 0,255,0,255, 3);
isPixel(ctx, 80,20, 0,255,0,255, 3);
isPixel(ctx, 20,30, 0,255,0,255, 3);
isPixel(ctx, 80,30, 0,255,0,255, 3);
}
</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.name == "InvalidStateError" && _thrown.code == DOMException.INVALID_STATE_ERR, "should throw InvalidStateError");
}
</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.name == "InvalidStateError" && _thrown.code == DOMException.INVALID_STATE_ERR, "should throw InvalidStateError");
}
</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;
}
ok(!_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;
}
ok(!_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.name == "TypeError", "should throw TypeError");
}
</script>
<!-- [[[ 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() {
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.name == "TypeError", "should throw TypeError");
var _thrown = undefined; try {
ctx.drawImage(0, 0, 0);
} catch (e) { _thrown = e };
ok(_thrown && _thrown.name == "TypeError", "should throw TypeError");
var _thrown = undefined; try {
ctx.drawImage("", 0, 0);
} catch (e) { _thrown = e };
ok(_thrown && _thrown.name == "TypeError", "should throw TypeError");
var _thrown = undefined; try {
ctx.drawImage(document.createElement('p'), 0, 0);
} catch (e) { _thrown = e };
ok(_thrown && _thrown.name == "TypeError", "should throw TypeError");
}
</script>
<!-- [[[ test_2d.drawImage.zerosource.html ]]] -->
<p>Canvas test: 2d.drawImage.zerosource</p>
<!-- Testing: drawImage with zero-sized source rectangle does nothing -->
<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);
ctx.drawImage(document.getElementById('red_14.png'), 10, 10, 0, 1, 0, 0, 100, 50);
ctx.drawImage(document.getElementById('red_14.png'), 10, 10, 1, 0, 0, 0, 100, 50);
ctx.drawImage(document.getElementById('red_14.png'), 10, 10, 0, 0, 0, 0, 100, 50);
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);
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);
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');
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" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_fillStyle_parse_hsl_clamp_2() {
var canvas = document.getElementById('c154');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillStyle = 'hsl(120, -200%, 49.9%)';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 127,127,127,255, 0);
}
</script>
<!-- [[[ test_2d.fillStyle.parse.hsl-clamp-3.html ]]] -->
<p>Canvas test: 2d.fillStyle.parse.hsl-clamp-3</p>
<canvas id="c155" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_fillStyle_parse_hsl_clamp_3() {
var canvas = document.getElementById('c155');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillStyle = 'hsl(120, 100%, 200%)';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 255,255,255,255, 0);
}
</script>
<!-- [[[ test_2d.fillStyle.parse.hsl-clamp-4.html ]]] -->
<p>Canvas test: 2d.fillStyle.parse.hsl-clamp-4</p>
<canvas id="c156" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_fillStyle_parse_hsl_clamp_4() {
var canvas = document.getElementById('c156');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillStyle = 'hsl(120, 100%, -200%)';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,0,0,255, 0);
}
</script>
<!-- [[[ test_2d.fillStyle.parse.hsla-1.html ]]] -->
<p>Canvas test: 2d.fillStyle.parse.hsla-1</p>
<canvas id="c157" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_fillStyle_parse_hsla_1() {
var canvas = document.getElementById('c157');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillStyle = 'hsla(120, 100%, 50%, 0.499)';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,127, 0);
}
</script>
<!-- [[[ test_2d.fillStyle.parse.hsla-2.html ]]] -->
<p>Canvas test: 2d.fillStyle.parse.hsla-2</p>
<canvas id="c158" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_fillStyle_parse_hsla_2() {
var canvas = document.getElementById('c158');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillStyle = 'hsla( 120.0 , 100.0% , 50.0% , 1 )';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.fillStyle.parse.hsla-clamp-1.html ]]] -->
<p>Canvas test: 2d.fillStyle.parse.hsla-clamp-1</p>
<canvas id="c159" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_fillStyle_parse_hsla_clamp_1() {
var canvas = document.getElementById('c159');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillStyle = 'hsla(120, 200%, 50%, 1)';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.fillStyle.parse.hsla-clamp-2.html ]]] -->
<p>Canvas test: 2d.fillStyle.parse.hsla-clamp-2</p>
<canvas id="c160" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_fillStyle_parse_hsla_clamp_2() {
var canvas = document.getElementById('c160');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillStyle = 'hsla(120, -200%, 49.9%, 1)';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 127,127,127,255, 0);
}
</script>
<!-- [[[ test_2d.fillStyle.parse.hsla-clamp-3.html ]]] -->
<p>Canvas test: 2d.fillStyle.parse.hsla-clamp-3</p>
<canvas id="c161" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_fillStyle_parse_hsla_clamp_3() {
var canvas = document.getElementById('c161');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillStyle = 'hsla(120, 100%, 200%, 1)';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 255,255,255,255, 0);
}
</script>
<!-- [[[ test_2d.fillStyle.parse.hsla-clamp-4.html ]]] -->
<p>Canvas test: 2d.fillStyle.parse.hsla-clamp-4</p>
<canvas id="c162" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_fillStyle_parse_hsla_clamp_4() {
var canvas = document.getElementById('c162');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillStyle = 'hsla(120, 100%, -200%, 1)';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,0,0,255, 0);
}
</script>
<!-- [[[ test_2d.fillStyle.parse.hsla-clamp-5.html ]]] -->
<p>Canvas test: 2d.fillStyle.parse.hsla-clamp-5</p>
<canvas id="c163" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_fillStyle_parse_hsla_clamp_5() {
var canvas = document.getElementById('c163');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillStyle = 'hsla(120, 100%, 50%, 2)';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.fillStyle.parse.hsla-clamp-6.html ]]] -->
<p>Canvas test: 2d.fillStyle.parse.hsla-clamp-6</p>
<canvas id="c164" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_fillStyle_parse_hsla_clamp_6() {
var canvas = document.getElementById('c164');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillStyle = 'hsla(120, 100%, 0%, -2)';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,0,0,0, 0);
}
</script>
<!-- [[[ test_2d.fillStyle.parse.html4.html ]]] -->
<p>Canvas test: 2d.fillStyle.parse.html4</p>
<canvas id="c165" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_fillStyle_parse_html4() {
var canvas = document.getElementById('c165');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillStyle = 'limE';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.fillStyle.parse.invalid.hex3.html ]]] -->
<p>Canvas test: 2d.fillStyle.parse.invalid.hex3</p>
<canvas id="c166" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_fillStyle_parse_invalid_hex3() {
var canvas = document.getElementById('c166');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
try { ctx.fillStyle = '#g00'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.fillStyle.parse.invalid.hex6.html ]]] -->
<p>Canvas test: 2d.fillStyle.parse.invalid.hex6</p>
<canvas id="c167" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_fillStyle_parse_invalid_hex6() {
var canvas = document.getElementById('c167');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
try { ctx.fillStyle = '#fg0000'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.fillStyle.parse.invalid.hsl-1.html ]]] -->
<p>Canvas test: 2d.fillStyle.parse.invalid.hsl-1</p>
<canvas id="c168" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_fillStyle_parse_invalid_hsl_1() {
var canvas = document.getElementById('c168');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
try { ctx.fillStyle = 'hsl(0%, 100%, 50%)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.fillStyle.parse.invalid.hsl-2.html ]]] -->
<p>Canvas test: 2d.fillStyle.parse.invalid.hsl-2</p>
<canvas id="c169" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_fillStyle_parse_invalid_hsl_2() {
var canvas = document.getElementById('c169');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
try { ctx.fillStyle = 'hsl(z, 100%, 50%)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.fillStyle.parse.invalid.hsl-3.html ]]] -->
<p>Canvas test: 2d.fillStyle.parse.invalid.hsl-3</p>
<canvas id="c170" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_fillStyle_parse_invalid_hsl_3() {
var canvas = document.getElementById('c170');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
try { ctx.fillStyle = 'hsl(0, 0, 50%)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.fillStyle.parse.invalid.hsl-4.html ]]] -->
<p>Canvas test: 2d.fillStyle.parse.invalid.hsl-4</p>
<canvas id="c171" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_fillStyle_parse_invalid_hsl_4() {
var canvas = document.getElementById('c171');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
try { ctx.fillStyle = 'hsl(0, 100%, 0)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.fillStyle.parse.invalid.hsl-5.html ]]] -->
<p>Canvas test: 2d.fillStyle.parse.invalid.hsl-5</p>
<canvas id="c172" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_fillStyle_parse_invalid_hsl_5() {
var canvas = document.getElementById('c172');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
try { ctx.fillStyle = 'hsl(0, 100%, 100%,)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.fillStyle.parse.invalid.hsla-1.html ]]] -->
<p>Canvas test: 2d.fillStyle.parse.invalid.hsla-1</p>
<canvas id="c173" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_fillStyle_parse_invalid_hsla_1() {
var canvas = document.getElementById('c173');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
try { ctx.fillStyle = 'hsla(0%, 100%, 50%, 1)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.fillStyle.parse.invalid.hsla-2.html ]]] -->
<p>Canvas test: 2d.fillStyle.parse.invalid.hsla-2</p>
<canvas id="c174" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_fillStyle_parse_invalid_hsla_2() {
var canvas = document.getElementById('c174');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
try { ctx.fillStyle = 'hsla(0, 0, 50%, 1)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.fillStyle.parse.invalid.name-1.html ]]] -->
<p>Canvas test: 2d.fillStyle.parse.invalid.name-1</p>
<canvas id="c174a" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_fillStyle_parse_invalid_name_1() {
var canvas = document.getElementById('c174a');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
try { ctx.fillStyle = 'darkbrown'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.fillStyle.parse.invalid.name-2.html ]]] -->
<p>Canvas test: 2d.fillStyle.parse.invalid.name-2</p>
<canvas id="c174b" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_fillStyle_parse_invalid_name_2() {
var canvas = document.getElementById('c174b');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
try { ctx.fillStyle = 'firebrick1'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.fillStyle.parse.invalid.name-3.html ]]] -->
<p>Canvas test: 2d.fillStyle.parse.invalid.name-3</p>
<canvas id="c174c" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_fillStyle_parse_invalid_name_3() {
var canvas = document.getElementById('c174c');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
try { ctx.fillStyle = 'red blue'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.fillStyle.parse.invalid.rgb-1.html ]]] -->
<p>Canvas test: 2d.fillStyle.parse.invalid.rgb-1</p>
<canvas id="c175" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_fillStyle_parse_invalid_rgb_1() {
var canvas = document.getElementById('c175');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
try { ctx.fillStyle = 'rgb(255.0, 0%, 0)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.fillStyle.parse.invalid.rgb-2.html ]]] -->
<p>Canvas test: 2d.fillStyle.parse.invalid.rgb-2</p>
<canvas id="c176" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_fillStyle_parse_invalid_rgb_2() {
var canvas = document.getElementById('c176');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
try { ctx.fillStyle = 'rgb(255%, 0.0, 0)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.fillStyle.parse.invalid.rgb-3.html ]]] -->
<p>Canvas test: 2d.fillStyle.parse.invalid.rgb-3</p>
<canvas id="c177" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_fillStyle_parse_invalid_rgb_3() {
var canvas = document.getElementById('c177');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
try { ctx.fillStyle = 'rgb(255.0, 0, 0,)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.fillStyle.parse.invalid.rgb-4.html ]]] -->
<p>Canvas test: 2d.fillStyle.parse.invalid.rgb-4</p>
<canvas id="c178" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_fillStyle_parse_invalid_rgb_4() {
var canvas = document.getElementById('c178');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
try { ctx.fillStyle = 'rgb(100%, 0, 0)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.fillStyle.parse.invalid.rgb-5.html ]]] -->
<p>Canvas test: 2d.fillStyle.parse.invalid.rgb-5</p>
<canvas id="c179" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_fillStyle_parse_invalid_rgb_5() {
var canvas = document.getElementById('c179');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
try { ctx.fillStyle = 'rgb(255, 0 0)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.fillStyle.parse.invalid.rgb-6.html ]]] -->
<p>Canvas test: 2d.fillStyle.parse.invalid.rgb-6</p>
<canvas id="c180" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_fillStyle_parse_invalid_rgb_6() {
var canvas = document.getElementById('c180');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
try { ctx.fillStyle = 'rgb(255, - 1, 0)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.fillStyle.parse.invalid.rgb-7.html ]]] -->
<p>Canvas test: 2d.fillStyle.parse.invalid.rgb-7</p>
<canvas id="c181" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_fillStyle_parse_invalid_rgb_7() {
var canvas = document.getElementById('c181');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
try { ctx.fillStyle = 'rgb(255, 0, 0, 1,)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.fillStyle.parse.invalid.rgba-1.html ]]] -->
<p>Canvas test: 2d.fillStyle.parse.invalid.rgba-1</p>
<canvas id="c182" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_fillStyle_parse_invalid_rgba_1() {
var canvas = document.getElementById('c182');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
try { ctx.fillStyle = 'rgba(255, 0, 0,)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.fillStyle.parse.invalid.rgba-2.html ]]] -->
<p>Canvas test: 2d.fillStyle.parse.invalid.rgba-2</p>
<canvas id="c183" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_fillStyle_parse_invalid_rgba_2() {
var canvas = document.getElementById('c183');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
try { ctx.fillStyle = 'rgba(255.0, 0, 0, 1,)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.fillStyle.parse.invalid.rgba-3.html ]]] -->
<p>Canvas test: 2d.fillStyle.parse.invalid.rgba-3</p>
<canvas id="c184" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_fillStyle_parse_invalid_rgba_3() {
var canvas = document.getElementById('c184');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
try { ctx.fillStyle = 'rgba(100%, 0, 0, 1)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.fillStyle.parse.invalid.rgba-4.html ]]] -->
<p>Canvas test: 2d.fillStyle.parse.invalid.rgba-4</p>
<canvas id="c185" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_fillStyle_parse_invalid_rgba_4() {
var canvas = document.getElementById('c185');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
try { ctx.fillStyle = 'rgba(255, 0, 0, 100.%)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.fillStyle.parse.invalid.rgba-5.html ]]] -->
<p>Canvas test: 2d.fillStyle.parse.invalid.rgba-5</p>
<canvas id="c186" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_fillStyle_parse_invalid_rgba_5() {
var canvas = document.getElementById('c186');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
try { ctx.fillStyle = 'rgba(255, 0, 0, 1. 0)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.fillStyle.parse.rgb-clamp-1.html ]]] -->
<p>Canvas test: 2d.fillStyle.parse.rgb-clamp-1</p>
<canvas id="c187" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_fillStyle_parse_rgb_clamp_1() {
var canvas = document.getElementById('c187');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillStyle = 'rgb(-1000, 1000, -1000)';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.fillStyle.parse.rgb-clamp-2.html ]]] -->
<p>Canvas test: 2d.fillStyle.parse.rgb-clamp-2</p>
<canvas id="c188" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_fillStyle_parse_rgb_clamp_2() {
var canvas = document.getElementById('c188');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillStyle = 'rgb(-200%, 200%, -200%)';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.fillStyle.parse.rgb-clamp-3.html ]]] -->
<p>Canvas test: 2d.fillStyle.parse.rgb-clamp-3</p>
<canvas id="c189" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_fillStyle_parse_rgb_clamp_3() {
var canvas = document.getElementById('c189');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillStyle = 'rgb(-2147483649, 4294967298, -18446744073709551619)';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.fillStyle.parse.rgb-clamp-4.html ]]] -->
<p>Canvas test: 2d.fillStyle.parse.rgb-clamp-4</p>
<canvas id="c190" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_fillStyle_parse_rgb_clamp_4() {
var canvas = document.getElementById('c190');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillStyle = 'rgb(-1000000000000000000000000000000000000000, 1000000000000000000000000000000000000000, -1000000000000000000000000000000000000000)';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.fillStyle.parse.rgb-clamp-5.html ]]] -->
<p>Canvas test: 2d.fillStyle.parse.rgb-clamp-5</p>
<canvas id="c191" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_fillStyle_parse_rgb_clamp_5() {
var canvas = document.getElementById('c191');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillStyle = 'rgb(-10000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000, 10000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000, -10000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000)';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.fillStyle.parse.rgb-num.html ]]] -->
<p>Canvas test: 2d.fillStyle.parse.rgb-num</p>
<canvas id="c192" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_fillStyle_parse_rgb_num() {
var canvas = document.getElementById('c192');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillStyle = 'rgb(0,255,0)';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.fillStyle.parse.rgb-percent.html ]]] -->
<p>Canvas test: 2d.fillStyle.parse.rgb-percent</p>
<canvas id="c193" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_fillStyle_parse_rgb_percent() {
var canvas = document.getElementById('c193');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillStyle = 'rgb(0% ,100% ,0%)';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.fillStyle.parse.rgba-clamp-1.html ]]] -->
<p>Canvas test: 2d.fillStyle.parse.rgba-clamp-1</p>
<canvas id="c194" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_fillStyle_parse_rgba_clamp_1() {
var canvas = document.getElementById('c194');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillStyle = 'rgba(0, 255, 0, -2)';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,0,0,0, 0);
}
</script>
<!-- [[[ test_2d.fillStyle.parse.rgba-clamp-2.html ]]] -->
<p>Canvas test: 2d.fillStyle.parse.rgba-clamp-2</p>
<canvas id="c195" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_fillStyle_parse_rgba_clamp_2() {
var canvas = document.getElementById('c195');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillStyle = 'rgba(0, 255, 0, 2)';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.fillStyle.parse.rgba-num-1.html ]]] -->
<p>Canvas test: 2d.fillStyle.parse.rgba-num-1</p>
<canvas id="c196" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_fillStyle_parse_rgba_num_1() {
var canvas = document.getElementById('c196');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillStyle = 'rgba( 0 , 255 , 0 , .499 )';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,127, 0);
}
</script>
<!-- [[[ test_2d.fillStyle.parse.rgba-num-2.html ]]] -->
<p>Canvas test: 2d.fillStyle.parse.rgba-num-2</p>
<canvas id="c197" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_fillStyle_parse_rgba_num_2() {
var canvas = document.getElementById('c197');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillStyle = 'rgba( 0 , 255 , 0 , 0.499 )';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,127, 0);
}
</script>
<!-- [[[ test_2d.fillStyle.parse.rgba-percent.html ]]] -->
<p>Canvas test: 2d.fillStyle.parse.rgba-percent</p>
<canvas id="c198" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_fillStyle_parse_rgba_percent() {
var canvas = document.getElementById('c198');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillStyle = 'rgba(0%,100%,0%,0.499)';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,127, 0);
}
</script>
<!-- [[[ test_2d.fillStyle.parse.rgba-solid-1.html ]]] -->
<p>Canvas test: 2d.fillStyle.parse.rgba-solid-1</p>
<canvas id="c199" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_fillStyle_parse_rgba_solid_1() {
var canvas = document.getElementById('c199');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillStyle = 'rgba( 0 , 255 , 0 , 1 )';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.fillStyle.parse.rgba-solid-2.html ]]] -->
<p>Canvas test: 2d.fillStyle.parse.rgba-solid-2</p>
<canvas id="c200" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_fillStyle_parse_rgba_solid_2() {
var canvas = document.getElementById('c200');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillStyle = 'rgba( 0 , 255 , 0 , 1.0 )';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.fillStyle.parse.svg-1.html ]]] -->
<p>Canvas test: 2d.fillStyle.parse.svg-1</p>
<canvas id="c201" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_fillStyle_parse_svg_1() {
var canvas = document.getElementById('c201');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillStyle = 'gray';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 128,128,128,255, 0);
}
</script>
<!-- [[[ test_2d.fillStyle.parse.svg-2.html ]]] -->
<p>Canvas test: 2d.fillStyle.parse.svg-2</p>
<canvas id="c202" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_fillStyle_parse_svg_2() {
var canvas = document.getElementById('c202');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillStyle = 'grey';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 128,128,128,255, 0);
}
</script>
<!-- [[[ test_2d.fillStyle.parse.system.html ]]] -->
<p>Canvas test: 2d.fillStyle.parse.system</p>
<canvas id="c203" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_fillStyle_parse_system() {
var canvas = document.getElementById('c203');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillStyle = 'ThreeDDarkShadow';
ok(/^#(?!(FF0000|ff0000|f00)$)/.test(ctx.fillStyle), "ctx.fillStyle =~ /^#(?!(FF0000|ff0000|f00)$)/"); // test that it's not red
}
</script>
<!-- [[[ test_2d.fillStyle.parse.transparent-1.html ]]] -->
<p>Canvas test: 2d.fillStyle.parse.transparent-1</p>
<canvas id="c204" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_fillStyle_parse_transparent_1() {
var canvas = document.getElementById('c204');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillStyle = 'transparent';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,0,0,0, 0);
}
</script>
<!-- [[[ test_2d.fillStyle.parse.transparent-2.html ]]] -->
<p>Canvas test: 2d.fillStyle.parse.transparent-2</p>
<canvas id="c205" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_fillStyle_parse_transparent_2() {
var canvas = document.getElementById('c205');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillStyle = 'TrAnSpArEnT';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,0,0,0, 0);
}
</script>
<!-- [[[ test_2d.getcontext.exists.html ]]] -->
<p>Canvas test: 2d.getcontext.exists</p>
<!-- Testing: The 2D context is implemented -->
<canvas id="c206" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_getcontext_exists() {
var canvas = document.getElementById('c206');
var ctx = canvas.getContext('2d');
ok(canvas.getContext('2d') !== null, "canvas.getContext('2d') !== null");
}
</script>
<!-- [[[ test_2d.getcontext.shared.html ]]] -->
<p>Canvas test: 2d.getcontext.shared</p>
<!-- Testing: getContext('2d') returns objects which share canvas state -->
<canvas id="c207" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_getcontext_shared() {
var canvas = document.getElementById('c207');
var ctx = canvas.getContext('2d');
var ctx2 = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx2.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.getcontext.unique.html ]]] -->
<p>Canvas test: 2d.getcontext.unique</p>
<!-- Testing: getContext('2d') returns the same object -->
<canvas id="c208" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_getcontext_unique() {
var canvas = document.getElementById('c208');
var ctx = canvas.getContext('2d');
// eslint-disable-next-line no-self-compare
ok(canvas.getContext('2d') === canvas.getContext('2d'), "canvas.getContext('2d') === canvas.getContext('2d')");
}
</script>
<!-- [[[ test_2d.gradient.empty.html ]]] -->
<p>Canvas test: 2d.gradient.empty</p>
<canvas id="c209" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_gradient_empty() {
var canvas = document.getElementById('c209');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
var g = ctx.createLinearGradient(0, 0, 0, 50);
ctx.fillStyle = g;
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 2);
}
</script>
<!-- [[[ test_2d.gradient.interpolate.alpha.html ]]] -->
<p>Canvas test: 2d.gradient.interpolate.alpha</p>
<canvas id="c210" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_gradient_interpolate_alpha() {
var canvas = document.getElementById('c210');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#ff0';
ctx.fillRect(0, 0, 100, 50);
var g = ctx.createLinearGradient(0, 0, 100, 0);
g.addColorStop(0, 'rgba(0,0,255, 0)');
g.addColorStop(1, 'rgba(0,0,255, 1)');
ctx.fillStyle = g;
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 25,25, 191,191,63,255, 3);
isPixel(ctx, 50,25, 127,127,127,255, 3);
isPixel(ctx, 75,25, 63,63,191,255, 3);
}
</script>
<!-- [[[ test_2d.gradient.interpolate.colour.html ]]] -->
<p>Canvas test: 2d.gradient.interpolate.colour</p>
<canvas id="c211" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_gradient_interpolate_colour() {
var canvas = document.getElementById('c211');
var ctx = canvas.getContext('2d');
var g = ctx.createLinearGradient(0, 0, 100, 0);
g.addColorStop(0, '#ff0');
g.addColorStop(1, '#00f');
ctx.fillStyle = g;
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 25,25, 191,191,63,255, 3);
isPixel(ctx, 50,25, 127,127,127,255, 3);
isPixel(ctx, 75,25, 63,63,191,255, 3);
}
</script>
<!-- [[[ test_2d.gradient.interpolate.colouralpha.html ]]] -->
<p>Canvas test: 2d.gradient.interpolate.colouralpha</p>
<canvas id="c212" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_gradient_interpolate_colouralpha() {
var canvas = document.getElementById('c212');
var ctx = canvas.getContext('2d');
var g = ctx.createLinearGradient(0, 0, 100, 0);
g.addColorStop(0, 'rgba(255,255,0, 0)');
g.addColorStop(1, 'rgba(0,0,255, 1)');
ctx.fillStyle = g;
ctx.fillRect(0, 0, 100, 50);
// Following tests fail on Windows hardware (datacenter and local laptops), see bug 1657707
if (!IsWindows()) isPixel(ctx, 25,25, 191,191,63,63, 3);
if (!IsWindows()) isPixel(ctx, 50,25, 127,127,127,127, 3);
if (!IsWindows()) isPixel(ctx, 75,25, 63,63,191,191, 3);
}
</script>
<!-- [[[ test_2d.gradient.interpolate.multiple.html ]]] -->
<p>Canvas test: 2d.gradient.interpolate.multiple</p>
<canvas id="c213" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_gradient_interpolate_multiple() {
var canvas = document.getElementById('c213');
var ctx = canvas.getContext('2d');
canvas.width = 200;
var g = ctx.createLinearGradient(0, 0, 200, 0);
g.addColorStop(0, '#ff0');
g.addColorStop(0.5, '#0ff');
g.addColorStop(1, '#f0f');
ctx.fillStyle = g;
ctx.fillRect(0, 0, 200, 50);
isPixel(ctx, 50,25, 127,255,127,255, 3);
isPixel(ctx, 100,25, 0,255,255,255, 3);
isPixel(ctx, 150,25, 127,127,255,255, 3);
}
</script>
<!-- [[[ test_2d.gradient.interpolate.outside.html ]]] -->
<p>Canvas test: 2d.gradient.interpolate.outside</p>
<canvas id="c214" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_gradient_interpolate_outside() {
var canvas = document.getElementById('c214');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
var g = ctx.createLinearGradient(25, 0, 75, 0);
g.addColorStop(0.4, '#0f0');
g.addColorStop(0.6, '#0f0');
ctx.fillStyle = g;
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 20,25, 0,255,0,255, 2);
isPixel(ctx, 50,25, 0,255,0,255, 2);
isPixel(ctx, 80,25, 0,255,0,255, 2);
}
</script>
<!-- [[[ test_2d.gradient.interpolate.overlap.html ]]] -->
<p>Canvas test: 2d.gradient.interpolate.overlap</p>
<canvas id="c215" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_gradient_interpolate_overlap() {
var canvas = document.getElementById('c215');
var ctx = canvas.getContext('2d');
if (!IsD2DEnabled()) {
// On D2D the different nature of how gradients
// are drawn makes it so we cannot guarantee these stops are completely
// hard.
// On OS X 10.5 quartz is confused by the overlapping stops: Bug #715235
canvas.width = 200;
var g = ctx.createLinearGradient(0, 0, 200, 0);
g.addColorStop(0, '#f00');
g.addColorStop(0, '#ff0');
g.addColorStop(0.25, '#00f');
g.addColorStop(0.25, '#0f0');
g.addColorStop(0.25, '#0f0');
g.addColorStop(0.25, '#0f0');
g.addColorStop(0.25, '#ff0');
g.addColorStop(0.5, '#00f');
g.addColorStop(0.5, '#0f0');
g.addColorStop(0.75, '#00f');
g.addColorStop(0.75, '#f00');
g.addColorStop(0.75, '#ff0');
g.addColorStop(0.5, '#0f0');
g.addColorStop(0.5, '#0f0');
g.addColorStop(0.5, '#ff0');
g.addColorStop(1, '#00f');
ctx.fillStyle = g;
ctx.fillRect(0, 0, 200, 50);
isPixel(ctx, 49,25, 0,0,255,255, 16);
isPixel(ctx, 51,25, 255,255,0,255, 16);
isPixel(ctx, 99,25, 0,0,255,255, 16);
isPixel(ctx, 101,25, 255,255,0,255, 16);
isPixel(ctx, 149,25, 0,0,255,255, 16);
isPixel(ctx, 151,25, 255,255,0,255, 16);
}
}
</script>
<!-- [[[ test_2d.gradient.interpolate.overlap2.html ]]] -->
<p>Canvas test: 2d.gradient.interpolate.overlap2</p>
<canvas id="c216" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_gradient_interpolate_overlap2() {
var canvas = document.getElementById('c216');
var ctx = canvas.getContext('2d');
var g = ctx.createLinearGradient(0, 0, 100, 0);
var ps = [ 0, 1/10, 1/4, 1/3, 1/2, 3/4, 1 ];
for (var p = 0; p < ps.length; ++p)
{
g.addColorStop(ps[p], '#0f0');
for (var i = 0; i < 15; ++i)
g.addColorStop(ps[p], '#f00');
g.addColorStop(ps[p], '#0f0');
}
ctx.fillStyle = g;
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 1,25, 0,255,0,255, 0);
isPixel(ctx, 30,25, 0,255,0,255, 0);
isPixel(ctx, 40,25, 0,255,0,255, 0);
isPixel(ctx, 60,25, 0,255,0,255, 0);
isPixel(ctx, 80,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.gradient.interpolate.solid.html ]]] -->
<p>Canvas test: 2d.gradient.interpolate.solid</p>
<canvas id="c217" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_gradient_interpolate_solid() {
var canvas = document.getElementById('c217');
var ctx = canvas.getContext('2d');
var g = ctx.createLinearGradient(0, 0, 100, 0);
g.addColorStop(0, '#0f0');
g.addColorStop(1, '#0f0');
ctx.fillStyle = g;
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.gradient.interpolate.vertical.html ]]] -->
<p>Canvas test: 2d.gradient.interpolate.vertical</p>
<canvas id="c218" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_gradient_interpolate_vertical() {
var canvas = document.getElementById('c218');
var ctx = canvas.getContext('2d');
var g = ctx.createLinearGradient(0, 0, 0, 50);
g.addColorStop(0, '#ff0');
g.addColorStop(1, '#00f');
ctx.fillStyle = g;
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,12, 191,191,63,255, 10);
isPixel(ctx, 50,25, 127,127,127,255, 5);
isPixel(ctx, 50,37, 63,63,191,255, 10);
}
</script>
<!-- [[[ test_2d.gradient.interpolate.zerosize.html ]]] -->
<p>Canvas test: 2d.gradient.interpolate.zerosize</p>
<canvas id="c219" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_gradient_interpolate_zerosize() {
var canvas = document.getElementById('c219');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
var g = ctx.createLinearGradient(50, 25, 50, 25); // zero-length line (undefined direction)
g.addColorStop(0, '#f00');
g.addColorStop(1, '#f00');
ctx.fillStyle = g;
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 40,20, 0,255,0,255, 2);
}
</script>
<!-- [[[ test_2d.gradient.linear.nonfinite.html ]]] -->
<p>Canvas test: 2d.gradient.linear.nonfinite</p>
<!-- Testing: createLinearGradient() throws NOT_SUPPORTED_ERR if arguments are not finite -->
<canvas id="c220" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
// eslint-disable-next-line complexity
function test_2d_gradient_linear_nonfinite() {
var canvas = document.getElementById('c220');
var ctx = canvas.getContext('2d');
var _thrown = undefined; try {
ctx.createLinearGradient(Infinity, 0, 1, 0);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createLinearGradient(-Infinity, 0, 1, 0);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createLinearGradient(NaN, 0, 1, 0);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createLinearGradient(0, Infinity, 1, 0);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createLinearGradient(0, -Infinity, 1, 0);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createLinearGradient(0, NaN, 1, 0);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createLinearGradient(0, 0, Infinity, 0);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createLinearGradient(0, 0, -Infinity, 0);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createLinearGradient(0, 0, NaN, 0);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createLinearGradient(0, 0, 1, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createLinearGradient(0, 0, 1, -Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createLinearGradient(0, 0, 1, NaN);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createLinearGradient(Infinity, Infinity, 1, 0);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createLinearGradient(Infinity, Infinity, Infinity, 0);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createLinearGradient(Infinity, Infinity, Infinity, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createLinearGradient(Infinity, Infinity, 1, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createLinearGradient(Infinity, 0, Infinity, 0);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createLinearGradient(Infinity, 0, Infinity, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createLinearGradient(Infinity, 0, 1, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createLinearGradient(0, Infinity, Infinity, 0);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createLinearGradient(0, Infinity, Infinity, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createLinearGradient(0, Infinity, 1, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createLinearGradient(0, 0, Infinity, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
}
</script>
<!-- [[[ test_2d.gradient.linear.transform.1.html ]]] -->
<p>Canvas test: 2d.gradient.linear.transform.1</p>
<!-- Testing: Linear gradient coordinates are relative to the coordinate space at the time of filling -->
<canvas id="c221" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_gradient_linear_transform_1() {
var canvas = document.getElementById('c221');
var ctx = canvas.getContext('2d');
var g = ctx.createLinearGradient(0, 0, 200, 0);
g.addColorStop(0, '#f00');
g.addColorStop(0.25, '#0f0');
g.addColorStop(0.75, '#0f0');
g.addColorStop(1, '#f00');
ctx.fillStyle = g;
ctx.translate(-50, 0);
ctx.fillRect(50, 0, 100, 50);
isPixel(ctx, 25,25, 0,255,0,255, 0);
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 75,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.gradient.linear.transform.2.html ]]] -->
<p>Canvas test: 2d.gradient.linear.transform.2</p>
<!-- Testing: Linear gradient coordinates are relative to the coordinate space at the time of filling -->
<canvas id="c222" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_gradient_linear_transform_2() {
var canvas = document.getElementById('c222');
var ctx = canvas.getContext('2d');
ctx.translate(100, 0);
var g = ctx.createLinearGradient(0, 0, 200, 0);
g.addColorStop(0, '#f00');
g.addColorStop(0.25, '#0f0');
g.addColorStop(0.75, '#0f0');
g.addColorStop(1, '#f00');
ctx.fillStyle = g;
ctx.translate(-150, 0);
ctx.fillRect(50, 0, 100, 50);
isPixel(ctx, 25,25, 0,255,0,255, 0);
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 75,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.gradient.linear.transform.3.html ]]] -->
<p>Canvas test: 2d.gradient.linear.transform.3</p>
<!-- Testing: Linear gradient transforms do not experience broken caching effects -->
<canvas id="c223" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_gradient_linear_transform_3() {
var canvas = document.getElementById('c223');
var ctx = canvas.getContext('2d');
var g = ctx.createLinearGradient(0, 0, 200, 0);
g.addColorStop(0, '#f00');
g.addColorStop(0.25, '#0f0');
g.addColorStop(0.75, '#0f0');
g.addColorStop(1, '#f00');
ctx.fillStyle = g;
ctx.fillRect(0, 0, 100, 50);
ctx.translate(-50, 0);
ctx.fillRect(50, 0, 100, 50);
isPixel(ctx, 25,25, 0,255,0,255, 0);
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 75,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.gradient.object.compare.html ]]] -->
<p>Canvas test: 2d.gradient.object.compare</p>
<canvas id="c224" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_gradient_object_compare() {
var canvas = document.getElementById('c224');
var ctx = canvas.getContext('2d');
var g1 = ctx.createLinearGradient(0, 0, 100, 0);
var g2 = ctx.createLinearGradient(0, 0, 100, 0);
ok(g1 !== g2, "g1 !== g2");
ctx.fillStyle = g1;
ok(ctx.fillStyle === g1, "ctx.fillStyle === g1");
}
</script>
<!-- [[[ test_2d.gradient.object.crosscanvas.html ]]] -->
<p>Canvas test: 2d.gradient.object.crosscanvas</p>
<canvas id="c225" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_gradient_object_crosscanvas() {
var canvas = document.getElementById('c225');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
var g = document.createElement('canvas').getContext('2d').createLinearGradient(0, 0, 100, 0);
g.addColorStop(0, '#0f0');
g.addColorStop(1, '#0f0');
ctx.fillStyle = g;
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 2);
}
</script>
<!-- [[[ test_2d.gradient.object.invalidcolour.html ]]] -->
<p>Canvas test: 2d.gradient.object.invalidcolour</p>
<canvas id="c226" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_gradient_object_invalidcolour() {
var canvas = document.getElementById('c226');
var ctx = canvas.getContext('2d');
var g = ctx.createLinearGradient(0, 0, 100, 0);
var _thrown = undefined; try {
g.addColorStop(0, "");
} catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "SyntaxError" && _thrown.code == DOMException.SYNTAX_ERR, "should throw SyntaxError");
var _thrown = undefined; try {
g.addColorStop(0, 'undefined');
} catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "SyntaxError" && _thrown.code == DOMException.SYNTAX_ERR, "should throw SyntaxError");
}
</script>
<!-- [[[ test_2d.gradient.object.invalidoffset.html ]]] -->
<p>Canvas test: 2d.gradient.object.invalidoffset</p>
<canvas id="c227" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_gradient_object_invalidoffset() {
var canvas = document.getElementById('c227');
var ctx = canvas.getContext('2d');
var g = ctx.createLinearGradient(0, 0, 100, 0);
var _thrown = undefined; try {
g.addColorStop(-1, '#000');
} catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError");
var _thrown = undefined; try {
g.addColorStop(2, '#000');
} catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError");
var _thrown = undefined; try {
g.addColorStop(Infinity, '#000');
} catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "TypeError", "should throw TypeError");
var _thrown = undefined; try {
g.addColorStop(-Infinity, '#000');
} catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "TypeError", "should throw TypeError");
var _thrown = undefined; try {
g.addColorStop(NaN, '#000');
} catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "TypeError", "should throw TypeError");
}
</script>
<!-- [[[ test_2d.gradient.object.return.html ]]] -->
<p>Canvas test: 2d.gradient.object.return</p>
<!-- Testing: createLinearGradient() and createRadialGradient() returns objects implementing CanvasGradient -->
<canvas id="c228" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_gradient_object_return() {
var canvas = document.getElementById('c228');
var ctx = canvas.getContext('2d');
window.CanvasGradient.prototype.thisImplementsCanvasGradient = true;
var g1 = ctx.createLinearGradient(0, 0, 100, 0);
ok(g1.addColorStop !== undefined, "g1.addColorStop !== undefined");
ok(g1.thisImplementsCanvasGradient === true, "g1.thisImplementsCanvasGradient === true");
var g2 = ctx.createRadialGradient(0, 0, 10, 0, 0, 20);
ok(g2.addColorStop !== undefined, "g2.addColorStop !== undefined");
ok(g2.thisImplementsCanvasGradient === true, "g2.thisImplementsCanvasGradient === true");
}
</script>
<!-- [[[ test_2d.gradient.object.type.html ]]] -->
<p>Canvas test: 2d.gradient.object.type</p>
<!-- Testing: window.CanvasGradient exists and has the right properties -->
<canvas id="c229" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_gradient_object_type() {
var canvas = document.getElementById('c229');
var ctx = canvas.getContext('2d');
ok(window.CanvasGradient !== undefined, "window.CanvasGradient !== undefined");
ok(window.CanvasGradient.prototype.addColorStop !== undefined, "window.CanvasGradient.prototype.addColorStop !== undefined");
}
</script>
<!-- [[[ test_2d.gradient.object.update.html ]]] -->
<p>Canvas test: 2d.gradient.object.update</p>
<canvas id="c230" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_gradient_object_update() {
var canvas = document.getElementById('c230');
var ctx = canvas.getContext('2d');
var g = ctx.createLinearGradient(-100, 0, 200, 0);
g.addColorStop(0, '#f00');
g.addColorStop(1, '#f00');
ctx.fillStyle = g;
g.addColorStop(0.1, '#0f0');
g.addColorStop(0.9, '#0f0');
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 2);
}
</script>
<!-- [[[ test_2d.gradient.radial.cone.behind.html ]]] -->
<p>Canvas test: 2d.gradient.radial.cone.behind</p>
<canvas id="c231" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_gradient_radial_cone_behind() {
var canvas = document.getElementById('c231');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
var g = ctx.createRadialGradient(120, 25, 10, 211, 25, 100);
g.addColorStop(0, '#f00');
g.addColorStop(1, '#f00');
ctx.fillStyle = g;
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 50,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,25, 0,255,0,255, 0);
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 98,25, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 50,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.gradient.radial.cone.beside.html ]]] -->
<p>Canvas test: 2d.gradient.radial.cone.beside</p>
<canvas id="c232" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_gradient_radial_cone_beside() {
var canvas = document.getElementById('c232');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
var g = ctx.createRadialGradient(0, 100, 40, 100, 100, 50);
g.addColorStop(0, '#f00');
g.addColorStop(1, '#f00');
ctx.fillStyle = g;
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 50,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,25, 0,255,0,255, 0);
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 98,25, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 50,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.gradient.radial.cone.bottom.html ]]] -->
<p>Canvas test: 2d.gradient.radial.cone.bottom</p>
<canvas id="c233" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_gradient_radial_cone_bottom() {
var canvas = document.getElementById('c233');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
var g = ctx.createRadialGradient(210, 25, 100, 230, 25, 101);
g.addColorStop(0, '#0f0');
g.addColorStop(1, '#f00');
ctx.fillStyle = g;
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 50,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,25, 0,255,0,255, 0);
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 98,25, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 50,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.gradient.radial.cone.cylinder.html ]]] -->
<p>Canvas test: 2d.gradient.radial.cone.cylinder</p>
<canvas id="c234" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_gradient_radial_cone_cylinder() {
var canvas = document.getElementById('c234');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
var g = ctx.createRadialGradient(210, 25, 100, 230, 25, 100);
g.addColorStop(0, '#0f0');
g.addColorStop(1, '#f00');
ctx.fillStyle = g;
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 1, 1, 0, 255, 0, 255, 0);
isPixel(ctx, 50, 1, 0, 255, 0, 255, 0);
isPixel(ctx, 98, 1, 0, 255, 0, 255, 0);
isPixel(ctx, 1, 25, 0, 255, 0, 255, 0);
isPixel(ctx, 50, 25, 0, 255, 0, 255, 0);
isPixel(ctx, 98, 25, 0, 255, 0, 255, 0);
isPixel(ctx, 1, 48, 0, 255, 0, 255, 0);
isPixel(ctx, 50, 48, 0, 255, 0, 255, 0);
isPixel(ctx, 98, 48, 0, 255, 0, 255, 0);
}
</script>
<!-- [[[ test_2d.gradient.radial.cone.front.html ]]] -->
<p>Canvas test: 2d.gradient.radial.cone.front</p>
<canvas id="c235" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_gradient_radial_cone_front() {
var canvas = document.getElementById('c235');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
var g = ctx.createRadialGradient(311, 25, 10, 210, 25, 100);
g.addColorStop(0, '#f00');
g.addColorStop(1, '#0f0');
ctx.fillStyle = g;
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 50,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,25, 0,255,0,255, 0);
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 98,25, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 50,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.gradient.radial.cone.shape1.html ]]] -->
<p>Canvas test: 2d.gradient.radial.cone.shape1</p>
<canvas id="c236" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_gradient_radial_cone_shape1() {
var canvas = document.getElementById('c236');
var ctx = canvas.getContext('2d');
var tol = 1; // tolerance to avoid antialiasing artifacts
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = '#f00';
ctx.beginPath();
ctx.moveTo(30+tol, 40);
ctx.lineTo(110, -20+tol);
ctx.lineTo(110, 100-tol);
ctx.fill();
var g = ctx.createRadialGradient(30+10*5/2, 40, 10*3/2, 30+10*15/4, 40, 10*9/4);
g.addColorStop(0, '#0f0');
g.addColorStop(1, '#0f0');
ctx.fillStyle = g;
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 50,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,25, 0,255,0,255, 0);
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 98,25, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 50,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.gradient.radial.cone.shape2.html ]]] -->
<p>Canvas test: 2d.gradient.radial.cone.shape2</p>
<canvas id="c237" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_gradient_radial_cone_shape2() {
var canvas = document.getElementById('c237');
var ctx = canvas.getContext('2d');
var tol = 1; // tolerance to avoid antialiasing artifacts
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
var g = ctx.createRadialGradient(30+10*5/2, 40, 10*3/2, 30+10*15/4, 40, 10*9/4);
g.addColorStop(0, '#f00');
g.addColorStop(1, '#f00');
ctx.fillStyle = g;
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = '#0f0';
ctx.beginPath();
ctx.moveTo(30-tol, 40);
ctx.lineTo(110, -20-tol);
ctx.lineTo(110, 100+tol);
ctx.fill();
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 50,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,25, 0,255,0,255, 0);
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 98,25, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 50,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.gradient.radial.cone.top.html ]]] -->
<p>Canvas test: 2d.gradient.radial.cone.top</p>
<canvas id="c238" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_gradient_radial_cone_top() {
var canvas = document.getElementById('c238');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
var g = ctx.createRadialGradient(230, 25, 100, 100, 25, 101);
g.addColorStop(0, '#f00');
g.addColorStop(1, '#0f0');
ctx.fillStyle = g;
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 1, 1, 0, 255, 0, 255, 0);
isPixel(ctx, 50, 1, 0, 255, 0, 255, 0);
isPixel(ctx, 98, 1, 0, 255, 0, 255, 0);
isPixel(ctx, 1, 25, 0, 255, 0, 255, 0);
isPixel(ctx, 50, 25, 0, 255, 0, 255, 0);
isPixel(ctx, 98, 25, 0, 255, 0, 255, 0);
isPixel(ctx, 1, 48, 0, 255, 0, 255, 0);
isPixel(ctx, 50, 48, 0, 255, 0, 255, 0);
isPixel(ctx, 98, 48, 0, 255, 0, 255, 0);
}
</script>
<!-- [[[ test_2d.gradient.radial.equal.html ]]] -->
<p>Canvas test: 2d.gradient.radial.equal</p>
<canvas id="c239" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_gradient_radial_equal() {
var canvas = document.getElementById('c239');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
var g = ctx.createRadialGradient(50, 25, 20, 50, 25, 20);
g.addColorStop(0, '#f00');
g.addColorStop(1, '#f00');
ctx.fillStyle = g;
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 50,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,25, 0,255,0,255, 0);
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 98,25, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 50,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.gradient.radial.inside1.html ]]] -->
<p>Canvas test: 2d.gradient.radial.inside1</p>
<canvas id="c240" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_gradient_radial_inside1() {
var canvas = document.getElementById('c240');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
var g = ctx.createRadialGradient(50, 25, 100, 50, 25, 200);
g.addColorStop(0, '#0f0');
g.addColorStop(1, '#f00');
ctx.fillStyle = g;
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 50,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,25, 0,255,0,255, 0);
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 98,25, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 50,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.gradient.radial.inside2.html ]]] -->
<p>Canvas test: 2d.gradient.radial.inside2</p>
<canvas id="c241" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_gradient_radial_inside2() {
var canvas = document.getElementById('c241');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
var g = ctx.createRadialGradient(50, 25, 200, 50, 25, 100);
g.addColorStop(0, '#f00');
g.addColorStop(1, '#0f0');
ctx.fillStyle = g;
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 50,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,25, 0,255,0,255, 0);
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 98,25, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 50,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.gradient.radial.inside3.html ]]] -->
<p>Canvas test: 2d.gradient.radial.inside3</p>
<canvas id="c242" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_gradient_radial_inside3() {
var canvas = document.getElementById('c242');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
var g = ctx.createRadialGradient(50, 25, 200, 50, 25, 100);
g.addColorStop(0, '#f00');
g.addColorStop(0.993, '#f00');
g.addColorStop(1, '#0f0');
ctx.fillStyle = g;
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 50,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,25, 0,255,0,255, 0);
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 98,25, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 50,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.gradient.radial.negative.html ]]] -->
<p>Canvas test: 2d.gradient.radial.negative</p>
<!-- Testing: createRadialGradient() throws INDEX_SIZE_ERR if either radius is negative -->
<canvas id="c243" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_gradient_radial_negative() {
var canvas = document.getElementById('c243');
var ctx = canvas.getContext('2d');
var _thrown = undefined; try {
ctx.createRadialGradient(0, 0, -0.1, 0, 0, 1);
} catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError");
var _thrown = undefined; try {
ctx.createRadialGradient(0, 0, 1, 0, 0, -0.1);
} catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError");
var _thrown = undefined; try {
ctx.createRadialGradient(0, 0, -0.1, 0, 0, -0.1);
} catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError");
}
</script>
<!-- [[[ test_2d.gradient.radial.nonfinite.html ]]] -->
<p>Canvas test: 2d.gradient.radial.nonfinite</p>
<!-- Testing: createRadialGradient() throws NOT_SUPPORTED_ERR if arguments are not finite -->
<canvas id="c244" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
// eslint-disable-next-line complexity
function test_2d_gradient_radial_nonfinite() {
var canvas = document.getElementById('c244');
var ctx = canvas.getContext('2d');
var _thrown = undefined; try {
ctx.createRadialGradient(Infinity, 0, 1, 0, 0, 1);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(-Infinity, 0, 1, 0, 0, 1);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(NaN, 0, 1, 0, 0, 1);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(0, Infinity, 1, 0, 0, 1);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(0, -Infinity, 1, 0, 0, 1);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(0, NaN, 1, 0, 0, 1);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(0, 0, Infinity, 0, 0, 1);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(0, 0, -Infinity, 0, 0, 1);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(0, 0, NaN, 0, 0, 1);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(0, 0, 1, Infinity, 0, 1);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(0, 0, 1, -Infinity, 0, 1);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(0, 0, 1, NaN, 0, 1);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(0, 0, 1, 0, Infinity, 1);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(0, 0, 1, 0, -Infinity, 1);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(0, 0, 1, 0, NaN, 1);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(0, 0, 1, 0, 0, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(0, 0, 1, 0, 0, -Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(0, 0, 1, 0, 0, NaN);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(Infinity, Infinity, 1, 0, 0, 1);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(Infinity, Infinity, Infinity, 0, 0, 1);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(Infinity, Infinity, Infinity, Infinity, 0, 1);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(Infinity, Infinity, Infinity, Infinity, Infinity, 1);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(Infinity, Infinity, Infinity, Infinity, Infinity, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(Infinity, Infinity, Infinity, Infinity, 0, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(Infinity, Infinity, Infinity, 0, Infinity, 1);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(Infinity, Infinity, Infinity, 0, Infinity, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(Infinity, Infinity, Infinity, 0, 0, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(Infinity, Infinity, 1, Infinity, 0, 1);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(Infinity, Infinity, 1, Infinity, Infinity, 1);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(Infinity, Infinity, 1, Infinity, Infinity, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(Infinity, Infinity, 1, Infinity, 0, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(Infinity, Infinity, 1, 0, Infinity, 1);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(Infinity, Infinity, 1, 0, Infinity, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(Infinity, Infinity, 1, 0, 0, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(Infinity, 0, Infinity, 0, 0, 1);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(Infinity, 0, Infinity, Infinity, 0, 1);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(Infinity, 0, Infinity, Infinity, Infinity, 1);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(Infinity, 0, Infinity, Infinity, Infinity, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(Infinity, 0, Infinity, Infinity, 0, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(Infinity, 0, Infinity, 0, Infinity, 1);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(Infinity, 0, Infinity, 0, Infinity, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(Infinity, 0, Infinity, 0, 0, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(Infinity, 0, 1, Infinity, 0, 1);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(Infinity, 0, 1, Infinity, Infinity, 1);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(Infinity, 0, 1, Infinity, Infinity, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(Infinity, 0, 1, Infinity, 0, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(Infinity, 0, 1, 0, Infinity, 1);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(Infinity, 0, 1, 0, Infinity, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(Infinity, 0, 1, 0, 0, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(0, Infinity, Infinity, 0, 0, 1);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(0, Infinity, Infinity, Infinity, 0, 1);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(0, Infinity, Infinity, Infinity, Infinity, 1);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(0, Infinity, Infinity, Infinity, Infinity, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(0, Infinity, Infinity, Infinity, 0, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(0, Infinity, Infinity, 0, Infinity, 1);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(0, Infinity, Infinity, 0, Infinity, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(0, Infinity, Infinity, 0, 0, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(0, Infinity, 1, Infinity, 0, 1);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(0, Infinity, 1, Infinity, Infinity, 1);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(0, Infinity, 1, Infinity, Infinity, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(0, Infinity, 1, Infinity, 0, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(0, Infinity, 1, 0, Infinity, 1);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(0, Infinity, 1, 0, Infinity, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(0, Infinity, 1, 0, 0, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(0, 0, Infinity, Infinity, 0, 1);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(0, 0, Infinity, Infinity, Infinity, 1);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(0, 0, Infinity, Infinity, Infinity, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(0, 0, Infinity, Infinity, 0, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(0, 0, Infinity, 0, Infinity, 1);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(0, 0, Infinity, 0, Infinity, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(0, 0, Infinity, 0, 0, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(0, 0, 1, Infinity, Infinity, 1);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(0, 0, 1, Infinity, Infinity, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(0, 0, 1, Infinity, 0, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createRadialGradient(0, 0, 1, 0, Infinity, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
}
</script>
<!-- [[[ test_2d.gradient.radial.outside1.html ]]] -->
<p>Canvas test: 2d.gradient.radial.outside1</p>
<canvas id="c245" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_gradient_radial_outside1() {
var canvas = document.getElementById('c245');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
var g = ctx.createRadialGradient(200, 25, 10, 200, 25, 20);
g.addColorStop(0, '#f00');
g.addColorStop(1, '#0f0');
ctx.fillStyle = g;
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 50,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,25, 0,255,0,255, 0);
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 98,25, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 50,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.gradient.radial.outside2.html ]]] -->
<p>Canvas test: 2d.gradient.radial.outside2</p>
<canvas id="c246" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_gradient_radial_outside2() {
var canvas = document.getElementById('c246');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
var g = ctx.createRadialGradient(200, 25, 20, 200, 25, 10);
g.addColorStop(0, '#0f0');
g.addColorStop(1, '#f00');
ctx.fillStyle = g;
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 50,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,25, 0,255,0,255, 0);
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 98,25, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 50,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.gradient.radial.outside3.html ]]] -->
<p>Canvas test: 2d.gradient.radial.outside3</p>
<canvas id="c247" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_gradient_radial_outside3() {
var canvas = document.getElementById('c247');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
var g = ctx.createRadialGradient(200, 25, 20, 200, 25, 10);
g.addColorStop(0, '#0f0');
g.addColorStop(0.001, '#f00');
g.addColorStop(1, '#f00');
ctx.fillStyle = g;
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 50,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,25, 0,255,0,255, 0);
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 98,25, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 50,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.gradient.radial.touch1.html ]]] -->
<p>Canvas test: 2d.gradient.radial.touch1</p>
<canvas id="c248" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_gradient_radial_touch1() {
var canvas = document.getElementById('c248');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
var g = ctx.createRadialGradient(150, 25, 50, 200, 25, 100);
g.addColorStop(0, '#f00');
g.addColorStop(1, '#f00');
ctx.fillStyle = g;
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 50,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,25, 0,255,0,255, 0);
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 98,25, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 50,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.gradient.radial.touch2.html ]]] -->
<p>Canvas test: 2d.gradient.radial.touch2</p>
<canvas id="c249" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_gradient_radial_touch2() {
var canvas = document.getElementById('c249');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
var g = ctx.createRadialGradient(-80, 25, 70, 0, 25, 150);
g.addColorStop(0, '#f00');
g.addColorStop(0.01, '#0f0');
g.addColorStop(0.99, '#0f0');
g.addColorStop(1, '#f00');
ctx.fillStyle = g;
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 50,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,25, 0,255,0,255, 0);
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 98,25, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 50,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.gradient.radial.touch3.html ]]] -->
<p>Canvas test: 2d.gradient.radial.touch3</p>
<canvas id="c250" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_gradient_radial_touch3() {
var canvas = document.getElementById('c250');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
var g = ctx.createRadialGradient(120, -15, 25, 140, -30, 50);
g.addColorStop(0, '#f00');
g.addColorStop(1, '#f00');
ctx.fillStyle = g;
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 50,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,25, 0,255,0,255, 0);
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 98,25, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 50,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.gradient.radial.transform.1.html ]]] -->
<p>Canvas test: 2d.gradient.radial.transform.1</p>
<!-- Testing: Radial gradient coordinates are relative to the coordinate space at the time of filling -->
<canvas id="c251" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_gradient_radial_transform_1() {
var canvas = document.getElementById('c251');
var ctx = canvas.getContext('2d');
var g = ctx.createRadialGradient(0, 0, 0, 0, 0, 11.2);
g.addColorStop(0, '#0f0');
g.addColorStop(0.5, '#0f0');
g.addColorStop(0.51, '#f00');
g.addColorStop(1, '#f00');
ctx.fillStyle = g;
ctx.translate(50, 25);
ctx.scale(10, 10);
ctx.fillRect(-5, -2.5, 10, 5);
isPixel(ctx, 25,25, 0,255,0,255, 0);
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 75,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.gradient.radial.transform.2.html ]]] -->
<p>Canvas test: 2d.gradient.radial.transform.2</p>
<!-- Testing: Radial gradient coordinates are relative to the coordinate space at the time of filling -->
<canvas id="c252" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_gradient_radial_transform_2() {
var canvas = document.getElementById('c252');
var ctx = canvas.getContext('2d');
ctx.translate(100, 0);
var g = ctx.createRadialGradient(0, 0, 0, 0, 0, 11.2);
g.addColorStop(0, '#0f0');
g.addColorStop(0.5, '#0f0');
g.addColorStop(0.51, '#f00');
g.addColorStop(1, '#f00');
ctx.fillStyle = g;
ctx.translate(-50, 25);
ctx.scale(10, 10);
ctx.fillRect(-5, -2.5, 10, 5);
isPixel(ctx, 25,25, 0,255,0,255, 0);
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 75,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.gradient.radial.transform.3.html ]]] -->
<p>Canvas test: 2d.gradient.radial.transform.3</p>
<!-- Testing: Radial gradient transforms do not experience broken caching effects -->
<canvas id="c253" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_gradient_radial_transform_3() {
var canvas = document.getElementById('c253');
var ctx = canvas.getContext('2d');
var g = ctx.createRadialGradient(0, 0, 0, 0, 0, 11.2);
g.addColorStop(0, '#0f0');
g.addColorStop(0.5, '#0f0');
g.addColorStop(0.51, '#f00');
g.addColorStop(1, '#f00');
ctx.fillStyle = g;
ctx.fillRect(0, 0, 100, 50);
ctx.translate(50, 25);
ctx.scale(10, 10);
ctx.fillRect(-5, -2.5, 10, 5);
isPixel(ctx, 25,25, 0,255,0,255, 0);
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 75,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.imageData.create.basic.html ]]] -->
<p>Canvas test: 2d.imageData.create.basic - bug 433004</p>
<!-- Testing: createImageData() exists and returns something -->
<canvas id="c254" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_imageData_create_basic() {
var canvas = document.getElementById('c254');
var ctx = canvas.getContext('2d');
ok(ctx.createImageData(1, 1) !== null, "ctx.createImageData(1, 1) !== null");
}
</script>
<!-- [[[ test_2d.imageData.create1.basic.html ]]] -->
<p>Canvas test: 2d.imageData.create1.basic - bug 630040</p>
<!-- Testing: createImageData(imgdata) exists and returns something -->
<canvas id="c254a" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_imageData_create1_basic() {
var canvas = document.getElementById('c254a');
var ctx = canvas.getContext('2d');
ok(ctx.createImageData(ctx.createImageData(1, 1)) != null, "ctx.createImageData(ctx.createImageData(1, 1)) != null");
}
</script>
<!-- [[[ test_2d.imageData.create.initial.html ]]] -->
<p>Canvas test: 2d.imageData.create.initial - bug 433004</p>
<!-- Testing: createImageData() returns transparent black data of the right size -->
<canvas id="c255" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_imageData_create_initial() {
var canvas = document.getElementById('c255');
var ctx = canvas.getContext('2d');
var imgdata = ctx.createImageData(10, 20);
ok(imgdata.data.length == imgdata.width*imgdata.height*4, "imgdata.data.length == imgdata.width*imgdata.height*4");
ok(imgdata.width < imgdata.height, "imgdata.width < imgdata.height");
ok(imgdata.width > 0, "imgdata.width > 0");
var isTransparentBlack = true;
for (var i = 0; i < imgdata.data.length; ++i)
if (imgdata.data[i] !== 0)
isTransparentBlack = false;
ok(isTransparentBlack, "isTransparentBlack");
}
</script>
<!-- [[[ test_2d.imageData.create1.initial.html ]]] -->
<p>Canvas test: 2d.imageData.create1.initial - bug 630040</p>
<!-- Testing: createImageData(imgdata) returns transparent black data of the right size -->
<canvas id="c255a" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_imageData_create1_initial() {
var canvas = document.getElementById('c255a');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
var imgdata1 = ctx.getImageData(0, 0, 10, 20);
var imgdata2 = ctx.createImageData(imgdata1);
ok(imgdata2.data.length == imgdata1.data.length, "imgdata2.data.length == imgdata1.data.length");
ok(imgdata2.width == imgdata1.width, "imgdata2.width == imgdata1.width");
ok(imgdata2.height == imgdata1.height, "imgdata2.height == imgdata1.height");
var isTransparentBlack = true;
for (var i = 0; i < imgdata2.data.length; ++i)
if (imgdata2.data[i] !== 0)
isTransparentBlack = false;
ok(isTransparentBlack, "isTransparentBlack");
}
</script>
<!-- [[[ test_2d.imageData.create.large.html ]]] -->
<p>Canvas test: 2d.imageData.create.large - bug 433004</p>
<!-- Testing: createImageData() works for sizes much larger than the canvas -->
<canvas id="c256" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_imageData_create_large() {
var canvas = document.getElementById('c256');
var ctx = canvas.getContext('2d');
var _thrown_outer = false;
var imgdata = ctx.createImageData(1000, 2000);
ok(imgdata.data.length == imgdata.width*imgdata.height*4, "imgdata.data.length == imgdata.width*imgdata.height*4");
ok(imgdata.width < imgdata.height, "imgdata.width < imgdata.height");
ok(imgdata.width > 0, "imgdata.width > 0");
var isTransparentBlack = true;
for (var i = 0; i < imgdata.data.length; i += 7813) // check ~1024 points (assuming normal scaling)
if (imgdata.data[i] !== 0)
isTransparentBlack = false;
ok(isTransparentBlack, "isTransparentBlack");
}
</script>
<!-- [[[ test_2d.imageData.create.negative.html ]]] -->
<p>Canvas test: 2d.imageData.create.negative - bug 433004</p>
<!-- Testing: createImageData() takes the absolute magnitude of the size arguments -->
<canvas id="c257" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_imageData_create_negative() {
var canvas = document.getElementById('c257');
var ctx = canvas.getContext('2d');
var _thrown_outer = false;
try {
var imgdata1 = ctx.createImageData(10, 20);
var imgdata2 = ctx.createImageData(-10, 20);
var imgdata3 = ctx.createImageData(10, -20);
var imgdata4 = ctx.createImageData(-10, -20);
ok(imgdata1.data.length == imgdata2.data.length, "imgdata1.data.length == imgdata2.data.length");
ok(imgdata2.data.length == imgdata3.data.length, "imgdata2.data.length == imgdata3.data.length");
ok(imgdata3.data.length == imgdata4.data.length, "imgdata3.data.length == imgdata4.data.length");
} catch (e) {
_thrown_outer = true;
}
ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
}
</script>
<!-- [[[ test_2d.imageData.create.nonfinite.html ]]] -->
<p>Canvas test: 2d.imageData.create.nonfinite - bug 433004</p>
<!-- Testing: createImageData() throws NOT_SUPPORTED_ERR if arguments are not finite -->
<canvas id="c258" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_imageData_create_nonfinite() {
var canvas = document.getElementById('c258');
var ctx = canvas.getContext('2d');
var _thrown = undefined; try {
ctx.createImageData(Infinity, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createImageData(-Infinity, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createImageData(NaN, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createImageData(10, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createImageData(10, -Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createImageData(10, NaN);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createImageData(Infinity, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createImageData({valueOf:() => Infinity}, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createImageData({valueOf:() => -Infinity}, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createImageData({valueOf:() => NaN}, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createImageData(10, {valueOf:() => Infinity});
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createImageData(10, {valueOf:() => -Infinity});
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createImageData(10, {valueOf:() => NaN});
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.createImageData({valueOf:() => Infinity}, {valueOf:() => Infinity});
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
}
</script>
<!-- [[[ test_2d.imageData.create.round.html ]]] -->
<p>Canvas test: 2d.imageData.create.round - bug 433004</p>
<!-- Testing: createImageData(w, h) is rounded the same as getImageData(0, 0, w, h) -->
<canvas id="c259" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_imageData_create_round() {
var canvas = document.getElementById('c259');
var ctx = canvas.getContext('2d');
var _thrown_outer = false;
var imgdata1 = ctx.createImageData(10.01, 10.99);
var imgdata2 = ctx.getImageData(0, 0, 10.01, 10.99);
is(imgdata1.width, imgdata2.width, "imgdata1.width == imgdata2.width");
is(imgdata1.height, imgdata2.height, "imgdata1.height == imgdata2.height");
}
</script>
<!-- [[[ test_2d.imageData.create.tiny.html ]]] -->
<p>Canvas test: 2d.imageData.create.tiny - bug 433004</p>
<!-- Testing: createImageData() works for sizes smaller than one pixel -->
<canvas id="c260" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_imageData_create_tiny() {
var canvas = document.getElementById('c260');
var ctx = canvas.getContext('2d');
var _thrown_outer = false;
try {
var imgdata = ctx.createImageData(0.0001, 0.0001);
} catch (e) {
_thrown_outer = true;
}
ok(_thrown_outer, ctx.canvas.id + ' should throw exception');
}
</script>
<!-- [[[ test_2d.imageData.create.type.html ]]] -->
<p>Canvas test: 2d.imageData.create.type - bug 433004</p>
<!-- Testing: createImageData() returns an ImageData object containing a Uint8ClampedArray object -->
<canvas id="c261" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_imageData_create_type() {
var canvas = document.getElementById('c261');
var ctx = canvas.getContext('2d');
ok(window.ImageData !== undefined, "window.ImageData !== undefined");
ok(window.Uint8ClampedArray !== undefined, "window.Uint8ClampedArray !== undefined");
window.ImageData.prototype.thisImplementsImageData = true;
window.Uint8ClampedArray.prototype.thisImplementsUint8ClampedArray = true;
var imgdata = ctx.createImageData(1, 1);
ok(imgdata.thisImplementsImageData, "imgdata.thisImplementsImageData");
ok(imgdata.data.thisImplementsUint8ClampedArray, "imgdata.data.thisImplementsUint8ClampedArray");
}
</script>
<!-- [[[ test_2d.imageData.create1.type.html ]]] -->
<p>Canvas test: 2d.imageData.create1.type - bug 630040</p>
<!-- Testing: createImageData(imgdata) returns an ImageData object containing a Uint8ClampedArray object -->
<canvas id="c261a" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_imageData_create1_type() {
var canvas = document.getElementById('c261a');
var ctx = canvas.getContext('2d');
ok(window.ImageData !== undefined, "window.ImageData !== undefined");
ok(window.Uint8ClampedArray !== undefined, "window.Uint8ClampedArray !== undefined");
window.ImageData.prototype.thisImplementsImageData = true;
window.Uint8ClampedArray.prototype.thisImplementsUint8ClampedArray = true;
var imgdata = ctx.createImageData(ctx.createImageData(1, 1));
ok(imgdata.thisImplementsImageData, "imgdata.thisImplementsImageData");
ok(imgdata.data.thisImplementsUint8ClampedArray, "imgdata.data.thisImplementsUint8ClampedArray");
}
</script>
<!-- [[[ test_2d.imageData.create.zero.html ]]] -->
<p>Canvas test: 2d.imageData.create.zero - bug 433004</p>
<!-- Testing: createImageData() throws INDEX_SIZE_ERR if size is zero -->
<canvas id="c262" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_imageData_create_zero() {
var canvas = document.getElementById('c262');
var ctx = canvas.getContext('2d');
var _thrown = undefined; try {
ctx.createImageData(10, 0);
} catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError");
var _thrown = undefined; try {
ctx.createImageData(0, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError");
var _thrown = undefined; try {
ctx.createImageData(0, 0);
} catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError");
}
</script>
<!-- [[[ test_2d.imageData.create1.zero.html ]]] -->
<p>Canvas test: 2d.imageData.create1.zero - bug 630040</p>
<!-- Testing: createImageData(null) throws TypeError -->
<canvas id="c262a" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_imageData_create1_zero() {
var canvas = document.getElementById('c262a');
var ctx = canvas.getContext('2d');
var _thrown = undefined; try {
ctx.createImageData(null);
} catch (e) { _thrown = e };
ok(_thrown && _thrown.name == "TypeError", "should throw TypeError");
}
</script>
<!-- [[[ test_2d.imageData.get.basic.html ]]] -->
<p>Canvas test: 2d.imageData.get.basic</p>
<!-- Testing: getImageData() exists and returns something -->
<canvas id="c263" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_imageData_get_basic() {
var canvas = document.getElementById('c263');
var ctx = canvas.getContext('2d');
ok(ctx.getImageData(0, 0, 100, 50) !== null, "ctx.getImageData(0, 0, 100, 50) !== null");
}
</script>
<!-- [[[ test_2d.imageData.get.clamp.html ]]] -->
<p>Canvas test: 2d.imageData.get.clamp</p>
<!-- Testing: getImageData() clamps colours to the range [0, 255] -->
<canvas id="c264" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_imageData_get_clamp() {
var canvas = document.getElementById('c264');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgb(-100, -200, -300)';
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = 'rgb(256, 300, 400)';
ctx.fillRect(20, 10, 60, 10);
var imgdata1 = ctx.getImageData(10, 5, 1, 1);
ok(imgdata1.data[0] === 0, "imgdata1.data[\""+(0)+"\"] === 0");
ok(imgdata1.data[1] === 0, "imgdata1.data[\""+(1)+"\"] === 0");
ok(imgdata1.data[2] === 0, "imgdata1.data[\""+(2)+"\"] === 0");
var imgdata2 = ctx.getImageData(30, 15, 1, 1);
ok(imgdata2.data[0] === 255, "imgdata2.data[\""+(0)+"\"] === 255");
ok(imgdata2.data[1] === 255, "imgdata2.data[\""+(1)+"\"] === 255");
ok(imgdata2.data[2] === 255, "imgdata2.data[\""+(2)+"\"] === 255");
}
</script>
<!-- [[[ test_2d.imageData.get.nonfinite.html ]]] -->
<p>Canvas test: 2d.imageData.get.nonfinite</p>
<!-- Testing: getImageData() throws NOT_SUPPORTED_ERR if arguments are not finite -->
<canvas id="c265" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
// eslint-disable-next-line complexity
function test_2d_imageData_get_nonfinite() {
var canvas = document.getElementById('c265');
var ctx = canvas.getContext('2d');
var _thrown = undefined; try {
ctx.getImageData(Infinity, 10, 10, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.getImageData(-Infinity, 10, 10, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.getImageData(NaN, 10, 10, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.getImageData(10, Infinity, 10, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.getImageData(10, -Infinity, 10, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.getImageData(10, NaN, 10, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.getImageData(10, 10, Infinity, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.getImageData(10, 10, -Infinity, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.getImageData(10, 10, NaN, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.getImageData(10, 10, 10, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.getImageData(10, 10, 10, -Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.getImageData(10, 10, 10, NaN);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.getImageData(Infinity, Infinity, 10, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.getImageData(Infinity, Infinity, Infinity, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.getImageData(Infinity, Infinity, Infinity, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.getImageData(Infinity, Infinity, 10, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.getImageData(Infinity, 10, Infinity, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.getImageData(Infinity, 10, Infinity, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.getImageData(Infinity, 10, 10, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.getImageData(10, Infinity, Infinity, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.getImageData(10, Infinity, Infinity, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.getImageData(10, Infinity, 10, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.getImageData(10, 10, Infinity, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.getImageData({valueOf:() => Infinity}, 10, 10, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.getImageData({valueOf:() => -Infinity}, 10, 10, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.getImageData({valueOf:() => NaN}, 10, 10, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.getImageData(10, {valueOf:() => Infinity}, 10, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.getImageData(10, {valueOf:() => -Infinity}, 10, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.getImageData(10, {valueOf:() => NaN}, 10, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.getImageData(10, 10, {valueOf:() => Infinity}, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.getImageData(10, 10, {valueOf:() => -Infinity}, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.getImageData(10, 10, {valueOf:() => NaN}, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.getImageData(10, 10, 10, {valueOf:() => Infinity});
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.getImageData(10, 10, 10, {valueOf:() => -Infinity});
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.getImageData(10, 10, 10, {valueOf:() => NaN});
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.getImageData({valueOf:() => Infinity}, {valueOf:() => Infinity}, 10, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.getImageData({valueOf:() => Infinity}, {valueOf:() => Infinity}, {valueOf:() => Infinity}, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.getImageData({valueOf:() => Infinity}, {valueOf:() => Infinity}, {valueOf:() => Infinity}, {valueOf:() => Infinity});
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.getImageData({valueOf:() => Infinity}, {valueOf:() => Infinity}, 10, {valueOf:() => Infinity});
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.getImageData({valueOf:() => Infinity}, 10, {valueOf:() => Infinity}, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.getImageData({valueOf:() => Infinity}, 10, {valueOf:() => Infinity}, {valueOf:() => Infinity});
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.getImageData({valueOf:() => Infinity}, 10, 10, {valueOf:() => Infinity});
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.getImageData(10, {valueOf:() => Infinity}, {valueOf:() => Infinity}, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.getImageData(10, {valueOf:() => Infinity}, {valueOf:() => Infinity}, {valueOf:() => Infinity});
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.getImageData(10, {valueOf:() => Infinity}, 10, {valueOf:() => Infinity});
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.getImageData(10, 10, {valueOf:() => Infinity}, {valueOf:() => Infinity});
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
}
</script>
<!-- [[[ test_2d.imageData.get.nonpremul.html ]]] -->
<p>Canvas test: 2d.imageData.get.nonpremul</p>
<!-- Testing: getImageData() returns non-premultiplied colours -->
<canvas id="c266" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_imageData_get_nonpremul() {
var canvas = document.getElementById('c266');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
var imgdata = ctx.getImageData(10, 10, 10, 10);
ok(imgdata.data[0] > 200, "imgdata.data[\""+(0)+"\"] > 200");
ok(imgdata.data[1] > 200, "imgdata.data[\""+(1)+"\"] > 200");
ok(imgdata.data[2] > 200, "imgdata.data[\""+(2)+"\"] > 200");
ok(imgdata.data[3] > 100, "imgdata.data[\""+(3)+"\"] > 100");
ok(imgdata.data[3] < 200, "imgdata.data[\""+(3)+"\"] < 200");
}
</script>
<!-- [[[ test_2d.imageData.get.order.alpha.html ]]] -->
<p>Canvas test: 2d.imageData.get.order.alpha</p>
<!-- Testing: getImageData() returns A in the fourth component -->
<canvas id="c267" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_imageData_get_order_alpha() {
var canvas = document.getElementById('c267');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
ctx.fillRect(0, 0, 100, 50);
var imgdata = ctx.getImageData(0, 0, 10, 10);
ok(imgdata.data[3] < 200, "imgdata.data[\""+(3)+"\"] < 200");
ok(imgdata.data[3] > 100, "imgdata.data[\""+(3)+"\"] > 100");
}
</script>
<!-- [[[ test_2d.imageData.get.order.cols.html ]]] -->
<p>Canvas test: 2d.imageData.get.order.cols</p>
<!-- Testing: getImageData() returns leftmost columns first -->
<canvas id="c268" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_imageData_get_order_cols() {
var canvas = document.getElementById('c268');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#fff';
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, 2, 50);
var imgdata = ctx.getImageData(0, 0, 10, 10);
ok(imgdata.data[0] === 0, "imgdata.data[\""+(0)+"\"] === 0");
ok(imgdata.data[Math.round(imgdata.width/2*4)] === 255, "imgdata.data[Math.round(imgdata.width/2*4)] === 255");
ok(imgdata.data[Math.round((imgdata.height/2)*imgdata.width*4)] === 0, "imgdata.data[Math.round((imgdata.height/2)*imgdata.width*4)] === 0");
}
</script>
<!-- [[[ test_2d.imageData.get.order.rgb.html ]]] -->
<p>Canvas test: 2d.imageData.get.order.rgb</p>
<!-- Testing: getImageData() returns R then G then B -->
<canvas id="c269" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_imageData_get_order_rgb() {
var canvas = document.getElementById('c269');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#48c';
ctx.fillRect(0, 0, 100, 50);
var imgdata = ctx.getImageData(0, 0, 10, 10);
ok(imgdata.data[0] === 0x44, "imgdata.data[\""+(0)+"\"] === 0x44");
ok(imgdata.data[1] === 0x88, "imgdata.data[\""+(1)+"\"] === 0x88");
ok(imgdata.data[2] === 0xCC, "imgdata.data[\""+(2)+"\"] === 0xCC");
ok(imgdata.data[3] === 255, "imgdata.data[\""+(3)+"\"] === 255");
}
</script>
<!-- [[[ test_2d.imageData.get.order.rows.html ]]] -->
<p>Canvas test: 2d.imageData.get.order.rows</p>
<!-- Testing: getImageData() returns topmost rows first -->
<canvas id="c270" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_imageData_get_order_rows() {
var canvas = document.getElementById('c270');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#fff';
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, 100, 2);
var imgdata = ctx.getImageData(0, 0, 10, 10);
ok(imgdata.data[0] === 0, "imgdata.data[\""+(0)+"\"] === 0");
ok(imgdata.data[Math.floor(imgdata.width/2*4)] === 0, "imgdata.data[Math.floor(imgdata.width/2*4)] === 0");
ok(imgdata.data[(imgdata.height/2)*imgdata.width*4] === 255, "imgdata.data[(imgdata.height/2)*imgdata.width*4] === 255");
}
</script>
<!-- [[[ test_2d.imageData.get.range.html ]]] -->
<p>Canvas test: 2d.imageData.get.range</p>
<!-- Testing: getImageData() returns values in the range [0, 255] -->
<canvas id="c271" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_imageData_get_range() {
var canvas = document.getElementById('c271');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = '#fff';
ctx.fillRect(20, 10, 60, 10);
var imgdata1 = ctx.getImageData(10, 5, 1, 1);
ok(imgdata1.data[0] === 0, "imgdata1.data[\""+(0)+"\"] === 0");
var imgdata2 = ctx.getImageData(30, 15, 1, 1);
ok(imgdata2.data[0] === 255, "imgdata2.data[\""+(0)+"\"] === 255");
}
</script>
<!-- [[[ test_2d.imageData.get.source.negative.html ]]] -->
<p>Canvas test: 2d.imageData.get.source.negative</p>
<!-- Testing: getImageData() works with negative width and height -->
<canvas id="c272" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_imageData_get_source_negative() {
var canvas = document.getElementById('c272');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = '#fff';
ctx.fillRect(20, 10, 60, 10);
var imgdata1 = ctx.getImageData(85, 25, -10, -10);
ok(imgdata1.data[0] === 255, "imgdata1.data[\""+(0)+"\"] === 255");
ok(imgdata1.data[1] === 255, "imgdata1.data[\""+(1)+"\"] === 255");
ok(imgdata1.data[2] === 255, "imgdata1.data[\""+(2)+"\"] === 255");
ok(imgdata1.data[3] === 255, "imgdata1.data[\""+(3)+"\"] === 255");
ok(imgdata1.data[imgdata1.data.length-4+0] === 0, "imgdata1.data[imgdata1.data.length-4+0] === 0");
ok(imgdata1.data[imgdata1.data.length-4+1] === 0, "imgdata1.data[imgdata1.data.length-4+1] === 0");
ok(imgdata1.data[imgdata1.data.length-4+2] === 0, "imgdata1.data[imgdata1.data.length-4+2] === 0");
ok(imgdata1.data[imgdata1.data.length-4+3] === 255, "imgdata1.data[imgdata1.data.length-4+3] === 255");
var imgdata2 = ctx.getImageData(0, 0, -1, -1);
ok(imgdata2.data[0] === 0, "imgdata2.data[\""+(0)+"\"] === 0");
ok(imgdata2.data[1] === 0, "imgdata2.data[\""+(1)+"\"] === 0");
ok(imgdata2.data[2] === 0, "imgdata2.data[\""+(2)+"\"] === 0");
ok(imgdata2.data[3] === 0, "imgdata2.data[\""+(3)+"\"] === 0");
}
</script>
<!-- [[[ test_2d.imageData.get.source.outside.html ]]] -->
<p>Canvas test: 2d.imageData.get.source.outside</p>
<!-- Testing: getImageData() returns transparent black outside the canvas -->
<canvas id="c273" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_imageData_get_source_outside() {
var canvas = document.getElementById('c273');
var ctx = canvas.getContext('2d');
var _thrown_outer = false;
try {
ctx.fillStyle = '#08f';
ctx.fillRect(0, 0, 100, 50);
var imgdata1 = ctx.getImageData(-10, 5, 1, 1);
ok(imgdata1.data[0] === 0, "imgdata1.data[\""+(0)+"\"] === 0");
ok(imgdata1.data[1] === 0, "imgdata1.data[\""+(1)+"\"] === 0");
ok(imgdata1.data[2] === 0, "imgdata1.data[\""+(2)+"\"] === 0");
ok(imgdata1.data[3] === 0, "imgdata1.data[\""+(3)+"\"] === 0");
var imgdata2 = ctx.getImageData(10, -5, 1, 1);
ok(imgdata2.data[0] === 0, "imgdata2.data[\""+(0)+"\"] === 0");
ok(imgdata2.data[1] === 0, "imgdata2.data[\""+(1)+"\"] === 0");
ok(imgdata2.data[2] === 0, "imgdata2.data[\""+(2)+"\"] === 0");
ok(imgdata2.data[3] === 0, "imgdata2.data[\""+(3)+"\"] === 0");
var imgdata3 = ctx.getImageData(200, 5, 1, 1);
ok(imgdata3.data[0] === 0, "imgdata3.data[\""+(0)+"\"] === 0");
ok(imgdata3.data[1] === 0, "imgdata3.data[\""+(1)+"\"] === 0");
ok(imgdata3.data[2] === 0, "imgdata3.data[\""+(2)+"\"] === 0");
ok(imgdata3.data[3] === 0, "imgdata3.data[\""+(3)+"\"] === 0");
var imgdata4 = ctx.getImageData(10, 60, 1, 1);
ok(imgdata4.data[0] === 0, "imgdata4.data[\""+(0)+"\"] === 0");
ok(imgdata4.data[1] === 0, "imgdata4.data[\""+(1)+"\"] === 0");
ok(imgdata4.data[2] === 0, "imgdata4.data[\""+(2)+"\"] === 0");
ok(imgdata4.data[3] === 0, "imgdata4.data[\""+(3)+"\"] === 0");
var imgdata5 = ctx.getImageData(100, 10, 1, 1);
ok(imgdata5.data[0] === 0, "imgdata5.data[\""+(0)+"\"] === 0");
ok(imgdata5.data[1] === 0, "imgdata5.data[\""+(1)+"\"] === 0");
ok(imgdata5.data[2] === 0, "imgdata5.data[\""+(2)+"\"] === 0");
ok(imgdata5.data[3] === 0, "imgdata5.data[\""+(3)+"\"] === 0");
var imgdata6 = ctx.getImageData(0, 10, 1, 1);
ok(imgdata6.data[0] === 0, "imgdata6.data[\""+(0)+"\"] === 0");
ok(imgdata6.data[1] === 136, "imgdata6.data[\""+(1)+"\"] === 136");
ok(imgdata6.data[2] === 255, "imgdata6.data[\""+(2)+"\"] === 255");
ok(imgdata6.data[3] === 255, "imgdata6.data[\""+(3)+"\"] === 255");
var imgdata7 = ctx.getImageData(-10, 10, 20, 20);
ok(imgdata7.data[ 0*4+0] === 0, "imgdata7.data[ 0*4+0] === 0");
ok(imgdata7.data[ 0*4+1] === 0, "imgdata7.data[ 0*4+1] === 0");
ok(imgdata7.data[ 0*4+2] === 0, "imgdata7.data[ 0*4+2] === 0");
ok(imgdata7.data[ 0*4+3] === 0, "imgdata7.data[ 0*4+3] === 0");
ok(imgdata7.data[ 9*4+0] === 0, "imgdata7.data[ 9*4+0] === 0");
ok(imgdata7.data[ 9*4+1] === 0, "imgdata7.data[ 9*4+1] === 0");
ok(imgdata7.data[ 9*4+2] === 0, "imgdata7.data[ 9*4+2] === 0");
ok(imgdata7.data[ 9*4+3] === 0, "imgdata7.data[ 9*4+3] === 0");
ok(imgdata7.data[10*4+0] === 0, "imgdata7.data[10*4+0] === 0");
ok(imgdata7.data[10*4+1] === 136, "imgdata7.data[10*4+1] === 136");
ok(imgdata7.data[10*4+2] === 255, "imgdata7.data[10*4+2] === 255");
ok(imgdata7.data[10*4+3] === 255, "imgdata7.data[10*4+3] === 255");
ok(imgdata7.data[19*4+0] === 0, "imgdata7.data[19*4+0] === 0");
ok(imgdata7.data[19*4+1] === 136, "imgdata7.data[19*4+1] === 136");
ok(imgdata7.data[19*4+2] === 255, "imgdata7.data[19*4+2] === 255");
ok(imgdata7.data[19*4+3] === 255, "imgdata7.data[19*4+3] === 255");
ok(imgdata7.data[20*4+0] === 0, "imgdata7.data[20*4+0] === 0");
ok(imgdata7.data[20*4+1] === 0, "imgdata7.data[20*4+1] === 0");
ok(imgdata7.data[20*4+2] === 0, "imgdata7.data[20*4+2] === 0");
ok(imgdata7.data[20*4+3] === 0, "imgdata7.data[20*4+3] === 0");
} catch (e) {
_thrown_outer = true;
}
ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
}
</script>
<!-- [[[ test_2d.imageData.get.source.size.html ]]] -->
<p>Canvas test: 2d.imageData.get.source.size</p>
<!-- Testing: getImageData() returns bigger ImageData for bigger source rectangle -->
<canvas id="c274" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_imageData_get_source_size() {
var canvas = document.getElementById('c274');
var ctx = canvas.getContext('2d');
var imgdata1 = ctx.getImageData(0, 0, 10, 10);
var imgdata2 = ctx.getImageData(0, 0, 20, 20);
ok(imgdata2.width > imgdata1.width, "imgdata2.width > imgdata1.width");
ok(imgdata2.height > imgdata1.height, "imgdata2.height > imgdata1.height");
}
</script>
<!-- [[[ test_2d.imageData.get.tiny.html ]]] -->
<p>Canvas test: 2d.imageData.get.tiny</p>
<canvas id="c275" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_imageData_get_tiny() {
var canvas = document.getElementById('c275');
var ctx = canvas.getContext('2d');
var _thrown_outer = false;
try {
var imgdata = ctx.getImageData(0, 0, 0.0001, 0.0001);
} catch (e) {
_thrown_outer = true;
}
ok(_thrown_outer, ctx.canvas.id + ' should throw');
}
</script>
<!-- [[[ test_2d.imageData.get.type.html ]]] -->
<p>Canvas test: 2d.imageData.get.type</p>
<!-- Testing: getImageData() returns an ImageData object containing a Uint8ClampedArray object -->
<canvas id="c276" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_imageData_get_type() {
var canvas = document.getElementById('c276');
var ctx = canvas.getContext('2d');
ok(window.ImageData !== undefined, "window.ImageData !== undefined");
ok(window.Uint8ClampedArray !== undefined, "window.Uint8ClampedArray !== undefined");
window.ImageData.prototype.thisImplementsImageData = true;
window.Uint8ClampedArray.prototype.thisImplementsUint8ClampedArray = true;
var imgdata = ctx.getImageData(0, 0, 1, 1);
ok(imgdata.thisImplementsImageData, "imgdata.thisImplementsImageData");
ok(imgdata.data.thisImplementsUint8ClampedArray, "imgdata.data.thisImplementsUint8ClampedArray");
}
</script>
<!-- [[[ test_2d.imageData.get.unaffected.html ]]] -->
<p>Canvas test: 2d.imageData.get.unaffected</p>
<!-- Testing: getImageData() is not affected by context state -->
<canvas id="c277" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_imageData_get_unaffected() {
var canvas = document.getElementById('c277');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 50, 50)
ctx.fillStyle = '#f00';
ctx.fillRect(50, 0, 50, 50)
ctx.save();
ctx.translate(50, 0);
ctx.globalAlpha = 0.1;
ctx.globalCompositeOperation = 'destination-atop';
ctx.shadowColor = '#f00';
ctx.rect(0, 0, 5, 5);
ctx.clip();
var imgdata = ctx.getImageData(0, 0, 50, 50);
ctx.restore();
ctx.putImageData(imgdata, 50, 0);
isPixel(ctx, 25,25, 0,255,0,255, 2);
isPixel(ctx, 75,25, 0,255,0,255, 2);
}
</script>
<!-- [[[ test_2d.imageData.get.zero.html ]]] -->
<p>Canvas test: 2d.imageData.get.zero</p>
<!-- Testing: getImageData() throws INDEX_SIZE_ERR if size is zero -->
<canvas id="c278" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_imageData_get_zero() {
var canvas = document.getElementById('c278');
var ctx = canvas.getContext('2d');
var _thrown = undefined; try {
ctx.getImageData(1, 1, 10, 0);
} catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError");
var _thrown = undefined; try {
ctx.getImageData(1, 1, 0, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError");
var _thrown = undefined; try {
ctx.getImageData(1, 1, 0, 0);
} catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError");
}
</script>
<!-- [[[ test_2d.imageData.object.clamp.html ]]] -->
<p>Canvas test: 2d.imageData.object.clamp</p>
<!-- Testing: ImageData.data clamps numbers to [0, 255] -->
<canvas id="c279" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_imageData_object_clamp() {
var canvas = document.getElementById('c279');
var ctx = canvas.getContext('2d');
var imgdata = ctx.getImageData(0, 0, 10, 10);
imgdata.data[0] = 100;
imgdata.data[0] = 300;
ok(imgdata.data[0] === 255, "imgdata.data[\""+(0)+"\"] === 255");
imgdata.data[0] = 100;
imgdata.data[0] = -100;
ok(imgdata.data[0] === 0, "imgdata.data[\""+(0)+"\"] === 0");
imgdata.data[0] = 100;
imgdata.data[0] = 200+Math.pow(2, 32);
ok(imgdata.data[0] === 255, "imgdata.data[\""+(0)+"\"] === 255");
imgdata.data[0] = 100;
imgdata.data[0] = -200-Math.pow(2, 32);
ok(imgdata.data[0] === 0, "imgdata.data[\""+(0)+"\"] === 0");
imgdata.data[0] = 100;
imgdata.data[0] = Math.pow(10, 39);
ok(imgdata.data[0] === 255, "imgdata.data[\""+(0)+"\"] === 255");
imgdata.data[0] = 100;
imgdata.data[0] = -Math.pow(10, 39);
ok(imgdata.data[0] === 0, "imgdata.data[\""+(0)+"\"] === 0");
imgdata.data[0] = 100;
imgdata.data[0] = -Infinity;
ok(imgdata.data[0] === 0, "imgdata.data[\""+(0)+"\"] === 0");
imgdata.data[0] = 100;
imgdata.data[0] = Infinity;
ok(imgdata.data[0] === 255, "imgdata.data[\""+(0)+"\"] === 255");
}
</script>
<!-- [[[ test_2d.imageData.object.ctor.html ]]] -->
<p>Canvas test: 2d.imageData.object.ctor</p>
<!-- Testing: ImageData does not have a usable constructor -->
<canvas id="c280" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_imageData_object_ctor() {
var canvas = document.getElementById('c280');
var ctx = canvas.getContext('2d');
ok(window.ImageData !== undefined, "window.ImageData !== undefined");
var _thrown_outer = false;
try {
new window.ImageData(1,1);
} catch (e) {
_thrown_outer = true;
}
ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
}
</script>
<!-- [[[ test_2d.imageData.object.nan.html ]]] -->
<p>Canvas test: 2d.imageData.object.nan</p>
<!-- Testing: ImageData.data converts NaN to 0 -->
<canvas id="c281" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_imageData_object_nan() {
var canvas = document.getElementById('c281');
var ctx = canvas.getContext('2d');
var imgdata = ctx.getImageData(0, 0, 10, 10);
imgdata.data[0] = 100;
imgdata.data[0] = NaN;
ok(imgdata.data[0] === 0, "imgdata.data[\""+(0)+"\"] === 0");
imgdata.data[0] = 100;
imgdata.data[0] = "cheese";
ok(imgdata.data[0] === 0, "imgdata.data[\""+(0)+"\"] === 0");
}
</script>
<!-- [[[ test_2d.imageData.object.properties.html ]]] -->
<p>Canvas test: 2d.imageData.object.properties</p>
<!-- Testing: ImageData objects have the right properties -->
<canvas id="c282" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_imageData_object_properties() {
var canvas = document.getElementById('c282');
var ctx = canvas.getContext('2d');
var imgdata = ctx.getImageData(0, 0, 10, 10);
ok(typeof(imgdata.width) == 'number', "typeof(imgdata.width) == 'number'");
ok(typeof(imgdata.height) == 'number', "typeof(imgdata.height) == 'number'");
ok(typeof(imgdata.data) == 'object', "typeof(imgdata.data) == 'object'");
}
</script>
<!-- [[[ test_2d.imageData.object.readonly.html ]]] -->
<p>Canvas test: 2d.imageData.object.readonly</p>
<!-- Testing: ImageData objects properties are read-only -->
<canvas id="c283" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_imageData_object_readonly() {
var canvas = document.getElementById('c283');
var ctx = canvas.getContext('2d');
var imgdata = ctx.getImageData(0, 0, 10, 10);
var w = imgdata.width;
var h = imgdata.height;
var d = imgdata.data;
imgdata.width = 123;
imgdata.height = 123;
imgdata.data = [100,100,100,100];
ok(imgdata.width === w, "imgdata.width === w");
ok(imgdata.height === h, "imgdata.height === h");
ok(imgdata.data === d, "imgdata.data === d");
ok(imgdata.data[0] === 0, "imgdata.data[\""+(0)+"\"] === 0");
ok(imgdata.data[1] === 0, "imgdata.data[\""+(1)+"\"] === 0");
ok(imgdata.data[2] === 0, "imgdata.data[\""+(2)+"\"] === 0");
ok(imgdata.data[3] === 0, "imgdata.data[\""+(3)+"\"] === 0");
}
</script>
<!-- [[[ test_2d.imageData.object.round.html ]]] -->
<p>Canvas test: 2d.imageData.object.round</p>
<!-- Testing: ImageData.data rounds numbers with convertToIntegerTiesToEven -->
<canvas id="c284" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_imageData_object_round() {
var canvas = document.getElementById('c284');
var ctx = canvas.getContext('2d');
var imgdata = ctx.getImageData(0, 0, 10, 10);
imgdata.data[0] = 0.499;
ok(imgdata.data[0] === 0, "imgdata.data[\""+(0)+"\"] === 0");
imgdata.data[0] = 0.5;
ok(imgdata.data[0] === 0, "imgdata.data[\""+(0)+"\"] === 0");
imgdata.data[0] = 0.501;
ok(imgdata.data[0] === 1, "imgdata.data[\""+(0)+"\"] === 1");
imgdata.data[0] = 1.499;
ok(imgdata.data[0] === 1, "imgdata.data[\""+(0)+"\"] === 1");
imgdata.data[0] = 1.5;
ok(imgdata.data[0] === 2, "imgdata.data[\""+(0)+"\"] === 2");
imgdata.data[0] = 1.501;
ok(imgdata.data[0] === 2, "imgdata.data[\""+(0)+"\"] === 2");
imgdata.data[0] = 2.5;
ok(imgdata.data[0] === 2, "imgdata.data[\""+(0)+"\"] === 2");
imgdata.data[0] = 3.5;
ok(imgdata.data[0] === 4, "imgdata.data[\""+(0)+"\"] === 4");
imgdata.data[0] = 252.5;
ok(imgdata.data[0] === 252, "imgdata.data[\""+(0)+"\"] === 252");
imgdata.data[0] = 253.5;
ok(imgdata.data[0] === 254, "imgdata.data[\""+(0)+"\"] === 254");
imgdata.data[0] = 254.5;
ok(imgdata.data[0] === 254, "imgdata.data[\""+(0)+"\"] === 254");
}
</script>
<!-- [[[ test_2d.imageData.object.set.html ]]] -->
<p>Canvas test: 2d.imageData.object.set</p>
<!-- Testing: ImageData.data can be modified -->
<canvas id="c285" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_imageData_object_set() {
var canvas = document.getElementById('c285');
var ctx = canvas.getContext('2d');
var imgdata = ctx.getImageData(0, 0, 10, 10);
imgdata.data[0] = 100;
ok(imgdata.data[0] === 100, "imgdata.data[\""+(0)+"\"] === 100");
imgdata.data[0] = 200;
ok(imgdata.data[0] === 200, "imgdata.data[\""+(0)+"\"] === 200");
}
</script>
<!-- [[[ test_2d.imageData.object.string.html ]]] -->
<p>Canvas test: 2d.imageData.object.string</p>
<!-- Testing: ImageData.data converts strings to numbers with ToNumber -->
<canvas id="c286" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_imageData_object_string() {
var canvas = document.getElementById('c286');
var ctx = canvas.getContext('2d');
var imgdata = ctx.getImageData(0, 0, 10, 10);
imgdata.data[0] = 100;
imgdata.data[0] = "110";
ok(imgdata.data[0] === 110, "imgdata.data[\""+(0)+"\"] === 110");
imgdata.data[0] = 100;
imgdata.data[0] = "0x78";
ok(imgdata.data[0] === 120, "imgdata.data[\""+(0)+"\"] === 120");
imgdata.data[0] = 100;
imgdata.data[0] = " +130e0 ";
ok(imgdata.data[0] === 130, "imgdata.data[\""+(0)+"\"] === 130");
}
</script>
<!-- [[[ test_2d.imageData.object.undefined.html ]]] -->
<p>Canvas test: 2d.imageData.object.undefined</p>
<!-- Testing: ImageData.data converts undefined to 0 -->
<canvas id="c287" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_imageData_object_undefined() {
var canvas = document.getElementById('c287');
var ctx = canvas.getContext('2d');
var imgdata = ctx.getImageData(0, 0, 10, 10);
imgdata.data[0] = 100;
imgdata.data[0] = undefined;
ok(imgdata.data[0] === 0, "imgdata.data[\""+(0)+"\"] === 0");
}
</script>
<!-- [[[ test_2d.imageData.put.alpha.html ]]] -->
<p>Canvas test: 2d.imageData.put.alpha</p>
<!-- Testing: putImageData() puts non-solid image data correctly -->
<canvas id="c288" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_imageData_put_alpha() {
var canvas = document.getElementById('c288');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 255, 0, 0.25)';
ctx.fillRect(0, 0, 100, 50)
var imgdata = ctx.getImageData(0, 0, 100, 50);
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50)
ctx.putImageData(imgdata, 0, 0);
isPixel(ctx, 50,25, 0,255,0,64, 2);
}
</script>
<!-- [[[ test_2d.imageData.put.basic.html ]]] -->
<p>Canvas test: 2d.imageData.put.basic</p>
<!-- Testing: putImageData() puts image data from getImageData() onto the canvas -->
<canvas id="c289" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_imageData_put_basic() {
var canvas = document.getElementById('c289');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50)
var imgdata = ctx.getImageData(0, 0, 100, 50);
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50)
ctx.putImageData(imgdata, 0, 0);
isPixel(ctx, 50,25, 0,255,0,255, 2);
}
</script>
<!-- [[[ test_2d.imageData.put.clip.html ]]] -->
<p>Canvas test: 2d.imageData.put.clip - bug 433397</p>
<!-- Testing: putImageData() is not affected by clipping regions -->
<canvas id="c290" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_imageData_put_clip() {
var canvas = document.getElementById('c290');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50)
var imgdata = ctx.getImageData(0, 0, 100, 50);
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50)
ctx.beginPath();
ctx.rect(0, 0, 50, 50);
ctx.clip();
ctx.putImageData(imgdata, 0, 0);
isPixel(ctx, 25,25, 0,255,0,255, 2);
isPixel(ctx, 75,25, 0,255,0,255, 2);
}
</script>
<!-- [[[ test_2d.imageData.put.created.html ]]] -->
<p>Canvas test: 2d.imageData.put.created - bug 433004</p>
<!-- Testing: putImageData() puts image data from createImageData() onto the canvas -->
<canvas id="c291" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
// eslint-disable-next-line complexity
function test_2d_imageData_put_created() {
var canvas = document.getElementById('c291');
var ctx = canvas.getContext('2d');
var imgdata = ctx.createImageData(100, 50);
for (var i = 0; i < imgdata.data.length; i += 4) {
imgdata.data[i] = 0;
imgdata.data[i+1] = 255;
imgdata.data[i+2] = 0;
imgdata.data[i+3] = 255;
}
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50)
ctx.putImageData(imgdata, 0, 0);
isPixel(ctx, 50,25, 0,255,0,255, 2);
}
</script>
<!-- [[[ test_2d.imageData.put.cross.html ]]] -->
<p>Canvas test: 2d.imageData.put.cross</p>
<!-- Testing: putImageData() accepts image data got from a different canvas -->
<canvas id="c292" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_imageData_put_cross() {
var canvas = document.getElementById('c292');
var ctx = canvas.getContext('2d');
var canvas2 = document.createElement('canvas');
var ctx2 = canvas2.getContext('2d');
ctx2.fillStyle = '#0f0';
ctx2.fillRect(0, 0, 100, 50)
var imgdata = ctx2.getImageData(0, 0, 100, 50);
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50)
ctx.putImageData(imgdata, 0, 0);
isPixel(ctx, 50,25, 0,255,0,255, 2);
}
</script>
<!-- [[[ test_2d.imageData.put.dirty.negative.html ]]] -->
<p>Canvas test: 2d.imageData.put.dirty.negative</p>
<!-- Testing: putImageData() handles negative-sized dirty rectangles correctly -->
<canvas id="c293" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_imageData_put_dirty_negative() {
var canvas = document.getElementById('c293');
var ctx = canvas.getContext('2d');
var _thrown_outer = false;
try {
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50)
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 20, 20)
var imgdata = ctx.getImageData(0, 0, 100, 50);
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50)
ctx.fillStyle = '#f00';
ctx.fillRect(40, 20, 20, 20)
ctx.putImageData(imgdata, 40, 20, 20, 20, -20, -20);
isPixel(ctx, 50,25, 0,255,0,255, 2);
isPixel(ctx, 35,25, 0,255,0,255, 2);
isPixel(ctx, 65,25, 0,255,0,255, 2);
isPixel(ctx, 50,15, 0,255,0,255, 2);
isPixel(ctx, 50,45, 0,255,0,255, 2);
} catch (e) {
_thrown_outer = true;
}
ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
}
</script>
<!-- [[[ test_2d.imageData.put.dirty.outside.html ]]] -->
<p>Canvas test: 2d.imageData.put.dirty.outside</p>
<!-- Testing: putImageData() handles dirty rectangles outside the canvas correctly -->
<canvas id="c294" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_imageData_put_dirty_outside() {
var canvas = document.getElementById('c294');
var ctx = canvas.getContext('2d');
var _thrown_outer = false;
try {
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50)
var imgdata = ctx.getImageData(0, 0, 100, 50);
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50)
ctx.putImageData(imgdata, 100, 20, 20, 20, -20, -20);
ctx.putImageData(imgdata, 200, 200, 0, 0, 100, 50);
ctx.putImageData(imgdata, 40, 20, -30, -20, 30, 20);
ctx.putImageData(imgdata, -30, 20, 0, 0, 30, 20);
isPixel(ctx, 50,25, 0,255,0,255, 2);
isPixel(ctx, 98,15, 0,255,0,255, 2);
isPixel(ctx, 98,25, 0,255,0,255, 2);
isPixel(ctx, 98,45, 0,255,0,255, 2);
isPixel(ctx, 1,5, 0,255,0,255, 2);
isPixel(ctx, 1,25, 0,255,0,255, 2);
isPixel(ctx, 1,45, 0,255,0,255, 2);
} catch (e) {
_thrown_outer = true;
}
ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
}
</script>
<!-- [[[ test_2d.imageData.put.dirty.rect1.html ]]] -->
<p>Canvas test: 2d.imageData.put.dirty.rect1</p>
<!-- Testing: putImageData() only modifies areas inside the dirty rectangle, using width and height -->
<canvas id="c295" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_imageData_put_dirty_rect1() {
var canvas = document.getElementById('c295');
var ctx = canvas.getContext('2d');
var _thrown_outer = false;
try {
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50)
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 20, 20)
var imgdata = ctx.getImageData(0, 0, 100, 50);
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50)
ctx.fillStyle = '#f00';
ctx.fillRect(40, 20, 20, 20)
ctx.putImageData(imgdata, 40, 20, 0, 0, 20, 20);
isPixel(ctx, 50,25, 0,255,0,255, 2);
isPixel(ctx, 35,25, 0,255,0,255, 2);
isPixel(ctx, 65,25, 0,255,0,255, 2);
isPixel(ctx, 50,15, 0,255,0,255, 2);
isPixel(ctx, 50,45, 0,255,0,255, 2);
} catch (e) {
_thrown_outer = true;
}
ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
}
</script>
<!-- [[[ test_2d.imageData.put.dirty.rect2.html ]]] -->
<p>Canvas test: 2d.imageData.put.dirty.rect2</p>
<!-- Testing: putImageData() only modifies areas inside the dirty rectangle, using x and y -->
<canvas id="c296" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_imageData_put_dirty_rect2() {
var canvas = document.getElementById('c296');
var ctx = canvas.getContext('2d');
var _thrown_outer = false;
try {
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50)
ctx.fillStyle = '#0f0';
ctx.fillRect(60, 30, 20, 20)
var imgdata = ctx.getImageData(0, 0, 100, 50);
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50)
ctx.fillStyle = '#f00';
ctx.fillRect(40, 20, 20, 20)
ctx.putImageData(imgdata, -20, -10, 60, 30, 20, 20);
isPixel(ctx, 50,25, 0,255,0,255, 2);
isPixel(ctx, 35,25, 0,255,0,255, 2);
isPixel(ctx, 65,25, 0,255,0,255, 2);
isPixel(ctx, 50,15, 0,255,0,255, 2);
isPixel(ctx, 50,45, 0,255,0,255, 2);
} catch (e) {
_thrown_outer = true;
}
ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
}
</script>
<!-- [[[ test_2d.imageData.put.dirty.zero.html ]]] -->
<p>Canvas test: 2d.imageData.put.dirty.zero</p>
<!-- Testing: putImageData() with zero-sized dirty rectangle puts nothing -->
<canvas id="c297" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_imageData_put_dirty_zero() {
var canvas = document.getElementById('c297');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50)
var imgdata = ctx.getImageData(0, 0, 100, 50);
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50)
ctx.putImageData(imgdata, 0, 0, 0, 0, 0, 0);
isPixel(ctx, 50,25, 0,255,0,255, 2);
}
</script>
<!-- [[[ test_2d.imageData.put.modified.html ]]] -->
<p>Canvas test: 2d.imageData.put.modified</p>
<!-- Testing: putImageData() puts modified image data correctly -->
<canvas id="c298" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_imageData_put_modified() {
var canvas = document.getElementById('c298');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50)
ctx.fillStyle = '#f00';
ctx.fillRect(45, 20, 10, 10)
var imgdata = ctx.getImageData(45, 20, 10, 10);
for (var i = 0, len = imgdata.width*imgdata.height*4; i < len; i += 4)
{
imgdata.data[i] = 0;
imgdata.data[i+1] = 255;
}
ctx.putImageData(imgdata, 45, 20);
isPixel(ctx, 50,25, 0,255,0,255, 2);
}
</script>
<!-- [[[ test_2d.imageData.put.nonfinite.html ]]] -->
<p>Canvas test: 2d.imageData.put.nonfinite</p>
<!-- Testing: putImageData() throws NOT_SUPPORTED_ERR if arguments are not finite -->
<canvas id="c299" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
// eslint-disable-next-line complexity
function test_2d_imageData_put_nonfinite() {
var canvas = document.getElementById('c299');
var ctx = canvas.getContext('2d');
var imgdata = ctx.getImageData(0, 0, 10, 10);
var _thrown = undefined; try {
ctx.putImageData(imgdata, Infinity, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, -Infinity, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, NaN, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, 10, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, 10, -Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, 10, NaN);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, Infinity, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, Infinity, 10, 10, 10, 10, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, -Infinity, 10, 10, 10, 10, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, NaN, 10, 10, 10, 10, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, 10, Infinity, 10, 10, 10, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, 10, -Infinity, 10, 10, 10, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, 10, NaN, 10, 10, 10, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, 10, 10, Infinity, 10, 10, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, 10, 10, -Infinity, 10, 10, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, 10, 10, NaN, 10, 10, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, 10, 10, 10, Infinity, 10, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, 10, 10, 10, -Infinity, 10, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, 10, 10, 10, NaN, 10, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, 10, 10, 10, 10, Infinity, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, 10, 10, 10, 10, -Infinity, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, 10, 10, 10, 10, NaN, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, 10, 10, 10, 10, 10, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, 10, 10, 10, 10, 10, -Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, 10, 10, 10, 10, 10, NaN);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, Infinity, Infinity, 10, 10, 10, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, Infinity, Infinity, Infinity, 10, 10, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, Infinity, Infinity, Infinity, Infinity, 10, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, Infinity, Infinity, Infinity, Infinity, Infinity, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, Infinity, Infinity, Infinity, Infinity, 10, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, Infinity, Infinity, Infinity, 10, Infinity, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, Infinity, Infinity, Infinity, 10, Infinity, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, Infinity, Infinity, Infinity, 10, 10, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, Infinity, Infinity, 10, Infinity, 10, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, Infinity, Infinity, 10, Infinity, Infinity, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, Infinity, Infinity, 10, Infinity, Infinity, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, Infinity, Infinity, 10, Infinity, 10, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, Infinity, Infinity, 10, 10, Infinity, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, Infinity, Infinity, 10, 10, Infinity, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, Infinity, Infinity, 10, 10, 10, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, Infinity, 10, Infinity, 10, 10, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, Infinity, 10, Infinity, Infinity, 10, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, Infinity, 10, Infinity, Infinity, Infinity, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, Infinity, 10, Infinity, Infinity, Infinity, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, Infinity, 10, Infinity, Infinity, 10, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, Infinity, 10, Infinity, 10, Infinity, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, Infinity, 10, Infinity, 10, Infinity, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, Infinity, 10, Infinity, 10, 10, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, Infinity, 10, 10, Infinity, 10, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, Infinity, 10, 10, Infinity, Infinity, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, Infinity, 10, 10, Infinity, Infinity, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, Infinity, 10, 10, Infinity, 10, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, Infinity, 10, 10, 10, Infinity, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, Infinity, 10, 10, 10, Infinity, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, Infinity, 10, 10, 10, 10, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, 10, Infinity, Infinity, 10, 10, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, 10, Infinity, Infinity, Infinity, 10, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, 10, Infinity, Infinity, Infinity, Infinity, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, 10, Infinity, Infinity, Infinity, Infinity, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, 10, Infinity, Infinity, Infinity, 10, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, 10, Infinity, Infinity, 10, Infinity, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, 10, Infinity, Infinity, 10, Infinity, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, 10, Infinity, Infinity, 10, 10, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, 10, Infinity, 10, Infinity, 10, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, 10, Infinity, 10, Infinity, Infinity, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, 10, Infinity, 10, Infinity, Infinity, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, 10, Infinity, 10, Infinity, 10, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, 10, Infinity, 10, 10, Infinity, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, 10, Infinity, 10, 10, Infinity, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, 10, Infinity, 10, 10, 10, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, 10, 10, Infinity, Infinity, 10, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, 10, 10, Infinity, Infinity, Infinity, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, 10, 10, Infinity, Infinity, Infinity, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, 10, 10, Infinity, Infinity, 10, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, 10, 10, Infinity, 10, Infinity, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, 10, 10, Infinity, 10, Infinity, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, 10, 10, Infinity, 10, 10, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, 10, 10, 10, Infinity, Infinity, 10);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, 10, 10, 10, Infinity, Infinity, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, 10, 10, 10, Infinity, 10, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, 10, 10, 10, 10, Infinity, Infinity);
} catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
}
</script>
<!-- [[[ test_2d.imageData.put.null.html ]]] -->
<p>Canvas test: 2d.imageData.put.null - bug 421715</p>
<!-- Testing: putImageData() with null imagedata throws TYPE_MISMATCH_ERR -->
<canvas id="c300" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_imageData_put_null() {
var canvas = document.getElementById('c300');
var ctx = canvas.getContext('2d');
var _thrown = undefined; try {
ctx.putImageData(null, 0, 0);
} catch (e) { _thrown = e };
ok(_thrown && _thrown.name == "TypeError", "should throw TypeError");
}
</script>
<!-- [[[ test_2d.imageData.put.path.html ]]] -->
<p>Canvas test: 2d.imageData.put.path</p>
<!-- Testing: putImageData() does not affect the current path -->
<canvas id="c301" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_imageData_put_path() {
var canvas = document.getElementById('c301');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50)
ctx.rect(0, 0, 100, 50);
var imgdata = ctx.getImageData(0, 0, 100, 50);
ctx.putImageData(imgdata, 0, 0);
ctx.fillStyle = '#0f0';
ctx.fill();
isPixel(ctx, 50,25, 0,255,0,255, 2);
}
</script>
<!-- [[[ test_2d.imageData.put.unaffected.html ]]] -->
<p>Canvas test: 2d.imageData.put.unaffected</p>
<!-- Testing: putImageData() is not affected by context state -->
<canvas id="c302" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_imageData_put_unaffected() {
var canvas = document.getElementById('c302');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50)
var imgdata = ctx.getImageData(0, 0, 100, 50);
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50)
ctx.globalAlpha = 0.1;
ctx.globalCompositeOperation = 'destination-atop';
ctx.shadowColor = '#f00';
ctx.translate(100, 50);
ctx.scale(0.1, 0.1);
ctx.putImageData(imgdata, 0, 0);
isPixel(ctx, 50,25, 0,255,0,255, 2);
}
</script>
<!-- [[[ test_2d.imageData.put.unchanged.html ]]] -->
<p>Canvas test: 2d.imageData.put.unchanged</p>
<!-- Testing: putImageData(getImageData(...), ...) has no effect -->
<canvas id="c303" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_imageData_put_unchanged() {
var canvas = document.getElementById('c303');
var ctx = canvas.getContext('2d');
var i = 0;
for (var y = 0; y < 16; ++y) {
for (var x = 0; x < 16; ++x, ++i) {
ctx.fillStyle = 'rgba(' + i + ',' + (Math.floor(i*1.5) % 256) + ',' + (Math.floor(i*23.3) % 256) + ',' + (i/256) + ')';
ctx.fillRect(x, y, 1, 1);
}
}
var imgdata1 = ctx.getImageData(0.1, 0.2, 15.8, 15.9);
var olddata = [];
for (var i = 0; i < imgdata1.data.length; ++i)
olddata[i] = imgdata1.data[i];
ctx.putImageData(imgdata1, 0.1, 0.2);
var imgdata2 = ctx.getImageData(0.1, 0.2, 15.8, 15.9);
for (var i = 0; i < imgdata2.data.length; ++i) {
ok(olddata[i] === imgdata2.data[i], "olddata[\""+(i)+"\"] === imgdata2.data[\""+(i)+"\"]");
}
}
</script>
<!-- [[[ test_2d.imageData.put.wrongtype.html ]]] -->
<p>Canvas test: 2d.imageData.put.wrongtype</p>
<!-- Testing: putImageData() does not accept non-ImageData objects -->
<canvas id="c304" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_imageData_put_wrongtype() {
var canvas = document.getElementById('c304');
var ctx = canvas.getContext('2d');
var imgdata = { width: 1, height: 1, data: [255, 0, 0, 255] };
var _thrown = undefined; try {
ctx.putImageData(imgdata, 0, 0);
} catch (e) { _thrown = e };
ok(_thrown && _thrown.name == "TypeError", "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData("cheese", 0, 0);
} catch (e) { _thrown = e };
ok(_thrown && _thrown.name == "TypeError", "should throw TypeError");
var _thrown = undefined; try {
ctx.putImageData(42, 0, 0);
} catch (e) { _thrown = e };
ok(_thrown && _thrown.name == "TypeError", "should throw TypeError");
}
</script>
<!-- [[[ test_2d.line.cap.butt.html ]]] -->
<p>Canvas test: 2d.line.cap.butt</p>
<!-- Testing: lineCap 'butt' is rendered correctly -->
<canvas id="c305" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_line_cap_butt() {
var canvas = document.getElementById('c305');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.lineCap = 'butt';
ctx.lineWidth = 20;
ctx.fillStyle = '#f00';
ctx.strokeStyle = '#0f0';
ctx.fillRect(15, 15, 20, 20);
ctx.beginPath();
ctx.moveTo(25, 15);
ctx.lineTo(25, 35);
ctx.stroke();
ctx.fillStyle = '#0f0';
ctx.strokeStyle = '#f00';
ctx.beginPath();
ctx.moveTo(75, 15);
ctx.lineTo(75, 35);
ctx.stroke();
ctx.fillRect(65, 15, 20, 20);
isPixel(ctx, 25,14, 0,255,0,255, 0);
isPixel(ctx, 25,15, 0,255,0,255, 0);
isPixel(ctx, 25,16, 0,255,0,255, 0);
isPixel(ctx, 25,34, 0,255,0,255, 0);
isPixel(ctx, 25,35, 0,255,0,255, 0);
isPixel(ctx, 25,36, 0,255,0,255, 0);
isPixel(ctx, 75,14, 0,255,0,255, 0);
isPixel(ctx, 75,15, 0,255,0,255, 0);
isPixel(ctx, 75,16, 0,255,0,255, 0);
isPixel(ctx, 75,34, 0,255,0,255, 0);
isPixel(ctx, 75,35, 0,255,0,255, 0);
isPixel(ctx, 75,36, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.line.cap.closed.html ]]] -->
<p>Canvas test: 2d.line.cap.closed</p>
<!-- Testing: Line caps are not drawn at the corners of an unclosed rectangle -->
<canvas id="c306" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_line_cap_closed() {
var canvas = document.getElementById('c306');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.strokeStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.lineJoin = 'bevel';
ctx.lineCap = 'square';
ctx.lineWidth = 400;
ctx.beginPath();
ctx.moveTo(200, 200);
ctx.lineTo(200, 1000);
ctx.lineTo(1000, 1000);
ctx.lineTo(1000, 200);
ctx.closePath();
ctx.stroke();
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 48,1, 0,255,0,255, 0);
isPixel(ctx, 48,48, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.line.cap.invalid.html ]]] -->
<p>Canvas test: 2d.line.cap.invalid - bug 401788</p>
<!-- Testing: Setting lineCap to invalid values is ignored -->
<canvas id="c307" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_line_cap_invalid() {
var canvas = document.getElementById('c307');
var ctx = canvas.getContext('2d');
var _thrown_outer = false;
try {
ctx.lineCap = 'butt'
ok(ctx.lineCap === 'butt', "ctx.lineCap === 'butt'");
ctx.lineCap = 'butt';
ctx.lineCap = 'invalid';
ok(ctx.lineCap === 'butt', "ctx.lineCap === 'butt'");
ctx.lineCap = 'butt';
ctx.lineCap = 'ROUND';
ok(ctx.lineCap === 'butt', "ctx.lineCap === 'butt'");
ctx.lineCap = 'butt';
ctx.lineCap = 'round\0';
ok(ctx.lineCap === 'butt', "ctx.lineCap === 'butt'");
ctx.lineCap = 'butt';
ctx.lineCap = 'round ';
ok(ctx.lineCap === 'butt', "ctx.lineCap === 'butt'");
ctx.lineCap = 'butt';
ctx.lineCap = "";
ok(ctx.lineCap === 'butt', "ctx.lineCap === 'butt'");
ctx.lineCap = 'butt';
ctx.lineCap = 'bevel';
ok(ctx.lineCap === 'butt', "ctx.lineCap === 'butt'");
} catch (e) {
_thrown_outer = true;
}
ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
}
</script>
<!-- [[[ test_2d.line.cap.open.html ]]] -->
<p>Canvas test: 2d.line.cap.open</p>
<!-- Testing: Line caps are drawn at the corners of an unclosed rectangle -->
<canvas id="c308" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_line_cap_open() {
var canvas = document.getElementById('c308');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.strokeStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.lineJoin = 'bevel';
ctx.lineCap = 'square';
ctx.lineWidth = 400;
ctx.beginPath();
ctx.moveTo(200, 200);
ctx.lineTo(200, 1000);
ctx.lineTo(1000, 1000);
ctx.lineTo(1000, 200);
ctx.lineTo(200, 200);
ctx.stroke();
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 48,1, 0,255,0,255, 0);
isPixel(ctx, 48,48, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.line.cap.round.html ]]] -->
<p>Canvas test: 2d.line.cap.round</p>
<!-- Testing: lineCap 'round' is rendered correctly -->
<canvas id="c309" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_line_cap_round() {
var canvas = document.getElementById('c309');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
var tol = 1; // tolerance to avoid antialiasing artifacts
ctx.lineCap = 'round';
ctx.lineWidth = 20;
ctx.fillStyle = '#f00';
ctx.strokeStyle = '#0f0';
ctx.beginPath();
ctx.moveTo(35-tol, 15);
ctx.arc(25, 15, 10-tol, 0, Math.PI, true);
ctx.arc(25, 35, 10-tol, Math.PI, 0, true);
ctx.fill();
ctx.beginPath();
ctx.moveTo(25, 15);
ctx.lineTo(25, 35);
ctx.stroke();
ctx.fillStyle = '#0f0';
ctx.strokeStyle = '#f00';
ctx.beginPath();
ctx.moveTo(75, 15);
ctx.lineTo(75, 35);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(85+tol, 15);
ctx.arc(75, 15, 10+tol, 0, Math.PI, true);
ctx.arc(75, 35, 10+tol, Math.PI, 0, true);
ctx.fill();
isPixel(ctx, 17,6, 0,255,0,255, 0);
isPixel(ctx, 25,6, 0,255,0,255, 0);
isPixel(ctx, 32,6, 0,255,0,255, 0);
isPixel(ctx, 17,43, 0,255,0,255, 0);
isPixel(ctx, 25,43, 0,255,0,255, 0);
isPixel(ctx, 32,43, 0,255,0,255, 0);
isPixel(ctx, 67,6, 0,255,0,255, 0);
isPixel(ctx, 75,6, 0,255,0,255, 0);
isPixel(ctx, 82,6, 0,255,0,255, 0);
isPixel(ctx, 67,43, 0,255,0,255, 0);
isPixel(ctx, 75,43, 0,255,0,255, 0);
isPixel(ctx, 82,43, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.line.cap.square.html ]]] -->
<p>Canvas test: 2d.line.cap.square</p>
<!-- Testing: lineCap 'square' is rendered correctly -->
<canvas id="c310" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_line_cap_square() {
var canvas = document.getElementById('c310');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.lineCap = 'square';
ctx.lineWidth = 20;
ctx.fillStyle = '#f00';
ctx.strokeStyle = '#0f0';
ctx.fillRect(15, 5, 20, 40);
ctx.beginPath();
ctx.moveTo(25, 15);
ctx.lineTo(25, 35);
ctx.stroke();
ctx.fillStyle = '#0f0';
ctx.strokeStyle = '#f00';
ctx.beginPath();
ctx.moveTo(75, 15);
ctx.lineTo(75, 35);
ctx.stroke();
ctx.fillRect(65, 5, 20, 40);
isPixel(ctx, 25,4, 0,255,0,255, 0);
isPixel(ctx, 25,5, 0,255,0,255, 0);
isPixel(ctx, 25,6, 0,255,0,255, 0);
isPixel(ctx, 25,44, 0,255,0,255, 0);
isPixel(ctx, 25,45, 0,255,0,255, 0);
isPixel(ctx, 25,46, 0,255,0,255, 0);
isPixel(ctx, 75,4, 0,255,0,255, 0);
isPixel(ctx, 75,5, 0,255,0,255, 0);
isPixel(ctx, 75,6, 0,255,0,255, 0);
isPixel(ctx, 75,44, 0,255,0,255, 0);
isPixel(ctx, 75,45, 0,255,0,255, 0);
isPixel(ctx, 75,46, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.line.cross.html ]]] -->
<p>Canvas test: 2d.line.cross</p>
<canvas id="c311" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_line_cross() {
var canvas = document.getElementById('c311');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.lineWidth = 200;
ctx.lineJoin = 'bevel';
ctx.strokeStyle = '#f00';
ctx.beginPath();
ctx.moveTo(110, 50);
ctx.lineTo(110, 60);
ctx.lineTo(100, 60);
ctx.stroke();
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 48,1, 0,255,0,255, 0);
isPixel(ctx, 48,48, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.line.defaults.html ]]] -->
<p>Canvas test: 2d.line.defaults</p>
<canvas id="c312" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_line_defaults() {
var canvas = document.getElementById('c312');
var ctx = canvas.getContext('2d');
ok(ctx.lineWidth === 1, "ctx.lineWidth === 1");
ok(ctx.lineCap === 'butt', "ctx.lineCap === 'butt'");
ok(ctx.lineJoin === 'miter', "ctx.lineJoin === 'miter'");
ok(ctx.miterLimit === 10, "ctx.miterLimit === 10");
}
</script>
<!-- [[[ test_2d.line.join.bevel.html ]]] -->
<p>Canvas test: 2d.line.join.bevel</p>
<!-- Testing: lineJoin 'bevel' is rendered correctly -->
<canvas id="c313" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_line_join_bevel() {
var canvas = document.getElementById('c313');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
var tol = 1; // tolerance to avoid antialiasing artifacts
ctx.lineJoin = 'bevel';
ctx.lineWidth = 20;
ctx.fillStyle = '#f00';
ctx.strokeStyle = '#0f0';
ctx.fillRect(10, 10, 20, 20);
ctx.fillRect(20, 20, 20, 20);
ctx.beginPath();
ctx.moveTo(30, 20);
ctx.lineTo(40-tol, 20);
ctx.lineTo(30, 10+tol);
ctx.fill();
ctx.beginPath();
ctx.moveTo(10, 20);
ctx.lineTo(30, 20);
ctx.lineTo(30, 40);
ctx.stroke();
ctx.fillStyle = '#0f0';
ctx.strokeStyle = '#f00';
ctx.beginPath();
ctx.moveTo(60, 20);
ctx.lineTo(80, 20);
ctx.lineTo(80, 40);
ctx.stroke();
ctx.fillRect(60, 10, 20, 20);
ctx.fillRect(70, 20, 20, 20);
ctx.beginPath();
ctx.moveTo(80, 20);
ctx.lineTo(90+tol, 20);
ctx.lineTo(80, 10-tol);
ctx.fill();
isPixel(ctx, 34,16, 0,255,0,255, 0);
isPixel(ctx, 34,15, 0,255,0,255, 0);
isPixel(ctx, 35,15, 0,255,0,255, 0);
isPixel(ctx, 36,15, 0,255,0,255, 0);
isPixel(ctx, 36,14, 0,255,0,255, 0);
isPixel(ctx, 84,16, 0,255,0,255, 0);
isPixel(ctx, 84,15, 0,255,0,255, 0);
isPixel(ctx, 85,15, 0,255,0,255, 0);
isPixel(ctx, 86,15, 0,255,0,255, 0);
isPixel(ctx, 86,14, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.line.join.closed.html ]]] -->
<p>Canvas test: 2d.line.join.closed</p>
<!-- Testing: Line joins are drawn at the corner of a closed rectangle -->
<canvas id="c314" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_line_join_closed() {
var canvas = document.getElementById('c314');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.strokeStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.lineJoin = 'miter';
ctx.lineWidth = 200;
ctx.beginPath();
ctx.moveTo(100, 50);
ctx.lineTo(100, 1000);
ctx.lineTo(1000, 1000);
ctx.lineTo(1000, 50);
ctx.closePath();
ctx.stroke();
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 48,1, 0,255,0,255, 0);
isPixel(ctx, 48,48, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.line.join.invalid.html ]]] -->
<p>Canvas test: 2d.line.join.invalid - bug 401788</p>
<!-- Testing: Setting lineJoin to invalid values is ignored -->
<canvas id="c315" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_line_join_invalid() {
var canvas = document.getElementById('c315');
var ctx = canvas.getContext('2d');
var _thrown_outer = false;
try {
ctx.lineJoin = 'bevel'
ok(ctx.lineJoin === 'bevel', "ctx.lineJoin === 'bevel'");
ctx.lineJoin = 'bevel';
ctx.lineJoin = 'invalid';
ok(ctx.lineJoin === 'bevel', "ctx.lineJoin === 'bevel'");
ctx.lineJoin = 'bevel';
ctx.lineJoin = 'ROUND';
ok(ctx.lineJoin === 'bevel', "ctx.lineJoin === 'bevel'");
ctx.lineJoin = 'bevel';
ctx.lineJoin = 'round\0';
ok(ctx.lineJoin === 'bevel', "ctx.lineJoin === 'bevel'");
ctx.lineJoin = 'bevel';
ctx.lineJoin = 'round ';
ok(ctx.lineJoin === 'bevel', "ctx.lineJoin === 'bevel'");
ctx.lineJoin = 'bevel';
ctx.lineJoin = "";
ok(ctx.lineJoin === 'bevel', "ctx.lineJoin === 'bevel'");
ctx.lineJoin = 'bevel';
ctx.lineJoin = 'butt';
ok(ctx.lineJoin === 'bevel', "ctx.lineJoin === 'bevel'");
} catch (e) {
_thrown_outer = true;
}
ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
}
</script>
<!-- [[[ test_2d.line.join.miter.html ]]] -->
<p>Canvas test: 2d.line.join.miter</p>
<!-- Testing: lineJoin 'miter' is rendered correctly -->
<canvas id="c316" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_line_join_miter() {
var canvas = document.getElementById('c316');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.lineJoin = 'miter';
ctx.lineWidth = 20;
ctx.fillStyle = '#f00';
ctx.strokeStyle = '#0f0';
ctx.fillStyle = '#f00';
ctx.strokeStyle = '#0f0';
ctx.fillRect(10, 10, 30, 20);
ctx.fillRect(20, 10, 20, 30);
ctx.beginPath();
ctx.moveTo(10, 20);
ctx.lineTo(30, 20);
ctx.lineTo(30, 40);
ctx.stroke();
ctx.fillStyle = '#0f0';
ctx.strokeStyle = '#f00';
ctx.beginPath();
ctx.moveTo(60, 20);
ctx.lineTo(80, 20);
ctx.lineTo(80, 40);
ctx.stroke();
ctx.fillRect(60, 10, 30, 20);
ctx.fillRect(70, 10, 20, 30);
isPixel(ctx, 38,12, 0,255,0,255, 0);
isPixel(ctx, 39,11, 0,255,0,255, 0);
isPixel(ctx, 40,10, 0,255,0,255, 0);
isPixel(ctx, 41,9, 0,255,0,255, 0);
isPixel(ctx, 42,8, 0,255,0,255, 0);
isPixel(ctx, 88,12, 0,255,0,255, 0);
isPixel(ctx, 89,11, 0,255,0,255, 0);
isPixel(ctx, 90,10, 0,255,0,255, 0);
isPixel(ctx, 91,9, 0,255,0,255, 0);
isPixel(ctx, 92,8, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.line.join.open.html ]]] -->
<p>Canvas test: 2d.line.join.open</p>
<!-- Testing: Line joins are not drawn at the corner of an unclosed rectangle -->
<canvas id="c317" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_line_join_open() {
var canvas = document.getElementById('c317');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.strokeStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.lineJoin = 'miter';
ctx.lineWidth = 200;
ctx.beginPath();
ctx.moveTo(100, 50);
ctx.lineTo(100, 1000);
ctx.lineTo(1000, 1000);
ctx.lineTo(1000, 50);
ctx.lineTo(100, 50);
ctx.stroke();
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 48,1, 0,255,0,255, 0);
isPixel(ctx, 48,48, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.line.join.parallel.html ]]] -->
<p>Canvas test: 2d.line.join.parallel</p>
<!-- Testing: Line joins are drawn at 180-degree joins -->
<canvas id="c318" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_line_join_parallel() {
var canvas = document.getElementById('c318');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.strokeStyle = '#0f0';
ctx.lineWidth = 300;
ctx.lineJoin = 'round';
ctx.beginPath();
ctx.moveTo(-100, 25);
ctx.lineTo(0, 25);
ctx.lineTo(-100, 25);
ctx.stroke();
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 48,1, 0,255,0,255, 0);
isPixel(ctx, 48,48, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.line.join.round.html ]]] -->
<p>Canvas test: 2d.line.join.round</p>
<!-- Testing: lineJoin 'round' is rendered correctly -->
<canvas id="c319" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_line_join_round() {
var canvas = document.getElementById('c319');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
var tol = 1; // tolerance to avoid antialiasing artifacts
ctx.lineJoin = 'round';
ctx.lineWidth = 20;
ctx.fillStyle = '#f00';
ctx.strokeStyle = '#0f0';
ctx.fillRect(10, 10, 20, 20);
ctx.fillRect(20, 20, 20, 20);
ctx.beginPath();
ctx.moveTo(30, 20);
ctx.arc(30, 20, 10-tol, 0, 2*Math.PI, true);
ctx.fill();
ctx.beginPath();
ctx.moveTo(10, 20);
ctx.lineTo(30, 20);
ctx.lineTo(30, 40);
ctx.stroke();
ctx.fillStyle = '#0f0';
ctx.strokeStyle = '#f00';
ctx.beginPath();
ctx.moveTo(60, 20);
ctx.lineTo(80, 20);
ctx.lineTo(80, 40);
ctx.stroke();
ctx.fillRect(60, 10, 20, 20);
ctx.fillRect(70, 20, 20, 20);
ctx.beginPath();
ctx.moveTo(80, 20);
ctx.arc(80, 20, 10+tol, 0, 2*Math.PI, true);
ctx.fill();
isPixel(ctx, 36,14, 0,255,0,255, 0);
isPixel(ctx, 36,13, 0,255,0,255, 0);
isPixel(ctx, 37,13, 0,255,0,255, 0);
isPixel(ctx, 38,13, 0,255,0,255, 0);
isPixel(ctx, 38,12, 0,255,0,255, 0);
isPixel(ctx, 86,14, 0,255,0,255, 0);
isPixel(ctx, 86,13, 0,255,0,255, 0);
isPixel(ctx, 87,13, 0,255,0,255, 0);
isPixel(ctx, 88,13, 0,255,0,255, 0);
isPixel(ctx, 88,12, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.line.miter.acute.html ]]] -->
<p>Canvas test: 2d.line.miter.acute</p>
<!-- Testing: Miter joins are drawn correctly with acute angles -->
<canvas id="c320" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_line_miter_acute() {
var canvas = document.getElementById('c320');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.lineWidth = 200;
ctx.lineJoin = 'miter';
ctx.strokeStyle = '#0f0';
ctx.miterLimit = 2.614;
ctx.beginPath();
ctx.moveTo(100, 1000);
ctx.lineTo(100, 100);
ctx.lineTo(1000, 1000);
ctx.stroke();
ctx.strokeStyle = '#f00';
ctx.miterLimit = 2.613;
ctx.beginPath();
ctx.moveTo(100, 1000);
ctx.lineTo(100, 100);
ctx.lineTo(1000, 1000);
ctx.stroke();
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 48,1, 0,255,0,255, 0);
isPixel(ctx, 48,48, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.line.miter.exceeded.html ]]] -->
<p>Canvas test: 2d.line.miter.exceeded</p>
<!-- Testing: Miter joins are not drawn when the miter limit is exceeded -->
<canvas id="c321" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_line_miter_exceeded() {
var canvas = document.getElementById('c321');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.lineWidth = 400;
ctx.lineJoin = 'miter';
ctx.strokeStyle = '#f00';
ctx.miterLimit = 1.414;
ctx.beginPath();
ctx.moveTo(200, 1000);
ctx.lineTo(200, 200);
ctx.lineTo(1000, 201); // slightly non-right-angle to avoid being a special case
ctx.stroke();
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 48,1, 0,255,0,255, 0);
isPixel(ctx, 48,48, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.line.miter.invalid.html ]]] -->
<p>Canvas test: 2d.line.miter.invalid</p>
<!-- Testing: Setting miterLimit to invalid values is ignored -->
<canvas id="c322" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_line_miter_invalid() {
var canvas = document.getElementById('c322');
var ctx = canvas.getContext('2d');
var _thrown_outer = false;
try {
ctx.miterLimit = 1.5;
ok(ctx.miterLimit === 1.5, "ctx.miterLimit === 1.5");
ctx.miterLimit = 1.5;
ctx.miterLimit = 0;
ok(ctx.miterLimit === 1.5, "ctx.miterLimit === 1.5");
ctx.miterLimit = 1.5;
ctx.miterLimit = -1;
ok(ctx.miterLimit === 1.5, "ctx.miterLimit === 1.5");
ctx.miterLimit = 1.5;
ctx.miterLimit = Infinity;
ok(ctx.miterLimit === 1.5, "ctx.miterLimit === 1.5");
ctx.miterLimit = 1.5;
ctx.miterLimit = -Infinity;
ok(ctx.miterLimit === 1.5, "ctx.miterLimit === 1.5");
ctx.miterLimit = 1.5;
ctx.miterLimit = NaN;
ok(ctx.miterLimit === 1.5, "ctx.miterLimit === 1.5");
} catch (e) {
_thrown_outer = true;
}
ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
}
</script>
<!-- [[[ test_2d.line.miter.lineedge.html ]]] -->
<p>Canvas test: 2d.line.miter.lineedge - bug 401791</p>
<!-- Testing: Miter joins are not drawn when the miter limit is exceeded at the corners of a zero-height rectangle -->
<canvas id="c323" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_line_miter_lineedge() {
var canvas = document.getElementById('c323');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.lineWidth = 200;
ctx.lineJoin = 'miter';
ctx.strokeStyle = '#f00';
ctx.miterLimit = 1.414;
ctx.beginPath();
ctx.strokeRect(100, 25, 200, 0);
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 48,1, 0,255,0,255, 0);
isPixel(ctx, 48,48, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.line.miter.obtuse.html ]]] -->
<p>Canvas test: 2d.line.miter.obtuse</p>
<!-- Testing: Miter joins are drawn correctly with obtuse angles -->
<canvas id="c324" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_line_miter_obtuse() {
var canvas = document.getElementById('c324');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
var x=800;
var y=300;
ctx.lineWidth = 1600;
ctx.lineJoin = 'miter';
ctx.strokeStyle = '#0f0';
ctx.miterLimit = 1.083;
ctx.beginPath();
ctx.moveTo(800, 10000);
ctx.lineTo(800, 300);
ctx.lineTo(10000, -8900);
ctx.stroke();
ctx.strokeStyle = '#f00';
ctx.miterLimit = 1.082;
ctx.beginPath();
ctx.moveTo(800, 10000);
ctx.lineTo(800, 300);
ctx.lineTo(10000, -8900);
ctx.stroke();
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 48,1, 0,255,0,255, 0);
isPixel(ctx, 48,48, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.line.miter.rightangle.html ]]] -->
<p>Canvas test: 2d.line.miter.rightangle - bug 401791</p>
<!-- Testing: Miter joins are not drawn when the miter limit is exceeded, on exact right angles -->
<canvas id="c325" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_line_miter_rightangle() {
var canvas = document.getElementById('c325');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.lineWidth = 400;
ctx.lineJoin = 'miter';
ctx.strokeStyle = '#f00';
ctx.miterLimit = 1.414;
ctx.beginPath();
ctx.moveTo(200, 1000);
ctx.lineTo(200, 200);
ctx.lineTo(1000, 200);
ctx.stroke();
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 48,1, 0,255,0,255, 0);
isPixel(ctx, 48,48, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.line.miter.within.html ]]] -->
<p>Canvas test: 2d.line.miter.within</p>
<!-- Testing: Miter joins are drawn when the miter limit is not quite exceeded -->
<canvas id="c326" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_line_miter_within() {
var canvas = document.getElementById('c326');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.lineWidth = 400;
ctx.lineJoin = 'miter';
ctx.strokeStyle = '#0f0';
ctx.miterLimit = 1.416;
ctx.beginPath();
ctx.moveTo(200, 1000);
ctx.lineTo(200, 200);
ctx.lineTo(1000, 201);
ctx.stroke();
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 48,1, 0,255,0,255, 0);
isPixel(ctx, 48,48, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.line.union.html ]]] -->
<p>Canvas test: 2d.line.union</p>
<canvas id="c327" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_line_union() {
var canvas = document.getElementById('c327');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.lineWidth = 100;
ctx.lineCap = 'round';
ctx.strokeStyle = '#0f0';
ctx.beginPath();
ctx.moveTo(0, 24);
ctx.lineTo(100, 25);
ctx.lineTo(0, 26);
ctx.closePath();
ctx.stroke();
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 25,1, 0,255,0,255, 0);
isPixel(ctx, 48,1, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 25,1, 0,255,0,255, 0);
isPixel(ctx, 48,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.line.width.basic.html ]]] -->
<p>Canvas test: 2d.line.width.basic</p>
<!-- Testing: lineWidth determines the width of line strokes -->
<canvas id="c328" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_line_width_basic() {
var canvas = document.getElementById('c328');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.lineWidth = 20;
// Draw a green line over a red box, to check the line is not too small
ctx.fillStyle = '#f00';
ctx.strokeStyle = '#0f0';
ctx.fillRect(15, 15, 20, 20);
ctx.beginPath();
ctx.moveTo(25, 15);
ctx.lineTo(25, 35);
ctx.stroke();
// Draw a green box over a red line, to check the line is not too large
ctx.fillStyle = '#0f0';
ctx.strokeStyle = '#f00';
ctx.beginPath();
ctx.moveTo(75, 15);
ctx.lineTo(75, 35);
ctx.stroke();
ctx.fillRect(65, 15, 20, 20);
isPixel(ctx, 14,25, 0,255,0,255, 0);
isPixel(ctx, 15,25, 0,255,0,255, 0);
isPixel(ctx, 16,25, 0,255,0,255, 0);
isPixel(ctx, 25,25, 0,255,0,255, 0);
isPixel(ctx, 34,25, 0,255,0,255, 0);
isPixel(ctx, 35,25, 0,255,0,255, 0);
isPixel(ctx, 36,25, 0,255,0,255, 0);
isPixel(ctx, 64,25, 0,255,0,255, 0);
isPixel(ctx, 65,25, 0,255,0,255, 0);
isPixel(ctx, 66,25, 0,255,0,255, 0);
isPixel(ctx, 75,25, 0,255,0,255, 0);
isPixel(ctx, 84,25, 0,255,0,255, 0);
isPixel(ctx, 85,25, 0,255,0,255, 0);
isPixel(ctx, 86,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.line.width.invalid.html ]]] -->
<p>Canvas test: 2d.line.width.invalid</p>
<!-- Testing: Setting lineWidth to invalid values is ignored -->
<canvas id="c329" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_line_width_invalid() {
var canvas = document.getElementById('c329');
var ctx = canvas.getContext('2d');
var _thrown_outer = false;
try {
ctx.lineWidth = 1.5;
ok(ctx.lineWidth === 1.5, "ctx.lineWidth === 1.5");
ctx.lineWidth = 1.5;
ctx.lineWidth = 0;
ok(ctx.lineWidth === 1.5, "ctx.lineWidth === 1.5");
ctx.lineWidth = 1.5;
ctx.lineWidth = -1;
ok(ctx.lineWidth === 1.5, "ctx.lineWidth === 1.5");
ctx.lineWidth = 1.5;
ctx.lineWidth = Infinity;
ok(ctx.lineWidth === 1.5, "ctx.lineWidth === 1.5");
ctx.lineWidth = 1.5;
ctx.lineWidth = -Infinity;
ok(ctx.lineWidth === 1.5, "ctx.lineWidth === 1.5");
ctx.lineWidth = 1.5;
ctx.lineWidth = NaN;
ok(ctx.lineWidth === 1.5, "ctx.lineWidth === 1.5");
} catch (e) {
_thrown_outer = true;
}
ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
}
</script>
<!-- [[[ test_2d.line.width.transformed.html ]]] -->
<p>Canvas test: 2d.line.width.transformed</p>
<!-- Testing: Line stroke widths are affected by scale transformations -->
<canvas id="c330" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_line_width_transformed() {
var canvas = document.getElementById('c330');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.lineWidth = 4;
// Draw a green line over a red box, to check the line is not too small
ctx.fillStyle = '#f00';
ctx.strokeStyle = '#0f0';
ctx.fillRect(15, 15, 20, 20);
ctx.save();
ctx.scale(5, 1);
ctx.beginPath();
ctx.moveTo(5, 15);
ctx.lineTo(5, 35);
ctx.stroke();
ctx.restore();
// Draw a green box over a red line, to check the line is not too large
ctx.fillStyle = '#0f0';
ctx.strokeStyle = '#f00';
ctx.save();
ctx.scale(-5, 1);
ctx.beginPath();
ctx.moveTo(-15, 15);
ctx.lineTo(-15, 35);
ctx.stroke();
ctx.restore();
ctx.fillRect(65, 15, 20, 20);
isPixel(ctx, 14,25, 0,255,0,255, 0);
isPixel(ctx, 15,25, 0,255,0,255, 0);
isPixel(ctx, 16,25, 0,255,0,255, 0);
isPixel(ctx, 25,25, 0,255,0,255, 0);
isPixel(ctx, 34,25, 0,255,0,255, 0);
isPixel(ctx, 35,25, 0,255,0,255, 0);
isPixel(ctx, 36,25, 0,255,0,255, 0);
isPixel(ctx, 64,25, 0,255,0,255, 0);
isPixel(ctx, 65,25, 0,255,0,255, 0);
isPixel(ctx, 66,25, 0,255,0,255, 0);
isPixel(ctx, 75,25, 0,255,0,255, 0);
isPixel(ctx, 84,25, 0,255,0,255, 0);
isPixel(ctx, 85,25, 0,255,0,255, 0);
isPixel(ctx, 86,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.missingargs.html ]]] -->
<p>Canvas test: 2d.missingargs</p>
<!-- Testing: Missing arguments cause NOT_SUPPORTED_ERR -->
<canvas id="c331" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
// eslint-disable-next-line complexity
function test_2d_missingargs() {
var canvas = document.getElementById('c331');
var ctx = canvas.getContext('2d');
var _thrown = undefined; try {
ctx.scale();
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.scale(1);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.rotate();
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.translate();
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.translate(0);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
if (ctx.transform) { // (avoid spurious failures, since the aim here is not to test that all features are supported)
var _thrown = undefined; try {
ctx.transform();
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.transform(1);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.transform(1, 0);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.transform(1, 0, 0);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.transform(1, 0, 0, 1);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.transform(1, 0, 0, 1, 0);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
}
if (ctx.setTransform) {
var _thrown = undefined; try {
ctx.setTransform();
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.setTransform(1);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.setTransform(1, 0);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.setTransform(1, 0, 0);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.setTransform(1, 0, 0, 1);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.setTransform(1, 0, 0, 1, 0);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
}
var _thrown = undefined; try {
ctx.createLinearGradient();
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.createLinearGradient(0);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.createLinearGradient(0, 0);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.createLinearGradient(0, 0, 1);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.createRadialGradient();
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.createRadialGradient(0);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.createRadialGradient(0, 0);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.createRadialGradient(0, 0, 1);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.createRadialGradient(0, 0, 1, 0);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.createRadialGradient(0, 0, 1, 0, 0);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.createPattern(canvas);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.clearRect();
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.clearRect(0);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.clearRect(0, 0);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.clearRect(0, 0, 0);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.fillRect();
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.fillRect(0);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.fillRect(0, 0);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.fillRect(0, 0, 0);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.strokeRect();
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.strokeRect(0);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.strokeRect(0, 0);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.strokeRect(0, 0, 0);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.moveTo();
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.moveTo(0);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.lineTo();
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.lineTo(0);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.quadraticCurveTo();
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.quadraticCurveTo(0);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.quadraticCurveTo(0, 0);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.quadraticCurveTo(0, 0, 0);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.bezierCurveTo();
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.bezierCurveTo(0);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.bezierCurveTo(0, 0);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.bezierCurveTo(0, 0, 0);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.bezierCurveTo(0, 0, 0, 0);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.bezierCurveTo(0, 0, 0, 0, 0);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.arcTo();
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.arcTo(0);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.arcTo(0, 0);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.arcTo(0, 0, 0);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.arcTo(0, 0, 0, 0);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.rect();
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.rect(0);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.rect(0, 0);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.rect(0, 0, 0);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.arc();
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.arc(0);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.arc(0, 0);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.arc(0, 0, 1);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.arc(0, 0, 1, 0);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.arc(0, 0, 1, 0, 0);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
if (ctx.isPointInPath) {
var _thrown = undefined; try {
ctx.isPointInPath();
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.isPointInPath(0);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
}
var _thrown = undefined; try {
ctx.drawImage();
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.drawImage(canvas);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.drawImage(canvas, 0);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
// TODO: n >= 3 args on drawImage could be either a valid overload,
// or too few for another overload, or too many for another
// overload - what should happen?
if (ctx.createImageData) {
var _thrown = undefined; try {
ctx.createImageData();
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.createImageData(1);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
}
if (ctx.getImageData) {
var _thrown = undefined; try {
ctx.getImageData();
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.getImageData(0);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.getImageData(0, 0);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.getImageData(0, 0, 1);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
}
if (ctx.putImageData) {
var imgdata = ctx.getImageData(0, 0, 1, 1);
var _thrown = undefined; try {
ctx.putImageData();
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.putImageData(imgdata);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
ctx.putImageData(imgdata, 0);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
}
var g = ctx.createLinearGradient(0, 0, 0, 0);
var _thrown = undefined; try {
g.addColorStop();
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
var _thrown = undefined; try {
g.addColorStop(0);
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
}
</script>
<!-- [[[ test_2d.path.arc.angle.1.html ]]] -->
<p>Canvas test: 2d.path.arc.angle.1</p>
<!-- Testing: arc() draws pi/2 .. -pi anticlockwise correctly -->
<canvas id="c332" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_arc_angle_1() {
var canvas = document.getElementById('c332');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = '#f00';
ctx.beginPath();
ctx.moveTo(100, 0);
ctx.arc(100, 0, 150, Math.PI/2, -Math.PI, true);
ctx.fill();
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.arc.angle.2.html ]]] -->
<p>Canvas test: 2d.path.arc.angle.2</p>
<!-- Testing: arc() draws -3pi/2 .. -pi anticlockwise correctly -->
<canvas id="c333" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_arc_angle_2() {
var canvas = document.getElementById('c333');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = '#f00';
ctx.beginPath();
ctx.moveTo(100, 0);
ctx.arc(100, 0, 150, -3*Math.PI/2, -Math.PI, true);
ctx.fill();
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.arc.angle.3.html ]]] -->
<p>Canvas test: 2d.path.arc.angle.3</p>
<!-- Testing: arc() wraps angles mod 2pi when anticlockwise and end > start+2pi -->
<canvas id="c334" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_arc_angle_3() {
var canvas = document.getElementById('c334');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = '#f00';
ctx.beginPath();
ctx.moveTo(100, 0);
ctx.arc(100, 0, 150, (512+1/2)*Math.PI, (1024-1)*Math.PI, true);
ctx.fill();
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.arc.angle.4.html ]]] -->
<p>Canvas test: 2d.path.arc.angle.4</p>
<!-- Testing: arc() draws a full circle when clockwise and end > start+2pi -->
<canvas id="c335" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_arc_angle_4() {
var canvas = document.getElementById('c335');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = '#0f0';
ctx.beginPath();
ctx.moveTo(50, 25);
ctx.arc(50, 25, 60, (512+1/2)*Math.PI, (1024-1)*Math.PI, false);
ctx.fill();
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.arc.angle.5.html ]]] -->
<p>Canvas test: 2d.path.arc.angle.5</p>
<!-- Testing: arc() wraps angles mod 2pi when clockwise and start > end+2pi -->
<canvas id="c336" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_arc_angle_5() {
var canvas = document.getElementById('c336');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = '#f00';
ctx.beginPath();
ctx.moveTo(100, 0);
ctx.arc(100, 0, 150, (1024-1)*Math.PI, (512+1/2)*Math.PI, false);
ctx.fill();
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.arc.angle.6.html ]]] -->
<p>Canvas test: 2d.path.arc.angle.6</p>
<!-- Testing: arc() draws a full circle when anticlockwise and start > end+2pi -->
<canvas id="c337" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_arc_angle_6() {
var canvas = document.getElementById('c337');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = '#0f0';
ctx.beginPath();
ctx.moveTo(50, 25);
ctx.arc(50, 25, 60, (1024-1)*Math.PI, (512+1/2)*Math.PI, true);
ctx.fill();
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.arc.empty.html ]]] -->
<p>Canvas test: 2d.path.arc.empty</p>
<!-- Testing: arc() with an empty path does not draw a straight line to the start point -->
<canvas id="c338" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_arc_empty() {
var canvas = document.getElementById('c338');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.lineWidth = 50;
ctx.strokeStyle = '#f00';
ctx.beginPath();
ctx.arc(200, 25, 5, 0, 2*Math.PI, true);
ctx.stroke();
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.arc.end.html ]]] -->
<p>Canvas test: 2d.path.arc.end</p>
<!-- Testing: arc() adds the end point of the arc to the subpath -->
<canvas id="c339" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_arc_end() {
var canvas = document.getElementById('c339');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.lineWidth = 50;
ctx.strokeStyle = '#0f0';
ctx.beginPath();
ctx.moveTo(-100, 0);
ctx.arc(-100, 0, 25, -Math.PI/2, Math.PI/2, true);
ctx.lineTo(100, 25);
ctx.stroke();
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.arc.negative.html ]]] -->
<p>Canvas test: 2d.path.arc.negative</p>
<!-- Testing: arc() with negative radius throws INDEX_SIZE_ERR -->
<canvas id="c340" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_arc_negative() {
var canvas = document.getElementById('c340');
var ctx = canvas.getContext('2d');
var _thrown = undefined; try {
ctx.arc(0, 0, -1, 0, 0, true);
} catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError");
}
</script>
<!-- [[[ test_2d.path.arc.nonempty.html ]]] -->
<p>Canvas test: 2d.path.arc.nonempty</p>
<!-- Testing: arc() with a non-empty path does draw a straight line to the start point -->
<canvas id="c341" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_arc_nonempty() {
var canvas = document.getElementById('c341');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.lineWidth = 50;
ctx.strokeStyle = '#0f0';
ctx.beginPath();
ctx.moveTo(0, 25);
ctx.arc(200, 25, 5, 0, 2*Math.PI, true);
ctx.stroke();
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.arc.nonfinite.html ]]] -->
<p>Canvas test: 2d.path.arc.nonfinite</p>
<!-- Testing: arc() with Infinity/NaN is ignored -->
<canvas id="c342" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_arc_nonfinite() {
var canvas = document.getElementById('c342');
var ctx = canvas.getContext('2d');
var _thrown_outer = false;
try {
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.moveTo(0, 0);
ctx.lineTo(100, 0);
ctx.arc(Infinity, 50, 0, 2*Math.PI, true);
ctx.arc(-Infinity, 50, 0, 2*Math.PI, true);
ctx.arc(NaN, 50, 0, 2*Math.PI, true);
ctx.arc(0, Infinity, 0, 2*Math.PI, true);
ctx.arc(0, -Infinity, 0, 2*Math.PI, true);
ctx.arc(0, NaN, 0, 2*Math.PI, true);
ctx.arc(0, 50, Infinity, 2*Math.PI, true);
ctx.arc(0, 50, -Infinity, 2*Math.PI, true);
ctx.arc(0, 50, NaN, 2*Math.PI, true);
ctx.arc(0, 50, 0, Infinity, true);
ctx.arc(0, 50, 0, -Infinity, true);
ctx.arc(0, 50, 0, NaN, true);
ctx.arc(Infinity, Infinity, 0, 2*Math.PI, true);
ctx.arc(Infinity, Infinity, Infinity, 2*Math.PI, true);
ctx.arc(Infinity, Infinity, Infinity, Infinity, true);
ctx.arc(Infinity, Infinity, 0, Infinity, true);
ctx.arc(Infinity, 50, Infinity, 2*Math.PI, true);
ctx.arc(Infinity, 50, Infinity, Infinity, true);
ctx.arc(Infinity, 50, 0, Infinity, true);
ctx.arc(0, Infinity, Infinity, 2*Math.PI, true);
ctx.arc(0, Infinity, Infinity, Infinity, true);
ctx.arc(0, Infinity, 0, Infinity, true);
ctx.arc(0, 50, Infinity, Infinity, true);
ctx.lineTo(100, 50);
ctx.lineTo(0, 50);
ctx.fillStyle = '#0f0';
ctx.fill();
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 90,45, 0,255,0,255, 0);
} catch (e) {
_thrown_outer = true;
}
ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
}
</script>
<!-- [[[ test_2d.path.arc.scale.1.html ]]] -->
<p>Canvas test: 2d.path.arc.scale.1</p>
<!-- Testing: Non-uniformly scaled arcs are the right shape -->
<canvas id="c343" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_arc_scale_1() {
var canvas = document.getElementById('c343');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.scale(2, 0.5);
ctx.fillStyle = '#0f0';
ctx.beginPath();
var hypothenuse = Math.sqrt(50 * 50 + 25 * 25);
var tolerance = 0.5;
var radius = hypothenuse + tolerance;
ctx.arc(25, 50, radius, 0, 2*Math.PI, false);
ctx.fill();
ctx.fillStyle = '#f00';
ctx.beginPath();
ctx.moveTo(-25, 50);
ctx.arc(-25, 50, 24, 0, 2*Math.PI, false);
ctx.moveTo(75, 50);
ctx.arc(75, 50, 24, 0, 2*Math.PI, false);
ctx.moveTo(25, -25);
ctx.arc(25, -25, 24, 0, 2*Math.PI, false);
ctx.moveTo(25, 125);
ctx.arc(25, 125, 24, 0, 2*Math.PI, false);
ctx.fill();
isPixel(ctx, 0,0, 0,255,0,255, 0);
isPixel(ctx, 50,0, 0,255,0,255, 0);
isPixel(ctx, 99,0, 0,255,0,255, 0);
isPixel(ctx, 0,25, 0,255,0,255, 0);
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 99,25, 0,255,0,255, 0);
isPixel(ctx, 0,49, 0,255,0,255, 0);
isPixel(ctx, 50,49, 0,255,0,255, 0);
isPixel(ctx, 99,49, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.arc.scale.2.html ]]] -->
<p>Canvas test: 2d.path.arc.scale.2</p>
<!-- Testing: Highly scaled arcs are the right shape -->
<canvas id="c344" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_arc_scale_2() {
var canvas = document.getElementById('c344');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.scale(100, 100);
ctx.strokeStyle = '#0f0';
ctx.lineWidth = 1.2;
ctx.beginPath();
ctx.arc(0, 0, 0.6, 0, Math.PI/2, false);
ctx.stroke();
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 50,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,25, 0,255,0,255, 0);
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 98,25, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 50,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.arc.selfintersect.1.html ]]] -->
<p>Canvas test: 2d.path.arc.selfintersect.1</p>
<!-- Testing: arc() with lineWidth > 2*radius is drawn sensibly -->
<canvas id="c345" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_arc_selfintersect_1() {
var canvas = document.getElementById('c345');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.lineWidth = 200;
ctx.strokeStyle = '#f00';
ctx.beginPath();
ctx.arc(100, 50, 25, 0, -Math.PI/2, true);
ctx.stroke();
ctx.beginPath();
ctx.arc(0, 0, 25, 0, -Math.PI/2, true);
ctx.stroke();
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.arc.selfintersect.2.html ]]] -->
<p>Canvas test: 2d.path.arc.selfintersect.2</p>
<!-- Testing: arc() with lineWidth > 2*radius is drawn sensibly -->
<canvas id="c346" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_arc_selfintersect_2() {
var canvas = document.getElementById('c346');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.lineWidth = 180;
ctx.strokeStyle = '#0f0';
ctx.beginPath();
ctx.arc(-50, 50, 25, 0, -Math.PI/2, true);
ctx.stroke();
ctx.beginPath();
ctx.arc(100, 0, 25, 0, -Math.PI/2, true);
ctx.stroke();
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 90,10, 0,255,0,255, 0);
isPixel(ctx, 97,1, 0,255,0,255, 0);
isPixel(ctx, 97,2, 0,255,0,255, 0);
isPixel(ctx, 97,3, 0,255,0,255, 0);
isPixel(ctx, 2,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.arc.shape.1.html ]]] -->
<p>Canvas test: 2d.path.arc.shape.1</p>
<!-- Testing: arc() from 0 to pi does not draw anything in the wrong half -->
<canvas id="c347" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_arc_shape_1() {
var canvas = document.getElementById('c347');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.lineWidth = 50;
ctx.strokeStyle = '#f00';
ctx.beginPath();
ctx.arc(50, 50, 50, 0, Math.PI, false);
ctx.stroke();
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 20,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.arc.shape.2.html ]]] -->
<p>Canvas test: 2d.path.arc.shape.2</p>
<!-- Testing: arc() from 0 to pi draws stuff in the right half -->
<canvas id="c348" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_arc_shape_2() {
var canvas = document.getElementById('c348');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.lineWidth = 100;
ctx.strokeStyle = '#0f0';
ctx.beginPath();
ctx.arc(50, 50, 50, 0, Math.PI, true);
ctx.stroke();
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 20,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.arc.shape.3.html ]]] -->
<p>Canvas test: 2d.path.arc.shape.3</p>
<!-- Testing: arc() from 0 to -pi/2 does not draw anything in the wrong quadrant -->
<canvas id="c349" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_arc_shape_3() {
var canvas = document.getElementById('c349');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.lineWidth = 100;
ctx.strokeStyle = '#f00';
ctx.beginPath();
ctx.arc(0, 50, 50, 0, -Math.PI/2, false);
ctx.stroke();
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.arc.shape.4.html ]]] -->
<p>Canvas test: 2d.path.arc.shape.4</p>
<!-- Testing: arc() from 0 to -pi/2 draws stuff in the right quadrant -->
<canvas id="c350" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_arc_shape_4() {
var canvas = document.getElementById('c350');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.lineWidth = 150;
ctx.strokeStyle = '#0f0';
ctx.beginPath();
ctx.arc(-50, 50, 100, 0, -Math.PI/2, true);
ctx.stroke();
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.arc.shape.5.html ]]] -->
<p>Canvas test: 2d.path.arc.shape.5</p>
<!-- Testing: arc() from 0 to 5pi does not draw strange things -->
<canvas id="c351" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_arc_shape_5() {
var canvas = document.getElementById('c351');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.lineWidth = 200;
ctx.strokeStyle = '#f00';
ctx.beginPath();
ctx.arc(300, 0, 100, 0, 5*Math.PI, false);
ctx.stroke();
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.arc.twopie.1.html ]]] -->
<p>Canvas test: 2d.path.arc.twopie.1</p>
<!-- Testing: arc() draws nothing when end = start + 2pi-e and anticlockwise -->
<canvas id="c352" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_arc_twopie_1() {
var canvas = document.getElementById('c352');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.strokeStyle = '#f00';
ctx.lineWidth = 100;
ctx.beginPath();
ctx.arc(50, 25, 50, 0, 2*Math.PI - 1e-4, true);
ctx.stroke();
isPixel(ctx, 50,20, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.arc.twopie.2.html ]]] -->
<p>Canvas test: 2d.path.arc.twopie.2</p>
<!-- Testing: arc() draws a full circle when end = start + 2pi-e and clockwise -->
<canvas id="c353" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_arc_twopie_2() {
var canvas = document.getElementById('c353');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.strokeStyle = '#0f0';
ctx.lineWidth = 100;
ctx.beginPath();
ctx.arc(50, 25, 50, 0, 2*Math.PI - 1e-4, false);
ctx.stroke();
isPixel(ctx, 50,20, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.arc.twopie.3.html ]]] -->
<p>Canvas test: 2d.path.arc.twopie.3</p>
<!-- Testing: arc() draws a full circle when end = start + 2pi+e and anticlockwise -->
<canvas id="c354" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_arc_twopie_3() {
var canvas = document.getElementById('c354');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.strokeStyle = '#0f0';
ctx.lineWidth = 100;
ctx.beginPath();
ctx.arc(50, 25, 50, 0, 2*Math.PI + 1e-4, true);
ctx.stroke();
isPixel(ctx, 50,20, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.arc.twopie.4.html ]]] -->
<p>Canvas test: 2d.path.arc.twopie.4</p>
<!-- Testing: arc() draws nothing when end = start + 2pi+e and clockwise -->
<canvas id="c355" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_arc_twopie_4() {
var canvas = document.getElementById('c355');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.strokeStyle = '#0f0';
ctx.lineWidth = 100;
ctx.beginPath();
ctx.arc(50, 25, 50, 0, 2*Math.PI + 1e-4, false);
ctx.stroke();
isPixel(ctx, 50,20, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.arc.zero.1.html ]]] -->
<p>Canvas test: 2d.path.arc.zero.1</p>
<!-- Testing: arc() draws nothing when startAngle = endAngle and anticlockwise -->
<canvas id="c356" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_arc_zero_1() {
var canvas = document.getElementById('c356');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.strokeStyle = '#f00';
ctx.lineWidth = 100;
ctx.beginPath();
ctx.arc(50, 25, 50, 0, 0, true);
ctx.stroke();
isPixel(ctx, 50,20, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.arc.zero.2.html ]]] -->
<p>Canvas test: 2d.path.arc.zero.2</p>
<!-- Testing: arc() draws nothing when startAngle = endAngle and clockwise -->
<canvas id="c357" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_arc_zero_2() {
var canvas = document.getElementById('c357');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.strokeStyle = '#f00';
ctx.lineWidth = 100;
ctx.beginPath();
ctx.arc(50, 25, 50, 0, 0, false);
ctx.stroke();
isPixel(ctx, 50,20, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.arc.zeroradius.html ]]] -->
<p>Canvas test: 2d.path.arc.zeroradius</p>
<!-- Testing: arc() with zero radius draws a line to the start point -->
<canvas id="c358" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_arc_zeroradius() {
var canvas = document.getElementById('c358');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00'
ctx.fillRect(0, 0, 100, 50);
ctx.lineWidth = 50;
ctx.strokeStyle = '#0f0';
ctx.beginPath();
ctx.moveTo(0, 25);
ctx.arc(200, 25, 0, 0, Math.PI, true);
ctx.stroke();
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.arcTo.coincide.1.html ]]] -->
<p>Canvas test: 2d.path.arcTo.coincide.1</p>
<!-- Testing: arcTo() has no effect if P0 = P1 -->
<canvas id="c359" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_arcTo_coincide_1() {
var canvas = document.getElementById('c359');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.lineWidth = 50;
ctx.strokeStyle = '#0f0';
ctx.beginPath();
ctx.moveTo(0, 25);
ctx.arcTo(0, 25, 50, 1000, 1);
ctx.lineTo(100, 25);
ctx.stroke();
ctx.strokeStyle = '#f00';
ctx.beginPath();
ctx.moveTo(50, 25);
ctx.arcTo(50, 25, 100, 25, 1);
ctx.stroke();
isPixel(ctx, 50,1, 0,255,0,255, 0);
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 50,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.arcTo.coincide.2.html ]]] -->
<p>Canvas test: 2d.path.arcTo.coincide.2</p>
<!-- Testing: arcTo() draws a straight line to P1 if P1 = P2 -->
<canvas id="c360" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_arcTo_coincide_2() {
var canvas = document.getElementById('c360');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.lineWidth = 50;
ctx.strokeStyle = '#0f0';
ctx.beginPath();
ctx.moveTo(0, 25);
ctx.arcTo(100, 25, 100, 25, 1);
ctx.stroke();
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.arcTo.collinear.1.html ]]] -->
<p>Canvas test: 2d.path.arcTo.collinear.1</p>
<!-- Testing: arcTo() with all points on a line, and P1 between P0/P2, draws a straight line to P1 -->
<canvas id="c361" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_arcTo_collinear_1() {
var canvas = document.getElementById('c361');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.lineWidth = 50;
ctx.strokeStyle = '#0f0';
ctx.beginPath();
ctx.moveTo(0, 25);
ctx.arcTo(100, 25, 200, 25, 1);
ctx.stroke();
ctx.strokeStyle = '#f00';
ctx.beginPath();
ctx.moveTo(-100, 25);
ctx.arcTo(0, 25, 100, 25, 1);
ctx.stroke();
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.arcTo.collinear.2.html ]]] -->
<p>Canvas test: 2d.path.arcTo.collinear.2</p>
<!-- Testing: arcTo() with all points on a line, and P2 between P0/P1, draws an infinite line along P1..P2 -->
<canvas id="c362" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_arcTo_collinear_2() {
var canvas = document.getElementById('c362');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.lineWidth = 50;
ctx.strokeStyle = '#0f0';
ctx.beginPath();
ctx.moveTo(1000, 25);
ctx.arcTo(1100, 25, 1050, 25, 1);
ctx.stroke();
ctx.strokeStyle = '#f00';
ctx.beginPath();
ctx.moveTo(0, 25);
ctx.arcTo(100, 25, -50, 25, 1);
ctx.stroke();
todo_isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.arcTo.collinear.3.html ]]] -->
<p>Canvas test: 2d.path.arcTo.collinear.3</p>
<!-- Testing: arcTo() with all points on a line, and P0 between P1/P2, draws an infinite line along P1..P2 -->
<canvas id="c363" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_arcTo_collinear_3() {
var canvas = document.getElementById('c363');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.lineWidth = 50;
ctx.strokeStyle = '#0f0';
ctx.beginPath();
ctx.moveTo(150, 25);
ctx.arcTo(200, 25, 100, 25, 1);
ctx.stroke();
ctx.strokeStyle = '#f00';
ctx.beginPath();
ctx.moveTo(0, 25);
ctx.arcTo(100, 25, 50, 25, 1);
ctx.stroke();
todo_isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.arcTo.emptysubpath.html ]]] -->
<p>Canvas test: 2d.path.arcTo.emptysubpath</p>
<!-- Testing: arcTo() does nothing if there are no subpaths -->
<canvas id="c364" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_arcTo_emptysubpath() {
var canvas = document.getElementById('c364');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.lineWidth = 50;
ctx.strokeStyle = '#f00';
ctx.beginPath();
ctx.arcTo(0, 25, 0, 25, 0.1);
ctx.arcTo(100, 25, 100, 25, 0.1);
ctx.stroke();
todo_isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.arcTo.negative.html ]]] -->
<p>Canvas test: 2d.path.arcTo.negative</p>
<!-- Testing: arcTo() with negative radius throws an exception -->
<canvas id="c365" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_arcTo_negative() {
var canvas = document.getElementById('c365');
var ctx = canvas.getContext('2d');
var _thrown = undefined; try {
ctx.arcTo(0, 0, 0, 0, -1);
} catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError");
}
</script>
<!-- [[[ test_2d.path.arcTo.nonfinite.html ]]] -->
<p>Canvas test: 2d.path.arcTo.nonfinite</p>
<!-- Testing: arcTo() with Infinity/NaN is ignored -->
<canvas id="c366" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_arcTo_nonfinite() {
var canvas = document.getElementById('c366');
var ctx = canvas.getContext('2d');
var _thrown_outer = false;
try {
ctx.moveTo(0, 0);
ctx.lineTo(100, 0);
ctx.arcTo(Infinity, 50, 0, 50, 0);
ctx.arcTo(-Infinity, 50, 0, 50, 0);
ctx.arcTo(NaN, 50, 0, 50, 0);
ctx.arcTo(0, Infinity, 0, 50, 0);
ctx.arcTo(0, -Infinity, 0, 50, 0);
ctx.arcTo(0, NaN, 0, 50, 0);
ctx.arcTo(0, 50, Infinity, 50, 0);
ctx.arcTo(0, 50, -Infinity, 50, 0);
ctx.arcTo(0, 50, NaN, 50, 0);
ctx.arcTo(0, 50, 0, Infinity, 0);
ctx.arcTo(0, 50, 0, -Infinity, 0);
ctx.arcTo(0, 50, 0, NaN, 0);
ctx.arcTo(0, 50, 0, 50, Infinity);
ctx.arcTo(0, 50, 0, 50, -Infinity);
ctx.arcTo(0, 50, 0, 50, NaN);
ctx.arcTo(Infinity, Infinity, 0, 50, 0);
ctx.arcTo(Infinity, Infinity, Infinity, 50, 0);
ctx.arcTo(Infinity, Infinity, Infinity, Infinity, 0);
ctx.arcTo(Infinity, Infinity, Infinity, Infinity, Infinity);
ctx.arcTo(Infinity, Infinity, Infinity, 50, Infinity);
ctx.arcTo(Infinity, Infinity, 0, Infinity, 0);
ctx.arcTo(Infinity, Infinity, 0, Infinity, Infinity);
ctx.arcTo(Infinity, Infinity, 0, 50, Infinity);
ctx.arcTo(Infinity, 50, Infinity, 50, 0);
ctx.arcTo(Infinity, 50, Infinity, Infinity, 0);
ctx.arcTo(Infinity, 50, Infinity, Infinity, Infinity);
ctx.arcTo(Infinity, 50, Infinity, 50, Infinity);
ctx.arcTo(Infinity, 50, 0, Infinity, 0);
ctx.arcTo(Infinity, 50, 0, Infinity, Infinity);
ctx.arcTo(Infinity, 50, 0, 50, Infinity);
ctx.arcTo(0, Infinity, Infinity, 50, 0);
ctx.arcTo(0, Infinity, Infinity, Infinity, 0);
ctx.arcTo(0, Infinity, Infinity, Infinity, Infinity);
ctx.arcTo(0, Infinity, Infinity, 50, Infinity);
ctx.arcTo(0, Infinity, 0, Infinity, 0);
ctx.arcTo(0, Infinity, 0, Infinity, Infinity);
ctx.arcTo(0, Infinity, 0, 50, Infinity);
ctx.arcTo(0, 50, Infinity, Infinity, 0);
ctx.arcTo(0, 50, Infinity, Infinity, Infinity);
ctx.arcTo(0, 50, Infinity, 50, Infinity);
ctx.arcTo(0, 50, 0, Infinity, Infinity);
ctx.lineTo(100, 50);
ctx.lineTo(0, 50);
ctx.fillStyle = '#0f0';
ctx.fill();
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 90,45, 0,255,0,255, 0);
} catch (e) {
_thrown_outer = true;
}
ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
}
</script>
<!-- [[[ test_2d.path.arcTo.scale.html ]]] -->
<p>Canvas test: 2d.path.arcTo.scale</p>
<!-- Testing: arcTo scales the curve, not just the control points -->
<canvas id="c367" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_arcTo_scale() {
var canvas = document.getElementById('c367');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = '#0f0';
ctx.beginPath();
ctx.moveTo(0, 50);
ctx.translate(100, 0);
ctx.scale(0.1, 1);
ctx.arcTo(50, 50, 50, 0, 50);
ctx.lineTo(-1000, 0);
ctx.fill();
isPixel(ctx, 0,0, 0,255,0,255, 0);
isPixel(ctx, 50,0, 0,255,0,255, 0);
isPixel(ctx, 99,0, 0,255,0,255, 0);
isPixel(ctx, 0,25, 0,255,0,255, 0);
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 99,25, 0,255,0,255, 0);
isPixel(ctx, 0,49, 0,255,0,255, 0);
isPixel(ctx, 50,49, 0,255,0,255, 0);
isPixel(ctx, 99,49, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.arcTo.shape.curve1.html ]]] -->
<p>Canvas test: 2d.path.arcTo.shape.curve1</p>
<!-- Testing: arcTo() curves in the right kind of shape -->
<canvas id="c368" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_arcTo_shape_curve1() {
var canvas = document.getElementById('c368');
var ctx = canvas.getContext('2d');
var tol = 1.5; // tolerance to avoid antialiasing artifacts
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.strokeStyle = '#f00';
ctx.lineWidth = 10;
ctx.beginPath();
ctx.moveTo(10, 25);
ctx.arcTo(75, 25, 75, 60, 20);
ctx.stroke();
ctx.fillStyle = '#0f0';
ctx.beginPath();
ctx.rect(10, 20, 45, 10);
ctx.moveTo(80, 45);
ctx.arc(55, 45, 25+tol, 0, -Math.PI/2, true);
ctx.arc(55, 45, 15-tol, -Math.PI/2, 0, false);
ctx.fill();
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 55,19, 0,255,0,255, 0);
isPixel(ctx, 55,20, 0,255,0,255, 0);
isPixel(ctx, 55,21, 0,255,0,255, 0);
isPixel(ctx, 64,22, 0,255,0,255, 0);
isPixel(ctx, 65,21, 0,255,0,255, 0);
isPixel(ctx, 72,28, 0,255,0,255, 0);
isPixel(ctx, 73,27, 0,255,0,255, 0);
isPixel(ctx, 78,36, 0,255,0,255, 0);
isPixel(ctx, 79,35, 0,255,0,255, IsAzureSkia() ? 1 : 0);
isPixel(ctx, 80,44, 0,255,0,255, 0);
isPixel(ctx, 80,45, 0,255,0,255, 0);
isPixel(ctx, 80,46, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.arcTo.shape.curve2.html ]]] -->
<p>Canvas test: 2d.path.arcTo.shape.curve2</p>
<!-- Testing: arcTo() curves in the right kind of shape -->
<canvas id="c369" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_arcTo_shape_curve2() {
var canvas = document.getElementById('c369');
var ctx = canvas.getContext('2d');
var tol = 1.5; // tolerance to avoid antialiasing artifacts
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = '#f00';
ctx.beginPath();
ctx.rect(10, 20, 45, 10);
ctx.moveTo(80, 45);
ctx.arc(55, 45, 25-tol, 0, -Math.PI/2, true);
ctx.arc(55, 45, 15+tol, -Math.PI/2, 0, false);
ctx.fill();
ctx.strokeStyle = '#0f0';
ctx.lineWidth = 10;
ctx.beginPath();
ctx.moveTo(10, 25);
ctx.arcTo(75, 25, 75, 60, 20);
ctx.stroke();
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 55,19, 0,255,0,255, 0);
isPixel(ctx, 55,20, 0,255,0,255, 0);
isPixel(ctx, 55,21, 0,255,0,255, 0);
isPixel(ctx, 64,22, 0,255,0,255, IsAzureSkia() ? 1 : 0);
isPixel(ctx, 65,21, 0,255,0,255, 0);
isPixel(ctx, 72,28, 0,255,0,255, 0);
isPixel(ctx, 73,27, 0,255,0,255, IsAzureSkia() ? 1 : 0);
isPixel(ctx, 78,36, 0,255,0,255, IsAzureSkia() ? 1 : 0);
isPixel(ctx, 79,35, 0,255,0,255, 0);
isPixel(ctx, 80,44, 0,255,0,255, 0);
isPixel(ctx, 80,45, 0,255,0,255, 0);
isPixel(ctx, 80,46, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.arcTo.shape.end.html ]]] -->
<p>Canvas test: 2d.path.arcTo.shape.end</p>
<!-- Testing: arcTo() does not draw anything from P1 to P2 -->
<canvas id="c370" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_arcTo_shape_end() {
var canvas = document.getElementById('c370');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.strokeStyle = '#f00';
ctx.lineWidth = 50;
ctx.beginPath();
ctx.moveTo(-100, -100);
ctx.arcTo(-100, 25, 200, 25, 10);
ctx.stroke();
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.arcTo.shape.start.html ]]] -->
<p>Canvas test: 2d.path.arcTo.shape.start</p>
<!-- Testing: arcTo() draws a straight line from P0 to P1 -->
<canvas id="c371" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_arcTo_shape_start() {
var canvas = document.getElementById('c371');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.strokeStyle = '#0f0';
ctx.lineWidth = 50;
ctx.beginPath();
ctx.moveTo(0, 25);
ctx.arcTo(200, 25, 200, 50, 10);
ctx.stroke();
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.arcTo.transformation.html ]]] -->
<p>Canvas test: 2d.path.arcTo.transformation</p>
<!-- Testing: arcTo joins up to the last subpath point correctly -->
<canvas id="c372" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_arcTo_transformation() {
var canvas = document.getElementById('c372');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = '#0f0';
ctx.beginPath();
ctx.moveTo(0, 50);
ctx.translate(100, 0);
ctx.arcTo(50, 50, 50, 0, 50);
ctx.lineTo(-100, 0);
ctx.fill();
isPixel(ctx, 0,0, 0,255,0,255, 0);
isPixel(ctx, 50,0, 0,255,0,255, 0);
isPixel(ctx, 99,0, 0,255,0,255, 0);
isPixel(ctx, 0,25, 0,255,0,255, 0);
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 99,25, 0,255,0,255, 0);
isPixel(ctx, 0,49, 0,255,0,255, 0);
isPixel(ctx, 50,49, 0,255,0,255, 0);
isPixel(ctx, 99,49, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.arcTo.zero.1.html ]]] -->
<p>Canvas test: 2d.path.arcTo.zero.1</p>
<!-- Testing: arcTo() with zero radius draws a straight line from P0 to P1 -->
<canvas id="c373" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_arcTo_zero_1() {
var canvas = document.getElementById('c373');
var ctx = canvas.getContext('2d');
var _thrown_outer = false;
try {
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.lineWidth = 50;
ctx.strokeStyle = '#0f0';
ctx.beginPath();
ctx.moveTo(0, 25);
ctx.arcTo(100, 25, 100, 100, 0);
ctx.stroke();
ctx.strokeStyle = '#f00';
ctx.beginPath();
ctx.moveTo(0, -25);
ctx.arcTo(50, -25, 50, 50, 0);
ctx.stroke();
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.path.arcTo.zero.2.html ]]] -->
<p>Canvas test: 2d.path.arcTo.zero.2</p>
<!-- Testing: arcTo() with zero radius draws a straight line from P0 to P1, even when all points are collinear -->
<canvas id="c374" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_arcTo_zero_2() {
var canvas = document.getElementById('c374');
var ctx = canvas.getContext('2d');
var _thrown_outer = false;
try {
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.lineWidth = 50;
ctx.strokeStyle = '#0f0';
ctx.beginPath();
ctx.moveTo(0, 25);
ctx.arcTo(100, 25, -100, 25, 0);
ctx.stroke();
ctx.strokeStyle = '#f00';
ctx.beginPath();
ctx.moveTo(100, 25);
ctx.arcTo(200, 25, 50, 25, 0);
ctx.stroke();
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.path.beginPath.html ]]] -->
<p>Canvas test: 2d.path.beginPath</p>
<canvas id="c375" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_beginPath() {
var canvas = document.getElementById('c375');
var ctx = canvas.getContext('2d');
ctx.rect(0, 0, 100, 50);
ctx.beginPath();
ctx.fillStyle = '#f00';
ctx.fill();
isPixel(ctx, 50,25, 0,0,0,0, 0);
}
</script>
<!-- [[[ test_2d.path.bezierCurveTo.basic.html ]]] -->
<p>Canvas test: 2d.path.bezierCurveTo.basic</p>
<canvas id="c376" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_bezierCurveTo_basic() {
var canvas = document.getElementById('c376');
var ctx = canvas.getContext('2d');
ctx.strokeStyle = '#0f0';
ctx.lineWidth = 50;
ctx.beginPath();
ctx.moveTo(0, 25);
ctx.bezierCurveTo(100, 25, 100, 25, 100, 25);
ctx.stroke();
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.bezierCurveTo.emptysubpath.html ]]] -->
<p>Canvas test: 2d.path.bezierCurveTo.emptysubpath</p>
<canvas id="c377" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_bezierCurveTo_emptysubpath() {
var canvas = document.getElementById('c377');
var ctx = canvas.getContext('2d');
ctx.strokeStyle = '#f00';
ctx.lineWidth = 50;
ctx.beginPath();
ctx.bezierCurveTo(0, 25, 0, 25, 0, 25);
ctx.bezierCurveTo(100, 25, 100, 25, 100, 25);
ctx.stroke();
todo_isPixel(ctx, 50,25, 0,0,0,0, 0);
}
</script>
<!-- [[[ test_2d.path.bezierCurveTo.nonfinite.html ]]] -->
<p>Canvas test: 2d.path.bezierCurveTo.nonfinite</p>
<!-- Testing: bezierCurveTo() with Infinity/NaN is ignored -->
<canvas id="c378" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_bezierCurveTo_nonfinite() {
var canvas = document.getElementById('c378');
var ctx = canvas.getContext('2d');
var _thrown_outer = false;
try {
ctx.moveTo(0, 0);
ctx.lineTo(100, 0);
ctx.bezierCurveTo(Infinity, 50, 0, 50, 0, 50);
ctx.bezierCurveTo(-Infinity, 50, 0, 50, 0, 50);
ctx.bezierCurveTo(NaN, 50, 0, 50, 0, 50);
ctx.bezierCurveTo(0, Infinity, 0, 50, 0, 50);
ctx.bezierCurveTo(0, -Infinity, 0, 50, 0, 50);
ctx.bezierCurveTo(0, NaN, 0, 50, 0, 50);
ctx.bezierCurveTo(0, 50, Infinity, 50, 0, 50);
ctx.bezierCurveTo(0, 50, -Infinity, 50, 0, 50);
ctx.bezierCurveTo(0, 50, NaN, 50, 0, 50);
ctx.bezierCurveTo(0, 50, 0, Infinity, 0, 50);
ctx.bezierCurveTo(0, 50, 0, -Infinity, 0, 50);
ctx.bezierCurveTo(0, 50, 0, NaN, 0, 50);
ctx.bezierCurveTo(0, 50, 0, 50, Infinity, 50);
ctx.bezierCurveTo(0, 50, 0, 50, -Infinity, 50);
ctx.bezierCurveTo(0, 50, 0, 50, NaN, 50);
ctx.bezierCurveTo(0, 50, 0, 50, 0, Infinity);
ctx.bezierCurveTo(0, 50, 0, 50, 0, -Infinity);
ctx.bezierCurveTo(0, 50, 0, 50, 0, NaN);
ctx.bezierCurveTo(Infinity, Infinity, 0, 50, 0, 50);
ctx.bezierCurveTo(Infinity, Infinity, Infinity, 50, 0, 50);
ctx.bezierCurveTo(Infinity, Infinity, Infinity, Infinity, 0, 50);
ctx.bezierCurveTo(Infinity, Infinity, Infinity, Infinity, Infinity, 50);
ctx.bezierCurveTo(Infinity, Infinity, Infinity, Infinity, Infinity, Infinity);
ctx.bezierCurveTo(Infinity, Infinity, Infinity, Infinity, 0, Infinity);
ctx.bezierCurveTo(Infinity, Infinity, Infinity, 50, Infinity, 50);
ctx.bezierCurveTo(Infinity, Infinity, Infinity, 50, Infinity, Infinity);
ctx.bezierCurveTo(Infinity, Infinity, Infinity, 50, 0, Infinity);
ctx.bezierCurveTo(Infinity, Infinity, 0, Infinity, 0, 50);
ctx.bezierCurveTo(Infinity, Infinity, 0, Infinity, Infinity, 50);
ctx.bezierCurveTo(Infinity, Infinity, 0, Infinity, Infinity, Infinity);
ctx.bezierCurveTo(Infinity, Infinity, 0, Infinity, 0, Infinity);
ctx.bezierCurveTo(Infinity, Infinity, 0, 50, Infinity, 50);
ctx.bezierCurveTo(Infinity, Infinity, 0, 50, Infinity, Infinity);
ctx.bezierCurveTo(Infinity, Infinity, 0, 50, 0, Infinity);
ctx.bezierCurveTo(Infinity, 50, Infinity, 50, 0, 50);
ctx.bezierCurveTo(Infinity, 50, Infinity, Infinity, 0, 50);
ctx.bezierCurveTo(Infinity, 50, Infinity, Infinity, Infinity, 50);
ctx.bezierCurveTo(Infinity, 50, Infinity, Infinity, Infinity, Infinity);
ctx.bezierCurveTo(Infinity, 50, Infinity, Infinity, 0, Infinity);
ctx.bezierCurveTo(Infinity, 50, Infinity, 50, Infinity, 50);
ctx.bezierCurveTo(Infinity, 50, Infinity, 50, Infinity, Infinity);
ctx.bezierCurveTo(Infinity, 50, Infinity, 50, 0, Infinity);
ctx.bezierCurveTo(Infinity, 50, 0, Infinity, 0, 50);
ctx.bezierCurveTo(Infinity, 50, 0, Infinity, Infinity, 50);
ctx.bezierCurveTo(Infinity, 50, 0, Infinity, Infinity, Infinity);
ctx.bezierCurveTo(Infinity, 50, 0, Infinity, 0, Infinity);
ctx.bezierCurveTo(Infinity, 50, 0, 50, Infinity, 50);
ctx.bezierCurveTo(Infinity, 50, 0, 50, Infinity, Infinity);
ctx.bezierCurveTo(Infinity, 50, 0, 50, 0, Infinity);
ctx.bezierCurveTo(0, Infinity, Infinity, 50, 0, 50);
ctx.bezierCurveTo(0, Infinity, Infinity, Infinity, 0, 50);
ctx.bezierCurveTo(0, Infinity, Infinity, Infinity, Infinity, 50);
ctx.bezierCurveTo(0, Infinity, Infinity, Infinity, Infinity, Infinity);
ctx.bezierCurveTo(0, Infinity, Infinity, Infinity, 0, Infinity);
ctx.bezierCurveTo(0, Infinity, Infinity, 50, Infinity, 50);
ctx.bezierCurveTo(0, Infinity, Infinity, 50, Infinity, Infinity);
ctx.bezierCurveTo(0, Infinity, Infinity, 50, 0, Infinity);
ctx.bezierCurveTo(0, Infinity, 0, Infinity, 0, 50);
ctx.bezierCurveTo(0, Infinity, 0, Infinity, Infinity, 50);
ctx.bezierCurveTo(0, Infinity, 0, Infinity, Infinity, Infinity);
ctx.bezierCurveTo(0, Infinity, 0, Infinity, 0, Infinity);
ctx.bezierCurveTo(0, Infinity, 0, 50, Infinity, 50);
ctx.bezierCurveTo(0, Infinity, 0, 50, Infinity, Infinity);
ctx.bezierCurveTo(0, Infinity, 0, 50, 0, Infinity);
ctx.bezierCurveTo(0, 50, Infinity, Infinity, 0, 50);
ctx.bezierCurveTo(0, 50, Infinity, Infinity, Infinity, 50);
ctx.bezierCurveTo(0, 50, Infinity, Infinity, Infinity, Infinity);
ctx.bezierCurveTo(0, 50, Infinity, Infinity, 0, Infinity);
ctx.bezierCurveTo(0, 50, Infinity, 50, Infinity, 50);
ctx.bezierCurveTo(0, 50, Infinity, 50, Infinity, Infinity);
ctx.bezierCurveTo(0, 50, Infinity, 50, 0, Infinity);
ctx.bezierCurveTo(0, 50, 0, Infinity, Infinity, 50);
ctx.bezierCurveTo(0, 50, 0, Infinity, Infinity, Infinity);
ctx.bezierCurveTo(0, 50, 0, Infinity, 0, Infinity);
ctx.bezierCurveTo(0, 50, 0, 50, Infinity, Infinity);
ctx.lineTo(100, 50);
ctx.lineTo(0, 50);
ctx.fillStyle = '#0f0';
ctx.fill();
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 90,45, 0,255,0,255, 0);
} catch (e) {
_thrown_outer = true;
}
ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
}
</script>
<!-- [[[ test_2d.path.bezierCurveTo.scaled.html ]]] -->
<p>Canvas test: 2d.path.bezierCurveTo.scaled</p>
<canvas id="c379" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_bezierCurveTo_scaled() {
var canvas = document.getElementById('c379');
var ctx = canvas.getContext('2d');
ctx.scale(1000, 1000);
ctx.strokeStyle = '#0f0';
ctx.lineWidth = 0.055;
ctx.beginPath();
ctx.moveTo(-2, 3.1);
ctx.bezierCurveTo(-2, -1, 2.1, -1, 2.1, 3.1);
ctx.stroke();
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.bezierCurveTo.shape.html ]]] -->
<p>Canvas test: 2d.path.bezierCurveTo.shape</p>
<canvas id="c380" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_bezierCurveTo_shape() {
var canvas = document.getElementById('c380');
var ctx = canvas.getContext('2d');
ctx.strokeStyle = '#0f0';
ctx.lineWidth = 55;
ctx.beginPath();
ctx.moveTo(-2000, 3100);
ctx.bezierCurveTo(-2000, -1000, 2100, -1000, 2100, 3100);
ctx.stroke();
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.clip.basic.1.html ]]] -->
<p>Canvas test: 2d.path.clip.basic.1</p>
<canvas id="c381" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_clip_basic_1() {
var canvas = document.getElementById('c381');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.beginPath();
ctx.rect(0, 0, 100, 50);
ctx.clip();
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.clip.basic.2.html ]]] -->
<p>Canvas test: 2d.path.clip.basic.2</p>
<canvas id="c382" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_clip_basic_2() {
var canvas = document.getElementById('c382');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.beginPath();
ctx.rect(-100, 0, 100, 50);
ctx.clip();
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.clip.empty.html ]]] -->
<p>Canvas test: 2d.path.clip.empty</p>
<canvas id="c383" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_clip_empty() {
var canvas = document.getElementById('c383');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.beginPath();
ctx.clip();
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.clip.intersect.html ]]] -->
<p>Canvas test: 2d.path.clip.intersect</p>
<canvas id="c384" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_clip_intersect() {
var canvas = document.getElementById('c384');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.beginPath();
ctx.rect(0, 0, 50, 50);
ctx.clip();
ctx.beginPath();
ctx.rect(50, 0, 50, 50)
ctx.clip();
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.clip.unaffected.html ]]] -->
<p>Canvas test: 2d.path.clip.unaffected</p>
<canvas id="c385" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_clip_unaffected() {
var canvas = document.getElementById('c385');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = '#0f0';
ctx.beginPath();
ctx.lineTo(0, 0);
ctx.lineTo(0, 50);
ctx.lineTo(100, 50);
ctx.lineTo(100, 0);
ctx.clip();
ctx.lineTo(0, 0);
ctx.fill();
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.clip.winding.1.html ]]] -->
<p>Canvas test: 2d.path.clip.winding.1</p>
<canvas id="c386" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_clip_winding_1() {
var canvas = document.getElementById('c386');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.beginPath();
ctx.moveTo(-10, -10);
ctx.lineTo(110, -10);
ctx.lineTo(110, 60);
ctx.lineTo(-10, 60);
ctx.lineTo(-10, -10);
ctx.lineTo(0, 0);
ctx.lineTo(0, 50);
ctx.lineTo(100, 50);
ctx.lineTo(100, 0);
ctx.clip();
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.clip.winding.2.html ]]] -->
<p>Canvas test: 2d.path.clip.winding.2</p>
<canvas id="c387" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_clip_winding_2() {
var canvas = document.getElementById('c387');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.beginPath();
ctx.moveTo(-10, -10);
ctx.lineTo(110, -10);
ctx.lineTo(110, 60);
ctx.lineTo(-10, 60);
ctx.lineTo(-10, -10);
ctx.clip();
ctx.beginPath();
ctx.lineTo(0, 0);
ctx.lineTo(0, 50);
ctx.lineTo(100, 50);
ctx.lineTo(100, 0);
ctx.lineTo(0, 0);
ctx.clip();
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.closePath.empty.html ]]] -->
<p>Canvas test: 2d.path.closePath.empty</p>
<canvas id="c388" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_closePath_empty() {
var canvas = document.getElementById('c388');
var ctx = canvas.getContext('2d');
ctx.closePath();
ctx.fillStyle = '#f00';
ctx.fill();
isPixel(ctx, 50,25, 0,0,0,0, 0);
}
</script>
<!-- [[[ test_2d.path.closePath.newline.html ]]] -->
<p>Canvas test: 2d.path.closePath.newline</p>
<canvas id="c389" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_closePath_newline() {
var canvas = document.getElementById('c389');
var ctx = canvas.getContext('2d');
ctx.strokeStyle = '#0f0';
ctx.lineWidth = 50;
ctx.moveTo(-100, 25);
ctx.lineTo(-100, -100);
ctx.lineTo(200, -100);
ctx.lineTo(200, 25);
ctx.closePath();
ctx.stroke();
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.closePath.nextpoint.html ]]] -->
<p>Canvas test: 2d.path.closePath.nextpoint</p>
<canvas id="c390" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_closePath_nextpoint() {
var canvas = document.getElementById('c390');
var ctx = canvas.getContext('2d');
ctx.strokeStyle = '#0f0';
ctx.lineWidth = 50;
ctx.moveTo(-100, 25);
ctx.lineTo(-100, -1000);
ctx.closePath();
ctx.lineTo(1000, 25);
ctx.stroke();
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.fill.closed.basic.html ]]] -->
<p>Canvas test: 2d.path.fill.closed.basic</p>
<canvas id="c391" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_fill_closed_basic() {
var canvas = document.getElementById('c391');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = '#0f0';
ctx.moveTo(0, 0);
ctx.lineTo(100, 0);
ctx.lineTo(100, 50);
ctx.lineTo(0, 50);
ctx.fill();
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.fill.closed.unaffected.html ]]] -->
<p>Canvas test: 2d.path.fill.closed.unaffected</p>
<canvas id="c392" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_fill_closed_unaffected() {
var canvas = document.getElementById('c392');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#00f';
ctx.fillRect(0, 0, 100, 50);
ctx.moveTo(0, 0);
ctx.lineTo(100, 0);
ctx.lineTo(100, 50);
ctx.fillStyle = '#f00';
ctx.fill();
ctx.lineTo(0, 50);
ctx.fillStyle = '#0f0';
ctx.fill();
isPixel(ctx, 90,10, 0,255,0,255, 0);
isPixel(ctx, 10,40, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.fill.overlap.html ]]] -->
<p>Canvas test: 2d.path.fill.overlap</p>
<canvas id="c393" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_fill_overlap() {
var canvas = document.getElementById('c393');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
ctx.rect(0, 0, 100, 50);
ctx.closePath();
ctx.rect(10, 10, 80, 30);
ctx.fill();
isPixel(ctx, 50,25, 0,127,0,255, 1);
}
</script>
<!-- [[[ test_2d.path.fill.winding.add.html ]]] -->
<p>Canvas test: 2d.path.fill.winding.add</p>
<canvas id="c394" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_fill_winding_add() {
var canvas = document.getElementById('c394');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = '#0f0';
ctx.moveTo(-10, -10);
ctx.lineTo(110, -10);
ctx.lineTo(110, 60);
ctx.lineTo(-10, 60);
ctx.lineTo(-10, -10);
ctx.lineTo(0, 0);
ctx.lineTo(100, 0);
ctx.lineTo(100, 50);
ctx.lineTo(0, 50);
ctx.fill();
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.fill.winding.subtract.1.html ]]] -->
<p>Canvas test: 2d.path.fill.winding.subtract.1</p>
<canvas id="c395" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_fill_winding_subtract_1() {
var canvas = document.getElementById('c395');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = '#f00';
ctx.moveTo(-10, -10);
ctx.lineTo(110, -10);
ctx.lineTo(110, 60);
ctx.lineTo(-10, 60);
ctx.lineTo(-10, -10);
ctx.lineTo(0, 0);
ctx.lineTo(0, 50);
ctx.lineTo(100, 50);
ctx.lineTo(100, 0);
ctx.fill();
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.fill.winding.subtract.2.html ]]] -->
<p>Canvas test: 2d.path.fill.winding.subtract.2</p>
<canvas id="c396" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_fill_winding_subtract_2() {
var canvas = document.getElementById('c396');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = '#f00';
ctx.moveTo(-10, -10);
ctx.lineTo(110, -10);
ctx.lineTo(110, 60);
ctx.lineTo(-10, 60);
ctx.moveTo(0, 0);
ctx.lineTo(0, 50);
ctx.lineTo(100, 50);
ctx.lineTo(100, 0);
ctx.fill();
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.fill.winding.subtract.3.html ]]] -->
<p>Canvas test: 2d.path.fill.winding.subtract.3</p>
<canvas id="c397" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_fill_winding_subtract_3() {
var canvas = document.getElementById('c397');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = '#0f0';
ctx.moveTo(-10, -10);
ctx.lineTo(110, -10);
ctx.lineTo(110, 60);
ctx.lineTo(-10, 60);
ctx.lineTo(-10, -10);
ctx.lineTo(-20, -20);
ctx.lineTo(120, -20);
ctx.lineTo(120, 70);
ctx.lineTo(-20, 70);
ctx.lineTo(-20, -20);
ctx.lineTo(0, 0);
ctx.lineTo(0, 50);
ctx.lineTo(100, 50);
ctx.lineTo(100, 0);
ctx.fill();
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.initial.html ]]] -->
<p>Canvas test: 2d.path.initial</p>
<canvas id="c398" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_initial() {
var canvas = document.getElementById('c398');
var ctx = canvas.getContext('2d');
ctx.lineTo(0, 0);
ctx.lineTo(100, 0);
ctx.lineTo(100, 50);
ctx.lineTo(0, 50);
ctx.closePath();
ctx.fillStyle = '#f00';
ctx.fill();
todo_isPixel(ctx, 50,25, 0,0,0,0, 0);
}
</script>
<!-- [[[ test_2d.path.isPointInPath.arc.html ]]] -->
<p>Canvas test: 2d.path.isPointInPath.arc</p>
<!-- Testing: isPointInPath() works on arcs -->
<canvas id="c399" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_isPointInPath_arc() {
var canvas = document.getElementById('c399');
var ctx = canvas.getContext('2d');
ctx.arc(50, 25, 10, 0, Math.PI, false);
ok(ctx.isPointInPath(50, 10) === false, "ctx.isPointInPath(50, 10) === false");
ok(ctx.isPointInPath(50, 20) === false, "ctx.isPointInPath(50, 20) === false");
ok(ctx.isPointInPath(50, 30) === true, "ctx.isPointInPath(50, 30) === true");
ok(ctx.isPointInPath(50, 40) === false, "ctx.isPointInPath(50, 40) === false");
ok(ctx.isPointInPath(30, 20) === false, "ctx.isPointInPath(30, 20) === false");
ok(ctx.isPointInPath(70, 20) === false, "ctx.isPointInPath(70, 20) === false");
ok(ctx.isPointInPath(30, 30) === false, "ctx.isPointInPath(30, 30) === false");
ok(ctx.isPointInPath(70, 30) === false, "ctx.isPointInPath(70, 30) === false");
}
</script>
<!-- [[[ test_2d.path.isPointInPath.basic.1.html ]]] -->
<p>Canvas test: 2d.path.isPointInPath.basic.1</p>
<!-- Testing: isPointInPath() detects whether the point is inside the path -->
<canvas id="c400" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_isPointInPath_basic_1() {
var canvas = document.getElementById('c400');
var ctx = canvas.getContext('2d');
ctx.rect(0, 0, 20, 20);
ok(ctx.isPointInPath(10, 10) === true, "ctx.isPointInPath(10, 10) === true");
ok(ctx.isPointInPath(30, 10) === false, "ctx.isPointInPath(30, 10) === false");
}
</script>
<!-- [[[ test_2d.path.isPointInPath.basic.2.html ]]] -->
<p>Canvas test: 2d.path.isPointInPath.basic.2</p>
<!-- Testing: isPointInPath() detects whether the point is inside the path -->
<canvas id="c401" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_isPointInPath_basic_2() {
var canvas = document.getElementById('c401');
var ctx = canvas.getContext('2d');
ctx.rect(20, 0, 20, 20);
ok(ctx.isPointInPath(10, 10) === false, "ctx.isPointInPath(10, 10) === false");
ok(ctx.isPointInPath(30, 10) === true, "ctx.isPointInPath(30, 10) === true");
}
</script>
<!-- [[[ test_2d.path.isPointInPath.bezier.html ]]] -->
<p>Canvas test: 2d.path.isPointInPath.bezier</p>
<!-- Testing: isPointInPath() works on Bezier curves -->
<canvas id="c402" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_isPointInPath_bezier() {
var canvas = document.getElementById('c402');
var ctx = canvas.getContext('2d');
ctx.moveTo(25, 25);
ctx.bezierCurveTo(50, -50, 50, 100, 75, 25);
ok(ctx.isPointInPath(25, 20) == false, "ctx.isPointInPath(25, 20) == false");
ok(ctx.isPointInPath(25, 30) == false, "ctx.isPointInPath(25, 30) == false");
ok(ctx.isPointInPath(30, 20) == true, "ctx.isPointInPath(30, 20) == true");
ok(ctx.isPointInPath(30, 30) == false, "ctx.isPointInPath(30, 30) == false");
ok(ctx.isPointInPath(40, 2) == false, "ctx.isPointInPath(40, 2) == false");
ok(ctx.isPointInPath(40, 20) == true, "ctx.isPointInPath(40, 20) == true");
ok(ctx.isPointInPath(40, 30) == false, "ctx.isPointInPath(40, 30) == false");
ok(ctx.isPointInPath(40, 47) == false, "ctx.isPointInPath(40, 47) == false");
ok(ctx.isPointInPath(45, 20) == true, "ctx.isPointInPath(45, 20) == true");
ok(ctx.isPointInPath(45, 30) == false, "ctx.isPointInPath(45, 30) == false");
ok(ctx.isPointInPath(55, 20) == false, "ctx.isPointInPath(55, 20) == false");
ok(ctx.isPointInPath(55, 30) == true, "ctx.isPointInPath(55, 30) == true");
ok(ctx.isPointInPath(60, 2) == false, "ctx.isPointInPath(60, 2) == false");
ok(ctx.isPointInPath(60, 20) == false, "ctx.isPointInPath(60, 20) == false");
ok(ctx.isPointInPath(60, 30) == true, "ctx.isPointInPath(60, 30) == true");
ok(ctx.isPointInPath(60, 47) == false, "ctx.isPointInPath(60, 47) == false");
ok(ctx.isPointInPath(70, 20) == false, "ctx.isPointInPath(70, 20) == false");
ok(ctx.isPointInPath(70, 30) == true, "ctx.isPointInPath(70, 30) == true");
ok(ctx.isPointInPath(75, 20) == false, "ctx.isPointInPath(75, 20) == false");
ok(ctx.isPointInPath(75, 30) == false, "ctx.isPointInPath(75, 30) == false");
}
</script>
<!-- [[[ test_2d.path.isPointInPath.bigarc.html ]]] -->
<p>Canvas test: 2d.path.isPointInPath.bigarc</p>
<!-- Testing: isPointInPath() works on unclosed arcs larger than 2pi -->
<canvas id="c403" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_isPointInPath_bigarc() {
var canvas = document.getElementById('c403');
var ctx = canvas.getContext('2d');
ctx.arc(50, 25, 10, 0, 7, false);
ok(ctx.isPointInPath(50, 10) === false, "ctx.isPointInPath(50, 10) === false");
ok(ctx.isPointInPath(50, 20) === true, "ctx.isPointInPath(50, 20) === true");
ok(ctx.isPointInPath(50, 30) === true, "ctx.isPointInPath(50, 30) === true");
ok(ctx.isPointInPath(50, 40) === false, "ctx.isPointInPath(50, 40) === false");
ok(ctx.isPointInPath(30, 20) === false, "ctx.isPointInPath(30, 20) === false");
ok(ctx.isPointInPath(70, 20) === false, "ctx.isPointInPath(70, 20) === false");
ok(ctx.isPointInPath(30, 30) === false, "ctx.isPointInPath(30, 30) === false");
ok(ctx.isPointInPath(70, 30) === false, "ctx.isPointInPath(70, 30) === false");
}
</script>
<!-- [[[ test_2d.path.isPointInPath.edge.html ]]] -->
<p>Canvas test: 2d.path.isPointInPath.edge</p>
<!-- Testing: isPointInPath() counts points on the path as being inside -->
<canvas id="c404" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_isPointInPath_edge() {
var canvas = document.getElementById('c404');
var ctx = canvas.getContext('2d');
ctx.rect(0, 0, 20, 20);
ok(ctx.isPointInPath(0, 0) === true, "ctx.isPointInPath(0, 0) === true");
ok(ctx.isPointInPath(10, 0) === true, "ctx.isPointInPath(10, 0) === true");
ok(ctx.isPointInPath(20, 0) === true, "ctx.isPointInPath(20, 0) === true");
ok(ctx.isPointInPath(20, 10) === true, "ctx.isPointInPath(20, 10) === true");
ok(ctx.isPointInPath(20, 20) === true, "ctx.isPointInPath(20, 20) === true");
ok(ctx.isPointInPath(10, 20) === true, "ctx.isPointInPath(10, 20) === true");
ok(ctx.isPointInPath(0, 20) === true, "ctx.isPointInPath(0, 20) === true");
ok(ctx.isPointInPath(0, 10) === true, "ctx.isPointInPath(0, 10) === true");
ok(ctx.isPointInPath(10, -0.01) === false, "ctx.isPointInPath(10, -0.01) === false");
ok(ctx.isPointInPath(10, 20.01) === false, "ctx.isPointInPath(10, 20.01) === false");
ok(ctx.isPointInPath(-0.01, 10) === false, "ctx.isPointInPath(-0.01, 10) === false");
ok(ctx.isPointInPath(20.01, 10) === false, "ctx.isPointInPath(20.01, 10) === false");
}
</script>
<!-- [[[ test_2d.path.isPointInPath.empty.html ]]] -->
<p>Canvas test: 2d.path.isPointInPath.empty</p>
<!-- Testing: isPointInPath() works when there is no path -->
<canvas id="c405" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_isPointInPath_empty() {
var canvas = document.getElementById('c405');
var ctx = canvas.getContext('2d');
ok(ctx.isPointInPath(0, 0) === false, "ctx.isPointInPath(0, 0) === false");
}
</script>
<!-- [[[ test_2d.path.isPointInPath.nonfinite.html ]]] -->
<p>Canvas test: 2d.path.isPointInPath.nonfinite</p>
<!-- Testing: isPointInPath() returns false for non-finite arguments -->
<canvas id="c406" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_isPointInPath_nonfinite() {
var canvas = document.getElementById('c406');
var ctx = canvas.getContext('2d');
var _thrown_outer = false;
try {
ctx.rect(-100, -50, 200, 100);
ok(ctx.isPointInPath(Infinity, 0) === false, "ctx.isPointInPath(Infinity, 0) === false");
ok(ctx.isPointInPath(-Infinity, 0) === false, "ctx.isPointInPath(-Infinity, 0) === false");
ok(ctx.isPointInPath(NaN, 0) === false, "ctx.isPointInPath(NaN, 0) === false");
ok(ctx.isPointInPath(0, Infinity) === false, "ctx.isPointInPath(0, Infinity) === false");
ok(ctx.isPointInPath(0, -Infinity) === false, "ctx.isPointInPath(0, -Infinity) === false");
ok(ctx.isPointInPath(0, NaN) === false, "ctx.isPointInPath(0, NaN) === false");
ok(ctx.isPointInPath(NaN, NaN) === false, "ctx.isPointInPath(NaN, NaN) === false");
} catch (e) {
_thrown_outer = true;
}
ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
}
</script>
<!-- [[[ test_2d.path.isPointInPath.outside.html ]]] -->
<p>Canvas test: 2d.path.isPointInPath.outside</p>
<!-- Testing: isPointInPath() works on paths outside the canvas -->
<canvas id="c407" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_isPointInPath_outside() {
var canvas = document.getElementById('c407');
var ctx = canvas.getContext('2d');
ctx.rect(0, -100, 20, 20);
ctx.rect(20, -10, 20, 20);
ok(ctx.isPointInPath(10, -110) === false, "ctx.isPointInPath(10, -110) === false");
ok(ctx.isPointInPath(10, -90) === true, "ctx.isPointInPath(10, -90) === true");
ok(ctx.isPointInPath(10, -70) === false, "ctx.isPointInPath(10, -70) === false");
ok(ctx.isPointInPath(30, -20) === false, "ctx.isPointInPath(30, -20) === false");
ok(ctx.isPointInPath(30, 0) === true, "ctx.isPointInPath(30, 0) === true");
ok(ctx.isPointInPath(30, 20) === false, "ctx.isPointInPath(30, 20) === false");
}
</script>
<!-- [[[ test_2d.path.isPointInPath.subpath.html ]]] -->
<p>Canvas test: 2d.path.isPointInPath.subpath</p>
<!-- Testing: isPointInPath() uses the current path, not just the subpath -->
<canvas id="c408" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_isPointInPath_subpath() {
var canvas = document.getElementById('c408');
var ctx = canvas.getContext('2d');
ctx.rect(0, 0, 20, 20);
ctx.beginPath();
ctx.rect(20, 0, 20, 20);
ctx.closePath();
ctx.rect(40, 0, 20, 20);
ok(ctx.isPointInPath(10, 10) === false, "ctx.isPointInPath(10, 10) === false");
ok(ctx.isPointInPath(30, 10) === true, "ctx.isPointInPath(30, 10) === true");
ok(ctx.isPointInPath(50, 10) === true, "ctx.isPointInPath(50, 10) === true");
}
</script>
<!-- [[[ test_2d.path.isPointInPath.transform.1.html ]]] -->
<p>Canvas test: 2d.path.isPointInPath.transform.1 - bug 405300</p>
<!-- Testing: isPointInPath() handles transformations correctly -->
<canvas id="c409" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_isPointInPath_transform_1() {
var canvas = document.getElementById('c409');
var ctx = canvas.getContext('2d');
ctx.translate(50, 0);
ctx.rect(0, 0, 20, 20);
ok(ctx.isPointInPath(-40, 10) === false, "ctx.isPointInPath(-40, 10) === false");
ok(ctx.isPointInPath(10, 10) === false, "ctx.isPointInPath(10, 10) === false");
ok(ctx.isPointInPath(49, 10) === false, "ctx.isPointInPath(49, 10) === false");
ok(ctx.isPointInPath(51, 10) === true, "ctx.isPointInPath(51, 10) === true");
ok(ctx.isPointInPath(69, 10) === true, "ctx.isPointInPath(69, 10) === true");
ok(ctx.isPointInPath(71, 10) === false, "ctx.isPointInPath(71, 10) === false");
}
</script>
<!-- [[[ test_2d.path.isPointInPath.transform.2.html ]]] -->
<p>Canvas test: 2d.path.isPointInPath.transform.2 - bug 405300</p>
<!-- Testing: isPointInPath() handles transformations correctly -->
<canvas id="c410" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_isPointInPath_transform_2() {
var canvas = document.getElementById('c410');
var ctx = canvas.getContext('2d');
ctx.rect(50, 0, 20, 20);
ctx.translate(50, 0);
ok(ctx.isPointInPath(-40, 10) === false, "ctx.isPointInPath(-40, 10) === false");
ok(ctx.isPointInPath(10, 10) === false, "ctx.isPointInPath(10, 10) === false");
ok(ctx.isPointInPath(49, 10) === false, "ctx.isPointInPath(49, 10) === false");
ok(ctx.isPointInPath(51, 10) === true, "ctx.isPointInPath(51, 10) === true");
ok(ctx.isPointInPath(69, 10) === true, "ctx.isPointInPath(69, 10) === true");
ok(ctx.isPointInPath(71, 10) === false, "ctx.isPointInPath(71, 10) === false");
}
</script>
<!-- [[[ test_2d.path.isPointInPath.transform.3.html ]]] -->
<p>Canvas test: 2d.path.isPointInPath.transform.3 - bug 405300</p>
<!-- Testing: isPointInPath() handles transformations correctly -->
<canvas id="c411" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_isPointInPath_transform_3() {
var canvas = document.getElementById('c411');
var ctx = canvas.getContext('2d');
ctx.scale(-1, 1);
ctx.rect(-70, 0, 20, 20);
ok(ctx.isPointInPath(-40, 10) === false, "ctx.isPointInPath(-40, 10) === false");
ok(ctx.isPointInPath(10, 10) === false, "ctx.isPointInPath(10, 10) === false");
ok(ctx.isPointInPath(49, 10) === false, "ctx.isPointInPath(49, 10) === false");
ok(ctx.isPointInPath(51, 10) === true, "ctx.isPointInPath(51, 10) === true");
ok(ctx.isPointInPath(69, 10) === true, "ctx.isPointInPath(69, 10) === true");
ok(ctx.isPointInPath(71, 10) === false, "ctx.isPointInPath(71, 10) === false");
}
</script>
<!-- [[[ test_2d.path.isPointInPath.unclosed.html ]]] -->
<p>Canvas test: 2d.path.isPointInPath.unclosed</p>
<!-- Testing: isPointInPath() works on unclosed subpaths -->
<canvas id="c412" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_isPointInPath_unclosed() {
var canvas = document.getElementById('c412');
var ctx = canvas.getContext('2d');
ctx.moveTo(0, 0);
ctx.lineTo(20, 0);
ctx.lineTo(20, 20);
ctx.lineTo(0, 20);
ok(ctx.isPointInPath(10, 10) === true, "ctx.isPointInPath(10, 10) === true");
ok(ctx.isPointInPath(30, 10) === false, "ctx.isPointInPath(30, 10) === false");
}
</script>
<!-- [[[ test_2d.path.isPointInPath.winding.html ]]] -->
<p>Canvas test: 2d.path.isPointInPath.winding</p>
<!-- Testing: isPointInPath() uses the non-zero winding number rule -->
<canvas id="c413" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_isPointInPath_winding() {
var canvas = document.getElementById('c413');
var ctx = canvas.getContext('2d');
// Create a square ring, using opposite windings to make a hole in the centre
ctx.moveTo(0, 0);
ctx.lineTo(50, 0);
ctx.lineTo(50, 50);
ctx.lineTo(0, 50);
ctx.lineTo(0, 0);
ctx.lineTo(10, 10);
ctx.lineTo(10, 40);
ctx.lineTo(40, 40);
ctx.lineTo(40, 10);
ctx.lineTo(10, 10);
ok(ctx.isPointInPath(5, 5) === true, "ctx.isPointInPath(5, 5) === true");
ok(ctx.isPointInPath(25, 5) === true, "ctx.isPointInPath(25, 5) === true");
ok(ctx.isPointInPath(45, 5) === true, "ctx.isPointInPath(45, 5) === true");
ok(ctx.isPointInPath(5, 25) === true, "ctx.isPointInPath(5, 25) === true");
ok(ctx.isPointInPath(25, 25) === false, "ctx.isPointInPath(25, 25) === false");
ok(ctx.isPointInPath(45, 25) === true, "ctx.isPointInPath(45, 25) === true");
ok(ctx.isPointInPath(5, 45) === true, "ctx.isPointInPath(5, 45) === true");
ok(ctx.isPointInPath(25, 45) === true, "ctx.isPointInPath(25, 45) === true");
ok(ctx.isPointInPath(45, 45) === true, "ctx.isPointInPath(45, 45) === true");
}
</script>
<!-- [[[ test_2d.path.lineTo.basic.html ]]] -->
<p>Canvas test: 2d.path.lineTo.basic</p>
<canvas id="c414" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_lineTo_basic() {
var canvas = document.getElementById('c414');
var ctx = canvas.getContext('2d');
ctx.strokeStyle = '#0f0';
ctx.lineWidth = 50;
ctx.beginPath();
ctx.moveTo(0, 25);
ctx.lineTo(100, 25);
ctx.stroke();
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.lineTo.emptysubpath.html ]]] -->
<p>Canvas test: 2d.path.lineTo.emptysubpath</p>
<canvas id="c415" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_lineTo_emptysubpath() {
var canvas = document.getElementById('c415');
var ctx = canvas.getContext('2d');
ctx.strokeStyle = '#f00';
ctx.lineWidth = 50;
ctx.beginPath();
ctx.lineTo(0, 25);
ctx.lineTo(100, 25);
ctx.stroke();
todo_isPixel(ctx, 50,25, 0,0,0,0, 0);
}
</script>
<!-- [[[ test_2d.path.lineTo.nextpoint.html ]]] -->
<p>Canvas test: 2d.path.lineTo.nextpoint</p>
<canvas id="c416" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_lineTo_nextpoint() {
var canvas = document.getElementById('c416');
var ctx = canvas.getContext('2d');
ctx.strokeStyle = '#0f0';
ctx.lineWidth = 50;
ctx.beginPath();
ctx.moveTo(-100, -100);
ctx.lineTo(0, 25);
ctx.lineTo(100, 25);
ctx.stroke();
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.lineTo.nonfinite.html ]]] -->
<p>Canvas test: 2d.path.lineTo.nonfinite</p>
<!-- Testing: lineTo() with Infinity/NaN is ignored -->
<canvas id="c417" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_lineTo_nonfinite() {
var canvas = document.getElementById('c417');
var ctx = canvas.getContext('2d');
var _thrown_outer = false;
try {
ctx.moveTo(0, 0);
ctx.lineTo(100, 0);
ctx.lineTo(Infinity, 50);
ctx.lineTo(-Infinity, 50);
ctx.lineTo(NaN, 50);
ctx.lineTo(0, Infinity);
ctx.lineTo(0, -Infinity);
ctx.lineTo(0, NaN);
ctx.lineTo(Infinity, Infinity);
ctx.lineTo(100, 50);
ctx.lineTo(0, 50);
ctx.fillStyle = '#0f0';
ctx.fill();
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 90,45, 0,255,0,255, 0);
} catch (e) {
_thrown_outer = true;
}
ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
}
</script>
<!-- [[[ test_2d.path.moveTo.basic.html ]]] -->
<p>Canvas test: 2d.path.moveTo.basic</p>
<canvas id="c418" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_moveTo_basic() {
var canvas = document.getElementById('c418');
var ctx = canvas.getContext('2d');
ctx.rect(0, 0, 10, 50);
ctx.moveTo(100, 0);
ctx.lineTo(10, 0);
ctx.lineTo(10, 50);
ctx.lineTo(100, 50);
ctx.fillStyle = '#0f0';
ctx.fill();
isPixel(ctx, 90,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.moveTo.multiple.html ]]] -->
<p>Canvas test: 2d.path.moveTo.multiple</p>
<canvas id="c419" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_moveTo_multiple() {
var canvas = document.getElementById('c419');
var ctx = canvas.getContext('2d');
ctx.moveTo(0, 25);
ctx.moveTo(100, 25);
ctx.moveTo(0, 25);
ctx.lineTo(100, 25);
ctx.strokeStyle = '#0f0';
ctx.lineWidth = 50;
ctx.stroke();
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.moveTo.newsubpath.html ]]] -->
<p>Canvas test: 2d.path.moveTo.newsubpath</p>
<canvas id="c420" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_moveTo_newsubpath() {
var canvas = document.getElementById('c420');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.moveTo(100, 0);
ctx.moveTo(100, 50);
ctx.moveTo(0, 50);
ctx.fillStyle = '#f00';
ctx.fill();
isPixel(ctx, 50,25, 0,0,0,0, 0);
}
</script>
<!-- [[[ test_2d.path.moveTo.nonfinite.html ]]] -->
<p>Canvas test: 2d.path.moveTo.nonfinite</p>
<!-- Testing: moveTo() with Infinity/NaN is ignored -->
<canvas id="c421" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_moveTo_nonfinite() {
var canvas = document.getElementById('c421');
var ctx = canvas.getContext('2d');
var _thrown_outer = false;
try {
ctx.moveTo(0, 0);
ctx.lineTo(100, 0);
ctx.moveTo(Infinity, 50);
ctx.moveTo(-Infinity, 50);
ctx.moveTo(NaN, 50);
ctx.moveTo(0, Infinity);
ctx.moveTo(0, -Infinity);
ctx.moveTo(0, NaN);
ctx.moveTo(Infinity, Infinity);
ctx.lineTo(100, 50);
ctx.lineTo(0, 50);
ctx.fillStyle = '#0f0';
ctx.fill();
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.path.quadraticCurveTo.basic.html ]]] -->
<p>Canvas test: 2d.path.quadraticCurveTo.basic</p>
<canvas id="c422" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_quadraticCurveTo_basic() {
var canvas = document.getElementById('c422');
var ctx = canvas.getContext('2d');
ctx.strokeStyle = '#0f0';
ctx.lineWidth = 50;
ctx.beginPath();
ctx.moveTo(0, 25);
ctx.quadraticCurveTo(100, 25, 100, 25);
ctx.stroke();
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.quadraticCurveTo.emptysubpath.html ]]] -->
<p>Canvas test: 2d.path.quadraticCurveTo.emptysubpath</p>
<canvas id="c423" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_quadraticCurveTo_emptysubpath() {
var canvas = document.getElementById('c423');
var ctx = canvas.getContext('2d');
ctx.strokeStyle = '#f00';
ctx.lineWidth = 50;
ctx.beginPath();
ctx.quadraticCurveTo(0, 25, 0, 25);
ctx.quadraticCurveTo(100, 25, 100, 25);
ctx.stroke();
todo_isPixel(ctx, 50,25, 0,0,0,0, 0);
}
</script>
<!-- [[[ test_2d.path.quadraticCurveTo.nonfinite.html ]]] -->
<p>Canvas test: 2d.path.quadraticCurveTo.nonfinite</p>
<!-- Testing: quadraticCurveTo() with Infinity/NaN is ignored -->
<canvas id="c424" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_quadraticCurveTo_nonfinite() {
var canvas = document.getElementById('c424');
var ctx = canvas.getContext('2d');
var _thrown_outer = false;
try {
ctx.moveTo(0, 0);
ctx.lineTo(100, 0);
ctx.quadraticCurveTo(Infinity, 50, 0, 50);
ctx.quadraticCurveTo(-Infinity, 50, 0, 50);
ctx.quadraticCurveTo(NaN, 50, 0, 50);
ctx.quadraticCurveTo(0, Infinity, 0, 50);
ctx.quadraticCurveTo(0, -Infinity, 0, 50);
ctx.quadraticCurveTo(0, NaN, 0, 50);
ctx.quadraticCurveTo(0, 50, Infinity, 50);
ctx.quadraticCurveTo(0, 50, -Infinity, 50);
ctx.quadraticCurveTo(0, 50, NaN, 50);
ctx.quadraticCurveTo(0, 50, 0, Infinity);
ctx.quadraticCurveTo(0, 50, 0, -Infinity);
ctx.quadraticCurveTo(0, 50, 0, NaN);
ctx.quadraticCurveTo(Infinity, Infinity, 0, 50);
ctx.quadraticCurveTo(Infinity, Infinity, Infinity, 50);
ctx.quadraticCurveTo(Infinity, Infinity, Infinity, Infinity);
ctx.quadraticCurveTo(Infinity, Infinity, 0, Infinity);
ctx.quadraticCurveTo(Infinity, 50, Infinity, 50);
ctx.quadraticCurveTo(Infinity, 50, Infinity, Infinity);
ctx.quadraticCurveTo(Infinity, 50, 0, Infinity);
ctx.quadraticCurveTo(0, Infinity, Infinity, 50);
ctx.quadraticCurveTo(0, Infinity, Infinity, Infinity);
ctx.quadraticCurveTo(0, Infinity, 0, Infinity);
ctx.quadraticCurveTo(0, 50, Infinity, Infinity);
ctx.lineTo(100, 50);
ctx.lineTo(0, 50);
ctx.fillStyle = '#0f0';
ctx.fill();
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 90,45, 0,255,0,255, 0);
} catch (e) {
_thrown_outer = true;
}
ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
}
</script>
<!-- [[[ test_2d.path.quadraticCurveTo.scaled.html ]]] -->
<p>Canvas test: 2d.path.quadraticCurveTo.scaled</p>
<canvas id="c425" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_quadraticCurveTo_scaled() {
var canvas = document.getElementById('c425');
var ctx = canvas.getContext('2d');
ctx.scale(1000, 1000);
ctx.strokeStyle = '#0f0';
ctx.lineWidth = 0.055;
ctx.beginPath();
ctx.moveTo(-1, 1.05);
ctx.quadraticCurveTo(0, -1, 1.2, 1.05);
ctx.stroke();
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.quadraticCurveTo.shape.html ]]] -->
<p>Canvas test: 2d.path.quadraticCurveTo.shape</p>
<canvas id="c426" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_quadraticCurveTo_shape() {
var canvas = document.getElementById('c426');
var ctx = canvas.getContext('2d');
ctx.strokeStyle = '#0f0';
ctx.lineWidth = 55;
ctx.beginPath();
ctx.moveTo(-1000, 1050);
ctx.quadraticCurveTo(0, -1000, 1200, 1050);
ctx.stroke();
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.rect.basic.html ]]] -->
<p>Canvas test: 2d.path.rect.basic</p>
<canvas id="c427" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_rect_basic() {
var canvas = document.getElementById('c427');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.rect(0, 0, 100, 50);
ctx.fill();
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.rect.closed.html ]]] -->
<p>Canvas test: 2d.path.rect.closed</p>
<canvas id="c428" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_rect_closed() {
var canvas = document.getElementById('c428');
var ctx = canvas.getContext('2d');
ctx.strokeStyle = '#0f0';
ctx.lineWidth = 200;
ctx.lineJoin = 'miter';
ctx.rect(100, 50, 100, 100);
ctx.stroke();
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.rect.end.1.html ]]] -->
<p>Canvas test: 2d.path.rect.end.1</p>
<canvas id="c429" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_rect_end_1() {
var canvas = document.getElementById('c429');
var ctx = canvas.getContext('2d');
ctx.strokeStyle = '#0f0';
ctx.lineWidth = 100;
ctx.rect(200, 100, 400, 1000);
ctx.lineTo(-2000, -1000);
ctx.stroke();
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.rect.end.2.html ]]] -->
<p>Canvas test: 2d.path.rect.end.2</p>
<canvas id="c430" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_rect_end_2() {
var canvas = document.getElementById('c430');
var ctx = canvas.getContext('2d');
ctx.strokeStyle = '#0f0';
ctx.lineWidth = 450;
ctx.lineCap = 'round';
ctx.lineJoin = 'bevel';
ctx.rect(150, 150, 2000, 2000);
ctx.lineTo(160, 160);
ctx.stroke();
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.rect.negative.html ]]] -->
<p>Canvas test: 2d.path.rect.negative</p>
<canvas id="c431" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_rect_negative() {
var canvas = document.getElementById('c431');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.beginPath();
ctx.fillStyle = '#0f0';
ctx.rect(0, 0, 50, 25);
ctx.rect(100, 0, -50, 25);
ctx.rect(0, 50, 50, -25);
ctx.rect(100, 50, -50, -25);
ctx.fill();
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.path.rect.newsubpath.html ]]] -->
<p>Canvas test: 2d.path.rect.newsubpath</p>
<canvas id="c432" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_rect_newsubpath() {
var canvas = document.getElementById('c432');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.strokeStyle = '#f00';
ctx.lineWidth = 50;
ctx.moveTo(-100, 25);
ctx.lineTo(-50, 25);
ctx.rect(200, 25, 1, 1);
ctx.stroke();
isPixel(ctx, 50,25, 0,0,0,0, 0);
}
</script>
<!-- [[[ test_2d.path.rect.nonfinite.html ]]] -->
<p>Canvas test: 2d.path.rect.nonfinite</p>
<!-- Testing: rect() with Infinity/NaN is ignored -->
<canvas id="c433" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_rect_nonfinite() {
var canvas = document.getElementById('c433');
var ctx = canvas.getContext('2d');
var _thrown_outer = false;
try {
ctx.moveTo(0, 0);
ctx.lineTo(100, 0);
ctx.rect(Infinity, 50, 1, 1);
ctx.rect(-Infinity, 50, 1, 1);
ctx.rect(NaN, 50, 1, 1);
ctx.rect(0, Infinity, 1, 1);
ctx.rect(0, -Infinity, 1, 1);
ctx.rect(0, NaN, 1, 1);
ctx.rect(0, 50, Infinity, 1);
ctx.rect(0, 50, -Infinity, 1);
ctx.rect(0, 50, NaN, 1);
ctx.rect(0, 50, 1, Infinity);
ctx.rect(0, 50, 1, -Infinity);
ctx.rect(0, 50, 1, NaN);
ctx.rect(Infinity, Infinity, 1, 1);
ctx.rect(Infinity, Infinity, Infinity, 1);
ctx.rect(Infinity, Infinity, Infinity, Infinity);
ctx.rect(Infinity, Infinity, 1, Infinity);
ctx.rect(Infinity, 50, Infinity, 1);
ctx.rect(Infinity, 50, Infinity, Infinity);
ctx.rect(Infinity, 50, 1, Infinity);
ctx.rect(0, Infinity, Infinity, 1);
ctx.rect(0, Infinity, Infinity, Infinity);
ctx.rect(0, Infinity, 1, Infinity);
ctx.rect(0, 50, Infinity, Infinity);
ctx.lineTo(100, 50);
ctx.lineTo(0, 50);
ctx.fillStyle = '#0f0';
ctx.fill();
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 90,45, 0,255,0,255, 0);
} catch (e) {
_thrown_outer = true;
}
ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
}
</script>
<!-- [[[ test_2d.path.rect.selfintersect.html ]]] -->
<p>Canvas test: 2d.path.rect.selfintersect</p>
<canvas id="c434" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_rect_selfintersect() {
var canvas = document.getElementById('c434');
var ctx = canvas.getContext('2d');
ctx.strokeStyle = '#0f0';
ctx.lineWidth = 90;
ctx.beginPath();
ctx.rect(45, 20, 10, 10);
ctx.stroke();
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.rect.winding.html ]]] -->
<p>Canvas test: 2d.path.rect.winding</p>
<canvas id="c435" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_rect_winding() {
var canvas = document.getElementById('c435');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.beginPath();
ctx.fillStyle = '#f00';
ctx.rect(0, 0, 50, 50);
ctx.rect(100, 50, -50, -50);
ctx.rect(0, 25, 100, -25);
ctx.rect(100, 25, -100, 25);
ctx.fill();
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.path.rect.zero.1.html ]]] -->
<p>Canvas test: 2d.path.rect.zero.1</p>
<canvas id="c436" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_rect_zero_1() {
var canvas = document.getElementById('c436');
var ctx = canvas.getContext('2d');
ctx.strokeStyle = '#0f0';
ctx.lineWidth = 100;
ctx.beginPath();
ctx.rect(0, 50, 100, 0);
ctx.stroke();
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.rect.zero.2.html ]]] -->
<p>Canvas test: 2d.path.rect.zero.2</p>
<canvas id="c437" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_rect_zero_2() {
var canvas = document.getElementById('c437');
var ctx = canvas.getContext('2d');
ctx.strokeStyle = '#0f0';
ctx.lineWidth = 100;
ctx.beginPath();
ctx.rect(50, -100, 0, 250);
ctx.stroke();
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.rect.zero.3.html ]]] -->
<p>Canvas test: 2d.path.rect.zero.3</p>
<canvas id="c438" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_rect_zero_3() {
var canvas = document.getElementById('c438');
var ctx = canvas.getContext('2d');
if (!IsD2DEnabled()) {
// Disabled for D2D until we can figure out Bug 587554.
ctx.strokeStyle = '#f00';
ctx.lineWidth = 100;
ctx.beginPath();
ctx.rect(50, 25, 0, 0);
ctx.stroke();
isPixel(ctx, 50,25, 0,0,0,0, 0);
}
}
</script>
<!-- [[[ test_2d.path.rect.zero.4.html ]]] -->
<p>Canvas test: 2d.path.rect.zero.4</p>
<canvas id="c439" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_rect_zero_4() {
var canvas = document.getElementById('c439');
var ctx = canvas.getContext('2d');
ctx.strokeStyle = '#0f0';
ctx.lineWidth = 50;
ctx.rect(100, 25, 0, 0);
ctx.lineTo(0, 25);
ctx.stroke();
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.rect.zero.5.html ]]] -->
<p>Canvas test: 2d.path.rect.zero.5</p>
<canvas id="c440" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_rect_zero_5() {
var canvas = document.getElementById('c440');
var ctx = canvas.getContext('2d');
ctx.strokeStyle = '#f00';
ctx.lineWidth = 50;
ctx.moveTo(0, 0);
ctx.rect(100, 25, 0, 0);
ctx.stroke();
isPixel(ctx, 50,25, 0,0,0,0, 0);
}
</script>
<!-- [[[ test_2d.path.rect.zero.6.html ]]] -->
<p>Canvas test: 2d.path.rect.zero.6</p>
<canvas id="c441" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_rect_zero_6() {
var canvas = document.getElementById('c441');
var ctx = canvas.getContext('2d');
ctx.strokeStyle = '#f00';
ctx.lineJoin = 'miter';
ctx.miterLimit = 1.5;
ctx.lineWidth = 200;
ctx.beginPath();
ctx.rect(100, 25, 1000, 0);
ctx.stroke();
todo_isPixel(ctx, 50,25, 0,0,0,0, 0);
}
</script>
<!-- [[[ test_2d.path.stroke.empty.html ]]] -->
<p>Canvas test: 2d.path.stroke.empty</p>
<!-- Testing: Empty subpaths are not stroked -->
<canvas id="c442" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_stroke_empty() {
var canvas = document.getElementById('c442');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.strokeStyle = '#f00';
ctx.lineWidth = 100;
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
ctx.beginPath();
ctx.moveTo(40, 25);
ctx.moveTo(60, 25);
ctx.stroke();
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.stroke.overlap.html ]]] -->
<p>Canvas test: 2d.path.stroke.overlap</p>
<!-- Testing: Stroked subpaths are combined before being drawn -->
<canvas id="c443" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_stroke_overlap() {
var canvas = document.getElementById('c443');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, 100, 50);
ctx.strokeStyle = 'rgba(0, 255, 0, 0.5)';
ctx.lineWidth = 50;
ctx.moveTo(0, 20);
ctx.lineTo(100, 20);
ctx.moveTo(0, 30);
ctx.lineTo(100, 30);
ctx.stroke();
isPixel(ctx, 50,25, 0,127,0,255, 1);
}
</script>
<!-- [[[ test_2d.path.stroke.prune.arc.html ]]] -->
<p>Canvas test: 2d.path.stroke.prune.arc</p>
<!-- Testing: Zero-length line segments from arcTo and arc are removed before stroking -->
<canvas id="c444" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_stroke_prune_arc() {
var canvas = document.getElementById('c444');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.strokeStyle = '#f00';
ctx.lineWidth = 100;
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
ctx.beginPath();
ctx.moveTo(50, 25);
ctx.arcTo(50, 25, 150, 25, 10);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(50, 25);
ctx.arc(50, 25, 10, 0, 0, false);
ctx.stroke();
todo_isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.stroke.prune.closed.html ]]] -->
<p>Canvas test: 2d.path.stroke.prune.closed</p>
<!-- Testing: Zero-length line segments from closed paths are removed before stroking -->
<canvas id="c445" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_stroke_prune_closed() {
var canvas = document.getElementById('c445');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.strokeStyle = '#f00';
ctx.lineWidth = 100;
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
ctx.beginPath();
ctx.moveTo(50, 25);
ctx.lineTo(50, 25);
ctx.closePath();
ctx.stroke();
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.stroke.prune.corner.html ]]] -->
<p>Canvas test: 2d.path.stroke.prune.corner</p>
<!-- Testing: Zero-length line segments are removed before stroking with miters -->
<canvas id="c446" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_stroke_prune_corner() {
var canvas = document.getElementById('c446');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.strokeStyle = '#f00';
ctx.lineWidth = 400;
ctx.lineJoin = 'miter';
ctx.miterLimit = 1.4;
ctx.beginPath();
ctx.moveTo(-1000, 200, 0, 0);
ctx.lineTo(-100, 200);
ctx.lineTo(-100, 200);
ctx.lineTo(-100, 200);
ctx.lineTo(-100, 1000);
ctx.stroke();
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.stroke.prune.curve.html ]]] -->
<p>Canvas test: 2d.path.stroke.prune.curve</p>
<!-- Testing: Zero-length line segments from quadraticCurveTo and bezierCurveTo are removed before stroking -->
<canvas id="c447" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_stroke_prune_curve() {
var canvas = document.getElementById('c447');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.strokeStyle = '#f00';
ctx.lineWidth = 100;
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
ctx.beginPath();
ctx.moveTo(50, 25);
ctx.quadraticCurveTo(50, 25, 50, 25);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(50, 25);
ctx.bezierCurveTo(50, 25, 50, 25, 50, 25);
ctx.stroke();
todo_isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.stroke.prune.line.html ]]] -->
<p>Canvas test: 2d.path.stroke.prune.line</p>
<!-- Testing: Zero-length line segments from lineTo are removed before stroking -->
<canvas id="c448" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_stroke_prune_line() {
var canvas = document.getElementById('c448');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.strokeStyle = '#f00';
ctx.lineWidth = 100;
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
ctx.beginPath();
ctx.moveTo(50, 25);
ctx.lineTo(50, 25);
ctx.stroke();
todo_isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.stroke.prune.rect.html ]]] -->
<p>Canvas test: 2d.path.stroke.prune.rect</p>
<!-- Testing: Zero-length line segments from rect and strokeRect are removed before stroking -->
<canvas id="c449" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_stroke_prune_rect() {
var canvas = document.getElementById('c449');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.strokeStyle = '#f00';
ctx.lineWidth = 100;
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
ctx.beginPath();
ctx.rect(50, 25, 0, 0);
ctx.stroke();
ctx.strokeRect(50, 25, 0, 0);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.stroke.scale1.html ]]] -->
<p>Canvas test: 2d.path.stroke.scale1</p>
<!-- Testing: Stroke line widths are scaled by the current transformation matrix -->
<canvas id="c450" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_stroke_scale1() {
var canvas = document.getElementById('c450');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.beginPath();
ctx.rect(25, 12.5, 50, 25);
ctx.save();
ctx.scale(50, 25);
ctx.strokeStyle = '#0f0';
ctx.stroke();
ctx.restore();
ctx.beginPath();
ctx.rect(-25, -12.5, 150, 75);
ctx.save();
ctx.scale(50, 25);
ctx.strokeStyle = '#f00';
ctx.stroke();
ctx.restore();
isPixel(ctx, 0,0, 0,255,0,255, 0);
isPixel(ctx, 50,0, 0,255,0,255, 0);
isPixel(ctx, 99,0, 0,255,0,255, 0);
isPixel(ctx, 0,25, 0,255,0,255, 0);
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 99,25, 0,255,0,255, 0);
isPixel(ctx, 0,49, 0,255,0,255, 0);
isPixel(ctx, 50,49, 0,255,0,255, 0);
isPixel(ctx, 99,49, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.stroke.scale2.html ]]] -->
<p>Canvas test: 2d.path.stroke.scale2</p>
<!-- Testing: Stroke line widths are scaled by the current transformation matrix -->
<canvas id="c451" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_stroke_scale2() {
var canvas = document.getElementById('c451');
var ctx = canvas.getContext('2d');
if (!IsD2DEnabled()) {
// On D2D a rasterization bug causes a small discrepancy here. See bug 587316
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.beginPath();
ctx.rect(25, 12.5, 50, 25);
ctx.save();
ctx.rotate(Math.PI/2);
ctx.scale(25, 50);
ctx.strokeStyle = '#0f0';
ctx.stroke();
ctx.restore();
ctx.beginPath();
ctx.rect(-25, -12.5, 150, 75);
ctx.save();
ctx.rotate(Math.PI/2);
ctx.scale(25, 50);
ctx.strokeStyle = '#f00';
ctx.stroke();
ctx.restore();
isPixel(ctx, 0,0, 0,255,0,255, 0);
isPixel(ctx, 50,0, 0,255,0,255, 0);
isPixel(ctx, 99,0, 0,255,0,255, 0);
isPixel(ctx, 0,25, 0,255,0,255, 0);
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 99,25, 0,255,0,255, 0);
isPixel(ctx, 0,49, 0,255,0,255, 0);
isPixel(ctx, 50,49, 0,255,0,255, 0);
isPixel(ctx, 99,49, 0,255,0,255, 0);
}
}
</script>
<!-- [[[ test_2d.path.stroke.skew.html ]]] -->
<p>Canvas test: 2d.path.stroke.skew</p>
<!-- Testing: Strokes lines are skewed by the current transformation matrix -->
<canvas id="c452" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_stroke_skew() {
var canvas = document.getElementById('c452');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.save();
ctx.beginPath();
ctx.moveTo(49, -50);
ctx.lineTo(201, -50);
ctx.rotate(Math.PI/4);
ctx.scale(1, 283);
ctx.strokeStyle = '#0f0';
ctx.stroke();
ctx.restore();
ctx.save();
ctx.beginPath();
ctx.translate(-150, 0);
ctx.moveTo(49, -50);
ctx.lineTo(199, -50);
ctx.rotate(Math.PI/4);
ctx.scale(1, 142);
ctx.strokeStyle = '#f00';
ctx.stroke();
ctx.restore();
ctx.save();
ctx.beginPath();
ctx.translate(-150, 0);
ctx.moveTo(49, -50);
ctx.lineTo(199, -50);
ctx.rotate(Math.PI/4);
ctx.scale(1, 142);
ctx.strokeStyle = '#f00';
ctx.stroke();
ctx.restore();
isPixel(ctx, 0,0, 0,255,0,255, 0);
isPixel(ctx, 50,0, 0,255,0,255, 0);
isPixel(ctx, 99,0, 0,255,0,255, 0);
isPixel(ctx, 0,25, 0,255,0,255, 0);
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 99,25, 0,255,0,255, 0);
isPixel(ctx, 0,49, 0,255,0,255, 0);
isPixel(ctx, 50,49, 0,255,0,255, 0);
isPixel(ctx, 99,49, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.stroke.unaffected.html ]]] -->
<p>Canvas test: 2d.path.stroke.unaffected</p>
<!-- Testing: Stroking does not start a new path or subpath -->
<canvas id="c453" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_stroke_unaffected() {
var canvas = document.getElementById('c453');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.lineWidth = 50;
ctx.moveTo(-100, 25);
ctx.lineTo(-100, -100);
ctx.lineTo(200, -100);
ctx.lineTo(200, 25);
ctx.strokeStyle = '#f00';
ctx.stroke();
ctx.closePath();
ctx.strokeStyle = '#0f0';
ctx.stroke();
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.stroke.union.html ]]] -->
<p>Canvas test: 2d.path.stroke.union</p>
<!-- Testing: Strokes in opposite directions are unioned, not subtracted -->
<canvas id="c454" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_stroke_union() {
var canvas = document.getElementById('c454');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.strokeStyle = '#0f0';
ctx.lineWidth = 40;
ctx.moveTo(0, 10);
ctx.lineTo(100, 10);
ctx.moveTo(100, 40);
ctx.lineTo(0, 40);
ctx.stroke();
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.transformation.basic.html ]]] -->
<p>Canvas test: 2d.path.transformation.basic</p>
<canvas id="c455" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_transformation_basic() {
var canvas = document.getElementById('c455');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.translate(-100, 0);
ctx.rect(100, 0, 100, 50);
ctx.translate(0, -100);
ctx.fillStyle = '#0f0';
ctx.fill();
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.transformation.changing.html ]]] -->
<p>Canvas test: 2d.path.transformation.changing</p>
<!-- Testing: Transformations are applied while building paths, not when drawing -->
<canvas id="c456" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_transformation_changing() {
var canvas = document.getElementById('c456');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = '#0f0';
ctx.moveTo(0, 0);
ctx.translate(100, 0);
ctx.lineTo(0, 0);
ctx.translate(0, 50);
ctx.lineTo(0, 0);
ctx.translate(-100, 0);
ctx.lineTo(0, 0);
ctx.translate(1000, 1000);
ctx.rotate(Math.PI/2);
ctx.scale(0.1, 0.1);
ctx.fill();
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.transformation.multiple.html ]]] -->
<p>Canvas test: 2d.path.transformation.multiple</p>
<canvas id="c457" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_transformation_multiple() {
var canvas = document.getElementById('c457');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.rect(0, 0, 100, 50);
ctx.fill();
ctx.translate(-100, 0);
ctx.fillStyle = '#0f0';
ctx.fill();
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.pattern.animated.gif.html ]]] -->
<p>Canvas test: 2d.pattern.animated.gif</p>
<!-- Testing: createPattern() of an animated GIF draws the first frame -->
<canvas id="c458" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
var canvas458 = document.getElementById('c458');
var ctx458 = canvas458.getContext('2d');
var isDone_test_2d_pattern_animated_gif = false;
function test_2d_pattern_animated_gif() {
deferTest();
setTimeout(function () {
var pattern = ctx458.createPattern(document.getElementById('anim-gr_2.gif'), 'repeat');
ctx458.fillStyle = pattern;
ctx458.fillRect(0, 0, 50, 50);
setTimeout(wrapFunction(function () {
ctx458.fillRect(50, 0, 50, 50);
isPixel(ctx458, 25,25, 0,255,0,255, 2);
isPixel(ctx458, 75,25, 0,255,0,255, 2);
isDone_test_2d_pattern_animated_gif = true;
}), 2500);
}, 2500);
}
</script>
<img src="image_anim-gr.gif" id="anim-gr_2.gif" class="resource">
<!-- [[[ test_2d.pattern.basic.canvas.html ]]] -->
<p>Canvas test: 2d.pattern.basic.canvas</p>
<canvas id="c459" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_pattern_basic_canvas() {
var canvas = document.getElementById('c459');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
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);
var pattern = ctx.createPattern(canvas2, 'no-repeat');
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 50,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,25, 0,255,0,255, 0);
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 98,25, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 50,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.pattern.basic.image.html ]]] -->
<p>Canvas test: 2d.pattern.basic.image</p>
<canvas id="c460" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_pattern_basic_image() {
var canvas = document.getElementById('c460');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
var img = document.getElementById('green_8.png');
var pattern = ctx.createPattern(img, 'no-repeat');
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<img src="image_green.png" id="green_8.png" class="resource">
<!-- [[[ test_2d.pattern.basic.nocontext.html ]]] -->
<p>Canvas test: 2d.pattern.basic.nocontext</p>
<canvas id="c461" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_pattern_basic_nocontext() {
var canvas = document.getElementById('c461');
var ctx = canvas.getContext('2d');
var canvas2 = document.createElement('canvas');
canvas2.width = 100;
canvas2.height = 50;
var pattern = ctx.createPattern(canvas2, 'no-repeat');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.pattern.basic.type.html ]]] -->
<p>Canvas test: 2d.pattern.basic.type</p>
<canvas id="c462" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_pattern_basic_type() {
var canvas = document.getElementById('c462');
var ctx = canvas.getContext('2d');
ok(window.CanvasPattern !== undefined, "window.CanvasPattern !== undefined");
window.CanvasPattern.prototype.thisImplementsCanvasPattern = true;
var img = document.getElementById('green_9.png');
var pattern = ctx.createPattern(img, 'no-repeat');
ok(pattern.thisImplementsCanvasPattern, "pattern.thisImplementsCanvasPattern");
}
</script>
<img src="image_green.png" id="green_9.png" class="resource">
<!-- [[[ test_2d.pattern.basic.zerocanvas.html ]]] -->
<p>Canvas test: 2d.pattern.basic.zerocanvas</p>
<canvas id="c463" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_pattern_basic_zerocanvas() {
var canvas = document.getElementById('c463');
var ctx = canvas.getContext('2d');
canvas.width = 0;
canvas.height = 10;
ok(canvas.width === 0, "canvas.width === 0");
ok(canvas.height === 10, "canvas.height === 10");
var _thrown = undefined; try {
ctx.createPattern(canvas, 'repeat');
} catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "InvalidStateError" && _thrown.code == DOMException.INVALID_STATE_ERR, "should throw InvalidStateError");
canvas.width = 10;
canvas.height = 0;
ok(canvas.width === 10, "canvas.width === 10");
ok(canvas.height === 0, "canvas.height === 0");
var _thrown = undefined; try {
ctx.createPattern(canvas, 'repeat');
} catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "InvalidStateError" && _thrown.code == DOMException.INVALID_STATE_ERR, "should throw InvalidStateError");
canvas.width = 0;
canvas.height = 0;
ok(canvas.width === 0, "canvas.width === 0");
ok(canvas.height === 0, "canvas.height === 0");
var _thrown = undefined; try {
ctx.createPattern(canvas, 'repeat');
} catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "InvalidStateError" && _thrown.code == DOMException.INVALID_STATE_ERR, "should throw InvalidStateError");
}
</script>
<!-- [[[ test_2d.pattern.crosscanvas.html ]]] -->
<p>Canvas test: 2d.pattern.crosscanvas</p>
<canvas id="c464" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_pattern_crosscanvas() {
var canvas = document.getElementById('c464');
var ctx = canvas.getContext('2d');
var img = document.getElementById('green_10.png');
var pattern = document.createElement('canvas').getContext('2d').createPattern(img, 'no-repeat');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<img src="image_green.png" id="green_10.png" class="resource">
<!-- [[[ test_2d.pattern.image.null.html ]]] -->
<p>Canvas test: 2d.pattern.image.null</p>
<canvas id="c467" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_pattern_image_null() {
var canvas = document.getElementById('c467');
var ctx = canvas.getContext('2d');
var _thrown = undefined; try {
ctx.createPattern(null, 'repeat');
} catch (e) { _thrown = e };
ok(_thrown && _thrown.name == "TypeError", "should throw TypeError");
}
</script>
<!-- [[[ test_2d.pattern.image.string.html ]]] -->
<p>Canvas test: 2d.pattern.image.string</p>
<canvas id="c468" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_pattern_image_string() {
var canvas = document.getElementById('c468');
var ctx = canvas.getContext('2d');
var _thrown = undefined; try {
ctx.createPattern('image_red.png', 'repeat');
} catch (e) { _thrown = e };
ok(_thrown && _thrown.name == "TypeError", "should throw TypeError");
}
</script>
<!-- [[[ test_2d.pattern.image.undefined.html ]]] -->
<p>Canvas test: 2d.pattern.image.undefined</p>
<canvas id="c469" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_pattern_image_undefined() {
var canvas = document.getElementById('c469');
var ctx = canvas.getContext('2d');
var _thrown = undefined; try {
ctx.createPattern(undefined, 'repeat');
} catch (e) { _thrown = e };
ok(_thrown && _thrown.name == "TypeError", "should throw TypeError");
}
</script>
<!-- [[[ test_2d.pattern.modify.canvas1.html ]]] -->
<p>Canvas test: 2d.pattern.modify.canvas1</p>
<canvas id="c470" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_pattern_modify_canvas1() {
var canvas = document.getElementById('c470');
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);
var pattern = ctx.createPattern(canvas2, 'no-repeat');
ctx2.fillStyle = '#f00';
ctx2.fillRect(0, 0, 100, 50);
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.pattern.modify.canvas2.html ]]] -->
<p>Canvas test: 2d.pattern.modify.canvas2</p>
<canvas id="c471" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_pattern_modify_canvas2() {
var canvas = document.getElementById('c471');
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);
var pattern = ctx.createPattern(canvas2, 'no-repeat');
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx2.fillStyle = '#f00';
ctx2.fillRect(0, 0, 100, 50);
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.pattern.modify.image1.html ]]] -->
<p>Canvas test: 2d.pattern.modify.image1</p>
<canvas id="c472" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
var canvas472 = document.getElementById('c472');
var ctx472 = canvas472.getContext('2d');
function test_2d_pattern_modify_image1() {
var img = document.getElementById('green_11.png');
var pattern = ctx472.createPattern(img, 'no-repeat');
deferTest();
img.onload = wrapFunction(function ()
{
ctx472.fillStyle = pattern;
ctx472.fillRect(0, 0, 100, 50);
isPixel(ctx472, 1,1, 0,255,0,255, 0);
isPixel(ctx472, 98,1, 0,255,0,255, 0);
isPixel(ctx472, 1,48, 0,255,0,255, 0);
isPixel(ctx472, 98,48, 0,255,0,255, 0);
});
img.src = 'image_red.png';
}
</script>
<img src="image_green.png" id="green_11.png" class="resource">
<!-- [[[ test_2d.pattern.modify.image2.html ]]] -->
<p>Canvas test: 2d.pattern.modify.image2</p>
<canvas id="c473" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
var canvas473 = document.getElementById('c473');
var ctx473 = canvas473.getContext('2d');
function test_2d_pattern_modify_image2() {
var img = document.getElementById('green_12.png');
var pattern = ctx473.createPattern(img, 'no-repeat');
ctx473.fillStyle = pattern;
ctx473.fillRect(0, 0, 100, 50);
ctx473.fillStyle = '#00f';
ctx473.fillRect(0, 0, 100, 50);
deferTest();
img.onload = wrapFunction(function ()
{
ctx473.fillStyle = pattern;
ctx473.fillRect(0, 0, 100, 50);
isPixel(ctx473, 1,1, 0,255,0,255, 0);
isPixel(ctx473, 98,1, 0,255,0,255, 0);
isPixel(ctx473, 1,48, 0,255,0,255, 0);
isPixel(ctx473, 98,48, 0,255,0,255, 0);
});
img.src = 'image_red.png';
}
</script>
<img src="image_green.png" id="green_12.png" class="resource">
<!-- [[[ test_2d.pattern.paint.norepeat.basic.html ]]] -->
<p>Canvas test: 2d.pattern.paint.norepeat.basic</p>
<canvas id="c474" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_pattern_paint_norepeat_basic() {
var canvas = document.getElementById('c474');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
var img = document.getElementById('green_13.png');
var pattern = ctx.createPattern(img, 'no-repeat');
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<img src="image_green.png" id="green_13.png" class="resource">
<!-- [[[ test_2d.pattern.paint.norepeat.coord1.html ]]] -->
<p>Canvas test: 2d.pattern.paint.norepeat.coord1</p>
<canvas id="c475" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_pattern_paint_norepeat_coord1() {
var canvas = document.getElementById('c475');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 50, 50);
ctx.fillStyle = '#f00';
ctx.fillRect(50, 0, 50, 50);
var img = document.getElementById('green_14.png');
var pattern = ctx.createPattern(img, 'no-repeat');
ctx.fillStyle = pattern;
ctx.translate(50, 0);
ctx.fillRect(-50, 0, 100, 50);
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<img src="image_green.png" id="green_14.png" class="resource">
<!-- [[[ test_2d.pattern.paint.norepeat.coord2.html ]]] -->
<p>Canvas test: 2d.pattern.paint.norepeat.coord2</p>
<canvas id="c476" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_pattern_paint_norepeat_coord2() {
var canvas = document.getElementById('c476');
var ctx = canvas.getContext('2d');
var img = document.getElementById('green_15.png');
var pattern = ctx.createPattern(img, 'no-repeat');
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, 50, 50);
ctx.fillStyle = '#f00';
ctx.fillRect(50, 0, 50, 50);
ctx.fillStyle = pattern;
ctx.translate(50, 0);
ctx.fillRect(-50, 0, 100, 50);
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<img src="image_green.png" id="green_15.png" class="resource">
<!-- [[[ test_2d.pattern.paint.norepeat.coord3.html ]]] -->
<p>Canvas test: 2d.pattern.paint.norepeat.coord3</p>
<canvas id="c477" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_pattern_paint_norepeat_coord3() {
var canvas = document.getElementById('c477');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
var img = document.getElementById('red_15.png');
var pattern = ctx.createPattern(img, 'no-repeat');
ctx.fillStyle = pattern;
ctx.translate(50, 25);
ctx.fillRect(-50, -25, 100, 50);
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 50, 25);
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<img src="image_red.png" id="red_15.png" class="resource">
<!-- [[[ test_2d.pattern.paint.norepeat.outside.html ]]] -->
<p>Canvas test: 2d.pattern.paint.norepeat.outside</p>
<canvas id="c478" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_pattern_paint_norepeat_outside() {
var canvas = document.getElementById('c478');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
var img = document.getElementById('red_16.png');
var pattern = ctx.createPattern(img, 'no-repeat');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = pattern;
ctx.fillRect(0, -50, 100, 50);
ctx.fillRect(-100, 0, 100, 50);
ctx.fillRect(0, 50, 100, 50);
ctx.fillRect(100, 0, 100, 50);
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<img src="image_red.png" id="red_16.png" class="resource">
<!-- [[[ test_2d.pattern.paint.orientation.canvas.html ]]] -->
<p>Canvas test: 2d.pattern.paint.orientation.canvas</p>
<!-- Testing: Canvas patterns do not get flipped when painted -->
<canvas id="c479" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_pattern_paint_orientation_canvas() {
var canvas = document.getElementById('c479');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
var canvas2 = document.createElement('canvas');
canvas2.width = 100;
canvas2.height = 50;
var ctx2 = canvas2.getContext('2d');
ctx2.fillStyle = '#f00';
ctx2.fillRect(0, 0, 100, 25);
ctx2.fillStyle = '#0f0';
ctx2.fillRect(0, 25, 100, 25);
var pattern = ctx.createPattern(canvas2, 'no-repeat');
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 25);
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.pattern.paint.orientation.image.html ]]] -->
<p>Canvas test: 2d.pattern.paint.orientation.image</p>
<!-- Testing: Image patterns do not get flipped when painted -->
<canvas id="c480" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_pattern_paint_orientation_image() {
var canvas = document.getElementById('c480');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
var img = document.getElementById('rrgg-256x256_1.png');
var pattern = ctx.createPattern(img, 'no-repeat');
ctx.fillStyle = pattern;
ctx.save();
ctx.translate(0, -103);
ctx.fillRect(0, 103, 100, 50);
ctx.restore();
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 25);
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<img src="image_rrgg-256x256.png" id="rrgg-256x256_1.png" class="resource">
<!-- [[[ test_2d.pattern.paint.repeat.basic.html ]]] -->
<p>Canvas test: 2d.pattern.paint.repeat.basic</p>
<canvas id="c481" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_pattern_paint_repeat_basic() {
var canvas = document.getElementById('c481');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
var img = document.getElementById('green-16x16_1.png');
var pattern = ctx.createPattern(img, 'repeat');
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<img src="image_green-16x16.png" id="green-16x16_1.png" class="resource">
<!-- [[[ test_2d.pattern.paint.repeat.coord1.html ]]] -->
<p>Canvas test: 2d.pattern.paint.repeat.coord1</p>
<canvas id="c482" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_pattern_paint_repeat_coord1() {
var canvas = document.getElementById('c482');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
var img = document.getElementById('rgrg-256x256_3.png');
var pattern = ctx.createPattern(img, 'repeat');
ctx.fillStyle = pattern;
ctx.translate(-128, -78);
ctx.fillRect(128, 78, 100, 50);
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<img src="image_rgrg-256x256.png" id="rgrg-256x256_3.png" class="resource">
<!-- [[[ test_2d.pattern.paint.repeat.coord2.html ]]] -->
<p>Canvas test: 2d.pattern.paint.repeat.coord2</p>
<canvas id="c483" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_pattern_paint_repeat_coord2() {
var canvas = document.getElementById('c483');
var ctx = canvas.getContext('2d');
var img = document.getElementById('ggrr-256x256_3.png');
var pattern = ctx.createPattern(img, 'repeat');
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<img src="image_ggrr-256x256.png" id="ggrr-256x256_3.png" class="resource">
<!-- [[[ test_2d.pattern.paint.repeat.coord3.html ]]] -->
<p>Canvas test: 2d.pattern.paint.repeat.coord3</p>
<canvas id="c484" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_pattern_paint_repeat_coord3() {
var canvas = document.getElementById('c484');
var ctx = canvas.getContext('2d');
var img = document.getElementById('rgrg-256x256_4.png');
var pattern = ctx.createPattern(img, 'repeat');
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, 100, 50);
ctx.translate(-128, -78);
ctx.fillRect(128, 78, 100, 50);
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<img src="image_rgrg-256x256.png" id="rgrg-256x256_4.png" class="resource">
<!-- [[[ test_2d.pattern.paint.repeat.outside.html ]]] -->
<p>Canvas test: 2d.pattern.paint.repeat.outside</p>
<canvas id="c485" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_pattern_paint_repeat_outside() {
var canvas = document.getElementById('c485');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
var img = document.getElementById('green-16x16_2.png');
var pattern = ctx.createPattern(img, 'repeat');
ctx.fillStyle = pattern;
ctx.translate(50, 25);
ctx.fillRect(-50, -25, 100, 50);
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<img src="image_green-16x16.png" id="green-16x16_2.png" class="resource">
<!-- [[[ test_2d.pattern.paint.repeatx.basic.html ]]] -->
<p>Canvas test: 2d.pattern.paint.repeatx.basic</p>
<canvas id="c486" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_pattern_paint_repeatx_basic() {
var canvas = document.getElementById('c486');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 16);
var img = document.getElementById('green-16x16_3.png');
var pattern = ctx.createPattern(img, 'repeat-x');
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<img src="image_green-16x16.png" id="green-16x16_3.png" class="resource">
<!-- [[[ test_2d.pattern.paint.repeatx.coord1.html ]]] -->
<p>Canvas test: 2d.pattern.paint.repeatx.coord1</p>
<canvas id="c487" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_pattern_paint_repeatx_coord1() {
var canvas = document.getElementById('c487');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
var img = document.getElementById('red-16x16_1.png');
var pattern = ctx.createPattern(img, 'repeat-x');
ctx.fillStyle = pattern;
ctx.translate(0, 16);
ctx.fillRect(0, -16, 100, 50);
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 16);
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
isPixel(ctx, 1,25, 0,255,0,255, 0);
isPixel(ctx, 98,25, 0,255,0,255, 0);
}
</script>
<img src="image_red-16x16.png" id="red-16x16_1.png" class="resource">
<!-- [[[ test_2d.pattern.paint.repeatx.outside.html ]]] -->
<p>Canvas test: 2d.pattern.paint.repeatx.outside</p>
<canvas id="c488" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_pattern_paint_repeatx_outside() {
var canvas = document.getElementById('c488');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
var img = document.getElementById('red-16x16_2.png');
var pattern = ctx.createPattern(img, 'repeat-x');
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 16);
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<img src="image_red-16x16.png" id="red-16x16_2.png" class="resource">
<!-- [[[ test_2d.pattern.paint.repeaty.basic.html ]]] -->
<p>Canvas test: 2d.pattern.paint.repeaty.basic</p>
<canvas id="c489" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_pattern_paint_repeaty_basic() {
var canvas = document.getElementById('c489');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 16, 50);
var img = document.getElementById('green-16x16_4.png');
var pattern = ctx.createPattern(img, 'repeat-y');
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<img src="image_green-16x16.png" id="green-16x16_4.png" class="resource">
<!-- [[[ test_2d.pattern.paint.repeaty.coord1.html ]]] -->
<p>Canvas test: 2d.pattern.paint.repeaty.coord1</p>
<canvas id="c490" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_pattern_paint_repeaty_coord1() {
var canvas = document.getElementById('c490');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
var img = document.getElementById('red-16x16_3.png');
var pattern = ctx.createPattern(img, 'repeat-y');
ctx.fillStyle = pattern;
ctx.translate(48, 0);
ctx.fillRect(-48, 0, 100, 50);
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 16, 50);
isPixel(ctx, 50,1, 0,255,0,255, 0);
isPixel(ctx, 50,48, 0,255,0,255, 0);
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<img src="image_red-16x16.png" id="red-16x16_3.png" class="resource">
<!-- [[[ test_2d.pattern.paint.repeaty.outside.html ]]] -->
<p>Canvas test: 2d.pattern.paint.repeaty.outside</p>
<canvas id="c491" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_pattern_paint_repeaty_outside() {
var canvas = document.getElementById('c491');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
var img = document.getElementById('red-16x16_4.png');
var pattern = ctx.createPattern(img, 'repeat-y');
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 16, 50);
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<img src="image_red-16x16.png" id="red-16x16_4.png" class="resource">
<!-- [[[ test_2d.pattern.repeat.case.html ]]] -->
<p>Canvas test: 2d.pattern.repeat.case</p>
<canvas id="c492" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_pattern_repeat_case() {
var canvas = document.getElementById('c492');
var ctx = canvas.getContext('2d');
var _thrown = undefined; try {
ctx.createPattern(canvas, "Repeat");
} catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "SyntaxError" && _thrown.code == DOMException.SYNTAX_ERR, "should throw SyntaxError");
}
</script>
<!-- [[[ test_2d.pattern.repeat.empty.html ]]] -->
<p>Canvas test: 2d.pattern.repeat.empty</p>
<canvas id="c493" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_pattern_repeat_empty() {
var canvas = document.getElementById('c493');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
var img = document.getElementById('green-1x1_1.png');
var pattern = ctx.createPattern(img, "");
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, 200, 50);
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<img src="image_green-1x1.png" id="green-1x1_1.png" class="resource">
<!-- [[[ test_2d.pattern.repeat.null.html ]]] -->
<p>Canvas test: 2d.pattern.repeat.null</p>
<canvas id="c494" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_pattern_repeat_null() {
var canvas = document.getElementById('c494');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
var img = document.getElementById('green-1x1_2.png');
var pattern = ctx.createPattern(img, null);
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<img src="image_green-1x1.png" id="green-1x1_2.png" class="resource">
<!-- [[[ test_2d.pattern.repeat.nullsuffix.html ]]] -->
<p>Canvas test: 2d.pattern.repeat.nullsuffix</p>
<canvas id="c495" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_pattern_repeat_nullsuffix() {
var canvas = document.getElementById('c495');
var ctx = canvas.getContext('2d');
var _thrown = undefined; try {
ctx.createPattern(canvas, "repeat\0");
} catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "SyntaxError" && _thrown.code == DOMException.SYNTAX_ERR, "should throw SyntaxError");
}
</script>
<!-- [[[ test_2d.pattern.repeat.undefined.html ]]] -->
<p>Canvas test: 2d.pattern.repeat.undefined</p>
<canvas id="c496" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_pattern_repeat_undefined() {
var canvas = document.getElementById('c496');
var ctx = canvas.getContext('2d');
var _thrown = undefined; try {
ctx.createPattern(canvas, undefined);
} catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "SyntaxError" && _thrown.code == DOMException.SYNTAX_ERR, "should throw SyntaxError");
}
</script>
<!-- [[[ test_2d.pattern.repeat.unrecognised.html ]]] -->
<p>Canvas test: 2d.pattern.repeat.unrecognised</p>
<canvas id="c497" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_pattern_repeat_unrecognised() {
var canvas = document.getElementById('c497');
var ctx = canvas.getContext('2d');
var _thrown = undefined; try {
ctx.createPattern(canvas, "invalid");
} catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "SyntaxError" && _thrown.code == DOMException.SYNTAX_ERR, "should throw SyntaxError");
}
</script>
<!-- [[[ test_2d.scaled.html ]]] -->
<p>Canvas test: 2d.scaled</p>
<!-- Testing: CSS-scaled canvases get drawn correctly -->
<canvas id="c498" width="50" height="25" style="width: 100px; height: 50px"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_scaled() {
var canvas = document.getElementById('c498');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#00f';
ctx.fillRect(0, 0, 50, 25);
ctx.fillStyle = '#0ff';
ctx.fillRect(0, 0, 25, 10);
todo(false, "test completed successfully"); // (Bug 483989)
}
</script>
<!-- [[[ test_2d.shadow.alpha.1.html ]]] -->
<p>Canvas test: 2d.shadow.alpha.1</p>
<canvas id="c499" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_shadow_alpha_1() {
var canvas = document.getElementById('c499');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.shadowColor = 'rgba(255, 0, 0, 0.01)';
ctx.shadowOffsetY = 50;
ctx.fillRect(0, -50, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 4);
}
</script>
<!-- [[[ test_2d.shadow.alpha.2.html ]]] -->
<p>Canvas test: 2d.shadow.alpha.2</p>
<canvas id="c500" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_shadow_alpha_2() {
var canvas = document.getElementById('c500');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.shadowColor = 'rgba(0, 0, 255, 0.5)';
ctx.shadowOffsetY = 50;
ctx.fillRect(0, -50, 100, 50);
isPixel(ctx, 50,25, 127,0,127,255, 2);
}
</script>
<!-- [[[ test_2d.shadow.alpha.3.html ]]] -->
<p>Canvas test: 2d.shadow.alpha.3</p>
<canvas id="c501" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_shadow_alpha_3() {
var canvas = document.getElementById('c501');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = '#f00'; // (work around broken Firefox globalAlpha caching)
ctx.shadowColor = '#00f';
ctx.shadowOffsetY = 50;
ctx.globalAlpha = 0.5;
ctx.fillRect(0, -50, 100, 50);
isPixel(ctx, 50,25, 127,0,127,255, 2);
}
</script>
<!-- [[[ test_2d.shadow.alpha.4.html ]]] -->
<p>Canvas test: 2d.shadow.alpha.4</p>
<canvas id="c502" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_shadow_alpha_4() {
var canvas = document.getElementById('c502');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = '#f00'; // (work around broken Firefox globalAlpha caching)
ctx.shadowColor = 'rgba(0, 0, 255, 0.707)';
ctx.shadowOffsetY = 50;
ctx.globalAlpha = 0.707;
ctx.fillRect(0, -50, 100, 50);
isPixel(ctx, 50,25, 127,0,127,255, 2);
}
</script>
<!-- [[[ test_2d.shadow.alpha.5.html ]]] -->
<p>Canvas test: 2d.shadow.alpha.5</p>
<canvas id="c503" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_shadow_alpha_5() {
var canvas = document.getElementById('c503');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = 'rgba(64, 0, 0, 0.5)';
ctx.shadowColor = '#00f';
ctx.shadowOffsetY = 50;
ctx.fillRect(0, -50, 100, 50);
isPixel(ctx, 50,25, 127,0,127,255, 2);
}
</script>
<!-- [[[ test_2d.shadow.attributes.shadowBlur.1.html ]]] -->
<p>Canvas test: 2d.shadow.attributes.shadowBlur.1</p>
<canvas id="c504" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_shadow_attributes_shadowBlur_1() {
var canvas = document.getElementById('c504');
var ctx = canvas.getContext('2d');
ctx.shadowBlur = 1;
ok(ctx.shadowBlur === 1, "ctx.shadowBlur === 1");
ctx.shadowBlur = 0.5;
ok(ctx.shadowBlur === 0.5, "ctx.shadowBlur === 0.5");
ctx.shadowBlur = 1e6;
ok(ctx.shadowBlur === 1e6, "ctx.shadowBlur === 1e6");
ctx.shadowBlur = 1;
ctx.shadowBlur = -2;
ok(ctx.shadowBlur === 1, "ctx.shadowBlur === 1");
ctx.shadowBlur = 0;
ok(ctx.shadowBlur === 0, "ctx.shadowBlur === 0");
}
</script>
<!-- [[[ test_2d.shadow.attributes.shadowBlur.2.html ]]] -->
<p>Canvas test: 2d.shadow.attributes.shadowBlur.2</p>
<canvas id="c505" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_shadow_attributes_shadowBlur_2() {
var canvas = document.getElementById('c505');
var ctx = canvas.getContext('2d');
ctx.shadowBlur = 1;
ctx.shadowBlur = -2;
ok(ctx.shadowBlur === 1, "ctx.shadowBlur === 1");
ctx.shadowBlur = 1;
ctx.shadowBlur = Infinity;
ok(ctx.shadowBlur === 1, "ctx.shadowBlur === 1");
ctx.shadowBlur = 1;
ctx.shadowBlur = -Infinity;
ok(ctx.shadowBlur === 1, "ctx.shadowBlur === 1");
ctx.shadowBlur = 1;
ctx.shadowBlur = NaN;
ok(ctx.shadowBlur === 1, "ctx.shadowBlur === 1");
}
</script>
<!-- [[[ test_2d.shadow.attributes.shadowColor.1.html ]]] -->
<p>Canvas test: 2d.shadow.attributes.shadowColor.1</p>
<canvas id="c506" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_shadow_attributes_shadowColor_1() {
var canvas = document.getElementById('c506');
var ctx = canvas.getContext('2d');
ctx.shadowColor = 'lime';
ok(ctx.shadowColor === '#00ff00', "ctx.shadowColor === '#00ff00'");
ctx.shadowColor = 'RGBA(0,255, 0,0)';
is(ctx.shadowColor, 'rgba(0, 255, 0, 0)', "ctx.shadowColor should be what we set it to");
}
</script>
<!-- [[[ test_2d.shadow.attributes.shadowColor.2.html ]]] -->
<p>Canvas test: 2d.shadow.attributes.shadowColor.2</p>
<canvas id="c507" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_shadow_attributes_shadowColor_2() {
var canvas = document.getElementById('c507');
var ctx = canvas.getContext('2d');
ctx.shadowColor = '#00ff00';
ctx.shadowColor = 'bogus';
ok(ctx.shadowColor === '#00ff00', "ctx.shadowColor === '#00ff00'");
ctx.shadowColor = ctx;
ok(ctx.shadowColor === '#00ff00', "ctx.shadowColor === '#00ff00'");
ctx.shadowColor = undefined;
ok(ctx.shadowColor === '#00ff00', "ctx.shadowColor === '#00ff00'");
}
</script>
<!-- [[[ test_2d.shadow.attributes.shadowOffset.1.html ]]] -->
<p>Canvas test: 2d.shadow.attributes.shadowOffset.1</p>
<canvas id="c508" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_shadow_attributes_shadowOffset_1() {
var canvas = document.getElementById('c508');
var ctx = canvas.getContext('2d');
ctx.shadowOffsetX = 1;
ctx.shadowOffsetY = 2;
ok(ctx.shadowOffsetX === 1, "ctx.shadowOffsetX === 1");
ok(ctx.shadowOffsetY === 2, "ctx.shadowOffsetY === 2");
ctx.shadowOffsetX = 0.5;
ctx.shadowOffsetY = 0.25;
ok(ctx.shadowOffsetX === 0.5, "ctx.shadowOffsetX === 0.5");
ok(ctx.shadowOffsetY === 0.25, "ctx.shadowOffsetY === 0.25");
ctx.shadowOffsetX = -0.5;
ctx.shadowOffsetY = -0.25;
ok(ctx.shadowOffsetX === -0.5, "ctx.shadowOffsetX === -0.5");
ok(ctx.shadowOffsetY === -0.25, "ctx.shadowOffsetY === -0.25");
ctx.shadowOffsetX = 1e6;
ctx.shadowOffsetY = 1e6;
ok(ctx.shadowOffsetX === 1e6, "ctx.shadowOffsetX === 1e6");
ok(ctx.shadowOffsetY === 1e6, "ctx.shadowOffsetY === 1e6");
}
</script>
<!-- [[[ test_2d.shadow.attributes.shadowOffset.2.html ]]] -->
<p>Canvas test: 2d.shadow.attributes.shadowOffset.2</p>
<canvas id="c509" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_shadow_attributes_shadowOffset_2() {
var canvas = document.getElementById('c509');
var ctx = canvas.getContext('2d');
ctx.shadowOffsetX = 1;
ctx.shadowOffsetY = 2;
ctx.shadowOffsetX = Infinity;
ctx.shadowOffsetY = Infinity;
ok(ctx.shadowOffsetX === 1, "ctx.shadowOffsetX === 1");
ok(ctx.shadowOffsetY === 2, "ctx.shadowOffsetY === 2");
ctx.shadowOffsetX = 1;
ctx.shadowOffsetY = 2;
ctx.shadowOffsetX = -Infinity;
ctx.shadowOffsetY = -Infinity;
ok(ctx.shadowOffsetX === 1, "ctx.shadowOffsetX === 1");
ok(ctx.shadowOffsetY === 2, "ctx.shadowOffsetY === 2");
ctx.shadowOffsetX = 1;
ctx.shadowOffsetY = 2;
ctx.shadowOffsetX = NaN;
ctx.shadowOffsetY = NaN;
ok(ctx.shadowOffsetX === 1, "ctx.shadowOffsetX === 1");
ok(ctx.shadowOffsetY === 2, "ctx.shadowOffsetY === 2");
}
</script>
<!-- [[[ test_2d.shadow.basic.1.html ]]] -->
<p>Canvas test: 2d.shadow.basic.1</p>
<canvas id="c510" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_shadow_basic_1() {
var canvas = document.getElementById('c510');
var ctx = canvas.getContext('2d');
ctx.shadowColor = '#f00';
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.shadow.basic.2.html ]]] -->
<p>Canvas test: 2d.shadow.basic.2</p>
<canvas id="c511" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_shadow_basic_2() {
var canvas = document.getElementById('c511');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = '#f00';
ctx.shadowColor = '#f00';
ctx.fillRect(0, -50, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.shadow.blur.high.html ]]] -->
<p>Canvas test: 2d.shadow.blur.high</p>
<canvas id="c512" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_shadow_blur_high() {
var canvas = document.getElementById('c512');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#ff0';
ctx.fillRect(0, 0, 100, 50);
ctx.shadowColor = '#00f';
ctx.shadowOffsetY = 0;
ctx.shadowBlur = 555.6;
ctx.fillRect(-200, -200, 200, 400);
todo(false, "test completed successfully"); // (Bug 483989)
}
</script>
<!-- [[[ test_2d.shadow.blur.low.html ]]] -->
<p>Canvas test: 2d.shadow.blur.low</p>
<canvas id="c513" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_shadow_blur_low() {
var canvas = document.getElementById('c513');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#ff0';
ctx.fillRect(0, 0, 100, 50);
ctx.shadowColor = '#00f';
ctx.shadowOffsetY = 25;
for (var x = 0; x < 100; ++x) {
ctx.save();
ctx.beginPath();
ctx.rect(x, 0, 1, 50);
ctx.clip();
ctx.shadowBlur = x;
ctx.fillRect(-200, -200, 500, 200);
ctx.restore();
}
todo(false, "test completed successfully"); // (Bug 483989)
}
</script>
<!-- [[[ test_2d.shadow.canvas.alpha.html ]]] -->
<p>Canvas test: 2d.shadow.canvas.alpha</p>
<canvas id="c514" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_shadow_canvas_alpha() {
var canvas = document.getElementById('c514');
var ctx = canvas.getContext('2d');
var canvas2 = document.createElement('canvas');
canvas2.width = 100;
canvas2.height = 50;
var ctx2 = canvas2.getContext('2d');
ctx2.fillStyle = 'rgba(255, 0, 0, 0.5)';
ctx2.fillRect(0, 0, 100, 50);
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.shadowOffsetY = 50;
ctx.shadowColor = '#00f';
ctx.drawImage(canvas2, 0, -50);
isPixel(ctx, 50,25, 127,0,127,255, 2);
}
</script>
<img src="image_transparent50.png" id="transparent50_1.png" class="resource">
<!-- [[[ test_2d.shadow.canvas.basic.html ]]] -->
<p>Canvas test: 2d.shadow.canvas.basic</p>
<canvas id="c515" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_shadow_canvas_basic() {
var canvas = document.getElementById('c515');
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 = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.shadowColor = '#0f0';
ctx.shadowOffsetY = 50;
ctx.drawImage(canvas2, 0, -50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.shadow.canvas.transparent.1.html ]]] -->
<p>Canvas test: 2d.shadow.canvas.transparent.1</p>
<canvas id="c516" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_shadow_canvas_transparent_1() {
var canvas = document.getElementById('c516');
var ctx = canvas.getContext('2d');
var canvas2 = document.createElement('canvas');
canvas2.width = 100;
canvas2.height = 50;
var ctx2 = canvas2.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.shadowColor = '#f00';
ctx.shadowOffsetY = 50;
ctx.drawImage(canvas2, 0, -50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.shadow.canvas.transparent.2.html ]]] -->
<p>Canvas test: 2d.shadow.canvas.transparent.2</p>
<canvas id="c517" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_shadow_canvas_transparent_2() {
var canvas = document.getElementById('c517');
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, 50, 50);
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 50, 50);
ctx.fillStyle = '#f00';
ctx.fillRect(50, 0, 50, 50);
ctx.shadowOffsetY = 50;
ctx.shadowColor = '#0f0';
ctx.drawImage(canvas2, 50, -50);
ctx.shadowColor = '#f00';
ctx.drawImage(canvas2, -50, -50);
isPixel(ctx, 25,25, 0,255,0,255, 0);
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 75,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.shadow.clip.1.html ]]] -->
<p>Canvas test: 2d.shadow.clip.1</p>
<canvas id="c518" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_shadow_clip_1() {
var canvas = document.getElementById('c518');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 50, 50);
ctx.fillStyle = '#f00';
ctx.fillRect(50, 0, 50, 50);
ctx.save();
ctx.beginPath();
ctx.rect(50, 0, 50, 50);
ctx.clip();
ctx.shadowColor = '#0f0';
ctx.shadowOffsetX = 50;
ctx.fillRect(0, 0, 50, 50);
ctx.restore();
isPixel(ctx, 25,25, 0,255,0,255, 0);
isPixel(ctx, 75,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.shadow.clip.2.html ]]] -->
<p>Canvas test: 2d.shadow.clip.2</p>
<canvas id="c519" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_shadow_clip_2() {
var canvas = document.getElementById('c519');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 50, 50);
ctx.fillStyle = '#0f0';
ctx.fillRect(50, 0, 50, 50);
ctx.save();
ctx.beginPath();
ctx.rect(0, 0, 50, 50);
ctx.clip();
ctx.shadowColor = '#f00';
ctx.shadowOffsetX = 50;
ctx.fillRect(0, 0, 50, 50);
ctx.restore();
isPixel(ctx, 25,25, 0,255,0,255, 0);
isPixel(ctx, 75,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.shadow.clip.3.html ]]] -->
<p>Canvas test: 2d.shadow.clip.3</p>
<canvas id="c520" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_shadow_clip_3() {
var canvas = document.getElementById('c520');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 50, 50);
ctx.fillStyle = '#0f0';
ctx.fillRect(50, 0, 50, 50);
ctx.save();
ctx.beginPath();
ctx.rect(0, 0, 50, 50);
ctx.clip();
ctx.fillStyle = '#f00';
ctx.shadowColor = '#0f0';
ctx.shadowOffsetX = 50;
ctx.fillRect(-50, 0, 50, 50);
ctx.restore();
isPixel(ctx, 25,25, 0,255,0,255, 0);
isPixel(ctx, 75,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.shadow.composite.1.html ]]] -->
<p>Canvas test: 2d.shadow.composite.1</p>
<canvas id="c521" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_shadow_composite_1() {
var canvas = document.getElementById('c521');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'xor';
ctx.shadowColor = '#f00';
ctx.shadowOffsetX = 100;
ctx.fillStyle = '#0f0';
ctx.fillRect(-100, 0, 200, 50);
isPixel(ctx, 50, 25, 0, 255, 0, 255, 2);
}
</script>
<!-- [[[ test_2d.shadow.composite.2.html ]]] -->
<p>Canvas test: 2d.shadow.composite.2</p>
<canvas id="c522" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_shadow_composite_2() {
var canvas = document.getElementById('c522');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'xor';
ctx.shadowColor = '#f00';
ctx.shadowBlur = 1;
ctx.fillStyle = '#0f0';
ctx.fillRect(-10, -10, 120, 70);
isPixel(ctx, 50, 25, 0, 255, 0, 255, 2);
}
</script>
<!-- [[[ test_2d.shadow.composite.3.html ]]] -->
<p>Canvas test: 2d.shadow.composite.3</p>
<canvas id="c523" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_shadow_composite_3() {
var canvas = document.getElementById('c523');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'xor';
ctx.shadowColor = '#f00';
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 2);
}
</script>
<!-- [[[ test_2d.shadow.composite.4.html ]]] -->
<p>Canvas test: 2d.shadow.composite.4</p>
<canvas id="c524" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_shadow_composite_4() {
var canvas = document.getElementById('c524');
var ctx = canvas.getContext('2d');
ctx.globalCompositeOperation = 'destination-over';
ctx.shadowColor = '#0f0';
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 2);
}
</script>
<!-- [[[ test_2d.shadow.gradient.alpha.html ]]] -->
<p>Canvas test: 2d.shadow.gradient.alpha</p>
<canvas id="c525" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_shadow_gradient_alpha() {
var canvas = document.getElementById('c525');
var ctx = canvas.getContext('2d');
var gradient = ctx.createLinearGradient(0, 0, 100, 0);
gradient.addColorStop(0, 'rgba(255,0,0,0.5)');
gradient.addColorStop(1, 'rgba(255,0,0,0.5)');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.shadowOffsetY = 50;
ctx.shadowColor = '#00f';
ctx.fillStyle = gradient;
ctx.fillRect(0, -50, 100, 50);
isPixel(ctx, 50,25, 127,0,127,255, 2);
}
</script>
<!-- [[[ test_2d.shadow.gradient.basic.html ]]] -->
<p>Canvas test: 2d.shadow.gradient.basic</p>
<canvas id="c526" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_shadow_gradient_basic() {
var canvas = document.getElementById('c526');
var ctx = canvas.getContext('2d');
var gradient = ctx.createLinearGradient(0, 0, 100, 0);
gradient.addColorStop(0, '#f00');
gradient.addColorStop(1, '#f00');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.shadowColor = '#0f0';
ctx.shadowOffsetY = 50;
ctx.fillStyle = gradient;
ctx.fillRect(0, -50, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.shadow.gradient.transparent.1.html ]]] -->
<p>Canvas test: 2d.shadow.gradient.transparent.1</p>
<canvas id="c527" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_shadow_gradient_transparent_1() {
var canvas = document.getElementById('c527');
var ctx = canvas.getContext('2d');
var gradient = ctx.createLinearGradient(0, 0, 100, 0);
gradient.addColorStop(0, 'rgba(0,0,0,0)');
gradient.addColorStop(1, 'rgba(0,0,0,0)');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.shadowColor = '#f00';
ctx.shadowOffsetY = 50;
ctx.fillStyle = gradient;
ctx.fillRect(0, -50, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.shadow.gradient.transparent.2.html ]]] -->
<p>Canvas test: 2d.shadow.gradient.transparent.2</p>
<canvas id="c528" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_shadow_gradient_transparent_2() {
var canvas = document.getElementById('c528');
var ctx = canvas.getContext('2d');
var gradient = ctx.createLinearGradient(0, 0, 100, 0);
gradient.addColorStop(0, '#f00');
gradient.addColorStop(0.499, '#f00');
gradient.addColorStop(0.5, 'rgba(0,0,0,0)');
gradient.addColorStop(1, 'rgba(0,0,0,0)');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 50, 50);
ctx.fillStyle = '#0f0';
ctx.fillRect(50, 0, 50, 50);
ctx.shadowOffsetY = 50;
ctx.shadowColor = '#0f0';
ctx.fillStyle = gradient;
ctx.fillRect(0, -50, 100, 50);
isPixel(ctx, 25,25, 0,255,0,255, 0);
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 75,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.shadow.image.alpha.html ]]] -->
<p>Canvas test: 2d.shadow.image.alpha</p>
<canvas id="c529" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_shadow_image_alpha() {
var canvas = document.getElementById('c529');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.shadowOffsetY = 50;
ctx.shadowColor = '#00f';
ctx.drawImage(document.getElementById('transparent50_2.png'), 0, -50);
isPixel(ctx, 50,25, 127,0,127,255, 2);
}
</script>
<img src="image_transparent50.png" id="transparent50_2.png" class="resource">
<!-- [[[ test_2d.shadow.image.basic.html ]]] -->
<p>Canvas test: 2d.shadow.image.basic</p>
<canvas id="c530" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_shadow_image_basic() {
var canvas = document.getElementById('c530');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.shadowColor = '#0f0';
ctx.shadowOffsetY = 50;
ctx.drawImage(document.getElementById('red_17.png'), 0, -50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<img src="image_red.png" id="red_17.png" class="resource">
<!-- [[[ test_2d.shadow.image.scale.html ]]] -->
<p>Canvas test: 2d.shadow.image.scale</p>
<canvas id="c531" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_shadow_image_scale() {
var canvas = document.getElementById('c531');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.shadowOffsetY = 50;
ctx.shadowColor = '#0f0';
ctx.drawImage(document.getElementById('redtransparent_2.png'), 0, 0, 100, 50, -10, -50, 240, 50);
isPixel(ctx, 25,25, 0,255,0,255, 2);
isPixel(ctx, 50,25, 0,255,0,255, 2);
isPixel(ctx, 75,25, 0,255,0,255, 2);
}
</script>
<img src="image_redtransparent.png" id="redtransparent_2.png" class="resource">
<!-- [[[ test_2d.shadow.image.section.html ]]] -->
<p>Canvas test: 2d.shadow.image.section</p>
<canvas id="c532" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_shadow_image_section() {
var canvas = document.getElementById('c532');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.shadowOffsetY = 50;
ctx.shadowColor = '#f00';
ctx.drawImage(document.getElementById('redtransparent_3.png'), 50, 0, 50, 50, 0, -50, 50, 50);
isPixel(ctx, 25,25, 0,255,0,255, 2);
isPixel(ctx, 50,25, 0,255,0,255, 2);
isPixel(ctx, 75,25, 0,255,0,255, 2);
}
</script>
<img src="image_redtransparent.png" id="redtransparent_3.png" class="resource">
<!-- [[[ test_2d.shadow.image.transparent.1.html ]]] -->
<p>Canvas test: 2d.shadow.image.transparent.1</p>
<canvas id="c533" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_shadow_image_transparent_1() {
var canvas = document.getElementById('c533');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.shadowColor = '#f00';
ctx.shadowOffsetY = 50;
ctx.drawImage(document.getElementById('transparent_1.png'), 0, -50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<img src="image_transparent.png" id="transparent_1.png" class="resource">
<!-- [[[ test_2d.shadow.image.transparent.2.html ]]] -->
<p>Canvas test: 2d.shadow.image.transparent.2</p>
<canvas id="c534" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_shadow_image_transparent_2() {
var canvas = document.getElementById('c534');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 50, 50);
ctx.fillStyle = '#f00';
ctx.fillRect(50, 0, 50, 50);
ctx.shadowOffsetY = 50;
ctx.shadowColor = '#0f0';
ctx.drawImage(document.getElementById('redtransparent_4.png'), 50, -50);
ctx.shadowColor = '#f00';
ctx.drawImage(document.getElementById('redtransparent_4.png'), -50, -50);
isPixel(ctx, 25,25, 0,255,0,255, 0);
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 75,25, 0,255,0,255, 0);
}
</script>
<img src="image_redtransparent.png" id="redtransparent_4.png" class="resource">
<!-- [[[ test_2d.shadow.offset.negativeX.html ]]] -->
<p>Canvas test: 2d.shadow.offset.negativeX</p>
<canvas id="c535" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_shadow_offset_negativeX() {
var canvas = document.getElementById('c535');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = '#0f0';
ctx.shadowColor = '#0f0';
ctx.shadowOffsetX = -50;
ctx.fillRect(50, 0, 50, 50);
isPixel(ctx, 25,25, 0,255,0,255, 0);
isPixel(ctx, 75,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.shadow.offset.negativeY.html ]]] -->
<p>Canvas test: 2d.shadow.offset.negativeY</p>
<canvas id="c536" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_shadow_offset_negativeY() {
var canvas = document.getElementById('c536');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = '#0f0';
ctx.shadowColor = '#0f0';
ctx.shadowOffsetY = -25;
ctx.fillRect(0, 25, 100, 25);
isPixel(ctx, 50,12, 0,255,0,255, 0);
isPixel(ctx, 50,37, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.shadow.offset.positiveX.html ]]] -->
<p>Canvas test: 2d.shadow.offset.positiveX</p>
<canvas id="c537" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_shadow_offset_positiveX() {
var canvas = document.getElementById('c537');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = '#0f0';
ctx.shadowColor = '#0f0';
ctx.shadowOffsetX = 50;
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.shadow.offset.positiveY.html ]]] -->
<p>Canvas test: 2d.shadow.offset.positiveY</p>
<canvas id="c538" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_shadow_offset_positiveY() {
var canvas = document.getElementById('c538');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = '#0f0';
ctx.shadowColor = '#0f0';
ctx.shadowOffsetY = 25;
ctx.fillRect(0, 0, 100, 25);
isPixel(ctx, 50,12, 0,255,0,255, 0);
isPixel(ctx, 50,37, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.shadow.outside.html ]]] -->
<p>Canvas test: 2d.shadow.outside</p>
<canvas id="c539" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_shadow_outside() {
var canvas = document.getElementById('c539');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.shadowColor = '#0f0';
ctx.shadowOffsetX = 100;
ctx.fillRect(-100, 0, 25, 50);
ctx.shadowOffsetX = -100;
ctx.fillRect(175, 0, 25, 50);
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 100;
ctx.fillRect(25, -100, 50, 25);
ctx.shadowOffsetY = -100;
ctx.fillRect(25, 125, 50, 25);
isPixel(ctx, 12,25, 0,255,0,255, 0);
isPixel(ctx, 87,25, 0,255,0,255, 0);
isPixel(ctx, 50,12, 0,255,0,255, 0);
isPixel(ctx, 50,37, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.shadow.pattern.alpha.html ]]] -->
<p>Canvas test: 2d.shadow.pattern.alpha</p>
<canvas id="c540" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_shadow_pattern_alpha() {
var canvas = document.getElementById('c540');
var ctx = canvas.getContext('2d');
var pattern = ctx.createPattern(document.getElementById('transparent50_3.png'), 'repeat');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.shadowOffsetY = 50;
ctx.shadowColor = '#00f';
ctx.fillStyle = pattern;
ctx.fillRect(0, -50, 100, 50);
isPixel(ctx, 50,25, 127,0,127,255, 2);
}
</script>
<img src="image_transparent50.png" id="transparent50_3.png" class="resource">
<!-- [[[ test_2d.shadow.pattern.basic.html ]]] -->
<p>Canvas test: 2d.shadow.pattern.basic</p>
<canvas id="c541" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_shadow_pattern_basic() {
var canvas = document.getElementById('c541');
var ctx = canvas.getContext('2d');
var pattern = ctx.createPattern(document.getElementById('red_18.png'), 'repeat');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.shadowColor = '#0f0';
ctx.shadowOffsetY = 50;
ctx.fillStyle = pattern;
ctx.fillRect(0, -50, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<img src="image_red.png" id="red_18.png" class="resource">
<!-- [[[ test_2d.shadow.pattern.transparent.1.html ]]] -->
<p>Canvas test: 2d.shadow.pattern.transparent.1</p>
<canvas id="c542" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_shadow_pattern_transparent_1() {
var canvas = document.getElementById('c542');
var ctx = canvas.getContext('2d');
var pattern = ctx.createPattern(document.getElementById('transparent_2.png'), 'repeat');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.shadowColor = '#f00';
ctx.shadowOffsetY = 50;
ctx.fillStyle = pattern;
ctx.fillRect(0, -50, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<img src="image_transparent.png" id="transparent_2.png" class="resource">
<!-- [[[ test_2d.shadow.pattern.transparent.2.html ]]] -->
<p>Canvas test: 2d.shadow.pattern.transparent.2</p>
<canvas id="c543" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_shadow_pattern_transparent_2() {
var canvas = document.getElementById('c543');
var ctx = canvas.getContext('2d');
var pattern = ctx.createPattern(document.getElementById('redtransparent_5.png'), 'repeat');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 50, 50);
ctx.fillStyle = '#0f0';
ctx.fillRect(50, 0, 50, 50);
ctx.shadowOffsetY = 50;
ctx.shadowColor = '#0f0';
ctx.fillStyle = pattern;
ctx.fillRect(0, -50, 100, 50);
isPixel(ctx, 25,25, 0,255,0,255, 0);
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 75,25, 0,255,0,255, 0);
}
</script>
<img src="image_redtransparent.png" id="redtransparent_5.png" class="resource">
<!-- [[[ test_2d.shadow.stroke.basic.html ]]] -->
<p>Canvas test: 2d.shadow.stroke.basic</p>
<canvas id="c544" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_shadow_stroke_basic() {
var canvas = document.getElementById('c544');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.strokeStyle = '#f00';
ctx.shadowColor = '#0f0';
ctx.shadowOffsetY = 50;
ctx.beginPath();
ctx.lineWidth = 50;
ctx.moveTo(0, -25);
ctx.lineTo(100, -25);
ctx.stroke();
isPixel(ctx, 1,25, 0,255,0,255, 0);
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 98,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.shadow.stroke.cap.1.html ]]] -->
<p>Canvas test: 2d.shadow.stroke.cap.1</p>
<canvas id="c545" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_shadow_stroke_cap_1() {
var canvas = document.getElementById('c545');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.strokeStyle = '#f00';
ctx.shadowColor = '#f00';
ctx.shadowOffsetY = 50;
ctx.beginPath();
ctx.lineWidth = 50;
ctx.lineCap = 'butt';
ctx.moveTo(-50, -25);
ctx.lineTo(0, -25);
ctx.moveTo(100, -25);
ctx.lineTo(150, -25);
ctx.stroke();
isPixel(ctx, 1,25, 0,255,0,255, 0);
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 98,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.shadow.stroke.cap.2.html ]]] -->
<p>Canvas test: 2d.shadow.stroke.cap.2</p>
<canvas id="c546" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_shadow_stroke_cap_2() {
var canvas = document.getElementById('c546');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.strokeStyle = '#f00';
ctx.shadowColor = '#0f0';
ctx.shadowOffsetY = 50;
ctx.beginPath();
ctx.lineWidth = 50;
ctx.lineCap = 'square';
ctx.moveTo(25, -25);
ctx.lineTo(75, -25);
ctx.stroke();
isPixel(ctx, 1,25, 0,255,0,255, 0);
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 98,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.shadow.stroke.join.1.html ]]] -->
<p>Canvas test: 2d.shadow.stroke.join.1</p>
<canvas id="c547" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_shadow_stroke_join_1() {
var canvas = document.getElementById('c547');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.strokeStyle = '#f00';
ctx.shadowColor = '#f00';
ctx.shadowOffsetX = 100;
ctx.lineWidth = 200;
ctx.lineJoin = 'bevel';
ctx.beginPath();
ctx.moveTo(-200, -50);
ctx.lineTo(-150, -50);
ctx.lineTo(-151, -100);
ctx.stroke();
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 48,48, 0,255,0,255, 0);
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.shadow.stroke.join.2.html ]]] -->
<p>Canvas test: 2d.shadow.stroke.join.2</p>
<canvas id="c548" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_shadow_stroke_join_2() {
var canvas = document.getElementById('c548');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 50, 50);
ctx.fillStyle = '#0f0';
ctx.fillRect(50, 0, 50, 50);
ctx.strokeStyle = '#f00';
ctx.shadowColor = '#0f0';
ctx.shadowOffsetX = 100;
ctx.lineWidth = 200;
ctx.lineJoin = 'miter';
ctx.beginPath();
ctx.moveTo(-200, -50);
ctx.lineTo(-150, -50);
ctx.lineTo(-151, -100);
ctx.stroke();
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 48,48, 0,255,0,255, 0);
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.shadow.stroke.join.3.html ]]] -->
<p>Canvas test: 2d.shadow.stroke.join.3</p>
<canvas id="c549" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_shadow_stroke_join_3() {
var canvas = document.getElementById('c549');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.strokeStyle = '#f00';
ctx.shadowColor = '#f00';
ctx.shadowOffsetX = 100;
ctx.lineWidth = 200;
ctx.lineJoin = 'miter';
ctx.miterLimit = 0.1;
ctx.beginPath();
ctx.moveTo(-200, -50);
ctx.lineTo(-150, -50);
ctx.lineTo(-151, -100); // (not an exact right angle, to avoid some other bug in Firefox 3)
ctx.stroke();
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 48,48, 0,255,0,255, 0);
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.shadow.transform.1.html ]]] -->
<p>Canvas test: 2d.shadow.transform.1</p>
<canvas id="c550" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_shadow_transform_1() {
var canvas = document.getElementById('c550');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.shadowOffsetY = 50;
ctx.shadowColor = '#0f0';
ctx.translate(100, 100);
ctx.fillRect(-100, -150, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.shadow.transform.2.html ]]] -->
<p>Canvas test: 2d.shadow.transform.2</p>
<canvas id="c551" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_shadow_transform_2() {
var canvas = document.getElementById('c551');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.shadowOffsetY = 50;
ctx.shadowColor = '#0f0';
ctx.rotate(Math.PI)
ctx.fillRect(-100, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.state.saverestore.bitmap.html ]]] -->
<p>Canvas test: 2d.state.saverestore.bitmap</p>
<!-- Testing: save()/restore() does not affect the current bitmap -->
<canvas id="c552" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_state_saverestore_bitmap() {
var canvas = document.getElementById('c552');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.save();
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.restore();
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.state.saverestore.clip.html ]]] -->
<p>Canvas test: 2d.state.saverestore.clip</p>
<!-- Testing: save()/restore() affects the clipping path -->
<canvas id="c553" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_state_saverestore_clip() {
var canvas = document.getElementById('c553');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.save();
ctx.rect(0, 0, 1, 1);
ctx.clip();
ctx.restore();
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.state.saverestore.fillStyle.html ]]] -->
<p>Canvas test: 2d.state.saverestore.fillStyle</p>
<!-- Testing: save()/restore() works for fillStyle -->
<canvas id="c554" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_state_saverestore_fillStyle() {
var canvas = document.getElementById('c554');
var ctx = canvas.getContext('2d');
// Test that restore() undoes any modifications
var old = ctx.fillStyle;
ctx.save();
ctx.fillStyle = "#ff0000";
ctx.restore();
ok(ctx.fillStyle === old, "ctx.fillStyle === old");
// Also test that save() doesn't modify the values
ctx.fillStyle = "#ff0000";
old = ctx.fillStyle;
// we're not interested in failures caused by get(set(x)) != x (e.g.
// from rounding), so compare against d instead of against "#ff0000"
ctx.save();
ok(ctx.fillStyle === old, "ctx.fillStyle === old");
ctx.restore();
}
</script>
<!-- [[[ test_2d.state.saverestore.globalAlpha.html ]]] -->
<p>Canvas test: 2d.state.saverestore.globalAlpha</p>
<!-- Testing: save()/restore() works for globalAlpha -->
<canvas id="c555" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_state_saverestore_globalAlpha() {
var canvas = document.getElementById('c555');
var ctx = canvas.getContext('2d');
// Test that restore() undoes any modifications
var old = ctx.globalAlpha;
ctx.save();
ctx.globalAlpha = 0.5;
ctx.restore();
ok(ctx.globalAlpha === old, "ctx.globalAlpha === old");
// Also test that save() doesn't modify the values
ctx.globalAlpha = 0.5;
old = ctx.globalAlpha;
// we're not interested in failures caused by get(set(x)) != x (e.g.
// from rounding), so compare against d instead of against 0.5
ctx.save();
ok(ctx.globalAlpha === old, "ctx.globalAlpha === old");
ctx.restore();
}
</script>
<!-- [[[ test_2d.state.saverestore.globalCompositeOperation.html ]]] -->
<p>Canvas test: 2d.state.saverestore.globalCompositeOperation</p>
<!-- Testing: save()/restore() works for globalCompositeOperation -->
<canvas id="c556" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_state_saverestore_globalCompositeOperation() {
var canvas = document.getElementById('c556');
var ctx = canvas.getContext('2d');
// Test that restore() undoes any modifications
var old = ctx.globalCompositeOperation;
ctx.save();
ctx.globalCompositeOperation = "copy";
ctx.restore();
ok(ctx.globalCompositeOperation === old, "ctx.globalCompositeOperation === old");
// Also test that save() doesn't modify the values
ctx.globalCompositeOperation = "copy";
old = ctx.globalCompositeOperation;
// we're not interested in failures caused by get(set(x)) != x (e.g.
// from rounding), so compare against d instead of against "copy"
ctx.save();
ok(ctx.globalCompositeOperation === old, "ctx.globalCompositeOperation === old");
ctx.restore();
}
</script>
<!-- [[[ test_2d.state.saverestore.lineCap.html ]]] -->
<p>Canvas test: 2d.state.saverestore.lineCap</p>
<!-- Testing: save()/restore() works for lineCap -->
<canvas id="c557" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_state_saverestore_lineCap() {
var canvas = document.getElementById('c557');
var ctx = canvas.getContext('2d');
// Test that restore() undoes any modifications
var old = ctx.lineCap;
ctx.save();
ctx.lineCap = "round";
ctx.restore();
ok(ctx.lineCap === old, "ctx.lineCap === old");
// Also test that save() doesn't modify the values
ctx.lineCap = "round";
old = ctx.lineCap;
// we're not interested in failures caused by get(set(x)) != x (e.g.
// from rounding), so compare against d instead of against "round"
ctx.save();
ok(ctx.lineCap === old, "ctx.lineCap === old");
ctx.restore();
}
</script>
<!-- [[[ test_2d.state.saverestore.lineJoin.html ]]] -->
<p>Canvas test: 2d.state.saverestore.lineJoin</p>
<!-- Testing: save()/restore() works for lineJoin -->
<canvas id="c558" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_state_saverestore_lineJoin() {
var canvas = document.getElementById('c558');
var ctx = canvas.getContext('2d');
// Test that restore() undoes any modifications
var old = ctx.lineJoin;
ctx.save();
ctx.lineJoin = "round";
ctx.restore();
ok(ctx.lineJoin === old, "ctx.lineJoin === old");
// Also test that save() doesn't modify the values
ctx.lineJoin = "round";
old = ctx.lineJoin;
// we're not interested in failures caused by get(set(x)) != x (e.g.
// from rounding), so compare against d instead of against "round"
ctx.save();
ok(ctx.lineJoin === old, "ctx.lineJoin === old");
ctx.restore();
}
</script>
<!-- [[[ test_2d.state.saverestore.lineWidth.html ]]] -->
<p>Canvas test: 2d.state.saverestore.lineWidth</p>
<!-- Testing: save()/restore() works for lineWidth -->
<canvas id="c559" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_state_saverestore_lineWidth() {
var canvas = document.getElementById('c559');
var ctx = canvas.getContext('2d');
// Test that restore() undoes any modifications
var old = ctx.lineWidth;
ctx.save();
ctx.lineWidth = 0.5;
ctx.restore();
ok(ctx.lineWidth === old, "ctx.lineWidth === old");
// Also test that save() doesn't modify the values
ctx.lineWidth = 0.5;
old = ctx.lineWidth;
// we're not interested in failures caused by get(set(x)) != x (e.g.
// from rounding), so compare against d instead of against 0.5
ctx.save();
ok(ctx.lineWidth === old, "ctx.lineWidth === old");
ctx.restore();
}
</script>
<!-- [[[ test_2d.state.saverestore.miterLimit.html ]]] -->
<p>Canvas test: 2d.state.saverestore.miterLimit</p>
<!-- Testing: save()/restore() works for miterLimit -->
<canvas id="c560" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_state_saverestore_miterLimit() {
var canvas = document.getElementById('c560');
var ctx = canvas.getContext('2d');
// Test that restore() undoes any modifications
var old = ctx.miterLimit;
ctx.save();
ctx.miterLimit = 0.5;
ctx.restore();
ok(ctx.miterLimit === old, "ctx.miterLimit === old");
// Also test that save() doesn't modify the values
ctx.miterLimit = 0.5;
old = ctx.miterLimit;
// we're not interested in failures caused by get(set(x)) != x (e.g.
// from rounding), so compare against d instead of against 0.5
ctx.save();
ok(ctx.miterLimit === old, "ctx.miterLimit === old");
ctx.restore();
}
</script>
<!-- [[[ test_2d.state.saverestore.path.html ]]] -->
<p>Canvas test: 2d.state.saverestore.path</p>
<!-- Testing: save()/restore() does not affect the current path -->
<canvas id="c561" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_state_saverestore_path() {
var canvas = document.getElementById('c561');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.save();
ctx.rect(0, 0, 100, 50);
ctx.restore();
ctx.fillStyle = '#0f0';
ctx.fill();
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.state.saverestore.shadowBlur.html ]]] -->
<p>Canvas test: 2d.state.saverestore.shadowBlur</p>
<!-- Testing: save()/restore() works for shadowBlur -->
<canvas id="c562" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_state_saverestore_shadowBlur() {
var canvas = document.getElementById('c562');
var ctx = canvas.getContext('2d');
// Test that restore() undoes any modifications
var old = ctx.shadowBlur;
ctx.save();
ctx.shadowBlur = 5;
ctx.restore();
ok(ctx.shadowBlur === old, "ctx.shadowBlur === old");
// Also test that save() doesn't modify the values
ctx.shadowBlur = 5;
old = ctx.shadowBlur;
// we're not interested in failures caused by get(set(x)) != x (e.g.
// from rounding), so compare against d instead of against 5
ctx.save();
ok(ctx.shadowBlur === old, "ctx.shadowBlur === old");
ctx.restore();
}
</script>
<!-- [[[ test_2d.state.saverestore.shadowColor.html ]]] -->
<p>Canvas test: 2d.state.saverestore.shadowColor</p>
<!-- Testing: save()/restore() works for shadowColor -->
<canvas id="c563" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_state_saverestore_shadowColor() {
var canvas = document.getElementById('c563');
var ctx = canvas.getContext('2d');
// Test that restore() undoes any modifications
var old = ctx.shadowColor;
ctx.save();
ctx.shadowColor = "#ff0000";
ctx.restore();
ok(ctx.shadowColor === old, "ctx.shadowColor === old");
// Also test that save() doesn't modify the values
ctx.shadowColor = "#ff0000";
old = ctx.shadowColor;
// we're not interested in failures caused by get(set(x)) != x (e.g.
// from rounding), so compare against d instead of against "#ff0000"
ctx.save();
ok(ctx.shadowColor === old, "ctx.shadowColor === old");
ctx.restore();
}
</script>
<!-- [[[ test_2d.state.saverestore.shadowOffsetX.html ]]] -->
<p>Canvas test: 2d.state.saverestore.shadowOffsetX</p>
<!-- Testing: save()/restore() works for shadowOffsetX -->
<canvas id="c564" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_state_saverestore_shadowOffsetX() {
var canvas = document.getElementById('c564');
var ctx = canvas.getContext('2d');
// Test that restore() undoes any modifications
var old = ctx.shadowOffsetX;
ctx.save();
ctx.shadowOffsetX = 5;
ctx.restore();
ok(ctx.shadowOffsetX === old, "ctx.shadowOffsetX === old");
// Also test that save() doesn't modify the values
ctx.shadowOffsetX = 5;
old = ctx.shadowOffsetX;
// we're not interested in failures caused by get(set(x)) != x (e.g.
// from rounding), so compare against d instead of against 5
ctx.save();
ok(ctx.shadowOffsetX === old, "ctx.shadowOffsetX === old");
ctx.restore();
}
</script>
<!-- [[[ test_2d.state.saverestore.shadowOffsetY.html ]]] -->
<p>Canvas test: 2d.state.saverestore.shadowOffsetY</p>
<!-- Testing: save()/restore() works for shadowOffsetY -->
<canvas id="c565" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_state_saverestore_shadowOffsetY() {
var canvas = document.getElementById('c565');
var ctx = canvas.getContext('2d');
// Test that restore() undoes any modifications
var old = ctx.shadowOffsetY;
ctx.save();
ctx.shadowOffsetY = 5;
ctx.restore();
ok(ctx.shadowOffsetY === old, "ctx.shadowOffsetY === old");
// Also test that save() doesn't modify the values
ctx.shadowOffsetY = 5;
old = ctx.shadowOffsetY;
// we're not interested in failures caused by get(set(x)) != x (e.g.
// from rounding), so compare against d instead of against 5
ctx.save();
ok(ctx.shadowOffsetY === old, "ctx.shadowOffsetY === old");
ctx.restore();
}
</script>
<!-- [[[ test_2d.state.saverestore.stack.html ]]] -->
<p>Canvas test: 2d.state.saverestore.stack</p>
<!-- Testing: save()/restore() can be nested as a stack -->
<canvas id="c566" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_state_saverestore_stack() {
var canvas = document.getElementById('c566');
var ctx = canvas.getContext('2d');
ctx.lineWidth = 1;
ctx.save();
ctx.lineWidth = 2;
ctx.save();
ctx.lineWidth = 3;
ok(ctx.lineWidth == 3, "ctx.lineWidth == 3");
ctx.restore();
ok(ctx.lineWidth == 2, "ctx.lineWidth == 2");
ctx.restore();
ok(ctx.lineWidth == 1, "ctx.lineWidth == 1");
}
</script>
<!-- [[[ test_2d.state.saverestore.stackdepth.html ]]] -->
<p>Canvas test: 2d.state.saverestore.stackdepth</p>
<!-- Testing: save()/restore() stack depth is not unreasonably limited -->
<canvas id="c567" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_state_saverestore_stackdepth() {
var canvas = document.getElementById('c567');
var ctx = canvas.getContext('2d');
var limit = 512;
for (var i = 1; i < limit; ++i)
{
ctx.save();
ctx.lineWidth = i;
}
for (var i = limit-1; i > 0; --i)
{
ok(ctx.lineWidth == i, "ctx.lineWidth == i");
ctx.restore();
}
}
</script>
<!-- [[[ test_2d.state.saverestore.strokeStyle.html ]]] -->
<p>Canvas test: 2d.state.saverestore.strokeStyle</p>
<!-- Testing: save()/restore() works for strokeStyle -->
<canvas id="c568" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_state_saverestore_strokeStyle() {
var canvas = document.getElementById('c568');
var ctx = canvas.getContext('2d');
// Test that restore() undoes any modifications
var old = ctx.strokeStyle;
ctx.save();
ctx.strokeStyle = "#ff0000";
ctx.restore();
ok(ctx.strokeStyle === old, "ctx.strokeStyle === old");
// Also test that save() doesn't modify the values
ctx.strokeStyle = "#ff0000";
old = ctx.strokeStyle;
// we're not interested in failures caused by get(set(x)) != x (e.g.
// from rounding), so compare against d instead of against "#ff0000"
ctx.save();
ok(ctx.strokeStyle === old, "ctx.strokeStyle === old");
ctx.restore();
}
</script>
<!-- [[[ test_2d.state.saverestore.transformation.html ]]] -->
<p>Canvas test: 2d.state.saverestore.transformation</p>
<!-- Testing: save()/restore() affects the current transformation matrix -->
<canvas id="c569" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_state_saverestore_transformation() {
var canvas = document.getElementById('c569');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.save();
ctx.translate(200, 0);
ctx.restore();
ctx.fillStyle = '#f00';
ctx.fillRect(-200, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.state.saverestore.underflow.html ]]] -->
<p>Canvas test: 2d.state.saverestore.underflow - bug 296821</p>
<!-- Testing: restore() with an empty stack has no effect -->
<canvas id="c570" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_state_saverestore_underflow() {
var canvas = document.getElementById('c570');
var ctx = canvas.getContext('2d');
for (var i = 0; i < 16; ++i)
ctx.restore();
ctx.lineWidth = 0.5;
ctx.restore();
ok(ctx.lineWidth == 0.5, "ctx.lineWidth == 0.5");
}
</script>
<!-- [[[ test_2d.strokeRect.basic.html ]]] -->
<p>Canvas test: 2d.strokeRect.basic</p>
<canvas id="c571" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_strokeRect_basic() {
var canvas = document.getElementById('c571');
var ctx = canvas.getContext('2d');
ctx.strokeStyle = '#0f0';
ctx.lineWidth = 50;
ctx.strokeRect(25, 24, 50, 2);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.strokeRect.clip.html ]]] -->
<p>Canvas test: 2d.strokeRect.clip</p>
<canvas id="c572" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_strokeRect_clip() {
var canvas = document.getElementById('c572');
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.strokeStyle = '#f00';
ctx.lineWidth = 50;
ctx.strokeRect(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.strokeRect.globalalpha.html ]]] -->
<p>Canvas test: 2d.strokeRect.globalalpha</p>
<canvas id="c573" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_strokeRect_globalalpha() {
var canvas = document.getElementById('c573');
var ctx = canvas.getContext('2d');
ctx.globalAlpha = 0;
ctx.strokeStyle = '#f00';
ctx.lineWidth = 50;
ctx.strokeRect(25, 24, 50, 2);
isPixel(ctx, 50,25, 0,0,0,0, 0);
}
</script>
<!-- [[[ test_2d.strokeRect.globalcomposite.html ]]] -->
<p>Canvas test: 2d.strokeRect.globalcomposite</p>
<canvas id="c574" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_strokeRect_globalcomposite() {
var canvas = document.getElementById('c574');
var ctx = canvas.getContext('2d');
ctx.globalCompositeOperation = 'source-in';
ctx.strokeStyle = '#f00';
ctx.lineWidth = 50;
ctx.strokeRect(25, 24, 50, 2);
isPixel(ctx, 50,25, 0,0,0,0, 0);
}
</script>
<!-- [[[ test_2d.strokeRect.negative.html ]]] -->
<p>Canvas test: 2d.strokeRect.negative</p>
<canvas id="c575" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_strokeRect_negative() {
var canvas = document.getElementById('c575');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.strokeStyle = '#0f0';
ctx.lineWidth = 25;
ctx.strokeRect(12, 12, 26, 1);
ctx.strokeRect(88, 12, -26, 1);
ctx.strokeRect(12, 38, 26, -1);
ctx.strokeRect(88, 38, -26, -1);
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.strokeRect.nonfinite.html ]]] -->
<p>Canvas test: 2d.strokeRect.nonfinite</p>
<!-- Testing: strokeRect() with Infinity/NaN is ignored -->
<canvas id="c576" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_strokeRect_nonfinite() {
var canvas = document.getElementById('c576');
var ctx = canvas.getContext('2d');
var _thrown_outer = false;
try {
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.strokeStyle = '#f00';
ctx.lineWidth = 150;
ctx.strokeRect(Infinity, 0, 100, 50);
ctx.strokeRect(-Infinity, 0, 100, 50);
ctx.strokeRect(NaN, 0, 100, 50);
ctx.strokeRect(0, Infinity, 100, 50);
ctx.strokeRect(0, -Infinity, 100, 50);
ctx.strokeRect(0, NaN, 100, 50);
ctx.strokeRect(0, 0, Infinity, 50);
ctx.strokeRect(0, 0, -Infinity, 50);
ctx.strokeRect(0, 0, NaN, 50);
ctx.strokeRect(0, 0, 100, Infinity);
ctx.strokeRect(0, 0, 100, -Infinity);
ctx.strokeRect(0, 0, 100, NaN);
ctx.strokeRect(Infinity, Infinity, 100, 50);
ctx.strokeRect(Infinity, Infinity, Infinity, 50);
ctx.strokeRect(Infinity, Infinity, Infinity, Infinity);
ctx.strokeRect(Infinity, Infinity, 100, Infinity);
ctx.strokeRect(Infinity, 0, Infinity, 50);
ctx.strokeRect(Infinity, 0, Infinity, Infinity);
ctx.strokeRect(Infinity, 0, 100, Infinity);
ctx.strokeRect(0, Infinity, Infinity, 50);
ctx.strokeRect(0, Infinity, Infinity, Infinity);
ctx.strokeRect(0, Infinity, 100, Infinity);
ctx.strokeRect(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.strokeRect.path.html ]]] -->
<p>Canvas test: 2d.strokeRect.path</p>
<canvas id="c577" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_strokeRect_path() {
var canvas = document.getElementById('c577');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.rect(0, 0, 100, 50);
ctx.strokeStyle = '#f00';
ctx.lineWidth = 5;
ctx.strokeRect(0, 0, 16, 16);
ctx.fillStyle = '#0f0';
ctx.fill();
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.strokeRect.shadow.html ]]] -->
<p>Canvas test: 2d.strokeRect.shadow</p>
<canvas id="c578" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_strokeRect_shadow() {
var canvas = document.getElementById('c578');
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 strokeRect() too
ctx.beginPath();
ctx.rect(0, -50, 100, 50);
ctx.shadowColor = '#f00';
ctx.fill();
ctx.shadowColor = '#0f0';
ctx.strokeStyle = '#f00';
ctx.lineWidth = 50;
ctx.strokeRect(0, -75, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.strokeRect.transform.html ]]] -->
<p>Canvas test: 2d.strokeRect.transform</p>
<canvas id="c579" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_strokeRect_transform() {
var canvas = document.getElementById('c579');
var ctx = canvas.getContext('2d');
ctx.scale(10, 10);
ctx.translate(0, 5);
ctx.strokeStyle = '#0f0';
ctx.lineWidth = 5;
ctx.strokeRect(2.5, -2.6, 5, 0.2);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.strokeRect.zero.1.html ]]] -->
<p>Canvas test: 2d.strokeRect.zero.1</p>
<canvas id="c580" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_strokeRect_zero_1() {
var canvas = document.getElementById('c580');
var ctx = canvas.getContext('2d');
if (!IsD2DEnabled()) {
// Disabled for D2D until we can figure out Bug 587554.
ctx.strokeStyle = '#f00';
ctx.lineWidth = 250;
ctx.strokeRect(50, 25, 0, 0);
isPixel(ctx, 50,25, 0,0,0,0, 0);
}
}
</script>
<!-- [[[ test_2d.strokeRect.zero.2.html ]]] -->
<p>Canvas test: 2d.strokeRect.zero.2</p>
<canvas id="c581" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_strokeRect_zero_2() {
var canvas = document.getElementById('c581');
var ctx = canvas.getContext('2d');
ctx.strokeStyle = '#f00';
ctx.lineWidth = 250;
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
ctx.strokeRect(50, 25, 0, 0);
isPixel(ctx, 50,25, 0,0,0,0, 0);
}
</script>
<!-- [[[ test_2d.strokeRect.zero.3.html ]]] -->
<p>Canvas test: 2d.strokeRect.zero.3</p>
<canvas id="c582" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_strokeRect_zero_3() {
var canvas = document.getElementById('c582');
var ctx = canvas.getContext('2d');
ctx.strokeStyle = '#0f0';
ctx.lineWidth = 50;
ctx.strokeRect(0, 25, 100, 0);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.strokeRect.zero.4.html ]]] -->
<p>Canvas test: 2d.strokeRect.zero.4</p>
<canvas id="c583" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_strokeRect_zero_4() {
var canvas = document.getElementById('c583');
var ctx = canvas.getContext('2d');
ctx.strokeStyle = '#f00';
ctx.lineWidth = 250;
ctx.lineCap = 'round';
ctx.strokeRect(100, 25, 100, 0);
isPixel(ctx, 50,25, 0,0,0,0, 0);
}
</script>
<!-- [[[ test_2d.strokeRect.zero.5.html ]]] -->
<p>Canvas test: 2d.strokeRect.zero.5</p>
<canvas id="c584" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_strokeRect_zero_5() {
var canvas = document.getElementById('c584');
var ctx = canvas.getContext('2d');
ctx.strokeStyle = '#0f0';
ctx.lineWidth = 250;
ctx.lineJoin = 'round';
ctx.strokeRect(100, 25, 100, 0);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.strokeStyle.default.html ]]] -->
<p>Canvas test: 2d.strokeStyle.default</p>
<canvas id="c585" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_strokeStyle_default() {
var canvas = document.getElementById('c585');
var ctx = canvas.getContext('2d');
ok(ctx.strokeStyle == '#000000', "ctx.strokeStyle == '#000000'");
}
</script>
<!-- [[[ test_2d.text.align.default.html ]]] -->
<p>Canvas test: 2d.text.align.default</p>
<canvas height="50" id="c569a" width="100"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_text_align_default() {
var canvas = document.getElementById('c569a');
var ctx = canvas.getContext('2d');
ok(ctx.textAlign === 'start', "ctx.textAlign === 'start'");
}
</script>
<!-- [[[ test_2d.text.align.invalid.html ]]] -->
<p>Canvas test: 2d.text.align.invalid</p>
<canvas height="50" id="c570a" width="100"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_text_align_invalid() {
var canvas = document.getElementById('c570a');
var ctx = canvas.getContext('2d');
ctx.textAlign = 'start';
ctx.textAlign = 'bogus';
ok(ctx.textAlign === 'start', "ctx.textAlign === 'start'");
ctx.textAlign = 'start';
ctx.textAlign = 'END';
ok(ctx.textAlign === 'start', "ctx.textAlign === 'start'");
ctx.textAlign = 'start';
ctx.textAlign = 'end ';
ok(ctx.textAlign === 'start', "ctx.textAlign === 'start'");
ctx.textAlign = 'start';
ctx.textAlign = 'end\0';
ok(ctx.textAlign === 'start', "ctx.textAlign === 'start'");
}
</script>
<!-- [[[ test_2d.text.baseline.default.html ]]] -->
<p>Canvas test: 2d.text.baseline.default</p>
<canvas height="50" id="c572a" width="100"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_text_baseline_default() {
var canvas = document.getElementById('c572a');
var ctx = canvas.getContext('2d');
ok(ctx.textBaseline === 'alphabetic', "ctx.textBaseline === 'alphabetic'");
}
</script>
<!-- [[[ test_2d.text.baseline.invalid.html ]]] -->
<p>Canvas test: 2d.text.baseline.invalid</p>
<canvas height="50" id="c573a" width="100"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_text_baseline_invalid() {
var canvas = document.getElementById('c573a');
var ctx = canvas.getContext('2d');
ctx.textBaseline = 'top';
ctx.textBaseline = 'bogus';
ok(ctx.textBaseline === 'top', "ctx.textBaseline === 'top'");
ctx.textBaseline = 'top';
ctx.textBaseline = 'MIDDLE';
ok(ctx.textBaseline === 'top', "ctx.textBaseline === 'top'");
ctx.textBaseline = 'top';
ctx.textBaseline = 'middle ';
ok(ctx.textBaseline === 'top', "ctx.textBaseline === 'top'");
ctx.textBaseline = 'top';
ctx.textBaseline = 'middle\0';
ok(ctx.textBaseline === 'top', "ctx.textBaseline === 'top'");
}
</script>
<!-- [[[ test_2d.transformation.order.html ]]] -->
<p>Canvas test: 2d.transformation.order</p>
<!-- Testing: Transformations are applied in the right order -->
<canvas id="c586" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_transformation_order() {
var canvas = document.getElementById('c586');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.scale(2, 1);
ctx.rotate(Math.PI / 2);
ctx.fillStyle = '#0f0';
ctx.fillRect(0, -50, 50, 50);
isPixel(ctx, 75,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.transformation.rotate.direction.html ]]] -->
<p>Canvas test: 2d.transformation.rotate.direction</p>
<!-- Testing: rotate() is clockwise -->
<canvas id="c587" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_transformation_rotate_direction() {
var canvas = document.getElementById('c587');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.rotate(Math.PI / 2);
ctx.fillStyle = '#0f0';
ctx.fillRect(0, -100, 50, 100);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.transformation.rotate.nonfinite.html ]]] -->
<p>Canvas test: 2d.transformation.rotate.nonfinite</p>
<!-- Testing: rotate() with Infinity/NaN is ignored -->
<canvas id="c588" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_transformation_rotate_nonfinite() {
var canvas = document.getElementById('c588');
var ctx = canvas.getContext('2d');
var _thrown_outer = false;
try {
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.translate(100, 10);
ctx.rotate(Infinity);
ctx.rotate(-Infinity);
ctx.rotate(NaN);
ctx.fillStyle = '#0f0';
ctx.fillRect(-100, -10, 100, 50);
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.transformation.rotate.radians.html ]]] -->
<p>Canvas test: 2d.transformation.rotate.radians</p>
<!-- Testing: rotate() uses radians -->
<canvas id="c589" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_transformation_rotate_radians() {
var canvas = document.getElementById('c589');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.rotate(Math.PI); // should fail obviously if this is 3.1 degrees
ctx.fillStyle = '#0f0';
ctx.fillRect(-100, -50, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.transformation.rotate.wrap.html ]]] -->
<p>Canvas test: 2d.transformation.rotate.wrap</p>
<!-- Testing: rotate() wraps large positive values correctly -->
<canvas id="c590" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_transformation_rotate_wrap() {
var canvas = document.getElementById('c590');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.rotate(Math.PI * (1 + 4096)); // == pi (mod 2*pi)
// We need about pi +/- 0.001 in order to get correct-looking results
// 32-bit floats can store pi*4097 with precision 2^-10, so that should
// be safe enough on reasonable implementations
ctx.fillStyle = '#0f0';
ctx.fillRect(-100, -50, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 98,2, 0,255,0,255, 0);
isPixel(ctx, 98,47, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.transformation.rotate.wrapnegative.html ]]] -->
<p>Canvas test: 2d.transformation.rotate.wrapnegative</p>
<!-- Testing: rotate() wraps large negative values correctly -->
<canvas id="c591" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_transformation_rotate_wrapnegative() {
var canvas = document.getElementById('c591');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.rotate(-Math.PI * (1 + 4096));
ctx.fillStyle = '#0f0';
ctx.fillRect(-100, -50, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 98,2, 0,255,0,255, 0);
isPixel(ctx, 98,47, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.transformation.rotate.zero.html ]]] -->
<p>Canvas test: 2d.transformation.rotate.zero</p>
<!-- Testing: rotate() by 0 does nothing -->
<canvas id="c592" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_transformation_rotate_zero() {
var canvas = document.getElementById('c592');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.rotate(0);
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.transformation.scale.basic.html ]]] -->
<p>Canvas test: 2d.transformation.scale.basic</p>
<!-- Testing: scale() works -->
<canvas id="c593" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_transformation_scale_basic() {
var canvas = document.getElementById('c593');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.scale(2, 4);
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 50, 12.5);
isPixel(ctx, 90,40, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.transformation.scale.large.html ]]] -->
<p>Canvas test: 2d.transformation.scale.large</p>
<!-- Testing: scale() with large scale factors works -->
<canvas id="c594" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_transformation_scale_large() {
var canvas = document.getElementById('c594');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.scale(1e5, 1e5);
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 1, 1);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.transformation.scale.multiple.html ]]] -->
<p>Canvas test: 2d.transformation.scale.multiple</p>
<!-- Testing: Multiple scale()s combine -->
<canvas id="c595" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_transformation_scale_multiple() {
var canvas = document.getElementById('c595');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.scale(Math.sqrt(2), Math.sqrt(2));
ctx.scale(Math.sqrt(2), Math.sqrt(2));
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 50, 25);
isPixel(ctx, 90,40, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.transformation.scale.negative.html ]]] -->
<p>Canvas test: 2d.transformation.scale.negative</p>
<!-- Testing: scale() with negative scale factors works -->
<canvas id="c596" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_transformation_scale_negative() {
var canvas = document.getElementById('c596');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.save();
ctx.scale(-1, 1);
ctx.fillStyle = '#0f0';
ctx.fillRect(-50, 0, 50, 50);
ctx.restore();
ctx.save();
ctx.scale(1, -1);
ctx.fillStyle = '#0f0';
ctx.fillRect(50, -50, 50, 50);
ctx.restore();
isPixel(ctx, 25,25, 0,255,0,255, 0);
isPixel(ctx, 75,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.transformation.scale.nonfinite.html ]]] -->
<p>Canvas test: 2d.transformation.scale.nonfinite</p>
<!-- Testing: scale() with Infinity/NaN is ignored -->
<canvas id="c597" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_transformation_scale_nonfinite() {
var canvas = document.getElementById('c597');
var ctx = canvas.getContext('2d');
var _thrown_outer = false;
try {
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.translate(100, 10);
ctx.scale(Infinity, 0.1);
ctx.scale(-Infinity, 0.1);
ctx.scale(NaN, 0.1);
ctx.scale(0.1, Infinity);
ctx.scale(0.1, -Infinity);
ctx.scale(0.1, NaN);
ctx.scale(Infinity, Infinity);
ctx.fillStyle = '#0f0';
ctx.fillRect(-100, -10, 100, 50);
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.transformation.scale.zero.html ]]] -->
<p>Canvas test: 2d.transformation.scale.zero</p>
<!-- Testing: scale() with a scale factor of zero works -->
<canvas id="c598" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_transformation_scale_zero() {
var canvas = document.getElementById('c598');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.save();
ctx.translate(50, 0);
ctx.scale(0, 1);
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.restore();
ctx.save();
ctx.translate(0, 25);
ctx.scale(1, 0);
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.restore();
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.transformation.setTransform.multiple.html ]]] -->
<p>Canvas test: 2d.transformation.setTransform.multiple</p>
<canvas id="c599" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_transformation_setTransform_multiple() {
var canvas = document.getElementById('c599');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.setTransform(1/2,0, 0,1/2, 0,0);
ctx.setTransform(2,0, 0,2, 0,0);
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 50, 25);
isPixel(ctx, 75,35, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.transformation.setTransform.nonfinite.html ]]] -->
<p>Canvas test: 2d.transformation.setTransform.nonfinite</p>
<!-- Testing: setTransform() with Infinity/NaN is ignored -->
<canvas id="c600" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_transformation_setTransform_nonfinite() {
var canvas = document.getElementById('c600');
var ctx = canvas.getContext('2d');
var _thrown_outer = false;
try {
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.translate(100, 10);
ctx.setTransform(Infinity, 0, 0, 0, 0, 0);
ctx.setTransform(-Infinity, 0, 0, 0, 0, 0);
ctx.setTransform(NaN, 0, 0, 0, 0, 0);
ctx.setTransform(0, Infinity, 0, 0, 0, 0);
ctx.setTransform(0, -Infinity, 0, 0, 0, 0);
ctx.setTransform(0, NaN, 0, 0, 0, 0);
ctx.setTransform(0, 0, Infinity, 0, 0, 0);
ctx.setTransform(0, 0, -Infinity, 0, 0, 0);
ctx.setTransform(0, 0, NaN, 0, 0, 0);
ctx.setTransform(0, 0, 0, Infinity, 0, 0);
ctx.setTransform(0, 0, 0, -Infinity, 0, 0);
ctx.setTransform(0, 0, 0, NaN, 0, 0);
ctx.setTransform(0, 0, 0, 0, Infinity, 0);
ctx.setTransform(0, 0, 0, 0, -Infinity, 0);
ctx.setTransform(0, 0, 0, 0, NaN, 0);
ctx.setTransform(0, 0, 0, 0, 0, Infinity);
ctx.setTransform(0, 0, 0, 0, 0, -Infinity);
ctx.setTransform(0, 0, 0, 0, 0, NaN);
ctx.setTransform(Infinity, Infinity, 0, 0, 0, 0);
ctx.setTransform(Infinity, Infinity, Infinity, 0, 0, 0);
ctx.setTransform(Infinity, Infinity, Infinity, Infinity, 0, 0);
ctx.setTransform(Infinity, Infinity, Infinity, Infinity, Infinity, 0);
ctx.setTransform(Infinity, Infinity, Infinity, Infinity, Infinity, Infinity);
ctx.setTransform(Infinity, Infinity, Infinity, Infinity, 0, Infinity);
ctx.setTransform(Infinity, Infinity, Infinity, 0, Infinity, 0);
ctx.setTransform(Infinity, Infinity, Infinity, 0, Infinity, Infinity);
ctx.setTransform(Infinity, Infinity, Infinity, 0, 0, Infinity);
ctx.setTransform(Infinity, Infinity, 0, Infinity, 0, 0);
ctx.setTransform(Infinity, Infinity, 0, Infinity, Infinity, 0);
ctx.setTransform(Infinity, Infinity, 0, Infinity, Infinity, Infinity);
ctx.setTransform(Infinity, Infinity, 0, Infinity, 0, Infinity);
ctx.setTransform(Infinity, Infinity, 0, 0, Infinity, 0);
ctx.setTransform(Infinity, Infinity, 0, 0, Infinity, Infinity);
ctx.setTransform(Infinity, Infinity, 0, 0, 0, Infinity);
ctx.setTransform(Infinity, 0, Infinity, 0, 0, 0);
ctx.setTransform(Infinity, 0, Infinity, Infinity, 0, 0);
ctx.setTransform(Infinity, 0, Infinity, Infinity, Infinity, 0);
ctx.setTransform(Infinity, 0, Infinity, Infinity, Infinity, Infinity);
ctx.setTransform(Infinity, 0, Infinity, Infinity, 0, Infinity);
ctx.setTransform(Infinity, 0, Infinity, 0, Infinity, 0);
ctx.setTransform(Infinity, 0, Infinity, 0, Infinity, Infinity);
ctx.setTransform(Infinity, 0, Infinity, 0, 0, Infinity);
ctx.setTransform(Infinity, 0, 0, Infinity, 0, 0);
ctx.setTransform(Infinity, 0, 0, Infinity, Infinity, 0);
ctx.setTransform(Infinity, 0, 0, Infinity, Infinity, Infinity);
ctx.setTransform(Infinity, 0, 0, Infinity, 0, Infinity);
ctx.setTransform(Infinity, 0, 0, 0, Infinity, 0);
ctx.setTransform(Infinity, 0, 0, 0, Infinity, Infinity);
ctx.setTransform(Infinity, 0, 0, 0, 0, Infinity);
ctx.setTransform(0, Infinity, Infinity, 0, 0, 0);
ctx.setTransform(0, Infinity, Infinity, Infinity, 0, 0);
ctx.setTransform(0, Infinity, Infinity, Infinity, Infinity, 0);
ctx.setTransform(0, Infinity, Infinity, Infinity, Infinity, Infinity);
ctx.setTransform(0, Infinity, Infinity, Infinity, 0, Infinity);
ctx.setTransform(0, Infinity, Infinity, 0, Infinity, 0);
ctx.setTransform(0, Infinity, Infinity, 0, Infinity, Infinity);
ctx.setTransform(0, Infinity, Infinity, 0, 0, Infinity);
ctx.setTransform(0, Infinity, 0, Infinity, 0, 0);
ctx.setTransform(0, Infinity, 0, Infinity, Infinity, 0);
ctx.setTransform(0, Infinity, 0, Infinity, Infinity, Infinity);
ctx.setTransform(0, Infinity, 0, Infinity, 0, Infinity);
ctx.setTransform(0, Infinity, 0, 0, Infinity, 0);
ctx.setTransform(0, Infinity, 0, 0, Infinity, Infinity);
ctx.setTransform(0, Infinity, 0, 0, 0, Infinity);
ctx.setTransform(0, 0, Infinity, Infinity, 0, 0);
ctx.setTransform(0, 0, Infinity, Infinity, Infinity, 0);
ctx.setTransform(0, 0, Infinity, Infinity, Infinity, Infinity);
ctx.setTransform(0, 0, Infinity, Infinity, 0, Infinity);
ctx.setTransform(0, 0, Infinity, 0, Infinity, 0);
ctx.setTransform(0, 0, Infinity, 0, Infinity, Infinity);
ctx.setTransform(0, 0, Infinity, 0, 0, Infinity);
ctx.setTransform(0, 0, 0, Infinity, Infinity, 0);
ctx.setTransform(0, 0, 0, Infinity, Infinity, Infinity);
ctx.setTransform(0, 0, 0, Infinity, 0, Infinity);
ctx.setTransform(0, 0, 0, 0, Infinity, Infinity);
ctx.fillStyle = '#0f0';
ctx.fillRect(-100, -10, 100, 50);
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.transformation.setTransform.skewed.html ]]] -->
<p>Canvas test: 2d.transformation.setTransform.skewed</p>
<canvas id="c601" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_transformation_setTransform_skewed() {
var canvas = document.getElementById('c601');
var ctx = canvas.getContext('2d');
// Create green with a red square ring inside it
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = '#f00';
ctx.fillRect(20, 10, 60, 30);
ctx.fillStyle = '#0f0';
ctx.fillRect(40, 20, 20, 10);
// Draw a skewed shape to fill that gap, to make sure it is aligned correctly
ctx.setTransform(1,4, 2,3, 5,6);
// Post-transform coordinates:
// [[20,10],[80,10],[80,40],[20,40],[20,10],[40,20],[40,30],[60,30],[60,20],[40,20],[20,10]];
// Hence pre-transform coordinates:
var pts=[[-7.4,11.2],[-43.4,59.2],[-31.4,53.2],[4.6,5.2],[-7.4,11.2],
[-15.4,25.2],[-11.4,23.2],[-23.4,39.2],[-27.4,41.2],[-15.4,25.2],
[-7.4,11.2]];
ctx.beginPath();
ctx.moveTo(pts[0][0], pts[0][1]);
for (var i = 0; i < pts.length; ++i)
ctx.lineTo(pts[i][0], pts[i][1]);
ctx.fill();
isPixel(ctx, 21,11, 0,255,0,255, 0);
isPixel(ctx, 79,11, 0,255,0,255, 0);
isPixel(ctx, 21,39, 0,255,0,255, 0);
isPixel(ctx, 79,39, 0,255,0,255, 0);
isPixel(ctx, 39,19, 0,255,0,255, IsAzureSkia() ? 1 : 0);
isPixel(ctx, 61,19, 0,255,0,255, 0);
isPixel(ctx, 39,31, 0,255,0,255, 0);
isPixel(ctx, 61,31, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.transformation.transform.identity.html ]]] -->
<p>Canvas test: 2d.transformation.transform.identity</p>
<!-- Testing: transform() with the identity matrix does nothing -->
<canvas id="c602" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_transformation_transform_identity() {
var canvas = document.getElementById('c602');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.transform(1,0, 0,1, 0,0);
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.transformation.transform.multiply.html ]]] -->
<p>Canvas test: 2d.transformation.transform.multiply</p>
<!-- Testing: transform() multiplies the CTM -->
<canvas id="c603" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_transformation_transform_multiply() {
var canvas = document.getElementById('c603');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.transform(1,2, 3,4, 5,6);
ctx.transform(-2,1, 3/2,-1/2, 1,-2);
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.transformation.transform.nonfinite.html ]]] -->
<p>Canvas test: 2d.transformation.transform.nonfinite</p>
<!-- Testing: transform() with Infinity/NaN is ignored -->
<canvas id="c604" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_transformation_transform_nonfinite() {
var canvas = document.getElementById('c604');
var ctx = canvas.getContext('2d');
var _thrown_outer = false;
try {
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.translate(100, 10);
ctx.transform(Infinity, 0, 0, 0, 0, 0);
ctx.transform(-Infinity, 0, 0, 0, 0, 0);
ctx.transform(NaN, 0, 0, 0, 0, 0);
ctx.transform(0, Infinity, 0, 0, 0, 0);
ctx.transform(0, -Infinity, 0, 0, 0, 0);
ctx.transform(0, NaN, 0, 0, 0, 0);
ctx.transform(0, 0, Infinity, 0, 0, 0);
ctx.transform(0, 0, -Infinity, 0, 0, 0);
ctx.transform(0, 0, NaN, 0, 0, 0);
ctx.transform(0, 0, 0, Infinity, 0, 0);
ctx.transform(0, 0, 0, -Infinity, 0, 0);
ctx.transform(0, 0, 0, NaN, 0, 0);
ctx.transform(0, 0, 0, 0, Infinity, 0);
ctx.transform(0, 0, 0, 0, -Infinity, 0);
ctx.transform(0, 0, 0, 0, NaN, 0);
ctx.transform(0, 0, 0, 0, 0, Infinity);
ctx.transform(0, 0, 0, 0, 0, -Infinity);
ctx.transform(0, 0, 0, 0, 0, NaN);
ctx.transform(Infinity, Infinity, 0, 0, 0, 0);
ctx.transform(Infinity, Infinity, Infinity, 0, 0, 0);
ctx.transform(Infinity, Infinity, Infinity, Infinity, 0, 0);
ctx.transform(Infinity, Infinity, Infinity, Infinity, Infinity, 0);
ctx.transform(Infinity, Infinity, Infinity, Infinity, Infinity, Infinity);
ctx.transform(Infinity, Infinity, Infinity, Infinity, 0, Infinity);
ctx.transform(Infinity, Infinity, Infinity, 0, Infinity, 0);
ctx.transform(Infinity, Infinity, Infinity, 0, Infinity, Infinity);
ctx.transform(Infinity, Infinity, Infinity, 0, 0, Infinity);
ctx.transform(Infinity, Infinity, 0, Infinity, 0, 0);
ctx.transform(Infinity, Infinity, 0, Infinity, Infinity, 0);
ctx.transform(Infinity, Infinity, 0, Infinity, Infinity, Infinity);
ctx.transform(Infinity, Infinity, 0, Infinity, 0, Infinity);
ctx.transform(Infinity, Infinity, 0, 0, Infinity, 0);
ctx.transform(Infinity, Infinity, 0, 0, Infinity, Infinity);
ctx.transform(Infinity, Infinity, 0, 0, 0, Infinity);
ctx.transform(Infinity, 0, Infinity, 0, 0, 0);
ctx.transform(Infinity, 0, Infinity, Infinity, 0, 0);
ctx.transform(Infinity, 0, Infinity, Infinity, Infinity, 0);
ctx.transform(Infinity, 0, Infinity, Infinity, Infinity, Infinity);
ctx.transform(Infinity, 0, Infinity, Infinity, 0, Infinity);
ctx.transform(Infinity, 0, Infinity, 0, Infinity, 0);
ctx.transform(Infinity, 0, Infinity, 0, Infinity, Infinity);
ctx.transform(Infinity, 0, Infinity, 0, 0, Infinity);
ctx.transform(Infinity, 0, 0, Infinity, 0, 0);
ctx.transform(Infinity, 0, 0, Infinity, Infinity, 0);
ctx.transform(Infinity, 0, 0, Infinity, Infinity, Infinity);
ctx.transform(Infinity, 0, 0, Infinity, 0, Infinity);
ctx.transform(Infinity, 0, 0, 0, Infinity, 0);
ctx.transform(Infinity, 0, 0, 0, Infinity, Infinity);
ctx.transform(Infinity, 0, 0, 0, 0, Infinity);
ctx.transform(0, Infinity, Infinity, 0, 0, 0);
ctx.transform(0, Infinity, Infinity, Infinity, 0, 0);
ctx.transform(0, Infinity, Infinity, Infinity, Infinity, 0);
ctx.transform(0, Infinity, Infinity, Infinity, Infinity, Infinity);
ctx.transform(0, Infinity, Infinity, Infinity, 0, Infinity);
ctx.transform(0, Infinity, Infinity, 0, Infinity, 0);
ctx.transform(0, Infinity, Infinity, 0, Infinity, Infinity);
ctx.transform(0, Infinity, Infinity, 0, 0, Infinity);
ctx.transform(0, Infinity, 0, Infinity, 0, 0);
ctx.transform(0, Infinity, 0, Infinity, Infinity, 0);
ctx.transform(0, Infinity, 0, Infinity, Infinity, Infinity);
ctx.transform(0, Infinity, 0, Infinity, 0, Infinity);
ctx.transform(0, Infinity, 0, 0, Infinity, 0);
ctx.transform(0, Infinity, 0, 0, Infinity, Infinity);
ctx.transform(0, Infinity, 0, 0, 0, Infinity);
ctx.transform(0, 0, Infinity, Infinity, 0, 0);
ctx.transform(0, 0, Infinity, Infinity, Infinity, 0);
ctx.transform(0, 0, Infinity, Infinity, Infinity, Infinity);
ctx.transform(0, 0, Infinity, Infinity, 0, Infinity);
ctx.transform(0, 0, Infinity, 0, Infinity, 0);
ctx.transform(0, 0, Infinity, 0, Infinity, Infinity);
ctx.transform(0, 0, Infinity, 0, 0, Infinity);
ctx.transform(0, 0, 0, Infinity, Infinity, 0);
ctx.transform(0, 0, 0, Infinity, Infinity, Infinity);
ctx.transform(0, 0, 0, Infinity, 0, Infinity);
ctx.transform(0, 0, 0, 0, Infinity, Infinity);
ctx.fillStyle = '#0f0';
ctx.fillRect(-100, -10, 100, 50);
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.transformation.transform.skewed.html ]]] -->
<p>Canvas test: 2d.transformation.transform.skewed</p>
<!-- Testing: transform() with skewy matrix transforms correctly -->
<canvas id="c605" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_transformation_transform_skewed() {
var canvas = document.getElementById('c605');
var ctx = canvas.getContext('2d');
// Create green with a red square ring inside it
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = '#f00';
ctx.fillRect(20, 10, 60, 30);
ctx.fillStyle = '#0f0';
ctx.fillRect(40, 20, 20, 10);
// Draw a skewed shape to fill that gap, to make sure it is aligned correctly
ctx.transform(1,4, 2,3, 5,6);
// Post-transform coordinates:
// [[20,10],[80,10],[80,40],[20,40],[20,10],[40,20],[40,30],[60,30],[60,20],[40,20],[20,10]];
// Hence pre-transform coordinates:
var pts=[[-7.4,11.2],[-43.4,59.2],[-31.4,53.2],[4.6,5.2],[-7.4,11.2],
[-15.4,25.2],[-11.4,23.2],[-23.4,39.2],[-27.4,41.2],[-15.4,25.2],
[-7.4,11.2]];
ctx.beginPath();
ctx.moveTo(pts[0][0], pts[0][1]);
for (var i = 0; i < pts.length; ++i)
ctx.lineTo(pts[i][0], pts[i][1]);
ctx.fill();
isPixel(ctx, 21,11, 0,255,0,255, 0);
isPixel(ctx, 79,11, 0,255,0,255, 0);
isPixel(ctx, 21,39, 0,255,0,255, 0);
isPixel(ctx, 79,39, 0,255,0,255, 0);
isPixel(ctx, 39,19, 0,255,0,255, IsAzureSkia() ? 1 : 0);
isPixel(ctx, 61,19, 0,255,0,255, 0);
isPixel(ctx, 39,31, 0,255,0,255, 0);
isPixel(ctx, 61,31, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.transformation.translate.basic.html ]]] -->
<p>Canvas test: 2d.transformation.translate.basic</p>
<!-- Testing: translate() works -->
<canvas id="c606" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_transformation_translate_basic() {
var canvas = document.getElementById('c606');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.translate(100, 50);
ctx.fillStyle = '#0f0';
ctx.fillRect(-100, -50, 100, 50);
isPixel(ctx, 90,40, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.transformation.translate.nonfinite.html ]]] -->
<p>Canvas test: 2d.transformation.translate.nonfinite</p>
<!-- Testing: translate() with Infinity/NaN is ignored -->
<canvas id="c607" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_transformation_translate_nonfinite() {
var canvas = document.getElementById('c607');
var ctx = canvas.getContext('2d');
var _thrown_outer = false;
try {
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.translate(100, 10);
ctx.translate(Infinity, 0.1);
ctx.translate(-Infinity, 0.1);
ctx.translate(NaN, 0.1);
ctx.translate(0.1, Infinity);
ctx.translate(0.1, -Infinity);
ctx.translate(0.1, NaN);
ctx.translate(Infinity, Infinity);
ctx.fillStyle = '#0f0';
ctx.fillRect(-100, -10, 100, 50);
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.type.exists.html ]]] -->
<p>Canvas test: 2d.type.exists</p>
<!-- Testing: The 2D context interface is a property of 'window' -->
<canvas id="c609" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_type_exists() {
var canvas = document.getElementById('c609');
var ctx = canvas.getContext('2d');
ok(window.CanvasRenderingContext2D, "window.CanvasRenderingContext2D");
}
</script>
<!-- [[[ test_2d.type.extend.html ]]] -->
<p>Canvas test: 2d.type.extend</p>
<!-- Testing: Interface methods can be added -->
<canvas id="c610" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_type_extend() {
var canvas = document.getElementById('c610');
var ctx = canvas.getContext('2d');
window.CanvasRenderingContext2D.prototype.fillRectGreen = function (x, y, w, h)
{
this.fillStyle = '#0f0';
this.fillRect(x, y, w, h);
};
ctx.fillStyle = '#f00';
ctx.fillRectGreen(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.type.prototype.html ]]] -->
<p>Canvas test: 2d.type.prototype</p>
<!-- Testing: window.CanvasRenderingContext2D.prototype is { DontDelete, ReadOnly }, and its methods are not -->
<canvas id="c611" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_type_prototype() {
var canvas = document.getElementById('c611');
var ctx = canvas.getContext('2d');
var fill = window.CanvasRenderingContext2D.prototype.fill;
ok(window.CanvasRenderingContext2D.prototype, "window.CanvasRenderingContext2D.prototype");
ok(window.CanvasRenderingContext2D.prototype.fill, "window.CanvasRenderingContext2D.prototype.fill");
window.CanvasRenderingContext2D.prototype = null;
ok(window.CanvasRenderingContext2D.prototype, "window.CanvasRenderingContext2D.prototype");
delete window.CanvasRenderingContext2D.prototype;
ok(window.CanvasRenderingContext2D.prototype, "window.CanvasRenderingContext2D.prototype");
window.CanvasRenderingContext2D.prototype.fill = 1;
ok(window.CanvasRenderingContext2D.prototype.fill === 1, "window.CanvasRenderingContext2D.prototype.fill === 1");
delete window.CanvasRenderingContext2D.prototype.fill;
ok(window.CanvasRenderingContext2D.prototype.fill === undefined, "window.CanvasRenderingContext2D.prototype.fill === undefined");
//restore the original method to ensure that other tests can run successfully
window.CanvasRenderingContext2D.prototype.fill = fill;
}
</script>
<!-- [[[ test_2d.type.replace.html ]]] -->
<p>Canvas test: 2d.type.replace</p>
<!-- Testing: Interface methods can be overridden -->
<canvas id="c612" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_type_replace() {
var canvas = document.getElementById('c612');
var ctx = canvas.getContext('2d');
var fillRect = window.CanvasRenderingContext2D.prototype.fillRect;
window.CanvasRenderingContext2D.prototype.fillRect = function (x, y, w, h)
{
this.fillStyle = '#0f0';
fillRect.call(this, x, y, w, h);
};
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
//restore the original method to ensure that other tests can run successfully
window.CanvasRenderingContext2D.prototype.fillRect = fillRect;
}
</script>
<!-- [[[ test_2d.voidreturn.html ]]] -->
<p>Canvas test: 2d.voidreturn</p>
<!-- Testing: void methods return undefined -->
<canvas id="c613" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_voidreturn() {
var canvas = document.getElementById('c613');
var ctx = canvas.getContext('2d');
ok(ctx.save() === undefined, "ctx.save() === undefined");
ok(ctx.restore() === undefined, "ctx.restore() === undefined");
ok(ctx.scale(1, 1) === undefined, "ctx.scale(1, 1) === undefined");
ok(ctx.rotate(0) === undefined, "ctx.rotate(0) === undefined");
ok(ctx.translate(0, 0) === undefined, "ctx.translate(0, 0) === undefined");
if (ctx.transform) { // (avoid spurious failures, since the aim here is not to test that all features are supported)
ok(ctx.transform(1, 0, 0, 1, 0, 0) === undefined, "ctx.transform(1, 0, 0, 1, 0, 0) === undefined");
}
if (ctx.setTransform) {
ok(ctx.setTransform(1, 0, 0, 1, 0, 0) === undefined, "ctx.setTransform(1, 0, 0, 1, 0, 0) === undefined");
}
if (ctx.resetTransform) {
ok(ctx.resetTransform() === undefined, "ctx.resetTransform() === undefined");
}
ok(ctx.clearRect(0, 0, 0, 0) === undefined, "ctx.clearRect(0, 0, 0, 0) === undefined");
ok(ctx.fillRect(0, 0, 0, 0) === undefined, "ctx.fillRect(0, 0, 0, 0) === undefined");
ok(ctx.strokeRect(0, 0, 0, 0) === undefined, "ctx.strokeRect(0, 0, 0, 0) === undefined");
ok(ctx.beginPath() === undefined, "ctx.beginPath() === undefined");
ok(ctx.closePath() === undefined, "ctx.closePath() === undefined");
ok(ctx.moveTo(0, 0) === undefined, "ctx.moveTo(0, 0) === undefined");
ok(ctx.lineTo(0, 0) === undefined, "ctx.lineTo(0, 0) === undefined");
ok(ctx.quadraticCurveTo(0, 0, 0, 0) === undefined, "ctx.quadraticCurveTo(0, 0, 0, 0) === undefined");
ok(ctx.bezierCurveTo(0, 0, 0, 0, 0, 0) === undefined, "ctx.bezierCurveTo(0, 0, 0, 0, 0, 0) === undefined");
ok(ctx.arcTo(0, 0, 0, 0, 1) === undefined, "ctx.arcTo(0, 0, 0, 0, 1) === undefined");
ok(ctx.rect(0, 0, 0, 0) === undefined, "ctx.rect(0, 0, 0, 0) === undefined");
ok(ctx.arc(0, 0, 1, 0, 0, true) === undefined, "ctx.arc(0, 0, 1, 0, 0, true) === undefined");
ok(ctx.fill() === undefined, "ctx.fill() === undefined");
ok(ctx.stroke() === undefined, "ctx.stroke() === undefined");
ok(ctx.clip() === undefined, "ctx.clip() === undefined");
if (ctx.putImageData) {
ok(ctx.putImageData(ctx.getImageData(0, 0, 1, 1), 0, 0) === undefined, "ctx.putImageData(ctx.getImageData(0, 0, 1, 1), 0, 0) === undefined");
}
ok(ctx.drawImage(document.getElementById('yellow_11.png'), 0, 0, 1, 1, 0, 0, 0, 0) === undefined, "ctx.drawImage(document.getElementById('yellow_11.png'), 0, 0, 1, 1, 0, 0, 0, 0) === undefined");
ok(ctx.drawImage(canvas, 0, 0, 1, 1, 0, 0, 0, 0) === undefined, "ctx.drawImage(canvas, 0, 0, 1, 1, 0, 0, 0, 0) === undefined");
ok(ctx.createLinearGradient(0, 0, 0, 0).addColorStop(0, 'white') === undefined, "ctx.createLinearGradient(0, 0, 0, 0).addColorStop(0, 'white') === undefined");
}
</script>
<img src="image_yellow.png" id="yellow_11.png" class="resource">
<!-- [[[ test_bug397524.html ]]] -->
<p>Test for Bug 397524</p>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=397524">Mozilla Bug 397524</a>
<p id="display">
<canvas id="canvas1" width="1" height="1"></canvas>
<canvas id="canvas2" width="1" height="1"></canvas>
<canvas id="canvas3" width="1" height="1"></canvas>
<img id="i1", src="image_green-1x1.png">
<img id="i3" src="image_green-redirect">
</p>
<div id="content" style="display: none">
</div>
<pre id="test">
<script class="testbody" type="text/javascript">
/** Test for Bug 397524 **/
function draw(n) {
$("canvas" + n).getContext('2d').drawImage($("i" + n), 0, 0);
}
function test_bug397524() {
draw(1);
draw(2);
draw(3);
// Should be able to get the data out of the first canvas
$("canvas1").toDataURL("image/png");
// Should not be able to get the data out of a cross-site load
var gotData = false;
try {
$("canvas2").toDataURL("image/png");
gotData = true;
} catch (ex) {
if (ex.code != 18 || ex.name != "SecurityError") {
throw ex;
}
}
is(gotData, false, "Shouldn't be able to read images cross-site!");
// Should not be able to get the data out of a redirected cross-site load
var gotData = false;
try {
$("canvas3").toDataURL("image/png");
gotData = true;
} catch (ex) {
if (ex.code != 18 || ex.name != "SecurityError") {
throw ex;
}
}
is(gotData, false, "Shouldn't be able to read images redirected cross-site!");
}
</script>
</pre>
<!-- [[[ test_bug405982.html ]]] -->
<p>Canvas test: toDataURL.png</p>
<canvas id="c614" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_bug405982() {
var canvas = SpecialPowers.wrap(document.getElementById('c614'));
var ctx = canvas.getContext('2d');
var _threw = false;
try {
var data = canvas.toDataURL('image/png', 'quality=100');
}
catch (e) {
_threw = true;
}
ok(!_threw, "Should not throw an exception for invalid args to png encoder");
_threw = false;
try {
var data = canvas.toDataURL('image/jpeg', 'foobar=true');
}
catch (e) {
_threw = true;
}
ok(!_threw, "Should not throw an exception for invalid args to jpeg encoder");
}
</script>
<!-- [[[ test_context.arguments.extra.html ]]] -->
<p>Canvas test: context.arguments.extra</p>
<canvas id="c615" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_context_arguments_extra() {
var canvas = document.getElementById('c615');
var ctx = canvas.getContext('2d');
ok(canvas.getContext('2d', 'foo') !== null, "canvas.getContext('2d', 'foo') !== null");
}
</script>
<!-- [[[ test_context.arguments.missing.html ]]] -->
<p>Canvas test: context.arguments.missing</p>
<canvas id="c616" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_context_arguments_missing() {
var canvas = document.getElementById('c616');
var ctx = canvas.getContext('2d');
var _thrown = undefined; try {
canvas.getContext();
} catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
}
</script>
<!-- [[[ test_context.casesensitive.html ]]] -->
<p>Canvas test: context.casesensitive - bug 401788</p>
<!-- Testing: Context name "2D" is unrecognised; matching is case sensitive -->
<canvas id="c617" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_context_casesensitive() {
var canvas = document.getElementById('c617');
var ctx = canvas.getContext('2d');
var _thrown_outer = false;
try {
ok(canvas.getContext('2D') === null, "canvas.getContext('2D') === null");
} catch (e) {
_thrown_outer = true;
}
ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
}
</script>
<!-- [[[ test_context.emptystring.html ]]] -->
<p>Canvas test: context.emptystring - bug 401788</p>
<!-- Testing: getContext with empty string returns null -->
<canvas id="c618" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_context_emptystring() {
var canvas = document.getElementById('c618');
var ctx = canvas.getContext('2d');
var _thrown_outer = false;
try {
ok(canvas.getContext("") === null, "canvas.getContext(\"\") === null");
} catch (e) {
_thrown_outer = true;
}
ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
}
</script>
<!-- [[[ test_context.unrecognised.badname.html ]]] -->
<p>Canvas test: context.unrecognised.badname - bug 401788</p>
<!-- Testing: getContext with unrecognised context name returns null -->
<canvas id="c619" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_context_unrecognised_badname() {
var canvas = document.getElementById('c619');
var ctx = canvas.getContext('2d');
var _thrown_outer = false;
try {
ok(canvas.getContext('This is not an implemented context in any real browser') === null, "canvas.getContext('This is not an implemented context in any real browser') === null");
} catch (e) {
_thrown_outer = true;
}
ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
}
</script>
<!-- [[[ test_context.unrecognised.badsuffix.html ]]] -->
<p>Canvas test: context.unrecognised.badsuffix - bug 401788</p>
<!-- Testing: Context name "2d" plus a suffix is unrecognised -->
<canvas id="c620" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_context_unrecognised_badsuffix() {
var canvas = document.getElementById('c620');
var ctx = canvas.getContext('2d');
var _thrown_outer = false;
try {
ok(canvas.getContext("2d#") === null, "canvas.getContext(\"2d#\") === null");
} catch (e) {
_thrown_outer = true;
}
ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
}
</script>
<!-- [[[ test_context.unrecognised.nullsuffix.html ]]] -->
<p>Canvas test: context.unrecognised.nullsuffix - bug 401788</p>
<!-- Testing: Context name "2d" plus a "\0" suffix is unrecognised -->
<canvas id="c621" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_context_unrecognised_nullsuffix() {
var canvas = document.getElementById('c621');
var ctx = canvas.getContext('2d');
var _thrown_outer = false;
try {
ok(canvas.getContext("2d\0") === null, "canvas.getContext(\"2d\\0\") === null");
} catch (e) {
_thrown_outer = true;
}
ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
}
</script>
<!-- [[[ test_context.unrecognised.unicode.html ]]] -->
<p>Canvas test: context.unrecognised.unicode - bug 401788</p>
<!-- Testing: Context name which kind of looks like "2d" is unrecognised -->
<canvas id="c622" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_context_unrecognised_unicode() {
var canvas = document.getElementById('c622');
var ctx = canvas.getContext('2d');
var _thrown_outer = false;
try {
ok(canvas.getContext("2\uFF44") === null, "canvas.getContext(\"2\\uFF44\") === null"); // Fullwidth Latin Small Letter D
} catch (e) {
_thrown_outer = true;
}
ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
}
</script>
<!-- [[[ test_fallback.basic.html ]]] -->
<p>Canvas test: fallback.basic</p>
<!-- Testing: Fallback content is inserted into the DOM -->
<canvas id="c623" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_fallback_basic() {
var canvas = document.getElementById('c623');
var ctx = canvas.getContext('2d');
ok(canvas.childNodes.length == 1, "canvas.childNodes.length == 1");
}
</script>
<!-- [[[ test_fallback.multiple.html ]]] -->
<p>Canvas test: fallback.multiple</p>
<!-- Testing: Fallback content with multiple elements -->
<canvas id="c624" width="100" height="50"><p class="fallback">FAIL</p><p class="fallback">FAIL</p></canvas>
<script>
function test_fallback_multiple() {
var canvas = document.getElementById('c624');
var ctx = canvas.getContext('2d');
ok(canvas.childNodes.length == 2, "canvas.childNodes.length == 2");
}
</script>
<!-- [[[ test_fallback.nested.html ]]] -->
<p>Canvas test: fallback.nested</p>
<!-- Testing: Fallback content containing another canvas (mostly testing parsers) -->
<canvas id="c625" width="100" height="50"><canvas><p class="fallback">FAIL (fallback content)</p></canvas><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_fallback_nested() {
var canvas = document.getElementById('c625');
var ctx = canvas.getContext('2d');
ok(canvas.childNodes.length == 2, "canvas.childNodes.length == 2");
}
</script>
<!-- [[[ test_initial.colour.html ]]] -->
<p>Canvas test: initial.colour</p>
<!-- Testing: Initial state is transparent black -->
<canvas id="c626" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_initial_colour() {
var canvas = document.getElementById('c626');
var ctx = canvas.getContext('2d');
isPixel(ctx, 20,20, 0,0,0,0, 0);
}
</script>
<!-- [[[ test_initial.reset.2dstate.html ]]] -->
<p>Canvas test: initial.reset.2dstate</p>
<!-- Testing: Resetting the canvas state resets 2D state variables -->
<canvas id="c627" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_initial_reset_2dstate() {
var canvas = document.getElementById('c627');
var ctx = canvas.getContext('2d');
canvas.width = 100;
var default_val;
default_val = ctx.strokeStyle;
ctx.strokeStyle = "#ff0000";
canvas.width = 100;
ok(ctx.strokeStyle === default_val, "ctx.strokeStyle === default_val");
default_val = ctx.fillStyle;
ctx.fillStyle = "#ff0000";
canvas.width = 100;
ok(ctx.fillStyle === default_val, "ctx.fillStyle === default_val");
default_val = ctx.globalAlpha;
ctx.globalAlpha = 0.5;
canvas.width = 100;
ok(ctx.globalAlpha === default_val, "ctx.globalAlpha === default_val");
default_val = ctx.lineWidth;
ctx.lineWidth = 0.5;
canvas.width = 100;
ok(ctx.lineWidth === default_val, "ctx.lineWidth === default_val");
default_val = ctx.lineCap;
ctx.lineCap = "round";
canvas.width = 100;
ok(ctx.lineCap === default_val, "ctx.lineCap === default_val");
default_val = ctx.lineJoin;
ctx.lineJoin = "round";
canvas.width = 100;
ok(ctx.lineJoin === default_val, "ctx.lineJoin === default_val");
default_val = ctx.miterLimit;
ctx.miterLimit = 0.5;
canvas.width = 100;
ok(ctx.miterLimit === default_val, "ctx.miterLimit === default_val");
default_val = ctx.shadowOffsetX;
ctx.shadowOffsetX = 5;
canvas.width = 100;
ok(ctx.shadowOffsetX === default_val, "ctx.shadowOffsetX === default_val");
default_val = ctx.shadowOffsetY;
ctx.shadowOffsetY = 5;
canvas.width = 100;
ok(ctx.shadowOffsetY === default_val, "ctx.shadowOffsetY === default_val");
default_val = ctx.shadowBlur;
ctx.shadowBlur = 5;
canvas.width = 100;
ok(ctx.shadowBlur === default_val, "ctx.shadowBlur === default_val");
default_val = ctx.shadowColor;
ctx.shadowColor = "#ff0000";
canvas.width = 100;
ok(ctx.shadowColor === default_val, "ctx.shadowColor === default_val");
default_val = ctx.globalCompositeOperation;
ctx.globalCompositeOperation = "copy";
canvas.width = 100;
ok(ctx.globalCompositeOperation === default_val, "ctx.globalCompositeOperation === default_val");
}
</script>
<!-- [[[ test_initial.reset.clip.html ]]] -->
<p>Canvas test: initial.reset.clip</p>
<!-- Testing: Resetting the canvas state resets the current clip region -->
<canvas id="c628" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_initial_reset_clip() {
var canvas = document.getElementById('c628');
var ctx = canvas.getContext('2d');
canvas.width = 100;
ctx.rect(0, 0, 1, 1);
ctx.clip();
canvas.width = 100;
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 20,20, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_initial.reset.different.html ]]] -->
<p>Canvas test: initial.reset.different</p>
<!-- Testing: Changing size resets canvas to transparent black -->
<canvas id="c629" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_initial_reset_different() {
var canvas = document.getElementById('c629');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 50, 50);
isPixel(ctx, 20,20, 255,0,0,255, 0);
canvas.width = 50;
isPixel(ctx, 20,20, 0,0,0,0, 0);
}
</script>
<!-- [[[ test_initial.reset.gradient.html ]]] -->
<p>Canvas test: initial.reset.gradient</p>
<!-- Testing: Resetting the canvas state does not invalidate any existing gradients -->
<canvas id="c630" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_initial_reset_gradient() {
var canvas = document.getElementById('c630');
var ctx = canvas.getContext('2d');
canvas.width = 50;
var g = ctx.createLinearGradient(0, 0, 100, 0);
g.addColorStop(0, '#0f0');
g.addColorStop(1, '#0f0');
canvas.width = 100;
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = g;
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_initial.reset.path.html ]]] -->
<p>Canvas test: initial.reset.path</p>
<!-- Testing: Resetting the canvas state resets the current path -->
<canvas id="c631" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_initial_reset_path() {
var canvas = document.getElementById('c631');
var ctx = canvas.getContext('2d');
canvas.width = 100;
ctx.rect(0, 0, 100, 50);
canvas.width = 100;
ctx.fillStyle = '#f00';
ctx.fill();
isPixel(ctx, 20,20, 0,0,0,0, 0);
}
</script>
<!-- [[[ test_initial.reset.pattern.html ]]] -->
<p>Canvas test: initial.reset.pattern</p>
<!-- Testing: Resetting the canvas state does not invalidate any existing patterns -->
<canvas id="c632" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_initial_reset_pattern() {
var canvas = document.getElementById('c632');
var ctx = canvas.getContext('2d');
canvas.width = 50;
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 50, 50);
var p = ctx.createPattern(canvas, 'repeat-x');
canvas.width = 100;
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = p;
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_initial.reset.same.html ]]] -->
<p>Canvas test: initial.reset.same</p>
<!-- Testing: Setting size (not changing the value) resets canvas to transparent black -->
<canvas id="c633" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_initial_reset_same() {
var canvas = document.getElementById('c633');
var ctx = canvas.getContext('2d');
canvas.width = 100;
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 50, 50);
isPixel(ctx, 20,20, 255,0,0,255, 0);
canvas.width = 100;
isPixel(ctx, 20,20, 0,0,0,0, 0);
}
</script>
<!-- [[[ test_initial.reset.transform.html ]]] -->
<p>Canvas test: initial.reset.transform</p>
<!-- Testing: Resetting the canvas state resets the current transformation matrix -->
<canvas id="c634" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_initial_reset_transform() {
var canvas = document.getElementById('c634');
var ctx = canvas.getContext('2d');
canvas.width = 100;
ctx.scale(0, 0);
canvas.width = 100;
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 20,20, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_size.attributes.default.html ]]] -->
<p>Canvas test: size.attributes.default</p>
<!-- Testing: Default width/height -->
<canvas id="c635" ><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_size_attributes_default() {
var canvas = document.getElementById('c635');
var ctx = canvas.getContext('2d');
ok(canvas.width == 300, "canvas.width == 300");
ok(canvas.height == 150, "canvas.height == 150");
ok(!canvas.hasAttribute('width'), "!canvas.hasAttribute('width')");
ok(!canvas.hasAttribute('height'), "!canvas.hasAttribute('height')");
}
</script>
<!-- [[[ test_size.attributes.html ]]] -->
<p>Canvas test: size.attributes</p>
<!-- Testing: width/height DOM attributes and content attributes -->
<canvas id="c636" width="120" height="60"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_size_attributes() {
var canvas = document.getElementById('c636');
var ctx = canvas.getContext('2d');
ok(canvas.width == 120, "canvas.width == 120");
ok(canvas.height == 60, "canvas.height == 60");
ok(canvas.getAttribute('width') == 120, "canvas.getAttribute('width') == 120");
ok(canvas.getAttribute('height') == 60, "canvas.getAttribute('height') == 60");
}
</script>
<!-- [[[ test_size.attributes.parse.badsuffix.html ]]] -->
<p>Canvas test: size.attributes.parse.badsuffix</p>
<!-- Testing: Parsing of non-negative integers -->
<canvas id="c637" width="100foo" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_size_attributes_parse_badsuffix() {
var canvas = document.getElementById('c637');
var ctx = canvas.getContext('2d');
is(canvas.width, 100, "canvas.width == 100");
}
</script>
<!-- [[[ test_size.attributes.parse.floatsuffix.html ]]] -->
<p>Canvas test: size.attributes.parse.floatsuffix</p>
<!-- Testing: Parsing of non-negative integers -->
<canvas id="c638" width="100.9" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_size_attributes_parse_floatsuffix() {
var canvas = document.getElementById('c638');
var ctx = canvas.getContext('2d');
ok(canvas.width == 100, "canvas.width == 100");
}
</script>
<!-- [[[ test_size.attributes.parse.negative.html ]]] -->
<p>Canvas test: size.attributes.parse.negative</p>
<!-- Testing: Parsing of non-negative integers -->
<canvas id="c639" width="-100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_size_attributes_parse_negative() {
var canvas = document.getElementById('c639');
var ctx = canvas.getContext('2d');
ok(canvas.width == 300, "canvas.width == 300");
}
</script>
<!-- [[[ test_size.attributes.parse.nonnumber.html ]]] -->
<p>Canvas test: size.attributes.parse.nonnumber</p>
<!-- Testing: Parsing of non-negative integers -->
<canvas id="c640" width="foo" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_size_attributes_parse_nonnumber() {
var canvas = document.getElementById('c640');
var ctx = canvas.getContext('2d');
ok(canvas.width == 300, "canvas.width == 300");
}
</script>
<!-- [[[ test_size.attributes.parse.percentsuffix.html ]]] -->
<p>Canvas test: size.attributes.parse.percentsuffix</p>
<!-- Testing: Parsing of non-negative integers -->
<canvas id="c641" width="100%" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_size_attributes_parse_percentsuffix() {
var canvas = document.getElementById('c641');
var ctx = canvas.getContext('2d');
ok(canvas.width == 100, "canvas.width == 100");
}
</script>
<!-- [[[ test_size.attributes.parse.whitespace.html ]]] -->
<p>Canvas test: size.attributes.parse.whitespace</p>
<!-- Testing: Parsing of non-negative integers -->
<canvas id="c642" width=" 100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_size_attributes_parse_whitespace() {
var canvas = document.getElementById('c642');
var ctx = canvas.getContext('2d');
ok(canvas.width == 100, "canvas.width == 100");
}
</script>
<!-- [[[ test_size.attributes.parse.zero.html ]]] -->
<p>Canvas test: size.attributes.parse.zero</p>
<!-- Testing: Parsing of non-negative integers -->
<canvas id="c643" width="0" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_size_attributes_parse_zero() {
var canvas = document.getElementById('c643');
var ctx = canvas.getContext('2d');
ok(canvas.width == 0, "canvas.width == 0");
}
</script>
<!-- [[[ test_size.attributes.parse.zerosuffix.html ]]] -->
<p>Canvas test: size.attributes.parse.zerosuffix</p>
<!-- Testing: Parsing of non-negative integers -->
<canvas id="c644" width="100.0" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_size_attributes_parse_zerosuffix() {
var canvas = document.getElementById('c644');
var ctx = canvas.getContext('2d');
ok(canvas.width == 100, "canvas.width == 100");
}
</script>
<!-- [[[ test_size.attributes.reflect.1.html ]]] -->
<p>Canvas test: size.attributes.reflect.1</p>
<!-- Testing: Setting DOM attributes updates DOM and content attributes -->
<canvas id="c645" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_size_attributes_reflect_1() {
var canvas = document.getElementById('c645');
var ctx = canvas.getContext('2d');
canvas.width = 120;
canvas.height = 60;
ok(canvas.getAttribute('width') == '120', "canvas.getAttribute('width') == '120'");
ok(canvas.getAttribute('height') == '60', "canvas.getAttribute('height') == '60'");
ok(canvas.width == 120, "canvas.width == 120");
ok(canvas.height == 60, "canvas.height == 60");
}
</script>
<!-- [[[ test_size.attributes.reflect.2.html ]]] -->
<p>Canvas test: size.attributes.reflect.2</p>
<!-- Testing: Setting content attributes updates DOM and content attributes -->
<canvas id="c646" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_size_attributes_reflect_2() {
var canvas = document.getElementById('c646');
var ctx = canvas.getContext('2d');
canvas.setAttribute('width', '120');
canvas.setAttribute('height', '60');
ok(canvas.getAttribute('width') == '120', "canvas.getAttribute('width') == '120'");
ok(canvas.getAttribute('height') == '60', "canvas.getAttribute('height') == '60'");
ok(canvas.width == 120, "canvas.width == 120");
ok(canvas.height == 60, "canvas.height == 60");
}
</script>
<!-- [[[ test_size.attributes.removed.html ]]] -->
<p>Canvas test: size.attributes.removed</p>
<!-- Testing: Removing content attributes reverts to default size -->
<canvas id="c647" width="120" height="60"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_size_attributes_removed() {
var canvas = document.getElementById('c647');
var ctx = canvas.getContext('2d');
canvas.removeAttribute('width');
ok(canvas.width == 300, "canvas.width == 300");
}
</script>
<!-- [[[ test_size.attributes.setAttribute.badsuffix.html ]]] -->
<p>Canvas test: size.attributes.setAttribute.badsuffix</p>
<!-- Testing: Parsing of non-negative integers in setAttribute -->
<canvas id="c648" width="50" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_size_attributes_setAttribute_badsuffix() {
var canvas = document.getElementById('c648');
var ctx = canvas.getContext('2d');
canvas.setAttribute('width', '100foo');
is(canvas.width, 100, "canvas.width == 100");
}
</script>
<!-- [[[ test_size.attributes.setAttribute.floatsuffix.html ]]] -->
<p>Canvas test: size.attributes.setAttribute.floatsuffix</p>
<!-- Testing: Parsing of non-negative integers in setAttribute -->
<canvas id="c649" width="50" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_size_attributes_setAttribute_floatsuffix() {
var canvas = document.getElementById('c649');
var ctx = canvas.getContext('2d');
canvas.setAttribute('width', '1');
canvas.setAttribute('width', '100.9');
ok(canvas.width == 100, "canvas.width == 100");
}
</script>
<!-- [[[ test_size.attributes.setAttribute.negative.html ]]] -->
<p>Canvas test: size.attributes.setAttribute.negative</p>
<!-- Testing: Parsing of non-negative integers in setAttribute -->
<canvas id="c650" width="50" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_size_attributes_setAttribute_negative() {
var canvas = document.getElementById('c650');
var ctx = canvas.getContext('2d');
canvas.setAttribute('width', '-100');
ok(canvas.width == 300, "canvas.width == 300");
}
</script>
<!-- [[[ test_size.attributes.setAttribute.nonnumber.html ]]] -->
<p>Canvas test: size.attributes.setAttribute.nonnumber</p>
<!-- Testing: Parsing of non-negative integers in setAttribute -->
<canvas id="c651" width="50" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_size_attributes_setAttribute_nonnumber() {
var canvas = document.getElementById('c651');
var ctx = canvas.getContext('2d');
canvas.setAttribute('width', 'foo');
ok(canvas.width == 300, "canvas.width == 300");
}
</script>
<!-- [[[ test_size.attributes.setAttribute.percentsuffix.html ]]] -->
<p>Canvas test: size.attributes.setAttribute.percentsuffix</p>
<!-- Testing: Parsing of non-negative integers in setAttribute -->
<canvas id="c652" width="50" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_size_attributes_setAttribute_percentsuffix() {
var canvas = document.getElementById('c652');
var ctx = canvas.getContext('2d');
canvas.setAttribute('width', '100%');
ok(canvas.width == 100, "canvas.width == 100");
}
</script>
<!-- [[[ test_size.attributes.setAttribute.whitespace.html ]]] -->
<p>Canvas test: size.attributes.setAttribute.whitespace</p>
<!-- Testing: Parsing of non-negative integers in setAttribute -->
<canvas id="c653" width="50" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_size_attributes_setAttribute_whitespace() {
var canvas = document.getElementById('c653');
var ctx = canvas.getContext('2d');
canvas.setAttribute('width', ' 100');
ok(canvas.width == 100, "canvas.width == 100");
}
</script>
<!-- [[[ test_size.attributes.setAttribute.zero.html ]]] -->
<p>Canvas test: size.attributes.setAttribute.zero</p>
<!-- Testing: Parsing of non-negative integers in setAttribute -->
<canvas id="c654" width="50" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_size_attributes_setAttribute_zero() {
var canvas = document.getElementById('c654');
var ctx = canvas.getContext('2d');
canvas.setAttribute('width', '0');
ok(canvas.width == 0, "canvas.width == 0");
}
</script>
<!-- [[[ test_size.attributes.setAttribute.zerosuffix.html ]]] -->
<p>Canvas test: size.attributes.setAttribute.zerosuffix</p>
<!-- Testing: Parsing of non-negative integers in setAttribute -->
<canvas id="c655" width="50" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_size_attributes_setAttribute_zerosuffix() {
var canvas = document.getElementById('c655');
var ctx = canvas.getContext('2d');
canvas.setAttribute('width', '1');
canvas.setAttribute('width', '100.0');
ok(canvas.width == 100, "canvas.width == 100");
}
</script>
<!-- [[[ test_size.attributes.style.html ]]] -->
<p>Canvas test: size.attributes.style</p>
<!-- Testing: Canvas size is independent of CSS resizing -->
<canvas id="c656" width="50" height="30" style="width: 100px; height: 50px"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_size_attributes_style() {
var canvas = document.getElementById('c656');
var ctx = canvas.getContext('2d');
ok(canvas.width == 50, "canvas.width == 50");
ok(canvas.height == 30, "canvas.height == 30");
}
</script>
<!-- [[[ test_size.attributes.type.get.html ]]] -->
<p>Canvas test: size.attributes.type.get</p>
<!-- Testing: width/height DOM/content attributes - string vs number types -->
<canvas id="c657" width="120" height="60"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_size_attributes_type_get() {
var canvas = document.getElementById('c657');
var ctx = canvas.getContext('2d');
ok(canvas.width === 120, "canvas.width === 120");
ok(canvas.height === 60, "canvas.height === 60");
ok(canvas.getAttribute('width') === '120', "canvas.getAttribute('width') === '120'");
ok(canvas.getAttribute('height') === '60', "canvas.getAttribute('height') === '60'");
}
</script>
<!-- [[[ test_size.attributes.type.set.html ]]] -->
<p>Canvas test: size.attributes.type.set</p>
<!-- Testing: Setting width/height DOM attributes -->
<canvas id="c658" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_size_attributes_type_set() {
var canvas = document.getElementById('c658');
var ctx = canvas.getContext('2d');
canvas.width = 120;
canvas.height = 60;
ok(canvas.width === 120, "canvas.width === 120");
ok(canvas.height === 60, "canvas.height === 60");
}
</script>
<!-- [[[ test_text.font.html ]]] -->
<p>Canvas test: text.font</p>
<canvas id="c659" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
var _deferred = true;
function test_text_font() {
var canvas = document.getElementById('c659');
var ctx = canvas.getContext('2d');
is(ctx.font, '10px sans-serif', "default font is not '10px sans-serif'");
ctx.save();
ctx.font = '18pt serif';
is(ctx.font, '24px serif', 'font getter returns incorrect value');
ctx.restore();
is(ctx.font, '10px sans-serif', 'font not being stored in the context state');
if (!_deferred) SimpleTest.finish();
}
</script>
<!-- [[[ test_text.measure.html ]]] -->
<p>Canvas test: text.measure</p>
<canvas id="c660" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
var _deferred = true;
function test_text_measure() {
var canvas = document.getElementById('c660');
var ctx = canvas.getContext('2d');
ctx.font = "10px sans-serif";
ctx.textAlign = "left";
ctx.textBaseline = "top";
var str = 'Test String';
var wid = ctx.measureText(str).width;
ok(wid > 0, "measureText returns nonpositive value for non-empty string");
ctx.font = "20px sans-serif";
isnot(wid, ctx.measureText(str).width, "measureText does not change with a different font size");
ctx.font = "10px sans-serif";
ctx.textAlign = "center";
ctx.textBaseline = "alphabetic";
is(wid, ctx.measureText(str).width, "measureText changes when alignement/baseline is changed");
if (!_deferred) SimpleTest.finish();
}
</script>
<!-- [[[ test_text.space.replace.html ]]] -->
<p>Canvas test: text.space.replace</p>
<canvas id="c661" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
var _deferred = true;
function test_text_space_replace() {
var canvas = document.getElementById('c661');
var ctx = canvas.getContext('2d');
var swid = ctx.measureText(' ').width;
ctx.font = "10px sans-serif";
isnot(swid, 0.0, "measureText reutuns zero for a non-empty string");
is(swid, ctx.measureText('\x09').width, "measureText does not replace whitespace char with a space");
is(swid, ctx.measureText('\x0A').width, "measureText does not replace whitespace char with a space");
is(swid, ctx.measureText('\x0B').width, "measureText does not replace whitespace char with a space");
is(swid, ctx.measureText('\x0C').width, "measureText does not replace whitespace char with a space");
is(swid, ctx.measureText('\x0D').width, "measureText does not replace whitespace char with a space");
if (!_deferred) SimpleTest.finish();
}
</script>
<!-- [[[ test_text.textAlign.html ]]] -->
<p>Canvas test: text.textAlign</p>
<canvas id="c662" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
var _deferred = true;
function test_text_textAlign() {
var canvas = document.getElementById('c662');
var ctx = canvas.getContext('2d');
is(ctx.textAlign, 'start', "default textAlign is not 'start'");
ctx.save();
ctx.textAlign = 'end';
is(ctx.textAlign, 'end', 'textAlign getter returns incorrect value');
ctx.save();
ctx.textAlign = 'left';
is(ctx.textAlign, 'left', 'textAlign getter returns incorrect value');
ctx.save();
ctx.textAlign = 'center';
is(ctx.textAlign, 'center', 'textAlign getter returns incorrect value');
ctx.save();
ctx.textAlign = 'right';
is(ctx.textAlign, 'right', 'textAlign getter returns incorrect value');
ctx.save();
ctx.textAlign = 'start';
is(ctx.textAlign, 'start', 'textAlign getter returns incorrect value');
ctx.restore();
is(ctx.textAlign, 'right', 'textAlign not being stored in the context state');
ctx.restore();
is(ctx.textAlign, 'center', 'textAlign not being stored in the context state');
ctx.restore();
is(ctx.textAlign, 'left', 'textAlign not being stored in the context state');
ctx.restore();
is(ctx.textAlign, 'end', 'textAlign not being stored in the context state');
ctx.restore();
is(ctx.textAlign, 'start', 'textAlign not being stored in the context state');
if (!_deferred) SimpleTest.finish();
}
</script>
<!-- [[[ test_text.textBaseline.html ]]] -->
<p>Canvas test: text.textBaseline</p>
<canvas id="c663" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
var _deferred = true;
function test_text_textBaseline() {
var canvas = document.getElementById('c663');
var ctx = canvas.getContext('2d');
is(ctx.textBaseline, 'alphabetic', "default textBaseline is not 'alphabetic'");
ctx.save();
ctx.textBaseline = 'ideographic';
is(ctx.textBaseline, 'ideographic', 'textBaseline getter returns incorrect value');
ctx.save();
ctx.textBaseline = 'top';
is(ctx.textBaseline, 'top', 'textBaseline getter returns incorrect value');
ctx.save();
ctx.textBaseline = 'middle';
is(ctx.textBaseline, 'middle', 'textBaseline getter returns incorrect value');
ctx.save();
ctx.textBaseline = 'bottom';
is(ctx.textBaseline, 'bottom', 'textBaseline getter returns incorrect value');
ctx.save();
ctx.textBaseline = 'hanging';
is(ctx.textBaseline, 'hanging', 'textBaseline getter returns incorrect value');
ctx.save();
ctx.textBaseline = 'alphabetic';
is(ctx.textBaseline, 'alphabetic', 'textBaseline getter returns incorrect value');
ctx.restore();
is(ctx.textBaseline, 'hanging', 'textBaseline not being stored in the context state');
ctx.restore();
is(ctx.textBaseline, 'bottom', 'textBaseline not being stored in the context state');
ctx.restore();
is(ctx.textBaseline, 'middle', 'textBaseline not being stored in the context state');
ctx.restore();
is(ctx.textBaseline, 'top', 'textBaseline not being stored in the context state');
ctx.restore();
is(ctx.textBaseline, 'ideographic', 'textBaseline not being stored in the context state');
ctx.restore();
is(ctx.textBaseline, 'alphabetic', 'textBaseline not being stored in the context state');
if (!_deferred) SimpleTest.finish();
}
</script>
<!-- [[[ test_toDataURL.arguments.1.html ]]] -->
<p>Canvas test: toDataURL.arguments.1 - bug 401795</p>
<!-- Testing: toDataURL ignores extra arguments -->
<canvas id="c664" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_toDataURL_arguments_1() {
var canvas = document.getElementById('c664');
var ctx = canvas.getContext('2d');
var _thrown_outer = false;
try {
var data = canvas.toDataURL('image/png', 'another argument that should not raise an exception');
ok(/^data:image\/png[;,]/.test(data), "data =~ /^data:image\\/png[;,]/");
} catch (e) {
_thrown_outer = true;
}
ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
}
</script>
<!-- [[[ test_toDataURL.arguments.2.html ]]] -->
<p>Canvas test: toDataURL.arguments.2 - bug 401795</p>
<!-- Testing: toDataURL ignores extra arguments -->
<canvas id="c665" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_toDataURL_arguments_2() {
var canvas = document.getElementById('c665');
var ctx = canvas.getContext('2d');
var _thrown_outer = false;
try {
var data = canvas.toDataURL('image/png', 'another argument that should not raise an exception', 'and another');
ok(/^data:image\/png[;,]/.test(data), "data =~ /^data:image\\/png[;,]/");
} catch (e) {
_thrown_outer = true;
}
ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
}
</script>
<!-- [[[ test_toDataURL.arguments.3.html ]]] -->
<p>Canvas test: toDataURL.arguments.3 - bug 401795</p>
<!-- Testing: toDataURL ignores extra arguments -->
<canvas id="c666" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_toDataURL_arguments_3() {
var canvas = document.getElementById('c666');
var ctx = canvas.getContext('2d');
var _thrown_outer = false;
try {
// More arguments that should not raise exceptions
var data = canvas.toDataURL('image/png', null, null, null);
ok(/^data:image\/png[;,]/.test(data), "data =~ /^data:image\\/png[;,]/");
} catch (e) {
_thrown_outer = true;
}
ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
}
</script>
<!-- [[[ test_toDataURL.complexcolours.html ]]] -->
<p>Canvas test: toDataURL.complexcolours</p>
<!-- Testing: toDataURL handles non-primary and non-solid colours correctly -->
<canvas id="c667" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
var canvas667 = document.getElementById('c667');
var ctx667 = canvas667.getContext('2d');
function test_toDataURL_complexcolours() {
// (These values are chosen to survive relatively alright through being premultiplied)
ctx667.fillStyle = 'rgba(1, 3, 254, 1)';
ctx667.fillRect(0, 0, 25, 25);
ctx667.fillStyle = 'rgba(8, 252, 248, 0.75)';
ctx667.fillRect(25, 0, 25, 25);
ctx667.fillStyle = 'rgba(6, 10, 250, 0.502)';
ctx667.fillRect(50, 0, 25, 25);
ctx667.fillStyle = 'rgba(12, 16, 244, 0.25)';
ctx667.fillRect(75, 0, 25, 25);
var img = new Image();
deferTest();
img.onload = wrapFunction(function ()
{
ctx667.drawImage(img, 0, 25);
// (The alpha values do not really survive float->int conversion, so just
// do approximate comparisons)
isPixel(ctx667, 12,40, 1,3,254,255, 0);
isPixel(ctx667, 37,40, 8,252,248,191, 2);
isPixel(ctx667, 62,40, 6,10,250,127, 4);
isPixel(ctx667, 87,40, 12,16,244,63, 8);
});
img.src = canvas667.toDataURL();
}
</script>
<!-- [[[ test_toDataURL.default.html ]]] -->
<p>Canvas test: toDataURL.default</p>
<!-- Testing: toDataURL with no arguments returns a PNG -->
<canvas id="c668" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_toDataURL_default() {
var canvas = document.getElementById('c668');
var ctx = canvas.getContext('2d');
var data = canvas.toDataURL();
ok(/^data:image\/png[;,]/.test(data), "data =~ /^data:image\\/png[;,]/");
}
</script>
<!-- [[[ test_toDataURL.lowercase.html ]]] -->
<p>Canvas test: toDataURL.lowercase - bug 401795</p>
<!-- Testing: toDataURL type is case-sensitive -->
<canvas id="c669" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_toDataURL_lowercase() {
var canvas = document.getElementById('c669');
var ctx = canvas.getContext('2d');
var _thrown_outer = false;
try {
var data = canvas.toDataURL('ImAgE/PnG');
ok(/^data:image\/png[;,]/.test(data), "data =~ /^data:image\\/png[;,]/");
} catch (e) {
_thrown_outer = true;
}
ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
}
</script>
<!-- [[[ test_toDataURL.nocontext.html ]]] -->
<p>Canvas test: toDataURL.nocontext</p>
<!-- Testing: toDataURL works before any context has been got -->
<canvas id="c670" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_toDataURL_nocontext() {
var canvas = document.getElementById('c670');
var ctx = canvas.getContext('2d');
var canvas2 = document.createElement('canvas');
var data = canvas2.toDataURL();
ok(/^data:image\/png[;,]/.test(data), "data =~ /^data:image\\/png[;,]/");
}
</script>
<!-- [[[ test_toDataURL.png.html ]]] -->
<p>Canvas test: toDataURL.png</p>
<!-- Testing: toDataURL with image/png returns a PNG -->
<canvas id="c671" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_toDataURL_png() {
var canvas = document.getElementById('c671');
var ctx = canvas.getContext('2d');
var data = canvas.toDataURL('image/png');
ok(/^data:image\/png[;,]/.test(data), "data =~ /^data:image\\/png[;,]/");
}
</script>
<!-- [[[ test_toDataURL.primarycolours.html ]]] -->
<p>Canvas test: toDataURL.primarycolours</p>
<!-- Testing: toDataURL handles simple colours correctly -->
<canvas id="c672" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
var canvas672 = document.getElementById('c672');
var ctx672 = canvas672.getContext('2d');
function test_toDataURL_primarycolours() {
ctx672.fillStyle = '#ff0';
ctx672.fillRect(0, 0, 25, 40);
ctx672.fillStyle = '#0ff';
ctx672.fillRect(25, 0, 50, 40);
ctx672.fillStyle = '#00f';
ctx672.fillRect(75, 0, 25, 40);
ctx672.fillStyle = '#fff';
ctx672.fillRect(0, 40, 100, 10);
var data = canvas672.toDataURL();
ctx672.fillStyle = '#f00';
ctx672.fillRect(0, 0, 100, 50);
var img = new Image();
deferTest();
img.onload = wrapFunction(function ()
{
ctx672.drawImage(img, 0, 0);
isPixel(ctx672, 12,20, 255,255,0,255, 0);
isPixel(ctx672, 50,20, 0,255,255,255, 0);
isPixel(ctx672, 87,20, 0,0,255,255, 0);
isPixel(ctx672, 50,45, 255,255,255,255, 0);
});
img.src = data;
}
</script>
<!-- [[[ test_toDataURL.unrecognised.html ]]] -->
<p>Canvas test: toDataURL.unrecognised - bug 401795</p>
<!-- Testing: toDataURL with an unhandled type returns a PNG -->
<canvas id="c673" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_toDataURL_unrecognised() {
var canvas = document.getElementById('c673');
var ctx = canvas.getContext('2d');
var _thrown_outer = false;
try {
var data = canvas.toDataURL('image/example');
ok(/^data:image\/png[;,]/.test(data), "data =~ /^data:image\\/png[;,]/");
} catch (e) {
_thrown_outer = true;
}
ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
}
</script>
<!-- [[[ test_toDataURL.zerosize.html ]]] -->
<p>Canvas test: toDataURL.zerosize</p>
<!-- Testing: toDataURL on zero-size canvas returns 'data:,' -->
<canvas id="c674" width="0" height="0"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_toDataURL_zerosize() {
var canvas = document.getElementById('c674');
var ctx = canvas.getContext('2d');
var data = canvas.toDataURL();
ok(data === 'data:,', "data === 'data:,'");
}
</script>
<!-- [[[ test_type.exists.html ]]] -->
<p>Canvas test: type.exists</p>
<!-- Testing: HTMLCanvasElement is a property of window -->
<canvas id="c676" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_type_exists() {
var canvas = document.getElementById('c676');
var ctx = canvas.getContext('2d');
ok(window.HTMLCanvasElement, "window.HTMLCanvasElement");
}
</script>
<!-- [[[ test_type.extend.html ]]] -->
<p>Canvas test: type.extend</p>
<!-- Testing: HTMLCanvasElement methods can be added, and the new methods used by canvases -->
<canvas id="c677" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_type_extend() {
var canvas = document.getElementById('c677');
var ctx = canvas.getContext('2d');
window.HTMLCanvasElement.prototype.getZero = function () { return 0; };
ok(canvas.getZero() === 0, "canvas.getZero() === 0");
}
</script>
<!-- [[[ test_type.name.html ]]] -->
<p>Canvas test: type.name</p>
<!-- Testing: HTMLCanvasElement type and toString -->
<canvas id="c678" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_type_name() {
var canvas = document.getElementById('c678');
var ctx = canvas.getContext('2d');
ok(Object.prototype.toString.call(canvas) === '[object HTMLCanvasElement]', "Object.prototype.toString.call(canvas) === '[object HTMLCanvasElement]'");
}
</script>
<!-- [[[ test_type.prototype.html ]]] -->
<p>Canvas test: type.prototype</p>
<!-- Testing: window.HTMLCanvasElement has prototype, which is { ReadOnly, DontDelete }. prototype has getContext, which is not -->
<canvas id="c679" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_type_prototype() {
var canvas = document.getElementById('c679');
var ctx = canvas.getContext('2d');
ok(window.HTMLCanvasElement.prototype, "window.HTMLCanvasElement.prototype");
ok(window.HTMLCanvasElement.prototype.getContext, "window.HTMLCanvasElement.prototype.getContext");
window.HTMLCanvasElement.prototype = null;
ok(window.HTMLCanvasElement.prototype, "window.HTMLCanvasElement.prototype");
delete window.HTMLCanvasElement.prototype;
ok(window.HTMLCanvasElement.prototype, "window.HTMLCanvasElement.prototype");
var getContext = window.HTMLCanvasElement.prototype.getContext;
window.HTMLCanvasElement.prototype.getContext = 1;
ok(window.HTMLCanvasElement.prototype.getContext === 1, "window.HTMLCanvasElement.prototype.getContext === 1");
delete window.HTMLCanvasElement.prototype.getContext;
ok(window.HTMLCanvasElement.prototype.getContext === undefined, "window.HTMLCanvasElement.prototype.getContext === undefined");
window.HTMLCanvasElement.prototype.getContext = getContext;
}
</script>
<!-- [[[ test_type.replace.html ]]] -->
<p>Canvas test: type.replace</p>
<!-- Testing: HTMLCanvasElement methods can be replaced, and the replacement methods used by canvases -->
<canvas id="c680" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_type_replace() {
var canvas = document.getElementById('c680');
var ctx = canvas.getContext('2d');
var getContext = window.HTMLCanvasElement.prototype.getContext;
window.HTMLCanvasElement.prototype.getContext = function (name) { return 0; };
ok(canvas.getContext('2d') === 0, "canvas.getContext('2d') === 0");
window.HTMLCanvasElement.prototype.getContext = getContext;
}
</script>
<!-- [[[ test_2d.imagedata_coercion.html ]]] -->
<p>Canvas test: 2d.imagedata_coercion</p>
<!-- Testing: imagedata coerced correctly on set -->
<canvas id="c681" width="100" height="1"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
/* NOTE: Due to round-tripping through premultiplied values and the rounding
that ensues, values of alpha < 255 will tend to do weird things. In
particular, the premultiplied color values are computed by multiplying by a,
dividing by 255, then always rounding up. The conversion the other way is done
by multiplying by 255/a and rounding down. So if
255/a * (amount added when rounding) > 1
we will get a change in value when we go through a putImageData/getImageData cycle. Therefore, to make sure we don't have to worry about our color
channels, our alpha channel should never be < 250, unless it's 0. And when it's 0, all our color channels will come back as 0 too. */
/* Our tests. Each test has two arrays: the array of values to set and the
array of values that should read back as a result. */
var tests = [
[
[ 0, 1, 3, 250 ], [ 0, 1, 3, 250 ]
],
[
[ 0, 1, 2, 250, 4, 5, 6, 250 ], [ 0, 1, 2, 250, 4, 5, 6, 250 ]
],
[
[ 0, 1000, 2, 300, 400, 5, 600, 250 ], [ 0, 255, 2, 255, 255, 5, 255, 250 ]
],
[
[ -10, -5, NaN, 250, 4, 5, 6, -250 ], [ 0, 0, 0, 250, 0, 0, 0, 0 ]
],
[
[ 0.5, 12.2, 12.8, 251.5, 12.5, 13.5, 13.2, 250.5 ],
[ 0, 12, 13, 252, 12, 14, 13, 250 ]
]
];
function doTest(type, idx) {
var testPair = tests[idx];
var test = testPair[0];
var ref = testPair[1];
var descSuffix = " for " + type + " test #" + (idx+1);
function myIs(a, b, str) {
is(a, b, str + descSuffix);
}
myIs(test.length, ref.length, "Length mismatch");
myIs(test.length % 4, 0, "Length not a multiple of 4");
var pixels = test.length / 4;
var imageData = ctx681.createImageData(pixels, 1);
myIs(imageData.width, pixels, "Incorrect created data width");
myIs(imageData.height, 1, "Incorrect created data height");
myIs(imageData.data.length, test.length,
"Incorrect length in created image data");
ctx681.putImageData(imageData, 0, 0);
var testImageData = ctx681.getImageData(0, 0, pixels, 1);
myIs(testImageData.data.length, test.length,
"Incorrect length in test image data after clearing pixels");
var j;
for (j = 0; j < testImageData.data.length; ++j) {
myIs(testImageData.data[j], 0,
"Nonzero value at position " + j + " in test image data " +
"after clearing pixels");
}
for (j = 0; j < imageData.data.length; ++j) {
imageData.data[j] = test[j];
}
if (type == "slow") {
// convert to a non-dense array so we can test that codepath
imageData.data.makeMeSlow = 1;
}
ctx681.putImageData(imageData, 0, 0);
testImageData = ctx681.getImageData(0, 0, pixels, 1);
myIs(testImageData.data.length, test.length,
"Incorrect length in test image data after putting our imagedata");
for (j = 0; j < testImageData.data.length; ++j) {
myIs(testImageData.data[j], ref[j],
"Incorrect value at position " + j + " in test image data " +
"after putting our imagedata");
}
}
function doTests(type) {
for (var i = 0; i < tests.length; ++i) {
doTest(type, i);
}
}
var canvas681;
var ctx681;
function test_2d_imagedata_coercion() {
canvas681 = document.getElementById('c681');
ctx681 = canvas681.getContext('2d');
doTests("fast");
doTests("slow");
}
</script>
<!-- [[[ test_2d.imageSmoothing.html ]]] -->
<p>Canvas test: 2d.imageRenderingQuality</p>
<canvas id="c682" width="10" height="10"></canvas><br>
<canvas style="visibility: hidden" id="c683" width="2" height="2"></canvas>
<script type="text/javascript">
function setup_test_2d_imageSmoothing() {
var c683 = document.getElementById("c683");
var cx683 = c683.getContext("2d");
cx683.fillStyle = "red";
cx683.fillRect(0, 0, 2, 2);
cx683.fillStyle = "rgb(0,255,0)";
cx683.fillRect(0, 0, 1, 1);
}
function test_2d_imageSmoothing() {
setup_test_2d_imageSmoothing();
var c682 = document.getElementById("c682");
var c683 = document.getElementById("c683");
var cx682 = c682.getContext("2d");
ok(cx682.imageSmoothingEnabled == true, "initial imageSmoothingEnabled is true");
// check that imageSmoothingEnabled is part of the context
cx682.save();
cx682.imageSmoothingEnabled = false;
ok(cx682.imageSmoothingEnabled == false, "imageSmoothingEnabled is false after setting");
cx682.restore();
ok(cx682.imageSmoothingEnabled == true, "imageSmoothingEnabled is true after restore");
// check that false works
cx682.imageSmoothingEnabled = false;
cx682.scale(10,10);
cx682.drawImage(c683, 0, 0);
// this should be all red
var data = cx682.getImageData(9, 9, 1, 1);
var pixels = data.data;
ok (pixels[0] == 0 &&
pixels[1] == 255 &&
pixels[2] == 0 &&
pixels[3] == 255,
"pixel is [" + pixels.toString() + "] (expected [0,255,0,255])");
}
</script>
<p>Canvas test: zero_dimensions</p>
<canvas id="c684" width="0" height="0"></canvas>
<script type="text/javascript">
function test_zero_dimensions() {
var c = document.getElementById("c684");
ok(c.width == 0, "c.width not 0");
ok(c.height == 0, "c.height not 0");
}
</script>
<p>Canvas test: zero_dimensions_image_data</p>
<canvas id="c685" width="0" height="0"></canvas>
<script type="text/javascript">
function test_zero_dimensions_imagedata() {
var c = document.getElementById("c685");
var ctx = c.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, 100, 100);
var imgdata = ctx.getImageData(0, 0, 100, 100);
var isTransparentBlack = true;
for (var i = 0; i < imgdata.data.length; ++i)
if (imgdata.data[i] !== 0)
isTransparentBlack = false;
ok(isTransparentBlack, "isTransparentBlack");
}
</script>
<p>Canvas test: getImageData_after_zero_canvas</p>
<canvas id="c686" width="100" height="100"></canvas>
<script type="text/javascript">
function test_getImageData_after_zero_canvas() {
var c = document.getElementById("c686");
var ctx = c.getContext("2d");
ctx.fillStyle = "rgba(0, 0, 0, 1.0)";
ctx.fillRect(0, 0, c.width, c.height);
var oldimgdata = ctx.getImageData(0, 0, c.width, c.height);
c.width = c.height = 0;
c.width = c.height = 100;
ctx.fillRect(0, 0, c.width, c.height);
var imgdata = ctx.getImageData(0, 0, c.width, c.height);
var same = false;
ok(imgdata.data.length === oldimgdata.data.length, "not the same length");
for (var i = 0; i < imgdata.data.length; ++i)
same = imgdata.data[i] === oldimgdata.data[i];
ok(same, "changing dimensions broke canvas");
}
</script>
<p>Canvas test: test_opaque</p>
<canvas id="c688" width="150" height="50"></canvas>
<script type="text/javascript">
function test_opaque() {
var c = document.getElementById("c688");
var ctx = c.getContext("2d", {alpha: false});
ctx.fillStyle = "green";
ctx.fillRect(0,0,10,10);
ctx.fillStyle = "rgba(255,0,0,.5)";
ctx.fillRect(10,0,10,10);
isPixel(ctx, 20, 20, 0, 0, 0, 255, 0);
isPixel(ctx, 5, 5, 0, 128, 0, 255, 0);
isPixel(ctx, 15, 5, 128, 0, 0, 255, 0);
}
</script>
<p>Canvas test: 2d.transformation.transform.identity</p>
<!-- Testing: resetTransform() changes to the identity matrix -->
<canvas id="c689" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_transformation_reset_transform() {
var canvas = document.getElementById('c689');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.setTransform(0.1, 0.0, 0.0, 0.1, 80.0, 30.0);
ctx.resetTransform();
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.clearRect.testdoubleprecision.html ]]] -->
<p>Canvas test: 2d.clearRect.testdoubleprecision</p>
<canvas id="c690" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_clearRect_testdoubleprecision() {
var canvas = document.getElementById('c690');
ctx = canvas.getContext('2d');
ctx.setTransform(1, 1, 1, 1, 0, 0);
ctx.clearRect(-1.79e+308, 0, 1.79e+308, 8);
}
</script>
<!-- [[[ test_2d.path.ellipse.angle.1.html ]]] -->
<p>Canvas test: 2d.path.ellipse.angle.1</p>
<!-- Testing: ellipse() draws pi/2 .. -pi anticlockwise correctly -->
<canvas id="c690" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_ellipse_angle_1() {
var canvas = document.getElementById('c690');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = '#f00';
ctx.beginPath();
ctx.moveTo(100, 0);
ctx.ellipse(100, 0, 150, 100, 0, Math.PI/2, -Math.PI, true);
ctx.fill();
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.ellipse.angle.2.html ]]] -->
<p>Canvas test: 2d.path.ellipse.angle.2</p>
<!-- Testing: ellipse() draws -3pi/2 .. -pi anticlockwise correctly -->
<canvas id="c691" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_ellipse_angle_2() {
var canvas = document.getElementById('c691');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = '#f00';
ctx.beginPath();
ctx.moveTo(100, 0);
ctx.ellipse(100, 0, 150, 100, 0, -3*Math.PI/2, -Math.PI, true);
ctx.fill();
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.ellipse.angle.3.html ]]] -->
<p>Canvas test: 2d.path.ellipse.angle.3</p>
<!-- Testing: ellipse() wraps angles mod 2pi when anticlockwise and end > start+2pi -->
<canvas id="c692" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_ellipse_angle_3() {
var canvas = document.getElementById('c692');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = '#f00';
ctx.beginPath();
ctx.moveTo(100, 0);
ctx.ellipse(100, 0, 150, 100, 0, (512+1/2)*Math.PI, (1024-1)*Math.PI, true);
ctx.fill();
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.ellipse.angle.4.html ]]] -->
<p>Canvas test: 2d.path.ellipse.angle.4</p>
<!-- Testing: ellipse() draws a full circle when clockwise and end > start+2pi -->
<canvas id="c693" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_ellipse_angle_4() {
var canvas = document.getElementById('c693');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = '#0f0';
ctx.beginPath();
ctx.moveTo(50, 25);
ctx.ellipse(50, 25, 60, 50, 0, (512+1/2)*Math.PI, (1024-1)*Math.PI, false);
ctx.fill();
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.ellipse.angle.5.html ]]] -->
<p>Canvas test: 2d.path.ellipse.angle.5</p>
<!-- Testing: ellipse() wraps angles mod 2pi when clockwise and start > end+2pi -->
<canvas id="c694" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_ellipse_angle_5() {
var canvas = document.getElementById('c694');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = '#f00';
ctx.beginPath();
ctx.moveTo(100, 0);
ctx.ellipse(100, 0, 150, 100, 0, (1024-1)*Math.PI, (512+1/2)*Math.PI, false);
ctx.fill();
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.ellipse.angle.6.html ]]] -->
<p>Canvas test: 2d.path.ellipse.angle.6</p>
<!-- Testing: ellipse() draws a full circle when anticlockwise and start > end+2pi -->
<canvas id="c695" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_ellipse_angle_6() {
var canvas = document.getElementById('c695');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = '#0f0';
ctx.beginPath();
ctx.moveTo(50, 25);
ctx.ellipse(50, 25, 60, 50, 0, (1024-1)*Math.PI, (512+1/2)*Math.PI, true);
ctx.fill();
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.ellipse.empty.html ]]] -->
<p>Canvas test: 2d.path.ellipse.empty</p>
<!-- Testing: ellipse() with an empty path does not draw a straight line to the start point -->
<canvas id="c696" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_ellipse_empty() {
var canvas = document.getElementById('c696');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.lineWidth = 50;
ctx.strokeStyle = '#f00';
ctx.beginPath();
ctx.ellipse(200, 25, 5, 5, 0, 0, 2*Math.PI, true);
ctx.stroke();
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.ellipse.end.html ]]] -->
<p>Canvas test: 2d.path.ellipse.end</p>
<!-- Testing: ellipse() adds the end point of the ellipse to the subpath -->
<canvas id="c697" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_ellipse_end() {
var canvas = document.getElementById('c697');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.lineWidth = 50;
ctx.strokeStyle = '#0f0';
ctx.beginPath();
ctx.moveTo(-100, 0);
ctx.ellipse(-100, 0, 25, 25, 0, -Math.PI/2, Math.PI/2, true);
ctx.lineTo(100, 25);
ctx.stroke();
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.ellipse.negative.html ]]] -->
<p>Canvas test: 2d.path.ellipse.negative</p>
<!-- Testing: ellipse() with negative radius throws INDEX_SIZE_ERR -->
<canvas id="c698" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_ellipse_negative() {
var canvas = document.getElementById('c698');
var ctx = canvas.getContext('2d');
var _thrown = undefined;
try {
ctx.ellipse(0, 0, -1, 0, 0, -Math.PI/2, Math.PI/2, true);
} catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError");
try {
ctx.ellipse(0, 0, 0, -1, 0, -Math.PI/2, Math.PI/2, true);
} catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError");
}
</script>
<!-- [[[ test_2d.path.ellipse.nonempty.html ]]] -->
<p>Canvas test: 2d.path.ellipse.nonempty</p>
<!-- Testing: ellipse() with a non-empty path does draw a straight line to the start point -->
<canvas id="c699" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_ellipse_nonempty() {
var canvas = document.getElementById('c699');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.lineWidth = 50;
ctx.strokeStyle = '#0f0';
ctx.beginPath();
ctx.moveTo(0, 25);
ctx.ellipse(200, 25, 5, 2, 0, 0, 2*Math.PI, true);
ctx.stroke();
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.bezierCurveTo.nonfinite.html ]]] -->
<p>Canvas test: 2d.path.ellipse.nonfinite</p>
<!-- Testing: bezierCurveTo() with Infinity/NaN is ignored -->
<canvas id="c700" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_ellipse_nonfinite() {
var canvas = document.getElementById('c700');
var ctx = canvas.getContext('2d');
var _thrown_outer = false;
try {
ctx.moveTo(0, 0);
ctx.lineTo(100, 0);
ctx.ellipse(Infinity, 25, 0, 0, 0, 0, 2 * Math.PI, false);
ctx.ellipse(-Infinity, 25, 0, 0, 0, 0, 2 * Math.PI, false);
ctx.ellipse(NaN, 25, 0, 0, 0, 0, 2 * Math.PI, false);
ctx.ellipse(50, Infinity, 0, 0, 0, 0, 2 * Math.PI, false);
ctx.ellipse(50, -Infinity, 0, 0, 0, 0, 2 * Math.PI, false);
ctx.ellipse(50, NaN, 50, 0, 0, 0, 2 * Math.PI, false);
ctx.ellipse(50, 25, Infinity, 0, 0, 0, 2 * Math.PI, false);
ctx.ellipse(50, 25, -Infinity, 0, 0, 0, 2 * Math.PI, false);
ctx.ellipse(50, 25, NaN, 0, 0, 0, 2 * Math.PI, false);
ctx.ellipse(50, 25, 0, Infinity, 0, 0, 2 * Math.PI, false);
ctx.ellipse(50, 25, 0, -Infinity, 0, 0, 2 * Math.PI, false);
ctx.ellipse(50, 25, 0, NaN, 0, 0, 2 * Math.PI, false);
ctx.ellipse(50, 25, 0, 0, Infinity, 0, 2 * Math.PI, false);
ctx.ellipse(50, 25, 0, 0, -Infinity, 0, 2 * Math.PI, false);
ctx.ellipse(50, 25, 0, 0, NaN, 0, 2 * Math.PI, false);
ctx.ellipse(50, 25, 0, 0, 0, Infinity, 2 * Math.PI, false);
ctx.ellipse(50, 25, 0, 0, 0, -Infinity, 2 * Math.PI, false);
ctx.ellipse(50, 25, 0, 0, 0, NaN, 2 * Math.PI, false);
ctx.ellipse(50, 25, 0, 0, 0, 0, Infinity, false);
ctx.ellipse(50, 25, 0, 0, 0, 0, -Infinity, false);
ctx.ellipse(50, 25, 0, 0, 0, 0, NaN, false);
ctx.ellipse(Infinity, Infinity, 0, 0, 0, 0, 2 * Math.PI, false);
ctx.ellipse(Infinity, Infinity, Infinity, 0, 0, 0, 2 * Math.PI, false);
ctx.ellipse(Infinity, Infinity, Infinity, Infinity, 0, 0, 2 * Math.PI, false);
ctx.ellipse(Infinity, Infinity, Infinity, Infinity, Infinity, 0, 2 * Math.PI, false);
ctx.ellipse(Infinity, Infinity, Infinity, Infinity, Infinity, Infinity, 2 * Math.PI, false);
ctx.ellipse(Infinity, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity, false);
ctx.ellipse(Infinity, Infinity, Infinity, Infinity, Infinity, 0, Infinity, false);
ctx.ellipse(Infinity, Infinity, Infinity, Infinity, 0, Infinity, Infinity, false);
ctx.ellipse(Infinity, Infinity, Infinity, 0, Infinity, Infinity, Infinity, false);
ctx.ellipse(Infinity, Infinity, 0, Infinity, Infinity, Infinity, Infinity, false);
ctx.ellipse(Infinity, 25, Infinity, Infinity, Infinity, Infinity, Infinity, false);
ctx.ellipse(50, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity, false);
ctx.ellipse(Infinity, Infinity, Infinity, Infinity, 0, Infinity, 2 * Math.PI, false);
ctx.ellipse(Infinity, Infinity, Infinity, 0, Infinity, Infinity, 2 * Math.PI, false);
ctx.ellipse(Infinity, Infinity, 0, Infinity, Infinity, Infinity, 2 * Math.PI, false);
ctx.ellipse(Infinity, 25, Infinity, Infinity, Infinity, Infinity, 2 * Math.PI, false);
ctx.ellipse(50, Infinity, Infinity, Infinity, Infinity, Infinity, 2 * Math.PI, false);
ctx.ellipse(Infinity, Infinity, Infinity, Infinity, 0, 0, Infinity, false);
ctx.ellipse(Infinity, Infinity, Infinity, 0, Infinity, 0, Infinity, false);
ctx.ellipse(Infinity, Infinity, 0, Infinity, Infinity, 0, Infinity, false);
ctx.ellipse(Infinity, 25, Infinity, Infinity, Infinity, 0, Infinity, false);
ctx.ellipse(50, Infinity, Infinity, Infinity, Infinity, 0, Infinity, false);
ctx.ellipse(Infinity, Infinity, Infinity, 0, 0, Infinity, Infinity, false);
ctx.ellipse(Infinity, Infinity, 0, Infinity, 0, Infinity, Infinity, false);
ctx.ellipse(Infinity, 25, Infinity, Infinity, 0, Infinity, Infinity, false);
ctx.ellipse(50, Infinity, Infinity, Infinity, 0, Infinity, Infinity, false);
ctx.ellipse(Infinity, Infinity, 50, 0, Infinity, Infinity, Infinity, false);
ctx.ellipse(Infinity, 25, Infinity, 0, Infinity, Infinity, Infinity, false);
ctx.ellipse(50, Infinity, Infinity, 0, Infinity, Infinity, Infinity, false);
ctx.ellipse(Infinity, 25, 50, Infinity, Infinity, Infinity, Infinity, false);
ctx.ellipse(50, Infinity, 50, Infinity, Infinity, Infinity, Infinity, false);
ctx.ellipse(50, 25, Infinity, Infinity, Infinity, Infinity, Infinity, false);
ctx.ellipse(Infinity, Infinity, Infinity, 0, Infinity, 0, 2 * Math.PI, false);
ctx.ellipse(Infinity, Infinity, 0, Infinity, Infinity, 0, 2 * Math.PI, false);
ctx.ellipse(Infinity, 25, Infinity, Infinity, Infinity, 0, 2 * Math.PI, false);
ctx.ellipse(50, Infinity, Infinity, Infinity, Infinity, 0, 2 * Math.PI, false);
ctx.ellipse(Infinity, Infinity, Infinity, 0, 0, Infinity, 2 * Math.PI, false);
ctx.ellipse(Infinity, Infinity, 0, Infinity, 0, Infinity, 2 * Math.PI, false);
ctx.ellipse(Infinity, 25, Infinity, Infinity, 0, Infinity, 2 * Math.PI, false);
ctx.ellipse(50, Infinity, Infinity, Infinity, 0, Infinity, 2 * Math.PI, false);
ctx.ellipse(Infinity, Infinity, 0, 0, Infinity, Infinity, 2 * Math.PI, false);
ctx.ellipse(Infinity, 25, Infinity, 0, Infinity, Infinity, 2 * Math.PI, false);
ctx.ellipse(50, Infinity, Infinity, 0, Infinity, Infinity, 2 * Math.PI, false);
ctx.ellipse(Infinity, 25, 0, Infinity, Infinity, Infinity, 2 * Math.PI, false);
ctx.ellipse(50, Infinity, 0, Infinity, Infinity, Infinity, 2 * Math.PI, false);
ctx.ellipse(50, 25, Infinity, Infinity, Infinity, Infinity, 2 * Math.PI, false);
ctx.ellipse(Infinity, Infinity, Infinity, 0, 0, 0, Infinity, false);
ctx.ellipse(Infinity, Infinity, 0, Infinity, 0, 0, Infinity, false);
ctx.ellipse(Infinity, 25, Infinity, Infinity, 0, 0, Infinity, false);
ctx.ellipse(50, Infinity, Infinity, Infinity, 0, 0, Infinity, false);
ctx.ellipse(Infinity, Infinity, 0, 0, Infinity, 0, Infinity, false);
ctx.ellipse(Infinity, 25, Infinity, 0, Infinity, 0, Infinity, false);
ctx.ellipse(50, Infinity, Infinity, 0, Infinity, 0, Infinity, false);
ctx.ellipse(Infinity, 25, 0, Infinity, Infinity, 0, Infinity, false);
ctx.ellipse(50, Infinity, 0, Infinity, Infinity, 0, Infinity, false);
ctx.ellipse(50, 25, Infinity, Infinity, Infinity, 0, Infinity, false);
ctx.ellipse(Infinity, Infinity, 0, 0, 0, Infinity, Infinity, false);
ctx.ellipse(Infinity, 25, Infinity, 0, 0, Infinity, Infinity, false);
ctx.ellipse(50, Infinity, Infinity, 0, 0, Infinity, Infinity, false);
ctx.ellipse(Infinity, 25, 0, Infinity, 0, Infinity, Infinity, false);
ctx.ellipse(50, Infinity, 0, Infinity, 0, Infinity, Infinity, false);
ctx.ellipse(50, 25, Infinity, Infinity, 0, Infinity, Infinity, false);
ctx.ellipse(Infinity, 25, 0, 0, Infinity, Infinity, Infinity, false);
ctx.ellipse(50, Infinity, 0, 0, Infinity, Infinity, Infinity, false);
ctx.ellipse(50, 25, Infinity, 0, Infinity, Infinity, Infinity, false);
ctx.ellipse(50, 25, 50, Infinity, Infinity, Infinity, Infinity, false);
ctx.ellipse(Infinity, Infinity, 0, Infinity, 0, 0, 2 * Math.PI, false);
ctx.ellipse(Infinity, 25, Infinity, Infinity, 0, 0, 2 * Math.PI, false);
ctx.ellipse(50, Infinity, Infinity, Infinity, 0, 0, 2 * Math.PI, false);
ctx.ellipse(Infinity, Infinity, 0, 0, Infinity, 0, 2 * Math.PI, false);
ctx.ellipse(Infinity, 25, Infinity, 0, Infinity, 0, 2 * Math.PI, false);
ctx.ellipse(50, Infinity, Infinity, 0, Infinity, 0, 2 * Math.PI, false);
ctx.ellipse(Infinity, 25, 0, Infinity, Infinity, 0, 2 * Math.PI, false);
ctx.ellipse(50, Infinity, 0, Infinity, Infinity, 0, 2 * Math.PI, false);
ctx.ellipse(50, 25, Infinity, Infinity, Infinity, 0, 2 * Math.PI, false);
ctx.ellipse(Infinity, Infinity, 0, 0, 0, Infinity, 2 * Math.PI, false);
ctx.ellipse(Infinity, 25, Infinity, 0, 0, Infinity, 2 * Math.PI, false);
ctx.ellipse(50, Infinity, Infinity, 0, 0, Infinity, 2 * Math.PI, false);
ctx.ellipse(Infinity, 25, 0, Infinity, 0, Infinity, 2 * Math.PI, false);
ctx.ellipse(50, Infinity, 0, Infinity, 0, Infinity, 2 * Math.PI, false);
ctx.ellipse(50, 25, Infinity, Infinity, 0, Infinity, 2 * Math.PI, false);
ctx.ellipse(Infinity, 25, 0, 0, Infinity, Infinity, 2 * Math.PI, false);
ctx.ellipse(50, Infinity, 0, 0, Infinity, Infinity, 2 * Math.PI, false);
ctx.ellipse(50, 25, Infinity, 0, Infinity, Infinity, 2 * Math.PI, false);
ctx.ellipse(50, 25, 0, Infinity, Infinity, Infinity, 2 * Math.PI, false);
ctx.ellipse(Infinity, Infinity, 0, 0, 0, 0, Infinity, false);
ctx.ellipse(Infinity, 25, Infinity, 0, 0, 0, Infinity, false);
ctx.ellipse(50, Infinity, Infinity, 0, 0, 0, Infinity, false);
ctx.ellipse(Infinity, 25, 0, Infinity, 0, 0, Infinity, false);
ctx.ellipse(50, Infinity, 0, Infinity, 0, 0, Infinity, false);
ctx.ellipse(50, 25, Infinity, Infinity, 0, 0, Infinity, false);
ctx.ellipse(Infinity, 25, 0, 0, Infinity, 0, Infinity, false);
ctx.ellipse(50, Infinity, 0, 0, Infinity, 0, Infinity, false);
ctx.ellipse(50, 25, Infinity, 0, Infinity, 0, Infinity, false);
ctx.ellipse(50, 25, 0, Infinity, Infinity, 0, Infinity, false);
ctx.ellipse(Infinity, 25, 0, 0, 0, Infinity, Infinity, false);
ctx.ellipse(50, Infinity, 0, 0, 0, Infinity, Infinity, false);
ctx.ellipse(50, 25, Infinity, 0, 0, Infinity, Infinity, false);
ctx.ellipse(50, 25, 0, Infinity, 0, Infinity, Infinity, false);
ctx.ellipse(50, 25, 0, 0, Infinity, Infinity, Infinity, false);
ctx.ellipse(Infinity, 25, Infinity, 0, 0, 0, 2 * Math.PI, false);
ctx.ellipse(50, Infinity, Infinity, 0, 0, 0, 2 * Math.PI, false);
ctx.ellipse(Infinity, 25, 0, Infinity, 0, 0, 2 * Math.PI, false);
ctx.ellipse(50, Infinity, 0, Infinity, 0, 0, 2 * Math.PI, false);
ctx.ellipse(50, 25, Infinity, Infinity, 0, 0, 2 * Math.PI, false);
ctx.ellipse(Infinity, 25, 0, 0, Infinity, 0, 2 * Math.PI, false);
ctx.ellipse(50, Infinity, 0, 0, Infinity, 0, 2 * Math.PI, false);
ctx.ellipse(50, 25, Infinity, 0, Infinity, 0, 2 * Math.PI, false);
ctx.ellipse(50, 25, 0, Infinity, Infinity, 0, 2 * Math.PI, false);
ctx.ellipse(Infinity, 25, 0, 0, 0, Infinity, 2 * Math.PI, false);
ctx.ellipse(50, Infinity, 0, 0, 0, Infinity, 2 * Math.PI, false);
ctx.ellipse(50, 25, Infinity, 0, 0, Infinity, 2 * Math.PI, false);
ctx.ellipse(50, 25, 0, Infinity, 0, Infinity, 2 * Math.PI, false);
ctx.ellipse(50, 25, 0, 0, Infinity, Infinity, 2 * Math.PI, false);
ctx.ellipse(Infinity, 25, 0, 0, 0, 0, Infinity, false);
ctx.ellipse(50, Infinity, 0, 0, 0, 0, Infinity, false);
ctx.ellipse(50, 25, Infinity, 0, 0, 0, Infinity, false);
ctx.ellipse(50, 25, 0, Infinity, 0, 0, Infinity, false);
ctx.ellipse(50, 25, 0, 0, Infinity, 0, Infinity, false);
ctx.ellipse(50, 25, 0, 0, 0, Infinity, Infinity, false);
ctx.lineTo(100, 50);
ctx.lineTo(0, 50);
ctx.fillStyle = '#0f0';
ctx.fill();
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 90,45, 0,255,0,255, 0);
} catch (e) {
_thrown_outer = true;
}
ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
}
</script>
<!-- [[[ test_2d.path.ellipse.scale.1.html ]]] -->
<p>Canvas test: 2d.path.ellipse.scale.1</p>
<!-- Testing: Non-uniformly scaled ellipse are the right shape -->
<canvas id="c701" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_ellipse_scale_1() {
var canvas = document.getElementById('c701');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.scale(2, 0.5);
ctx.fillStyle = '#0f0';
ctx.beginPath();
var hypothenuse = Math.sqrt(50 * 50 + 25 * 25);
var tolerance = 0.5;
var radius = hypothenuse + tolerance;
ctx.ellipse(25, 50, radius, radius, 0, 0, 2*Math.PI, false);
ctx.fill();
ctx.fillStyle = '#f00';
ctx.beginPath();
ctx.moveTo(-25, 50);
ctx.ellipse(-25, 50, 24, 34, 0, 0, 2 * Math.PI, false);
ctx.moveTo(75, 50);
ctx.ellipse(75, 50, 24, 34, 0, 0, 2 * Math.PI, false);
ctx.moveTo(25, -25);
ctx.ellipse(25, -25, 34, 24, 0, 0, 2 * Math.PI, false);
ctx.moveTo(25, 125);
ctx.ellipse(25, -25, 34, 24, 0, 0, 2 * Math.PI, false);
ctx.fill();
isPixel(ctx, 0,0, 0,255,0,255, 0);
isPixel(ctx, 50,0, 0,255,0,255, 0);
isPixel(ctx, 99,0, 0,255,0,255, 0);
isPixel(ctx, 0,25, 0,255,0,255, 0);
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 99,25, 0,255,0,255, 0);
isPixel(ctx, 0,49, 0,255,0,255, 0);
isPixel(ctx, 50,49, 0,255,0,255, 0);
isPixel(ctx, 99,49, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.ellipse.scale.2.html ]]] -->
<p>Canvas test: 2d.path.ellipse.scale.2</p>
<!-- Testing: Highly scaled ellipse are the right shape -->
<canvas id="c702" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_ellipse_scale_2() {
var canvas = document.getElementById('c702');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.scale(100, 100);
ctx.strokeStyle = '#0f0';
ctx.lineWidth = 1.2;
ctx.beginPath();
ctx.ellipse(0, 0, 0.6, 1, 0, 0, Math.PI/2, false);
ctx.ellipse(0, 0, 1, 0.6, 0, 0, Math.PI/2, false);
ctx.stroke();
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 50,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,25, 0,255,0,255, 0);
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 98,25, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 50,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.ellipse.selfintersect.1.html ]]] -->
<p>Canvas test: 2d.path.ellipse.selfintersect.1</p>
<!-- Testing: ellipse() with lineWidth > 2*radius is drawn sensibly -->
<canvas id="c703" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_ellipse_selfintersect_1() {
var canvas = document.getElementById('c703');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.lineWidth = 200;
ctx.strokeStyle = '#f00';
ctx.beginPath();
ctx.ellipse(100, 50, 35, 25, 0, 0, -Math.PI/2, true);
ctx.stroke();
ctx.beginPath();
ctx.ellipse(0, 0, 35, 25, 0, 0, -Math.PI/2, true);
ctx.stroke();
isPixel(ctx, 50,25, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.ellipse.selfintersect.2.html ]]] -->
<p>Canvas test: 2d.path.ellipse.selfintersect.2</p>
<!-- Testing: ellipse() with lineWidth > 2*radius is drawn sensibly -->
<canvas id="c704" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_ellipse_selfintersect_2() {
var canvas = document.getElementById('c704');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.lineWidth = 180;
ctx.strokeStyle = '#0f0';
ctx.beginPath();
ctx.ellipse(-50, 50, 25, 25, 0, 0, -Math.PI/2, true);
ctx.stroke();
ctx.beginPath();
ctx.ellipse(100, 0, 25, 25, 0, 0, -Math.PI/2, true);
ctx.stroke();
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 90,10, 0,255,0,255, 0);
isPixel(ctx, 97,1, 0,255,0,255, 0);
isPixel(ctx, 97,2, 0,255,0,255, 0);
isPixel(ctx, 97,3, 0,255,0,255, 0);
isPixel(ctx, 2,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.ellipse.shape.1.html ]]] -->
<p>Canvas test: 2d.path.ellipse.shape.1</p>
<!-- Testing: ellipse() from 0 to pi does not draw anything in the wrong half -->
<canvas id="c705" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_ellipse_shape_1() {
var canvas = document.getElementById('c705');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.lineWidth = 50;
ctx.strokeStyle = '#f00';
ctx.beginPath();
ctx.ellipse(50, 50, 40, 60, 0, 0, Math.PI, false);
ctx.stroke();
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 20,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.ellipse.shape.2.html ]]] -->
<p>Canvas test: 2d.path.ellipse.shape.2</p>
<!-- Testing: ellipse() from 0 to pi draws stuff in the right half -->
<canvas id="c706" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_ellipse_shape_2() {
var canvas = document.getElementById('c706');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.lineWidth = 100;
ctx.strokeStyle = '#0f0';
ctx.beginPath();
ctx.ellipse(50, 50, 30, 15, 0, 0, Math.PI, true);
ctx.stroke();
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 20,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.ellipse.shape.3.html ]]] -->
<p>Canvas test: 2d.path.ellipse.shape.3</p>
<!-- Testing: ellipse() from 0 to -pi/2 draws stuff in the right quadrant -->
<canvas id="c707" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_ellipse_shape_3() {
var canvas = document.getElementById('c707');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.lineWidth = 150;
ctx.strokeStyle = '#0f0';
ctx.beginPath();
ctx.ellipse(-50, 50, 100, 200, 0, 0, -Math.PI/2, true);
ctx.stroke();
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.ellipse.shape.4.html ]]] -->
<p>Canvas test: 2d.path.ellipse.shape.4</p>
<!-- Testing: ellipse() from 0 to 5pi does not draw strange things -->
<canvas id="c708" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_ellipse_shape_4() {
var canvas = document.getElementById('c708');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.lineWidth = 200;
ctx.strokeStyle = '#f00';
ctx.beginPath();
ctx.ellipse(300, 0, 100, 200, 0, 0, 5*Math.PI, false);
ctx.stroke();
isPixel(ctx, 50,25, 0,255,0,255, 0);
isPixel(ctx, 1,1, 0,255,0,255, 0);
isPixel(ctx, 98,1, 0,255,0,255, 0);
isPixel(ctx, 1,48, 0,255,0,255, 0);
isPixel(ctx, 98,48, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.ellipse.twopie.1.html ]]] -->
<p>Canvas test: 2d.path.ellipse.twopie.1</p>
<!-- Testing: ellipse() draws nothing when end = start + 2pi-e and anticlockwise -->
<canvas id="c709" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_ellipse_twopie_1() {
var canvas = document.getElementById('c709');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.strokeStyle = '#f00';
ctx.lineWidth = 100;
ctx.beginPath();
ctx.ellipse(50, 25, 50, 60, 0, 0, 2*Math.PI - 1e-4, true);
ctx.stroke();
isPixel(ctx, 50,20, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.ellipse.twopie.2.html ]]] -->
<p>Canvas test: 2d.path.ellipse.twopie.2</p>
<!-- Testing: ellipse() draws a full ellipse when end = start + 2pi-e and clockwise -->
<canvas id="c710" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_ellipse_twopie_2() {
var canvas = document.getElementById('c710');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.strokeStyle = '#0f0';
ctx.lineWidth = 100;
ctx.beginPath();
ctx.ellipse(50, 25, 50, 30, 0, 0, 2*Math.PI - 1e-4, false);
ctx.stroke();
isPixel(ctx, 50,20, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.ellipse.twopie.3.html ]]] -->
<p>Canvas test: 2d.path.ellipse.twopie.3</p>
<!-- Testing: ellipse() draws a full circle when end = start + 2pi+e and anticlockwise -->
<canvas id="c711" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_ellipse_twopie_3() {
var canvas = document.getElementById('c711');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.strokeStyle = '#0f0';
ctx.lineWidth = 100;
ctx.beginPath();
ctx.ellipse(50, 25, 50, 25, 0, 0, 2*Math.PI + 1e-4, true);
ctx.stroke();
isPixel(ctx, 50,20, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.ellipse.twopie.4.html ]]] -->
<p>Canvas test: 2d.path.ellipse.twopie.4</p>
<!-- Testing: ellipse() draws nothing when end = start + 2pi+e and clockwise -->
<canvas id="c712" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_ellipse_twopie_4() {
var canvas = document.getElementById('c712');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.strokeStyle = '#0f0';
ctx.lineWidth = 100;
ctx.beginPath();
ctx.ellipse(50, 25, 50, 25, 0, 0, 2*Math.PI + 1e-4, false);
ctx.stroke();
isPixel(ctx, 50,20, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.ellipse.zero.1.html ]]] -->
<p>Canvas test: 2d.path.ellipse.zero.1</p>
<!-- Testing: ellipse() draws nothing when startAngle = endAngle and anticlockwise -->
<canvas id="c713" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_ellipse_zero_1() {
var canvas = document.getElementById('c713');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.strokeStyle = '#f00';
ctx.lineWidth = 100;
ctx.beginPath();
ctx.ellipse(50, 25, 50, 25, 0, 0, 0, true);
ctx.stroke();
isPixel(ctx, 50,20, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.ellipse.zero.2.html ]]] -->
<p>Canvas test: 2d.path.ellipse.zero.2</p>
<!-- Testing: ellipse() draws nothing when startAngle = endAngle and clockwise -->
<canvas id="c714" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_ellipse_zero_2() {
var canvas = document.getElementById('c714');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.strokeStyle = '#f00';
ctx.lineWidth = 100;
ctx.beginPath();
ctx.ellipse(50, 25, 50, 25, 0, 0, 0, true);
ctx.stroke();
isPixel(ctx, 50,20, 0,255,0,255, 0);
}
</script>
<!-- [[[ test_2d.path.ellipse.zeroradius.html ]]] -->
<p>Canvas test: 2d.path.ellipse.zeroradius</p>
<!-- Testing: ellipse() with zero radius draws a line to the start point -->
<canvas id="c715" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_ellipse_zeroradius() {
var canvas = document.getElementById('c715');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00'
ctx.fillRect(0, 0, 100, 50);
ctx.lineWidth = 50;
ctx.strokeStyle = '#0f0';
ctx.beginPath();
ctx.moveTo(0, 25);
ctx.ellipse(200, 25, 0, 0, 0, 0, Math.PI, true);
ctx.stroke();
isPixel(ctx, 50, 25, 0, 255, 0, 255, 0);
}
</script>
<!-- [[[ test_2d.path.ellipse.rotate.html ]]] -->
<p>Canvas test: 2d.path.ellipse.rotate</p>
<!-- Testing: ellipse() with a rotation angle works -->
<canvas id="c716" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<script>
function test_2d_path_ellipse_rotate() {
var canvas = document.getElementById('c716');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, 100, 50);
ctx.lineWidth = 5;
ctx.strokeStyle = '#f00';
ctx.beginPath();
ctx.ellipse(50, 25, 50, 25, Math.PI/4, 0, 2 * Math.PI, false);
ctx.stroke();
ctx.beginPath();
ctx.ellipse(50, 25, 50, 25, -Math.PI/4, 0, 2 * Math.PI, false);
ctx.stroke();
isPixel(ctx, 50, 25, 0,255,0,255, 0);
isPixel(ctx, 48,1, 0,255,0,255, 0);
isPixel(ctx, 98,24, 0,255,0,255, 0);
isPixel(ctx, 48,48, 0,255,0,255, 0);
isPixel(ctx, 24,48, 0,255,0,255, 0);
}
</script>
<script>
function asyncTestsDone() {
if (isDone_test_2d_drawImage_animated_apng &&
isDone_test_2d_pattern_animated_gif &&
isDone_test_2d_drawImage_animated_gif) {
SimpleTest.finish();
} else {
setTimeout(asyncTestsDone, 500);
}
}
// eslint-disable-next-line complexity
function runTests() {
/**
* xor and lighter aren't well handled by cairo; they mostly work, but we don't want
* to test that
*/
//test_2d_composite_solid_lighter();
//test_2d_composite_transparent_xor();
//test_2d_composite_solid_xor();
//test_2d_composite_transparent_lighter();
//test_2d_composite_image_xor();
//test_2d_composite_image_lighter();
//test_2d_composite_canvas_xor();
//test_2d_composite_canvas_lighter();
//test_2d_composite_clip_xor();
//test_2d_composite_clip_lighter();
/**
* Temporarily disabled tests; unbounded operators changed behaviour, need to reevaluate tests
*/
//test_2d_composite_canvas_destination_atop();
//test_2d_composite_canvas_destination_in();
//test_2d_composite_canvas_source_in();
//test_2d_composite_canvas_source_out();
//test_2d_composite_image_destination_atop();
//test_2d_composite_image_destination_in();
//test_2d_composite_image_source_in();
//test_2d_composite_image_source_out();
/**
* These tests only pass on Mac OS X >= 10.5; see bug 450114
*/
//test_2d_gradient_radial_equal();
//test_2d_gradient_radial_touch1();
//test_2d_gradient_radial_touch2();
//test_2d_gradient_radial_touch3();
/**
* These 19 tests receive special makefile treatment
*/
//test_2d_composite_uncovered_image_destination_atop();
//test_2d_composite_uncovered_image_destination_in();
//test_2d_composite_uncovered_image_source_in();
//test_2d_composite_uncovered_image_source_out();
//test_2d_gradient_radial_cone_behind();
//test_2d_gradient_radial_cone_beside();
//test_2d_gradient_radial_cone_front();
//test_2d_gradient_radial_cone_shape2();
//test_2d_gradient_radial_cone_top();
//test_2d_gradient_radial_inside2();
//test_2d_gradient_radial_inside3();
//test_2d_gradient_radial_outside1();
//test_2d_gradient_radial_outside2();
//test_2d_gradient_radial_outside3();
//test_2d_line_cap_closed();
//test_2d_line_join_parallel();
//test_2d_path_arc_shape_3();
//test_2d_path_rect_selfintersect();
//test_2d_strokeRect_zero_5();
/**
* Other tests not being run
*/
//test_2d_composite_uncovered_fill_destination_atop();
//test_2d_composite_uncovered_fill_destination_in();
//test_2d_composite_uncovered_fill_source_in();
//test_2d_composite_uncovered_fill_source_out();
//test_2d_composite_uncovered_pattern_destination_atop();
//test_2d_composite_uncovered_pattern_destination_in();
//test_2d_composite_uncovered_pattern_source_in();
//test_2d_composite_uncovered_pattern_source_out();
//test_2d_path_rect_zero_6(); // This test is bogus according to the spec; see bug 407107
// These tests are bogus according to the spec: shadows should not be
// drawn if shadowBlur, shadowOffsetX, and shadowOffsetY are all zero, whic
// they are in these tests
//test_2d_shadow_composite_3();
//test_2d_shadow_composite_4();
try {
test_2d_canvas_readonly();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_canvas_readonly");
}
try {
test_2d_canvas_reference();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_canvas_reference");
}
try {
test_2d_clearRect_basic();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_clearRect_basic");
}
try {
test_2d_clearRect_clip();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_clearRect_clip");
}
try {
test_2d_clearRect_globalalpha();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_clearRect_globalalpha");
}
try {
test_2d_clearRect_globalcomposite();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_clearRect_globalcomposite");
}
try {
test_2d_clearRect_negative();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_clearRect_negative");
}
try {
test_2d_clearRect_nonfinite();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_clearRect_nonfinite");
}
try {
test_2d_clearRect_path();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_clearRect_path");
}
try {
test_2d_clearRect_shadow();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_clearRect_shadow");
}
try {
test_2d_clearRect_transform();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_clearRect_transform");
}
try {
test_2d_clearRect_zero();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_clearRect_zero");
}
try {
test_2d_composite_canvas_copy();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_composite_canvas_copy");
}
try {
test_2d_composite_canvas_destination_out();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_composite_canvas_destination_out");
}
try {
test_2d_composite_canvas_destination_over();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_composite_canvas_destination_over");
}
try {
test_2d_composite_canvas_source_atop();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_composite_canvas_source_atop");
}
try {
test_2d_composite_canvas_source_over();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_composite_canvas_source_over");
}
try {
test_2d_composite_clip_copy();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_composite_clip_copy");
}
try {
test_2d_composite_clip_destination_atop();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_composite_clip_destination_atop");
}
try {
test_2d_composite_clip_destination_in();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_composite_clip_destination_in");
}
try {
test_2d_composite_clip_destination_out();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_composite_clip_destination_out");
}
try {
test_2d_composite_clip_destination_over();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_composite_clip_destination_over");
}
try {
test_2d_composite_clip_source_atop();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_composite_clip_source_atop");
}
try {
test_2d_composite_clip_source_in();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_composite_clip_source_in");
}
try {
test_2d_composite_clip_source_out();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_composite_clip_source_out");
}
try {
test_2d_composite_clip_source_over();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_composite_clip_source_over");
}
try {
test_2d_composite_globalAlpha_canvas();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_composite_globalAlpha_canvas");
}
try {
test_2d_composite_globalAlpha_canvaspattern();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_composite_globalAlpha_canvaspattern");
}
try {
test_2d_composite_globalAlpha_default();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_composite_globalAlpha_default");
}
try {
test_2d_composite_globalAlpha_fill();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_composite_globalAlpha_fill");
}
try {
test_2d_composite_globalAlpha_image();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_composite_globalAlpha_image");
}
try {
test_2d_composite_globalAlpha_imagepattern();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_composite_globalAlpha_imagepattern");
}
try {
test_2d_composite_globalAlpha_invalid();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_composite_globalAlpha_invalid");
}
try {
test_2d_composite_globalAlpha_range();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_composite_globalAlpha_range");
}
try {
test_2d_composite_image_copy();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_composite_image_copy");
}
try {
test_2d_composite_image_destination_out();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_composite_image_destination_out");
}
try {
test_2d_composite_image_destination_over();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_composite_image_destination_over");
}
try {
test_2d_composite_image_source_atop();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_composite_image_source_atop");
}
try {
test_2d_composite_image_source_over();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_composite_image_source_over");
}
try {
test_2d_composite_operation_casesensitive();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_composite_operation_casesensitive");
}
try {
test_2d_composite_operation_darker();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_composite_operation_darker");
}
try {
test_2d_composite_operation_default();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_composite_operation_default");
}
try {
test_2d_composite_operation_get();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_composite_operation_get");
}
try {
test_2d_composite_operation_highlight();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_composite_operation_highlight");
}
try {
test_2d_composite_operation_nullsuffix();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_composite_operation_nullsuffix");
}
try {
test_2d_composite_operation_over();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_composite_operation_over");
}
try {
test_2d_composite_operation_unrecognised();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_composite_operation_unrecognised");
}
try {
test_2d_composite_solid_copy();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_composite_solid_copy");
}
try {
test_2d_composite_solid_destination_atop();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_composite_solid_destination_atop");
}
try {
test_2d_composite_solid_destination_in();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_composite_solid_destination_in");
}
try {
test_2d_composite_solid_destination_out();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_composite_solid_destination_out");
}
try {
test_2d_composite_solid_destination_over();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_composite_solid_destination_over");
}
try {
test_2d_composite_solid_source_atop();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_composite_solid_source_atop");
}
try {
test_2d_composite_solid_source_in();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_composite_solid_source_in");
}
try {
test_2d_composite_solid_source_out();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_composite_solid_source_out");
}
try {
test_2d_composite_solid_source_over();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_composite_solid_source_over");
}
try {
test_2d_composite_transparent_copy();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_composite_transparent_copy");
}
try {
test_2d_composite_transparent_destination_atop();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_composite_transparent_destination_atop");
}
try {
test_2d_composite_transparent_destination_in();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_composite_transparent_destination_in");
}
try {
test_2d_composite_transparent_destination_out();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_composite_transparent_destination_out");
}
try {
test_2d_composite_transparent_destination_over();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_composite_transparent_destination_over");
}
try {
test_2d_composite_transparent_source_atop();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_composite_transparent_source_atop");
}
try {
test_2d_composite_transparent_source_in();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_composite_transparent_source_in");
}
try {
test_2d_composite_transparent_source_out();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_composite_transparent_source_out");
}
try {
test_2d_composite_transparent_source_over();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_composite_transparent_source_over");
}
try {
test_2d_composite_uncovered_fill_copy();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_composite_uncovered_fill_copy");
}
try {
test_2d_composite_uncovered_image_copy();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_composite_uncovered_image_copy");
}
try {
test_2d_composite_uncovered_pattern_copy();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_composite_uncovered_pattern_copy");
}
try {
test_2d_drawImage_3arg();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_drawImage_3arg");
}
try {
test_2d_drawImage_5arg();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_drawImage_5arg");
}
try {
test_2d_drawImage_9arg_basic();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_drawImage_9arg_basic");
}
try {
test_2d_drawImage_9arg_destpos();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_drawImage_9arg_destpos");
}
try {
test_2d_drawImage_9arg_destsize();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_drawImage_9arg_destsize");
}
try {
test_2d_drawImage_9arg_sourcepos();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_drawImage_9arg_sourcepos");
}
try {
test_2d_drawImage_9arg_sourcesize();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_drawImage_9arg_sourcesize");
}
try {
test_2d_drawImage_alpha();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_drawImage_alpha");
}
try {
test_2d_drawImage_animated_poster();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_drawImage_animated_poster");
}
try {
test_2d_drawImage_broken();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_drawImage_broken");
}
try {
test_2d_drawImage_canvas();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_drawImage_canvas");
}
try {
test_2d_drawImage_clip();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_drawImage_clip");
}
try {
test_2d_drawImage_composite();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_drawImage_composite");
}
try {
test_2d_drawImage_floatsource();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_drawImage_floatsource");
}
try {
test_2d_drawImage_incomplete();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_drawImage_incomplete");
}
try {
test_2d_drawImage_negativedest();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_drawImage_negativedest");
}
try {
test_2d_drawImage_negativesource();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_drawImage_negativesource");
}
try {
test_2d_drawImage_nonfinite();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_drawImage_nonfinite");
}
try {
test_2d_drawImage_nowrap();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_drawImage_nowrap");
}
try {
test_2d_drawImage_null();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_drawImage_null");
}
try {
test_2d_drawImage_path();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_drawImage_path");
}
try {
test_2d_drawImage_self_1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_drawImage_self_1");
}
try {
test_2d_drawImage_self_2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_drawImage_self_2");
}
try {
test_2d_drawImage_transform();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_drawImage_transform");
}
try {
test_2d_drawImage_wrongtype();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_drawImage_wrongtype");
}
try {
test_2d_drawImage_zerosource();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_drawImage_zerosource");
}
try {
test_2d_fillRect_basic();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillRect_basic");
}
try {
test_2d_fillRect_clip();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillRect_clip");
}
try {
test_2d_fillRect_negative();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillRect_negative");
}
try {
test_2d_fillRect_nonfinite();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillRect_nonfinite");
}
try {
test_2d_fillRect_path();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillRect_path");
}
try {
test_2d_fillRect_shadow();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillRect_shadow");
}
try {
test_2d_fillRect_transform();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillRect_transform");
}
try {
test_2d_fillRect_zero();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillRect_zero");
}
try {
test_2d_fillStyle_default();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_default");
}
try {
test_2d_fillStyle_get_semitransparent();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_get_semitransparent");
}
try {
test_2d_fillStyle_get_solid();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_get_solid");
}
try {
test_2d_fillStyle_get_transparent();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_get_transparent");
}
try {
test_2d_fillStyle_invalidstring();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_invalidstring");
}
try {
test_2d_fillStyle_invalidtype();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_invalidtype");
}
try {
test_2d_fillStyle_parse_current_basic();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_current_basic");
}
try {
test_2d_fillStyle_parse_current_changed();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_current_changed");
}
try {
test_2d_fillStyle_parse_current_removed();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_current_removed");
}
try {
test_2d_fillStyle_parse_hex3();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hex3");
}
try {
test_2d_fillStyle_parse_hex6();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hex6");
}
try {
test_2d_fillStyle_parse_hsl_1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsl_1");
}
try {
test_2d_fillStyle_parse_hsl_2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsl_2");
}
try {
test_2d_fillStyle_parse_hsl_3();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsl_3");
}
try {
test_2d_fillStyle_parse_hsl_4();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsl_4");
}
try {
test_2d_fillStyle_parse_hsl_5();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsl_5");
}
try {
test_2d_fillStyle_parse_hsl_clamp_1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsl_clamp_1");
}
try {
test_2d_fillStyle_parse_hsl_clamp_2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsl_clamp_2");
}
try {
test_2d_fillStyle_parse_hsl_clamp_3();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsl_clamp_3");
}
try {
test_2d_fillStyle_parse_hsl_clamp_4();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsl_clamp_4");
}
try {
test_2d_fillStyle_parse_hsla_1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsla_1");
}
try {
test_2d_fillStyle_parse_hsla_2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsla_2");
}
try {
test_2d_fillStyle_parse_hsla_clamp_1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsla_clamp_1");
}
try {
test_2d_fillStyle_parse_hsla_clamp_2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsla_clamp_2");
}
try {
test_2d_fillStyle_parse_hsla_clamp_3();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsla_clamp_3");
}
try {
test_2d_fillStyle_parse_hsla_clamp_4();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsla_clamp_4");
}
try {
test_2d_fillStyle_parse_hsla_clamp_5();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsla_clamp_5");
}
try {
test_2d_fillStyle_parse_hsla_clamp_6();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsla_clamp_6");
}
try {
test_2d_fillStyle_parse_html4();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_html4");
}
try {
test_2d_fillStyle_parse_invalid_hex3();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_hex3");
}
try {
test_2d_fillStyle_parse_invalid_hex6();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_hex6");
}
try {
test_2d_fillStyle_parse_invalid_hsl_1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_hsl_1");
}
try {
test_2d_fillStyle_parse_invalid_hsl_2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_hsl_2");
}
try {
test_2d_fillStyle_parse_invalid_hsl_3();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_hsl_3");
}
try {
test_2d_fillStyle_parse_invalid_hsl_4();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_hsl_4");
}
try {
test_2d_fillStyle_parse_invalid_hsl_5();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_hsl_5");
}
try {
test_2d_fillStyle_parse_invalid_hsla_1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_hsla_1");
}
try {
test_2d_fillStyle_parse_invalid_hsla_2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_hsla_2");
}
try {
test_2d_fillStyle_parse_invalid_name_1()
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_name_1");
}
try {
test_2d_fillStyle_parse_invalid_name_2()
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_name_2");
}
try {
test_2d_fillStyle_parse_invalid_name_3()
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_name_3");
}
try {
test_2d_fillStyle_parse_invalid_rgb_1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_rgb_1");
}
try {
test_2d_fillStyle_parse_invalid_rgb_2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_rgb_2");
}
try {
test_2d_fillStyle_parse_invalid_rgb_3();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_rgb_3");
}
try {
test_2d_fillStyle_parse_invalid_rgb_4();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_rgb_4");
}
try {
test_2d_fillStyle_parse_invalid_rgb_5();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_rgb_5");
}
try {
test_2d_fillStyle_parse_invalid_rgb_6();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_rgb_6");
}
try {
test_2d_fillStyle_parse_invalid_rgb_7();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_rgb_7");
}
try {
test_2d_fillStyle_parse_invalid_rgba_1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_rgba_1");
}
try {
test_2d_fillStyle_parse_invalid_rgba_2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_rgba_2");
}
try {
test_2d_fillStyle_parse_invalid_rgba_3();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_rgba_3");
}
try {
test_2d_fillStyle_parse_invalid_rgba_4();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_rgba_4");
}
try {
test_2d_fillStyle_parse_invalid_rgba_5();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_rgba_5");
}
try {
test_2d_fillStyle_parse_rgb_clamp_1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_rgb_clamp_1");
}
try {
test_2d_fillStyle_parse_rgb_clamp_2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_rgb_clamp_2");
}
try {
test_2d_fillStyle_parse_rgb_clamp_3();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_rgb_clamp_3");
}
try {
test_2d_fillStyle_parse_rgb_clamp_4();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_rgb_clamp_4");
}
try {
test_2d_fillStyle_parse_rgb_clamp_5();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_rgb_clamp_5");
}
try {
test_2d_fillStyle_parse_rgb_num();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_rgb_num");
}
try {
test_2d_fillStyle_parse_rgb_percent();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_rgb_percent");
}
try {
test_2d_fillStyle_parse_rgba_clamp_1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_rgba_clamp_1");
}
try {
test_2d_fillStyle_parse_rgba_clamp_2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_rgba_clamp_2");
}
try {
test_2d_fillStyle_parse_rgba_num_1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_rgba_num_1");
}
try {
test_2d_fillStyle_parse_rgba_num_2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_rgba_num_2");
}
try {
test_2d_fillStyle_parse_rgba_percent();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_rgba_percent");
}
try {
test_2d_fillStyle_parse_rgba_solid_1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_rgba_solid_1");
}
try {
test_2d_fillStyle_parse_rgba_solid_2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_rgba_solid_2");
}
try {
test_2d_fillStyle_parse_svg_1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_svg_1");
}
try {
test_2d_fillStyle_parse_svg_2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_svg_2");
}
try {
test_2d_fillStyle_parse_system();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_system");
}
try {
test_2d_fillStyle_parse_transparent_1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_transparent_1");
}
try {
test_2d_fillStyle_parse_transparent_2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_transparent_2");
}
try {
test_2d_getcontext_exists();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_getcontext_exists");
}
try {
test_2d_getcontext_shared();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_getcontext_shared");
}
try {
test_2d_getcontext_unique();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_getcontext_unique");
}
try {
test_2d_gradient_empty();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_gradient_empty");
}
try {
test_2d_gradient_interpolate_alpha();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_gradient_interpolate_alpha");
}
try {
test_2d_gradient_interpolate_colour();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_gradient_interpolate_colour");
}
try {
test_2d_gradient_interpolate_colouralpha();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_gradient_interpolate_colouralpha");
}
try {
test_2d_gradient_interpolate_multiple();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_gradient_interpolate_multiple");
}
try {
test_2d_gradient_interpolate_outside();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_gradient_interpolate_outside");
}
try {
test_2d_gradient_interpolate_overlap();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_gradient_interpolate_overlap");
}
try {
test_2d_gradient_interpolate_overlap2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_gradient_interpolate_overlap2");
}
try {
test_2d_gradient_interpolate_solid();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_gradient_interpolate_solid");
}
try {
test_2d_gradient_interpolate_vertical();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_gradient_interpolate_vertical");
}
try {
test_2d_gradient_interpolate_zerosize();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_gradient_interpolate_zerosize");
}
try {
test_2d_gradient_linear_nonfinite();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_gradient_linear_nonfinite");
}
try {
test_2d_gradient_linear_transform_1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_gradient_linear_transform_1");
}
try {
test_2d_gradient_linear_transform_2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_gradient_linear_transform_2");
}
try {
test_2d_gradient_linear_transform_3();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_gradient_linear_transform_3");
}
try {
test_2d_gradient_object_compare();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_gradient_object_compare");
}
try {
test_2d_gradient_object_crosscanvas();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_gradient_object_crosscanvas");
}
try {
test_2d_gradient_object_invalidcolour();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_gradient_object_invalidcolour");
}
try {
test_2d_gradient_object_invalidoffset();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_gradient_object_invalidoffset");
}
try {
test_2d_gradient_object_return();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_gradient_object_return");
}
try {
test_2d_gradient_object_type();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_gradient_object_type");
}
try {
test_2d_gradient_object_update();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_gradient_object_update");
}
try {
test_2d_gradient_radial_cone_bottom();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_gradient_radial_cone_bottom");
}
try {
test_2d_gradient_radial_cone_cylinder();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_gradient_radial_cone_cylinder");
}
try {
test_2d_gradient_radial_cone_shape1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_gradient_radial_cone_shape1");
}
try {
test_2d_gradient_radial_inside1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_gradient_radial_inside1");
}
try {
test_2d_gradient_radial_negative();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_gradient_radial_negative");
}
try {
test_2d_gradient_radial_nonfinite();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_gradient_radial_nonfinite");
}
try {
test_2d_gradient_radial_transform_1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_gradient_radial_transform_1");
}
try {
test_2d_gradient_radial_transform_2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_gradient_radial_transform_2");
}
try {
test_2d_gradient_radial_transform_3();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_gradient_radial_transform_3");
}
try {
test_2d_imageData_create_basic();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_imageData_create_basic");
}
try {
test_2d_imageData_create1_basic();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_imageData_create1_basic");
}
try {
test_2d_imageData_create_initial();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_imageData_create_initial");
}
try {
test_2d_imageData_create1_initial();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_imageData_create1_initial");
}
try {
test_2d_imageData_create_large();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_imageData_create_large");
}
try {
test_2d_imageData_create_negative();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_imageData_create_negative");
}
try {
test_2d_imageData_create_nonfinite();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_imageData_create_nonfinite");
}
try {
test_2d_imageData_create_round();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_imageData_create_round");
}
try {
test_2d_imageData_create_tiny();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_imageData_create_tiny");
}
try {
test_2d_imageData_create_type();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_imageData_create_type");
}
try {
test_2d_imageData_create1_type();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_imageData_create1_type");
}
try {
test_2d_imageData_create_zero();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_imageData_create_zero");
}
try {
test_2d_imageData_create1_zero();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_imageData_create1_zero");
}
try {
test_2d_imageData_get_basic();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_imageData_get_basic");
}
try {
test_2d_imageData_get_clamp();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_imageData_get_clamp");
}
try {
test_2d_imageData_get_nonfinite();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_imageData_get_nonfinite");
}
try {
test_2d_imageData_get_nonpremul();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_imageData_get_nonpremul");
}
try {
test_2d_imageData_get_order_alpha();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_imageData_get_order_alpha");
}
try {
test_2d_imageData_get_order_cols();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_imageData_get_order_cols");
}
try {
test_2d_imageData_get_order_rgb();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_imageData_get_order_rgb");
}
try {
test_2d_imageData_get_order_rows();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_imageData_get_order_rows");
}
try {
test_2d_imageData_get_range();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_imageData_get_range");
}
try {
test_2d_imageData_get_source_negative();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_imageData_get_source_negative");
}
try {
test_2d_imageData_get_source_outside();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_imageData_get_source_outside");
}
try {
test_2d_imageData_get_source_size();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_imageData_get_source_size");
}
try {
test_2d_imageData_get_tiny();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_imageData_get_tiny");
}
try {
test_2d_imageData_get_type();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_imageData_get_type");
}
try {
test_2d_imageData_get_unaffected();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_imageData_get_unaffected");
}
try {
test_2d_imageData_get_zero();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_imageData_get_zero");
}
try {
test_2d_imageData_object_clamp();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_imageData_object_clamp");
}
try {
test_2d_imageData_object_ctor();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_imageData_object_ctor");
}
try {
test_2d_imageData_object_nan();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_imageData_object_nan");
}
try {
test_2d_imageData_object_properties();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_imageData_object_properties");
}
try {
test_2d_imageData_object_readonly();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_imageData_object_readonly");
}
try {
test_2d_imageData_object_round();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_imageData_object_round");
}
try {
test_2d_imageData_object_set();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_imageData_object_set");
}
try {
test_2d_imageData_object_string();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_imageData_object_string");
}
try {
test_2d_imageData_object_undefined();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_imageData_object_undefined");
}
try {
test_2d_imageData_put_alpha();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_imageData_put_alpha");
}
try {
test_2d_imageData_put_basic();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_imageData_put_basic");
}
try {
test_2d_imageData_put_clip();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_imageData_put_clip");
}
try {
test_2d_imageData_put_created();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_imageData_put_created");
}
try {
test_2d_imageData_put_cross();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_imageData_put_cross");
}
try {
test_2d_imageData_put_dirty_negative();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_imageData_put_dirty_negative");
}
try {
test_2d_imageData_put_dirty_outside();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_imageData_put_dirty_outside");
}
try {
test_2d_imageData_put_dirty_rect1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_imageData_put_dirty_rect1");
}
try {
test_2d_imageData_put_dirty_rect2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_imageData_put_dirty_rect2");
}
try {
test_2d_imageData_put_dirty_zero();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_imageData_put_dirty_zero");
}
try {
test_2d_imageData_put_modified();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_imageData_put_modified");
}
try {
test_2d_imageData_put_nonfinite();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_imageData_put_nonfinite");
}
try {
test_2d_imageData_put_null();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_imageData_put_null");
}
try {
test_2d_imageData_put_path();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_imageData_put_path");
}
try {
test_2d_imageData_put_unaffected();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_imageData_put_unaffected");
}
try {
test_2d_imageData_put_unchanged();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_imageData_put_unchanged");
}
try {
test_2d_imageData_put_wrongtype();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_imageData_put_wrongtype");
}
try {
test_2d_line_cap_butt();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_line_cap_butt");
}
try {
test_2d_line_cap_invalid();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_line_cap_invalid");
}
try {
test_2d_line_cap_open();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_line_cap_open");
}
try {
test_2d_line_cap_round();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_line_cap_round");
}
try {
test_2d_line_cap_square();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_line_cap_square");
}
try {
test_2d_line_cross();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_line_cross");
}
try {
test_2d_line_defaults();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_line_defaults");
}
try {
test_2d_line_join_bevel();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_line_join_bevel");
}
try {
test_2d_line_join_closed();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_line_join_closed");
}
try {
test_2d_line_join_invalid();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_line_join_invalid");
}
try {
test_2d_line_join_miter();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_line_join_miter");
}
try {
test_2d_line_join_open();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_line_join_open");
}
try {
test_2d_line_join_round();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_line_join_round");
}
try {
test_2d_line_miter_acute();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_line_miter_acute");
}
try {
test_2d_line_miter_exceeded();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_line_miter_exceeded");
}
try {
test_2d_line_miter_invalid();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_line_miter_invalid");
}
try {
test_2d_line_miter_lineedge();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_line_miter_lineedge");
}
try {
test_2d_line_miter_obtuse();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_line_miter_obtuse");
}
try {
test_2d_line_miter_rightangle();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_line_miter_rightangle");
}
try {
test_2d_line_miter_within();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_line_miter_within");
}
try {
test_2d_line_union();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_line_union");
}
try {
test_2d_line_width_basic();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_line_width_basic");
}
try {
test_2d_line_width_invalid();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_line_width_invalid");
}
try {
test_2d_line_width_transformed();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_line_width_transformed");
}
try {
test_2d_missingargs();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_missingargs");
}
try {
test_2d_path_arc_angle_1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_arc_angle_1");
}
try {
test_2d_path_arc_angle_2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_arc_angle_2");
}
try {
test_2d_path_arc_angle_3();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_arc_angle_3");
}
try {
test_2d_path_arc_angle_4();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_arc_angle_4");
}
try {
test_2d_path_arc_angle_5();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_arc_angle_5");
}
try {
test_2d_path_arc_angle_6();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_arc_angle_6");
}
try {
test_2d_path_arc_empty();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_arc_empty");
}
try {
test_2d_path_arc_end();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_arc_end");
}
try {
test_2d_path_arc_negative();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_arc_negative");
}
try {
test_2d_path_arc_nonempty();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_arc_nonempty");
}
try {
test_2d_path_arc_nonfinite();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_arc_nonfinite");
}
try {
test_2d_path_arc_scale_1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_arc_scale_1");
}
try {
test_2d_path_arc_scale_2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_arc_scale_2");
}
try {
test_2d_path_arc_selfintersect_1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_arc_selfintersect_1");
}
try {
test_2d_path_arc_selfintersect_2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_arc_selfintersect_2");
}
try {
test_2d_path_arc_shape_1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_arc_shape_1");
}
try {
test_2d_path_arc_shape_2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_arc_shape_2");
}
try {
test_2d_path_arc_shape_4();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_arc_shape_4");
}
try {
test_2d_path_arc_shape_5();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_arc_shape_5");
}
try {
test_2d_path_arc_twopie_1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_arc_twopie_1");
}
try {
test_2d_path_arc_twopie_2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_arc_twopie_2");
}
try {
test_2d_path_arc_twopie_3();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_arc_twopie_3");
}
try {
test_2d_path_arc_twopie_4();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_arc_twopie_4");
}
try {
test_2d_path_arc_zero_1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_arc_zero_1");
}
try {
test_2d_path_arc_zero_2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_arc_zero_2");
}
try {
test_2d_path_arc_zeroradius();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_arc_zeroradius");
}
try {
test_2d_path_arcTo_coincide_1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_arcTo_coincide_1");
}
try {
test_2d_path_arcTo_coincide_2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_arcTo_coincide_2");
}
try {
test_2d_path_arcTo_collinear_1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_arcTo_collinear_1");
}
try {
test_2d_path_arcTo_collinear_2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_arcTo_collinear_2");
}
try {
test_2d_path_arcTo_collinear_3();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_arcTo_collinear_3");
}
try {
test_2d_path_arcTo_emptysubpath();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_arcTo_emptysubpath");
}
try {
test_2d_path_arcTo_negative();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_arcTo_negative");
}
try {
test_2d_path_arcTo_nonfinite();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_arcTo_nonfinite");
}
try {
test_2d_path_arcTo_scale();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_arcTo_scale");
}
try {
test_2d_path_arcTo_shape_curve1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_arcTo_shape_curve1");
}
try {
test_2d_path_arcTo_shape_curve2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_arcTo_shape_curve2");
}
try {
test_2d_path_arcTo_shape_end();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_arcTo_shape_end");
}
try {
test_2d_path_arcTo_shape_start();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_arcTo_shape_start");
}
try {
test_2d_path_arcTo_transformation();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_arcTo_transformation");
}
try {
test_2d_path_arcTo_zero_1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_arcTo_zero_1");
}
try {
test_2d_path_arcTo_zero_2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_arcTo_zero_2");
}
try {
test_2d_path_beginPath();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_beginPath");
}
try {
test_2d_path_bezierCurveTo_basic();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_bezierCurveTo_basic");
}
try {
test_2d_path_bezierCurveTo_emptysubpath();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_bezierCurveTo_emptysubpath");
}
try {
test_2d_path_bezierCurveTo_nonfinite();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_bezierCurveTo_nonfinite");
}
try {
test_2d_path_bezierCurveTo_scaled();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_bezierCurveTo_scaled");
}
try {
test_2d_path_bezierCurveTo_shape();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_bezierCurveTo_shape");
}
try {
test_2d_path_clip_basic_1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_clip_basic_1");
}
try {
test_2d_path_clip_basic_2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_clip_basic_2");
}
try {
test_2d_path_clip_empty();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_clip_empty");
}
try {
test_2d_path_clip_intersect();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_clip_intersect");
}
try {
test_2d_path_clip_unaffected();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_clip_unaffected");
}
try {
test_2d_path_clip_winding_1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_clip_winding_1");
}
try {
test_2d_path_clip_winding_2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_clip_winding_2");
}
try {
test_2d_path_closePath_empty();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_closePath_empty");
}
try {
test_2d_path_closePath_newline();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_closePath_newline");
}
try {
test_2d_path_closePath_nextpoint();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_closePath_nextpoint");
}
try {
test_2d_path_fill_closed_basic();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_fill_closed_basic");
}
try {
test_2d_path_fill_closed_unaffected();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_fill_closed_unaffected");
}
try {
test_2d_path_fill_overlap();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_fill_overlap");
}
try {
test_2d_path_fill_winding_add();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_fill_winding_add");
}
try {
test_2d_path_fill_winding_subtract_1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_fill_winding_subtract_1");
}
try {
test_2d_path_fill_winding_subtract_2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_fill_winding_subtract_2");
}
try {
test_2d_path_fill_winding_subtract_3();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_fill_winding_subtract_3");
}
try {
test_2d_path_initial();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_initial");
}
try {
test_2d_path_isPointInPath_arc();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_arc");
}
try {
test_2d_path_isPointInPath_basic_1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_basic_1");
}
try {
test_2d_path_isPointInPath_basic_2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_basic_2");
}
try {
test_2d_path_isPointInPath_bezier();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_bezier");
}
try {
test_2d_path_isPointInPath_bigarc();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_bigarc");
}
try {
test_2d_path_isPointInPath_edge();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_edge");
}
try {
test_2d_path_isPointInPath_empty();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_empty");
}
try {
test_2d_path_isPointInPath_nonfinite();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_nonfinite");
}
try {
test_2d_path_isPointInPath_outside();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_outside");
}
try {
test_2d_path_isPointInPath_subpath();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_subpath");
}
try {
test_2d_path_isPointInPath_transform_1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_transform_1");
}
try {
test_2d_path_isPointInPath_transform_2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_transform_2");
}
try {
test_2d_path_isPointInPath_transform_3();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_transform_3");
}
try {
test_2d_path_isPointInPath_unclosed();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_unclosed");
}
try {
test_2d_path_isPointInPath_winding();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_winding");
}
try {
test_2d_path_lineTo_basic();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_lineTo_basic");
}
try {
test_2d_path_lineTo_emptysubpath();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_lineTo_emptysubpath");
}
try {
test_2d_path_lineTo_nextpoint();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_lineTo_nextpoint");
}
try {
test_2d_path_lineTo_nonfinite();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_lineTo_nonfinite");
}
try {
test_2d_path_moveTo_basic();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_moveTo_basic");
}
try {
test_2d_path_moveTo_multiple();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_moveTo_multiple");
}
try {
test_2d_path_moveTo_newsubpath();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_moveTo_newsubpath");
}
try {
test_2d_path_moveTo_nonfinite();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_moveTo_nonfinite");
}
try {
test_2d_path_quadraticCurveTo_basic();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_quadraticCurveTo_basic");
}
try {
test_2d_path_quadraticCurveTo_emptysubpath();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_quadraticCurveTo_emptysubpath");
}
try {
test_2d_path_quadraticCurveTo_nonfinite();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_quadraticCurveTo_nonfinite");
}
try {
test_2d_path_quadraticCurveTo_scaled();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_quadraticCurveTo_scaled");
}
try {
test_2d_path_quadraticCurveTo_shape();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_quadraticCurveTo_shape");
}
try {
test_2d_path_rect_basic();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_rect_basic");
}
try {
test_2d_path_rect_closed();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_rect_closed");
}
try {
test_2d_path_rect_end_1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_rect_end_1");
}
try {
test_2d_path_rect_end_2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_rect_end_2");
}
try {
test_2d_path_rect_negative();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_rect_negative");
}
try {
test_2d_path_rect_newsubpath();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_rect_newsubpath");
}
try {
test_2d_path_rect_nonfinite();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_rect_nonfinite");
}
try {
test_2d_path_rect_winding();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_rect_winding");
}
try {
test_2d_path_rect_zero_1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_rect_zero_1");
}
try {
test_2d_path_rect_zero_2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_rect_zero_2");
}
try {
test_2d_path_rect_zero_3();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_rect_zero_3");
}
try {
test_2d_path_rect_zero_4();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_rect_zero_4");
}
try {
test_2d_path_rect_zero_5();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_rect_zero_5");
}
try {
test_2d_path_stroke_empty();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_stroke_empty");
}
try {
test_2d_path_stroke_overlap();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_stroke_overlap");
}
try {
test_2d_path_stroke_prune_arc();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_stroke_prune_arc");
}
try {
test_2d_path_stroke_prune_closed();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_stroke_prune_closed");
}
try {
test_2d_path_stroke_prune_corner();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_stroke_prune_corner");
}
try {
test_2d_path_stroke_prune_curve();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_stroke_prune_curve");
}
try {
test_2d_path_stroke_prune_line();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_stroke_prune_line");
}
try {
test_2d_path_stroke_prune_rect();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_stroke_prune_rect");
}
try {
test_2d_path_stroke_scale1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_stroke_scale1");
}
try {
test_2d_path_stroke_scale2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_stroke_scale2");
}
try {
test_2d_path_stroke_skew();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_stroke_skew");
}
try {
test_2d_path_stroke_unaffected();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_stroke_unaffected");
}
try {
test_2d_path_stroke_union();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_stroke_union");
}
try {
test_2d_path_transformation_basic();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_transformation_basic");
}
try {
test_2d_path_transformation_changing();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_transformation_changing");
}
try {
test_2d_path_transformation_multiple();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_transformation_multiple");
}
try {
test_2d_pattern_animated_gif();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_pattern_animated_gif");
}
try {
test_2d_pattern_basic_canvas();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_pattern_basic_canvas");
}
try {
test_2d_pattern_basic_image();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_pattern_basic_image");
}
try {
test_2d_pattern_basic_nocontext();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_pattern_basic_nocontext");
}
try {
test_2d_pattern_basic_type();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_pattern_basic_type");
}
try {
test_2d_pattern_basic_zerocanvas();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_pattern_basic_zerocanvas");
}
try {
test_2d_pattern_crosscanvas();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_pattern_crosscanvas");
}
try {
test_2d_pattern_image_null();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_pattern_image_null");
}
try {
test_2d_pattern_image_string();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_pattern_image_string");
}
try {
test_2d_pattern_image_undefined();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_pattern_image_undefined");
}
try {
test_2d_pattern_modify_canvas1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_pattern_modify_canvas1");
}
try {
test_2d_pattern_modify_canvas2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_pattern_modify_canvas2");
}
try {
test_2d_pattern_modify_image1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_pattern_modify_image1");
}
try {
test_2d_pattern_modify_image2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_pattern_modify_image2");
}
try {
test_2d_pattern_paint_norepeat_basic();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_pattern_paint_norepeat_basic");
}
try {
test_2d_pattern_paint_norepeat_coord1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_pattern_paint_norepeat_coord1");
}
try {
test_2d_pattern_paint_norepeat_coord2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_pattern_paint_norepeat_coord2");
}
try {
test_2d_pattern_paint_norepeat_coord3();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_pattern_paint_norepeat_coord3");
}
try {
test_2d_pattern_paint_norepeat_outside();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_pattern_paint_norepeat_outside");
}
try {
test_2d_pattern_paint_orientation_canvas();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_pattern_paint_orientation_canvas");
}
try {
test_2d_pattern_paint_orientation_image();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_pattern_paint_orientation_image");
}
try {
test_2d_pattern_paint_repeat_basic();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_pattern_paint_repeat_basic");
}
try {
test_2d_pattern_paint_repeat_coord1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_pattern_paint_repeat_coord1");
}
try {
test_2d_pattern_paint_repeat_coord2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_pattern_paint_repeat_coord2");
}
try {
test_2d_pattern_paint_repeat_coord3();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_pattern_paint_repeat_coord3");
}
try {
test_2d_pattern_paint_repeat_outside();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_pattern_paint_repeat_outside");
}
try {
test_2d_pattern_paint_repeatx_basic();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_pattern_paint_repeatx_basic");
}
try {
test_2d_pattern_paint_repeatx_coord1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_pattern_paint_repeatx_coord1");
}
try {
test_2d_pattern_paint_repeatx_outside();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_pattern_paint_repeatx_outside");
}
try {
test_2d_pattern_paint_repeaty_basic();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_pattern_paint_repeaty_basic");
}
try {
test_2d_pattern_paint_repeaty_coord1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_pattern_paint_repeaty_coord1");
}
try {
test_2d_pattern_paint_repeaty_outside();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_pattern_paint_repeaty_outside");
}
try {
test_2d_pattern_repeat_case();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_pattern_repeat_case");
}
try {
test_2d_pattern_repeat_empty();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_pattern_repeat_empty");
}
try {
test_2d_pattern_repeat_null();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_pattern_repeat_null");
}
try {
test_2d_pattern_repeat_nullsuffix();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_pattern_repeat_nullsuffix");
}
try {
test_2d_pattern_repeat_undefined();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_pattern_repeat_undefined");
}
try {
test_2d_pattern_repeat_unrecognised();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_pattern_repeat_unrecognised");
}
try {
test_2d_scaled();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_scaled");
}
try {
test_2d_shadow_alpha_1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_shadow_alpha_1");
}
try {
test_2d_shadow_alpha_2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_shadow_alpha_2");
}
try {
test_2d_shadow_alpha_3();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_shadow_alpha_3");
}
try {
test_2d_shadow_alpha_4();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_shadow_alpha_4");
}
try {
test_2d_shadow_alpha_5();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_shadow_alpha_5");
}
try {
test_2d_shadow_attributes_shadowBlur_1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_shadow_attributes_shadowBlur_1");
}
try {
test_2d_shadow_attributes_shadowBlur_2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_shadow_attributes_shadowBlur_2");
}
try {
test_2d_shadow_attributes_shadowColor_1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_shadow_attributes_shadowColor_1");
}
try {
test_2d_shadow_attributes_shadowColor_2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_shadow_attributes_shadowColor_2");
}
try {
test_2d_shadow_attributes_shadowOffset_1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_shadow_attributes_shadowOffset_1");
}
try {
test_2d_shadow_attributes_shadowOffset_2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_shadow_attributes_shadowOffset_2");
}
try {
test_2d_shadow_basic_1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_shadow_basic_1");
}
try {
test_2d_shadow_basic_2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_shadow_basic_2");
}
try {
test_2d_shadow_blur_high();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_shadow_blur_high");
}
try {
test_2d_shadow_blur_low();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_shadow_blur_low");
}
try {
test_2d_shadow_canvas_alpha();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_shadow_canvas_alpha");
}
try {
test_2d_shadow_canvas_basic();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_shadow_canvas_basic");
}
try {
test_2d_shadow_canvas_transparent_1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_shadow_canvas_transparent_1");
}
try {
test_2d_shadow_canvas_transparent_2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_shadow_canvas_transparent_2");
}
try {
test_2d_shadow_clip_1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_shadow_clip_1");
}
try {
test_2d_shadow_clip_2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_shadow_clip_2");
}
try {
test_2d_shadow_clip_3();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_shadow_clip_3");
}
try {
test_2d_shadow_composite_1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_shadow_composite_1");
}
try {
test_2d_shadow_composite_2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_shadow_composite_2");
}
try {
test_2d_shadow_gradient_alpha();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_shadow_gradient_alpha");
}
try {
test_2d_shadow_gradient_basic();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_shadow_gradient_basic");
}
try {
test_2d_shadow_gradient_transparent_1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_shadow_gradient_transparent_1");
}
try {
test_2d_shadow_gradient_transparent_2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_shadow_gradient_transparent_2");
}
try {
test_2d_shadow_image_alpha();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_shadow_image_alpha");
}
try {
test_2d_shadow_image_basic();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_shadow_image_basic");
}
try {
test_2d_shadow_image_scale();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_shadow_image_scale");
}
try {
test_2d_shadow_image_section();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_shadow_image_section");
}
try {
test_2d_shadow_image_transparent_1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_shadow_image_transparent_1");
}
try {
test_2d_shadow_image_transparent_2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_shadow_image_transparent_2");
}
try {
test_2d_shadow_offset_negativeX();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_shadow_offset_negativeX");
}
try {
test_2d_shadow_offset_negativeY();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_shadow_offset_negativeY");
}
try {
test_2d_shadow_offset_positiveX();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_shadow_offset_positiveX");
}
try {
test_2d_shadow_offset_positiveY();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_shadow_offset_positiveY");
}
try {
test_2d_shadow_outside();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_shadow_outside");
}
try {
test_2d_shadow_pattern_alpha();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_shadow_pattern_alpha");
}
try {
test_2d_shadow_pattern_basic();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_shadow_pattern_basic");
}
try {
test_2d_shadow_pattern_transparent_1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_shadow_pattern_transparent_1");
}
try {
test_2d_shadow_pattern_transparent_2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_shadow_pattern_transparent_2");
}
try {
test_2d_shadow_stroke_basic();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_shadow_stroke_basic");
}
try {
test_2d_shadow_stroke_cap_1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_shadow_stroke_cap_1");
}
try {
test_2d_shadow_stroke_cap_2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_shadow_stroke_cap_2");
}
try {
test_2d_shadow_stroke_join_1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_shadow_stroke_join_1");
}
try {
test_2d_shadow_stroke_join_2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_shadow_stroke_join_2");
}
try {
test_2d_shadow_stroke_join_3();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_shadow_stroke_join_3");
}
try {
test_2d_shadow_transform_1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_shadow_transform_1");
}
try {
test_2d_shadow_transform_2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_shadow_transform_2");
}
try {
test_2d_state_saverestore_bitmap();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_state_saverestore_bitmap");
}
try {
test_2d_state_saverestore_clip();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_state_saverestore_clip");
}
try {
test_2d_state_saverestore_fillStyle();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_state_saverestore_fillStyle");
}
try {
test_2d_state_saverestore_globalAlpha();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_state_saverestore_globalAlpha");
}
try {
test_2d_state_saverestore_globalCompositeOperation();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_state_saverestore_globalCompositeOperation");
}
try {
test_2d_state_saverestore_lineCap();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_state_saverestore_lineCap");
}
try {
test_2d_state_saverestore_lineJoin();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_state_saverestore_lineJoin");
}
try {
test_2d_state_saverestore_lineWidth();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_state_saverestore_lineWidth");
}
try {
test_2d_state_saverestore_miterLimit();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_state_saverestore_miterLimit");
}
try {
test_2d_state_saverestore_path();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_state_saverestore_path");
}
try {
test_2d_state_saverestore_shadowBlur();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_state_saverestore_shadowBlur");
}
try {
test_2d_state_saverestore_shadowColor();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_state_saverestore_shadowColor");
}
try {
test_2d_state_saverestore_shadowOffsetX();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_state_saverestore_shadowOffsetX");
}
try {
test_2d_state_saverestore_shadowOffsetY();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_state_saverestore_shadowOffsetY");
}
try {
test_2d_state_saverestore_stack();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_state_saverestore_stack");
}
try {
test_2d_state_saverestore_stackdepth();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_state_saverestore_stackdepth");
}
try {
test_2d_state_saverestore_strokeStyle();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_state_saverestore_strokeStyle");
}
try {
test_2d_state_saverestore_transformation();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_state_saverestore_transformation");
}
try {
test_2d_state_saverestore_underflow();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_state_saverestore_underflow");
}
try {
test_2d_strokeRect_basic();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_strokeRect_basic");
}
try {
test_2d_strokeRect_clip();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_strokeRect_clip");
}
try {
test_2d_strokeRect_globalalpha();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_strokeRect_globalalpha");
}
try {
test_2d_strokeRect_globalcomposite();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_strokeRect_globalcomposite");
}
try {
test_2d_strokeRect_negative();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_strokeRect_negative");
}
try {
test_2d_strokeRect_nonfinite();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_strokeRect_nonfinite");
}
try {
test_2d_strokeRect_path();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_strokeRect_path");
}
try {
test_2d_strokeRect_shadow();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_strokeRect_shadow");
}
try {
test_2d_strokeRect_transform();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_strokeRect_transform");
}
try {
test_2d_strokeRect_zero_1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_strokeRect_zero_1");
}
try {
test_2d_strokeRect_zero_2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_strokeRect_zero_2");
}
try {
test_2d_strokeRect_zero_3();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_strokeRect_zero_3");
}
try {
test_2d_strokeRect_zero_4();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_strokeRect_zero_4");
}
try {
test_2d_strokeStyle_default();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_strokeStyle_default");
}
try {
test_2d_text_align_default();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_text_align_default");
}
try {
test_2d_text_align_invalid();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_text_align_invalid");
}
try {
test_2d_text_baseline_default();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_text_baseline_default");
}
try {
test_2d_text_baseline_invalid();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_text_baseline_invalid");
}
try {
test_2d_transformation_order();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_transformation_order");
}
try {
test_2d_transformation_rotate_direction();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_transformation_rotate_direction");
}
try {
test_2d_transformation_rotate_nonfinite();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_transformation_rotate_nonfinite");
}
try {
test_2d_transformation_rotate_radians();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_transformation_rotate_radians");
}
try {
test_2d_transformation_rotate_wrap();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_transformation_rotate_wrap");
}
try {
test_2d_transformation_rotate_wrapnegative();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_transformation_rotate_wrapnegative");
}
try {
test_2d_transformation_rotate_zero();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_transformation_rotate_zero");
}
try {
test_2d_transformation_scale_basic();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_transformation_scale_basic");
}
try {
test_2d_transformation_scale_large();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_transformation_scale_large");
}
try {
test_2d_transformation_scale_multiple();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_transformation_scale_multiple");
}
try {
test_2d_transformation_scale_negative();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_transformation_scale_negative");
}
try {
test_2d_transformation_scale_nonfinite();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_transformation_scale_nonfinite");
}
try {
test_2d_transformation_scale_zero();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_transformation_scale_zero");
}
try {
test_2d_transformation_setTransform_multiple();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_transformation_setTransform_multiple");
}
try {
test_2d_transformation_setTransform_nonfinite();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_transformation_setTransform_nonfinite");
}
try {
test_2d_transformation_setTransform_skewed();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_transformation_setTransform_skewed");
}
try {
test_2d_transformation_transform_identity();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_transformation_transform_identity");
}
try {
test_2d_transformation_transform_multiply();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_transformation_transform_multiply");
}
try {
test_2d_transformation_transform_nonfinite();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_transformation_transform_nonfinite");
}
try {
test_2d_transformation_transform_skewed();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_transformation_transform_skewed");
}
try {
test_2d_transformation_translate_basic();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_transformation_translate_basic");
}
try {
test_2d_transformation_translate_nonfinite();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_transformation_translate_nonfinite");
}
try {
test_2d_type_exists();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_type_exists");
}
try {
test_2d_type_extend();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_type_extend");
}
try {
test_2d_type_prototype();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_type_prototype");
}
try {
test_2d_type_replace();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_type_replace");
}
try {
test_2d_voidreturn();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_voidreturn");
}
try {
test_bug397524();
} catch (e) {
ok(false, "unexpected exception thrown in: test_bug397524");
}
try {
test_bug405982();
} catch (e) {
ok(false, "unexpected exception thrown in: test_bug405982");
}
try {
test_context_arguments_extra();
} catch (e) {
ok(false, "unexpected exception thrown in: test_context_arguments_extra");
}
try {
test_context_arguments_missing();
} catch (e) {
ok(false, "unexpected exception thrown in: test_context_arguments_missing");
}
try {
test_context_casesensitive();
} catch (e) {
ok(false, "unexpected exception thrown in: test_context_casesensitive");
}
try {
test_context_emptystring();
} catch (e) {
ok(false, "unexpected exception thrown in: test_context_emptystring");
}
try {
test_context_unrecognised_badname();
} catch (e) {
ok(false, "unexpected exception thrown in: test_context_unrecognised_badname");
}
try {
test_context_unrecognised_badsuffix();
} catch (e) {
ok(false, "unexpected exception thrown in: test_context_unrecognised_badsuffix");
}
try {
test_context_unrecognised_nullsuffix();
} catch (e) {
ok(false, "unexpected exception thrown in: test_context_unrecognised_nullsuffix");
}
try {
test_context_unrecognised_unicode();
} catch (e) {
ok(false, "unexpected exception thrown in: test_context_unrecognised_unicode");
}
try {
test_fallback_basic();
} catch (e) {
ok(false, "unexpected exception thrown in: test_fallback_basic");
}
try {
test_fallback_multiple();
} catch (e) {
ok(false, "unexpected exception thrown in: test_fallback_multiple");
}
try {
test_fallback_nested();
} catch (e) {
ok(false, "unexpected exception thrown in: test_fallback_nested");
}
try {
test_initial_colour();
} catch (e) {
ok(false, "unexpected exception thrown in: test_initial_colour");
}
try {
test_initial_reset_2dstate();
} catch (e) {
ok(false, "unexpected exception thrown in: test_initial_reset_2dstate");
}
try {
test_initial_reset_clip();
} catch (e) {
ok(false, "unexpected exception thrown in: test_initial_reset_clip");
}
try {
test_initial_reset_different();
} catch (e) {
ok(false, "unexpected exception thrown in: test_initial_reset_different");
}
try {
test_initial_reset_gradient();
} catch (e) {
ok(false, "unexpected exception thrown in: test_initial_reset_gradient");
}
try {
test_initial_reset_path();
} catch (e) {
ok(false, "unexpected exception thrown in: test_initial_reset_path");
}
try {
test_initial_reset_pattern();
} catch (e) {
ok(false, "unexpected exception thrown in: test_initial_reset_pattern");
}
try {
test_initial_reset_same();
} catch (e) {
ok(false, "unexpected exception thrown in: test_initial_reset_same");
}
try {
test_initial_reset_transform();
} catch (e) {
ok(false, "unexpected exception thrown in: test_initial_reset_transform");
}
try {
test_size_attributes_default();
} catch (e) {
ok(false, "unexpected exception thrown in: test_size_attributes_default");
}
try {
test_size_attributes();
} catch (e) {
ok(false, "unexpected exception thrown in: test_size_attributes");
}
try {
test_size_attributes_parse_badsuffix();
} catch (e) {
ok(false, "unexpected exception thrown in: test_size_attributes_parse_badsuffix");
}
try {
test_size_attributes_parse_floatsuffix();
} catch (e) {
ok(false, "unexpected exception thrown in: test_size_attributes_parse_floatsuffix");
}
try {
test_size_attributes_parse_negative();
} catch (e) {
ok(false, "unexpected exception thrown in: test_size_attributes_parse_negative");
}
try {
test_size_attributes_parse_nonnumber();
} catch (e) {
ok(false, "unexpected exception thrown in: test_size_attributes_parse_nonnumber");
}
try {
test_size_attributes_parse_percentsuffix();
} catch (e) {
ok(false, "unexpected exception thrown in: test_size_attributes_parse_percentsuffix");
}
try {
test_size_attributes_parse_whitespace();
} catch (e) {
ok(false, "unexpected exception thrown in: test_size_attributes_parse_whitespace");
}
try {
test_size_attributes_parse_zero();
} catch (e) {
ok(false, "unexpected exception thrown in: test_size_attributes_parse_zero");
}
try {
test_size_attributes_parse_zerosuffix();
} catch (e) {
ok(false, "unexpected exception thrown in: test_size_attributes_parse_zerosuffix");
}
try {
test_size_attributes_reflect_1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_size_attributes_reflect_1");
}
try {
test_size_attributes_reflect_2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_size_attributes_reflect_2");
}
try {
test_size_attributes_removed();
} catch (e) {
ok(false, "unexpected exception thrown in: test_size_attributes_removed");
}
try {
test_size_attributes_setAttribute_badsuffix();
} catch (e) {
ok(false, "unexpected exception thrown in: test_size_attributes_setAttribute_badsuffix");
}
try {
test_size_attributes_setAttribute_floatsuffix();
} catch (e) {
ok(false, "unexpected exception thrown in: test_size_attributes_setAttribute_floatsuffix");
}
try {
test_size_attributes_setAttribute_negative();
} catch (e) {
ok(false, "unexpected exception thrown in: test_size_attributes_setAttribute_negative");
}
try {
test_size_attributes_setAttribute_nonnumber();
} catch (e) {
ok(false, "unexpected exception thrown in: test_size_attributes_setAttribute_nonnumber");
}
try {
test_size_attributes_setAttribute_percentsuffix();
} catch (e) {
ok(false, "unexpected exception thrown in: test_size_attributes_setAttribute_percentsuffix");
}
try {
test_size_attributes_setAttribute_whitespace();
} catch (e) {
ok(false, "unexpected exception thrown in: test_size_attributes_setAttribute_whitespace");
}
try {
test_size_attributes_setAttribute_zero();
} catch (e) {
ok(false, "unexpected exception thrown in: test_size_attributes_setAttribute_zero");
}
try {
test_size_attributes_setAttribute_zerosuffix();
} catch (e) {
ok(false, "unexpected exception thrown in: test_size_attributes_setAttribute_zerosuffix");
}
try {
test_size_attributes_style();
} catch (e) {
ok(false, "unexpected exception thrown in: test_size_attributes_style");
}
try {
test_size_attributes_type_get();
} catch (e) {
ok(false, "unexpected exception thrown in: test_size_attributes_type_get");
}
try {
test_size_attributes_type_set();
} catch (e) {
ok(false, "unexpected exception thrown in: test_size_attributes_type_set");
}
try {
test_text_font();
} catch (e) {
ok(false, "unexpected exception thrown in: test_text_font");
}
try {
test_text_measure();
} catch (e) {
ok(false, "unexpected exception thrown in: test_text_measure");
}
try {
test_text_space_replace();
} catch (e) {
ok(false, "unexpected exception thrown in: test_text_space_replace");
}
try {
test_text_textAlign();
} catch (e) {
ok(false, "unexpected exception thrown in: test_text_textAlign");
}
try {
test_text_textBaseline();
} catch (e) {
ok(false, "unexpected exception thrown in: test_text_textBaseline");
}
try {
test_toDataURL_arguments_1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_toDataURL_arguments_1");
}
try {
test_toDataURL_arguments_2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_toDataURL_arguments_2");
}
try {
test_toDataURL_arguments_3();
} catch (e) {
ok(false, "unexpected exception thrown in: test_toDataURL_arguments_3");
}
try {
test_toDataURL_complexcolours();
} catch (e) {
ok(false, "unexpected exception thrown in: test_toDataURL_complexcolours");
}
try {
test_toDataURL_default();
} catch (e) {
ok(false, "unexpected exception thrown in: test_toDataURL_default");
}
try {
test_toDataURL_lowercase();
} catch (e) {
ok(false, "unexpected exception thrown in: test_toDataURL_lowercase");
}
try {
test_toDataURL_nocontext();
} catch (e) {
ok(false, "unexpected exception thrown in: test_toDataURL_nocontext");
}
try {
test_toDataURL_png();
} catch (e) {
ok(false, "unexpected exception thrown in: test_toDataURL_png");
}
try {
test_toDataURL_primarycolours();
} catch (e) {
ok(false, "unexpected exception thrown in: test_toDataURL_primarycolours");
}
try {
test_toDataURL_unrecognised();
} catch (e) {
ok(false, "unexpected exception thrown in: test_toDataURL_unrecognised");
}
try {
test_toDataURL_zerosize();
} catch (e) {
ok(false, "unexpected exception thrown in: test_toDataURL_zerosize");
}
try {
test_type_exists();
} catch (e) {
ok(false, "unexpected exception thrown in: test_type_exists");
}
try {
test_type_extend();
} catch (e) {
ok(false, "unexpected exception thrown in: test_type_extend");
}
try {
test_type_name();
} catch (e) {
ok(false, "unexpected exception thrown in: test_type_name");
}
try {
test_type_prototype();
} catch (e) {
ok(false, "unexpected exception thrown in: test_type_prototype");
}
try {
test_2d_imagedata_coercion();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_imagedata_coercion");
}
try {
test_2d_imageSmoothing();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_imageSmoothing");
}
try {
test_zero_dimensions();
} catch (e) {
ok(false, "unexpected exception thrown in: test_zero_dimensions");
}
try {
test_zero_dimensions_imagedata();
} catch(e) {
ok(false, "unexpected exception thrown in: test_zero_dimensions_imagedata");
}
try {
test_getImageData_after_zero_canvas();
} catch(e) {
ok(false, "unexpected exception thrown in: test_getImageData_after_zero_canvas");
throw e;
}
try {
test_opaque();
} catch(e) {
ok(false, "unexpected exception thrown in: test_opaque");
throw e;
}
try {
test_2d_transformation_reset_transform();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_transformation_reset_transform");
}
try {
test_2d_path_ellipse_angle_1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_ellipse_angle_1");
}
try {
test_2d_path_ellipse_angle_2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_ellipse_angle_2");
}
try {
test_2d_path_ellipse_angle_3();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_ellipse_angle_3");
}
try {
test_2d_path_ellipse_angle_4();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_ellipse_angle_4");
}
try {
test_2d_path_ellipse_angle_5();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_ellipse_angle_5");
}
try {
test_2d_path_ellipse_angle_6();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_ellipse_angle_6");
}
try {
test_2d_path_ellipse_empty();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_ellipse_empty");
}
try {
test_2d_path_ellipse_end();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_ellipse_end");
}
try {
test_2d_path_ellipse_negative();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_ellipse_negative");
}
try {
test_2d_path_ellipse_nonempty();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_ellipse_nonempty");
}
try {
test_2d_path_ellipse_nonfinite();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_ellipse_nonfinite");
}
try {
test_2d_path_ellipse_scale_1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_ellipse_scale_1");
}
try {
test_2d_path_ellipse_scale_2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_ellipse_scale_2");
}
try {
test_2d_path_ellipse_selfintersect_1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_ellipse_selfintersect_1");
}
try {
test_2d_path_ellipse_selfintersect_2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_ellipse_selfintersect_2");
}
try {
test_2d_path_ellipse_shape_1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_ellipse_shape_1");
}
try {
test_2d_path_ellipse_shape_2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_ellipse_shape_2");
}
try {
test_2d_path_ellipse_shape_3();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_ellipse_shape_3");
}
try {
test_2d_path_ellipse_shape_4();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_ellipse_shape_4");
}
try {
test_2d_path_ellipse_twopie_1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_ellipse_twopie_1");
}
try {
test_2d_path_ellipse_twopie_2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_ellipse_twopie_2");
}
try {
test_2d_path_ellipse_twopie_3();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_ellipse_twopie_3");
}
try {
test_2d_path_ellipse_twopie_4();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_ellipse_twopie_4");
}
try {
test_2d_path_ellipse_zero_1();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_ellipse_zero_1");
}
try {
test_2d_path_ellipse_zero_2();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_ellipse_zero_2");
}
try {
test_2d_path_ellipse_zeroradius();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_ellipse_zeroradius");
}
try {
test_2d_path_ellipse_rotate();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_path_ellipse_rotate");
}
try {
// run this test last since it replaces the getContext method
test_type_replace();
} catch (e) {
ok(false, "unexpected exception thrown in: test_type_replace");
}
try {
test_2d_clearRect_testdoubleprecision();
} catch(e) {
ok(false, "unexpected exception thrown in: test_2d_clearRect_testdoubleprecision");
throw e;
}
//run the asynchronous tests
try {
test_2d_drawImage_animated_apng();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_drawImage_animated_apng");
}
try {
test_2d_drawImage_animated_gif();
} catch (e) {
ok(false, "unexpected exception thrown in: test_2d_drawImage_animated_gif");
}
setTimeout(asyncTestsDone, 500);
}
addLoadEvent(runTests);
</script>