diff --git a/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_1.html.ini b/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_1.html.ini
new file mode 100644
index 00000000000..396d39eeb09
--- /dev/null
+++ b/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_1.html.ini
@@ -0,0 +1,3 @@
+[drawimage_html_image_1.html]
+  type: reftest
+  disabled: see _mozilla
diff --git a/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_10.html.ini b/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_10.html.ini
new file mode 100644
index 00000000000..4dcc60a0824
--- /dev/null
+++ b/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_10.html.ini
@@ -0,0 +1,3 @@
+[drawimage_html_image_10.html]
+  type: reftest
+  disabled: see _mozilla
diff --git a/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_11.html.ini b/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_11.html.ini
new file mode 100644
index 00000000000..f26feab7168
--- /dev/null
+++ b/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_11.html.ini
@@ -0,0 +1,3 @@
+[drawimage_html_image_11.html]
+  type: reftest
+  disabled: see _mozilla
diff --git a/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_12.html.ini b/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_12.html.ini
new file mode 100644
index 00000000000..8eb54f816a9
--- /dev/null
+++ b/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_12.html.ini
@@ -0,0 +1,3 @@
+[drawimage_html_image_12.html]
+  type: reftest
+  disabled: see _mozilla
diff --git a/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_13.html.ini b/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_13.html.ini
new file mode 100644
index 00000000000..856288b3d70
--- /dev/null
+++ b/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_13.html.ini
@@ -0,0 +1,3 @@
+[drawimage_html_image_13.html]
+  type: reftest
+  disabled: see _mozilla
diff --git a/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_2.html.ini b/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_2.html.ini
new file mode 100644
index 00000000000..3ba92dd7d75
--- /dev/null
+++ b/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_2.html.ini
@@ -0,0 +1,3 @@
+[drawimage_html_image_2.html]
+  type: reftest
+  disabled: see _mozilla
diff --git a/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_3.html.ini b/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_3.html.ini
new file mode 100644
index 00000000000..277d697527d
--- /dev/null
+++ b/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_3.html.ini
@@ -0,0 +1,3 @@
+[drawimage_html_image_3.html]
+  type: reftest
+  disabled: see _mozilla
diff --git a/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_4.html.ini b/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_4.html.ini
new file mode 100644
index 00000000000..6ced959e23b
--- /dev/null
+++ b/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_4.html.ini
@@ -0,0 +1,3 @@
+[drawimage_html_image_4.html]
+  type: reftest
+  disabled: see _mozilla
diff --git a/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_5.html.ini b/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_5.html.ini
new file mode 100644
index 00000000000..8cd1d610a01
--- /dev/null
+++ b/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_5.html.ini
@@ -0,0 +1,3 @@
+[drawimage_html_image_5.html]
+  type: reftest
+  disabled: see _mozilla
diff --git a/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_6.html.ini b/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_6.html.ini
new file mode 100644
index 00000000000..8d2dfb702fb
--- /dev/null
+++ b/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_6.html.ini
@@ -0,0 +1,3 @@
+[drawimage_html_image_6.html]
+  type: reftest
+  disabled: see _mozilla
diff --git a/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_7.html.ini b/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_7.html.ini
new file mode 100644
index 00000000000..e24ff5c2fae
--- /dev/null
+++ b/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_7.html.ini
@@ -0,0 +1,3 @@
+[drawimage_html_image_7.html]
+  type: reftest
+  disabled: see _mozilla
diff --git a/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_8.html.ini b/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_8.html.ini
new file mode 100644
index 00000000000..13688c76798
--- /dev/null
+++ b/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_8.html.ini
@@ -0,0 +1,3 @@
+[drawimage_html_image_8.html]
+  type: reftest
+  disabled: see _mozilla
diff --git a/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_9.html.ini b/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_9.html.ini
new file mode 100644
index 00000000000..0cf6369939f
--- /dev/null
+++ b/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_9.html.ini
@@ -0,0 +1,3 @@
+[drawimage_html_image_9.html]
+  type: reftest
+  disabled: see _mozilla
diff --git a/tests/wpt/metadata/MANIFEST.json b/tests/wpt/metadata/MANIFEST.json
index 68e5e677b29..3426fd9644e 100644
--- a/tests/wpt/metadata/MANIFEST.json
+++ b/tests/wpt/metadata/MANIFEST.json
@@ -30598,4 +30598,4 @@
   "rev": "075802c1d3387d07e31cd5887459d539b1297c8d",
   "url_base": "/",
   "version": 2
-}
+}
\ No newline at end of file
diff --git a/tests/wpt/mozilla/meta/MANIFEST.json b/tests/wpt/mozilla/meta/MANIFEST.json
index 097dfd3a42c..02ec1797a79 100644
--- a/tests/wpt/mozilla/meta/MANIFEST.json
+++ b/tests/wpt/mozilla/meta/MANIFEST.json
@@ -74,6 +74,162 @@
             ],
             "url": "/_mozilla/css/class-namespaces.html"
           }
+        ],
+        "mozilla/canvas/drawimage_html_image_1.html": [
+          {
+            "path": "mozilla/canvas/drawimage_html_image_1.html",
+            "references": [
+              [
+                "/_mozilla/mozilla/canvas/drawimage_html_image_1_ref.html",
+                "=="
+              ]
+            ],
+            "url": "/_mozilla/mozilla/canvas/drawimage_html_image_1.html"
+          }
+        ],
+        "mozilla/canvas/drawimage_html_image_10.html": [
+          {
+            "path": "mozilla/canvas/drawimage_html_image_10.html",
+            "references": [
+              [
+                "/_mozilla/mozilla/canvas/drawimage_html_image_10_ref.html",
+                "=="
+              ]
+            ],
+            "url": "/_mozilla/mozilla/canvas/drawimage_html_image_10.html"
+          }
+        ],
+        "mozilla/canvas/drawimage_html_image_11.html": [
+          {
+            "path": "mozilla/canvas/drawimage_html_image_11.html",
+            "references": [
+              [
+                "/_mozilla/mozilla/canvas/drawimage_html_image_11_ref.html",
+                "=="
+              ]
+            ],
+            "url": "/_mozilla/mozilla/canvas/drawimage_html_image_11.html"
+          }
+        ],
+        "mozilla/canvas/drawimage_html_image_12.html": [
+          {
+            "path": "mozilla/canvas/drawimage_html_image_12.html",
+            "references": [
+              [
+                "/_mozilla/mozilla/canvas/drawimage_html_image_12_ref.html",
+                "=="
+              ]
+            ],
+            "url": "/_mozilla/mozilla/canvas/drawimage_html_image_12.html"
+          }
+        ],
+        "mozilla/canvas/drawimage_html_image_13.html": [
+          {
+            "path": "mozilla/canvas/drawimage_html_image_13.html",
+            "references": [
+              [
+                "/_mozilla/mozilla/canvas/drawimage_html_image_13_ref.html",
+                "=="
+              ]
+            ],
+            "url": "/_mozilla/mozilla/canvas/drawimage_html_image_13.html"
+          }
+        ],
+        "mozilla/canvas/drawimage_html_image_2.html": [
+          {
+            "path": "mozilla/canvas/drawimage_html_image_2.html",
+            "references": [
+              [
+                "/_mozilla/mozilla/canvas/drawimage_html_image_2_ref.html",
+                "=="
+              ]
+            ],
+            "url": "/_mozilla/mozilla/canvas/drawimage_html_image_2.html"
+          }
+        ],
+        "mozilla/canvas/drawimage_html_image_3.html": [
+          {
+            "path": "mozilla/canvas/drawimage_html_image_3.html",
+            "references": [
+              [
+                "/_mozilla/mozilla/canvas/drawimage_html_image_3_ref.html",
+                "=="
+              ]
+            ],
+            "url": "/_mozilla/mozilla/canvas/drawimage_html_image_3.html"
+          }
+        ],
+        "mozilla/canvas/drawimage_html_image_4.html": [
+          {
+            "path": "mozilla/canvas/drawimage_html_image_4.html",
+            "references": [
+              [
+                "/_mozilla/mozilla/canvas/drawimage_html_image_4_ref.html",
+                "=="
+              ]
+            ],
+            "url": "/_mozilla/mozilla/canvas/drawimage_html_image_4.html"
+          }
+        ],
+        "mozilla/canvas/drawimage_html_image_5.html": [
+          {
+            "path": "mozilla/canvas/drawimage_html_image_5.html",
+            "references": [
+              [
+                "/_mozilla/mozilla/canvas/drawimage_html_image_5_ref.html",
+                "=="
+              ]
+            ],
+            "url": "/_mozilla/mozilla/canvas/drawimage_html_image_5.html"
+          }
+        ],
+        "mozilla/canvas/drawimage_html_image_6.html": [
+          {
+            "path": "mozilla/canvas/drawimage_html_image_6.html",
+            "references": [
+              [
+                "/_mozilla/mozilla/canvas/drawimage_html_image_6_ref.html",
+                "=="
+              ]
+            ],
+            "url": "/_mozilla/mozilla/canvas/drawimage_html_image_6.html"
+          }
+        ],
+        "mozilla/canvas/drawimage_html_image_7.html": [
+          {
+            "path": "mozilla/canvas/drawimage_html_image_7.html",
+            "references": [
+              [
+                "/_mozilla/mozilla/canvas/drawimage_html_image_7_ref.html",
+                "=="
+              ]
+            ],
+            "url": "/_mozilla/mozilla/canvas/drawimage_html_image_7.html"
+          }
+        ],
+        "mozilla/canvas/drawimage_html_image_8.html": [
+          {
+            "path": "mozilla/canvas/drawimage_html_image_8.html",
+            "references": [
+              [
+                "/_mozilla/mozilla/canvas/drawimage_html_image_8_ref.html",
+                "=="
+              ]
+            ],
+            "url": "/_mozilla/mozilla/canvas/drawimage_html_image_8.html"
+          }
+        ],
+        "mozilla/canvas/drawimage_html_image_9.html": [
+          {
+            "path": "mozilla/canvas/drawimage_html_image_9.html",
+            "references": [
+              [
+                "/_mozilla/mozilla/canvas/drawimage_html_image_9_ref.html",
+                "=="
+              ]
+            ],
+            "url": "/_mozilla/mozilla/canvas/drawimage_html_image_9.html"
+          }
         ]
       },
       "testharness": {
@@ -631,6 +787,162 @@
           ],
           "url": "/_mozilla/css/class-namespaces.html"
         }
