moebius#106: SVG - CanvasImageSource - allow using an SVGImageElement as a CanvasImageSource

dom/canvas/CanvasRenderingContext2D.cpp

@@ -105,6 +105,7 @@
 #include "mozilla/dom/CanvasPath.h"
 #include "mozilla/dom/HTMLImageElement.h"
 #include "mozilla/dom/HTMLVideoElement.h"
+#include "mozilla/dom/SVGImageElement.h"
 #include "mozilla/dom/SVGMatrix.h"
 #include "mozilla/dom/TextMetrics.h"
 #include "mozilla/dom/SVGMatrix.h"
@@ -2477,10 +2478,10 @@ CanvasRenderingContext2D::CreatePattern(const CanvasImageSource& aSource,
     return nullptr;
   }
 
-  Element* htmlElement;
+  Element* element;
   if (aSource.IsHTMLCanvasElement()) {
     HTMLCanvasElement* canvas = &aSource.GetAsHTMLCanvasElement();
-    htmlElement = canvas;
+    element = canvas;
 
     nsIntSize size = canvas->GetSize();
     if (size.width == 0 || size.height == 0) {
@@ -2505,7 +2506,7 @@ CanvasRenderingContext2D::CreatePattern(const CanvasImageSource& aSource,
       }
 
       RefPtr<CanvasPattern> pat =
-        new CanvasPattern(this, srcSurf, repeatMode, htmlElement->NodePrincipal(), canvas->IsWriteOnly(), false);
+        new CanvasPattern(this, srcSurf, repeatMode, element->NodePrincipal(), canvas->IsWriteOnly(), false);
 
       return pat.forget();
     }
@@ -2516,11 +2517,19 @@ CanvasRenderingContext2D::CreatePattern(const CanvasImageSource& aSource,
       return nullptr;
     }
 
-    htmlElement = img;
+    element = img;
+  } else if (aSource.IsSVGImageElement()) {
+    SVGImageElement* img = &aSource.GetAsSVGImageElement();
+    if (img->IntrinsicState().HasState(NS_EVENT_STATE_BROKEN)) {
+      aError.Throw(NS_ERROR_DOM_INVALID_STATE_ERR);
+      return nullptr;
+    }
+
+    element = img;
   } else if (aSource.IsHTMLVideoElement()) {
     auto& video = aSource.GetAsHTMLVideoElement();
     video.MarkAsContentSource(mozilla::dom::HTMLVideoElement::CallerAPI::CREATE_PATTERN);
-    htmlElement = &video;
+    element = &video;
   } else {
     // Special case for ImageBitmap
     ImageBitmap& imgBitmap = aSource.GetAsImageBitmap();
@@ -2559,7 +2568,7 @@ CanvasRenderingContext2D::CreatePattern(const CanvasImageSource& aSource,
   // The canvas spec says that createPattern should use the first frame
   // of animated images
   nsLayoutUtils::SurfaceFromElementResult res =
-    nsLayoutUtils::SurfaceFromElement(htmlElement,
+    nsLayoutUtils::SurfaceFromElement(element,
       nsLayoutUtils::SFE_WANT_FIRST_FRAME, mTarget);
 
   if (!res.GetSourceSurface()) {
@@ -4949,6 +4958,9 @@ CanvasRenderingContext2D::DrawImage(const CanvasImageSource& aImage,
     if (aImage.IsHTMLImageElement()) {
       HTMLImageElement* img = &aImage.GetAsHTMLImageElement();
       element = img;
+    } else if (aImage.IsSVGImageElement()) {
+      SVGImageElement* img = &aImage.GetAsSVGImageElement();
+      element = img;
     } else {
       HTMLVideoElement* video = &aImage.GetAsHTMLVideoElement();
       video->MarkAsContentSource(mozilla::dom::HTMLVideoElement::CallerAPI::DRAW_IMAGE);

dom/canvas/CanvasRenderingContext2D.h

@@ -38,8 +38,8 @@ class SourceSurface;
 } // namespace gl
 
 namespace dom {
-class HTMLImageElementOrHTMLCanvasElementOrHTMLVideoElementOrImageBitmap;
-typedef HTMLImageElementOrHTMLCanvasElementOrHTMLVideoElementOrImageBitmap CanvasImageSource;
+class HTMLImageElementOrSVGImageElementOrHTMLCanvasElementOrHTMLVideoElementOrImageBitmap;
+typedef HTMLImageElementOrSVGImageElementOrHTMLCanvasElementOrHTMLVideoElementOrImageBitmap CanvasImageSource;
 class ImageData;
 class StringOrCanvasGradientOrCanvasPattern;
 class OwningStringOrCanvasGradientOrCanvasPattern;

dom/webidl/CanvasRenderingContext2D.webidl

@@ -27,6 +27,9 @@ dictionary HitRegionOptions {
 };
 
 typedef (HTMLImageElement or
+         SVGImageElement) HTMLOrSVGImageElement;
+
+typedef (HTMLOrSVGImageElement or
          HTMLCanvasElement or
          HTMLVideoElement or
          ImageBitmap) CanvasImageSource;

testing/web-platform/meta/MANIFEST.json

@@ -39138,6 +39138,18 @@
         "url": "/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_9.html"
       }
     ],
+    "2dcontext/drawing-images-to-the-canvas/drawimage_svg_image_1.html": [
+      {
+        "path": "2dcontext/drawing-images-to-the-canvas/drawimage_svg_image_1.html",
+        "references": [
+          [
+            "/2dcontext/drawing-images-to-the-canvas/drawimage_svg_image_1_ref.html",
+            "=="
+          ]
+        ],
+        "url": "/2dcontext/drawing-images-to-the-canvas/drawimage_svg_image_1.html"
+      }
+    ],
     "2dcontext/line-styles/canvas_linestyles_linecap_001.htm": [
       {
         "path": "2dcontext/line-styles/canvas_linestyles_linecap_001.htm",

testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_svg_image_1.html

@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <meta charset="utf-8">
-<link rel=match href=drawimage_html_image_1_ref.html>
+<link rel=match href=drawimage_svg_image_1_ref.html>
 <style>
   html, body {
     margin: 0;
@@ -13,8 +13,8 @@ var sourceWidth = 100;
 var sourceHeight = 100;
 var smoothingEnabled = false;
 var destCanvas = document.getElementById('dest');
-var sourceImg = document.createElement('img');
-sourceImg.src = '../2x2.png'
+var sourceImg = document.createElementNS('http://www.w3.org/2000/svg', 'image');
+sourceImg.setAttributeNS('http://www.w3.org/1999/xlink', 'href', '../2x2.png');
 sourceImg.width = sourceWidth;
 sourceImg.height = sourceHeight;