diff options
| author | Matt A. Tobin <mattatobin@localhost.localdomain> | 2018-02-02 04:16:08 -0500 |
|---|---|---|
| committer | Matt A. Tobin <mattatobin@localhost.localdomain> | 2018-02-02 04:16:08 -0500 |
| commit | 5f8de423f190bbb79a62f804151bc24824fa32d8 (patch) | |
| tree | 10027f336435511475e392454359edea8e25895d /testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas | |
| parent | 49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff) | |
| download | UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip | |
Add m-esr52 at 52.6.0
Diffstat (limited to 'testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas')
87 files changed, 3074 insertions, 0 deletions
diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/.gitkeep b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/.gitkeep new file mode 100644 index 000000000..e69de29bb --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/.gitkeep diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.3arg.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.3arg.html new file mode 100644 index 000000000..b4fd347b9 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.3arg.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.drawImage.3arg</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.drawImage.3arg</h1> +<p class="desc"></p> + + +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> +<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +var t = async_test(""); +_addTest(function(canvas, ctx) { + +ctx.drawImage(document.getElementById('green.png'), 0, 0); +ctx.drawImage(document.getElementById('red.png'), -100, 0); +ctx.drawImage(document.getElementById('red.png'), 100, 0); +ctx.drawImage(document.getElementById('red.png'), 0, -50); +ctx.drawImage(document.getElementById('red.png'), 0, 50); + +_assertPixelApprox(canvas, 0,0, 0,255,0,255, "0,0", "0,255,0,255", 2); +_assertPixelApprox(canvas, 99,0, 0,255,0,255, "99,0", "0,255,0,255", 2); +_assertPixelApprox(canvas, 0,49, 0,255,0,255, "0,49", "0,255,0,255", 2); +_assertPixelApprox(canvas, 99,49, 0,255,0,255, "99,49", "0,255,0,255", 2); + + +}); +</script> +<img src="/images/red.png" id="red.png" class="resource"> +<img src="/images/green.png" id="green.png" class="resource"> + diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.5arg.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.5arg.html new file mode 100644 index 000000000..b2075a607 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.5arg.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.drawImage.5arg</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.drawImage.5arg</h1> +<p class="desc"></p> + + +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> +<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +var t = async_test(""); +_addTest(function(canvas, ctx) { + +ctx.fillStyle = '#f00'; +ctx.fillRect(0, 0, 100, 50); +ctx.drawImage(document.getElementById('green.png'), 50, 0, 50, 50); +ctx.drawImage(document.getElementById('red.png'), 0, 0, 50, 50); +ctx.fillStyle = '#0f0'; +ctx.fillRect(0, 0, 50, 50); + +_assertPixelApprox(canvas, 0,0, 0,255,0,255, "0,0", "0,255,0,255", 2); +_assertPixelApprox(canvas, 99,0, 0,255,0,255, "99,0", "0,255,0,255", 2); +_assertPixelApprox(canvas, 0,49, 0,255,0,255, "0,49", "0,255,0,255", 2); +_assertPixelApprox(canvas, 99,49, 0,255,0,255, "99,49", "0,255,0,255", 2); + + +}); +</script> +<img src="/images/red.png" id="red.png" class="resource"> +<img src="/images/green.png" id="green.png" class="resource"> + diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.9arg.basic.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.9arg.basic.html new file mode 100644 index 000000000..8ccecae22 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.9arg.basic.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.drawImage.9arg.basic</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.drawImage.9arg.basic</h1> +<p class="desc"></p> + + +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> +<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +var t = async_test(""); +_addTest(function(canvas, ctx) { + +ctx.fillStyle = '#f00'; +ctx.fillRect(0, 0, 100, 50); +ctx.drawImage(document.getElementById('green.png'), 0, 0, 100, 50, 0, 0, 100, 50); +_assertPixelApprox(canvas, 0,0, 0,255,0,255, "0,0", "0,255,0,255", 2); +_assertPixelApprox(canvas, 99,0, 0,255,0,255, "99,0", "0,255,0,255", 2); +_assertPixelApprox(canvas, 0,49, 0,255,0,255, "0,49", "0,255,0,255", 2); +_assertPixelApprox(canvas, 99,49, 0,255,0,255, "99,49", "0,255,0,255", 2); + + +}); +</script> +<img src="/images/green.png" id="green.png" class="resource"> + diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.9arg.destpos.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.9arg.destpos.html new file mode 100644 index 000000000..e71d1ab4d --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.9arg.destpos.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.drawImage.9arg.destpos</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.drawImage.9arg.destpos</h1> +<p class="desc"></p> + + +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> +<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +var t = async_test(""); +_addTest(function(canvas, ctx) { + +ctx.fillStyle = '#f00'; +ctx.fillRect(0, 0, 100, 50); +ctx.drawImage(document.getElementById('green.png'), 0, 0, 100, 50, 0, 0, 100, 50); +ctx.drawImage(document.getElementById('red.png'), 0, 0, 100, 50, -100, 0, 100, 50); +ctx.drawImage(document.getElementById('red.png'), 0, 0, 100, 50, 100, 0, 100, 50); +ctx.drawImage(document.getElementById('red.png'), 0, 0, 100, 50, 0, -50, 100, 50); +ctx.drawImage(document.getElementById('red.png'), 0, 0, 100, 50, 0, 50, 100, 50); +_assertPixelApprox(canvas, 0,0, 0,255,0,255, "0,0", "0,255,0,255", 2); +_assertPixelApprox(canvas, 99,0, 0,255,0,255, "99,0", "0,255,0,255", 2); +_assertPixelApprox(canvas, 0,49, 0,255,0,255, "0,49", "0,255,0,255", 2); +_assertPixelApprox(canvas, 99,49, 0,255,0,255, "99,49", "0,255,0,255", 2); + + +}); +</script> +<img src="/images/red.png" id="red.png" class="resource"> +<img src="/images/green.png" id="green.png" class="resource"> + diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.9arg.destsize.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.9arg.destsize.html new file mode 100644 index 000000000..a76e0baa3 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.9arg.destsize.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.drawImage.9arg.destsize</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.drawImage.9arg.destsize</h1> +<p class="desc"></p> + + +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> +<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +var t = async_test(""); +_addTest(function(canvas, ctx) { + +ctx.fillStyle = '#f00'; +ctx.fillRect(0, 0, 100, 50); +ctx.drawImage(document.getElementById('green.png'), 1, 1, 1, 1, 0, 0, 100, 50); +ctx.drawImage(document.getElementById('red.png'), 0, 0, 100, 50, -50, 0, 50, 50); +ctx.drawImage(document.getElementById('red.png'), 0, 0, 100, 50, 100, 0, 50, 50); +ctx.drawImage(document.getElementById('red.png'), 0, 0, 100, 50, 0, -25, 100, 25); +ctx.drawImage(document.getElementById('red.png'), 0, 0, 100, 50, 0, 50, 100, 25); +_assertPixelApprox(canvas, 0,0, 0,255,0,255, "0,0", "0,255,0,255", 2); +_assertPixelApprox(canvas, 99,0, 0,255,0,255, "99,0", "0,255,0,255", 2); +_assertPixelApprox(canvas, 0,49, 0,255,0,255, "0,49", "0,255,0,255", 2); +_assertPixelApprox(canvas, 99,49, 0,255,0,255, "99,49", "0,255,0,255", 2); + + +}); +</script> +<img src="/images/red.png" id="red.png" class="resource"> +<img src="/images/green.png" id="green.png" class="resource"> + diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.9arg.sourcepos.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.9arg.sourcepos.html new file mode 100644 index 000000000..34785c757 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.9arg.sourcepos.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.drawImage.9arg.sourcepos</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.drawImage.9arg.sourcepos</h1> +<p class="desc"></p> + + +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> +<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +var t = async_test(""); +_addTest(function(canvas, ctx) { + +ctx.fillStyle = '#f00'; +ctx.fillRect(0, 0, 100, 50); +ctx.drawImage(document.getElementById('rgrg-256x256.png'), 140, 20, 100, 50, 0, 0, 100, 50); +_assertPixelApprox(canvas, 0,0, 0,255,0,255, "0,0", "0,255,0,255", 2); +_assertPixelApprox(canvas, 99,0, 0,255,0,255, "99,0", "0,255,0,255", 2); +_assertPixelApprox(canvas, 0,49, 0,255,0,255, "0,49", "0,255,0,255", 2); +_assertPixelApprox(canvas, 99,49, 0,255,0,255, "99,49", "0,255,0,255", 2); + + +}); +</script> +<img src="/images/rgrg-256x256.png" id="rgrg-256x256.png" class="resource"> + diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.9arg.sourcesize.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.9arg.sourcesize.html new file mode 100644 index 000000000..a640605b1 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.9arg.sourcesize.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.drawImage.9arg.sourcesize</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.drawImage.9arg.sourcesize</h1> +<p class="desc"></p> + + +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> +<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +var t = async_test(""); +_addTest(function(canvas, ctx) { + +ctx.fillStyle = '#f00'; +ctx.fillRect(0, 0, 100, 50); +ctx.drawImage(document.getElementById('rgrg-256x256.png'), 0, 0, 256, 256, 0, 0, 100, 50); +ctx.fillStyle = '#0f0'; +ctx.fillRect(0, 0, 51, 26); +ctx.fillRect(49, 24, 51, 26); +_assertPixelApprox(canvas, 0,0, 0,255,0,255, "0,0", "0,255,0,255", 2); +_assertPixelApprox(canvas, 99,0, 0,255,0,255, "99,0", "0,255,0,255", 2); +_assertPixelApprox(canvas, 0,49, 0,255,0,255, "0,49", "0,255,0,255", 2); +_assertPixelApprox(canvas, 99,49, 0,255,0,255, "99,49", "0,255,0,255", 2); +_assertPixelApprox(canvas, 20,20, 0,255,0,255, "20,20", "0,255,0,255", 2); +_assertPixelApprox(canvas, 80,20, 0,255,0,255, "80,20", "0,255,0,255", 2); +_assertPixelApprox(canvas, 20,30, 0,255,0,255, "20,30", "0,255,0,255", 2); +_assertPixelApprox(canvas, 80,30, 0,255,0,255, "80,30", "0,255,0,255", 2); + + +}); +</script> +<img src="/images/rgrg-256x256.png" id="rgrg-256x256.png" class="resource"> + diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.alpha.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.alpha.html new file mode 100644 index 000000000..8056c96d3 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.alpha.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.drawImage.alpha</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.drawImage.alpha</h1> +<p class="desc"></p> + + +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> +<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +var t = async_test(""); +_addTest(function(canvas, ctx) { + +ctx.fillStyle = '#0f0'; +ctx.fillRect(0, 0, 100, 50); +ctx.globalAlpha = 0; +ctx.drawImage(document.getElementById('red.png'), 0, 0); +_assertPixelApprox(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255", 2); + + +}); +</script> +<img src="/images/red.png" id="red.png" class="resource"> + diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.animated.apng.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.animated.apng.html new file mode 100644 index 000000000..bdc64462c --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.animated.apng.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.drawImage.animated.apng</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.drawImage.animated.apng</h1> +<p class="desc">drawImage() of an APNG with no poster frame draws the first frame</p> + + +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> +<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +var t = async_test("drawImage() of an APNG with no poster frame draws the first frame"); +_addTest(function(canvas, ctx) { + +deferTest(); +setTimeout(t.step_func_done(function () { + ctx.drawImage(document.getElementById('anim-gr.png'), 0, 0); + _assertPixelApprox(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255", 2); +}), 500); + + +}); +</script> +<img src="/images/anim-gr.png" id="anim-gr.png" class="resource"> + diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.animated.gif.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.animated.gif.html new file mode 100644 index 000000000..3cf5e0fb8 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.animated.gif.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.drawImage.animated.gif</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.drawImage.animated.gif</h1> +<p class="desc">drawImage() of an animated GIF draws the first frame</p> + + +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> +<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +var t = async_test("drawImage() of an animated GIF draws the first frame"); +_addTest(function(canvas, ctx) { + +deferTest(); +setTimeout(t.step_func_done(function () { + ctx.drawImage(document.getElementById('anim-gr.gif'), 0, 0); + _assertPixelApprox(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255", 2); +}), 500); + + +}); +</script> +<img src="/images/anim-gr.gif" id="anim-gr.gif" class="resource"> + diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.animated.poster.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.animated.poster.html new file mode 100644 index 000000000..b0c76c1e5 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.animated.poster.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.drawImage.animated.poster</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.drawImage.animated.poster</h1> +<p class="desc">drawImage() of an APNG draws the poster frame</p> + + +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> +<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +var t = async_test("drawImage() of an APNG draws the poster frame"); +_addTest(function(canvas, ctx) { + +ctx.drawImage(document.getElementById('anim-poster-gr.png'), 0, 0); +_assertPixelApprox(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255", 2); + + +}); +</script> +<img src="/images/anim-poster-gr.png" id="anim-poster-gr.png" class="resource"> + diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.broken.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.broken.html new file mode 100644 index 000000000..f56ece4d0 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.broken.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.drawImage.broken</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.drawImage.broken</h1> +<p class="desc"></p> + + +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> +<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +var t = async_test(""); +_addTest(function(canvas, ctx) { + +ctx.fillStyle = '#0f0'; +ctx.fillRect(0, 0, 100, 50); +var img = document.getElementById('broken.png'); +ctx.drawImage(img, 0, 0); +_assertPixelApprox(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255", 2); + + +}); +</script> +<img src="/images/broken.png" id="broken.png" class="resource"> + diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.canvas.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.canvas.html new file mode 100644 index 000000000..7ae961404 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.canvas.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.drawImage.canvas</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.drawImage.canvas</h1> +<p class="desc"></p> + + +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> +<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +var t = async_test(""); +_addTest(function(canvas, ctx) { + +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); + +_assertPixelApprox(canvas, 0,0, 0,255,0,255, "0,0", "0,255,0,255", 2); +_assertPixelApprox(canvas, 99,0, 0,255,0,255, "99,0", "0,255,0,255", 2); +_assertPixelApprox(canvas, 0,49, 0,255,0,255, "0,49", "0,255,0,255", 2); +_assertPixelApprox(canvas, 99,49, 0,255,0,255, "99,49", "0,255,0,255", 2); + + +}); +</script> + diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.clip.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.clip.html new file mode 100644 index 000000000..fbf86e11c --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.clip.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.drawImage.clip</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.drawImage.clip</h1> +<p class="desc"></p> + + +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> +<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +var t = async_test(""); +_addTest(function(canvas, ctx) { + +ctx.fillStyle = '#0f0'; +ctx.fillRect(0, 0, 100, 50); +ctx.rect(-10, -10, 1, 1); +ctx.clip(); +ctx.drawImage(document.getElementById('red.png'), 0, 0); +_assertPixelApprox(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255", 2); + + +}); +</script> +<img src="/images/red.png" id="red.png" class="resource"> + diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.composite.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.composite.html new file mode 100644 index 000000000..e4175312b --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.composite.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.drawImage.composite</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.drawImage.composite</h1> +<p class="desc"></p> + + +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> +<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +var t = async_test(""); +_addTest(function(canvas, ctx) { + +ctx.fillStyle = '#0f0'; +ctx.fillRect(0, 0, 100, 50); +ctx.globalCompositeOperation = 'destination-over'; +ctx.drawImage(document.getElementById('red.png'), 0, 0); +_assertPixelApprox(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255", 2); + + +}); +</script> +<img src="/images/red.png" id="red.png" class="resource"> + diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.floatsource.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.floatsource.html new file mode 100644 index 000000000..689b1f8ae --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.floatsource.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.drawImage.floatsource</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.drawImage.floatsource</h1> +<p class="desc"></p> + + +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> +<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +var t = async_test(""); +_addTest(function(canvas, ctx) { + +ctx.drawImage(document.getElementById('green.png'), 10.1, 10.1, 0.1, 0.1, 0, 0, 100, 50); +_assertPixelApprox(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255", 2); + + +}); +</script> +<img src="/images/green.png" id="green.png" class="resource"> + diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.incomplete.emptysrc.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.incomplete.emptysrc.html new file mode 100644 index 000000000..132e492c9 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.incomplete.emptysrc.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.drawImage.incomplete.emptysrc</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.drawImage.incomplete.emptysrc</h1> +<p class="desc"></p> + + +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> +<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +var t = async_test(""); +_addTest(function(canvas, ctx) { + +ctx.fillStyle = '#0f0'; +ctx.fillRect(0, 0, 100, 50); +var img = document.getElementById('red.png'); +img.src = ""; +ctx.drawImage(img, 0, 0); +_assertPixelApprox(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255", 2); + + +}); +</script> +<img src="/images/red.png" id="red.png" class="resource"> + diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.incomplete.immediate.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.incomplete.immediate.html new file mode 100644 index 000000000..1ff5ab2c4 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.incomplete.immediate.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.drawImage.incomplete.immediate</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.drawImage.incomplete.immediate</h1> +<p class="desc"></p> + + +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> +<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +var t = async_test(""); +_addTest(function(canvas, ctx) { + +ctx.fillStyle = '#0f0'; +ctx.fillRect(0, 0, 100, 50); +var img = new Image(); +img.src = '../images/red.png'; +// This triggers the "update the image data" algorithm. +// The image will not go to the "completely available" state +// until a fetch task in the networking task source is processed, +// so the image must not be fully decodable yet: +ctx.drawImage(img, 0, 0); +_assertPixelApprox(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255", 2); + + +}); +</script> +<img src="/images/red.png" id="red.png" class="resource"> + diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.incomplete.nosrc.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.incomplete.nosrc.html new file mode 100644 index 000000000..5067b7a5c --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.incomplete.nosrc.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.drawImage.incomplete.nosrc</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.drawImage.incomplete.nosrc</h1> +<p class="desc"></p> + + +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> +<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +var t = async_test(""); +_addTest(function(canvas, ctx) { + +ctx.fillStyle = '#0f0'; +ctx.fillRect(0, 0, 100, 50); +var img = new Image(); +ctx.drawImage(img, 0, 0); +_assertPixelApprox(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255", 2); + + +}); +</script> + diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.incomplete.reload.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.incomplete.reload.html new file mode 100644 index 000000000..efd41c938 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.incomplete.reload.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.drawImage.incomplete.reload</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.drawImage.incomplete.reload</h1> +<p class="desc"></p> + + +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> +<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +var t = async_test(""); +_addTest(function(canvas, ctx) { + +ctx.fillStyle = '#0f0'; +ctx.fillRect(0, 0, 100, 50); +var img = document.getElementById('yellow.png'); +img.src = '../images/red.png'; +// This triggers the "update the image data" algorithm, +// and resets the image to the "unavailable" state. +// The image will not go to the "completely available" state +// until a fetch task in the networking task source is processed, +// so the image must not be fully decodable yet: +ctx.drawImage(img, 0, 0); +_assertPixelApprox(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255", 2); + + +}); +</script> +<img src="/images/yellow.png" id="yellow.png" class="resource"> +<img src="/images/red.png" id="red.png" class="resource"> + diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.incomplete.removedsrc.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.incomplete.removedsrc.html new file mode 100644 index 000000000..a744d591d --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.incomplete.removedsrc.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.drawImage.incomplete.removedsrc</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.drawImage.incomplete.removedsrc</h1> +<p class="desc"></p> + + +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> +<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +var t = async_test(""); +_addTest(function(canvas, ctx) { + +ctx.fillStyle = '#0f0'; +ctx.fillRect(0, 0, 100, 50); +var img = document.getElementById('red.png'); +img.removeAttribute('src'); +ctx.drawImage(img, 0, 0); +_assertPixelApprox(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255", 2); + + +}); +</script> +<img src="/images/red.png" id="red.png" class="resource"> + diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.negativedest.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.negativedest.html new file mode 100644 index 000000000..2d2c15849 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.negativedest.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.drawImage.negativedest</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.drawImage.negativedest</h1> +<p class="desc">Negative destination width/height represents the correct rectangle</p> + + +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> +<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +var t = async_test("Negative destination width/height represents the correct rectangle"); +_addTest(function(canvas, ctx) { + +ctx.fillStyle = '#f00'; +ctx.fillRect(0, 0, 100, 50); +ctx.drawImage(document.getElementById('ggrr-256x256.png'), 100, 78, 50, 50, 0, 50, 50, -50); +ctx.drawImage(document.getElementById('ggrr-256x256.png'), 100, 128, 50, -50, 100, 50, -50, -50); +_assertPixelApprox(canvas, 1,1, 0,255,0,255, "1,1", "0,255,0,255", 2); +_assertPixelApprox(canvas, 1,48, 0,255,0,255, "1,48", "0,255,0,255", 2); +_assertPixelApprox(canvas, 98,1, 0,255,0,255, "98,1", "0,255,0,255", 2); +_assertPixelApprox(canvas, 98,48, 0,255,0,255, "98,48", "0,255,0,255", 2); +_assertPixelApprox(canvas, 48,1, 0,255,0,255, "48,1", "0,255,0,255", 2); +_assertPixelApprox(canvas, 48,48, 0,255,0,255, "48,48", "0,255,0,255", 2); +_assertPixelApprox(canvas, 51,1, 0,255,0,255, "51,1", "0,255,0,255", 2); +_assertPixelApprox(canvas, 51,48, 0,255,0,255, "51,48", "0,255,0,255", 2); +_assertPixelApprox(canvas, 25,25, 0,255,0,255, "25,25", "0,255,0,255", 2); +_assertPixelApprox(canvas, 75,25, 0,255,0,255, "75,25", "0,255,0,255", 2); + + +}); +</script> +<img src="/images/ggrr-256x256.png" id="ggrr-256x256.png" class="resource"> + diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.negativedir.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.negativedir.html new file mode 100644 index 000000000..a333f8fb9 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.negativedir.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.drawImage.negativedir</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.drawImage.negativedir</h1> +<p class="desc">Negative dimensions do not affect the direction of the image</p> + + +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> +<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +var t = async_test("Negative dimensions do not affect the direction of the image"); +_addTest(function(canvas, ctx) { + +ctx.fillStyle = '#f00'; +ctx.fillRect(0, 0, 100, 50); +ctx.drawImage(document.getElementById('ggrr-256x256.png'), 0, 178, 50, -100, 0, 0, 50, 100); +ctx.drawImage(document.getElementById('ggrr-256x256.png'), 0, 78, 50, 100, 50, 100, 50, -100); +_assertPixelApprox(canvas, 1,1, 0,255,0,255, "1,1", "0,255,0,255", 2); +_assertPixelApprox(canvas, 1,48, 0,255,0,255, "1,48", "0,255,0,255", 2); +_assertPixelApprox(canvas, 98,1, 0,255,0,255, "98,1", "0,255,0,255", 2); +_assertPixelApprox(canvas, 98,48, 0,255,0,255, "98,48", "0,255,0,255", 2); +_assertPixelApprox(canvas, 48,1, 0,255,0,255, "48,1", "0,255,0,255", 2); +_assertPixelApprox(canvas, 48,48, 0,255,0,255, "48,48", "0,255,0,255", 2); +_assertPixelApprox(canvas, 51,1, 0,255,0,255, "51,1", "0,255,0,255", 2); +_assertPixelApprox(canvas, 51,48, 0,255,0,255, "51,48", "0,255,0,255", 2); +_assertPixelApprox(canvas, 25,25, 0,255,0,255, "25,25", "0,255,0,255", 2); +_assertPixelApprox(canvas, 75,25, 0,255,0,255, "75,25", "0,255,0,255", 2); + + +}); +</script> +<img src="/images/ggrr-256x256.png" id="ggrr-256x256.png" class="resource"> + diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.negativesource.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.negativesource.html new file mode 100644 index 000000000..af377ffdf --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.negativesource.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.drawImage.negativesource</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.drawImage.negativesource</h1> +<p class="desc">Negative source width/height represents the correct rectangle</p> + + +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> +<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +var t = async_test("Negative source width/height represents the correct rectangle"); +_addTest(function(canvas, ctx) { + +ctx.fillStyle = '#f00'; +ctx.fillRect(0, 0, 100, 50); +ctx.drawImage(document.getElementById('ggrr-256x256.png'), 100, 78, -100, 50, 0, 0, 50, 50); +ctx.drawImage(document.getElementById('ggrr-256x256.png'), 100, 128, -100, -50, 50, 0, 50, 50); +_assertPixelApprox(canvas, 1,1, 0,255,0,255, "1,1", "0,255,0,255", 2); +_assertPixelApprox(canvas, 1,48, 0,255,0,255, "1,48", "0,255,0,255", 2); +_assertPixelApprox(canvas, 98,1, 0,255,0,255, "98,1", "0,255,0,255", 2); +_assertPixelApprox(canvas, 98,48, 0,255,0,255, "98,48", "0,255,0,255", 2); +_assertPixelApprox(canvas, 48,1, 0,255,0,255, "48,1", "0,255,0,255", 2); +_assertPixelApprox(canvas, 48,48, 0,255,0,255, "48,48", "0,255,0,255", 2); +_assertPixelApprox(canvas, 51,1, 0,255,0,255, "51,1", "0,255,0,255", 2); +_assertPixelApprox(canvas, 51,48, 0,255,0,255, "51,48", "0,255,0,255", 2); +_assertPixelApprox(canvas, 25,25, 0,255,0,255, "25,25", "0,255,0,255", 2); +_assertPixelApprox(canvas, 75,25, 0,255,0,255, "75,25", "0,255,0,255", 2); + + +}); +</script> +<img src="/images/ggrr-256x256.png" id="ggrr-256x256.png" class="resource"> + diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.nonfinite.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.nonfinite.html new file mode 100644 index 000000000..14e634a62 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.nonfinite.html @@ -0,0 +1,332 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.drawImage.nonfinite</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.drawImage.nonfinite</h1> +<p class="desc">drawImage() with Infinity/NaN is ignored</p> + + +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> +<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +var t = async_test("drawImage() with Infinity/NaN is ignored"); +_addTest(function(canvas, ctx) { + +ctx.fillStyle = '#0f0'; +ctx.fillRect(0, 0, 100, 50); +var red = document.getElementById('red.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); +_assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255"); + + +}); +</script> +<img src="/images/red.png" id="red.png" class="resource"> + diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.nowrap.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.nowrap.html new file mode 100644 index 000000000..8b0fa4890 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.nowrap.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.drawImage.nowrap</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.drawImage.nowrap</h1> +<p class="desc">Stretched images do not get pixels wrapping around the edges</p> + + +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> +<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +var t = async_test("Stretched images do not get pixels wrapping around the edges"); +_addTest(function(canvas, ctx) { + +ctx.fillStyle = '#0f0'; +ctx.fillRect(0, 0, 100, 50); +ctx.drawImage(document.getElementById('redtransparent.png'), -1950, 0, 2000, 50); +_assertPixelApprox(canvas, 45,25, 0,255,0,255, "45,25", "0,255,0,255", 2); +_assertPixelApprox(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255", 2); +_assertPixelApprox(canvas, 55,25, 0,255,0,255, "55,25", "0,255,0,255", 2); + + +}); +</script> +<img src="/images/redtransparent.png" id="redtransparent.png" class="resource"> + diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.null.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.null.html new file mode 100644 index 000000000..f4ce00e56 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.null.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.drawImage.null</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.drawImage.null</h1> +<p class="desc"></p> + + +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> + +<ul id="d"></ul> +<script> +var t = async_test(""); +_addTest(function(canvas, ctx) { + +assert_throws(new TypeError(), function() { ctx.drawImage(null, 0, 0); }); + + +}); +</script> + diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.path.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.path.html new file mode 100644 index 000000000..2e389ebd4 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.path.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.drawImage.path</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.drawImage.path</h1> +<p class="desc"></p> + + +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> +<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +var t = async_test(""); +_addTest(function(canvas, ctx) { + +ctx.fillStyle = '#0f0'; +ctx.rect(0, 0, 100, 50); +ctx.drawImage(document.getElementById('red.png'), 0, 0); +ctx.fill(); +_assertPixelApprox(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255", 2); + + +}); +</script> +<img src="/images/red.png" id="red.png" class="resource"> + diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.self.1.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.self.1.html new file mode 100644 index 000000000..8f05c1445 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.self.1.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.drawImage.self.1</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.drawImage.self.1</h1> +<p class="desc"></p> + + +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> +<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +var t = async_test(""); +_addTest(function(canvas, ctx) { + +ctx.fillStyle = '#0f0'; +ctx.fillRect(0, 0, 50, 50); +ctx.fillStyle = '#f00'; +ctx.fillRect(50, 0, 50, 50); +ctx.drawImage(canvas, 50, 0); + +_assertPixelApprox(canvas, 0,0, 0,255,0,255, "0,0", "0,255,0,255", 2); +_assertPixelApprox(canvas, 99,0, 0,255,0,255, "99,0", "0,255,0,255", 2); +_assertPixelApprox(canvas, 0,49, 0,255,0,255, "0,49", "0,255,0,255", 2); +_assertPixelApprox(canvas, 99,49, 0,255,0,255, "99,49", "0,255,0,255", 2); + + +}); +</script> + diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.self.2.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.self.2.html new file mode 100644 index 000000000..4fc1319fc --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.self.2.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.drawImage.self.2</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.drawImage.self.2</h1> +<p class="desc"></p> + + +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> +<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +var t = async_test(""); +_addTest(function(canvas, ctx) { + +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); + +_assertPixelApprox(canvas, 0,0, 0,255,0,255, "0,0", "0,255,0,255", 2); +_assertPixelApprox(canvas, 99,0, 0,255,0,255, "99,0", "0,255,0,255", 2); +_assertPixelApprox(canvas, 0,49, 0,255,0,255, "0,49", "0,255,0,255", 2); +_assertPixelApprox(canvas, 99,49, 0,255,0,255, "99,49", "0,255,0,255", 2); + + +}); +</script> + diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.svg.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.svg.html new file mode 100644 index 000000000..5935eb864 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.svg.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.drawImage.svg</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.drawImage.svg</h1> +<p class="desc">drawImage() of an SVG image</p> + + +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> +<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +var t = async_test("drawImage() of an SVG image"); +_addTest(function(canvas, ctx) { + +ctx.drawImage(document.getElementById('green.svg'), 0, 0); +_assertPixelApprox(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255", 2); + + +}); +</script> +<img src="/images/green.svg" id="green.svg" class="resource"> + diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.transform.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.transform.html new file mode 100644 index 000000000..ab3c09a22 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.transform.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.drawImage.transform</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.drawImage.transform</h1> +<p class="desc"></p> + + +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> +<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +var t = async_test(""); +_addTest(function(canvas, ctx) { + +ctx.fillStyle = '#0f0'; +ctx.fillRect(0, 0, 100, 50); +ctx.translate(100, 0); +ctx.drawImage(document.getElementById('red.png'), 0, 0); +_assertPixelApprox(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255", 2); + + +}); +</script> +<img src="/images/red.png" id="red.png" class="resource"> + diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.wrongtype.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.wrongtype.html new file mode 100644 index 000000000..cd2a7fc5b --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.wrongtype.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.drawImage.wrongtype</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.drawImage.wrongtype</h1> +<p class="desc">Incorrect image types in drawImage do not match any defined overloads, so WebIDL throws a TypeError</p> + +<p class="notes">Defined in "Web IDL" (draft) +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> + +<ul id="d"></ul> +<script> +var t = async_test("Incorrect image types in drawImage do not match any defined overloads, so WebIDL throws a TypeError"); +_addTest(function(canvas, ctx) { + +assert_throws(new TypeError(), function() { ctx.drawImage(undefined, 0, 0); }); +assert_throws(new TypeError(), function() { ctx.drawImage(0, 0, 0); }); +assert_throws(new TypeError(), function() { ctx.drawImage("", 0, 0); }); +assert_throws(new TypeError(), function() { ctx.drawImage(document.createElement('p'), 0, 0); }); + + +}); +</script> + diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.zerocanvas.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.zerocanvas.html new file mode 100644 index 000000000..e14f5d3b3 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.zerocanvas.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.drawImage.zerocanvas</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.drawImage.zerocanvas</h1> +<p class="desc"></p> + + +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> +<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +var t = async_test(""); +_addTest(function(canvas, ctx) { + +ctx.fillStyle = '#0f0'; +ctx.fillRect(0, 0, 100, 50); + +var canvas2 = document.createElement('canvas'); +canvas2.width = 0; +canvas2.height = 10; +assert_throws("INVALID_STATE_ERR", function() { ctx.drawImage(canvas2, 0, 0); }); + +canvas2.width = 10; +canvas2.height = 0; +assert_throws("INVALID_STATE_ERR", function() { ctx.drawImage(canvas2, 0, 0); }); + +canvas2.width = 0; +canvas2.height = 0; +assert_throws("INVALID_STATE_ERR", function() { ctx.drawImage(canvas2, 0, 0); }); + +_assertPixelApprox(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255", 2); + + +}); +</script> + diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.zerosource.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.zerosource.html new file mode 100644 index 000000000..6906284e0 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.zerosource.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.drawImage.zerosource</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.drawImage.zerosource</h1> +<p class="desc">drawImage with zero-sized source rectangle throws INDEX_SIZE_ERR</p> + + +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> +<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +var t = async_test("drawImage with zero-sized source rectangle throws INDEX_SIZE_ERR"); +_addTest(function(canvas, ctx) { + +ctx.fillStyle = '#0f0'; +ctx.fillRect(0, 0, 100, 50); +assert_throws("INDEX_SIZE_ERR", function() { ctx.drawImage(document.getElementById('red.png'), 10, 10, 0, 1, 0, 0, 100, 50); }); +assert_throws("INDEX_SIZE_ERR", function() { ctx.drawImage(document.getElementById('red.png'), 10, 10, 1, 0, 0, 0, 100, 50); }); +assert_throws("INDEX_SIZE_ERR", function() { ctx.drawImage(document.getElementById('red.png'), 10, 10, 0, 0, 0, 0, 100, 50); }); +_assertPixelApprox(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255", 2); + + +}); +</script> +<img src="/images/red.png" id="red.png" class="resource"> + diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.zerosource.image.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.zerosource.image.html new file mode 100644 index 000000000..cda752c31 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/2d.drawImage.zerosource.image.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.drawImage.zerosource.image</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.drawImage.zerosource.image</h1> +<p class="desc">drawImage with zero-sized source rectangle from image throws INDEX_SIZE_ERR</p> + + +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> +<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +var t = async_test("drawImage with zero-sized source rectangle from image throws INDEX_SIZE_ERR"); +_addTest(function(canvas, ctx) { + +ctx.fillStyle = '#0f0'; +ctx.fillRect(0, 0, 100, 50); +assert_throws("INDEX_SIZE_ERR", function() { ctx.drawImage(document.getElementById('red-zerowidth.svg'), 0, 0, 100, 50); }); +assert_throws("INDEX_SIZE_ERR", function() { ctx.drawImage(document.getElementById('red-zeroheight.svg'), 0, 0, 100, 50); }); +assert_throws("INDEX_SIZE_ERR", function() { ctx.drawImage(document.getElementById('red-zerosize.svg'), 0, 0, 100, 50); }); +_assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255"); + + +}); +</script> +<img src="/images/red-zerowidth.svg" id="red-zerowidth.svg" class="resource"> +<img src="/images/red-zeroheight.svg" id="red-zeroheight.svg" class="resource"> +<img src="/images/red-zerosize.svg" id="red-zerosize.svg" class="resource"> + diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_1.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_1.html new file mode 100644 index 000000000..871e279ac --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_1.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel=match href=drawimage_canvas_1_ref.html> +<style> + html, body { + margin: 0; + } +</style> +<canvas id="dest" height="100" width="100"></canvas> +<script> + +var sourceWidth = 50; +var sourceHeight = 50; +var smoothingEnabled = false; +var destCanvas = document.getElementById('dest'); +var sourceCanvas = document.createElement('canvas'); +sourceCanvas.width = sourceWidth; +sourceCanvas.height = sourceHeight; + +var sourceCtx = sourceCanvas.getContext('2d'); +sourceCtx.fillStyle = "#00FFFF"; +sourceCtx.fillRect(0, 0, sourceWidth, sourceHeight); +sourceCtx.fillStyle = "#000000"; +sourceCtx.fillRect(5,5,40,40); + +var destCtx = destCanvas.getContext('2d'); +destCtx.fillStyle = "#FF0000"; +destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height); +destCtx.imageSmoothingEnabled = smoothingEnabled; +// 2 arguments, the dest origin is 0,0 +// The source canvas will copied to the 0,0 position of the destination canvas +destCtx.drawImage(sourceCanvas, 0, 0); + +</script> diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_10.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_10.html new file mode 100644 index 000000000..14e15ffc3 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_10.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel=match href=drawimage_canvas_10_ref.html> +<style> + html, body { + margin: 0; + } +</style> +<canvas id="dest" height="100" width="100"></canvas> +<script> + +var sourceWidth = 50; +var sourceHeight = 50; +var smoothingEnabled = false; +var destCanvas = document.getElementById('dest'); +var sourceCanvas = document.createElement('canvas'); +sourceCanvas.width = sourceWidth; +sourceCanvas.height = sourceHeight; + +var sourceCtx = sourceCanvas.getContext('2d'); +sourceCtx.fillStyle = "#00FFFF"; +sourceCtx.fillRect(0, 0, sourceWidth, sourceHeight); +sourceCtx.fillStyle = "#000000"; +sourceCtx.fillRect(5,5,40,40); + +var destCtx = destCanvas.getContext('2d'); +destCtx.fillStyle = "#FF0000"; +destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height); +destCtx.imageSmoothingEnabled = smoothingEnabled; + +// The destination rectangle is larger than the destination canvas +// When the destination rectangle is outside the destination image (the scratch bitmap), +// the pixels that land outside the scratch bitmap are discarded, +// as if the destination was an infinite canvas whose rendering was +// clipped to the dimensions of the scratch bitmap. +destCtx.drawImage(sourceCanvas, 0, 0, 50, 50, 0, 0, 200, 200); + +</script> diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_10_ref.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_10_ref.html new file mode 100644 index 000000000..cd05233b8 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_10_ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> +</head> +<style> + html, body { + margin: 0; + } +</style> +<body> +<canvas id="dest" height="100" width="100"></canvas> +<script type="text/javascript"> + +var destCanvas = document.getElementById('dest'); +var destCtx = destCanvas.getContext('2d'); +destCtx.fillStyle = "#FF0000"; +destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height); +destCtx.fillStyle = "#00FFFF"; +destCtx.fillRect(0, 0, 100, 100); +destCtx.fillStyle = "#000000"; +destCtx.fillRect(20, 20, 80, 80); + +</script> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_11.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_11.html new file mode 100644 index 000000000..e06dfc0df --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_11.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel=match href=drawimage_canvas_11_ref.html> +<style> + html, body { + margin: 0; + } +</style> +<canvas id="dest" height="100" width="100"></canvas> +<script> + +var sourceWidth = 50; +var sourceHeight = 50; +var smoothingEnabled = false; +var destCanvas = document.getElementById('dest'); +var sourceCanvas = document.createElement('canvas'); +sourceCanvas.width = sourceWidth; +sourceCanvas.height = sourceHeight; + +var sourceCtx = sourceCanvas.getContext('2d'); +sourceCtx.fillStyle = "#00FFFF"; +sourceCtx.fillRect(0, 0, sourceWidth, sourceHeight); +sourceCtx.fillStyle = "#000000"; +sourceCtx.fillRect(5,5,40,40); + +var destCtx = destCanvas.getContext('2d'); +destCtx.fillStyle = "#FF0000"; +destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height); +destCtx.imageSmoothingEnabled = smoothingEnabled; + +// The source rectangle is larger than the source canvas +// The source area is clipped to fit the source image +// and the destination are is clipped in the same proportion +destCtx.drawImage(sourceCanvas, 0, 0, 100, 100, 0, 0, 50, 50); + +</script> diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_11_ref.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_11_ref.html new file mode 100644 index 000000000..970f626df --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_11_ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> +</head> +<style> + html, body { + margin: 0; + } +</style> +<body> +<canvas id="dest" height="100" width="100"></canvas> +<script type="text/javascript"> + +var destCanvas = document.getElementById('dest'); +var destCtx = destCanvas.getContext('2d'); +destCtx.fillStyle = "#FF0000"; +destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height); +destCtx.fillStyle = "#00FFFF"; +destCtx.fillRect(0, 0, 25, 25); +destCtx.fillStyle = "#000000"; +destCtx.fillRect(2, 2, 20, 20); + +</script> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_12.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_12.html new file mode 100644 index 000000000..47debc796 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_12.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel=match href=drawimage_canvas_12_ref.html> +<style> + html, body { + margin: 0; + } +</style> +<canvas id="dest" height="100" width="100"></canvas> +<script> + +var sourceWidth = 50; +var sourceHeight = 50; +var smoothingEnabled = false; +var destCanvas = document.getElementById('dest'); +var sourceCanvas = document.createElement('canvas'); +sourceCanvas.width = sourceWidth; +sourceCanvas.height = sourceHeight; + +var sourceCtx = sourceCanvas.getContext('2d'); +sourceCtx.fillStyle = "#00FFFF"; +sourceCtx.fillRect(0, 0, sourceWidth, sourceHeight); +sourceCtx.fillStyle = "#000000"; +sourceCtx.fillRect(5,5,40,40); + +var destCtx = destCanvas.getContext('2d'); +destCtx.fillStyle = "#FF0000"; +destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height); +destCtx.imageSmoothingEnabled = smoothingEnabled; + +// Negative coordinates of the source rectangle +// The source area is clipped to fit the source image +// and the destination area is clipped in the same proportion +destCtx.drawImage(sourceCanvas, -25, -25, 50, 50, 0, 0, 50, 50); + +</script> diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_12_ref.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_12_ref.html new file mode 100644 index 000000000..190f74f93 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_12_ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> +</head> +<style> + html, body { + margin: 0; + } +</style> +<body> +<canvas id="dest" height="100" width="100"></canvas> +<script type="text/javascript"> + +var destCanvas = document.getElementById('dest'); +var destCtx = destCanvas.getContext('2d'); +destCtx.fillStyle = "#FF0000"; +destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height); +destCtx.fillStyle = "#00FFFF"; +destCtx.fillRect(0, 0, 25, 25); +destCtx.fillStyle = "#000000"; +destCtx.fillRect(5, 5, 20, 20); + +</script> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_1_ref.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_1_ref.html new file mode 100644 index 000000000..d0bac45ed --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_1_ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> +</head> +<style> + html, body { + margin: 0; + } + canvas { + display: block; + } +</style> +<body> +<canvas id="dest" height="100" width="100"></canvas> +<script type="text/javascript"> + +var sourceWidth = 50; +var sourceHeight = 50; +var destCanvas = document.getElementById('dest'); +var destCtx = destCanvas.getContext('2d'); +destCtx.fillStyle = "#FF0000"; +destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height); +destCtx.fillStyle = "#00FFFF"; +destCtx.fillRect(0, 0, sourceWidth, sourceHeight); +destCtx.fillStyle = "#000000"; +destCtx.fillRect(5, 5, 40, 40); + +</script> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_2.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_2.html new file mode 100644 index 000000000..b169d3743 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_2.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel=match href=drawimage_canvas_2_ref.html> +<style> + html, body { + margin: 0; + } +</style> +<canvas id="dest" height="100" width="100"></canvas> +<script> + +var sourceWidth = 50; +var sourceHeight = 50; +var smoothingEnabled = false; +var destCanvas = document.getElementById('dest'); +var sourceCanvas = document.createElement('canvas'); +sourceCanvas.width = sourceWidth; +sourceCanvas.height = sourceHeight; + +var sourceCtx = sourceCanvas.getContext('2d'); +sourceCtx.fillStyle = "#00FFFF"; +sourceCtx.fillRect(0, 0, sourceWidth, sourceHeight); +sourceCtx.fillStyle = "#000000"; +sourceCtx.fillRect(5,5,40,40); + +var destCtx = destCanvas.getContext('2d'); +destCtx.fillStyle = "#FF0000"; +destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height); +destCtx.imageSmoothingEnabled = smoothingEnabled; + +// 2 arguments, the dest origin is not 0,0 +// The source canvas will copied to the 25, 25 position of the destination canvas +destCtx.drawImage(sourceCanvas, 25, 25); + +</script> diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_2_ref.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_2_ref.html new file mode 100644 index 000000000..72ec289f7 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_2_ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> +</head> +<style> + html, body { + margin: 0; + } + canvas { + display: block; + } +</style> +<body> +<canvas id="dest" height="100" width="100"></canvas> +<script type="text/javascript"> + +var sourceWidth = 50; +var sourceHeight = 50; +var destCanvas = document.getElementById('dest'); +var destCtx = destCanvas.getContext('2d'); +destCtx.fillStyle = "#FF0000"; +destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height); +destCtx.fillStyle = "#00FFFF"; +destCtx.fillRect(25, 25, sourceWidth, sourceHeight); +destCtx.fillStyle = "#000000"; +destCtx.fillRect(30, 30, 40, 40); + +</script> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_3.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_3.html new file mode 100644 index 000000000..e59e5d352 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_3.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel=match href=drawimage_canvas_3_ref.html> +<style> + html, body { + margin: 0; + } +</style> +<canvas id="dest" height="100" width="100"></canvas> +<script> + +var sourceWidth = 50; +var sourceHeight = 50; +var smoothingEnabled = false; +var destCanvas = document.getElementById('dest'); +var sourceCanvas = document.createElement('canvas'); +sourceCanvas.width = sourceWidth; +sourceCanvas.height = sourceHeight; + +var sourceCtx = sourceCanvas.getContext('2d'); +sourceCtx.fillStyle = "#00FFFF"; +sourceCtx.fillRect(0, 0, sourceWidth, sourceHeight); +sourceCtx.fillStyle = "#000000"; +sourceCtx.fillRect(5,5,40,40); + +var destCtx = destCanvas.getContext('2d'); +destCtx.fillStyle = "#FF0000"; +destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height); +destCtx.imageSmoothingEnabled = smoothingEnabled; + +// 4 arguments, the source origin is not 0,0, the dest size is provided +// The source canvas will copied to the 50, 50 position of the destination canvas and +// on an area of 50x50 pixels +destCtx.drawImage(sourceCanvas, 50, 50, 50, 50); + +</script> diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_3_ref.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_3_ref.html new file mode 100644 index 000000000..3e153f1ca --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_3_ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> +</head> +<style> + html, body { + margin: 0; + } + canvas { + display: block; + } +</style> +<body> +<canvas id="dest" height="100" width="100"></canvas> +<script type="text/javascript"> + +var sourceWidth = 50; +var sourceHeight = 50; +var destCanvas = document.getElementById('dest'); +var destCtx = destCanvas.getContext('2d'); +destCtx.fillStyle = "#FF0000"; +destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height); +destCtx.fillStyle = "#00FFFF"; +destCtx.fillRect(50, 50, sourceWidth, sourceHeight); +destCtx.fillStyle = "#000000"; +destCtx.fillRect(55, 55, 40, 40); + +</script> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_4.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_4.html new file mode 100644 index 000000000..f3dd84e2a --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_4.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel=match href=drawimage_canvas_4_ref.html> +<style> + html, body { + margin: 0; + } +</style> +<canvas id="dest" height="100" width="100"></canvas> +<script> + +var sourceWidth = 50; +var sourceHeight = 50; +var smoothingEnabled = false; +var destCanvas = document.getElementById('dest'); +var sourceCanvas = document.createElement('canvas'); +sourceCanvas.width = sourceWidth; +sourceCanvas.height = sourceHeight; + +var sourceCtx = sourceCanvas.getContext('2d'); +sourceCtx.fillStyle = "#00FFFF"; +sourceCtx.fillRect(0, 0, sourceWidth, sourceHeight); +sourceCtx.fillStyle = "#000000"; +sourceCtx.fillRect(5,5,40,40); + +var destCtx = destCanvas.getContext('2d'); +destCtx.fillStyle = "#FF0000"; +destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height); +destCtx.imageSmoothingEnabled = smoothingEnabled; + +// 4 arguments, the dest origin is not 0,0 and the dest size is provided but +// does not match the size of the source. The image will be distorted +// The source canvas will copied to the 50,50 position of the destination canvas +// and it will be shrunk to a and area of 20x20 +destCtx.drawImage(sourceCanvas, 50, 50, 20, 20); + +</script> diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_4_ref.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_4_ref.html new file mode 100644 index 000000000..9a8cc9937 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_4_ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> +</head> +<style> + html, body { + margin: 0; + } +</style> +<body> +<canvas id="dest" height="100" width="100"></canvas> +<script type="text/javascript"> + +var destCanvas = document.getElementById('dest'); +var destCtx = destCanvas.getContext('2d'); +destCtx.fillStyle = "#FF0000"; +destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height); +destCtx.fillStyle = "#00FFFF"; +destCtx.fillRect(50, 50, 20, 20); +destCtx.fillStyle = "#000000"; +destCtx.fillRect(52, 52, 16, 16); + +</script> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_5.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_5.html new file mode 100644 index 000000000..2190847f8 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_5.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel=match href=drawimage_canvas_5_ref.html> +<style> + html, body { + margin: 0; + } +</style> +<canvas id="dest" height="100" width="100"></canvas> +<script> + +var sourceWidth = 50; +var sourceHeight = 50; +var smoothingEnabled = false; +var destCanvas = document.getElementById('dest'); +var sourceCanvas = document.createElement('canvas'); +sourceCanvas.width = sourceWidth; +sourceCanvas.height = sourceHeight; + +var sourceCtx = sourceCanvas.getContext('2d'); +sourceCtx.fillStyle = "#00FFFF"; +sourceCtx.fillRect(0, 0, sourceWidth, sourceHeight); +sourceCtx.fillStyle = "#000000"; +sourceCtx.fillRect(5,5,40,40); + +var destCtx = destCanvas.getContext('2d'); +destCtx.fillStyle = "#FF0000"; +destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height); +destCtx.imageSmoothingEnabled = smoothingEnabled; + +// The source canvas will copied to the 50,50 position of the destination canvas +// over an area of 50x25 pixels +// The copied image will be distorted along the x axis +destCtx.drawImage(sourceCanvas, 50, 50, 50, 20); + +</script> diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_5_ref.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_5_ref.html new file mode 100644 index 000000000..47dd63ee2 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_5_ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> +</head> +<style> + html, body { + margin: 0; + } +</style> +<body> +<canvas id="dest" height="100" width="100"></canvas> +<script type="text/javascript"> + +var destCanvas = document.getElementById('dest'); +var destCtx = destCanvas.getContext('2d'); +destCtx.fillStyle = "#FF0000"; +destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height); +destCtx.fillStyle = "#00FFFF"; +destCtx.fillRect(50, 50, 50, 20); +destCtx.fillStyle = "#000000"; +destCtx.fillRect(55, 52, 40, 16); + +</script> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_6.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_6.html new file mode 100644 index 000000000..2ce48d8fa --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_6.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel=match href=drawimage_canvas_6_ref.html> +<style> + html, body { + margin: 0; + } +</style> +<canvas id="dest" height="100" width="100"></canvas> +<script> + +var sourceWidth = 50; +var sourceHeight = 50; +var smoothingEnabled = false; +var destCanvas = document.getElementById('dest'); +var sourceCanvas = document.createElement('canvas'); +sourceCanvas.width = sourceWidth; +sourceCanvas.height = sourceHeight; + +var sourceCtx = sourceCanvas.getContext('2d'); +sourceCtx.fillStyle = "#00FFFF"; +sourceCtx.fillRect(0, 0, sourceWidth, sourceHeight); +sourceCtx.fillStyle = "#000000"; +sourceCtx.fillRect(5,5,40,40); + +var destCtx = destCanvas.getContext('2d'); +destCtx.fillStyle = "#FF0000"; +destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height); +destCtx.imageSmoothingEnabled = smoothingEnabled; + +// 8 arguments, both destination and source origins are 0, 0 +// An area of 25x25 pixels of the source image will be copied to +// an area of 25x25 pixels of the destination canvas +destCtx.drawImage(sourceCanvas, 0, 0, 25, 25, 0, 0, 25, 25); + +</script> diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_6_ref.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_6_ref.html new file mode 100644 index 000000000..190f74f93 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_6_ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> +</head> +<style> + html, body { + margin: 0; + } +</style> +<body> +<canvas id="dest" height="100" width="100"></canvas> +<script type="text/javascript"> + +var destCanvas = document.getElementById('dest'); +var destCtx = destCanvas.getContext('2d'); +destCtx.fillStyle = "#FF0000"; +destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height); +destCtx.fillStyle = "#00FFFF"; +destCtx.fillRect(0, 0, 25, 25); +destCtx.fillStyle = "#000000"; +destCtx.fillRect(5, 5, 20, 20); + +</script> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_7.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_7.html new file mode 100644 index 000000000..195290921 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_7.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel=match href=drawimage_canvas_7_ref.html> +<style> + html, body { + margin: 0; + } +</style> +<canvas id="dest" height="100" width="100"></canvas> +<script> + +var sourceWidth = 50; +var sourceHeight = 50; +var smoothingEnabled = false; +var destCanvas = document.getElementById('dest'); +var sourceCanvas = document.createElement('canvas'); +sourceCanvas.width = sourceWidth; +sourceCanvas.height = sourceHeight; + +var sourceCtx = sourceCanvas.getContext('2d'); +sourceCtx.fillStyle = "#00FFFF"; +sourceCtx.fillRect(0, 0, sourceWidth, sourceHeight); +sourceCtx.fillStyle = "#000000"; +sourceCtx.fillRect(5,5,40,40); + +var destCtx = destCanvas.getContext('2d'); +destCtx.fillStyle = "#FF0000"; +destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height); +destCtx.imageSmoothingEnabled = smoothingEnabled; + +// 8 arguments the destination origin is not 0,0 +// An area of 25x25 pixels of the source image will be copied to +// an area of 25x25 pixels of the destination canvas in the position 25,25 +destCtx.drawImage(sourceCanvas, 0, 0, 25, 25, 25, 25, 25, 25); + +</script> diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_7_ref.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_7_ref.html new file mode 100644 index 000000000..51b2b276c --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_7_ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> +</head> +<style> + html, body { + margin: 0; + } +</style> +<body> +<canvas id="dest" height="100" width="100"></canvas> +<script type="text/javascript"> + +var destCanvas = document.getElementById('dest'); +var destCtx = destCanvas.getContext('2d'); +destCtx.fillStyle = "#FF0000"; +destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height); +destCtx.fillStyle = "#00FFFF"; +destCtx.fillRect(25, 25, 25, 25); +destCtx.fillStyle = "#000000"; +destCtx.fillRect(30, 30, 20, 20); + +</script> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_8.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_8.html new file mode 100644 index 000000000..c47a5b55c --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_8.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel=match href=drawimage_canvas_8_ref.html> +<style> + html, body { + margin: 0; + } +</style> +<canvas id="dest" height="100" width="100"></canvas> +<script> + +var sourceWidth = 50; +var sourceHeight = 50; +var smoothingEnabled = false; +var destCanvas = document.getElementById('dest'); +var sourceCanvas = document.createElement('canvas'); +sourceCanvas.width = sourceWidth; +sourceCanvas.height = sourceHeight; + +var sourceCtx = sourceCanvas.getContext('2d'); +sourceCtx.fillStyle = "#00FFFF"; +sourceCtx.fillRect(0, 0, sourceWidth, sourceHeight); +sourceCtx.fillStyle = "#000000"; +sourceCtx.fillRect(5,5,40,40); + +var destCtx = destCanvas.getContext('2d'); +destCtx.fillStyle = "#FF0000"; +destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height); +destCtx.imageSmoothingEnabled = smoothingEnabled; + +// The source rectangle overflows the source image +// The source area is clipped to fit the source image +// and the destination are is clipped in the same proportion +destCtx.drawImage(sourceCanvas, 25, 25, 50, 50, 0, 0, 50, 50); + +</script> diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_8_ref.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_8_ref.html new file mode 100644 index 000000000..652bf6eb9 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_8_ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> +</head> +<style> + html, body { + margin: 0; + } +</style> +<body> +<canvas id="dest" height="100" width="100"></canvas> +<script type="text/javascript"> + +var destCanvas = document.getElementById('dest'); +var destCtx = destCanvas.getContext('2d'); +destCtx.fillStyle = "#FF0000"; +destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height); +destCtx.fillStyle = "#00FFFF"; +destCtx.fillRect(0, 0, 25, 25); +destCtx.fillStyle = "#000000"; +destCtx.fillRect(0, 0, 20, 20); + +</script> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_9.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_9.html new file mode 100644 index 000000000..8b48e644f --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_9.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel=match href=drawimage_canvas_9_ref.html> +<style> + html, body { + margin: 0; + } +</style> +<body> +<canvas id="dest" height="100" width="100"></canvas> +<script> + +var sourceWidth = 50; +var sourceHeight = 50; +var smoothingEnabled = false; +var destCanvas = document.getElementById('dest'); +var sourceCanvas = document.createElement('canvas'); +sourceCanvas.width = sourceWidth; +sourceCanvas.height = sourceHeight; + +var sourceCtx = sourceCanvas.getContext('2d'); +sourceCtx.fillStyle = "#00FFFF"; +sourceCtx.fillRect(0, 0, sourceWidth, sourceHeight); +sourceCtx.fillStyle = "#000000"; +sourceCtx.fillRect(5,5,40,40); + +var destCtx = destCanvas.getContext('2d'); +destCtx.fillStyle = "#FF0000"; +destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height); +destCtx.imageSmoothingEnabled = smoothingEnabled; + +// The destination rectangle has negative width and height +// An exception is raised and nothing is drawn +try { + destCtx.drawImage(sourceCanvas, 25, 50, 50, 0, 0, -100, -100); + // It makes the test fail if the exception is not thrown + destCtx.fillStyle = "#0000FF"; + destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height); +} +catch(err) { +} + +</script> diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_9_ref.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_9_ref.html new file mode 100644 index 000000000..b9be7e514 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_9_ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> +</head> +<style> + html, body { + margin: 0; + } +</style> +<body> +<canvas id="dest" height="100" width="100"></canvas> +<script type="text/javascript"> + +var destCanvas = document.getElementById('dest'); +var destCtx = destCanvas.getContext('2d'); +destCtx.fillStyle = "#FF0000"; +destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height); + +</script> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_1.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_1.html new file mode 100644 index 000000000..b9de85a97 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_1.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel=match href=drawimage_html_image_1_ref.html> +<style> + html, body { + margin: 0; + } +</style> +<canvas id="dest" height="100" width="100"></canvas> +<script> + +var sourceWidth = 100; +var sourceHeight = 100; +var smoothingEnabled = false; +var destCanvas = document.getElementById('dest'); +var sourceImg = document.createElement('img'); +sourceImg.src = '../2x2.png' +sourceImg.width = sourceWidth; +sourceImg.height = sourceHeight; + +sourceImg.onload = function() { + var destCtx = destCanvas.getContext('2d'); + destCtx.fillStyle = "#FF0000"; + destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height); + destCtx.imageSmoothingEnabled = smoothingEnabled; + // 2 arguments, the dest origin is 0,0 + // The source canvas will copied to the 0,0 position of the destination canvas + destCtx.drawImage(sourceImg, 0, 0); +} +</script> diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_10.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_10.html new file mode 100644 index 000000000..3b11b730f --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_10.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel=match href=drawimage_html_image_10_ref.html> +<style> + html, body { + margin: 0; + } +</style> +<canvas id="dest" height="100" width="100"></canvas> +<script> + +var sourceWidth = 128; +var sourceHeight = 128; +var smoothingEnabled = false; +var destCanvas = document.getElementById('dest'); +var sourceImg = document.createElement('img'); +sourceImg.src = '../2x2.png' +sourceImg.width = sourceWidth; +sourceImg.height = sourceHeight; + +sourceImg.onload = function() { + var destCtx = destCanvas.getContext('2d'); + destCtx.fillStyle = "#FF0000"; + destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height); + destCtx.imageSmoothingEnabled = smoothingEnabled; + + // The destination rectangle is larger than the destination canvas. + // When the destination rectangle is outside the destination image (the scratch bitmap), + // the pixels that land outside the scratch bitmap are discarded, + // as if the destination was an infinite canvas + // whose rendering was clipped to the dimensions of the scratch bitmap. + destCtx.drawImage(sourceImg, 0, 0, 512, 512, 0, 0, 256, 256); +} +</script> diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_10_ref.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_10_ref.html new file mode 100644 index 000000000..60545df17 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_10_ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> +</head> +<style> + html, body { + margin: 0; + } + #destination { + width: 100px; + height: 100px; + background-image: url("../2x2.png"); + } +</style> +<body> +<div id="destination"></div> +</body> +</html> diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_11.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_11.html new file mode 100644 index 000000000..dd1a6149b --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_11.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel=match href=drawimage_html_image_11_ref.html> +<style> + html, body { + margin: 0; + } +</style> +<canvas id="dest" height="100" width="100"></canvas> +<script> + +var sourceWidth = 128; +var sourceHeight = 128; +var smoothingEnabled = false; +var destCanvas = document.getElementById('dest'); +var sourceImg = document.createElement('img'); +sourceImg.src = '../2x2.png' +sourceImg.width = sourceWidth; +sourceImg.height = sourceHeight; + +sourceImg.onload = function() { + var destCtx = destCanvas.getContext('2d'); + destCtx.fillStyle = "#FF0000"; + destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height); + destCtx.imageSmoothingEnabled = smoothingEnabled; + + // The source rectangle is larger than the source canvas + // The source area is clipped to fit the source image + // and the destination are is clipped in the same proportion + destCtx.drawImage(sourceImg, 0, 0, 2048, 2048, 0, 0, 800, 800); +} +</script> diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_11_ref.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_11_ref.html new file mode 100644 index 000000000..10d8885f2 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_11_ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> +</head> +<style> + html, body { + margin: 0; + } + #destination { + width: 100px; + height: 100px; + background-color: #FA6FF2; + } +</style> +<body> +<div id="destination" height="100" width="100"></canvas> +</body> +</html> diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_12.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_12.html new file mode 100644 index 000000000..402a661f9 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_12.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel=match href=drawimage_html_image_12_ref.html> +<style> + html, body { + margin: 0; + } +</style> +<canvas id="dest" height="100" width="100"></canvas> +<script> + +var sourceWidth = 128; +var sourceHeight = 128; +var smoothingEnabled = false; +var destCanvas = document.getElementById('dest'); +var sourceImg = document.createElement('img'); +sourceImg.src = '../2x2.png' +sourceImg.width = sourceWidth; +sourceImg.height = sourceHeight; + +sourceImg.onload = function() { + var destCtx = destCanvas.getContext('2d'); + destCtx.fillStyle = "#FF0000"; + destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height); + destCtx.imageSmoothingEnabled = smoothingEnabled; + + // Negative coordinates of the source rectangle + // The source area is clipped to fit the source image + // and the destination area is clipped in the same proportion + destCtx.drawImage(sourceImg, -25, -25, 50, 50, 0, 0, 50, 50); +} +</script> diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_12_ref.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_12_ref.html new file mode 100644 index 000000000..5f6f22111 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_12_ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> +</head> +<style> + html, body { + margin: 0; + } + + #destination { + width: 100px; + height: 100px; + background-color: red; + } + + #img { + position: relative; + top: 0; + left: 0; + width: 25px; + height: 25px; + background-color: #FA6FF2; + } + +</style> +<body> +<div id="destination"> + <div id="img"><div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_13.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_13.html new file mode 100644 index 000000000..1faecc325 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_13.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel=match href=drawimage_html_image_13_ref.html> +<style> + html, body { + margin: 0; + } +</style> +<canvas id="dest" height="100" width="100"></canvas> +<script> + +var sourceWidth = 128; +var sourceHeight = 128; +var smoothingEnabled = false; +var destCanvas = document.getElementById('dest'); +var sourceImg = document.createElement('img'); +sourceImg.width = sourceWidth; +sourceImg.height = sourceHeight; + +var destCtx = destCanvas.getContext('2d'); +destCtx.fillStyle = "#FF0000"; +destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height); +destCtx.imageSmoothingEnabled = smoothingEnabled; + +// The source Image doesn't have a src url defined +// It should throw an exception because the HTMLImageElement is +// in the broken state +// https://html.spec.whatwg.org/multipage/scripting.html#check-the-usability-of-the-image-argument +try { + destCtx.drawImage(sourceImg, 0, 0); + // It makes the test fail if the exception is not thrown + destCtx.fillStyle = "#0000FF"; + destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height); +} +catch(err) { +} + +</script> diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_13_ref.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_13_ref.html new file mode 100644 index 000000000..9ac306a5c --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_13_ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> +</head> +<style> + html, body { + margin: 0; + } + + #destination { + width: 100px; + height: 100px; + background-color: red; + } +</style> +<body> +<div id="destination"></div> +</body> +</html> diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_1_ref.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_1_ref.html new file mode 100644 index 000000000..60545df17 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_1_ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> +</head> +<style> + html, body { + margin: 0; + } + #destination { + width: 100px; + height: 100px; + background-image: url("../2x2.png"); + } +</style> +<body> +<div id="destination"></div> +</body> +</html> diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_2.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_2.html new file mode 100644 index 000000000..e20ea97e2 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_2.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel=match href=drawimage_html_image_2_ref.html> +<style> + html, body { + margin: 0; + } +</style> +<canvas id="dest" height="100" width="100"></canvas> +<script> + +var sourceWidth = 100; +var sourceHeight = 100; +var smoothingEnabled = false; +var destCanvas = document.getElementById('dest'); +var sourceImg = document.createElement('img'); +sourceImg.src = '../2x2.png' +sourceImg.width = sourceWidth; +sourceImg.height = sourceHeight; + +sourceImg.onload = function() { + var destCtx = destCanvas.getContext('2d'); + destCtx.fillStyle = "#FF0000"; + destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height); + destCtx.imageSmoothingEnabled = smoothingEnabled; + + // 2 arguments, the dest origin is not 0,0 + // The source image will copied to the 25, 25 position of the destination canvas + destCtx.drawImage(sourceImg, 25, 25); +} +</script> diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_2_ref.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_2_ref.html new file mode 100644 index 000000000..c45352835 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_2_ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> +</head> +<style> + html, body { + margin: 0; + } + + #destination { + width: 100px; + height: 100px; + background-color: red; + background-image: url("../2x2.png"); + background-position: 25px 25px; + background-repeat: no-repeat; + } +</style> +<body> +<div id="destination"></div> +</body> +</html> diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_3.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_3.html new file mode 100644 index 000000000..e09c2ab00 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_3.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel=match href=drawimage_html_image_3_ref.html> +<style> + html, body { + margin: 0; + } +</style> +<canvas id="dest" height="100" width="100"></canvas> +<script> + +var sourceWidth = 100; +var sourceHeight = 100; +var smoothingEnabled = true; +var destCanvas = document.getElementById('dest'); +var sourceImg = document.createElement('img'); +sourceImg.src = '../2x2.png' +sourceImg.width = sourceWidth; +sourceImg.height = sourceHeight; + +sourceImg.onload = function() { + var destCtx = destCanvas.getContext('2d'); + destCtx.fillStyle = "#FF0000"; + destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height); + destCtx.imageSmoothingEnabled = smoothingEnabled; + // 4 arguments, the source origin is not 0,0, the dest size is provided + // The source canvas will copied to the 50, 50 position of the destination canvas and + // on an area of 50x50 pixels + destCtx.drawImage(sourceImg, 50, 50, 50, 50); +} +</script> diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_3_ref.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_3_ref.html new file mode 100644 index 000000000..b72687a8a --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_3_ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> +</head> +<style> + html, body { + margin: 0; + } + #destination { + width: 100px; + height: 100px; + background-color: red; + background-image: url("../2x2.png"); + background-position: 50px 50px; + background-repeat: no-repeat; + background-size: 50px 50px; + } +</style> +<body> +<div id="destination"></div> +</body> +</html> diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_4.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_4.html new file mode 100644 index 000000000..7f029ab0a --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_4.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel=match href=drawimage_html_image_4_ref.html> +<style> + html, body { + margin: 0; + } +</style> +<canvas id="dest" height="100" width="100"></canvas> +<script> + +var sourceWidth = 100; +var sourceHeight = 100; +var smoothingEnabled = false; +var destCanvas = document.getElementById('dest'); +var sourceImg = document.createElement('img'); +sourceImg.src = '../2x2.png' +sourceImg.width = sourceWidth; +sourceImg.height = sourceHeight; + +sourceImg.onload = function() { + var destCtx = destCanvas.getContext('2d'); + destCtx.fillStyle = "#FF0000"; + destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height); + destCtx.imageSmoothingEnabled = smoothingEnabled; + // 4 arguments, the dest origin is not 0,0 and the dest size is provided but + // does not match the size of the source. The image will be distorted + // The source canvas will copied to the 50,50 position of the destination canvas + // and it will be shrunk to a and area of 16x16 + destCtx.drawImage(sourceImg, 50, 50, 16, 16); +} +</script> diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_4_ref.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_4_ref.html new file mode 100644 index 000000000..baa6591a2 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_4_ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> +</head> +<style> + html, body { + margin: 0; + } + #destination { + width: 100px; + height: 100px; + background-color: red; + } + + #destination img{ + position: absolute; + top: 50px; + left: 50px; + width: 16px; + height: 16px; + } +</style> +<body> +<div id="destination"> + <img src="../2x2.png" /> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_5.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_5.html new file mode 100644 index 000000000..d221176ad --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_5.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel=match href=drawimage_html_image_5_ref.html> +<style> + html, body { + margin: 0; + } +</style> +<canvas id="dest" height="100" width="100"></canvas> +<script> + +var sourceWidth = 100; +var sourceHeight = 100; +var smoothingEnabled = false; +var destCanvas = document.getElementById('dest'); +var sourceImg = document.createElement('img'); +sourceImg.src = '../2x2.png' +sourceImg.width = sourceWidth; +sourceImg.height = sourceHeight; + +sourceImg.onload = function() { + var destCtx = destCanvas.getContext('2d'); + destCtx.fillStyle = "#FF0000"; + destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height); + destCtx.imageSmoothingEnabled = smoothingEnabled; + // The source canvas will copied to the 50,50 position of the destination canvas + // over an area of 64x32 pixels + // The copied image will be distorted along the x axis + destCtx.drawImage(sourceImg, 50, 50, 64, 32); +} +</script> diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_5_ref.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_5_ref.html new file mode 100644 index 000000000..66b7cc194 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_5_ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> +</head> +<style> + html, body { + margin: 0; + } + #destination { + width: 100px; + height: 100px; + background-color: red; + overflow: hidden; + } + + #destination .img{ + position: relative; + top: 50px; + left: 50px; + width: 64px; + height: 32px; + overflow: hidden; + } + + #destination .img img{ + width: 100%; + height: 100%; + } + +</style> +<body> +<div id="destination"> + <div class="img"> + <img src="../2x2.png" /> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_6.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_6.html new file mode 100644 index 000000000..a32162a46 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_6.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel=match href=drawimage_html_image_6_ref.html> +<style> + html, body { + margin: 0; + } +</style> +<canvas id="dest" height="100" width="100"></canvas> +<script> + +var sourceWidth = 100; +var sourceHeight = 100; +var smoothingEnabled = false; +var destCanvas = document.getElementById('dest'); +var sourceImg = document.createElement('img'); +sourceImg.src = '../2x2.png' +sourceImg.width = sourceWidth; +sourceImg.height = sourceHeight; + +sourceImg.onload = function() { + var destCtx = destCanvas.getContext('2d'); + destCtx.fillStyle = "#FF0000"; + destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height); + destCtx.imageSmoothingEnabled = smoothingEnabled; + + // 8 arguments, both destination and source origins are 0, 0 + // An area of 32x32 pixels of the source image will be copied to + // an area of 32x32 pixels of the destination canvas + destCtx.drawImage(sourceImg, 0, 0, 32, 32, 0, 0, 32, 32); +} +</script> diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_6_ref.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_6_ref.html new file mode 100644 index 000000000..d73433755 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_6_ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> +</head> +<style> + html, body { + margin: 0; + } + #destination { + width: 100px; + height: 100px; + background-color: red; + background-color: red; + background-image: url("../2x2.png"); + background-position: -32px -32px; + background-size: 64px 64px; + background-repeat: no-repeat; + } + +</style> +<body> +<div id="destination"></div> +</body> +</html> diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_7.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_7.html new file mode 100644 index 000000000..b902df0c2 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_7.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel=match href=drawimage_html_image_7_ref.html> +<style> + html, body { + margin: 0; + } +</style> +<canvas id="dest" height="100" width="100"></canvas> +<script> + +var sourceWidth = 100; +var sourceHeight = 100; +var smoothingEnabled = false; +var destCanvas = document.getElementById('dest'); +var sourceImg = document.createElement('img'); +sourceImg.src = '../2x2.png' +sourceImg.width = sourceWidth; +sourceImg.height = sourceHeight; + +sourceImg.onload = function() { + var destCtx = destCanvas.getContext('2d'); + destCtx.fillStyle = "#FF0000"; + destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height); + destCtx.imageSmoothingEnabled = smoothingEnabled; + + // 8 arguments the destination origin is not 0,0 + // An area of 32x32 pixels of the source image will be copied to + // an area of 32x32 pixels of the destination canvas in the position 32,32 + destCtx.drawImage(sourceImg, 0, 0, 32, 32, 32, 32, 32, 32); +} +</script> diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_7_ref.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_7_ref.html new file mode 100644 index 000000000..e823ffbb7 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_7_ref.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> +</head> +<style> + html, body { + margin: 0; + } + + #destination { + width: 100px; + height: 100px; + background-color: red; + } + + #img { + position: relative; + top: 32px; + left: 32px; + width: 32px; + height: 32px; + background-image: url("../2x2.png"); + background-position: -32px -32px; + background-size: 64px 64px; + background-repeat: no-repeat; + } + +</style> +<body> +<div id="destination"> + <div id="img"><div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_8.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_8.html new file mode 100644 index 000000000..9b2301e29 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_8.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel=match href=drawimage_html_image_8_ref.html> +<style> + html, body { + margin: 0; + } +</style> +<canvas id="dest" height="100" width="100"></canvas> +<script> + +var sourceWidth = 100; +var sourceHeight = 100; +var smoothingEnabled = false; +var destCanvas = document.getElementById('dest'); +var sourceImg = document.createElement('img'); +sourceImg.src = '../2x2.png' +sourceImg.width = sourceWidth; +sourceImg.height = sourceHeight; + +sourceImg.onload = function() { + var destCtx = destCanvas.getContext('2d'); + destCtx.fillStyle = "#FF0000"; + destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height); + destCtx.imageSmoothingEnabled = smoothingEnabled; + + // The source rectangle overflows the source image + // The source area is clipped to fit the source image + // and the destination are is clipped in the same proportion + destCtx.drawImage(sourceImg, 32, 32, 32, 32, 0, 0, 32, 32); +} +</script> diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_8_ref.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_8_ref.html new file mode 100644 index 000000000..1a025d26d --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_8_ref.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> +</head> +<style> + html, body { + margin: 0; + } + + #destination { + width: 100px; + height: 100px; + background-color: red; + } + + #img { + position: relative; + top: 0px; + left: 0px; + width: 32px; + height: 32px; + background-image: url("../2x2.png"); + background-position: -32px -32px; + background-size: 64px 64px; + background-repeat: no-repeat; + } + +</style> +<body> +<div id="destination"> + <div id="img"><div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_9.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_9.html new file mode 100644 index 000000000..73a872f0c --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_9.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel=match href=drawimage_html_image_9_ref.html> +<style> + html, body { + margin: 0; + } +</style> +<canvas id="dest" height="100" width="100"></canvas> +<script> + +var sourceWidth = 100; +var sourceHeight = 100; +var smoothingEnabled = false; +var destCanvas = document.getElementById('dest'); +var sourceImg = document.createElement('img'); +sourceImg.src = '../2x2.png' +sourceImg.width = sourceWidth; +sourceImg.height = sourceHeight; + +var destCtx = destCanvas.getContext('2d'); +destCtx.fillStyle = "#FF0000"; +destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height); +destCtx.imageSmoothingEnabled = smoothingEnabled; + +// The destination rectangle has negative width and height +// An exception is raised and nothing is drawn +try { + destCtx.drawImage(sourceImg, 25, 50, 50, 0, 0, -100, -100); + // It makes the test fail if the exception is not thrown + destCtx.fillStyle = "#0000FF"; + destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height); +} +catch(err) { +} + +</script> diff --git a/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_9_ref.html b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_9_ref.html new file mode 100644 index 000000000..5341e05c1 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_9_ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> +</head> +<style> + html, body { + margin: 0; + } + #destination { + width: 100px; + height: 100px; + background-color: red; + } +</style> +<body> +<div id="destination"></div> +</body> +</html> |