+      ],
+      "mozilla/canvas/drawimage_html_image_1.html": [
+        {
+          "path": "mozilla/canvas/drawimage_html_image_1.html",
+          "references": [
+            [
+              "/_mozilla/mozilla/canvas/drawimage_html_image_1_ref.html",
+              "=="
+            ]
+          ],
+          "url": "/_mozilla/mozilla/canvas/drawimage_html_image_1.html"
+        }
+      ],
+      "mozilla/canvas/drawimage_html_image_10.html": [
+        {
+          "path": "mozilla/canvas/drawimage_html_image_10.html",
+          "references": [
+            [
+              "/_mozilla/mozilla/canvas/drawimage_html_image_10_ref.html",
+              "=="
+            ]
+          ],
+          "url": "/_mozilla/mozilla/canvas/drawimage_html_image_10.html"
+        }
+      ],
+      "mozilla/canvas/drawimage_html_image_11.html": [
+        {
+          "path": "mozilla/canvas/drawimage_html_image_11.html",
+          "references": [
+            [
+              "/_mozilla/mozilla/canvas/drawimage_html_image_11_ref.html",
+              "=="
+            ]
+          ],
+          "url": "/_mozilla/mozilla/canvas/drawimage_html_image_11.html"
+        }
+      ],
+      "mozilla/canvas/drawimage_html_image_12.html": [
+        {
+          "path": "mozilla/canvas/drawimage_html_image_12.html",
+          "references": [
+            [
+              "/_mozilla/mozilla/canvas/drawimage_html_image_12_ref.html",
+              "=="
+            ]
+          ],
+          "url": "/_mozilla/mozilla/canvas/drawimage_html_image_12.html"
+        }
+      ],
+      "mozilla/canvas/drawimage_html_image_13.html": [
+        {
+          "path": "mozilla/canvas/drawimage_html_image_13.html",
+          "references": [
+            [
+              "/_mozilla/mozilla/canvas/drawimage_html_image_13_ref.html",
+              "=="
+            ]
+          ],
+          "url": "/_mozilla/mozilla/canvas/drawimage_html_image_13.html"
+        }
+      ],
+      "mozilla/canvas/drawimage_html_image_2.html": [
+        {
+          "path": "mozilla/canvas/drawimage_html_image_2.html",
+          "references": [
+            [
+              "/_mozilla/mozilla/canvas/drawimage_html_image_2_ref.html",
+              "=="
+            ]
+          ],
+          "url": "/_mozilla/mozilla/canvas/drawimage_html_image_2.html"
+        }
+      ],
+      "mozilla/canvas/drawimage_html_image_3.html": [
+        {
+          "path": "mozilla/canvas/drawimage_html_image_3.html",
+          "references": [
+            [
+              "/_mozilla/mozilla/canvas/drawimage_html_image_3_ref.html",
+              "=="
+            ]
+          ],
+          "url": "/_mozilla/mozilla/canvas/drawimage_html_image_3.html"
+        }
+      ],
+      "mozilla/canvas/drawimage_html_image_4.html": [
+        {
+          "path": "mozilla/canvas/drawimage_html_image_4.html",
+          "references": [
+            [
+              "/_mozilla/mozilla/canvas/drawimage_html_image_4_ref.html",
+              "=="
+            ]
+          ],
+          "url": "/_mozilla/mozilla/canvas/drawimage_html_image_4.html"
+        }
+      ],
+      "mozilla/canvas/drawimage_html_image_5.html": [
+        {
+          "path": "mozilla/canvas/drawimage_html_image_5.html",
+          "references": [
+            [
+              "/_mozilla/mozilla/canvas/drawimage_html_image_5_ref.html",
+              "=="
+            ]
+          ],
+          "url": "/_mozilla/mozilla/canvas/drawimage_html_image_5.html"
+        }
+      ],
+      "mozilla/canvas/drawimage_html_image_6.html": [
+        {
+          "path": "mozilla/canvas/drawimage_html_image_6.html",
+          "references": [
+            [
+              "/_mozilla/mozilla/canvas/drawimage_html_image_6_ref.html",
+              "=="
+            ]
+          ],
+          "url": "/_mozilla/mozilla/canvas/drawimage_html_image_6.html"
+        }
+      ],
+      "mozilla/canvas/drawimage_html_image_7.html": [
+        {
+          "path": "mozilla/canvas/drawimage_html_image_7.html",
+          "references": [
+            [
+              "/_mozilla/mozilla/canvas/drawimage_html_image_7_ref.html",
+              "=="
+            ]
+          ],
+          "url": "/_mozilla/mozilla/canvas/drawimage_html_image_7.html"
+        }
+      ],
+      "mozilla/canvas/drawimage_html_image_8.html": [
+        {
+          "path": "mozilla/canvas/drawimage_html_image_8.html",
+          "references": [
+            [
+              "/_mozilla/mozilla/canvas/drawimage_html_image_8_ref.html",
+              "=="
+            ]
+          ],
+          "url": "/_mozilla/mozilla/canvas/drawimage_html_image_8.html"
+        }
+      ],
+      "mozilla/canvas/drawimage_html_image_9.html": [
+        {
+          "path": "mozilla/canvas/drawimage_html_image_9.html",
+          "references": [
+            [
+              "/_mozilla/mozilla/canvas/drawimage_html_image_9_ref.html",
+              "=="
+            ]
+          ],
+          "url": "/_mozilla/mozilla/canvas/drawimage_html_image_9.html"
+        }
       ]
     }
   },
