From 88954e3e1800dee658837684f9376a321fca59b7 Mon Sep 17 00:00:00 2001
From: Diego Marcos <diego.marcos@gmail.com>
Date: Wed, 25 Mar 2015 17:17:18 -0700
Subject: [PATCH] Implements drawImage for html image as ImageSource

---
 components/canvas/canvas_paint_task.rs        | 165 ++++++++++----
 components/canvas/lib.rs                      |   1 +
 components/script/Cargo.toml                  |   3 +
 .../script/dom/canvasrenderingcontext2d.rs    | 215 ++++++++++++++----
 components/script/dom/htmlimageelement.rs     |  10 +
 .../webidls/CanvasRenderingContext2D.webidl   |   4 +-
 components/script/lib.rs                      |   1 +
 components/servo/Cargo.lock                   |   1 +
 ports/cef/Cargo.lock                          |   1 +
 ports/gonk/Cargo.lock                         |   1 +
 ...html => test_canvas_drawimage_canvas.html} |  46 +---
 .../test_canvas_drawimage_html_image.html     | 209 +++++++++++++++++
 ...awimage_1.html => drawimage_canvas_1.html} |   0
 ...image_10.html => drawimage_canvas_10.html} |  11 +-
 ..._ref.html => drawimage_canvas_10_ref.html} |   0
 ...image_11.html => drawimage_canvas_11.html} |   0
 ..._ref.html => drawimage_canvas_11_ref.html} |   0
 ...image_12.html => drawimage_canvas_12.html} |   4 +-
 ..._ref.html => drawimage_canvas_12_ref.html} |   0
 ...1_ref.html => drawimage_canvas_1_ref.html} |   0
 ...awimage_2.html => drawimage_canvas_2.html} |   0
 ...2_ref.html => drawimage_canvas_2_ref.html} |   0
 ...awimage_3.html => drawimage_canvas_3.html} |   0
 ...3_ref.html => drawimage_canvas_3_ref.html} |   0
 ...awimage_4.html => drawimage_canvas_4.html} |   0
 ...4_ref.html => drawimage_canvas_4_ref.html} |   0
 ...awimage_5.html => drawimage_canvas_5.html} |   3 +-
 ...5_ref.html => drawimage_canvas_5_ref.html} |   0
 ...awimage_6.html => drawimage_canvas_6.html} |   0
 ...6_ref.html => drawimage_canvas_6_ref.html} |   0
 ...awimage_7.html => drawimage_canvas_7.html} |   0
 ...7_ref.html => drawimage_canvas_7_ref.html} |   0
 ...awimage_8.html => drawimage_canvas_8.html} |   0
 ...8_ref.html => drawimage_canvas_8_ref.html} |   0
 ...awimage_9.html => drawimage_canvas_9.html} |   0
 ...9_ref.html => drawimage_canvas_9_ref.html} |   0
 .../ref/2dcontext/drawimage_html_image_1.html |  34 +++
 .../2dcontext/drawimage_html_image_10.html    |  38 ++++
 .../drawimage_html_image_10_ref.html          |  19 ++
 .../2dcontext/drawimage_html_image_11.html    |  36 +++
 .../drawimage_html_image_11_ref.html          |  19 ++
 .../2dcontext/drawimage_html_image_12.html    |  36 +++
 .../drawimage_html_image_12_ref.html          |  32 +++
 .../2dcontext/drawimage_html_image_13.html    |  44 ++++
 .../drawimage_html_image_13_ref.html          |  20 ++
 .../2dcontext/drawimage_html_image_1_ref.html |  19 ++
 .../ref/2dcontext/drawimage_html_image_2.html |  35 +++
 .../2dcontext/drawimage_html_image_2_ref.html |  23 ++
 .../ref/2dcontext/drawimage_html_image_3.html |  35 +++
 .../2dcontext/drawimage_html_image_3_ref.html |  23 ++
 .../ref/2dcontext/drawimage_html_image_4.html |  36 +++
 .../2dcontext/drawimage_html_image_4_ref.html |  29 +++
 .../ref/2dcontext/drawimage_html_image_5.html |  35 +++
 .../2dcontext/drawimage_html_image_5_ref.html |  39 ++++
 .../ref/2dcontext/drawimage_html_image_6.html |  36 +++
 .../2dcontext/drawimage_html_image_6_ref.html |  25 ++
 .../ref/2dcontext/drawimage_html_image_7.html |  36 +++
 .../2dcontext/drawimage_html_image_7_ref.html |  35 +++
 .../ref/2dcontext/drawimage_html_image_8.html |  36 +++
 .../2dcontext/drawimage_html_image_8_ref.html |  35 +++
 .../ref/2dcontext/drawimage_html_image_9.html |  43 ++++
 .../2dcontext/drawimage_html_image_9_ref.html |  19 ++
 tests/ref/2x2.png                             | Bin 0 -> 788238 bytes
 tests/ref/basic.list                          |  38 +++-
 .../2d.drawImage.3arg.html.ini                |   5 -
 .../2d.drawImage.5arg.html.ini                |   5 -
 .../2d.drawImage.9arg.basic.html.ini          |   5 -
 .../2d.drawImage.9arg.destpos.html.ini        |   5 -
 .../2d.drawImage.9arg.destsize.html.ini       |   5 -
 .../2d.drawImage.9arg.sourcepos.html.ini      |   5 -
 .../2d.drawImage.9arg.sourcesize.html.ini     |   5 -
 .../2d.drawImage.animated.apng.html.ini       |   5 -
 .../2d.drawImage.animated.gif.html.ini        |   5 -
 .../2d.drawImage.animated.poster.html.ini     |   5 -
 .../2d.drawImage.floatsource.html.ini         |   5 -
 .../2d.drawImage.nonfinite.html.ini           |   5 -
 .../2d.drawImage.nowrap.html.ini              |   5 -
 .../2d.drawImage.transform.html.ini           |   5 -
 .../2d.drawImage.zerocanvas.html.ini          |   5 -
 .../2d.drawImage.zerosource.html.ini          |   5 -
 .../2d.shadow.canvas.transparent.1.html.ini   |   5 -
 .../2d.shadow.canvas.transparent.2.html.ini   |   1 -
 .../shadows/2d.shadow.image.section.html.ini  |   5 -
 .../2d.shadow.image.transparent.1.html.ini    |   5 -
 .../2d.shadow.image.transparent.2.html.ini    |   1 -
 .../shadows/canvas_shadows_002.htm.ini        |   4 +
 86 files changed, 1380 insertions(+), 251 deletions(-)
 rename tests/html/{test_canvas_drawimage.html => test_canvas_drawimage_canvas.html} (83%)
 create mode 100644 tests/html/test_canvas_drawimage_html_image.html
 rename tests/ref/2dcontext/{drawimage_1.html => drawimage_canvas_1.html} (100%)
 rename tests/ref/2dcontext/{drawimage_10.html => drawimage_canvas_10.html} (77%)
 rename tests/ref/2dcontext/{drawimage_10_ref.html => drawimage_canvas_10_ref.html} (100%)
 rename tests/ref/2dcontext/{drawimage_11.html => drawimage_canvas_11.html} (100%)
 rename tests/ref/2dcontext/{drawimage_11_ref.html => drawimage_canvas_11_ref.html} (100%)
 rename tests/ref/2dcontext/{drawimage_12.html => drawimage_canvas_12.html} (89%)
 rename tests/ref/2dcontext/{drawimage_12_ref.html => drawimage_canvas_12_ref.html} (100%)
 rename tests/ref/2dcontext/{drawimage_1_ref.html => drawimage_canvas_1_ref.html} (100%)
 rename tests/ref/2dcontext/{drawimage_2.html => drawimage_canvas_2.html} (100%)
 rename tests/ref/2dcontext/{drawimage_2_ref.html => drawimage_canvas_2_ref.html} (100%)
 rename tests/ref/2dcontext/{drawimage_3.html => drawimage_canvas_3.html} (100%)
 rename tests/ref/2dcontext/{drawimage_3_ref.html => drawimage_canvas_3_ref.html} (100%)
 rename tests/ref/2dcontext/{drawimage_4.html => drawimage_canvas_4.html} (100%)
 rename tests/ref/2dcontext/{drawimage_4_ref.html => drawimage_canvas_4_ref.html} (100%)
 rename tests/ref/2dcontext/{drawimage_5.html => drawimage_canvas_5.html} (99%)
 rename tests/ref/2dcontext/{drawimage_5_ref.html => drawimage_canvas_5_ref.html} (100%)
 rename tests/ref/2dcontext/{drawimage_6.html => drawimage_canvas_6.html} (100%)
 rename tests/ref/2dcontext/{drawimage_6_ref.html => drawimage_canvas_6_ref.html} (100%)
 rename tests/ref/2dcontext/{drawimage_7.html => drawimage_canvas_7.html} (100%)
 rename tests/ref/2dcontext/{drawimage_7_ref.html => drawimage_canvas_7_ref.html} (100%)
 rename tests/ref/2dcontext/{drawimage_8.html => drawimage_canvas_8.html} (100%)
 rename tests/ref/2dcontext/{drawimage_8_ref.html => drawimage_canvas_8_ref.html} (100%)
 rename tests/ref/2dcontext/{drawimage_9.html => drawimage_canvas_9.html} (100%)
 rename tests/ref/2dcontext/{drawimage_9_ref.html => drawimage_canvas_9_ref.html} (100%)
 create mode 100644 tests/ref/2dcontext/drawimage_html_image_1.html
 create mode 100644 tests/ref/2dcontext/drawimage_html_image_10.html
 create mode 100644 tests/ref/2dcontext/drawimage_html_image_10_ref.html
 create mode 100644 tests/ref/2dcontext/drawimage_html_image_11.html
 create mode 100644 tests/ref/2dcontext/drawimage_html_image_11_ref.html
 create mode 100644 tests/ref/2dcontext/drawimage_html_image_12.html
 create mode 100644 tests/ref/2dcontext/drawimage_html_image_12_ref.html
 create mode 100644 tests/ref/2dcontext/drawimage_html_image_13.html
 create mode 100644 tests/ref/2dcontext/drawimage_html_image_13_ref.html
 create mode 100644 tests/ref/2dcontext/drawimage_html_image_1_ref.html
 create mode 100644 tests/ref/2dcontext/drawimage_html_image_2.html
 create mode 100644 tests/ref/2dcontext/drawimage_html_image_2_ref.html
 create mode 100644 tests/ref/2dcontext/drawimage_html_image_3.html
 create mode 100644 tests/ref/2dcontext/drawimage_html_image_3_ref.html
 create mode 100644 tests/ref/2dcontext/drawimage_html_image_4.html
 create mode 100644 tests/ref/2dcontext/drawimage_html_image_4_ref.html
 create mode 100644 tests/ref/2dcontext/drawimage_html_image_5.html
 create mode 100644 tests/ref/2dcontext/drawimage_html_image_5_ref.html
 create mode 100644 tests/ref/2dcontext/drawimage_html_image_6.html
 create mode 100644 tests/ref/2dcontext/drawimage_html_image_6_ref.html
 create mode 100644 tests/ref/2dcontext/drawimage_html_image_7.html
 create mode 100644 tests/ref/2dcontext/drawimage_html_image_7_ref.html
 create mode 100644 tests/ref/2dcontext/drawimage_html_image_8.html
 create mode 100644 tests/ref/2dcontext/drawimage_html_image_8_ref.html
 create mode 100644 tests/ref/2dcontext/drawimage_html_image_9.html
 create mode 100644 tests/ref/2dcontext/drawimage_html_image_9_ref.html
 create mode 100644 tests/ref/2x2.png
 delete mode 100644 tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.3arg.html.ini
 delete mode 100644 tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.5arg.html.ini
 delete mode 100644 tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.9arg.basic.html.ini
 delete mode 100644 tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.9arg.destpos.html.ini
 delete mode 100644 tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.9arg.destsize.html.ini
 delete mode 100644 tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.9arg.sourcepos.html.ini
 delete mode 100644 tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.9arg.sourcesize.html.ini
 delete mode 100644 tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.animated.apng.html.ini
 delete mode 100644 tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.animated.gif.html.ini
 delete mode 100644 tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.animated.poster.html.ini
 delete mode 100644 tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.floatsource.html.ini
 delete mode 100644 tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.nonfinite.html.ini
 delete mode 100644 tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.nowrap.html.ini
 delete mode 100644 tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.transform.html.ini
 delete mode 100644 tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.zerocanvas.html.ini
 delete mode 100644 tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.zerosource.html.ini
 delete mode 100644 tests/wpt/metadata/2dcontext/shadows/2d.shadow.canvas.transparent.1.html.ini
 delete mode 100644 tests/wpt/metadata/2dcontext/shadows/2d.shadow.image.section.html.ini
 delete mode 100644 tests/wpt/metadata/2dcontext/shadows/2d.shadow.image.transparent.1.html.ini
 create mode 100644 tests/wpt/metadata/2dcontext/shadows/canvas_shadows_002.htm.ini

diff --git a/components/canvas/canvas_paint_task.rs b/components/canvas/canvas_paint_task.rs
index 403e4b2a3c7..aa4ac307f83 100644
--- a/components/canvas/canvas_paint_task.rs
+++ b/components/canvas/canvas_paint_task.rs
@@ -16,7 +16,7 @@ use util::vec::byte_swap;
 
 use cssparser::RGBA;
 use std::borrow::ToOwned;
-use std::num::Float;
+use std::num::{Float, ToPrimitive};
 use std::sync::mpsc::{channel, Sender};
 
 #[derive(Clone)]
@@ -28,8 +28,8 @@ pub enum CanvasMsg {
     ClosePath,
     Fill,
     Stroke,
-    DrawImage(Vec<u8>, Rect<i32>, Rect<i32>, bool),
-    DrawImageSelf(Size2D<i32>, Rect<i32>, Rect<i32>, bool),
+    DrawImage(Vec<u8>, Size2D<f64>, Rect<f64>, Rect<f64>, bool),
+    DrawImageSelf(Size2D<f64>, Rect<f64>, Rect<f64>, bool),
     MoveTo(Point2D<f32>),
     LineTo(Point2D<f32>),
     QuadraticCurveTo(Point2D<f32>, Point2D<f32>),
@@ -41,8 +41,8 @@ pub enum CanvasMsg {
     SetTransform(Matrix2D<f32>),
     Recreate(Size2D<i32>),
     SendPixelContents(Sender<Vec<u8>>),
-    GetImageData(Rect<i32>, Size2D<i32>, Sender<Vec<u8>>),
-    PutImageData(Vec<u8>, Rect<i32>, Option<Rect<i32>>),
+    GetImageData(Rect<f64>, Size2D<f64>, Sender<Vec<u8>>),
+    PutImageData(Vec<u8>, Rect<f64>, Option<Rect<f64>>),
     Close,
 }
 
@@ -50,7 +50,9 @@ impl<'a> CanvasPaintTask<'a> {
     /// It reads image data from the canvas
     /// canvas_size: The size of the canvas we're reading from
     /// read_rect: The area of the canvas we want to read from
-    fn read_pixels(&self, read_rect: Rect<i32>, canvas_size: Size2D<i32>) -> Vec<u8>{
+    fn read_pixels(&self, read_rect: Rect<f64>, canvas_size: Size2D<f64>) -> Vec<u8>{
+        let read_rect = read_rect.to_i32();
+        let canvas_size = canvas_size.to_i32();
         let canvas_rect = Rect(Point2D(0i32, 0i32), canvas_size);
         let src_read_rect = canvas_rect.intersection(&read_rect).unwrap_or(Rect::zero());
 
@@ -81,9 +83,9 @@ impl<'a> CanvasPaintTask<'a> {
     /// dest_rect: The area of the canvas where the imagedata will be copied
     /// smoothing_enabled: if smoothing is applied to the copied pixels
     fn write_pixels(&self, imagedata: &[u8],
-                    image_size: Size2D<i32>,
-                    source_rect: Rect<i32>,
-                    dest_rect: Rect<i32>,
+                    image_size: Size2D<f64>,
+                    source_rect: Rect<f64>,
+                    dest_rect: Rect<f64>,
                     smoothing_enabled: bool) {
         // From spec https://html.spec.whatwg.org/multipage/scripting.html#dom-context-2d-drawimage
         // When scaling up, if the imageSmoothingEnabled attribute is set to true, the user agent should attempt
@@ -94,8 +96,11 @@ impl<'a> CanvasPaintTask<'a> {
         } else {
             Filter::Point
         };
+        // azure_hl operates with integers. We need to cast the image size
+        let image_size = image_size.to_i32();
 
-        let source_surface = self.drawtarget.create_source_surface_from_data(imagedata,
+        let source_surface = self.drawtarget.create_source_surface_from_data(
+            &imagedata,
             image_size, image_size.width * 4, SurfaceFormat::B8G8R8A8);
 
         let draw_surface_options = DrawSurfaceOptions::new(filter, true);
@@ -112,33 +117,33 @@ impl<'a> CanvasPaintTask<'a> {
     /// Result: It retuns the modified dirty_rect by the rules described in
     /// the spec https://html.spec.whatwg.org/#dom-context-2d-putimagedata
     fn calculate_dirty_rect(&self,
-                            mut dirty_rect: Rect<i32>,
-                            image_data_rect: Rect<i32>) -> Rect<i32>{
+                            mut dirty_rect: Rect<f64>,
+                            image_data_rect: Rect<f64>) -> Rect<f64>{
         // 1) If dirtyWidth is negative,
         // let dirtyX be dirtyX+dirtyWidth,
         // and let dirtyWidth be equal to the absolute magnitude of dirtyWidth.
-        if dirty_rect.size.width < 0 {
+        if dirty_rect.size.width < 0.0f64 {
             dirty_rect.origin.x = dirty_rect.origin.x + dirty_rect.size.width;
             dirty_rect.size.width = -dirty_rect.size.width;
         }
 
         // 2) If dirtyHeight is negative, let dirtyY be dirtyY+dirtyHeight,
         // and let dirtyHeight be equal to the absolute magnitude of dirtyHeight.
-        if dirty_rect.size.height < 0 {
+        if dirty_rect.size.height < 0.0f64 {
             dirty_rect.origin.y = dirty_rect.origin.y + dirty_rect.size.height;
             dirty_rect.size.height = -dirty_rect.size.height;
         }
 
         // 3) If dirtyX is negative, let dirtyWidth be dirtyWidth+dirtyX, and let dirtyX be zero.
-        if dirty_rect.origin.x < 0 {
+        if dirty_rect.origin.x < 0.0f64 {
             dirty_rect.size.width += dirty_rect.origin.x;
-            dirty_rect.origin.x = 0;
+            dirty_rect.origin.x = 0.0f64;
         }
 
         // 3) If dirtyY is negative, let dirtyHeight be dirtyHeight+dirtyY, and let dirtyY be zero.
-        if dirty_rect.origin.y < 0 {
+        if dirty_rect.origin.y < 0.0f64 {
             dirty_rect.size.height += dirty_rect.origin.y;
-            dirty_rect.origin.y = 0;
+            dirty_rect.origin.y = 0.0f64;
         }
 
         // 4) If dirtyX+dirtyWidth is greater than the width attribute of the imagedata argument,
@@ -157,21 +162,19 @@ impl<'a> CanvasPaintTask<'a> {
     }
 
     /// It writes an image to the destination canvas
-    /// imagedata: Pixel information of the image to be written
-    /// source_rect: Area of the source image to be copied
+    /// imagedata: Pixel information of the image to be written. It takes RGBA8
+    /// image_size: The size of the image to be written
     /// dest_rect: Area of the destination canvas where the pixels will be copied
     /// smoothing_enabled: It determines if smoothing is applied to the image result
     fn write_image(&self, mut imagedata: Vec<u8>,
-                   source_rect: Rect<i32>, dest_rect: Rect<i32>, smoothing_enabled: bool) {
+                   image_size: Size2D<f64>, dest_rect: Rect<f64>, smoothing_enabled: bool) {
         if imagedata.len() == 0 {
             return
         }
-        // Image data already contains the portion of the image we want to draw
-        // so the source rect corresponds to the whole area of the copied imagedata
-        let source_rect = Rect(Point2D(0i32, 0i32), source_rect.size);
+        let image_rect = Rect(Point2D(0f64, 0f64), image_size);
         // rgba -> bgra
         byte_swap(imagedata.as_mut_slice());
-        self.write_pixels(&imagedata, source_rect.size, source_rect, dest_rect, smoothing_enabled);
+        self.write_pixels(&imagedata, image_size, image_rect, dest_rect, smoothing_enabled);
     }
 
 }
@@ -215,8 +218,8 @@ impl<'a> CanvasPaintTask<'a> {
                     CanvasMsg::ClosePath => painter.close_path(),
                     CanvasMsg::Fill => painter.fill(),
                     CanvasMsg::Stroke => painter.stroke(),
-                    CanvasMsg::DrawImage(imagedata, dest_rect, source_rect, smoothing_enabled) => {
-                        painter.draw_image(imagedata, dest_rect, source_rect, smoothing_enabled)
+                    CanvasMsg::DrawImage(imagedata, image_size, dest_rect, source_rect, smoothing_enabled) => {
+                        painter.draw_image(imagedata, image_size, dest_rect, source_rect, smoothing_enabled)
                     }
                     CanvasMsg::DrawImageSelf(image_size, dest_rect, source_rect, smoothing_enabled) => {
                         painter.draw_image_self(image_size, dest_rect, source_rect, smoothing_enabled)
@@ -304,19 +307,23 @@ impl<'a> CanvasPaintTask<'a> {
         };
     }
 
-    fn draw_image(&self, imagedata: Vec<u8>, dest_rect: Rect<i32>,
-                  source_rect: Rect<i32>, smoothing_enabled: bool) {
-        self.write_image(imagedata, source_rect, dest_rect, smoothing_enabled);
+    fn draw_image(&self, image_data: Vec<u8>, image_size: Size2D<f64>,
+                  dest_rect: Rect<f64>, source_rect: Rect<f64>, smoothing_enabled: bool) {
+        // We round up the floating pixel values to draw the pixels
+        let source_rect = source_rect.ceil();
+        // It discards the extra pixels (if any) that won't be painted
+        let image_data = crop_image(image_data, image_size, source_rect);
+        self.write_image(image_data, source_rect.size, dest_rect, smoothing_enabled);
     }
 
-    fn draw_image_self(&self, image_size: Size2D<i32>,
-                       dest_rect: Rect<i32>, source_rect: Rect<i32>,
+    fn draw_image_self(&self, image_size: Size2D<f64>,
+                       dest_rect: Rect<f64>, source_rect: Rect<f64>,
                        smoothing_enabled: bool) {
         // Reads pixels from source image
         // In this case source and target are the same canvas
         let imagedata = self.read_pixels(source_rect, image_size);
         // Writes on target canvas
-        self.write_image(imagedata, source_rect, dest_rect, smoothing_enabled);
+        self.write_image(imagedata, image_size, dest_rect, smoothing_enabled);
     }
 
     fn move_to(&self, point: &Point2D<AzFloat>) {
@@ -431,20 +438,20 @@ impl<'a> CanvasPaintTask<'a> {
         })
     }
 
-    fn get_image_data(&self, mut dest_rect: Rect<i32>, canvas_size: Size2D<i32>, chan: Sender<Vec<u8>>) {
-        if dest_rect.size.width < 0 {
+    fn get_image_data(&self, mut dest_rect: Rect<f64>, canvas_size: Size2D<f64>, chan: Sender<Vec<u8>>) {
+        if dest_rect.size.width < 0.0 {
             dest_rect.size.width = -dest_rect.size.width;
             dest_rect.origin.x -= dest_rect.size.width;
         }
-        if dest_rect.size.height < 0 {
+        if dest_rect.size.height < 0.0 {
             dest_rect.size.height = -dest_rect.size.height;
             dest_rect.origin.y -= dest_rect.size.height;
         }
-        if dest_rect.size.width == 0 {
-            dest_rect.size.width = 1;
+        if dest_rect.size.width == 0.0 {
+            dest_rect.size.width = 1.0;
         }
-        if dest_rect.size.height == 0 {
-            dest_rect.size.height = 1;
+        if dest_rect.size.height == 0.0 {
+            dest_rect.size.height = 1.0;
         }
 
         let mut dest_data = self.read_pixels(dest_rect, canvas_size);
@@ -455,18 +462,18 @@ impl<'a> CanvasPaintTask<'a> {
     }
 
     fn put_image_data(&mut self, mut imagedata: Vec<u8>,
-                      image_data_rect: Rect<i32>,
-                      dirty_rect: Option<Rect<i32>>) {
+                      image_data_rect: Rect<f64>,
+                      dirty_rect: Option<Rect<f64>>) {
 
-        if image_data_rect.size.width <= 0 || image_data_rect.size.height <= 0 {
+        if image_data_rect.size.width <= 0.0 || image_data_rect.size.height <= 0.0 {
             return
         }
 
-        assert!(image_data_rect.size.width * image_data_rect.size.height * 4 == imagedata.len() as i32);
+        assert!(image_data_rect.size.width * image_data_rect.size.height * 4.0 == imagedata.len() as f64);
         // rgba -> bgra
         byte_swap(imagedata.as_mut_slice());
 
-        let image_rect = Rect(Point2D(0i32, 0i32),
+        let image_rect = Rect(Point2D(0f64, 0f64),
                                Size2D(image_data_rect.size.width, image_data_rect.size.height));
 
         // Dirty rectangle defines the area of the source image to be copied
@@ -481,7 +488,7 @@ impl<'a> CanvasPaintTask<'a> {
 
         // 5) If either dirtyWidth or dirtyHeight is negative or zero,
         // stop without affecting any bitmaps
-        if source_rect.size.width <= 0 || source_rect.size.height <= 0 {
+        if source_rect.size.width <= 0.0 || source_rect.size.height <= 0.0 {
             return
         }
 
@@ -603,11 +610,75 @@ impl FillOrStrokeStyle {
     }
 }
 
+/// Used by drawImage to get rid of the extra pixels of the image data that
+/// won't be copied to the canvas
+/// image_data: Color pixel data of the image
+/// image_size: Image dimensions
+/// crop_rect: It determines the area of the image we want to keep
+fn crop_image(image_data: Vec<u8>,
+              image_size: Size2D<f64>,
+              crop_rect: Rect<f64>) -> Vec<u8>{
+    // We're going to iterate over a pixel values array so we need integers
+    let crop_rect = crop_rect.to_i32();
+    let image_size = image_size.to_i32();
+    // Assuming 4 bytes per pixel and row-major order for storage
+    // (consecutive elements in a pixel row of the image are contiguous in memory)
+    let stride = image_size.width * 4;
+    let image_bytes_length = image_size.height * image_size.width * 4;
+    let crop_area_bytes_length = crop_rect.size.height * crop_rect.size.height * 4;
+    // If the image size is less or equal than the crop area we do nothing
+    if image_bytes_length <= crop_area_bytes_length {
+        return image_data;
+    }
+
+    let mut new_image_data = Vec::new();
+    let mut src = (crop_rect.origin.y * stride + crop_rect.origin.x * 4) as usize;
+    for _ in (0..crop_rect.size.height) {
+        let row = &image_data[src .. src + (4 * crop_rect.size.width) as usize];
+        new_image_data.push_all(row);
+        src += stride as usize;
+    }
+    new_image_data
+}
+
+pub trait SizeToi32 {
+    fn to_i32(&self) -> Size2D<i32>;
+}
+
+impl SizeToi32 for Size2D<f64> {
+    fn to_i32(&self) -> Size2D<i32> {
+        Size2D(self.width.to_i32().unwrap(),
+               self.height.to_i32().unwrap())
+    }
+}
+
+pub trait RectToi32 {
+    fn to_i32(&self) -> Rect<i32>;
+    fn ceil(&self) -> Rect<f64>;
+}
+
+impl RectToi32 for Rect<f64> {
+    fn to_i32(&self) -> Rect<i32> {
+        Rect(Point2D(self.origin.x.to_i32().unwrap(),
+                     self.origin.y.to_i32().unwrap()),
+             Size2D(self.size.width.to_i32().unwrap(),
+                    self.size.height.to_i32().unwrap()))
+    }
+
+    fn ceil(&self) -> Rect<f64> {
+        Rect(Point2D(self.origin.x.ceil(),
+                     self.origin.y.ceil()),
+             Size2D(self.size.width.ceil(),
+                    self.size.height.ceil()))
+    }
+
+}
+
 pub trait ToAzFloat {
     fn to_azfloat(&self) -> Rect<AzFloat>;
 }
 
-impl ToAzFloat for Rect<i32> {
+impl ToAzFloat for Rect<f64> {
     fn to_azfloat(&self) -> Rect<AzFloat> {
         Rect(Point2D(self.origin.x as AzFloat, self.origin.y as AzFloat),
              Size2D(self.size.width as AzFloat, self.size.height as AzFloat))
diff --git a/components/canvas/lib.rs b/components/canvas/lib.rs
index dba859dc9df..2b5c51feec1 100644
--- a/components/canvas/lib.rs
+++ b/components/canvas/lib.rs
@@ -3,6 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 #![feature(collections)]
+#![feature(core)]
 #![feature(std_misc)]
 
 extern crate azure;
diff --git a/components/script/Cargo.toml b/components/script/Cargo.toml
index 9e7db847a86..63eaea80142 100644
--- a/components/script/Cargo.toml
+++ b/components/script/Cargo.toml
@@ -57,6 +57,9 @@ git = "https://github.com/servo/html5ever"
 [dependencies.js]
 git = "https://github.com/servo/rust-mozjs"
 
+[dependencies.png]
+git = "https://github.com/servo/rust-png"
+
 [dependencies.uuid]
 git = "https://github.com/rust-lang/uuid"
 
diff --git a/components/script/dom/canvasrenderingcontext2d.rs b/components/script/dom/canvasrenderingcontext2d.rs
index fc8573923d0..b4863d876a2 100644
--- a/components/script/dom/canvasrenderingcontext2d.rs
+++ b/components/script/dom/canvasrenderingcontext2d.rs
@@ -6,9 +6,9 @@ use dom::bindings::codegen::Bindings::CanvasRenderingContext2DBinding;
 use dom::bindings::codegen::Bindings::CanvasRenderingContext2DBinding::CanvasRenderingContext2DMethods;
 use dom::bindings::codegen::Bindings::CanvasRenderingContext2DBinding::CanvasWindingRule;
 use dom::bindings::codegen::Bindings::ImageDataBinding::ImageDataMethods;
-use dom::bindings::codegen::UnionTypes::HTMLCanvasElementOrCanvasRenderingContext2D;
+use dom::bindings::codegen::UnionTypes::HTMLImageElementOrHTMLCanvasElementOrCanvasRenderingContext2D;
 use dom::bindings::codegen::UnionTypes::StringOrCanvasGradientOrCanvasPattern;
-use dom::bindings::error::Error::{IndexSize, NotSupported, Type};
+use dom::bindings::error::Error::{IndexSize, NotSupported, Type, InvalidState};
 use dom::bindings::error::Fallible;
 use dom::bindings::global::{GlobalRef, GlobalField};
 use dom::bindings::js::{JS, JSRef, LayoutJS, Temporary};
@@ -16,7 +16,9 @@ use dom::bindings::num::Finite;
 use dom::bindings::utils::{Reflector, reflect_dom_object};
 use dom::canvasgradient::{CanvasGradient, CanvasGradientStyle, ToFillOrStrokeStyle};
 use dom::htmlcanvaselement::{HTMLCanvasElement, HTMLCanvasElementHelpers};
+use dom::htmlimageelement::{HTMLImageElement, HTMLImageElementHelpers};
 use dom::imagedata::{ImageData, ImageDataHelpers};
+use dom::node::{window_from_node};
 
 use cssparser::Color as CSSColor;
 use cssparser::{Parser, RGBA, ToCss};
@@ -28,11 +30,19 @@ use geom::size::Size2D;
 use canvas::canvas_paint_task::{CanvasMsg, CanvasPaintTask, FillOrStrokeStyle};
 use canvas::canvas_paint_task::{LinearGradientStyle, RadialGradientStyle};
 
+use net_traits::image::base::Image;
+use net_traits::image_cache_task::{ImageResponseMsg, Msg};
+use png::PixelsByColorType;
+
 use std::borrow::ToOwned;
 use std::cell::Cell;
 use std::num::{Float, ToPrimitive};
+use std::sync::{Arc};
 use std::sync::mpsc::{channel, Sender};
 
+use url::Url;
+use util::vec::byte_swap;
+
 #[dom_struct]
 pub struct CanvasRenderingContext2D {
     reflector_: Reflector,
@@ -85,10 +95,9 @@ impl CanvasRenderingContext2D {
     // source rectangle = area of the original image to be copied
     // destination rectangle = area of the destination canvas where the source image is going to be drawn
     fn adjust_source_dest_rects(&self,
-                  canvas: JSRef<HTMLCanvasElement>,
+                  image_size: Size2D<f64>,
                   sx: f64, sy: f64, sw: f64, sh: f64,
-                  dx: f64, dy: f64, dw: f64, dh: f64) -> (Rect<i32>, Rect<i32>) {
-        let image_size = canvas.get_size();
+                  dx: f64, dy: f64, dw: f64, dh: f64) -> (Rect<f64>, Rect<f64>) {
         let image_rect = Rect(Point2D(0f64, 0f64),
                               Size2D(image_size.width as f64, image_size.height as f64));
 
@@ -112,15 +121,13 @@ impl CanvasRenderingContext2D {
 
         // The destination rectangle is the rectangle whose corners are the four points (dx, dy),
         // (dx+dw, dy), (dx+dw, dy+dh), (dx, dy+dh).
-        let dest_rect = Rect(Point2D(dx.to_i32().unwrap(),
-                                     dy.to_i32().unwrap()),
-                             Size2D(dest_rect_width_scaled.to_i32().unwrap(),
-                                    dest_rect_height_scaled.to_i32().unwrap()));
+        let dest_rect = Rect(Point2D(dx, dy),
+                             Size2D(dest_rect_width_scaled, dest_rect_height_scaled));
 
-        let source_rect = Rect(Point2D(source_rect_clipped.origin.x.to_i32().unwrap(),
-                                     source_rect_clipped.origin.y.to_i32().unwrap()),
-                             Size2D(source_rect_clipped.size.width.to_i32().unwrap(),
-                                    source_rect_clipped.size.height.to_i32().unwrap()));
+        let source_rect = Rect(Point2D(source_rect_clipped.origin.x,
+                                     source_rect_clipped.origin.y),
+                             Size2D(source_rect_clipped.size.width,
+                                    source_rect_clipped.size.height));
 
         return (source_rect, dest_rect)
     }
@@ -150,39 +157,103 @@ impl CanvasRenderingContext2D {
                   canvas: JSRef<HTMLCanvasElement>,
                   sx: f64, sy: f64, sw: f64, sh: f64,
                   dx: f64, dy: f64, dw: f64, dh: f64) -> Fallible<()> {
-
         // 1. Check the usability of the image argument
         if !canvas.is_valid() {
-            return Ok(())
+            return Err(InvalidState)
         }
 
+        let canvas_size = canvas.get_size();
+        let image_size = Size2D(canvas_size.width as f64, canvas_size.height as f64);
         // 2. Establish the source and destination rectangles
-        let (source_rect, dest_rect) = self.adjust_source_dest_rects(canvas, sx, sy, sw, sh, dx, dy, dw, dh);
+        let (source_rect, dest_rect) = self.adjust_source_dest_rects(image_size, sx, sy, sw, sh, dx, dy, dw, dh);
 
         if !is_rect_valid(source_rect) || !is_rect_valid(dest_rect) {
             return Err(IndexSize)
         }
 
         let smoothing_enabled = self.image_smoothing_enabled.get();
-        let canvas_size = canvas.get_size();
 
         // If the source and target canvas are the same
         let msg = if self.canvas.root().r() == canvas {
-            CanvasMsg::DrawImageSelf(canvas_size, dest_rect, source_rect, smoothing_enabled)
+            CanvasMsg::DrawImageSelf(image_size, dest_rect, source_rect, smoothing_enabled)
         } else { // Source and target canvases are different
             let context = canvas.get_2d_context().root();
             let renderer = context.r().get_renderer();
             let (sender, receiver) = channel::<Vec<u8>>();
             // Reads pixels from source image
-            renderer.send(CanvasMsg::GetImageData(source_rect, canvas_size, sender)).unwrap();
+            renderer.send(CanvasMsg::GetImageData(source_rect, image_size, sender)).unwrap();
             let imagedata = receiver.recv().unwrap();
             // Writes pixels to destination canvas
-            CanvasMsg::DrawImage(imagedata, dest_rect, source_rect, smoothing_enabled)
+            CanvasMsg::DrawImage(imagedata, source_rect.size, dest_rect, source_rect, smoothing_enabled)
         };
 
         self.renderer.send(msg).unwrap();
         Ok(())
     }
+
+    fn draw_image_data(&self,
+                       image_data: Vec<u8>,
+                       image_size: Size2D<f64>,
+                       sx: f64, sy: f64, sw: f64, sh: f64,
+                       dx: f64, dy: f64, dw: f64, dh: f64) -> Fallible<()> {
+        // Establish the source and destination rectangles
+        let (source_rect, dest_rect) = self.adjust_source_dest_rects(image_size, sx, sy, sw, sh, dx, dy, dw, dh);
+
+        if !is_rect_valid(source_rect) || !is_rect_valid(dest_rect) {
+            return Err(IndexSize)
+        }
+
+        let smoothing_enabled = self.image_smoothing_enabled.get();
+        self.renderer.send(CanvasMsg::DrawImage(
+                           image_data, image_size, dest_rect,
+                           source_rect, smoothing_enabled)).unwrap();
+        Ok(())
+    }
+
+    fn fetch_image_data(&self,
+                        image_element: &JSRef<HTMLImageElement>)
+                        -> Option<(Vec<u8>, Size2D<f64>)> {
+        let url = match image_element.get_url() {
+            Some(url) => url,
+            None => return None,
+        };
+
+        let img = match self.request_image_from_cache(url) {
+            Some(img) => img,
+            None => return None,
+        };
+
+        let image_size = Size2D(img.width as f64, img.height as f64);
+        let mut image_data = match img.pixels {
+            PixelsByColorType::RGBA8(ref pixels) => pixels.to_vec(),
+            PixelsByColorType::K8(_) => panic!("K8 color type not supported"),
+            PixelsByColorType::RGB8(_) => panic!("RGB8 color type not supported"),
+            PixelsByColorType::KA8(_) => panic!("KA8 color type not supported"),
+        };
+        // Pixels come from cache in BGRA order and drawImage expects RGBA so we
+        // have to swap the color values
+        {
+            let mut pixel_colors = image_data.as_mut_slice();
+            byte_swap(pixel_colors);
+        }
+        return Some((image_data, image_size));
+    }
+
+    fn request_image_from_cache(&self, url: Url) -> Option<Arc<Box<Image>>> {
+        let canvas = self.canvas.root();
+        let window = window_from_node(canvas.r()).root();
+        let window = window.r();
+        let image_cache_task = window.image_cache_task().clone();
+        image_cache_task.send(Msg::Prefetch(url.clone()));
+        image_cache_task.send(Msg::Decode(url.clone()));
+        let (response_chan, response_port) = channel();
+        image_cache_task.send(Msg::WaitForImage(url, response_chan));
+        match response_port.recv().unwrap() {
+           ImageResponseMsg::ImageReady(image) => Some(image),
+           ImageResponseMsg::ImageFailed => None,
+           _ => panic!("Image Cache: Unknown Result")
+         }
+    }
 }
 
 pub trait CanvasRenderingContext2DHelpers {
@@ -316,7 +387,7 @@ impl<'a> CanvasRenderingContext2DMethods for JSRef<'a, CanvasRenderingContext2D>
     }
 
     // https://html.spec.whatwg.org/multipage/scripting.html#dom-context-2d-drawimage
-    fn DrawImage(self, image: HTMLCanvasElementOrCanvasRenderingContext2D,
+    fn DrawImage(self, image: HTMLImageElementOrHTMLCanvasElementOrCanvasRenderingContext2D,
                  dx: f64, dy: f64) -> Fallible<()> {
         if !(dx.is_finite() && dy.is_finite()) {
             return Ok(());
@@ -330,7 +401,7 @@ impl<'a> CanvasRenderingContext2DMethods for JSRef<'a, CanvasRenderingContext2D>
         let sy: f64 = 0f64;
 
         match image {
-            HTMLCanvasElementOrCanvasRenderingContext2D::eHTMLCanvasElement(image) => {
+            HTMLImageElementOrHTMLCanvasElementOrCanvasRenderingContext2D::eHTMLCanvasElement(image) => {
                 let canvas = image.root();
                 let canvas_size = canvas.r().get_size();
                 let dw: f64 = canvas_size.width as f64;
@@ -341,7 +412,7 @@ impl<'a> CanvasRenderingContext2DMethods for JSRef<'a, CanvasRenderingContext2D>
                                                      sx, sy, sw, sh,
                                                      dx, dy, dw, dh)
             }
-            HTMLCanvasElementOrCanvasRenderingContext2D::eCanvasRenderingContext2D(image) => {
+            HTMLImageElementOrHTMLCanvasElementOrCanvasRenderingContext2D::eCanvasRenderingContext2D(image) => {
                 let image = image.root();
                 let context = image.r();
                 let canvas = context.Canvas().root();
@@ -354,11 +425,31 @@ impl<'a> CanvasRenderingContext2DMethods for JSRef<'a, CanvasRenderingContext2D>
                                                      sx, sy, sw, sh,
                                                      dx, dy, dw, dh)
             }
+            HTMLImageElementOrHTMLCanvasElementOrCanvasRenderingContext2D::eHTMLImageElement(image) => {
+                let image = image.root();
+                let image_element = image.r();
+                // https://html.spec.whatwg.org/multipage/embedded-content.html#img-error
+                // If the image argument is an HTMLImageElement object that is in the broken state,
+                // then throw an InvalidStateError exception
+                let (image_data, image_size) = match self.fetch_image_data(&image_element) {
+                    Some((data, size)) => (data, size),
+                    None => return Err(InvalidState),
+                };
+                let dw: f64 = image_size.width as f64;
+                let dh: f64 = image_size.height as f64;
+                let sw: f64 = dw;
+                let sh: f64 = dh;
+                return self.draw_image_data(image_data,
+                                            image_size,
+                                            sx, sy, sw, sh,
+                                            dx, dy, dw, dh)
+            }
+
         }
     }
 
     // https://html.spec.whatwg.org/multipage/scripting.html#dom-context-2d-drawimage
-    fn DrawImage_(self, image: HTMLCanvasElementOrCanvasRenderingContext2D,
+    fn DrawImage_(self, image: HTMLImageElementOrHTMLCanvasElementOrCanvasRenderingContext2D,
                   dx: f64, dy: f64, dw: f64, dh: f64) -> Fallible<()> {
         if !(dx.is_finite() && dy.is_finite() &&
              dw.is_finite() && dh.is_finite()) {
@@ -373,7 +464,7 @@ impl<'a> CanvasRenderingContext2DMethods for JSRef<'a, CanvasRenderingContext2D>
         let sy: f64 = 0f64;
 
         match image {
-            HTMLCanvasElementOrCanvasRenderingContext2D::eHTMLCanvasElement(image) => {
+            HTMLImageElementOrHTMLCanvasElementOrCanvasRenderingContext2D::eHTMLCanvasElement(image) => {
                 let canvas = image.root();
                 let canvas_size = canvas.r().get_size();
                 let sw: f64 = canvas_size.width as f64;
@@ -382,7 +473,7 @@ impl<'a> CanvasRenderingContext2DMethods for JSRef<'a, CanvasRenderingContext2D>
                                                      sx, sy, sw, sh,
                                                      dx, dy, dw, dh)
             }
-            HTMLCanvasElementOrCanvasRenderingContext2D::eCanvasRenderingContext2D(image) => {
+            HTMLImageElementOrHTMLCanvasElementOrCanvasRenderingContext2D::eCanvasRenderingContext2D(image) => {
                 let image = image.root();
                 let context = image.r();
                 let canvas = context.Canvas().root();
@@ -393,11 +484,28 @@ impl<'a> CanvasRenderingContext2DMethods for JSRef<'a, CanvasRenderingContext2D>
                                                      sx, sy, sw, sh,
                                                      dx, dy, dw, dh)
             }
+            HTMLImageElementOrHTMLCanvasElementOrCanvasRenderingContext2D::eHTMLImageElement(image) => {
+                let image = image.root();
+                let image_element = image.r();
+                // https://html.spec.whatwg.org/multipage/embedded-content.html#img-error
+                // If the image argument is an HTMLImageElement object that is in the broken state,
+                // then throw an InvalidStateError exception
+                let (image_data, image_size) = match self.fetch_image_data(&image_element) {
+                    Some((data, size)) => (data, size),
+                    None => return Err(InvalidState),
+                };
+                let sw: f64 = image_size.width as f64;
+                let sh: f64 = image_size.height as f64;
+                return self.draw_image_data(image_data,
+                                            image_size,
+                                            sx, sy, sw, sh,
+                                            dx, dy, dw, dh)
+            }
         }
     }
 
     // https://html.spec.whatwg.org/multipage/scripting.html#dom-context-2d-drawimage
-    fn DrawImage__(self, image: HTMLCanvasElementOrCanvasRenderingContext2D,
+    fn DrawImage__(self, image: HTMLImageElementOrHTMLCanvasElementOrCanvasRenderingContext2D,
                          sx: f64, sy: f64, sw: f64, sh: f64,
                          dx: f64, dy: f64, dw: f64, dh: f64) -> Fallible<()> {
         if !(sx.is_finite() && sy.is_finite() && sw.is_finite() && sh.is_finite() &&
@@ -406,13 +514,13 @@ impl<'a> CanvasRenderingContext2DMethods for JSRef<'a, CanvasRenderingContext2D>
         }
 
         match image {
-            HTMLCanvasElementOrCanvasRenderingContext2D::eHTMLCanvasElement(image) => {
+            HTMLImageElementOrHTMLCanvasElementOrCanvasRenderingContext2D::eHTMLCanvasElement(image) => {
                 let canvas = image.root();
                 return self.draw_html_canvas_element(canvas.r(),
                                                      sx, sy, sw, sh,
                                                      dx, dy, dw, dh)
             }
-            HTMLCanvasElementOrCanvasRenderingContext2D::eCanvasRenderingContext2D(image) => {
+            HTMLImageElementOrHTMLCanvasElementOrCanvasRenderingContext2D::eCanvasRenderingContext2D(image) => {
                 let image = image.root();
                 let context = image.r();
                 let canvas = context.Canvas().root();
@@ -420,6 +528,21 @@ impl<'a> CanvasRenderingContext2DMethods for JSRef<'a, CanvasRenderingContext2D>
                                                      sx, sy, sw, sh,
                                                      dx, dy, dw, dh)
             }
+            HTMLImageElementOrHTMLCanvasElementOrCanvasRenderingContext2D::eHTMLImageElement(image) => {
+                let image = image.root();
+                let image_element = image.r();
+                // https://html.spec.whatwg.org/multipage/embedded-content.html#img-error
+                // If the image argument is an HTMLImageElement object that is in the broken state,
+                // then throw an InvalidStateError exception
+                let (image_data, image_size) = match self.fetch_image_data(&image_element) {
+                    Some((data, size)) => (data, size),
+                    None => return Err(InvalidState),
+                };
+                return self.draw_image_data(image_data,
+                                            image_size,
+                                            sx, sy, sw, sh,
+                                            dx, dy, dw, dh)
+            }
         }
     }
 
@@ -574,6 +697,8 @@ impl<'a> CanvasRenderingContext2DMethods for JSRef<'a, CanvasRenderingContext2D>
     }
 
     fn GetImageData(self, sx: Finite<f64>, sy: Finite<f64>, sw: Finite<f64>, sh: Finite<f64>) -> Fallible<Temporary<ImageData>> {
+        let sx = *sx;
+        let sy = *sy;
         let sw = *sw;
         let sh = *sh;
 
@@ -582,14 +707,18 @@ impl<'a> CanvasRenderingContext2DMethods for JSRef<'a, CanvasRenderingContext2D>
         }
 
         let (sender, receiver) = channel::<Vec<u8>>();
-        let dest_rect = Rect(Point2D(sx.to_i32().unwrap(), sy.to_i32().unwrap()), Size2D(sw.to_i32().unwrap(), sh.to_i32().unwrap()));
+        let dest_rect = Rect(Point2D(sx as f64, sy as f64), Size2D(sw as f64, sh as f64));
         let canvas_size = self.canvas.root().r().get_size();
+        let canvas_size = Size2D(canvas_size.width as f64, canvas_size.height as f64);
         self.renderer.send(CanvasMsg::GetImageData(dest_rect, canvas_size, sender)).unwrap();
         let data = receiver.recv().unwrap();
         Ok(ImageData::new(self.global.root().r(), sw.abs().to_u32().unwrap(), sh.abs().to_u32().unwrap(), Some(data)))
     }
 
     fn PutImageData(self, imagedata: JSRef<ImageData>, dx: Finite<f64>, dy: Finite<f64>) {
+        let dx = *dx;
+        let dy = *dy;
+
         // XXX:
         // By the spec: http://www.w3.org/html/wg/drafts/2dcontext/html5_canvas_CR/#dom-context-2d-putimagedata
         // "If any of the arguments to the method are infinite or NaN, the method must throw a NotSupportedError exception"
@@ -597,13 +726,22 @@ impl<'a> CanvasRenderingContext2DMethods for JSRef<'a, CanvasRenderingContext2D>
         // they will be TypeError by WebIDL spec before call this methods.
 
         let data = imagedata.get_data_array(&self.global.root().r());
-        let image_data_rect = Rect(Point2D(dx.to_i32().unwrap(), dy.to_i32().unwrap()), imagedata.get_size());
+        let image_data_size = imagedata.get_size();
+        let image_data_size = Size2D(image_data_size.width as f64, image_data_size.height as f64);
+        let image_data_rect = Rect(Point2D(dx, dy), image_data_size);
         let dirty_rect = None;
         self.renderer.send(CanvasMsg::PutImageData(data, image_data_rect, dirty_rect)).unwrap()
     }
 
     fn PutImageData_(self, imagedata: JSRef<ImageData>, dx: Finite<f64>, dy: Finite<f64>,
                      dirtyX: Finite<f64>, dirtyY: Finite<f64>, dirtyWidth: Finite<f64>, dirtyHeight: Finite<f64>) {
+        let dx = *dx;
+        let dy = *dy;
+        let dirtyX = *dirtyX;
+        let dirtyY = *dirtyY;
+        let dirtyWidth = *dirtyWidth;
+        let dirtyHeight = *dirtyHeight;
+
         // XXX:
         // By the spec: http://www.w3.org/html/wg/drafts/2dcontext/html5_canvas_CR/#dom-context-2d-putimagedata
         // "If any of the arguments to the method are infinite or NaN, the method must throw a NotSupportedError exception"
@@ -611,12 +749,11 @@ impl<'a> CanvasRenderingContext2DMethods for JSRef<'a, CanvasRenderingContext2D>
         // they will be TypeError by WebIDL spec before call this methods.
 
         let data = imagedata.get_data_array(&self.global.root().r());
-        let image_data_rect = Rect(Point2D(dx.to_i32().unwrap(), dy.to_i32().unwrap()),
-                                   Size2D(imagedata.Width().to_i32().unwrap(),
-                                          imagedata.Height().to_i32().unwrap()));
-        let dirty_rect = Some(Rect(Point2D(dirtyX.to_i32().unwrap(), dirtyY.to_i32().unwrap()),
-                                   Size2D(dirtyWidth.to_i32().unwrap(),
-                                          dirtyHeight.to_i32().unwrap())));
+        let image_data_rect = Rect(Point2D(dx, dy),
+                                   Size2D(imagedata.Width() as f64,
+                                          imagedata.Height() as f64));
+        let dirty_rect = Some(Rect(Point2D(dirtyX, dirtyY),
+                                   Size2D(dirtyWidth, dirtyHeight)));
         self.renderer.send(CanvasMsg::PutImageData(data, image_data_rect, dirty_rect)).unwrap()
     }
 
@@ -667,6 +804,6 @@ pub fn parse_color(string: &str) -> Result<RGBA,()> {
 
 // Used by drawImage to determine if a source or destination rectangle is valid
 // Origin coordinates and size cannot be negative. Size has to be greater than zero
-fn is_rect_valid(rect: Rect<i32>) -> bool {
-    rect.origin.x >= 0 && rect.origin.y >= 0 && rect.size.width > 0 && rect.size.height > 0
+fn is_rect_valid(rect: Rect<f64>) -> bool {
+    rect.size.width > 0.0 && rect.size.height > 0.0
 }
diff --git a/components/script/dom/htmlimageelement.rs b/components/script/dom/htmlimageelement.rs
index dadcd776238..f93d525f1fc 100644
--- a/components/script/dom/htmlimageelement.rs
+++ b/components/script/dom/htmlimageelement.rs
@@ -39,6 +39,16 @@ impl HTMLImageElementDerived for EventTarget {
     }
 }
 
+pub trait HTMLImageElementHelpers {
+    fn get_url(&self) -> Option<Url>;
+}
+
+impl<'a> HTMLImageElementHelpers for JSRef<'a, HTMLImageElement> {
+    fn get_url(&self) -> Option<Url>{
+        self.image.borrow().clone()
+    }
+}
+
 trait PrivateHTMLImageElementHelpers {
     fn update_image(self, value: Option<(DOMString, &Url)>);
 }
diff --git a/components/script/dom/webidls/CanvasRenderingContext2D.webidl b/components/script/dom/webidls/CanvasRenderingContext2D.webidl
index 511a26ae66b..44f6d8d3251 100644
--- a/components/script/dom/webidls/CanvasRenderingContext2D.webidl
+++ b/components/script/dom/webidls/CanvasRenderingContext2D.webidl
@@ -6,8 +6,8 @@
 enum CanvasWindingRule { "nonzero", "evenodd" };
 
 // http://www.whatwg.org/html/#2dcontext
-typedef (/* HTMLImageElement or
-         HTMLVideoElement or */
+typedef (HTMLImageElement or
+         /* HTMLVideoElement or */
          HTMLCanvasElement or
          CanvasRenderingContext2D /* or
          ImageBitmap */) CanvasImageSource;
diff --git a/components/script/lib.rs b/components/script/lib.rs
index 75699c419cc..c51219cb11d 100644
--- a/components/script/lib.rs
+++ b/components/script/lib.rs
@@ -39,6 +39,7 @@ extern crate js;
 extern crate libc;
 extern crate msg;
 extern crate net_traits;
+extern crate png;
 extern crate "rustc-serialize" as rustc_serialize;
 extern crate time;
 extern crate canvas;
diff --git a/components/servo/Cargo.lock b/components/servo/Cargo.lock
index acf5eb43377..67fac783c24 100644
--- a/components/servo/Cargo.lock
+++ b/components/servo/Cargo.lock
@@ -803,6 +803,7 @@ dependencies = [
  "msg 0.0.1",
  "net_traits 0.0.1",
  "plugins 0.0.1",
+ "png 0.1.0 (git+https://github.com/servo/rust-png)",
  "profile 0.0.1",
  "rustc-serialize 0.3.4 (registry+https://github.com/rust-lang/crates.io-index)",
  "script_traits 0.0.1",
diff --git a/ports/cef/Cargo.lock b/ports/cef/Cargo.lock
index e274f8ba6b4..7cd06499343 100644
--- a/ports/cef/Cargo.lock
+++ b/ports/cef/Cargo.lock
@@ -807,6 +807,7 @@ dependencies = [
  "msg 0.0.1",
  "net_traits 0.0.1",
  "plugins 0.0.1",
+ "png 0.1.0 (git+https://github.com/servo/rust-png)",
  "profile 0.0.1",
  "rustc-serialize 0.3.4 (registry+https://github.com/rust-lang/crates.io-index)",
  "script_traits 0.0.1",
diff --git a/ports/gonk/Cargo.lock b/ports/gonk/Cargo.lock
index 7f07df26684..ddc5afd7988 100644
--- a/ports/gonk/Cargo.lock
+++ b/ports/gonk/Cargo.lock
@@ -732,6 +732,7 @@ dependencies = [
  "msg 0.0.1",
  "net_traits 0.0.1",
  "plugins 0.0.1",
+ "png 0.1.0 (git+https://github.com/servo/rust-png)",
  "profile 0.0.1",
  "rustc-serialize 0.3.4 (registry+https://github.com/rust-lang/crates.io-index)",
  "script_traits 0.0.1",
diff --git a/tests/html/test_canvas_drawimage.html b/tests/html/test_canvas_drawimage_canvas.html
similarity index 83%
rename from tests/html/test_canvas_drawimage.html
rename to tests/html/test_canvas_drawimage_canvas.html
index 54a7082f9f3..fdf00daee39 100644
--- a/tests/html/test_canvas_drawimage.html
+++ b/tests/html/test_canvas_drawimage_canvas.html
@@ -171,50 +171,6 @@ function renderExample(title) {
   return container;
 }
 
-function drawImage() {
-  var args = Array.prototype.slice.call(arguments);
-
-  var div = renderExample('drawImage(' + args.toString() + ')');
-  var canvasEls = div.querySelectorAll('canvas');
-  var canvas1 = canvasEls[0];
-  var canvas2 = canvasEls[1];
-
-  canvas1.width = imageSource.width;
-  canvas1.height = imageSource.height;
-
-  var ctx1 = canvas1.getContext('2d');
-  ctx1.fillStyle = "#00FFFF";
-  ctx1.fillRect(0, 0, imageSource.width, imageSource.height);
-
-  ctx1.fillStyle = "#000000";
-  ctx1.fillRect(5,5,40,40);
-  ctx1.clearRect(10,10,30,30);
-  ctx1.strokeRect(15,15,20,20);
-
-  canvas2.width = destCanvas.width;
-  canvas2.height = destCanvas.height;
-
-  var ctx2 = canvas2.getContext('2d');
-  ctx2.fillStyle = "#FF0000";
-  ctx2.fillRect(0, 0,  destCanvas.width, destCanvas.height);
-  ctx2.imageSmoothingEnabled = smoothingEnabled;
-
-  args.unshift(canvas1);
-  try {
-    ctx2.drawImage.apply(ctx2, args);
-  }
-  catch(err) {
-    var title = div.querySelector('.example-title');
-    var error = document.createElement('h2');
-    error.setAttribute('class', 'example-title error');
-    div.insertBefore(error, title);
-    error.textContent += "Call Failed: " + err.message;
-  }
-
-  document.body.appendChild(div);
-};
-
-
 function drawImage() {
   var args = Array.prototype.slice.call(arguments);
 
@@ -260,4 +216,4 @@ function drawImage() {
 
 </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/tests/html/test_canvas_drawimage_html_image.html b/tests/html/test_canvas_drawimage_html_image.html
new file mode 100644
index 00000000000..c317f7895df
--- /dev/null
+++ b/tests/html/test_canvas_drawimage_html_image.html
@@ -0,0 +1,209 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<style type=''>
+html {
+  font-family: helvetica, sans-serif;
+}
+
+canvas, img {
+  margin: 10px;
+  border: 1px solid grey;
+}
+
+.example {
+  display: inline-block;
+  width: 280px;
+  margin-top: 50px;
+  margin-right: 50px;
+}
+
+.title {
+  text-align: center;
+}
+
+.description {
+  width: 100%;
+}
+
+.description div {
+  display: inline-block;
+  text-align: center;
+  font-size: 13px;
+}
+
+.description .source {
+  width: 100px;
+}
+
+.description .target {
+  width: 130px;
+}
+
+.example-title {
+  text-align: center;
+  font-size: 16px;
+}
+
+.error {
+  color: red;
+}
+
+</style>
+<body>
+  <h1 class="title">DrawImage canvas to canvas</h1>
+</body>
+
+<script type="text/javascript">
+
+var smoothingEnabled = false;
+var examplesNum = 0;
+
+var imageSource = {
+  width: 100,
+  height: 100
+};
+
+var destCanvas = {
+  width: 100,
+  height: 100
+};
+
+// 2 arguments, the dest origin is 0,0
+// The source canvas will copied to the 0,0 position of the destination canvas
+drawImage(0, 0);
+// 2 arguments, the dest origin is not 0,0
+// The source canvas will copied to the 25, 25 position of the destination canvas
+drawImage(25, 25);
+// 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
+drawImage(50, 50, 50, 50);
+// 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 25x25
+drawImage(50, 50, 25, 25);
+// The source canvas will copied to the 50,50 position of the destination canvas
+// over an area of 50x25 pixels
+// The copied image will be distorted along the x axis
+drawImage(50, 50, 50, 25);
+// 8 arguments, both destination and source origins are 0, 0
+// An area of 25x25 pixels of the source image will be copied to
+// an area of 25x25 pixels of the destination canvas
+drawImage(0, 0, 25, 25, 0, 0, 25, 25);
+// 8 arguments the destination origin is not 0,0
+// An area of 25x25 pixels of the source image will be copied to
+// an area of 25x25 pixels of the destination canvas in the position 25,25
+drawImage(0, 0, 25, 25, 25, 25, 25, 25);
+// 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
+drawImage(25, 25, 50, 50, 0, 0, 50, 50);
+// The destination rectangle has negative width and height
+// An exception is raised and nothing is drawn
+drawImage(25, 25, 50, 50, 0, 0, -100, -100);
+// The destination rectangle is larger thant 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.
+drawImage(0, 0, 50, 50, 0, 0, 200, 200);
+// 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
+drawImage(0, 0, 100, 100, 0, 0, 50, 50);
+// Negative coorditanes of the source rectangle
+// The source area is clipped to fit the source image
+// and the destination are is clipped in the same proportion
+drawImage(-25, -25, 50, 50, 0, 0, 50, 50);
+
+// Example with non squared origin and source canvases
+imageSource = {
+  width: 100,
+  height: 50
+};
+
+destCanvas = {
+  width: 100,
+  height: 50
+};
+
+//drawImage(0, 0);
+
+function renderExample(title) {
+  var container = document.createElement('div');
+  container.id = 'example' + examplesNum++;
+  container.setAttribute('class', 'example');
+
+  var h2 = document.createElement('h2');
+  h2.textContent = title;
+  h2.setAttribute('class', 'example-title');
+  container.appendChild(h2);
+
+  var div1 = document.createElement('div');
+  var canvas1 = document.createElement('canvas');
+  var img = document.createElement('img');
+  img.src = 'rust-0.png';
+  div1.appendChild(img);
+  div1.appendChild(canvas1);
+  container.appendChild(div1);
+
+  var div2 = document.createElement('div');
+  div2.setAttribute('class', 'description');
+  var source = document.createElement('div');
+  source.textContent = ' Source (' + imageSource.width + ',' + imageSource.height + ')';
+  source.setAttribute('class', 'source');
+
+  var arrow = document.createElement('div');
+  arrow.textContent = ' -> ';
+  arrow.setAttribute('class', 'arrow');
+
+  var target = document.createElement('div');
+  target.textContent = 'Target (' + destCanvas.width + ',' + destCanvas.height + ')';
+  target.setAttribute('class', 'target');
+
+  div2.appendChild(source);
+  div2.appendChild(arrow);
+  div2.appendChild(target);
+  container.appendChild(div2);
+
+  return container;
+}
+
+function drawImage() {
+  var args = Array.prototype.slice.call(arguments);
+
+  var div = renderExample('drawImage(' + args.toString() + ')');
+  var canvas = div.querySelectorAll('canvas')[0];
+  var img = div.querySelectorAll('img')[0];
+  img.width = imageSource.width;
+  img.height = imageSource.height;
+
+  canvas.width = destCanvas.width;
+  canvas.height = destCanvas.height;
+
+  var ctx = canvas.getContext('2d');
+  ctx.fillStyle = "#FF0000";
+  ctx.fillRect(0, 0,  destCanvas.width, destCanvas.height);
+  ctx.imageSmoothingEnabled = smoothingEnabled;
+
+  args.unshift(img);
+  try {
+    ctx.drawImage.apply(ctx, args);
+  }
+  catch(err) {
+    var title = div.querySelector('.example-title');
+    var error = document.createElement('h2');
+    error.setAttribute('class', 'example-title error');
+    div.insertBefore(error, title);
+    error.textContent += "Call Failed: " + err.message;
+  }
+
+  document.body.appendChild(div);
+}
+
+</script>
+</body>
+</html>
diff --git a/tests/ref/2dcontext/drawimage_1.html b/tests/ref/2dcontext/drawimage_canvas_1.html
similarity index 100%
rename from tests/ref/2dcontext/drawimage_1.html
rename to tests/ref/2dcontext/drawimage_canvas_1.html
diff --git a/tests/ref/2dcontext/drawimage_10.html b/tests/ref/2dcontext/drawimage_canvas_10.html
similarity index 77%
rename from tests/ref/2dcontext/drawimage_10.html
rename to tests/ref/2dcontext/drawimage_canvas_10.html
index 0430a54d1c0..35f7245c563 100644
--- a/tests/ref/2dcontext/drawimage_10.html
+++ b/tests/ref/2dcontext/drawimage_canvas_10.html
@@ -31,12 +31,13 @@ destCtx.fillStyle = "#FF0000";
 destCtx.fillRect(0, 0,  destCanvas.width, destCanvas.height);
 destCtx.imageSmoothingEnabled = smoothingEnabled;
 
-// The destination rectangle is larger thant 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.
+// 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(sourceCanvas, 0, 0, 50, 50, 0, 0, 200, 200);
 
 </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/tests/ref/2dcontext/drawimage_10_ref.html b/tests/ref/2dcontext/drawimage_canvas_10_ref.html
similarity index 100%
rename from tests/ref/2dcontext/drawimage_10_ref.html
rename to tests/ref/2dcontext/drawimage_canvas_10_ref.html
diff --git a/tests/ref/2dcontext/drawimage_11.html b/tests/ref/2dcontext/drawimage_canvas_11.html
similarity index 100%
rename from tests/ref/2dcontext/drawimage_11.html
rename to tests/ref/2dcontext/drawimage_canvas_11.html
diff --git a/tests/ref/2dcontext/drawimage_11_ref.html b/tests/ref/2dcontext/drawimage_canvas_11_ref.html
similarity index 100%
rename from tests/ref/2dcontext/drawimage_11_ref.html
rename to tests/ref/2dcontext/drawimage_canvas_11_ref.html
diff --git a/tests/ref/2dcontext/drawimage_12.html b/tests/ref/2dcontext/drawimage_canvas_12.html
similarity index 89%
rename from tests/ref/2dcontext/drawimage_12.html
rename to tests/ref/2dcontext/drawimage_canvas_12.html
index f667f9fa093..36a31cbaf2c 100644
--- a/tests/ref/2dcontext/drawimage_12.html
+++ b/tests/ref/2dcontext/drawimage_canvas_12.html
@@ -31,9 +31,9 @@ destCtx.fillStyle = "#FF0000";
 destCtx.fillRect(0, 0,  destCanvas.width, destCanvas.height);
 destCtx.imageSmoothingEnabled = smoothingEnabled;
 
-// Negative coorditanes of the source rectangle
+// Negative coordinates of the source rectangle
 // The source area is clipped to fit the source image
-// and the destination are is clipped in the same proportion
+// and the destination area is clipped in the same proportion
 destCtx.drawImage(sourceCanvas, -25, -25, 50, 50, 0, 0, 50, 50);
 
 </script>
diff --git a/tests/ref/2dcontext/drawimage_12_ref.html b/tests/ref/2dcontext/drawimage_canvas_12_ref.html
similarity index 100%
rename from tests/ref/2dcontext/drawimage_12_ref.html
rename to tests/ref/2dcontext/drawimage_canvas_12_ref.html
diff --git a/tests/ref/2dcontext/drawimage_1_ref.html b/tests/ref/2dcontext/drawimage_canvas_1_ref.html
similarity index 100%
rename from tests/ref/2dcontext/drawimage_1_ref.html
rename to tests/ref/2dcontext/drawimage_canvas_1_ref.html
diff --git a/tests/ref/2dcontext/drawimage_2.html b/tests/ref/2dcontext/drawimage_canvas_2.html
similarity index 100%
rename from tests/ref/2dcontext/drawimage_2.html
rename to tests/ref/2dcontext/drawimage_canvas_2.html
diff --git a/tests/ref/2dcontext/drawimage_2_ref.html b/tests/ref/2dcontext/drawimage_canvas_2_ref.html
similarity index 100%
rename from tests/ref/2dcontext/drawimage_2_ref.html
rename to tests/ref/2dcontext/drawimage_canvas_2_ref.html
diff --git a/tests/ref/2dcontext/drawimage_3.html b/tests/ref/2dcontext/drawimage_canvas_3.html
similarity index 100%
rename from tests/ref/2dcontext/drawimage_3.html
rename to tests/ref/2dcontext/drawimage_canvas_3.html
diff --git a/tests/ref/2dcontext/drawimage_3_ref.html b/tests/ref/2dcontext/drawimage_canvas_3_ref.html
similarity index 100%
rename from tests/ref/2dcontext/drawimage_3_ref.html
rename to tests/ref/2dcontext/drawimage_canvas_3_ref.html
diff --git a/tests/ref/2dcontext/drawimage_4.html b/tests/ref/2dcontext/drawimage_canvas_4.html
similarity index 100%
rename from tests/ref/2dcontext/drawimage_4.html
rename to tests/ref/2dcontext/drawimage_canvas_4.html
diff --git a/tests/ref/2dcontext/drawimage_4_ref.html b/tests/ref/2dcontext/drawimage_canvas_4_ref.html
similarity index 100%
rename from tests/ref/2dcontext/drawimage_4_ref.html
rename to tests/ref/2dcontext/drawimage_canvas_4_ref.html
diff --git a/tests/ref/2dcontext/drawimage_5.html b/tests/ref/2dcontext/drawimage_canvas_5.html
similarity index 99%
rename from tests/ref/2dcontext/drawimage_5.html
rename to tests/ref/2dcontext/drawimage_canvas_5.html
index 3052d66ece8..0ddff823a35 100644
--- a/tests/ref/2dcontext/drawimage_5.html
+++ b/tests/ref/2dcontext/drawimage_canvas_5.html
@@ -34,9 +34,8 @@ destCtx.imageSmoothingEnabled = smoothingEnabled;
 // The source canvas will copied to the 50,50 position of the destination canvas
 // over an area of 50x25 pixels
 // The copied image will be distorted along the x axis
-
 destCtx.drawImage(sourceCanvas, 50, 50, 50, 20);
 
 </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/tests/ref/2dcontext/drawimage_5_ref.html b/tests/ref/2dcontext/drawimage_canvas_5_ref.html
similarity index 100%
rename from tests/ref/2dcontext/drawimage_5_ref.html
rename to tests/ref/2dcontext/drawimage_canvas_5_ref.html
diff --git a/tests/ref/2dcontext/drawimage_6.html b/tests/ref/2dcontext/drawimage_canvas_6.html
similarity index 100%
rename from tests/ref/2dcontext/drawimage_6.html
rename to tests/ref/2dcontext/drawimage_canvas_6.html
diff --git a/tests/ref/2dcontext/drawimage_6_ref.html b/tests/ref/2dcontext/drawimage_canvas_6_ref.html
similarity index 100%
rename from tests/ref/2dcontext/drawimage_6_ref.html
rename to tests/ref/2dcontext/drawimage_canvas_6_ref.html
diff --git a/tests/ref/2dcontext/drawimage_7.html b/tests/ref/2dcontext/drawimage_canvas_7.html
similarity index 100%
rename from tests/ref/2dcontext/drawimage_7.html
rename to tests/ref/2dcontext/drawimage_canvas_7.html
diff --git a/tests/ref/2dcontext/drawimage_7_ref.html b/tests/ref/2dcontext/drawimage_canvas_7_ref.html
similarity index 100%
rename from tests/ref/2dcontext/drawimage_7_ref.html
rename to tests/ref/2dcontext/drawimage_canvas_7_ref.html
diff --git a/tests/ref/2dcontext/drawimage_8.html b/tests/ref/2dcontext/drawimage_canvas_8.html
similarity index 100%
rename from tests/ref/2dcontext/drawimage_8.html
rename to tests/ref/2dcontext/drawimage_canvas_8.html
diff --git a/tests/ref/2dcontext/drawimage_8_ref.html b/tests/ref/2dcontext/drawimage_canvas_8_ref.html
similarity index 100%
rename from tests/ref/2dcontext/drawimage_8_ref.html
rename to tests/ref/2dcontext/drawimage_canvas_8_ref.html
diff --git a/tests/ref/2dcontext/drawimage_9.html b/tests/ref/2dcontext/drawimage_canvas_9.html
similarity index 100%
rename from tests/ref/2dcontext/drawimage_9.html
rename to tests/ref/2dcontext/drawimage_canvas_9.html
diff --git a/tests/ref/2dcontext/drawimage_9_ref.html b/tests/ref/2dcontext/drawimage_canvas_9_ref.html
similarity index 100%
rename from tests/ref/2dcontext/drawimage_9_ref.html
rename to tests/ref/2dcontext/drawimage_canvas_9_ref.html
diff --git a/tests/ref/2dcontext/drawimage_html_image_1.html b/tests/ref/2dcontext/drawimage_html_image_1.html
new file mode 100644
index 00000000000..9619103b0fe
--- /dev/null
+++ b/tests/ref/2dcontext/drawimage_html_image_1.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<style>
+  html, body {
+    margin: 0;
+  }
+</style>
+<body>
+<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 = '../rust-0.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>
+</body>
+</html>
diff --git a/tests/ref/2dcontext/drawimage_html_image_10.html b/tests/ref/2dcontext/drawimage_html_image_10.html
new file mode 100644
index 00000000000..704e51109b6
--- /dev/null
+++ b/tests/ref/2dcontext/drawimage_html_image_10.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<style>
+  html, body {
+    margin: 0;
+  }
+</style>
+<body>
+<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>
+</body>
+</html>
diff --git a/tests/ref/2dcontext/drawimage_html_image_10_ref.html b/tests/ref/2dcontext/drawimage_html_image_10_ref.html
new file mode 100644
index 00000000000..60545df17ff
--- /dev/null
+++ b/tests/ref/2dcontext/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/ref/2dcontext/drawimage_html_image_11.html b/tests/ref/2dcontext/drawimage_html_image_11.html
new file mode 100644
index 00000000000..fa3ad4125f8
--- /dev/null
+++ b/tests/ref/2dcontext/drawimage_html_image_11.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<style>
+  html, body {
+    margin: 0;
+  }
+</style>
+<body>
+<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>
+</body>
+</html>
diff --git a/tests/ref/2dcontext/drawimage_html_image_11_ref.html b/tests/ref/2dcontext/drawimage_html_image_11_ref.html
new file mode 100644
index 00000000000..10d8885f2b0
--- /dev/null
+++ b/tests/ref/2dcontext/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/ref/2dcontext/drawimage_html_image_12.html b/tests/ref/2dcontext/drawimage_html_image_12.html
new file mode 100644
index 00000000000..a9a7560b94b
--- /dev/null
+++ b/tests/ref/2dcontext/drawimage_html_image_12.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<style>
+  html, body {
+    margin: 0;
+  }
+</style>
+<body>
+<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>
+</body>
+</html>
diff --git a/tests/ref/2dcontext/drawimage_html_image_12_ref.html b/tests/ref/2dcontext/drawimage_html_image_12_ref.html
new file mode 100644
index 00000000000..5f6f22111da
--- /dev/null
+++ b/tests/ref/2dcontext/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/ref/2dcontext/drawimage_html_image_13.html b/tests/ref/2dcontext/drawimage_html_image_13.html
new file mode 100644
index 00000000000..4d81d63b8b1
--- /dev/null
+++ b/tests/ref/2dcontext/drawimage_html_image_13.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<style>
+  html, body {
+    margin: 0;
+  }
+</style>
+<body>
+<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>
+</body>
+</html>
diff --git a/tests/ref/2dcontext/drawimage_html_image_13_ref.html b/tests/ref/2dcontext/drawimage_html_image_13_ref.html
new file mode 100644
index 00000000000..9ac306a5cc6
--- /dev/null
+++ b/tests/ref/2dcontext/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/ref/2dcontext/drawimage_html_image_1_ref.html b/tests/ref/2dcontext/drawimage_html_image_1_ref.html
new file mode 100644
index 00000000000..78c31206c50
--- /dev/null
+++ b/tests/ref/2dcontext/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("../rust-0.png");
+  }
+</style>
+<body>
+<div id="destination"></div>
+</body>
+</html>
diff --git a/tests/ref/2dcontext/drawimage_html_image_2.html b/tests/ref/2dcontext/drawimage_html_image_2.html
new file mode 100644
index 00000000000..e38c85fc27e
--- /dev/null
+++ b/tests/ref/2dcontext/drawimage_html_image_2.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<style>
+  html, body {
+    margin: 0;
+  }
+</style>
+<body>
+<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 = '../rust-0.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>
+</body>
+</html>
diff --git a/tests/ref/2dcontext/drawimage_html_image_2_ref.html b/tests/ref/2dcontext/drawimage_html_image_2_ref.html
new file mode 100644
index 00000000000..c8f719b2b14
--- /dev/null
+++ b/tests/ref/2dcontext/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("../rust-0.png");
+    background-position: 25px 25px;
+    background-repeat: no-repeat;
+  }
+</style>
+<body>
+<div id="destination"></div>
+</body>
+</html>
diff --git a/tests/ref/2dcontext/drawimage_html_image_3.html b/tests/ref/2dcontext/drawimage_html_image_3.html
new file mode 100644
index 00000000000..8a85fc2fef9
--- /dev/null
+++ b/tests/ref/2dcontext/drawimage_html_image_3.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<style>
+  html, body {
+    margin: 0;
+  }
+</style>
+<body>
+<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>
+</body>
+</html>
diff --git a/tests/ref/2dcontext/drawimage_html_image_3_ref.html b/tests/ref/2dcontext/drawimage_html_image_3_ref.html
new file mode 100644
index 00000000000..b72687a8ace
--- /dev/null
+++ b/tests/ref/2dcontext/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/ref/2dcontext/drawimage_html_image_4.html b/tests/ref/2dcontext/drawimage_html_image_4.html
new file mode 100644
index 00000000000..8158fe2b4db
--- /dev/null
+++ b/tests/ref/2dcontext/drawimage_html_image_4.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<style>
+  html, body {
+    margin: 0;
+  }
+</style>
+<body>
+<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>
+</body>
+</html>
diff --git a/tests/ref/2dcontext/drawimage_html_image_4_ref.html b/tests/ref/2dcontext/drawimage_html_image_4_ref.html
new file mode 100644
index 00000000000..baa6591a220
--- /dev/null
+++ b/tests/ref/2dcontext/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/ref/2dcontext/drawimage_html_image_5.html b/tests/ref/2dcontext/drawimage_html_image_5.html
new file mode 100644
index 00000000000..871379e500a
--- /dev/null
+++ b/tests/ref/2dcontext/drawimage_html_image_5.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<style>
+  html, body {
+    margin: 0;
+  }
+</style>
+<body>
+<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>
+</body>
+</html>
diff --git a/tests/ref/2dcontext/drawimage_html_image_5_ref.html b/tests/ref/2dcontext/drawimage_html_image_5_ref.html
new file mode 100644
index 00000000000..66b7cc194ac
--- /dev/null
+++ b/tests/ref/2dcontext/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/ref/2dcontext/drawimage_html_image_6.html b/tests/ref/2dcontext/drawimage_html_image_6.html
new file mode 100644
index 00000000000..793a1757547
--- /dev/null
+++ b/tests/ref/2dcontext/drawimage_html_image_6.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<style>
+  html, body {
+    margin: 0;
+  }
+</style>
+<body>
+<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>
+</body>
+</html>
diff --git a/tests/ref/2dcontext/drawimage_html_image_6_ref.html b/tests/ref/2dcontext/drawimage_html_image_6_ref.html
new file mode 100644
index 00000000000..d7343375508
--- /dev/null
+++ b/tests/ref/2dcontext/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/ref/2dcontext/drawimage_html_image_7.html b/tests/ref/2dcontext/drawimage_html_image_7.html
new file mode 100644
index 00000000000..1b0de346bc1
--- /dev/null
+++ b/tests/ref/2dcontext/drawimage_html_image_7.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<style>
+  html, body {
+    margin: 0;
+  }
+</style>
+<body>
+<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>
+</body>
+</html>
diff --git a/tests/ref/2dcontext/drawimage_html_image_7_ref.html b/tests/ref/2dcontext/drawimage_html_image_7_ref.html
new file mode 100644
index 00000000000..e823ffbb75a
--- /dev/null
+++ b/tests/ref/2dcontext/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/ref/2dcontext/drawimage_html_image_8.html b/tests/ref/2dcontext/drawimage_html_image_8.html
new file mode 100644
index 00000000000..0197f28c494
--- /dev/null
+++ b/tests/ref/2dcontext/drawimage_html_image_8.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<style>
+  html, body {
+    margin: 0;
+  }
+</style>
+<body>
+<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>
+</body>
+</html>
diff --git a/tests/ref/2dcontext/drawimage_html_image_8_ref.html b/tests/ref/2dcontext/drawimage_html_image_8_ref.html
new file mode 100644
index 00000000000..1a025d26d99
--- /dev/null
+++ b/tests/ref/2dcontext/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/ref/2dcontext/drawimage_html_image_9.html b/tests/ref/2dcontext/drawimage_html_image_9.html
new file mode 100644
index 00000000000..7caf475065c
--- /dev/null
+++ b/tests/ref/2dcontext/drawimage_html_image_9.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<style>
+  html, body {
+    margin: 0;
+  }
+</style>
+<body>
+<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>
+</body>
+</html>
diff --git a/tests/ref/2dcontext/drawimage_html_image_9_ref.html b/tests/ref/2dcontext/drawimage_html_image_9_ref.html
new file mode 100644
index 00000000000..5341e05c1e1
--- /dev/null
+++ b/tests/ref/2dcontext/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>
diff --git a/tests/ref/2x2.png b/tests/ref/2x2.png
new file mode 100644
index 0000000000000000000000000000000000000000..276791c4348ada7e1da71041f2ccd383305e209c
GIT binary patch
literal 788238
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
Q<&M*)Oh53NNwYrp|3PDCIRF3v

literal 0
HcmV?d00001

diff --git a/tests/ref/basic.list b/tests/ref/basic.list
index 1d814a10e87..66beb8136ca 100644
--- a/tests/ref/basic.list
+++ b/tests/ref/basic.list
@@ -9,18 +9,32 @@
 # Should be == with expected failure:
 fragment=top != ../html/acid2.html acid2_ref.html
 
-== 2dcontext/drawimage_1.html 2dcontext/drawimage_1_ref.html
-== 2dcontext/drawimage_10.html 2dcontext/drawimage_10_ref.html
-== 2dcontext/drawimage_11.html 2dcontext/drawimage_11_ref.html
-== 2dcontext/drawimage_12.html 2dcontext/drawimage_12_ref.html
-== 2dcontext/drawimage_2.html 2dcontext/drawimage_2_ref.html
-== 2dcontext/drawimage_3.html 2dcontext/drawimage_3_ref.html
-== 2dcontext/drawimage_4.html 2dcontext/drawimage_4_ref.html
-== 2dcontext/drawimage_5.html 2dcontext/drawimage_5_ref.html
-== 2dcontext/drawimage_6.html 2dcontext/drawimage_6_ref.html
-== 2dcontext/drawimage_7.html 2dcontext/drawimage_7_ref.html
-== 2dcontext/drawimage_8.html 2dcontext/drawimage_8_ref.html
-== 2dcontext/drawimage_9.html 2dcontext/drawimage_9_ref.html
+== 2dcontext/drawimage_canvas_1.html 2dcontext/drawimage_canvas_1_ref.html
+== 2dcontext/drawimage_canvas_10.html 2dcontext/drawimage_canvas_10_ref.html
+== 2dcontext/drawimage_canvas_11.html 2dcontext/drawimage_canvas_11_ref.html
+== 2dcontext/drawimage_canvas_12.html 2dcontext/drawimage_canvas_12_ref.html
+== 2dcontext/drawimage_canvas_2.html 2dcontext/drawimage_canvas_2_ref.html
+== 2dcontext/drawimage_canvas_3.html 2dcontext/drawimage_canvas_3_ref.html
+== 2dcontext/drawimage_canvas_4.html 2dcontext/drawimage_canvas_4_ref.html
+== 2dcontext/drawimage_canvas_5.html 2dcontext/drawimage_canvas_5_ref.html
+== 2dcontext/drawimage_canvas_6.html 2dcontext/drawimage_canvas_6_ref.html
+== 2dcontext/drawimage_canvas_7.html 2dcontext/drawimage_canvas_7_ref.html
+== 2dcontext/drawimage_canvas_8.html 2dcontext/drawimage_canvas_8_ref.html
+== 2dcontext/drawimage_canvas_9.html 2dcontext/drawimage_canvas_9_ref.html
+== 2dcontext/drawimage_html_image_1.html 2dcontext/drawimage_html_image_1_ref.html
+== 2dcontext/drawimage_html_image_10.html 2dcontext/drawimage_html_image_10_ref.html
+== 2dcontext/drawimage_html_image_11.html 2dcontext/drawimage_html_image_11_ref.html
+== 2dcontext/drawimage_html_image_12.html 2dcontext/drawimage_html_image_12_ref.html
+== 2dcontext/drawimage_html_image_2.html 2dcontext/drawimage_html_image_2_ref.html
+== 2dcontext/drawimage_html_image_3.html 2dcontext/drawimage_html_image_3_ref.html
+== 2dcontext/drawimage_html_image_4.html 2dcontext/drawimage_html_image_4_ref.html
+== 2dcontext/drawimage_html_image_5.html 2dcontext/drawimage_html_image_5_ref.html
+== 2dcontext/drawimage_html_image_6.html 2dcontext/drawimage_html_image_6_ref.html
+== 2dcontext/drawimage_html_image_7.html 2dcontext/drawimage_html_image_7_ref.html
+== 2dcontext/drawimage_html_image_8.html 2dcontext/drawimage_html_image_8_ref.html
+== 2dcontext/drawimage_html_image_9.html 2dcontext/drawimage_html_image_9_ref.html
+
+
 == 2dcontext/lineto_a.html 2dcontext/lineto_ref.html
 == 2dcontext/transform_a.html 2dcontext/transform_ref.html
 
diff --git a/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.3arg.html.ini b/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.3arg.html.ini
deleted file mode 100644
index 36849de7ae0..00000000000
--- a/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.3arg.html.ini
+++ /dev/null
@@ -1,5 +0,0 @@
-[2d.drawImage.3arg.html]
-  type: testharness
-  [Canvas test: 2d.drawImage.3arg]
-    expected: FAIL
-
diff --git a/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.5arg.html.ini b/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.5arg.html.ini
deleted file mode 100644
index 29ca7fccdd3..00000000000
--- a/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.5arg.html.ini
+++ /dev/null
@@ -1,5 +0,0 @@
-[2d.drawImage.5arg.html]
-  type: testharness
-  [Canvas test: 2d.drawImage.5arg]
-    expected: FAIL
-
diff --git a/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.9arg.basic.html.ini b/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.9arg.basic.html.ini
deleted file mode 100644
index 8847e0db8c5..00000000000
--- a/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.9arg.basic.html.ini
+++ /dev/null
@@ -1,5 +0,0 @@
-[2d.drawImage.9arg.basic.html]
-  type: testharness
-  [Canvas test: 2d.drawImage.9arg.basic]
-    expected: FAIL
-
diff --git a/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.9arg.destpos.html.ini b/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.9arg.destpos.html.ini
deleted file mode 100644
index d3d8a6f1a14..00000000000
--- a/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.9arg.destpos.html.ini
+++ /dev/null
@@ -1,5 +0,0 @@
-[2d.drawImage.9arg.destpos.html]
-  type: testharness
-  [Canvas test: 2d.drawImage.9arg.destpos]
-    expected: FAIL
-
diff --git a/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.9arg.destsize.html.ini b/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.9arg.destsize.html.ini
deleted file mode 100644
index eb84f28d686..00000000000
--- a/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.9arg.destsize.html.ini
+++ /dev/null
@@ -1,5 +0,0 @@
-[2d.drawImage.9arg.destsize.html]
-  type: testharness
-  [Canvas test: 2d.drawImage.9arg.destsize]
-    expected: FAIL
-
diff --git a/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.9arg.sourcepos.html.ini b/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.9arg.sourcepos.html.ini
deleted file mode 100644
index 3d8cc371b4b..00000000000
--- a/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.9arg.sourcepos.html.ini
+++ /dev/null
@@ -1,5 +0,0 @@
-[2d.drawImage.9arg.sourcepos.html]
-  type: testharness
-  [Canvas test: 2d.drawImage.9arg.sourcepos]
-    expected: FAIL
-
diff --git a/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.9arg.sourcesize.html.ini b/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.9arg.sourcesize.html.ini
deleted file mode 100644
index 2f90478b571..00000000000
--- a/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.9arg.sourcesize.html.ini
+++ /dev/null
@@ -1,5 +0,0 @@
-[2d.drawImage.9arg.sourcesize.html]
-  type: testharness
-  [Canvas test: 2d.drawImage.9arg.sourcesize]
-    expected: FAIL
-
diff --git a/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.animated.apng.html.ini b/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.animated.apng.html.ini
deleted file mode 100644
index 12bbb87fda1..00000000000
--- a/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.animated.apng.html.ini
+++ /dev/null
@@ -1,5 +0,0 @@
-[2d.drawImage.animated.apng.html]
-  type: testharness
-  [drawImage() of an APNG with no poster frame draws the first frame]
-    expected: FAIL
-
diff --git a/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.animated.gif.html.ini b/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.animated.gif.html.ini
deleted file mode 100644
index ab2c8e2cb02..00000000000
--- a/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.animated.gif.html.ini
+++ /dev/null
@@ -1,5 +0,0 @@
-[2d.drawImage.animated.gif.html]
-  type: testharness
-  [drawImage() of an animated GIF draws the first frame]
-    expected: FAIL
-
diff --git a/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.animated.poster.html.ini b/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.animated.poster.html.ini
deleted file mode 100644
index bcbaad2c882..00000000000
--- a/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.animated.poster.html.ini
+++ /dev/null
@@ -1,5 +0,0 @@
-[2d.drawImage.animated.poster.html]
-  type: testharness
-  [drawImage() of an APNG draws the poster frame]
-    expected: FAIL
-
diff --git a/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.floatsource.html.ini b/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.floatsource.html.ini
deleted file mode 100644
index 58a5608ae50..00000000000
--- a/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.floatsource.html.ini
+++ /dev/null
@@ -1,5 +0,0 @@
-[2d.drawImage.floatsource.html]
-  type: testharness
-  [Canvas test: 2d.drawImage.floatsource]
-    expected: FAIL
-
diff --git a/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.nonfinite.html.ini b/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.nonfinite.html.ini
deleted file mode 100644
index 59c2ed1eda1..00000000000
--- a/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.nonfinite.html.ini
+++ /dev/null
@@ -1,5 +0,0 @@
-[2d.drawImage.nonfinite.html]
-  type: testharness
-  [drawImage() with Infinity/NaN is ignored]
-    expected: FAIL
-
diff --git a/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.nowrap.html.ini b/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.nowrap.html.ini
deleted file mode 100644
index 65d4f782665..00000000000
--- a/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.nowrap.html.ini
+++ /dev/null
@@ -1,5 +0,0 @@
-[2d.drawImage.nowrap.html]
-  type: testharness
-  [Stretched images do not get pixels wrapping around the edges]
-    expected: FAIL
-
diff --git a/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.transform.html.ini b/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.transform.html.ini
deleted file mode 100644
index 65ee855d48a..00000000000
--- a/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.transform.html.ini
+++ /dev/null
@@ -1,5 +0,0 @@
-[2d.drawImage.transform.html]
-  type: testharness
-  [Canvas test: 2d.drawImage.transform]
-    expected: FAIL
-
diff --git a/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.zerocanvas.html.ini b/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.zerocanvas.html.ini
deleted file mode 100644
index fd39e5a9200..00000000000
--- a/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.zerocanvas.html.ini
+++ /dev/null
@@ -1,5 +0,0 @@
-[2d.drawImage.zerocanvas.html]
-  type: testharness
-  [Canvas test: 2d.drawImage.zerocanvas]
-    expected: FAIL
-
diff --git a/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.zerosource.html.ini b/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.zerosource.html.ini
deleted file mode 100644
index 92e485ec36e..00000000000
--- a/tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.zerosource.html.ini
+++ /dev/null
@@ -1,5 +0,0 @@
-[2d.drawImage.zerosource.html]
-  type: testharness
-  [drawImage with zero-sized source rectangle throws INDEX_SIZE_ERR]
-    expected: FAIL
-
diff --git a/tests/wpt/metadata/2dcontext/shadows/2d.shadow.canvas.transparent.1.html.ini b/tests/wpt/metadata/2dcontext/shadows/2d.shadow.canvas.transparent.1.html.ini
deleted file mode 100644
index e63cfb92258..00000000000
--- a/tests/wpt/metadata/2dcontext/shadows/2d.shadow.canvas.transparent.1.html.ini
+++ /dev/null
@@ -1,5 +0,0 @@
-[2d.shadow.canvas.transparent.1.html]
-  type: testharness
-  [Shadows are not drawn for transparent canvases]
-    expected: FAIL
-
diff --git a/tests/wpt/metadata/2dcontext/shadows/2d.shadow.canvas.transparent.2.html.ini b/tests/wpt/metadata/2dcontext/shadows/2d.shadow.canvas.transparent.2.html.ini
index b3623a00589..f0485ad1623 100644
--- a/tests/wpt/metadata/2dcontext/shadows/2d.shadow.canvas.transparent.2.html.ini
+++ b/tests/wpt/metadata/2dcontext/shadows/2d.shadow.canvas.transparent.2.html.ini
@@ -2,4 +2,3 @@
   type: testharness
   [Shadows are not drawn for transparent parts of canvases]
     expected: FAIL
-
diff --git a/tests/wpt/metadata/2dcontext/shadows/2d.shadow.image.section.html.ini b/tests/wpt/metadata/2dcontext/shadows/2d.shadow.image.section.html.ini
deleted file mode 100644
index 4bedaf32833..00000000000
--- a/tests/wpt/metadata/2dcontext/shadows/2d.shadow.image.section.html.ini
+++ /dev/null
@@ -1,5 +0,0 @@
-[2d.shadow.image.section.html]
-  type: testharness
-  [Shadows are not drawn for areas outside image source rectangles]
-    expected: FAIL
-
diff --git a/tests/wpt/metadata/2dcontext/shadows/2d.shadow.image.transparent.1.html.ini b/tests/wpt/metadata/2dcontext/shadows/2d.shadow.image.transparent.1.html.ini
deleted file mode 100644
index 0798e2c6553..00000000000
--- a/tests/wpt/metadata/2dcontext/shadows/2d.shadow.image.transparent.1.html.ini
+++ /dev/null
@@ -1,5 +0,0 @@
-[2d.shadow.image.transparent.1.html]
-  type: testharness
-  [Shadows are not drawn for transparent images]
-    expected: FAIL
-
diff --git a/tests/wpt/metadata/2dcontext/shadows/2d.shadow.image.transparent.2.html.ini b/tests/wpt/metadata/2dcontext/shadows/2d.shadow.image.transparent.2.html.ini
index 4b5b797c037..c4f70567f88 100644
--- a/tests/wpt/metadata/2dcontext/shadows/2d.shadow.image.transparent.2.html.ini
+++ b/tests/wpt/metadata/2dcontext/shadows/2d.shadow.image.transparent.2.html.ini
@@ -2,4 +2,3 @@
   type: testharness
   [Shadows are not drawn for transparent parts of images]
     expected: FAIL
-
diff --git a/tests/wpt/metadata/2dcontext/shadows/canvas_shadows_002.htm.ini b/tests/wpt/metadata/2dcontext/shadows/canvas_shadows_002.htm.ini
new file mode 100644
index 00000000000..8a5384818b7
--- /dev/null
+++ b/tests/wpt/metadata/2dcontext/shadows/canvas_shadows_002.htm.ini
@@ -0,0 +1,4 @@
+[canvas_shadows_002.html]
+  type: testharness
+  [Shadows must be drawn for images]
+    expected: FAIL