зеркало из https://github.com/mozilla/gecko-dev.git
25754 строки
734 KiB
HTML
25754 строки
734 KiB
HTML
<!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="i2" src="http://example.com/tests/dom/canvas/test/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>
|