diff --git a/tests/wpt/mozilla/tests/mozilla/2x2.png b/tests/wpt/mozilla/tests/mozilla/2x2.png
new file mode 100644
index 00000000000..276791c4348
Binary files /dev/null and b/tests/wpt/mozilla/tests/mozilla/2x2.png differ
diff --git a/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_1.html b/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_1.html
new file mode 100644
index 00000000000..ea5be1227cf
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_1.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel=match href=drawimage_html_image_1_ref.html>
+<style>
+  html, body {
+    margin: 0;
+  }
+</style>
+<canvas id="dest" height="100" width="100"></canvas>
+<script>
+
+var sourceWidth = 100;
+var sourceHeight = 100;
+var smoothingEnabled = false;
+var destCanvas = document.getElementById('dest');
+var sourceImg = document.createElement('img');
+sourceImg.src = '../2x2.png'
+sourceImg.width = sourceWidth;
+sourceImg.height = sourceHeight;
+
+var destCtx = destCanvas.getContext('2d');
+destCtx.fillStyle = "#FF0000";
+destCtx.fillRect(0, 0,  destCanvas.width, destCanvas.height);
+destCtx.imageSmoothingEnabled = smoothingEnabled;
+// 2 arguments, the dest origin is 0,0
+// The source canvas will copied to the 0,0 position of the destination canvas
+destCtx.drawImage(sourceImg, 0, 0);
+
+</script>
diff --git a/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_10.html b/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_10.html
new file mode 100644
index 00000000000..68363633382
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_10.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel=match href=drawimage_html_image_10_ref.html>
+<style>
+  html, body {
+    margin: 0;
+  }
+</style>
+<canvas id="dest" height="100" width="100"></canvas>
+<script>
+
+var sourceWidth = 128;
+var sourceHeight = 128;
+var smoothingEnabled = false;
+var destCanvas = document.getElementById('dest');
+var sourceImg = document.createElement('img');
+sourceImg.src = '../2x2.png'
+sourceImg.width = sourceWidth;
+sourceImg.height = sourceHeight;
+
+var destCtx = destCanvas.getContext('2d');
+destCtx.fillStyle = "#FF0000";
+destCtx.fillRect(0, 0,  destCanvas.width, destCanvas.height);
+destCtx.imageSmoothingEnabled = smoothingEnabled;
+
+// The destination rectangle is larger than the destination canvas.
+// When the destination rectangle is outside the destination image (the scratch bitmap),
+// the pixels that land outside the scratch bitmap are discarded,
+// as if the destination was an infinite canvas
+// whose rendering was clipped to the dimensions of the scratch bitmap.
+destCtx.drawImage(sourceImg, 0, 0, 512, 512, 0, 0, 256, 256);
+
+</script>
diff --git a/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_10_ref.html b/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_10_ref.html
new file mode 100644
index 00000000000..60545df17ff
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_10_ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<style>
+  html, body {
+    margin: 0;
+  }
+  #destination {
+    width: 100px;
+    height: 100px;
+    background-image: url("../2x2.png");
+  }
+</style>
+<body>
+<div id="destination"></div>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_11.html b/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_11.html
new file mode 100644
index 00000000000..d21d3d925b1
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_11.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel=match href=drawimage_html_image_11_ref.html>
+<style>
+  html, body {
+    margin: 0;
+  }
+</style>
+<canvas id="dest" height="100" width="100"></canvas>
+<script>
+
+var sourceWidth = 128;
+var sourceHeight = 128;
+var smoothingEnabled = false;
+var destCanvas = document.getElementById('dest');
+var sourceImg = document.createElement('img');
+sourceImg.src = '../2x2.png'
+sourceImg.width = sourceWidth;
+sourceImg.height = sourceHeight;
+
+var destCtx = destCanvas.getContext('2d');
+destCtx.fillStyle = "#FF0000";
+destCtx.fillRect(0, 0,  destCanvas.width, destCanvas.height);
+destCtx.imageSmoothingEnabled = smoothingEnabled;
+
+// The source rectangle is larger than the source canvas
+// The source area is clipped to fit the source image
+// and the destination are is clipped in the same proportion
+destCtx.drawImage(sourceImg, 0, 0, 2048, 2048, 0, 0, 800, 800);
+
+</script>
diff --git a/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_11_ref.html b/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_11_ref.html
new file mode 100644
index 00000000000..10d8885f2b0
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_11_ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<style>
+  html, body {
+    margin: 0;
+  }
+  #destination {
+    width: 100px;
+    height: 100px;
+    background-color: #FA6FF2;
+  }
+</style>
+<body>
+<div id="destination" height="100" width="100"></canvas>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_12.html b/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_12.html
new file mode 100644
index 00000000000..dc9c8d6bb7d
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_12.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel=match href=drawimage_html_image_12_ref.html>
+<style>
+  html, body {
+    margin: 0;
+  }
+</style>
+<canvas id="dest" height="100" width="100"></canvas>
+<script>
+
+var sourceWidth = 128;
+var sourceHeight = 128;
+var smoothingEnabled = false;
+var destCanvas = document.getElementById('dest');
+var sourceImg = document.createElement('img');
+sourceImg.src = '../2x2.png'
+sourceImg.width = sourceWidth;
+sourceImg.height = sourceHeight;
+
+var destCtx = destCanvas.getContext('2d');
+destCtx.fillStyle = "#FF0000";
+destCtx.fillRect(0, 0,  destCanvas.width, destCanvas.height);
+destCtx.imageSmoothingEnabled = smoothingEnabled;
+
+// Negative coordinates of the source rectangle
+// The source area is clipped to fit the source image
+// and the destination area is clipped in the same proportion
+destCtx.drawImage(sourceImg, -25, -25, 50, 50, 0, 0, 50, 50);
+
+</script>
diff --git a/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_12_ref.html b/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_12_ref.html
new file mode 100644
index 00000000000..5f6f22111da
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_12_ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<style>
+  html, body {
+    margin: 0;
+  }
+
+  #destination {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+  }
+
+  #img {
+    position: relative;
+    top: 0;
+    left: 0;
+    width: 25px;
+    height: 25px;
+    background-color: #FA6FF2;
+  }
+
+</style>
+<body>
+<div id="destination">
+  <div id="img"><div>
+</div>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_13.html b/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_13.html
new file mode 100644
index 00000000000..43f9512dbcf
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_13.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel=match href=drawimage_html_image_13_ref.html>
+<style>
+  html, body {
+    margin: 0;
+  }
+</style>
+<canvas id="dest" height="100" width="100"></canvas>
+<script>
+
+var sourceWidth = 128;
+var sourceHeight = 128;
+var smoothingEnabled = false;
+var destCanvas = document.getElementById('dest');
+var sourceImg = document.createElement('img');
+sourceImg.width = sourceWidth;
+sourceImg.height = sourceHeight;
+
+var destCtx = destCanvas.getContext('2d');
+destCtx.fillStyle = "#FF0000";
+destCtx.fillRect(0, 0,  destCanvas.width, destCanvas.height);
+destCtx.imageSmoothingEnabled = smoothingEnabled;
+
+// The source Image doesn't have a src url defined
+// It should throw an exception because the HTMLImageElement is
+// in the broken state
+// https://html.spec.whatwg.org/multipage/scripting.html#check-the-usability-of-the-image-argument
+try {
+    destCtx.drawImage(sourceImg, 0, 0);
+    // It makes the test fail if the exception is not thrown
+    destCtx.fillStyle = "#0000FF";
+    destCtx.fillRect(0, 0,  destCanvas.width, destCanvas.height);
+}
+catch(err) {
+  console.log("Exception: " + err.message);
+}
+
+</script>
diff --git a/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_13_ref.html b/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_13_ref.html
new file mode 100644
index 00000000000..9ac306a5cc6
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_13_ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<style>
+  html, body {
+    margin: 0;
+  }
+
+  #destination {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+  }
+</style>
+<body>
+<div id="destination"></div>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_1_ref.html b/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_1_ref.html
new file mode 100644
index 00000000000..60545df17ff
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_1_ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<style>
+  html, body {
+    margin: 0;
+  }
+  #destination {
+    width: 100px;
+    height: 100px;
+    background-image: url("../2x2.png");
+  }
+</style>
+<body>
+<div id="destination"></div>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_2.html b/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_2.html
new file mode 100644
index 00000000000..9eeaae95ebb
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_2.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel=match href=drawimage_html_image_2_ref.html>
+<style>
+  html, body {
+    margin: 0;
+  }
+</style>
+<canvas id="dest" height="100" width="100"></canvas>
+<script>
+
+var sourceWidth = 100;
+var sourceHeight = 100;
+var smoothingEnabled = false;
+var destCanvas = document.getElementById('dest');
+var sourceImg = document.createElement('img');
+sourceImg.src = '../2x2.png'
+sourceImg.width = sourceWidth;
+sourceImg.height = sourceHeight;
+
+var destCtx = destCanvas.getContext('2d');
+destCtx.fillStyle = "#FF0000";
+destCtx.fillRect(0, 0,  destCanvas.width, destCanvas.height);
+destCtx.imageSmoothingEnabled = smoothingEnabled;
+
+// 2 arguments, the dest origin is not 0,0
+// The source image will copied to the 25, 25 position of the destination canvas
+destCtx.drawImage(sourceImg, 25, 25);
+
+</script>
diff --git a/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_2_ref.html b/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_2_ref.html
new file mode 100644
index 00000000000..c4535283500
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_2_ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<style>
+  html, body {
+    margin: 0;
+  }
+
+  #destination {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    background-image: url("../2x2.png");
+    background-position: 25px 25px;
+    background-repeat: no-repeat;
+  }
+</style>
+<body>
+<div id="destination"></div>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_3.html b/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_3.html
new file mode 100644
index 00000000000..63b303944ba
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_3.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel=match href=drawimage_html_image_3_ref.html>
+<style>
+  html, body {
+    margin: 0;
+  }
+</style>
+<canvas id="dest" height="100" width="100"></canvas>
+<script>
+
+var sourceWidth = 100;
+var sourceHeight = 100;
+var smoothingEnabled = true;
+var destCanvas = document.getElementById('dest');
+var sourceImg = document.createElement('img');
+sourceImg.src = '../2x2.png'
+sourceImg.width = sourceWidth;
+sourceImg.height = sourceHeight;
+
+var destCtx = destCanvas.getContext('2d');
+destCtx.fillStyle = "#FF0000";
+destCtx.fillRect(0, 0,  destCanvas.width, destCanvas.height);
+destCtx.imageSmoothingEnabled = smoothingEnabled;
+// 4 arguments, the source origin is not 0,0, the dest size is provided
+// The source canvas will copied to the 50, 50 position of the destination canvas and
+// on an area of 50x50 pixels
+destCtx.drawImage(sourceImg, 50, 50, 50, 50);
+
+</script>
diff --git a/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_3_ref.html b/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_3_ref.html
new file mode 100644
index 00000000000..b72687a8ace
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_3_ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<style>
+  html, body {
+    margin: 0;
+  }
+  #destination {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    background-image: url("../2x2.png");
+    background-position: 50px 50px;
+    background-repeat: no-repeat;
+    background-size: 50px 50px;
+  }
+</style>
+<body>
+<div id="destination"></div>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_4.html b/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_4.html
new file mode 100644
index 00000000000..dfaf4018d69
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_4.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel=match href=drawimage_html_image_4_ref.html>
+<style>
+  html, body {
+    margin: 0;
+  }
+</style>
+<canvas id="dest" height="100" width="100"></canvas>
+<script>
+
+var sourceWidth = 100;
+var sourceHeight = 100;
+var smoothingEnabled = false;
+var destCanvas = document.getElementById('dest');
+var sourceImg = document.createElement('img');
+sourceImg.src = '../2x2.png'
+sourceImg.width = sourceWidth;
+sourceImg.height = sourceHeight;
+
+var destCtx = destCanvas.getContext('2d');
+destCtx.fillStyle = "#FF0000";
+destCtx.fillRect(0, 0,  destCanvas.width, destCanvas.height);
+destCtx.imageSmoothingEnabled = smoothingEnabled;
+// 4 arguments, the dest origin is not 0,0 and the dest size is provided but
+// does not match the size of the source. The image will be distorted
+// The source canvas will copied to the 50,50 position of the destination canvas
+// and it will be shrunk to a and area of 16x16
+destCtx.drawImage(sourceImg, 50, 50, 16, 16);
+
+</script>
diff --git a/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_4_ref.html b/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_4_ref.html
new file mode 100644
index 00000000000..baa6591a220
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_4_ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<style>
+  html, body {
+    margin: 0;
+  }
+  #destination {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+  }
+
+  #destination img{
+    position: absolute;
+    top: 50px;
+    left: 50px;
+    width: 16px;
+    height: 16px;
+  }
+</style>
+<body>
+<div id="destination">
+  <img src="../2x2.png" />
+</div>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_5.html b/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_5.html
new file mode 100644
index 00000000000..a359fdf35b5
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_5.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel=match href=drawimage_html_image_5_ref.html>
+<style>
+  html, body {
+    margin: 0;
+  }
+</style>
+<canvas id="dest" height="100" width="100"></canvas>
+<script>
+
+var sourceWidth = 100;
+var sourceHeight = 100;
+var smoothingEnabled = false;
+var destCanvas = document.getElementById('dest');
+var sourceImg = document.createElement('img');
+sourceImg.src = '../2x2.png'
+sourceImg.width = sourceWidth;
+sourceImg.height = sourceHeight;
+
+var destCtx = destCanvas.getContext('2d');
+destCtx.fillStyle = "#FF0000";
+destCtx.fillRect(0, 0,  destCanvas.width, destCanvas.height);
+destCtx.imageSmoothingEnabled = smoothingEnabled;
+// The source canvas will copied to the 50,50 position of the destination canvas
+// over an area of 64x32 pixels
+// The copied image will be distorted along the x axis
+destCtx.drawImage(sourceImg, 50, 50, 64, 32);
+
+</script>
diff --git a/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_5_ref.html b/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_5_ref.html
new file mode 100644
index 00000000000..66b7cc194ac
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_5_ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<style>
+  html, body {
+    margin: 0;
+  }
+  #destination {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    overflow: hidden;
+  }
+
+  #destination .img{
+    position: relative;
+    top: 50px;
+    left: 50px;
+    width: 64px;
+    height: 32px;
+    overflow: hidden;
+  }
+
+  #destination .img img{
+    width: 100%;
+    height: 100%;
+  }
+
+</style>
+<body>
+<div id="destination">
+  <div class="img">
+    <img src="../2x2.png" />
+  </div>
+</div>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_6.html b/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_6.html
new file mode 100644
index 00000000000..4482ca3c319
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_6.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel=match href=drawimage_html_image_6_ref.html>
+<style>
+  html, body {
+    margin: 0;
+  }
+</style>
+<canvas id="dest" height="100" width="100"></canvas>
+<script>
+
+var sourceWidth = 100;
+var sourceHeight = 100;
+var smoothingEnabled = false;
+var destCanvas = document.getElementById('dest');
+var sourceImg = document.createElement('img');
+sourceImg.src = '../2x2.png'
+sourceImg.width = sourceWidth;
+sourceImg.height = sourceHeight;
+
+var destCtx = destCanvas.getContext('2d');
+destCtx.fillStyle = "#FF0000";
+destCtx.fillRect(0, 0,  destCanvas.width, destCanvas.height);
+destCtx.imageSmoothingEnabled = smoothingEnabled;
+
+// 8 arguments, both destination and source origins are 0, 0
+// An area of 32x32 pixels of the source image will be copied to
+// an area of 32x32 pixels of the destination canvas
+destCtx.drawImage(sourceImg, 0, 0, 32, 32, 0, 0, 32, 32);
+
+</script>
diff --git a/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_6_ref.html b/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_6_ref.html
new file mode 100644
index 00000000000..d7343375508
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_6_ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<style>
+  html, body {
+    margin: 0;
+  }
+  #destination {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    background-color: red;
+    background-image: url("../2x2.png");
+    background-position: -32px -32px;
+    background-size: 64px 64px;
+    background-repeat: no-repeat;
+  }
+
+</style>
+<body>
+<div id="destination"></div>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_7.html b/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_7.html
new file mode 100644
index 00000000000..cf6daa0d4c3
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_7.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel=match href=drawimage_html_image_7_ref.html>
+<style>
+  html, body {
+    margin: 0;
+  }
+</style>
+<canvas id="dest" height="100" width="100"></canvas>
+<script>
+
+var sourceWidth = 100;
+var sourceHeight = 100;
+var smoothingEnabled = false;
+var destCanvas = document.getElementById('dest');
+var sourceImg = document.createElement('img');
+sourceImg.src = '../2x2.png'
+sourceImg.width = sourceWidth;
+sourceImg.height = sourceHeight;
+
+var destCtx = destCanvas.getContext('2d');
+destCtx.fillStyle = "#FF0000";
+destCtx.fillRect(0, 0,  destCanvas.width, destCanvas.height);
+destCtx.imageSmoothingEnabled = smoothingEnabled;
+
+// 8 arguments the destination origin is not 0,0
+// An area of 32x32 pixels of the source image will be copied to
+// an area of 32x32 pixels of the destination canvas in the position 32,32
+destCtx.drawImage(sourceImg, 0, 0, 32, 32, 32, 32, 32, 32);
+
+</script>
diff --git a/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_7_ref.html b/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_7_ref.html
new file mode 100644
index 00000000000..e823ffbb75a
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_7_ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<style>
+  html, body {
+    margin: 0;
+  }
+
+  #destination {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+  }
+
+  #img {
+    position: relative;
+    top: 32px;
+    left: 32px;
+    width: 32px;
+    height: 32px;
+    background-image: url("../2x2.png");
+    background-position: -32px -32px;
+    background-size: 64px 64px;
+    background-repeat: no-repeat;
+  }
+
+</style>
+<body>
+<div id="destination">
+  <div id="img"><div>
+</div>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_8.html b/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_8.html
new file mode 100644
index 00000000000..c1ebfa81648
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_8.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel=match href=drawimage_html_image_8_ref.html>
+<style>
+  html, body {
+    margin: 0;
+  }
+</style>
+<canvas id="dest" height="100" width="100"></canvas>
+<script>
+
+var sourceWidth = 100;
+var sourceHeight = 100;
+var smoothingEnabled = false;
+var destCanvas = document.getElementById('dest');
+var sourceImg = document.createElement('img');
+sourceImg.src = '../2x2.png'
+sourceImg.width = sourceWidth;
+sourceImg.height = sourceHeight;
+
+var destCtx = destCanvas.getContext('2d');
+destCtx.fillStyle = "#FF0000";
+destCtx.fillRect(0, 0,  destCanvas.width, destCanvas.height);
+destCtx.imageSmoothingEnabled = smoothingEnabled;
+
+// The source rectangle overflows the source image
+// The source area is clipped to fit the source image
+// and the destination are is clipped in the same proportion
+destCtx.drawImage(sourceImg, 32, 32, 32, 32, 0, 0, 32, 32);
+
+</script>
diff --git a/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_8_ref.html b/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_8_ref.html
new file mode 100644
index 00000000000..1a025d26d99
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_8_ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<style>
+  html, body {
+    margin: 0;
+  }
+
+  #destination {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+  }
+
+  #img {
+    position: relative;
+    top: 0px;
+    left: 0px;
+    width: 32px;
+    height: 32px;
+    background-image: url("../2x2.png");
+    background-position: -32px -32px;
+    background-size: 64px 64px;
+    background-repeat: no-repeat;
+  }
+
+</style>
+<body>
+<div id="destination">
+  <div id="img"><div>
+</div>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_9.html b/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_9.html
new file mode 100644
index 00000000000..f0fc85d384a
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_9.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel=match href=drawimage_html_image_9_ref.html>
+<style>
+  html, body {
+    margin: 0;
+  }
+</style>
+<canvas id="dest" height="100" width="100"></canvas>
+<script>
+
+var sourceWidth = 100;
+var sourceHeight = 100;
+var smoothingEnabled = false;
+var destCanvas = document.getElementById('dest');
+var sourceImg = document.createElement('img');
+sourceImg.src = '../2x2.png'
+sourceImg.width = sourceWidth;
+sourceImg.height = sourceHeight;
+
+var destCtx = destCanvas.getContext('2d');
+destCtx.fillStyle = "#FF0000";
+destCtx.fillRect(0, 0,  destCanvas.width, destCanvas.height);
+destCtx.imageSmoothingEnabled = smoothingEnabled;
+
+// The destination rectangle has negative width and height
+// An exception is raised and nothing is drawn
+try {
+    destCtx.drawImage(sourceImg, 25, 50, 50, 0, 0, -100, -100);
+    // It makes the test fail if the exception is not thrown
+    destCtx.fillStyle = "#0000FF";
+    destCtx.fillRect(0, 0,  destCanvas.width, destCanvas.height);
+}
+catch(err) {
+  console.err("Exception Thrown");
+}
+
+</script>
diff --git a/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_9_ref.html b/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_9_ref.html
new file mode 100644
index 00000000000..5341e05c1e1
--- /dev/null
+++ b/tests/wpt/mozilla/tests/mozilla/canvas/drawimage_html_image_9_ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<style>
+  html, body {
+    margin: 0;
+  }
+  #destination {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+  }
+</style>
+<body>
+<div id="destination"></div>
+</body>
+</html>