diff --git a/tests/wpt/mozilla/meta/MANIFEST.json b/tests/wpt/mozilla/meta/MANIFEST.json
index 1983cb90056..3db948b5310 100644
--- a/tests/wpt/mozilla/meta/MANIFEST.json
+++ b/tests/wpt/mozilla/meta/MANIFEST.json
@@ -6473,6 +6473,234 @@
      {}
     ]
    ],
+   "mozilla/css-paint-api/background-image-alpha.html": [
+    [
+     "/_mozilla/mozilla/css-paint-api/background-image-alpha.html",
+     [
+      [
+       "/_mozilla/mozilla/css-paint-api/background-image-alpha-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "mozilla/css-paint-api/background-image-multiple.html": [
+    [
+     "/_mozilla/mozilla/css-paint-api/background-image-multiple.html",
+     [
+      [
+       "/_mozilla/mozilla/css-paint-api/background-image-multiple-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "mozilla/css-paint-api/background-image-tiled.html": [
+    [
+     "/_mozilla/mozilla/css-paint-api/background-image-tiled.html",
+     [
+      [
+       "/_mozilla/mozilla/css-paint-api/background-image-tiled-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "mozilla/css-paint-api/invalid-image-constructor-error.html": [
+    [
+     "/_mozilla/mozilla/css-paint-api/invalid-image-constructor-error.html",
+     [
+      [
+       "/_mozilla/mozilla/css-paint-api/invalid-image-constructor-error-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "mozilla/css-paint-api/invalid-image-paint-error.html": [
+    [
+     "/_mozilla/mozilla/css-paint-api/invalid-image-paint-error.html",
+     [
+      [
+       "/_mozilla/mozilla/css-paint-api/invalid-image-paint-error-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "mozilla/css-paint-api/invalid-image-pending-script.html": [
+    [
+     "/_mozilla/mozilla/css-paint-api/invalid-image-pending-script.html",
+     [
+      [
+       "/_mozilla/mozilla/css-paint-api/invalid-image-pending-script-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "mozilla/css-paint-api/overdraw.html": [
+    [
+     "/_mozilla/mozilla/css-paint-api/overdraw.html",
+     [
+      [
+       "/_mozilla/mozilla/css-paint-api/overdraw-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "mozilla/css-paint-api/paint-arguments.html": [
+    [
+     "/_mozilla/mozilla/css-paint-api/paint-arguments.html",
+     [
+      [
+       "/_mozilla/mozilla/css-paint-api/paint-arguments-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "mozilla/css-paint-api/paint-function-arguments.html": [
+    [
+     "/_mozilla/mozilla/css-paint-api/paint-function-arguments.html",
+     [
+      [
+       "/_mozilla/mozilla/css-paint-api/paint-function-arguments-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "mozilla/css-paint-api/paint2d-composite.html": [
+    [
+     "/_mozilla/mozilla/css-paint-api/paint2d-composite.html",
+     [
+      [
+       "/_mozilla/mozilla/css-paint-api/paint2d-composite-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "mozilla/css-paint-api/paint2d-filter.html": [
+    [
+     "/_mozilla/mozilla/css-paint-api/paint2d-filter.html",
+     [
+      [
+       "/_mozilla/mozilla/css-paint-api/paint2d-filter-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "mozilla/css-paint-api/paint2d-gradient.html": [
+    [
+     "/_mozilla/mozilla/css-paint-api/paint2d-gradient.html",
+     [
+      [
+       "/_mozilla/mozilla/css-paint-api/paint2d-gradient-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "mozilla/css-paint-api/paint2d-image.html": [
+    [
+     "/_mozilla/mozilla/css-paint-api/paint2d-image.html",
+     [
+      [
+       "/_mozilla/mozilla/css-paint-api/paint2d-image-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "mozilla/css-paint-api/paint2d-paths.html": [
+    [
+     "/_mozilla/mozilla/css-paint-api/paint2d-paths.html",
+     [
+      [
+       "/_mozilla/mozilla/css-paint-api/paint2d-paths-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "mozilla/css-paint-api/paint2d-rects.html": [
+    [
+     "/_mozilla/mozilla/css-paint-api/paint2d-rects.html",
+     [
+      [
+       "/_mozilla/mozilla/css-paint-api/paint2d-rects-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "mozilla/css-paint-api/paint2d-shadows.html": [
+    [
+     "/_mozilla/mozilla/css-paint-api/paint2d-shadows.html",
+     [
+      [
+       "/_mozilla/mozilla/css-paint-api/paint2d-shadows-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "mozilla/css-paint-api/paint2d-transform.html": [
+    [
+     "/_mozilla/mozilla/css-paint-api/paint2d-transform.html",
+     [
+      [
+       "/_mozilla/mozilla/css-paint-api/paint2d-transform-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "mozilla/css-paint-api/valid-image-after-load.html": [
+    [
+     "/_mozilla/mozilla/css-paint-api/valid-image-after-load.html",
+     [
+      [
+       "/_mozilla/mozilla/css-paint-api/valid-image-after-load-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "mozilla/css-paint-api/valid-image-before-load.html": [
+    [
+     "/_mozilla/mozilla/css-paint-api/valid-image-before-load.html",
+     [
+      [
+       "/_mozilla/mozilla/css-paint-api/valid-image-before-load-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
    "mozilla/details_ui_closed.html": [
     [
      "/_mozilla/mozilla/details_ui_closed.html",
@@ -9643,6 +9871,111 @@
      {}
     ]
    ],
+   "mozilla/css-paint-api/OWNERS": [
+    [
+     {}
+    ]
+   ],
+   "mozilla/css-paint-api/background-image-alpha-ref.html": [
+    [
+     {}
+    ]
+   ],
+   "mozilla/css-paint-api/background-image-multiple-ref.html": [
+    [
+     {}
+    ]
+   ],
+   "mozilla/css-paint-api/background-image-tiled-ref.html": [
+    [
+     {}
+    ]
+   ],
+   "mozilla/css-paint-api/css-paint-tests.js": [
+    [
+     {}
+    ]
+   ],
+   "mozilla/css-paint-api/invalid-image-constructor-error-ref.html": [
+    [
+     {}
+    ]
+   ],
+   "mozilla/css-paint-api/invalid-image-paint-error-ref.html": [
+    [
+     {}
+    ]
+   ],
+   "mozilla/css-paint-api/invalid-image-pending-script-ref.html": [
+    [
+     {}
+    ]
+   ],
+   "mozilla/css-paint-api/overdraw-ref.html": [
+    [
+     {}
+    ]
+   ],
+   "mozilla/css-paint-api/paint-arguments-ref.html": [
+    [
+     {}
+    ]
+   ],
+   "mozilla/css-paint-api/paint-function-arguments-ref.html": [
+    [
+     {}
+    ]
+   ],
+   "mozilla/css-paint-api/paint2d-composite-ref.html": [
+    [
+     {}
+    ]
+   ],
+   "mozilla/css-paint-api/paint2d-filter-ref.html": [
+    [
+     {}
+    ]
+   ],
+   "mozilla/css-paint-api/paint2d-gradient-ref.html": [
+    [
+     {}
+    ]
+   ],
+   "mozilla/css-paint-api/paint2d-image-ref.html": [
+    [
+     {}
+    ]
+   ],
+   "mozilla/css-paint-api/paint2d-paths-ref.html": [
+    [
+     {}
+    ]
+   ],
+   "mozilla/css-paint-api/paint2d-rects-ref.html": [
+    [
+     {}
+    ]
+   ],
+   "mozilla/css-paint-api/paint2d-shadows-ref.html": [
+    [
+     {}
+    ]
+   ],
+   "mozilla/css-paint-api/paint2d-transform-ref.html": [
+    [
+     {}
+    ]
+   ],
+   "mozilla/css-paint-api/valid-image-after-load-ref.html": [
+    [
+     {}
+    ]
+   ],
+   "mozilla/css-paint-api/valid-image-before-load-ref.html": [
+    [
+     {}
+    ]
+   ],
    "mozilla/details_ui_closed_ref.html": [
     [
      {}
@@ -25681,6 +26014,166 @@
    "0163758c92997c6723c9d21be49ef7f51d8b3daf",
    "testharness"
   ],
+  "mozilla/css-paint-api/OWNERS": [
+   "0c1517f7ba747014c7c091b61d48f11421ed91c2",
+   "support"
+  ],
+  "mozilla/css-paint-api/background-image-alpha-ref.html": [
+   "45ef6e998e5f266741f5403df650cd9557dbe005",
+   "support"
+  ],
+  "mozilla/css-paint-api/background-image-alpha.html": [
+   "ec35a42013e36c05a26266f0f78a16283acc843d",
+   "reftest"
+  ],
+  "mozilla/css-paint-api/background-image-multiple-ref.html": [
+   "9ff536499d72240f67eb6911b768c624371ea678",
+   "support"
+  ],
+  "mozilla/css-paint-api/background-image-multiple.html": [
+   "f8c286926ccf981713eb34259e3f5389bf3c37f6",
+   "reftest"
+  ],
+  "mozilla/css-paint-api/background-image-tiled-ref.html": [
+   "a879be73470aae683bd7596132225770bc8be27b",
+   "support"
+  ],
+  "mozilla/css-paint-api/background-image-tiled.html": [
+   "4c7b8e525a909cbc38a2ad0b6a44a803595b6772",
+   "reftest"
+  ],
+  "mozilla/css-paint-api/css-paint-tests.js": [
+   "0e88a610e5ad9ff1deb04adec35b73caadbff201",
+   "support"
+  ],
+  "mozilla/css-paint-api/invalid-image-constructor-error-ref.html": [
+   "b0c34ee1480fe1108fe8dc53f2bbb2f3ffa1c408",
+   "support"
+  ],
+  "mozilla/css-paint-api/invalid-image-constructor-error.html": [
+   "694efcb525fed448cc757cff38ec034dad9cdb3c",
+   "reftest"
+  ],
+  "mozilla/css-paint-api/invalid-image-paint-error-ref.html": [
+   "b0c34ee1480fe1108fe8dc53f2bbb2f3ffa1c408",
+   "support"
+  ],
+  "mozilla/css-paint-api/invalid-image-paint-error.html": [
+   "3b0e6a034f3edbde6d30ad9483a50fbea0ab48bd",
+   "reftest"
+  ],
+  "mozilla/css-paint-api/invalid-image-pending-script-ref.html": [
+   "b0c34ee1480fe1108fe8dc53f2bbb2f3ffa1c408",
+   "support"
+  ],
+  "mozilla/css-paint-api/invalid-image-pending-script.html": [
+   "54a69d6d408e77bf2e91ee09564d62c8d16d1eb3",
+   "reftest"
+  ],
+  "mozilla/css-paint-api/overdraw-ref.html": [
+   "b0c34ee1480fe1108fe8dc53f2bbb2f3ffa1c408",
+   "support"
+  ],
+  "mozilla/css-paint-api/overdraw.html": [
+   "a2d730dbd6faefbd8bbd07d33f6942f6573b842e",
+   "reftest"
+  ],
+  "mozilla/css-paint-api/paint-arguments-ref.html": [
+   "cbe0372259011ca94f0fd8d233413439ba9cf117",
+   "support"
+  ],
+  "mozilla/css-paint-api/paint-arguments.html": [
+   "2807e0bc8b2e8aa9e5edf69f9de3e8d4ee853ef9",
+   "reftest"
+  ],
+  "mozilla/css-paint-api/paint-function-arguments-ref.html": [
+   "a3aebfce59d0f62ab229248b7903b0dc731835d5",
+   "support"
+  ],
+  "mozilla/css-paint-api/paint-function-arguments.html": [
+   "f3c461e7e5797d3b65058109ffc58b6c95e1a340",
+   "reftest"
+  ],
+  "mozilla/css-paint-api/paint2d-composite-ref.html": [
+   "60c069de8135b934df166560db5c592d5becbc92",
+   "support"
+  ],
+  "mozilla/css-paint-api/paint2d-composite.html": [
+   "f9d0cceb6360cbdf3478673740ecfbe67a4a11d2",
+   "reftest"
+  ],
+  "mozilla/css-paint-api/paint2d-filter-ref.html": [
+   "6f1be576ae7ead2a724357b16ea88c92b3b19a0d",
+   "support"
+  ],
+  "mozilla/css-paint-api/paint2d-filter.html": [
+   "c266200a6a990b5b23e6f9d5859f8f5c4c271be8",
+   "reftest"
+  ],
+  "mozilla/css-paint-api/paint2d-gradient-ref.html": [
+   "3b2abb3632893c0f5a2714fc325467f0076001a8",
+   "support"
+  ],
+  "mozilla/css-paint-api/paint2d-gradient.html": [
+   "6cf101de7a3aa627cb372f00eeb36e969ff25734",
+   "reftest"
+  ],
+  "mozilla/css-paint-api/paint2d-image-ref.html": [
+   "c71e0b960177b13614d2c11392c94ea155927ebe",
+   "support"
+  ],
+  "mozilla/css-paint-api/paint2d-image.html": [
+   "769d066054b6cabb77ed3f958d52bfdb17e99b8d",
+   "reftest"
+  ],
+  "mozilla/css-paint-api/paint2d-paths-ref.html": [
+   "cf154ab8a37bdbce2175193dfc456f4771bfeca8",
+   "support"
+  ],
+  "mozilla/css-paint-api/paint2d-paths.html": [
+   "8f98b1d34bb3719b5e337f279adbe63fc6c122fd",
+   "reftest"
+  ],
+  "mozilla/css-paint-api/paint2d-rects-ref.html": [
+   "2a469427fbdbee6b096a63b95846cdeda92c0255",
+   "support"
+  ],
+  "mozilla/css-paint-api/paint2d-rects.html": [
+   "e2e82b82b28af9e509a9eabf48f728dbe06b0d18",
+   "reftest"
+  ],
+  "mozilla/css-paint-api/paint2d-shadows-ref.html": [
+   "f882c26b0dfb58fe1ab3177060f421dad0148456",
+   "support"
+  ],
+  "mozilla/css-paint-api/paint2d-shadows.html": [
+   "7ca525ddfa56a8571857a8656e6bed38c440705a",
+   "reftest"
+  ],
+  "mozilla/css-paint-api/paint2d-transform-ref.html": [
+   "5eff507eeee563399205645668c7ed3df79213c9",
+   "support"
+  ],
+  "mozilla/css-paint-api/paint2d-transform.html": [
+   "e4b544068821f6f8882f05836a07a19891fc85b8",
+   "reftest"
+  ],
+  "mozilla/css-paint-api/valid-image-after-load-ref.html": [
+   "b0c34ee1480fe1108fe8dc53f2bbb2f3ffa1c408",
+   "support"
+  ],
+  "mozilla/css-paint-api/valid-image-after-load.html": [
+   "abe12a4f25b5b8a52b8e9f623ac5efa80c23dc36",
+   "reftest"
+  ],
+  "mozilla/css-paint-api/valid-image-before-load-ref.html": [
+   "b0c34ee1480fe1108fe8dc53f2bbb2f3ffa1c408",
+   "support"
+  ],
+  "mozilla/css-paint-api/valid-image-before-load.html": [
+   "fb574b4658f7c2000ec58f058ebb0fff1d88351e",
+   "reftest"
+  ],
   "mozilla/details_ui_closed.html": [
    "2acbe3afbec267bad4dd986803e636740a707507",
    "reftest"
diff --git a/tests/wpt/mozilla/meta/mozilla/css-paint-api/background-image-tiled.html.ini b/tests/wpt/mozilla/meta/mozilla/css-paint-api/background-image-tiled.html.ini
new file mode 100644
index 00000000000..70236851502
--- /dev/null
+++ b/tests/wpt/mozilla/meta/mozilla/css-paint-api/background-image-tiled.html.ini
@@ -0,0 +1,4 @@
+[background-image-tiled.html]
+  type: reftest
+  expected: FAIL
+  bug: https://github.com/servo/servo/issues/17598
diff --git a/tests/wpt/mozilla/meta/mozilla/css-paint-api/invalid-image-constructor-error.html.ini b/tests/wpt/mozilla/meta/mozilla/css-paint-api/invalid-image-constructor-error.html.ini
new file mode 100644
index 00000000000..b8b8b6a43fa
--- /dev/null
+++ b/tests/wpt/mozilla/meta/mozilla/css-paint-api/invalid-image-constructor-error.html.ini
@@ -0,0 +1,4 @@
+[invalid-image-constructor-error.html]
+  type: reftest
+  expected: FAIL
+  bug: https://github.com/servo/servo/issues/17595
diff --git a/tests/wpt/mozilla/meta/mozilla/css-paint-api/invalid-image-paint-error.html.ini b/tests/wpt/mozilla/meta/mozilla/css-paint-api/invalid-image-paint-error.html.ini
new file mode 100644
index 00000000000..12ed50a9383
--- /dev/null
+++ b/tests/wpt/mozilla/meta/mozilla/css-paint-api/invalid-image-paint-error.html.ini
@@ -0,0 +1,4 @@
+[invalid-image-paint-error.html]
+  type: reftest
+  expected: FAIL
+  bug: https://github.com/servo/servo/issues/17595
diff --git a/tests/wpt/mozilla/meta/mozilla/css-paint-api/invalid-image-pending-script.html.ini b/tests/wpt/mozilla/meta/mozilla/css-paint-api/invalid-image-pending-script.html.ini
new file mode 100644
index 00000000000..41e6a2089d7
--- /dev/null
+++ b/tests/wpt/mozilla/meta/mozilla/css-paint-api/invalid-image-pending-script.html.ini
@@ -0,0 +1,4 @@
+[invalid-image-pending-script.html]
+  type: reftest
+  expected: FAIL
+  bug: https://github.com/servo/servo/issues/17595
diff --git a/tests/wpt/mozilla/meta/mozilla/css-paint-api/paint-arguments.html.ini b/tests/wpt/mozilla/meta/mozilla/css-paint-api/paint-arguments.html.ini
new file mode 100644
index 00000000000..64a88871ab3
--- /dev/null
+++ b/tests/wpt/mozilla/meta/mozilla/css-paint-api/paint-arguments.html.ini
@@ -0,0 +1,4 @@
+[paint-arguments.html]
+  type: reftest
+  expected: FAIL
+  bug: https://github.com/servo/servo/issues/17435
diff --git a/tests/wpt/mozilla/meta/mozilla/css-paint-api/paint-function-arguments.html.ini b/tests/wpt/mozilla/meta/mozilla/css-paint-api/paint-function-arguments.html.ini
new file mode 100644
index 00000000000..80fbfd4780c
--- /dev/null
+++ b/tests/wpt/mozilla/meta/mozilla/css-paint-api/paint-function-arguments.html.ini
@@ -0,0 +1,4 @@
+[paint-function-arguments.html]
+  type: reftest
+  expected: FAIL
+  bug: https://github.com/servo/servo/issues/17435
diff --git a/tests/wpt/mozilla/meta/mozilla/css-paint-api/paint2d-composite.html.ini b/tests/wpt/mozilla/meta/mozilla/css-paint-api/paint2d-composite.html.ini
new file mode 100644
index 00000000000..53c2cefbe3d
--- /dev/null
+++ b/tests/wpt/mozilla/meta/mozilla/css-paint-api/paint2d-composite.html.ini
@@ -0,0 +1,4 @@
+[paint2d-composite.html]
+  type: reftest
+  expected: FAIL
+  bug: https://github.com/servo/servo/issues/17533
diff --git a/tests/wpt/mozilla/meta/mozilla/css-paint-api/paint2d-image.html.ini b/tests/wpt/mozilla/meta/mozilla/css-paint-api/paint2d-image.html.ini
new file mode 100644
index 00000000000..eb920e369bf
--- /dev/null
+++ b/tests/wpt/mozilla/meta/mozilla/css-paint-api/paint2d-image.html.ini
@@ -0,0 +1,4 @@
+[paint2d-image.html]
+  type: reftest
+  expected: FAIL
+  bug: https://github.com/servo/servo/issues/17432
diff --git a/tests/wpt/mozilla/meta/mozilla/css-paint-api/paint2d-paths.html.ini b/tests/wpt/mozilla/meta/mozilla/css-paint-api/paint2d-paths.html.ini
new file mode 100644
index 00000000000..c1185a0f63f
--- /dev/null
+++ b/tests/wpt/mozilla/meta/mozilla/css-paint-api/paint2d-paths.html.ini
@@ -0,0 +1,4 @@
+[paint2d-paths.html]
+  type: reftest
+  expected: FAIL
+  bug: https://github.com/servo/servo/issues/17597
diff --git a/tests/wpt/mozilla/meta/mozilla/css-paint-api/paint2d-shadows.html.ini b/tests/wpt/mozilla/meta/mozilla/css-paint-api/paint2d-shadows.html.ini
new file mode 100644
index 00000000000..081185efd6f
--- /dev/null
+++ b/tests/wpt/mozilla/meta/mozilla/css-paint-api/paint2d-shadows.html.ini
@@ -0,0 +1,4 @@
+[paint2d-shadows.html]
+  type: reftest
+  expected: FAIL
+  bug: https://github.com/servo/servo/issues/17533
diff --git a/tests/wpt/mozilla/tests/mozilla/css-paint-api/OWNERS b/tests/wpt/mozilla/tests/mozilla/css-paint-api/OWNERS
new file mode 100644
index 00000000000..bd72a2a78f7
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/css-paint-api/OWNERS
@@ -0,0 +1,3 @@
+@bfgeek
+@grorg
+@shans
diff --git a/tests/wpt/mozilla/tests/mozilla/css-paint-api/background-image-alpha-ref.html b/tests/wpt/mozilla/tests/mozilla/css-paint-api/background-image-alpha-ref.html
new file mode 100644
index 00000000000..519b3599e95
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/css-paint-api/background-image-alpha-ref.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+#background {
+  background-color: yellow;
+  display: inline-block;
+}
+
+.container {
+  font-size: 0px;
+}
+</style>
+</head>
+<body>
+
+<div id="background">
+  <div class="container">
+    <canvas id ="opaque" width="100" height="100"></canvas>
+  </div>
+  <div class="container">
+    <canvas id ="nonopaque" width="100" height="100"></canvas>
+  </div>
+</div>
+
+<script>
+function drawCanvas(canvasID, hasAlpha) {
+  var canvas = document.getElementById(canvasID);
+  var context = canvas.getContext("2d", {alpha: hasAlpha});
+  context.clearRect(0, 0, canvas.width, canvas.height);
+  context.strokeStyle = 'blue';
+  context.lineWidth = 4;
+  context.strokeRect(20, 20, 60, 60);
+};
+
+drawCanvas('opaque', false);
+drawCanvas('nonopaque', true);
+
+</script>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/mozilla/css-paint-api/background-image-alpha.html b/tests/wpt/mozilla/tests/mozilla/css-paint-api/background-image-alpha.html
new file mode 100644
index 00000000000..929483e515b
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/css-paint-api/background-image-alpha.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<link rel="match" href="background-image-alpha-ref.html">
+<style>
+.container {
+  width: 100px;
+  height: 100px;
+}
+
+#canvas-opaque {
+  background-image: paint(opaque);
+}
+
+#canvas-nonopaque {
+  background-image: paint(nonOpaque);
+}
+
+#background {
+  background-color: yellow;
+  display: inline-block;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="css-paint-tests.js"></script>
+<body>
+<div id="background">
+  <div id="canvas-opaque" class="container"></div>
+  <div id="canvas-nonopaque" class="container"></div>
+</div>
+
+<script id="code" type="text/worklet">
+registerPaint('opaque', class {
+    static get alpha() { return false; }
+    paint(ctx, geom) {
+        ctx.strokeStyle = 'blue';
+        ctx.lineWidth = 4;
+        ctx.strokeRect(20, 20, 60, 60);
+    }
+});
+
+registerPaint('nonOpaque', class {
+    static get alpha() { return true; }
+    paint(ctx, geom) {
+        ctx.strokeStyle = 'blue';
+        ctx.lineWidth = 4;
+        ctx.strokeRect(20, 20, 60, 60);
+    }
+});
+</script>
+
+<script>
+    importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
+</script>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/mozilla/css-paint-api/background-image-multiple-ref.html b/tests/wpt/mozilla/tests/mozilla/css-paint-api/background-image-multiple-ref.html
new file mode 100644
index 00000000000..536258be74c
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/css-paint-api/background-image-multiple-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<body>
+<canvas id ="output" width="100" height="100"></canvas>
+<script>
+var canvas = document.getElementById('output');
+var ctx = canvas.getContext('2d');
+
+var colors = ['red', 'green', 'blue'];
+for (var i = 2; i >= 0; i--) {
+    ctx.fillStyle = colors[i];
+    ctx.fillRect(i * 20, i * 20, 40, 40);
+}
+</script>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/mozilla/css-paint-api/background-image-multiple.html b/tests/wpt/mozilla/tests/mozilla/css-paint-api/background-image-multiple.html
new file mode 100644
index 00000000000..ea887018f80
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/css-paint-api/background-image-multiple.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<link rel="match" href="background-image-multiple-ref.html">
+<style>
+    #output {
+        width: 100px;
+        height: 100px;
+        background-image: paint(n0), paint(n1), paint(n2);
+    }
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="css-paint-tests.js"></script>
+<body>
+<div id="output"></div>
+
+<script id="code" type="text/worklet">
+var colors = ['red', 'green', 'blue'];
+
+for (let i = 0; i < 3; i++) {
+    registerPaint('n' + i, class {
+        paint(ctx, geom) {
+            ctx.fillStyle = colors[i];
+            ctx.fillRect(i * 20, i * 20, 40, 40);
+        }
+    });
+}
+</script>
+
+<script>
+    importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
+</script>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/mozilla/css-paint-api/background-image-tiled-ref.html b/tests/wpt/mozilla/tests/mozilla/css-paint-api/background-image-tiled-ref.html
new file mode 100644
index 00000000000..a0151d84cba
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/css-paint-api/background-image-tiled-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<body>
+<canvas id ="one" width="100" height="100"></canvas>
+<canvas id ="two" width="100" height="100"></canvas>
+<script>
+function drawCircle(ctx, geom) {
+    var x = geom.width / 2;
+    var y = geom.height / 2;
+
+    ctx.fillStyle = 'green';
+    ctx.beginPath();
+    ctx.ellipse(x, y, x - 1, y - 1, 0, 0, 2 * Math.PI);
+    ctx.fill();
+}
+
+var ctx1 = document.getElementById('one').getContext('2d');
+drawCircle(ctx1, {width: 50, height: 50});
+ctx1.translate(50, 0);
+drawCircle(ctx1, {width: 50, height: 50});
+ctx1.resetTransform();
+ctx1.translate(0, 50);
+drawCircle(ctx1, {width: 100, height: 50});
+
+var ctx2 = document.getElementById('two').getContext('2d');
+for (var i = 0; i < 5; i++) {
+    drawCircle(ctx2, {width: 50, height: 20});
+    ctx2.translate(0, 20);
+}
+ctx2.resetTransform();
+ctx2.translate(50, 25);
+drawCircle(ctx2, {width: 50, height: 50});
+</script>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/mozilla/css-paint-api/background-image-tiled.html b/tests/wpt/mozilla/tests/mozilla/css-paint-api/background-image-tiled.html
new file mode 100644
index 00000000000..2ac3a11c6a6
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/css-paint-api/background-image-tiled.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<link rel="match" href="background-image-tiled-ref.html">
+<style>
+    div {
+        display: inline-block;
+        width: 100px;
+        height: 100px;
+    }
+
+    #one {
+        background:
+            paint(ellipse) top left/50% 50% repeat-x,
+            paint(ellipse) bottom left/100% 50% no-repeat;
+    }
+
+    #two {
+        background:
+            paint(ellipse) top left/50% 20% repeat-y,
+            paint(ellipse) center right/50% 50% no-repeat;
+    }
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="css-paint-tests.js"></script>
+<body>
+<div id="one"></div>
+<div id="two"></div>
+
+<script id="code" type="text/worklet">
+registerPaint('ellipse', class {
+    paint(ctx, geom) {
+        var x = geom.width / 2;
+        var y = geom.height / 2;
+
+        ctx.fillStyle = 'green';
+        ctx.beginPath();
+        ctx.ellipse(x, y, x - 1, y - 1, 0, 0, 2 * Math.PI);
+        ctx.fill();
+    }
+});
+</script>
+
+<script>
+    importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
+</script>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/mozilla/css-paint-api/css-paint-tests.js b/tests/wpt/mozilla/tests/mozilla/css-paint-api/css-paint-tests.js
new file mode 100644
index 00000000000..58a8e649ee1
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/css-paint-api/css-paint-tests.js
@@ -0,0 +1,18 @@
+// To make sure that we take the snapshot at the right time, we do double
+// requestAnimationFrame. In the second frame, we take a screenshot, that makes
+// sure that we already have a full frame.
+function importPaintWorkletAndTerminateTestAfterAsyncPaint(code) {
+    if (typeof paintWorklet == "undefined") {
+        takeScreenshot();
+    } else {
+        var blob = new Blob([code], {type: 'text/javascript'});
+        paintWorklet.addModule(URL.createObjectURL(blob)).then(function() {
+            requestAnimationFrame(function() {
+                requestAnimationFrame(function() {
+                    takeScreenshot();
+                });
+            });
+        });
+    }
+}
+
diff --git a/tests/wpt/mozilla/tests/mozilla/css-paint-api/invalid-image-constructor-error-ref.html b/tests/wpt/mozilla/tests/mozilla/css-paint-api/invalid-image-constructor-error-ref.html
new file mode 100644
index 00000000000..b6a6dec6c60
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/css-paint-api/invalid-image-constructor-error-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+<body>
+<div style="background: green; width: 100px; height: 100px"></div>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/mozilla/css-paint-api/invalid-image-constructor-error.html b/tests/wpt/mozilla/tests/mozilla/css-paint-api/invalid-image-constructor-error.html
new file mode 100644
index 00000000000..4800df463b7
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/css-paint-api/invalid-image-constructor-error.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<link rel="match" href="invalid-image-constructor-error-ref.html">
+<style>
+    #output {
+        width: 100px;
+        height: 100px;
+        background-image: paint(error);
+        background-color: green;
+    }
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="css-paint-tests.js"></script>
+<body>
+<div id="output"></div>
+
+<script id="code" type="text/worklet">
+registerPaint('error', class {
+    constructor() { throw Error('failed!'); }
+    paint(ctx, geom) {
+        ctx.fillStyle = 'red';
+        ctx.fillRect(0, 0, geom.width, geom.height);
+    }
+});
+</script>
+
+<script>
+    importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
+</script>
+
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/mozilla/css-paint-api/invalid-image-paint-error-ref.html b/tests/wpt/mozilla/tests/mozilla/css-paint-api/invalid-image-paint-error-ref.html
new file mode 100644
index 00000000000..b6a6dec6c60
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/css-paint-api/invalid-image-paint-error-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+<body>
+<div style="background: green; width: 100px; height: 100px"></div>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/mozilla/css-paint-api/invalid-image-paint-error.html b/tests/wpt/mozilla/tests/mozilla/css-paint-api/invalid-image-paint-error.html
new file mode 100644
index 00000000000..7e19c296a68
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/css-paint-api/invalid-image-paint-error.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<link rel="match" href="invalid-image-paint-error-ref.html">
+<style>
+    #output {
+        width: 100px;
+        height: 100px;
+        background-image: paint(error);
+        background-color: green;
+    }
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="css-paint-tests.js"></script>
+<body>
+<div id="output"></div>
+
+<script id="code" type="text/worklet">
+registerPaint('error', class {
+    paint(ctx, geom) {
+        ctx.fillStyle = 'red';
+        ctx.fillRect(0, 0, geom.width, geom.height);
+        throw Error('failed!');
+    }
+});
+</script>
+
+<script>
+    importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
+</script>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/mozilla/css-paint-api/invalid-image-pending-script-ref.html b/tests/wpt/mozilla/tests/mozilla/css-paint-api/invalid-image-pending-script-ref.html
new file mode 100644
index 00000000000..b6a6dec6c60
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/css-paint-api/invalid-image-pending-script-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+<body>
+<div style="background: green; width: 100px; height: 100px"></div>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/mozilla/css-paint-api/invalid-image-pending-script.html b/tests/wpt/mozilla/tests/mozilla/css-paint-api/invalid-image-pending-script.html
new file mode 100644
index 00000000000..42df38a82a3
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/css-paint-api/invalid-image-pending-script.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<link rel="match" href="invalid-image-pending-script-ref.html">
+<style>
+    #output {
+        width: 100px;
+        height: 100px;
+        background-image: paint(invalid);
+        background-color: green;
+    }
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="css-paint-tests.js"></script>
+<body>
+<div id="output"></div>
+<script>
+    importPaintWorkletAndTerminateTestAfterAsyncPaint("");
+</script>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/mozilla/css-paint-api/overdraw-ref.html b/tests/wpt/mozilla/tests/mozilla/css-paint-api/overdraw-ref.html
new file mode 100644
index 00000000000..b6a6dec6c60
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/css-paint-api/overdraw-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+<body>
+<div style="background: green; width: 100px; height: 100px"></div>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/mozilla/css-paint-api/overdraw.html b/tests/wpt/mozilla/tests/mozilla/css-paint-api/overdraw.html
new file mode 100644
index 00000000000..6258b83fb5b
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/css-paint-api/overdraw.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="match" href="overdraw-ref.html">
+<style>
+    #output {
+        width: 100px;
+        height: 100px;
+        background-image: paint(green);
+        background-color: red;
+    }
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="css-paint-tests.js"></script>
+<body>
+<div id="output"></div>
+
+<script id="code" type="text/worklet">
+registerPaint('green', class {
+    paint(ctx, geom) {
+        ctx.fillStyle = 'green';
+        ctx.fillRect(-10, -10, geom.width + 20, geom.height + 20);
+    }
+});
+</script>
+
+<script>
+    importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
+</script>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint-arguments-ref.html b/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint-arguments-ref.html
new file mode 100644
index 00000000000..3352acf6518
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint-arguments-ref.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+#background {
+  background-color: yellow;
+  display: inline-block;
+}
+
+.container {
+  font-size: 0px;
+}
+</style>
+</head>
+<body>
+
+<div id="background">
+  <div class="container">
+    <canvas id ="box-green" width="100" height="100"></canvas>
+  </div>
+  <div class="container">
+    <canvas id ="box-red" width="100" height="100"></canvas>
+  </div>
+</div>
+
+<script>
+function drawCanvas(canvasID, color) {
+  var canvas = document.getElementById(canvasID);
+  var context = canvas.getContext("2d", {alpha: true});
+  context.clearRect(0, 0, canvas.width, canvas.height);
+  context.strokeStyle = color;
+  context.lineWidth = 4;
+  context.strokeRect(20, 20, 60, 60);
+};
+
+drawCanvas('box-green', 'green');
+drawCanvas('box-red', 'red');
+
+</script>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint-arguments.html b/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint-arguments.html
new file mode 100644
index 00000000000..f80d7cefcc0
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint-arguments.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<link rel="match" href="paint-arguments-ref.html">
+<style>
+.container {
+  width: 100px;
+  height: 100px;
+}
+
+#canvas-box-green {
+  background-image: paint(box, green);
+}
+
+#canvas-box-red {
+  background-image: paint(box, red);
+}
+
+#background {
+  background-color: yellow;
+  display: inline-block;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="css-paint-tests.js"></script>
+<body>
+
+<div id="background">
+  <div id="canvas-box-green" class="container"></div>
+  <div id="canvas-box-red" class="container"></div>
+</div>
+
+<script id="code" type="text/worklet">
+registerPaint('box', class {
+    static get alpha() { return true; }
+    static get inputArguments() { return ['<color>']; }
+    paint(ctx, geom, properties, args) {
+    console.log(args.constructor);
+        ctx.strokeStyle = args[0].toString();
+        ctx.lineWidth = 4;
+        ctx.strokeRect(20, 20, 60, 60);
+    }
+});
+
+</script>
+
+<script>
+  importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
+</script>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint-function-arguments-ref.html b/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint-function-arguments-ref.html
new file mode 100644
index 00000000000..99adfd27121
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint-function-arguments-ref.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+#background {
+  background-color: yellow;
+  display: inline-block;
+}
+
+.container {
+  font-size: 0px;
+}
+</style>
+</head>
+<body>
+
+<div id="background">
+  <div class="container">
+    <canvas id ="box-1" width="200" height="200"></canvas>
+  </div>
+  <div class="container">
+    <canvas id ="box-2" width="200" height="200"></canvas>
+  </div>
+</div>
+
+<script>
+function drawCanvas(canvasID, color, width) {
+  var canvas = document.getElementById(canvasID);
+  var context = canvas.getContext("2d", {alpha: true});
+  context.clearRect(0, 0, canvas.width, canvas.height);
+  context.strokeStyle = color;
+  context.lineWidth = width;
+  context.strokeRect(40, 40, 120, 120);
+};
+
+drawCanvas('box-1', 'rgb(50, 100, 150)', '5px');
+drawCanvas('box-2', 'rgb(150, 100, 50)', '10px');
+
+</script>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint-function-arguments.html b/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint-function-arguments.html
new file mode 100644
index 00000000000..1cec58bc190
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint-function-arguments.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<link rel="match" href="paint-function-arguments-ref.html">
+<style>
+.container {
+  width: 200px;
+  height: 200px;
+}
+
+#canvas-box-1 {
+  background-image: paint(box, rgb(50, 100, 150), 5px);
+}
+
+#canvas-box-2 {
+  background-image: paint(box, rgb(150, 100, 50), 10px);
+}
+
+#background {
+  background-color: yellow;
+  display: inline-block;
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="css-paint-tests.js"></script>
+<body>
+
+<div id="background">
+  <div id="canvas-box-1" class="container"></div>
+  <div id="canvas-box-2" class="container"></div>
+</div>
+
+<script id="code" type="text/worklet">
+registerPaint('box', class {
+    static get alpha() { return true; }
+    static get inputArguments() { return ['<color>', '<length>']; }
+    paint(ctx, geom, properties, args) {
+        ctx.strokeStyle = args[0].toString();
+        ctx.lineWidth = args[1].toString();
+        ctx.strokeRect(40, 40, 120, 120);
+    }
+});
+
+</script>
+
+<script>
+  importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
+</script>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint2d-composite-ref.html b/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint2d-composite-ref.html
new file mode 100644
index 00000000000..3b75d526980
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint2d-composite-ref.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+    canvas { display: inline-block; }
+</style>
+</head>
+<body>
+<canvas id="source-over" width="80" height="80"></canvas>
+<canvas id="source-in" width="80" height="80"></canvas>
+<canvas id="source-out" width="80" height="80"></canvas>
+<canvas id="source-atop" width="80" height="80"></canvas>
+<br>
+<canvas id="destination-over" width="80" height="80"></canvas>
+<canvas id="destination-in" width="80" height="80"></canvas>
+<canvas id="destination-out" width="80" height="80"></canvas>
+<canvas id="destination-atop" width="80" height="80"></canvas>
+<br>
+<canvas id="lighter" width="80" height="80"></canvas>
+<canvas id="xor" width="80" height="80"></canvas>
+<script>
+var compositeOps = [
+    'source-over',
+    'source-in',
+    'source-out',
+    'source-atop',
+    'destination-over',
+    'destination-in',
+    'destination-out',
+    'destination-atop',
+    'lighter',
+    'xor'
+];
+
+for (var i = 0; i < compositeOps.length; i++) {
+    var op = compositeOps[i];
+    var ctx = document.getElementById(op).getContext('2d');
+    ctx.fillStyle = 'red';
+    ctx.fillRect(5, 5, 40, 40);
+
+    ctx.globalCompositeOperation = op;
+
+    ctx.fillStyle = 'deepskyblue';
+    ctx.beginPath();
+    ctx.arc(45,45,20,0,Math.PI*2,true);
+    ctx.fill();
+}
+</script>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint2d-composite.html b/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint2d-composite.html
new file mode 100644
index 00000000000..362b84947fd
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint2d-composite.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<link rel="match" href="paint2d-composite-ref.html">
+<style>
+    div {
+        display: inline-block;
+        width: 80px;
+        height: 80px;
+    }
+    #source-over { background-image: paint(source-over); }
+    #source-in { background-image: paint(source-in); }
+    #source-out { background-image: paint(source-out); }
+    #source-atop { background-image: paint(source-atop); }
+    #destination-over { background-image: paint(destination-over); }
+    #destination-in { background-image: paint(destination-in); }
+    #destination-out { background-image: paint(destination-out); }
+    #destination-atop { background-image: paint(destination-atop); }
+    #lighter { background-image: paint(lighter); }
+    #xor { background-image: paint(xor); }
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="css-paint-tests.js"></script>
+<body>
+<div id="source-over"></div>
+<div id="source-in"></div>
+<div id="source-out"></div>
+<div id="source-atop"></div>
+<br>
+<div id="destination-over"></div>
+<div id="destination-in"></div>
+<div id="destination-out"></div>
+<div id="destination-atop"></div>
+<br>
+<div id="lighter"></div>
+<div id="xor"></div>
+
+<script id="code" type="text/worklet">
+var compositeOps = [
+    'source-over',
+    'source-in',
+    'source-out',
+    'source-atop',
+    'destination-over',
+    'destination-in',
+    'destination-out',
+    'destination-atop',
+    'lighter',
+    'xor'
+];
+
+function doPaint(ctx, op) {
+    ctx.fillStyle = 'red';
+    ctx.fillRect(5, 5, 40, 40);
+
+    ctx.globalCompositeOperation = op;
+
+    ctx.fillStyle = 'deepskyblue';
+    ctx.beginPath();
+    ctx.arc(45,45,20,0,Math.PI*2,true);
+    ctx.fill();
+}
+
+for (var i = 0; i < compositeOps.length; i++) {
+    let op = compositeOps[i];
+    registerPaint(op, class { paint(ctx, geom) { doPaint(ctx, op); } });
+}
+</script>
+
+<script>
+    importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
+</script>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint2d-filter-ref.html b/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint2d-filter-ref.html
new file mode 100644
index 00000000000..4ca6383b141
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint2d-filter-ref.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+    canvas { display: inline-block; }
+</style>
+</head>
+<body>
+<canvas id='output0' width='100' height='100'></canvas>
+<canvas id='output1' width='100' height='100'></canvas>
+<canvas id='output2' width='100' height='100'></canvas>
+<canvas id='output3' width='100' height='100'></canvas>
+<canvas id='output4' width='100' height='100'></canvas>
+<br>
+<canvas id='output5' width='100' height='100'></canvas>
+<canvas id='output6' width='100' height='100'></canvas>
+<canvas id='output7' width='100' height='100'></canvas>
+<canvas id='output8' width='100' height='100'></canvas>
+<canvas id='output9' width='100' height='100'></canvas>
+<br>
+<canvas id='output10' width='100' height='100'></canvas>
+<canvas id='output11' width='100' height='100'></canvas>
+<canvas id='output12' width='100' height='100'></canvas>
+<canvas id='output13' width='100' height='100'></canvas>
+<canvas id='output14' width='100' height='100'></canvas>
+
+<script>
+var paint = function(id, filter) {
+  var c = document.getElementById(id);
+  var ctx = c.getContext('2d');
+  ctx.filter = filter;
+  ctx.fillStyle = '#A00';
+  ctx.fillRect(0, 0, 15, 15);
+  ctx.fillStyle = '#0A0';
+  ctx.fillRect(15, 0, 15, 15);
+  ctx.fillStyle = '#00A';
+  ctx.fillRect(0, 15, 15, 15);
+  ctx.fillStyle = "#AA0";
+  ctx.fillRect(15, 15, 15, 15);
+  return ctx;
+};
+
+paint('output0', "none");
+paint('output1', "blur(10px)");
+paint('output2', "blur(0px)");
+paint('output3', "blur(16px)");
+paint('output4', "blur(0px)");
+paint('output5', "brightness(40%)");
+paint('output6', "contrast(20%)");
+paint('output7', "drop-shadow(0 0 5px green)");
+paint('output8', "grayscale(100%)");
+paint('output9', "invert(100%)");
+paint('output10', "opacity(50%)");
+paint('output11', "saturate(20%)");
+paint('output12', "sepia(100%)");
+paint('output13', "sepia(1) hue-rotate(200deg)");
+paint('output14', "url(#url)");
+</script>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint2d-filter.html b/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint2d-filter.html
new file mode 100644
index 00000000000..9347af51f78
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint2d-filter.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<link rel="match" href="paint2d-filter-ref.html">
+<style>
+    div {
+        display: inline-block;
+        width: 100px;
+        height: 100px;
+    }
+    #filter-none { background-image: paint(filter-none); }
+    #filter-blur-10px { background-image: paint(filter-blur-10px); }
+    #filter-blur-50vh { background-image: paint(filter-blur-50vh); }
+    #filter-blur-1em { background-image: paint(filter-blur-1em); }
+    #filter-blur-2percent { background-image: paint(filter-blur-2percent); }
+    #filter-brightness { background-image: paint(filter-brightness); }
+    #filter-contrast { background-image: paint(filter-contrast); }
+    #filter-drop-shadow { background-image: paint(filter-drop-shadow); }
+    #filter-grayscale { background-image: paint(filter-grayscale); }
+    #filter-invert { background-image: paint(filter-invert); }
+    #filter-opacity { background-image: paint(filter-opacity); }
+    #filter-saturate { background-image: paint(filter-saturate); }
+    #filter-sepia { background-image: paint(filter-sepia); }
+    #filter-hue-rotate { background-image: paint(filter-hue-rotate); }
+    #filter-url { background-image: paint(filter-url); }
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="css-paint-tests.js"></script>
+<body>
+<div id="filter-none"></div>
+<div id="filter-blur-10px"></div>
+<div id="filter-blur-50vh"></div>
+<div id="filter-blur-1em"></div>
+<div id="filter-blur-2percent"></div>
+<br>
+<div id="filter-brightness"></div>
+<div id="filter-contrast"></div>
+<div id="filter-drop-shadow"></div>
+<div id="filter-grayscale"></div>
+<div id="filter-invert"></div>
+<br>
+<div id="filter-opacity"></div>
+<div id="filter-saturate"></div>
+<div id="filter-sepia"></div>
+<div id="filter-hue-rotate"></div>
+<div id="filter-url"></div>
+
+<script id="code" type="text/worklet">
+var paintNames = [
+    'filter-none',
+    'filter-blur-10px',
+    'filter-blur-50vh',
+    'filter-blur-1em',
+    'filter-blur-2percent',
+    'filter-brightness',
+    'filter-contrast',
+    'filter-drop-shadow',
+    'filter-grayscale',
+    'filter-invert',
+    'filter-opacity',
+    'filter-saturate',
+    'filter-sepia',
+    'filter-hue-rotate',
+    'filter-url'
+];
+
+var filterOps = [
+    'none',
+    'blur(10px)',
+    'blur(50vh)',
+    'blur(1em)',
+    'blur(2%)',
+    'brightness(40%)',
+    'contrast(20%)',
+    'drop-shadow(0 0 5px green)',
+    'grayscale(100%)',
+    'invert(100%)',
+    'opacity(50%)',
+    'saturate(20%)',
+    'sepia(100%)',
+    'sepia(1) hue-rotate(200deg)',
+    'url(#url)'
+];
+
+function doPaint(ctx, op) {
+  ctx.filter = op;
+  ctx.fillStyle = '#A00';
+  ctx.fillRect(0, 0, 15, 15);
+  ctx.fillStyle = '#0A0';
+  ctx.fillRect(15, 0, 15, 15);
+  ctx.fillStyle = '#00A';
+  ctx.fillRect(0, 15, 15, 15);
+  ctx.fillStyle = "#AA0";
+  ctx.fillRect(15, 15, 15, 15);
+};
+
+for (var i = 0; i < filterOps.length; i++) {
+  let op = filterOps[i];
+  registerPaint(paintNames[i], class { paint(ctx, geom) { doPaint(ctx, op); } });
+}
+</script>
+
+<script>
+    importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
+</script>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint2d-gradient-ref.html b/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint2d-gradient-ref.html
new file mode 100644
index 00000000000..a8064f595ef
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint2d-gradient-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<body>
+<canvas id ="output" width="200" height="100"></canvas>
+<script>
+var canvas = document.getElementById('output');
+var ctx = canvas.getContext('2d');
+
+var linearGradient = ctx.createLinearGradient(0, 0, 100, 100);
+linearGradient.addColorStop(0, 'blue');
+linearGradient.addColorStop(0.5, 'red');
+linearGradient.addColorStop(1, 'white');
+ctx.fillStyle = linearGradient;
+ctx.fillRect(0, 0, 100, 100);
+
+var radialGradient = ctx.createRadialGradient(150, 50, 0, 150, 50, 50);
+radialGradient.addColorStop(0, 'blue');
+radialGradient.addColorStop(0.5, 'red');
+radialGradient.addColorStop(1, 'white');
+ctx.fillStyle = radialGradient;
+ctx.fillRect(100, 0, 100, 100);
+</script>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint2d-gradient.html b/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint2d-gradient.html
new file mode 100644
index 00000000000..24fc38a1f5a
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint2d-gradient.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<link rel="match" href="paint2d-gradient-ref.html">
+<style>
+    #output {
+        width: 200px;
+        height: 100px;
+        background-image: paint(gradients);
+    }
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="css-paint-tests.js"></script>
+<body>
+<div id="output"></div>
+
+<script id="code" type="text/worklet">
+registerPaint('gradients', class {
+    paint(ctx, geom) {
+        var linearGradient = ctx.createLinearGradient(0, 0, 100, 100);
+        linearGradient.addColorStop(0, 'blue');
+        linearGradient.addColorStop(0.5, 'red');
+        linearGradient.addColorStop(1, 'white');
+        ctx.fillStyle = linearGradient;
+        ctx.fillRect(0, 0, 100, 100);
+
+        var radialGradient = ctx.createRadialGradient(150, 50, 0, 150, 50, 50);
+        radialGradient.addColorStop(0, 'blue');
+        radialGradient.addColorStop(0.5, 'red');
+        radialGradient.addColorStop(1, 'white');
+        ctx.fillStyle = radialGradient;
+        ctx.fillRect(100, 0, 100, 100);
+    }
+});
+</script>
+
+<script>
+    importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
+</script>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint2d-image-ref.html b/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint2d-image-ref.html
new file mode 100644
index 00000000000..31c9f3f5f03
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint2d-image-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<canvas id="canvas" width="300" height="300"></canvas>
+
+<script>
+    var canvas = document.getElementById("canvas");
+    var ctx = canvas.getContext("2d");
+    var img = new Image;
+    img.src = "resources/html5.png";
+    img.onload = function() {
+        ctx.drawImage(img, 0, 0);
+    };
+</script>
diff --git a/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint2d-image.html b/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint2d-image.html
new file mode 100644
index 00000000000..b8c38dad131
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint2d-image.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<link rel="match" href="paint2d-image-ref.html">
+<style>
+    #output {
+        width: 300px;
+        height: 300px;
+        background-image: paint(image);
+        border-image: url("resources/html5.png");
+    }
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="css-paint-tests.js"></script>
+<div id="output"></div>
+
+<script id="code" type="text/worklet">
+    registerPaint('image', class {
+        static get inputProperties() { return [ 'border-image-source' ]; };
+        paint(ctx, geom, styleMap) {
+            ctx.drawImage(styleMap.get('border-image-source'), 0, 0);
+        }
+    });
+</script>
+
+<script>
+    importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
+</script>
+</html>
diff --git a/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint2d-paths-ref.html b/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint2d-paths-ref.html
new file mode 100644
index 00000000000..7557411b4a1
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint2d-paths-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<body>
+<canvas id ="output" width="300" height="400"></canvas>
+<script>
+var canvas = document.getElementById('output');
+var ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.lineWidth = '10';
+ctx.strokeStyle = 'green';
+ctx.moveTo(15, 15);
+ctx.lineTo(135, 15);
+ctx.lineTo(70, 170);
+ctx.closePath();
+ctx.stroke();
+
+var path1 = new Path2D();
+path1.moveTo(250, 25);
+path1.bezierCurveTo(110, 150, 110, 300, 200, 200);
+ctx.strokeStyle = 'purple';
+ctx.setLineDash([ 10, 5 ]);
+ctx.stroke(path1);
+
+ctx.fillStyle = 'red';
+ctx.beginPath()
+ctx.arc(75, 325, 50, 0, Math.PI * 2, true);
+ctx.arc(75, 325, 20, 0, Math.PI * 2, true);
+ctx.fill('evenodd');
+</script>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint2d-paths.html b/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint2d-paths.html
new file mode 100644
index 00000000000..d61ef827b22
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint2d-paths.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<link rel="match" href="paint2d-paths-ref.html">
+<style>
+    #output {
+        width: 300px;
+        height: 400px;
+        background-image: paint(paths);
+    }
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="css-paint-tests.js"></script>
+<body>
+<div id="output"></div>
+
+<script id="code" type="text/worklet">
+registerPaint('paths', class {
+    paint(ctx, geom) {
+        ctx.beginPath();
+        ctx.lineWidth = '10';
+        ctx.strokeStyle = 'green';
+        ctx.moveTo(15, 15);
+        ctx.lineTo(135, 15);
+        ctx.lineTo(70, 170);
+        ctx.closePath();
+        ctx.stroke();
+
+        var path1 = new Path2D();
+        path1.moveTo(250, 25);
+        path1.bezierCurveTo(110, 150, 110, 300, 200, 200);
+        ctx.strokeStyle = 'purple';
+        ctx.setLineDash([ 10, 5 ]);
+        ctx.stroke(path1);
+
+        ctx.fillStyle = 'red';
+        ctx.beginPath()
+        ctx.arc(75, 325, 50, 0, Math.PI * 2, true);
+        ctx.arc(75, 325, 20, 0, Math.PI * 2, true);
+        ctx.fill('evenodd');
+    }
+});
+</script>
+
+<script>
+    importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
+</script>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint2d-rects-ref.html b/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint2d-rects-ref.html
new file mode 100644
index 00000000000..fae2de7b7a2
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint2d-rects-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<body>
+<canvas id ="output" width="100" height="100" style="background: blue;"></canvas>
+<script>
+var canvas = document.getElementById('output');
+var ctx = canvas.getContext('2d');
+
+ctx.fillStyle = 'green';
+ctx.fillRect(0, 0, 100, 100);
+
+ctx.clearRect(40, 40, 20, 20);
+
+ctx.strokeStyle = 'red';
+ctx.lineWidth = 4;
+ctx.strokeRect(20, 20, 60, 60);
+</script>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint2d-rects.html b/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint2d-rects.html
new file mode 100644
index 00000000000..4a4e4708bf0
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint2d-rects.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<link rel="match" href="paint2d-rects-ref.html">
+<style>
+    #output {
+        width: 100px;
+        height: 100px;
+        background-image: paint(rects);
+        background-color: blue;
+    }
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="css-paint-tests.js"></script>
+<body>
+<div id="output"></div>
+
+<script id="code" type="text/worklet">
+registerPaint('rects', class {
+    paint(ctx, geom) {
+        ctx.fillStyle = 'green';
+        ctx.fillRect(0, 0, geom.width, geom.height);
+
+        ctx.clearRect(40, 40, 20, 20);
+
+        ctx.strokeStyle = 'red';
+        ctx.lineWidth = 4;
+        ctx.strokeRect(20, 20, 60, 60);
+    }
+});
+</script>
+
+<script>
+    importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
+</script>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint2d-shadows-ref.html b/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint2d-shadows-ref.html
new file mode 100644
index 00000000000..268db495ee5
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint2d-shadows-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<body>
+<canvas id ="output" width="200" height="100"></canvas>
+<script>
+var canvas = document.getElementById('output');
+var ctx = canvas.getContext('2d');
+
+ctx.shadowColor = 'black';
+ctx.shadowOffsetY = 10;
+ctx.shadowOffsetX = 10;
+ctx.fillStyle = 'green'
+ctx.fillRect(10, 10, 50, 50);
+
+ctx.shadowColor = 'blue';
+ctx.shadowBlur = 10;
+ctx.shadowOffsetX = 5;
+ctx.shadowOffsetY = 5;
+ctx.fillStyle = 'green';
+ctx.fillRect(110, 10, 50, 50);
+</script>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint2d-shadows.html b/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint2d-shadows.html
new file mode 100644
index 00000000000..c0200df04d3
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint2d-shadows.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<link rel="match" href="paint2d-shadows-ref.html">
+<style>
+    #output {
+        width: 200px;
+        height: 100px;
+        background-image: paint(shadows);
+    }
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="css-paint-tests.js"></script>
+<body>
+<div id="output"></div>
+
+<script id="code" type="text/worklet">
+registerPaint('shadows', class {
+    paint(ctx, geom) {
+        ctx.shadowColor = 'black';
+        ctx.shadowOffsetY = 10;
+        ctx.shadowOffsetX = 10;
+        ctx.fillStyle = 'green'
+        ctx.fillRect(10, 10, 50, 50);
+
+        ctx.shadowColor = 'blue';
+        ctx.shadowBlur = 10;
+        ctx.shadowOffsetX = 5;
+        ctx.shadowOffsetY = 5;
+        ctx.fillStyle = 'green';
+        ctx.fillRect(110, 10, 50, 50);
+    }
+});
+</script>
+
+<script>
+    importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
+</script>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint2d-transform-ref.html b/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint2d-transform-ref.html
new file mode 100644
index 00000000000..e863f363f79
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint2d-transform-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<body>
+<canvas id ="output" width="200" height="200"></canvas>
+<script>
+var canvas = document.getElementById('output');
+var ctx = canvas.getContext('2d');
+
+ctx.fillStyle = 'green';
+ctx.transform(1, 0.5, 0, 1, 20, 20);
+ctx.fillRect(0, 0, 50, 50);
+
+ctx.resetTransform();
+
+ctx.fillStyle = 'blue';
+ctx.translate(150, 60);
+ctx.rotate(60 * Math.PI / 180);
+ctx.scale(1.5, 1);
+ctx.fillRect(0, 0, 50, 50);
+</script>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint2d-transform.html b/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint2d-transform.html
new file mode 100644
index 00000000000..1d1177e30f7
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/css-paint-api/paint2d-transform.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<link rel="match" href="paint2d-transform-ref.html">
+<style>
+    #output {
+        width: 200px;
+        height: 200px;
+        background-image: paint(transform);
+    }
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="css-paint-tests.js"></script>
+<body>
+<div id="output"></div>
+
+<script id="code" type="text/worklet">
+registerPaint('transform', class {
+    paint(ctx, geom) {
+        ctx.fillStyle = 'green';
+        ctx.transform(1, 0.5, 0, 1, 20, 20);
+        ctx.fillRect(0, 0, 50, 50);
+
+        ctx.resetTransform();
+
+        ctx.fillStyle = 'blue';
+        ctx.translate(150, 60);
+        ctx.rotate(60 * Math.PI / 180);
+        ctx.scale(1.5, 1);
+        ctx.fillRect(0, 0, 50, 50);
+    }
+});
+</script>
+
+<script>
+    importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent);
+</script>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/mozilla/css-paint-api/valid-image-after-load-ref.html b/tests/wpt/mozilla/tests/mozilla/css-paint-api/valid-image-after-load-ref.html
new file mode 100644
index 00000000000..b6a6dec6c60
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/css-paint-api/valid-image-after-load-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+<body>
+<div style="background: green; width: 100px; height: 100px"></div>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/mozilla/css-paint-api/valid-image-after-load.html b/tests/wpt/mozilla/tests/mozilla/css-paint-api/valid-image-after-load.html
new file mode 100644
index 00000000000..f4af4975cbf
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/css-paint-api/valid-image-after-load.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<link rel="match" href="valid-image-after-load-ref.html">
+<style>
+    #output {
+        width: 100px;
+        height: 100px;
+        background-color: red;
+    }
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="css-paint-tests.js"></script>
+<body>
+<div id="output"></div>
+
+<script id="code" type="text/worklet">
+registerPaint('green', class {
+    paint(ctx, geom) {
+        ctx.fillStyle = 'green';
+        ctx.fillRect(0, 0, geom.width, geom.height);
+    }
+});
+</script>
+
+<script>
+if (window.testRunner) {
+  testRunner.waitUntilDone();
+}
+
+var blob = new Blob([document.getElementById('code').textContent],
+                    {type: 'text/javascript'});
+var frame_cnt = 0;
+paintWorklet.addModule(URL.createObjectURL(blob)).then(function() {
+    var el = document.getElementById('output');
+    el.style.backgroundImage = 'paint(green)';
+    requestAnimationFrame(function() {
+        takeScreenshot(frame_cnt);
+    });
+});
+</script>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/mozilla/css-paint-api/valid-image-before-load-ref.html b/tests/wpt/mozilla/tests/mozilla/css-paint-api/valid-image-before-load-ref.html
new file mode 100644
index 00000000000..b6a6dec6c60
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/css-paint-api/valid-image-before-load-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+<body>
+<div style="background: green; width: 100px; height: 100px"></div>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/mozilla/css-paint-api/valid-image-before-load.html b/tests/wpt/mozilla/tests/mozilla/css-paint-api/valid-image-before-load.html
new file mode 100644
index 00000000000..98218d34946
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/css-paint-api/valid-image-before-load.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<link rel="match" href="valid-image-before-load-ref.html">
+<style>
+    #output {
+        width: 100px;
+        height: 100px;
+        background-color: red;
+    }
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="css-paint-tests.js"></script>
+<body>
+<div id="output"></div>
+
+<script id="code" type="text/worklet">
+registerPaint('green', class {
+    paint(ctx, geom) {
+        ctx.fillStyle = 'green';
+        ctx.fillRect(0, 0, geom.width, geom.height);
+    }
+});
+</script>
+
+<script>
+if (window.testRunner) {
+  testRunner.waitUntilDone();
+}
+
+var el = document.getElementById('output');
+el.style.backgroundImage = 'paint(green)';
+
+var blob = new Blob([document.getElementById('code').textContent],
+                    {type: 'text/javascript'});
+var frame_cnt = 0;
+paintWorklet.addModule(URL.createObjectURL(blob)).then(function() {
+    requestAnimationFrame(function() {
+        takeScreenshot(frame_cnt);
+    });
+});
+</script>
+</body>
+</html>