diff options
Diffstat (limited to 'dom/canvas/test/test_canvas.html')
| -rw-r--r-- | dom/canvas/test/test_canvas.html | 25752 |
1 files changed, 25752 insertions, 0 deletions
diff --git a/dom/canvas/test/test_canvas.html b/dom/canvas/test/test_canvas.html new file mode 100644 index 0000000000..d9a9b4ab35 --- /dev/null +++ b/dom/canvas/test/test_canvas.html @@ -0,0 +1,25752 @@ +<!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'); + +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(); + +todo_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); + +todo_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> |