diff options
Diffstat (limited to 'testing/web-platform/tests/html/canvas/element/path-objects')
199 files changed, 7751 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.angle.1.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.angle.1.html new file mode 100644 index 0000000000..85ebff4c0a --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.angle.1.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.arc.angle.1</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.arc.angle.1</h1> +<p class="desc">arc() draws pi/2 .. -pi anticlockwise correctly</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("arc() draws pi/2 .. -pi anticlockwise correctly"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#0f0'; + ctx.fillRect(0, 0, 100, 50); + ctx.fillStyle = '#f00'; + ctx.beginPath(); + ctx.moveTo(100, 0); + ctx.arc(100, 0, 150, Math.PI/2, -Math.PI, true); + ctx.fill(); + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.angle.2.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.angle.2.html new file mode 100644 index 0000000000..7eefabd993 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.angle.2.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.arc.angle.2</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.arc.angle.2</h1> +<p class="desc">arc() draws -3pi/2 .. -pi anticlockwise correctly</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("arc() draws -3pi/2 .. -pi anticlockwise correctly"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#0f0'; + ctx.fillRect(0, 0, 100, 50); + ctx.fillStyle = '#f00'; + ctx.beginPath(); + ctx.moveTo(100, 0); + ctx.arc(100, 0, 150, -3*Math.PI/2, -Math.PI, true); + ctx.fill(); + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.angle.3.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.angle.3.html new file mode 100644 index 0000000000..899c50dc90 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.angle.3.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.arc.angle.3</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.arc.angle.3</h1> +<p class="desc">arc() wraps angles mod 2pi when anticlockwise and end > start+2pi</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("arc() wraps angles mod 2pi when anticlockwise and end > start+2pi"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#0f0'; + ctx.fillRect(0, 0, 100, 50); + ctx.fillStyle = '#f00'; + ctx.beginPath(); + ctx.moveTo(100, 0); + ctx.arc(100, 0, 150, (512+1/2)*Math.PI, (1024-1)*Math.PI, true); + ctx.fill(); + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.angle.4.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.angle.4.html new file mode 100644 index 0000000000..3f1bd84d69 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.angle.4.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.arc.angle.4</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.arc.angle.4</h1> +<p class="desc">arc() draws a full circle when clockwise and end > start+2pi</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("arc() draws a full circle when clockwise and end > start+2pi"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.fillStyle = '#0f0'; + ctx.beginPath(); + ctx.moveTo(50, 25); + ctx.arc(50, 25, 60, (512+1/2)*Math.PI, (1024-1)*Math.PI, false); + ctx.fill(); + _assertPixel(canvas, 1,1, 0,255,0,255); + _assertPixel(canvas, 98,1, 0,255,0,255); + _assertPixel(canvas, 1,48, 0,255,0,255); + _assertPixel(canvas, 98,48, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.angle.5.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.angle.5.html new file mode 100644 index 0000000000..2373bd4f0a --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.angle.5.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.arc.angle.5</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.arc.angle.5</h1> +<p class="desc">arc() wraps angles mod 2pi when clockwise and start > end+2pi</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("arc() wraps angles mod 2pi when clockwise and start > end+2pi"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#0f0'; + ctx.fillRect(0, 0, 100, 50); + ctx.fillStyle = '#f00'; + ctx.beginPath(); + ctx.moveTo(100, 0); + ctx.arc(100, 0, 150, (1024-1)*Math.PI, (512+1/2)*Math.PI, false); + ctx.fill(); + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.angle.6.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.angle.6.html new file mode 100644 index 0000000000..b0b03cff79 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.angle.6.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.arc.angle.6</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.arc.angle.6</h1> +<p class="desc">arc() draws a full circle when anticlockwise and start > end+2pi</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("arc() draws a full circle when anticlockwise and start > end+2pi"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.fillStyle = '#0f0'; + ctx.beginPath(); + ctx.moveTo(50, 25); + ctx.arc(50, 25, 60, (1024-1)*Math.PI, (512+1/2)*Math.PI, true); + ctx.fill(); + _assertPixel(canvas, 1,1, 0,255,0,255); + _assertPixel(canvas, 98,1, 0,255,0,255); + _assertPixel(canvas, 1,48, 0,255,0,255); + _assertPixel(canvas, 98,48, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.default.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.default.html new file mode 100644 index 0000000000..b52941fe3f --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.default.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.arc.default</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.arc.default</h1> +<p class="desc">arc() with missing last argument defaults to clockwise</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("arc() with missing last argument defaults to clockwise"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#0f0'; + ctx.fillRect(0, 0, 100, 50); + ctx.fillStyle = '#f00'; + ctx.beginPath(); + ctx.moveTo(100, 0); + ctx.arc(100, 0, 150, -Math.PI, Math.PI/2); + ctx.fill(); + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.empty.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.empty.html new file mode 100644 index 0000000000..295ee4bbb2 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.empty.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.arc.empty</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.arc.empty</h1> +<p class="desc">arc() with an empty path does not draw a straight line to the start point</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("arc() with an empty path does not draw a straight line to the start point"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#0f0'; + ctx.fillRect(0, 0, 100, 50); + ctx.lineWidth = 50; + ctx.strokeStyle = '#f00'; + ctx.beginPath(); + ctx.arc(200, 25, 5, 0, 2*Math.PI, true); + ctx.stroke(); + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.end.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.end.html new file mode 100644 index 0000000000..a581a40e8e --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.end.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.arc.end</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.arc.end</h1> +<p class="desc">arc() adds the end point of the arc to the subpath</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("arc() adds the end point of the arc to the subpath"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.lineWidth = 50; + ctx.strokeStyle = '#0f0'; + ctx.beginPath(); + ctx.moveTo(-100, 0); + ctx.arc(-100, 0, 25, -Math.PI/2, Math.PI/2, true); + ctx.lineTo(100, 25); + ctx.stroke(); + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.negative.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.negative.html new file mode 100644 index 0000000000..fd81ebadcd --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.negative.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.arc.negative</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.arc.negative</h1> +<p class="desc">arc() with negative radius 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> + +<ul id="d"></ul> +<script> +var t = async_test("arc() with negative radius throws INDEX_SIZE_ERR"); +_addTest(function(canvas, ctx) { + + assert_throws_dom("INDEX_SIZE_ERR", function() { ctx.arc(0, 0, -1, 0, 0, true); }); + var path = new Path2D(); + assert_throws_dom("INDEX_SIZE_ERR", function() { path.arc(10, 10, -5, 0, 1, false); }); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.nonempty.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.nonempty.html new file mode 100644 index 0000000000..982829013d --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.nonempty.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.arc.nonempty</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.arc.nonempty</h1> +<p class="desc">arc() with a non-empty path does draw a straight line to the start point</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("arc() with a non-empty path does draw a straight line to the start point"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.lineWidth = 50; + ctx.strokeStyle = '#0f0'; + ctx.beginPath(); + ctx.moveTo(0, 25); + ctx.arc(200, 25, 5, 0, 2*Math.PI, true); + ctx.stroke(); + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.nonfinite.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.nonfinite.html new file mode 100644 index 0000000000..a1b15e7a88 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.nonfinite.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.arc.nonfinite</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.arc.nonfinite</h1> +<p class="desc">arc() 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("arc() with Infinity/NaN is ignored"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.moveTo(0, 0); + ctx.lineTo(100, 0); + ctx.arc(Infinity, 0, 50, 0, 2*Math.PI, true); + ctx.arc(-Infinity, 0, 50, 0, 2*Math.PI, true); + ctx.arc(NaN, 0, 50, 0, 2*Math.PI, true); + ctx.arc(0, Infinity, 50, 0, 2*Math.PI, true); + ctx.arc(0, -Infinity, 50, 0, 2*Math.PI, true); + ctx.arc(0, NaN, 50, 0, 2*Math.PI, true); + ctx.arc(0, 0, Infinity, 0, 2*Math.PI, true); + ctx.arc(0, 0, -Infinity, 0, 2*Math.PI, true); + ctx.arc(0, 0, NaN, 0, 2*Math.PI, true); + ctx.arc(0, 0, 50, Infinity, 2*Math.PI, true); + ctx.arc(0, 0, 50, -Infinity, 2*Math.PI, true); + ctx.arc(0, 0, 50, NaN, 2*Math.PI, true); + ctx.arc(0, 0, 50, 0, Infinity, true); + ctx.arc(0, 0, 50, 0, -Infinity, true); + ctx.arc(0, 0, 50, 0, NaN, true); + ctx.arc(Infinity, Infinity, 50, 0, 2*Math.PI, true); + ctx.arc(Infinity, Infinity, Infinity, 0, 2*Math.PI, true); + ctx.arc(Infinity, Infinity, Infinity, Infinity, 2*Math.PI, true); + ctx.arc(Infinity, Infinity, Infinity, Infinity, Infinity, true); + ctx.arc(Infinity, Infinity, Infinity, 0, Infinity, true); + ctx.arc(Infinity, Infinity, 50, Infinity, 2*Math.PI, true); + ctx.arc(Infinity, Infinity, 50, Infinity, Infinity, true); + ctx.arc(Infinity, Infinity, 50, 0, Infinity, true); + ctx.arc(Infinity, 0, Infinity, 0, 2*Math.PI, true); + ctx.arc(Infinity, 0, Infinity, Infinity, 2*Math.PI, true); + ctx.arc(Infinity, 0, Infinity, Infinity, Infinity, true); + ctx.arc(Infinity, 0, Infinity, 0, Infinity, true); + ctx.arc(Infinity, 0, 50, Infinity, 2*Math.PI, true); + ctx.arc(Infinity, 0, 50, Infinity, Infinity, true); + ctx.arc(Infinity, 0, 50, 0, Infinity, true); + ctx.arc(0, Infinity, Infinity, 0, 2*Math.PI, true); + ctx.arc(0, Infinity, Infinity, Infinity, 2*Math.PI, true); + ctx.arc(0, Infinity, Infinity, Infinity, Infinity, true); + ctx.arc(0, Infinity, Infinity, 0, Infinity, true); + ctx.arc(0, Infinity, 50, Infinity, 2*Math.PI, true); + ctx.arc(0, Infinity, 50, Infinity, Infinity, true); + ctx.arc(0, Infinity, 50, 0, Infinity, true); + ctx.arc(0, 0, Infinity, Infinity, 2*Math.PI, true); + ctx.arc(0, 0, Infinity, Infinity, Infinity, true); + ctx.arc(0, 0, Infinity, 0, Infinity, true); + ctx.arc(0, 0, 50, Infinity, Infinity, true); + ctx.lineTo(100, 50); + ctx.lineTo(0, 50); + ctx.fillStyle = '#0f0'; + ctx.fill(); + _assertPixel(canvas, 50,25, 0,255,0,255); + _assertPixel(canvas, 90,45, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.scale.1.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.scale.1.html new file mode 100644 index 0000000000..951c9ae26c --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.scale.1.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.arc.scale.1</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.arc.scale.1</h1> +<p class="desc">Non-uniformly scaled arcs are the right shape</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("Non-uniformly scaled arcs are the right shape"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.scale(2, 0.5); + ctx.fillStyle = '#0f0'; + ctx.beginPath(); + ctx.arc(25, 50, 56, 0, 2*Math.PI, false); + ctx.fill(); + ctx.fillStyle = '#f00'; + ctx.beginPath(); + ctx.moveTo(-25, 50); + ctx.arc(-25, 50, 24, 0, 2*Math.PI, false); + ctx.moveTo(75, 50); + ctx.arc(75, 50, 24, 0, 2*Math.PI, false); + ctx.moveTo(25, -25); + ctx.arc(25, -25, 24, 0, 2*Math.PI, false); + ctx.moveTo(25, 125); + ctx.arc(25, 125, 24, 0, 2*Math.PI, false); + ctx.fill(); + + _assertPixel(canvas, 0,0, 0,255,0,255); + _assertPixel(canvas, 50,0, 0,255,0,255); + _assertPixel(canvas, 99,0, 0,255,0,255); + _assertPixel(canvas, 0,25, 0,255,0,255); + _assertPixel(canvas, 50,25, 0,255,0,255); + _assertPixel(canvas, 99,25, 0,255,0,255); + _assertPixel(canvas, 0,49, 0,255,0,255); + _assertPixel(canvas, 50,49, 0,255,0,255); + _assertPixel(canvas, 99,49, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.scale.2.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.scale.2.html new file mode 100644 index 0000000000..6b39e16222 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.scale.2.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.arc.scale.2</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.arc.scale.2</h1> +<p class="desc">Highly scaled arcs are the right shape</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("Highly scaled arcs are the right shape"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.scale(100, 100); + ctx.strokeStyle = '#0f0'; + ctx.lineWidth = 1.2; + ctx.beginPath(); + ctx.arc(0, 0, 0.6, 0, Math.PI/2, false); + ctx.stroke(); + + _assertPixel(canvas, 1,1, 0,255,0,255); + _assertPixel(canvas, 50,1, 0,255,0,255); + _assertPixel(canvas, 98,1, 0,255,0,255); + _assertPixel(canvas, 1,25, 0,255,0,255); + _assertPixel(canvas, 50,25, 0,255,0,255); + _assertPixel(canvas, 98,25, 0,255,0,255); + _assertPixel(canvas, 1,48, 0,255,0,255); + _assertPixel(canvas, 50,48, 0,255,0,255); + _assertPixel(canvas, 98,48, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.selfintersect.1.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.selfintersect.1.html new file mode 100644 index 0000000000..3bc81bd77a --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.selfintersect.1.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.arc.selfintersect.1</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.arc.selfintersect.1</h1> +<p class="desc">arc() with lineWidth > 2*radius is drawn sensibly</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("arc() with lineWidth > 2*radius is drawn sensibly"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#0f0'; + ctx.fillRect(0, 0, 100, 50); + ctx.lineWidth = 200; + ctx.strokeStyle = '#f00'; + ctx.beginPath(); + ctx.arc(100, 50, 25, 0, -Math.PI/2, true); + ctx.stroke(); + ctx.beginPath(); + ctx.arc(0, 0, 25, 0, -Math.PI/2, true); + ctx.stroke(); + _assertPixel(canvas, 1,1, 0,255,0,255); + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.selfintersect.2.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.selfintersect.2.html new file mode 100644 index 0000000000..e3b14a782f --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.selfintersect.2.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.arc.selfintersect.2</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.arc.selfintersect.2</h1> +<p class="desc">arc() with lineWidth > 2*radius is drawn sensibly</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("arc() with lineWidth > 2*radius is drawn sensibly"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.lineWidth = 180; + ctx.strokeStyle = '#0f0'; + ctx.beginPath(); + ctx.arc(-50, 50, 25, 0, -Math.PI/2, true); + ctx.stroke(); + ctx.beginPath(); + ctx.arc(100, 0, 25, 0, -Math.PI/2, true); + ctx.stroke(); + _assertPixel(canvas, 50,25, 0,255,0,255); + _assertPixel(canvas, 90,10, 0,255,0,255); + _assertPixel(canvas, 97,1, 0,255,0,255); + _assertPixel(canvas, 97,2, 0,255,0,255); + _assertPixel(canvas, 97,3, 0,255,0,255); + _assertPixel(canvas, 2,48, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.shape.1.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.shape.1.html new file mode 100644 index 0000000000..8a456841ad --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.shape.1.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.arc.shape.1</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.arc.shape.1</h1> +<p class="desc">arc() from 0 to pi does not draw anything in the wrong half</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("arc() from 0 to pi does not draw anything in the wrong half"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#0f0'; + ctx.fillRect(0, 0, 100, 50); + ctx.lineWidth = 50; + ctx.strokeStyle = '#f00'; + ctx.beginPath(); + ctx.arc(50, 50, 50, 0, Math.PI, false); + ctx.stroke(); + _assertPixel(canvas, 50,25, 0,255,0,255); + _assertPixel(canvas, 1,1, 0,255,0,255); + _assertPixel(canvas, 98,1, 0,255,0,255); + _assertPixel(canvas, 1,48, 0,255,0,255); + _assertPixel(canvas, 20,48, 0,255,0,255); + _assertPixel(canvas, 98,48, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.shape.2.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.shape.2.html new file mode 100644 index 0000000000..f820eed761 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.shape.2.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.arc.shape.2</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.arc.shape.2</h1> +<p class="desc">arc() from 0 to pi draws stuff in the right half</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("arc() from 0 to pi draws stuff in the right half"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.lineWidth = 100; + ctx.strokeStyle = '#0f0'; + ctx.beginPath(); + ctx.arc(50, 50, 50, 0, Math.PI, true); + ctx.stroke(); + _assertPixel(canvas, 50,25, 0,255,0,255); + _assertPixel(canvas, 1,1, 0,255,0,255); + _assertPixel(canvas, 98,1, 0,255,0,255); + _assertPixel(canvas, 1,48, 0,255,0,255); + _assertPixel(canvas, 20,48, 0,255,0,255); + _assertPixel(canvas, 98,48, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.shape.3.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.shape.3.html new file mode 100644 index 0000000000..aa08d44194 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.shape.3.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.arc.shape.3</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.arc.shape.3</h1> +<p class="desc">arc() from 0 to -pi/2 does not draw anything in the wrong quadrant</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("arc() from 0 to -pi/2 does not draw anything in the wrong quadrant"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#0f0'; + ctx.fillRect(0, 0, 100, 50); + ctx.lineWidth = 100; + ctx.strokeStyle = '#f00'; + ctx.beginPath(); + ctx.arc(0, 50, 50, 0, -Math.PI/2, false); + ctx.stroke(); + _assertPixel(canvas, 50,25, 0,255,0,255); + _assertPixel(canvas, 1,1, 0,255,0,255); + _assertPixel(canvas, 98,1, 0,255,0,255); + _assertPixel(canvas, 1,48, 0,255,0,255); + _assertPixel(canvas, 98,48, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.shape.4.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.shape.4.html new file mode 100644 index 0000000000..b00d4468f2 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.shape.4.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.arc.shape.4</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.arc.shape.4</h1> +<p class="desc">arc() from 0 to -pi/2 draws stuff in the right quadrant</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("arc() from 0 to -pi/2 draws stuff in the right quadrant"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.lineWidth = 150; + ctx.strokeStyle = '#0f0'; + ctx.beginPath(); + ctx.arc(-50, 50, 100, 0, -Math.PI/2, true); + ctx.stroke(); + _assertPixel(canvas, 50,25, 0,255,0,255); + _assertPixel(canvas, 1,1, 0,255,0,255); + _assertPixel(canvas, 98,1, 0,255,0,255); + _assertPixel(canvas, 1,48, 0,255,0,255); + _assertPixel(canvas, 98,48, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.shape.5.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.shape.5.html new file mode 100644 index 0000000000..f5574d2773 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.shape.5.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.arc.shape.5</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.arc.shape.5</h1> +<p class="desc">arc() from 0 to 5pi does not draw crazy things</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("arc() from 0 to 5pi does not draw crazy things"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#0f0'; + ctx.fillRect(0, 0, 100, 50); + ctx.lineWidth = 200; + ctx.strokeStyle = '#f00'; + ctx.beginPath(); + ctx.arc(300, 0, 100, 0, 5*Math.PI, false); + ctx.stroke(); + _assertPixel(canvas, 50,25, 0,255,0,255); + _assertPixel(canvas, 1,1, 0,255,0,255); + _assertPixel(canvas, 98,1, 0,255,0,255); + _assertPixel(canvas, 1,48, 0,255,0,255); + _assertPixel(canvas, 98,48, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.twopie.1.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.twopie.1.html new file mode 100644 index 0000000000..6312efb3e8 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.twopie.1.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.arc.twopie.1</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.arc.twopie.1</h1> +<p class="desc">arc() draws nothing when end = start + 2pi-e and anticlockwise</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("arc() draws nothing when end = start + 2pi-e and anticlockwise"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#0f0'; + ctx.fillRect(0, 0, 100, 50); + ctx.strokeStyle = '#f00'; + ctx.lineWidth = 100; + ctx.beginPath(); + ctx.arc(50, 25, 50, 0, 2*Math.PI - 1e-4, true); + ctx.stroke(); + _assertPixel(canvas, 50,20, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.twopie.2.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.twopie.2.html new file mode 100644 index 0000000000..132c2d38dd --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.twopie.2.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.arc.twopie.2</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.arc.twopie.2</h1> +<p class="desc">arc() draws a full circle when end = start + 2pi-e and clockwise</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("arc() draws a full circle when end = start + 2pi-e and clockwise"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.strokeStyle = '#0f0'; + ctx.lineWidth = 100; + ctx.beginPath(); + ctx.arc(50, 25, 50, 0, 2*Math.PI - 1e-4, false); + ctx.stroke(); + _assertPixel(canvas, 50,20, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.twopie.3.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.twopie.3.html new file mode 100644 index 0000000000..204ed54a1e --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.twopie.3.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.arc.twopie.3</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.arc.twopie.3</h1> +<p class="desc">arc() draws a full circle when end = start + 2pi+e and anticlockwise</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("arc() draws a full circle when end = start + 2pi+e and anticlockwise"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.strokeStyle = '#0f0'; + ctx.lineWidth = 100; + ctx.beginPath(); + ctx.arc(50, 25, 50, 0, 2*Math.PI + 1e-4, true); + ctx.stroke(); + _assertPixel(canvas, 50,20, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.twopie.4.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.twopie.4.html new file mode 100644 index 0000000000..d5535a7949 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.twopie.4.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.arc.twopie.4</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.arc.twopie.4</h1> +<p class="desc">arc() draws nothing when end = start + 2pi+e and clockwise</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("arc() draws nothing when end = start + 2pi+e and clockwise"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.strokeStyle = '#0f0'; + ctx.lineWidth = 100; + ctx.beginPath(); + ctx.arc(50, 25, 50, 0, 2*Math.PI + 1e-4, false); + ctx.stroke(); + _assertPixel(canvas, 50,20, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.twopie.5.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.twopie.5.html new file mode 100644 index 0000000000..955a6c8743 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.twopie.5.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.arc.twopie.5</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.arc.twopie.5</h1> +<p class="desc">arc() draws correctly when start = 2 and end = start + 2pi+e and clockwise</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("arc() draws correctly when start = 2 and end = start + 2pi+e and clockwise"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#fff'; + ctx.fillRect(0, 0, 100, 50); + ctx.fillStyle = '#000'; + ctx.beginPath(); + ctx.moveTo(50, 25); + ctx.arc(50, 25, 50, 2, 2 + 2*Math.PI, false); + ctx.closePath(); + ctx.fill(); + _assertPixel(canvas, 95,25, 0,0,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.twopie.6.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.twopie.6.html new file mode 100644 index 0000000000..9420ecdc93 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.twopie.6.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.arc.twopie.6</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.arc.twopie.6</h1> +<p class="desc">arc() draws correctly when start = 5 and end = start + 2pi+e and clockwise</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("arc() draws correctly when start = 5 and end = start + 2pi+e and clockwise"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#fff'; + ctx.fillRect(0, 0, 100, 50); + ctx.fillStyle = '#000'; + ctx.beginPath(); + ctx.moveTo(50, 25); + ctx.arc(50, 25, 50, 5, 5 + 2*Math.PI, false); + ctx.closePath(); + ctx.fill(); + _assertPixel(canvas, 5,25, 0,0,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.zero.1.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.zero.1.html new file mode 100644 index 0000000000..2c93425b1e --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.zero.1.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.arc.zero.1</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.arc.zero.1</h1> +<p class="desc">arc() draws nothing when startAngle = endAngle and anticlockwise</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("arc() draws nothing when startAngle = endAngle and anticlockwise"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#0f0'; + ctx.fillRect(0, 0, 100, 50); + ctx.strokeStyle = '#f00'; + ctx.lineWidth = 100; + ctx.beginPath(); + ctx.arc(50, 25, 50, 0, 0, true); + ctx.stroke(); + _assertPixel(canvas, 50,20, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.zero.2.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.zero.2.html new file mode 100644 index 0000000000..c290c2f32f --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.zero.2.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.arc.zero.2</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.arc.zero.2</h1> +<p class="desc">arc() draws nothing when startAngle = endAngle and clockwise</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("arc() draws nothing when startAngle = endAngle and clockwise"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#0f0'; + ctx.fillRect(0, 0, 100, 50); + ctx.strokeStyle = '#f00'; + ctx.lineWidth = 100; + ctx.beginPath(); + ctx.arc(50, 25, 50, 0, 0, false); + ctx.stroke(); + _assertPixel(canvas, 50,20, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.zeroradius.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.zeroradius.html new file mode 100644 index 0000000000..f75403b2f3 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.zeroradius.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.arc.zeroradius</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.arc.zeroradius</h1> +<p class="desc">arc() with zero radius draws a line to the start point</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("arc() with zero radius draws a line to the start point"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00' + ctx.fillRect(0, 0, 100, 50); + ctx.lineWidth = 50; + ctx.strokeStyle = '#0f0'; + ctx.beginPath(); + ctx.moveTo(0, 25); + ctx.arc(200, 25, 0, 0, Math.PI, true); + ctx.stroke(); + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.coincide.1.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.coincide.1.html new file mode 100644 index 0000000000..01c8091c46 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.coincide.1.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.arcTo.coincide.1</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.arcTo.coincide.1</h1> +<p class="desc">arcTo() has no effect if P0 = P1</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("arcTo() has no effect if P0 = P1"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.lineWidth = 50; + + ctx.strokeStyle = '#0f0'; + ctx.beginPath(); + ctx.moveTo(0, 25); + ctx.arcTo(0, 25, 50, 1000, 1); + ctx.lineTo(100, 25); + ctx.stroke(); + + ctx.strokeStyle = '#f00'; + ctx.beginPath(); + ctx.moveTo(50, 25); + ctx.arcTo(50, 25, 100, 25, 1); + ctx.stroke(); + + _assertPixel(canvas, 50,1, 0,255,0,255); + _assertPixel(canvas, 50,25, 0,255,0,255); + _assertPixel(canvas, 50,48, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.coincide.2.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.coincide.2.html new file mode 100644 index 0000000000..d216949aae --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.coincide.2.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.arcTo.coincide.2</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.arcTo.coincide.2</h1> +<p class="desc">arcTo() draws a straight line to P1 if P1 = P2</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("arcTo() draws a straight line to P1 if P1 = P2"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.lineWidth = 50; + ctx.strokeStyle = '#0f0'; + ctx.beginPath(); + ctx.moveTo(0, 25); + ctx.arcTo(100, 25, 100, 25, 1); + ctx.stroke(); + + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.collinear.1.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.collinear.1.html new file mode 100644 index 0000000000..e91e2e4b1b --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.collinear.1.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.arcTo.collinear.1</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.arcTo.collinear.1</h1> +<p class="desc">arcTo() with all points on a line, and P1 between P0/P2, draws a straight line to P1</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("arcTo() with all points on a line, and P1 between P0/P2, draws a straight line to P1"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.lineWidth = 50; + + ctx.strokeStyle = '#0f0'; + ctx.beginPath(); + ctx.moveTo(0, 25); + ctx.arcTo(100, 25, 200, 25, 1); + ctx.stroke(); + + ctx.strokeStyle = '#f00'; + ctx.beginPath(); + ctx.moveTo(-100, 25); + ctx.arcTo(0, 25, 100, 25, 1); + ctx.stroke(); + + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.collinear.2.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.collinear.2.html new file mode 100644 index 0000000000..97b1339295 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.collinear.2.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.arcTo.collinear.2</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.arcTo.collinear.2</h1> +<p class="desc">arcTo() with all points on a line, and P2 between P0/P1, draws a straight line to P1</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("arcTo() with all points on a line, and P2 between P0/P1, draws a straight line to P1"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.lineWidth = 50; + + ctx.strokeStyle = '#0f0'; + ctx.beginPath(); + ctx.moveTo(0, 25); + ctx.arcTo(100, 25, 10, 25, 1); + ctx.stroke(); + + ctx.strokeStyle = '#f00'; + ctx.beginPath(); + ctx.moveTo(100, 25); + ctx.arcTo(200, 25, 110, 25, 1); + ctx.stroke(); + + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.collinear.3.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.collinear.3.html new file mode 100644 index 0000000000..2f4394f038 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.collinear.3.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.arcTo.collinear.3</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.arcTo.collinear.3</h1> +<p class="desc">arcTo() with all points on a line, and P0 between P1/P2, draws a straight line to P1</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("arcTo() with all points on a line, and P0 between P1/P2, draws a straight line to P1"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.lineWidth = 50; + + ctx.strokeStyle = '#0f0'; + ctx.beginPath(); + ctx.moveTo(0, 25); + ctx.arcTo(100, 25, -100, 25, 1); + ctx.stroke(); + + ctx.strokeStyle = '#f00'; + ctx.beginPath(); + ctx.moveTo(100, 25); + ctx.arcTo(200, 25, 0, 25, 1); + ctx.stroke(); + + ctx.beginPath(); + ctx.moveTo(-100, 25); + ctx.arcTo(0, 25, -200, 25, 1); + ctx.stroke(); + + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.ensuresubpath.1.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.ensuresubpath.1.html new file mode 100644 index 0000000000..2781bcbba3 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.ensuresubpath.1.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.arcTo.ensuresubpath.1</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.arcTo.ensuresubpath.1</h1> +<p class="desc">If there is no subpath, the first control point is added (and nothing is drawn up to it)</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("If there is no subpath, the first control point is added (and nothing is drawn up to it)"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#0f0'; + ctx.fillRect(0, 0, 100, 50); + ctx.lineWidth = 50; + ctx.strokeStyle = '#f00'; + ctx.beginPath(); + ctx.arcTo(100, 50, 200, 50, 0.1); + ctx.stroke(); + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.ensuresubpath.2.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.ensuresubpath.2.html new file mode 100644 index 0000000000..f5da07c1c6 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.ensuresubpath.2.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.arcTo.ensuresubpath.2</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.arcTo.ensuresubpath.2</h1> +<p class="desc">If there is no subpath, the first control point is added</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("If there is no subpath, the first control point is added"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.lineWidth = 50; + ctx.strokeStyle = '#0f0'; + ctx.beginPath(); + ctx.arcTo(0, 25, 50, 250, 0.1); // adds (x1,y1), draws nothing + ctx.lineTo(100, 25); + ctx.stroke(); + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.negative.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.negative.html new file mode 100644 index 0000000000..0091ca2a67 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.negative.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.arcTo.negative</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.arcTo.negative</h1> +<p class="desc">arcTo() with negative radius throws an exception</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("arcTo() with negative radius throws an exception"); +_addTest(function(canvas, ctx) { + + assert_throws_dom("INDEX_SIZE_ERR", function() { ctx.arcTo(0, 0, 0, 0, -1); }); + var path = new Path2D(); + assert_throws_dom("INDEX_SIZE_ERR", function() { path.arcTo(10, 10, 20, 20, -5); }); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.nonfinite.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.nonfinite.html new file mode 100644 index 0000000000..0d7be1d360 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.nonfinite.html @@ -0,0 +1,74 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.arcTo.nonfinite</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.arcTo.nonfinite</h1> +<p class="desc">arcTo() 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("arcTo() with Infinity/NaN is ignored"); +_addTest(function(canvas, ctx) { + + ctx.moveTo(0, 0); + ctx.lineTo(100, 0); + ctx.arcTo(Infinity, 50, 0, 50, 0); + ctx.arcTo(-Infinity, 50, 0, 50, 0); + ctx.arcTo(NaN, 50, 0, 50, 0); + ctx.arcTo(0, Infinity, 0, 50, 0); + ctx.arcTo(0, -Infinity, 0, 50, 0); + ctx.arcTo(0, NaN, 0, 50, 0); + ctx.arcTo(0, 50, Infinity, 50, 0); + ctx.arcTo(0, 50, -Infinity, 50, 0); + ctx.arcTo(0, 50, NaN, 50, 0); + ctx.arcTo(0, 50, 0, Infinity, 0); + ctx.arcTo(0, 50, 0, -Infinity, 0); + ctx.arcTo(0, 50, 0, NaN, 0); + ctx.arcTo(0, 50, 0, 50, Infinity); + ctx.arcTo(0, 50, 0, 50, -Infinity); + ctx.arcTo(0, 50, 0, 50, NaN); + ctx.arcTo(Infinity, Infinity, 0, 50, 0); + ctx.arcTo(Infinity, Infinity, Infinity, 50, 0); + ctx.arcTo(Infinity, Infinity, Infinity, Infinity, 0); + ctx.arcTo(Infinity, Infinity, Infinity, Infinity, Infinity); + ctx.arcTo(Infinity, Infinity, Infinity, 50, Infinity); + ctx.arcTo(Infinity, Infinity, 0, Infinity, 0); + ctx.arcTo(Infinity, Infinity, 0, Infinity, Infinity); + ctx.arcTo(Infinity, Infinity, 0, 50, Infinity); + ctx.arcTo(Infinity, 50, Infinity, 50, 0); + ctx.arcTo(Infinity, 50, Infinity, Infinity, 0); + ctx.arcTo(Infinity, 50, Infinity, Infinity, Infinity); + ctx.arcTo(Infinity, 50, Infinity, 50, Infinity); + ctx.arcTo(Infinity, 50, 0, Infinity, 0); + ctx.arcTo(Infinity, 50, 0, Infinity, Infinity); + ctx.arcTo(Infinity, 50, 0, 50, Infinity); + ctx.arcTo(0, Infinity, Infinity, 50, 0); + ctx.arcTo(0, Infinity, Infinity, Infinity, 0); + ctx.arcTo(0, Infinity, Infinity, Infinity, Infinity); + ctx.arcTo(0, Infinity, Infinity, 50, Infinity); + ctx.arcTo(0, Infinity, 0, Infinity, 0); + ctx.arcTo(0, Infinity, 0, Infinity, Infinity); + ctx.arcTo(0, Infinity, 0, 50, Infinity); + ctx.arcTo(0, 50, Infinity, Infinity, 0); + ctx.arcTo(0, 50, Infinity, Infinity, Infinity); + ctx.arcTo(0, 50, Infinity, 50, Infinity); + ctx.arcTo(0, 50, 0, Infinity, Infinity); + ctx.lineTo(100, 50); + ctx.lineTo(0, 50); + ctx.fillStyle = '#0f0'; + ctx.fill(); + _assertPixel(canvas, 50,25, 0,255,0,255); + _assertPixel(canvas, 90,45, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.scale.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.scale.html new file mode 100644 index 0000000000..6645f05260 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.scale.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.arcTo.scale</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.arcTo.scale</h1> +<p class="desc">arcTo scales the curve, not just the control points</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("arcTo scales the curve, not just the control points"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + + ctx.fillStyle = '#0f0'; + ctx.beginPath(); + ctx.moveTo(0, 50); + ctx.translate(100, 0); + ctx.scale(0.1, 1); + ctx.arcTo(50, 50, 50, 0, 50); + ctx.lineTo(-1000, 0); + ctx.fill(); + + _assertPixel(canvas, 0,0, 0,255,0,255); + _assertPixel(canvas, 50,0, 0,255,0,255); + _assertPixel(canvas, 99,0, 0,255,0,255); + _assertPixel(canvas, 0,25, 0,255,0,255); + _assertPixel(canvas, 50,25, 0,255,0,255); + _assertPixel(canvas, 99,25, 0,255,0,255); + _assertPixel(canvas, 0,49, 0,255,0,255); + _assertPixel(canvas, 50,49, 0,255,0,255); + _assertPixel(canvas, 99,49, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.shape.curve1.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.shape.curve1.html new file mode 100644 index 0000000000..4617b2cbbb --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.shape.curve1.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.arcTo.shape.curve1</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.arcTo.shape.curve1</h1> +<p class="desc">arcTo() curves in the right kind of shape</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("arcTo() curves in the right kind of shape"); +_addTest(function(canvas, ctx) { + + var tol = 1.5; // tolerance to avoid antialiasing artifacts + + ctx.fillStyle = '#0f0'; + ctx.fillRect(0, 0, 100, 50); + + ctx.strokeStyle = '#f00'; + ctx.lineWidth = 10; + ctx.beginPath(); + ctx.moveTo(10, 25); + ctx.arcTo(75, 25, 75, 60, 20); + ctx.stroke(); + + ctx.fillStyle = '#0f0'; + ctx.beginPath(); + ctx.rect(10, 20, 45, 10); + ctx.moveTo(80, 45); + ctx.arc(55, 45, 25+tol, 0, -Math.PI/2, true); + ctx.arc(55, 45, 15-tol, -Math.PI/2, 0, false); + ctx.fill(); + + _assertPixel(canvas, 50,25, 0,255,0,255); + _assertPixel(canvas, 55,19, 0,255,0,255); + _assertPixel(canvas, 55,20, 0,255,0,255); + _assertPixel(canvas, 55,21, 0,255,0,255); + _assertPixel(canvas, 64,22, 0,255,0,255); + _assertPixel(canvas, 65,21, 0,255,0,255); + _assertPixel(canvas, 72,28, 0,255,0,255); + _assertPixel(canvas, 73,27, 0,255,0,255); + _assertPixel(canvas, 78,36, 0,255,0,255); + _assertPixel(canvas, 79,35, 0,255,0,255); + _assertPixel(canvas, 80,44, 0,255,0,255); + _assertPixel(canvas, 80,45, 0,255,0,255); + _assertPixel(canvas, 80,46, 0,255,0,255); + _assertPixel(canvas, 65,45, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.shape.curve2.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.shape.curve2.html new file mode 100644 index 0000000000..bcc4326eea --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.shape.curve2.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.arcTo.shape.curve2</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.arcTo.shape.curve2</h1> +<p class="desc">arcTo() curves in the right kind of shape</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("arcTo() curves in the right kind of shape"); +_addTest(function(canvas, ctx) { + + var tol = 1.5; // tolerance to avoid antialiasing artifacts + + ctx.fillStyle = '#0f0'; + ctx.fillRect(0, 0, 100, 50); + + ctx.fillStyle = '#f00'; + ctx.beginPath(); + ctx.rect(10, 20, 45, 10); + ctx.moveTo(80, 45); + ctx.arc(55, 45, 25-tol, 0, -Math.PI/2, true); + ctx.arc(55, 45, 15+tol, -Math.PI/2, 0, false); + ctx.fill(); + + ctx.strokeStyle = '#0f0'; + ctx.lineWidth = 10; + ctx.beginPath(); + ctx.moveTo(10, 25); + ctx.arcTo(75, 25, 75, 60, 20); + ctx.stroke(); + + _assertPixel(canvas, 50,25, 0,255,0,255); + _assertPixel(canvas, 55,19, 0,255,0,255); + _assertPixel(canvas, 55,20, 0,255,0,255); + _assertPixel(canvas, 55,21, 0,255,0,255); + _assertPixel(canvas, 64,22, 0,255,0,255); + _assertPixel(canvas, 65,21, 0,255,0,255); + _assertPixel(canvas, 72,28, 0,255,0,255); + _assertPixel(canvas, 73,27, 0,255,0,255); + _assertPixel(canvas, 78,36, 0,255,0,255); + _assertPixel(canvas, 79,35, 0,255,0,255); + _assertPixel(canvas, 80,44, 0,255,0,255); + _assertPixel(canvas, 80,45, 0,255,0,255); + _assertPixel(canvas, 80,46, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.shape.end.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.shape.end.html new file mode 100644 index 0000000000..829c70f5f4 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.shape.end.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.arcTo.shape.end</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.arcTo.shape.end</h1> +<p class="desc">arcTo() does not draw anything from P1 to P2</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("arcTo() does not draw anything from P1 to P2"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#0f0'; + ctx.fillRect(0, 0, 100, 50); + ctx.strokeStyle = '#f00'; + ctx.lineWidth = 50; + ctx.beginPath(); + ctx.moveTo(-100, -100); + ctx.arcTo(-100, 25, 200, 25, 10); + ctx.stroke(); + + _assertPixel(canvas, 1,1, 0,255,0,255); + _assertPixel(canvas, 1,48, 0,255,0,255); + _assertPixel(canvas, 50,25, 0,255,0,255); + _assertPixel(canvas, 98,1, 0,255,0,255); + _assertPixel(canvas, 98,48, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.shape.start.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.shape.start.html new file mode 100644 index 0000000000..0abeedf433 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.shape.start.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.arcTo.shape.start</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.arcTo.shape.start</h1> +<p class="desc">arcTo() draws a straight line from P0 to P1</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("arcTo() draws a straight line from P0 to P1"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.strokeStyle = '#0f0'; + ctx.lineWidth = 50; + ctx.beginPath(); + ctx.moveTo(0, 25); + ctx.arcTo(200, 25, 200, 50, 10); + ctx.stroke(); + + _assertPixel(canvas, 1,1, 0,255,0,255); + _assertPixel(canvas, 1,48, 0,255,0,255); + _assertPixel(canvas, 50,25, 0,255,0,255); + _assertPixel(canvas, 98,1, 0,255,0,255); + _assertPixel(canvas, 98,48, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.transformation.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.transformation.html new file mode 100644 index 0000000000..5aa8562b1d --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.transformation.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.arcTo.transformation</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.arcTo.transformation</h1> +<p class="desc">arcTo joins up to the last subpath point correctly</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("arcTo joins up to the last subpath point correctly"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + + ctx.fillStyle = '#0f0'; + ctx.beginPath(); + ctx.moveTo(0, 50); + ctx.translate(100, 0); + ctx.arcTo(50, 50, 50, 0, 50); + ctx.lineTo(-100, 0); + ctx.fill(); + + _assertPixel(canvas, 0,0, 0,255,0,255); + _assertPixel(canvas, 50,0, 0,255,0,255); + _assertPixel(canvas, 99,0, 0,255,0,255); + _assertPixel(canvas, 0,25, 0,255,0,255); + _assertPixel(canvas, 50,25, 0,255,0,255); + _assertPixel(canvas, 99,25, 0,255,0,255); + _assertPixel(canvas, 0,49, 0,255,0,255); + _assertPixel(canvas, 50,49, 0,255,0,255); + _assertPixel(canvas, 99,49, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.zero.1.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.zero.1.html new file mode 100644 index 0000000000..bb2cc1d3e3 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.zero.1.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.arcTo.zero.1</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.arcTo.zero.1</h1> +<p class="desc">arcTo() with zero radius draws a straight line from P0 to P1</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("arcTo() with zero radius draws a straight line from P0 to P1"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.lineWidth = 50; + + ctx.strokeStyle = '#0f0'; + ctx.beginPath(); + ctx.moveTo(0, 25); + ctx.arcTo(100, 25, 100, 100, 0); + ctx.stroke(); + + ctx.strokeStyle = '#f00'; + ctx.beginPath(); + ctx.moveTo(0, -25); + ctx.arcTo(50, -25, 50, 50, 0); + ctx.stroke(); + + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.zero.2.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.zero.2.html new file mode 100644 index 0000000000..d2eeee535d --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.zero.2.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.arcTo.zero.2</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.arcTo.zero.2</h1> +<p class="desc">arcTo() with zero radius draws a straight line from P0 to P1, even when all points are collinear</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("arcTo() with zero radius draws a straight line from P0 to P1, even when all points are collinear"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.lineWidth = 50; + + ctx.strokeStyle = '#0f0'; + ctx.beginPath(); + ctx.moveTo(0, 25); + ctx.arcTo(100, 25, -100, 25, 0); + ctx.stroke(); + + ctx.strokeStyle = '#f00'; + ctx.beginPath(); + ctx.moveTo(100, 25); + ctx.arcTo(200, 25, 50, 25, 0); + ctx.stroke(); + + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.beginPath.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.beginPath.html new file mode 100644 index 0000000000..316f6af942 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.beginPath.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.beginPath</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.beginPath</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(0, 0, 100, 50); + ctx.beginPath(); + ctx.fillStyle = '#f00'; + ctx.fill(); + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.bezierCurveTo.basic.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.bezierCurveTo.basic.html new file mode 100644 index 0000000000..0c3d7f948b --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.bezierCurveTo.basic.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.bezierCurveTo.basic</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.bezierCurveTo.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.strokeStyle = '#0f0'; + ctx.lineWidth = 50; + ctx.beginPath(); + ctx.moveTo(0, 25); + ctx.bezierCurveTo(100, 25, 100, 25, 100, 25); + ctx.stroke(); + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.bezierCurveTo.ensuresubpath.1.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.bezierCurveTo.ensuresubpath.1.html new file mode 100644 index 0000000000..ebcce3f48c --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.bezierCurveTo.ensuresubpath.1.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.bezierCurveTo.ensuresubpath.1</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.bezierCurveTo.ensuresubpath.1</h1> +<p class="desc">If there is no subpath, the first control point is added (and nothing is drawn up to it)</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("If there is no subpath, the first control point is added (and nothing is drawn up to it)"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#0f0'; + ctx.fillRect(0, 0, 100, 50); + ctx.strokeStyle = '#f00'; + ctx.lineWidth = 50; + ctx.beginPath(); + ctx.bezierCurveTo(100, 50, 200, 50, 200, 50); + ctx.stroke(); + _assertPixel(canvas, 50,25, 0,255,0,255); + _assertPixel(canvas, 95,45, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.bezierCurveTo.ensuresubpath.2.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.bezierCurveTo.ensuresubpath.2.html new file mode 100644 index 0000000000..c269b72d33 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.bezierCurveTo.ensuresubpath.2.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.bezierCurveTo.ensuresubpath.2</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.bezierCurveTo.ensuresubpath.2</h1> +<p class="desc">If there is no subpath, the first control point is added</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("If there is no subpath, the first control point is added"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.strokeStyle = '#0f0'; + ctx.lineWidth = 50; + ctx.beginPath(); + ctx.bezierCurveTo(0, 25, 100, 25, 100, 25); + ctx.stroke(); + _assertPixel(canvas, 50,25, 0,255,0,255); + _assertPixel(canvas, 5,45, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.bezierCurveTo.nonfinite.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.bezierCurveTo.nonfinite.html new file mode 100644 index 0000000000..6278a67283 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.bezierCurveTo.nonfinite.html @@ -0,0 +1,108 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.bezierCurveTo.nonfinite</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.bezierCurveTo.nonfinite</h1> +<p class="desc">bezierCurveTo() 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("bezierCurveTo() with Infinity/NaN is ignored"); +_addTest(function(canvas, ctx) { + + ctx.moveTo(0, 0); + ctx.lineTo(100, 0); + ctx.bezierCurveTo(Infinity, 50, 0, 50, 0, 50); + ctx.bezierCurveTo(-Infinity, 50, 0, 50, 0, 50); + ctx.bezierCurveTo(NaN, 50, 0, 50, 0, 50); + ctx.bezierCurveTo(0, Infinity, 0, 50, 0, 50); + ctx.bezierCurveTo(0, -Infinity, 0, 50, 0, 50); + ctx.bezierCurveTo(0, NaN, 0, 50, 0, 50); + ctx.bezierCurveTo(0, 50, Infinity, 50, 0, 50); + ctx.bezierCurveTo(0, 50, -Infinity, 50, 0, 50); + ctx.bezierCurveTo(0, 50, NaN, 50, 0, 50); + ctx.bezierCurveTo(0, 50, 0, Infinity, 0, 50); + ctx.bezierCurveTo(0, 50, 0, -Infinity, 0, 50); + ctx.bezierCurveTo(0, 50, 0, NaN, 0, 50); + ctx.bezierCurveTo(0, 50, 0, 50, Infinity, 50); + ctx.bezierCurveTo(0, 50, 0, 50, -Infinity, 50); + ctx.bezierCurveTo(0, 50, 0, 50, NaN, 50); + ctx.bezierCurveTo(0, 50, 0, 50, 0, Infinity); + ctx.bezierCurveTo(0, 50, 0, 50, 0, -Infinity); + ctx.bezierCurveTo(0, 50, 0, 50, 0, NaN); + ctx.bezierCurveTo(Infinity, Infinity, 0, 50, 0, 50); + ctx.bezierCurveTo(Infinity, Infinity, Infinity, 50, 0, 50); + ctx.bezierCurveTo(Infinity, Infinity, Infinity, Infinity, 0, 50); + ctx.bezierCurveTo(Infinity, Infinity, Infinity, Infinity, Infinity, 50); + ctx.bezierCurveTo(Infinity, Infinity, Infinity, Infinity, Infinity, Infinity); + ctx.bezierCurveTo(Infinity, Infinity, Infinity, Infinity, 0, Infinity); + ctx.bezierCurveTo(Infinity, Infinity, Infinity, 50, Infinity, 50); + ctx.bezierCurveTo(Infinity, Infinity, Infinity, 50, Infinity, Infinity); + ctx.bezierCurveTo(Infinity, Infinity, Infinity, 50, 0, Infinity); + ctx.bezierCurveTo(Infinity, Infinity, 0, Infinity, 0, 50); + ctx.bezierCurveTo(Infinity, Infinity, 0, Infinity, Infinity, 50); + ctx.bezierCurveTo(Infinity, Infinity, 0, Infinity, Infinity, Infinity); + ctx.bezierCurveTo(Infinity, Infinity, 0, Infinity, 0, Infinity); + ctx.bezierCurveTo(Infinity, Infinity, 0, 50, Infinity, 50); + ctx.bezierCurveTo(Infinity, Infinity, 0, 50, Infinity, Infinity); + ctx.bezierCurveTo(Infinity, Infinity, 0, 50, 0, Infinity); + ctx.bezierCurveTo(Infinity, 50, Infinity, 50, 0, 50); + ctx.bezierCurveTo(Infinity, 50, Infinity, Infinity, 0, 50); + ctx.bezierCurveTo(Infinity, 50, Infinity, Infinity, Infinity, 50); + ctx.bezierCurveTo(Infinity, 50, Infinity, Infinity, Infinity, Infinity); + ctx.bezierCurveTo(Infinity, 50, Infinity, Infinity, 0, Infinity); + ctx.bezierCurveTo(Infinity, 50, Infinity, 50, Infinity, 50); + ctx.bezierCurveTo(Infinity, 50, Infinity, 50, Infinity, Infinity); + ctx.bezierCurveTo(Infinity, 50, Infinity, 50, 0, Infinity); + ctx.bezierCurveTo(Infinity, 50, 0, Infinity, 0, 50); + ctx.bezierCurveTo(Infinity, 50, 0, Infinity, Infinity, 50); + ctx.bezierCurveTo(Infinity, 50, 0, Infinity, Infinity, Infinity); + ctx.bezierCurveTo(Infinity, 50, 0, Infinity, 0, Infinity); + ctx.bezierCurveTo(Infinity, 50, 0, 50, Infinity, 50); + ctx.bezierCurveTo(Infinity, 50, 0, 50, Infinity, Infinity); + ctx.bezierCurveTo(Infinity, 50, 0, 50, 0, Infinity); + ctx.bezierCurveTo(0, Infinity, Infinity, 50, 0, 50); + ctx.bezierCurveTo(0, Infinity, Infinity, Infinity, 0, 50); + ctx.bezierCurveTo(0, Infinity, Infinity, Infinity, Infinity, 50); + ctx.bezierCurveTo(0, Infinity, Infinity, Infinity, Infinity, Infinity); + ctx.bezierCurveTo(0, Infinity, Infinity, Infinity, 0, Infinity); + ctx.bezierCurveTo(0, Infinity, Infinity, 50, Infinity, 50); + ctx.bezierCurveTo(0, Infinity, Infinity, 50, Infinity, Infinity); + ctx.bezierCurveTo(0, Infinity, Infinity, 50, 0, Infinity); + ctx.bezierCurveTo(0, Infinity, 0, Infinity, 0, 50); + ctx.bezierCurveTo(0, Infinity, 0, Infinity, Infinity, 50); + ctx.bezierCurveTo(0, Infinity, 0, Infinity, Infinity, Infinity); + ctx.bezierCurveTo(0, Infinity, 0, Infinity, 0, Infinity); + ctx.bezierCurveTo(0, Infinity, 0, 50, Infinity, 50); + ctx.bezierCurveTo(0, Infinity, 0, 50, Infinity, Infinity); + ctx.bezierCurveTo(0, Infinity, 0, 50, 0, Infinity); + ctx.bezierCurveTo(0, 50, Infinity, Infinity, 0, 50); + ctx.bezierCurveTo(0, 50, Infinity, Infinity, Infinity, 50); + ctx.bezierCurveTo(0, 50, Infinity, Infinity, Infinity, Infinity); + ctx.bezierCurveTo(0, 50, Infinity, Infinity, 0, Infinity); + ctx.bezierCurveTo(0, 50, Infinity, 50, Infinity, 50); + ctx.bezierCurveTo(0, 50, Infinity, 50, Infinity, Infinity); + ctx.bezierCurveTo(0, 50, Infinity, 50, 0, Infinity); + ctx.bezierCurveTo(0, 50, 0, Infinity, Infinity, 50); + ctx.bezierCurveTo(0, 50, 0, Infinity, Infinity, Infinity); + ctx.bezierCurveTo(0, 50, 0, Infinity, 0, Infinity); + ctx.bezierCurveTo(0, 50, 0, 50, Infinity, Infinity); + ctx.lineTo(100, 50); + ctx.lineTo(0, 50); + ctx.fillStyle = '#0f0'; + ctx.fill(); + _assertPixel(canvas, 50,25, 0,255,0,255); + _assertPixel(canvas, 90,45, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.bezierCurveTo.scaled.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.bezierCurveTo.scaled.html new file mode 100644 index 0000000000..e7a5d8b524 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.bezierCurveTo.scaled.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.bezierCurveTo.scaled</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.bezierCurveTo.scaled</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.scale(1000, 1000); + ctx.strokeStyle = '#0f0'; + ctx.lineWidth = 0.055; + ctx.beginPath(); + ctx.moveTo(-2, 3.1); + ctx.bezierCurveTo(-2, -1, 2.1, -1, 2.1, 3.1); + ctx.stroke(); + _assertPixel(canvas, 50,25, 0,255,0,255); + _assertPixel(canvas, 1,1, 0,255,0,255); + _assertPixel(canvas, 98,1, 0,255,0,255); + _assertPixel(canvas, 1,48, 0,255,0,255); + _assertPixel(canvas, 98,48, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.bezierCurveTo.shape.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.bezierCurveTo.shape.html new file mode 100644 index 0000000000..cbc2824425 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.bezierCurveTo.shape.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.bezierCurveTo.shape</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.bezierCurveTo.shape</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.strokeStyle = '#0f0'; + ctx.lineWidth = 55; + ctx.beginPath(); + ctx.moveTo(-2000, 3100); + ctx.bezierCurveTo(-2000, -1000, 2100, -1000, 2100, 3100); + ctx.stroke(); + _assertPixel(canvas, 50,25, 0,255,0,255); + _assertPixel(canvas, 1,1, 0,255,0,255); + _assertPixel(canvas, 98,1, 0,255,0,255); + _assertPixel(canvas, 1,48, 0,255,0,255); + _assertPixel(canvas, 98,48, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.clip.basic.1.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.clip.basic.1.html new file mode 100644 index 0000000000..a5515e4f7e --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.clip.basic.1.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.clip.basic.1</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.clip.basic.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 = '#f00'; + ctx.fillRect(0, 0, 100, 50); + + ctx.beginPath(); + ctx.rect(0, 0, 100, 50); + ctx.clip(); + + ctx.fillStyle = '#0f0'; + ctx.fillRect(0, 0, 100, 50); + + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.clip.basic.2.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.clip.basic.2.html new file mode 100644 index 0000000000..27e1ad0b0c --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.clip.basic.2.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.clip.basic.2</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.clip.basic.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, 0, 100, 50); + + ctx.beginPath(); + ctx.rect(-100, 0, 100, 50); + ctx.clip(); + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.clip.empty.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.clip.empty.html new file mode 100644 index 0000000000..17208ad797 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.clip.empty.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.clip.empty</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.clip.empty</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.beginPath(); + ctx.clip(); + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.clip.intersect.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.clip.intersect.html new file mode 100644 index 0000000000..c1057f2645 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.clip.intersect.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.clip.intersect</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.clip.intersect</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.beginPath(); + ctx.rect(0, 0, 50, 50); + ctx.clip(); + ctx.beginPath(); + ctx.rect(50, 0, 50, 50) + ctx.clip(); + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.clip.unaffected.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.clip.unaffected.html new file mode 100644 index 0000000000..66f0379602 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.clip.unaffected.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.clip.unaffected</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.clip.unaffected</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.fillStyle = '#0f0'; + + ctx.beginPath(); + ctx.moveTo(0, 0); + ctx.lineTo(0, 50); + ctx.lineTo(100, 50); + ctx.lineTo(100, 0); + ctx.clip(); + + ctx.lineTo(0, 0); + ctx.fill(); + + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.clip.winding.1.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.clip.winding.1.html new file mode 100644 index 0000000000..46e4db9b6c --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.clip.winding.1.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.clip.winding.1</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.clip.winding.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, 100, 50); + + ctx.beginPath(); + ctx.moveTo(-10, -10); + ctx.lineTo(110, -10); + ctx.lineTo(110, 60); + ctx.lineTo(-10, 60); + ctx.lineTo(-10, -10); + ctx.lineTo(0, 0); + ctx.lineTo(0, 50); + ctx.lineTo(100, 50); + ctx.lineTo(100, 0); + ctx.clip(); + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.clip.winding.2.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.clip.winding.2.html new file mode 100644 index 0000000000..9341353a8d --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.clip.winding.2.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.clip.winding.2</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.clip.winding.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 = '#f00'; + ctx.fillRect(0, 0, 100, 50); + + ctx.beginPath(); + ctx.moveTo(-10, -10); + ctx.lineTo(110, -10); + ctx.lineTo(110, 60); + ctx.lineTo(-10, 60); + ctx.lineTo(-10, -10); + ctx.clip(); + + ctx.beginPath(); + ctx.moveTo(0, 0); + ctx.lineTo(0, 50); + ctx.lineTo(100, 50); + ctx.lineTo(100, 0); + ctx.lineTo(0, 0); + ctx.clip(); + + ctx.fillStyle = '#0f0'; + ctx.fillRect(0, 0, 100, 50); + + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.closePath.empty.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.closePath.empty.html new file mode 100644 index 0000000000..898cdc5fa6 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.closePath.empty.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.closePath.empty</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.closePath.empty</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.closePath(); + ctx.fillStyle = '#f00'; + ctx.fill(); + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.closePath.newline.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.closePath.newline.html new file mode 100644 index 0000000000..07ec4b2a82 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.closePath.newline.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.closePath.newline</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.closePath.newline</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.strokeStyle = '#0f0'; + ctx.lineWidth = 50; + ctx.moveTo(-100, 25); + ctx.lineTo(-100, -100); + ctx.lineTo(200, -100); + ctx.lineTo(200, 25); + ctx.closePath(); + ctx.stroke(); + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.closePath.nextpoint.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.closePath.nextpoint.html new file mode 100644 index 0000000000..648d7ad37a --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.closePath.nextpoint.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.closePath.nextpoint</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.closePath.nextpoint</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.strokeStyle = '#0f0'; + ctx.lineWidth = 50; + ctx.moveTo(-100, 25); + ctx.lineTo(-100, -1000); + ctx.closePath(); + ctx.lineTo(1000, 25); + ctx.stroke(); + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.ellipse.basics.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.ellipse.basics.html new file mode 100644 index 0000000000..d46dc31d26 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.ellipse.basics.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.ellipse.basics</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.ellipse.basics</h1> +<p class="desc">Verify canvas throws error when drawing ellipse with negative radii.</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("Verify canvas throws error when drawing ellipse with negative radii."); +_addTest(function(canvas, ctx) { + + ctx.ellipse(10, 10, 10, 5, 0, 0, 1, false); + ctx.ellipse(10, 10, 10, 0, 0, 0, 1, false); + ctx.ellipse(10, 10, -0, 5, 0, 0, 1, false); + assert_throws_dom("INDEX_SIZE_ERR", function() { ctx.ellipse(10, 10, -2, 5, 0, 0, 1, false); }); + assert_throws_dom("INDEX_SIZE_ERR", function() { ctx.ellipse(10, 10, 0, -1.5, 0, 0, 1, false); }); + assert_throws_dom("INDEX_SIZE_ERR", function() { ctx.ellipse(10, 10, -2, -5, 0, 0, 1, false); }); + ctx.ellipse(80, 0, 10, 4294967277, Math.PI / -84, -Math.PI / 2147483436, false); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.fill.closed.basic.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.fill.closed.basic.html new file mode 100644 index 0000000000..010dbf43e1 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.fill.closed.basic.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.fill.closed.basic</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.fill.closed.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.fillStyle = '#0f0'; + ctx.moveTo(0, 0); + ctx.lineTo(100, 0); + ctx.lineTo(100, 50); + ctx.lineTo(0, 50); + ctx.fill(); + + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.fill.closed.unaffected.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.fill.closed.unaffected.html new file mode 100644 index 0000000000..e00a6c8f55 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.fill.closed.unaffected.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.fill.closed.unaffected</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.fill.closed.unaffected</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 = '#00f'; + ctx.fillRect(0, 0, 100, 50); + + ctx.moveTo(0, 0); + ctx.lineTo(100, 0); + ctx.lineTo(100, 50); + ctx.fillStyle = '#f00'; + ctx.fill(); + ctx.lineTo(0, 50); + ctx.fillStyle = '#0f0'; + ctx.fill(); + + _assertPixel(canvas, 90,10, 0,255,0,255); + _assertPixel(canvas, 10,40, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.fill.overlap.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.fill.overlap.html new file mode 100644 index 0000000000..08782ed11e --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.fill.overlap.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.fill.overlap</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.fill.overlap</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="2d.path.fill.overlap.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +var t = async_test(""); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#000'; + ctx.fillRect(0, 0, 100, 50); + + ctx.fillStyle = 'rgba(0, 255, 0, 0.5)'; + ctx.rect(0, 0, 100, 50); + ctx.closePath(); + ctx.rect(10, 10, 80, 30); + ctx.fill(); + + _assertPixelApprox(canvas, 50,25, 0,127,0,255, 1); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.fill.overlap.png b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.fill.overlap.png Binary files differnew file mode 100644 index 0000000000..e2a35d48d4 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.fill.overlap.png diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.fill.winding.add.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.fill.winding.add.html new file mode 100644 index 0000000000..ef9a2a0f93 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.fill.winding.add.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.fill.winding.add</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.fill.winding.add</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.fillStyle = '#0f0'; + ctx.moveTo(-10, -10); + ctx.lineTo(110, -10); + ctx.lineTo(110, 60); + ctx.lineTo(-10, 60); + ctx.lineTo(-10, -10); + ctx.lineTo(0, 0); + ctx.lineTo(100, 0); + ctx.lineTo(100, 50); + ctx.lineTo(0, 50); + ctx.fill(); + + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.fill.winding.subtract.1.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.fill.winding.subtract.1.html new file mode 100644 index 0000000000..eecf0198e2 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.fill.winding.subtract.1.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.fill.winding.subtract.1</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.fill.winding.subtract.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, 100, 50); + + ctx.fillStyle = '#f00'; + ctx.moveTo(-10, -10); + ctx.lineTo(110, -10); + ctx.lineTo(110, 60); + ctx.lineTo(-10, 60); + ctx.lineTo(-10, -10); + ctx.lineTo(0, 0); + ctx.lineTo(0, 50); + ctx.lineTo(100, 50); + ctx.lineTo(100, 0); + ctx.fill(); + + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.fill.winding.subtract.2.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.fill.winding.subtract.2.html new file mode 100644 index 0000000000..cf8b6a6ce9 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.fill.winding.subtract.2.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.fill.winding.subtract.2</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.fill.winding.subtract.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, 0, 100, 50); + + ctx.fillStyle = '#f00'; + ctx.moveTo(-10, -10); + ctx.lineTo(110, -10); + ctx.lineTo(110, 60); + ctx.lineTo(-10, 60); + ctx.moveTo(0, 0); + ctx.lineTo(0, 50); + ctx.lineTo(100, 50); + ctx.lineTo(100, 0); + ctx.fill(); + + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.fill.winding.subtract.3.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.fill.winding.subtract.3.html new file mode 100644 index 0000000000..e056e33003 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.fill.winding.subtract.3.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.fill.winding.subtract.3</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.fill.winding.subtract.3</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.fillStyle = '#0f0'; + ctx.moveTo(-10, -10); + ctx.lineTo(110, -10); + ctx.lineTo(110, 60); + ctx.lineTo(-10, 60); + ctx.lineTo(-10, -10); + ctx.lineTo(-20, -20); + ctx.lineTo(120, -20); + ctx.lineTo(120, 70); + ctx.lineTo(-20, 70); + ctx.lineTo(-20, -20); + ctx.lineTo(0, 0); + ctx.lineTo(0, 50); + ctx.lineTo(100, 50); + ctx.lineTo(100, 0); + ctx.fill(); + + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.initial.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.initial.html new file mode 100644 index 0000000000..a3de93a799 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.initial.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.initial</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.initial</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.closePath(); + ctx.fillStyle = '#f00'; + ctx.fill(); + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.arc.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.arc.html new file mode 100644 index 0000000000..bc4bc560e5 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.arc.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.isPointInPath.arc</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.isPointInPath.arc</h1> +<p class="desc">isPointInPath() works on arcs</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("isPointInPath() works on arcs"); +_addTest(function(canvas, ctx) { + + ctx.arc(50, 25, 10, 0, Math.PI, false); + _assertSame(ctx.isPointInPath(50, 10), false, "ctx.isPointInPath(50, 10)", "false"); + _assertSame(ctx.isPointInPath(50, 20), false, "ctx.isPointInPath(50, 20)", "false"); + _assertSame(ctx.isPointInPath(50, 30), true, "ctx.isPointInPath(50, 30)", "true"); + _assertSame(ctx.isPointInPath(50, 40), false, "ctx.isPointInPath(50, 40)", "false"); + _assertSame(ctx.isPointInPath(30, 20), false, "ctx.isPointInPath(30, 20)", "false"); + _assertSame(ctx.isPointInPath(70, 20), false, "ctx.isPointInPath(70, 20)", "false"); + _assertSame(ctx.isPointInPath(30, 30), false, "ctx.isPointInPath(30, 30)", "false"); + _assertSame(ctx.isPointInPath(70, 30), false, "ctx.isPointInPath(70, 30)", "false"); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.basic.1.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.basic.1.html new file mode 100644 index 0000000000..22562c60a2 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.basic.1.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.isPointInPath.basic.1</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.isPointInPath.basic.1</h1> +<p class="desc">isPointInPath() detects whether the point is inside the path</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("isPointInPath() detects whether the point is inside the path"); +_addTest(function(canvas, ctx) { + + ctx.rect(0, 0, 20, 20); + _assertSame(ctx.isPointInPath(10, 10), true, "ctx.isPointInPath(10, 10)", "true"); + _assertSame(ctx.isPointInPath(30, 10), false, "ctx.isPointInPath(30, 10)", "false"); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.basic.2.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.basic.2.html new file mode 100644 index 0000000000..9fc1060df8 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.basic.2.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.isPointInPath.basic.2</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.isPointInPath.basic.2</h1> +<p class="desc">isPointInPath() detects whether the point is inside the path</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("isPointInPath() detects whether the point is inside the path"); +_addTest(function(canvas, ctx) { + + ctx.rect(20, 0, 20, 20); + _assertSame(ctx.isPointInPath(10, 10), false, "ctx.isPointInPath(10, 10)", "false"); + _assertSame(ctx.isPointInPath(30, 10), true, "ctx.isPointInPath(30, 10)", "true"); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.basic.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.basic.html new file mode 100644 index 0000000000..5e3edfcc80 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.basic.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.isPointInPath.basic</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.isPointInPath.basic</h1> +<p class="desc">Verify the winding rule in isPointInPath works for for rect path.</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("Verify the winding rule in isPointInPath works for for rect path."); +_addTest(function(canvas, ctx) { + + canvas.width = 200; + canvas.height = 200; + + // Testing default isPointInPath + ctx.beginPath(); + ctx.rect(0, 0, 100, 100); + ctx.rect(25, 25, 50, 50); + _assertSame(ctx.isPointInPath(50, 50), true, "ctx.isPointInPath(50, 50)", "true"); + _assertSame(ctx.isPointInPath(NaN, 50), false, "ctx.isPointInPath(NaN, 50)", "false"); + _assertSame(ctx.isPointInPath(50, NaN), false, "ctx.isPointInPath(50, NaN)", "false"); + + // Testing nonzero isPointInPath + ctx.beginPath(); + ctx.rect(0, 0, 100, 100); + ctx.rect(25, 25, 50, 50); + _assertSame(ctx.isPointInPath(50, 50, 'nonzero'), true, "ctx.isPointInPath(50, 50, 'nonzero')", "true"); + + // Testing evenodd isPointInPath + ctx.beginPath(); + ctx.rect(0, 0, 100, 100); + ctx.rect(25, 25, 50, 50); + _assertSame(ctx.isPointInPath(50, 50, 'evenodd'), false, "ctx.isPointInPath(50, 50, 'evenodd')", "false"); + + // Testing extremely large scale + ctx.save(); + ctx.scale(Number.MAX_VALUE, Number.MAX_VALUE); + ctx.beginPath(); + ctx.rect(-10, -10, 20, 20); + _assertSame(ctx.isPointInPath(0, 0, 'nonzero'), true, "ctx.isPointInPath(0, 0, 'nonzero')", "true"); + _assertSame(ctx.isPointInPath(0, 0, 'evenodd'), true, "ctx.isPointInPath(0, 0, 'evenodd')", "true"); + ctx.restore(); + + // Check with non-invertible ctm. + ctx.save(); + ctx.scale(0, 0); + ctx.beginPath(); + ctx.rect(-10, -10, 20, 20); + _assertSame(ctx.isPointInPath(0, 0, 'nonzero'), false, "ctx.isPointInPath(0, 0, 'nonzero')", "false"); + _assertSame(ctx.isPointInPath(0, 0, 'evenodd'), false, "ctx.isPointInPath(0, 0, 'evenodd')", "false"); + ctx.restore(); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.bezier.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.bezier.html new file mode 100644 index 0000000000..b2f2d23724 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.bezier.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.isPointInPath.bezier</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.isPointInPath.bezier</h1> +<p class="desc">isPointInPath() works on Bezier curves</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("isPointInPath() works on Bezier curves"); +_addTest(function(canvas, ctx) { + + ctx.moveTo(25, 25); + ctx.bezierCurveTo(50, -50, 50, 100, 75, 25); + _assertSame(ctx.isPointInPath(25, 20), false, "ctx.isPointInPath(25, 20)", "false"); + _assertSame(ctx.isPointInPath(25, 30), false, "ctx.isPointInPath(25, 30)", "false"); + _assertSame(ctx.isPointInPath(30, 20), true, "ctx.isPointInPath(30, 20)", "true"); + _assertSame(ctx.isPointInPath(30, 30), false, "ctx.isPointInPath(30, 30)", "false"); + _assertSame(ctx.isPointInPath(40, 2), false, "ctx.isPointInPath(40, 2)", "false"); + _assertSame(ctx.isPointInPath(40, 20), true, "ctx.isPointInPath(40, 20)", "true"); + _assertSame(ctx.isPointInPath(40, 30), false, "ctx.isPointInPath(40, 30)", "false"); + _assertSame(ctx.isPointInPath(40, 47), false, "ctx.isPointInPath(40, 47)", "false"); + _assertSame(ctx.isPointInPath(45, 20), true, "ctx.isPointInPath(45, 20)", "true"); + _assertSame(ctx.isPointInPath(45, 30), false, "ctx.isPointInPath(45, 30)", "false"); + _assertSame(ctx.isPointInPath(55, 20), false, "ctx.isPointInPath(55, 20)", "false"); + _assertSame(ctx.isPointInPath(55, 30), true, "ctx.isPointInPath(55, 30)", "true"); + _assertSame(ctx.isPointInPath(60, 2), false, "ctx.isPointInPath(60, 2)", "false"); + _assertSame(ctx.isPointInPath(60, 20), false, "ctx.isPointInPath(60, 20)", "false"); + _assertSame(ctx.isPointInPath(60, 30), true, "ctx.isPointInPath(60, 30)", "true"); + _assertSame(ctx.isPointInPath(60, 47), false, "ctx.isPointInPath(60, 47)", "false"); + _assertSame(ctx.isPointInPath(70, 20), false, "ctx.isPointInPath(70, 20)", "false"); + _assertSame(ctx.isPointInPath(70, 30), true, "ctx.isPointInPath(70, 30)", "true"); + _assertSame(ctx.isPointInPath(75, 20), false, "ctx.isPointInPath(75, 20)", "false"); + _assertSame(ctx.isPointInPath(75, 30), false, "ctx.isPointInPath(75, 30)", "false"); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.bigarc.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.bigarc.html new file mode 100644 index 0000000000..77cb495137 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.bigarc.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.isPointInPath.bigarc</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.isPointInPath.bigarc</h1> +<p class="desc">isPointInPath() works on unclosed arcs larger than 2pi</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("isPointInPath() works on unclosed arcs larger than 2pi"); +_addTest(function(canvas, ctx) { + + ctx.arc(50, 25, 10, 0, 7, false); + _assertSame(ctx.isPointInPath(50, 10), false, "ctx.isPointInPath(50, 10)", "false"); + _assertSame(ctx.isPointInPath(50, 20), true, "ctx.isPointInPath(50, 20)", "true"); + _assertSame(ctx.isPointInPath(50, 30), true, "ctx.isPointInPath(50, 30)", "true"); + _assertSame(ctx.isPointInPath(50, 40), false, "ctx.isPointInPath(50, 40)", "false"); + _assertSame(ctx.isPointInPath(30, 20), false, "ctx.isPointInPath(30, 20)", "false"); + _assertSame(ctx.isPointInPath(70, 20), false, "ctx.isPointInPath(70, 20)", "false"); + _assertSame(ctx.isPointInPath(30, 30), false, "ctx.isPointInPath(30, 30)", "false"); + _assertSame(ctx.isPointInPath(70, 30), false, "ctx.isPointInPath(70, 30)", "false"); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.edge.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.edge.html new file mode 100644 index 0000000000..b00da5a2a7 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.edge.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.isPointInPath.edge</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.isPointInPath.edge</h1> +<p class="desc">isPointInPath() counts points on the path as being inside</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("isPointInPath() counts points on the path as being inside"); +_addTest(function(canvas, ctx) { + + ctx.rect(0, 0, 20, 20); + _assertSame(ctx.isPointInPath(0, 0), true, "ctx.isPointInPath(0, 0)", "true"); + _assertSame(ctx.isPointInPath(10, 0), true, "ctx.isPointInPath(10, 0)", "true"); + _assertSame(ctx.isPointInPath(20, 0), true, "ctx.isPointInPath(20, 0)", "true"); + _assertSame(ctx.isPointInPath(20, 10), true, "ctx.isPointInPath(20, 10)", "true"); + _assertSame(ctx.isPointInPath(20, 20), true, "ctx.isPointInPath(20, 20)", "true"); + _assertSame(ctx.isPointInPath(10, 20), true, "ctx.isPointInPath(10, 20)", "true"); + _assertSame(ctx.isPointInPath(0, 20), true, "ctx.isPointInPath(0, 20)", "true"); + _assertSame(ctx.isPointInPath(0, 10), true, "ctx.isPointInPath(0, 10)", "true"); + _assertSame(ctx.isPointInPath(10, -0.01), false, "ctx.isPointInPath(10, -0.01)", "false"); + _assertSame(ctx.isPointInPath(10, 20.01), false, "ctx.isPointInPath(10, 20.01)", "false"); + _assertSame(ctx.isPointInPath(-0.01, 10), false, "ctx.isPointInPath(-0.01, 10)", "false"); + _assertSame(ctx.isPointInPath(20.01, 10), false, "ctx.isPointInPath(20.01, 10)", "false"); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.empty.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.empty.html new file mode 100644 index 0000000000..3edfe01a2a --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.empty.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.isPointInPath.empty</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.isPointInPath.empty</h1> +<p class="desc">isPointInPath() works when there is no path</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("isPointInPath() works when there is no path"); +_addTest(function(canvas, ctx) { + + _assertSame(ctx.isPointInPath(0, 0), false, "ctx.isPointInPath(0, 0)", "false"); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.nonfinite.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.nonfinite.html new file mode 100644 index 0000000000..4ef541a431 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.nonfinite.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.isPointInPath.nonfinite</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.isPointInPath.nonfinite</h1> +<p class="desc">isPointInPath() returns false for non-finite arguments</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("isPointInPath() returns false for non-finite arguments"); +_addTest(function(canvas, ctx) { + + ctx.rect(-100, -50, 200, 100); + _assertSame(ctx.isPointInPath(Infinity, 0), false, "ctx.isPointInPath(Infinity, 0)", "false"); + _assertSame(ctx.isPointInPath(-Infinity, 0), false, "ctx.isPointInPath(-Infinity, 0)", "false"); + _assertSame(ctx.isPointInPath(NaN, 0), false, "ctx.isPointInPath(NaN, 0)", "false"); + _assertSame(ctx.isPointInPath(0, Infinity), false, "ctx.isPointInPath(0, Infinity)", "false"); + _assertSame(ctx.isPointInPath(0, -Infinity), false, "ctx.isPointInPath(0, -Infinity)", "false"); + _assertSame(ctx.isPointInPath(0, NaN), false, "ctx.isPointInPath(0, NaN)", "false"); + _assertSame(ctx.isPointInPath(NaN, NaN), false, "ctx.isPointInPath(NaN, NaN)", "false"); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.outside.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.outside.html new file mode 100644 index 0000000000..6431879eb6 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.outside.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.isPointInPath.outside</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.isPointInPath.outside</h1> +<p class="desc">isPointInPath() works on paths outside the canvas</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("isPointInPath() works on paths outside the canvas"); +_addTest(function(canvas, ctx) { + + ctx.rect(0, -100, 20, 20); + ctx.rect(20, -10, 20, 20); + _assertSame(ctx.isPointInPath(10, -110), false, "ctx.isPointInPath(10, -110)", "false"); + _assertSame(ctx.isPointInPath(10, -90), true, "ctx.isPointInPath(10, -90)", "true"); + _assertSame(ctx.isPointInPath(10, -70), false, "ctx.isPointInPath(10, -70)", "false"); + _assertSame(ctx.isPointInPath(30, -20), false, "ctx.isPointInPath(30, -20)", "false"); + _assertSame(ctx.isPointInPath(30, 0), true, "ctx.isPointInPath(30, 0)", "true"); + _assertSame(ctx.isPointInPath(30, 20), false, "ctx.isPointInPath(30, 20)", "false"); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.subpath.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.subpath.html new file mode 100644 index 0000000000..5d664557d8 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.subpath.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.isPointInPath.subpath</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.isPointInPath.subpath</h1> +<p class="desc">isPointInPath() uses the current path, not just the subpath</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("isPointInPath() uses the current path, not just the subpath"); +_addTest(function(canvas, ctx) { + + ctx.rect(0, 0, 20, 20); + ctx.beginPath(); + ctx.rect(20, 0, 20, 20); + ctx.closePath(); + ctx.rect(40, 0, 20, 20); + _assertSame(ctx.isPointInPath(10, 10), false, "ctx.isPointInPath(10, 10)", "false"); + _assertSame(ctx.isPointInPath(30, 10), true, "ctx.isPointInPath(30, 10)", "true"); + _assertSame(ctx.isPointInPath(50, 10), true, "ctx.isPointInPath(50, 10)", "true"); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.transform.1.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.transform.1.html new file mode 100644 index 0000000000..7268c3255f --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.transform.1.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.isPointInPath.transform.1</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.isPointInPath.transform.1</h1> +<p class="desc">isPointInPath() handles transformations correctly</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("isPointInPath() handles transformations correctly"); +_addTest(function(canvas, ctx) { + + ctx.translate(50, 0); + ctx.rect(0, 0, 20, 20); + _assertSame(ctx.isPointInPath(-40, 10), false, "ctx.isPointInPath(-40, 10)", "false"); + _assertSame(ctx.isPointInPath(10, 10), false, "ctx.isPointInPath(10, 10)", "false"); + _assertSame(ctx.isPointInPath(49, 10), false, "ctx.isPointInPath(49, 10)", "false"); + _assertSame(ctx.isPointInPath(51, 10), true, "ctx.isPointInPath(51, 10)", "true"); + _assertSame(ctx.isPointInPath(69, 10), true, "ctx.isPointInPath(69, 10)", "true"); + _assertSame(ctx.isPointInPath(71, 10), false, "ctx.isPointInPath(71, 10)", "false"); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.transform.2.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.transform.2.html new file mode 100644 index 0000000000..3adac7a419 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.transform.2.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.isPointInPath.transform.2</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.isPointInPath.transform.2</h1> +<p class="desc">isPointInPath() handles transformations correctly</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("isPointInPath() handles transformations correctly"); +_addTest(function(canvas, ctx) { + + ctx.rect(50, 0, 20, 20); + ctx.translate(50, 0); + _assertSame(ctx.isPointInPath(-40, 10), false, "ctx.isPointInPath(-40, 10)", "false"); + _assertSame(ctx.isPointInPath(10, 10), false, "ctx.isPointInPath(10, 10)", "false"); + _assertSame(ctx.isPointInPath(49, 10), false, "ctx.isPointInPath(49, 10)", "false"); + _assertSame(ctx.isPointInPath(51, 10), true, "ctx.isPointInPath(51, 10)", "true"); + _assertSame(ctx.isPointInPath(69, 10), true, "ctx.isPointInPath(69, 10)", "true"); + _assertSame(ctx.isPointInPath(71, 10), false, "ctx.isPointInPath(71, 10)", "false"); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.transform.3.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.transform.3.html new file mode 100644 index 0000000000..8769c8a593 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.transform.3.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.isPointInPath.transform.3</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.isPointInPath.transform.3</h1> +<p class="desc">isPointInPath() handles transformations correctly</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("isPointInPath() handles transformations correctly"); +_addTest(function(canvas, ctx) { + + ctx.scale(-1, 1); + ctx.rect(-70, 0, 20, 20); + _assertSame(ctx.isPointInPath(-40, 10), false, "ctx.isPointInPath(-40, 10)", "false"); + _assertSame(ctx.isPointInPath(10, 10), false, "ctx.isPointInPath(10, 10)", "false"); + _assertSame(ctx.isPointInPath(49, 10), false, "ctx.isPointInPath(49, 10)", "false"); + _assertSame(ctx.isPointInPath(51, 10), true, "ctx.isPointInPath(51, 10)", "true"); + _assertSame(ctx.isPointInPath(69, 10), true, "ctx.isPointInPath(69, 10)", "true"); + _assertSame(ctx.isPointInPath(71, 10), false, "ctx.isPointInPath(71, 10)", "false"); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.transform.4.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.transform.4.html new file mode 100644 index 0000000000..1bcc0bc3a3 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.transform.4.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.isPointInPath.transform.4</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.isPointInPath.transform.4</h1> +<p class="desc">isPointInPath() handles transformations correctly</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("isPointInPath() handles transformations correctly"); +_addTest(function(canvas, ctx) { + + ctx.translate(50, 0); + ctx.rect(50, 0, 20, 20); + ctx.translate(0, 50); + _assertSame(ctx.isPointInPath(60, 10), false, "ctx.isPointInPath(60, 10)", "false"); + _assertSame(ctx.isPointInPath(110, 10), true, "ctx.isPointInPath(110, 10)", "true"); + _assertSame(ctx.isPointInPath(110, 60), false, "ctx.isPointInPath(110, 60)", "false"); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.unclosed.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.unclosed.html new file mode 100644 index 0000000000..2e3b711129 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.unclosed.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.isPointInPath.unclosed</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.isPointInPath.unclosed</h1> +<p class="desc">isPointInPath() works on unclosed subpaths</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("isPointInPath() works on unclosed subpaths"); +_addTest(function(canvas, ctx) { + + ctx.moveTo(0, 0); + ctx.lineTo(20, 0); + ctx.lineTo(20, 20); + ctx.lineTo(0, 20); + _assertSame(ctx.isPointInPath(10, 10), true, "ctx.isPointInPath(10, 10)", "true"); + _assertSame(ctx.isPointInPath(30, 10), false, "ctx.isPointInPath(30, 10)", "false"); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.winding.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.winding.html new file mode 100644 index 0000000000..ec22570797 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.winding.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.isPointInPath.winding</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.isPointInPath.winding</h1> +<p class="desc">isPointInPath() uses the non-zero winding number rule</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("isPointInPath() uses the non-zero winding number rule"); +_addTest(function(canvas, ctx) { + + // Create a square ring, using opposite windings to make a hole in the centre + ctx.moveTo(0, 0); + ctx.lineTo(50, 0); + ctx.lineTo(50, 50); + ctx.lineTo(0, 50); + ctx.lineTo(0, 0); + ctx.lineTo(10, 10); + ctx.lineTo(10, 40); + ctx.lineTo(40, 40); + ctx.lineTo(40, 10); + ctx.lineTo(10, 10); + + _assertSame(ctx.isPointInPath(5, 5), true, "ctx.isPointInPath(5, 5)", "true"); + _assertSame(ctx.isPointInPath(25, 5), true, "ctx.isPointInPath(25, 5)", "true"); + _assertSame(ctx.isPointInPath(45, 5), true, "ctx.isPointInPath(45, 5)", "true"); + _assertSame(ctx.isPointInPath(5, 25), true, "ctx.isPointInPath(5, 25)", "true"); + _assertSame(ctx.isPointInPath(25, 25), false, "ctx.isPointInPath(25, 25)", "false"); + _assertSame(ctx.isPointInPath(45, 25), true, "ctx.isPointInPath(45, 25)", "true"); + _assertSame(ctx.isPointInPath(5, 45), true, "ctx.isPointInPath(5, 45)", "true"); + _assertSame(ctx.isPointInPath(25, 45), true, "ctx.isPointInPath(25, 45)", "true"); + _assertSame(ctx.isPointInPath(45, 45), true, "ctx.isPointInPath(45, 45)", "true"); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInStroke.scaleddashes.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInStroke.scaleddashes.html new file mode 100644 index 0000000000..e27baa1549 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInStroke.scaleddashes.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.isPointInStroke.scaleddashes</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.isPointInStroke.scaleddashes</h1> +<p class="desc">isPointInStroke() should return correct results on dashed paths at high scale factors</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("isPointInStroke() should return correct results on dashed paths at high scale factors"); +_addTest(function(canvas, ctx) { + + var scale = 20; + ctx.setLineDash([10, 21.4159]); // dash from t=0 to t=10 along the circle + ctx.scale(scale, scale); + ctx.ellipse(6, 10, 5, 5, 0, 2*Math.PI, false); + ctx.stroke(); + + // hit-test the beginning of the dash (t=0) + _assertSame(ctx.isPointInStroke(11*scale, 10*scale), true, "ctx.isPointInStroke(11*scale, 10*scale)", "true"); + // hit-test the middle of the dash (t=5) + _assertSame(ctx.isPointInStroke(8.70*scale, 14.21*scale), true, "ctx.isPointInStroke(8.70*scale, 14.21*scale)", "true"); + // hit-test the end of the dash (t=9.8) + _assertSame(ctx.isPointInStroke(4.10*scale, 14.63*scale), true, "ctx.isPointInStroke(4.10*scale, 14.63*scale)", "true"); + // hit-test past the end of the dash (t=10.2) + _assertSame(ctx.isPointInStroke(3.74*scale, 14.46*scale), false, "ctx.isPointInStroke(3.74*scale, 14.46*scale)", "false"); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInpath.invalid.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInpath.invalid.html new file mode 100644 index 0000000000..301c7c447d --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInpath.invalid.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.isPointInpath.invalid</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.isPointInpath.invalid</h1> +<p class="desc">Verify isPointInPath throws exceptions with invalid inputs.</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("Verify isPointInPath throws exceptions with invalid inputs."); +_addTest(function(canvas, ctx) { + + canvas.width = 200; + canvas.height = 200; + path = new Path2D(); + path.rect(0, 0, 100, 100); + path.rect(25, 25, 50, 50); + // Testing invalid enumeration isPointInPath (w/ and w/o Path object'); + assert_throws_js(TypeError, function() { ctx.isPointInPath(path, 50, 50, 'gazonk'); }); + assert_throws_js(TypeError, function() { ctx.isPointInPath(50, 50, 'gazonk'); }); + + // Testing invalid type isPointInPath with Path object'); + assert_throws_js(TypeError, function() { ctx.isPointInPath(null, 50, 50); }); + assert_throws_js(TypeError, function() { ctx.isPointInPath(null, 50, 50, 'nonzero'); }); + assert_throws_js(TypeError, function() { ctx.isPointInPath(null, 50, 50, 'evenodd'); }); + assert_throws_js(TypeError, function() { ctx.isPointInPath(null, 50, 50, null); }); + assert_throws_js(TypeError, function() { ctx.isPointInPath(path, 50, 50, null); }); + assert_throws_js(TypeError, function() { ctx.isPointInPath(undefined, 50, 50); }); + assert_throws_js(TypeError, function() { ctx.isPointInPath(undefined, 50, 50, 'nonzero'); }); + assert_throws_js(TypeError, function() { ctx.isPointInPath(undefined, 50, 50, 'evenodd'); }); + assert_throws_js(TypeError, function() { ctx.isPointInPath(undefined, 50, 50, undefined); }); + assert_throws_js(TypeError, function() { ctx.isPointInPath([], 50, 50); }); + assert_throws_js(TypeError, function() { ctx.isPointInPath([], 50, 50, 'nonzero'); }); + assert_throws_js(TypeError, function() { ctx.isPointInPath([], 50, 50, 'evenodd'); }); + assert_throws_js(TypeError, function() { ctx.isPointInPath({}, 50, 50); }); + assert_throws_js(TypeError, function() { ctx.isPointInPath({}, 50, 50, 'nonzero'); }); + assert_throws_js(TypeError, function() { ctx.isPointInPath({}, 50, 50, 'evenodd'); }); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInpath.multi.path.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInpath.multi.path.html new file mode 100644 index 0000000000..d71bd8a4c4 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInpath.multi.path.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.isPointInpath.multi.path</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.isPointInpath.multi.path</h1> +<p class="desc">Verify the winding rule in isPointInPath works for path object.</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("Verify the winding rule in isPointInPath works for path object."); +_addTest(function(canvas, ctx) { + + canvas.width = 200; + canvas.height = 200; + + // Testing default isPointInPath with Path object'); + path = new Path2D(); + path.rect(0, 0, 100, 100); + path.rect(25, 25, 50, 50); + _assertSame(ctx.isPointInPath(path, 50, 50), true, "ctx.isPointInPath(path, 50, 50)", "true"); + _assertSame(ctx.isPointInPath(path, 50, 50, undefined), true, "ctx.isPointInPath(path, 50, 50, undefined)", "true"); + _assertSame(ctx.isPointInPath(path, NaN, 50), false, "ctx.isPointInPath(path, NaN, 50)", "false"); + _assertSame(ctx.isPointInPath(path, 50, NaN), false, "ctx.isPointInPath(path, 50, NaN)", "false"); + + // Testing nonzero isPointInPath with Path object'); + path = new Path2D(); + path.rect(0, 0, 100, 100); + path.rect(25, 25, 50, 50); + _assertSame(ctx.isPointInPath(path, 50, 50, 'nonzero'), true, "ctx.isPointInPath(path, 50, 50, 'nonzero')", "true"); + + // Testing evenodd isPointInPath with Path object'); + path = new Path2D(); + path.rect(0, 0, 100, 100); + path.rect(25, 25, 50, 50); + assert_false(ctx.isPointInPath(path, 50, 50, 'evenodd')); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.lineTo.basic.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.lineTo.basic.html new file mode 100644 index 0000000000..c6f2caa196 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.lineTo.basic.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.lineTo.basic</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.lineTo.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.strokeStyle = '#0f0'; + ctx.lineWidth = 50; + ctx.beginPath(); + ctx.moveTo(0, 25); + ctx.lineTo(100, 25); + ctx.stroke(); + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.lineTo.ensuresubpath.1.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.lineTo.ensuresubpath.1.html new file mode 100644 index 0000000000..ada8f0ca29 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.lineTo.ensuresubpath.1.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.lineTo.ensuresubpath.1</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.lineTo.ensuresubpath.1</h1> +<p class="desc">If there is no subpath, the point is added and nothing is drawn</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("If there is no subpath, the point is added and nothing is drawn"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#0f0'; + ctx.fillRect(0, 0, 100, 50); + ctx.strokeStyle = '#f00'; + ctx.lineWidth = 50; + ctx.beginPath(); + ctx.lineTo(100, 50); + ctx.stroke(); + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.lineTo.ensuresubpath.2.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.lineTo.ensuresubpath.2.html new file mode 100644 index 0000000000..ac1f9238ff --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.lineTo.ensuresubpath.2.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.lineTo.ensuresubpath.2</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.lineTo.ensuresubpath.2</h1> +<p class="desc">If there is no subpath, the point is added and used for subsequent drawing</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("If there is no subpath, the point is added and used for subsequent drawing"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.strokeStyle = '#0f0'; + ctx.lineWidth = 50; + ctx.beginPath(); + ctx.lineTo(0, 25); + ctx.lineTo(100, 25); + ctx.stroke(); + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.lineTo.nextpoint.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.lineTo.nextpoint.html new file mode 100644 index 0000000000..f403c6b508 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.lineTo.nextpoint.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.lineTo.nextpoint</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.lineTo.nextpoint</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.strokeStyle = '#0f0'; + ctx.lineWidth = 50; + ctx.beginPath(); + ctx.moveTo(-100, -100); + ctx.lineTo(0, 25); + ctx.lineTo(100, 25); + ctx.stroke(); + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.lineTo.nonfinite.details.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.lineTo.nonfinite.details.html new file mode 100644 index 0000000000..d7595db7d1 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.lineTo.nonfinite.details.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.lineTo.nonfinite.details</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.lineTo.nonfinite.details</h1> +<p class="desc">lineTo() with Infinity/NaN for first arg still converts the second arg</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/clear-100x50.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +var t = async_test("lineTo() with Infinity/NaN for first arg still converts the second arg"); +_addTest(function(canvas, ctx) { + + for (var arg1 of [Infinity, -Infinity, NaN]) { + var converted = false; + ctx.lineTo(arg1, { valueOf: function() { converted = true; return 0; } }); + _assert(converted, "converted"); + } + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.lineTo.nonfinite.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.lineTo.nonfinite.html new file mode 100644 index 0000000000..8246064ea3 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.lineTo.nonfinite.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.lineTo.nonfinite</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.lineTo.nonfinite</h1> +<p class="desc">lineTo() 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("lineTo() with Infinity/NaN is ignored"); +_addTest(function(canvas, ctx) { + + ctx.moveTo(0, 0); + ctx.lineTo(100, 0); + ctx.lineTo(Infinity, 50); + ctx.lineTo(-Infinity, 50); + ctx.lineTo(NaN, 50); + ctx.lineTo(0, Infinity); + ctx.lineTo(0, -Infinity); + ctx.lineTo(0, NaN); + ctx.lineTo(Infinity, Infinity); + ctx.lineTo(100, 50); + ctx.lineTo(0, 50); + ctx.fillStyle = '#0f0'; + ctx.fill(); + _assertPixel(canvas, 50,25, 0,255,0,255); + _assertPixel(canvas, 90,45, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.moveTo.basic.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.moveTo.basic.html new file mode 100644 index 0000000000..d08d67621e --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.moveTo.basic.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.moveTo.basic</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.moveTo.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.rect(0, 0, 10, 50); + ctx.moveTo(100, 0); + ctx.lineTo(10, 0); + ctx.lineTo(10, 50); + ctx.lineTo(100, 50); + ctx.fillStyle = '#0f0'; + ctx.fill(); + _assertPixel(canvas, 90,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.moveTo.multiple.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.moveTo.multiple.html new file mode 100644 index 0000000000..384d9fb437 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.moveTo.multiple.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.moveTo.multiple</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.moveTo.multiple</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.moveTo(0, 25); + ctx.moveTo(100, 25); + ctx.moveTo(0, 25); + ctx.lineTo(100, 25); + ctx.strokeStyle = '#0f0'; + ctx.lineWidth = 50; + ctx.stroke(); + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.moveTo.newsubpath.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.moveTo.newsubpath.html new file mode 100644 index 0000000000..2a3d69b637 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.moveTo.newsubpath.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.moveTo.newsubpath</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.moveTo.newsubpath</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.beginPath(); + ctx.moveTo(0, 0); + ctx.moveTo(100, 0); + ctx.moveTo(100, 50); + ctx.moveTo(0, 50); + ctx.fillStyle = '#f00'; + ctx.fill(); + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.moveTo.nonfinite.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.moveTo.nonfinite.html new file mode 100644 index 0000000000..c6cd6f8178 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.moveTo.nonfinite.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.moveTo.nonfinite</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.moveTo.nonfinite</h1> +<p class="desc">moveTo() 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("moveTo() with Infinity/NaN is ignored"); +_addTest(function(canvas, ctx) { + + ctx.moveTo(0, 0); + ctx.lineTo(100, 0); + ctx.moveTo(Infinity, 50); + ctx.moveTo(-Infinity, 50); + ctx.moveTo(NaN, 50); + ctx.moveTo(0, Infinity); + ctx.moveTo(0, -Infinity); + ctx.moveTo(0, NaN); + ctx.moveTo(Infinity, Infinity); + ctx.lineTo(100, 50); + ctx.lineTo(0, 50); + ctx.fillStyle = '#0f0'; + ctx.fill(); + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.quadraticCurveTo.basic.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.quadraticCurveTo.basic.html new file mode 100644 index 0000000000..ffbf039440 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.quadraticCurveTo.basic.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.quadraticCurveTo.basic</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.quadraticCurveTo.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.strokeStyle = '#0f0'; + ctx.lineWidth = 50; + ctx.beginPath(); + ctx.moveTo(0, 25); + ctx.quadraticCurveTo(100, 25, 100, 25); + ctx.stroke(); + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.quadraticCurveTo.ensuresubpath.1.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.quadraticCurveTo.ensuresubpath.1.html new file mode 100644 index 0000000000..f8b8b515ba --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.quadraticCurveTo.ensuresubpath.1.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.quadraticCurveTo.ensuresubpath.1</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.quadraticCurveTo.ensuresubpath.1</h1> +<p class="desc">If there is no subpath, the first control point is added (and nothing is drawn up to it)</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("If there is no subpath, the first control point is added (and nothing is drawn up to it)"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#0f0'; + ctx.fillRect(0, 0, 100, 50); + ctx.strokeStyle = '#f00'; + ctx.lineWidth = 50; + ctx.beginPath(); + ctx.quadraticCurveTo(100, 50, 200, 50); + ctx.stroke(); + _assertPixel(canvas, 50,25, 0,255,0,255); + _assertPixel(canvas, 95,45, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.quadraticCurveTo.ensuresubpath.2.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.quadraticCurveTo.ensuresubpath.2.html new file mode 100644 index 0000000000..189c744c65 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.quadraticCurveTo.ensuresubpath.2.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.quadraticCurveTo.ensuresubpath.2</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.quadraticCurveTo.ensuresubpath.2</h1> +<p class="desc">If there is no subpath, the first control point is added</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("If there is no subpath, the first control point is added"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.strokeStyle = '#0f0'; + ctx.lineWidth = 50; + ctx.beginPath(); + ctx.quadraticCurveTo(0, 25, 100, 25); + ctx.stroke(); + _assertPixel(canvas, 50,25, 0,255,0,255); + _assertPixel(canvas, 5,45, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.quadraticCurveTo.nonfinite.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.quadraticCurveTo.nonfinite.html new file mode 100644 index 0000000000..1488e78a00 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.quadraticCurveTo.nonfinite.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.quadraticCurveTo.nonfinite</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.quadraticCurveTo.nonfinite</h1> +<p class="desc">quadraticCurveTo() 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("quadraticCurveTo() with Infinity/NaN is ignored"); +_addTest(function(canvas, ctx) { + + ctx.moveTo(0, 0); + ctx.lineTo(100, 0); + ctx.quadraticCurveTo(Infinity, 50, 0, 50); + ctx.quadraticCurveTo(-Infinity, 50, 0, 50); + ctx.quadraticCurveTo(NaN, 50, 0, 50); + ctx.quadraticCurveTo(0, Infinity, 0, 50); + ctx.quadraticCurveTo(0, -Infinity, 0, 50); + ctx.quadraticCurveTo(0, NaN, 0, 50); + ctx.quadraticCurveTo(0, 50, Infinity, 50); + ctx.quadraticCurveTo(0, 50, -Infinity, 50); + ctx.quadraticCurveTo(0, 50, NaN, 50); + ctx.quadraticCurveTo(0, 50, 0, Infinity); + ctx.quadraticCurveTo(0, 50, 0, -Infinity); + ctx.quadraticCurveTo(0, 50, 0, NaN); + ctx.quadraticCurveTo(Infinity, Infinity, 0, 50); + ctx.quadraticCurveTo(Infinity, Infinity, Infinity, 50); + ctx.quadraticCurveTo(Infinity, Infinity, Infinity, Infinity); + ctx.quadraticCurveTo(Infinity, Infinity, 0, Infinity); + ctx.quadraticCurveTo(Infinity, 50, Infinity, 50); + ctx.quadraticCurveTo(Infinity, 50, Infinity, Infinity); + ctx.quadraticCurveTo(Infinity, 50, 0, Infinity); + ctx.quadraticCurveTo(0, Infinity, Infinity, 50); + ctx.quadraticCurveTo(0, Infinity, Infinity, Infinity); + ctx.quadraticCurveTo(0, Infinity, 0, Infinity); + ctx.quadraticCurveTo(0, 50, Infinity, Infinity); + ctx.lineTo(100, 50); + ctx.lineTo(0, 50); + ctx.fillStyle = '#0f0'; + ctx.fill(); + _assertPixel(canvas, 50,25, 0,255,0,255); + _assertPixel(canvas, 90,45, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.quadraticCurveTo.scaled.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.quadraticCurveTo.scaled.html new file mode 100644 index 0000000000..90973a8f97 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.quadraticCurveTo.scaled.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.quadraticCurveTo.scaled</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.quadraticCurveTo.scaled</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.scale(1000, 1000); + ctx.strokeStyle = '#0f0'; + ctx.lineWidth = 0.055; + ctx.beginPath(); + ctx.moveTo(-1, 1.05); + ctx.quadraticCurveTo(0, -1, 1.2, 1.05); + ctx.stroke(); + _assertPixel(canvas, 50,25, 0,255,0,255); + _assertPixel(canvas, 1,1, 0,255,0,255); + _assertPixel(canvas, 98,1, 0,255,0,255); + _assertPixel(canvas, 1,48, 0,255,0,255); + _assertPixel(canvas, 98,48, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.quadraticCurveTo.shape.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.quadraticCurveTo.shape.html new file mode 100644 index 0000000000..23725c2421 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.quadraticCurveTo.shape.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.quadraticCurveTo.shape</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.quadraticCurveTo.shape</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.strokeStyle = '#0f0'; + ctx.lineWidth = 55; + ctx.beginPath(); + ctx.moveTo(-1000, 1050); + ctx.quadraticCurveTo(0, -1000, 1200, 1050); + ctx.stroke(); + _assertPixel(canvas, 50,25, 0,255,0,255); + _assertPixel(canvas, 1,1, 0,255,0,255); + _assertPixel(canvas, 98,1, 0,255,0,255); + _assertPixel(canvas, 1,48, 0,255,0,255); + _assertPixel(canvas, 98,48, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.basic.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.basic.html new file mode 100644 index 0000000000..716cd29af7 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.basic.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.rect.basic</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.rect.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.fillStyle = '#0f0'; + ctx.rect(0, 0, 100, 50); + ctx.fill(); + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.closed.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.closed.html new file mode 100644 index 0000000000..385a88ab7e --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.closed.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.rect.closed</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.rect.closed</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.strokeStyle = '#0f0'; + ctx.lineWidth = 200; + ctx.lineJoin = 'miter'; + ctx.rect(100, 50, 100, 100); + ctx.stroke(); + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.end.1.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.end.1.html new file mode 100644 index 0000000000..e1fd8052d8 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.end.1.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.rect.end.1</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.rect.end.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 = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.strokeStyle = '#0f0'; + ctx.lineWidth = 100; + ctx.rect(200, 100, 400, 1000); + ctx.lineTo(-2000, -1000); + ctx.stroke(); + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.end.2.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.end.2.html new file mode 100644 index 0000000000..d30bb111f1 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.end.2.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.rect.end.2</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.rect.end.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 = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.strokeStyle = '#0f0'; + ctx.lineWidth = 450; + ctx.lineCap = 'round'; + ctx.lineJoin = 'bevel'; + ctx.rect(150, 150, 2000, 2000); + ctx.lineTo(160, 160); + ctx.stroke(); + _assertPixel(canvas, 1,1, 0,255,0,255); + _assertPixel(canvas, 98,1, 0,255,0,255); + _assertPixel(canvas, 1,48, 0,255,0,255); + _assertPixel(canvas, 98,48, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.negative.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.negative.html new file mode 100644 index 0000000000..b917137bae --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.negative.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.rect.negative</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.rect.negative</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) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.beginPath(); + ctx.fillStyle = '#0f0'; + ctx.rect(0, 0, 50, 25); + ctx.rect(100, 0, -50, 25); + ctx.rect(0, 50, 50, -25); + ctx.rect(100, 50, -50, -25); + ctx.fill(); + _assertPixel(canvas, 25,12, 0,255,0,255); + _assertPixel(canvas, 75,12, 0,255,0,255); + _assertPixel(canvas, 25,37, 0,255,0,255); + _assertPixel(canvas, 75,37, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.newsubpath.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.newsubpath.html new file mode 100644 index 0000000000..32b70ff2d8 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.newsubpath.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.rect.newsubpath</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.rect.newsubpath</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.beginPath(); + ctx.strokeStyle = '#f00'; + ctx.lineWidth = 50; + ctx.moveTo(-100, 25); + ctx.lineTo(-50, 25); + ctx.rect(200, 25, 1, 1); + ctx.stroke(); + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.nonfinite.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.nonfinite.html new file mode 100644 index 0000000000..c0d245a49c --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.nonfinite.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.rect.nonfinite</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.rect.nonfinite</h1> +<p class="desc">rect() 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("rect() with Infinity/NaN is ignored"); +_addTest(function(canvas, ctx) { + + ctx.moveTo(0, 0); + ctx.lineTo(100, 0); + ctx.rect(Infinity, 50, 1, 1); + ctx.rect(-Infinity, 50, 1, 1); + ctx.rect(NaN, 50, 1, 1); + ctx.rect(0, Infinity, 1, 1); + ctx.rect(0, -Infinity, 1, 1); + ctx.rect(0, NaN, 1, 1); + ctx.rect(0, 50, Infinity, 1); + ctx.rect(0, 50, -Infinity, 1); + ctx.rect(0, 50, NaN, 1); + ctx.rect(0, 50, 1, Infinity); + ctx.rect(0, 50, 1, -Infinity); + ctx.rect(0, 50, 1, NaN); + ctx.rect(Infinity, Infinity, 1, 1); + ctx.rect(Infinity, Infinity, Infinity, 1); + ctx.rect(Infinity, Infinity, Infinity, Infinity); + ctx.rect(Infinity, Infinity, 1, Infinity); + ctx.rect(Infinity, 50, Infinity, 1); + ctx.rect(Infinity, 50, Infinity, Infinity); + ctx.rect(Infinity, 50, 1, Infinity); + ctx.rect(0, Infinity, Infinity, 1); + ctx.rect(0, Infinity, Infinity, Infinity); + ctx.rect(0, Infinity, 1, Infinity); + ctx.rect(0, 50, Infinity, Infinity); + ctx.lineTo(100, 50); + ctx.lineTo(0, 50); + ctx.fillStyle = '#0f0'; + ctx.fill(); + _assertPixel(canvas, 50,25, 0,255,0,255); + _assertPixel(canvas, 90,45, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.selfintersect.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.selfintersect.html new file mode 100644 index 0000000000..8ebbf0c1f5 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.selfintersect.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.rect.selfintersect</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.rect.selfintersect</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.strokeStyle = '#0f0'; + ctx.lineWidth = 90; + ctx.beginPath(); + ctx.rect(45, 20, 10, 10); + ctx.stroke(); + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.winding.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.winding.html new file mode 100644 index 0000000000..d7350ef38c --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.winding.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.rect.winding</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.rect.winding</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) { + + ctx.fillStyle = '#0f0'; + ctx.fillRect(0, 0, 100, 50); + ctx.beginPath(); + ctx.fillStyle = '#f00'; + ctx.rect(0, 0, 50, 50); + ctx.rect(100, 50, -50, -50); + ctx.rect(0, 25, 100, -25); + ctx.rect(100, 25, -100, 25); + ctx.fill(); + _assertPixel(canvas, 25,12, 0,255,0,255); + _assertPixel(canvas, 75,12, 0,255,0,255); + _assertPixel(canvas, 25,37, 0,255,0,255); + _assertPixel(canvas, 75,37, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.zero.1.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.zero.1.html new file mode 100644 index 0000000000..c773ef61d0 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.zero.1.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.rect.zero.1</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.rect.zero.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 = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.strokeStyle = '#0f0'; + ctx.lineWidth = 100; + ctx.beginPath(); + ctx.rect(0, 50, 100, 0); + ctx.stroke(); + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.zero.2.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.zero.2.html new file mode 100644 index 0000000000..5888231fc6 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.zero.2.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.rect.zero.2</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.rect.zero.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 = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.strokeStyle = '#0f0'; + ctx.lineWidth = 100; + ctx.beginPath(); + ctx.rect(50, -100, 0, 250); + ctx.stroke(); + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.zero.3.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.zero.3.html new file mode 100644 index 0000000000..c000b008fb --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.zero.3.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.rect.zero.3</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.rect.zero.3</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.strokeStyle = '#f00'; + ctx.lineWidth = 100; + ctx.beginPath(); + ctx.rect(50, 25, 0, 0); + ctx.stroke(); + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.zero.4.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.zero.4.html new file mode 100644 index 0000000000..bb3ecb3aa5 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.zero.4.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.rect.zero.4</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.rect.zero.4</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.strokeStyle = '#0f0'; + ctx.lineWidth = 50; + ctx.rect(100, 25, 0, 0); + ctx.lineTo(0, 25); + ctx.stroke(); + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.zero.5.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.zero.5.html new file mode 100644 index 0000000000..081c753d91 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.zero.5.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.rect.zero.5</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.rect.zero.5</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.strokeStyle = '#f00'; + ctx.lineWidth = 50; + ctx.moveTo(0, 0); + ctx.rect(100, 25, 0, 0); + ctx.stroke(); + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.zero.6.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.zero.6.html new file mode 100644 index 0000000000..dafb273d56 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.zero.6.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.rect.zero.6</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.rect.zero.6</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.strokeStyle = '#f00'; + ctx.lineJoin = 'miter'; + ctx.miterLimit = 1.5; + ctx.lineWidth = 200; + ctx.beginPath(); + ctx.rect(100, 25, 1000, 0); + ctx.stroke(); + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.1.radius.dompoint.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.1.radius.dompoint.html new file mode 100644 index 0000000000..3bb890ae96 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.1.radius.dompoint.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.roundrect.1.radius.dompoint</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.roundrect.1.radius.dompoint</h1> +<p class="desc">Verify that when one radius is given to roundRect(), specified as a DOMPoint, it applies to all corners.</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("Verify that when one radius is given to roundRect(), specified as a DOMPoint, it applies to all corners."); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.roundRect(0, 0, 100, 50, [new DOMPoint(40, 20)]); + ctx.fillStyle = '#0f0'; + ctx.fill(); + + // top-left corner + _assertPixel(canvas, 20,1, 255,0,0,255); + _assertPixel(canvas, 41,1, 0,255,0,255); + _assertPixel(canvas, 1,10, 255,0,0,255); + _assertPixel(canvas, 1,21, 0,255,0,255); + + // top-right corner + _assertPixel(canvas, 79,1, 255,0,0,255); + _assertPixel(canvas, 58,1, 0,255,0,255); + _assertPixel(canvas, 98,10, 255,0,0,255); + _assertPixel(canvas, 98,21, 0,255,0,255); + + // bottom-right corner + _assertPixel(canvas, 79,48, 255,0,0,255); + _assertPixel(canvas, 58,48, 0,255,0,255); + _assertPixel(canvas, 98,39, 255,0,0,255); + _assertPixel(canvas, 98,28, 0,255,0,255); + + // bottom-left corner + _assertPixel(canvas, 20,48, 255,0,0,255); + _assertPixel(canvas, 41,48, 0,255,0,255); + _assertPixel(canvas, 1,39, 255,0,0,255); + _assertPixel(canvas, 1,28, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.1.radius.dompoint.single argument.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.1.radius.dompoint.single argument.html new file mode 100644 index 0000000000..96e933870b --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.1.radius.dompoint.single argument.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.roundrect.1.radius.dompoint.single argument</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.roundrect.1.radius.dompoint.single argument</h1> +<p class="desc">Verify that when one radius is given to roundRect() as a non-array argument, specified as a DOMPoint, it applies to all corners.</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("Verify that when one radius is given to roundRect() as a non-array argument, specified as a DOMPoint, it applies to all corners."); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.roundRect(0, 0, 100, 50, new DOMPoint(40, 20)); + ctx.fillStyle = '#0f0'; + ctx.fill(); + + // top-left corner + _assertPixel(canvas, 20,1, 255,0,0,255); + _assertPixel(canvas, 41,1, 0,255,0,255); + _assertPixel(canvas, 1,10, 255,0,0,255); + _assertPixel(canvas, 1,21, 0,255,0,255); + + // top-right corner + _assertPixel(canvas, 79,1, 255,0,0,255); + _assertPixel(canvas, 58,1, 0,255,0,255); + _assertPixel(canvas, 98,10, 255,0,0,255); + _assertPixel(canvas, 98,21, 0,255,0,255); + + // bottom-right corner + _assertPixel(canvas, 79,48, 255,0,0,255); + _assertPixel(canvas, 58,48, 0,255,0,255); + _assertPixel(canvas, 98,39, 255,0,0,255); + _assertPixel(canvas, 98,28, 0,255,0,255); + + // bottom-left corner + _assertPixel(canvas, 20,48, 255,0,0,255); + _assertPixel(canvas, 41,48, 0,255,0,255); + _assertPixel(canvas, 1,39, 255,0,0,255); + _assertPixel(canvas, 1,28, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.1.radius.dompointinit.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.1.radius.dompointinit.html new file mode 100644 index 0000000000..1315233d79 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.1.radius.dompointinit.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.roundrect.1.radius.dompointinit</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.roundrect.1.radius.dompointinit</h1> +<p class="desc">Verify that when one radius is given to roundRect(), specified as a DOMPointInit, applies to all corners.</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("Verify that when one radius is given to roundRect(), specified as a DOMPointInit, applies to all corners."); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.roundRect(0, 0, 100, 50, [{x: 40, y: 20}]); + ctx.fillStyle = '#0f0'; + ctx.fill(); + + // top-left corner + _assertPixel(canvas, 20,1, 255,0,0,255); + _assertPixel(canvas, 41,1, 0,255,0,255); + _assertPixel(canvas, 1,10, 255,0,0,255); + _assertPixel(canvas, 1,21, 0,255,0,255); + + // top-right corner + _assertPixel(canvas, 79,1, 255,0,0,255); + _assertPixel(canvas, 58,1, 0,255,0,255); + _assertPixel(canvas, 98,10, 255,0,0,255); + _assertPixel(canvas, 98,21, 0,255,0,255); + + // bottom-right corner + _assertPixel(canvas, 79,48, 255,0,0,255); + _assertPixel(canvas, 58,48, 0,255,0,255); + _assertPixel(canvas, 98,39, 255,0,0,255); + _assertPixel(canvas, 98,28, 0,255,0,255); + + // bottom-left corner + _assertPixel(canvas, 20,48, 255,0,0,255); + _assertPixel(canvas, 41,48, 0,255,0,255); + _assertPixel(canvas, 1,39, 255,0,0,255); + _assertPixel(canvas, 1,28, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.1.radius.dompointinit.single.argument.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.1.radius.dompointinit.single.argument.html new file mode 100644 index 0000000000..f5c6d00959 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.1.radius.dompointinit.single.argument.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.roundrect.1.radius.dompointinit.single.argument</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.roundrect.1.radius.dompointinit.single.argument</h1> +<p class="desc">Verify that when one radius is given to roundRect() as a non-array argument, specified as a DOMPointInit, applies to all corners.</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("Verify that when one radius is given to roundRect() as a non-array argument, specified as a DOMPointInit, applies to all corners."); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.roundRect(0, 0, 100, 50, {x: 40, y: 20}); + ctx.fillStyle = '#0f0'; + ctx.fill(); + + // top-left corner + _assertPixel(canvas, 20,1, 255,0,0,255); + _assertPixel(canvas, 41,1, 0,255,0,255); + _assertPixel(canvas, 1,10, 255,0,0,255); + _assertPixel(canvas, 1,21, 0,255,0,255); + + // top-right corner + _assertPixel(canvas, 79,1, 255,0,0,255); + _assertPixel(canvas, 58,1, 0,255,0,255); + _assertPixel(canvas, 98,10, 255,0,0,255); + _assertPixel(canvas, 98,21, 0,255,0,255); + + // bottom-right corner + _assertPixel(canvas, 79,48, 255,0,0,255); + _assertPixel(canvas, 58,48, 0,255,0,255); + _assertPixel(canvas, 98,39, 255,0,0,255); + _assertPixel(canvas, 98,28, 0,255,0,255); + + // bottom-left corner + _assertPixel(canvas, 20,48, 255,0,0,255); + _assertPixel(canvas, 41,48, 0,255,0,255); + _assertPixel(canvas, 1,39, 255,0,0,255); + _assertPixel(canvas, 1,28, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.1.radius.double.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.1.radius.double.html new file mode 100644 index 0000000000..402631a7a0 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.1.radius.double.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.roundrect.1.radius.double</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.roundrect.1.radius.double</h1> +<p class="desc">Verify that when one radius is given to roundRect(), specified as a double, it applies to all corners.</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("Verify that when one radius is given to roundRect(), specified as a double, it applies to all corners."); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.roundRect(0, 0, 100, 50, [20]); + ctx.fillStyle = '#0f0'; + ctx.fill(); + _assertPixel(canvas, 1,1, 255,0,0,255); + _assertPixel(canvas, 98,1, 255,0,0,255); + _assertPixel(canvas, 98,48, 255,0,0,255); + _assertPixel(canvas, 1,48, 255,0,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.1.radius.double.single.argument.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.1.radius.double.single.argument.html new file mode 100644 index 0000000000..ed4887c2de --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.1.radius.double.single.argument.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.roundrect.1.radius.double.single.argument</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.roundrect.1.radius.double.single.argument</h1> +<p class="desc">Verify that when one radius is given to roundRect() as a non-array argument, specified as a double, it applies to all corners.</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("Verify that when one radius is given to roundRect() as a non-array argument, specified as a double, it applies to all corners."); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.roundRect(0, 0, 100, 50, 20); + ctx.fillStyle = '#0f0'; + ctx.fill(); + _assertPixel(canvas, 1,1, 255,0,0,255); + _assertPixel(canvas, 98,1, 255,0,0,255); + _assertPixel(canvas, 98,48, 255,0,0,255); + _assertPixel(canvas, 1,48, 255,0,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.2.radii.1.dompoint.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.2.radii.1.dompoint.html new file mode 100644 index 0000000000..00a9c14582 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.2.radii.1.dompoint.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.roundrect.2.radii.1.dompoint</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.roundrect.2.radii.1.dompoint</h1> +<p class="desc">Verify that when two radii are given to roundRect(), the first radius, specified as a DOMPoint, applies to the top-left and bottom-right corners.</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("Verify that when two radii are given to roundRect(), the first radius, specified as a DOMPoint, applies to the top-left and bottom-right corners."); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.roundRect(0, 0, 100, 50, [new DOMPoint(40, 20), 0]); + ctx.fillStyle = '#0f0'; + ctx.fill(); + + // top-left corner + _assertPixel(canvas, 20,1, 255,0,0,255); + _assertPixel(canvas, 41,1, 0,255,0,255); + _assertPixel(canvas, 1,10, 255,0,0,255); + _assertPixel(canvas, 1,21, 0,255,0,255); + + // bottom-right corner + _assertPixel(canvas, 79,48, 255,0,0,255); + _assertPixel(canvas, 58,48, 0,255,0,255); + _assertPixel(canvas, 98,39, 255,0,0,255); + _assertPixel(canvas, 98,28, 0,255,0,255); + + // other corners + _assertPixel(canvas, 98,1, 0,255,0,255); + _assertPixel(canvas, 1,48, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.2.radii.1.dompointinit.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.2.radii.1.dompointinit.html new file mode 100644 index 0000000000..e9b3a7bf79 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.2.radii.1.dompointinit.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.roundrect.2.radii.1.dompointinit</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.roundrect.2.radii.1.dompointinit</h1> +<p class="desc">Verify that when two radii are given to roundRect(), the first radius, specified as a DOMPointInit, applies to the top-left and bottom-right corners.</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("Verify that when two radii are given to roundRect(), the first radius, specified as a DOMPointInit, applies to the top-left and bottom-right corners."); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.roundRect(0, 0, 100, 50, [{x: 40, y: 20}, 0]); + ctx.fillStyle = '#0f0'; + ctx.fill(); + + // top-left corner + _assertPixel(canvas, 20,1, 255,0,0,255); + _assertPixel(canvas, 41,1, 0,255,0,255); + _assertPixel(canvas, 1,10, 255,0,0,255); + _assertPixel(canvas, 1,21, 0,255,0,255); + + // bottom-right corner + _assertPixel(canvas, 79,48, 255,0,0,255); + _assertPixel(canvas, 58,48, 0,255,0,255); + _assertPixel(canvas, 98,39, 255,0,0,255); + _assertPixel(canvas, 98,28, 0,255,0,255); + + // other corners + _assertPixel(canvas, 98,1, 0,255,0,255); + _assertPixel(canvas, 1,48, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.2.radii.1.double.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.2.radii.1.double.html new file mode 100644 index 0000000000..a2f02104e2 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.2.radii.1.double.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.roundrect.2.radii.1.double</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.roundrect.2.radii.1.double</h1> +<p class="desc">Verify that when two radii are given to roundRect(), the first radius, specified as a double, applies to the top-left and bottom-right corners.</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("Verify that when two radii are given to roundRect(), the first radius, specified as a double, applies to the top-left and bottom-right corners."); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.roundRect(0, 0, 100, 50, [20, 0]); + ctx.fillStyle = '#0f0'; + ctx.fill(); + _assertPixel(canvas, 1,1, 255,0,0,255); + _assertPixel(canvas, 98,1, 0,255,0,255); + _assertPixel(canvas, 98,48, 255,0,0,255); + _assertPixel(canvas, 1,48, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.2.radii.2.dompoint.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.2.radii.2.dompoint.html new file mode 100644 index 0000000000..57df30d5ae --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.2.radii.2.dompoint.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.roundrect.2.radii.2.dompoint</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.roundrect.2.radii.2.dompoint</h1> +<p class="desc">Verify that when two radii are given to roundRect(), the second radius, specified as a DOMPoint, applies to the top-right and bottom-left corners.</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("Verify that when two radii are given to roundRect(), the second radius, specified as a DOMPoint, applies to the top-right and bottom-left corners."); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.roundRect(0, 0, 100, 50, [0, new DOMPoint(40, 20)]); + ctx.fillStyle = '#0f0'; + ctx.fill(); + + // top-right corner + _assertPixel(canvas, 79,1, 255,0,0,255); + _assertPixel(canvas, 58,1, 0,255,0,255); + _assertPixel(canvas, 98,10, 255,0,0,255); + _assertPixel(canvas, 98,21, 0,255,0,255); + + // bottom-left corner + _assertPixel(canvas, 20,48, 255,0,0,255); + _assertPixel(canvas, 41,48, 0,255,0,255); + _assertPixel(canvas, 1,39, 255,0,0,255); + _assertPixel(canvas, 1,28, 0,255,0,255); + + // other corners + _assertPixel(canvas, 1,1, 0,255,0,255); + _assertPixel(canvas, 98,48, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.2.radii.2.dompointinit.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.2.radii.2.dompointinit.html new file mode 100644 index 0000000000..5942ab750f --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.2.radii.2.dompointinit.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.roundrect.2.radii.2.dompointinit</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.roundrect.2.radii.2.dompointinit</h1> +<p class="desc">Verify that when two radii are given to roundRect(), the second radius, specified as a DOMPointInit, applies to the top-right and bottom-left corners.</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("Verify that when two radii are given to roundRect(), the second radius, specified as a DOMPointInit, applies to the top-right and bottom-left corners."); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.roundRect(0, 0, 100, 50, [0, {x: 40, y: 20}]); + ctx.fillStyle = '#0f0'; + ctx.fill(); + + // top-right corner + _assertPixel(canvas, 79,1, 255,0,0,255); + _assertPixel(canvas, 58,1, 0,255,0,255); + _assertPixel(canvas, 98,10, 255,0,0,255); + _assertPixel(canvas, 98,21, 0,255,0,255); + + // bottom-left corner + _assertPixel(canvas, 20,48, 255,0,0,255); + _assertPixel(canvas, 41,48, 0,255,0,255); + _assertPixel(canvas, 1,39, 255,0,0,255); + _assertPixel(canvas, 1,28, 0,255,0,255); + + // other corners + _assertPixel(canvas, 1,1, 0,255,0,255); + _assertPixel(canvas, 98,48, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.2.radii.2.double.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.2.radii.2.double.html new file mode 100644 index 0000000000..2390a61dfd --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.2.radii.2.double.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.roundrect.2.radii.2.double</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.roundrect.2.radii.2.double</h1> +<p class="desc">Verify that when two radii are given to roundRect(), the second radius, specified as a double, applies to the top-right and bottom-left corners.</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("Verify that when two radii are given to roundRect(), the second radius, specified as a double, applies to the top-right and bottom-left corners."); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.roundRect(0, 0, 100, 50, [0, 20]); + ctx.fillStyle = '#0f0'; + ctx.fill(); + _assertPixel(canvas, 1,1, 0,255,0,255); + _assertPixel(canvas, 98,1, 255,0,0,255); + _assertPixel(canvas, 98,48, 0,255,0,255); + _assertPixel(canvas, 1,48, 255,0,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.1.dompoint.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.1.dompoint.html new file mode 100644 index 0000000000..f4fa76afac --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.1.dompoint.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.roundrect.3.radii.1.dompoint</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.roundrect.3.radii.1.dompoint</h1> +<p class="desc">Verify that when three radii are given to roundRect(), the first radius, specified as a DOMPoint, applies to the top-left corner.</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("Verify that when three radii are given to roundRect(), the first radius, specified as a DOMPoint, applies to the top-left corner."); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.roundRect(0, 0, 100, 50, [new DOMPoint(40, 20), 0, 0]); + ctx.fillStyle = '#0f0'; + ctx.fill(); + + // top-left corner + _assertPixel(canvas, 20,1, 255,0,0,255); + _assertPixel(canvas, 41,1, 0,255,0,255); + _assertPixel(canvas, 1,10, 255,0,0,255); + _assertPixel(canvas, 1,21, 0,255,0,255); + + // other corners + _assertPixel(canvas, 98,1, 0,255,0,255); + _assertPixel(canvas, 98,48, 0,255,0,255); + _assertPixel(canvas, 1,48, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.1.dompointinit.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.1.dompointinit.html new file mode 100644 index 0000000000..4e7dc947f4 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.1.dompointinit.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.roundrect.3.radii.1.dompointinit</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.roundrect.3.radii.1.dompointinit</h1> +<p class="desc">Verify that when three radii are given to roundRect(), the first radius, specified as a DOMPointInit, applies to the top-left corner.</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("Verify that when three radii are given to roundRect(), the first radius, specified as a DOMPointInit, applies to the top-left corner."); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.roundRect(0, 0, 100, 50, [{x: 40, y: 20}, 0, 0]); + ctx.fillStyle = '#0f0'; + ctx.fill(); + + // top-left corner + _assertPixel(canvas, 20,1, 255,0,0,255); + _assertPixel(canvas, 41,1, 0,255,0,255); + _assertPixel(canvas, 1,10, 255,0,0,255); + _assertPixel(canvas, 1,21, 0,255,0,255); + + // other corners + _assertPixel(canvas, 98,1, 0,255,0,255); + _assertPixel(canvas, 98,48, 0,255,0,255); + _assertPixel(canvas, 1,48, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.1.double.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.1.double.html new file mode 100644 index 0000000000..d7888da6d9 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.1.double.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.roundrect.3.radii.1.double</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.roundrect.3.radii.1.double</h1> +<p class="desc">Verify that when three radii are given to roundRect(), the first radius, specified as a double, applies to the top-left corner.</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("Verify that when three radii are given to roundRect(), the first radius, specified as a double, applies to the top-left corner."); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.roundRect(0, 0, 100, 50, [20, 0, 0]); + ctx.fillStyle = '#0f0'; + ctx.fill(); + _assertPixel(canvas, 1,1, 255,0,0,255); + _assertPixel(canvas, 98,1, 0,255,0,255); + _assertPixel(canvas, 98,48, 0,255,0,255); + _assertPixel(canvas, 1,48, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.2.dompoint.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.2.dompoint.html new file mode 100644 index 0000000000..38a8baac53 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.2.dompoint.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.roundrect.3.radii.2.dompoint</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.roundrect.3.radii.2.dompoint</h1> +<p class="desc">Verify that when three radii are given to roundRect(), the second radius, specified as a DOMPoint, applies to the top-right and bottom-left corners.</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("Verify that when three radii are given to roundRect(), the second radius, specified as a DOMPoint, applies to the top-right and bottom-left corners."); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.roundRect(0, 0, 100, 50, [0, new DOMPoint(40, 20), 0]); + ctx.fillStyle = '#0f0'; + ctx.fill(); + + // top-right corner + _assertPixel(canvas, 79,1, 255,0,0,255); + _assertPixel(canvas, 58,1, 0,255,0,255); + _assertPixel(canvas, 98,10, 255,0,0,255); + _assertPixel(canvas, 98,21, 0,255,0,255); + + // bottom-left corner + _assertPixel(canvas, 20,48, 255,0,0,255); + _assertPixel(canvas, 41,48, 0,255,0,255); + _assertPixel(canvas, 1,39, 255,0,0,255); + _assertPixel(canvas, 1,28, 0,255,0,255); + + // other corners + _assertPixel(canvas, 1,1, 0,255,0,255); + _assertPixel(canvas, 98,48, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.2.dompointinit.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.2.dompointinit.html new file mode 100644 index 0000000000..5e867caf42 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.2.dompointinit.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.roundrect.3.radii.2.dompointinit</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.roundrect.3.radii.2.dompointinit</h1> +<p class="desc">Verify that when three radii are given to roundRect(), the second radius, specified as a DOMPoint, applies to the top-right and bottom-left corners.</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("Verify that when three radii are given to roundRect(), the second radius, specified as a DOMPoint, applies to the top-right and bottom-left corners."); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.roundRect(0, 0, 100, 50, [0, {x: 40, y: 20}, 0]); + ctx.fillStyle = '#0f0'; + ctx.fill(); + + // top-right corner + _assertPixel(canvas, 79,1, 255,0,0,255); + _assertPixel(canvas, 58,1, 0,255,0,255); + _assertPixel(canvas, 98,10, 255,0,0,255); + _assertPixel(canvas, 98,21, 0,255,0,255); + + // bottom-left corner + _assertPixel(canvas, 20,48, 255,0,0,255); + _assertPixel(canvas, 41,48, 0,255,0,255); + _assertPixel(canvas, 1,39, 255,0,0,255); + _assertPixel(canvas, 1,28, 0,255,0,255); + + // other corners + _assertPixel(canvas, 1,1, 0,255,0,255); + _assertPixel(canvas, 98,48, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.2.double.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.2.double.html new file mode 100644 index 0000000000..41edff205c --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.2.double.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.roundrect.3.radii.2.double</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.roundrect.3.radii.2.double</h1> +<p class="desc">Verify that when three radii are given to roundRect(), the second radius, specified as a double, applies to the top-right and bottom-left corners.</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("Verify that when three radii are given to roundRect(), the second radius, specified as a double, applies to the top-right and bottom-left corners."); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.roundRect(0, 0, 100, 50, [0, 20, 0]); + ctx.fillStyle = '#0f0'; + ctx.fill(); + _assertPixel(canvas, 1,1, 0,255,0,255); + _assertPixel(canvas, 98,1, 255,0,0,255); + _assertPixel(canvas, 98,48, 0,255,0,255); + _assertPixel(canvas, 1,48, 255,0,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.3.dompoint.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.3.dompoint.html new file mode 100644 index 0000000000..6d6a1a6ae0 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.3.dompoint.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.roundrect.3.radii.3.dompoint</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.roundrect.3.radii.3.dompoint</h1> +<p class="desc">Verify that when three radii are given to roundRect(), the third radius, specified as a DOMPoint, applies to the bottom-right corner.</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("Verify that when three radii are given to roundRect(), the third radius, specified as a DOMPoint, applies to the bottom-right corner."); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.roundRect(0, 0, 100, 50, [0, 0, new DOMPoint(40, 20)]); + ctx.fillStyle = '#0f0'; + ctx.fill(); + + // bottom-right corner + _assertPixel(canvas, 79,48, 255,0,0,255); + _assertPixel(canvas, 58,48, 0,255,0,255); + _assertPixel(canvas, 98,39, 255,0,0,255); + _assertPixel(canvas, 98,28, 0,255,0,255); + + // other corners + _assertPixel(canvas, 1,1, 0,255,0,255); + _assertPixel(canvas, 98,1, 0,255,0,255); + _assertPixel(canvas, 1,48, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.3.dompointinit.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.3.dompointinit.html new file mode 100644 index 0000000000..132420e343 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.3.dompointinit.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.roundrect.3.radii.3.dompointinit</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.roundrect.3.radii.3.dompointinit</h1> +<p class="desc">Verify that when three radii are given to roundRect(), the third radius, specified as a DOMPointInit, applies to the bottom-right corner.</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("Verify that when three radii are given to roundRect(), the third radius, specified as a DOMPointInit, applies to the bottom-right corner."); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.roundRect(0, 0, 100, 50, [0, 0, {x: 40, y: 20}]); + ctx.fillStyle = '#0f0'; + ctx.fill(); + + // bottom-right corner + _assertPixel(canvas, 79,48, 255,0,0,255); + _assertPixel(canvas, 58,48, 0,255,0,255); + _assertPixel(canvas, 98,39, 255,0,0,255); + _assertPixel(canvas, 98,28, 0,255,0,255); + + // other corners + _assertPixel(canvas, 1,1, 0,255,0,255); + _assertPixel(canvas, 98,1, 0,255,0,255); + _assertPixel(canvas, 1,48, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.3.double.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.3.double.html new file mode 100644 index 0000000000..75a8e924ff --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.3.double.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.roundrect.3.radii.3.double</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.roundrect.3.radii.3.double</h1> +<p class="desc">Verify that when three radii are given to roundRect(), the third radius, specified as a double, applies to the bottom-right corner.</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("Verify that when three radii are given to roundRect(), the third radius, specified as a double, applies to the bottom-right corner."); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.roundRect(0, 0, 100, 50, [0, 0, 20]); + ctx.fillStyle = '#0f0'; + ctx.fill(); + _assertPixel(canvas, 1,1, 0,255,0,255); + _assertPixel(canvas, 98,1, 0,255,0,255); + _assertPixel(canvas, 98,48, 255,0,0,255); + _assertPixel(canvas, 1,48, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.1.dompoint.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.1.dompoint.html new file mode 100644 index 0000000000..b681b59f4e --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.1.dompoint.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.roundrect.4.radii.1.dompoint</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.roundrect.4.radii.1.dompoint</h1> +<p class="desc">Verify that when four radii are given to roundRect(), the first radius, specified as a DOMPoint, applies to the top-left corner.</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("Verify that when four radii are given to roundRect(), the first radius, specified as a DOMPoint, applies to the top-left corner."); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.roundRect(0, 0, 100, 50, [new DOMPoint(40, 20), 0, 0, 0]); + ctx.fillStyle = '#0f0'; + ctx.fill(); + + // top-left corner + _assertPixel(canvas, 20,1, 255,0,0,255); + _assertPixel(canvas, 41,1, 0,255,0,255); + _assertPixel(canvas, 1,10, 255,0,0,255); + _assertPixel(canvas, 1,21, 0,255,0,255); + + // other corners + _assertPixel(canvas, 98,1, 0,255,0,255); + _assertPixel(canvas, 98,48, 0,255,0,255); + _assertPixel(canvas, 1,48, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.1.dompointinit.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.1.dompointinit.html new file mode 100644 index 0000000000..e5542894b3 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.1.dompointinit.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.roundrect.4.radii.1.dompointinit</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.roundrect.4.radii.1.dompointinit</h1> +<p class="desc">Verify that when four radii are given to roundRect(), the first radius, specified as a DOMPointInit, applies to the top-left corner.</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("Verify that when four radii are given to roundRect(), the first radius, specified as a DOMPointInit, applies to the top-left corner."); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.roundRect(0, 0, 100, 50, [{x: 40, y: 20}, 0, 0, 0]); + ctx.fillStyle = '#0f0'; + ctx.fill(); + + // top-left corner + _assertPixel(canvas, 20,1, 255,0,0,255); + _assertPixel(canvas, 41,1, 0,255,0,255); + _assertPixel(canvas, 1,10, 255,0,0,255); + _assertPixel(canvas, 1,21, 0,255,0,255); + + // other corners + _assertPixel(canvas, 98,1, 0,255,0,255); + _assertPixel(canvas, 98,48, 0,255,0,255); + _assertPixel(canvas, 1,48, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.1.double.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.1.double.html new file mode 100644 index 0000000000..028effa82b --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.1.double.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.roundrect.4.radii.1.double</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.roundrect.4.radii.1.double</h1> +<p class="desc">Verify that when four radii are given to roundRect(), the first radius, specified as a double, applies to the top-left corner.</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("Verify that when four radii are given to roundRect(), the first radius, specified as a double, applies to the top-left corner."); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.roundRect(0, 0, 100, 50, [20, 0, 0, 0]); + ctx.fillStyle = '#0f0'; + ctx.fill(); + _assertPixel(canvas, 1,1, 255,0,0,255); + _assertPixel(canvas, 98,1, 0,255,0,255); + _assertPixel(canvas, 98,48, 0,255,0,255); + _assertPixel(canvas, 1,48, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.2.dompoint.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.2.dompoint.html new file mode 100644 index 0000000000..d3c16eb493 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.2.dompoint.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.roundrect.4.radii.2.dompoint</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.roundrect.4.radii.2.dompoint</h1> +<p class="desc">Verify that when four radii are given to roundRect(), the second radius, specified as a DOMPoint, applies to the top-right corner.</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("Verify that when four radii are given to roundRect(), the second radius, specified as a DOMPoint, applies to the top-right corner."); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.roundRect(0, 0, 100, 50, [0, new DOMPoint(40, 20), 0, 0]); + ctx.fillStyle = '#0f0'; + ctx.fill(); + + // top-right corner + _assertPixel(canvas, 79,1, 255,0,0,255); + _assertPixel(canvas, 58,1, 0,255,0,255); + _assertPixel(canvas, 98,10, 255,0,0,255); + _assertPixel(canvas, 98,21, 0,255,0,255); + + // other corners + _assertPixel(canvas, 1,1, 0,255,0,255); + _assertPixel(canvas, 98,48, 0,255,0,255); + _assertPixel(canvas, 1,48, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.2.dompointinit.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.2.dompointinit.html new file mode 100644 index 0000000000..ab5ad3f4da --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.2.dompointinit.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.roundrect.4.radii.2.dompointinit</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.roundrect.4.radii.2.dompointinit</h1> +<p class="desc">Verify that when four radii are given to roundRect(), the second radius, specified as a DOMPointInit, applies to the top-right corner.</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("Verify that when four radii are given to roundRect(), the second radius, specified as a DOMPointInit, applies to the top-right corner."); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.roundRect(0, 0, 100, 50, [0, {x: 40, y: 20}, 0, 0]); + ctx.fillStyle = '#0f0'; + ctx.fill(); + + // top-right corner + _assertPixel(canvas, 79,1, 255,0,0,255); + _assertPixel(canvas, 58,1, 0,255,0,255); + _assertPixel(canvas, 98,10, 255,0,0,255); + _assertPixel(canvas, 98,21, 0,255,0,255); + + // other corners + _assertPixel(canvas, 1,1, 0,255,0,255); + _assertPixel(canvas, 98,48, 0,255,0,255); + _assertPixel(canvas, 1,48, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.2.double.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.2.double.html new file mode 100644 index 0000000000..ec229e396a --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.2.double.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.roundrect.4.radii.2.double</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.roundrect.4.radii.2.double</h1> +<p class="desc">Verify that when four radii are given to roundRect(), the second radius, specified as a double, applies to the top-right corner.</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("Verify that when four radii are given to roundRect(), the second radius, specified as a double, applies to the top-right corner."); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.roundRect(0, 0, 100, 50, [0, 20, 0, 0]); + ctx.fillStyle = '#0f0'; + ctx.fill(); + _assertPixel(canvas, 1,1, 0,255,0,255); + _assertPixel(canvas, 98,1, 255,0,0,255); + _assertPixel(canvas, 98,48, 0,255,0,255); + _assertPixel(canvas, 1,48, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.3.dompoint.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.3.dompoint.html new file mode 100644 index 0000000000..5367543fa3 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.3.dompoint.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.roundrect.4.radii.3.dompoint</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.roundrect.4.radii.3.dompoint</h1> +<p class="desc">Verify that when four radii are given to roundRect(), the third radius, specified as a DOMPoint, applies to the bottom-right corner.</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("Verify that when four radii are given to roundRect(), the third radius, specified as a DOMPoint, applies to the bottom-right corner."); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.roundRect(0, 0, 100, 50, [0, 0, new DOMPoint(40, 20), 0]); + ctx.fillStyle = '#0f0'; + ctx.fill(); + + // bottom-right corner + _assertPixel(canvas, 79,48, 255,0,0,255); + _assertPixel(canvas, 58,48, 0,255,0,255); + _assertPixel(canvas, 98,39, 255,0,0,255); + _assertPixel(canvas, 98,28, 0,255,0,255); + + // other corners + _assertPixel(canvas, 1,1, 0,255,0,255); + _assertPixel(canvas, 98,1, 0,255,0,255); + _assertPixel(canvas, 1,48, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.3.dompointinit.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.3.dompointinit.html new file mode 100644 index 0000000000..89df524d53 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.3.dompointinit.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.roundrect.4.radii.3.dompointinit</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.roundrect.4.radii.3.dompointinit</h1> +<p class="desc">Verify that when four radii are given to roundRect(), the third radius, specified as a DOMPointInit, applies to the bottom-right corner.</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("Verify that when four radii are given to roundRect(), the third radius, specified as a DOMPointInit, applies to the bottom-right corner."); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.roundRect(0, 0, 100, 50, [0, 0, {x: 40, y: 20}, 0]); + ctx.fillStyle = '#0f0'; + ctx.fill(); + + // bottom-right corner + _assertPixel(canvas, 79,48, 255,0,0,255); + _assertPixel(canvas, 58,48, 0,255,0,255); + _assertPixel(canvas, 98,39, 255,0,0,255); + _assertPixel(canvas, 98,28, 0,255,0,255); + + // other corners + _assertPixel(canvas, 1,1, 0,255,0,255); + _assertPixel(canvas, 98,1, 0,255,0,255); + _assertPixel(canvas, 1,48, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.3.double.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.3.double.html new file mode 100644 index 0000000000..22ba747b37 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.3.double.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.roundrect.4.radii.3.double</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.roundrect.4.radii.3.double</h1> +<p class="desc">Verify that when four radii are given to roundRect(), the third radius, specified as a double, applies to the bottom-right corner.</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("Verify that when four radii are given to roundRect(), the third radius, specified as a double, applies to the bottom-right corner."); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.roundRect(0, 0, 100, 50, [0, 0, 20, 0]); + ctx.fillStyle = '#0f0'; + ctx.fill(); + _assertPixel(canvas, 1,1, 0,255,0,255); + _assertPixel(canvas, 98,1, 0,255,0,255); + _assertPixel(canvas, 98,48, 255,0,0,255); + _assertPixel(canvas, 1,48, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.4.dompoint.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.4.dompoint.html new file mode 100644 index 0000000000..b15c291884 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.4.dompoint.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.roundrect.4.radii.4.dompoint</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.roundrect.4.radii.4.dompoint</h1> +<p class="desc">Verify that when four radii are given to roundRect(), the fourth radius, specified as a DOMPoint, applies to the bottom-left corner.</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("Verify that when four radii are given to roundRect(), the fourth radius, specified as a DOMPoint, applies to the bottom-left corner."); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.roundRect(0, 0, 100, 50, [0, 0, 0, new DOMPoint(40, 20)]); + ctx.fillStyle = '#0f0'; + ctx.fill(); + + // bottom-left corner + _assertPixel(canvas, 20,48, 255,0,0,255); + _assertPixel(canvas, 41,48, 0,255,0,255); + _assertPixel(canvas, 1,39, 255,0,0,255); + _assertPixel(canvas, 1,28, 0,255,0,255); + + // other corners + _assertPixel(canvas, 1,1, 0,255,0,255); + _assertPixel(canvas, 98,1, 0,255,0,255); + _assertPixel(canvas, 98,48, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.4.dompointinit.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.4.dompointinit.html new file mode 100644 index 0000000000..d9b03a1225 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.4.dompointinit.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.roundrect.4.radii.4.dompointinit</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.roundrect.4.radii.4.dompointinit</h1> +<p class="desc">Verify that when four radii are given to roundRect(), the fourth radius, specified as a DOMPointInit, applies to the bottom-left corner.</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("Verify that when four radii are given to roundRect(), the fourth radius, specified as a DOMPointInit, applies to the bottom-left corner."); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.roundRect(0, 0, 100, 50, [0, 0, 0, {x: 40, y: 20}]); + ctx.fillStyle = '#0f0'; + ctx.fill(); + + // bottom-left corner + _assertPixel(canvas, 20,48, 255,0,0,255); + _assertPixel(canvas, 41,48, 0,255,0,255); + _assertPixel(canvas, 1,39, 255,0,0,255); + _assertPixel(canvas, 1,28, 0,255,0,255); + + // other corners + _assertPixel(canvas, 1,1, 0,255,0,255); + _assertPixel(canvas, 98,1, 0,255,0,255); + _assertPixel(canvas, 98,48, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.4.double.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.4.double.html new file mode 100644 index 0000000000..62ccf85958 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.4.double.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.roundrect.4.radii.4.double</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.roundrect.4.radii.4.double</h1> +<p class="desc">Verify that when four radii are given to roundRect(), the fourth radius, specified as a double, applies to the bottom-left corner.</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("Verify that when four radii are given to roundRect(), the fourth radius, specified as a double, applies to the bottom-left corner."); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.roundRect(0, 0, 100, 50, [0, 0, 0, 20]); + ctx.fillStyle = '#0f0'; + ctx.fill(); + _assertPixel(canvas, 1,1, 0,255,0,255); + _assertPixel(canvas, 98,1, 0,255,0,255); + _assertPixel(canvas, 98,48, 0,255,0,255); + _assertPixel(canvas, 1,48, 255,0,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.badinput.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.badinput.html new file mode 100644 index 0000000000..39e1d0c655 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.badinput.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.roundrect.badinput</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.roundrect.badinput</h1> +<p class="desc">roundRect() throws or does not throw errors given the strange inputs.</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("roundRect() throws or does not throw errors given the strange inputs."); +_addTest(function(canvas, ctx) { + + ctx.roundRect(0, 0, 100, 100, { foo: "bar" }); //=> DOMPointInit + ctx.roundRect(0, 0, 100, 100, undefined); //=> "missing" -> 0 + ctx.roundRect(0, 0, 100, 100, [[]]); //=> « DOMPointInit » + ctx.roundRect(0, 0, 100, 100, [[25]]); //=> « DOMPointInit » + ctx.roundRect(0, 0, 100, 100, [undefined]); //=> « DOMPointInit » + assert_throws_js(TypeError, function() { ctx.roundRect(0, 0, 100, 100, 0n); }); + assert_throws_js(TypeError, function() { ctx.roundRect(0, 0, 100, 100, { x: 0n }); }); + assert_throws_js(TypeError, function() { ctx.roundRect(0, 0, 100, 100, [{ x: 0n }]); }); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.closed.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.closed.html new file mode 100644 index 0000000000..89aeb3b865 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.closed.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.roundrect.closed</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.roundrect.closed</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.strokeStyle = '#0f0'; + ctx.lineWidth = 200; + ctx.lineJoin = 'miter'; + ctx.roundRect(100, 50, 100, 100, [0]); + ctx.stroke(); + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.end.1.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.end.1.html new file mode 100644 index 0000000000..be98ce5841 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.end.1.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.roundrect.end.1</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.roundrect.end.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 = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.strokeStyle = '#0f0'; + ctx.lineWidth = 100; + ctx.roundRect(200, 100, 400, 1000, [0]); + ctx.lineTo(-2000, -1000); + ctx.stroke(); + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.end.2.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.end.2.html new file mode 100644 index 0000000000..16131ad345 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.end.2.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.roundrect.end.2</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.roundrect.end.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 = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.strokeStyle = '#0f0'; + ctx.lineWidth = 450; + ctx.lineCap = 'round'; + ctx.lineJoin = 'bevel'; + ctx.roundRect(150, 150, 2000, 2000, [0]); + ctx.lineTo(160, 160); + ctx.stroke(); + _assertPixel(canvas, 1,1, 0,255,0,255); + _assertPixel(canvas, 98,1, 0,255,0,255); + _assertPixel(canvas, 1,48, 0,255,0,255); + _assertPixel(canvas, 98,48, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.end.3.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.end.3.html new file mode 100644 index 0000000000..f9454080eb --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.end.3.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.roundrect.end.3</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.roundrect.end.3</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.strokeStyle = '#0f0'; + ctx.lineWidth = 100; + ctx.roundRect(101, 51, 2000, 2000, [500, 500, 500, 500]); + ctx.lineTo(-1, -1); + ctx.stroke(); + _assertPixel(canvas, 1,1, 0,255,0,255); + _assertPixel(canvas, 98,1, 0,255,0,255); + _assertPixel(canvas, 1,48, 0,255,0,255); + _assertPixel(canvas, 98,48, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.end.4.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.end.4.html new file mode 100644 index 0000000000..52d49c32e7 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.end.4.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.roundrect.end.4</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.roundrect.end.4</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.strokeStyle = '#f00'; + ctx.lineWidth = 10; + ctx.roundRect(-1, -1, 2000, 2000, [1000, 1000, 1000, 1000]); + ctx.lineTo(-150, -150); + ctx.stroke(); + _assertPixel(canvas, 1,1, 0,255,0,255); + _assertPixel(canvas, 98,1, 0,255,0,255); + _assertPixel(canvas, 1,48, 0,255,0,255); + _assertPixel(canvas, 98,48, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.negative.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.negative.html new file mode 100644 index 0000000000..66e1172432 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.negative.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.roundrect.negative</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.roundrect.negative</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) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.beginPath(); + ctx.fillStyle = '#0f0'; + ctx.roundRect(0, 0, 50, 25, [10, 0, 0, 0]); + ctx.roundRect(100, 0, -50, 25, [10, 0, 0, 0]); + ctx.roundRect(0, 50, 50, -25, [10, 0, 0, 0]); + ctx.roundRect(100, 50, -50, -25, [10, 0, 0, 0]); + ctx.fill(); + // All rects drawn + _assertPixel(canvas, 25,12, 0,255,0,255); + _assertPixel(canvas, 75,12, 0,255,0,255); + _assertPixel(canvas, 25,37, 0,255,0,255); + _assertPixel(canvas, 75,37, 0,255,0,255); + // Correct corners are rounded. + _assertPixel(canvas, 1,1, 255,0,0,255); + _assertPixel(canvas, 98,1, 255,0,0,255); + _assertPixel(canvas, 1,48, 255,0,0,255); + _assertPixel(canvas, 98,48, 255,0,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.newsubpath.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.newsubpath.html new file mode 100644 index 0000000000..df3990a376 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.newsubpath.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.roundrect.newsubpath</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.roundrect.newsubpath</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.beginPath(); + ctx.strokeStyle = '#f00'; + ctx.lineWidth = 50; + ctx.moveTo(-100, 25); + ctx.lineTo(-50, 25); + ctx.roundRect(200, 25, 1, 1, [0]); + ctx.stroke(); + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.nonfinite.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.nonfinite.html new file mode 100644 index 0000000000..5f0f0b6eaf --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.nonfinite.html @@ -0,0 +1,115 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.roundrect.nonfinite</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.roundrect.nonfinite</h1> +<p class="desc">roundRect() 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("roundRect() with Infinity/NaN is ignored"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50) + ctx.moveTo(0, 0); + ctx.lineTo(100, 0); + ctx.roundRect(Infinity, 50, 1, 1, [0]); + ctx.roundRect(-Infinity, 50, 1, 1, [0]); + ctx.roundRect(NaN, 50, 1, 1, [0]); + ctx.roundRect(0, Infinity, 1, 1, [0]); + ctx.roundRect(0, -Infinity, 1, 1, [0]); + ctx.roundRect(0, NaN, 1, 1, [0]); + ctx.roundRect(0, 50, Infinity, 1, [0]); + ctx.roundRect(0, 50, -Infinity, 1, [0]); + ctx.roundRect(0, 50, NaN, 1, [0]); + ctx.roundRect(0, 50, 1, Infinity, [0]); + ctx.roundRect(0, 50, 1, -Infinity, [0]); + ctx.roundRect(0, 50, 1, NaN, [0]); + ctx.roundRect(0, 50, 1, 1, [Infinity]); + ctx.roundRect(0, 50, 1, 1, [-Infinity]); + ctx.roundRect(0, 50, 1, 1, [NaN]); + ctx.roundRect(0, 50, 1, 1, [Infinity,0]); + ctx.roundRect(0, 50, 1, 1, [-Infinity,0]); + ctx.roundRect(0, 50, 1, 1, [NaN,0]); + ctx.roundRect(0, 50, 1, 1, [0,Infinity]); + ctx.roundRect(0, 50, 1, 1, [0,-Infinity]); + ctx.roundRect(0, 50, 1, 1, [0,NaN]); + ctx.roundRect(0, 50, 1, 1, [Infinity,0,0]); + ctx.roundRect(0, 50, 1, 1, [-Infinity,0,0]); + ctx.roundRect(0, 50, 1, 1, [NaN,0,0]); + ctx.roundRect(0, 50, 1, 1, [0,Infinity,0]); + ctx.roundRect(0, 50, 1, 1, [0,-Infinity,0]); + ctx.roundRect(0, 50, 1, 1, [0,NaN,0]); + ctx.roundRect(0, 50, 1, 1, [0,0,Infinity]); + ctx.roundRect(0, 50, 1, 1, [0,0,-Infinity]); + ctx.roundRect(0, 50, 1, 1, [0,0,NaN]); + ctx.roundRect(0, 50, 1, 1, [Infinity,0,0,0]); + ctx.roundRect(0, 50, 1, 1, [-Infinity,0,0,0]); + ctx.roundRect(0, 50, 1, 1, [NaN,0,0,0]); + ctx.roundRect(0, 50, 1, 1, [0,Infinity,0,0]); + ctx.roundRect(0, 50, 1, 1, [0,-Infinity,0,0]); + ctx.roundRect(0, 50, 1, 1, [0,NaN,0,0]); + ctx.roundRect(0, 50, 1, 1, [0,0,Infinity,0]); + ctx.roundRect(0, 50, 1, 1, [0,0,-Infinity,0]); + ctx.roundRect(0, 50, 1, 1, [0,0,NaN,0]); + ctx.roundRect(0, 50, 1, 1, [0,0,0,Infinity]); + ctx.roundRect(0, 50, 1, 1, [0,0,0,-Infinity]); + ctx.roundRect(0, 50, 1, 1, [0,0,0,NaN]); + ctx.roundRect(Infinity, Infinity, 1, 1, [0]); + ctx.roundRect(Infinity, Infinity, Infinity, 1, [0]); + ctx.roundRect(Infinity, Infinity, Infinity, Infinity, [0]); + ctx.roundRect(Infinity, Infinity, Infinity, Infinity, [Infinity]); + ctx.roundRect(Infinity, Infinity, Infinity, 1, [Infinity]); + ctx.roundRect(Infinity, Infinity, 1, Infinity, [0]); + ctx.roundRect(Infinity, Infinity, 1, Infinity, [Infinity]); + ctx.roundRect(Infinity, Infinity, 1, 1, [Infinity]); + ctx.roundRect(Infinity, 50, Infinity, 1, [0]); + ctx.roundRect(Infinity, 50, Infinity, Infinity, [0]); + ctx.roundRect(Infinity, 50, Infinity, Infinity, [Infinity]); + ctx.roundRect(Infinity, 50, Infinity, 1, [Infinity]); + ctx.roundRect(Infinity, 50, 1, Infinity, [0]); + ctx.roundRect(Infinity, 50, 1, Infinity, [Infinity]); + ctx.roundRect(Infinity, 50, 1, 1, [Infinity]); + ctx.roundRect(0, Infinity, Infinity, 1, [0]); + ctx.roundRect(0, Infinity, Infinity, Infinity, [0]); + ctx.roundRect(0, Infinity, Infinity, Infinity, [Infinity]); + ctx.roundRect(0, Infinity, Infinity, 1, [Infinity]); + ctx.roundRect(0, Infinity, 1, Infinity, [0]); + ctx.roundRect(0, Infinity, 1, Infinity, [Infinity]); + ctx.roundRect(0, Infinity, 1, 1, [Infinity]); + ctx.roundRect(0, 50, Infinity, Infinity, [0]); + ctx.roundRect(0, 50, Infinity, Infinity, [Infinity]); + ctx.roundRect(0, 50, Infinity, 1, [Infinity]); + ctx.roundRect(0, 50, 1, Infinity, [Infinity]); + ctx.roundRect(0, 0, 100, 100, [new DOMPoint(10, Infinity)]); + ctx.roundRect(0, 0, 100, 100, [new DOMPoint(10, -Infinity)]); + ctx.roundRect(0, 0, 100, 100, [new DOMPoint(10, NaN)]); + ctx.roundRect(0, 0, 100, 100, [new DOMPoint(Infinity, 10)]); + ctx.roundRect(0, 0, 100, 100, [new DOMPoint(-Infinity, 10)]); + ctx.roundRect(0, 0, 100, 100, [new DOMPoint(NaN, 10)]); + ctx.roundRect(0, 0, 100, 100, [{x: 10, y: Infinity}]); + ctx.roundRect(0, 0, 100, 100, [{x: 10, y: -Infinity}]); + ctx.roundRect(0, 0, 100, 100, [{x: 10, y: NaN}]); + ctx.roundRect(0, 0, 100, 100, [{x: Infinity, y: 10}]); + ctx.roundRect(0, 0, 100, 100, [{x: -Infinity, y: 10}]); + ctx.roundRect(0, 0, 100, 100, [{x: NaN, y: 10}]); + ctx.lineTo(100, 50); + ctx.lineTo(0, 50); + ctx.fillStyle = '#0f0'; + ctx.fill(); + _assertPixel(canvas, 50,25, 0,255,0,255); + _assertPixel(canvas, 90,45, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.radius.intersecting.1.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.radius.intersecting.1.html new file mode 100644 index 0000000000..913b17e45e --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.radius.intersecting.1.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.roundrect.radius.intersecting.1</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.roundrect.radius.intersecting.1</h1> +<p class="desc">Check that roundRects with intersecting corner arcs are rendered correctly.</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("Check that roundRects with intersecting corner arcs are rendered correctly."); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.roundRect(0, 0, 100, 50, [40, 40, 40, 40]); + ctx.fillStyle = '#0f0'; + ctx.fill(); + _assertPixel(canvas, 2,25, 0,255,0,255); + _assertPixel(canvas, 50,1, 0,255,0,255); + _assertPixel(canvas, 50,25, 0,255,0,255); + _assertPixel(canvas, 50,48, 0,255,0,255); + _assertPixel(canvas, 97,25, 0,255,0,255); + _assertPixel(canvas, 1,1, 255,0,0,255); + _assertPixel(canvas, 98,1, 255,0,0,255); + _assertPixel(canvas, 1,48, 255,0,0,255); + _assertPixel(canvas, 98,48, 255,0,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.radius.intersecting.2.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.radius.intersecting.2.html new file mode 100644 index 0000000000..abd7f86088 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.radius.intersecting.2.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.roundrect.radius.intersecting.2</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.roundrect.radius.intersecting.2</h1> +<p class="desc">Check that roundRects with intersecting corner arcs are rendered correctly.</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("Check that roundRects with intersecting corner arcs are rendered correctly."); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.roundRect(0, 0, 100, 50, [1000, 1000, 1000, 1000]); + ctx.fillStyle = '#0f0'; + ctx.fill(); + _assertPixel(canvas, 2,25, 0,255,0,255); + _assertPixel(canvas, 50,1, 0,255,0,255); + _assertPixel(canvas, 50,25, 0,255,0,255); + _assertPixel(canvas, 50,48, 0,255,0,255); + _assertPixel(canvas, 97,25, 0,255,0,255); + _assertPixel(canvas, 1,1, 255,0,0,255); + _assertPixel(canvas, 98,1, 255,0,0,255); + _assertPixel(canvas, 1,48, 255,0,0,255); + _assertPixel(canvas, 98,48, 255,0,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.radius.negative.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.radius.negative.html new file mode 100644 index 0000000000..ac2532dcfe --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.radius.negative.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.roundrect.radius.negative</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.roundrect.radius.negative</h1> +<p class="desc">roundRect() with negative radius throws an exception</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("roundRect() with negative radius throws an exception"); +_addTest(function(canvas, ctx) { + + assert_throws_js(RangeError, () => { ctx.roundRect(0, 0, 0, 0, [-1])}); + assert_throws_js(RangeError, () => { ctx.roundRect(0, 0, 0, 0, [1, -1])}); + assert_throws_js(RangeError, () => { ctx.roundRect(0, 0, 0, 0, [new DOMPoint(-1, 1), 1])}); + assert_throws_js(RangeError, () => { ctx.roundRect(0, 0, 0, 0, [new DOMPoint(1, -1)])}); + assert_throws_js(RangeError, () => { ctx.roundRect(0, 0, 0, 0, [{x: -1, y: 1}, 1])}); + assert_throws_js(RangeError, () => { ctx.roundRect(0, 0, 0, 0, [{x: 1, y: -1}])}); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.radius.noargument.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.radius.noargument.html new file mode 100644 index 0000000000..cfaf87ecf2 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.radius.noargument.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.roundrect.radius.noargument</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.roundrect.radius.noargument</h1> +<p class="desc">Check that roundRect draws a rectangle when no radii are provided.</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("Check that roundRect draws a rectangle when no radii are provided."); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.roundRect(10, 10, 80, 30); + ctx.fillStyle = '#0f0'; + ctx.fill(); + // upper left corner (10, 10) + _assertPixel(canvas, 10,9, 255,0,0,255); + _assertPixel(canvas, 9,10, 255,0,0,255); + _assertPixel(canvas, 10,10, 0,255,0,255); + + // upper right corner (89, 10) + _assertPixel(canvas, 90,10, 255,0,0,255); + _assertPixel(canvas, 89,9, 255,0,0,255); + _assertPixel(canvas, 89,10, 0,255,0,255); + + // lower right corner (89, 39) + _assertPixel(canvas, 89,40, 255,0,0,255); + _assertPixel(canvas, 90,39, 255,0,0,255); + _assertPixel(canvas, 89,39, 0,255,0,255); + + // lower left corner (10, 30) + _assertPixel(canvas, 9,39, 255,0,0,255); + _assertPixel(canvas, 10,40, 255,0,0,255); + _assertPixel(canvas, 10,39, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.radius.noarugment.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.radius.noarugment.html new file mode 100644 index 0000000000..08f576b379 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.radius.noarugment.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.roundrect.radius.noarugment</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.roundrect.radius.noarugment</h1> +<p class="desc">Check that roundRect draws a rectangle when no radii are provided.</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("Check that roundRect draws a rectangle when no radii are provided."); +_addTest(function(canvas, ctx) { + +ctx.fillStyle = '#f00'; +ctx.fillRect(0, 0, 100, 50); +ctx.roundRect(10, 10, 80, 30); +ctx.fillStyle = '#0f0'; +ctx.fill(); +// upper left corner (10, 10) +_assertPixel(canvas, 10,9, 255,0,0,255); +_assertPixel(canvas, 9,10, 255,0,0,255); +_assertPixel(canvas, 10,10, 0,255,0,255); + +// upper right corner (89, 10) +_assertPixel(canvas, 90,10, 255,0,0,255); +_assertPixel(canvas, 89,9, 255,0,0,255); +_assertPixel(canvas, 89,10, 0,255,0,255); + +// lower right corner (89, 39) +_assertPixel(canvas, 89,40, 255,0,0,255); +_assertPixel(canvas, 90,39, 255,0,0,255); +_assertPixel(canvas, 89,39, 0,255,0,255); + +// lower left corner (10, 30) +_assertPixel(canvas, 9,39, 255,0,0,255); +_assertPixel(canvas, 10,40, 255,0,0,255); +_assertPixel(canvas, 10,39, 0,255,0,255); + + +}); +</script> diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.radius.none.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.radius.none.html new file mode 100644 index 0000000000..8363285ffc --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.radius.none.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.roundrect.radius.none</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.roundrect.radius.none</h1> +<p class="desc">Check that roundRect throws an RangeError if radii is an empty array.</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("Check that roundRect throws an RangeError if radii is an empty array."); +_addTest(function(canvas, ctx) { + + assert_throws_js(RangeError, () => { ctx.roundRect(0, 0, 100, 50, [])}); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.radius.toomany.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.radius.toomany.html new file mode 100644 index 0000000000..d8fe4bb45c --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.radius.toomany.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.roundrect.radius.toomany</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.roundrect.radius.toomany</h1> +<p class="desc">Check that roundRect throws an IndeSizeError if radii has more than four items.</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("Check that roundRect throws an IndeSizeError if radii has more than four items."); +_addTest(function(canvas, ctx) { + + assert_throws_js(RangeError, () => { ctx.roundRect(0, 0, 100, 50, [0, 0, 0, 0, 0])}); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.selfintersect.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.selfintersect.html new file mode 100644 index 0000000000..7a69aaf4c6 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.selfintersect.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.roundrect.selfintersect</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.roundrect.selfintersect</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.roundRect(0, 0, 100, 50, [0]); + ctx.strokeStyle = '#0f0'; + ctx.lineWidth = 90; + ctx.beginPath(); + ctx.roundRect(45, 20, 10, 10, [0]); + ctx.stroke(); + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.winding.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.winding.html new file mode 100644 index 0000000000..9c1f985eb9 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.winding.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.roundrect.winding</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.roundrect.winding</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) { + + ctx.fillStyle = '#0f0'; + ctx.fillRect(0, 0, 100, 50); + ctx.beginPath(); + ctx.fillStyle = '#f00'; + ctx.roundRect(0, 0, 50, 50, [0]); + ctx.roundRect(100, 50, -50, -50, [0]); + ctx.roundRect(0, 25, 100, -25, [0]); + ctx.roundRect(100, 25, -100, 25, [0]); + ctx.fill(); + _assertPixel(canvas, 25,12, 0,255,0,255); + _assertPixel(canvas, 75,12, 0,255,0,255); + _assertPixel(canvas, 25,37, 0,255,0,255); + _assertPixel(canvas, 75,37, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.zero.1.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.zero.1.html new file mode 100644 index 0000000000..4e9a804dc2 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.zero.1.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.roundrect.zero.1</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.roundrect.zero.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 = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.strokeStyle = '#0f0'; + ctx.lineWidth = 100; + ctx.beginPath(); + ctx.roundRect(0, 50, 100, 0, [0]); + ctx.stroke(); + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.zero.2.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.zero.2.html new file mode 100644 index 0000000000..ac64fa7818 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.zero.2.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.roundrect.zero.2</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.roundrect.zero.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 = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.strokeStyle = '#0f0'; + ctx.lineWidth = 100; + ctx.beginPath(); + ctx.roundRect(50, -100, 0, 250, [0]); + ctx.stroke(); + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.zero.3.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.zero.3.html new file mode 100644 index 0000000000..a807715b35 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.zero.3.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.roundrect.zero.3</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.roundrect.zero.3</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.strokeStyle = '#f00'; + ctx.lineWidth = 100; + ctx.beginPath(); + ctx.roundRect(50, 25, 0, 0, [0]); + ctx.stroke(); + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.zero.4.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.zero.4.html new file mode 100644 index 0000000000..fc51918c27 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.zero.4.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.roundrect.zero.4</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.roundrect.zero.4</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.strokeStyle = '#0f0'; + ctx.lineWidth = 50; + ctx.roundRect(100, 25, 0, 0, [0]); + ctx.lineTo(0, 25); + ctx.stroke(); + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.zero.5.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.zero.5.html new file mode 100644 index 0000000000..de7d41b68f --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.zero.5.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.roundrect.zero.5</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.roundrect.zero.5</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.strokeStyle = '#f00'; + ctx.lineWidth = 50; + ctx.moveTo(0, 0); + ctx.roundRect(100, 25, 0, 0, [0]); + ctx.stroke(); + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.zero.6.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.zero.6.html new file mode 100644 index 0000000000..1e8e338a73 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.zero.6.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.roundrect.zero.6</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.roundrect.zero.6</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.strokeStyle = '#f00'; + ctx.lineJoin = 'miter'; + ctx.miterLimit = 1.5; + ctx.lineWidth = 200; + ctx.beginPath(); + ctx.roundRect(100, 25, 1000, 0, [0]); + ctx.stroke(); + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.empty.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.empty.html new file mode 100644 index 0000000000..aa459ec986 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.empty.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.stroke.empty</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.stroke.empty</h1> +<p class="desc">Empty subpaths are not stroked</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("Empty subpaths are not stroked"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#0f0'; + ctx.fillRect(0, 0, 100, 50); + + ctx.strokeStyle = '#f00'; + ctx.lineWidth = 100; + ctx.lineCap = 'round'; + ctx.lineJoin = 'round'; + + ctx.beginPath(); + ctx.moveTo(40, 25); + ctx.moveTo(60, 25); + ctx.stroke(); + + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.overlap.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.overlap.html new file mode 100644 index 0000000000..a577f22769 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.overlap.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.stroke.overlap</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.stroke.overlap</h1> +<p class="desc">Stroked subpaths are combined before being drawn</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="2d.path.stroke.overlap.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +var t = async_test("Stroked subpaths are combined before being drawn"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#000'; + ctx.fillRect(0, 0, 100, 50); + + ctx.strokeStyle = 'rgba(0, 255, 0, 0.5)'; + ctx.lineWidth = 50; + ctx.moveTo(0, 20); + ctx.lineTo(100, 20); + ctx.moveTo(0, 30); + ctx.lineTo(100, 30); + ctx.stroke(); + + _assertPixelApprox(canvas, 50,25, 0,127,0,255, 1); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.overlap.png b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.overlap.png Binary files differnew file mode 100644 index 0000000000..e2a35d48d4 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.overlap.png diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.arc.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.arc.html new file mode 100644 index 0000000000..6474a15424 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.arc.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.stroke.prune.arc</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.stroke.prune.arc</h1> +<p class="desc">Zero-length line segments from arcTo and arc are removed before stroking</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("Zero-length line segments from arcTo and arc are removed before stroking"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#0f0'; + ctx.fillRect(0, 0, 100, 50); + + ctx.strokeStyle = '#f00'; + ctx.lineWidth = 100; + ctx.lineCap = 'round'; + ctx.lineJoin = 'round'; + + ctx.beginPath(); + ctx.moveTo(50, 25); + ctx.arcTo(50, 25, 150, 25, 10); + ctx.stroke(); + + ctx.beginPath(); + ctx.moveTo(60, 25); + ctx.arc(50, 25, 10, 0, 0, false); + ctx.stroke(); + + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.closed.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.closed.html new file mode 100644 index 0000000000..16b46852a1 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.closed.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.stroke.prune.closed</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.stroke.prune.closed</h1> +<p class="desc">Zero-length line segments from closed paths are removed before stroking</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("Zero-length line segments from closed paths are removed before stroking"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#0f0'; + ctx.fillRect(0, 0, 100, 50); + + ctx.strokeStyle = '#f00'; + ctx.lineWidth = 100; + ctx.lineCap = 'round'; + ctx.lineJoin = 'round'; + + ctx.beginPath(); + ctx.moveTo(50, 25); + ctx.lineTo(50, 25); + ctx.closePath(); + ctx.stroke(); + + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.corner.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.corner.html new file mode 100644 index 0000000000..226fccc6d4 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.corner.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.stroke.prune.corner</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.stroke.prune.corner</h1> +<p class="desc">Zero-length line segments are removed before stroking with miters</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("Zero-length line segments are removed before stroking with miters"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#0f0'; + ctx.fillRect(0, 0, 100, 50); + + ctx.strokeStyle = '#f00'; + ctx.lineWidth = 400; + ctx.lineJoin = 'miter'; + ctx.miterLimit = 1.4; + + ctx.beginPath(); + ctx.moveTo(-1000, 200); + ctx.lineTo(-100, 200); + ctx.lineTo(-100, 200); + ctx.lineTo(-100, 200); + ctx.lineTo(-100, 1000); + ctx.stroke(); + + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.curve.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.curve.html new file mode 100644 index 0000000000..8023b7b3f9 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.curve.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.stroke.prune.curve</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.stroke.prune.curve</h1> +<p class="desc">Zero-length line segments from quadraticCurveTo and bezierCurveTo are removed before stroking</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("Zero-length line segments from quadraticCurveTo and bezierCurveTo are removed before stroking"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#0f0'; + ctx.fillRect(0, 0, 100, 50); + + ctx.strokeStyle = '#f00'; + ctx.lineWidth = 100; + ctx.lineCap = 'round'; + ctx.lineJoin = 'round'; + + ctx.beginPath(); + ctx.moveTo(50, 25); + ctx.quadraticCurveTo(50, 25, 50, 25); + ctx.stroke(); + + ctx.beginPath(); + ctx.moveTo(50, 25); + ctx.bezierCurveTo(50, 25, 50, 25, 50, 25); + ctx.stroke(); + + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.line.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.line.html new file mode 100644 index 0000000000..97f88847c0 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.line.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.stroke.prune.line</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.stroke.prune.line</h1> +<p class="desc">Zero-length line segments from lineTo are removed before stroking</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("Zero-length line segments from lineTo are removed before stroking"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#0f0'; + ctx.fillRect(0, 0, 100, 50); + + ctx.strokeStyle = '#f00'; + ctx.lineWidth = 100; + ctx.lineCap = 'round'; + ctx.lineJoin = 'round'; + + ctx.beginPath(); + ctx.moveTo(50, 25); + ctx.lineTo(50, 25); + ctx.stroke(); + + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.rect.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.rect.html new file mode 100644 index 0000000000..bf1fc9aa20 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.rect.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.stroke.prune.rect</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.stroke.prune.rect</h1> +<p class="desc">Zero-length line segments from rect and strokeRect are removed before stroking</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("Zero-length line segments from rect and strokeRect are removed before stroking"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#0f0'; + ctx.fillRect(0, 0, 100, 50); + + ctx.strokeStyle = '#f00'; + ctx.lineWidth = 100; + ctx.lineCap = 'round'; + ctx.lineJoin = 'round'; + + ctx.beginPath(); + ctx.rect(50, 25, 0, 0); + ctx.stroke(); + + ctx.strokeRect(50, 25, 0, 0); + + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.scale1.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.scale1.html new file mode 100644 index 0000000000..3e4651ec4a --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.scale1.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.stroke.scale1</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.stroke.scale1</h1> +<p class="desc">Stroke line widths are scaled by the current transformation matrix</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("Stroke line widths are scaled by the current transformation matrix"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + + ctx.beginPath(); + ctx.rect(25, 12.5, 50, 25); + ctx.save(); + ctx.scale(50, 25); + ctx.strokeStyle = '#0f0'; + ctx.stroke(); + ctx.restore(); + + ctx.beginPath(); + ctx.rect(-25, -12.5, 150, 75); + ctx.save(); + ctx.scale(50, 25); + ctx.strokeStyle = '#f00'; + ctx.stroke(); + ctx.restore(); + + _assertPixel(canvas, 0,0, 0,255,0,255); + _assertPixel(canvas, 50,0, 0,255,0,255); + _assertPixel(canvas, 99,0, 0,255,0,255); + _assertPixel(canvas, 0,25, 0,255,0,255); + _assertPixel(canvas, 50,25, 0,255,0,255); + _assertPixel(canvas, 99,25, 0,255,0,255); + _assertPixel(canvas, 0,49, 0,255,0,255); + _assertPixel(canvas, 50,49, 0,255,0,255); + _assertPixel(canvas, 99,49, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.scale2.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.scale2.html new file mode 100644 index 0000000000..099efec76c --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.scale2.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.stroke.scale2</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.stroke.scale2</h1> +<p class="desc">Stroke line widths are scaled by the current transformation matrix</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("Stroke line widths are scaled by the current transformation matrix"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + + ctx.beginPath(); + ctx.rect(25, 12.5, 50, 25); + ctx.save(); + ctx.rotate(Math.PI/2); + ctx.scale(25, 50); + ctx.strokeStyle = '#0f0'; + ctx.stroke(); + ctx.restore(); + + ctx.beginPath(); + ctx.rect(-25, -12.5, 150, 75); + ctx.save(); + ctx.rotate(Math.PI/2); + ctx.scale(25, 50); + ctx.strokeStyle = '#f00'; + ctx.stroke(); + ctx.restore(); + + _assertPixel(canvas, 0,0, 0,255,0,255); + _assertPixel(canvas, 50,0, 0,255,0,255); + _assertPixel(canvas, 99,0, 0,255,0,255); + _assertPixel(canvas, 0,25, 0,255,0,255); + _assertPixel(canvas, 50,25, 0,255,0,255); + _assertPixel(canvas, 99,25, 0,255,0,255); + _assertPixel(canvas, 0,49, 0,255,0,255); + _assertPixel(canvas, 50,49, 0,255,0,255); + _assertPixel(canvas, 99,49, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.skew.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.skew.html new file mode 100644 index 0000000000..86f3eebf1d --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.skew.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.stroke.skew</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.stroke.skew</h1> +<p class="desc">Strokes lines are skewed by the current transformation matrix</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("Strokes lines are skewed by the current transformation matrix"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + + ctx.save(); + ctx.beginPath(); + ctx.moveTo(49, -50); + ctx.lineTo(201, -50); + ctx.rotate(Math.PI/4); + ctx.scale(1, 283); + ctx.strokeStyle = '#0f0'; + ctx.stroke(); + ctx.restore(); + + ctx.save(); + ctx.beginPath(); + ctx.translate(-150, 0); + ctx.moveTo(49, -50); + ctx.lineTo(199, -50); + ctx.rotate(Math.PI/4); + ctx.scale(1, 142); + ctx.strokeStyle = '#f00'; + ctx.stroke(); + ctx.restore(); + + ctx.save(); + ctx.beginPath(); + ctx.translate(-150, 0); + ctx.moveTo(49, -50); + ctx.lineTo(199, -50); + ctx.rotate(Math.PI/4); + ctx.scale(1, 142); + ctx.strokeStyle = '#f00'; + ctx.stroke(); + ctx.restore(); + + _assertPixel(canvas, 0,0, 0,255,0,255); + _assertPixel(canvas, 50,0, 0,255,0,255); + _assertPixel(canvas, 99,0, 0,255,0,255); + _assertPixel(canvas, 0,25, 0,255,0,255); + _assertPixel(canvas, 50,25, 0,255,0,255); + _assertPixel(canvas, 99,25, 0,255,0,255); + _assertPixel(canvas, 0,49, 0,255,0,255); + _assertPixel(canvas, 50,49, 0,255,0,255); + _assertPixel(canvas, 99,49, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.unaffected.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.unaffected.html new file mode 100644 index 0000000000..8e6b41946f --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.unaffected.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.stroke.unaffected</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.stroke.unaffected</h1> +<p class="desc">Stroking does not start a new path or subpath</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("Stroking does not start a new path or subpath"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + + ctx.lineWidth = 50; + ctx.moveTo(-100, 25); + ctx.lineTo(-100, -100); + ctx.lineTo(200, -100); + ctx.lineTo(200, 25); + ctx.strokeStyle = '#f00'; + ctx.stroke(); + + ctx.closePath(); + ctx.strokeStyle = '#0f0'; + ctx.stroke(); + + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.union.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.union.html new file mode 100644 index 0000000000..73198ab24d --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.union.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.stroke.union</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.stroke.union</h1> +<p class="desc">Strokes in opposite directions are unioned, not subtracted</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("Strokes in opposite directions are unioned, not subtracted"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + + ctx.strokeStyle = '#0f0'; + ctx.lineWidth = 40; + ctx.moveTo(0, 10); + ctx.lineTo(100, 10); + ctx.moveTo(100, 40); + ctx.lineTo(0, 40); + ctx.stroke(); + + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.transformation.basic.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.transformation.basic.html new file mode 100644 index 0000000000..1cdc81e4f6 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.transformation.basic.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.transformation.basic</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.transformation.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.translate(-100, 0); + ctx.rect(100, 0, 100, 50); + ctx.translate(0, -100); + ctx.fillStyle = '#0f0'; + ctx.fill(); + + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.transformation.changing.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.transformation.changing.html new file mode 100644 index 0000000000..8f711b6b9a --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.transformation.changing.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.transformation.changing</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.transformation.changing</h1> +<p class="desc">Transformations are applied while building paths, not when drawing</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("Transformations are applied while building paths, not when drawing"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.fillStyle = '#0f0'; + ctx.moveTo(0, 0); + ctx.translate(100, 0); + ctx.lineTo(0, 0); + ctx.translate(0, 50); + ctx.lineTo(0, 0); + ctx.translate(-100, 0); + ctx.lineTo(0, 0); + ctx.translate(1000, 1000); + ctx.rotate(Math.PI/2); + ctx.scale(0.1, 0.1); + ctx.fill(); + + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.transformation.multiple.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.transformation.multiple.html new file mode 100644 index 0000000000..af06c06371 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.transformation.multiple.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.path.transformation.multiple</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.path.transformation.multiple</h1> +<p class="desc">Transformations are applied while building paths, not when drawing</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("Transformations are applied while building paths, not when drawing"); +_addTest(function(canvas, ctx) { + + ctx.fillStyle = '#0f0'; + ctx.fillRect(0, 0, 100, 50); + + ctx.fillStyle = '#f00'; + ctx.translate(-100, 0); + ctx.rect(0, 0, 100, 50); + ctx.fill(); + ctx.translate(100, 0); + ctx.fill(); + + ctx.beginPath(); + ctx.strokeStyle = '#f00'; + ctx.lineWidth = 50; + ctx.translate(0, -50); + ctx.moveTo(0, 25); + ctx.lineTo(100, 25); + ctx.stroke(); + ctx.translate(0, 50); + ctx.stroke(); + + _assertPixel(canvas, 50,25, 0,255,0,255); + +}); +</script> + |
