diff options
Diffstat (limited to 'testing/web-platform/tests/2dcontext/line-styles')
37 files changed, 1755 insertions, 0 deletions
diff --git a/testing/web-platform/tests/2dcontext/line-styles/.gitkeep b/testing/web-platform/tests/2dcontext/line-styles/.gitkeep new file mode 100644 index 000000000..e69de29bb --- /dev/null +++ b/testing/web-platform/tests/2dcontext/line-styles/.gitkeep diff --git a/testing/web-platform/tests/2dcontext/line-styles/2d.line.cap.butt.html b/testing/web-platform/tests/2dcontext/line-styles/2d.line.cap.butt.html new file mode 100644 index 000000000..353676233 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/line-styles/2d.line.cap.butt.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.line.cap.butt</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.line.cap.butt</h1> +<p class="desc">lineCap 'butt' is 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> +<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("lineCap 'butt' is rendered correctly"); +_addTest(function(canvas, ctx) { + +ctx.fillStyle = '#0f0'; +ctx.fillRect(0, 0, 100, 50); + +ctx.lineCap = 'butt'; +ctx.lineWidth = 20; + +ctx.fillStyle = '#f00'; +ctx.strokeStyle = '#0f0'; +ctx.fillRect(15, 15, 20, 20); +ctx.beginPath(); +ctx.moveTo(25, 15); +ctx.lineTo(25, 35); +ctx.stroke(); + +ctx.fillStyle = '#0f0'; +ctx.strokeStyle = '#f00'; +ctx.beginPath(); +ctx.moveTo(75, 15); +ctx.lineTo(75, 35); +ctx.stroke(); +ctx.fillRect(65, 15, 20, 20); + +_assertPixel(canvas, 25,14, 0,255,0,255, "25,14", "0,255,0,255"); +_assertPixel(canvas, 25,15, 0,255,0,255, "25,15", "0,255,0,255"); +_assertPixel(canvas, 25,16, 0,255,0,255, "25,16", "0,255,0,255"); +_assertPixel(canvas, 25,34, 0,255,0,255, "25,34", "0,255,0,255"); +_assertPixel(canvas, 25,35, 0,255,0,255, "25,35", "0,255,0,255"); +_assertPixel(canvas, 25,36, 0,255,0,255, "25,36", "0,255,0,255"); + +_assertPixel(canvas, 75,14, 0,255,0,255, "75,14", "0,255,0,255"); +_assertPixel(canvas, 75,15, 0,255,0,255, "75,15", "0,255,0,255"); +_assertPixel(canvas, 75,16, 0,255,0,255, "75,16", "0,255,0,255"); +_assertPixel(canvas, 75,34, 0,255,0,255, "75,34", "0,255,0,255"); +_assertPixel(canvas, 75,35, 0,255,0,255, "75,35", "0,255,0,255"); +_assertPixel(canvas, 75,36, 0,255,0,255, "75,36", "0,255,0,255"); + + +}); +</script> + diff --git a/testing/web-platform/tests/2dcontext/line-styles/2d.line.cap.closed.html b/testing/web-platform/tests/2dcontext/line-styles/2d.line.cap.closed.html new file mode 100644 index 000000000..f8e233a41 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/line-styles/2d.line.cap.closed.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.line.cap.closed</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.line.cap.closed</h1> +<p class="desc">Line caps are not drawn at the corners of an unclosed rectangle</p> + + +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> +<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +var t = async_test("Line caps are not drawn at the corners of an unclosed rectangle"); +_addTest(function(canvas, ctx) { + +ctx.fillStyle = '#0f0'; +ctx.strokeStyle = '#f00'; +ctx.fillRect(0, 0, 100, 50); + +ctx.lineJoin = 'bevel'; +ctx.lineCap = 'square'; +ctx.lineWidth = 400; + +ctx.beginPath(); +ctx.moveTo(200, 200); +ctx.lineTo(200, 1000); +ctx.lineTo(1000, 1000); +ctx.lineTo(1000, 200); +ctx.closePath(); +ctx.stroke(); + +_assertPixel(canvas, 1,1, 0,255,0,255, "1,1", "0,255,0,255"); +_assertPixel(canvas, 48,1, 0,255,0,255, "48,1", "0,255,0,255"); +_assertPixel(canvas, 48,48, 0,255,0,255, "48,48", "0,255,0,255"); +_assertPixel(canvas, 1,48, 0,255,0,255, "1,48", "0,255,0,255"); + + +}); +</script> + diff --git a/testing/web-platform/tests/2dcontext/line-styles/2d.line.cap.invalid.html b/testing/web-platform/tests/2dcontext/line-styles/2d.line.cap.invalid.html new file mode 100644 index 000000000..1db32a9d6 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/line-styles/2d.line.cap.invalid.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.line.cap.invalid</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.line.cap.invalid</h1> +<p class="desc">Setting lineCap to invalid values 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> + +<ul id="d"></ul> +<script> +var t = async_test("Setting lineCap to invalid values is ignored"); +_addTest(function(canvas, ctx) { + +ctx.lineCap = 'butt' +_assertSame(ctx.lineCap, 'butt', "ctx.lineCap", "'butt'"); + +ctx.lineCap = 'butt'; +ctx.lineCap = 'invalid'; +_assertSame(ctx.lineCap, 'butt', "ctx.lineCap", "'butt'"); + +ctx.lineCap = 'butt'; +ctx.lineCap = 'ROUND'; +_assertSame(ctx.lineCap, 'butt', "ctx.lineCap", "'butt'"); + +ctx.lineCap = 'butt'; +ctx.lineCap = 'round\0'; +_assertSame(ctx.lineCap, 'butt', "ctx.lineCap", "'butt'"); + +ctx.lineCap = 'butt'; +ctx.lineCap = 'round '; +_assertSame(ctx.lineCap, 'butt', "ctx.lineCap", "'butt'"); + +ctx.lineCap = 'butt'; +ctx.lineCap = ""; +_assertSame(ctx.lineCap, 'butt', "ctx.lineCap", "'butt'"); + +ctx.lineCap = 'butt'; +ctx.lineCap = 'bevel'; +_assertSame(ctx.lineCap, 'butt', "ctx.lineCap", "'butt'"); + + +}); +</script> + diff --git a/testing/web-platform/tests/2dcontext/line-styles/2d.line.cap.open.html b/testing/web-platform/tests/2dcontext/line-styles/2d.line.cap.open.html new file mode 100644 index 000000000..499773085 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/line-styles/2d.line.cap.open.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.line.cap.open</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.line.cap.open</h1> +<p class="desc">Line caps are drawn at the corners of an unclosed rectangle</p> + + +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> +<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +var t = async_test("Line caps are drawn at the corners of an unclosed rectangle"); +_addTest(function(canvas, ctx) { + +ctx.fillStyle = '#f00'; +ctx.strokeStyle = '#0f0'; +ctx.fillRect(0, 0, 100, 50); + +ctx.lineJoin = 'bevel'; +ctx.lineCap = 'square'; +ctx.lineWidth = 400; + +ctx.beginPath(); +ctx.moveTo(200, 200); +ctx.lineTo(200, 1000); +ctx.lineTo(1000, 1000); +ctx.lineTo(1000, 200); +ctx.lineTo(200, 200); +ctx.stroke(); + +_assertPixel(canvas, 1,1, 0,255,0,255, "1,1", "0,255,0,255"); +_assertPixel(canvas, 48,1, 0,255,0,255, "48,1", "0,255,0,255"); +_assertPixel(canvas, 48,48, 0,255,0,255, "48,48", "0,255,0,255"); +_assertPixel(canvas, 1,48, 0,255,0,255, "1,48", "0,255,0,255"); + + +}); +</script> + diff --git a/testing/web-platform/tests/2dcontext/line-styles/2d.line.cap.round.html b/testing/web-platform/tests/2dcontext/line-styles/2d.line.cap.round.html new file mode 100644 index 000000000..675d11ce2 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/line-styles/2d.line.cap.round.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.line.cap.round</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.line.cap.round</h1> +<p class="desc">lineCap 'round' is 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> +<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("lineCap 'round' is rendered correctly"); +_addTest(function(canvas, ctx) { + +ctx.fillStyle = '#0f0'; +ctx.fillRect(0, 0, 100, 50); + +var tol = 1; // tolerance to avoid antialiasing artifacts + +ctx.lineCap = 'round'; +ctx.lineWidth = 20; + + +ctx.fillStyle = '#f00'; +ctx.strokeStyle = '#0f0'; + +ctx.beginPath(); +ctx.moveTo(35-tol, 15); +ctx.arc(25, 15, 10-tol, 0, Math.PI, true); +ctx.arc(25, 35, 10-tol, Math.PI, 0, true); +ctx.fill(); + +ctx.beginPath(); +ctx.moveTo(25, 15); +ctx.lineTo(25, 35); +ctx.stroke(); + + +ctx.fillStyle = '#0f0'; +ctx.strokeStyle = '#f00'; + +ctx.beginPath(); +ctx.moveTo(75, 15); +ctx.lineTo(75, 35); +ctx.stroke(); + +ctx.beginPath(); +ctx.moveTo(85+tol, 15); +ctx.arc(75, 15, 10+tol, 0, Math.PI, true); +ctx.arc(75, 35, 10+tol, Math.PI, 0, true); +ctx.fill(); + +_assertPixel(canvas, 17,6, 0,255,0,255, "17,6", "0,255,0,255"); +_assertPixel(canvas, 25,6, 0,255,0,255, "25,6", "0,255,0,255"); +_assertPixel(canvas, 32,6, 0,255,0,255, "32,6", "0,255,0,255"); +_assertPixel(canvas, 17,43, 0,255,0,255, "17,43", "0,255,0,255"); +_assertPixel(canvas, 25,43, 0,255,0,255, "25,43", "0,255,0,255"); +_assertPixel(canvas, 32,43, 0,255,0,255, "32,43", "0,255,0,255"); + +_assertPixel(canvas, 67,6, 0,255,0,255, "67,6", "0,255,0,255"); +_assertPixel(canvas, 75,6, 0,255,0,255, "75,6", "0,255,0,255"); +_assertPixel(canvas, 82,6, 0,255,0,255, "82,6", "0,255,0,255"); +_assertPixel(canvas, 67,43, 0,255,0,255, "67,43", "0,255,0,255"); +_assertPixel(canvas, 75,43, 0,255,0,255, "75,43", "0,255,0,255"); +_assertPixel(canvas, 82,43, 0,255,0,255, "82,43", "0,255,0,255"); + + +}); +</script> + diff --git a/testing/web-platform/tests/2dcontext/line-styles/2d.line.cap.square.html b/testing/web-platform/tests/2dcontext/line-styles/2d.line.cap.square.html new file mode 100644 index 000000000..ea1e4d949 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/line-styles/2d.line.cap.square.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.line.cap.square</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.line.cap.square</h1> +<p class="desc">lineCap 'square' is 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> +<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("lineCap 'square' is rendered correctly"); +_addTest(function(canvas, ctx) { + +ctx.fillStyle = '#0f0'; +ctx.fillRect(0, 0, 100, 50); + +ctx.lineCap = 'square'; +ctx.lineWidth = 20; + +ctx.fillStyle = '#f00'; +ctx.strokeStyle = '#0f0'; +ctx.fillRect(15, 5, 20, 40); +ctx.beginPath(); +ctx.moveTo(25, 15); +ctx.lineTo(25, 35); +ctx.stroke(); + +ctx.fillStyle = '#0f0'; +ctx.strokeStyle = '#f00'; +ctx.beginPath(); +ctx.moveTo(75, 15); +ctx.lineTo(75, 35); +ctx.stroke(); +ctx.fillRect(65, 5, 20, 40); + +_assertPixel(canvas, 25,4, 0,255,0,255, "25,4", "0,255,0,255"); +_assertPixel(canvas, 25,5, 0,255,0,255, "25,5", "0,255,0,255"); +_assertPixel(canvas, 25,6, 0,255,0,255, "25,6", "0,255,0,255"); +_assertPixel(canvas, 25,44, 0,255,0,255, "25,44", "0,255,0,255"); +_assertPixel(canvas, 25,45, 0,255,0,255, "25,45", "0,255,0,255"); +_assertPixel(canvas, 25,46, 0,255,0,255, "25,46", "0,255,0,255"); + +_assertPixel(canvas, 75,4, 0,255,0,255, "75,4", "0,255,0,255"); +_assertPixel(canvas, 75,5, 0,255,0,255, "75,5", "0,255,0,255"); +_assertPixel(canvas, 75,6, 0,255,0,255, "75,6", "0,255,0,255"); +_assertPixel(canvas, 75,44, 0,255,0,255, "75,44", "0,255,0,255"); +_assertPixel(canvas, 75,45, 0,255,0,255, "75,45", "0,255,0,255"); +_assertPixel(canvas, 75,46, 0,255,0,255, "75,46", "0,255,0,255"); + + +}); +</script> + diff --git a/testing/web-platform/tests/2dcontext/line-styles/2d.line.cap.valid.html b/testing/web-platform/tests/2dcontext/line-styles/2d.line.cap.valid.html new file mode 100644 index 000000000..6ac119d4a --- /dev/null +++ b/testing/web-platform/tests/2dcontext/line-styles/2d.line.cap.valid.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.line.cap.valid</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.line.cap.valid</h1> +<p class="desc">Setting lineCap to valid values works</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("Setting lineCap to valid values works"); +_addTest(function(canvas, ctx) { + +ctx.lineCap = 'butt' +_assertSame(ctx.lineCap, 'butt', "ctx.lineCap", "'butt'"); + +ctx.lineCap = 'round'; +_assertSame(ctx.lineCap, 'round', "ctx.lineCap", "'round'"); + +ctx.lineCap = 'square'; +_assertSame(ctx.lineCap, 'square', "ctx.lineCap", "'square'"); + + +}); +</script> + diff --git a/testing/web-platform/tests/2dcontext/line-styles/2d.line.cross.html b/testing/web-platform/tests/2dcontext/line-styles/2d.line.cross.html new file mode 100644 index 000000000..61b2125c4 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/line-styles/2d.line.cross.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.line.cross</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.line.cross</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.lineWidth = 200; +ctx.lineJoin = 'bevel'; + +ctx.strokeStyle = '#f00'; +ctx.beginPath(); +ctx.moveTo(110, 50); +ctx.lineTo(110, 60); +ctx.lineTo(100, 60); +ctx.stroke(); + +_assertPixel(canvas, 1,1, 0,255,0,255, "1,1", "0,255,0,255"); +_assertPixel(canvas, 48,1, 0,255,0,255, "48,1", "0,255,0,255"); +_assertPixel(canvas, 48,48, 0,255,0,255, "48,48", "0,255,0,255"); +_assertPixel(canvas, 1,48, 0,255,0,255, "1,48", "0,255,0,255"); + + +}); +</script> + diff --git a/testing/web-platform/tests/2dcontext/line-styles/2d.line.defaults.html b/testing/web-platform/tests/2dcontext/line-styles/2d.line.defaults.html new file mode 100644 index 000000000..8b680785d --- /dev/null +++ b/testing/web-platform/tests/2dcontext/line-styles/2d.line.defaults.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.line.defaults</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.line.defaults</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) { + +_assertSame(ctx.lineWidth, 1, "ctx.lineWidth", "1"); +_assertSame(ctx.lineCap, 'butt', "ctx.lineCap", "'butt'"); +_assertSame(ctx.lineJoin, 'miter', "ctx.lineJoin", "'miter'"); +_assertSame(ctx.miterLimit, 10, "ctx.miterLimit", "10"); + + +}); +</script> + diff --git a/testing/web-platform/tests/2dcontext/line-styles/2d.line.join.bevel.html b/testing/web-platform/tests/2dcontext/line-styles/2d.line.join.bevel.html new file mode 100644 index 000000000..72c0186e1 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/line-styles/2d.line.join.bevel.html @@ -0,0 +1,80 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.line.join.bevel</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.line.join.bevel</h1> +<p class="desc">lineJoin 'bevel' is 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> +<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("lineJoin 'bevel' is rendered correctly"); +_addTest(function(canvas, ctx) { + +ctx.fillStyle = '#0f0'; +ctx.fillRect(0, 0, 100, 50); + +var tol = 1; // tolerance to avoid antialiasing artifacts + +ctx.lineJoin = 'bevel'; +ctx.lineWidth = 20; + +ctx.fillStyle = '#f00'; +ctx.strokeStyle = '#0f0'; + +ctx.fillRect(10, 10, 20, 20); +ctx.fillRect(20, 20, 20, 20); +ctx.beginPath(); +ctx.moveTo(30, 20); +ctx.lineTo(40-tol, 20); +ctx.lineTo(30, 10+tol); +ctx.fill(); + +ctx.beginPath(); +ctx.moveTo(10, 20); +ctx.lineTo(30, 20); +ctx.lineTo(30, 40); +ctx.stroke(); + + +ctx.fillStyle = '#0f0'; +ctx.strokeStyle = '#f00'; + +ctx.beginPath(); +ctx.moveTo(60, 20); +ctx.lineTo(80, 20); +ctx.lineTo(80, 40); +ctx.stroke(); + +ctx.fillRect(60, 10, 20, 20); +ctx.fillRect(70, 20, 20, 20); +ctx.beginPath(); +ctx.moveTo(80, 20); +ctx.lineTo(90+tol, 20); +ctx.lineTo(80, 10-tol); +ctx.fill(); + +_assertPixel(canvas, 34,16, 0,255,0,255, "34,16", "0,255,0,255"); +_assertPixel(canvas, 34,15, 0,255,0,255, "34,15", "0,255,0,255"); +_assertPixel(canvas, 35,15, 0,255,0,255, "35,15", "0,255,0,255"); +_assertPixel(canvas, 36,15, 0,255,0,255, "36,15", "0,255,0,255"); +_assertPixel(canvas, 36,14, 0,255,0,255, "36,14", "0,255,0,255"); + +_assertPixel(canvas, 84,16, 0,255,0,255, "84,16", "0,255,0,255"); +_assertPixel(canvas, 84,15, 0,255,0,255, "84,15", "0,255,0,255"); +_assertPixel(canvas, 85,15, 0,255,0,255, "85,15", "0,255,0,255"); +_assertPixel(canvas, 86,15, 0,255,0,255, "86,15", "0,255,0,255"); +_assertPixel(canvas, 86,14, 0,255,0,255, "86,14", "0,255,0,255"); + + +}); +</script> + diff --git a/testing/web-platform/tests/2dcontext/line-styles/2d.line.join.closed.html b/testing/web-platform/tests/2dcontext/line-styles/2d.line.join.closed.html new file mode 100644 index 000000000..1f2bf5cb7 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/line-styles/2d.line.join.closed.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.line.join.closed</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.line.join.closed</h1> +<p class="desc">Line joins are drawn at the corner of a closed rectangle</p> + + +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> +<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +var t = async_test("Line joins are drawn at the corner of a closed rectangle"); +_addTest(function(canvas, ctx) { + +ctx.fillStyle = '#f00'; +ctx.strokeStyle = '#0f0'; +ctx.fillRect(0, 0, 100, 50); + +ctx.lineJoin = 'miter'; +ctx.lineWidth = 200; + +ctx.beginPath(); +ctx.moveTo(100, 50); +ctx.lineTo(100, 1000); +ctx.lineTo(1000, 1000); +ctx.lineTo(1000, 50); +ctx.closePath(); +ctx.stroke(); + +_assertPixel(canvas, 1,1, 0,255,0,255, "1,1", "0,255,0,255"); +_assertPixel(canvas, 48,1, 0,255,0,255, "48,1", "0,255,0,255"); +_assertPixel(canvas, 48,48, 0,255,0,255, "48,48", "0,255,0,255"); +_assertPixel(canvas, 1,48, 0,255,0,255, "1,48", "0,255,0,255"); + + +}); +</script> + diff --git a/testing/web-platform/tests/2dcontext/line-styles/2d.line.join.invalid.html b/testing/web-platform/tests/2dcontext/line-styles/2d.line.join.invalid.html new file mode 100644 index 000000000..9d54d90b1 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/line-styles/2d.line.join.invalid.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.line.join.invalid</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.line.join.invalid</h1> +<p class="desc">Setting lineJoin to invalid values 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> + +<ul id="d"></ul> +<script> +var t = async_test("Setting lineJoin to invalid values is ignored"); +_addTest(function(canvas, ctx) { + +ctx.lineJoin = 'bevel' +_assertSame(ctx.lineJoin, 'bevel', "ctx.lineJoin", "'bevel'"); + +ctx.lineJoin = 'bevel'; +ctx.lineJoin = 'invalid'; +_assertSame(ctx.lineJoin, 'bevel', "ctx.lineJoin", "'bevel'"); + +ctx.lineJoin = 'bevel'; +ctx.lineJoin = 'ROUND'; +_assertSame(ctx.lineJoin, 'bevel', "ctx.lineJoin", "'bevel'"); + +ctx.lineJoin = 'bevel'; +ctx.lineJoin = 'round\0'; +_assertSame(ctx.lineJoin, 'bevel', "ctx.lineJoin", "'bevel'"); + +ctx.lineJoin = 'bevel'; +ctx.lineJoin = 'round '; +_assertSame(ctx.lineJoin, 'bevel', "ctx.lineJoin", "'bevel'"); + +ctx.lineJoin = 'bevel'; +ctx.lineJoin = ""; +_assertSame(ctx.lineJoin, 'bevel', "ctx.lineJoin", "'bevel'"); + +ctx.lineJoin = 'bevel'; +ctx.lineJoin = 'butt'; +_assertSame(ctx.lineJoin, 'bevel', "ctx.lineJoin", "'bevel'"); + + +}); +</script> + diff --git a/testing/web-platform/tests/2dcontext/line-styles/2d.line.join.miter.html b/testing/web-platform/tests/2dcontext/line-styles/2d.line.join.miter.html new file mode 100644 index 000000000..8a6d4a60e --- /dev/null +++ b/testing/web-platform/tests/2dcontext/line-styles/2d.line.join.miter.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.line.join.miter</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.line.join.miter</h1> +<p class="desc">lineJoin 'miter' is 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> +<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("lineJoin 'miter' is rendered correctly"); +_addTest(function(canvas, ctx) { + +ctx.fillStyle = '#0f0'; +ctx.fillRect(0, 0, 100, 50); + +ctx.lineJoin = 'miter'; +ctx.lineWidth = 20; + +ctx.fillStyle = '#f00'; +ctx.strokeStyle = '#0f0'; + +ctx.fillStyle = '#f00'; +ctx.strokeStyle = '#0f0'; + +ctx.fillRect(10, 10, 30, 20); +ctx.fillRect(20, 10, 20, 30); + +ctx.beginPath(); +ctx.moveTo(10, 20); +ctx.lineTo(30, 20); +ctx.lineTo(30, 40); +ctx.stroke(); + + +ctx.fillStyle = '#0f0'; +ctx.strokeStyle = '#f00'; + +ctx.beginPath(); +ctx.moveTo(60, 20); +ctx.lineTo(80, 20); +ctx.lineTo(80, 40); +ctx.stroke(); + +ctx.fillRect(60, 10, 30, 20); +ctx.fillRect(70, 10, 20, 30); + +_assertPixel(canvas, 38,12, 0,255,0,255, "38,12", "0,255,0,255"); +_assertPixel(canvas, 39,11, 0,255,0,255, "39,11", "0,255,0,255"); +_assertPixel(canvas, 40,10, 0,255,0,255, "40,10", "0,255,0,255"); +_assertPixel(canvas, 41,9, 0,255,0,255, "41,9", "0,255,0,255"); +_assertPixel(canvas, 42,8, 0,255,0,255, "42,8", "0,255,0,255"); + +_assertPixel(canvas, 88,12, 0,255,0,255, "88,12", "0,255,0,255"); +_assertPixel(canvas, 89,11, 0,255,0,255, "89,11", "0,255,0,255"); +_assertPixel(canvas, 90,10, 0,255,0,255, "90,10", "0,255,0,255"); +_assertPixel(canvas, 91,9, 0,255,0,255, "91,9", "0,255,0,255"); +_assertPixel(canvas, 92,8, 0,255,0,255, "92,8", "0,255,0,255"); + + +}); +</script> + diff --git a/testing/web-platform/tests/2dcontext/line-styles/2d.line.join.open.html b/testing/web-platform/tests/2dcontext/line-styles/2d.line.join.open.html new file mode 100644 index 000000000..a72291bc3 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/line-styles/2d.line.join.open.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.line.join.open</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.line.join.open</h1> +<p class="desc">Line joins are not drawn at the corner of an unclosed rectangle</p> + + +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> +<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +var t = async_test("Line joins are not drawn at the corner of an unclosed rectangle"); +_addTest(function(canvas, ctx) { + +ctx.fillStyle = '#0f0'; +ctx.strokeStyle = '#f00'; +ctx.fillRect(0, 0, 100, 50); + +ctx.lineJoin = 'miter'; +ctx.lineWidth = 200; + +ctx.beginPath(); +ctx.moveTo(100, 50); +ctx.lineTo(100, 1000); +ctx.lineTo(1000, 1000); +ctx.lineTo(1000, 50); +ctx.lineTo(100, 50); +ctx.stroke(); + +_assertPixel(canvas, 1,1, 0,255,0,255, "1,1", "0,255,0,255"); +_assertPixel(canvas, 48,1, 0,255,0,255, "48,1", "0,255,0,255"); +_assertPixel(canvas, 48,48, 0,255,0,255, "48,48", "0,255,0,255"); +_assertPixel(canvas, 1,48, 0,255,0,255, "1,48", "0,255,0,255"); + + +}); +</script> + diff --git a/testing/web-platform/tests/2dcontext/line-styles/2d.line.join.parallel.html b/testing/web-platform/tests/2dcontext/line-styles/2d.line.join.parallel.html new file mode 100644 index 000000000..2a8956d7e --- /dev/null +++ b/testing/web-platform/tests/2dcontext/line-styles/2d.line.join.parallel.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.line.join.parallel</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.line.join.parallel</h1> +<p class="desc">Line joins are drawn at 180-degree joins</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("Line joins are drawn at 180-degree joins"); +_addTest(function(canvas, ctx) { + +ctx.fillStyle = '#f00'; +ctx.fillRect(0, 0, 100, 50); + +ctx.strokeStyle = '#0f0'; +ctx.lineWidth = 300; +ctx.lineJoin = 'round'; +ctx.beginPath(); +ctx.moveTo(-100, 25); +ctx.lineTo(0, 25); +ctx.lineTo(-100, 25); +ctx.stroke(); + +_assertPixel(canvas, 1,1, 0,255,0,255, "1,1", "0,255,0,255"); +_assertPixel(canvas, 48,1, 0,255,0,255, "48,1", "0,255,0,255"); +_assertPixel(canvas, 48,48, 0,255,0,255, "48,48", "0,255,0,255"); +_assertPixel(canvas, 1,48, 0,255,0,255, "1,48", "0,255,0,255"); + + +}); +</script> + diff --git a/testing/web-platform/tests/2dcontext/line-styles/2d.line.join.round.html b/testing/web-platform/tests/2dcontext/line-styles/2d.line.join.round.html new file mode 100644 index 000000000..4a827adce --- /dev/null +++ b/testing/web-platform/tests/2dcontext/line-styles/2d.line.join.round.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.line.join.round</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.line.join.round</h1> +<p class="desc">lineJoin 'round' is 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> +<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("lineJoin 'round' is rendered correctly"); +_addTest(function(canvas, ctx) { + +ctx.fillStyle = '#0f0'; +ctx.fillRect(0, 0, 100, 50); + +var tol = 1; // tolerance to avoid antialiasing artifacts + +ctx.lineJoin = 'round'; +ctx.lineWidth = 20; + +ctx.fillStyle = '#f00'; +ctx.strokeStyle = '#0f0'; + +ctx.fillRect(10, 10, 20, 20); +ctx.fillRect(20, 20, 20, 20); +ctx.beginPath(); +ctx.moveTo(30, 20); +ctx.arc(30, 20, 10-tol, 0, 2*Math.PI, true); +ctx.fill(); + +ctx.beginPath(); +ctx.moveTo(10, 20); +ctx.lineTo(30, 20); +ctx.lineTo(30, 40); +ctx.stroke(); + + +ctx.fillStyle = '#0f0'; +ctx.strokeStyle = '#f00'; + +ctx.beginPath(); +ctx.moveTo(60, 20); +ctx.lineTo(80, 20); +ctx.lineTo(80, 40); +ctx.stroke(); + +ctx.fillRect(60, 10, 20, 20); +ctx.fillRect(70, 20, 20, 20); +ctx.beginPath(); +ctx.moveTo(80, 20); +ctx.arc(80, 20, 10+tol, 0, 2*Math.PI, true); +ctx.fill(); + +_assertPixel(canvas, 36,14, 0,255,0,255, "36,14", "0,255,0,255"); +_assertPixel(canvas, 36,13, 0,255,0,255, "36,13", "0,255,0,255"); +_assertPixel(canvas, 37,13, 0,255,0,255, "37,13", "0,255,0,255"); +_assertPixel(canvas, 38,13, 0,255,0,255, "38,13", "0,255,0,255"); +_assertPixel(canvas, 38,12, 0,255,0,255, "38,12", "0,255,0,255"); + +_assertPixel(canvas, 86,14, 0,255,0,255, "86,14", "0,255,0,255"); +_assertPixel(canvas, 86,13, 0,255,0,255, "86,13", "0,255,0,255"); +_assertPixel(canvas, 87,13, 0,255,0,255, "87,13", "0,255,0,255"); +_assertPixel(canvas, 88,13, 0,255,0,255, "88,13", "0,255,0,255"); +_assertPixel(canvas, 88,12, 0,255,0,255, "88,12", "0,255,0,255"); + + +}); +</script> + diff --git a/testing/web-platform/tests/2dcontext/line-styles/2d.line.join.valid.html b/testing/web-platform/tests/2dcontext/line-styles/2d.line.join.valid.html new file mode 100644 index 000000000..98fec4cb7 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/line-styles/2d.line.join.valid.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.line.join.valid</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.line.join.valid</h1> +<p class="desc">Setting lineJoin to valid values works</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("Setting lineJoin to valid values works"); +_addTest(function(canvas, ctx) { + +ctx.lineJoin = 'bevel' +_assertSame(ctx.lineJoin, 'bevel', "ctx.lineJoin", "'bevel'"); + +ctx.lineJoin = 'round'; +_assertSame(ctx.lineJoin, 'round', "ctx.lineJoin", "'round'"); + +ctx.lineJoin = 'miter'; +_assertSame(ctx.lineJoin, 'miter', "ctx.lineJoin", "'miter'"); + + +}); +</script> + diff --git a/testing/web-platform/tests/2dcontext/line-styles/2d.line.miter.acute.html b/testing/web-platform/tests/2dcontext/line-styles/2d.line.miter.acute.html new file mode 100644 index 000000000..f11a32164 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/line-styles/2d.line.miter.acute.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.line.miter.acute</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.line.miter.acute</h1> +<p class="desc">Miter joins are drawn correctly with acute angles</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("Miter joins are drawn correctly with acute angles"); +_addTest(function(canvas, ctx) { + +ctx.fillStyle = '#f00'; +ctx.fillRect(0, 0, 100, 50); + +ctx.lineWidth = 200; +ctx.lineJoin = 'miter'; + +ctx.strokeStyle = '#0f0'; +ctx.miterLimit = 2.614; +ctx.beginPath(); +ctx.moveTo(100, 1000); +ctx.lineTo(100, 100); +ctx.lineTo(1000, 1000); +ctx.stroke(); + +ctx.strokeStyle = '#f00'; +ctx.miterLimit = 2.613; +ctx.beginPath(); +ctx.moveTo(100, 1000); +ctx.lineTo(100, 100); +ctx.lineTo(1000, 1000); +ctx.stroke(); + +_assertPixel(canvas, 1,1, 0,255,0,255, "1,1", "0,255,0,255"); +_assertPixel(canvas, 48,1, 0,255,0,255, "48,1", "0,255,0,255"); +_assertPixel(canvas, 48,48, 0,255,0,255, "48,48", "0,255,0,255"); +_assertPixel(canvas, 1,48, 0,255,0,255, "1,48", "0,255,0,255"); + + +}); +</script> + diff --git a/testing/web-platform/tests/2dcontext/line-styles/2d.line.miter.exceeded.html b/testing/web-platform/tests/2dcontext/line-styles/2d.line.miter.exceeded.html new file mode 100644 index 000000000..1cbcd3cad --- /dev/null +++ b/testing/web-platform/tests/2dcontext/line-styles/2d.line.miter.exceeded.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.line.miter.exceeded</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.line.miter.exceeded</h1> +<p class="desc">Miter joins are not drawn when the miter limit is exceeded</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("Miter joins are not drawn when the miter limit is exceeded"); +_addTest(function(canvas, ctx) { + +ctx.fillStyle = '#0f0'; +ctx.fillRect(0, 0, 100, 50); + +ctx.lineWidth = 400; +ctx.lineJoin = 'miter'; + +ctx.strokeStyle = '#f00'; +ctx.miterLimit = 1.414; +ctx.beginPath(); +ctx.moveTo(200, 1000); +ctx.lineTo(200, 200); +ctx.lineTo(1000, 201); // slightly non-right-angle to avoid being a special case +ctx.stroke(); + +_assertPixel(canvas, 1,1, 0,255,0,255, "1,1", "0,255,0,255"); +_assertPixel(canvas, 48,1, 0,255,0,255, "48,1", "0,255,0,255"); +_assertPixel(canvas, 48,48, 0,255,0,255, "48,48", "0,255,0,255"); +_assertPixel(canvas, 1,48, 0,255,0,255, "1,48", "0,255,0,255"); + + +}); +</script> + diff --git a/testing/web-platform/tests/2dcontext/line-styles/2d.line.miter.invalid.html b/testing/web-platform/tests/2dcontext/line-styles/2d.line.miter.invalid.html new file mode 100644 index 000000000..4f7fd69bc --- /dev/null +++ b/testing/web-platform/tests/2dcontext/line-styles/2d.line.miter.invalid.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.line.miter.invalid</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.line.miter.invalid</h1> +<p class="desc">Setting miterLimit to invalid values 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> + +<ul id="d"></ul> +<script> +var t = async_test("Setting miterLimit to invalid values is ignored"); +_addTest(function(canvas, ctx) { + +ctx.miterLimit = 1.5; +_assertSame(ctx.miterLimit, 1.5, "ctx.miterLimit", "1.5"); + +ctx.miterLimit = 1.5; +ctx.miterLimit = 0; +_assertSame(ctx.miterLimit, 1.5, "ctx.miterLimit", "1.5"); + +ctx.miterLimit = 1.5; +ctx.miterLimit = -1; +_assertSame(ctx.miterLimit, 1.5, "ctx.miterLimit", "1.5"); + +ctx.miterLimit = 1.5; +ctx.miterLimit = Infinity; +_assertSame(ctx.miterLimit, 1.5, "ctx.miterLimit", "1.5"); + +ctx.miterLimit = 1.5; +ctx.miterLimit = -Infinity; +_assertSame(ctx.miterLimit, 1.5, "ctx.miterLimit", "1.5"); + +ctx.miterLimit = 1.5; +ctx.miterLimit = NaN; +_assertSame(ctx.miterLimit, 1.5, "ctx.miterLimit", "1.5"); + + +}); +</script> + diff --git a/testing/web-platform/tests/2dcontext/line-styles/2d.line.miter.lineedge.html b/testing/web-platform/tests/2dcontext/line-styles/2d.line.miter.lineedge.html new file mode 100644 index 000000000..54c2ce539 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/line-styles/2d.line.miter.lineedge.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.line.miter.lineedge</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.line.miter.lineedge</h1> +<p class="desc">Miter joins are not drawn when the miter limit is exceeded at the corners of a zero-height rectangle</p> + + +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> +<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +var t = async_test("Miter joins are not drawn when the miter limit is exceeded at the corners of a zero-height rectangle"); +_addTest(function(canvas, ctx) { + +ctx.fillStyle = '#0f0'; +ctx.fillRect(0, 0, 100, 50); + +ctx.lineWidth = 200; +ctx.lineJoin = 'miter'; + +ctx.strokeStyle = '#f00'; +ctx.miterLimit = 1.414; +ctx.beginPath(); +ctx.strokeRect(100, 25, 200, 0); + +_assertPixel(canvas, 1,1, 0,255,0,255, "1,1", "0,255,0,255"); +_assertPixel(canvas, 48,1, 0,255,0,255, "48,1", "0,255,0,255"); +_assertPixel(canvas, 48,48, 0,255,0,255, "48,48", "0,255,0,255"); +_assertPixel(canvas, 1,48, 0,255,0,255, "1,48", "0,255,0,255"); + + +}); +</script> + diff --git a/testing/web-platform/tests/2dcontext/line-styles/2d.line.miter.obtuse.html b/testing/web-platform/tests/2dcontext/line-styles/2d.line.miter.obtuse.html new file mode 100644 index 000000000..40ebdd1f8 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/line-styles/2d.line.miter.obtuse.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.line.miter.obtuse</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.line.miter.obtuse</h1> +<p class="desc">Miter joins are drawn correctly with obtuse angles</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("Miter joins are drawn correctly with obtuse angles"); +_addTest(function(canvas, ctx) { + +ctx.fillStyle = '#f00'; +ctx.fillRect(0, 0, 100, 50); + +ctx.lineWidth = 1600; +ctx.lineJoin = 'miter'; + +ctx.strokeStyle = '#0f0'; +ctx.miterLimit = 1.083; +ctx.beginPath(); +ctx.moveTo(800, 10000); +ctx.lineTo(800, 300); +ctx.lineTo(10000, -8900); +ctx.stroke(); + +ctx.strokeStyle = '#f00'; +ctx.miterLimit = 1.082; +ctx.beginPath(); +ctx.moveTo(800, 10000); +ctx.lineTo(800, 300); +ctx.lineTo(10000, -8900); +ctx.stroke(); + +_assertPixel(canvas, 1,1, 0,255,0,255, "1,1", "0,255,0,255"); +_assertPixel(canvas, 48,1, 0,255,0,255, "48,1", "0,255,0,255"); +_assertPixel(canvas, 48,48, 0,255,0,255, "48,48", "0,255,0,255"); +_assertPixel(canvas, 1,48, 0,255,0,255, "1,48", "0,255,0,255"); + + +}); +</script> + diff --git a/testing/web-platform/tests/2dcontext/line-styles/2d.line.miter.rightangle.html b/testing/web-platform/tests/2dcontext/line-styles/2d.line.miter.rightangle.html new file mode 100644 index 000000000..ebcfb261a --- /dev/null +++ b/testing/web-platform/tests/2dcontext/line-styles/2d.line.miter.rightangle.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.line.miter.rightangle</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.line.miter.rightangle</h1> +<p class="desc">Miter joins are not drawn when the miter limit is exceeded, on exact right angles</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("Miter joins are not drawn when the miter limit is exceeded, on exact right angles"); +_addTest(function(canvas, ctx) { + +ctx.fillStyle = '#0f0'; +ctx.fillRect(0, 0, 100, 50); + +ctx.lineWidth = 400; +ctx.lineJoin = 'miter'; + +ctx.strokeStyle = '#f00'; +ctx.miterLimit = 1.414; +ctx.beginPath(); +ctx.moveTo(200, 1000); +ctx.lineTo(200, 200); +ctx.lineTo(1000, 200); +ctx.stroke(); + +_assertPixel(canvas, 1,1, 0,255,0,255, "1,1", "0,255,0,255"); +_assertPixel(canvas, 48,1, 0,255,0,255, "48,1", "0,255,0,255"); +_assertPixel(canvas, 48,48, 0,255,0,255, "48,48", "0,255,0,255"); +_assertPixel(canvas, 1,48, 0,255,0,255, "1,48", "0,255,0,255"); + + +}); +</script> + diff --git a/testing/web-platform/tests/2dcontext/line-styles/2d.line.miter.valid.html b/testing/web-platform/tests/2dcontext/line-styles/2d.line.miter.valid.html new file mode 100644 index 000000000..59148aa56 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/line-styles/2d.line.miter.valid.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.line.miter.valid</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.line.miter.valid</h1> +<p class="desc">Setting miterLimit to valid values works</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("Setting miterLimit to valid values works"); +_addTest(function(canvas, ctx) { + +ctx.miterLimit = 1.5; +_assertSame(ctx.miterLimit, 1.5, "ctx.miterLimit", "1.5"); + +ctx.miterLimit = "1e1"; +_assertSame(ctx.miterLimit, 10, "ctx.miterLimit", "10"); + +ctx.miterLimit = 1/1024; +_assertSame(ctx.miterLimit, 1/1024, "ctx.miterLimit", "1/1024"); + +ctx.miterLimit = 1000; +_assertSame(ctx.miterLimit, 1000, "ctx.miterLimit", "1000"); + + +}); +</script> + diff --git a/testing/web-platform/tests/2dcontext/line-styles/2d.line.miter.within.html b/testing/web-platform/tests/2dcontext/line-styles/2d.line.miter.within.html new file mode 100644 index 000000000..5ed57e0cc --- /dev/null +++ b/testing/web-platform/tests/2dcontext/line-styles/2d.line.miter.within.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.line.miter.within</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.line.miter.within</h1> +<p class="desc">Miter joins are drawn when the miter limit is not quite exceeded</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("Miter joins are drawn when the miter limit is not quite exceeded"); +_addTest(function(canvas, ctx) { + +ctx.fillStyle = '#f00'; +ctx.fillRect(0, 0, 100, 50); + +ctx.lineWidth = 400; +ctx.lineJoin = 'miter'; + +ctx.strokeStyle = '#0f0'; +ctx.miterLimit = 1.416; +ctx.beginPath(); +ctx.moveTo(200, 1000); +ctx.lineTo(200, 200); +ctx.lineTo(1000, 201); +ctx.stroke(); + +_assertPixel(canvas, 1,1, 0,255,0,255, "1,1", "0,255,0,255"); +_assertPixel(canvas, 48,1, 0,255,0,255, "48,1", "0,255,0,255"); +_assertPixel(canvas, 48,48, 0,255,0,255, "48,48", "0,255,0,255"); +_assertPixel(canvas, 1,48, 0,255,0,255, "1,48", "0,255,0,255"); + + +}); +</script> + diff --git a/testing/web-platform/tests/2dcontext/line-styles/2d.line.union.html b/testing/web-platform/tests/2dcontext/line-styles/2d.line.union.html new file mode 100644 index 000000000..92fa2f1a2 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/line-styles/2d.line.union.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.line.union</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.line.union</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.lineWidth = 100; +ctx.lineCap = 'round'; + +ctx.strokeStyle = '#0f0'; +ctx.beginPath(); +ctx.moveTo(0, 24); +ctx.lineTo(100, 25); +ctx.lineTo(0, 26); +ctx.closePath(); +ctx.stroke(); + +_assertPixel(canvas, 1,1, 0,255,0,255, "1,1", "0,255,0,255"); +_assertPixel(canvas, 25,1, 0,255,0,255, "25,1", "0,255,0,255"); +_assertPixel(canvas, 48,1, 0,255,0,255, "48,1", "0,255,0,255"); +_assertPixel(canvas, 1,48, 0,255,0,255, "1,48", "0,255,0,255"); +_assertPixel(canvas, 25,1, 0,255,0,255, "25,1", "0,255,0,255"); +_assertPixel(canvas, 48,48, 0,255,0,255, "48,48", "0,255,0,255"); + + +}); +</script> + diff --git a/testing/web-platform/tests/2dcontext/line-styles/2d.line.width.basic.html b/testing/web-platform/tests/2dcontext/line-styles/2d.line.width.basic.html new file mode 100644 index 000000000..b61baaf24 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/line-styles/2d.line.width.basic.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.line.width.basic</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.line.width.basic</h1> +<p class="desc">lineWidth determines the width of line strokes</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("lineWidth determines the width of line strokes"); +_addTest(function(canvas, ctx) { + +ctx.fillStyle = '#0f0'; +ctx.fillRect(0, 0, 100, 50); + +ctx.lineWidth = 20; +// Draw a green line over a red box, to check the line is not too small +ctx.fillStyle = '#f00'; +ctx.strokeStyle = '#0f0'; +ctx.fillRect(15, 15, 20, 20); +ctx.beginPath(); +ctx.moveTo(25, 15); +ctx.lineTo(25, 35); +ctx.stroke(); + +// Draw a green box over a red line, to check the line is not too large +ctx.fillStyle = '#0f0'; +ctx.strokeStyle = '#f00'; +ctx.beginPath(); +ctx.moveTo(75, 15); +ctx.lineTo(75, 35); +ctx.stroke(); +ctx.fillRect(65, 15, 20, 20); + +_assertPixel(canvas, 14,25, 0,255,0,255, "14,25", "0,255,0,255"); +_assertPixel(canvas, 15,25, 0,255,0,255, "15,25", "0,255,0,255"); +_assertPixel(canvas, 16,25, 0,255,0,255, "16,25", "0,255,0,255"); +_assertPixel(canvas, 25,25, 0,255,0,255, "25,25", "0,255,0,255"); +_assertPixel(canvas, 34,25, 0,255,0,255, "34,25", "0,255,0,255"); +_assertPixel(canvas, 35,25, 0,255,0,255, "35,25", "0,255,0,255"); +_assertPixel(canvas, 36,25, 0,255,0,255, "36,25", "0,255,0,255"); + +_assertPixel(canvas, 64,25, 0,255,0,255, "64,25", "0,255,0,255"); +_assertPixel(canvas, 65,25, 0,255,0,255, "65,25", "0,255,0,255"); +_assertPixel(canvas, 66,25, 0,255,0,255, "66,25", "0,255,0,255"); +_assertPixel(canvas, 75,25, 0,255,0,255, "75,25", "0,255,0,255"); +_assertPixel(canvas, 84,25, 0,255,0,255, "84,25", "0,255,0,255"); +_assertPixel(canvas, 85,25, 0,255,0,255, "85,25", "0,255,0,255"); +_assertPixel(canvas, 86,25, 0,255,0,255, "86,25", "0,255,0,255"); + + +}); +</script> + diff --git a/testing/web-platform/tests/2dcontext/line-styles/2d.line.width.invalid.html b/testing/web-platform/tests/2dcontext/line-styles/2d.line.width.invalid.html new file mode 100644 index 000000000..d5cd3ab0a --- /dev/null +++ b/testing/web-platform/tests/2dcontext/line-styles/2d.line.width.invalid.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.line.width.invalid</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.line.width.invalid</h1> +<p class="desc">Setting lineWidth to invalid values 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> + +<ul id="d"></ul> +<script> +var t = async_test("Setting lineWidth to invalid values is ignored"); +_addTest(function(canvas, ctx) { + +ctx.lineWidth = 1.5; +_assertSame(ctx.lineWidth, 1.5, "ctx.lineWidth", "1.5"); + +ctx.lineWidth = 1.5; +ctx.lineWidth = 0; +_assertSame(ctx.lineWidth, 1.5, "ctx.lineWidth", "1.5"); + +ctx.lineWidth = 1.5; +ctx.lineWidth = -1; +_assertSame(ctx.lineWidth, 1.5, "ctx.lineWidth", "1.5"); + +ctx.lineWidth = 1.5; +ctx.lineWidth = Infinity; +_assertSame(ctx.lineWidth, 1.5, "ctx.lineWidth", "1.5"); + +ctx.lineWidth = 1.5; +ctx.lineWidth = -Infinity; +_assertSame(ctx.lineWidth, 1.5, "ctx.lineWidth", "1.5"); + +ctx.lineWidth = 1.5; +ctx.lineWidth = NaN; +_assertSame(ctx.lineWidth, 1.5, "ctx.lineWidth", "1.5"); + + +}); +</script> + diff --git a/testing/web-platform/tests/2dcontext/line-styles/2d.line.width.scaledefault.html b/testing/web-platform/tests/2dcontext/line-styles/2d.line.width.scaledefault.html new file mode 100644 index 000000000..154d7b582 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/line-styles/2d.line.width.scaledefault.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.line.width.scaledefault</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.line.width.scaledefault</h1> +<p class="desc">Default lineWidth strokes are affected by scale transformations</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("Default lineWidth strokes are affected by scale transformations"); +_addTest(function(canvas, ctx) { + +ctx.fillStyle = '#f00'; +ctx.fillRect(0, 0, 100, 50); + +ctx.scale(50, 50); +ctx.strokeStyle = '#0f0'; +ctx.moveTo(0, 0.5); +ctx.lineTo(2, 0.5); +ctx.stroke(); + +_assertPixel(canvas, 25,25, 0,255,0,255, "25,25", "0,255,0,255"); +_assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255"); +_assertPixel(canvas, 75,25, 0,255,0,255, "75,25", "0,255,0,255"); +_assertPixel(canvas, 50,5, 0,255,0,255, "50,5", "0,255,0,255"); +_assertPixel(canvas, 50,45, 0,255,0,255, "50,45", "0,255,0,255"); + + +}); +</script> + diff --git a/testing/web-platform/tests/2dcontext/line-styles/2d.line.width.transformed.html b/testing/web-platform/tests/2dcontext/line-styles/2d.line.width.transformed.html new file mode 100644 index 000000000..903321f44 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/line-styles/2d.line.width.transformed.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.line.width.transformed</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.line.width.transformed</h1> +<p class="desc">Line stroke widths are affected by scale transformations</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("Line stroke widths are affected by scale transformations"); +_addTest(function(canvas, ctx) { + +ctx.fillStyle = '#0f0'; +ctx.fillRect(0, 0, 100, 50); + +ctx.lineWidth = 4; +// Draw a green line over a red box, to check the line is not too small +ctx.fillStyle = '#f00'; +ctx.strokeStyle = '#0f0'; +ctx.fillRect(15, 15, 20, 20); +ctx.save(); + ctx.scale(5, 1); + ctx.beginPath(); + ctx.moveTo(5, 15); + ctx.lineTo(5, 35); + ctx.stroke(); +ctx.restore(); + +// Draw a green box over a red line, to check the line is not too large +ctx.fillStyle = '#0f0'; +ctx.strokeStyle = '#f00'; +ctx.save(); + ctx.scale(-5, 1); + ctx.beginPath(); + ctx.moveTo(-15, 15); + ctx.lineTo(-15, 35); + ctx.stroke(); +ctx.restore(); +ctx.fillRect(65, 15, 20, 20); + +_assertPixel(canvas, 14,25, 0,255,0,255, "14,25", "0,255,0,255"); +_assertPixel(canvas, 15,25, 0,255,0,255, "15,25", "0,255,0,255"); +_assertPixel(canvas, 16,25, 0,255,0,255, "16,25", "0,255,0,255"); +_assertPixel(canvas, 25,25, 0,255,0,255, "25,25", "0,255,0,255"); +_assertPixel(canvas, 34,25, 0,255,0,255, "34,25", "0,255,0,255"); +_assertPixel(canvas, 35,25, 0,255,0,255, "35,25", "0,255,0,255"); +_assertPixel(canvas, 36,25, 0,255,0,255, "36,25", "0,255,0,255"); + +_assertPixel(canvas, 64,25, 0,255,0,255, "64,25", "0,255,0,255"); +_assertPixel(canvas, 65,25, 0,255,0,255, "65,25", "0,255,0,255"); +_assertPixel(canvas, 66,25, 0,255,0,255, "66,25", "0,255,0,255"); +_assertPixel(canvas, 75,25, 0,255,0,255, "75,25", "0,255,0,255"); +_assertPixel(canvas, 84,25, 0,255,0,255, "84,25", "0,255,0,255"); +_assertPixel(canvas, 85,25, 0,255,0,255, "85,25", "0,255,0,255"); +_assertPixel(canvas, 86,25, 0,255,0,255, "86,25", "0,255,0,255"); + + +}); +</script> + diff --git a/testing/web-platform/tests/2dcontext/line-styles/2d.line.width.valid.html b/testing/web-platform/tests/2dcontext/line-styles/2d.line.width.valid.html new file mode 100644 index 000000000..c89fa56a6 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/line-styles/2d.line.width.valid.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.line.width.valid</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.line.width.valid</h1> +<p class="desc">Setting lineWidth to valid values works</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("Setting lineWidth to valid values works"); +_addTest(function(canvas, ctx) { + +ctx.lineWidth = 1.5; +_assertSame(ctx.lineWidth, 1.5, "ctx.lineWidth", "1.5"); + +ctx.lineWidth = "1e1"; +_assertSame(ctx.lineWidth, 10, "ctx.lineWidth", "10"); + +ctx.lineWidth = 1/1024; +_assertSame(ctx.lineWidth, 1/1024, "ctx.lineWidth", "1/1024"); + +ctx.lineWidth = 1000; +_assertSame(ctx.lineWidth, 1000, "ctx.lineWidth", "1000"); + + +}); +</script> + diff --git a/testing/web-platform/tests/2dcontext/line-styles/canvas_linestyles_linecap_001-ref.htm b/testing/web-platform/tests/2dcontext/line-styles/canvas_linestyles_linecap_001-ref.htm new file mode 100644 index 000000000..f85af9aab --- /dev/null +++ b/testing/web-platform/tests/2dcontext/line-styles/canvas_linestyles_linecap_001-ref.htm @@ -0,0 +1,11 @@ +<!doctype HTML> +<html> + <head> + <title>HTML5 Canvas Test: "square" lineCap</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com" /> + </head> + <body> + <p>Description: The square value of lineCap means that a rectangle with the length of the line width and the width of half the line width, placed flat against the edge perpendicular to the direction of the line, must be added at the end of each line.</p> + <div><img src='/images/black-rectangle.png' alt='black rect' /></div> + </body> +</html> diff --git a/testing/web-platform/tests/2dcontext/line-styles/canvas_linestyles_linecap_001.htm b/testing/web-platform/tests/2dcontext/line-styles/canvas_linestyles_linecap_001.htm new file mode 100644 index 000000000..583dbc9d1 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/line-styles/canvas_linestyles_linecap_001.htm @@ -0,0 +1,37 @@ +<!doctype HTML> +<html> + <head> + <title>HTML5 Canvas Test: "square" lineCap</title> + <link rel="match" href="canvas_linestyles_linecap_001-ref.htm"> + <link rel="author" title="Microsoft" href="http://www.microsoft.com" /> + <link rel="help" href="http://www.w3.org/TR/2dcontext/#dom-context-2d-linecap" /> + <meta name="assert" content="The square value of lineCap means that a rectangle with the length of the line width and the width of half the line width, placed flat against the edge perpendicular to the direction of the line, must be added at the end of each line." /> + <script type="text/javascript"> + function runTest() + { + var canvas = document.getElementById("canvas1"); + var ctx = canvas.getContext("2d"); + + // Draw the first red rectangle. + ctx.fillStyle ="rgba(255, 0, 0, 1.0)"; + ctx.fillRect(75, 0, 25, 50); + + // Draw second red rectangle. + ctx.fillRect(0, 0, 25, 50); + + // Draw a line with square lineCap. + ctx.strokeStyle = "rgba(0, 0, 0, 1.0)"; + ctx.lineWidth = 50; + ctx.lineCap = "square"; + ctx.beginPath(); + ctx.moveTo(25, 25); + ctx.lineTo(75, 25); + ctx.stroke(); + } + </script> + </head> + <body onload="runTest()"> + <p>Description: The square value of lineCap means that a rectangle with the length of the line width and the width of half the line width, placed flat against the edge perpendicular to the direction of the line, must be added at the end of each line.</p> + <canvas id="canvas1" width="300" height="150">Browser does not support HTML5 Canvas.</canvas> + </body> +</html> diff --git a/testing/web-platform/tests/2dcontext/line-styles/lineto_a.html b/testing/web-platform/tests/2dcontext/line-styles/lineto_a.html new file mode 100644 index 000000000..7e692f937 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/line-styles/lineto_a.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<link rel=match href=lineto_ref.html> +<style> + html, body { + margin: 0; + padding: 0; + } +</style> +<canvas id="c" width="150" height="150" > +Your browser does not support the HTML5 canvas tag.</canvas> + +<script> +var c = document.getElementById("c"); +var ctx = c.getContext("2d"); + +ctx.beginPath(); +ctx.moveTo(20, 20); +ctx.lineTo(20, 130); +ctx.lineTo(130, 130); +ctx.lineTo(130, 20); +ctx.closePath(); + +ctx.fillStyle = '#90EE90'; +ctx.fill(); +</script> diff --git a/testing/web-platform/tests/2dcontext/line-styles/lineto_ref.html b/testing/web-platform/tests/2dcontext/line-styles/lineto_ref.html new file mode 100644 index 000000000..3dc78ff80 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/line-styles/lineto_ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<style> + html, body { + margin: 0; + padding: 0; + } + div { + background: #90EE90; + width: 110px; + height: 110px; + margin: 20px; + } +</style> +<div></div> diff --git a/testing/web-platform/tests/2dcontext/line-styles/setLineDash.html b/testing/web-platform/tests/2dcontext/line-styles/setLineDash.html new file mode 100644 index 000000000..06fcada76 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/line-styles/setLineDash.html @@ -0,0 +1,104 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>setLineDash</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<canvas id="canvas"></canvas> +<script> +test(function() { + var canvas = document.getElementById('canvas'); + var ctx = canvas.getContext('2d'); + + var initial = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; + + ctx.setLineDash(initial); + assert_array_equals(ctx.getLineDash(), initial, "line dash sanity"); + + ctx.setLineDash([Infinity]); + assert_array_equals(ctx.getLineDash(), initial, "Inf doesn't reset line dash"); + + ctx.setLineDash([NaN]); + assert_array_equals(ctx.getLineDash(), initial, "NaN doesn't reset line dash"); + + ctx.setLineDash([-1]); + assert_array_equals(ctx.getLineDash(), initial, "Negative doesn't reset line dash"); +}, "Invalid arguments to setLineDash()"); + +test(function() { + var canvas = document.getElementById('canvas'); + var ctx = canvas.getContext('2d'); + assert_equals(ctx.lineDashOffset, 0); + + ctx.setLineDash([15, 10]); + ctx.lineDashOffset = 5; + ctx.strokeRect(10,10,100,100); + + var lineDash = ctx.getLineDash(); + assert_array_equals(lineDash, [15, 10]); + assert_equals(ctx.lineDashOffset, 5); + + ctx.setLineDash([5, 10, 15]); + ctx.strokeRect(20, 20, 120, 120); + lineDash = ctx.getLineDash(); + assert_array_equals(lineDash, [5, 10, 15, 5, 10, 15]); + + ctx.setLineDash(["1", 2]); + lineDash = ctx.getLineDash(); + assert_array_equals(lineDash, [1, 2]); + + ctx.clearRect(0, 0, 700, 700); + assert_equals(ctx.lineDashOffset, 5); + + ctx.setLineDash([20, 10]); + ctx.lineDashOffset = 0; + // Make the test immune to plaform anti-aliasing discrepancies. + ctx.lineWidth = 4; + ctx.strokeStyle = '#00FF00'; + ctx.strokeRect(10.5, 10.5, 30, 30); + + _assertPixel(canvas, 25, 10, 0, 255, 0, 255, 0); + _assertPixel(canvas, 35, 10, 0, 0, 0, 0, 0); + _assertPixel(canvas, 40, 25, 0, 255, 0, 255, 0); + _assertPixel(canvas, 40, 35, 0, 0, 0, 0, 0); + _assertPixel(canvas, 25, 40, 0, 255, 0, 255, 0); + _assertPixel(canvas, 15, 40, 0, 0, 0, 0, 0); + _assertPixel(canvas, 10, 25, 0, 255, 0, 255, 0); + _assertPixel(canvas, 10, 15, 0, 0, 0, 0, 0); + + // Verify that lineDashOffset works as expected. + ctx.lineDashOffset = 20; + ctx.strokeRect(50.5, 10.5, 30, 30); + _assertPixel(canvas, 55, 10, 0, 0, 0, 0, 0); + _assertPixel(canvas, 65, 10, 0, 255, 0, 255, 0); + _assertPixel(canvas, 80, 15, 0, 0, 0, 0, 0); + _assertPixel(canvas, 80, 25, 0, 255, 0, 255, 0); + _assertPixel(canvas, 75, 40, 0, 0, 0, 0, 0); + _assertPixel(canvas, 65, 40, 0, 255, 0, 255, 0); + _assertPixel(canvas, 50, 35, 0, 0, 0, 0, 0); + _assertPixel(canvas, 50, 25, 0, 255, 0, 255, 0); + + // Verify negative lineDashOffset. + ctx.lineDashOffset = -10; + ctx.strokeRect(90.5, 10.5, 30, 30); + _assertPixel(canvas, 95, 10, 0, 0, 0, 0, 0); + _assertPixel(canvas, 105, 10, 0, 255, 0, 255, 0); + _assertPixel(canvas, 120, 15, 0, 0, 0, 0, 0); + _assertPixel(canvas, 120, 25, 0, 255, 0, 255, 0); + _assertPixel(canvas, 115, 40, 0, 0, 0, 0, 0); + _assertPixel(canvas, 105, 40, 0, 255, 0, 255, 0); + _assertPixel(canvas, 90, 35, 0, 0, 0, 0, 0); + _assertPixel(canvas, 90, 25, 0, 255, 0, 255, 0); + + // Ensure that all zeros or negative pattern does not cause error state in + // context. + ctx.setLineDash([0, 0]); + ctx.strokeRect(130.5, 10.5, 10, 10); + ctx.setLineDash([-1]); + ctx.strokeRect(130.5, 10.5, 10, 10); + _assertPixel(canvas, 135, 15, 0, 0, 0, 0, 0); + ctx.fillStyle = '#00FF00'; + ctx.fillRect(130, 10, 10, 10); + _assertPixel(canvas, 135, 15, 0, 255, 0, 255, 0); +}); +</script> |