diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
| commit | 43a97878ce14b72f0981164f87f2e35e14151312 (patch) | |
| tree | 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/html/canvas/element/line-styles | |
| parent | Initial commit. (diff) | |
| download | firefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip | |
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/html/canvas/element/line-styles')
32 files changed, 1623 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cap.butt.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cap.butt.html new file mode 100644 index 0000000000..59b1f76c68 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cap.butt.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/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="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/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); +_assertPixel(canvas, 25,15, 0,255,0,255); +_assertPixel(canvas, 25,16, 0,255,0,255); +_assertPixel(canvas, 25,34, 0,255,0,255); +_assertPixel(canvas, 25,35, 0,255,0,255); +_assertPixel(canvas, 25,36, 0,255,0,255); + +_assertPixel(canvas, 75,14, 0,255,0,255); +_assertPixel(canvas, 75,15, 0,255,0,255); +_assertPixel(canvas, 75,16, 0,255,0,255); +_assertPixel(canvas, 75,34, 0,255,0,255); +_assertPixel(canvas, 75,35, 0,255,0,255); +_assertPixel(canvas, 75,36, 0,255,0,255); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cap.closed.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cap.closed.html new file mode 100644 index 0000000000..5f16ac9500 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cap.closed.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.line.cap.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.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); +_assertPixel(canvas, 48,1, 0,255,0,255); +_assertPixel(canvas, 48,48, 0,255,0,255); +_assertPixel(canvas, 1,48, 0,255,0,255); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cap.invalid.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cap.invalid.html new file mode 100644 index 0000000000..c62e71f6e2 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cap.invalid.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/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="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/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/html/canvas/element/line-styles/2d.line.cap.open.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cap.open.html new file mode 100644 index 0000000000..fc5aca585c --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cap.open.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.line.cap.open</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.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); +_assertPixel(canvas, 48,1, 0,255,0,255); +_assertPixel(canvas, 48,48, 0,255,0,255); +_assertPixel(canvas, 1,48, 0,255,0,255); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cap.round.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cap.round.html new file mode 100644 index 0000000000..48411812de --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cap.round.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/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="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/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); +_assertPixel(canvas, 25,6, 0,255,0,255); +_assertPixel(canvas, 32,6, 0,255,0,255); +_assertPixel(canvas, 17,43, 0,255,0,255); +_assertPixel(canvas, 25,43, 0,255,0,255); +_assertPixel(canvas, 32,43, 0,255,0,255); + +_assertPixel(canvas, 67,6, 0,255,0,255); +_assertPixel(canvas, 75,6, 0,255,0,255); +_assertPixel(canvas, 82,6, 0,255,0,255); +_assertPixel(canvas, 67,43, 0,255,0,255); +_assertPixel(canvas, 75,43, 0,255,0,255); +_assertPixel(canvas, 82,43, 0,255,0,255); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cap.square.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cap.square.html new file mode 100644 index 0000000000..3423fa79e4 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cap.square.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/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="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/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); +_assertPixel(canvas, 25,5, 0,255,0,255); +_assertPixel(canvas, 25,6, 0,255,0,255); +_assertPixel(canvas, 25,44, 0,255,0,255); +_assertPixel(canvas, 25,45, 0,255,0,255); +_assertPixel(canvas, 25,46, 0,255,0,255); + +_assertPixel(canvas, 75,4, 0,255,0,255); +_assertPixel(canvas, 75,5, 0,255,0,255); +_assertPixel(canvas, 75,6, 0,255,0,255); +_assertPixel(canvas, 75,44, 0,255,0,255); +_assertPixel(canvas, 75,45, 0,255,0,255); +_assertPixel(canvas, 75,46, 0,255,0,255); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cap.valid.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cap.valid.html new file mode 100644 index 0000000000..2c02ede579 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cap.valid.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.line.cap.valid</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.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/html/canvas/element/line-styles/2d.line.cross.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cross.html new file mode 100644 index 0000000000..a664e37253 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cross.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.line.cross</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.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); +_assertPixel(canvas, 48,1, 0,255,0,255); +_assertPixel(canvas, 48,48, 0,255,0,255); +_assertPixel(canvas, 1,48, 0,255,0,255); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.defaults.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.defaults.html new file mode 100644 index 0000000000..efea3ca1aa --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.defaults.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.line.defaults</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.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/html/canvas/element/line-styles/2d.line.invalid.strokestyle.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.invalid.strokestyle.html new file mode 100644 index 0000000000..29bd98e5e5 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.invalid.strokestyle.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.line.invalid.strokestyle</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.line.invalid.strokestyle</h1> +<p class="desc">Verify correct behavior of canvas on an invalid strokeStyle()</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 correct behavior of canvas on an invalid strokeStyle()"); +_addTest(function(canvas, ctx) { + +ctx.strokeStyle = 'rgb(0, 255, 0)'; +ctx.strokeStyle = 'nonsense'; +ctx.lineWidth = 200; +ctx.moveTo(0,100); +ctx.lineTo(200,100); +ctx.stroke(); +var imageData = ctx.getImageData(0, 0, 200, 200); +var imgdata = imageData.data; +_assert(imgdata[4] == 0, "imgdata[\""+(4)+"\"] == 0"); +_assert(imgdata[5] == 255, "imgdata[\""+(5)+"\"] == 255"); +_assert(imgdata[6] == 0, "imgdata[\""+(6)+"\"] == 0"); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.bevel.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.bevel.html new file mode 100644 index 0000000000..c1320c2c0b --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.bevel.html @@ -0,0 +1,80 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/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="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/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); +_assertPixel(canvas, 34,15, 0,255,0,255); +_assertPixel(canvas, 35,15, 0,255,0,255); +_assertPixel(canvas, 36,15, 0,255,0,255); +_assertPixel(canvas, 36,14, 0,255,0,255); + +_assertPixel(canvas, 84,16, 0,255,0,255); +_assertPixel(canvas, 84,15, 0,255,0,255); +_assertPixel(canvas, 85,15, 0,255,0,255); +_assertPixel(canvas, 86,15, 0,255,0,255); +_assertPixel(canvas, 86,14, 0,255,0,255); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.closed.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.closed.html new file mode 100644 index 0000000000..6fd9d9d300 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.closed.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.line.join.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.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); +_assertPixel(canvas, 48,1, 0,255,0,255); +_assertPixel(canvas, 48,48, 0,255,0,255); +_assertPixel(canvas, 1,48, 0,255,0,255); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.invalid.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.invalid.html new file mode 100644 index 0000000000..a1c5aa0dda --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.invalid.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/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="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/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/html/canvas/element/line-styles/2d.line.join.miter.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.miter.html new file mode 100644 index 0000000000..b4f8fbc9a4 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.miter.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/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="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/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); +_assertPixel(canvas, 39,11, 0,255,0,255); +_assertPixel(canvas, 40,10, 0,255,0,255); +_assertPixel(canvas, 41,9, 0,255,0,255); +_assertPixel(canvas, 42,8, 0,255,0,255); + +_assertPixel(canvas, 88,12, 0,255,0,255); +_assertPixel(canvas, 89,11, 0,255,0,255); +_assertPixel(canvas, 90,10, 0,255,0,255); +_assertPixel(canvas, 91,9, 0,255,0,255); +_assertPixel(canvas, 92,8, 0,255,0,255); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.open.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.open.html new file mode 100644 index 0000000000..162b1f87b2 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.open.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.line.join.open</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.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); +_assertPixel(canvas, 48,1, 0,255,0,255); +_assertPixel(canvas, 48,48, 0,255,0,255); +_assertPixel(canvas, 1,48, 0,255,0,255); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.parallel.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.parallel.html new file mode 100644 index 0000000000..c26182b0b4 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.parallel.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.line.join.parallel</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.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); +_assertPixel(canvas, 48,1, 0,255,0,255); +_assertPixel(canvas, 48,48, 0,255,0,255); +_assertPixel(canvas, 1,48, 0,255,0,255); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.round.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.round.html new file mode 100644 index 0000000000..f1e60182f3 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.round.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/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="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/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); +_assertPixel(canvas, 36,13, 0,255,0,255); +_assertPixel(canvas, 37,13, 0,255,0,255); +_assertPixel(canvas, 38,13, 0,255,0,255); +_assertPixel(canvas, 38,12, 0,255,0,255); + +_assertPixel(canvas, 86,14, 0,255,0,255); +_assertPixel(canvas, 86,13, 0,255,0,255); +_assertPixel(canvas, 87,13, 0,255,0,255); +_assertPixel(canvas, 88,13, 0,255,0,255); +_assertPixel(canvas, 88,12, 0,255,0,255); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.valid.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.valid.html new file mode 100644 index 0000000000..57179641f7 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.valid.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.line.join.valid</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.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/html/canvas/element/line-styles/2d.line.miter.acute.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.acute.html new file mode 100644 index 0000000000..7807d5942d --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.acute.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/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="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/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); +_assertPixel(canvas, 48,1, 0,255,0,255); +_assertPixel(canvas, 48,48, 0,255,0,255); +_assertPixel(canvas, 1,48, 0,255,0,255); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.exceeded.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.exceeded.html new file mode 100644 index 0000000000..9c31cdd4ff --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.exceeded.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.line.miter.exceeded</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.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); +_assertPixel(canvas, 48,1, 0,255,0,255); +_assertPixel(canvas, 48,48, 0,255,0,255); +_assertPixel(canvas, 1,48, 0,255,0,255); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.invalid.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.invalid.html new file mode 100644 index 0000000000..994956123c --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.invalid.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/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="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/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"); + +ctx.miterLimit = 1.5; +ctx.miterLimit = 'string'; +_assertSame(ctx.miterLimit, 1.5, "ctx.miterLimit", "1.5"); + +ctx.miterLimit = 1.5; +ctx.miterLimit = true; +_assertSame(ctx.miterLimit, 1, "ctx.miterLimit", "1"); + +ctx.miterLimit = 1.5; +ctx.miterLimit = false; +_assertSame(ctx.miterLimit, 1.5, "ctx.miterLimit", "1.5"); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.lineedge.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.lineedge.html new file mode 100644 index 0000000000..33d96f36cc --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.lineedge.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.line.miter.lineedge</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.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); +_assertPixel(canvas, 48,1, 0,255,0,255); +_assertPixel(canvas, 48,48, 0,255,0,255); +_assertPixel(canvas, 1,48, 0,255,0,255); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.obtuse.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.obtuse.html new file mode 100644 index 0000000000..73507f623c --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.obtuse.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/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="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/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); +_assertPixel(canvas, 48,1, 0,255,0,255); +_assertPixel(canvas, 48,48, 0,255,0,255); +_assertPixel(canvas, 1,48, 0,255,0,255); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.rightangle.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.rightangle.html new file mode 100644 index 0000000000..a8b528bf05 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.rightangle.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.line.miter.rightangle</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.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); +_assertPixel(canvas, 48,1, 0,255,0,255); +_assertPixel(canvas, 48,48, 0,255,0,255); +_assertPixel(canvas, 1,48, 0,255,0,255); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.valid.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.valid.html new file mode 100644 index 0000000000..a96c1cd184 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.valid.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.line.miter.valid</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.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/html/canvas/element/line-styles/2d.line.miter.within.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.within.html new file mode 100644 index 0000000000..c5d71cda57 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.within.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.line.miter.within</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.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); +_assertPixel(canvas, 48,1, 0,255,0,255); +_assertPixel(canvas, 48,48, 0,255,0,255); +_assertPixel(canvas, 1,48, 0,255,0,255); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.union.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.union.html new file mode 100644 index 0000000000..e9f5a85e02 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.union.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.line.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.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); +_assertPixel(canvas, 25,1, 0,255,0,255); +_assertPixel(canvas, 48,1, 0,255,0,255); +_assertPixel(canvas, 1,48, 0,255,0,255); +_assertPixel(canvas, 25,1, 0,255,0,255); +_assertPixel(canvas, 48,48, 0,255,0,255); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.width.basic.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.width.basic.html new file mode 100644 index 0000000000..b0fe6c4665 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.width.basic.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/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="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/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); +_assertPixel(canvas, 15,25, 0,255,0,255); +_assertPixel(canvas, 16,25, 0,255,0,255); +_assertPixel(canvas, 25,25, 0,255,0,255); +_assertPixel(canvas, 34,25, 0,255,0,255); +_assertPixel(canvas, 35,25, 0,255,0,255); +_assertPixel(canvas, 36,25, 0,255,0,255); + +_assertPixel(canvas, 64,25, 0,255,0,255); +_assertPixel(canvas, 65,25, 0,255,0,255); +_assertPixel(canvas, 66,25, 0,255,0,255); +_assertPixel(canvas, 75,25, 0,255,0,255); +_assertPixel(canvas, 84,25, 0,255,0,255); +_assertPixel(canvas, 85,25, 0,255,0,255); +_assertPixel(canvas, 86,25, 0,255,0,255); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.width.invalid.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.width.invalid.html new file mode 100644 index 0000000000..a5a1a6d8d7 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.width.invalid.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/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="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/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"); + +ctx.lineWidth = 1.5; +ctx.lineWidth = 'string'; +_assertSame(ctx.lineWidth, 1.5, "ctx.lineWidth", "1.5"); + +ctx.lineWidth = 1.5; +ctx.lineWidth = true; +_assertSame(ctx.lineWidth, 1, "ctx.lineWidth", "1"); + +ctx.lineWidth = 1.5; +ctx.lineWidth = false; +_assertSame(ctx.lineWidth, 1.5, "ctx.lineWidth", "1.5"); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.width.scaledefault.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.width.scaledefault.html new file mode 100644 index 0000000000..9c50a0d68e --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.width.scaledefault.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.line.width.scaledefault</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.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); +_assertPixel(canvas, 50,25, 0,255,0,255); +_assertPixel(canvas, 75,25, 0,255,0,255); +_assertPixel(canvas, 50,5, 0,255,0,255); +_assertPixel(canvas, 50,45, 0,255,0,255); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.width.transformed.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.width.transformed.html new file mode 100644 index 0000000000..f42f859a31 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.width.transformed.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.line.width.transformed</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.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); +_assertPixel(canvas, 15,25, 0,255,0,255); +_assertPixel(canvas, 16,25, 0,255,0,255); +_assertPixel(canvas, 25,25, 0,255,0,255); +_assertPixel(canvas, 34,25, 0,255,0,255); +_assertPixel(canvas, 35,25, 0,255,0,255); +_assertPixel(canvas, 36,25, 0,255,0,255); + +_assertPixel(canvas, 64,25, 0,255,0,255); +_assertPixel(canvas, 65,25, 0,255,0,255); +_assertPixel(canvas, 66,25, 0,255,0,255); +_assertPixel(canvas, 75,25, 0,255,0,255); +_assertPixel(canvas, 84,25, 0,255,0,255); +_assertPixel(canvas, 85,25, 0,255,0,255); +_assertPixel(canvas, 86,25, 0,255,0,255); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.width.valid.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.width.valid.html new file mode 100644 index 0000000000..9078809d65 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.width.valid.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.line.width.valid</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.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> + |