Add m-esr52 at 52.6.0

author: Matt A. Tobin <mattatobin@localhost.localdomain> 2018-02-02 04:16:08 -0500
committer: Matt A. Tobin <mattatobin@localhost.localdomain> 2018-02-02 04:16:08 -0500
commit: 5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree: 10027f336435511475e392454359edea8e25895d /testing/web-platform/tests/2dcontext/transformations
parent: 49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
download: UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip
29 files changed, 1102 insertions, 0 deletions
diff --git a/testing/web-platform/tests/2dcontext/transformations/.gitkeep b/testing/web-platform/tests/2dcontext/transformations/.gitkeep
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/transformations/.gitkeep
diff --git a/testing/web-platform/tests/2dcontext/transformations/2d.transformation.order.html b/testing/web-platform/tests/2dcontext/transformations/2d.transformation.order.html
new file mode 100644
index 000000000..8209ad66d
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/transformations/2d.transformation.order.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.transformation.order</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.transformation.order</h1>
+<p class="desc">Transformations are applied in the right order</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("Transformations are applied in the right order");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#f00';
+ctx.fillRect(0, 0, 100, 50);
+
+ctx.scale(2, 1);
+ctx.rotate(Math.PI / 2);
+ctx.fillStyle = '#0f0';
+ctx.fillRect(0, -50, 50, 50);
+_assertPixel(canvas, 75,25, 0,255,0,255, "75,25", "0,255,0,255");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/transformations/2d.transformation.rotate.direction.html b/testing/web-platform/tests/2dcontext/transformations/2d.transformation.rotate.direction.html
new file mode 100644
index 000000000..5113fa238
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/transformations/2d.transformation.rotate.direction.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.transformation.rotate.direction</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.transformation.rotate.direction</h1>
+<p class="desc">rotate() is clockwise</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("rotate() is clockwise");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#f00';
+ctx.fillRect(0, 0, 100, 50);
+
+ctx.rotate(Math.PI / 2);
+ctx.fillStyle = '#0f0';
+ctx.fillRect(0, -100, 50, 100);
+_assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/transformations/2d.transformation.rotate.nonfinite.html b/testing/web-platform/tests/2dcontext/transformations/2d.transformation.rotate.nonfinite.html
new file mode 100644
index 000000000..1726dcf5b
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/transformations/2d.transformation.rotate.nonfinite.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.transformation.rotate.nonfinite</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.transformation.rotate.nonfinite</h1>
+<p class="desc">rotate() with Infinity/NaN is ignored</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("rotate() with Infinity/NaN is ignored");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#f00';
+ctx.fillRect(0, 0, 100, 50);
+
+ctx.translate(100, 10);
+ctx.rotate(Infinity);
+ctx.rotate(-Infinity);
+ctx.rotate(NaN);
+
+ctx.fillStyle = '#0f0';
+ctx.fillRect(-100, -10, 100, 50);
+
+_assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/transformations/2d.transformation.rotate.radians.html b/testing/web-platform/tests/2dcontext/transformations/2d.transformation.rotate.radians.html
new file mode 100644
index 000000000..8cfeb6fd1
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/transformations/2d.transformation.rotate.radians.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.transformation.rotate.radians</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.transformation.rotate.radians</h1>
+<p class="desc">rotate() uses radians</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("rotate() uses radians");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#f00';
+ctx.fillRect(0, 0, 100, 50);
+
+ctx.rotate(Math.PI); // should fail obviously if this is 3.1 degrees
+ctx.fillStyle = '#0f0';
+ctx.fillRect(-100, -50, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/transformations/2d.transformation.rotate.wrap.html b/testing/web-platform/tests/2dcontext/transformations/2d.transformation.rotate.wrap.html
new file mode 100644
index 000000000..fbfba2a29
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/transformations/2d.transformation.rotate.wrap.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.transformation.rotate.wrap</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.transformation.rotate.wrap</h1>
+<p class="desc">rotate() wraps large positive values 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("rotate() wraps large positive values correctly");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#f00';
+ctx.fillRect(0, 0, 100, 50);
+
+ctx.rotate(Math.PI * (1 + 4096)); // == pi (mod 2*pi)
+// We need about pi +/- 0.001 in order to get correct-looking results
+// 32-bit floats can store pi*4097 with precision 2^-10, so that should
+// be safe enough on reasonable implementations
+ctx.fillStyle = '#0f0';
+ctx.fillRect(-100, -50, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
+_assertPixel(canvas, 98,2, 0,255,0,255, "98,2", "0,255,0,255");
+_assertPixel(canvas, 98,47, 0,255,0,255, "98,47", "0,255,0,255");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/transformations/2d.transformation.rotate.wrapnegative.html b/testing/web-platform/tests/2dcontext/transformations/2d.transformation.rotate.wrapnegative.html
new file mode 100644
index 000000000..a695e7b39
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/transformations/2d.transformation.rotate.wrapnegative.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.transformation.rotate.wrapnegative</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.transformation.rotate.wrapnegative</h1>
+<p class="desc">rotate() wraps large negative values 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("rotate() wraps large negative values correctly");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#f00';
+ctx.fillRect(0, 0, 100, 50);
+
+ctx.rotate(-Math.PI * (1 + 4096));
+ctx.fillStyle = '#0f0';
+ctx.fillRect(-100, -50, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
+_assertPixel(canvas, 98,2, 0,255,0,255, "98,2", "0,255,0,255");
+_assertPixel(canvas, 98,47, 0,255,0,255, "98,47", "0,255,0,255");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/transformations/2d.transformation.rotate.zero.html b/testing/web-platform/tests/2dcontext/transformations/2d.transformation.rotate.zero.html
new file mode 100644
index 000000000..cd74260e7
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/transformations/2d.transformation.rotate.zero.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.transformation.rotate.zero</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.transformation.rotate.zero</h1>
+<p class="desc">rotate() by 0 does nothing</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("rotate() by 0 does nothing");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#f00';
+ctx.fillRect(0, 0, 100, 50);
+
+ctx.rotate(0);
+ctx.fillStyle = '#0f0';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/transformations/2d.transformation.scale.basic.html b/testing/web-platform/tests/2dcontext/transformations/2d.transformation.scale.basic.html
new file mode 100644
index 000000000..a083a6514
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/transformations/2d.transformation.scale.basic.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.transformation.scale.basic</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.transformation.scale.basic</h1>
+<p class="desc">scale() 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>
+<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("scale() works");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#f00';
+ctx.fillRect(0, 0, 100, 50);
+
+ctx.scale(2, 4);
+ctx.fillStyle = '#0f0';
+ctx.fillRect(0, 0, 50, 12.5);
+_assertPixel(canvas, 90,40, 0,255,0,255, "90,40", "0,255,0,255");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/transformations/2d.transformation.scale.large.html b/testing/web-platform/tests/2dcontext/transformations/2d.transformation.scale.large.html
new file mode 100644
index 000000000..926530d1f
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/transformations/2d.transformation.scale.large.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.transformation.scale.large</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.transformation.scale.large</h1>
+<p class="desc">scale() with large scale factors works</p>
+
+<p class="notes">Not really that large at all, but it hits the limits in Firefox.
+<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("scale() with large scale factors works");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#f00';
+ctx.fillRect(0, 0, 100, 50);
+
+ctx.scale(1e5, 1e5);
+ctx.fillStyle = '#0f0';
+ctx.fillRect(0, 0, 1, 1);
+_assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/transformations/2d.transformation.scale.multiple.html b/testing/web-platform/tests/2dcontext/transformations/2d.transformation.scale.multiple.html
new file mode 100644
index 000000000..9856798be
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/transformations/2d.transformation.scale.multiple.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.transformation.scale.multiple</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.transformation.scale.multiple</h1>
+<p class="desc">Multiple scale()s combine</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("Multiple scale()s combine");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#f00';
+ctx.fillRect(0, 0, 100, 50);
+
+ctx.scale(Math.sqrt(2), Math.sqrt(2));
+ctx.scale(Math.sqrt(2), Math.sqrt(2));
+ctx.fillStyle = '#0f0';
+ctx.fillRect(0, 0, 50, 25);
+_assertPixel(canvas, 90,40, 0,255,0,255, "90,40", "0,255,0,255");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/transformations/2d.transformation.scale.negative.html b/testing/web-platform/tests/2dcontext/transformations/2d.transformation.scale.negative.html
new file mode 100644
index 000000000..af3285165
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/transformations/2d.transformation.scale.negative.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.transformation.scale.negative</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.transformation.scale.negative</h1>
+<p class="desc">scale() with negative scale factors 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>
+<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("scale() with negative scale factors works");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#f00';
+ctx.fillRect(0, 0, 100, 50);
+
+ctx.save();
+ctx.scale(-1, 1);
+ctx.fillStyle = '#0f0';
+ctx.fillRect(-50, 0, 50, 50);
+ctx.restore();
+
+ctx.save();
+ctx.scale(1, -1);
+ctx.fillStyle = '#0f0';
+ctx.fillRect(50, -50, 50, 50);
+ctx.restore();
+_assertPixel(canvas, 25,25, 0,255,0,255, "25,25", "0,255,0,255");
+_assertPixel(canvas, 75,25, 0,255,0,255, "75,25", "0,255,0,255");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/transformations/2d.transformation.scale.nonfinite.html b/testing/web-platform/tests/2dcontext/transformations/2d.transformation.scale.nonfinite.html
new file mode 100644
index 000000000..b9788885f
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/transformations/2d.transformation.scale.nonfinite.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.transformation.scale.nonfinite</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.transformation.scale.nonfinite</h1>
+<p class="desc">scale() with Infinity/NaN is ignored</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("scale() with Infinity/NaN is ignored");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#f00';
+ctx.fillRect(0, 0, 100, 50);
+
+ctx.translate(100, 10);
+ctx.scale(Infinity, 0.1);
+ctx.scale(-Infinity, 0.1);
+ctx.scale(NaN, 0.1);
+ctx.scale(0.1, Infinity);
+ctx.scale(0.1, -Infinity);
+ctx.scale(0.1, NaN);
+ctx.scale(Infinity, Infinity);
+
+ctx.fillStyle = '#0f0';
+ctx.fillRect(-100, -10, 100, 50);
+
+_assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/transformations/2d.transformation.scale.zero.html b/testing/web-platform/tests/2dcontext/transformations/2d.transformation.scale.zero.html
new file mode 100644
index 000000000..80e79a988
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/transformations/2d.transformation.scale.zero.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.transformation.scale.zero</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.transformation.scale.zero</h1>
+<p class="desc">scale() with a scale factor of zero 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>
+<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("scale() with a scale factor of zero works");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#0f0';
+ctx.fillRect(0, 0, 100, 50);
+
+ctx.save();
+ctx.translate(50, 0);
+ctx.scale(0, 1);
+ctx.fillStyle = '#f00';
+ctx.fillRect(0, 0, 100, 50);
+ctx.restore();
+
+ctx.save();
+ctx.translate(0, 25);
+ctx.scale(1, 0);
+ctx.fillStyle = '#f00';
+ctx.fillRect(0, 0, 100, 50);
+ctx.restore();
+
+canvas.toDataURL();
+
+_assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/transformations/2d.transformation.setTransform.multiple.html b/testing/web-platform/tests/2dcontext/transformations/2d.transformation.setTransform.multiple.html
new file mode 100644
index 000000000..79caa6308
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/transformations/2d.transformation.setTransform.multiple.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.transformation.setTransform.multiple</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.transformation.setTransform.multiple</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#f00';
+ctx.fillRect(0, 0, 100, 50);
+
+ctx.setTransform(1/2,0, 0,1/2, 0,0);
+ctx.setTransform(2,0, 0,2, 0,0);
+ctx.fillStyle = '#0f0';
+ctx.fillRect(0, 0, 50, 25);
+_assertPixel(canvas, 75,35, 0,255,0,255, "75,35", "0,255,0,255");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/transformations/2d.transformation.setTransform.nonfinite.html b/testing/web-platform/tests/2dcontext/transformations/2d.transformation.setTransform.nonfinite.html
new file mode 100644
index 000000000..4b5ebd6c7
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/transformations/2d.transformation.setTransform.nonfinite.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.transformation.setTransform.nonfinite</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.transformation.setTransform.nonfinite</h1>
+<p class="desc">setTransform() with Infinity/NaN is ignored</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("setTransform() with Infinity/NaN is ignored");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#f00';
+ctx.fillRect(0, 0, 100, 50);
+
+ctx.translate(100, 10);
+ctx.setTransform(Infinity, 0, 0, 0, 0, 0);
+ctx.setTransform(-Infinity, 0, 0, 0, 0, 0);
+ctx.setTransform(NaN, 0, 0, 0, 0, 0);
+ctx.setTransform(0, Infinity, 0, 0, 0, 0);
+ctx.setTransform(0, -Infinity, 0, 0, 0, 0);
+ctx.setTransform(0, NaN, 0, 0, 0, 0);
+ctx.setTransform(0, 0, Infinity, 0, 0, 0);
+ctx.setTransform(0, 0, -Infinity, 0, 0, 0);
+ctx.setTransform(0, 0, NaN, 0, 0, 0);
+ctx.setTransform(0, 0, 0, Infinity, 0, 0);
+ctx.setTransform(0, 0, 0, -Infinity, 0, 0);
+ctx.setTransform(0, 0, 0, NaN, 0, 0);
+ctx.setTransform(0, 0, 0, 0, Infinity, 0);
+ctx.setTransform(0, 0, 0, 0, -Infinity, 0);
+ctx.setTransform(0, 0, 0, 0, NaN, 0);
+ctx.setTransform(0, 0, 0, 0, 0, Infinity);
+ctx.setTransform(0, 0, 0, 0, 0, -Infinity);
+ctx.setTransform(0, 0, 0, 0, 0, NaN);
+ctx.setTransform(Infinity, Infinity, 0, 0, 0, 0);
+ctx.setTransform(Infinity, Infinity, Infinity, 0, 0, 0);
+ctx.setTransform(Infinity, Infinity, Infinity, Infinity, 0, 0);
+ctx.setTransform(Infinity, Infinity, Infinity, Infinity, Infinity, 0);
+ctx.setTransform(Infinity, Infinity, Infinity, Infinity, Infinity, Infinity);
+ctx.setTransform(Infinity, Infinity, Infinity, Infinity, 0, Infinity);
+ctx.setTransform(Infinity, Infinity, Infinity, 0, Infinity, 0);
+ctx.setTransform(Infinity, Infinity, Infinity, 0, Infinity, Infinity);
+ctx.setTransform(Infinity, Infinity, Infinity, 0, 0, Infinity);
+ctx.setTransform(Infinity, Infinity, 0, Infinity, 0, 0);
+ctx.setTransform(Infinity, Infinity, 0, Infinity, Infinity, 0);
+ctx.setTransform(Infinity, Infinity, 0, Infinity, Infinity, Infinity);
+ctx.setTransform(Infinity, Infinity, 0, Infinity, 0, Infinity);
+ctx.setTransform(Infinity, Infinity, 0, 0, Infinity, 0);
+ctx.setTransform(Infinity, Infinity, 0, 0, Infinity, Infinity);
+ctx.setTransform(Infinity, Infinity, 0, 0, 0, Infinity);
+ctx.setTransform(Infinity, 0, Infinity, 0, 0, 0);
+ctx.setTransform(Infinity, 0, Infinity, Infinity, 0, 0);
+ctx.setTransform(Infinity, 0, Infinity, Infinity, Infinity, 0);
+ctx.setTransform(Infinity, 0, Infinity, Infinity, Infinity, Infinity);
+ctx.setTransform(Infinity, 0, Infinity, Infinity, 0, Infinity);
+ctx.setTransform(Infinity, 0, Infinity, 0, Infinity, 0);
+ctx.setTransform(Infinity, 0, Infinity, 0, Infinity, Infinity);
+ctx.setTransform(Infinity, 0, Infinity, 0, 0, Infinity);
+ctx.setTransform(Infinity, 0, 0, Infinity, 0, 0);
+ctx.setTransform(Infinity, 0, 0, Infinity, Infinity, 0);
+ctx.setTransform(Infinity, 0, 0, Infinity, Infinity, Infinity);
+ctx.setTransform(Infinity, 0, 0, Infinity, 0, Infinity);
+ctx.setTransform(Infinity, 0, 0, 0, Infinity, 0);
+ctx.setTransform(Infinity, 0, 0, 0, Infinity, Infinity);
+ctx.setTransform(Infinity, 0, 0, 0, 0, Infinity);
+ctx.setTransform(0, Infinity, Infinity, 0, 0, 0);
+ctx.setTransform(0, Infinity, Infinity, Infinity, 0, 0);
+ctx.setTransform(0, Infinity, Infinity, Infinity, Infinity, 0);
+ctx.setTransform(0, Infinity, Infinity, Infinity, Infinity, Infinity);
+ctx.setTransform(0, Infinity, Infinity, Infinity, 0, Infinity);
+ctx.setTransform(0, Infinity, Infinity, 0, Infinity, 0);
+ctx.setTransform(0, Infinity, Infinity, 0, Infinity, Infinity);
+ctx.setTransform(0, Infinity, Infinity, 0, 0, Infinity);
+ctx.setTransform(0, Infinity, 0, Infinity, 0, 0);
+ctx.setTransform(0, Infinity, 0, Infinity, Infinity, 0);
+ctx.setTransform(0, Infinity, 0, Infinity, Infinity, Infinity);
+ctx.setTransform(0, Infinity, 0, Infinity, 0, Infinity);
+ctx.setTransform(0, Infinity, 0, 0, Infinity, 0);
+ctx.setTransform(0, Infinity, 0, 0, Infinity, Infinity);
+ctx.setTransform(0, Infinity, 0, 0, 0, Infinity);
+ctx.setTransform(0, 0, Infinity, Infinity, 0, 0);
+ctx.setTransform(0, 0, Infinity, Infinity, Infinity, 0);
+ctx.setTransform(0, 0, Infinity, Infinity, Infinity, Infinity);
+ctx.setTransform(0, 0, Infinity, Infinity, 0, Infinity);
+ctx.setTransform(0, 0, Infinity, 0, Infinity, 0);
+ctx.setTransform(0, 0, Infinity, 0, Infinity, Infinity);
+ctx.setTransform(0, 0, Infinity, 0, 0, Infinity);
+ctx.setTransform(0, 0, 0, Infinity, Infinity, 0);
+ctx.setTransform(0, 0, 0, Infinity, Infinity, Infinity);
+ctx.setTransform(0, 0, 0, Infinity, 0, Infinity);
+ctx.setTransform(0, 0, 0, 0, Infinity, Infinity);
+
+ctx.fillStyle = '#0f0';
+ctx.fillRect(-100, -10, 100, 50);
+
+_assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/transformations/2d.transformation.setTransform.skewed.html b/testing/web-platform/tests/2dcontext/transformations/2d.transformation.setTransform.skewed.html
new file mode 100644
index 000000000..d411e544b
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/transformations/2d.transformation.setTransform.skewed.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.transformation.setTransform.skewed</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.transformation.setTransform.skewed</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) {
+
+// Create green with a red square ring inside it
+ctx.fillStyle = '#0f0';
+ctx.fillRect(0, 0, 100, 50);
+ctx.fillStyle = '#f00';
+ctx.fillRect(20, 10, 60, 30);
+ctx.fillStyle = '#0f0';
+ctx.fillRect(40, 20, 20, 10);
+
+// Draw a skewed shape to fill that gap, to make sure it is aligned correctly
+ctx.setTransform(1,4, 2,3, 5,6);
+// Post-transform coordinates:
+//   [[20,10],[80,10],[80,40],[20,40],[20,10],[40,20],[40,30],[60,30],[60,20],[40,20],[20,10]];
+// Hence pre-transform coordinates:
+var pts=[[-7.4,11.2],[-43.4,59.2],[-31.4,53.2],[4.6,5.2],[-7.4,11.2],
+         [-15.4,25.2],[-11.4,23.2],[-23.4,39.2],[-27.4,41.2],[-15.4,25.2],
+         [-7.4,11.2]];
+ctx.beginPath();
+ctx.moveTo(pts[0][0], pts[0][1]);
+for (var i = 0; i < pts.length; ++i)
+    ctx.lineTo(pts[i][0], pts[i][1]);
+ctx.fill();
+_assertPixel(canvas, 21,11, 0,255,0,255, "21,11", "0,255,0,255");
+_assertPixel(canvas, 79,11, 0,255,0,255, "79,11", "0,255,0,255");
+_assertPixel(canvas, 21,39, 0,255,0,255, "21,39", "0,255,0,255");
+_assertPixel(canvas, 79,39, 0,255,0,255, "79,39", "0,255,0,255");
+_assertPixel(canvas, 39,19, 0,255,0,255, "39,19", "0,255,0,255");
+_assertPixel(canvas, 61,19, 0,255,0,255, "61,19", "0,255,0,255");
+_assertPixel(canvas, 39,31, 0,255,0,255, "39,31", "0,255,0,255");
+_assertPixel(canvas, 61,31, 0,255,0,255, "61,31", "0,255,0,255");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/transformations/2d.transformation.transform.identity.html b/testing/web-platform/tests/2dcontext/transformations/2d.transformation.transform.identity.html
new file mode 100644
index 000000000..bf88557b9
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/transformations/2d.transformation.transform.identity.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.transformation.transform.identity</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.transformation.transform.identity</h1>
+<p class="desc">transform() with the identity matrix does nothing</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("transform() with the identity matrix does nothing");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#f00';
+ctx.fillRect(0, 0, 100, 50);
+
+ctx.transform(1,0, 0,1, 0,0);
+ctx.fillStyle = '#0f0';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/transformations/2d.transformation.transform.multiply.html b/testing/web-platform/tests/2dcontext/transformations/2d.transformation.transform.multiply.html
new file mode 100644
index 000000000..0313602ab
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/transformations/2d.transformation.transform.multiply.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.transformation.transform.multiply</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.transformation.transform.multiply</h1>
+<p class="desc">transform() multiplies the CTM</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("transform() multiplies the CTM");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#f00';
+ctx.fillRect(0, 0, 100, 50);
+
+ctx.transform(1,2, 3,4, 5,6);
+ctx.transform(-2,1, 3/2,-1/2, 1,-2);
+ctx.fillStyle = '#0f0';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/transformations/2d.transformation.transform.nonfinite.html b/testing/web-platform/tests/2dcontext/transformations/2d.transformation.transform.nonfinite.html
new file mode 100644
index 000000000..1b12766cd
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/transformations/2d.transformation.transform.nonfinite.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.transformation.transform.nonfinite</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.transformation.transform.nonfinite</h1>
+<p class="desc">transform() with Infinity/NaN is ignored</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("transform() with Infinity/NaN is ignored");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#f00';
+ctx.fillRect(0, 0, 100, 50);
+
+ctx.translate(100, 10);
+ctx.transform(Infinity, 0, 0, 0, 0, 0);
+ctx.transform(-Infinity, 0, 0, 0, 0, 0);
+ctx.transform(NaN, 0, 0, 0, 0, 0);
+ctx.transform(0, Infinity, 0, 0, 0, 0);
+ctx.transform(0, -Infinity, 0, 0, 0, 0);
+ctx.transform(0, NaN, 0, 0, 0, 0);
+ctx.transform(0, 0, Infinity, 0, 0, 0);
+ctx.transform(0, 0, -Infinity, 0, 0, 0);
+ctx.transform(0, 0, NaN, 0, 0, 0);
+ctx.transform(0, 0, 0, Infinity, 0, 0);
+ctx.transform(0, 0, 0, -Infinity, 0, 0);
+ctx.transform(0, 0, 0, NaN, 0, 0);
+ctx.transform(0, 0, 0, 0, Infinity, 0);
+ctx.transform(0, 0, 0, 0, -Infinity, 0);
+ctx.transform(0, 0, 0, 0, NaN, 0);
+ctx.transform(0, 0, 0, 0, 0, Infinity);
+ctx.transform(0, 0, 0, 0, 0, -Infinity);
+ctx.transform(0, 0, 0, 0, 0, NaN);
+ctx.transform(Infinity, Infinity, 0, 0, 0, 0);
+ctx.transform(Infinity, Infinity, Infinity, 0, 0, 0);
+ctx.transform(Infinity, Infinity, Infinity, Infinity, 0, 0);
+ctx.transform(Infinity, Infinity, Infinity, Infinity, Infinity, 0);
+ctx.transform(Infinity, Infinity, Infinity, Infinity, Infinity, Infinity);
+ctx.transform(Infinity, Infinity, Infinity, Infinity, 0, Infinity);
+ctx.transform(Infinity, Infinity, Infinity, 0, Infinity, 0);
+ctx.transform(Infinity, Infinity, Infinity, 0, Infinity, Infinity);
+ctx.transform(Infinity, Infinity, Infinity, 0, 0, Infinity);
+ctx.transform(Infinity, Infinity, 0, Infinity, 0, 0);
+ctx.transform(Infinity, Infinity, 0, Infinity, Infinity, 0);
+ctx.transform(Infinity, Infinity, 0, Infinity, Infinity, Infinity);
+ctx.transform(Infinity, Infinity, 0, Infinity, 0, Infinity);
+ctx.transform(Infinity, Infinity, 0, 0, Infinity, 0);
+ctx.transform(Infinity, Infinity, 0, 0, Infinity, Infinity);
+ctx.transform(Infinity, Infinity, 0, 0, 0, Infinity);
+ctx.transform(Infinity, 0, Infinity, 0, 0, 0);
+ctx.transform(Infinity, 0, Infinity, Infinity, 0, 0);
+ctx.transform(Infinity, 0, Infinity, Infinity, Infinity, 0);
+ctx.transform(Infinity, 0, Infinity, Infinity, Infinity, Infinity);
+ctx.transform(Infinity, 0, Infinity, Infinity, 0, Infinity);
+ctx.transform(Infinity, 0, Infinity, 0, Infinity, 0);
+ctx.transform(Infinity, 0, Infinity, 0, Infinity, Infinity);
+ctx.transform(Infinity, 0, Infinity, 0, 0, Infinity);
+ctx.transform(Infinity, 0, 0, Infinity, 0, 0);
+ctx.transform(Infinity, 0, 0, Infinity, Infinity, 0);
+ctx.transform(Infinity, 0, 0, Infinity, Infinity, Infinity);
+ctx.transform(Infinity, 0, 0, Infinity, 0, Infinity);
+ctx.transform(Infinity, 0, 0, 0, Infinity, 0);
+ctx.transform(Infinity, 0, 0, 0, Infinity, Infinity);
+ctx.transform(Infinity, 0, 0, 0, 0, Infinity);
+ctx.transform(0, Infinity, Infinity, 0, 0, 0);
+ctx.transform(0, Infinity, Infinity, Infinity, 0, 0);
+ctx.transform(0, Infinity, Infinity, Infinity, Infinity, 0);
+ctx.transform(0, Infinity, Infinity, Infinity, Infinity, Infinity);
+ctx.transform(0, Infinity, Infinity, Infinity, 0, Infinity);
+ctx.transform(0, Infinity, Infinity, 0, Infinity, 0);
+ctx.transform(0, Infinity, Infinity, 0, Infinity, Infinity);
+ctx.transform(0, Infinity, Infinity, 0, 0, Infinity);
+ctx.transform(0, Infinity, 0, Infinity, 0, 0);
+ctx.transform(0, Infinity, 0, Infinity, Infinity, 0);
+ctx.transform(0, Infinity, 0, Infinity, Infinity, Infinity);
+ctx.transform(0, Infinity, 0, Infinity, 0, Infinity);
+ctx.transform(0, Infinity, 0, 0, Infinity, 0);
+ctx.transform(0, Infinity, 0, 0, Infinity, Infinity);
+ctx.transform(0, Infinity, 0, 0, 0, Infinity);
+ctx.transform(0, 0, Infinity, Infinity, 0, 0);
+ctx.transform(0, 0, Infinity, Infinity, Infinity, 0);
+ctx.transform(0, 0, Infinity, Infinity, Infinity, Infinity);
+ctx.transform(0, 0, Infinity, Infinity, 0, Infinity);
+ctx.transform(0, 0, Infinity, 0, Infinity, 0);
+ctx.transform(0, 0, Infinity, 0, Infinity, Infinity);
+ctx.transform(0, 0, Infinity, 0, 0, Infinity);
+ctx.transform(0, 0, 0, Infinity, Infinity, 0);
+ctx.transform(0, 0, 0, Infinity, Infinity, Infinity);
+ctx.transform(0, 0, 0, Infinity, 0, Infinity);
+ctx.transform(0, 0, 0, 0, Infinity, Infinity);
+
+ctx.fillStyle = '#0f0';
+ctx.fillRect(-100, -10, 100, 50);
+
+_assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/transformations/2d.transformation.transform.skewed.html b/testing/web-platform/tests/2dcontext/transformations/2d.transformation.transform.skewed.html
new file mode 100644
index 000000000..cf723c7c2
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/transformations/2d.transformation.transform.skewed.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.transformation.transform.skewed</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.transformation.transform.skewed</h1>
+<p class="desc">transform() with skewy matrix transforms 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("transform() with skewy matrix transforms correctly");
+_addTest(function(canvas, ctx) {
+
+// Create green with a red square ring inside it
+ctx.fillStyle = '#0f0';
+ctx.fillRect(0, 0, 100, 50);
+ctx.fillStyle = '#f00';
+ctx.fillRect(20, 10, 60, 30);
+ctx.fillStyle = '#0f0';
+ctx.fillRect(40, 20, 20, 10);
+
+// Draw a skewed shape to fill that gap, to make sure it is aligned correctly
+ctx.transform(1,4, 2,3, 5,6);
+// Post-transform coordinates:
+//   [[20,10],[80,10],[80,40],[20,40],[20,10],[40,20],[40,30],[60,30],[60,20],[40,20],[20,10]];
+// Hence pre-transform coordinates:
+var pts=[[-7.4,11.2],[-43.4,59.2],[-31.4,53.2],[4.6,5.2],[-7.4,11.2],
+         [-15.4,25.2],[-11.4,23.2],[-23.4,39.2],[-27.4,41.2],[-15.4,25.2],
+         [-7.4,11.2]];
+ctx.beginPath();
+ctx.moveTo(pts[0][0], pts[0][1]);
+for (var i = 0; i < pts.length; ++i)
+    ctx.lineTo(pts[i][0], pts[i][1]);
+ctx.fill();
+_assertPixel(canvas, 21,11, 0,255,0,255, "21,11", "0,255,0,255");
+_assertPixel(canvas, 79,11, 0,255,0,255, "79,11", "0,255,0,255");
+_assertPixel(canvas, 21,39, 0,255,0,255, "21,39", "0,255,0,255");
+_assertPixel(canvas, 79,39, 0,255,0,255, "79,39", "0,255,0,255");
+_assertPixel(canvas, 39,19, 0,255,0,255, "39,19", "0,255,0,255");
+_assertPixel(canvas, 61,19, 0,255,0,255, "61,19", "0,255,0,255");
+_assertPixel(canvas, 39,31, 0,255,0,255, "39,31", "0,255,0,255");
+_assertPixel(canvas, 61,31, 0,255,0,255, "61,31", "0,255,0,255");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/transformations/2d.transformation.translate.basic.html b/testing/web-platform/tests/2dcontext/transformations/2d.transformation.translate.basic.html
new file mode 100644
index 000000000..0238f8d0b
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/transformations/2d.transformation.translate.basic.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.transformation.translate.basic</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.transformation.translate.basic</h1>
+<p class="desc">translate() 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>
+<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("translate() works");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#f00';
+ctx.fillRect(0, 0, 100, 50);
+
+ctx.translate(100, 50);
+ctx.fillStyle = '#0f0';
+ctx.fillRect(-100, -50, 100, 50);
+_assertPixel(canvas, 90,40, 0,255,0,255, "90,40", "0,255,0,255");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/transformations/2d.transformation.translate.nonfinite.html b/testing/web-platform/tests/2dcontext/transformations/2d.transformation.translate.nonfinite.html
new file mode 100644
index 000000000..d0ff4d748
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/transformations/2d.transformation.translate.nonfinite.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
+<title>Canvas test: 2d.transformation.translate.nonfinite</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/canvas-tests.js"></script>
+<link rel="stylesheet" href="/common/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.transformation.translate.nonfinite</h1>
+<p class="desc">translate() with Infinity/NaN is ignored</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("translate() with Infinity/NaN is ignored");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#f00';
+ctx.fillRect(0, 0, 100, 50);
+
+ctx.translate(100, 10);
+ctx.translate(Infinity, 0.1);
+ctx.translate(-Infinity, 0.1);
+ctx.translate(NaN, 0.1);
+ctx.translate(0.1, Infinity);
+ctx.translate(0.1, -Infinity);
+ctx.translate(0.1, NaN);
+ctx.translate(Infinity, Infinity);
+
+ctx.fillStyle = '#0f0';
+ctx.fillRect(-100, -10, 100, 50);
+
+_assertPixel(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/2dcontext/transformations/canvas_transformations_reset_001-ref.html b/testing/web-platform/tests/2dcontext/transformations/canvas_transformations_reset_001-ref.html
new file mode 100644
index 000000000..caeea04ce
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/transformations/canvas_transformations_reset_001-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<body>
+<style>
+  html, body, div {
+    margin: 0;
+    padding: 0;
+  }
+  div {
+    width: 75px;
+    height: 75px;
+    float: left;
+  }
+</style>
+
+<div style="background-color:red"></div>
+<div style="clear:left"></div>
+<div style="background-color:blue"></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/2dcontext/transformations/canvas_transformations_reset_001.html b/testing/web-platform/tests/2dcontext/transformations/canvas_transformations_reset_001.html
new file mode 100644
index 000000000..c12acbf6f
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/transformations/canvas_transformations_reset_001.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="match" href="canvas_transformations_reset_001-ref.html">
+<style>
+  html, body {
+    margin: 0;
+    padding: 0;
+  }
+</style>
+<canvas id="c" width="150" height="150"></canvas>
+<script>
+var c = document.getElementById("c");
+var ctx = c.getContext("2d");
+
+ctx.translate(75, 75);
+ctx.fillStyle = 'blue';
+ctx.fillRect(0, 0, 75, 75);
+
+ctx.resetTransform();
+ctx.fillStyle = 'red';
+ctx.fillRect(0, 0, 75, 75);
+</script>
diff --git a/testing/web-platform/tests/2dcontext/transformations/canvas_transformations_scale_001-ref.htm b/testing/web-platform/tests/2dcontext/transformations/canvas_transformations_scale_001-ref.htm
new file mode 100644
index 000000000..1201bcca9
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/transformations/canvas_transformations_scale_001-ref.htm
@@ -0,0 +1,11 @@
+<!doctype HTML>
+<html>
+    <head>
+        <title>HTML5 Canvas Test: scale() transformation</title>
+        <link rel="author" title="Microsoft" href="http://www.microsoft.com" />
+    </head>
+    <body>
+        <p>Description: The scale(x, y) method must add the scaling transformation described by the arguments to the transformation matrix.</p>
+        <div><img alt='black rectangle' src="/images/black-rectangle.png"></div>
+    </body>
+</html>
diff --git a/testing/web-platform/tests/2dcontext/transformations/canvas_transformations_scale_001.htm b/testing/web-platform/tests/2dcontext/transformations/canvas_transformations_scale_001.htm
new file mode 100644
index 000000000..4c027202e
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/transformations/canvas_transformations_scale_001.htm
@@ -0,0 +1,30 @@
+<!doctype HTML>
+<html>
+    <head>
+        <title>HTML5 Canvas Test: scale() transformation</title>
+        <link rel="match" href="canvas_transformations_scale_001-ref.htm">
+        <link rel="author" title="Microsoft" href="http://www.microsoft.com" />
+        <link rel="help" href="http://www.w3.org/TR/2dcontext/#dom-context-2d-scale" />
+        <meta name="assert" content="The scale(x, y) method must add the scaling transformation described by the arguments to the transformation matrix." />
+        <script type="text/javascript">
+            function runTest()
+            {
+                var canvas = document.getElementById("canvas1");
+                var ctx = canvas.getContext("2d");
+
+                // Draw a red rectangle.
+                ctx.fillStyle = "rgba(255, 0, 0, 1.0)";
+                ctx.fillRect(0, 0, 100, 50);
+
+                // Draw a black rectangle with scaling.
+                ctx.fillStyle = "rgba(0, 0, 0, 1.0)";
+                ctx.scale(2, 2);
+                ctx.fillRect(0, 0, 50, 25);
+            }
+        </script>
+    </head>
+    <body onload="runTest()">
+        <p>Description: The scale(x, y) method must add the scaling transformation described by the arguments to the transformation matrix.</p>
+        <canvas id="canvas1" width="300" height="150">Browser does not support HTML5 Canvas.</canvas>
+    </body>
+</html>
diff --git a/testing/web-platform/tests/2dcontext/transformations/transform_a.html b/testing/web-platform/tests/2dcontext/transformations/transform_a.html
new file mode 100644
index 000000000..8c1f59efd
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/transformations/transform_a.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<meta charset=utf-8>
+<link rel=match href=transform_ref.html>
+<style>
+html, body {
+    margin: 0;
+}
+</style>
+<canvas id=c width=400 height=300></canvas>
+<script>
+var canvas = document.getElementById('c');
+var ctx = canvas.getContext('2d');
+ctx.scale(3, 3);
+ctx.fillStyle = 'rgb(255, 0, 0)';
+ctx.beginPath();
+ctx.moveTo(10, 10);
+ctx.bezierCurveTo(10, 10, 20, 10, 20, 10);
+ctx.bezierCurveTo(20, 10, 20, 20, 20, 20);
+ctx.bezierCurveTo(20, 20, 10, 20, 10, 20);
+ctx.closePath();
+ctx.fill();
+</script>
diff --git a/testing/web-platform/tests/2dcontext/transformations/transform_ref.html b/testing/web-platform/tests/2dcontext/transformations/transform_ref.html
new file mode 100644
index 000000000..2a166c36c
--- /dev/null
+++ b/testing/web-platform/tests/2dcontext/transformations/transform_ref.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<meta charset=utf-8>
+<style>
+html, body {
+    margin: 0;
+}
+section {
+    position: absolute;
+    background: rgb(255, 0, 0);
+    width: 30px;
+    height: 30px;
+    top: 30px;
+    left: 30px;
+}
+</style>
+<section></section>
author	Matt A. Tobin <mattatobin@localhost.localdomain>	2018-02-02 04:16:08 -0500
committer	Matt A. Tobin <mattatobin@localhost.localdomain>	2018-02-02 04:16:08 -0500
commit	5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree	10027f336435511475e392454359edea8e25895d /testing/web-platform/tests/2dcontext/transformations
parent	49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
download	UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip