From 43a97878ce14b72f0981164f87f2e35e14151312 Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Sun, 7 Apr 2024 11:22:09 +0200
Subject: Adding upstream version 110.0.1.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 .../element/line-styles/2d.line.cap.butt.html      | 61 +++++++++++++++++
 .../element/line-styles/2d.line.cap.closed.html    | 46 +++++++++++++
 .../element/line-styles/2d.line.cap.invalid.html   | 52 ++++++++++++++
 .../element/line-styles/2d.line.cap.open.html      | 46 +++++++++++++
 .../element/line-styles/2d.line.cap.round.html     | 77 +++++++++++++++++++++
 .../element/line-styles/2d.line.cap.square.html    | 61 +++++++++++++++++
 .../element/line-styles/2d.line.cap.valid.html     | 34 +++++++++
 .../canvas/element/line-styles/2d.line.cross.html  | 43 ++++++++++++
 .../element/line-styles/2d.line.defaults.html      | 30 ++++++++
 .../line-styles/2d.line.invalid.strokestyle.html   | 37 ++++++++++
 .../element/line-styles/2d.line.join.bevel.html    | 80 ++++++++++++++++++++++
 .../element/line-styles/2d.line.join.closed.html   | 45 ++++++++++++
 .../element/line-styles/2d.line.join.invalid.html  | 52 ++++++++++++++
 .../element/line-styles/2d.line.join.miter.html    | 71 +++++++++++++++++++
 .../element/line-styles/2d.line.join.open.html     | 45 ++++++++++++
 .../element/line-styles/2d.line.join.parallel.html | 42 ++++++++++++
 .../element/line-styles/2d.line.join.round.html    | 78 +++++++++++++++++++++
 .../element/line-styles/2d.line.join.valid.html    | 34 +++++++++
 .../element/line-styles/2d.line.miter.acute.html   | 52 ++++++++++++++
 .../line-styles/2d.line.miter.exceeded.html        | 44 ++++++++++++
 .../element/line-styles/2d.line.miter.invalid.html | 60 ++++++++++++++++
 .../line-styles/2d.line.miter.lineedge.html        | 41 +++++++++++
 .../element/line-styles/2d.line.miter.obtuse.html  | 52 ++++++++++++++
 .../line-styles/2d.line.miter.rightangle.html      | 44 ++++++++++++
 .../element/line-styles/2d.line.miter.valid.html   | 37 ++++++++++
 .../element/line-styles/2d.line.miter.within.html  | 44 ++++++++++++
 .../canvas/element/line-styles/2d.line.union.html  | 46 +++++++++++++
 .../element/line-styles/2d.line.width.basic.html   | 63 +++++++++++++++++
 .../element/line-styles/2d.line.width.invalid.html | 60 ++++++++++++++++
 .../line-styles/2d.line.width.scaledefault.html    | 40 +++++++++++
 .../line-styles/2d.line.width.transformed.html     | 69 +++++++++++++++++++
 .../element/line-styles/2d.line.width.valid.html   | 37 ++++++++++
 32 files changed, 1623 insertions(+)
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cap.butt.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cap.closed.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cap.invalid.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cap.open.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cap.round.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cap.square.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cap.valid.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cross.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.defaults.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.invalid.strokestyle.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.bevel.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.closed.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.invalid.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.miter.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.open.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.parallel.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.round.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.valid.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.acute.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.exceeded.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.invalid.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.lineedge.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.obtuse.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.rightangle.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.valid.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.within.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.union.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.width.basic.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.width.invalid.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.width.scaledefault.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.width.transformed.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.width.valid.html

(limited to 'testing/web-platform/tests/html/canvas/element/line-styles')

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>
+
-- 
cgit v1.2.3