Index: third_party/WebKit/LayoutTests/svg/canvas/canvas-draw-pattern-svg-fragment.html |
diff --git a/third_party/WebKit/LayoutTests/svg/canvas/canvas-draw-image-svg-fragment.html b/third_party/WebKit/LayoutTests/svg/canvas/canvas-draw-pattern-svg-fragment.html |
similarity index 51% |
copy from third_party/WebKit/LayoutTests/svg/canvas/canvas-draw-image-svg-fragment.html |
copy to third_party/WebKit/LayoutTests/svg/canvas/canvas-draw-pattern-svg-fragment.html |
index 831729c839ab64eb1a8f3ea81b0ca5fa61b49615..55635b4c1a5864bf3693a753c6899d13381502a1 100644 |
--- a/third_party/WebKit/LayoutTests/svg/canvas/canvas-draw-image-svg-fragment.html |
+++ b/third_party/WebKit/LayoutTests/svg/canvas/canvas-draw-pattern-svg-fragment.html |
@@ -1,19 +1,30 @@ |
<!DOCTYPE html> |
-<title>drawImage() with SVG fragments</title> |
+<title>createPattern() with SVG fragments</title> |
<script> |
onload = function() { |
var context = document.getElementsByTagName('canvas')[0].getContext('2d'); |
var images = document.getElementsByTagName('img'); |
for (var i = 0; i < images.length; i++) { |
+ /* Draw image directly from DOM */ |
+ var pattern = context.createPattern(images[i], "repeat"); |
+ context.fillStyle = pattern; |
+ context.fillRect(i*60, i*60, 120, 120); |
+ } |
+ |
+ for (var i = 0; i < images.length; i++) { |
+ /* Draw new image with src from DOM */ |
var newImage = new Image(); |
newImage.src = images[i].src; |
- context.drawImage(newImage, i*60, i*60, 120, 120); |
+ var pattern = context.createPattern(newImage, "repeat"); |
+ context.fillStyle = pattern; |
+ context.fillRect((i+3)*60, (i+3)*60, 120, 120); |
} |
+ |
while (images.length) |
document.body.removeChild(images.item(0)); |
} |
</script> |
-<canvas width="240" height="240"></canvas> |
+<canvas width="480" height="480"></canvas> |
<img src="../css/resources/fragment-identifiers.svg#green"> |
<img src="../css/resources/fragment-identifiers.svg#red"> |
<img src="../css/resources/fragment-identifiers.svg#blue"> |