diff --git a/tests/wpt/metadata-layout-2020/FileAPI/url/url-in-tags-revoke.window.js.ini b/tests/wpt/metadata-layout-2020/FileAPI/url/url-in-tags-revoke.window.js.ini
index 76b44d9e9cf..3605e8f3fc9 100644
--- a/tests/wpt/metadata-layout-2020/FileAPI/url/url-in-tags-revoke.window.js.ini
+++ b/tests/wpt/metadata-layout-2020/FileAPI/url/url-in-tags-revoke.window.js.ini
@@ -4,7 +4,7 @@
     expected: TIMEOUT
 
   [Opening a blob URL in a new window immediately before revoking it works.]
-    expected: FAIL
+    expected: TIMEOUT
 
   [Fetching a blob URL immediately before revoking it works in an iframe.]
     expected: FAIL
diff --git a/tests/wpt/metadata-layout-2020/css/CSS2/floats/hit-test-floats-002.html.ini b/tests/wpt/metadata-layout-2020/css/CSS2/floats/hit-test-floats-002.html.ini
new file mode 100644
index 00000000000..f64b45fea6b
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/CSS2/floats/hit-test-floats-002.html.ini
@@ -0,0 +1,4 @@
+[hit-test-floats-002.html]
+  [Hit test float]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata-layout-2020/css/CSS2/floats/hit-test-floats-005.html.ini b/tests/wpt/metadata-layout-2020/css/CSS2/floats/hit-test-floats-005.html.ini
new file mode 100644
index 00000000000..baa9f1a7541
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/CSS2/floats/hit-test-floats-005.html.ini
@@ -0,0 +1,4 @@
+[hit-test-floats-005.html]
+  [Miss clipped float]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata-layout-2020/css/css-transforms/subpixel-transform-changes-004.html.ini b/tests/wpt/metadata-layout-2020/css/css-transforms/subpixel-transform-changes-004.html.ini
new file mode 100644
index 00000000000..e169c08be32
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/css/css-transforms/subpixel-transform-changes-004.html.ini
@@ -0,0 +1,2 @@
+[subpixel-transform-changes-004.html]
+  expected: TIMEOUT
diff --git a/tests/wpt/metadata-layout-2020/css/cssom-view/elementFromPoint-001.html.ini b/tests/wpt/metadata-layout-2020/css/cssom-view/elementFromPoint-001.html.ini
deleted file mode 100644
index e38782d8c85..00000000000
--- a/tests/wpt/metadata-layout-2020/css/cssom-view/elementFromPoint-001.html.ini
+++ /dev/null
@@ -1,4 +0,0 @@
-[elementFromPoint-001.html]
-  [CSSOM View - 5 - extensions to the Document interface]
-    expected: FAIL
-
diff --git a/tests/wpt/metadata-layout-2020/css/cssom-view/elementsFromPoint-iframes.html.ini b/tests/wpt/metadata-layout-2020/css/cssom-view/elementsFromPoint-iframes.html.ini
index 6ef8bb1049f..171592fc08f 100644
--- a/tests/wpt/metadata-layout-2020/css/cssom-view/elementsFromPoint-iframes.html.ini
+++ b/tests/wpt/metadata-layout-2020/css/cssom-view/elementsFromPoint-iframes.html.ini
@@ -2,6 +2,3 @@
   [elementsFromPoint on the root document for points in iframe elements]
     expected: FAIL
 
-  [elementsFromPoint on inner documents]
-    expected: FAIL
-
diff --git a/tests/wpt/metadata-layout-2020/fetch/content-type/response.window.js.ini b/tests/wpt/metadata-layout-2020/fetch/content-type/response.window.js.ini
index 2ece189c0b2..d33867b06bd 100644
--- a/tests/wpt/metadata-layout-2020/fetch/content-type/response.window.js.ini
+++ b/tests/wpt/metadata-layout-2020/fetch/content-type/response.window.js.ini
@@ -312,24 +312,24 @@
   [Response: combined response Content-Type: text/html;" \\" text/plain ";charset=GBK]
     expected: NOTRUN
 
-  [<iframe>: combined response Content-Type: text/html;" text/plain]
-    expected: FAIL
-
   [<iframe>: combined response Content-Type: text/html;charset=gbk text/plain text/html]
     expected: FAIL
 
-  [<iframe>: separate response Content-Type: text/html;" text/plain]
-    expected: FAIL
-
   [<iframe>: separate response Content-Type: text/html;x=" text/plain]
     expected: FAIL
 
-  [<iframe>: separate response Content-Type: text/plain */*;charset=gbk]
-    expected: FAIL
-
   [<iframe>: combined response Content-Type: text/html */*]
     expected: FAIL
 
   [<iframe>: combined response Content-Type: text/html;" \\" text/plain]
     expected: FAIL
 
+  [<iframe>: combined response Content-Type: */* text/html]
+    expected: FAIL
+
+  [<iframe>: combined response Content-Type: text/html */*;charset=gbk]
+    expected: FAIL
+
+  [<iframe>: combined response Content-Type: text/html;x=" text/plain]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata-layout-2020/fetch/content-type/script.window.js.ini b/tests/wpt/metadata-layout-2020/fetch/content-type/script.window.js.ini
index b2ffc8abf78..25318ac5846 100644
--- a/tests/wpt/metadata-layout-2020/fetch/content-type/script.window.js.ini
+++ b/tests/wpt/metadata-layout-2020/fetch/content-type/script.window.js.ini
@@ -53,9 +53,6 @@
   [combined text/javascript ]
     expected: FAIL
 
-  [separate text/javascript x/x]
-    expected: FAIL
-
   [separate text/javascript error]
     expected: FAIL
 
diff --git a/tests/wpt/metadata-layout-2020/fetch/nosniff/parsing-nosniff.window.js.ini b/tests/wpt/metadata-layout-2020/fetch/nosniff/parsing-nosniff.window.js.ini
index 70efd28ddfc..30e1b851fd4 100644
--- a/tests/wpt/metadata-layout-2020/fetch/nosniff/parsing-nosniff.window.js.ini
+++ b/tests/wpt/metadata-layout-2020/fetch/nosniff/parsing-nosniff.window.js.ini
@@ -11,6 +11,3 @@
   [X-Content-Type-Options%3A%20nosniff%2C%2C%40%23%24%23%25%25%26%5E%26%5E*()()11!]
     expected: FAIL
 
-  [X-Content-Type-Options%3A%20no%0D%0AX-Content-Type-Options%3A%20nosniff]
-    expected: FAIL
-
diff --git a/tests/wpt/metadata/html/browsers/history/the-history-interface/traverse_the_history_2.html.ini b/tests/wpt/metadata-layout-2020/html/browsers/history/the-history-interface/traverse_the_history_4.html.ini
similarity index 71%
rename from tests/wpt/metadata/html/browsers/history/the-history-interface/traverse_the_history_2.html.ini
rename to tests/wpt/metadata-layout-2020/html/browsers/history/the-history-interface/traverse_the_history_4.html.ini
index 75d75b4cda2..385376c7321 100644
--- a/tests/wpt/metadata/html/browsers/history/the-history-interface/traverse_the_history_2.html.ini
+++ b/tests/wpt/metadata-layout-2020/html/browsers/history/the-history-interface/traverse_the_history_4.html.ini
@@ -1,4 +1,4 @@
-[traverse_the_history_2.html]
+[traverse_the_history_4.html]
   [Multiple history traversals, last would be aborted]
     expected: FAIL
 
diff --git a/tests/wpt/metadata-layout-2020/html/browsers/history/the-history-interface/traverse_the_history_5.html.ini b/tests/wpt/metadata-layout-2020/html/browsers/history/the-history-interface/traverse_the_history_5.html.ini
deleted file mode 100644
index dc2e45516de..00000000000
--- a/tests/wpt/metadata-layout-2020/html/browsers/history/the-history-interface/traverse_the_history_5.html.ini
+++ /dev/null
@@ -1,4 +0,0 @@
-[traverse_the_history_5.html]
-  [Multiple history traversals, last would be aborted]
-    expected: FAIL
-
diff --git a/tests/wpt/metadata-layout-2020/html/browsers/windows/embedded-opener-remove-frame.html.ini b/tests/wpt/metadata-layout-2020/html/browsers/windows/embedded-opener-remove-frame.html.ini
index 8e2a63e3b7f..9a85a905394 100644
--- a/tests/wpt/metadata-layout-2020/html/browsers/windows/embedded-opener-remove-frame.html.ini
+++ b/tests/wpt/metadata-layout-2020/html/browsers/windows/embedded-opener-remove-frame.html.ini
@@ -1,5 +1,4 @@
 [embedded-opener-remove-frame.html]
-  expected: CRASH
   [opener of discarded nested browsing context]
     expected: FAIL
 
diff --git a/tests/wpt/metadata/html/canvas/offscreen/convert-to-blob/offscreencanvas.convert.to.blob.html.ini b/tests/wpt/metadata-layout-2020/html/canvas/offscreen/manual/convert-to-blob/offscreencanvas.convert.to.blob.html.ini
similarity index 100%
rename from tests/wpt/metadata/html/canvas/offscreen/convert-to-blob/offscreencanvas.convert.to.blob.html.ini
rename to tests/wpt/metadata-layout-2020/html/canvas/offscreen/manual/convert-to-blob/offscreencanvas.convert.to.blob.html.ini
diff --git a/tests/wpt/metadata/html/canvas/offscreen/convert-to-blob/offscreencanvas.convert.to.blob.w.html.ini b/tests/wpt/metadata-layout-2020/html/canvas/offscreen/manual/convert-to-blob/offscreencanvas.convert.to.blob.w.html.ini
similarity index 100%
rename from tests/wpt/metadata/html/canvas/offscreen/convert-to-blob/offscreencanvas.convert.to.blob.w.html.ini
rename to tests/wpt/metadata-layout-2020/html/canvas/offscreen/manual/convert-to-blob/offscreencanvas.convert.to.blob.w.html.ini
diff --git a/tests/wpt/metadata/html/canvas/offscreen/filter/offscreencanvas.filter.w.html.ini b/tests/wpt/metadata-layout-2020/html/canvas/offscreen/manual/filter/offscreencanvas.filter.w.html.ini
similarity index 98%
rename from tests/wpt/metadata/html/canvas/offscreen/filter/offscreencanvas.filter.w.html.ini
rename to tests/wpt/metadata-layout-2020/html/canvas/offscreen/manual/filter/offscreencanvas.filter.w.html.ini
index 82b9523635b..d230a9d8d17 100644
--- a/tests/wpt/metadata/html/canvas/offscreen/filter/offscreencanvas.filter.w.html.ini
+++ b/tests/wpt/metadata-layout-2020/html/canvas/offscreen/manual/filter/offscreencanvas.filter.w.html.ini
@@ -1,3 +1,4 @@
 [offscreencanvas.filter.w.html]
   [offscreencanvas]
     expected: FAIL
+
diff --git a/tests/wpt/metadata/html/canvas/offscreen/the-offscreen-canvas/offscreencanvas.commit.html.ini b/tests/wpt/metadata-layout-2020/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.commit.html.ini
similarity index 100%
rename from tests/wpt/metadata/html/canvas/offscreen/the-offscreen-canvas/offscreencanvas.commit.html.ini
rename to tests/wpt/metadata-layout-2020/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.commit.html.ini
diff --git a/tests/wpt/metadata/html/canvas/offscreen/the-offscreen-canvas/offscreencanvas.commit.w.html.ini b/tests/wpt/metadata-layout-2020/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.commit.w.html.ini
similarity index 100%
rename from tests/wpt/metadata/html/canvas/offscreen/the-offscreen-canvas/offscreencanvas.commit.w.html.ini
rename to tests/wpt/metadata-layout-2020/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.commit.w.html.ini
diff --git a/tests/wpt/metadata/html/canvas/offscreen/the-offscreen-canvas/offscreencanvas.constructor.html.ini b/tests/wpt/metadata-layout-2020/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.constructor.html.ini
similarity index 100%
rename from tests/wpt/metadata/html/canvas/offscreen/the-offscreen-canvas/offscreencanvas.constructor.html.ini
rename to tests/wpt/metadata-layout-2020/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.constructor.html.ini
diff --git a/tests/wpt/metadata/html/canvas/offscreen/the-offscreen-canvas/offscreencanvas.constructor.worker.js.ini b/tests/wpt/metadata-layout-2020/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.constructor.worker.js.ini
similarity index 100%
rename from tests/wpt/metadata/html/canvas/offscreen/the-offscreen-canvas/offscreencanvas.constructor.worker.js.ini
rename to tests/wpt/metadata-layout-2020/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.constructor.worker.js.ini
diff --git a/tests/wpt/metadata/html/canvas/offscreen/the-offscreen-canvas/offscreencanvas.getcontext.html.ini b/tests/wpt/metadata-layout-2020/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.getcontext.html.ini
similarity index 100%
rename from tests/wpt/metadata/html/canvas/offscreen/the-offscreen-canvas/offscreencanvas.getcontext.html.ini
rename to tests/wpt/metadata-layout-2020/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.getcontext.html.ini
diff --git a/tests/wpt/metadata/html/canvas/offscreen/the-offscreen-canvas/offscreencanvas.getcontext.worker.js.ini b/tests/wpt/metadata-layout-2020/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.getcontext.worker.js.ini
similarity index 100%
rename from tests/wpt/metadata/html/canvas/offscreen/the-offscreen-canvas/offscreencanvas.getcontext.worker.js.ini
rename to tests/wpt/metadata-layout-2020/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.getcontext.worker.js.ini
diff --git a/tests/wpt/metadata/html/canvas/offscreen/the-offscreen-canvas/offscreencanvas.resize.html.ini b/tests/wpt/metadata-layout-2020/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.resize.html.ini
similarity index 100%
rename from tests/wpt/metadata/html/canvas/offscreen/the-offscreen-canvas/offscreencanvas.resize.html.ini
rename to tests/wpt/metadata-layout-2020/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.resize.html.ini
diff --git a/tests/wpt/metadata/html/canvas/offscreen/the-offscreen-canvas/offscreencanvas.transfer.to.imagebitmap.html.ini b/tests/wpt/metadata-layout-2020/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.transfer.to.imagebitmap.html.ini
similarity index 100%
rename from tests/wpt/metadata/html/canvas/offscreen/the-offscreen-canvas/offscreencanvas.transfer.to.imagebitmap.html.ini
rename to tests/wpt/metadata-layout-2020/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.transfer.to.imagebitmap.html.ini
diff --git a/tests/wpt/metadata/html/canvas/offscreen/the-offscreen-canvas/offscreencanvas.transfer.to.imagebitmap.w.html.ini b/tests/wpt/metadata-layout-2020/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.transfer.to.imagebitmap.w.html.ini
similarity index 100%
rename from tests/wpt/metadata/html/canvas/offscreen/the-offscreen-canvas/offscreencanvas.transfer.to.imagebitmap.w.html.ini
rename to tests/wpt/metadata-layout-2020/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.transfer.to.imagebitmap.w.html.ini
diff --git a/tests/wpt/metadata/html/canvas/offscreen/the-offscreen-canvas/offscreencanvas.transfercontrol.to.offscreen.html.ini b/tests/wpt/metadata-layout-2020/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.transfercontrol.to.offscreen.html.ini
similarity index 100%
rename from tests/wpt/metadata/html/canvas/offscreen/the-offscreen-canvas/offscreencanvas.transfercontrol.to.offscreen.html.ini
rename to tests/wpt/metadata-layout-2020/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.transfercontrol.to.offscreen.html.ini
diff --git a/tests/wpt/metadata/html/canvas/offscreen/the-offscreen-canvas/offscreencanvas.transfercontrol.to.offscreen.w.html.ini b/tests/wpt/metadata-layout-2020/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.transfercontrol.to.offscreen.w.html.ini
similarity index 100%
rename from tests/wpt/metadata/html/canvas/offscreen/the-offscreen-canvas/offscreencanvas.transfercontrol.to.offscreen.w.html.ini
rename to tests/wpt/metadata-layout-2020/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.transfercontrol.to.offscreen.w.html.ini
diff --git a/tests/wpt/metadata/html/canvas/offscreen/the-offscreen-canvas/offscreencanvas.transferrable.html.ini b/tests/wpt/metadata-layout-2020/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.transferrable.html.ini
similarity index 100%
rename from tests/wpt/metadata/html/canvas/offscreen/the-offscreen-canvas/offscreencanvas.transferrable.html.ini
rename to tests/wpt/metadata-layout-2020/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.transferrable.html.ini
diff --git a/tests/wpt/metadata/html/canvas/offscreen/the-offscreen-canvas/offscreencanvas.transferrable.w.html.ini b/tests/wpt/metadata-layout-2020/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.transferrable.w.html.ini
similarity index 100%
rename from tests/wpt/metadata/html/canvas/offscreen/the-offscreen-canvas/offscreencanvas.transferrable.w.html.ini
rename to tests/wpt/metadata-layout-2020/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.transferrable.w.html.ini
diff --git a/tests/wpt/metadata-layout-2020/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_escaping-2.html.ini b/tests/wpt/metadata-layout-2020/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_escaping-2.html.ini
index e63fe7c263e..c6f45be1eb2 100644
--- a/tests/wpt/metadata-layout-2020/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_escaping-2.html.ini
+++ b/tests/wpt/metadata-layout-2020/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_escaping-2.html.ini
@@ -1,5 +1,5 @@
 [iframe_sandbox_popups_escaping-2.html]
-  expected: CRASH
+  expected: TIMEOUT
   [Check that popups from a sandboxed iframe escape the sandbox if\n       allow-popups-to-escape-sandbox is used]
     expected: TIMEOUT
 
diff --git a/tests/wpt/metadata-layout-2020/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_nonescaping-2.html.ini b/tests/wpt/metadata-layout-2020/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_nonescaping-2.html.ini
index 0218bc9ba9d..0407f0cc2b7 100644
--- a/tests/wpt/metadata-layout-2020/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_nonescaping-2.html.ini
+++ b/tests/wpt/metadata-layout-2020/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_nonescaping-2.html.ini
@@ -1,4 +1,5 @@
 [iframe_sandbox_popups_nonescaping-2.html]
+  expected: TIMEOUT
   [Check that popups from a sandboxed iframe do not escape the sandbox]
-    expected: FAIL
+    expected: NOTRUN
 
diff --git a/tests/wpt/metadata-layout-2020/wasm/jsapi/constructor/instantiate-bad-imports.any.js.ini b/tests/wpt/metadata-layout-2020/wasm/jsapi/constructor/instantiate-bad-imports.any.js.ini
new file mode 100644
index 00000000000..4ebe0dc6c14
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/wasm/jsapi/constructor/instantiate-bad-imports.any.js.ini
@@ -0,0 +1,5 @@
+[instantiate-bad-imports.any.html]
+  expected: ERROR
+
+[instantiate-bad-imports.any.worker.html]
+  expected: ERROR
diff --git a/tests/wpt/metadata-layout-2020/wasm/jsapi/constructor/instantiate.any.js.ini b/tests/wpt/metadata-layout-2020/wasm/jsapi/constructor/instantiate.any.js.ini
new file mode 100644
index 00000000000..d78a9062cbc
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/wasm/jsapi/constructor/instantiate.any.js.ini
@@ -0,0 +1,75 @@
+[instantiate.any.html]
+  [import with function that takes and returns i64: Module argument]
+    expected: FAIL
+
+  [import with i64-returning function: BufferSource argument]
+    expected: FAIL
+
+  [export i64-returning function: BufferSource argument]
+    expected: FAIL
+
+  [i64 mutable WebAssembly.Global import: Module argument]
+    expected: FAIL
+
+  [Multiple i64 arguments: BufferSource argument]
+    expected: FAIL
+
+  [i64 exports and imports: Module argument]
+    expected: FAIL
+
+  [import with function that takes and returns i64: BufferSource argument]
+    expected: FAIL
+
+  [Multiple i64 arguments: Module argument]
+    expected: FAIL
+
+  [export i64-returning function: Module argument]
+    expected: FAIL
+
+  [i64 exports and imports: BufferSource argument]
+    expected: FAIL
+
+  [import with i64-returning function: Module argument]
+    expected: FAIL
+
+  [i64 mutable WebAssembly.Global import: BufferSource argument]
+    expected: FAIL
+
+
+[instantiate.any.worker.html]
+  [import with function that takes and returns i64: Module argument]
+    expected: FAIL
+
+  [import with i64-returning function: BufferSource argument]
+    expected: FAIL
+
+  [export i64-returning function: BufferSource argument]
+    expected: FAIL
+
+  [i64 mutable WebAssembly.Global import: Module argument]
+    expected: FAIL
+
+  [Multiple i64 arguments: BufferSource argument]
+    expected: FAIL
+
+  [i64 exports and imports: Module argument]
+    expected: FAIL
+
+  [import with function that takes and returns i64: BufferSource argument]
+    expected: FAIL
+
+  [Multiple i64 arguments: Module argument]
+    expected: FAIL
+
+  [export i64-returning function: Module argument]
+    expected: FAIL
+
+  [i64 exports and imports: BufferSource argument]
+    expected: FAIL
+
+  [import with i64-returning function: Module argument]
+    expected: FAIL
+
+  [i64 mutable WebAssembly.Global import: BufferSource argument]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata-layout-2020/wasm/jsapi/global/constructor.any.js.ini b/tests/wpt/metadata-layout-2020/wasm/jsapi/global/constructor.any.js.ini
new file mode 100644
index 00000000000..302d9f341b9
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/wasm/jsapi/global/constructor.any.js.ini
@@ -0,0 +1,63 @@
+[constructor.any.html]
+  [i64 with default]
+    expected: FAIL
+
+  [Explicit value object with toString returning string for type i64]
+    expected: FAIL
+
+  [Explicit value bigint "123" for type i64]
+    expected: FAIL
+
+  [Explicit value "3" for type i64]
+    expected: FAIL
+
+  [Explicit value object with toString returning bigint for type i64]
+    expected: FAIL
+
+  [Explicit value object with valueOf returning string for type i64]
+    expected: FAIL
+
+  [Explicit value true for type i64]
+    expected: FAIL
+
+  [Explicit value undefined for type i64]
+    expected: FAIL
+
+  [Explicit value false for type i64]
+    expected: FAIL
+
+  [Explicit value object with valueOf returning bigint for type i64]
+    expected: FAIL
+
+
+[constructor.any.worker.html]
+  [i64 with default]
+    expected: FAIL
+
+  [Explicit value object with toString returning string for type i64]
+    expected: FAIL
+
+  [Explicit value bigint "123" for type i64]
+    expected: FAIL
+
+  [Explicit value "3" for type i64]
+    expected: FAIL
+
+  [Explicit value object with toString returning bigint for type i64]
+    expected: FAIL
+
+  [Explicit value object with valueOf returning string for type i64]
+    expected: FAIL
+
+  [Explicit value true for type i64]
+    expected: FAIL
+
+  [Explicit value undefined for type i64]
+    expected: FAIL
+
+  [Explicit value false for type i64]
+    expected: FAIL
+
+  [Explicit value object with valueOf returning bigint for type i64]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata-layout-2020/wasm/jsapi/global/value-get-set.any.js.ini b/tests/wpt/metadata-layout-2020/wasm/jsapi/global/value-get-set.any.js.ini
new file mode 100644
index 00000000000..eb913268d4f
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/wasm/jsapi/global/value-get-set.any.js.ini
@@ -0,0 +1,105 @@
+[value-get-set.any.html]
+  [Immutable i64 (undefined)]
+    expected: FAIL
+
+  [i64 mutability]
+    expected: FAIL
+
+  [Immutable i64 (false)]
+    expected: FAIL
+
+  [Immutable i64 with ToNumber side-effects (missing)]
+    expected: FAIL
+
+  [Immutable i64 with ToNumber side-effects (empty string)]
+    expected: FAIL
+
+  [Immutable i64 (empty string)]
+    expected: FAIL
+
+  [Immutable i64 with ToNumber side-effects (zero)]
+    expected: FAIL
+
+  [Immutable i64 with ToNumber side-effects (undefined)]
+    expected: FAIL
+
+  [Mutable i64 (true on prototype)]
+    expected: FAIL
+
+  [Immutable i64 (zero)]
+    expected: FAIL
+
+  [Immutable i64 with ToNumber side-effects (false)]
+    expected: FAIL
+
+  [Immutable i64 (missing)]
+    expected: FAIL
+
+  [Mutable i64 (string)]
+    expected: FAIL
+
+  [Immutable i64 with ToNumber side-effects (null)]
+    expected: FAIL
+
+  [Mutable i64 (one)]
+    expected: FAIL
+
+  [Mutable i64 (true)]
+    expected: FAIL
+
+  [Immutable i64 (null)]
+    expected: FAIL
+
+
+[value-get-set.any.worker.html]
+  [Immutable i64 (undefined)]
+    expected: FAIL
+
+  [i64 mutability]
+    expected: FAIL
+
+  [Immutable i64 (false)]
+    expected: FAIL
+
+  [Immutable i64 with ToNumber side-effects (missing)]
+    expected: FAIL
+
+  [Immutable i64 with ToNumber side-effects (empty string)]
+    expected: FAIL
+
+  [Immutable i64 (empty string)]
+    expected: FAIL
+
+  [Immutable i64 with ToNumber side-effects (zero)]
+    expected: FAIL
+
+  [Immutable i64 with ToNumber side-effects (undefined)]
+    expected: FAIL
+
+  [Mutable i64 (true on prototype)]
+    expected: FAIL
+
+  [Immutable i64 (zero)]
+    expected: FAIL
+
+  [Immutable i64 with ToNumber side-effects (false)]
+    expected: FAIL
+
+  [Immutable i64 (missing)]
+    expected: FAIL
+
+  [Mutable i64 (string)]
+    expected: FAIL
+
+  [Immutable i64 with ToNumber side-effects (null)]
+    expected: FAIL
+
+  [Mutable i64 (one)]
+    expected: FAIL
+
+  [Mutable i64 (true)]
+    expected: FAIL
+
+  [Immutable i64 (null)]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata-layout-2020/wasm/jsapi/instance/constructor-bad-imports.any.js.ini b/tests/wpt/metadata-layout-2020/wasm/jsapi/instance/constructor-bad-imports.any.js.ini
new file mode 100644
index 00000000000..4a56f7af814
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/wasm/jsapi/instance/constructor-bad-imports.any.js.ini
@@ -0,0 +1,5 @@
+[constructor-bad-imports.any.html]
+  expected: ERROR
+
+[constructor-bad-imports.any.worker.html]
+  expected: ERROR
diff --git a/tests/wpt/metadata-layout-2020/wasm/jsapi/instance/constructor.any.js.ini b/tests/wpt/metadata-layout-2020/wasm/jsapi/instance/constructor.any.js.ini
new file mode 100644
index 00000000000..492affe4218
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/wasm/jsapi/instance/constructor.any.js.ini
@@ -0,0 +1,39 @@
+[constructor.any.html]
+  [import with function that takes and returns i64]
+    expected: FAIL
+
+  [Multiple i64 arguments]
+    expected: FAIL
+
+  [i64 mutable WebAssembly.Global import]
+    expected: FAIL
+
+  [import with i64-returning function]
+    expected: FAIL
+
+  [export i64-returning function]
+    expected: FAIL
+
+  [i64 exports and imports]
+    expected: FAIL
+
+
+[constructor.any.worker.html]
+  [import with function that takes and returns i64]
+    expected: FAIL
+
+  [Multiple i64 arguments]
+    expected: FAIL
+
+  [i64 mutable WebAssembly.Global import]
+    expected: FAIL
+
+  [import with i64-returning function]
+    expected: FAIL
+
+  [export i64-returning function]
+    expected: FAIL
+
+  [i64 exports and imports]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata-layout-2020/wasm/webapi/instantiateStreaming-bad-imports.any.js.ini b/tests/wpt/metadata-layout-2020/wasm/webapi/instantiateStreaming-bad-imports.any.js.ini
new file mode 100644
index 00000000000..802c6da70f4
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/wasm/webapi/instantiateStreaming-bad-imports.any.js.ini
@@ -0,0 +1,419 @@
+[instantiateStreaming-bad-imports.any.serviceworker.html]
+  expected: ERROR
+
+[instantiateStreaming-bad-imports.any.html]
+  expected: ERROR
+  [Importing an f32 global with an incorrectly-typed value: BigInt]
+    expected: NOTRUN
+
+  [Imports argument with missing property: wrong property]
+    expected: NOTRUN
+
+  [Non-object module: symbol "Symbol()"]
+    expected: NOTRUN
+
+  [Importing an f64 global with an incorrectly-typed value: null]
+    expected: NOTRUN
+
+  [Importing an i32 mutable global with an immutable Global object]
+    expected: NOTRUN
+
+  [Importing an f64 global with an incorrectly-typed value: WebAssembly.Global object (wrong value type)]
+    expected: NOTRUN
+
+  [Importing an i64 global with an incorrectly-typed value: Object.create(WebAssembly.Global.prototype)]
+    expected: NOTRUN
+
+  [Importing an i32 global with an incorrectly-typed value: WebAssembly.Global]
+    expected: NOTRUN
+
+  [Importing an f64 global with an incorrectly-typed value: undefined]
+    expected: NOTRUN
+
+  [Importing an f32 global with an incorrectly-typed value: undefined]
+    expected: NOTRUN
+
+  [Importing an f64 global with an incorrectly-typed value: plain object]
+    expected: NOTRUN
+
+  [Importing a function with an incorrectly-typed value: symbol "Symbol()"]
+    expected: NOTRUN
+
+  [Importing an i64 mutable global with a primitive value]
+    expected: NOTRUN
+
+  [Non-object module: 1]
+    expected: NOTRUN
+
+  [Importing an f32 global with an incorrectly-typed value: WebAssembly.Global.prototype]
+    expected: NOTRUN
+
+  [Importing a function with an incorrectly-typed value: 1]
+    expected: NOTRUN
+
+  [Importing an f32 global with an incorrectly-typed value: ""]
+    expected: NOTRUN
+
+  [Importing an i64 global with an incorrectly-typed value: Number]
+    expected: NOTRUN
+
+  [Importing an i64 global with an incorrectly-typed value: ""]
+    expected: NOTRUN
+
+  [Importing an i64 global with an incorrectly-typed value: WebAssembly.Global.prototype]
+    expected: NOTRUN
+
+  [Imports argument with missing property: undefined]
+    expected: NOTRUN
+
+  [Non-object module: ""]
+    expected: NOTRUN
+
+  [Importing an i32 global with an incorrectly-typed value: symbol "Symbol()"]
+    expected: NOTRUN
+
+  [Importing an f64 global with an incorrectly-typed value: symbol "Symbol()"]
+    expected: NOTRUN
+
+  [Importing a function with an incorrectly-typed value: null]
+    expected: NOTRUN
+
+  [Non-object module: NaN]
+    expected: NOTRUN
+
+  [Importing an f64 global with an incorrectly-typed value: WebAssembly.Global.prototype]
+    expected: NOTRUN
+
+  [Importing an f64 global with an incorrectly-typed value: BigInt]
+    expected: NOTRUN
+
+  [Importing an i64 global with an incorrectly-typed value: WebAssembly.Global]
+    expected: NOTRUN
+
+  [Importing an i32 global with an incorrectly-typed value: undefined]
+    expected: NOTRUN
+
+  [Importing an i64 global with an incorrectly-typed value: null]
+    expected: NOTRUN
+
+  [Importing an f64 global with an incorrectly-typed value: Object.create(WebAssembly.Global.prototype)]
+    expected: NOTRUN
+
+  [Non-object module: 0.1]
+    expected: NOTRUN
+
+  [Importing an f64 global with an incorrectly-typed value: WebAssembly.Global]
+    expected: NOTRUN
+
+  [Importing an f32 global with an incorrectly-typed value: null]
+    expected: NOTRUN
+
+  [Importing an i32 global with an incorrectly-typed value: null]
+    expected: NOTRUN
+
+  [Importing an f32 global with an incorrectly-typed value: symbol "Symbol()"]
+    expected: NOTRUN
+
+  [Importing an f32 global with an incorrectly-typed value: plain object]
+    expected: NOTRUN
+
+  [Importing an i32 mutable global with a primitive value]
+    expected: NOTRUN
+
+  [Importing an f32 global with an incorrectly-typed value: WebAssembly.Global object (wrong value type)]
+    expected: NOTRUN
+
+  [Missing imports argument]
+    expected: NOTRUN
+
+  [Importing an f32 global with an incorrectly-typed value: Object.create(WebAssembly.Global.prototype)]
+    expected: NOTRUN
+
+  [Importing an i64 global with an incorrectly-typed value: true]
+    expected: NOTRUN
+
+  [Non-object module: undefined]
+    expected: TIMEOUT
+
+  [Importing a function with an incorrectly-typed value: undefined]
+    expected: NOTRUN
+
+  [Non-object module: true]
+    expected: NOTRUN
+
+  [Importing an f64 global with an incorrectly-typed value: true]
+    expected: NOTRUN
+
+  [Importing an i32 global with an incorrectly-typed value: true]
+    expected: NOTRUN
+
+  [Importing an i32 global with an incorrectly-typed value: WebAssembly.Global object (wrong value type)]
+    expected: NOTRUN
+
+  [Importing an i64 global with an incorrectly-typed value: plain object]
+    expected: NOTRUN
+
+  [Non-object module: null]
+    expected: NOTRUN
+
+  [Importing an i32 global with an incorrectly-typed value: WebAssembly.Global.prototype]
+    expected: NOTRUN
+
+  [Importing an i32 global with an incorrectly-typed value: ""]
+    expected: NOTRUN
+
+  [Importing a function with an incorrectly-typed value: ""]
+    expected: NOTRUN
+
+  [Importing an f32 global with an incorrectly-typed value: true]
+    expected: NOTRUN
+
+  [Importing an i64 global with an incorrectly-typed value: WebAssembly.Global object (wrong value type)]
+    expected: NOTRUN
+
+  [Importing an i32 global with an incorrectly-typed value: BigInt]
+    expected: NOTRUN
+
+  [Importing an f32 global with an incorrectly-typed value: WebAssembly.Global]
+    expected: NOTRUN
+
+  [Importing an i32 global with an incorrectly-typed value: plain object]
+    expected: NOTRUN
+
+  [Importing a function with an incorrectly-typed value: 0.1]
+    expected: NOTRUN
+
+  [Importing an f64 global with an incorrectly-typed value: ""]
+    expected: NOTRUN
+
+  [Importing an i64 global with an incorrectly-typed value: undefined]
+    expected: NOTRUN
+
+  [Importing an i64 global with an incorrectly-typed value: symbol "Symbol()"]
+    expected: NOTRUN
+
+  [Importing a function with an incorrectly-typed value: NaN]
+    expected: NOTRUN
+
+  [Importing a function with an incorrectly-typed value: object "[object Object\]"]
+    expected: NOTRUN
+
+  [Importing an i32 global with an incorrectly-typed value: Object.create(WebAssembly.Global.prototype)]
+    expected: NOTRUN
+
+  [Imports argument with missing property: empty object]
+    expected: NOTRUN
+
+  [Importing a function with an incorrectly-typed value: true]
+    expected: NOTRUN
+
+
+[instantiateStreaming-bad-imports.any.worker.html]
+  expected: ERROR
+  [Importing an f32 global with an incorrectly-typed value: BigInt]
+    expected: NOTRUN
+
+  [Imports argument with missing property: wrong property]
+    expected: NOTRUN
+
+  [Non-object module: symbol "Symbol()"]
+    expected: NOTRUN
+
+  [Importing an f64 global with an incorrectly-typed value: null]
+    expected: NOTRUN
+
+  [Importing an i32 mutable global with an immutable Global object]
+    expected: NOTRUN
+
+  [Importing an f64 global with an incorrectly-typed value: WebAssembly.Global object (wrong value type)]
+    expected: NOTRUN
+
+  [Importing an i64 global with an incorrectly-typed value: Object.create(WebAssembly.Global.prototype)]
+    expected: NOTRUN
+
+  [Importing an i32 global with an incorrectly-typed value: WebAssembly.Global]
+    expected: NOTRUN
+
+  [Importing an f64 global with an incorrectly-typed value: undefined]
+    expected: NOTRUN
+
+  [Importing an f32 global with an incorrectly-typed value: undefined]
+    expected: NOTRUN
+
+  [Importing an f64 global with an incorrectly-typed value: plain object]
+    expected: NOTRUN
+
+  [Importing a function with an incorrectly-typed value: symbol "Symbol()"]
+    expected: NOTRUN
+
+  [Importing an i64 mutable global with a primitive value]
+    expected: NOTRUN
+
+  [Non-object module: 1]
+    expected: NOTRUN
+
+  [Importing an f32 global with an incorrectly-typed value: WebAssembly.Global.prototype]
+    expected: NOTRUN
+
+  [Importing a function with an incorrectly-typed value: 1]
+    expected: NOTRUN
+
+  [Importing an f32 global with an incorrectly-typed value: ""]
+    expected: NOTRUN
+
+  [Importing an i64 global with an incorrectly-typed value: Number]
+    expected: NOTRUN
+
+  [Importing an i64 global with an incorrectly-typed value: ""]
+    expected: NOTRUN
+
+  [Importing an i64 global with an incorrectly-typed value: WebAssembly.Global.prototype]
+    expected: NOTRUN
+
+  [Imports argument with missing property: undefined]
+    expected: NOTRUN
+
+  [Non-object module: ""]
+    expected: NOTRUN
+
+  [Importing an i32 global with an incorrectly-typed value: symbol "Symbol()"]
+    expected: NOTRUN
+
+  [Importing an f64 global with an incorrectly-typed value: symbol "Symbol()"]
+    expected: NOTRUN
+
+  [Importing a function with an incorrectly-typed value: null]
+    expected: NOTRUN
+
+  [Non-object module: NaN]
+    expected: NOTRUN
+
+  [Importing an f64 global with an incorrectly-typed value: WebAssembly.Global.prototype]
+    expected: NOTRUN
+
+  [Importing an f64 global with an incorrectly-typed value: BigInt]
+    expected: NOTRUN
+
+  [Importing an i64 global with an incorrectly-typed value: WebAssembly.Global]
+    expected: NOTRUN
+
+  [Importing an i32 global with an incorrectly-typed value: undefined]
+    expected: NOTRUN
+
+  [Importing an i64 global with an incorrectly-typed value: null]
+    expected: NOTRUN
+
+  [Importing an f64 global with an incorrectly-typed value: Object.create(WebAssembly.Global.prototype)]
+    expected: NOTRUN
+
+  [Non-object module: 0.1]
+    expected: NOTRUN
+
+  [Importing an f64 global with an incorrectly-typed value: WebAssembly.Global]
+    expected: NOTRUN
+
+  [Importing an f32 global with an incorrectly-typed value: null]
+    expected: NOTRUN
+
+  [Importing an i32 global with an incorrectly-typed value: null]
+    expected: NOTRUN
+
+  [Importing an f32 global with an incorrectly-typed value: symbol "Symbol()"]
+    expected: NOTRUN
+
+  [Importing an f32 global with an incorrectly-typed value: plain object]
+    expected: NOTRUN
+
+  [Importing an i32 mutable global with a primitive value]
+    expected: NOTRUN
+
+  [Importing an f32 global with an incorrectly-typed value: WebAssembly.Global object (wrong value type)]
+    expected: NOTRUN
+
+  [Missing imports argument]
+    expected: NOTRUN
+
+  [Importing an f32 global with an incorrectly-typed value: Object.create(WebAssembly.Global.prototype)]
+    expected: NOTRUN
+
+  [Importing an i64 global with an incorrectly-typed value: true]
+    expected: NOTRUN
+
+  [Non-object module: undefined]
+    expected: TIMEOUT
+
+  [Importing a function with an incorrectly-typed value: undefined]
+    expected: NOTRUN
+
+  [Non-object module: true]
+    expected: NOTRUN
+
+  [Importing an f64 global with an incorrectly-typed value: true]
+    expected: NOTRUN
+
+  [Importing an i32 global with an incorrectly-typed value: true]
+    expected: NOTRUN
+
+  [Importing an i32 global with an incorrectly-typed value: WebAssembly.Global object (wrong value type)]
+    expected: NOTRUN
+
+  [Importing an i64 global with an incorrectly-typed value: plain object]
+    expected: NOTRUN
+
+  [Non-object module: null]
+    expected: NOTRUN
+
+  [Importing an i32 global with an incorrectly-typed value: WebAssembly.Global.prototype]
+    expected: NOTRUN
+
+  [Importing an i32 global with an incorrectly-typed value: ""]
+    expected: NOTRUN
+
+  [Importing a function with an incorrectly-typed value: ""]
+    expected: NOTRUN
+
+  [Importing an f32 global with an incorrectly-typed value: true]
+    expected: NOTRUN
+
+  [Importing an i64 global with an incorrectly-typed value: WebAssembly.Global object (wrong value type)]
+    expected: NOTRUN
+
+  [Importing an i32 global with an incorrectly-typed value: BigInt]
+    expected: NOTRUN
+
+  [Importing an f32 global with an incorrectly-typed value: WebAssembly.Global]
+    expected: NOTRUN
+
+  [Importing an i32 global with an incorrectly-typed value: plain object]
+    expected: NOTRUN
+
+  [Importing a function with an incorrectly-typed value: 0.1]
+    expected: NOTRUN
+
+  [Importing an f64 global with an incorrectly-typed value: ""]
+    expected: NOTRUN
+
+  [Importing an i64 global with an incorrectly-typed value: undefined]
+    expected: NOTRUN
+
+  [Importing an i64 global with an incorrectly-typed value: symbol "Symbol()"]
+    expected: NOTRUN
+
+  [Importing a function with an incorrectly-typed value: NaN]
+    expected: NOTRUN
+
+  [Importing a function with an incorrectly-typed value: object "[object Object\]"]
+    expected: NOTRUN
+
+  [Importing an i32 global with an incorrectly-typed value: Object.create(WebAssembly.Global.prototype)]
+    expected: NOTRUN
+
+  [Imports argument with missing property: empty object]
+    expected: NOTRUN
+
+  [Importing a function with an incorrectly-typed value: true]
+    expected: NOTRUN
+
+
+[instantiateStreaming-bad-imports.any.sharedworker.html]
+  expected: ERROR
diff --git a/tests/wpt/metadata-layout-2020/wasm/webapi/instantiateStreaming.any.js.ini b/tests/wpt/metadata-layout-2020/wasm/webapi/instantiateStreaming.any.js.ini
new file mode 100644
index 00000000000..578437bf046
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/wasm/webapi/instantiateStreaming.any.js.ini
@@ -0,0 +1,131 @@
+[instantiateStreaming.any.html]
+  expected: TIMEOUT
+  [i64 mutable WebAssembly.Global import]
+    expected: NOTRUN
+
+  [Empty module with undefined imports argument]
+    expected: NOTRUN
+
+  [i32 mutable WebAssembly.Global import]
+    expected: NOTRUN
+
+  [stray argument]
+    expected: NOTRUN
+
+  [import with i64-returning function]
+    expected: NOTRUN
+
+  [Multiple i64 arguments]
+    expected: NOTRUN
+
+  [imports]
+    expected: NOTRUN
+
+  [import with function that takes and returns i32]
+    expected: NOTRUN
+
+  [Synchronous options handling]
+    expected: NOTRUN
+
+  [import with i64-taking function]
+    expected: NOTRUN
+
+  [import with function that takes and returns i64]
+    expected: NOTRUN
+
+  [export i64-returning function]
+    expected: NOTRUN
+
+  [import with i32-taking function]
+    expected: NOTRUN
+
+  [i64 exports and imports]
+    expected: NOTRUN
+
+  [Empty module without imports argument]
+    expected: TIMEOUT
+
+  [exports and imports]
+    expected: NOTRUN
+
+  [getter order for imports object]
+    expected: NOTRUN
+
+  [import with i32-returning function]
+    expected: NOTRUN
+
+  [Empty module with empty imports argument]
+    expected: NOTRUN
+
+  [No imports]
+    expected: NOTRUN
+
+
+[instantiateStreaming.any.serviceworker.html]
+  expected: ERROR
+
+[instantiateStreaming.any.sharedworker.html]
+  expected: ERROR
+
+[instantiateStreaming.any.worker.html]
+  expected: TIMEOUT
+  [i64 mutable WebAssembly.Global import]
+    expected: NOTRUN
+
+  [Empty module with undefined imports argument]
+    expected: NOTRUN
+
+  [i32 mutable WebAssembly.Global import]
+    expected: NOTRUN
+
+  [stray argument]
+    expected: NOTRUN
+
+  [import with i64-returning function]
+    expected: NOTRUN
+
+  [Multiple i64 arguments]
+    expected: NOTRUN
+
+  [imports]
+    expected: NOTRUN
+
+  [import with function that takes and returns i32]
+    expected: NOTRUN
+
+  [Synchronous options handling]
+    expected: NOTRUN
+
+  [import with i64-taking function]
+    expected: NOTRUN
+
+  [import with function that takes and returns i64]
+    expected: NOTRUN
+
+  [export i64-returning function]
+    expected: NOTRUN
+
+  [import with i32-taking function]
+    expected: NOTRUN
+
+  [i64 exports and imports]
+    expected: NOTRUN
+
+  [Empty module without imports argument]
+    expected: TIMEOUT
+
+  [exports and imports]
+    expected: NOTRUN
+
+  [getter order for imports object]
+    expected: NOTRUN
+
+  [import with i32-returning function]
+    expected: NOTRUN
+
+  [Empty module with empty imports argument]
+    expected: NOTRUN
+
+  [No imports]
+    expected: NOTRUN
+
diff --git a/tests/wpt/metadata-layout-2020/webmessaging/with-ports/018.html.ini b/tests/wpt/metadata-layout-2020/webmessaging/with-ports/018.html.ini
new file mode 100644
index 00000000000..663a1f8fa30
--- /dev/null
+++ b/tests/wpt/metadata-layout-2020/webmessaging/with-ports/018.html.ini
@@ -0,0 +1,5 @@
+[018.html]
+  expected: TIMEOUT
+  [origin of the script that invoked the method, javascript:]
+    expected: TIMEOUT
+
diff --git a/tests/wpt/metadata-layout-2020/webmessaging/with-ports/017.html.ini b/tests/wpt/metadata-layout-2020/webmessaging/without-ports/017.html.ini
similarity index 100%
rename from tests/wpt/metadata-layout-2020/webmessaging/with-ports/017.html.ini
rename to tests/wpt/metadata-layout-2020/webmessaging/without-ports/017.html.ini
diff --git a/tests/wpt/metadata-layout-2020/workers/constructors/Worker/Worker-constructor.html.ini b/tests/wpt/metadata-layout-2020/workers/constructors/Worker/Worker-constructor.html.ini
deleted file mode 100644
index 80f9a4f15b8..00000000000
--- a/tests/wpt/metadata-layout-2020/workers/constructors/Worker/Worker-constructor.html.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[Worker-constructor.html]
-  expected: ERROR
diff --git a/tests/wpt/metadata-layout-2020/workers/semantics/run-a-worker/003.html.ini b/tests/wpt/metadata-layout-2020/workers/semantics/run-a-worker/003.html.ini
index c2c57aec558..dd49aa8e457 100644
--- a/tests/wpt/metadata-layout-2020/workers/semantics/run-a-worker/003.html.ini
+++ b/tests/wpt/metadata-layout-2020/workers/semantics/run-a-worker/003.html.ini
@@ -1,4 +1,5 @@
 [003.html]
+  expected: ERROR
   [shared]
     expected: FAIL
 
diff --git a/tests/wpt/metadata/FileAPI/url/url-in-tags-revoke.window.js.ini b/tests/wpt/metadata/FileAPI/url/url-in-tags-revoke.window.js.ini
index d4f62ed7113..faa00f45ecf 100644
--- a/tests/wpt/metadata/FileAPI/url/url-in-tags-revoke.window.js.ini
+++ b/tests/wpt/metadata/FileAPI/url/url-in-tags-revoke.window.js.ini
@@ -7,7 +7,7 @@
     expected: FAIL
 
   [Opening a blob URL in a new window immediately before revoking it works.]
-    expected: FAIL
+    expected: TIMEOUT
 
   [Opening a blob URL in a noopener about:blank window immediately before revoking it works.]
     expected: TIMEOUT
diff --git a/tests/wpt/metadata/MANIFEST.json b/tests/wpt/metadata/MANIFEST.json
index d65c8f598f8..e4ac91d986e 100644
--- a/tests/wpt/metadata/MANIFEST.json
+++ b/tests/wpt/metadata/MANIFEST.json
@@ -17073,56 +17073,56 @@
      ]
     ],
     "native_FileSystemBaseHandle-postMessage-BroadcastChannel-manual.https.tentative.html": [
-     "322b169985bf40e2bac1dba813e840e951f89414",
+     "07f8d9620d8e9466e63e1faa1f3dce27b2ba7d37",
      [
       null,
       {}
      ]
     ],
     "native_FileSystemBaseHandle-postMessage-Error-manual.https.tentative.html": [
-     "a503c7e8702957ccc1dba0224bd38aeb3589003c",
+     "19fcb3ea71604d16011b33d49b8fac6db91e4625",
      [
       null,
       {}
      ]
     ],
     "native_FileSystemBaseHandle-postMessage-MessagePort-frames-manual.https.tentative.html": [
-     "57299f5727239445e8ecb511b66ce944814b2009",
+     "81e545c5190b5f09e02ddd5034587d2bf5c796a0",
      [
       null,
       {}
      ]
     ],
     "native_FileSystemBaseHandle-postMessage-MessagePort-windows-manual.https.tentative.html": [
-     "75756aa130fd7e390015ae904d43bf9ee34ce7b1",
+     "1b583d0c395d6475565be6516e3d12199362a5dd",
      [
       null,
       {}
      ]
     ],
     "native_FileSystemBaseHandle-postMessage-MessagePort-workers-manual.https.tentative.html": [
-     "bf637a50ca898f4fbf5e0043fd22cc979d5eccf8",
+     "22d0bf5a72319f24b4b4541054a937e918aa3d8e",
      [
       null,
       {}
      ]
     ],
     "native_FileSystemBaseHandle-postMessage-frames-manual.https.tentative.html": [
-     "1dffe44121846b1057bec97e9520d452a7132a75",
+     "6d5c5ab78ab8ef8f4fd68d3c6a540b17a4a4ca29",
      [
       null,
       {}
      ]
     ],
     "native_FileSystemBaseHandle-postMessage-windows-manual.https.tentative.html": [
-     "cf26f67ad1e56a75f592bb63fd83461bec333aea",
+     "ad1e8e7bcf31b200b84f7c2415cea1b308f75052",
      [
       null,
       {}
      ]
     ],
     "native_FileSystemBaseHandle-postMessage-workers-manual.https.tentative.html": [
-     "0ce824a1d449f3ffbe7e04224bc9de70e8e4cef0",
+     "bc1fc5087a61f2df630e23c0e7efaa69ee4c4fab",
      [
       null,
       {}
@@ -128106,7 +128106,7 @@
       ]
      ],
      "counter-scoping-003.html": [
-      "c4a004ff18cad24b0f709fcb6b707d7a79e5572a",
+      "a12dbfa7001aee455eea7391368a190a7575110c",
       [
        null,
        [
@@ -184906,6 +184906,19 @@
        {}
       ]
      ],
+     "subpixel-transform-changes-004.html": [
+      "bd862957d83a75f006f178245a663f22cd5ec5b5",
+      [
+       null,
+       [
+        [
+         "/css/css-transforms/reference/subpixel-transform-changes-004-ref.html",
+         "=="
+        ]
+       ],
+       {}
+      ]
+     ],
      "text-perspective-001.html": [
       "e98b3e73b36a323a60ad5ef74e090ff193ad41b9",
       [
@@ -234645,6 +234658,19 @@
        ]
       },
       "the-video-element": {
+       "video-poster-shown-preload-auto.html": [
+        "243924628c08f895ef5853ec42bdde3ac9544d9c",
+        [
+         null,
+         [
+          [
+           "/html/semantics/embedded-content/the-video-element/video-poster-shown-preload-auto-ref.html",
+           "=="
+          ]
+         ],
+         {}
+        ]
+       ],
        "video_content_image.htm": [
         "0808d894aa70d122f84975403d9f56c493d685d4",
         [
@@ -307201,6 +307227,10 @@
        "2ba8f8a1d84edb03927d70239fa2aec196d90581",
        []
       ],
+      "subpixel-transform-changes-004-ref.html": [
+       "5eca08a1fa1981c45ccb48e1c76bd87c6436f630",
+       []
+      ],
       "transform-3d-rotateY-stair-above-ref-001.xht": [
        "9a8d7e85934043bdcd3446f115856cccb6240fbc",
        []
@@ -324211,22 +324241,6 @@
       []
      ],
      "element": {
-      "2x2.png": [
-       "9be31562b3fccadab6d36d9e892713fd4db8d476",
-       []
-      ],
-      "2x4.png": [
-       "f5589a731840441ee6052912763f3ea0436a563f",
-       []
-      ],
-      "4x2.png": [
-       "4a8d81e7c22f31106b942882767350cdd9397d5d",
-       []
-      ],
-      "clear-100x50.png": [
-       "eeedd0ff05889ffd4468bf19a2e8e9e0a094201c",
-       []
-      ],
       "compositing": {
        "2d.composite.canvas.copy.png": [
         "f5e9c21964da05866f64ad9423149d76e8306efc",
@@ -325228,192 +325242,6 @@
         "8764e89b371d41428f0ba45d9c0391e41b0dd8a2",
         []
        ]
-      },
-      "wide-gamut-canvas": {
-       "resources": {
-        "pattern-semitransparent-p3d65.png": [
-         "5eb3f6a15f01a123cb793e7311b50de30a5af31e",
-         []
-        ],
-        "pattern-semitransparent-rec2020.png": [
-         "b64db073791ddbf0ea8188247d1160921753a413",
-         []
-        ],
-        "pattern-semitransparent-srgb.png": [
-         "bfbba8b8e296fe354db953bc9888cd19888ca2d3",
-         []
-        ],
-        "pattern-srgb-fullcolor.ogv": [
-         "43a72bf271be679a932b69a5c2304d8fe547d22e",
-         []
-        ],
-        "pattern-srgb-transparent.bmp": [
-         "9c9561c70464eed928e288f27163c47c1a914977",
-         []
-        ],
-        "pattern-srgb-transparent.ico": [
-         "87e8ff45de76e30bfec9489689830b348ef48903",
-         []
-        ],
-        "pattern-srgb-transparent.png": [
-         "bfbba8b8e296fe354db953bc9888cd19888ca2d3",
-         []
-        ],
-        "pattern-srgb-transparent.webp": [
-         "925646067ad079facaaf2d03481e36eadeb25b6f",
-         []
-        ],
-        "pattern-srgb.bmp": [
-         "465d203d98bf3dcce2fef2f416a1e5b3d2795319",
-         []
-        ],
-        "pattern-srgb.gif": [
-         "25bcefb2bf4be178ae65d4c8391d8a49328e6a14",
-         []
-        ],
-        "pattern-srgb.ico": [
-         "e5375826abdf4616b00349946b5892e34fb630dd",
-         []
-        ],
-        "pattern-srgb.jpg": [
-         "c4579e8f0625719cf61808500c73b3fbe0f95832",
-         []
-        ],
-        "pattern-srgb.png": [
-         "1b5876b5f39954f7ca0b18fae63e2be46e8ce100",
-         []
-        ],
-        "pattern-srgb.svg": [
-         "05171308494195082758b4be205b2c297b968efe",
-         []
-        ],
-        "pattern-srgb.webp": [
-         "b7c0a421dcbc5a4f7ea92306c0f5305d28f04eea",
-         []
-        ],
-        "png-16bit": {
-         "2x2_16bit_AdobeRGB_opaque.png": [
-          "c4496db19bf4d0d410256ff7e3ba5add0a65d19e",
-          []
-         ],
-         "2x2_16bit_AdobeRGB_transparent.png": [
-          "3b4cfda52c506f9aba9aed6d1e96c1eda2a35f71",
-          []
-         ],
-         "2x2_16bit_DisplayP3_opaque.png": [
-          "e7a142cd2e1481796cebe980b33e8bf9004a5b4d",
-          []
-         ],
-         "2x2_16bit_DisplayP3_transparent.png": [
-          "0b035317c81c4292336c46067eb4e01239059b48",
-          []
-         ],
-         "2x2_16bit_ProPhoto_opaque.png": [
-          "a1dc7ddb0de09ff41dc026aaa9e2a3bf998d229a",
-          []
-         ],
-         "2x2_16bit_ProPhoto_transparent.png": [
-          "be2eb1208e1018d8f293acf71cc6aca51a7cdbc1",
-          []
-         ],
-         "2x2_16bit_Rec2020_opaque.png": [
-          "e2a2d1445187855e5a704ab286867e92ad10b390",
-          []
-         ],
-         "2x2_16bit_Rec2020_transparent.png": [
-          "960d7d8e75dc775c8934029a64a4d146c7761c9e",
-          []
-         ],
-         "2x2_16bit_interlaced_AdobeRGB_opaque.png": [
-          "80cf9785eb0956a2930e19d17ca2347a94b049ff",
-          []
-         ],
-         "2x2_16bit_interlaced_AdobeRGB_transparent.png": [
-          "3ec565f8c29a8a6745c2410d2160e63af9973776",
-          []
-         ],
-         "2x2_16bit_interlaced_DisplayP3_opaque.png": [
-          "5f3134b79cf29e53940e98e166b5cc1a0fb2cb37",
-          []
-         ],
-         "2x2_16bit_interlaced_DisplayP3_transparent.png": [
-          "500a70eff859e7c92f12d08f028cc9dd8c3c884c",
-          []
-         ],
-         "2x2_16bit_interlaced_ProPhoto_opaque.png": [
-          "b5d0e07a7a44a17f7b70fc3c02baa253747304dc",
-          []
-         ],
-         "2x2_16bit_interlaced_ProPhoto_transparent.png": [
-          "e4ec3e44549e01db00d80c0148eff2a5f9848994",
-          []
-         ],
-         "2x2_16bit_interlaced_Rec2020_opaque.png": [
-          "c487d5846f8ef01b80cb16992aa127ff705131bb",
-          []
-         ],
-         "2x2_16bit_interlaced_Rec2020_transparent.png": [
-          "78fe202c0e49244aba855db499d4ac22d23fe6d6",
-          []
-         ],
-         "2x2_16bit_interlaced_sRGB_opaque.png": [
-          "babf232a369205380dd3052a52fab6e173fafb29",
-          []
-         ],
-         "2x2_16bit_interlaced_sRGB_transparent.png": [
-          "30164040096e0f466bba2c742980340ec6f8ddad",
-          []
-         ],
-         "2x2_16bit_sRGB_opaque.png": [
-          "8a665345e9c27cf4c35eb8621bae7219647c20ce",
-          []
-         ],
-         "2x2_16bit_sRGB_transparent.png": [
-          "e51cda77c40f63f8913aa53f40c070a055e493b2",
-          []
-         ],
-         "2x2_8bit_AdobeRGB_opaque.png": [
-          "8b787b5c8729ad2a7a11454aee3ad8195d4c3fc8",
-          []
-         ],
-         "2x2_8bit_AdobeRGB_transparent.png": [
-          "727028e7656b9b9650716ea1f26560f773bf23b7",
-          []
-         ],
-         "2x2_8bit_DisplayP3_opaque.png": [
-          "fe8bdd4963712dd87a4e9d541c1765472c452f7d",
-          []
-         ],
-         "2x2_8bit_DisplayP3_transparent.png": [
-          "b836afebed3208ef181e881e9f3c813f899fbb28",
-          []
-         ],
-         "2x2_8bit_ProPhoto_opaque.png": [
-          "5ecd8686065930ddfb245a2114986546725b3437",
-          []
-         ],
-         "2x2_8bit_ProPhoto_transparent.png": [
-          "85a349dc1d169e22bb0b3ef33c8383526ca51c0d",
-          []
-         ],
-         "2x2_8bit_Rec2020_opaque.png": [
-          "599cd34040e03a0a8a255a9b41f76b8239f2d6ef",
-          []
-         ],
-         "2x2_8bit_Rec2020_transparent.png": [
-          "ecf65c3d460361a7c5d9bdc7be833f3cf217475e",
-          []
-         ],
-         "2x2_8bit_sRGB_opaque.png": [
-          "9cab6d12e6e6dd7e9cc52eb47aaae7ee105b4b09",
-          []
-         ],
-         "2x2_8bit_sRGB_transparent.png": [
-          "5fa01e62c2007b940baace6fe92c34413128f7a9",
-          []
-         ]
-        }
-       }
       }
      },
      "offscreen": {
@@ -325421,11 +325249,13 @@
        "d3e4c387e8b5b9d27ea3dea6febdc1d9a662e4f0",
        []
       ],
-      "filter": {
-       "offscreencanvas.filter.js": [
-        "cb2e2458030f53ddbe1d66bf3115284733c68519",
-        []
-       ]
+      "manual": {
+       "filter": {
+        "offscreencanvas.filter.js": [
+         "cb2e2458030f53ddbe1d66bf3115284733c68519",
+         []
+        ]
+       }
       },
       "text": {
        "2d.text.draw.fill.basic.png": [
@@ -325447,6 +325277,10 @@
       }
      },
      "resources": {
+      "2x2.png": [
+       "9be31562b3fccadab6d36d9e892713fd4db8d476",
+       []
+      ],
       "canvas-frame.css": [
        "0c97a680d1846412a69b2ed65bdeb436d01fee2b",
        []
@@ -325506,7 +325340,7 @@
        []
       ],
       "gentestutils.py": [
-       "32147318d0a2c16cb03b84d3e171ceaa8d998407",
+       "d677f4d33bcc66bec9e271afccca5e36df9ab0e8",
        []
       ],
       "name2dir-offscreen.yaml": [
@@ -325533,22 +325367,136 @@
        "6b02200362e3413fc5a2a0b5fbbbf3737347d345",
        []
       ],
-      "tests.yaml": [
-       "b6b52e7abac5a49e81a87228b991b00736859926",
-       []
-      ],
-      "tests2d-offscreen.yaml": [
-       "6e8fb7707f7ccd95a9ae8789d0aefd9c12b170ee",
-       []
-      ],
-      "tests2d.yaml": [
-       "a22d1b740ad9aff61252ecb4a5341da971ecc583",
-       []
-      ],
-      "tests2dtext.yaml": [
-       "e1423284bd8622b31da6e4ec2a3caaa5ce71dce2",
-       []
-      ]
+      "yaml": {
+       "element": {
+        "compositing.yaml": [
+         "2ad2fc7586adec1522b0c9cd2128a0fb50b5e69d",
+         []
+        ],
+        "conformance-requirements.yaml": [
+         "386fe0dd67127531a42a97abb93c2d95c21f4355",
+         []
+        ],
+        "drawing-images-to-the-canvas.yaml": [
+         "208f1289f13b39da2e0704c6e2d8c140c4bde38d",
+         []
+        ],
+        "drawing-rectangles-to-the-canvas.yaml": [
+         "9d4dc594227537b58b1a6a3f60baa264d16ee6ca",
+         []
+        ],
+        "drawing-text-to-the-canvas.yaml": [
+         "f5feb7b4c65ddb643d86aad1846eb565c0db1ea2",
+         []
+        ],
+        "fill-and-stroke-styles.yaml": [
+         "1483cadd44229493d89fc5c44a0c0da6e4ad6eb0",
+         []
+        ],
+        "line-styles.yaml": [
+         "e6dc3205e727142a4363252ac2576409be8a7eea",
+         []
+        ],
+        "meta.yaml": [
+         "0e255aca0dee9e2475d4f2b13469bb7ded5067cf",
+         []
+        ],
+        "path-objects.yaml": [
+         "63cf52a4b2a4fe68969fccec334b06cd03223e15",
+         []
+        ],
+        "pixel-manipulation.yaml": [
+         "7c642a706e8ebb6ce84c0e11023c5a8b2259f27d",
+         []
+        ],
+        "scroll.yaml": [
+         "4c1ec563de7939da331b5ba61bbba67dc094303d",
+         []
+        ],
+        "shadows.yaml": [
+         "284047c0bb6a363500d8001538dfba4c782bd1cf",
+         []
+        ],
+        "text-styles.yaml": [
+         "1547d30bd4a204cce6aebf9ca273f72328ad7f0d",
+         []
+        ],
+        "the-canvas-element.yaml": [
+         "9899760d8a6fbe0ab8bc8a212eea5e37f9419abf",
+         []
+        ],
+        "the-canvas-state.yaml": [
+         "dda6dc314ddfe0af65927bbc6bba2753e1c854b8",
+         []
+        ],
+        "transformations.yaml": [
+         "eca6b16b089b322792c0c0cab5ff48febe9ffcd8",
+         []
+        ],
+        "video.yaml": [
+         "c419107e58bb1c116ebf54f9c25aacebac6de0b9",
+         []
+        ]
+       },
+       "offscreen": {
+        "compositing.yaml": [
+         "62f9ccb693c4532b64a40bed090e8f31f507d52c",
+         []
+        ],
+        "conformance-requirements.yaml": [
+         "511f1c0aa491ea3dbbc0616f7e7738b65b3a0535",
+         []
+        ],
+        "drawing-images-to-the-canvas.yaml": [
+         "61cdd407fedbe0aca6a3e8575684e5976661faec",
+         []
+        ],
+        "drawing-rectangles-to-the-canvas.yaml": [
+         "4903aa2f42818beb0c8f938bb91cd85e4e999df2",
+         []
+        ],
+        "fill-and-stroke-styles.yaml": [
+         "2554d48d26844a56dbcb9847b15b3ea7bb51c5d5",
+         []
+        ],
+        "line-styles.yaml": [
+         "762deeb84cbcd940ad2faf50c207d1dacb42368c",
+         []
+        ],
+        "meta.yaml": [
+         "3a114764a13dd1a30dd4f4f6633e250db9cdba35",
+         []
+        ],
+        "path-objects.yaml": [
+         "588079982fb6db2eb409917636a13c7890588f74",
+         []
+        ],
+        "pixel-manipulation.yaml": [
+         "b39bb073b43e5b0397f7e7814a45760ad6974721",
+         []
+        ],
+        "shadows.yaml": [
+         "424510d742f3673e90e5e60581c13c45a2446c8d",
+         []
+        ],
+        "text.yaml": [
+         "f9c09baf4842f3bc163f8483a9449484cd4fbf6f",
+         []
+        ],
+        "the-canvas-state.yaml": [
+         "1ca9bf3610541a626cbf862dc07e70164a2e2f69",
+         []
+        ],
+        "the-offscreen-canvas.yaml": [
+         "1a1ac7b4d3b38ab01c0243314548b4eff3113098",
+         []
+        ],
+        "transformations.yaml": [
+         "6c439ef9cf8ac0815be24a5b314f63085fe07534",
+         []
+        ]
+       }
+      }
      }
     },
     "cross-origin-embedder-policy": {
@@ -325759,7 +325707,7 @@
       ],
       "resources": {
        "dispatcher.js": [
-        "d0184d579d3b9d36c77db9fdbbb6e2dfaf06891c",
+        "b6e29e26bfe15350e990ff56258d22561aab7298",
         []
        ],
        "dispatcher.py": [
@@ -332128,6 +332076,10 @@
        ]
       },
       "the-video-element": {
+       "video-poster-shown-preload-auto-ref.html": [
+        "efa75bb20a66029089d74d382ca35d3427dc68b7",
+        []
+       ],
        "video_content-ref.htm": [
         "c02abb1236d3a2883d6e451fdb05d16b1d03157d",
         []
@@ -333859,7 +333811,7 @@
     },
     "tools": {
      "build.sh": [
-      "4453604433c0216b446b1566fb589de3b6fed653",
+      "21403090b8e1df5a6e445daa4969175ad16fe8de",
       []
      ],
      "html5lib_test.xml": [
@@ -336043,7 +335995,7 @@
       []
      ],
      "util.js": [
-      "8a06d72bb663f22050a24732550fa5c5cf232149",
+      "d6f54bcfc7ebd16caf1414e828e3b7b8ecfc3f9e",
       []
      ]
     }
@@ -336089,7 +336041,7 @@
     ]
    },
    "lint.ignore": [
-    "8e7e65d0475ecac231a6f42177bec40043453631",
+    "ae2e266a8ea470c75835a3e8b7e2477ebd06349d",
     []
    ],
    "loading": {
@@ -345694,7 +345646,7 @@
        []
       ],
       "safari-technology-preview.rb": [
-       "c7d83bab9be5a2e152b0f4d0e81f37a387348f8f",
+       "63ad4e5425e593e6641bc36d4ac4fc1bbb9085d6",
        []
       ],
       "system_info.yml": [
@@ -353095,7 +353047,7 @@
         []
        ],
        "test_request.py": [
-        "d94580140e21d5b8b901d84e35895e6a2a6a5edf",
+        "b30e6c4cb645f5265105434391ce661811884dd4",
         []
        ],
        "test_response.py": [
@@ -353162,7 +353114,7 @@
        []
       ],
       "request.py": [
-       "7c4d02d6de6f1a0b0eccc05ab0304cffbc10f959",
+       "541ac04e7d087c882f1e254ffb21ad6393e7f4c4",
        []
       ],
       "response.py": [
@@ -353833,7 +353785,7 @@
       []
      ],
      "bad-imports.js": [
-      "afd41936d3e0459b77f4e7fd4cda6b1754b9d4da",
+      "786fc650e326b61f548ea09b0d5d389bf7a0f489",
       []
      ],
      "error-interfaces-no-symbol-tostringtag.js": [
@@ -353841,7 +353793,7 @@
       []
      ],
      "instanceTestFactory.js": [
-      "c81672f208b1505430dd1ee909afaf12d9b2db20",
+      "86f593f46f8c6c159ce2f5a6bc39b0aa5b6eb189",
       []
      ],
      "memory": {
@@ -391581,6 +391533,13 @@
         {}
        ]
       ],
+      "grid-template-columns-computed-implicit-track.html": [
+       "98d9efa57354a9f2f96653a201181b710b8c9c66",
+       [
+        null,
+        {}
+       ]
+      ],
       "grid-template-columns-computed-nogrid.html": [
        "11b0393a676c7f18ede6485fbb9dab7cf1d98067",
        [
@@ -391630,6 +391589,13 @@
         {}
        ]
       ],
+      "grid-template-rows-computed-implicit-track.html": [
+       "7ed3110c76aca2f3b29710392826f4e9e14282eb",
+       [
+        null,
+        {}
+       ]
+      ],
       "grid-template-rows-computed-nogrid.html": [
        "057a7fa0615fae3797939aa77c762b8335a90f2b",
        [
@@ -437078,14 +437044,14 @@
          ]
         ],
         "drawimage_html_image.html": [
-         "9216d1dac94e9f0550bd9eaede3ce71196c699c9",
+         "59a7d644656432c6b1dd966e4f92dace6553c5af",
          [
           null,
           {}
          ]
         ],
         "drawimage_svg_image_1.html": [
-         "46c54aebefc3a3fa166af9292bae355d538a0c65",
+         "ea3300bef273c99585a01ad6c94340698740f418",
          [
           null,
           {}
@@ -441113,22 +441079,6 @@
         ]
        ]
       },
-      "convert-to-blob": {
-       "offscreencanvas.convert.to.blob.html": [
-        "1cc0e5bffd020aa0d0ed5501ff2b23fea98e427e",
-        [
-         null,
-         {}
-        ]
-       ],
-       "offscreencanvas.convert.to.blob.w.html": [
-        "5c1fa4cf40e7d2a68a6df4ecfd8bf89824539a4e",
-        [
-         null,
-         {}
-        ]
-       ]
-      },
       "drawing-images-to-the-canvas": {
        "2d.drawImage.3arg.html": [
         "7e096ec9c51a30d579fa88c8ad36fca3cd098222",
@@ -444987,38 +444937,6 @@
         ]
        ]
       },
-      "filter": {
-       "offscreencanvas.filter.html": [
-        "25691983f1e102796798a6d5253b95e0db53223d",
-        [
-         null,
-         {}
-        ]
-       ],
-       "offscreencanvas.filter.w.html": [
-        "d6ed915b5392998105365f9e7c9768018c41af9f",
-        [
-         null,
-         {}
-        ]
-       ]
-      },
-      "image-smoothing": {
-       "image.smoothing.html": [
-        "a78524c51d1acadcfa7582f9aeb732564bb50e00",
-        [
-         null,
-         {}
-        ]
-       ],
-       "image.smoothing.worker.js": [
-        "4c37e84b1f228675e523e4dd39324afc28373314",
-        [
-         "html/canvas/offscreen/image-smoothing/image.smoothing.worker.html",
-         {}
-        ]
-       ]
-      },
       "line-styles": {
        "2d.line.cap.butt.html": [
         "10c98ce0819eaff0591ada371b649408ed09adb4",
@@ -445455,6 +445373,158 @@
         ]
        ]
       },
+      "manual": {
+       "convert-to-blob": {
+        "offscreencanvas.convert.to.blob.html": [
+         "1cc0e5bffd020aa0d0ed5501ff2b23fea98e427e",
+         [
+          null,
+          {}
+         ]
+        ],
+        "offscreencanvas.convert.to.blob.w.html": [
+         "5c1fa4cf40e7d2a68a6df4ecfd8bf89824539a4e",
+         [
+          null,
+          {}
+         ]
+        ]
+       },
+       "filter": {
+        "offscreencanvas.filter.html": [
+         "25691983f1e102796798a6d5253b95e0db53223d",
+         [
+          null,
+          {}
+         ]
+        ],
+        "offscreencanvas.filter.w.html": [
+         "d6ed915b5392998105365f9e7c9768018c41af9f",
+         [
+          null,
+          {}
+         ]
+        ]
+       },
+       "image-smoothing": {
+        "image.smoothing.html": [
+         "a78524c51d1acadcfa7582f9aeb732564bb50e00",
+         [
+          null,
+          {}
+         ]
+        ],
+        "image.smoothing.worker.js": [
+         "4c37e84b1f228675e523e4dd39324afc28373314",
+         [
+          "html/canvas/offscreen/manual/image-smoothing/image.smoothing.worker.html",
+          {}
+         ]
+        ]
+       },
+       "the-offscreen-canvas": {
+        "offscreencanvas.commit.html": [
+         "35cba368116db58cbcb3cdcb9e244a18dbda8650",
+         [
+          null,
+          {}
+         ]
+        ],
+        "offscreencanvas.commit.w.html": [
+         "6d4bad11c94826d700442b2727ad241ef4a572d2",
+         [
+          null,
+          {}
+         ]
+        ],
+        "offscreencanvas.constructor.html": [
+         "0665f7452ce75f669b883d3666ec3c492b225ef4",
+         [
+          null,
+          {}
+         ]
+        ],
+        "offscreencanvas.constructor.worker.js": [
+         "72cfb728f03f1551ed5977f6df1b39c69c60bf3a",
+         [
+          "html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.constructor.worker.html",
+          {}
+         ]
+        ],
+        "offscreencanvas.getcontext.html": [
+         "537b582dc1b524c66edcfee763e04d75887d1b8a",
+         [
+          null,
+          {}
+         ]
+        ],
+        "offscreencanvas.getcontext.worker.js": [
+         "ad5e1243e97eb1f855ac3600da8550a049e2199f",
+         [
+          "html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.getcontext.worker.html",
+          {}
+         ]
+        ],
+        "offscreencanvas.resize.html": [
+         "e259f79ca2819936e33bafe8d0beb6ce610325f4",
+         [
+          null,
+          {}
+         ]
+        ],
+        "offscreencanvas.transfer.to.imagebitmap.html": [
+         "c9a83802a43f43d144fea847452e39a8cf2db744",
+         [
+          null,
+          {}
+         ]
+        ],
+        "offscreencanvas.transfer.to.imagebitmap.w.html": [
+         "b51ce0efa22cf90f65415e243c747e1fe3ebc8af",
+         [
+          null,
+          {}
+         ]
+        ],
+        "offscreencanvas.transfercontrol.to.offscreen.html": [
+         "fea375b2adafb49ecd3285b735e68747ab41a506",
+         [
+          null,
+          {}
+         ]
+        ],
+        "offscreencanvas.transfercontrol.to.offscreen.w.html": [
+         "1347e7b50b2197cc7afc06398f2f6e39c3769733",
+         [
+          null,
+          {}
+         ]
+        ],
+        "offscreencanvas.transferrable.html": [
+         "d321c324fa0019fa542864e78032c00ff34d247a",
+         [
+          null,
+          {}
+         ]
+        ],
+        "offscreencanvas.transferrable.w.html": [
+         "38f981e8f09aab76f0ed5131c83e0ee8882f1788",
+         [
+          null,
+          {}
+         ]
+        ]
+       },
+       "transformations": {
+        "2d.transformation.getTransform.html": [
+         "b3b70ac208674c5bf249c6f58b4647b98be6d5e4",
+         [
+          null,
+          {}
+         ]
+        ]
+       }
+      },
       "path-objects": {
        "2d.path.arc.angle.1.html": [
         "811d6861f3bd042d01d8508f8c1b28f4b1394919",
@@ -450114,97 +450184,6 @@
          {}
         ]
        ],
-       "offscreencanvas.commit.html": [
-        "35cba368116db58cbcb3cdcb9e244a18dbda8650",
-        [
-         null,
-         {}
-        ]
-       ],
-       "offscreencanvas.commit.w.html": [
-        "6d4bad11c94826d700442b2727ad241ef4a572d2",
-        [
-         null,
-         {}
-        ]
-       ],
-       "offscreencanvas.constructor.html": [
-        "0665f7452ce75f669b883d3666ec3c492b225ef4",
-        [
-         null,
-         {}
-        ]
-       ],
-       "offscreencanvas.constructor.worker.js": [
-        "72cfb728f03f1551ed5977f6df1b39c69c60bf3a",
-        [
-         "html/canvas/offscreen/the-offscreen-canvas/offscreencanvas.constructor.worker.html",
-         {}
-        ]
-       ],
-       "offscreencanvas.getcontext.html": [
-        "537b582dc1b524c66edcfee763e04d75887d1b8a",
-        [
-         null,
-         {}
-        ]
-       ],
-       "offscreencanvas.getcontext.worker.js": [
-        "ad5e1243e97eb1f855ac3600da8550a049e2199f",
-        [
-         "html/canvas/offscreen/the-offscreen-canvas/offscreencanvas.getcontext.worker.html",
-         {}
-        ]
-       ],
-       "offscreencanvas.resize.html": [
-        "e259f79ca2819936e33bafe8d0beb6ce610325f4",
-        [
-         null,
-         {}
-        ]
-       ],
-       "offscreencanvas.transfer.to.imagebitmap.html": [
-        "c9a83802a43f43d144fea847452e39a8cf2db744",
-        [
-         null,
-         {}
-        ]
-       ],
-       "offscreencanvas.transfer.to.imagebitmap.w.html": [
-        "b51ce0efa22cf90f65415e243c747e1fe3ebc8af",
-        [
-         null,
-         {}
-        ]
-       ],
-       "offscreencanvas.transfercontrol.to.offscreen.html": [
-        "fea375b2adafb49ecd3285b735e68747ab41a506",
-        [
-         null,
-         {}
-        ]
-       ],
-       "offscreencanvas.transfercontrol.to.offscreen.w.html": [
-        "1347e7b50b2197cc7afc06398f2f6e39c3769733",
-        [
-         null,
-         {}
-        ]
-       ],
-       "offscreencanvas.transferrable.html": [
-        "d321c324fa0019fa542864e78032c00ff34d247a",
-        [
-         null,
-         {}
-        ]
-       ],
-       "offscreencanvas.transferrable.w.html": [
-        "38f981e8f09aab76f0ed5131c83e0ee8882f1788",
-        [
-         null,
-         {}
-        ]
-       ],
        "size.attributes.default.html": [
         "79bfb87dc4c6bd14fd39d3d14057d4a91f00d539",
         [
@@ -450501,13 +450480,6 @@
        ]
       },
       "transformations": {
-       "2d.transformation.getTransform.html": [
-        "b3b70ac208674c5bf249c6f58b4647b98be6d5e4",
-        [
-         null,
-         {}
-        ]
-       ],
        "2d.transformation.order.html": [
         "127472dde11607f5966d3a4ce7f62ebc42e0f5fe",
         [
@@ -451066,7 +451038,7 @@
     "cross-origin-opener-policy": {
      "access-reporting": {
       "openee-accessed_openee-coop-ro.https.html": [
-       "2f4ea87826df6ad2d78a13b6511a4aa530e7de57",
+       "1cb8e763b96d7c6362bdf5df60b36d074ab8e61f",
        [
         null,
         {
@@ -451075,7 +451047,7 @@
        ]
       ],
       "openee-accessed_openee-coop.https.html": [
-       "07fd43b90ed93cfd40887d969cd79b08eeaa61ee",
+       "3c091275cc24f82e7800fd6d8068cad8e0978b16",
        [
         null,
         {
@@ -451084,7 +451056,7 @@
        ]
       ],
       "opener-accessed_openee-coop-ro.https.html": [
-       "c942b9c5d3b1c4bf678ffcc0c4d567a436422b63",
+       "9019b72c54a3221bf48c12b7e3281b258c30efc1",
        [
         null,
         {
@@ -451093,7 +451065,7 @@
        ]
       ],
       "opener-accessed_openee-coop.https.html": [
-       "921fdf742c2412578fd0ff0ac2cc7a43f3659754",
+       "6dfb067a4159c0766421e409307b13a52b2cf3f1",
        [
         null,
         {
@@ -470775,6 +470747,13 @@
       null,
       {}
      ]
+    ],
+    "video.html": [
+     "d699ba0ae39372fedc70fdb80042089b0e096919",
+     [
+      null,
+      {}
+     ]
     ]
    },
    "lifecycle": {
@@ -475158,7 +475137,7 @@
      ]
     ],
     "sandboxed_FileSystemBaseHandle-postMessage-BroadcastChannel.tentative.https.window.js": [
-     "1995ab9b1f99aefa5715f36fec3a83e3efd72d3f",
+     "ca25b548cbbb4920bda1175c7af160b95b4de0f7",
      [
       "native-file-system/sandboxed_FileSystemBaseHandle-postMessage-BroadcastChannel.tentative.https.window.html",
       {
@@ -475186,13 +475165,18 @@
         [
          "script",
          "script-tests/FileSystemBaseHandle-postMessage-BroadcastChannel.js"
+        ],
+        [
+         "timeout",
+         "long"
         ]
-       ]
+       ],
+       "timeout": "long"
       }
      ]
     ],
     "sandboxed_FileSystemBaseHandle-postMessage-Error.tentative.https.window.js": [
-     "f44957e2000143509206c93e9c334cb401e4a173",
+     "16a7002a2add7950393756074cc8a94e4b21c5a8",
      [
       "native-file-system/sandboxed_FileSystemBaseHandle-postMessage-Error.tentative.https.window.html",
       {
@@ -475228,13 +475212,18 @@
         [
          "script",
          "script-tests/FileSystemBaseHandle-postMessage-Error.js"
+        ],
+        [
+         "timeout",
+         "long"
         ]
-       ]
+       ],
+       "timeout": "long"
       }
      ]
     ],
     "sandboxed_FileSystemBaseHandle-postMessage-MessagePort-frames.tentative.https.window.js": [
-     "e02b575f555efb0c763c3ce6cf8838663ce19deb",
+     "612c823295b6a338d48160e662dae424904b9b2c",
      [
       "native-file-system/sandboxed_FileSystemBaseHandle-postMessage-MessagePort-frames.tentative.https.window.html",
       {
@@ -475262,13 +475251,18 @@
         [
          "script",
          "script-tests/FileSystemBaseHandle-postMessage-MessagePort-frames.js"
+        ],
+        [
+         "timeout",
+         "long"
         ]
-       ]
+       ],
+       "timeout": "long"
       }
      ]
     ],
     "sandboxed_FileSystemBaseHandle-postMessage-MessagePort-windows.tentative.https.window.js": [
-     "6d2dc04866de79ec312463e2ae64b9b2469564d2",
+     "28cec810ee34906bf7566900b3993c8ea57f2ab9",
      [
       "native-file-system/sandboxed_FileSystemBaseHandle-postMessage-MessagePort-windows.tentative.https.window.html",
       {
@@ -475296,13 +475290,18 @@
         [
          "script",
          "script-tests/FileSystemBaseHandle-postMessage-MessagePort-windows.js"
+        ],
+        [
+         "timeout",
+         "long"
         ]
-       ]
+       ],
+       "timeout": "long"
       }
      ]
     ],
     "sandboxed_FileSystemBaseHandle-postMessage-MessagePort-workers.tentative.https.window.js": [
-     "119158ef1f6debf091fc7910729bbec98868bfa9",
+     "1599ba969d87b54ee870ad2732466fa272658813",
      [
       "native-file-system/sandboxed_FileSystemBaseHandle-postMessage-MessagePort-workers.tentative.https.window.html",
       {
@@ -475334,13 +475333,18 @@
         [
          "script",
          "script-tests/FileSystemBaseHandle-postMessage-MessagePort-workers.js"
+        ],
+        [
+         "timeout",
+         "long"
         ]
-       ]
+       ],
+       "timeout": "long"
       }
      ]
     ],
     "sandboxed_FileSystemBaseHandle-postMessage-frames.tentative.https.window.js": [
-     "cc419e3e1112c0e420bd3f71b73a881c98de9090",
+     "a0e41c51b181e0d787876811ae4e5949afcc7117",
      [
       "native-file-system/sandboxed_FileSystemBaseHandle-postMessage-frames.tentative.https.window.html",
       {
@@ -475368,13 +475372,18 @@
         [
          "script",
          "script-tests/FileSystemBaseHandle-postMessage-frames.js"
+        ],
+        [
+         "timeout",
+         "long"
         ]
-       ]
+       ],
+       "timeout": "long"
       }
      ]
     ],
     "sandboxed_FileSystemBaseHandle-postMessage-windows.tentative.https.window.js": [
-     "ffebcd8a1222a202ee97b76b4ce11fa781b3c586",
+     "1e3de1ea399cf4b75531f3cf3a6c10242ca6c4f9",
      [
       "native-file-system/sandboxed_FileSystemBaseHandle-postMessage-windows.tentative.https.window.html",
       {
@@ -475402,13 +475411,18 @@
         [
          "script",
          "script-tests/FileSystemBaseHandle-postMessage-windows.js"
+        ],
+        [
+         "timeout",
+         "long"
         ]
-       ]
+       ],
+       "timeout": "long"
       }
      ]
     ],
     "sandboxed_FileSystemBaseHandle-postMessage-workers.tentative.https.window.js": [
-     "c5e1ef089d072fb5fdd839f1ce5e1ad1a6a5a00a",
+     "e690682b6ff7c388cfd8875665997f6b2e6f6283",
      [
       "native-file-system/sandboxed_FileSystemBaseHandle-postMessage-workers.tentative.https.window.html",
       {
@@ -475440,8 +475454,13 @@
         [
          "script",
          "script-tests/FileSystemBaseHandle-postMessage-workers.js"
+        ],
+        [
+         "timeout",
+         "long"
         ]
-       ]
+       ],
+       "timeout": "long"
       }
      ]
     ],
@@ -509521,7 +509540,7 @@
      },
      "global": {
       "constructor.any.js": [
-       "b008ef301601eb4e4a25557efaf1ec135cee10b5",
+       "f536f5d7b5df6c91d74b17f9512abfebe8ac9b35",
        [
         null,
         {
@@ -509607,7 +509626,7 @@
        ]
       ],
       "value-get-set.any.js": [
-       "43d8474a25d182d7422654f61769bf87d3aba29a",
+       "f95b7ca9e3f0d54863db6dfd66ea76c9f392c132",
        [
         null,
         {
@@ -517500,6 +517519,13 @@
       ]
      ]
     },
+    "receiver-track-live.html": [
+     "3d41724fb59015065759a072a2e16c8258a56f2e",
+     [
+      null,
+      {}
+     ]
+    ],
     "simplecall-no-ssrcs.https.html": [
      "87f8d939a5a2f80fa9fae137cf34d6e99ecf391a",
      [
diff --git a/tests/wpt/metadata/css/CSS2/floats/hit-test-floats-002.html.ini b/tests/wpt/metadata/css/CSS2/floats/hit-test-floats-002.html.ini
new file mode 100644
index 00000000000..f64b45fea6b
--- /dev/null
+++ b/tests/wpt/metadata/css/CSS2/floats/hit-test-floats-002.html.ini
@@ -0,0 +1,4 @@
+[hit-test-floats-002.html]
+  [Hit test float]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata/css/CSS2/floats/hit-test-floats-005.html.ini b/tests/wpt/metadata/css/CSS2/floats/hit-test-floats-005.html.ini
new file mode 100644
index 00000000000..baa9f1a7541
--- /dev/null
+++ b/tests/wpt/metadata/css/CSS2/floats/hit-test-floats-005.html.ini
@@ -0,0 +1,4 @@
+[hit-test-floats-005.html]
+  [Miss clipped float]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata/css/css-transforms/subpixel-transform-changes-004.html.ini b/tests/wpt/metadata/css/css-transforms/subpixel-transform-changes-004.html.ini
new file mode 100644
index 00000000000..e169c08be32
--- /dev/null
+++ b/tests/wpt/metadata/css/css-transforms/subpixel-transform-changes-004.html.ini
@@ -0,0 +1,2 @@
+[subpixel-transform-changes-004.html]
+  expected: TIMEOUT
diff --git a/tests/wpt/metadata/css/cssom-view/elementFromPoint-001.html.ini b/tests/wpt/metadata/css/cssom-view/elementFromPoint-001.html.ini
deleted file mode 100644
index e38782d8c85..00000000000
--- a/tests/wpt/metadata/css/cssom-view/elementFromPoint-001.html.ini
+++ /dev/null
@@ -1,4 +0,0 @@
-[elementFromPoint-001.html]
-  [CSSOM View - 5 - extensions to the Document interface]
-    expected: FAIL
-
diff --git a/tests/wpt/metadata/css/cssom-view/elementsFromPoint-iframes.html.ini b/tests/wpt/metadata/css/cssom-view/elementsFromPoint-iframes.html.ini
index 6ef8bb1049f..171592fc08f 100644
--- a/tests/wpt/metadata/css/cssom-view/elementsFromPoint-iframes.html.ini
+++ b/tests/wpt/metadata/css/cssom-view/elementsFromPoint-iframes.html.ini
@@ -2,6 +2,3 @@
   [elementsFromPoint on the root document for points in iframe elements]
     expected: FAIL
 
-  [elementsFromPoint on inner documents]
-    expected: FAIL
-
diff --git a/tests/wpt/metadata/fetch/content-type/response.window.js.ini b/tests/wpt/metadata/fetch/content-type/response.window.js.ini
index e7f80686897..c68a8cee6f5 100644
--- a/tests/wpt/metadata/fetch/content-type/response.window.js.ini
+++ b/tests/wpt/metadata/fetch/content-type/response.window.js.ini
@@ -312,24 +312,24 @@
   [fetch(): separate response Content-Type: text/plain ]
     expected: NOTRUN
 
-  [<iframe>: combined response Content-Type: text/html;" text/plain]
-    expected: FAIL
-
   [<iframe>: combined response Content-Type: text/html;charset=gbk text/plain text/html]
     expected: FAIL
 
-  [<iframe>: separate response Content-Type: text/html;" text/plain]
-    expected: FAIL
-
   [<iframe>: separate response Content-Type: text/html;x=" text/plain]
     expected: FAIL
 
-  [<iframe>: separate response Content-Type: text/plain */*;charset=gbk]
-    expected: FAIL
-
   [<iframe>: combined response Content-Type: text/html */*]
     expected: FAIL
 
   [<iframe>: combined response Content-Type: text/html;" \\" text/plain]
     expected: FAIL
 
+  [<iframe>: combined response Content-Type: */* text/html]
+    expected: FAIL
+
+  [<iframe>: combined response Content-Type: text/html */*;charset=gbk]
+    expected: FAIL
+
+  [<iframe>: combined response Content-Type: text/html;x=" text/plain]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata/fetch/content-type/script.window.js.ini b/tests/wpt/metadata/fetch/content-type/script.window.js.ini
index b2ffc8abf78..25318ac5846 100644
--- a/tests/wpt/metadata/fetch/content-type/script.window.js.ini
+++ b/tests/wpt/metadata/fetch/content-type/script.window.js.ini
@@ -53,9 +53,6 @@
   [combined text/javascript ]
     expected: FAIL
 
-  [separate text/javascript x/x]
-    expected: FAIL
-
   [separate text/javascript error]
     expected: FAIL
 
diff --git a/tests/wpt/metadata/fetch/nosniff/parsing-nosniff.window.js.ini b/tests/wpt/metadata/fetch/nosniff/parsing-nosniff.window.js.ini
index 70efd28ddfc..30e1b851fd4 100644
--- a/tests/wpt/metadata/fetch/nosniff/parsing-nosniff.window.js.ini
+++ b/tests/wpt/metadata/fetch/nosniff/parsing-nosniff.window.js.ini
@@ -11,6 +11,3 @@
   [X-Content-Type-Options%3A%20nosniff%2C%2C%40%23%24%23%25%25%26%5E%26%5E*()()11!]
     expected: FAIL
 
-  [X-Content-Type-Options%3A%20no%0D%0AX-Content-Type-Options%3A%20nosniff]
-    expected: FAIL
-
diff --git a/tests/wpt/metadata-layout-2020/html/browsers/history/the-history-interface/traverse_the_history_2.html.ini b/tests/wpt/metadata/html/browsers/history/the-history-interface/traverse_the_history_4.html.ini
similarity index 71%
rename from tests/wpt/metadata-layout-2020/html/browsers/history/the-history-interface/traverse_the_history_2.html.ini
rename to tests/wpt/metadata/html/browsers/history/the-history-interface/traverse_the_history_4.html.ini
index 75d75b4cda2..385376c7321 100644
--- a/tests/wpt/metadata-layout-2020/html/browsers/history/the-history-interface/traverse_the_history_2.html.ini
+++ b/tests/wpt/metadata/html/browsers/history/the-history-interface/traverse_the_history_4.html.ini
@@ -1,4 +1,4 @@
-[traverse_the_history_2.html]
+[traverse_the_history_4.html]
   [Multiple history traversals, last would be aborted]
     expected: FAIL
 
diff --git a/tests/wpt/metadata/html/browsers/history/the-history-interface/traverse_the_history_5.html.ini b/tests/wpt/metadata/html/browsers/history/the-history-interface/traverse_the_history_5.html.ini
deleted file mode 100644
index dc2e45516de..00000000000
--- a/tests/wpt/metadata/html/browsers/history/the-history-interface/traverse_the_history_5.html.ini
+++ /dev/null
@@ -1,4 +0,0 @@
-[traverse_the_history_5.html]
-  [Multiple history traversals, last would be aborted]
-    expected: FAIL
-
diff --git a/tests/wpt/metadata/html/browsers/windows/embedded-opener-remove-frame.html.ini b/tests/wpt/metadata/html/browsers/windows/embedded-opener-remove-frame.html.ini
index 2532dceabac..442db3cb549 100644
--- a/tests/wpt/metadata/html/browsers/windows/embedded-opener-remove-frame.html.ini
+++ b/tests/wpt/metadata/html/browsers/windows/embedded-opener-remove-frame.html.ini
@@ -1,5 +1,4 @@
 [embedded-opener-remove-frame.html]
-  expected: CRASH
   [opener and "removed" embedded documents]
     expected: FAIL
 
diff --git a/tests/wpt/metadata/html/canvas/offscreen/manual/convert-to-blob/offscreencanvas.convert.to.blob.html.ini b/tests/wpt/metadata/html/canvas/offscreen/manual/convert-to-blob/offscreencanvas.convert.to.blob.html.ini
new file mode 100644
index 00000000000..4a35ddad23c
--- /dev/null
+++ b/tests/wpt/metadata/html/canvas/offscreen/manual/convert-to-blob/offscreencanvas.convert.to.blob.html.ini
@@ -0,0 +1,22 @@
+[offscreencanvas.convert.to.blob.html]
+  [Test that convertToBlob with webp produces correct result]
+    expected: FAIL
+
+  [Test that convertToBlob with default type produces correct result]
+    expected: FAIL
+
+  [Test that convertToBlob with png produces correct result]
+    expected: FAIL
+
+  [Test that convertToBlob with jpge produces correct result]
+    expected: FAIL
+
+  [Test that call convertToBlob on a OffscreenCanvas with size 0 throws exception]
+    expected: FAIL
+
+  [Test that call convertToBlob on a detached OffscreenCanvas throws exception]
+    expected: FAIL
+
+  [Test that call convertToBlob on a OffscreenCanvas with tainted origin throws exception]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata/html/canvas/offscreen/manual/convert-to-blob/offscreencanvas.convert.to.blob.w.html.ini b/tests/wpt/metadata/html/canvas/offscreen/manual/convert-to-blob/offscreencanvas.convert.to.blob.w.html.ini
new file mode 100644
index 00000000000..2d70a69b718
--- /dev/null
+++ b/tests/wpt/metadata/html/canvas/offscreen/manual/convert-to-blob/offscreencanvas.convert.to.blob.w.html.ini
@@ -0,0 +1,44 @@
+[offscreencanvas.convert.to.blob.w.html]
+  expected: ERROR
+  [Test that convertToBlob with jpeg/default quality produces correct result in a worker]
+    expected: FAIL
+
+  [Test that convertToBlob with png/0.2 quality produces correct result in a worker]
+    expected: FAIL
+
+  [Test that convertToBlob with webp/1.0 quality produces correct result in a worker]
+    expected: FAIL
+
+  [Test that call convertToBlob on a OffscreenCanvas with size 0 throws exception in a worker]
+    expected: FAIL
+
+  [Test that convertToBlob with png/1.0 quality produces correct result in a worker]
+    expected: FAIL
+
+  [Test that convertToBlob with default type/1.0 quality produces correct result in a worker]
+    expected: FAIL
+
+  [Test that convertToBlob with jpeg/1.0 quality produces correct result in a worker]
+    expected: FAIL
+
+  [Test that convertToBlob with webp/0.2 quality produces correct result in a worker]
+    expected: FAIL
+
+  [Test that convertToBlob with webp/default quality produces correct result in a worker]
+    expected: FAIL
+
+  [Test that call convertToBlob on a detached OffscreenCanvas throws exception in a worker]
+    expected: FAIL
+
+  [Test that convertToBlob with jpeg/0.2 quality produces correct result in a worker]
+    expected: FAIL
+
+  [Test that convertToBlob with default type/0.2 quality produces correct result in a worker]
+    expected: FAIL
+
+  [Test that convertToBlob with png/default quality produces correct result in a worker]
+    expected: FAIL
+
+  [Test that convertToBlob with default arguments produces correct result in a worker]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata/html/canvas/offscreen/manual/filter/offscreencanvas.filter.w.html.ini b/tests/wpt/metadata/html/canvas/offscreen/manual/filter/offscreencanvas.filter.w.html.ini
new file mode 100644
index 00000000000..d230a9d8d17
--- /dev/null
+++ b/tests/wpt/metadata/html/canvas/offscreen/manual/filter/offscreencanvas.filter.w.html.ini
@@ -0,0 +1,4 @@
+[offscreencanvas.filter.w.html]
+  [offscreencanvas]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.commit.html.ini b/tests/wpt/metadata/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.commit.html.ini
new file mode 100644
index 00000000000..ff3a587f818
--- /dev/null
+++ b/tests/wpt/metadata/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.commit.html.ini
@@ -0,0 +1,7 @@
+[offscreencanvas.commit.html]
+  [Test that calling OffscreenCanvas's commit pushes its contents to its placeholder.]
+    expected: FAIL
+
+  [Test that calling commit on an OffscreenCanvas that is not transferred from a HTMLCanvasElement is a noop.]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.commit.w.html.ini b/tests/wpt/metadata/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.commit.w.html.ini
new file mode 100644
index 00000000000..f654a376e62
--- /dev/null
+++ b/tests/wpt/metadata/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.commit.w.html.ini
@@ -0,0 +1,4 @@
+[offscreencanvas.commit.w.html]
+  [Test that calling OffscreenCanvas's commit pushes its contents to its placeholder.]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.constructor.html.ini b/tests/wpt/metadata/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.constructor.html.ini
new file mode 100644
index 00000000000..1267b767389
--- /dev/null
+++ b/tests/wpt/metadata/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.constructor.html.ini
@@ -0,0 +1,4 @@
+[offscreencanvas.constructor.html]
+  [Test that OffscreenCanvas constructor handles invalid arguments correctly]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.constructor.worker.js.ini b/tests/wpt/metadata/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.constructor.worker.js.ini
new file mode 100644
index 00000000000..a74aa5ff5d2
--- /dev/null
+++ b/tests/wpt/metadata/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.constructor.worker.js.ini
@@ -0,0 +1,4 @@
+[offscreencanvas.constructor.worker.html]
+  [Test that OffscreenCanvas constructor handles invalid arguments correctly in a worker]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.getcontext.html.ini b/tests/wpt/metadata/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.getcontext.html.ini
new file mode 100644
index 00000000000..659dde6ed64
--- /dev/null
+++ b/tests/wpt/metadata/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.getcontext.html.ini
@@ -0,0 +1,16 @@
+[offscreencanvas.getcontext.html]
+  [Test that getContext with supported string returns correct results]
+    expected: FAIL
+
+  [Test that webglcontext.canvas should return the original OffscreenCanvas]
+    expected: FAIL
+
+  [Test that getContext with un-supported string throws a TypeError.]
+    expected: FAIL
+
+  [Test that OffscreenCanvasRenderingContext2D with alpha disabled makes the OffscreenCanvas opaque]
+    expected: FAIL
+
+  [Test that getContext twice with different context type returns null the second time]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.getcontext.worker.js.ini b/tests/wpt/metadata/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.getcontext.worker.js.ini
new file mode 100644
index 00000000000..adac4035405
--- /dev/null
+++ b/tests/wpt/metadata/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.getcontext.worker.js.ini
@@ -0,0 +1,16 @@
+[offscreencanvas.getcontext.worker.html]
+  [Test that getContext with supported string returns correct results]
+    expected: FAIL
+
+  [Test that webglcontext.canvas should return the original OffscreenCanvas]
+    expected: FAIL
+
+  [Test that getContext with un-supported string throws a TypeError.]
+    expected: FAIL
+
+  [Test that OffscreenCanvasRenderingContext2D with alpha disabled makes the OffscreenCanvas opaque]
+    expected: FAIL
+
+  [Test that getContext twice with different context type returns null the second time]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.resize.html.ini b/tests/wpt/metadata/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.resize.html.ini
new file mode 100644
index 00000000000..6441a1527e8
--- /dev/null
+++ b/tests/wpt/metadata/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.resize.html.ini
@@ -0,0 +1,22 @@
+[offscreencanvas.resize.html]
+  [Verify that writing to the width and height attributes of an OffscreenCanvas works when there is a 2d context attached.]
+    expected: FAIL
+
+  [Verify that resizing an OffscreenCanvas with a webgl context propagates the new size to its placeholder canvas asynchronously.]
+    expected: FAIL
+
+  [Verify that resizing an OffscreenCanvas with a 2d context propagates the new size to its placeholder canvas asynchronously.]
+    expected: FAIL
+
+  [Verify that drawImage uses the size of the frame as the intinsic size of a placeholder canvas.]
+    expected: FAIL
+
+  [Verify that writing to the width and height attributes of an OffscreenCanvas works when there is a webgl context attached.]
+    expected: FAIL
+
+  [Verify that writing to the width or height attribute of a placeholder canvas throws an exception]
+    expected: FAIL
+
+  [Verify that writing to the width or height attribute of a placeholder canvas throws an exception even when not changing the value of the attribute.]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.transfer.to.imagebitmap.html.ini b/tests/wpt/metadata/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.transfer.to.imagebitmap.html.ini
new file mode 100644
index 00000000000..a32dc7148db
--- /dev/null
+++ b/tests/wpt/metadata/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.transfer.to.imagebitmap.html.ini
@@ -0,0 +1,19 @@
+[offscreencanvas.transfer.to.imagebitmap.html]
+  [Test that transferToImageBitmap returns an ImageBitmap with correct color]
+    expected: FAIL
+
+  [Test that call transferToImageBitmap on a detached OffscreenCanvas throws an exception]
+    expected: FAIL
+
+  [Test that transferToImageBitmap returns an ImageBitmap with correct width and height]
+    expected: FAIL
+
+  [Test that transferToImageBitmap without a context throws an exception]
+    expected: FAIL
+
+  [Test that transferToImageBitmap preserves transform]
+    expected: FAIL
+
+  [Test that transferToImageBitmap won't change context's property]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.transfer.to.imagebitmap.w.html.ini b/tests/wpt/metadata/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.transfer.to.imagebitmap.w.html.ini
new file mode 100644
index 00000000000..e8a587825c6
--- /dev/null
+++ b/tests/wpt/metadata/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.transfer.to.imagebitmap.w.html.ini
@@ -0,0 +1,26 @@
+[offscreencanvas.transfer.to.imagebitmap.w.html]
+  expected: ERROR
+  [Test that call transferToImageBitmap twice returns an ImageBitmap with correct color in a worker]
+    expected: FAIL
+
+  [Test that transferToImageBitmap returns an ImageBitmap with correct width and height in a worker]
+    expected: FAIL
+
+  [Test that transferToImageBitmap returns an ImageBitmap with correct color in a worker]
+    expected: FAIL
+
+  [Test that call transferToImageBitmap on a detached OffscreenCanvas throws an exception in a worker]
+    expected: FAIL
+
+  [Test that call transferToImageBitmap without a context throws an exception in a worker]
+    expected: FAIL
+
+  [Test that call transferToImageBitmap preserves transform in a worker]
+    expected: FAIL
+
+  [Test that transferToImageBitmap won't change context's property in a worker]
+    expected: FAIL
+
+  [Test that call transferToImageBitmap twice on a alpha-disabled context returns an ImageBitmap with correct color in a worker]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.transfercontrol.to.offscreen.html.ini b/tests/wpt/metadata/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.transfercontrol.to.offscreen.html.ini
new file mode 100644
index 00000000000..c103d8d158b
--- /dev/null
+++ b/tests/wpt/metadata/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.transfercontrol.to.offscreen.html.ini
@@ -0,0 +1,10 @@
+[offscreencanvas.transfercontrol.to.offscreen.html]
+  [Test that calling transferControlToOffscreen twice throws an exception]
+    expected: FAIL
+
+  [Test that an OffscreenCanvas generated by transferControlToOffscreen gets correct width and height]
+    expected: FAIL
+
+  [Test that calling getContext on a placeholder canvas that has already transferred its control throws an exception]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.transfercontrol.to.offscreen.w.html.ini b/tests/wpt/metadata/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.transfercontrol.to.offscreen.w.html.ini
new file mode 100644
index 00000000000..49fdc529ab2
--- /dev/null
+++ b/tests/wpt/metadata/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.transfercontrol.to.offscreen.w.html.ini
@@ -0,0 +1,10 @@
+[offscreencanvas.transfercontrol.to.offscreen.w.html]
+  [Test that calling getContext on a placeholder canvas that is transferred its control to an OffscreenCanvas throws an exception, when the OffscreenCanvas is transferred to a worker]
+    expected: FAIL
+
+  [Test that an OffscreenCanvas generated by transferControlToOffscreen gets correct width and height when it is transferred to a worker]
+    expected: FAIL
+
+  [Test that calling transferControlToOffscreen twice throws an exception, when its associated OffscreenCanvas is transferred to a worker]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.transferrable.html.ini b/tests/wpt/metadata/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.transferrable.html.ini
new file mode 100644
index 00000000000..4c5795bed90
--- /dev/null
+++ b/tests/wpt/metadata/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.transferrable.html.ini
@@ -0,0 +1,16 @@
+[offscreencanvas.transferrable.html]
+  [Test that offscreenCanvas's size is correct after being transferred to a worker.]
+    expected: FAIL
+
+  [Test that calling getContext('webgl') on a detached OffscreenCanvas throws exception.]
+    expected: FAIL
+
+  [Test that transfer an OffscreenCanvas that has a context throws exception.]
+    expected: FAIL
+
+  [Test that transfer an OffscreenCanvas twice throws exception.]
+    expected: FAIL
+
+  [Test that calling getContext('2d') on a detached OffscreenCanvas throws exception.]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.transferrable.w.html.ini b/tests/wpt/metadata/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.transferrable.w.html.ini
new file mode 100644
index 00000000000..91232b250b3
--- /dev/null
+++ b/tests/wpt/metadata/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.transferrable.w.html.ini
@@ -0,0 +1,20 @@
+[offscreencanvas.transferrable.w.html]
+  expected: ERROR
+  [Test that calling getContext('webgl') on a detached OffscreenCanvas throws exception in a worker.]
+    expected: FAIL
+
+  [Test that transfer an OffscreenCanvas that has a webgl context throws exception in a worker.]
+    expected: FAIL
+
+  [Test that transfer an OffscreenCanvas twice throws exception in a worker.]
+    expected: FAIL
+
+  [Test that calling getContext('2d') on a detached OffscreenCanvas throws exception in a worker.]
+    expected: FAIL
+
+  [Test that OffscreenCanvas's size is correct after being transferred from a worker.]
+    expected: FAIL
+
+  [Test that transfer an OffscreenCanvas that has a 2d context throws exception in a worker.]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_escaping-2.html.ini b/tests/wpt/metadata/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_escaping-2.html.ini
index e63fe7c263e..c6f45be1eb2 100644
--- a/tests/wpt/metadata/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_escaping-2.html.ini
+++ b/tests/wpt/metadata/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_escaping-2.html.ini
@@ -1,5 +1,5 @@
 [iframe_sandbox_popups_escaping-2.html]
-  expected: CRASH
+  expected: TIMEOUT
   [Check that popups from a sandboxed iframe escape the sandbox if\n       allow-popups-to-escape-sandbox is used]
     expected: TIMEOUT
 
diff --git a/tests/wpt/metadata/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_nonescaping-2.html.ini b/tests/wpt/metadata/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_nonescaping-2.html.ini
index 3a32693ffa8..d43f38b40cd 100644
--- a/tests/wpt/metadata/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_nonescaping-2.html.ini
+++ b/tests/wpt/metadata/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_nonescaping-2.html.ini
@@ -1,5 +1,6 @@
 [iframe_sandbox_popups_nonescaping-2.html]
   type: testharness
+  expected: TIMEOUT
   [Check that popups from a sandboxed iframe do not escape the sandbox]
-    expected: FAIL
+    expected: NOTRUN
 
diff --git a/tests/wpt/metadata/wasm/jsapi/constructor/instantiate-bad-imports.any.js.ini b/tests/wpt/metadata/wasm/jsapi/constructor/instantiate-bad-imports.any.js.ini
new file mode 100644
index 00000000000..4ebe0dc6c14
--- /dev/null
+++ b/tests/wpt/metadata/wasm/jsapi/constructor/instantiate-bad-imports.any.js.ini
@@ -0,0 +1,5 @@
+[instantiate-bad-imports.any.html]
+  expected: ERROR
+
+[instantiate-bad-imports.any.worker.html]
+  expected: ERROR
diff --git a/tests/wpt/metadata/wasm/jsapi/constructor/instantiate.any.js.ini b/tests/wpt/metadata/wasm/jsapi/constructor/instantiate.any.js.ini
index 1ab23d6de8b..b9cb4391a87 100644
--- a/tests/wpt/metadata/wasm/jsapi/constructor/instantiate.any.js.ini
+++ b/tests/wpt/metadata/wasm/jsapi/constructor/instantiate.any.js.ini
@@ -8,6 +8,42 @@
   [Module argument]
     expected: FAIL
 
+  [import with function that takes and returns i64: Module argument]
+    expected: FAIL
+
+  [import with i64-returning function: BufferSource argument]
+    expected: FAIL
+
+  [export i64-returning function: BufferSource argument]
+    expected: FAIL
+
+  [i64 mutable WebAssembly.Global import: Module argument]
+    expected: FAIL
+
+  [Multiple i64 arguments: BufferSource argument]
+    expected: FAIL
+
+  [i64 exports and imports: Module argument]
+    expected: FAIL
+
+  [import with function that takes and returns i64: BufferSource argument]
+    expected: FAIL
+
+  [Multiple i64 arguments: Module argument]
+    expected: FAIL
+
+  [export i64-returning function: Module argument]
+    expected: FAIL
+
+  [i64 exports and imports: BufferSource argument]
+    expected: FAIL
+
+  [import with i64-returning function: Module argument]
+    expected: FAIL
+
+  [i64 mutable WebAssembly.Global import: BufferSource argument]
+    expected: FAIL
+
 
 [instantiate.any.worker.html]
   [exports and imports: buffer argument]
@@ -19,3 +55,39 @@
   [Module argument]
     expected: FAIL
 
+  [import with function that takes and returns i64: Module argument]
+    expected: FAIL
+
+  [import with i64-returning function: BufferSource argument]
+    expected: FAIL
+
+  [export i64-returning function: BufferSource argument]
+    expected: FAIL
+
+  [i64 mutable WebAssembly.Global import: Module argument]
+    expected: FAIL
+
+  [Multiple i64 arguments: BufferSource argument]
+    expected: FAIL
+
+  [i64 exports and imports: Module argument]
+    expected: FAIL
+
+  [import with function that takes and returns i64: BufferSource argument]
+    expected: FAIL
+
+  [Multiple i64 arguments: Module argument]
+    expected: FAIL
+
+  [export i64-returning function: Module argument]
+    expected: FAIL
+
+  [i64 exports and imports: BufferSource argument]
+    expected: FAIL
+
+  [import with i64-returning function: Module argument]
+    expected: FAIL
+
+  [i64 mutable WebAssembly.Global import: BufferSource argument]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata/wasm/jsapi/global/constructor.any.js.ini b/tests/wpt/metadata/wasm/jsapi/global/constructor.any.js.ini
new file mode 100644
index 00000000000..302d9f341b9
--- /dev/null
+++ b/tests/wpt/metadata/wasm/jsapi/global/constructor.any.js.ini
@@ -0,0 +1,63 @@
+[constructor.any.html]
+  [i64 with default]
+    expected: FAIL
+
+  [Explicit value object with toString returning string for type i64]
+    expected: FAIL
+
+  [Explicit value bigint "123" for type i64]
+    expected: FAIL
+
+  [Explicit value "3" for type i64]
+    expected: FAIL
+
+  [Explicit value object with toString returning bigint for type i64]
+    expected: FAIL
+
+  [Explicit value object with valueOf returning string for type i64]
+    expected: FAIL
+
+  [Explicit value true for type i64]
+    expected: FAIL
+
+  [Explicit value undefined for type i64]
+    expected: FAIL
+
+  [Explicit value false for type i64]
+    expected: FAIL
+
+  [Explicit value object with valueOf returning bigint for type i64]
+    expected: FAIL
+
+
+[constructor.any.worker.html]
+  [i64 with default]
+    expected: FAIL
+
+  [Explicit value object with toString returning string for type i64]
+    expected: FAIL
+
+  [Explicit value bigint "123" for type i64]
+    expected: FAIL
+
+  [Explicit value "3" for type i64]
+    expected: FAIL
+
+  [Explicit value object with toString returning bigint for type i64]
+    expected: FAIL
+
+  [Explicit value object with valueOf returning string for type i64]
+    expected: FAIL
+
+  [Explicit value true for type i64]
+    expected: FAIL
+
+  [Explicit value undefined for type i64]
+    expected: FAIL
+
+  [Explicit value false for type i64]
+    expected: FAIL
+
+  [Explicit value object with valueOf returning bigint for type i64]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata/wasm/jsapi/global/value-get-set.any.js.ini b/tests/wpt/metadata/wasm/jsapi/global/value-get-set.any.js.ini
new file mode 100644
index 00000000000..eb913268d4f
--- /dev/null
+++ b/tests/wpt/metadata/wasm/jsapi/global/value-get-set.any.js.ini
@@ -0,0 +1,105 @@
+[value-get-set.any.html]
+  [Immutable i64 (undefined)]
+    expected: FAIL
+
+  [i64 mutability]
+    expected: FAIL
+
+  [Immutable i64 (false)]
+    expected: FAIL
+
+  [Immutable i64 with ToNumber side-effects (missing)]
+    expected: FAIL
+
+  [Immutable i64 with ToNumber side-effects (empty string)]
+    expected: FAIL
+
+  [Immutable i64 (empty string)]
+    expected: FAIL
+
+  [Immutable i64 with ToNumber side-effects (zero)]
+    expected: FAIL
+
+  [Immutable i64 with ToNumber side-effects (undefined)]
+    expected: FAIL
+
+  [Mutable i64 (true on prototype)]
+    expected: FAIL
+
+  [Immutable i64 (zero)]
+    expected: FAIL
+
+  [Immutable i64 with ToNumber side-effects (false)]
+    expected: FAIL
+
+  [Immutable i64 (missing)]
+    expected: FAIL
+
+  [Mutable i64 (string)]
+    expected: FAIL
+
+  [Immutable i64 with ToNumber side-effects (null)]
+    expected: FAIL
+
+  [Mutable i64 (one)]
+    expected: FAIL
+
+  [Mutable i64 (true)]
+    expected: FAIL
+
+  [Immutable i64 (null)]
+    expected: FAIL
+
+
+[value-get-set.any.worker.html]
+  [Immutable i64 (undefined)]
+    expected: FAIL
+
+  [i64 mutability]
+    expected: FAIL
+
+  [Immutable i64 (false)]
+    expected: FAIL
+
+  [Immutable i64 with ToNumber side-effects (missing)]
+    expected: FAIL
+
+  [Immutable i64 with ToNumber side-effects (empty string)]
+    expected: FAIL
+
+  [Immutable i64 (empty string)]
+    expected: FAIL
+
+  [Immutable i64 with ToNumber side-effects (zero)]
+    expected: FAIL
+
+  [Immutable i64 with ToNumber side-effects (undefined)]
+    expected: FAIL
+
+  [Mutable i64 (true on prototype)]
+    expected: FAIL
+
+  [Immutable i64 (zero)]
+    expected: FAIL
+
+  [Immutable i64 with ToNumber side-effects (false)]
+    expected: FAIL
+
+  [Immutable i64 (missing)]
+    expected: FAIL
+
+  [Mutable i64 (string)]
+    expected: FAIL
+
+  [Immutable i64 with ToNumber side-effects (null)]
+    expected: FAIL
+
+  [Mutable i64 (one)]
+    expected: FAIL
+
+  [Mutable i64 (true)]
+    expected: FAIL
+
+  [Immutable i64 (null)]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata/wasm/jsapi/instance/constructor-bad-imports.any.js.ini b/tests/wpt/metadata/wasm/jsapi/instance/constructor-bad-imports.any.js.ini
new file mode 100644
index 00000000000..4a56f7af814
--- /dev/null
+++ b/tests/wpt/metadata/wasm/jsapi/instance/constructor-bad-imports.any.js.ini
@@ -0,0 +1,5 @@
+[constructor-bad-imports.any.html]
+  expected: ERROR
+
+[constructor-bad-imports.any.worker.html]
+  expected: ERROR
diff --git a/tests/wpt/metadata/wasm/jsapi/instance/constructor.any.js.ini b/tests/wpt/metadata/wasm/jsapi/instance/constructor.any.js.ini
index 1f493551629..9b54380bded 100644
--- a/tests/wpt/metadata/wasm/jsapi/instance/constructor.any.js.ini
+++ b/tests/wpt/metadata/wasm/jsapi/instance/constructor.any.js.ini
@@ -2,8 +2,44 @@
   [exports]
     expected: FAIL
 
+  [import with function that takes and returns i64]
+    expected: FAIL
+
+  [Multiple i64 arguments]
+    expected: FAIL
+
+  [i64 mutable WebAssembly.Global import]
+    expected: FAIL
+
+  [import with i64-returning function]
+    expected: FAIL
+
+  [export i64-returning function]
+    expected: FAIL
+
+  [i64 exports and imports]
+    expected: FAIL
+
 
 [constructor.any.worker.html]
   [exports]
     expected: FAIL
 
+  [import with function that takes and returns i64]
+    expected: FAIL
+
+  [Multiple i64 arguments]
+    expected: FAIL
+
+  [i64 mutable WebAssembly.Global import]
+    expected: FAIL
+
+  [import with i64-returning function]
+    expected: FAIL
+
+  [export i64-returning function]
+    expected: FAIL
+
+  [i64 exports and imports]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata/wasm/webapi/instantiateStreaming-bad-imports.any.js.ini b/tests/wpt/metadata/wasm/webapi/instantiateStreaming-bad-imports.any.js.ini
index 8c4461b9100..3458ca33507 100644
--- a/tests/wpt/metadata/wasm/webapi/instantiateStreaming-bad-imports.any.js.ini
+++ b/tests/wpt/metadata/wasm/webapi/instantiateStreaming-bad-imports.any.js.ini
@@ -5,7 +5,7 @@
 
 
 [instantiateStreaming-bad-imports.any.html]
-  expected: TIMEOUT
+  expected: ERROR
   [Imports argument with missing property: wrong property]
     expected: NOTRUN
 
@@ -180,9 +180,150 @@
   [Importing memory with an incorrectly-typed value: WebAssembly.Memory object (too large)]
     expected: NOTRUN
 
+  [Importing an f32 global with an incorrectly-typed value: BigInt]
+    expected: NOTRUN
+
+  [Importing an f64 global with an incorrectly-typed value: null]
+    expected: NOTRUN
+
+  [Importing an i32 mutable global with an immutable Global object]
+    expected: NOTRUN
+
+  [Importing an f64 global with an incorrectly-typed value: WebAssembly.Global object (wrong value type)]
+    expected: NOTRUN
+
+  [Importing an i64 global with an incorrectly-typed value: Object.create(WebAssembly.Global.prototype)]
+    expected: NOTRUN
+
+  [Importing an i32 global with an incorrectly-typed value: WebAssembly.Global]
+    expected: NOTRUN
+
+  [Importing an f64 global with an incorrectly-typed value: undefined]
+    expected: NOTRUN
+
+  [Importing an f32 global with an incorrectly-typed value: undefined]
+    expected: NOTRUN
+
+  [Importing an f64 global with an incorrectly-typed value: plain object]
+    expected: NOTRUN
+
+  [Importing an i64 mutable global with a primitive value]
+    expected: NOTRUN
+
+  [Importing an f32 global with an incorrectly-typed value: WebAssembly.Global.prototype]
+    expected: NOTRUN
+
+  [Importing an f32 global with an incorrectly-typed value: ""]
+    expected: NOTRUN
+
+  [Importing an i64 global with an incorrectly-typed value: Number]
+    expected: NOTRUN
+
+  [Importing an i64 global with an incorrectly-typed value: ""]
+    expected: NOTRUN
+
+  [Importing an i64 global with an incorrectly-typed value: WebAssembly.Global.prototype]
+    expected: NOTRUN
+
+  [Importing an i32 global with an incorrectly-typed value: symbol "Symbol()"]
+    expected: NOTRUN
+
+  [Importing an f64 global with an incorrectly-typed value: symbol "Symbol()"]
+    expected: NOTRUN
+
+  [Importing an f64 global with an incorrectly-typed value: WebAssembly.Global.prototype]
+    expected: NOTRUN
+
+  [Importing an f64 global with an incorrectly-typed value: BigInt]
+    expected: NOTRUN
+
+  [Importing an i64 global with an incorrectly-typed value: WebAssembly.Global]
+    expected: NOTRUN
+
+  [Importing an i32 global with an incorrectly-typed value: undefined]
+    expected: NOTRUN
+
+  [Importing an i64 global with an incorrectly-typed value: null]
+    expected: NOTRUN
+
+  [Importing an f64 global with an incorrectly-typed value: Object.create(WebAssembly.Global.prototype)]
+    expected: NOTRUN
+
+  [Importing an f64 global with an incorrectly-typed value: WebAssembly.Global]
+    expected: NOTRUN
+
+  [Importing an f32 global with an incorrectly-typed value: null]
+    expected: NOTRUN
+
+  [Importing an i32 global with an incorrectly-typed value: null]
+    expected: NOTRUN
+
+  [Importing an f32 global with an incorrectly-typed value: symbol "Symbol()"]
+    expected: NOTRUN
+
+  [Importing an f32 global with an incorrectly-typed value: plain object]
+    expected: NOTRUN
+
+  [Importing an i32 mutable global with a primitive value]
+    expected: NOTRUN
+
+  [Importing an f32 global with an incorrectly-typed value: WebAssembly.Global object (wrong value type)]
+    expected: NOTRUN
+
+  [Importing an f32 global with an incorrectly-typed value: Object.create(WebAssembly.Global.prototype)]
+    expected: NOTRUN
+
+  [Importing an i64 global with an incorrectly-typed value: true]
+    expected: NOTRUN
+
+  [Importing an f64 global with an incorrectly-typed value: true]
+    expected: NOTRUN
+
+  [Importing an i32 global with an incorrectly-typed value: true]
+    expected: NOTRUN
+
+  [Importing an i32 global with an incorrectly-typed value: WebAssembly.Global object (wrong value type)]
+    expected: NOTRUN
+
+  [Importing an i64 global with an incorrectly-typed value: plain object]
+    expected: NOTRUN
+
+  [Importing an i32 global with an incorrectly-typed value: WebAssembly.Global.prototype]
+    expected: NOTRUN
+
+  [Importing an i32 global with an incorrectly-typed value: ""]
+    expected: NOTRUN
+
+  [Importing an f32 global with an incorrectly-typed value: true]
+    expected: NOTRUN
+
+  [Importing an i64 global with an incorrectly-typed value: WebAssembly.Global object (wrong value type)]
+    expected: NOTRUN
+
+  [Importing an i32 global with an incorrectly-typed value: BigInt]
+    expected: NOTRUN
+
+  [Importing an f32 global with an incorrectly-typed value: WebAssembly.Global]
+    expected: NOTRUN
+
+  [Importing an i32 global with an incorrectly-typed value: plain object]
+    expected: NOTRUN
+
+  [Importing an f64 global with an incorrectly-typed value: ""]
+    expected: NOTRUN
+
+  [Importing an i64 global with an incorrectly-typed value: undefined]
+    expected: NOTRUN
+
+  [Importing an i64 global with an incorrectly-typed value: symbol "Symbol()"]
+    expected: NOTRUN
+
+  [Importing an i32 global with an incorrectly-typed value: Object.create(WebAssembly.Global.prototype)]
+    expected: NOTRUN
+
 
 [instantiateStreaming-bad-imports.any.worker.html]
-  expected: TIMEOUT
+  expected: ERROR
   [Imports argument with missing property: wrong property]
     expected: NOTRUN
 
@@ -357,6 +498,147 @@
   [Importing memory with an incorrectly-typed value: WebAssembly.Memory object (too large)]
     expected: NOTRUN
 
+  [Importing an f32 global with an incorrectly-typed value: BigInt]
+    expected: NOTRUN
+
+  [Importing an f64 global with an incorrectly-typed value: null]
+    expected: NOTRUN
+
+  [Importing an i32 mutable global with an immutable Global object]
+    expected: NOTRUN
+
+  [Importing an f64 global with an incorrectly-typed value: WebAssembly.Global object (wrong value type)]
+    expected: NOTRUN
+
+  [Importing an i64 global with an incorrectly-typed value: Object.create(WebAssembly.Global.prototype)]
+    expected: NOTRUN
+
+  [Importing an i32 global with an incorrectly-typed value: WebAssembly.Global]
+    expected: NOTRUN
+
+  [Importing an f64 global with an incorrectly-typed value: undefined]
+    expected: NOTRUN
+
+  [Importing an f32 global with an incorrectly-typed value: undefined]
+    expected: NOTRUN
+
+  [Importing an f64 global with an incorrectly-typed value: plain object]
+    expected: NOTRUN
+
+  [Importing an i64 mutable global with a primitive value]
+    expected: NOTRUN
+
+  [Importing an f32 global with an incorrectly-typed value: WebAssembly.Global.prototype]
+    expected: NOTRUN
+
+  [Importing an f32 global with an incorrectly-typed value: ""]
+    expected: NOTRUN
+
+  [Importing an i64 global with an incorrectly-typed value: Number]
+    expected: NOTRUN
+
+  [Importing an i64 global with an incorrectly-typed value: ""]
+    expected: NOTRUN
+
+  [Importing an i64 global with an incorrectly-typed value: WebAssembly.Global.prototype]
+    expected: NOTRUN
+
+  [Importing an i32 global with an incorrectly-typed value: symbol "Symbol()"]
+    expected: NOTRUN
+
+  [Importing an f64 global with an incorrectly-typed value: symbol "Symbol()"]
+    expected: NOTRUN
+
+  [Importing an f64 global with an incorrectly-typed value: WebAssembly.Global.prototype]
+    expected: NOTRUN
+
+  [Importing an f64 global with an incorrectly-typed value: BigInt]
+    expected: NOTRUN
+
+  [Importing an i64 global with an incorrectly-typed value: WebAssembly.Global]
+    expected: NOTRUN
+
+  [Importing an i32 global with an incorrectly-typed value: undefined]
+    expected: NOTRUN
+
+  [Importing an i64 global with an incorrectly-typed value: null]
+    expected: NOTRUN
+
+  [Importing an f64 global with an incorrectly-typed value: Object.create(WebAssembly.Global.prototype)]
+    expected: NOTRUN
+
+  [Importing an f64 global with an incorrectly-typed value: WebAssembly.Global]
+    expected: NOTRUN
+
+  [Importing an f32 global with an incorrectly-typed value: null]
+    expected: NOTRUN
+
+  [Importing an i32 global with an incorrectly-typed value: null]
+    expected: NOTRUN
+
+  [Importing an f32 global with an incorrectly-typed value: symbol "Symbol()"]
+    expected: NOTRUN
+
+  [Importing an f32 global with an incorrectly-typed value: plain object]
+    expected: NOTRUN
+
+  [Importing an i32 mutable global with a primitive value]
+    expected: NOTRUN
+
+  [Importing an f32 global with an incorrectly-typed value: WebAssembly.Global object (wrong value type)]
+    expected: NOTRUN
+
+  [Importing an f32 global with an incorrectly-typed value: Object.create(WebAssembly.Global.prototype)]
+    expected: NOTRUN
+
+  [Importing an i64 global with an incorrectly-typed value: true]
+    expected: NOTRUN
+
+  [Importing an f64 global with an incorrectly-typed value: true]
+    expected: NOTRUN
+
+  [Importing an i32 global with an incorrectly-typed value: true]
+    expected: NOTRUN
+
+  [Importing an i32 global with an incorrectly-typed value: WebAssembly.Global object (wrong value type)]
+    expected: NOTRUN
+
+  [Importing an i64 global with an incorrectly-typed value: plain object]
+    expected: NOTRUN
+
+  [Importing an i32 global with an incorrectly-typed value: WebAssembly.Global.prototype]
+    expected: NOTRUN
+
+  [Importing an i32 global with an incorrectly-typed value: ""]
+    expected: NOTRUN
+
+  [Importing an f32 global with an incorrectly-typed value: true]
+    expected: NOTRUN
+
+  [Importing an i64 global with an incorrectly-typed value: WebAssembly.Global object (wrong value type)]
+    expected: NOTRUN
+
+  [Importing an i32 global with an incorrectly-typed value: BigInt]
+    expected: NOTRUN
+
+  [Importing an f32 global with an incorrectly-typed value: WebAssembly.Global]
+    expected: NOTRUN
+
+  [Importing an i32 global with an incorrectly-typed value: plain object]
+    expected: NOTRUN
+
+  [Importing an f64 global with an incorrectly-typed value: ""]
+    expected: NOTRUN
+
+  [Importing an i64 global with an incorrectly-typed value: undefined]
+    expected: NOTRUN
+
+  [Importing an i64 global with an incorrectly-typed value: symbol "Symbol()"]
+    expected: NOTRUN
+
+  [Importing an i32 global with an incorrectly-typed value: Object.create(WebAssembly.Global.prototype)]
+    expected: NOTRUN
+
 
 [instantiateStreaming-bad-imports.any.sharedworker.html]
   expected: ERROR
diff --git a/tests/wpt/metadata/wasm/webapi/instantiateStreaming.any.js.ini b/tests/wpt/metadata/wasm/webapi/instantiateStreaming.any.js.ini
index 4fee50f346a..99b02ebd181 100644
--- a/tests/wpt/metadata/wasm/webapi/instantiateStreaming.any.js.ini
+++ b/tests/wpt/metadata/wasm/webapi/instantiateStreaming.any.js.ini
@@ -27,6 +27,39 @@
   [Synchronous options handling]
     expected: NOTRUN
 
+  [i64 mutable WebAssembly.Global import]
+    expected: NOTRUN
+
+  [i32 mutable WebAssembly.Global import]
+    expected: NOTRUN
+
+  [import with i64-returning function]
+    expected: NOTRUN
+
+  [Multiple i64 arguments]
+    expected: NOTRUN
+
+  [import with function that takes and returns i32]
+    expected: NOTRUN
+
+  [import with i64-taking function]
+    expected: NOTRUN
+
+  [import with function that takes and returns i64]
+    expected: NOTRUN
+
+  [export i64-returning function]
+    expected: NOTRUN
+
+  [import with i32-taking function]
+    expected: NOTRUN
+
+  [i64 exports and imports]
+    expected: NOTRUN
+
+  [import with i32-returning function]
+    expected: NOTRUN
+
 
 [instantiateStreaming.any.serviceworker.html]
   expected: ERROR
@@ -69,3 +102,36 @@
   [Synchronous options handling]
     expected: NOTRUN
 
+  [i64 mutable WebAssembly.Global import]
+    expected: NOTRUN
+
+  [i32 mutable WebAssembly.Global import]
+    expected: NOTRUN
+
+  [import with i64-returning function]
+    expected: NOTRUN
+
+  [Multiple i64 arguments]
+    expected: NOTRUN
+
+  [import with function that takes and returns i32]
+    expected: NOTRUN
+
+  [import with i64-taking function]
+    expected: NOTRUN
+
+  [import with function that takes and returns i64]
+    expected: NOTRUN
+
+  [export i64-returning function]
+    expected: NOTRUN
+
+  [import with i32-taking function]
+    expected: NOTRUN
+
+  [i64 exports and imports]
+    expected: NOTRUN
+
+  [import with i32-returning function]
+    expected: NOTRUN
+
diff --git a/tests/wpt/metadata/webmessaging/with-ports/018.html.ini b/tests/wpt/metadata/webmessaging/with-ports/018.html.ini
new file mode 100644
index 00000000000..663a1f8fa30
--- /dev/null
+++ b/tests/wpt/metadata/webmessaging/with-ports/018.html.ini
@@ -0,0 +1,5 @@
+[018.html]
+  expected: TIMEOUT
+  [origin of the script that invoked the method, javascript:]
+    expected: TIMEOUT
+
diff --git a/tests/wpt/metadata/webmessaging/with-ports/017.html.ini b/tests/wpt/metadata/webmessaging/without-ports/017.html.ini
similarity index 100%
rename from tests/wpt/metadata/webmessaging/with-ports/017.html.ini
rename to tests/wpt/metadata/webmessaging/without-ports/017.html.ini
diff --git a/tests/wpt/metadata/workers/constructors/Worker/Worker-constructor.html.ini b/tests/wpt/metadata/workers/constructors/Worker/Worker-constructor.html.ini
deleted file mode 100644
index 80f9a4f15b8..00000000000
--- a/tests/wpt/metadata/workers/constructors/Worker/Worker-constructor.html.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[Worker-constructor.html]
-  expected: ERROR
diff --git a/tests/wpt/metadata/workers/semantics/run-a-worker/003.html.ini b/tests/wpt/metadata/workers/semantics/run-a-worker/003.html.ini
index d6e39444229..49f489d2a1c 100644
--- a/tests/wpt/metadata/workers/semantics/run-a-worker/003.html.ini
+++ b/tests/wpt/metadata/workers/semantics/run-a-worker/003.html.ini
@@ -1,5 +1,6 @@
 [003.html]
   type: testharness
+  expected: ERROR
   [shared]
     expected: FAIL
 
diff --git a/tests/wpt/web-platform-tests/css/css-contain/counter-scoping-003.html b/tests/wpt/web-platform-tests/css/css-contain/counter-scoping-003.html
index c4a004ff18c..a12dbfa7001 100644
--- a/tests/wpt/web-platform-tests/css/css-contain/counter-scoping-003.html
+++ b/tests/wpt/web-platform-tests/css/css-contain/counter-scoping-003.html
@@ -13,9 +13,11 @@ div {
   contain: style;
   counter-increment: c 123;
 }
+span {
+  counter-increment: c 1;
+}
 span::before {
   content: counter(c);
-  counter-increment: c 1;
 }
 </style>
 
diff --git a/tests/wpt/web-platform-tests/css/css-grid/parsing/grid-template-columns-computed-implicit-track.html b/tests/wpt/web-platform-tests/css/css-grid/parsing/grid-template-columns-computed-implicit-track.html
new file mode 100644
index 00000000000..98d9efa5735
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-grid/parsing/grid-template-columns-computed-implicit-track.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: getComputedStyle().gridTemplateColumns</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#resolved-track-list" title="7.2.6. Resolved Value of a Track Listing">
+<meta name="assert" content="Checks the resolved value of grid-template-columns on a grid container with a leading implicit track.">
+<style>
+#target {
+  display: grid;
+  width: 1px;
+  font-size: 1px;
+}
+#item {
+  grid-column: auto / 1;
+  width: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="target">
+  <div id="item"></div>
+</div>
+<script>
+// Can't use the test_computed_value from computed-testcommon.js
+// because grid-template-columns doesn't round-trip in this test.
+function grid_template_columns(specified, computed) {
+  test(() => {
+    const target = document.getElementById('target');
+    target.style.gridTemplateColumns = '';
+    target.style.gridTemplateColumns = specified;
+    assert_equals(getComputedStyle(target).gridTemplateColumns, computed);
+  }, `Property grid-template-columns value '${specified}' computes to '${computed}'`);
+}
+
+grid_template_columns("none", "10px");
+grid_template_columns("1px", "10px 1px");
+grid_template_columns("1px [a]", "10px 1px [a]");
+grid_template_columns("1px [a] 2px", "10px 1px [a] 2px");
+grid_template_columns("[a] 1px", "10px [a] 1px");
+grid_template_columns("[a] 1px [b]", "10px [a] 1px [b]");
+grid_template_columns("1px repeat(1, 2px) 3px", "10px 1px 2px 3px");
+grid_template_columns("1px repeat(auto-fill, 2px) 3px", "10px 1px 2px 3px");
+grid_template_columns("1px repeat(auto-fit, 2px) 3px", "10px 1px 0px 3px");
+grid_template_columns("1px [a] repeat(1, 2px 3px) [b] 4px", "10px 1px [a] 2px 3px [b] 4px");
+grid_template_columns("1px [a] repeat(auto-fill, 2px 3px) [b] 4px", "10px 1px [a] 2px 3px [b] 4px");
+grid_template_columns("1px [a] repeat(auto-fit, 2px 3px) [b] 4px", "10px 1px [a] 0px 0px [b] 4px");
+grid_template_columns("1px [a] repeat(1, [b] 2px [c]) [d] 3px", "10px 1px [a b] 2px [c d] 3px");
+grid_template_columns("1px [a] repeat(auto-fill, [b] 2px [c]) [d] 3px", "10px 1px [a b] 2px [c d] 3px");
+grid_template_columns("1px [a] repeat(auto-fit, [b] 2px [c]) [d] 3px", "10px 1px [a b] 0px [c d] 3px");
+grid_template_columns("[a] 1px repeat(1, 2px [b] 3px) 4px [d]", "10px [a] 1px 2px [b] 3px 4px [d]");
+grid_template_columns("[a] 1px repeat(auto-fill, 2px [b] 3px) 4px [d]", "10px [a] 1px 2px [b] 3px 4px [d]");
+grid_template_columns("[a] 1px repeat(auto-fit, 2px [b] 3px) 4px [d]", "10px [a] 1px 0px [b] 0px 4px [d]");
+grid_template_columns("100% [a] repeat(1, [b] 200% [c]) [d] 300%", "10px 1px [a b] 2px [c d] 3px");
+grid_template_columns("100% [a] repeat(auto-fill, [b] 200% [c]) [d] 300%", "10px 1px [a b] 2px [c d] 3px");
+grid_template_columns("100% [a] repeat(auto-fit, [b] 200% [c]) [d] 300%", "10px 1px [a b] 0px [c d] 3px");
+grid_template_columns("[a] 1em repeat(1, 2em [b] 3em) 4em [d]", "10px [a] 1px 2px [b] 3px 4px [d]");
+grid_template_columns("[a] 1em repeat(auto-fill, 2em [b] 3em) 4em [d]", "10px [a] 1px 2px [b] 3px 4px [d]");
+grid_template_columns("[a] 1em repeat(auto-fit, 2em [b] 3em) 4em [d]", "10px [a] 1px 0px [b] 0px 4px [d]");
+</script>
diff --git a/tests/wpt/web-platform-tests/css/css-grid/parsing/grid-template-rows-computed-implicit-track.html b/tests/wpt/web-platform-tests/css/css-grid/parsing/grid-template-rows-computed-implicit-track.html
new file mode 100644
index 00000000000..7ed3110c76a
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-grid/parsing/grid-template-rows-computed-implicit-track.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: getComputedStyle().gridTemplateRows</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#resolved-track-list" title="7.2.6. Resolved Value of a Track Listing">
+<meta name="assert" content="Checks the resolved value of grid-template-rows on a grid container with a leading implicit track.">
+<style>
+#target {
+  display: grid;
+  height: 1px;
+  font-size: 1px;
+}
+#item {
+  grid-row: auto / 1;
+  height: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="target">
+  <div id="item"></div>
+</div>
+<script>
+// Can't use the test_computed_value from computed-testcommon.js
+// because grid-template-rows doesn't round-trip in this test.
+function grid_template_rows(specified, computed) {
+  test(() => {
+    const target = document.getElementById('target');
+    target.style.gridTemplateRows = '';
+    target.style.gridTemplateRows = specified;
+    assert_equals(getComputedStyle(target).gridTemplateRows, computed);
+  }, `Property grid-template-rows value '${specified}' computes to '${computed}'`);
+}
+
+grid_template_rows("none", "10px");
+grid_template_rows("1px", "10px 1px");
+grid_template_rows("1px [a]", "10px 1px [a]");
+grid_template_rows("1px [a] 2px", "10px 1px [a] 2px");
+grid_template_rows("[a] 1px", "10px [a] 1px");
+grid_template_rows("[a] 1px [b]", "10px [a] 1px [b]");
+grid_template_rows("1px repeat(1, 2px) 3px", "10px 1px 2px 3px");
+grid_template_rows("1px repeat(auto-fill, 2px) 3px", "10px 1px 2px 3px");
+grid_template_rows("1px repeat(auto-fit, 2px) 3px", "10px 1px 0px 3px");
+grid_template_rows("1px [a] repeat(1, 2px 3px) [b] 4px", "10px 1px [a] 2px 3px [b] 4px");
+grid_template_rows("1px [a] repeat(auto-fill, 2px 3px) [b] 4px", "10px 1px [a] 2px 3px [b] 4px");
+grid_template_rows("1px [a] repeat(auto-fit, 2px 3px) [b] 4px", "10px 1px [a] 0px 0px [b] 4px");
+grid_template_rows("1px [a] repeat(1, [b] 2px [c]) [d] 3px", "10px 1px [a b] 2px [c d] 3px");
+grid_template_rows("1px [a] repeat(auto-fill, [b] 2px [c]) [d] 3px", "10px 1px [a b] 2px [c d] 3px");
+grid_template_rows("1px [a] repeat(auto-fit, [b] 2px [c]) [d] 3px", "10px 1px [a b] 0px [c d] 3px");
+grid_template_rows("[a] 1px repeat(1, 2px [b] 3px) 4px [d]", "10px [a] 1px 2px [b] 3px 4px [d]");
+grid_template_rows("[a] 1px repeat(auto-fill, 2px [b] 3px) 4px [d]", "10px [a] 1px 2px [b] 3px 4px [d]");
+grid_template_rows("[a] 1px repeat(auto-fit, 2px [b] 3px) 4px [d]", "10px [a] 1px 0px [b] 0px 4px [d]");
+grid_template_rows("100% [a] repeat(1, [b] 200% [c]) [d] 300%", "10px 1px [a b] 2px [c d] 3px");
+grid_template_rows("100% [a] repeat(auto-fill, [b] 200% [c]) [d] 300%", "10px 1px [a b] 2px [c d] 3px");
+grid_template_rows("100% [a] repeat(auto-fit, [b] 200% [c]) [d] 300%", "10px 1px [a b] 0px [c d] 3px");
+grid_template_rows("[a] 1em repeat(1, 2em [b] 3em) 4em [d]", "10px [a] 1px 2px [b] 3px 4px [d]");
+grid_template_rows("[a] 1em repeat(auto-fill, 2em [b] 3em) 4em [d]", "10px [a] 1px 2px [b] 3px 4px [d]");
+grid_template_rows("[a] 1em repeat(auto-fit, 2em [b] 3em) 4em [d]", "10px [a] 1px 0px [b] 0px 4px [d]");
+</script>
diff --git a/tests/wpt/web-platform-tests/css/css-transforms/reference/subpixel-transform-changes-004-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/reference/subpixel-transform-changes-004-ref.html
new file mode 100644
index 00000000000..5eca08a1fa1
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-transforms/reference/subpixel-transform-changes-004-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Transforms Reference Test: Subpixel transform changes trivial 3D</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+
+<div id="translateX1" style="transform: translate3d(0.48px, 0px, 0px);">transform: translate3d(0.48px, 0px, 0px);</div>
+<div id="translateX2" style="transform: translate3d(3.17px, 0px, 0px);">transform: translate3d(3.17px, 0px, 0px);</div>
+<div id="translateX3" style="transform: translate3d(0.34px, 0px, 0px);">transform: translate3d(0.34px, 0px, 0px);</div>
+
+<div id="translateY1" style="transform: translate3d(0px, 0.48px, 0px);">transform: translate3d(0px, 0.48px, 0px);</div>
+<div id="translateY2" style="transform: translate3d(0px, 3.17px, 0px);">transform: translate3d(0px, 3.17px, 0px);</div>
+<div id="translateY3" style="transform: translate3d(0px, 0.34px, 0px);">transform: translate3d(0px, 0.34px, 0px);</div>
diff --git a/tests/wpt/web-platform-tests/css/css-transforms/subpixel-transform-changes-004.html b/tests/wpt/web-platform-tests/css/css-transforms/subpixel-transform-changes-004.html
new file mode 100644
index 00000000000..bd862957d83
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-transforms/subpixel-transform-changes-004.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<meta charset="utf-8">
+<title>CSS Transforms Test: Subpixel transform changes trivial 3D</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-property">
+<link rel="match" href="reference/subpixel-transform-changes-004-ref.html">
+<meta name="assert" content="Test checks that subpixel transform changes work as expected regardless of trivial 3D transforms.">
+
+<div id="translateX1" style="transform: translate3d(0.12px, 0px, 0px);">transform: translate3d(0.48px, 0px, 0px);</div>
+<div id="translateX2" style="transform: translate3d(0.56px, 0px, 0px);">transform: translate3d(3.17px, 0px, 0px);</div>
+<div id="translateX3" style="transform: translate3d(1.87px, 0px, 0px);">transform: translate3d(0.34px, 0px, 0px);</div>
+
+<div id="translateY1" style="transform: translate3d(0px, 0.12px, 0px);">transform: translate3d(0px, 0.48px, 0px);</div>
+<div id="translateY2" style="transform: translate3d(0px, 0.56px, 0px);">transform: translate3d(0px, 3.17px, 0px);</div>
+<div id="translateY3" style="transform: translate3d(0px, 1.87px, 0px);">transform: translate3d(0px, 0.34px, 0px);</div>
+
+<script>
+  requestAnimationFrame(() => requestAnimationFrame(() => {
+    translateX1.style.transform = "translate3d(0.48px, 0px, 0px)";
+    translateX2.style.transform = "translate3d(3.17px, 0px, 0px)";
+    translateX3.style.transform = "translate3d(0.34px, 0px, 0px)";
+
+    translateY1.style.transform = "translate3d(0px, 0.48px, 0px)";
+    translateY2.style.transform = "translate3d(0px, 3.17px, 0px)";
+    translateY3.style.transform = "translate3d(0px, 0.34px, 0px)";
+
+    document.documentElement.classList.remove("reftest-wait");
+  }));
+</script>
+</html>
diff --git a/tests/wpt/web-platform-tests/html/canvas/element/2x4.png b/tests/wpt/web-platform-tests/html/canvas/element/2x4.png
deleted file mode 100644
index f5589a73184..00000000000
Binary files a/tests/wpt/web-platform-tests/html/canvas/element/2x4.png and /dev/null differ
diff --git a/tests/wpt/web-platform-tests/html/canvas/element/4x2.png b/tests/wpt/web-platform-tests/html/canvas/element/4x2.png
deleted file mode 100644
index 4a8d81e7c22..00000000000
Binary files a/tests/wpt/web-platform-tests/html/canvas/element/4x2.png and /dev/null differ
diff --git a/tests/wpt/web-platform-tests/html/canvas/element/clear-100x50.png b/tests/wpt/web-platform-tests/html/canvas/element/clear-100x50.png
deleted file mode 100644
index eeedd0ff058..00000000000
Binary files a/tests/wpt/web-platform-tests/html/canvas/element/clear-100x50.png and /dev/null differ
diff --git a/tests/wpt/web-platform-tests/html/canvas/element/manual/drawing-images-to-the-canvas/drawimage_html_image.html b/tests/wpt/web-platform-tests/html/canvas/element/manual/drawing-images-to-the-canvas/drawimage_html_image.html
index 9216d1dac94..59a7d644656 100644
--- a/tests/wpt/web-platform-tests/html/canvas/element/manual/drawing-images-to-the-canvas/drawimage_html_image.html
+++ b/tests/wpt/web-platform-tests/html/canvas/element/manual/drawing-images-to-the-canvas/drawimage_html_image.html
@@ -12,7 +12,7 @@ var transparentBlackPixel = [0, 0, 0, 0];
 
 var destCanvas = document.getElementById('dest');
 var sourceImg = document.createElement('img');
-sourceImg.src = '/html/canvas/element/2x2.png';
+sourceImg.src = '/html/canvas/resources/2x2.png';
 sourceImg.width = sourceWidth;
 sourceImg.height = sourceHeight;
 var destCtx = destCanvas.getContext('2d');
diff --git a/tests/wpt/web-platform-tests/html/canvas/element/manual/drawing-images-to-the-canvas/drawimage_svg_image_1.html b/tests/wpt/web-platform-tests/html/canvas/element/manual/drawing-images-to-the-canvas/drawimage_svg_image_1.html
index 46c54aebefc..ea3300bef27 100644
--- a/tests/wpt/web-platform-tests/html/canvas/element/manual/drawing-images-to-the-canvas/drawimage_svg_image_1.html
+++ b/tests/wpt/web-platform-tests/html/canvas/element/manual/drawing-images-to-the-canvas/drawimage_svg_image_1.html
@@ -9,7 +9,7 @@
 <script>
 async_test(t => {
   var sourceImg = document.createElementNS('http://www.w3.org/2000/svg', 'image');
-  sourceImg.setAttributeNS('http://www.w3.org/1999/xlink', 'href', '/html/canvas/element/2x2.png');
+  sourceImg.setAttributeNS('http://www.w3.org/1999/xlink', 'href', '/html/canvas/resources/2x2.png');
   sourceImg.width = 100;
   sourceImg.height = 100;
 
diff --git a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/pattern-semitransparent-p3d65.png b/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/pattern-semitransparent-p3d65.png
deleted file mode 100644
index 5eb3f6a15f0..00000000000
Binary files a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/pattern-semitransparent-p3d65.png and /dev/null differ
diff --git a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/pattern-semitransparent-rec2020.png b/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/pattern-semitransparent-rec2020.png
deleted file mode 100644
index b64db073791..00000000000
Binary files a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/pattern-semitransparent-rec2020.png and /dev/null differ
diff --git a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/pattern-semitransparent-srgb.png b/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/pattern-semitransparent-srgb.png
deleted file mode 100644
index bfbba8b8e29..00000000000
Binary files a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/pattern-semitransparent-srgb.png and /dev/null differ
diff --git a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/pattern-srgb-fullcolor.ogv b/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/pattern-srgb-fullcolor.ogv
deleted file mode 100644
index 43a72bf271b..00000000000
Binary files a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/pattern-srgb-fullcolor.ogv and /dev/null differ
diff --git a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/pattern-srgb-transparent.bmp b/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/pattern-srgb-transparent.bmp
deleted file mode 100644
index 9c9561c7046..00000000000
Binary files a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/pattern-srgb-transparent.bmp and /dev/null differ
diff --git a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/pattern-srgb-transparent.ico b/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/pattern-srgb-transparent.ico
deleted file mode 100644
index 87e8ff45de7..00000000000
Binary files a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/pattern-srgb-transparent.ico and /dev/null differ
diff --git a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/pattern-srgb-transparent.png b/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/pattern-srgb-transparent.png
deleted file mode 100644
index bfbba8b8e29..00000000000
Binary files a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/pattern-srgb-transparent.png and /dev/null differ
diff --git a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/pattern-srgb-transparent.webp b/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/pattern-srgb-transparent.webp
deleted file mode 100644
index 925646067ad..00000000000
Binary files a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/pattern-srgb-transparent.webp and /dev/null differ
diff --git a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/pattern-srgb.bmp b/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/pattern-srgb.bmp
deleted file mode 100644
index 465d203d98b..00000000000
Binary files a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/pattern-srgb.bmp and /dev/null differ
diff --git a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/pattern-srgb.gif b/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/pattern-srgb.gif
deleted file mode 100644
index 25bcefb2bf4..00000000000
Binary files a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/pattern-srgb.gif and /dev/null differ
diff --git a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/pattern-srgb.ico b/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/pattern-srgb.ico
deleted file mode 100644
index e5375826abd..00000000000
Binary files a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/pattern-srgb.ico and /dev/null differ
diff --git a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/pattern-srgb.jpg b/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/pattern-srgb.jpg
deleted file mode 100644
index c4579e8f062..00000000000
Binary files a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/pattern-srgb.jpg and /dev/null differ
diff --git a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/pattern-srgb.png b/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/pattern-srgb.png
deleted file mode 100644
index 1b5876b5f39..00000000000
Binary files a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/pattern-srgb.png and /dev/null differ
diff --git a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/pattern-srgb.svg b/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/pattern-srgb.svg
deleted file mode 100644
index 05171308494..00000000000
--- a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/pattern-srgb.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <rect x="0" y="0" width="10px" height="10px" fill="#9b1b1b"/>
-    <rect x="10" y="0" width="10px" height="10px" fill="#1b9b1b"/>
-    <rect x="0" y="10" width="10px" height="10px" fill="#1b1b9b"/>
-    <rect x="10" y="10" width="10px" height="10px" fill="#1b1b1b"/>
-</svg>
diff --git a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/pattern-srgb.webp b/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/pattern-srgb.webp
deleted file mode 100644
index b7c0a421dcb..00000000000
Binary files a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/pattern-srgb.webp and /dev/null differ
diff --git a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_AdobeRGB_opaque.png b/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_AdobeRGB_opaque.png
deleted file mode 100644
index c4496db19bf..00000000000
Binary files a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_AdobeRGB_opaque.png and /dev/null differ
diff --git a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_AdobeRGB_transparent.png b/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_AdobeRGB_transparent.png
deleted file mode 100644
index 3b4cfda52c5..00000000000
Binary files a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_AdobeRGB_transparent.png and /dev/null differ
diff --git a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_DisplayP3_opaque.png b/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_DisplayP3_opaque.png
deleted file mode 100644
index e7a142cd2e1..00000000000
Binary files a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_DisplayP3_opaque.png and /dev/null differ
diff --git a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_DisplayP3_transparent.png b/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_DisplayP3_transparent.png
deleted file mode 100644
index 0b035317c81..00000000000
Binary files a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_DisplayP3_transparent.png and /dev/null differ
diff --git a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_ProPhoto_opaque.png b/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_ProPhoto_opaque.png
deleted file mode 100644
index a1dc7ddb0de..00000000000
Binary files a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_ProPhoto_opaque.png and /dev/null differ
diff --git a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_ProPhoto_transparent.png b/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_ProPhoto_transparent.png
deleted file mode 100644
index be2eb1208e1..00000000000
Binary files a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_ProPhoto_transparent.png and /dev/null differ
diff --git a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_Rec2020_opaque.png b/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_Rec2020_opaque.png
deleted file mode 100644
index e2a2d144518..00000000000
Binary files a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_Rec2020_opaque.png and /dev/null differ
diff --git a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_Rec2020_transparent.png b/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_Rec2020_transparent.png
deleted file mode 100644
index 960d7d8e75d..00000000000
Binary files a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_Rec2020_transparent.png and /dev/null differ
diff --git a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_AdobeRGB_opaque.png b/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_AdobeRGB_opaque.png
deleted file mode 100644
index 80cf9785eb0..00000000000
Binary files a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_AdobeRGB_opaque.png and /dev/null differ
diff --git a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_AdobeRGB_transparent.png b/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_AdobeRGB_transparent.png
deleted file mode 100644
index 3ec565f8c29..00000000000
Binary files a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_AdobeRGB_transparent.png and /dev/null differ
diff --git a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_DisplayP3_opaque.png b/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_DisplayP3_opaque.png
deleted file mode 100644
index 5f3134b79cf..00000000000
Binary files a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_DisplayP3_opaque.png and /dev/null differ
diff --git a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_DisplayP3_transparent.png b/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_DisplayP3_transparent.png
deleted file mode 100644
index 500a70eff85..00000000000
Binary files a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_DisplayP3_transparent.png and /dev/null differ
diff --git a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_ProPhoto_opaque.png b/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_ProPhoto_opaque.png
deleted file mode 100644
index b5d0e07a7a4..00000000000
Binary files a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_ProPhoto_opaque.png and /dev/null differ
diff --git a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_ProPhoto_transparent.png b/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_ProPhoto_transparent.png
deleted file mode 100644
index e4ec3e44549..00000000000
Binary files a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_ProPhoto_transparent.png and /dev/null differ
diff --git a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_Rec2020_opaque.png b/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_Rec2020_opaque.png
deleted file mode 100644
index c487d5846f8..00000000000
Binary files a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_Rec2020_opaque.png and /dev/null differ
diff --git a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_Rec2020_transparent.png b/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_Rec2020_transparent.png
deleted file mode 100644
index 78fe202c0e4..00000000000
Binary files a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_Rec2020_transparent.png and /dev/null differ
diff --git a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_sRGB_opaque.png b/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_sRGB_opaque.png
deleted file mode 100644
index babf232a369..00000000000
Binary files a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_sRGB_opaque.png and /dev/null differ
diff --git a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_sRGB_transparent.png b/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_sRGB_transparent.png
deleted file mode 100644
index 30164040096..00000000000
Binary files a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_sRGB_transparent.png and /dev/null differ
diff --git a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_sRGB_opaque.png b/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_sRGB_opaque.png
deleted file mode 100644
index 8a665345e9c..00000000000
Binary files a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_sRGB_opaque.png and /dev/null differ
diff --git a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_sRGB_transparent.png b/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_sRGB_transparent.png
deleted file mode 100644
index e51cda77c40..00000000000
Binary files a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_16bit_sRGB_transparent.png and /dev/null differ
diff --git a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_8bit_AdobeRGB_opaque.png b/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_8bit_AdobeRGB_opaque.png
deleted file mode 100644
index 8b787b5c872..00000000000
Binary files a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_8bit_AdobeRGB_opaque.png and /dev/null differ
diff --git a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_8bit_AdobeRGB_transparent.png b/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_8bit_AdobeRGB_transparent.png
deleted file mode 100644
index 727028e7656..00000000000
Binary files a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_8bit_AdobeRGB_transparent.png and /dev/null differ
diff --git a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_8bit_DisplayP3_opaque.png b/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_8bit_DisplayP3_opaque.png
deleted file mode 100644
index fe8bdd49637..00000000000
Binary files a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_8bit_DisplayP3_opaque.png and /dev/null differ
diff --git a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_8bit_DisplayP3_transparent.png b/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_8bit_DisplayP3_transparent.png
deleted file mode 100644
index b836afebed3..00000000000
Binary files a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_8bit_DisplayP3_transparent.png and /dev/null differ
diff --git a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_8bit_ProPhoto_opaque.png b/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_8bit_ProPhoto_opaque.png
deleted file mode 100644
index 5ecd8686065..00000000000
Binary files a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_8bit_ProPhoto_opaque.png and /dev/null differ
diff --git a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_8bit_ProPhoto_transparent.png b/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_8bit_ProPhoto_transparent.png
deleted file mode 100644
index 85a349dc1d1..00000000000
Binary files a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_8bit_ProPhoto_transparent.png and /dev/null differ
diff --git a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_8bit_Rec2020_opaque.png b/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_8bit_Rec2020_opaque.png
deleted file mode 100644
index 599cd34040e..00000000000
Binary files a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_8bit_Rec2020_opaque.png and /dev/null differ
diff --git a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_8bit_Rec2020_transparent.png b/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_8bit_Rec2020_transparent.png
deleted file mode 100644
index ecf65c3d460..00000000000
Binary files a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_8bit_Rec2020_transparent.png and /dev/null differ
diff --git a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_8bit_sRGB_opaque.png b/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_8bit_sRGB_opaque.png
deleted file mode 100644
index 9cab6d12e6e..00000000000
Binary files a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_8bit_sRGB_opaque.png and /dev/null differ
diff --git a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_8bit_sRGB_transparent.png b/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_8bit_sRGB_transparent.png
deleted file mode 100644
index 5fa01e62c20..00000000000
Binary files a/tests/wpt/web-platform-tests/html/canvas/element/wide-gamut-canvas/resources/png-16bit/2x2_8bit_sRGB_transparent.png and /dev/null differ
diff --git a/tests/wpt/web-platform-tests/html/canvas/offscreen/convert-to-blob/offscreencanvas.convert.to.blob.html b/tests/wpt/web-platform-tests/html/canvas/offscreen/manual/convert-to-blob/offscreencanvas.convert.to.blob.html
similarity index 100%
rename from tests/wpt/web-platform-tests/html/canvas/offscreen/convert-to-blob/offscreencanvas.convert.to.blob.html
rename to tests/wpt/web-platform-tests/html/canvas/offscreen/manual/convert-to-blob/offscreencanvas.convert.to.blob.html
diff --git a/tests/wpt/web-platform-tests/html/canvas/offscreen/convert-to-blob/offscreencanvas.convert.to.blob.w.html b/tests/wpt/web-platform-tests/html/canvas/offscreen/manual/convert-to-blob/offscreencanvas.convert.to.blob.w.html
similarity index 100%
rename from tests/wpt/web-platform-tests/html/canvas/offscreen/convert-to-blob/offscreencanvas.convert.to.blob.w.html
rename to tests/wpt/web-platform-tests/html/canvas/offscreen/manual/convert-to-blob/offscreencanvas.convert.to.blob.w.html
diff --git a/tests/wpt/web-platform-tests/html/canvas/offscreen/filter/offscreencanvas.filter.html b/tests/wpt/web-platform-tests/html/canvas/offscreen/manual/filter/offscreencanvas.filter.html
similarity index 100%
rename from tests/wpt/web-platform-tests/html/canvas/offscreen/filter/offscreencanvas.filter.html
rename to tests/wpt/web-platform-tests/html/canvas/offscreen/manual/filter/offscreencanvas.filter.html
diff --git a/tests/wpt/web-platform-tests/html/canvas/offscreen/filter/offscreencanvas.filter.js b/tests/wpt/web-platform-tests/html/canvas/offscreen/manual/filter/offscreencanvas.filter.js
similarity index 100%
rename from tests/wpt/web-platform-tests/html/canvas/offscreen/filter/offscreencanvas.filter.js
rename to tests/wpt/web-platform-tests/html/canvas/offscreen/manual/filter/offscreencanvas.filter.js
diff --git a/tests/wpt/web-platform-tests/html/canvas/offscreen/filter/offscreencanvas.filter.w.html b/tests/wpt/web-platform-tests/html/canvas/offscreen/manual/filter/offscreencanvas.filter.w.html
similarity index 100%
rename from tests/wpt/web-platform-tests/html/canvas/offscreen/filter/offscreencanvas.filter.w.html
rename to tests/wpt/web-platform-tests/html/canvas/offscreen/manual/filter/offscreencanvas.filter.w.html
diff --git a/tests/wpt/web-platform-tests/html/canvas/offscreen/image-smoothing/image.smoothing.html b/tests/wpt/web-platform-tests/html/canvas/offscreen/manual/image-smoothing/image.smoothing.html
similarity index 100%
rename from tests/wpt/web-platform-tests/html/canvas/offscreen/image-smoothing/image.smoothing.html
rename to tests/wpt/web-platform-tests/html/canvas/offscreen/manual/image-smoothing/image.smoothing.html
diff --git a/tests/wpt/web-platform-tests/html/canvas/offscreen/image-smoothing/image.smoothing.worker.js b/tests/wpt/web-platform-tests/html/canvas/offscreen/manual/image-smoothing/image.smoothing.worker.js
similarity index 100%
rename from tests/wpt/web-platform-tests/html/canvas/offscreen/image-smoothing/image.smoothing.worker.js
rename to tests/wpt/web-platform-tests/html/canvas/offscreen/manual/image-smoothing/image.smoothing.worker.js
diff --git a/tests/wpt/web-platform-tests/html/canvas/offscreen/the-offscreen-canvas/offscreencanvas.commit.html b/tests/wpt/web-platform-tests/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.commit.html
similarity index 100%
rename from tests/wpt/web-platform-tests/html/canvas/offscreen/the-offscreen-canvas/offscreencanvas.commit.html
rename to tests/wpt/web-platform-tests/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.commit.html
diff --git a/tests/wpt/web-platform-tests/html/canvas/offscreen/the-offscreen-canvas/offscreencanvas.commit.w.html b/tests/wpt/web-platform-tests/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.commit.w.html
similarity index 100%
rename from tests/wpt/web-platform-tests/html/canvas/offscreen/the-offscreen-canvas/offscreencanvas.commit.w.html
rename to tests/wpt/web-platform-tests/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.commit.w.html
diff --git a/tests/wpt/web-platform-tests/html/canvas/offscreen/the-offscreen-canvas/offscreencanvas.constructor.html b/tests/wpt/web-platform-tests/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.constructor.html
similarity index 100%
rename from tests/wpt/web-platform-tests/html/canvas/offscreen/the-offscreen-canvas/offscreencanvas.constructor.html
rename to tests/wpt/web-platform-tests/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.constructor.html
diff --git a/tests/wpt/web-platform-tests/html/canvas/offscreen/the-offscreen-canvas/offscreencanvas.constructor.worker.js b/tests/wpt/web-platform-tests/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.constructor.worker.js
similarity index 100%
rename from tests/wpt/web-platform-tests/html/canvas/offscreen/the-offscreen-canvas/offscreencanvas.constructor.worker.js
rename to tests/wpt/web-platform-tests/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.constructor.worker.js
diff --git a/tests/wpt/web-platform-tests/html/canvas/offscreen/the-offscreen-canvas/offscreencanvas.getcontext.html b/tests/wpt/web-platform-tests/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.getcontext.html
similarity index 100%
rename from tests/wpt/web-platform-tests/html/canvas/offscreen/the-offscreen-canvas/offscreencanvas.getcontext.html
rename to tests/wpt/web-platform-tests/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.getcontext.html
diff --git a/tests/wpt/web-platform-tests/html/canvas/offscreen/the-offscreen-canvas/offscreencanvas.getcontext.worker.js b/tests/wpt/web-platform-tests/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.getcontext.worker.js
similarity index 100%
rename from tests/wpt/web-platform-tests/html/canvas/offscreen/the-offscreen-canvas/offscreencanvas.getcontext.worker.js
rename to tests/wpt/web-platform-tests/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.getcontext.worker.js
diff --git a/tests/wpt/web-platform-tests/html/canvas/offscreen/the-offscreen-canvas/offscreencanvas.resize.html b/tests/wpt/web-platform-tests/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.resize.html
similarity index 100%
rename from tests/wpt/web-platform-tests/html/canvas/offscreen/the-offscreen-canvas/offscreencanvas.resize.html
rename to tests/wpt/web-platform-tests/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.resize.html
diff --git a/tests/wpt/web-platform-tests/html/canvas/offscreen/the-offscreen-canvas/offscreencanvas.transfer.to.imagebitmap.html b/tests/wpt/web-platform-tests/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.transfer.to.imagebitmap.html
similarity index 100%
rename from tests/wpt/web-platform-tests/html/canvas/offscreen/the-offscreen-canvas/offscreencanvas.transfer.to.imagebitmap.html
rename to tests/wpt/web-platform-tests/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.transfer.to.imagebitmap.html
diff --git a/tests/wpt/web-platform-tests/html/canvas/offscreen/the-offscreen-canvas/offscreencanvas.transfer.to.imagebitmap.w.html b/tests/wpt/web-platform-tests/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.transfer.to.imagebitmap.w.html
similarity index 100%
rename from tests/wpt/web-platform-tests/html/canvas/offscreen/the-offscreen-canvas/offscreencanvas.transfer.to.imagebitmap.w.html
rename to tests/wpt/web-platform-tests/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.transfer.to.imagebitmap.w.html
diff --git a/tests/wpt/web-platform-tests/html/canvas/offscreen/the-offscreen-canvas/offscreencanvas.transfercontrol.to.offscreen.html b/tests/wpt/web-platform-tests/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.transfercontrol.to.offscreen.html
similarity index 100%
rename from tests/wpt/web-platform-tests/html/canvas/offscreen/the-offscreen-canvas/offscreencanvas.transfercontrol.to.offscreen.html
rename to tests/wpt/web-platform-tests/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.transfercontrol.to.offscreen.html
diff --git a/tests/wpt/web-platform-tests/html/canvas/offscreen/the-offscreen-canvas/offscreencanvas.transfercontrol.to.offscreen.w.html b/tests/wpt/web-platform-tests/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.transfercontrol.to.offscreen.w.html
similarity index 100%
rename from tests/wpt/web-platform-tests/html/canvas/offscreen/the-offscreen-canvas/offscreencanvas.transfercontrol.to.offscreen.w.html
rename to tests/wpt/web-platform-tests/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.transfercontrol.to.offscreen.w.html
diff --git a/tests/wpt/web-platform-tests/html/canvas/offscreen/the-offscreen-canvas/offscreencanvas.transferrable.html b/tests/wpt/web-platform-tests/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.transferrable.html
similarity index 100%
rename from tests/wpt/web-platform-tests/html/canvas/offscreen/the-offscreen-canvas/offscreencanvas.transferrable.html
rename to tests/wpt/web-platform-tests/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.transferrable.html
diff --git a/tests/wpt/web-platform-tests/html/canvas/offscreen/the-offscreen-canvas/offscreencanvas.transferrable.w.html b/tests/wpt/web-platform-tests/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.transferrable.w.html
similarity index 100%
rename from tests/wpt/web-platform-tests/html/canvas/offscreen/the-offscreen-canvas/offscreencanvas.transferrable.w.html
rename to tests/wpt/web-platform-tests/html/canvas/offscreen/manual/the-offscreen-canvas/offscreencanvas.transferrable.w.html
diff --git a/tests/wpt/web-platform-tests/html/canvas/offscreen/transformations/2d.transformation.getTransform.html b/tests/wpt/web-platform-tests/html/canvas/offscreen/manual/transformations/2d.transformation.getTransform.html
similarity index 100%
rename from tests/wpt/web-platform-tests/html/canvas/offscreen/transformations/2d.transformation.getTransform.html
rename to tests/wpt/web-platform-tests/html/canvas/offscreen/manual/transformations/2d.transformation.getTransform.html
diff --git a/tests/wpt/web-platform-tests/html/canvas/element/2x2.png b/tests/wpt/web-platform-tests/html/canvas/resources/2x2.png
similarity index 100%
rename from tests/wpt/web-platform-tests/html/canvas/element/2x2.png
rename to tests/wpt/web-platform-tests/html/canvas/resources/2x2.png
diff --git a/tests/wpt/web-platform-tests/html/canvas/tools/gentestutils.py b/tests/wpt/web-platform-tests/html/canvas/tools/gentestutils.py
index 32147318d0a..d677f4d33bc 100644
--- a/tests/wpt/web-platform-tests/html/canvas/tools/gentestutils.py
+++ b/tests/wpt/web-platform-tests/html/canvas/tools/gentestutils.py
@@ -135,9 +135,12 @@ def genTestUtils(TESTOUTPUTDIR, IMAGEOUTPUTDIR, TEMPLATEFILE, NAME2DIRFILE, ISOF
             spec_assertions.append(s)
 
     tests = []
-    TESTSFILES = ['tests.yaml', 'tests2d.yaml', 'tests2dtext.yaml']
+    test_yaml_directory = "yaml/element"
     if ISOFFSCREENCANVAS:
-        TESTSFILES = ['tests2d-offscreen.yaml']
+        test_yaml_directory = "yaml/offscreen"
+    TESTSFILES = [
+        os.path.join(test_yaml_directory, f) for f in os.listdir(test_yaml_directory)
+        if f.endswith(".yaml")]
     for t in sum([ yaml.load(open(f, "r").read()) for f in TESTSFILES], []):
         if 'DISABLED' in t:
             continue
@@ -308,9 +311,9 @@ def genTestUtils(TESTOUTPUTDIR, IMAGEOUTPUTDIR, TEMPLATEFILE, NAME2DIRFILE, ISOF
             expected = test['expected']
             expected_img = None
             if expected == 'green':
-                expected_img = "/images/" + make_flat_image('green-100x50.png', 100, 50, 0,1,0,1)
+                expected_img = "/images/green-100x50.png"
             elif expected == 'clear':
-                expected_img = "/images/" + make_flat_image('clear-100x50.png', 100, 50, 0,0,0,0)
+                expected_img = "/images/clear-100x50.png"
             else:
                 if ';' in expected:
                     print("Found semicolon in %s" % name)
diff --git a/tests/wpt/web-platform-tests/html/canvas/tools/tests.yaml b/tests/wpt/web-platform-tests/html/canvas/tools/tests.yaml
deleted file mode 100644
index b6b52e7abac..00000000000
--- a/tests/wpt/web-platform-tests/html/canvas/tools/tests.yaml
+++ /dev/null
@@ -1,1078 +0,0 @@
-# Copyright (c) 2010 Philip Taylor
-# Released under the BSD license and W3C Test Suite License: see LICENSE.txt
-
-- name: fallback.basic
-  desc: Fallback content is inserted into the DOM
-  testing:
-    - fallback
-  code: |
-    @assert canvas.childNodes.length === 1;
-
-- name: fallback.multiple
-  desc: Fallback content with multiple elements
-  testing:
-    - fallback
-  fallback: '<p class="fallback">FAIL</p><p class="fallback">FAIL</p>'
-  code: |
-    @assert canvas.childNodes.length === 2;
-
-- name: fallback.nested
-  desc: Fallback content containing another canvas (mostly testing parsers)
-  testing:
-    - fallback
-  fallback: '<canvas><p class="fallback">FAIL (fallback content)</p></canvas><p class="fallback">FAIL (fallback content)</p>'
-  code: |
-    @assert canvas.childNodes.length === 2;
-
-- name: type.name
-  desc: HTMLCanvasElement type and toString
-  testing:
-    - canvas.type
-  code: |
-    @assert Object.prototype.toString.call(canvas) === '[object HTMLCanvasElement]';
-
-- name: type.exists
-  desc: HTMLCanvasElement is a property of window
-  notes: &bindings Defined in "Web IDL" (draft)
-  testing:
-    - canvas.type
-  code: |
-    @assert window.HTMLCanvasElement;
-
-- name: type.delete
-  desc: window.HTMLCanvasElement interface object is [[Configurable]]
-  notes: *bindings
-  testing:
-    - canvas.type
-  code: |
-    @assert delete window.HTMLCanvasElement === true;
-    @assert window.HTMLCanvasElement === undefined;
-
-- name: type.prototype
-  desc: window.HTMLCanvasElement has prototype, which is { ReadOnly, DontDelete }. prototype has getContext, which is not
-  notes: *bindings
-  testing:
-    - canvas.type
-  code: |
-    @assert window.HTMLCanvasElement.prototype;
-    @assert window.HTMLCanvasElement.prototype.getContext;
-    window.HTMLCanvasElement.prototype = null;
-    @assert window.HTMLCanvasElement.prototype;
-    delete window.HTMLCanvasElement.prototype;
-    @assert window.HTMLCanvasElement.prototype;
-    window.HTMLCanvasElement.prototype.getContext = 1;
-    @assert window.HTMLCanvasElement.prototype.getContext === 1;
-    delete window.HTMLCanvasElement.prototype.getContext;
-    @assert window.HTMLCanvasElement.prototype.getContext === undefined;
-
-- name: type.replace
-  desc: HTMLCanvasElement methods can be replaced, and the replacement methods used by canvases
-  notes: *bindings
-  testing:
-    - canvas.type
-  code: |
-    window.HTMLCanvasElement.prototype.getContext = function (name) { return 0; };
-    @assert canvas.getContext('2d') === 0;
-
-- name: type.extend
-  desc: HTMLCanvasElement methods can be added, and the new methods used by canvases
-  notes: *bindings
-  testing:
-    - canvas.type
-  code: |
-    window.HTMLCanvasElement.prototype.getZero = function () { return 0; };
-    @assert canvas.getZero() === 0;
-
-
-- name: size.attributes.idl.set.zero
-  desc: Setting width/height IDL attributes to 0
-  testing:
-    - size.width
-    - size.height
-  code: |
-    canvas.width = 0;
-    canvas.height = 0;
-    @assert canvas.width === 0;
-    @assert canvas.height === 0;
-#  expected: size 0 0 # can't generate zero-sized PNG
-
-- name: size.attributes.idl
-  desc: Getting/setting width/height IDL attributes
-  testing:
-    - size.width
-    - size.height
-  webidl:
-    - es-unsigned-long
-  code: |
-    canvas.width = "100";
-    canvas.height = "100";
-    @assert canvas.width === 100;
-    @assert canvas.height === 100;
-
-    canvas.width = "+1.5e2";
-    canvas.height = "0x96";
-    @assert canvas.width === 150;
-    @assert canvas.height === 150;
-
-    canvas.width = 200 - Math.pow(2, 32);
-    canvas.height = 200 - Math.pow(2, 32);
-    @assert canvas.width === 200;
-    @assert canvas.height === 200;
-
-    canvas.width = 301.999;
-    canvas.height = 301.001;
-    @assert canvas.width === 301;
-    @assert canvas.height === 301;
-
-    canvas.width = "400x";
-    canvas.height = "foo";
-    @assert canvas.width === 0;
-    @assert canvas.height === 0;
-
-- name: size.attributes.default
-  desc: Default width/height when attributes are missing
-  testing:
-    - size.default
-    - size.missing
-  canvas: ""
-  code: |
-    @assert canvas.width === 300;
-    @assert canvas.height === 150;
-    @assert !canvas.hasAttribute('width');
-    @assert !canvas.hasAttribute('height');
-  expected: size 300 150
-
-- name: size.attributes.reflect.setidl
-  desc: Setting IDL attributes updates IDL and content attributes
-  testing:
-    - size.reflect
-  code: |
-    canvas.width = 120;
-    canvas.height = 60;
-    @assert canvas.getAttribute('width') === '120';
-    @assert canvas.getAttribute('height') === '60';
-    @assert canvas.width === 120;
-    @assert canvas.height === 60;
-  expected: size 120 60
-
-- name: size.attributes.reflect.setidlzero
-  desc: Setting IDL attributes to 0 updates IDL and content attributes
-  testing:
-    - size.reflect
-  code: |
-    canvas.width = 0;
-    canvas.height = 0;
-    @assert canvas.getAttribute('width') === '0';
-    @assert canvas.getAttribute('height') === '0';
-    @assert canvas.width === 0;
-    @assert canvas.height === 0;
-#  expected: size 0 0 # can't generate zero-sized PNG
-
-- name: size.attributes.reflect.setcontent
-  desc: Setting content attributes updates IDL and content attributes
-  testing:
-    - size.reflect
-  code: |
-    canvas.setAttribute('width', '120');
-    canvas.setAttribute('height', '60');
-    @assert canvas.getAttribute('width') === '120';
-    @assert canvas.getAttribute('height') === '60';
-    @assert canvas.width === 120;
-    @assert canvas.height === 60;
-  expected: size 120 60
-
-- name: size.attributes.removed
-  desc: Removing content attributes reverts to default size
-  testing:
-    - size.missing
-  canvas: width="120" height="60"
-  code: |
-    @assert canvas.width === 120;
-    canvas.removeAttribute('width');
-    @assert canvas.width === 300;
-  expected: size 300 60
-
-- meta: |
-    cases = [
-        ("zero", "0", 0),
-        ("empty", "", None),
-        ("onlyspace", "  ", None),
-        ("space", "  100", 100),
-        ("whitespace", "\r\n\t\f100", 100),
-        ("plus", "+100", 100),
-        ("minus", "-100", None),
-        ("octal", "0100", 100),
-        ("hex", "0x100", 0),
-        ("exp", "100e1", 100),
-        ("decimal", "100.999", 100),
-        ("percent", "100%", 100),
-        ("em", "100em", 100),
-        ("junk", "#!?", None),
-        ("trailingjunk", "100#!?", 100),
-    ]
-    def gen(name, string, exp, code):
-        testing = ["size.nonnegativeinteger"]
-        if exp is None:
-            testing.append("size.error")
-            code += "@assert canvas.width === 300;\n@assert canvas.height === 150;\n"
-            expected = "size 300 150"
-        else:
-            code += "@assert canvas.width === %s;\n@assert canvas.height === %s;\n" % (exp, exp)
-            expected = "size %s %s" % (exp, exp)
-
-            # With "100%", Opera gets canvas.width = 100 but renders at 100% of the frame width,
-            # so check the CSS display width
-            code += '@assert window.getComputedStyle(canvas, null).getPropertyValue("width") === "%spx";\n' % (exp, )
-
-        code += "@assert canvas.getAttribute('width') === %r;\n" % string
-        code += "@assert canvas.getAttribute('height') === %r;\n" % string
-
-        if exp == 0:
-            expected = None # can't generate zero-sized PNGs for the expected image
-
-        return code, testing, expected
-
-    for name, string, exp in cases:
-        code = ""
-        code, testing, expected = gen(name, string, exp, code)
-        # We need to replace \r with &#xD; because \r\n gets converted to \n in the HTML parser.
-        htmlString = string.replace('\r', '&#xD;')
-        tests.append( {
-            "name": "size.attributes.parse.%s" % name,
-            "desc": "Parsing of non-negative integers",
-            "testing": testing,
-            "canvas": 'width="%s" height="%s"' % (htmlString, htmlString),
-            "code": code,
-            "expected": expected
-        } )
-
-    for name, string, exp in cases:
-        code = "canvas.setAttribute('width', %r);\ncanvas.setAttribute('height', %r);\n" % (string, string)
-        code, testing, expected = gen(name, string, exp, code)
-        tests.append( {
-            "name": "size.attributes.setAttribute.%s" % name,
-            "desc": "Parsing of non-negative integers in setAttribute",
-            "testing": testing,
-            "canvas": 'width="50" height="50"',
-            "code": code,
-            "expected": expected
-        } )
-
-- name: size.attributes.style
-  desc: Canvas size is independent of CSS resizing
-  testing:
-    - size.css
-  canvas: 'width="50" height="30" style="width: 100px; height: 50px"'
-  code: |
-    @assert canvas.width === 50;
-    @assert canvas.height === 30;
-  expected: size 100 50
-
-- name: size.large
-  DISABLED: |
-    "User agents may impose implementation-specific limits on otherwise unconstrained
-    inputs, e.g. to prevent denial of service attacks, to guard against running out of memory,
-    or to work around platform-specific limitations."
-  testing:
-    - size.width
-    - size.height
-  notes: Not sure how reasonable this is, but the spec doesn't say there's an upper limit on the size.
-  code: |
-    var n = 2147483647; // 2^31 - 1, which should be supported by any sensible definition of "long"
-    canvas.width = n;
-    canvas.height = n;
-    @assert canvas.width === n;
-    @assert canvas.height === n;
-#  expected: size 2147483647 2147483647 # not a good idea to generate the expected image in this case...
-
-- name: initial.colour
-  desc: Initial state is transparent black
-  testing:
-    - initial.colour
-  notes: |
-    Output should be transparent black (not transparent anything-else), but manual
-    verification can only confirm that it's transparent - it's not possible to make
-    the actual blackness visible.
-  code: |
-    @assert pixel 20,20 == 0,0,0,0;
-  expected: size 100 50 # transparent
-
-- name: initial.reset.different
-  desc: Changing size resets canvas to transparent black
-  testing:
-    - initial.reset
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 50, 50);
-    @assert pixel 20,20 == 255,0,0,255;
-    canvas.width = 50;
-    @assert pixel 20,20 == 0,0,0,0;
-  expected: size 50 50 # transparent
-
-- name: initial.reset.same
-  desc: Setting size (not changing the value) resets canvas to transparent black
-  testing:
-    - initial.reset
-  code: |
-    canvas.width = 100;
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 50, 50);
-    @assert pixel 20,20 == 255,0,0,255;
-    canvas.width = 100;
-    @assert pixel 20,20 == 0,0,0,0;
-  expected: size 100 50 # transparent
-
-- name: initial.reset.path
-  desc: Resetting the canvas state resets the current path
-  testing:
-    - initial.reset
-  code: |
-    canvas.width = 100;
-    ctx.rect(0, 0, 100, 50);
-    canvas.width = 100;
-    ctx.fillStyle = '#f00';
-    ctx.fill();
-    @assert pixel 20,20 == 0,0,0,0;
-  expected: size 100 50 # transparent
-
-- name: initial.reset.clip
-  desc: Resetting the canvas state resets the current clip region
-  testing:
-    - initial.reset
-  code: |
-    canvas.width = 100;
-    ctx.rect(0, 0, 1, 1);
-    ctx.clip();
-    canvas.width = 100;
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 20,20 == 0,255,0,255;
-  expected: green
-
-- name: initial.reset.transform
-  desc: Resetting the canvas state resets the current transformation matrix
-  testing:
-    - initial.reset
-  code: |
-    canvas.width = 100;
-    ctx.scale(0.1, 0.1);
-    canvas.width = 100;
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 20,20 == 0,255,0,255;
-  expected: green
-
-- name: initial.reset.gradient
-  desc: Resetting the canvas state does not invalidate any existing gradients
-  testing:
-    - initial.reset
-  code: |
-    canvas.width = 50;
-    var g = ctx.createLinearGradient(0, 0, 100, 0);
-    g.addColorStop(0, '#0f0');
-    g.addColorStop(1, '#0f0');
-    canvas.width = 100;
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: initial.reset.pattern
-  desc: Resetting the canvas state does not invalidate any existing patterns
-  testing:
-    - initial.reset
-  code: |
-    canvas.width = 30;
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 30, 50);
-    var p = ctx.createPattern(canvas, 'repeat-x');
-    canvas.width = 100;
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = p;
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-# See tests2d.yaml for initial.reset.2dstate
-
-
-- name: context.emptystring
-  desc: getContext with empty string returns null
-  testing:
-    - context.unrecognised
-  code: |
-    @assert canvas.getContext("") === null;
-
-- name: context.unrecognised.badname
-  desc: getContext with unrecognised context name returns null
-  testing:
-    - context.unrecognised
-  code: |
-    @assert canvas.getContext('This is not an implemented context in any real browser') === null;
-
-- name: context.unrecognised.badsuffix
-  desc: Context name "2d" plus a suffix is unrecognised
-  testing:
-    - context.unrecognised
-  code: |
-    @assert canvas.getContext("2d#") === null;
-
-- name: context.unrecognised.nullsuffix
-  desc: Context name "2d" plus a "\0" suffix is unrecognised
-  testing:
-    - context.unrecognised
-  code: |
-    @assert canvas.getContext("2d\0") === null;
-
-- name: context.unrecognised.unicode
-  desc: Context name which kind of looks like "2d" is unrecognised
-  testing:
-    - context.unrecognised
-  code: |
-    @assert canvas.getContext("2\uFF44") === null; // Fullwidth Latin Small Letter D
-
-- name: context.casesensitive
-  desc: Context name "2D" is unrecognised; matching is case sensitive
-  testing:
-    - context.unrecognised
-  code: |
-    @assert canvas.getContext('2D') === null;
-
-- name: context.arguments.missing
-  notes: *bindings
-  testing:
-    - canvas.getContext
-  code: |
-    @assert throws TypeError canvas.getContext(); @moz-todo
-
-
-
-- name: toDataURL.default
-  desc: toDataURL with no arguments returns a PNG
-  testing:
-    - toDataURL.noarguments
-  code: |
-    var data = canvas.toDataURL();
-    @assert data =~ /^data:image\/png[;,]/;
-
-- name: toDataURL.png
-  desc: toDataURL with image/png returns a PNG
-  testing:
-    - toDataURL.png
-    - toDataURL.witharguments
-  code: |
-    var data = canvas.toDataURL('image/png');
-    @assert data =~ /^data:image\/png[;,]/;
-
-- name: toDataURL.jpg
-  desc: toDataURL with image/jpg is invalid type hence returns a PNG
-  testing:
-    - toDataURL.jpg
-    - toDataURL.witharguments
-  code: |
-    var data = canvas.toDataURL('image/jpg');
-    @assert data =~ /^data:image\/png[;,]/;
-
-
-- name: toDataURL.bogustype
-  desc: toDataURL with a syntactically invalid type returns a PNG
-  testing:
-    - toDataURL.unrecognised
-  code: |
-    var data = canvas.toDataURL('bogus');
-    @assert data =~ /^data:image\/png[;,]/;
-
-- name: toDataURL.unrecognised
-  desc: toDataURL with an unhandled type returns a PNG
-  testing:
-    - toDataURL.unrecognised
-  code: |
-    var data = canvas.toDataURL('image/example');
-    @assert data =~ /^data:image\/png[;,]/;
-
-- name: toDataURL.lowercase.ascii
-  desc: toDataURL type is case-insensitive
-  testing:
-    - toDataURL.lowercase
-  code: |
-    var data = canvas.toDataURL('ImAgE/PnG');
-    @assert data =~ /^data:image\/png[;,]/;
-
-    // If JPEG is supported at all, it must be supported case-insensitively
-    data = canvas.toDataURL('image/jpeg');
-    if (data.match(/^data:image\/jpeg[;,]/)) {
-        data = canvas.toDataURL('ImAgE/JpEg');
-        @assert data =~ /^data:image\/jpeg[;,]/;
-    }
-
-- name: toDataURL.lowercase.unicode
-  desc: toDataURL type is ASCII-case-insensitive
-  testing:
-    - toDataURL.lowercase
-  code: |
-    // Use LATIN CAPITAL LETTER I WITH DOT ABOVE (Unicode lowercase is "i")
-    var data = canvas.toDataURL('\u0130mage/png');
-    @assert data =~ /^data:image\/png[;,]/;
-
-    var data = canvas.toDataURL('\u0130mage/jpeg');
-    @assert data =~ /^data:image\/png[;,]/;
-
-- name: toDataURL.arguments.1
-  desc: toDataURL ignores extra arguments
-  testing:
-    - toDataURL.arguments
-  code: |
-    var data = canvas.toDataURL('image/png', 'another argument that should not raise an exception');
-    @assert data =~ /^data:image\/png[;,]/;
-
-- name: toDataURL.arguments.2
-  desc: toDataURL ignores extra arguments
-  testing:
-    - toDataURL.arguments
-  code: |
-    var data = canvas.toDataURL('image/png', 'another argument that should not raise an exception', 'and another');
-    @assert data =~ /^data:image\/png[;,]/;
-
-- name: toDataURL.arguments.3
-  desc: toDataURL ignores extra arguments
-  testing:
-    - toDataURL.arguments
-  code: |
-    // More arguments that should not raise exceptions
-    var data = canvas.toDataURL('image/png', null, null, null);
-    @assert data =~ /^data:image\/png[;,]/;
-
-- name: toDataURL.nocontext
-  desc: toDataURL works before any context has been got
-  testing:
-    - toDataURL.noarguments
-  code: |
-    var no_context_data = canvas.toDataURL();
-    var ctx = canvas.getContext('2d');
-    ctx.rect(0, 0, 100, 50);
-    ctx.fillStyle = "rgba(0, 0, 0, 0)";
-    ctx.fill();
-    var data = canvas.toDataURL();
-    assert_equals(no_context_data, data);
-
-- name: toDataURL.zerosize
-  desc: toDataURL on zero-size canvas returns 'data:,'
-  testing:
-    - toDataURL.zerosize
-  canvas: width="0" height="0"
-  code: |
-    var data = canvas.toDataURL();
-    @assert data === 'data:,';
-
-- name: toDataURL.zerowidth
-  desc: toDataURL on zero-size canvas returns 'data:,'
-  testing:
-    - toDataURL.zerosize
-  canvas: width="0"
-  code: |
-    var data = canvas.toDataURL();
-    @assert data === 'data:,';
-
-- name: toDataURL.zeroheight
-  desc: toDataURL on zero-size canvas returns 'data:,'
-  testing:
-    - toDataURL.zerosize
-  canvas: height="0"
-  code: |
-    var data = canvas.toDataURL();
-    @assert data === 'data:,';
-
-- name: toDataURL.large1
-  DISABLED: just testing implementation limits, and tends to crash
-  canvas: width="30000" height="1"
-  code: |
-    var data = canvas.toDataURL();
-    @assert data =~ /^data:image\/png[;,]/;
-
-- name: toDataURL.large2
-  DISABLED: just testing implementation limits, and tends to crash
-  canvas: width="32767" height="1"
-  code: |
-    var data = canvas.toDataURL();
-    @assert data =~ /^data:image\/png[;,]/;
-
-- name: toDataURL.large3
-  DISABLED: just testing implementation limits, and tends to crash
-  canvas: width="32768" height="1"
-  code: |
-    var data = canvas.toDataURL();
-    @assert data =~ /^data:image\/png[;,]/;
-
-- name: toDataURL.png.primarycolours
-  desc: toDataURL with PNG handles simple colours correctly
-  testing:
-    - toDataURL.png
-  code: |
-    ctx.fillStyle = '#ff0';
-    ctx.fillRect(0, 0, 25, 40);
-    ctx.fillStyle = '#0ff';
-    ctx.fillRect(25, 0, 50, 40);
-    ctx.fillStyle = '#00f';
-    ctx.fillRect(75, 0, 25, 40);
-    ctx.fillStyle = '#fff';
-    ctx.fillRect(0, 40, 100, 10);
-    var data = canvas.toDataURL();
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    var img = new Image();
-    deferTest();
-    img.onload = t.step_func_done(function ()
-    {
-        ctx.drawImage(img, 0, 0);
-        @assert pixel 12,20 == 255,255,0,255;
-        @assert pixel 50,20 == 0,255,255,255;
-        @assert pixel 87,20 == 0,0,255,255;
-        @assert pixel 50,45 == 255,255,255,255;
-    });
-    img.src = data;
-  expected: |
-    size 100 50
-    cr.set_source_rgb(1, 1, 0)
-    cr.rectangle(0, 0, 25, 40)
-    cr.fill()
-    cr.set_source_rgb(0, 1, 1)
-    cr.rectangle(25, 0, 50, 40)
-    cr.fill()
-    cr.set_source_rgb(0, 0, 1)
-    cr.rectangle(75, 0, 25, 40)
-    cr.fill()
-    cr.set_source_rgb(1, 1, 1)
-    cr.rectangle(0, 40, 100, 10)
-    cr.fill()
-
-- name: toDataURL.png.complexcolours
-  desc: toDataURL with PNG handles non-primary and non-solid colours correctly
-  testing:
-    - toDataURL.png
-  code: |
-    // (These values are chosen to survive relatively alright through being premultiplied)
-    ctx.fillStyle = 'rgba(1, 3, 254, 1)';
-    ctx.fillRect(0, 0, 25, 25);
-    ctx.fillStyle = 'rgba(8, 252, 248, 0.75)';
-    ctx.fillRect(25, 0, 25, 25);
-    ctx.fillStyle = 'rgba(6, 10, 250, 0.502)';
-    ctx.fillRect(50, 0, 25, 25);
-    ctx.fillStyle = 'rgba(12, 16, 244, 0.25)';
-    ctx.fillRect(75, 0, 25, 25);
-    var img = new Image();
-    deferTest();
-    img.onload = t.step_func_done(function ()
-    {
-        ctx.drawImage(img, 0, 25);
-        // (The alpha values do not really survive float->int conversion, so just
-        // do approximate comparisons)
-        @assert pixel 12,40 == 1,3,254,255;
-        @assert pixel 37,40 ==~ 8,252,248,191 +/- 2;
-        @assert pixel 62,40 ==~ 6,10,250,127 +/- 4;
-        @assert pixel 87,40 ==~ 12,16,244,63 +/- 8;
-    });
-    img.src = canvas.toDataURL();
-  expected: |
-    size 100 50
-    cr.set_source_rgba(1/255., 3/255., 254/255., 1)
-    cr.rectangle(0, 0, 25, 50)
-    cr.fill()
-    cr.set_source_rgba(8/255., 252/255., 248/255., 191/255.)
-    cr.rectangle(25, 0, 25, 50)
-    cr.fill()
-    cr.set_source_rgba(6/255., 10/255., 250/255., 127/255.)
-    cr.rectangle(50, 0, 25, 50)
-    cr.fill()
-    cr.set_source_rgba(12/255., 16/255., 244/255., 63/255.)
-    cr.rectangle(75, 0, 25, 50)
-    cr.fill()
-
-- name: toDataURL.jpeg.primarycolours
-  desc: toDataURL with JPEG handles simple colours correctly
-  testing:
-    - toDataURL.jpeg
-  code: |
-    ctx.fillStyle = '#ff0';
-    ctx.fillRect(0, 0, 25, 40);
-    ctx.fillStyle = '#0ff';
-    ctx.fillRect(25, 0, 50, 40);
-    ctx.fillStyle = '#00f';
-    ctx.fillRect(75, 0, 25, 40);
-    ctx.fillStyle = '#fff';
-    ctx.fillRect(0, 40, 100, 10);
-    var data = canvas.toDataURL('image/jpeg'); // it is okay if this returns a PNG instead
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    var img = new Image();
-    deferTest();
-    img.onload = t.step_func_done(function ()
-    {
-        ctx.drawImage(img, 0, 0);
-        @assert pixel 12,20 ==~ 255,255,0,255 +/- 8;
-        @assert pixel 50,20 ==~ 0,255,255,255 +/- 8;
-        @assert pixel 87,20 ==~ 0,0,255,255 +/- 8;
-        @assert pixel 50,45 ==~ 255,255,255,255 +/- 8;
-    });
-    img.src = data;
-  expected: |
-    size 100 50
-    cr.set_source_rgb(1, 1, 0)
-    cr.rectangle(0, 0, 25, 40)
-    cr.fill()
-    cr.set_source_rgb(0, 1, 1)
-    cr.rectangle(25, 0, 50, 40)
-    cr.fill()
-    cr.set_source_rgb(0, 0, 1)
-    cr.rectangle(75, 0, 25, 40)
-    cr.fill()
-    cr.set_source_rgb(1, 1, 1)
-    cr.rectangle(0, 40, 100, 10)
-    cr.fill()
-
-- name: toDataURL.jpeg.alpha
-  desc: toDataURL with JPEG composites onto black
-  testing:
-    - toDataURL.jpeg
-    - toDataURL.noalpha
-  code: |
-    ctx.fillStyle = 'rgba(128, 255, 128, 0.5)';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.globalCompositeOperation = 'destination-over'; // should be ignored by toDataURL
-    var data = canvas.toDataURL('image/jpeg');
-    ctx.globalCompositeOperation = 'source-over';
-    if (!data.match(/^data:image\/jpeg[;,]/)) {
-      @assert true;
-    } else {
-      ctx.fillStyle = '#f00';
-      ctx.fillRect(0, 0, 100, 50);
-      var img = new Image();
-      deferTest();
-      img.onload = t.step_func_done(function ()
-      {
-          ctx.drawImage(img, 0, 0);
-          @assert pixel 50,25 ==~ 63,127,63,255 +/- 8;
-      });
-      img.src = data;
-    }
-  expected: |
-    size 100 50
-    cr.set_source_rgb(0.25, 0.5, 0.25)
-    cr.rectangle(0, 0, 100, 50)
-    cr.fill()
-
-- name: toDataURL.jpeg.quality.basic
-  desc: toDataURL with JPEG uses the quality parameter
-  testing:
-    - toDataURL.jpeg.quality
-  mozilla: { throws }
-  code: |
-    ctx.fillStyle = '#00f';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#0ff';
-    ctx.fillRect(0, 3, 100, 1);
-    // Check for JPEG support first
-    var data = canvas.toDataURL('image/jpeg');
-    if (!data.match(/^data:image\/jpeg[;,]/)) {
-      @assert true;
-    } else {
-      var data_hi = canvas.toDataURL('image/jpeg', 0.99);
-      var data_lo = canvas.toDataURL('image/jpeg', 0.01);
-      ctx.fillStyle = '#f00';
-      ctx.fillRect(0, 0, 100, 50);
-      deferTest();
-      var img_hi = new Image();
-      img_hi.onload = function ()
-      {
-          var img_lo = new Image();
-          img_lo.onload = t.step_func_done(function ()
-          {
-              ctx.drawImage(img_hi, 0, 0, 50, 50, 0, 0, 50, 50);
-              ctx.drawImage(img_lo, 0, 0, 50, 50, 50, 0, 50, 50);
-              @assert data_hi.length > data_lo.length;
-              @assert pixel 25,25 ==~ 0,0,255,255 +/- 8;
-              @assert pixel 75,25 ==~ 0,0,255,255 +/- 32;
-          });
-          img_lo.src = data_lo;
-      };
-      img_hi.src = data_hi;
-    }
-  expected: |
-    size 100 50
-    cr.set_source_rgb(0, 0, 1)
-    cr.rectangle(0, 0, 100, 50)
-    cr.fill()
-    cr.set_source_rgb(0, 1, 1)
-    cr.rectangle(0, 3, 100, 1)
-    cr.fill()
-
-- name: toDataURL.jpeg.quality.notnumber
-  desc: toDataURL with JPEG handles non-numeric quality parameters
-  testing:
-    - toDataURL.jpeg.nan
-  code: |
-    ctx.fillStyle = '#00f';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#0ff';
-    ctx.fillRect(0, 3, 100, 1);
-    // Check for JPEG support first
-    var data = canvas.toDataURL('image/jpeg');
-    if (!data.match(/^data:image\/jpeg[;,]/)) {
-      @assert true;
-    } else {
-        @assert canvas.toDataURL('image/jpeg', 'bogus') === data;
-        @assert canvas.toDataURL('image/jpeg', {}) === data;
-        @assert canvas.toDataURL('image/jpeg', null) === data;
-        @assert canvas.toDataURL('image/jpeg', undefined) === data;
-        @assert canvas.toDataURL('image/jpeg', true) === data;
-        @assert canvas.toDataURL('image/jpeg', '0.01') === data;
-    }
-
-- name: toDataURL.jpeg.quality.outsiderange
-  desc: toDataURL with JPEG handles out-of-range quality parameters
-  testing:
-    - toDataURL.jpeg.range
-  code: |
-    ctx.fillStyle = '#00f';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#0ff';
-    ctx.fillRect(0, 3, 100, 1);
-    // Check for JPEG support first
-    var data = canvas.toDataURL('image/jpeg');
-    if (!data.match(/^data:image\/jpeg[;,]/)) {
-      @assert true;
-    } else {
-        @assert canvas.toDataURL('image/jpeg', 10) === data;
-        @assert canvas.toDataURL('image/jpeg', -10) === data;
-        @assert canvas.toDataURL('image/jpeg', 1.01) === data;
-        @assert canvas.toDataURL('image/jpeg', -0.01) === data;
-
-        @assert canvas.toDataURL('image/jpeg', 1).length >= canvas.toDataURL('image/jpeg', 0.9).length;
-        @assert canvas.toDataURL('image/jpeg', 0).length <= canvas.toDataURL('image/jpeg', 0.1).length;
-    }
-
-
-# TODO: work out what security exception should be thrown
-# TODO: test same-origin vs same-host
-
-- name: security.drawImage.image
-  desc: drawImage of different-origin image makes the canvas origin-unclean
-  mozilla: { disabled } # relies on external resources
-  testing:
-    - security.drawImage.image
-    - security.toDataURL
-    - security.getImageData
-  scripts:
-    - /common/get-host-info.sub.js
-  script-variants:
-    cross: data:text/javascript,addCrossOriginYellowImage()
-    redirect: data:text/javascript,addCrossOriginRedirectYellowImage()
-  code: |
-    ctx.drawImage(document.getElementById('yellow.png'), 0, 0);
-    @assert throws SECURITY_ERR canvas.toDataURL();
-    @assert throws SECURITY_ERR ctx.getImageData(0, 0, 1, 1);
-
-- name: security.drawImage.canvas
-  desc: drawImage of unclean canvas makes the canvas origin-unclean
-  mozilla: { disabled } # relies on external resources
-  testing:
-    - security.drawImage.canvas
-  scripts:
-    - /common/get-host-info.sub.js
-  script-variants:
-    cross: data:text/javascript,addCrossOriginYellowImage()
-    redirect: data:text/javascript,addCrossOriginRedirectYellowImage()
-  code: |
-    var canvas2 = document.createElement('canvas');
-    canvas2.width = 100;
-    canvas2.height = 50;
-    var ctx2 = canvas2.getContext('2d');
-    ctx2.drawImage(document.getElementById('yellow.png'), 0, 0);
-    ctx.drawImage(canvas2, 0, 0);
-    @assert throws SECURITY_ERR canvas.toDataURL();
-    @assert throws SECURITY_ERR ctx.getImageData(0, 0, 1, 1);
-
-- name: security.pattern.create
-  desc: Creating an unclean pattern does not make the canvas origin-unclean
-  mozilla: { disabled } # relies on external resources
-  testing:
-    - security.start
-  scripts:
-    - /common/get-host-info.sub.js
-  script-variants:
-    cross: data:text/javascript,addCrossOriginYellowImage()
-    redirect: data:text/javascript,addCrossOriginRedirectYellowImage()
-  code: |
-    var p = ctx.createPattern(document.getElementById('yellow.png'), 'repeat');
-    canvas.toDataURL();
-    ctx.getImageData(0, 0, 1, 1);
-    @assert true; // okay if there was no exception
-
-- name: security.pattern.cross
-  desc: Using an unclean pattern makes the target canvas origin-unclean, not the pattern canvas
-  mozilla: { disabled } # relies on external resources
-  testing:
-    - security.start
-  scripts:
-    - /common/get-host-info.sub.js
-  script-variants:
-    cross: data:text/javascript,addCrossOriginYellowImage()
-    redirect: data:text/javascript,addCrossOriginRedirectYellowImage()
-  code: |
-    var canvas2 = document.createElement('canvas');
-    canvas2.width = 100;
-    canvas2.height = 50;
-    var ctx2 = canvas2.getContext('2d');
-    var p = ctx2.createPattern(document.getElementById('yellow.png'), 'repeat');
-    ctx.fillStyle = p;
-    ctx.fillRect(0, 0, 100, 50);
-    @assert throws SECURITY_ERR canvas.toDataURL();
-    @assert throws SECURITY_ERR ctx.getImageData(0, 0, 1, 1);
-    canvas2.toDataURL();
-    ctx2.getImageData(0, 0, 1, 1);
-
-- name: security.pattern.canvas.timing
-  desc: Pattern safety depends on whether the source was origin-clean, not on whether it still is clean
-  notes: Disagrees with spec on "is" vs "was"
-  mozilla: { disabled } # relies on external resources
-  testing:
-    - security.start
-    - security.fillStyle.canvas
-  scripts:
-    - /common/get-host-info.sub.js
-  script-variants:
-    cross: data:text/javascript,addCrossOriginYellowImage()
-    redirect: data:text/javascript,addCrossOriginRedirectYellowImage()
-  code: |
-    var canvas2 = document.createElement('canvas');
-    canvas2.width = 100;
-    canvas2.height = 50;
-    var ctx2 = canvas2.getContext('2d');
-    ctx2.fillStyle = '#0f0';
-    ctx2.fillRect(0, 0, 100, 50);
-    var p = ctx.createPattern(canvas2, 'repeat');
-    ctx2.drawImage(document.getElementById('yellow.png'), 0, 0); // make canvas2 origin-unclean
-    ctx.fillStyle = p;
-    ctx.fillRect(0, 0, 100, 50);
-    canvas.toDataURL();
-    ctx.getImageData(0, 0, 1, 1);
-    @assert true; // okay if there was no exception
-
-- name: security.pattern.image.fillStyle
-  desc: Setting fillStyle to a pattern of a different-origin image makes the canvas origin-unclean
-  mozilla: { disabled } # relies on external resources
-  testing:
-    - security.fillStyle.image
-  scripts:
-    - /common/get-host-info.sub.js
-  script-variants:
-    cross: data:text/javascript,addCrossOriginYellowImage()
-    redirect: data:text/javascript,addCrossOriginRedirectYellowImage()
-  code: |
-    var p = ctx.createPattern(document.getElementById('yellow.png'), 'repeat');
-    ctx.fillStyle = p;
-    ctx.fillStyle = 'red';
-    @assert throws SECURITY_ERR canvas.toDataURL();
-    @assert throws SECURITY_ERR ctx.getImageData(0, 0, 1, 1);
-
-- name: security.pattern.canvas.fillStyle
-  desc: Setting fillStyle to a pattern of an unclean canvas makes the canvas origin-unclean
-  mozilla: { bug: 354127, disabled } # relies on external resources
-  testing:
-    - security.fillStyle.canvas
-  scripts:
-    - /common/get-host-info.sub.js
-  script-variants:
-    cross: data:text/javascript,addCrossOriginYellowImage()
-    redirect: data:text/javascript,addCrossOriginRedirectYellowImage()
-  code: |
-    var canvas2 = document.createElement('canvas');
-    canvas2.width = 100;
-    canvas2.height = 50;
-    var ctx2 = canvas2.getContext('2d');
-    ctx2.drawImage(document.getElementById('yellow.png'), 0, 0);
-    var p = ctx.createPattern(canvas2, 'repeat');
-    ctx.fillStyle = p;
-    ctx.fillStyle = 'red';
-    @assert throws SECURITY_ERR canvas.toDataURL();
-    @assert throws SECURITY_ERR ctx.getImageData(0, 0, 1, 1);
-
-- name: security.pattern.image.strokeStyle
-  desc: Setting strokeStyle to a pattern of a different-origin image makes the canvas origin-unclean
-  mozilla: { disabled } # relies on external resources
-  testing:
-    - security.strokeStyle.image
-  scripts:
-    - /common/get-host-info.sub.js
-  script-variants:
-    cross: data:text/javascript,addCrossOriginYellowImage()
-    redirect: data:text/javascript,addCrossOriginRedirectYellowImage()
-  code: |
-    var p = ctx.createPattern(document.getElementById('yellow.png'), 'repeat');
-    ctx.strokeStyle = p;
-    ctx.strokeStyle = 'red';
-    @assert throws SECURITY_ERR canvas.toDataURL();
-    @assert throws SECURITY_ERR ctx.getImageData(0, 0, 1, 1);
-
-- name: security.pattern.canvas.strokeStyle
-  desc: Setting strokeStyle to a pattern of an unclean canvas makes the canvas origin-unclean
-  mozilla: { bug: 354127, disabled } # relies on external resources
-  testing:
-    - security.strokeStyle.canvas
-  scripts:
-    - /common/get-host-info.sub.js
-  script-variants:
-    cross: data:text/javascript,addCrossOriginYellowImage()
-    redirect: data:text/javascript,addCrossOriginRedirectYellowImage()
-  code: |
-    var canvas2 = document.createElement('canvas');
-    canvas2.width = 100;
-    canvas2.height = 50;
-    var ctx2 = canvas2.getContext('2d');
-    ctx2.drawImage(document.getElementById('yellow.png'), 0, 0);
-    var p = ctx.createPattern(canvas2, 'repeat');
-    ctx.strokeStyle = p;
-    ctx.strokeStyle = 'red';
-    @assert throws SECURITY_ERR canvas.toDataURL();
-    @assert throws SECURITY_ERR ctx.getImageData(0, 0, 1, 1);
-
-- name: security.dataURI
-  desc: 'data: URIs do not count as different-origin, and do not taint the canvas'
-  mozilla: { disabled, bug: 417836 } # can't do "todo" so just disable it
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    var data = canvas.toDataURL();
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    var img = new Image();
-    deferTest();
-    img.onload = t.step_func_done(function ()
-    {
-        ctx.drawImage(img, 0, 0);
-        canvas.toDataURL(); // should be permitted
-        @assert pixel 50,25 == 0,255,0,255;
-    });
-    img.src = data;
-  expected: green
-
-- name: security.reset
-  desc: Resetting the canvas state resets the origin-clean flag
-  mozilla: { disabled } # relies on external resources
-  testing:
-    - initial.reset
-  scripts:
-    - /common/get-host-info.sub.js
-  script-variants:
-    cross: data:text/javascript,addCrossOriginYellowImage()
-    redirect: data:text/javascript,addCrossOriginRedirectYellowImage()
-  code: |
-    canvas.width = 50;
-    ctx.drawImage(document.getElementById('yellow.png'), 0, 0);
-    @assert throws SECURITY_ERR canvas.toDataURL();
-    canvas.width = 100;
-    canvas.toDataURL();
-    ctx.getImageData(0, 0, 1, 1);
-    @assert true; // okay if there was no exception
diff --git a/tests/wpt/web-platform-tests/html/canvas/tools/tests2d-offscreen.yaml b/tests/wpt/web-platform-tests/html/canvas/tools/tests2d-offscreen.yaml
deleted file mode 100644
index 6e8fb7707f7..00000000000
--- a/tests/wpt/web-platform-tests/html/canvas/tools/tests2d-offscreen.yaml
+++ /dev/null
@@ -1,11072 +0,0 @@
-- meta: |
-    state = [ # some non-default values to test with
-        ('strokeStyle', '"#ff0000"'),
-        ('fillStyle', '"#ff0000"'),
-        ('globalAlpha', 0.5),
-        ('lineWidth', 0.5),
-        ('lineCap', '"round"'),
-        ('lineJoin', '"round"'),
-        ('miterLimit', 0.5),
-        ('shadowOffsetX', 5),
-        ('shadowOffsetY', 5),
-        ('shadowBlur', 5),
-        ('shadowColor', '"#ff0000"'),
-        ('globalCompositeOperation', '"copy"'),
-    ]
-    for key,value in state:
-        tests.append( {
-            'name': '2d.state.saverestore.%s' % key,
-            'desc': 'save()/restore() works for %s' % key,
-            'testing': [ '2d.state.%s' % key ],
-            'code':
-    """// Test that restore() undoes any modifications
-    var old = ctx.%(key)s;
-    ctx.save();
-    ctx.%(key)s = %(value)s;
-    ctx.restore();
-    @assert ctx.%(key)s === old;
-
-    // Also test that save() doesn't modify the values
-    ctx.%(key)s = %(value)s;
-    old = ctx.%(key)s;
-        // we're not interested in failures caused by get(set(x)) != x (e.g.
-        // from rounding), so compare against 'old' instead of against %(value)s
-    ctx.save();
-    @assert ctx.%(key)s === old;
-    ctx.restore();
-    t.done();
-    """ % { 'key':key, 'value':value }
-        } )
-
-    tests.append( {
-        'name': 'initial.reset.2dstate',
-        'desc': 'Resetting the canvas state resets 2D state variables',
-        'testing': [ 'initial.reset' ],
-        'code':
-    """offscreenCanvas.width = 100;
-    var default_val;
-    """ + "".join(
-    """
-    default_val = ctx.%(key)s;
-    ctx.%(key)s = %(value)s;
-    offscreenCanvas.width = 100;
-    @assert ctx.%(key)s === default_val;
-    """ % { 'key':key, 'value':value }
-        for key,value in state) + "\nt.done();",
-    } )
-
-- name: 2d.state.saverestore.transformation
-  desc: save()/restore() affects the current transformation matrix
-  testing:
-    - 2d.state.transformation
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.save();
-    ctx.translate(200, 0);
-    ctx.restore();
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(-200, 0, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.state.saverestore.clip
-  desc: save()/restore() affects the clipping path
-  testing:
-    - 2d.state.clip
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.save();
-    ctx.rect(0, 0, 1, 1);
-    ctx.clip();
-    ctx.restore();
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.state.saverestore.path
-  desc: save()/restore() does not affect the current path
-  testing:
-    - 2d.state.path
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.save();
-    ctx.rect(0, 0, 100, 50);
-    ctx.restore();
-    ctx.fillStyle = '#0f0';
-    ctx.fill();
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.state.saverestore.bitmap
-  desc: save()/restore() does not affect the current bitmap
-  testing:
-    - 2d.state.bitmap
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.save();
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.restore();
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.state.saverestore.stack
-  desc: save()/restore() can be nested as a stack
-  testing:
-    - 2d.state.save
-    - 2d.state.restore
-  code: |
-    ctx.lineWidth = 1;
-    ctx.save();
-    ctx.lineWidth = 2;
-    ctx.save();
-    ctx.lineWidth = 3;
-    @assert ctx.lineWidth === 3;
-    ctx.restore();
-    @assert ctx.lineWidth === 2;
-    ctx.restore();
-    @assert ctx.lineWidth === 1;
-    t.done();
-
-- name: 2d.state.saverestore.stackdepth
-  desc: save()/restore() stack depth is not unreasonably limited
-  testing:
-    - 2d.state.save
-    - 2d.state.restore
-  code: |
-    var limit = 512;
-    for (var i = 1; i < limit; ++i)
-    {
-        ctx.save();
-        ctx.lineWidth = i;
-    }
-    for (var i = limit-1; i > 0; --i)
-    {
-        @assert ctx.lineWidth === i;
-        ctx.restore();
-    }
-    t.done();
-
-- name: 2d.state.saverestore.underflow
-  desc: restore() with an empty stack has no effect
-  testing:
-    - 2d.state.restore.underflow
-  code: |
-    for (var i = 0; i < 16; ++i)
-        ctx.restore();
-    ctx.lineWidth = 0.5;
-    ctx.restore();
-    @assert ctx.lineWidth === 0.5;
-    t.done();
-
-- name: 2d.transformation.order
-  desc: Transformations are applied in the right order
-  testing:
-    - 2d.transformation.order
-  code: |
-    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);
-    @assert pixel 75,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.transformation.scale.basic
-  desc: scale() works
-  testing:
-    - 2d.transformation.scale
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.scale(2, 4);
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 50, 12.5);
-    @assert pixel 90,40 == 0,255,0,255;
-    t.done();
-
-- name: 2d.transformation.scale.zero
-  desc: scale() with a scale factor of zero works
-  testing:
-    - 2d.transformation.scale
-  code: |
-    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();
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.transformation.scale.negative
-  desc: scale() with negative scale factors works
-  testing:
-    - 2d.transformation.scale
-  code: |
-    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();
-    @assert pixel 25,25 == 0,255,0,255;
-    @assert pixel 75,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.transformation.scale.large
-  desc: scale() with large scale factors works
-  notes: Not really that large at all, but it hits the limits in Firefox.
-  testing:
-    - 2d.transformation.scale
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.scale(1e5, 1e5);
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 1, 1);
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.transformation.scale.nonfinite
-  desc: scale() with Infinity/NaN is ignored
-  testing:
-    - 2d.nonfinite
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.translate(100, 10);
-    @nonfinite ctx.scale(<0.1 Infinity -Infinity NaN>, <0.1 Infinity -Infinity NaN>);
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(-100, -10, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.transformation.scale.multiple
-  desc: Multiple scale()s combine
-  testing:
-    - 2d.transformation.scale.multiple
-  code: |
-    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);
-    @assert pixel 90,40 == 0,255,0,255;
-    t.done();
-
-
-- name: 2d.transformation.rotate.zero
-  desc: rotate() by 0 does nothing
-  testing:
-    - 2d.transformation.rotate
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.rotate(0);
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.transformation.rotate.radians
-  desc: rotate() uses radians
-  testing:
-    - 2d.transformation.rotate.radians
-  code: |
-    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);
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.transformation.rotate.direction
-  desc: rotate() is clockwise
-  testing:
-    - 2d.transformation.rotate.direction
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.rotate(Math.PI / 2);
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, -100, 50, 100);
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.transformation.rotate.wrap
-  desc: rotate() wraps large positive values correctly
-  testing:
-    - 2d.transformation.rotate
-  code: |
-    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);
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 98,2 == 0,255,0,255;
-    @assert pixel 98,47 == 0,255,0,255;
-    t.done();
-
-- name: 2d.transformation.rotate.wrapnegative
-  desc: rotate() wraps large negative values correctly
-  testing:
-    - 2d.transformation.rotate
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.rotate(-Math.PI * (1 + 4096));
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(-100, -50, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 98,2 == 0,255,0,255;
-    @assert pixel 98,47 == 0,255,0,255;
-    t.done();
-
-- name: 2d.transformation.rotate.nonfinite
-  desc: rotate() with Infinity/NaN is ignored
-  testing:
-    - 2d.nonfinite
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.translate(100, 10);
-    @nonfinite ctx.rotate(<0.1 Infinity -Infinity NaN>);
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(-100, -10, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.transformation.translate.basic
-  desc: translate() works
-  testing:
-    - 2d.transformation.translate
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.translate(100, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(-100, -50, 100, 50);
-    @assert pixel 90,40 == 0,255,0,255;
-    t.done();
-
-- name: 2d.transformation.translate.nonfinite
-  desc: translate() with Infinity/NaN is ignored
-  testing:
-    - 2d.nonfinite
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.translate(100, 10);
-    @nonfinite ctx.translate(<0.1 Infinity -Infinity NaN>, <0.1 Infinity -Infinity NaN>);
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(-100, -10, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-
-- name: 2d.transformation.transform.identity
-  desc: transform() with the identity matrix does nothing
-  testing:
-    - 2d.transformation.transform
-  code: |
-    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);
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.transformation.transform.skewed
-  desc: transform() with skewy matrix transforms correctly
-  testing:
-    - 2d.transformation.transform
-  code: |
-    // 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();
-    @assert pixel 21,11 == 0,255,0,255;
-    @assert pixel 79,11 == 0,255,0,255;
-    @assert pixel 21,39 == 0,255,0,255;
-    @assert pixel 79,39 == 0,255,0,255;
-    @assert pixel 39,19 == 0,255,0,255;
-    @assert pixel 61,19 == 0,255,0,255;
-    @assert pixel 39,31 == 0,255,0,255;
-    @assert pixel 61,31 == 0,255,0,255;
-    t.done();
-
-- name: 2d.transformation.transform.multiply
-  desc: transform() multiplies the CTM
-  testing:
-    - 2d.transformation.transform.multiply
-  code: |
-    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);
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.transformation.transform.nonfinite
-  desc: transform() with Infinity/NaN is ignored
-  testing:
-    - 2d.nonfinite
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.translate(100, 10);
-    @nonfinite ctx.transform(<0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>);
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(-100, -10, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-
-- name: 2d.transformation.setTransform.skewed
-  testing:
-    - 2d.transformation.setTransform
-  code: |
-    // 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();
-    @assert pixel 21,11 == 0,255,0,255;
-    @assert pixel 79,11 == 0,255,0,255;
-    @assert pixel 21,39 == 0,255,0,255;
-    @assert pixel 79,39 == 0,255,0,255;
-    @assert pixel 39,19 == 0,255,0,255;
-    @assert pixel 61,19 == 0,255,0,255;
-    @assert pixel 39,31 == 0,255,0,255;
-    @assert pixel 61,31 == 0,255,0,255;
-    t.done();
-
-- name: 2d.transformation.setTransform.multiple
-  testing:
-    - 2d.transformation.setTransform.identity
-  code: |
-    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);
-    @assert pixel 75,35 == 0,255,0,255;
-    t.done();
-
-- name: 2d.transformation.setTransform.nonfinite
-  desc: setTransform() with Infinity/NaN is ignored
-  testing:
-    - 2d.nonfinite
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.translate(100, 10);
-    @nonfinite ctx.setTransform(<0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>);
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(-100, -10, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.composite.globalAlpha.range
-  testing:
-    - 2d.composite.globalAlpha.range
-  code: |
-    ctx.globalAlpha = 0.5;
-    var a = ctx.globalAlpha; // might not be exactly 0.5, if it is rounded/quantised, so remember for future comparisons
-    ctx.globalAlpha = 1.1;
-    @assert ctx.globalAlpha === a;
-    ctx.globalAlpha = -0.1;
-    @assert ctx.globalAlpha === a;
-    ctx.globalAlpha = 0;
-    @assert ctx.globalAlpha === 0;
-    ctx.globalAlpha = 1;
-    @assert ctx.globalAlpha === 1;
-    t.done();
-
-- name: 2d.composite.globalAlpha.invalid
-  testing:
-    - 2d.composite.globalAlpha.range
-  code: |
-    ctx.globalAlpha = 0.5;
-    var a = ctx.globalAlpha; // might not be exactly 0.5, if it is rounded/quantised, so remember for future comparisons
-    ctx.globalAlpha = Infinity;
-    @assert ctx.globalAlpha === a;
-    ctx.globalAlpha = -Infinity;
-    @assert ctx.globalAlpha === a;
-    ctx.globalAlpha = NaN;
-    @assert ctx.globalAlpha === a;
-    t.done();
-
-- name: 2d.composite.globalAlpha.default
-  testing:
-    - 2d.composite.globalAlpha.default
-  code: |
-    @assert ctx.globalAlpha === 1.0;
-    t.done();
-
-- name: 2d.composite.globalAlpha.fill
-  testing:
-    - 2d.composite.globalAlpha.shape
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.globalAlpha = 0.01; // avoid any potential alpha=0 optimisations
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 50,25 ==~ 2,253,0,255;
-    t.done();
-
-- name: 2d.composite.globalAlpha.image
-  testing:
-    - 2d.composite.globalAlpha.image
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.globalAlpha = 0.01; // avoid any potential alpha=0 optimisations
-    var promise = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/red.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    promise.then(function(response) {
-        createImageBitmap(response).then(bitmap => {
-            ctx.drawImage(bitmap, 0, 0);
-            @assert pixel 50,25 ==~ 2,253,0,255;
-        }, t_fail);
-    }).then(t_pass, t_fail);
-
-- name: 2d.composite.globalAlpha.canvas
-  testing:
-    - 2d.composite.globalAlpha.image
-  code: |
-    var offscreenCanvas2 = new OffscreenCanvas(100, 50);
-    var ctx2 = offscreenCanvas2.getContext('2d');
-    ctx2.fillStyle = '#f00';
-    ctx2.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.globalAlpha = 0.01; // avoid any potential alpha=0 optimisations
-    ctx.drawImage(offscreenCanvas2, 0, 0);
-    @assert pixel 50,25 ==~ 2,253,0,255;
-    t.done();
-
-- name: 2d.composite.globalAlpha.imagepattern
-  testing:
-    - 2d.composite.globalAlpha.image
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    var promise = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/red.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    promise.then(function(response) {
-        createImageBitmap(response).then(bitmap => {
-            ctx.fillStyle = ctx.createPattern(bitmap, 'no-repeat');
-            ctx.globalAlpha = 0.01; // avoid any potential alpha=0 optimisations
-            ctx.fillRect(0, 0, 100, 50);
-            @assert pixel 50,25 ==~ 2,253,0,255;
-        }, t_fail);
-    }).then(t_pass, t_fail);
-
-- name: 2d.composite.globalAlpha.canvaspattern
-  testing:
-    - 2d.composite.globalAlpha.image
-  code: |
-    var offscreenCanvas2 = new OffscreenCanvas(100, 50);
-    var ctx2 = offscreenCanvas2.getContext('2d');
-    ctx2.fillStyle = '#f00';
-    ctx2.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = ctx.createPattern(offscreenCanvas2, 'no-repeat');
-    ctx.globalAlpha = 0.01; // avoid any potential alpha=0 optimisations
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 50,25 ==~ 2,253,0,255;
-    t.done();
-
-- name: 2d.composite.globalAlpha.canvascopy
-  testing:
-    - 2d.composite.globalAlpha.image
-  code: |
-    var offscreenCanvas2 = new OffscreenCanvas(100, 50);
-    var ctx2 = offscreenCanvas2.getContext('2d');
-    ctx2.fillStyle = '#0f0';
-    ctx2.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.globalCompositeOperation = 'copy'
-    ctx.globalAlpha = 0.51;
-    ctx.drawImage(offscreenCanvas2, 0, 0);
-    @assert pixel 50,25 ==~ 0,255,0,130;
-    t.done();
-
-
-- meta: |
-    # Composite operation tests
-    # <http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2007-March/010608.html>
-    ops = [
-        # name               FA      FB
-        ('source-over',      '1',    '1-aA'),
-        ('destination-over', '1-aB', '1'),
-        ('source-in',        'aB',   '0'),
-        ('destination-in',   '0',    'aA'),
-        ('source-out',       '1-aB', '0'),
-        ('destination-out',  '0',    '1-aA'),
-        ('source-atop',      'aB',   '1-aA'),
-        ('destination-atop', '1-aB', 'aA'),
-        ('xor',              '1-aB', '1-aA'),
-        ('copy',             '1',    '0'),
-        ('lighter',          '1',    '1'),
-    ]
-
-    # The ones that change the output when src = (0,0,0,0):
-    ops_trans = [ 'source-in', 'destination-in', 'source-out', 'destination-atop', 'copy' ];
-
-    def calc_output(A, B, FA_code, FB_code):
-        RA, GA, BA, aA = A
-        RB, GB, BB, aB = B
-        rA, gA, bA = RA*aA, GA*aA, BA*aA
-        rB, gB, bB = RB*aB, GB*aB, BB*aB
-
-        FA = eval(FA_code)
-        FB = eval(FB_code)
-
-        rO = rA*FA + rB*FB
-        gO = gA*FA + gB*FB
-        bO = bA*FA + bB*FB
-        aO = aA*FA + aB*FB
-
-        rO = min(255, rO)
-        gO = min(255, gO)
-        bO = min(255, bO)
-        aO = min(1, aO)
-
-        if aO:
-            RO = rO / aO
-            GO = gO / aO
-            BO = bO / aO
-        else: RO = GO = BO = 0
-
-        return (RO, GO, BO, aO)
-
-    def to_test(color):
-        r, g, b, a = color
-        return '%d,%d,%d,%d' % (round(r), round(g), round(b), round(a*255))
-    def to_cairo(color):
-        r, g, b, a = color
-        return '%f,%f,%f,%f' % (r/255., g/255., b/255., a)
-
-    for (name, src, dest) in [
-        ('solid', (255, 255, 0, 1.0), (0, 255, 255, 1.0)),
-        ('transparent', (0, 0, 255, 0.75), (0, 255, 0, 0.5)),
-            # catches the atop, xor and lighter bugs in Opera 9.10
-    ]:
-        for op, FA_code, FB_code in ops:
-            expected = calc_output(src, dest, FA_code, FB_code)
-            tests.append( {
-                'name': '2d.composite.%s.%s' % (name, op),
-                'testing': [ '2d.composite.%s' % op ],
-                'code': """
-    ctx.fillStyle = 'rgba%s';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.globalCompositeOperation = '%s';
-    ctx.fillStyle = 'rgba%s';
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 50,25 ==~ %s +/- 5;
-    t.done();
-    """ % (dest, op, src, to_test(expected)),
-            } )
-
-    for (name, src, dest) in [ ('image', (255, 255, 0, 0.75), (0, 255, 255, 0.5)) ]:
-        for op, FA_code, FB_code in ops:
-            expected = calc_output(src, dest, FA_code, FB_code)
-            tests.append( {
-                'name': '2d.composite.%s.%s' % (name, op),
-                'testing': [ '2d.composite.%s' % op ],
-                'images': [ 'yellow75.png' ],
-                'code': """
-    ctx.fillStyle = 'rgba%s';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.globalCompositeOperation = '%s';
-    var promise = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/yellow75.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    promise.then(function(response) {
-        createImageBitmap(response).then(bitmap => {
-            ctx.drawImage(bitmap, 0, 0);
-            @assert pixel 50,25 ==~ %s +/- 5;
-        }, t_fail);
-    }).then(t_pass, t_fail);
-    """ % (dest, op, to_test(expected)),
-            } )
-
-    for (name, src, dest) in [ ('canvas', (255, 255, 0, 0.75), (0, 255, 255, 0.5)) ]:
-        for op, FA_code, FB_code in ops:
-            expected = calc_output(src, dest, FA_code, FB_code)
-            tests.append( {
-                'name': '2d.composite.%s.%s' % (name, op),
-                'testing': [ '2d.composite.%s' % op ],
-                'images': [ 'yellow75.png' ],
-                'code': """
-    var offscreenCanvas2 = new OffscreenCanvas(offscreenCanvas.width, offscreenCanvas.height);
-    var ctx2 = offscreenCanvas2.getContext('2d');
-    var promise = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/yellow75.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    promise.then(function(response) {
-        createImageBitmap(response).then(bitmap => {
-            ctx2.drawImage(bitmap, 0, 0);
-            ctx.fillStyle = 'rgba%s';
-            ctx.fillRect(0, 0, 100, 50);
-            ctx.globalCompositeOperation = '%s';
-            ctx.drawImage(offscreenCanvas2, 0, 0);
-            @assert pixel 50,25 ==~ %s +/- 5;
-        }, t_fail);
-    }).then(t_pass, t_fail);
-    """ % (dest, op, to_test(expected)),
-            } )
-
-    for (name, src, dest) in [ ('uncovered.fill', (0, 0, 255, 0.75), (0, 255, 0, 0.5)) ]:
-        for op, FA_code, FB_code in ops:
-            if op not in ops_trans: continue
-            expected0 = calc_output((0,0,0,0.0), dest, FA_code, FB_code)
-            new_test = {
-                'name': '2d.composite.%s.%s' % (name, op),
-                'desc': 'fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.',
-                'testing': [ '2d.composite.%s' % op ],
-                'code': """
-    ctx.fillStyle = 'rgba%s';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.globalCompositeOperation = '%s';
-    ctx.fillStyle = 'rgba%s';
-    ctx.translate(0, 25);
-    ctx.fillRect(0, 50, 100, 50);
-    @assert pixel 50,25 ==~ %s +/- 5;
-    t.done();
-    """ % (dest, op, src, to_test(expected0)),
-            }
-            if op == 'destination-in':
-              new_test['timeout'] = 'long'
-            tests.append(new_test)
-
-    for (name, src, dest) in [ ('uncovered.image', (255, 255, 0, 1.0), (0, 255, 255, 0.5)) ]:
-        for op, FA_code, FB_code in ops:
-            if op not in ops_trans: continue
-            expected0 = calc_output((0,0,0,0.0), dest, FA_code, FB_code)
-            tests.append( {
-                'name': '2d.composite.%s.%s' % (name, op),
-                'desc': 'drawImage() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.',
-                'testing': [ '2d.composite.%s' % op ],
-                'images': [ 'yellow.png' ],
-                'code': """
-    ctx.fillStyle = 'rgba%s';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.globalCompositeOperation = '%s';
-    var promise = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/yellow.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    promise.then(function(response) {
-        createImageBitmap(response).then(bitmap => {
-            ctx.drawImage(bitmap, 40, 40, 10, 10, 40, 50, 10, 10);
-            @assert pixel 15,15 ==~ %s +/- 5;
-            @assert pixel 50,25 ==~ %s +/- 5;
-        }, t_fail);
-    }).then(t_pass, t_fail);
-    """ % (dest, op, to_test(expected0), to_test(expected0)),
-            } )
-
-    for (name, src, dest) in [ ('uncovered.nocontext', (255, 255, 0, 1.0), (0, 255, 255, 0.5)) ]:
-        for op, FA_code, FB_code in ops:
-            if op not in ops_trans: continue
-            expected0 = calc_output((0,0,0,0.0), dest, FA_code, FB_code)
-            tests.append( {
-                'name': '2d.composite.%s.%s' % (name, op),
-                'desc': 'drawImage() of a canvas with no context draws pixels as (0,0,0,0), and does not leave the pixels unchanged.',
-                'testing': [ '2d.composite.%s' % op ],
-                'code': """
-    ctx.fillStyle = 'rgba%s';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.globalCompositeOperation = '%s';
-    var offscreenCanvas2 = new OffscreenCanvas(100, 50);
-    ctx.drawImage(offscreenCanvas2, 0, 0);
-    @assert pixel 50,25 ==~ %s +/- 5;
-    t.done();
-    """ % (dest, op, to_test(expected0)),
-            } )
-
-    for (name, src, dest) in [ ('uncovered.pattern', (255, 255, 0, 1.0), (0, 255, 255, 0.5)) ]:
-        for op, FA_code, FB_code in ops:
-            if op not in ops_trans: continue
-            expected0 = calc_output((0,0,0,0.0), dest, FA_code, FB_code)
-            tests.append( {
-                'name': '2d.composite.%s.%s' % (name, op),
-                'desc': 'Pattern fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.',
-                'testing': [ '2d.composite.%s' % op ],
-                'images': [ 'yellow.png' ],
-                'code': """
-    ctx.fillStyle = 'rgba%s';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.globalCompositeOperation = '%s';
-    var promise = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/yellow.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    promise.then(function(response) {
-        createImageBitmap(response).then(bitmap => {
-            ctx.fillStyle = ctx.createPattern(bitmap, 'no-repeat');
-            ctx.fillRect(0, 50, 100, 50);
-            @assert pixel 50,25 ==~ %s +/- 5;
-        }, t_fail);
-    }).then(t_pass, t_fail);
-    """ % (dest, op, to_test(expected0)),
-            } )
-
-    for op, FA_code, FB_code in ops:
-        tests.append( {
-            'name': '2d.composite.clip.%s' % (op),
-            'desc': 'fill() does not affect pixels outside the clip region.',
-            'testing': [ '2d.composite.%s' % op ],
-            'code': """
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.globalCompositeOperation = '%s';
-    ctx.rect(-20, -20, 10, 10);
-    ctx.clip();
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 50, 50);
-    @assert pixel 25,25 == 0,255,0,255;
-    @assert pixel 75,25 == 0,255,0,255;
-    t.done();
-    """ % (op),
-        } )
-
-- name: 2d.composite.operation.get
-  testing:
-    - 2d.composite.operation
-  code: |
-    var modes = ['source-atop', 'source-in', 'source-out', 'source-over',
-        'destination-atop', 'destination-in', 'destination-out', 'destination-over',
-        'lighter', 'copy', 'xor'];
-    for (var i = 0; i < modes.length; ++i)
-    {
-        ctx.globalCompositeOperation = modes[i];
-        @assert ctx.globalCompositeOperation === modes[i];
-    }
-    t.done();
-
-- name: 2d.composite.operation.unrecognised
-  testing:
-    - 2d.composite.operation.unrecognised
-  code: |
-    ctx.globalCompositeOperation = 'xor';
-    ctx.globalCompositeOperation = 'nonexistent';
-    @assert ctx.globalCompositeOperation === 'xor';
-    t.done();
-
-- name: 2d.composite.operation.darker
-  testing:
-    - 2d.composite.operation.unrecognised
-  code: |
-    ctx.globalCompositeOperation = 'xor';
-    ctx.globalCompositeOperation = 'darker';
-    @assert ctx.globalCompositeOperation === 'xor';
-    t.done();
-
-- name: 2d.composite.operation.over
-  testing:
-    - 2d.composite.operation.unrecognised
-  code: |
-    ctx.globalCompositeOperation = 'xor';
-    ctx.globalCompositeOperation = 'over';
-    @assert ctx.globalCompositeOperation === 'xor';
-    t.done();
-
-- name: 2d.composite.operation.clear
-  testing:
-    - 2d.composite.operation.clear
-  code: |
-    ctx.globalCompositeOperation = 'xor';
-    ctx.globalCompositeOperation = 'clear';
-    @assert ctx.globalCompositeOperation === 'clear';
-    t.done();
-
-- name: 2d.composite.operation.highlight
-  testing:
-    - 2d.composite.operation.unrecognised
-  code: |
-    ctx.globalCompositeOperation = 'xor';
-    ctx.globalCompositeOperation = 'highlight';
-    @assert ctx.globalCompositeOperation === 'xor';
-    t.done();
-
-- name: 2d.composite.operation.nullsuffix
-  testing:
-    - 2d.composite.operation.exact
-  code: |
-    ctx.globalCompositeOperation = 'xor';
-    ctx.globalCompositeOperation = 'source-over\0';
-    @assert ctx.globalCompositeOperation === 'xor';
-    t.done();
-
-- name: 2d.composite.operation.casesensitive
-  testing:
-    - 2d.composite.operation.casesensitive
-  code: |
-    ctx.globalCompositeOperation = 'xor';
-    ctx.globalCompositeOperation = 'Source-over';
-    @assert ctx.globalCompositeOperation === 'xor';
-    t.done();
-
-- name: 2d.composite.operation.default
-  testing:
-    - 2d.composite.operation.default
-  code: |
-    @assert ctx.globalCompositeOperation === 'source-over';
-    t.done();
-
-- meta: |
-    # Colour parsing tests
-
-    # Try most of the CSS3 Color <color> values - http://www.w3.org/TR/css3-color/#colorunits
-    big_float = '1' + ('0' * 39)
-    big_double = '1' + ('0' * 310)
-    for name, string, r,g,b,a, notes in [
-        ('html4', 'limE', 0,255,0,255, ""),
-        ('hex3', '#0f0', 0,255,0,255, ""),
-        ('hex4', '#0f0f', 0,255,0,255, ""),
-        ('hex6', '#00fF00', 0,255,0,255, ""),
-        ('hex8', '#00ff00ff', 0,255,0,255, ""),
-        ('rgb-num', 'rgb(0,255,0)', 0,255,0,255, ""),
-        ('rgb-clamp-1', 'rgb(-1000, 1000, -1000)', 0,255,0,255, 'Assumes colours are clamped to [0,255].'),
-        ('rgb-clamp-2', 'rgb(-200%, 200%, -200%)', 0,255,0,255, 'Assumes colours are clamped to [0,255].'),
-        ('rgb-clamp-3', 'rgb(-2147483649, 4294967298, -18446744073709551619)', 0,255,0,255, 'Assumes colours are clamped to [0,255].'),
-        ('rgb-clamp-4', 'rgb(-'+big_float+', '+big_float+', -'+big_float+')', 0,255,0,255, 'Assumes colours are clamped to [0,255].'),
-        ('rgb-clamp-5', 'rgb(-'+big_double+', '+big_double+', -'+big_double+')', 0,255,0,255, 'Assumes colours are clamped to [0,255].'),
-        ('rgb-percent', 'rgb(0% ,100% ,0%)', 0,255,0,255, 'CSS3 Color says "The integer value 255 corresponds to 100%". (In particular, it is not 254...)'),
-        ('rgb-eof', 'rgb(0, 255, 0', 0,255,0,255, ""), # see CSS2.1 4.2 "Unexpected end of style sheet"
-        ('rgba-solid-1', 'rgba(  0  ,  255  ,  0  ,  1  )', 0,255,0,255, ""),
-        ('rgba-solid-2', 'rgba(  0  ,  255  ,  0  ,  1.0  )', 0,255,0,255, ""),
-        ('rgba-solid-3', 'rgba(  0  ,  255  ,  0  , +1  )', 0,255,0,255, ""),
-        ('rgba-solid-4', 'rgba( -0  ,  255  , +0  ,  1  )', 0,255,0,255, ""),
-        ('rgba-num-1', 'rgba(  0  ,  255  ,  0  ,  .499  )', 0,255,0,127, ""),
-        ('rgba-num-2', 'rgba(  0  ,  255  ,  0  ,  0.499  )', 0,255,0,127, ""),
-        ('rgba-percent', 'rgba(0%,100%,0%,0.499)', 0,255,0,127, ""), # 0.499*255 rounds to 127, both down and nearest, so it should be safe
-        ('rgba-clamp-1', 'rgba(0, 255, 0, -2)', 0,0,0,0, ""),
-        ('rgba-clamp-2', 'rgba(0, 255, 0, 2)', 0,255,0,255, ""),
-        ('rgba-eof', 'rgba(0, 255, 0, 1', 0,255,0,255, ""),
-        ('transparent-1', 'transparent', 0,0,0,0, ""),
-        ('transparent-2', 'TrAnSpArEnT', 0,0,0,0, ""),
-        ('hsl-1', 'hsl(120, 100%, 50%)', 0,255,0,255, ""),
-        ('hsl-2', 'hsl( -240 , 100% , 50% )', 0,255,0,255, ""),
-        ('hsl-3', 'hsl(360120, 100%, 50%)', 0,255,0,255, ""),
-        ('hsl-4', 'hsl(-360240, 100%, 50%)', 0,255,0,255, ""),
-        ('hsl-5', 'hsl(120.0, 100.0%, 50.0%)', 0,255,0,255, ""),
-        ('hsl-6', 'hsl(+120, +100%, +50%)', 0,255,0,255, ""),
-        ('hsl-clamp-1', 'hsl(120, 200%, 50%)', 0,255,0,255, ""),
-        ('hsl-clamp-2', 'hsl(120, -200%, 49.9%)', 127,127,127,255, ""),
-        ('hsl-clamp-3', 'hsl(120, 100%, 200%)', 255,255,255,255, ""),
-        ('hsl-clamp-4', 'hsl(120, 100%, -200%)', 0,0,0,255, ""),
-        ('hsla-1', 'hsla(120, 100%, 50%, 0.499)', 0,255,0,127, ""),
-        ('hsla-2', 'hsla( 120.0 , 100.0% , 50.0% , 1 )', 0,255,0,255, ""),
-        ('hsla-clamp-1', 'hsla(120, 200%, 50%, 1)', 0,255,0,255, ""),
-        ('hsla-clamp-2', 'hsla(120, -200%, 49.9%, 1)', 127,127,127,255, ""),
-        ('hsla-clamp-3', 'hsla(120, 100%, 200%, 1)', 255,255,255,255, ""),
-        ('hsla-clamp-4', 'hsla(120, 100%, -200%, 1)', 0,0,0,255, ""),
-        ('hsla-clamp-5', 'hsla(120, 100%, 50%, 2)', 0,255,0,255, ""),
-        ('hsla-clamp-6', 'hsla(120, 100%, 0%, -2)', 0,0,0,0, ""),
-        ('svg-1', 'gray', 128,128,128,255, ""),
-        ('svg-2', 'grey', 128,128,128,255, ""),
-        # css-color-4 rgb() color function
-        #   https://drafts.csswg.org/css-color/#numeric-rgb
-        ('css-color-4-rgb-1', 'rgb(0, 255.0, 0)', 0,255,0,255, ""),
-        ('css-color-4-rgb-2', 'rgb(0, 255, 0, 0.2)', 0,255,0,51, ""),
-        ('css-color-4-rgb-3', 'rgb(0, 255, 0, 20%)', 0,255,0,51, ""),
-        ('css-color-4-rgb-4', 'rgb(0 255 0)', 0,255,0,255, ""),
-        ('css-color-4-rgb-5', 'rgb(0 255 0 / 0.2)', 0,255,0,51, ""),
-        ('css-color-4-rgb-6', 'rgb(0 255 0 / 20%)', 0,255,0,51, ""),
-        ('css-color-4-rgba-1', 'rgba(0, 255.0, 0)', 0,255,0,255, ""),
-        ('css-color-4-rgba-2', 'rgba(0, 255, 0, 0.2)', 0,255,0,51, ""),
-        ('css-color-4-rgba-3', 'rgba(0, 255, 0, 20%)', 0,255,0,51, ""),
-        ('css-color-4-rgba-4', 'rgba(0 255 0)', 0,255,0,255, ""),
-        ('css-color-4-rgba-5', 'rgba(0 255 0 / 0.2)', 0,255,0,51, ""),
-        ('css-color-4-rgba-6', 'rgba(0 255 0 / 20%)', 0,255,0,51, ""),
-        # css-color-4 hsl() color function
-        #   https://drafts.csswg.org/css-color/#the-hsl-notation
-        ('css-color-4-hsl-1', 'hsl(120 100.0% 50.0%)', 0,255,0,255, ""),
-        ('css-color-4-hsl-2', 'hsl(120 100.0% 50.0% / 0.2)', 0,255,0,51, ""),
-        ('css-color-4-hsl-3', 'hsl(120.0, 100.0%, 50.0%, 0.2)', 0,255,0,51, ""),
-        ('css-color-4-hsl-4', 'hsl(120.0, 100.0%, 50.0%, 20%)', 0,255,0,51, ""),
-        ('css-color-4-hsl-5', 'hsl(120deg, 100.0%, 50.0%, 0.2)', 0,255,0,51, ""),
-        ('css-color-4-hsl-6', 'hsl(120deg, 100.0%, 50.0%)', 0,255,0,255, ""),
-        ('css-color-4-hsl-7', 'hsl(133.33333333grad, 100.0%, 50.0%)', 0,255,0,255, ""),
-        ('css-color-4-hsl-8', 'hsl(2.0943951024rad, 100.0%, 50.0%)', 0,255,0,255, ""),
-        ('css-color-4-hsl-9', 'hsl(0.3333333333turn, 100.0%, 50.0%)', 0,255,0,255, ""),
-        ('css-color-4-hsla-1', 'hsl(120 100.0% 50.0%)', 0,255,0,255, ""),
-        ('css-color-4-hsla-2', 'hsl(120 100.0% 50.0% / 0.2)', 0,255,0,51, ""),
-        ('css-color-4-hsla-3', 'hsl(120.0, 100.0%, 50.0%, 0.2)', 0,255,0,51, ""),
-        ('css-color-4-hsla-4', 'hsl(120.0, 100.0%, 50.0%, 20%)', 0,255,0,51, ""),
-        ('css-color-4-hsla-5', 'hsl(120deg, 100.0%, 50.0%, 0.2)', 0,255,0,51, ""),
-        ('css-color-4-hsla-6', 'hsl(120deg, 100.0%, 50.0%)', 0,255,0,255, ""),
-        ('css-color-4-hsla-7', 'hsl(133.33333333grad, 100.0%, 50.0%)', 0,255,0,255, ""),
-        ('css-color-4-hsla-8', 'hsl(2.0943951024rad, 100.0%, 50.0%)', 0,255,0,255, ""),
-        ('css-color-4-hsla-9', 'hsl(0.3333333333turn, 100.0%, 50.0%)', 0,255,0,255, ""),
-        # currentColor is handled later
-    ]:
-        # TODO: test by retrieving fillStyle, instead of actually drawing?
-        # TODO: test strokeStyle, shadowColor in the same way
-        test = {
-            'name': '2d.fillStyle.parse.%s' % name,
-            'testing': [ '2d.colours.parse' ],
-            'notes': notes,
-            'code': """
-    ctx.fillStyle = '#f00';
-    ctx.fillStyle = '%s';
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 50,25 == %d,%d,%d,%d;
-    t.done();
-    """ % (string, r,g,b,a),
-        }
-        tests.append(test)
-
-    # Also test that invalid colours are ignored
-    for name, string in [
-        ('hex1', '#f'),
-        ('hex2', '#f0'),
-        ('hex3', '#g00'),
-        ('hex4', '#fg00'),
-        ('hex5', '#ff000'),
-        ('hex6', '#fg0000'),
-        ('hex7', '#ff0000f'),
-        ('hex8', '#fg0000ff'),
-        ('rgb-1', 'rgb(255.0, 0, 0,)'),
-        ('rgb-2', 'rgb(100%, 0, 0)'),
-        ('rgb-3', 'rgb(255, - 1, 0)'),
-        ('rgba-1', 'rgba(100%, 0, 0, 1)'),
-        ('rgba-2', 'rgba(255, 0, 0, 1. 0)'),
-        ('rgba-3', 'rgba(255, 0, 0, 1.)'),
-        ('rgba-4', 'rgba(255, 0, 0, '),
-        ('rgba-5', 'rgba(255, 0, 0, 1,)'),
-        ('hsl-1', 'hsl(0%, 100%, 50%)'),
-        ('hsl-2', 'hsl(z, 100%, 50%)'),
-        ('hsl-3', 'hsl(0, 0, 50%)'),
-        ('hsl-4', 'hsl(0, 100%, 0)'),
-        ('hsl-5', 'hsl(0, 100.%, 50%)'),
-        ('hsl-6', 'hsl(0, 100%, 50%,)'),
-        ('hsla-1', 'hsla(0%, 100%, 50%, 1)'),
-        ('hsla-2', 'hsla(0, 0, 50%, 1)'),
-        ('hsla-3', 'hsla(0, 0, 50%, 1,)'),
-        ('name-1', 'darkbrown'),
-        ('name-2', 'firebrick1'),
-        ('name-3', 'red blue'),
-        ('name-4', '"red"'),
-        ('name-5', '"red'),
-        # css-color-4 color function
-        #   comma and comma-less expressions should not mix together.
-        ('css-color-4-rgb-1', 'rgb(255, 0, 0 / 1)'),
-        ('css-color-4-rgb-2', 'rgb(255 0 0, 1)'),
-        ('css-color-4-rgb-3', 'rgb(255, 0 0)'),
-        ('css-color-4-rgba-1', 'rgba(255, 0, 0 / 1)'),
-        ('css-color-4-rgba-2', 'rgba(255 0 0, 1)'),
-        ('css-color-4-rgba-3', 'rgba(255, 0 0)'),
-        ('css-color-4-hsl-1', 'hsl(0, 100%, 50% / 1)'),
-        ('css-color-4-hsl-2', 'hsl(0 100% 50%, 1)'),
-        ('css-color-4-hsl-3', 'hsl(0, 100% 50%)'),
-        ('css-color-4-hsla-1', 'hsla(0, 100%, 50% / 1)'),
-        ('css-color-4-hsla-2', 'hsla(0 100% 50%, 1)'),
-        ('css-color-4-hsla-3', 'hsla(0, 100% 50%)'),
-        #  trailing slash
-        ('css-color-4-rgb-4', 'rgb(0 0 0 /)'),
-        ('css-color-4-rgb-5', 'rgb(0, 0, 0 /)'),
-        ('css-color-4-hsl-4', 'hsl(0 100% 50% /)'),
-        ('css-color-4-hsl-5', 'hsl(0, 100%, 50% /)'),
-    ]:
-        test = {
-            'name': '2d.fillStyle.parse.invalid.%s' % name,
-            'testing': [ '2d.colours.parse' ],
-            'code': """
-    ctx.fillStyle = '#0f0';
-    try { ctx.fillStyle = '%s'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-    """ % string,
-        }
-        tests.append(test)
-
-    # Some can't have positive tests, only negative tests, because we don't know what colour they're meant to be
-    for name, string in [
-        ('system', 'ThreeDDarkShadow'),
-        #('flavor', 'flavor'), # removed from latest CSS3 Color drafts
-    ]:
-        test = {
-            'name': '2d.fillStyle.parse.%s' % name,
-            'testing': [ '2d.colours.parse' ],
-            'code': """
-    ctx.fillStyle = '#f00';
-    ctx.fillStyle = '%s';
-    @assert ctx.fillStyle =~ /^#(?!(FF0000|ff0000|f00)$)/; // test that it's not red
-    t.done();
-    """ % (string,),
-        }
-        tests.append(test)
-
-- name: 2d.fillStyle.invalidstring
-  testing:
-    - 2d.colours.invalidstring
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.fillStyle = 'invalid';
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.fillStyle.invalidtype
-  testing:
-    - 2d.colours.invalidtype
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.fillStyle = null;
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.fillStyle.get.solid
-  testing:
-    - 2d.colours.getcolour
-    - 2d.serializecolour.solid
-  code: |
-    ctx.fillStyle = '#fa0';
-    @assert ctx.fillStyle === '#ffaa00';
-    t.done();
-
-- name: 2d.fillStyle.get.semitransparent
-  testing:
-    - 2d.colours.getcolour
-    - 2d.serializecolour.transparent
-  code: |
-    ctx.fillStyle = 'rgba(255,255,255,0.45)';
-    @assert ctx.fillStyle =~ /^rgba\(255, 255, 255, 0\.4\d+\)$/;
-    t.done();
-
-- name: 2d.fillStyle.get.transparent
-  testing:
-    - 2d.colours.getcolour
-    - 2d.serializecolour.transparent
-  code: |
-    ctx.fillStyle = 'rgba(0,0,0,0)';
-    @assert ctx.fillStyle === 'rgba(0, 0, 0, 0)';
-    t.done();
-
-- name: 2d.fillStyle.default
-  testing:
-    - 2d.colours.default
-  code: |
-    @assert ctx.fillStyle === '#000000';
-    t.done();
-
-- name: 2d.strokeStyle.default
-  testing:
-    - 2d.colours.default
-  code: |
-    @assert ctx.strokeStyle === '#000000';
-    t.done();
-
-- name: 2d.gradient.interpolate.solid
-  testing:
-    - 2d.gradient.interpolate.linear
-  code: |
-    var g = ctx.createLinearGradient(0, 0, 100, 0);
-    g.addColorStop(0, '#0f0');
-    g.addColorStop(1, '#0f0');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.gradient.interpolate.colour
-  testing:
-    - 2d.gradient.interpolate.linear
-  code: |
-    var g = ctx.createLinearGradient(0, 0, 100, 0);
-    g.addColorStop(0, '#ff0');
-    g.addColorStop(1, '#00f');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 25,25 ==~ 191,191,63,255 +/- 3;
-    @assert pixel 50,25 ==~ 127,127,127,255 +/- 3;
-    @assert pixel 75,25 ==~ 63,63,191,255 +/- 3;
-    t.done();
-
-- name: 2d.gradient.interpolate.alpha
-  testing:
-    - 2d.gradient.interpolate.linear
-  code: |
-    ctx.fillStyle = '#ff0';
-    ctx.fillRect(0, 0, 100, 50);
-    var g = ctx.createLinearGradient(0, 0, 100, 0);
-    g.addColorStop(0, 'rgba(0,0,255, 0)');
-    g.addColorStop(1, 'rgba(0,0,255, 1)');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 25,25 ==~ 191,191,63,255 +/- 3;
-    @assert pixel 50,25 ==~ 127,127,127,255 +/- 3;
-    @assert pixel 75,25 ==~ 63,63,191,255 +/- 3;
-    t.done();
-
-- name: 2d.gradient.interpolate.colouralpha
-  testing:
-    - 2d.gradient.interpolate.alpha
-  code: |
-    var g = ctx.createLinearGradient(0, 0, 100, 0);
-    g.addColorStop(0, 'rgba(255,255,0, 0)');
-    g.addColorStop(1, 'rgba(0,0,255, 1)');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 25,25 ==~ 190,190,65,65 +/- 3;
-    @assert pixel 50,25 ==~ 126,126,128,128 +/- 3;
-    @assert pixel 75,25 ==~ 62,62,192,192 +/- 3;
-    t.done();
-
-- name: 2d.gradient.interpolate.outside
-  testing:
-    - 2d.gradient.outside.first
-    - 2d.gradient.outside.last
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    var g = ctx.createLinearGradient(25, 0, 75, 0);
-    g.addColorStop(0.4, '#0f0');
-    g.addColorStop(0.6, '#0f0');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 20,25 ==~ 0,255,0,255;
-    @assert pixel 50,25 ==~ 0,255,0,255;
-    @assert pixel 80,25 ==~ 0,255,0,255;
-    t.done();
-
-- name: 2d.gradient.interpolate.zerosize.fill
-  testing:
-    - 2d.gradient.linear.zerosize
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    var g = ctx.createLinearGradient(50, 25, 50, 25); // zero-length line (undefined direction)
-    g.addColorStop(0, '#f00');
-    g.addColorStop(1, '#f00');
-    ctx.fillStyle = g;
-    ctx.rect(0, 0, 100, 50);
-    ctx.fill();
-    @assert pixel 40,20 == 0,255,0,255;
-    t.done();
-
-- name: 2d.gradient.interpolate.zerosize.stroke
-  testing:
-    - 2d.gradient.linear.zerosize
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    var g = ctx.createLinearGradient(50, 25, 50, 25); // zero-length line (undefined direction)
-    g.addColorStop(0, '#f00');
-    g.addColorStop(1, '#f00');
-    ctx.strokeStyle = g;
-    ctx.rect(20, 20, 60, 10);
-    ctx.stroke();
-    @assert pixel 19,19 == 0,255,0,255;
-    @assert pixel 20,19 == 0,255,0,255;
-    @assert pixel 21,19 == 0,255,0,255;
-    @assert pixel 19,20 == 0,255,0,255;
-    @assert pixel 20,20 == 0,255,0,255;
-    @assert pixel 21,20 == 0,255,0,255;
-    @assert pixel 19,21 == 0,255,0,255;
-    @assert pixel 20,21 == 0,255,0,255;
-    @assert pixel 21,21 == 0,255,0,255;
-    t.done();
-
-- name: 2d.gradient.interpolate.zerosize.fillRect
-  testing:
-    - 2d.gradient.linear.zerosize
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    var g = ctx.createLinearGradient(50, 25, 50, 25); // zero-length line (undefined direction)
-    g.addColorStop(0, '#f00');
-    g.addColorStop(1, '#f00');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 40,20 == 0,255,0,255; @moz-todo
-    t.done();
-
-- name: 2d.gradient.interpolate.zerosize.strokeRect
-  testing:
-    - 2d.gradient.linear.zerosize
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    var g = ctx.createLinearGradient(50, 25, 50, 25); // zero-length line (undefined direction)
-    g.addColorStop(0, '#f00');
-    g.addColorStop(1, '#f00');
-    ctx.strokeStyle = g;
-    ctx.strokeRect(20, 20, 60, 10);
-    @assert pixel 19,19 == 0,255,0,255;
-    @assert pixel 20,19 == 0,255,0,255;
-    @assert pixel 21,19 == 0,255,0,255;
-    @assert pixel 19,20 == 0,255,0,255;
-    @assert pixel 20,20 == 0,255,0,255;
-    @assert pixel 21,20 == 0,255,0,255;
-    @assert pixel 19,21 == 0,255,0,255;
-    @assert pixel 20,21 == 0,255,0,255;
-    @assert pixel 21,21 == 0,255,0,255;
-    t.done();
-
-
-- name: 2d.gradient.interpolate.vertical
-  testing:
-    - 2d.gradient.interpolate.linear
-  code: |
-    var g = ctx.createLinearGradient(0, 0, 0, 50);
-    g.addColorStop(0, '#ff0');
-    g.addColorStop(1, '#00f');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 50,12 ==~ 191,191,63,255 +/- 10;
-    @assert pixel 50,25 ==~ 127,127,127,255 +/- 5;
-    @assert pixel 50,37 ==~ 63,63,191,255 +/- 10;
-    t.done();
-
-- name: 2d.gradient.interpolate.multiple
-  testing:
-    - 2d.gradient.interpolate.linear
-  code: |
-    offscreenCanvas.width = 200;
-    var g = ctx.createLinearGradient(0, 0, 200, 0);
-    g.addColorStop(0, '#ff0');
-    g.addColorStop(0.5, '#0ff');
-    g.addColorStop(1, '#f0f');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 200, 50);
-    @assert pixel 50,25 ==~ 127,255,127,255 +/- 3;
-    @assert pixel 100,25 ==~ 0,255,255,255 +/- 3;
-    @assert pixel 150,25 ==~ 127,127,255,255 +/- 3;
-    t.done();
-
-- name: 2d.gradient.interpolate.overlap
-  testing:
-    - 2d.gradient.interpolate.overlap
-  code: |
-    offscreenCanvas.width = 200;
-    var g = ctx.createLinearGradient(0, 0, 200, 0);
-    g.addColorStop(0, '#f00');
-    g.addColorStop(0, '#ff0');
-    g.addColorStop(0.25, '#00f');
-    g.addColorStop(0.25, '#0f0');
-    g.addColorStop(0.25, '#0f0');
-    g.addColorStop(0.25, '#0f0');
-    g.addColorStop(0.25, '#ff0');
-    g.addColorStop(0.5, '#00f');
-    g.addColorStop(0.5, '#0f0');
-    g.addColorStop(0.75, '#00f');
-    g.addColorStop(0.75, '#f00');
-    g.addColorStop(0.75, '#ff0');
-    g.addColorStop(0.5, '#0f0');
-    g.addColorStop(0.5, '#0f0');
-    g.addColorStop(0.5, '#ff0');
-    g.addColorStop(1, '#00f');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 200, 50);
-    @assert pixel 49,25 ==~ 0,0,255,255 +/- 16;
-    @assert pixel 51,25 ==~ 255,255,0,255 +/- 16;
-    @assert pixel 99,25 ==~ 0,0,255,255 +/- 16;
-    @assert pixel 101,25 ==~ 255,255,0,255 +/- 16;
-    @assert pixel 149,25 ==~ 0,0,255,255 +/- 16;
-    @assert pixel 151,25 ==~ 255,255,0,255 +/- 16;
-    t.done();
-
-- name: 2d.gradient.interpolate.overlap2
-  testing:
-    - 2d.gradient.interpolate.overlap
-  code: |
-    var g = ctx.createLinearGradient(0, 0, 100, 0);
-    var ps = [ 0, 1/10, 1/4, 1/3, 1/2, 3/4, 1 ];
-    for (var p = 0; p < ps.length; ++p)
-    {
-            g.addColorStop(ps[p], '#0f0');
-            for (var i = 0; i < 15; ++i)
-                    g.addColorStop(ps[p], '#f00');
-            g.addColorStop(ps[p], '#0f0');
-    }
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 1,25 == 0,255,0,255;
-    @assert pixel 30,25 == 0,255,0,255;
-    @assert pixel 40,25 == 0,255,0,255;
-    @assert pixel 60,25 == 0,255,0,255;
-    @assert pixel 80,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.gradient.empty
-  testing:
-    - 2d.gradient.empty
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    var g = ctx.createLinearGradient(0, 0, 0, 50);
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 50,25 ==~ 0,255,0,255;
-    t.done();
-
-- name: 2d.gradient.object.update
-  testing:
-    - 2d.gradient.update
-  code: |
-    var g = ctx.createLinearGradient(-100, 0, 200, 0);
-    g.addColorStop(0, '#f00');
-    g.addColorStop(1, '#f00');
-    ctx.fillStyle = g;
-    g.addColorStop(0.1, '#0f0');
-    g.addColorStop(0.9, '#0f0');
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 50,25 ==~ 0,255,0,255;
-    t.done();
-
-- name: 2d.gradient.object.compare
-  testing:
-    - 2d.gradient.object
-  code: |
-    var g1 = ctx.createLinearGradient(0, 0, 100, 0);
-    var g2 = ctx.createLinearGradient(0, 0, 100, 0);
-    @assert g1 !== g2;
-    ctx.fillStyle = g1;
-    @assert ctx.fillStyle === g1;
-    t.done();
-
-- name: 2d.gradient.object.crosscanvas
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    var offscreenCanvas2 = new OffscreenCanvas(100, 50);
-    var g = offscreenCanvas2.getContext('2d').createLinearGradient(0, 0, 100, 0);
-    g.addColorStop(0, '#0f0');
-    g.addColorStop(1, '#0f0');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 50,25 ==~ 0,255,0,255;
-    t.done();
-
-- name: 2d.gradient.object.invalidoffset
-  testing:
-    - 2d.gradient.invalidoffset
-  code: |
-    var g = ctx.createLinearGradient(0, 0, 100, 0);
-    @assert throws INDEX_SIZE_ERR g.addColorStop(-1, '#000');
-    @assert throws INDEX_SIZE_ERR g.addColorStop(2, '#000');
-    @assert throws TypeError g.addColorStop(Infinity, '#000');
-    @assert throws TypeError g.addColorStop(-Infinity, '#000');
-    @assert throws TypeError g.addColorStop(NaN, '#000');
-    t.done();
-
-- name: 2d.gradient.object.invalidcolour
-  testing:
-    - 2d.gradient.invalidcolour
-  code: |
-    var g = ctx.createLinearGradient(0, 0, 100, 0);
-    @assert throws SYNTAX_ERR g.addColorStop(0, "");
-    @assert throws SYNTAX_ERR g.addColorStop(0, 'null');
-    @assert throws SYNTAX_ERR g.addColorStop(0, 'undefined');
-    @assert throws SYNTAX_ERR g.addColorStop(0, null);
-    @assert throws SYNTAX_ERR g.addColorStop(0, undefined);
-    t.done();
-
-- name: 2d.gradient.linear.nonfinite
-  desc: createLinearGradient() throws TypeError if arguments are not finite
-  testing:
-    - 2d.gradient.linear.nonfinite
-  code: |
-    @nonfinite @assert throws TypeError ctx.createLinearGradient(<0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <1 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>);
-    t.done();
-
-- name: 2d.gradient.linear.transform.1
-  desc: Linear gradient coordinates are relative to the coordinate space at the time of filling
-  testing:
-    - 2d.gradient.linear.transform
-  code: |
-    var g = ctx.createLinearGradient(0, 0, 200, 0);
-    g.addColorStop(0, '#f00');
-    g.addColorStop(0.25, '#0f0');
-    g.addColorStop(0.75, '#0f0');
-    g.addColorStop(1, '#f00');
-    ctx.fillStyle = g;
-    ctx.translate(-50, 0);
-    ctx.fillRect(50, 0, 100, 50);
-    @assert pixel 25,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 75,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.gradient.linear.transform.2
-  desc: Linear gradient coordinates are relative to the coordinate space at the time of filling
-  testing:
-    - 2d.gradient.linear.transform
-  code: |
-    ctx.translate(100, 0);
-    var g = ctx.createLinearGradient(0, 0, 200, 0);
-    g.addColorStop(0, '#f00');
-    g.addColorStop(0.25, '#0f0');
-    g.addColorStop(0.75, '#0f0');
-    g.addColorStop(1, '#f00');
-    ctx.fillStyle = g;
-    ctx.translate(-150, 0);
-    ctx.fillRect(50, 0, 100, 50);
-    @assert pixel 25,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 75,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.gradient.linear.transform.3
-  desc: Linear gradient transforms do not experience broken caching effects
-  testing:
-    - 2d.gradient.linear.transform
-  code: |
-    var g = ctx.createLinearGradient(0, 0, 200, 0);
-    g.addColorStop(0, '#f00');
-    g.addColorStop(0.25, '#0f0');
-    g.addColorStop(0.75, '#0f0');
-    g.addColorStop(1, '#f00');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.translate(-50, 0);
-    ctx.fillRect(50, 0, 100, 50);
-    @assert pixel 25,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 75,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.gradient.radial.negative
-  desc: createRadialGradient() throws INDEX_SIZE_ERR if either radius is negative
-  testing:
-    - 2d.gradient.radial.negative
-  code: |
-    @assert throws INDEX_SIZE_ERR ctx.createRadialGradient(0, 0, -0.1, 0, 0, 1);
-    @assert throws INDEX_SIZE_ERR ctx.createRadialGradient(0, 0, 1, 0, 0, -0.1);
-    @assert throws INDEX_SIZE_ERR ctx.createRadialGradient(0, 0, -0.1, 0, 0, -0.1);
-    t.done();
-- name: 2d.gradient.radial.nonfinite
-
-  desc: createRadialGradient() throws TypeError if arguments are not finite
-  testing:
-    - 2d.gradient.radial.nonfinite
-  code: |
-    @nonfinite @assert throws TypeError ctx.createRadialGradient(<0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <1 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <1 Infinity -Infinity NaN>);
-    t.done();
-
-- name: 2d.gradient.radial.inside1
-  testing:
-    - 2d.gradient.radial.rendering
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    var g = ctx.createRadialGradient(50, 25, 100, 50, 25, 200);
-    g.addColorStop(0, '#0f0');
-    g.addColorStop(1, '#f00');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 50,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 98,25 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 50,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-    t.done();
-
-- name: 2d.gradient.radial.inside2
-  testing:
-    - 2d.gradient.radial.rendering
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    var g = ctx.createRadialGradient(50, 25, 200, 50, 25, 100);
-    g.addColorStop(0, '#f00');
-    g.addColorStop(1, '#0f0');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 50,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 98,25 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 50,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-    t.done();
-
-- name: 2d.gradient.radial.inside3
-  testing:
-    - 2d.gradient.radial.rendering
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    var g = ctx.createRadialGradient(50, 25, 200, 50, 25, 100);
-    g.addColorStop(0, '#f00');
-    g.addColorStop(0.993, '#f00');
-    g.addColorStop(1, '#0f0');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 50,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 98,25 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 50,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-    t.done();
-
-- name: 2d.gradient.radial.outside1
-  testing:
-    - 2d.gradient.radial.rendering
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    var g = ctx.createRadialGradient(200, 25, 10, 200, 25, 20);
-    g.addColorStop(0, '#f00');
-    g.addColorStop(1, '#0f0');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 50,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 98,25 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 50,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-    t.done();
-
-- name: 2d.gradient.radial.outside2
-  testing:
-    - 2d.gradient.radial.rendering
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    var g = ctx.createRadialGradient(200, 25, 20, 200, 25, 10);
-    g.addColorStop(0, '#0f0');
-    g.addColorStop(1, '#f00');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 50,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 98,25 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 50,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-    t.done();
-
-- name: 2d.gradient.radial.outside3
-  testing:
-    - 2d.gradient.radial.rendering
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    var g = ctx.createRadialGradient(200, 25, 20, 200, 25, 10);
-    g.addColorStop(0, '#0f0');
-    g.addColorStop(0.001, '#f00');
-    g.addColorStop(1, '#f00');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 50,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 98,25 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 50,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-    t.done();
-
-- name: 2d.gradient.radial.touch1
-  testing:
-    - 2d.gradient.radial.rendering
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    var g = ctx.createRadialGradient(150, 25, 50, 200, 25, 100);
-    g.addColorStop(0, '#f00');
-    g.addColorStop(1, '#f00');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 1,1 == 0,255,0,255; @moz-todo
-    @assert pixel 50,1 == 0,255,0,255; @moz-todo
-    @assert pixel 98,1 == 0,255,0,255; @moz-todo
-    @assert pixel 1,25 == 0,255,0,255; @moz-todo
-    @assert pixel 50,25 == 0,255,0,255; @moz-todo
-    @assert pixel 98,25 == 0,255,0,255; @moz-todo
-    @assert pixel 1,48 == 0,255,0,255; @moz-todo
-    @assert pixel 50,48 == 0,255,0,255; @moz-todo
-    @assert pixel 98,48 == 0,255,0,255; @moz-todo
-    t.done();
-
-- name: 2d.gradient.radial.touch2
-  testing:
-    - 2d.gradient.radial.rendering
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    var g = ctx.createRadialGradient(-80, 25, 70, 0, 25, 150);
-    g.addColorStop(0, '#f00');
-    g.addColorStop(0.01, '#0f0');
-    g.addColorStop(0.99, '#0f0');
-    g.addColorStop(1, '#f00');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 50,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 98,25 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 50,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-    t.done();
-
-- name: 2d.gradient.radial.touch3
-  testing:
-    - 2d.gradient.radial.rendering
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    var g = ctx.createRadialGradient(120, -15, 25, 140, -30, 50);
-    g.addColorStop(0, '#f00');
-    g.addColorStop(1, '#f00');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 1,1 == 0,255,0,255; @moz-todo
-    @assert pixel 50,1 == 0,255,0,255; @moz-todo
-    @assert pixel 98,1 == 0,255,0,255; @moz-todo
-    @assert pixel 1,25 == 0,255,0,255; @moz-todo
-    @assert pixel 50,25 == 0,255,0,255; @moz-todo
-    @assert pixel 98,25 == 0,255,0,255; @moz-todo
-    @assert pixel 1,48 == 0,255,0,255; @moz-todo
-    @assert pixel 50,48 == 0,255,0,255; @moz-todo
-    @assert pixel 98,48 == 0,255,0,255; @moz-todo
-    t.done();
-
-- name: 2d.gradient.radial.equal
-  testing:
-    - 2d.gradient.radial.equal
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    var g = ctx.createRadialGradient(50, 25, 20, 50, 25, 20);
-    g.addColorStop(0, '#f00');
-    g.addColorStop(1, '#f00');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 1,1 == 0,255,0,255; @moz-todo
-    @assert pixel 50,1 == 0,255,0,255; @moz-todo
-    @assert pixel 98,1 == 0,255,0,255; @moz-todo
-    @assert pixel 1,25 == 0,255,0,255; @moz-todo
-    @assert pixel 50,25 == 0,255,0,255; @moz-todo
-    @assert pixel 98,25 == 0,255,0,255; @moz-todo
-    @assert pixel 1,48 == 0,255,0,255; @moz-todo
-    @assert pixel 50,48 == 0,255,0,255; @moz-todo
-    @assert pixel 98,48 == 0,255,0,255; @moz-todo
-    t.done();
-
-- name: 2d.gradient.radial.cone.behind
-  testing:
-    - 2d.gradient.radial.rendering
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    var g = ctx.createRadialGradient(120, 25, 10, 211, 25, 100);
-    g.addColorStop(0, '#f00');
-    g.addColorStop(1, '#f00');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 1,1 == 0,255,0,255; @moz-todo
-    @assert pixel 50,1 == 0,255,0,255; @moz-todo
-    @assert pixel 98,1 == 0,255,0,255; @moz-todo
-    @assert pixel 1,25 == 0,255,0,255; @moz-todo
-    @assert pixel 50,25 == 0,255,0,255; @moz-todo
-    @assert pixel 98,25 == 0,255,0,255; @moz-todo
-    @assert pixel 1,48 == 0,255,0,255; @moz-todo
-    @assert pixel 50,48 == 0,255,0,255; @moz-todo
-    @assert pixel 98,48 == 0,255,0,255; @moz-todo
-    t.done();
-
-- name: 2d.gradient.radial.cone.front
-  testing:
-    - 2d.gradient.radial.rendering
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    var g = ctx.createRadialGradient(311, 25, 10, 210, 25, 100);
-    g.addColorStop(0, '#f00');
-    g.addColorStop(1, '#0f0');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 50,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 98,25 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 50,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-    t.done();
-
-- name: 2d.gradient.radial.cone.bottom
-  testing:
-    - 2d.gradient.radial.rendering
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    var g = ctx.createRadialGradient(210, 25, 100, 230, 25, 101);
-    g.addColorStop(0, '#0f0');
-    g.addColorStop(1, '#f00');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 50,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 98,25 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 50,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-    t.done();
-
-- name: 2d.gradient.radial.cone.top
-  testing:
-    - 2d.gradient.radial.rendering
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    var g = ctx.createRadialGradient(230, 25, 100, 100, 25, 101);
-    g.addColorStop(0, '#f00');
-    g.addColorStop(1, '#0f0');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 50,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 98,25 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 50,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-    t.done();
-
-- name: 2d.gradient.radial.cone.beside
-  testing:
-    - 2d.gradient.radial.rendering
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    var g = ctx.createRadialGradient(0, 100, 40, 100, 100, 50);
-    g.addColorStop(0, '#f00');
-    g.addColorStop(1, '#f00');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 1,1 == 0,255,0,255; @moz-todo
-    @assert pixel 50,1 == 0,255,0,255; @moz-todo
-    @assert pixel 98,1 == 0,255,0,255; @moz-todo
-    @assert pixel 1,25 == 0,255,0,255; @moz-todo
-    @assert pixel 50,25 == 0,255,0,255; @moz-todo
-    @assert pixel 98,25 == 0,255,0,255; @moz-todo
-    @assert pixel 1,48 == 0,255,0,255; @moz-todo
-    @assert pixel 50,48 == 0,255,0,255; @moz-todo
-    @assert pixel 98,48 == 0,255,0,255; @moz-todo
-    t.done();
-
-- name: 2d.gradient.radial.cone.cylinder
-  testing:
-    - 2d.gradient.radial.rendering
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    var g = ctx.createRadialGradient(210, 25, 100, 230, 25, 100);
-    g.addColorStop(0, '#0f0');
-    g.addColorStop(1, '#f00');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 50,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 98,25 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 50,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-    t.done();
-
-- name: 2d.gradient.radial.cone.shape1
-  testing:
-    - 2d.gradient.radial.rendering
-  code: |
-    var tol = 1; // tolerance to avoid antialiasing artifacts
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#f00';
-    ctx.beginPath();
-    ctx.moveTo(30+tol, 40);
-    ctx.lineTo(110, -20+tol);
-    ctx.lineTo(110, 100-tol);
-    ctx.fill();
-    var g = ctx.createRadialGradient(30+10*5/2, 40, 10*3/2, 30+10*15/4, 40, 10*9/4);
-    g.addColorStop(0, '#0f0');
-    g.addColorStop(1, '#0f0');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 50,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 98,25 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 50,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-    t.done();
-
-- name: 2d.gradient.radial.cone.shape2
-  testing:
-    - 2d.gradient.radial.rendering
-  code: |
-    var tol = 1; // tolerance to avoid antialiasing artifacts
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    var g = ctx.createRadialGradient(30+10*5/2, 40, 10*3/2, 30+10*15/4, 40, 10*9/4);
-    g.addColorStop(0, '#f00');
-    g.addColorStop(1, '#f00');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.beginPath();
-    ctx.moveTo(30-tol, 40);
-    ctx.lineTo(110, -20-tol);
-    ctx.lineTo(110, 100+tol);
-    ctx.fill();
-    @assert pixel 1,1 == 0,255,0,255; @moz-todo
-    @assert pixel 50,1 == 0,255,0,255; @moz-todo
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,25 == 0,255,0,255; @moz-todo
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 98,25 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255; @moz-todo
-    @assert pixel 50,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-    t.done();
-
-- name: 2d.gradient.radial.transform.1
-  desc: Radial gradient coordinates are relative to the coordinate space at the time of filling
-  testing:
-    - 2d.gradient.radial.transform
-  code: |
-    var g = ctx.createRadialGradient(0, 0, 0, 0, 0, 11.2);
-    g.addColorStop(0, '#0f0');
-    g.addColorStop(0.5, '#0f0');
-    g.addColorStop(0.51, '#f00');
-    g.addColorStop(1, '#f00');
-    ctx.fillStyle = g;
-    ctx.translate(50, 25);
-    ctx.scale(10, 10);
-    ctx.fillRect(-5, -2.5, 10, 5);
-    @assert pixel 25,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 75,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.gradient.radial.transform.2
-  desc: Radial gradient coordinates are relative to the coordinate space at the time of filling
-  testing:
-    - 2d.gradient.radial.transform
-  code: |
-    ctx.translate(100, 0);
-    var g = ctx.createRadialGradient(0, 0, 0, 0, 0, 11.2);
-    g.addColorStop(0, '#0f0');
-    g.addColorStop(0.5, '#0f0');
-    g.addColorStop(0.51, '#f00');
-    g.addColorStop(1, '#f00');
-    ctx.fillStyle = g;
-    ctx.translate(-50, 25);
-    ctx.scale(10, 10);
-    ctx.fillRect(-5, -2.5, 10, 5);
-    @assert pixel 25,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 75,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.gradient.radial.transform.3
-  desc: Radial gradient transforms do not experience broken caching effects
-  testing:
-    - 2d.gradient.radial.transform
-  code: |
-    var g = ctx.createRadialGradient(0, 0, 0, 0, 0, 11.2);
-    g.addColorStop(0, '#0f0');
-    g.addColorStop(0.5, '#0f0');
-    g.addColorStop(0.51, '#f00');
-    g.addColorStop(1, '#f00');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.translate(50, 25);
-    ctx.scale(10, 10);
-    ctx.fillRect(-5, -2.5, 10, 5);
-    @assert pixel 25,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 75,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.pattern.basic.image
-  testing:
-    - 2d.pattern.painting
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    var promise = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/green.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    promise.then(function(response) {
-        createImageBitmap(response).then(bitmap => {
-            var pattern = ctx.createPattern(bitmap, 'no-repeat');
-            ctx.fillStyle = pattern;
-            ctx.fillRect(0, 0, 100, 50);
-            @assert pixel 1,1 == 0,255,0,255;
-            @assert pixel 98,1 == 0,255,0,255;
-            @assert pixel 1,48 == 0,255,0,255;
-            @assert pixel 98,48 == 0,255,0,255;
-        }, t_fail);
-    }).then(t_pass, t_fail);
-
-- name: 2d.pattern.basic.canvas
-  testing:
-    - 2d.pattern.painting
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    var offscreenCanvas2 = new OffscreenCanvas(100, 50);
-    var ctx2 = offscreenCanvas2.getContext('2d');
-    ctx2.fillStyle = '#0f0';
-    ctx2.fillRect(0, 0, 100, 50);
-    var pattern = ctx.createPattern(offscreenCanvas2, 'no-repeat');
-    ctx.fillStyle = pattern;
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 50,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 98,25 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 50,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-    t.done();
-
-- name: 2d.pattern.basic.zerocanvas
-  testing:
-    - 2d.pattern.zerocanvas
-  code: |
-    offscreenCanvas.width = 0;
-    offscreenCanvas.height = 10;
-    @assert offscreenCanvas.width === 0;
-    @assert offscreenCanvas.height === 10;
-    @assert throws INVALID_STATE_ERR ctx.createPattern(offscreenCanvas, 'repeat');
-    offscreenCanvas.width = 10;
-    offscreenCanvas.height = 0;
-    @assert offscreenCanvas.width === 10;
-    @assert offscreenCanvas.height === 0;
-    @assert throws INVALID_STATE_ERR ctx.createPattern(offscreenCanvas, 'repeat');
-    offscreenCanvas.width = 0;
-    offscreenCanvas.height = 0;
-    @assert offscreenCanvas.width === 0;
-    @assert offscreenCanvas.height === 0;
-    @assert throws INVALID_STATE_ERR ctx.createPattern(offscreenCanvas, 'repeat');
-    t.done();
-
-- name: 2d.pattern.basic.nocontext
-  testing:
-    - 2d.pattern.painting
-  code: |
-    var offscreenCanvas2 = new OffscreenCanvas(100, 50);
-    var pattern = ctx.createPattern(offscreenCanvas2, 'no-repeat');
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#f00';
-    ctx.fillStyle = pattern;
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-    t.done();
-
-- name: 2d.pattern.image.undefined
-  testing:
-    - 2d.pattern.IDL
-  code: |
-    @assert throws TypeError ctx.createPattern(undefined, 'repeat');
-    t.done();
-
-- name: 2d.pattern.image.null
-  testing:
-    - 2d.pattern.IDL
-  code: |
-    @assert throws TypeError ctx.createPattern(null, 'repeat');
-    t.done();
-
-- name: 2d.pattern.image.string
-  testing:
-    - 2d.pattern.IDL
-  code: |
-    @assert throws TypeError ctx.createPattern('../images/red.png', 'repeat');
-    t.done();
-
-- name: 2d.pattern.repeat.empty
-  testing:
-    - 2d.pattern.missing
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    var promise = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/green-1x1.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    promise.then(function(response) {
-        createImageBitmap(response).then(bitmap => {
-            var pattern = ctx.createPattern(bitmap, "");
-            ctx.fillStyle = pattern;
-            ctx.fillRect(0, 0, 200, 50);
-            @assert pixel 1,1 == 0,255,0,255;
-            @assert pixel 98,1 == 0,255,0,255;
-            @assert pixel 1,48 == 0,255,0,255;
-            @assert pixel 98,48 == 0,255,0,255;
-        }, t_fail);
-    }).then(t_pass, t_fail);
-
-- name: 2d.pattern.repeat.null
-  testing:
-    - 2d.pattern.unrecognised
-  code: |
-    @assert ctx.createPattern(offscreenCanvas, null) != null;
-    t.done();
-
-- name: 2d.pattern.repeat.undefined
-  testing:
-    - 2d.pattern.unrecognised
-  code: |
-    @assert throws SYNTAX_ERR ctx.createPattern(offscreenCanvas, undefined);
-    t.done();
-
-- name: 2d.pattern.repeat.unrecognised
-  testing:
-    - 2d.pattern.unrecognised
-  code: |
-    @assert throws SYNTAX_ERR ctx.createPattern(offscreenCanvas, "invalid");
-    t.done();
-
-- name: 2d.pattern.repeat.unrecognisednull
-  testing:
-    - 2d.pattern.unrecognised
-  code: |
-    @assert throws SYNTAX_ERR ctx.createPattern(offscreenCanvas, "null");
-    t.done();
-
-- name: 2d.pattern.repeat.case
-  testing:
-    - 2d.pattern.exact
-  code: |
-    @assert throws SYNTAX_ERR ctx.createPattern(offscreenCanvas, "Repeat");
-    t.done();
-
-- name: 2d.pattern.repeat.nullsuffix
-  testing:
-    - 2d.pattern.exact
-  code: |
-    @assert throws SYNTAX_ERR ctx.createPattern(offscreenCanvas, "repeat\0");
-    t.done();
-
-- name: 2d.pattern.modify.canvas1
-  testing:
-    - 2d.pattern.modify
-  code: |
-    var offscreenCanvas2 = new OffscreenCanvas(100, 50);
-    var ctx2 = offscreenCanvas2.getContext('2d');
-    ctx2.fillStyle = '#0f0';
-    ctx2.fillRect(0, 0, 100, 50);
-    var pattern = ctx.createPattern(offscreenCanvas2, 'no-repeat');
-    ctx2.fillStyle = '#f00';
-    ctx2.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = pattern;
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-    t.done();
-
-- name: 2d.pattern.modify.canvas2
-  testing:
-    - 2d.pattern.modify
-  code: |
-    var offscreenCanvas2 = new OffscreenCanvas(100, 50);
-    var ctx2 = offscreenCanvas2.getContext('2d');
-    ctx2.fillStyle = '#0f0';
-    ctx2.fillRect(0, 0, 100, 50);
-    var pattern = ctx.createPattern(offscreenCanvas2, 'no-repeat');
-    ctx.fillStyle = pattern;
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx2.fillStyle = '#f00';
-    ctx2.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = pattern;
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-    t.done();
-
-- name: 2d.pattern.crosscanvas
-  code: |
-    var promise = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/green.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    promise.then(function(response) {
-        createImageBitmap(response).then(bitmap => {
-            var offscreenCanvas2 = new OffscreenCanvas(100, 50);
-            var pattern = offscreenCanvas2.getContext('2d').createPattern(bitmap, 'no-repeat');
-            ctx.fillStyle = '#f00';
-            ctx.fillRect(0, 0, 100, 50);
-            ctx.fillStyle = pattern;
-            ctx.fillRect(0, 0, 100, 50);
-            @assert pixel 50,25 == 0,255,0,255;
-        }, t_fail);
-    }).then(t_pass, t_fail);
-
-- name: 2d.pattern.paint.norepeat.basic
-  testing:
-    - 2d.pattern.painting
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    var promise = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/green.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    promise.then(function(response) {
-        createImageBitmap(response).then(bitmap => {
-            var pattern = ctx.createPattern(bitmap, 'no-repeat');
-            ctx.fillStyle = pattern;
-            ctx.fillRect(0, 0, 100, 50);
-            @assert pixel 1,1 == 0,255,0,255;
-            @assert pixel 98,1 == 0,255,0,255;
-            @assert pixel 1,48 == 0,255,0,255;
-            @assert pixel 98,48 == 0,255,0,255;
-        }, t_fail);
-    }).then(t_pass, t_fail);
-
-- name: 2d.pattern.paint.norepeat.outside
-  testing:
-    - 2d.pattern.painting
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    var promise = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/red.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    promise.then(function(response) {
-        createImageBitmap(response).then(bitmap => {
-            var pattern = ctx.createPattern(bitmap, 'no-repeat');
-            ctx.fillStyle = '#0f0';
-            ctx.fillRect(0, 0, 100, 50);
-            ctx.fillStyle = pattern;
-            ctx.fillRect(0, -50, 100, 50);
-            ctx.fillRect(-100, 0, 100, 50);
-            ctx.fillRect(0, 50, 100, 50);
-            ctx.fillRect(100, 0, 100, 50);
-            @assert pixel 1,1 == 0,255,0,255;
-            @assert pixel 98,1 == 0,255,0,255;
-            @assert pixel 1,48 == 0,255,0,255;
-            @assert pixel 98,48 == 0,255,0,255;
-        }, t_fail);
-    }).then(t_pass, t_fail);
-
-- name: 2d.pattern.paint.norepeat.coord1
-  testing:
-    - 2d.pattern.painting
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 50, 50);
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(50, 0, 50, 50);
-    var promise = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/green.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    promise.then(function(response) {
-        createImageBitmap(response).then(bitmap => {
-            var pattern = ctx.createPattern(bitmap, 'no-repeat');
-            ctx.fillStyle = pattern;
-            ctx.translate(50, 0);
-            ctx.fillRect(-50, 0, 100, 50);
-            @assert pixel 1,1 == 0,255,0,255;
-            @assert pixel 98,1 == 0,255,0,255;
-            @assert pixel 1,48 == 0,255,0,255;
-            @assert pixel 98,48 == 0,255,0,255;
-        }, t_fail);
-    }).then(t_pass, t_fail);
-
-- name: 2d.pattern.paint.norepeat.coord2
-  testing:
-    - 2d.pattern.painting
-  code: |
-    var promise = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/green.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    promise.then(function(response) {
-        createImageBitmap(response).then(bitmap => {
-            var pattern = ctx.createPattern(bitmap, 'no-repeat');
-            ctx.fillStyle = pattern;
-            ctx.fillRect(0, 0, 50, 50);
-            ctx.fillStyle = '#f00';
-            ctx.fillRect(50, 0, 50, 50);
-            ctx.fillStyle = pattern;
-            ctx.translate(50, 0);
-            ctx.fillRect(-50, 0, 100, 50);
-            @assert pixel 1,1 == 0,255,0,255;
-            @assert pixel 98,1 == 0,255,0,255;
-            @assert pixel 1,48 == 0,255,0,255;
-            @assert pixel 98,48 == 0,255,0,255;
-        }, t_fail);
-    }).then(t_pass, t_fail);
-
-- name: 2d.pattern.paint.norepeat.coord3
-  testing:
-    - 2d.pattern.painting
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    var promise = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/red.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    promise.then(function(response) {
-        createImageBitmap(response).then(bitmap => {
-            var pattern = ctx.createPattern(bitmap, 'no-repeat');
-            ctx.fillStyle = pattern;
-            ctx.translate(50, 25);
-            ctx.fillRect(-50, -25, 100, 50);
-            ctx.fillStyle = '#0f0';
-            ctx.fillRect(0, 0, 50, 25);
-            @assert pixel 1,1 == 0,255,0,255;
-            @assert pixel 98,1 == 0,255,0,255;
-            @assert pixel 1,48 == 0,255,0,255;
-            @assert pixel 98,48 == 0,255,0,255;
-        }, t_fail);
-    }).then(t_pass, t_fail);
-
-- name: 2d.pattern.paint.repeat.basic
-  testing:
-    - 2d.pattern.painting
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    var promise = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/green-16x16.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    promise.then(function(response) {
-        createImageBitmap(response).then(bitmap => {
-            var pattern = ctx.createPattern(bitmap, 'no-repeat');
-            ctx.fillStyle = pattern;
-            ctx.fillRect(0, 0, 100, 50);
-            @assert pixel 1,1 == 0,255,0,255;
-            @assert pixel 98,1 == 0,255,0,255;
-            @assert pixel 1,48 == 0,255,0,255;
-            @assert pixel 98,48 == 0,255,0,255;
-        }, t_fail);
-    }).then(t_pass, t_fail);
-
-- name: 2d.pattern.paint.repeat.outside
-  testing:
-    - 2d.pattern.painting
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    var promise = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/green-16x16.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    promise.then(function(response) {
-        createImageBitmap(response).then(bitmap => {
-            var pattern = ctx.createPattern(bitmap, 'no-repeat');
-            ctx.fillStyle = pattern;
-            ctx.translate(50, 25);
-            ctx.fillRect(-50, -25, 100, 50);
-            @assert pixel 1,1 == 0,255,0,255;
-            @assert pixel 98,1 == 0,255,0,255;
-            @assert pixel 1,48 == 0,255,0,255;
-            @assert pixel 98,48 == 0,255,0,255;
-        }, t_fail);
-    }).then(t_pass, t_fail);
-
-- name: 2d.pattern.paint.repeat.coord1
-  testing:
-    - 2d.pattern.painting
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    var promise = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/rgrg-256x256.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    promise.then(function(response) {
-        createImageBitmap(response).then(bitmap => {
-            var pattern = ctx.createPattern(bitmap, 'no-repeat');
-            ctx.fillStyle = pattern;
-            ctx.translate(-128, -78);
-            ctx.fillRect(128, 78, 100, 50);
-            @assert pixel 1,1 == 0,255,0,255;
-            @assert pixel 98,1 == 0,255,0,255;
-            @assert pixel 1,48 == 0,255,0,255;
-            @assert pixel 98,48 == 0,255,0,255;
-        }, t_fail);
-    }).then(t_pass, t_fail);
-
-- name: 2d.pattern.paint.repeat.coord2
-  testing:
-    - 2d.pattern.painting
-  code: |
-    var promise = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/grgr-256x256.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    promise.then(function(response) {
-        createImageBitmap(response).then(bitmap => {
-            var pattern = ctx.createPattern(bitmap, 'no-repeat');
-            ctx.fillStyle = pattern;
-            ctx.fillRect(0, 0, 100, 50);
-            @assert pixel 1,1 == 0,255,0,255;
-            @assert pixel 98,1 == 0,255,0,255;
-            @assert pixel 1,48 == 0,255,0,255;
-            @assert pixel 98,48 == 0,255,0,255;
-        }, t_fail);
-    }).then(t_pass, t_fail);
-
-- name: 2d.pattern.paint.repeat.coord3
-  testing:
-    - 2d.pattern.painting
-  code: |
-    var promise = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/rgrg-256x256.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    promise.then(function(response) {
-        createImageBitmap(response).then(bitmap => {
-            var pattern = ctx.createPattern(bitmap, 'no-repeat');
-            ctx.fillStyle = pattern;
-            ctx.fillRect(0, 0, 100, 50);
-            ctx.translate(-128, -78);
-            ctx.fillRect(128, 78, 100, 50);
-            @assert pixel 1,1 == 0,255,0,255;
-            @assert pixel 98,1 == 0,255,0,255;
-            @assert pixel 1,48 == 0,255,0,255;
-            @assert pixel 98,48 == 0,255,0,255;
-        }, t_fail);
-    }).then(t_pass, t_fail);
-
-- name: 2d.pattern.paint.repeatx.basic
-  testing:
-    - 2d.pattern.painting
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 16);
-    var promise = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/green-16x16.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    promise.then(function(response) {
-        createImageBitmap(response).then(bitmap => {
-            var pattern = ctx.createPattern(bitmap, 'repeat-x');
-            ctx.fillStyle = pattern;
-            ctx.fillRect(0, 0, 100, 50);
-            @assert pixel 1,1 == 0,255,0,255;
-            @assert pixel 98,1 == 0,255,0,255;
-            @assert pixel 1,48 == 0,255,0,255;
-            @assert pixel 98,48 == 0,255,0,255;
-        }, t_fail);
-    }).then(t_pass, t_fail);
-
-- name: 2d.pattern.paint.repeatx.outside
-  testing:
-    - 2d.pattern.painting
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    var promise = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/red-16x16.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    promise.then(function(response) {
-        createImageBitmap(response).then(bitmap => {
-            var pattern = ctx.createPattern(bitmap, 'repeat-x');
-            ctx.fillStyle = pattern;
-            ctx.fillRect(0, 0, 100, 50);
-            ctx.fillStyle = '#0f0';
-            ctx.fillRect(0, 0, 100, 16);
-            @assert pixel 1,1 == 0,255,0,255;
-            @assert pixel 98,1 == 0,255,0,255;
-            @assert pixel 1,48 == 0,255,0,255;
-            @assert pixel 98,48 == 0,255,0,255;
-        }, t_fail);
-    }).then(t_pass, t_fail);
-
-- name: 2d.pattern.paint.repeatx.coord1
-  testing:
-    - 2d.pattern.painting
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    var promise = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/red-16x16.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    promise.then(function(response) {
-        createImageBitmap(response).then(bitmap => {
-            var pattern = ctx.createPattern(bitmap, 'repeat-x');
-            ctx.fillStyle = pattern;
-            ctx.translate(0, 16);
-            ctx.fillRect(0, -16, 100, 50);
-            ctx.fillStyle = '#0f0';
-            ctx.fillRect(0, 0, 100, 16);
-            @assert pixel 1,1 == 0,255,0,255;
-            @assert pixel 98,1 == 0,255,0,255;
-            @assert pixel 1,25 == 0,255,0,255;
-            @assert pixel 98,25 == 0,255,0,255;
-            @assert pixel 1,48 == 0,255,0,255;
-            @assert pixel 98,48 == 0,255,0,255;
-        }, t_fail);
-    }).then(t_pass, t_fail);
-
-- name: 2d.pattern.paint.repeaty.basic
-  testing:
-    - 2d.pattern.painting
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 16, 50);
-    var promise = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/green-16x16.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    promise.then(function(response) {
-        createImageBitmap(response).then(bitmap => {
-            var pattern = ctx.createPattern(bitmap, 'repeat-y');
-            ctx.fillStyle = pattern;
-            ctx.fillRect(0, 0, 100, 50);
-            @assert pixel 1,1 == 0,255,0,255;
-            @assert pixel 98,1 == 0,255,0,255;
-            @assert pixel 1,48 == 0,255,0,255;
-            @assert pixel 98,48 == 0,255,0,255;
-        }, t_fail);
-    }).then(t_pass, t_fail);
-
-- name: 2d.pattern.paint.repeaty.outside
-  testing:
-    - 2d.pattern.painting
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    var promise = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/red-16x16.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    promise.then(function(response) {
-        createImageBitmap(response).then(bitmap => {
-            var pattern = ctx.createPattern(bitmap, 'repeat-y');
-            ctx.fillStyle = pattern;
-            ctx.fillRect(0, 0, 100, 50);
-            ctx.fillStyle = '#0f0';
-            ctx.fillRect(0, 0, 16, 50);
-            @assert pixel 1,1 == 0,255,0,255;
-            @assert pixel 98,1 == 0,255,0,255;
-            @assert pixel 1,48 == 0,255,0,255;
-            @assert pixel 98,48 == 0,255,0,255;
-        }, t_fail);
-    }).then(t_pass, t_fail);
-
-- name: 2d.pattern.paint.repeaty.coord1
-  testing:
-    - 2d.pattern.painting
-  images:
-    - red-16x16.png
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    var promise = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/red-16x16.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    promise.then(function(response) {
-        createImageBitmap(response).then(bitmap => {
-            var pattern = ctx.createPattern(bitmap, 'repeat-y');
-            ctx.fillStyle = pattern;
-            ctx.translate(48, 0);
-            ctx.fillRect(-48, 0, 100, 50);
-            ctx.fillStyle = '#0f0';
-            ctx.fillRect(0, 0, 16, 50);
-            @assert pixel 1,1 == 0,255,0,255;
-            @assert pixel 50,1 == 0,255,0,255;
-            @assert pixel 98,1 == 0,255,0,255;
-            @assert pixel 1,48 == 0,255,0,255;
-            @assert pixel 50,48 == 0,255,0,255;
-            @assert pixel 98,48 == 0,255,0,255;
-        }, t_fail);
-    }).then(t_pass, t_fail);
-
-- name: 2d.pattern.paint.orientation.image
-  desc: Image patterns do not get flipped when painted
-  testing:
-    - 2d.pattern.painting
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    var promise = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/rrgg-256x256.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    promise.then(function(response) {
-        createImageBitmap(response).then(bitmap => {
-            var pattern = ctx.createPattern(bitmap, 'no-repeat');
-            ctx.fillStyle = pattern;
-            ctx.save();
-            ctx.translate(0, -103);
-            ctx.fillRect(0, 103, 100, 50);
-            ctx.restore();
-            ctx.fillStyle = '#0f0';
-            ctx.fillRect(0, 0, 100, 25);
-            @assert pixel 1,1 == 0,255,0,255;
-            @assert pixel 98,1 == 0,255,0,255;
-            @assert pixel 1,48 == 0,255,0,255;
-            @assert pixel 98,48 == 0,255,0,255;
-        }, t_fail);
-    }).then(t_pass, t_fail);
-
-- name: 2d.pattern.paint.orientation.canvas
-  desc: Canvas patterns do not get flipped when painted
-  testing:
-    - 2d.pattern.painting
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    var offscreenCanvas2 = new OffscreenCanvas(100, 50);
-    var ctx2 = offscreenCanvas2.getContext('2d');
-    ctx2.fillStyle = '#f00';
-    ctx2.fillRect(0, 0, 100, 25);
-    ctx2.fillStyle = '#0f0';
-    ctx2.fillRect(0, 25, 100, 25);
-    var pattern = ctx.createPattern(offscreenCanvas2, 'no-repeat');
-    ctx.fillStyle = pattern;
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 25);
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-    t.done();
-
-- name: 2d.shadow.attributes.shadowBlur.initial
-  testing:
-    - 2d.shadow.blur.get
-    - 2d.shadow.blur.initial
-  code: |
-    @assert ctx.shadowBlur === 0;
-    t.done();
-
-- name: 2d.shadow.attributes.shadowBlur.valid
-  testing:
-    - 2d.shadow.blur.get
-    - 2d.shadow.blur.set
-  code: |
-    ctx.shadowBlur = 1;
-    @assert ctx.shadowBlur === 1;
-    ctx.shadowBlur = 0.5;
-    @assert ctx.shadowBlur === 0.5;
-    ctx.shadowBlur = 1e6;
-    @assert ctx.shadowBlur === 1e6;
-    ctx.shadowBlur = 0;
-    @assert ctx.shadowBlur === 0;
-    t.done();
-
-- name: 2d.shadow.attributes.shadowBlur.invalid
-  testing:
-    - 2d.shadow.blur.invalid
-  code: |
-    ctx.shadowBlur = 1;
-    ctx.shadowBlur = -2;
-    @assert ctx.shadowBlur === 1;
-    ctx.shadowBlur = 1;
-    ctx.shadowBlur = Infinity;
-    @assert ctx.shadowBlur === 1;
-    ctx.shadowBlur = 1;
-    ctx.shadowBlur = -Infinity;
-    @assert ctx.shadowBlur === 1;
-    ctx.shadowBlur = 1;
-    ctx.shadowBlur = NaN;
-    @assert ctx.shadowBlur === 1;
-    t.done();
-
-- name: 2d.shadow.attributes.shadowOffset.initial
-  testing:
-    - 2d.shadow.offset.initial
-  code: |
-    @assert ctx.shadowOffsetX === 0;
-    @assert ctx.shadowOffsetY === 0;
-    t.done();
-
-- name: 2d.shadow.attributes.shadowOffset.valid
-  testing:
-    - 2d.shadow.offset.get
-    - 2d.shadow.offset.set
-  code: |
-    ctx.shadowOffsetX = 1;
-    ctx.shadowOffsetY = 2;
-    @assert ctx.shadowOffsetX === 1;
-    @assert ctx.shadowOffsetY === 2;
-    ctx.shadowOffsetX = 0.5;
-    ctx.shadowOffsetY = 0.25;
-    @assert ctx.shadowOffsetX === 0.5;
-    @assert ctx.shadowOffsetY === 0.25;
-    ctx.shadowOffsetX = -0.5;
-    ctx.shadowOffsetY = -0.25;
-    @assert ctx.shadowOffsetX === -0.5;
-    @assert ctx.shadowOffsetY === -0.25;
-    ctx.shadowOffsetX = 0;
-    ctx.shadowOffsetY = 0;
-    @assert ctx.shadowOffsetX === 0;
-    @assert ctx.shadowOffsetY === 0;
-    ctx.shadowOffsetX = 1e6;
-    ctx.shadowOffsetY = 1e6;
-    @assert ctx.shadowOffsetX === 1e6;
-    @assert ctx.shadowOffsetY === 1e6;
-    t.done();
-
-- name: 2d.shadow.attributes.shadowOffset.invalid
-  testing:
-    - 2d.shadow.offset.invalid
-  code: |
-    ctx.shadowOffsetX = 1;
-    ctx.shadowOffsetY = 2;
-    ctx.shadowOffsetX = Infinity;
-    ctx.shadowOffsetY = Infinity;
-    @assert ctx.shadowOffsetX === 1;
-    @assert ctx.shadowOffsetY === 2;
-    ctx.shadowOffsetX = 1;
-    ctx.shadowOffsetY = 2;
-    ctx.shadowOffsetX = -Infinity;
-    ctx.shadowOffsetY = -Infinity;
-    @assert ctx.shadowOffsetX === 1;
-    @assert ctx.shadowOffsetY === 2;
-    ctx.shadowOffsetX = 1;
-    ctx.shadowOffsetY = 2;
-    ctx.shadowOffsetX = NaN;
-    ctx.shadowOffsetY = NaN;
-    @assert ctx.shadowOffsetX === 1;
-    @assert ctx.shadowOffsetY === 2;
-    t.done();
-
-- name: 2d.shadow.attributes.shadowColor.initial
-  testing:
-    - 2d.shadow.color.initial
-  code: |
-    @assert ctx.shadowColor === 'rgba(0, 0, 0, 0)';
-    t.done();
-
-- name: 2d.shadow.attributes.shadowColor.valid
-  testing:
-    - 2d.shadow.color.get
-    - 2d.shadow.color.set
-  code: |
-    ctx.shadowColor = 'lime';
-    @assert ctx.shadowColor === '#00ff00';
-    ctx.shadowColor = 'RGBA(0,255, 0,0)';
-    @assert ctx.shadowColor === 'rgba(0, 255, 0, 0)';
-    t.done();
-
-- name: 2d.shadow.attributes.shadowColor.invalid
-  testing:
-    - 2d.shadow.color.invalid
-  code: |
-    ctx.shadowColor = '#00ff00';
-    ctx.shadowColor = 'bogus';
-    @assert ctx.shadowColor === '#00ff00';
-    ctx.shadowColor = '#00ff00';
-    ctx.shadowColor = 'red bogus';
-    @assert ctx.shadowColor === '#00ff00';
-    ctx.shadowColor = '#00ff00';
-    ctx.shadowColor = ctx;
-    @assert ctx.shadowColor === '#00ff00';
-    ctx.shadowColor = '#00ff00';
-    ctx.shadowColor = undefined;
-    @assert ctx.shadowColor === '#00ff00';
-    t.done();
-
-- name: 2d.shadow.enable.off.1
-  desc: Shadows are not drawn when only shadowColor is set
-  testing:
-    - 2d.shadow.enable
-    - 2d.shadow.render
-  code: |
-    ctx.shadowColor = '#f00';
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.shadow.enable.off.2
-  desc: Shadows are not drawn when only shadowColor is set
-  testing:
-    - 2d.shadow.enable
-    - 2d.shadow.render
-  code: |
-    ctx.globalCompositeOperation = 'destination-atop';
-    ctx.shadowColor = '#f00';
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.shadow.enable.blur
-  desc: Shadows are drawn if shadowBlur is set
-  testing:
-    - 2d.shadow.enable
-    - 2d.shadow.render
-  code: |
-    ctx.globalCompositeOperation = 'destination-atop';
-    ctx.shadowColor = '#0f0';
-    ctx.shadowBlur = 0.1;
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.shadow.enable.x
-  desc: Shadows are drawn if shadowOffsetX is set
-  testing:
-    - 2d.shadow.enable
-    - 2d.shadow.render
-  code: |
-    ctx.globalCompositeOperation = 'destination-atop';
-    ctx.shadowColor = '#0f0';
-    ctx.shadowOffsetX = 0.1;
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.shadow.enable.y
-  desc: Shadows are drawn if shadowOffsetY is set
-  testing:
-    - 2d.shadow.enable
-    - 2d.shadow.render
-  code: |
-    ctx.globalCompositeOperation = 'destination-atop';
-    ctx.shadowColor = '#0f0';
-    ctx.shadowOffsetY = 0.1;
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.shadow.offset.positiveX
-  desc: Shadows can be offset with positive x
-  testing:
-    - 2d.shadow.render
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.shadowColor = '#0f0';
-    ctx.shadowOffsetX = 50;
-    ctx.fillRect(0, 0, 50, 50);
-    @assert pixel 25,25 == 0,255,0,255;
-    @assert pixel 75,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.shadow.offset.negativeX
-  desc: Shadows can be offset with negative x
-  testing:
-    - 2d.shadow.render
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.shadowColor = '#0f0';
-    ctx.shadowOffsetX = -50;
-    ctx.fillRect(50, 0, 50, 50);
-    @assert pixel 25,25 == 0,255,0,255;
-    @assert pixel 75,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.shadow.offset.positiveY
-  desc: Shadows can be offset with positive y
-  testing:
-    - 2d.shadow.render
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.shadowColor = '#0f0';
-    ctx.shadowOffsetY = 25;
-    ctx.fillRect(0, 0, 100, 25);
-    @assert pixel 50,12 == 0,255,0,255;
-    @assert pixel 50,37 == 0,255,0,255;
-    t.done();
-
-- name: 2d.shadow.offset.negativeY
-  desc: Shadows can be offset with negative y
-  testing:
-    - 2d.shadow.render
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.shadowColor = '#0f0';
-    ctx.shadowOffsetY = -25;
-    ctx.fillRect(0, 25, 100, 25);
-    @assert pixel 50,12 == 0,255,0,255;
-    @assert pixel 50,37 == 0,255,0,255;
-    t.done();
-
-- name: 2d.shadow.outside
-  desc: Shadows of shapes outside the visible area can be offset onto the visible area
-  testing:
-    - 2d.shadow.render
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.shadowColor = '#0f0';
-    ctx.shadowOffsetX = 100;
-    ctx.fillRect(-100, 0, 25, 50);
-    ctx.shadowOffsetX = -100;
-    ctx.fillRect(175, 0, 25, 50);
-    ctx.shadowOffsetX = 0;
-    ctx.shadowOffsetY = 100;
-    ctx.fillRect(25, -100, 50, 25);
-    ctx.shadowOffsetY = -100;
-    ctx.fillRect(25, 125, 50, 25);
-    @assert pixel 12,25 == 0,255,0,255;
-    @assert pixel 87,25 == 0,255,0,255;
-    @assert pixel 50,12 == 0,255,0,255;
-    @assert pixel 50,37 == 0,255,0,255;
-    t.done();
-
-- name: 2d.shadow.clip.1
-  desc: Shadows of clipped shapes are still drawn within the clipping region
-  testing:
-    - 2d.shadow.render
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 50, 50);
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(50, 0, 50, 50);
-    ctx.save();
-    ctx.beginPath();
-    ctx.rect(50, 0, 50, 50);
-    ctx.clip();
-    ctx.shadowColor = '#0f0';
-    ctx.shadowOffsetX = 50;
-    ctx.fillRect(0, 0, 50, 50);
-    ctx.restore();
-    @assert pixel 25,25 == 0,255,0,255;
-    @assert pixel 75,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.shadow.clip.2
-  desc: Shadows are not drawn outside the clipping region
-  testing:
-    - 2d.shadow.render
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 50, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(50, 0, 50, 50);
-    ctx.save();
-    ctx.beginPath();
-    ctx.rect(0, 0, 50, 50);
-    ctx.clip();
-    ctx.shadowColor = '#f00';
-    ctx.shadowOffsetX = 50;
-    ctx.fillRect(0, 0, 50, 50);
-    ctx.restore();
-    @assert pixel 25,25 == 0,255,0,255;
-    @assert pixel 75,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.shadow.clip.3
-  desc: Shadows of clipped shapes are still drawn within the clipping region
-  testing:
-    - 2d.shadow.render
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 50, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(50, 0, 50, 50);
-    ctx.save();
-    ctx.beginPath();
-    ctx.rect(0, 0, 50, 50);
-    ctx.clip();
-    ctx.fillStyle = '#f00';
-    ctx.shadowColor = '#0f0';
-    ctx.shadowOffsetX = 50;
-    ctx.fillRect(-50, 0, 50, 50);
-    ctx.restore();
-    @assert pixel 25,25 == 0,255,0,255;
-    @assert pixel 75,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.shadow.stroke.basic
-  desc: Shadows are drawn for strokes
-  testing:
-    - 2d.shadow.render
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#f00';
-    ctx.shadowColor = '#0f0';
-    ctx.shadowOffsetY = 50;
-    ctx.beginPath();
-    ctx.lineWidth = 50;
-    ctx.moveTo(0, -25);
-    ctx.lineTo(100, -25);
-    ctx.stroke();
-    @assert pixel 1,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 98,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.shadow.stroke.cap.1
-  desc: Shadows are not drawn for areas outside stroke caps
-  testing:
-    - 2d.shadow.render
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#f00';
-    ctx.shadowColor = '#f00';
-    ctx.shadowOffsetY = 50;
-    ctx.beginPath();
-    ctx.lineWidth = 50;
-    ctx.lineCap = 'butt';
-    ctx.moveTo(-50, -25);
-    ctx.lineTo(0, -25);
-    ctx.moveTo(100, -25);
-    ctx.lineTo(150, -25);
-    ctx.stroke();
-    @assert pixel 1,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 98,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.shadow.stroke.cap.2
-  desc: Shadows are drawn for stroke caps
-  testing:
-    - 2d.shadow.render
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#f00';
-    ctx.shadowColor = '#0f0';
-    ctx.shadowOffsetY = 50;
-    ctx.beginPath();
-    ctx.lineWidth = 50;
-    ctx.lineCap = 'square';
-    ctx.moveTo(25, -25);
-    ctx.lineTo(75, -25);
-    ctx.stroke();
-    @assert pixel 1,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 98,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.shadow.stroke.join.1
-  desc: Shadows are not drawn for areas outside stroke joins
-  testing:
-    - 2d.shadow.render
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#f00';
-    ctx.shadowColor = '#f00';
-    ctx.shadowOffsetX = 100;
-    ctx.lineWidth = 200;
-    ctx.lineJoin = 'bevel';
-    ctx.beginPath();
-    ctx.moveTo(-200, -50);
-    ctx.lineTo(-150, -50);
-    ctx.lineTo(-151, -100);
-    ctx.stroke();
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 48,48 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-    t.done();
-
-- name: 2d.shadow.stroke.join.2
-  desc: Shadows are drawn for stroke joins
-  testing:
-    - 2d.shadow.render
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 50, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(50, 0, 50, 50);
-    ctx.strokeStyle = '#f00';
-    ctx.shadowColor = '#0f0';
-    ctx.shadowOffsetX = 100;
-    ctx.lineWidth = 200;
-    ctx.lineJoin = 'miter';
-    ctx.beginPath();
-    ctx.moveTo(-200, -50);
-    ctx.lineTo(-150, -50);
-    ctx.lineTo(-151, -100);
-    ctx.stroke();
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 48,48 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-    t.done();
-
-- name: 2d.shadow.stroke.join.3
-  desc: Shadows are drawn for stroke joins respecting miter limit
-  testing:
-    - 2d.shadow.render
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#f00';
-    ctx.shadowColor = '#f00';
-    ctx.shadowOffsetX = 100;
-    ctx.lineWidth = 200;
-    ctx.lineJoin = 'miter';
-    ctx.miterLimit = 0.1;
-    ctx.beginPath();
-    ctx.moveTo(-200, -50);
-    ctx.lineTo(-150, -50);
-    ctx.lineTo(-151, -100); // (not an exact right angle, to avoid some other bug in Firefox 3)
-    ctx.stroke();
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 48,48 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-    t.done();
-
-- name: 2d.shadow.image.basic
-  desc: Shadows are drawn for images
-  testing:
-    - 2d.shadow.render
-  images:
-    - red.png
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.shadowColor = '#0f0';
-    ctx.shadowOffsetY = 50;
-    var promise = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/red.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    promise.then(function(response) {
-        createImageBitmap(response).then(bitmap => {
-            ctx.drawImage(bitmap, 0, -50);
-            @assert pixel 50,25 == 0,255,0,255;
-        }, t_fail);
-    }).then(t_pass, t_fail);
-
-- name: 2d.shadow.image.transparent.1
-  desc: Shadows are not drawn for transparent images
-  testing:
-    - 2d.shadow.render
-  images:
-    - transparent.png
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.shadowColor = '#f00';
-    ctx.shadowOffsetY = 50;
-    var promise = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/transparent.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    promise.then(function(response) {
-        createImageBitmap(response).then(bitmap => {
-            ctx.drawImage(bitmap, 0, -50);
-            @assert pixel 50,25 == 0,255,0,255;
-        }, t_fail);
-    }).then(t_pass, t_fail);
-
-- name: 2d.shadow.image.transparent.2
-  desc: Shadows are not drawn for transparent parts of images
-  testing:
-    - 2d.shadow.render
-  images:
-    - redtransparent.png
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 50, 50);
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(50, 0, 50, 50);
-    ctx.shadowOffsetY = 50;
-    ctx.shadowColor = '#0f0';
-    var promise = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/redtransparent.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    promise.then(function(response) {
-        createImageBitmap(response).then(bitmap => {
-            ctx.drawImage(bitmap, 50, -50);
-            ctx.shadowColor = '#f00';
-            ctx.drawImage(bitmap, -50, -50);
-            @assert pixel 25,25 == 0,255,0,255;
-            @assert pixel 50,25 == 0,255,0,255;
-            @assert pixel 75,25 == 0,255,0,255;
-        }, t_fail);
-    }).then(t_pass, t_fail);
-
-- name: 2d.shadow.image.alpha
-  desc: Shadows are drawn correctly for partially-transparent images
-  testing:
-    - 2d.shadow.render
-  images:
-    - transparent50.png
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.shadowOffsetY = 50;
-    ctx.shadowColor = '#00f';
-    var promise = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/transparent50.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    promise.then(function(response) {
-        createImageBitmap(response).then(bitmap => {
-            ctx.drawImage(bitmap, 0, -50);
-            @assert pixel 50,25 ==~ 127,0,127,255;
-        }, t_fail);
-    }).then(t_pass, t_fail);
-
-- name: 2d.shadow.image.section
-  desc: Shadows are not drawn for areas outside image source rectangles
-  testing:
-    - 2d.shadow.render
-  images:
-    - redtransparent.png
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.shadowOffsetY = 50;
-    ctx.shadowColor = '#f00';
-    var promise = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/redtransparent.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    promise.then(function(response) {
-        createImageBitmap(response).then(bitmap => {
-            ctx.drawImage(bitmap, 50, 0, 50, 50, 0, -50, 50, 50);
-            @assert pixel 25,25 ==~ 0,255,0,255;
-            @assert pixel 50,25 ==~ 0,255,0,255;
-            @assert pixel 75,25 ==~ 0,255,0,255;
-        }, t_fail);
-    }).then(t_pass, t_fail);
-
-- name: 2d.shadow.image.scale
-  desc: Shadows are drawn correctly for scaled images
-  testing:
-    - 2d.shadow.render
-  images:
-    - redtransparent.png
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.shadowOffsetY = 50;
-    ctx.shadowColor = '#0f0';
-    var promise = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/redtransparent.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    promise.then(function(response) {
-        createImageBitmap(response).then(bitmap => {
-            ctx.drawImage(bitmap, 0, 0, 100, 50, -10, -50, 240, 50);
-            @assert pixel 25,25 ==~ 0,255,0,255;
-            @assert pixel 50,25 ==~ 0,255,0,255;
-            @assert pixel 75,25 ==~ 0,255,0,255;
-        }, t_fail);
-    }).then(t_pass, t_fail);
-
-- name: 2d.shadow.canvas.basic
-  desc: Shadows are drawn for canvases
-  testing:
-    - 2d.shadow.render
-  code: |
-    var offscreenCanvas2 = new OffscreenCanvas(100, 50);
-    var ctx2 = offscreenCanvas2.getContext('2d');
-    ctx2.fillStyle = '#f00';
-    ctx2.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.shadowColor = '#0f0';
-    ctx.shadowOffsetY = 50;
-    ctx.drawImage(offscreenCanvas2, 0, -50);
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.shadow.canvas.transparent.1
-  desc: Shadows are not drawn for transparent canvases
-  testing:
-    - 2d.shadow.render
-  code: |
-    var offscreenCanvas2 = new OffscreenCanvas(100, 50);
-    var ctx2 = offscreenCanvas2.getContext('2d');
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.shadowColor = '#f00';
-    ctx.shadowOffsetY = 50;
-    ctx.drawImage(offscreenCanvas2, 0, -50);
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.shadow.canvas.transparent.2
-  desc: Shadows are not drawn for transparent parts of canvases
-  testing:
-    - 2d.shadow.render
-  code: |
-    var offscreenCanvas2 = new OffscreenCanvas(100, 50);
-    var ctx2 = offscreenCanvas2.getContext('2d');
-    ctx2.fillStyle = '#f00';
-    ctx2.fillRect(0, 0, 50, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 50, 50);
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(50, 0, 50, 50);
-    ctx.shadowOffsetY = 50;
-    ctx.shadowColor = '#0f0';
-    ctx.drawImage(offscreenCanvas2, 50, -50);
-    ctx.shadowColor = '#f00';
-    ctx.drawImage(offscreenCanvas2, -50, -50);
-    @assert pixel 25,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 75,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.shadow.canvas.alpha
-  desc: Shadows are drawn correctly for partially-transparent canvases
-  testing:
-    - 2d.shadow.render
-  code: |
-    var offscreenCanvas2 = new OffscreenCanvas(100, 50);
-    var ctx2 = offscreenCanvas2.getContext('2d');
-    ctx2.fillStyle = 'rgba(255, 0, 0, 0.5)';
-    ctx2.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.shadowOffsetY = 50;
-    ctx.shadowColor = '#00f';
-    ctx.drawImage(offscreenCanvas2, 0, -50);
-    @assert pixel 50,25 ==~ 127,0,127,255;
-    t.done();
-
-- name: 2d.shadow.pattern.basic
-  desc: Shadows are drawn for fill patterns
-  testing:
-    - 2d.shadow.render
-  images:
-    - red.png
-  code: |
-    var promise = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/red.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    promise.then(function(response) {
-        createImageBitmap(response).then(bitmap => {
-            var pattern = ctx.createPattern(bitmap, 'repeat');
-            ctx.fillStyle = '#f00';
-            ctx.fillRect(0, 0, 100, 50);
-            ctx.shadowColor = '#0f0';
-            ctx.shadowOffsetY = 50;
-            ctx.fillStyle = pattern;
-            ctx.fillRect(0, -50, 100, 50);
-        }, t_fail);
-    }).then(t_pass, t_fail);
-
-- name: 2d.shadow.pattern.transparent.1
-  desc: Shadows are not drawn for transparent fill patterns
-  testing:
-    - 2d.shadow.render
-  # http://bugs.webkit.org/show_bug.cgi?id=15266
-  images:
-    - transparent.png
-  code: |
-    var promise = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/transparent.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    promise.then(function(response) {
-        createImageBitmap(response).then(bitmap => {
-            var pattern = ctx.createPattern(bitmap, 'repeat');
-            ctx.fillStyle = '#0f0';
-            ctx.fillRect(0, 0, 100, 50);
-            ctx.shadowColor = '#f00';
-            ctx.shadowOffsetY = 50;
-            ctx.fillStyle = pattern;
-            ctx.fillRect(0, -50, 100, 50);
-        }, t_fail);
-    }).then(t_pass, t_fail);
-
-- name: 2d.shadow.pattern.transparent.2
-  desc: Shadows are not drawn for transparent parts of fill patterns
-  testing:
-    - 2d.shadow.render
-  images:
-    - redtransparent.png
-  code: |
-    var promise = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/redtransparent.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    promise.then(function(response) {
-        createImageBitmap(response).then(bitmap => {
-            var pattern = ctx.createPattern(bitmap, 'repeat');
-            ctx.fillStyle = '#f00';
-            ctx.fillRect(0, 0, 50, 50);
-            ctx.fillStyle = '#0f0';
-            ctx.fillRect(50, 0, 50, 50);
-            ctx.shadowOffsetY = 50;
-            ctx.shadowColor = '#0f0';
-            ctx.fillStyle = pattern;
-            ctx.fillRect(0, -50, 100, 50);
-            @assert pixel 25,25 == 0,255,0,255;
-            @assert pixel 50,25 == 0,255,0,255;
-            @assert pixel 75,25 == 0,255,0,255;
-        }, t_fail);
-    }).then(t_pass, t_fail);
-
-- name: 2d.shadow.pattern.alpha
-  desc: Shadows are drawn correctly for partially-transparent fill patterns
-  testing:
-    - 2d.shadow.render
-  images:
-    - transparent50.png
-  code: |
-    var promise = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/transparent50.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    promise.then(function(response) {
-        createImageBitmap(response).then(bitmap => {
-            var pattern = ctx.createPattern(bitmap, 'repeat');
-            ctx.fillStyle = '#f00';
-            ctx.fillRect(0, 0, 100, 50);
-            ctx.shadowOffsetY = 50;
-            ctx.shadowColor = '#00f';
-            ctx.fillStyle = pattern;
-            ctx.fillRect(0, -50, 100, 50);
-        }, t_fail);
-    }).then(t_pass, t_fail);
-
-- name: 2d.shadow.gradient.basic
-  desc: Shadows are drawn for gradient fills
-  testing:
-    - 2d.shadow.render
-  # http://bugs.webkit.org/show_bug.cgi?id=15266
-  code: |
-    var gradient = ctx.createLinearGradient(0, 0, 100, 0);
-    gradient.addColorStop(0, '#f00');
-    gradient.addColorStop(1, '#f00');
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.shadowColor = '#0f0';
-    ctx.shadowOffsetY = 50;
-    ctx.fillStyle = gradient;
-    ctx.fillRect(0, -50, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.shadow.gradient.transparent.1
-  desc: Shadows are not drawn for transparent gradient fills
-  testing:
-    - 2d.shadow.render
-  # http://bugs.webkit.org/show_bug.cgi?id=15266
-  code: |
-    var gradient = ctx.createLinearGradient(0, 0, 100, 0);
-    gradient.addColorStop(0, 'rgba(0,0,0,0)');
-    gradient.addColorStop(1, 'rgba(0,0,0,0)');
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.shadowColor = '#f00';
-    ctx.shadowOffsetY = 50;
-    ctx.fillStyle = gradient;
-    ctx.fillRect(0, -50, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.shadow.gradient.transparent.2
-  desc: Shadows are not drawn for transparent parts of gradient fills
-  testing:
-    - 2d.shadow.render
-  code: |
-    var gradient = ctx.createLinearGradient(0, 0, 100, 0);
-    gradient.addColorStop(0, '#f00');
-    gradient.addColorStop(0.499, '#f00');
-    gradient.addColorStop(0.5, 'rgba(0,0,0,0)');
-    gradient.addColorStop(1, 'rgba(0,0,0,0)');
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 50, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(50, 0, 50, 50);
-    ctx.shadowOffsetY = 50;
-    ctx.shadowColor = '#0f0';
-    ctx.fillStyle = gradient;
-    ctx.fillRect(0, -50, 100, 50);
-    @assert pixel 25,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 75,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.shadow.gradient.alpha
-  desc: Shadows are drawn correctly for partially-transparent gradient fills
-  testing:
-    - 2d.shadow.render
-  code: |
-    var gradient = ctx.createLinearGradient(0, 0, 100, 0);
-    gradient.addColorStop(0, 'rgba(255,0,0,0.5)');
-    gradient.addColorStop(1, 'rgba(255,0,0,0.5)');
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.shadowOffsetY = 50;
-    ctx.shadowColor = '#00f';
-    ctx.fillStyle = gradient;
-    ctx.fillRect(0, -50, 100, 50);
-    @assert pixel 50,25 ==~ 127,0,127,255;
-    t.done();
-
-- name: 2d.shadow.transform.1
-  desc: Shadows take account of transformations
-  testing:
-    - 2d.shadow.render
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.shadowOffsetY = 50;
-    ctx.shadowColor = '#0f0';
-    ctx.translate(100, 100);
-    ctx.fillRect(-100, -150, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.shadow.transform.2
-  desc: Shadow offsets are not affected by transformations
-  testing:
-    - 2d.shadow.render
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.shadowOffsetY = 50;
-    ctx.shadowColor = '#0f0';
-    ctx.rotate(Math.PI)
-    ctx.fillRect(-100, 0, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.shadow.alpha.1
-  desc: Shadow colour alpha components are used
-  testing:
-    - 2d.shadow.render
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.shadowColor = 'rgba(255, 0, 0, 0.01)';
-    ctx.shadowOffsetY = 50;
-    ctx.fillRect(0, -50, 100, 50);
-    @assert pixel 50,25 ==~ 0,255,0,255 +/- 4;
-    t.done();
-
-- name: 2d.shadow.alpha.2
-  desc: Shadow colour alpha components are used
-  testing:
-    - 2d.shadow.render
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.shadowColor = 'rgba(0, 0, 255, 0.5)';
-    ctx.shadowOffsetY = 50;
-    ctx.fillRect(0, -50, 100, 50);
-    @assert pixel 50,25 ==~ 127,0,127,255;
-    t.done();
-
-- name: 2d.shadow.alpha.3
-  desc: Shadows are affected by globalAlpha
-  testing:
-    - 2d.shadow.render
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#f00'; // (work around broken Firefox globalAlpha caching)
-    ctx.shadowColor = '#00f';
-    ctx.shadowOffsetY = 50;
-    ctx.globalAlpha = 0.5;
-    ctx.fillRect(0, -50, 100, 50);
-    @assert pixel 50,25 ==~ 127,0,127,255;
-    t.done();
-
-- name: 2d.shadow.alpha.4
-  desc: Shadows with alpha components are correctly affected by globalAlpha
-  testing:
-    - 2d.shadow.render
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#f00'; // (work around broken Firefox globalAlpha caching)
-    ctx.shadowColor = 'rgba(0, 0, 255, 0.707)';
-    ctx.shadowOffsetY = 50;
-    ctx.globalAlpha = 0.707;
-    ctx.fillRect(0, -50, 100, 50);
-    @assert pixel 50,25 ==~ 127,0,127,255;
-    t.done();
-
-- name: 2d.shadow.alpha.5
-  desc: Shadows of shapes with alpha components are drawn correctly
-  testing:
-    - 2d.shadow.render
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = 'rgba(64, 0, 0, 0.5)';
-    ctx.shadowColor = '#00f';
-    ctx.shadowOffsetY = 50;
-    ctx.fillRect(0, -50, 100, 50);
-    @assert pixel 50,25 ==~ 127,0,127,255;
-    t.done();
-
-- name: 2d.shadow.composite.1
-  desc: Shadows are drawn using globalCompositeOperation
-  testing:
-    - 2d.shadow.render
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.globalCompositeOperation = 'xor';
-    ctx.shadowColor = '#f00';
-    ctx.shadowOffsetX = 100;
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(-100, 0, 200, 50);
-    @assert pixel 50,25 ==~ 0,255,0,255;
-    t.done();
-
-- name: 2d.shadow.composite.2
-  desc: Shadows are drawn using globalCompositeOperation
-  testing:
-    - 2d.shadow.render
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.globalCompositeOperation = 'xor';
-    ctx.shadowColor = '#f00';
-    ctx.shadowBlur = 1;
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(-10, -10, 120, 70);
-    @assert pixel 50,25 ==~ 0,255,0,255;
-    t.done();
-
-- name: 2d.shadow.composite.3
-  desc: Areas outside shadows are drawn correctly with destination-out
-  testing:
-    - 2d.shadow.render
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.globalCompositeOperation = 'destination-out';
-    ctx.shadowColor = '#f00';
-    ctx.shadowBlur = 10;
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(200, 0, 100, 50);
-    @assert pixel 5,5 ==~ 0,255,0,255;
-    @assert pixel 50,25 ==~ 0,255,0,255;
-    t.done();
-
-- name: 2d.clearRect.basic
-  desc: clearRect clears to transparent black
-  testing:
-    - 2d.clearRect
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.clearRect(0, 0, 100, 50);
-    @assert pixel 50,25 == 0,0,0,0;
-    t.done();
-
-- name: 2d.clearRect.path
-  desc: clearRect does not affect the current path
-  testing:
-    - 2d.clearRect
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.beginPath();
-    ctx.rect(0, 0, 100, 50);
-    ctx.clearRect(0, 0, 16, 16);
-    ctx.fill();
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.clearRect.zero
-  desc: clearRect of zero pixels has no effect
-  testing:
-    - 2d.clearRect
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.clearRect(0, 0, 100, 0);
-    ctx.clearRect(0, 0, 0, 50);
-    ctx.clearRect(0, 0, 0, 0);
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.clearRect.negative
-  desc: clearRect of negative sizes works
-  testing:
-    - 2d.clearRect
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.clearRect(0, 0, 50, 25);
-    ctx.clearRect(100, 0, -50, 25);
-    ctx.clearRect(0, 50, 50, -25);
-    ctx.clearRect(100, 50, -50, -25);
-    @assert pixel 25,12 == 0,0,0,0;
-    @assert pixel 75,12 == 0,0,0,0;
-    @assert pixel 25,37 == 0,0,0,0;
-    @assert pixel 75,37 == 0,0,0,0;
-    t.done();
-
-- name: 2d.clearRect.transform
-  desc: clearRect is affected by transforms
-  testing:
-    - 2d.clearRect
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.scale(10, 10);
-    ctx.translate(0, 5);
-    ctx.clearRect(0, -5, 10, 5);
-    @assert pixel 50,25 == 0,0,0,0;
-    t.done();
-
-- name: 2d.clearRect.globalalpha
-  desc: clearRect is not affected by globalAlpha
-  testing:
-    - 2d.clearRect
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.globalAlpha = 0.1;
-    ctx.clearRect(0, 0, 100, 50);
-    @assert pixel 50,25 == 0,0,0,0;
-    t.done();
-
-- name: 2d.clearRect.globalcomposite
-  desc: clearRect is not affected by globalCompositeOperation
-  testing:
-    - 2d.clearRect
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.globalCompositeOperation = 'destination-atop';
-    ctx.clearRect(0, 0, 100, 50);
-    @assert pixel 50,25 == 0,0,0,0;
-    t.done();
-
-- name: 2d.clearRect.clip
-  desc: clearRect is affected by clipping regions
-  testing:
-    - 2d.clearRect
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.beginPath();
-    ctx.rect(0, 0, 16, 16);
-    ctx.clip();
-    ctx.clearRect(0, 0, 100, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 16, 16);
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.clearRect.shadow
-  desc: clearRect does not draw shadows
-  testing:
-    - 2d.clearRect
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.shadowColor = '#f00';
-    ctx.shadowBlur = 0;
-    ctx.shadowOffsetX = 0;
-    ctx.shadowOffsetY = 50;
-    ctx.clearRect(0, -50, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.clearRect.nonfinite
-  desc: clearRect() with Infinity/NaN is ignored
-  testing:
-    - 2d.nonfinite
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    @nonfinite ctx.clearRect(<0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <100 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>);
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.fillRect.basic
-  desc: fillRect works
-  testing:
-    - 2d.fillRect
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.fillRect.path
-  desc: fillRect does not affect the current path
-  testing:
-    - 2d.fillRect
-  code: |
-    ctx.beginPath();
-    ctx.rect(0, 0, 100, 50);
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 16, 16);
-    ctx.fillStyle = '#0f0';
-    ctx.fill();
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.fillRect.zero
-  desc: fillRect of zero pixels has no effect
-  testing:
-    - 2d.fillRect
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 0);
-    ctx.fillRect(0, 0, 0, 50);
-    ctx.fillRect(0, 0, 0, 0);
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.fillRect.negative
-  desc: fillRect of negative sizes works
-  testing:
-    - 2d.fillRect
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 50, 25);
-    ctx.fillRect(100, 0, -50, 25);
-    ctx.fillRect(0, 50, 50, -25);
-    ctx.fillRect(100, 50, -50, -25);
-    @assert pixel 25,12 == 0,255,0,255;
-    @assert pixel 75,12 == 0,255,0,255;
-    @assert pixel 25,37 == 0,255,0,255;
-    @assert pixel 75,37 == 0,255,0,255;
-    t.done();
-
-- name: 2d.fillRect.transform
-  desc: fillRect is affected by transforms
-  testing:
-    - 2d.fillRect
-  code: |
-    ctx.scale(10, 10);
-    ctx.translate(0, 5);
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, -5, 10, 5);
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-# don't bother testing globalalpha, globalcomposite because they're already heavily used by other test cases
-
-- name: 2d.fillRect.clip
-  desc: fillRect is affected by clipping regions
-  testing:
-    - 2d.fillRect
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.beginPath();
-    ctx.rect(0, 0, 16, 16);
-    ctx.clip();
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 16, 16);
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.fillRect.shadow
-  desc: fillRect draws shadows
-  testing:
-    - 2d.fillRect
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.shadowColor = '#0f0';
-    ctx.shadowBlur = 0;
-    ctx.shadowOffsetX = 0;
-    ctx.shadowOffsetY = 50;
-    ctx.fillRect(0, -50, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.fillRect.nonfinite
-  desc: fillRect() with Infinity/NaN is ignored
-  testing:
-    - 2d.nonfinite
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#f00';
-    @nonfinite ctx.fillRect(<0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <100 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>);
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.strokeRect.basic
-  desc: strokeRect works
-  testing:
-    - 2d.strokeRect
-  code: |
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 50;
-    ctx.strokeRect(25, 24, 50, 2);
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.strokeRect.path
-  desc: strokeRect does not affect the current path
-  testing:
-    - 2d.strokeRect
-  code: |
-    ctx.beginPath();
-    ctx.rect(0, 0, 100, 50);
-    ctx.strokeStyle = '#f00';
-    ctx.lineWidth = 5;
-    ctx.strokeRect(0, 0, 16, 16);
-    ctx.fillStyle = '#0f0';
-    ctx.fill();
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.strokeRect.zero.1
-  desc: strokeRect of 0x0 pixels draws nothing
-  testing:
-    - 2d.strokeRect
-  code: |
-    ctx.strokeStyle = '#f00';
-    ctx.lineWidth = 250;
-    ctx.strokeRect(50, 25, 0, 0);
-    @assert pixel 50,25 == 0,0,0,0;
-    t.done();
-
-- name: 2d.strokeRect.zero.2
-  desc: strokeRect of 0x0 pixels draws nothing, including caps and joins
-  testing:
-    - 2d.strokeRect
-  code: |
-    ctx.strokeStyle = '#f00';
-    ctx.lineWidth = 250;
-    ctx.lineCap = 'round';
-    ctx.lineJoin = 'round';
-    ctx.strokeRect(50, 25, 0, 0);
-    @assert pixel 50,25 == 0,0,0,0;
-    t.done();
-
-- name: 2d.strokeRect.zero.3
-  desc: strokeRect of Nx0 pixels draws a straight line
-  testing:
-    - 2d.strokeRect
-  code: |
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 50;
-    ctx.strokeRect(0, 25, 100, 0);
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.strokeRect.zero.4
-  desc: strokeRect of Nx0 pixels draws a closed line with no caps
-  testing:
-    - 2d.strokeRect
-  code: |
-    ctx.strokeStyle = '#f00';
-    ctx.lineWidth = 250;
-    ctx.lineCap = 'round';
-    ctx.strokeRect(100, 25, 100, 0);
-    @assert pixel 50,25 == 0,0,0,0;
-    t.done();
-
-- name: 2d.strokeRect.zero.5
-  desc: strokeRect of Nx0 pixels draws a closed line with joins
-  testing:
-    - 2d.strokeRect
-  code: |
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 250;
-    ctx.lineJoin = 'round';
-    ctx.strokeRect(100, 25, 100, 0);
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.strokeRect.negative
-  desc: strokeRect of negative sizes works
-  testing:
-    - 2d.strokeRect
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 25;
-    ctx.strokeRect(12, 12, 26, 1);
-    ctx.strokeRect(88, 12, -26, 1);
-    ctx.strokeRect(12, 38, 26, -1);
-    ctx.strokeRect(88, 38, -26, -1);
-    @assert pixel 25,12 == 0,255,0,255;
-    @assert pixel 75,12 == 0,255,0,255;
-    @assert pixel 25,37 == 0,255,0,255;
-    @assert pixel 75,37 == 0,255,0,255;
-    t.done();
-
-- name: 2d.strokeRect.transform
-  desc: fillRect is affected by transforms
-  testing:
-    - 2d.strokeRect
-  code: |
-    ctx.scale(10, 10);
-    ctx.translate(0, 5);
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 5;
-    ctx.strokeRect(2.5, -2.6, 5, 0.2);
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.strokeRect.globalalpha
-  desc: strokeRect is affected by globalAlpha
-  testing:
-    - 2d.strokeRect
-  code: |
-    ctx.globalAlpha = 0;
-    ctx.strokeStyle = '#f00';
-    ctx.lineWidth = 50;
-    ctx.strokeRect(25, 24, 50, 2);
-    @assert pixel 50,25 == 0,0,0,0;
-    t.done();
-
-- name: 2d.strokeRect.globalcomposite
-  desc: strokeRect is not affected by globalCompositeOperation
-  testing:
-    - 2d.strokeRect
-  code: |
-    ctx.globalCompositeOperation = 'source-in';
-    ctx.strokeStyle = '#f00';
-    ctx.lineWidth = 50;
-    ctx.strokeRect(25, 24, 50, 2);
-    @assert pixel 50,25 == 0,0,0,0;
-    t.done();
-
-- name: 2d.strokeRect.clip
-  desc: strokeRect is affected by clipping regions
-  testing:
-    - 2d.strokeRect
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.beginPath();
-    ctx.rect(0, 0, 16, 16);
-    ctx.clip();
-    ctx.strokeStyle = '#f00';
-    ctx.lineWidth = 50;
-    ctx.strokeRect(0, 0, 100, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 16, 16);
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.strokeRect.shadow
-  desc: strokeRect draws shadows
-  testing:
-    - 2d.strokeRect
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#f00';
-    ctx.shadowColor = '#0f0';
-    ctx.shadowBlur = 0;
-    ctx.shadowOffsetX = 0;
-    ctx.shadowOffsetY = 50;
-    ctx.strokeStyle = '#f00';
-    ctx.lineWidth = 50;
-    ctx.strokeRect(0, -75, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.strokeRect.nonfinite
-  desc: strokeRect() with Infinity/NaN is ignored
-  testing:
-    - 2d.nonfinite
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#f00';
-    ctx.lineWidth = 150;
-    @nonfinite ctx.strokeRect(<0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <100 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>);
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-
-- name: 2d.drawImage.3arg
-  testing:
-    - 2d.drawImage.defaultsource
-    - 2d.drawImage.defaultdest
-  timeout: long
-  images:
-    - red.png
-    - green.png
-  code: |
-    var promise1 = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/red.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    var promise2 = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/green.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    Promise.all([promise1, promise2]).then(function(response1, response2) {
-        var promise3 = createImageBitmap(response1);
-        var promise4 = createImageBitmap(response2);
-        Promise.all([promise3, promise4]).then(function(bitmap1, bitmap2) {
-            ctx.drawImage(bitmap2, 0, 0);
-            ctx.drawImage(bitmap1, -100, 0);
-            ctx.drawImage(bitmap1, 100, 0);
-            ctx.drawImage(bitmap1, 0, -50);
-            ctx.drawImage(bitmap1, 0, 50);
-            @assert pixel 0,0 ==~ 0,255,0,255;
-            @assert pixel 99,0 ==~ 0,255,0,255;
-            @assert pixel 0,49 ==~ 0,255,0,255;
-            @assert pixel 99,49 ==~ 0,255,0,255;
-        }, t_fail);
-    }).then(t_pass, t_fail);
-
-- name: 2d.drawImage.5arg
-  testing:
-    - 2d.drawImage.defaultsource
-  images:
-    - red.png
-    - green.png
-  timeout: long
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    var promise1 = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/red.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    var promise2 = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/green.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    Promise.all([promise1, promise2]).then(function(response1, response2) {
-        var promise3 = createImageBitmap(response1);
-        var promise4 = createImageBitmap(response2);
-        Promise.all([promise3, promise4]).then(function(bitmap1, bitmap2) {
-            ctx.drawImage(bitmap2, 50, 0, 50, 50);
-            ctx.drawImage(bitmap1, 0, 0, 50, 50);
-            ctx.fillStyle = '#0f0';
-            ctx.fillRect(0, 0, 50, 50);
-            @assert pixel 0,0 ==~ 0,255,0,255;
-            @assert pixel 99,0 ==~ 0,255,0,255;
-            @assert pixel 0,49 ==~ 0,255,0,255;
-            @assert pixel 99,49 ==~ 0,255,0,255;
-        }, t_fail);
-    }).then(t_pass, t_fail);
-
-- name: 2d.drawImage.9arg.basic
-  testing:
-    - 2d.drawImage.paint
-  images:
-    - green.png
-  timeout: long
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    var promise = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/green.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    promise.then(function(response) {
-        createImageBitmap(response).then(bitmap => {
-            ctx.drawImage(bitmap, 0, 0, 100, 50, 0, 0, 100, 50);
-            @assert pixel 0,0 ==~ 0,255,0,255;
-            @assert pixel 99,0 ==~ 0,255,0,255;
-            @assert pixel 0,49 ==~ 0,255,0,255;
-            @assert pixel 99,49 ==~ 0,255,0,255;
-        }, t_fail);
-    }).then(t_pass, t_fail);
-
-- name: 2d.drawImage.9arg.sourcepos
-  testing:
-    - 2d.drawImage.paint
-  images:
-    - rgrg-256x256.png
-  timeout: long
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    var promise = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/rgrg-256x256.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    promise.then(function(response) {
-        createImageBitmap(response).then(bitmap => {
-            ctx.drawImage(bitmap, 140, 20, 100, 50, 0, 0, 100, 50);
-            @assert pixel 0,0 ==~ 0,255,0,255;
-            @assert pixel 99,0 ==~ 0,255,0,255;
-            @assert pixel 0,49 ==~ 0,255,0,255;
-            @assert pixel 99,49 ==~ 0,255,0,255;
-        }, t_fail);
-    }).then(t_pass, t_fail);
-
-- name: 2d.drawImage.9arg.sourcesize
-  testing:
-    - 2d.drawImage.paint
-  images:
-    - rgrg-256x256.png
-  timeout: long
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    var promise = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/rgrg-256x256.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    promise.then(function(response) {
-        createImageBitmap(response).then(bitmap => {
-            ctx.drawImage(bitmap, 0, 0, 256, 256, 0, 0, 100, 50);
-            ctx.fillStyle = '#0f0';
-            ctx.fillRect(0, 0, 51, 26);
-            ctx.fillRect(49, 24, 51, 26);
-            @assert pixel 0,0 ==~ 0,255,0,255;
-            @assert pixel 99,0 ==~ 0,255,0,255;
-            @assert pixel 0,49 ==~ 0,255,0,255;
-            @assert pixel 99,49 ==~ 0,255,0,255;
-            @assert pixel 20,20 ==~ 0,255,0,255;
-            @assert pixel 80,20 ==~ 0,255,0,255;
-            @assert pixel 20,30 ==~ 0,255,0,255;
-            @assert pixel 80,30 ==~ 0,255,0,255;
-        }, t_fail);
-    }).then(t_pass, t_fail);
-
-- name: 2d.drawImage.9arg.destpos
-  testing:
-    - 2d.drawImage.paint
-  images:
-    - red.png
-    - green.png
-  timeout: long
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    var promise1 = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/red.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    var promise2 = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/green.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    Promise.all([promise1, promise2]).then(function(response1, response2) {
-        var promise3 = createImageBitmap(response1);
-        var promise4 = createImageBitmap(response2);
-        Promise.all([promise3, promise4]).then(function(bitmap1, bitmap2) {
-            ctx.drawImage(bitmap2, 0, 0, 100, 50, 0, 0, 100, 50);
-            ctx.drawImage(bitmap1, 0, 0, 100, 50, -100, 0, 100, 50);
-            ctx.drawImage(bitmap1, 0, 0, 100, 50, 100, 0, 100, 50);
-            ctx.drawImage(bitmap1, 0, 0, 100, 50, 0, -50, 100, 50);
-            ctx.drawImage(bitmap1, 0, 0, 100, 50, 0, 50, 100, 50);
-            @assert pixel 0,0 ==~ 0,255,0,255;
-            @assert pixel 99,0 ==~ 0,255,0,255;
-            @assert pixel 0,49 ==~ 0,255,0,255;
-            @assert pixel 99,49 ==~ 0,255,0,255;
-        }, t_fail);
-    }).then(t_pass, t_fail);
-
-- name: 2d.drawImage.9arg.destsize
-  testing:
-    - 2d.drawImage.paint
-  images:
-    - red.png
-    - green.png
-  timeout: long
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    var promise1 = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/red.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    var promise2 = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/green.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    Promise.all([promise1, promise2]).then(function(response1, response2) {
-        var promise3 = createImageBitmap(response1);
-        var promise4 = createImageBitmap(response2);
-        Promise.all([promise3, promise4]).then(function(bitmap1, bitmap2) {
-            ctx.drawImage(bitmap2, 1, 1, 1, 1, 0, 0, 100, 50);
-            ctx.drawImage(bitmap1, 0, 0, 100, 50, -50, 0, 50, 50);
-            ctx.drawImage(bitmap1, 0, 0, 100, 50, 100, 0, 50, 50);
-            ctx.drawImage(bitmap1, 0, 0, 100, 50, 0, -25, 100, 25);
-            ctx.drawImage(bitmap1, 0, 0, 100, 50, 0, 50, 100, 25);
-            @assert pixel 0,0 ==~ 0,255,0,255;
-            @assert pixel 99,0 ==~ 0,255,0,255;
-            @assert pixel 0,49 ==~ 0,255,0,255;
-            @assert pixel 99,49 ==~ 0,255,0,255;
-        }, t_fail);
-    }).then(t_pass, t_fail);
-
-- name: 2d.drawImage.canvas
-  testing:
-    - 2d.drawImage.paint
-  timeout: long
-  code: |
-    var offscreenCanvas2 = new OffscreenCanvas(100, 50);
-    var ctx2 = offscreenCanvas2.getContext('2d');
-    ctx2.fillStyle = '#0f0';
-    ctx2.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#f00';
-    ctx.drawImage(offscreenCanvas2, 0, 0);
-    @assert pixel 0,0 ==~ 0,255,0,255;
-    @assert pixel 99,0 ==~ 0,255,0,255;
-    @assert pixel 0,49 ==~ 0,255,0,255;
-    @assert pixel 99,49 ==~ 0,255,0,255;
-    t.done();
-
-- name: 2d.drawImage.self.1
-  testing:
-    - 2d.drawImage.self
-  timeout: long
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 50, 50);
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(50, 0, 50, 50);
-    ctx.drawImage(offscreenCanvas, 50, 0);
-    @assert pixel 0,0 ==~ 0,255,0,255;
-    @assert pixel 99,0 ==~ 0,255,0,255;
-    @assert pixel 0,49 ==~ 0,255,0,255;
-    @assert pixel 99,49 ==~ 0,255,0,255;
-    t.done();
-
-- name: 2d.drawImage.self.2
-  testing:
-    - 2d.drawImage.self
-  timeout: long
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 1, 100, 49);
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 1);
-    ctx.drawImage(offscreenCanvas, 0, 1);
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 2);
-    @assert pixel 0,0 ==~ 0,255,0,255;
-    @assert pixel 99,0 ==~ 0,255,0,255;
-    @assert pixel 0,49 ==~ 0,255,0,255;
-    @assert pixel 99,49 ==~ 0,255,0,255;
-    t.done();
-
-- name: 2d.drawImage.null
-  testing:
-    - 2d.drawImage.IDL
-  timeout: long
-  code: |
-    @assert throws TypeError ctx.drawImage(null, 0, 0);
-    t.done();
-
-- name: 2d.drawImage.zerocanvas
-  testing:
-    - 2d.drawImage.zerocanvas
-  timeout: long
-  code: |
-    var offscreenCanvas2 = new OffscreenCanvas(0, 10);
-    @assert throws INVALID_STATE_ERR ctx.drawImage(offscreenCanvas2, 0, 0);
-
-    offscreenCanvas2.width = 10;
-    offscreenCanvas2.height = 0;
-    @assert throws INVALID_STATE_ERR ctx.drawImage(offscreenCanvas2, 0, 0);
-
-    offscreenCanvas2.width = 0;
-    offscreenCanvas2.height = 0;
-    @assert throws INVALID_STATE_ERR ctx.drawImage(offscreenCanvas2, 0, 0);
-    t.done();
-
-- name: 2d.drawImage.wrongtype
-  desc: Incorrect image types in drawImage do not match any defined overloads, so WebIDL throws a TypeError
-  testing:
-    - 2d.drawImage.IDL
-  timeout: long
-  code: |
-    @assert throws TypeError ctx.drawImage(undefined, 0, 0);
-    @assert throws TypeError ctx.drawImage(0, 0, 0);
-    @assert throws TypeError ctx.drawImage("", 0, 0);
-    t.done();
-
-- name: 2d.drawImage.floatsource
-  testing:
-    - 2d.drawImage.paint
-  timeout: long
-  code: |
-    var promise = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/green.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    promise.then(function(response) {
-        createImageBitmap(response).then(bitmap => {
-            ctx.drawImage(bitmap, 10.1, 10.1, 0.1, 0.1, 0, 0, 100, 50);
-            @assert pixel 50,25 ==~ 0,255,0,255;
-        }, t_fail);
-    }).then(t_pass, t_fail);
-
-- name: 2d.drawImage.zerosource
-  desc: drawImage with zero-sized source rectangle throws INDEX_SIZE_ERR
-  testing:
-    - 2d.drawImage.zerosource
-  timeout: long
-  images:
-    - red.png
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    var promise = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/green.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    promise.then(function(response) {
-        createImageBitmap(response).then(bitmap => {
-            @assert throws INDEX_SIZE_ERR ctx.drawImage(bitmap, 10, 10, 0, 1, 0, 0, 100, 50);
-            @assert throws INDEX_SIZE_ERR ctx.drawImage(bitmap, 10, 10, 1, 0, 0, 0, 100, 50);
-            @assert throws INDEX_SIZE_ERR ctx.drawImage(bitmap, 10, 10, 0, 0, 0, 0, 100, 50);
-            @assert pixel 50,25 ==~ 0,255,0,255;
-        }, t_fail);
-    }).then(t_pass, t_fail);
-
-- name: 2d.drawImage.zerosource.image
-  desc: drawImage with zero-sized source rectangle from image throws INDEX_SIZE_ERR
-  testing:
-    - 2d.drawImage.zerosource
-  images:
-    - red-zerowidth.svg
-    - red-zeroheight.svg
-    - red-zerosize.svg
-  timeout: long
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    var promise = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/red-zerowidth.svg');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    promise.then(function(response) {
-        createImageBitmap(response).then(bitmap => {
-            @assert throws INDEX_SIZE_ERR ctx.drawImage(bitmap, 0, 0, 100, 50);
-            @assert throws INDEX_SIZE_ERR ctx.drawImage(bitmap, 0, 0, 100, 50);
-            @assert throws INDEX_SIZE_ERR ctx.drawImage(bitmap, 0, 0, 100, 50);
-            @assert pixel 50,25 == 0,255,0,255;
-        }, t_fail);
-    }).then(t_pass, t_fail);
-
-- name: 2d.drawImage.negativesource
-  desc: Negative source width/height represents the correct rectangle
-  testing:
-    - 2d.drawImage.direction
-  mozilla: { throws }
-  images:
-    - ggrr-256x256.png
-  timeout: long
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    var promise = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/ggrr-256x256.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    promise.then(function(response) {
-        createImageBitmap(response).then(bitmap => {
-            ctx.drawImage(bitmap, 100, 78, -100, 50, 0, 0, 50, 50);
-            ctx.drawImage(bitmap, 100, 128, -100, -50, 50, 0, 50, 50);
-            @assert pixel 1,1 ==~ 0,255,0,255;
-            @assert pixel 1,48 ==~ 0,255,0,255;
-            @assert pixel 98,1 ==~ 0,255,0,255;
-            @assert pixel 98,48 ==~ 0,255,0,255;
-            @assert pixel 48,1 ==~ 0,255,0,255;
-            @assert pixel 48,48 ==~ 0,255,0,255;
-            @assert pixel 51,1 ==~ 0,255,0,255;
-            @assert pixel 51,48 ==~ 0,255,0,255;
-            @assert pixel 25,25 ==~ 0,255,0,255;
-            @assert pixel 75,25 ==~ 0,255,0,255;
-        }, t_fail);
-    }).then(t_pass, t_fail);
-
-- name: 2d.drawImage.negativedest
-  desc: Negative destination width/height represents the correct rectangle
-  testing:
-    - 2d.drawImage.direction
-  mozilla: { throws }
-  timeout: long
-  images:
-    - ggrr-256x256.png
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    var promise = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/ggrr-256x256.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    promise.then(function(response) {
-        createImageBitmap(response).then(bitmap => {
-            ctx.drawImage(bitmap, 100, 78, 50, 50, 0, 50, 50, -50);
-            ctx.drawImage(bitmap, 100, 128, 50, -50, 100, 50, -50, -50);
-            @assert pixel 1,1 ==~ 0,255,0,255;
-            @assert pixel 1,48 ==~ 0,255,0,255;
-            @assert pixel 98,1 ==~ 0,255,0,255;
-            @assert pixel 98,48 ==~ 0,255,0,255;
-            @assert pixel 48,1 ==~ 0,255,0,255;
-            @assert pixel 48,48 ==~ 0,255,0,255;
-            @assert pixel 51,1 ==~ 0,255,0,255;
-            @assert pixel 51,48 ==~ 0,255,0,255;
-            @assert pixel 25,25 ==~ 0,255,0,255;
-            @assert pixel 75,25 ==~ 0,255,0,255;
-        }, t_fail);
-    }).then(t_pass, t_fail);
-
-- name: 2d.drawImage.negativedir
-  desc: Negative dimensions do not affect the direction of the image
-  testing:
-    - 2d.drawImage.direction
-  mozilla: { throws }
-  timeout: long
-  images:
-    - ggrr-256x256.png
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    var promise = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/ggrr-256x256.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    promise.then(function(response) {
-        createImageBitmap(response).then(bitmap => {
-            ctx.drawImage(bitmap, 0, 178, 50, -100, 0, 0, 50, 100);
-            ctx.drawImage(bitmap, 0, 78, 50, 100, 50, 100, 50, -100);
-            @assert pixel 1,1 ==~ 0,255,0,255;
-            @assert pixel 1,48 ==~ 0,255,0,255;
-            @assert pixel 98,1 ==~ 0,255,0,255;
-            @assert pixel 98,48 ==~ 0,255,0,255;
-            @assert pixel 48,1 ==~ 0,255,0,255;
-            @assert pixel 48,48 ==~ 0,255,0,255;
-            @assert pixel 51,1 ==~ 0,255,0,255;
-            @assert pixel 51,48 ==~ 0,255,0,255;
-            @assert pixel 25,25 ==~ 0,255,0,255;
-            @assert pixel 75,25 ==~ 0,255,0,255;
-        }, t_fail);
-    }).then(t_pass, t_fail);
-
-- name: 2d.drawImage.outsidesource
-  DISABLED: fix this to match the current spec (transparent black outside source)
-  testing:
-    - 2d.drawImage.outsidesource
-  code: |
-    var promise1 = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/red.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    var promise2 = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/green.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    Promise.all([promise1, promise2]).then(function(response1, response2) {
-        var promise3 = createImageBitmap(response1);
-        var promise4 = createImageBitmap(response2);
-        Promise.all([promise3, promise4]).then(function(bitmap1, bitmap2) {
-            ctx.drawImage(bitmap2, 10.5, 10.5, 89.5, 39.5, 0, 0, 100, 50);
-            ctx.drawImage(bitmap2, 5.5, 5.5, -5.5, -5.5, 0, 0, 100, 50);
-            ctx.drawImage(bitmap2, 100, 50, -5, -5, 0, 0, 100, 50);
-            @assert throws INDEX_SIZE_ERR ctx.drawImage(bitmap1, -0.001, 0, 100, 50, 0, 0, 100, 50);
-            @assert throws INDEX_SIZE_ERR ctx.drawImage(bitmap1, 0, -0.001, 100, 50, 0, 0, 100, 50);
-            @assert throws INDEX_SIZE_ERR ctx.drawImage(bitmap1, 0, 0, 100.001, 50, 0, 0, 100, 50);
-            @assert throws INDEX_SIZE_ERR ctx.drawImage(bitmap1, 0, 0, 100, 50.001, 0, 0, 100, 50);
-            @assert throws INDEX_SIZE_ERR ctx.drawImage(bitmap1, 50, 0, 50.001, 50, 0, 0, 100, 50); @moz-todo
-            @assert throws INDEX_SIZE_ERR ctx.drawImage(bitmap1, 0, 0, -5, 5, 0, 0, 100, 50);
-            @assert throws INDEX_SIZE_ERR ctx.drawImage(bitmap1, 0, 0, 5, -5, 0, 0, 100, 50);
-            @assert throws INDEX_SIZE_ERR ctx.drawImage(bitmap1, 110, 60, -20, -20, 0, 0, 100, 50);
-            @assert pixel 50,25 ==~ 0,255,0,255; @moz-todo
-        }, t_fail);
-    }).then(t_pass, t_fail);
-
-- name: 2d.drawImage.broken
-  testing:
-    - 2d.drawImage.incomplete.image
-  timeout: long
-  code: |
-    var promise = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/broken.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    promise.then(function(response) {
-        createImageBitmap(response).then(bitmap => {
-            ctx.fillStyle = '#0f0';
-            ctx.fillRect(0, 0, 100, 50);
-            ctx.drawImage(bitmap, 0, 0);
-            @assert pixel 50,25 ==~ 0,255,0,255; @moz-todo
-        }, t_fail);
-    }).then(t_pass, t_fail);
-
-- name: 2d.drawImage.svg
-  desc: drawImage() of an SVG image
-  testing:
-    - 2d.drawImage.svg
-  timeout: long
-  code: |
-    var promise = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/green.svg');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    promise.then(function(response) {
-        createImageBitmap(response).then(bitmap => {
-            ctx.drawImage(bitmap, 0, 0);
-            @assert pixel 50,25 ==~ 0,255,0,255;
-        }, t_fail);
-    }).then(t_pass, t_fail);
-
-- name: 2d.drawImage.animated.poster
-  desc: drawImage() of an APNG draws the poster frame
-  testing:
-    - 2d.drawImage.animated.image
-  images:
-    - anim-poster-gr.png
-  timeout: long
-  code: |
-    var promise = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/anim-poster-gr.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    promise.then(function(response) {
-        createImageBitmap(response).then(bitmap => {
-            ctx.drawImage(bitmap, 0, 0);
-            @assert pixel 50,25 ==~ 0,255,0,255; @moz-todo
-        }, t_fail);
-    }).then(t_pass, t_fail);
-
-- name: 2d.drawImage.path
-  testing:
-    - 2d.drawImage.unaffect
-  timeout: long
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.rect(0, 0, 100, 50);
-    var promise = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/red.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    promise.then(function(response) {
-        createImageBitmap(response).then(bitmap => {
-            ctx.drawImage(bitmap, 0, 0);
-            ctx.fill();
-            @assert pixel 50,25 ==~ 0,255,0,255;
-        }, t_fail);
-    }).then(t_pass, t_fail);
-
-- name: 2d.drawImage.transform
-  testing:
-    - 2d.drawImage.subject
-  images:
-    - red.png
-  timeout: long
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.translate(100, 0);
-    var promise = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/red.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    promise.then(function(response) {
-        createImageBitmap(response).then(bitmap => {
-            ctx.drawImage(bitmap, 0, 0);
-            @assert pixel 50,25 ==~ 0,255,0,255;
-        }, t_fail);
-    }).then(t_pass, t_fail);
-
-- name: 2d.drawImage.alpha
-  testing:
-    - 2d.drawImage.subject
-  images:
-    - red.png
-  timeout: long
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.globalAlpha = 0;
-    var promise = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/red.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    promise.then(function(response) {
-        createImageBitmap(response).then(bitmap => {
-            ctx.drawImage(bitmap, 0, 0);
-            @assert pixel 50,25 ==~ 0,255,0,255;
-        }, t_fail);
-    }).then(t_pass, t_fail);
-
-- name: 2d.drawImage.clip
-  testing:
-    - 2d.drawImage.subject
-  images:
-    - red.png
-  timeout: long
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.rect(-10, -10, 1, 1);
-    ctx.clip();
-    var promise = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/red.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    promise.then(function(response) {
-        createImageBitmap(response).then(bitmap => {
-            ctx.drawImage(bitmap, 0, 0);
-            @assert pixel 50,25 ==~ 0,255,0,255;
-        }, t_fail);
-    }).then(t_pass, t_fail);
-
-- name: 2d.drawImage.composite
-  testing:
-    - 2d.drawImage.subject
-  images:
-    - red.png
-  timeout: long
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.globalCompositeOperation = 'destination-over';
-    var promise = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/red.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    promise.then(function(response) {
-        createImageBitmap(response).then(bitmap => {
-            ctx.drawImage(bitmap, 0, 0);
-            @assert pixel 50,25 ==~ 0,255,0,255;
-        }, t_fail);
-    }).then(t_pass, t_fail);
-
-- name: 2d.drawImage.nowrap
-  desc: Stretched images do not get pixels wrapping around the edges
-  images:
-    - redtransparent.png
-  timeout: long
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    var promise = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/redtransparent.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    promise.then(function(response) {
-        createImageBitmap(response).then(bitmap => {
-            ctx.drawImage(bitmap, -1950, 0, 2000, 50);
-            @assert pixel 45,25 ==~ 0,255,0,255;
-            @assert pixel 50,25 ==~ 0,255,0,255;
-            @assert pixel 55,25 ==~ 0,255,0,255;
-        }, t_fail);
-    }).then(t_pass, t_fail);
-
-- name: 2d.drawImage.nonfinite
-  desc: drawImage() with Infinity/NaN is ignored
-  testing:
-    - 2d.nonfinite
-  images:
-    - red.png
-  timeout: long
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    var promise = new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", '/images/redtransparent.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    });
-    promise.then(function(response) {
-        createImageBitmap(response).then(bitmap => {
-            @nonfinite ctx.drawImage(<bitmap>, <0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>);
-            @nonfinite ctx.drawImage(<bitmap>, <0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <100 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>);
-            @nonfinite ctx.drawImage(<bitmap>, <0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <100 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <100 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>);
-            @assert pixel 50,25 == 0,255,0,255;
-        }, t_fail);
-    }).then(t_pass, t_fail);
-
-- name: 2d.imageData.create2.basic
-  desc: createImageData(sw, sh) exists and returns something
-  testing:
-    - 2d.imageData.create2.object
-  code: |
-    @assert ctx.createImageData(1, 1) !== null;
-    t.done();
-
-- name: 2d.imageData.create1.basic
-  desc: createImageData(imgdata) exists and returns something
-  testing:
-    - 2d.imageData.create1.object
-  code: |
-    @assert ctx.createImageData(ctx.createImageData(1, 1)) !== null;
-    t.done();
-
-- name: 2d.imageData.create2.initial
-  desc: createImageData(sw, sh) returns transparent black data of the right size
-  testing:
-    - 2d.imageData.create2.size
-    - 2d.imageData.create.initial
-    - 2d.imageData.initial
-  code: |
-    var imgdata = ctx.createImageData(10, 20);
-    @assert imgdata.data.length === imgdata.width*imgdata.height*4;
-    @assert imgdata.width < imgdata.height;
-    @assert imgdata.width > 0;
-    var isTransparentBlack = true;
-    for (var i = 0; i < imgdata.data.length; ++i)
-        if (imgdata.data[i] !== 0)
-            isTransparentBlack = false;
-    @assert isTransparentBlack;
-    t.done();
-
-- name: 2d.imageData.create1.initial
-  desc: createImageData(imgdata) returns transparent black data of the right size
-  testing:
-    - 2d.imageData.create1.size
-    - 2d.imageData.create.initial
-    - 2d.imageData.initial
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    var imgdata1 = ctx.getImageData(0, 0, 10, 20);
-    var imgdata2 = ctx.createImageData(imgdata1);
-    @assert imgdata2.data.length === imgdata1.data.length;
-    @assert imgdata2.width === imgdata1.width;
-    @assert imgdata2.height === imgdata1.height;
-    var isTransparentBlack = true;
-    for (var i = 0; i < imgdata2.data.length; ++i)
-        if (imgdata2.data[i] !== 0)
-            isTransparentBlack = false;
-    @assert isTransparentBlack;
-    t.done();
-
-- name: 2d.imageData.create2.large
-  desc: createImageData(sw, sh) works for sizes much larger than the canvas
-  testing:
-    - 2d.imageData.create2.size
-  code: |
-    var imgdata = ctx.createImageData(1000, 2000);
-    @assert imgdata.data.length === imgdata.width*imgdata.height*4;
-    @assert imgdata.width < imgdata.height;
-    @assert imgdata.width > 0;
-    var isTransparentBlack = true;
-    for (var i = 0; i < imgdata.data.length; i += 7813) // check ~1024 points (assuming normal scaling)
-        if (imgdata.data[i] !== 0)
-            isTransparentBlack = false;
-    @assert isTransparentBlack;
-    t.done();
-
-- name: 2d.imageData.create2.negative
-  desc: createImageData(sw, sh) takes the absolute magnitude of the size arguments
-  testing:
-    - 2d.imageData.create2.size
-  code: |
-    var imgdata1 = ctx.createImageData(10, 20);
-    var imgdata2 = ctx.createImageData(-10, 20);
-    var imgdata3 = ctx.createImageData(10, -20);
-    var imgdata4 = ctx.createImageData(-10, -20);
-    @assert imgdata1.data.length === imgdata2.data.length;
-    @assert imgdata2.data.length === imgdata3.data.length;
-    @assert imgdata3.data.length === imgdata4.data.length;
-    t.done();
-
-- name: 2d.imageData.create2.zero
-  desc: createImageData(sw, sh) throws INDEX_SIZE_ERR if size is zero
-  testing:
-    - 2d.imageData.getcreate.zero
-  code: |
-    @assert throws INDEX_SIZE_ERR ctx.createImageData(10, 0);
-    @assert throws INDEX_SIZE_ERR ctx.createImageData(0, 10);
-    @assert throws INDEX_SIZE_ERR ctx.createImageData(0, 0);
-    t.done();
-
-- name: 2d.imageData.create2.nonfinite
-  desc: createImageData() throws TypeError if arguments are not finite
-  testing:
-    - 2d.imageData.getcreate.nonfinite
-  code: |
-    @nonfinite @assert throws TypeError ctx.createImageData(<10 Infinity -Infinity NaN>, <10 Infinity -Infinity NaN>);
-    var posinfobj = { valueOf: function() { return Infinity; } },
-        neginfobj = { valueOf: function() { return -Infinity; } },
-        nanobj = { valueOf: function() { return -Infinity; } };
-    @nonfinite @assert throws TypeError ctx.createImageData(<10 posinfobj neginfobj nanobj>, <10 posinfobj neginfobj nanobj>);
-    t.done();
-
-- name: 2d.imageData.create1.zero
-  desc: createImageData(null) throws TypeError
-  testing:
-    - 2d.imageData.create.null
-  code: |
-    @assert throws TypeError ctx.createImageData(null);
-    t.done();
-
-- name: 2d.imageData.create2.round
-  desc: createImageData(w, h) is rounded the same as getImageData(0, 0, w, h)
-  testing:
-    - 2d.imageData.createround
-  code: |
-    var imgdata1 = ctx.createImageData(10.01, 10.99);
-    var imgdata2 = ctx.getImageData(0, 0, 10.01, 10.99);
-    @assert imgdata1.width === imgdata2.width;
-    @assert imgdata1.height === imgdata2.height;
-    t.done();
-
-- name: 2d.imageData.get.basic
-  desc: getImageData() exists and returns something
-  testing:
-    - 2d.imageData.get.basic
-  code: |
-    @assert ctx.getImageData(0, 0, 100, 50) !== null;
-    t.done();
-
-- name: 2d.imageData.get.zero
-  desc: getImageData() throws INDEX_SIZE_ERR if size is zero
-  testing:
-    - 2d.imageData.getcreate.zero
-  code: |
-    @assert throws INDEX_SIZE_ERR ctx.getImageData(1, 1, 10, 0);
-    @assert throws INDEX_SIZE_ERR ctx.getImageData(1, 1, 0, 10);
-    @assert throws INDEX_SIZE_ERR ctx.getImageData(1, 1, 0, 0);
-    t.done();
-
-- name: 2d.imageData.get.nonfinite
-  desc: getImageData() throws TypeError if arguments are not finite
-  testing:
-    - 2d.imageData.getcreate.nonfinite
-  code: |
-    @nonfinite @assert throws TypeError ctx.getImageData(<10 Infinity -Infinity NaN>, <10 Infinity -Infinity NaN>, <10 Infinity -Infinity NaN>, <10 Infinity -Infinity NaN>);
-    var posinfobj = { valueOf: function() { return Infinity; } },
-        neginfobj = { valueOf: function() { return -Infinity; } },
-        nanobj = { valueOf: function() { return -Infinity; } };
-    @nonfinite @assert throws TypeError ctx.getImageData(<10 posinfobj neginfobj nanobj>, <10 posinfobj neginfobj nanobj>, <10 posinfobj neginfobj nanobj>, <10 posinfobj neginfobj nanobj>);
-    t.done();
-
-- name: 2d.imageData.get.source.outside
-  desc: getImageData() returns transparent black outside the canvas
-  testing:
-    - 2d.imageData.get.basic
-    - 2d.imageData.get.outside
-  code: |
-    ctx.fillStyle = '#08f';
-    ctx.fillRect(0, 0, 100, 50);
-    var imgdata1 = ctx.getImageData(-10, 5, 1, 1);
-    @assert imgdata1.data[0] === 0;
-    @assert imgdata1.data[1] === 0;
-    @assert imgdata1.data[2] === 0;
-    @assert imgdata1.data[3] === 0;
-    var imgdata2 = ctx.getImageData(10, -5, 1, 1);
-    @assert imgdata2.data[0] === 0;
-    @assert imgdata2.data[1] === 0;
-    @assert imgdata2.data[2] === 0;
-    @assert imgdata2.data[3] === 0;
-    var imgdata3 = ctx.getImageData(200, 5, 1, 1);
-    @assert imgdata3.data[0] === 0;
-    @assert imgdata3.data[1] === 0;
-    @assert imgdata3.data[2] === 0;
-    @assert imgdata3.data[3] === 0;
-    var imgdata4 = ctx.getImageData(10, 60, 1, 1);
-    @assert imgdata4.data[0] === 0;
-    @assert imgdata4.data[1] === 0;
-    @assert imgdata4.data[2] === 0;
-    @assert imgdata4.data[3] === 0;
-    var imgdata5 = ctx.getImageData(100, 10, 1, 1);
-    @assert imgdata5.data[0] === 0;
-    @assert imgdata5.data[1] === 0;
-    @assert imgdata5.data[2] === 0;
-    @assert imgdata5.data[3] === 0;
-    var imgdata6 = ctx.getImageData(0, 10, 1, 1);
-    @assert imgdata6.data[0] === 0;
-    @assert imgdata6.data[1] === 136;
-    @assert imgdata6.data[2] === 255;
-    @assert imgdata6.data[3] === 255;
-    var imgdata7 = ctx.getImageData(-10, 10, 20, 20);
-    @assert imgdata7.data[ 0*4+0] === 0;
-    @assert imgdata7.data[ 0*4+1] === 0;
-    @assert imgdata7.data[ 0*4+2] === 0;
-    @assert imgdata7.data[ 0*4+3] === 0;
-    @assert imgdata7.data[ 9*4+0] === 0;
-    @assert imgdata7.data[ 9*4+1] === 0;
-    @assert imgdata7.data[ 9*4+2] === 0;
-    @assert imgdata7.data[ 9*4+3] === 0;
-    @assert imgdata7.data[10*4+0] === 0;
-    @assert imgdata7.data[10*4+1] === 136;
-    @assert imgdata7.data[10*4+2] === 255;
-    @assert imgdata7.data[10*4+3] === 255;
-    @assert imgdata7.data[19*4+0] === 0;
-    @assert imgdata7.data[19*4+1] === 136;
-    @assert imgdata7.data[19*4+2] === 255;
-    @assert imgdata7.data[19*4+3] === 255;
-    @assert imgdata7.data[20*4+0] === 0;
-    @assert imgdata7.data[20*4+1] === 0;
-    @assert imgdata7.data[20*4+2] === 0;
-    @assert imgdata7.data[20*4+3] === 0;
-    t.done();
-
-- name: 2d.imageData.get.source.negative
-  desc: getImageData() works with negative width and height, and returns top-to-bottom left-to-right
-  testing:
-    - 2d.imageData.get.basic
-    - 2d.pixelarray.order
-  code: |
-    ctx.fillStyle = '#000';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#fff';
-    ctx.fillRect(20, 10, 60, 10);
-    var imgdata1 = ctx.getImageData(85, 25, -10, -10);
-    @assert imgdata1.data[0] === 255;
-    @assert imgdata1.data[1] === 255;
-    @assert imgdata1.data[2] === 255;
-    @assert imgdata1.data[3] === 255;
-    @assert imgdata1.data[imgdata1.data.length-4+0] === 0;
-    @assert imgdata1.data[imgdata1.data.length-4+1] === 0;
-    @assert imgdata1.data[imgdata1.data.length-4+2] === 0;
-    @assert imgdata1.data[imgdata1.data.length-4+3] === 255;
-    var imgdata2 = ctx.getImageData(0, 0, -1, -1);
-    @assert imgdata2.data[0] === 0;
-    @assert imgdata2.data[1] === 0;
-    @assert imgdata2.data[2] === 0;
-    @assert imgdata2.data[3] === 0;
-    t.done();
-
-- name: 2d.imageData.get.source.size
-  desc: getImageData() returns bigger ImageData for bigger source rectangle
-  testing:
-    - 2d.imageData.get.basic
-  code: |
-    var imgdata1 = ctx.getImageData(0, 0, 10, 10);
-    var imgdata2 = ctx.getImageData(0, 0, 20, 20);
-    @assert imgdata2.width > imgdata1.width;
-    @assert imgdata2.height > imgdata1.height;
-    t.done();
-
-- name: 2d.imageData.get.tiny
-  desc: getImageData() works for sizes smaller than one pixel
-  testing:
-    - 2d.imageData.one
-  code: |
-    var imgdata = ctx.getImageData(0, 0, 0.0001, 0.0001);
-    @assert imgdata.data.length === imgdata.width*imgdata.height*4;
-    @assert imgdata.width === 1;
-    @assert imgdata.height === 1;
-    t.done();
-
-- name: 2d.imageData.get.nonpremul
-  desc: getImageData() returns non-premultiplied colours
-  testing:
-    - 2d.imageData.get.premul
-  code: |
-    ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
-    ctx.fillRect(0, 0, 100, 50);
-    var imgdata = ctx.getImageData(10, 10, 10, 10);
-    @assert imgdata.data[0] > 200;
-    @assert imgdata.data[1] > 200;
-    @assert imgdata.data[2] > 200;
-    @assert imgdata.data[3] > 100;
-    @assert imgdata.data[3] < 200;
-    t.done();
-
-- name: 2d.imageData.get.range
-  desc: getImageData() returns values in the range [0, 255]
-  testing:
-    - 2d.pixelarray.range
-    - 2d.pixelarray.retrieve
-  code: |
-    ctx.fillStyle = '#000';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#fff';
-    ctx.fillRect(20, 10, 60, 10);
-    var imgdata1 = ctx.getImageData(10, 5, 1, 1);
-    @assert imgdata1.data[0] === 0;
-    var imgdata2 = ctx.getImageData(30, 15, 1, 1);
-    @assert imgdata2.data[0] === 255;
-    t.done();
-
-- name: 2d.imageData.get.clamp
-  desc: getImageData() clamps colours to the range [0, 255]
-  testing:
-    - 2d.pixelarray.range
-  code: |
-    ctx.fillStyle = 'rgb(-100, -200, -300)';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = 'rgb(256, 300, 400)';
-    ctx.fillRect(20, 10, 60, 10);
-    var imgdata1 = ctx.getImageData(10, 5, 1, 1);
-    @assert imgdata1.data[0] === 0;
-    @assert imgdata1.data[1] === 0;
-    @assert imgdata1.data[2] === 0;
-    var imgdata2 = ctx.getImageData(30, 15, 1, 1);
-    @assert imgdata2.data[0] === 255;
-    @assert imgdata2.data[1] === 255;
-    @assert imgdata2.data[2] === 255;
-    t.done();
-
-- name: 2d.imageData.get.length
-  desc: getImageData() returns a correctly-sized Uint8ClampedArray
-  testing:
-    - 2d.pixelarray.length
-  code: |
-    var imgdata = ctx.getImageData(0, 0, 10, 10);
-    @assert imgdata.data.length === imgdata.width*imgdata.height*4;
-    t.done();
-
-- name: 2d.imageData.get.order.cols
-  desc: getImageData() returns leftmost columns first
-  testing:
-    - 2d.pixelarray.order
-  code: |
-    ctx.fillStyle = '#fff';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#000';
-    ctx.fillRect(0, 0, 2, 50);
-    var imgdata = ctx.getImageData(0, 0, 10, 10);
-    @assert imgdata.data[0] === 0;
-    @assert imgdata.data[Math.round(imgdata.width/2*4)] === 255;
-    @assert imgdata.data[Math.round((imgdata.height/2)*imgdata.width*4)] === 0;
-    t.done();
-
-- name: 2d.imageData.get.order.rows
-  desc: getImageData() returns topmost rows first
-  testing:
-    - 2d.pixelarray.order
-  code: |
-    ctx.fillStyle = '#fff';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#000';
-    ctx.fillRect(0, 0, 100, 2);
-    var imgdata = ctx.getImageData(0, 0, 10, 10);
-    @assert imgdata.data[0] === 0;
-    @assert imgdata.data[Math.floor(imgdata.width/2*4)] === 0;
-    @assert imgdata.data[(imgdata.height/2)*imgdata.width*4] === 255;
-    t.done();
-
-- name: 2d.imageData.get.order.rgb
-  desc: getImageData() returns R then G then B
-  testing:
-    - 2d.pixelarray.order
-    - 2d.pixelarray.indexes
-  code: |
-    ctx.fillStyle = '#48c';
-    ctx.fillRect(0, 0, 100, 50);
-    var imgdata = ctx.getImageData(0, 0, 10, 10);
-    @assert imgdata.data[0] === 0x44;
-    @assert imgdata.data[1] === 0x88;
-    @assert imgdata.data[2] === 0xCC;
-    @assert imgdata.data[3] === 255;
-    @assert imgdata.data[4] === 0x44;
-    @assert imgdata.data[5] === 0x88;
-    @assert imgdata.data[6] === 0xCC;
-    @assert imgdata.data[7] === 255;
-    t.done();
-
-- name: 2d.imageData.get.order.alpha
-  desc: getImageData() returns A in the fourth component
-  testing:
-    - 2d.pixelarray.order
-  code: |
-    ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
-    ctx.fillRect(0, 0, 100, 50);
-    var imgdata = ctx.getImageData(0, 0, 10, 10);
-    @assert imgdata.data[3] < 200;
-    @assert imgdata.data[3] > 100;
-    t.done();
-
-- name: 2d.imageData.get.unaffected
-  desc: getImageData() is not affected by context state
-  testing:
-    - 2d.imageData.unaffected
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 50, 50)
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(50, 0, 50, 50)
-    ctx.save();
-    ctx.translate(50, 0);
-    ctx.globalAlpha = 0.1;
-    ctx.globalCompositeOperation = 'destination-atop';
-    ctx.shadowColor = '#f00';
-    ctx.rect(0, 0, 5, 5);
-    ctx.clip();
-    var imgdata = ctx.getImageData(0, 0, 50, 50);
-    ctx.restore();
-    ctx.putImageData(imgdata, 50, 0);
-    @assert pixel 25,25 ==~ 0,255,0,255;
-    @assert pixel 75,25 ==~ 0,255,0,255;
-    t.done();
-
-
-- name: 2d.imageData.object.properties
-  desc: ImageData objects have the right properties
-  testing:
-    - 2d.imageData.type
-  code: |
-    var imgdata = ctx.getImageData(0, 0, 10, 10);
-    @assert typeof(imgdata.width) === 'number';
-    @assert typeof(imgdata.height) === 'number';
-    @assert typeof(imgdata.data) === 'object';
-    t.done();
-
-- name: 2d.imageData.object.readonly
-  desc: ImageData objects properties are read-only
-  testing:
-    - 2d.imageData.type
-  code: |
-    var imgdata = ctx.getImageData(0, 0, 10, 10);
-    var w = imgdata.width;
-    var h = imgdata.height;
-    var d = imgdata.data;
-    imgdata.width = 123;
-    imgdata.height = 123;
-    imgdata.data = [100,100,100,100];
-    @assert imgdata.width === w;
-    @assert imgdata.height === h;
-    @assert imgdata.data === d;
-    @assert imgdata.data[0] === 0;
-    @assert imgdata.data[1] === 0;
-    @assert imgdata.data[2] === 0;
-    @assert imgdata.data[3] === 0;
-    t.done();
-
-- name: 2d.imageData.object.set
-  desc: ImageData.data can be modified
-  testing:
-    - 2d.pixelarray.modify
-  code: |
-    var imgdata = ctx.getImageData(0, 0, 10, 10);
-    imgdata.data[0] = 100;
-    @assert imgdata.data[0] === 100;
-    imgdata.data[0] = 200;
-    @assert imgdata.data[0] === 200;
-    t.done();
-
-- name: 2d.imageData.object.undefined
-  desc: ImageData.data converts undefined to 0
-  testing:
-    - 2d.pixelarray.modify
-  code: |
-    var imgdata = ctx.getImageData(0, 0, 10, 10);
-    imgdata.data[0] = 100;
-    imgdata.data[0] = undefined;
-    @assert imgdata.data[0] === 0;
-    t.done();
-
-- name: 2d.imageData.object.nan
-  desc: ImageData.data converts NaN to 0
-  testing:
-    - 2d.pixelarray.modify
-  code: |
-    var imgdata = ctx.getImageData(0, 0, 10, 10);
-    imgdata.data[0] = 100;
-    imgdata.data[0] = NaN;
-    @assert imgdata.data[0] === 0;
-    imgdata.data[0] = 100;
-    imgdata.data[0] = "cheese";
-    @assert imgdata.data[0] === 0;
-    t.done();
-
-- name: 2d.imageData.object.string
-  desc: ImageData.data converts strings to numbers with ToNumber
-  testing:
-    - 2d.pixelarray.modify
-  code: |
-    var imgdata = ctx.getImageData(0, 0, 10, 10);
-    imgdata.data[0] = 100;
-    imgdata.data[0] = "110";
-    @assert imgdata.data[0] === 110;
-    imgdata.data[0] = 100;
-    imgdata.data[0] = "0x78";
-    @assert imgdata.data[0] === 120;
-    imgdata.data[0] = 100;
-    imgdata.data[0] = " +130e0 ";
-    @assert imgdata.data[0] === 130;
-    t.done();
-
-- name: 2d.imageData.object.clamp
-  desc: ImageData.data clamps numbers to [0, 255]
-  testing:
-    - 2d.pixelarray.modify
-  code: |
-    var imgdata = ctx.getImageData(0, 0, 10, 10);
-    imgdata.data[0] = 100;
-    imgdata.data[0] = 300;
-    @assert imgdata.data[0] === 255;
-    imgdata.data[0] = 100;
-    imgdata.data[0] = -100;
-    @assert imgdata.data[0] === 0;
-    imgdata.data[0] = 100;
-    imgdata.data[0] = 200+Math.pow(2, 32);
-    @assert imgdata.data[0] === 255;
-    imgdata.data[0] = 100;
-    imgdata.data[0] = -200-Math.pow(2, 32);
-    @assert imgdata.data[0] === 0;
-    imgdata.data[0] = 100;
-    imgdata.data[0] = Math.pow(10, 39);
-    @assert imgdata.data[0] === 255;
-    imgdata.data[0] = 100;
-    imgdata.data[0] = -Math.pow(10, 39);
-    @assert imgdata.data[0] === 0;
-    imgdata.data[0] = 100;
-    imgdata.data[0] = -Infinity;
-    @assert imgdata.data[0] === 0;
-    imgdata.data[0] = 100;
-    imgdata.data[0] = Infinity;
-    @assert imgdata.data[0] === 255;
-    t.done();
-
-- name: 2d.imageData.object.round
-  desc: ImageData.data rounds numbers with round-to-zero
-  testing:
-    - 2d.pixelarray.modify
-  code: |
-    var imgdata = ctx.getImageData(0, 0, 10, 10);
-    imgdata.data[0] = 0.499;
-    @assert imgdata.data[0] === 0;
-    imgdata.data[0] = 0.5;
-    @assert imgdata.data[0] === 0;
-    imgdata.data[0] = 0.501;
-    @assert imgdata.data[0] === 1;
-    imgdata.data[0] = 1.499;
-    @assert imgdata.data[0] === 1;
-    imgdata.data[0] = 1.5;
-    @assert imgdata.data[0] === 2;
-    imgdata.data[0] = 1.501;
-    @assert imgdata.data[0] === 2;
-    imgdata.data[0] = 2.5;
-    @assert imgdata.data[0] === 2;
-    imgdata.data[0] = 3.5;
-    @assert imgdata.data[0] === 4;
-    imgdata.data[0] = 252.5;
-    @assert imgdata.data[0] === 252;
-    imgdata.data[0] = 253.5;
-    @assert imgdata.data[0] === 254;
-    imgdata.data[0] = 254.5;
-    @assert imgdata.data[0] === 254;
-    imgdata.data[0] = 256.5;
-    @assert imgdata.data[0] === 255;
-    imgdata.data[0] = -0.5;
-    @assert imgdata.data[0] === 0;
-    imgdata.data[0] = -1.5;
-    @assert imgdata.data[0] === 0;
-    t.done();
-
-- name: 2d.imageData.put.null
-  desc: putImageData() with null imagedata throws TypeError
-  testing:
-    - 2d.imageData.put.wrongtype
-  code: |
-    @assert throws TypeError ctx.putImageData(null, 0, 0);
-    t.done();
-
-- name: 2d.imageData.put.nonfinite
-  desc: putImageData() throws TypeError if arguments are not finite
-  testing:
-    - 2d.imageData.put.nonfinite
-  code: |
-    var imgdata = ctx.getImageData(0, 0, 10, 10);
-    @nonfinite @assert throws TypeError ctx.putImageData(<imgdata>, <10 Infinity -Infinity NaN>, <10 Infinity -Infinity NaN>);
-    @nonfinite @assert throws TypeError ctx.putImageData(<imgdata>, <10 Infinity -Infinity NaN>, <10 Infinity -Infinity NaN>, <10 Infinity -Infinity NaN>, <10 Infinity -Infinity NaN>, <10 Infinity -Infinity NaN>, <10 Infinity -Infinity NaN>);
-    t.done();
-
-- name: 2d.imageData.put.basic
-  desc: putImageData() puts image data from getImageData() onto the canvas
-  testing:
-    - 2d.imageData.put.normal
-    - 2d.imageData.put.3arg
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50)
-    var imgdata = ctx.getImageData(0, 0, 100, 50);
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50)
-    ctx.putImageData(imgdata, 0, 0);
-    @assert pixel 50,25 ==~ 0,255,0,255;
-    t.done();
-
-- name: 2d.imageData.put.created
-  desc: putImageData() puts image data from createImageData() onto the canvas
-  testing:
-    - 2d.imageData.put.normal
-  code: |
-    var imgdata = ctx.createImageData(100, 50);
-    for (var i = 0; i < imgdata.data.length; i += 4) {
-        imgdata.data[i] = 0;
-        imgdata.data[i+1] = 255;
-        imgdata.data[i+2] = 0;
-        imgdata.data[i+3] = 255;
-    }
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50)
-    ctx.putImageData(imgdata, 0, 0);
-    @assert pixel 50,25 ==~ 0,255,0,255;
-    t.done();
-
-- name: 2d.imageData.put.wrongtype
-  desc: putImageData() does not accept non-ImageData objects
-  testing:
-    - 2d.imageData.put.wrongtype
-  code: |
-    var imgdata = { width: 1, height: 1, data: [255, 0, 0, 255] };
-    @assert throws TypeError ctx.putImageData(imgdata, 0, 0);
-    @assert throws TypeError ctx.putImageData("cheese", 0, 0);
-    @assert throws TypeError ctx.putImageData(42, 0, 0);
-    t.done();
-
-- name: 2d.imageData.put.cross
-  desc: putImageData() accepts image data got from a different canvas
-  testing:
-    - 2d.imageData.put.normal
-  code: |
-    var offscreenCanvas2 = new OffscreenCanvas(100, 50);
-    var ctx2 = offscreenCanvas2.getContext('2d');
-    ctx2.fillStyle = '#0f0';
-    ctx2.fillRect(0, 0, 100, 50)
-    var imgdata = ctx2.getImageData(0, 0, 100, 50);
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50)
-    ctx.putImageData(imgdata, 0, 0);
-    @assert pixel 50,25 ==~ 0,255,0,255;
-    t.done();
-
-- name: 2d.imageData.put.alpha
-  desc: putImageData() puts non-solid image data correctly
-  testing:
-    - 2d.imageData.put.normal
-  code: |
-    ctx.fillStyle = 'rgba(0, 255, 0, 0.25)';
-    ctx.fillRect(0, 0, 100, 50)
-    var imgdata = ctx.getImageData(0, 0, 100, 50);
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50)
-    ctx.putImageData(imgdata, 0, 0);
-    @assert pixel 50,25 ==~ 0,255,0,64;
-    t.done();
-
-- name: 2d.imageData.put.modified
-  desc: putImageData() puts modified image data correctly
-  testing:
-    - 2d.imageData.put.normal
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50)
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(45, 20, 10, 10)
-    var imgdata = ctx.getImageData(45, 20, 10, 10);
-    for (var i = 0, len = imgdata.width*imgdata.height*4; i < len; i += 4)
-    {
-        imgdata.data[i] = 0;
-        imgdata.data[i+1] = 255;
-    }
-    ctx.putImageData(imgdata, 45, 20);
-    @assert pixel 50,25 ==~ 0,255,0,255;
-    t.done();
-
-- name: 2d.imageData.put.dirty.zero
-  desc: putImageData() with zero-sized dirty rectangle puts nothing
-  testing:
-    - 2d.imageData.put.normal
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50)
-    var imgdata = ctx.getImageData(0, 0, 100, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50)
-    ctx.putImageData(imgdata, 0, 0, 0, 0, 0, 0);
-    @assert pixel 50,25 ==~ 0,255,0,255;
-    t.done();
-
-- name: 2d.imageData.put.dirty.rect1
-  desc: putImageData() only modifies areas inside the dirty rectangle, using width and height
-  testing:
-    - 2d.imageData.put.normal
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50)
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 20, 20)
-    var imgdata = ctx.getImageData(0, 0, 100, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50)
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(40, 20, 20, 20)
-    ctx.putImageData(imgdata, 40, 20, 0, 0, 20, 20);
-    @assert pixel 50,25 ==~ 0,255,0,255;
-    @assert pixel 35,25 ==~ 0,255,0,255;
-    @assert pixel 65,25 ==~ 0,255,0,255;
-    @assert pixel 50,15 ==~ 0,255,0,255;
-    @assert pixel 50,45 ==~ 0,255,0,255;
-    t.done();
-
-- name: 2d.imageData.put.dirty.rect2
-  desc: putImageData() only modifies areas inside the dirty rectangle, using x and y
-  testing:
-    - 2d.imageData.put.normal
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50)
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(60, 30, 20, 20)
-    var imgdata = ctx.getImageData(0, 0, 100, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50)
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(40, 20, 20, 20)
-    ctx.putImageData(imgdata, -20, -10, 60, 30, 20, 20);
-    @assert pixel 50,25 ==~ 0,255,0,255;
-    @assert pixel 35,25 ==~ 0,255,0,255;
-    @assert pixel 65,25 ==~ 0,255,0,255;
-    @assert pixel 50,15 ==~ 0,255,0,255;
-    @assert pixel 50,45 ==~ 0,255,0,255;
-    t.done();
-
-- name: 2d.imageData.put.dirty.negative
-  desc: putImageData() handles negative-sized dirty rectangles correctly
-  testing:
-    - 2d.imageData.put.normal
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50)
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 20, 20)
-    var imgdata = ctx.getImageData(0, 0, 100, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50)
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(40, 20, 20, 20)
-    ctx.putImageData(imgdata, 40, 20, 20, 20, -20, -20);
-    @assert pixel 50,25 ==~ 0,255,0,255;
-    @assert pixel 35,25 ==~ 0,255,0,255;
-    @assert pixel 65,25 ==~ 0,255,0,255;
-    @assert pixel 50,15 ==~ 0,255,0,255;
-    @assert pixel 50,45 ==~ 0,255,0,255;
-    t.done();
-
-- name: 2d.imageData.put.dirty.outside
-  desc: putImageData() handles dirty rectangles outside the canvas correctly
-  testing:
-    - 2d.imageData.put.normal
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50)
-    var imgdata = ctx.getImageData(0, 0, 100, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50)
-    ctx.putImageData(imgdata, 100, 20, 20, 20, -20, -20);
-    ctx.putImageData(imgdata, 200, 200, 0, 0, 100, 50);
-    ctx.putImageData(imgdata, 40, 20, -30, -20, 30, 20);
-    ctx.putImageData(imgdata, -30, 20, 0, 0, 30, 20);
-    @assert pixel 50,25 ==~ 0,255,0,255;
-    @assert pixel 98,15 ==~ 0,255,0,255;
-    @assert pixel 98,25 ==~ 0,255,0,255;
-    @assert pixel 98,45 ==~ 0,255,0,255;
-    @assert pixel 1,5 ==~ 0,255,0,255;
-    @assert pixel 1,25 ==~ 0,255,0,255;
-    @assert pixel 1,45 ==~ 0,255,0,255;
-    t.done();
-
-- name: 2d.imageData.put.unchanged
-  desc: putImageData(getImageData(...), ...) has no effect
-  testing:
-    - 2d.imageData.unchanged
-  code: |
-    var i = 0;
-    for (var y = 0; y < 16; ++y) {
-        for (var x = 0; x < 16; ++x, ++i) {
-            ctx.fillStyle = 'rgba(' + i + ',' + (Math.floor(i*1.5) % 256) + ',' + (Math.floor(i*23.3) % 256) + ',' + (i/256) + ')';
-            ctx.fillRect(x, y, 1, 1);
-        }
-    }
-    var imgdata1 = ctx.getImageData(0.1, 0.2, 15.8, 15.9);
-    var olddata = [];
-    for (var i = 0; i < imgdata1.data.length; ++i)
-        olddata[i] = imgdata1.data[i];
-    ctx.putImageData(imgdata1, 0.1, 0.2);
-    var imgdata2 = ctx.getImageData(0.1, 0.2, 15.8, 15.9);
-    for (var i = 0; i < imgdata2.data.length; ++i) {
-        @assert olddata[i] === imgdata2.data[i];
-    }
-    t.done();
-
-- name: 2d.imageData.put.unaffected
-  desc: putImageData() is not affected by context state
-  testing:
-    - 2d.imageData.unaffected
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50)
-    var imgdata = ctx.getImageData(0, 0, 100, 50);
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50)
-    ctx.globalAlpha = 0.1;
-    ctx.globalCompositeOperation = 'destination-atop';
-    ctx.shadowColor = '#f00';
-    ctx.shadowBlur = 1;
-    ctx.translate(100, 50);
-    ctx.scale(0.1, 0.1);
-    ctx.putImageData(imgdata, 0, 0);
-    @assert pixel 50,25 ==~ 0,255,0,255;
-    t.done();
-
-- name: 2d.imageData.put.clip
-  desc: putImageData() is not affected by clipping regions
-  testing:
-    - 2d.imageData.unaffected
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50)
-    var imgdata = ctx.getImageData(0, 0, 100, 50);
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50)
-    ctx.beginPath();
-    ctx.rect(0, 0, 50, 50);
-    ctx.clip();
-    ctx.putImageData(imgdata, 0, 0);
-    @assert pixel 25,25 ==~ 0,255,0,255;
-    @assert pixel 75,25 ==~ 0,255,0,255;
-    t.done();
-
-- name: 2d.imageData.put.path
-  desc: putImageData() does not affect the current path
-  testing:
-    - 2d.imageData.put.normal
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50)
-    ctx.rect(0, 0, 100, 50);
-    var imgdata = ctx.getImageData(0, 0, 100, 50);
-    ctx.putImageData(imgdata, 0, 0);
-    ctx.fillStyle = '#0f0';
-    ctx.fill();
-    @assert pixel 50,25 ==~ 0,255,0,255;
-    t.done();
-
-- name: 2d.line.defaults
-  testing:
-    - 2d.lineWidth.default
-    - 2d.lineCap.default
-    - 2d.lineJoin.default
-    - 2d.miterLimit.default
-  code: |
-    @assert ctx.lineWidth === 1;
-    @assert ctx.lineCap === 'butt';
-    @assert ctx.lineJoin === 'miter';
-    @assert ctx.miterLimit === 10;
-    t.done();
-
-- name: 2d.line.width.basic
-  desc: lineWidth determines the width of line strokes
-  testing:
-    - 2d.lineWidth
-  code: |
-    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);
-    @assert pixel 14,25 == 0,255,0,255;
-    @assert pixel 15,25 == 0,255,0,255;
-    @assert pixel 16,25 == 0,255,0,255;
-    @assert pixel 25,25 == 0,255,0,255;
-    @assert pixel 34,25 == 0,255,0,255;
-    @assert pixel 35,25 == 0,255,0,255;
-    @assert pixel 36,25 == 0,255,0,255;
-    @assert pixel 64,25 == 0,255,0,255;
-    @assert pixel 65,25 == 0,255,0,255;
-    @assert pixel 66,25 == 0,255,0,255;
-    @assert pixel 75,25 == 0,255,0,255;
-    @assert pixel 84,25 == 0,255,0,255;
-    @assert pixel 85,25 == 0,255,0,255;
-    @assert pixel 86,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.line.width.transformed
-  desc: Line stroke widths are affected by scale transformations
-  testing:
-    - 2d.lineWidth
-  code: |
-    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);
-    @assert pixel 14,25 == 0,255,0,255;
-    @assert pixel 15,25 == 0,255,0,255;
-    @assert pixel 16,25 == 0,255,0,255;
-    @assert pixel 25,25 == 0,255,0,255;
-    @assert pixel 34,25 == 0,255,0,255;
-    @assert pixel 35,25 == 0,255,0,255;
-    @assert pixel 36,25 == 0,255,0,255;
-    @assert pixel 64,25 == 0,255,0,255;
-    @assert pixel 65,25 == 0,255,0,255;
-    @assert pixel 66,25 == 0,255,0,255;
-    @assert pixel 75,25 == 0,255,0,255;
-    @assert pixel 84,25 == 0,255,0,255;
-    @assert pixel 85,25 == 0,255,0,255;
-    @assert pixel 86,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.line.width.scaledefault
-  desc: Default lineWidth strokes are affected by scale transformations
-  testing:
-    - 2d.lineWidth
-  code: |
-    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();
-    @assert pixel 25,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 75,25 == 0,255,0,255;
-    @assert pixel 50,5 == 0,255,0,255;
-    @assert pixel 50,45 == 0,255,0,255;
-    t.done();
-
-- name: 2d.line.width.valid
-  desc: Setting lineWidth to valid values works
-  testing:
-    - 2d.lineWidth.set
-    - 2d.lineWidth.get
-  code: |
-    ctx.lineWidth = 1.5;
-    @assert ctx.lineWidth === 1.5;
-    ctx.lineWidth = "1e1";
-    @assert ctx.lineWidth === 10;
-    ctx.lineWidth = 1/1024;
-    @assert ctx.lineWidth === 1/1024;
-    ctx.lineWidth = 1000;
-    @assert ctx.lineWidth === 1000;
-    t.done();
-
-- name: 2d.line.width.invalid
-  desc: Setting lineWidth to invalid values is ignored
-  testing:
-    - 2d.lineWidth.invalid
-  code: |
-    ctx.lineWidth = 1.5;
-    @assert ctx.lineWidth === 1.5;
-    ctx.lineWidth = 1.5;
-    ctx.lineWidth = 0;
-    @assert ctx.lineWidth === 1.5;
-    ctx.lineWidth = 1.5;
-    ctx.lineWidth = -1;
-    @assert ctx.lineWidth === 1.5;
-    ctx.lineWidth = 1.5;
-    ctx.lineWidth = Infinity;
-    @assert ctx.lineWidth === 1.5;
-    ctx.lineWidth = 1.5;
-    ctx.lineWidth = -Infinity;
-    @assert ctx.lineWidth === 1.5;
-    ctx.lineWidth = 1.5;
-    ctx.lineWidth = NaN;
-    @assert ctx.lineWidth === 1.5;
-    t.done();
-
-- name: 2d.line.cap.butt
-  desc: lineCap 'butt' is rendered correctly
-  testing:
-    - 2d.lineCap.butt
-  code: |
-    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);
-    @assert pixel 25,14 == 0,255,0,255;
-    @assert pixel 25,15 == 0,255,0,255;
-    @assert pixel 25,16 == 0,255,0,255;
-    @assert pixel 25,34 == 0,255,0,255;
-    @assert pixel 25,35 == 0,255,0,255;
-    @assert pixel 25,36 == 0,255,0,255;
-    @assert pixel 75,14 == 0,255,0,255;
-    @assert pixel 75,15 == 0,255,0,255;
-    @assert pixel 75,16 == 0,255,0,255;
-    @assert pixel 75,34 == 0,255,0,255;
-    @assert pixel 75,35 == 0,255,0,255;
-    @assert pixel 75,36 == 0,255,0,255;
-    t.done();
-
-- name: 2d.line.cap.round
-  desc: lineCap 'round' is rendered correctly
-  testing:
-    - 2d.lineCap.round
-  code: |
-    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();
-    @assert pixel 17,6 == 0,255,0,255;
-    @assert pixel 25,6 == 0,255,0,255;
-    @assert pixel 32,6 == 0,255,0,255;
-    @assert pixel 17,43 == 0,255,0,255;
-    @assert pixel 25,43 == 0,255,0,255;
-    @assert pixel 32,43 == 0,255,0,255;
-    @assert pixel 67,6 == 0,255,0,255;
-    @assert pixel 75,6 == 0,255,0,255;
-    @assert pixel 82,6 == 0,255,0,255;
-    @assert pixel 67,43 == 0,255,0,255;
-    @assert pixel 75,43 == 0,255,0,255;
-    @assert pixel 82,43 == 0,255,0,255;
-    t.done();
-
-- name: 2d.line.cap.square
-  desc: lineCap 'square' is rendered correctly
-  testing:
-    - 2d.lineCap.square
-  code: |
-    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);
-    @assert pixel 25,4 == 0,255,0,255;
-    @assert pixel 25,5 == 0,255,0,255;
-    @assert pixel 25,6 == 0,255,0,255;
-    @assert pixel 25,44 == 0,255,0,255;
-    @assert pixel 25,45 == 0,255,0,255;
-    @assert pixel 25,46 == 0,255,0,255;
-    @assert pixel 75,4 == 0,255,0,255;
-    @assert pixel 75,5 == 0,255,0,255;
-    @assert pixel 75,6 == 0,255,0,255;
-    @assert pixel 75,44 == 0,255,0,255;
-    @assert pixel 75,45 == 0,255,0,255;
-    @assert pixel 75,46 == 0,255,0,255;
-    t.done();
-
-- name: 2d.line.cap.open
-  desc: Line caps are drawn at the corners of an unclosed rectangle
-  testing:
-    - 2d.lineCap.end
-  code: |
-    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();
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 48,1 == 0,255,0,255;
-    @assert pixel 48,48 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    t.done();
-
-- name: 2d.line.cap.closed
-  desc: Line caps are not drawn at the corners of an unclosed rectangle
-  testing:
-    - 2d.lineCap.end
-  code: |
-    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();
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 48,1 == 0,255,0,255;
-    @assert pixel 48,48 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    t.done();
-
-- name: 2d.line.cap.valid
-  desc: Setting lineCap to valid values works
-  testing:
-    - 2d.lineCap.set
-    - 2d.lineCap.get
-  code: |
-    ctx.lineCap = 'butt'
-    @assert ctx.lineCap === 'butt';
-    ctx.lineCap = 'round';
-    @assert ctx.lineCap === 'round';
-    ctx.lineCap = 'square';
-    @assert ctx.lineCap === 'square';
-    t.done();
-
-- name: 2d.line.cap.invalid
-  desc: Setting lineCap to invalid values is ignored
-  testing:
-    - 2d.lineCap.invalid
-  code: |
-    ctx.lineCap = 'butt'
-    @assert ctx.lineCap === 'butt';
-    ctx.lineCap = 'butt';
-    ctx.lineCap = 'invalid';
-    @assert ctx.lineCap === 'butt';
-    ctx.lineCap = 'butt';
-    ctx.lineCap = 'ROUND';
-    @assert ctx.lineCap === 'butt';
-    ctx.lineCap = 'butt';
-    ctx.lineCap = 'round\0';
-    @assert ctx.lineCap === 'butt';
-    ctx.lineCap = 'butt';
-    ctx.lineCap = 'round ';
-    @assert ctx.lineCap === 'butt';
-    ctx.lineCap = 'butt';
-    ctx.lineCap = "";
-    @assert ctx.lineCap === 'butt';
-    ctx.lineCap = 'butt';
-    ctx.lineCap = 'bevel';
-    @assert ctx.lineCap === 'butt';
-    t.done();
-
-- name: 2d.line.join.bevel
-  desc: lineJoin 'bevel' is rendered correctly
-  testing:
-    - 2d.lineJoin.common
-    - 2d.lineJoin.bevel
-  code: |
-    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();
-    @assert pixel 34,16 == 0,255,0,255;
-    @assert pixel 34,15 == 0,255,0,255;
-    @assert pixel 35,15 == 0,255,0,255;
-    @assert pixel 36,15 == 0,255,0,255;
-    @assert pixel 36,14 == 0,255,0,255;
-    @assert pixel 84,16 == 0,255,0,255;
-    @assert pixel 84,15 == 0,255,0,255;
-    @assert pixel 85,15 == 0,255,0,255;
-    @assert pixel 86,15 == 0,255,0,255;
-    @assert pixel 86,14 == 0,255,0,255;
-    t.done();
-
-- name: 2d.line.join.round
-  desc: lineJoin 'round' is rendered correctly
-  testing:
-    - 2d.lineJoin.round
-  code: |
-    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();
-    @assert pixel 36,14 == 0,255,0,255;
-    @assert pixel 36,13 == 0,255,0,255;
-    @assert pixel 37,13 == 0,255,0,255;
-    @assert pixel 38,13 == 0,255,0,255;
-    @assert pixel 38,12 == 0,255,0,255;
-    @assert pixel 86,14 == 0,255,0,255;
-    @assert pixel 86,13 == 0,255,0,255;
-    @assert pixel 87,13 == 0,255,0,255;
-    @assert pixel 88,13 == 0,255,0,255;
-    @assert pixel 88,12 == 0,255,0,255;
-    t.done();
-
-- name: 2d.line.join.miter
-  desc: lineJoin 'miter' is rendered correctly
-  testing:
-    - 2d.lineJoin.miter
-  code: |
-    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);
-    @assert pixel 38,12 == 0,255,0,255;
-    @assert pixel 39,11 == 0,255,0,255;
-    @assert pixel 40,10 == 0,255,0,255;
-    @assert pixel 41,9 == 0,255,0,255;
-    @assert pixel 42,8 == 0,255,0,255;
-    @assert pixel 88,12 == 0,255,0,255;
-    @assert pixel 89,11 == 0,255,0,255;
-    @assert pixel 90,10 == 0,255,0,255;
-    @assert pixel 91,9 == 0,255,0,255;
-    @assert pixel 92,8 == 0,255,0,255;
-    t.done();
-
-- name: 2d.line.join.open
-  desc: Line joins are not drawn at the corner of an unclosed rectangle
-  testing:
-    - 2d.lineJoin.joins
-  code: |
-    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();
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 48,1 == 0,255,0,255;
-    @assert pixel 48,48 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    t.done();
-
-- name: 2d.line.join.closed
-  desc: Line joins are drawn at the corner of a closed rectangle
-  testing:
-    - 2d.lineJoin.joinclosed
-  code: |
-    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();
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 48,1 == 0,255,0,255;
-    @assert pixel 48,48 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    t.done();
-
-- name: 2d.line.join.parallel
-  desc: Line joins are drawn at 180-degree joins
-  testing:
-    - 2d.lineJoin.joins
-  code: |
-    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();
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 48,1 == 0,255,0,255;
-    @assert pixel 48,48 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    t.done();
-
-- name: 2d.line.join.valid
-  desc: Setting lineJoin to valid values works
-  testing:
-    - 2d.lineJoin.set
-    - 2d.lineJoin.get
-  code: |
-    ctx.lineJoin = 'bevel'
-    @assert ctx.lineJoin === 'bevel';
-    ctx.lineJoin = 'round';
-    @assert ctx.lineJoin === 'round';
-    ctx.lineJoin = 'miter';
-    @assert ctx.lineJoin === 'miter';
-    t.done();
-
-- name: 2d.line.join.invalid
-  desc: Setting lineJoin to invalid values is ignored
-  testing:
-    - 2d.lineJoin.invalid
-  code: |
-    ctx.lineJoin = 'bevel'
-    @assert ctx.lineJoin === 'bevel';
-    ctx.lineJoin = 'bevel';
-    ctx.lineJoin = 'invalid';
-    @assert ctx.lineJoin === 'bevel';
-    ctx.lineJoin = 'bevel';
-    ctx.lineJoin = 'ROUND';
-    @assert ctx.lineJoin === 'bevel';
-    ctx.lineJoin = 'bevel';
-    ctx.lineJoin = 'round\0';
-    @assert ctx.lineJoin === 'bevel';
-    ctx.lineJoin = 'bevel';
-    ctx.lineJoin = 'round ';
-    @assert ctx.lineJoin === 'bevel';
-    ctx.lineJoin = 'bevel';
-    ctx.lineJoin = "";
-    @assert ctx.lineJoin === 'bevel';
-    ctx.lineJoin = 'bevel';
-    ctx.lineJoin = 'butt';
-    @assert ctx.lineJoin === 'bevel';
-    t.done();
-
-- name: 2d.line.miter.exceeded
-  desc: Miter joins are not drawn when the miter limit is exceeded
-  testing:
-    - 2d.lineJoin.miterLimit
-    - 2d.lineJoin.miter
-  code: |
-    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();
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 48,1 == 0,255,0,255;
-    @assert pixel 48,48 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    t.done();
-
-- name: 2d.line.miter.acute
-  desc: Miter joins are drawn correctly with acute angles
-  testing:
-    - 2d.lineJoin.miterLimit
-    - 2d.lineJoin.miter
-  code: |
-    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();
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 48,1 == 0,255,0,255;
-    @assert pixel 48,48 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    t.done();
-
-- name: 2d.line.miter.obtuse
-  desc: Miter joins are drawn correctly with obtuse angles
-  testing:
-    - 2d.lineJoin.miterLimit
-    - 2d.lineJoin.miter
-  code: |
-    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();
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 48,1 == 0,255,0,255;
-    @assert pixel 48,48 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    t.done();
-
-- name: 2d.line.miter.rightangle
-  desc: Miter joins are not drawn when the miter limit is exceeded, on exact right angles
-  testing:
-    - 2d.lineJoin.miter
-  code: |
-    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();
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 48,1 == 0,255,0,255;
-    @assert pixel 48,48 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    t.done();
-
-- name: 2d.line.miter.lineedge
-  desc: Miter joins are not drawn when the miter limit is exceeded at the corners of a zero-height rectangle
-  testing:
-    - 2d.lineJoin.miter
-  code: |
-    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);
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 48,1 == 0,255,0,255;
-    @assert pixel 48,48 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    t.done();
-
-- name: 2d.line.miter.within
-  desc: Miter joins are drawn when the miter limit is not quite exceeded
-  testing:
-    - 2d.lineJoin.miter
-  code: |
-    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();
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 48,1 == 0,255,0,255;
-    @assert pixel 48,48 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    t.done();
-
-- name: 2d.line.miter.valid
-  desc: Setting miterLimit to valid values works
-  testing:
-    - 2d.miterLimit.set
-    - 2d.miterLimit.get
-  code: |
-    ctx.miterLimit = 1.5;
-    @assert ctx.miterLimit === 1.5;
-    ctx.miterLimit = "1e1";
-    @assert ctx.miterLimit === 10;
-    ctx.miterLimit = 1/1024;
-    @assert ctx.miterLimit === 1/1024;
-    ctx.miterLimit = 1000;
-    @assert ctx.miterLimit === 1000;
-    t.done();
-
-- name: 2d.line.miter.invalid
-  desc: Setting miterLimit to invalid values is ignored
-  testing:
-    - 2d.miterLimit.invalid
-  code: |
-    ctx.miterLimit = 1.5;
-    @assert ctx.miterLimit === 1.5;
-    ctx.miterLimit = 1.5;
-    ctx.miterLimit = 0;
-    @assert ctx.miterLimit === 1.5;
-    ctx.miterLimit = 1.5;
-    ctx.miterLimit = -1;
-    @assert ctx.miterLimit === 1.5;
-    ctx.miterLimit = 1.5;
-    ctx.miterLimit = Infinity;
-    @assert ctx.miterLimit === 1.5;
-    ctx.miterLimit = 1.5;
-    ctx.miterLimit = -Infinity;
-    @assert ctx.miterLimit === 1.5;
-    ctx.miterLimit = 1.5;
-    ctx.miterLimit = NaN;
-    @assert ctx.miterLimit === 1.5;
-    t.done();
-
-- name: 2d.line.cross
-  code: |
-    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();
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 48,1 == 0,255,0,255;
-    @assert pixel 48,48 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    t.done();
-
-- name: 2d.line.union
-  code: |
-    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();
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 25,1 == 0,255,0,255;
-    @assert pixel 48,1 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 25,1 == 0,255,0,255;
-    @assert pixel 48,48 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.initial
-  testing:
-    - 2d.path.initial
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.closePath();
-    ctx.fillStyle = '#f00';
-    ctx.fill();
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.beginPath
-  testing:
-    - 2d.path.beginPath
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.rect(0, 0, 100, 50);
-    ctx.beginPath();
-    ctx.fillStyle = '#f00';
-    ctx.fill();
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.moveTo.basic
-  testing:
-    - 2d.path.moveTo
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.rect(0, 0, 10, 50);
-    ctx.moveTo(100, 0);
-    ctx.lineTo(10, 0);
-    ctx.lineTo(10, 50);
-    ctx.lineTo(100, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.fill();
-    @assert pixel 90,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.moveTo.newsubpath
-  testing:
-    - 2d.path.moveTo
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.beginPath();
-    ctx.moveTo(0, 0);
-    ctx.moveTo(100, 0);
-    ctx.moveTo(100, 50);
-    ctx.moveTo(0, 50);
-    ctx.fillStyle = '#f00';
-    ctx.fill();
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.moveTo.multiple
-  testing:
-    - 2d.path.moveTo
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.moveTo(0, 25);
-    ctx.moveTo(100, 25);
-    ctx.moveTo(0, 25);
-    ctx.lineTo(100, 25);
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 50;
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.moveTo.nonfinite
-  desc: moveTo() with Infinity/NaN is ignored
-  testing:
-    - 2d.nonfinite
-  code: |
-    ctx.moveTo(0, 0);
-    ctx.lineTo(100, 0);
-    @nonfinite ctx.moveTo(<0 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>);
-    ctx.lineTo(100, 50);
-    ctx.lineTo(0, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.fill();
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.closePath.empty
-  testing:
-    - 2d.path.closePath.empty
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.closePath();
-    ctx.fillStyle = '#f00';
-    ctx.fill();
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.closePath.newline
-  testing:
-    - 2d.path.closePath.nonempty
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 50;
-    ctx.moveTo(-100, 25);
-    ctx.lineTo(-100, -100);
-    ctx.lineTo(200, -100);
-    ctx.lineTo(200, 25);
-    ctx.closePath();
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.closePath.nextpoint
-  testing:
-    - 2d.path.closePath.nonempty
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 50;
-    ctx.moveTo(-100, 25);
-    ctx.lineTo(-100, -1000);
-    ctx.closePath();
-    ctx.lineTo(1000, 25);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.lineTo.ensuresubpath.1
-  desc: If there is no subpath, the point is added and nothing is drawn
-  testing:
-    - 2d.path.lineTo.empty
-    - 2d.path.ensure
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#f00';
-    ctx.lineWidth = 50;
-    ctx.beginPath();
-    ctx.lineTo(100, 50);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.lineTo.ensuresubpath.2
-  desc: If there is no subpath, the point is added and used for subsequent drawing
-  testing:
-    - 2d.path.lineTo.empty
-    - 2d.path.ensure
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 50;
-    ctx.beginPath();
-    ctx.lineTo(0, 25);
-    ctx.lineTo(100, 25);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.lineTo.basic
-  testing:
-    - 2d.path.lineTo.nonempty
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 50;
-    ctx.beginPath();
-    ctx.moveTo(0, 25);
-    ctx.lineTo(100, 25);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.lineTo.nextpoint
-  testing:
-    - 2d.path.lineTo.nonempty
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 50;
-    ctx.beginPath();
-    ctx.moveTo(-100, -100);
-    ctx.lineTo(0, 25);
-    ctx.lineTo(100, 25);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.lineTo.nonfinite
-  desc: lineTo() with Infinity/NaN is ignored
-  testing:
-    - 2d.nonfinite
-  code: |
-    ctx.moveTo(0, 0);
-    ctx.lineTo(100, 0);
-    @nonfinite ctx.lineTo(<0 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>);
-    ctx.lineTo(100, 50);
-    ctx.lineTo(0, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.fill();
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 90,45 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.lineTo.nonfinite.details
-  desc: lineTo() with Infinity/NaN for first arg still converts the second arg
-  testing:
-    - 2d.nonfinite
-  code: |
-    for (var arg1 of [Infinity, -Infinity, NaN]) {
-      var converted = false;
-      ctx.lineTo(arg1, { valueOf: function() { converted = true; return 0; } });
-      @assert converted;
-    }
-    t.done();
-
-- name: 2d.path.quadraticCurveTo.ensuresubpath.1
-  desc: If there is no subpath, the first control point is added (and nothing is drawn up to it)
-  testing:
-    - 2d.path.quadratic.empty
-    - 2d.path.ensure
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#f00';
-    ctx.lineWidth = 50;
-    ctx.beginPath();
-    ctx.quadraticCurveTo(100, 50, 200, 50);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 95,45 == 0,255,0,255; @moz-todo
-    t.done();
-
-- name: 2d.path.quadraticCurveTo.ensuresubpath.2
-  desc: If there is no subpath, the first control point is added
-  testing:
-    - 2d.path.quadratic.empty
-    - 2d.path.ensure
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 50;
-    ctx.beginPath();
-    ctx.quadraticCurveTo(0, 25, 100, 25);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 5,45 == 0,255,0,255; @moz-todo
-    t.done();
-
-- name: 2d.path.quadraticCurveTo.basic
-  testing:
-    - 2d.path.quadratic.nonempty
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 50;
-    ctx.beginPath();
-    ctx.moveTo(0, 25);
-    ctx.quadraticCurveTo(100, 25, 100, 25);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.quadraticCurveTo.shape
-  testing:
-    - 2d.path.quadratic.nonempty
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 55;
-    ctx.beginPath();
-    ctx.moveTo(-1000, 1050);
-    ctx.quadraticCurveTo(0, -1000, 1200, 1050);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.quadraticCurveTo.scaled
-  testing:
-    - 2d.path.quadratic.nonempty
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.scale(1000, 1000);
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 0.055;
-    ctx.beginPath();
-    ctx.moveTo(-1, 1.05);
-    ctx.quadraticCurveTo(0, -1, 1.2, 1.05);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.quadraticCurveTo.nonfinite
-  desc: quadraticCurveTo() with Infinity/NaN is ignored
-  testing:
-    - 2d.nonfinite
-  code: |
-    ctx.moveTo(0, 0);
-    ctx.lineTo(100, 0);
-    @nonfinite ctx.quadraticCurveTo(<0 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>);
-    ctx.lineTo(100, 50);
-    ctx.lineTo(0, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.fill();
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 90,45 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.bezierCurveTo.ensuresubpath.1
-  desc: If there is no subpath, the first control point is added (and nothing is drawn up to it)
-  testing:
-    - 2d.path.bezier.empty
-    - 2d.path.ensure
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#f00';
-    ctx.lineWidth = 50;
-    ctx.beginPath();
-    ctx.bezierCurveTo(100, 50, 200, 50, 200, 50);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 95,45 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.bezierCurveTo.ensuresubpath.2
-  desc: If there is no subpath, the first control point is added
-  testing:
-    - 2d.path.bezier.empty
-    - 2d.path.ensure
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 50;
-    ctx.beginPath();
-    ctx.bezierCurveTo(0, 25, 100, 25, 100, 25);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 5,45 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.bezierCurveTo.basic
-  testing:
-    - 2d.path.bezier.nonempty
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 50;
-    ctx.beginPath();
-    ctx.moveTo(0, 25);
-    ctx.bezierCurveTo(100, 25, 100, 25, 100, 25);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.bezierCurveTo.shape
-  testing:
-    - 2d.path.bezier.nonempty
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 55;
-    ctx.beginPath();
-    ctx.moveTo(-2000, 3100);
-    ctx.bezierCurveTo(-2000, -1000, 2100, -1000, 2100, 3100);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.bezierCurveTo.scaled
-  testing:
-    - 2d.path.bezier.nonempty
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.scale(1000, 1000);
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 0.055;
-    ctx.beginPath();
-    ctx.moveTo(-2, 3.1);
-    ctx.bezierCurveTo(-2, -1, 2.1, -1, 2.1, 3.1);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.bezierCurveTo.nonfinite
-  desc: bezierCurveTo() with Infinity/NaN is ignored
-  testing:
-    - 2d.nonfinite
-  code: |
-    ctx.moveTo(0, 0);
-    ctx.lineTo(100, 0);
-    @nonfinite ctx.bezierCurveTo(<0 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>);
-    ctx.lineTo(100, 50);
-    ctx.lineTo(0, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.fill();
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 90,45 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.arcTo.ensuresubpath.1
-  desc: If there is no subpath, the first control point is added (and nothing is drawn up to it)
-  testing:
-    - 2d.path.arcTo.empty
-    - 2d.path.ensure
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.lineWidth = 50;
-    ctx.strokeStyle = '#f00';
-    ctx.beginPath();
-    ctx.arcTo(100, 50, 200, 50, 0.1);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.arcTo.ensuresubpath.2
-  desc: If there is no subpath, the first control point is added
-  testing:
-    - 2d.path.arcTo.empty
-    - 2d.path.ensure
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.lineWidth = 50;
-    ctx.strokeStyle = '#0f0';
-    ctx.beginPath();
-    ctx.arcTo(0, 25, 50, 250, 0.1); // adds (x1,y1), draws nothing
-    ctx.lineTo(100, 25);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.arcTo.coincide.1
-  desc: arcTo() has no effect if P0 = P1
-  testing:
-    - 2d.path.arcTo.coincide.01
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.lineWidth = 50;
-    ctx.strokeStyle = '#0f0';
-    ctx.beginPath();
-    ctx.moveTo(0, 25);
-    ctx.arcTo(0, 25, 50, 1000, 1);
-    ctx.lineTo(100, 25);
-    ctx.stroke();
-    ctx.strokeStyle = '#f00';
-    ctx.beginPath();
-    ctx.moveTo(50, 25);
-    ctx.arcTo(50, 25, 100, 25, 1);
-    ctx.stroke();
-    @assert pixel 50,1 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 50,48 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.arcTo.coincide.2
-  desc: arcTo() draws a straight line to P1 if P1 = P2
-  testing:
-    - 2d.path.arcTo.coincide.12
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.lineWidth = 50;
-    ctx.strokeStyle = '#0f0';
-    ctx.beginPath();
-    ctx.moveTo(0, 25);
-    ctx.arcTo(100, 25, 100, 25, 1);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.arcTo.collinear.1
-  desc: arcTo() with all points on a line, and P1 between P0/P2, draws a straight line to P1
-  testing:
-    - 2d.path.arcTo.collinear
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.lineWidth = 50;
-    ctx.strokeStyle = '#0f0';
-    ctx.beginPath();
-    ctx.moveTo(0, 25);
-    ctx.arcTo(100, 25, 200, 25, 1);
-    ctx.stroke();
-    ctx.strokeStyle = '#f00';
-    ctx.beginPath();
-    ctx.moveTo(-100, 25);
-    ctx.arcTo(0, 25, 100, 25, 1);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.arcTo.collinear.2
-  desc: arcTo() with all points on a line, and P2 between P0/P1, draws a straight line to P1
-  testing:
-    - 2d.path.arcTo.collinear
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.lineWidth = 50;
-    ctx.strokeStyle = '#0f0';
-    ctx.beginPath();
-    ctx.moveTo(0, 25);
-    ctx.arcTo(100, 25, 10, 25, 1);
-    ctx.stroke();
-    ctx.strokeStyle = '#f00';
-    ctx.beginPath();
-    ctx.moveTo(100, 25);
-    ctx.arcTo(200, 25, 110, 25, 1);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.arcTo.collinear.3
-  desc: arcTo() with all points on a line, and P0 between P1/P2, draws a straight line to P1
-  testing:
-    - 2d.path.arcTo.collinear
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.lineWidth = 50;
-    ctx.strokeStyle = '#0f0';
-    ctx.beginPath();
-    ctx.moveTo(0, 25);
-    ctx.arcTo(100, 25, -100, 25, 1);
-    ctx.stroke();
-    ctx.strokeStyle = '#f00';
-    ctx.beginPath();
-    ctx.moveTo(100, 25);
-    ctx.arcTo(200, 25, 0, 25, 1);
-    ctx.stroke();
-    ctx.beginPath();
-    ctx.moveTo(-100, 25);
-    ctx.arcTo(0, 25, -200, 25, 1);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.arcTo.shape.curve1
-  desc: arcTo() curves in the right kind of shape
-  testing:
-    - 2d.path.arcTo.shape
-  code: |
-    var tol = 1.5; // tolerance to avoid antialiasing artifacts
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#f00';
-    ctx.lineWidth = 10;
-    ctx.beginPath();
-    ctx.moveTo(10, 25);
-    ctx.arcTo(75, 25, 75, 60, 20);
-    ctx.stroke();
-    ctx.fillStyle = '#0f0';
-    ctx.beginPath();
-    ctx.rect(10, 20, 45, 10);
-    ctx.moveTo(80, 45);
-    ctx.arc(55, 45, 25+tol, 0, -Math.PI/2, true);
-    ctx.arc(55, 45, 15-tol, -Math.PI/2, 0, false);
-    ctx.fill();
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 55,19 == 0,255,0,255;
-    @assert pixel 55,20 == 0,255,0,255;
-    @assert pixel 55,21 == 0,255,0,255;
-    @assert pixel 64,22 == 0,255,0,255;
-    @assert pixel 65,21 == 0,255,0,255;
-    @assert pixel 72,28 == 0,255,0,255;
-    @assert pixel 73,27 == 0,255,0,255;
-    @assert pixel 78,36 == 0,255,0,255;
-    @assert pixel 79,35 == 0,255,0,255;
-    @assert pixel 80,44 == 0,255,0,255;
-    @assert pixel 80,45 == 0,255,0,255;
-    @assert pixel 80,46 == 0,255,0,255;
-    @assert pixel 65,45 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.arcTo.shape.curve2
-  desc: arcTo() curves in the right kind of shape
-  testing:
-    - 2d.path.arcTo.shape
-  code: |
-    var tol = 1.5; // tolerance to avoid antialiasing artifacts
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#f00';
-    ctx.beginPath();
-    ctx.rect(10, 20, 45, 10);
-    ctx.moveTo(80, 45);
-    ctx.arc(55, 45, 25-tol, 0, -Math.PI/2, true);
-    ctx.arc(55, 45, 15+tol, -Math.PI/2, 0, false);
-    ctx.fill();
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 10;
-    ctx.beginPath();
-    ctx.moveTo(10, 25);
-    ctx.arcTo(75, 25, 75, 60, 20);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 55,19 == 0,255,0,255;
-    @assert pixel 55,20 == 0,255,0,255;
-    @assert pixel 55,21 == 0,255,0,255;
-    @assert pixel 64,22 == 0,255,0,255;
-    @assert pixel 65,21 == 0,255,0,255;
-    @assert pixel 72,28 == 0,255,0,255;
-    @assert pixel 73,27 == 0,255,0,255;
-    @assert pixel 78,36 == 0,255,0,255;
-    @assert pixel 79,35 == 0,255,0,255;
-    @assert pixel 80,44 == 0,255,0,255;
-    @assert pixel 80,45 == 0,255,0,255;
-    @assert pixel 80,46 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.arcTo.shape.start
-  desc: arcTo() draws a straight line from P0 to P1
-  testing:
-    - 2d.path.arcTo.shape
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 50;
-    ctx.beginPath();
-    ctx.moveTo(0, 25);
-    ctx.arcTo(200, 25, 200, 50, 10);
-    ctx.stroke();
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.arcTo.shape.end
-  desc: arcTo() does not draw anything from P1 to P2
-  testing:
-    - 2d.path.arcTo.shape
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#f00';
-    ctx.lineWidth = 50;
-    ctx.beginPath();
-    ctx.moveTo(-100, -100);
-    ctx.arcTo(-100, 25, 200, 25, 10);
-    ctx.stroke();
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.arcTo.negative
-  desc: arcTo() with negative radius throws an exception
-  testing:
-    - 2d.path.arcTo.negative
-  code: |
-    @assert throws INDEX_SIZE_ERR ctx.arcTo(0, 0, 0, 0, -1);
-    t.done();
-
-- name: 2d.path.arcTo.zero.1
-  desc: arcTo() with zero radius draws a straight line from P0 to P1
-  testing:
-    - 2d.path.arcTo.zeroradius
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.lineWidth = 50;
-    ctx.strokeStyle = '#0f0';
-    ctx.beginPath();
-    ctx.moveTo(0, 25);
-    ctx.arcTo(100, 25, 100, 100, 0);
-    ctx.stroke();
-    ctx.strokeStyle = '#f00';
-    ctx.beginPath();
-    ctx.moveTo(0, -25);
-    ctx.arcTo(50, -25, 50, 50, 0);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.arcTo.zero.2
-  desc: arcTo() with zero radius draws a straight line from P0 to P1, even when all points are collinear
-  testing:
-    - 2d.path.arcTo.zeroradius
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.lineWidth = 50;
-    ctx.strokeStyle = '#0f0';
-    ctx.beginPath();
-    ctx.moveTo(0, 25);
-    ctx.arcTo(100, 25, -100, 25, 0);
-    ctx.stroke();
-    ctx.strokeStyle = '#f00';
-    ctx.beginPath();
-    ctx.moveTo(100, 25);
-    ctx.arcTo(200, 25, 50, 25, 0);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.arcTo.transformation
-  desc: arcTo joins up to the last subpath point correctly
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.beginPath();
-    ctx.moveTo(0, 50);
-    ctx.translate(100, 0);
-    ctx.arcTo(50, 50, 50, 0, 50);
-    ctx.lineTo(-100, 0);
-    ctx.fill();
-    @assert pixel 0,0 == 0,255,0,255;
-    @assert pixel 50,0 == 0,255,0,255;
-    @assert pixel 99,0 == 0,255,0,255;
-    @assert pixel 0,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 99,25 == 0,255,0,255;
-    @assert pixel 0,49 == 0,255,0,255;
-    @assert pixel 50,49 == 0,255,0,255;
-    @assert pixel 99,49 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.arcTo.scale
-  desc: arcTo scales the curve, not just the control points
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.beginPath();
-    ctx.moveTo(0, 50);
-    ctx.translate(100, 0);
-    ctx.scale(0.1, 1);
-    ctx.arcTo(50, 50, 50, 0, 50);
-    ctx.lineTo(-1000, 0);
-    ctx.fill();
-    @assert pixel 0,0 == 0,255,0,255;
-    @assert pixel 50,0 == 0,255,0,255;
-    @assert pixel 99,0 == 0,255,0,255;
-    @assert pixel 0,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 99,25 == 0,255,0,255;
-    @assert pixel 0,49 == 0,255,0,255;
-    @assert pixel 50,49 == 0,255,0,255;
-    @assert pixel 99,49 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.arcTo.nonfinite
-  desc: arcTo() with Infinity/NaN is ignored
-  testing:
-    - 2d.nonfinite
-  code: |
-    ctx.moveTo(0, 0);
-    ctx.lineTo(100, 0);
-    @nonfinite ctx.arcTo(<0 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>);
-    ctx.lineTo(100, 50);
-    ctx.lineTo(0, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.fill();
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 90,45 == 0,255,0,255;
-    t.done();
-
-
-- name: 2d.path.arc.empty
-  desc: arc() with an empty path does not draw a straight line to the start point
-  testing:
-    - 2d.path.arc.nonempty
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.lineWidth = 50;
-    ctx.strokeStyle = '#f00';
-    ctx.beginPath();
-    ctx.arc(200, 25, 5, 0, 2*Math.PI, true);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.arc.nonempty
-  desc: arc() with a non-empty path does draw a straight line to the start point
-  testing:
-    - 2d.path.arc.nonempty
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.lineWidth = 50;
-    ctx.strokeStyle = '#0f0';
-    ctx.beginPath();
-    ctx.moveTo(0, 25);
-    ctx.arc(200, 25, 5, 0, 2*Math.PI, true);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.arc.end
-  desc: arc() adds the end point of the arc to the subpath
-  testing:
-    - 2d.path.arc.draw
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.lineWidth = 50;
-    ctx.strokeStyle = '#0f0';
-    ctx.beginPath();
-    ctx.moveTo(-100, 0);
-    ctx.arc(-100, 0, 25, -Math.PI/2, Math.PI/2, true);
-    ctx.lineTo(100, 25);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.arc.default
-  desc: arc() with missing last argument defaults to clockwise
-  testing:
-    - 2d.path.arc.omitted
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#f00';
-    ctx.beginPath();
-    ctx.moveTo(100, 0);
-    ctx.arc(100, 0, 150, -Math.PI, Math.PI/2);
-    ctx.fill();
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.arc.angle.1
-  desc: arc() draws pi/2 .. -pi anticlockwise correctly
-  testing:
-    - 2d.path.arc.draw
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#f00';
-    ctx.beginPath();
-    ctx.moveTo(100, 0);
-    ctx.arc(100, 0, 150, Math.PI/2, -Math.PI, true);
-    ctx.fill();
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.arc.angle.2
-  desc: arc() draws -3pi/2 .. -pi anticlockwise correctly
-  testing:
-    - 2d.path.arc.draw
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#f00';
-    ctx.beginPath();
-    ctx.moveTo(100, 0);
-    ctx.arc(100, 0, 150, -3*Math.PI/2, -Math.PI, true);
-    ctx.fill();
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.arc.angle.3
-  desc: arc() wraps angles mod 2pi when anticlockwise and end > start+2pi
-  testing:
-    - 2d.path.arc.draw
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#f00';
-    ctx.beginPath();
-    ctx.moveTo(100, 0);
-    ctx.arc(100, 0, 150, (512+1/2)*Math.PI, (1024-1)*Math.PI, true);
-    ctx.fill();
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.arc.angle.4
-  desc: arc() draws a full circle when clockwise and end > start+2pi
-  testing:
-    - 2d.path.arc.draw
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.beginPath();
-    ctx.moveTo(50, 25);
-    ctx.arc(50, 25, 60, (512+1/2)*Math.PI, (1024-1)*Math.PI, false);
-    ctx.fill();
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.arc.angle.5
-  desc: arc() wraps angles mod 2pi when clockwise and start > end+2pi
-  testing:
-    - 2d.path.arc.draw
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#f00';
-    ctx.beginPath();
-    ctx.moveTo(100, 0);
-    ctx.arc(100, 0, 150, (1024-1)*Math.PI, (512+1/2)*Math.PI, false);
-    ctx.fill();
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.arc.angle.6
-  desc: arc() draws a full circle when anticlockwise and start > end+2pi
-  testing:
-    - 2d.path.arc.draw
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.beginPath();
-    ctx.moveTo(50, 25);
-    ctx.arc(50, 25, 60, (1024-1)*Math.PI, (512+1/2)*Math.PI, true);
-    ctx.fill();
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.arc.zero.1
-  desc: arc() draws nothing when startAngle = endAngle and anticlockwise
-  testing:
-    - 2d.path.arc.draw
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#f00';
-    ctx.lineWidth = 100;
-    ctx.beginPath();
-    ctx.arc(50, 25, 50, 0, 0, true);
-    ctx.stroke();
-    @assert pixel 50,20 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.arc.zero.2
-  desc: arc() draws nothing when startAngle = endAngle and clockwise
-  testing:
-    - 2d.path.arc.draw
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#f00';
-    ctx.lineWidth = 100;
-    ctx.beginPath();
-    ctx.arc(50, 25, 50, 0, 0, false);
-    ctx.stroke();
-    @assert pixel 50,20 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.arc.twopie.1
-  desc: arc() draws nothing when end = start + 2pi-e and anticlockwise
-  testing:
-    - 2d.path.arc.draw
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#f00';
-    ctx.lineWidth = 100;
-    ctx.beginPath();
-    ctx.arc(50, 25, 50, 0, 2*Math.PI - 1e-4, true);
-    ctx.stroke();
-    @assert pixel 50,20 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.arc.twopie.2
-  desc: arc() draws a full circle when end = start + 2pi-e and clockwise
-  testing:
-    - 2d.path.arc.draw
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 100;
-    ctx.beginPath();
-    ctx.arc(50, 25, 50, 0, 2*Math.PI - 1e-4, false);
-    ctx.stroke();
-    @assert pixel 50,20 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.arc.twopie.3
-  desc: arc() draws a full circle when end = start + 2pi+e and anticlockwise
-  testing:
-    - 2d.path.arc.draw
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 100;
-    ctx.beginPath();
-    ctx.arc(50, 25, 50, 0, 2*Math.PI + 1e-4, true);
-    ctx.stroke();
-    @assert pixel 50,20 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.arc.twopie.4
-  desc: arc() draws nothing when end = start + 2pi+e and clockwise
-  testing:
-    - 2d.path.arc.draw
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 100;
-    ctx.beginPath();
-    ctx.arc(50, 25, 50, 0, 2*Math.PI + 1e-4, false);
-    ctx.stroke();
-    @assert pixel 50,20 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.arc.shape.1
-  desc: arc() from 0 to pi does not draw anything in the wrong half
-  testing:
-    - 2d.path.arc.draw
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.lineWidth = 50;
-    ctx.strokeStyle = '#f00';
-    ctx.beginPath();
-    ctx.arc(50, 50, 50, 0, Math.PI, false);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 20,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.arc.shape.2
-  desc: arc() from 0 to pi draws stuff in the right half
-  testing:
-    - 2d.path.arc.draw
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.lineWidth = 100;
-    ctx.strokeStyle = '#0f0';
-    ctx.beginPath();
-    ctx.arc(50, 50, 50, 0, Math.PI, true);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 20,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.arc.shape.3
-  desc: arc() from 0 to -pi/2 does not draw anything in the wrong quadrant
-  testing:
-    - 2d.path.arc.draw
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.lineWidth = 100;
-    ctx.strokeStyle = '#f00';
-    ctx.beginPath();
-    ctx.arc(0, 50, 50, 0, -Math.PI/2, false);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255; @moz-todo
-    @assert pixel 98,48 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.arc.shape.4
-  desc: arc() from 0 to -pi/2 draws stuff in the right quadrant
-  testing:
-    - 2d.path.arc.draw
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.lineWidth = 150;
-    ctx.strokeStyle = '#0f0';
-    ctx.beginPath();
-    ctx.arc(-50, 50, 100, 0, -Math.PI/2, true);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.arc.shape.5
-  desc: arc() from 0 to 5pi does not draw crazy things
-  testing:
-    - 2d.path.arc.draw
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.lineWidth = 200;
-    ctx.strokeStyle = '#f00';
-    ctx.beginPath();
-    ctx.arc(300, 0, 100, 0, 5*Math.PI, false);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.arc.selfintersect.1
-  desc: arc() with lineWidth > 2*radius is drawn sensibly
-  testing:
-    - 2d.path.arc.draw
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.lineWidth = 200;
-    ctx.strokeStyle = '#f00';
-    ctx.beginPath();
-    ctx.arc(100, 50, 25, 0, -Math.PI/2, true);
-    ctx.stroke();
-    ctx.beginPath();
-    ctx.arc(0, 0, 25, 0, -Math.PI/2, true);
-    ctx.stroke();
-    @assert pixel 1,1 == 0,255,0,255; @moz-todo
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.arc.selfintersect.2
-  desc: arc() with lineWidth > 2*radius is drawn sensibly
-  testing:
-    - 2d.path.arc.draw
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.lineWidth = 180;
-    ctx.strokeStyle = '#0f0';
-    ctx.beginPath();
-    ctx.arc(-50, 50, 25, 0, -Math.PI/2, true);
-    ctx.stroke();
-    ctx.beginPath();
-    ctx.arc(100, 0, 25, 0, -Math.PI/2, true);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 90,10 == 0,255,0,255;
-    @assert pixel 97,1 == 0,255,0,255;
-    @assert pixel 97,2 == 0,255,0,255;
-    @assert pixel 97,3 == 0,255,0,255;
-    @assert pixel 2,48 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.arc.negative
-  desc: arc() with negative radius throws INDEX_SIZE_ERR
-  testing:
-    - 2d.path.arc.negative
-  code: |
-    @assert throws INDEX_SIZE_ERR ctx.arc(0, 0, -1, 0, 0, true);
-    t.done();
-
-- name: 2d.path.arc.zeroradius
-  desc: arc() with zero radius draws a line to the start point
-  testing:
-    - 2d.path.arc.zero
-  code: |
-    ctx.fillStyle = '#f00'
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.lineWidth = 50;
-    ctx.strokeStyle = '#0f0';
-    ctx.beginPath();
-    ctx.moveTo(0, 25);
-    ctx.arc(200, 25, 0, 0, Math.PI, true);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.arc.scale.1
-  desc: Non-uniformly scaled arcs are the right shape
-  testing:
-    - 2d.path.transformation
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.scale(2, 0.5);
-    ctx.fillStyle = '#0f0';
-    ctx.beginPath();
-    ctx.arc(25, 50, 56, 0, 2*Math.PI, false);
-    ctx.fill();
-    ctx.fillStyle = '#f00';
-    ctx.beginPath();
-    ctx.moveTo(-25, 50);
-    ctx.arc(-25, 50, 24, 0, 2*Math.PI, false);
-    ctx.moveTo(75, 50);
-    ctx.arc(75, 50, 24, 0, 2*Math.PI, false);
-    ctx.moveTo(25, -25);
-    ctx.arc(25, -25, 24, 0, 2*Math.PI, false);
-    ctx.moveTo(25, 125);
-    ctx.arc(25, 125, 24, 0, 2*Math.PI, false);
-    ctx.fill();
-    @assert pixel 0,0 == 0,255,0,255;
-    @assert pixel 50,0 == 0,255,0,255;
-    @assert pixel 99,0 == 0,255,0,255;
-    @assert pixel 0,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 99,25 == 0,255,0,255;
-    @assert pixel 0,49 == 0,255,0,255;
-    @assert pixel 50,49 == 0,255,0,255;
-    @assert pixel 99,49 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.arc.scale.2
-  desc: Highly scaled arcs are the right shape
-  testing:
-    - 2d.path.arc.draw
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.scale(100, 100);
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 1.2;
-    ctx.beginPath();
-    ctx.arc(0, 0, 0.6, 0, Math.PI/2, false);
-    ctx.stroke();
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 50,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 98,25 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 50,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.arc.nonfinite
-  desc: arc() with Infinity/NaN is ignored
-  testing:
-    - 2d.nonfinite
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.moveTo(0, 0);
-    ctx.lineTo(100, 0);
-    @nonfinite ctx.arc(<0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <2*Math.PI Infinity -Infinity NaN>, <true>);
-    ctx.lineTo(100, 50);
-    ctx.lineTo(0, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.fill();
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 90,45 == 0,255,0,255;
-    t.done();
-
-
-- name: 2d.path.rect.basic
-  testing:
-    - 2d.path.rect.subpath
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.rect(0, 0, 100, 50);
-    ctx.fill();
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.rect.newsubpath
-  testing:
-    - 2d.path.rect.subpath
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.beginPath();
-    ctx.strokeStyle = '#f00';
-    ctx.lineWidth = 50;
-    ctx.moveTo(-100, 25);
-    ctx.lineTo(-50, 25);
-    ctx.rect(200, 25, 1, 1);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.rect.closed
-  testing:
-    - 2d.path.rect.closed
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 200;
-    ctx.lineJoin = 'miter';
-    ctx.rect(100, 50, 100, 100);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.rect.end.1
-  testing:
-    - 2d.path.rect.newsubpath
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 100;
-    ctx.rect(200, 100, 400, 1000);
-    ctx.lineTo(-2000, -1000);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.rect.end.2
-  testing:
-    - 2d.path.rect.newsubpath
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 450;
-    ctx.lineCap = 'round';
-    ctx.lineJoin = 'bevel';
-    ctx.rect(150, 150, 2000, 2000);
-    ctx.lineTo(160, 160);
-    ctx.stroke();
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.rect.zero.1
-  testing:
-    - 2d.path.rect.subpath
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 100;
-    ctx.beginPath();
-    ctx.rect(0, 50, 100, 0);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.rect.zero.2
-  testing:
-    - 2d.path.rect.subpath
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 100;
-    ctx.beginPath();
-    ctx.rect(50, -100, 0, 250);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.rect.zero.3
-  testing:
-    - 2d.path.rect.subpath
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#f00';
-    ctx.lineWidth = 100;
-    ctx.beginPath();
-    ctx.rect(50, 25, 0, 0);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.rect.zero.4
-  testing:
-    - 2d.path.rect.subpath
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 50;
-    ctx.rect(100, 25, 0, 0);
-    ctx.lineTo(0, 25);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.rect.zero.5
-  testing:
-    - 2d.path.rect.subpath
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#f00';
-    ctx.lineWidth = 50;
-    ctx.moveTo(0, 0);
-    ctx.rect(100, 25, 0, 0);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.rect.zero.6
-  testing:
-    - 2d.path.rect.subpath
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#f00';
-    ctx.lineJoin = 'miter';
-    ctx.miterLimit = 1.5;
-    ctx.lineWidth = 200;
-    ctx.beginPath();
-    ctx.rect(100, 25, 1000, 0);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255; @moz-todo
-    t.done();
-
-- name: 2d.path.rect.negative
-  testing:
-    - 2d.path.rect.subpath
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.beginPath();
-    ctx.fillStyle = '#0f0';
-    ctx.rect(0, 0, 50, 25);
-    ctx.rect(100, 0, -50, 25);
-    ctx.rect(0, 50, 50, -25);
-    ctx.rect(100, 50, -50, -25);
-    ctx.fill();
-    @assert pixel 25,12 == 0,255,0,255;
-    @assert pixel 75,12 == 0,255,0,255;
-    @assert pixel 25,37 == 0,255,0,255;
-    @assert pixel 75,37 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.rect.winding
-  testing:
-    - 2d.path.rect.subpath
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.beginPath();
-    ctx.fillStyle = '#f00';
-    ctx.rect(0, 0, 50, 50);
-    ctx.rect(100, 50, -50, -50);
-    ctx.rect(0, 25, 100, -25);
-    ctx.rect(100, 25, -100, 25);
-    ctx.fill();
-    @assert pixel 25,12 == 0,255,0,255;
-    @assert pixel 75,12 == 0,255,0,255;
-    @assert pixel 25,37 == 0,255,0,255;
-    @assert pixel 75,37 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.rect.selfintersect
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 90;
-    ctx.beginPath();
-    ctx.rect(45, 20, 10, 10);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255; @moz-todo
-    t.done();
-
-- name: 2d.path.rect.nonfinite
-  desc: rect() with Infinity/NaN is ignored
-  testing:
-    - 2d.nonfinite
-  code: |
-    ctx.moveTo(0, 0);
-    ctx.lineTo(100, 0);
-    @nonfinite ctx.rect(<0 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>, <1 Infinity -Infinity NaN>, <1 Infinity -Infinity NaN>);
-    ctx.lineTo(100, 50);
-    ctx.lineTo(0, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.fill();
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 90,45 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.fill.overlap
-  testing:
-    - 2d.path.fill.basic
-  code: |
-    ctx.fillStyle = '#000';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
-    ctx.rect(0, 0, 100, 50);
-    ctx.closePath();
-    ctx.rect(10, 10, 80, 30);
-    ctx.fill();
-    @assert pixel 50,25 ==~ 0,127,0,255 +/- 1;
-    t.done();
-
-- name: 2d.path.fill.winding.add
-  testing:
-    - 2d.path.fill.basic
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.moveTo(-10, -10);
-    ctx.lineTo(110, -10);
-    ctx.lineTo(110, 60);
-    ctx.lineTo(-10, 60);
-    ctx.lineTo(-10, -10);
-    ctx.lineTo(0, 0);
-    ctx.lineTo(100, 0);
-    ctx.lineTo(100, 50);
-    ctx.lineTo(0, 50);
-    ctx.fill();
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.fill.winding.subtract.1
-  testing:
-    - 2d.path.fill.basic
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#f00';
-    ctx.moveTo(-10, -10);
-    ctx.lineTo(110, -10);
-    ctx.lineTo(110, 60);
-    ctx.lineTo(-10, 60);
-    ctx.lineTo(-10, -10);
-    ctx.lineTo(0, 0);
-    ctx.lineTo(0, 50);
-    ctx.lineTo(100, 50);
-    ctx.lineTo(100, 0);
-    ctx.fill();
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.fill.winding.subtract.2
-  testing:
-    - 2d.path.fill.basic
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#f00';
-    ctx.moveTo(-10, -10);
-    ctx.lineTo(110, -10);
-    ctx.lineTo(110, 60);
-    ctx.lineTo(-10, 60);
-    ctx.moveTo(0, 0);
-    ctx.lineTo(0, 50);
-    ctx.lineTo(100, 50);
-    ctx.lineTo(100, 0);
-    ctx.fill();
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.fill.winding.subtract.3
-  testing:
-    - 2d.path.fill.basic
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.moveTo(-10, -10);
-    ctx.lineTo(110, -10);
-    ctx.lineTo(110, 60);
-    ctx.lineTo(-10, 60);
-    ctx.lineTo(-10, -10);
-    ctx.lineTo(-20, -20);
-    ctx.lineTo(120, -20);
-    ctx.lineTo(120, 70);
-    ctx.lineTo(-20, 70);
-    ctx.lineTo(-20, -20);
-    ctx.lineTo(0, 0);
-    ctx.lineTo(0, 50);
-    ctx.lineTo(100, 50);
-    ctx.lineTo(100, 0);
-    ctx.fill();
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.fill.closed.basic
-  testing:
-    - 2d.path.fill.closed
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.moveTo(0, 0);
-    ctx.lineTo(100, 0);
-    ctx.lineTo(100, 50);
-    ctx.lineTo(0, 50);
-    ctx.fill();
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.fill.closed.unaffected
-  testing:
-    - 2d.path.fill.closed
-  code: |
-    ctx.fillStyle = '#00f';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.moveTo(0, 0);
-    ctx.lineTo(100, 0);
-    ctx.lineTo(100, 50);
-    ctx.fillStyle = '#f00';
-    ctx.fill();
-    ctx.lineTo(0, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.fill();
-    @assert pixel 90,10 == 0,255,0,255;
-    @assert pixel 10,40 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.stroke.overlap
-  desc: Stroked subpaths are combined before being drawn
-  testing:
-    - 2d.path.stroke.basic
-  code: |
-    ctx.fillStyle = '#000';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = 'rgba(0, 255, 0, 0.5)';
-    ctx.lineWidth = 50;
-    ctx.moveTo(0, 20);
-    ctx.lineTo(100, 20);
-    ctx.moveTo(0, 30);
-    ctx.lineTo(100, 30);
-    ctx.stroke();
-    @assert pixel 50,25 ==~ 0,127,0,255 +/- 1;
-    t.done();
-
-- name: 2d.path.stroke.union
-  desc: Strokes in opposite directions are unioned, not subtracted
-  testing:
-    - 2d.path.stroke.basic
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 40;
-    ctx.moveTo(0, 10);
-    ctx.lineTo(100, 10);
-    ctx.moveTo(100, 40);
-    ctx.lineTo(0, 40);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.stroke.unaffected
-  desc: Stroking does not start a new path or subpath
-  testing:
-    - 2d.path.stroke.basic
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.lineWidth = 50;
-    ctx.moveTo(-100, 25);
-    ctx.lineTo(-100, -100);
-    ctx.lineTo(200, -100);
-    ctx.lineTo(200, 25);
-    ctx.strokeStyle = '#f00';
-    ctx.stroke();
-    ctx.closePath();
-    ctx.strokeStyle = '#0f0';
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.stroke.scale1
-  desc: Stroke line widths are scaled by the current transformation matrix
-  testing:
-    - 2d.path.transformation
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.beginPath();
-    ctx.rect(25, 12.5, 50, 25);
-    ctx.save();
-    ctx.scale(50, 25);
-    ctx.strokeStyle = '#0f0';
-    ctx.stroke();
-    ctx.restore();
-    ctx.beginPath();
-    ctx.rect(-25, -12.5, 150, 75);
-    ctx.save();
-    ctx.scale(50, 25);
-    ctx.strokeStyle = '#f00';
-    ctx.stroke();
-    ctx.restore();
-    @assert pixel 0,0 == 0,255,0,255;
-    @assert pixel 50,0 == 0,255,0,255;
-    @assert pixel 99,0 == 0,255,0,255;
-    @assert pixel 0,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 99,25 == 0,255,0,255;
-    @assert pixel 0,49 == 0,255,0,255;
-    @assert pixel 50,49 == 0,255,0,255;
-    @assert pixel 99,49 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.stroke.scale2
-  desc: Stroke line widths are scaled by the current transformation matrix
-  testing:
-    - 2d.path.transformation
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.beginPath();
-    ctx.rect(25, 12.5, 50, 25);
-    ctx.save();
-    ctx.rotate(Math.PI/2);
-    ctx.scale(25, 50);
-    ctx.strokeStyle = '#0f0';
-    ctx.stroke();
-    ctx.restore();
-    ctx.beginPath();
-    ctx.rect(-25, -12.5, 150, 75);
-    ctx.save();
-    ctx.rotate(Math.PI/2);
-    ctx.scale(25, 50);
-    ctx.strokeStyle = '#f00';
-    ctx.stroke();
-    ctx.restore();
-    @assert pixel 0,0 == 0,255,0,255;
-    @assert pixel 50,0 == 0,255,0,255;
-    @assert pixel 99,0 == 0,255,0,255;
-    @assert pixel 0,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 99,25 == 0,255,0,255;
-    @assert pixel 0,49 == 0,255,0,255;
-    @assert pixel 50,49 == 0,255,0,255;
-    @assert pixel 99,49 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.stroke.skew
-  desc: Strokes lines are skewed by the current transformation matrix
-  testing:
-    - 2d.path.transformation
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.save();
-    ctx.beginPath();
-    ctx.moveTo(49, -50);
-    ctx.lineTo(201, -50);
-    ctx.rotate(Math.PI/4);
-    ctx.scale(1, 283);
-    ctx.strokeStyle = '#0f0';
-    ctx.stroke();
-    ctx.restore();
-    ctx.save();
-    ctx.beginPath();
-    ctx.translate(-150, 0);
-    ctx.moveTo(49, -50);
-    ctx.lineTo(199, -50);
-    ctx.rotate(Math.PI/4);
-    ctx.scale(1, 142);
-    ctx.strokeStyle = '#f00';
-    ctx.stroke();
-    ctx.restore();
-    ctx.save();
-    ctx.beginPath();
-    ctx.translate(-150, 0);
-    ctx.moveTo(49, -50);
-    ctx.lineTo(199, -50);
-    ctx.rotate(Math.PI/4);
-    ctx.scale(1, 142);
-    ctx.strokeStyle = '#f00';
-    ctx.stroke();
-    ctx.restore();
-    @assert pixel 0,0 == 0,255,0,255;
-    @assert pixel 50,0 == 0,255,0,255;
-    @assert pixel 99,0 == 0,255,0,255;
-    @assert pixel 0,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 99,25 == 0,255,0,255;
-    @assert pixel 0,49 == 0,255,0,255;
-    @assert pixel 50,49 == 0,255,0,255;
-    @assert pixel 99,49 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.stroke.empty
-  desc: Empty subpaths are not stroked
-  testing:
-    - 2d.path.stroke.empty
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#f00';
-    ctx.lineWidth = 100;
-    ctx.lineCap = 'round';
-    ctx.lineJoin = 'round';
-    ctx.beginPath();
-    ctx.moveTo(40, 25);
-    ctx.moveTo(60, 25);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.stroke.prune.line
-  desc: Zero-length line segments from lineTo are removed before stroking
-  testing:
-    - 2d.path.stroke.prune
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#f00';
-    ctx.lineWidth = 100;
-    ctx.lineCap = 'round';
-    ctx.lineJoin = 'round';
-    ctx.beginPath();
-    ctx.moveTo(50, 25);
-    ctx.lineTo(50, 25);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255; @moz-todo
-    t.done();
-
-- name: 2d.path.stroke.prune.closed
-  desc: Zero-length line segments from closed paths are removed before stroking
-  testing:
-    - 2d.path.stroke.prune
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#f00';
-    ctx.lineWidth = 100;
-    ctx.lineCap = 'round';
-    ctx.lineJoin = 'round';
-    ctx.beginPath();
-    ctx.moveTo(50, 25);
-    ctx.lineTo(50, 25);
-    ctx.closePath();
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255; @moz-todo
-    t.done();
-
-- name: 2d.path.stroke.prune.curve
-  desc: Zero-length line segments from quadraticCurveTo and bezierCurveTo are removed before stroking
-  testing:
-    - 2d.path.stroke.prune
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#f00';
-    ctx.lineWidth = 100;
-    ctx.lineCap = 'round';
-    ctx.lineJoin = 'round';
-    ctx.beginPath();
-    ctx.moveTo(50, 25);
-    ctx.quadraticCurveTo(50, 25, 50, 25);
-    ctx.stroke();
-    ctx.beginPath();
-    ctx.moveTo(50, 25);
-    ctx.bezierCurveTo(50, 25, 50, 25, 50, 25);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255; @moz-todo
-    t.done();
-
-- name: 2d.path.stroke.prune.arc
-  desc: Zero-length line segments from arcTo and arc are removed before stroking
-  testing:
-    - 2d.path.stroke.prune
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#f00';
-    ctx.lineWidth = 100;
-    ctx.lineCap = 'round';
-    ctx.lineJoin = 'round';
-    ctx.beginPath();
-    ctx.moveTo(50, 25);
-    ctx.arcTo(50, 25, 150, 25, 10);
-    ctx.stroke();
-    ctx.beginPath();
-    ctx.moveTo(60, 25);
-    ctx.arc(50, 25, 10, 0, 0, false);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255; @moz-todo
-    t.done();
-
-- name: 2d.path.stroke.prune.rect
-  desc: Zero-length line segments from rect and strokeRect are removed before stroking
-  testing:
-    - 2d.path.stroke.prune
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#f00';
-    ctx.lineWidth = 100;
-    ctx.lineCap = 'round';
-    ctx.lineJoin = 'round';
-    ctx.beginPath();
-    ctx.rect(50, 25, 0, 0);
-    ctx.stroke();
-    ctx.strokeRect(50, 25, 0, 0);
-    @assert pixel 50,25 == 0,255,0,255; @moz-todo
-    t.done();
-
-- name: 2d.path.stroke.prune.corner
-  desc: Zero-length line segments are removed before stroking with miters
-  testing:
-    - 2d.path.stroke.prune
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#f00';
-    ctx.lineWidth = 400;
-    ctx.lineJoin = 'miter';
-    ctx.miterLimit = 1.4;
-    ctx.beginPath();
-    ctx.moveTo(-1000, 200);
-    ctx.lineTo(-100, 200);
-    ctx.lineTo(-100, 200);
-    ctx.lineTo(-100, 200);
-    ctx.lineTo(-100, 1000);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.transformation.basic
-  testing:
-    - 2d.path.transformation
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.translate(-100, 0);
-    ctx.rect(100, 0, 100, 50);
-    ctx.translate(0, -100);
-    ctx.fillStyle = '#0f0';
-    ctx.fill();
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.transformation.multiple
-  desc: Transformations are applied while building paths, not when drawing
-  testing:
-    - 2d.path.transformation
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#f00';
-    ctx.translate(-100, 0);
-    ctx.rect(0, 0, 100, 50);
-    ctx.fill();
-    ctx.translate(100, 0);
-    ctx.fill();
-    ctx.beginPath();
-    ctx.strokeStyle = '#f00';
-    ctx.lineWidth = 50;
-    ctx.translate(0, -50);
-    ctx.moveTo(0, 25);
-    ctx.lineTo(100, 25);
-    ctx.stroke();
-    ctx.translate(0, 50);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.transformation.changing
-  desc: Transformations are applied while building paths, not when drawing
-  testing:
-    - 2d.path.transformation
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.moveTo(0, 0);
-    ctx.translate(100, 0);
-    ctx.lineTo(0, 0);
-    ctx.translate(0, 50);
-    ctx.lineTo(0, 0);
-    ctx.translate(-100, 0);
-    ctx.lineTo(0, 0);
-    ctx.translate(1000, 1000);
-    ctx.rotate(Math.PI/2);
-    ctx.scale(0.1, 0.1);
-    ctx.fill();
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.clip.empty
-  testing:
-    - 2d.path.clip.basic
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.beginPath();
-    ctx.clip();
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.clip.basic.1
-  testing:
-    - 2d.path.clip.basic
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.beginPath();
-    ctx.rect(0, 0, 100, 50);
-    ctx.clip();
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.clip.basic.2
-  testing:
-    - 2d.path.clip.basic
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.beginPath();
-    ctx.rect(-100, 0, 100, 50);
-    ctx.clip();
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.clip.intersect
-  testing:
-    - 2d.path.clip.basic
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.beginPath();
-    ctx.rect(0, 0, 50, 50);
-    ctx.clip();
-    ctx.beginPath();
-    ctx.rect(50, 0, 50, 50)
-    ctx.clip();
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.clip.winding.1
-  testing:
-    - 2d.path.clip.basic
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.beginPath();
-    ctx.moveTo(-10, -10);
-    ctx.lineTo(110, -10);
-    ctx.lineTo(110, 60);
-    ctx.lineTo(-10, 60);
-    ctx.lineTo(-10, -10);
-    ctx.lineTo(0, 0);
-    ctx.lineTo(0, 50);
-    ctx.lineTo(100, 50);
-    ctx.lineTo(100, 0);
-    ctx.clip();
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.clip.winding.2
-  testing:
-    - 2d.path.clip.basic
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.beginPath();
-    ctx.moveTo(-10, -10);
-    ctx.lineTo(110, -10);
-    ctx.lineTo(110, 60);
-    ctx.lineTo(-10, 60);
-    ctx.lineTo(-10, -10);
-    ctx.clip();
-    ctx.beginPath();
-    ctx.moveTo(0, 0);
-    ctx.lineTo(0, 50);
-    ctx.lineTo(100, 50);
-    ctx.lineTo(100, 0);
-    ctx.lineTo(0, 0);
-    ctx.clip();
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.clip.unaffected
-  testing:
-    - 2d.path.clip.closed
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.beginPath();
-    ctx.moveTo(0, 0);
-    ctx.lineTo(0, 50);
-    ctx.lineTo(100, 50);
-    ctx.lineTo(100, 0);
-    ctx.clip();
-    ctx.lineTo(0, 0);
-    ctx.fill();
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: 2d.path.isPointInPath.basic.1
-  desc: isPointInPath() detects whether the point is inside the path
-  testing:
-    - 2d.path.isPointInPath
-  code: |
-    ctx.rect(0, 0, 20, 20);
-    @assert ctx.isPointInPath(10, 10) === true;
-    @assert ctx.isPointInPath(30, 10) === false;
-    t.done();
-
-- name: 2d.path.isPointInPath.basic.2
-  desc: isPointInPath() detects whether the point is inside the path
-  testing:
-    - 2d.path.isPointInPath
-  code: |
-    ctx.rect(20, 0, 20, 20);
-    @assert ctx.isPointInPath(10, 10) === false;
-    @assert ctx.isPointInPath(30, 10) === true;
-    t.done();
-
-- name: 2d.path.isPointInPath.edge
-  desc: isPointInPath() counts points on the path as being inside
-  testing:
-    - 2d.path.isPointInPath.edge
-  code: |
-    ctx.rect(0, 0, 20, 20);
-    @assert ctx.isPointInPath(0, 0) === true;
-    @assert ctx.isPointInPath(10, 0) === true;
-    @assert ctx.isPointInPath(20, 0) === true;
-    @assert ctx.isPointInPath(20, 10) === true;
-    @assert ctx.isPointInPath(20, 20) === true;
-    @assert ctx.isPointInPath(10, 20) === true;
-    @assert ctx.isPointInPath(0, 20) === true;
-    @assert ctx.isPointInPath(0, 10) === true;
-    @assert ctx.isPointInPath(10, -0.01) === false;
-    @assert ctx.isPointInPath(10, 20.01) === false;
-    @assert ctx.isPointInPath(-0.01, 10) === false;
-    @assert ctx.isPointInPath(20.01, 10) === false;
-    t.done();
-
-- name: 2d.path.isPointInPath.empty
-  desc: isPointInPath() works when there is no path
-  testing:
-    - 2d.path.isPointInPath
-  code: |
-    @assert ctx.isPointInPath(0, 0) === false;
-    t.done();
-
-- name: 2d.path.isPointInPath.subpath
-  desc: isPointInPath() uses the current path, not just the subpath
-  testing:
-    - 2d.path.isPointInPath
-  code: |
-    ctx.rect(0, 0, 20, 20);
-    ctx.beginPath();
-    ctx.rect(20, 0, 20, 20);
-    ctx.closePath();
-    ctx.rect(40, 0, 20, 20);
-    @assert ctx.isPointInPath(10, 10) === false;
-    @assert ctx.isPointInPath(30, 10) === true;
-    @assert ctx.isPointInPath(50, 10) === true;
-    t.done();
-
-- name: 2d.path.isPointInPath.outside
-  desc: isPointInPath() works on paths outside the canvas
-  testing:
-    - 2d.path.isPointInPath
-  code: |
-    ctx.rect(0, -100, 20, 20);
-    ctx.rect(20, -10, 20, 20);
-    @assert ctx.isPointInPath(10, -110) === false;
-    @assert ctx.isPointInPath(10, -90) === true;
-    @assert ctx.isPointInPath(10, -70) === false;
-    @assert ctx.isPointInPath(30, -20) === false;
-    @assert ctx.isPointInPath(30, 0) === true;
-    @assert ctx.isPointInPath(30, 20) === false;
-    t.done();
-
-- name: 2d.path.isPointInPath.unclosed
-  desc: isPointInPath() works on unclosed subpaths
-  testing:
-    - 2d.path.isPointInPath
-  code: |
-    ctx.moveTo(0, 0);
-    ctx.lineTo(20, 0);
-    ctx.lineTo(20, 20);
-    ctx.lineTo(0, 20);
-    @assert ctx.isPointInPath(10, 10) === true;
-    @assert ctx.isPointInPath(30, 10) === false;
-    t.done();
-
-- name: 2d.path.isPointInPath.arc
-  desc: isPointInPath() works on arcs
-  testing:
-    - 2d.path.isPointInPath
-  code: |
-    ctx.arc(50, 25, 10, 0, Math.PI, false);
-    @assert ctx.isPointInPath(50, 10) === false;
-    @assert ctx.isPointInPath(50, 20) === false;
-    @assert ctx.isPointInPath(50, 30) === true;
-    @assert ctx.isPointInPath(50, 40) === false;
-    @assert ctx.isPointInPath(30, 20) === false;
-    @assert ctx.isPointInPath(70, 20) === false;
-    @assert ctx.isPointInPath(30, 30) === false;
-    @assert ctx.isPointInPath(70, 30) === false;
-    t.done();
-
-- name: 2d.path.isPointInPath.bigarc
-  desc: isPointInPath() works on unclosed arcs larger than 2pi
-  opera: { bug: 320937 }
-  testing:
-    - 2d.path.isPointInPath
-  code: |
-    ctx.arc(50, 25, 10, 0, 7, false);
-    @assert ctx.isPointInPath(50, 10) === false;
-    @assert ctx.isPointInPath(50, 20) === true;
-    @assert ctx.isPointInPath(50, 30) === true;
-    @assert ctx.isPointInPath(50, 40) === false;
-    @assert ctx.isPointInPath(30, 20) === false;
-    @assert ctx.isPointInPath(70, 20) === false;
-    @assert ctx.isPointInPath(30, 30) === false;
-    @assert ctx.isPointInPath(70, 30) === false;
-    t.done();
-
-- name: 2d.path.isPointInPath.bezier
-  desc: isPointInPath() works on Bezier curves
-  testing:
-    - 2d.path.isPointInPath
-  code: |
-    ctx.moveTo(25, 25);
-    ctx.bezierCurveTo(50, -50, 50, 100, 75, 25);
-    @assert ctx.isPointInPath(25, 20) === false;
-    @assert ctx.isPointInPath(25, 30) === false;
-    @assert ctx.isPointInPath(30, 20) === true;
-    @assert ctx.isPointInPath(30, 30) === false;
-    @assert ctx.isPointInPath(40, 2) === false;
-    @assert ctx.isPointInPath(40, 20) === true;
-    @assert ctx.isPointInPath(40, 30) === false;
-    @assert ctx.isPointInPath(40, 47) === false;
-    @assert ctx.isPointInPath(45, 20) === true;
-    @assert ctx.isPointInPath(45, 30) === false;
-    @assert ctx.isPointInPath(55, 20) === false;
-    @assert ctx.isPointInPath(55, 30) === true;
-    @assert ctx.isPointInPath(60, 2) === false;
-    @assert ctx.isPointInPath(60, 20) === false;
-    @assert ctx.isPointInPath(60, 30) === true;
-    @assert ctx.isPointInPath(60, 47) === false;
-    @assert ctx.isPointInPath(70, 20) === false;
-    @assert ctx.isPointInPath(70, 30) === true;
-    @assert ctx.isPointInPath(75, 20) === false;
-    @assert ctx.isPointInPath(75, 30) === false;
-    t.done();
-
-- name: 2d.path.isPointInPath.winding
-  desc: isPointInPath() uses the non-zero winding number rule
-  testing:
-    - 2d.path.isPointInPath
-  code: |
-    // Create a square ring, using opposite windings to make a hole in the centre
-    ctx.moveTo(0, 0);
-    ctx.lineTo(50, 0);
-    ctx.lineTo(50, 50);
-    ctx.lineTo(0, 50);
-    ctx.lineTo(0, 0);
-    ctx.lineTo(10, 10);
-    ctx.lineTo(10, 40);
-    ctx.lineTo(40, 40);
-    ctx.lineTo(40, 10);
-    ctx.lineTo(10, 10);
-    @assert ctx.isPointInPath(5, 5) === true;
-    @assert ctx.isPointInPath(25, 5) === true;
-    @assert ctx.isPointInPath(45, 5) === true;
-    @assert ctx.isPointInPath(5, 25) === true;
-    @assert ctx.isPointInPath(25, 25) === false;
-    @assert ctx.isPointInPath(45, 25) === true;
-    @assert ctx.isPointInPath(5, 45) === true;
-    @assert ctx.isPointInPath(25, 45) === true;
-    @assert ctx.isPointInPath(45, 45) === true;
-    t.done();
-
-- name: 2d.path.isPointInPath.transform.1
-  desc: isPointInPath() handles transformations correctly
-  testing:
-    - 2d.path.isPointInPath
-  code: |
-    ctx.translate(50, 0);
-    ctx.rect(0, 0, 20, 20);
-    @assert ctx.isPointInPath(-40, 10) === false;
-    @assert ctx.isPointInPath(10, 10) === false;
-    @assert ctx.isPointInPath(49, 10) === false;
-    @assert ctx.isPointInPath(51, 10) === true;
-    @assert ctx.isPointInPath(69, 10) === true;
-    @assert ctx.isPointInPath(71, 10) === false;
-    t.done();
-
-- name: 2d.path.isPointInPath.transform.2
-  desc: isPointInPath() handles transformations correctly
-  testing:
-    - 2d.path.isPointInPath
-  code: |
-    ctx.rect(50, 0, 20, 20);
-    ctx.translate(50, 0);
-    @assert ctx.isPointInPath(-40, 10) === false;
-    @assert ctx.isPointInPath(10, 10) === false;
-    @assert ctx.isPointInPath(49, 10) === false;
-    @assert ctx.isPointInPath(51, 10) === true;
-    @assert ctx.isPointInPath(69, 10) === true;
-    @assert ctx.isPointInPath(71, 10) === false;
-    t.done();
-
-- name: 2d.path.isPointInPath.transform.3
-  desc: isPointInPath() handles transformations correctly
-  testing:
-    - 2d.path.isPointInPath
-  code: |
-    ctx.scale(-1, 1);
-    ctx.rect(-70, 0, 20, 20);
-    @assert ctx.isPointInPath(-40, 10) === false;
-    @assert ctx.isPointInPath(10, 10) === false;
-    @assert ctx.isPointInPath(49, 10) === false;
-    @assert ctx.isPointInPath(51, 10) === true;
-    @assert ctx.isPointInPath(69, 10) === true;
-    @assert ctx.isPointInPath(71, 10) === false;
-    t.done();
-
-- name: 2d.path.isPointInPath.transform.4
-  desc: isPointInPath() handles transformations correctly
-  testing:
-    - 2d.path.isPointInPath
-  code: |
-    ctx.translate(50, 0);
-    ctx.rect(50, 0, 20, 20);
-    ctx.translate(0, 50);
-    @assert ctx.isPointInPath(60, 10) === false;
-    @assert ctx.isPointInPath(110, 10) === true;
-    @assert ctx.isPointInPath(110, 60) === false;
-    t.done();
-
-- name: 2d.path.isPointInPath.nonfinite
-  desc: isPointInPath() returns false for non-finite arguments
-  testing:
-    - 2d.path.isPointInPath.nonfinite
-  code: |
-    ctx.rect(-100, -50, 200, 100);
-    @assert ctx.isPointInPath(Infinity, 0) === false;
-    @assert ctx.isPointInPath(-Infinity, 0) === false;
-    @assert ctx.isPointInPath(NaN, 0) === false;
-    @assert ctx.isPointInPath(0, Infinity) === false;
-    @assert ctx.isPointInPath(0, -Infinity) === false;
-    @assert ctx.isPointInPath(0, NaN) === false;
-    @assert ctx.isPointInPath(NaN, NaN) === false;
-    t.done();
-
-- name: 2d.coordinatespace
-  desc: Coordinate space goes from top-left to bottom-right
-  notes: This should not be upside down.
-  testing:
-    - 2d.coordinatespace
-  code: |
-    ctx.fillStyle = '#00f';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#0ff';
-    ctx.fillRect(0, 0, 50, 25);
-    @assert pixel 25,12 == 0,255,255,255;
-    @assert pixel 75,12 == 0,0,255,255;
-    @assert pixel 25,37 == 0,0,255,255;
-    @assert pixel 75,37 == 0,0,255,255;
-    t.done();
-
-- name: 2d.missingargs
-  desc: Missing arguments cause TypeError
-  code: |
-    @assert throws TypeError ctx.scale();
-    @assert throws TypeError ctx.scale(1);
-    @assert throws TypeError ctx.rotate();
-    @assert throws TypeError ctx.translate();
-    @assert throws TypeError ctx.translate(0);
-    if (ctx.transform) { // (avoid spurious failures, since the aim here is not to test that all features are supported)
-        @assert throws TypeError ctx.transform();
-        @assert throws TypeError ctx.transform(1);
-        @assert throws TypeError ctx.transform(1, 0);
-        @assert throws TypeError ctx.transform(1, 0, 0);
-        @assert throws TypeError ctx.transform(1, 0, 0, 1);
-        @assert throws TypeError ctx.transform(1, 0, 0, 1, 0);
-    }
-    if (ctx.setTransform) {
-        @assert throws TypeError ctx.setTransform(1);
-        @assert throws TypeError ctx.setTransform(1, 0);
-        @assert throws TypeError ctx.setTransform(1, 0, 0);
-        @assert throws TypeError ctx.setTransform(1, 0, 0, 1);
-        @assert throws TypeError ctx.setTransform(1, 0, 0, 1, 0);
-    }
-    @assert throws TypeError ctx.createLinearGradient();
-    @assert throws TypeError ctx.createLinearGradient(0);
-    @assert throws TypeError ctx.createLinearGradient(0, 0);
-    @assert throws TypeError ctx.createLinearGradient(0, 0, 1);
-    @assert throws TypeError ctx.createRadialGradient();
-    @assert throws TypeError ctx.createRadialGradient(0);
-    @assert throws TypeError ctx.createRadialGradient(0, 0);
-    @assert throws TypeError ctx.createRadialGradient(0, 0, 1);
-    @assert throws TypeError ctx.createRadialGradient(0, 0, 1, 0);
-    @assert throws TypeError ctx.createRadialGradient(0, 0, 1, 0, 0);
-    @assert throws TypeError ctx.createPattern(offscreenCanvas);
-    @assert throws TypeError ctx.clearRect();
-    @assert throws TypeError ctx.clearRect(0);
-    @assert throws TypeError ctx.clearRect(0, 0);
-    @assert throws TypeError ctx.clearRect(0, 0, 0);
-    @assert throws TypeError ctx.fillRect();
-    @assert throws TypeError ctx.fillRect(0);
-    @assert throws TypeError ctx.fillRect(0, 0);
-    @assert throws TypeError ctx.fillRect(0, 0, 0);
-    @assert throws TypeError ctx.strokeRect();
-    @assert throws TypeError ctx.strokeRect(0);
-    @assert throws TypeError ctx.strokeRect(0, 0);
-    @assert throws TypeError ctx.strokeRect(0, 0, 0);
-    @assert throws TypeError ctx.moveTo();
-    @assert throws TypeError ctx.moveTo(0);
-    @assert throws TypeError ctx.lineTo();
-    @assert throws TypeError ctx.lineTo(0);
-    @assert throws TypeError ctx.quadraticCurveTo();
-    @assert throws TypeError ctx.quadraticCurveTo(0);
-    @assert throws TypeError ctx.quadraticCurveTo(0, 0);
-    @assert throws TypeError ctx.quadraticCurveTo(0, 0, 0);
-    @assert throws TypeError ctx.bezierCurveTo();
-    @assert throws TypeError ctx.bezierCurveTo(0);
-    @assert throws TypeError ctx.bezierCurveTo(0, 0);
-    @assert throws TypeError ctx.bezierCurveTo(0, 0, 0);
-    @assert throws TypeError ctx.bezierCurveTo(0, 0, 0, 0);
-    @assert throws TypeError ctx.bezierCurveTo(0, 0, 0, 0, 0);
-    @assert throws TypeError ctx.arcTo();
-    @assert throws TypeError ctx.arcTo(0);
-    @assert throws TypeError ctx.arcTo(0, 0);
-    @assert throws TypeError ctx.arcTo(0, 0, 0);
-    @assert throws TypeError ctx.arcTo(0, 0, 0, 0);
-    @assert throws TypeError ctx.rect();
-    @assert throws TypeError ctx.rect(0);
-    @assert throws TypeError ctx.rect(0, 0);
-    @assert throws TypeError ctx.rect(0, 0, 0);
-    @assert throws TypeError ctx.arc();
-    @assert throws TypeError ctx.arc(0);
-    @assert throws TypeError ctx.arc(0, 0);
-    @assert throws TypeError ctx.arc(0, 0, 1);
-    @assert throws TypeError ctx.arc(0, 0, 1, 0);
-    @assert throws TypeError ctx.drawImage();
-    @assert throws TypeError ctx.drawImage(offscreenCanvas);
-    @assert throws TypeError ctx.drawImage(offscreenCanvas, 0);
-    // TODO: n >= 3 args on drawImage could be either a valid overload,
-    // or too few for another overload, or too many for another
-    // overload - what should happen?
-    if (ctx.createImageData) {
-        @assert throws TypeError ctx.createImageData();
-        @assert throws TypeError ctx.createImageData(1);
-    }
-    if (ctx.getImageData) {
-        @assert throws TypeError ctx.getImageData();
-        @assert throws TypeError ctx.getImageData(0);
-        @assert throws TypeError ctx.getImageData(0, 0);
-        @assert throws TypeError ctx.getImageData(0, 0, 1);
-    }
-    if (ctx.putImageData) {
-        var imgdata = ctx.getImageData(0, 0, 1, 1);
-        @assert throws TypeError ctx.putImageData();
-        @assert throws TypeError ctx.putImageData(imgdata);
-        @assert throws TypeError ctx.putImageData(imgdata, 0);
-    }
-    var g = ctx.createLinearGradient(0, 0, 0, 0);
-    @assert throws TypeError g.addColorStop(); @moz-todo
-    @assert throws TypeError g.addColorStop(0); @moz-todo
-    t.done();
-
-- name: 2d.voidreturn
-  desc: void methods return undefined
-  code: |
-    @assert ctx.save() === undefined;
-    @assert ctx.restore() === undefined;
-    @assert ctx.scale(1, 1) === undefined;
-    @assert ctx.rotate(0) === undefined;
-    @assert ctx.translate(0, 0) === undefined;
-    if (ctx.transform) { // (avoid spurious failures, since the aim here is not to test that all features are supported)
-        @assert ctx.transform(1, 0, 0, 1, 0, 0) === undefined;
-    }
-    if (ctx.setTransform) {
-        @assert ctx.setTransform(1, 0, 0, 1, 0, 0) === undefined;
-    }
-    @assert ctx.clearRect(0, 0, 0, 0) === undefined;
-    @assert ctx.fillRect(0, 0, 0, 0) === undefined;
-    @assert ctx.strokeRect(0, 0, 0, 0) === undefined;
-    @assert ctx.beginPath() === undefined;
-    @assert ctx.closePath() === undefined;
-    @assert ctx.moveTo(0, 0) === undefined;
-    @assert ctx.lineTo(0, 0) === undefined;
-    @assert ctx.quadraticCurveTo(0, 0, 0, 0) === undefined;
-    @assert ctx.bezierCurveTo(0, 0, 0, 0, 0, 0) === undefined;
-    @assert ctx.arcTo(0, 0, 0, 0, 1) === undefined;
-    @assert ctx.rect(0, 0, 0, 0) === undefined;
-    @assert ctx.arc(0, 0, 1, 0, 0, true) === undefined;
-    @assert ctx.fill() === undefined;
-    @assert ctx.stroke() === undefined;
-    @assert ctx.clip() === undefined;
-    if (ctx.putImageData) {
-        @assert ctx.putImageData(ctx.getImageData(0, 0, 1, 1), 0, 0) === undefined;
-    }
-    @assert ctx.drawImage(offscreenCanvas, 0, 0, 1, 1, 0, 0, 0, 0) === undefined;
-    @assert ctx.createLinearGradient(0, 0, 0, 0).addColorStop(0, 'white') === undefined;
-    t.done();
-
-- name: 2d.canvas.reference
-  desc: canvas refers back to its canvas
-  testing:
-    - 2d.canvas
-  code: |
-    @assert ctx.canvas === offscreenCanvas;
-    t.done();
-
-- name: 2d.canvas.readonly
-  desc: canvas is readonly
-  testing:
-    - 2d.canvas.attribute
-  code: |
-    var offscreenCanvas2 = new OffscreenCanvas(100, 50);
-    var d = ctx.canvas;
-    @assert offscreenCanvas2 !== d;
-    ctx.canvas = offscreenCanvas2;
-    @assert ctx.canvas === d;
-    t.done();
-
-- name: 2d.getcontext.exists
-  desc: The 2D context is implemented
-  testing:
-    - context.2d
-  code: |
-    var offscreenCanvas2 = new OffscreenCanvas(100, 50);
-    @assert offscreenCanvas2.getContext('2d') !== null;
-    t.done();
-
-- name: 2d.getcontext.extraargs
-  desc: The 2D context ignores extra getContext arguments
-  testing:
-    - context.2d.extraargs
-  code: |
-    var offscreenCanvas2 = new OffscreenCanvas(100, 50);
-    @assert offscreenCanvas2.getContext('2d', false, {}, [], 1, "2") !== null;
-    @assert offscreenCanvas2.getContext('2d', 123) !== null;
-    @assert offscreenCanvas2.getContext('2d', "test") !== null;
-    @assert offscreenCanvas2.getContext('2d', undefined) !== null;
-    @assert offscreenCanvas2.getContext('2d', null) !== null;
-    @assert offscreenCanvas2.getContext('2d', Symbol.hasInstance) !== null;
-    t.done();
-
-- name: 2d.getcontext.unique
-  desc: getContext('2d') returns the same object
-  testing:
-    - context.unique
-  code: |
-    var offscreenCanvas2 = new OffscreenCanvas(100, 50);
-    @assert offscreenCanvas2.getContext('2d') === offscreenCanvas2.getContext('2d');
-    t.done();
-
-- name: 2d.getcontext.shared
-  desc: getContext('2d') returns objects which share canvas state
-  testing:
-    - context.unique
-  code: |
-    var ctx2 = offscreenCanvas.getContext('2d');
-    ctx.fillStyle = '#f00';
-    ctx2.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: context.emptystring
-  desc: getContext with empty string returns null
-  testing:
-    - context.unrecognised
-  code: |
-    var offscreenCanvas2 = new OffscreenCanvas(100, 50);
-    @assert throws TypeError offscreenCanvas2.getContext("");
-    t.done();
-
-- name: context.unrecognised.badname
-  desc: getContext with unrecognised context name returns null
-  testing:
-    - context.unrecognised
-  code: |
-    var offscreenCanvas2 = new OffscreenCanvas(100, 50);
-    @assert throws TypeError offscreenCanvas2.getContext('This is not an implemented context in any real browser');
-    t.done();
-
-- name: context.unrecognised.badsuffix
-  desc: Context name "2d" plus a suffix is unrecognised
-  testing:
-    - context.unrecognised
-  code: |
-    var offscreenCanvas2 = new OffscreenCanvas(100, 50);
-    @assert throws TypeError offscreenCanvas2.getContext("2d#");
-    t.done();
-
-- name: context.unrecognised.nullsuffix
-  desc: Context name "2d" plus a "\0" suffix is unrecognised
-  testing:
-    - context.unrecognised
-  code: |
-    var offscreenCanvas2 = new OffscreenCanvas(100, 50);
-    @assert throws TypeError offscreenCanvas2.getContext("2d\0");
-    t.done();
-
-- name: context.unrecognised.unicode
-  desc: Context name which kind of looks like "2d" is unrecognised
-  testing:
-    - context.unrecognised
-  code: |
-    var offscreenCanvas2 = new OffscreenCanvas(100, 50);
-    @assert throws TypeError offscreenCanvas2.getContext("2\uFF44");
-    t.done();
-
-- name: context.casesensitive
-  desc: Context name "2D" is unrecognised; matching is case sensitive
-  testing:
-    - context.unrecognised
-  code: |
-    var offscreenCanvas2 = new OffscreenCanvas(100, 50);
-    @assert throws TypeError offscreenCanvas2.getContext('2D');
-    t.done();
-
-- name: context.arguments.missing
-  testing:
-    - canvas.getContext
-  code: |
-    var offscreenCanvas2 = new OffscreenCanvas(100, 50);
-    @assert throws TypeError offscreenCanvas2.getContext(); @moz-todo
-    t.done();
-
-
-- name: initial.colour
-  desc: Initial state is transparent black
-  testing:
-    - initial.colour
-  code: |
-    @assert pixel 20,20 == 0,0,0,0;
-    t.done();
-
-- name: initial.reset.different
-  desc: Changing size resets canvas to transparent black
-  testing:
-    - initial.reset
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 50, 50);
-    @assert pixel 20,20 == 255,0,0,255;
-    offscreenCanvas.width = 50;
-    @assert pixel 20,20 == 0,0,0,0;
-    t.done();
-
-- name: initial.reset.same
-  desc: Setting size (not changing the value) resets canvas to transparent black
-  testing:
-    - initial.reset
-  code: |
-    offscreenCanvas.width = 100;
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 50, 50);
-    @assert pixel 20,20 == 255,0,0,255;
-    offscreenCanvas.width = 100;
-    @assert pixel 20,20 == 0,0,0,0;
-    t.done();
-
-- name: initial.reset.path
-  desc: Resetting the canvas state resets the current path
-  testing:
-    - initial.reset
-  code: |
-    offscreenCanvas.width = 100;
-    ctx.rect(0, 0, 100, 50);
-    offscreenCanvas.width = 100;
-    ctx.fillStyle = '#f00';
-    ctx.fill();
-    @assert pixel 20,20 == 0,0,0,0;
-    t.done();
-
-- name: initial.reset.clip
-  desc: Resetting the canvas state resets the current clip region
-  testing:
-    - initial.reset
-  code: |
-    offscreenCanvas.width = 100;
-    ctx.rect(0, 0, 1, 1);
-    ctx.clip();
-    offscreenCanvas.width = 100;
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 20,20 == 0,255,0,255;
-    t.done();
-
-- name: initial.reset.transform
-  desc: Resetting the canvas state resets the current transformation matrix
-  testing:
-    - initial.reset
-  code: |
-    offscreenCanvas.width = 100;
-    ctx.scale(0.1, 0.1);
-    offscreenCanvas.width = 100;
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 20,20 == 0,255,0,255;
-    t.done();
-
-- name: initial.reset.gradient
-  desc: Resetting the canvas state does not invalidate any existing gradients
-  testing:
-    - initial.reset
-  code: |
-    offscreenCanvas.width = 50;
-    var g = ctx.createLinearGradient(0, 0, 100, 0);
-    g.addColorStop(0, '#0f0');
-    g.addColorStop(1, '#0f0');
-    offscreenCanvas.width = 100;
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: initial.reset.pattern
-  desc: Resetting the canvas state does not invalidate any existing patterns
-  testing:
-    - initial.reset
-  code: |
-    offscreenCanvas.width = 30;
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 30, 50);
-    var p = ctx.createPattern(offscreenCanvas, 'repeat-x');
-    offscreenCanvas.width = 100;
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = p;
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-    t.done();
-
-- name: size.attributes.idl.set.zero
-  desc: Setting width/height IDL attributes to 0
-  testing:
-    - size.width
-    - size.height
-  code: |
-    offscreenCanvas.width = 0;
-    offscreenCanvas.height = 0;
-    @assert offscreenCanvas.width === 0;
-    @assert offscreenCanvas.height === 0;
-    t.done();
-
-- name: size.attributes.idl
-  desc: Getting/setting width/height IDL attributes
-  testing:
-    - size.width
-    - size.height
-  webidl:
-    - es-unsigned-long
-  code: |
-    offscreenCanvas.width = "100";
-    offscreenCanvas.height = "100";
-    @assert offscreenCanvas.width === 100;
-    @assert offscreenCanvas.height === 100;
-    offscreenCanvas.width = "+1.5e2";
-    offscreenCanvas.height = "0x96";
-    @assert offscreenCanvas.width === 150;
-    @assert offscreenCanvas.height === 150;
-    offscreenCanvas.width = 301.999;
-    offscreenCanvas.height = 301.001;
-    @assert offscreenCanvas.width === 301;
-    @assert offscreenCanvas.height === 301;
-    offscreenCanvas.width = "400x";
-    offscreenCanvas.height = "foo";
-    @assert offscreenCanvas.width === 0;
-    @assert offscreenCanvas.height === 0;
-    t.done();
-
-- name: size.attributes.default
-  desc: Default width/height when attributes are missing
-  testing:
-    - size.default
-    - size.missing
-  code: |
-    @assert offscreenCanvas.width === 100;
-    @assert offscreenCanvas.height === 50;
-    t.done();
-
-- name: size.attributes.reflect.setidl
-  desc: Setting IDL attributes updates IDL and content attributes
-  testing:
-    - size.reflect
-  code: |
-    offscreenCanvas.width = 120;
-    offscreenCanvas.height = 60;
-    @assert offscreenCanvas.width === 120;
-    @assert offscreenCanvas.height === 60;
-    t.done();
-
-- name: size.attributes.reflect.setidlzero
-  desc: Setting IDL attributes to 0 updates IDL and content attributes
-  testing:
-    - size.reflect
-  code: |
-    offscreenCanvas.width = 0;
-    offscreenCanvas.height = 0;
-    @assert offscreenCanvas.width === 0;
-    @assert offscreenCanvas.height === 0;
-    t.done();
-
-- meta: |
-    cases = [
-        ("zero", "0", 0),
-        ("empty", "", 0),
-        ("onlyspace", "  ", 0),
-        ("space", "  100", 100),
-        ("whitespace", "\t\f100", 100),
-        ("plus", "+100", 100),
-        ("minus", "-100", "exception"),
-        ("octal", "0100", 100),
-        ("hex", "0x100", 0x100),
-        ("exp", "100e1", 100e1),
-        ("decimal", "100.999", 100),
-        ("percent", "100%", "exception"),
-        ("em", "100em", "exception"),
-        ("junk", "#!?", "exception"),
-        ("trailingjunk", "100#!?", "exception"),
-    ]
-    def gen(name, string, exp, code):
-        testing = ["size.nonnegativeinteger"]
-        if exp is None:
-            testing.append("size.error")
-            code += "offscreenCanvas.width = '%s';\noffscreenCanvas.height = '%s';\n" % (string, string)
-            code += "@assert offscreenCanvas.width === 100;\n@assert offscreenCanvas.height === 50;\n"
-            expected = None
-        elif exp == "exception":
-            code += "@assert throws TypeError offscreenCanvas.width = '%s';\n" % string
-            expected = None
-        else:
-            code += "offscreenCanvas.width = '%s';\noffscreenCanvas.height = '%s';\n" % (string, string)
-            code += "@assert offscreenCanvas.width === %s;\n@assert offscreenCanvas.height === %s;\n" % (exp, exp)
-            expected = None
-
-        code += "t.done();\n"
-
-        if exp == 0:
-            expected = None # can't generate zero-sized PNGs for the expected image
-
-        return code, testing, expected
-
-    for name, string, exp in cases:
-        code = ""
-        code, testing, expected = gen(name, string, exp, code)
-        tests.append( {
-            "name": "size.attributes.parse.%s" % name,
-            "desc": "Parsing of non-negative integers",
-            "testing": testing,
-            "code": code,
-        } )
-
-- name: size.large
-  testing:
-    - size.width
-    - size.height
-  notes: Not sure how reasonable this is, but the spec doesn't say there's an upper limit on the size.
-  code: |
-    var n = 2147483647; // 2^31 - 1, which should be supported by any sensible definition of "long"
-    offscreenCanvas.width = n;
-    offscreenCanvas.height = n;
-    @assert offscreenCanvas.width === n;
-    @assert offscreenCanvas.height === n;
-    t.done();
-
-- name: 2d.text.font.parse.basic
-  testing:
-    - 2d.text.font.parse
-    - 2d.text.font.get
-  code: |
-    ctx.font = '20px serif';
-    @assert ctx.font === '20px serif';
-
-    ctx.font = '20PX   SERIF';
-    @assert ctx.font === '20px serif'; @moz-todo
-    t.done();
-
-- name: 2d.text.font.parse.tiny
-  testing:
-    - 2d.text.font.parse
-    - 2d.text.font.get
-  code: |
-    ctx.font = '1px sans-serif';
-    @assert ctx.font === '1px sans-serif';
-    t.done();
-
-- name: 2d.text.font.parse.complex
-  testing:
-    - 2d.text.font.parse
-    - 2d.text.font.get
-    - 2d.text.font.lineheight
-  code: |
-    ctx.font = 'small-caps italic 400 12px/2 Unknown Font, sans-serif';
-    @assert ctx.font === 'italic small-caps 12px "Unknown Font", sans-serif'; @moz-todo
-    t.done();
-
-  # TODO:
-  #   2d.text.font.parse.size.absolute
-  #     xx-small x-small small medium large x-large xx-large
-  #   2d.text.font.parse.size.relative
-  #     smaller larger
-  #   2d.text.font.parse.size.length.relative
-  #     em ex px
-  #   2d.text.font.parse.size.length.absolute
-  #     in cm mm pt pc
-
-- name: 2d.text.font.parse.system
-  desc: System fonts must be computed to explicit values
-  testing:
-    - 2d.text.font.parse
-    - 2d.text.font.get
-    - 2d.text.font.systemfonts
-  code: |
-    ctx.font = 'message-box';
-    @assert ctx.font !== 'message-box';
-    t.done();
-
-- name: 2d.text.font.parse.invalid
-  testing:
-    - 2d.text.font.invalid
-  code: |
-    ctx.font = '20px serif';
-    @assert ctx.font === '20px serif';
-
-    ctx.font = '20px serif';
-    ctx.font = '';
-    @assert ctx.font === '20px serif';
-
-    ctx.font = '20px serif';
-    ctx.font = 'bogus';
-    @assert ctx.font === '20px serif';
-
-    ctx.font = '20px serif';
-    ctx.font = 'inherit';
-    @assert ctx.font === '20px serif';
-
-    ctx.font = '20px serif';
-    ctx.font = '10px {bogus}';
-    @assert ctx.font === '20px serif';
-
-    ctx.font = '20px serif';
-    ctx.font = '10px initial';
-    @assert ctx.font === '20px serif'; @moz-todo
-
-    ctx.font = '20px serif';
-    ctx.font = '10px default';
-    @assert ctx.font === '20px serif'; @moz-todo
-
-    ctx.font = '20px serif';
-    ctx.font = '10px inherit';
-    @assert ctx.font === '20px serif';
-
-    ctx.font = '20px serif';
-    ctx.font = '1em serif; background: green; margin: 10px';
-    @assert ctx.font === '20px serif';
-    t.done();
-
-- name: 2d.text.font.default
-  testing:
-    - 2d.text.font.default
-  code: |
-    @assert ctx.font === '10px sans-serif';
-    t.done();
-
-- name: 2d.text.font.relative_size
-  testing:
-    - 2d.text.font.relative_size
-  code: |
-    ctx.font = '1em sans-serif';
-    @assert ctx.font === '10px sans-serif';
-    t.done();
-
-- name: 2d.text.align.valid
-  testing:
-    - 2d.text.align.get
-    - 2d.text.align.set
-  code: |
-    ctx.textAlign = 'start';
-    @assert ctx.textAlign === 'start';
-
-    ctx.textAlign = 'end';
-    @assert ctx.textAlign === 'end';
-
-    ctx.textAlign = 'left';
-    @assert ctx.textAlign === 'left';
-
-    ctx.textAlign = 'right';
-    @assert ctx.textAlign === 'right';
-
-    ctx.textAlign = 'center';
-    @assert ctx.textAlign === 'center';
-    t.done();
-
-- name: 2d.text.align.invalid
-  testing:
-    - 2d.text.align.invalid
-  code: |
-    ctx.textAlign = 'start';
-    ctx.textAlign = 'bogus';
-    @assert ctx.textAlign === 'start';
-
-    ctx.textAlign = 'start';
-    ctx.textAlign = 'END';
-    @assert ctx.textAlign === 'start';
-
-    ctx.textAlign = 'start';
-    ctx.textAlign = 'end ';
-    @assert ctx.textAlign === 'start';
-
-    ctx.textAlign = 'start';
-    ctx.textAlign = 'end\0';
-    @assert ctx.textAlign === 'start';
-    t.done();
-
-- name: 2d.text.align.default
-  testing:
-    - 2d.text.align.default
-  code: |
-    @assert ctx.textAlign === 'start';
-    t.done();
-
-
-- name: 2d.text.baseline.valid
-  testing:
-    - 2d.text.baseline.get
-    - 2d.text.baseline.set
-  code: |
-    ctx.textBaseline = 'top';
-    @assert ctx.textBaseline === 'top';
-
-    ctx.textBaseline = 'hanging';
-    @assert ctx.textBaseline === 'hanging';
-
-    ctx.textBaseline = 'middle';
-    @assert ctx.textBaseline === 'middle';
-
-    ctx.textBaseline = 'alphabetic';
-    @assert ctx.textBaseline === 'alphabetic';
-
-    ctx.textBaseline = 'ideographic';
-    @assert ctx.textBaseline === 'ideographic';
-
-    ctx.textBaseline = 'bottom';
-    @assert ctx.textBaseline === 'bottom';
-    t.done();
-
-- name: 2d.text.baseline.invalid
-  testing:
-    - 2d.text.baseline.invalid
-  code: |
-    ctx.textBaseline = 'top';
-    ctx.textBaseline = 'bogus';
-    @assert ctx.textBaseline === 'top';
-
-    ctx.textBaseline = 'top';
-    ctx.textBaseline = 'MIDDLE';
-    @assert ctx.textBaseline === 'top';
-
-    ctx.textBaseline = 'top';
-    ctx.textBaseline = 'middle ';
-    @assert ctx.textBaseline === 'top';
-
-    ctx.textBaseline = 'top';
-    ctx.textBaseline = 'middle\0';
-    @assert ctx.textBaseline === 'top';
-    t.done();
-
-- name: 2d.text.baseline.default
-  testing:
-    - 2d.text.baseline.default
-  code: |
-    @assert ctx.textBaseline === 'alphabetic';
-    t.done();
-
-- name: 2d.text.draw.fill.basic
-  desc: fillText draws filled text
-  manual:
-  testing:
-    - 2d.text.draw
-    - 2d.text.draw.fill
-  code: |
-    ctx.fillStyle = '#000';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.strokeStyle = '#f00';
-    ctx.font = '35px Arial, sans-serif';
-    ctx.fillText('PASS', 5, 35);
-    t.done();
-  expected: &passfill |
-    size 100 50
-    cr.set_source_rgb(0, 0, 0)
-    cr.rectangle(0, 0, 100, 50)
-    cr.fill()
-    cr.set_source_rgb(0, 1, 0)
-    cr.select_font_face("Arial")
-    cr.set_font_size(35)
-    cr.translate(5, 35)
-    cr.text_path("PASS")
-    cr.fill()
-
-- name: 2d.text.draw.fill.unaffected
-  desc: fillText does not start a new path or subpath
-  testing:
-    - 2d.text.draw.fill
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.moveTo(0, 0);
-    ctx.lineTo(100, 0);
-
-    ctx.font = '35px Arial, sans-serif';
-    ctx.fillText('FAIL', 5, 35);
-
-    ctx.lineTo(100, 50);
-    ctx.lineTo(0, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.fill();
-
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 5,45 == 0,255,0,255;
-    t.done();
-  expected: green
-
-- name: 2d.text.draw.fill.rtl
-  desc: fillText respects Right-To-Left Override characters
-  manual:
-  testing:
-    - 2d.text.draw
-  code: |
-    ctx.fillStyle = '#000';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.strokeStyle = '#f00';
-    ctx.font = '35px Arial, sans-serif';
-    ctx.fillText('\u202eFAIL \xa0 \xa0 SSAP', 5, 35);
-    t.done();
-  expected: *passfill
-
-- name: 2d.text.draw.fill.maxWidth.large
-  desc: fillText handles maxWidth correctly
-  manual:
-  testing:
-    - 2d.text.draw.maxwidth
-  code: |
-    ctx.fillStyle = '#000';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.font = '35px Arial, sans-serif';
-    ctx.fillText('PASS', 5, 35, 200);
-    t.done();
-  expected: *passfill
-
-- name: 2d.text.draw.fill.maxWidth.small
-  desc: fillText handles maxWidth correctly
-  testing:
-    - 2d.text.draw.maxwidth
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#f00';
-    ctx.font = '35px Arial, sans-serif';
-    ctx.fillText('fail fail fail fail fail', -100, 35, 90);
-    _assertGreen(ctx, 100, 50);
-    t.done();
-  expected: green
-
-- name: 2d.text.draw.fill.maxWidth.zero
-  desc: fillText handles maxWidth correctly
-  testing:
-    - 2d.text.draw.maxwidth
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#f00';
-    ctx.font = '35px Arial, sans-serif';
-    ctx.fillText('fail fail fail fail fail', 5, 35, 0);
-    _assertGreen(ctx, 100, 50);
-    t.done();
-  expected: green
-
-- name: 2d.text.draw.fill.maxWidth.negative
-  desc: fillText handles maxWidth correctly
-  testing:
-    - 2d.text.draw.maxwidth
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#f00';
-    ctx.font = '35px Arial, sans-serif';
-    ctx.fillText('fail fail fail fail fail', 5, 35, -1);
-    _assertGreen(ctx, 100, 50);
-    t.done();
-  expected: green
-
-- name: 2d.text.draw.fill.maxWidth.NaN
-  desc: fillText handles maxWidth correctly
-  testing:
-    - 2d.text.draw.maxwidth
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#f00';
-    ctx.font = '35px Arial, sans-serif';
-    ctx.fillText('fail fail fail fail fail', 5, 35, NaN);
-    _assertGreen(ctx, 100, 50);
-    t.done();
-  expected: green
-
-- name: 2d.text.draw.stroke.basic
-  desc: strokeText draws stroked text
-  manual:
-  testing:
-    - 2d.text.draw
-    - 2d.text.draw.stroke
-  code: |
-    ctx.fillStyle = '#000';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#0f0';
-    ctx.fillStyle = '#f00';
-    ctx.lineWidth = 1;
-    ctx.font = '35px Arial, sans-serif';
-    ctx.strokeText('PASS', 5, 35);
-    t.done();
-  expected: |
-    size 100 50
-    cr.set_source_rgb(0, 0, 0)
-    cr.rectangle(0, 0, 100, 50)
-    cr.fill()
-    cr.set_source_rgb(0, 1, 0)
-    cr.select_font_face("Arial")
-    cr.set_font_size(35)
-    cr.set_line_width(1)
-    cr.translate(5, 35)
-    cr.text_path("PASS")
-    cr.stroke()
-
-- name: 2d.text.draw.stroke.unaffected
-  desc: strokeText does not start a new path or subpath
-  testing:
-    - 2d.text.draw.stroke
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.moveTo(0, 0);
-    ctx.lineTo(100, 0);
-
-    ctx.font = '35px Arial, sans-serif';
-    ctx.strokeStyle = '#f00';
-    ctx.strokeText('FAIL', 5, 35);
-
-    ctx.lineTo(100, 50);
-    ctx.lineTo(0, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.fill();
-
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 5,45 == 0,255,0,255;
-    t.done();
-  expected: green
-
-- name: 2d.text.draw.kern.consistent
-  desc: Stroked and filled text should have exactly the same kerning so it overlaps
-  manual:
-  testing:
-    - 2d.text.draw
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#f00';
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 3;
-    ctx.font = '20px Arial, sans-serif';
-    ctx.fillText('VAVAVAVAVAVAVA', -50, 25);
-    ctx.fillText('ToToToToToToTo', -50, 45);
-    ctx.strokeText('VAVAVAVAVAVAVA', -50, 25);
-    ctx.strokeText('ToToToToToToTo', -50, 45);
-    t.done();
-  expected: green
-
-# CanvasTest is:
-#   A = (0, 0) to (1em, 0.75em)       (above baseline)
-#   B = (0, 0) to (1em, -0.25em)      (below baseline)
-#   C = (0, -0.25em) to (1em, 0.75em) (the em square) plus some Xs above and below
-#   D = (0, -0.25em) to (1em, 0.75em) (the em square) plus some Xs left and right
-#   E = (0, -0.25em) to (1em, 0.75em) (the em square)
-#   space = empty, 1em wide
-#
-# At 50px, "E" will fill the canvas vertically
-# At 67px, "A" will fill the canvas vertically
-#
-# Ideographic baseline  is 0.125em above alphabetic
-# Mathematical baseline is 0.375em above alphabetic
-# Hanging baseline      is 0.500em above alphabetic
-
-- name: 2d.text.draw.fill.maxWidth.fontface
-  desc: fillText works on @font-face fonts
-  testing:
-    - 2d.text.draw.maxwidth
-  fonts:
-    - CanvasTest
-  code: |
-    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
-    let fonts = (self.fonts ? self.fonts : document.fonts);
-    f.load();
-    fonts.add(f);
-    fonts.ready.then(function() {
-        ctx.font = '50px CanvasTest';
-        ctx.fillStyle = '#0f0';
-        ctx.fillRect(0, 0, 100, 50);
-        ctx.fillStyle = '#f00';
-        ctx.fillText('EEEE', -50, 37.5, 40);
-        @assert pixel 5,5 ==~ 0,255,0,255;
-        @assert pixel 95,5 ==~ 0,255,0,255;
-        @assert pixel 25,25 ==~ 0,255,0,255;
-        @assert pixel 75,25 ==~ 0,255,0,255;
-      }).then(t_pass, t_fail);
-  expected: green
-
-- name: 2d.text.draw.fill.maxWidth.bound
-  desc: fillText handles maxWidth based on line size, not bounding box size
-  testing:
-    - 2d.text.draw.maxwidth
-  fonts:
-    - CanvasTest
-  code: |
-    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
-    let fonts = (self.fonts ? self.fonts : document.fonts);
-    f.load();
-    fonts.add(f);
-    fonts.ready.then(function() {
-        ctx.font = '50px CanvasTest';
-        ctx.fillStyle = '#f00';
-        ctx.fillRect(0, 0, 100, 50);
-        ctx.fillStyle = '#0f0';
-        ctx.fillText('DD', 0, 37.5, 100);
-        @assert pixel 5,5 ==~ 0,255,0,255;
-        @assert pixel 95,5 ==~ 0,255,0,255;
-        @assert pixel 25,25 ==~ 0,255,0,255;
-        @assert pixel 75,25 ==~ 0,255,0,255;
-      }).then(t_pass, t_fail);
-  expected: green
-
-- name: 2d.text.draw.fontface
-  testing:
-    - 2d.text.font.fontface
-  fonts:
-    - CanvasTest
-  code: |
-    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
-    let fonts = (self.fonts ? self.fonts : document.fonts);
-    f.load();
-    fonts.add(f);
-    fonts.ready.then(function() {
-        ctx.font = '67px CanvasTest';
-        ctx.fillStyle = '#f00';
-        ctx.fillRect(0, 0, 100, 50);
-        ctx.fillStyle = '#0f0';
-        ctx.fillText('AA', 0, 50);
-        @assert pixel 5,5 ==~ 0,255,0,255;
-        @assert pixel 95,5 ==~ 0,255,0,255;
-        @assert pixel 25,25 ==~ 0,255,0,255;
-        @assert pixel 75,25 ==~ 0,255,0,255;
-      }).then(t_pass, t_fail);
-  expected: green
-
-- name: 2d.text.draw.fontface.repeat
-  desc: Draw with the font immediately, then wait a bit until and draw again. (This crashes some version of WebKit.)
-  testing:
-    - 2d.text.font.fontface
-  fonts:
-    - CanvasTest
-  fonthack: 0
-  code: |
-    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
-    let fonts = (self.fonts ? self.fonts : document.fonts);
-    f.load();
-    fonts.add(f);
-    fonts.ready.then(function() {
-        ctx.fillStyle = '#f00';
-        ctx.fillRect(0, 0, 100, 50);
-        ctx.font = '67px CanvasTest';
-        ctx.fillStyle = '#0f0';
-        ctx.fillText('AA', 0, 50);
-        ctx.fillText('AA', 0, 50);
-        @assert pixel 5,5 ==~ 0,255,0,255;
-        @assert pixel 95,5 ==~ 0,255,0,255;
-        @assert pixel 25,25 ==~ 0,255,0,255;
-        @assert pixel 75,25 ==~ 0,255,0,255;
-      }).then(t_pass, t_fail);
-  expected: green
-
-- name: 2d.text.draw.fontface.notinpage
-  desc: "@font-face fonts should work even if they are not used in the page"
-  testing:
-    - 2d.text.font.fontface
-  fonts:
-    - CanvasTest
-  fonthack: 0
-  code: |
-    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
-    let fonts = (self.fonts ? self.fonts : document.fonts);
-    f.load();
-    fonts.add(f);
-    fonts.ready.then(function() {
-        ctx.font = '67px CanvasTest';
-        ctx.fillStyle = '#f00';
-        ctx.fillRect(0, 0, 100, 50);
-        ctx.fillStyle = '#0f0';
-        ctx.fillText('AA', 0, 50);
-        @assert pixel 5,5 ==~ 0,255,0,255; @moz-todo
-        @assert pixel 95,5 ==~ 0,255,0,255; @moz-todo
-        @assert pixel 25,25 ==~ 0,255,0,255; @moz-todo
-        @assert pixel 75,25 ==~ 0,255,0,255; @moz-todo
-      }).then(t_pass, t_fail);
-  expected: green
-
-- name: 2d.text.draw.baseline.top
-  desc: textBaseline top is the top of the em square (not the bounding box)
-  testing:
-    - 2d.text.baseline.top
-  fonts:
-    - CanvasTest
-  code: |
-    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
-    let fonts = (self.fonts ? self.fonts : document.fonts);
-    f.load();
-    fonts.add(f);
-    fonts.ready.then(function() {
-        ctx.font = '50px CanvasTest';
-        ctx.fillStyle = '#f00';
-        ctx.fillRect(0, 0, 100, 50);
-        ctx.fillStyle = '#0f0';
-        ctx.textBaseline = 'top';
-        ctx.fillText('CC', 0, 0);
-        @assert pixel 5,5 ==~ 0,255,0,255;
-        @assert pixel 95,5 ==~ 0,255,0,255;
-        @assert pixel 25,25 ==~ 0,255,0,255;
-        @assert pixel 75,25 ==~ 0,255,0,255;
-        @assert pixel 5,45 ==~ 0,255,0,255;
-        @assert pixel 95,45 ==~ 0,255,0,255;
-      }).then(t_pass, t_fail);
-  expected: green
-
-- name: 2d.text.draw.baseline.bottom
-  desc: textBaseline bottom is the bottom of the em square (not the bounding box)
-  testing:
-    - 2d.text.baseline.bottom
-  fonts:
-    - CanvasTest
-  code: |
-    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
-    let fonts = (self.fonts ? self.fonts : document.fonts);
-    f.load();
-    fonts.add(f);
-    fonts.ready.then(function() {
-        ctx.font = '50px CanvasTest';
-        ctx.fillStyle = '#f00';
-        ctx.fillRect(0, 0, 100, 50);
-        ctx.fillStyle = '#0f0';
-        ctx.textBaseline = 'bottom';
-        ctx.fillText('CC', 0, 50);
-        @assert pixel 5,5 ==~ 0,255,0,255;
-        @assert pixel 95,5 ==~ 0,255,0,255;
-        @assert pixel 25,25 ==~ 0,255,0,255;
-        @assert pixel 75,25 ==~ 0,255,0,255;
-        @assert pixel 5,45 ==~ 0,255,0,255;
-        @assert pixel 95,45 ==~ 0,255,0,255;
-      }).then(t_pass, t_fail);
-  expected: green
-
-- name: 2d.text.draw.baseline.middle
-  desc: textBaseline middle is the middle of the em square (not the bounding box)
-  testing:
-    - 2d.text.baseline.middle
-  fonts:
-    - CanvasTest
-  code: |
-    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
-    let fonts = (self.fonts ? self.fonts : document.fonts);
-    f.load();
-    fonts.add(f);
-    fonts.ready.then(function() {
-        ctx.font = '50px CanvasTest';
-        ctx.fillStyle = '#f00';
-        ctx.fillRect(0, 0, 100, 50);
-        ctx.fillStyle = '#0f0';
-        ctx.textBaseline = 'middle';
-        ctx.fillText('CC', 0, 25);
-        @assert pixel 5,5 ==~ 0,255,0,255;
-        @assert pixel 95,5 ==~ 0,255,0,255;
-        @assert pixel 25,25 ==~ 0,255,0,255;
-        @assert pixel 75,25 ==~ 0,255,0,255;
-        @assert pixel 5,45 ==~ 0,255,0,255;
-        @assert pixel 95,45 ==~ 0,255,0,255;
-      }).then(t_pass, t_fail);
-  expected: green
-
-- name: 2d.text.draw.baseline.alphabetic
-  testing:
-    - 2d.text.baseline.alphabetic
-  fonts:
-    - CanvasTest
-  code: |
-    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
-    let fonts = (self.fonts ? self.fonts : document.fonts);
-    f.load();
-    fonts.add(f);
-    fonts.ready.then(function() {
-        ctx.font = '50px CanvasTest';
-        ctx.fillStyle = '#f00';
-        ctx.fillRect(0, 0, 100, 50);
-        ctx.fillStyle = '#0f0';
-        ctx.textBaseline = 'alphabetic';
-        ctx.fillText('CC', 0, 37.5);
-        @assert pixel 5,5 ==~ 0,255,0,255;
-        @assert pixel 95,5 ==~ 0,255,0,255;
-        @assert pixel 25,25 ==~ 0,255,0,255;
-        @assert pixel 75,25 ==~ 0,255,0,255;
-        @assert pixel 5,45 ==~ 0,255,0,255;
-        @assert pixel 95,45 ==~ 0,255,0,255;
-      }).then(t_pass, t_fail);
-  expected: green
-
-- name: 2d.text.draw.baseline.ideographic
-  testing:
-    - 2d.text.baseline.ideographic
-  fonts:
-    - CanvasTest
-  code: |
-    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
-    let fonts = (self.fonts ? self.fonts : document.fonts);
-    f.load();
-    fonts.add(f);
-    fonts.ready.then(function() {
-        ctx.font = '50px CanvasTest';
-        ctx.fillStyle = '#f00';
-        ctx.fillRect(0, 0, 100, 50);
-        ctx.fillStyle = '#0f0';
-        ctx.textBaseline = 'ideographic';
-        ctx.fillText('CC', 0, 31.25);
-        @assert pixel 5,5 ==~ 0,255,0,255;
-        @assert pixel 95,5 ==~ 0,255,0,255;
-        @assert pixel 25,25 ==~ 0,255,0,255;
-        @assert pixel 75,25 ==~ 0,255,0,255;
-        @assert pixel 5,45 ==~ 0,255,0,255; @moz-todo
-        @assert pixel 95,45 ==~ 0,255,0,255; @moz-todo
-      }).then(t_pass, t_fail);
-  expected: green
-
-- name: 2d.text.draw.baseline.hanging
-  testing:
-    - 2d.text.baseline.hanging
-  fonts:
-    - CanvasTest
-  code: |
-    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
-    let fonts = (self.fonts ? self.fonts : document.fonts);
-    f.load();
-    fonts.add(f);
-    fonts.ready.then(function() {
-        ctx.font = '50px CanvasTest';
-        ctx.fillStyle = '#f00';
-        ctx.fillRect(0, 0, 100, 50);
-        ctx.fillStyle = '#0f0';
-        ctx.textBaseline = 'hanging';
-        ctx.fillText('CC', 0, 12.5);
-        @assert pixel 5,5 ==~ 0,255,0,255; @moz-todo
-        @assert pixel 95,5 ==~ 0,255,0,255; @moz-todo
-        @assert pixel 25,25 ==~ 0,255,0,255;
-        @assert pixel 75,25 ==~ 0,255,0,255;
-        @assert pixel 5,45 ==~ 0,255,0,255;
-        @assert pixel 95,45 ==~ 0,255,0,255;
-      }).then(t_pass, t_fail);
-  expected: green
-
-- name: 2d.text.draw.align.left
-  desc: textAlign left is the left of the first em square (not the bounding box)
-  testing:
-    - 2d.text.align.left
-  fonts:
-    - CanvasTest
-  code: |
-    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
-    let fonts = (self.fonts ? self.fonts : document.fonts);
-    f.load();
-    fonts.add(f);
-    fonts.ready.then(function() {
-        ctx.font = '50px CanvasTest';
-        ctx.fillStyle = '#f00';
-        ctx.fillRect(0, 0, 100, 50);
-        ctx.fillStyle = '#0f0';
-        ctx.textAlign = 'left';
-        ctx.fillText('DD', 0, 37.5);
-        @assert pixel 5,5 ==~ 0,255,0,255;
-        @assert pixel 95,5 ==~ 0,255,0,255;
-        @assert pixel 25,25 ==~ 0,255,0,255;
-        @assert pixel 75,25 ==~ 0,255,0,255;
-        @assert pixel 5,45 ==~ 0,255,0,255;
-        @assert pixel 95,45 ==~ 0,255,0,255;
-      }).then(t_pass, t_fail);
-  expected: green
-
-- name: 2d.text.draw.align.right
-  desc: textAlign right is the right of the last em square (not the bounding box)
-  testing:
-    - 2d.text.align.right
-  fonts:
-    - CanvasTest
-  code: |
-    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
-    let fonts = (self.fonts ? self.fonts : document.fonts);
-    f.load();
-    fonts.add(f);
-    fonts.ready.then(function() {
-        ctx.font = '50px CanvasTest';
-        ctx.fillStyle = '#f00';
-        ctx.fillRect(0, 0, 100, 50);
-        ctx.fillStyle = '#0f0';
-        ctx.textAlign = 'right';
-        ctx.fillText('DD', 100, 37.5);
-        @assert pixel 5,5 ==~ 0,255,0,255;
-        @assert pixel 95,5 ==~ 0,255,0,255;
-        @assert pixel 25,25 ==~ 0,255,0,255;
-        @assert pixel 75,25 ==~ 0,255,0,255;
-        @assert pixel 5,45 ==~ 0,255,0,255;
-        @assert pixel 95,45 ==~ 0,255,0,255;
-      }).then(t_pass, t_fail);
-  expected: green
-
-- name: 2d.text.draw.align.start.ltr
-  desc: textAlign start with ltr is the left edge
-  testing:
-    - 2d.text.align.left
-  fonts:
-    - CanvasTest
-  canvas: width="100" height="50" dir="ltr"
-  code: |
-    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
-    let fonts = (self.fonts ? self.fonts : document.fonts);
-    f.load();
-    fonts.add(f);
-    fonts.ready.then(function() {
-        ctx.font = '50px CanvasTest';
-        ctx.fillStyle = '#f00';
-        ctx.fillRect(0, 0, 100, 50);
-        ctx.fillStyle = '#0f0';
-        ctx.textAlign = 'start';
-        ctx.fillText('DD', 0, 37.5);
-        @assert pixel 5,5 ==~ 0,255,0,255;
-        @assert pixel 95,5 ==~ 0,255,0,255;
-        @assert pixel 25,25 ==~ 0,255,0,255;
-        @assert pixel 75,25 ==~ 0,255,0,255;
-        @assert pixel 5,45 ==~ 0,255,0,255;
-        @assert pixel 95,45 ==~ 0,255,0,255;
-      }).then(t_pass, t_fail);
-  expected: green
-
-- name: 2d.text.draw.align.start.rtl
-  desc: textAlign start with rtl is the right edge
-  testing:
-    - 2d.text.align.right
-    - 2d.text.draw.direction
-  fonts:
-    - CanvasTest
-  canvas: width="100" height="50" dir="rtl"
-  code: |
-    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
-    let fonts = (self.fonts ? self.fonts : document.fonts);
-    f.load();
-    fonts.add(f);
-    fonts.ready.then(function() {
-        ctx.font = '50px CanvasTest';
-        ctx.fillStyle = '#f00';
-        ctx.fillRect(0, 0, 100, 50);
-        ctx.fillStyle = '#0f0';
-        ctx.textAlign = 'start';
-        ctx.fillText('DD', 100, 37.5);
-        @assert pixel 5,5 ==~ 0,255,0,255;
-        @assert pixel 95,5 ==~ 0,255,0,255;
-        @assert pixel 25,25 ==~ 0,255,0,255;
-        @assert pixel 75,25 ==~ 0,255,0,255;
-        @assert pixel 5,45 ==~ 0,255,0,255;
-        @assert pixel 95,45 ==~ 0,255,0,255;
-      }).then(t_pass, t_fail);
-  expected: green
-
-- name: 2d.text.draw.align.end.ltr
-  desc: textAlign end with ltr is the right edge
-  testing:
-    - 2d.text.align.right
-  fonts:
-    - CanvasTest
-  canvas: width="100" height="50" dir="ltr"
-  code: |
-    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
-    let fonts = (self.fonts ? self.fonts : document.fonts);
-    f.load();
-    fonts.add(f);
-    fonts.ready.then(function() {
-        ctx.font = '50px CanvasTest';
-        ctx.fillStyle = '#f00';
-        ctx.fillRect(0, 0, 100, 50);
-        ctx.fillStyle = '#0f0';
-        ctx.textAlign = 'end';
-        ctx.fillText('DD', 100, 37.5);
-        @assert pixel 5,5 ==~ 0,255,0,255;
-        @assert pixel 95,5 ==~ 0,255,0,255;
-        @assert pixel 25,25 ==~ 0,255,0,255;
-        @assert pixel 75,25 ==~ 0,255,0,255;
-        @assert pixel 5,45 ==~ 0,255,0,255;
-        @assert pixel 95,45 ==~ 0,255,0,255;
-      }).then(t_pass, t_fail);
-  expected: green
-
-- name: 2d.text.draw.align.end.rtl
-  desc: textAlign end with rtl is the left edge
-  testing:
-    - 2d.text.align.left
-    - 2d.text.draw.direction
-  fonts:
-    - CanvasTest
-  canvas: width="100" height="50" dir="rtl"
-  code: |
-    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
-    let fonts = (self.fonts ? self.fonts : document.fonts);
-    f.load();
-    fonts.add(f);
-    fonts.ready.then(function() {
-        ctx.font = '50px CanvasTest';
-        ctx.fillStyle = '#f00';
-        ctx.fillRect(0, 0, 100, 50);
-        ctx.fillStyle = '#0f0';
-        ctx.textAlign = 'end';
-        ctx.fillText('DD', 0, 37.5);
-        @assert pixel 5,5 ==~ 0,255,0,255;
-        @assert pixel 95,5 ==~ 0,255,0,255;
-        @assert pixel 25,25 ==~ 0,255,0,255;
-        @assert pixel 75,25 ==~ 0,255,0,255;
-        @assert pixel 5,45 ==~ 0,255,0,255;
-        @assert pixel 95,45 ==~ 0,255,0,255;
-      }).then(t_pass, t_fail);
-  expected: green
-
-- name: 2d.text.draw.align.center
-  desc: textAlign center is the center of the em squares (not the bounding box)
-  testing:
-    - 2d.text.align.center
-  fonts:
-    - CanvasTest
-  code: |
-    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
-    let fonts = (self.fonts ? self.fonts : document.fonts);
-    f.load();
-    fonts.add(f);
-    fonts.ready.then(function() {
-        ctx.font = '50px CanvasTest';
-        ctx.fillStyle = '#f00';
-        ctx.fillRect(0, 0, 100, 50);
-        ctx.fillStyle = '#0f0';
-        ctx.textAlign = 'center';
-        ctx.fillText('DD', 50, 37.5);
-        @assert pixel 5,5 ==~ 0,255,0,255;
-        @assert pixel 95,5 ==~ 0,255,0,255;
-        @assert pixel 25,25 ==~ 0,255,0,255;
-        @assert pixel 75,25 ==~ 0,255,0,255;
-        @assert pixel 5,45 ==~ 0,255,0,255;
-        @assert pixel 95,45 ==~ 0,255,0,255;
-      }).then(t_pass, t_fail);
-  expected: green
-
-
-- name: 2d.text.draw.space.basic
-  desc: U+0020 is rendered the correct size (1em wide)
-  testing:
-    - 2d.text.draw.spaces
-  fonts:
-    - CanvasTest
-  code: |
-    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
-    let fonts = (self.fonts ? self.fonts : document.fonts);
-    f.load();
-    fonts.add(f);
-    fonts.ready.then(function() {
-        ctx.font = '50px CanvasTest';
-        ctx.fillStyle = '#f00';
-        ctx.fillRect(0, 0, 100, 50);
-        ctx.fillStyle = '#0f0';
-        ctx.fillText('E EE', -100, 37.5);
-        @assert pixel 25,25 ==~ 0,255,0,255;
-        @assert pixel 75,25 ==~ 0,255,0,255;
-      }).then(t_pass, t_fail);
-  expected: green
-
-- name: 2d.text.draw.space.collapse.space
-  desc: Space characters are converted to U+0020, and collapsed (per CSS)
-  testing:
-    - 2d.text.draw.spaces
-  fonts:
-    - CanvasTest
-  code: |
-    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
-    let fonts = (self.fonts ? self.fonts : document.fonts);
-    f.load();
-    fonts.add(f);
-    fonts.ready.then(function() {
-        ctx.font = '50px CanvasTest';
-        ctx.fillStyle = '#f00';
-        ctx.fillRect(0, 0, 100, 50);
-        ctx.fillStyle = '#0f0';
-        ctx.fillText('E  EE', -100, 37.5);
-        @assert pixel 25,25 ==~ 0,255,0,255; @moz-todo
-        @assert pixel 75,25 ==~ 0,255,0,255;
-      }).then(t_pass, t_fail);
-  expected: green
-
-- name: 2d.text.draw.space.collapse.other
-  desc: Space characters are converted to U+0020, and collapsed (per CSS)
-  testing:
-    - 2d.text.draw.spaces
-  fonts:
-    - CanvasTest
-  code: |
-    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
-    let fonts = (self.fonts ? self.fonts : document.fonts);
-    f.load();
-    fonts.add(f);
-    fonts.ready.then(function() {
-        ctx.font = '50px CanvasTest';
-        ctx.fillStyle = '#f00';
-        ctx.fillRect(0, 0, 100, 50);
-        ctx.fillStyle = '#0f0';
-        ctx.fillText('E \x09\x0a\x0c\x0d  \x09\x0a\x0c\x0dEE', -100, 37.5);
-        @assert pixel 25,25 ==~ 0,255,0,255; @moz-todo
-        @assert pixel 75,25 ==~ 0,255,0,255; @moz-todo
-      }).then(t_pass, t_fail);
-  expected: green
-
-- name: 2d.text.draw.space.collapse.nonspace
-  desc: Non-space characters are not converted to U+0020 and collapsed
-  testing:
-    - 2d.text.draw.spaces
-  fonts:
-    - CanvasTest
-  code: |
-    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
-    let fonts = (self.fonts ? self.fonts : document.fonts);
-    f.load();
-    fonts.add(f);
-    fonts.ready.then(function() {
-        ctx.font = '50px CanvasTest';
-        ctx.fillStyle = '#f00';
-        ctx.fillRect(0, 0, 100, 50);
-        ctx.fillStyle = '#0f0';
-        ctx.fillText('E\x0b EE', -150, 37.5);
-        @assert pixel 25,25 ==~ 0,255,0,255;
-        @assert pixel 75,25 ==~ 0,255,0,255;
-      }).then(t_pass, t_fail);
-  expected: green
-
-- name: 2d.text.draw.space.collapse.start
-  desc: Space characters at the start of a line are collapsed (per CSS)
-  testing:
-    - 2d.text.draw.spaces
-  fonts:
-    - CanvasTest
-  code: |
-    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
-    let fonts = (self.fonts ? self.fonts : document.fonts);
-    f.load();
-    fonts.add(f);
-    fonts.ready.then(function() {
-        ctx.font = '50px CanvasTest';
-        ctx.fillStyle = '#f00';
-        ctx.fillRect(0, 0, 100, 50);
-        ctx.fillStyle = '#0f0';
-        ctx.fillText(' EE', 0, 37.5);
-        @assert pixel 25,25 ==~ 0,255,0,255; @moz-todo
-        @assert pixel 75,25 ==~ 0,255,0,255;
-      }).then(t_pass, t_fail);
-  expected: green
-
-- name: 2d.text.draw.space.collapse.end
-  desc: Space characters at the end of a line are collapsed (per CSS)
-  testing:
-    - 2d.text.draw.spaces
-  fonts:
-    - CanvasTest
-  code: |
-    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
-    let fonts = (self.fonts ? self.fonts : document.fonts);
-    f.load();
-    fonts.add(f);
-    fonts.ready.then(function() {
-        ctx.font = '50px CanvasTest';
-        ctx.fillStyle = '#f00';
-        ctx.fillRect(0, 0, 100, 50);
-        ctx.fillStyle = '#0f0';
-        ctx.textAlign = 'right';
-        ctx.fillText('EE ', 100, 37.5);
-        @assert pixel 25,25 ==~ 0,255,0,255;
-        @assert pixel 75,25 ==~ 0,255,0,255; @moz-todo
-      }).then(t_pass, t_fail);
-  expected: green
-
-- name: 2d.text.measure.width.basic
-  desc: The width of character is same as font used for OffscreenCanvas
-  testing:
-    - 2d.text.measure
-  fonts:
-    - CanvasTest
-  code: |
-    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
-    let fonts = (self.fonts ? self.fonts : document.fonts);
-    f.load();
-    fonts.add(f);
-    fonts.ready.then(function() {
-        ctx.font = '50px CanvasTest';
-        @assert ctx.measureText('A').width === 50;
-        @assert ctx.measureText('AA').width === 100;
-        @assert ctx.measureText('ABCD').width === 200;
-
-        ctx.font = '100px CanvasTest';
-        @assert ctx.measureText('A').width === 100;
-    }).then(t_pass, t_fail);
-
-- name: 2d.text.measure.width.empty
-  desc: The empty string has zero width for OffscreenCanvas
-  testing:
-    - 2d.text.measure
-  fonts:
-    - CanvasTest
-  code: |
-    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
-    let fonts = (self.fonts ? self.fonts : document.fonts);
-    f.load();
-    fonts.add(f);
-    fonts.ready.then(function() {
-        ctx.font = '50px CanvasTest';
-        @assert ctx.measureText("").width === 0;
-    }).then(t_pass, t_fail);
-
-- name: 2d.text.measure.width.space
-  desc: Space characters are converted to U+0020 and collapsed (per CSS) for OffscreenCanvas
-  testing:
-    - 2d.text.measure.spaces
-  fonts:
-    - CanvasTest
-  code: |
-    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
-    let fonts = (self.fonts ? self.fonts : document.fonts);
-    f.load();
-    fonts.add(f);
-    fonts.ready.then(function() {
-        ctx.font = '50px CanvasTest';
-        @assert ctx.measureText('A B').width === 150;
-        @assert ctx.measureText('A  B').width === 150; @moz-todo
-        @assert ctx.measureText('A \x09\x0a\x0c\x0d  \x09\x0a\x0c\x0dB').width === 150; @moz-todo
-        @assert ctx.measureText('A \x0b B').width >= 200;
-
-        @assert ctx.measureText(' AB').width === 100; @moz-todo
-        @assert ctx.measureText('AB ').width === 100; @moz-todo
-    }).then(t_pass, t_fail);
-
-- name: 2d.text.measure.advances
-  desc: Testing width advances for OffscreenCanvas
-  testing:
-    - 2d.text.measure.advances
-  fonts:
-    - CanvasTest
-  code: |
-    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
-    let fonts = (self.fonts ? self.fonts : document.fonts);
-    f.load();
-    fonts.add(f);
-    fonts.ready.then(function() {
-        ctx.font = '50px CanvasTest';
-        ctx.direction = 'ltr';
-        ctx.align = 'left'
-        // Some platforms may return '-0'.
-        @assert Math.abs(ctx.measureText('Hello').advances[0]) === 0;
-        // Different platforms may render text slightly different.
-        @assert ctx.measureText('Hello').advances[1] >= 36;
-        @assert ctx.measureText('Hello').advances[2] >= 58;
-        @assert ctx.measureText('Hello').advances[3] >= 70;
-        @assert ctx.measureText('Hello').advances[4] >= 80;
-
-        var tm = ctx.measureText('Hello');
-        @assert ctx.measureText('Hello').advances[0] === tm.advances[0];
-        @assert ctx.measureText('Hello').advances[1] === tm.advances[1];
-        @assert ctx.measureText('Hello').advances[2] === tm.advances[2];
-        @assert ctx.measureText('Hello').advances[3] === tm.advances[3];
-        @assert ctx.measureText('Hello').advances[4] === tm.advances[4];
-    }).then(t_pass, t_fail);
-
-- name: 2d.text.measure.actualBoundingBox
-  desc: Testing actualBoundingBox for OffscreenCanvas
-  testing:
-    - 2d.text.measure.actualBoundingBox
-  fonts:
-    - CanvasTest
-  code: |
-    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
-    let fonts = (self.fonts ? self.fonts : document.fonts);
-    f.load();
-    fonts.add(f);
-    fonts.ready.then(function() {
-        ctx.font = '50px CanvasTest';
-        ctx.direction = 'ltr';
-        ctx.align = 'left'
-        ctx.baseline = 'alphabetic'
-        // Some platforms may return '-0'.
-        @assert Math.abs(ctx.measureText('A').actualBoundingBoxLeft) === 0;
-        // Different platforms may render text slightly different.
-        @assert ctx.measureText('A').actualBoundingBoxRight >= 50;
-        @assert ctx.measureText('A').actualBoundingBoxAscent >= 35;
-        @assert Math.abs(ctx.measureText('A').actualBoundingBoxDescent) === 0;
-
-        @assert Math.abs(ctx.measureText('ABCD').actualBoundingBoxLeft) === 0;
-        @assert ctx.measureText('ABCD').actualBoundingBoxRight >= 200;
-        @assert ctx.measureText('ABCD').actualBoundingBoxAscent >= 85;
-        @assert ctx.measureText('ABCD').actualBoundingBoxDescent >= 37;
-    }).then(t_pass, t_fail);
-
-- name: 2d.text.measure.fontBoundingBox
-  desc: Testing fontBoundingBox for OffscreenCanvas
-  testing:
-    - 2d.text.measure.fontBoundingBox
-  fonts:
-    - CanvasTest
-  code: |
-    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
-    let fonts = (self.fonts ? self.fonts : document.fonts);
-    f.load();
-    fonts.add(f);
-    fonts.ready.then(function() {
-        ctx.font = '50px CanvasTest';
-        ctx.direction = 'ltr';
-        ctx.align = 'left'
-        @assert ctx.measureText('A').fontBoundingBoxAscent === 85;
-        @assert ctx.measureText('A').fontBoundingBoxDescent === 39;
-
-        @assert ctx.measureText('ABCD').fontBoundingBoxAscent === 85;
-        @assert ctx.measureText('ABCD').fontBoundingBoxDescent === 39;
-    }).then(t_pass, t_fail);
-- name: 2d.text.measure.emHeights
-  desc: Testing emHeights for OffscreenCanvas
-  testing:
-    - 2d.text.measure.emHeights
-  fonts:
-    - CanvasTest
-  code: |
-    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
-    let fonts = (self.fonts ? self.fonts : document.fonts);
-    f.load();
-    fonts.add(f);
-    fonts.ready.then(function() {
-        ctx.font = '50px CanvasTest';
-        ctx.direction = 'ltr';
-        ctx.align = 'left'
-        @assert ctx.measureText('A').emHeightAscent === 37.5;
-        @assert ctx.measureText('A').emHeightDescent === 12.5;
-        @assert ctx.measureText('A').emHeightDescent + ctx.measureText('A').emHeightAscent === 50;
-
-        @assert ctx.measureText('ABCD').emHeightAscent === 37.5;
-        @assert ctx.measureText('ABCD').emHeightDescent === 12.5;
-        @assert ctx.measureText('ABCD').emHeightDescent + ctx.measureText('ABCD').emHeightAscent === 50;
-    }).then(t_pass, t_fail);
-- name: 2d.text.measure.baselines
-  desc: Testing baselines for OffscreenCanvas
-  testing:
-    - 2d.text.measure.baselines
-  fonts:
-    - CanvasTest
-  code: |
-    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
-    let fonts = (self.fonts ? self.fonts : document.fonts);
-    f.load();
-    fonts.add(f);
-    fonts.ready.then(function() {
-       ctx.font = '50px CanvasTest';
-       ctx.direction = 'ltr';
-       ctx.align = 'left'
-       @assert Math.abs(ctx.measureText('A').getBaselines().alphabetic) === 0;
-       @assert ctx.measureText('A').getBaselines().ideographic === -39;
-       @assert ctx.measureText('A').getBaselines().hanging === 68;
-
-       @assert Math.abs(ctx.measureText('ABCD').getBaselines().alphabetic) === 0;
-       @assert ctx.measureText('ABCD').getBaselines().ideographic === -39;
-       @assert ctx.measureText('ABCD').getBaselines().hanging === 68;
-    }).then(t_pass, t_fail);
-# TODO: shadows, alpha, composite, clip
diff --git a/tests/wpt/web-platform-tests/html/canvas/tools/tests2d.yaml b/tests/wpt/web-platform-tests/html/canvas/tools/tests2d.yaml
deleted file mode 100644
index a22d1b740ad..00000000000
--- a/tests/wpt/web-platform-tests/html/canvas/tools/tests2d.yaml
+++ /dev/null
@@ -1,10649 +0,0 @@
-# Copyright (c) 2011 Philip Taylor
-# Released under the BSD license and W3C Test Suite License: see LICENSE.txt
-
-- name: 2d.getcontext.exists
-  desc: The 2D context is implemented
-  testing:
-    - context.2d
-  code: |
-    @assert canvas.getContext('2d') !== null;
-
-- name: 2d.getcontext.extraargs
-  desc: The 2D context ignores extra getContext arguments
-  testing:
-    - context.2d.extraargs
-  code: |
-    @assert canvas.getContext('2d', false, {}, [], 1, "2") !== null;
-    @assert canvas.getContext('2d', 123) !== null;
-    @assert canvas.getContext('2d', "test") !== null;
-    @assert canvas.getContext('2d', undefined) !== null;
-    @assert canvas.getContext('2d', null) !== null;
-    @assert canvas.getContext('2d', Symbol.hasInstance) !== null;
-
-- name: 2d.type.exists
-  desc: The 2D context interface is a property of 'window'
-  notes: &bindings Defined in "Web IDL" (draft)
-  testing:
-    - context.2d.type
-  code: |
-    @assert window.CanvasRenderingContext2D;
-
-- name: 2d.type.delete
-  desc: window.CanvasRenderingContext2D is Configurable
-  notes: *bindings
-  testing:
-    - context.2d.type
-  code: |
-    @assert window.CanvasRenderingContext2D !== undefined;
-    @assert delete window.CanvasRenderingContext2D === true;
-    @assert window.CanvasRenderingContext2D === undefined;
-
-- name: 2d.type.prototype
-  desc: window.CanvasRenderingContext2D.prototype are not [[Writable]] and not [[Configurable]], and its methods are [[Configurable]].
-  notes: *bindings
-  testing:
-    - context.2d.type
-  code: |
-    @assert window.CanvasRenderingContext2D.prototype;
-    @assert window.CanvasRenderingContext2D.prototype.fill;
-    window.CanvasRenderingContext2D.prototype = null;
-    @assert window.CanvasRenderingContext2D.prototype;
-    delete window.CanvasRenderingContext2D.prototype;
-    @assert window.CanvasRenderingContext2D.prototype;
-    window.CanvasRenderingContext2D.prototype.fill = 1;
-    @assert window.CanvasRenderingContext2D.prototype.fill === 1;
-    delete window.CanvasRenderingContext2D.prototype.fill;
-    @assert window.CanvasRenderingContext2D.prototype.fill === undefined;
-
-- name: 2d.type.replace
-  desc: Interface methods can be overridden
-  notes: *bindings
-  testing:
-    - context.2d.type
-  code: |
-    var fillRect = window.CanvasRenderingContext2D.prototype.fillRect;
-    window.CanvasRenderingContext2D.prototype.fillRect = function (x, y, w, h)
-    {
-        this.fillStyle = '#0f0';
-        fillRect.call(this, x, y, w, h);
-    };
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.type.extend
-  desc: Interface methods can be added
-  notes: *bindings
-  testing:
-    - context.2d.type
-  code: |
-    window.CanvasRenderingContext2D.prototype.fillRectGreen = function (x, y, w, h)
-    {
-        this.fillStyle = '#0f0';
-        this.fillRect(x, y, w, h);
-    };
-    ctx.fillStyle = '#f00';
-    ctx.fillRectGreen(0, 0, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.getcontext.unique
-  desc: getContext('2d') returns the same object
-  testing:
-    - context.unique
-  code: |
-    @assert canvas.getContext('2d') === canvas.getContext('2d');
-
-- name: 2d.getcontext.shared
-  desc: getContext('2d') returns objects which share canvas state
-  testing:
-    - context.unique
-  code: |
-    var ctx2 = canvas.getContext('2d');
-    ctx.fillStyle = '#f00';
-    ctx2.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.voidreturn
-  desc: void methods return undefined
-  notes: *bindings
-  images:
-    - yellow.png
-  code: |
-    @assert ctx.save() === undefined;
-    @assert ctx.restore() === undefined;
-    @assert ctx.scale(1, 1) === undefined;
-    @assert ctx.rotate(0) === undefined;
-    @assert ctx.translate(0, 0) === undefined;
-    if (ctx.transform) { // (avoid spurious failures, since the aim here is not to test that all features are supported)
-        @assert ctx.transform(1, 0, 0, 1, 0, 0) === undefined;
-    }
-    if (ctx.setTransform) {
-        @assert ctx.setTransform(1, 0, 0, 1, 0, 0) === undefined;
-        @assert ctx.setTransform() === undefined;
-    }
-    @assert ctx.clearRect(0, 0, 0, 0) === undefined;
-    @assert ctx.fillRect(0, 0, 0, 0) === undefined;
-    @assert ctx.strokeRect(0, 0, 0, 0) === undefined;
-    @assert ctx.beginPath() === undefined;
-    @assert ctx.closePath() === undefined;
-    @assert ctx.moveTo(0, 0) === undefined;
-    @assert ctx.lineTo(0, 0) === undefined;
-    @assert ctx.quadraticCurveTo(0, 0, 0, 0) === undefined;
-    @assert ctx.bezierCurveTo(0, 0, 0, 0, 0, 0) === undefined;
-    @assert ctx.arcTo(0, 0, 0, 0, 1) === undefined;
-    @assert ctx.rect(0, 0, 0, 0) === undefined;
-    @assert ctx.arc(0, 0, 1, 0, 0, true) === undefined;
-    @assert ctx.fill() === undefined;
-    @assert ctx.stroke() === undefined;
-    @assert ctx.clip() === undefined;
-    if (ctx.fillText) {
-        @assert ctx.fillText('test', 0, 0) === undefined;
-        @assert ctx.strokeText('test', 0, 0) === undefined;
-    }
-    if (ctx.putImageData) {
-        @assert ctx.putImageData(ctx.getImageData(0, 0, 1, 1), 0, 0) === undefined;
-    }
-    @assert ctx.drawImage(document.getElementById('yellow.png'), 0, 0, 1, 1, 0, 0, 0, 0) === undefined;
-    @assert ctx.drawImage(canvas, 0, 0, 1, 1, 0, 0, 0, 0) === undefined;
-    @assert ctx.createLinearGradient(0, 0, 0, 0).addColorStop(0, 'white') === undefined;
-
-- name: 2d.missingargs
-  desc: Missing arguments cause TypeError
-  code: |
-    @assert throws TypeError ctx.scale();
-    @assert throws TypeError ctx.scale(1);
-    @assert throws TypeError ctx.rotate();
-    @assert throws TypeError ctx.translate();
-    @assert throws TypeError ctx.translate(0);
-    if (ctx.transform) { // (avoid spurious failures, since the aim here is not to test that all features are supported)
-        @assert throws TypeError ctx.transform();
-        @assert throws TypeError ctx.transform(1);
-        @assert throws TypeError ctx.transform(1, 0);
-        @assert throws TypeError ctx.transform(1, 0, 0);
-        @assert throws TypeError ctx.transform(1, 0, 0, 1);
-        @assert throws TypeError ctx.transform(1, 0, 0, 1, 0);
-    }
-    if (ctx.setTransform) {
-        @assert throws TypeError ctx.setTransform(1);
-        @assert throws TypeError ctx.setTransform(1, 0);
-        @assert throws TypeError ctx.setTransform(1, 0, 0);
-        @assert throws TypeError ctx.setTransform(1, 0, 0, 1);
-        @assert throws TypeError ctx.setTransform(1, 0, 0, 1, 0);
-    }
-    @assert throws TypeError ctx.createLinearGradient();
-    @assert throws TypeError ctx.createLinearGradient(0);
-    @assert throws TypeError ctx.createLinearGradient(0, 0);
-    @assert throws TypeError ctx.createLinearGradient(0, 0, 1);
-    @assert throws TypeError ctx.createRadialGradient();
-    @assert throws TypeError ctx.createRadialGradient(0);
-    @assert throws TypeError ctx.createRadialGradient(0, 0);
-    @assert throws TypeError ctx.createRadialGradient(0, 0, 1);
-    @assert throws TypeError ctx.createRadialGradient(0, 0, 1, 0);
-    @assert throws TypeError ctx.createRadialGradient(0, 0, 1, 0, 0);
-    @assert throws TypeError ctx.createPattern(canvas);
-    @assert throws TypeError ctx.clearRect();
-    @assert throws TypeError ctx.clearRect(0);
-    @assert throws TypeError ctx.clearRect(0, 0);
-    @assert throws TypeError ctx.clearRect(0, 0, 0);
-    @assert throws TypeError ctx.fillRect();
-    @assert throws TypeError ctx.fillRect(0);
-    @assert throws TypeError ctx.fillRect(0, 0);
-    @assert throws TypeError ctx.fillRect(0, 0, 0);
-    @assert throws TypeError ctx.strokeRect();
-    @assert throws TypeError ctx.strokeRect(0);
-    @assert throws TypeError ctx.strokeRect(0, 0);
-    @assert throws TypeError ctx.strokeRect(0, 0, 0);
-    @assert throws TypeError ctx.moveTo();
-    @assert throws TypeError ctx.moveTo(0);
-    @assert throws TypeError ctx.lineTo();
-    @assert throws TypeError ctx.lineTo(0);
-    @assert throws TypeError ctx.quadraticCurveTo();
-    @assert throws TypeError ctx.quadraticCurveTo(0);
-    @assert throws TypeError ctx.quadraticCurveTo(0, 0);
-    @assert throws TypeError ctx.quadraticCurveTo(0, 0, 0);
-    @assert throws TypeError ctx.bezierCurveTo();
-    @assert throws TypeError ctx.bezierCurveTo(0);
-    @assert throws TypeError ctx.bezierCurveTo(0, 0);
-    @assert throws TypeError ctx.bezierCurveTo(0, 0, 0);
-    @assert throws TypeError ctx.bezierCurveTo(0, 0, 0, 0);
-    @assert throws TypeError ctx.bezierCurveTo(0, 0, 0, 0, 0);
-    @assert throws TypeError ctx.arcTo();
-    @assert throws TypeError ctx.arcTo(0);
-    @assert throws TypeError ctx.arcTo(0, 0);
-    @assert throws TypeError ctx.arcTo(0, 0, 0);
-    @assert throws TypeError ctx.arcTo(0, 0, 0, 0);
-    @assert throws TypeError ctx.rect();
-    @assert throws TypeError ctx.rect(0);
-    @assert throws TypeError ctx.rect(0, 0);
-    @assert throws TypeError ctx.rect(0, 0, 0);
-    @assert throws TypeError ctx.arc();
-    @assert throws TypeError ctx.arc(0);
-    @assert throws TypeError ctx.arc(0, 0);
-    @assert throws TypeError ctx.arc(0, 0, 1);
-    @assert throws TypeError ctx.arc(0, 0, 1, 0);
-    // (6th argument to arc is optional)
-    if (ctx.isPointInPath) {
-        @assert throws TypeError ctx.isPointInPath();
-        @assert throws TypeError ctx.isPointInPath(0);
-    }
-    if (ctx.drawFocusRing) {
-        @assert throws TypeError ctx.drawFocusRing();
-        @assert throws TypeError ctx.drawFocusRing(canvas);
-        @assert throws TypeError ctx.drawFocusRing(canvas, 0);
-    }
-    if (ctx.fillText) {
-        @assert throws TypeError ctx.fillText();
-        @assert throws TypeError ctx.fillText('test');
-        @assert throws TypeError ctx.fillText('test', 0);
-        @assert throws TypeError ctx.strokeText();
-        @assert throws TypeError ctx.strokeText('test');
-        @assert throws TypeError ctx.strokeText('test', 0);
-        @assert throws TypeError ctx.measureText();
-    }
-    @assert throws TypeError ctx.drawImage();
-    @assert throws TypeError ctx.drawImage(canvas);
-    @assert throws TypeError ctx.drawImage(canvas, 0);
-    // TODO: n >= 3 args on drawImage could be either a valid overload,
-    // or too few for another overload, or too many for another
-    // overload - what should happen?
-    if (ctx.createImageData) {
-        @assert throws TypeError ctx.createImageData();
-        @assert throws TypeError ctx.createImageData(1);
-    }
-    if (ctx.getImageData) {
-        @assert throws TypeError ctx.getImageData();
-        @assert throws TypeError ctx.getImageData(0);
-        @assert throws TypeError ctx.getImageData(0, 0);
-        @assert throws TypeError ctx.getImageData(0, 0, 1);
-    }
-    if (ctx.putImageData) {
-        var imgdata = ctx.getImageData(0, 0, 1, 1);
-        @assert throws TypeError ctx.putImageData();
-        @assert throws TypeError ctx.putImageData(imgdata);
-        @assert throws TypeError ctx.putImageData(imgdata, 0);
-    }
-    var g = ctx.createLinearGradient(0, 0, 0, 0);
-    @assert throws TypeError g.addColorStop(); @moz-todo
-    @assert throws TypeError g.addColorStop(0); @moz-todo
-
-- name: 2d.coordinatespace
-  desc: Coordinate space goes from top-left to bottom-right
-  notes: This should not be upside down.
-  manual: We can't tell that getPixelData isn't using the wrong coordinate space too.
-  testing:
-    - 2d.coordinatespace
-  code: |
-    ctx.fillStyle = '#00f';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#0ff';
-    ctx.fillRect(0, 0, 50, 25);
-    @assert pixel 25,12 == 0,255,255,255;
-    @assert pixel 75,12 == 0,0,255,255;
-    @assert pixel 25,37 == 0,0,255,255;
-    @assert pixel 75,37 == 0,0,255,255;
-  expected: |
-    size 100 50
-    cr.set_source_rgb(0, 0, 1)
-    cr.rectangle(0, 0, 100, 50)
-    cr.fill()
-    cr.set_source_rgb(0, 1, 1)
-    cr.rectangle(0, 0, 50, 25)
-    cr.fill()
-
-- name: 2d.scaled
-  desc: CSS-scaled canvases get drawn correctly
-  canvas: 'width="50" height="25" style="width: 100px; height: 50px"'
-  manual:
-  code: |
-    ctx.fillStyle = '#00f';
-    ctx.fillRect(0, 0, 50, 25);
-    ctx.fillStyle = '#0ff';
-    ctx.fillRect(0, 0, 25, 10);
-  expected: |
-    size 100 50
-    cr.set_source_rgb(0, 0, 1)
-    cr.rectangle(0, 0, 100, 50)
-    cr.fill()
-    cr.set_source_rgb(0, 1, 1)
-    cr.rectangle(0, 0, 50, 20)
-    cr.fill()
-
-- name: 2d.canvas.reference
-  desc: CanvasRenderingContext2D.canvas refers back to its canvas
-  testing:
-    - 2d.canvas
-  code: |
-    @assert ctx.canvas === canvas;
-
-- name: 2d.canvas.readonly
-  desc: CanvasRenderingContext2D.canvas is readonly
-  testing:
-    - 2d.canvas.attribute
-  code: |
-    var c = document.createElement('canvas');
-    var d = ctx.canvas;
-    @assert c !== d;
-    ctx.canvas = c;
-    @assert ctx.canvas === d;
-
-- meta: |
-    state = [ # some non-default values to test with
-        ('strokeStyle', '"#ff0000"'),
-        ('fillStyle', '"#ff0000"'),
-        ('globalAlpha', 0.5),
-        ('lineWidth', 0.5),
-        ('lineCap', '"round"'),
-        ('lineJoin', '"round"'),
-        ('miterLimit', 0.5),
-        ('shadowOffsetX', 5),
-        ('shadowOffsetY', 5),
-        ('shadowBlur', 5),
-        ('shadowColor', '"#ff0000"'),
-        ('globalCompositeOperation', '"copy"'),
-        ('font', '"25px serif"'),
-        ('textAlign', '"center"'),
-        ('textBaseline', '"bottom"'),
-    ]
-    for key,value in state:
-        tests.append( {
-            'name': '2d.state.saverestore.%s' % key,
-            'desc': 'save()/restore() works for %s' % key,
-            'testing': [ '2d.state.%s' % key ],
-            'code':
-    """// Test that restore() undoes any modifications
-    var old = ctx.%(key)s;
-    ctx.save();
-    ctx.%(key)s = %(value)s;
-    ctx.restore();
-    @assert ctx.%(key)s === old;
-
-    // Also test that save() doesn't modify the values
-    ctx.%(key)s = %(value)s;
-    old = ctx.%(key)s;
-        // we're not interested in failures caused by get(set(x)) != x (e.g.
-        // from rounding), so compare against 'old' instead of against %(value)s
-    ctx.save();
-    @assert ctx.%(key)s === old;
-    ctx.restore();
-    """ % { 'key':key, 'value':value }
-        } )
-
-    tests.append( {
-        'name': 'initial.reset.2dstate',
-        'desc': 'Resetting the canvas state resets 2D state variables',
-        'testing': [ 'initial.reset' ],
-        'code':
-    """canvas.width = 100;
-    var default_val;
-    """ + "".join(
-    """
-    default_val = ctx.%(key)s;
-    ctx.%(key)s = %(value)s;
-    canvas.width = 100;
-    @assert ctx.%(key)s === default_val;
-    """ % { 'key':key, 'value':value }
-        for key,value in state),
-    } )
-
-- name: 2d.state.saverestore.transformation
-  desc: save()/restore() affects the current transformation matrix
-  testing:
-    - 2d.state.transformation
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.save();
-    ctx.translate(200, 0);
-    ctx.restore();
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(-200, 0, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.state.saverestore.clip
-  desc: save()/restore() affects the clipping path
-  testing:
-    - 2d.state.clip
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.save();
-    ctx.rect(0, 0, 1, 1);
-    ctx.clip();
-    ctx.restore();
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.state.saverestore.path
-  desc: save()/restore() does not affect the current path
-  testing:
-    - 2d.state.path
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.save();
-    ctx.rect(0, 0, 100, 50);
-    ctx.restore();
-    ctx.fillStyle = '#0f0';
-    ctx.fill();
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.state.saverestore.bitmap
-  desc: save()/restore() does not affect the current bitmap
-  testing:
-    - 2d.state.bitmap
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.save();
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.restore();
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.state.saverestore.stack
-  desc: save()/restore() can be nested as a stack
-  testing:
-    - 2d.state.save
-    - 2d.state.restore
-  code: |
-    ctx.lineWidth = 1;
-    ctx.save();
-    ctx.lineWidth = 2;
-    ctx.save();
-    ctx.lineWidth = 3;
-    @assert ctx.lineWidth === 3;
-    ctx.restore();
-    @assert ctx.lineWidth === 2;
-    ctx.restore();
-    @assert ctx.lineWidth === 1;
-
-- name: 2d.state.saverestore.stackdepth
-  desc: save()/restore() stack depth is not unreasonably limited
-  testing:
-    - 2d.state.save
-    - 2d.state.restore
-  code: |
-    var limit = 512;
-    for (var i = 1; i < limit; ++i)
-    {
-        ctx.save();
-        ctx.lineWidth = i;
-    }
-    for (var i = limit-1; i > 0; --i)
-    {
-        @assert ctx.lineWidth === i;
-        ctx.restore();
-    }
-
-- name: 2d.state.saverestore.underflow
-  desc: restore() with an empty stack has no effect
-  testing:
-    - 2d.state.restore.underflow
-  code: |
-    for (var i = 0; i < 16; ++i)
-        ctx.restore();
-    ctx.lineWidth = 0.5;
-    ctx.restore();
-    @assert ctx.lineWidth === 0.5;
-
-
-- name: 2d.transformation.order
-  desc: Transformations are applied in the right order
-  testing:
-    - 2d.transformation.order
-  code: |
-    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);
-    @assert pixel 75,25 == 0,255,0,255;
-  expected: green
-
-
-- name: 2d.transformation.scale.basic
-  desc: scale() works
-  testing:
-    - 2d.transformation.scale
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.scale(2, 4);
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 50, 12.5);
-    @assert pixel 90,40 == 0,255,0,255;
-  expected: green
-
-- name: 2d.transformation.scale.zero
-  desc: scale() with a scale factor of zero works
-  testing:
-    - 2d.transformation.scale
-  code: |
-    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();
-
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.transformation.scale.negative
-  desc: scale() with negative scale factors works
-  testing:
-    - 2d.transformation.scale
-  code: |
-    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();
-    @assert pixel 25,25 == 0,255,0,255;
-    @assert pixel 75,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.transformation.scale.large
-  desc: scale() with large scale factors works
-  notes: Not really that large at all, but it hits the limits in Firefox.
-  testing:
-    - 2d.transformation.scale
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.scale(1e5, 1e5);
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 1, 1);
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.transformation.scale.nonfinite
-  desc: scale() with Infinity/NaN is ignored
-  testing:
-    - 2d.nonfinite
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.translate(100, 10);
-    @nonfinite ctx.scale(<0.1 Infinity -Infinity NaN>, <0.1 Infinity -Infinity NaN>);
-
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(-100, -10, 100, 50);
-
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.transformation.scale.multiple
-  desc: Multiple scale()s combine
-  testing:
-    - 2d.transformation.scale.multiple
-  code: |
-    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);
-    @assert pixel 90,40 == 0,255,0,255;
-  expected: green
-
-
-- name: 2d.transformation.rotate.zero
-  desc: rotate() by 0 does nothing
-  testing:
-    - 2d.transformation.rotate
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.rotate(0);
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.transformation.rotate.radians
-  desc: rotate() uses radians
-  testing:
-    - 2d.transformation.rotate.radians
-  code: |
-    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);
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.transformation.rotate.direction
-  desc: rotate() is clockwise
-  testing:
-    - 2d.transformation.rotate.direction
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.rotate(Math.PI / 2);
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, -100, 50, 100);
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.transformation.rotate.wrap
-  desc: rotate() wraps large positive values correctly
-  testing:
-    - 2d.transformation.rotate
-  code: |
-    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);
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 98,2 == 0,255,0,255;
-    @assert pixel 98,47 == 0,255,0,255;
-  expected: green
-
-- name: 2d.transformation.rotate.wrapnegative
-  desc: rotate() wraps large negative values correctly
-  testing:
-    - 2d.transformation.rotate
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.rotate(-Math.PI * (1 + 4096));
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(-100, -50, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 98,2 == 0,255,0,255;
-    @assert pixel 98,47 == 0,255,0,255;
-  expected: green
-
-- name: 2d.transformation.rotate.nonfinite
-  desc: rotate() with Infinity/NaN is ignored
-  testing:
-    - 2d.nonfinite
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.translate(100, 10);
-    @nonfinite ctx.rotate(<0.1 Infinity -Infinity NaN>);
-
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(-100, -10, 100, 50);
-
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.transformation.translate.basic
-  desc: translate() works
-  testing:
-    - 2d.transformation.translate
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.translate(100, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(-100, -50, 100, 50);
-    @assert pixel 90,40 == 0,255,0,255;
-  expected: green
-
-- name: 2d.transformation.translate.nonfinite
-  desc: translate() with Infinity/NaN is ignored
-  testing:
-    - 2d.nonfinite
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.translate(100, 10);
-    @nonfinite ctx.translate(<0.1 Infinity -Infinity NaN>, <0.1 Infinity -Infinity NaN>);
-
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(-100, -10, 100, 50);
-
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-
-- name: 2d.transformation.transform.identity
-  desc: transform() with the identity matrix does nothing
-  testing:
-    - 2d.transformation.transform
-  code: |
-    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);
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.transformation.transform.skewed
-  desc: transform() with skewy matrix transforms correctly
-  testing:
-    - 2d.transformation.transform
-  code: |
-    // 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();
-    @assert pixel 21,11 == 0,255,0,255;
-    @assert pixel 79,11 == 0,255,0,255;
-    @assert pixel 21,39 == 0,255,0,255;
-    @assert pixel 79,39 == 0,255,0,255;
-    @assert pixel 39,19 == 0,255,0,255;
-    @assert pixel 61,19 == 0,255,0,255;
-    @assert pixel 39,31 == 0,255,0,255;
-    @assert pixel 61,31 == 0,255,0,255;
-  expected: green
-
-- name: 2d.transformation.transform.multiply
-  desc: transform() multiplies the CTM
-  testing:
-    - 2d.transformation.transform.multiply
-  code: |
-    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);
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.transformation.transform.nonfinite
-  desc: transform() with Infinity/NaN is ignored
-  testing:
-    - 2d.nonfinite
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.translate(100, 10);
-    @nonfinite ctx.transform(<0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>);
-
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(-100, -10, 100, 50);
-
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-
-- name: 2d.transformation.setTransform.skewed
-  testing:
-    - 2d.transformation.setTransform
-  code: |
-    // 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();
-    @assert pixel 21,11 == 0,255,0,255;
-    @assert pixel 79,11 == 0,255,0,255;
-    @assert pixel 21,39 == 0,255,0,255;
-    @assert pixel 79,39 == 0,255,0,255;
-    @assert pixel 39,19 == 0,255,0,255;
-    @assert pixel 61,19 == 0,255,0,255;
-    @assert pixel 39,31 == 0,255,0,255;
-    @assert pixel 61,31 == 0,255,0,255;
-  expected: green
-
-- name: 2d.transformation.setTransform.multiple
-  testing:
-    - 2d.transformation.setTransform.identity
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.setTransform(1/2,0, 0,1/2, 0,0);
-    ctx.setTransform();
-    ctx.setTransform(2,0, 0,2, 0,0);
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 50, 25);
-    @assert pixel 75,35 == 0,255,0,255;
-  expected: green
-
-- name: 2d.transformation.setTransform.nonfinite
-  desc: setTransform() with Infinity/NaN is ignored
-  testing:
-    - 2d.nonfinite
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.translate(100, 10);
-    @nonfinite ctx.setTransform(<0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>);
-
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(-100, -10, 100, 50);
-
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-
-- name: 2d.composite.globalAlpha.range
-  testing:
-    - 2d.composite.globalAlpha.range
-  code: |
-    ctx.globalAlpha = 0.5;
-    var a = ctx.globalAlpha; // might not be exactly 0.5, if it is rounded/quantised, so remember for future comparisons
-    ctx.globalAlpha = 1.1;
-    @assert ctx.globalAlpha === a;
-    ctx.globalAlpha = -0.1;
-    @assert ctx.globalAlpha === a;
-    ctx.globalAlpha = 0;
-    @assert ctx.globalAlpha === 0;
-    ctx.globalAlpha = 1;
-    @assert ctx.globalAlpha === 1;
-
-- name: 2d.composite.globalAlpha.invalid
-  testing:
-    - 2d.composite.globalAlpha.range
-  code: |
-    ctx.globalAlpha = 0.5;
-    var a = ctx.globalAlpha; // might not be exactly 0.5, if it is rounded/quantised, so remember for future comparisons
-    ctx.globalAlpha = Infinity;
-    @assert ctx.globalAlpha === a;
-    ctx.globalAlpha = -Infinity;
-    @assert ctx.globalAlpha === a;
-    ctx.globalAlpha = NaN;
-    @assert ctx.globalAlpha === a;
-
-- name: 2d.composite.globalAlpha.default
-  testing:
-    - 2d.composite.globalAlpha.default
-  code: |
-    @assert ctx.globalAlpha === 1.0;
-
-- name: 2d.composite.globalAlpha.fill
-  testing:
-    - 2d.composite.globalAlpha.shape
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.globalAlpha = 0.01; // avoid any potential alpha=0 optimisations
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 50,25 ==~ 2,253,0,255;
-  expected: green
-
-- name: 2d.composite.globalAlpha.image
-  testing:
-    - 2d.composite.globalAlpha.image
-  images:
-    - red.png
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.globalAlpha = 0.01; // avoid any potential alpha=0 optimisations
-    ctx.drawImage(document.getElementById('red.png'), 0, 0);
-    @assert pixel 50,25 ==~ 2,253,0,255;
-  expected: green
-
-- name: 2d.composite.globalAlpha.canvas
-  testing:
-    - 2d.composite.globalAlpha.image
-  code: |
-    var canvas2 = document.createElement('canvas');
-    canvas2.width = 100;
-    canvas2.height = 50;
-    var ctx2 = canvas2.getContext('2d');
-    ctx2.fillStyle = '#f00';
-    ctx2.fillRect(0, 0, 100, 50);
-
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.globalAlpha = 0.01; // avoid any potential alpha=0 optimisations
-    ctx.drawImage(canvas2, 0, 0);
-    @assert pixel 50,25 ==~ 2,253,0,255;
-  expected: green
-
-- name: 2d.composite.globalAlpha.imagepattern
-  testing:
-    - 2d.composite.globalAlpha.image
-  images:
-    - red.png
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = ctx.createPattern(document.getElementById('red.png'), 'no-repeat');
-    ctx.globalAlpha = 0.01; // avoid any potential alpha=0 optimisations
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 50,25 ==~ 2,253,0,255;
-  expected: green
-
-- name: 2d.composite.globalAlpha.canvaspattern
-  testing:
-    - 2d.composite.globalAlpha.image
-  code: |
-    var canvas2 = document.createElement('canvas');
-    canvas2.width = 100;
-    canvas2.height = 50;
-    var ctx2 = canvas2.getContext('2d');
-    ctx2.fillStyle = '#f00';
-    ctx2.fillRect(0, 0, 100, 50);
-
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = ctx.createPattern(canvas2, 'no-repeat');
-    ctx.globalAlpha = 0.01; // avoid any potential alpha=0 optimisations
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 50,25 ==~ 2,253,0,255;
-  expected: green
-
-- name: 2d.composite.globalAlpha.canvascopy
-  testing:
-    - 2d.composite.globalAlpha.image
-  code: |
-    var canvas2 = document.createElement('canvas');
-    canvas2.width = 100;
-    canvas2.height = 50;
-    var ctx2 = canvas2.getContext('2d');
-    ctx2.fillStyle = '#0f0';
-    ctx2.fillRect(0, 0, 100, 50);
-
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.globalCompositeOperation = 'copy'
-    ctx.globalAlpha = 0.51;
-    ctx.drawImage(canvas2, 0, 0);
-    @assert pixel 50,25 ==~ 0,255,0,130;
-  expected: green
-
-
-- meta: |
-    # Composite operation tests
-    # <http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2007-March/010608.html>
-    ops = [
-        # name               FA      FB
-        ('source-over',      '1',    '1-aA'),
-        ('destination-over', '1-aB', '1'),
-        ('source-in',        'aB',   '0'),
-        ('destination-in',   '0',    'aA'),
-        ('source-out',       '1-aB', '0'),
-        ('destination-out',  '0',    '1-aA'),
-        ('source-atop',      'aB',   '1-aA'),
-        ('destination-atop', '1-aB', 'aA'),
-        ('xor',              '1-aB', '1-aA'),
-        ('copy',             '1',    '0'),
-        ('lighter',          '1',    '1'),
-    ]
-
-    # The ones that change the output when src = (0,0,0,0):
-    ops_trans = [ 'source-in', 'destination-in', 'source-out', 'destination-atop', 'copy' ];
-
-    def calc_output(A, B, FA_code, FB_code):
-        (RA, GA, BA, aA) = A
-        (RB, GB, BB, aB) = B
-        rA, gA, bA = RA*aA, GA*aA, BA*aA
-        rB, gB, bB = RB*aB, GB*aB, BB*aB
-
-        FA = eval(FA_code)
-        FB = eval(FB_code)
-
-        rO = rA*FA + rB*FB
-        gO = gA*FA + gB*FB
-        bO = bA*FA + bB*FB
-        aO = aA*FA + aB*FB
-
-        rO = min(255, rO)
-        gO = min(255, gO)
-        bO = min(255, bO)
-        aO = min(1, aO)
-
-        if aO:
-            RO = rO / aO
-            GO = gO / aO
-            BO = bO / aO
-        else: RO = GO = BO = 0
-
-        return (RO, GO, BO, aO)
-
-    def to_test(color):
-        r, g, b, a = color
-        return '%d,%d,%d,%d' % (round(r), round(g), round(b), round(a*255))
-    def to_cairo(color):
-        r, g, b, a = color
-        return '%f,%f,%f,%f' % (r/255., g/255., b/255., a)
-
-    for (name, src, dest) in [
-        ('solid', (255, 255, 0, 1.0), (0, 255, 255, 1.0)),
-        ('transparent', (0, 0, 255, 0.75), (0, 255, 0, 0.5)),
-            # catches the atop, xor and lighter bugs in Opera 9.10
-    ]:
-        for op, FA_code, FB_code in ops:
-            expected = calc_output(src, dest, FA_code, FB_code)
-            tests.append( {
-                'name': '2d.composite.%s.%s' % (name, op),
-                'testing': [ '2d.composite.%s' % op ],
-                'code': """
-    ctx.fillStyle = 'rgba%s';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.globalCompositeOperation = '%s';
-    ctx.fillStyle = 'rgba%s';
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 50,25 ==~ %s +/- 5;
-    """ % (dest, op, src, to_test(expected)),
-                'expected': """size 100 50
-    cr.set_source_rgba(%s)
-    cr.rectangle(0, 0, 100, 50)
-    cr.fill()
-    """ % to_cairo(expected),
-            } )
-
-    for (name, src, dest) in [ ('image', (255, 255, 0, 0.75), (0, 255, 255, 0.5)) ]:
-        for op, FA_code, FB_code in ops:
-            expected = calc_output(src, dest, FA_code, FB_code)
-            tests.append( {
-                'name': '2d.composite.%s.%s' % (name, op),
-                'testing': [ '2d.composite.%s' % op ],
-                'images': [ 'yellow75.png' ],
-                'code': """
-    ctx.fillStyle = 'rgba%s';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.globalCompositeOperation = '%s';
-    ctx.drawImage(document.getElementById('yellow75.png'), 0, 0);
-    @assert pixel 50,25 ==~ %s +/- 5;
-    """ % (dest, op, to_test(expected)),
-                'expected': """size 100 50
-    cr.set_source_rgba(%s)
-    cr.rectangle(0, 0, 100, 50)
-    cr.fill()
-    """ % to_cairo(expected),
-            } )
-
-    for (name, src, dest) in [ ('canvas', (255, 255, 0, 0.75), (0, 255, 255, 0.5)) ]:
-        for op, FA_code, FB_code in ops:
-            expected = calc_output(src, dest, FA_code, FB_code)
-            tests.append( {
-                'name': '2d.composite.%s.%s' % (name, op),
-                'testing': [ '2d.composite.%s' % op ],
-                'images': [ 'yellow75.png' ],
-                'code': """
-    var canvas2 = document.createElement('canvas');
-    canvas2.width = canvas.width;
-    canvas2.height = canvas.height;
-    var ctx2 = canvas2.getContext('2d');
-    ctx2.drawImage(document.getElementById('yellow75.png'), 0, 0);
-    ctx.fillStyle = 'rgba%s';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.globalCompositeOperation = '%s';
-    ctx.drawImage(canvas2, 0, 0);
-    @assert pixel 50,25 ==~ %s +/- 5;
-    """ % (dest, op, to_test(expected)),
-                'expected': """size 100 50
-    cr.set_source_rgba(%s)
-    cr.rectangle(0, 0, 100, 50)
-    cr.fill()
-    """ % to_cairo(expected),
-            } )
-
-
-    for (name, src, dest) in [ ('uncovered.fill', (0, 0, 255, 0.75), (0, 255, 0, 0.5)) ]:
-        for op, FA_code, FB_code in ops:
-            if op not in ops_trans: continue
-            expected0 = calc_output((0,0,0,0.0), dest, FA_code, FB_code)
-            tests.append( {
-                'name': '2d.composite.%s.%s' % (name, op),
-                'desc': 'fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.',
-                'testing': [ '2d.composite.%s' % op ],
-                'code': """
-    ctx.fillStyle = 'rgba%s';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.globalCompositeOperation = '%s';
-    ctx.fillStyle = 'rgba%s';
-    ctx.translate(0, 25);
-    ctx.fillRect(0, 50, 100, 50);
-    @assert pixel 50,25 ==~ %s +/- 5;
-    """ % (dest, op, src, to_test(expected0)),
-                'expected': """size 100 50
-    cr.set_source_rgba(%s)
-    cr.rectangle(0, 0, 100, 50)
-    cr.fill()
-    """ % (to_cairo(expected0)),
-            } )
-
-    for (name, src, dest) in [ ('uncovered.image', (255, 255, 0, 1.0), (0, 255, 255, 0.5)) ]:
-        for op, FA_code, FB_code in ops:
-            if op not in ops_trans: continue
-            expected0 = calc_output((0,0,0,0.0), dest, FA_code, FB_code)
-            tests.append( {
-                'name': '2d.composite.%s.%s' % (name, op),
-                'desc': 'drawImage() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.',
-                'testing': [ '2d.composite.%s' % op ],
-                'images': [ 'yellow.png' ],
-                'code': """
-    ctx.fillStyle = 'rgba%s';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.globalCompositeOperation = '%s';
-    ctx.drawImage(document.getElementById('yellow.png'), 40, 40, 10, 10, 40, 50, 10, 10);
-    @assert pixel 15,15 ==~ %s +/- 5;
-    @assert pixel 50,25 ==~ %s +/- 5;
-    """ % (dest, op, to_test(expected0), to_test(expected0)),
-                'expected': """size 100 50
-    cr.set_source_rgba(%s)
-    cr.rectangle(0, 0, 100, 50)
-    cr.fill()
-    """ % (to_cairo(expected0)),
-            } )
-
-    for (name, src, dest) in [ ('uncovered.nocontext', (255, 255, 0, 1.0), (0, 255, 255, 0.5)) ]:
-        for op, FA_code, FB_code in ops:
-            if op not in ops_trans: continue
-            expected0 = calc_output((0,0,0,0.0), dest, FA_code, FB_code)
-            tests.append( {
-                'name': '2d.composite.%s.%s' % (name, op),
-                'desc': 'drawImage() of a canvas with no context draws pixels as (0,0,0,0), and does not leave the pixels unchanged.',
-                'testing': [ '2d.composite.%s' % op ],
-                'code': """
-    ctx.fillStyle = 'rgba%s';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.globalCompositeOperation = '%s';
-    var canvas2 = document.createElement('canvas');
-    ctx.drawImage(canvas2, 0, 0);
-    @assert pixel 50,25 ==~ %s +/- 5;
-    """ % (dest, op, to_test(expected0)),
-                'expected': """size 100 50
-    cr.set_source_rgba(%s)
-    cr.rectangle(0, 0, 100, 50)
-    cr.fill()
-    """ % (to_cairo(expected0)),
-            } )
-
-    for (name, src, dest) in [ ('uncovered.pattern', (255, 255, 0, 1.0), (0, 255, 255, 0.5)) ]:
-        for op, FA_code, FB_code in ops:
-            if op not in ops_trans: continue
-            expected0 = calc_output((0,0,0,0.0), dest, FA_code, FB_code)
-            tests.append( {
-                'name': '2d.composite.%s.%s' % (name, op),
-                'desc': 'Pattern fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.',
-                'testing': [ '2d.composite.%s' % op ],
-                'images': [ 'yellow.png' ],
-                'code': """
-    ctx.fillStyle = 'rgba%s';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.globalCompositeOperation = '%s';
-    ctx.fillStyle = ctx.createPattern(document.getElementById('yellow.png'), 'no-repeat');
-    ctx.fillRect(0, 50, 100, 50);
-    @assert pixel 50,25 ==~ %s +/- 5;
-    """ % (dest, op, to_test(expected0)),
-                'expected': """size 100 50
-    cr.set_source_rgba(%s)
-    cr.rectangle(0, 0, 100, 50)
-    cr.fill()
-    """ % (to_cairo(expected0)),
-            } )
-
-    for op, FA_code, FB_code in ops:
-        tests.append( {
-            'name': '2d.composite.clip.%s' % (op),
-            'desc': 'fill() does not affect pixels outside the clip region.',
-            'testing': [ '2d.composite.%s' % op ],
-            'code': """
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.globalCompositeOperation = '%s';
-    ctx.rect(-20, -20, 10, 10);
-    ctx.clip();
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 50, 50);
-    @assert pixel 25,25 == 0,255,0,255;
-    @assert pixel 75,25 == 0,255,0,255;
-    """ % (op),
-                'expected': 'green'
-        } )
-
-- name: 2d.composite.operation.get
-  testing:
-    - 2d.composite.operation
-  code: |
-    var modes = ['source-atop', 'source-in', 'source-out', 'source-over',
-        'destination-atop', 'destination-in', 'destination-out', 'destination-over',
-        'lighter', 'copy', 'xor'];
-    for (var i = 0; i < modes.length; ++i)
-    {
-        ctx.globalCompositeOperation = modes[i];
-        @assert ctx.globalCompositeOperation === modes[i];
-    }
-
-- name: 2d.composite.operation.unrecognised
-  testing:
-    - 2d.composite.operation.unrecognised
-  code: |
-    ctx.globalCompositeOperation = 'xor';
-    ctx.globalCompositeOperation = 'nonexistent';
-    @assert ctx.globalCompositeOperation === 'xor';
-
-- name: 2d.composite.operation.darker
-  testing:
-    - 2d.composite.operation.unrecognised
-  code: |
-    ctx.globalCompositeOperation = 'xor';
-    ctx.globalCompositeOperation = 'darker';
-    @assert ctx.globalCompositeOperation === 'xor';
-
-- name: 2d.composite.operation.over
-  testing:
-    - 2d.composite.operation.unrecognised
-  code: |
-    ctx.globalCompositeOperation = 'xor';
-    ctx.globalCompositeOperation = 'over';
-    @assert ctx.globalCompositeOperation === 'xor';
-
-- name: 2d.composite.operation.clear
-  testing:
-    - 2d.composite.operation.unrecognised
-  code: |
-    ctx.globalCompositeOperation = 'xor';
-    ctx.globalCompositeOperation = 'clear';
-    @assert ctx.globalCompositeOperation === 'clear';
-
-- name: 2d.composite.operation.highlight
-  testing:
-    - 2d.composite.operation.unrecognised
-  code: |
-    ctx.globalCompositeOperation = 'xor';
-    ctx.globalCompositeOperation = 'highlight';
-    @assert ctx.globalCompositeOperation === 'xor';
-
-- name: 2d.composite.operation.nullsuffix
-  testing:
-    - 2d.composite.operation.exact
-  code: |
-    ctx.globalCompositeOperation = 'xor';
-    ctx.globalCompositeOperation = 'source-over\0';
-    @assert ctx.globalCompositeOperation === 'xor';
-
-- name: 2d.composite.operation.casesensitive
-  testing:
-    - 2d.composite.operation.casesensitive
-  code: |
-    ctx.globalCompositeOperation = 'xor';
-    ctx.globalCompositeOperation = 'Source-over';
-    @assert ctx.globalCompositeOperation === 'xor';
-
-- name: 2d.composite.operation.default
-  testing:
-    - 2d.composite.operation.default
-  code: |
-    @assert ctx.globalCompositeOperation === 'source-over';
-
-
-- meta: |
-    # Colour parsing tests
-
-    # Try most of the CSS3 Color <color> values - http://www.w3.org/TR/css3-color/#colorunits
-    big_float = '1' + ('0' * 39)
-    big_double = '1' + ('0' * 310)
-    for name, string, r,g,b,a, notes in [
-        ('html4', 'limE', 0,255,0,255, ""),
-        ('hex3', '#0f0', 0,255,0,255, ""),
-        ('hex4', '#0f0f', 0,255,0,255, ""),
-        ('hex6', '#00fF00', 0,255,0,255, ""),
-        ('hex8', '#00ff00ff', 0,255,0,255, ""),
-        ('rgb-num', 'rgb(0,255,0)', 0,255,0,255, ""),
-        ('rgb-clamp-1', 'rgb(-1000, 1000, -1000)', 0,255,0,255, 'Assumes colours are clamped to [0,255].'),
-        ('rgb-clamp-2', 'rgb(-200%, 200%, -200%)', 0,255,0,255, 'Assumes colours are clamped to [0,255].'),
-        ('rgb-clamp-3', 'rgb(-2147483649, 4294967298, -18446744073709551619)', 0,255,0,255, 'Assumes colours are clamped to [0,255].'),
-        ('rgb-clamp-4', 'rgb(-'+big_float+', '+big_float+', -'+big_float+')', 0,255,0,255, 'Assumes colours are clamped to [0,255].'),
-        ('rgb-clamp-5', 'rgb(-'+big_double+', '+big_double+', -'+big_double+')', 0,255,0,255, 'Assumes colours are clamped to [0,255].'),
-        ('rgb-percent', 'rgb(0% ,100% ,0%)', 0,255,0,255, 'CSS3 Color says "The integer value 255 corresponds to 100%". (In particular, it is not 254...)'),
-        ('rgb-eof', 'rgb(0, 255, 0', 0,255,0,255, ""), # see CSS2.1 4.2 "Unexpected end of style sheet"
-        ('rgba-solid-1', 'rgba(  0  ,  255  ,  0  ,  1  )', 0,255,0,255, ""),
-        ('rgba-solid-2', 'rgba(  0  ,  255  ,  0  ,  1.0  )', 0,255,0,255, ""),
-        ('rgba-solid-3', 'rgba(  0  ,  255  ,  0  , +1  )', 0,255,0,255, ""),
-        ('rgba-solid-4', 'rgba( -0  ,  255  , +0  ,  1  )', 0,255,0,255, ""),
-        ('rgba-num-1', 'rgba(  0  ,  255  ,  0  ,  .499  )', 0,255,0,127, ""),
-        ('rgba-num-2', 'rgba(  0  ,  255  ,  0  ,  0.499  )', 0,255,0,127, ""),
-        ('rgba-percent', 'rgba(0%,100%,0%,0.499)', 0,255,0,127, ""), # 0.499*255 rounds to 127, both down and nearest, so it should be safe
-        ('rgba-clamp-1', 'rgba(0, 255, 0, -2)', 0,0,0,0, ""),
-        ('rgba-clamp-2', 'rgba(0, 255, 0, 2)', 0,255,0,255, ""),
-        ('rgba-eof', 'rgba(0, 255, 0, 1', 0,255,0,255, ""),
-        ('transparent-1', 'transparent', 0,0,0,0, ""),
-        ('transparent-2', 'TrAnSpArEnT', 0,0,0,0, ""),
-        ('hsl-1', 'hsl(120, 100%, 50%)', 0,255,0,255, ""),
-        ('hsl-2', 'hsl( -240 , 100% , 50% )', 0,255,0,255, ""),
-        ('hsl-3', 'hsl(360120, 100%, 50%)', 0,255,0,255, ""),
-        ('hsl-4', 'hsl(-360240, 100%, 50%)', 0,255,0,255, ""),
-        ('hsl-5', 'hsl(120.0, 100.0%, 50.0%)', 0,255,0,255, ""),
-        ('hsl-6', 'hsl(+120, +100%, +50%)', 0,255,0,255, ""),
-        ('hsl-clamp-1', 'hsl(120, 200%, 50%)', 0,255,0,255, ""),
-        ('hsl-clamp-2', 'hsl(120, -200%, 49.9%)', 127,127,127,255, ""),
-        ('hsl-clamp-3', 'hsl(120, 100%, 200%)', 255,255,255,255, ""),
-        ('hsl-clamp-4', 'hsl(120, 100%, -200%)', 0,0,0,255, ""),
-        ('hsla-1', 'hsla(120, 100%, 50%, 0.499)', 0,255,0,127, ""),
-        ('hsla-2', 'hsla( 120.0 , 100.0% , 50.0% , 1 )', 0,255,0,255, ""),
-        ('hsla-clamp-1', 'hsla(120, 200%, 50%, 1)', 0,255,0,255, ""),
-        ('hsla-clamp-2', 'hsla(120, -200%, 49.9%, 1)', 127,127,127,255, ""),
-        ('hsla-clamp-3', 'hsla(120, 100%, 200%, 1)', 255,255,255,255, ""),
-        ('hsla-clamp-4', 'hsla(120, 100%, -200%, 1)', 0,0,0,255, ""),
-        ('hsla-clamp-5', 'hsla(120, 100%, 50%, 2)', 0,255,0,255, ""),
-        ('hsla-clamp-6', 'hsla(120, 100%, 0%, -2)', 0,0,0,0, ""),
-        ('svg-1', 'gray', 128,128,128,255, ""),
-        ('svg-2', 'grey', 128,128,128,255, ""),
-        # css-color-4 rgb() color function
-        #   https://drafts.csswg.org/css-color/#numeric-rgb
-        ('css-color-4-rgb-1', 'rgb(0, 255.0, 0)', 0,255,0,255, ""),
-        ('css-color-4-rgb-2', 'rgb(0, 255, 0, 0.2)', 0,255,0,51, ""),
-        ('css-color-4-rgb-3', 'rgb(0, 255, 0, 20%)', 0,255,0,51, ""),
-        ('css-color-4-rgb-4', 'rgb(0 255 0)', 0,255,0,255, ""),
-        ('css-color-4-rgb-5', 'rgb(0 255 0 / 0.2)', 0,255,0,51, ""),
-        ('css-color-4-rgb-6', 'rgb(0 255 0 / 20%)', 0,255,0,51, ""),
-        ('css-color-4-rgba-1', 'rgba(0, 255.0, 0)', 0,255,0,255, ""),
-        ('css-color-4-rgba-2', 'rgba(0, 255, 0, 0.2)', 0,255,0,51, ""),
-        ('css-color-4-rgba-3', 'rgba(0, 255, 0, 20%)', 0,255,0,51, ""),
-        ('css-color-4-rgba-4', 'rgba(0 255 0)', 0,255,0,255, ""),
-        ('css-color-4-rgba-5', 'rgba(0 255 0 / 0.2)', 0,255,0,51, ""),
-        ('css-color-4-rgba-6', 'rgba(0 255 0 / 20%)', 0,255,0,51, ""),
-        # css-color-4 hsl() color function
-        #   https://drafts.csswg.org/css-color/#the-hsl-notation
-        ('css-color-4-hsl-1', 'hsl(120 100.0% 50.0%)', 0,255,0,255, ""),
-        ('css-color-4-hsl-2', 'hsl(120 100.0% 50.0% / 0.2)', 0,255,0,51, ""),
-        ('css-color-4-hsl-3', 'hsl(120.0, 100.0%, 50.0%, 0.2)', 0,255,0,51, ""),
-        ('css-color-4-hsl-4', 'hsl(120.0, 100.0%, 50.0%, 20%)', 0,255,0,51, ""),
-        ('css-color-4-hsl-5', 'hsl(120deg, 100.0%, 50.0%, 0.2)', 0,255,0,51, ""),
-        ('css-color-4-hsl-6', 'hsl(120deg, 100.0%, 50.0%)', 0,255,0,255, ""),
-        ('css-color-4-hsl-7', 'hsl(133.33333333grad, 100.0%, 50.0%)', 0,255,0,255, ""),
-        ('css-color-4-hsl-8', 'hsl(2.0943951024rad, 100.0%, 50.0%)', 0,255,0,255, ""),
-        ('css-color-4-hsl-9', 'hsl(0.3333333333turn, 100.0%, 50.0%)', 0,255,0,255, ""),
-        ('css-color-4-hsla-1', 'hsl(120 100.0% 50.0%)', 0,255,0,255, ""),
-        ('css-color-4-hsla-2', 'hsl(120 100.0% 50.0% / 0.2)', 0,255,0,51, ""),
-        ('css-color-4-hsla-3', 'hsl(120.0, 100.0%, 50.0%, 0.2)', 0,255,0,51, ""),
-        ('css-color-4-hsla-4', 'hsl(120.0, 100.0%, 50.0%, 20%)', 0,255,0,51, ""),
-        ('css-color-4-hsla-5', 'hsl(120deg, 100.0%, 50.0%, 0.2)', 0,255,0,51, ""),
-        ('css-color-4-hsla-6', 'hsl(120deg, 100.0%, 50.0%)', 0,255,0,255, ""),
-        ('css-color-4-hsla-7', 'hsl(133.33333333grad, 100.0%, 50.0%)', 0,255,0,255, ""),
-        ('css-color-4-hsla-8', 'hsl(2.0943951024rad, 100.0%, 50.0%)', 0,255,0,255, ""),
-        ('css-color-4-hsla-9', 'hsl(0.3333333333turn, 100.0%, 50.0%)', 0,255,0,255, ""),
-        # currentColor is handled later
-    ]:
-        # TODO: test by retrieving fillStyle, instead of actually drawing?
-        # TODO: test strokeStyle, shadowColor in the same way
-        test = {
-            'name': '2d.fillStyle.parse.%s' % name,
-            'testing': [ '2d.colours.parse' ],
-            'notes': notes,
-            'code': """
-    ctx.fillStyle = '#f00';
-    ctx.fillStyle = '%s';
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 50,25 == %d,%d,%d,%d;
-    """ % (string, r,g,b,a),
-            'expected': """size 100 50
-    cr.set_source_rgba(%f, %f, %f, %f)
-    cr.rectangle(0, 0, 100, 50)
-    cr.fill()
-    """ % (r/255., g/255., b/255., a/255.),
-        }
-        tests.append(test)
-
-    # Also test that invalid colours are ignored
-    for name, string in [
-        ('hex1', '#f'),
-        ('hex2', '#f0'),
-        ('hex3', '#g00'),
-        ('hex4', '#fg00'),
-        ('hex5', '#ff000'),
-        ('hex6', '#fg0000'),
-        ('hex7', '#ff0000f'),
-        ('hex8', '#fg0000ff'),
-        ('rgb-1', 'rgb(255.0, 0, 0,)'),
-        ('rgb-2', 'rgb(100%, 0, 0)'),
-        ('rgb-3', 'rgb(255, - 1, 0)'),
-        ('rgba-1', 'rgba(100%, 0, 0, 1)'),
-        ('rgba-2', 'rgba(255, 0, 0, 1. 0)'),
-        ('rgba-3', 'rgba(255, 0, 0, 1.)'),
-        ('rgba-4', 'rgba(255, 0, 0, '),
-        ('rgba-5', 'rgba(255, 0, 0, 1,)'),
-        ('hsl-1', 'hsl(0%, 100%, 50%)'),
-        ('hsl-2', 'hsl(z, 100%, 50%)'),
-        ('hsl-3', 'hsl(0, 0, 50%)'),
-        ('hsl-4', 'hsl(0, 100%, 0)'),
-        ('hsl-5', 'hsl(0, 100.%, 50%)'),
-        ('hsl-6', 'hsl(0, 100%, 50%,)'),
-        ('hsla-1', 'hsla(0%, 100%, 50%, 1)'),
-        ('hsla-2', 'hsla(0, 0, 50%, 1)'),
-        ('hsla-3', 'hsla(0, 0, 50%, 1,)'),
-        ('name-1', 'darkbrown'),
-        ('name-2', 'firebrick1'),
-        ('name-3', 'red blue'),
-        ('name-4', '"red"'),
-        ('name-5', '"red'),
-        # css-color-4 color function
-        #   comma and comma-less expressions should not mix together.
-        ('css-color-4-rgb-1', 'rgb(255, 0, 0 / 1)'),
-        ('css-color-4-rgb-2', 'rgb(255 0 0, 1)'),
-        ('css-color-4-rgb-3', 'rgb(255, 0 0)'),
-        ('css-color-4-rgba-1', 'rgba(255, 0, 0 / 1)'),
-        ('css-color-4-rgba-2', 'rgba(255 0 0, 1)'),
-        ('css-color-4-rgba-3', 'rgba(255, 0 0)'),
-        ('css-color-4-hsl-1', 'hsl(0, 100%, 50% / 1)'),
-        ('css-color-4-hsl-2', 'hsl(0 100% 50%, 1)'),
-        ('css-color-4-hsl-3', 'hsl(0, 100% 50%)'),
-        ('css-color-4-hsla-1', 'hsla(0, 100%, 50% / 1)'),
-        ('css-color-4-hsla-2', 'hsla(0 100% 50%, 1)'),
-        ('css-color-4-hsla-3', 'hsla(0, 100% 50%)'),
-        #  trailing slash
-        ('css-color-4-rgb-4', 'rgb(0 0 0 /)'),
-        ('css-color-4-rgb-5', 'rgb(0, 0, 0 /)'),
-        ('css-color-4-hsl-4', 'hsl(0 100% 50% /)'),
-        ('css-color-4-hsl-5', 'hsl(0, 100%, 50% /)'),
-    ]:
-        test = {
-            'name': '2d.fillStyle.parse.invalid.%s' % name,
-            'testing': [ '2d.colours.parse' ],
-            'code': """
-    ctx.fillStyle = '#0f0';
-    try { ctx.fillStyle = '%s'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-    """ % string,
-            'expected': 'green'
-        }
-        tests.append(test)
-
-    # Some can't have positive tests, only negative tests, because we don't know what colour they're meant to be
-    for name, string in [
-        ('system', 'ThreeDDarkShadow'),
-        #('flavor', 'flavor'), # removed from latest CSS3 Color drafts
-    ]:
-        test = {
-            'name': '2d.fillStyle.parse.%s' % name,
-            'testing': [ '2d.colours.parse' ],
-            'code': """
-    ctx.fillStyle = '#f00';
-    ctx.fillStyle = '%s';
-    @assert ctx.fillStyle =~ /^#(?!(FF0000|ff0000|f00)$)/; // test that it's not red
-    """ % (string,),
-        }
-        tests.append(test)
-
-- name: 2d.fillStyle.parse.current.basic
-  desc: currentColor is computed from the canvas element
-  testing:
-    - 2d.colours.parse
-    - 2d.currentColor.onset
-  code: |
-    canvas.setAttribute('style', 'color: #0f0');
-    ctx.fillStyle = '#f00';
-    ctx.fillStyle = 'currentColor';
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.fillStyle.parse.current.changed
-  desc: currentColor is computed when the attribute is set, not when it is painted
-  testing:
-    - 2d.colours.parse
-    - 2d.currentColor.onset
-  code: |
-    canvas.setAttribute('style', 'color: #0f0');
-    ctx.fillStyle = '#f00';
-    ctx.fillStyle = 'currentColor';
-    canvas.setAttribute('style', 'color: #f00');
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.fillStyle.parse.current.removed
-  desc: currentColor is solid black when the canvas element is not in a document
-  testing:
-    - 2d.colours.parse
-    - 2d.currentColor.outofdoc
-  code: |
-    // Try not to let it undetectably incorrectly pick up opaque-black
-    // from other parts of the document:
-    document.body.parentNode.setAttribute('style', 'color: #f00');
-    document.body.setAttribute('style', 'color: #f00');
-    canvas.setAttribute('style', 'color: #f00');
-
-    var canvas2 = document.createElement('canvas');
-    var ctx2 = canvas2.getContext('2d');
-    ctx2.fillStyle = '#f00';
-    ctx2.fillStyle = 'currentColor';
-    ctx2.fillRect(0, 0, 100, 50);
-    ctx.drawImage(canvas2, 0, 0);
-
-    document.body.parentNode.removeAttribute('style');
-    document.body.removeAttribute('style');
-
-    @assert pixel 50,25 == 0,0,0,255;
-  expected: |
-    size 100 50
-    cr.set_source_rgb(0, 0, 0)
-    cr.rectangle(0, 0, 100, 50)
-    cr.fill()
-
-- name: 2d.fillStyle.invalidstring
-  testing:
-    - 2d.colours.invalidstring
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.fillStyle = 'invalid';
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.fillStyle.invalidtype
-  testing:
-    - 2d.colours.invalidtype
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.fillStyle = null;
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.fillStyle.get.solid
-  testing:
-    - 2d.colours.getcolour
-    - 2d.serializecolour.solid
-  code: |
-    ctx.fillStyle = '#fa0';
-    @assert ctx.fillStyle === '#ffaa00';
-
-- name: 2d.fillStyle.get.semitransparent
-  testing:
-    - 2d.colours.getcolour
-    - 2d.serializecolour.transparent
-  code: |
-    ctx.fillStyle = 'rgba(255,255,255,0.45)';
-    @assert ctx.fillStyle =~ /^rgba\(255, 255, 255, 0\.4\d+\)$/;
-
-- name: 2d.fillStyle.get.transparent
-  testing:
-    - 2d.colours.getcolour
-    - 2d.serializecolour.transparent
-  code: |
-    ctx.fillStyle = 'rgba(0,0,0,0)';
-    @assert ctx.fillStyle === 'rgba(0, 0, 0, 0)';
-
-- name: 2d.fillStyle.default
-  testing:
-    - 2d.colours.default
-  code: |
-    @assert ctx.fillStyle === '#000000';
-
-- name: 2d.strokeStyle.default
-  testing:
-    - 2d.colours.default
-  code: |
-    @assert ctx.strokeStyle === '#000000';
-
-
-- name: 2d.gradient.object.type
-  desc: window.CanvasGradient exists and has the right properties
-  testing:
-    - 2d.canvasGradient.type
-  notes: *bindings
-  code: |
-    @assert window.CanvasGradient !== undefined;
-    @assert window.CanvasGradient.prototype.addColorStop !== undefined;
-
-- name: 2d.gradient.object.return
-  desc: createLinearGradient() and createRadialGradient() returns objects implementing CanvasGradient
-  testing:
-    - 2d.gradient.linear.return
-    - 2d.gradient.radial.return
-  code: |
-    window.CanvasGradient.prototype.thisImplementsCanvasGradient = true;
-
-    var g1 = ctx.createLinearGradient(0, 0, 100, 0);
-    @assert g1.addColorStop !== undefined;
-    @assert g1.thisImplementsCanvasGradient === true;
-
-    var g2 = ctx.createRadialGradient(0, 0, 10, 0, 0, 20);
-    @assert g2.addColorStop !== undefined;
-    @assert g2.thisImplementsCanvasGradient === true;
-
-- name: 2d.gradient.interpolate.solid
-  testing:
-    - 2d.gradient.interpolate.linear
-  code: |
-    var g = ctx.createLinearGradient(0, 0, 100, 0);
-    g.addColorStop(0, '#0f0');
-    g.addColorStop(1, '#0f0');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.gradient.interpolate.colour
-  testing:
-    - 2d.gradient.interpolate.linear
-  code: |
-    var g = ctx.createLinearGradient(0, 0, 100, 0);
-    g.addColorStop(0, '#ff0');
-    g.addColorStop(1, '#00f');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 25,25 ==~ 191,191,63,255 +/- 3;
-    @assert pixel 50,25 ==~ 127,127,127,255 +/- 3;
-    @assert pixel 75,25 ==~ 63,63,191,255 +/- 3;
-  expected: |
-    size 100 50
-    g = cairo.LinearGradient(0, 0, 100, 0)
-    g.add_color_stop_rgb(0, 1,1,0)
-    g.add_color_stop_rgb(1, 0,0,1)
-    cr.set_source(g)
-    cr.rectangle(0, 0, 100, 50)
-    cr.fill()
-
-- name: 2d.gradient.interpolate.alpha
-  testing:
-    - 2d.gradient.interpolate.linear
-  code: |
-    ctx.fillStyle = '#ff0';
-    ctx.fillRect(0, 0, 100, 50);
-    var g = ctx.createLinearGradient(0, 0, 100, 0);
-    g.addColorStop(0, 'rgba(0,0,255, 0)');
-    g.addColorStop(1, 'rgba(0,0,255, 1)');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 25,25 ==~ 191,191,63,255 +/- 3;
-    @assert pixel 50,25 ==~ 127,127,127,255 +/- 3;
-    @assert pixel 75,25 ==~ 63,63,191,255 +/- 3;
-  expected: |
-    size 100 50
-    g = cairo.LinearGradient(0, 0, 100, 0)
-    g.add_color_stop_rgb(0, 1,1,0)
-    g.add_color_stop_rgb(1, 0,0,1)
-    cr.set_source(g)
-    cr.rectangle(0, 0, 100, 50)
-    cr.fill()
-
-- name: 2d.gradient.interpolate.colouralpha
-  testing:
-    - 2d.gradient.interpolate.alpha
-  code: |
-    var g = ctx.createLinearGradient(0, 0, 100, 0);
-    g.addColorStop(0, 'rgba(255,255,0, 0)');
-    g.addColorStop(1, 'rgba(0,0,255, 1)');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 25,25 ==~ 190,190,65,65 +/- 3;
-    @assert pixel 50,25 ==~ 126,126,128,128 +/- 3;
-    @assert pixel 75,25 ==~ 62,62,192,192 +/- 3;
-  expected: |
-    size 100 50
-    g = cairo.LinearGradient(0, 0, 100, 0)
-    g.add_color_stop_rgba(0, 1,1,0, 0)
-    g.add_color_stop_rgba(1, 0,0,1, 1)
-    cr.set_source(g)
-    cr.rectangle(0, 0, 100, 50)
-    cr.fill()
-
-- name: 2d.gradient.interpolate.outside
-  testing:
-    - 2d.gradient.outside.first
-    - 2d.gradient.outside.last
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-
-    var g = ctx.createLinearGradient(25, 0, 75, 0);
-    g.addColorStop(0.4, '#0f0');
-    g.addColorStop(0.6, '#0f0');
-
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 20,25 ==~ 0,255,0,255;
-    @assert pixel 50,25 ==~ 0,255,0,255;
-    @assert pixel 80,25 ==~ 0,255,0,255;
-  expected: green
-
-- name: 2d.gradient.interpolate.zerosize.fill
-  testing:
-    - 2d.gradient.linear.zerosize
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-
-    var g = ctx.createLinearGradient(50, 25, 50, 25); // zero-length line (undefined direction)
-    g.addColorStop(0, '#f00');
-    g.addColorStop(1, '#f00');
-    ctx.fillStyle = g;
-    ctx.rect(0, 0, 100, 50);
-    ctx.fill();
-    @assert pixel 40,20 == 0,255,0,255;
-  expected: green
-
-- name: 2d.gradient.interpolate.zerosize.stroke
-  testing:
-    - 2d.gradient.linear.zerosize
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-
-    var g = ctx.createLinearGradient(50, 25, 50, 25); // zero-length line (undefined direction)
-    g.addColorStop(0, '#f00');
-    g.addColorStop(1, '#f00');
-    ctx.strokeStyle = g;
-    ctx.rect(20, 20, 60, 10);
-    ctx.stroke();
-    @assert pixel 19,19 == 0,255,0,255;
-    @assert pixel 20,19 == 0,255,0,255;
-    @assert pixel 21,19 == 0,255,0,255;
-    @assert pixel 19,20 == 0,255,0,255;
-    @assert pixel 20,20 == 0,255,0,255;
-    @assert pixel 21,20 == 0,255,0,255;
-    @assert pixel 19,21 == 0,255,0,255;
-    @assert pixel 20,21 == 0,255,0,255;
-    @assert pixel 21,21 == 0,255,0,255;
-  expected: green
-
-- name: 2d.gradient.interpolate.zerosize.fillRect
-  testing:
-    - 2d.gradient.linear.zerosize
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-
-    var g = ctx.createLinearGradient(50, 25, 50, 25); // zero-length line (undefined direction)
-    g.addColorStop(0, '#f00');
-    g.addColorStop(1, '#f00');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 40,20 == 0,255,0,255; @moz-todo
-  expected: green
-
-- name: 2d.gradient.interpolate.zerosize.strokeRect
-  testing:
-    - 2d.gradient.linear.zerosize
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-
-    var g = ctx.createLinearGradient(50, 25, 50, 25); // zero-length line (undefined direction)
-    g.addColorStop(0, '#f00');
-    g.addColorStop(1, '#f00');
-    ctx.strokeStyle = g;
-    ctx.strokeRect(20, 20, 60, 10);
-    @assert pixel 19,19 == 0,255,0,255;
-    @assert pixel 20,19 == 0,255,0,255;
-    @assert pixel 21,19 == 0,255,0,255;
-    @assert pixel 19,20 == 0,255,0,255;
-    @assert pixel 20,20 == 0,255,0,255;
-    @assert pixel 21,20 == 0,255,0,255;
-    @assert pixel 19,21 == 0,255,0,255;
-    @assert pixel 20,21 == 0,255,0,255;
-    @assert pixel 21,21 == 0,255,0,255;
-  expected: green
-
-- name: 2d.gradient.interpolate.zerosize.fillText
-  testing:
-    - 2d.gradient.linear.zerosize
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-
-    var g = ctx.createLinearGradient(50, 25, 50, 25); // zero-length line (undefined direction)
-    g.addColorStop(0, '#f00');
-    g.addColorStop(1, '#f00');
-    ctx.fillStyle = g;
-    ctx.font = '100px sans-serif';
-    ctx.fillText("AA", 0, 50);
-    _assertGreen(ctx, 100, 50);
-  expected: green
-
-- name: 2d.gradient.interpolate.zerosize.strokeText
-  testing:
-    - 2d.gradient.linear.zerosize
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-
-    var g = ctx.createLinearGradient(50, 25, 50, 25); // zero-length line (undefined direction)
-    g.addColorStop(0, '#f00');
-    g.addColorStop(1, '#f00');
-    ctx.strokeStyle = g;
-    ctx.font = '100px sans-serif';
-    ctx.strokeText("AA", 0, 50);
-    _assertGreen(ctx, 100, 50);
-  expected: green
-
-
-- name: 2d.gradient.interpolate.vertical
-  testing:
-    - 2d.gradient.interpolate.linear
-  code: |
-    var g = ctx.createLinearGradient(0, 0, 0, 50);
-    g.addColorStop(0, '#ff0');
-    g.addColorStop(1, '#00f');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 50,12 ==~ 191,191,63,255 +/- 10;
-    @assert pixel 50,25 ==~ 127,127,127,255 +/- 5;
-    @assert pixel 50,37 ==~ 63,63,191,255 +/- 10;
-  expected: |
-    size 100 50
-    g = cairo.LinearGradient(0, 0, 0, 50)
-    g.add_color_stop_rgb(0, 1,1,0)
-    g.add_color_stop_rgb(1, 0,0,1)
-    cr.set_source(g)
-    cr.rectangle(0, 0, 100, 50)
-    cr.fill()
-
-- name: 2d.gradient.interpolate.multiple
-  testing:
-    - 2d.gradient.interpolate.linear
-  code: |
-    canvas.width = 200;
-    var g = ctx.createLinearGradient(0, 0, 200, 0);
-    g.addColorStop(0, '#ff0');
-    g.addColorStop(0.5, '#0ff');
-    g.addColorStop(1, '#f0f');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 200, 50);
-    @assert pixel 50,25 ==~ 127,255,127,255 +/- 3;
-    @assert pixel 100,25 ==~ 0,255,255,255 +/- 3;
-    @assert pixel 150,25 ==~ 127,127,255,255 +/- 3;
-  expected: |
-    size 200 50
-    g = cairo.LinearGradient(0, 0, 200, 0)
-    g.add_color_stop_rgb(0.0, 1,1,0)
-    g.add_color_stop_rgb(0.5, 0,1,1)
-    g.add_color_stop_rgb(1.0, 1,0,1)
-    cr.set_source(g)
-    cr.rectangle(0, 0, 200, 50)
-    cr.fill()
-
-- name: 2d.gradient.interpolate.overlap
-  testing:
-    - 2d.gradient.interpolate.overlap
-  code: |
-    canvas.width = 200;
-    var g = ctx.createLinearGradient(0, 0, 200, 0);
-    g.addColorStop(0, '#f00');
-    g.addColorStop(0, '#ff0');
-    g.addColorStop(0.25, '#00f');
-    g.addColorStop(0.25, '#0f0');
-    g.addColorStop(0.25, '#0f0');
-    g.addColorStop(0.25, '#0f0');
-    g.addColorStop(0.25, '#ff0');
-    g.addColorStop(0.5, '#00f');
-    g.addColorStop(0.5, '#0f0');
-    g.addColorStop(0.75, '#00f');
-    g.addColorStop(0.75, '#f00');
-    g.addColorStop(0.75, '#ff0');
-    g.addColorStop(0.5, '#0f0');
-    g.addColorStop(0.5, '#0f0');
-    g.addColorStop(0.5, '#ff0');
-    g.addColorStop(1, '#00f');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 200, 50);
-    @assert pixel 49,25 ==~ 0,0,255,255 +/- 16;
-    @assert pixel 51,25 ==~ 255,255,0,255 +/- 16;
-    @assert pixel 99,25 ==~ 0,0,255,255 +/- 16;
-    @assert pixel 101,25 ==~ 255,255,0,255 +/- 16;
-    @assert pixel 149,25 ==~ 0,0,255,255 +/- 16;
-    @assert pixel 151,25 ==~ 255,255,0,255 +/- 16;
-  expected: |
-    size 200 50
-    g = cairo.LinearGradient(0, 0, 50, 0)
-    g.add_color_stop_rgb(0, 1,1,0)
-    g.add_color_stop_rgb(1, 0,0,1)
-    cr.set_source(g)
-    cr.rectangle(0, 0, 50, 50)
-    cr.fill()
-
-    g = cairo.LinearGradient(50, 0, 100, 0)
-    g.add_color_stop_rgb(0, 1,1,0)
-    g.add_color_stop_rgb(1, 0,0,1)
-    cr.set_source(g)
-    cr.rectangle(50, 0, 50, 50)
-    cr.fill()
-
-    g = cairo.LinearGradient(100, 0, 150, 0)
-    g.add_color_stop_rgb(0, 1,1,0)
-    g.add_color_stop_rgb(1, 0,0,1)
-    cr.set_source(g)
-    cr.rectangle(100, 0, 50, 50)
-    cr.fill()
-
-    g = cairo.LinearGradient(150, 0, 200, 0)
-    g.add_color_stop_rgb(0, 1,1,0)
-    g.add_color_stop_rgb(1, 0,0,1)
-    cr.set_source(g)
-    cr.rectangle(150, 0, 50, 50)
-    cr.fill()
-
-- name: 2d.gradient.interpolate.overlap2
-  testing:
-    - 2d.gradient.interpolate.overlap
-  code: |
-    var g = ctx.createLinearGradient(0, 0, 100, 0);
-    var ps = [ 0, 1/10, 1/4, 1/3, 1/2, 3/4, 1 ];
-    for (var p = 0; p < ps.length; ++p)
-    {
-            g.addColorStop(ps[p], '#0f0');
-            for (var i = 0; i < 15; ++i)
-                    g.addColorStop(ps[p], '#f00');
-            g.addColorStop(ps[p], '#0f0');
-    }
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 1,25 == 0,255,0,255;
-    @assert pixel 30,25 == 0,255,0,255;
-    @assert pixel 40,25 == 0,255,0,255;
-    @assert pixel 60,25 == 0,255,0,255;
-    @assert pixel 80,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.gradient.empty
-  testing:
-    - 2d.gradient.empty
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    var g = ctx.createLinearGradient(0, 0, 0, 50);
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 50,25 ==~ 0,255,0,255;
-  expected: green
-
-- name: 2d.gradient.object.update
-  testing:
-    - 2d.gradient.update
-  code: |
-    var g = ctx.createLinearGradient(-100, 0, 200, 0);
-    g.addColorStop(0, '#f00');
-    g.addColorStop(1, '#f00');
-    ctx.fillStyle = g;
-    g.addColorStop(0.1, '#0f0');
-    g.addColorStop(0.9, '#0f0');
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 50,25 ==~ 0,255,0,255;
-  expected: green
-
-- name: 2d.gradient.object.compare
-  testing:
-    - 2d.gradient.object
-  code: |
-    var g1 = ctx.createLinearGradient(0, 0, 100, 0);
-    var g2 = ctx.createLinearGradient(0, 0, 100, 0);
-    @assert g1 !== g2;
-    ctx.fillStyle = g1;
-    @assert ctx.fillStyle === g1;
-
-- name: 2d.gradient.object.crosscanvas
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    var g = document.createElement('canvas').getContext('2d').createLinearGradient(0, 0, 100, 0);
-    g.addColorStop(0, '#0f0');
-    g.addColorStop(1, '#0f0');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 50,25 ==~ 0,255,0,255;
-  expected: green
-
-- name: 2d.gradient.object.current
-  testing:
-    - 2d.currentColor.gradient
-  code: |
-    canvas.setAttribute('style', 'color: #f00');
-
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-
-    var g = ctx.createLinearGradient(0, 0, 100, 0);
-    g.addColorStop(0, 'currentColor');
-    g.addColorStop(1, 'currentColor');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 50,25 ==~ 0,0,0,255;
-  expected: |
-    size 100 50
-    cr.set_source_rgb(0, 0, 0)
-    cr.rectangle(0, 0, 100, 50)
-    cr.fill()
-
-- name: 2d.gradient.object.invalidoffset
-  testing:
-    - 2d.gradient.invalidoffset
-  code: |
-    var g = ctx.createLinearGradient(0, 0, 100, 0);
-    @assert throws INDEX_SIZE_ERR g.addColorStop(-1, '#000');
-    @assert throws INDEX_SIZE_ERR g.addColorStop(2, '#000');
-    @assert throws TypeError g.addColorStop(Infinity, '#000');
-    @assert throws TypeError g.addColorStop(-Infinity, '#000');
-    @assert throws TypeError g.addColorStop(NaN, '#000');
-
-- name: 2d.gradient.object.invalidcolour
-  testing:
-    - 2d.gradient.invalidcolour
-  code: |
-    var g = ctx.createLinearGradient(0, 0, 100, 0);
-    @assert throws SYNTAX_ERR g.addColorStop(0, "");
-    @assert throws SYNTAX_ERR g.addColorStop(0, 'rgb(NaN%, NaN%, NaN%)');
-    @assert throws SYNTAX_ERR g.addColorStop(0, 'null');
-    @assert throws SYNTAX_ERR g.addColorStop(0, 'undefined');
-    @assert throws SYNTAX_ERR g.addColorStop(0, null);
-    @assert throws SYNTAX_ERR g.addColorStop(0, undefined);
-
-    var g = ctx.createRadialGradient(0, 0, 0, 100, 0, 0);
-    @assert throws SYNTAX_ERR g.addColorStop(0, "");
-    @assert throws SYNTAX_ERR g.addColorStop(0, 'rgb(NaN%, NaN%, NaN%)');
-    @assert throws SYNTAX_ERR g.addColorStop(0, 'null');
-    @assert throws SYNTAX_ERR g.addColorStop(0, 'undefined');
-    @assert throws SYNTAX_ERR g.addColorStop(0, null);
-    @assert throws SYNTAX_ERR g.addColorStop(0, undefined);
-
-
-- name: 2d.gradient.linear.nonfinite
-  desc: createLinearGradient() throws TypeError if arguments are not finite
-  notes: *bindings
-  testing:
-    - 2d.gradient.linear.nonfinite
-  code: |
-    @nonfinite @assert throws TypeError ctx.createLinearGradient(<0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <1 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>);
-
-- name: 2d.gradient.linear.transform.1
-  desc: Linear gradient coordinates are relative to the coordinate space at the time of filling
-  testing:
-    - 2d.gradient.linear.transform
-  code: |
-    var g = ctx.createLinearGradient(0, 0, 200, 0);
-    g.addColorStop(0, '#f00');
-    g.addColorStop(0.25, '#0f0');
-    g.addColorStop(0.75, '#0f0');
-    g.addColorStop(1, '#f00');
-    ctx.fillStyle = g;
-    ctx.translate(-50, 0);
-    ctx.fillRect(50, 0, 100, 50);
-    @assert pixel 25,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 75,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.gradient.linear.transform.2
-  desc: Linear gradient coordinates are relative to the coordinate space at the time of filling
-  testing:
-    - 2d.gradient.linear.transform
-  code: |
-    ctx.translate(100, 0);
-    var g = ctx.createLinearGradient(0, 0, 200, 0);
-    g.addColorStop(0, '#f00');
-    g.addColorStop(0.25, '#0f0');
-    g.addColorStop(0.75, '#0f0');
-    g.addColorStop(1, '#f00');
-    ctx.fillStyle = g;
-    ctx.translate(-150, 0);
-    ctx.fillRect(50, 0, 100, 50);
-    @assert pixel 25,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 75,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.gradient.linear.transform.3
-  desc: Linear gradient transforms do not experience broken caching effects
-  testing:
-    - 2d.gradient.linear.transform
-  code: |
-    var g = ctx.createLinearGradient(0, 0, 200, 0);
-    g.addColorStop(0, '#f00');
-    g.addColorStop(0.25, '#0f0');
-    g.addColorStop(0.75, '#0f0');
-    g.addColorStop(1, '#f00');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.translate(-50, 0);
-    ctx.fillRect(50, 0, 100, 50);
-    @assert pixel 25,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 75,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.gradient.radial.negative
-  desc: createRadialGradient() throws INDEX_SIZE_ERR if either radius is negative
-  testing:
-    - 2d.gradient.radial.negative
-  code: |
-    @assert throws INDEX_SIZE_ERR ctx.createRadialGradient(0, 0, -0.1, 0, 0, 1);
-    @assert throws INDEX_SIZE_ERR ctx.createRadialGradient(0, 0, 1, 0, 0, -0.1);
-    @assert throws INDEX_SIZE_ERR ctx.createRadialGradient(0, 0, -0.1, 0, 0, -0.1);
-
-- name: 2d.gradient.radial.nonfinite
-  desc: createRadialGradient() throws TypeError if arguments are not finite
-  notes: *bindings
-  testing:
-    - 2d.gradient.radial.nonfinite
-  code: |
-    @nonfinite @assert throws TypeError ctx.createRadialGradient(<0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <1 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <1 Infinity -Infinity NaN>);
-
-- name: 2d.gradient.radial.inside1
-  testing:
-    - 2d.gradient.radial.rendering
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-
-    var g = ctx.createRadialGradient(50, 25, 100, 50, 25, 200);
-    g.addColorStop(0, '#0f0');
-    g.addColorStop(1, '#f00');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 50,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 98,25 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 50,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.gradient.radial.inside2
-  testing:
-    - 2d.gradient.radial.rendering
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-
-    var g = ctx.createRadialGradient(50, 25, 200, 50, 25, 100);
-    g.addColorStop(0, '#f00');
-    g.addColorStop(1, '#0f0');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 50,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 98,25 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 50,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.gradient.radial.inside3
-  testing:
-    - 2d.gradient.radial.rendering
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-
-    var g = ctx.createRadialGradient(50, 25, 200, 50, 25, 100);
-    g.addColorStop(0, '#f00');
-    g.addColorStop(0.993, '#f00');
-    g.addColorStop(1, '#0f0');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 50,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 98,25 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 50,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.gradient.radial.outside1
-  testing:
-    - 2d.gradient.radial.rendering
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-
-    var g = ctx.createRadialGradient(200, 25, 10, 200, 25, 20);
-    g.addColorStop(0, '#f00');
-    g.addColorStop(1, '#0f0');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 50,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 98,25 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 50,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.gradient.radial.outside2
-  testing:
-    - 2d.gradient.radial.rendering
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-
-    var g = ctx.createRadialGradient(200, 25, 20, 200, 25, 10);
-    g.addColorStop(0, '#0f0');
-    g.addColorStop(1, '#f00');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 50,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 98,25 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 50,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.gradient.radial.outside3
-  testing:
-    - 2d.gradient.radial.rendering
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-
-    var g = ctx.createRadialGradient(200, 25, 20, 200, 25, 10);
-    g.addColorStop(0, '#0f0');
-    g.addColorStop(0.001, '#f00');
-    g.addColorStop(1, '#f00');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 50,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 98,25 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 50,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.gradient.radial.touch1
-  testing:
-    - 2d.gradient.radial.rendering
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-
-    var g = ctx.createRadialGradient(150, 25, 50, 200, 25, 100);
-    g.addColorStop(0, '#f00');
-    g.addColorStop(1, '#f00');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-
-    @assert pixel 1,1 == 0,255,0,255; @moz-todo
-    @assert pixel 50,1 == 0,255,0,255; @moz-todo
-    @assert pixel 98,1 == 0,255,0,255; @moz-todo
-    @assert pixel 1,25 == 0,255,0,255; @moz-todo
-    @assert pixel 50,25 == 0,255,0,255; @moz-todo
-    @assert pixel 98,25 == 0,255,0,255; @moz-todo
-    @assert pixel 1,48 == 0,255,0,255; @moz-todo
-    @assert pixel 50,48 == 0,255,0,255; @moz-todo
-    @assert pixel 98,48 == 0,255,0,255; @moz-todo
-  expected: green
-
-- name: 2d.gradient.radial.touch2
-  testing:
-    - 2d.gradient.radial.rendering
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-
-    var g = ctx.createRadialGradient(-80, 25, 70, 0, 25, 150);
-    g.addColorStop(0, '#f00');
-    g.addColorStop(0.01, '#0f0');
-    g.addColorStop(0.99, '#0f0');
-    g.addColorStop(1, '#f00');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 50,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 98,25 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 50,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.gradient.radial.touch3
-  testing:
-    - 2d.gradient.radial.rendering
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-
-    var g = ctx.createRadialGradient(120, -15, 25, 140, -30, 50);
-    g.addColorStop(0, '#f00');
-    g.addColorStop(1, '#f00');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-
-    @assert pixel 1,1 == 0,255,0,255; @moz-todo
-    @assert pixel 50,1 == 0,255,0,255; @moz-todo
-    @assert pixel 98,1 == 0,255,0,255; @moz-todo
-    @assert pixel 1,25 == 0,255,0,255; @moz-todo
-    @assert pixel 50,25 == 0,255,0,255; @moz-todo
-    @assert pixel 98,25 == 0,255,0,255; @moz-todo
-    @assert pixel 1,48 == 0,255,0,255; @moz-todo
-    @assert pixel 50,48 == 0,255,0,255; @moz-todo
-    @assert pixel 98,48 == 0,255,0,255; @moz-todo
-  expected: green
-
-- name: 2d.gradient.radial.equal
-  testing:
-    - 2d.gradient.radial.equal
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-
-    var g = ctx.createRadialGradient(50, 25, 20, 50, 25, 20);
-    g.addColorStop(0, '#f00');
-    g.addColorStop(1, '#f00');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-
-    @assert pixel 1,1 == 0,255,0,255; @moz-todo
-    @assert pixel 50,1 == 0,255,0,255; @moz-todo
-    @assert pixel 98,1 == 0,255,0,255; @moz-todo
-    @assert pixel 1,25 == 0,255,0,255; @moz-todo
-    @assert pixel 50,25 == 0,255,0,255; @moz-todo
-    @assert pixel 98,25 == 0,255,0,255; @moz-todo
-    @assert pixel 1,48 == 0,255,0,255; @moz-todo
-    @assert pixel 50,48 == 0,255,0,255; @moz-todo
-    @assert pixel 98,48 == 0,255,0,255; @moz-todo
-  expected: green
-
-- name: 2d.gradient.radial.cone.behind
-  testing:
-    - 2d.gradient.radial.rendering
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-
-    var g = ctx.createRadialGradient(120, 25, 10, 211, 25, 100);
-    g.addColorStop(0, '#f00');
-    g.addColorStop(1, '#f00');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-
-    @assert pixel 1,1 == 0,255,0,255; @moz-todo
-    @assert pixel 50,1 == 0,255,0,255; @moz-todo
-    @assert pixel 98,1 == 0,255,0,255; @moz-todo
-    @assert pixel 1,25 == 0,255,0,255; @moz-todo
-    @assert pixel 50,25 == 0,255,0,255; @moz-todo
-    @assert pixel 98,25 == 0,255,0,255; @moz-todo
-    @assert pixel 1,48 == 0,255,0,255; @moz-todo
-    @assert pixel 50,48 == 0,255,0,255; @moz-todo
-    @assert pixel 98,48 == 0,255,0,255; @moz-todo
-  expected: green
-
-- name: 2d.gradient.radial.cone.front
-  testing:
-    - 2d.gradient.radial.rendering
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-
-    var g = ctx.createRadialGradient(311, 25, 10, 210, 25, 100);
-    g.addColorStop(0, '#f00');
-    g.addColorStop(1, '#0f0');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 50,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 98,25 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 50,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.gradient.radial.cone.bottom
-  testing:
-    - 2d.gradient.radial.rendering
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-
-    var g = ctx.createRadialGradient(210, 25, 100, 230, 25, 101);
-    g.addColorStop(0, '#0f0');
-    g.addColorStop(1, '#f00');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 50,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 98,25 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 50,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.gradient.radial.cone.top
-  testing:
-    - 2d.gradient.radial.rendering
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-
-    var g = ctx.createRadialGradient(230, 25, 100, 100, 25, 101);
-    g.addColorStop(0, '#f00');
-    g.addColorStop(1, '#0f0');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 50,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 98,25 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 50,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.gradient.radial.cone.beside
-  testing:
-    - 2d.gradient.radial.rendering
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-
-    var g = ctx.createRadialGradient(0, 100, 40, 100, 100, 50);
-    g.addColorStop(0, '#f00');
-    g.addColorStop(1, '#f00');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-
-    @assert pixel 1,1 == 0,255,0,255; @moz-todo
-    @assert pixel 50,1 == 0,255,0,255; @moz-todo
-    @assert pixel 98,1 == 0,255,0,255; @moz-todo
-    @assert pixel 1,25 == 0,255,0,255; @moz-todo
-    @assert pixel 50,25 == 0,255,0,255; @moz-todo
-    @assert pixel 98,25 == 0,255,0,255; @moz-todo
-    @assert pixel 1,48 == 0,255,0,255; @moz-todo
-    @assert pixel 50,48 == 0,255,0,255; @moz-todo
-    @assert pixel 98,48 == 0,255,0,255; @moz-todo
-  expected: green
-
-- name: 2d.gradient.radial.cone.cylinder
-  testing:
-    - 2d.gradient.radial.rendering
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-
-    var g = ctx.createRadialGradient(210, 25, 100, 230, 25, 100);
-    g.addColorStop(0, '#0f0');
-    g.addColorStop(1, '#f00');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 50,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 98,25 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 50,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.gradient.radial.cone.shape1
-  testing:
-    - 2d.gradient.radial.rendering
-  code: |
-    var tol = 1; // tolerance to avoid antialiasing artifacts
-
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.fillStyle = '#f00';
-    ctx.beginPath();
-    ctx.moveTo(30+tol, 40);
-    ctx.lineTo(110, -20+tol);
-    ctx.lineTo(110, 100-tol);
-    ctx.fill();
-
-    var g = ctx.createRadialGradient(30+10*5/2, 40, 10*3/2, 30+10*15/4, 40, 10*9/4);
-    g.addColorStop(0, '#0f0');
-    g.addColorStop(1, '#0f0');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 50,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 98,25 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 50,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.gradient.radial.cone.shape2
-  testing:
-    - 2d.gradient.radial.rendering
-  code: |
-    var tol = 1; // tolerance to avoid antialiasing artifacts
-
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-
-    var g = ctx.createRadialGradient(30+10*5/2, 40, 10*3/2, 30+10*15/4, 40, 10*9/4);
-    g.addColorStop(0, '#f00');
-    g.addColorStop(1, '#f00');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.fillStyle = '#0f0';
-    ctx.beginPath();
-    ctx.moveTo(30-tol, 40);
-    ctx.lineTo(110, -20-tol);
-    ctx.lineTo(110, 100+tol);
-    ctx.fill();
-
-    @assert pixel 1,1 == 0,255,0,255; @moz-todo
-    @assert pixel 50,1 == 0,255,0,255; @moz-todo
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,25 == 0,255,0,255; @moz-todo
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 98,25 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255; @moz-todo
-    @assert pixel 50,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.gradient.radial.transform.1
-  desc: Radial gradient coordinates are relative to the coordinate space at the time of filling
-  testing:
-    - 2d.gradient.radial.transform
-  code: |
-    var g = ctx.createRadialGradient(0, 0, 0, 0, 0, 11.2);
-    g.addColorStop(0, '#0f0');
-    g.addColorStop(0.5, '#0f0');
-    g.addColorStop(0.51, '#f00');
-    g.addColorStop(1, '#f00');
-    ctx.fillStyle = g;
-    ctx.translate(50, 25);
-    ctx.scale(10, 10);
-    ctx.fillRect(-5, -2.5, 10, 5);
-    @assert pixel 25,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 75,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.gradient.radial.transform.2
-  desc: Radial gradient coordinates are relative to the coordinate space at the time of filling
-  testing:
-    - 2d.gradient.radial.transform
-  code: |
-    ctx.translate(100, 0);
-    var g = ctx.createRadialGradient(0, 0, 0, 0, 0, 11.2);
-    g.addColorStop(0, '#0f0');
-    g.addColorStop(0.5, '#0f0');
-    g.addColorStop(0.51, '#f00');
-    g.addColorStop(1, '#f00');
-    ctx.fillStyle = g;
-    ctx.translate(-50, 25);
-    ctx.scale(10, 10);
-    ctx.fillRect(-5, -2.5, 10, 5);
-    @assert pixel 25,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 75,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.gradient.radial.transform.3
-  desc: Radial gradient transforms do not experience broken caching effects
-  testing:
-    - 2d.gradient.radial.transform
-  code: |
-    var g = ctx.createRadialGradient(0, 0, 0, 0, 0, 11.2);
-    g.addColorStop(0, '#0f0');
-    g.addColorStop(0.5, '#0f0');
-    g.addColorStop(0.51, '#f00');
-    g.addColorStop(1, '#f00');
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.translate(50, 25);
-    ctx.scale(10, 10);
-    ctx.fillRect(-5, -2.5, 10, 5);
-    @assert pixel 25,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 75,25 == 0,255,0,255;
-  expected: green
-
-
-
-
-
-
-- name: 2d.pattern.basic.type
-  testing:
-    - 2d.pattern.return
-  images:
-    - green.png
-  code: |
-    @assert window.CanvasPattern !== undefined;
-
-    window.CanvasPattern.prototype.thisImplementsCanvasPattern = true;
-
-    var img = document.getElementById('green.png');
-    var pattern = ctx.createPattern(img, 'no-repeat');
-    @assert pattern.thisImplementsCanvasPattern;
-
-- name: 2d.pattern.basic.image
-  testing:
-    - 2d.pattern.painting
-  images:
-    - green.png
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    var img = document.getElementById('green.png');
-    var pattern = ctx.createPattern(img, 'no-repeat');
-    ctx.fillStyle = pattern;
-    ctx.fillRect(0, 0, 100, 50);
-
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.pattern.basic.canvas
-  testing:
-    - 2d.pattern.painting
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-
-    var canvas2 = document.createElement('canvas');
-    canvas2.width = 100;
-    canvas2.height = 50;
-    var ctx2 = canvas2.getContext('2d');
-    ctx2.fillStyle = '#0f0';
-    ctx2.fillRect(0, 0, 100, 50);
-
-    var pattern = ctx.createPattern(canvas2, 'no-repeat');
-    ctx.fillStyle = pattern;
-    ctx.fillRect(0, 0, 100, 50);
-
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 50,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 98,25 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 50,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.pattern.basic.zerocanvas
-  testing:
-    - 2d.pattern.zerocanvas
-  code: |
-    canvas.width = 0;
-    canvas.height = 10;
-    @assert canvas.width === 0;
-    @assert canvas.height === 10;
-    @assert throws INVALID_STATE_ERR ctx.createPattern(canvas, 'repeat');
-
-    canvas.width = 10;
-    canvas.height = 0;
-    @assert canvas.width === 10;
-    @assert canvas.height === 0;
-    @assert throws INVALID_STATE_ERR ctx.createPattern(canvas, 'repeat');
-
-    canvas.width = 0;
-    canvas.height = 0;
-    @assert canvas.width === 0;
-    @assert canvas.height === 0;
-    @assert throws INVALID_STATE_ERR ctx.createPattern(canvas, 'repeat');
-
-- name: 2d.pattern.basic.nocontext
-  testing:
-    - 2d.pattern.painting
-  code: |
-    var canvas2 = document.createElement('canvas');
-    canvas2.width = 100;
-    canvas2.height = 50;
-    var pattern = ctx.createPattern(canvas2, 'no-repeat');
-
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#f00';
-    ctx.fillStyle = pattern;
-    ctx.fillRect(0, 0, 100, 50);
-
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.pattern.image.undefined
-  testing:
-    - 2d.pattern.IDL
-  notes: *bindings
-  code: |
-    @assert throws TypeError ctx.createPattern(undefined, 'repeat');
-
-- name: 2d.pattern.image.null
-  testing:
-    - 2d.pattern.IDL
-  notes: *bindings
-  code: |
-    @assert throws TypeError ctx.createPattern(null, 'repeat');
-
-- name: 2d.pattern.image.string
-  testing:
-    - 2d.pattern.IDL
-  notes: *bindings
-  code: |
-    @assert throws TypeError ctx.createPattern('../images/red.png', 'repeat');
-
-- name: 2d.pattern.image.incomplete.nosrc
-  testing:
-    - 2d.pattern.incomplete.image
-  code: |
-    var img = new Image();
-    @assert ctx.createPattern(img, 'repeat') === null;
-
-- name: 2d.pattern.image.incomplete.immediate
-  testing:
-    - 2d.pattern.incomplete.image
-  images:
-    - red.png
-  code: |
-    var img = new Image();
-    img.src = '../images/red.png';
-    // This triggers the "update the image data" algorithm.
-    // The image will not go to the "completely available" state
-    // until a fetch task in the networking task source is processed,
-    // so the image must not be fully decodable yet:
-    @assert ctx.createPattern(img, 'repeat') === null; @moz-todo
-
-- name: 2d.pattern.image.incomplete.reload
-  testing:
-    - 2d.pattern.incomplete.image
-  images:
-    - yellow.png
-    - red.png
-  code: |
-    var img = document.getElementById('yellow.png');
-    img.src = '../images/red.png';
-    // This triggers the "update the image data" algorithm,
-    // and resets the image to the "unavailable" state.
-    // The image will not go to the "completely available" state
-    // until a fetch task in the networking task source is processed,
-    // so the image must not be fully decodable yet:
-    @assert ctx.createPattern(img, 'repeat') === null; @moz-todo
-
-- name: 2d.pattern.image.incomplete.emptysrc
-  testing:
-    - 2d.pattern.incomplete.image
-  images:
-    - red.png
-  mozilla: { throws }
-  code: |
-    var img = document.getElementById('red.png');
-    img.src = "";
-    @assert ctx.createPattern(img, 'repeat') === null;
-
-- name: 2d.pattern.image.incomplete.removedsrc
-  testing:
-    - 2d.pattern.incomplete.image
-  images:
-    - red.png
-  mozilla: { throws }
-  code: |
-    var img = document.getElementById('red.png');
-    img.removeAttribute('src');
-    @assert ctx.createPattern(img, 'repeat') === null;
-
-- name: 2d.pattern.image.broken
-  testing:
-    - 2d.pattern.broken.image
-  images:
-    - broken.png
-  code: |
-    var img = document.getElementById('broken.png');
-    @assert ctx.createPattern(img, 'repeat') === null;
-
-- name: 2d.pattern.image.nonexistent
-  testing:
-    - 2d.pattern.nonexistent.image
-  images:
-    - no-such-image-really.png
-  code: |
-    var img = document.getElementById('no-such-image-really.png');
-    @assert throws INVALID_STATE_ERR ctx.createPattern(img, 'repeat');
-
-- name: 2d.pattern.svgimage.nonexistent
-  testing:
-    - 2d.pattern.nonexistent.svgimage
-  svgimages:
-    - no-such-image-really.png
-  code: |
-    var img = document.getElementById('no-such-image-really.png');
-    @assert throws INVALID_STATE_ERR ctx.createPattern(img, 'repeat');
-
-- name: 2d.pattern.image.nonexistent-but-loading
-  testing:
-    - 2d.pattern.nonexistent-but-loading.image
-  code: |
-    var img = document.createElement("img");
-    img.src = "/images/no-such-image-really.png";
-    @assert ctx.createPattern(img, 'repeat') === null;
-    var img = document.createElementNS("http://www.w3.org/2000/svg", "image");
-    img.src = "/images/no-such-image-really.png";
-    @assert ctx.createPattern(img, 'repeat') === null;
-
-- name: 2d.pattern.image.nosrc
-  testing:
-    - 2d.pattern.nosrc.image
-  code: |
-    var img = document.createElement("img");
-    @assert ctx.createPattern(img, 'repeat') === null;
-    var img = document.createElementNS("http://www.w3.org/2000/svg", "image");
-    @assert ctx.createPattern(img, 'repeat') === null;
-
-- name: 2d.pattern.image.zerowidth
-  testing:
-    - 2d.pattern.zerowidth.image
-  images:
-    - red-zerowidth.svg
-  code: |
-    var img = document.getElementById('red-zerowidth.svg');
-    @assert ctx.createPattern(img, 'repeat') === null;
-
-- name: 2d.pattern.image.zeroheight
-  testing:
-    - 2d.pattern.zeroheight.image
-  images:
-    - red-zeroheight.svg
-  code: |
-    var img = document.getElementById('red-zeroheight.svg');
-    @assert ctx.createPattern(img, 'repeat') === null;
-
-- name: 2d.pattern.svgimage.zerowidth
-  testing:
-    - 2d.pattern.zerowidth.svgimage
-  svgimages:
-    - red-zerowidth.svg
-  code: |
-    var img = document.getElementById('red-zerowidth.svg');
-    @assert ctx.createPattern(img, 'repeat') === null;
-
-- name: 2d.pattern.svgimage.zeroheight
-  testing:
-    - 2d.pattern.zeroheight.svgimage
-  svgimages:
-    - red-zeroheight.svg
-  code: |
-    var img = document.getElementById('red-zeroheight.svg');
-    @assert ctx.createPattern(img, 'repeat') === null;
-
-- name: 2d.pattern.repeat.empty
-  testing:
-    - 2d.pattern.missing
-  images:
-    - green-1x1.png
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    var img = document.getElementById('green-1x1.png');
-    var pattern = ctx.createPattern(img, "");
-    ctx.fillStyle = pattern;
-    ctx.fillRect(0, 0, 200, 50);
-
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.pattern.repeat.null
-  testing:
-    - 2d.pattern.unrecognised
-  code: |
-    @assert ctx.createPattern(canvas, null) != null;
-
-- name: 2d.pattern.repeat.undefined
-  testing:
-    - 2d.pattern.unrecognised
-  code: |
-    @assert throws SYNTAX_ERR ctx.createPattern(canvas, undefined);
-
-- name: 2d.pattern.repeat.unrecognised
-  testing:
-    - 2d.pattern.unrecognised
-  code: |
-    @assert throws SYNTAX_ERR ctx.createPattern(canvas, "invalid");
-
-- name: 2d.pattern.repeat.unrecognisednull
-  testing:
-    - 2d.pattern.unrecognised
-  code: |
-    @assert throws SYNTAX_ERR ctx.createPattern(canvas, "null");
-
-- name: 2d.pattern.repeat.case
-  testing:
-    - 2d.pattern.exact
-  code: |
-    @assert throws SYNTAX_ERR ctx.createPattern(canvas, "Repeat");
-
-- name: 2d.pattern.repeat.nullsuffix
-  testing:
-    - 2d.pattern.exact
-  code: |
-    @assert throws SYNTAX_ERR ctx.createPattern(canvas, "repeat\0");
-
-- name: 2d.pattern.modify.image1
-  testing:
-    - 2d.pattern.modify
-  images:
-    - green.png
-  code: |
-    var img = document.getElementById('green.png');
-    var pattern = ctx.createPattern(img, 'no-repeat');
-    deferTest();
-    img.onload = t.step_func_done(function ()
-    {
-        ctx.fillStyle = pattern;
-        ctx.fillRect(0, 0, 100, 50);
-
-        @assert pixel 1,1 == 0,255,0,255;
-        @assert pixel 98,1 == 0,255,0,255;
-        @assert pixel 1,48 == 0,255,0,255;
-        @assert pixel 98,48 == 0,255,0,255;
-    });
-    img.src = '/images/red.png';
-  expected: green
-
-- name: 2d.pattern.modify.image2
-  testing:
-    - 2d.pattern.modify
-  images:
-    - green.png
-  code: |
-    var img = document.getElementById('green.png');
-    var pattern = ctx.createPattern(img, 'no-repeat');
-    ctx.fillStyle = pattern;
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#00f';
-    ctx.fillRect(0, 0, 100, 50);
-    deferTest();
-    img.onload = t.step_func_done(function ()
-    {
-        ctx.fillStyle = pattern;
-        ctx.fillRect(0, 0, 100, 50);
-
-        @assert pixel 1,1 == 0,255,0,255;
-        @assert pixel 98,1 == 0,255,0,255;
-        @assert pixel 1,48 == 0,255,0,255;
-        @assert pixel 98,48 == 0,255,0,255;
-    });
-    img.src = '/images/red.png';
-  expected: green
-
-- name: 2d.pattern.modify.canvas1
-  testing:
-    - 2d.pattern.modify
-  code: |
-    var canvas2 = document.createElement('canvas');
-    canvas2.width = 100;
-    canvas2.height = 50;
-    var ctx2 = canvas2.getContext('2d');
-    ctx2.fillStyle = '#0f0';
-    ctx2.fillRect(0, 0, 100, 50);
-
-    var pattern = ctx.createPattern(canvas2, 'no-repeat');
-
-    ctx2.fillStyle = '#f00';
-    ctx2.fillRect(0, 0, 100, 50);
-
-    ctx.fillStyle = pattern;
-    ctx.fillRect(0, 0, 100, 50);
-
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.pattern.modify.canvas2
-  testing:
-    - 2d.pattern.modify
-  code: |
-    var canvas2 = document.createElement('canvas');
-    canvas2.width = 100;
-    canvas2.height = 50;
-    var ctx2 = canvas2.getContext('2d');
-    ctx2.fillStyle = '#0f0';
-    ctx2.fillRect(0, 0, 100, 50);
-
-    var pattern = ctx.createPattern(canvas2, 'no-repeat');
-    ctx.fillStyle = pattern;
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx2.fillStyle = '#f00';
-    ctx2.fillRect(0, 0, 100, 50);
-
-    ctx.fillStyle = pattern;
-    ctx.fillRect(0, 0, 100, 50);
-
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.pattern.crosscanvas
-  images:
-    - green.png
-  code: |
-    var img = document.getElementById('green.png');
-
-    var pattern = document.createElement('canvas').getContext('2d').createPattern(img, 'no-repeat');
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = pattern;
-    ctx.fillRect(0, 0, 100, 50);
-
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.pattern.paint.norepeat.basic
-  testing:
-    - 2d.pattern.painting
-  images:
-    - green.png
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-
-    var img = document.getElementById('green.png');
-    var pattern = ctx.createPattern(img, 'no-repeat');
-    ctx.fillStyle = pattern;
-    ctx.fillRect(0, 0, 100, 50);
-
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.pattern.paint.norepeat.outside
-  testing:
-    - 2d.pattern.painting
-  images:
-    - red.png
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-
-    var img = document.getElementById('red.png');
-    var pattern = ctx.createPattern(img, 'no-repeat');
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.fillStyle = pattern;
-    ctx.fillRect(0, -50, 100, 50);
-    ctx.fillRect(-100, 0, 100, 50);
-    ctx.fillRect(0, 50, 100, 50);
-    ctx.fillRect(100, 0, 100, 50);
-
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.pattern.paint.norepeat.coord1
-  testing:
-    - 2d.pattern.painting
-  images:
-    - green.png
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 50, 50);
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(50, 0, 50, 50);
-
-    var img = document.getElementById('green.png');
-    var pattern = ctx.createPattern(img, 'no-repeat');
-    ctx.fillStyle = pattern;
-    ctx.translate(50, 0);
-    ctx.fillRect(-50, 0, 100, 50);
-
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.pattern.paint.norepeat.coord2
-  testing:
-    - 2d.pattern.painting
-  images:
-    - green.png
-  code: |
-    var img = document.getElementById('green.png');
-    var pattern = ctx.createPattern(img, 'no-repeat');
-    ctx.fillStyle = pattern;
-    ctx.fillRect(0, 0, 50, 50);
-
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(50, 0, 50, 50);
-
-    ctx.fillStyle = pattern;
-    ctx.translate(50, 0);
-    ctx.fillRect(-50, 0, 100, 50);
-
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.pattern.paint.norepeat.coord3
-  testing:
-    - 2d.pattern.painting
-  images:
-    - red.png
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-
-    var img = document.getElementById('red.png');
-    var pattern = ctx.createPattern(img, 'no-repeat');
-    ctx.fillStyle = pattern;
-    ctx.translate(50, 25);
-    ctx.fillRect(-50, -25, 100, 50);
-
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 50, 25);
-
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.pattern.paint.repeat.basic
-  testing:
-    - 2d.pattern.painting
-  images:
-    - green-16x16.png
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-
-    var img = document.getElementById('green-16x16.png');
-    var pattern = ctx.createPattern(img, 'repeat');
-    ctx.fillStyle = pattern;
-    ctx.fillRect(0, 0, 100, 50);
-
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.pattern.paint.repeat.outside
-  testing:
-    - 2d.pattern.painting
-  images:
-    - green-16x16.png
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-
-    var img = document.getElementById('green-16x16.png');
-    var pattern = ctx.createPattern(img, 'repeat');
-    ctx.fillStyle = pattern;
-    ctx.translate(50, 25);
-    ctx.fillRect(-50, -25, 100, 50);
-
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.pattern.paint.repeat.coord1
-  testing:
-    - 2d.pattern.painting
-  images:
-    - rgrg-256x256.png
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-
-    var img = document.getElementById('rgrg-256x256.png');
-    var pattern = ctx.createPattern(img, 'repeat');
-    ctx.fillStyle = pattern;
-    ctx.translate(-128, -78);
-    ctx.fillRect(128, 78, 100, 50);
-
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.pattern.paint.repeat.coord2
-  testing:
-    - 2d.pattern.painting
-  images:
-    - ggrr-256x256.png
-  code: |
-    var img = document.getElementById('ggrr-256x256.png');
-    var pattern = ctx.createPattern(img, 'repeat');
-    ctx.fillStyle = pattern;
-    ctx.fillRect(0, 0, 100, 50);
-
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.pattern.paint.repeat.coord3
-  testing:
-    - 2d.pattern.painting
-  images:
-    - rgrg-256x256.png
-  code: |
-    var img = document.getElementById('rgrg-256x256.png');
-    var pattern = ctx.createPattern(img, 'repeat');
-    ctx.fillStyle = pattern;
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.translate(-128, -78);
-    ctx.fillRect(128, 78, 100, 50);
-
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.pattern.paint.repeatx.basic
-  testing:
-    - 2d.pattern.painting
-  images:
-    - green-16x16.png
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 16);
-
-    var img = document.getElementById('green-16x16.png');
-    var pattern = ctx.createPattern(img, 'repeat-x');
-    ctx.fillStyle = pattern;
-    ctx.fillRect(0, 0, 100, 50);
-
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.pattern.paint.repeatx.outside
-  testing:
-    - 2d.pattern.painting
-  images:
-    - red-16x16.png
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-
-    var img = document.getElementById('red-16x16.png');
-    var pattern = ctx.createPattern(img, 'repeat-x');
-    ctx.fillStyle = pattern;
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 16);
-
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.pattern.paint.repeatx.coord1
-  testing:
-    - 2d.pattern.painting
-  images:
-    - red-16x16.png
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-
-    var img = document.getElementById('red-16x16.png');
-    var pattern = ctx.createPattern(img, 'repeat-x');
-    ctx.fillStyle = pattern;
-    ctx.translate(0, 16);
-    ctx.fillRect(0, -16, 100, 50);
-
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 16);
-
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,25 == 0,255,0,255;
-    @assert pixel 98,25 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.pattern.paint.repeaty.basic
-  testing:
-    - 2d.pattern.painting
-  images:
-    - green-16x16.png
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 16, 50);
-
-    var img = document.getElementById('green-16x16.png');
-    var pattern = ctx.createPattern(img, 'repeat-y');
-    ctx.fillStyle = pattern;
-    ctx.fillRect(0, 0, 100, 50);
-
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.pattern.paint.repeaty.outside
-  testing:
-    - 2d.pattern.painting
-  images:
-    - red-16x16.png
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-
-    var img = document.getElementById('red-16x16.png');
-    var pattern = ctx.createPattern(img, 'repeat-y');
-    ctx.fillStyle = pattern;
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 16, 50);
-
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.pattern.paint.repeaty.coord1
-  testing:
-    - 2d.pattern.painting
-  images:
-    - red-16x16.png
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-
-    var img = document.getElementById('red-16x16.png');
-    var pattern = ctx.createPattern(img, 'repeat-y');
-    ctx.fillStyle = pattern;
-    ctx.translate(48, 0);
-    ctx.fillRect(-48, 0, 100, 50);
-
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 16, 50);
-
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 50,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 50,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.pattern.paint.orientation.image
-  desc: Image patterns do not get flipped when painted
-  testing:
-    - 2d.pattern.painting
-  images:
-    - rrgg-256x256.png
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-
-    var img = document.getElementById('rrgg-256x256.png');
-    var pattern = ctx.createPattern(img, 'no-repeat');
-    ctx.fillStyle = pattern;
-    ctx.save();
-    ctx.translate(0, -103);
-    ctx.fillRect(0, 103, 100, 50);
-    ctx.restore();
-
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 25);
-
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.pattern.paint.orientation.canvas
-  desc: Canvas patterns do not get flipped when painted
-  testing:
-    - 2d.pattern.painting
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-
-    var canvas2 = document.createElement('canvas');
-    canvas2.width = 100;
-    canvas2.height = 50;
-    var ctx2 = canvas2.getContext('2d');
-    ctx2.fillStyle = '#f00';
-    ctx2.fillRect(0, 0, 100, 25);
-    ctx2.fillStyle = '#0f0';
-    ctx2.fillRect(0, 25, 100, 25);
-
-    var pattern = ctx.createPattern(canvas2, 'no-repeat');
-    ctx.fillStyle = pattern;
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 25);
-
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-  expected: green
-
-
-- name: 2d.pattern.animated.gif
-  desc: createPattern() of an animated GIF draws the first frame
-  testing:
-    - 2d.pattern.animated.image
-  images:
-    - anim-gr.gif
-  code: |
-    deferTest();
-    step_timeout(function () {
-        var pattern = ctx.createPattern(document.getElementById('anim-gr.gif'), 'repeat');
-        ctx.fillStyle = pattern;
-        ctx.fillRect(0, 0, 50, 50);
-        step_timeout(t.step_func_done(function () {
-            ctx.fillRect(50, 0, 50, 50);
-            @assert pixel 25,25 ==~ 0,255,0,255;
-            @assert pixel 75,25 ==~ 0,255,0,255;
-        }), 250);
-    }, 250);
-  expected: green
-
-
-
-
-- name: 2d.line.defaults
-  testing:
-    - 2d.lineWidth.default
-    - 2d.lineCap.default
-    - 2d.lineJoin.default
-    - 2d.miterLimit.default
-  code: |
-    @assert ctx.lineWidth === 1;
-    @assert ctx.lineCap === 'butt';
-    @assert ctx.lineJoin === 'miter';
-    @assert ctx.miterLimit === 10;
-
-- name: 2d.line.width.basic
-  desc: lineWidth determines the width of line strokes
-  testing:
-    - 2d.lineWidth
-  code: |
-    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);
-
-    @assert pixel 14,25 == 0,255,0,255;
-    @assert pixel 15,25 == 0,255,0,255;
-    @assert pixel 16,25 == 0,255,0,255;
-    @assert pixel 25,25 == 0,255,0,255;
-    @assert pixel 34,25 == 0,255,0,255;
-    @assert pixel 35,25 == 0,255,0,255;
-    @assert pixel 36,25 == 0,255,0,255;
-
-    @assert pixel 64,25 == 0,255,0,255;
-    @assert pixel 65,25 == 0,255,0,255;
-    @assert pixel 66,25 == 0,255,0,255;
-    @assert pixel 75,25 == 0,255,0,255;
-    @assert pixel 84,25 == 0,255,0,255;
-    @assert pixel 85,25 == 0,255,0,255;
-    @assert pixel 86,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.line.width.transformed
-  desc: Line stroke widths are affected by scale transformations
-  testing:
-    - 2d.lineWidth
-  code: |
-    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);
-
-    @assert pixel 14,25 == 0,255,0,255;
-    @assert pixel 15,25 == 0,255,0,255;
-    @assert pixel 16,25 == 0,255,0,255;
-    @assert pixel 25,25 == 0,255,0,255;
-    @assert pixel 34,25 == 0,255,0,255;
-    @assert pixel 35,25 == 0,255,0,255;
-    @assert pixel 36,25 == 0,255,0,255;
-
-    @assert pixel 64,25 == 0,255,0,255;
-    @assert pixel 65,25 == 0,255,0,255;
-    @assert pixel 66,25 == 0,255,0,255;
-    @assert pixel 75,25 == 0,255,0,255;
-    @assert pixel 84,25 == 0,255,0,255;
-    @assert pixel 85,25 == 0,255,0,255;
-    @assert pixel 86,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.line.width.scaledefault
-  desc: Default lineWidth strokes are affected by scale transformations
-  testing:
-    - 2d.lineWidth
-  code: |
-    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();
-
-    @assert pixel 25,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 75,25 == 0,255,0,255;
-    @assert pixel 50,5 == 0,255,0,255;
-    @assert pixel 50,45 == 0,255,0,255;
-  expected: green
-
-- name: 2d.line.width.valid
-  desc: Setting lineWidth to valid values works
-  testing:
-    - 2d.lineWidth.set
-    - 2d.lineWidth.get
-  code: |
-    ctx.lineWidth = 1.5;
-    @assert ctx.lineWidth === 1.5;
-
-    ctx.lineWidth = "1e1";
-    @assert ctx.lineWidth === 10;
-
-    ctx.lineWidth = 1/1024;
-    @assert ctx.lineWidth === 1/1024;
-
-    ctx.lineWidth = 1000;
-    @assert ctx.lineWidth === 1000;
-
-- name: 2d.line.width.invalid
-  desc: Setting lineWidth to invalid values is ignored
-  testing:
-    - 2d.lineWidth.invalid
-  code: |
-    ctx.lineWidth = 1.5;
-    @assert ctx.lineWidth === 1.5;
-
-    ctx.lineWidth = 1.5;
-    ctx.lineWidth = 0;
-    @assert ctx.lineWidth === 1.5;
-
-    ctx.lineWidth = 1.5;
-    ctx.lineWidth = -1;
-    @assert ctx.lineWidth === 1.5;
-
-    ctx.lineWidth = 1.5;
-    ctx.lineWidth = Infinity;
-    @assert ctx.lineWidth === 1.5;
-
-    ctx.lineWidth = 1.5;
-    ctx.lineWidth = -Infinity;
-    @assert ctx.lineWidth === 1.5;
-
-    ctx.lineWidth = 1.5;
-    ctx.lineWidth = NaN;
-    @assert ctx.lineWidth === 1.5;
-
-    ctx.lineWidth = 1.5;
-    ctx.lineWidth = 'string';
-    @assert ctx.lineWidth === 1.5;
-
-    ctx.lineWidth = 1.5;
-    ctx.lineWidth = true;
-    @assert ctx.lineWidth === 1;
-
-    ctx.lineWidth = 1.5;
-    ctx.lineWidth = false;
-    @assert ctx.lineWidth === 1.5;
-
-- name: 2d.line.cap.butt
-  desc: lineCap 'butt' is rendered correctly
-  testing:
-    - 2d.lineCap.butt
-  code: |
-    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);
-
-    @assert pixel 25,14 == 0,255,0,255;
-    @assert pixel 25,15 == 0,255,0,255;
-    @assert pixel 25,16 == 0,255,0,255;
-    @assert pixel 25,34 == 0,255,0,255;
-    @assert pixel 25,35 == 0,255,0,255;
-    @assert pixel 25,36 == 0,255,0,255;
-
-    @assert pixel 75,14 == 0,255,0,255;
-    @assert pixel 75,15 == 0,255,0,255;
-    @assert pixel 75,16 == 0,255,0,255;
-    @assert pixel 75,34 == 0,255,0,255;
-    @assert pixel 75,35 == 0,255,0,255;
-    @assert pixel 75,36 == 0,255,0,255;
-  expected: green
-
-- name: 2d.line.cap.round
-  desc: lineCap 'round' is rendered correctly
-  testing:
-    - 2d.lineCap.round
-  code: |
-    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();
-
-    @assert pixel 17,6 == 0,255,0,255;
-    @assert pixel 25,6 == 0,255,0,255;
-    @assert pixel 32,6 == 0,255,0,255;
-    @assert pixel 17,43 == 0,255,0,255;
-    @assert pixel 25,43 == 0,255,0,255;
-    @assert pixel 32,43 == 0,255,0,255;
-
-    @assert pixel 67,6 == 0,255,0,255;
-    @assert pixel 75,6 == 0,255,0,255;
-    @assert pixel 82,6 == 0,255,0,255;
-    @assert pixel 67,43 == 0,255,0,255;
-    @assert pixel 75,43 == 0,255,0,255;
-    @assert pixel 82,43 == 0,255,0,255;
-  expected: green
-
-- name: 2d.line.cap.square
-  desc: lineCap 'square' is rendered correctly
-  testing:
-    - 2d.lineCap.square
-  code: |
-    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);
-
-    @assert pixel 25,4 == 0,255,0,255;
-    @assert pixel 25,5 == 0,255,0,255;
-    @assert pixel 25,6 == 0,255,0,255;
-    @assert pixel 25,44 == 0,255,0,255;
-    @assert pixel 25,45 == 0,255,0,255;
-    @assert pixel 25,46 == 0,255,0,255;
-
-    @assert pixel 75,4 == 0,255,0,255;
-    @assert pixel 75,5 == 0,255,0,255;
-    @assert pixel 75,6 == 0,255,0,255;
-    @assert pixel 75,44 == 0,255,0,255;
-    @assert pixel 75,45 == 0,255,0,255;
-    @assert pixel 75,46 == 0,255,0,255;
-  expected: green
-
-- name: 2d.line.cap.open
-  desc: Line caps are drawn at the corners of an unclosed rectangle
-  testing:
-    - 2d.lineCap.end
-  code: |
-    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();
-
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 48,1 == 0,255,0,255;
-    @assert pixel 48,48 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.line.cap.closed
-  desc: Line caps are not drawn at the corners of an unclosed rectangle
-  testing:
-    - 2d.lineCap.end
-  code: |
-    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();
-
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 48,1 == 0,255,0,255;
-    @assert pixel 48,48 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.line.cap.valid
-  desc: Setting lineCap to valid values works
-  testing:
-    - 2d.lineCap.set
-    - 2d.lineCap.get
-  code: |
-    ctx.lineCap = 'butt'
-    @assert ctx.lineCap === 'butt';
-
-    ctx.lineCap = 'round';
-    @assert ctx.lineCap === 'round';
-
-    ctx.lineCap = 'square';
-    @assert ctx.lineCap === 'square';
-
-- name: 2d.line.cap.invalid
-  desc: Setting lineCap to invalid values is ignored
-  testing:
-    - 2d.lineCap.invalid
-  code: |
-    ctx.lineCap = 'butt'
-    @assert ctx.lineCap === 'butt';
-
-    ctx.lineCap = 'butt';
-    ctx.lineCap = 'invalid';
-    @assert ctx.lineCap === 'butt';
-
-    ctx.lineCap = 'butt';
-    ctx.lineCap = 'ROUND';
-    @assert ctx.lineCap === 'butt';
-
-    ctx.lineCap = 'butt';
-    ctx.lineCap = 'round\0';
-    @assert ctx.lineCap === 'butt';
-
-    ctx.lineCap = 'butt';
-    ctx.lineCap = 'round ';
-    @assert ctx.lineCap === 'butt';
-
-    ctx.lineCap = 'butt';
-    ctx.lineCap = "";
-    @assert ctx.lineCap === 'butt';
-
-    ctx.lineCap = 'butt';
-    ctx.lineCap = 'bevel';
-    @assert ctx.lineCap === 'butt';
-
-- name: 2d.line.join.bevel
-  desc: lineJoin 'bevel' is rendered correctly
-  testing:
-    - 2d.lineJoin.common
-    - 2d.lineJoin.bevel
-  code: |
-    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();
-
-    @assert pixel 34,16 == 0,255,0,255;
-    @assert pixel 34,15 == 0,255,0,255;
-    @assert pixel 35,15 == 0,255,0,255;
-    @assert pixel 36,15 == 0,255,0,255;
-    @assert pixel 36,14 == 0,255,0,255;
-
-    @assert pixel 84,16 == 0,255,0,255;
-    @assert pixel 84,15 == 0,255,0,255;
-    @assert pixel 85,15 == 0,255,0,255;
-    @assert pixel 86,15 == 0,255,0,255;
-    @assert pixel 86,14 == 0,255,0,255;
-  expected: green
-
-- name: 2d.line.join.round
-  desc: lineJoin 'round' is rendered correctly
-  testing:
-    - 2d.lineJoin.round
-  code: |
-    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();
-
-    @assert pixel 36,14 == 0,255,0,255;
-    @assert pixel 36,13 == 0,255,0,255;
-    @assert pixel 37,13 == 0,255,0,255;
-    @assert pixel 38,13 == 0,255,0,255;
-    @assert pixel 38,12 == 0,255,0,255;
-
-    @assert pixel 86,14 == 0,255,0,255;
-    @assert pixel 86,13 == 0,255,0,255;
-    @assert pixel 87,13 == 0,255,0,255;
-    @assert pixel 88,13 == 0,255,0,255;
-    @assert pixel 88,12 == 0,255,0,255;
-  expected: green
-
-- name: 2d.line.join.miter
-  desc: lineJoin 'miter' is rendered correctly
-  testing:
-    - 2d.lineJoin.miter
-  code: |
-    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);
-
-    @assert pixel 38,12 == 0,255,0,255;
-    @assert pixel 39,11 == 0,255,0,255;
-    @assert pixel 40,10 == 0,255,0,255;
-    @assert pixel 41,9 == 0,255,0,255;
-    @assert pixel 42,8 == 0,255,0,255;
-
-    @assert pixel 88,12 == 0,255,0,255;
-    @assert pixel 89,11 == 0,255,0,255;
-    @assert pixel 90,10 == 0,255,0,255;
-    @assert pixel 91,9 == 0,255,0,255;
-    @assert pixel 92,8 == 0,255,0,255;
-  expected: green
-
-- name: 2d.line.join.open
-  desc: Line joins are not drawn at the corner of an unclosed rectangle
-  testing:
-    - 2d.lineJoin.joins
-  code: |
-    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();
-
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 48,1 == 0,255,0,255;
-    @assert pixel 48,48 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.line.join.closed
-  desc: Line joins are drawn at the corner of a closed rectangle
-  testing:
-    - 2d.lineJoin.joinclosed
-  code: |
-    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();
-
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 48,1 == 0,255,0,255;
-    @assert pixel 48,48 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.line.join.parallel
-  desc: Line joins are drawn at 180-degree joins
-  testing:
-    - 2d.lineJoin.joins
-  code: |
-    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();
-
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 48,1 == 0,255,0,255;
-    @assert pixel 48,48 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.line.join.valid
-  desc: Setting lineJoin to valid values works
-  testing:
-    - 2d.lineJoin.set
-    - 2d.lineJoin.get
-  code: |
-    ctx.lineJoin = 'bevel'
-    @assert ctx.lineJoin === 'bevel';
-
-    ctx.lineJoin = 'round';
-    @assert ctx.lineJoin === 'round';
-
-    ctx.lineJoin = 'miter';
-    @assert ctx.lineJoin === 'miter';
-
-- name: 2d.line.join.invalid
-  desc: Setting lineJoin to invalid values is ignored
-  testing:
-    - 2d.lineJoin.invalid
-  code: |
-    ctx.lineJoin = 'bevel'
-    @assert ctx.lineJoin === 'bevel';
-
-    ctx.lineJoin = 'bevel';
-    ctx.lineJoin = 'invalid';
-    @assert ctx.lineJoin === 'bevel';
-
-    ctx.lineJoin = 'bevel';
-    ctx.lineJoin = 'ROUND';
-    @assert ctx.lineJoin === 'bevel';
-
-    ctx.lineJoin = 'bevel';
-    ctx.lineJoin = 'round\0';
-    @assert ctx.lineJoin === 'bevel';
-
-    ctx.lineJoin = 'bevel';
-    ctx.lineJoin = 'round ';
-    @assert ctx.lineJoin === 'bevel';
-
-    ctx.lineJoin = 'bevel';
-    ctx.lineJoin = "";
-    @assert ctx.lineJoin === 'bevel';
-
-    ctx.lineJoin = 'bevel';
-    ctx.lineJoin = 'butt';
-    @assert ctx.lineJoin === 'bevel';
-
-- name: 2d.line.miter.exceeded
-  desc: Miter joins are not drawn when the miter limit is exceeded
-  testing:
-    - 2d.lineJoin.miterLimit
-    - 2d.lineJoin.miter
-  code: |
-    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();
-
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 48,1 == 0,255,0,255;
-    @assert pixel 48,48 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.line.miter.acute
-  desc: Miter joins are drawn correctly with acute angles
-  testing:
-    - 2d.lineJoin.miterLimit
-    - 2d.lineJoin.miter
-  code: |
-    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();
-
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 48,1 == 0,255,0,255;
-    @assert pixel 48,48 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.line.miter.obtuse
-  desc: Miter joins are drawn correctly with obtuse angles
-  testing:
-    - 2d.lineJoin.miterLimit
-    - 2d.lineJoin.miter
-  code: |
-    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();
-
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 48,1 == 0,255,0,255;
-    @assert pixel 48,48 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.line.miter.rightangle
-  desc: Miter joins are not drawn when the miter limit is exceeded, on exact right angles
-  testing:
-    - 2d.lineJoin.miter
-  code: |
-    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();
-
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 48,1 == 0,255,0,255;
-    @assert pixel 48,48 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.line.miter.lineedge
-  desc: Miter joins are not drawn when the miter limit is exceeded at the corners of a zero-height rectangle
-  testing:
-    - 2d.lineJoin.miter
-  code: |
-    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);
-
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 48,1 == 0,255,0,255;
-    @assert pixel 48,48 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.line.miter.within
-  desc: Miter joins are drawn when the miter limit is not quite exceeded
-  testing:
-    - 2d.lineJoin.miter
-  code: |
-    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();
-
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 48,1 == 0,255,0,255;
-    @assert pixel 48,48 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.line.miter.valid
-  desc: Setting miterLimit to valid values works
-  testing:
-    - 2d.miterLimit.set
-    - 2d.miterLimit.get
-  code: |
-    ctx.miterLimit = 1.5;
-    @assert ctx.miterLimit === 1.5;
-
-    ctx.miterLimit = "1e1";
-    @assert ctx.miterLimit === 10;
-
-    ctx.miterLimit = 1/1024;
-    @assert ctx.miterLimit === 1/1024;
-
-    ctx.miterLimit = 1000;
-    @assert ctx.miterLimit === 1000;
-
-- name: 2d.line.miter.invalid
-  desc: Setting miterLimit to invalid values is ignored
-  testing:
-    - 2d.miterLimit.invalid
-  code: |
-    ctx.miterLimit = 1.5;
-    @assert ctx.miterLimit === 1.5;
-
-    ctx.miterLimit = 1.5;
-    ctx.miterLimit = 0;
-    @assert ctx.miterLimit === 1.5;
-
-    ctx.miterLimit = 1.5;
-    ctx.miterLimit = -1;
-    @assert ctx.miterLimit === 1.5;
-
-    ctx.miterLimit = 1.5;
-    ctx.miterLimit = Infinity;
-    @assert ctx.miterLimit === 1.5;
-
-    ctx.miterLimit = 1.5;
-    ctx.miterLimit = -Infinity;
-    @assert ctx.miterLimit === 1.5;
-
-    ctx.miterLimit = 1.5;
-    ctx.miterLimit = NaN;
-    @assert ctx.miterLimit === 1.5;
-
-    ctx.miterLimit = 1.5;
-    ctx.miterLimit = 'string';
-    @assert ctx.miterLimit === 1.5;
-
-    ctx.miterLimit = 1.5;
-    ctx.miterLimit = true;
-    @assert ctx.miterLimit === 1;
-
-    ctx.miterLimit = 1.5;
-    ctx.miterLimit = false;
-    @assert ctx.miterLimit === 1.5;
-
-- name: 2d.line.cross
-  code: |
-    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();
-
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 48,1 == 0,255,0,255;
-    @assert pixel 48,48 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.line.union
-  code: |
-    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();
-
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 25,1 == 0,255,0,255;
-    @assert pixel 48,1 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 25,1 == 0,255,0,255;
-    @assert pixel 48,48 == 0,255,0,255;
-  expected: green
-
-
-
-
-
-
-
-- name: 2d.shadow.attributes.shadowBlur.initial
-  testing:
-    - 2d.shadow.blur.get
-    - 2d.shadow.blur.initial
-  code: |
-    @assert ctx.shadowBlur === 0;
-
-- name: 2d.shadow.attributes.shadowBlur.valid
-  testing:
-    - 2d.shadow.blur.get
-    - 2d.shadow.blur.set
-  code: |
-    ctx.shadowBlur = 1;
-    @assert ctx.shadowBlur === 1;
-
-    ctx.shadowBlur = 0.5;
-    @assert ctx.shadowBlur === 0.5;
-
-    ctx.shadowBlur = 1e6;
-    @assert ctx.shadowBlur === 1e6;
-
-    ctx.shadowBlur = 0;
-    @assert ctx.shadowBlur === 0;
-
-- name: 2d.shadow.attributes.shadowBlur.invalid
-  testing:
-    - 2d.shadow.blur.invalid
-  code: |
-    ctx.shadowBlur = 1;
-    ctx.shadowBlur = -2;
-    @assert ctx.shadowBlur === 1;
-
-    ctx.shadowBlur = 1;
-    ctx.shadowBlur = Infinity;
-    @assert ctx.shadowBlur === 1;
-
-    ctx.shadowBlur = 1;
-    ctx.shadowBlur = -Infinity;
-    @assert ctx.shadowBlur === 1;
-
-    ctx.shadowBlur = 1;
-    ctx.shadowBlur = NaN;
-    @assert ctx.shadowBlur === 1;
-
-    ctx.shadowBlur = 1;
-    ctx.shadowBlur = 'string';
-    @assert ctx.shadowBlur === 1;
-
-    ctx.shadowBlur = 1;
-    ctx.shadowBlur = true;
-    @assert ctx.shadowBlur === 1;
-
-    ctx.shadowBlur = 1;
-    ctx.shadowBlur = false;
-    @assert ctx.shadowBlur === 0;
-
-- name: 2d.shadow.attributes.shadowOffset.initial
-  testing:
-    - 2d.shadow.offset.initial
-  code: |
-    @assert ctx.shadowOffsetX === 0;
-    @assert ctx.shadowOffsetY === 0;
-
-- name: 2d.shadow.attributes.shadowOffset.valid
-  testing:
-    - 2d.shadow.offset.get
-    - 2d.shadow.offset.set
-  code: |
-    ctx.shadowOffsetX = 1;
-    ctx.shadowOffsetY = 2;
-    @assert ctx.shadowOffsetX === 1;
-    @assert ctx.shadowOffsetY === 2;
-
-    ctx.shadowOffsetX = 0.5;
-    ctx.shadowOffsetY = 0.25;
-    @assert ctx.shadowOffsetX === 0.5;
-    @assert ctx.shadowOffsetY === 0.25;
-
-    ctx.shadowOffsetX = -0.5;
-    ctx.shadowOffsetY = -0.25;
-    @assert ctx.shadowOffsetX === -0.5;
-    @assert ctx.shadowOffsetY === -0.25;
-
-    ctx.shadowOffsetX = 0;
-    ctx.shadowOffsetY = 0;
-    @assert ctx.shadowOffsetX === 0;
-    @assert ctx.shadowOffsetY === 0;
-
-    ctx.shadowOffsetX = 1e6;
-    ctx.shadowOffsetY = 1e6;
-    @assert ctx.shadowOffsetX === 1e6;
-    @assert ctx.shadowOffsetY === 1e6;
-
-- name: 2d.shadow.attributes.shadowOffset.invalid
-  testing:
-    - 2d.shadow.offset.invalid
-  code: |
-    ctx.shadowOffsetX = 1;
-    ctx.shadowOffsetY = 2;
-    ctx.shadowOffsetX = Infinity;
-    ctx.shadowOffsetY = Infinity;
-    @assert ctx.shadowOffsetX === 1;
-    @assert ctx.shadowOffsetY === 2;
-
-    ctx.shadowOffsetX = 1;
-    ctx.shadowOffsetY = 2;
-    ctx.shadowOffsetX = -Infinity;
-    ctx.shadowOffsetY = -Infinity;
-    @assert ctx.shadowOffsetX === 1;
-    @assert ctx.shadowOffsetY === 2;
-
-    ctx.shadowOffsetX = 1;
-    ctx.shadowOffsetY = 2;
-    ctx.shadowOffsetX = NaN;
-    ctx.shadowOffsetY = NaN;
-    @assert ctx.shadowOffsetX === 1;
-    @assert ctx.shadowOffsetY === 2;
-
-    ctx.shadowOffsetX = 1;
-    ctx.shadowOffsetY = 2;
-    ctx.shadowOffsetX = 'string';
-    ctx.shadowOffsetY = 'string';
-    @assert ctx.shadowOffsetX === 1;
-    @assert ctx.shadowOffsetY === 2;
-
-    ctx.shadowOffsetX = 1;
-    ctx.shadowOffsetY = 2;
-    ctx.shadowOffsetX = true;
-    ctx.shadowOffsetY = true;
-    @assert ctx.shadowOffsetX === 1;
-    @assert ctx.shadowOffsetY === 1;
-
-    ctx.shadowOffsetX = 1;
-    ctx.shadowOffsetY = 2;
-    ctx.shadowOffsetX = false;
-    ctx.shadowOffsetY = false;
-    @assert ctx.shadowOffsetX === 0;
-    @assert ctx.shadowOffsetY === 0;
-
-- name: 2d.shadow.attributes.shadowColor.initial
-  testing:
-    - 2d.shadow.color.initial
-  code: |
-    @assert ctx.shadowColor === 'rgba(0, 0, 0, 0)';
-
-- name: 2d.shadow.attributes.shadowColor.valid
-  testing:
-    - 2d.shadow.color.get
-    - 2d.shadow.color.set
-  code: |
-    ctx.shadowColor = 'lime';
-    @assert ctx.shadowColor === '#00ff00';
-
-    ctx.shadowColor = 'RGBA(0,255, 0,0)';
-    @assert ctx.shadowColor === 'rgba(0, 255, 0, 0)';
-
-- name: 2d.shadow.attributes.shadowColor.invalid
-  testing:
-    - 2d.shadow.color.invalid
-  code: |
-    ctx.shadowColor = '#00ff00';
-    ctx.shadowColor = 'bogus';
-    @assert ctx.shadowColor === '#00ff00';
-
-    ctx.shadowColor = '#00ff00';
-    ctx.shadowColor = 'red bogus';
-    @assert ctx.shadowColor === '#00ff00';
-
-    ctx.shadowColor = '#00ff00';
-    ctx.shadowColor = ctx;
-    @assert ctx.shadowColor === '#00ff00';
-
-    ctx.shadowColor = '#00ff00';
-    ctx.shadowColor = undefined;
-    @assert ctx.shadowColor === '#00ff00';
-
-- name: 2d.shadow.enable.off.1
-  desc: Shadows are not drawn when only shadowColor is set
-  testing:
-    - 2d.shadow.enable
-    - 2d.shadow.render
-  code: |
-    ctx.shadowColor = '#f00';
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.shadow.enable.off.2
-  desc: Shadows are not drawn when only shadowColor is set
-  testing:
-    - 2d.shadow.enable
-    - 2d.shadow.render
-  code: |
-    ctx.globalCompositeOperation = 'destination-atop';
-    ctx.shadowColor = '#f00';
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.shadow.enable.blur
-  desc: Shadows are drawn if shadowBlur is set
-  testing:
-    - 2d.shadow.enable
-    - 2d.shadow.render
-  code: |
-    ctx.globalCompositeOperation = 'destination-atop';
-    ctx.shadowColor = '#0f0';
-    ctx.shadowBlur = 0.1;
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.shadow.enable.x
-  desc: Shadows are drawn if shadowOffsetX is set
-  testing:
-    - 2d.shadow.enable
-    - 2d.shadow.render
-  code: |
-    ctx.globalCompositeOperation = 'destination-atop';
-    ctx.shadowColor = '#0f0';
-    ctx.shadowOffsetX = 0.1;
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.shadow.enable.y
-  desc: Shadows are drawn if shadowOffsetY is set
-  testing:
-    - 2d.shadow.enable
-    - 2d.shadow.render
-  code: |
-    ctx.globalCompositeOperation = 'destination-atop';
-    ctx.shadowColor = '#0f0';
-    ctx.shadowOffsetY = 0.1;
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.shadow.offset.positiveX
-  desc: Shadows can be offset with positive x
-  testing:
-    - 2d.shadow.render
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.shadowColor = '#0f0';
-    ctx.shadowOffsetX = 50;
-    ctx.fillRect(0, 0, 50, 50);
-    @assert pixel 25,25 == 0,255,0,255;
-    @assert pixel 75,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.shadow.offset.negativeX
-  desc: Shadows can be offset with negative x
-  testing:
-    - 2d.shadow.render
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.shadowColor = '#0f0';
-    ctx.shadowOffsetX = -50;
-    ctx.fillRect(50, 0, 50, 50);
-    @assert pixel 25,25 == 0,255,0,255;
-    @assert pixel 75,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.shadow.offset.positiveY
-  desc: Shadows can be offset with positive y
-  testing:
-    - 2d.shadow.render
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.shadowColor = '#0f0';
-    ctx.shadowOffsetY = 25;
-    ctx.fillRect(0, 0, 100, 25);
-    @assert pixel 50,12 == 0,255,0,255;
-    @assert pixel 50,37 == 0,255,0,255;
-  expected: green
-
-- name: 2d.shadow.offset.negativeY
-  desc: Shadows can be offset with negative y
-  testing:
-    - 2d.shadow.render
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.shadowColor = '#0f0';
-    ctx.shadowOffsetY = -25;
-    ctx.fillRect(0, 25, 100, 25);
-    @assert pixel 50,12 == 0,255,0,255;
-    @assert pixel 50,37 == 0,255,0,255;
-  expected: green
-
-- name: 2d.shadow.outside
-  desc: Shadows of shapes outside the visible area can be offset onto the visible area
-  testing:
-    - 2d.shadow.render
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.shadowColor = '#0f0';
-    ctx.shadowOffsetX = 100;
-    ctx.fillRect(-100, 0, 25, 50);
-    ctx.shadowOffsetX = -100;
-    ctx.fillRect(175, 0, 25, 50);
-    ctx.shadowOffsetX = 0;
-    ctx.shadowOffsetY = 100;
-    ctx.fillRect(25, -100, 50, 25);
-    ctx.shadowOffsetY = -100;
-    ctx.fillRect(25, 125, 50, 25);
-    @assert pixel 12,25 == 0,255,0,255;
-    @assert pixel 87,25 == 0,255,0,255;
-    @assert pixel 50,12 == 0,255,0,255;
-    @assert pixel 50,37 == 0,255,0,255;
-  expected: green
-
-- name: 2d.shadow.clip.1
-  desc: Shadows of clipped shapes are still drawn within the clipping region
-  testing:
-    - 2d.shadow.render
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 50, 50);
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(50, 0, 50, 50);
-
-    ctx.save();
-    ctx.beginPath();
-    ctx.rect(50, 0, 50, 50);
-    ctx.clip();
-    ctx.shadowColor = '#0f0';
-    ctx.shadowOffsetX = 50;
-    ctx.fillRect(0, 0, 50, 50);
-    ctx.restore();
-
-    @assert pixel 25,25 == 0,255,0,255;
-    @assert pixel 75,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.shadow.clip.2
-  desc: Shadows are not drawn outside the clipping region
-  testing:
-    - 2d.shadow.render
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 50, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(50, 0, 50, 50);
-
-    ctx.save();
-    ctx.beginPath();
-    ctx.rect(0, 0, 50, 50);
-    ctx.clip();
-    ctx.shadowColor = '#f00';
-    ctx.shadowOffsetX = 50;
-    ctx.fillRect(0, 0, 50, 50);
-    ctx.restore();
-
-    @assert pixel 25,25 == 0,255,0,255;
-    @assert pixel 75,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.shadow.clip.3
-  desc: Shadows of clipped shapes are still drawn within the clipping region
-  testing:
-    - 2d.shadow.render
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 50, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(50, 0, 50, 50);
-
-    ctx.save();
-    ctx.beginPath();
-    ctx.rect(0, 0, 50, 50);
-    ctx.clip();
-    ctx.fillStyle = '#f00';
-    ctx.shadowColor = '#0f0';
-    ctx.shadowOffsetX = 50;
-    ctx.fillRect(-50, 0, 50, 50);
-    ctx.restore();
-
-    @assert pixel 25,25 == 0,255,0,255;
-    @assert pixel 75,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.shadow.stroke.basic
-  desc: Shadows are drawn for strokes
-  testing:
-    - 2d.shadow.render
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#f00';
-    ctx.shadowColor = '#0f0';
-    ctx.shadowOffsetY = 50;
-    ctx.beginPath();
-    ctx.lineWidth = 50;
-    ctx.moveTo(0, -25);
-    ctx.lineTo(100, -25);
-    ctx.stroke();
-
-    @assert pixel 1,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 98,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.shadow.stroke.cap.1
-  desc: Shadows are not drawn for areas outside stroke caps
-  testing:
-    - 2d.shadow.render
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#f00';
-    ctx.shadowColor = '#f00';
-    ctx.shadowOffsetY = 50;
-    ctx.beginPath();
-    ctx.lineWidth = 50;
-    ctx.lineCap = 'butt';
-    ctx.moveTo(-50, -25);
-    ctx.lineTo(0, -25);
-    ctx.moveTo(100, -25);
-    ctx.lineTo(150, -25);
-    ctx.stroke();
-
-    @assert pixel 1,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 98,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.shadow.stroke.cap.2
-  desc: Shadows are drawn for stroke caps
-  testing:
-    - 2d.shadow.render
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#f00';
-    ctx.shadowColor = '#0f0';
-    ctx.shadowOffsetY = 50;
-    ctx.beginPath();
-    ctx.lineWidth = 50;
-    ctx.lineCap = 'square';
-    ctx.moveTo(25, -25);
-    ctx.lineTo(75, -25);
-    ctx.stroke();
-
-    @assert pixel 1,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 98,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.shadow.stroke.join.1
-  desc: Shadows are not drawn for areas outside stroke joins
-  testing:
-    - 2d.shadow.render
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#f00';
-    ctx.shadowColor = '#f00';
-    ctx.shadowOffsetX = 100;
-    ctx.lineWidth = 200;
-    ctx.lineJoin = 'bevel';
-    ctx.beginPath();
-    ctx.moveTo(-200, -50);
-    ctx.lineTo(-150, -50);
-    ctx.lineTo(-151, -100);
-    ctx.stroke();
-
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 48,48 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.shadow.stroke.join.2
-  desc: Shadows are drawn for stroke joins
-  testing:
-    - 2d.shadow.render
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 50, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(50, 0, 50, 50);
-    ctx.strokeStyle = '#f00';
-    ctx.shadowColor = '#0f0';
-    ctx.shadowOffsetX = 100;
-    ctx.lineWidth = 200;
-    ctx.lineJoin = 'miter';
-    ctx.beginPath();
-    ctx.moveTo(-200, -50);
-    ctx.lineTo(-150, -50);
-    ctx.lineTo(-151, -100);
-    ctx.stroke();
-
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 48,48 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.shadow.stroke.join.3
-  desc: Shadows are drawn for stroke joins respecting miter limit
-  testing:
-    - 2d.shadow.render
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#f00';
-    ctx.shadowColor = '#f00';
-    ctx.shadowOffsetX = 100;
-    ctx.lineWidth = 200;
-    ctx.lineJoin = 'miter';
-    ctx.miterLimit = 0.1;
-    ctx.beginPath();
-    ctx.moveTo(-200, -50);
-    ctx.lineTo(-150, -50);
-    ctx.lineTo(-151, -100); // (not an exact right angle, to avoid some other bug in Firefox 3)
-    ctx.stroke();
-
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 48,48 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.shadow.image.basic
-  desc: Shadows are drawn for images
-  testing:
-    - 2d.shadow.render
-  images:
-    - red.png
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.shadowColor = '#0f0';
-    ctx.shadowOffsetY = 50;
-    ctx.drawImage(document.getElementById('red.png'), 0, -50);
-
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.shadow.image.transparent.1
-  desc: Shadows are not drawn for transparent images
-  testing:
-    - 2d.shadow.render
-  images:
-    - transparent.png
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.shadowColor = '#f00';
-    ctx.shadowOffsetY = 50;
-    ctx.drawImage(document.getElementById('transparent.png'), 0, -50);
-
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.shadow.image.transparent.2
-  desc: Shadows are not drawn for transparent parts of images
-  testing:
-    - 2d.shadow.render
-  images:
-    - redtransparent.png
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 50, 50);
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(50, 0, 50, 50);
-    ctx.shadowOffsetY = 50;
-    ctx.shadowColor = '#0f0';
-    ctx.drawImage(document.getElementById('redtransparent.png'), 50, -50);
-    ctx.shadowColor = '#f00';
-    ctx.drawImage(document.getElementById('redtransparent.png'), -50, -50);
-
-    @assert pixel 25,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 75,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.shadow.image.alpha
-  desc: Shadows are drawn correctly for partially-transparent images
-  testing:
-    - 2d.shadow.render
-  images:
-    - transparent50.png
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.shadowOffsetY = 50;
-    ctx.shadowColor = '#00f';
-    ctx.drawImage(document.getElementById('transparent50.png'), 0, -50);
-
-    @assert pixel 50,25 ==~ 127,0,127,255;
-  expected: |
-    size 100 50
-    cr.set_source_rgb(0.5, 0, 0.5)
-    cr.rectangle(0, 0, 100, 50)
-    cr.fill()
-
-- name: 2d.shadow.image.section
-  desc: Shadows are not drawn for areas outside image source rectangles
-  testing:
-    - 2d.shadow.render
-  images:
-    - redtransparent.png
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.shadowOffsetY = 50;
-    ctx.shadowColor = '#f00';
-    ctx.drawImage(document.getElementById('redtransparent.png'), 50, 0, 50, 50, 0, -50, 50, 50);
-
-    @assert pixel 25,25 ==~ 0,255,0,255;
-    @assert pixel 50,25 ==~ 0,255,0,255;
-    @assert pixel 75,25 ==~ 0,255,0,255;
-  expected: green
-
-- name: 2d.shadow.image.scale
-  desc: Shadows are drawn correctly for scaled images
-  testing:
-    - 2d.shadow.render
-  images:
-    - redtransparent.png
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.shadowOffsetY = 50;
-    ctx.shadowColor = '#0f0';
-    ctx.drawImage(document.getElementById('redtransparent.png'), 0, 0, 100, 50, -10, -50, 240, 50);
-
-    @assert pixel 25,25 ==~ 0,255,0,255;
-    @assert pixel 50,25 ==~ 0,255,0,255;
-    @assert pixel 75,25 ==~ 0,255,0,255;
-  expected: green
-
-- name: 2d.shadow.canvas.basic
-  desc: Shadows are drawn for canvases
-  testing:
-    - 2d.shadow.render
-  code: |
-    var canvas2 = document.createElement('canvas');
-    canvas2.width = 100;
-    canvas2.height = 50;
-    var ctx2 = canvas2.getContext('2d');
-    ctx2.fillStyle = '#f00';
-    ctx2.fillRect(0, 0, 100, 50);
-
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.shadowColor = '#0f0';
-    ctx.shadowOffsetY = 50;
-    ctx.drawImage(canvas2, 0, -50);
-
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.shadow.canvas.transparent.1
-  desc: Shadows are not drawn for transparent canvases
-  testing:
-    - 2d.shadow.render
-  code: |
-    var canvas2 = document.createElement('canvas');
-    canvas2.width = 100;
-    canvas2.height = 50;
-    var ctx2 = canvas2.getContext('2d');
-
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.shadowColor = '#f00';
-    ctx.shadowOffsetY = 50;
-    ctx.drawImage(canvas2, 0, -50);
-
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.shadow.canvas.transparent.2
-  desc: Shadows are not drawn for transparent parts of canvases
-  testing:
-    - 2d.shadow.render
-  code: |
-    var canvas2 = document.createElement('canvas');
-    canvas2.width = 100;
-    canvas2.height = 50;
-    var ctx2 = canvas2.getContext('2d');
-    ctx2.fillStyle = '#f00';
-    ctx2.fillRect(0, 0, 50, 50);
-
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 50, 50);
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(50, 0, 50, 50);
-    ctx.shadowOffsetY = 50;
-    ctx.shadowColor = '#0f0';
-    ctx.drawImage(canvas2, 50, -50);
-    ctx.shadowColor = '#f00';
-    ctx.drawImage(canvas2, -50, -50);
-
-    @assert pixel 25,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 75,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.shadow.canvas.alpha
-  desc: Shadows are drawn correctly for partially-transparent canvases
-  testing:
-    - 2d.shadow.render
-  images:
-    - transparent50.png
-  code: |
-    var canvas2 = document.createElement('canvas');
-    canvas2.width = 100;
-    canvas2.height = 50;
-    var ctx2 = canvas2.getContext('2d');
-    ctx2.fillStyle = 'rgba(255, 0, 0, 0.5)';
-    ctx2.fillRect(0, 0, 100, 50);
-
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.shadowOffsetY = 50;
-    ctx.shadowColor = '#00f';
-    ctx.drawImage(canvas2, 0, -50);
-
-    @assert pixel 50,25 ==~ 127,0,127,255;
-  expected: |
-    size 100 50
-    cr.set_source_rgb(0.5, 0, 0.5)
-    cr.rectangle(0, 0, 100, 50)
-    cr.fill()
-
-- name: 2d.shadow.pattern.basic
-  desc: Shadows are drawn for fill patterns
-  testing:
-    - 2d.shadow.render
-  # http://bugs.webkit.org/show_bug.cgi?id=15266
-  images:
-    - red.png
-  code: |
-    var pattern = ctx.createPattern(document.getElementById('red.png'), 'repeat');
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.shadowColor = '#0f0';
-    ctx.shadowOffsetY = 50;
-    ctx.fillStyle = pattern;
-    ctx.fillRect(0, -50, 100, 50);
-
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.shadow.pattern.transparent.1
-  desc: Shadows are not drawn for transparent fill patterns
-  testing:
-    - 2d.shadow.render
-  # http://bugs.webkit.org/show_bug.cgi?id=15266
-  images:
-    - transparent.png
-  code: |
-    var pattern = ctx.createPattern(document.getElementById('transparent.png'), 'repeat');
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.shadowColor = '#f00';
-    ctx.shadowOffsetY = 50;
-    ctx.fillStyle = pattern;
-    ctx.fillRect(0, -50, 100, 50);
-
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.shadow.pattern.transparent.2
-  desc: Shadows are not drawn for transparent parts of fill patterns
-  testing:
-    - 2d.shadow.render
-  # http://bugs.webkit.org/show_bug.cgi?id=15266
-  images:
-    - redtransparent.png
-  code: |
-    var pattern = ctx.createPattern(document.getElementById('redtransparent.png'), 'repeat');
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 50, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(50, 0, 50, 50);
-    ctx.shadowOffsetY = 50;
-    ctx.shadowColor = '#0f0';
-    ctx.fillStyle = pattern;
-    ctx.fillRect(0, -50, 100, 50);
-
-    @assert pixel 25,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 75,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.shadow.pattern.alpha
-  desc: Shadows are drawn correctly for partially-transparent fill patterns
-  testing:
-    - 2d.shadow.render
-  # http://bugs.webkit.org/show_bug.cgi?id=15266
-  images:
-    - transparent50.png
-  code: |
-    var pattern = ctx.createPattern(document.getElementById('transparent50.png'), 'repeat');
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.shadowOffsetY = 50;
-    ctx.shadowColor = '#00f';
-    ctx.fillStyle = pattern;
-    ctx.fillRect(0, -50, 100, 50);
-
-    @assert pixel 50,25 ==~ 127,0,127,255;
-  expected: |
-    size 100 50
-    cr.set_source_rgb(0.5, 0, 0.5)
-    cr.rectangle(0, 0, 100, 50)
-    cr.fill()
-
-- name: 2d.shadow.gradient.basic
-  desc: Shadows are drawn for gradient fills
-  testing:
-    - 2d.shadow.render
-  # http://bugs.webkit.org/show_bug.cgi?id=15266
-  code: |
-    var gradient = ctx.createLinearGradient(0, 0, 100, 0);
-    gradient.addColorStop(0, '#f00');
-    gradient.addColorStop(1, '#f00');
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.shadowColor = '#0f0';
-    ctx.shadowOffsetY = 50;
-    ctx.fillStyle = gradient;
-    ctx.fillRect(0, -50, 100, 50);
-
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.shadow.gradient.transparent.1
-  desc: Shadows are not drawn for transparent gradient fills
-  testing:
-    - 2d.shadow.render
-  # http://bugs.webkit.org/show_bug.cgi?id=15266
-  code: |
-    var gradient = ctx.createLinearGradient(0, 0, 100, 0);
-    gradient.addColorStop(0, 'rgba(0,0,0,0)');
-    gradient.addColorStop(1, 'rgba(0,0,0,0)');
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.shadowColor = '#f00';
-    ctx.shadowOffsetY = 50;
-    ctx.fillStyle = gradient;
-    ctx.fillRect(0, -50, 100, 50);
-
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.shadow.gradient.transparent.2
-  desc: Shadows are not drawn for transparent parts of gradient fills
-  testing:
-    - 2d.shadow.render
-  # http://bugs.webkit.org/show_bug.cgi?id=15266
-  code: |
-    var gradient = ctx.createLinearGradient(0, 0, 100, 0);
-    gradient.addColorStop(0, '#f00');
-    gradient.addColorStop(0.499, '#f00');
-    gradient.addColorStop(0.5, 'rgba(0,0,0,0)');
-    gradient.addColorStop(1, 'rgba(0,0,0,0)');
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 50, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(50, 0, 50, 50);
-    ctx.shadowOffsetY = 50;
-    ctx.shadowColor = '#0f0';
-    ctx.fillStyle = gradient;
-    ctx.fillRect(0, -50, 100, 50);
-
-    @assert pixel 25,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 75,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.shadow.gradient.alpha
-  desc: Shadows are drawn correctly for partially-transparent gradient fills
-  testing:
-    - 2d.shadow.render
-  # http://bugs.webkit.org/show_bug.cgi?id=15266
-  code: |
-    var gradient = ctx.createLinearGradient(0, 0, 100, 0);
-    gradient.addColorStop(0, 'rgba(255,0,0,0.5)');
-    gradient.addColorStop(1, 'rgba(255,0,0,0.5)');
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.shadowOffsetY = 50;
-    ctx.shadowColor = '#00f';
-    ctx.fillStyle = gradient;
-    ctx.fillRect(0, -50, 100, 50);
-
-    @assert pixel 50,25 ==~ 127,0,127,255;
-  expected: |
-    size 100 50
-    cr.set_source_rgb(0.5, 0, 0.5)
-    cr.rectangle(0, 0, 100, 50)
-    cr.fill()
-
-- name: 2d.shadow.transform.1
-  desc: Shadows take account of transformations
-  testing:
-    - 2d.shadow.render
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.shadowOffsetY = 50;
-    ctx.shadowColor = '#0f0';
-    ctx.translate(100, 100);
-    ctx.fillRect(-100, -150, 100, 50);
-
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.shadow.transform.2
-  desc: Shadow offsets are not affected by transformations
-  testing:
-    - 2d.shadow.render
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.shadowOffsetY = 50;
-    ctx.shadowColor = '#0f0';
-    ctx.rotate(Math.PI)
-    ctx.fillRect(-100, 0, 100, 50);
-
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.shadow.blur.low
-  desc: Shadows look correct for small blurs
-  manual:
-  testing:
-    - 2d.shadow.render
-  code: |
-    ctx.fillStyle = '#ff0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.shadowColor = '#00f';
-    ctx.shadowOffsetY = 25;
-    for (var x = 0; x < 100; ++x) {
-        ctx.save();
-        ctx.beginPath();
-        ctx.rect(x, 0, 1, 50);
-        ctx.clip();
-        ctx.shadowBlur = x;
-        ctx.fillRect(-200, -200, 500, 200);
-        ctx.restore();
-    }
-  expected: |
-    size 100 50
-    import math
-    cr.set_source_rgb(0, 0, 1)
-    cr.rectangle(0, 0, 1, 25)
-    cr.fill()
-    cr.set_source_rgb(1, 1, 0)
-    cr.rectangle(0, 25, 1, 25)
-    cr.fill()
-    for x in range(1, 100):
-        sigma = x/2.0
-        filter = []
-        for i in range(-24, 26):
-            filter.append(math.exp(-i*i / (2*sigma*sigma)) / (math.sqrt(2*math.pi)*sigma))
-        accum = [0]
-        for f in filter:
-            accum.append(accum[-1] + f)
-        for y in range(0, 50):
-            cr.set_source_rgb(accum[y], accum[y], 1-accum[y])
-            cr.rectangle(x, y, 1, 1)
-            cr.fill()
-
-- name: 2d.shadow.blur.high
-  desc: Shadows look correct for large blurs
-  manual:
-  testing:
-    - 2d.shadow.render
-  code: |
-    ctx.fillStyle = '#ff0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.shadowColor = '#00f';
-    ctx.shadowOffsetY = 0;
-    ctx.shadowBlur = 100;
-    ctx.fillRect(-200, -200, 200, 400);
-  expected: |
-    size 100 50
-    import math
-    sigma = 100.0/2
-    filter = []
-    for i in range(-200, 100):
-        filter.append(math.exp(-i*i / (2*sigma*sigma)) / (math.sqrt(2*math.pi)*sigma))
-    accum = [0]
-    for f in filter:
-        accum.append(accum[-1] + f)
-    for x in range(0, 100):
-        cr.set_source_rgb(accum[x+200], accum[x+200], 1-accum[x+200])
-        cr.rectangle(x, 0, 1, 50)
-        cr.fill()
-
-- name: 2d.shadow.alpha.1
-  desc: Shadow colour alpha components are used
-  testing:
-    - 2d.shadow.render
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.shadowColor = 'rgba(255, 0, 0, 0.01)';
-    ctx.shadowOffsetY = 50;
-    ctx.fillRect(0, -50, 100, 50);
-
-    @assert pixel 50,25 ==~ 0,255,0,255 +/- 4;
-  expected: green
-
-- name: 2d.shadow.alpha.2
-  desc: Shadow colour alpha components are used
-  testing:
-    - 2d.shadow.render
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.shadowColor = 'rgba(0, 0, 255, 0.5)';
-    ctx.shadowOffsetY = 50;
-    ctx.fillRect(0, -50, 100, 50);
-
-    @assert pixel 50,25 ==~ 127,0,127,255;
-  expected: |
-    size 100 50
-    cr.set_source_rgb(0.5, 0, 0.5)
-    cr.rectangle(0, 0, 100, 50)
-    cr.fill()
-
-- name: 2d.shadow.alpha.3
-  desc: Shadows are affected by globalAlpha
-  testing:
-    - 2d.shadow.render
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#f00'; // (work around broken Firefox globalAlpha caching)
-    ctx.shadowColor = '#00f';
-    ctx.shadowOffsetY = 50;
-    ctx.globalAlpha = 0.5;
-    ctx.fillRect(0, -50, 100, 50);
-
-    @assert pixel 50,25 ==~ 127,0,127,255;
-  expected: |
-    size 100 50
-    cr.set_source_rgb(0.5, 0, 0.5)
-    cr.rectangle(0, 0, 100, 50)
-    cr.fill()
-
-- name: 2d.shadow.alpha.4
-  desc: Shadows with alpha components are correctly affected by globalAlpha
-  testing:
-    - 2d.shadow.render
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#f00'; // (work around broken Firefox globalAlpha caching)
-    ctx.shadowColor = 'rgba(0, 0, 255, 0.707)';
-    ctx.shadowOffsetY = 50;
-    ctx.globalAlpha = 0.707;
-    ctx.fillRect(0, -50, 100, 50);
-
-    @assert pixel 50,25 ==~ 127,0,127,255;
-  expected: |
-    size 100 50
-    cr.set_source_rgb(0.5, 0, 0.5)
-    cr.rectangle(0, 0, 100, 50)
-    cr.fill()
-
-- name: 2d.shadow.alpha.5
-  desc: Shadows of shapes with alpha components are drawn correctly
-  testing:
-    - 2d.shadow.render
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = 'rgba(64, 0, 0, 0.5)';
-    ctx.shadowColor = '#00f';
-    ctx.shadowOffsetY = 50;
-    ctx.fillRect(0, -50, 100, 50);
-
-    @assert pixel 50,25 ==~ 127,0,127,255;
-  expected: |
-    size 100 50
-    cr.set_source_rgb(0.5, 0, 0.5)
-    cr.rectangle(0, 0, 100, 50)
-    cr.fill()
-
-- name: 2d.shadow.composite.1
-  desc: Shadows are drawn using globalCompositeOperation
-  testing:
-    - 2d.shadow.render
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.globalCompositeOperation = 'xor';
-    ctx.shadowColor = '#f00';
-    ctx.shadowOffsetX = 100;
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(-100, 0, 200, 50);
-
-    @assert pixel 50,25 ==~ 0,255,0,255;
-  expected: green
-
-- name: 2d.shadow.composite.2
-  desc: Shadows are drawn using globalCompositeOperation
-  testing:
-    - 2d.shadow.render
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.globalCompositeOperation = 'xor';
-    ctx.shadowColor = '#f00';
-    ctx.shadowBlur = 1;
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(-10, -10, 120, 70);
-
-    @assert pixel 50,25 ==~ 0,255,0,255;
-  expected: green
-
-- name: 2d.shadow.composite.3
-  desc: Areas outside shadows are drawn correctly with destination-out
-  testing:
-    - 2d.shadow.render
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.globalCompositeOperation = 'destination-out';
-    ctx.shadowColor = '#f00';
-    ctx.shadowBlur = 10;
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(200, 0, 100, 50);
-
-    @assert pixel 5,5 ==~ 0,255,0,255;
-    @assert pixel 50,25 ==~ 0,255,0,255;
-  expected: green
-
-
-
-
-
-
-- name: 2d.clearRect.basic
-  desc: clearRect clears to transparent black
-  testing:
-    - 2d.clearRect
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.clearRect(0, 0, 100, 50);
-    @assert pixel 50,25 == 0,0,0,0;
-  expected: clear
-
-- name: 2d.clearRect.path
-  desc: clearRect does not affect the current path
-  testing:
-    - 2d.clearRect
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.beginPath();
-    ctx.rect(0, 0, 100, 50);
-    ctx.clearRect(0, 0, 16, 16);
-    ctx.fill();
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.clearRect.zero
-  desc: clearRect of zero pixels has no effect
-  testing:
-    - 2d.clearRect
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.clearRect(0, 0, 100, 0);
-    ctx.clearRect(0, 0, 0, 50);
-    ctx.clearRect(0, 0, 0, 0);
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.clearRect.negative
-  desc: clearRect of negative sizes works
-  testing:
-    - 2d.clearRect
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.clearRect(0, 0, 50, 25);
-    ctx.clearRect(100, 0, -50, 25);
-    ctx.clearRect(0, 50, 50, -25);
-    ctx.clearRect(100, 50, -50, -25);
-    @assert pixel 25,12 == 0,0,0,0;
-    @assert pixel 75,12 == 0,0,0,0;
-    @assert pixel 25,37 == 0,0,0,0;
-    @assert pixel 75,37 == 0,0,0,0;
-  expected: clear
-
-- name: 2d.clearRect.transform
-  desc: clearRect is affected by transforms
-  testing:
-    - 2d.clearRect
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.scale(10, 10);
-    ctx.translate(0, 5);
-    ctx.clearRect(0, -5, 10, 5);
-    @assert pixel 50,25 == 0,0,0,0;
-  expected: clear
-
-- name: 2d.clearRect.globalalpha
-  desc: clearRect is not affected by globalAlpha
-  testing:
-    - 2d.clearRect
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.globalAlpha = 0.1;
-    ctx.clearRect(0, 0, 100, 50);
-    @assert pixel 50,25 == 0,0,0,0;
-  expected: clear
-
-- name: 2d.clearRect.globalcomposite
-  desc: clearRect is not affected by globalCompositeOperation
-  testing:
-    - 2d.clearRect
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.globalCompositeOperation = 'destination-atop';
-    ctx.clearRect(0, 0, 100, 50);
-    @assert pixel 50,25 == 0,0,0,0;
-  expected: clear
-
-- name: 2d.clearRect.clip
-  desc: clearRect is affected by clipping regions
-  testing:
-    - 2d.clearRect
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.beginPath();
-    ctx.rect(0, 0, 16, 16);
-    ctx.clip();
-
-    ctx.clearRect(0, 0, 100, 50);
-
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 16, 16);
-
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.clearRect.shadow
-  desc: clearRect does not draw shadows
-  testing:
-    - 2d.clearRect
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.shadowColor = '#f00';
-    ctx.shadowBlur = 0;
-    ctx.shadowOffsetX = 0;
-    ctx.shadowOffsetY = 50;
-    ctx.clearRect(0, -50, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.clearRect.nonfinite
-  desc: clearRect() with Infinity/NaN is ignored
-  testing:
-    - 2d.nonfinite
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-
-    @nonfinite ctx.clearRect(<0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <100 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>);
-
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-
-- name: 2d.fillRect.basic
-  desc: fillRect works
-  testing:
-    - 2d.fillRect
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.fillRect.path
-  desc: fillRect does not affect the current path
-  testing:
-    - 2d.fillRect
-  code: |
-    ctx.beginPath();
-    ctx.rect(0, 0, 100, 50);
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 16, 16);
-    ctx.fillStyle = '#0f0';
-    ctx.fill();
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.fillRect.zero
-  desc: fillRect of zero pixels has no effect
-  testing:
-    - 2d.fillRect
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 0);
-    ctx.fillRect(0, 0, 0, 50);
-    ctx.fillRect(0, 0, 0, 0);
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.fillRect.negative
-  desc: fillRect of negative sizes works
-  testing:
-    - 2d.fillRect
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 50, 25);
-    ctx.fillRect(100, 0, -50, 25);
-    ctx.fillRect(0, 50, 50, -25);
-    ctx.fillRect(100, 50, -50, -25);
-    @assert pixel 25,12 == 0,255,0,255;
-    @assert pixel 75,12 == 0,255,0,255;
-    @assert pixel 25,37 == 0,255,0,255;
-    @assert pixel 75,37 == 0,255,0,255;
-  expected: green
-
-- name: 2d.fillRect.transform
-  desc: fillRect is affected by transforms
-  testing:
-    - 2d.fillRect
-  code: |
-    ctx.scale(10, 10);
-    ctx.translate(0, 5);
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, -5, 10, 5);
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-# don't bother testing globalalpha, globalcomposite because they're already heavily used by other test cases
-
-- name: 2d.fillRect.clip
-  desc: fillRect is affected by clipping regions
-  testing:
-    - 2d.fillRect
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.beginPath();
-    ctx.rect(0, 0, 16, 16);
-    ctx.clip();
-
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 16, 16);
-
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.fillRect.shadow
-  desc: fillRect draws shadows
-  testing:
-    - 2d.fillRect
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.shadowColor = '#0f0';
-    ctx.shadowBlur = 0;
-    ctx.shadowOffsetX = 0;
-    ctx.shadowOffsetY = 50;
-    ctx.fillRect(0, -50, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.fillRect.nonfinite
-  desc: fillRect() with Infinity/NaN is ignored
-  testing:
-    - 2d.nonfinite
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.fillStyle = '#f00';
-    @nonfinite ctx.fillRect(<0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <100 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>);
-
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-
-- name: 2d.strokeRect.basic
-  desc: strokeRect works
-  testing:
-    - 2d.strokeRect
-  code: |
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 50;
-    ctx.strokeRect(25, 24, 50, 2);
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.strokeRect.path
-  desc: strokeRect does not affect the current path
-  testing:
-    - 2d.strokeRect
-  code: |
-    ctx.beginPath();
-    ctx.rect(0, 0, 100, 50);
-    ctx.strokeStyle = '#f00';
-    ctx.lineWidth = 5;
-    ctx.strokeRect(0, 0, 16, 16);
-    ctx.fillStyle = '#0f0';
-    ctx.fill();
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.strokeRect.zero.1
-  desc: strokeRect of 0x0 pixels draws nothing
-  testing:
-    - 2d.strokeRect
-  code: |
-    ctx.strokeStyle = '#f00';
-    ctx.lineWidth = 250;
-    ctx.strokeRect(50, 25, 0, 0);
-    @assert pixel 50,25 == 0,0,0,0;
-  expected: clear
-
-- name: 2d.strokeRect.zero.2
-  desc: strokeRect of 0x0 pixels draws nothing, including caps and joins
-  testing:
-    - 2d.strokeRect
-  code: |
-    ctx.strokeStyle = '#f00';
-    ctx.lineWidth = 250;
-    ctx.lineCap = 'round';
-    ctx.lineJoin = 'round';
-    ctx.strokeRect(50, 25, 0, 0);
-    @assert pixel 50,25 == 0,0,0,0;
-  expected: clear
-
-- name: 2d.strokeRect.zero.3
-  desc: strokeRect of Nx0 pixels draws a straight line
-  testing:
-    - 2d.strokeRect
-  code: |
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 50;
-    ctx.strokeRect(0, 25, 100, 0);
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.strokeRect.zero.4
-  desc: strokeRect of Nx0 pixels draws a closed line with no caps
-  testing:
-    - 2d.strokeRect
-  code: |
-    ctx.strokeStyle = '#f00';
-    ctx.lineWidth = 250;
-    ctx.lineCap = 'round';
-    ctx.strokeRect(100, 25, 100, 0);
-    @assert pixel 50,25 == 0,0,0,0;
-  expected: clear
-
-- name: 2d.strokeRect.zero.5
-  desc: strokeRect of Nx0 pixels draws a closed line with joins
-  testing:
-    - 2d.strokeRect
-  code: |
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 250;
-    ctx.lineJoin = 'round';
-    ctx.strokeRect(100, 25, 100, 0);
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.strokeRect.negative
-  desc: strokeRect of negative sizes works
-  testing:
-    - 2d.strokeRect
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 25;
-    ctx.strokeRect(12, 12, 26, 1);
-    ctx.strokeRect(88, 12, -26, 1);
-    ctx.strokeRect(12, 38, 26, -1);
-    ctx.strokeRect(88, 38, -26, -1);
-    @assert pixel 25,12 == 0,255,0,255;
-    @assert pixel 75,12 == 0,255,0,255;
-    @assert pixel 25,37 == 0,255,0,255;
-    @assert pixel 75,37 == 0,255,0,255;
-  expected: green
-
-- name: 2d.strokeRect.transform
-  desc: fillRect is affected by transforms
-  testing:
-    - 2d.strokeRect
-  code: |
-    ctx.scale(10, 10);
-    ctx.translate(0, 5);
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 5;
-    ctx.strokeRect(2.5, -2.6, 5, 0.2);
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.strokeRect.globalalpha
-  desc: strokeRect is affected by globalAlpha
-  testing:
-    - 2d.strokeRect
-  code: |
-    ctx.globalAlpha = 0;
-    ctx.strokeStyle = '#f00';
-    ctx.lineWidth = 50;
-    ctx.strokeRect(25, 24, 50, 2);
-    @assert pixel 50,25 == 0,0,0,0;
-  expected: clear
-
-- name: 2d.strokeRect.globalcomposite
-  desc: strokeRect is not affected by globalCompositeOperation
-  testing:
-    - 2d.strokeRect
-  code: |
-    ctx.globalCompositeOperation = 'source-in';
-    ctx.strokeStyle = '#f00';
-    ctx.lineWidth = 50;
-    ctx.strokeRect(25, 24, 50, 2);
-    @assert pixel 50,25 == 0,0,0,0;
-  expected: clear
-
-- name: 2d.strokeRect.clip
-  desc: strokeRect is affected by clipping regions
-  testing:
-    - 2d.strokeRect
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.beginPath();
-    ctx.rect(0, 0, 16, 16);
-    ctx.clip();
-
-    ctx.strokeStyle = '#f00';
-    ctx.lineWidth = 50;
-    ctx.strokeRect(0, 0, 100, 50);
-
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 16, 16);
-
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.strokeRect.shadow
-  desc: strokeRect draws shadows
-  testing:
-    - 2d.strokeRect
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#f00';
-    ctx.shadowColor = '#0f0';
-    ctx.shadowBlur = 0;
-    ctx.shadowOffsetX = 0;
-    ctx.shadowOffsetY = 50;
-    ctx.strokeStyle = '#f00';
-    ctx.lineWidth = 50;
-    ctx.strokeRect(0, -75, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.strokeRect.nonfinite
-  desc: strokeRect() with Infinity/NaN is ignored
-  testing:
-    - 2d.nonfinite
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.strokeStyle = '#f00';
-    ctx.lineWidth = 150;
-    @nonfinite ctx.strokeRect(<0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <100 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>);
-
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-
-- name: 2d.path.initial
-  testing:
-    - 2d.path.initial
-  #mozilla: { bug: TODO }
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.closePath();
-    ctx.fillStyle = '#f00';
-    ctx.fill();
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.beginPath
-  testing:
-    - 2d.path.beginPath
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.rect(0, 0, 100, 50);
-    ctx.beginPath();
-    ctx.fillStyle = '#f00';
-    ctx.fill();
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.moveTo.basic
-  testing:
-    - 2d.path.moveTo
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.rect(0, 0, 10, 50);
-    ctx.moveTo(100, 0);
-    ctx.lineTo(10, 0);
-    ctx.lineTo(10, 50);
-    ctx.lineTo(100, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.fill();
-    @assert pixel 90,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.moveTo.newsubpath
-  testing:
-    - 2d.path.moveTo
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.beginPath();
-    ctx.moveTo(0, 0);
-    ctx.moveTo(100, 0);
-    ctx.moveTo(100, 50);
-    ctx.moveTo(0, 50);
-    ctx.fillStyle = '#f00';
-    ctx.fill();
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.moveTo.multiple
-  testing:
-    - 2d.path.moveTo
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.moveTo(0, 25);
-    ctx.moveTo(100, 25);
-    ctx.moveTo(0, 25);
-    ctx.lineTo(100, 25);
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 50;
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.moveTo.nonfinite
-  desc: moveTo() with Infinity/NaN is ignored
-  testing:
-    - 2d.nonfinite
-  code: |
-    ctx.moveTo(0, 0);
-    ctx.lineTo(100, 0);
-    @nonfinite ctx.moveTo(<0 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>);
-    ctx.lineTo(100, 50);
-    ctx.lineTo(0, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.fill();
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.closePath.empty
-  testing:
-    - 2d.path.closePath.empty
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.closePath();
-    ctx.fillStyle = '#f00';
-    ctx.fill();
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.closePath.newline
-  testing:
-    - 2d.path.closePath.nonempty
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 50;
-    ctx.moveTo(-100, 25);
-    ctx.lineTo(-100, -100);
-    ctx.lineTo(200, -100);
-    ctx.lineTo(200, 25);
-    ctx.closePath();
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.closePath.nextpoint
-  testing:
-    - 2d.path.closePath.nonempty
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 50;
-    ctx.moveTo(-100, 25);
-    ctx.lineTo(-100, -1000);
-    ctx.closePath();
-    ctx.lineTo(1000, 25);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.lineTo.ensuresubpath.1
-  desc: If there is no subpath, the point is added and nothing is drawn
-  testing:
-    - 2d.path.lineTo.empty
-    - 2d.path.ensure
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#f00';
-    ctx.lineWidth = 50;
-    ctx.beginPath();
-    ctx.lineTo(100, 50);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.lineTo.ensuresubpath.2
-  desc: If there is no subpath, the point is added and used for subsequent drawing
-  testing:
-    - 2d.path.lineTo.empty
-    - 2d.path.ensure
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 50;
-    ctx.beginPath();
-    ctx.lineTo(0, 25);
-    ctx.lineTo(100, 25);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.lineTo.basic
-  testing:
-    - 2d.path.lineTo.nonempty
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 50;
-    ctx.beginPath();
-    ctx.moveTo(0, 25);
-    ctx.lineTo(100, 25);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.lineTo.nextpoint
-  testing:
-    - 2d.path.lineTo.nonempty
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 50;
-    ctx.beginPath();
-    ctx.moveTo(-100, -100);
-    ctx.lineTo(0, 25);
-    ctx.lineTo(100, 25);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.lineTo.nonfinite
-  desc: lineTo() with Infinity/NaN is ignored
-  testing:
-    - 2d.nonfinite
-  code: |
-    ctx.moveTo(0, 0);
-    ctx.lineTo(100, 0);
-    @nonfinite ctx.lineTo(<0 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>);
-    ctx.lineTo(100, 50);
-    ctx.lineTo(0, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.fill();
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 90,45 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.lineTo.nonfinite.details
-  desc: lineTo() with Infinity/NaN for first arg still converts the second arg
-  testing:
-    - 2d.nonfinite
-  code: |
-    for (var arg1 of [Infinity, -Infinity, NaN]) {
-      var converted = false;
-      ctx.lineTo(arg1, { valueOf: function() { converted = true; return 0; } });
-      @assert converted;
-    }
-  expected: clear
-
-- name: 2d.path.quadraticCurveTo.ensuresubpath.1
-  desc: If there is no subpath, the first control point is added (and nothing is drawn up to it)
-  testing:
-    - 2d.path.quadratic.empty
-    - 2d.path.ensure
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#f00';
-    ctx.lineWidth = 50;
-    ctx.beginPath();
-    ctx.quadraticCurveTo(100, 50, 200, 50);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 95,45 == 0,255,0,255; @moz-todo
-  expected: green
-
-- name: 2d.path.quadraticCurveTo.ensuresubpath.2
-  desc: If there is no subpath, the first control point is added
-  testing:
-    - 2d.path.quadratic.empty
-    - 2d.path.ensure
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 50;
-    ctx.beginPath();
-    ctx.quadraticCurveTo(0, 25, 100, 25);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 5,45 == 0,255,0,255; @moz-todo
-  expected: green
-
-- name: 2d.path.quadraticCurveTo.basic
-  testing:
-    - 2d.path.quadratic.nonempty
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 50;
-    ctx.beginPath();
-    ctx.moveTo(0, 25);
-    ctx.quadraticCurveTo(100, 25, 100, 25);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.quadraticCurveTo.shape
-  testing:
-    - 2d.path.quadratic.nonempty
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 55;
-    ctx.beginPath();
-    ctx.moveTo(-1000, 1050);
-    ctx.quadraticCurveTo(0, -1000, 1200, 1050);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.quadraticCurveTo.scaled
-  testing:
-    - 2d.path.quadratic.nonempty
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.scale(1000, 1000);
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 0.055;
-    ctx.beginPath();
-    ctx.moveTo(-1, 1.05);
-    ctx.quadraticCurveTo(0, -1, 1.2, 1.05);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.quadraticCurveTo.nonfinite
-  desc: quadraticCurveTo() with Infinity/NaN is ignored
-  testing:
-    - 2d.nonfinite
-  code: |
-    ctx.moveTo(0, 0);
-    ctx.lineTo(100, 0);
-    @nonfinite ctx.quadraticCurveTo(<0 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>);
-    ctx.lineTo(100, 50);
-    ctx.lineTo(0, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.fill();
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 90,45 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.bezierCurveTo.ensuresubpath.1
-  desc: If there is no subpath, the first control point is added (and nothing is drawn up to it)
-  testing:
-    - 2d.path.bezier.empty
-    - 2d.path.ensure
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#f00';
-    ctx.lineWidth = 50;
-    ctx.beginPath();
-    ctx.bezierCurveTo(100, 50, 200, 50, 200, 50);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 95,45 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.bezierCurveTo.ensuresubpath.2
-  desc: If there is no subpath, the first control point is added
-  testing:
-    - 2d.path.bezier.empty
-    - 2d.path.ensure
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 50;
-    ctx.beginPath();
-    ctx.bezierCurveTo(0, 25, 100, 25, 100, 25);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 5,45 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.bezierCurveTo.basic
-  testing:
-    - 2d.path.bezier.nonempty
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 50;
-    ctx.beginPath();
-    ctx.moveTo(0, 25);
-    ctx.bezierCurveTo(100, 25, 100, 25, 100, 25);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.bezierCurveTo.shape
-  testing:
-    - 2d.path.bezier.nonempty
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 55;
-    ctx.beginPath();
-    ctx.moveTo(-2000, 3100);
-    ctx.bezierCurveTo(-2000, -1000, 2100, -1000, 2100, 3100);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.bezierCurveTo.scaled
-  testing:
-    - 2d.path.bezier.nonempty
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.scale(1000, 1000);
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 0.055;
-    ctx.beginPath();
-    ctx.moveTo(-2, 3.1);
-    ctx.bezierCurveTo(-2, -1, 2.1, -1, 2.1, 3.1);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.bezierCurveTo.nonfinite
-  desc: bezierCurveTo() with Infinity/NaN is ignored
-  testing:
-    - 2d.nonfinite
-  code: |
-    ctx.moveTo(0, 0);
-    ctx.lineTo(100, 0);
-    @nonfinite ctx.bezierCurveTo(<0 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>);
-    ctx.lineTo(100, 50);
-    ctx.lineTo(0, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.fill();
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 90,45 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.arcTo.ensuresubpath.1
-  desc: If there is no subpath, the first control point is added (and nothing is drawn up to it)
-  testing:
-    - 2d.path.arcTo.empty
-    - 2d.path.ensure
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.lineWidth = 50;
-    ctx.strokeStyle = '#f00';
-    ctx.beginPath();
-    ctx.arcTo(100, 50, 200, 50, 0.1);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.arcTo.ensuresubpath.2
-  desc: If there is no subpath, the first control point is added
-  testing:
-    - 2d.path.arcTo.empty
-    - 2d.path.ensure
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.lineWidth = 50;
-    ctx.strokeStyle = '#0f0';
-    ctx.beginPath();
-    ctx.arcTo(0, 25, 50, 250, 0.1); // adds (x1,y1), draws nothing
-    ctx.lineTo(100, 25);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.arcTo.coincide.1
-  desc: arcTo() has no effect if P0 = P1
-  testing:
-    - 2d.path.arcTo.coincide.01
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.lineWidth = 50;
-
-    ctx.strokeStyle = '#0f0';
-    ctx.beginPath();
-    ctx.moveTo(0, 25);
-    ctx.arcTo(0, 25, 50, 1000, 1);
-    ctx.lineTo(100, 25);
-    ctx.stroke();
-
-    ctx.strokeStyle = '#f00';
-    ctx.beginPath();
-    ctx.moveTo(50, 25);
-    ctx.arcTo(50, 25, 100, 25, 1);
-    ctx.stroke();
-
-    @assert pixel 50,1 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 50,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.arcTo.coincide.2
-  desc: arcTo() draws a straight line to P1 if P1 = P2
-  testing:
-    - 2d.path.arcTo.coincide.12
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.lineWidth = 50;
-    ctx.strokeStyle = '#0f0';
-    ctx.beginPath();
-    ctx.moveTo(0, 25);
-    ctx.arcTo(100, 25, 100, 25, 1);
-    ctx.stroke();
-
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.arcTo.collinear.1
-  desc: arcTo() with all points on a line, and P1 between P0/P2, draws a straight line to P1
-  testing:
-    - 2d.path.arcTo.collinear
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.lineWidth = 50;
-
-    ctx.strokeStyle = '#0f0';
-    ctx.beginPath();
-    ctx.moveTo(0, 25);
-    ctx.arcTo(100, 25, 200, 25, 1);
-    ctx.stroke();
-
-    ctx.strokeStyle = '#f00';
-    ctx.beginPath();
-    ctx.moveTo(-100, 25);
-    ctx.arcTo(0, 25, 100, 25, 1);
-    ctx.stroke();
-
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.arcTo.collinear.2
-  desc: arcTo() with all points on a line, and P2 between P0/P1, draws a straight line to P1
-  testing:
-    - 2d.path.arcTo.collinear
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.lineWidth = 50;
-
-    ctx.strokeStyle = '#0f0';
-    ctx.beginPath();
-    ctx.moveTo(0, 25);
-    ctx.arcTo(100, 25, 10, 25, 1);
-    ctx.stroke();
-
-    ctx.strokeStyle = '#f00';
-    ctx.beginPath();
-    ctx.moveTo(100, 25);
-    ctx.arcTo(200, 25, 110, 25, 1);
-    ctx.stroke();
-
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.arcTo.collinear.3
-  desc: arcTo() with all points on a line, and P0 between P1/P2, draws a straight line to P1
-  testing:
-    - 2d.path.arcTo.collinear
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.lineWidth = 50;
-
-    ctx.strokeStyle = '#0f0';
-    ctx.beginPath();
-    ctx.moveTo(0, 25);
-    ctx.arcTo(100, 25, -100, 25, 1);
-    ctx.stroke();
-
-    ctx.strokeStyle = '#f00';
-    ctx.beginPath();
-    ctx.moveTo(100, 25);
-    ctx.arcTo(200, 25, 0, 25, 1);
-    ctx.stroke();
-
-    ctx.beginPath();
-    ctx.moveTo(-100, 25);
-    ctx.arcTo(0, 25, -200, 25, 1);
-    ctx.stroke();
-
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.arcTo.shape.curve1
-  desc: arcTo() curves in the right kind of shape
-  testing:
-    - 2d.path.arcTo.shape
-  code: |
-    var tol = 1.5; // tolerance to avoid antialiasing artifacts
-
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.strokeStyle = '#f00';
-    ctx.lineWidth = 10;
-    ctx.beginPath();
-    ctx.moveTo(10, 25);
-    ctx.arcTo(75, 25, 75, 60, 20);
-    ctx.stroke();
-
-    ctx.fillStyle = '#0f0';
-    ctx.beginPath();
-    ctx.rect(10, 20, 45, 10);
-    ctx.moveTo(80, 45);
-    ctx.arc(55, 45, 25+tol, 0, -Math.PI/2, true);
-    ctx.arc(55, 45, 15-tol, -Math.PI/2, 0, false);
-    ctx.fill();
-
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 55,19 == 0,255,0,255;
-    @assert pixel 55,20 == 0,255,0,255;
-    @assert pixel 55,21 == 0,255,0,255;
-    @assert pixel 64,22 == 0,255,0,255;
-    @assert pixel 65,21 == 0,255,0,255;
-    @assert pixel 72,28 == 0,255,0,255;
-    @assert pixel 73,27 == 0,255,0,255;
-    @assert pixel 78,36 == 0,255,0,255;
-    @assert pixel 79,35 == 0,255,0,255;
-    @assert pixel 80,44 == 0,255,0,255;
-    @assert pixel 80,45 == 0,255,0,255;
-    @assert pixel 80,46 == 0,255,0,255;
-    @assert pixel 65,45 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.arcTo.shape.curve2
-  desc: arcTo() curves in the right kind of shape
-  testing:
-    - 2d.path.arcTo.shape
-  code: |
-    var tol = 1.5; // tolerance to avoid antialiasing artifacts
-
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.fillStyle = '#f00';
-    ctx.beginPath();
-    ctx.rect(10, 20, 45, 10);
-    ctx.moveTo(80, 45);
-    ctx.arc(55, 45, 25-tol, 0, -Math.PI/2, true);
-    ctx.arc(55, 45, 15+tol, -Math.PI/2, 0, false);
-    ctx.fill();
-
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 10;
-    ctx.beginPath();
-    ctx.moveTo(10, 25);
-    ctx.arcTo(75, 25, 75, 60, 20);
-    ctx.stroke();
-
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 55,19 == 0,255,0,255;
-    @assert pixel 55,20 == 0,255,0,255;
-    @assert pixel 55,21 == 0,255,0,255;
-    @assert pixel 64,22 == 0,255,0,255;
-    @assert pixel 65,21 == 0,255,0,255;
-    @assert pixel 72,28 == 0,255,0,255;
-    @assert pixel 73,27 == 0,255,0,255;
-    @assert pixel 78,36 == 0,255,0,255;
-    @assert pixel 79,35 == 0,255,0,255;
-    @assert pixel 80,44 == 0,255,0,255;
-    @assert pixel 80,45 == 0,255,0,255;
-    @assert pixel 80,46 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.arcTo.shape.start
-  desc: arcTo() draws a straight line from P0 to P1
-  testing:
-    - 2d.path.arcTo.shape
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 50;
-    ctx.beginPath();
-    ctx.moveTo(0, 25);
-    ctx.arcTo(200, 25, 200, 50, 10);
-    ctx.stroke();
-
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.arcTo.shape.end
-  desc: arcTo() does not draw anything from P1 to P2
-  testing:
-    - 2d.path.arcTo.shape
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#f00';
-    ctx.lineWidth = 50;
-    ctx.beginPath();
-    ctx.moveTo(-100, -100);
-    ctx.arcTo(-100, 25, 200, 25, 10);
-    ctx.stroke();
-
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.arcTo.negative
-  desc: arcTo() with negative radius throws an exception
-  testing:
-    - 2d.path.arcTo.negative
-  code: |
-    @assert throws INDEX_SIZE_ERR ctx.arcTo(0, 0, 0, 0, -1);
-    var path = new Path2D();
-    @assert throws INDEX_SIZE_ERR path.arcTo(10, 10, 20, 20, -5);
-
-- name: 2d.path.arcTo.zero.1
-  desc: arcTo() with zero radius draws a straight line from P0 to P1
-  testing:
-    - 2d.path.arcTo.zeroradius
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.lineWidth = 50;
-
-    ctx.strokeStyle = '#0f0';
-    ctx.beginPath();
-    ctx.moveTo(0, 25);
-    ctx.arcTo(100, 25, 100, 100, 0);
-    ctx.stroke();
-
-    ctx.strokeStyle = '#f00';
-    ctx.beginPath();
-    ctx.moveTo(0, -25);
-    ctx.arcTo(50, -25, 50, 50, 0);
-    ctx.stroke();
-
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.arcTo.zero.2
-  desc: arcTo() with zero radius draws a straight line from P0 to P1, even when all points are collinear
-  testing:
-    - 2d.path.arcTo.zeroradius
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.lineWidth = 50;
-
-    ctx.strokeStyle = '#0f0';
-    ctx.beginPath();
-    ctx.moveTo(0, 25);
-    ctx.arcTo(100, 25, -100, 25, 0);
-    ctx.stroke();
-
-    ctx.strokeStyle = '#f00';
-    ctx.beginPath();
-    ctx.moveTo(100, 25);
-    ctx.arcTo(200, 25, 50, 25, 0);
-    ctx.stroke();
-
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.arcTo.transformation
-  desc: arcTo joins up to the last subpath point correctly
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.fillStyle = '#0f0';
-    ctx.beginPath();
-    ctx.moveTo(0, 50);
-    ctx.translate(100, 0);
-    ctx.arcTo(50, 50, 50, 0, 50);
-    ctx.lineTo(-100, 0);
-    ctx.fill();
-
-    @assert pixel 0,0 == 0,255,0,255;
-    @assert pixel 50,0 == 0,255,0,255;
-    @assert pixel 99,0 == 0,255,0,255;
-    @assert pixel 0,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 99,25 == 0,255,0,255;
-    @assert pixel 0,49 == 0,255,0,255;
-    @assert pixel 50,49 == 0,255,0,255;
-    @assert pixel 99,49 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.arcTo.scale
-  desc: arcTo scales the curve, not just the control points
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.fillStyle = '#0f0';
-    ctx.beginPath();
-    ctx.moveTo(0, 50);
-    ctx.translate(100, 0);
-    ctx.scale(0.1, 1);
-    ctx.arcTo(50, 50, 50, 0, 50);
-    ctx.lineTo(-1000, 0);
-    ctx.fill();
-
-    @assert pixel 0,0 == 0,255,0,255;
-    @assert pixel 50,0 == 0,255,0,255;
-    @assert pixel 99,0 == 0,255,0,255;
-    @assert pixel 0,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 99,25 == 0,255,0,255;
-    @assert pixel 0,49 == 0,255,0,255;
-    @assert pixel 50,49 == 0,255,0,255;
-    @assert pixel 99,49 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.arcTo.nonfinite
-  desc: arcTo() with Infinity/NaN is ignored
-  testing:
-    - 2d.nonfinite
-  code: |
-    ctx.moveTo(0, 0);
-    ctx.lineTo(100, 0);
-    @nonfinite ctx.arcTo(<0 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>);
-    ctx.lineTo(100, 50);
-    ctx.lineTo(0, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.fill();
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 90,45 == 0,255,0,255;
-  expected: green
-
-
-- name: 2d.path.arc.empty
-  desc: arc() with an empty path does not draw a straight line to the start point
-  testing:
-    - 2d.path.arc.nonempty
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.lineWidth = 50;
-    ctx.strokeStyle = '#f00';
-    ctx.beginPath();
-    ctx.arc(200, 25, 5, 0, 2*Math.PI, true);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.arc.nonempty
-  desc: arc() with a non-empty path does draw a straight line to the start point
-  testing:
-    - 2d.path.arc.nonempty
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.lineWidth = 50;
-    ctx.strokeStyle = '#0f0';
-    ctx.beginPath();
-    ctx.moveTo(0, 25);
-    ctx.arc(200, 25, 5, 0, 2*Math.PI, true);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.arc.end
-  desc: arc() adds the end point of the arc to the subpath
-  testing:
-    - 2d.path.arc.draw
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.lineWidth = 50;
-    ctx.strokeStyle = '#0f0';
-    ctx.beginPath();
-    ctx.moveTo(-100, 0);
-    ctx.arc(-100, 0, 25, -Math.PI/2, Math.PI/2, true);
-    ctx.lineTo(100, 25);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.arc.default
-  desc: arc() with missing last argument defaults to clockwise
-  testing:
-    - 2d.path.arc.omitted
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#f00';
-    ctx.beginPath();
-    ctx.moveTo(100, 0);
-    ctx.arc(100, 0, 150, -Math.PI, Math.PI/2);
-    ctx.fill();
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.arc.angle.1
-  desc: arc() draws pi/2 .. -pi anticlockwise correctly
-  testing:
-    - 2d.path.arc.draw
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#f00';
-    ctx.beginPath();
-    ctx.moveTo(100, 0);
-    ctx.arc(100, 0, 150, Math.PI/2, -Math.PI, true);
-    ctx.fill();
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.arc.angle.2
-  desc: arc() draws -3pi/2 .. -pi anticlockwise correctly
-  testing:
-    - 2d.path.arc.draw
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#f00';
-    ctx.beginPath();
-    ctx.moveTo(100, 0);
-    ctx.arc(100, 0, 150, -3*Math.PI/2, -Math.PI, true);
-    ctx.fill();
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.arc.angle.3
-  desc: arc() wraps angles mod 2pi when anticlockwise and end > start+2pi
-  testing:
-    - 2d.path.arc.draw
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#f00';
-    ctx.beginPath();
-    ctx.moveTo(100, 0);
-    ctx.arc(100, 0, 150, (512+1/2)*Math.PI, (1024-1)*Math.PI, true);
-    ctx.fill();
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.arc.angle.4
-  desc: arc() draws a full circle when clockwise and end > start+2pi
-  testing:
-    - 2d.path.arc.draw
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.beginPath();
-    ctx.moveTo(50, 25);
-    ctx.arc(50, 25, 60, (512+1/2)*Math.PI, (1024-1)*Math.PI, false);
-    ctx.fill();
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.arc.angle.5
-  desc: arc() wraps angles mod 2pi when clockwise and start > end+2pi
-  testing:
-    - 2d.path.arc.draw
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#f00';
-    ctx.beginPath();
-    ctx.moveTo(100, 0);
-    ctx.arc(100, 0, 150, (1024-1)*Math.PI, (512+1/2)*Math.PI, false);
-    ctx.fill();
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.arc.angle.6
-  desc: arc() draws a full circle when anticlockwise and start > end+2pi
-  testing:
-    - 2d.path.arc.draw
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.beginPath();
-    ctx.moveTo(50, 25);
-    ctx.arc(50, 25, 60, (1024-1)*Math.PI, (512+1/2)*Math.PI, true);
-    ctx.fill();
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.arc.zero.1
-  desc: arc() draws nothing when startAngle = endAngle and anticlockwise
-  testing:
-    - 2d.path.arc.draw
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#f00';
-    ctx.lineWidth = 100;
-    ctx.beginPath();
-    ctx.arc(50, 25, 50, 0, 0, true);
-    ctx.stroke();
-    @assert pixel 50,20 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.arc.zero.2
-  desc: arc() draws nothing when startAngle = endAngle and clockwise
-  testing:
-    - 2d.path.arc.draw
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#f00';
-    ctx.lineWidth = 100;
-    ctx.beginPath();
-    ctx.arc(50, 25, 50, 0, 0, false);
-    ctx.stroke();
-    @assert pixel 50,20 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.arc.twopie.1
-  desc: arc() draws nothing when end = start + 2pi-e and anticlockwise
-  testing:
-    - 2d.path.arc.draw
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#f00';
-    ctx.lineWidth = 100;
-    ctx.beginPath();
-    ctx.arc(50, 25, 50, 0, 2*Math.PI - 1e-4, true);
-    ctx.stroke();
-    @assert pixel 50,20 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.arc.twopie.2
-  desc: arc() draws a full circle when end = start + 2pi-e and clockwise
-  testing:
-    - 2d.path.arc.draw
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 100;
-    ctx.beginPath();
-    ctx.arc(50, 25, 50, 0, 2*Math.PI - 1e-4, false);
-    ctx.stroke();
-    @assert pixel 50,20 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.arc.twopie.3
-  desc: arc() draws a full circle when end = start + 2pi+e and anticlockwise
-  testing:
-    - 2d.path.arc.draw
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 100;
-    ctx.beginPath();
-    ctx.arc(50, 25, 50, 0, 2*Math.PI + 1e-4, true);
-    ctx.stroke();
-    @assert pixel 50,20 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.arc.twopie.4
-  desc: arc() draws nothing when end = start + 2pi+e and clockwise
-  testing:
-    - 2d.path.arc.draw
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 100;
-    ctx.beginPath();
-    ctx.arc(50, 25, 50, 0, 2*Math.PI + 1e-4, false);
-    ctx.stroke();
-    @assert pixel 50,20 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.arc.shape.1
-  desc: arc() from 0 to pi does not draw anything in the wrong half
-  testing:
-    - 2d.path.arc.draw
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.lineWidth = 50;
-    ctx.strokeStyle = '#f00';
-    ctx.beginPath();
-    ctx.arc(50, 50, 50, 0, Math.PI, false);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 20,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.arc.shape.2
-  desc: arc() from 0 to pi draws stuff in the right half
-  testing:
-    - 2d.path.arc.draw
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.lineWidth = 100;
-    ctx.strokeStyle = '#0f0';
-    ctx.beginPath();
-    ctx.arc(50, 50, 50, 0, Math.PI, true);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 20,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.arc.shape.3
-  desc: arc() from 0 to -pi/2 does not draw anything in the wrong quadrant
-  testing:
-    - 2d.path.arc.draw
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.lineWidth = 100;
-    ctx.strokeStyle = '#f00';
-    ctx.beginPath();
-    ctx.arc(0, 50, 50, 0, -Math.PI/2, false);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255; @moz-todo
-    @assert pixel 98,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.arc.shape.4
-  desc: arc() from 0 to -pi/2 draws stuff in the right quadrant
-  testing:
-    - 2d.path.arc.draw
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.lineWidth = 150;
-    ctx.strokeStyle = '#0f0';
-    ctx.beginPath();
-    ctx.arc(-50, 50, 100, 0, -Math.PI/2, true);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.arc.shape.5
-  desc: arc() from 0 to 5pi does not draw crazy things
-  testing:
-    - 2d.path.arc.draw
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.lineWidth = 200;
-    ctx.strokeStyle = '#f00';
-    ctx.beginPath();
-    ctx.arc(300, 0, 100, 0, 5*Math.PI, false);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.arc.selfintersect.1
-  desc: arc() with lineWidth > 2*radius is drawn sensibly
-  testing:
-    - 2d.path.arc.draw
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.lineWidth = 200;
-    ctx.strokeStyle = '#f00';
-    ctx.beginPath();
-    ctx.arc(100, 50, 25, 0, -Math.PI/2, true);
-    ctx.stroke();
-    ctx.beginPath();
-    ctx.arc(0, 0, 25, 0, -Math.PI/2, true);
-    ctx.stroke();
-    @assert pixel 1,1 == 0,255,0,255; @moz-todo
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.arc.selfintersect.2
-  desc: arc() with lineWidth > 2*radius is drawn sensibly
-  testing:
-    - 2d.path.arc.draw
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.lineWidth = 180;
-    ctx.strokeStyle = '#0f0';
-    ctx.beginPath();
-    ctx.arc(-50, 50, 25, 0, -Math.PI/2, true);
-    ctx.stroke();
-    ctx.beginPath();
-    ctx.arc(100, 0, 25, 0, -Math.PI/2, true);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 90,10 == 0,255,0,255;
-    @assert pixel 97,1 == 0,255,0,255;
-    @assert pixel 97,2 == 0,255,0,255;
-    @assert pixel 97,3 == 0,255,0,255;
-    @assert pixel 2,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.arc.negative
-  desc: arc() with negative radius throws INDEX_SIZE_ERR
-  testing:
-    - 2d.path.arc.negative
-  code: |
-    @assert throws INDEX_SIZE_ERR ctx.arc(0, 0, -1, 0, 0, true);
-    var path = new Path2D();
-    @assert throws INDEX_SIZE_ERR path.arc(10, 10, -5, 0, 1, false);
-
-- name: 2d.path.arc.zeroradius
-  desc: arc() with zero radius draws a line to the start point
-  testing:
-    - 2d.path.arc.zero
-  code: |
-    ctx.fillStyle = '#f00'
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.lineWidth = 50;
-    ctx.strokeStyle = '#0f0';
-    ctx.beginPath();
-    ctx.moveTo(0, 25);
-    ctx.arc(200, 25, 0, 0, Math.PI, true);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.arc.scale.1
-  desc: Non-uniformly scaled arcs are the right shape
-  testing:
-    - 2d.path.transformation
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.scale(2, 0.5);
-    ctx.fillStyle = '#0f0';
-    ctx.beginPath();
-    ctx.arc(25, 50, 56, 0, 2*Math.PI, false);
-    ctx.fill();
-    ctx.fillStyle = '#f00';
-    ctx.beginPath();
-    ctx.moveTo(-25, 50);
-    ctx.arc(-25, 50, 24, 0, 2*Math.PI, false);
-    ctx.moveTo(75, 50);
-    ctx.arc(75, 50, 24, 0, 2*Math.PI, false);
-    ctx.moveTo(25, -25);
-    ctx.arc(25, -25, 24, 0, 2*Math.PI, false);
-    ctx.moveTo(25, 125);
-    ctx.arc(25, 125, 24, 0, 2*Math.PI, false);
-    ctx.fill();
-
-    @assert pixel 0,0 == 0,255,0,255;
-    @assert pixel 50,0 == 0,255,0,255;
-    @assert pixel 99,0 == 0,255,0,255;
-    @assert pixel 0,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 99,25 == 0,255,0,255;
-    @assert pixel 0,49 == 0,255,0,255;
-    @assert pixel 50,49 == 0,255,0,255;
-    @assert pixel 99,49 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.arc.scale.2
-  desc: Highly scaled arcs are the right shape
-  testing:
-    - 2d.path.arc.draw
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.scale(100, 100);
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 1.2;
-    ctx.beginPath();
-    ctx.arc(0, 0, 0.6, 0, Math.PI/2, false);
-    ctx.stroke();
-
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 50,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 98,25 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 50,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.arc.nonfinite
-  desc: arc() with Infinity/NaN is ignored
-  testing:
-    - 2d.nonfinite
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.moveTo(0, 0);
-    ctx.lineTo(100, 0);
-    @nonfinite ctx.arc(<0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <2*Math.PI Infinity -Infinity NaN>, <true>);
-    ctx.lineTo(100, 50);
-    ctx.lineTo(0, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.fill();
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 90,45 == 0,255,0,255;
-  expected: green
-
-
-- name: 2d.path.rect.basic
-  testing:
-    - 2d.path.rect.subpath
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.rect(0, 0, 100, 50);
-    ctx.fill();
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.rect.newsubpath
-  testing:
-    - 2d.path.rect.subpath
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.beginPath();
-    ctx.strokeStyle = '#f00';
-    ctx.lineWidth = 50;
-    ctx.moveTo(-100, 25);
-    ctx.lineTo(-50, 25);
-    ctx.rect(200, 25, 1, 1);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.rect.closed
-  testing:
-    - 2d.path.rect.closed
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 200;
-    ctx.lineJoin = 'miter';
-    ctx.rect(100, 50, 100, 100);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.rect.end.1
-  testing:
-    - 2d.path.rect.newsubpath
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 100;
-    ctx.rect(200, 100, 400, 1000);
-    ctx.lineTo(-2000, -1000);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.rect.end.2
-  testing:
-    - 2d.path.rect.newsubpath
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 450;
-    ctx.lineCap = 'round';
-    ctx.lineJoin = 'bevel';
-    ctx.rect(150, 150, 2000, 2000);
-    ctx.lineTo(160, 160);
-    ctx.stroke();
-    @assert pixel 1,1 == 0,255,0,255;
-    @assert pixel 98,1 == 0,255,0,255;
-    @assert pixel 1,48 == 0,255,0,255;
-    @assert pixel 98,48 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.rect.zero.1
-  testing:
-    - 2d.path.rect.subpath
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 100;
-    ctx.beginPath();
-    ctx.rect(0, 50, 100, 0);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.rect.zero.2
-  testing:
-    - 2d.path.rect.subpath
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 100;
-    ctx.beginPath();
-    ctx.rect(50, -100, 0, 250);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.rect.zero.3
-  testing:
-    - 2d.path.rect.subpath
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#f00';
-    ctx.lineWidth = 100;
-    ctx.beginPath();
-    ctx.rect(50, 25, 0, 0);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.rect.zero.4
-  testing:
-    - 2d.path.rect.subpath
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 50;
-    ctx.rect(100, 25, 0, 0);
-    ctx.lineTo(0, 25);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.rect.zero.5
-  testing:
-    - 2d.path.rect.subpath
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#f00';
-    ctx.lineWidth = 50;
-    ctx.moveTo(0, 0);
-    ctx.rect(100, 25, 0, 0);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.rect.zero.6
-  testing:
-    - 2d.path.rect.subpath
-  #mozilla: { bug: TODO }
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#f00';
-    ctx.lineJoin = 'miter';
-    ctx.miterLimit = 1.5;
-    ctx.lineWidth = 200;
-    ctx.beginPath();
-    ctx.rect(100, 25, 1000, 0);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255; @moz-todo
-  expected: green
-
-- name: 2d.path.rect.negative
-  testing:
-    - 2d.path.rect.subpath
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.beginPath();
-    ctx.fillStyle = '#0f0';
-    ctx.rect(0, 0, 50, 25);
-    ctx.rect(100, 0, -50, 25);
-    ctx.rect(0, 50, 50, -25);
-    ctx.rect(100, 50, -50, -25);
-    ctx.fill();
-    @assert pixel 25,12 == 0,255,0,255;
-    @assert pixel 75,12 == 0,255,0,255;
-    @assert pixel 25,37 == 0,255,0,255;
-    @assert pixel 75,37 == 0,255,0,255;
-
-- name: 2d.path.rect.winding
-  testing:
-    - 2d.path.rect.subpath
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.beginPath();
-    ctx.fillStyle = '#f00';
-    ctx.rect(0, 0, 50, 50);
-    ctx.rect(100, 50, -50, -50);
-    ctx.rect(0, 25, 100, -25);
-    ctx.rect(100, 25, -100, 25);
-    ctx.fill();
-    @assert pixel 25,12 == 0,255,0,255;
-    @assert pixel 75,12 == 0,255,0,255;
-    @assert pixel 25,37 == 0,255,0,255;
-    @assert pixel 75,37 == 0,255,0,255;
-
-- name: 2d.path.rect.selfintersect
-  #mozilla: { bug: TODO }
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 90;
-    ctx.beginPath();
-    ctx.rect(45, 20, 10, 10);
-    ctx.stroke();
-    @assert pixel 50,25 == 0,255,0,255; @moz-todo
-  expected: green
-
-- name: 2d.path.rect.nonfinite
-  desc: rect() with Infinity/NaN is ignored
-  testing:
-    - 2d.nonfinite
-  code: |
-    ctx.moveTo(0, 0);
-    ctx.lineTo(100, 0);
-    @nonfinite ctx.rect(<0 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>, <1 Infinity -Infinity NaN>, <1 Infinity -Infinity NaN>);
-    ctx.lineTo(100, 50);
-    ctx.lineTo(0, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.fill();
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 90,45 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.fill.overlap
-  testing:
-    - 2d.path.fill.basic
-  code: |
-    ctx.fillStyle = '#000';
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
-    ctx.rect(0, 0, 100, 50);
-    ctx.closePath();
-    ctx.rect(10, 10, 80, 30);
-    ctx.fill();
-
-    @assert pixel 50,25 ==~ 0,127,0,255 +/- 1;
-  expected: |
-    size 100 50
-    cr.set_source_rgb(0, 0.5, 0)
-    cr.rectangle(0, 0, 100, 50)
-    cr.fill()
-
-- name: 2d.path.fill.winding.add
-  testing:
-    - 2d.path.fill.basic
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.fillStyle = '#0f0';
-    ctx.moveTo(-10, -10);
-    ctx.lineTo(110, -10);
-    ctx.lineTo(110, 60);
-    ctx.lineTo(-10, 60);
-    ctx.lineTo(-10, -10);
-    ctx.lineTo(0, 0);
-    ctx.lineTo(100, 0);
-    ctx.lineTo(100, 50);
-    ctx.lineTo(0, 50);
-    ctx.fill();
-
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.fill.winding.subtract.1
-  testing:
-    - 2d.path.fill.basic
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.fillStyle = '#f00';
-    ctx.moveTo(-10, -10);
-    ctx.lineTo(110, -10);
-    ctx.lineTo(110, 60);
-    ctx.lineTo(-10, 60);
-    ctx.lineTo(-10, -10);
-    ctx.lineTo(0, 0);
-    ctx.lineTo(0, 50);
-    ctx.lineTo(100, 50);
-    ctx.lineTo(100, 0);
-    ctx.fill();
-
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.fill.winding.subtract.2
-  testing:
-    - 2d.path.fill.basic
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.fillStyle = '#f00';
-    ctx.moveTo(-10, -10);
-    ctx.lineTo(110, -10);
-    ctx.lineTo(110, 60);
-    ctx.lineTo(-10, 60);
-    ctx.moveTo(0, 0);
-    ctx.lineTo(0, 50);
-    ctx.lineTo(100, 50);
-    ctx.lineTo(100, 0);
-    ctx.fill();
-
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.fill.winding.subtract.3
-  testing:
-    - 2d.path.fill.basic
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.fillStyle = '#0f0';
-    ctx.moveTo(-10, -10);
-    ctx.lineTo(110, -10);
-    ctx.lineTo(110, 60);
-    ctx.lineTo(-10, 60);
-    ctx.lineTo(-10, -10);
-    ctx.lineTo(-20, -20);
-    ctx.lineTo(120, -20);
-    ctx.lineTo(120, 70);
-    ctx.lineTo(-20, 70);
-    ctx.lineTo(-20, -20);
-    ctx.lineTo(0, 0);
-    ctx.lineTo(0, 50);
-    ctx.lineTo(100, 50);
-    ctx.lineTo(100, 0);
-    ctx.fill();
-
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.fill.closed.basic
-  testing:
-    - 2d.path.fill.closed
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.fillStyle = '#0f0';
-    ctx.moveTo(0, 0);
-    ctx.lineTo(100, 0);
-    ctx.lineTo(100, 50);
-    ctx.lineTo(0, 50);
-    ctx.fill();
-
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.fill.closed.unaffected
-  testing:
-    - 2d.path.fill.closed
-  code: |
-    ctx.fillStyle = '#00f';
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.moveTo(0, 0);
-    ctx.lineTo(100, 0);
-    ctx.lineTo(100, 50);
-    ctx.fillStyle = '#f00';
-    ctx.fill();
-    ctx.lineTo(0, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.fill();
-
-    @assert pixel 90,10 == 0,255,0,255;
-    @assert pixel 10,40 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.stroke.overlap
-  desc: Stroked subpaths are combined before being drawn
-  testing:
-    - 2d.path.stroke.basic
-  code: |
-    ctx.fillStyle = '#000';
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.strokeStyle = 'rgba(0, 255, 0, 0.5)';
-    ctx.lineWidth = 50;
-    ctx.moveTo(0, 20);
-    ctx.lineTo(100, 20);
-    ctx.moveTo(0, 30);
-    ctx.lineTo(100, 30);
-    ctx.stroke();
-
-    @assert pixel 50,25 ==~ 0,127,0,255 +/- 1;
-  expected: |
-    size 100 50
-    cr.set_source_rgb(0, 0.5, 0)
-    cr.rectangle(0, 0, 100, 50)
-    cr.fill()
-
-- name: 2d.path.stroke.union
-  desc: Strokes in opposite directions are unioned, not subtracted
-  testing:
-    - 2d.path.stroke.basic
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.strokeStyle = '#0f0';
-    ctx.lineWidth = 40;
-    ctx.moveTo(0, 10);
-    ctx.lineTo(100, 10);
-    ctx.moveTo(100, 40);
-    ctx.lineTo(0, 40);
-    ctx.stroke();
-
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.stroke.unaffected
-  desc: Stroking does not start a new path or subpath
-  testing:
-    - 2d.path.stroke.basic
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.lineWidth = 50;
-    ctx.moveTo(-100, 25);
-    ctx.lineTo(-100, -100);
-    ctx.lineTo(200, -100);
-    ctx.lineTo(200, 25);
-    ctx.strokeStyle = '#f00';
-    ctx.stroke();
-
-    ctx.closePath();
-    ctx.strokeStyle = '#0f0';
-    ctx.stroke();
-
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.stroke.scale1
-  desc: Stroke line widths are scaled by the current transformation matrix
-  testing:
-    - 2d.path.transformation
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.beginPath();
-    ctx.rect(25, 12.5, 50, 25);
-    ctx.save();
-    ctx.scale(50, 25);
-    ctx.strokeStyle = '#0f0';
-    ctx.stroke();
-    ctx.restore();
-
-    ctx.beginPath();
-    ctx.rect(-25, -12.5, 150, 75);
-    ctx.save();
-    ctx.scale(50, 25);
-    ctx.strokeStyle = '#f00';
-    ctx.stroke();
-    ctx.restore();
-
-    @assert pixel 0,0 == 0,255,0,255;
-    @assert pixel 50,0 == 0,255,0,255;
-    @assert pixel 99,0 == 0,255,0,255;
-    @assert pixel 0,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 99,25 == 0,255,0,255;
-    @assert pixel 0,49 == 0,255,0,255;
-    @assert pixel 50,49 == 0,255,0,255;
-    @assert pixel 99,49 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.stroke.scale2
-  desc: Stroke line widths are scaled by the current transformation matrix
-  testing:
-    - 2d.path.transformation
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.beginPath();
-    ctx.rect(25, 12.5, 50, 25);
-    ctx.save();
-    ctx.rotate(Math.PI/2);
-    ctx.scale(25, 50);
-    ctx.strokeStyle = '#0f0';
-    ctx.stroke();
-    ctx.restore();
-
-    ctx.beginPath();
-    ctx.rect(-25, -12.5, 150, 75);
-    ctx.save();
-    ctx.rotate(Math.PI/2);
-    ctx.scale(25, 50);
-    ctx.strokeStyle = '#f00';
-    ctx.stroke();
-    ctx.restore();
-
-    @assert pixel 0,0 == 0,255,0,255;
-    @assert pixel 50,0 == 0,255,0,255;
-    @assert pixel 99,0 == 0,255,0,255;
-    @assert pixel 0,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 99,25 == 0,255,0,255;
-    @assert pixel 0,49 == 0,255,0,255;
-    @assert pixel 50,49 == 0,255,0,255;
-    @assert pixel 99,49 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.stroke.skew
-  desc: Strokes lines are skewed by the current transformation matrix
-  testing:
-    - 2d.path.transformation
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.save();
-    ctx.beginPath();
-    ctx.moveTo(49, -50);
-    ctx.lineTo(201, -50);
-    ctx.rotate(Math.PI/4);
-    ctx.scale(1, 283);
-    ctx.strokeStyle = '#0f0';
-    ctx.stroke();
-    ctx.restore();
-
-    ctx.save();
-    ctx.beginPath();
-    ctx.translate(-150, 0);
-    ctx.moveTo(49, -50);
-    ctx.lineTo(199, -50);
-    ctx.rotate(Math.PI/4);
-    ctx.scale(1, 142);
-    ctx.strokeStyle = '#f00';
-    ctx.stroke();
-    ctx.restore();
-
-    ctx.save();
-    ctx.beginPath();
-    ctx.translate(-150, 0);
-    ctx.moveTo(49, -50);
-    ctx.lineTo(199, -50);
-    ctx.rotate(Math.PI/4);
-    ctx.scale(1, 142);
-    ctx.strokeStyle = '#f00';
-    ctx.stroke();
-    ctx.restore();
-
-    @assert pixel 0,0 == 0,255,0,255;
-    @assert pixel 50,0 == 0,255,0,255;
-    @assert pixel 99,0 == 0,255,0,255;
-    @assert pixel 0,25 == 0,255,0,255;
-    @assert pixel 50,25 == 0,255,0,255;
-    @assert pixel 99,25 == 0,255,0,255;
-    @assert pixel 0,49 == 0,255,0,255;
-    @assert pixel 50,49 == 0,255,0,255;
-    @assert pixel 99,49 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.stroke.empty
-  desc: Empty subpaths are not stroked
-  testing:
-    - 2d.path.stroke.empty
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.strokeStyle = '#f00';
-    ctx.lineWidth = 100;
-    ctx.lineCap = 'round';
-    ctx.lineJoin = 'round';
-
-    ctx.beginPath();
-    ctx.moveTo(40, 25);
-    ctx.moveTo(60, 25);
-    ctx.stroke();
-
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.stroke.prune.line
-  desc: Zero-length line segments from lineTo are removed before stroking
-  testing:
-    - 2d.path.stroke.prune
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.strokeStyle = '#f00';
-    ctx.lineWidth = 100;
-    ctx.lineCap = 'round';
-    ctx.lineJoin = 'round';
-
-    ctx.beginPath();
-    ctx.moveTo(50, 25);
-    ctx.lineTo(50, 25);
-    ctx.stroke();
-
-    @assert pixel 50,25 == 0,255,0,255; @moz-todo
-  expected: green
-
-- name: 2d.path.stroke.prune.closed
-  desc: Zero-length line segments from closed paths are removed before stroking
-  testing:
-    - 2d.path.stroke.prune
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.strokeStyle = '#f00';
-    ctx.lineWidth = 100;
-    ctx.lineCap = 'round';
-    ctx.lineJoin = 'round';
-
-    ctx.beginPath();
-    ctx.moveTo(50, 25);
-    ctx.lineTo(50, 25);
-    ctx.closePath();
-    ctx.stroke();
-
-    @assert pixel 50,25 == 0,255,0,255; @moz-todo
-  expected: green
-
-- name: 2d.path.stroke.prune.curve
-  desc: Zero-length line segments from quadraticCurveTo and bezierCurveTo are removed before stroking
-  testing:
-    - 2d.path.stroke.prune
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.strokeStyle = '#f00';
-    ctx.lineWidth = 100;
-    ctx.lineCap = 'round';
-    ctx.lineJoin = 'round';
-
-    ctx.beginPath();
-    ctx.moveTo(50, 25);
-    ctx.quadraticCurveTo(50, 25, 50, 25);
-    ctx.stroke();
-
-    ctx.beginPath();
-    ctx.moveTo(50, 25);
-    ctx.bezierCurveTo(50, 25, 50, 25, 50, 25);
-    ctx.stroke();
-
-    @assert pixel 50,25 == 0,255,0,255; @moz-todo
-  expected: green
-
-- name: 2d.path.stroke.prune.arc
-  desc: Zero-length line segments from arcTo and arc are removed before stroking
-  testing:
-    - 2d.path.stroke.prune
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.strokeStyle = '#f00';
-    ctx.lineWidth = 100;
-    ctx.lineCap = 'round';
-    ctx.lineJoin = 'round';
-
-    ctx.beginPath();
-    ctx.moveTo(50, 25);
-    ctx.arcTo(50, 25, 150, 25, 10);
-    ctx.stroke();
-
-    ctx.beginPath();
-    ctx.moveTo(60, 25);
-    ctx.arc(50, 25, 10, 0, 0, false);
-    ctx.stroke();
-
-    @assert pixel 50,25 == 0,255,0,255; @moz-todo
-  expected: green
-
-- name: 2d.path.stroke.prune.rect
-  desc: Zero-length line segments from rect and strokeRect are removed before stroking
-  testing:
-    - 2d.path.stroke.prune
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.strokeStyle = '#f00';
-    ctx.lineWidth = 100;
-    ctx.lineCap = 'round';
-    ctx.lineJoin = 'round';
-
-    ctx.beginPath();
-    ctx.rect(50, 25, 0, 0);
-    ctx.stroke();
-
-    ctx.strokeRect(50, 25, 0, 0);
-
-    @assert pixel 50,25 == 0,255,0,255; @moz-todo
-  expected: green
-
-- name: 2d.path.stroke.prune.corner
-  desc: Zero-length line segments are removed before stroking with miters
-  testing:
-    - 2d.path.stroke.prune
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.strokeStyle = '#f00';
-    ctx.lineWidth = 400;
-    ctx.lineJoin = 'miter';
-    ctx.miterLimit = 1.4;
-
-    ctx.beginPath();
-    ctx.moveTo(-1000, 200);
-    ctx.lineTo(-100, 200);
-    ctx.lineTo(-100, 200);
-    ctx.lineTo(-100, 200);
-    ctx.lineTo(-100, 1000);
-    ctx.stroke();
-
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-
-- name: 2d.path.transformation.basic
-  testing:
-    - 2d.path.transformation
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.translate(-100, 0);
-    ctx.rect(100, 0, 100, 50);
-    ctx.translate(0, -100);
-    ctx.fillStyle = '#0f0';
-    ctx.fill();
-
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.transformation.multiple
-  # TODO: change this name
-  desc: Transformations are applied while building paths, not when drawing
-  testing:
-    - 2d.path.transformation
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.fillStyle = '#f00';
-    ctx.translate(-100, 0);
-    ctx.rect(0, 0, 100, 50);
-    ctx.fill();
-    ctx.translate(100, 0);
-    ctx.fill();
-
-    ctx.beginPath();
-    ctx.strokeStyle = '#f00';
-    ctx.lineWidth = 50;
-    ctx.translate(0, -50);
-    ctx.moveTo(0, 25);
-    ctx.lineTo(100, 25);
-    ctx.stroke();
-    ctx.translate(0, 50);
-    ctx.stroke();
-
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.transformation.changing
-  desc: Transformations are applied while building paths, not when drawing
-  testing:
-    - 2d.path.transformation
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.moveTo(0, 0);
-    ctx.translate(100, 0);
-    ctx.lineTo(0, 0);
-    ctx.translate(0, 50);
-    ctx.lineTo(0, 0);
-    ctx.translate(-100, 0);
-    ctx.lineTo(0, 0);
-    ctx.translate(1000, 1000);
-    ctx.rotate(Math.PI/2);
-    ctx.scale(0.1, 0.1);
-    ctx.fill();
-
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-
-- name: 2d.path.clip.empty
-  testing:
-    - 2d.path.clip.basic
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.beginPath();
-    ctx.clip();
-
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.clip.basic.1
-  testing:
-    - 2d.path.clip.basic
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.beginPath();
-    ctx.rect(0, 0, 100, 50);
-    ctx.clip();
-
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.clip.basic.2
-  testing:
-    - 2d.path.clip.basic
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.beginPath();
-    ctx.rect(-100, 0, 100, 50);
-    ctx.clip();
-
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.clip.intersect
-  testing:
-    - 2d.path.clip.basic
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.beginPath();
-    ctx.rect(0, 0, 50, 50);
-    ctx.clip();
-    ctx.beginPath();
-    ctx.rect(50, 0, 50, 50)
-    ctx.clip();
-
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.clip.winding.1
-  testing:
-    - 2d.path.clip.basic
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.beginPath();
-    ctx.moveTo(-10, -10);
-    ctx.lineTo(110, -10);
-    ctx.lineTo(110, 60);
-    ctx.lineTo(-10, 60);
-    ctx.lineTo(-10, -10);
-    ctx.lineTo(0, 0);
-    ctx.lineTo(0, 50);
-    ctx.lineTo(100, 50);
-    ctx.lineTo(100, 0);
-    ctx.clip();
-
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.clip.winding.2
-  testing:
-    - 2d.path.clip.basic
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.beginPath();
-    ctx.moveTo(-10, -10);
-    ctx.lineTo(110, -10);
-    ctx.lineTo(110, 60);
-    ctx.lineTo(-10, 60);
-    ctx.lineTo(-10, -10);
-    ctx.clip();
-
-    ctx.beginPath();
-    ctx.moveTo(0, 0);
-    ctx.lineTo(0, 50);
-    ctx.lineTo(100, 50);
-    ctx.lineTo(100, 0);
-    ctx.lineTo(0, 0);
-    ctx.clip();
-
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.path.clip.unaffected
-  testing:
-    - 2d.path.clip.closed
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-
-    ctx.fillStyle = '#0f0';
-
-    ctx.beginPath();
-    ctx.moveTo(0, 0);
-    ctx.lineTo(0, 50);
-    ctx.lineTo(100, 50);
-    ctx.lineTo(100, 0);
-    ctx.clip();
-
-    ctx.lineTo(0, 0);
-    ctx.fill();
-
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-
-
-- name: 2d.path.isPointInPath.basic.1
-  desc: isPointInPath() detects whether the point is inside the path
-  testing:
-    - 2d.path.isPointInPath
-  code: |
-    ctx.rect(0, 0, 20, 20);
-    @assert ctx.isPointInPath(10, 10) === true;
-    @assert ctx.isPointInPath(30, 10) === false;
-
-- name: 2d.path.isPointInPath.basic.2
-  desc: isPointInPath() detects whether the point is inside the path
-  testing:
-    - 2d.path.isPointInPath
-  code: |
-    ctx.rect(20, 0, 20, 20);
-    @assert ctx.isPointInPath(10, 10) === false;
-    @assert ctx.isPointInPath(30, 10) === true;
-
-- name: 2d.path.isPointInPath.edge
-  desc: isPointInPath() counts points on the path as being inside
-  testing:
-    - 2d.path.isPointInPath.edge
-  code: |
-    ctx.rect(0, 0, 20, 20);
-    @assert ctx.isPointInPath(0, 0) === true;
-    @assert ctx.isPointInPath(10, 0) === true;
-    @assert ctx.isPointInPath(20, 0) === true;
-    @assert ctx.isPointInPath(20, 10) === true;
-    @assert ctx.isPointInPath(20, 20) === true;
-    @assert ctx.isPointInPath(10, 20) === true;
-    @assert ctx.isPointInPath(0, 20) === true;
-    @assert ctx.isPointInPath(0, 10) === true;
-    @assert ctx.isPointInPath(10, -0.01) === false;
-    @assert ctx.isPointInPath(10, 20.01) === false;
-    @assert ctx.isPointInPath(-0.01, 10) === false;
-    @assert ctx.isPointInPath(20.01, 10) === false;
-
-- name: 2d.path.isPointInPath.empty
-  desc: isPointInPath() works when there is no path
-  testing:
-    - 2d.path.isPointInPath
-  code: |
-    @assert ctx.isPointInPath(0, 0) === false;
-
-- name: 2d.path.isPointInPath.subpath
-  desc: isPointInPath() uses the current path, not just the subpath
-  testing:
-    - 2d.path.isPointInPath
-  code: |
-    ctx.rect(0, 0, 20, 20);
-    ctx.beginPath();
-    ctx.rect(20, 0, 20, 20);
-    ctx.closePath();
-    ctx.rect(40, 0, 20, 20);
-    @assert ctx.isPointInPath(10, 10) === false;
-    @assert ctx.isPointInPath(30, 10) === true;
-    @assert ctx.isPointInPath(50, 10) === true;
-
-- name: 2d.path.isPointInPath.outside
-  desc: isPointInPath() works on paths outside the canvas
-  testing:
-    - 2d.path.isPointInPath
-  code: |
-    ctx.rect(0, -100, 20, 20);
-    ctx.rect(20, -10, 20, 20);
-    @assert ctx.isPointInPath(10, -110) === false;
-    @assert ctx.isPointInPath(10, -90) === true;
-    @assert ctx.isPointInPath(10, -70) === false;
-    @assert ctx.isPointInPath(30, -20) === false;
-    @assert ctx.isPointInPath(30, 0) === true;
-    @assert ctx.isPointInPath(30, 20) === false;
-
-- name: 2d.path.isPointInPath.unclosed
-  desc: isPointInPath() works on unclosed subpaths
-  testing:
-    - 2d.path.isPointInPath
-  code: |
-    ctx.moveTo(0, 0);
-    ctx.lineTo(20, 0);
-    ctx.lineTo(20, 20);
-    ctx.lineTo(0, 20);
-    @assert ctx.isPointInPath(10, 10) === true;
-    @assert ctx.isPointInPath(30, 10) === false;
-
-- name: 2d.path.isPointInPath.arc
-  desc: isPointInPath() works on arcs
-  testing:
-    - 2d.path.isPointInPath
-  code: |
-    ctx.arc(50, 25, 10, 0, Math.PI, false);
-    @assert ctx.isPointInPath(50, 10) === false;
-    @assert ctx.isPointInPath(50, 20) === false;
-    @assert ctx.isPointInPath(50, 30) === true;
-    @assert ctx.isPointInPath(50, 40) === false;
-    @assert ctx.isPointInPath(30, 20) === false;
-    @assert ctx.isPointInPath(70, 20) === false;
-    @assert ctx.isPointInPath(30, 30) === false;
-    @assert ctx.isPointInPath(70, 30) === false;
-
-- name: 2d.path.isPointInPath.bigarc
-  desc: isPointInPath() works on unclosed arcs larger than 2pi
-  opera: { bug: 320937 }
-  testing:
-    - 2d.path.isPointInPath
-  code: |
-    ctx.arc(50, 25, 10, 0, 7, false);
-    @assert ctx.isPointInPath(50, 10) === false;
-    @assert ctx.isPointInPath(50, 20) === true;
-    @assert ctx.isPointInPath(50, 30) === true;
-    @assert ctx.isPointInPath(50, 40) === false;
-    @assert ctx.isPointInPath(30, 20) === false;
-    @assert ctx.isPointInPath(70, 20) === false;
-    @assert ctx.isPointInPath(30, 30) === false;
-    @assert ctx.isPointInPath(70, 30) === false;
-
-- name: 2d.path.isPointInPath.bezier
-  desc: isPointInPath() works on Bezier curves
-  testing:
-    - 2d.path.isPointInPath
-  code: |
-    ctx.moveTo(25, 25);
-    ctx.bezierCurveTo(50, -50, 50, 100, 75, 25);
-    @assert ctx.isPointInPath(25, 20) === false;
-    @assert ctx.isPointInPath(25, 30) === false;
-    @assert ctx.isPointInPath(30, 20) === true;
-    @assert ctx.isPointInPath(30, 30) === false;
-    @assert ctx.isPointInPath(40, 2) === false;
-    @assert ctx.isPointInPath(40, 20) === true;
-    @assert ctx.isPointInPath(40, 30) === false;
-    @assert ctx.isPointInPath(40, 47) === false;
-    @assert ctx.isPointInPath(45, 20) === true;
-    @assert ctx.isPointInPath(45, 30) === false;
-    @assert ctx.isPointInPath(55, 20) === false;
-    @assert ctx.isPointInPath(55, 30) === true;
-    @assert ctx.isPointInPath(60, 2) === false;
-    @assert ctx.isPointInPath(60, 20) === false;
-    @assert ctx.isPointInPath(60, 30) === true;
-    @assert ctx.isPointInPath(60, 47) === false;
-    @assert ctx.isPointInPath(70, 20) === false;
-    @assert ctx.isPointInPath(70, 30) === true;
-    @assert ctx.isPointInPath(75, 20) === false;
-    @assert ctx.isPointInPath(75, 30) === false;
-
-- name: 2d.path.isPointInPath.winding
-  desc: isPointInPath() uses the non-zero winding number rule
-  testing:
-    - 2d.path.isPointInPath
-  code: |
-    // Create a square ring, using opposite windings to make a hole in the centre
-    ctx.moveTo(0, 0);
-    ctx.lineTo(50, 0);
-    ctx.lineTo(50, 50);
-    ctx.lineTo(0, 50);
-    ctx.lineTo(0, 0);
-    ctx.lineTo(10, 10);
-    ctx.lineTo(10, 40);
-    ctx.lineTo(40, 40);
-    ctx.lineTo(40, 10);
-    ctx.lineTo(10, 10);
-
-    @assert ctx.isPointInPath(5, 5) === true;
-    @assert ctx.isPointInPath(25, 5) === true;
-    @assert ctx.isPointInPath(45, 5) === true;
-    @assert ctx.isPointInPath(5, 25) === true;
-    @assert ctx.isPointInPath(25, 25) === false;
-    @assert ctx.isPointInPath(45, 25) === true;
-    @assert ctx.isPointInPath(5, 45) === true;
-    @assert ctx.isPointInPath(25, 45) === true;
-    @assert ctx.isPointInPath(45, 45) === true;
-
-- name: 2d.path.isPointInPath.transform.1
-  desc: isPointInPath() handles transformations correctly
-  testing:
-    - 2d.path.isPointInPath
-  code: |
-    ctx.translate(50, 0);
-    ctx.rect(0, 0, 20, 20);
-    @assert ctx.isPointInPath(-40, 10) === false;
-    @assert ctx.isPointInPath(10, 10) === false;
-    @assert ctx.isPointInPath(49, 10) === false;
-    @assert ctx.isPointInPath(51, 10) === true;
-    @assert ctx.isPointInPath(69, 10) === true;
-    @assert ctx.isPointInPath(71, 10) === false;
-
-- name: 2d.path.isPointInPath.transform.2
-  desc: isPointInPath() handles transformations correctly
-  testing:
-    - 2d.path.isPointInPath
-  code: |
-    ctx.rect(50, 0, 20, 20);
-    ctx.translate(50, 0);
-    @assert ctx.isPointInPath(-40, 10) === false;
-    @assert ctx.isPointInPath(10, 10) === false;
-    @assert ctx.isPointInPath(49, 10) === false;
-    @assert ctx.isPointInPath(51, 10) === true;
-    @assert ctx.isPointInPath(69, 10) === true;
-    @assert ctx.isPointInPath(71, 10) === false;
-
-- name: 2d.path.isPointInPath.transform.3
-  desc: isPointInPath() handles transformations correctly
-  testing:
-    - 2d.path.isPointInPath
-  code: |
-    ctx.scale(-1, 1);
-    ctx.rect(-70, 0, 20, 20);
-    @assert ctx.isPointInPath(-40, 10) === false;
-    @assert ctx.isPointInPath(10, 10) === false;
-    @assert ctx.isPointInPath(49, 10) === false;
-    @assert ctx.isPointInPath(51, 10) === true;
-    @assert ctx.isPointInPath(69, 10) === true;
-    @assert ctx.isPointInPath(71, 10) === false;
-
-- name: 2d.path.isPointInPath.transform.4
-  desc: isPointInPath() handles transformations correctly
-  testing:
-    - 2d.path.isPointInPath
-  code: |
-    ctx.translate(50, 0);
-    ctx.rect(50, 0, 20, 20);
-    ctx.translate(0, 50);
-    @assert ctx.isPointInPath(60, 10) === false;
-    @assert ctx.isPointInPath(110, 10) === true;
-    @assert ctx.isPointInPath(110, 60) === false;
-
-- name: 2d.path.isPointInPath.nonfinite
-  desc: isPointInPath() returns false for non-finite arguments
-  testing:
-    - 2d.path.isPointInPath.nonfinite
-  code: |
-    ctx.rect(-100, -50, 200, 100);
-    @assert ctx.isPointInPath(Infinity, 0) === false;
-    @assert ctx.isPointInPath(-Infinity, 0) === false;
-    @assert ctx.isPointInPath(NaN, 0) === false;
-    @assert ctx.isPointInPath(0, Infinity) === false;
-    @assert ctx.isPointInPath(0, -Infinity) === false;
-    @assert ctx.isPointInPath(0, NaN) === false;
-    @assert ctx.isPointInPath(NaN, NaN) === false;
-
-
-- name: 2d.path.isPointInStroke.scaleddashes
-  desc: isPointInStroke() should return correct results on dashed paths at high scale factors
-  testing:
-    - 2d.path.isPointInStroke
-  code: |
-    var scale = 20;
-    ctx.setLineDash([10, 21.4159]); // dash from t=0 to t=10 along the circle
-    ctx.scale(scale, scale);
-    ctx.ellipse(6, 10, 5, 5, 0, 2*Math.PI, false);
-    ctx.stroke();
-
-    // hit-test the beginning of the dash (t=0)
-    @assert ctx.isPointInStroke(11*scale, 10*scale) === true;
-    // hit-test the middle of the dash (t=5)
-    @assert ctx.isPointInStroke(8.70*scale, 14.21*scale) === true;
-    // hit-test the end of the dash (t=9.8)
-    @assert ctx.isPointInStroke(4.10*scale, 14.63*scale) === true;
-    // hit-test past the end of the dash (t=10.2)
-    @assert ctx.isPointInStroke(3.74*scale, 14.46*scale) === false;
-
-
-- name: 2d.drawImage.3arg
-  testing:
-    - 2d.drawImage.defaultsource
-    - 2d.drawImage.defaultdest
-  images:
-    - red.png
-    - green.png
-  code: |
-    ctx.drawImage(document.getElementById('green.png'), 0, 0);
-    ctx.drawImage(document.getElementById('red.png'), -100, 0);
-    ctx.drawImage(document.getElementById('red.png'), 100, 0);
-    ctx.drawImage(document.getElementById('red.png'), 0, -50);
-    ctx.drawImage(document.getElementById('red.png'), 0, 50);
-
-    @assert pixel 0,0 ==~ 0,255,0,255;
-    @assert pixel 99,0 ==~ 0,255,0,255;
-    @assert pixel 0,49 ==~ 0,255,0,255;
-    @assert pixel 99,49 ==~ 0,255,0,255;
-  expected: green
-
-- name: 2d.drawImage.5arg
-  testing:
-    - 2d.drawImage.defaultsource
-  images:
-    - red.png
-    - green.png
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.drawImage(document.getElementById('green.png'), 50, 0, 50, 50);
-    ctx.drawImage(document.getElementById('red.png'), 0, 0, 50, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 50, 50);
-
-    @assert pixel 0,0 ==~ 0,255,0,255;
-    @assert pixel 99,0 ==~ 0,255,0,255;
-    @assert pixel 0,49 ==~ 0,255,0,255;
-    @assert pixel 99,49 ==~ 0,255,0,255;
-  expected: green
-
-- name: 2d.drawImage.9arg.basic
-  testing:
-    - 2d.drawImage.paint
-  images:
-    - green.png
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.drawImage(document.getElementById('green.png'), 0, 0, 100, 50, 0, 0, 100, 50);
-    @assert pixel 0,0 ==~ 0,255,0,255;
-    @assert pixel 99,0 ==~ 0,255,0,255;
-    @assert pixel 0,49 ==~ 0,255,0,255;
-    @assert pixel 99,49 ==~ 0,255,0,255;
-  expected: green
-
-- name: 2d.drawImage.9arg.sourcepos
-  testing:
-    - 2d.drawImage.paint
-  images:
-    - rgrg-256x256.png
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.drawImage(document.getElementById('rgrg-256x256.png'), 140, 20, 100, 50, 0, 0, 100, 50);
-    @assert pixel 0,0 ==~ 0,255,0,255;
-    @assert pixel 99,0 ==~ 0,255,0,255;
-    @assert pixel 0,49 ==~ 0,255,0,255;
-    @assert pixel 99,49 ==~ 0,255,0,255;
-  expected: green
-
-- name: 2d.drawImage.9arg.sourcesize
-  testing:
-    - 2d.drawImage.paint
-  images:
-    - rgrg-256x256.png
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.drawImage(document.getElementById('rgrg-256x256.png'), 0, 0, 256, 256, 0, 0, 100, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 51, 26);
-    ctx.fillRect(49, 24, 51, 26);
-    @assert pixel 0,0 ==~ 0,255,0,255;
-    @assert pixel 99,0 ==~ 0,255,0,255;
-    @assert pixel 0,49 ==~ 0,255,0,255;
-    @assert pixel 99,49 ==~ 0,255,0,255;
-    @assert pixel 20,20 ==~ 0,255,0,255;
-    @assert pixel 80,20 ==~ 0,255,0,255;
-    @assert pixel 20,30 ==~ 0,255,0,255;
-    @assert pixel 80,30 ==~ 0,255,0,255;
-  expected: green
-
-- name: 2d.drawImage.9arg.destpos
-  testing:
-    - 2d.drawImage.paint
-  images:
-    - red.png
-    - green.png
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.drawImage(document.getElementById('green.png'), 0, 0, 100, 50, 0, 0, 100, 50);
-    ctx.drawImage(document.getElementById('red.png'), 0, 0, 100, 50, -100, 0, 100, 50);
-    ctx.drawImage(document.getElementById('red.png'), 0, 0, 100, 50, 100, 0, 100, 50);
-    ctx.drawImage(document.getElementById('red.png'), 0, 0, 100, 50, 0, -50, 100, 50);
-    ctx.drawImage(document.getElementById('red.png'), 0, 0, 100, 50, 0, 50, 100, 50);
-    @assert pixel 0,0 ==~ 0,255,0,255;
-    @assert pixel 99,0 ==~ 0,255,0,255;
-    @assert pixel 0,49 ==~ 0,255,0,255;
-    @assert pixel 99,49 ==~ 0,255,0,255;
-  expected: green
-
-- name: 2d.drawImage.9arg.destsize
-  testing:
-    - 2d.drawImage.paint
-  images:
-    - red.png
-    - green.png
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.drawImage(document.getElementById('green.png'), 1, 1, 1, 1, 0, 0, 100, 50);
-    ctx.drawImage(document.getElementById('red.png'), 0, 0, 100, 50, -50, 0, 50, 50);
-    ctx.drawImage(document.getElementById('red.png'), 0, 0, 100, 50, 100, 0, 50, 50);
-    ctx.drawImage(document.getElementById('red.png'), 0, 0, 100, 50, 0, -25, 100, 25);
-    ctx.drawImage(document.getElementById('red.png'), 0, 0, 100, 50, 0, 50, 100, 25);
-    @assert pixel 0,0 ==~ 0,255,0,255;
-    @assert pixel 99,0 ==~ 0,255,0,255;
-    @assert pixel 0,49 ==~ 0,255,0,255;
-    @assert pixel 99,49 ==~ 0,255,0,255;
-  expected: green
-
-- name: 2d.drawImage.canvas
-  testing:
-    - 2d.drawImage.paint
-  code: |
-    var canvas2 = document.createElement('canvas');
-    canvas2.width = 100;
-    canvas2.height = 50;
-    var ctx2 = canvas2.getContext('2d');
-    ctx2.fillStyle = '#0f0';
-    ctx2.fillRect(0, 0, 100, 50);
-
-    ctx.fillStyle = '#f00';
-    ctx.drawImage(canvas2, 0, 0);
-
-    @assert pixel 0,0 ==~ 0,255,0,255;
-    @assert pixel 99,0 ==~ 0,255,0,255;
-    @assert pixel 0,49 ==~ 0,255,0,255;
-    @assert pixel 99,49 ==~ 0,255,0,255;
-
-    ctx.drawImage(document.createElement('canvas'), 0, 0);
-
-    @assert pixel 0,0 ==~ 0,255,0,255;
-    @assert pixel 99,0 ==~ 0,255,0,255;
-    @assert pixel 0,49 ==~ 0,255,0,255;
-    @assert pixel 99,49 ==~ 0,255,0,255;
-  expected: green
-
-- name: 2d.drawImage.self.1
-  testing:
-    - 2d.drawImage.self
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 50, 50);
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(50, 0, 50, 50);
-    ctx.drawImage(canvas, 50, 0);
-
-    @assert pixel 0,0 ==~ 0,255,0,255;
-    @assert pixel 99,0 ==~ 0,255,0,255;
-    @assert pixel 0,49 ==~ 0,255,0,255;
-    @assert pixel 99,49 ==~ 0,255,0,255;
-  expected: green
-
-- name: 2d.drawImage.self.2
-  testing:
-    - 2d.drawImage.self
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 1, 100, 49);
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 1);
-    ctx.drawImage(canvas, 0, 1);
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 2);
-
-    @assert pixel 0,0 ==~ 0,255,0,255;
-    @assert pixel 99,0 ==~ 0,255,0,255;
-    @assert pixel 0,49 ==~ 0,255,0,255;
-    @assert pixel 99,49 ==~ 0,255,0,255;
-  expected: green
-
-- name: 2d.drawImage.null
-  testing:
-    - 2d.drawImage.IDL
-  code: |
-    @assert throws TypeError ctx.drawImage(null, 0, 0);
-
-- name: 2d.drawImage.wrongtype
-  desc: Incorrect image types in drawImage do not match any defined overloads, so WebIDL throws a TypeError
-  notes: *bindings
-  testing:
-    - 2d.drawImage.IDL
-  code: |
-    @assert throws TypeError ctx.drawImage(undefined, 0, 0);
-    @assert throws TypeError ctx.drawImage(0, 0, 0);
-    @assert throws TypeError ctx.drawImage("", 0, 0);
-    @assert throws TypeError ctx.drawImage(document.createElement('p'), 0, 0);
-
-- name: 2d.drawImage.floatsource
-  testing:
-    - 2d.drawImage.paint
-  images:
-    - green.png
-  code: |
-    ctx.drawImage(document.getElementById('green.png'), 10.1, 10.1, 0.1, 0.1, 0, 0, 100, 50);
-    @assert pixel 50,25 ==~ 0,255,0,255;
-  expected: green
-
-- name: 2d.drawImage.zerosource
-  desc: drawImage with zero-sized source rectangle draws nothing without exception
-  testing:
-    - 2d.drawImage.zerosource
-  images:
-    - red.png
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.drawImage(document.getElementById('red.png'), 10, 10, 0, 1, 0, 0, 100, 50);
-    ctx.drawImage(document.getElementById('red.png'), 10, 10, 1, 0, 0, 0, 100, 50);
-    ctx.drawImage(document.getElementById('red.png'), 10, 10, 0, 0, 0, 0, 100, 50);
-    @assert pixel 50,25 ==~ 0,255,0,255;
-  expected: green
-
-- name: 2d.drawImage.zerosource.image
-  desc: drawImage with zero-sized source rectangle from image throws INDEX_SIZE_ERR
-  testing:
-    - 2d.drawImage.zerosource
-  images:
-    - red-zerowidth.svg
-    - red-zeroheight.svg
-    - red-zerosize.svg
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    @assert throws INDEX_SIZE_ERR ctx.drawImage(document.getElementById('red-zerowidth.svg'), 0, 0, 100, 50);
-    @assert throws INDEX_SIZE_ERR ctx.drawImage(document.getElementById('red-zeroheight.svg'), 0, 0, 100, 50);
-    @assert throws INDEX_SIZE_ERR ctx.drawImage(document.getElementById('red-zerosize.svg'), 0, 0, 100, 50);
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-- name: 2d.drawImage.negativesource
-  desc: Negative source width/height represents the correct rectangle
-  testing:
-    - 2d.drawImage.direction
-  mozilla: { throws }
-  images:
-    - ggrr-256x256.png
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.drawImage(document.getElementById('ggrr-256x256.png'), 100, 78, -100, 50, 0, 0, 50, 50);
-    ctx.drawImage(document.getElementById('ggrr-256x256.png'), 100, 128, -100, -50, 50, 0, 50, 50);
-    @assert pixel 1,1 ==~ 0,255,0,255;
-    @assert pixel 1,48 ==~ 0,255,0,255;
-    @assert pixel 98,1 ==~ 0,255,0,255;
-    @assert pixel 98,48 ==~ 0,255,0,255;
-    @assert pixel 48,1 ==~ 0,255,0,255;
-    @assert pixel 48,48 ==~ 0,255,0,255;
-    @assert pixel 51,1 ==~ 0,255,0,255;
-    @assert pixel 51,48 ==~ 0,255,0,255;
-    @assert pixel 25,25 ==~ 0,255,0,255;
-    @assert pixel 75,25 ==~ 0,255,0,255;
-  expected: green
-
-- name: 2d.drawImage.negativedest
-  desc: Negative destination width/height represents the correct rectangle
-  testing:
-    - 2d.drawImage.direction
-  mozilla: { throws }
-  images:
-    - ggrr-256x256.png
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.drawImage(document.getElementById('ggrr-256x256.png'), 100, 78, 50, 50, 0, 50, 50, -50);
-    ctx.drawImage(document.getElementById('ggrr-256x256.png'), 100, 128, 50, -50, 100, 50, -50, -50);
-    @assert pixel 1,1 ==~ 0,255,0,255;
-    @assert pixel 1,48 ==~ 0,255,0,255;
-    @assert pixel 98,1 ==~ 0,255,0,255;
-    @assert pixel 98,48 ==~ 0,255,0,255;
-    @assert pixel 48,1 ==~ 0,255,0,255;
-    @assert pixel 48,48 ==~ 0,255,0,255;
-    @assert pixel 51,1 ==~ 0,255,0,255;
-    @assert pixel 51,48 ==~ 0,255,0,255;
-    @assert pixel 25,25 ==~ 0,255,0,255;
-    @assert pixel 75,25 ==~ 0,255,0,255;
-  expected: green
-
-- name: 2d.drawImage.negativedir
-  desc: Negative dimensions do not affect the direction of the image
-  testing:
-    - 2d.drawImage.direction
-  mozilla: { throws }
-  images:
-    - ggrr-256x256.png
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.drawImage(document.getElementById('ggrr-256x256.png'), 0, 178, 50, -100, 0, 0, 50, 100);
-    ctx.drawImage(document.getElementById('ggrr-256x256.png'), 0, 78, 50, 100, 50, 100, 50, -100);
-    @assert pixel 1,1 ==~ 0,255,0,255;
-    @assert pixel 1,48 ==~ 0,255,0,255;
-    @assert pixel 98,1 ==~ 0,255,0,255;
-    @assert pixel 98,48 ==~ 0,255,0,255;
-    @assert pixel 48,1 ==~ 0,255,0,255;
-    @assert pixel 48,48 ==~ 0,255,0,255;
-    @assert pixel 51,1 ==~ 0,255,0,255;
-    @assert pixel 51,48 ==~ 0,255,0,255;
-    @assert pixel 25,25 ==~ 0,255,0,255;
-    @assert pixel 75,25 ==~ 0,255,0,255;
-  expected: green
-
-- name: 2d.drawImage.outsidesource
-  DISABLED: fix this to match the current spec (transparent black outside source)
-  testing:
-    - 2d.drawImage.outsidesource
-  mozilla: { throws }
-  images:
-    - green.png
-    - red.png
-  code: |
-    ctx.drawImage(document.getElementById('green.png'), 10.5, 10.5, 89.5, 39.5, 0, 0, 100, 50);
-    ctx.drawImage(document.getElementById('green.png'), 5.5, 5.5, -5.5, -5.5, 0, 0, 100, 50);
-    ctx.drawImage(document.getElementById('green.png'), 100, 50, -5, -5, 0, 0, 100, 50);
-    @assert throws INDEX_SIZE_ERR ctx.drawImage(document.getElementById('red.png'), -0.001, 0, 100, 50, 0, 0, 100, 50);
-    @assert throws INDEX_SIZE_ERR ctx.drawImage(document.getElementById('red.png'), 0, -0.001, 100, 50, 0, 0, 100, 50);
-    @assert throws INDEX_SIZE_ERR ctx.drawImage(document.getElementById('red.png'), 0, 0, 100.001, 50, 0, 0, 100, 50);
-    @assert throws INDEX_SIZE_ERR ctx.drawImage(document.getElementById('red.png'), 0, 0, 100, 50.001, 0, 0, 100, 50);
-    @assert throws INDEX_SIZE_ERR ctx.drawImage(document.getElementById('red.png'), 50, 0, 50.001, 50, 0, 0, 100, 50); @moz-todo
-    @assert throws INDEX_SIZE_ERR ctx.drawImage(document.getElementById('red.png'), 0, 0, -5, 5, 0, 0, 100, 50);
-    @assert throws INDEX_SIZE_ERR ctx.drawImage(document.getElementById('red.png'), 0, 0, 5, -5, 0, 0, 100, 50);
-    @assert throws INDEX_SIZE_ERR ctx.drawImage(document.getElementById('red.png'), 110, 60, -20, -20, 0, 0, 100, 50);
-    @assert pixel 50,25 ==~ 0,255,0,255; @moz-todo
-  expected: green
-
-- name: 2d.drawImage.incomplete.nosrc
-  testing:
-    - 2d.drawImage.incomplete.image
-  mozilla: { throws }
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    var img = new Image();
-    ctx.drawImage(img, 0, 0);
-    @assert pixel 50,25 ==~ 0,255,0,255;
-  expected: green
-
-- name: 2d.drawImage.incomplete.immediate
-  testing:
-    - 2d.drawImage.incomplete.image
-  images:
-    - red.png
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    var img = new Image();
-    img.src = '../images/red.png';
-    // This triggers the "update the image data" algorithm.
-    // The image will not go to the "completely available" state
-    // until a fetch task in the networking task source is processed,
-    // so the image must not be fully decodable yet:
-    ctx.drawImage(img, 0, 0);
-    @assert pixel 50,25 ==~ 0,255,0,255; @moz-todo
-  expected: green
-
-- name: 2d.drawImage.incomplete.reload
-  testing:
-    - 2d.drawImage.incomplete.image
-  images:
-    - yellow.png
-    - red.png
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    var img = document.getElementById('yellow.png');
-    img.src = '../images/red.png';
-    // This triggers the "update the image data" algorithm,
-    // and resets the image to the "unavailable" state.
-    // The image will not go to the "completely available" state
-    // until a fetch task in the networking task source is processed,
-    // so the image must not be fully decodable yet:
-    ctx.drawImage(img, 0, 0);
-    @assert pixel 50,25 ==~ 0,255,0,255; @moz-todo
-  expected: green
-
-- name: 2d.drawImage.incomplete.emptysrc
-  testing:
-    - 2d.drawImage.incomplete.image
-  images:
-    - red.png
-  mozilla: { throws }
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    var img = document.getElementById('red.png');
-    img.src = "";
-    ctx.drawImage(img, 0, 0);
-    @assert pixel 50,25 ==~ 0,255,0,255;
-  expected: green
-
-- name: 2d.drawImage.incomplete.removedsrc
-  testing:
-    - 2d.drawImage.incomplete.image
-  images:
-    - red.png
-  mozilla: { throws }
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    var img = document.getElementById('red.png');
-    img.removeAttribute('src');
-    ctx.drawImage(img, 0, 0);
-    @assert pixel 50,25 ==~ 0,255,0,255;
-  expected: green
-
-- name: 2d.drawImage.broken
-  testing:
-    - 2d.drawImage.incomplete.image
-  images:
-    - broken.png
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    var img = document.getElementById('broken.png');
-    ctx.drawImage(img, 0, 0);
-    @assert pixel 50,25 ==~ 0,255,0,255; @moz-todo
-  expected: green
-
-- name: 2d.drawImage.zerocanvas
-  desc: drawImage with zero-sized canvas as the source shoud throw exception
-  testing:
-    - 2d.drawImage.zerocanvas
-  code: |
-    var canvas2 = document.createElement('canvas');
-    canvas2.width = 0;
-    canvas2.height = 50;
-    @assert throws INVALID_STATE_ERR ctx.drawImage(canvas2, 0, 0);
-
-    canvas2.width = 50;
-    canvas2.height = 0;
-    @assert throws INVALID_STATE_ERR ctx.drawImage(canvas2, 0, 0);
-
-    canvas2.width = 0;
-    canvas2.height = 0;
-    @assert throws INVALID_STATE_ERR ctx.drawImage(canvas2, 0, 0);
-
-- name: 2d.drawImage.svg
-  desc: drawImage() of an SVG image
-  testing:
-    - 2d.drawImage.svg
-  images:
-    - green.svg
-  code: |
-    ctx.drawImage(document.getElementById('green.svg'), 0, 0);
-    @assert pixel 50,25 ==~ 0,255,0,255;
-  expected: green
-
-- name: 2d.drawImage.animated.gif
-  desc: drawImage() of an animated GIF draws the first frame
-  testing:
-    - 2d.drawImage.animated.image
-  images:
-    - anim-gr.gif
-  code: |
-    deferTest();
-    step_timeout(t.step_func_done(function () {
-        ctx.drawImage(document.getElementById('anim-gr.gif'), 0, 0);
-        @assert pixel 50,25 ==~ 0,255,0,255;
-    }), 500);
-  expected: green
-
-- name: 2d.drawImage.animated.apng
-  desc: drawImage() of an APNG with no poster frame draws the first frame
-  testing:
-    - 2d.drawImage.animated.image
-  images:
-    - anim-gr.png
-  code: |
-    deferTest();
-    step_timeout(t.step_func_done(function () {
-        ctx.drawImage(document.getElementById('anim-gr.png'), 0, 0);
-        @assert pixel 50,25 ==~ 0,255,0,255;
-    }), 500);
-  expected: green
-
-- name: 2d.drawImage.animated.poster
-  desc: drawImage() of an APNG draws the poster frame
-  testing:
-    - 2d.drawImage.animated.image
-  images:
-    - anim-poster-gr.png
-  code: |
-    ctx.drawImage(document.getElementById('anim-poster-gr.png'), 0, 0);
-    @assert pixel 50,25 ==~ 0,255,0,255; @moz-todo
-  expected: green
-
-- name: 2d.drawImage.path
-  testing:
-    - 2d.drawImage.unaffect
-  images:
-    - red.png
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.rect(0, 0, 100, 50);
-    ctx.drawImage(document.getElementById('red.png'), 0, 0);
-    ctx.fill();
-    @assert pixel 50,25 ==~ 0,255,0,255;
-  expected: green
-
-- name: 2d.drawImage.transform
-  testing:
-    - 2d.drawImage.subject
-  images:
-    - red.png
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.translate(100, 0);
-    ctx.drawImage(document.getElementById('red.png'), 0, 0);
-    @assert pixel 50,25 ==~ 0,255,0,255;
-  expected: green
-
-# TODO: drawImage shadows
-
-- name: 2d.drawImage.alpha
-  testing:
-    - 2d.drawImage.subject
-  images:
-    - red.png
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.globalAlpha = 0;
-    ctx.drawImage(document.getElementById('red.png'), 0, 0);
-    @assert pixel 50,25 ==~ 0,255,0,255;
-  expected: green
-
-- name: 2d.drawImage.clip
-  testing:
-    - 2d.drawImage.subject
-  images:
-    - red.png
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.rect(-10, -10, 1, 1);
-    ctx.clip();
-    ctx.drawImage(document.getElementById('red.png'), 0, 0);
-    @assert pixel 50,25 ==~ 0,255,0,255;
-  expected: green
-
-- name: 2d.drawImage.composite
-  testing:
-    - 2d.drawImage.subject
-  images:
-    - red.png
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.globalCompositeOperation = 'destination-over';
-    ctx.drawImage(document.getElementById('red.png'), 0, 0);
-    @assert pixel 50,25 ==~ 0,255,0,255;
-  expected: green
-
-- name: 2d.drawImage.nowrap
-  desc: Stretched images do not get pixels wrapping around the edges
-  images:
-    - redtransparent.png
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.drawImage(document.getElementById('redtransparent.png'), -1950, 0, 2000, 50);
-    @assert pixel 45,25 ==~ 0,255,0,255;
-    @assert pixel 50,25 ==~ 0,255,0,255;
-    @assert pixel 55,25 ==~ 0,255,0,255;
-  expected: green
-
-- name: 2d.drawImage.nonfinite
-  desc: drawImage() with Infinity/NaN is ignored
-  testing:
-    - 2d.nonfinite
-  images:
-    - red.png
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    var red = document.getElementById('red.png');
-    @nonfinite ctx.drawImage(<red>, <0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>);
-    @nonfinite ctx.drawImage(<red>, <0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <100 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>);
-    @nonfinite ctx.drawImage(<red>, <0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <100 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <100 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>);
-    @assert pixel 50,25 == 0,255,0,255;
-  expected: green
-
-
-
-- name: 2d.imageData.create2.basic
-  desc: createImageData(sw, sh) exists and returns something
-  testing:
-    - 2d.imageData.create2.object
-  code: |
-    @assert ctx.createImageData(1, 1) !== null;
-
-- name: 2d.imageData.create1.basic
-  desc: createImageData(imgdata) exists and returns something
-  testing:
-    - 2d.imageData.create1.object
-  code: |
-    @assert ctx.createImageData(ctx.createImageData(1, 1)) !== null;
-
-- name: 2d.imageData.create2.type
-  desc: createImageData(sw, sh) returns an ImageData object containing a Uint8ClampedArray object
-  testing:
-    - 2d.imageData.create2.object
-  code: |
-    @assert window.ImageData !== undefined;
-    @assert window.Uint8ClampedArray !== undefined;
-    window.ImageData.prototype.thisImplementsImageData = true;
-    window.Uint8ClampedArray.prototype.thisImplementsUint8ClampedArray = true;
-    var imgdata = ctx.createImageData(1, 1);
-    @assert imgdata.thisImplementsImageData;
-    @assert imgdata.data.thisImplementsUint8ClampedArray;
-
-- name: 2d.imageData.create1.type
-  desc: createImageData(imgdata) returns an ImageData object containing a Uint8ClampedArray object
-  testing:
-    - 2d.imageData.create1.object
-  code: |
-    @assert window.ImageData !== undefined;
-    @assert window.Uint8ClampedArray !== undefined;
-    window.ImageData.prototype.thisImplementsImageData = true;
-    window.Uint8ClampedArray.prototype.thisImplementsUint8ClampedArray = true;
-    var imgdata = ctx.createImageData(ctx.createImageData(1, 1));
-    @assert imgdata.thisImplementsImageData;
-    @assert imgdata.data.thisImplementsUint8ClampedArray;
-
-- name: 2d.imageData.create2.this
-  desc: createImageData(sw, sh) should throw when called with the wrong |this|
-  notes: *bindings
-  testing:
-    - 2d.imageData.create2.object
-  code: |
-    @assert throws TypeError CanvasRenderingContext2D.prototype.createImageData.call(null, 1, 1); @moz-todo
-    @assert throws TypeError CanvasRenderingContext2D.prototype.createImageData.call(undefined, 1, 1); @moz-todo
-    @assert throws TypeError CanvasRenderingContext2D.prototype.createImageData.call({}, 1, 1); @moz-todo
-
-- name: 2d.imageData.create1.this
-  desc: createImageData(imgdata) should throw when called with the wrong |this|
-  notes: *bindings
-  testing:
-    - 2d.imageData.create2.object
-  code: |
-    var imgdata = ctx.createImageData(1, 1);
-    @assert throws TypeError CanvasRenderingContext2D.prototype.createImageData.call(null, imgdata); @moz-todo
-    @assert throws TypeError CanvasRenderingContext2D.prototype.createImageData.call(undefined, imgdata); @moz-todo
-    @assert throws TypeError CanvasRenderingContext2D.prototype.createImageData.call({}, imgdata); @moz-todo
-
-- name: 2d.imageData.create2.initial
-  desc: createImageData(sw, sh) returns transparent black data of the right size
-  testing:
-    - 2d.imageData.create2.size
-    - 2d.imageData.create.initial
-    - 2d.imageData.initial
-  code: |
-    var imgdata = ctx.createImageData(10, 20);
-    @assert imgdata.data.length === imgdata.width*imgdata.height*4;
-    @assert imgdata.width < imgdata.height;
-    @assert imgdata.width > 0;
-    var isTransparentBlack = true;
-    for (var i = 0; i < imgdata.data.length; ++i)
-        if (imgdata.data[i] !== 0)
-            isTransparentBlack = false;
-    @assert isTransparentBlack;
-
-- name: 2d.imageData.create1.initial
-  desc: createImageData(imgdata) returns transparent black data of the right size
-  testing:
-    - 2d.imageData.create1.size
-    - 2d.imageData.create.initial
-    - 2d.imageData.initial
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50);
-    var imgdata1 = ctx.getImageData(0, 0, 10, 20);
-    var imgdata2 = ctx.createImageData(imgdata1);
-    @assert imgdata2.data.length === imgdata1.data.length;
-    @assert imgdata2.width === imgdata1.width;
-    @assert imgdata2.height === imgdata1.height;
-    var isTransparentBlack = true;
-    for (var i = 0; i < imgdata2.data.length; ++i)
-        if (imgdata2.data[i] !== 0)
-            isTransparentBlack = false;
-    @assert isTransparentBlack;
-
-- name: 2d.imageData.create2.large
-  desc: createImageData(sw, sh) works for sizes much larger than the canvas
-  testing:
-    - 2d.imageData.create2.size
-  code: |
-    var imgdata = ctx.createImageData(1000, 2000);
-    @assert imgdata.data.length === imgdata.width*imgdata.height*4;
-    @assert imgdata.width < imgdata.height;
-    @assert imgdata.width > 0;
-    var isTransparentBlack = true;
-    for (var i = 0; i < imgdata.data.length; i += 7813) // check ~1024 points (assuming normal scaling)
-        if (imgdata.data[i] !== 0)
-            isTransparentBlack = false;
-    @assert isTransparentBlack;
-
-- name: 2d.imageData.create2.negative
-  desc: createImageData(sw, sh) takes the absolute magnitude of the size arguments
-  testing:
-    - 2d.imageData.create2.size
-  code: |
-    var imgdata1 = ctx.createImageData(10, 20);
-    var imgdata2 = ctx.createImageData(-10, 20);
-    var imgdata3 = ctx.createImageData(10, -20);
-    var imgdata4 = ctx.createImageData(-10, -20);
-    @assert imgdata1.data.length === imgdata2.data.length;
-    @assert imgdata2.data.length === imgdata3.data.length;
-    @assert imgdata3.data.length === imgdata4.data.length;
-
-- name: 2d.imageData.create2.zero
-  desc: createImageData(sw, sh) throws INDEX_SIZE_ERR if size is zero
-  testing:
-    - 2d.imageData.getcreate.zero
-  code: |
-    @assert throws INDEX_SIZE_ERR ctx.createImageData(10, 0);
-    @assert throws INDEX_SIZE_ERR ctx.createImageData(0, 10);
-    @assert throws INDEX_SIZE_ERR ctx.createImageData(0, 0);
-    @assert throws INDEX_SIZE_ERR ctx.createImageData(0.99, 10);
-    @assert throws INDEX_SIZE_ERR ctx.createImageData(10, 0.1);
-
-- name: 2d.imageData.create2.nonfinite
-  desc: createImageData() throws TypeError if arguments are not finite
-  notes: *bindings
-  testing:
-    - 2d.imageData.getcreate.nonfinite
-  code: |
-    @nonfinite @assert throws TypeError ctx.createImageData(<10 Infinity -Infinity NaN>, <10 Infinity -Infinity NaN>);
-    var posinfobj = { valueOf: function() { return Infinity; } },
-        neginfobj = { valueOf: function() { return -Infinity; } },
-        nanobj = { valueOf: function() { return -Infinity; } };
-    @nonfinite @assert throws TypeError ctx.createImageData(<10 posinfobj neginfobj nanobj>, <10 posinfobj neginfobj nanobj>);
-
-- name: 2d.imageData.create1.zero
-  desc: createImageData(null) throws TypeError
-  testing:
-    - 2d.imageData.create.null
-  code: |
-    @assert throws TypeError ctx.createImageData(null);
-
-- name: 2d.imageData.create2.double
-  desc: createImageData(w, h) double is converted to long
-  testing:
-    - 2d.imageData.create2.size
-  code: |
-    var imgdata1 = ctx.createImageData(10.01, 10.99);
-    var imgdata2 = ctx.createImageData(-10.01, -10.99);
-    @assert imgdata1.width === 10;
-    @assert imgdata1.height === 10;
-    @assert imgdata2.width === 10;
-    @assert imgdata2.height === 10;
-
-- name: 2d.imageData.create.and.resize
-  desc: Verify no crash when resizing an image bitmap to zero.
-  testing:
-    - 2d.imageData.resize
-  images:
-    - red.png
-  code: |
-    var image = new Image();
-    image.onload = t.step_func(function() {
-      var options = { resizeHeight: 0 };
-      var p1 = createImageBitmap(image, options);
-      p1.catch(function(error){});
-      t.done();
-    });
-    image.src = 'red.png';
-
-- name: 2d.imageData.get.basic
-  desc: getImageData() exists and returns something
-  testing:
-    - 2d.imageData.get.basic
-  code: |
-    @assert ctx.getImageData(0, 0, 100, 50) !== null;
-
-- name: 2d.imageData.get.type
-  desc: getImageData() returns an ImageData object containing a Uint8ClampedArray object
-  testing:
-    - 2d.imageData.get.object
-  code: |
-    @assert window.ImageData !== undefined;
-    @assert window.Uint8ClampedArray !== undefined;
-    window.ImageData.prototype.thisImplementsImageData = true;
-    window.Uint8ClampedArray.prototype.thisImplementsUint8ClampedArray = true;
-    var imgdata = ctx.getImageData(0, 0, 1, 1);
-    @assert imgdata.thisImplementsImageData;
-    @assert imgdata.data.thisImplementsUint8ClampedArray;
-
-- name: 2d.imageData.get.zero
-  desc: getImageData() throws INDEX_SIZE_ERR if size is zero
-  testing:
-    - 2d.imageData.getcreate.zero
-  code: |
-    @assert throws INDEX_SIZE_ERR ctx.getImageData(1, 1, 10, 0);
-    @assert throws INDEX_SIZE_ERR ctx.getImageData(1, 1, 0, 10);
-    @assert throws INDEX_SIZE_ERR ctx.getImageData(1, 1, 0, 0);
-    @assert throws INDEX_SIZE_ERR ctx.getImageData(1, 1, 0.1, 10);
-    @assert throws INDEX_SIZE_ERR ctx.getImageData(1, 1, 10, 0.99);
-    @assert throws INDEX_SIZE_ERR ctx.getImageData(1, 1, -0.1, 10);
-    @assert throws INDEX_SIZE_ERR ctx.getImageData(1, 1, 10, -0.99);
-
-- name: 2d.imageData.get.nonfinite
-  desc: getImageData() throws TypeError if arguments are not finite
-  notes: *bindings
-  testing:
-    - 2d.imageData.getcreate.nonfinite
-  code: |
-    @nonfinite @assert throws TypeError ctx.getImageData(<10 Infinity -Infinity NaN>, <10 Infinity -Infinity NaN>, <10 Infinity -Infinity NaN>, <10 Infinity -Infinity NaN>);
-    var posinfobj = { valueOf: function() { return Infinity; } },
-        neginfobj = { valueOf: function() { return -Infinity; } },
-        nanobj = { valueOf: function() { return -Infinity; } };
-    @nonfinite @assert throws TypeError ctx.getImageData(<10 posinfobj neginfobj nanobj>, <10 posinfobj neginfobj nanobj>, <10 posinfobj neginfobj nanobj>, <10 posinfobj neginfobj nanobj>);
-
-- name: 2d.imageData.get.source.outside
-  desc: getImageData() returns transparent black outside the canvas
-  testing:
-    - 2d.imageData.get.basic
-    - 2d.imageData.get.outside
-  code: |
-    ctx.fillStyle = '#08f';
-    ctx.fillRect(0, 0, 100, 50);
-
-    var imgdata1 = ctx.getImageData(-10, 5, 1, 1);
-    @assert imgdata1.data[0] === 0;
-    @assert imgdata1.data[1] === 0;
-    @assert imgdata1.data[2] === 0;
-    @assert imgdata1.data[3] === 0;
-
-    var imgdata2 = ctx.getImageData(10, -5, 1, 1);
-    @assert imgdata2.data[0] === 0;
-    @assert imgdata2.data[1] === 0;
-    @assert imgdata2.data[2] === 0;
-    @assert imgdata2.data[3] === 0;
-
-    var imgdata3 = ctx.getImageData(200, 5, 1, 1);
-    @assert imgdata3.data[0] === 0;
-    @assert imgdata3.data[1] === 0;
-    @assert imgdata3.data[2] === 0;
-    @assert imgdata3.data[3] === 0;
-
-    var imgdata4 = ctx.getImageData(10, 60, 1, 1);
-    @assert imgdata4.data[0] === 0;
-    @assert imgdata4.data[1] === 0;
-    @assert imgdata4.data[2] === 0;
-    @assert imgdata4.data[3] === 0;
-
-    var imgdata5 = ctx.getImageData(100, 10, 1, 1);
-    @assert imgdata5.data[0] === 0;
-    @assert imgdata5.data[1] === 0;
-    @assert imgdata5.data[2] === 0;
-    @assert imgdata5.data[3] === 0;
-
-    var imgdata6 = ctx.getImageData(0, 10, 1, 1);
-    @assert imgdata6.data[0] === 0;
-    @assert imgdata6.data[1] === 136;
-    @assert imgdata6.data[2] === 255;
-    @assert imgdata6.data[3] === 255;
-
-    var imgdata7 = ctx.getImageData(-10, 10, 20, 20);
-    @assert imgdata7.data[ 0*4+0] === 0;
-    @assert imgdata7.data[ 0*4+1] === 0;
-    @assert imgdata7.data[ 0*4+2] === 0;
-    @assert imgdata7.data[ 0*4+3] === 0;
-    @assert imgdata7.data[ 9*4+0] === 0;
-    @assert imgdata7.data[ 9*4+1] === 0;
-    @assert imgdata7.data[ 9*4+2] === 0;
-    @assert imgdata7.data[ 9*4+3] === 0;
-    @assert imgdata7.data[10*4+0] === 0;
-    @assert imgdata7.data[10*4+1] === 136;
-    @assert imgdata7.data[10*4+2] === 255;
-    @assert imgdata7.data[10*4+3] === 255;
-    @assert imgdata7.data[19*4+0] === 0;
-    @assert imgdata7.data[19*4+1] === 136;
-    @assert imgdata7.data[19*4+2] === 255;
-    @assert imgdata7.data[19*4+3] === 255;
-    @assert imgdata7.data[20*4+0] === 0;
-    @assert imgdata7.data[20*4+1] === 0;
-    @assert imgdata7.data[20*4+2] === 0;
-    @assert imgdata7.data[20*4+3] === 0;
-
-- name: 2d.imageData.get.source.negative
-  desc: getImageData() works with negative width and height, and returns top-to-bottom left-to-right
-  testing:
-    - 2d.imageData.get.basic
-    - 2d.pixelarray.order
-  code: |
-    ctx.fillStyle = '#000';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#fff';
-    ctx.fillRect(20, 10, 60, 10);
-
-    var imgdata1 = ctx.getImageData(85, 25, -10, -10);
-    @assert imgdata1.data[0] === 255;
-    @assert imgdata1.data[1] === 255;
-    @assert imgdata1.data[2] === 255;
-    @assert imgdata1.data[3] === 255;
-    @assert imgdata1.data[imgdata1.data.length-4+0] === 0;
-    @assert imgdata1.data[imgdata1.data.length-4+1] === 0;
-    @assert imgdata1.data[imgdata1.data.length-4+2] === 0;
-    @assert imgdata1.data[imgdata1.data.length-4+3] === 255;
-
-    var imgdata2 = ctx.getImageData(0, 0, -1, -1);
-    @assert imgdata2.data[0] === 0;
-    @assert imgdata2.data[1] === 0;
-    @assert imgdata2.data[2] === 0;
-    @assert imgdata2.data[3] === 0;
-
-- name: 2d.imageData.get.source.size
-  desc: getImageData() returns bigger ImageData for bigger source rectangle
-  testing:
-    - 2d.imageData.get.basic
-  code: |
-    var imgdata1 = ctx.getImageData(0, 0, 10, 10);
-    var imgdata2 = ctx.getImageData(0, 0, 20, 20);
-    @assert imgdata2.width > imgdata1.width;
-    @assert imgdata2.height > imgdata1.height;
-
-- name: 2d.imageData.get.double
-  desc: createImageData(w, h) double is converted to long
-  testing:
-    - 2d.imageData.get.basic
-  code: |
-    var imgdata1 = ctx.getImageData(0, 0, 10.01, 10.99);
-    var imgdata2 = ctx.getImageData(0, 0, -10.01, -10.99);
-    @assert imgdata1.width === 10;
-    @assert imgdata1.height === 10;
-    @assert imgdata2.width === 10;
-    @assert imgdata2.height === 10;
-
-- name: 2d.imageData.get.nonpremul
-  desc: getImageData() returns non-premultiplied colours
-  testing:
-    - 2d.imageData.get.premul
-  code: |
-    ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
-    ctx.fillRect(0, 0, 100, 50);
-    var imgdata = ctx.getImageData(10, 10, 10, 10);
-    @assert imgdata.data[0] > 200;
-    @assert imgdata.data[1] > 200;
-    @assert imgdata.data[2] > 200;
-    @assert imgdata.data[3] > 100;
-    @assert imgdata.data[3] < 200;
-
-- name: 2d.imageData.get.range
-  desc: getImageData() returns values in the range [0, 255]
-  testing:
-    - 2d.pixelarray.range
-    - 2d.pixelarray.retrieve
-  code: |
-    ctx.fillStyle = '#000';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#fff';
-    ctx.fillRect(20, 10, 60, 10);
-    var imgdata1 = ctx.getImageData(10, 5, 1, 1);
-    @assert imgdata1.data[0] === 0;
-    var imgdata2 = ctx.getImageData(30, 15, 1, 1);
-    @assert imgdata2.data[0] === 255;
-
-- name: 2d.imageData.get.clamp
-  desc: getImageData() clamps colours to the range [0, 255]
-  testing:
-    - 2d.pixelarray.range
-  code: |
-    ctx.fillStyle = 'rgb(-100, -200, -300)';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = 'rgb(256, 300, 400)';
-    ctx.fillRect(20, 10, 60, 10);
-    var imgdata1 = ctx.getImageData(10, 5, 1, 1);
-    @assert imgdata1.data[0] === 0;
-    @assert imgdata1.data[1] === 0;
-    @assert imgdata1.data[2] === 0;
-    var imgdata2 = ctx.getImageData(30, 15, 1, 1);
-    @assert imgdata2.data[0] === 255;
-    @assert imgdata2.data[1] === 255;
-    @assert imgdata2.data[2] === 255;
-
-- name: 2d.imageData.get.length
-  desc: getImageData() returns a correctly-sized Uint8ClampedArray
-  testing:
-    - 2d.pixelarray.length
-  code: |
-    var imgdata = ctx.getImageData(0, 0, 10, 10);
-    @assert imgdata.data.length === imgdata.width*imgdata.height*4;
-
-- name: 2d.imageData.get.order.cols
-  desc: getImageData() returns leftmost columns first
-  testing:
-    - 2d.pixelarray.order
-  code: |
-    ctx.fillStyle = '#fff';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#000';
-    ctx.fillRect(0, 0, 2, 50);
-    var imgdata = ctx.getImageData(0, 0, 10, 10);
-    @assert imgdata.data[0] === 0;
-    @assert imgdata.data[Math.round(imgdata.width/2*4)] === 255;
-    @assert imgdata.data[Math.round((imgdata.height/2)*imgdata.width*4)] === 0;
-
-- name: 2d.imageData.get.order.rows
-  desc: getImageData() returns topmost rows first
-  testing:
-    - 2d.pixelarray.order
-  code: |
-    ctx.fillStyle = '#fff';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.fillStyle = '#000';
-    ctx.fillRect(0, 0, 100, 2);
-    var imgdata = ctx.getImageData(0, 0, 10, 10);
-    @assert imgdata.data[0] === 0;
-    @assert imgdata.data[Math.floor(imgdata.width/2*4)] === 0;
-    @assert imgdata.data[(imgdata.height/2)*imgdata.width*4] === 255;
-
-- name: 2d.imageData.get.order.rgb
-  desc: getImageData() returns R then G then B
-  testing:
-    - 2d.pixelarray.order
-    - 2d.pixelarray.indexes
-  code: |
-    ctx.fillStyle = '#48c';
-    ctx.fillRect(0, 0, 100, 50);
-    var imgdata = ctx.getImageData(0, 0, 10, 10);
-    @assert imgdata.data[0] === 0x44;
-    @assert imgdata.data[1] === 0x88;
-    @assert imgdata.data[2] === 0xCC;
-    @assert imgdata.data[3] === 255;
-    @assert imgdata.data[4] === 0x44;
-    @assert imgdata.data[5] === 0x88;
-    @assert imgdata.data[6] === 0xCC;
-    @assert imgdata.data[7] === 255;
-
-- name: 2d.imageData.get.order.alpha
-  desc: getImageData() returns A in the fourth component
-  testing:
-    - 2d.pixelarray.order
-  code: |
-    ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
-    ctx.fillRect(0, 0, 100, 50);
-    var imgdata = ctx.getImageData(0, 0, 10, 10);
-    @assert imgdata.data[3] < 200;
-    @assert imgdata.data[3] > 100;
-
-- name: 2d.imageData.get.unaffected
-  desc: getImageData() is not affected by context state
-  testing:
-    - 2d.imageData.unaffected
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 50, 50)
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(50, 0, 50, 50)
-    ctx.save();
-    ctx.translate(50, 0);
-    ctx.globalAlpha = 0.1;
-    ctx.globalCompositeOperation = 'destination-atop';
-    ctx.shadowColor = '#f00';
-    ctx.rect(0, 0, 5, 5);
-    ctx.clip();
-    var imgdata = ctx.getImageData(0, 0, 50, 50);
-    ctx.restore();
-    ctx.putImageData(imgdata, 50, 0);
-    @assert pixel 25,25 ==~ 0,255,0,255;
-    @assert pixel 75,25 ==~ 0,255,0,255;
-  expected: green
-
-
-- name: 2d.imageData.get.large.crash
-  desc: Test that canvas crash when image data cannot be allocated.
-  testing:
-    - 2d.getImageData
-  code: |
-    @assert throws TypeError ctx.getImageData(10, 0xffffffff, 2147483647, 10);
-
-- name: 2d.imageData.get.rounding
-  desc: Test the handling of non-integer source coordinates in getImageData().
-  testing:
-    - 2d.getImageData
-  code: |
-    function testDimensions(sx, sy, sw, sh, width, height)
-    {
-        imageData = ctx.getImageData(sx, sy, sw, sh);
-        @assert imageData.width == width;
-        @assert imageData.height == height;
-    }
-
-    testDimensions(0, 0, 20, 10, 20, 10);
-
-    testDimensions(.1, .2, 20, 10, 20, 10);
-    testDimensions(.9, .8, 20, 10, 20, 10);
-
-    testDimensions(0, 0, 20.9, 10.9, 20, 10);
-    testDimensions(0, 0, 20.1, 10.1, 20, 10);
-
-    testDimensions(-1, -1, 20, 10, 20, 10);
-
-    testDimensions(-1.1, 0, 20, 10, 20, 10);
-    testDimensions(-1.9,  0, 20, 10, 20, 10);
-
-- name: 2d.imageData.get.invalid
-  desc: Verify getImageData() behavior in invalid cases.
-  testing:
-    - 2d.imageData.get.invalid
-  code: |
-    imageData = ctx.getImageData(0,0,2,2);
-    var testValues = [NaN, true, false, "\"garbage\"", "-1",
-                      "0", "1", "2", Infinity, -Infinity,
-                      -5, -0.5, 0, 0.5, 5,
-                      5.4, 255, 256, null, undefined];
-    var testResults = [0, 1, 0, 0, 0,
-                       0, 1, 2, 255, 0,
-                       0, 0, 0, 0, 5,
-                       5, 255, 255, 0, 0];
-    for (var i = 0; i < testValues.length; i++) {
-        imageData.data[0] = testValues[i];
-        @assert imageData.data[0] == testResults[i];
-    }
-    imageData.data['foo']='garbage';
-    @assert imageData.data['foo'] == 'garbage';
-    imageData.data[-1]='garbage';
-    @assert imageData.data[-1] == undefined;
-    imageData.data[17]='garbage';
-    @assert imageData.data[17] == undefined;
-
-- name: 2d.imageData.object.properties
-  desc: ImageData objects have the right properties
-  testing:
-    - 2d.imageData.type
-  code: |
-    var imgdata = ctx.getImageData(0, 0, 10, 10);
-    @assert typeof(imgdata.width) === 'number';
-    @assert typeof(imgdata.height) === 'number';
-    @assert typeof(imgdata.data) === 'object';
-
-- name: 2d.imageData.object.readonly
-  desc: ImageData objects properties are read-only
-  testing:
-    - 2d.imageData.type
-  code: |
-    var imgdata = ctx.getImageData(0, 0, 10, 10);
-    var w = imgdata.width;
-    var h = imgdata.height;
-    var d = imgdata.data;
-    imgdata.width = 123;
-    imgdata.height = 123;
-    imgdata.data = [100,100,100,100];
-    @assert imgdata.width === w;
-    @assert imgdata.height === h;
-    @assert imgdata.data === d;
-    @assert imgdata.data[0] === 0;
-    @assert imgdata.data[1] === 0;
-    @assert imgdata.data[2] === 0;
-    @assert imgdata.data[3] === 0;
-
-- name: 2d.imageData.object.ctor.size
-  desc: ImageData has a usable constructor
-  testing:
-    - 2d.imageData.type
-  code: |
-    @assert window.ImageData !== undefined;
-
-    var imgdata = new window.ImageData(2, 3);
-    @assert imgdata.width === 2;
-    @assert imgdata.height === 3;
-    @assert imgdata.data.length === 2 * 3 * 4;
-    for (var i = 0; i < imgdata.data.length; ++i) {
-      @assert imgdata.data[i] === 0;
-    }
-
-- name: 2d.imageData.object.ctor.size.bounds
-  desc: ImageData has a usable constructor
-  testing:
-    - 2d.imageData.type
-  code: |
-    @assert window.ImageData !== undefined;
-    @assert throws INDEX_SIZE_ERR new window.ImageData(0, 0);
-    @assert throws INDEX_SIZE_ERR new window.ImageData(0, 1);
-    @assert throws INDEX_SIZE_ERR new window.ImageData(1, 0);
-
-- name: 2d.imageData.object.ctor.array
-  desc: ImageData has a usable constructor
-  testing:
-    - 2d.imageData.type
-  code: |
-    @assert window.ImageData !== undefined;
-
-    var array = new Uint8ClampedArray(8);
-    var imgdata = new window.ImageData(array, 1, 2);
-    @assert imgdata.width === 1;
-    @assert imgdata.height === 2;
-    @assert imgdata.data === array;
-
-- name: 2d.imageData.object.ctor.array.bounds
-  desc: ImageData has a usable constructor
-  testing:
-    - 2d.imageData.type
-  code: |
-    @assert window.ImageData !== undefined;
-
-    @assert throws INVALID_STATE_ERR new ImageData(new Uint8ClampedArray(0), 1);
-    @assert throws INVALID_STATE_ERR new ImageData(new Uint8ClampedArray(3), 1);
-    @assert throws INDEX_SIZE_ERR new ImageData(new Uint8ClampedArray(4), 0);
-    @assert throws INDEX_SIZE_ERR new ImageData(new Uint8ClampedArray(4), 1, 2);
-    @assert throws TypeError new ImageData(new Uint8Array(8), 1, 2);
-    @assert throws TypeError new ImageData(new Int8Array(8), 1, 2);
-
-- name: 2d.imageData.object.set
-  desc: ImageData.data can be modified
-  testing:
-    - 2d.pixelarray.modify
-  code: |
-    var imgdata = ctx.getImageData(0, 0, 10, 10);
-    imgdata.data[0] = 100;
-    @assert imgdata.data[0] === 100;
-    imgdata.data[0] = 200;
-    @assert imgdata.data[0] === 200;
-
-- name: 2d.imageData.object.undefined
-  desc: ImageData.data converts undefined to 0
-  testing:
-    - 2d.pixelarray.modify
-  webidl:
-    - es-octet
-  code: |
-    var imgdata = ctx.getImageData(0, 0, 10, 10);
-    imgdata.data[0] = 100;
-    imgdata.data[0] = undefined;
-    @assert imgdata.data[0] === 0;
-
-- name: 2d.imageData.object.nan
-  desc: ImageData.data converts NaN to 0
-  testing:
-    - 2d.pixelarray.modify
-  webidl:
-    - es-octet
-  code: |
-    var imgdata = ctx.getImageData(0, 0, 10, 10);
-    imgdata.data[0] = 100;
-    imgdata.data[0] = NaN;
-    @assert imgdata.data[0] === 0;
-    imgdata.data[0] = 100;
-    imgdata.data[0] = "cheese";
-    @assert imgdata.data[0] === 0;
-
-- name: 2d.imageData.object.string
-  desc: ImageData.data converts strings to numbers with ToNumber
-  testing:
-    - 2d.pixelarray.modify
-  webidl:
-    - es-octet
-  code: |
-    var imgdata = ctx.getImageData(0, 0, 10, 10);
-    imgdata.data[0] = 100;
-    imgdata.data[0] = "110";
-    @assert imgdata.data[0] === 110;
-    imgdata.data[0] = 100;
-    imgdata.data[0] = "0x78";
-    @assert imgdata.data[0] === 120;
-    imgdata.data[0] = 100;
-    imgdata.data[0] = " +130e0 ";
-    @assert imgdata.data[0] === 130;
-
-- name: 2d.imageData.object.clamp
-  desc: ImageData.data clamps numbers to [0, 255]
-  testing:
-    - 2d.pixelarray.modify
-  webidl:
-    - es-octet
-  code: |
-    var imgdata = ctx.getImageData(0, 0, 10, 10);
-
-    imgdata.data[0] = 100;
-    imgdata.data[0] = 300;
-    @assert imgdata.data[0] === 255;
-    imgdata.data[0] = 100;
-    imgdata.data[0] = -100;
-    @assert imgdata.data[0] === 0;
-
-    imgdata.data[0] = 100;
-    imgdata.data[0] = 200+Math.pow(2, 32);
-    @assert imgdata.data[0] === 255;
-    imgdata.data[0] = 100;
-    imgdata.data[0] = -200-Math.pow(2, 32);
-    @assert imgdata.data[0] === 0;
-
-    imgdata.data[0] = 100;
-    imgdata.data[0] = Math.pow(10, 39);
-    @assert imgdata.data[0] === 255;
-    imgdata.data[0] = 100;
-    imgdata.data[0] = -Math.pow(10, 39);
-    @assert imgdata.data[0] === 0;
-
-    imgdata.data[0] = 100;
-    imgdata.data[0] = -Infinity;
-    @assert imgdata.data[0] === 0;
-    imgdata.data[0] = 100;
-    imgdata.data[0] = Infinity;
-    @assert imgdata.data[0] === 255;
-
-- name: 2d.imageData.object.round
-  desc: ImageData.data rounds numbers with round-to-zero
-  testing:
-    - 2d.pixelarray.modify
-  webidl:
-    - es-octet
-  code: |
-    var imgdata = ctx.getImageData(0, 0, 10, 10);
-    imgdata.data[0] = 0.499;
-    @assert imgdata.data[0] === 0;
-    imgdata.data[0] = 0.5;
-    @assert imgdata.data[0] === 0;
-    imgdata.data[0] = 0.501;
-    @assert imgdata.data[0] === 1;
-    imgdata.data[0] = 1.499;
-    @assert imgdata.data[0] === 1;
-    imgdata.data[0] = 1.5;
-    @assert imgdata.data[0] === 2;
-    imgdata.data[0] = 1.501;
-    @assert imgdata.data[0] === 2;
-    imgdata.data[0] = 2.5;
-    @assert imgdata.data[0] === 2;
-    imgdata.data[0] = 3.5;
-    @assert imgdata.data[0] === 4;
-    imgdata.data[0] = 252.5;
-    @assert imgdata.data[0] === 252;
-    imgdata.data[0] = 253.5;
-    @assert imgdata.data[0] === 254;
-    imgdata.data[0] = 254.5;
-    @assert imgdata.data[0] === 254;
-    imgdata.data[0] = 256.5;
-    @assert imgdata.data[0] === 255;
-    imgdata.data[0] = -0.5;
-    @assert imgdata.data[0] === 0;
-    imgdata.data[0] = -1.5;
-    @assert imgdata.data[0] === 0;
-
-
-
-- name: 2d.imageData.put.null
-  desc: putImageData() with null imagedata throws TypeError
-  testing:
-    - 2d.imageData.put.wrongtype
-  code: |
-    @assert throws TypeError ctx.putImageData(null, 0, 0);
-
-- name: 2d.imageData.put.nonfinite
-  desc: putImageData() throws TypeError if arguments are not finite
-  notes: *bindings
-  testing:
-    - 2d.imageData.put.nonfinite
-  code: |
-    var imgdata = ctx.getImageData(0, 0, 10, 10);
-    @nonfinite @assert throws TypeError ctx.putImageData(<imgdata>, <10 Infinity -Infinity NaN>, <10 Infinity -Infinity NaN>);
-    @nonfinite @assert throws TypeError ctx.putImageData(<imgdata>, <10 Infinity -Infinity NaN>, <10 Infinity -Infinity NaN>, <10 Infinity -Infinity NaN>, <10 Infinity -Infinity NaN>, <10 Infinity -Infinity NaN>, <10 Infinity -Infinity NaN>);
-
-- name: 2d.imageData.put.basic
-  desc: putImageData() puts image data from getImageData() onto the canvas
-  testing:
-    - 2d.imageData.put.normal
-    - 2d.imageData.put.3arg
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50)
-    var imgdata = ctx.getImageData(0, 0, 100, 50);
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50)
-    ctx.putImageData(imgdata, 0, 0);
-    @assert pixel 50,25 ==~ 0,255,0,255;
-  expected: green
-
-- name: 2d.imageData.put.created
-  desc: putImageData() puts image data from createImageData() onto the canvas
-  testing:
-    - 2d.imageData.put.normal
-  code: |
-    var imgdata = ctx.createImageData(100, 50);
-    for (var i = 0; i < imgdata.data.length; i += 4) {
-        imgdata.data[i] = 0;
-        imgdata.data[i+1] = 255;
-        imgdata.data[i+2] = 0;
-        imgdata.data[i+3] = 255;
-    }
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50)
-    ctx.putImageData(imgdata, 0, 0);
-    @assert pixel 50,25 ==~ 0,255,0,255;
-  expected: green
-
-- name: 2d.imageData.put.wrongtype
-  desc: putImageData() does not accept non-ImageData objects
-  testing:
-    - 2d.imageData.put.wrongtype
-  code: |
-    var imgdata = { width: 1, height: 1, data: [255, 0, 0, 255] };
-    @assert throws TypeError ctx.putImageData(imgdata, 0, 0);
-    @assert throws TypeError ctx.putImageData("cheese", 0, 0);
-    @assert throws TypeError ctx.putImageData(42, 0, 0);
-  expected: green
-
-- name: 2d.imageData.put.cross
-  desc: putImageData() accepts image data got from a different canvas
-  testing:
-    - 2d.imageData.put.normal
-  code: |
-    var canvas2 = document.createElement('canvas');
-    var ctx2 = canvas2.getContext('2d');
-    ctx2.fillStyle = '#0f0';
-    ctx2.fillRect(0, 0, 100, 50)
-    var imgdata = ctx2.getImageData(0, 0, 100, 50);
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50)
-    ctx.putImageData(imgdata, 0, 0);
-    @assert pixel 50,25 ==~ 0,255,0,255;
-  expected: green
-
-- name: 2d.imageData.put.alpha
-  desc: putImageData() puts non-solid image data correctly
-  testing:
-    - 2d.imageData.put.normal
-  code: |
-    ctx.fillStyle = 'rgba(0, 255, 0, 0.25)';
-    ctx.fillRect(0, 0, 100, 50)
-    var imgdata = ctx.getImageData(0, 0, 100, 50);
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50)
-    ctx.putImageData(imgdata, 0, 0);
-    @assert pixel 50,25 ==~ 0,255,0,64;
-  expected: |
-    size 100 50
-    cr.set_source_rgba(0, 1, 0, 0.25)
-    cr.rectangle(0, 0, 100, 50)
-    cr.fill()
-
-- name: 2d.imageData.put.modified
-  desc: putImageData() puts modified image data correctly
-  testing:
-    - 2d.imageData.put.normal
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50)
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(45, 20, 10, 10)
-    var imgdata = ctx.getImageData(45, 20, 10, 10);
-    for (var i = 0, len = imgdata.width*imgdata.height*4; i < len; i += 4)
-    {
-        imgdata.data[i] = 0;
-        imgdata.data[i+1] = 255;
-    }
-    ctx.putImageData(imgdata, 45, 20);
-    @assert pixel 50,25 ==~ 0,255,0,255;
-  expected: green
-
-- name: 2d.imageData.put.dirty.zero
-  desc: putImageData() with zero-sized dirty rectangle puts nothing
-  testing:
-    - 2d.imageData.put.normal
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50)
-    var imgdata = ctx.getImageData(0, 0, 100, 50);
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50)
-    ctx.putImageData(imgdata, 0, 0, 0, 0, 0, 0);
-    @assert pixel 50,25 ==~ 0,255,0,255;
-  expected: green
-
-- name: 2d.imageData.put.dirty.rect1
-  desc: putImageData() only modifies areas inside the dirty rectangle, using width and height
-  testing:
-    - 2d.imageData.put.normal
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50)
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 20, 20)
-
-    var imgdata = ctx.getImageData(0, 0, 100, 50);
-
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50)
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(40, 20, 20, 20)
-    ctx.putImageData(imgdata, 40, 20, 0, 0, 20, 20);
-
-    @assert pixel 50,25 ==~ 0,255,0,255;
-    @assert pixel 35,25 ==~ 0,255,0,255;
-    @assert pixel 65,25 ==~ 0,255,0,255;
-    @assert pixel 50,15 ==~ 0,255,0,255;
-    @assert pixel 50,45 ==~ 0,255,0,255;
-  expected: green
-
-- name: 2d.imageData.put.dirty.rect2
-  desc: putImageData() only modifies areas inside the dirty rectangle, using x and y
-  testing:
-    - 2d.imageData.put.normal
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50)
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(60, 30, 20, 20)
-
-    var imgdata = ctx.getImageData(0, 0, 100, 50);
-
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50)
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(40, 20, 20, 20)
-    ctx.putImageData(imgdata, -20, -10, 60, 30, 20, 20);
-
-    @assert pixel 50,25 ==~ 0,255,0,255;
-    @assert pixel 35,25 ==~ 0,255,0,255;
-    @assert pixel 65,25 ==~ 0,255,0,255;
-    @assert pixel 50,15 ==~ 0,255,0,255;
-    @assert pixel 50,45 ==~ 0,255,0,255;
-  expected: green
-
-- name: 2d.imageData.put.dirty.negative
-  desc: putImageData() handles negative-sized dirty rectangles correctly
-  testing:
-    - 2d.imageData.put.normal
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50)
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 20, 20)
-
-    var imgdata = ctx.getImageData(0, 0, 100, 50);
-
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50)
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(40, 20, 20, 20)
-    ctx.putImageData(imgdata, 40, 20, 20, 20, -20, -20);
-
-    @assert pixel 50,25 ==~ 0,255,0,255;
-    @assert pixel 35,25 ==~ 0,255,0,255;
-    @assert pixel 65,25 ==~ 0,255,0,255;
-    @assert pixel 50,15 ==~ 0,255,0,255;
-    @assert pixel 50,45 ==~ 0,255,0,255;
-  expected: green
-
-- name: 2d.imageData.put.dirty.outside
-  desc: putImageData() handles dirty rectangles outside the canvas correctly
-  testing:
-    - 2d.imageData.put.normal
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50)
-
-    var imgdata = ctx.getImageData(0, 0, 100, 50);
-
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50)
-
-    ctx.putImageData(imgdata, 100, 20, 20, 20, -20, -20);
-    ctx.putImageData(imgdata, 200, 200, 0, 0, 100, 50);
-    ctx.putImageData(imgdata, 40, 20, -30, -20, 30, 20);
-    ctx.putImageData(imgdata, -30, 20, 0, 0, 30, 20);
-
-    @assert pixel 50,25 ==~ 0,255,0,255;
-    @assert pixel 98,15 ==~ 0,255,0,255;
-    @assert pixel 98,25 ==~ 0,255,0,255;
-    @assert pixel 98,45 ==~ 0,255,0,255;
-    @assert pixel 1,5 ==~ 0,255,0,255;
-    @assert pixel 1,25 ==~ 0,255,0,255;
-    @assert pixel 1,45 ==~ 0,255,0,255;
-  expected: green
-
-- name: 2d.imageData.put.unchanged
-  desc: putImageData(getImageData(...), ...) has no effect
-  testing:
-    - 2d.imageData.unchanged
-  code: |
-    var i = 0;
-    for (var y = 0; y < 16; ++y) {
-        for (var x = 0; x < 16; ++x, ++i) {
-            ctx.fillStyle = 'rgba(' + i + ',' + (Math.floor(i*1.5) % 256) + ',' + (Math.floor(i*23.3) % 256) + ',' + (i/256) + ')';
-            ctx.fillRect(x, y, 1, 1);
-        }
-    }
-    var imgdata1 = ctx.getImageData(0.1, 0.2, 15.8, 15.9);
-    var olddata = [];
-    for (var i = 0; i < imgdata1.data.length; ++i)
-        olddata[i] = imgdata1.data[i];
-
-    ctx.putImageData(imgdata1, 0.1, 0.2);
-
-    var imgdata2 = ctx.getImageData(0.1, 0.2, 15.8, 15.9);
-    for (var i = 0; i < imgdata2.data.length; ++i) {
-        @assert olddata[i] === imgdata2.data[i];
-    }
-
-- name: 2d.imageData.put.unaffected
-  desc: putImageData() is not affected by context state
-  testing:
-    - 2d.imageData.unaffected
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50)
-    var imgdata = ctx.getImageData(0, 0, 100, 50);
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50)
-    ctx.globalAlpha = 0.1;
-    ctx.globalCompositeOperation = 'destination-atop';
-    ctx.shadowColor = '#f00';
-    ctx.shadowBlur = 1;
-    ctx.translate(100, 50);
-    ctx.scale(0.1, 0.1);
-    ctx.putImageData(imgdata, 0, 0);
-    @assert pixel 50,25 ==~ 0,255,0,255;
-  expected: green
-
-- name: 2d.imageData.put.clip
-  desc: putImageData() is not affected by clipping regions
-  testing:
-    - 2d.imageData.unaffected
-  code: |
-    ctx.fillStyle = '#0f0';
-    ctx.fillRect(0, 0, 100, 50)
-    var imgdata = ctx.getImageData(0, 0, 100, 50);
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50)
-    ctx.beginPath();
-    ctx.rect(0, 0, 50, 50);
-    ctx.clip();
-    ctx.putImageData(imgdata, 0, 0);
-    @assert pixel 25,25 ==~ 0,255,0,255;
-    @assert pixel 75,25 ==~ 0,255,0,255;
-  expected: green
-
-- name: 2d.imageData.put.path
-  desc: putImageData() does not affect the current path
-  testing:
-    - 2d.imageData.put.normal
-  code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50)
-    ctx.rect(0, 0, 100, 50);
-    var imgdata = ctx.getImageData(0, 0, 100, 50);
-    ctx.putImageData(imgdata, 0, 0);
-    ctx.fillStyle = '#0f0';
-    ctx.fill();
-    @assert pixel 50,25 ==~ 0,255,0,255;
-  expected: green
-
-- name: 2d.scrollPathIntoView.basic
-  desc: scrollPathIntoView() works
-  testing:
-    - 2d.scrollPathIntoView.basic
-  code: |
-    var div = document.createElement('div');
-    div.style.cssText = 'width: 200vw; height: 200vh';
-    document.body.appendChild(div);
-    canvas.style.cssText = 'position: absolute; top: 100px; left: 200px; border: none;';
-    window.scrollTo(0, 0);
-
-    ctx.beginPath();
-    ctx.rect(4, 8, 16, 32);
-    ctx.scrollPathIntoView();
-    var rect = canvas.getBoundingClientRect();
-    @assert Math.round(rect.top) === -8;
-    @assert Math.round(rect.left) === 200;
-
-- name: 2d.scrollPathIntoView.verticalLR
-  desc: scrollPathIntoView() works in vertical-lr writing mode
-  testing:
-    - 2d.scrollPathIntoView.basic
-  code: |
-    document.documentElement.style.cssText = 'writing-mode: vertical-lr';
-    var div = document.createElement('div');
-    div.style.cssText = 'width: 200vw; height: 200vh';
-    document.body.appendChild(div);
-    canvas.style.cssText = 'position: absolute; top: 100px; left: 200px; border: none;';
-    window.scrollTo(0, 0);
-
-    ctx.beginPath();
-    ctx.rect(4, 8, 16, 32);
-    ctx.scrollPathIntoView();
-    var rect = canvas.getBoundingClientRect();
-    @assert Math.round(rect.top) === 100;
-    @assert Math.round(rect.left) === -4;
-
-- name: 2d.scrollPathIntoView.verticalRL
-  desc: scrollPathIntoView() works in vertical-rl writing mode
-  testing:
-    - 2d.scrollPathIntoView.basic
-  code: |
-    document.documentElement.style.cssText = 'writing-mode: vertical-rl';
-    var div = document.createElement('div');
-    div.style.cssText = 'width: 200vw; height: 200vh';
-    document.body.appendChild(div);
-    canvas.style.cssText = 'position: absolute; top: 100px; right: 200px; border: none;';
-    window.scrollTo(0, 0);
-
-    ctx.beginPath();
-    ctx.rect(4, 8, 16, 32);
-    ctx.scrollPathIntoView();
-    var rect = canvas.getBoundingClientRect();
-    var viewportWidth = document.scrollingElement.clientWidth;
-    var canvasWidth = canvas.width;
-    @assert Math.round(rect.top) === 100;
-    @assert Math.round(rect.right) === viewportWidth + (canvasWidth - 4 - 16);
-
-- name: 2d.path.isPointInPath.basic
-  desc: Verify the winding rule in isPointInPath works for for rect path.
-  testing:
-    - 2d.isPointInPath.basic
-  code: |
-    canvas.width = 200;
-    canvas.height = 200;
-
-    // Testing default isPointInPath
-    ctx.beginPath();
-    ctx.rect(0, 0, 100, 100);
-    ctx.rect(25, 25, 50, 50);
-    @assert ctx.isPointInPath(50, 50) === true;
-    @assert ctx.isPointInPath(NaN, 50) === false;
-    @assert ctx.isPointInPath(50, NaN) === false;
-
-    // Testing nonzero isPointInPath
-    ctx.beginPath();
-    ctx.rect(0, 0, 100, 100);
-    ctx.rect(25, 25, 50, 50);
-    @assert ctx.isPointInPath(50, 50, 'nonzero') === true;
-
-    // Testing evenodd isPointInPath
-    ctx.beginPath();
-    ctx.rect(0, 0, 100, 100);
-    ctx.rect(25, 25, 50, 50);
-    @assert ctx.isPointInPath(50, 50, 'evenodd') === false;
-
-    // Testing extremely large scale
-    ctx.save();
-    ctx.scale(Number.MAX_VALUE, Number.MAX_VALUE);
-    ctx.beginPath();
-    ctx.rect(-10, -10, 20, 20);
-    @assert ctx.isPointInPath(0, 0, 'nonzero') === true;
-    @assert ctx.isPointInPath(0, 0, 'evenodd') === true;
-    ctx.restore();
-
-    // Check with non-invertible ctm.
-    ctx.save();
-    ctx.scale(0, 0);
-    ctx.beginPath();
-    ctx.rect(-10, -10, 20, 20);
-    @assert ctx.isPointInPath(0, 0, 'nonzero') === false;
-    @assert ctx.isPointInPath(0, 0, 'evenodd') === false;
-    ctx.restore();
-
-- name: 2d.path.isPointInpath.multi.path
-  desc: Verify the winding rule in isPointInPath works for path object.
-  testing:
-    - 2d.isPointInPath.basic
-  code: |
-    canvas.width = 200;
-    canvas.height = 200;
-
-    // Testing default isPointInPath with Path object');
-    path = new Path2D();
-    path.rect(0, 0, 100, 100);
-    path.rect(25, 25, 50, 50);
-    @assert ctx.isPointInPath(path, 50, 50) === true;
-    @assert ctx.isPointInPath(path, 50, 50, undefined) === true;
-    @assert ctx.isPointInPath(path, NaN, 50) === false;
-    @assert ctx.isPointInPath(path, 50, NaN) === false;
-
-    // Testing nonzero isPointInPath with Path object');
-    path = new Path2D();
-    path.rect(0, 0, 100, 100);
-    path.rect(25, 25, 50, 50);
-    @assert ctx.isPointInPath(path, 50, 50, 'nonzero') === true;
-
-    // Testing evenodd isPointInPath with Path object');
-    path = new Path2D();
-    path.rect(0, 0, 100, 100);
-    path.rect(25, 25, 50, 50);
-    assert_false(ctx.isPointInPath(path, 50, 50, 'evenodd'));
-
-- name: 2d.path.isPointInpath.invalid
-  desc: Verify isPointInPath throws exceptions with invalid inputs.
-  testing:
-    - 2d.isPointInPath.basic
-  code: |
-    canvas.width = 200;
-    canvas.height = 200;
-    path = new Path2D();
-    path.rect(0, 0, 100, 100);
-    path.rect(25, 25, 50, 50);
-    // Testing invalid enumeration isPointInPath (w/ and w/o Path object');
-    @assert throws TypeError ctx.isPointInPath(path, 50, 50, 'gazonk');
-    @assert throws TypeError ctx.isPointInPath(50, 50, 'gazonk');
-
-    // Testing invalid type isPointInPath with Path object');
-    @assert throws TypeError ctx.isPointInPath(null, 50, 50);
-    @assert throws TypeError ctx.isPointInPath(null, 50, 50, 'nonzero');
-    @assert throws TypeError ctx.isPointInPath(null, 50, 50, 'evenodd');
-    @assert throws TypeError ctx.isPointInPath(null, 50, 50, null);
-    @assert throws TypeError ctx.isPointInPath(path, 50, 50, null);
-    @assert throws TypeError ctx.isPointInPath(undefined, 50, 50);
-    @assert throws TypeError ctx.isPointInPath(undefined, 50, 50, 'nonzero');
-    @assert throws TypeError ctx.isPointInPath(undefined, 50, 50, 'evenodd');
-    @assert throws TypeError ctx.isPointInPath(undefined, 50, 50, undefined);
-    @assert throws TypeError ctx.isPointInPath([], 50, 50);
-    @assert throws TypeError ctx.isPointInPath([], 50, 50, 'nonzero');
-    @assert throws TypeError ctx.isPointInPath([], 50, 50, 'evenodd');
-    @assert throws TypeError ctx.isPointInPath({}, 50, 50);
-    @assert throws TypeError ctx.isPointInPath({}, 50, 50, 'nonzero');
-    @assert throws TypeError ctx.isPointInPath({}, 50, 50, 'evenodd');
-
-- name: 2d.scrollPathIntoView.path
-  desc: scrollPathIntoView() with path argument works
-  testing:
-    - 2d.scrollPathIntoView.basic
-  code: |
-    var div = document.createElement('div');
-    div.style.cssText = 'width: 200vw; height: 200vh';
-    document.body.appendChild(div);
-    canvas.style.cssText = 'position: absolute; top: 100px; left: 200px; border: none;';
-    window.scrollTo(0, 0);
-
-    var path = new Path2D();
-    path.rect(4, 8, 16, 32);
-    ctx.scrollPathIntoView(path);
-    var rect = canvas.getBoundingClientRect();
-    @assert Math.round(rect.top) === -8;
-    @assert Math.round(rect.left) === 200;
-
-- name: 2d.shadow.filter.value
-  desc: test if ctx.filter works correctly
-  testing:
-    - 2d.filter.value
-  code: |
-    @assert ctx.filter == 'none';
-    ctx.filter = 'blur(5px)';
-    @assert ctx.filter == 'blur(5px)';
-    ctx.save();
-    ctx.filter = 'none';
-    @assert ctx.filter == 'none';
-    ctx.restore();
-    @assert ctx.filter == 'blur(5px)';
-
-    ctx.filter = 'blur(10)';
-    @assert ctx.filter == 'blur(5px)';
-    ctx.filter = 'blur 10px';
-    @assert ctx.filter == 'blur(5px)';
-
-    ctx.filter = 'inherit';
-    @assert ctx.filter == 'blur(5px)';
-    ctx.filter = 'initial';
-    @assert ctx.filter == 'blur(5px)';
-    ctx.filter = 'unset';
-    @assert ctx.filter == 'blur(5px)';
-
-    ctx.filter = '';
-    @assert ctx.filter == 'blur(5px)';
-    ctx.filter = null;
-    @assert ctx.filter == 'blur(5px)';
-    ctx.filter = undefined;
-    @assert ctx.filter == 'blur(5px)';
-
-    ctx.filter = 'blur(  5px)';
-    assert_equals(ctx.filter, 'blur(  5px)');
-
-- name: 2d.line.invalid.strokestyle
-  desc: Verify correct behavior of canvas on an invalid strokeStyle()
-  testing:
-    - 2d.strokestyle.invalid
-  code: |
-    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;
-    @assert imgdata[5] == 255;
-    @assert imgdata[6] == 0;
-
-- name: 2d.video.invalid
-  desc: Verify test doesn't crash with invalid video.
-  testing:
-    - 2d.video.invalid
-  code: |
-    var v = document.createElement('video');
-    v.play();
-    // Test is deliberately not waiting for the 'playing' event to fire.
-    ctx.createPattern(v, 'repeat-x');
-    ctx.drawImage(v, 0, 0);
diff --git a/tests/wpt/web-platform-tests/html/canvas/tools/yaml/element/compositing.yaml b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/element/compositing.yaml
new file mode 100644
index 00000000000..2ad2fc7586a
--- /dev/null
+++ b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/element/compositing.yaml
@@ -0,0 +1,207 @@
+- name: 2d.composite.globalAlpha.range
+  testing:
+  - 2d.composite.globalAlpha.range
+  code: |
+    ctx.globalAlpha = 0.5;
+    var a = ctx.globalAlpha; // might not be exactly 0.5, if it is rounded/quantised, so remember for future comparisons
+    ctx.globalAlpha = 1.1;
+    @assert ctx.globalAlpha === a;
+    ctx.globalAlpha = -0.1;
+    @assert ctx.globalAlpha === a;
+    ctx.globalAlpha = 0;
+    @assert ctx.globalAlpha === 0;
+    ctx.globalAlpha = 1;
+    @assert ctx.globalAlpha === 1;
+
+- name: 2d.composite.globalAlpha.invalid
+  testing:
+  - 2d.composite.globalAlpha.range
+  code: |
+    ctx.globalAlpha = 0.5;
+    var a = ctx.globalAlpha; // might not be exactly 0.5, if it is rounded/quantised, so remember for future comparisons
+    ctx.globalAlpha = Infinity;
+    @assert ctx.globalAlpha === a;
+    ctx.globalAlpha = -Infinity;
+    @assert ctx.globalAlpha === a;
+    ctx.globalAlpha = NaN;
+    @assert ctx.globalAlpha === a;
+
+- name: 2d.composite.globalAlpha.default
+  testing:
+  - 2d.composite.globalAlpha.default
+  code: |
+    @assert ctx.globalAlpha === 1.0;
+
+- name: 2d.composite.globalAlpha.fill
+  testing:
+  - 2d.composite.globalAlpha.shape
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.globalAlpha = 0.01; // avoid any potential alpha=0 optimisations
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 50,25 ==~ 2,253,0,255;
+  expected: green
+
+- name: 2d.composite.globalAlpha.image
+  testing:
+  - 2d.composite.globalAlpha.image
+  images:
+  - red.png
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.globalAlpha = 0.01; // avoid any potential alpha=0 optimisations
+    ctx.drawImage(document.getElementById('red.png'), 0, 0);
+    @assert pixel 50,25 ==~ 2,253,0,255;
+  expected: green
+
+- name: 2d.composite.globalAlpha.canvas
+  testing:
+  - 2d.composite.globalAlpha.image
+  code: |
+    var canvas2 = document.createElement('canvas');
+    canvas2.width = 100;
+    canvas2.height = 50;
+    var ctx2 = canvas2.getContext('2d');
+    ctx2.fillStyle = '#f00';
+    ctx2.fillRect(0, 0, 100, 50);
+
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.globalAlpha = 0.01; // avoid any potential alpha=0 optimisations
+    ctx.drawImage(canvas2, 0, 0);
+    @assert pixel 50,25 ==~ 2,253,0,255;
+  expected: green
+
+- name: 2d.composite.globalAlpha.imagepattern
+  testing:
+  - 2d.composite.globalAlpha.image
+  images:
+  - red.png
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = ctx.createPattern(document.getElementById('red.png'), 'no-repeat');
+    ctx.globalAlpha = 0.01; // avoid any potential alpha=0 optimisations
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 50,25 ==~ 2,253,0,255;
+  expected: green
+
+- name: 2d.composite.globalAlpha.canvaspattern
+  testing:
+  - 2d.composite.globalAlpha.image
+  code: |
+    var canvas2 = document.createElement('canvas');
+    canvas2.width = 100;
+    canvas2.height = 50;
+    var ctx2 = canvas2.getContext('2d');
+    ctx2.fillStyle = '#f00';
+    ctx2.fillRect(0, 0, 100, 50);
+
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = ctx.createPattern(canvas2, 'no-repeat');
+    ctx.globalAlpha = 0.01; // avoid any potential alpha=0 optimisations
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 50,25 ==~ 2,253,0,255;
+  expected: green
+
+- name: 2d.composite.globalAlpha.canvascopy
+  testing:
+  - 2d.composite.globalAlpha.image
+  code: |
+    var canvas2 = document.createElement('canvas');
+    canvas2.width = 100;
+    canvas2.height = 50;
+    var ctx2 = canvas2.getContext('2d');
+    ctx2.fillStyle = '#0f0';
+    ctx2.fillRect(0, 0, 100, 50);
+
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.globalCompositeOperation = 'copy'
+    ctx.globalAlpha = 0.51;
+    ctx.drawImage(canvas2, 0, 0);
+    @assert pixel 50,25 ==~ 0,255,0,130;
+  expected: green
+
+
+- name: 2d.composite.operation.get
+  testing:
+  - 2d.composite.operation
+  code: |
+    var modes = ['source-atop', 'source-in', 'source-out', 'source-over',
+        'destination-atop', 'destination-in', 'destination-out', 'destination-over',
+        'lighter', 'copy', 'xor'];
+    for (var i = 0; i < modes.length; ++i)
+    {
+        ctx.globalCompositeOperation = modes[i];
+        @assert ctx.globalCompositeOperation === modes[i];
+    }
+
+- name: 2d.composite.operation.unrecognised
+  testing:
+  - 2d.composite.operation.unrecognised
+  code: |
+    ctx.globalCompositeOperation = 'xor';
+    ctx.globalCompositeOperation = 'nonexistent';
+    @assert ctx.globalCompositeOperation === 'xor';
+
+- name: 2d.composite.operation.darker
+  testing:
+  - 2d.composite.operation.unrecognised
+  code: |
+    ctx.globalCompositeOperation = 'xor';
+    ctx.globalCompositeOperation = 'darker';
+    @assert ctx.globalCompositeOperation === 'xor';
+
+- name: 2d.composite.operation.over
+  testing:
+  - 2d.composite.operation.unrecognised
+  code: |
+    ctx.globalCompositeOperation = 'xor';
+    ctx.globalCompositeOperation = 'over';
+    @assert ctx.globalCompositeOperation === 'xor';
+
+- name: 2d.composite.operation.clear
+  testing:
+  - 2d.composite.operation.unrecognised
+  code: |
+    ctx.globalCompositeOperation = 'xor';
+    ctx.globalCompositeOperation = 'clear';
+    @assert ctx.globalCompositeOperation === 'clear';
+
+- name: 2d.composite.operation.highlight
+  testing:
+  - 2d.composite.operation.unrecognised
+  code: |
+    ctx.globalCompositeOperation = 'xor';
+    ctx.globalCompositeOperation = 'highlight';
+    @assert ctx.globalCompositeOperation === 'xor';
+
+- name: 2d.composite.operation.nullsuffix
+  testing:
+  - 2d.composite.operation.exact
+  code: |
+    ctx.globalCompositeOperation = 'xor';
+    ctx.globalCompositeOperation = 'source-over\0';
+    @assert ctx.globalCompositeOperation === 'xor';
+
+- name: 2d.composite.operation.casesensitive
+  testing:
+  - 2d.composite.operation.casesensitive
+  code: |
+    ctx.globalCompositeOperation = 'xor';
+    ctx.globalCompositeOperation = 'Source-over';
+    @assert ctx.globalCompositeOperation === 'xor';
+
+- name: 2d.composite.operation.default
+  testing:
+  - 2d.composite.operation.default
+  code: |
+    @assert ctx.globalCompositeOperation === 'source-over';
+
+
diff --git a/tests/wpt/web-platform-tests/html/canvas/tools/yaml/element/conformance-requirements.yaml b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/element/conformance-requirements.yaml
new file mode 100644
index 00000000000..386fe0dd671
--- /dev/null
+++ b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/element/conformance-requirements.yaml
@@ -0,0 +1,197 @@
+- name: 2d.type.delete
+  desc: window.CanvasRenderingContext2D is Configurable
+  notes: &bindings Defined in "Web IDL" (draft)
+  testing:
+  - context.2d.type
+  code: |
+    @assert window.CanvasRenderingContext2D !== undefined;
+    @assert delete window.CanvasRenderingContext2D === true;
+    @assert window.CanvasRenderingContext2D === undefined;
+
+- name: 2d.voidreturn
+  desc: void methods return undefined
+  notes: *bindings
+  images:
+  - yellow.png
+  code: |
+    @assert ctx.save() === undefined;
+    @assert ctx.restore() === undefined;
+    @assert ctx.scale(1, 1) === undefined;
+    @assert ctx.rotate(0) === undefined;
+    @assert ctx.translate(0, 0) === undefined;
+    if (ctx.transform) { // (avoid spurious failures, since the aim here is not to test that all features are supported)
+        @assert ctx.transform(1, 0, 0, 1, 0, 0) === undefined;
+    }
+    if (ctx.setTransform) {
+        @assert ctx.setTransform(1, 0, 0, 1, 0, 0) === undefined;
+        @assert ctx.setTransform() === undefined;
+    }
+    @assert ctx.clearRect(0, 0, 0, 0) === undefined;
+    @assert ctx.fillRect(0, 0, 0, 0) === undefined;
+    @assert ctx.strokeRect(0, 0, 0, 0) === undefined;
+    @assert ctx.beginPath() === undefined;
+    @assert ctx.closePath() === undefined;
+    @assert ctx.moveTo(0, 0) === undefined;
+    @assert ctx.lineTo(0, 0) === undefined;
+    @assert ctx.quadraticCurveTo(0, 0, 0, 0) === undefined;
+    @assert ctx.bezierCurveTo(0, 0, 0, 0, 0, 0) === undefined;
+    @assert ctx.arcTo(0, 0, 0, 0, 1) === undefined;
+    @assert ctx.rect(0, 0, 0, 0) === undefined;
+    @assert ctx.arc(0, 0, 1, 0, 0, true) === undefined;
+    @assert ctx.fill() === undefined;
+    @assert ctx.stroke() === undefined;
+    @assert ctx.clip() === undefined;
+    if (ctx.fillText) {
+        @assert ctx.fillText('test', 0, 0) === undefined;
+        @assert ctx.strokeText('test', 0, 0) === undefined;
+    }
+    if (ctx.putImageData) {
+        @assert ctx.putImageData(ctx.getImageData(0, 0, 1, 1), 0, 0) === undefined;
+    }
+    @assert ctx.drawImage(document.getElementById('yellow.png'), 0, 0, 1, 1, 0, 0, 0, 0) === undefined;
+    @assert ctx.drawImage(canvas, 0, 0, 1, 1, 0, 0, 0, 0) === undefined;
+    @assert ctx.createLinearGradient(0, 0, 0, 0).addColorStop(0, 'white') === undefined;
+
+- name: 2d.missingargs
+  desc: Missing arguments cause TypeError
+  code: |
+    @assert throws TypeError ctx.scale();
+    @assert throws TypeError ctx.scale(1);
+    @assert throws TypeError ctx.rotate();
+    @assert throws TypeError ctx.translate();
+    @assert throws TypeError ctx.translate(0);
+    if (ctx.transform) { // (avoid spurious failures, since the aim here is not to test that all features are supported)
+        @assert throws TypeError ctx.transform();
+        @assert throws TypeError ctx.transform(1);
+        @assert throws TypeError ctx.transform(1, 0);
+        @assert throws TypeError ctx.transform(1, 0, 0);
+        @assert throws TypeError ctx.transform(1, 0, 0, 1);
+        @assert throws TypeError ctx.transform(1, 0, 0, 1, 0);
+    }
+    if (ctx.setTransform) {
+        @assert throws TypeError ctx.setTransform(1);
+        @assert throws TypeError ctx.setTransform(1, 0);
+        @assert throws TypeError ctx.setTransform(1, 0, 0);
+        @assert throws TypeError ctx.setTransform(1, 0, 0, 1);
+        @assert throws TypeError ctx.setTransform(1, 0, 0, 1, 0);
+    }
+    @assert throws TypeError ctx.createLinearGradient();
+    @assert throws TypeError ctx.createLinearGradient(0);
+    @assert throws TypeError ctx.createLinearGradient(0, 0);
+    @assert throws TypeError ctx.createLinearGradient(0, 0, 1);
+    @assert throws TypeError ctx.createRadialGradient();
+    @assert throws TypeError ctx.createRadialGradient(0);
+    @assert throws TypeError ctx.createRadialGradient(0, 0);
+    @assert throws TypeError ctx.createRadialGradient(0, 0, 1);
+    @assert throws TypeError ctx.createRadialGradient(0, 0, 1, 0);
+    @assert throws TypeError ctx.createRadialGradient(0, 0, 1, 0, 0);
+    @assert throws TypeError ctx.createPattern(canvas);
+    @assert throws TypeError ctx.clearRect();
+    @assert throws TypeError ctx.clearRect(0);
+    @assert throws TypeError ctx.clearRect(0, 0);
+    @assert throws TypeError ctx.clearRect(0, 0, 0);
+    @assert throws TypeError ctx.fillRect();
+    @assert throws TypeError ctx.fillRect(0);
+    @assert throws TypeError ctx.fillRect(0, 0);
+    @assert throws TypeError ctx.fillRect(0, 0, 0);
+    @assert throws TypeError ctx.strokeRect();
+    @assert throws TypeError ctx.strokeRect(0);
+    @assert throws TypeError ctx.strokeRect(0, 0);
+    @assert throws TypeError ctx.strokeRect(0, 0, 0);
+    @assert throws TypeError ctx.moveTo();
+    @assert throws TypeError ctx.moveTo(0);
+    @assert throws TypeError ctx.lineTo();
+    @assert throws TypeError ctx.lineTo(0);
+    @assert throws TypeError ctx.quadraticCurveTo();
+    @assert throws TypeError ctx.quadraticCurveTo(0);
+    @assert throws TypeError ctx.quadraticCurveTo(0, 0);
+    @assert throws TypeError ctx.quadraticCurveTo(0, 0, 0);
+    @assert throws TypeError ctx.bezierCurveTo();
+    @assert throws TypeError ctx.bezierCurveTo(0);
+    @assert throws TypeError ctx.bezierCurveTo(0, 0);
+    @assert throws TypeError ctx.bezierCurveTo(0, 0, 0);
+    @assert throws TypeError ctx.bezierCurveTo(0, 0, 0, 0);
+    @assert throws TypeError ctx.bezierCurveTo(0, 0, 0, 0, 0);
+    @assert throws TypeError ctx.arcTo();
+    @assert throws TypeError ctx.arcTo(0);
+    @assert throws TypeError ctx.arcTo(0, 0);
+    @assert throws TypeError ctx.arcTo(0, 0, 0);
+    @assert throws TypeError ctx.arcTo(0, 0, 0, 0);
+    @assert throws TypeError ctx.rect();
+    @assert throws TypeError ctx.rect(0);
+    @assert throws TypeError ctx.rect(0, 0);
+    @assert throws TypeError ctx.rect(0, 0, 0);
+    @assert throws TypeError ctx.arc();
+    @assert throws TypeError ctx.arc(0);
+    @assert throws TypeError ctx.arc(0, 0);
+    @assert throws TypeError ctx.arc(0, 0, 1);
+    @assert throws TypeError ctx.arc(0, 0, 1, 0);
+    // (6th argument to arc is optional)
+    if (ctx.isPointInPath) {
+        @assert throws TypeError ctx.isPointInPath();
+        @assert throws TypeError ctx.isPointInPath(0);
+    }
+    if (ctx.drawFocusRing) {
+        @assert throws TypeError ctx.drawFocusRing();
+        @assert throws TypeError ctx.drawFocusRing(canvas);
+        @assert throws TypeError ctx.drawFocusRing(canvas, 0);
+    }
+    if (ctx.fillText) {
+        @assert throws TypeError ctx.fillText();
+        @assert throws TypeError ctx.fillText('test');
+        @assert throws TypeError ctx.fillText('test', 0);
+        @assert throws TypeError ctx.strokeText();
+        @assert throws TypeError ctx.strokeText('test');
+        @assert throws TypeError ctx.strokeText('test', 0);
+        @assert throws TypeError ctx.measureText();
+    }
+    @assert throws TypeError ctx.drawImage();
+    @assert throws TypeError ctx.drawImage(canvas);
+    @assert throws TypeError ctx.drawImage(canvas, 0);
+    // TODO: n >= 3 args on drawImage could be either a valid overload,
+    // or too few for another overload, or too many for another
+    // overload - what should happen?
+    if (ctx.createImageData) {
+        @assert throws TypeError ctx.createImageData();
+        @assert throws TypeError ctx.createImageData(1);
+    }
+    if (ctx.getImageData) {
+        @assert throws TypeError ctx.getImageData();
+        @assert throws TypeError ctx.getImageData(0);
+        @assert throws TypeError ctx.getImageData(0, 0);
+        @assert throws TypeError ctx.getImageData(0, 0, 1);
+    }
+    if (ctx.putImageData) {
+        var imgdata = ctx.getImageData(0, 0, 1, 1);
+        @assert throws TypeError ctx.putImageData();
+        @assert throws TypeError ctx.putImageData(imgdata);
+        @assert throws TypeError ctx.putImageData(imgdata, 0);
+    }
+    var g = ctx.createLinearGradient(0, 0, 0, 0);
+    @assert throws TypeError g.addColorStop(); @moz-todo
+    @assert throws TypeError g.addColorStop(0); @moz-todo
+
+- name: 2d.coordinatespace
+  desc: Coordinate space goes from top-left to bottom-right
+  notes: This should not be upside down.
+  manual: We can't tell that getPixelData isn't using the wrong coordinate space too.
+  testing:
+  - 2d.coordinatespace
+  code: |
+    ctx.fillStyle = '#00f';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#0ff';
+    ctx.fillRect(0, 0, 50, 25);
+    @assert pixel 25,12 == 0,255,255,255;
+    @assert pixel 75,12 == 0,0,255,255;
+    @assert pixel 25,37 == 0,0,255,255;
+    @assert pixel 75,37 == 0,0,255,255;
+  expected: |
+    size 100 50
+    cr.set_source_rgb(0, 0, 1)
+    cr.rectangle(0, 0, 100, 50)
+    cr.fill()
+    cr.set_source_rgb(0, 1, 1)
+    cr.rectangle(0, 0, 50, 25)
+    cr.fill()
+
diff --git a/tests/wpt/web-platform-tests/html/canvas/tools/yaml/element/drawing-images-to-the-canvas.yaml b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/element/drawing-images-to-the-canvas.yaml
new file mode 100644
index 00000000000..208f1289f13
--- /dev/null
+++ b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/element/drawing-images-to-the-canvas.yaml
@@ -0,0 +1,608 @@
+- name: 2d.drawImage.3arg
+  testing:
+  - 2d.drawImage.defaultsource
+  - 2d.drawImage.defaultdest
+  images:
+  - red.png
+  - green.png
+  code: |
+    ctx.drawImage(document.getElementById('green.png'), 0, 0);
+    ctx.drawImage(document.getElementById('red.png'), -100, 0);
+    ctx.drawImage(document.getElementById('red.png'), 100, 0);
+    ctx.drawImage(document.getElementById('red.png'), 0, -50);
+    ctx.drawImage(document.getElementById('red.png'), 0, 50);
+
+    @assert pixel 0,0 ==~ 0,255,0,255;
+    @assert pixel 99,0 ==~ 0,255,0,255;
+    @assert pixel 0,49 ==~ 0,255,0,255;
+    @assert pixel 99,49 ==~ 0,255,0,255;
+  expected: green
+
+- name: 2d.drawImage.5arg
+  testing:
+  - 2d.drawImage.defaultsource
+  images:
+  - red.png
+  - green.png
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.drawImage(document.getElementById('green.png'), 50, 0, 50, 50);
+    ctx.drawImage(document.getElementById('red.png'), 0, 0, 50, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 50, 50);
+
+    @assert pixel 0,0 ==~ 0,255,0,255;
+    @assert pixel 99,0 ==~ 0,255,0,255;
+    @assert pixel 0,49 ==~ 0,255,0,255;
+    @assert pixel 99,49 ==~ 0,255,0,255;
+  expected: green
+
+- name: 2d.drawImage.9arg.basic
+  testing:
+  - 2d.drawImage.paint
+  images:
+  - green.png
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.drawImage(document.getElementById('green.png'), 0, 0, 100, 50, 0, 0, 100, 50);
+    @assert pixel 0,0 ==~ 0,255,0,255;
+    @assert pixel 99,0 ==~ 0,255,0,255;
+    @assert pixel 0,49 ==~ 0,255,0,255;
+    @assert pixel 99,49 ==~ 0,255,0,255;
+  expected: green
+
+- name: 2d.drawImage.9arg.sourcepos
+  testing:
+  - 2d.drawImage.paint
+  images:
+  - rgrg-256x256.png
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.drawImage(document.getElementById('rgrg-256x256.png'), 140, 20, 100, 50, 0, 0, 100, 50);
+    @assert pixel 0,0 ==~ 0,255,0,255;
+    @assert pixel 99,0 ==~ 0,255,0,255;
+    @assert pixel 0,49 ==~ 0,255,0,255;
+    @assert pixel 99,49 ==~ 0,255,0,255;
+  expected: green
+
+- name: 2d.drawImage.9arg.sourcesize
+  testing:
+  - 2d.drawImage.paint
+  images:
+  - rgrg-256x256.png
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.drawImage(document.getElementById('rgrg-256x256.png'), 0, 0, 256, 256, 0, 0, 100, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 51, 26);
+    ctx.fillRect(49, 24, 51, 26);
+    @assert pixel 0,0 ==~ 0,255,0,255;
+    @assert pixel 99,0 ==~ 0,255,0,255;
+    @assert pixel 0,49 ==~ 0,255,0,255;
+    @assert pixel 99,49 ==~ 0,255,0,255;
+    @assert pixel 20,20 ==~ 0,255,0,255;
+    @assert pixel 80,20 ==~ 0,255,0,255;
+    @assert pixel 20,30 ==~ 0,255,0,255;
+    @assert pixel 80,30 ==~ 0,255,0,255;
+  expected: green
+
+- name: 2d.drawImage.9arg.destpos
+  testing:
+  - 2d.drawImage.paint
+  images:
+  - red.png
+  - green.png
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.drawImage(document.getElementById('green.png'), 0, 0, 100, 50, 0, 0, 100, 50);
+    ctx.drawImage(document.getElementById('red.png'), 0, 0, 100, 50, -100, 0, 100, 50);
+    ctx.drawImage(document.getElementById('red.png'), 0, 0, 100, 50, 100, 0, 100, 50);
+    ctx.drawImage(document.getElementById('red.png'), 0, 0, 100, 50, 0, -50, 100, 50);
+    ctx.drawImage(document.getElementById('red.png'), 0, 0, 100, 50, 0, 50, 100, 50);
+    @assert pixel 0,0 ==~ 0,255,0,255;
+    @assert pixel 99,0 ==~ 0,255,0,255;
+    @assert pixel 0,49 ==~ 0,255,0,255;
+    @assert pixel 99,49 ==~ 0,255,0,255;
+  expected: green
+
+- name: 2d.drawImage.9arg.destsize
+  testing:
+  - 2d.drawImage.paint
+  images:
+  - red.png
+  - green.png
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.drawImage(document.getElementById('green.png'), 1, 1, 1, 1, 0, 0, 100, 50);
+    ctx.drawImage(document.getElementById('red.png'), 0, 0, 100, 50, -50, 0, 50, 50);
+    ctx.drawImage(document.getElementById('red.png'), 0, 0, 100, 50, 100, 0, 50, 50);
+    ctx.drawImage(document.getElementById('red.png'), 0, 0, 100, 50, 0, -25, 100, 25);
+    ctx.drawImage(document.getElementById('red.png'), 0, 0, 100, 50, 0, 50, 100, 25);
+    @assert pixel 0,0 ==~ 0,255,0,255;
+    @assert pixel 99,0 ==~ 0,255,0,255;
+    @assert pixel 0,49 ==~ 0,255,0,255;
+    @assert pixel 99,49 ==~ 0,255,0,255;
+  expected: green
+
+- name: 2d.drawImage.canvas
+  testing:
+  - 2d.drawImage.paint
+  code: |
+    var canvas2 = document.createElement('canvas');
+    canvas2.width = 100;
+    canvas2.height = 50;
+    var ctx2 = canvas2.getContext('2d');
+    ctx2.fillStyle = '#0f0';
+    ctx2.fillRect(0, 0, 100, 50);
+
+    ctx.fillStyle = '#f00';
+    ctx.drawImage(canvas2, 0, 0);
+
+    @assert pixel 0,0 ==~ 0,255,0,255;
+    @assert pixel 99,0 ==~ 0,255,0,255;
+    @assert pixel 0,49 ==~ 0,255,0,255;
+    @assert pixel 99,49 ==~ 0,255,0,255;
+
+    ctx.drawImage(document.createElement('canvas'), 0, 0);
+
+    @assert pixel 0,0 ==~ 0,255,0,255;
+    @assert pixel 99,0 ==~ 0,255,0,255;
+    @assert pixel 0,49 ==~ 0,255,0,255;
+    @assert pixel 99,49 ==~ 0,255,0,255;
+  expected: green
+
+- name: 2d.drawImage.self.1
+  testing:
+  - 2d.drawImage.self
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 50, 50);
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(50, 0, 50, 50);
+    ctx.drawImage(canvas, 50, 0);
+
+    @assert pixel 0,0 ==~ 0,255,0,255;
+    @assert pixel 99,0 ==~ 0,255,0,255;
+    @assert pixel 0,49 ==~ 0,255,0,255;
+    @assert pixel 99,49 ==~ 0,255,0,255;
+  expected: green
+
+- name: 2d.drawImage.self.2
+  testing:
+  - 2d.drawImage.self
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 1, 100, 49);
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 1);
+    ctx.drawImage(canvas, 0, 1);
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 2);
+
+    @assert pixel 0,0 ==~ 0,255,0,255;
+    @assert pixel 99,0 ==~ 0,255,0,255;
+    @assert pixel 0,49 ==~ 0,255,0,255;
+    @assert pixel 99,49 ==~ 0,255,0,255;
+  expected: green
+
+- name: 2d.drawImage.null
+  testing:
+  - 2d.drawImage.IDL
+  code: |
+    @assert throws TypeError ctx.drawImage(null, 0, 0);
+
+- name: 2d.drawImage.wrongtype
+  desc: Incorrect image types in drawImage do not match any defined overloads, so
+    WebIDL throws a TypeError
+  notes: &bindings Defined in "Web IDL" (draft)
+  testing:
+  - 2d.drawImage.IDL
+  code: |
+    @assert throws TypeError ctx.drawImage(undefined, 0, 0);
+    @assert throws TypeError ctx.drawImage(0, 0, 0);
+    @assert throws TypeError ctx.drawImage("", 0, 0);
+    @assert throws TypeError ctx.drawImage(document.createElement('p'), 0, 0);
+
+- name: 2d.drawImage.floatsource
+  testing:
+  - 2d.drawImage.paint
+  images:
+  - green.png
+  code: |
+    ctx.drawImage(document.getElementById('green.png'), 10.1, 10.1, 0.1, 0.1, 0, 0, 100, 50);
+    @assert pixel 50,25 ==~ 0,255,0,255;
+  expected: green
+
+- name: 2d.drawImage.zerosource
+  desc: drawImage with zero-sized source rectangle draws nothing without exception
+  testing:
+  - 2d.drawImage.zerosource
+  images:
+  - red.png
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.drawImage(document.getElementById('red.png'), 10, 10, 0, 1, 0, 0, 100, 50);
+    ctx.drawImage(document.getElementById('red.png'), 10, 10, 1, 0, 0, 0, 100, 50);
+    ctx.drawImage(document.getElementById('red.png'), 10, 10, 0, 0, 0, 0, 100, 50);
+    @assert pixel 50,25 ==~ 0,255,0,255;
+  expected: green
+
+- name: 2d.drawImage.zerosource.image
+  desc: drawImage with zero-sized source rectangle from image throws INDEX_SIZE_ERR
+  testing:
+  - 2d.drawImage.zerosource
+  images:
+  - red-zerowidth.svg
+  - red-zeroheight.svg
+  - red-zerosize.svg
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    @assert throws INDEX_SIZE_ERR ctx.drawImage(document.getElementById('red-zerowidth.svg'), 0, 0, 100, 50);
+    @assert throws INDEX_SIZE_ERR ctx.drawImage(document.getElementById('red-zeroheight.svg'), 0, 0, 100, 50);
+    @assert throws INDEX_SIZE_ERR ctx.drawImage(document.getElementById('red-zerosize.svg'), 0, 0, 100, 50);
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.drawImage.negativesource
+  desc: Negative source width/height represents the correct rectangle
+  testing:
+  - 2d.drawImage.direction
+  mozilla: {throws: !!null ''}
+  images:
+  - ggrr-256x256.png
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.drawImage(document.getElementById('ggrr-256x256.png'), 100, 78, -100, 50, 0, 0, 50, 50);
+    ctx.drawImage(document.getElementById('ggrr-256x256.png'), 100, 128, -100, -50, 50, 0, 50, 50);
+    @assert pixel 1,1 ==~ 0,255,0,255;
+    @assert pixel 1,48 ==~ 0,255,0,255;
+    @assert pixel 98,1 ==~ 0,255,0,255;
+    @assert pixel 98,48 ==~ 0,255,0,255;
+    @assert pixel 48,1 ==~ 0,255,0,255;
+    @assert pixel 48,48 ==~ 0,255,0,255;
+    @assert pixel 51,1 ==~ 0,255,0,255;
+    @assert pixel 51,48 ==~ 0,255,0,255;
+    @assert pixel 25,25 ==~ 0,255,0,255;
+    @assert pixel 75,25 ==~ 0,255,0,255;
+  expected: green
+
+- name: 2d.drawImage.negativedest
+  desc: Negative destination width/height represents the correct rectangle
+  testing:
+  - 2d.drawImage.direction
+  mozilla: {throws: !!null ''}
+  images:
+  - ggrr-256x256.png
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.drawImage(document.getElementById('ggrr-256x256.png'), 100, 78, 50, 50, 0, 50, 50, -50);
+    ctx.drawImage(document.getElementById('ggrr-256x256.png'), 100, 128, 50, -50, 100, 50, -50, -50);
+    @assert pixel 1,1 ==~ 0,255,0,255;
+    @assert pixel 1,48 ==~ 0,255,0,255;
+    @assert pixel 98,1 ==~ 0,255,0,255;
+    @assert pixel 98,48 ==~ 0,255,0,255;
+    @assert pixel 48,1 ==~ 0,255,0,255;
+    @assert pixel 48,48 ==~ 0,255,0,255;
+    @assert pixel 51,1 ==~ 0,255,0,255;
+    @assert pixel 51,48 ==~ 0,255,0,255;
+    @assert pixel 25,25 ==~ 0,255,0,255;
+    @assert pixel 75,25 ==~ 0,255,0,255;
+  expected: green
+
+- name: 2d.drawImage.negativedir
+  desc: Negative dimensions do not affect the direction of the image
+  testing:
+  - 2d.drawImage.direction
+  mozilla: {throws: !!null ''}
+  images:
+  - ggrr-256x256.png
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.drawImage(document.getElementById('ggrr-256x256.png'), 0, 178, 50, -100, 0, 0, 50, 100);
+    ctx.drawImage(document.getElementById('ggrr-256x256.png'), 0, 78, 50, 100, 50, 100, 50, -100);
+    @assert pixel 1,1 ==~ 0,255,0,255;
+    @assert pixel 1,48 ==~ 0,255,0,255;
+    @assert pixel 98,1 ==~ 0,255,0,255;
+    @assert pixel 98,48 ==~ 0,255,0,255;
+    @assert pixel 48,1 ==~ 0,255,0,255;
+    @assert pixel 48,48 ==~ 0,255,0,255;
+    @assert pixel 51,1 ==~ 0,255,0,255;
+    @assert pixel 51,48 ==~ 0,255,0,255;
+    @assert pixel 25,25 ==~ 0,255,0,255;
+    @assert pixel 75,25 ==~ 0,255,0,255;
+  expected: green
+
+- name: 2d.drawImage.outsidesource
+  DISABLED: fix this to match the current spec (transparent black outside source)
+  testing:
+  - 2d.drawImage.outsidesource
+  mozilla: {throws: !!null ''}
+  images:
+  - green.png
+  - red.png
+  code: |
+    ctx.drawImage(document.getElementById('green.png'), 10.5, 10.5, 89.5, 39.5, 0, 0, 100, 50);
+    ctx.drawImage(document.getElementById('green.png'), 5.5, 5.5, -5.5, -5.5, 0, 0, 100, 50);
+    ctx.drawImage(document.getElementById('green.png'), 100, 50, -5, -5, 0, 0, 100, 50);
+    @assert throws INDEX_SIZE_ERR ctx.drawImage(document.getElementById('red.png'), -0.001, 0, 100, 50, 0, 0, 100, 50);
+    @assert throws INDEX_SIZE_ERR ctx.drawImage(document.getElementById('red.png'), 0, -0.001, 100, 50, 0, 0, 100, 50);
+    @assert throws INDEX_SIZE_ERR ctx.drawImage(document.getElementById('red.png'), 0, 0, 100.001, 50, 0, 0, 100, 50);
+    @assert throws INDEX_SIZE_ERR ctx.drawImage(document.getElementById('red.png'), 0, 0, 100, 50.001, 0, 0, 100, 50);
+    @assert throws INDEX_SIZE_ERR ctx.drawImage(document.getElementById('red.png'), 50, 0, 50.001, 50, 0, 0, 100, 50); @moz-todo
+    @assert throws INDEX_SIZE_ERR ctx.drawImage(document.getElementById('red.png'), 0, 0, -5, 5, 0, 0, 100, 50);
+    @assert throws INDEX_SIZE_ERR ctx.drawImage(document.getElementById('red.png'), 0, 0, 5, -5, 0, 0, 100, 50);
+    @assert throws INDEX_SIZE_ERR ctx.drawImage(document.getElementById('red.png'), 110, 60, -20, -20, 0, 0, 100, 50);
+    @assert pixel 50,25 ==~ 0,255,0,255; @moz-todo
+  expected: green
+
+- name: 2d.drawImage.incomplete.nosrc
+  testing:
+  - 2d.drawImage.incomplete.image
+  mozilla: {throws: !!null ''}
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    var img = new Image();
+    ctx.drawImage(img, 0, 0);
+    @assert pixel 50,25 ==~ 0,255,0,255;
+  expected: green
+
+- name: 2d.drawImage.incomplete.immediate
+  testing:
+  - 2d.drawImage.incomplete.image
+  images:
+  - red.png
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    var img = new Image();
+    img.src = '../images/red.png';
+    // This triggers the "update the image data" algorithm.
+    // The image will not go to the "completely available" state
+    // until a fetch task in the networking task source is processed,
+    // so the image must not be fully decodable yet:
+    ctx.drawImage(img, 0, 0);
+    @assert pixel 50,25 ==~ 0,255,0,255; @moz-todo
+  expected: green
+
+- name: 2d.drawImage.incomplete.reload
+  testing:
+  - 2d.drawImage.incomplete.image
+  images:
+  - yellow.png
+  - red.png
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    var img = document.getElementById('yellow.png');
+    img.src = '../images/red.png';
+    // This triggers the "update the image data" algorithm,
+    // and resets the image to the "unavailable" state.
+    // The image will not go to the "completely available" state
+    // until a fetch task in the networking task source is processed,
+    // so the image must not be fully decodable yet:
+    ctx.drawImage(img, 0, 0);
+    @assert pixel 50,25 ==~ 0,255,0,255; @moz-todo
+  expected: green
+
+- name: 2d.drawImage.incomplete.emptysrc
+  testing:
+  - 2d.drawImage.incomplete.image
+  images:
+  - red.png
+  mozilla: {throws: !!null ''}
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    var img = document.getElementById('red.png');
+    img.src = "";
+    ctx.drawImage(img, 0, 0);
+    @assert pixel 50,25 ==~ 0,255,0,255;
+  expected: green
+
+- name: 2d.drawImage.incomplete.removedsrc
+  testing:
+  - 2d.drawImage.incomplete.image
+  images:
+  - red.png
+  mozilla: {throws: !!null ''}
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    var img = document.getElementById('red.png');
+    img.removeAttribute('src');
+    ctx.drawImage(img, 0, 0);
+    @assert pixel 50,25 ==~ 0,255,0,255;
+  expected: green
+
+- name: 2d.drawImage.broken
+  testing:
+  - 2d.drawImage.incomplete.image
+  images:
+  - broken.png
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    var img = document.getElementById('broken.png');
+    ctx.drawImage(img, 0, 0);
+    @assert pixel 50,25 ==~ 0,255,0,255; @moz-todo
+  expected: green
+
+- name: 2d.drawImage.zerocanvas
+  desc: drawImage with zero-sized canvas as the source shoud throw exception
+  testing:
+  - 2d.drawImage.zerocanvas
+  code: |
+    var canvas2 = document.createElement('canvas');
+    canvas2.width = 0;
+    canvas2.height = 50;
+    @assert throws INVALID_STATE_ERR ctx.drawImage(canvas2, 0, 0);
+
+    canvas2.width = 50;
+    canvas2.height = 0;
+    @assert throws INVALID_STATE_ERR ctx.drawImage(canvas2, 0, 0);
+
+    canvas2.width = 0;
+    canvas2.height = 0;
+    @assert throws INVALID_STATE_ERR ctx.drawImage(canvas2, 0, 0);
+
+- name: 2d.drawImage.svg
+  desc: drawImage() of an SVG image
+  testing:
+  - 2d.drawImage.svg
+  images:
+  - green.svg
+  code: |
+    ctx.drawImage(document.getElementById('green.svg'), 0, 0);
+    @assert pixel 50,25 ==~ 0,255,0,255;
+  expected: green
+
+- name: 2d.drawImage.animated.gif
+  desc: drawImage() of an animated GIF draws the first frame
+  testing:
+  - 2d.drawImage.animated.image
+  images:
+  - anim-gr.gif
+  code: |
+    deferTest();
+    step_timeout(t.step_func_done(function () {
+        ctx.drawImage(document.getElementById('anim-gr.gif'), 0, 0);
+        @assert pixel 50,25 ==~ 0,255,0,255;
+    }), 500);
+  expected: green
+
+- name: 2d.drawImage.animated.apng
+  desc: drawImage() of an APNG with no poster frame draws the first frame
+  testing:
+  - 2d.drawImage.animated.image
+  images:
+  - anim-gr.png
+  code: |
+    deferTest();
+    step_timeout(t.step_func_done(function () {
+        ctx.drawImage(document.getElementById('anim-gr.png'), 0, 0);
+        @assert pixel 50,25 ==~ 0,255,0,255;
+    }), 500);
+  expected: green
+
+- name: 2d.drawImage.animated.poster
+  desc: drawImage() of an APNG draws the poster frame
+  testing:
+  - 2d.drawImage.animated.image
+  images:
+  - anim-poster-gr.png
+  code: |
+    ctx.drawImage(document.getElementById('anim-poster-gr.png'), 0, 0);
+    @assert pixel 50,25 ==~ 0,255,0,255; @moz-todo
+  expected: green
+
+- name: 2d.drawImage.path
+  testing:
+  - 2d.drawImage.unaffect
+  images:
+  - red.png
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.rect(0, 0, 100, 50);
+    ctx.drawImage(document.getElementById('red.png'), 0, 0);
+    ctx.fill();
+    @assert pixel 50,25 ==~ 0,255,0,255;
+  expected: green
+
+- name: 2d.drawImage.transform
+  testing:
+  - 2d.drawImage.subject
+  images:
+  - red.png
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.translate(100, 0);
+    ctx.drawImage(document.getElementById('red.png'), 0, 0);
+    @assert pixel 50,25 ==~ 0,255,0,255;
+  expected: green
+
+# TODO: drawImage shadows
+
+- name: 2d.drawImage.alpha
+  testing:
+  - 2d.drawImage.subject
+  images:
+  - red.png
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.globalAlpha = 0;
+    ctx.drawImage(document.getElementById('red.png'), 0, 0);
+    @assert pixel 50,25 ==~ 0,255,0,255;
+  expected: green
+
+- name: 2d.drawImage.clip
+  testing:
+  - 2d.drawImage.subject
+  images:
+  - red.png
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.rect(-10, -10, 1, 1);
+    ctx.clip();
+    ctx.drawImage(document.getElementById('red.png'), 0, 0);
+    @assert pixel 50,25 ==~ 0,255,0,255;
+  expected: green
+
+- name: 2d.drawImage.composite
+  testing:
+  - 2d.drawImage.subject
+  images:
+  - red.png
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.globalCompositeOperation = 'destination-over';
+    ctx.drawImage(document.getElementById('red.png'), 0, 0);
+    @assert pixel 50,25 ==~ 0,255,0,255;
+  expected: green
+
+- name: 2d.drawImage.nowrap
+  desc: Stretched images do not get pixels wrapping around the edges
+  images:
+  - redtransparent.png
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.drawImage(document.getElementById('redtransparent.png'), -1950, 0, 2000, 50);
+    @assert pixel 45,25 ==~ 0,255,0,255;
+    @assert pixel 50,25 ==~ 0,255,0,255;
+    @assert pixel 55,25 ==~ 0,255,0,255;
+  expected: green
+
+- name: 2d.drawImage.nonfinite
+  desc: drawImage() with Infinity/NaN is ignored
+  testing:
+  - 2d.nonfinite
+  images:
+  - red.png
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    var red = document.getElementById('red.png');
+    @nonfinite ctx.drawImage(<red>, <0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>);
+    @nonfinite ctx.drawImage(<red>, <0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <100 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>);
+    @nonfinite ctx.drawImage(<red>, <0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <100 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <100 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>);
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+
+
diff --git a/tests/wpt/web-platform-tests/html/canvas/tools/yaml/element/drawing-rectangles-to-the-canvas.yaml b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/element/drawing-rectangles-to-the-canvas.yaml
new file mode 100644
index 00000000000..9d4dc594227
--- /dev/null
+++ b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/element/drawing-rectangles-to-the-canvas.yaml
@@ -0,0 +1,458 @@
+- name: 2d.clearRect.basic
+  desc: clearRect clears to transparent black
+  testing:
+  - 2d.clearRect
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.clearRect(0, 0, 100, 50);
+    @assert pixel 50,25 == 0,0,0,0;
+  expected: clear
+
+- name: 2d.clearRect.path
+  desc: clearRect does not affect the current path
+  testing:
+  - 2d.clearRect
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.beginPath();
+    ctx.rect(0, 0, 100, 50);
+    ctx.clearRect(0, 0, 16, 16);
+    ctx.fill();
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.clearRect.zero
+  desc: clearRect of zero pixels has no effect
+  testing:
+  - 2d.clearRect
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.clearRect(0, 0, 100, 0);
+    ctx.clearRect(0, 0, 0, 50);
+    ctx.clearRect(0, 0, 0, 0);
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.clearRect.negative
+  desc: clearRect of negative sizes works
+  testing:
+  - 2d.clearRect
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.clearRect(0, 0, 50, 25);
+    ctx.clearRect(100, 0, -50, 25);
+    ctx.clearRect(0, 50, 50, -25);
+    ctx.clearRect(100, 50, -50, -25);
+    @assert pixel 25,12 == 0,0,0,0;
+    @assert pixel 75,12 == 0,0,0,0;
+    @assert pixel 25,37 == 0,0,0,0;
+    @assert pixel 75,37 == 0,0,0,0;
+  expected: clear
+
+- name: 2d.clearRect.transform
+  desc: clearRect is affected by transforms
+  testing:
+  - 2d.clearRect
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.scale(10, 10);
+    ctx.translate(0, 5);
+    ctx.clearRect(0, -5, 10, 5);
+    @assert pixel 50,25 == 0,0,0,0;
+  expected: clear
+
+- name: 2d.clearRect.globalalpha
+  desc: clearRect is not affected by globalAlpha
+  testing:
+  - 2d.clearRect
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.globalAlpha = 0.1;
+    ctx.clearRect(0, 0, 100, 50);
+    @assert pixel 50,25 == 0,0,0,0;
+  expected: clear
+
+- name: 2d.clearRect.globalcomposite
+  desc: clearRect is not affected by globalCompositeOperation
+  testing:
+  - 2d.clearRect
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.globalCompositeOperation = 'destination-atop';
+    ctx.clearRect(0, 0, 100, 50);
+    @assert pixel 50,25 == 0,0,0,0;
+  expected: clear
+
+- name: 2d.clearRect.clip
+  desc: clearRect is affected by clipping regions
+  testing:
+  - 2d.clearRect
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.beginPath();
+    ctx.rect(0, 0, 16, 16);
+    ctx.clip();
+
+    ctx.clearRect(0, 0, 100, 50);
+
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 16, 16);
+
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.clearRect.shadow
+  desc: clearRect does not draw shadows
+  testing:
+  - 2d.clearRect
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.shadowColor = '#f00';
+    ctx.shadowBlur = 0;
+    ctx.shadowOffsetX = 0;
+    ctx.shadowOffsetY = 50;
+    ctx.clearRect(0, -50, 100, 50);
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.clearRect.nonfinite
+  desc: clearRect() with Infinity/NaN is ignored
+  testing:
+  - 2d.nonfinite
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    @nonfinite ctx.clearRect(<0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <100 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>);
+
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+
+- name: 2d.fillRect.basic
+  desc: fillRect works
+  testing:
+  - 2d.fillRect
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.fillRect.path
+  desc: fillRect does not affect the current path
+  testing:
+  - 2d.fillRect
+  code: |
+    ctx.beginPath();
+    ctx.rect(0, 0, 100, 50);
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 16, 16);
+    ctx.fillStyle = '#0f0';
+    ctx.fill();
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.fillRect.zero
+  desc: fillRect of zero pixels has no effect
+  testing:
+  - 2d.fillRect
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 0);
+    ctx.fillRect(0, 0, 0, 50);
+    ctx.fillRect(0, 0, 0, 0);
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.fillRect.negative
+  desc: fillRect of negative sizes works
+  testing:
+  - 2d.fillRect
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 50, 25);
+    ctx.fillRect(100, 0, -50, 25);
+    ctx.fillRect(0, 50, 50, -25);
+    ctx.fillRect(100, 50, -50, -25);
+    @assert pixel 25,12 == 0,255,0,255;
+    @assert pixel 75,12 == 0,255,0,255;
+    @assert pixel 25,37 == 0,255,0,255;
+    @assert pixel 75,37 == 0,255,0,255;
+  expected: green
+
+- name: 2d.fillRect.transform
+  desc: fillRect is affected by transforms
+  testing:
+  - 2d.fillRect
+  code: |
+    ctx.scale(10, 10);
+    ctx.translate(0, 5);
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, -5, 10, 5);
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+# don't bother testing globalalpha, globalcomposite because they're already heavily used by other test cases
+
+- name: 2d.fillRect.clip
+  desc: fillRect is affected by clipping regions
+  testing:
+  - 2d.fillRect
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.beginPath();
+    ctx.rect(0, 0, 16, 16);
+    ctx.clip();
+
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 16, 16);
+
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.fillRect.shadow
+  desc: fillRect draws shadows
+  testing:
+  - 2d.fillRect
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.shadowColor = '#0f0';
+    ctx.shadowBlur = 0;
+    ctx.shadowOffsetX = 0;
+    ctx.shadowOffsetY = 50;
+    ctx.fillRect(0, -50, 100, 50);
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.fillRect.nonfinite
+  desc: fillRect() with Infinity/NaN is ignored
+  testing:
+  - 2d.nonfinite
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.fillStyle = '#f00';
+    @nonfinite ctx.fillRect(<0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <100 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>);
+
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+
+- name: 2d.strokeRect.basic
+  desc: strokeRect works
+  testing:
+  - 2d.strokeRect
+  code: |
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 50;
+    ctx.strokeRect(25, 24, 50, 2);
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.strokeRect.path
+  desc: strokeRect does not affect the current path
+  testing:
+  - 2d.strokeRect
+  code: |
+    ctx.beginPath();
+    ctx.rect(0, 0, 100, 50);
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 5;
+    ctx.strokeRect(0, 0, 16, 16);
+    ctx.fillStyle = '#0f0';
+    ctx.fill();
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.strokeRect.zero.1
+  desc: strokeRect of 0x0 pixels draws nothing
+  testing:
+  - 2d.strokeRect
+  code: |
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 250;
+    ctx.strokeRect(50, 25, 0, 0);
+    @assert pixel 50,25 == 0,0,0,0;
+  expected: clear
+
+- name: 2d.strokeRect.zero.2
+  desc: strokeRect of 0x0 pixels draws nothing, including caps and joins
+  testing:
+  - 2d.strokeRect
+  code: |
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 250;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+    ctx.strokeRect(50, 25, 0, 0);
+    @assert pixel 50,25 == 0,0,0,0;
+  expected: clear
+
+- name: 2d.strokeRect.zero.3
+  desc: strokeRect of Nx0 pixels draws a straight line
+  testing:
+  - 2d.strokeRect
+  code: |
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 50;
+    ctx.strokeRect(0, 25, 100, 0);
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.strokeRect.zero.4
+  desc: strokeRect of Nx0 pixels draws a closed line with no caps
+  testing:
+  - 2d.strokeRect
+  code: |
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 250;
+    ctx.lineCap = 'round';
+    ctx.strokeRect(100, 25, 100, 0);
+    @assert pixel 50,25 == 0,0,0,0;
+  expected: clear
+
+- name: 2d.strokeRect.zero.5
+  desc: strokeRect of Nx0 pixels draws a closed line with joins
+  testing:
+  - 2d.strokeRect
+  code: |
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 250;
+    ctx.lineJoin = 'round';
+    ctx.strokeRect(100, 25, 100, 0);
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.strokeRect.negative
+  desc: strokeRect of negative sizes works
+  testing:
+  - 2d.strokeRect
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 25;
+    ctx.strokeRect(12, 12, 26, 1);
+    ctx.strokeRect(88, 12, -26, 1);
+    ctx.strokeRect(12, 38, 26, -1);
+    ctx.strokeRect(88, 38, -26, -1);
+    @assert pixel 25,12 == 0,255,0,255;
+    @assert pixel 75,12 == 0,255,0,255;
+    @assert pixel 25,37 == 0,255,0,255;
+    @assert pixel 75,37 == 0,255,0,255;
+  expected: green
+
+- name: 2d.strokeRect.transform
+  desc: fillRect is affected by transforms
+  testing:
+  - 2d.strokeRect
+  code: |
+    ctx.scale(10, 10);
+    ctx.translate(0, 5);
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 5;
+    ctx.strokeRect(2.5, -2.6, 5, 0.2);
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.strokeRect.globalalpha
+  desc: strokeRect is affected by globalAlpha
+  testing:
+  - 2d.strokeRect
+  code: |
+    ctx.globalAlpha = 0;
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 50;
+    ctx.strokeRect(25, 24, 50, 2);
+    @assert pixel 50,25 == 0,0,0,0;
+  expected: clear
+
+- name: 2d.strokeRect.globalcomposite
+  desc: strokeRect is not affected by globalCompositeOperation
+  testing:
+  - 2d.strokeRect
+  code: |
+    ctx.globalCompositeOperation = 'source-in';
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 50;
+    ctx.strokeRect(25, 24, 50, 2);
+    @assert pixel 50,25 == 0,0,0,0;
+  expected: clear
+
+- name: 2d.strokeRect.clip
+  desc: strokeRect is affected by clipping regions
+  testing:
+  - 2d.strokeRect
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.beginPath();
+    ctx.rect(0, 0, 16, 16);
+    ctx.clip();
+
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 50;
+    ctx.strokeRect(0, 0, 100, 50);
+
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 16, 16);
+
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.strokeRect.shadow
+  desc: strokeRect draws shadows
+  testing:
+  - 2d.strokeRect
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#f00';
+    ctx.shadowColor = '#0f0';
+    ctx.shadowBlur = 0;
+    ctx.shadowOffsetX = 0;
+    ctx.shadowOffsetY = 50;
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 50;
+    ctx.strokeRect(0, -75, 100, 50);
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.strokeRect.nonfinite
+  desc: strokeRect() with Infinity/NaN is ignored
+  testing:
+  - 2d.nonfinite
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 150;
+    @nonfinite ctx.strokeRect(<0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <100 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>);
+
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+
diff --git a/tests/wpt/web-platform-tests/html/canvas/tools/yaml/element/drawing-text-to-the-canvas.yaml b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/element/drawing-text-to-the-canvas.yaml
new file mode 100644
index 00000000000..f5feb7b4c65
--- /dev/null
+++ b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/element/drawing-text-to-the-canvas.yaml
@@ -0,0 +1,709 @@
+- name: 2d.text.draw.fill.basic
+  desc: fillText draws filled text
+  manual:
+  testing:
+  - 2d.text.draw
+  - 2d.text.draw.fill
+  code: |
+    ctx.fillStyle = '#000';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.strokeStyle = '#f00';
+    ctx.font = '35px Arial, sans-serif';
+    ctx.fillText('PASS', 5, 35);
+  expected: &passfill |
+    size 100 50
+    cr.set_source_rgb(0, 0, 0)
+    cr.rectangle(0, 0, 100, 50)
+    cr.fill()
+    cr.set_source_rgb(0, 1, 0)
+    cr.select_font_face("Arial")
+    cr.set_font_size(35)
+    cr.translate(5, 35)
+    cr.text_path("PASS")
+    cr.fill()
+
+- name: 2d.text.draw.fill.unaffected
+  desc: fillText does not start a new path or subpath
+  testing:
+  - 2d.text.draw.fill
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.moveTo(0, 0);
+    ctx.lineTo(100, 0);
+
+    ctx.font = '35px Arial, sans-serif';
+    ctx.fillText('FAIL', 5, 35);
+
+    ctx.lineTo(100, 50);
+    ctx.lineTo(0, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.fill();
+
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 5,45 == 0,255,0,255;
+  expected: green
+
+- name: 2d.text.draw.fill.rtl
+  desc: fillText respects Right-To-Left Override characters
+  manual:
+  testing:
+  - 2d.text.draw
+  code: |
+    ctx.fillStyle = '#000';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.strokeStyle = '#f00';
+    ctx.font = '35px Arial, sans-serif';
+    ctx.fillText('\u202eFAIL \xa0 \xa0 SSAP', 5, 35);
+  expected: *passfill
+- name: 2d.text.draw.fill.maxWidth.large
+  desc: fillText handles maxWidth correctly
+  manual:
+  testing:
+  - 2d.text.draw.maxwidth
+  code: |
+    ctx.fillStyle = '#000';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.font = '35px Arial, sans-serif';
+    ctx.fillText('PASS', 5, 35, 200);
+  expected: *passfill
+- name: 2d.text.draw.fill.maxWidth.small
+  desc: fillText handles maxWidth correctly
+  testing:
+  - 2d.text.draw.maxwidth
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#f00';
+    ctx.font = '35px Arial, sans-serif';
+    ctx.fillText('fail fail fail fail fail', -100, 35, 90);
+    _assertGreen(ctx, 100, 50);
+  expected: green
+
+- name: 2d.text.draw.fill.maxWidth.zero
+  desc: fillText handles maxWidth correctly
+  testing:
+  - 2d.text.draw.maxwidth
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#f00';
+    ctx.font = '35px Arial, sans-serif';
+    ctx.fillText('fail fail fail fail fail', 5, 35, 0);
+    _assertGreen(ctx, 100, 50);
+  expected: green
+
+- name: 2d.text.draw.fill.maxWidth.negative
+  desc: fillText handles maxWidth correctly
+  testing:
+  - 2d.text.draw.maxwidth
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#f00';
+    ctx.font = '35px Arial, sans-serif';
+    ctx.fillText('fail fail fail fail fail', 5, 35, -1);
+    _assertGreen(ctx, 100, 50);
+  expected: green
+
+- name: 2d.text.draw.fill.maxWidth.NaN
+  desc: fillText handles maxWidth correctly
+  testing:
+  - 2d.text.draw.maxwidth
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#f00';
+    ctx.font = '35px Arial, sans-serif';
+    ctx.fillText('fail fail fail fail fail', 5, 35, NaN);
+    _assertGreen(ctx, 100, 50);
+  expected: green
+
+- name: 2d.text.draw.stroke.basic
+  desc: strokeText draws stroked text
+  manual:
+  testing:
+  - 2d.text.draw
+  - 2d.text.draw.stroke
+  code: |
+    ctx.fillStyle = '#000';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#0f0';
+    ctx.fillStyle = '#f00';
+    ctx.lineWidth = 1;
+    ctx.font = '35px Arial, sans-serif';
+    ctx.strokeText('PASS', 5, 35);
+  expected: |
+    size 100 50
+    cr.set_source_rgb(0, 0, 0)
+    cr.rectangle(0, 0, 100, 50)
+    cr.fill()
+    cr.set_source_rgb(0, 1, 0)
+    cr.select_font_face("Arial")
+    cr.set_font_size(35)
+    cr.set_line_width(1)
+    cr.translate(5, 35)
+    cr.text_path("PASS")
+    cr.stroke()
+
+- name: 2d.text.draw.stroke.unaffected
+  desc: strokeText does not start a new path or subpath
+  testing:
+  - 2d.text.draw.stroke
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.moveTo(0, 0);
+    ctx.lineTo(100, 0);
+
+    ctx.font = '35px Arial, sans-serif';
+    ctx.strokeStyle = '#f00';
+    ctx.strokeText('FAIL', 5, 35);
+
+    ctx.lineTo(100, 50);
+    ctx.lineTo(0, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.fill();
+
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 5,45 == 0,255,0,255;
+  expected: green
+
+- name: 2d.text.draw.kern.consistent
+  desc: Stroked and filled text should have exactly the same kerning so it overlaps
+  manual:
+  testing:
+  - 2d.text.draw
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#f00';
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 3;
+    ctx.font = '20px Arial, sans-serif';
+    ctx.fillText('VAVAVAVAVAVAVA', -50, 25);
+    ctx.fillText('ToToToToToToTo', -50, 45);
+    ctx.strokeText('VAVAVAVAVAVAVA', -50, 25);
+    ctx.strokeText('ToToToToToToTo', -50, 45);
+  expected: green
+
+# CanvasTest is:
+#   A = (0, 0) to (1em, 0.75em)       (above baseline)
+#   B = (0, 0) to (1em, -0.25em)      (below baseline)
+#   C = (0, -0.25em) to (1em, 0.75em) (the em square) plus some Xs above and below
+#   D = (0, -0.25em) to (1em, 0.75em) (the em square) plus some Xs left and right
+#   E = (0, -0.25em) to (1em, 0.75em) (the em square)
+#   space = empty, 1em wide
+#
+# At 50px, "E" will fill the canvas vertically
+# At 67px, "A" will fill the canvas vertically
+#
+# Ideographic baseline  is 0.125em above alphabetic
+# Mathematical baseline is 0.375em above alphabetic
+# Hanging baseline      is 0.500em above alphabetic
+
+# WebKit doesn't block onload on font loads, so we try to make it a bit more reliable
+# by waiting with step_timeout after load before drawing
+
+- name: 2d.text.draw.fill.maxWidth.fontface
+  desc: fillText works on @font-face fonts
+  testing:
+  - 2d.text.draw.maxwidth
+  fonts:
+  - CanvasTest
+  code: |
+    ctx.font = '50px CanvasTest';
+    deferTest();
+    step_timeout(t.step_func_done(function () {
+        ctx.fillStyle = '#0f0';
+        ctx.fillRect(0, 0, 100, 50);
+        ctx.fillStyle = '#f00';
+        ctx.fillText('EEEE', -50, 37.5, 40);
+        @assert pixel 5,5 ==~ 0,255,0,255;
+        @assert pixel 95,5 ==~ 0,255,0,255;
+        @assert pixel 25,25 ==~ 0,255,0,255;
+        @assert pixel 75,25 ==~ 0,255,0,255;
+    }), 500);
+  expected: green
+
+- name: 2d.text.draw.fill.maxWidth.bound
+  desc: fillText handles maxWidth based on line size, not bounding box size
+  testing:
+  - 2d.text.draw.maxwidth
+  fonts:
+  - CanvasTest
+  code: |
+    ctx.font = '50px CanvasTest';
+    deferTest();
+    step_timeout(t.step_func_done(function () {
+        ctx.fillStyle = '#f00';
+        ctx.fillRect(0, 0, 100, 50);
+        ctx.fillStyle = '#0f0';
+        ctx.fillText('DD', 0, 37.5, 100);
+        @assert pixel 5,5 ==~ 0,255,0,255;
+        @assert pixel 95,5 ==~ 0,255,0,255;
+        @assert pixel 25,25 ==~ 0,255,0,255;
+        @assert pixel 75,25 ==~ 0,255,0,255;
+    }), 500);
+  expected: green
+
+- name: 2d.text.draw.fontface
+  testing:
+  - 2d.text.font.fontface
+  fonts:
+  - CanvasTest
+  code: |
+    ctx.font = '67px CanvasTest';
+    deferTest();
+    step_timeout(t.step_func_done(function () {
+        ctx.fillStyle = '#f00';
+        ctx.fillRect(0, 0, 100, 50);
+        ctx.fillStyle = '#0f0';
+        ctx.fillText('AA', 0, 50);
+        @assert pixel 5,5 ==~ 0,255,0,255;
+        @assert pixel 95,5 ==~ 0,255,0,255;
+        @assert pixel 25,25 ==~ 0,255,0,255;
+        @assert pixel 75,25 ==~ 0,255,0,255;
+    }), 500);
+  expected: green
+
+- name: 2d.text.draw.fontface.repeat
+  desc: Draw with the font immediately, then wait a bit until and draw again. (This
+    crashes some version of WebKit.)
+  testing:
+  - 2d.text.font.fontface
+  fonts:
+  - CanvasTest
+  fonthack: 0
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.font = '67px CanvasTest';
+    ctx.fillStyle = '#0f0';
+    ctx.fillText('AA', 0, 50);
+    deferTest();
+    step_timeout(t.step_func_done(function () {
+        ctx.fillText('AA', 0, 50);
+        @assert pixel 5,5 ==~ 0,255,0,255;
+        @assert pixel 95,5 ==~ 0,255,0,255;
+        @assert pixel 25,25 ==~ 0,255,0,255;
+        @assert pixel 75,25 ==~ 0,255,0,255;
+    }), 500);
+  expected: green
+
+- name: 2d.text.draw.fontface.notinpage
+  desc: '@font-face fonts should work even if they are not used in the page'
+  testing:
+  - 2d.text.font.fontface
+  fonts:
+  - CanvasTest
+  fonthack: 0
+  code: |
+    ctx.font = '67px CanvasTest';
+    deferTest();
+    step_timeout(t.step_func_done(function () {
+        ctx.fillStyle = '#f00';
+        ctx.fillRect(0, 0, 100, 50);
+        ctx.fillStyle = '#0f0';
+        ctx.fillText('AA', 0, 50);
+        @assert pixel 5,5 ==~ 0,255,0,255; @moz-todo
+        @assert pixel 95,5 ==~ 0,255,0,255; @moz-todo
+        @assert pixel 25,25 ==~ 0,255,0,255; @moz-todo
+        @assert pixel 75,25 ==~ 0,255,0,255; @moz-todo
+    }), 500);
+  expected: green
+
+- name: 2d.text.draw.align.left
+  desc: textAlign left is the left of the first em square (not the bounding box)
+  testing:
+  - 2d.text.align.left
+  fonts:
+  - CanvasTest
+  code: |
+    ctx.font = '50px CanvasTest';
+    deferTest();
+    step_timeout(t.step_func_done(function () {
+        ctx.fillStyle = '#f00';
+        ctx.fillRect(0, 0, 100, 50);
+        ctx.fillStyle = '#0f0';
+        ctx.textAlign = 'left';
+        ctx.fillText('DD', 0, 37.5);
+        @assert pixel 5,5 ==~ 0,255,0,255;
+        @assert pixel 95,5 ==~ 0,255,0,255;
+        @assert pixel 25,25 ==~ 0,255,0,255;
+        @assert pixel 75,25 ==~ 0,255,0,255;
+        @assert pixel 5,45 ==~ 0,255,0,255;
+        @assert pixel 95,45 ==~ 0,255,0,255;
+    }), 500);
+  expected: green
+
+- name: 2d.text.draw.align.right
+  desc: textAlign right is the right of the last em square (not the bounding box)
+  testing:
+  - 2d.text.align.right
+  fonts:
+  - CanvasTest
+  code: |
+    ctx.font = '50px CanvasTest';
+    deferTest();
+    step_timeout(t.step_func_done(function () {
+        ctx.fillStyle = '#f00';
+        ctx.fillRect(0, 0, 100, 50);
+        ctx.fillStyle = '#0f0';
+        ctx.textAlign = 'right';
+        ctx.fillText('DD', 100, 37.5);
+        @assert pixel 5,5 ==~ 0,255,0,255;
+        @assert pixel 95,5 ==~ 0,255,0,255;
+        @assert pixel 25,25 ==~ 0,255,0,255;
+        @assert pixel 75,25 ==~ 0,255,0,255;
+        @assert pixel 5,45 ==~ 0,255,0,255;
+        @assert pixel 95,45 ==~ 0,255,0,255;
+    }), 500);
+  expected: green
+
+- name: 2d.text.draw.align.start.ltr
+  desc: textAlign start with ltr is the left edge
+  testing:
+  - 2d.text.align.left
+  fonts:
+  - CanvasTest
+  canvas: width="100" height="50" dir="ltr"
+  code: |
+    ctx.font = '50px CanvasTest';
+    deferTest();
+    step_timeout(t.step_func_done(function () {
+        ctx.fillStyle = '#f00';
+        ctx.fillRect(0, 0, 100, 50);
+        ctx.fillStyle = '#0f0';
+        ctx.textAlign = 'start';
+        ctx.fillText('DD', 0, 37.5);
+        @assert pixel 5,5 ==~ 0,255,0,255;
+        @assert pixel 95,5 ==~ 0,255,0,255;
+        @assert pixel 25,25 ==~ 0,255,0,255;
+        @assert pixel 75,25 ==~ 0,255,0,255;
+        @assert pixel 5,45 ==~ 0,255,0,255;
+        @assert pixel 95,45 ==~ 0,255,0,255;
+    }), 500);
+  expected: green
+
+- name: 2d.text.draw.align.start.rtl
+  desc: textAlign start with rtl is the right edge
+  testing:
+  - 2d.text.align.right
+  - 2d.text.draw.direction
+  fonts:
+  - CanvasTest
+  canvas: width="100" height="50" dir="rtl"
+  code: |
+    ctx.font = '50px CanvasTest';
+    deferTest();
+    step_timeout(t.step_func_done(function () {
+        ctx.fillStyle = '#f00';
+        ctx.fillRect(0, 0, 100, 50);
+        ctx.fillStyle = '#0f0';
+        ctx.textAlign = 'start';
+        ctx.fillText('DD', 100, 37.5);
+        @assert pixel 5,5 ==~ 0,255,0,255;
+        @assert pixel 95,5 ==~ 0,255,0,255;
+        @assert pixel 25,25 ==~ 0,255,0,255;
+        @assert pixel 75,25 ==~ 0,255,0,255;
+        @assert pixel 5,45 ==~ 0,255,0,255;
+        @assert pixel 95,45 ==~ 0,255,0,255;
+    }), 500);
+  expected: green
+
+- name: 2d.text.draw.align.end.ltr
+  desc: textAlign end with ltr is the right edge
+  testing:
+  - 2d.text.align.right
+  fonts:
+  - CanvasTest
+  canvas: width="100" height="50" dir="ltr"
+  code: |
+    ctx.font = '50px CanvasTest';
+    deferTest();
+    step_timeout(t.step_func_done(function () {
+        ctx.fillStyle = '#f00';
+        ctx.fillRect(0, 0, 100, 50);
+        ctx.fillStyle = '#0f0';
+        ctx.textAlign = 'end';
+        ctx.fillText('DD', 100, 37.5);
+        @assert pixel 5,5 ==~ 0,255,0,255;
+        @assert pixel 95,5 ==~ 0,255,0,255;
+        @assert pixel 25,25 ==~ 0,255,0,255;
+        @assert pixel 75,25 ==~ 0,255,0,255;
+        @assert pixel 5,45 ==~ 0,255,0,255;
+        @assert pixel 95,45 ==~ 0,255,0,255;
+    }), 500);
+  expected: green
+
+- name: 2d.text.draw.align.end.rtl
+  desc: textAlign end with rtl is the left edge
+  testing:
+  - 2d.text.align.left
+  - 2d.text.draw.direction
+  fonts:
+  - CanvasTest
+  canvas: width="100" height="50" dir="rtl"
+  code: |
+    ctx.font = '50px CanvasTest';
+    deferTest();
+    step_timeout(t.step_func_done(function () {
+        ctx.fillStyle = '#f00';
+        ctx.fillRect(0, 0, 100, 50);
+        ctx.fillStyle = '#0f0';
+        ctx.textAlign = 'end';
+        ctx.fillText('DD', 0, 37.5);
+        @assert pixel 5,5 ==~ 0,255,0,255;
+        @assert pixel 95,5 ==~ 0,255,0,255;
+        @assert pixel 25,25 ==~ 0,255,0,255;
+        @assert pixel 75,25 ==~ 0,255,0,255;
+        @assert pixel 5,45 ==~ 0,255,0,255;
+        @assert pixel 95,45 ==~ 0,255,0,255;
+    }), 500);
+  expected: green
+
+- name: 2d.text.draw.align.center
+  desc: textAlign center is the center of the em squares (not the bounding box)
+  testing:
+  - 2d.text.align.center
+  fonts:
+  - CanvasTest
+  code: |
+    ctx.font = '50px CanvasTest';
+    deferTest();
+    step_timeout(t.step_func_done(function () {
+        ctx.fillStyle = '#f00';
+        ctx.fillRect(0, 0, 100, 50);
+        ctx.fillStyle = '#0f0';
+        ctx.textAlign = 'center';
+        ctx.fillText('DD', 50, 37.5);
+        @assert pixel 5,5 ==~ 0,255,0,255;
+        @assert pixel 95,5 ==~ 0,255,0,255;
+        @assert pixel 25,25 ==~ 0,255,0,255;
+        @assert pixel 75,25 ==~ 0,255,0,255;
+        @assert pixel 5,45 ==~ 0,255,0,255;
+        @assert pixel 95,45 ==~ 0,255,0,255;
+    }), 500);
+  expected: green
+
+
+- name: 2d.text.draw.space.basic
+  desc: U+0020 is rendered the correct size (1em wide)
+  testing:
+  - 2d.text.draw.spaces
+  fonts:
+  - CanvasTest
+  code: |
+    ctx.font = '50px CanvasTest';
+    deferTest();
+    step_timeout(t.step_func_done(function () {
+        ctx.fillStyle = '#f00';
+        ctx.fillRect(0, 0, 100, 50);
+        ctx.fillStyle = '#0f0';
+        ctx.fillText('E EE', -100, 37.5);
+        @assert pixel 25,25 ==~ 0,255,0,255;
+        @assert pixel 75,25 ==~ 0,255,0,255;
+    }), 500);
+  expected: green
+
+- name: 2d.text.draw.space.collapse.nonspace
+  desc: Non-space characters are not converted to U+0020 and collapsed
+  testing:
+  - 2d.text.draw.spaces
+  fonts:
+  - CanvasTest
+  code: |
+    ctx.font = '50px CanvasTest';
+    deferTest();
+    step_timeout(t.step_func_done(function () {
+        ctx.fillStyle = '#f00';
+        ctx.fillRect(0, 0, 100, 50);
+        ctx.fillStyle = '#0f0';
+        ctx.fillText('E\x0b EE', -150, 37.5);
+        @assert pixel 25,25 ==~ 0,255,0,255;
+        @assert pixel 75,25 ==~ 0,255,0,255;
+    }), 500);
+  expected: green
+
+- name: 2d.text.measure.width.basic
+  desc: The width of character is same as font used
+  testing:
+  - 2d.text.measure
+  fonts:
+  - CanvasTest
+  code: |
+    deferTest();
+    var f = new FontFace("CanvasTest", "/fonts/CanvasTest.ttf");
+    document.fonts.add(f);
+    document.fonts.ready.then(() => {
+        step_timeout(t.step_func_done(function () {
+            ctx.font = '50px CanvasTest';
+            @assert ctx.measureText('A').width === 50;
+            @assert ctx.measureText('AA').width === 100;
+            @assert ctx.measureText('ABCD').width === 200;
+
+            ctx.font = '100px CanvasTest';
+            @assert ctx.measureText('A').width === 100;
+        }), 500);
+    });
+
+- name: 2d.text.measure.width.empty
+  desc: The empty string has zero width
+  testing:
+  - 2d.text.measure
+  fonts:
+  - CanvasTest
+  code: |
+    deferTest();
+    var f = new FontFace("CanvasTest", "/fonts/CanvasTest.ttf");
+    document.fonts.add(f);
+    document.fonts.ready.then(() => {
+        step_timeout(t.step_func_done(function () {
+            ctx.font = '50px CanvasTest';
+            @assert ctx.measureText("").width === 0;
+        }), 500);
+    });
+
+- name: 2d.text.measure.advances
+  desc: Testing width advances
+  testing:
+  - 2d.text.measure.advances
+  fonts:
+  - CanvasTest
+  code: |
+    deferTest();
+    var f = new FontFace("CanvasTest", "/fonts/CanvasTest.ttf");
+    document.fonts.add(f);
+    document.fonts.ready.then(() => {
+        step_timeout(t.step_func_done(function () {
+            ctx.font = '50px CanvasTest';
+            ctx.direction = 'ltr';
+            ctx.align = 'left'
+            // Some platforms may return '-0'.
+            @assert Math.abs(ctx.measureText('Hello').advances[0]) === 0;
+            // Different platforms may render text slightly different.
+            @assert ctx.measureText('Hello').advances[1] >= 36;
+            @assert ctx.measureText('Hello').advances[2] >= 58;
+            @assert ctx.measureText('Hello').advances[3] >= 70;
+            @assert ctx.measureText('Hello').advances[4] >= 80;
+
+            var tm = ctx.measureText('Hello');
+            @assert ctx.measureText('Hello').advances[0] === tm.advances[0];
+            @assert ctx.measureText('Hello').advances[1] === tm.advances[1];
+            @assert ctx.measureText('Hello').advances[2] === tm.advances[2];
+            @assert ctx.measureText('Hello').advances[3] === tm.advances[3];
+            @assert ctx.measureText('Hello').advances[4] === tm.advances[4];
+        }), 500);
+    });
+
+- name: 2d.text.measure.actualBoundingBox
+  desc: Testing actualBoundingBox
+  testing:
+  - 2d.text.measure.actualBoundingBox
+  fonts:
+  - CanvasTest
+  code: |
+    deferTest();
+    var f = new FontFace("CanvasTest", "/fonts/CanvasTest.ttf");
+    document.fonts.add(f);
+    document.fonts.ready.then(() => {
+        step_timeout(t.step_func_done(function () {
+            ctx.font = '50px CanvasTest';
+            ctx.direction = 'ltr';
+            ctx.align = 'left'
+            ctx.baseline = 'alphabetic'
+            // Different platforms may render text slightly different.
+            // Values that are nominally expected to be zero might actually vary by a pixel or so
+            // if the UA accounts for antialiasing at glyph edges, so we allow a slight deviation.
+            @assert Math.abs(ctx.measureText('A').actualBoundingBoxLeft) <= 1;
+            @assert ctx.measureText('A').actualBoundingBoxRight >= 50;
+            @assert ctx.measureText('A').actualBoundingBoxAscent >= 35;
+            @assert Math.abs(ctx.measureText('A').actualBoundingBoxDescent) <= 1;
+
+            @assert Math.abs(ctx.measureText('ABCD').actualBoundingBoxLeft) <= 1;
+            @assert ctx.measureText('ABCD').actualBoundingBoxRight >= 200;
+            @assert ctx.measureText('ABCD').actualBoundingBoxAscent >= 85;
+            @assert ctx.measureText('ABCD').actualBoundingBoxDescent >= 37;
+        }), 500);
+    });
+
+- name: 2d.text.measure.fontBoundingBox
+  desc: Testing fontBoundingBox
+  testing:
+  - 2d.text.measure.fontBoundingBox
+  fonts:
+  - CanvasTest
+  code: |
+    deferTest();
+    var f = new FontFace("CanvasTest", "/fonts/CanvasTest.ttf");
+    document.fonts.add(f);
+    document.fonts.ready.then(() => {
+        step_timeout(t.step_func_done(function () {
+            ctx.font = '50px CanvasTest';
+            ctx.direction = 'ltr';
+            ctx.align = 'left'
+            @assert ctx.measureText('A').fontBoundingBoxAscent === 85;
+            @assert ctx.measureText('A').fontBoundingBoxDescent === 39;
+
+            @assert ctx.measureText('ABCD').fontBoundingBoxAscent === 85;
+            @assert ctx.measureText('ABCD').fontBoundingBoxDescent === 39;
+        }), 500);
+    });
+
+- name: 2d.text.measure.emHeights
+  desc: Testing emHeights
+  testing:
+  - 2d.text.measure.emHeights
+  fonts:
+  - CanvasTest
+  code: |
+    deferTest();
+    var f = new FontFace("CanvasTest", "/fonts/CanvasTest.ttf");
+    document.fonts.add(f);
+    document.fonts.ready.then(() => {
+         step_timeout(t.step_func_done(function () {
+            ctx.font = '50px CanvasTest';
+            ctx.direction = 'ltr';
+            ctx.align = 'left'
+            @assert ctx.measureText('A').emHeightAscent === 37.5;
+            @assert ctx.measureText('A').emHeightDescent === 12.5;
+            @assert ctx.measureText('A').emHeightDescent + ctx.measureText('A').emHeightAscent === 50;
+
+            @assert ctx.measureText('ABCD').emHeightAscent === 37.5;
+            @assert ctx.measureText('ABCD').emHeightDescent === 12.5;
+            @assert ctx.measureText('ABCD').emHeightDescent + ctx.measureText('ABCD').emHeightAscent === 50;
+        }), 500);
+    });
+
+- name: 2d.text.measure.baselines
+  desc: Testing baselines
+  testing:
+  - 2d.text.measure.baselines
+  fonts:
+  - CanvasTest
+  code: |
+    deferTest();
+    var f = new FontFace("CanvasTest", "/fonts/CanvasTest.ttf");
+    document.fonts.add(f);
+    document.fonts.ready.then(() => {
+         step_timeout(t.step_func_done(function () {
+            ctx.font = '50px CanvasTest';
+            ctx.direction = 'ltr';
+            ctx.align = 'left'
+            @assert Math.abs(ctx.measureText('A').getBaselines().alphabetic) === 0;
+            @assert ctx.measureText('A').getBaselines().ideographic === -39;
+            @assert ctx.measureText('A').getBaselines().hanging === 68;
+
+            @assert Math.abs(ctx.measureText('ABCD').getBaselines().alphabetic) === 0;
+            @assert ctx.measureText('ABCD').getBaselines().ideographic === -39;
+            @assert ctx.measureText('ABCD').getBaselines().hanging === 68;
+        }), 500);
+    });
+
+# TODO: shadows, alpha, composite, clip
diff --git a/tests/wpt/web-platform-tests/html/canvas/tools/yaml/element/fill-and-stroke-styles.yaml b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/element/fill-and-stroke-styles.yaml
new file mode 100644
index 00000000000..1483cadd442
--- /dev/null
+++ b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/element/fill-and-stroke-styles.yaml
@@ -0,0 +1,2059 @@
+- name: 2d.fillStyle.parse.current.basic
+  desc: currentColor is computed from the canvas element
+  testing:
+  - 2d.colours.parse
+  - 2d.currentColor.onset
+  code: |
+    canvas.setAttribute('style', 'color: #0f0');
+    ctx.fillStyle = '#f00';
+    ctx.fillStyle = 'currentColor';
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.fillStyle.parse.current.changed
+  desc: currentColor is computed when the attribute is set, not when it is painted
+  testing:
+  - 2d.colours.parse
+  - 2d.currentColor.onset
+  code: |
+    canvas.setAttribute('style', 'color: #0f0');
+    ctx.fillStyle = '#f00';
+    ctx.fillStyle = 'currentColor';
+    canvas.setAttribute('style', 'color: #f00');
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.fillStyle.parse.current.removed
+  desc: currentColor is solid black when the canvas element is not in a document
+  testing:
+  - 2d.colours.parse
+  - 2d.currentColor.outofdoc
+  code: |
+    // Try not to let it undetectably incorrectly pick up opaque-black
+    // from other parts of the document:
+    document.body.parentNode.setAttribute('style', 'color: #f00');
+    document.body.setAttribute('style', 'color: #f00');
+    canvas.setAttribute('style', 'color: #f00');
+
+    var canvas2 = document.createElement('canvas');
+    var ctx2 = canvas2.getContext('2d');
+    ctx2.fillStyle = '#f00';
+    ctx2.fillStyle = 'currentColor';
+    ctx2.fillRect(0, 0, 100, 50);
+    ctx.drawImage(canvas2, 0, 0);
+
+    document.body.parentNode.removeAttribute('style');
+    document.body.removeAttribute('style');
+
+    @assert pixel 50,25 == 0,0,0,255;
+  expected: |
+    size 100 50
+    cr.set_source_rgb(0, 0, 0)
+    cr.rectangle(0, 0, 100, 50)
+    cr.fill()
+
+- name: 2d.fillStyle.invalidstring
+  testing:
+  - 2d.colours.invalidstring
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.fillStyle = 'invalid';
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.fillStyle.invalidtype
+  testing:
+  - 2d.colours.invalidtype
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.fillStyle = null;
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.fillStyle.get.solid
+  testing:
+  - 2d.colours.getcolour
+  - 2d.serializecolour.solid
+  code: |
+    ctx.fillStyle = '#fa0';
+    @assert ctx.fillStyle === '#ffaa00';
+
+- name: 2d.fillStyle.get.semitransparent
+  testing:
+  - 2d.colours.getcolour
+  - 2d.serializecolour.transparent
+  code: |
+    ctx.fillStyle = 'rgba(255,255,255,0.45)';
+    @assert ctx.fillStyle =~ /^rgba\(255, 255, 255, 0\.4\d+\)$/;
+
+- name: 2d.fillStyle.get.transparent
+  testing:
+  - 2d.colours.getcolour
+  - 2d.serializecolour.transparent
+  code: |
+    ctx.fillStyle = 'rgba(0,0,0,0)';
+    @assert ctx.fillStyle === 'rgba(0, 0, 0, 0)';
+
+- name: 2d.fillStyle.default
+  testing:
+  - 2d.colours.default
+  code: |
+    @assert ctx.fillStyle === '#000000';
+
+- name: 2d.strokeStyle.default
+  testing:
+  - 2d.colours.default
+  code: |
+    @assert ctx.strokeStyle === '#000000';
+
+
+- name: 2d.gradient.object.type
+  desc: window.CanvasGradient exists and has the right properties
+  testing:
+  - 2d.canvasGradient.type
+  notes: &bindings Defined in "Web IDL" (draft)
+  code: |
+    @assert window.CanvasGradient !== undefined;
+    @assert window.CanvasGradient.prototype.addColorStop !== undefined;
+
+- name: 2d.gradient.object.return
+  desc: createLinearGradient() and createRadialGradient() returns objects implementing
+    CanvasGradient
+  testing:
+  - 2d.gradient.linear.return
+  - 2d.gradient.radial.return
+  code: |
+    window.CanvasGradient.prototype.thisImplementsCanvasGradient = true;
+
+    var g1 = ctx.createLinearGradient(0, 0, 100, 0);
+    @assert g1.addColorStop !== undefined;
+    @assert g1.thisImplementsCanvasGradient === true;
+
+    var g2 = ctx.createRadialGradient(0, 0, 10, 0, 0, 20);
+    @assert g2.addColorStop !== undefined;
+    @assert g2.thisImplementsCanvasGradient === true;
+
+- name: 2d.gradient.interpolate.solid
+  testing:
+  - 2d.gradient.interpolate.linear
+  code: |
+    var g = ctx.createLinearGradient(0, 0, 100, 0);
+    g.addColorStop(0, '#0f0');
+    g.addColorStop(1, '#0f0');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.gradient.interpolate.colour
+  testing:
+  - 2d.gradient.interpolate.linear
+  code: |
+    var g = ctx.createLinearGradient(0, 0, 100, 0);
+    g.addColorStop(0, '#ff0');
+    g.addColorStop(1, '#00f');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 25,25 ==~ 191,191,63,255 +/- 3;
+    @assert pixel 50,25 ==~ 127,127,127,255 +/- 3;
+    @assert pixel 75,25 ==~ 63,63,191,255 +/- 3;
+  expected: |
+    size 100 50
+    g = cairo.LinearGradient(0, 0, 100, 0)
+    g.add_color_stop_rgb(0, 1,1,0)
+    g.add_color_stop_rgb(1, 0,0,1)
+    cr.set_source(g)
+    cr.rectangle(0, 0, 100, 50)
+    cr.fill()
+
+- name: 2d.gradient.interpolate.alpha
+  testing:
+  - 2d.gradient.interpolate.linear
+  code: |
+    ctx.fillStyle = '#ff0';
+    ctx.fillRect(0, 0, 100, 50);
+    var g = ctx.createLinearGradient(0, 0, 100, 0);
+    g.addColorStop(0, 'rgba(0,0,255, 0)');
+    g.addColorStop(1, 'rgba(0,0,255, 1)');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 25,25 ==~ 191,191,63,255 +/- 3;
+    @assert pixel 50,25 ==~ 127,127,127,255 +/- 3;
+    @assert pixel 75,25 ==~ 63,63,191,255 +/- 3;
+  expected: |
+    size 100 50
+    g = cairo.LinearGradient(0, 0, 100, 0)
+    g.add_color_stop_rgb(0, 1,1,0)
+    g.add_color_stop_rgb(1, 0,0,1)
+    cr.set_source(g)
+    cr.rectangle(0, 0, 100, 50)
+    cr.fill()
+
+- name: 2d.gradient.interpolate.colouralpha
+  testing:
+  - 2d.gradient.interpolate.alpha
+  code: |
+    var g = ctx.createLinearGradient(0, 0, 100, 0);
+    g.addColorStop(0, 'rgba(255,255,0, 0)');
+    g.addColorStop(1, 'rgba(0,0,255, 1)');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 25,25 ==~ 190,190,65,65 +/- 3;
+    @assert pixel 50,25 ==~ 126,126,128,128 +/- 3;
+    @assert pixel 75,25 ==~ 62,62,192,192 +/- 3;
+  expected: |
+    size 100 50
+    g = cairo.LinearGradient(0, 0, 100, 0)
+    g.add_color_stop_rgba(0, 1,1,0, 0)
+    g.add_color_stop_rgba(1, 0,0,1, 1)
+    cr.set_source(g)
+    cr.rectangle(0, 0, 100, 50)
+    cr.fill()
+
+- name: 2d.gradient.interpolate.outside
+  testing:
+  - 2d.gradient.outside.first
+  - 2d.gradient.outside.last
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+
+    var g = ctx.createLinearGradient(25, 0, 75, 0);
+    g.addColorStop(0.4, '#0f0');
+    g.addColorStop(0.6, '#0f0');
+
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 20,25 ==~ 0,255,0,255;
+    @assert pixel 50,25 ==~ 0,255,0,255;
+    @assert pixel 80,25 ==~ 0,255,0,255;
+  expected: green
+
+- name: 2d.gradient.interpolate.zerosize.fill
+  testing:
+  - 2d.gradient.linear.zerosize
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    var g = ctx.createLinearGradient(50, 25, 50, 25); // zero-length line (undefined direction)
+    g.addColorStop(0, '#f00');
+    g.addColorStop(1, '#f00');
+    ctx.fillStyle = g;
+    ctx.rect(0, 0, 100, 50);
+    ctx.fill();
+    @assert pixel 40,20 == 0,255,0,255;
+  expected: green
+
+- name: 2d.gradient.interpolate.zerosize.stroke
+  testing:
+  - 2d.gradient.linear.zerosize
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    var g = ctx.createLinearGradient(50, 25, 50, 25); // zero-length line (undefined direction)
+    g.addColorStop(0, '#f00');
+    g.addColorStop(1, '#f00');
+    ctx.strokeStyle = g;
+    ctx.rect(20, 20, 60, 10);
+    ctx.stroke();
+    @assert pixel 19,19 == 0,255,0,255;
+    @assert pixel 20,19 == 0,255,0,255;
+    @assert pixel 21,19 == 0,255,0,255;
+    @assert pixel 19,20 == 0,255,0,255;
+    @assert pixel 20,20 == 0,255,0,255;
+    @assert pixel 21,20 == 0,255,0,255;
+    @assert pixel 19,21 == 0,255,0,255;
+    @assert pixel 20,21 == 0,255,0,255;
+    @assert pixel 21,21 == 0,255,0,255;
+  expected: green
+
+- name: 2d.gradient.interpolate.zerosize.fillRect
+  testing:
+  - 2d.gradient.linear.zerosize
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    var g = ctx.createLinearGradient(50, 25, 50, 25); // zero-length line (undefined direction)
+    g.addColorStop(0, '#f00');
+    g.addColorStop(1, '#f00');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 40,20 == 0,255,0,255; @moz-todo
+  expected: green
+
+- name: 2d.gradient.interpolate.zerosize.strokeRect
+  testing:
+  - 2d.gradient.linear.zerosize
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    var g = ctx.createLinearGradient(50, 25, 50, 25); // zero-length line (undefined direction)
+    g.addColorStop(0, '#f00');
+    g.addColorStop(1, '#f00');
+    ctx.strokeStyle = g;
+    ctx.strokeRect(20, 20, 60, 10);
+    @assert pixel 19,19 == 0,255,0,255;
+    @assert pixel 20,19 == 0,255,0,255;
+    @assert pixel 21,19 == 0,255,0,255;
+    @assert pixel 19,20 == 0,255,0,255;
+    @assert pixel 20,20 == 0,255,0,255;
+    @assert pixel 21,20 == 0,255,0,255;
+    @assert pixel 19,21 == 0,255,0,255;
+    @assert pixel 20,21 == 0,255,0,255;
+    @assert pixel 21,21 == 0,255,0,255;
+  expected: green
+
+- name: 2d.gradient.interpolate.zerosize.fillText
+  testing:
+  - 2d.gradient.linear.zerosize
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    var g = ctx.createLinearGradient(50, 25, 50, 25); // zero-length line (undefined direction)
+    g.addColorStop(0, '#f00');
+    g.addColorStop(1, '#f00');
+    ctx.fillStyle = g;
+    ctx.font = '100px sans-serif';
+    ctx.fillText("AA", 0, 50);
+    _assertGreen(ctx, 100, 50);
+  expected: green
+
+- name: 2d.gradient.interpolate.zerosize.strokeText
+  testing:
+  - 2d.gradient.linear.zerosize
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    var g = ctx.createLinearGradient(50, 25, 50, 25); // zero-length line (undefined direction)
+    g.addColorStop(0, '#f00');
+    g.addColorStop(1, '#f00');
+    ctx.strokeStyle = g;
+    ctx.font = '100px sans-serif';
+    ctx.strokeText("AA", 0, 50);
+    _assertGreen(ctx, 100, 50);
+  expected: green
+
+
+- name: 2d.gradient.interpolate.vertical
+  testing:
+  - 2d.gradient.interpolate.linear
+  code: |
+    var g = ctx.createLinearGradient(0, 0, 0, 50);
+    g.addColorStop(0, '#ff0');
+    g.addColorStop(1, '#00f');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 50,12 ==~ 191,191,63,255 +/- 10;
+    @assert pixel 50,25 ==~ 127,127,127,255 +/- 5;
+    @assert pixel 50,37 ==~ 63,63,191,255 +/- 10;
+  expected: |
+    size 100 50
+    g = cairo.LinearGradient(0, 0, 0, 50)
+    g.add_color_stop_rgb(0, 1,1,0)
+    g.add_color_stop_rgb(1, 0,0,1)
+    cr.set_source(g)
+    cr.rectangle(0, 0, 100, 50)
+    cr.fill()
+
+- name: 2d.gradient.interpolate.multiple
+  testing:
+  - 2d.gradient.interpolate.linear
+  code: |
+    canvas.width = 200;
+    var g = ctx.createLinearGradient(0, 0, 200, 0);
+    g.addColorStop(0, '#ff0');
+    g.addColorStop(0.5, '#0ff');
+    g.addColorStop(1, '#f0f');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 200, 50);
+    @assert pixel 50,25 ==~ 127,255,127,255 +/- 3;
+    @assert pixel 100,25 ==~ 0,255,255,255 +/- 3;
+    @assert pixel 150,25 ==~ 127,127,255,255 +/- 3;
+  expected: |
+    size 200 50
+    g = cairo.LinearGradient(0, 0, 200, 0)
+    g.add_color_stop_rgb(0.0, 1,1,0)
+    g.add_color_stop_rgb(0.5, 0,1,1)
+    g.add_color_stop_rgb(1.0, 1,0,1)
+    cr.set_source(g)
+    cr.rectangle(0, 0, 200, 50)
+    cr.fill()
+
+- name: 2d.gradient.interpolate.overlap
+  testing:
+  - 2d.gradient.interpolate.overlap
+  code: |
+    canvas.width = 200;
+    var g = ctx.createLinearGradient(0, 0, 200, 0);
+    g.addColorStop(0, '#f00');
+    g.addColorStop(0, '#ff0');
+    g.addColorStop(0.25, '#00f');
+    g.addColorStop(0.25, '#0f0');
+    g.addColorStop(0.25, '#0f0');
+    g.addColorStop(0.25, '#0f0');
+    g.addColorStop(0.25, '#ff0');
+    g.addColorStop(0.5, '#00f');
+    g.addColorStop(0.5, '#0f0');
+    g.addColorStop(0.75, '#00f');
+    g.addColorStop(0.75, '#f00');
+    g.addColorStop(0.75, '#ff0');
+    g.addColorStop(0.5, '#0f0');
+    g.addColorStop(0.5, '#0f0');
+    g.addColorStop(0.5, '#ff0');
+    g.addColorStop(1, '#00f');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 200, 50);
+    @assert pixel 49,25 ==~ 0,0,255,255 +/- 16;
+    @assert pixel 51,25 ==~ 255,255,0,255 +/- 16;
+    @assert pixel 99,25 ==~ 0,0,255,255 +/- 16;
+    @assert pixel 101,25 ==~ 255,255,0,255 +/- 16;
+    @assert pixel 149,25 ==~ 0,0,255,255 +/- 16;
+    @assert pixel 151,25 ==~ 255,255,0,255 +/- 16;
+  expected: |
+    size 200 50
+    g = cairo.LinearGradient(0, 0, 50, 0)
+    g.add_color_stop_rgb(0, 1,1,0)
+    g.add_color_stop_rgb(1, 0,0,1)
+    cr.set_source(g)
+    cr.rectangle(0, 0, 50, 50)
+    cr.fill()
+
+    g = cairo.LinearGradient(50, 0, 100, 0)
+    g.add_color_stop_rgb(0, 1,1,0)
+    g.add_color_stop_rgb(1, 0,0,1)
+    cr.set_source(g)
+    cr.rectangle(50, 0, 50, 50)
+    cr.fill()
+
+    g = cairo.LinearGradient(100, 0, 150, 0)
+    g.add_color_stop_rgb(0, 1,1,0)
+    g.add_color_stop_rgb(1, 0,0,1)
+    cr.set_source(g)
+    cr.rectangle(100, 0, 50, 50)
+    cr.fill()
+
+    g = cairo.LinearGradient(150, 0, 200, 0)
+    g.add_color_stop_rgb(0, 1,1,0)
+    g.add_color_stop_rgb(1, 0,0,1)
+    cr.set_source(g)
+    cr.rectangle(150, 0, 50, 50)
+    cr.fill()
+
+- name: 2d.gradient.interpolate.overlap2
+  testing:
+  - 2d.gradient.interpolate.overlap
+  code: |
+    var g = ctx.createLinearGradient(0, 0, 100, 0);
+    var ps = [ 0, 1/10, 1/4, 1/3, 1/2, 3/4, 1 ];
+    for (var p = 0; p < ps.length; ++p)
+    {
+            g.addColorStop(ps[p], '#0f0');
+            for (var i = 0; i < 15; ++i)
+                    g.addColorStop(ps[p], '#f00');
+            g.addColorStop(ps[p], '#0f0');
+    }
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 1,25 == 0,255,0,255;
+    @assert pixel 30,25 == 0,255,0,255;
+    @assert pixel 40,25 == 0,255,0,255;
+    @assert pixel 60,25 == 0,255,0,255;
+    @assert pixel 80,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.gradient.empty
+  testing:
+  - 2d.gradient.empty
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    var g = ctx.createLinearGradient(0, 0, 0, 50);
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 50,25 ==~ 0,255,0,255;
+  expected: green
+
+- name: 2d.gradient.object.update
+  testing:
+  - 2d.gradient.update
+  code: |
+    var g = ctx.createLinearGradient(-100, 0, 200, 0);
+    g.addColorStop(0, '#f00');
+    g.addColorStop(1, '#f00');
+    ctx.fillStyle = g;
+    g.addColorStop(0.1, '#0f0');
+    g.addColorStop(0.9, '#0f0');
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 50,25 ==~ 0,255,0,255;
+  expected: green
+
+- name: 2d.gradient.object.compare
+  testing:
+  - 2d.gradient.object
+  code: |
+    var g1 = ctx.createLinearGradient(0, 0, 100, 0);
+    var g2 = ctx.createLinearGradient(0, 0, 100, 0);
+    @assert g1 !== g2;
+    ctx.fillStyle = g1;
+    @assert ctx.fillStyle === g1;
+
+- name: 2d.gradient.object.crosscanvas
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    var g = document.createElement('canvas').getContext('2d').createLinearGradient(0, 0, 100, 0);
+    g.addColorStop(0, '#0f0');
+    g.addColorStop(1, '#0f0');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 50,25 ==~ 0,255,0,255;
+  expected: green
+
+- name: 2d.gradient.object.current
+  testing:
+  - 2d.currentColor.gradient
+  code: |
+    canvas.setAttribute('style', 'color: #f00');
+
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+
+    var g = ctx.createLinearGradient(0, 0, 100, 0);
+    g.addColorStop(0, 'currentColor');
+    g.addColorStop(1, 'currentColor');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 50,25 ==~ 0,0,0,255;
+  expected: |
+    size 100 50
+    cr.set_source_rgb(0, 0, 0)
+    cr.rectangle(0, 0, 100, 50)
+    cr.fill()
+
+- name: 2d.gradient.object.invalidoffset
+  testing:
+  - 2d.gradient.invalidoffset
+  code: |
+    var g = ctx.createLinearGradient(0, 0, 100, 0);
+    @assert throws INDEX_SIZE_ERR g.addColorStop(-1, '#000');
+    @assert throws INDEX_SIZE_ERR g.addColorStop(2, '#000');
+    @assert throws TypeError g.addColorStop(Infinity, '#000');
+    @assert throws TypeError g.addColorStop(-Infinity, '#000');
+    @assert throws TypeError g.addColorStop(NaN, '#000');
+
+- name: 2d.gradient.object.invalidcolour
+  testing:
+  - 2d.gradient.invalidcolour
+  code: |
+    var g = ctx.createLinearGradient(0, 0, 100, 0);
+    @assert throws SYNTAX_ERR g.addColorStop(0, "");
+    @assert throws SYNTAX_ERR g.addColorStop(0, 'rgb(NaN%, NaN%, NaN%)');
+    @assert throws SYNTAX_ERR g.addColorStop(0, 'null');
+    @assert throws SYNTAX_ERR g.addColorStop(0, 'undefined');
+    @assert throws SYNTAX_ERR g.addColorStop(0, null);
+    @assert throws SYNTAX_ERR g.addColorStop(0, undefined);
+
+    var g = ctx.createRadialGradient(0, 0, 0, 100, 0, 0);
+    @assert throws SYNTAX_ERR g.addColorStop(0, "");
+    @assert throws SYNTAX_ERR g.addColorStop(0, 'rgb(NaN%, NaN%, NaN%)');
+    @assert throws SYNTAX_ERR g.addColorStop(0, 'null');
+    @assert throws SYNTAX_ERR g.addColorStop(0, 'undefined');
+    @assert throws SYNTAX_ERR g.addColorStop(0, null);
+    @assert throws SYNTAX_ERR g.addColorStop(0, undefined);
+
+
+- name: 2d.gradient.linear.nonfinite
+  desc: createLinearGradient() throws TypeError if arguments are not finite
+  notes: *bindings
+  testing:
+  - 2d.gradient.linear.nonfinite
+  code: |
+    @nonfinite @assert throws TypeError ctx.createLinearGradient(<0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <1 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>);
+
+- name: 2d.gradient.linear.transform.1
+  desc: Linear gradient coordinates are relative to the coordinate space at the time
+    of filling
+  testing:
+  - 2d.gradient.linear.transform
+  code: |
+    var g = ctx.createLinearGradient(0, 0, 200, 0);
+    g.addColorStop(0, '#f00');
+    g.addColorStop(0.25, '#0f0');
+    g.addColorStop(0.75, '#0f0');
+    g.addColorStop(1, '#f00');
+    ctx.fillStyle = g;
+    ctx.translate(-50, 0);
+    ctx.fillRect(50, 0, 100, 50);
+    @assert pixel 25,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 75,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.gradient.linear.transform.2
+  desc: Linear gradient coordinates are relative to the coordinate space at the time
+    of filling
+  testing:
+  - 2d.gradient.linear.transform
+  code: |
+    ctx.translate(100, 0);
+    var g = ctx.createLinearGradient(0, 0, 200, 0);
+    g.addColorStop(0, '#f00');
+    g.addColorStop(0.25, '#0f0');
+    g.addColorStop(0.75, '#0f0');
+    g.addColorStop(1, '#f00');
+    ctx.fillStyle = g;
+    ctx.translate(-150, 0);
+    ctx.fillRect(50, 0, 100, 50);
+    @assert pixel 25,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 75,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.gradient.linear.transform.3
+  desc: Linear gradient transforms do not experience broken caching effects
+  testing:
+  - 2d.gradient.linear.transform
+  code: |
+    var g = ctx.createLinearGradient(0, 0, 200, 0);
+    g.addColorStop(0, '#f00');
+    g.addColorStop(0.25, '#0f0');
+    g.addColorStop(0.75, '#0f0');
+    g.addColorStop(1, '#f00');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.translate(-50, 0);
+    ctx.fillRect(50, 0, 100, 50);
+    @assert pixel 25,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 75,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.gradient.radial.negative
+  desc: createRadialGradient() throws INDEX_SIZE_ERR if either radius is negative
+  testing:
+  - 2d.gradient.radial.negative
+  code: |
+    @assert throws INDEX_SIZE_ERR ctx.createRadialGradient(0, 0, -0.1, 0, 0, 1);
+    @assert throws INDEX_SIZE_ERR ctx.createRadialGradient(0, 0, 1, 0, 0, -0.1);
+    @assert throws INDEX_SIZE_ERR ctx.createRadialGradient(0, 0, -0.1, 0, 0, -0.1);
+
+- name: 2d.gradient.radial.nonfinite
+  desc: createRadialGradient() throws TypeError if arguments are not finite
+  notes: *bindings
+  testing:
+  - 2d.gradient.radial.nonfinite
+  code: |
+    @nonfinite @assert throws TypeError ctx.createRadialGradient(<0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <1 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <1 Infinity -Infinity NaN>);
+
+- name: 2d.gradient.radial.inside1
+  testing:
+  - 2d.gradient.radial.rendering
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+
+    var g = ctx.createRadialGradient(50, 25, 100, 50, 25, 200);
+    g.addColorStop(0, '#0f0');
+    g.addColorStop(1, '#f00');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 50,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 98,25 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 50,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.gradient.radial.inside2
+  testing:
+  - 2d.gradient.radial.rendering
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+
+    var g = ctx.createRadialGradient(50, 25, 200, 50, 25, 100);
+    g.addColorStop(0, '#f00');
+    g.addColorStop(1, '#0f0');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 50,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 98,25 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 50,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.gradient.radial.inside3
+  testing:
+  - 2d.gradient.radial.rendering
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+
+    var g = ctx.createRadialGradient(50, 25, 200, 50, 25, 100);
+    g.addColorStop(0, '#f00');
+    g.addColorStop(0.993, '#f00');
+    g.addColorStop(1, '#0f0');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 50,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 98,25 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 50,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.gradient.radial.outside1
+  testing:
+  - 2d.gradient.radial.rendering
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+
+    var g = ctx.createRadialGradient(200, 25, 10, 200, 25, 20);
+    g.addColorStop(0, '#f00');
+    g.addColorStop(1, '#0f0');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 50,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 98,25 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 50,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.gradient.radial.outside2
+  testing:
+  - 2d.gradient.radial.rendering
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+
+    var g = ctx.createRadialGradient(200, 25, 20, 200, 25, 10);
+    g.addColorStop(0, '#0f0');
+    g.addColorStop(1, '#f00');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 50,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 98,25 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 50,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.gradient.radial.outside3
+  testing:
+  - 2d.gradient.radial.rendering
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+
+    var g = ctx.createRadialGradient(200, 25, 20, 200, 25, 10);
+    g.addColorStop(0, '#0f0');
+    g.addColorStop(0.001, '#f00');
+    g.addColorStop(1, '#f00');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 50,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 98,25 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 50,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.gradient.radial.touch1
+  testing:
+  - 2d.gradient.radial.rendering
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    var g = ctx.createRadialGradient(150, 25, 50, 200, 25, 100);
+    g.addColorStop(0, '#f00');
+    g.addColorStop(1, '#f00');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+
+    @assert pixel 1,1 == 0,255,0,255; @moz-todo
+    @assert pixel 50,1 == 0,255,0,255; @moz-todo
+    @assert pixel 98,1 == 0,255,0,255; @moz-todo
+    @assert pixel 1,25 == 0,255,0,255; @moz-todo
+    @assert pixel 50,25 == 0,255,0,255; @moz-todo
+    @assert pixel 98,25 == 0,255,0,255; @moz-todo
+    @assert pixel 1,48 == 0,255,0,255; @moz-todo
+    @assert pixel 50,48 == 0,255,0,255; @moz-todo
+    @assert pixel 98,48 == 0,255,0,255; @moz-todo
+  expected: green
+
+- name: 2d.gradient.radial.touch2
+  testing:
+  - 2d.gradient.radial.rendering
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+
+    var g = ctx.createRadialGradient(-80, 25, 70, 0, 25, 150);
+    g.addColorStop(0, '#f00');
+    g.addColorStop(0.01, '#0f0');
+    g.addColorStop(0.99, '#0f0');
+    g.addColorStop(1, '#f00');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 50,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 98,25 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 50,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.gradient.radial.touch3
+  testing:
+  - 2d.gradient.radial.rendering
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    var g = ctx.createRadialGradient(120, -15, 25, 140, -30, 50);
+    g.addColorStop(0, '#f00');
+    g.addColorStop(1, '#f00');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+
+    @assert pixel 1,1 == 0,255,0,255; @moz-todo
+    @assert pixel 50,1 == 0,255,0,255; @moz-todo
+    @assert pixel 98,1 == 0,255,0,255; @moz-todo
+    @assert pixel 1,25 == 0,255,0,255; @moz-todo
+    @assert pixel 50,25 == 0,255,0,255; @moz-todo
+    @assert pixel 98,25 == 0,255,0,255; @moz-todo
+    @assert pixel 1,48 == 0,255,0,255; @moz-todo
+    @assert pixel 50,48 == 0,255,0,255; @moz-todo
+    @assert pixel 98,48 == 0,255,0,255; @moz-todo
+  expected: green
+
+- name: 2d.gradient.radial.equal
+  testing:
+  - 2d.gradient.radial.equal
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    var g = ctx.createRadialGradient(50, 25, 20, 50, 25, 20);
+    g.addColorStop(0, '#f00');
+    g.addColorStop(1, '#f00');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+
+    @assert pixel 1,1 == 0,255,0,255; @moz-todo
+    @assert pixel 50,1 == 0,255,0,255; @moz-todo
+    @assert pixel 98,1 == 0,255,0,255; @moz-todo
+    @assert pixel 1,25 == 0,255,0,255; @moz-todo
+    @assert pixel 50,25 == 0,255,0,255; @moz-todo
+    @assert pixel 98,25 == 0,255,0,255; @moz-todo
+    @assert pixel 1,48 == 0,255,0,255; @moz-todo
+    @assert pixel 50,48 == 0,255,0,255; @moz-todo
+    @assert pixel 98,48 == 0,255,0,255; @moz-todo
+  expected: green
+
+- name: 2d.gradient.radial.cone.behind
+  testing:
+  - 2d.gradient.radial.rendering
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    var g = ctx.createRadialGradient(120, 25, 10, 211, 25, 100);
+    g.addColorStop(0, '#f00');
+    g.addColorStop(1, '#f00');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+
+    @assert pixel 1,1 == 0,255,0,255; @moz-todo
+    @assert pixel 50,1 == 0,255,0,255; @moz-todo
+    @assert pixel 98,1 == 0,255,0,255; @moz-todo
+    @assert pixel 1,25 == 0,255,0,255; @moz-todo
+    @assert pixel 50,25 == 0,255,0,255; @moz-todo
+    @assert pixel 98,25 == 0,255,0,255; @moz-todo
+    @assert pixel 1,48 == 0,255,0,255; @moz-todo
+    @assert pixel 50,48 == 0,255,0,255; @moz-todo
+    @assert pixel 98,48 == 0,255,0,255; @moz-todo
+  expected: green
+
+- name: 2d.gradient.radial.cone.front
+  testing:
+  - 2d.gradient.radial.rendering
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+
+    var g = ctx.createRadialGradient(311, 25, 10, 210, 25, 100);
+    g.addColorStop(0, '#f00');
+    g.addColorStop(1, '#0f0');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 50,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 98,25 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 50,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.gradient.radial.cone.bottom
+  testing:
+  - 2d.gradient.radial.rendering
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+
+    var g = ctx.createRadialGradient(210, 25, 100, 230, 25, 101);
+    g.addColorStop(0, '#0f0');
+    g.addColorStop(1, '#f00');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 50,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 98,25 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 50,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.gradient.radial.cone.top
+  testing:
+  - 2d.gradient.radial.rendering
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+
+    var g = ctx.createRadialGradient(230, 25, 100, 100, 25, 101);
+    g.addColorStop(0, '#f00');
+    g.addColorStop(1, '#0f0');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 50,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 98,25 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 50,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.gradient.radial.cone.beside
+  testing:
+  - 2d.gradient.radial.rendering
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    var g = ctx.createRadialGradient(0, 100, 40, 100, 100, 50);
+    g.addColorStop(0, '#f00');
+    g.addColorStop(1, '#f00');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+
+    @assert pixel 1,1 == 0,255,0,255; @moz-todo
+    @assert pixel 50,1 == 0,255,0,255; @moz-todo
+    @assert pixel 98,1 == 0,255,0,255; @moz-todo
+    @assert pixel 1,25 == 0,255,0,255; @moz-todo
+    @assert pixel 50,25 == 0,255,0,255; @moz-todo
+    @assert pixel 98,25 == 0,255,0,255; @moz-todo
+    @assert pixel 1,48 == 0,255,0,255; @moz-todo
+    @assert pixel 50,48 == 0,255,0,255; @moz-todo
+    @assert pixel 98,48 == 0,255,0,255; @moz-todo
+  expected: green
+
+- name: 2d.gradient.radial.cone.cylinder
+  testing:
+  - 2d.gradient.radial.rendering
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+
+    var g = ctx.createRadialGradient(210, 25, 100, 230, 25, 100);
+    g.addColorStop(0, '#0f0');
+    g.addColorStop(1, '#f00');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 50,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 98,25 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 50,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.gradient.radial.cone.shape1
+  testing:
+  - 2d.gradient.radial.rendering
+  code: |
+    var tol = 1; // tolerance to avoid antialiasing artifacts
+
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.fillStyle = '#f00';
+    ctx.beginPath();
+    ctx.moveTo(30+tol, 40);
+    ctx.lineTo(110, -20+tol);
+    ctx.lineTo(110, 100-tol);
+    ctx.fill();
+
+    var g = ctx.createRadialGradient(30+10*5/2, 40, 10*3/2, 30+10*15/4, 40, 10*9/4);
+    g.addColorStop(0, '#0f0');
+    g.addColorStop(1, '#0f0');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 50,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 98,25 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 50,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.gradient.radial.cone.shape2
+  testing:
+  - 2d.gradient.radial.rendering
+  code: |
+    var tol = 1; // tolerance to avoid antialiasing artifacts
+
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    var g = ctx.createRadialGradient(30+10*5/2, 40, 10*3/2, 30+10*15/4, 40, 10*9/4);
+    g.addColorStop(0, '#f00');
+    g.addColorStop(1, '#f00');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.fillStyle = '#0f0';
+    ctx.beginPath();
+    ctx.moveTo(30-tol, 40);
+    ctx.lineTo(110, -20-tol);
+    ctx.lineTo(110, 100+tol);
+    ctx.fill();
+
+    @assert pixel 1,1 == 0,255,0,255; @moz-todo
+    @assert pixel 50,1 == 0,255,0,255; @moz-todo
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,25 == 0,255,0,255; @moz-todo
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 98,25 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255; @moz-todo
+    @assert pixel 50,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.gradient.radial.transform.1
+  desc: Radial gradient coordinates are relative to the coordinate space at the time
+    of filling
+  testing:
+  - 2d.gradient.radial.transform
+  code: |
+    var g = ctx.createRadialGradient(0, 0, 0, 0, 0, 11.2);
+    g.addColorStop(0, '#0f0');
+    g.addColorStop(0.5, '#0f0');
+    g.addColorStop(0.51, '#f00');
+    g.addColorStop(1, '#f00');
+    ctx.fillStyle = g;
+    ctx.translate(50, 25);
+    ctx.scale(10, 10);
+    ctx.fillRect(-5, -2.5, 10, 5);
+    @assert pixel 25,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 75,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.gradient.radial.transform.2
+  desc: Radial gradient coordinates are relative to the coordinate space at the time
+    of filling
+  testing:
+  - 2d.gradient.radial.transform
+  code: |
+    ctx.translate(100, 0);
+    var g = ctx.createRadialGradient(0, 0, 0, 0, 0, 11.2);
+    g.addColorStop(0, '#0f0');
+    g.addColorStop(0.5, '#0f0');
+    g.addColorStop(0.51, '#f00');
+    g.addColorStop(1, '#f00');
+    ctx.fillStyle = g;
+    ctx.translate(-50, 25);
+    ctx.scale(10, 10);
+    ctx.fillRect(-5, -2.5, 10, 5);
+    @assert pixel 25,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 75,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.gradient.radial.transform.3
+  desc: Radial gradient transforms do not experience broken caching effects
+  testing:
+  - 2d.gradient.radial.transform
+  code: |
+    var g = ctx.createRadialGradient(0, 0, 0, 0, 0, 11.2);
+    g.addColorStop(0, '#0f0');
+    g.addColorStop(0.5, '#0f0');
+    g.addColorStop(0.51, '#f00');
+    g.addColorStop(1, '#f00');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.translate(50, 25);
+    ctx.scale(10, 10);
+    ctx.fillRect(-5, -2.5, 10, 5);
+    @assert pixel 25,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 75,25 == 0,255,0,255;
+  expected: green
+
+
+
+
+
+
+- name: 2d.pattern.basic.type
+  testing:
+  - 2d.pattern.return
+  images:
+  - green.png
+  code: |
+    @assert window.CanvasPattern !== undefined;
+
+    window.CanvasPattern.prototype.thisImplementsCanvasPattern = true;
+
+    var img = document.getElementById('green.png');
+    var pattern = ctx.createPattern(img, 'no-repeat');
+    @assert pattern.thisImplementsCanvasPattern;
+
+- name: 2d.pattern.basic.image
+  testing:
+  - 2d.pattern.painting
+  images:
+  - green.png
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    var img = document.getElementById('green.png');
+    var pattern = ctx.createPattern(img, 'no-repeat');
+    ctx.fillStyle = pattern;
+    ctx.fillRect(0, 0, 100, 50);
+
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.pattern.basic.canvas
+  testing:
+  - 2d.pattern.painting
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+
+    var canvas2 = document.createElement('canvas');
+    canvas2.width = 100;
+    canvas2.height = 50;
+    var ctx2 = canvas2.getContext('2d');
+    ctx2.fillStyle = '#0f0';
+    ctx2.fillRect(0, 0, 100, 50);
+
+    var pattern = ctx.createPattern(canvas2, 'no-repeat');
+    ctx.fillStyle = pattern;
+    ctx.fillRect(0, 0, 100, 50);
+
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 50,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 98,25 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 50,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.pattern.basic.zerocanvas
+  testing:
+  - 2d.pattern.zerocanvas
+  code: |
+    canvas.width = 0;
+    canvas.height = 10;
+    @assert canvas.width === 0;
+    @assert canvas.height === 10;
+    @assert throws INVALID_STATE_ERR ctx.createPattern(canvas, 'repeat');
+
+    canvas.width = 10;
+    canvas.height = 0;
+    @assert canvas.width === 10;
+    @assert canvas.height === 0;
+    @assert throws INVALID_STATE_ERR ctx.createPattern(canvas, 'repeat');
+
+    canvas.width = 0;
+    canvas.height = 0;
+    @assert canvas.width === 0;
+    @assert canvas.height === 0;
+    @assert throws INVALID_STATE_ERR ctx.createPattern(canvas, 'repeat');
+
+- name: 2d.pattern.basic.nocontext
+  testing:
+  - 2d.pattern.painting
+  code: |
+    var canvas2 = document.createElement('canvas');
+    canvas2.width = 100;
+    canvas2.height = 50;
+    var pattern = ctx.createPattern(canvas2, 'no-repeat');
+
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#f00';
+    ctx.fillStyle = pattern;
+    ctx.fillRect(0, 0, 100, 50);
+
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.pattern.image.undefined
+  testing:
+  - 2d.pattern.IDL
+  notes: *bindings
+  code: |
+    @assert throws TypeError ctx.createPattern(undefined, 'repeat');
+
+- name: 2d.pattern.image.null
+  testing:
+  - 2d.pattern.IDL
+  notes: *bindings
+  code: |
+    @assert throws TypeError ctx.createPattern(null, 'repeat');
+
+- name: 2d.pattern.image.string
+  testing:
+  - 2d.pattern.IDL
+  notes: *bindings
+  code: |
+    @assert throws TypeError ctx.createPattern('../images/red.png', 'repeat');
+
+- name: 2d.pattern.image.incomplete.nosrc
+  testing:
+  - 2d.pattern.incomplete.image
+  code: |
+    var img = new Image();
+    @assert ctx.createPattern(img, 'repeat') === null;
+
+- name: 2d.pattern.image.incomplete.immediate
+  testing:
+  - 2d.pattern.incomplete.image
+  images:
+  - red.png
+  code: |
+    var img = new Image();
+    img.src = '../images/red.png';
+    // This triggers the "update the image data" algorithm.
+    // The image will not go to the "completely available" state
+    // until a fetch task in the networking task source is processed,
+    // so the image must not be fully decodable yet:
+    @assert ctx.createPattern(img, 'repeat') === null; @moz-todo
+
+- name: 2d.pattern.image.incomplete.reload
+  testing:
+  - 2d.pattern.incomplete.image
+  images:
+  - yellow.png
+  - red.png
+  code: |
+    var img = document.getElementById('yellow.png');
+    img.src = '../images/red.png';
+    // This triggers the "update the image data" algorithm,
+    // and resets the image to the "unavailable" state.
+    // The image will not go to the "completely available" state
+    // until a fetch task in the networking task source is processed,
+    // so the image must not be fully decodable yet:
+    @assert ctx.createPattern(img, 'repeat') === null; @moz-todo
+
+- name: 2d.pattern.image.incomplete.emptysrc
+  testing:
+  - 2d.pattern.incomplete.image
+  images:
+  - red.png
+  mozilla: {throws: !!null ''}
+  code: |
+    var img = document.getElementById('red.png');
+    img.src = "";
+    @assert ctx.createPattern(img, 'repeat') === null;
+
+- name: 2d.pattern.image.incomplete.removedsrc
+  testing:
+  - 2d.pattern.incomplete.image
+  images:
+  - red.png
+  mozilla: {throws: !!null ''}
+  code: |
+    var img = document.getElementById('red.png');
+    img.removeAttribute('src');
+    @assert ctx.createPattern(img, 'repeat') === null;
+
+- name: 2d.pattern.image.broken
+  testing:
+  - 2d.pattern.broken.image
+  images:
+  - broken.png
+  code: |
+    var img = document.getElementById('broken.png');
+    @assert ctx.createPattern(img, 'repeat') === null;
+
+- name: 2d.pattern.image.nonexistent
+  testing:
+  - 2d.pattern.nonexistent.image
+  images:
+  - no-such-image-really.png
+  code: |
+    var img = document.getElementById('no-such-image-really.png');
+    @assert throws INVALID_STATE_ERR ctx.createPattern(img, 'repeat');
+
+- name: 2d.pattern.svgimage.nonexistent
+  testing:
+  - 2d.pattern.nonexistent.svgimage
+  svgimages:
+  - no-such-image-really.png
+  code: |
+    var img = document.getElementById('no-such-image-really.png');
+    @assert throws INVALID_STATE_ERR ctx.createPattern(img, 'repeat');
+
+- name: 2d.pattern.image.nonexistent-but-loading
+  testing:
+  - 2d.pattern.nonexistent-but-loading.image
+  code: |
+    var img = document.createElement("img");
+    img.src = "/images/no-such-image-really.png";
+    @assert ctx.createPattern(img, 'repeat') === null;
+    var img = document.createElementNS("http://www.w3.org/2000/svg", "image");
+    img.src = "/images/no-such-image-really.png";
+    @assert ctx.createPattern(img, 'repeat') === null;
+
+- name: 2d.pattern.image.nosrc
+  testing:
+  - 2d.pattern.nosrc.image
+  code: |
+    var img = document.createElement("img");
+    @assert ctx.createPattern(img, 'repeat') === null;
+    var img = document.createElementNS("http://www.w3.org/2000/svg", "image");
+    @assert ctx.createPattern(img, 'repeat') === null;
+
+- name: 2d.pattern.image.zerowidth
+  testing:
+  - 2d.pattern.zerowidth.image
+  images:
+  - red-zerowidth.svg
+  code: |
+    var img = document.getElementById('red-zerowidth.svg');
+    @assert ctx.createPattern(img, 'repeat') === null;
+
+- name: 2d.pattern.image.zeroheight
+  testing:
+  - 2d.pattern.zeroheight.image
+  images:
+  - red-zeroheight.svg
+  code: |
+    var img = document.getElementById('red-zeroheight.svg');
+    @assert ctx.createPattern(img, 'repeat') === null;
+
+- name: 2d.pattern.svgimage.zerowidth
+  testing:
+  - 2d.pattern.zerowidth.svgimage
+  svgimages:
+  - red-zerowidth.svg
+  code: |
+    var img = document.getElementById('red-zerowidth.svg');
+    @assert ctx.createPattern(img, 'repeat') === null;
+
+- name: 2d.pattern.svgimage.zeroheight
+  testing:
+  - 2d.pattern.zeroheight.svgimage
+  svgimages:
+  - red-zeroheight.svg
+  code: |
+    var img = document.getElementById('red-zeroheight.svg');
+    @assert ctx.createPattern(img, 'repeat') === null;
+
+- name: 2d.pattern.repeat.empty
+  testing:
+  - 2d.pattern.missing
+  images:
+  - green-1x1.png
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    var img = document.getElementById('green-1x1.png');
+    var pattern = ctx.createPattern(img, "");
+    ctx.fillStyle = pattern;
+    ctx.fillRect(0, 0, 200, 50);
+
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.pattern.repeat.null
+  testing:
+  - 2d.pattern.unrecognised
+  code: |
+    @assert ctx.createPattern(canvas, null) != null;
+
+- name: 2d.pattern.repeat.undefined
+  testing:
+  - 2d.pattern.unrecognised
+  code: |
+    @assert throws SYNTAX_ERR ctx.createPattern(canvas, undefined);
+
+- name: 2d.pattern.repeat.unrecognised
+  testing:
+  - 2d.pattern.unrecognised
+  code: |
+    @assert throws SYNTAX_ERR ctx.createPattern(canvas, "invalid");
+
+- name: 2d.pattern.repeat.unrecognisednull
+  testing:
+  - 2d.pattern.unrecognised
+  code: |
+    @assert throws SYNTAX_ERR ctx.createPattern(canvas, "null");
+
+- name: 2d.pattern.repeat.case
+  testing:
+  - 2d.pattern.exact
+  code: |
+    @assert throws SYNTAX_ERR ctx.createPattern(canvas, "Repeat");
+
+- name: 2d.pattern.repeat.nullsuffix
+  testing:
+  - 2d.pattern.exact
+  code: |
+    @assert throws SYNTAX_ERR ctx.createPattern(canvas, "repeat\0");
+
+- name: 2d.pattern.modify.image1
+  testing:
+  - 2d.pattern.modify
+  images:
+  - green.png
+  code: |
+    var img = document.getElementById('green.png');
+    var pattern = ctx.createPattern(img, 'no-repeat');
+    deferTest();
+    img.onload = t.step_func_done(function ()
+    {
+        ctx.fillStyle = pattern;
+        ctx.fillRect(0, 0, 100, 50);
+
+        @assert pixel 1,1 == 0,255,0,255;
+        @assert pixel 98,1 == 0,255,0,255;
+        @assert pixel 1,48 == 0,255,0,255;
+        @assert pixel 98,48 == 0,255,0,255;
+    });
+    img.src = '/images/red.png';
+  expected: green
+
+- name: 2d.pattern.modify.image2
+  testing:
+  - 2d.pattern.modify
+  images:
+  - green.png
+  code: |
+    var img = document.getElementById('green.png');
+    var pattern = ctx.createPattern(img, 'no-repeat');
+    ctx.fillStyle = pattern;
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#00f';
+    ctx.fillRect(0, 0, 100, 50);
+    deferTest();
+    img.onload = t.step_func_done(function ()
+    {
+        ctx.fillStyle = pattern;
+        ctx.fillRect(0, 0, 100, 50);
+
+        @assert pixel 1,1 == 0,255,0,255;
+        @assert pixel 98,1 == 0,255,0,255;
+        @assert pixel 1,48 == 0,255,0,255;
+        @assert pixel 98,48 == 0,255,0,255;
+    });
+    img.src = '/images/red.png';
+  expected: green
+
+- name: 2d.pattern.modify.canvas1
+  testing:
+  - 2d.pattern.modify
+  code: |
+    var canvas2 = document.createElement('canvas');
+    canvas2.width = 100;
+    canvas2.height = 50;
+    var ctx2 = canvas2.getContext('2d');
+    ctx2.fillStyle = '#0f0';
+    ctx2.fillRect(0, 0, 100, 50);
+
+    var pattern = ctx.createPattern(canvas2, 'no-repeat');
+
+    ctx2.fillStyle = '#f00';
+    ctx2.fillRect(0, 0, 100, 50);
+
+    ctx.fillStyle = pattern;
+    ctx.fillRect(0, 0, 100, 50);
+
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.pattern.modify.canvas2
+  testing:
+  - 2d.pattern.modify
+  code: |
+    var canvas2 = document.createElement('canvas');
+    canvas2.width = 100;
+    canvas2.height = 50;
+    var ctx2 = canvas2.getContext('2d');
+    ctx2.fillStyle = '#0f0';
+    ctx2.fillRect(0, 0, 100, 50);
+
+    var pattern = ctx.createPattern(canvas2, 'no-repeat');
+    ctx.fillStyle = pattern;
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx2.fillStyle = '#f00';
+    ctx2.fillRect(0, 0, 100, 50);
+
+    ctx.fillStyle = pattern;
+    ctx.fillRect(0, 0, 100, 50);
+
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.pattern.crosscanvas
+  images:
+  - green.png
+  code: |
+    var img = document.getElementById('green.png');
+
+    var pattern = document.createElement('canvas').getContext('2d').createPattern(img, 'no-repeat');
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = pattern;
+    ctx.fillRect(0, 0, 100, 50);
+
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.pattern.paint.norepeat.basic
+  testing:
+  - 2d.pattern.painting
+  images:
+  - green.png
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+
+    var img = document.getElementById('green.png');
+    var pattern = ctx.createPattern(img, 'no-repeat');
+    ctx.fillStyle = pattern;
+    ctx.fillRect(0, 0, 100, 50);
+
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.pattern.paint.norepeat.outside
+  testing:
+  - 2d.pattern.painting
+  images:
+  - red.png
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+
+    var img = document.getElementById('red.png');
+    var pattern = ctx.createPattern(img, 'no-repeat');
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.fillStyle = pattern;
+    ctx.fillRect(0, -50, 100, 50);
+    ctx.fillRect(-100, 0, 100, 50);
+    ctx.fillRect(0, 50, 100, 50);
+    ctx.fillRect(100, 0, 100, 50);
+
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.pattern.paint.norepeat.coord1
+  testing:
+  - 2d.pattern.painting
+  images:
+  - green.png
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 50, 50);
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(50, 0, 50, 50);
+
+    var img = document.getElementById('green.png');
+    var pattern = ctx.createPattern(img, 'no-repeat');
+    ctx.fillStyle = pattern;
+    ctx.translate(50, 0);
+    ctx.fillRect(-50, 0, 100, 50);
+
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.pattern.paint.norepeat.coord2
+  testing:
+  - 2d.pattern.painting
+  images:
+  - green.png
+  code: |
+    var img = document.getElementById('green.png');
+    var pattern = ctx.createPattern(img, 'no-repeat');
+    ctx.fillStyle = pattern;
+    ctx.fillRect(0, 0, 50, 50);
+
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(50, 0, 50, 50);
+
+    ctx.fillStyle = pattern;
+    ctx.translate(50, 0);
+    ctx.fillRect(-50, 0, 100, 50);
+
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.pattern.paint.norepeat.coord3
+  testing:
+  - 2d.pattern.painting
+  images:
+  - red.png
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    var img = document.getElementById('red.png');
+    var pattern = ctx.createPattern(img, 'no-repeat');
+    ctx.fillStyle = pattern;
+    ctx.translate(50, 25);
+    ctx.fillRect(-50, -25, 100, 50);
+
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 50, 25);
+
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.pattern.paint.repeat.basic
+  testing:
+  - 2d.pattern.painting
+  images:
+  - green-16x16.png
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+
+    var img = document.getElementById('green-16x16.png');
+    var pattern = ctx.createPattern(img, 'repeat');
+    ctx.fillStyle = pattern;
+    ctx.fillRect(0, 0, 100, 50);
+
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.pattern.paint.repeat.outside
+  testing:
+  - 2d.pattern.painting
+  images:
+  - green-16x16.png
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+
+    var img = document.getElementById('green-16x16.png');
+    var pattern = ctx.createPattern(img, 'repeat');
+    ctx.fillStyle = pattern;
+    ctx.translate(50, 25);
+    ctx.fillRect(-50, -25, 100, 50);
+
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.pattern.paint.repeat.coord1
+  testing:
+  - 2d.pattern.painting
+  images:
+  - rgrg-256x256.png
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+
+    var img = document.getElementById('rgrg-256x256.png');
+    var pattern = ctx.createPattern(img, 'repeat');
+    ctx.fillStyle = pattern;
+    ctx.translate(-128, -78);
+    ctx.fillRect(128, 78, 100, 50);
+
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.pattern.paint.repeat.coord2
+  testing:
+  - 2d.pattern.painting
+  images:
+  - ggrr-256x256.png
+  code: |
+    var img = document.getElementById('ggrr-256x256.png');
+    var pattern = ctx.createPattern(img, 'repeat');
+    ctx.fillStyle = pattern;
+    ctx.fillRect(0, 0, 100, 50);
+
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.pattern.paint.repeat.coord3
+  testing:
+  - 2d.pattern.painting
+  images:
+  - rgrg-256x256.png
+  code: |
+    var img = document.getElementById('rgrg-256x256.png');
+    var pattern = ctx.createPattern(img, 'repeat');
+    ctx.fillStyle = pattern;
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.translate(-128, -78);
+    ctx.fillRect(128, 78, 100, 50);
+
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.pattern.paint.repeatx.basic
+  testing:
+  - 2d.pattern.painting
+  images:
+  - green-16x16.png
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 16);
+
+    var img = document.getElementById('green-16x16.png');
+    var pattern = ctx.createPattern(img, 'repeat-x');
+    ctx.fillStyle = pattern;
+    ctx.fillRect(0, 0, 100, 50);
+
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.pattern.paint.repeatx.outside
+  testing:
+  - 2d.pattern.painting
+  images:
+  - red-16x16.png
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    var img = document.getElementById('red-16x16.png');
+    var pattern = ctx.createPattern(img, 'repeat-x');
+    ctx.fillStyle = pattern;
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 16);
+
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.pattern.paint.repeatx.coord1
+  testing:
+  - 2d.pattern.painting
+  images:
+  - red-16x16.png
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    var img = document.getElementById('red-16x16.png');
+    var pattern = ctx.createPattern(img, 'repeat-x');
+    ctx.fillStyle = pattern;
+    ctx.translate(0, 16);
+    ctx.fillRect(0, -16, 100, 50);
+
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 16);
+
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,25 == 0,255,0,255;
+    @assert pixel 98,25 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.pattern.paint.repeaty.basic
+  testing:
+  - 2d.pattern.painting
+  images:
+  - green-16x16.png
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 16, 50);
+
+    var img = document.getElementById('green-16x16.png');
+    var pattern = ctx.createPattern(img, 'repeat-y');
+    ctx.fillStyle = pattern;
+    ctx.fillRect(0, 0, 100, 50);
+
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.pattern.paint.repeaty.outside
+  testing:
+  - 2d.pattern.painting
+  images:
+  - red-16x16.png
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    var img = document.getElementById('red-16x16.png');
+    var pattern = ctx.createPattern(img, 'repeat-y');
+    ctx.fillStyle = pattern;
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 16, 50);
+
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.pattern.paint.repeaty.coord1
+  testing:
+  - 2d.pattern.painting
+  images:
+  - red-16x16.png
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    var img = document.getElementById('red-16x16.png');
+    var pattern = ctx.createPattern(img, 'repeat-y');
+    ctx.fillStyle = pattern;
+    ctx.translate(48, 0);
+    ctx.fillRect(-48, 0, 100, 50);
+
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 16, 50);
+
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 50,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 50,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.pattern.paint.orientation.image
+  desc: Image patterns do not get flipped when painted
+  testing:
+  - 2d.pattern.painting
+  images:
+  - rrgg-256x256.png
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+
+    var img = document.getElementById('rrgg-256x256.png');
+    var pattern = ctx.createPattern(img, 'no-repeat');
+    ctx.fillStyle = pattern;
+    ctx.save();
+    ctx.translate(0, -103);
+    ctx.fillRect(0, 103, 100, 50);
+    ctx.restore();
+
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 25);
+
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.pattern.paint.orientation.canvas
+  desc: Canvas patterns do not get flipped when painted
+  testing:
+  - 2d.pattern.painting
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+
+    var canvas2 = document.createElement('canvas');
+    canvas2.width = 100;
+    canvas2.height = 50;
+    var ctx2 = canvas2.getContext('2d');
+    ctx2.fillStyle = '#f00';
+    ctx2.fillRect(0, 0, 100, 25);
+    ctx2.fillStyle = '#0f0';
+    ctx2.fillRect(0, 25, 100, 25);
+
+    var pattern = ctx.createPattern(canvas2, 'no-repeat');
+    ctx.fillStyle = pattern;
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 25);
+
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+  expected: green
+
+
+- name: 2d.pattern.animated.gif
+  desc: createPattern() of an animated GIF draws the first frame
+  testing:
+  - 2d.pattern.animated.image
+  images:
+  - anim-gr.gif
+  code: |
+    deferTest();
+    step_timeout(function () {
+        var pattern = ctx.createPattern(document.getElementById('anim-gr.gif'), 'repeat');
+        ctx.fillStyle = pattern;
+        ctx.fillRect(0, 0, 50, 50);
+        step_timeout(t.step_func_done(function () {
+            ctx.fillRect(50, 0, 50, 50);
+            @assert pixel 25,25 ==~ 0,255,0,255;
+            @assert pixel 75,25 ==~ 0,255,0,255;
+        }), 250);
+    }, 250);
+  expected: green
+
+
+
+
diff --git a/tests/wpt/web-platform-tests/html/canvas/tools/yaml/element/line-styles.yaml b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/element/line-styles.yaml
new file mode 100644
index 00000000000..e6dc3205e72
--- /dev/null
+++ b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/element/line-styles.yaml
@@ -0,0 +1,1017 @@
+- name: 2d.line.defaults
+  testing:
+  - 2d.lineWidth.default
+  - 2d.lineCap.default
+  - 2d.lineJoin.default
+  - 2d.miterLimit.default
+  code: |
+    @assert ctx.lineWidth === 1;
+    @assert ctx.lineCap === 'butt';
+    @assert ctx.lineJoin === 'miter';
+    @assert ctx.miterLimit === 10;
+
+- name: 2d.line.width.basic
+  desc: lineWidth determines the width of line strokes
+  testing:
+  - 2d.lineWidth
+  code: |
+    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);
+
+    @assert pixel 14,25 == 0,255,0,255;
+    @assert pixel 15,25 == 0,255,0,255;
+    @assert pixel 16,25 == 0,255,0,255;
+    @assert pixel 25,25 == 0,255,0,255;
+    @assert pixel 34,25 == 0,255,0,255;
+    @assert pixel 35,25 == 0,255,0,255;
+    @assert pixel 36,25 == 0,255,0,255;
+
+    @assert pixel 64,25 == 0,255,0,255;
+    @assert pixel 65,25 == 0,255,0,255;
+    @assert pixel 66,25 == 0,255,0,255;
+    @assert pixel 75,25 == 0,255,0,255;
+    @assert pixel 84,25 == 0,255,0,255;
+    @assert pixel 85,25 == 0,255,0,255;
+    @assert pixel 86,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.line.width.transformed
+  desc: Line stroke widths are affected by scale transformations
+  testing:
+  - 2d.lineWidth
+  code: |
+    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);
+
+    @assert pixel 14,25 == 0,255,0,255;
+    @assert pixel 15,25 == 0,255,0,255;
+    @assert pixel 16,25 == 0,255,0,255;
+    @assert pixel 25,25 == 0,255,0,255;
+    @assert pixel 34,25 == 0,255,0,255;
+    @assert pixel 35,25 == 0,255,0,255;
+    @assert pixel 36,25 == 0,255,0,255;
+
+    @assert pixel 64,25 == 0,255,0,255;
+    @assert pixel 65,25 == 0,255,0,255;
+    @assert pixel 66,25 == 0,255,0,255;
+    @assert pixel 75,25 == 0,255,0,255;
+    @assert pixel 84,25 == 0,255,0,255;
+    @assert pixel 85,25 == 0,255,0,255;
+    @assert pixel 86,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.line.width.scaledefault
+  desc: Default lineWidth strokes are affected by scale transformations
+  testing:
+  - 2d.lineWidth
+  code: |
+    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();
+
+    @assert pixel 25,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 75,25 == 0,255,0,255;
+    @assert pixel 50,5 == 0,255,0,255;
+    @assert pixel 50,45 == 0,255,0,255;
+  expected: green
+
+- name: 2d.line.width.valid
+  desc: Setting lineWidth to valid values works
+  testing:
+  - 2d.lineWidth.set
+  - 2d.lineWidth.get
+  code: |
+    ctx.lineWidth = 1.5;
+    @assert ctx.lineWidth === 1.5;
+
+    ctx.lineWidth = "1e1";
+    @assert ctx.lineWidth === 10;
+
+    ctx.lineWidth = 1/1024;
+    @assert ctx.lineWidth === 1/1024;
+
+    ctx.lineWidth = 1000;
+    @assert ctx.lineWidth === 1000;
+
+- name: 2d.line.width.invalid
+  desc: Setting lineWidth to invalid values is ignored
+  testing:
+  - 2d.lineWidth.invalid
+  code: |
+    ctx.lineWidth = 1.5;
+    @assert ctx.lineWidth === 1.5;
+
+    ctx.lineWidth = 1.5;
+    ctx.lineWidth = 0;
+    @assert ctx.lineWidth === 1.5;
+
+    ctx.lineWidth = 1.5;
+    ctx.lineWidth = -1;
+    @assert ctx.lineWidth === 1.5;
+
+    ctx.lineWidth = 1.5;
+    ctx.lineWidth = Infinity;
+    @assert ctx.lineWidth === 1.5;
+
+    ctx.lineWidth = 1.5;
+    ctx.lineWidth = -Infinity;
+    @assert ctx.lineWidth === 1.5;
+
+    ctx.lineWidth = 1.5;
+    ctx.lineWidth = NaN;
+    @assert ctx.lineWidth === 1.5;
+
+    ctx.lineWidth = 1.5;
+    ctx.lineWidth = 'string';
+    @assert ctx.lineWidth === 1.5;
+
+    ctx.lineWidth = 1.5;
+    ctx.lineWidth = true;
+    @assert ctx.lineWidth === 1;
+
+    ctx.lineWidth = 1.5;
+    ctx.lineWidth = false;
+    @assert ctx.lineWidth === 1.5;
+
+- name: 2d.line.cap.butt
+  desc: lineCap 'butt' is rendered correctly
+  testing:
+  - 2d.lineCap.butt
+  code: |
+    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);
+
+    @assert pixel 25,14 == 0,255,0,255;
+    @assert pixel 25,15 == 0,255,0,255;
+    @assert pixel 25,16 == 0,255,0,255;
+    @assert pixel 25,34 == 0,255,0,255;
+    @assert pixel 25,35 == 0,255,0,255;
+    @assert pixel 25,36 == 0,255,0,255;
+
+    @assert pixel 75,14 == 0,255,0,255;
+    @assert pixel 75,15 == 0,255,0,255;
+    @assert pixel 75,16 == 0,255,0,255;
+    @assert pixel 75,34 == 0,255,0,255;
+    @assert pixel 75,35 == 0,255,0,255;
+    @assert pixel 75,36 == 0,255,0,255;
+  expected: green
+
+- name: 2d.line.cap.round
+  desc: lineCap 'round' is rendered correctly
+  testing:
+  - 2d.lineCap.round
+  code: |
+    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();
+
+    @assert pixel 17,6 == 0,255,0,255;
+    @assert pixel 25,6 == 0,255,0,255;
+    @assert pixel 32,6 == 0,255,0,255;
+    @assert pixel 17,43 == 0,255,0,255;
+    @assert pixel 25,43 == 0,255,0,255;
+    @assert pixel 32,43 == 0,255,0,255;
+
+    @assert pixel 67,6 == 0,255,0,255;
+    @assert pixel 75,6 == 0,255,0,255;
+    @assert pixel 82,6 == 0,255,0,255;
+    @assert pixel 67,43 == 0,255,0,255;
+    @assert pixel 75,43 == 0,255,0,255;
+    @assert pixel 82,43 == 0,255,0,255;
+  expected: green
+
+- name: 2d.line.cap.square
+  desc: lineCap 'square' is rendered correctly
+  testing:
+  - 2d.lineCap.square
+  code: |
+    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);
+
+    @assert pixel 25,4 == 0,255,0,255;
+    @assert pixel 25,5 == 0,255,0,255;
+    @assert pixel 25,6 == 0,255,0,255;
+    @assert pixel 25,44 == 0,255,0,255;
+    @assert pixel 25,45 == 0,255,0,255;
+    @assert pixel 25,46 == 0,255,0,255;
+
+    @assert pixel 75,4 == 0,255,0,255;
+    @assert pixel 75,5 == 0,255,0,255;
+    @assert pixel 75,6 == 0,255,0,255;
+    @assert pixel 75,44 == 0,255,0,255;
+    @assert pixel 75,45 == 0,255,0,255;
+    @assert pixel 75,46 == 0,255,0,255;
+  expected: green
+
+- name: 2d.line.cap.open
+  desc: Line caps are drawn at the corners of an unclosed rectangle
+  testing:
+  - 2d.lineCap.end
+  code: |
+    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();
+
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 48,1 == 0,255,0,255;
+    @assert pixel 48,48 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.line.cap.closed
+  desc: Line caps are not drawn at the corners of an unclosed rectangle
+  testing:
+  - 2d.lineCap.end
+  code: |
+    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();
+
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 48,1 == 0,255,0,255;
+    @assert pixel 48,48 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.line.cap.valid
+  desc: Setting lineCap to valid values works
+  testing:
+  - 2d.lineCap.set
+  - 2d.lineCap.get
+  code: |
+    ctx.lineCap = 'butt'
+    @assert ctx.lineCap === 'butt';
+
+    ctx.lineCap = 'round';
+    @assert ctx.lineCap === 'round';
+
+    ctx.lineCap = 'square';
+    @assert ctx.lineCap === 'square';
+
+- name: 2d.line.cap.invalid
+  desc: Setting lineCap to invalid values is ignored
+  testing:
+  - 2d.lineCap.invalid
+  code: |
+    ctx.lineCap = 'butt'
+    @assert ctx.lineCap === 'butt';
+
+    ctx.lineCap = 'butt';
+    ctx.lineCap = 'invalid';
+    @assert ctx.lineCap === 'butt';
+
+    ctx.lineCap = 'butt';
+    ctx.lineCap = 'ROUND';
+    @assert ctx.lineCap === 'butt';
+
+    ctx.lineCap = 'butt';
+    ctx.lineCap = 'round\0';
+    @assert ctx.lineCap === 'butt';
+
+    ctx.lineCap = 'butt';
+    ctx.lineCap = 'round ';
+    @assert ctx.lineCap === 'butt';
+
+    ctx.lineCap = 'butt';
+    ctx.lineCap = "";
+    @assert ctx.lineCap === 'butt';
+
+    ctx.lineCap = 'butt';
+    ctx.lineCap = 'bevel';
+    @assert ctx.lineCap === 'butt';
+
+- name: 2d.line.join.bevel
+  desc: lineJoin 'bevel' is rendered correctly
+  testing:
+  - 2d.lineJoin.common
+  - 2d.lineJoin.bevel
+  code: |
+    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();
+
+    @assert pixel 34,16 == 0,255,0,255;
+    @assert pixel 34,15 == 0,255,0,255;
+    @assert pixel 35,15 == 0,255,0,255;
+    @assert pixel 36,15 == 0,255,0,255;
+    @assert pixel 36,14 == 0,255,0,255;
+
+    @assert pixel 84,16 == 0,255,0,255;
+    @assert pixel 84,15 == 0,255,0,255;
+    @assert pixel 85,15 == 0,255,0,255;
+    @assert pixel 86,15 == 0,255,0,255;
+    @assert pixel 86,14 == 0,255,0,255;
+  expected: green
+
+- name: 2d.line.join.round
+  desc: lineJoin 'round' is rendered correctly
+  testing:
+  - 2d.lineJoin.round
+  code: |
+    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();
+
+    @assert pixel 36,14 == 0,255,0,255;
+    @assert pixel 36,13 == 0,255,0,255;
+    @assert pixel 37,13 == 0,255,0,255;
+    @assert pixel 38,13 == 0,255,0,255;
+    @assert pixel 38,12 == 0,255,0,255;
+
+    @assert pixel 86,14 == 0,255,0,255;
+    @assert pixel 86,13 == 0,255,0,255;
+    @assert pixel 87,13 == 0,255,0,255;
+    @assert pixel 88,13 == 0,255,0,255;
+    @assert pixel 88,12 == 0,255,0,255;
+  expected: green
+
+- name: 2d.line.join.miter
+  desc: lineJoin 'miter' is rendered correctly
+  testing:
+  - 2d.lineJoin.miter
+  code: |
+    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);
+
+    @assert pixel 38,12 == 0,255,0,255;
+    @assert pixel 39,11 == 0,255,0,255;
+    @assert pixel 40,10 == 0,255,0,255;
+    @assert pixel 41,9 == 0,255,0,255;
+    @assert pixel 42,8 == 0,255,0,255;
+
+    @assert pixel 88,12 == 0,255,0,255;
+    @assert pixel 89,11 == 0,255,0,255;
+    @assert pixel 90,10 == 0,255,0,255;
+    @assert pixel 91,9 == 0,255,0,255;
+    @assert pixel 92,8 == 0,255,0,255;
+  expected: green
+
+- name: 2d.line.join.open
+  desc: Line joins are not drawn at the corner of an unclosed rectangle
+  testing:
+  - 2d.lineJoin.joins
+  code: |
+    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();
+
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 48,1 == 0,255,0,255;
+    @assert pixel 48,48 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.line.join.closed
+  desc: Line joins are drawn at the corner of a closed rectangle
+  testing:
+  - 2d.lineJoin.joinclosed
+  code: |
+    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();
+
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 48,1 == 0,255,0,255;
+    @assert pixel 48,48 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.line.join.parallel
+  desc: Line joins are drawn at 180-degree joins
+  testing:
+  - 2d.lineJoin.joins
+  code: |
+    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();
+
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 48,1 == 0,255,0,255;
+    @assert pixel 48,48 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.line.join.valid
+  desc: Setting lineJoin to valid values works
+  testing:
+  - 2d.lineJoin.set
+  - 2d.lineJoin.get
+  code: |
+    ctx.lineJoin = 'bevel'
+    @assert ctx.lineJoin === 'bevel';
+
+    ctx.lineJoin = 'round';
+    @assert ctx.lineJoin === 'round';
+
+    ctx.lineJoin = 'miter';
+    @assert ctx.lineJoin === 'miter';
+
+- name: 2d.line.join.invalid
+  desc: Setting lineJoin to invalid values is ignored
+  testing:
+  - 2d.lineJoin.invalid
+  code: |
+    ctx.lineJoin = 'bevel'
+    @assert ctx.lineJoin === 'bevel';
+
+    ctx.lineJoin = 'bevel';
+    ctx.lineJoin = 'invalid';
+    @assert ctx.lineJoin === 'bevel';
+
+    ctx.lineJoin = 'bevel';
+    ctx.lineJoin = 'ROUND';
+    @assert ctx.lineJoin === 'bevel';
+
+    ctx.lineJoin = 'bevel';
+    ctx.lineJoin = 'round\0';
+    @assert ctx.lineJoin === 'bevel';
+
+    ctx.lineJoin = 'bevel';
+    ctx.lineJoin = 'round ';
+    @assert ctx.lineJoin === 'bevel';
+
+    ctx.lineJoin = 'bevel';
+    ctx.lineJoin = "";
+    @assert ctx.lineJoin === 'bevel';
+
+    ctx.lineJoin = 'bevel';
+    ctx.lineJoin = 'butt';
+    @assert ctx.lineJoin === 'bevel';
+
+- name: 2d.line.miter.exceeded
+  desc: Miter joins are not drawn when the miter limit is exceeded
+  testing:
+  - 2d.lineJoin.miterLimit
+  - 2d.lineJoin.miter
+  code: |
+    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();
+
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 48,1 == 0,255,0,255;
+    @assert pixel 48,48 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.line.miter.acute
+  desc: Miter joins are drawn correctly with acute angles
+  testing:
+  - 2d.lineJoin.miterLimit
+  - 2d.lineJoin.miter
+  code: |
+    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();
+
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 48,1 == 0,255,0,255;
+    @assert pixel 48,48 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.line.miter.obtuse
+  desc: Miter joins are drawn correctly with obtuse angles
+  testing:
+  - 2d.lineJoin.miterLimit
+  - 2d.lineJoin.miter
+  code: |
+    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();
+
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 48,1 == 0,255,0,255;
+    @assert pixel 48,48 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.line.miter.rightangle
+  desc: Miter joins are not drawn when the miter limit is exceeded, on exact right
+    angles
+  testing:
+  - 2d.lineJoin.miter
+  code: |
+    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();
+
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 48,1 == 0,255,0,255;
+    @assert pixel 48,48 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.line.miter.lineedge
+  desc: Miter joins are not drawn when the miter limit is exceeded at the corners
+    of a zero-height rectangle
+  testing:
+  - 2d.lineJoin.miter
+  code: |
+    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);
+
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 48,1 == 0,255,0,255;
+    @assert pixel 48,48 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.line.miter.within
+  desc: Miter joins are drawn when the miter limit is not quite exceeded
+  testing:
+  - 2d.lineJoin.miter
+  code: |
+    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();
+
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 48,1 == 0,255,0,255;
+    @assert pixel 48,48 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.line.miter.valid
+  desc: Setting miterLimit to valid values works
+  testing:
+  - 2d.miterLimit.set
+  - 2d.miterLimit.get
+  code: |
+    ctx.miterLimit = 1.5;
+    @assert ctx.miterLimit === 1.5;
+
+    ctx.miterLimit = "1e1";
+    @assert ctx.miterLimit === 10;
+
+    ctx.miterLimit = 1/1024;
+    @assert ctx.miterLimit === 1/1024;
+
+    ctx.miterLimit = 1000;
+    @assert ctx.miterLimit === 1000;
+
+- name: 2d.line.miter.invalid
+  desc: Setting miterLimit to invalid values is ignored
+  testing:
+  - 2d.miterLimit.invalid
+  code: |
+    ctx.miterLimit = 1.5;
+    @assert ctx.miterLimit === 1.5;
+
+    ctx.miterLimit = 1.5;
+    ctx.miterLimit = 0;
+    @assert ctx.miterLimit === 1.5;
+
+    ctx.miterLimit = 1.5;
+    ctx.miterLimit = -1;
+    @assert ctx.miterLimit === 1.5;
+
+    ctx.miterLimit = 1.5;
+    ctx.miterLimit = Infinity;
+    @assert ctx.miterLimit === 1.5;
+
+    ctx.miterLimit = 1.5;
+    ctx.miterLimit = -Infinity;
+    @assert ctx.miterLimit === 1.5;
+
+    ctx.miterLimit = 1.5;
+    ctx.miterLimit = NaN;
+    @assert ctx.miterLimit === 1.5;
+
+    ctx.miterLimit = 1.5;
+    ctx.miterLimit = 'string';
+    @assert ctx.miterLimit === 1.5;
+
+    ctx.miterLimit = 1.5;
+    ctx.miterLimit = true;
+    @assert ctx.miterLimit === 1;
+
+    ctx.miterLimit = 1.5;
+    ctx.miterLimit = false;
+    @assert ctx.miterLimit === 1.5;
+
+- name: 2d.line.cross
+  code: |
+    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();
+
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 48,1 == 0,255,0,255;
+    @assert pixel 48,48 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.line.union
+  code: |
+    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();
+
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 25,1 == 0,255,0,255;
+    @assert pixel 48,1 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 25,1 == 0,255,0,255;
+    @assert pixel 48,48 == 0,255,0,255;
+  expected: green
+
+
+
+
+
+
+
+- name: 2d.line.invalid.strokestyle
+  desc: Verify correct behavior of canvas on an invalid strokeStyle()
+  testing:
+  - 2d.strokestyle.invalid
+  code: |
+    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;
+    @assert imgdata[5] == 255;
+    @assert imgdata[6] == 0;
+
diff --git a/tests/wpt/web-platform-tests/html/canvas/tools/yaml/element/meta.yaml b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/element/meta.yaml
new file mode 100644
index 00000000000..0e255aca0de
--- /dev/null
+++ b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/element/meta.yaml
@@ -0,0 +1,556 @@
+- meta: |
+    cases = [
+        ("zero", "0", 0),
+        ("empty", "", None),
+        ("onlyspace", "  ", None),
+        ("space", "  100", 100),
+        ("whitespace", "\r\n\t\f100", 100),
+        ("plus", "+100", 100),
+        ("minus", "-100", None),
+        ("octal", "0100", 100),
+        ("hex", "0x100", 0),
+        ("exp", "100e1", 100),
+        ("decimal", "100.999", 100),
+        ("percent", "100%", 100),
+        ("em", "100em", 100),
+        ("junk", "#!?", None),
+        ("trailingjunk", "100#!?", 100),
+    ]
+    def gen(name, string, exp, code):
+        testing = ["size.nonnegativeinteger"]
+        if exp is None:
+            testing.append("size.error")
+            code += "@assert canvas.width === 300;\n@assert canvas.height === 150;\n"
+            expected = "size 300 150"
+        else:
+            code += "@assert canvas.width === %s;\n@assert canvas.height === %s;\n" % (exp, exp)
+            expected = "size %s %s" % (exp, exp)
+
+            # With "100%", Opera gets canvas.width = 100 but renders at 100% of the frame width,
+            # so check the CSS display width
+            code += '@assert window.getComputedStyle(canvas, null).getPropertyValue("width") === "%spx";\n' % (exp, )
+
+        code += "@assert canvas.getAttribute('width') === %r;\n" % string
+        code += "@assert canvas.getAttribute('height') === %r;\n" % string
+
+        if exp == 0:
+            expected = None # can't generate zero-sized PNGs for the expected image
+
+        return code, testing, expected
+
+    for name, string, exp in cases:
+        code = ""
+        code, testing, expected = gen(name, string, exp, code)
+        # We need to replace \r with &#xD; because \r\n gets converted to \n in the HTML parser.
+        htmlString = string.replace('\r', '&#xD;')
+        tests.append( {
+            "name": "size.attributes.parse.%s" % name,
+            "desc": "Parsing of non-negative integers",
+            "testing": testing,
+            "canvas": 'width="%s" height="%s"' % (htmlString, htmlString),
+            "code": code,
+            "expected": expected
+        } )
+
+    for name, string, exp in cases:
+        code = "canvas.setAttribute('width', %r);\ncanvas.setAttribute('height', %r);\n" % (string, string)
+        code, testing, expected = gen(name, string, exp, code)
+        tests.append( {
+            "name": "size.attributes.setAttribute.%s" % name,
+            "desc": "Parsing of non-negative integers in setAttribute",
+            "testing": testing,
+            "canvas": 'width="50" height="50"',
+            "code": code,
+            "expected": expected
+        } )
+
+- meta: |
+    state = [ # some non-default values to test with
+        ('strokeStyle', '"#ff0000"'),
+        ('fillStyle', '"#ff0000"'),
+        ('globalAlpha', 0.5),
+        ('lineWidth', 0.5),
+        ('lineCap', '"round"'),
+        ('lineJoin', '"round"'),
+        ('miterLimit', 0.5),
+        ('shadowOffsetX', 5),
+        ('shadowOffsetY', 5),
+        ('shadowBlur', 5),
+        ('shadowColor', '"#ff0000"'),
+        ('globalCompositeOperation', '"copy"'),
+        ('font', '"25px serif"'),
+        ('textAlign', '"center"'),
+        ('textBaseline', '"bottom"'),
+    ]
+    for key,value in state:
+        tests.append( {
+            'name': '2d.state.saverestore.%s' % key,
+            'desc': 'save()/restore() works for %s' % key,
+            'testing': [ '2d.state.%s' % key ],
+            'code':
+    """// Test that restore() undoes any modifications
+    var old = ctx.%(key)s;
+    ctx.save();
+    ctx.%(key)s = %(value)s;
+    ctx.restore();
+    @assert ctx.%(key)s === old;
+
+    // Also test that save() doesn't modify the values
+    ctx.%(key)s = %(value)s;
+    old = ctx.%(key)s;
+        // we're not interested in failures caused by get(set(x)) != x (e.g.
+        // from rounding), so compare against 'old' instead of against %(value)s
+    ctx.save();
+    @assert ctx.%(key)s === old;
+    ctx.restore();
+    """ % { 'key':key, 'value':value }
+        } )
+
+    tests.append( {
+        'name': 'initial.reset.2dstate',
+        'desc': 'Resetting the canvas state resets 2D state variables',
+        'testing': [ 'initial.reset' ],
+        'code':
+    """canvas.width = 100;
+    var default_val;
+    """ + "".join(
+    """
+    default_val = ctx.%(key)s;
+    ctx.%(key)s = %(value)s;
+    canvas.width = 100;
+    @assert ctx.%(key)s === default_val;
+    """ % { 'key':key, 'value':value }
+        for key,value in state),
+    } )
+
+- meta: |
+    # Composite operation tests
+    # <http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2007-March/010608.html>
+    ops = [
+        # name               FA      FB
+        ('source-over',      '1',    '1-aA'),
+        ('destination-over', '1-aB', '1'),
+        ('source-in',        'aB',   '0'),
+        ('destination-in',   '0',    'aA'),
+        ('source-out',       '1-aB', '0'),
+        ('destination-out',  '0',    '1-aA'),
+        ('source-atop',      'aB',   '1-aA'),
+        ('destination-atop', '1-aB', 'aA'),
+        ('xor',              '1-aB', '1-aA'),
+        ('copy',             '1',    '0'),
+        ('lighter',          '1',    '1'),
+    ]
+
+    # The ones that change the output when src = (0,0,0,0):
+    ops_trans = [ 'source-in', 'destination-in', 'source-out', 'destination-atop', 'copy' ];
+
+    def calc_output(A, B, FA_code, FB_code):
+        (RA, GA, BA, aA) = A
+        (RB, GB, BB, aB) = B
+        rA, gA, bA = RA*aA, GA*aA, BA*aA
+        rB, gB, bB = RB*aB, GB*aB, BB*aB
+
+        FA = eval(FA_code)
+        FB = eval(FB_code)
+
+        rO = rA*FA + rB*FB
+        gO = gA*FA + gB*FB
+        bO = bA*FA + bB*FB
+        aO = aA*FA + aB*FB
+
+        rO = min(255, rO)
+        gO = min(255, gO)
+        bO = min(255, bO)
+        aO = min(1, aO)
+
+        if aO:
+            RO = rO / aO
+            GO = gO / aO
+            BO = bO / aO
+        else: RO = GO = BO = 0
+
+        return (RO, GO, BO, aO)
+
+    def to_test(color):
+        r, g, b, a = color
+        return '%d,%d,%d,%d' % (round(r), round(g), round(b), round(a*255))
+    def to_cairo(color):
+        r, g, b, a = color
+        return '%f,%f,%f,%f' % (r/255., g/255., b/255., a)
+
+    for (name, src, dest) in [
+        ('solid', (255, 255, 0, 1.0), (0, 255, 255, 1.0)),
+        ('transparent', (0, 0, 255, 0.75), (0, 255, 0, 0.5)),
+            # catches the atop, xor and lighter bugs in Opera 9.10
+    ]:
+        for op, FA_code, FB_code in ops:
+            expected = calc_output(src, dest, FA_code, FB_code)
+            tests.append( {
+                'name': '2d.composite.%s.%s' % (name, op),
+                'testing': [ '2d.composite.%s' % op ],
+                'code': """
+    ctx.fillStyle = 'rgba%s';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.globalCompositeOperation = '%s';
+    ctx.fillStyle = 'rgba%s';
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 50,25 ==~ %s +/- 5;
+    """ % (dest, op, src, to_test(expected)),
+                'expected': """size 100 50
+    cr.set_source_rgba(%s)
+    cr.rectangle(0, 0, 100, 50)
+    cr.fill()
+    """ % to_cairo(expected),
+            } )
+
+    for (name, src, dest) in [ ('image', (255, 255, 0, 0.75), (0, 255, 255, 0.5)) ]:
+        for op, FA_code, FB_code in ops:
+            expected = calc_output(src, dest, FA_code, FB_code)
+            tests.append( {
+                'name': '2d.composite.%s.%s' % (name, op),
+                'testing': [ '2d.composite.%s' % op ],
+                'images': [ 'yellow75.png' ],
+                'code': """
+    ctx.fillStyle = 'rgba%s';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.globalCompositeOperation = '%s';
+    ctx.drawImage(document.getElementById('yellow75.png'), 0, 0);
+    @assert pixel 50,25 ==~ %s +/- 5;
+    """ % (dest, op, to_test(expected)),
+                'expected': """size 100 50
+    cr.set_source_rgba(%s)
+    cr.rectangle(0, 0, 100, 50)
+    cr.fill()
+    """ % to_cairo(expected),
+            } )
+
+    for (name, src, dest) in [ ('canvas', (255, 255, 0, 0.75), (0, 255, 255, 0.5)) ]:
+        for op, FA_code, FB_code in ops:
+            expected = calc_output(src, dest, FA_code, FB_code)
+            tests.append( {
+                'name': '2d.composite.%s.%s' % (name, op),
+                'testing': [ '2d.composite.%s' % op ],
+                'images': [ 'yellow75.png' ],
+                'code': """
+    var canvas2 = document.createElement('canvas');
+    canvas2.width = canvas.width;
+    canvas2.height = canvas.height;
+    var ctx2 = canvas2.getContext('2d');
+    ctx2.drawImage(document.getElementById('yellow75.png'), 0, 0);
+    ctx.fillStyle = 'rgba%s';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.globalCompositeOperation = '%s';
+    ctx.drawImage(canvas2, 0, 0);
+    @assert pixel 50,25 ==~ %s +/- 5;
+    """ % (dest, op, to_test(expected)),
+                'expected': """size 100 50
+    cr.set_source_rgba(%s)
+    cr.rectangle(0, 0, 100, 50)
+    cr.fill()
+    """ % to_cairo(expected),
+            } )
+
+
+    for (name, src, dest) in [ ('uncovered.fill', (0, 0, 255, 0.75), (0, 255, 0, 0.5)) ]:
+        for op, FA_code, FB_code in ops:
+            if op not in ops_trans: continue
+            expected0 = calc_output((0,0,0,0.0), dest, FA_code, FB_code)
+            tests.append( {
+                'name': '2d.composite.%s.%s' % (name, op),
+                'desc': 'fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.',
+                'testing': [ '2d.composite.%s' % op ],
+                'code': """
+    ctx.fillStyle = 'rgba%s';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.globalCompositeOperation = '%s';
+    ctx.fillStyle = 'rgba%s';
+    ctx.translate(0, 25);
+    ctx.fillRect(0, 50, 100, 50);
+    @assert pixel 50,25 ==~ %s +/- 5;
+    """ % (dest, op, src, to_test(expected0)),
+                'expected': """size 100 50
+    cr.set_source_rgba(%s)
+    cr.rectangle(0, 0, 100, 50)
+    cr.fill()
+    """ % (to_cairo(expected0)),
+            } )
+
+    for (name, src, dest) in [ ('uncovered.image', (255, 255, 0, 1.0), (0, 255, 255, 0.5)) ]:
+        for op, FA_code, FB_code in ops:
+            if op not in ops_trans: continue
+            expected0 = calc_output((0,0,0,0.0), dest, FA_code, FB_code)
+            tests.append( {
+                'name': '2d.composite.%s.%s' % (name, op),
+                'desc': 'drawImage() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.',
+                'testing': [ '2d.composite.%s' % op ],
+                'images': [ 'yellow.png' ],
+                'code': """
+    ctx.fillStyle = 'rgba%s';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.globalCompositeOperation = '%s';
+    ctx.drawImage(document.getElementById('yellow.png'), 40, 40, 10, 10, 40, 50, 10, 10);
+    @assert pixel 15,15 ==~ %s +/- 5;
+    @assert pixel 50,25 ==~ %s +/- 5;
+    """ % (dest, op, to_test(expected0), to_test(expected0)),
+                'expected': """size 100 50
+    cr.set_source_rgba(%s)
+    cr.rectangle(0, 0, 100, 50)
+    cr.fill()
+    """ % (to_cairo(expected0)),
+            } )
+
+    for (name, src, dest) in [ ('uncovered.nocontext', (255, 255, 0, 1.0), (0, 255, 255, 0.5)) ]:
+        for op, FA_code, FB_code in ops:
+            if op not in ops_trans: continue
+            expected0 = calc_output((0,0,0,0.0), dest, FA_code, FB_code)
+            tests.append( {
+                'name': '2d.composite.%s.%s' % (name, op),
+                'desc': 'drawImage() of a canvas with no context draws pixels as (0,0,0,0), and does not leave the pixels unchanged.',
+                'testing': [ '2d.composite.%s' % op ],
+                'code': """
+    ctx.fillStyle = 'rgba%s';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.globalCompositeOperation = '%s';
+    var canvas2 = document.createElement('canvas');
+    ctx.drawImage(canvas2, 0, 0);
+    @assert pixel 50,25 ==~ %s +/- 5;
+    """ % (dest, op, to_test(expected0)),
+                'expected': """size 100 50
+    cr.set_source_rgba(%s)
+    cr.rectangle(0, 0, 100, 50)
+    cr.fill()
+    """ % (to_cairo(expected0)),
+            } )
+
+    for (name, src, dest) in [ ('uncovered.pattern', (255, 255, 0, 1.0), (0, 255, 255, 0.5)) ]:
+        for op, FA_code, FB_code in ops:
+            if op not in ops_trans: continue
+            expected0 = calc_output((0,0,0,0.0), dest, FA_code, FB_code)
+            tests.append( {
+                'name': '2d.composite.%s.%s' % (name, op),
+                'desc': 'Pattern fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.',
+                'testing': [ '2d.composite.%s' % op ],
+                'images': [ 'yellow.png' ],
+                'code': """
+    ctx.fillStyle = 'rgba%s';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.globalCompositeOperation = '%s';
+    ctx.fillStyle = ctx.createPattern(document.getElementById('yellow.png'), 'no-repeat');
+    ctx.fillRect(0, 50, 100, 50);
+    @assert pixel 50,25 ==~ %s +/- 5;
+    """ % (dest, op, to_test(expected0)),
+                'expected': """size 100 50
+    cr.set_source_rgba(%s)
+    cr.rectangle(0, 0, 100, 50)
+    cr.fill()
+    """ % (to_cairo(expected0)),
+            } )
+
+    for op, FA_code, FB_code in ops:
+        tests.append( {
+            'name': '2d.composite.clip.%s' % (op),
+            'desc': 'fill() does not affect pixels outside the clip region.',
+            'testing': [ '2d.composite.%s' % op ],
+            'code': """
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.globalCompositeOperation = '%s';
+    ctx.rect(-20, -20, 10, 10);
+    ctx.clip();
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 50, 50);
+    @assert pixel 25,25 == 0,255,0,255;
+    @assert pixel 75,25 == 0,255,0,255;
+    """ % (op),
+                'expected': 'green'
+        } )
+
+- meta: |
+    # Colour parsing tests
+
+    # Try most of the CSS3 Color <color> values - http://www.w3.org/TR/css3-color/#colorunits
+    big_float = '1' + ('0' * 39)
+    big_double = '1' + ('0' * 310)
+    for name, string, r,g,b,a, notes in [
+        ('html4', 'limE', 0,255,0,255, ""),
+        ('hex3', '#0f0', 0,255,0,255, ""),
+        ('hex4', '#0f0f', 0,255,0,255, ""),
+        ('hex6', '#00fF00', 0,255,0,255, ""),
+        ('hex8', '#00ff00ff', 0,255,0,255, ""),
+        ('rgb-num', 'rgb(0,255,0)', 0,255,0,255, ""),
+        ('rgb-clamp-1', 'rgb(-1000, 1000, -1000)', 0,255,0,255, 'Assumes colours are clamped to [0,255].'),
+        ('rgb-clamp-2', 'rgb(-200%, 200%, -200%)', 0,255,0,255, 'Assumes colours are clamped to [0,255].'),
+        ('rgb-clamp-3', 'rgb(-2147483649, 4294967298, -18446744073709551619)', 0,255,0,255, 'Assumes colours are clamped to [0,255].'),
+        ('rgb-clamp-4', 'rgb(-'+big_float+', '+big_float+', -'+big_float+')', 0,255,0,255, 'Assumes colours are clamped to [0,255].'),
+        ('rgb-clamp-5', 'rgb(-'+big_double+', '+big_double+', -'+big_double+')', 0,255,0,255, 'Assumes colours are clamped to [0,255].'),
+        ('rgb-percent', 'rgb(0% ,100% ,0%)', 0,255,0,255, 'CSS3 Color says "The integer value 255 corresponds to 100%". (In particular, it is not 254...)'),
+        ('rgb-eof', 'rgb(0, 255, 0', 0,255,0,255, ""), # see CSS2.1 4.2 "Unexpected end of style sheet"
+        ('rgba-solid-1', 'rgba(  0  ,  255  ,  0  ,  1  )', 0,255,0,255, ""),
+        ('rgba-solid-2', 'rgba(  0  ,  255  ,  0  ,  1.0  )', 0,255,0,255, ""),
+        ('rgba-solid-3', 'rgba(  0  ,  255  ,  0  , +1  )', 0,255,0,255, ""),
+        ('rgba-solid-4', 'rgba( -0  ,  255  , +0  ,  1  )', 0,255,0,255, ""),
+        ('rgba-num-1', 'rgba(  0  ,  255  ,  0  ,  .499  )', 0,255,0,127, ""),
+        ('rgba-num-2', 'rgba(  0  ,  255  ,  0  ,  0.499  )', 0,255,0,127, ""),
+        ('rgba-percent', 'rgba(0%,100%,0%,0.499)', 0,255,0,127, ""), # 0.499*255 rounds to 127, both down and nearest, so it should be safe
+        ('rgba-clamp-1', 'rgba(0, 255, 0, -2)', 0,0,0,0, ""),
+        ('rgba-clamp-2', 'rgba(0, 255, 0, 2)', 0,255,0,255, ""),
+        ('rgba-eof', 'rgba(0, 255, 0, 1', 0,255,0,255, ""),
+        ('transparent-1', 'transparent', 0,0,0,0, ""),
+        ('transparent-2', 'TrAnSpArEnT', 0,0,0,0, ""),
+        ('hsl-1', 'hsl(120, 100%, 50%)', 0,255,0,255, ""),
+        ('hsl-2', 'hsl( -240 , 100% , 50% )', 0,255,0,255, ""),
+        ('hsl-3', 'hsl(360120, 100%, 50%)', 0,255,0,255, ""),
+        ('hsl-4', 'hsl(-360240, 100%, 50%)', 0,255,0,255, ""),
+        ('hsl-5', 'hsl(120.0, 100.0%, 50.0%)', 0,255,0,255, ""),
+        ('hsl-6', 'hsl(+120, +100%, +50%)', 0,255,0,255, ""),
+        ('hsl-clamp-1', 'hsl(120, 200%, 50%)', 0,255,0,255, ""),
+        ('hsl-clamp-2', 'hsl(120, -200%, 49.9%)', 127,127,127,255, ""),
+        ('hsl-clamp-3', 'hsl(120, 100%, 200%)', 255,255,255,255, ""),
+        ('hsl-clamp-4', 'hsl(120, 100%, -200%)', 0,0,0,255, ""),
+        ('hsla-1', 'hsla(120, 100%, 50%, 0.499)', 0,255,0,127, ""),
+        ('hsla-2', 'hsla( 120.0 , 100.0% , 50.0% , 1 )', 0,255,0,255, ""),
+        ('hsla-clamp-1', 'hsla(120, 200%, 50%, 1)', 0,255,0,255, ""),
+        ('hsla-clamp-2', 'hsla(120, -200%, 49.9%, 1)', 127,127,127,255, ""),
+        ('hsla-clamp-3', 'hsla(120, 100%, 200%, 1)', 255,255,255,255, ""),
+        ('hsla-clamp-4', 'hsla(120, 100%, -200%, 1)', 0,0,0,255, ""),
+        ('hsla-clamp-5', 'hsla(120, 100%, 50%, 2)', 0,255,0,255, ""),
+        ('hsla-clamp-6', 'hsla(120, 100%, 0%, -2)', 0,0,0,0, ""),
+        ('svg-1', 'gray', 128,128,128,255, ""),
+        ('svg-2', 'grey', 128,128,128,255, ""),
+        # css-color-4 rgb() color function
+        #   https://drafts.csswg.org/css-color/#numeric-rgb
+        ('css-color-4-rgb-1', 'rgb(0, 255.0, 0)', 0,255,0,255, ""),
+        ('css-color-4-rgb-2', 'rgb(0, 255, 0, 0.2)', 0,255,0,51, ""),
+        ('css-color-4-rgb-3', 'rgb(0, 255, 0, 20%)', 0,255,0,51, ""),
+        ('css-color-4-rgb-4', 'rgb(0 255 0)', 0,255,0,255, ""),
+        ('css-color-4-rgb-5', 'rgb(0 255 0 / 0.2)', 0,255,0,51, ""),
+        ('css-color-4-rgb-6', 'rgb(0 255 0 / 20%)', 0,255,0,51, ""),
+        ('css-color-4-rgba-1', 'rgba(0, 255.0, 0)', 0,255,0,255, ""),
+        ('css-color-4-rgba-2', 'rgba(0, 255, 0, 0.2)', 0,255,0,51, ""),
+        ('css-color-4-rgba-3', 'rgba(0, 255, 0, 20%)', 0,255,0,51, ""),
+        ('css-color-4-rgba-4', 'rgba(0 255 0)', 0,255,0,255, ""),
+        ('css-color-4-rgba-5', 'rgba(0 255 0 / 0.2)', 0,255,0,51, ""),
+        ('css-color-4-rgba-6', 'rgba(0 255 0 / 20%)', 0,255,0,51, ""),
+        # css-color-4 hsl() color function
+        #   https://drafts.csswg.org/css-color/#the-hsl-notation
+        ('css-color-4-hsl-1', 'hsl(120 100.0% 50.0%)', 0,255,0,255, ""),
+        ('css-color-4-hsl-2', 'hsl(120 100.0% 50.0% / 0.2)', 0,255,0,51, ""),
+        ('css-color-4-hsl-3', 'hsl(120.0, 100.0%, 50.0%, 0.2)', 0,255,0,51, ""),
+        ('css-color-4-hsl-4', 'hsl(120.0, 100.0%, 50.0%, 20%)', 0,255,0,51, ""),
+        ('css-color-4-hsl-5', 'hsl(120deg, 100.0%, 50.0%, 0.2)', 0,255,0,51, ""),
+        ('css-color-4-hsl-6', 'hsl(120deg, 100.0%, 50.0%)', 0,255,0,255, ""),
+        ('css-color-4-hsl-7', 'hsl(133.33333333grad, 100.0%, 50.0%)', 0,255,0,255, ""),
+        ('css-color-4-hsl-8', 'hsl(2.0943951024rad, 100.0%, 50.0%)', 0,255,0,255, ""),
+        ('css-color-4-hsl-9', 'hsl(0.3333333333turn, 100.0%, 50.0%)', 0,255,0,255, ""),
+        ('css-color-4-hsla-1', 'hsl(120 100.0% 50.0%)', 0,255,0,255, ""),
+        ('css-color-4-hsla-2', 'hsl(120 100.0% 50.0% / 0.2)', 0,255,0,51, ""),
+        ('css-color-4-hsla-3', 'hsl(120.0, 100.0%, 50.0%, 0.2)', 0,255,0,51, ""),
+        ('css-color-4-hsla-4', 'hsl(120.0, 100.0%, 50.0%, 20%)', 0,255,0,51, ""),
+        ('css-color-4-hsla-5', 'hsl(120deg, 100.0%, 50.0%, 0.2)', 0,255,0,51, ""),
+        ('css-color-4-hsla-6', 'hsl(120deg, 100.0%, 50.0%)', 0,255,0,255, ""),
+        ('css-color-4-hsla-7', 'hsl(133.33333333grad, 100.0%, 50.0%)', 0,255,0,255, ""),
+        ('css-color-4-hsla-8', 'hsl(2.0943951024rad, 100.0%, 50.0%)', 0,255,0,255, ""),
+        ('css-color-4-hsla-9', 'hsl(0.3333333333turn, 100.0%, 50.0%)', 0,255,0,255, ""),
+        # currentColor is handled later
+    ]:
+        # TODO: test by retrieving fillStyle, instead of actually drawing?
+        # TODO: test strokeStyle, shadowColor in the same way
+        test = {
+            'name': '2d.fillStyle.parse.%s' % name,
+            'testing': [ '2d.colours.parse' ],
+            'notes': notes,
+            'code': """
+    ctx.fillStyle = '#f00';
+    ctx.fillStyle = '%s';
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 50,25 == %d,%d,%d,%d;
+    """ % (string, r,g,b,a),
+            'expected': """size 100 50
+    cr.set_source_rgba(%f, %f, %f, %f)
+    cr.rectangle(0, 0, 100, 50)
+    cr.fill()
+    """ % (r/255., g/255., b/255., a/255.),
+        }
+        tests.append(test)
+
+    # Also test that invalid colours are ignored
+    for name, string in [
+        ('hex1', '#f'),
+        ('hex2', '#f0'),
+        ('hex3', '#g00'),
+        ('hex4', '#fg00'),
+        ('hex5', '#ff000'),
+        ('hex6', '#fg0000'),
+        ('hex7', '#ff0000f'),
+        ('hex8', '#fg0000ff'),
+        ('rgb-1', 'rgb(255.0, 0, 0,)'),
+        ('rgb-2', 'rgb(100%, 0, 0)'),
+        ('rgb-3', 'rgb(255, - 1, 0)'),
+        ('rgba-1', 'rgba(100%, 0, 0, 1)'),
+        ('rgba-2', 'rgba(255, 0, 0, 1. 0)'),
+        ('rgba-3', 'rgba(255, 0, 0, 1.)'),
+        ('rgba-4', 'rgba(255, 0, 0, '),
+        ('rgba-5', 'rgba(255, 0, 0, 1,)'),
+        ('hsl-1', 'hsl(0%, 100%, 50%)'),
+        ('hsl-2', 'hsl(z, 100%, 50%)'),
+        ('hsl-3', 'hsl(0, 0, 50%)'),
+        ('hsl-4', 'hsl(0, 100%, 0)'),
+        ('hsl-5', 'hsl(0, 100.%, 50%)'),
+        ('hsl-6', 'hsl(0, 100%, 50%,)'),
+        ('hsla-1', 'hsla(0%, 100%, 50%, 1)'),
+        ('hsla-2', 'hsla(0, 0, 50%, 1)'),
+        ('hsla-3', 'hsla(0, 0, 50%, 1,)'),
+        ('name-1', 'darkbrown'),
+        ('name-2', 'firebrick1'),
+        ('name-3', 'red blue'),
+        ('name-4', '"red"'),
+        ('name-5', '"red'),
+        # css-color-4 color function
+        #   comma and comma-less expressions should not mix together.
+        ('css-color-4-rgb-1', 'rgb(255, 0, 0 / 1)'),
+        ('css-color-4-rgb-2', 'rgb(255 0 0, 1)'),
+        ('css-color-4-rgb-3', 'rgb(255, 0 0)'),
+        ('css-color-4-rgba-1', 'rgba(255, 0, 0 / 1)'),
+        ('css-color-4-rgba-2', 'rgba(255 0 0, 1)'),
+        ('css-color-4-rgba-3', 'rgba(255, 0 0)'),
+        ('css-color-4-hsl-1', 'hsl(0, 100%, 50% / 1)'),
+        ('css-color-4-hsl-2', 'hsl(0 100% 50%, 1)'),
+        ('css-color-4-hsl-3', 'hsl(0, 100% 50%)'),
+        ('css-color-4-hsla-1', 'hsla(0, 100%, 50% / 1)'),
+        ('css-color-4-hsla-2', 'hsla(0 100% 50%, 1)'),
+        ('css-color-4-hsla-3', 'hsla(0, 100% 50%)'),
+        #  trailing slash
+        ('css-color-4-rgb-4', 'rgb(0 0 0 /)'),
+        ('css-color-4-rgb-5', 'rgb(0, 0, 0 /)'),
+        ('css-color-4-hsl-4', 'hsl(0 100% 50% /)'),
+        ('css-color-4-hsl-5', 'hsl(0, 100%, 50% /)'),
+    ]:
+        test = {
+            'name': '2d.fillStyle.parse.invalid.%s' % name,
+            'testing': [ '2d.colours.parse' ],
+            'code': """
+    ctx.fillStyle = '#0f0';
+    try { ctx.fillStyle = '%s'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 50,25 == 0,255,0,255;
+    """ % string,
+            'expected': 'green'
+        }
+        tests.append(test)
+
+    # Some can't have positive tests, only negative tests, because we don't know what colour they're meant to be
+    for name, string in [
+        ('system', 'ThreeDDarkShadow'),
+        #('flavor', 'flavor'), # removed from latest CSS3 Color drafts
+    ]:
+        test = {
+            'name': '2d.fillStyle.parse.%s' % name,
+            'testing': [ '2d.colours.parse' ],
+            'code': """
+    ctx.fillStyle = '#f00';
+    ctx.fillStyle = '%s';
+    @assert ctx.fillStyle =~ /^#(?!(FF0000|ff0000|f00)$)/; // test that it's not red
+    """ % (string,),
+        }
+        tests.append(test)
+
diff --git a/tests/wpt/web-platform-tests/html/canvas/tools/yaml/element/path-objects.yaml b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/element/path-objects.yaml
new file mode 100644
index 00000000000..63cf52a4b2a
--- /dev/null
+++ b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/element/path-objects.yaml
@@ -0,0 +1,2647 @@
+- name: 2d.path.initial
+  testing:
+  - 2d.path.initial
+  #mozilla: { bug: TODO }
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.closePath();
+    ctx.fillStyle = '#f00';
+    ctx.fill();
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.beginPath
+  testing:
+  - 2d.path.beginPath
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.rect(0, 0, 100, 50);
+    ctx.beginPath();
+    ctx.fillStyle = '#f00';
+    ctx.fill();
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.moveTo.basic
+  testing:
+  - 2d.path.moveTo
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.rect(0, 0, 10, 50);
+    ctx.moveTo(100, 0);
+    ctx.lineTo(10, 0);
+    ctx.lineTo(10, 50);
+    ctx.lineTo(100, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.fill();
+    @assert pixel 90,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.moveTo.newsubpath
+  testing:
+  - 2d.path.moveTo
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.beginPath();
+    ctx.moveTo(0, 0);
+    ctx.moveTo(100, 0);
+    ctx.moveTo(100, 50);
+    ctx.moveTo(0, 50);
+    ctx.fillStyle = '#f00';
+    ctx.fill();
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.moveTo.multiple
+  testing:
+  - 2d.path.moveTo
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.moveTo(0, 25);
+    ctx.moveTo(100, 25);
+    ctx.moveTo(0, 25);
+    ctx.lineTo(100, 25);
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 50;
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.moveTo.nonfinite
+  desc: moveTo() with Infinity/NaN is ignored
+  testing:
+  - 2d.nonfinite
+  code: |
+    ctx.moveTo(0, 0);
+    ctx.lineTo(100, 0);
+    @nonfinite ctx.moveTo(<0 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>);
+    ctx.lineTo(100, 50);
+    ctx.lineTo(0, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.fill();
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.closePath.empty
+  testing:
+  - 2d.path.closePath.empty
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.closePath();
+    ctx.fillStyle = '#f00';
+    ctx.fill();
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.closePath.newline
+  testing:
+  - 2d.path.closePath.nonempty
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 50;
+    ctx.moveTo(-100, 25);
+    ctx.lineTo(-100, -100);
+    ctx.lineTo(200, -100);
+    ctx.lineTo(200, 25);
+    ctx.closePath();
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.closePath.nextpoint
+  testing:
+  - 2d.path.closePath.nonempty
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 50;
+    ctx.moveTo(-100, 25);
+    ctx.lineTo(-100, -1000);
+    ctx.closePath();
+    ctx.lineTo(1000, 25);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.lineTo.ensuresubpath.1
+  desc: If there is no subpath, the point is added and nothing is drawn
+  testing:
+  - 2d.path.lineTo.empty
+  - 2d.path.ensure
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 50;
+    ctx.beginPath();
+    ctx.lineTo(100, 50);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.lineTo.ensuresubpath.2
+  desc: If there is no subpath, the point is added and used for subsequent drawing
+  testing:
+  - 2d.path.lineTo.empty
+  - 2d.path.ensure
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 50;
+    ctx.beginPath();
+    ctx.lineTo(0, 25);
+    ctx.lineTo(100, 25);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.lineTo.basic
+  testing:
+  - 2d.path.lineTo.nonempty
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 50;
+    ctx.beginPath();
+    ctx.moveTo(0, 25);
+    ctx.lineTo(100, 25);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.lineTo.nextpoint
+  testing:
+  - 2d.path.lineTo.nonempty
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 50;
+    ctx.beginPath();
+    ctx.moveTo(-100, -100);
+    ctx.lineTo(0, 25);
+    ctx.lineTo(100, 25);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.lineTo.nonfinite
+  desc: lineTo() with Infinity/NaN is ignored
+  testing:
+  - 2d.nonfinite
+  code: |
+    ctx.moveTo(0, 0);
+    ctx.lineTo(100, 0);
+    @nonfinite ctx.lineTo(<0 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>);
+    ctx.lineTo(100, 50);
+    ctx.lineTo(0, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.fill();
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 90,45 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.lineTo.nonfinite.details
+  desc: lineTo() with Infinity/NaN for first arg still converts the second arg
+  testing:
+  - 2d.nonfinite
+  code: |
+    for (var arg1 of [Infinity, -Infinity, NaN]) {
+      var converted = false;
+      ctx.lineTo(arg1, { valueOf: function() { converted = true; return 0; } });
+      @assert converted;
+    }
+  expected: clear
+
+- name: 2d.path.quadraticCurveTo.ensuresubpath.1
+  desc: If there is no subpath, the first control point is added (and nothing is drawn
+    up to it)
+  testing:
+  - 2d.path.quadratic.empty
+  - 2d.path.ensure
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 50;
+    ctx.beginPath();
+    ctx.quadraticCurveTo(100, 50, 200, 50);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 95,45 == 0,255,0,255; @moz-todo
+  expected: green
+
+- name: 2d.path.quadraticCurveTo.ensuresubpath.2
+  desc: If there is no subpath, the first control point is added
+  testing:
+  - 2d.path.quadratic.empty
+  - 2d.path.ensure
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 50;
+    ctx.beginPath();
+    ctx.quadraticCurveTo(0, 25, 100, 25);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 5,45 == 0,255,0,255; @moz-todo
+  expected: green
+
+- name: 2d.path.quadraticCurveTo.basic
+  testing:
+  - 2d.path.quadratic.nonempty
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 50;
+    ctx.beginPath();
+    ctx.moveTo(0, 25);
+    ctx.quadraticCurveTo(100, 25, 100, 25);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.quadraticCurveTo.shape
+  testing:
+  - 2d.path.quadratic.nonempty
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 55;
+    ctx.beginPath();
+    ctx.moveTo(-1000, 1050);
+    ctx.quadraticCurveTo(0, -1000, 1200, 1050);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.quadraticCurveTo.scaled
+  testing:
+  - 2d.path.quadratic.nonempty
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.scale(1000, 1000);
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 0.055;
+    ctx.beginPath();
+    ctx.moveTo(-1, 1.05);
+    ctx.quadraticCurveTo(0, -1, 1.2, 1.05);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.quadraticCurveTo.nonfinite
+  desc: quadraticCurveTo() with Infinity/NaN is ignored
+  testing:
+  - 2d.nonfinite
+  code: |
+    ctx.moveTo(0, 0);
+    ctx.lineTo(100, 0);
+    @nonfinite ctx.quadraticCurveTo(<0 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>);
+    ctx.lineTo(100, 50);
+    ctx.lineTo(0, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.fill();
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 90,45 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.bezierCurveTo.ensuresubpath.1
+  desc: If there is no subpath, the first control point is added (and nothing is drawn
+    up to it)
+  testing:
+  - 2d.path.bezier.empty
+  - 2d.path.ensure
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 50;
+    ctx.beginPath();
+    ctx.bezierCurveTo(100, 50, 200, 50, 200, 50);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 95,45 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.bezierCurveTo.ensuresubpath.2
+  desc: If there is no subpath, the first control point is added
+  testing:
+  - 2d.path.bezier.empty
+  - 2d.path.ensure
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 50;
+    ctx.beginPath();
+    ctx.bezierCurveTo(0, 25, 100, 25, 100, 25);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 5,45 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.bezierCurveTo.basic
+  testing:
+  - 2d.path.bezier.nonempty
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 50;
+    ctx.beginPath();
+    ctx.moveTo(0, 25);
+    ctx.bezierCurveTo(100, 25, 100, 25, 100, 25);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.bezierCurveTo.shape
+  testing:
+  - 2d.path.bezier.nonempty
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 55;
+    ctx.beginPath();
+    ctx.moveTo(-2000, 3100);
+    ctx.bezierCurveTo(-2000, -1000, 2100, -1000, 2100, 3100);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.bezierCurveTo.scaled
+  testing:
+  - 2d.path.bezier.nonempty
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.scale(1000, 1000);
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 0.055;
+    ctx.beginPath();
+    ctx.moveTo(-2, 3.1);
+    ctx.bezierCurveTo(-2, -1, 2.1, -1, 2.1, 3.1);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.bezierCurveTo.nonfinite
+  desc: bezierCurveTo() with Infinity/NaN is ignored
+  testing:
+  - 2d.nonfinite
+  code: |
+    ctx.moveTo(0, 0);
+    ctx.lineTo(100, 0);
+    @nonfinite ctx.bezierCurveTo(<0 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>);
+    ctx.lineTo(100, 50);
+    ctx.lineTo(0, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.fill();
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 90,45 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.arcTo.ensuresubpath.1
+  desc: If there is no subpath, the first control point is added (and nothing is drawn
+    up to it)
+  testing:
+  - 2d.path.arcTo.empty
+  - 2d.path.ensure
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.lineWidth = 50;
+    ctx.strokeStyle = '#f00';
+    ctx.beginPath();
+    ctx.arcTo(100, 50, 200, 50, 0.1);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.arcTo.ensuresubpath.2
+  desc: If there is no subpath, the first control point is added
+  testing:
+  - 2d.path.arcTo.empty
+  - 2d.path.ensure
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.lineWidth = 50;
+    ctx.strokeStyle = '#0f0';
+    ctx.beginPath();
+    ctx.arcTo(0, 25, 50, 250, 0.1); // adds (x1,y1), draws nothing
+    ctx.lineTo(100, 25);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.arcTo.coincide.1
+  desc: arcTo() has no effect if P0 = P1
+  testing:
+  - 2d.path.arcTo.coincide.01
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.lineWidth = 50;
+
+    ctx.strokeStyle = '#0f0';
+    ctx.beginPath();
+    ctx.moveTo(0, 25);
+    ctx.arcTo(0, 25, 50, 1000, 1);
+    ctx.lineTo(100, 25);
+    ctx.stroke();
+
+    ctx.strokeStyle = '#f00';
+    ctx.beginPath();
+    ctx.moveTo(50, 25);
+    ctx.arcTo(50, 25, 100, 25, 1);
+    ctx.stroke();
+
+    @assert pixel 50,1 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 50,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.arcTo.coincide.2
+  desc: arcTo() draws a straight line to P1 if P1 = P2
+  testing:
+  - 2d.path.arcTo.coincide.12
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.lineWidth = 50;
+    ctx.strokeStyle = '#0f0';
+    ctx.beginPath();
+    ctx.moveTo(0, 25);
+    ctx.arcTo(100, 25, 100, 25, 1);
+    ctx.stroke();
+
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.arcTo.collinear.1
+  desc: arcTo() with all points on a line, and P1 between P0/P2, draws a straight
+    line to P1
+  testing:
+  - 2d.path.arcTo.collinear
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.lineWidth = 50;
+
+    ctx.strokeStyle = '#0f0';
+    ctx.beginPath();
+    ctx.moveTo(0, 25);
+    ctx.arcTo(100, 25, 200, 25, 1);
+    ctx.stroke();
+
+    ctx.strokeStyle = '#f00';
+    ctx.beginPath();
+    ctx.moveTo(-100, 25);
+    ctx.arcTo(0, 25, 100, 25, 1);
+    ctx.stroke();
+
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.arcTo.collinear.2
+  desc: arcTo() with all points on a line, and P2 between P0/P1, draws a straight
+    line to P1
+  testing:
+  - 2d.path.arcTo.collinear
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.lineWidth = 50;
+
+    ctx.strokeStyle = '#0f0';
+    ctx.beginPath();
+    ctx.moveTo(0, 25);
+    ctx.arcTo(100, 25, 10, 25, 1);
+    ctx.stroke();
+
+    ctx.strokeStyle = '#f00';
+    ctx.beginPath();
+    ctx.moveTo(100, 25);
+    ctx.arcTo(200, 25, 110, 25, 1);
+    ctx.stroke();
+
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.arcTo.collinear.3
+  desc: arcTo() with all points on a line, and P0 between P1/P2, draws a straight
+    line to P1
+  testing:
+  - 2d.path.arcTo.collinear
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.lineWidth = 50;
+
+    ctx.strokeStyle = '#0f0';
+    ctx.beginPath();
+    ctx.moveTo(0, 25);
+    ctx.arcTo(100, 25, -100, 25, 1);
+    ctx.stroke();
+
+    ctx.strokeStyle = '#f00';
+    ctx.beginPath();
+    ctx.moveTo(100, 25);
+    ctx.arcTo(200, 25, 0, 25, 1);
+    ctx.stroke();
+
+    ctx.beginPath();
+    ctx.moveTo(-100, 25);
+    ctx.arcTo(0, 25, -200, 25, 1);
+    ctx.stroke();
+
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.arcTo.shape.curve1
+  desc: arcTo() curves in the right kind of shape
+  testing:
+  - 2d.path.arcTo.shape
+  code: |
+    var tol = 1.5; // tolerance to avoid antialiasing artifacts
+
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 10;
+    ctx.beginPath();
+    ctx.moveTo(10, 25);
+    ctx.arcTo(75, 25, 75, 60, 20);
+    ctx.stroke();
+
+    ctx.fillStyle = '#0f0';
+    ctx.beginPath();
+    ctx.rect(10, 20, 45, 10);
+    ctx.moveTo(80, 45);
+    ctx.arc(55, 45, 25+tol, 0, -Math.PI/2, true);
+    ctx.arc(55, 45, 15-tol, -Math.PI/2, 0, false);
+    ctx.fill();
+
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 55,19 == 0,255,0,255;
+    @assert pixel 55,20 == 0,255,0,255;
+    @assert pixel 55,21 == 0,255,0,255;
+    @assert pixel 64,22 == 0,255,0,255;
+    @assert pixel 65,21 == 0,255,0,255;
+    @assert pixel 72,28 == 0,255,0,255;
+    @assert pixel 73,27 == 0,255,0,255;
+    @assert pixel 78,36 == 0,255,0,255;
+    @assert pixel 79,35 == 0,255,0,255;
+    @assert pixel 80,44 == 0,255,0,255;
+    @assert pixel 80,45 == 0,255,0,255;
+    @assert pixel 80,46 == 0,255,0,255;
+    @assert pixel 65,45 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.arcTo.shape.curve2
+  desc: arcTo() curves in the right kind of shape
+  testing:
+  - 2d.path.arcTo.shape
+  code: |
+    var tol = 1.5; // tolerance to avoid antialiasing artifacts
+
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.fillStyle = '#f00';
+    ctx.beginPath();
+    ctx.rect(10, 20, 45, 10);
+    ctx.moveTo(80, 45);
+    ctx.arc(55, 45, 25-tol, 0, -Math.PI/2, true);
+    ctx.arc(55, 45, 15+tol, -Math.PI/2, 0, false);
+    ctx.fill();
+
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 10;
+    ctx.beginPath();
+    ctx.moveTo(10, 25);
+    ctx.arcTo(75, 25, 75, 60, 20);
+    ctx.stroke();
+
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 55,19 == 0,255,0,255;
+    @assert pixel 55,20 == 0,255,0,255;
+    @assert pixel 55,21 == 0,255,0,255;
+    @assert pixel 64,22 == 0,255,0,255;
+    @assert pixel 65,21 == 0,255,0,255;
+    @assert pixel 72,28 == 0,255,0,255;
+    @assert pixel 73,27 == 0,255,0,255;
+    @assert pixel 78,36 == 0,255,0,255;
+    @assert pixel 79,35 == 0,255,0,255;
+    @assert pixel 80,44 == 0,255,0,255;
+    @assert pixel 80,45 == 0,255,0,255;
+    @assert pixel 80,46 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.arcTo.shape.start
+  desc: arcTo() draws a straight line from P0 to P1
+  testing:
+  - 2d.path.arcTo.shape
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 50;
+    ctx.beginPath();
+    ctx.moveTo(0, 25);
+    ctx.arcTo(200, 25, 200, 50, 10);
+    ctx.stroke();
+
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.arcTo.shape.end
+  desc: arcTo() does not draw anything from P1 to P2
+  testing:
+  - 2d.path.arcTo.shape
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 50;
+    ctx.beginPath();
+    ctx.moveTo(-100, -100);
+    ctx.arcTo(-100, 25, 200, 25, 10);
+    ctx.stroke();
+
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.arcTo.negative
+  desc: arcTo() with negative radius throws an exception
+  testing:
+  - 2d.path.arcTo.negative
+  code: |
+    @assert throws INDEX_SIZE_ERR ctx.arcTo(0, 0, 0, 0, -1);
+    var path = new Path2D();
+    @assert throws INDEX_SIZE_ERR path.arcTo(10, 10, 20, 20, -5);
+
+- name: 2d.path.arcTo.zero.1
+  desc: arcTo() with zero radius draws a straight line from P0 to P1
+  testing:
+  - 2d.path.arcTo.zeroradius
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.lineWidth = 50;
+
+    ctx.strokeStyle = '#0f0';
+    ctx.beginPath();
+    ctx.moveTo(0, 25);
+    ctx.arcTo(100, 25, 100, 100, 0);
+    ctx.stroke();
+
+    ctx.strokeStyle = '#f00';
+    ctx.beginPath();
+    ctx.moveTo(0, -25);
+    ctx.arcTo(50, -25, 50, 50, 0);
+    ctx.stroke();
+
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.arcTo.zero.2
+  desc: arcTo() with zero radius draws a straight line from P0 to P1, even when all
+    points are collinear
+  testing:
+  - 2d.path.arcTo.zeroradius
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.lineWidth = 50;
+
+    ctx.strokeStyle = '#0f0';
+    ctx.beginPath();
+    ctx.moveTo(0, 25);
+    ctx.arcTo(100, 25, -100, 25, 0);
+    ctx.stroke();
+
+    ctx.strokeStyle = '#f00';
+    ctx.beginPath();
+    ctx.moveTo(100, 25);
+    ctx.arcTo(200, 25, 50, 25, 0);
+    ctx.stroke();
+
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.arcTo.transformation
+  desc: arcTo joins up to the last subpath point correctly
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.fillStyle = '#0f0';
+    ctx.beginPath();
+    ctx.moveTo(0, 50);
+    ctx.translate(100, 0);
+    ctx.arcTo(50, 50, 50, 0, 50);
+    ctx.lineTo(-100, 0);
+    ctx.fill();
+
+    @assert pixel 0,0 == 0,255,0,255;
+    @assert pixel 50,0 == 0,255,0,255;
+    @assert pixel 99,0 == 0,255,0,255;
+    @assert pixel 0,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 99,25 == 0,255,0,255;
+    @assert pixel 0,49 == 0,255,0,255;
+    @assert pixel 50,49 == 0,255,0,255;
+    @assert pixel 99,49 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.arcTo.scale
+  desc: arcTo scales the curve, not just the control points
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.fillStyle = '#0f0';
+    ctx.beginPath();
+    ctx.moveTo(0, 50);
+    ctx.translate(100, 0);
+    ctx.scale(0.1, 1);
+    ctx.arcTo(50, 50, 50, 0, 50);
+    ctx.lineTo(-1000, 0);
+    ctx.fill();
+
+    @assert pixel 0,0 == 0,255,0,255;
+    @assert pixel 50,0 == 0,255,0,255;
+    @assert pixel 99,0 == 0,255,0,255;
+    @assert pixel 0,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 99,25 == 0,255,0,255;
+    @assert pixel 0,49 == 0,255,0,255;
+    @assert pixel 50,49 == 0,255,0,255;
+    @assert pixel 99,49 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.arcTo.nonfinite
+  desc: arcTo() with Infinity/NaN is ignored
+  testing:
+  - 2d.nonfinite
+  code: |
+    ctx.moveTo(0, 0);
+    ctx.lineTo(100, 0);
+    @nonfinite ctx.arcTo(<0 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>);
+    ctx.lineTo(100, 50);
+    ctx.lineTo(0, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.fill();
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 90,45 == 0,255,0,255;
+  expected: green
+
+
+- name: 2d.path.arc.empty
+  desc: arc() with an empty path does not draw a straight line to the start point
+  testing:
+  - 2d.path.arc.nonempty
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.lineWidth = 50;
+    ctx.strokeStyle = '#f00';
+    ctx.beginPath();
+    ctx.arc(200, 25, 5, 0, 2*Math.PI, true);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.arc.nonempty
+  desc: arc() with a non-empty path does draw a straight line to the start point
+  testing:
+  - 2d.path.arc.nonempty
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.lineWidth = 50;
+    ctx.strokeStyle = '#0f0';
+    ctx.beginPath();
+    ctx.moveTo(0, 25);
+    ctx.arc(200, 25, 5, 0, 2*Math.PI, true);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.arc.end
+  desc: arc() adds the end point of the arc to the subpath
+  testing:
+  - 2d.path.arc.draw
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.lineWidth = 50;
+    ctx.strokeStyle = '#0f0';
+    ctx.beginPath();
+    ctx.moveTo(-100, 0);
+    ctx.arc(-100, 0, 25, -Math.PI/2, Math.PI/2, true);
+    ctx.lineTo(100, 25);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.arc.default
+  desc: arc() with missing last argument defaults to clockwise
+  testing:
+  - 2d.path.arc.omitted
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#f00';
+    ctx.beginPath();
+    ctx.moveTo(100, 0);
+    ctx.arc(100, 0, 150, -Math.PI, Math.PI/2);
+    ctx.fill();
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.arc.angle.1
+  desc: arc() draws pi/2 .. -pi anticlockwise correctly
+  testing:
+  - 2d.path.arc.draw
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#f00';
+    ctx.beginPath();
+    ctx.moveTo(100, 0);
+    ctx.arc(100, 0, 150, Math.PI/2, -Math.PI, true);
+    ctx.fill();
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.arc.angle.2
+  desc: arc() draws -3pi/2 .. -pi anticlockwise correctly
+  testing:
+  - 2d.path.arc.draw
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#f00';
+    ctx.beginPath();
+    ctx.moveTo(100, 0);
+    ctx.arc(100, 0, 150, -3*Math.PI/2, -Math.PI, true);
+    ctx.fill();
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.arc.angle.3
+  desc: arc() wraps angles mod 2pi when anticlockwise and end > start+2pi
+  testing:
+  - 2d.path.arc.draw
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#f00';
+    ctx.beginPath();
+    ctx.moveTo(100, 0);
+    ctx.arc(100, 0, 150, (512+1/2)*Math.PI, (1024-1)*Math.PI, true);
+    ctx.fill();
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.arc.angle.4
+  desc: arc() draws a full circle when clockwise and end > start+2pi
+  testing:
+  - 2d.path.arc.draw
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.beginPath();
+    ctx.moveTo(50, 25);
+    ctx.arc(50, 25, 60, (512+1/2)*Math.PI, (1024-1)*Math.PI, false);
+    ctx.fill();
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.arc.angle.5
+  desc: arc() wraps angles mod 2pi when clockwise and start > end+2pi
+  testing:
+  - 2d.path.arc.draw
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#f00';
+    ctx.beginPath();
+    ctx.moveTo(100, 0);
+    ctx.arc(100, 0, 150, (1024-1)*Math.PI, (512+1/2)*Math.PI, false);
+    ctx.fill();
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.arc.angle.6
+  desc: arc() draws a full circle when anticlockwise and start > end+2pi
+  testing:
+  - 2d.path.arc.draw
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.beginPath();
+    ctx.moveTo(50, 25);
+    ctx.arc(50, 25, 60, (1024-1)*Math.PI, (512+1/2)*Math.PI, true);
+    ctx.fill();
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.arc.zero.1
+  desc: arc() draws nothing when startAngle = endAngle and anticlockwise
+  testing:
+  - 2d.path.arc.draw
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 100;
+    ctx.beginPath();
+    ctx.arc(50, 25, 50, 0, 0, true);
+    ctx.stroke();
+    @assert pixel 50,20 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.arc.zero.2
+  desc: arc() draws nothing when startAngle = endAngle and clockwise
+  testing:
+  - 2d.path.arc.draw
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 100;
+    ctx.beginPath();
+    ctx.arc(50, 25, 50, 0, 0, false);
+    ctx.stroke();
+    @assert pixel 50,20 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.arc.twopie.1
+  desc: arc() draws nothing when end = start + 2pi-e and anticlockwise
+  testing:
+  - 2d.path.arc.draw
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 100;
+    ctx.beginPath();
+    ctx.arc(50, 25, 50, 0, 2*Math.PI - 1e-4, true);
+    ctx.stroke();
+    @assert pixel 50,20 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.arc.twopie.2
+  desc: arc() draws a full circle when end = start + 2pi-e and clockwise
+  testing:
+  - 2d.path.arc.draw
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 100;
+    ctx.beginPath();
+    ctx.arc(50, 25, 50, 0, 2*Math.PI - 1e-4, false);
+    ctx.stroke();
+    @assert pixel 50,20 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.arc.twopie.3
+  desc: arc() draws a full circle when end = start + 2pi+e and anticlockwise
+  testing:
+  - 2d.path.arc.draw
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 100;
+    ctx.beginPath();
+    ctx.arc(50, 25, 50, 0, 2*Math.PI + 1e-4, true);
+    ctx.stroke();
+    @assert pixel 50,20 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.arc.twopie.4
+  desc: arc() draws nothing when end = start + 2pi+e and clockwise
+  testing:
+  - 2d.path.arc.draw
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 100;
+    ctx.beginPath();
+    ctx.arc(50, 25, 50, 0, 2*Math.PI + 1e-4, false);
+    ctx.stroke();
+    @assert pixel 50,20 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.arc.shape.1
+  desc: arc() from 0 to pi does not draw anything in the wrong half
+  testing:
+  - 2d.path.arc.draw
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.lineWidth = 50;
+    ctx.strokeStyle = '#f00';
+    ctx.beginPath();
+    ctx.arc(50, 50, 50, 0, Math.PI, false);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 20,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.arc.shape.2
+  desc: arc() from 0 to pi draws stuff in the right half
+  testing:
+  - 2d.path.arc.draw
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.lineWidth = 100;
+    ctx.strokeStyle = '#0f0';
+    ctx.beginPath();
+    ctx.arc(50, 50, 50, 0, Math.PI, true);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 20,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.arc.shape.3
+  desc: arc() from 0 to -pi/2 does not draw anything in the wrong quadrant
+  testing:
+  - 2d.path.arc.draw
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.lineWidth = 100;
+    ctx.strokeStyle = '#f00';
+    ctx.beginPath();
+    ctx.arc(0, 50, 50, 0, -Math.PI/2, false);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255; @moz-todo
+    @assert pixel 98,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.arc.shape.4
+  desc: arc() from 0 to -pi/2 draws stuff in the right quadrant
+  testing:
+  - 2d.path.arc.draw
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.lineWidth = 150;
+    ctx.strokeStyle = '#0f0';
+    ctx.beginPath();
+    ctx.arc(-50, 50, 100, 0, -Math.PI/2, true);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.arc.shape.5
+  desc: arc() from 0 to 5pi does not draw crazy things
+  testing:
+  - 2d.path.arc.draw
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.lineWidth = 200;
+    ctx.strokeStyle = '#f00';
+    ctx.beginPath();
+    ctx.arc(300, 0, 100, 0, 5*Math.PI, false);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.arc.selfintersect.1
+  desc: arc() with lineWidth > 2*radius is drawn sensibly
+  testing:
+  - 2d.path.arc.draw
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.lineWidth = 200;
+    ctx.strokeStyle = '#f00';
+    ctx.beginPath();
+    ctx.arc(100, 50, 25, 0, -Math.PI/2, true);
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.arc(0, 0, 25, 0, -Math.PI/2, true);
+    ctx.stroke();
+    @assert pixel 1,1 == 0,255,0,255; @moz-todo
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.arc.selfintersect.2
+  desc: arc() with lineWidth > 2*radius is drawn sensibly
+  testing:
+  - 2d.path.arc.draw
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.lineWidth = 180;
+    ctx.strokeStyle = '#0f0';
+    ctx.beginPath();
+    ctx.arc(-50, 50, 25, 0, -Math.PI/2, true);
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.arc(100, 0, 25, 0, -Math.PI/2, true);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 90,10 == 0,255,0,255;
+    @assert pixel 97,1 == 0,255,0,255;
+    @assert pixel 97,2 == 0,255,0,255;
+    @assert pixel 97,3 == 0,255,0,255;
+    @assert pixel 2,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.arc.negative
+  desc: arc() with negative radius throws INDEX_SIZE_ERR
+  testing:
+  - 2d.path.arc.negative
+  code: |
+    @assert throws INDEX_SIZE_ERR ctx.arc(0, 0, -1, 0, 0, true);
+    var path = new Path2D();
+    @assert throws INDEX_SIZE_ERR path.arc(10, 10, -5, 0, 1, false);
+
+- name: 2d.path.arc.zeroradius
+  desc: arc() with zero radius draws a line to the start point
+  testing:
+  - 2d.path.arc.zero
+  code: |
+    ctx.fillStyle = '#f00'
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.lineWidth = 50;
+    ctx.strokeStyle = '#0f0';
+    ctx.beginPath();
+    ctx.moveTo(0, 25);
+    ctx.arc(200, 25, 0, 0, Math.PI, true);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.arc.scale.1
+  desc: Non-uniformly scaled arcs are the right shape
+  testing:
+  - 2d.path.transformation
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.scale(2, 0.5);
+    ctx.fillStyle = '#0f0';
+    ctx.beginPath();
+    ctx.arc(25, 50, 56, 0, 2*Math.PI, false);
+    ctx.fill();
+    ctx.fillStyle = '#f00';
+    ctx.beginPath();
+    ctx.moveTo(-25, 50);
+    ctx.arc(-25, 50, 24, 0, 2*Math.PI, false);
+    ctx.moveTo(75, 50);
+    ctx.arc(75, 50, 24, 0, 2*Math.PI, false);
+    ctx.moveTo(25, -25);
+    ctx.arc(25, -25, 24, 0, 2*Math.PI, false);
+    ctx.moveTo(25, 125);
+    ctx.arc(25, 125, 24, 0, 2*Math.PI, false);
+    ctx.fill();
+
+    @assert pixel 0,0 == 0,255,0,255;
+    @assert pixel 50,0 == 0,255,0,255;
+    @assert pixel 99,0 == 0,255,0,255;
+    @assert pixel 0,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 99,25 == 0,255,0,255;
+    @assert pixel 0,49 == 0,255,0,255;
+    @assert pixel 50,49 == 0,255,0,255;
+    @assert pixel 99,49 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.arc.scale.2
+  desc: Highly scaled arcs are the right shape
+  testing:
+  - 2d.path.arc.draw
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.scale(100, 100);
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 1.2;
+    ctx.beginPath();
+    ctx.arc(0, 0, 0.6, 0, Math.PI/2, false);
+    ctx.stroke();
+
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 50,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 98,25 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 50,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.arc.nonfinite
+  desc: arc() with Infinity/NaN is ignored
+  testing:
+  - 2d.nonfinite
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.moveTo(0, 0);
+    ctx.lineTo(100, 0);
+    @nonfinite ctx.arc(<0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <2*Math.PI Infinity -Infinity NaN>, <true>);
+    ctx.lineTo(100, 50);
+    ctx.lineTo(0, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.fill();
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 90,45 == 0,255,0,255;
+  expected: green
+
+
+- name: 2d.path.rect.basic
+  testing:
+  - 2d.path.rect.subpath
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.rect(0, 0, 100, 50);
+    ctx.fill();
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.rect.newsubpath
+  testing:
+  - 2d.path.rect.subpath
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.beginPath();
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 50;
+    ctx.moveTo(-100, 25);
+    ctx.lineTo(-50, 25);
+    ctx.rect(200, 25, 1, 1);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.rect.closed
+  testing:
+  - 2d.path.rect.closed
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 200;
+    ctx.lineJoin = 'miter';
+    ctx.rect(100, 50, 100, 100);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.rect.end.1
+  testing:
+  - 2d.path.rect.newsubpath
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 100;
+    ctx.rect(200, 100, 400, 1000);
+    ctx.lineTo(-2000, -1000);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.rect.end.2
+  testing:
+  - 2d.path.rect.newsubpath
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 450;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'bevel';
+    ctx.rect(150, 150, 2000, 2000);
+    ctx.lineTo(160, 160);
+    ctx.stroke();
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.rect.zero.1
+  testing:
+  - 2d.path.rect.subpath
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 100;
+    ctx.beginPath();
+    ctx.rect(0, 50, 100, 0);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.rect.zero.2
+  testing:
+  - 2d.path.rect.subpath
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 100;
+    ctx.beginPath();
+    ctx.rect(50, -100, 0, 250);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.rect.zero.3
+  testing:
+  - 2d.path.rect.subpath
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 100;
+    ctx.beginPath();
+    ctx.rect(50, 25, 0, 0);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.rect.zero.4
+  testing:
+  - 2d.path.rect.subpath
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 50;
+    ctx.rect(100, 25, 0, 0);
+    ctx.lineTo(0, 25);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.rect.zero.5
+  testing:
+  - 2d.path.rect.subpath
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 50;
+    ctx.moveTo(0, 0);
+    ctx.rect(100, 25, 0, 0);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.rect.zero.6
+  testing:
+  - 2d.path.rect.subpath
+  #mozilla: { bug: TODO }
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#f00';
+    ctx.lineJoin = 'miter';
+    ctx.miterLimit = 1.5;
+    ctx.lineWidth = 200;
+    ctx.beginPath();
+    ctx.rect(100, 25, 1000, 0);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255; @moz-todo
+  expected: green
+
+- name: 2d.path.rect.negative
+  testing:
+  - 2d.path.rect.subpath
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.beginPath();
+    ctx.fillStyle = '#0f0';
+    ctx.rect(0, 0, 50, 25);
+    ctx.rect(100, 0, -50, 25);
+    ctx.rect(0, 50, 50, -25);
+    ctx.rect(100, 50, -50, -25);
+    ctx.fill();
+    @assert pixel 25,12 == 0,255,0,255;
+    @assert pixel 75,12 == 0,255,0,255;
+    @assert pixel 25,37 == 0,255,0,255;
+    @assert pixel 75,37 == 0,255,0,255;
+
+- name: 2d.path.rect.winding
+  testing:
+  - 2d.path.rect.subpath
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.beginPath();
+    ctx.fillStyle = '#f00';
+    ctx.rect(0, 0, 50, 50);
+    ctx.rect(100, 50, -50, -50);
+    ctx.rect(0, 25, 100, -25);
+    ctx.rect(100, 25, -100, 25);
+    ctx.fill();
+    @assert pixel 25,12 == 0,255,0,255;
+    @assert pixel 75,12 == 0,255,0,255;
+    @assert pixel 25,37 == 0,255,0,255;
+    @assert pixel 75,37 == 0,255,0,255;
+
+- name: 2d.path.rect.selfintersect
+  #mozilla: { bug: TODO }
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 90;
+    ctx.beginPath();
+    ctx.rect(45, 20, 10, 10);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255; @moz-todo
+  expected: green
+
+- name: 2d.path.rect.nonfinite
+  desc: rect() with Infinity/NaN is ignored
+  testing:
+  - 2d.nonfinite
+  code: |
+    ctx.moveTo(0, 0);
+    ctx.lineTo(100, 0);
+    @nonfinite ctx.rect(<0 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>, <1 Infinity -Infinity NaN>, <1 Infinity -Infinity NaN>);
+    ctx.lineTo(100, 50);
+    ctx.lineTo(0, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.fill();
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 90,45 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.fill.overlap
+  testing:
+  - 2d.path.fill.basic
+  code: |
+    ctx.fillStyle = '#000';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
+    ctx.rect(0, 0, 100, 50);
+    ctx.closePath();
+    ctx.rect(10, 10, 80, 30);
+    ctx.fill();
+
+    @assert pixel 50,25 ==~ 0,127,0,255 +/- 1;
+  expected: |
+    size 100 50
+    cr.set_source_rgb(0, 0.5, 0)
+    cr.rectangle(0, 0, 100, 50)
+    cr.fill()
+
+- name: 2d.path.fill.winding.add
+  testing:
+  - 2d.path.fill.basic
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.fillStyle = '#0f0';
+    ctx.moveTo(-10, -10);
+    ctx.lineTo(110, -10);
+    ctx.lineTo(110, 60);
+    ctx.lineTo(-10, 60);
+    ctx.lineTo(-10, -10);
+    ctx.lineTo(0, 0);
+    ctx.lineTo(100, 0);
+    ctx.lineTo(100, 50);
+    ctx.lineTo(0, 50);
+    ctx.fill();
+
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.fill.winding.subtract.1
+  testing:
+  - 2d.path.fill.basic
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.fillStyle = '#f00';
+    ctx.moveTo(-10, -10);
+    ctx.lineTo(110, -10);
+    ctx.lineTo(110, 60);
+    ctx.lineTo(-10, 60);
+    ctx.lineTo(-10, -10);
+    ctx.lineTo(0, 0);
+    ctx.lineTo(0, 50);
+    ctx.lineTo(100, 50);
+    ctx.lineTo(100, 0);
+    ctx.fill();
+
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.fill.winding.subtract.2
+  testing:
+  - 2d.path.fill.basic
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.fillStyle = '#f00';
+    ctx.moveTo(-10, -10);
+    ctx.lineTo(110, -10);
+    ctx.lineTo(110, 60);
+    ctx.lineTo(-10, 60);
+    ctx.moveTo(0, 0);
+    ctx.lineTo(0, 50);
+    ctx.lineTo(100, 50);
+    ctx.lineTo(100, 0);
+    ctx.fill();
+
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.fill.winding.subtract.3
+  testing:
+  - 2d.path.fill.basic
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.fillStyle = '#0f0';
+    ctx.moveTo(-10, -10);
+    ctx.lineTo(110, -10);
+    ctx.lineTo(110, 60);
+    ctx.lineTo(-10, 60);
+    ctx.lineTo(-10, -10);
+    ctx.lineTo(-20, -20);
+    ctx.lineTo(120, -20);
+    ctx.lineTo(120, 70);
+    ctx.lineTo(-20, 70);
+    ctx.lineTo(-20, -20);
+    ctx.lineTo(0, 0);
+    ctx.lineTo(0, 50);
+    ctx.lineTo(100, 50);
+    ctx.lineTo(100, 0);
+    ctx.fill();
+
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.fill.closed.basic
+  testing:
+  - 2d.path.fill.closed
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.fillStyle = '#0f0';
+    ctx.moveTo(0, 0);
+    ctx.lineTo(100, 0);
+    ctx.lineTo(100, 50);
+    ctx.lineTo(0, 50);
+    ctx.fill();
+
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.fill.closed.unaffected
+  testing:
+  - 2d.path.fill.closed
+  code: |
+    ctx.fillStyle = '#00f';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.moveTo(0, 0);
+    ctx.lineTo(100, 0);
+    ctx.lineTo(100, 50);
+    ctx.fillStyle = '#f00';
+    ctx.fill();
+    ctx.lineTo(0, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.fill();
+
+    @assert pixel 90,10 == 0,255,0,255;
+    @assert pixel 10,40 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.stroke.overlap
+  desc: Stroked subpaths are combined before being drawn
+  testing:
+  - 2d.path.stroke.basic
+  code: |
+    ctx.fillStyle = '#000';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.strokeStyle = 'rgba(0, 255, 0, 0.5)';
+    ctx.lineWidth = 50;
+    ctx.moveTo(0, 20);
+    ctx.lineTo(100, 20);
+    ctx.moveTo(0, 30);
+    ctx.lineTo(100, 30);
+    ctx.stroke();
+
+    @assert pixel 50,25 ==~ 0,127,0,255 +/- 1;
+  expected: |
+    size 100 50
+    cr.set_source_rgb(0, 0.5, 0)
+    cr.rectangle(0, 0, 100, 50)
+    cr.fill()
+
+- name: 2d.path.stroke.union
+  desc: Strokes in opposite directions are unioned, not subtracted
+  testing:
+  - 2d.path.stroke.basic
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 40;
+    ctx.moveTo(0, 10);
+    ctx.lineTo(100, 10);
+    ctx.moveTo(100, 40);
+    ctx.lineTo(0, 40);
+    ctx.stroke();
+
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.stroke.unaffected
+  desc: Stroking does not start a new path or subpath
+  testing:
+  - 2d.path.stroke.basic
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.lineWidth = 50;
+    ctx.moveTo(-100, 25);
+    ctx.lineTo(-100, -100);
+    ctx.lineTo(200, -100);
+    ctx.lineTo(200, 25);
+    ctx.strokeStyle = '#f00';
+    ctx.stroke();
+
+    ctx.closePath();
+    ctx.strokeStyle = '#0f0';
+    ctx.stroke();
+
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.stroke.scale1
+  desc: Stroke line widths are scaled by the current transformation matrix
+  testing:
+  - 2d.path.transformation
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.beginPath();
+    ctx.rect(25, 12.5, 50, 25);
+    ctx.save();
+    ctx.scale(50, 25);
+    ctx.strokeStyle = '#0f0';
+    ctx.stroke();
+    ctx.restore();
+
+    ctx.beginPath();
+    ctx.rect(-25, -12.5, 150, 75);
+    ctx.save();
+    ctx.scale(50, 25);
+    ctx.strokeStyle = '#f00';
+    ctx.stroke();
+    ctx.restore();
+
+    @assert pixel 0,0 == 0,255,0,255;
+    @assert pixel 50,0 == 0,255,0,255;
+    @assert pixel 99,0 == 0,255,0,255;
+    @assert pixel 0,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 99,25 == 0,255,0,255;
+    @assert pixel 0,49 == 0,255,0,255;
+    @assert pixel 50,49 == 0,255,0,255;
+    @assert pixel 99,49 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.stroke.scale2
+  desc: Stroke line widths are scaled by the current transformation matrix
+  testing:
+  - 2d.path.transformation
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.beginPath();
+    ctx.rect(25, 12.5, 50, 25);
+    ctx.save();
+    ctx.rotate(Math.PI/2);
+    ctx.scale(25, 50);
+    ctx.strokeStyle = '#0f0';
+    ctx.stroke();
+    ctx.restore();
+
+    ctx.beginPath();
+    ctx.rect(-25, -12.5, 150, 75);
+    ctx.save();
+    ctx.rotate(Math.PI/2);
+    ctx.scale(25, 50);
+    ctx.strokeStyle = '#f00';
+    ctx.stroke();
+    ctx.restore();
+
+    @assert pixel 0,0 == 0,255,0,255;
+    @assert pixel 50,0 == 0,255,0,255;
+    @assert pixel 99,0 == 0,255,0,255;
+    @assert pixel 0,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 99,25 == 0,255,0,255;
+    @assert pixel 0,49 == 0,255,0,255;
+    @assert pixel 50,49 == 0,255,0,255;
+    @assert pixel 99,49 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.stroke.skew
+  desc: Strokes lines are skewed by the current transformation matrix
+  testing:
+  - 2d.path.transformation
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.save();
+    ctx.beginPath();
+    ctx.moveTo(49, -50);
+    ctx.lineTo(201, -50);
+    ctx.rotate(Math.PI/4);
+    ctx.scale(1, 283);
+    ctx.strokeStyle = '#0f0';
+    ctx.stroke();
+    ctx.restore();
+
+    ctx.save();
+    ctx.beginPath();
+    ctx.translate(-150, 0);
+    ctx.moveTo(49, -50);
+    ctx.lineTo(199, -50);
+    ctx.rotate(Math.PI/4);
+    ctx.scale(1, 142);
+    ctx.strokeStyle = '#f00';
+    ctx.stroke();
+    ctx.restore();
+
+    ctx.save();
+    ctx.beginPath();
+    ctx.translate(-150, 0);
+    ctx.moveTo(49, -50);
+    ctx.lineTo(199, -50);
+    ctx.rotate(Math.PI/4);
+    ctx.scale(1, 142);
+    ctx.strokeStyle = '#f00';
+    ctx.stroke();
+    ctx.restore();
+
+    @assert pixel 0,0 == 0,255,0,255;
+    @assert pixel 50,0 == 0,255,0,255;
+    @assert pixel 99,0 == 0,255,0,255;
+    @assert pixel 0,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 99,25 == 0,255,0,255;
+    @assert pixel 0,49 == 0,255,0,255;
+    @assert pixel 50,49 == 0,255,0,255;
+    @assert pixel 99,49 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.stroke.empty
+  desc: Empty subpaths are not stroked
+  testing:
+  - 2d.path.stroke.empty
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 100;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+
+    ctx.beginPath();
+    ctx.moveTo(40, 25);
+    ctx.moveTo(60, 25);
+    ctx.stroke();
+
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.stroke.prune.line
+  desc: Zero-length line segments from lineTo are removed before stroking
+  testing:
+  - 2d.path.stroke.prune
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 100;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+
+    ctx.beginPath();
+    ctx.moveTo(50, 25);
+    ctx.lineTo(50, 25);
+    ctx.stroke();
+
+    @assert pixel 50,25 == 0,255,0,255; @moz-todo
+  expected: green
+
+- name: 2d.path.stroke.prune.closed
+  desc: Zero-length line segments from closed paths are removed before stroking
+  testing:
+  - 2d.path.stroke.prune
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 100;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+
+    ctx.beginPath();
+    ctx.moveTo(50, 25);
+    ctx.lineTo(50, 25);
+    ctx.closePath();
+    ctx.stroke();
+
+    @assert pixel 50,25 == 0,255,0,255; @moz-todo
+  expected: green
+
+- name: 2d.path.stroke.prune.curve
+  desc: Zero-length line segments from quadraticCurveTo and bezierCurveTo are removed
+    before stroking
+  testing:
+  - 2d.path.stroke.prune
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 100;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+
+    ctx.beginPath();
+    ctx.moveTo(50, 25);
+    ctx.quadraticCurveTo(50, 25, 50, 25);
+    ctx.stroke();
+
+    ctx.beginPath();
+    ctx.moveTo(50, 25);
+    ctx.bezierCurveTo(50, 25, 50, 25, 50, 25);
+    ctx.stroke();
+
+    @assert pixel 50,25 == 0,255,0,255; @moz-todo
+  expected: green
+
+- name: 2d.path.stroke.prune.arc
+  desc: Zero-length line segments from arcTo and arc are removed before stroking
+  testing:
+  - 2d.path.stroke.prune
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 100;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+
+    ctx.beginPath();
+    ctx.moveTo(50, 25);
+    ctx.arcTo(50, 25, 150, 25, 10);
+    ctx.stroke();
+
+    ctx.beginPath();
+    ctx.moveTo(60, 25);
+    ctx.arc(50, 25, 10, 0, 0, false);
+    ctx.stroke();
+
+    @assert pixel 50,25 == 0,255,0,255; @moz-todo
+  expected: green
+
+- name: 2d.path.stroke.prune.rect
+  desc: Zero-length line segments from rect and strokeRect are removed before stroking
+  testing:
+  - 2d.path.stroke.prune
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 100;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+
+    ctx.beginPath();
+    ctx.rect(50, 25, 0, 0);
+    ctx.stroke();
+
+    ctx.strokeRect(50, 25, 0, 0);
+
+    @assert pixel 50,25 == 0,255,0,255; @moz-todo
+  expected: green
+
+- name: 2d.path.stroke.prune.corner
+  desc: Zero-length line segments are removed before stroking with miters
+  testing:
+  - 2d.path.stroke.prune
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 400;
+    ctx.lineJoin = 'miter';
+    ctx.miterLimit = 1.4;
+
+    ctx.beginPath();
+    ctx.moveTo(-1000, 200);
+    ctx.lineTo(-100, 200);
+    ctx.lineTo(-100, 200);
+    ctx.lineTo(-100, 200);
+    ctx.lineTo(-100, 1000);
+    ctx.stroke();
+
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+
+- name: 2d.path.transformation.basic
+  testing:
+  - 2d.path.transformation
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.translate(-100, 0);
+    ctx.rect(100, 0, 100, 50);
+    ctx.translate(0, -100);
+    ctx.fillStyle = '#0f0';
+    ctx.fill();
+
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.transformation.multiple
+  # TODO: change this name
+  desc: Transformations are applied while building paths, not when drawing
+  testing:
+  - 2d.path.transformation
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.fillStyle = '#f00';
+    ctx.translate(-100, 0);
+    ctx.rect(0, 0, 100, 50);
+    ctx.fill();
+    ctx.translate(100, 0);
+    ctx.fill();
+
+    ctx.beginPath();
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 50;
+    ctx.translate(0, -50);
+    ctx.moveTo(0, 25);
+    ctx.lineTo(100, 25);
+    ctx.stroke();
+    ctx.translate(0, 50);
+    ctx.stroke();
+
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.transformation.changing
+  desc: Transformations are applied while building paths, not when drawing
+  testing:
+  - 2d.path.transformation
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.moveTo(0, 0);
+    ctx.translate(100, 0);
+    ctx.lineTo(0, 0);
+    ctx.translate(0, 50);
+    ctx.lineTo(0, 0);
+    ctx.translate(-100, 0);
+    ctx.lineTo(0, 0);
+    ctx.translate(1000, 1000);
+    ctx.rotate(Math.PI/2);
+    ctx.scale(0.1, 0.1);
+    ctx.fill();
+
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+
+- name: 2d.path.clip.empty
+  testing:
+  - 2d.path.clip.basic
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.beginPath();
+    ctx.clip();
+
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.clip.basic.1
+  testing:
+  - 2d.path.clip.basic
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.beginPath();
+    ctx.rect(0, 0, 100, 50);
+    ctx.clip();
+
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.clip.basic.2
+  testing:
+  - 2d.path.clip.basic
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.beginPath();
+    ctx.rect(-100, 0, 100, 50);
+    ctx.clip();
+
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.clip.intersect
+  testing:
+  - 2d.path.clip.basic
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.beginPath();
+    ctx.rect(0, 0, 50, 50);
+    ctx.clip();
+    ctx.beginPath();
+    ctx.rect(50, 0, 50, 50)
+    ctx.clip();
+
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.clip.winding.1
+  testing:
+  - 2d.path.clip.basic
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.beginPath();
+    ctx.moveTo(-10, -10);
+    ctx.lineTo(110, -10);
+    ctx.lineTo(110, 60);
+    ctx.lineTo(-10, 60);
+    ctx.lineTo(-10, -10);
+    ctx.lineTo(0, 0);
+    ctx.lineTo(0, 50);
+    ctx.lineTo(100, 50);
+    ctx.lineTo(100, 0);
+    ctx.clip();
+
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.clip.winding.2
+  testing:
+  - 2d.path.clip.basic
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.beginPath();
+    ctx.moveTo(-10, -10);
+    ctx.lineTo(110, -10);
+    ctx.lineTo(110, 60);
+    ctx.lineTo(-10, 60);
+    ctx.lineTo(-10, -10);
+    ctx.clip();
+
+    ctx.beginPath();
+    ctx.moveTo(0, 0);
+    ctx.lineTo(0, 50);
+    ctx.lineTo(100, 50);
+    ctx.lineTo(100, 0);
+    ctx.lineTo(0, 0);
+    ctx.clip();
+
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.path.clip.unaffected
+  testing:
+  - 2d.path.clip.closed
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.fillStyle = '#0f0';
+
+    ctx.beginPath();
+    ctx.moveTo(0, 0);
+    ctx.lineTo(0, 50);
+    ctx.lineTo(100, 50);
+    ctx.lineTo(100, 0);
+    ctx.clip();
+
+    ctx.lineTo(0, 0);
+    ctx.fill();
+
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+
+
+- name: 2d.path.isPointInPath.basic.1
+  desc: isPointInPath() detects whether the point is inside the path
+  testing:
+  - 2d.path.isPointInPath
+  code: |
+    ctx.rect(0, 0, 20, 20);
+    @assert ctx.isPointInPath(10, 10) === true;
+    @assert ctx.isPointInPath(30, 10) === false;
+
+- name: 2d.path.isPointInPath.basic.2
+  desc: isPointInPath() detects whether the point is inside the path
+  testing:
+  - 2d.path.isPointInPath
+  code: |
+    ctx.rect(20, 0, 20, 20);
+    @assert ctx.isPointInPath(10, 10) === false;
+    @assert ctx.isPointInPath(30, 10) === true;
+
+- name: 2d.path.isPointInPath.edge
+  desc: isPointInPath() counts points on the path as being inside
+  testing:
+  - 2d.path.isPointInPath.edge
+  code: |
+    ctx.rect(0, 0, 20, 20);
+    @assert ctx.isPointInPath(0, 0) === true;
+    @assert ctx.isPointInPath(10, 0) === true;
+    @assert ctx.isPointInPath(20, 0) === true;
+    @assert ctx.isPointInPath(20, 10) === true;
+    @assert ctx.isPointInPath(20, 20) === true;
+    @assert ctx.isPointInPath(10, 20) === true;
+    @assert ctx.isPointInPath(0, 20) === true;
+    @assert ctx.isPointInPath(0, 10) === true;
+    @assert ctx.isPointInPath(10, -0.01) === false;
+    @assert ctx.isPointInPath(10, 20.01) === false;
+    @assert ctx.isPointInPath(-0.01, 10) === false;
+    @assert ctx.isPointInPath(20.01, 10) === false;
+
+- name: 2d.path.isPointInPath.empty
+  desc: isPointInPath() works when there is no path
+  testing:
+  - 2d.path.isPointInPath
+  code: |
+    @assert ctx.isPointInPath(0, 0) === false;
+
+- name: 2d.path.isPointInPath.subpath
+  desc: isPointInPath() uses the current path, not just the subpath
+  testing:
+  - 2d.path.isPointInPath
+  code: |
+    ctx.rect(0, 0, 20, 20);
+    ctx.beginPath();
+    ctx.rect(20, 0, 20, 20);
+    ctx.closePath();
+    ctx.rect(40, 0, 20, 20);
+    @assert ctx.isPointInPath(10, 10) === false;
+    @assert ctx.isPointInPath(30, 10) === true;
+    @assert ctx.isPointInPath(50, 10) === true;
+
+- name: 2d.path.isPointInPath.outside
+  desc: isPointInPath() works on paths outside the canvas
+  testing:
+  - 2d.path.isPointInPath
+  code: |
+    ctx.rect(0, -100, 20, 20);
+    ctx.rect(20, -10, 20, 20);
+    @assert ctx.isPointInPath(10, -110) === false;
+    @assert ctx.isPointInPath(10, -90) === true;
+    @assert ctx.isPointInPath(10, -70) === false;
+    @assert ctx.isPointInPath(30, -20) === false;
+    @assert ctx.isPointInPath(30, 0) === true;
+    @assert ctx.isPointInPath(30, 20) === false;
+
+- name: 2d.path.isPointInPath.unclosed
+  desc: isPointInPath() works on unclosed subpaths
+  testing:
+  - 2d.path.isPointInPath
+  code: |
+    ctx.moveTo(0, 0);
+    ctx.lineTo(20, 0);
+    ctx.lineTo(20, 20);
+    ctx.lineTo(0, 20);
+    @assert ctx.isPointInPath(10, 10) === true;
+    @assert ctx.isPointInPath(30, 10) === false;
+
+- name: 2d.path.isPointInPath.arc
+  desc: isPointInPath() works on arcs
+  testing:
+  - 2d.path.isPointInPath
+  code: |
+    ctx.arc(50, 25, 10, 0, Math.PI, false);
+    @assert ctx.isPointInPath(50, 10) === false;
+    @assert ctx.isPointInPath(50, 20) === false;
+    @assert ctx.isPointInPath(50, 30) === true;
+    @assert ctx.isPointInPath(50, 40) === false;
+    @assert ctx.isPointInPath(30, 20) === false;
+    @assert ctx.isPointInPath(70, 20) === false;
+    @assert ctx.isPointInPath(30, 30) === false;
+    @assert ctx.isPointInPath(70, 30) === false;
+
+- name: 2d.path.isPointInPath.bigarc
+  desc: isPointInPath() works on unclosed arcs larger than 2pi
+  opera: {bug: 320937}
+  testing:
+  - 2d.path.isPointInPath
+  code: |
+    ctx.arc(50, 25, 10, 0, 7, false);
+    @assert ctx.isPointInPath(50, 10) === false;
+    @assert ctx.isPointInPath(50, 20) === true;
+    @assert ctx.isPointInPath(50, 30) === true;
+    @assert ctx.isPointInPath(50, 40) === false;
+    @assert ctx.isPointInPath(30, 20) === false;
+    @assert ctx.isPointInPath(70, 20) === false;
+    @assert ctx.isPointInPath(30, 30) === false;
+    @assert ctx.isPointInPath(70, 30) === false;
+
+- name: 2d.path.isPointInPath.bezier
+  desc: isPointInPath() works on Bezier curves
+  testing:
+  - 2d.path.isPointInPath
+  code: |
+    ctx.moveTo(25, 25);
+    ctx.bezierCurveTo(50, -50, 50, 100, 75, 25);
+    @assert ctx.isPointInPath(25, 20) === false;
+    @assert ctx.isPointInPath(25, 30) === false;
+    @assert ctx.isPointInPath(30, 20) === true;
+    @assert ctx.isPointInPath(30, 30) === false;
+    @assert ctx.isPointInPath(40, 2) === false;
+    @assert ctx.isPointInPath(40, 20) === true;
+    @assert ctx.isPointInPath(40, 30) === false;
+    @assert ctx.isPointInPath(40, 47) === false;
+    @assert ctx.isPointInPath(45, 20) === true;
+    @assert ctx.isPointInPath(45, 30) === false;
+    @assert ctx.isPointInPath(55, 20) === false;
+    @assert ctx.isPointInPath(55, 30) === true;
+    @assert ctx.isPointInPath(60, 2) === false;
+    @assert ctx.isPointInPath(60, 20) === false;
+    @assert ctx.isPointInPath(60, 30) === true;
+    @assert ctx.isPointInPath(60, 47) === false;
+    @assert ctx.isPointInPath(70, 20) === false;
+    @assert ctx.isPointInPath(70, 30) === true;
+    @assert ctx.isPointInPath(75, 20) === false;
+    @assert ctx.isPointInPath(75, 30) === false;
+
+- name: 2d.path.isPointInPath.winding
+  desc: isPointInPath() uses the non-zero winding number rule
+  testing:
+  - 2d.path.isPointInPath
+  code: |
+    // Create a square ring, using opposite windings to make a hole in the centre
+    ctx.moveTo(0, 0);
+    ctx.lineTo(50, 0);
+    ctx.lineTo(50, 50);
+    ctx.lineTo(0, 50);
+    ctx.lineTo(0, 0);
+    ctx.lineTo(10, 10);
+    ctx.lineTo(10, 40);
+    ctx.lineTo(40, 40);
+    ctx.lineTo(40, 10);
+    ctx.lineTo(10, 10);
+
+    @assert ctx.isPointInPath(5, 5) === true;
+    @assert ctx.isPointInPath(25, 5) === true;
+    @assert ctx.isPointInPath(45, 5) === true;
+    @assert ctx.isPointInPath(5, 25) === true;
+    @assert ctx.isPointInPath(25, 25) === false;
+    @assert ctx.isPointInPath(45, 25) === true;
+    @assert ctx.isPointInPath(5, 45) === true;
+    @assert ctx.isPointInPath(25, 45) === true;
+    @assert ctx.isPointInPath(45, 45) === true;
+
+- name: 2d.path.isPointInPath.transform.1
+  desc: isPointInPath() handles transformations correctly
+  testing:
+  - 2d.path.isPointInPath
+  code: |
+    ctx.translate(50, 0);
+    ctx.rect(0, 0, 20, 20);
+    @assert ctx.isPointInPath(-40, 10) === false;
+    @assert ctx.isPointInPath(10, 10) === false;
+    @assert ctx.isPointInPath(49, 10) === false;
+    @assert ctx.isPointInPath(51, 10) === true;
+    @assert ctx.isPointInPath(69, 10) === true;
+    @assert ctx.isPointInPath(71, 10) === false;
+
+- name: 2d.path.isPointInPath.transform.2
+  desc: isPointInPath() handles transformations correctly
+  testing:
+  - 2d.path.isPointInPath
+  code: |
+    ctx.rect(50, 0, 20, 20);
+    ctx.translate(50, 0);
+    @assert ctx.isPointInPath(-40, 10) === false;
+    @assert ctx.isPointInPath(10, 10) === false;
+    @assert ctx.isPointInPath(49, 10) === false;
+    @assert ctx.isPointInPath(51, 10) === true;
+    @assert ctx.isPointInPath(69, 10) === true;
+    @assert ctx.isPointInPath(71, 10) === false;
+
+- name: 2d.path.isPointInPath.transform.3
+  desc: isPointInPath() handles transformations correctly
+  testing:
+  - 2d.path.isPointInPath
+  code: |
+    ctx.scale(-1, 1);
+    ctx.rect(-70, 0, 20, 20);
+    @assert ctx.isPointInPath(-40, 10) === false;
+    @assert ctx.isPointInPath(10, 10) === false;
+    @assert ctx.isPointInPath(49, 10) === false;
+    @assert ctx.isPointInPath(51, 10) === true;
+    @assert ctx.isPointInPath(69, 10) === true;
+    @assert ctx.isPointInPath(71, 10) === false;
+
+- name: 2d.path.isPointInPath.transform.4
+  desc: isPointInPath() handles transformations correctly
+  testing:
+  - 2d.path.isPointInPath
+  code: |
+    ctx.translate(50, 0);
+    ctx.rect(50, 0, 20, 20);
+    ctx.translate(0, 50);
+    @assert ctx.isPointInPath(60, 10) === false;
+    @assert ctx.isPointInPath(110, 10) === true;
+    @assert ctx.isPointInPath(110, 60) === false;
+
+- name: 2d.path.isPointInPath.nonfinite
+  desc: isPointInPath() returns false for non-finite arguments
+  testing:
+  - 2d.path.isPointInPath.nonfinite
+  code: |
+    ctx.rect(-100, -50, 200, 100);
+    @assert ctx.isPointInPath(Infinity, 0) === false;
+    @assert ctx.isPointInPath(-Infinity, 0) === false;
+    @assert ctx.isPointInPath(NaN, 0) === false;
+    @assert ctx.isPointInPath(0, Infinity) === false;
+    @assert ctx.isPointInPath(0, -Infinity) === false;
+    @assert ctx.isPointInPath(0, NaN) === false;
+    @assert ctx.isPointInPath(NaN, NaN) === false;
+
+
+- name: 2d.path.isPointInStroke.scaleddashes
+  desc: isPointInStroke() should return correct results on dashed paths at high scale
+    factors
+  testing:
+  - 2d.path.isPointInStroke
+  code: |
+    var scale = 20;
+    ctx.setLineDash([10, 21.4159]); // dash from t=0 to t=10 along the circle
+    ctx.scale(scale, scale);
+    ctx.ellipse(6, 10, 5, 5, 0, 2*Math.PI, false);
+    ctx.stroke();
+
+    // hit-test the beginning of the dash (t=0)
+    @assert ctx.isPointInStroke(11*scale, 10*scale) === true;
+    // hit-test the middle of the dash (t=5)
+    @assert ctx.isPointInStroke(8.70*scale, 14.21*scale) === true;
+    // hit-test the end of the dash (t=9.8)
+    @assert ctx.isPointInStroke(4.10*scale, 14.63*scale) === true;
+    // hit-test past the end of the dash (t=10.2)
+    @assert ctx.isPointInStroke(3.74*scale, 14.46*scale) === false;
+
+
+- name: 2d.path.isPointInPath.basic
+  desc: Verify the winding rule in isPointInPath works for for rect path.
+  testing:
+  - 2d.isPointInPath.basic
+  code: |
+    canvas.width = 200;
+    canvas.height = 200;
+
+    // Testing default isPointInPath
+    ctx.beginPath();
+    ctx.rect(0, 0, 100, 100);
+    ctx.rect(25, 25, 50, 50);
+    @assert ctx.isPointInPath(50, 50) === true;
+    @assert ctx.isPointInPath(NaN, 50) === false;
+    @assert ctx.isPointInPath(50, NaN) === false;
+
+    // Testing nonzero isPointInPath
+    ctx.beginPath();
+    ctx.rect(0, 0, 100, 100);
+    ctx.rect(25, 25, 50, 50);
+    @assert ctx.isPointInPath(50, 50, 'nonzero') === true;
+
+    // Testing evenodd isPointInPath
+    ctx.beginPath();
+    ctx.rect(0, 0, 100, 100);
+    ctx.rect(25, 25, 50, 50);
+    @assert ctx.isPointInPath(50, 50, 'evenodd') === false;
+
+    // Testing extremely large scale
+    ctx.save();
+    ctx.scale(Number.MAX_VALUE, Number.MAX_VALUE);
+    ctx.beginPath();
+    ctx.rect(-10, -10, 20, 20);
+    @assert ctx.isPointInPath(0, 0, 'nonzero') === true;
+    @assert ctx.isPointInPath(0, 0, 'evenodd') === true;
+    ctx.restore();
+
+    // Check with non-invertible ctm.
+    ctx.save();
+    ctx.scale(0, 0);
+    ctx.beginPath();
+    ctx.rect(-10, -10, 20, 20);
+    @assert ctx.isPointInPath(0, 0, 'nonzero') === false;
+    @assert ctx.isPointInPath(0, 0, 'evenodd') === false;
+    ctx.restore();
+
+- name: 2d.path.isPointInpath.multi.path
+  desc: Verify the winding rule in isPointInPath works for path object.
+  testing:
+  - 2d.isPointInPath.basic
+  code: |
+    canvas.width = 200;
+    canvas.height = 200;
+
+    // Testing default isPointInPath with Path object');
+    path = new Path2D();
+    path.rect(0, 0, 100, 100);
+    path.rect(25, 25, 50, 50);
+    @assert ctx.isPointInPath(path, 50, 50) === true;
+    @assert ctx.isPointInPath(path, 50, 50, undefined) === true;
+    @assert ctx.isPointInPath(path, NaN, 50) === false;
+    @assert ctx.isPointInPath(path, 50, NaN) === false;
+
+    // Testing nonzero isPointInPath with Path object');
+    path = new Path2D();
+    path.rect(0, 0, 100, 100);
+    path.rect(25, 25, 50, 50);
+    @assert ctx.isPointInPath(path, 50, 50, 'nonzero') === true;
+
+    // Testing evenodd isPointInPath with Path object');
+    path = new Path2D();
+    path.rect(0, 0, 100, 100);
+    path.rect(25, 25, 50, 50);
+    assert_false(ctx.isPointInPath(path, 50, 50, 'evenodd'));
+
+- name: 2d.path.isPointInpath.invalid
+  desc: Verify isPointInPath throws exceptions with invalid inputs.
+  testing:
+  - 2d.isPointInPath.basic
+  code: |
+    canvas.width = 200;
+    canvas.height = 200;
+    path = new Path2D();
+    path.rect(0, 0, 100, 100);
+    path.rect(25, 25, 50, 50);
+    // Testing invalid enumeration isPointInPath (w/ and w/o Path object');
+    @assert throws TypeError ctx.isPointInPath(path, 50, 50, 'gazonk');
+    @assert throws TypeError ctx.isPointInPath(50, 50, 'gazonk');
+
+    // Testing invalid type isPointInPath with Path object');
+    @assert throws TypeError ctx.isPointInPath(null, 50, 50);
+    @assert throws TypeError ctx.isPointInPath(null, 50, 50, 'nonzero');
+    @assert throws TypeError ctx.isPointInPath(null, 50, 50, 'evenodd');
+    @assert throws TypeError ctx.isPointInPath(null, 50, 50, null);
+    @assert throws TypeError ctx.isPointInPath(path, 50, 50, null);
+    @assert throws TypeError ctx.isPointInPath(undefined, 50, 50);
+    @assert throws TypeError ctx.isPointInPath(undefined, 50, 50, 'nonzero');
+    @assert throws TypeError ctx.isPointInPath(undefined, 50, 50, 'evenodd');
+    @assert throws TypeError ctx.isPointInPath(undefined, 50, 50, undefined);
+    @assert throws TypeError ctx.isPointInPath([], 50, 50);
+    @assert throws TypeError ctx.isPointInPath([], 50, 50, 'nonzero');
+    @assert throws TypeError ctx.isPointInPath([], 50, 50, 'evenodd');
+    @assert throws TypeError ctx.isPointInPath({}, 50, 50);
+    @assert throws TypeError ctx.isPointInPath({}, 50, 50, 'nonzero');
+    @assert throws TypeError ctx.isPointInPath({}, 50, 50, 'evenodd');
+
diff --git a/tests/wpt/web-platform-tests/html/canvas/tools/yaml/element/pixel-manipulation.yaml b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/element/pixel-manipulation.yaml
new file mode 100644
index 00000000000..7c642a706e8
--- /dev/null
+++ b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/element/pixel-manipulation.yaml
@@ -0,0 +1,1065 @@
+- name: 2d.imageData.create2.basic
+  desc: createImageData(sw, sh) exists and returns something
+  testing:
+  - 2d.imageData.create2.object
+  code: |
+    @assert ctx.createImageData(1, 1) !== null;
+
+- name: 2d.imageData.create1.basic
+  desc: createImageData(imgdata) exists and returns something
+  testing:
+  - 2d.imageData.create1.object
+  code: |
+    @assert ctx.createImageData(ctx.createImageData(1, 1)) !== null;
+
+- name: 2d.imageData.create2.type
+  desc: createImageData(sw, sh) returns an ImageData object containing a Uint8ClampedArray
+    object
+  testing:
+  - 2d.imageData.create2.object
+  code: |
+    @assert window.ImageData !== undefined;
+    @assert window.Uint8ClampedArray !== undefined;
+    window.ImageData.prototype.thisImplementsImageData = true;
+    window.Uint8ClampedArray.prototype.thisImplementsUint8ClampedArray = true;
+    var imgdata = ctx.createImageData(1, 1);
+    @assert imgdata.thisImplementsImageData;
+    @assert imgdata.data.thisImplementsUint8ClampedArray;
+
+- name: 2d.imageData.create1.type
+  desc: createImageData(imgdata) returns an ImageData object containing a Uint8ClampedArray
+    object
+  testing:
+  - 2d.imageData.create1.object
+  code: |
+    @assert window.ImageData !== undefined;
+    @assert window.Uint8ClampedArray !== undefined;
+    window.ImageData.prototype.thisImplementsImageData = true;
+    window.Uint8ClampedArray.prototype.thisImplementsUint8ClampedArray = true;
+    var imgdata = ctx.createImageData(ctx.createImageData(1, 1));
+    @assert imgdata.thisImplementsImageData;
+    @assert imgdata.data.thisImplementsUint8ClampedArray;
+
+- name: 2d.imageData.create2.this
+  desc: createImageData(sw, sh) should throw when called with the wrong |this|
+  notes: &bindings Defined in "Web IDL" (draft)
+  testing:
+  - 2d.imageData.create2.object
+  code: |
+    @assert throws TypeError CanvasRenderingContext2D.prototype.createImageData.call(null, 1, 1); @moz-todo
+    @assert throws TypeError CanvasRenderingContext2D.prototype.createImageData.call(undefined, 1, 1); @moz-todo
+    @assert throws TypeError CanvasRenderingContext2D.prototype.createImageData.call({}, 1, 1); @moz-todo
+
+- name: 2d.imageData.create1.this
+  desc: createImageData(imgdata) should throw when called with the wrong |this|
+  notes: *bindings
+  testing:
+  - 2d.imageData.create2.object
+  code: |
+    var imgdata = ctx.createImageData(1, 1);
+    @assert throws TypeError CanvasRenderingContext2D.prototype.createImageData.call(null, imgdata); @moz-todo
+    @assert throws TypeError CanvasRenderingContext2D.prototype.createImageData.call(undefined, imgdata); @moz-todo
+    @assert throws TypeError CanvasRenderingContext2D.prototype.createImageData.call({}, imgdata); @moz-todo
+
+- name: 2d.imageData.create2.initial
+  desc: createImageData(sw, sh) returns transparent black data of the right size
+  testing:
+  - 2d.imageData.create2.size
+  - 2d.imageData.create.initial
+  - 2d.imageData.initial
+  code: |
+    var imgdata = ctx.createImageData(10, 20);
+    @assert imgdata.data.length === imgdata.width*imgdata.height*4;
+    @assert imgdata.width < imgdata.height;
+    @assert imgdata.width > 0;
+    var isTransparentBlack = true;
+    for (var i = 0; i < imgdata.data.length; ++i)
+        if (imgdata.data[i] !== 0)
+            isTransparentBlack = false;
+    @assert isTransparentBlack;
+
+- name: 2d.imageData.create1.initial
+  desc: createImageData(imgdata) returns transparent black data of the right size
+  testing:
+  - 2d.imageData.create1.size
+  - 2d.imageData.create.initial
+  - 2d.imageData.initial
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    var imgdata1 = ctx.getImageData(0, 0, 10, 20);
+    var imgdata2 = ctx.createImageData(imgdata1);
+    @assert imgdata2.data.length === imgdata1.data.length;
+    @assert imgdata2.width === imgdata1.width;
+    @assert imgdata2.height === imgdata1.height;
+    var isTransparentBlack = true;
+    for (var i = 0; i < imgdata2.data.length; ++i)
+        if (imgdata2.data[i] !== 0)
+            isTransparentBlack = false;
+    @assert isTransparentBlack;
+
+- name: 2d.imageData.create2.large
+  desc: createImageData(sw, sh) works for sizes much larger than the canvas
+  testing:
+  - 2d.imageData.create2.size
+  code: |
+    var imgdata = ctx.createImageData(1000, 2000);
+    @assert imgdata.data.length === imgdata.width*imgdata.height*4;
+    @assert imgdata.width < imgdata.height;
+    @assert imgdata.width > 0;
+    var isTransparentBlack = true;
+    for (var i = 0; i < imgdata.data.length; i += 7813) // check ~1024 points (assuming normal scaling)
+        if (imgdata.data[i] !== 0)
+            isTransparentBlack = false;
+    @assert isTransparentBlack;
+
+- name: 2d.imageData.create2.negative
+  desc: createImageData(sw, sh) takes the absolute magnitude of the size arguments
+  testing:
+  - 2d.imageData.create2.size
+  code: |
+    var imgdata1 = ctx.createImageData(10, 20);
+    var imgdata2 = ctx.createImageData(-10, 20);
+    var imgdata3 = ctx.createImageData(10, -20);
+    var imgdata4 = ctx.createImageData(-10, -20);
+    @assert imgdata1.data.length === imgdata2.data.length;
+    @assert imgdata2.data.length === imgdata3.data.length;
+    @assert imgdata3.data.length === imgdata4.data.length;
+
+- name: 2d.imageData.create2.zero
+  desc: createImageData(sw, sh) throws INDEX_SIZE_ERR if size is zero
+  testing:
+  - 2d.imageData.getcreate.zero
+  code: |
+    @assert throws INDEX_SIZE_ERR ctx.createImageData(10, 0);
+    @assert throws INDEX_SIZE_ERR ctx.createImageData(0, 10);
+    @assert throws INDEX_SIZE_ERR ctx.createImageData(0, 0);
+    @assert throws INDEX_SIZE_ERR ctx.createImageData(0.99, 10);
+    @assert throws INDEX_SIZE_ERR ctx.createImageData(10, 0.1);
+
+- name: 2d.imageData.create2.nonfinite
+  desc: createImageData() throws TypeError if arguments are not finite
+  notes: *bindings
+  testing:
+  - 2d.imageData.getcreate.nonfinite
+  code: |
+    @nonfinite @assert throws TypeError ctx.createImageData(<10 Infinity -Infinity NaN>, <10 Infinity -Infinity NaN>);
+    var posinfobj = { valueOf: function() { return Infinity; } },
+        neginfobj = { valueOf: function() { return -Infinity; } },
+        nanobj = { valueOf: function() { return -Infinity; } };
+    @nonfinite @assert throws TypeError ctx.createImageData(<10 posinfobj neginfobj nanobj>, <10 posinfobj neginfobj nanobj>);
+
+- name: 2d.imageData.create1.zero
+  desc: createImageData(null) throws TypeError
+  testing:
+  - 2d.imageData.create.null
+  code: |
+    @assert throws TypeError ctx.createImageData(null);
+
+- name: 2d.imageData.create2.double
+  desc: createImageData(w, h) double is converted to long
+  testing:
+  - 2d.imageData.create2.size
+  code: |
+    var imgdata1 = ctx.createImageData(10.01, 10.99);
+    var imgdata2 = ctx.createImageData(-10.01, -10.99);
+    @assert imgdata1.width === 10;
+    @assert imgdata1.height === 10;
+    @assert imgdata2.width === 10;
+    @assert imgdata2.height === 10;
+
+- name: 2d.imageData.create.and.resize
+  desc: Verify no crash when resizing an image bitmap to zero.
+  testing:
+  - 2d.imageData.resize
+  images:
+  - red.png
+  code: |
+    var image = new Image();
+    image.onload = t.step_func(function() {
+      var options = { resizeHeight: 0 };
+      var p1 = createImageBitmap(image, options);
+      p1.catch(function(error){});
+      t.done();
+    });
+    image.src = 'red.png';
+
+- name: 2d.imageData.get.basic
+  desc: getImageData() exists and returns something
+  testing:
+  - 2d.imageData.get.basic
+  code: |
+    @assert ctx.getImageData(0, 0, 100, 50) !== null;
+
+- name: 2d.imageData.get.type
+  desc: getImageData() returns an ImageData object containing a Uint8ClampedArray
+    object
+  testing:
+  - 2d.imageData.get.object
+  code: |
+    @assert window.ImageData !== undefined;
+    @assert window.Uint8ClampedArray !== undefined;
+    window.ImageData.prototype.thisImplementsImageData = true;
+    window.Uint8ClampedArray.prototype.thisImplementsUint8ClampedArray = true;
+    var imgdata = ctx.getImageData(0, 0, 1, 1);
+    @assert imgdata.thisImplementsImageData;
+    @assert imgdata.data.thisImplementsUint8ClampedArray;
+
+- name: 2d.imageData.get.zero
+  desc: getImageData() throws INDEX_SIZE_ERR if size is zero
+  testing:
+  - 2d.imageData.getcreate.zero
+  code: |
+    @assert throws INDEX_SIZE_ERR ctx.getImageData(1, 1, 10, 0);
+    @assert throws INDEX_SIZE_ERR ctx.getImageData(1, 1, 0, 10);
+    @assert throws INDEX_SIZE_ERR ctx.getImageData(1, 1, 0, 0);
+    @assert throws INDEX_SIZE_ERR ctx.getImageData(1, 1, 0.1, 10);
+    @assert throws INDEX_SIZE_ERR ctx.getImageData(1, 1, 10, 0.99);
+    @assert throws INDEX_SIZE_ERR ctx.getImageData(1, 1, -0.1, 10);
+    @assert throws INDEX_SIZE_ERR ctx.getImageData(1, 1, 10, -0.99);
+
+- name: 2d.imageData.get.nonfinite
+  desc: getImageData() throws TypeError if arguments are not finite
+  notes: *bindings
+  testing:
+  - 2d.imageData.getcreate.nonfinite
+  code: |
+    @nonfinite @assert throws TypeError ctx.getImageData(<10 Infinity -Infinity NaN>, <10 Infinity -Infinity NaN>, <10 Infinity -Infinity NaN>, <10 Infinity -Infinity NaN>);
+    var posinfobj = { valueOf: function() { return Infinity; } },
+        neginfobj = { valueOf: function() { return -Infinity; } },
+        nanobj = { valueOf: function() { return -Infinity; } };
+    @nonfinite @assert throws TypeError ctx.getImageData(<10 posinfobj neginfobj nanobj>, <10 posinfobj neginfobj nanobj>, <10 posinfobj neginfobj nanobj>, <10 posinfobj neginfobj nanobj>);
+
+- name: 2d.imageData.get.source.outside
+  desc: getImageData() returns transparent black outside the canvas
+  testing:
+  - 2d.imageData.get.basic
+  - 2d.imageData.get.outside
+  code: |
+    ctx.fillStyle = '#08f';
+    ctx.fillRect(0, 0, 100, 50);
+
+    var imgdata1 = ctx.getImageData(-10, 5, 1, 1);
+    @assert imgdata1.data[0] === 0;
+    @assert imgdata1.data[1] === 0;
+    @assert imgdata1.data[2] === 0;
+    @assert imgdata1.data[3] === 0;
+
+    var imgdata2 = ctx.getImageData(10, -5, 1, 1);
+    @assert imgdata2.data[0] === 0;
+    @assert imgdata2.data[1] === 0;
+    @assert imgdata2.data[2] === 0;
+    @assert imgdata2.data[3] === 0;
+
+    var imgdata3 = ctx.getImageData(200, 5, 1, 1);
+    @assert imgdata3.data[0] === 0;
+    @assert imgdata3.data[1] === 0;
+    @assert imgdata3.data[2] === 0;
+    @assert imgdata3.data[3] === 0;
+
+    var imgdata4 = ctx.getImageData(10, 60, 1, 1);
+    @assert imgdata4.data[0] === 0;
+    @assert imgdata4.data[1] === 0;
+    @assert imgdata4.data[2] === 0;
+    @assert imgdata4.data[3] === 0;
+
+    var imgdata5 = ctx.getImageData(100, 10, 1, 1);
+    @assert imgdata5.data[0] === 0;
+    @assert imgdata5.data[1] === 0;
+    @assert imgdata5.data[2] === 0;
+    @assert imgdata5.data[3] === 0;
+
+    var imgdata6 = ctx.getImageData(0, 10, 1, 1);
+    @assert imgdata6.data[0] === 0;
+    @assert imgdata6.data[1] === 136;
+    @assert imgdata6.data[2] === 255;
+    @assert imgdata6.data[3] === 255;
+
+    var imgdata7 = ctx.getImageData(-10, 10, 20, 20);
+    @assert imgdata7.data[ 0*4+0] === 0;
+    @assert imgdata7.data[ 0*4+1] === 0;
+    @assert imgdata7.data[ 0*4+2] === 0;
+    @assert imgdata7.data[ 0*4+3] === 0;
+    @assert imgdata7.data[ 9*4+0] === 0;
+    @assert imgdata7.data[ 9*4+1] === 0;
+    @assert imgdata7.data[ 9*4+2] === 0;
+    @assert imgdata7.data[ 9*4+3] === 0;
+    @assert imgdata7.data[10*4+0] === 0;
+    @assert imgdata7.data[10*4+1] === 136;
+    @assert imgdata7.data[10*4+2] === 255;
+    @assert imgdata7.data[10*4+3] === 255;
+    @assert imgdata7.data[19*4+0] === 0;
+    @assert imgdata7.data[19*4+1] === 136;
+    @assert imgdata7.data[19*4+2] === 255;
+    @assert imgdata7.data[19*4+3] === 255;
+    @assert imgdata7.data[20*4+0] === 0;
+    @assert imgdata7.data[20*4+1] === 0;
+    @assert imgdata7.data[20*4+2] === 0;
+    @assert imgdata7.data[20*4+3] === 0;
+
+- name: 2d.imageData.get.source.negative
+  desc: getImageData() works with negative width and height, and returns top-to-bottom
+    left-to-right
+  testing:
+  - 2d.imageData.get.basic
+  - 2d.pixelarray.order
+  code: |
+    ctx.fillStyle = '#000';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#fff';
+    ctx.fillRect(20, 10, 60, 10);
+
+    var imgdata1 = ctx.getImageData(85, 25, -10, -10);
+    @assert imgdata1.data[0] === 255;
+    @assert imgdata1.data[1] === 255;
+    @assert imgdata1.data[2] === 255;
+    @assert imgdata1.data[3] === 255;
+    @assert imgdata1.data[imgdata1.data.length-4+0] === 0;
+    @assert imgdata1.data[imgdata1.data.length-4+1] === 0;
+    @assert imgdata1.data[imgdata1.data.length-4+2] === 0;
+    @assert imgdata1.data[imgdata1.data.length-4+3] === 255;
+
+    var imgdata2 = ctx.getImageData(0, 0, -1, -1);
+    @assert imgdata2.data[0] === 0;
+    @assert imgdata2.data[1] === 0;
+    @assert imgdata2.data[2] === 0;
+    @assert imgdata2.data[3] === 0;
+
+- name: 2d.imageData.get.source.size
+  desc: getImageData() returns bigger ImageData for bigger source rectangle
+  testing:
+  - 2d.imageData.get.basic
+  code: |
+    var imgdata1 = ctx.getImageData(0, 0, 10, 10);
+    var imgdata2 = ctx.getImageData(0, 0, 20, 20);
+    @assert imgdata2.width > imgdata1.width;
+    @assert imgdata2.height > imgdata1.height;
+
+- name: 2d.imageData.get.double
+  desc: createImageData(w, h) double is converted to long
+  testing:
+  - 2d.imageData.get.basic
+  code: |
+    var imgdata1 = ctx.getImageData(0, 0, 10.01, 10.99);
+    var imgdata2 = ctx.getImageData(0, 0, -10.01, -10.99);
+    @assert imgdata1.width === 10;
+    @assert imgdata1.height === 10;
+    @assert imgdata2.width === 10;
+    @assert imgdata2.height === 10;
+
+- name: 2d.imageData.get.nonpremul
+  desc: getImageData() returns non-premultiplied colours
+  testing:
+  - 2d.imageData.get.premul
+  code: |
+    ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
+    ctx.fillRect(0, 0, 100, 50);
+    var imgdata = ctx.getImageData(10, 10, 10, 10);
+    @assert imgdata.data[0] > 200;
+    @assert imgdata.data[1] > 200;
+    @assert imgdata.data[2] > 200;
+    @assert imgdata.data[3] > 100;
+    @assert imgdata.data[3] < 200;
+
+- name: 2d.imageData.get.range
+  desc: getImageData() returns values in the range [0, 255]
+  testing:
+  - 2d.pixelarray.range
+  - 2d.pixelarray.retrieve
+  code: |
+    ctx.fillStyle = '#000';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#fff';
+    ctx.fillRect(20, 10, 60, 10);
+    var imgdata1 = ctx.getImageData(10, 5, 1, 1);
+    @assert imgdata1.data[0] === 0;
+    var imgdata2 = ctx.getImageData(30, 15, 1, 1);
+    @assert imgdata2.data[0] === 255;
+
+- name: 2d.imageData.get.clamp
+  desc: getImageData() clamps colours to the range [0, 255]
+  testing:
+  - 2d.pixelarray.range
+  code: |
+    ctx.fillStyle = 'rgb(-100, -200, -300)';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = 'rgb(256, 300, 400)';
+    ctx.fillRect(20, 10, 60, 10);
+    var imgdata1 = ctx.getImageData(10, 5, 1, 1);
+    @assert imgdata1.data[0] === 0;
+    @assert imgdata1.data[1] === 0;
+    @assert imgdata1.data[2] === 0;
+    var imgdata2 = ctx.getImageData(30, 15, 1, 1);
+    @assert imgdata2.data[0] === 255;
+    @assert imgdata2.data[1] === 255;
+    @assert imgdata2.data[2] === 255;
+
+- name: 2d.imageData.get.length
+  desc: getImageData() returns a correctly-sized Uint8ClampedArray
+  testing:
+  - 2d.pixelarray.length
+  code: |
+    var imgdata = ctx.getImageData(0, 0, 10, 10);
+    @assert imgdata.data.length === imgdata.width*imgdata.height*4;
+
+- name: 2d.imageData.get.order.cols
+  desc: getImageData() returns leftmost columns first
+  testing:
+  - 2d.pixelarray.order
+  code: |
+    ctx.fillStyle = '#fff';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#000';
+    ctx.fillRect(0, 0, 2, 50);
+    var imgdata = ctx.getImageData(0, 0, 10, 10);
+    @assert imgdata.data[0] === 0;
+    @assert imgdata.data[Math.round(imgdata.width/2*4)] === 255;
+    @assert imgdata.data[Math.round((imgdata.height/2)*imgdata.width*4)] === 0;
+
+- name: 2d.imageData.get.order.rows
+  desc: getImageData() returns topmost rows first
+  testing:
+  - 2d.pixelarray.order
+  code: |
+    ctx.fillStyle = '#fff';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#000';
+    ctx.fillRect(0, 0, 100, 2);
+    var imgdata = ctx.getImageData(0, 0, 10, 10);
+    @assert imgdata.data[0] === 0;
+    @assert imgdata.data[Math.floor(imgdata.width/2*4)] === 0;
+    @assert imgdata.data[(imgdata.height/2)*imgdata.width*4] === 255;
+
+- name: 2d.imageData.get.order.rgb
+  desc: getImageData() returns R then G then B
+  testing:
+  - 2d.pixelarray.order
+  - 2d.pixelarray.indexes
+  code: |
+    ctx.fillStyle = '#48c';
+    ctx.fillRect(0, 0, 100, 50);
+    var imgdata = ctx.getImageData(0, 0, 10, 10);
+    @assert imgdata.data[0] === 0x44;
+    @assert imgdata.data[1] === 0x88;
+    @assert imgdata.data[2] === 0xCC;
+    @assert imgdata.data[3] === 255;
+    @assert imgdata.data[4] === 0x44;
+    @assert imgdata.data[5] === 0x88;
+    @assert imgdata.data[6] === 0xCC;
+    @assert imgdata.data[7] === 255;
+
+- name: 2d.imageData.get.order.alpha
+  desc: getImageData() returns A in the fourth component
+  testing:
+  - 2d.pixelarray.order
+  code: |
+    ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
+    ctx.fillRect(0, 0, 100, 50);
+    var imgdata = ctx.getImageData(0, 0, 10, 10);
+    @assert imgdata.data[3] < 200;
+    @assert imgdata.data[3] > 100;
+
+- name: 2d.imageData.get.unaffected
+  desc: getImageData() is not affected by context state
+  testing:
+  - 2d.imageData.unaffected
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 50, 50)
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(50, 0, 50, 50)
+    ctx.save();
+    ctx.translate(50, 0);
+    ctx.globalAlpha = 0.1;
+    ctx.globalCompositeOperation = 'destination-atop';
+    ctx.shadowColor = '#f00';
+    ctx.rect(0, 0, 5, 5);
+    ctx.clip();
+    var imgdata = ctx.getImageData(0, 0, 50, 50);
+    ctx.restore();
+    ctx.putImageData(imgdata, 50, 0);
+    @assert pixel 25,25 ==~ 0,255,0,255;
+    @assert pixel 75,25 ==~ 0,255,0,255;
+  expected: green
+
+
+- name: 2d.imageData.get.large.crash
+  desc: Test that canvas crash when image data cannot be allocated.
+  testing:
+  - 2d.getImageData
+  code: |
+    @assert throws TypeError ctx.getImageData(10, 0xffffffff, 2147483647, 10);
+
+- name: 2d.imageData.get.rounding
+  desc: Test the handling of non-integer source coordinates in getImageData().
+  testing:
+  - 2d.getImageData
+  code: |
+    function testDimensions(sx, sy, sw, sh, width, height)
+    {
+        imageData = ctx.getImageData(sx, sy, sw, sh);
+        @assert imageData.width == width;
+        @assert imageData.height == height;
+    }
+
+    testDimensions(0, 0, 20, 10, 20, 10);
+
+    testDimensions(.1, .2, 20, 10, 20, 10);
+    testDimensions(.9, .8, 20, 10, 20, 10);
+
+    testDimensions(0, 0, 20.9, 10.9, 20, 10);
+    testDimensions(0, 0, 20.1, 10.1, 20, 10);
+
+    testDimensions(-1, -1, 20, 10, 20, 10);
+
+    testDimensions(-1.1, 0, 20, 10, 20, 10);
+    testDimensions(-1.9,  0, 20, 10, 20, 10);
+
+- name: 2d.imageData.get.invalid
+  desc: Verify getImageData() behavior in invalid cases.
+  testing:
+  - 2d.imageData.get.invalid
+  code: |
+    imageData = ctx.getImageData(0,0,2,2);
+    var testValues = [NaN, true, false, "\"garbage\"", "-1",
+                      "0", "1", "2", Infinity, -Infinity,
+                      -5, -0.5, 0, 0.5, 5,
+                      5.4, 255, 256, null, undefined];
+    var testResults = [0, 1, 0, 0, 0,
+                       0, 1, 2, 255, 0,
+                       0, 0, 0, 0, 5,
+                       5, 255, 255, 0, 0];
+    for (var i = 0; i < testValues.length; i++) {
+        imageData.data[0] = testValues[i];
+        @assert imageData.data[0] == testResults[i];
+    }
+    imageData.data['foo']='garbage';
+    @assert imageData.data['foo'] == 'garbage';
+    imageData.data[-1]='garbage';
+    @assert imageData.data[-1] == undefined;
+    imageData.data[17]='garbage';
+    @assert imageData.data[17] == undefined;
+
+- name: 2d.imageData.object.properties
+  desc: ImageData objects have the right properties
+  testing:
+  - 2d.imageData.type
+  code: |
+    var imgdata = ctx.getImageData(0, 0, 10, 10);
+    @assert typeof(imgdata.width) === 'number';
+    @assert typeof(imgdata.height) === 'number';
+    @assert typeof(imgdata.data) === 'object';
+
+- name: 2d.imageData.object.readonly
+  desc: ImageData objects properties are read-only
+  testing:
+  - 2d.imageData.type
+  code: |
+    var imgdata = ctx.getImageData(0, 0, 10, 10);
+    var w = imgdata.width;
+    var h = imgdata.height;
+    var d = imgdata.data;
+    imgdata.width = 123;
+    imgdata.height = 123;
+    imgdata.data = [100,100,100,100];
+    @assert imgdata.width === w;
+    @assert imgdata.height === h;
+    @assert imgdata.data === d;
+    @assert imgdata.data[0] === 0;
+    @assert imgdata.data[1] === 0;
+    @assert imgdata.data[2] === 0;
+    @assert imgdata.data[3] === 0;
+
+- name: 2d.imageData.object.ctor.size
+  desc: ImageData has a usable constructor
+  testing:
+  - 2d.imageData.type
+  code: |
+    @assert window.ImageData !== undefined;
+
+    var imgdata = new window.ImageData(2, 3);
+    @assert imgdata.width === 2;
+    @assert imgdata.height === 3;
+    @assert imgdata.data.length === 2 * 3 * 4;
+    for (var i = 0; i < imgdata.data.length; ++i) {
+      @assert imgdata.data[i] === 0;
+    }
+
+- name: 2d.imageData.object.ctor.size.bounds
+  desc: ImageData has a usable constructor
+  testing:
+  - 2d.imageData.type
+  code: |
+    @assert window.ImageData !== undefined;
+    @assert throws INDEX_SIZE_ERR new window.ImageData(0, 0);
+    @assert throws INDEX_SIZE_ERR new window.ImageData(0, 1);
+    @assert throws INDEX_SIZE_ERR new window.ImageData(1, 0);
+
+- name: 2d.imageData.object.ctor.array
+  desc: ImageData has a usable constructor
+  testing:
+  - 2d.imageData.type
+  code: |
+    @assert window.ImageData !== undefined;
+
+    var array = new Uint8ClampedArray(8);
+    var imgdata = new window.ImageData(array, 1, 2);
+    @assert imgdata.width === 1;
+    @assert imgdata.height === 2;
+    @assert imgdata.data === array;
+
+- name: 2d.imageData.object.ctor.array.bounds
+  desc: ImageData has a usable constructor
+  testing:
+  - 2d.imageData.type
+  code: |
+    @assert window.ImageData !== undefined;
+
+    @assert throws INVALID_STATE_ERR new ImageData(new Uint8ClampedArray(0), 1);
+    @assert throws INVALID_STATE_ERR new ImageData(new Uint8ClampedArray(3), 1);
+    @assert throws INDEX_SIZE_ERR new ImageData(new Uint8ClampedArray(4), 0);
+    @assert throws INDEX_SIZE_ERR new ImageData(new Uint8ClampedArray(4), 1, 2);
+    @assert throws TypeError new ImageData(new Uint8Array(8), 1, 2);
+    @assert throws TypeError new ImageData(new Int8Array(8), 1, 2);
+
+- name: 2d.imageData.object.set
+  desc: ImageData.data can be modified
+  testing:
+  - 2d.pixelarray.modify
+  code: |
+    var imgdata = ctx.getImageData(0, 0, 10, 10);
+    imgdata.data[0] = 100;
+    @assert imgdata.data[0] === 100;
+    imgdata.data[0] = 200;
+    @assert imgdata.data[0] === 200;
+
+- name: 2d.imageData.object.undefined
+  desc: ImageData.data converts undefined to 0
+  testing:
+  - 2d.pixelarray.modify
+  webidl:
+  - es-octet
+  code: |
+    var imgdata = ctx.getImageData(0, 0, 10, 10);
+    imgdata.data[0] = 100;
+    imgdata.data[0] = undefined;
+    @assert imgdata.data[0] === 0;
+
+- name: 2d.imageData.object.nan
+  desc: ImageData.data converts NaN to 0
+  testing:
+  - 2d.pixelarray.modify
+  webidl:
+  - es-octet
+  code: |
+    var imgdata = ctx.getImageData(0, 0, 10, 10);
+    imgdata.data[0] = 100;
+    imgdata.data[0] = NaN;
+    @assert imgdata.data[0] === 0;
+    imgdata.data[0] = 100;
+    imgdata.data[0] = "cheese";
+    @assert imgdata.data[0] === 0;
+
+- name: 2d.imageData.object.string
+  desc: ImageData.data converts strings to numbers with ToNumber
+  testing:
+  - 2d.pixelarray.modify
+  webidl:
+  - es-octet
+  code: |
+    var imgdata = ctx.getImageData(0, 0, 10, 10);
+    imgdata.data[0] = 100;
+    imgdata.data[0] = "110";
+    @assert imgdata.data[0] === 110;
+    imgdata.data[0] = 100;
+    imgdata.data[0] = "0x78";
+    @assert imgdata.data[0] === 120;
+    imgdata.data[0] = 100;
+    imgdata.data[0] = " +130e0 ";
+    @assert imgdata.data[0] === 130;
+
+- name: 2d.imageData.object.clamp
+  desc: ImageData.data clamps numbers to [0, 255]
+  testing:
+  - 2d.pixelarray.modify
+  webidl:
+  - es-octet
+  code: |
+    var imgdata = ctx.getImageData(0, 0, 10, 10);
+
+    imgdata.data[0] = 100;
+    imgdata.data[0] = 300;
+    @assert imgdata.data[0] === 255;
+    imgdata.data[0] = 100;
+    imgdata.data[0] = -100;
+    @assert imgdata.data[0] === 0;
+
+    imgdata.data[0] = 100;
+    imgdata.data[0] = 200+Math.pow(2, 32);
+    @assert imgdata.data[0] === 255;
+    imgdata.data[0] = 100;
+    imgdata.data[0] = -200-Math.pow(2, 32);
+    @assert imgdata.data[0] === 0;
+
+    imgdata.data[0] = 100;
+    imgdata.data[0] = Math.pow(10, 39);
+    @assert imgdata.data[0] === 255;
+    imgdata.data[0] = 100;
+    imgdata.data[0] = -Math.pow(10, 39);
+    @assert imgdata.data[0] === 0;
+
+    imgdata.data[0] = 100;
+    imgdata.data[0] = -Infinity;
+    @assert imgdata.data[0] === 0;
+    imgdata.data[0] = 100;
+    imgdata.data[0] = Infinity;
+    @assert imgdata.data[0] === 255;
+
+- name: 2d.imageData.object.round
+  desc: ImageData.data rounds numbers with round-to-zero
+  testing:
+  - 2d.pixelarray.modify
+  webidl:
+  - es-octet
+  code: |
+    var imgdata = ctx.getImageData(0, 0, 10, 10);
+    imgdata.data[0] = 0.499;
+    @assert imgdata.data[0] === 0;
+    imgdata.data[0] = 0.5;
+    @assert imgdata.data[0] === 0;
+    imgdata.data[0] = 0.501;
+    @assert imgdata.data[0] === 1;
+    imgdata.data[0] = 1.499;
+    @assert imgdata.data[0] === 1;
+    imgdata.data[0] = 1.5;
+    @assert imgdata.data[0] === 2;
+    imgdata.data[0] = 1.501;
+    @assert imgdata.data[0] === 2;
+    imgdata.data[0] = 2.5;
+    @assert imgdata.data[0] === 2;
+    imgdata.data[0] = 3.5;
+    @assert imgdata.data[0] === 4;
+    imgdata.data[0] = 252.5;
+    @assert imgdata.data[0] === 252;
+    imgdata.data[0] = 253.5;
+    @assert imgdata.data[0] === 254;
+    imgdata.data[0] = 254.5;
+    @assert imgdata.data[0] === 254;
+    imgdata.data[0] = 256.5;
+    @assert imgdata.data[0] === 255;
+    imgdata.data[0] = -0.5;
+    @assert imgdata.data[0] === 0;
+    imgdata.data[0] = -1.5;
+    @assert imgdata.data[0] === 0;
+
+
+
+- name: 2d.imageData.put.null
+  desc: putImageData() with null imagedata throws TypeError
+  testing:
+  - 2d.imageData.put.wrongtype
+  code: |
+    @assert throws TypeError ctx.putImageData(null, 0, 0);
+
+- name: 2d.imageData.put.nonfinite
+  desc: putImageData() throws TypeError if arguments are not finite
+  notes: *bindings
+  testing:
+  - 2d.imageData.put.nonfinite
+  code: |
+    var imgdata = ctx.getImageData(0, 0, 10, 10);
+    @nonfinite @assert throws TypeError ctx.putImageData(<imgdata>, <10 Infinity -Infinity NaN>, <10 Infinity -Infinity NaN>);
+    @nonfinite @assert throws TypeError ctx.putImageData(<imgdata>, <10 Infinity -Infinity NaN>, <10 Infinity -Infinity NaN>, <10 Infinity -Infinity NaN>, <10 Infinity -Infinity NaN>, <10 Infinity -Infinity NaN>, <10 Infinity -Infinity NaN>);
+
+- name: 2d.imageData.put.basic
+  desc: putImageData() puts image data from getImageData() onto the canvas
+  testing:
+  - 2d.imageData.put.normal
+  - 2d.imageData.put.3arg
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50)
+    var imgdata = ctx.getImageData(0, 0, 100, 50);
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50)
+    ctx.putImageData(imgdata, 0, 0);
+    @assert pixel 50,25 ==~ 0,255,0,255;
+  expected: green
+
+- name: 2d.imageData.put.created
+  desc: putImageData() puts image data from createImageData() onto the canvas
+  testing:
+  - 2d.imageData.put.normal
+  code: |
+    var imgdata = ctx.createImageData(100, 50);
+    for (var i = 0; i < imgdata.data.length; i += 4) {
+        imgdata.data[i] = 0;
+        imgdata.data[i+1] = 255;
+        imgdata.data[i+2] = 0;
+        imgdata.data[i+3] = 255;
+    }
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50)
+    ctx.putImageData(imgdata, 0, 0);
+    @assert pixel 50,25 ==~ 0,255,0,255;
+  expected: green
+
+- name: 2d.imageData.put.wrongtype
+  desc: putImageData() does not accept non-ImageData objects
+  testing:
+  - 2d.imageData.put.wrongtype
+  code: |
+    var imgdata = { width: 1, height: 1, data: [255, 0, 0, 255] };
+    @assert throws TypeError ctx.putImageData(imgdata, 0, 0);
+    @assert throws TypeError ctx.putImageData("cheese", 0, 0);
+    @assert throws TypeError ctx.putImageData(42, 0, 0);
+  expected: green
+
+- name: 2d.imageData.put.cross
+  desc: putImageData() accepts image data got from a different canvas
+  testing:
+  - 2d.imageData.put.normal
+  code: |
+    var canvas2 = document.createElement('canvas');
+    var ctx2 = canvas2.getContext('2d');
+    ctx2.fillStyle = '#0f0';
+    ctx2.fillRect(0, 0, 100, 50)
+    var imgdata = ctx2.getImageData(0, 0, 100, 50);
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50)
+    ctx.putImageData(imgdata, 0, 0);
+    @assert pixel 50,25 ==~ 0,255,0,255;
+  expected: green
+
+- name: 2d.imageData.put.alpha
+  desc: putImageData() puts non-solid image data correctly
+  testing:
+  - 2d.imageData.put.normal
+  code: |
+    ctx.fillStyle = 'rgba(0, 255, 0, 0.25)';
+    ctx.fillRect(0, 0, 100, 50)
+    var imgdata = ctx.getImageData(0, 0, 100, 50);
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50)
+    ctx.putImageData(imgdata, 0, 0);
+    @assert pixel 50,25 ==~ 0,255,0,64;
+  expected: |
+    size 100 50
+    cr.set_source_rgba(0, 1, 0, 0.25)
+    cr.rectangle(0, 0, 100, 50)
+    cr.fill()
+
+- name: 2d.imageData.put.modified
+  desc: putImageData() puts modified image data correctly
+  testing:
+  - 2d.imageData.put.normal
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50)
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(45, 20, 10, 10)
+    var imgdata = ctx.getImageData(45, 20, 10, 10);
+    for (var i = 0, len = imgdata.width*imgdata.height*4; i < len; i += 4)
+    {
+        imgdata.data[i] = 0;
+        imgdata.data[i+1] = 255;
+    }
+    ctx.putImageData(imgdata, 45, 20);
+    @assert pixel 50,25 ==~ 0,255,0,255;
+  expected: green
+
+- name: 2d.imageData.put.dirty.zero
+  desc: putImageData() with zero-sized dirty rectangle puts nothing
+  testing:
+  - 2d.imageData.put.normal
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50)
+    var imgdata = ctx.getImageData(0, 0, 100, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50)
+    ctx.putImageData(imgdata, 0, 0, 0, 0, 0, 0);
+    @assert pixel 50,25 ==~ 0,255,0,255;
+  expected: green
+
+- name: 2d.imageData.put.dirty.rect1
+  desc: putImageData() only modifies areas inside the dirty rectangle, using width
+    and height
+  testing:
+  - 2d.imageData.put.normal
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50)
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 20, 20)
+
+    var imgdata = ctx.getImageData(0, 0, 100, 50);
+
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50)
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(40, 20, 20, 20)
+    ctx.putImageData(imgdata, 40, 20, 0, 0, 20, 20);
+
+    @assert pixel 50,25 ==~ 0,255,0,255;
+    @assert pixel 35,25 ==~ 0,255,0,255;
+    @assert pixel 65,25 ==~ 0,255,0,255;
+    @assert pixel 50,15 ==~ 0,255,0,255;
+    @assert pixel 50,45 ==~ 0,255,0,255;
+  expected: green
+
+- name: 2d.imageData.put.dirty.rect2
+  desc: putImageData() only modifies areas inside the dirty rectangle, using x and
+    y
+  testing:
+  - 2d.imageData.put.normal
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50)
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(60, 30, 20, 20)
+
+    var imgdata = ctx.getImageData(0, 0, 100, 50);
+
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50)
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(40, 20, 20, 20)
+    ctx.putImageData(imgdata, -20, -10, 60, 30, 20, 20);
+
+    @assert pixel 50,25 ==~ 0,255,0,255;
+    @assert pixel 35,25 ==~ 0,255,0,255;
+    @assert pixel 65,25 ==~ 0,255,0,255;
+    @assert pixel 50,15 ==~ 0,255,0,255;
+    @assert pixel 50,45 ==~ 0,255,0,255;
+  expected: green
+
+- name: 2d.imageData.put.dirty.negative
+  desc: putImageData() handles negative-sized dirty rectangles correctly
+  testing:
+  - 2d.imageData.put.normal
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50)
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 20, 20)
+
+    var imgdata = ctx.getImageData(0, 0, 100, 50);
+
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50)
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(40, 20, 20, 20)
+    ctx.putImageData(imgdata, 40, 20, 20, 20, -20, -20);
+
+    @assert pixel 50,25 ==~ 0,255,0,255;
+    @assert pixel 35,25 ==~ 0,255,0,255;
+    @assert pixel 65,25 ==~ 0,255,0,255;
+    @assert pixel 50,15 ==~ 0,255,0,255;
+    @assert pixel 50,45 ==~ 0,255,0,255;
+  expected: green
+
+- name: 2d.imageData.put.dirty.outside
+  desc: putImageData() handles dirty rectangles outside the canvas correctly
+  testing:
+  - 2d.imageData.put.normal
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50)
+
+    var imgdata = ctx.getImageData(0, 0, 100, 50);
+
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50)
+
+    ctx.putImageData(imgdata, 100, 20, 20, 20, -20, -20);
+    ctx.putImageData(imgdata, 200, 200, 0, 0, 100, 50);
+    ctx.putImageData(imgdata, 40, 20, -30, -20, 30, 20);
+    ctx.putImageData(imgdata, -30, 20, 0, 0, 30, 20);
+
+    @assert pixel 50,25 ==~ 0,255,0,255;
+    @assert pixel 98,15 ==~ 0,255,0,255;
+    @assert pixel 98,25 ==~ 0,255,0,255;
+    @assert pixel 98,45 ==~ 0,255,0,255;
+    @assert pixel 1,5 ==~ 0,255,0,255;
+    @assert pixel 1,25 ==~ 0,255,0,255;
+    @assert pixel 1,45 ==~ 0,255,0,255;
+  expected: green
+
+- name: 2d.imageData.put.unchanged
+  desc: putImageData(getImageData(...), ...) has no effect
+  testing:
+  - 2d.imageData.unchanged
+  code: |
+    var i = 0;
+    for (var y = 0; y < 16; ++y) {
+        for (var x = 0; x < 16; ++x, ++i) {
+            ctx.fillStyle = 'rgba(' + i + ',' + (Math.floor(i*1.5) % 256) + ',' + (Math.floor(i*23.3) % 256) + ',' + (i/256) + ')';
+            ctx.fillRect(x, y, 1, 1);
+        }
+    }
+    var imgdata1 = ctx.getImageData(0.1, 0.2, 15.8, 15.9);
+    var olddata = [];
+    for (var i = 0; i < imgdata1.data.length; ++i)
+        olddata[i] = imgdata1.data[i];
+
+    ctx.putImageData(imgdata1, 0.1, 0.2);
+
+    var imgdata2 = ctx.getImageData(0.1, 0.2, 15.8, 15.9);
+    for (var i = 0; i < imgdata2.data.length; ++i) {
+        @assert olddata[i] === imgdata2.data[i];
+    }
+
+- name: 2d.imageData.put.unaffected
+  desc: putImageData() is not affected by context state
+  testing:
+  - 2d.imageData.unaffected
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50)
+    var imgdata = ctx.getImageData(0, 0, 100, 50);
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50)
+    ctx.globalAlpha = 0.1;
+    ctx.globalCompositeOperation = 'destination-atop';
+    ctx.shadowColor = '#f00';
+    ctx.shadowBlur = 1;
+    ctx.translate(100, 50);
+    ctx.scale(0.1, 0.1);
+    ctx.putImageData(imgdata, 0, 0);
+    @assert pixel 50,25 ==~ 0,255,0,255;
+  expected: green
+
+- name: 2d.imageData.put.clip
+  desc: putImageData() is not affected by clipping regions
+  testing:
+  - 2d.imageData.unaffected
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50)
+    var imgdata = ctx.getImageData(0, 0, 100, 50);
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50)
+    ctx.beginPath();
+    ctx.rect(0, 0, 50, 50);
+    ctx.clip();
+    ctx.putImageData(imgdata, 0, 0);
+    @assert pixel 25,25 ==~ 0,255,0,255;
+    @assert pixel 75,25 ==~ 0,255,0,255;
+  expected: green
+
+- name: 2d.imageData.put.path
+  desc: putImageData() does not affect the current path
+  testing:
+  - 2d.imageData.put.normal
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50)
+    ctx.rect(0, 0, 100, 50);
+    var imgdata = ctx.getImageData(0, 0, 100, 50);
+    ctx.putImageData(imgdata, 0, 0);
+    ctx.fillStyle = '#0f0';
+    ctx.fill();
+    @assert pixel 50,25 ==~ 0,255,0,255;
+  expected: green
+
diff --git a/tests/wpt/web-platform-tests/html/canvas/tools/yaml/element/scroll.yaml b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/element/scroll.yaml
new file mode 100644
index 00000000000..4c1ec563de7
--- /dev/null
+++ b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/element/scroll.yaml
@@ -0,0 +1,76 @@
+- name: 2d.scrollPathIntoView.basic
+  desc: scrollPathIntoView() works
+  testing:
+  - 2d.scrollPathIntoView.basic
+  code: |
+    var div = document.createElement('div');
+    div.style.cssText = 'width: 200vw; height: 200vh';
+    document.body.appendChild(div);
+    canvas.style.cssText = 'position: absolute; top: 100px; left: 200px; border: none;';
+    window.scrollTo(0, 0);
+
+    ctx.beginPath();
+    ctx.rect(4, 8, 16, 32);
+    ctx.scrollPathIntoView();
+    var rect = canvas.getBoundingClientRect();
+    @assert Math.round(rect.top) === -8;
+    @assert Math.round(rect.left) === 200;
+
+- name: 2d.scrollPathIntoView.verticalLR
+  desc: scrollPathIntoView() works in vertical-lr writing mode
+  testing:
+  - 2d.scrollPathIntoView.basic
+  code: |
+    document.documentElement.style.cssText = 'writing-mode: vertical-lr';
+    var div = document.createElement('div');
+    div.style.cssText = 'width: 200vw; height: 200vh';
+    document.body.appendChild(div);
+    canvas.style.cssText = 'position: absolute; top: 100px; left: 200px; border: none;';
+    window.scrollTo(0, 0);
+
+    ctx.beginPath();
+    ctx.rect(4, 8, 16, 32);
+    ctx.scrollPathIntoView();
+    var rect = canvas.getBoundingClientRect();
+    @assert Math.round(rect.top) === 100;
+    @assert Math.round(rect.left) === -4;
+
+- name: 2d.scrollPathIntoView.verticalRL
+  desc: scrollPathIntoView() works in vertical-rl writing mode
+  testing:
+  - 2d.scrollPathIntoView.basic
+  code: |
+    document.documentElement.style.cssText = 'writing-mode: vertical-rl';
+    var div = document.createElement('div');
+    div.style.cssText = 'width: 200vw; height: 200vh';
+    document.body.appendChild(div);
+    canvas.style.cssText = 'position: absolute; top: 100px; right: 200px; border: none;';
+    window.scrollTo(0, 0);
+
+    ctx.beginPath();
+    ctx.rect(4, 8, 16, 32);
+    ctx.scrollPathIntoView();
+    var rect = canvas.getBoundingClientRect();
+    var viewportWidth = document.scrollingElement.clientWidth;
+    var canvasWidth = canvas.width;
+    @assert Math.round(rect.top) === 100;
+    @assert Math.round(rect.right) === viewportWidth + (canvasWidth - 4 - 16);
+
+- name: 2d.scrollPathIntoView.path
+  desc: scrollPathIntoView() with path argument works
+  testing:
+  - 2d.scrollPathIntoView.basic
+  code: |
+    var div = document.createElement('div');
+    div.style.cssText = 'width: 200vw; height: 200vh';
+    document.body.appendChild(div);
+    canvas.style.cssText = 'position: absolute; top: 100px; left: 200px; border: none;';
+    window.scrollTo(0, 0);
+
+    var path = new Path2D();
+    path.rect(4, 8, 16, 32);
+    ctx.scrollPathIntoView(path);
+    var rect = canvas.getBoundingClientRect();
+    @assert Math.round(rect.top) === -8;
+    @assert Math.round(rect.left) === 200;
+
diff --git a/tests/wpt/web-platform-tests/html/canvas/tools/yaml/element/shadows.yaml b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/element/shadows.yaml
new file mode 100644
index 00000000000..284047c0bb6
--- /dev/null
+++ b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/element/shadows.yaml
@@ -0,0 +1,1192 @@
+- name: 2d.shadow.attributes.shadowBlur.initial
+  testing:
+  - 2d.shadow.blur.get
+  - 2d.shadow.blur.initial
+  code: |
+    @assert ctx.shadowBlur === 0;
+
+- name: 2d.shadow.attributes.shadowBlur.valid
+  testing:
+  - 2d.shadow.blur.get
+  - 2d.shadow.blur.set
+  code: |
+    ctx.shadowBlur = 1;
+    @assert ctx.shadowBlur === 1;
+
+    ctx.shadowBlur = 0.5;
+    @assert ctx.shadowBlur === 0.5;
+
+    ctx.shadowBlur = 1e6;
+    @assert ctx.shadowBlur === 1e6;
+
+    ctx.shadowBlur = 0;
+    @assert ctx.shadowBlur === 0;
+
+- name: 2d.shadow.attributes.shadowBlur.invalid
+  testing:
+  - 2d.shadow.blur.invalid
+  code: |
+    ctx.shadowBlur = 1;
+    ctx.shadowBlur = -2;
+    @assert ctx.shadowBlur === 1;
+
+    ctx.shadowBlur = 1;
+    ctx.shadowBlur = Infinity;
+    @assert ctx.shadowBlur === 1;
+
+    ctx.shadowBlur = 1;
+    ctx.shadowBlur = -Infinity;
+    @assert ctx.shadowBlur === 1;
+
+    ctx.shadowBlur = 1;
+    ctx.shadowBlur = NaN;
+    @assert ctx.shadowBlur === 1;
+
+    ctx.shadowBlur = 1;
+    ctx.shadowBlur = 'string';
+    @assert ctx.shadowBlur === 1;
+
+    ctx.shadowBlur = 1;
+    ctx.shadowBlur = true;
+    @assert ctx.shadowBlur === 1;
+
+    ctx.shadowBlur = 1;
+    ctx.shadowBlur = false;
+    @assert ctx.shadowBlur === 0;
+
+- name: 2d.shadow.attributes.shadowOffset.initial
+  testing:
+  - 2d.shadow.offset.initial
+  code: |
+    @assert ctx.shadowOffsetX === 0;
+    @assert ctx.shadowOffsetY === 0;
+
+- name: 2d.shadow.attributes.shadowOffset.valid
+  testing:
+  - 2d.shadow.offset.get
+  - 2d.shadow.offset.set
+  code: |
+    ctx.shadowOffsetX = 1;
+    ctx.shadowOffsetY = 2;
+    @assert ctx.shadowOffsetX === 1;
+    @assert ctx.shadowOffsetY === 2;
+
+    ctx.shadowOffsetX = 0.5;
+    ctx.shadowOffsetY = 0.25;
+    @assert ctx.shadowOffsetX === 0.5;
+    @assert ctx.shadowOffsetY === 0.25;
+
+    ctx.shadowOffsetX = -0.5;
+    ctx.shadowOffsetY = -0.25;
+    @assert ctx.shadowOffsetX === -0.5;
+    @assert ctx.shadowOffsetY === -0.25;
+
+    ctx.shadowOffsetX = 0;
+    ctx.shadowOffsetY = 0;
+    @assert ctx.shadowOffsetX === 0;
+    @assert ctx.shadowOffsetY === 0;
+
+    ctx.shadowOffsetX = 1e6;
+    ctx.shadowOffsetY = 1e6;
+    @assert ctx.shadowOffsetX === 1e6;
+    @assert ctx.shadowOffsetY === 1e6;
+
+- name: 2d.shadow.attributes.shadowOffset.invalid
+  testing:
+  - 2d.shadow.offset.invalid
+  code: |
+    ctx.shadowOffsetX = 1;
+    ctx.shadowOffsetY = 2;
+    ctx.shadowOffsetX = Infinity;
+    ctx.shadowOffsetY = Infinity;
+    @assert ctx.shadowOffsetX === 1;
+    @assert ctx.shadowOffsetY === 2;
+
+    ctx.shadowOffsetX = 1;
+    ctx.shadowOffsetY = 2;
+    ctx.shadowOffsetX = -Infinity;
+    ctx.shadowOffsetY = -Infinity;
+    @assert ctx.shadowOffsetX === 1;
+    @assert ctx.shadowOffsetY === 2;
+
+    ctx.shadowOffsetX = 1;
+    ctx.shadowOffsetY = 2;
+    ctx.shadowOffsetX = NaN;
+    ctx.shadowOffsetY = NaN;
+    @assert ctx.shadowOffsetX === 1;
+    @assert ctx.shadowOffsetY === 2;
+
+    ctx.shadowOffsetX = 1;
+    ctx.shadowOffsetY = 2;
+    ctx.shadowOffsetX = 'string';
+    ctx.shadowOffsetY = 'string';
+    @assert ctx.shadowOffsetX === 1;
+    @assert ctx.shadowOffsetY === 2;
+
+    ctx.shadowOffsetX = 1;
+    ctx.shadowOffsetY = 2;
+    ctx.shadowOffsetX = true;
+    ctx.shadowOffsetY = true;
+    @assert ctx.shadowOffsetX === 1;
+    @assert ctx.shadowOffsetY === 1;
+
+    ctx.shadowOffsetX = 1;
+    ctx.shadowOffsetY = 2;
+    ctx.shadowOffsetX = false;
+    ctx.shadowOffsetY = false;
+    @assert ctx.shadowOffsetX === 0;
+    @assert ctx.shadowOffsetY === 0;
+
+- name: 2d.shadow.attributes.shadowColor.initial
+  testing:
+  - 2d.shadow.color.initial
+  code: |
+    @assert ctx.shadowColor === 'rgba(0, 0, 0, 0)';
+
+- name: 2d.shadow.attributes.shadowColor.valid
+  testing:
+  - 2d.shadow.color.get
+  - 2d.shadow.color.set
+  code: |
+    ctx.shadowColor = 'lime';
+    @assert ctx.shadowColor === '#00ff00';
+
+    ctx.shadowColor = 'RGBA(0,255, 0,0)';
+    @assert ctx.shadowColor === 'rgba(0, 255, 0, 0)';
+
+- name: 2d.shadow.attributes.shadowColor.invalid
+  testing:
+  - 2d.shadow.color.invalid
+  code: |
+    ctx.shadowColor = '#00ff00';
+    ctx.shadowColor = 'bogus';
+    @assert ctx.shadowColor === '#00ff00';
+
+    ctx.shadowColor = '#00ff00';
+    ctx.shadowColor = 'red bogus';
+    @assert ctx.shadowColor === '#00ff00';
+
+    ctx.shadowColor = '#00ff00';
+    ctx.shadowColor = ctx;
+    @assert ctx.shadowColor === '#00ff00';
+
+    ctx.shadowColor = '#00ff00';
+    ctx.shadowColor = undefined;
+    @assert ctx.shadowColor === '#00ff00';
+
+- name: 2d.shadow.enable.off.1
+  desc: Shadows are not drawn when only shadowColor is set
+  testing:
+  - 2d.shadow.enable
+  - 2d.shadow.render
+  code: |
+    ctx.shadowColor = '#f00';
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.shadow.enable.off.2
+  desc: Shadows are not drawn when only shadowColor is set
+  testing:
+  - 2d.shadow.enable
+  - 2d.shadow.render
+  code: |
+    ctx.globalCompositeOperation = 'destination-atop';
+    ctx.shadowColor = '#f00';
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.shadow.enable.blur
+  desc: Shadows are drawn if shadowBlur is set
+  testing:
+  - 2d.shadow.enable
+  - 2d.shadow.render
+  code: |
+    ctx.globalCompositeOperation = 'destination-atop';
+    ctx.shadowColor = '#0f0';
+    ctx.shadowBlur = 0.1;
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.shadow.enable.x
+  desc: Shadows are drawn if shadowOffsetX is set
+  testing:
+  - 2d.shadow.enable
+  - 2d.shadow.render
+  code: |
+    ctx.globalCompositeOperation = 'destination-atop';
+    ctx.shadowColor = '#0f0';
+    ctx.shadowOffsetX = 0.1;
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.shadow.enable.y
+  desc: Shadows are drawn if shadowOffsetY is set
+  testing:
+  - 2d.shadow.enable
+  - 2d.shadow.render
+  code: |
+    ctx.globalCompositeOperation = 'destination-atop';
+    ctx.shadowColor = '#0f0';
+    ctx.shadowOffsetY = 0.1;
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.shadow.offset.positiveX
+  desc: Shadows can be offset with positive x
+  testing:
+  - 2d.shadow.render
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.shadowColor = '#0f0';
+    ctx.shadowOffsetX = 50;
+    ctx.fillRect(0, 0, 50, 50);
+    @assert pixel 25,25 == 0,255,0,255;
+    @assert pixel 75,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.shadow.offset.negativeX
+  desc: Shadows can be offset with negative x
+  testing:
+  - 2d.shadow.render
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.shadowColor = '#0f0';
+    ctx.shadowOffsetX = -50;
+    ctx.fillRect(50, 0, 50, 50);
+    @assert pixel 25,25 == 0,255,0,255;
+    @assert pixel 75,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.shadow.offset.positiveY
+  desc: Shadows can be offset with positive y
+  testing:
+  - 2d.shadow.render
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.shadowColor = '#0f0';
+    ctx.shadowOffsetY = 25;
+    ctx.fillRect(0, 0, 100, 25);
+    @assert pixel 50,12 == 0,255,0,255;
+    @assert pixel 50,37 == 0,255,0,255;
+  expected: green
+
+- name: 2d.shadow.offset.negativeY
+  desc: Shadows can be offset with negative y
+  testing:
+  - 2d.shadow.render
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.shadowColor = '#0f0';
+    ctx.shadowOffsetY = -25;
+    ctx.fillRect(0, 25, 100, 25);
+    @assert pixel 50,12 == 0,255,0,255;
+    @assert pixel 50,37 == 0,255,0,255;
+  expected: green
+
+- name: 2d.shadow.outside
+  desc: Shadows of shapes outside the visible area can be offset onto the visible
+    area
+  testing:
+  - 2d.shadow.render
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.shadowColor = '#0f0';
+    ctx.shadowOffsetX = 100;
+    ctx.fillRect(-100, 0, 25, 50);
+    ctx.shadowOffsetX = -100;
+    ctx.fillRect(175, 0, 25, 50);
+    ctx.shadowOffsetX = 0;
+    ctx.shadowOffsetY = 100;
+    ctx.fillRect(25, -100, 50, 25);
+    ctx.shadowOffsetY = -100;
+    ctx.fillRect(25, 125, 50, 25);
+    @assert pixel 12,25 == 0,255,0,255;
+    @assert pixel 87,25 == 0,255,0,255;
+    @assert pixel 50,12 == 0,255,0,255;
+    @assert pixel 50,37 == 0,255,0,255;
+  expected: green
+
+- name: 2d.shadow.clip.1
+  desc: Shadows of clipped shapes are still drawn within the clipping region
+  testing:
+  - 2d.shadow.render
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 50, 50);
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(50, 0, 50, 50);
+
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(50, 0, 50, 50);
+    ctx.clip();
+    ctx.shadowColor = '#0f0';
+    ctx.shadowOffsetX = 50;
+    ctx.fillRect(0, 0, 50, 50);
+    ctx.restore();
+
+    @assert pixel 25,25 == 0,255,0,255;
+    @assert pixel 75,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.shadow.clip.2
+  desc: Shadows are not drawn outside the clipping region
+  testing:
+  - 2d.shadow.render
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 50, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(50, 0, 50, 50);
+
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(0, 0, 50, 50);
+    ctx.clip();
+    ctx.shadowColor = '#f00';
+    ctx.shadowOffsetX = 50;
+    ctx.fillRect(0, 0, 50, 50);
+    ctx.restore();
+
+    @assert pixel 25,25 == 0,255,0,255;
+    @assert pixel 75,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.shadow.clip.3
+  desc: Shadows of clipped shapes are still drawn within the clipping region
+  testing:
+  - 2d.shadow.render
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 50, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(50, 0, 50, 50);
+
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(0, 0, 50, 50);
+    ctx.clip();
+    ctx.fillStyle = '#f00';
+    ctx.shadowColor = '#0f0';
+    ctx.shadowOffsetX = 50;
+    ctx.fillRect(-50, 0, 50, 50);
+    ctx.restore();
+
+    @assert pixel 25,25 == 0,255,0,255;
+    @assert pixel 75,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.shadow.stroke.basic
+  desc: Shadows are drawn for strokes
+  testing:
+  - 2d.shadow.render
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#f00';
+    ctx.shadowColor = '#0f0';
+    ctx.shadowOffsetY = 50;
+    ctx.beginPath();
+    ctx.lineWidth = 50;
+    ctx.moveTo(0, -25);
+    ctx.lineTo(100, -25);
+    ctx.stroke();
+
+    @assert pixel 1,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 98,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.shadow.stroke.cap.1
+  desc: Shadows are not drawn for areas outside stroke caps
+  testing:
+  - 2d.shadow.render
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#f00';
+    ctx.shadowColor = '#f00';
+    ctx.shadowOffsetY = 50;
+    ctx.beginPath();
+    ctx.lineWidth = 50;
+    ctx.lineCap = 'butt';
+    ctx.moveTo(-50, -25);
+    ctx.lineTo(0, -25);
+    ctx.moveTo(100, -25);
+    ctx.lineTo(150, -25);
+    ctx.stroke();
+
+    @assert pixel 1,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 98,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.shadow.stroke.cap.2
+  desc: Shadows are drawn for stroke caps
+  testing:
+  - 2d.shadow.render
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#f00';
+    ctx.shadowColor = '#0f0';
+    ctx.shadowOffsetY = 50;
+    ctx.beginPath();
+    ctx.lineWidth = 50;
+    ctx.lineCap = 'square';
+    ctx.moveTo(25, -25);
+    ctx.lineTo(75, -25);
+    ctx.stroke();
+
+    @assert pixel 1,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 98,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.shadow.stroke.join.1
+  desc: Shadows are not drawn for areas outside stroke joins
+  testing:
+  - 2d.shadow.render
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#f00';
+    ctx.shadowColor = '#f00';
+    ctx.shadowOffsetX = 100;
+    ctx.lineWidth = 200;
+    ctx.lineJoin = 'bevel';
+    ctx.beginPath();
+    ctx.moveTo(-200, -50);
+    ctx.lineTo(-150, -50);
+    ctx.lineTo(-151, -100);
+    ctx.stroke();
+
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 48,48 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.shadow.stroke.join.2
+  desc: Shadows are drawn for stroke joins
+  testing:
+  - 2d.shadow.render
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 50, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(50, 0, 50, 50);
+    ctx.strokeStyle = '#f00';
+    ctx.shadowColor = '#0f0';
+    ctx.shadowOffsetX = 100;
+    ctx.lineWidth = 200;
+    ctx.lineJoin = 'miter';
+    ctx.beginPath();
+    ctx.moveTo(-200, -50);
+    ctx.lineTo(-150, -50);
+    ctx.lineTo(-151, -100);
+    ctx.stroke();
+
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 48,48 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.shadow.stroke.join.3
+  desc: Shadows are drawn for stroke joins respecting miter limit
+  testing:
+  - 2d.shadow.render
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#f00';
+    ctx.shadowColor = '#f00';
+    ctx.shadowOffsetX = 100;
+    ctx.lineWidth = 200;
+    ctx.lineJoin = 'miter';
+    ctx.miterLimit = 0.1;
+    ctx.beginPath();
+    ctx.moveTo(-200, -50);
+    ctx.lineTo(-150, -50);
+    ctx.lineTo(-151, -100); // (not an exact right angle, to avoid some other bug in Firefox 3)
+    ctx.stroke();
+
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 48,48 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+  expected: green
+
+- name: 2d.shadow.image.basic
+  desc: Shadows are drawn for images
+  testing:
+  - 2d.shadow.render
+  images:
+  - red.png
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.shadowColor = '#0f0';
+    ctx.shadowOffsetY = 50;
+    ctx.drawImage(document.getElementById('red.png'), 0, -50);
+
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.shadow.image.transparent.1
+  desc: Shadows are not drawn for transparent images
+  testing:
+  - 2d.shadow.render
+  images:
+  - transparent.png
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.shadowColor = '#f00';
+    ctx.shadowOffsetY = 50;
+    ctx.drawImage(document.getElementById('transparent.png'), 0, -50);
+
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.shadow.image.transparent.2
+  desc: Shadows are not drawn for transparent parts of images
+  testing:
+  - 2d.shadow.render
+  images:
+  - redtransparent.png
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 50, 50);
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(50, 0, 50, 50);
+    ctx.shadowOffsetY = 50;
+    ctx.shadowColor = '#0f0';
+    ctx.drawImage(document.getElementById('redtransparent.png'), 50, -50);
+    ctx.shadowColor = '#f00';
+    ctx.drawImage(document.getElementById('redtransparent.png'), -50, -50);
+
+    @assert pixel 25,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 75,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.shadow.image.alpha
+  desc: Shadows are drawn correctly for partially-transparent images
+  testing:
+  - 2d.shadow.render
+  images:
+  - transparent50.png
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.shadowOffsetY = 50;
+    ctx.shadowColor = '#00f';
+    ctx.drawImage(document.getElementById('transparent50.png'), 0, -50);
+
+    @assert pixel 50,25 ==~ 127,0,127,255;
+  expected: |
+    size 100 50
+    cr.set_source_rgb(0.5, 0, 0.5)
+    cr.rectangle(0, 0, 100, 50)
+    cr.fill()
+
+- name: 2d.shadow.image.section
+  desc: Shadows are not drawn for areas outside image source rectangles
+  testing:
+  - 2d.shadow.render
+  images:
+  - redtransparent.png
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.shadowOffsetY = 50;
+    ctx.shadowColor = '#f00';
+    ctx.drawImage(document.getElementById('redtransparent.png'), 50, 0, 50, 50, 0, -50, 50, 50);
+
+    @assert pixel 25,25 ==~ 0,255,0,255;
+    @assert pixel 50,25 ==~ 0,255,0,255;
+    @assert pixel 75,25 ==~ 0,255,0,255;
+  expected: green
+
+- name: 2d.shadow.image.scale
+  desc: Shadows are drawn correctly for scaled images
+  testing:
+  - 2d.shadow.render
+  images:
+  - redtransparent.png
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.shadowOffsetY = 50;
+    ctx.shadowColor = '#0f0';
+    ctx.drawImage(document.getElementById('redtransparent.png'), 0, 0, 100, 50, -10, -50, 240, 50);
+
+    @assert pixel 25,25 ==~ 0,255,0,255;
+    @assert pixel 50,25 ==~ 0,255,0,255;
+    @assert pixel 75,25 ==~ 0,255,0,255;
+  expected: green
+
+- name: 2d.shadow.canvas.basic
+  desc: Shadows are drawn for canvases
+  testing:
+  - 2d.shadow.render
+  code: |
+    var canvas2 = document.createElement('canvas');
+    canvas2.width = 100;
+    canvas2.height = 50;
+    var ctx2 = canvas2.getContext('2d');
+    ctx2.fillStyle = '#f00';
+    ctx2.fillRect(0, 0, 100, 50);
+
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.shadowColor = '#0f0';
+    ctx.shadowOffsetY = 50;
+    ctx.drawImage(canvas2, 0, -50);
+
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.shadow.canvas.transparent.1
+  desc: Shadows are not drawn for transparent canvases
+  testing:
+  - 2d.shadow.render
+  code: |
+    var canvas2 = document.createElement('canvas');
+    canvas2.width = 100;
+    canvas2.height = 50;
+    var ctx2 = canvas2.getContext('2d');
+
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.shadowColor = '#f00';
+    ctx.shadowOffsetY = 50;
+    ctx.drawImage(canvas2, 0, -50);
+
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.shadow.canvas.transparent.2
+  desc: Shadows are not drawn for transparent parts of canvases
+  testing:
+  - 2d.shadow.render
+  code: |
+    var canvas2 = document.createElement('canvas');
+    canvas2.width = 100;
+    canvas2.height = 50;
+    var ctx2 = canvas2.getContext('2d');
+    ctx2.fillStyle = '#f00';
+    ctx2.fillRect(0, 0, 50, 50);
+
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 50, 50);
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(50, 0, 50, 50);
+    ctx.shadowOffsetY = 50;
+    ctx.shadowColor = '#0f0';
+    ctx.drawImage(canvas2, 50, -50);
+    ctx.shadowColor = '#f00';
+    ctx.drawImage(canvas2, -50, -50);
+
+    @assert pixel 25,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 75,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.shadow.canvas.alpha
+  desc: Shadows are drawn correctly for partially-transparent canvases
+  testing:
+  - 2d.shadow.render
+  images:
+  - transparent50.png
+  code: |
+    var canvas2 = document.createElement('canvas');
+    canvas2.width = 100;
+    canvas2.height = 50;
+    var ctx2 = canvas2.getContext('2d');
+    ctx2.fillStyle = 'rgba(255, 0, 0, 0.5)';
+    ctx2.fillRect(0, 0, 100, 50);
+
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.shadowOffsetY = 50;
+    ctx.shadowColor = '#00f';
+    ctx.drawImage(canvas2, 0, -50);
+
+    @assert pixel 50,25 ==~ 127,0,127,255;
+  expected: |
+    size 100 50
+    cr.set_source_rgb(0.5, 0, 0.5)
+    cr.rectangle(0, 0, 100, 50)
+    cr.fill()
+
+- name: 2d.shadow.pattern.basic
+  desc: Shadows are drawn for fill patterns
+  testing:
+  - 2d.shadow.render
+  # http://bugs.webkit.org/show_bug.cgi?id=15266
+  images:
+  - red.png
+  code: |
+    var pattern = ctx.createPattern(document.getElementById('red.png'), 'repeat');
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.shadowColor = '#0f0';
+    ctx.shadowOffsetY = 50;
+    ctx.fillStyle = pattern;
+    ctx.fillRect(0, -50, 100, 50);
+
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.shadow.pattern.transparent.1
+  desc: Shadows are not drawn for transparent fill patterns
+  testing:
+  - 2d.shadow.render
+  # http://bugs.webkit.org/show_bug.cgi?id=15266
+  images:
+  - transparent.png
+  code: |
+    var pattern = ctx.createPattern(document.getElementById('transparent.png'), 'repeat');
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.shadowColor = '#f00';
+    ctx.shadowOffsetY = 50;
+    ctx.fillStyle = pattern;
+    ctx.fillRect(0, -50, 100, 50);
+
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.shadow.pattern.transparent.2
+  desc: Shadows are not drawn for transparent parts of fill patterns
+  testing:
+  - 2d.shadow.render
+  # http://bugs.webkit.org/show_bug.cgi?id=15266
+  images:
+  - redtransparent.png
+  code: |
+    var pattern = ctx.createPattern(document.getElementById('redtransparent.png'), 'repeat');
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 50, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(50, 0, 50, 50);
+    ctx.shadowOffsetY = 50;
+    ctx.shadowColor = '#0f0';
+    ctx.fillStyle = pattern;
+    ctx.fillRect(0, -50, 100, 50);
+
+    @assert pixel 25,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 75,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.shadow.pattern.alpha
+  desc: Shadows are drawn correctly for partially-transparent fill patterns
+  testing:
+  - 2d.shadow.render
+  # http://bugs.webkit.org/show_bug.cgi?id=15266
+  images:
+  - transparent50.png
+  code: |
+    var pattern = ctx.createPattern(document.getElementById('transparent50.png'), 'repeat');
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.shadowOffsetY = 50;
+    ctx.shadowColor = '#00f';
+    ctx.fillStyle = pattern;
+    ctx.fillRect(0, -50, 100, 50);
+
+    @assert pixel 50,25 ==~ 127,0,127,255;
+  expected: |
+    size 100 50
+    cr.set_source_rgb(0.5, 0, 0.5)
+    cr.rectangle(0, 0, 100, 50)
+    cr.fill()
+
+- name: 2d.shadow.gradient.basic
+  desc: Shadows are drawn for gradient fills
+  testing:
+  - 2d.shadow.render
+  # http://bugs.webkit.org/show_bug.cgi?id=15266
+  code: |
+    var gradient = ctx.createLinearGradient(0, 0, 100, 0);
+    gradient.addColorStop(0, '#f00');
+    gradient.addColorStop(1, '#f00');
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.shadowColor = '#0f0';
+    ctx.shadowOffsetY = 50;
+    ctx.fillStyle = gradient;
+    ctx.fillRect(0, -50, 100, 50);
+
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.shadow.gradient.transparent.1
+  desc: Shadows are not drawn for transparent gradient fills
+  testing:
+  - 2d.shadow.render
+  # http://bugs.webkit.org/show_bug.cgi?id=15266
+  code: |
+    var gradient = ctx.createLinearGradient(0, 0, 100, 0);
+    gradient.addColorStop(0, 'rgba(0,0,0,0)');
+    gradient.addColorStop(1, 'rgba(0,0,0,0)');
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.shadowColor = '#f00';
+    ctx.shadowOffsetY = 50;
+    ctx.fillStyle = gradient;
+    ctx.fillRect(0, -50, 100, 50);
+
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.shadow.gradient.transparent.2
+  desc: Shadows are not drawn for transparent parts of gradient fills
+  testing:
+  - 2d.shadow.render
+  # http://bugs.webkit.org/show_bug.cgi?id=15266
+  code: |
+    var gradient = ctx.createLinearGradient(0, 0, 100, 0);
+    gradient.addColorStop(0, '#f00');
+    gradient.addColorStop(0.499, '#f00');
+    gradient.addColorStop(0.5, 'rgba(0,0,0,0)');
+    gradient.addColorStop(1, 'rgba(0,0,0,0)');
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 50, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(50, 0, 50, 50);
+    ctx.shadowOffsetY = 50;
+    ctx.shadowColor = '#0f0';
+    ctx.fillStyle = gradient;
+    ctx.fillRect(0, -50, 100, 50);
+
+    @assert pixel 25,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 75,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.shadow.gradient.alpha
+  desc: Shadows are drawn correctly for partially-transparent gradient fills
+  testing:
+  - 2d.shadow.render
+  # http://bugs.webkit.org/show_bug.cgi?id=15266
+  code: |
+    var gradient = ctx.createLinearGradient(0, 0, 100, 0);
+    gradient.addColorStop(0, 'rgba(255,0,0,0.5)');
+    gradient.addColorStop(1, 'rgba(255,0,0,0.5)');
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.shadowOffsetY = 50;
+    ctx.shadowColor = '#00f';
+    ctx.fillStyle = gradient;
+    ctx.fillRect(0, -50, 100, 50);
+
+    @assert pixel 50,25 ==~ 127,0,127,255;
+  expected: |
+    size 100 50
+    cr.set_source_rgb(0.5, 0, 0.5)
+    cr.rectangle(0, 0, 100, 50)
+    cr.fill()
+
+- name: 2d.shadow.transform.1
+  desc: Shadows take account of transformations
+  testing:
+  - 2d.shadow.render
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.shadowOffsetY = 50;
+    ctx.shadowColor = '#0f0';
+    ctx.translate(100, 100);
+    ctx.fillRect(-100, -150, 100, 50);
+
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.shadow.transform.2
+  desc: Shadow offsets are not affected by transformations
+  testing:
+  - 2d.shadow.render
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.shadowOffsetY = 50;
+    ctx.shadowColor = '#0f0';
+    ctx.rotate(Math.PI)
+    ctx.fillRect(-100, 0, 100, 50);
+
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.shadow.blur.low
+  desc: Shadows look correct for small blurs
+  manual:
+  testing:
+  - 2d.shadow.render
+  code: |
+    ctx.fillStyle = '#ff0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.shadowColor = '#00f';
+    ctx.shadowOffsetY = 25;
+    for (var x = 0; x < 100; ++x) {
+        ctx.save();
+        ctx.beginPath();
+        ctx.rect(x, 0, 1, 50);
+        ctx.clip();
+        ctx.shadowBlur = x;
+        ctx.fillRect(-200, -200, 500, 200);
+        ctx.restore();
+    }
+  expected: |
+    size 100 50
+    import math
+    cr.set_source_rgb(0, 0, 1)
+    cr.rectangle(0, 0, 1, 25)
+    cr.fill()
+    cr.set_source_rgb(1, 1, 0)
+    cr.rectangle(0, 25, 1, 25)
+    cr.fill()
+    for x in range(1, 100):
+        sigma = x/2.0
+        filter = []
+        for i in range(-24, 26):
+            filter.append(math.exp(-i*i / (2*sigma*sigma)) / (math.sqrt(2*math.pi)*sigma))
+        accum = [0]
+        for f in filter:
+            accum.append(accum[-1] + f)
+        for y in range(0, 50):
+            cr.set_source_rgb(accum[y], accum[y], 1-accum[y])
+            cr.rectangle(x, y, 1, 1)
+            cr.fill()
+
+- name: 2d.shadow.blur.high
+  desc: Shadows look correct for large blurs
+  manual:
+  testing:
+  - 2d.shadow.render
+  code: |
+    ctx.fillStyle = '#ff0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.shadowColor = '#00f';
+    ctx.shadowOffsetY = 0;
+    ctx.shadowBlur = 100;
+    ctx.fillRect(-200, -200, 200, 400);
+  expected: |
+    size 100 50
+    import math
+    sigma = 100.0/2
+    filter = []
+    for i in range(-200, 100):
+        filter.append(math.exp(-i*i / (2*sigma*sigma)) / (math.sqrt(2*math.pi)*sigma))
+    accum = [0]
+    for f in filter:
+        accum.append(accum[-1] + f)
+    for x in range(0, 100):
+        cr.set_source_rgb(accum[x+200], accum[x+200], 1-accum[x+200])
+        cr.rectangle(x, 0, 1, 50)
+        cr.fill()
+
+- name: 2d.shadow.alpha.1
+  desc: Shadow colour alpha components are used
+  testing:
+  - 2d.shadow.render
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.shadowColor = 'rgba(255, 0, 0, 0.01)';
+    ctx.shadowOffsetY = 50;
+    ctx.fillRect(0, -50, 100, 50);
+
+    @assert pixel 50,25 ==~ 0,255,0,255 +/- 4;
+  expected: green
+
+- name: 2d.shadow.alpha.2
+  desc: Shadow colour alpha components are used
+  testing:
+  - 2d.shadow.render
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.shadowColor = 'rgba(0, 0, 255, 0.5)';
+    ctx.shadowOffsetY = 50;
+    ctx.fillRect(0, -50, 100, 50);
+
+    @assert pixel 50,25 ==~ 127,0,127,255;
+  expected: |
+    size 100 50
+    cr.set_source_rgb(0.5, 0, 0.5)
+    cr.rectangle(0, 0, 100, 50)
+    cr.fill()
+
+- name: 2d.shadow.alpha.3
+  desc: Shadows are affected by globalAlpha
+  testing:
+  - 2d.shadow.render
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#f00'; // (work around broken Firefox globalAlpha caching)
+    ctx.shadowColor = '#00f';
+    ctx.shadowOffsetY = 50;
+    ctx.globalAlpha = 0.5;
+    ctx.fillRect(0, -50, 100, 50);
+
+    @assert pixel 50,25 ==~ 127,0,127,255;
+  expected: |
+    size 100 50
+    cr.set_source_rgb(0.5, 0, 0.5)
+    cr.rectangle(0, 0, 100, 50)
+    cr.fill()
+
+- name: 2d.shadow.alpha.4
+  desc: Shadows with alpha components are correctly affected by globalAlpha
+  testing:
+  - 2d.shadow.render
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#f00'; // (work around broken Firefox globalAlpha caching)
+    ctx.shadowColor = 'rgba(0, 0, 255, 0.707)';
+    ctx.shadowOffsetY = 50;
+    ctx.globalAlpha = 0.707;
+    ctx.fillRect(0, -50, 100, 50);
+
+    @assert pixel 50,25 ==~ 127,0,127,255;
+  expected: |
+    size 100 50
+    cr.set_source_rgb(0.5, 0, 0.5)
+    cr.rectangle(0, 0, 100, 50)
+    cr.fill()
+
+- name: 2d.shadow.alpha.5
+  desc: Shadows of shapes with alpha components are drawn correctly
+  testing:
+  - 2d.shadow.render
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = 'rgba(64, 0, 0, 0.5)';
+    ctx.shadowColor = '#00f';
+    ctx.shadowOffsetY = 50;
+    ctx.fillRect(0, -50, 100, 50);
+
+    @assert pixel 50,25 ==~ 127,0,127,255;
+  expected: |
+    size 100 50
+    cr.set_source_rgb(0.5, 0, 0.5)
+    cr.rectangle(0, 0, 100, 50)
+    cr.fill()
+
+- name: 2d.shadow.composite.1
+  desc: Shadows are drawn using globalCompositeOperation
+  testing:
+  - 2d.shadow.render
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.globalCompositeOperation = 'xor';
+    ctx.shadowColor = '#f00';
+    ctx.shadowOffsetX = 100;
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(-100, 0, 200, 50);
+
+    @assert pixel 50,25 ==~ 0,255,0,255;
+  expected: green
+
+- name: 2d.shadow.composite.2
+  desc: Shadows are drawn using globalCompositeOperation
+  testing:
+  - 2d.shadow.render
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.globalCompositeOperation = 'xor';
+    ctx.shadowColor = '#f00';
+    ctx.shadowBlur = 1;
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(-10, -10, 120, 70);
+
+    @assert pixel 50,25 ==~ 0,255,0,255;
+  expected: green
+
+- name: 2d.shadow.composite.3
+  desc: Areas outside shadows are drawn correctly with destination-out
+  testing:
+  - 2d.shadow.render
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.globalCompositeOperation = 'destination-out';
+    ctx.shadowColor = '#f00';
+    ctx.shadowBlur = 10;
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(200, 0, 100, 50);
+
+    @assert pixel 5,5 ==~ 0,255,0,255;
+    @assert pixel 50,25 ==~ 0,255,0,255;
+  expected: green
+
+
+
+
+
+
+- name: 2d.shadow.filter.value
+  desc: test if ctx.filter works correctly
+  testing:
+  - 2d.filter.value
+  code: |
+    @assert ctx.filter == 'none';
+    ctx.filter = 'blur(5px)';
+    @assert ctx.filter == 'blur(5px)';
+    ctx.save();
+    ctx.filter = 'none';
+    @assert ctx.filter == 'none';
+    ctx.restore();
+    @assert ctx.filter == 'blur(5px)';
+
+    ctx.filter = 'blur(10)';
+    @assert ctx.filter == 'blur(5px)';
+    ctx.filter = 'blur 10px';
+    @assert ctx.filter == 'blur(5px)';
+
+    ctx.filter = 'inherit';
+    @assert ctx.filter == 'blur(5px)';
+    ctx.filter = 'initial';
+    @assert ctx.filter == 'blur(5px)';
+    ctx.filter = 'unset';
+    @assert ctx.filter == 'blur(5px)';
+
+    ctx.filter = '';
+    @assert ctx.filter == 'blur(5px)';
+    ctx.filter = null;
+    @assert ctx.filter == 'blur(5px)';
+    ctx.filter = undefined;
+    @assert ctx.filter == 'blur(5px)';
+
+    ctx.filter = 'blur(  5px)';
+    assert_equals(ctx.filter, 'blur(  5px)');
+
diff --git a/tests/wpt/web-platform-tests/html/canvas/tools/yaml/element/text-styles.yaml b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/element/text-styles.yaml
new file mode 100644
index 00000000000..1547d30bd4a
--- /dev/null
+++ b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/element/text-styles.yaml
@@ -0,0 +1,466 @@
+- name: 2d.text.font.parse.basic
+  testing:
+  - 2d.text.font.parse
+  - 2d.text.font.get
+  code: |
+    ctx.font = '20px serif';
+    @assert ctx.font === '20px serif';
+
+    ctx.font = '20PX   SERIF';
+    @assert ctx.font === '20px serif'; @moz-todo
+
+- name: 2d.text.font.parse.tiny
+  testing:
+  - 2d.text.font.parse
+  - 2d.text.font.get
+  code: |
+    ctx.font = '1px sans-serif';
+    @assert ctx.font === '1px sans-serif';
+
+- name: 2d.text.font.parse.complex
+  testing:
+  - 2d.text.font.parse
+  - 2d.text.font.get
+  - 2d.text.font.lineheight
+  code: |
+    ctx.font = 'small-caps italic 400 12px/2 Unknown Font, sans-serif';
+    @assert ctx.font === 'italic small-caps 12px "Unknown Font", sans-serif'; @moz-todo
+
+  # TODO:
+  #   2d.text.font.parse.size.absolute
+  #     xx-small x-small small medium large x-large xx-large
+  #   2d.text.font.parse.size.relative
+  #     smaller larger
+  #   2d.text.font.parse.size.length.relative
+  #     em ex px
+  #   2d.text.font.parse.size.length.absolute
+  #     in cm mm pt pc
+
+- name: 2d.text.font.parse.size.percentage
+  testing:
+  - 2d.text.font.parse
+  - 2d.text.font.get
+  - 2d.text.font.fontsize
+  - 2d.text.font.size
+  canvas: 'style="font-size: 144px" width="100" height="50"'
+  code: |
+    ctx.font = '50% serif';
+    @assert ctx.font === '72px serif'; @moz-todo
+    canvas.setAttribute('style', 'font-size: 100px');
+    @assert ctx.font === '72px serif'; @moz-todo
+
+- name: 2d.text.font.parse.size.percentage.default
+  testing:
+  - 2d.text.font.undefined
+  code: |
+    var canvas2 = document.createElement('canvas');
+    var ctx2 = canvas2.getContext('2d');
+    ctx2.font = '1000% serif';
+    @assert ctx2.font === '100px serif'; @moz-todo
+
+- name: 2d.text.font.parse.system
+  desc: System fonts must be computed to explicit values
+  testing:
+  - 2d.text.font.parse
+  - 2d.text.font.get
+  - 2d.text.font.systemfonts
+  code: |
+    ctx.font = 'message-box';
+    @assert ctx.font !== 'message-box';
+
+- name: 2d.text.font.parse.invalid
+  testing:
+  - 2d.text.font.invalid
+  code: |
+    ctx.font = '20px serif';
+    @assert ctx.font === '20px serif';
+
+    ctx.font = '20px serif';
+    ctx.font = '';
+    @assert ctx.font === '20px serif';
+
+    ctx.font = '20px serif';
+    ctx.font = 'bogus';
+    @assert ctx.font === '20px serif';
+
+    ctx.font = '20px serif';
+    ctx.font = 'inherit';
+    @assert ctx.font === '20px serif';
+
+    ctx.font = '20px serif';
+    ctx.font = '10px {bogus}';
+    @assert ctx.font === '20px serif';
+
+    ctx.font = '20px serif';
+    ctx.font = '10px initial';
+    @assert ctx.font === '20px serif'; @moz-todo
+
+    ctx.font = '20px serif';
+    ctx.font = '10px default';
+    @assert ctx.font === '20px serif'; @moz-todo
+
+    ctx.font = '20px serif';
+    ctx.font = '10px inherit';
+    @assert ctx.font === '20px serif';
+
+    ctx.font = '20px serif';
+    ctx.font = '1em serif; background: green; margin: 10px';
+    @assert ctx.font === '20px serif';
+
+- name: 2d.text.font.default
+  testing:
+  - 2d.text.font.default
+  code: |
+    @assert ctx.font === '10px sans-serif';
+
+- name: 2d.text.font.relative_size
+  testing:
+  - 2d.text.font.relative_size
+  code: |
+    var canvas2 = document.createElement('canvas');
+    var ctx2 = canvas2.getContext('2d');
+    ctx2.font = '1em sans-serif';
+    @assert ctx2.font === '10px sans-serif';
+
+- name: 2d.text.align.valid
+  testing:
+  - 2d.text.align.get
+  - 2d.text.align.set
+  code: |
+    ctx.textAlign = 'start';
+    @assert ctx.textAlign === 'start';
+
+    ctx.textAlign = 'end';
+    @assert ctx.textAlign === 'end';
+
+    ctx.textAlign = 'left';
+    @assert ctx.textAlign === 'left';
+
+    ctx.textAlign = 'right';
+    @assert ctx.textAlign === 'right';
+
+    ctx.textAlign = 'center';
+    @assert ctx.textAlign === 'center';
+
+- name: 2d.text.align.invalid
+  testing:
+  - 2d.text.align.invalid
+  code: |
+    ctx.textAlign = 'start';
+    ctx.textAlign = 'bogus';
+    @assert ctx.textAlign === 'start';
+
+    ctx.textAlign = 'start';
+    ctx.textAlign = 'END';
+    @assert ctx.textAlign === 'start';
+
+    ctx.textAlign = 'start';
+    ctx.textAlign = 'end ';
+    @assert ctx.textAlign === 'start';
+
+    ctx.textAlign = 'start';
+    ctx.textAlign = 'end\0';
+    @assert ctx.textAlign === 'start';
+
+- name: 2d.text.align.default
+  testing:
+  - 2d.text.align.default
+  code: |
+    @assert ctx.textAlign === 'start';
+
+
+- name: 2d.text.baseline.valid
+  testing:
+  - 2d.text.baseline.get
+  - 2d.text.baseline.set
+  code: |
+    ctx.textBaseline = 'top';
+    @assert ctx.textBaseline === 'top';
+
+    ctx.textBaseline = 'hanging';
+    @assert ctx.textBaseline === 'hanging';
+
+    ctx.textBaseline = 'middle';
+    @assert ctx.textBaseline === 'middle';
+
+    ctx.textBaseline = 'alphabetic';
+    @assert ctx.textBaseline === 'alphabetic';
+
+    ctx.textBaseline = 'ideographic';
+    @assert ctx.textBaseline === 'ideographic';
+
+    ctx.textBaseline = 'bottom';
+    @assert ctx.textBaseline === 'bottom';
+
+- name: 2d.text.baseline.invalid
+  testing:
+  - 2d.text.baseline.invalid
+  code: |
+    ctx.textBaseline = 'top';
+    ctx.textBaseline = 'bogus';
+    @assert ctx.textBaseline === 'top';
+
+    ctx.textBaseline = 'top';
+    ctx.textBaseline = 'MIDDLE';
+    @assert ctx.textBaseline === 'top';
+
+    ctx.textBaseline = 'top';
+    ctx.textBaseline = 'middle ';
+    @assert ctx.textBaseline === 'top';
+
+    ctx.textBaseline = 'top';
+    ctx.textBaseline = 'middle\0';
+    @assert ctx.textBaseline === 'top';
+
+- name: 2d.text.baseline.default
+  testing:
+  - 2d.text.baseline.default
+  code: |
+    @assert ctx.textBaseline === 'alphabetic';
+
+
+
+
+
+- name: 2d.text.draw.baseline.top
+  desc: textBaseline top is the top of the em square (not the bounding box)
+  testing:
+  - 2d.text.baseline.top
+  fonts:
+  - CanvasTest
+  code: |
+    ctx.font = '50px CanvasTest';
+    deferTest();
+    step_timeout(t.step_func_done(function () {
+        ctx.fillStyle = '#f00';
+        ctx.fillRect(0, 0, 100, 50);
+        ctx.fillStyle = '#0f0';
+        ctx.textBaseline = 'top';
+        ctx.fillText('CC', 0, 0);
+        @assert pixel 5,5 ==~ 0,255,0,255;
+        @assert pixel 95,5 ==~ 0,255,0,255;
+        @assert pixel 25,25 ==~ 0,255,0,255;
+        @assert pixel 75,25 ==~ 0,255,0,255;
+        @assert pixel 5,45 ==~ 0,255,0,255;
+        @assert pixel 95,45 ==~ 0,255,0,255;
+    }), 500);
+  expected: green
+
+- name: 2d.text.draw.baseline.bottom
+  desc: textBaseline bottom is the bottom of the em square (not the bounding box)
+  testing:
+  - 2d.text.baseline.bottom
+  fonts:
+  - CanvasTest
+  code: |
+    ctx.font = '50px CanvasTest';
+    deferTest();
+    step_timeout(t.step_func_done(function () {
+        ctx.fillStyle = '#f00';
+        ctx.fillRect(0, 0, 100, 50);
+        ctx.fillStyle = '#0f0';
+        ctx.textBaseline = 'bottom';
+        ctx.fillText('CC', 0, 50);
+        @assert pixel 5,5 ==~ 0,255,0,255;
+        @assert pixel 95,5 ==~ 0,255,0,255;
+        @assert pixel 25,25 ==~ 0,255,0,255;
+        @assert pixel 75,25 ==~ 0,255,0,255;
+        @assert pixel 5,45 ==~ 0,255,0,255;
+        @assert pixel 95,45 ==~ 0,255,0,255;
+    }), 500);
+  expected: green
+
+- name: 2d.text.draw.baseline.middle
+  desc: textBaseline middle is the middle of the em square (not the bounding box)
+  testing:
+  - 2d.text.baseline.middle
+  fonts:
+  - CanvasTest
+  code: |
+    ctx.font = '50px CanvasTest';
+    deferTest();
+    step_timeout(t.step_func_done(function () {
+        ctx.fillStyle = '#f00';
+        ctx.fillRect(0, 0, 100, 50);
+        ctx.fillStyle = '#0f0';
+        ctx.textBaseline = 'middle';
+        ctx.fillText('CC', 0, 25);
+        @assert pixel 5,5 ==~ 0,255,0,255;
+        @assert pixel 95,5 ==~ 0,255,0,255;
+        @assert pixel 25,25 ==~ 0,255,0,255;
+        @assert pixel 75,25 ==~ 0,255,0,255;
+        @assert pixel 5,45 ==~ 0,255,0,255;
+        @assert pixel 95,45 ==~ 0,255,0,255;
+    }), 500);
+  expected: green
+
+- name: 2d.text.draw.baseline.alphabetic
+  testing:
+  - 2d.text.baseline.alphabetic
+  fonts:
+  - CanvasTest
+  code: |
+    ctx.font = '50px CanvasTest';
+    deferTest();
+    step_timeout(t.step_func_done(function () {
+        ctx.fillStyle = '#f00';
+        ctx.fillRect(0, 0, 100, 50);
+        ctx.fillStyle = '#0f0';
+        ctx.textBaseline = 'alphabetic';
+        ctx.fillText('CC', 0, 37.5);
+        @assert pixel 5,5 ==~ 0,255,0,255;
+        @assert pixel 95,5 ==~ 0,255,0,255;
+        @assert pixel 25,25 ==~ 0,255,0,255;
+        @assert pixel 75,25 ==~ 0,255,0,255;
+        @assert pixel 5,45 ==~ 0,255,0,255;
+        @assert pixel 95,45 ==~ 0,255,0,255;
+    }), 500);
+  expected: green
+
+- name: 2d.text.draw.baseline.ideographic
+  testing:
+  - 2d.text.baseline.ideographic
+  fonts:
+  - CanvasTest
+  code: |
+    ctx.font = '50px CanvasTest';
+    deferTest();
+    step_timeout(t.step_func_done(function () {
+        ctx.fillStyle = '#f00';
+        ctx.fillRect(0, 0, 100, 50);
+        ctx.fillStyle = '#0f0';
+        ctx.textBaseline = 'ideographic';
+        ctx.fillText('CC', 0, 31.25);
+        @assert pixel 5,5 ==~ 0,255,0,255;
+        @assert pixel 95,5 ==~ 0,255,0,255;
+        @assert pixel 25,25 ==~ 0,255,0,255;
+        @assert pixel 75,25 ==~ 0,255,0,255;
+        @assert pixel 5,45 ==~ 0,255,0,255; @moz-todo
+        @assert pixel 95,45 ==~ 0,255,0,255; @moz-todo
+    }), 500);
+  expected: green
+
+- name: 2d.text.draw.baseline.hanging
+  testing:
+  - 2d.text.baseline.hanging
+  fonts:
+  - CanvasTest
+  code: |
+    ctx.font = '50px CanvasTest';
+    deferTest();
+    step_timeout(t.step_func_done(function () {
+        ctx.fillStyle = '#f00';
+        ctx.fillRect(0, 0, 100, 50);
+        ctx.fillStyle = '#0f0';
+        ctx.textBaseline = 'hanging';
+        ctx.fillText('CC', 0, 12.5);
+        @assert pixel 5,5 ==~ 0,255,0,255; @moz-todo
+        @assert pixel 95,5 ==~ 0,255,0,255; @moz-todo
+        @assert pixel 25,25 ==~ 0,255,0,255;
+        @assert pixel 75,25 ==~ 0,255,0,255;
+        @assert pixel 5,45 ==~ 0,255,0,255;
+        @assert pixel 95,45 ==~ 0,255,0,255;
+    }), 500);
+  expected: green
+
+- name: 2d.text.draw.space.collapse.space
+  desc: Space characters are converted to U+0020, and collapsed (per CSS)
+  testing:
+  - 2d.text.draw.spaces
+  fonts:
+  - CanvasTest
+  code: |
+    ctx.font = '50px CanvasTest';
+    deferTest();
+    step_timeout(t.step_func_done(function () {
+        ctx.fillStyle = '#f00';
+        ctx.fillRect(0, 0, 100, 50);
+        ctx.fillStyle = '#0f0';
+        ctx.fillText('E  EE', -100, 37.5);
+        @assert pixel 25,25 ==~ 0,255,0,255; @moz-todo
+        @assert pixel 75,25 ==~ 0,255,0,255;
+    }), 500);
+  expected: green
+
+- name: 2d.text.draw.space.collapse.other
+  desc: Space characters are converted to U+0020, and collapsed (per CSS)
+  testing:
+  - 2d.text.draw.spaces
+  fonts:
+  - CanvasTest
+  code: |
+    ctx.font = '50px CanvasTest';
+    deferTest();
+    step_timeout(t.step_func_done(function () {
+        ctx.fillStyle = '#f00';
+        ctx.fillRect(0, 0, 100, 50);
+        ctx.fillStyle = '#0f0';
+        ctx.fillText('E \x09\x0a\x0c\x0d  \x09\x0a\x0c\x0dEE', -100, 37.5);
+        @assert pixel 25,25 ==~ 0,255,0,255; @moz-todo
+        @assert pixel 75,25 ==~ 0,255,0,255; @moz-todo
+    }), 500);
+  expected: green
+
+- name: 2d.text.draw.space.collapse.start
+  desc: Space characters at the start of a line are collapsed (per CSS)
+  testing:
+  - 2d.text.draw.spaces
+  fonts:
+  - CanvasTest
+  code: |
+    ctx.font = '50px CanvasTest';
+    deferTest();
+    step_timeout(t.step_func_done(function () {
+        ctx.fillStyle = '#f00';
+        ctx.fillRect(0, 0, 100, 50);
+        ctx.fillStyle = '#0f0';
+        ctx.fillText(' EE', 0, 37.5);
+        @assert pixel 25,25 ==~ 0,255,0,255; @moz-todo
+        @assert pixel 75,25 ==~ 0,255,0,255;
+    }), 500);
+  expected: green
+
+- name: 2d.text.draw.space.collapse.end
+  desc: Space characters at the end of a line are collapsed (per CSS)
+  testing:
+  - 2d.text.draw.spaces
+  fonts:
+  - CanvasTest
+  code: |
+    ctx.font = '50px CanvasTest';
+    deferTest();
+    step_timeout(t.step_func_done(function () {
+        ctx.fillStyle = '#f00';
+        ctx.fillRect(0, 0, 100, 50);
+        ctx.fillStyle = '#0f0';
+        ctx.textAlign = 'right';
+        ctx.fillText('EE ', 100, 37.5);
+        @assert pixel 25,25 ==~ 0,255,0,255;
+        @assert pixel 75,25 ==~ 0,255,0,255; @moz-todo
+    }), 500);
+  expected: green
+
+
+- name: 2d.text.measure.width.space
+  desc: Space characters are converted to U+0020 and collapsed (per CSS)
+  testing:
+  - 2d.text.measure.spaces
+  fonts:
+  - CanvasTest
+  code: |
+    deferTest();
+    var f = new FontFace("CanvasTest", "/fonts/CanvasTest.ttf");
+    document.fonts.add(f);
+    document.fonts.ready.then(() => {
+        step_timeout(t.step_func_done(function () {
+            ctx.font = '50px CanvasTest';
+            @assert ctx.measureText('A B').width === 150;
+            @assert ctx.measureText('A  B').width === 150; @moz-todo
+            @assert ctx.measureText('A \x09\x0a\x0c\x0d  \x09\x0a\x0c\x0dB').width === 150; @moz-todo
+            @assert ctx.measureText('A \x0b B').width >= 200;
+
+            @assert ctx.measureText(' AB').width === 100; @moz-todo
+            @assert ctx.measureText('AB ').width === 100; @moz-todo
+        }), 500);
+    });
+
diff --git a/tests/wpt/web-platform-tests/html/canvas/tools/yaml/element/the-canvas-element.yaml b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/element/the-canvas-element.yaml
new file mode 100644
index 00000000000..9899760d8a6
--- /dev/null
+++ b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/element/the-canvas-element.yaml
@@ -0,0 +1,133 @@
+- name: 2d.getcontext.exists
+  desc: The 2D context is implemented
+  testing:
+  - context.2d
+  code: |
+    @assert canvas.getContext('2d') !== null;
+
+- name: 2d.getcontext.extraargs
+  desc: The 2D context ignores extra getContext arguments
+  testing:
+  - context.2d.extraargs
+  code: |
+    @assert canvas.getContext('2d', false, {}, [], 1, "2") !== null;
+    @assert canvas.getContext('2d', 123) !== null;
+    @assert canvas.getContext('2d', "test") !== null;
+    @assert canvas.getContext('2d', undefined) !== null;
+    @assert canvas.getContext('2d', null) !== null;
+    @assert canvas.getContext('2d', Symbol.hasInstance) !== null;
+
+- name: 2d.type.exists
+  desc: The 2D context interface is a property of 'window'
+  notes: &bindings Defined in "Web IDL" (draft)
+  testing:
+  - context.2d.type
+  code: |
+    @assert window.CanvasRenderingContext2D;
+
+- name: 2d.type.prototype
+  desc: window.CanvasRenderingContext2D.prototype are not [[Writable]] and not [[Configurable]],
+    and its methods are [[Configurable]].
+  notes: *bindings
+  testing:
+  - context.2d.type
+  code: |
+    @assert window.CanvasRenderingContext2D.prototype;
+    @assert window.CanvasRenderingContext2D.prototype.fill;
+    window.CanvasRenderingContext2D.prototype = null;
+    @assert window.CanvasRenderingContext2D.prototype;
+    delete window.CanvasRenderingContext2D.prototype;
+    @assert window.CanvasRenderingContext2D.prototype;
+    window.CanvasRenderingContext2D.prototype.fill = 1;
+    @assert window.CanvasRenderingContext2D.prototype.fill === 1;
+    delete window.CanvasRenderingContext2D.prototype.fill;
+    @assert window.CanvasRenderingContext2D.prototype.fill === undefined;
+
+- name: 2d.type.replace
+  desc: Interface methods can be overridden
+  notes: *bindings
+  testing:
+  - context.2d.type
+  code: |
+    var fillRect = window.CanvasRenderingContext2D.prototype.fillRect;
+    window.CanvasRenderingContext2D.prototype.fillRect = function (x, y, w, h)
+    {
+        this.fillStyle = '#0f0';
+        fillRect.call(this, x, y, w, h);
+    };
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.type.extend
+  desc: Interface methods can be added
+  notes: *bindings
+  testing:
+  - context.2d.type
+  code: |
+    window.CanvasRenderingContext2D.prototype.fillRectGreen = function (x, y, w, h)
+    {
+        this.fillStyle = '#0f0';
+        this.fillRect(x, y, w, h);
+    };
+    ctx.fillStyle = '#f00';
+    ctx.fillRectGreen(0, 0, 100, 50);
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.getcontext.unique
+  desc: getContext('2d') returns the same object
+  testing:
+  - context.unique
+  code: |
+    @assert canvas.getContext('2d') === canvas.getContext('2d');
+
+- name: 2d.getcontext.shared
+  desc: getContext('2d') returns objects which share canvas state
+  testing:
+  - context.unique
+  code: |
+    var ctx2 = canvas.getContext('2d');
+    ctx.fillStyle = '#f00';
+    ctx2.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.scaled
+  desc: CSS-scaled canvases get drawn correctly
+  canvas: 'width="50" height="25" style="width: 100px; height: 50px"'
+  manual:
+  code: |
+    ctx.fillStyle = '#00f';
+    ctx.fillRect(0, 0, 50, 25);
+    ctx.fillStyle = '#0ff';
+    ctx.fillRect(0, 0, 25, 10);
+  expected: |
+    size 100 50
+    cr.set_source_rgb(0, 0, 1)
+    cr.rectangle(0, 0, 100, 50)
+    cr.fill()
+    cr.set_source_rgb(0, 1, 1)
+    cr.rectangle(0, 0, 50, 20)
+    cr.fill()
+
+- name: 2d.canvas.reference
+  desc: CanvasRenderingContext2D.canvas refers back to its canvas
+  testing:
+  - 2d.canvas
+  code: |
+    @assert ctx.canvas === canvas;
+
+- name: 2d.canvas.readonly
+  desc: CanvasRenderingContext2D.canvas is readonly
+  testing:
+  - 2d.canvas.attribute
+  code: |
+    var c = document.createElement('canvas');
+    var d = ctx.canvas;
+    @assert c !== d;
+    ctx.canvas = c;
+    @assert ctx.canvas === d;
+
diff --git a/tests/wpt/web-platform-tests/html/canvas/tools/yaml/element/the-canvas-state.yaml b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/element/the-canvas-state.yaml
new file mode 100644
index 00000000000..dda6dc314dd
--- /dev/null
+++ b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/element/the-canvas-state.yaml
@@ -0,0 +1,107 @@
+- name: 2d.state.saverestore.transformation
+  desc: save()/restore() affects the current transformation matrix
+  testing:
+  - 2d.state.transformation
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.save();
+    ctx.translate(200, 0);
+    ctx.restore();
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(-200, 0, 100, 50);
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.state.saverestore.clip
+  desc: save()/restore() affects the clipping path
+  testing:
+  - 2d.state.clip
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.save();
+    ctx.rect(0, 0, 1, 1);
+    ctx.clip();
+    ctx.restore();
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.state.saverestore.path
+  desc: save()/restore() does not affect the current path
+  testing:
+  - 2d.state.path
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.save();
+    ctx.rect(0, 0, 100, 50);
+    ctx.restore();
+    ctx.fillStyle = '#0f0';
+    ctx.fill();
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.state.saverestore.bitmap
+  desc: save()/restore() does not affect the current bitmap
+  testing:
+  - 2d.state.bitmap
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.save();
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.restore();
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.state.saverestore.stack
+  desc: save()/restore() can be nested as a stack
+  testing:
+  - 2d.state.save
+  - 2d.state.restore
+  code: |
+    ctx.lineWidth = 1;
+    ctx.save();
+    ctx.lineWidth = 2;
+    ctx.save();
+    ctx.lineWidth = 3;
+    @assert ctx.lineWidth === 3;
+    ctx.restore();
+    @assert ctx.lineWidth === 2;
+    ctx.restore();
+    @assert ctx.lineWidth === 1;
+
+- name: 2d.state.saverestore.stackdepth
+  desc: save()/restore() stack depth is not unreasonably limited
+  testing:
+  - 2d.state.save
+  - 2d.state.restore
+  code: |
+    var limit = 512;
+    for (var i = 1; i < limit; ++i)
+    {
+        ctx.save();
+        ctx.lineWidth = i;
+    }
+    for (var i = limit-1; i > 0; --i)
+    {
+        @assert ctx.lineWidth === i;
+        ctx.restore();
+    }
+
+- name: 2d.state.saverestore.underflow
+  desc: restore() with an empty stack has no effect
+  testing:
+  - 2d.state.restore.underflow
+  code: |
+    for (var i = 0; i < 16; ++i)
+        ctx.restore();
+    ctx.lineWidth = 0.5;
+    ctx.restore();
+    @assert ctx.lineWidth === 0.5;
+
+
diff --git a/tests/wpt/web-platform-tests/html/canvas/tools/yaml/element/transformations.yaml b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/element/transformations.yaml
new file mode 100644
index 00000000000..eca6b16b089
--- /dev/null
+++ b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/element/transformations.yaml
@@ -0,0 +1,405 @@
+- name: 2d.transformation.order
+  desc: Transformations are applied in the right order
+  testing:
+  - 2d.transformation.order
+  code: |
+    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);
+    @assert pixel 75,25 == 0,255,0,255;
+  expected: green
+
+
+- name: 2d.transformation.scale.basic
+  desc: scale() works
+  testing:
+  - 2d.transformation.scale
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.scale(2, 4);
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 50, 12.5);
+    @assert pixel 90,40 == 0,255,0,255;
+  expected: green
+
+- name: 2d.transformation.scale.zero
+  desc: scale() with a scale factor of zero works
+  testing:
+  - 2d.transformation.scale
+  code: |
+    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();
+
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.transformation.scale.negative
+  desc: scale() with negative scale factors works
+  testing:
+  - 2d.transformation.scale
+  code: |
+    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();
+    @assert pixel 25,25 == 0,255,0,255;
+    @assert pixel 75,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.transformation.scale.large
+  desc: scale() with large scale factors works
+  notes: Not really that large at all, but it hits the limits in Firefox.
+  testing:
+  - 2d.transformation.scale
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.scale(1e5, 1e5);
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 1, 1);
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.transformation.scale.nonfinite
+  desc: scale() with Infinity/NaN is ignored
+  testing:
+  - 2d.nonfinite
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.translate(100, 10);
+    @nonfinite ctx.scale(<0.1 Infinity -Infinity NaN>, <0.1 Infinity -Infinity NaN>);
+
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(-100, -10, 100, 50);
+
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.transformation.scale.multiple
+  desc: Multiple scale()s combine
+  testing:
+  - 2d.transformation.scale.multiple
+  code: |
+    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);
+    @assert pixel 90,40 == 0,255,0,255;
+  expected: green
+
+
+- name: 2d.transformation.rotate.zero
+  desc: rotate() by 0 does nothing
+  testing:
+  - 2d.transformation.rotate
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.rotate(0);
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.transformation.rotate.radians
+  desc: rotate() uses radians
+  testing:
+  - 2d.transformation.rotate.radians
+  code: |
+    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);
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.transformation.rotate.direction
+  desc: rotate() is clockwise
+  testing:
+  - 2d.transformation.rotate.direction
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.rotate(Math.PI / 2);
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, -100, 50, 100);
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.transformation.rotate.wrap
+  desc: rotate() wraps large positive values correctly
+  testing:
+  - 2d.transformation.rotate
+  code: |
+    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);
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 98,2 == 0,255,0,255;
+    @assert pixel 98,47 == 0,255,0,255;
+  expected: green
+
+- name: 2d.transformation.rotate.wrapnegative
+  desc: rotate() wraps large negative values correctly
+  testing:
+  - 2d.transformation.rotate
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.rotate(-Math.PI * (1 + 4096));
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(-100, -50, 100, 50);
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 98,2 == 0,255,0,255;
+    @assert pixel 98,47 == 0,255,0,255;
+  expected: green
+
+- name: 2d.transformation.rotate.nonfinite
+  desc: rotate() with Infinity/NaN is ignored
+  testing:
+  - 2d.nonfinite
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.translate(100, 10);
+    @nonfinite ctx.rotate(<0.1 Infinity -Infinity NaN>);
+
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(-100, -10, 100, 50);
+
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.transformation.translate.basic
+  desc: translate() works
+  testing:
+  - 2d.transformation.translate
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.translate(100, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(-100, -50, 100, 50);
+    @assert pixel 90,40 == 0,255,0,255;
+  expected: green
+
+- name: 2d.transformation.translate.nonfinite
+  desc: translate() with Infinity/NaN is ignored
+  testing:
+  - 2d.nonfinite
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.translate(100, 10);
+    @nonfinite ctx.translate(<0.1 Infinity -Infinity NaN>, <0.1 Infinity -Infinity NaN>);
+
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(-100, -10, 100, 50);
+
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+
+- name: 2d.transformation.transform.identity
+  desc: transform() with the identity matrix does nothing
+  testing:
+  - 2d.transformation.transform
+  code: |
+    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);
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.transformation.transform.skewed
+  desc: transform() with skewy matrix transforms correctly
+  testing:
+  - 2d.transformation.transform
+  code: |
+    // 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();
+    @assert pixel 21,11 == 0,255,0,255;
+    @assert pixel 79,11 == 0,255,0,255;
+    @assert pixel 21,39 == 0,255,0,255;
+    @assert pixel 79,39 == 0,255,0,255;
+    @assert pixel 39,19 == 0,255,0,255;
+    @assert pixel 61,19 == 0,255,0,255;
+    @assert pixel 39,31 == 0,255,0,255;
+    @assert pixel 61,31 == 0,255,0,255;
+  expected: green
+
+- name: 2d.transformation.transform.multiply
+  desc: transform() multiplies the CTM
+  testing:
+  - 2d.transformation.transform.multiply
+  code: |
+    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);
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+- name: 2d.transformation.transform.nonfinite
+  desc: transform() with Infinity/NaN is ignored
+  testing:
+  - 2d.nonfinite
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.translate(100, 10);
+    @nonfinite ctx.transform(<0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>);
+
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(-100, -10, 100, 50);
+
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+
+- name: 2d.transformation.setTransform.skewed
+  testing:
+  - 2d.transformation.setTransform
+  code: |
+    // 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();
+    @assert pixel 21,11 == 0,255,0,255;
+    @assert pixel 79,11 == 0,255,0,255;
+    @assert pixel 21,39 == 0,255,0,255;
+    @assert pixel 79,39 == 0,255,0,255;
+    @assert pixel 39,19 == 0,255,0,255;
+    @assert pixel 61,19 == 0,255,0,255;
+    @assert pixel 39,31 == 0,255,0,255;
+    @assert pixel 61,31 == 0,255,0,255;
+  expected: green
+
+- name: 2d.transformation.setTransform.multiple
+  testing:
+  - 2d.transformation.setTransform.identity
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.setTransform(1/2,0, 0,1/2, 0,0);
+    ctx.setTransform();
+    ctx.setTransform(2,0, 0,2, 0,0);
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 50, 25);
+    @assert pixel 75,35 == 0,255,0,255;
+  expected: green
+
+- name: 2d.transformation.setTransform.nonfinite
+  desc: setTransform() with Infinity/NaN is ignored
+  testing:
+  - 2d.nonfinite
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.translate(100, 10);
+    @nonfinite ctx.setTransform(<0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>);
+
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(-100, -10, 100, 50);
+
+    @assert pixel 50,25 == 0,255,0,255;
+  expected: green
+
+
diff --git a/tests/wpt/web-platform-tests/html/canvas/tools/yaml/element/video.yaml b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/element/video.yaml
new file mode 100644
index 00000000000..c419107e58b
--- /dev/null
+++ b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/element/video.yaml
@@ -0,0 +1,10 @@
+- name: 2d.video.invalid
+  desc: Verify test doesn't crash with invalid video.
+  testing:
+  - 2d.video.invalid
+  code: |
+    var v = document.createElement('video');
+    v.play();
+    // Test is deliberately not waiting for the 'playing' event to fire.
+    ctx.createPattern(v, 'repeat-x');
+    ctx.drawImage(v, 0, 0);
diff --git a/tests/wpt/web-platform-tests/html/canvas/tools/yaml/offscreen/compositing.yaml b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/offscreen/compositing.yaml
new file mode 100644
index 00000000000..62f9ccb693c
--- /dev/null
+++ b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/offscreen/compositing.yaml
@@ -0,0 +1,228 @@
+- name: 2d.composite.globalAlpha.range
+  testing:
+  - 2d.composite.globalAlpha.range
+  code: |
+    ctx.globalAlpha = 0.5;
+    var a = ctx.globalAlpha; // might not be exactly 0.5, if it is rounded/quantised, so remember for future comparisons
+    ctx.globalAlpha = 1.1;
+    @assert ctx.globalAlpha === a;
+    ctx.globalAlpha = -0.1;
+    @assert ctx.globalAlpha === a;
+    ctx.globalAlpha = 0;
+    @assert ctx.globalAlpha === 0;
+    ctx.globalAlpha = 1;
+    @assert ctx.globalAlpha === 1;
+    t.done();
+
+- name: 2d.composite.globalAlpha.invalid
+  testing:
+  - 2d.composite.globalAlpha.range
+  code: |
+    ctx.globalAlpha = 0.5;
+    var a = ctx.globalAlpha; // might not be exactly 0.5, if it is rounded/quantised, so remember for future comparisons
+    ctx.globalAlpha = Infinity;
+    @assert ctx.globalAlpha === a;
+    ctx.globalAlpha = -Infinity;
+    @assert ctx.globalAlpha === a;
+    ctx.globalAlpha = NaN;
+    @assert ctx.globalAlpha === a;
+    t.done();
+
+- name: 2d.composite.globalAlpha.default
+  testing:
+  - 2d.composite.globalAlpha.default
+  code: |
+    @assert ctx.globalAlpha === 1.0;
+    t.done();
+
+- name: 2d.composite.globalAlpha.fill
+  testing:
+  - 2d.composite.globalAlpha.shape
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.globalAlpha = 0.01; // avoid any potential alpha=0 optimisations
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 50,25 ==~ 2,253,0,255;
+    t.done();
+
+- name: 2d.composite.globalAlpha.image
+  testing:
+  - 2d.composite.globalAlpha.image
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.globalAlpha = 0.01; // avoid any potential alpha=0 optimisations
+    var promise = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/red.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    promise.then(function(response) {
+        createImageBitmap(response).then(bitmap => {
+            ctx.drawImage(bitmap, 0, 0);
+            @assert pixel 50,25 ==~ 2,253,0,255;
+        }, t_fail);
+    }).then(t_pass, t_fail);
+
+- name: 2d.composite.globalAlpha.canvas
+  testing:
+  - 2d.composite.globalAlpha.image
+  code: |
+    var offscreenCanvas2 = new OffscreenCanvas(100, 50);
+    var ctx2 = offscreenCanvas2.getContext('2d');
+    ctx2.fillStyle = '#f00';
+    ctx2.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.globalAlpha = 0.01; // avoid any potential alpha=0 optimisations
+    ctx.drawImage(offscreenCanvas2, 0, 0);
+    @assert pixel 50,25 ==~ 2,253,0,255;
+    t.done();
+
+- name: 2d.composite.globalAlpha.imagepattern
+  testing:
+  - 2d.composite.globalAlpha.image
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    var promise = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/red.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    promise.then(function(response) {
+        createImageBitmap(response).then(bitmap => {
+            ctx.fillStyle = ctx.createPattern(bitmap, 'no-repeat');
+            ctx.globalAlpha = 0.01; // avoid any potential alpha=0 optimisations
+            ctx.fillRect(0, 0, 100, 50);
+            @assert pixel 50,25 ==~ 2,253,0,255;
+        }, t_fail);
+    }).then(t_pass, t_fail);
+
+- name: 2d.composite.globalAlpha.canvaspattern
+  testing:
+  - 2d.composite.globalAlpha.image
+  code: |
+    var offscreenCanvas2 = new OffscreenCanvas(100, 50);
+    var ctx2 = offscreenCanvas2.getContext('2d');
+    ctx2.fillStyle = '#f00';
+    ctx2.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = ctx.createPattern(offscreenCanvas2, 'no-repeat');
+    ctx.globalAlpha = 0.01; // avoid any potential alpha=0 optimisations
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 50,25 ==~ 2,253,0,255;
+    t.done();
+
+- name: 2d.composite.globalAlpha.canvascopy
+  testing:
+  - 2d.composite.globalAlpha.image
+  code: |
+    var offscreenCanvas2 = new OffscreenCanvas(100, 50);
+    var ctx2 = offscreenCanvas2.getContext('2d');
+    ctx2.fillStyle = '#0f0';
+    ctx2.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.globalCompositeOperation = 'copy'
+    ctx.globalAlpha = 0.51;
+    ctx.drawImage(offscreenCanvas2, 0, 0);
+    @assert pixel 50,25 ==~ 0,255,0,130;
+    t.done();
+
+
+- name: 2d.composite.operation.get
+  testing:
+  - 2d.composite.operation
+  code: |
+    var modes = ['source-atop', 'source-in', 'source-out', 'source-over',
+        'destination-atop', 'destination-in', 'destination-out', 'destination-over',
+        'lighter', 'copy', 'xor'];
+    for (var i = 0; i < modes.length; ++i)
+    {
+        ctx.globalCompositeOperation = modes[i];
+        @assert ctx.globalCompositeOperation === modes[i];
+    }
+    t.done();
+
+- name: 2d.composite.operation.unrecognised
+  testing:
+  - 2d.composite.operation.unrecognised
+  code: |
+    ctx.globalCompositeOperation = 'xor';
+    ctx.globalCompositeOperation = 'nonexistent';
+    @assert ctx.globalCompositeOperation === 'xor';
+    t.done();
+
+- name: 2d.composite.operation.darker
+  testing:
+  - 2d.composite.operation.unrecognised
+  code: |
+    ctx.globalCompositeOperation = 'xor';
+    ctx.globalCompositeOperation = 'darker';
+    @assert ctx.globalCompositeOperation === 'xor';
+    t.done();
+
+- name: 2d.composite.operation.over
+  testing:
+  - 2d.composite.operation.unrecognised
+  code: |
+    ctx.globalCompositeOperation = 'xor';
+    ctx.globalCompositeOperation = 'over';
+    @assert ctx.globalCompositeOperation === 'xor';
+    t.done();
+
+- name: 2d.composite.operation.clear
+  testing:
+  - 2d.composite.operation.clear
+  code: |
+    ctx.globalCompositeOperation = 'xor';
+    ctx.globalCompositeOperation = 'clear';
+    @assert ctx.globalCompositeOperation === 'clear';
+    t.done();
+
+- name: 2d.composite.operation.highlight
+  testing:
+  - 2d.composite.operation.unrecognised
+  code: |
+    ctx.globalCompositeOperation = 'xor';
+    ctx.globalCompositeOperation = 'highlight';
+    @assert ctx.globalCompositeOperation === 'xor';
+    t.done();
+
+- name: 2d.composite.operation.nullsuffix
+  testing:
+  - 2d.composite.operation.exact
+  code: |
+    ctx.globalCompositeOperation = 'xor';
+    ctx.globalCompositeOperation = 'source-over\0';
+    @assert ctx.globalCompositeOperation === 'xor';
+    t.done();
+
+- name: 2d.composite.operation.casesensitive
+  testing:
+  - 2d.composite.operation.casesensitive
+  code: |
+    ctx.globalCompositeOperation = 'xor';
+    ctx.globalCompositeOperation = 'Source-over';
+    @assert ctx.globalCompositeOperation === 'xor';
+    t.done();
+
+- name: 2d.composite.operation.default
+  testing:
+  - 2d.composite.operation.default
+  code: |
+    @assert ctx.globalCompositeOperation === 'source-over';
+    t.done();
+
diff --git a/tests/wpt/web-platform-tests/html/canvas/tools/yaml/offscreen/conformance-requirements.yaml b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/offscreen/conformance-requirements.yaml
new file mode 100644
index 00000000000..511f1c0aa49
--- /dev/null
+++ b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/offscreen/conformance-requirements.yaml
@@ -0,0 +1,153 @@
+- name: 2d.coordinatespace
+  desc: Coordinate space goes from top-left to bottom-right
+  notes: This should not be upside down.
+  testing:
+  - 2d.coordinatespace
+  code: |
+    ctx.fillStyle = '#00f';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#0ff';
+    ctx.fillRect(0, 0, 50, 25);
+    @assert pixel 25,12 == 0,255,255,255;
+    @assert pixel 75,12 == 0,0,255,255;
+    @assert pixel 25,37 == 0,0,255,255;
+    @assert pixel 75,37 == 0,0,255,255;
+    t.done();
+
+- name: 2d.missingargs
+  desc: Missing arguments cause TypeError
+  code: |
+    @assert throws TypeError ctx.scale();
+    @assert throws TypeError ctx.scale(1);
+    @assert throws TypeError ctx.rotate();
+    @assert throws TypeError ctx.translate();
+    @assert throws TypeError ctx.translate(0);
+    if (ctx.transform) { // (avoid spurious failures, since the aim here is not to test that all features are supported)
+        @assert throws TypeError ctx.transform();
+        @assert throws TypeError ctx.transform(1);
+        @assert throws TypeError ctx.transform(1, 0);
+        @assert throws TypeError ctx.transform(1, 0, 0);
+        @assert throws TypeError ctx.transform(1, 0, 0, 1);
+        @assert throws TypeError ctx.transform(1, 0, 0, 1, 0);
+    }
+    if (ctx.setTransform) {
+        @assert throws TypeError ctx.setTransform(1);
+        @assert throws TypeError ctx.setTransform(1, 0);
+        @assert throws TypeError ctx.setTransform(1, 0, 0);
+        @assert throws TypeError ctx.setTransform(1, 0, 0, 1);
+        @assert throws TypeError ctx.setTransform(1, 0, 0, 1, 0);
+    }
+    @assert throws TypeError ctx.createLinearGradient();
+    @assert throws TypeError ctx.createLinearGradient(0);
+    @assert throws TypeError ctx.createLinearGradient(0, 0);
+    @assert throws TypeError ctx.createLinearGradient(0, 0, 1);
+    @assert throws TypeError ctx.createRadialGradient();
+    @assert throws TypeError ctx.createRadialGradient(0);
+    @assert throws TypeError ctx.createRadialGradient(0, 0);
+    @assert throws TypeError ctx.createRadialGradient(0, 0, 1);
+    @assert throws TypeError ctx.createRadialGradient(0, 0, 1, 0);
+    @assert throws TypeError ctx.createRadialGradient(0, 0, 1, 0, 0);
+    @assert throws TypeError ctx.createPattern(offscreenCanvas);
+    @assert throws TypeError ctx.clearRect();
+    @assert throws TypeError ctx.clearRect(0);
+    @assert throws TypeError ctx.clearRect(0, 0);
+    @assert throws TypeError ctx.clearRect(0, 0, 0);
+    @assert throws TypeError ctx.fillRect();
+    @assert throws TypeError ctx.fillRect(0);
+    @assert throws TypeError ctx.fillRect(0, 0);
+    @assert throws TypeError ctx.fillRect(0, 0, 0);
+    @assert throws TypeError ctx.strokeRect();
+    @assert throws TypeError ctx.strokeRect(0);
+    @assert throws TypeError ctx.strokeRect(0, 0);
+    @assert throws TypeError ctx.strokeRect(0, 0, 0);
+    @assert throws TypeError ctx.moveTo();
+    @assert throws TypeError ctx.moveTo(0);
+    @assert throws TypeError ctx.lineTo();
+    @assert throws TypeError ctx.lineTo(0);
+    @assert throws TypeError ctx.quadraticCurveTo();
+    @assert throws TypeError ctx.quadraticCurveTo(0);
+    @assert throws TypeError ctx.quadraticCurveTo(0, 0);
+    @assert throws TypeError ctx.quadraticCurveTo(0, 0, 0);
+    @assert throws TypeError ctx.bezierCurveTo();
+    @assert throws TypeError ctx.bezierCurveTo(0);
+    @assert throws TypeError ctx.bezierCurveTo(0, 0);
+    @assert throws TypeError ctx.bezierCurveTo(0, 0, 0);
+    @assert throws TypeError ctx.bezierCurveTo(0, 0, 0, 0);
+    @assert throws TypeError ctx.bezierCurveTo(0, 0, 0, 0, 0);
+    @assert throws TypeError ctx.arcTo();
+    @assert throws TypeError ctx.arcTo(0);
+    @assert throws TypeError ctx.arcTo(0, 0);
+    @assert throws TypeError ctx.arcTo(0, 0, 0);
+    @assert throws TypeError ctx.arcTo(0, 0, 0, 0);
+    @assert throws TypeError ctx.rect();
+    @assert throws TypeError ctx.rect(0);
+    @assert throws TypeError ctx.rect(0, 0);
+    @assert throws TypeError ctx.rect(0, 0, 0);
+    @assert throws TypeError ctx.arc();
+    @assert throws TypeError ctx.arc(0);
+    @assert throws TypeError ctx.arc(0, 0);
+    @assert throws TypeError ctx.arc(0, 0, 1);
+    @assert throws TypeError ctx.arc(0, 0, 1, 0);
+    @assert throws TypeError ctx.drawImage();
+    @assert throws TypeError ctx.drawImage(offscreenCanvas);
+    @assert throws TypeError ctx.drawImage(offscreenCanvas, 0);
+    // TODO: n >= 3 args on drawImage could be either a valid overload,
+    // or too few for another overload, or too many for another
+    // overload - what should happen?
+    if (ctx.createImageData) {
+        @assert throws TypeError ctx.createImageData();
+        @assert throws TypeError ctx.createImageData(1);
+    }
+    if (ctx.getImageData) {
+        @assert throws TypeError ctx.getImageData();
+        @assert throws TypeError ctx.getImageData(0);
+        @assert throws TypeError ctx.getImageData(0, 0);
+        @assert throws TypeError ctx.getImageData(0, 0, 1);
+    }
+    if (ctx.putImageData) {
+        var imgdata = ctx.getImageData(0, 0, 1, 1);
+        @assert throws TypeError ctx.putImageData();
+        @assert throws TypeError ctx.putImageData(imgdata);
+        @assert throws TypeError ctx.putImageData(imgdata, 0);
+    }
+    var g = ctx.createLinearGradient(0, 0, 0, 0);
+    @assert throws TypeError g.addColorStop(); @moz-todo
+    @assert throws TypeError g.addColorStop(0); @moz-todo
+    t.done();
+
+- name: 2d.voidreturn
+  desc: void methods return undefined
+  code: |
+    @assert ctx.save() === undefined;
+    @assert ctx.restore() === undefined;
+    @assert ctx.scale(1, 1) === undefined;
+    @assert ctx.rotate(0) === undefined;
+    @assert ctx.translate(0, 0) === undefined;
+    if (ctx.transform) { // (avoid spurious failures, since the aim here is not to test that all features are supported)
+        @assert ctx.transform(1, 0, 0, 1, 0, 0) === undefined;
+    }
+    if (ctx.setTransform) {
+        @assert ctx.setTransform(1, 0, 0, 1, 0, 0) === undefined;
+    }
+    @assert ctx.clearRect(0, 0, 0, 0) === undefined;
+    @assert ctx.fillRect(0, 0, 0, 0) === undefined;
+    @assert ctx.strokeRect(0, 0, 0, 0) === undefined;
+    @assert ctx.beginPath() === undefined;
+    @assert ctx.closePath() === undefined;
+    @assert ctx.moveTo(0, 0) === undefined;
+    @assert ctx.lineTo(0, 0) === undefined;
+    @assert ctx.quadraticCurveTo(0, 0, 0, 0) === undefined;
+    @assert ctx.bezierCurveTo(0, 0, 0, 0, 0, 0) === undefined;
+    @assert ctx.arcTo(0, 0, 0, 0, 1) === undefined;
+    @assert ctx.rect(0, 0, 0, 0) === undefined;
+    @assert ctx.arc(0, 0, 1, 0, 0, true) === undefined;
+    @assert ctx.fill() === undefined;
+    @assert ctx.stroke() === undefined;
+    @assert ctx.clip() === undefined;
+    if (ctx.putImageData) {
+        @assert ctx.putImageData(ctx.getImageData(0, 0, 1, 1), 0, 0) === undefined;
+    }
+    @assert ctx.drawImage(offscreenCanvas, 0, 0, 1, 1, 0, 0, 0, 0) === undefined;
+    @assert ctx.createLinearGradient(0, 0, 0, 0).addColorStop(0, 'white') === undefined;
+    t.done();
+
diff --git a/tests/wpt/web-platform-tests/html/canvas/tools/yaml/offscreen/drawing-images-to-the-canvas.yaml b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/offscreen/drawing-images-to-the-canvas.yaml
new file mode 100644
index 00000000000..61cdd407fed
--- /dev/null
+++ b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/offscreen/drawing-images-to-the-canvas.yaml
@@ -0,0 +1,837 @@
+- name: 2d.drawImage.3arg
+  testing:
+  - 2d.drawImage.defaultsource
+  - 2d.drawImage.defaultdest
+  timeout: long
+  images:
+  - red.png
+  - green.png
+  code: |
+    var promise1 = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/red.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    var promise2 = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/green.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    Promise.all([promise1, promise2]).then(function(response1, response2) {
+        var promise3 = createImageBitmap(response1);
+        var promise4 = createImageBitmap(response2);
+        Promise.all([promise3, promise4]).then(function(bitmap1, bitmap2) {
+            ctx.drawImage(bitmap2, 0, 0);
+            ctx.drawImage(bitmap1, -100, 0);
+            ctx.drawImage(bitmap1, 100, 0);
+            ctx.drawImage(bitmap1, 0, -50);
+            ctx.drawImage(bitmap1, 0, 50);
+            @assert pixel 0,0 ==~ 0,255,0,255;
+            @assert pixel 99,0 ==~ 0,255,0,255;
+            @assert pixel 0,49 ==~ 0,255,0,255;
+            @assert pixel 99,49 ==~ 0,255,0,255;
+        }, t_fail);
+    }).then(t_pass, t_fail);
+
+- name: 2d.drawImage.5arg
+  testing:
+  - 2d.drawImage.defaultsource
+  images:
+  - red.png
+  - green.png
+  timeout: long
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    var promise1 = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/red.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    var promise2 = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/green.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    Promise.all([promise1, promise2]).then(function(response1, response2) {
+        var promise3 = createImageBitmap(response1);
+        var promise4 = createImageBitmap(response2);
+        Promise.all([promise3, promise4]).then(function(bitmap1, bitmap2) {
+            ctx.drawImage(bitmap2, 50, 0, 50, 50);
+            ctx.drawImage(bitmap1, 0, 0, 50, 50);
+            ctx.fillStyle = '#0f0';
+            ctx.fillRect(0, 0, 50, 50);
+            @assert pixel 0,0 ==~ 0,255,0,255;
+            @assert pixel 99,0 ==~ 0,255,0,255;
+            @assert pixel 0,49 ==~ 0,255,0,255;
+            @assert pixel 99,49 ==~ 0,255,0,255;
+        }, t_fail);
+    }).then(t_pass, t_fail);
+
+- name: 2d.drawImage.9arg.basic
+  testing:
+  - 2d.drawImage.paint
+  images:
+  - green.png
+  timeout: long
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    var promise = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/green.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    promise.then(function(response) {
+        createImageBitmap(response).then(bitmap => {
+            ctx.drawImage(bitmap, 0, 0, 100, 50, 0, 0, 100, 50);
+            @assert pixel 0,0 ==~ 0,255,0,255;
+            @assert pixel 99,0 ==~ 0,255,0,255;
+            @assert pixel 0,49 ==~ 0,255,0,255;
+            @assert pixel 99,49 ==~ 0,255,0,255;
+        }, t_fail);
+    }).then(t_pass, t_fail);
+
+- name: 2d.drawImage.9arg.sourcepos
+  testing:
+  - 2d.drawImage.paint
+  images:
+  - rgrg-256x256.png
+  timeout: long
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    var promise = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/rgrg-256x256.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    promise.then(function(response) {
+        createImageBitmap(response).then(bitmap => {
+            ctx.drawImage(bitmap, 140, 20, 100, 50, 0, 0, 100, 50);
+            @assert pixel 0,0 ==~ 0,255,0,255;
+            @assert pixel 99,0 ==~ 0,255,0,255;
+            @assert pixel 0,49 ==~ 0,255,0,255;
+            @assert pixel 99,49 ==~ 0,255,0,255;
+        }, t_fail);
+    }).then(t_pass, t_fail);
+
+- name: 2d.drawImage.9arg.sourcesize
+  testing:
+  - 2d.drawImage.paint
+  images:
+  - rgrg-256x256.png
+  timeout: long
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    var promise = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/rgrg-256x256.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    promise.then(function(response) {
+        createImageBitmap(response).then(bitmap => {
+            ctx.drawImage(bitmap, 0, 0, 256, 256, 0, 0, 100, 50);
+            ctx.fillStyle = '#0f0';
+            ctx.fillRect(0, 0, 51, 26);
+            ctx.fillRect(49, 24, 51, 26);
+            @assert pixel 0,0 ==~ 0,255,0,255;
+            @assert pixel 99,0 ==~ 0,255,0,255;
+            @assert pixel 0,49 ==~ 0,255,0,255;
+            @assert pixel 99,49 ==~ 0,255,0,255;
+            @assert pixel 20,20 ==~ 0,255,0,255;
+            @assert pixel 80,20 ==~ 0,255,0,255;
+            @assert pixel 20,30 ==~ 0,255,0,255;
+            @assert pixel 80,30 ==~ 0,255,0,255;
+        }, t_fail);
+    }).then(t_pass, t_fail);
+
+- name: 2d.drawImage.9arg.destpos
+  testing:
+  - 2d.drawImage.paint
+  images:
+  - red.png
+  - green.png
+  timeout: long
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    var promise1 = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/red.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    var promise2 = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/green.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    Promise.all([promise1, promise2]).then(function(response1, response2) {
+        var promise3 = createImageBitmap(response1);
+        var promise4 = createImageBitmap(response2);
+        Promise.all([promise3, promise4]).then(function(bitmap1, bitmap2) {
+            ctx.drawImage(bitmap2, 0, 0, 100, 50, 0, 0, 100, 50);
+            ctx.drawImage(bitmap1, 0, 0, 100, 50, -100, 0, 100, 50);
+            ctx.drawImage(bitmap1, 0, 0, 100, 50, 100, 0, 100, 50);
+            ctx.drawImage(bitmap1, 0, 0, 100, 50, 0, -50, 100, 50);
+            ctx.drawImage(bitmap1, 0, 0, 100, 50, 0, 50, 100, 50);
+            @assert pixel 0,0 ==~ 0,255,0,255;
+            @assert pixel 99,0 ==~ 0,255,0,255;
+            @assert pixel 0,49 ==~ 0,255,0,255;
+            @assert pixel 99,49 ==~ 0,255,0,255;
+        }, t_fail);
+    }).then(t_pass, t_fail);
+
+- name: 2d.drawImage.9arg.destsize
+  testing:
+  - 2d.drawImage.paint
+  images:
+  - red.png
+  - green.png
+  timeout: long
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    var promise1 = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/red.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    var promise2 = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/green.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    Promise.all([promise1, promise2]).then(function(response1, response2) {
+        var promise3 = createImageBitmap(response1);
+        var promise4 = createImageBitmap(response2);
+        Promise.all([promise3, promise4]).then(function(bitmap1, bitmap2) {
+            ctx.drawImage(bitmap2, 1, 1, 1, 1, 0, 0, 100, 50);
+            ctx.drawImage(bitmap1, 0, 0, 100, 50, -50, 0, 50, 50);
+            ctx.drawImage(bitmap1, 0, 0, 100, 50, 100, 0, 50, 50);
+            ctx.drawImage(bitmap1, 0, 0, 100, 50, 0, -25, 100, 25);
+            ctx.drawImage(bitmap1, 0, 0, 100, 50, 0, 50, 100, 25);
+            @assert pixel 0,0 ==~ 0,255,0,255;
+            @assert pixel 99,0 ==~ 0,255,0,255;
+            @assert pixel 0,49 ==~ 0,255,0,255;
+            @assert pixel 99,49 ==~ 0,255,0,255;
+        }, t_fail);
+    }).then(t_pass, t_fail);
+
+- name: 2d.drawImage.canvas
+  testing:
+  - 2d.drawImage.paint
+  timeout: long
+  code: |
+    var offscreenCanvas2 = new OffscreenCanvas(100, 50);
+    var ctx2 = offscreenCanvas2.getContext('2d');
+    ctx2.fillStyle = '#0f0';
+    ctx2.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#f00';
+    ctx.drawImage(offscreenCanvas2, 0, 0);
+    @assert pixel 0,0 ==~ 0,255,0,255;
+    @assert pixel 99,0 ==~ 0,255,0,255;
+    @assert pixel 0,49 ==~ 0,255,0,255;
+    @assert pixel 99,49 ==~ 0,255,0,255;
+    t.done();
+
+- name: 2d.drawImage.self.1
+  testing:
+  - 2d.drawImage.self
+  timeout: long
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 50, 50);
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(50, 0, 50, 50);
+    ctx.drawImage(offscreenCanvas, 50, 0);
+    @assert pixel 0,0 ==~ 0,255,0,255;
+    @assert pixel 99,0 ==~ 0,255,0,255;
+    @assert pixel 0,49 ==~ 0,255,0,255;
+    @assert pixel 99,49 ==~ 0,255,0,255;
+    t.done();
+
+- name: 2d.drawImage.self.2
+  testing:
+  - 2d.drawImage.self
+  timeout: long
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 1, 100, 49);
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 1);
+    ctx.drawImage(offscreenCanvas, 0, 1);
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 2);
+    @assert pixel 0,0 ==~ 0,255,0,255;
+    @assert pixel 99,0 ==~ 0,255,0,255;
+    @assert pixel 0,49 ==~ 0,255,0,255;
+    @assert pixel 99,49 ==~ 0,255,0,255;
+    t.done();
+
+- name: 2d.drawImage.null
+  testing:
+  - 2d.drawImage.IDL
+  timeout: long
+  code: |
+    @assert throws TypeError ctx.drawImage(null, 0, 0);
+    t.done();
+
+- name: 2d.drawImage.zerocanvas
+  testing:
+  - 2d.drawImage.zerocanvas
+  timeout: long
+  code: |
+    var offscreenCanvas2 = new OffscreenCanvas(0, 10);
+    @assert throws INVALID_STATE_ERR ctx.drawImage(offscreenCanvas2, 0, 0);
+
+    offscreenCanvas2.width = 10;
+    offscreenCanvas2.height = 0;
+    @assert throws INVALID_STATE_ERR ctx.drawImage(offscreenCanvas2, 0, 0);
+
+    offscreenCanvas2.width = 0;
+    offscreenCanvas2.height = 0;
+    @assert throws INVALID_STATE_ERR ctx.drawImage(offscreenCanvas2, 0, 0);
+    t.done();
+
+- name: 2d.drawImage.wrongtype
+  desc: Incorrect image types in drawImage do not match any defined overloads, so
+    WebIDL throws a TypeError
+  testing:
+  - 2d.drawImage.IDL
+  timeout: long
+  code: |
+    @assert throws TypeError ctx.drawImage(undefined, 0, 0);
+    @assert throws TypeError ctx.drawImage(0, 0, 0);
+    @assert throws TypeError ctx.drawImage("", 0, 0);
+    t.done();
+
+- name: 2d.drawImage.floatsource
+  testing:
+  - 2d.drawImage.paint
+  timeout: long
+  code: |
+    var promise = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/green.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    promise.then(function(response) {
+        createImageBitmap(response).then(bitmap => {
+            ctx.drawImage(bitmap, 10.1, 10.1, 0.1, 0.1, 0, 0, 100, 50);
+            @assert pixel 50,25 ==~ 0,255,0,255;
+        }, t_fail);
+    }).then(t_pass, t_fail);
+
+- name: 2d.drawImage.zerosource
+  desc: drawImage with zero-sized source rectangle throws INDEX_SIZE_ERR
+  testing:
+  - 2d.drawImage.zerosource
+  timeout: long
+  images:
+  - red.png
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    var promise = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/green.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    promise.then(function(response) {
+        createImageBitmap(response).then(bitmap => {
+            @assert throws INDEX_SIZE_ERR ctx.drawImage(bitmap, 10, 10, 0, 1, 0, 0, 100, 50);
+            @assert throws INDEX_SIZE_ERR ctx.drawImage(bitmap, 10, 10, 1, 0, 0, 0, 100, 50);
+            @assert throws INDEX_SIZE_ERR ctx.drawImage(bitmap, 10, 10, 0, 0, 0, 0, 100, 50);
+            @assert pixel 50,25 ==~ 0,255,0,255;
+        }, t_fail);
+    }).then(t_pass, t_fail);
+
+- name: 2d.drawImage.zerosource.image
+  desc: drawImage with zero-sized source rectangle from image throws INDEX_SIZE_ERR
+  testing:
+  - 2d.drawImage.zerosource
+  images:
+  - red-zerowidth.svg
+  - red-zeroheight.svg
+  - red-zerosize.svg
+  timeout: long
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    var promise = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/red-zerowidth.svg');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    promise.then(function(response) {
+        createImageBitmap(response).then(bitmap => {
+            @assert throws INDEX_SIZE_ERR ctx.drawImage(bitmap, 0, 0, 100, 50);
+            @assert throws INDEX_SIZE_ERR ctx.drawImage(bitmap, 0, 0, 100, 50);
+            @assert throws INDEX_SIZE_ERR ctx.drawImage(bitmap, 0, 0, 100, 50);
+            @assert pixel 50,25 == 0,255,0,255;
+        }, t_fail);
+    }).then(t_pass, t_fail);
+
+- name: 2d.drawImage.negativesource
+  desc: Negative source width/height represents the correct rectangle
+  testing:
+  - 2d.drawImage.direction
+  mozilla: {throws: !!null ''}
+  images:
+  - ggrr-256x256.png
+  timeout: long
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    var promise = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/ggrr-256x256.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    promise.then(function(response) {
+        createImageBitmap(response).then(bitmap => {
+            ctx.drawImage(bitmap, 100, 78, -100, 50, 0, 0, 50, 50);
+            ctx.drawImage(bitmap, 100, 128, -100, -50, 50, 0, 50, 50);
+            @assert pixel 1,1 ==~ 0,255,0,255;
+            @assert pixel 1,48 ==~ 0,255,0,255;
+            @assert pixel 98,1 ==~ 0,255,0,255;
+            @assert pixel 98,48 ==~ 0,255,0,255;
+            @assert pixel 48,1 ==~ 0,255,0,255;
+            @assert pixel 48,48 ==~ 0,255,0,255;
+            @assert pixel 51,1 ==~ 0,255,0,255;
+            @assert pixel 51,48 ==~ 0,255,0,255;
+            @assert pixel 25,25 ==~ 0,255,0,255;
+            @assert pixel 75,25 ==~ 0,255,0,255;
+        }, t_fail);
+    }).then(t_pass, t_fail);
+
+- name: 2d.drawImage.negativedest
+  desc: Negative destination width/height represents the correct rectangle
+  testing:
+  - 2d.drawImage.direction
+  mozilla: {throws: !!null ''}
+  timeout: long
+  images:
+  - ggrr-256x256.png
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    var promise = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/ggrr-256x256.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    promise.then(function(response) {
+        createImageBitmap(response).then(bitmap => {
+            ctx.drawImage(bitmap, 100, 78, 50, 50, 0, 50, 50, -50);
+            ctx.drawImage(bitmap, 100, 128, 50, -50, 100, 50, -50, -50);
+            @assert pixel 1,1 ==~ 0,255,0,255;
+            @assert pixel 1,48 ==~ 0,255,0,255;
+            @assert pixel 98,1 ==~ 0,255,0,255;
+            @assert pixel 98,48 ==~ 0,255,0,255;
+            @assert pixel 48,1 ==~ 0,255,0,255;
+            @assert pixel 48,48 ==~ 0,255,0,255;
+            @assert pixel 51,1 ==~ 0,255,0,255;
+            @assert pixel 51,48 ==~ 0,255,0,255;
+            @assert pixel 25,25 ==~ 0,255,0,255;
+            @assert pixel 75,25 ==~ 0,255,0,255;
+        }, t_fail);
+    }).then(t_pass, t_fail);
+
+- name: 2d.drawImage.negativedir
+  desc: Negative dimensions do not affect the direction of the image
+  testing:
+  - 2d.drawImage.direction
+  mozilla: {throws: !!null ''}
+  timeout: long
+  images:
+  - ggrr-256x256.png
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    var promise = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/ggrr-256x256.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    promise.then(function(response) {
+        createImageBitmap(response).then(bitmap => {
+            ctx.drawImage(bitmap, 0, 178, 50, -100, 0, 0, 50, 100);
+            ctx.drawImage(bitmap, 0, 78, 50, 100, 50, 100, 50, -100);
+            @assert pixel 1,1 ==~ 0,255,0,255;
+            @assert pixel 1,48 ==~ 0,255,0,255;
+            @assert pixel 98,1 ==~ 0,255,0,255;
+            @assert pixel 98,48 ==~ 0,255,0,255;
+            @assert pixel 48,1 ==~ 0,255,0,255;
+            @assert pixel 48,48 ==~ 0,255,0,255;
+            @assert pixel 51,1 ==~ 0,255,0,255;
+            @assert pixel 51,48 ==~ 0,255,0,255;
+            @assert pixel 25,25 ==~ 0,255,0,255;
+            @assert pixel 75,25 ==~ 0,255,0,255;
+        }, t_fail);
+    }).then(t_pass, t_fail);
+
+- name: 2d.drawImage.outsidesource
+  DISABLED: fix this to match the current spec (transparent black outside source)
+  testing:
+  - 2d.drawImage.outsidesource
+  code: |
+    var promise1 = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/red.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    var promise2 = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/green.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    Promise.all([promise1, promise2]).then(function(response1, response2) {
+        var promise3 = createImageBitmap(response1);
+        var promise4 = createImageBitmap(response2);
+        Promise.all([promise3, promise4]).then(function(bitmap1, bitmap2) {
+            ctx.drawImage(bitmap2, 10.5, 10.5, 89.5, 39.5, 0, 0, 100, 50);
+            ctx.drawImage(bitmap2, 5.5, 5.5, -5.5, -5.5, 0, 0, 100, 50);
+            ctx.drawImage(bitmap2, 100, 50, -5, -5, 0, 0, 100, 50);
+            @assert throws INDEX_SIZE_ERR ctx.drawImage(bitmap1, -0.001, 0, 100, 50, 0, 0, 100, 50);
+            @assert throws INDEX_SIZE_ERR ctx.drawImage(bitmap1, 0, -0.001, 100, 50, 0, 0, 100, 50);
+            @assert throws INDEX_SIZE_ERR ctx.drawImage(bitmap1, 0, 0, 100.001, 50, 0, 0, 100, 50);
+            @assert throws INDEX_SIZE_ERR ctx.drawImage(bitmap1, 0, 0, 100, 50.001, 0, 0, 100, 50);
+            @assert throws INDEX_SIZE_ERR ctx.drawImage(bitmap1, 50, 0, 50.001, 50, 0, 0, 100, 50); @moz-todo
+            @assert throws INDEX_SIZE_ERR ctx.drawImage(bitmap1, 0, 0, -5, 5, 0, 0, 100, 50);
+            @assert throws INDEX_SIZE_ERR ctx.drawImage(bitmap1, 0, 0, 5, -5, 0, 0, 100, 50);
+            @assert throws INDEX_SIZE_ERR ctx.drawImage(bitmap1, 110, 60, -20, -20, 0, 0, 100, 50);
+            @assert pixel 50,25 ==~ 0,255,0,255; @moz-todo
+        }, t_fail);
+    }).then(t_pass, t_fail);
+
+- name: 2d.drawImage.broken
+  testing:
+  - 2d.drawImage.incomplete.image
+  timeout: long
+  code: |
+    var promise = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/broken.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    promise.then(function(response) {
+        createImageBitmap(response).then(bitmap => {
+            ctx.fillStyle = '#0f0';
+            ctx.fillRect(0, 0, 100, 50);
+            ctx.drawImage(bitmap, 0, 0);
+            @assert pixel 50,25 ==~ 0,255,0,255; @moz-todo
+        }, t_fail);
+    }).then(t_pass, t_fail);
+
+- name: 2d.drawImage.svg
+  desc: drawImage() of an SVG image
+  testing:
+  - 2d.drawImage.svg
+  timeout: long
+  code: |
+    var promise = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/green.svg');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    promise.then(function(response) {
+        createImageBitmap(response).then(bitmap => {
+            ctx.drawImage(bitmap, 0, 0);
+            @assert pixel 50,25 ==~ 0,255,0,255;
+        }, t_fail);
+    }).then(t_pass, t_fail);
+
+- name: 2d.drawImage.animated.poster
+  desc: drawImage() of an APNG draws the poster frame
+  testing:
+  - 2d.drawImage.animated.image
+  images:
+  - anim-poster-gr.png
+  timeout: long
+  code: |
+    var promise = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/anim-poster-gr.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    promise.then(function(response) {
+        createImageBitmap(response).then(bitmap => {
+            ctx.drawImage(bitmap, 0, 0);
+            @assert pixel 50,25 ==~ 0,255,0,255; @moz-todo
+        }, t_fail);
+    }).then(t_pass, t_fail);
+
+- name: 2d.drawImage.path
+  testing:
+  - 2d.drawImage.unaffect
+  timeout: long
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.rect(0, 0, 100, 50);
+    var promise = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/red.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    promise.then(function(response) {
+        createImageBitmap(response).then(bitmap => {
+            ctx.drawImage(bitmap, 0, 0);
+            ctx.fill();
+            @assert pixel 50,25 ==~ 0,255,0,255;
+        }, t_fail);
+    }).then(t_pass, t_fail);
+
+- name: 2d.drawImage.transform
+  testing:
+  - 2d.drawImage.subject
+  images:
+  - red.png
+  timeout: long
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.translate(100, 0);
+    var promise = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/red.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    promise.then(function(response) {
+        createImageBitmap(response).then(bitmap => {
+            ctx.drawImage(bitmap, 0, 0);
+            @assert pixel 50,25 ==~ 0,255,0,255;
+        }, t_fail);
+    }).then(t_pass, t_fail);
+
+- name: 2d.drawImage.alpha
+  testing:
+  - 2d.drawImage.subject
+  images:
+  - red.png
+  timeout: long
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.globalAlpha = 0;
+    var promise = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/red.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    promise.then(function(response) {
+        createImageBitmap(response).then(bitmap => {
+            ctx.drawImage(bitmap, 0, 0);
+            @assert pixel 50,25 ==~ 0,255,0,255;
+        }, t_fail);
+    }).then(t_pass, t_fail);
+
+- name: 2d.drawImage.clip
+  testing:
+  - 2d.drawImage.subject
+  images:
+  - red.png
+  timeout: long
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.rect(-10, -10, 1, 1);
+    ctx.clip();
+    var promise = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/red.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    promise.then(function(response) {
+        createImageBitmap(response).then(bitmap => {
+            ctx.drawImage(bitmap, 0, 0);
+            @assert pixel 50,25 ==~ 0,255,0,255;
+        }, t_fail);
+    }).then(t_pass, t_fail);
+
+- name: 2d.drawImage.composite
+  testing:
+  - 2d.drawImage.subject
+  images:
+  - red.png
+  timeout: long
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.globalCompositeOperation = 'destination-over';
+    var promise = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/red.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    promise.then(function(response) {
+        createImageBitmap(response).then(bitmap => {
+            ctx.drawImage(bitmap, 0, 0);
+            @assert pixel 50,25 ==~ 0,255,0,255;
+        }, t_fail);
+    }).then(t_pass, t_fail);
+
+- name: 2d.drawImage.nowrap
+  desc: Stretched images do not get pixels wrapping around the edges
+  images:
+  - redtransparent.png
+  timeout: long
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    var promise = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/redtransparent.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    promise.then(function(response) {
+        createImageBitmap(response).then(bitmap => {
+            ctx.drawImage(bitmap, -1950, 0, 2000, 50);
+            @assert pixel 45,25 ==~ 0,255,0,255;
+            @assert pixel 50,25 ==~ 0,255,0,255;
+            @assert pixel 55,25 ==~ 0,255,0,255;
+        }, t_fail);
+    }).then(t_pass, t_fail);
+
+- name: 2d.drawImage.nonfinite
+  desc: drawImage() with Infinity/NaN is ignored
+  testing:
+  - 2d.nonfinite
+  images:
+  - red.png
+  timeout: long
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    var promise = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/redtransparent.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    promise.then(function(response) {
+        createImageBitmap(response).then(bitmap => {
+            @nonfinite ctx.drawImage(<bitmap>, <0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>);
+            @nonfinite ctx.drawImage(<bitmap>, <0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <100 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>);
+            @nonfinite ctx.drawImage(<bitmap>, <0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <100 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <100 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>);
+            @assert pixel 50,25 == 0,255,0,255;
+        }, t_fail);
+    }).then(t_pass, t_fail);
+
diff --git a/tests/wpt/web-platform-tests/html/canvas/tools/yaml/offscreen/drawing-rectangles-to-the-canvas.yaml b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/offscreen/drawing-rectangles-to-the-canvas.yaml
new file mode 100644
index 00000000000..4903aa2f428
--- /dev/null
+++ b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/offscreen/drawing-rectangles-to-the-canvas.yaml
@@ -0,0 +1,438 @@
+- name: 2d.clearRect.basic
+  desc: clearRect clears to transparent black
+  testing:
+  - 2d.clearRect
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.clearRect(0, 0, 100, 50);
+    @assert pixel 50,25 == 0,0,0,0;
+    t.done();
+
+- name: 2d.clearRect.path
+  desc: clearRect does not affect the current path
+  testing:
+  - 2d.clearRect
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.beginPath();
+    ctx.rect(0, 0, 100, 50);
+    ctx.clearRect(0, 0, 16, 16);
+    ctx.fill();
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.clearRect.zero
+  desc: clearRect of zero pixels has no effect
+  testing:
+  - 2d.clearRect
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.clearRect(0, 0, 100, 0);
+    ctx.clearRect(0, 0, 0, 50);
+    ctx.clearRect(0, 0, 0, 0);
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.clearRect.negative
+  desc: clearRect of negative sizes works
+  testing:
+  - 2d.clearRect
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.clearRect(0, 0, 50, 25);
+    ctx.clearRect(100, 0, -50, 25);
+    ctx.clearRect(0, 50, 50, -25);
+    ctx.clearRect(100, 50, -50, -25);
+    @assert pixel 25,12 == 0,0,0,0;
+    @assert pixel 75,12 == 0,0,0,0;
+    @assert pixel 25,37 == 0,0,0,0;
+    @assert pixel 75,37 == 0,0,0,0;
+    t.done();
+
+- name: 2d.clearRect.transform
+  desc: clearRect is affected by transforms
+  testing:
+  - 2d.clearRect
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.scale(10, 10);
+    ctx.translate(0, 5);
+    ctx.clearRect(0, -5, 10, 5);
+    @assert pixel 50,25 == 0,0,0,0;
+    t.done();
+
+- name: 2d.clearRect.globalalpha
+  desc: clearRect is not affected by globalAlpha
+  testing:
+  - 2d.clearRect
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.globalAlpha = 0.1;
+    ctx.clearRect(0, 0, 100, 50);
+    @assert pixel 50,25 == 0,0,0,0;
+    t.done();
+
+- name: 2d.clearRect.globalcomposite
+  desc: clearRect is not affected by globalCompositeOperation
+  testing:
+  - 2d.clearRect
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.globalCompositeOperation = 'destination-atop';
+    ctx.clearRect(0, 0, 100, 50);
+    @assert pixel 50,25 == 0,0,0,0;
+    t.done();
+
+- name: 2d.clearRect.clip
+  desc: clearRect is affected by clipping regions
+  testing:
+  - 2d.clearRect
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.beginPath();
+    ctx.rect(0, 0, 16, 16);
+    ctx.clip();
+    ctx.clearRect(0, 0, 100, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 16, 16);
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.clearRect.shadow
+  desc: clearRect does not draw shadows
+  testing:
+  - 2d.clearRect
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.shadowColor = '#f00';
+    ctx.shadowBlur = 0;
+    ctx.shadowOffsetX = 0;
+    ctx.shadowOffsetY = 50;
+    ctx.clearRect(0, -50, 100, 50);
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.clearRect.nonfinite
+  desc: clearRect() with Infinity/NaN is ignored
+  testing:
+  - 2d.nonfinite
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    @nonfinite ctx.clearRect(<0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <100 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>);
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.fillRect.basic
+  desc: fillRect works
+  testing:
+  - 2d.fillRect
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.fillRect.path
+  desc: fillRect does not affect the current path
+  testing:
+  - 2d.fillRect
+  code: |
+    ctx.beginPath();
+    ctx.rect(0, 0, 100, 50);
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 16, 16);
+    ctx.fillStyle = '#0f0';
+    ctx.fill();
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.fillRect.zero
+  desc: fillRect of zero pixels has no effect
+  testing:
+  - 2d.fillRect
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 0);
+    ctx.fillRect(0, 0, 0, 50);
+    ctx.fillRect(0, 0, 0, 0);
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.fillRect.negative
+  desc: fillRect of negative sizes works
+  testing:
+  - 2d.fillRect
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 50, 25);
+    ctx.fillRect(100, 0, -50, 25);
+    ctx.fillRect(0, 50, 50, -25);
+    ctx.fillRect(100, 50, -50, -25);
+    @assert pixel 25,12 == 0,255,0,255;
+    @assert pixel 75,12 == 0,255,0,255;
+    @assert pixel 25,37 == 0,255,0,255;
+    @assert pixel 75,37 == 0,255,0,255;
+    t.done();
+
+- name: 2d.fillRect.transform
+  desc: fillRect is affected by transforms
+  testing:
+  - 2d.fillRect
+  code: |
+    ctx.scale(10, 10);
+    ctx.translate(0, 5);
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, -5, 10, 5);
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+# don't bother testing globalalpha, globalcomposite because they're already heavily used by other test cases
+
+- name: 2d.fillRect.clip
+  desc: fillRect is affected by clipping regions
+  testing:
+  - 2d.fillRect
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.beginPath();
+    ctx.rect(0, 0, 16, 16);
+    ctx.clip();
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 16, 16);
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.fillRect.shadow
+  desc: fillRect draws shadows
+  testing:
+  - 2d.fillRect
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.shadowColor = '#0f0';
+    ctx.shadowBlur = 0;
+    ctx.shadowOffsetX = 0;
+    ctx.shadowOffsetY = 50;
+    ctx.fillRect(0, -50, 100, 50);
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.fillRect.nonfinite
+  desc: fillRect() with Infinity/NaN is ignored
+  testing:
+  - 2d.nonfinite
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#f00';
+    @nonfinite ctx.fillRect(<0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <100 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>);
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.strokeRect.basic
+  desc: strokeRect works
+  testing:
+  - 2d.strokeRect
+  code: |
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 50;
+    ctx.strokeRect(25, 24, 50, 2);
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.strokeRect.path
+  desc: strokeRect does not affect the current path
+  testing:
+  - 2d.strokeRect
+  code: |
+    ctx.beginPath();
+    ctx.rect(0, 0, 100, 50);
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 5;
+    ctx.strokeRect(0, 0, 16, 16);
+    ctx.fillStyle = '#0f0';
+    ctx.fill();
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.strokeRect.zero.1
+  desc: strokeRect of 0x0 pixels draws nothing
+  testing:
+  - 2d.strokeRect
+  code: |
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 250;
+    ctx.strokeRect(50, 25, 0, 0);
+    @assert pixel 50,25 == 0,0,0,0;
+    t.done();
+
+- name: 2d.strokeRect.zero.2
+  desc: strokeRect of 0x0 pixels draws nothing, including caps and joins
+  testing:
+  - 2d.strokeRect
+  code: |
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 250;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+    ctx.strokeRect(50, 25, 0, 0);
+    @assert pixel 50,25 == 0,0,0,0;
+    t.done();
+
+- name: 2d.strokeRect.zero.3
+  desc: strokeRect of Nx0 pixels draws a straight line
+  testing:
+  - 2d.strokeRect
+  code: |
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 50;
+    ctx.strokeRect(0, 25, 100, 0);
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.strokeRect.zero.4
+  desc: strokeRect of Nx0 pixels draws a closed line with no caps
+  testing:
+  - 2d.strokeRect
+  code: |
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 250;
+    ctx.lineCap = 'round';
+    ctx.strokeRect(100, 25, 100, 0);
+    @assert pixel 50,25 == 0,0,0,0;
+    t.done();
+
+- name: 2d.strokeRect.zero.5
+  desc: strokeRect of Nx0 pixels draws a closed line with joins
+  testing:
+  - 2d.strokeRect
+  code: |
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 250;
+    ctx.lineJoin = 'round';
+    ctx.strokeRect(100, 25, 100, 0);
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.strokeRect.negative
+  desc: strokeRect of negative sizes works
+  testing:
+  - 2d.strokeRect
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 25;
+    ctx.strokeRect(12, 12, 26, 1);
+    ctx.strokeRect(88, 12, -26, 1);
+    ctx.strokeRect(12, 38, 26, -1);
+    ctx.strokeRect(88, 38, -26, -1);
+    @assert pixel 25,12 == 0,255,0,255;
+    @assert pixel 75,12 == 0,255,0,255;
+    @assert pixel 25,37 == 0,255,0,255;
+    @assert pixel 75,37 == 0,255,0,255;
+    t.done();
+
+- name: 2d.strokeRect.transform
+  desc: fillRect is affected by transforms
+  testing:
+  - 2d.strokeRect
+  code: |
+    ctx.scale(10, 10);
+    ctx.translate(0, 5);
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 5;
+    ctx.strokeRect(2.5, -2.6, 5, 0.2);
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.strokeRect.globalalpha
+  desc: strokeRect is affected by globalAlpha
+  testing:
+  - 2d.strokeRect
+  code: |
+    ctx.globalAlpha = 0;
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 50;
+    ctx.strokeRect(25, 24, 50, 2);
+    @assert pixel 50,25 == 0,0,0,0;
+    t.done();
+
+- name: 2d.strokeRect.globalcomposite
+  desc: strokeRect is not affected by globalCompositeOperation
+  testing:
+  - 2d.strokeRect
+  code: |
+    ctx.globalCompositeOperation = 'source-in';
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 50;
+    ctx.strokeRect(25, 24, 50, 2);
+    @assert pixel 50,25 == 0,0,0,0;
+    t.done();
+
+- name: 2d.strokeRect.clip
+  desc: strokeRect is affected by clipping regions
+  testing:
+  - 2d.strokeRect
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.beginPath();
+    ctx.rect(0, 0, 16, 16);
+    ctx.clip();
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 50;
+    ctx.strokeRect(0, 0, 100, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 16, 16);
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.strokeRect.shadow
+  desc: strokeRect draws shadows
+  testing:
+  - 2d.strokeRect
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#f00';
+    ctx.shadowColor = '#0f0';
+    ctx.shadowBlur = 0;
+    ctx.shadowOffsetX = 0;
+    ctx.shadowOffsetY = 50;
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 50;
+    ctx.strokeRect(0, -75, 100, 50);
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.strokeRect.nonfinite
+  desc: strokeRect() with Infinity/NaN is ignored
+  testing:
+  - 2d.nonfinite
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 150;
+    @nonfinite ctx.strokeRect(<0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <100 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>);
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+
diff --git a/tests/wpt/web-platform-tests/html/canvas/tools/yaml/offscreen/fill-and-stroke-styles.yaml b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/offscreen/fill-and-stroke-styles.yaml
new file mode 100644
index 00000000000..2554d48d268
--- /dev/null
+++ b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/offscreen/fill-and-stroke-styles.yaml
@@ -0,0 +1,1697 @@
+- name: 2d.fillStyle.invalidstring
+  testing:
+  - 2d.colours.invalidstring
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.fillStyle = 'invalid';
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.fillStyle.invalidtype
+  testing:
+  - 2d.colours.invalidtype
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.fillStyle = null;
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.fillStyle.get.solid
+  testing:
+  - 2d.colours.getcolour
+  - 2d.serializecolour.solid
+  code: |
+    ctx.fillStyle = '#fa0';
+    @assert ctx.fillStyle === '#ffaa00';
+    t.done();
+
+- name: 2d.fillStyle.get.semitransparent
+  testing:
+  - 2d.colours.getcolour
+  - 2d.serializecolour.transparent
+  code: |
+    ctx.fillStyle = 'rgba(255,255,255,0.45)';
+    @assert ctx.fillStyle =~ /^rgba\(255, 255, 255, 0\.4\d+\)$/;
+    t.done();
+
+- name: 2d.fillStyle.get.transparent
+  testing:
+  - 2d.colours.getcolour
+  - 2d.serializecolour.transparent
+  code: |
+    ctx.fillStyle = 'rgba(0,0,0,0)';
+    @assert ctx.fillStyle === 'rgba(0, 0, 0, 0)';
+    t.done();
+
+- name: 2d.fillStyle.default
+  testing:
+  - 2d.colours.default
+  code: |
+    @assert ctx.fillStyle === '#000000';
+    t.done();
+
+- name: 2d.strokeStyle.default
+  testing:
+  - 2d.colours.default
+  code: |
+    @assert ctx.strokeStyle === '#000000';
+    t.done();
+
+- name: 2d.gradient.interpolate.solid
+  testing:
+  - 2d.gradient.interpolate.linear
+  code: |
+    var g = ctx.createLinearGradient(0, 0, 100, 0);
+    g.addColorStop(0, '#0f0');
+    g.addColorStop(1, '#0f0');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.gradient.interpolate.colour
+  testing:
+  - 2d.gradient.interpolate.linear
+  code: |
+    var g = ctx.createLinearGradient(0, 0, 100, 0);
+    g.addColorStop(0, '#ff0');
+    g.addColorStop(1, '#00f');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 25,25 ==~ 191,191,63,255 +/- 3;
+    @assert pixel 50,25 ==~ 127,127,127,255 +/- 3;
+    @assert pixel 75,25 ==~ 63,63,191,255 +/- 3;
+    t.done();
+
+- name: 2d.gradient.interpolate.alpha
+  testing:
+  - 2d.gradient.interpolate.linear
+  code: |
+    ctx.fillStyle = '#ff0';
+    ctx.fillRect(0, 0, 100, 50);
+    var g = ctx.createLinearGradient(0, 0, 100, 0);
+    g.addColorStop(0, 'rgba(0,0,255, 0)');
+    g.addColorStop(1, 'rgba(0,0,255, 1)');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 25,25 ==~ 191,191,63,255 +/- 3;
+    @assert pixel 50,25 ==~ 127,127,127,255 +/- 3;
+    @assert pixel 75,25 ==~ 63,63,191,255 +/- 3;
+    t.done();
+
+- name: 2d.gradient.interpolate.colouralpha
+  testing:
+  - 2d.gradient.interpolate.alpha
+  code: |
+    var g = ctx.createLinearGradient(0, 0, 100, 0);
+    g.addColorStop(0, 'rgba(255,255,0, 0)');
+    g.addColorStop(1, 'rgba(0,0,255, 1)');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 25,25 ==~ 190,190,65,65 +/- 3;
+    @assert pixel 50,25 ==~ 126,126,128,128 +/- 3;
+    @assert pixel 75,25 ==~ 62,62,192,192 +/- 3;
+    t.done();
+
+- name: 2d.gradient.interpolate.outside
+  testing:
+  - 2d.gradient.outside.first
+  - 2d.gradient.outside.last
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    var g = ctx.createLinearGradient(25, 0, 75, 0);
+    g.addColorStop(0.4, '#0f0');
+    g.addColorStop(0.6, '#0f0');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 20,25 ==~ 0,255,0,255;
+    @assert pixel 50,25 ==~ 0,255,0,255;
+    @assert pixel 80,25 ==~ 0,255,0,255;
+    t.done();
+
+- name: 2d.gradient.interpolate.zerosize.fill
+  testing:
+  - 2d.gradient.linear.zerosize
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    var g = ctx.createLinearGradient(50, 25, 50, 25); // zero-length line (undefined direction)
+    g.addColorStop(0, '#f00');
+    g.addColorStop(1, '#f00');
+    ctx.fillStyle = g;
+    ctx.rect(0, 0, 100, 50);
+    ctx.fill();
+    @assert pixel 40,20 == 0,255,0,255;
+    t.done();
+
+- name: 2d.gradient.interpolate.zerosize.stroke
+  testing:
+  - 2d.gradient.linear.zerosize
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    var g = ctx.createLinearGradient(50, 25, 50, 25); // zero-length line (undefined direction)
+    g.addColorStop(0, '#f00');
+    g.addColorStop(1, '#f00');
+    ctx.strokeStyle = g;
+    ctx.rect(20, 20, 60, 10);
+    ctx.stroke();
+    @assert pixel 19,19 == 0,255,0,255;
+    @assert pixel 20,19 == 0,255,0,255;
+    @assert pixel 21,19 == 0,255,0,255;
+    @assert pixel 19,20 == 0,255,0,255;
+    @assert pixel 20,20 == 0,255,0,255;
+    @assert pixel 21,20 == 0,255,0,255;
+    @assert pixel 19,21 == 0,255,0,255;
+    @assert pixel 20,21 == 0,255,0,255;
+    @assert pixel 21,21 == 0,255,0,255;
+    t.done();
+
+- name: 2d.gradient.interpolate.zerosize.fillRect
+  testing:
+  - 2d.gradient.linear.zerosize
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    var g = ctx.createLinearGradient(50, 25, 50, 25); // zero-length line (undefined direction)
+    g.addColorStop(0, '#f00');
+    g.addColorStop(1, '#f00');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 40,20 == 0,255,0,255; @moz-todo
+    t.done();
+
+- name: 2d.gradient.interpolate.zerosize.strokeRect
+  testing:
+  - 2d.gradient.linear.zerosize
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    var g = ctx.createLinearGradient(50, 25, 50, 25); // zero-length line (undefined direction)
+    g.addColorStop(0, '#f00');
+    g.addColorStop(1, '#f00');
+    ctx.strokeStyle = g;
+    ctx.strokeRect(20, 20, 60, 10);
+    @assert pixel 19,19 == 0,255,0,255;
+    @assert pixel 20,19 == 0,255,0,255;
+    @assert pixel 21,19 == 0,255,0,255;
+    @assert pixel 19,20 == 0,255,0,255;
+    @assert pixel 20,20 == 0,255,0,255;
+    @assert pixel 21,20 == 0,255,0,255;
+    @assert pixel 19,21 == 0,255,0,255;
+    @assert pixel 20,21 == 0,255,0,255;
+    @assert pixel 21,21 == 0,255,0,255;
+    t.done();
+
+
+- name: 2d.gradient.interpolate.vertical
+  testing:
+  - 2d.gradient.interpolate.linear
+  code: |
+    var g = ctx.createLinearGradient(0, 0, 0, 50);
+    g.addColorStop(0, '#ff0');
+    g.addColorStop(1, '#00f');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 50,12 ==~ 191,191,63,255 +/- 10;
+    @assert pixel 50,25 ==~ 127,127,127,255 +/- 5;
+    @assert pixel 50,37 ==~ 63,63,191,255 +/- 10;
+    t.done();
+
+- name: 2d.gradient.interpolate.multiple
+  testing:
+  - 2d.gradient.interpolate.linear
+  code: |
+    offscreenCanvas.width = 200;
+    var g = ctx.createLinearGradient(0, 0, 200, 0);
+    g.addColorStop(0, '#ff0');
+    g.addColorStop(0.5, '#0ff');
+    g.addColorStop(1, '#f0f');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 200, 50);
+    @assert pixel 50,25 ==~ 127,255,127,255 +/- 3;
+    @assert pixel 100,25 ==~ 0,255,255,255 +/- 3;
+    @assert pixel 150,25 ==~ 127,127,255,255 +/- 3;
+    t.done();
+
+- name: 2d.gradient.interpolate.overlap
+  testing:
+  - 2d.gradient.interpolate.overlap
+  code: |
+    offscreenCanvas.width = 200;
+    var g = ctx.createLinearGradient(0, 0, 200, 0);
+    g.addColorStop(0, '#f00');
+    g.addColorStop(0, '#ff0');
+    g.addColorStop(0.25, '#00f');
+    g.addColorStop(0.25, '#0f0');
+    g.addColorStop(0.25, '#0f0');
+    g.addColorStop(0.25, '#0f0');
+    g.addColorStop(0.25, '#ff0');
+    g.addColorStop(0.5, '#00f');
+    g.addColorStop(0.5, '#0f0');
+    g.addColorStop(0.75, '#00f');
+    g.addColorStop(0.75, '#f00');
+    g.addColorStop(0.75, '#ff0');
+    g.addColorStop(0.5, '#0f0');
+    g.addColorStop(0.5, '#0f0');
+    g.addColorStop(0.5, '#ff0');
+    g.addColorStop(1, '#00f');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 200, 50);
+    @assert pixel 49,25 ==~ 0,0,255,255 +/- 16;
+    @assert pixel 51,25 ==~ 255,255,0,255 +/- 16;
+    @assert pixel 99,25 ==~ 0,0,255,255 +/- 16;
+    @assert pixel 101,25 ==~ 255,255,0,255 +/- 16;
+    @assert pixel 149,25 ==~ 0,0,255,255 +/- 16;
+    @assert pixel 151,25 ==~ 255,255,0,255 +/- 16;
+    t.done();
+
+- name: 2d.gradient.interpolate.overlap2
+  testing:
+  - 2d.gradient.interpolate.overlap
+  code: |
+    var g = ctx.createLinearGradient(0, 0, 100, 0);
+    var ps = [ 0, 1/10, 1/4, 1/3, 1/2, 3/4, 1 ];
+    for (var p = 0; p < ps.length; ++p)
+    {
+            g.addColorStop(ps[p], '#0f0');
+            for (var i = 0; i < 15; ++i)
+                    g.addColorStop(ps[p], '#f00');
+            g.addColorStop(ps[p], '#0f0');
+    }
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 1,25 == 0,255,0,255;
+    @assert pixel 30,25 == 0,255,0,255;
+    @assert pixel 40,25 == 0,255,0,255;
+    @assert pixel 60,25 == 0,255,0,255;
+    @assert pixel 80,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.gradient.empty
+  testing:
+  - 2d.gradient.empty
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    var g = ctx.createLinearGradient(0, 0, 0, 50);
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 50,25 ==~ 0,255,0,255;
+    t.done();
+
+- name: 2d.gradient.object.update
+  testing:
+  - 2d.gradient.update
+  code: |
+    var g = ctx.createLinearGradient(-100, 0, 200, 0);
+    g.addColorStop(0, '#f00');
+    g.addColorStop(1, '#f00');
+    ctx.fillStyle = g;
+    g.addColorStop(0.1, '#0f0');
+    g.addColorStop(0.9, '#0f0');
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 50,25 ==~ 0,255,0,255;
+    t.done();
+
+- name: 2d.gradient.object.compare
+  testing:
+  - 2d.gradient.object
+  code: |
+    var g1 = ctx.createLinearGradient(0, 0, 100, 0);
+    var g2 = ctx.createLinearGradient(0, 0, 100, 0);
+    @assert g1 !== g2;
+    ctx.fillStyle = g1;
+    @assert ctx.fillStyle === g1;
+    t.done();
+
+- name: 2d.gradient.object.crosscanvas
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    var offscreenCanvas2 = new OffscreenCanvas(100, 50);
+    var g = offscreenCanvas2.getContext('2d').createLinearGradient(0, 0, 100, 0);
+    g.addColorStop(0, '#0f0');
+    g.addColorStop(1, '#0f0');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 50,25 ==~ 0,255,0,255;
+    t.done();
+
+- name: 2d.gradient.object.invalidoffset
+  testing:
+  - 2d.gradient.invalidoffset
+  code: |
+    var g = ctx.createLinearGradient(0, 0, 100, 0);
+    @assert throws INDEX_SIZE_ERR g.addColorStop(-1, '#000');
+    @assert throws INDEX_SIZE_ERR g.addColorStop(2, '#000');
+    @assert throws TypeError g.addColorStop(Infinity, '#000');
+    @assert throws TypeError g.addColorStop(-Infinity, '#000');
+    @assert throws TypeError g.addColorStop(NaN, '#000');
+    t.done();
+
+- name: 2d.gradient.object.invalidcolour
+  testing:
+  - 2d.gradient.invalidcolour
+  code: |
+    var g = ctx.createLinearGradient(0, 0, 100, 0);
+    @assert throws SYNTAX_ERR g.addColorStop(0, "");
+    @assert throws SYNTAX_ERR g.addColorStop(0, 'null');
+    @assert throws SYNTAX_ERR g.addColorStop(0, 'undefined');
+    @assert throws SYNTAX_ERR g.addColorStop(0, null);
+    @assert throws SYNTAX_ERR g.addColorStop(0, undefined);
+    t.done();
+
+- name: 2d.gradient.linear.nonfinite
+  desc: createLinearGradient() throws TypeError if arguments are not finite
+  testing:
+  - 2d.gradient.linear.nonfinite
+  code: |
+    @nonfinite @assert throws TypeError ctx.createLinearGradient(<0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <1 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>);
+    t.done();
+
+- name: 2d.gradient.linear.transform.1
+  desc: Linear gradient coordinates are relative to the coordinate space at the time
+    of filling
+  testing:
+  - 2d.gradient.linear.transform
+  code: |
+    var g = ctx.createLinearGradient(0, 0, 200, 0);
+    g.addColorStop(0, '#f00');
+    g.addColorStop(0.25, '#0f0');
+    g.addColorStop(0.75, '#0f0');
+    g.addColorStop(1, '#f00');
+    ctx.fillStyle = g;
+    ctx.translate(-50, 0);
+    ctx.fillRect(50, 0, 100, 50);
+    @assert pixel 25,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 75,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.gradient.linear.transform.2
+  desc: Linear gradient coordinates are relative to the coordinate space at the time
+    of filling
+  testing:
+  - 2d.gradient.linear.transform
+  code: |
+    ctx.translate(100, 0);
+    var g = ctx.createLinearGradient(0, 0, 200, 0);
+    g.addColorStop(0, '#f00');
+    g.addColorStop(0.25, '#0f0');
+    g.addColorStop(0.75, '#0f0');
+    g.addColorStop(1, '#f00');
+    ctx.fillStyle = g;
+    ctx.translate(-150, 0);
+    ctx.fillRect(50, 0, 100, 50);
+    @assert pixel 25,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 75,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.gradient.linear.transform.3
+  desc: Linear gradient transforms do not experience broken caching effects
+  testing:
+  - 2d.gradient.linear.transform
+  code: |
+    var g = ctx.createLinearGradient(0, 0, 200, 0);
+    g.addColorStop(0, '#f00');
+    g.addColorStop(0.25, '#0f0');
+    g.addColorStop(0.75, '#0f0');
+    g.addColorStop(1, '#f00');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.translate(-50, 0);
+    ctx.fillRect(50, 0, 100, 50);
+    @assert pixel 25,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 75,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.gradient.radial.negative
+  desc: createRadialGradient() throws INDEX_SIZE_ERR if either radius is negative
+  testing:
+  - 2d.gradient.radial.negative
+  code: |
+    @assert throws INDEX_SIZE_ERR ctx.createRadialGradient(0, 0, -0.1, 0, 0, 1);
+    @assert throws INDEX_SIZE_ERR ctx.createRadialGradient(0, 0, 1, 0, 0, -0.1);
+    @assert throws INDEX_SIZE_ERR ctx.createRadialGradient(0, 0, -0.1, 0, 0, -0.1);
+    t.done();
+- name: 2d.gradient.radial.nonfinite
+
+  desc: createRadialGradient() throws TypeError if arguments are not finite
+  testing:
+  - 2d.gradient.radial.nonfinite
+  code: |
+    @nonfinite @assert throws TypeError ctx.createRadialGradient(<0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <1 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <1 Infinity -Infinity NaN>);
+    t.done();
+
+- name: 2d.gradient.radial.inside1
+  testing:
+  - 2d.gradient.radial.rendering
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    var g = ctx.createRadialGradient(50, 25, 100, 50, 25, 200);
+    g.addColorStop(0, '#0f0');
+    g.addColorStop(1, '#f00');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 50,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 98,25 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 50,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+    t.done();
+
+- name: 2d.gradient.radial.inside2
+  testing:
+  - 2d.gradient.radial.rendering
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    var g = ctx.createRadialGradient(50, 25, 200, 50, 25, 100);
+    g.addColorStop(0, '#f00');
+    g.addColorStop(1, '#0f0');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 50,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 98,25 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 50,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+    t.done();
+
+- name: 2d.gradient.radial.inside3
+  testing:
+  - 2d.gradient.radial.rendering
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    var g = ctx.createRadialGradient(50, 25, 200, 50, 25, 100);
+    g.addColorStop(0, '#f00');
+    g.addColorStop(0.993, '#f00');
+    g.addColorStop(1, '#0f0');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 50,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 98,25 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 50,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+    t.done();
+
+- name: 2d.gradient.radial.outside1
+  testing:
+  - 2d.gradient.radial.rendering
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    var g = ctx.createRadialGradient(200, 25, 10, 200, 25, 20);
+    g.addColorStop(0, '#f00');
+    g.addColorStop(1, '#0f0');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 50,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 98,25 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 50,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+    t.done();
+
+- name: 2d.gradient.radial.outside2
+  testing:
+  - 2d.gradient.radial.rendering
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    var g = ctx.createRadialGradient(200, 25, 20, 200, 25, 10);
+    g.addColorStop(0, '#0f0');
+    g.addColorStop(1, '#f00');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 50,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 98,25 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 50,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+    t.done();
+
+- name: 2d.gradient.radial.outside3
+  testing:
+  - 2d.gradient.radial.rendering
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    var g = ctx.createRadialGradient(200, 25, 20, 200, 25, 10);
+    g.addColorStop(0, '#0f0');
+    g.addColorStop(0.001, '#f00');
+    g.addColorStop(1, '#f00');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 50,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 98,25 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 50,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+    t.done();
+
+- name: 2d.gradient.radial.touch1
+  testing:
+  - 2d.gradient.radial.rendering
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    var g = ctx.createRadialGradient(150, 25, 50, 200, 25, 100);
+    g.addColorStop(0, '#f00');
+    g.addColorStop(1, '#f00');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 1,1 == 0,255,0,255; @moz-todo
+    @assert pixel 50,1 == 0,255,0,255; @moz-todo
+    @assert pixel 98,1 == 0,255,0,255; @moz-todo
+    @assert pixel 1,25 == 0,255,0,255; @moz-todo
+    @assert pixel 50,25 == 0,255,0,255; @moz-todo
+    @assert pixel 98,25 == 0,255,0,255; @moz-todo
+    @assert pixel 1,48 == 0,255,0,255; @moz-todo
+    @assert pixel 50,48 == 0,255,0,255; @moz-todo
+    @assert pixel 98,48 == 0,255,0,255; @moz-todo
+    t.done();
+
+- name: 2d.gradient.radial.touch2
+  testing:
+  - 2d.gradient.radial.rendering
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    var g = ctx.createRadialGradient(-80, 25, 70, 0, 25, 150);
+    g.addColorStop(0, '#f00');
+    g.addColorStop(0.01, '#0f0');
+    g.addColorStop(0.99, '#0f0');
+    g.addColorStop(1, '#f00');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 50,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 98,25 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 50,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+    t.done();
+
+- name: 2d.gradient.radial.touch3
+  testing:
+  - 2d.gradient.radial.rendering
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    var g = ctx.createRadialGradient(120, -15, 25, 140, -30, 50);
+    g.addColorStop(0, '#f00');
+    g.addColorStop(1, '#f00');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 1,1 == 0,255,0,255; @moz-todo
+    @assert pixel 50,1 == 0,255,0,255; @moz-todo
+    @assert pixel 98,1 == 0,255,0,255; @moz-todo
+    @assert pixel 1,25 == 0,255,0,255; @moz-todo
+    @assert pixel 50,25 == 0,255,0,255; @moz-todo
+    @assert pixel 98,25 == 0,255,0,255; @moz-todo
+    @assert pixel 1,48 == 0,255,0,255; @moz-todo
+    @assert pixel 50,48 == 0,255,0,255; @moz-todo
+    @assert pixel 98,48 == 0,255,0,255; @moz-todo
+    t.done();
+
+- name: 2d.gradient.radial.equal
+  testing:
+  - 2d.gradient.radial.equal
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    var g = ctx.createRadialGradient(50, 25, 20, 50, 25, 20);
+    g.addColorStop(0, '#f00');
+    g.addColorStop(1, '#f00');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 1,1 == 0,255,0,255; @moz-todo
+    @assert pixel 50,1 == 0,255,0,255; @moz-todo
+    @assert pixel 98,1 == 0,255,0,255; @moz-todo
+    @assert pixel 1,25 == 0,255,0,255; @moz-todo
+    @assert pixel 50,25 == 0,255,0,255; @moz-todo
+    @assert pixel 98,25 == 0,255,0,255; @moz-todo
+    @assert pixel 1,48 == 0,255,0,255; @moz-todo
+    @assert pixel 50,48 == 0,255,0,255; @moz-todo
+    @assert pixel 98,48 == 0,255,0,255; @moz-todo
+    t.done();
+
+- name: 2d.gradient.radial.cone.behind
+  testing:
+  - 2d.gradient.radial.rendering
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    var g = ctx.createRadialGradient(120, 25, 10, 211, 25, 100);
+    g.addColorStop(0, '#f00');
+    g.addColorStop(1, '#f00');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 1,1 == 0,255,0,255; @moz-todo
+    @assert pixel 50,1 == 0,255,0,255; @moz-todo
+    @assert pixel 98,1 == 0,255,0,255; @moz-todo
+    @assert pixel 1,25 == 0,255,0,255; @moz-todo
+    @assert pixel 50,25 == 0,255,0,255; @moz-todo
+    @assert pixel 98,25 == 0,255,0,255; @moz-todo
+    @assert pixel 1,48 == 0,255,0,255; @moz-todo
+    @assert pixel 50,48 == 0,255,0,255; @moz-todo
+    @assert pixel 98,48 == 0,255,0,255; @moz-todo
+    t.done();
+
+- name: 2d.gradient.radial.cone.front
+  testing:
+  - 2d.gradient.radial.rendering
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    var g = ctx.createRadialGradient(311, 25, 10, 210, 25, 100);
+    g.addColorStop(0, '#f00');
+    g.addColorStop(1, '#0f0');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 50,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 98,25 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 50,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+    t.done();
+
+- name: 2d.gradient.radial.cone.bottom
+  testing:
+  - 2d.gradient.radial.rendering
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    var g = ctx.createRadialGradient(210, 25, 100, 230, 25, 101);
+    g.addColorStop(0, '#0f0');
+    g.addColorStop(1, '#f00');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 50,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 98,25 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 50,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+    t.done();
+
+- name: 2d.gradient.radial.cone.top
+  testing:
+  - 2d.gradient.radial.rendering
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    var g = ctx.createRadialGradient(230, 25, 100, 100, 25, 101);
+    g.addColorStop(0, '#f00');
+    g.addColorStop(1, '#0f0');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 50,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 98,25 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 50,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+    t.done();
+
+- name: 2d.gradient.radial.cone.beside
+  testing:
+  - 2d.gradient.radial.rendering
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    var g = ctx.createRadialGradient(0, 100, 40, 100, 100, 50);
+    g.addColorStop(0, '#f00');
+    g.addColorStop(1, '#f00');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 1,1 == 0,255,0,255; @moz-todo
+    @assert pixel 50,1 == 0,255,0,255; @moz-todo
+    @assert pixel 98,1 == 0,255,0,255; @moz-todo
+    @assert pixel 1,25 == 0,255,0,255; @moz-todo
+    @assert pixel 50,25 == 0,255,0,255; @moz-todo
+    @assert pixel 98,25 == 0,255,0,255; @moz-todo
+    @assert pixel 1,48 == 0,255,0,255; @moz-todo
+    @assert pixel 50,48 == 0,255,0,255; @moz-todo
+    @assert pixel 98,48 == 0,255,0,255; @moz-todo
+    t.done();
+
+- name: 2d.gradient.radial.cone.cylinder
+  testing:
+  - 2d.gradient.radial.rendering
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    var g = ctx.createRadialGradient(210, 25, 100, 230, 25, 100);
+    g.addColorStop(0, '#0f0');
+    g.addColorStop(1, '#f00');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 50,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 98,25 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 50,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+    t.done();
+
+- name: 2d.gradient.radial.cone.shape1
+  testing:
+  - 2d.gradient.radial.rendering
+  code: |
+    var tol = 1; // tolerance to avoid antialiasing artifacts
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#f00';
+    ctx.beginPath();
+    ctx.moveTo(30+tol, 40);
+    ctx.lineTo(110, -20+tol);
+    ctx.lineTo(110, 100-tol);
+    ctx.fill();
+    var g = ctx.createRadialGradient(30+10*5/2, 40, 10*3/2, 30+10*15/4, 40, 10*9/4);
+    g.addColorStop(0, '#0f0');
+    g.addColorStop(1, '#0f0');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 50,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 98,25 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 50,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+    t.done();
+
+- name: 2d.gradient.radial.cone.shape2
+  testing:
+  - 2d.gradient.radial.rendering
+  code: |
+    var tol = 1; // tolerance to avoid antialiasing artifacts
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    var g = ctx.createRadialGradient(30+10*5/2, 40, 10*3/2, 30+10*15/4, 40, 10*9/4);
+    g.addColorStop(0, '#f00');
+    g.addColorStop(1, '#f00');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.beginPath();
+    ctx.moveTo(30-tol, 40);
+    ctx.lineTo(110, -20-tol);
+    ctx.lineTo(110, 100+tol);
+    ctx.fill();
+    @assert pixel 1,1 == 0,255,0,255; @moz-todo
+    @assert pixel 50,1 == 0,255,0,255; @moz-todo
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,25 == 0,255,0,255; @moz-todo
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 98,25 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255; @moz-todo
+    @assert pixel 50,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+    t.done();
+
+- name: 2d.gradient.radial.transform.1
+  desc: Radial gradient coordinates are relative to the coordinate space at the time
+    of filling
+  testing:
+  - 2d.gradient.radial.transform
+  code: |
+    var g = ctx.createRadialGradient(0, 0, 0, 0, 0, 11.2);
+    g.addColorStop(0, '#0f0');
+    g.addColorStop(0.5, '#0f0');
+    g.addColorStop(0.51, '#f00');
+    g.addColorStop(1, '#f00');
+    ctx.fillStyle = g;
+    ctx.translate(50, 25);
+    ctx.scale(10, 10);
+    ctx.fillRect(-5, -2.5, 10, 5);
+    @assert pixel 25,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 75,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.gradient.radial.transform.2
+  desc: Radial gradient coordinates are relative to the coordinate space at the time
+    of filling
+  testing:
+  - 2d.gradient.radial.transform
+  code: |
+    ctx.translate(100, 0);
+    var g = ctx.createRadialGradient(0, 0, 0, 0, 0, 11.2);
+    g.addColorStop(0, '#0f0');
+    g.addColorStop(0.5, '#0f0');
+    g.addColorStop(0.51, '#f00');
+    g.addColorStop(1, '#f00');
+    ctx.fillStyle = g;
+    ctx.translate(-50, 25);
+    ctx.scale(10, 10);
+    ctx.fillRect(-5, -2.5, 10, 5);
+    @assert pixel 25,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 75,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.gradient.radial.transform.3
+  desc: Radial gradient transforms do not experience broken caching effects
+  testing:
+  - 2d.gradient.radial.transform
+  code: |
+    var g = ctx.createRadialGradient(0, 0, 0, 0, 0, 11.2);
+    g.addColorStop(0, '#0f0');
+    g.addColorStop(0.5, '#0f0');
+    g.addColorStop(0.51, '#f00');
+    g.addColorStop(1, '#f00');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.translate(50, 25);
+    ctx.scale(10, 10);
+    ctx.fillRect(-5, -2.5, 10, 5);
+    @assert pixel 25,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 75,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.pattern.basic.image
+  testing:
+  - 2d.pattern.painting
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    var promise = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/green.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    promise.then(function(response) {
+        createImageBitmap(response).then(bitmap => {
+            var pattern = ctx.createPattern(bitmap, 'no-repeat');
+            ctx.fillStyle = pattern;
+            ctx.fillRect(0, 0, 100, 50);
+            @assert pixel 1,1 == 0,255,0,255;
+            @assert pixel 98,1 == 0,255,0,255;
+            @assert pixel 1,48 == 0,255,0,255;
+            @assert pixel 98,48 == 0,255,0,255;
+        }, t_fail);
+    }).then(t_pass, t_fail);
+
+- name: 2d.pattern.basic.canvas
+  testing:
+  - 2d.pattern.painting
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    var offscreenCanvas2 = new OffscreenCanvas(100, 50);
+    var ctx2 = offscreenCanvas2.getContext('2d');
+    ctx2.fillStyle = '#0f0';
+    ctx2.fillRect(0, 0, 100, 50);
+    var pattern = ctx.createPattern(offscreenCanvas2, 'no-repeat');
+    ctx.fillStyle = pattern;
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 50,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 98,25 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 50,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+    t.done();
+
+- name: 2d.pattern.basic.zerocanvas
+  testing:
+  - 2d.pattern.zerocanvas
+  code: |
+    offscreenCanvas.width = 0;
+    offscreenCanvas.height = 10;
+    @assert offscreenCanvas.width === 0;
+    @assert offscreenCanvas.height === 10;
+    @assert throws INVALID_STATE_ERR ctx.createPattern(offscreenCanvas, 'repeat');
+    offscreenCanvas.width = 10;
+    offscreenCanvas.height = 0;
+    @assert offscreenCanvas.width === 10;
+    @assert offscreenCanvas.height === 0;
+    @assert throws INVALID_STATE_ERR ctx.createPattern(offscreenCanvas, 'repeat');
+    offscreenCanvas.width = 0;
+    offscreenCanvas.height = 0;
+    @assert offscreenCanvas.width === 0;
+    @assert offscreenCanvas.height === 0;
+    @assert throws INVALID_STATE_ERR ctx.createPattern(offscreenCanvas, 'repeat');
+    t.done();
+
+- name: 2d.pattern.basic.nocontext
+  testing:
+  - 2d.pattern.painting
+  code: |
+    var offscreenCanvas2 = new OffscreenCanvas(100, 50);
+    var pattern = ctx.createPattern(offscreenCanvas2, 'no-repeat');
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#f00';
+    ctx.fillStyle = pattern;
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+    t.done();
+
+- name: 2d.pattern.image.undefined
+  testing:
+  - 2d.pattern.IDL
+  code: |
+    @assert throws TypeError ctx.createPattern(undefined, 'repeat');
+    t.done();
+
+- name: 2d.pattern.image.null
+  testing:
+  - 2d.pattern.IDL
+  code: |
+    @assert throws TypeError ctx.createPattern(null, 'repeat');
+    t.done();
+
+- name: 2d.pattern.image.string
+  testing:
+  - 2d.pattern.IDL
+  code: |
+    @assert throws TypeError ctx.createPattern('../images/red.png', 'repeat');
+    t.done();
+
+- name: 2d.pattern.repeat.empty
+  testing:
+  - 2d.pattern.missing
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    var promise = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/green-1x1.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    promise.then(function(response) {
+        createImageBitmap(response).then(bitmap => {
+            var pattern = ctx.createPattern(bitmap, "");
+            ctx.fillStyle = pattern;
+            ctx.fillRect(0, 0, 200, 50);
+            @assert pixel 1,1 == 0,255,0,255;
+            @assert pixel 98,1 == 0,255,0,255;
+            @assert pixel 1,48 == 0,255,0,255;
+            @assert pixel 98,48 == 0,255,0,255;
+        }, t_fail);
+    }).then(t_pass, t_fail);
+
+- name: 2d.pattern.repeat.null
+  testing:
+  - 2d.pattern.unrecognised
+  code: |
+    @assert ctx.createPattern(offscreenCanvas, null) != null;
+    t.done();
+
+- name: 2d.pattern.repeat.undefined
+  testing:
+  - 2d.pattern.unrecognised
+  code: |
+    @assert throws SYNTAX_ERR ctx.createPattern(offscreenCanvas, undefined);
+    t.done();
+
+- name: 2d.pattern.repeat.unrecognised
+  testing:
+  - 2d.pattern.unrecognised
+  code: |
+    @assert throws SYNTAX_ERR ctx.createPattern(offscreenCanvas, "invalid");
+    t.done();
+
+- name: 2d.pattern.repeat.unrecognisednull
+  testing:
+  - 2d.pattern.unrecognised
+  code: |
+    @assert throws SYNTAX_ERR ctx.createPattern(offscreenCanvas, "null");
+    t.done();
+
+- name: 2d.pattern.repeat.case
+  testing:
+  - 2d.pattern.exact
+  code: |
+    @assert throws SYNTAX_ERR ctx.createPattern(offscreenCanvas, "Repeat");
+    t.done();
+
+- name: 2d.pattern.repeat.nullsuffix
+  testing:
+  - 2d.pattern.exact
+  code: |
+    @assert throws SYNTAX_ERR ctx.createPattern(offscreenCanvas, "repeat\0");
+    t.done();
+
+- name: 2d.pattern.modify.canvas1
+  testing:
+  - 2d.pattern.modify
+  code: |
+    var offscreenCanvas2 = new OffscreenCanvas(100, 50);
+    var ctx2 = offscreenCanvas2.getContext('2d');
+    ctx2.fillStyle = '#0f0';
+    ctx2.fillRect(0, 0, 100, 50);
+    var pattern = ctx.createPattern(offscreenCanvas2, 'no-repeat');
+    ctx2.fillStyle = '#f00';
+    ctx2.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = pattern;
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+    t.done();
+
+- name: 2d.pattern.modify.canvas2
+  testing:
+  - 2d.pattern.modify
+  code: |
+    var offscreenCanvas2 = new OffscreenCanvas(100, 50);
+    var ctx2 = offscreenCanvas2.getContext('2d');
+    ctx2.fillStyle = '#0f0';
+    ctx2.fillRect(0, 0, 100, 50);
+    var pattern = ctx.createPattern(offscreenCanvas2, 'no-repeat');
+    ctx.fillStyle = pattern;
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx2.fillStyle = '#f00';
+    ctx2.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = pattern;
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+    t.done();
+
+- name: 2d.pattern.crosscanvas
+  code: |
+    var promise = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/green.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    promise.then(function(response) {
+        createImageBitmap(response).then(bitmap => {
+            var offscreenCanvas2 = new OffscreenCanvas(100, 50);
+            var pattern = offscreenCanvas2.getContext('2d').createPattern(bitmap, 'no-repeat');
+            ctx.fillStyle = '#f00';
+            ctx.fillRect(0, 0, 100, 50);
+            ctx.fillStyle = pattern;
+            ctx.fillRect(0, 0, 100, 50);
+            @assert pixel 50,25 == 0,255,0,255;
+        }, t_fail);
+    }).then(t_pass, t_fail);
+
+- name: 2d.pattern.paint.norepeat.basic
+  testing:
+  - 2d.pattern.painting
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    var promise = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/green.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    promise.then(function(response) {
+        createImageBitmap(response).then(bitmap => {
+            var pattern = ctx.createPattern(bitmap, 'no-repeat');
+            ctx.fillStyle = pattern;
+            ctx.fillRect(0, 0, 100, 50);
+            @assert pixel 1,1 == 0,255,0,255;
+            @assert pixel 98,1 == 0,255,0,255;
+            @assert pixel 1,48 == 0,255,0,255;
+            @assert pixel 98,48 == 0,255,0,255;
+        }, t_fail);
+    }).then(t_pass, t_fail);
+
+- name: 2d.pattern.paint.norepeat.outside
+  testing:
+  - 2d.pattern.painting
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    var promise = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/red.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    promise.then(function(response) {
+        createImageBitmap(response).then(bitmap => {
+            var pattern = ctx.createPattern(bitmap, 'no-repeat');
+            ctx.fillStyle = '#0f0';
+            ctx.fillRect(0, 0, 100, 50);
+            ctx.fillStyle = pattern;
+            ctx.fillRect(0, -50, 100, 50);
+            ctx.fillRect(-100, 0, 100, 50);
+            ctx.fillRect(0, 50, 100, 50);
+            ctx.fillRect(100, 0, 100, 50);
+            @assert pixel 1,1 == 0,255,0,255;
+            @assert pixel 98,1 == 0,255,0,255;
+            @assert pixel 1,48 == 0,255,0,255;
+            @assert pixel 98,48 == 0,255,0,255;
+        }, t_fail);
+    }).then(t_pass, t_fail);
+
+- name: 2d.pattern.paint.norepeat.coord1
+  testing:
+  - 2d.pattern.painting
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 50, 50);
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(50, 0, 50, 50);
+    var promise = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/green.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    promise.then(function(response) {
+        createImageBitmap(response).then(bitmap => {
+            var pattern = ctx.createPattern(bitmap, 'no-repeat');
+            ctx.fillStyle = pattern;
+            ctx.translate(50, 0);
+            ctx.fillRect(-50, 0, 100, 50);
+            @assert pixel 1,1 == 0,255,0,255;
+            @assert pixel 98,1 == 0,255,0,255;
+            @assert pixel 1,48 == 0,255,0,255;
+            @assert pixel 98,48 == 0,255,0,255;
+        }, t_fail);
+    }).then(t_pass, t_fail);
+
+- name: 2d.pattern.paint.norepeat.coord2
+  testing:
+  - 2d.pattern.painting
+  code: |
+    var promise = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/green.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    promise.then(function(response) {
+        createImageBitmap(response).then(bitmap => {
+            var pattern = ctx.createPattern(bitmap, 'no-repeat');
+            ctx.fillStyle = pattern;
+            ctx.fillRect(0, 0, 50, 50);
+            ctx.fillStyle = '#f00';
+            ctx.fillRect(50, 0, 50, 50);
+            ctx.fillStyle = pattern;
+            ctx.translate(50, 0);
+            ctx.fillRect(-50, 0, 100, 50);
+            @assert pixel 1,1 == 0,255,0,255;
+            @assert pixel 98,1 == 0,255,0,255;
+            @assert pixel 1,48 == 0,255,0,255;
+            @assert pixel 98,48 == 0,255,0,255;
+        }, t_fail);
+    }).then(t_pass, t_fail);
+
+- name: 2d.pattern.paint.norepeat.coord3
+  testing:
+  - 2d.pattern.painting
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    var promise = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/red.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    promise.then(function(response) {
+        createImageBitmap(response).then(bitmap => {
+            var pattern = ctx.createPattern(bitmap, 'no-repeat');
+            ctx.fillStyle = pattern;
+            ctx.translate(50, 25);
+            ctx.fillRect(-50, -25, 100, 50);
+            ctx.fillStyle = '#0f0';
+            ctx.fillRect(0, 0, 50, 25);
+            @assert pixel 1,1 == 0,255,0,255;
+            @assert pixel 98,1 == 0,255,0,255;
+            @assert pixel 1,48 == 0,255,0,255;
+            @assert pixel 98,48 == 0,255,0,255;
+        }, t_fail);
+    }).then(t_pass, t_fail);
+
+- name: 2d.pattern.paint.repeat.basic
+  testing:
+  - 2d.pattern.painting
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    var promise = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/green-16x16.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    promise.then(function(response) {
+        createImageBitmap(response).then(bitmap => {
+            var pattern = ctx.createPattern(bitmap, 'no-repeat');
+            ctx.fillStyle = pattern;
+            ctx.fillRect(0, 0, 100, 50);
+            @assert pixel 1,1 == 0,255,0,255;
+            @assert pixel 98,1 == 0,255,0,255;
+            @assert pixel 1,48 == 0,255,0,255;
+            @assert pixel 98,48 == 0,255,0,255;
+        }, t_fail);
+    }).then(t_pass, t_fail);
+
+- name: 2d.pattern.paint.repeat.outside
+  testing:
+  - 2d.pattern.painting
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    var promise = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/green-16x16.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    promise.then(function(response) {
+        createImageBitmap(response).then(bitmap => {
+            var pattern = ctx.createPattern(bitmap, 'no-repeat');
+            ctx.fillStyle = pattern;
+            ctx.translate(50, 25);
+            ctx.fillRect(-50, -25, 100, 50);
+            @assert pixel 1,1 == 0,255,0,255;
+            @assert pixel 98,1 == 0,255,0,255;
+            @assert pixel 1,48 == 0,255,0,255;
+            @assert pixel 98,48 == 0,255,0,255;
+        }, t_fail);
+    }).then(t_pass, t_fail);
+
+- name: 2d.pattern.paint.repeat.coord1
+  testing:
+  - 2d.pattern.painting
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    var promise = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/rgrg-256x256.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    promise.then(function(response) {
+        createImageBitmap(response).then(bitmap => {
+            var pattern = ctx.createPattern(bitmap, 'no-repeat');
+            ctx.fillStyle = pattern;
+            ctx.translate(-128, -78);
+            ctx.fillRect(128, 78, 100, 50);
+            @assert pixel 1,1 == 0,255,0,255;
+            @assert pixel 98,1 == 0,255,0,255;
+            @assert pixel 1,48 == 0,255,0,255;
+            @assert pixel 98,48 == 0,255,0,255;
+        }, t_fail);
+    }).then(t_pass, t_fail);
+
+- name: 2d.pattern.paint.repeat.coord2
+  testing:
+  - 2d.pattern.painting
+  code: |
+    var promise = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/grgr-256x256.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    promise.then(function(response) {
+        createImageBitmap(response).then(bitmap => {
+            var pattern = ctx.createPattern(bitmap, 'no-repeat');
+            ctx.fillStyle = pattern;
+            ctx.fillRect(0, 0, 100, 50);
+            @assert pixel 1,1 == 0,255,0,255;
+            @assert pixel 98,1 == 0,255,0,255;
+            @assert pixel 1,48 == 0,255,0,255;
+            @assert pixel 98,48 == 0,255,0,255;
+        }, t_fail);
+    }).then(t_pass, t_fail);
+
+- name: 2d.pattern.paint.repeat.coord3
+  testing:
+  - 2d.pattern.painting
+  code: |
+    var promise = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/rgrg-256x256.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    promise.then(function(response) {
+        createImageBitmap(response).then(bitmap => {
+            var pattern = ctx.createPattern(bitmap, 'no-repeat');
+            ctx.fillStyle = pattern;
+            ctx.fillRect(0, 0, 100, 50);
+            ctx.translate(-128, -78);
+            ctx.fillRect(128, 78, 100, 50);
+            @assert pixel 1,1 == 0,255,0,255;
+            @assert pixel 98,1 == 0,255,0,255;
+            @assert pixel 1,48 == 0,255,0,255;
+            @assert pixel 98,48 == 0,255,0,255;
+        }, t_fail);
+    }).then(t_pass, t_fail);
+
+- name: 2d.pattern.paint.repeatx.basic
+  testing:
+  - 2d.pattern.painting
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 16);
+    var promise = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/green-16x16.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    promise.then(function(response) {
+        createImageBitmap(response).then(bitmap => {
+            var pattern = ctx.createPattern(bitmap, 'repeat-x');
+            ctx.fillStyle = pattern;
+            ctx.fillRect(0, 0, 100, 50);
+            @assert pixel 1,1 == 0,255,0,255;
+            @assert pixel 98,1 == 0,255,0,255;
+            @assert pixel 1,48 == 0,255,0,255;
+            @assert pixel 98,48 == 0,255,0,255;
+        }, t_fail);
+    }).then(t_pass, t_fail);
+
+- name: 2d.pattern.paint.repeatx.outside
+  testing:
+  - 2d.pattern.painting
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    var promise = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/red-16x16.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    promise.then(function(response) {
+        createImageBitmap(response).then(bitmap => {
+            var pattern = ctx.createPattern(bitmap, 'repeat-x');
+            ctx.fillStyle = pattern;
+            ctx.fillRect(0, 0, 100, 50);
+            ctx.fillStyle = '#0f0';
+            ctx.fillRect(0, 0, 100, 16);
+            @assert pixel 1,1 == 0,255,0,255;
+            @assert pixel 98,1 == 0,255,0,255;
+            @assert pixel 1,48 == 0,255,0,255;
+            @assert pixel 98,48 == 0,255,0,255;
+        }, t_fail);
+    }).then(t_pass, t_fail);
+
+- name: 2d.pattern.paint.repeatx.coord1
+  testing:
+  - 2d.pattern.painting
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    var promise = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/red-16x16.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    promise.then(function(response) {
+        createImageBitmap(response).then(bitmap => {
+            var pattern = ctx.createPattern(bitmap, 'repeat-x');
+            ctx.fillStyle = pattern;
+            ctx.translate(0, 16);
+            ctx.fillRect(0, -16, 100, 50);
+            ctx.fillStyle = '#0f0';
+            ctx.fillRect(0, 0, 100, 16);
+            @assert pixel 1,1 == 0,255,0,255;
+            @assert pixel 98,1 == 0,255,0,255;
+            @assert pixel 1,25 == 0,255,0,255;
+            @assert pixel 98,25 == 0,255,0,255;
+            @assert pixel 1,48 == 0,255,0,255;
+            @assert pixel 98,48 == 0,255,0,255;
+        }, t_fail);
+    }).then(t_pass, t_fail);
+
+- name: 2d.pattern.paint.repeaty.basic
+  testing:
+  - 2d.pattern.painting
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 16, 50);
+    var promise = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/green-16x16.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    promise.then(function(response) {
+        createImageBitmap(response).then(bitmap => {
+            var pattern = ctx.createPattern(bitmap, 'repeat-y');
+            ctx.fillStyle = pattern;
+            ctx.fillRect(0, 0, 100, 50);
+            @assert pixel 1,1 == 0,255,0,255;
+            @assert pixel 98,1 == 0,255,0,255;
+            @assert pixel 1,48 == 0,255,0,255;
+            @assert pixel 98,48 == 0,255,0,255;
+        }, t_fail);
+    }).then(t_pass, t_fail);
+
+- name: 2d.pattern.paint.repeaty.outside
+  testing:
+  - 2d.pattern.painting
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    var promise = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/red-16x16.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    promise.then(function(response) {
+        createImageBitmap(response).then(bitmap => {
+            var pattern = ctx.createPattern(bitmap, 'repeat-y');
+            ctx.fillStyle = pattern;
+            ctx.fillRect(0, 0, 100, 50);
+            ctx.fillStyle = '#0f0';
+            ctx.fillRect(0, 0, 16, 50);
+            @assert pixel 1,1 == 0,255,0,255;
+            @assert pixel 98,1 == 0,255,0,255;
+            @assert pixel 1,48 == 0,255,0,255;
+            @assert pixel 98,48 == 0,255,0,255;
+        }, t_fail);
+    }).then(t_pass, t_fail);
+
+- name: 2d.pattern.paint.repeaty.coord1
+  testing:
+  - 2d.pattern.painting
+  images:
+  - red-16x16.png
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    var promise = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/red-16x16.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    promise.then(function(response) {
+        createImageBitmap(response).then(bitmap => {
+            var pattern = ctx.createPattern(bitmap, 'repeat-y');
+            ctx.fillStyle = pattern;
+            ctx.translate(48, 0);
+            ctx.fillRect(-48, 0, 100, 50);
+            ctx.fillStyle = '#0f0';
+            ctx.fillRect(0, 0, 16, 50);
+            @assert pixel 1,1 == 0,255,0,255;
+            @assert pixel 50,1 == 0,255,0,255;
+            @assert pixel 98,1 == 0,255,0,255;
+            @assert pixel 1,48 == 0,255,0,255;
+            @assert pixel 50,48 == 0,255,0,255;
+            @assert pixel 98,48 == 0,255,0,255;
+        }, t_fail);
+    }).then(t_pass, t_fail);
+
+- name: 2d.pattern.paint.orientation.image
+  desc: Image patterns do not get flipped when painted
+  testing:
+  - 2d.pattern.painting
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    var promise = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/rrgg-256x256.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    promise.then(function(response) {
+        createImageBitmap(response).then(bitmap => {
+            var pattern = ctx.createPattern(bitmap, 'no-repeat');
+            ctx.fillStyle = pattern;
+            ctx.save();
+            ctx.translate(0, -103);
+            ctx.fillRect(0, 103, 100, 50);
+            ctx.restore();
+            ctx.fillStyle = '#0f0';
+            ctx.fillRect(0, 0, 100, 25);
+            @assert pixel 1,1 == 0,255,0,255;
+            @assert pixel 98,1 == 0,255,0,255;
+            @assert pixel 1,48 == 0,255,0,255;
+            @assert pixel 98,48 == 0,255,0,255;
+        }, t_fail);
+    }).then(t_pass, t_fail);
+
+- name: 2d.pattern.paint.orientation.canvas
+  desc: Canvas patterns do not get flipped when painted
+  testing:
+  - 2d.pattern.painting
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    var offscreenCanvas2 = new OffscreenCanvas(100, 50);
+    var ctx2 = offscreenCanvas2.getContext('2d');
+    ctx2.fillStyle = '#f00';
+    ctx2.fillRect(0, 0, 100, 25);
+    ctx2.fillStyle = '#0f0';
+    ctx2.fillRect(0, 25, 100, 25);
+    var pattern = ctx.createPattern(offscreenCanvas2, 'no-repeat');
+    ctx.fillStyle = pattern;
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 25);
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+    t.done();
+
diff --git a/tests/wpt/web-platform-tests/html/canvas/tools/yaml/offscreen/line-styles.yaml b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/offscreen/line-styles.yaml
new file mode 100644
index 00000000000..762deeb84cb
--- /dev/null
+++ b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/offscreen/line-styles.yaml
@@ -0,0 +1,842 @@
+- name: 2d.line.defaults
+  testing:
+  - 2d.lineWidth.default
+  - 2d.lineCap.default
+  - 2d.lineJoin.default
+  - 2d.miterLimit.default
+  code: |
+    @assert ctx.lineWidth === 1;
+    @assert ctx.lineCap === 'butt';
+    @assert ctx.lineJoin === 'miter';
+    @assert ctx.miterLimit === 10;
+    t.done();
+
+- name: 2d.line.width.basic
+  desc: lineWidth determines the width of line strokes
+  testing:
+  - 2d.lineWidth
+  code: |
+    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);
+    @assert pixel 14,25 == 0,255,0,255;
+    @assert pixel 15,25 == 0,255,0,255;
+    @assert pixel 16,25 == 0,255,0,255;
+    @assert pixel 25,25 == 0,255,0,255;
+    @assert pixel 34,25 == 0,255,0,255;
+    @assert pixel 35,25 == 0,255,0,255;
+    @assert pixel 36,25 == 0,255,0,255;
+    @assert pixel 64,25 == 0,255,0,255;
+    @assert pixel 65,25 == 0,255,0,255;
+    @assert pixel 66,25 == 0,255,0,255;
+    @assert pixel 75,25 == 0,255,0,255;
+    @assert pixel 84,25 == 0,255,0,255;
+    @assert pixel 85,25 == 0,255,0,255;
+    @assert pixel 86,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.line.width.transformed
+  desc: Line stroke widths are affected by scale transformations
+  testing:
+  - 2d.lineWidth
+  code: |
+    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);
+    @assert pixel 14,25 == 0,255,0,255;
+    @assert pixel 15,25 == 0,255,0,255;
+    @assert pixel 16,25 == 0,255,0,255;
+    @assert pixel 25,25 == 0,255,0,255;
+    @assert pixel 34,25 == 0,255,0,255;
+    @assert pixel 35,25 == 0,255,0,255;
+    @assert pixel 36,25 == 0,255,0,255;
+    @assert pixel 64,25 == 0,255,0,255;
+    @assert pixel 65,25 == 0,255,0,255;
+    @assert pixel 66,25 == 0,255,0,255;
+    @assert pixel 75,25 == 0,255,0,255;
+    @assert pixel 84,25 == 0,255,0,255;
+    @assert pixel 85,25 == 0,255,0,255;
+    @assert pixel 86,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.line.width.scaledefault
+  desc: Default lineWidth strokes are affected by scale transformations
+  testing:
+  - 2d.lineWidth
+  code: |
+    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();
+    @assert pixel 25,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 75,25 == 0,255,0,255;
+    @assert pixel 50,5 == 0,255,0,255;
+    @assert pixel 50,45 == 0,255,0,255;
+    t.done();
+
+- name: 2d.line.width.valid
+  desc: Setting lineWidth to valid values works
+  testing:
+  - 2d.lineWidth.set
+  - 2d.lineWidth.get
+  code: |
+    ctx.lineWidth = 1.5;
+    @assert ctx.lineWidth === 1.5;
+    ctx.lineWidth = "1e1";
+    @assert ctx.lineWidth === 10;
+    ctx.lineWidth = 1/1024;
+    @assert ctx.lineWidth === 1/1024;
+    ctx.lineWidth = 1000;
+    @assert ctx.lineWidth === 1000;
+    t.done();
+
+- name: 2d.line.width.invalid
+  desc: Setting lineWidth to invalid values is ignored
+  testing:
+  - 2d.lineWidth.invalid
+  code: |
+    ctx.lineWidth = 1.5;
+    @assert ctx.lineWidth === 1.5;
+    ctx.lineWidth = 1.5;
+    ctx.lineWidth = 0;
+    @assert ctx.lineWidth === 1.5;
+    ctx.lineWidth = 1.5;
+    ctx.lineWidth = -1;
+    @assert ctx.lineWidth === 1.5;
+    ctx.lineWidth = 1.5;
+    ctx.lineWidth = Infinity;
+    @assert ctx.lineWidth === 1.5;
+    ctx.lineWidth = 1.5;
+    ctx.lineWidth = -Infinity;
+    @assert ctx.lineWidth === 1.5;
+    ctx.lineWidth = 1.5;
+    ctx.lineWidth = NaN;
+    @assert ctx.lineWidth === 1.5;
+    t.done();
+
+- name: 2d.line.cap.butt
+  desc: lineCap 'butt' is rendered correctly
+  testing:
+  - 2d.lineCap.butt
+  code: |
+    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);
+    @assert pixel 25,14 == 0,255,0,255;
+    @assert pixel 25,15 == 0,255,0,255;
+    @assert pixel 25,16 == 0,255,0,255;
+    @assert pixel 25,34 == 0,255,0,255;
+    @assert pixel 25,35 == 0,255,0,255;
+    @assert pixel 25,36 == 0,255,0,255;
+    @assert pixel 75,14 == 0,255,0,255;
+    @assert pixel 75,15 == 0,255,0,255;
+    @assert pixel 75,16 == 0,255,0,255;
+    @assert pixel 75,34 == 0,255,0,255;
+    @assert pixel 75,35 == 0,255,0,255;
+    @assert pixel 75,36 == 0,255,0,255;
+    t.done();
+
+- name: 2d.line.cap.round
+  desc: lineCap 'round' is rendered correctly
+  testing:
+  - 2d.lineCap.round
+  code: |
+    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();
+    @assert pixel 17,6 == 0,255,0,255;
+    @assert pixel 25,6 == 0,255,0,255;
+    @assert pixel 32,6 == 0,255,0,255;
+    @assert pixel 17,43 == 0,255,0,255;
+    @assert pixel 25,43 == 0,255,0,255;
+    @assert pixel 32,43 == 0,255,0,255;
+    @assert pixel 67,6 == 0,255,0,255;
+    @assert pixel 75,6 == 0,255,0,255;
+    @assert pixel 82,6 == 0,255,0,255;
+    @assert pixel 67,43 == 0,255,0,255;
+    @assert pixel 75,43 == 0,255,0,255;
+    @assert pixel 82,43 == 0,255,0,255;
+    t.done();
+
+- name: 2d.line.cap.square
+  desc: lineCap 'square' is rendered correctly
+  testing:
+  - 2d.lineCap.square
+  code: |
+    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);
+    @assert pixel 25,4 == 0,255,0,255;
+    @assert pixel 25,5 == 0,255,0,255;
+    @assert pixel 25,6 == 0,255,0,255;
+    @assert pixel 25,44 == 0,255,0,255;
+    @assert pixel 25,45 == 0,255,0,255;
+    @assert pixel 25,46 == 0,255,0,255;
+    @assert pixel 75,4 == 0,255,0,255;
+    @assert pixel 75,5 == 0,255,0,255;
+    @assert pixel 75,6 == 0,255,0,255;
+    @assert pixel 75,44 == 0,255,0,255;
+    @assert pixel 75,45 == 0,255,0,255;
+    @assert pixel 75,46 == 0,255,0,255;
+    t.done();
+
+- name: 2d.line.cap.open
+  desc: Line caps are drawn at the corners of an unclosed rectangle
+  testing:
+  - 2d.lineCap.end
+  code: |
+    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();
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 48,1 == 0,255,0,255;
+    @assert pixel 48,48 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    t.done();
+
+- name: 2d.line.cap.closed
+  desc: Line caps are not drawn at the corners of an unclosed rectangle
+  testing:
+  - 2d.lineCap.end
+  code: |
+    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();
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 48,1 == 0,255,0,255;
+    @assert pixel 48,48 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    t.done();
+
+- name: 2d.line.cap.valid
+  desc: Setting lineCap to valid values works
+  testing:
+  - 2d.lineCap.set
+  - 2d.lineCap.get
+  code: |
+    ctx.lineCap = 'butt'
+    @assert ctx.lineCap === 'butt';
+    ctx.lineCap = 'round';
+    @assert ctx.lineCap === 'round';
+    ctx.lineCap = 'square';
+    @assert ctx.lineCap === 'square';
+    t.done();
+
+- name: 2d.line.cap.invalid
+  desc: Setting lineCap to invalid values is ignored
+  testing:
+  - 2d.lineCap.invalid
+  code: |
+    ctx.lineCap = 'butt'
+    @assert ctx.lineCap === 'butt';
+    ctx.lineCap = 'butt';
+    ctx.lineCap = 'invalid';
+    @assert ctx.lineCap === 'butt';
+    ctx.lineCap = 'butt';
+    ctx.lineCap = 'ROUND';
+    @assert ctx.lineCap === 'butt';
+    ctx.lineCap = 'butt';
+    ctx.lineCap = 'round\0';
+    @assert ctx.lineCap === 'butt';
+    ctx.lineCap = 'butt';
+    ctx.lineCap = 'round ';
+    @assert ctx.lineCap === 'butt';
+    ctx.lineCap = 'butt';
+    ctx.lineCap = "";
+    @assert ctx.lineCap === 'butt';
+    ctx.lineCap = 'butt';
+    ctx.lineCap = 'bevel';
+    @assert ctx.lineCap === 'butt';
+    t.done();
+
+- name: 2d.line.join.bevel
+  desc: lineJoin 'bevel' is rendered correctly
+  testing:
+  - 2d.lineJoin.common
+  - 2d.lineJoin.bevel
+  code: |
+    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();
+    @assert pixel 34,16 == 0,255,0,255;
+    @assert pixel 34,15 == 0,255,0,255;
+    @assert pixel 35,15 == 0,255,0,255;
+    @assert pixel 36,15 == 0,255,0,255;
+    @assert pixel 36,14 == 0,255,0,255;
+    @assert pixel 84,16 == 0,255,0,255;
+    @assert pixel 84,15 == 0,255,0,255;
+    @assert pixel 85,15 == 0,255,0,255;
+    @assert pixel 86,15 == 0,255,0,255;
+    @assert pixel 86,14 == 0,255,0,255;
+    t.done();
+
+- name: 2d.line.join.round
+  desc: lineJoin 'round' is rendered correctly
+  testing:
+  - 2d.lineJoin.round
+  code: |
+    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();
+    @assert pixel 36,14 == 0,255,0,255;
+    @assert pixel 36,13 == 0,255,0,255;
+    @assert pixel 37,13 == 0,255,0,255;
+    @assert pixel 38,13 == 0,255,0,255;
+    @assert pixel 38,12 == 0,255,0,255;
+    @assert pixel 86,14 == 0,255,0,255;
+    @assert pixel 86,13 == 0,255,0,255;
+    @assert pixel 87,13 == 0,255,0,255;
+    @assert pixel 88,13 == 0,255,0,255;
+    @assert pixel 88,12 == 0,255,0,255;
+    t.done();
+
+- name: 2d.line.join.miter
+  desc: lineJoin 'miter' is rendered correctly
+  testing:
+  - 2d.lineJoin.miter
+  code: |
+    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);
+    @assert pixel 38,12 == 0,255,0,255;
+    @assert pixel 39,11 == 0,255,0,255;
+    @assert pixel 40,10 == 0,255,0,255;
+    @assert pixel 41,9 == 0,255,0,255;
+    @assert pixel 42,8 == 0,255,0,255;
+    @assert pixel 88,12 == 0,255,0,255;
+    @assert pixel 89,11 == 0,255,0,255;
+    @assert pixel 90,10 == 0,255,0,255;
+    @assert pixel 91,9 == 0,255,0,255;
+    @assert pixel 92,8 == 0,255,0,255;
+    t.done();
+
+- name: 2d.line.join.open
+  desc: Line joins are not drawn at the corner of an unclosed rectangle
+  testing:
+  - 2d.lineJoin.joins
+  code: |
+    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();
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 48,1 == 0,255,0,255;
+    @assert pixel 48,48 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    t.done();
+
+- name: 2d.line.join.closed
+  desc: Line joins are drawn at the corner of a closed rectangle
+  testing:
+  - 2d.lineJoin.joinclosed
+  code: |
+    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();
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 48,1 == 0,255,0,255;
+    @assert pixel 48,48 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    t.done();
+
+- name: 2d.line.join.parallel
+  desc: Line joins are drawn at 180-degree joins
+  testing:
+  - 2d.lineJoin.joins
+  code: |
+    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();
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 48,1 == 0,255,0,255;
+    @assert pixel 48,48 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    t.done();
+
+- name: 2d.line.join.valid
+  desc: Setting lineJoin to valid values works
+  testing:
+  - 2d.lineJoin.set
+  - 2d.lineJoin.get
+  code: |
+    ctx.lineJoin = 'bevel'
+    @assert ctx.lineJoin === 'bevel';
+    ctx.lineJoin = 'round';
+    @assert ctx.lineJoin === 'round';
+    ctx.lineJoin = 'miter';
+    @assert ctx.lineJoin === 'miter';
+    t.done();
+
+- name: 2d.line.join.invalid
+  desc: Setting lineJoin to invalid values is ignored
+  testing:
+  - 2d.lineJoin.invalid
+  code: |
+    ctx.lineJoin = 'bevel'
+    @assert ctx.lineJoin === 'bevel';
+    ctx.lineJoin = 'bevel';
+    ctx.lineJoin = 'invalid';
+    @assert ctx.lineJoin === 'bevel';
+    ctx.lineJoin = 'bevel';
+    ctx.lineJoin = 'ROUND';
+    @assert ctx.lineJoin === 'bevel';
+    ctx.lineJoin = 'bevel';
+    ctx.lineJoin = 'round\0';
+    @assert ctx.lineJoin === 'bevel';
+    ctx.lineJoin = 'bevel';
+    ctx.lineJoin = 'round ';
+    @assert ctx.lineJoin === 'bevel';
+    ctx.lineJoin = 'bevel';
+    ctx.lineJoin = "";
+    @assert ctx.lineJoin === 'bevel';
+    ctx.lineJoin = 'bevel';
+    ctx.lineJoin = 'butt';
+    @assert ctx.lineJoin === 'bevel';
+    t.done();
+
+- name: 2d.line.miter.exceeded
+  desc: Miter joins are not drawn when the miter limit is exceeded
+  testing:
+  - 2d.lineJoin.miterLimit
+  - 2d.lineJoin.miter
+  code: |
+    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();
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 48,1 == 0,255,0,255;
+    @assert pixel 48,48 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    t.done();
+
+- name: 2d.line.miter.acute
+  desc: Miter joins are drawn correctly with acute angles
+  testing:
+  - 2d.lineJoin.miterLimit
+  - 2d.lineJoin.miter
+  code: |
+    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();
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 48,1 == 0,255,0,255;
+    @assert pixel 48,48 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    t.done();
+
+- name: 2d.line.miter.obtuse
+  desc: Miter joins are drawn correctly with obtuse angles
+  testing:
+  - 2d.lineJoin.miterLimit
+  - 2d.lineJoin.miter
+  code: |
+    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();
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 48,1 == 0,255,0,255;
+    @assert pixel 48,48 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    t.done();
+
+- name: 2d.line.miter.rightangle
+  desc: Miter joins are not drawn when the miter limit is exceeded, on exact right
+    angles
+  testing:
+  - 2d.lineJoin.miter
+  code: |
+    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();
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 48,1 == 0,255,0,255;
+    @assert pixel 48,48 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    t.done();
+
+- name: 2d.line.miter.lineedge
+  desc: Miter joins are not drawn when the miter limit is exceeded at the corners
+    of a zero-height rectangle
+  testing:
+  - 2d.lineJoin.miter
+  code: |
+    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);
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 48,1 == 0,255,0,255;
+    @assert pixel 48,48 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    t.done();
+
+- name: 2d.line.miter.within
+  desc: Miter joins are drawn when the miter limit is not quite exceeded
+  testing:
+  - 2d.lineJoin.miter
+  code: |
+    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();
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 48,1 == 0,255,0,255;
+    @assert pixel 48,48 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    t.done();
+
+- name: 2d.line.miter.valid
+  desc: Setting miterLimit to valid values works
+  testing:
+  - 2d.miterLimit.set
+  - 2d.miterLimit.get
+  code: |
+    ctx.miterLimit = 1.5;
+    @assert ctx.miterLimit === 1.5;
+    ctx.miterLimit = "1e1";
+    @assert ctx.miterLimit === 10;
+    ctx.miterLimit = 1/1024;
+    @assert ctx.miterLimit === 1/1024;
+    ctx.miterLimit = 1000;
+    @assert ctx.miterLimit === 1000;
+    t.done();
+
+- name: 2d.line.miter.invalid
+  desc: Setting miterLimit to invalid values is ignored
+  testing:
+  - 2d.miterLimit.invalid
+  code: |
+    ctx.miterLimit = 1.5;
+    @assert ctx.miterLimit === 1.5;
+    ctx.miterLimit = 1.5;
+    ctx.miterLimit = 0;
+    @assert ctx.miterLimit === 1.5;
+    ctx.miterLimit = 1.5;
+    ctx.miterLimit = -1;
+    @assert ctx.miterLimit === 1.5;
+    ctx.miterLimit = 1.5;
+    ctx.miterLimit = Infinity;
+    @assert ctx.miterLimit === 1.5;
+    ctx.miterLimit = 1.5;
+    ctx.miterLimit = -Infinity;
+    @assert ctx.miterLimit === 1.5;
+    ctx.miterLimit = 1.5;
+    ctx.miterLimit = NaN;
+    @assert ctx.miterLimit === 1.5;
+    t.done();
+
+- name: 2d.line.cross
+  code: |
+    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();
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 48,1 == 0,255,0,255;
+    @assert pixel 48,48 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    t.done();
+
+- name: 2d.line.union
+  code: |
+    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();
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 25,1 == 0,255,0,255;
+    @assert pixel 48,1 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 25,1 == 0,255,0,255;
+    @assert pixel 48,48 == 0,255,0,255;
+    t.done();
+
diff --git a/tests/wpt/web-platform-tests/html/canvas/tools/yaml/offscreen/meta.yaml b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/offscreen/meta.yaml
new file mode 100644
index 00000000000..3a114764a13
--- /dev/null
+++ b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/offscreen/meta.yaml
@@ -0,0 +1,555 @@
+- meta: |
+    state = [ # some non-default values to test with
+        ('strokeStyle', '"#ff0000"'),
+        ('fillStyle', '"#ff0000"'),
+        ('globalAlpha', 0.5),
+        ('lineWidth', 0.5),
+        ('lineCap', '"round"'),
+        ('lineJoin', '"round"'),
+        ('miterLimit', 0.5),
+        ('shadowOffsetX', 5),
+        ('shadowOffsetY', 5),
+        ('shadowBlur', 5),
+        ('shadowColor', '"#ff0000"'),
+        ('globalCompositeOperation', '"copy"'),
+    ]
+    for key,value in state:
+        tests.append( {
+            'name': '2d.state.saverestore.%s' % key,
+            'desc': 'save()/restore() works for %s' % key,
+            'testing': [ '2d.state.%s' % key ],
+            'code':
+    """// Test that restore() undoes any modifications
+    var old = ctx.%(key)s;
+    ctx.save();
+    ctx.%(key)s = %(value)s;
+    ctx.restore();
+    @assert ctx.%(key)s === old;
+
+    // Also test that save() doesn't modify the values
+    ctx.%(key)s = %(value)s;
+    old = ctx.%(key)s;
+        // we're not interested in failures caused by get(set(x)) != x (e.g.
+        // from rounding), so compare against 'old' instead of against %(value)s
+    ctx.save();
+    @assert ctx.%(key)s === old;
+    ctx.restore();
+    t.done();
+    """ % { 'key':key, 'value':value }
+        } )
+
+    tests.append( {
+        'name': 'initial.reset.2dstate',
+        'desc': 'Resetting the canvas state resets 2D state variables',
+        'testing': [ 'initial.reset' ],
+        'code':
+    """offscreenCanvas.width = 100;
+    var default_val;
+    """ + "".join(
+    """
+    default_val = ctx.%(key)s;
+    ctx.%(key)s = %(value)s;
+    offscreenCanvas.width = 100;
+    @assert ctx.%(key)s === default_val;
+    """ % { 'key':key, 'value':value }
+        for key,value in state) + "\nt.done();",
+    } )
+
+- meta: |
+    # Composite operation tests
+    # <http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2007-March/010608.html>
+    ops = [
+        # name               FA      FB
+        ('source-over',      '1',    '1-aA'),
+        ('destination-over', '1-aB', '1'),
+        ('source-in',        'aB',   '0'),
+        ('destination-in',   '0',    'aA'),
+        ('source-out',       '1-aB', '0'),
+        ('destination-out',  '0',    '1-aA'),
+        ('source-atop',      'aB',   '1-aA'),
+        ('destination-atop', '1-aB', 'aA'),
+        ('xor',              '1-aB', '1-aA'),
+        ('copy',             '1',    '0'),
+        ('lighter',          '1',    '1'),
+    ]
+
+    # The ones that change the output when src = (0,0,0,0):
+    ops_trans = [ 'source-in', 'destination-in', 'source-out', 'destination-atop', 'copy' ];
+
+    def calc_output(A, B, FA_code, FB_code):
+        RA, GA, BA, aA = A
+        RB, GB, BB, aB = B
+        rA, gA, bA = RA*aA, GA*aA, BA*aA
+        rB, gB, bB = RB*aB, GB*aB, BB*aB
+
+        FA = eval(FA_code)
+        FB = eval(FB_code)
+
+        rO = rA*FA + rB*FB
+        gO = gA*FA + gB*FB
+        bO = bA*FA + bB*FB
+        aO = aA*FA + aB*FB
+
+        rO = min(255, rO)
+        gO = min(255, gO)
+        bO = min(255, bO)
+        aO = min(1, aO)
+
+        if aO:
+            RO = rO / aO
+            GO = gO / aO
+            BO = bO / aO
+        else: RO = GO = BO = 0
+
+        return (RO, GO, BO, aO)
+
+    def to_test(color):
+        r, g, b, a = color
+        return '%d,%d,%d,%d' % (round(r), round(g), round(b), round(a*255))
+    def to_cairo(color):
+        r, g, b, a = color
+        return '%f,%f,%f,%f' % (r/255., g/255., b/255., a)
+
+    for (name, src, dest) in [
+        ('solid', (255, 255, 0, 1.0), (0, 255, 255, 1.0)),
+        ('transparent', (0, 0, 255, 0.75), (0, 255, 0, 0.5)),
+            # catches the atop, xor and lighter bugs in Opera 9.10
+    ]:
+        for op, FA_code, FB_code in ops:
+            expected = calc_output(src, dest, FA_code, FB_code)
+            tests.append( {
+                'name': '2d.composite.%s.%s' % (name, op),
+                'testing': [ '2d.composite.%s' % op ],
+                'code': """
+    ctx.fillStyle = 'rgba%s';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.globalCompositeOperation = '%s';
+    ctx.fillStyle = 'rgba%s';
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 50,25 ==~ %s +/- 5;
+    t.done();
+    """ % (dest, op, src, to_test(expected)),
+            } )
+
+    for (name, src, dest) in [ ('image', (255, 255, 0, 0.75), (0, 255, 255, 0.5)) ]:
+        for op, FA_code, FB_code in ops:
+            expected = calc_output(src, dest, FA_code, FB_code)
+            tests.append( {
+                'name': '2d.composite.%s.%s' % (name, op),
+                'testing': [ '2d.composite.%s' % op ],
+                'images': [ 'yellow75.png' ],
+                'code': """
+    ctx.fillStyle = 'rgba%s';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.globalCompositeOperation = '%s';
+    var promise = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/yellow75.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    promise.then(function(response) {
+        createImageBitmap(response).then(bitmap => {
+            ctx.drawImage(bitmap, 0, 0);
+            @assert pixel 50,25 ==~ %s +/- 5;
+        }, t_fail);
+    }).then(t_pass, t_fail);
+    """ % (dest, op, to_test(expected)),
+            } )
+
+    for (name, src, dest) in [ ('canvas', (255, 255, 0, 0.75), (0, 255, 255, 0.5)) ]:
+        for op, FA_code, FB_code in ops:
+            expected = calc_output(src, dest, FA_code, FB_code)
+            tests.append( {
+                'name': '2d.composite.%s.%s' % (name, op),
+                'testing': [ '2d.composite.%s' % op ],
+                'images': [ 'yellow75.png' ],
+                'code': """
+    var offscreenCanvas2 = new OffscreenCanvas(offscreenCanvas.width, offscreenCanvas.height);
+    var ctx2 = offscreenCanvas2.getContext('2d');
+    var promise = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/yellow75.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    promise.then(function(response) {
+        createImageBitmap(response).then(bitmap => {
+            ctx2.drawImage(bitmap, 0, 0);
+            ctx.fillStyle = 'rgba%s';
+            ctx.fillRect(0, 0, 100, 50);
+            ctx.globalCompositeOperation = '%s';
+            ctx.drawImage(offscreenCanvas2, 0, 0);
+            @assert pixel 50,25 ==~ %s +/- 5;
+        }, t_fail);
+    }).then(t_pass, t_fail);
+    """ % (dest, op, to_test(expected)),
+            } )
+
+    for (name, src, dest) in [ ('uncovered.fill', (0, 0, 255, 0.75), (0, 255, 0, 0.5)) ]:
+        for op, FA_code, FB_code in ops:
+            if op not in ops_trans: continue
+            expected0 = calc_output((0,0,0,0.0), dest, FA_code, FB_code)
+            new_test = {
+                'name': '2d.composite.%s.%s' % (name, op),
+                'desc': 'fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.',
+                'testing': [ '2d.composite.%s' % op ],
+                'code': """
+    ctx.fillStyle = 'rgba%s';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.globalCompositeOperation = '%s';
+    ctx.fillStyle = 'rgba%s';
+    ctx.translate(0, 25);
+    ctx.fillRect(0, 50, 100, 50);
+    @assert pixel 50,25 ==~ %s +/- 5;
+    t.done();
+    """ % (dest, op, src, to_test(expected0)),
+            }
+            if op == 'destination-in':
+              new_test['timeout'] = 'long'
+            tests.append(new_test)
+
+    for (name, src, dest) in [ ('uncovered.image', (255, 255, 0, 1.0), (0, 255, 255, 0.5)) ]:
+        for op, FA_code, FB_code in ops:
+            if op not in ops_trans: continue
+            expected0 = calc_output((0,0,0,0.0), dest, FA_code, FB_code)
+            tests.append( {
+                'name': '2d.composite.%s.%s' % (name, op),
+                'desc': 'drawImage() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.',
+                'testing': [ '2d.composite.%s' % op ],
+                'images': [ 'yellow.png' ],
+                'code': """
+    ctx.fillStyle = 'rgba%s';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.globalCompositeOperation = '%s';
+    var promise = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/yellow.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    promise.then(function(response) {
+        createImageBitmap(response).then(bitmap => {
+            ctx.drawImage(bitmap, 40, 40, 10, 10, 40, 50, 10, 10);
+            @assert pixel 15,15 ==~ %s +/- 5;
+            @assert pixel 50,25 ==~ %s +/- 5;
+        }, t_fail);
+    }).then(t_pass, t_fail);
+    """ % (dest, op, to_test(expected0), to_test(expected0)),
+            } )
+
+    for (name, src, dest) in [ ('uncovered.nocontext', (255, 255, 0, 1.0), (0, 255, 255, 0.5)) ]:
+        for op, FA_code, FB_code in ops:
+            if op not in ops_trans: continue
+            expected0 = calc_output((0,0,0,0.0), dest, FA_code, FB_code)
+            tests.append( {
+                'name': '2d.composite.%s.%s' % (name, op),
+                'desc': 'drawImage() of a canvas with no context draws pixels as (0,0,0,0), and does not leave the pixels unchanged.',
+                'testing': [ '2d.composite.%s' % op ],
+                'code': """
+    ctx.fillStyle = 'rgba%s';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.globalCompositeOperation = '%s';
+    var offscreenCanvas2 = new OffscreenCanvas(100, 50);
+    ctx.drawImage(offscreenCanvas2, 0, 0);
+    @assert pixel 50,25 ==~ %s +/- 5;
+    t.done();
+    """ % (dest, op, to_test(expected0)),
+            } )
+
+    for (name, src, dest) in [ ('uncovered.pattern', (255, 255, 0, 1.0), (0, 255, 255, 0.5)) ]:
+        for op, FA_code, FB_code in ops:
+            if op not in ops_trans: continue
+            expected0 = calc_output((0,0,0,0.0), dest, FA_code, FB_code)
+            tests.append( {
+                'name': '2d.composite.%s.%s' % (name, op),
+                'desc': 'Pattern fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.',
+                'testing': [ '2d.composite.%s' % op ],
+                'images': [ 'yellow.png' ],
+                'code': """
+    ctx.fillStyle = 'rgba%s';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.globalCompositeOperation = '%s';
+    var promise = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/yellow.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    promise.then(function(response) {
+        createImageBitmap(response).then(bitmap => {
+            ctx.fillStyle = ctx.createPattern(bitmap, 'no-repeat');
+            ctx.fillRect(0, 50, 100, 50);
+            @assert pixel 50,25 ==~ %s +/- 5;
+        }, t_fail);
+    }).then(t_pass, t_fail);
+    """ % (dest, op, to_test(expected0)),
+            } )
+
+    for op, FA_code, FB_code in ops:
+        tests.append( {
+            'name': '2d.composite.clip.%s' % (op),
+            'desc': 'fill() does not affect pixels outside the clip region.',
+            'testing': [ '2d.composite.%s' % op ],
+            'code': """
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.globalCompositeOperation = '%s';
+    ctx.rect(-20, -20, 10, 10);
+    ctx.clip();
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 50, 50);
+    @assert pixel 25,25 == 0,255,0,255;
+    @assert pixel 75,25 == 0,255,0,255;
+    t.done();
+    """ % (op),
+        } )
+
+- meta: |
+    # Colour parsing tests
+
+    # Try most of the CSS3 Color <color> values - http://www.w3.org/TR/css3-color/#colorunits
+    big_float = '1' + ('0' * 39)
+    big_double = '1' + ('0' * 310)
+    for name, string, r,g,b,a, notes in [
+        ('html4', 'limE', 0,255,0,255, ""),
+        ('hex3', '#0f0', 0,255,0,255, ""),
+        ('hex4', '#0f0f', 0,255,0,255, ""),
+        ('hex6', '#00fF00', 0,255,0,255, ""),
+        ('hex8', '#00ff00ff', 0,255,0,255, ""),
+        ('rgb-num', 'rgb(0,255,0)', 0,255,0,255, ""),
+        ('rgb-clamp-1', 'rgb(-1000, 1000, -1000)', 0,255,0,255, 'Assumes colours are clamped to [0,255].'),
+        ('rgb-clamp-2', 'rgb(-200%, 200%, -200%)', 0,255,0,255, 'Assumes colours are clamped to [0,255].'),
+        ('rgb-clamp-3', 'rgb(-2147483649, 4294967298, -18446744073709551619)', 0,255,0,255, 'Assumes colours are clamped to [0,255].'),
+        ('rgb-clamp-4', 'rgb(-'+big_float+', '+big_float+', -'+big_float+')', 0,255,0,255, 'Assumes colours are clamped to [0,255].'),
+        ('rgb-clamp-5', 'rgb(-'+big_double+', '+big_double+', -'+big_double+')', 0,255,0,255, 'Assumes colours are clamped to [0,255].'),
+        ('rgb-percent', 'rgb(0% ,100% ,0%)', 0,255,0,255, 'CSS3 Color says "The integer value 255 corresponds to 100%". (In particular, it is not 254...)'),
+        ('rgb-eof', 'rgb(0, 255, 0', 0,255,0,255, ""), # see CSS2.1 4.2 "Unexpected end of style sheet"
+        ('rgba-solid-1', 'rgba(  0  ,  255  ,  0  ,  1  )', 0,255,0,255, ""),
+        ('rgba-solid-2', 'rgba(  0  ,  255  ,  0  ,  1.0  )', 0,255,0,255, ""),
+        ('rgba-solid-3', 'rgba(  0  ,  255  ,  0  , +1  )', 0,255,0,255, ""),
+        ('rgba-solid-4', 'rgba( -0  ,  255  , +0  ,  1  )', 0,255,0,255, ""),
+        ('rgba-num-1', 'rgba(  0  ,  255  ,  0  ,  .499  )', 0,255,0,127, ""),
+        ('rgba-num-2', 'rgba(  0  ,  255  ,  0  ,  0.499  )', 0,255,0,127, ""),
+        ('rgba-percent', 'rgba(0%,100%,0%,0.499)', 0,255,0,127, ""), # 0.499*255 rounds to 127, both down and nearest, so it should be safe
+        ('rgba-clamp-1', 'rgba(0, 255, 0, -2)', 0,0,0,0, ""),
+        ('rgba-clamp-2', 'rgba(0, 255, 0, 2)', 0,255,0,255, ""),
+        ('rgba-eof', 'rgba(0, 255, 0, 1', 0,255,0,255, ""),
+        ('transparent-1', 'transparent', 0,0,0,0, ""),
+        ('transparent-2', 'TrAnSpArEnT', 0,0,0,0, ""),
+        ('hsl-1', 'hsl(120, 100%, 50%)', 0,255,0,255, ""),
+        ('hsl-2', 'hsl( -240 , 100% , 50% )', 0,255,0,255, ""),
+        ('hsl-3', 'hsl(360120, 100%, 50%)', 0,255,0,255, ""),
+        ('hsl-4', 'hsl(-360240, 100%, 50%)', 0,255,0,255, ""),
+        ('hsl-5', 'hsl(120.0, 100.0%, 50.0%)', 0,255,0,255, ""),
+        ('hsl-6', 'hsl(+120, +100%, +50%)', 0,255,0,255, ""),
+        ('hsl-clamp-1', 'hsl(120, 200%, 50%)', 0,255,0,255, ""),
+        ('hsl-clamp-2', 'hsl(120, -200%, 49.9%)', 127,127,127,255, ""),
+        ('hsl-clamp-3', 'hsl(120, 100%, 200%)', 255,255,255,255, ""),
+        ('hsl-clamp-4', 'hsl(120, 100%, -200%)', 0,0,0,255, ""),
+        ('hsla-1', 'hsla(120, 100%, 50%, 0.499)', 0,255,0,127, ""),
+        ('hsla-2', 'hsla( 120.0 , 100.0% , 50.0% , 1 )', 0,255,0,255, ""),
+        ('hsla-clamp-1', 'hsla(120, 200%, 50%, 1)', 0,255,0,255, ""),
+        ('hsla-clamp-2', 'hsla(120, -200%, 49.9%, 1)', 127,127,127,255, ""),
+        ('hsla-clamp-3', 'hsla(120, 100%, 200%, 1)', 255,255,255,255, ""),
+        ('hsla-clamp-4', 'hsla(120, 100%, -200%, 1)', 0,0,0,255, ""),
+        ('hsla-clamp-5', 'hsla(120, 100%, 50%, 2)', 0,255,0,255, ""),
+        ('hsla-clamp-6', 'hsla(120, 100%, 0%, -2)', 0,0,0,0, ""),
+        ('svg-1', 'gray', 128,128,128,255, ""),
+        ('svg-2', 'grey', 128,128,128,255, ""),
+        # css-color-4 rgb() color function
+        #   https://drafts.csswg.org/css-color/#numeric-rgb
+        ('css-color-4-rgb-1', 'rgb(0, 255.0, 0)', 0,255,0,255, ""),
+        ('css-color-4-rgb-2', 'rgb(0, 255, 0, 0.2)', 0,255,0,51, ""),
+        ('css-color-4-rgb-3', 'rgb(0, 255, 0, 20%)', 0,255,0,51, ""),
+        ('css-color-4-rgb-4', 'rgb(0 255 0)', 0,255,0,255, ""),
+        ('css-color-4-rgb-5', 'rgb(0 255 0 / 0.2)', 0,255,0,51, ""),
+        ('css-color-4-rgb-6', 'rgb(0 255 0 / 20%)', 0,255,0,51, ""),
+        ('css-color-4-rgba-1', 'rgba(0, 255.0, 0)', 0,255,0,255, ""),
+        ('css-color-4-rgba-2', 'rgba(0, 255, 0, 0.2)', 0,255,0,51, ""),
+        ('css-color-4-rgba-3', 'rgba(0, 255, 0, 20%)', 0,255,0,51, ""),
+        ('css-color-4-rgba-4', 'rgba(0 255 0)', 0,255,0,255, ""),
+        ('css-color-4-rgba-5', 'rgba(0 255 0 / 0.2)', 0,255,0,51, ""),
+        ('css-color-4-rgba-6', 'rgba(0 255 0 / 20%)', 0,255,0,51, ""),
+        # css-color-4 hsl() color function
+        #   https://drafts.csswg.org/css-color/#the-hsl-notation
+        ('css-color-4-hsl-1', 'hsl(120 100.0% 50.0%)', 0,255,0,255, ""),
+        ('css-color-4-hsl-2', 'hsl(120 100.0% 50.0% / 0.2)', 0,255,0,51, ""),
+        ('css-color-4-hsl-3', 'hsl(120.0, 100.0%, 50.0%, 0.2)', 0,255,0,51, ""),
+        ('css-color-4-hsl-4', 'hsl(120.0, 100.0%, 50.0%, 20%)', 0,255,0,51, ""),
+        ('css-color-4-hsl-5', 'hsl(120deg, 100.0%, 50.0%, 0.2)', 0,255,0,51, ""),
+        ('css-color-4-hsl-6', 'hsl(120deg, 100.0%, 50.0%)', 0,255,0,255, ""),
+        ('css-color-4-hsl-7', 'hsl(133.33333333grad, 100.0%, 50.0%)', 0,255,0,255, ""),
+        ('css-color-4-hsl-8', 'hsl(2.0943951024rad, 100.0%, 50.0%)', 0,255,0,255, ""),
+        ('css-color-4-hsl-9', 'hsl(0.3333333333turn, 100.0%, 50.0%)', 0,255,0,255, ""),
+        ('css-color-4-hsla-1', 'hsl(120 100.0% 50.0%)', 0,255,0,255, ""),
+        ('css-color-4-hsla-2', 'hsl(120 100.0% 50.0% / 0.2)', 0,255,0,51, ""),
+        ('css-color-4-hsla-3', 'hsl(120.0, 100.0%, 50.0%, 0.2)', 0,255,0,51, ""),
+        ('css-color-4-hsla-4', 'hsl(120.0, 100.0%, 50.0%, 20%)', 0,255,0,51, ""),
+        ('css-color-4-hsla-5', 'hsl(120deg, 100.0%, 50.0%, 0.2)', 0,255,0,51, ""),
+        ('css-color-4-hsla-6', 'hsl(120deg, 100.0%, 50.0%)', 0,255,0,255, ""),
+        ('css-color-4-hsla-7', 'hsl(133.33333333grad, 100.0%, 50.0%)', 0,255,0,255, ""),
+        ('css-color-4-hsla-8', 'hsl(2.0943951024rad, 100.0%, 50.0%)', 0,255,0,255, ""),
+        ('css-color-4-hsla-9', 'hsl(0.3333333333turn, 100.0%, 50.0%)', 0,255,0,255, ""),
+        # currentColor is handled later
+    ]:
+        # TODO: test by retrieving fillStyle, instead of actually drawing?
+        # TODO: test strokeStyle, shadowColor in the same way
+        test = {
+            'name': '2d.fillStyle.parse.%s' % name,
+            'testing': [ '2d.colours.parse' ],
+            'notes': notes,
+            'code': """
+    ctx.fillStyle = '#f00';
+    ctx.fillStyle = '%s';
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 50,25 == %d,%d,%d,%d;
+    t.done();
+    """ % (string, r,g,b,a),
+        }
+        tests.append(test)
+
+    # Also test that invalid colours are ignored
+    for name, string in [
+        ('hex1', '#f'),
+        ('hex2', '#f0'),
+        ('hex3', '#g00'),
+        ('hex4', '#fg00'),
+        ('hex5', '#ff000'),
+        ('hex6', '#fg0000'),
+        ('hex7', '#ff0000f'),
+        ('hex8', '#fg0000ff'),
+        ('rgb-1', 'rgb(255.0, 0, 0,)'),
+        ('rgb-2', 'rgb(100%, 0, 0)'),
+        ('rgb-3', 'rgb(255, - 1, 0)'),
+        ('rgba-1', 'rgba(100%, 0, 0, 1)'),
+        ('rgba-2', 'rgba(255, 0, 0, 1. 0)'),
+        ('rgba-3', 'rgba(255, 0, 0, 1.)'),
+        ('rgba-4', 'rgba(255, 0, 0, '),
+        ('rgba-5', 'rgba(255, 0, 0, 1,)'),
+        ('hsl-1', 'hsl(0%, 100%, 50%)'),
+        ('hsl-2', 'hsl(z, 100%, 50%)'),
+        ('hsl-3', 'hsl(0, 0, 50%)'),
+        ('hsl-4', 'hsl(0, 100%, 0)'),
+        ('hsl-5', 'hsl(0, 100.%, 50%)'),
+        ('hsl-6', 'hsl(0, 100%, 50%,)'),
+        ('hsla-1', 'hsla(0%, 100%, 50%, 1)'),
+        ('hsla-2', 'hsla(0, 0, 50%, 1)'),
+        ('hsla-3', 'hsla(0, 0, 50%, 1,)'),
+        ('name-1', 'darkbrown'),
+        ('name-2', 'firebrick1'),
+        ('name-3', 'red blue'),
+        ('name-4', '"red"'),
+        ('name-5', '"red'),
+        # css-color-4 color function
+        #   comma and comma-less expressions should not mix together.
+        ('css-color-4-rgb-1', 'rgb(255, 0, 0 / 1)'),
+        ('css-color-4-rgb-2', 'rgb(255 0 0, 1)'),
+        ('css-color-4-rgb-3', 'rgb(255, 0 0)'),
+        ('css-color-4-rgba-1', 'rgba(255, 0, 0 / 1)'),
+        ('css-color-4-rgba-2', 'rgba(255 0 0, 1)'),
+        ('css-color-4-rgba-3', 'rgba(255, 0 0)'),
+        ('css-color-4-hsl-1', 'hsl(0, 100%, 50% / 1)'),
+        ('css-color-4-hsl-2', 'hsl(0 100% 50%, 1)'),
+        ('css-color-4-hsl-3', 'hsl(0, 100% 50%)'),
+        ('css-color-4-hsla-1', 'hsla(0, 100%, 50% / 1)'),
+        ('css-color-4-hsla-2', 'hsla(0 100% 50%, 1)'),
+        ('css-color-4-hsla-3', 'hsla(0, 100% 50%)'),
+        #  trailing slash
+        ('css-color-4-rgb-4', 'rgb(0 0 0 /)'),
+        ('css-color-4-rgb-5', 'rgb(0, 0, 0 /)'),
+        ('css-color-4-hsl-4', 'hsl(0 100% 50% /)'),
+        ('css-color-4-hsl-5', 'hsl(0, 100%, 50% /)'),
+    ]:
+        test = {
+            'name': '2d.fillStyle.parse.invalid.%s' % name,
+            'testing': [ '2d.colours.parse' ],
+            'code': """
+    ctx.fillStyle = '#0f0';
+    try { ctx.fillStyle = '%s'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+    """ % string,
+        }
+        tests.append(test)
+
+    # Some can't have positive tests, only negative tests, because we don't know what colour they're meant to be
+    for name, string in [
+        ('system', 'ThreeDDarkShadow'),
+        #('flavor', 'flavor'), # removed from latest CSS3 Color drafts
+    ]:
+        test = {
+            'name': '2d.fillStyle.parse.%s' % name,
+            'testing': [ '2d.colours.parse' ],
+            'code': """
+    ctx.fillStyle = '#f00';
+    ctx.fillStyle = '%s';
+    @assert ctx.fillStyle =~ /^#(?!(FF0000|ff0000|f00)$)/; // test that it's not red
+    t.done();
+    """ % (string,),
+        }
+        tests.append(test)
+
+- meta: |
+    cases = [
+        ("zero", "0", 0),
+        ("empty", "", 0),
+        ("onlyspace", "  ", 0),
+        ("space", "  100", 100),
+        ("whitespace", "\t\f100", 100),
+        ("plus", "+100", 100),
+        ("minus", "-100", "exception"),
+        ("octal", "0100", 100),
+        ("hex", "0x100", 0x100),
+        ("exp", "100e1", 100e1),
+        ("decimal", "100.999", 100),
+        ("percent", "100%", "exception"),
+        ("em", "100em", "exception"),
+        ("junk", "#!?", "exception"),
+        ("trailingjunk", "100#!?", "exception"),
+    ]
+    def gen(name, string, exp, code):
+        testing = ["size.nonnegativeinteger"]
+        if exp is None:
+            testing.append("size.error")
+            code += "offscreenCanvas.width = '%s';\noffscreenCanvas.height = '%s';\n" % (string, string)
+            code += "@assert offscreenCanvas.width === 100;\n@assert offscreenCanvas.height === 50;\n"
+            expected = None
+        elif exp == "exception":
+            code += "@assert throws TypeError offscreenCanvas.width = '%s';\n" % string
+            expected = None
+        else:
+            code += "offscreenCanvas.width = '%s';\noffscreenCanvas.height = '%s';\n" % (string, string)
+            code += "@assert offscreenCanvas.width === %s;\n@assert offscreenCanvas.height === %s;\n" % (exp, exp)
+            expected = None
+
+        code += "t.done();\n"
+
+        if exp == 0:
+            expected = None # can't generate zero-sized PNGs for the expected image
+
+        return code, testing, expected
+
+    for name, string, exp in cases:
+        code = ""
+        code, testing, expected = gen(name, string, exp, code)
+        tests.append( {
+            "name": "size.attributes.parse.%s" % name,
+            "desc": "Parsing of non-negative integers",
+            "testing": testing,
+            "code": code,
+        } )
+
diff --git a/tests/wpt/web-platform-tests/html/canvas/tools/yaml/offscreen/path-objects.yaml b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/offscreen/path-objects.yaml
new file mode 100644
index 00000000000..588079982fb
--- /dev/null
+++ b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/offscreen/path-objects.yaml
@@ -0,0 +1,2397 @@
+- name: 2d.path.initial
+  testing:
+  - 2d.path.initial
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.closePath();
+    ctx.fillStyle = '#f00';
+    ctx.fill();
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.beginPath
+  testing:
+  - 2d.path.beginPath
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.rect(0, 0, 100, 50);
+    ctx.beginPath();
+    ctx.fillStyle = '#f00';
+    ctx.fill();
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.moveTo.basic
+  testing:
+  - 2d.path.moveTo
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.rect(0, 0, 10, 50);
+    ctx.moveTo(100, 0);
+    ctx.lineTo(10, 0);
+    ctx.lineTo(10, 50);
+    ctx.lineTo(100, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.fill();
+    @assert pixel 90,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.moveTo.newsubpath
+  testing:
+  - 2d.path.moveTo
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.beginPath();
+    ctx.moveTo(0, 0);
+    ctx.moveTo(100, 0);
+    ctx.moveTo(100, 50);
+    ctx.moveTo(0, 50);
+    ctx.fillStyle = '#f00';
+    ctx.fill();
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.moveTo.multiple
+  testing:
+  - 2d.path.moveTo
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.moveTo(0, 25);
+    ctx.moveTo(100, 25);
+    ctx.moveTo(0, 25);
+    ctx.lineTo(100, 25);
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 50;
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.moveTo.nonfinite
+  desc: moveTo() with Infinity/NaN is ignored
+  testing:
+  - 2d.nonfinite
+  code: |
+    ctx.moveTo(0, 0);
+    ctx.lineTo(100, 0);
+    @nonfinite ctx.moveTo(<0 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>);
+    ctx.lineTo(100, 50);
+    ctx.lineTo(0, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.fill();
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.closePath.empty
+  testing:
+  - 2d.path.closePath.empty
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.closePath();
+    ctx.fillStyle = '#f00';
+    ctx.fill();
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.closePath.newline
+  testing:
+  - 2d.path.closePath.nonempty
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 50;
+    ctx.moveTo(-100, 25);
+    ctx.lineTo(-100, -100);
+    ctx.lineTo(200, -100);
+    ctx.lineTo(200, 25);
+    ctx.closePath();
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.closePath.nextpoint
+  testing:
+  - 2d.path.closePath.nonempty
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 50;
+    ctx.moveTo(-100, 25);
+    ctx.lineTo(-100, -1000);
+    ctx.closePath();
+    ctx.lineTo(1000, 25);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.lineTo.ensuresubpath.1
+  desc: If there is no subpath, the point is added and nothing is drawn
+  testing:
+  - 2d.path.lineTo.empty
+  - 2d.path.ensure
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 50;
+    ctx.beginPath();
+    ctx.lineTo(100, 50);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.lineTo.ensuresubpath.2
+  desc: If there is no subpath, the point is added and used for subsequent drawing
+  testing:
+  - 2d.path.lineTo.empty
+  - 2d.path.ensure
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 50;
+    ctx.beginPath();
+    ctx.lineTo(0, 25);
+    ctx.lineTo(100, 25);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.lineTo.basic
+  testing:
+  - 2d.path.lineTo.nonempty
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 50;
+    ctx.beginPath();
+    ctx.moveTo(0, 25);
+    ctx.lineTo(100, 25);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.lineTo.nextpoint
+  testing:
+  - 2d.path.lineTo.nonempty
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 50;
+    ctx.beginPath();
+    ctx.moveTo(-100, -100);
+    ctx.lineTo(0, 25);
+    ctx.lineTo(100, 25);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.lineTo.nonfinite
+  desc: lineTo() with Infinity/NaN is ignored
+  testing:
+  - 2d.nonfinite
+  code: |
+    ctx.moveTo(0, 0);
+    ctx.lineTo(100, 0);
+    @nonfinite ctx.lineTo(<0 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>);
+    ctx.lineTo(100, 50);
+    ctx.lineTo(0, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.fill();
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 90,45 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.lineTo.nonfinite.details
+  desc: lineTo() with Infinity/NaN for first arg still converts the second arg
+  testing:
+  - 2d.nonfinite
+  code: |
+    for (var arg1 of [Infinity, -Infinity, NaN]) {
+      var converted = false;
+      ctx.lineTo(arg1, { valueOf: function() { converted = true; return 0; } });
+      @assert converted;
+    }
+    t.done();
+
+- name: 2d.path.quadraticCurveTo.ensuresubpath.1
+  desc: If there is no subpath, the first control point is added (and nothing is drawn
+    up to it)
+  testing:
+  - 2d.path.quadratic.empty
+  - 2d.path.ensure
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 50;
+    ctx.beginPath();
+    ctx.quadraticCurveTo(100, 50, 200, 50);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 95,45 == 0,255,0,255; @moz-todo
+    t.done();
+
+- name: 2d.path.quadraticCurveTo.ensuresubpath.2
+  desc: If there is no subpath, the first control point is added
+  testing:
+  - 2d.path.quadratic.empty
+  - 2d.path.ensure
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 50;
+    ctx.beginPath();
+    ctx.quadraticCurveTo(0, 25, 100, 25);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 5,45 == 0,255,0,255; @moz-todo
+    t.done();
+
+- name: 2d.path.quadraticCurveTo.basic
+  testing:
+  - 2d.path.quadratic.nonempty
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 50;
+    ctx.beginPath();
+    ctx.moveTo(0, 25);
+    ctx.quadraticCurveTo(100, 25, 100, 25);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.quadraticCurveTo.shape
+  testing:
+  - 2d.path.quadratic.nonempty
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 55;
+    ctx.beginPath();
+    ctx.moveTo(-1000, 1050);
+    ctx.quadraticCurveTo(0, -1000, 1200, 1050);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.quadraticCurveTo.scaled
+  testing:
+  - 2d.path.quadratic.nonempty
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.scale(1000, 1000);
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 0.055;
+    ctx.beginPath();
+    ctx.moveTo(-1, 1.05);
+    ctx.quadraticCurveTo(0, -1, 1.2, 1.05);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.quadraticCurveTo.nonfinite
+  desc: quadraticCurveTo() with Infinity/NaN is ignored
+  testing:
+  - 2d.nonfinite
+  code: |
+    ctx.moveTo(0, 0);
+    ctx.lineTo(100, 0);
+    @nonfinite ctx.quadraticCurveTo(<0 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>);
+    ctx.lineTo(100, 50);
+    ctx.lineTo(0, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.fill();
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 90,45 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.bezierCurveTo.ensuresubpath.1
+  desc: If there is no subpath, the first control point is added (and nothing is drawn
+    up to it)
+  testing:
+  - 2d.path.bezier.empty
+  - 2d.path.ensure
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 50;
+    ctx.beginPath();
+    ctx.bezierCurveTo(100, 50, 200, 50, 200, 50);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 95,45 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.bezierCurveTo.ensuresubpath.2
+  desc: If there is no subpath, the first control point is added
+  testing:
+  - 2d.path.bezier.empty
+  - 2d.path.ensure
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 50;
+    ctx.beginPath();
+    ctx.bezierCurveTo(0, 25, 100, 25, 100, 25);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 5,45 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.bezierCurveTo.basic
+  testing:
+  - 2d.path.bezier.nonempty
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 50;
+    ctx.beginPath();
+    ctx.moveTo(0, 25);
+    ctx.bezierCurveTo(100, 25, 100, 25, 100, 25);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.bezierCurveTo.shape
+  testing:
+  - 2d.path.bezier.nonempty
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 55;
+    ctx.beginPath();
+    ctx.moveTo(-2000, 3100);
+    ctx.bezierCurveTo(-2000, -1000, 2100, -1000, 2100, 3100);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.bezierCurveTo.scaled
+  testing:
+  - 2d.path.bezier.nonempty
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.scale(1000, 1000);
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 0.055;
+    ctx.beginPath();
+    ctx.moveTo(-2, 3.1);
+    ctx.bezierCurveTo(-2, -1, 2.1, -1, 2.1, 3.1);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.bezierCurveTo.nonfinite
+  desc: bezierCurveTo() with Infinity/NaN is ignored
+  testing:
+  - 2d.nonfinite
+  code: |
+    ctx.moveTo(0, 0);
+    ctx.lineTo(100, 0);
+    @nonfinite ctx.bezierCurveTo(<0 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>);
+    ctx.lineTo(100, 50);
+    ctx.lineTo(0, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.fill();
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 90,45 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.arcTo.ensuresubpath.1
+  desc: If there is no subpath, the first control point is added (and nothing is drawn
+    up to it)
+  testing:
+  - 2d.path.arcTo.empty
+  - 2d.path.ensure
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.lineWidth = 50;
+    ctx.strokeStyle = '#f00';
+    ctx.beginPath();
+    ctx.arcTo(100, 50, 200, 50, 0.1);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.arcTo.ensuresubpath.2
+  desc: If there is no subpath, the first control point is added
+  testing:
+  - 2d.path.arcTo.empty
+  - 2d.path.ensure
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.lineWidth = 50;
+    ctx.strokeStyle = '#0f0';
+    ctx.beginPath();
+    ctx.arcTo(0, 25, 50, 250, 0.1); // adds (x1,y1), draws nothing
+    ctx.lineTo(100, 25);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.arcTo.coincide.1
+  desc: arcTo() has no effect if P0 = P1
+  testing:
+  - 2d.path.arcTo.coincide.01
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.lineWidth = 50;
+    ctx.strokeStyle = '#0f0';
+    ctx.beginPath();
+    ctx.moveTo(0, 25);
+    ctx.arcTo(0, 25, 50, 1000, 1);
+    ctx.lineTo(100, 25);
+    ctx.stroke();
+    ctx.strokeStyle = '#f00';
+    ctx.beginPath();
+    ctx.moveTo(50, 25);
+    ctx.arcTo(50, 25, 100, 25, 1);
+    ctx.stroke();
+    @assert pixel 50,1 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 50,48 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.arcTo.coincide.2
+  desc: arcTo() draws a straight line to P1 if P1 = P2
+  testing:
+  - 2d.path.arcTo.coincide.12
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.lineWidth = 50;
+    ctx.strokeStyle = '#0f0';
+    ctx.beginPath();
+    ctx.moveTo(0, 25);
+    ctx.arcTo(100, 25, 100, 25, 1);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.arcTo.collinear.1
+  desc: arcTo() with all points on a line, and P1 between P0/P2, draws a straight
+    line to P1
+  testing:
+  - 2d.path.arcTo.collinear
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.lineWidth = 50;
+    ctx.strokeStyle = '#0f0';
+    ctx.beginPath();
+    ctx.moveTo(0, 25);
+    ctx.arcTo(100, 25, 200, 25, 1);
+    ctx.stroke();
+    ctx.strokeStyle = '#f00';
+    ctx.beginPath();
+    ctx.moveTo(-100, 25);
+    ctx.arcTo(0, 25, 100, 25, 1);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.arcTo.collinear.2
+  desc: arcTo() with all points on a line, and P2 between P0/P1, draws a straight
+    line to P1
+  testing:
+  - 2d.path.arcTo.collinear
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.lineWidth = 50;
+    ctx.strokeStyle = '#0f0';
+    ctx.beginPath();
+    ctx.moveTo(0, 25);
+    ctx.arcTo(100, 25, 10, 25, 1);
+    ctx.stroke();
+    ctx.strokeStyle = '#f00';
+    ctx.beginPath();
+    ctx.moveTo(100, 25);
+    ctx.arcTo(200, 25, 110, 25, 1);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.arcTo.collinear.3
+  desc: arcTo() with all points on a line, and P0 between P1/P2, draws a straight
+    line to P1
+  testing:
+  - 2d.path.arcTo.collinear
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.lineWidth = 50;
+    ctx.strokeStyle = '#0f0';
+    ctx.beginPath();
+    ctx.moveTo(0, 25);
+    ctx.arcTo(100, 25, -100, 25, 1);
+    ctx.stroke();
+    ctx.strokeStyle = '#f00';
+    ctx.beginPath();
+    ctx.moveTo(100, 25);
+    ctx.arcTo(200, 25, 0, 25, 1);
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.moveTo(-100, 25);
+    ctx.arcTo(0, 25, -200, 25, 1);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.arcTo.shape.curve1
+  desc: arcTo() curves in the right kind of shape
+  testing:
+  - 2d.path.arcTo.shape
+  code: |
+    var tol = 1.5; // tolerance to avoid antialiasing artifacts
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 10;
+    ctx.beginPath();
+    ctx.moveTo(10, 25);
+    ctx.arcTo(75, 25, 75, 60, 20);
+    ctx.stroke();
+    ctx.fillStyle = '#0f0';
+    ctx.beginPath();
+    ctx.rect(10, 20, 45, 10);
+    ctx.moveTo(80, 45);
+    ctx.arc(55, 45, 25+tol, 0, -Math.PI/2, true);
+    ctx.arc(55, 45, 15-tol, -Math.PI/2, 0, false);
+    ctx.fill();
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 55,19 == 0,255,0,255;
+    @assert pixel 55,20 == 0,255,0,255;
+    @assert pixel 55,21 == 0,255,0,255;
+    @assert pixel 64,22 == 0,255,0,255;
+    @assert pixel 65,21 == 0,255,0,255;
+    @assert pixel 72,28 == 0,255,0,255;
+    @assert pixel 73,27 == 0,255,0,255;
+    @assert pixel 78,36 == 0,255,0,255;
+    @assert pixel 79,35 == 0,255,0,255;
+    @assert pixel 80,44 == 0,255,0,255;
+    @assert pixel 80,45 == 0,255,0,255;
+    @assert pixel 80,46 == 0,255,0,255;
+    @assert pixel 65,45 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.arcTo.shape.curve2
+  desc: arcTo() curves in the right kind of shape
+  testing:
+  - 2d.path.arcTo.shape
+  code: |
+    var tol = 1.5; // tolerance to avoid antialiasing artifacts
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#f00';
+    ctx.beginPath();
+    ctx.rect(10, 20, 45, 10);
+    ctx.moveTo(80, 45);
+    ctx.arc(55, 45, 25-tol, 0, -Math.PI/2, true);
+    ctx.arc(55, 45, 15+tol, -Math.PI/2, 0, false);
+    ctx.fill();
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 10;
+    ctx.beginPath();
+    ctx.moveTo(10, 25);
+    ctx.arcTo(75, 25, 75, 60, 20);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 55,19 == 0,255,0,255;
+    @assert pixel 55,20 == 0,255,0,255;
+    @assert pixel 55,21 == 0,255,0,255;
+    @assert pixel 64,22 == 0,255,0,255;
+    @assert pixel 65,21 == 0,255,0,255;
+    @assert pixel 72,28 == 0,255,0,255;
+    @assert pixel 73,27 == 0,255,0,255;
+    @assert pixel 78,36 == 0,255,0,255;
+    @assert pixel 79,35 == 0,255,0,255;
+    @assert pixel 80,44 == 0,255,0,255;
+    @assert pixel 80,45 == 0,255,0,255;
+    @assert pixel 80,46 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.arcTo.shape.start
+  desc: arcTo() draws a straight line from P0 to P1
+  testing:
+  - 2d.path.arcTo.shape
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 50;
+    ctx.beginPath();
+    ctx.moveTo(0, 25);
+    ctx.arcTo(200, 25, 200, 50, 10);
+    ctx.stroke();
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.arcTo.shape.end
+  desc: arcTo() does not draw anything from P1 to P2
+  testing:
+  - 2d.path.arcTo.shape
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 50;
+    ctx.beginPath();
+    ctx.moveTo(-100, -100);
+    ctx.arcTo(-100, 25, 200, 25, 10);
+    ctx.stroke();
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.arcTo.negative
+  desc: arcTo() with negative radius throws an exception
+  testing:
+  - 2d.path.arcTo.negative
+  code: |
+    @assert throws INDEX_SIZE_ERR ctx.arcTo(0, 0, 0, 0, -1);
+    t.done();
+
+- name: 2d.path.arcTo.zero.1
+  desc: arcTo() with zero radius draws a straight line from P0 to P1
+  testing:
+  - 2d.path.arcTo.zeroradius
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.lineWidth = 50;
+    ctx.strokeStyle = '#0f0';
+    ctx.beginPath();
+    ctx.moveTo(0, 25);
+    ctx.arcTo(100, 25, 100, 100, 0);
+    ctx.stroke();
+    ctx.strokeStyle = '#f00';
+    ctx.beginPath();
+    ctx.moveTo(0, -25);
+    ctx.arcTo(50, -25, 50, 50, 0);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.arcTo.zero.2
+  desc: arcTo() with zero radius draws a straight line from P0 to P1, even when all
+    points are collinear
+  testing:
+  - 2d.path.arcTo.zeroradius
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.lineWidth = 50;
+    ctx.strokeStyle = '#0f0';
+    ctx.beginPath();
+    ctx.moveTo(0, 25);
+    ctx.arcTo(100, 25, -100, 25, 0);
+    ctx.stroke();
+    ctx.strokeStyle = '#f00';
+    ctx.beginPath();
+    ctx.moveTo(100, 25);
+    ctx.arcTo(200, 25, 50, 25, 0);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.arcTo.transformation
+  desc: arcTo joins up to the last subpath point correctly
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.beginPath();
+    ctx.moveTo(0, 50);
+    ctx.translate(100, 0);
+    ctx.arcTo(50, 50, 50, 0, 50);
+    ctx.lineTo(-100, 0);
+    ctx.fill();
+    @assert pixel 0,0 == 0,255,0,255;
+    @assert pixel 50,0 == 0,255,0,255;
+    @assert pixel 99,0 == 0,255,0,255;
+    @assert pixel 0,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 99,25 == 0,255,0,255;
+    @assert pixel 0,49 == 0,255,0,255;
+    @assert pixel 50,49 == 0,255,0,255;
+    @assert pixel 99,49 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.arcTo.scale
+  desc: arcTo scales the curve, not just the control points
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.beginPath();
+    ctx.moveTo(0, 50);
+    ctx.translate(100, 0);
+    ctx.scale(0.1, 1);
+    ctx.arcTo(50, 50, 50, 0, 50);
+    ctx.lineTo(-1000, 0);
+    ctx.fill();
+    @assert pixel 0,0 == 0,255,0,255;
+    @assert pixel 50,0 == 0,255,0,255;
+    @assert pixel 99,0 == 0,255,0,255;
+    @assert pixel 0,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 99,25 == 0,255,0,255;
+    @assert pixel 0,49 == 0,255,0,255;
+    @assert pixel 50,49 == 0,255,0,255;
+    @assert pixel 99,49 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.arcTo.nonfinite
+  desc: arcTo() with Infinity/NaN is ignored
+  testing:
+  - 2d.nonfinite
+  code: |
+    ctx.moveTo(0, 0);
+    ctx.lineTo(100, 0);
+    @nonfinite ctx.arcTo(<0 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>);
+    ctx.lineTo(100, 50);
+    ctx.lineTo(0, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.fill();
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 90,45 == 0,255,0,255;
+    t.done();
+
+
+- name: 2d.path.arc.empty
+  desc: arc() with an empty path does not draw a straight line to the start point
+  testing:
+  - 2d.path.arc.nonempty
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.lineWidth = 50;
+    ctx.strokeStyle = '#f00';
+    ctx.beginPath();
+    ctx.arc(200, 25, 5, 0, 2*Math.PI, true);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.arc.nonempty
+  desc: arc() with a non-empty path does draw a straight line to the start point
+  testing:
+  - 2d.path.arc.nonempty
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.lineWidth = 50;
+    ctx.strokeStyle = '#0f0';
+    ctx.beginPath();
+    ctx.moveTo(0, 25);
+    ctx.arc(200, 25, 5, 0, 2*Math.PI, true);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.arc.end
+  desc: arc() adds the end point of the arc to the subpath
+  testing:
+  - 2d.path.arc.draw
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.lineWidth = 50;
+    ctx.strokeStyle = '#0f0';
+    ctx.beginPath();
+    ctx.moveTo(-100, 0);
+    ctx.arc(-100, 0, 25, -Math.PI/2, Math.PI/2, true);
+    ctx.lineTo(100, 25);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.arc.default
+  desc: arc() with missing last argument defaults to clockwise
+  testing:
+  - 2d.path.arc.omitted
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#f00';
+    ctx.beginPath();
+    ctx.moveTo(100, 0);
+    ctx.arc(100, 0, 150, -Math.PI, Math.PI/2);
+    ctx.fill();
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.arc.angle.1
+  desc: arc() draws pi/2 .. -pi anticlockwise correctly
+  testing:
+  - 2d.path.arc.draw
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#f00';
+    ctx.beginPath();
+    ctx.moveTo(100, 0);
+    ctx.arc(100, 0, 150, Math.PI/2, -Math.PI, true);
+    ctx.fill();
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.arc.angle.2
+  desc: arc() draws -3pi/2 .. -pi anticlockwise correctly
+  testing:
+  - 2d.path.arc.draw
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#f00';
+    ctx.beginPath();
+    ctx.moveTo(100, 0);
+    ctx.arc(100, 0, 150, -3*Math.PI/2, -Math.PI, true);
+    ctx.fill();
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.arc.angle.3
+  desc: arc() wraps angles mod 2pi when anticlockwise and end > start+2pi
+  testing:
+  - 2d.path.arc.draw
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#f00';
+    ctx.beginPath();
+    ctx.moveTo(100, 0);
+    ctx.arc(100, 0, 150, (512+1/2)*Math.PI, (1024-1)*Math.PI, true);
+    ctx.fill();
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.arc.angle.4
+  desc: arc() draws a full circle when clockwise and end > start+2pi
+  testing:
+  - 2d.path.arc.draw
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.beginPath();
+    ctx.moveTo(50, 25);
+    ctx.arc(50, 25, 60, (512+1/2)*Math.PI, (1024-1)*Math.PI, false);
+    ctx.fill();
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.arc.angle.5
+  desc: arc() wraps angles mod 2pi when clockwise and start > end+2pi
+  testing:
+  - 2d.path.arc.draw
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#f00';
+    ctx.beginPath();
+    ctx.moveTo(100, 0);
+    ctx.arc(100, 0, 150, (1024-1)*Math.PI, (512+1/2)*Math.PI, false);
+    ctx.fill();
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.arc.angle.6
+  desc: arc() draws a full circle when anticlockwise and start > end+2pi
+  testing:
+  - 2d.path.arc.draw
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.beginPath();
+    ctx.moveTo(50, 25);
+    ctx.arc(50, 25, 60, (1024-1)*Math.PI, (512+1/2)*Math.PI, true);
+    ctx.fill();
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.arc.zero.1
+  desc: arc() draws nothing when startAngle = endAngle and anticlockwise
+  testing:
+  - 2d.path.arc.draw
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 100;
+    ctx.beginPath();
+    ctx.arc(50, 25, 50, 0, 0, true);
+    ctx.stroke();
+    @assert pixel 50,20 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.arc.zero.2
+  desc: arc() draws nothing when startAngle = endAngle and clockwise
+  testing:
+  - 2d.path.arc.draw
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 100;
+    ctx.beginPath();
+    ctx.arc(50, 25, 50, 0, 0, false);
+    ctx.stroke();
+    @assert pixel 50,20 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.arc.twopie.1
+  desc: arc() draws nothing when end = start + 2pi-e and anticlockwise
+  testing:
+  - 2d.path.arc.draw
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 100;
+    ctx.beginPath();
+    ctx.arc(50, 25, 50, 0, 2*Math.PI - 1e-4, true);
+    ctx.stroke();
+    @assert pixel 50,20 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.arc.twopie.2
+  desc: arc() draws a full circle when end = start + 2pi-e and clockwise
+  testing:
+  - 2d.path.arc.draw
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 100;
+    ctx.beginPath();
+    ctx.arc(50, 25, 50, 0, 2*Math.PI - 1e-4, false);
+    ctx.stroke();
+    @assert pixel 50,20 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.arc.twopie.3
+  desc: arc() draws a full circle when end = start + 2pi+e and anticlockwise
+  testing:
+  - 2d.path.arc.draw
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 100;
+    ctx.beginPath();
+    ctx.arc(50, 25, 50, 0, 2*Math.PI + 1e-4, true);
+    ctx.stroke();
+    @assert pixel 50,20 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.arc.twopie.4
+  desc: arc() draws nothing when end = start + 2pi+e and clockwise
+  testing:
+  - 2d.path.arc.draw
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 100;
+    ctx.beginPath();
+    ctx.arc(50, 25, 50, 0, 2*Math.PI + 1e-4, false);
+    ctx.stroke();
+    @assert pixel 50,20 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.arc.shape.1
+  desc: arc() from 0 to pi does not draw anything in the wrong half
+  testing:
+  - 2d.path.arc.draw
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.lineWidth = 50;
+    ctx.strokeStyle = '#f00';
+    ctx.beginPath();
+    ctx.arc(50, 50, 50, 0, Math.PI, false);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 20,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.arc.shape.2
+  desc: arc() from 0 to pi draws stuff in the right half
+  testing:
+  - 2d.path.arc.draw
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.lineWidth = 100;
+    ctx.strokeStyle = '#0f0';
+    ctx.beginPath();
+    ctx.arc(50, 50, 50, 0, Math.PI, true);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 20,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.arc.shape.3
+  desc: arc() from 0 to -pi/2 does not draw anything in the wrong quadrant
+  testing:
+  - 2d.path.arc.draw
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.lineWidth = 100;
+    ctx.strokeStyle = '#f00';
+    ctx.beginPath();
+    ctx.arc(0, 50, 50, 0, -Math.PI/2, false);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255; @moz-todo
+    @assert pixel 98,48 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.arc.shape.4
+  desc: arc() from 0 to -pi/2 draws stuff in the right quadrant
+  testing:
+  - 2d.path.arc.draw
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.lineWidth = 150;
+    ctx.strokeStyle = '#0f0';
+    ctx.beginPath();
+    ctx.arc(-50, 50, 100, 0, -Math.PI/2, true);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.arc.shape.5
+  desc: arc() from 0 to 5pi does not draw crazy things
+  testing:
+  - 2d.path.arc.draw
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.lineWidth = 200;
+    ctx.strokeStyle = '#f00';
+    ctx.beginPath();
+    ctx.arc(300, 0, 100, 0, 5*Math.PI, false);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.arc.selfintersect.1
+  desc: arc() with lineWidth > 2*radius is drawn sensibly
+  testing:
+  - 2d.path.arc.draw
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.lineWidth = 200;
+    ctx.strokeStyle = '#f00';
+    ctx.beginPath();
+    ctx.arc(100, 50, 25, 0, -Math.PI/2, true);
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.arc(0, 0, 25, 0, -Math.PI/2, true);
+    ctx.stroke();
+    @assert pixel 1,1 == 0,255,0,255; @moz-todo
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.arc.selfintersect.2
+  desc: arc() with lineWidth > 2*radius is drawn sensibly
+  testing:
+  - 2d.path.arc.draw
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.lineWidth = 180;
+    ctx.strokeStyle = '#0f0';
+    ctx.beginPath();
+    ctx.arc(-50, 50, 25, 0, -Math.PI/2, true);
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.arc(100, 0, 25, 0, -Math.PI/2, true);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 90,10 == 0,255,0,255;
+    @assert pixel 97,1 == 0,255,0,255;
+    @assert pixel 97,2 == 0,255,0,255;
+    @assert pixel 97,3 == 0,255,0,255;
+    @assert pixel 2,48 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.arc.negative
+  desc: arc() with negative radius throws INDEX_SIZE_ERR
+  testing:
+  - 2d.path.arc.negative
+  code: |
+    @assert throws INDEX_SIZE_ERR ctx.arc(0, 0, -1, 0, 0, true);
+    t.done();
+
+- name: 2d.path.arc.zeroradius
+  desc: arc() with zero radius draws a line to the start point
+  testing:
+  - 2d.path.arc.zero
+  code: |
+    ctx.fillStyle = '#f00'
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.lineWidth = 50;
+    ctx.strokeStyle = '#0f0';
+    ctx.beginPath();
+    ctx.moveTo(0, 25);
+    ctx.arc(200, 25, 0, 0, Math.PI, true);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.arc.scale.1
+  desc: Non-uniformly scaled arcs are the right shape
+  testing:
+  - 2d.path.transformation
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.scale(2, 0.5);
+    ctx.fillStyle = '#0f0';
+    ctx.beginPath();
+    ctx.arc(25, 50, 56, 0, 2*Math.PI, false);
+    ctx.fill();
+    ctx.fillStyle = '#f00';
+    ctx.beginPath();
+    ctx.moveTo(-25, 50);
+    ctx.arc(-25, 50, 24, 0, 2*Math.PI, false);
+    ctx.moveTo(75, 50);
+    ctx.arc(75, 50, 24, 0, 2*Math.PI, false);
+    ctx.moveTo(25, -25);
+    ctx.arc(25, -25, 24, 0, 2*Math.PI, false);
+    ctx.moveTo(25, 125);
+    ctx.arc(25, 125, 24, 0, 2*Math.PI, false);
+    ctx.fill();
+    @assert pixel 0,0 == 0,255,0,255;
+    @assert pixel 50,0 == 0,255,0,255;
+    @assert pixel 99,0 == 0,255,0,255;
+    @assert pixel 0,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 99,25 == 0,255,0,255;
+    @assert pixel 0,49 == 0,255,0,255;
+    @assert pixel 50,49 == 0,255,0,255;
+    @assert pixel 99,49 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.arc.scale.2
+  desc: Highly scaled arcs are the right shape
+  testing:
+  - 2d.path.arc.draw
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.scale(100, 100);
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 1.2;
+    ctx.beginPath();
+    ctx.arc(0, 0, 0.6, 0, Math.PI/2, false);
+    ctx.stroke();
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 50,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 98,25 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 50,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.arc.nonfinite
+  desc: arc() with Infinity/NaN is ignored
+  testing:
+  - 2d.nonfinite
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.moveTo(0, 0);
+    ctx.lineTo(100, 0);
+    @nonfinite ctx.arc(<0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <2*Math.PI Infinity -Infinity NaN>, <true>);
+    ctx.lineTo(100, 50);
+    ctx.lineTo(0, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.fill();
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 90,45 == 0,255,0,255;
+    t.done();
+
+
+- name: 2d.path.rect.basic
+  testing:
+  - 2d.path.rect.subpath
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.rect(0, 0, 100, 50);
+    ctx.fill();
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.rect.newsubpath
+  testing:
+  - 2d.path.rect.subpath
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.beginPath();
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 50;
+    ctx.moveTo(-100, 25);
+    ctx.lineTo(-50, 25);
+    ctx.rect(200, 25, 1, 1);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.rect.closed
+  testing:
+  - 2d.path.rect.closed
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 200;
+    ctx.lineJoin = 'miter';
+    ctx.rect(100, 50, 100, 100);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.rect.end.1
+  testing:
+  - 2d.path.rect.newsubpath
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 100;
+    ctx.rect(200, 100, 400, 1000);
+    ctx.lineTo(-2000, -1000);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.rect.end.2
+  testing:
+  - 2d.path.rect.newsubpath
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 450;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'bevel';
+    ctx.rect(150, 150, 2000, 2000);
+    ctx.lineTo(160, 160);
+    ctx.stroke();
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 98,1 == 0,255,0,255;
+    @assert pixel 1,48 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.rect.zero.1
+  testing:
+  - 2d.path.rect.subpath
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 100;
+    ctx.beginPath();
+    ctx.rect(0, 50, 100, 0);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.rect.zero.2
+  testing:
+  - 2d.path.rect.subpath
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 100;
+    ctx.beginPath();
+    ctx.rect(50, -100, 0, 250);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.rect.zero.3
+  testing:
+  - 2d.path.rect.subpath
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 100;
+    ctx.beginPath();
+    ctx.rect(50, 25, 0, 0);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.rect.zero.4
+  testing:
+  - 2d.path.rect.subpath
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 50;
+    ctx.rect(100, 25, 0, 0);
+    ctx.lineTo(0, 25);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.rect.zero.5
+  testing:
+  - 2d.path.rect.subpath
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 50;
+    ctx.moveTo(0, 0);
+    ctx.rect(100, 25, 0, 0);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.rect.zero.6
+  testing:
+  - 2d.path.rect.subpath
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#f00';
+    ctx.lineJoin = 'miter';
+    ctx.miterLimit = 1.5;
+    ctx.lineWidth = 200;
+    ctx.beginPath();
+    ctx.rect(100, 25, 1000, 0);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255; @moz-todo
+    t.done();
+
+- name: 2d.path.rect.negative
+  testing:
+  - 2d.path.rect.subpath
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.beginPath();
+    ctx.fillStyle = '#0f0';
+    ctx.rect(0, 0, 50, 25);
+    ctx.rect(100, 0, -50, 25);
+    ctx.rect(0, 50, 50, -25);
+    ctx.rect(100, 50, -50, -25);
+    ctx.fill();
+    @assert pixel 25,12 == 0,255,0,255;
+    @assert pixel 75,12 == 0,255,0,255;
+    @assert pixel 25,37 == 0,255,0,255;
+    @assert pixel 75,37 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.rect.winding
+  testing:
+  - 2d.path.rect.subpath
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.beginPath();
+    ctx.fillStyle = '#f00';
+    ctx.rect(0, 0, 50, 50);
+    ctx.rect(100, 50, -50, -50);
+    ctx.rect(0, 25, 100, -25);
+    ctx.rect(100, 25, -100, 25);
+    ctx.fill();
+    @assert pixel 25,12 == 0,255,0,255;
+    @assert pixel 75,12 == 0,255,0,255;
+    @assert pixel 25,37 == 0,255,0,255;
+    @assert pixel 75,37 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.rect.selfintersect
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 90;
+    ctx.beginPath();
+    ctx.rect(45, 20, 10, 10);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255; @moz-todo
+    t.done();
+
+- name: 2d.path.rect.nonfinite
+  desc: rect() with Infinity/NaN is ignored
+  testing:
+  - 2d.nonfinite
+  code: |
+    ctx.moveTo(0, 0);
+    ctx.lineTo(100, 0);
+    @nonfinite ctx.rect(<0 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>, <1 Infinity -Infinity NaN>, <1 Infinity -Infinity NaN>);
+    ctx.lineTo(100, 50);
+    ctx.lineTo(0, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.fill();
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 90,45 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.fill.overlap
+  testing:
+  - 2d.path.fill.basic
+  code: |
+    ctx.fillStyle = '#000';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
+    ctx.rect(0, 0, 100, 50);
+    ctx.closePath();
+    ctx.rect(10, 10, 80, 30);
+    ctx.fill();
+    @assert pixel 50,25 ==~ 0,127,0,255 +/- 1;
+    t.done();
+
+- name: 2d.path.fill.winding.add
+  testing:
+  - 2d.path.fill.basic
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.moveTo(-10, -10);
+    ctx.lineTo(110, -10);
+    ctx.lineTo(110, 60);
+    ctx.lineTo(-10, 60);
+    ctx.lineTo(-10, -10);
+    ctx.lineTo(0, 0);
+    ctx.lineTo(100, 0);
+    ctx.lineTo(100, 50);
+    ctx.lineTo(0, 50);
+    ctx.fill();
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.fill.winding.subtract.1
+  testing:
+  - 2d.path.fill.basic
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#f00';
+    ctx.moveTo(-10, -10);
+    ctx.lineTo(110, -10);
+    ctx.lineTo(110, 60);
+    ctx.lineTo(-10, 60);
+    ctx.lineTo(-10, -10);
+    ctx.lineTo(0, 0);
+    ctx.lineTo(0, 50);
+    ctx.lineTo(100, 50);
+    ctx.lineTo(100, 0);
+    ctx.fill();
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.fill.winding.subtract.2
+  testing:
+  - 2d.path.fill.basic
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#f00';
+    ctx.moveTo(-10, -10);
+    ctx.lineTo(110, -10);
+    ctx.lineTo(110, 60);
+    ctx.lineTo(-10, 60);
+    ctx.moveTo(0, 0);
+    ctx.lineTo(0, 50);
+    ctx.lineTo(100, 50);
+    ctx.lineTo(100, 0);
+    ctx.fill();
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.fill.winding.subtract.3
+  testing:
+  - 2d.path.fill.basic
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.moveTo(-10, -10);
+    ctx.lineTo(110, -10);
+    ctx.lineTo(110, 60);
+    ctx.lineTo(-10, 60);
+    ctx.lineTo(-10, -10);
+    ctx.lineTo(-20, -20);
+    ctx.lineTo(120, -20);
+    ctx.lineTo(120, 70);
+    ctx.lineTo(-20, 70);
+    ctx.lineTo(-20, -20);
+    ctx.lineTo(0, 0);
+    ctx.lineTo(0, 50);
+    ctx.lineTo(100, 50);
+    ctx.lineTo(100, 0);
+    ctx.fill();
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.fill.closed.basic
+  testing:
+  - 2d.path.fill.closed
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.moveTo(0, 0);
+    ctx.lineTo(100, 0);
+    ctx.lineTo(100, 50);
+    ctx.lineTo(0, 50);
+    ctx.fill();
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.fill.closed.unaffected
+  testing:
+  - 2d.path.fill.closed
+  code: |
+    ctx.fillStyle = '#00f';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.moveTo(0, 0);
+    ctx.lineTo(100, 0);
+    ctx.lineTo(100, 50);
+    ctx.fillStyle = '#f00';
+    ctx.fill();
+    ctx.lineTo(0, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.fill();
+    @assert pixel 90,10 == 0,255,0,255;
+    @assert pixel 10,40 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.stroke.overlap
+  desc: Stroked subpaths are combined before being drawn
+  testing:
+  - 2d.path.stroke.basic
+  code: |
+    ctx.fillStyle = '#000';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = 'rgba(0, 255, 0, 0.5)';
+    ctx.lineWidth = 50;
+    ctx.moveTo(0, 20);
+    ctx.lineTo(100, 20);
+    ctx.moveTo(0, 30);
+    ctx.lineTo(100, 30);
+    ctx.stroke();
+    @assert pixel 50,25 ==~ 0,127,0,255 +/- 1;
+    t.done();
+
+- name: 2d.path.stroke.union
+  desc: Strokes in opposite directions are unioned, not subtracted
+  testing:
+  - 2d.path.stroke.basic
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#0f0';
+    ctx.lineWidth = 40;
+    ctx.moveTo(0, 10);
+    ctx.lineTo(100, 10);
+    ctx.moveTo(100, 40);
+    ctx.lineTo(0, 40);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.stroke.unaffected
+  desc: Stroking does not start a new path or subpath
+  testing:
+  - 2d.path.stroke.basic
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.lineWidth = 50;
+    ctx.moveTo(-100, 25);
+    ctx.lineTo(-100, -100);
+    ctx.lineTo(200, -100);
+    ctx.lineTo(200, 25);
+    ctx.strokeStyle = '#f00';
+    ctx.stroke();
+    ctx.closePath();
+    ctx.strokeStyle = '#0f0';
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.stroke.scale1
+  desc: Stroke line widths are scaled by the current transformation matrix
+  testing:
+  - 2d.path.transformation
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.beginPath();
+    ctx.rect(25, 12.5, 50, 25);
+    ctx.save();
+    ctx.scale(50, 25);
+    ctx.strokeStyle = '#0f0';
+    ctx.stroke();
+    ctx.restore();
+    ctx.beginPath();
+    ctx.rect(-25, -12.5, 150, 75);
+    ctx.save();
+    ctx.scale(50, 25);
+    ctx.strokeStyle = '#f00';
+    ctx.stroke();
+    ctx.restore();
+    @assert pixel 0,0 == 0,255,0,255;
+    @assert pixel 50,0 == 0,255,0,255;
+    @assert pixel 99,0 == 0,255,0,255;
+    @assert pixel 0,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 99,25 == 0,255,0,255;
+    @assert pixel 0,49 == 0,255,0,255;
+    @assert pixel 50,49 == 0,255,0,255;
+    @assert pixel 99,49 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.stroke.scale2
+  desc: Stroke line widths are scaled by the current transformation matrix
+  testing:
+  - 2d.path.transformation
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.beginPath();
+    ctx.rect(25, 12.5, 50, 25);
+    ctx.save();
+    ctx.rotate(Math.PI/2);
+    ctx.scale(25, 50);
+    ctx.strokeStyle = '#0f0';
+    ctx.stroke();
+    ctx.restore();
+    ctx.beginPath();
+    ctx.rect(-25, -12.5, 150, 75);
+    ctx.save();
+    ctx.rotate(Math.PI/2);
+    ctx.scale(25, 50);
+    ctx.strokeStyle = '#f00';
+    ctx.stroke();
+    ctx.restore();
+    @assert pixel 0,0 == 0,255,0,255;
+    @assert pixel 50,0 == 0,255,0,255;
+    @assert pixel 99,0 == 0,255,0,255;
+    @assert pixel 0,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 99,25 == 0,255,0,255;
+    @assert pixel 0,49 == 0,255,0,255;
+    @assert pixel 50,49 == 0,255,0,255;
+    @assert pixel 99,49 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.stroke.skew
+  desc: Strokes lines are skewed by the current transformation matrix
+  testing:
+  - 2d.path.transformation
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.save();
+    ctx.beginPath();
+    ctx.moveTo(49, -50);
+    ctx.lineTo(201, -50);
+    ctx.rotate(Math.PI/4);
+    ctx.scale(1, 283);
+    ctx.strokeStyle = '#0f0';
+    ctx.stroke();
+    ctx.restore();
+    ctx.save();
+    ctx.beginPath();
+    ctx.translate(-150, 0);
+    ctx.moveTo(49, -50);
+    ctx.lineTo(199, -50);
+    ctx.rotate(Math.PI/4);
+    ctx.scale(1, 142);
+    ctx.strokeStyle = '#f00';
+    ctx.stroke();
+    ctx.restore();
+    ctx.save();
+    ctx.beginPath();
+    ctx.translate(-150, 0);
+    ctx.moveTo(49, -50);
+    ctx.lineTo(199, -50);
+    ctx.rotate(Math.PI/4);
+    ctx.scale(1, 142);
+    ctx.strokeStyle = '#f00';
+    ctx.stroke();
+    ctx.restore();
+    @assert pixel 0,0 == 0,255,0,255;
+    @assert pixel 50,0 == 0,255,0,255;
+    @assert pixel 99,0 == 0,255,0,255;
+    @assert pixel 0,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 99,25 == 0,255,0,255;
+    @assert pixel 0,49 == 0,255,0,255;
+    @assert pixel 50,49 == 0,255,0,255;
+    @assert pixel 99,49 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.stroke.empty
+  desc: Empty subpaths are not stroked
+  testing:
+  - 2d.path.stroke.empty
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 100;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+    ctx.beginPath();
+    ctx.moveTo(40, 25);
+    ctx.moveTo(60, 25);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.stroke.prune.line
+  desc: Zero-length line segments from lineTo are removed before stroking
+  testing:
+  - 2d.path.stroke.prune
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 100;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+    ctx.beginPath();
+    ctx.moveTo(50, 25);
+    ctx.lineTo(50, 25);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255; @moz-todo
+    t.done();
+
+- name: 2d.path.stroke.prune.closed
+  desc: Zero-length line segments from closed paths are removed before stroking
+  testing:
+  - 2d.path.stroke.prune
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 100;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+    ctx.beginPath();
+    ctx.moveTo(50, 25);
+    ctx.lineTo(50, 25);
+    ctx.closePath();
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255; @moz-todo
+    t.done();
+
+- name: 2d.path.stroke.prune.curve
+  desc: Zero-length line segments from quadraticCurveTo and bezierCurveTo are removed
+    before stroking
+  testing:
+  - 2d.path.stroke.prune
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 100;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+    ctx.beginPath();
+    ctx.moveTo(50, 25);
+    ctx.quadraticCurveTo(50, 25, 50, 25);
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.moveTo(50, 25);
+    ctx.bezierCurveTo(50, 25, 50, 25, 50, 25);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255; @moz-todo
+    t.done();
+
+- name: 2d.path.stroke.prune.arc
+  desc: Zero-length line segments from arcTo and arc are removed before stroking
+  testing:
+  - 2d.path.stroke.prune
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 100;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+    ctx.beginPath();
+    ctx.moveTo(50, 25);
+    ctx.arcTo(50, 25, 150, 25, 10);
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.moveTo(60, 25);
+    ctx.arc(50, 25, 10, 0, 0, false);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255; @moz-todo
+    t.done();
+
+- name: 2d.path.stroke.prune.rect
+  desc: Zero-length line segments from rect and strokeRect are removed before stroking
+  testing:
+  - 2d.path.stroke.prune
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 100;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+    ctx.beginPath();
+    ctx.rect(50, 25, 0, 0);
+    ctx.stroke();
+    ctx.strokeRect(50, 25, 0, 0);
+    @assert pixel 50,25 == 0,255,0,255; @moz-todo
+    t.done();
+
+- name: 2d.path.stroke.prune.corner
+  desc: Zero-length line segments are removed before stroking with miters
+  testing:
+  - 2d.path.stroke.prune
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 400;
+    ctx.lineJoin = 'miter';
+    ctx.miterLimit = 1.4;
+    ctx.beginPath();
+    ctx.moveTo(-1000, 200);
+    ctx.lineTo(-100, 200);
+    ctx.lineTo(-100, 200);
+    ctx.lineTo(-100, 200);
+    ctx.lineTo(-100, 1000);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.transformation.basic
+  testing:
+  - 2d.path.transformation
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.translate(-100, 0);
+    ctx.rect(100, 0, 100, 50);
+    ctx.translate(0, -100);
+    ctx.fillStyle = '#0f0';
+    ctx.fill();
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.transformation.multiple
+  desc: Transformations are applied while building paths, not when drawing
+  testing:
+  - 2d.path.transformation
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#f00';
+    ctx.translate(-100, 0);
+    ctx.rect(0, 0, 100, 50);
+    ctx.fill();
+    ctx.translate(100, 0);
+    ctx.fill();
+    ctx.beginPath();
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 50;
+    ctx.translate(0, -50);
+    ctx.moveTo(0, 25);
+    ctx.lineTo(100, 25);
+    ctx.stroke();
+    ctx.translate(0, 50);
+    ctx.stroke();
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.transformation.changing
+  desc: Transformations are applied while building paths, not when drawing
+  testing:
+  - 2d.path.transformation
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.moveTo(0, 0);
+    ctx.translate(100, 0);
+    ctx.lineTo(0, 0);
+    ctx.translate(0, 50);
+    ctx.lineTo(0, 0);
+    ctx.translate(-100, 0);
+    ctx.lineTo(0, 0);
+    ctx.translate(1000, 1000);
+    ctx.rotate(Math.PI/2);
+    ctx.scale(0.1, 0.1);
+    ctx.fill();
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.clip.empty
+  testing:
+  - 2d.path.clip.basic
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.beginPath();
+    ctx.clip();
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.clip.basic.1
+  testing:
+  - 2d.path.clip.basic
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.beginPath();
+    ctx.rect(0, 0, 100, 50);
+    ctx.clip();
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.clip.basic.2
+  testing:
+  - 2d.path.clip.basic
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.beginPath();
+    ctx.rect(-100, 0, 100, 50);
+    ctx.clip();
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.clip.intersect
+  testing:
+  - 2d.path.clip.basic
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.beginPath();
+    ctx.rect(0, 0, 50, 50);
+    ctx.clip();
+    ctx.beginPath();
+    ctx.rect(50, 0, 50, 50)
+    ctx.clip();
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.clip.winding.1
+  testing:
+  - 2d.path.clip.basic
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.beginPath();
+    ctx.moveTo(-10, -10);
+    ctx.lineTo(110, -10);
+    ctx.lineTo(110, 60);
+    ctx.lineTo(-10, 60);
+    ctx.lineTo(-10, -10);
+    ctx.lineTo(0, 0);
+    ctx.lineTo(0, 50);
+    ctx.lineTo(100, 50);
+    ctx.lineTo(100, 0);
+    ctx.clip();
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.clip.winding.2
+  testing:
+  - 2d.path.clip.basic
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.beginPath();
+    ctx.moveTo(-10, -10);
+    ctx.lineTo(110, -10);
+    ctx.lineTo(110, 60);
+    ctx.lineTo(-10, 60);
+    ctx.lineTo(-10, -10);
+    ctx.clip();
+    ctx.beginPath();
+    ctx.moveTo(0, 0);
+    ctx.lineTo(0, 50);
+    ctx.lineTo(100, 50);
+    ctx.lineTo(100, 0);
+    ctx.lineTo(0, 0);
+    ctx.clip();
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.clip.unaffected
+  testing:
+  - 2d.path.clip.closed
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.beginPath();
+    ctx.moveTo(0, 0);
+    ctx.lineTo(0, 50);
+    ctx.lineTo(100, 50);
+    ctx.lineTo(100, 0);
+    ctx.clip();
+    ctx.lineTo(0, 0);
+    ctx.fill();
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.path.isPointInPath.basic.1
+  desc: isPointInPath() detects whether the point is inside the path
+  testing:
+  - 2d.path.isPointInPath
+  code: |
+    ctx.rect(0, 0, 20, 20);
+    @assert ctx.isPointInPath(10, 10) === true;
+    @assert ctx.isPointInPath(30, 10) === false;
+    t.done();
+
+- name: 2d.path.isPointInPath.basic.2
+  desc: isPointInPath() detects whether the point is inside the path
+  testing:
+  - 2d.path.isPointInPath
+  code: |
+    ctx.rect(20, 0, 20, 20);
+    @assert ctx.isPointInPath(10, 10) === false;
+    @assert ctx.isPointInPath(30, 10) === true;
+    t.done();
+
+- name: 2d.path.isPointInPath.edge
+  desc: isPointInPath() counts points on the path as being inside
+  testing:
+  - 2d.path.isPointInPath.edge
+  code: |
+    ctx.rect(0, 0, 20, 20);
+    @assert ctx.isPointInPath(0, 0) === true;
+    @assert ctx.isPointInPath(10, 0) === true;
+    @assert ctx.isPointInPath(20, 0) === true;
+    @assert ctx.isPointInPath(20, 10) === true;
+    @assert ctx.isPointInPath(20, 20) === true;
+    @assert ctx.isPointInPath(10, 20) === true;
+    @assert ctx.isPointInPath(0, 20) === true;
+    @assert ctx.isPointInPath(0, 10) === true;
+    @assert ctx.isPointInPath(10, -0.01) === false;
+    @assert ctx.isPointInPath(10, 20.01) === false;
+    @assert ctx.isPointInPath(-0.01, 10) === false;
+    @assert ctx.isPointInPath(20.01, 10) === false;
+    t.done();
+
+- name: 2d.path.isPointInPath.empty
+  desc: isPointInPath() works when there is no path
+  testing:
+  - 2d.path.isPointInPath
+  code: |
+    @assert ctx.isPointInPath(0, 0) === false;
+    t.done();
+
+- name: 2d.path.isPointInPath.subpath
+  desc: isPointInPath() uses the current path, not just the subpath
+  testing:
+  - 2d.path.isPointInPath
+  code: |
+    ctx.rect(0, 0, 20, 20);
+    ctx.beginPath();
+    ctx.rect(20, 0, 20, 20);
+    ctx.closePath();
+    ctx.rect(40, 0, 20, 20);
+    @assert ctx.isPointInPath(10, 10) === false;
+    @assert ctx.isPointInPath(30, 10) === true;
+    @assert ctx.isPointInPath(50, 10) === true;
+    t.done();
+
+- name: 2d.path.isPointInPath.outside
+  desc: isPointInPath() works on paths outside the canvas
+  testing:
+  - 2d.path.isPointInPath
+  code: |
+    ctx.rect(0, -100, 20, 20);
+    ctx.rect(20, -10, 20, 20);
+    @assert ctx.isPointInPath(10, -110) === false;
+    @assert ctx.isPointInPath(10, -90) === true;
+    @assert ctx.isPointInPath(10, -70) === false;
+    @assert ctx.isPointInPath(30, -20) === false;
+    @assert ctx.isPointInPath(30, 0) === true;
+    @assert ctx.isPointInPath(30, 20) === false;
+    t.done();
+
+- name: 2d.path.isPointInPath.unclosed
+  desc: isPointInPath() works on unclosed subpaths
+  testing:
+  - 2d.path.isPointInPath
+  code: |
+    ctx.moveTo(0, 0);
+    ctx.lineTo(20, 0);
+    ctx.lineTo(20, 20);
+    ctx.lineTo(0, 20);
+    @assert ctx.isPointInPath(10, 10) === true;
+    @assert ctx.isPointInPath(30, 10) === false;
+    t.done();
+
+- name: 2d.path.isPointInPath.arc
+  desc: isPointInPath() works on arcs
+  testing:
+  - 2d.path.isPointInPath
+  code: |
+    ctx.arc(50, 25, 10, 0, Math.PI, false);
+    @assert ctx.isPointInPath(50, 10) === false;
+    @assert ctx.isPointInPath(50, 20) === false;
+    @assert ctx.isPointInPath(50, 30) === true;
+    @assert ctx.isPointInPath(50, 40) === false;
+    @assert ctx.isPointInPath(30, 20) === false;
+    @assert ctx.isPointInPath(70, 20) === false;
+    @assert ctx.isPointInPath(30, 30) === false;
+    @assert ctx.isPointInPath(70, 30) === false;
+    t.done();
+
+- name: 2d.path.isPointInPath.bigarc
+  desc: isPointInPath() works on unclosed arcs larger than 2pi
+  opera: {bug: 320937}
+  testing:
+  - 2d.path.isPointInPath
+  code: |
+    ctx.arc(50, 25, 10, 0, 7, false);
+    @assert ctx.isPointInPath(50, 10) === false;
+    @assert ctx.isPointInPath(50, 20) === true;
+    @assert ctx.isPointInPath(50, 30) === true;
+    @assert ctx.isPointInPath(50, 40) === false;
+    @assert ctx.isPointInPath(30, 20) === false;
+    @assert ctx.isPointInPath(70, 20) === false;
+    @assert ctx.isPointInPath(30, 30) === false;
+    @assert ctx.isPointInPath(70, 30) === false;
+    t.done();
+
+- name: 2d.path.isPointInPath.bezier
+  desc: isPointInPath() works on Bezier curves
+  testing:
+  - 2d.path.isPointInPath
+  code: |
+    ctx.moveTo(25, 25);
+    ctx.bezierCurveTo(50, -50, 50, 100, 75, 25);
+    @assert ctx.isPointInPath(25, 20) === false;
+    @assert ctx.isPointInPath(25, 30) === false;
+    @assert ctx.isPointInPath(30, 20) === true;
+    @assert ctx.isPointInPath(30, 30) === false;
+    @assert ctx.isPointInPath(40, 2) === false;
+    @assert ctx.isPointInPath(40, 20) === true;
+    @assert ctx.isPointInPath(40, 30) === false;
+    @assert ctx.isPointInPath(40, 47) === false;
+    @assert ctx.isPointInPath(45, 20) === true;
+    @assert ctx.isPointInPath(45, 30) === false;
+    @assert ctx.isPointInPath(55, 20) === false;
+    @assert ctx.isPointInPath(55, 30) === true;
+    @assert ctx.isPointInPath(60, 2) === false;
+    @assert ctx.isPointInPath(60, 20) === false;
+    @assert ctx.isPointInPath(60, 30) === true;
+    @assert ctx.isPointInPath(60, 47) === false;
+    @assert ctx.isPointInPath(70, 20) === false;
+    @assert ctx.isPointInPath(70, 30) === true;
+    @assert ctx.isPointInPath(75, 20) === false;
+    @assert ctx.isPointInPath(75, 30) === false;
+    t.done();
+
+- name: 2d.path.isPointInPath.winding
+  desc: isPointInPath() uses the non-zero winding number rule
+  testing:
+  - 2d.path.isPointInPath
+  code: |
+    // Create a square ring, using opposite windings to make a hole in the centre
+    ctx.moveTo(0, 0);
+    ctx.lineTo(50, 0);
+    ctx.lineTo(50, 50);
+    ctx.lineTo(0, 50);
+    ctx.lineTo(0, 0);
+    ctx.lineTo(10, 10);
+    ctx.lineTo(10, 40);
+    ctx.lineTo(40, 40);
+    ctx.lineTo(40, 10);
+    ctx.lineTo(10, 10);
+    @assert ctx.isPointInPath(5, 5) === true;
+    @assert ctx.isPointInPath(25, 5) === true;
+    @assert ctx.isPointInPath(45, 5) === true;
+    @assert ctx.isPointInPath(5, 25) === true;
+    @assert ctx.isPointInPath(25, 25) === false;
+    @assert ctx.isPointInPath(45, 25) === true;
+    @assert ctx.isPointInPath(5, 45) === true;
+    @assert ctx.isPointInPath(25, 45) === true;
+    @assert ctx.isPointInPath(45, 45) === true;
+    t.done();
+
+- name: 2d.path.isPointInPath.transform.1
+  desc: isPointInPath() handles transformations correctly
+  testing:
+  - 2d.path.isPointInPath
+  code: |
+    ctx.translate(50, 0);
+    ctx.rect(0, 0, 20, 20);
+    @assert ctx.isPointInPath(-40, 10) === false;
+    @assert ctx.isPointInPath(10, 10) === false;
+    @assert ctx.isPointInPath(49, 10) === false;
+    @assert ctx.isPointInPath(51, 10) === true;
+    @assert ctx.isPointInPath(69, 10) === true;
+    @assert ctx.isPointInPath(71, 10) === false;
+    t.done();
+
+- name: 2d.path.isPointInPath.transform.2
+  desc: isPointInPath() handles transformations correctly
+  testing:
+  - 2d.path.isPointInPath
+  code: |
+    ctx.rect(50, 0, 20, 20);
+    ctx.translate(50, 0);
+    @assert ctx.isPointInPath(-40, 10) === false;
+    @assert ctx.isPointInPath(10, 10) === false;
+    @assert ctx.isPointInPath(49, 10) === false;
+    @assert ctx.isPointInPath(51, 10) === true;
+    @assert ctx.isPointInPath(69, 10) === true;
+    @assert ctx.isPointInPath(71, 10) === false;
+    t.done();
+
+- name: 2d.path.isPointInPath.transform.3
+  desc: isPointInPath() handles transformations correctly
+  testing:
+  - 2d.path.isPointInPath
+  code: |
+    ctx.scale(-1, 1);
+    ctx.rect(-70, 0, 20, 20);
+    @assert ctx.isPointInPath(-40, 10) === false;
+    @assert ctx.isPointInPath(10, 10) === false;
+    @assert ctx.isPointInPath(49, 10) === false;
+    @assert ctx.isPointInPath(51, 10) === true;
+    @assert ctx.isPointInPath(69, 10) === true;
+    @assert ctx.isPointInPath(71, 10) === false;
+    t.done();
+
+- name: 2d.path.isPointInPath.transform.4
+  desc: isPointInPath() handles transformations correctly
+  testing:
+  - 2d.path.isPointInPath
+  code: |
+    ctx.translate(50, 0);
+    ctx.rect(50, 0, 20, 20);
+    ctx.translate(0, 50);
+    @assert ctx.isPointInPath(60, 10) === false;
+    @assert ctx.isPointInPath(110, 10) === true;
+    @assert ctx.isPointInPath(110, 60) === false;
+    t.done();
+
+- name: 2d.path.isPointInPath.nonfinite
+  desc: isPointInPath() returns false for non-finite arguments
+  testing:
+  - 2d.path.isPointInPath.nonfinite
+  code: |
+    ctx.rect(-100, -50, 200, 100);
+    @assert ctx.isPointInPath(Infinity, 0) === false;
+    @assert ctx.isPointInPath(-Infinity, 0) === false;
+    @assert ctx.isPointInPath(NaN, 0) === false;
+    @assert ctx.isPointInPath(0, Infinity) === false;
+    @assert ctx.isPointInPath(0, -Infinity) === false;
+    @assert ctx.isPointInPath(0, NaN) === false;
+    @assert ctx.isPointInPath(NaN, NaN) === false;
+    t.done();
+
diff --git a/tests/wpt/web-platform-tests/html/canvas/tools/yaml/offscreen/pixel-manipulation.yaml b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/offscreen/pixel-manipulation.yaml
new file mode 100644
index 00000000000..b39bb073b43
--- /dev/null
+++ b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/offscreen/pixel-manipulation.yaml
@@ -0,0 +1,856 @@
+- name: 2d.imageData.create2.basic
+  desc: createImageData(sw, sh) exists and returns something
+  testing:
+  - 2d.imageData.create2.object
+  code: |
+    @assert ctx.createImageData(1, 1) !== null;
+    t.done();
+
+- name: 2d.imageData.create1.basic
+  desc: createImageData(imgdata) exists and returns something
+  testing:
+  - 2d.imageData.create1.object
+  code: |
+    @assert ctx.createImageData(ctx.createImageData(1, 1)) !== null;
+    t.done();
+
+- name: 2d.imageData.create2.initial
+  desc: createImageData(sw, sh) returns transparent black data of the right size
+  testing:
+  - 2d.imageData.create2.size
+  - 2d.imageData.create.initial
+  - 2d.imageData.initial
+  code: |
+    var imgdata = ctx.createImageData(10, 20);
+    @assert imgdata.data.length === imgdata.width*imgdata.height*4;
+    @assert imgdata.width < imgdata.height;
+    @assert imgdata.width > 0;
+    var isTransparentBlack = true;
+    for (var i = 0; i < imgdata.data.length; ++i)
+        if (imgdata.data[i] !== 0)
+            isTransparentBlack = false;
+    @assert isTransparentBlack;
+    t.done();
+
+- name: 2d.imageData.create1.initial
+  desc: createImageData(imgdata) returns transparent black data of the right size
+  testing:
+  - 2d.imageData.create1.size
+  - 2d.imageData.create.initial
+  - 2d.imageData.initial
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    var imgdata1 = ctx.getImageData(0, 0, 10, 20);
+    var imgdata2 = ctx.createImageData(imgdata1);
+    @assert imgdata2.data.length === imgdata1.data.length;
+    @assert imgdata2.width === imgdata1.width;
+    @assert imgdata2.height === imgdata1.height;
+    var isTransparentBlack = true;
+    for (var i = 0; i < imgdata2.data.length; ++i)
+        if (imgdata2.data[i] !== 0)
+            isTransparentBlack = false;
+    @assert isTransparentBlack;
+    t.done();
+
+- name: 2d.imageData.create2.large
+  desc: createImageData(sw, sh) works for sizes much larger than the canvas
+  testing:
+  - 2d.imageData.create2.size
+  code: |
+    var imgdata = ctx.createImageData(1000, 2000);
+    @assert imgdata.data.length === imgdata.width*imgdata.height*4;
+    @assert imgdata.width < imgdata.height;
+    @assert imgdata.width > 0;
+    var isTransparentBlack = true;
+    for (var i = 0; i < imgdata.data.length; i += 7813) // check ~1024 points (assuming normal scaling)
+        if (imgdata.data[i] !== 0)
+            isTransparentBlack = false;
+    @assert isTransparentBlack;
+    t.done();
+
+- name: 2d.imageData.create2.negative
+  desc: createImageData(sw, sh) takes the absolute magnitude of the size arguments
+  testing:
+  - 2d.imageData.create2.size
+  code: |
+    var imgdata1 = ctx.createImageData(10, 20);
+    var imgdata2 = ctx.createImageData(-10, 20);
+    var imgdata3 = ctx.createImageData(10, -20);
+    var imgdata4 = ctx.createImageData(-10, -20);
+    @assert imgdata1.data.length === imgdata2.data.length;
+    @assert imgdata2.data.length === imgdata3.data.length;
+    @assert imgdata3.data.length === imgdata4.data.length;
+    t.done();
+
+- name: 2d.imageData.create2.zero
+  desc: createImageData(sw, sh) throws INDEX_SIZE_ERR if size is zero
+  testing:
+  - 2d.imageData.getcreate.zero
+  code: |
+    @assert throws INDEX_SIZE_ERR ctx.createImageData(10, 0);
+    @assert throws INDEX_SIZE_ERR ctx.createImageData(0, 10);
+    @assert throws INDEX_SIZE_ERR ctx.createImageData(0, 0);
+    t.done();
+
+- name: 2d.imageData.create2.nonfinite
+  desc: createImageData() throws TypeError if arguments are not finite
+  testing:
+  - 2d.imageData.getcreate.nonfinite
+  code: |
+    @nonfinite @assert throws TypeError ctx.createImageData(<10 Infinity -Infinity NaN>, <10 Infinity -Infinity NaN>);
+    var posinfobj = { valueOf: function() { return Infinity; } },
+        neginfobj = { valueOf: function() { return -Infinity; } },
+        nanobj = { valueOf: function() { return -Infinity; } };
+    @nonfinite @assert throws TypeError ctx.createImageData(<10 posinfobj neginfobj nanobj>, <10 posinfobj neginfobj nanobj>);
+    t.done();
+
+- name: 2d.imageData.create1.zero
+  desc: createImageData(null) throws TypeError
+  testing:
+  - 2d.imageData.create.null
+  code: |
+    @assert throws TypeError ctx.createImageData(null);
+    t.done();
+
+- name: 2d.imageData.create2.round
+  desc: createImageData(w, h) is rounded the same as getImageData(0, 0, w, h)
+  testing:
+  - 2d.imageData.createround
+  code: |
+    var imgdata1 = ctx.createImageData(10.01, 10.99);
+    var imgdata2 = ctx.getImageData(0, 0, 10.01, 10.99);
+    @assert imgdata1.width === imgdata2.width;
+    @assert imgdata1.height === imgdata2.height;
+    t.done();
+
+- name: 2d.imageData.get.basic
+  desc: getImageData() exists and returns something
+  testing:
+  - 2d.imageData.get.basic
+  code: |
+    @assert ctx.getImageData(0, 0, 100, 50) !== null;
+    t.done();
+
+- name: 2d.imageData.get.zero
+  desc: getImageData() throws INDEX_SIZE_ERR if size is zero
+  testing:
+  - 2d.imageData.getcreate.zero
+  code: |
+    @assert throws INDEX_SIZE_ERR ctx.getImageData(1, 1, 10, 0);
+    @assert throws INDEX_SIZE_ERR ctx.getImageData(1, 1, 0, 10);
+    @assert throws INDEX_SIZE_ERR ctx.getImageData(1, 1, 0, 0);
+    t.done();
+
+- name: 2d.imageData.get.nonfinite
+  desc: getImageData() throws TypeError if arguments are not finite
+  testing:
+  - 2d.imageData.getcreate.nonfinite
+  code: |
+    @nonfinite @assert throws TypeError ctx.getImageData(<10 Infinity -Infinity NaN>, <10 Infinity -Infinity NaN>, <10 Infinity -Infinity NaN>, <10 Infinity -Infinity NaN>);
+    var posinfobj = { valueOf: function() { return Infinity; } },
+        neginfobj = { valueOf: function() { return -Infinity; } },
+        nanobj = { valueOf: function() { return -Infinity; } };
+    @nonfinite @assert throws TypeError ctx.getImageData(<10 posinfobj neginfobj nanobj>, <10 posinfobj neginfobj nanobj>, <10 posinfobj neginfobj nanobj>, <10 posinfobj neginfobj nanobj>);
+    t.done();
+
+- name: 2d.imageData.get.source.outside
+  desc: getImageData() returns transparent black outside the canvas
+  testing:
+  - 2d.imageData.get.basic
+  - 2d.imageData.get.outside
+  code: |
+    ctx.fillStyle = '#08f';
+    ctx.fillRect(0, 0, 100, 50);
+    var imgdata1 = ctx.getImageData(-10, 5, 1, 1);
+    @assert imgdata1.data[0] === 0;
+    @assert imgdata1.data[1] === 0;
+    @assert imgdata1.data[2] === 0;
+    @assert imgdata1.data[3] === 0;
+    var imgdata2 = ctx.getImageData(10, -5, 1, 1);
+    @assert imgdata2.data[0] === 0;
+    @assert imgdata2.data[1] === 0;
+    @assert imgdata2.data[2] === 0;
+    @assert imgdata2.data[3] === 0;
+    var imgdata3 = ctx.getImageData(200, 5, 1, 1);
+    @assert imgdata3.data[0] === 0;
+    @assert imgdata3.data[1] === 0;
+    @assert imgdata3.data[2] === 0;
+    @assert imgdata3.data[3] === 0;
+    var imgdata4 = ctx.getImageData(10, 60, 1, 1);
+    @assert imgdata4.data[0] === 0;
+    @assert imgdata4.data[1] === 0;
+    @assert imgdata4.data[2] === 0;
+    @assert imgdata4.data[3] === 0;
+    var imgdata5 = ctx.getImageData(100, 10, 1, 1);
+    @assert imgdata5.data[0] === 0;
+    @assert imgdata5.data[1] === 0;
+    @assert imgdata5.data[2] === 0;
+    @assert imgdata5.data[3] === 0;
+    var imgdata6 = ctx.getImageData(0, 10, 1, 1);
+    @assert imgdata6.data[0] === 0;
+    @assert imgdata6.data[1] === 136;
+    @assert imgdata6.data[2] === 255;
+    @assert imgdata6.data[3] === 255;
+    var imgdata7 = ctx.getImageData(-10, 10, 20, 20);
+    @assert imgdata7.data[ 0*4+0] === 0;
+    @assert imgdata7.data[ 0*4+1] === 0;
+    @assert imgdata7.data[ 0*4+2] === 0;
+    @assert imgdata7.data[ 0*4+3] === 0;
+    @assert imgdata7.data[ 9*4+0] === 0;
+    @assert imgdata7.data[ 9*4+1] === 0;
+    @assert imgdata7.data[ 9*4+2] === 0;
+    @assert imgdata7.data[ 9*4+3] === 0;
+    @assert imgdata7.data[10*4+0] === 0;
+    @assert imgdata7.data[10*4+1] === 136;
+    @assert imgdata7.data[10*4+2] === 255;
+    @assert imgdata7.data[10*4+3] === 255;
+    @assert imgdata7.data[19*4+0] === 0;
+    @assert imgdata7.data[19*4+1] === 136;
+    @assert imgdata7.data[19*4+2] === 255;
+    @assert imgdata7.data[19*4+3] === 255;
+    @assert imgdata7.data[20*4+0] === 0;
+    @assert imgdata7.data[20*4+1] === 0;
+    @assert imgdata7.data[20*4+2] === 0;
+    @assert imgdata7.data[20*4+3] === 0;
+    t.done();
+
+- name: 2d.imageData.get.source.negative
+  desc: getImageData() works with negative width and height, and returns top-to-bottom
+    left-to-right
+  testing:
+  - 2d.imageData.get.basic
+  - 2d.pixelarray.order
+  code: |
+    ctx.fillStyle = '#000';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#fff';
+    ctx.fillRect(20, 10, 60, 10);
+    var imgdata1 = ctx.getImageData(85, 25, -10, -10);
+    @assert imgdata1.data[0] === 255;
+    @assert imgdata1.data[1] === 255;
+    @assert imgdata1.data[2] === 255;
+    @assert imgdata1.data[3] === 255;
+    @assert imgdata1.data[imgdata1.data.length-4+0] === 0;
+    @assert imgdata1.data[imgdata1.data.length-4+1] === 0;
+    @assert imgdata1.data[imgdata1.data.length-4+2] === 0;
+    @assert imgdata1.data[imgdata1.data.length-4+3] === 255;
+    var imgdata2 = ctx.getImageData(0, 0, -1, -1);
+    @assert imgdata2.data[0] === 0;
+    @assert imgdata2.data[1] === 0;
+    @assert imgdata2.data[2] === 0;
+    @assert imgdata2.data[3] === 0;
+    t.done();
+
+- name: 2d.imageData.get.source.size
+  desc: getImageData() returns bigger ImageData for bigger source rectangle
+  testing:
+  - 2d.imageData.get.basic
+  code: |
+    var imgdata1 = ctx.getImageData(0, 0, 10, 10);
+    var imgdata2 = ctx.getImageData(0, 0, 20, 20);
+    @assert imgdata2.width > imgdata1.width;
+    @assert imgdata2.height > imgdata1.height;
+    t.done();
+
+- name: 2d.imageData.get.tiny
+  desc: getImageData() works for sizes smaller than one pixel
+  testing:
+  - 2d.imageData.one
+  code: |
+    var imgdata = ctx.getImageData(0, 0, 0.0001, 0.0001);
+    @assert imgdata.data.length === imgdata.width*imgdata.height*4;
+    @assert imgdata.width === 1;
+    @assert imgdata.height === 1;
+    t.done();
+
+- name: 2d.imageData.get.nonpremul
+  desc: getImageData() returns non-premultiplied colours
+  testing:
+  - 2d.imageData.get.premul
+  code: |
+    ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
+    ctx.fillRect(0, 0, 100, 50);
+    var imgdata = ctx.getImageData(10, 10, 10, 10);
+    @assert imgdata.data[0] > 200;
+    @assert imgdata.data[1] > 200;
+    @assert imgdata.data[2] > 200;
+    @assert imgdata.data[3] > 100;
+    @assert imgdata.data[3] < 200;
+    t.done();
+
+- name: 2d.imageData.get.range
+  desc: getImageData() returns values in the range [0, 255]
+  testing:
+  - 2d.pixelarray.range
+  - 2d.pixelarray.retrieve
+  code: |
+    ctx.fillStyle = '#000';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#fff';
+    ctx.fillRect(20, 10, 60, 10);
+    var imgdata1 = ctx.getImageData(10, 5, 1, 1);
+    @assert imgdata1.data[0] === 0;
+    var imgdata2 = ctx.getImageData(30, 15, 1, 1);
+    @assert imgdata2.data[0] === 255;
+    t.done();
+
+- name: 2d.imageData.get.clamp
+  desc: getImageData() clamps colours to the range [0, 255]
+  testing:
+  - 2d.pixelarray.range
+  code: |
+    ctx.fillStyle = 'rgb(-100, -200, -300)';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = 'rgb(256, 300, 400)';
+    ctx.fillRect(20, 10, 60, 10);
+    var imgdata1 = ctx.getImageData(10, 5, 1, 1);
+    @assert imgdata1.data[0] === 0;
+    @assert imgdata1.data[1] === 0;
+    @assert imgdata1.data[2] === 0;
+    var imgdata2 = ctx.getImageData(30, 15, 1, 1);
+    @assert imgdata2.data[0] === 255;
+    @assert imgdata2.data[1] === 255;
+    @assert imgdata2.data[2] === 255;
+    t.done();
+
+- name: 2d.imageData.get.length
+  desc: getImageData() returns a correctly-sized Uint8ClampedArray
+  testing:
+  - 2d.pixelarray.length
+  code: |
+    var imgdata = ctx.getImageData(0, 0, 10, 10);
+    @assert imgdata.data.length === imgdata.width*imgdata.height*4;
+    t.done();
+
+- name: 2d.imageData.get.order.cols
+  desc: getImageData() returns leftmost columns first
+  testing:
+  - 2d.pixelarray.order
+  code: |
+    ctx.fillStyle = '#fff';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#000';
+    ctx.fillRect(0, 0, 2, 50);
+    var imgdata = ctx.getImageData(0, 0, 10, 10);
+    @assert imgdata.data[0] === 0;
+    @assert imgdata.data[Math.round(imgdata.width/2*4)] === 255;
+    @assert imgdata.data[Math.round((imgdata.height/2)*imgdata.width*4)] === 0;
+    t.done();
+
+- name: 2d.imageData.get.order.rows
+  desc: getImageData() returns topmost rows first
+  testing:
+  - 2d.pixelarray.order
+  code: |
+    ctx.fillStyle = '#fff';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#000';
+    ctx.fillRect(0, 0, 100, 2);
+    var imgdata = ctx.getImageData(0, 0, 10, 10);
+    @assert imgdata.data[0] === 0;
+    @assert imgdata.data[Math.floor(imgdata.width/2*4)] === 0;
+    @assert imgdata.data[(imgdata.height/2)*imgdata.width*4] === 255;
+    t.done();
+
+- name: 2d.imageData.get.order.rgb
+  desc: getImageData() returns R then G then B
+  testing:
+  - 2d.pixelarray.order
+  - 2d.pixelarray.indexes
+  code: |
+    ctx.fillStyle = '#48c';
+    ctx.fillRect(0, 0, 100, 50);
+    var imgdata = ctx.getImageData(0, 0, 10, 10);
+    @assert imgdata.data[0] === 0x44;
+    @assert imgdata.data[1] === 0x88;
+    @assert imgdata.data[2] === 0xCC;
+    @assert imgdata.data[3] === 255;
+    @assert imgdata.data[4] === 0x44;
+    @assert imgdata.data[5] === 0x88;
+    @assert imgdata.data[6] === 0xCC;
+    @assert imgdata.data[7] === 255;
+    t.done();
+
+- name: 2d.imageData.get.order.alpha
+  desc: getImageData() returns A in the fourth component
+  testing:
+  - 2d.pixelarray.order
+  code: |
+    ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
+    ctx.fillRect(0, 0, 100, 50);
+    var imgdata = ctx.getImageData(0, 0, 10, 10);
+    @assert imgdata.data[3] < 200;
+    @assert imgdata.data[3] > 100;
+    t.done();
+
+- name: 2d.imageData.get.unaffected
+  desc: getImageData() is not affected by context state
+  testing:
+  - 2d.imageData.unaffected
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 50, 50)
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(50, 0, 50, 50)
+    ctx.save();
+    ctx.translate(50, 0);
+    ctx.globalAlpha = 0.1;
+    ctx.globalCompositeOperation = 'destination-atop';
+    ctx.shadowColor = '#f00';
+    ctx.rect(0, 0, 5, 5);
+    ctx.clip();
+    var imgdata = ctx.getImageData(0, 0, 50, 50);
+    ctx.restore();
+    ctx.putImageData(imgdata, 50, 0);
+    @assert pixel 25,25 ==~ 0,255,0,255;
+    @assert pixel 75,25 ==~ 0,255,0,255;
+    t.done();
+
+
+- name: 2d.imageData.object.properties
+  desc: ImageData objects have the right properties
+  testing:
+  - 2d.imageData.type
+  code: |
+    var imgdata = ctx.getImageData(0, 0, 10, 10);
+    @assert typeof(imgdata.width) === 'number';
+    @assert typeof(imgdata.height) === 'number';
+    @assert typeof(imgdata.data) === 'object';
+    t.done();
+
+- name: 2d.imageData.object.readonly
+  desc: ImageData objects properties are read-only
+  testing:
+  - 2d.imageData.type
+  code: |
+    var imgdata = ctx.getImageData(0, 0, 10, 10);
+    var w = imgdata.width;
+    var h = imgdata.height;
+    var d = imgdata.data;
+    imgdata.width = 123;
+    imgdata.height = 123;
+    imgdata.data = [100,100,100,100];
+    @assert imgdata.width === w;
+    @assert imgdata.height === h;
+    @assert imgdata.data === d;
+    @assert imgdata.data[0] === 0;
+    @assert imgdata.data[1] === 0;
+    @assert imgdata.data[2] === 0;
+    @assert imgdata.data[3] === 0;
+    t.done();
+
+- name: 2d.imageData.object.set
+  desc: ImageData.data can be modified
+  testing:
+  - 2d.pixelarray.modify
+  code: |
+    var imgdata = ctx.getImageData(0, 0, 10, 10);
+    imgdata.data[0] = 100;
+    @assert imgdata.data[0] === 100;
+    imgdata.data[0] = 200;
+    @assert imgdata.data[0] === 200;
+    t.done();
+
+- name: 2d.imageData.object.undefined
+  desc: ImageData.data converts undefined to 0
+  testing:
+  - 2d.pixelarray.modify
+  code: |
+    var imgdata = ctx.getImageData(0, 0, 10, 10);
+    imgdata.data[0] = 100;
+    imgdata.data[0] = undefined;
+    @assert imgdata.data[0] === 0;
+    t.done();
+
+- name: 2d.imageData.object.nan
+  desc: ImageData.data converts NaN to 0
+  testing:
+  - 2d.pixelarray.modify
+  code: |
+    var imgdata = ctx.getImageData(0, 0, 10, 10);
+    imgdata.data[0] = 100;
+    imgdata.data[0] = NaN;
+    @assert imgdata.data[0] === 0;
+    imgdata.data[0] = 100;
+    imgdata.data[0] = "cheese";
+    @assert imgdata.data[0] === 0;
+    t.done();
+
+- name: 2d.imageData.object.string
+  desc: ImageData.data converts strings to numbers with ToNumber
+  testing:
+  - 2d.pixelarray.modify
+  code: |
+    var imgdata = ctx.getImageData(0, 0, 10, 10);
+    imgdata.data[0] = 100;
+    imgdata.data[0] = "110";
+    @assert imgdata.data[0] === 110;
+    imgdata.data[0] = 100;
+    imgdata.data[0] = "0x78";
+    @assert imgdata.data[0] === 120;
+    imgdata.data[0] = 100;
+    imgdata.data[0] = " +130e0 ";
+    @assert imgdata.data[0] === 130;
+    t.done();
+
+- name: 2d.imageData.object.clamp
+  desc: ImageData.data clamps numbers to [0, 255]
+  testing:
+  - 2d.pixelarray.modify
+  code: |
+    var imgdata = ctx.getImageData(0, 0, 10, 10);
+    imgdata.data[0] = 100;
+    imgdata.data[0] = 300;
+    @assert imgdata.data[0] === 255;
+    imgdata.data[0] = 100;
+    imgdata.data[0] = -100;
+    @assert imgdata.data[0] === 0;
+    imgdata.data[0] = 100;
+    imgdata.data[0] = 200+Math.pow(2, 32);
+    @assert imgdata.data[0] === 255;
+    imgdata.data[0] = 100;
+    imgdata.data[0] = -200-Math.pow(2, 32);
+    @assert imgdata.data[0] === 0;
+    imgdata.data[0] = 100;
+    imgdata.data[0] = Math.pow(10, 39);
+    @assert imgdata.data[0] === 255;
+    imgdata.data[0] = 100;
+    imgdata.data[0] = -Math.pow(10, 39);
+    @assert imgdata.data[0] === 0;
+    imgdata.data[0] = 100;
+    imgdata.data[0] = -Infinity;
+    @assert imgdata.data[0] === 0;
+    imgdata.data[0] = 100;
+    imgdata.data[0] = Infinity;
+    @assert imgdata.data[0] === 255;
+    t.done();
+
+- name: 2d.imageData.object.round
+  desc: ImageData.data rounds numbers with round-to-zero
+  testing:
+  - 2d.pixelarray.modify
+  code: |
+    var imgdata = ctx.getImageData(0, 0, 10, 10);
+    imgdata.data[0] = 0.499;
+    @assert imgdata.data[0] === 0;
+    imgdata.data[0] = 0.5;
+    @assert imgdata.data[0] === 0;
+    imgdata.data[0] = 0.501;
+    @assert imgdata.data[0] === 1;
+    imgdata.data[0] = 1.499;
+    @assert imgdata.data[0] === 1;
+    imgdata.data[0] = 1.5;
+    @assert imgdata.data[0] === 2;
+    imgdata.data[0] = 1.501;
+    @assert imgdata.data[0] === 2;
+    imgdata.data[0] = 2.5;
+    @assert imgdata.data[0] === 2;
+    imgdata.data[0] = 3.5;
+    @assert imgdata.data[0] === 4;
+    imgdata.data[0] = 252.5;
+    @assert imgdata.data[0] === 252;
+    imgdata.data[0] = 253.5;
+    @assert imgdata.data[0] === 254;
+    imgdata.data[0] = 254.5;
+    @assert imgdata.data[0] === 254;
+    imgdata.data[0] = 256.5;
+    @assert imgdata.data[0] === 255;
+    imgdata.data[0] = -0.5;
+    @assert imgdata.data[0] === 0;
+    imgdata.data[0] = -1.5;
+    @assert imgdata.data[0] === 0;
+    t.done();
+
+- name: 2d.imageData.put.null
+  desc: putImageData() with null imagedata throws TypeError
+  testing:
+  - 2d.imageData.put.wrongtype
+  code: |
+    @assert throws TypeError ctx.putImageData(null, 0, 0);
+    t.done();
+
+- name: 2d.imageData.put.nonfinite
+  desc: putImageData() throws TypeError if arguments are not finite
+  testing:
+  - 2d.imageData.put.nonfinite
+  code: |
+    var imgdata = ctx.getImageData(0, 0, 10, 10);
+    @nonfinite @assert throws TypeError ctx.putImageData(<imgdata>, <10 Infinity -Infinity NaN>, <10 Infinity -Infinity NaN>);
+    @nonfinite @assert throws TypeError ctx.putImageData(<imgdata>, <10 Infinity -Infinity NaN>, <10 Infinity -Infinity NaN>, <10 Infinity -Infinity NaN>, <10 Infinity -Infinity NaN>, <10 Infinity -Infinity NaN>, <10 Infinity -Infinity NaN>);
+    t.done();
+
+- name: 2d.imageData.put.basic
+  desc: putImageData() puts image data from getImageData() onto the canvas
+  testing:
+  - 2d.imageData.put.normal
+  - 2d.imageData.put.3arg
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50)
+    var imgdata = ctx.getImageData(0, 0, 100, 50);
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50)
+    ctx.putImageData(imgdata, 0, 0);
+    @assert pixel 50,25 ==~ 0,255,0,255;
+    t.done();
+
+- name: 2d.imageData.put.created
+  desc: putImageData() puts image data from createImageData() onto the canvas
+  testing:
+  - 2d.imageData.put.normal
+  code: |
+    var imgdata = ctx.createImageData(100, 50);
+    for (var i = 0; i < imgdata.data.length; i += 4) {
+        imgdata.data[i] = 0;
+        imgdata.data[i+1] = 255;
+        imgdata.data[i+2] = 0;
+        imgdata.data[i+3] = 255;
+    }
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50)
+    ctx.putImageData(imgdata, 0, 0);
+    @assert pixel 50,25 ==~ 0,255,0,255;
+    t.done();
+
+- name: 2d.imageData.put.wrongtype
+  desc: putImageData() does not accept non-ImageData objects
+  testing:
+  - 2d.imageData.put.wrongtype
+  code: |
+    var imgdata = { width: 1, height: 1, data: [255, 0, 0, 255] };
+    @assert throws TypeError ctx.putImageData(imgdata, 0, 0);
+    @assert throws TypeError ctx.putImageData("cheese", 0, 0);
+    @assert throws TypeError ctx.putImageData(42, 0, 0);
+    t.done();
+
+- name: 2d.imageData.put.cross
+  desc: putImageData() accepts image data got from a different canvas
+  testing:
+  - 2d.imageData.put.normal
+  code: |
+    var offscreenCanvas2 = new OffscreenCanvas(100, 50);
+    var ctx2 = offscreenCanvas2.getContext('2d');
+    ctx2.fillStyle = '#0f0';
+    ctx2.fillRect(0, 0, 100, 50)
+    var imgdata = ctx2.getImageData(0, 0, 100, 50);
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50)
+    ctx.putImageData(imgdata, 0, 0);
+    @assert pixel 50,25 ==~ 0,255,0,255;
+    t.done();
+
+- name: 2d.imageData.put.alpha
+  desc: putImageData() puts non-solid image data correctly
+  testing:
+  - 2d.imageData.put.normal
+  code: |
+    ctx.fillStyle = 'rgba(0, 255, 0, 0.25)';
+    ctx.fillRect(0, 0, 100, 50)
+    var imgdata = ctx.getImageData(0, 0, 100, 50);
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50)
+    ctx.putImageData(imgdata, 0, 0);
+    @assert pixel 50,25 ==~ 0,255,0,64;
+    t.done();
+
+- name: 2d.imageData.put.modified
+  desc: putImageData() puts modified image data correctly
+  testing:
+  - 2d.imageData.put.normal
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50)
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(45, 20, 10, 10)
+    var imgdata = ctx.getImageData(45, 20, 10, 10);
+    for (var i = 0, len = imgdata.width*imgdata.height*4; i < len; i += 4)
+    {
+        imgdata.data[i] = 0;
+        imgdata.data[i+1] = 255;
+    }
+    ctx.putImageData(imgdata, 45, 20);
+    @assert pixel 50,25 ==~ 0,255,0,255;
+    t.done();
+
+- name: 2d.imageData.put.dirty.zero
+  desc: putImageData() with zero-sized dirty rectangle puts nothing
+  testing:
+  - 2d.imageData.put.normal
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50)
+    var imgdata = ctx.getImageData(0, 0, 100, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50)
+    ctx.putImageData(imgdata, 0, 0, 0, 0, 0, 0);
+    @assert pixel 50,25 ==~ 0,255,0,255;
+    t.done();
+
+- name: 2d.imageData.put.dirty.rect1
+  desc: putImageData() only modifies areas inside the dirty rectangle, using width
+    and height
+  testing:
+  - 2d.imageData.put.normal
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50)
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 20, 20)
+    var imgdata = ctx.getImageData(0, 0, 100, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50)
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(40, 20, 20, 20)
+    ctx.putImageData(imgdata, 40, 20, 0, 0, 20, 20);
+    @assert pixel 50,25 ==~ 0,255,0,255;
+    @assert pixel 35,25 ==~ 0,255,0,255;
+    @assert pixel 65,25 ==~ 0,255,0,255;
+    @assert pixel 50,15 ==~ 0,255,0,255;
+    @assert pixel 50,45 ==~ 0,255,0,255;
+    t.done();
+
+- name: 2d.imageData.put.dirty.rect2
+  desc: putImageData() only modifies areas inside the dirty rectangle, using x and
+    y
+  testing:
+  - 2d.imageData.put.normal
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50)
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(60, 30, 20, 20)
+    var imgdata = ctx.getImageData(0, 0, 100, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50)
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(40, 20, 20, 20)
+    ctx.putImageData(imgdata, -20, -10, 60, 30, 20, 20);
+    @assert pixel 50,25 ==~ 0,255,0,255;
+    @assert pixel 35,25 ==~ 0,255,0,255;
+    @assert pixel 65,25 ==~ 0,255,0,255;
+    @assert pixel 50,15 ==~ 0,255,0,255;
+    @assert pixel 50,45 ==~ 0,255,0,255;
+    t.done();
+
+- name: 2d.imageData.put.dirty.negative
+  desc: putImageData() handles negative-sized dirty rectangles correctly
+  testing:
+  - 2d.imageData.put.normal
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50)
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 20, 20)
+    var imgdata = ctx.getImageData(0, 0, 100, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50)
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(40, 20, 20, 20)
+    ctx.putImageData(imgdata, 40, 20, 20, 20, -20, -20);
+    @assert pixel 50,25 ==~ 0,255,0,255;
+    @assert pixel 35,25 ==~ 0,255,0,255;
+    @assert pixel 65,25 ==~ 0,255,0,255;
+    @assert pixel 50,15 ==~ 0,255,0,255;
+    @assert pixel 50,45 ==~ 0,255,0,255;
+    t.done();
+
+- name: 2d.imageData.put.dirty.outside
+  desc: putImageData() handles dirty rectangles outside the canvas correctly
+  testing:
+  - 2d.imageData.put.normal
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50)
+    var imgdata = ctx.getImageData(0, 0, 100, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50)
+    ctx.putImageData(imgdata, 100, 20, 20, 20, -20, -20);
+    ctx.putImageData(imgdata, 200, 200, 0, 0, 100, 50);
+    ctx.putImageData(imgdata, 40, 20, -30, -20, 30, 20);
+    ctx.putImageData(imgdata, -30, 20, 0, 0, 30, 20);
+    @assert pixel 50,25 ==~ 0,255,0,255;
+    @assert pixel 98,15 ==~ 0,255,0,255;
+    @assert pixel 98,25 ==~ 0,255,0,255;
+    @assert pixel 98,45 ==~ 0,255,0,255;
+    @assert pixel 1,5 ==~ 0,255,0,255;
+    @assert pixel 1,25 ==~ 0,255,0,255;
+    @assert pixel 1,45 ==~ 0,255,0,255;
+    t.done();
+
+- name: 2d.imageData.put.unchanged
+  desc: putImageData(getImageData(...), ...) has no effect
+  testing:
+  - 2d.imageData.unchanged
+  code: |
+    var i = 0;
+    for (var y = 0; y < 16; ++y) {
+        for (var x = 0; x < 16; ++x, ++i) {
+            ctx.fillStyle = 'rgba(' + i + ',' + (Math.floor(i*1.5) % 256) + ',' + (Math.floor(i*23.3) % 256) + ',' + (i/256) + ')';
+            ctx.fillRect(x, y, 1, 1);
+        }
+    }
+    var imgdata1 = ctx.getImageData(0.1, 0.2, 15.8, 15.9);
+    var olddata = [];
+    for (var i = 0; i < imgdata1.data.length; ++i)
+        olddata[i] = imgdata1.data[i];
+    ctx.putImageData(imgdata1, 0.1, 0.2);
+    var imgdata2 = ctx.getImageData(0.1, 0.2, 15.8, 15.9);
+    for (var i = 0; i < imgdata2.data.length; ++i) {
+        @assert olddata[i] === imgdata2.data[i];
+    }
+    t.done();
+
+- name: 2d.imageData.put.unaffected
+  desc: putImageData() is not affected by context state
+  testing:
+  - 2d.imageData.unaffected
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50)
+    var imgdata = ctx.getImageData(0, 0, 100, 50);
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50)
+    ctx.globalAlpha = 0.1;
+    ctx.globalCompositeOperation = 'destination-atop';
+    ctx.shadowColor = '#f00';
+    ctx.shadowBlur = 1;
+    ctx.translate(100, 50);
+    ctx.scale(0.1, 0.1);
+    ctx.putImageData(imgdata, 0, 0);
+    @assert pixel 50,25 ==~ 0,255,0,255;
+    t.done();
+
+- name: 2d.imageData.put.clip
+  desc: putImageData() is not affected by clipping regions
+  testing:
+  - 2d.imageData.unaffected
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50)
+    var imgdata = ctx.getImageData(0, 0, 100, 50);
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50)
+    ctx.beginPath();
+    ctx.rect(0, 0, 50, 50);
+    ctx.clip();
+    ctx.putImageData(imgdata, 0, 0);
+    @assert pixel 25,25 ==~ 0,255,0,255;
+    @assert pixel 75,25 ==~ 0,255,0,255;
+    t.done();
+
+- name: 2d.imageData.put.path
+  desc: putImageData() does not affect the current path
+  testing:
+  - 2d.imageData.put.normal
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50)
+    ctx.rect(0, 0, 100, 50);
+    var imgdata = ctx.getImageData(0, 0, 100, 50);
+    ctx.putImageData(imgdata, 0, 0);
+    ctx.fillStyle = '#0f0';
+    ctx.fill();
+    @assert pixel 50,25 ==~ 0,255,0,255;
+    t.done();
+
diff --git a/tests/wpt/web-platform-tests/html/canvas/tools/yaml/offscreen/shadows.yaml b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/offscreen/shadows.yaml
new file mode 100644
index 00000000000..424510d742f
--- /dev/null
+++ b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/offscreen/shadows.yaml
@@ -0,0 +1,1069 @@
+- name: 2d.shadow.attributes.shadowBlur.initial
+  testing:
+  - 2d.shadow.blur.get
+  - 2d.shadow.blur.initial
+  code: |
+    @assert ctx.shadowBlur === 0;
+    t.done();
+
+- name: 2d.shadow.attributes.shadowBlur.valid
+  testing:
+  - 2d.shadow.blur.get
+  - 2d.shadow.blur.set
+  code: |
+    ctx.shadowBlur = 1;
+    @assert ctx.shadowBlur === 1;
+    ctx.shadowBlur = 0.5;
+    @assert ctx.shadowBlur === 0.5;
+    ctx.shadowBlur = 1e6;
+    @assert ctx.shadowBlur === 1e6;
+    ctx.shadowBlur = 0;
+    @assert ctx.shadowBlur === 0;
+    t.done();
+
+- name: 2d.shadow.attributes.shadowBlur.invalid
+  testing:
+  - 2d.shadow.blur.invalid
+  code: |
+    ctx.shadowBlur = 1;
+    ctx.shadowBlur = -2;
+    @assert ctx.shadowBlur === 1;
+    ctx.shadowBlur = 1;
+    ctx.shadowBlur = Infinity;
+    @assert ctx.shadowBlur === 1;
+    ctx.shadowBlur = 1;
+    ctx.shadowBlur = -Infinity;
+    @assert ctx.shadowBlur === 1;
+    ctx.shadowBlur = 1;
+    ctx.shadowBlur = NaN;
+    @assert ctx.shadowBlur === 1;
+    t.done();
+
+- name: 2d.shadow.attributes.shadowOffset.initial
+  testing:
+  - 2d.shadow.offset.initial
+  code: |
+    @assert ctx.shadowOffsetX === 0;
+    @assert ctx.shadowOffsetY === 0;
+    t.done();
+
+- name: 2d.shadow.attributes.shadowOffset.valid
+  testing:
+  - 2d.shadow.offset.get
+  - 2d.shadow.offset.set
+  code: |
+    ctx.shadowOffsetX = 1;
+    ctx.shadowOffsetY = 2;
+    @assert ctx.shadowOffsetX === 1;
+    @assert ctx.shadowOffsetY === 2;
+    ctx.shadowOffsetX = 0.5;
+    ctx.shadowOffsetY = 0.25;
+    @assert ctx.shadowOffsetX === 0.5;
+    @assert ctx.shadowOffsetY === 0.25;
+    ctx.shadowOffsetX = -0.5;
+    ctx.shadowOffsetY = -0.25;
+    @assert ctx.shadowOffsetX === -0.5;
+    @assert ctx.shadowOffsetY === -0.25;
+    ctx.shadowOffsetX = 0;
+    ctx.shadowOffsetY = 0;
+    @assert ctx.shadowOffsetX === 0;
+    @assert ctx.shadowOffsetY === 0;
+    ctx.shadowOffsetX = 1e6;
+    ctx.shadowOffsetY = 1e6;
+    @assert ctx.shadowOffsetX === 1e6;
+    @assert ctx.shadowOffsetY === 1e6;
+    t.done();
+
+- name: 2d.shadow.attributes.shadowOffset.invalid
+  testing:
+  - 2d.shadow.offset.invalid
+  code: |
+    ctx.shadowOffsetX = 1;
+    ctx.shadowOffsetY = 2;
+    ctx.shadowOffsetX = Infinity;
+    ctx.shadowOffsetY = Infinity;
+    @assert ctx.shadowOffsetX === 1;
+    @assert ctx.shadowOffsetY === 2;
+    ctx.shadowOffsetX = 1;
+    ctx.shadowOffsetY = 2;
+    ctx.shadowOffsetX = -Infinity;
+    ctx.shadowOffsetY = -Infinity;
+    @assert ctx.shadowOffsetX === 1;
+    @assert ctx.shadowOffsetY === 2;
+    ctx.shadowOffsetX = 1;
+    ctx.shadowOffsetY = 2;
+    ctx.shadowOffsetX = NaN;
+    ctx.shadowOffsetY = NaN;
+    @assert ctx.shadowOffsetX === 1;
+    @assert ctx.shadowOffsetY === 2;
+    t.done();
+
+- name: 2d.shadow.attributes.shadowColor.initial
+  testing:
+  - 2d.shadow.color.initial
+  code: |
+    @assert ctx.shadowColor === 'rgba(0, 0, 0, 0)';
+    t.done();
+
+- name: 2d.shadow.attributes.shadowColor.valid
+  testing:
+  - 2d.shadow.color.get
+  - 2d.shadow.color.set
+  code: |
+    ctx.shadowColor = 'lime';
+    @assert ctx.shadowColor === '#00ff00';
+    ctx.shadowColor = 'RGBA(0,255, 0,0)';
+    @assert ctx.shadowColor === 'rgba(0, 255, 0, 0)';
+    t.done();
+
+- name: 2d.shadow.attributes.shadowColor.invalid
+  testing:
+  - 2d.shadow.color.invalid
+  code: |
+    ctx.shadowColor = '#00ff00';
+    ctx.shadowColor = 'bogus';
+    @assert ctx.shadowColor === '#00ff00';
+    ctx.shadowColor = '#00ff00';
+    ctx.shadowColor = 'red bogus';
+    @assert ctx.shadowColor === '#00ff00';
+    ctx.shadowColor = '#00ff00';
+    ctx.shadowColor = ctx;
+    @assert ctx.shadowColor === '#00ff00';
+    ctx.shadowColor = '#00ff00';
+    ctx.shadowColor = undefined;
+    @assert ctx.shadowColor === '#00ff00';
+    t.done();
+
+- name: 2d.shadow.enable.off.1
+  desc: Shadows are not drawn when only shadowColor is set
+  testing:
+  - 2d.shadow.enable
+  - 2d.shadow.render
+  code: |
+    ctx.shadowColor = '#f00';
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.shadow.enable.off.2
+  desc: Shadows are not drawn when only shadowColor is set
+  testing:
+  - 2d.shadow.enable
+  - 2d.shadow.render
+  code: |
+    ctx.globalCompositeOperation = 'destination-atop';
+    ctx.shadowColor = '#f00';
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.shadow.enable.blur
+  desc: Shadows are drawn if shadowBlur is set
+  testing:
+  - 2d.shadow.enable
+  - 2d.shadow.render
+  code: |
+    ctx.globalCompositeOperation = 'destination-atop';
+    ctx.shadowColor = '#0f0';
+    ctx.shadowBlur = 0.1;
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.shadow.enable.x
+  desc: Shadows are drawn if shadowOffsetX is set
+  testing:
+  - 2d.shadow.enable
+  - 2d.shadow.render
+  code: |
+    ctx.globalCompositeOperation = 'destination-atop';
+    ctx.shadowColor = '#0f0';
+    ctx.shadowOffsetX = 0.1;
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.shadow.enable.y
+  desc: Shadows are drawn if shadowOffsetY is set
+  testing:
+  - 2d.shadow.enable
+  - 2d.shadow.render
+  code: |
+    ctx.globalCompositeOperation = 'destination-atop';
+    ctx.shadowColor = '#0f0';
+    ctx.shadowOffsetY = 0.1;
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.shadow.offset.positiveX
+  desc: Shadows can be offset with positive x
+  testing:
+  - 2d.shadow.render
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.shadowColor = '#0f0';
+    ctx.shadowOffsetX = 50;
+    ctx.fillRect(0, 0, 50, 50);
+    @assert pixel 25,25 == 0,255,0,255;
+    @assert pixel 75,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.shadow.offset.negativeX
+  desc: Shadows can be offset with negative x
+  testing:
+  - 2d.shadow.render
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.shadowColor = '#0f0';
+    ctx.shadowOffsetX = -50;
+    ctx.fillRect(50, 0, 50, 50);
+    @assert pixel 25,25 == 0,255,0,255;
+    @assert pixel 75,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.shadow.offset.positiveY
+  desc: Shadows can be offset with positive y
+  testing:
+  - 2d.shadow.render
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.shadowColor = '#0f0';
+    ctx.shadowOffsetY = 25;
+    ctx.fillRect(0, 0, 100, 25);
+    @assert pixel 50,12 == 0,255,0,255;
+    @assert pixel 50,37 == 0,255,0,255;
+    t.done();
+
+- name: 2d.shadow.offset.negativeY
+  desc: Shadows can be offset with negative y
+  testing:
+  - 2d.shadow.render
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.shadowColor = '#0f0';
+    ctx.shadowOffsetY = -25;
+    ctx.fillRect(0, 25, 100, 25);
+    @assert pixel 50,12 == 0,255,0,255;
+    @assert pixel 50,37 == 0,255,0,255;
+    t.done();
+
+- name: 2d.shadow.outside
+  desc: Shadows of shapes outside the visible area can be offset onto the visible
+    area
+  testing:
+  - 2d.shadow.render
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.shadowColor = '#0f0';
+    ctx.shadowOffsetX = 100;
+    ctx.fillRect(-100, 0, 25, 50);
+    ctx.shadowOffsetX = -100;
+    ctx.fillRect(175, 0, 25, 50);
+    ctx.shadowOffsetX = 0;
+    ctx.shadowOffsetY = 100;
+    ctx.fillRect(25, -100, 50, 25);
+    ctx.shadowOffsetY = -100;
+    ctx.fillRect(25, 125, 50, 25);
+    @assert pixel 12,25 == 0,255,0,255;
+    @assert pixel 87,25 == 0,255,0,255;
+    @assert pixel 50,12 == 0,255,0,255;
+    @assert pixel 50,37 == 0,255,0,255;
+    t.done();
+
+- name: 2d.shadow.clip.1
+  desc: Shadows of clipped shapes are still drawn within the clipping region
+  testing:
+  - 2d.shadow.render
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 50, 50);
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(50, 0, 50, 50);
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(50, 0, 50, 50);
+    ctx.clip();
+    ctx.shadowColor = '#0f0';
+    ctx.shadowOffsetX = 50;
+    ctx.fillRect(0, 0, 50, 50);
+    ctx.restore();
+    @assert pixel 25,25 == 0,255,0,255;
+    @assert pixel 75,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.shadow.clip.2
+  desc: Shadows are not drawn outside the clipping region
+  testing:
+  - 2d.shadow.render
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 50, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(50, 0, 50, 50);
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(0, 0, 50, 50);
+    ctx.clip();
+    ctx.shadowColor = '#f00';
+    ctx.shadowOffsetX = 50;
+    ctx.fillRect(0, 0, 50, 50);
+    ctx.restore();
+    @assert pixel 25,25 == 0,255,0,255;
+    @assert pixel 75,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.shadow.clip.3
+  desc: Shadows of clipped shapes are still drawn within the clipping region
+  testing:
+  - 2d.shadow.render
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 50, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(50, 0, 50, 50);
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(0, 0, 50, 50);
+    ctx.clip();
+    ctx.fillStyle = '#f00';
+    ctx.shadowColor = '#0f0';
+    ctx.shadowOffsetX = 50;
+    ctx.fillRect(-50, 0, 50, 50);
+    ctx.restore();
+    @assert pixel 25,25 == 0,255,0,255;
+    @assert pixel 75,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.shadow.stroke.basic
+  desc: Shadows are drawn for strokes
+  testing:
+  - 2d.shadow.render
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#f00';
+    ctx.shadowColor = '#0f0';
+    ctx.shadowOffsetY = 50;
+    ctx.beginPath();
+    ctx.lineWidth = 50;
+    ctx.moveTo(0, -25);
+    ctx.lineTo(100, -25);
+    ctx.stroke();
+    @assert pixel 1,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 98,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.shadow.stroke.cap.1
+  desc: Shadows are not drawn for areas outside stroke caps
+  testing:
+  - 2d.shadow.render
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#f00';
+    ctx.shadowColor = '#f00';
+    ctx.shadowOffsetY = 50;
+    ctx.beginPath();
+    ctx.lineWidth = 50;
+    ctx.lineCap = 'butt';
+    ctx.moveTo(-50, -25);
+    ctx.lineTo(0, -25);
+    ctx.moveTo(100, -25);
+    ctx.lineTo(150, -25);
+    ctx.stroke();
+    @assert pixel 1,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 98,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.shadow.stroke.cap.2
+  desc: Shadows are drawn for stroke caps
+  testing:
+  - 2d.shadow.render
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#f00';
+    ctx.shadowColor = '#0f0';
+    ctx.shadowOffsetY = 50;
+    ctx.beginPath();
+    ctx.lineWidth = 50;
+    ctx.lineCap = 'square';
+    ctx.moveTo(25, -25);
+    ctx.lineTo(75, -25);
+    ctx.stroke();
+    @assert pixel 1,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 98,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.shadow.stroke.join.1
+  desc: Shadows are not drawn for areas outside stroke joins
+  testing:
+  - 2d.shadow.render
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#f00';
+    ctx.shadowColor = '#f00';
+    ctx.shadowOffsetX = 100;
+    ctx.lineWidth = 200;
+    ctx.lineJoin = 'bevel';
+    ctx.beginPath();
+    ctx.moveTo(-200, -50);
+    ctx.lineTo(-150, -50);
+    ctx.lineTo(-151, -100);
+    ctx.stroke();
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 48,48 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+    t.done();
+
+- name: 2d.shadow.stroke.join.2
+  desc: Shadows are drawn for stroke joins
+  testing:
+  - 2d.shadow.render
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 50, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(50, 0, 50, 50);
+    ctx.strokeStyle = '#f00';
+    ctx.shadowColor = '#0f0';
+    ctx.shadowOffsetX = 100;
+    ctx.lineWidth = 200;
+    ctx.lineJoin = 'miter';
+    ctx.beginPath();
+    ctx.moveTo(-200, -50);
+    ctx.lineTo(-150, -50);
+    ctx.lineTo(-151, -100);
+    ctx.stroke();
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 48,48 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+    t.done();
+
+- name: 2d.shadow.stroke.join.3
+  desc: Shadows are drawn for stroke joins respecting miter limit
+  testing:
+  - 2d.shadow.render
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.strokeStyle = '#f00';
+    ctx.shadowColor = '#f00';
+    ctx.shadowOffsetX = 100;
+    ctx.lineWidth = 200;
+    ctx.lineJoin = 'miter';
+    ctx.miterLimit = 0.1;
+    ctx.beginPath();
+    ctx.moveTo(-200, -50);
+    ctx.lineTo(-150, -50);
+    ctx.lineTo(-151, -100); // (not an exact right angle, to avoid some other bug in Firefox 3)
+    ctx.stroke();
+    @assert pixel 1,1 == 0,255,0,255;
+    @assert pixel 48,48 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 98,48 == 0,255,0,255;
+    t.done();
+
+- name: 2d.shadow.image.basic
+  desc: Shadows are drawn for images
+  testing:
+  - 2d.shadow.render
+  images:
+  - red.png
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.shadowColor = '#0f0';
+    ctx.shadowOffsetY = 50;
+    var promise = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/red.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    promise.then(function(response) {
+        createImageBitmap(response).then(bitmap => {
+            ctx.drawImage(bitmap, 0, -50);
+            @assert pixel 50,25 == 0,255,0,255;
+        }, t_fail);
+    }).then(t_pass, t_fail);
+
+- name: 2d.shadow.image.transparent.1
+  desc: Shadows are not drawn for transparent images
+  testing:
+  - 2d.shadow.render
+  images:
+  - transparent.png
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.shadowColor = '#f00';
+    ctx.shadowOffsetY = 50;
+    var promise = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/transparent.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    promise.then(function(response) {
+        createImageBitmap(response).then(bitmap => {
+            ctx.drawImage(bitmap, 0, -50);
+            @assert pixel 50,25 == 0,255,0,255;
+        }, t_fail);
+    }).then(t_pass, t_fail);
+
+- name: 2d.shadow.image.transparent.2
+  desc: Shadows are not drawn for transparent parts of images
+  testing:
+  - 2d.shadow.render
+  images:
+  - redtransparent.png
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 50, 50);
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(50, 0, 50, 50);
+    ctx.shadowOffsetY = 50;
+    ctx.shadowColor = '#0f0';
+    var promise = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/redtransparent.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    promise.then(function(response) {
+        createImageBitmap(response).then(bitmap => {
+            ctx.drawImage(bitmap, 50, -50);
+            ctx.shadowColor = '#f00';
+            ctx.drawImage(bitmap, -50, -50);
+            @assert pixel 25,25 == 0,255,0,255;
+            @assert pixel 50,25 == 0,255,0,255;
+            @assert pixel 75,25 == 0,255,0,255;
+        }, t_fail);
+    }).then(t_pass, t_fail);
+
+- name: 2d.shadow.image.alpha
+  desc: Shadows are drawn correctly for partially-transparent images
+  testing:
+  - 2d.shadow.render
+  images:
+  - transparent50.png
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.shadowOffsetY = 50;
+    ctx.shadowColor = '#00f';
+    var promise = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/transparent50.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    promise.then(function(response) {
+        createImageBitmap(response).then(bitmap => {
+            ctx.drawImage(bitmap, 0, -50);
+            @assert pixel 50,25 ==~ 127,0,127,255;
+        }, t_fail);
+    }).then(t_pass, t_fail);
+
+- name: 2d.shadow.image.section
+  desc: Shadows are not drawn for areas outside image source rectangles
+  testing:
+  - 2d.shadow.render
+  images:
+  - redtransparent.png
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.shadowOffsetY = 50;
+    ctx.shadowColor = '#f00';
+    var promise = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/redtransparent.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    promise.then(function(response) {
+        createImageBitmap(response).then(bitmap => {
+            ctx.drawImage(bitmap, 50, 0, 50, 50, 0, -50, 50, 50);
+            @assert pixel 25,25 ==~ 0,255,0,255;
+            @assert pixel 50,25 ==~ 0,255,0,255;
+            @assert pixel 75,25 ==~ 0,255,0,255;
+        }, t_fail);
+    }).then(t_pass, t_fail);
+
+- name: 2d.shadow.image.scale
+  desc: Shadows are drawn correctly for scaled images
+  testing:
+  - 2d.shadow.render
+  images:
+  - redtransparent.png
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.shadowOffsetY = 50;
+    ctx.shadowColor = '#0f0';
+    var promise = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/redtransparent.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    promise.then(function(response) {
+        createImageBitmap(response).then(bitmap => {
+            ctx.drawImage(bitmap, 0, 0, 100, 50, -10, -50, 240, 50);
+            @assert pixel 25,25 ==~ 0,255,0,255;
+            @assert pixel 50,25 ==~ 0,255,0,255;
+            @assert pixel 75,25 ==~ 0,255,0,255;
+        }, t_fail);
+    }).then(t_pass, t_fail);
+
+- name: 2d.shadow.canvas.basic
+  desc: Shadows are drawn for canvases
+  testing:
+  - 2d.shadow.render
+  code: |
+    var offscreenCanvas2 = new OffscreenCanvas(100, 50);
+    var ctx2 = offscreenCanvas2.getContext('2d');
+    ctx2.fillStyle = '#f00';
+    ctx2.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.shadowColor = '#0f0';
+    ctx.shadowOffsetY = 50;
+    ctx.drawImage(offscreenCanvas2, 0, -50);
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.shadow.canvas.transparent.1
+  desc: Shadows are not drawn for transparent canvases
+  testing:
+  - 2d.shadow.render
+  code: |
+    var offscreenCanvas2 = new OffscreenCanvas(100, 50);
+    var ctx2 = offscreenCanvas2.getContext('2d');
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.shadowColor = '#f00';
+    ctx.shadowOffsetY = 50;
+    ctx.drawImage(offscreenCanvas2, 0, -50);
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.shadow.canvas.transparent.2
+  desc: Shadows are not drawn for transparent parts of canvases
+  testing:
+  - 2d.shadow.render
+  code: |
+    var offscreenCanvas2 = new OffscreenCanvas(100, 50);
+    var ctx2 = offscreenCanvas2.getContext('2d');
+    ctx2.fillStyle = '#f00';
+    ctx2.fillRect(0, 0, 50, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 50, 50);
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(50, 0, 50, 50);
+    ctx.shadowOffsetY = 50;
+    ctx.shadowColor = '#0f0';
+    ctx.drawImage(offscreenCanvas2, 50, -50);
+    ctx.shadowColor = '#f00';
+    ctx.drawImage(offscreenCanvas2, -50, -50);
+    @assert pixel 25,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 75,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.shadow.canvas.alpha
+  desc: Shadows are drawn correctly for partially-transparent canvases
+  testing:
+  - 2d.shadow.render
+  code: |
+    var offscreenCanvas2 = new OffscreenCanvas(100, 50);
+    var ctx2 = offscreenCanvas2.getContext('2d');
+    ctx2.fillStyle = 'rgba(255, 0, 0, 0.5)';
+    ctx2.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.shadowOffsetY = 50;
+    ctx.shadowColor = '#00f';
+    ctx.drawImage(offscreenCanvas2, 0, -50);
+    @assert pixel 50,25 ==~ 127,0,127,255;
+    t.done();
+
+- name: 2d.shadow.pattern.basic
+  desc: Shadows are drawn for fill patterns
+  testing:
+  - 2d.shadow.render
+  images:
+  - red.png
+  code: |
+    var promise = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/red.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    promise.then(function(response) {
+        createImageBitmap(response).then(bitmap => {
+            var pattern = ctx.createPattern(bitmap, 'repeat');
+            ctx.fillStyle = '#f00';
+            ctx.fillRect(0, 0, 100, 50);
+            ctx.shadowColor = '#0f0';
+            ctx.shadowOffsetY = 50;
+            ctx.fillStyle = pattern;
+            ctx.fillRect(0, -50, 100, 50);
+        }, t_fail);
+    }).then(t_pass, t_fail);
+
+- name: 2d.shadow.pattern.transparent.1
+  desc: Shadows are not drawn for transparent fill patterns
+  testing:
+  - 2d.shadow.render
+  # http://bugs.webkit.org/show_bug.cgi?id=15266
+  images:
+  - transparent.png
+  code: |
+    var promise = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/transparent.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    promise.then(function(response) {
+        createImageBitmap(response).then(bitmap => {
+            var pattern = ctx.createPattern(bitmap, 'repeat');
+            ctx.fillStyle = '#0f0';
+            ctx.fillRect(0, 0, 100, 50);
+            ctx.shadowColor = '#f00';
+            ctx.shadowOffsetY = 50;
+            ctx.fillStyle = pattern;
+            ctx.fillRect(0, -50, 100, 50);
+        }, t_fail);
+    }).then(t_pass, t_fail);
+
+- name: 2d.shadow.pattern.transparent.2
+  desc: Shadows are not drawn for transparent parts of fill patterns
+  testing:
+  - 2d.shadow.render
+  images:
+  - redtransparent.png
+  code: |
+    var promise = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/redtransparent.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    promise.then(function(response) {
+        createImageBitmap(response).then(bitmap => {
+            var pattern = ctx.createPattern(bitmap, 'repeat');
+            ctx.fillStyle = '#f00';
+            ctx.fillRect(0, 0, 50, 50);
+            ctx.fillStyle = '#0f0';
+            ctx.fillRect(50, 0, 50, 50);
+            ctx.shadowOffsetY = 50;
+            ctx.shadowColor = '#0f0';
+            ctx.fillStyle = pattern;
+            ctx.fillRect(0, -50, 100, 50);
+            @assert pixel 25,25 == 0,255,0,255;
+            @assert pixel 50,25 == 0,255,0,255;
+            @assert pixel 75,25 == 0,255,0,255;
+        }, t_fail);
+    }).then(t_pass, t_fail);
+
+- name: 2d.shadow.pattern.alpha
+  desc: Shadows are drawn correctly for partially-transparent fill patterns
+  testing:
+  - 2d.shadow.render
+  images:
+  - transparent50.png
+  code: |
+    var promise = new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/transparent50.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+    promise.then(function(response) {
+        createImageBitmap(response).then(bitmap => {
+            var pattern = ctx.createPattern(bitmap, 'repeat');
+            ctx.fillStyle = '#f00';
+            ctx.fillRect(0, 0, 100, 50);
+            ctx.shadowOffsetY = 50;
+            ctx.shadowColor = '#00f';
+            ctx.fillStyle = pattern;
+            ctx.fillRect(0, -50, 100, 50);
+        }, t_fail);
+    }).then(t_pass, t_fail);
+
+- name: 2d.shadow.gradient.basic
+  desc: Shadows are drawn for gradient fills
+  testing:
+  - 2d.shadow.render
+  # http://bugs.webkit.org/show_bug.cgi?id=15266
+  code: |
+    var gradient = ctx.createLinearGradient(0, 0, 100, 0);
+    gradient.addColorStop(0, '#f00');
+    gradient.addColorStop(1, '#f00');
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.shadowColor = '#0f0';
+    ctx.shadowOffsetY = 50;
+    ctx.fillStyle = gradient;
+    ctx.fillRect(0, -50, 100, 50);
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.shadow.gradient.transparent.1
+  desc: Shadows are not drawn for transparent gradient fills
+  testing:
+  - 2d.shadow.render
+  # http://bugs.webkit.org/show_bug.cgi?id=15266
+  code: |
+    var gradient = ctx.createLinearGradient(0, 0, 100, 0);
+    gradient.addColorStop(0, 'rgba(0,0,0,0)');
+    gradient.addColorStop(1, 'rgba(0,0,0,0)');
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.shadowColor = '#f00';
+    ctx.shadowOffsetY = 50;
+    ctx.fillStyle = gradient;
+    ctx.fillRect(0, -50, 100, 50);
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.shadow.gradient.transparent.2
+  desc: Shadows are not drawn for transparent parts of gradient fills
+  testing:
+  - 2d.shadow.render
+  code: |
+    var gradient = ctx.createLinearGradient(0, 0, 100, 0);
+    gradient.addColorStop(0, '#f00');
+    gradient.addColorStop(0.499, '#f00');
+    gradient.addColorStop(0.5, 'rgba(0,0,0,0)');
+    gradient.addColorStop(1, 'rgba(0,0,0,0)');
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 50, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(50, 0, 50, 50);
+    ctx.shadowOffsetY = 50;
+    ctx.shadowColor = '#0f0';
+    ctx.fillStyle = gradient;
+    ctx.fillRect(0, -50, 100, 50);
+    @assert pixel 25,25 == 0,255,0,255;
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 75,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.shadow.gradient.alpha
+  desc: Shadows are drawn correctly for partially-transparent gradient fills
+  testing:
+  - 2d.shadow.render
+  code: |
+    var gradient = ctx.createLinearGradient(0, 0, 100, 0);
+    gradient.addColorStop(0, 'rgba(255,0,0,0.5)');
+    gradient.addColorStop(1, 'rgba(255,0,0,0.5)');
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.shadowOffsetY = 50;
+    ctx.shadowColor = '#00f';
+    ctx.fillStyle = gradient;
+    ctx.fillRect(0, -50, 100, 50);
+    @assert pixel 50,25 ==~ 127,0,127,255;
+    t.done();
+
+- name: 2d.shadow.transform.1
+  desc: Shadows take account of transformations
+  testing:
+  - 2d.shadow.render
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.shadowOffsetY = 50;
+    ctx.shadowColor = '#0f0';
+    ctx.translate(100, 100);
+    ctx.fillRect(-100, -150, 100, 50);
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.shadow.transform.2
+  desc: Shadow offsets are not affected by transformations
+  testing:
+  - 2d.shadow.render
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.shadowOffsetY = 50;
+    ctx.shadowColor = '#0f0';
+    ctx.rotate(Math.PI)
+    ctx.fillRect(-100, 0, 100, 50);
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.shadow.alpha.1
+  desc: Shadow colour alpha components are used
+  testing:
+  - 2d.shadow.render
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.shadowColor = 'rgba(255, 0, 0, 0.01)';
+    ctx.shadowOffsetY = 50;
+    ctx.fillRect(0, -50, 100, 50);
+    @assert pixel 50,25 ==~ 0,255,0,255 +/- 4;
+    t.done();
+
+- name: 2d.shadow.alpha.2
+  desc: Shadow colour alpha components are used
+  testing:
+  - 2d.shadow.render
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.shadowColor = 'rgba(0, 0, 255, 0.5)';
+    ctx.shadowOffsetY = 50;
+    ctx.fillRect(0, -50, 100, 50);
+    @assert pixel 50,25 ==~ 127,0,127,255;
+    t.done();
+
+- name: 2d.shadow.alpha.3
+  desc: Shadows are affected by globalAlpha
+  testing:
+  - 2d.shadow.render
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#f00'; // (work around broken Firefox globalAlpha caching)
+    ctx.shadowColor = '#00f';
+    ctx.shadowOffsetY = 50;
+    ctx.globalAlpha = 0.5;
+    ctx.fillRect(0, -50, 100, 50);
+    @assert pixel 50,25 ==~ 127,0,127,255;
+    t.done();
+
+- name: 2d.shadow.alpha.4
+  desc: Shadows with alpha components are correctly affected by globalAlpha
+  testing:
+  - 2d.shadow.render
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = '#f00'; // (work around broken Firefox globalAlpha caching)
+    ctx.shadowColor = 'rgba(0, 0, 255, 0.707)';
+    ctx.shadowOffsetY = 50;
+    ctx.globalAlpha = 0.707;
+    ctx.fillRect(0, -50, 100, 50);
+    @assert pixel 50,25 ==~ 127,0,127,255;
+    t.done();
+
+- name: 2d.shadow.alpha.5
+  desc: Shadows of shapes with alpha components are drawn correctly
+  testing:
+  - 2d.shadow.render
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = 'rgba(64, 0, 0, 0.5)';
+    ctx.shadowColor = '#00f';
+    ctx.shadowOffsetY = 50;
+    ctx.fillRect(0, -50, 100, 50);
+    @assert pixel 50,25 ==~ 127,0,127,255;
+    t.done();
+
+- name: 2d.shadow.composite.1
+  desc: Shadows are drawn using globalCompositeOperation
+  testing:
+  - 2d.shadow.render
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.globalCompositeOperation = 'xor';
+    ctx.shadowColor = '#f00';
+    ctx.shadowOffsetX = 100;
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(-100, 0, 200, 50);
+    @assert pixel 50,25 ==~ 0,255,0,255;
+    t.done();
+
+- name: 2d.shadow.composite.2
+  desc: Shadows are drawn using globalCompositeOperation
+  testing:
+  - 2d.shadow.render
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.globalCompositeOperation = 'xor';
+    ctx.shadowColor = '#f00';
+    ctx.shadowBlur = 1;
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(-10, -10, 120, 70);
+    @assert pixel 50,25 ==~ 0,255,0,255;
+    t.done();
+
+- name: 2d.shadow.composite.3
+  desc: Areas outside shadows are drawn correctly with destination-out
+  testing:
+  - 2d.shadow.render
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.globalCompositeOperation = 'destination-out';
+    ctx.shadowColor = '#f00';
+    ctx.shadowBlur = 10;
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(200, 0, 100, 50);
+    @assert pixel 5,5 ==~ 0,255,0,255;
+    @assert pixel 50,25 ==~ 0,255,0,255;
+    t.done();
+
diff --git a/tests/wpt/web-platform-tests/html/canvas/tools/tests2dtext.yaml b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/offscreen/text.yaml
similarity index 59%
rename from tests/wpt/web-platform-tests/html/canvas/tools/tests2dtext.yaml
rename to tests/wpt/web-platform-tests/html/canvas/tools/yaml/offscreen/text.yaml
index e1423284bd8..f9c09baf484 100644
--- a/tests/wpt/web-platform-tests/html/canvas/tools/tests2dtext.yaml
+++ b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/offscreen/text.yaml
@@ -1,33 +1,33 @@
-# Copyright (c) 2010 Philip Taylor
-# Released under the BSD license and W3C Test Suite License: see LICENSE.txt
-
 - name: 2d.text.font.parse.basic
   testing:
-    - 2d.text.font.parse
-    - 2d.text.font.get
+  - 2d.text.font.parse
+  - 2d.text.font.get
   code: |
     ctx.font = '20px serif';
     @assert ctx.font === '20px serif';
 
     ctx.font = '20PX   SERIF';
     @assert ctx.font === '20px serif'; @moz-todo
+    t.done();
 
 - name: 2d.text.font.parse.tiny
   testing:
-    - 2d.text.font.parse
-    - 2d.text.font.get
+  - 2d.text.font.parse
+  - 2d.text.font.get
   code: |
     ctx.font = '1px sans-serif';
     @assert ctx.font === '1px sans-serif';
+    t.done();
 
 - name: 2d.text.font.parse.complex
   testing:
-    - 2d.text.font.parse
-    - 2d.text.font.get
-    - 2d.text.font.lineheight
+  - 2d.text.font.parse
+  - 2d.text.font.get
+  - 2d.text.font.lineheight
   code: |
     ctx.font = 'small-caps italic 400 12px/2 Unknown Font, sans-serif';
     @assert ctx.font === 'italic small-caps 12px "Unknown Font", sans-serif'; @moz-todo
+    t.done();
 
   # TODO:
   #   2d.text.font.parse.size.absolute
@@ -39,41 +39,20 @@
   #   2d.text.font.parse.size.length.absolute
   #     in cm mm pt pc
 
-- name: 2d.text.font.parse.size.percentage
-  testing:
-    - 2d.text.font.parse
-    - 2d.text.font.get
-    - 2d.text.font.fontsize
-    - 2d.text.font.size
-  canvas: 'style="font-size: 144px" width="100" height="50"'
-  code: |
-    ctx.font = '50% serif';
-    @assert ctx.font === '72px serif'; @moz-todo
-    canvas.setAttribute('style', 'font-size: 100px');
-    @assert ctx.font === '72px serif'; @moz-todo
-
-- name: 2d.text.font.parse.size.percentage.default
-  testing:
-    - 2d.text.font.undefined
-  code: |
-    var canvas2 = document.createElement('canvas');
-    var ctx2 = canvas2.getContext('2d');
-    ctx2.font = '1000% serif';
-    @assert ctx2.font === '100px serif'; @moz-todo
-
 - name: 2d.text.font.parse.system
   desc: System fonts must be computed to explicit values
   testing:
-    - 2d.text.font.parse
-    - 2d.text.font.get
-    - 2d.text.font.systemfonts
+  - 2d.text.font.parse
+  - 2d.text.font.get
+  - 2d.text.font.systemfonts
   code: |
     ctx.font = 'message-box';
     @assert ctx.font !== 'message-box';
+    t.done();
 
 - name: 2d.text.font.parse.invalid
   testing:
-    - 2d.text.font.invalid
+  - 2d.text.font.invalid
   code: |
     ctx.font = '20px serif';
     @assert ctx.font === '20px serif';
@@ -109,26 +88,27 @@
     ctx.font = '20px serif';
     ctx.font = '1em serif; background: green; margin: 10px';
     @assert ctx.font === '20px serif';
+    t.done();
 
 - name: 2d.text.font.default
   testing:
-    - 2d.text.font.default
+  - 2d.text.font.default
   code: |
     @assert ctx.font === '10px sans-serif';
+    t.done();
 
 - name: 2d.text.font.relative_size
   testing:
-    - 2d.text.font.relative_size
+  - 2d.text.font.relative_size
   code: |
-    var canvas2 = document.createElement('canvas');
-    var ctx2 = canvas2.getContext('2d');
-    ctx2.font = '1em sans-serif';
-    @assert ctx2.font === '10px sans-serif';
+    ctx.font = '1em sans-serif';
+    @assert ctx.font === '10px sans-serif';
+    t.done();
 
 - name: 2d.text.align.valid
   testing:
-    - 2d.text.align.get
-    - 2d.text.align.set
+  - 2d.text.align.get
+  - 2d.text.align.set
   code: |
     ctx.textAlign = 'start';
     @assert ctx.textAlign === 'start';
@@ -144,10 +124,11 @@
 
     ctx.textAlign = 'center';
     @assert ctx.textAlign === 'center';
+    t.done();
 
 - name: 2d.text.align.invalid
   testing:
-    - 2d.text.align.invalid
+  - 2d.text.align.invalid
   code: |
     ctx.textAlign = 'start';
     ctx.textAlign = 'bogus';
@@ -164,18 +145,20 @@
     ctx.textAlign = 'start';
     ctx.textAlign = 'end\0';
     @assert ctx.textAlign === 'start';
+    t.done();
 
 - name: 2d.text.align.default
   testing:
-    - 2d.text.align.default
+  - 2d.text.align.default
   code: |
     @assert ctx.textAlign === 'start';
+    t.done();
 
 
 - name: 2d.text.baseline.valid
   testing:
-    - 2d.text.baseline.get
-    - 2d.text.baseline.set
+  - 2d.text.baseline.get
+  - 2d.text.baseline.set
   code: |
     ctx.textBaseline = 'top';
     @assert ctx.textBaseline === 'top';
@@ -194,10 +177,11 @@
 
     ctx.textBaseline = 'bottom';
     @assert ctx.textBaseline === 'bottom';
+    t.done();
 
 - name: 2d.text.baseline.invalid
   testing:
-    - 2d.text.baseline.invalid
+  - 2d.text.baseline.invalid
   code: |
     ctx.textBaseline = 'top';
     ctx.textBaseline = 'bogus';
@@ -214,23 +198,21 @@
     ctx.textBaseline = 'top';
     ctx.textBaseline = 'middle\0';
     @assert ctx.textBaseline === 'top';
+    t.done();
 
 - name: 2d.text.baseline.default
   testing:
-    - 2d.text.baseline.default
+  - 2d.text.baseline.default
   code: |
     @assert ctx.textBaseline === 'alphabetic';
-
-
-
-
+    t.done();
 
 - name: 2d.text.draw.fill.basic
   desc: fillText draws filled text
   manual:
   testing:
-    - 2d.text.draw
-    - 2d.text.draw.fill
+  - 2d.text.draw
+  - 2d.text.draw.fill
   code: |
     ctx.fillStyle = '#000';
     ctx.fillRect(0, 0, 100, 50);
@@ -238,6 +220,7 @@
     ctx.strokeStyle = '#f00';
     ctx.font = '35px Arial, sans-serif';
     ctx.fillText('PASS', 5, 35);
+    t.done();
   expected: &passfill |
     size 100 50
     cr.set_source_rgb(0, 0, 0)
@@ -253,7 +236,7 @@
 - name: 2d.text.draw.fill.unaffected
   desc: fillText does not start a new path or subpath
   testing:
-    - 2d.text.draw.fill
+  - 2d.text.draw.fill
   code: |
     ctx.fillStyle = '#f00';
     ctx.fillRect(0, 0, 100, 50);
@@ -271,13 +254,14 @@
 
     @assert pixel 50,25 == 0,255,0,255;
     @assert pixel 5,45 == 0,255,0,255;
+    t.done();
   expected: green
 
 - name: 2d.text.draw.fill.rtl
   desc: fillText respects Right-To-Left Override characters
   manual:
   testing:
-    - 2d.text.draw
+  - 2d.text.draw
   code: |
     ctx.fillStyle = '#000';
     ctx.fillRect(0, 0, 100, 50);
@@ -285,25 +269,25 @@
     ctx.strokeStyle = '#f00';
     ctx.font = '35px Arial, sans-serif';
     ctx.fillText('\u202eFAIL \xa0 \xa0 SSAP', 5, 35);
+    t.done();
   expected: *passfill
-
 - name: 2d.text.draw.fill.maxWidth.large
   desc: fillText handles maxWidth correctly
   manual:
   testing:
-    - 2d.text.draw.maxwidth
+  - 2d.text.draw.maxwidth
   code: |
     ctx.fillStyle = '#000';
     ctx.fillRect(0, 0, 100, 50);
     ctx.fillStyle = '#0f0';
     ctx.font = '35px Arial, sans-serif';
     ctx.fillText('PASS', 5, 35, 200);
+    t.done();
   expected: *passfill
-
 - name: 2d.text.draw.fill.maxWidth.small
   desc: fillText handles maxWidth correctly
   testing:
-    - 2d.text.draw.maxwidth
+  - 2d.text.draw.maxwidth
   code: |
     ctx.fillStyle = '#0f0';
     ctx.fillRect(0, 0, 100, 50);
@@ -311,12 +295,13 @@
     ctx.font = '35px Arial, sans-serif';
     ctx.fillText('fail fail fail fail fail', -100, 35, 90);
     _assertGreen(ctx, 100, 50);
+    t.done();
   expected: green
 
 - name: 2d.text.draw.fill.maxWidth.zero
   desc: fillText handles maxWidth correctly
   testing:
-    - 2d.text.draw.maxwidth
+  - 2d.text.draw.maxwidth
   code: |
     ctx.fillStyle = '#0f0';
     ctx.fillRect(0, 0, 100, 50);
@@ -324,12 +309,13 @@
     ctx.font = '35px Arial, sans-serif';
     ctx.fillText('fail fail fail fail fail', 5, 35, 0);
     _assertGreen(ctx, 100, 50);
+    t.done();
   expected: green
 
 - name: 2d.text.draw.fill.maxWidth.negative
   desc: fillText handles maxWidth correctly
   testing:
-    - 2d.text.draw.maxwidth
+  - 2d.text.draw.maxwidth
   code: |
     ctx.fillStyle = '#0f0';
     ctx.fillRect(0, 0, 100, 50);
@@ -337,12 +323,13 @@
     ctx.font = '35px Arial, sans-serif';
     ctx.fillText('fail fail fail fail fail', 5, 35, -1);
     _assertGreen(ctx, 100, 50);
+    t.done();
   expected: green
 
 - name: 2d.text.draw.fill.maxWidth.NaN
   desc: fillText handles maxWidth correctly
   testing:
-    - 2d.text.draw.maxwidth
+  - 2d.text.draw.maxwidth
   code: |
     ctx.fillStyle = '#0f0';
     ctx.fillRect(0, 0, 100, 50);
@@ -350,14 +337,15 @@
     ctx.font = '35px Arial, sans-serif';
     ctx.fillText('fail fail fail fail fail', 5, 35, NaN);
     _assertGreen(ctx, 100, 50);
+    t.done();
   expected: green
 
 - name: 2d.text.draw.stroke.basic
   desc: strokeText draws stroked text
   manual:
   testing:
-    - 2d.text.draw
-    - 2d.text.draw.stroke
+  - 2d.text.draw
+  - 2d.text.draw.stroke
   code: |
     ctx.fillStyle = '#000';
     ctx.fillRect(0, 0, 100, 50);
@@ -366,6 +354,7 @@
     ctx.lineWidth = 1;
     ctx.font = '35px Arial, sans-serif';
     ctx.strokeText('PASS', 5, 35);
+    t.done();
   expected: |
     size 100 50
     cr.set_source_rgb(0, 0, 0)
@@ -382,7 +371,7 @@
 - name: 2d.text.draw.stroke.unaffected
   desc: strokeText does not start a new path or subpath
   testing:
-    - 2d.text.draw.stroke
+  - 2d.text.draw.stroke
   code: |
     ctx.fillStyle = '#f00';
     ctx.fillRect(0, 0, 100, 50);
@@ -401,13 +390,14 @@
 
     @assert pixel 50,25 == 0,255,0,255;
     @assert pixel 5,45 == 0,255,0,255;
+    t.done();
   expected: green
 
 - name: 2d.text.draw.kern.consistent
   desc: Stroked and filled text should have exactly the same kerning so it overlaps
   manual:
   testing:
-    - 2d.text.draw
+  - 2d.text.draw
   code: |
     ctx.fillStyle = '#0f0';
     ctx.fillRect(0, 0, 100, 50);
@@ -419,6 +409,7 @@
     ctx.fillText('ToToToToToToTo', -50, 45);
     ctx.strokeText('VAVAVAVAVAVAVA', -50, 25);
     ctx.strokeText('ToToToToToToTo', -50, 45);
+    t.done();
   expected: green
 
 # CanvasTest is:
@@ -436,19 +427,19 @@
 # Mathematical baseline is 0.375em above alphabetic
 # Hanging baseline      is 0.500em above alphabetic
 
-# WebKit doesn't block onload on font loads, so we try to make it a bit more reliable
-# by waiting with step_timeout after load before drawing
-
 - name: 2d.text.draw.fill.maxWidth.fontface
   desc: fillText works on @font-face fonts
   testing:
-    - 2d.text.draw.maxwidth
+  - 2d.text.draw.maxwidth
   fonts:
-    - CanvasTest
+  - CanvasTest
   code: |
-    ctx.font = '50px CanvasTest';
-    deferTest();
-    step_timeout(t.step_func_done(function () {
+    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
+    let fonts = (self.fonts ? self.fonts : document.fonts);
+    f.load();
+    fonts.add(f);
+    fonts.ready.then(function() {
+        ctx.font = '50px CanvasTest';
         ctx.fillStyle = '#0f0';
         ctx.fillRect(0, 0, 100, 50);
         ctx.fillStyle = '#f00';
@@ -457,19 +448,22 @@
         @assert pixel 95,5 ==~ 0,255,0,255;
         @assert pixel 25,25 ==~ 0,255,0,255;
         @assert pixel 75,25 ==~ 0,255,0,255;
-    }), 500);
+      }).then(t_pass, t_fail);
   expected: green
 
 - name: 2d.text.draw.fill.maxWidth.bound
   desc: fillText handles maxWidth based on line size, not bounding box size
   testing:
-    - 2d.text.draw.maxwidth
+  - 2d.text.draw.maxwidth
   fonts:
-    - CanvasTest
+  - CanvasTest
   code: |
-    ctx.font = '50px CanvasTest';
-    deferTest();
-    step_timeout(t.step_func_done(function () {
+    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
+    let fonts = (self.fonts ? self.fonts : document.fonts);
+    f.load();
+    fonts.add(f);
+    fonts.ready.then(function() {
+        ctx.font = '50px CanvasTest';
         ctx.fillStyle = '#f00';
         ctx.fillRect(0, 0, 100, 50);
         ctx.fillStyle = '#0f0';
@@ -478,18 +472,21 @@
         @assert pixel 95,5 ==~ 0,255,0,255;
         @assert pixel 25,25 ==~ 0,255,0,255;
         @assert pixel 75,25 ==~ 0,255,0,255;
-    }), 500);
+      }).then(t_pass, t_fail);
   expected: green
 
 - name: 2d.text.draw.fontface
   testing:
-    - 2d.text.font.fontface
+  - 2d.text.font.fontface
   fonts:
-    - CanvasTest
+  - CanvasTest
   code: |
-    ctx.font = '67px CanvasTest';
-    deferTest();
-    step_timeout(t.step_func_done(function () {
+    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
+    let fonts = (self.fonts ? self.fonts : document.fonts);
+    f.load();
+    fonts.add(f);
+    fonts.ready.then(function() {
+        ctx.font = '67px CanvasTest';
         ctx.fillStyle = '#f00';
         ctx.fillRect(0, 0, 100, 50);
         ctx.fillStyle = '#0f0';
@@ -498,43 +495,50 @@
         @assert pixel 95,5 ==~ 0,255,0,255;
         @assert pixel 25,25 ==~ 0,255,0,255;
         @assert pixel 75,25 ==~ 0,255,0,255;
-    }), 500);
+      }).then(t_pass, t_fail);
   expected: green
 
 - name: 2d.text.draw.fontface.repeat
-  desc: Draw with the font immediately, then wait a bit until and draw again. (This crashes some version of WebKit.)
+  desc: Draw with the font immediately, then wait a bit until and draw again. (This
+    crashes some version of WebKit.)
   testing:
-    - 2d.text.font.fontface
+  - 2d.text.font.fontface
   fonts:
-    - CanvasTest
+  - CanvasTest
   fonthack: 0
   code: |
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, 100, 50);
-    ctx.font = '67px CanvasTest';
-    ctx.fillStyle = '#0f0';
-    ctx.fillText('AA', 0, 50);
-    deferTest();
-    step_timeout(t.step_func_done(function () {
+    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
+    let fonts = (self.fonts ? self.fonts : document.fonts);
+    f.load();
+    fonts.add(f);
+    fonts.ready.then(function() {
+        ctx.fillStyle = '#f00';
+        ctx.fillRect(0, 0, 100, 50);
+        ctx.font = '67px CanvasTest';
+        ctx.fillStyle = '#0f0';
+        ctx.fillText('AA', 0, 50);
         ctx.fillText('AA', 0, 50);
         @assert pixel 5,5 ==~ 0,255,0,255;
         @assert pixel 95,5 ==~ 0,255,0,255;
         @assert pixel 25,25 ==~ 0,255,0,255;
         @assert pixel 75,25 ==~ 0,255,0,255;
-    }), 500);
+      }).then(t_pass, t_fail);
   expected: green
 
 - name: 2d.text.draw.fontface.notinpage
-  desc: "@font-face fonts should work even if they are not used in the page"
+  desc: '@font-face fonts should work even if they are not used in the page'
   testing:
-    - 2d.text.font.fontface
+  - 2d.text.font.fontface
   fonts:
-    - CanvasTest
+  - CanvasTest
   fonthack: 0
   code: |
-    ctx.font = '67px CanvasTest';
-    deferTest();
-    step_timeout(t.step_func_done(function () {
+    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
+    let fonts = (self.fonts ? self.fonts : document.fonts);
+    f.load();
+    fonts.add(f);
+    fonts.ready.then(function() {
+        ctx.font = '67px CanvasTest';
         ctx.fillStyle = '#f00';
         ctx.fillRect(0, 0, 100, 50);
         ctx.fillStyle = '#0f0';
@@ -543,19 +547,22 @@
         @assert pixel 95,5 ==~ 0,255,0,255; @moz-todo
         @assert pixel 25,25 ==~ 0,255,0,255; @moz-todo
         @assert pixel 75,25 ==~ 0,255,0,255; @moz-todo
-    }), 500);
+      }).then(t_pass, t_fail);
   expected: green
 
 - name: 2d.text.draw.baseline.top
   desc: textBaseline top is the top of the em square (not the bounding box)
   testing:
-    - 2d.text.baseline.top
+  - 2d.text.baseline.top
   fonts:
-    - CanvasTest
+  - CanvasTest
   code: |
-    ctx.font = '50px CanvasTest';
-    deferTest();
-    step_timeout(t.step_func_done(function () {
+    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
+    let fonts = (self.fonts ? self.fonts : document.fonts);
+    f.load();
+    fonts.add(f);
+    fonts.ready.then(function() {
+        ctx.font = '50px CanvasTest';
         ctx.fillStyle = '#f00';
         ctx.fillRect(0, 0, 100, 50);
         ctx.fillStyle = '#0f0';
@@ -567,19 +574,22 @@
         @assert pixel 75,25 ==~ 0,255,0,255;
         @assert pixel 5,45 ==~ 0,255,0,255;
         @assert pixel 95,45 ==~ 0,255,0,255;
-    }), 500);
+      }).then(t_pass, t_fail);
   expected: green
 
 - name: 2d.text.draw.baseline.bottom
   desc: textBaseline bottom is the bottom of the em square (not the bounding box)
   testing:
-    - 2d.text.baseline.bottom
+  - 2d.text.baseline.bottom
   fonts:
-    - CanvasTest
+  - CanvasTest
   code: |
-    ctx.font = '50px CanvasTest';
-    deferTest();
-    step_timeout(t.step_func_done(function () {
+    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
+    let fonts = (self.fonts ? self.fonts : document.fonts);
+    f.load();
+    fonts.add(f);
+    fonts.ready.then(function() {
+        ctx.font = '50px CanvasTest';
         ctx.fillStyle = '#f00';
         ctx.fillRect(0, 0, 100, 50);
         ctx.fillStyle = '#0f0';
@@ -591,19 +601,22 @@
         @assert pixel 75,25 ==~ 0,255,0,255;
         @assert pixel 5,45 ==~ 0,255,0,255;
         @assert pixel 95,45 ==~ 0,255,0,255;
-    }), 500);
+      }).then(t_pass, t_fail);
   expected: green
 
 - name: 2d.text.draw.baseline.middle
   desc: textBaseline middle is the middle of the em square (not the bounding box)
   testing:
-    - 2d.text.baseline.middle
+  - 2d.text.baseline.middle
   fonts:
-    - CanvasTest
+  - CanvasTest
   code: |
-    ctx.font = '50px CanvasTest';
-    deferTest();
-    step_timeout(t.step_func_done(function () {
+    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
+    let fonts = (self.fonts ? self.fonts : document.fonts);
+    f.load();
+    fonts.add(f);
+    fonts.ready.then(function() {
+        ctx.font = '50px CanvasTest';
         ctx.fillStyle = '#f00';
         ctx.fillRect(0, 0, 100, 50);
         ctx.fillStyle = '#0f0';
@@ -615,18 +628,21 @@
         @assert pixel 75,25 ==~ 0,255,0,255;
         @assert pixel 5,45 ==~ 0,255,0,255;
         @assert pixel 95,45 ==~ 0,255,0,255;
-    }), 500);
+      }).then(t_pass, t_fail);
   expected: green
 
 - name: 2d.text.draw.baseline.alphabetic
   testing:
-    - 2d.text.baseline.alphabetic
+  - 2d.text.baseline.alphabetic
   fonts:
-    - CanvasTest
+  - CanvasTest
   code: |
-    ctx.font = '50px CanvasTest';
-    deferTest();
-    step_timeout(t.step_func_done(function () {
+    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
+    let fonts = (self.fonts ? self.fonts : document.fonts);
+    f.load();
+    fonts.add(f);
+    fonts.ready.then(function() {
+        ctx.font = '50px CanvasTest';
         ctx.fillStyle = '#f00';
         ctx.fillRect(0, 0, 100, 50);
         ctx.fillStyle = '#0f0';
@@ -638,18 +654,21 @@
         @assert pixel 75,25 ==~ 0,255,0,255;
         @assert pixel 5,45 ==~ 0,255,0,255;
         @assert pixel 95,45 ==~ 0,255,0,255;
-    }), 500);
+      }).then(t_pass, t_fail);
   expected: green
 
 - name: 2d.text.draw.baseline.ideographic
   testing:
-    - 2d.text.baseline.ideographic
+  - 2d.text.baseline.ideographic
   fonts:
-    - CanvasTest
+  - CanvasTest
   code: |
-    ctx.font = '50px CanvasTest';
-    deferTest();
-    step_timeout(t.step_func_done(function () {
+    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
+    let fonts = (self.fonts ? self.fonts : document.fonts);
+    f.load();
+    fonts.add(f);
+    fonts.ready.then(function() {
+        ctx.font = '50px CanvasTest';
         ctx.fillStyle = '#f00';
         ctx.fillRect(0, 0, 100, 50);
         ctx.fillStyle = '#0f0';
@@ -661,18 +680,21 @@
         @assert pixel 75,25 ==~ 0,255,0,255;
         @assert pixel 5,45 ==~ 0,255,0,255; @moz-todo
         @assert pixel 95,45 ==~ 0,255,0,255; @moz-todo
-    }), 500);
+      }).then(t_pass, t_fail);
   expected: green
 
 - name: 2d.text.draw.baseline.hanging
   testing:
-    - 2d.text.baseline.hanging
+  - 2d.text.baseline.hanging
   fonts:
-    - CanvasTest
+  - CanvasTest
   code: |
-    ctx.font = '50px CanvasTest';
-    deferTest();
-    step_timeout(t.step_func_done(function () {
+    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
+    let fonts = (self.fonts ? self.fonts : document.fonts);
+    f.load();
+    fonts.add(f);
+    fonts.ready.then(function() {
+        ctx.font = '50px CanvasTest';
         ctx.fillStyle = '#f00';
         ctx.fillRect(0, 0, 100, 50);
         ctx.fillStyle = '#0f0';
@@ -684,19 +706,22 @@
         @assert pixel 75,25 ==~ 0,255,0,255;
         @assert pixel 5,45 ==~ 0,255,0,255;
         @assert pixel 95,45 ==~ 0,255,0,255;
-    }), 500);
+      }).then(t_pass, t_fail);
   expected: green
 
 - name: 2d.text.draw.align.left
   desc: textAlign left is the left of the first em square (not the bounding box)
   testing:
-    - 2d.text.align.left
+  - 2d.text.align.left
   fonts:
-    - CanvasTest
+  - CanvasTest
   code: |
-    ctx.font = '50px CanvasTest';
-    deferTest();
-    step_timeout(t.step_func_done(function () {
+    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
+    let fonts = (self.fonts ? self.fonts : document.fonts);
+    f.load();
+    fonts.add(f);
+    fonts.ready.then(function() {
+        ctx.font = '50px CanvasTest';
         ctx.fillStyle = '#f00';
         ctx.fillRect(0, 0, 100, 50);
         ctx.fillStyle = '#0f0';
@@ -708,19 +733,22 @@
         @assert pixel 75,25 ==~ 0,255,0,255;
         @assert pixel 5,45 ==~ 0,255,0,255;
         @assert pixel 95,45 ==~ 0,255,0,255;
-    }), 500);
+      }).then(t_pass, t_fail);
   expected: green
 
 - name: 2d.text.draw.align.right
   desc: textAlign right is the right of the last em square (not the bounding box)
   testing:
-    - 2d.text.align.right
+  - 2d.text.align.right
   fonts:
-    - CanvasTest
+  - CanvasTest
   code: |
-    ctx.font = '50px CanvasTest';
-    deferTest();
-    step_timeout(t.step_func_done(function () {
+    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
+    let fonts = (self.fonts ? self.fonts : document.fonts);
+    f.load();
+    fonts.add(f);
+    fonts.ready.then(function() {
+        ctx.font = '50px CanvasTest';
         ctx.fillStyle = '#f00';
         ctx.fillRect(0, 0, 100, 50);
         ctx.fillStyle = '#0f0';
@@ -732,20 +760,23 @@
         @assert pixel 75,25 ==~ 0,255,0,255;
         @assert pixel 5,45 ==~ 0,255,0,255;
         @assert pixel 95,45 ==~ 0,255,0,255;
-    }), 500);
+      }).then(t_pass, t_fail);
   expected: green
 
 - name: 2d.text.draw.align.start.ltr
   desc: textAlign start with ltr is the left edge
   testing:
-    - 2d.text.align.left
+  - 2d.text.align.left
   fonts:
-    - CanvasTest
+  - CanvasTest
   canvas: width="100" height="50" dir="ltr"
   code: |
-    ctx.font = '50px CanvasTest';
-    deferTest();
-    step_timeout(t.step_func_done(function () {
+    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
+    let fonts = (self.fonts ? self.fonts : document.fonts);
+    f.load();
+    fonts.add(f);
+    fonts.ready.then(function() {
+        ctx.font = '50px CanvasTest';
         ctx.fillStyle = '#f00';
         ctx.fillRect(0, 0, 100, 50);
         ctx.fillStyle = '#0f0';
@@ -757,21 +788,24 @@
         @assert pixel 75,25 ==~ 0,255,0,255;
         @assert pixel 5,45 ==~ 0,255,0,255;
         @assert pixel 95,45 ==~ 0,255,0,255;
-    }), 500);
+      }).then(t_pass, t_fail);
   expected: green
 
 - name: 2d.text.draw.align.start.rtl
   desc: textAlign start with rtl is the right edge
   testing:
-    - 2d.text.align.right
-    - 2d.text.draw.direction
+  - 2d.text.align.right
+  - 2d.text.draw.direction
   fonts:
-    - CanvasTest
+  - CanvasTest
   canvas: width="100" height="50" dir="rtl"
   code: |
-    ctx.font = '50px CanvasTest';
-    deferTest();
-    step_timeout(t.step_func_done(function () {
+    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
+    let fonts = (self.fonts ? self.fonts : document.fonts);
+    f.load();
+    fonts.add(f);
+    fonts.ready.then(function() {
+        ctx.font = '50px CanvasTest';
         ctx.fillStyle = '#f00';
         ctx.fillRect(0, 0, 100, 50);
         ctx.fillStyle = '#0f0';
@@ -783,20 +817,23 @@
         @assert pixel 75,25 ==~ 0,255,0,255;
         @assert pixel 5,45 ==~ 0,255,0,255;
         @assert pixel 95,45 ==~ 0,255,0,255;
-    }), 500);
+      }).then(t_pass, t_fail);
   expected: green
 
 - name: 2d.text.draw.align.end.ltr
   desc: textAlign end with ltr is the right edge
   testing:
-    - 2d.text.align.right
+  - 2d.text.align.right
   fonts:
-    - CanvasTest
+  - CanvasTest
   canvas: width="100" height="50" dir="ltr"
   code: |
-    ctx.font = '50px CanvasTest';
-    deferTest();
-    step_timeout(t.step_func_done(function () {
+    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
+    let fonts = (self.fonts ? self.fonts : document.fonts);
+    f.load();
+    fonts.add(f);
+    fonts.ready.then(function() {
+        ctx.font = '50px CanvasTest';
         ctx.fillStyle = '#f00';
         ctx.fillRect(0, 0, 100, 50);
         ctx.fillStyle = '#0f0';
@@ -808,21 +845,24 @@
         @assert pixel 75,25 ==~ 0,255,0,255;
         @assert pixel 5,45 ==~ 0,255,0,255;
         @assert pixel 95,45 ==~ 0,255,0,255;
-    }), 500);
+      }).then(t_pass, t_fail);
   expected: green
 
 - name: 2d.text.draw.align.end.rtl
   desc: textAlign end with rtl is the left edge
   testing:
-    - 2d.text.align.left
-    - 2d.text.draw.direction
+  - 2d.text.align.left
+  - 2d.text.draw.direction
   fonts:
-    - CanvasTest
+  - CanvasTest
   canvas: width="100" height="50" dir="rtl"
   code: |
-    ctx.font = '50px CanvasTest';
-    deferTest();
-    step_timeout(t.step_func_done(function () {
+    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
+    let fonts = (self.fonts ? self.fonts : document.fonts);
+    f.load();
+    fonts.add(f);
+    fonts.ready.then(function() {
+        ctx.font = '50px CanvasTest';
         ctx.fillStyle = '#f00';
         ctx.fillRect(0, 0, 100, 50);
         ctx.fillStyle = '#0f0';
@@ -834,19 +874,22 @@
         @assert pixel 75,25 ==~ 0,255,0,255;
         @assert pixel 5,45 ==~ 0,255,0,255;
         @assert pixel 95,45 ==~ 0,255,0,255;
-    }), 500);
+      }).then(t_pass, t_fail);
   expected: green
 
 - name: 2d.text.draw.align.center
   desc: textAlign center is the center of the em squares (not the bounding box)
   testing:
-    - 2d.text.align.center
+  - 2d.text.align.center
   fonts:
-    - CanvasTest
+  - CanvasTest
   code: |
-    ctx.font = '50px CanvasTest';
-    deferTest();
-    step_timeout(t.step_func_done(function () {
+    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
+    let fonts = (self.fonts ? self.fonts : document.fonts);
+    f.load();
+    fonts.add(f);
+    fonts.ready.then(function() {
+        ctx.font = '50px CanvasTest';
         ctx.fillStyle = '#f00';
         ctx.fillRect(0, 0, 100, 50);
         ctx.fillStyle = '#0f0';
@@ -858,115 +901,133 @@
         @assert pixel 75,25 ==~ 0,255,0,255;
         @assert pixel 5,45 ==~ 0,255,0,255;
         @assert pixel 95,45 ==~ 0,255,0,255;
-    }), 500);
+      }).then(t_pass, t_fail);
   expected: green
 
 
 - name: 2d.text.draw.space.basic
   desc: U+0020 is rendered the correct size (1em wide)
   testing:
-    - 2d.text.draw.spaces
+  - 2d.text.draw.spaces
   fonts:
-    - CanvasTest
+  - CanvasTest
   code: |
-    ctx.font = '50px CanvasTest';
-    deferTest();
-    step_timeout(t.step_func_done(function () {
+    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
+    let fonts = (self.fonts ? self.fonts : document.fonts);
+    f.load();
+    fonts.add(f);
+    fonts.ready.then(function() {
+        ctx.font = '50px CanvasTest';
         ctx.fillStyle = '#f00';
         ctx.fillRect(0, 0, 100, 50);
         ctx.fillStyle = '#0f0';
         ctx.fillText('E EE', -100, 37.5);
         @assert pixel 25,25 ==~ 0,255,0,255;
         @assert pixel 75,25 ==~ 0,255,0,255;
-    }), 500);
+      }).then(t_pass, t_fail);
   expected: green
 
 - name: 2d.text.draw.space.collapse.space
   desc: Space characters are converted to U+0020, and collapsed (per CSS)
   testing:
-    - 2d.text.draw.spaces
+  - 2d.text.draw.spaces
   fonts:
-    - CanvasTest
+  - CanvasTest
   code: |
-    ctx.font = '50px CanvasTest';
-    deferTest();
-    step_timeout(t.step_func_done(function () {
+    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
+    let fonts = (self.fonts ? self.fonts : document.fonts);
+    f.load();
+    fonts.add(f);
+    fonts.ready.then(function() {
+        ctx.font = '50px CanvasTest';
         ctx.fillStyle = '#f00';
         ctx.fillRect(0, 0, 100, 50);
         ctx.fillStyle = '#0f0';
         ctx.fillText('E  EE', -100, 37.5);
         @assert pixel 25,25 ==~ 0,255,0,255; @moz-todo
         @assert pixel 75,25 ==~ 0,255,0,255;
-    }), 500);
+      }).then(t_pass, t_fail);
   expected: green
 
 - name: 2d.text.draw.space.collapse.other
   desc: Space characters are converted to U+0020, and collapsed (per CSS)
   testing:
-    - 2d.text.draw.spaces
+  - 2d.text.draw.spaces
   fonts:
-    - CanvasTest
+  - CanvasTest
   code: |
-    ctx.font = '50px CanvasTest';
-    deferTest();
-    step_timeout(t.step_func_done(function () {
+    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
+    let fonts = (self.fonts ? self.fonts : document.fonts);
+    f.load();
+    fonts.add(f);
+    fonts.ready.then(function() {
+        ctx.font = '50px CanvasTest';
         ctx.fillStyle = '#f00';
         ctx.fillRect(0, 0, 100, 50);
         ctx.fillStyle = '#0f0';
         ctx.fillText('E \x09\x0a\x0c\x0d  \x09\x0a\x0c\x0dEE', -100, 37.5);
         @assert pixel 25,25 ==~ 0,255,0,255; @moz-todo
         @assert pixel 75,25 ==~ 0,255,0,255; @moz-todo
-    }), 500);
+      }).then(t_pass, t_fail);
   expected: green
 
 - name: 2d.text.draw.space.collapse.nonspace
   desc: Non-space characters are not converted to U+0020 and collapsed
   testing:
-    - 2d.text.draw.spaces
+  - 2d.text.draw.spaces
   fonts:
-    - CanvasTest
+  - CanvasTest
   code: |
-    ctx.font = '50px CanvasTest';
-    deferTest();
-    step_timeout(t.step_func_done(function () {
+    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
+    let fonts = (self.fonts ? self.fonts : document.fonts);
+    f.load();
+    fonts.add(f);
+    fonts.ready.then(function() {
+        ctx.font = '50px CanvasTest';
         ctx.fillStyle = '#f00';
         ctx.fillRect(0, 0, 100, 50);
         ctx.fillStyle = '#0f0';
         ctx.fillText('E\x0b EE', -150, 37.5);
         @assert pixel 25,25 ==~ 0,255,0,255;
         @assert pixel 75,25 ==~ 0,255,0,255;
-    }), 500);
+      }).then(t_pass, t_fail);
   expected: green
 
 - name: 2d.text.draw.space.collapse.start
   desc: Space characters at the start of a line are collapsed (per CSS)
   testing:
-    - 2d.text.draw.spaces
+  - 2d.text.draw.spaces
   fonts:
-    - CanvasTest
+  - CanvasTest
   code: |
-    ctx.font = '50px CanvasTest';
-    deferTest();
-    step_timeout(t.step_func_done(function () {
+    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
+    let fonts = (self.fonts ? self.fonts : document.fonts);
+    f.load();
+    fonts.add(f);
+    fonts.ready.then(function() {
+        ctx.font = '50px CanvasTest';
         ctx.fillStyle = '#f00';
         ctx.fillRect(0, 0, 100, 50);
         ctx.fillStyle = '#0f0';
         ctx.fillText(' EE', 0, 37.5);
         @assert pixel 25,25 ==~ 0,255,0,255; @moz-todo
         @assert pixel 75,25 ==~ 0,255,0,255;
-    }), 500);
+      }).then(t_pass, t_fail);
   expected: green
 
 - name: 2d.text.draw.space.collapse.end
   desc: Space characters at the end of a line are collapsed (per CSS)
   testing:
-    - 2d.text.draw.spaces
+  - 2d.text.draw.spaces
   fonts:
-    - CanvasTest
+  - CanvasTest
   code: |
-    ctx.font = '50px CanvasTest';
-    deferTest();
-    step_timeout(t.step_func_done(function () {
+    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
+    let fonts = (self.fonts ? self.fonts : document.fonts);
+    f.load();
+    fonts.add(f);
+    fonts.ready.then(function() {
+        ctx.font = '50px CanvasTest';
         ctx.fillStyle = '#f00';
         ctx.fillRect(0, 0, 100, 50);
         ctx.fillStyle = '#0f0';
@@ -974,206 +1035,193 @@
         ctx.fillText('EE ', 100, 37.5);
         @assert pixel 25,25 ==~ 0,255,0,255;
         @assert pixel 75,25 ==~ 0,255,0,255; @moz-todo
-    }), 500);
+      }).then(t_pass, t_fail);
   expected: green
 
-
 - name: 2d.text.measure.width.basic
-  desc: The width of character is same as font used
+  desc: The width of character is same as font used for OffscreenCanvas
   testing:
-    - 2d.text.measure
+  - 2d.text.measure
   fonts:
-    - CanvasTest
+  - CanvasTest
   code: |
-    deferTest();
-    var f = new FontFace("CanvasTest", "/fonts/CanvasTest.ttf");
-    document.fonts.add(f);
-    document.fonts.ready.then(() => {
-        step_timeout(t.step_func_done(function () {
-            ctx.font = '50px CanvasTest';
-            @assert ctx.measureText('A').width === 50;
-            @assert ctx.measureText('AA').width === 100;
-            @assert ctx.measureText('ABCD').width === 200;
+    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
+    let fonts = (self.fonts ? self.fonts : document.fonts);
+    f.load();
+    fonts.add(f);
+    fonts.ready.then(function() {
+        ctx.font = '50px CanvasTest';
+        @assert ctx.measureText('A').width === 50;
+        @assert ctx.measureText('AA').width === 100;
+        @assert ctx.measureText('ABCD').width === 200;
 
-            ctx.font = '100px CanvasTest';
-            @assert ctx.measureText('A').width === 100;
-        }), 500);
-    });
+        ctx.font = '100px CanvasTest';
+        @assert ctx.measureText('A').width === 100;
+    }).then(t_pass, t_fail);
 
 - name: 2d.text.measure.width.empty
-  desc: The empty string has zero width
+  desc: The empty string has zero width for OffscreenCanvas
   testing:
-    - 2d.text.measure
+  - 2d.text.measure
   fonts:
-    - CanvasTest
+  - CanvasTest
   code: |
-    deferTest();
-    var f = new FontFace("CanvasTest", "/fonts/CanvasTest.ttf");
-    document.fonts.add(f);
-    document.fonts.ready.then(() => {
-        step_timeout(t.step_func_done(function () {
-            ctx.font = '50px CanvasTest';
-            @assert ctx.measureText("").width === 0;
-        }), 500);
-    });
+    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
+    let fonts = (self.fonts ? self.fonts : document.fonts);
+    f.load();
+    fonts.add(f);
+    fonts.ready.then(function() {
+        ctx.font = '50px CanvasTest';
+        @assert ctx.measureText("").width === 0;
+    }).then(t_pass, t_fail);
 
 - name: 2d.text.measure.width.space
-  desc: Space characters are converted to U+0020 and collapsed (per CSS)
+  desc: Space characters are converted to U+0020 and collapsed (per CSS) for OffscreenCanvas
   testing:
-    - 2d.text.measure.spaces
+  - 2d.text.measure.spaces
   fonts:
-    - CanvasTest
+  - CanvasTest
   code: |
-    deferTest();
-    var f = new FontFace("CanvasTest", "/fonts/CanvasTest.ttf");
-    document.fonts.add(f);
-    document.fonts.ready.then(() => {
-        step_timeout(t.step_func_done(function () {
-            ctx.font = '50px CanvasTest';
-            @assert ctx.measureText('A B').width === 150;
-            @assert ctx.measureText('A  B').width === 150; @moz-todo
-            @assert ctx.measureText('A \x09\x0a\x0c\x0d  \x09\x0a\x0c\x0dB').width === 150; @moz-todo
-            @assert ctx.measureText('A \x0b B').width >= 200;
+    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
+    let fonts = (self.fonts ? self.fonts : document.fonts);
+    f.load();
+    fonts.add(f);
+    fonts.ready.then(function() {
+        ctx.font = '50px CanvasTest';
+        @assert ctx.measureText('A B').width === 150;
+        @assert ctx.measureText('A  B').width === 150; @moz-todo
+        @assert ctx.measureText('A \x09\x0a\x0c\x0d  \x09\x0a\x0c\x0dB').width === 150; @moz-todo
+        @assert ctx.measureText('A \x0b B').width >= 200;
 
-            @assert ctx.measureText(' AB').width === 100; @moz-todo
-            @assert ctx.measureText('AB ').width === 100; @moz-todo
-        }), 500);
-    });
+        @assert ctx.measureText(' AB').width === 100; @moz-todo
+        @assert ctx.measureText('AB ').width === 100; @moz-todo
+    }).then(t_pass, t_fail);
 
 - name: 2d.text.measure.advances
-  desc: Testing width advances
+  desc: Testing width advances for OffscreenCanvas
   testing:
-    - 2d.text.measure.advances
+  - 2d.text.measure.advances
   fonts:
-    - CanvasTest
+  - CanvasTest
   code: |
-    deferTest();
-    var f = new FontFace("CanvasTest", "/fonts/CanvasTest.ttf");
-    document.fonts.add(f);
-    document.fonts.ready.then(() => {
-        step_timeout(t.step_func_done(function () {
-            ctx.font = '50px CanvasTest';
-            ctx.direction = 'ltr';
-            ctx.align = 'left'
-            // Some platforms may return '-0'.
-            @assert Math.abs(ctx.measureText('Hello').advances[0]) === 0;
-            // Different platforms may render text slightly different.
-            @assert ctx.measureText('Hello').advances[1] >= 36;
-            @assert ctx.measureText('Hello').advances[2] >= 58;
-            @assert ctx.measureText('Hello').advances[3] >= 70;
-            @assert ctx.measureText('Hello').advances[4] >= 80;
+    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
+    let fonts = (self.fonts ? self.fonts : document.fonts);
+    f.load();
+    fonts.add(f);
+    fonts.ready.then(function() {
+        ctx.font = '50px CanvasTest';
+        ctx.direction = 'ltr';
+        ctx.align = 'left'
+        // Some platforms may return '-0'.
+        @assert Math.abs(ctx.measureText('Hello').advances[0]) === 0;
+        // Different platforms may render text slightly different.
+        @assert ctx.measureText('Hello').advances[1] >= 36;
+        @assert ctx.measureText('Hello').advances[2] >= 58;
+        @assert ctx.measureText('Hello').advances[3] >= 70;
+        @assert ctx.measureText('Hello').advances[4] >= 80;
 
-            var tm = ctx.measureText('Hello');
-            @assert ctx.measureText('Hello').advances[0] === tm.advances[0];
-            @assert ctx.measureText('Hello').advances[1] === tm.advances[1];
-            @assert ctx.measureText('Hello').advances[2] === tm.advances[2];
-            @assert ctx.measureText('Hello').advances[3] === tm.advances[3];
-            @assert ctx.measureText('Hello').advances[4] === tm.advances[4];
-        }), 500);
-    });
+        var tm = ctx.measureText('Hello');
+        @assert ctx.measureText('Hello').advances[0] === tm.advances[0];
+        @assert ctx.measureText('Hello').advances[1] === tm.advances[1];
+        @assert ctx.measureText('Hello').advances[2] === tm.advances[2];
+        @assert ctx.measureText('Hello').advances[3] === tm.advances[3];
+        @assert ctx.measureText('Hello').advances[4] === tm.advances[4];
+    }).then(t_pass, t_fail);
 
 - name: 2d.text.measure.actualBoundingBox
-  desc: Testing actualBoundingBox
+  desc: Testing actualBoundingBox for OffscreenCanvas
   testing:
-    - 2d.text.measure.actualBoundingBox
+  - 2d.text.measure.actualBoundingBox
   fonts:
-    - CanvasTest
+  - CanvasTest
   code: |
-    deferTest();
-    var f = new FontFace("CanvasTest", "/fonts/CanvasTest.ttf");
-    document.fonts.add(f);
-    document.fonts.ready.then(() => {
-        step_timeout(t.step_func_done(function () {
-            ctx.font = '50px CanvasTest';
-            ctx.direction = 'ltr';
-            ctx.align = 'left'
-            ctx.baseline = 'alphabetic'
-            // Different platforms may render text slightly different.
-            // Values that are nominally expected to be zero might actually vary by a pixel or so
-            // if the UA accounts for antialiasing at glyph edges, so we allow a slight deviation.
-            @assert Math.abs(ctx.measureText('A').actualBoundingBoxLeft) <= 1;
-            @assert ctx.measureText('A').actualBoundingBoxRight >= 50;
-            @assert ctx.measureText('A').actualBoundingBoxAscent >= 35;
-            @assert Math.abs(ctx.measureText('A').actualBoundingBoxDescent) <= 1;
+    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
+    let fonts = (self.fonts ? self.fonts : document.fonts);
+    f.load();
+    fonts.add(f);
+    fonts.ready.then(function() {
+        ctx.font = '50px CanvasTest';
+        ctx.direction = 'ltr';
+        ctx.align = 'left'
+        ctx.baseline = 'alphabetic'
+        // Some platforms may return '-0'.
+        @assert Math.abs(ctx.measureText('A').actualBoundingBoxLeft) === 0;
+        // Different platforms may render text slightly different.
+        @assert ctx.measureText('A').actualBoundingBoxRight >= 50;
+        @assert ctx.measureText('A').actualBoundingBoxAscent >= 35;
+        @assert Math.abs(ctx.measureText('A').actualBoundingBoxDescent) === 0;
 
-            @assert Math.abs(ctx.measureText('ABCD').actualBoundingBoxLeft) <= 1;
-            @assert ctx.measureText('ABCD').actualBoundingBoxRight >= 200;
-            @assert ctx.measureText('ABCD').actualBoundingBoxAscent >= 85;
-            @assert ctx.measureText('ABCD').actualBoundingBoxDescent >= 37;
-        }), 500);
-    });
+        @assert Math.abs(ctx.measureText('ABCD').actualBoundingBoxLeft) === 0;
+        @assert ctx.measureText('ABCD').actualBoundingBoxRight >= 200;
+        @assert ctx.measureText('ABCD').actualBoundingBoxAscent >= 85;
+        @assert ctx.measureText('ABCD').actualBoundingBoxDescent >= 37;
+    }).then(t_pass, t_fail);
 
 - name: 2d.text.measure.fontBoundingBox
-  desc: Testing fontBoundingBox
+  desc: Testing fontBoundingBox for OffscreenCanvas
   testing:
-    - 2d.text.measure.fontBoundingBox
+  - 2d.text.measure.fontBoundingBox
   fonts:
-    - CanvasTest
+  - CanvasTest
   code: |
-    deferTest();
-    var f = new FontFace("CanvasTest", "/fonts/CanvasTest.ttf");
-    document.fonts.add(f);
-    document.fonts.ready.then(() => {
-        step_timeout(t.step_func_done(function () {
-            ctx.font = '50px CanvasTest';
-            ctx.direction = 'ltr';
-            ctx.align = 'left'
-            @assert ctx.measureText('A').fontBoundingBoxAscent === 85;
-            @assert ctx.measureText('A').fontBoundingBoxDescent === 39;
-
-            @assert ctx.measureText('ABCD').fontBoundingBoxAscent === 85;
-            @assert ctx.measureText('ABCD').fontBoundingBoxDescent === 39;
-        }), 500);
-    });
+    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
+    let fonts = (self.fonts ? self.fonts : document.fonts);
+    f.load();
+    fonts.add(f);
+    fonts.ready.then(function() {
+        ctx.font = '50px CanvasTest';
+        ctx.direction = 'ltr';
+        ctx.align = 'left'
+        @assert ctx.measureText('A').fontBoundingBoxAscent === 85;
+        @assert ctx.measureText('A').fontBoundingBoxDescent === 39;
 
+        @assert ctx.measureText('ABCD').fontBoundingBoxAscent === 85;
+        @assert ctx.measureText('ABCD').fontBoundingBoxDescent === 39;
+    }).then(t_pass, t_fail);
 - name: 2d.text.measure.emHeights
-  desc: Testing emHeights
+  desc: Testing emHeights for OffscreenCanvas
   testing:
-    - 2d.text.measure.emHeights
+  - 2d.text.measure.emHeights
   fonts:
-    - CanvasTest
+  - CanvasTest
   code: |
-    deferTest();
-    var f = new FontFace("CanvasTest", "/fonts/CanvasTest.ttf");
-    document.fonts.add(f);
-    document.fonts.ready.then(() => {
-         step_timeout(t.step_func_done(function () {
-            ctx.font = '50px CanvasTest';
-            ctx.direction = 'ltr';
-            ctx.align = 'left'
-            @assert ctx.measureText('A').emHeightAscent === 37.5;
-            @assert ctx.measureText('A').emHeightDescent === 12.5;
-            @assert ctx.measureText('A').emHeightDescent + ctx.measureText('A').emHeightAscent === 50;
-
-            @assert ctx.measureText('ABCD').emHeightAscent === 37.5;
-            @assert ctx.measureText('ABCD').emHeightDescent === 12.5;
-            @assert ctx.measureText('ABCD').emHeightDescent + ctx.measureText('ABCD').emHeightAscent === 50;
-        }), 500);
-    });
+    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
+    let fonts = (self.fonts ? self.fonts : document.fonts);
+    f.load();
+    fonts.add(f);
+    fonts.ready.then(function() {
+        ctx.font = '50px CanvasTest';
+        ctx.direction = 'ltr';
+        ctx.align = 'left'
+        @assert ctx.measureText('A').emHeightAscent === 37.5;
+        @assert ctx.measureText('A').emHeightDescent === 12.5;
+        @assert ctx.measureText('A').emHeightDescent + ctx.measureText('A').emHeightAscent === 50;
 
+        @assert ctx.measureText('ABCD').emHeightAscent === 37.5;
+        @assert ctx.measureText('ABCD').emHeightDescent === 12.5;
+        @assert ctx.measureText('ABCD').emHeightDescent + ctx.measureText('ABCD').emHeightAscent === 50;
+    }).then(t_pass, t_fail);
 - name: 2d.text.measure.baselines
-  desc: Testing baselines
+  desc: Testing baselines for OffscreenCanvas
   testing:
-    - 2d.text.measure.baselines
+  - 2d.text.measure.baselines
   fonts:
-    - CanvasTest
+  - CanvasTest
   code: |
-    deferTest();
-    var f = new FontFace("CanvasTest", "/fonts/CanvasTest.ttf");
-    document.fonts.add(f);
-    document.fonts.ready.then(() => {
-         step_timeout(t.step_func_done(function () {
-            ctx.font = '50px CanvasTest';
-            ctx.direction = 'ltr';
-            ctx.align = 'left'
-            @assert Math.abs(ctx.measureText('A').getBaselines().alphabetic) === 0;
-            @assert ctx.measureText('A').getBaselines().ideographic === -39;
-            @assert ctx.measureText('A').getBaselines().hanging === 68;
-
-            @assert Math.abs(ctx.measureText('ABCD').getBaselines().alphabetic) === 0;
-            @assert ctx.measureText('ABCD').getBaselines().ideographic === -39;
-            @assert ctx.measureText('ABCD').getBaselines().hanging === 68;
-        }), 500);
-    });
+    var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
+    let fonts = (self.fonts ? self.fonts : document.fonts);
+    f.load();
+    fonts.add(f);
+    fonts.ready.then(function() {
+       ctx.font = '50px CanvasTest';
+       ctx.direction = 'ltr';
+       ctx.align = 'left'
+       @assert Math.abs(ctx.measureText('A').getBaselines().alphabetic) === 0;
+       @assert ctx.measureText('A').getBaselines().ideographic === -39;
+       @assert ctx.measureText('A').getBaselines().hanging === 68;
 
+       @assert Math.abs(ctx.measureText('ABCD').getBaselines().alphabetic) === 0;
+       @assert ctx.measureText('ABCD').getBaselines().ideographic === -39;
+       @assert ctx.measureText('ABCD').getBaselines().hanging === 68;
+    }).then(t_pass, t_fail);
 # TODO: shadows, alpha, composite, clip
diff --git a/tests/wpt/web-platform-tests/html/canvas/tools/yaml/offscreen/the-canvas-state.yaml b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/offscreen/the-canvas-state.yaml
new file mode 100644
index 00000000000..1ca9bf36105
--- /dev/null
+++ b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/offscreen/the-canvas-state.yaml
@@ -0,0 +1,109 @@
+- name: 2d.state.saverestore.transformation
+  desc: save()/restore() affects the current transformation matrix
+  testing:
+  - 2d.state.transformation
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.save();
+    ctx.translate(200, 0);
+    ctx.restore();
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(-200, 0, 100, 50);
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.state.saverestore.clip
+  desc: save()/restore() affects the clipping path
+  testing:
+  - 2d.state.clip
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.save();
+    ctx.rect(0, 0, 1, 1);
+    ctx.clip();
+    ctx.restore();
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.state.saverestore.path
+  desc: save()/restore() does not affect the current path
+  testing:
+  - 2d.state.path
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.save();
+    ctx.rect(0, 0, 100, 50);
+    ctx.restore();
+    ctx.fillStyle = '#0f0';
+    ctx.fill();
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.state.saverestore.bitmap
+  desc: save()/restore() does not affect the current bitmap
+  testing:
+  - 2d.state.bitmap
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.save();
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.restore();
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.state.saverestore.stack
+  desc: save()/restore() can be nested as a stack
+  testing:
+  - 2d.state.save
+  - 2d.state.restore
+  code: |
+    ctx.lineWidth = 1;
+    ctx.save();
+    ctx.lineWidth = 2;
+    ctx.save();
+    ctx.lineWidth = 3;
+    @assert ctx.lineWidth === 3;
+    ctx.restore();
+    @assert ctx.lineWidth === 2;
+    ctx.restore();
+    @assert ctx.lineWidth === 1;
+    t.done();
+
+- name: 2d.state.saverestore.stackdepth
+  desc: save()/restore() stack depth is not unreasonably limited
+  testing:
+  - 2d.state.save
+  - 2d.state.restore
+  code: |
+    var limit = 512;
+    for (var i = 1; i < limit; ++i)
+    {
+        ctx.save();
+        ctx.lineWidth = i;
+    }
+    for (var i = limit-1; i > 0; --i)
+    {
+        @assert ctx.lineWidth === i;
+        ctx.restore();
+    }
+    t.done();
+
+- name: 2d.state.saverestore.underflow
+  desc: restore() with an empty stack has no effect
+  testing:
+  - 2d.state.restore.underflow
+  code: |
+    for (var i = 0; i < 16; ++i)
+        ctx.restore();
+    ctx.lineWidth = 0.5;
+    ctx.restore();
+    @assert ctx.lineWidth === 0.5;
+    t.done();
+
diff --git a/tests/wpt/web-platform-tests/html/canvas/tools/yaml/offscreen/the-offscreen-canvas.yaml b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/offscreen/the-offscreen-canvas.yaml
new file mode 100644
index 00000000000..1a1ac7b4d3b
--- /dev/null
+++ b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/offscreen/the-offscreen-canvas.yaml
@@ -0,0 +1,318 @@
+- name: 2d.canvas.reference
+  desc: canvas refers back to its canvas
+  testing:
+  - 2d.canvas
+  code: |
+    @assert ctx.canvas === offscreenCanvas;
+    t.done();
+
+- name: 2d.canvas.readonly
+  desc: canvas is readonly
+  testing:
+  - 2d.canvas.attribute
+  code: |
+    var offscreenCanvas2 = new OffscreenCanvas(100, 50);
+    var d = ctx.canvas;
+    @assert offscreenCanvas2 !== d;
+    ctx.canvas = offscreenCanvas2;
+    @assert ctx.canvas === d;
+    t.done();
+
+- name: 2d.getcontext.exists
+  desc: The 2D context is implemented
+  testing:
+  - context.2d
+  code: |
+    var offscreenCanvas2 = new OffscreenCanvas(100, 50);
+    @assert offscreenCanvas2.getContext('2d') !== null;
+    t.done();
+
+- name: 2d.getcontext.extraargs
+  desc: The 2D context ignores extra getContext arguments
+  testing:
+  - context.2d.extraargs
+  code: |
+    var offscreenCanvas2 = new OffscreenCanvas(100, 50);
+    @assert offscreenCanvas2.getContext('2d', false, {}, [], 1, "2") !== null;
+    @assert offscreenCanvas2.getContext('2d', 123) !== null;
+    @assert offscreenCanvas2.getContext('2d', "test") !== null;
+    @assert offscreenCanvas2.getContext('2d', undefined) !== null;
+    @assert offscreenCanvas2.getContext('2d', null) !== null;
+    @assert offscreenCanvas2.getContext('2d', Symbol.hasInstance) !== null;
+    t.done();
+
+- name: 2d.getcontext.unique
+  desc: getContext('2d') returns the same object
+  testing:
+  - context.unique
+  code: |
+    var offscreenCanvas2 = new OffscreenCanvas(100, 50);
+    @assert offscreenCanvas2.getContext('2d') === offscreenCanvas2.getContext('2d');
+    t.done();
+
+- name: 2d.getcontext.shared
+  desc: getContext('2d') returns objects which share canvas state
+  testing:
+  - context.unique
+  code: |
+    var ctx2 = offscreenCanvas.getContext('2d');
+    ctx.fillStyle = '#f00';
+    ctx2.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: context.emptystring
+  desc: getContext with empty string returns null
+  testing:
+  - context.unrecognised
+  code: |
+    var offscreenCanvas2 = new OffscreenCanvas(100, 50);
+    @assert throws TypeError offscreenCanvas2.getContext("");
+    t.done();
+
+- name: context.unrecognised.badname
+  desc: getContext with unrecognised context name returns null
+  testing:
+  - context.unrecognised
+  code: |
+    var offscreenCanvas2 = new OffscreenCanvas(100, 50);
+    @assert throws TypeError offscreenCanvas2.getContext('This is not an implemented context in any real browser');
+    t.done();
+
+- name: context.unrecognised.badsuffix
+  desc: Context name "2d" plus a suffix is unrecognised
+  testing:
+  - context.unrecognised
+  code: |
+    var offscreenCanvas2 = new OffscreenCanvas(100, 50);
+    @assert throws TypeError offscreenCanvas2.getContext("2d#");
+    t.done();
+
+- name: context.unrecognised.nullsuffix
+  desc: Context name "2d" plus a "\0" suffix is unrecognised
+  testing:
+  - context.unrecognised
+  code: |
+    var offscreenCanvas2 = new OffscreenCanvas(100, 50);
+    @assert throws TypeError offscreenCanvas2.getContext("2d\0");
+    t.done();
+
+- name: context.unrecognised.unicode
+  desc: Context name which kind of looks like "2d" is unrecognised
+  testing:
+  - context.unrecognised
+  code: |
+    var offscreenCanvas2 = new OffscreenCanvas(100, 50);
+    @assert throws TypeError offscreenCanvas2.getContext("2\uFF44");
+    t.done();
+
+- name: context.casesensitive
+  desc: Context name "2D" is unrecognised; matching is case sensitive
+  testing:
+  - context.unrecognised
+  code: |
+    var offscreenCanvas2 = new OffscreenCanvas(100, 50);
+    @assert throws TypeError offscreenCanvas2.getContext('2D');
+    t.done();
+
+- name: context.arguments.missing
+  testing:
+  - canvas.getContext
+  code: |
+    var offscreenCanvas2 = new OffscreenCanvas(100, 50);
+    @assert throws TypeError offscreenCanvas2.getContext(); @moz-todo
+    t.done();
+
+
+- name: initial.colour
+  desc: Initial state is transparent black
+  testing:
+  - initial.colour
+  code: |
+    @assert pixel 20,20 == 0,0,0,0;
+    t.done();
+
+- name: initial.reset.different
+  desc: Changing size resets canvas to transparent black
+  testing:
+  - initial.reset
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 50, 50);
+    @assert pixel 20,20 == 255,0,0,255;
+    offscreenCanvas.width = 50;
+    @assert pixel 20,20 == 0,0,0,0;
+    t.done();
+
+- name: initial.reset.same
+  desc: Setting size (not changing the value) resets canvas to transparent black
+  testing:
+  - initial.reset
+  code: |
+    offscreenCanvas.width = 100;
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 50, 50);
+    @assert pixel 20,20 == 255,0,0,255;
+    offscreenCanvas.width = 100;
+    @assert pixel 20,20 == 0,0,0,0;
+    t.done();
+
+- name: initial.reset.path
+  desc: Resetting the canvas state resets the current path
+  testing:
+  - initial.reset
+  code: |
+    offscreenCanvas.width = 100;
+    ctx.rect(0, 0, 100, 50);
+    offscreenCanvas.width = 100;
+    ctx.fillStyle = '#f00';
+    ctx.fill();
+    @assert pixel 20,20 == 0,0,0,0;
+    t.done();
+
+- name: initial.reset.clip
+  desc: Resetting the canvas state resets the current clip region
+  testing:
+  - initial.reset
+  code: |
+    offscreenCanvas.width = 100;
+    ctx.rect(0, 0, 1, 1);
+    ctx.clip();
+    offscreenCanvas.width = 100;
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 20,20 == 0,255,0,255;
+    t.done();
+
+- name: initial.reset.transform
+  desc: Resetting the canvas state resets the current transformation matrix
+  testing:
+  - initial.reset
+  code: |
+    offscreenCanvas.width = 100;
+    ctx.scale(0.1, 0.1);
+    offscreenCanvas.width = 100;
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 20,20 == 0,255,0,255;
+    t.done();
+
+- name: initial.reset.gradient
+  desc: Resetting the canvas state does not invalidate any existing gradients
+  testing:
+  - initial.reset
+  code: |
+    offscreenCanvas.width = 50;
+    var g = ctx.createLinearGradient(0, 0, 100, 0);
+    g.addColorStop(0, '#0f0');
+    g.addColorStop(1, '#0f0');
+    offscreenCanvas.width = 100;
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: initial.reset.pattern
+  desc: Resetting the canvas state does not invalidate any existing patterns
+  testing:
+  - initial.reset
+  code: |
+    offscreenCanvas.width = 30;
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 30, 50);
+    var p = ctx.createPattern(offscreenCanvas, 'repeat-x');
+    offscreenCanvas.width = 100;
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.fillStyle = p;
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: size.attributes.idl.set.zero
+  desc: Setting width/height IDL attributes to 0
+  testing:
+  - size.width
+  - size.height
+  code: |
+    offscreenCanvas.width = 0;
+    offscreenCanvas.height = 0;
+    @assert offscreenCanvas.width === 0;
+    @assert offscreenCanvas.height === 0;
+    t.done();
+
+- name: size.attributes.idl
+  desc: Getting/setting width/height IDL attributes
+  testing:
+  - size.width
+  - size.height
+  webidl:
+  - es-unsigned-long
+  code: |
+    offscreenCanvas.width = "100";
+    offscreenCanvas.height = "100";
+    @assert offscreenCanvas.width === 100;
+    @assert offscreenCanvas.height === 100;
+    offscreenCanvas.width = "+1.5e2";
+    offscreenCanvas.height = "0x96";
+    @assert offscreenCanvas.width === 150;
+    @assert offscreenCanvas.height === 150;
+    offscreenCanvas.width = 301.999;
+    offscreenCanvas.height = 301.001;
+    @assert offscreenCanvas.width === 301;
+    @assert offscreenCanvas.height === 301;
+    offscreenCanvas.width = "400x";
+    offscreenCanvas.height = "foo";
+    @assert offscreenCanvas.width === 0;
+    @assert offscreenCanvas.height === 0;
+    t.done();
+
+- name: size.attributes.default
+  desc: Default width/height when attributes are missing
+  testing:
+  - size.default
+  - size.missing
+  code: |
+    @assert offscreenCanvas.width === 100;
+    @assert offscreenCanvas.height === 50;
+    t.done();
+
+- name: size.attributes.reflect.setidl
+  desc: Setting IDL attributes updates IDL and content attributes
+  testing:
+  - size.reflect
+  code: |
+    offscreenCanvas.width = 120;
+    offscreenCanvas.height = 60;
+    @assert offscreenCanvas.width === 120;
+    @assert offscreenCanvas.height === 60;
+    t.done();
+
+- name: size.attributes.reflect.setidlzero
+  desc: Setting IDL attributes to 0 updates IDL and content attributes
+  testing:
+  - size.reflect
+  code: |
+    offscreenCanvas.width = 0;
+    offscreenCanvas.height = 0;
+    @assert offscreenCanvas.width === 0;
+    @assert offscreenCanvas.height === 0;
+    t.done();
+
+- name: size.large
+  testing:
+  - size.width
+  - size.height
+  notes: Not sure how reasonable this is, but the spec doesn't say there's an upper
+    limit on the size.
+  code: |
+    var n = 2147483647; // 2^31 - 1, which should be supported by any sensible definition of "long"
+    offscreenCanvas.width = n;
+    offscreenCanvas.height = n;
+    @assert offscreenCanvas.width === n;
+    @assert offscreenCanvas.height === n;
+    t.done();
+
diff --git a/tests/wpt/web-platform-tests/html/canvas/tools/yaml/offscreen/transformations.yaml b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/offscreen/transformations.yaml
new file mode 100644
index 00000000000..6c439ef9cf8
--- /dev/null
+++ b/tests/wpt/web-platform-tests/html/canvas/tools/yaml/offscreen/transformations.yaml
@@ -0,0 +1,365 @@
+- name: 2d.transformation.order
+  desc: Transformations are applied in the right order
+  testing:
+  - 2d.transformation.order
+  code: |
+    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);
+    @assert pixel 75,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.transformation.scale.basic
+  desc: scale() works
+  testing:
+  - 2d.transformation.scale
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.scale(2, 4);
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 50, 12.5);
+    @assert pixel 90,40 == 0,255,0,255;
+    t.done();
+
+- name: 2d.transformation.scale.zero
+  desc: scale() with a scale factor of zero works
+  testing:
+  - 2d.transformation.scale
+  code: |
+    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();
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.transformation.scale.negative
+  desc: scale() with negative scale factors works
+  testing:
+  - 2d.transformation.scale
+  code: |
+    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();
+    @assert pixel 25,25 == 0,255,0,255;
+    @assert pixel 75,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.transformation.scale.large
+  desc: scale() with large scale factors works
+  notes: Not really that large at all, but it hits the limits in Firefox.
+  testing:
+  - 2d.transformation.scale
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.scale(1e5, 1e5);
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 1, 1);
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.transformation.scale.nonfinite
+  desc: scale() with Infinity/NaN is ignored
+  testing:
+  - 2d.nonfinite
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.translate(100, 10);
+    @nonfinite ctx.scale(<0.1 Infinity -Infinity NaN>, <0.1 Infinity -Infinity NaN>);
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(-100, -10, 100, 50);
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.transformation.scale.multiple
+  desc: Multiple scale()s combine
+  testing:
+  - 2d.transformation.scale.multiple
+  code: |
+    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);
+    @assert pixel 90,40 == 0,255,0,255;
+    t.done();
+
+
+- name: 2d.transformation.rotate.zero
+  desc: rotate() by 0 does nothing
+  testing:
+  - 2d.transformation.rotate
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.rotate(0);
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.transformation.rotate.radians
+  desc: rotate() uses radians
+  testing:
+  - 2d.transformation.rotate.radians
+  code: |
+    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);
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.transformation.rotate.direction
+  desc: rotate() is clockwise
+  testing:
+  - 2d.transformation.rotate.direction
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.rotate(Math.PI / 2);
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, -100, 50, 100);
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.transformation.rotate.wrap
+  desc: rotate() wraps large positive values correctly
+  testing:
+  - 2d.transformation.rotate
+  code: |
+    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);
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 98,2 == 0,255,0,255;
+    @assert pixel 98,47 == 0,255,0,255;
+    t.done();
+
+- name: 2d.transformation.rotate.wrapnegative
+  desc: rotate() wraps large negative values correctly
+  testing:
+  - 2d.transformation.rotate
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.rotate(-Math.PI * (1 + 4096));
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(-100, -50, 100, 50);
+    @assert pixel 50,25 == 0,255,0,255;
+    @assert pixel 98,2 == 0,255,0,255;
+    @assert pixel 98,47 == 0,255,0,255;
+    t.done();
+
+- name: 2d.transformation.rotate.nonfinite
+  desc: rotate() with Infinity/NaN is ignored
+  testing:
+  - 2d.nonfinite
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.translate(100, 10);
+    @nonfinite ctx.rotate(<0.1 Infinity -Infinity NaN>);
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(-100, -10, 100, 50);
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.transformation.translate.basic
+  desc: translate() works
+  testing:
+  - 2d.transformation.translate
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.translate(100, 50);
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(-100, -50, 100, 50);
+    @assert pixel 90,40 == 0,255,0,255;
+    t.done();
+
+- name: 2d.transformation.translate.nonfinite
+  desc: translate() with Infinity/NaN is ignored
+  testing:
+  - 2d.nonfinite
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.translate(100, 10);
+    @nonfinite ctx.translate(<0.1 Infinity -Infinity NaN>, <0.1 Infinity -Infinity NaN>);
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(-100, -10, 100, 50);
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+
+- name: 2d.transformation.transform.identity
+  desc: transform() with the identity matrix does nothing
+  testing:
+  - 2d.transformation.transform
+  code: |
+    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);
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.transformation.transform.skewed
+  desc: transform() with skewy matrix transforms correctly
+  testing:
+  - 2d.transformation.transform
+  code: |
+    // 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();
+    @assert pixel 21,11 == 0,255,0,255;
+    @assert pixel 79,11 == 0,255,0,255;
+    @assert pixel 21,39 == 0,255,0,255;
+    @assert pixel 79,39 == 0,255,0,255;
+    @assert pixel 39,19 == 0,255,0,255;
+    @assert pixel 61,19 == 0,255,0,255;
+    @assert pixel 39,31 == 0,255,0,255;
+    @assert pixel 61,31 == 0,255,0,255;
+    t.done();
+
+- name: 2d.transformation.transform.multiply
+  desc: transform() multiplies the CTM
+  testing:
+  - 2d.transformation.transform.multiply
+  code: |
+    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);
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+- name: 2d.transformation.transform.nonfinite
+  desc: transform() with Infinity/NaN is ignored
+  testing:
+  - 2d.nonfinite
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.translate(100, 10);
+    @nonfinite ctx.transform(<0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>);
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(-100, -10, 100, 50);
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
+
+- name: 2d.transformation.setTransform.skewed
+  testing:
+  - 2d.transformation.setTransform
+  code: |
+    // 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();
+    @assert pixel 21,11 == 0,255,0,255;
+    @assert pixel 79,11 == 0,255,0,255;
+    @assert pixel 21,39 == 0,255,0,255;
+    @assert pixel 79,39 == 0,255,0,255;
+    @assert pixel 39,19 == 0,255,0,255;
+    @assert pixel 61,19 == 0,255,0,255;
+    @assert pixel 39,31 == 0,255,0,255;
+    @assert pixel 61,31 == 0,255,0,255;
+    t.done();
+
+- name: 2d.transformation.setTransform.multiple
+  testing:
+  - 2d.transformation.setTransform.identity
+  code: |
+    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);
+    @assert pixel 75,35 == 0,255,0,255;
+    t.done();
+
+- name: 2d.transformation.setTransform.nonfinite
+  desc: setTransform() with Infinity/NaN is ignored
+  testing:
+  - 2d.nonfinite
+  code: |
+    ctx.fillStyle = '#f00';
+    ctx.fillRect(0, 0, 100, 50);
+    ctx.translate(100, 10);
+    @nonfinite ctx.setTransform(<0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>);
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(-100, -10, 100, 50);
+    @assert pixel 50,25 == 0,255,0,255;
+    t.done();
+
diff --git a/tests/wpt/web-platform-tests/html/cross-origin-opener-policy/access-reporting/openee-accessed_openee-coop-ro.https.html b/tests/wpt/web-platform-tests/html/cross-origin-opener-policy/access-reporting/openee-accessed_openee-coop-ro.https.html
index 2f4ea87826d..1cb8e763b96 100644
--- a/tests/wpt/web-platform-tests/html/cross-origin-opener-policy/access-reporting/openee-accessed_openee-coop-ro.https.html
+++ b/tests/wpt/web-platform-tests/html/cross-origin-opener-policy/access-reporting/openee-accessed_openee-coop-ro.https.html
@@ -16,28 +16,28 @@ const cross_origin = get_host_info().HTTPS_REMOTE_ORIGIN;
 const coep_header = '|header(Cross-Origin-Embedder-Policy,require-corp)';
 
 let operation = [
-//[test name           , operation                   ] ,
-  ["Call blur"         , w => w.blur()               ] ,
-  ["Call foo"          , w => w.foo()                ] ,
-  ["Call location"     , w => w.location()           ] ,
-  ["Call opener"       , w => w.opener()             ] ,
-  ["Call postMessage"  , w => w.postMessage()        ] ,
-  ["Call window"       , w => w.window()             ] ,
-  ["Read blur"         , w => w.blur                 ] ,
-  ["Read foo"          , w => w.foo                  ] ,
-  ["Read location"     , w => w.location             ] ,
-  ["Read opener"       , w => w.opener               ] ,
-  ["Read postMessage"  , w => w.postMessage          ] ,
-  ["Read window"       , w => w.window               ] ,
-  ["Write blur"        , w => w.blur = "test"        ] ,
-  ["Write foo"         , w => w.foo = "test"         ] ,
-  ["Write location"    , w => w.location = "test"    ] ,
-  ["Write opener"      , w => w.opener = "test"      ] ,
-  ["Write postMessage" , w => w.postMessage = "test" ] ,
-  ["Write window"      , w => w.window = "test"      ] ,
+//[type    , property      , operation                   ] ,
+  ["Call"  , "blur"        , w => w.blur()               ] ,
+  ["Call"  , "foo"         , w => w.foo()                ] ,
+  ["Call"  , "location"    , w => w.location()           ] ,
+  ["Call"  , "opener"      , w => w.opener()             ] ,
+  ["Call"  , "postMessage" , w => w.postMessage()        ] ,
+  ["Call"  , "window"      , w => w.window()             ] ,
+  ["Read"  , "blur"        , w => w.blur                 ] ,
+  ["Read"  , "foo"         , w => w.foo                  ] ,
+  ["Read"  , "location"    , w => w.location             ] ,
+  ["Read"  , "opener"      , w => w.opener               ] ,
+  ["Read"  , "postMessage" , w => w.postMessage          ] ,
+  ["Read"  , "window"      , w => w.window               ] ,
+  ["Write" , "blur"        , w => w.blur = "test"        ] ,
+  ["Write" , "foo"         , w => w.foo = "test"         ] ,
+  ["Write" , "location"    , w => w.location = "test"    ] ,
+  ["Write" , "opener"      , w => w.opener = "test"      ] ,
+  ["Write" , "postMessage" , w => w.postMessage = "test" ] ,
+  ["Write" , "window"      , w => w.window = "test"      ] ,
 ];
 
-operation.forEach(([test, op]) => {
+operation.forEach(([type, property, op]) => {
   promise_test(async t => {
     const report_token = token();
     const executor_token = token();
@@ -45,7 +45,7 @@ operation.forEach(([test, op]) => {
 
     const reportTo = reportToHeaders(report_token);
     const openee_url = cross_origin + executor_path +
-      reportTo.header + reportTo.coopReportOnlySameOrigin + coep_header +
+      reportTo.header + reportTo.coopReportOnlySameOriginHeader + coep_header +
       `&uuid=${executor_token}`;
     const openee = window.open(openee_url);
     t.add_cleanup(() => send(executor_token, "window.close()"))
@@ -75,10 +75,16 @@ operation.forEach(([test, op]) => {
     report_2 = JSON.parse(report_2);
     assert_equals(report_2.length, 1);
     assert_equals(report_2[0].type, "coop");
-    assert_equals(report_2[0].body["violation-type"], "access");
+    assert_equals(report_2[0].url, openee_url);
+    assert_equals(report_2[0].body["violation-type"], "access-to-coop-page");
     assert_equals(report_2[0].body["disposition"], "reporting");
     assert_equals(report_2[0].body["effective-policy"], "same-origin-plus-coep");
-  }, `${test}`);
+    assert_equals(report_2[0].body["property"], property);
+    assert_equals(report_2[0].body["source-file"], undefined);
+    assert_equals(report_2[0].body["lineno"], undefined);
+    assert_equals(report_2[0].body["colno"], undefined);
+    // TODO(arthursonzogni): Add check for report > body > blocked-window-url
+  }, `${type} ${property}`);
 });
 
 </script>
diff --git a/tests/wpt/web-platform-tests/html/cross-origin-opener-policy/access-reporting/openee-accessed_openee-coop.https.html b/tests/wpt/web-platform-tests/html/cross-origin-opener-policy/access-reporting/openee-accessed_openee-coop.https.html
index 07fd43b90ed..3c091275cc2 100644
--- a/tests/wpt/web-platform-tests/html/cross-origin-opener-policy/access-reporting/openee-accessed_openee-coop.https.html
+++ b/tests/wpt/web-platform-tests/html/cross-origin-opener-policy/access-reporting/openee-accessed_openee-coop.https.html
@@ -16,28 +16,28 @@ const cross_origin = get_host_info().HTTPS_REMOTE_ORIGIN;
 const coep_header = '|header(Cross-Origin-Embedder-Policy,require-corp)';
 
 let operation = [
-//[test name           , operation                   ] ,
-  ["Call blur"         , w => w.blur()               ] ,
-  ["Call foo"          , w => w.foo()                ] ,
-  ["Call location"     , w => w.location()           ] ,
-  ["Call opener"       , w => w.opener()             ] ,
-  ["Call postMessage"  , w => w.postMessage()        ] ,
-  ["Call window"       , w => w.window()             ] ,
-  ["Read blur"         , w => w.blur                 ] ,
-  ["Read foo"          , w => w.foo                  ] ,
-  ["Read location"     , w => w.location             ] ,
-  ["Read opener"       , w => w.opener               ] ,
-  ["Read postMessage"  , w => w.postMessage          ] ,
-  ["Read window"       , w => w.window               ] ,
-  ["Write blur"        , w => w.blur = "test"        ] ,
-  ["Write foo"         , w => w.foo = "test"         ] ,
-  ["Write location"    , w => w.location = "test"    ] ,
-  ["Write opener"      , w => w.opener = "test"      ] ,
-  ["Write postMessage" , w => w.postMessage = "test" ] ,
-  ["Write window"      , w => w.window = "test"      ] ,
+//[type    , property      , operation                   ] ,
+  ["Call"  , "blur"        , w => w.blur()               ] ,
+  ["Call"  , "foo"         , w => w.foo()                ] ,
+  ["Call"  , "location"    , w => w.location()           ] ,
+  ["Call"  , "opener"      , w => w.opener()             ] ,
+  ["Call"  , "postMessage" , w => w.postMessage()        ] ,
+  ["Call"  , "window"      , w => w.window()             ] ,
+  ["Read"  , "blur"        , w => w.blur                 ] ,
+  ["Read"  , "foo"         , w => w.foo                  ] ,
+  ["Read"  , "location"    , w => w.location             ] ,
+  ["Read"  , "opener"      , w => w.opener               ] ,
+  ["Read"  , "postMessage" , w => w.postMessage          ] ,
+  ["Read"  , "window"      , w => w.window               ] ,
+  ["Write" , "blur"        , w => w.blur = "test"        ] ,
+  ["Write" , "foo"         , w => w.foo = "test"         ] ,
+  ["Write" , "location"    , w => w.location = "test"    ] ,
+  ["Write" , "opener"      , w => w.opener = "test"      ] ,
+  ["Write" , "postMessage" , w => w.postMessage = "test" ] ,
+  ["Write" , "window"      , w => w.window = "test"      ] ,
 ];
 
-operation.forEach(([test, op]) => {
+operation.forEach(([type, property, op]) => {
   promise_test(async t => {
     const report_token = token();
     const executor_token = token();
@@ -45,7 +45,7 @@ operation.forEach(([test, op]) => {
 
     const reportTo = reportToHeaders(report_token);
     const openee_url = cross_origin + executor_path +
-      reportTo.header + reportTo.coopSameOrigin + coep_header +
+      reportTo.header + reportTo.coopSameOriginHeader + coep_header +
       `&uuid=${executor_token}`;
     const openee = window.open(openee_url);
     t.add_cleanup(() => send(executor_token, "window.close()"))
@@ -75,10 +75,17 @@ operation.forEach(([test, op]) => {
     report_2 = JSON.parse(report_2);
     assert_equals(report_2.length, 1);
     assert_equals(report_2[0].type, "coop");
-    assert_equals(report_2[0].body["violation-type"], "access");
+    assert_equals(report_2[0].url, openee_url);
+    assert_equals(report_2[0].body["violation-type"], "access-to-coop-page");
     assert_equals(report_2[0].body["disposition"], "enforce");
     assert_equals(report_2[0].body["effective-policy"], "same-origin-plus-coep");
-  }, `${test}`);
+    assert_equals(report_2[0].body["property"], property);
+    assert_equals(report_2[0].body["source-file"], undefined);
+    assert_equals(report_2[0].body["lineno"], undefined);
+    assert_equals(report_2[0].body["colno"], undefined);
+    // TODO(arthursonzogni): Add check for report > body > blocked-window-url
+
+  }, `${type} ${property}`);
 });
 
 </script>
diff --git a/tests/wpt/web-platform-tests/html/cross-origin-opener-policy/access-reporting/opener-accessed_openee-coop-ro.https.html b/tests/wpt/web-platform-tests/html/cross-origin-opener-policy/access-reporting/opener-accessed_openee-coop-ro.https.html
index c942b9c5d3b..9019b72c54a 100644
--- a/tests/wpt/web-platform-tests/html/cross-origin-opener-policy/access-reporting/opener-accessed_openee-coop-ro.https.html
+++ b/tests/wpt/web-platform-tests/html/cross-origin-opener-policy/access-reporting/opener-accessed_openee-coop-ro.https.html
@@ -16,28 +16,28 @@ const cross_origin = get_host_info().HTTPS_REMOTE_ORIGIN;
 const coep_header = '|header(Cross-Origin-Embedder-Policy,require-corp)';
 
 let operation = [
-//[test name           , operation                     ]   ,
-  ["Call blur"         , "opener.blur()"               ] ,
-  ["Call foo"          , "opener.foo()"                ] ,
-  ["Call location"     , "opener.location()"           ] ,
-  ["Call opener"       , "opener.opener()"             ] ,
-  ["Call postMessage"  , "opener.postMessage()"        ] ,
-  ["Call window"       , "opener.window()"             ] ,
-  ["Read blur"         , "opener.blur"                 ] ,
-  ["Read foo"          , "opener.foo"                  ] ,
-  ["Read location"     , "opener.location"             ] ,
-  ["Read opener"       , "opener.opener"               ] ,
-  ["Read postMessage"  , "opener.postMessage"          ] ,
-  ["Read window"       , "opener.window"               ] ,
-  ["Write blur"        , "opener.blur = 'test'"        ]  ,
-  ["Write foo"         , "opener.foo = 'test'"         ]  ,
-  ["Write location"    , "opener.location = 'test'"    ]  ,
-  ["Write opener"      , "opener.opener = 'test'"      ]  ,
-  ["Write postMessage" , "opener.postMessage = 'test'" ]  ,
-  ["Write window"      , "opener.window = 'test'"      ]  ,
+//[type    , property      , operation                     ] ,
+  ["Call"  , "blur"        , "opener.blur()"               ] ,
+  ["Call"  , "foo"         , "opener.foo()"                ] ,
+  ["Call"  , "location"    , "opener.location()"           ] ,
+  ["Call"  , "opener"      , "opener.opener()"             ] ,
+  ["Call"  , "postMessage" , "opener.postMessage()"        ] ,
+  ["Call"  , "window"      , "opener.window()"             ] ,
+  ["Read"  , "blur"        , "opener.blur"                 ] ,
+  ["Read"  , "foo"         , "opener.foo"                  ] ,
+  ["Read"  , "location"    , "opener.location"             ] ,
+  ["Read"  , "opener"      , "opener.opener"               ] ,
+  ["Read"  , "postMessage" , "opener.postMessage"          ] ,
+  ["Read"  , "window"      , "opener.window"               ] ,
+  ["Write" , "blur"        , "opener.blur = 'test'"        ] ,
+  ["Write" , "foo"         , "opener.foo = 'test'"         ] ,
+  ["Write" , "location"    , "opener.location = 'test'"    ] ,
+  ["Write" , "opener"      , "opener.opener = 'test'"      ] ,
+  ["Write" , "postMessage" , "opener.postMessage = 'test'" ] ,
+  ["Write" , "window"      , "opener.window = 'test'"      ] ,
 ];
 
-operation.forEach(([test, op]) => {
+operation.forEach(([type, property, op]) => {
   promise_test(async t => {
     const report_token = token();
     const executor_token = token();
@@ -45,7 +45,7 @@ operation.forEach(([test, op]) => {
 
     const reportTo = reportToHeaders(report_token);
     const openee_url = cross_origin + executor_path +
-      reportTo.header + reportTo.coopReportOnlySameOrigin + coep_header +
+      reportTo.header + reportTo.coopReportOnlySameOriginHeader + coep_header +
       `&uuid=${executor_token}`;
     const openee = window.open(openee_url);
     t.add_cleanup(() => send(executor_token, "window.close()"))
@@ -74,10 +74,14 @@ operation.forEach(([test, op]) => {
 
     assert_equals(report_2.length, 1);
     assert_equals(report_2[0].type, "coop");
-    assert_equals(report_2[0].body["violation-type"], "access");
+    assert_equals(report_2[0].body["violation-type"], "access-from-coop-page");
     assert_equals(report_2[0].body["disposition"], "reporting");
     assert_equals(report_2[0].body["effective-policy"], "same-origin-plus-coep");
-  }, `${test}`);
+    assert_equals(report_2[0].body["property"], property);
+    assert_equals(report_2[0].body["source-file"], undefined);
+    assert_equals(report_2[0].body["lineno"], undefined);
+    assert_equals(report_2[0].body["colno"], undefined);
+  }, `${type} ${property}`);
 });
 
 </script>
diff --git a/tests/wpt/web-platform-tests/html/cross-origin-opener-policy/access-reporting/opener-accessed_openee-coop.https.html b/tests/wpt/web-platform-tests/html/cross-origin-opener-policy/access-reporting/opener-accessed_openee-coop.https.html
index 921fdf742c2..6dfb067a415 100644
--- a/tests/wpt/web-platform-tests/html/cross-origin-opener-policy/access-reporting/opener-accessed_openee-coop.https.html
+++ b/tests/wpt/web-platform-tests/html/cross-origin-opener-policy/access-reporting/opener-accessed_openee-coop.https.html
@@ -16,28 +16,28 @@ const cross_origin = get_host_info().HTTPS_REMOTE_ORIGIN;
 const coep_header = '|header(Cross-Origin-Embedder-Policy,require-corp)';
 
 let operation = [
-//[test name           , operation                     ]   ,
-  ["Call blur"         , "opener.blur()"               ] ,
-  ["Call foo"          , "opener.foo()"                ] ,
-  ["Call location"     , "opener.location()"           ] ,
-  ["Call opener"       , "opener.opener()"             ] ,
-  ["Call postMessage"  , "opener.postMessage()"        ] ,
-  ["Call window"       , "opener.window()"             ] ,
-  ["Read blur"         , "opener.blur"                 ] ,
-  ["Read foo"          , "opener.foo"                  ] ,
-  ["Read location"     , "opener.location"             ] ,
-  ["Read opener"       , "opener.opener"               ] ,
-  ["Read postMessage"  , "opener.postMessage"          ] ,
-  ["Read window"       , "opener.window"               ] ,
-  ["Write blur"        , "opener.blur = 'test'"        ]  ,
-  ["Write foo"         , "opener.foo = 'test'"         ]  ,
-  ["Write location"    , "opener.location = 'test'"    ]  ,
-  ["Write opener"      , "opener.opener = 'test'"      ]  ,
-  ["Write postMessage" , "opener.postMessage = 'test'" ]  ,
-  ["Write window"      , "opener.window = 'test'"      ]  ,
+//[type    , property      , operation                     ] ,
+  ["Call"  , "blur"        , "opener.blur()"               ] ,
+  ["Call"  , "foo"         , "opener.foo()"                ] ,
+  ["Call"  , "location"    , "opener.location()"           ] ,
+  ["Call"  , "opener"      , "opener.opener()"             ] ,
+  ["Call"  , "postMessage" , "opener.postMessage()"        ] ,
+  ["Call"  , "window"      , "opener.window()"             ] ,
+  ["Read"  , "blur"        , "opener.blur"                 ] ,
+  ["Read"  , "foo"         , "opener.foo"                  ] ,
+  ["Read"  , "location"    , "opener.location"             ] ,
+  ["Read"  , "opener"      , "opener.opener"               ] ,
+  ["Read"  , "postMessage" , "opener.postMessage"          ] ,
+  ["Read"  , "window"      , "opener.window"               ] ,
+  ["Write" , "blur"        , "opener.blur = 'test'"        ] ,
+  ["Write" , "foo"         , "opener.foo = 'test'"         ] ,
+  ["Write" , "location"    , "opener.location = 'test'"    ] ,
+  ["Write" , "opener"      , "opener.opener = 'test'"      ] ,
+  ["Write" , "postMessage" , "opener.postMessage = 'test'" ] ,
+  ["Write" , "window"      , "opener.window = 'test'"      ] ,
 ];
 
-operation.forEach(([test, op]) => {
+operation.forEach(([type, property, op]) => {
   promise_test(async t => {
     const report_token = token();
     const executor_token = token();
@@ -45,7 +45,7 @@ operation.forEach(([test, op]) => {
 
     const reportTo = reportToHeaders(report_token);
     const openee_url = cross_origin + executor_path +
-      reportTo.header + reportTo.coopSameOrigin + coep_header +
+      reportTo.header + reportTo.coopSameOriginHeader + coep_header +
       `&uuid=${executor_token}`;
     const openee = window.open(openee_url);
     t.add_cleanup(() => send(executor_token, "window.close()"));
@@ -59,7 +59,7 @@ operation.forEach(([test, op]) => {
     assert_equals(report_1[0].body["violation-type"], "navigation-to-document");
     assert_equals(report_1[0].body["disposition"], "enforce");
 
-    // 3. Try to access the opener. A report is sent, because of COOP-RO+COEP.
+    // 3. Try to access the opener. A report is sent, because of COOP+COEP.
     send(executor_token, `
       try {${op}} catch(e) {}
       send("${callback_token}", "Done");
@@ -74,10 +74,14 @@ operation.forEach(([test, op]) => {
 
     assert_equals(report_2.length, 1);
     assert_equals(report_2[0].type, "coop");
-    assert_equals(report_2[0].body["violation-type"], "access");
+    assert_equals(report_2[0].body["violation-type"], "access-from-coop-page");
     assert_equals(report_2[0].body["disposition"], "enforce");
     assert_equals(report_2[0].body["effective-policy"], "same-origin-plus-coep");
-  }, `${test}`);
+    assert_equals(report_2[0].body["property"], property);
+    assert_equals(report_2[0].body["source-file"], undefined);
+    assert_equals(report_2[0].body["lineno"], undefined);
+    assert_equals(report_2[0].body["colno"], undefined);
+  }, `${type} ${property}`);
 });
 
 </script>
diff --git a/tests/wpt/web-platform-tests/html/cross-origin-opener-policy/access-reporting/resources/dispatcher.js b/tests/wpt/web-platform-tests/html/cross-origin-opener-policy/access-reporting/resources/dispatcher.js
index d0184d579d3..b6e29e26bfe 100644
--- a/tests/wpt/web-platform-tests/html/cross-origin-opener-policy/access-reporting/resources/dispatcher.js
+++ b/tests/wpt/web-platform-tests/html/cross-origin-opener-policy/access-reporting/resources/dispatcher.js
@@ -49,7 +49,7 @@ const reportToHeaders = function(uuid) {
 
   return {
     header: `|header(report-to,${reportToJSON})`,
-    coopSameOrigin: `|header(Cross-Origin-Opener-Policy, same-origin%3Breport-to="${uuid}")`,
-    coopReportOnlySameOrigin: `|header(Cross-Origin-Opener-Policy-Report-Only, same-origin%3Breport-to="${uuid}")`,
+    coopSameOriginHeader: `|header(Cross-Origin-Opener-Policy, same-origin%3Breport-to="${uuid}")`,
+    coopReportOnlySameOriginHeader: `|header(Cross-Origin-Opener-Policy-Report-Only, same-origin%3Breport-to="${uuid}")`,
   };
 };
diff --git a/tests/wpt/web-platform-tests/html/semantics/embedded-content/the-video-element/video-poster-shown-preload-auto-ref.html b/tests/wpt/web-platform-tests/html/semantics/embedded-content/the-video-element/video-poster-shown-preload-auto-ref.html
new file mode 100644
index 00000000000..efa75bb20a6
--- /dev/null
+++ b/tests/wpt/web-platform-tests/html/semantics/embedded-content/the-video-element/video-poster-shown-preload-auto-ref.html
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<html>
+  <title>Verifies that video poster is shown even if video element has 'preload="auto"' attribute</title>
+  <video preload="none" poster="/media/poster.png" src="/media/video.ogv" width="100" height="100"></video>
+</html>
diff --git a/tests/wpt/web-platform-tests/html/semantics/embedded-content/the-video-element/video-poster-shown-preload-auto.html b/tests/wpt/web-platform-tests/html/semantics/embedded-content/the-video-element/video-poster-shown-preload-auto.html
new file mode 100644
index 00000000000..243924628c0
--- /dev/null
+++ b/tests/wpt/web-platform-tests/html/semantics/embedded-content/the-video-element/video-poster-shown-preload-auto.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <title>Verifies that video poster is shown even if video element has 'preload="auto"' attribute</title>
+  <link rel="match" href="video-poster-shown-preload-auto-ref.html">
+  <video preload="auto" poster="/media/poster.png" src="/media/video.ogv" width="100" height="100"></video>
+  <script>
+    const video = document.querySelector("video");
+    video.oncanplaythrough = () => document.documentElement.classList.remove("reftest-wait");
+  </script>
+</html>
diff --git a/tests/wpt/web-platform-tests/html/tools/build.sh b/tests/wpt/web-platform-tests/html/tools/build.sh
index 4453604433c..21403090b8e 100755
--- a/tests/wpt/web-platform-tests/html/tools/build.sh
+++ b/tests/wpt/web-platform-tests/html/tools/build.sh
@@ -5,6 +5,8 @@ cd "${0%/*}"
 virtualenv -p python .virtualenv
 .virtualenv/bin/pip install genshi
 git clone https://github.com/html5lib/html5lib-python.git .virtualenv/html5lib && cd .virtualenv/html5lib || cd .virtualenv/html5lib && git pull
+# Pinned commit, to avoid html5lib from changing underneath us.
+git reset --hard d49afd350c06339a8c59299664b8a73a3b2c3f64
 git submodule update --init --recursive
 cd ../..
 .virtualenv/bin/pip install -e .virtualenv/html5lib
diff --git a/tests/wpt/web-platform-tests/layout-instability/resources/util.js b/tests/wpt/web-platform-tests/layout-instability/resources/util.js
index 8a06d72bb66..d6f54bcfc7e 100644
--- a/tests/wpt/web-platform-tests/layout-instability/resources/util.js
+++ b/tests/wpt/web-platform-tests/layout-instability/resources/util.js
@@ -70,7 +70,7 @@ ScoreWatcher = function() {
 };
 
 ScoreWatcher.prototype.checkExpectation = function(expectation) {
-  if (expectation.score)
+  if (expectation.score != undefined)
     assert_equals(this.score, expectation.score);
   if (expectation.sources)
     check_sources(expectation.sources, this.lastEntry.sources);
diff --git a/tests/wpt/web-platform-tests/layout-instability/video.html b/tests/wpt/web-platform-tests/layout-instability/video.html
new file mode 100644
index 00000000000..d699ba0ae39
--- /dev/null
+++ b/tests/wpt/web-platform-tests/layout-instability/video.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<title>Layout Instability: no shifts from advancing video track</title>
+<link rel="help" href="https://wicg.github.io/layout-instability/" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="resources/test-adapter.js"></script>
+<script src="resources/util.js"></script>
+<video controls>
+  <source src="/media/white.webm" type="video/webm">
+</video>
+<script>
+
+promise_test(async () => {
+  const watcher = new ScoreWatcher;
+  var video = document.querySelector("video");
+
+  await new Promise(resolve => { video.oncanplay = resolve; });
+  await waitForAnimationFrames(2);
+
+  // TODO(crbug.com/1088311): There are still some shifts from creating the
+  // <video>, so the score is already > 0 here. For now, just verify that
+  // advancing the track does not increase it further.
+  var currentScore = watcher.score;
+
+  video.currentTime = 5;
+
+  await waitForAnimationFrames(3);
+  cls_expect(watcher, {score: currentScore});
+
+}, "No shifts from advancing video track.");
+
+</script>
diff --git a/tests/wpt/web-platform-tests/lint.ignore b/tests/wpt/web-platform-tests/lint.ignore
index 8e7e65d0475..ae2e266a8ea 100644
--- a/tests/wpt/web-platform-tests/lint.ignore
+++ b/tests/wpt/web-platform-tests/lint.ignore
@@ -177,6 +177,7 @@ SET TIMEOUT: media-source/URL-createObjectURL-revoke.html
 SET TIMEOUT: mixed-content/generic/sanity-checker.js
 SET TIMEOUT: navigation-timing/*
 SET TIMEOUT: html/canvas/offscreen/the-offscreen-canvas/*
+SET TIMEOUT: html/canvas/offscreen/manual/the-offscreen-canvas/*
 SET TIMEOUT: old-tests/submission/Microsoft/history/history_000.htm
 SET TIMEOUT: paint-timing/resources/subframe-painting.html
 SET TIMEOUT: payment-request/allowpaymentrequest/setting-allowpaymentrequest-timing.https.sub.html
@@ -278,7 +279,7 @@ GENERATE_TESTS: html/webappapis/atob/base64.html
 GENERATE_TESTS: mediacapture-fromelement/capture.html
 GENERATE_TESTS: mediacapture-fromelement/creation.html
 GENERATE_TESTS: mediacapture-fromelement/ended.html
-GENERATE_TESTS: html/canvas/offscreen/filter/offscreencanvas.filter.html
+GENERATE_TESTS: html/canvas/offscreen/manual/filter/offscreencanvas.filter.html
 GENERATE_TESTS: pointerevents/pointerevent_constructor.html
 GENERATE_TESTS: pointerevents/extension/pointerevent_constructor.html
 GENERATE_TESTS: selection/collapse.js
diff --git a/tests/wpt/web-platform-tests/native-file-system/native_FileSystemBaseHandle-postMessage-BroadcastChannel-manual.https.tentative.html b/tests/wpt/web-platform-tests/native-file-system/native_FileSystemBaseHandle-postMessage-BroadcastChannel-manual.https.tentative.html
index 322b169985b..07f8d9620d8 100644
--- a/tests/wpt/web-platform-tests/native-file-system/native_FileSystemBaseHandle-postMessage-BroadcastChannel-manual.https.tentative.html
+++ b/tests/wpt/web-platform-tests/native-file-system/native_FileSystemBaseHandle-postMessage-BroadcastChannel-manual.https.tentative.html
@@ -1,5 +1,6 @@
 <!doctype html>
 <meta charset=utf-8>
+<meta name=timeout content=long>
 
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
diff --git a/tests/wpt/web-platform-tests/native-file-system/native_FileSystemBaseHandle-postMessage-Error-manual.https.tentative.html b/tests/wpt/web-platform-tests/native-file-system/native_FileSystemBaseHandle-postMessage-Error-manual.https.tentative.html
index a503c7e8702..19fcb3ea716 100644
--- a/tests/wpt/web-platform-tests/native-file-system/native_FileSystemBaseHandle-postMessage-Error-manual.https.tentative.html
+++ b/tests/wpt/web-platform-tests/native-file-system/native_FileSystemBaseHandle-postMessage-Error-manual.https.tentative.html
@@ -1,5 +1,6 @@
 <!doctype html>
 <meta charset=utf-8>
+<meta name=timeout content=long>
 
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
diff --git a/tests/wpt/web-platform-tests/native-file-system/native_FileSystemBaseHandle-postMessage-MessagePort-frames-manual.https.tentative.html b/tests/wpt/web-platform-tests/native-file-system/native_FileSystemBaseHandle-postMessage-MessagePort-frames-manual.https.tentative.html
index 57299f57272..81e545c5190 100644
--- a/tests/wpt/web-platform-tests/native-file-system/native_FileSystemBaseHandle-postMessage-MessagePort-frames-manual.https.tentative.html
+++ b/tests/wpt/web-platform-tests/native-file-system/native_FileSystemBaseHandle-postMessage-MessagePort-frames-manual.https.tentative.html
@@ -1,5 +1,6 @@
 <!doctype html>
 <meta charset=utf-8>
+<meta name=timeout content=long>
 
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
diff --git a/tests/wpt/web-platform-tests/native-file-system/native_FileSystemBaseHandle-postMessage-MessagePort-windows-manual.https.tentative.html b/tests/wpt/web-platform-tests/native-file-system/native_FileSystemBaseHandle-postMessage-MessagePort-windows-manual.https.tentative.html
index 75756aa130f..1b583d0c395 100644
--- a/tests/wpt/web-platform-tests/native-file-system/native_FileSystemBaseHandle-postMessage-MessagePort-windows-manual.https.tentative.html
+++ b/tests/wpt/web-platform-tests/native-file-system/native_FileSystemBaseHandle-postMessage-MessagePort-windows-manual.https.tentative.html
@@ -1,5 +1,6 @@
 <!doctype html>
 <meta charset=utf-8>
+<meta name=timeout content=long>
 
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
diff --git a/tests/wpt/web-platform-tests/native-file-system/native_FileSystemBaseHandle-postMessage-MessagePort-workers-manual.https.tentative.html b/tests/wpt/web-platform-tests/native-file-system/native_FileSystemBaseHandle-postMessage-MessagePort-workers-manual.https.tentative.html
index bf637a50ca8..22d0bf5a723 100644
--- a/tests/wpt/web-platform-tests/native-file-system/native_FileSystemBaseHandle-postMessage-MessagePort-workers-manual.https.tentative.html
+++ b/tests/wpt/web-platform-tests/native-file-system/native_FileSystemBaseHandle-postMessage-MessagePort-workers-manual.https.tentative.html
@@ -1,5 +1,6 @@
 <!doctype html>
 <meta charset=utf-8>
+<meta name=timeout content=long>
 
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
diff --git a/tests/wpt/web-platform-tests/native-file-system/native_FileSystemBaseHandle-postMessage-frames-manual.https.tentative.html b/tests/wpt/web-platform-tests/native-file-system/native_FileSystemBaseHandle-postMessage-frames-manual.https.tentative.html
index 1dffe441218..6d5c5ab78ab 100644
--- a/tests/wpt/web-platform-tests/native-file-system/native_FileSystemBaseHandle-postMessage-frames-manual.https.tentative.html
+++ b/tests/wpt/web-platform-tests/native-file-system/native_FileSystemBaseHandle-postMessage-frames-manual.https.tentative.html
@@ -1,5 +1,6 @@
 <!doctype html>
 <meta charset=utf-8>
+<meta name=timeout content=long>
 
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
diff --git a/tests/wpt/web-platform-tests/native-file-system/native_FileSystemBaseHandle-postMessage-windows-manual.https.tentative.html b/tests/wpt/web-platform-tests/native-file-system/native_FileSystemBaseHandle-postMessage-windows-manual.https.tentative.html
index cf26f67ad1e..ad1e8e7bcf3 100644
--- a/tests/wpt/web-platform-tests/native-file-system/native_FileSystemBaseHandle-postMessage-windows-manual.https.tentative.html
+++ b/tests/wpt/web-platform-tests/native-file-system/native_FileSystemBaseHandle-postMessage-windows-manual.https.tentative.html
@@ -1,5 +1,6 @@
 <!doctype html>
 <meta charset=utf-8>
+<meta name=timeout content=long>
 
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
diff --git a/tests/wpt/web-platform-tests/native-file-system/native_FileSystemBaseHandle-postMessage-workers-manual.https.tentative.html b/tests/wpt/web-platform-tests/native-file-system/native_FileSystemBaseHandle-postMessage-workers-manual.https.tentative.html
index 0ce824a1d44..bc1fc5087a6 100644
--- a/tests/wpt/web-platform-tests/native-file-system/native_FileSystemBaseHandle-postMessage-workers-manual.https.tentative.html
+++ b/tests/wpt/web-platform-tests/native-file-system/native_FileSystemBaseHandle-postMessage-workers-manual.https.tentative.html
@@ -1,5 +1,6 @@
 <!doctype html>
 <meta charset=utf-8>
+<meta name=timeout content=long>
 
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
diff --git a/tests/wpt/web-platform-tests/native-file-system/sandboxed_FileSystemBaseHandle-postMessage-BroadcastChannel.tentative.https.window.js b/tests/wpt/web-platform-tests/native-file-system/sandboxed_FileSystemBaseHandle-postMessage-BroadcastChannel.tentative.https.window.js
index 1995ab9b1f9..ca25b548cbb 100644
--- a/tests/wpt/web-platform-tests/native-file-system/sandboxed_FileSystemBaseHandle-postMessage-BroadcastChannel.tentative.https.window.js
+++ b/tests/wpt/web-platform-tests/native-file-system/sandboxed_FileSystemBaseHandle-postMessage-BroadcastChannel.tentative.https.window.js
@@ -3,4 +3,5 @@
 // META: script=resources/sandboxed-fs-test-helpers.js
 // META: script=resources/messaging-helpers.js
 // META: script=resources/messaging-serialize-helpers.js
-// META: script=script-tests/FileSystemBaseHandle-postMessage-BroadcastChannel.js
\ No newline at end of file
+// META: script=script-tests/FileSystemBaseHandle-postMessage-BroadcastChannel.js
+// META: timeout=long
diff --git a/tests/wpt/web-platform-tests/native-file-system/sandboxed_FileSystemBaseHandle-postMessage-Error.tentative.https.window.js b/tests/wpt/web-platform-tests/native-file-system/sandboxed_FileSystemBaseHandle-postMessage-Error.tentative.https.window.js
index f44957e2000..16a7002a2ad 100644
--- a/tests/wpt/web-platform-tests/native-file-system/sandboxed_FileSystemBaseHandle-postMessage-Error.tentative.https.window.js
+++ b/tests/wpt/web-platform-tests/native-file-system/sandboxed_FileSystemBaseHandle-postMessage-Error.tentative.https.window.js
@@ -5,4 +5,5 @@
 // META: script=resources/messaging-helpers.js
 // META: script=resources/messaging-blob-helpers.js
 // META: script=resources/messaging-serialize-helpers.js
-// META: script=script-tests/FileSystemBaseHandle-postMessage-Error.js
\ No newline at end of file
+// META: script=script-tests/FileSystemBaseHandle-postMessage-Error.js
+// META: timeout=long
diff --git a/tests/wpt/web-platform-tests/native-file-system/sandboxed_FileSystemBaseHandle-postMessage-MessagePort-frames.tentative.https.window.js b/tests/wpt/web-platform-tests/native-file-system/sandboxed_FileSystemBaseHandle-postMessage-MessagePort-frames.tentative.https.window.js
index e02b575f555..612c823295b 100644
--- a/tests/wpt/web-platform-tests/native-file-system/sandboxed_FileSystemBaseHandle-postMessage-MessagePort-frames.tentative.https.window.js
+++ b/tests/wpt/web-platform-tests/native-file-system/sandboxed_FileSystemBaseHandle-postMessage-MessagePort-frames.tentative.https.window.js
@@ -4,3 +4,4 @@
 // META: script=resources/messaging-blob-helpers.js
 // META: script=resources/messaging-serialize-helpers.js
 // META: script=script-tests/FileSystemBaseHandle-postMessage-MessagePort-frames.js
+// META: timeout=long
diff --git a/tests/wpt/web-platform-tests/native-file-system/sandboxed_FileSystemBaseHandle-postMessage-MessagePort-windows.tentative.https.window.js b/tests/wpt/web-platform-tests/native-file-system/sandboxed_FileSystemBaseHandle-postMessage-MessagePort-windows.tentative.https.window.js
index 6d2dc04866d..28cec810ee3 100644
--- a/tests/wpt/web-platform-tests/native-file-system/sandboxed_FileSystemBaseHandle-postMessage-MessagePort-windows.tentative.https.window.js
+++ b/tests/wpt/web-platform-tests/native-file-system/sandboxed_FileSystemBaseHandle-postMessage-MessagePort-windows.tentative.https.window.js
@@ -4,3 +4,4 @@
 // META: script=resources/messaging-blob-helpers.js
 // META: script=resources/messaging-serialize-helpers.js
 // META: script=script-tests/FileSystemBaseHandle-postMessage-MessagePort-windows.js
+// META: timeout=long
diff --git a/tests/wpt/web-platform-tests/native-file-system/sandboxed_FileSystemBaseHandle-postMessage-MessagePort-workers.tentative.https.window.js b/tests/wpt/web-platform-tests/native-file-system/sandboxed_FileSystemBaseHandle-postMessage-MessagePort-workers.tentative.https.window.js
index 119158ef1f6..1599ba969d8 100644
--- a/tests/wpt/web-platform-tests/native-file-system/sandboxed_FileSystemBaseHandle-postMessage-MessagePort-workers.tentative.https.window.js
+++ b/tests/wpt/web-platform-tests/native-file-system/sandboxed_FileSystemBaseHandle-postMessage-MessagePort-workers.tentative.https.window.js
@@ -5,3 +5,4 @@
 // META: script=resources/messaging-blob-helpers.js
 // META: script=resources/messaging-serialize-helpers.js
 // META: script=script-tests/FileSystemBaseHandle-postMessage-MessagePort-workers.js
+// META: timeout=long
diff --git a/tests/wpt/web-platform-tests/native-file-system/sandboxed_FileSystemBaseHandle-postMessage-frames.tentative.https.window.js b/tests/wpt/web-platform-tests/native-file-system/sandboxed_FileSystemBaseHandle-postMessage-frames.tentative.https.window.js
index cc419e3e111..a0e41c51b18 100644
--- a/tests/wpt/web-platform-tests/native-file-system/sandboxed_FileSystemBaseHandle-postMessage-frames.tentative.https.window.js
+++ b/tests/wpt/web-platform-tests/native-file-system/sandboxed_FileSystemBaseHandle-postMessage-frames.tentative.https.window.js
@@ -4,3 +4,4 @@
 // META: script=resources/messaging-blob-helpers.js
 // META: script=resources/messaging-serialize-helpers.js
 // META: script=script-tests/FileSystemBaseHandle-postMessage-frames.js
+// META: timeout=long
diff --git a/tests/wpt/web-platform-tests/native-file-system/sandboxed_FileSystemBaseHandle-postMessage-windows.tentative.https.window.js b/tests/wpt/web-platform-tests/native-file-system/sandboxed_FileSystemBaseHandle-postMessage-windows.tentative.https.window.js
index ffebcd8a122..1e3de1ea399 100644
--- a/tests/wpt/web-platform-tests/native-file-system/sandboxed_FileSystemBaseHandle-postMessage-windows.tentative.https.window.js
+++ b/tests/wpt/web-platform-tests/native-file-system/sandboxed_FileSystemBaseHandle-postMessage-windows.tentative.https.window.js
@@ -4,3 +4,4 @@
 // META: script=resources/messaging-blob-helpers.js
 // META: script=resources/messaging-serialize-helpers.js
 // META: script=script-tests/FileSystemBaseHandle-postMessage-windows.js
+// META: timeout=long
diff --git a/tests/wpt/web-platform-tests/native-file-system/sandboxed_FileSystemBaseHandle-postMessage-workers.tentative.https.window.js b/tests/wpt/web-platform-tests/native-file-system/sandboxed_FileSystemBaseHandle-postMessage-workers.tentative.https.window.js
index c5e1ef089d0..e690682b6ff 100644
--- a/tests/wpt/web-platform-tests/native-file-system/sandboxed_FileSystemBaseHandle-postMessage-workers.tentative.https.window.js
+++ b/tests/wpt/web-platform-tests/native-file-system/sandboxed_FileSystemBaseHandle-postMessage-workers.tentative.https.window.js
@@ -5,3 +5,4 @@
 // META: script=resources/messaging-blob-helpers.js
 // META: script=resources/messaging-serialize-helpers.js
 // META: script=script-tests/FileSystemBaseHandle-postMessage-workers.js
+// META: timeout=long
diff --git a/tests/wpt/web-platform-tests/tools/ci/azure/safari-technology-preview.rb b/tests/wpt/web-platform-tests/tools/ci/azure/safari-technology-preview.rb
index c7d83bab9be..63ad4e5425e 100644
--- a/tests/wpt/web-platform-tests/tools/ci/azure/safari-technology-preview.rb
+++ b/tests/wpt/web-platform-tests/tools/ci/azure/safari-technology-preview.rb
@@ -1,10 +1,10 @@
 cask 'safari-technology-preview' do
   if MacOS.version <= :mojave
-    version '107,001-09573-20200527-5319cd41-1eb4-412a-817a-bf376957b539'
-    sha256 'c06f7ecd3fb310bc59e06010d1f8c6dbdb57dbc671070fa0d9fc69c295eb0190'
+    version '108,001-15210-20200610-d35e22e0-d9fa-4503-9988-cf7b2b554e15'
+    sha256 '0299fd2f2836b170a8b633b00d289bcc6913716042e82251af4fa1d5394b87d5'
   else
-    version '107,001-09514-20200527-05f7a42c-d9a0-4a60-ba12-97f2145db993'
-    sha256 '50baba474a0f0c773e4907ba8b06c80171de79f15b2ee653301cfe8230d0a0ef'
+    version '108,001-16091-20200610-09f04256-ae36-4930-b7c4-b1333f8d8e5f'
+    sha256 '22a4d9ca7fb39227cbf4a83be13ad05973171cf88eb6bcc2fac4556a36017357'
   end
 
   url "https://secure-appldnld.apple.com/STP/#{version.after_comma}/SafariTechnologyPreview.dmg"
diff --git a/tests/wpt/web-platform-tests/tools/wptserve/tests/functional/test_request.py b/tests/wpt/web-platform-tests/tools/wptserve/tests/functional/test_request.py
index d94580140e2..b30e6c4cb64 100644
--- a/tests/wpt/web-platform-tests/tools/wptserve/tests/functional/test_request.py
+++ b/tests/wpt/web-platform-tests/tools/wptserve/tests/functional/test_request.py
@@ -1,5 +1,6 @@
 # -*- coding: utf-8 -*-
 import pytest
+from six import PY3
 
 wptserve = pytest.importorskip("wptserve")
 from .base import TestUsingServer
@@ -117,7 +118,7 @@ class TestRequest(TestUsingServer):
     def test_non_ascii_in_headers(self):
         @wptserve.handlers.handler
         def handler(request, response):
-            return request.headers["foo"]
+            return request.headers[b"foo"]
 
         route = ("GET", "/test/test_unicode_in_headers", handler)
         self.server.router.register(*route)
@@ -133,6 +134,45 @@ class TestRequest(TestUsingServer):
         resp = self.request(route[1], headers={"foo": encoded_text})
         self.assertEqual(encoded_text, resp.read())
 
+    def test_non_ascii_in_GET_params(self):
+        @wptserve.handlers.handler
+        def handler(request, response):
+            return request.GET[b"foo"]
+
+        route = ("GET", "/test/test_unicode_in_get", handler)
+        self.server.router.register(*route)
+
+        # We intentionally choose an encoding that's not the default UTF-8.
+        encoded_text = u"どうも".encode("shift-jis")
+        if PY3:
+            from urllib.parse import quote_from_bytes
+            quoted = quote_from_bytes(encoded_text)
+        else:
+            from urllib import quote
+            quoted = quote(encoded_text)
+        resp = self.request(route[1], query="foo="+quoted)
+        self.assertEqual(encoded_text, resp.read())
+
+    def test_non_ascii_in_POST_params(self):
+        @wptserve.handlers.handler
+        def handler(request, response):
+            return request.POST[b"foo"]
+
+        route = ("POST", "/test/test_unicode_in_POST", handler)
+        self.server.router.register(*route)
+
+        # We intentionally choose an encoding that's not the default UTF-8.
+        encoded_text = u"どうも".encode("shift-jis")
+        if PY3:
+            from urllib.parse import quote_from_bytes
+            # After urlencoding, the string should only contain ASCII.
+            quoted = quote_from_bytes(encoded_text).encode("ascii")
+        else:
+            from urllib import quote
+            quoted = quote(encoded_text)
+        resp = self.request(route[1], method="POST", body=b"foo="+quoted)
+        self.assertEqual(encoded_text, resp.read())
+
 
 class TestAuth(TestUsingServer):
     def test_auth(self):
diff --git a/tests/wpt/web-platform-tests/tools/wptserve/wptserve/request.py b/tests/wpt/web-platform-tests/tools/wptserve/wptserve/request.py
index 7c4d02d6de6..541ac04e7d0 100644
--- a/tests/wpt/web-platform-tests/tools/wptserve/wptserve/request.py
+++ b/tests/wpt/web-platform-tests/tools/wptserve/wptserve/request.py
@@ -294,7 +294,12 @@ class Request(object):
     @property
     def GET(self):
         if self._GET is None:
-            params = parse_qsl(self.url_parts.query, keep_blank_values=True)
+            kwargs = {
+                "keep_blank_values": True,
+            }
+            if PY3:
+                kwargs["encoding"] = "iso-8859-1"
+            params = parse_qsl(self.url_parts.query, **kwargs)
             self._GET = MultiDict()
             for key, value in params:
                 self._GET.add(isomorphic_encode(key), isomorphic_encode(value))
diff --git a/tests/wpt/web-platform-tests/wasm/jsapi/bad-imports.js b/tests/wpt/web-platform-tests/wasm/jsapi/bad-imports.js
index afd41936d3e..786fc650e32 100644
--- a/tests/wpt/web-platform-tests/wasm/jsapi/bad-imports.js
+++ b/tests/wpt/web-platform-tests/wasm/jsapi/bad-imports.js
@@ -11,6 +11,16 @@
  * (if any) yields the correct error.
  */
 function test_bad_imports(t) {
+  function value_type(type) {
+    switch (type) {
+      case "i32": return kWasmI32;
+      case "i64": return kWasmI64;
+      case "f32": return kWasmF32;
+      case "f64": return kWasmF64;
+      default: throw new TypeError(`Unexpected type ${type}`);
+    }
+  }
+
   for (const value of [null, true, "", Symbol(), 1, 0.1, NaN]) {
     t(`Non-object imports argument: ${format_value(value)}`,
       TypeError,
@@ -45,17 +55,6 @@ function test_bad_imports(t) {
       value);
   }
 
-  t(`Importing an i64 global`,
-    WebAssembly.LinkError,
-    builder => {
-      builder.addImportedGlobal("module", "global", kWasmI64);
-    },
-    {
-      "module": {
-        "global": 0,
-      },
-    });
-
   for (const value of [undefined, null, true, "", Symbol(), 1, 0.1, NaN, {}]) {
     t(`Importing a function with an incorrectly-typed value: ${format_value(value)}`,
       WebAssembly.LinkError,
@@ -79,20 +78,51 @@ function test_bad_imports(t) {
     [WebAssembly.Global, "WebAssembly.Global"],
     [WebAssembly.Global.prototype, "WebAssembly.Global.prototype"],
     [Object.create(WebAssembly.Global.prototype), "Object.create(WebAssembly.Global.prototype)"],
-    [new WebAssembly.Global({value: "f32"}), "WebAssembly.Global object (wrong value type)"],
   ];
 
-  for (const [value, name = format_value(value)] of nonGlobals) {
-    t(`Importing a global with an incorrectly-typed value: ${name}`,
+  for (const type of ["i32", "i64", "f32", "f64"]) {
+    const extendedNonGlobals = nonGlobals.concat([
+      type === "i64" ? [0, "Number"] : [0n, "BigInt"],
+      [new WebAssembly.Global({value: type === "f32" ? "f64" : "f32"}), "WebAssembly.Global object (wrong value type)"],
+    ]);
+    for (const [value, name = format_value(value)] of extendedNonGlobals) {
+      t(`Importing an ${type} global with an incorrectly-typed value: ${name}`,
+        WebAssembly.LinkError,
+        builder => {
+          builder.addImportedGlobal("module", "global", value_type(type));
+        },
+        {
+          "module": {
+            "global": value,
+          },
+        });
+    }
+  }
+
+  for (const type of ["i32", "i64", "f32", "f64"]) {
+    const value = type === "i64" ? 0n : 0;
+    t(`Importing an ${type} mutable global with a primitive value`,
       WebAssembly.LinkError,
       builder => {
-        builder.addImportedGlobal("module", "global", kWasmI32);
+        builder.addImportedGlobal("module", "global", value_type(type), true);
       },
       {
         "module": {
           "global": value,
         },
       });
+
+    const global = new WebAssembly.Global({ "value": type }, value);
+    t(`Importing an ${type} mutable global with an immutable Global object`,
+      WebAssembly.LinkError,
+      builder => {
+        builder.addImportedGlobal("module", "global", value_type(type), true);
+      },
+      {
+        "module": {
+          "global": global,
+        },
+      });
   }
 
   const nonMemories = [
diff --git a/tests/wpt/web-platform-tests/wasm/jsapi/global/constructor.any.js b/tests/wpt/web-platform-tests/wasm/jsapi/global/constructor.any.js
index b008ef30160..f536f5d7b5d 100644
--- a/tests/wpt/web-platform-tests/wasm/jsapi/global/constructor.any.js
+++ b/tests/wpt/web-platform-tests/wasm/jsapi/global/constructor.any.js
@@ -90,8 +90,7 @@ test(() => {
 test(() => {
   const argument = { "value": "i64" };
   const global = new WebAssembly.Global(argument);
-  assert_throws_js(TypeError, () => global.value);
-  assert_throws_js(TypeError, () => global.valueOf());
+  assert_Global(global, 0n);
 }, "i64 with default");
 
 for (const type of ["i32", "f32", "f64"]) {
@@ -108,8 +107,10 @@ for (const type of ["i32", "f32", "f64"]) {
     [false, 0],
     [2, 2],
     ["3", 3],
-    [{ toString() { return "5" } }, 5, "object with toString"],
-    [{ valueOf() { return "8" } }, 8, "object with valueOf"],
+    [{ toString() { return "5" } }, 5, "object with toString returning string"],
+    [{ valueOf() { return "8" } }, 8, "object with valueOf returning string"],
+    [{ toString() { return 6 } }, 6, "object with toString returning number"],
+    [{ valueOf() { return 9 } }, 9, "object with valueOf returning number"],
   ];
   for (const [value, expected, name = format_value(value)] of valueArguments) {
     test(() => {
@@ -118,6 +119,44 @@ for (const type of ["i32", "f32", "f64"]) {
       assert_Global(global, expected);
     }, `Explicit value ${name} for type ${type}`);
   }
+
+  test(() => {
+    const argument = { "value": type };
+    assert_throws_js(TypeError, () => new WebAssembly.Global(argument, 0n));
+  }, `BigInt value for type ${type}`);
+}
+
+const valueArguments = [
+  [undefined, 0n],
+  [true, 1n],
+  [false, 0n],
+  ["3", 3n],
+  [123n, 123n],
+  [{ toString() { return "5" } }, 5n, "object with toString returning string"],
+  [{ valueOf() { return "8" } }, 8n, "object with valueOf returning string"],
+  [{ toString() { return 6n } }, 6n, "object with toString returning bigint"],
+  [{ valueOf() { return 9n } }, 9n, "object with valueOf returning bigint"],
+];
+for (const [value, expected, name = format_value(value)] of valueArguments) {
+  test(() => {
+    const argument = { "value": "i64" };
+    const global = new WebAssembly.Global(argument, value);
+    assert_Global(global, expected);
+  }, `Explicit value ${name} for type i64`);
+}
+
+const invalidBigints = [
+  null,
+  666,
+  { toString() { return 5 } },
+  { valueOf() { return 8 } },
+  Symbol(),
+];
+for (const invalidBigint of invalidBigints) {
+  test(() => {
+    var argument = { "value": "i64" };
+    assert_throws_js(TypeError, () => new WebAssembly.Global(argument, invalidBigint));
+  }, `Pass non-bigint as i64 Global value: ${format_value(invalidBigint)}`);
 }
 
 test(() => {
diff --git a/tests/wpt/web-platform-tests/wasm/jsapi/global/value-get-set.any.js b/tests/wpt/web-platform-tests/wasm/jsapi/global/value-get-set.any.js
index 43d8474a25d..f95b7ca9e3f 100644
--- a/tests/wpt/web-platform-tests/wasm/jsapi/global/value-get-set.any.js
+++ b/tests/wpt/web-platform-tests/wasm/jsapi/global/value-get-set.any.js
@@ -28,7 +28,8 @@ test(() => {
   }
 }, "Branding");
 
-for (const type of ["i32", "f32", "f64"]) {
+for (const type of ["i32", "i64", "f32", "f64"]) {
+  const [initial, value, invalid] = type === "i64" ? [0n, 1n, 2] : [0, 1, 2n];
   const immutableOptions = [
     [{}, "missing"],
     [{ "mutable": undefined }, "undefined"],
@@ -41,20 +42,20 @@ for (const type of ["i32", "f32", "f64"]) {
     test(() => {
       opts.value = type;
       const global = new WebAssembly.Global(opts);
-      assert_equals(global.value, 0, "initial value");
-      assert_equals(global.valueOf(), 0, "initial valueOf");
+      assert_equals(global.value, initial, "initial value");
+      assert_equals(global.valueOf(), initial, "initial valueOf");
 
-      assert_throws_js(TypeError, () => global.value = 1);
+      assert_throws_js(TypeError, () => global.value = value);
 
-      assert_equals(global.value, 0, "post-set value");
-      assert_equals(global.valueOf(), 0, "post-set valueOf");
+      assert_equals(global.value, initial, "post-set value");
+      assert_equals(global.valueOf(), initial, "post-set valueOf");
     }, `Immutable ${type} (${name})`);
 
     test(t => {
       opts.value = type;
       const global = new WebAssembly.Global(opts);
-      assert_equals(global.value, 0, "initial value");
-      assert_equals(global.valueOf(), 0, "initial valueOf");
+      assert_equals(global.value, initial, "initial value");
+      assert_equals(global.valueOf(), initial, "initial valueOf");
 
       const value = {
         valueOf: t.unreached_func("should not call valueOf"),
@@ -62,8 +63,8 @@ for (const type of ["i32", "f32", "f64"]) {
       };
       assert_throws_js(TypeError, () => global.value = value);
 
-      assert_equals(global.value, 0, "post-set value");
-      assert_equals(global.valueOf(), 0, "post-set valueOf");
+      assert_equals(global.value, initial, "post-set value");
+      assert_equals(global.valueOf(), initial, "post-set valueOf");
     }, `Immutable ${type} with ToNumber side-effects (${name})`);
   }
 
@@ -77,13 +78,15 @@ for (const type of ["i32", "f32", "f64"]) {
     test(() => {
       opts.value = type;
       const global = new WebAssembly.Global(opts);
-      assert_equals(global.value, 0, "initial value");
-      assert_equals(global.valueOf(), 0, "initial valueOf");
+      assert_equals(global.value, initial, "initial value");
+      assert_equals(global.valueOf(), initial, "initial valueOf");
 
-      global.value = 1;
+      global.value = value;
 
-      assert_equals(global.value, 1, "post-set value");
-      assert_equals(global.valueOf(), 1, "post-set valueOf");
+      assert_throws_js(TypeError, () => global.value = invalid);
+
+      assert_equals(global.value, value, "post-set value");
+      assert_equals(global.valueOf(), value, "post-set valueOf");
     }, `Mutable ${type} (${name})`);
   }
 }
@@ -91,20 +94,33 @@ for (const type of ["i32", "f32", "f64"]) {
 test(() => {
   const argument = { "value": "i64", "mutable": true };
   const global = new WebAssembly.Global(argument);
-  assert_throws_js(TypeError, () => global.value);
-  assert_throws_js(TypeError, () => global.value = 0);
-  assert_throws_js(TypeError, () => global.valueOf());
-}, "i64 with default");
 
-test(t => {
-  const argument = { "value": "i64", "mutable": true };
-  const global = new WebAssembly.Global(argument);
-  const value = {
-    valueOf: t.unreached_func("should not call valueOf"),
-    toString: t.unreached_func("should not call toString"),
-  };
-  assert_throws_js(TypeError, () => global.value = value);
-}, "i64 with ToNumber side-effects");
+  assert_equals(global.value, 0n, "initial value using ToJSValue");
+
+  const valid = [
+    [123n, 123n],
+    [2n ** 63n, - (2n ** 63n)],
+    [true, 1n],
+    [false, 0n],
+    ["456", 456n],
+  ];
+  for (const [input, output] of valid) {
+    global.value = input;
+    assert_equals(global.valueOf(), output, "post-set valueOf");
+  }
+
+  const invalid = [
+    undefined,
+    null,
+    0,
+    1,
+    4.2,
+    Symbol(),
+  ];
+  for (const input of invalid) {
+    assert_throws_js(TypeError, () => global.value = input);
+  }
+}, "i64 mutability");
 
 test(() => {
   const argument = { "value": "i32", "mutable": true };
diff --git a/tests/wpt/web-platform-tests/wasm/jsapi/instanceTestFactory.js b/tests/wpt/web-platform-tests/wasm/jsapi/instanceTestFactory.js
index c81672f208b..86f593f46f8 100644
--- a/tests/wpt/web-platform-tests/wasm/jsapi/instanceTestFactory.js
+++ b/tests/wpt/web-platform-tests/wasm/jsapi/instanceTestFactory.js
@@ -210,6 +210,415 @@ const instanceTestFactory = [
     }
   ],
 
+  [
+    "i64 exports and imports",
+    function() {
+      const value = 102n;
+
+      const builder = new WasmModuleBuilder();
+
+      const index = builder.addImportedGlobal("module", "global", kWasmI64);
+      builder
+        .addFunction("fn", kSig_l_v)
+        .addBody([
+            kExprGlobalGet,
+            index,
+            kExprReturn,
+        ])
+        .exportFunc();
+
+      const index2 = builder.addImportedGlobal("module", "global2", kWasmI64);
+      builder.addExportOfKind("global", kExternalGlobal, index2);
+
+      const buffer = builder.toBuffer();
+
+      const imports = {
+        "module": {
+          "global": value,
+          "global2": 2n ** 63n,
+        },
+      };
+
+      const exports = {
+        "fn": { "kind": "function", "name": "0", "length": 0 },
+        "global": { "kind": "global", "value": -(2n ** 63n) },
+      };
+
+      return {
+        buffer,
+        args: [imports],
+        exports,
+        verify: instance => assert_equals(instance.exports.fn(), value)
+      };
+    }
+  ],
+
+  [
+    "import with i32-returning function",
+    function() {
+      const builder = new WasmModuleBuilder();
+
+      const fnIndex = builder.addImport("module", "fn", kSig_i_v);
+      const fn2 = builder
+        .addFunction("fn2", kSig_v_v)
+        .addBody([
+            kExprCallFunction,
+            fnIndex,
+            kExprReturn,
+        ])
+        .exportFunc();
+
+      const buffer = builder.toBuffer();
+
+      let called = false;
+      const imports = {
+        "module": {
+          "fn": function() {
+            called = true;
+            return 6n;
+          },
+        },
+      };
+
+      return {
+        buffer,
+        args: [imports],
+        exports: {
+          "fn2": { "kind": "function", "name": String(fn2.index), "length": 0 },
+        },
+        verify: instance => {
+          assert_throws_js(TypeError, () => instance.exports.fn2());
+          assert_true(called, "Should have called into JS");
+        }
+      };
+    }
+  ],
+
+  [
+    "import with function that takes and returns i32",
+    function() {
+      const builder = new WasmModuleBuilder();
+
+      const fnIndex = builder.addImport("module", "fn", kSig_i_i);
+      const fn2 = builder
+        .addFunction("fn2", kSig_i_v)
+        .addBody([
+            kExprI32Const, 0x66,
+            kExprCallFunction,
+            fnIndex,
+            kExprReturn,
+        ])
+        .exportFunc();
+
+      const buffer = builder.toBuffer();
+
+      let called = false;
+      const imports = {
+        "module": {
+          "fn": function(n) {
+            called = true;
+            assert_equals(n, -26);
+            return { valueOf() { return 6; } };
+          },
+        },
+      };
+
+      return {
+        buffer,
+        args: [imports],
+        exports: {
+          "fn2": { "kind": "function", "name": String(fn2.index), "length": 0 },
+        },
+        verify: instance => {
+          assert_equals(instance.exports.fn2(), 6);
+          assert_true(called, "Should have called into JS");
+        }
+      };
+    }
+  ],
+
+  [
+    "import with i64-returning function",
+    function() {
+      const builder = new WasmModuleBuilder();
+
+      const fnIndex = builder.addImport("module", "fn", kSig_l_v);
+      const fn2 = builder
+        .addFunction("fn2", kSig_v_v)
+        .addBody([
+            kExprCallFunction,
+            fnIndex,
+            kExprReturn,
+        ])
+        .exportFunc();
+
+      const buffer = builder.toBuffer();
+
+      let called = false;
+      const imports = {
+        "module": {
+          "fn": function() {
+            called = true;
+            return 6;
+          },
+        },
+      };
+
+      return {
+        buffer,
+        args: [imports],
+        exports: {
+          "fn2": { "kind": "function", "name": String(fn2.index), "length": 0 },
+        },
+        verify: instance => {
+          assert_throws_js(TypeError, () => instance.exports.fn2());
+          assert_true(called, "Should have called into JS");
+        }
+      };
+    }
+  ],
+
+  [
+    "import with function that takes and returns i64",
+    function() {
+      const builder = new WasmModuleBuilder();
+
+      const fnIndex = builder.addImport("module", "fn", kSig_l_l);
+      const fn2 = builder
+        .addFunction("fn2", kSig_l_v)
+        .addBody([
+            kExprI64Const, 0x66,
+            kExprCallFunction,
+            fnIndex,
+            kExprReturn,
+        ])
+        .exportFunc();
+
+      const buffer = builder.toBuffer();
+
+      let called = false;
+      const imports = {
+        "module": {
+          "fn": function(n) {
+            called = true;
+            assert_equals(n, -26n);
+            return { valueOf() { return 6n; } };
+          },
+        },
+      };
+
+      return {
+        buffer,
+        args: [imports],
+        exports: {
+          "fn2": { "kind": "function", "name": String(fn2.index), "length": 0 },
+        },
+        verify: instance => {
+          assert_equals(instance.exports.fn2(), 6n);
+          assert_true(called, "Should have called into JS");
+        }
+      };
+    }
+  ],
+
+  [
+    "import with i32-taking function",
+    function() {
+      const builder = new WasmModuleBuilder();
+
+      const fn = builder
+        .addFunction("fn", kSig_v_i)
+        .addBody([
+            kExprReturn,
+        ])
+        .exportFunc();
+
+      const buffer = builder.toBuffer();
+
+      return {
+        buffer,
+        args: [],
+        exports: {
+          "fn": { "kind": "function", "name": String(fn.index), "length": 1 },
+        },
+        verify: instance => assert_throws_js(TypeError, () => instance.exports.fn(6n))
+      };
+    }
+  ],
+
+  [
+    "import with i64-taking function",
+    function() {
+      const builder = new WasmModuleBuilder();
+
+      const fn = builder
+        .addFunction("fn", kSig_v_l)
+        .addBody([
+            kExprReturn,
+        ])
+        .exportFunc();
+
+      const buffer = builder.toBuffer();
+
+      return {
+        buffer,
+        args: [],
+        exports: {
+          "fn": { "kind": "function", "name": String(fn.index), "length": 1 },
+        },
+        verify: instance => assert_throws_js(TypeError, () => instance.exports.fn(6))
+      };
+    }
+  ],
+
+  [
+    "export i64-returning function",
+    function() {
+      const builder = new WasmModuleBuilder();
+
+      const fn = builder
+        .addFunction("fn", kSig_l_v)
+        .addBody([
+            kExprI64Const, 0x66,
+            kExprReturn,
+        ])
+        .exportFunc();
+
+      const buffer = builder.toBuffer();
+
+      return {
+        buffer,
+        args: [],
+        exports: {
+          "fn": { "kind": "function", "name": String(fn.index), "length": 0 },
+        },
+        verify: instance => assert_equals(instance.exports.fn(), -26n)
+      };
+    }
+  ],
+
+  [
+    "i32 mutable WebAssembly.Global import",
+    function() {
+      const initial = 102;
+      const value = new WebAssembly.Global({ "value": "i32", "mutable": true }, initial);
+
+      const builder = new WasmModuleBuilder();
+
+      const index = builder.addImportedGlobal("module", "global", kWasmI32, true);
+      const fn = builder
+        .addFunction("fn", kSig_i_v)
+        .addBody([
+            kExprGlobalGet,
+            index,
+            kExprReturn,
+        ])
+        .exportFunc();
+
+      const buffer = builder.toBuffer();
+
+      const imports = {
+        "module": {
+          "global": value,
+        },
+      };
+
+      const exports = {
+        "fn": { "kind": "function", "name": String(fn.index), "length": 0 },
+      };
+
+      return {
+        buffer,
+        args: [imports],
+        exports,
+        verify: instance => {
+          assert_equals(instance.exports.fn(), initial);
+          const after = 201;
+          value.value = after;
+          assert_equals(instance.exports.fn(), after);
+        }
+      };
+    }
+  ],
+
+  [
+    "i64 mutable WebAssembly.Global import",
+    function() {
+      const initial = 102n;
+      const value = new WebAssembly.Global({ "value": "i64", "mutable": true }, initial);
+
+      const builder = new WasmModuleBuilder();
+
+      const index = builder.addImportedGlobal("module", "global", kWasmI64, true);
+      const fn = builder
+        .addFunction("fn", kSig_l_v)
+        .addBody([
+            kExprGlobalGet,
+            index,
+            kExprReturn,
+        ])
+        .exportFunc();
+
+      const buffer = builder.toBuffer();
+
+      const imports = {
+        "module": {
+          "global": value,
+        },
+      };
+
+      const exports = {
+        "fn": { "kind": "function", "name": String(fn.index), "length": 0 },
+      };
+
+      return {
+        buffer,
+        args: [imports],
+        exports,
+        verify: instance => {
+          assert_equals(instance.exports.fn(), initial);
+          const after = 201n;
+          value.value = after;
+          assert_equals(instance.exports.fn(), after);
+        }
+      };
+    }
+  ],
+
+  [
+    "Multiple i64 arguments",
+    function() {
+      const builder = new WasmModuleBuilder();
+
+      const fn = builder
+          .addFunction("fn", kSig_l_ll)
+          .addBody([
+              kExprLocalGet, 1,
+          ])
+          .exportFunc();
+
+      const buffer = builder.toBuffer();
+
+      const exports = {
+        "fn": { "kind": "function", "name": String(fn.index), "length": 2 },
+      };
+
+      return {
+        buffer,
+        args: [],
+        exports,
+        verify: instance => {
+          const fn = instance.exports.fn;
+          assert_equals(fn(1n, 0n), 0n);
+          assert_equals(fn(1n, 123n), 123n);
+          assert_equals(fn(1n, -123n), -123n);
+          assert_equals(fn(1n, "5"), 5n);
+          assert_throws_js(TypeError, () => fn(1n, 5));
+        }
+      };
+    }
+  ],
+
   [
     "stray argument",
     function() {
diff --git a/tests/wpt/web-platform-tests/webrtc/receiver-track-live.html b/tests/wpt/web-platform-tests/webrtc/receiver-track-live.html
new file mode 100644
index 00000000000..3d41724fb59
--- /dev/null
+++ b/tests/wpt/web-platform-tests/webrtc/receiver-track-live.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Remote tracks should not get ended except for stop/close</title>
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="RTCPeerConnection-helper.js"></script>
+</head>
+<body>
+    <video id="video" controls autoplay playsinline></video>
+    <script>
+    let pc1, pc2;
+    let localTrack, remoteTrack;
+    promise_test(async (test) => {
+        const localStream = await navigator.mediaDevices.getUserMedia({audio: true});
+        localTrack = localStream.getAudioTracks()[0];
+
+        pc1 = new RTCPeerConnection();
+        pc1.addTrack(localTrack, localStream);
+        pc2 = new RTCPeerConnection();
+
+        let trackPromise = new Promise(resolve => {
+            pc2.ontrack = e => resolve(e.track);
+        });
+
+        exchangeIceCandidates(pc1, pc2);
+        await exchangeOfferAnswer(pc1, pc2);
+
+        remoteTrack = await trackPromise;
+        video.srcObject = new MediaStream([remoteTrack]);
+        await video.play();
+    }, "Setup audio call");
+
+    promise_test(async (test) => {
+        pc1.getTransceivers()[0].direction = "inactive";
+
+        let offer = await pc1.createOffer();
+        await pc1.setLocalDescription(offer);
+
+        // Let's remove ssrc lines
+        let sdpLines = offer.sdp.split("\r\n");
+        offer.sdp = sdpLines.filter(line => line && !line.startsWith("a=ssrc")).join("\r\n") + "\r\n";
+
+        await pc2.setRemoteDescription(offer);
+        let answer = await pc2.createAnswer();
+        await pc2.setLocalDescription(answer);
+        await pc1.setRemoteDescription(answer);
+
+        assert_equals(remoteTrack.readyState, "live");
+    }, "Inactivate the audio transceiver");
+
+    promise_test(async (test) => {
+        pc1.getTransceivers()[0].direction = "sendonly";
+
+        await exchangeOfferAnswer(pc1, pc2);
+
+        assert_equals(remoteTrack.readyState, "live");
+    }, "Reactivate the audio transceiver");
+
+    promise_test(async (test) => {
+        pc1.close();
+        pc2.close();
+        localTrack.stop();
+    }, "Clean-up");
+    </script>
+</body>
+</html>