Bug 1382027. Allow using an SVGImageElement as a CanvasImageSource. r=mystor

--HG--
rename : testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_1.html => testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_svg_image_1.html
rename : testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_1_ref.html => testing/web-platform/tests/2dcontext/drawing-images-to-the-canvas/drawimage_svg_image_1_ref.html
This commit is contained in:
Boris Zbarsky 2017-07-19 11:48:49 -04:00
parent 58c5f32380
commit e12283979d
7 changed files with 99 additions and 10 deletions

View File

@ -10,8 +10,8 @@
namespace mozilla {
namespace dom {
class HTMLImageElementOrHTMLCanvasElementOrHTMLVideoElementOrImageBitmap;
typedef HTMLImageElementOrHTMLCanvasElementOrHTMLVideoElementOrImageBitmap
class HTMLImageElementOrSVGImageElementOrHTMLCanvasElementOrHTMLVideoElementOrImageBitmap;
typedef HTMLImageElementOrSVGImageElementOrHTMLCanvasElementOrHTMLVideoElementOrImageBitmap
CanvasImageSource;
/*

View File

@ -107,6 +107,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"
@ -2529,10 +2530,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) {
@ -2557,7 +2558,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();
}
@ -2568,11 +2569,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();
@ -2611,7 +2620,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_IF_IMAGE, mTarget);
if (!res.GetSourceSurface()) {
@ -5177,6 +5186,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);

View File

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

View File

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

View File

@ -8757,6 +8757,18 @@
{}
]
],
"2dcontext/drawing-images-to-the-canvas/drawimage_svg_image_1.html": [
[
"/2dcontext/drawing-images-to-the-canvas/drawimage_svg_image_1.html",
[
[
"/2dcontext/drawing-images-to-the-canvas/drawimage_svg_image_1_ref.html",
"=="
]
],
{}
]
],
"2dcontext/line-styles/canvas_linestyles_linecap_001.htm": [
[
"/2dcontext/line-styles/canvas_linestyles_linecap_001.htm",
@ -16226,6 +16238,11 @@
{}
]
],
"2dcontext/drawing-images-to-the-canvas/drawimage_svg_image_1_ref.html": [
[
{}
]
],
"2dcontext/drawing-model/.gitkeep": [
[
{}
@ -139893,6 +139910,14 @@
"5e4587978bcf32905a2676da269a5a09d7938718",
"support"
],
"2dcontext/drawing-images-to-the-canvas/drawimage_svg_image_1.html": [
"88b0d23afdc1ba684214be010d8318ee451957a1",
"reftest"
],
"2dcontext/drawing-images-to-the-canvas/drawimage_svg_image_1_ref.html": [
"9a70c803aaf5bd8a843b18d6d16779575d4dc6f8",
"support"
],
"2dcontext/drawing-model/.gitkeep": [
"da39a3ee5e6b4b0d3255bfef95601890afd80709",
"support"

View File

@ -0,0 +1,30 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel=match href=drawimage_svg_image_1_ref.html>
<style>
html, body {
margin: 0;
}
</style>
<canvas id="dest" height="100" width="100"></canvas>
<script>
var sourceWidth = 100;
var sourceHeight = 100;
var smoothingEnabled = false;
var destCanvas = document.getElementById('dest');
var sourceImg = document.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;
sourceImg.onload = function() {
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>

View File

@ -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>