Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(294)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/svg/canvas/canvas-default-object-sizing.html

Issue 1767633002: Support canvas size as default object size (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@pass-default-object-size
Patch Set: Save image size on stack Created 4 years, 9 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/svg/canvas/canvas-default-object-sizing-expected.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 <!DOCTYPE html>
2 <title>Sizing SVG image when drawn to canvas</title>
3 <script>
4 function createCanvasWithImage(imgSrc, drawFunc)
5 {
6 var canvas = document.createElement('canvas');
7 canvas.width = 100;
8 canvas.height = 100;
9 var img = document.createElement('img');
10 img.src = imgSrc;
11 img.onload = function() {
12 drawFunc(canvas.getContext('2d'), img);
13 document.documentElement.removeChild(img);
14 }
15 document.documentElement.appendChild(img);
16 document.documentElement.appendChild(canvas);
17 }
18
19 createCanvasWithImage(
20 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><circle cx="5" cy="5" r="5" fill="blue"/></svg>',
21 function(ctx, img) {
22 ctx.drawImage(img, 0, 0);
23 });
24
25 createCanvasWithImage(
26 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 10"><circle cx="10" cy="5" r="5" fill="blue"/></svg>',
27 function(ctx, img) {
28 ctx.drawImage(img, 0, 0);
29 });
30
31 createCanvasWithImage(
32 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 20"><circle cx="5" cy="10" r="5" fill="blue"/></svg>',
33 function(ctx, img) {
34 ctx.drawImage(img, 0, 0);
35 });
36
37 createCanvasWithImage(
38 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 10"><circle cx="10" cy="5" r="5" fill="blue"/></svg>',
39 function(ctx, img) {
40 ctx.drawImage(img, 0, 0, 100, 100);
41 });
42
43 createCanvasWithImage(
44 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 20"><circle cx="5" cy="10" r="5" fill="blue"/></svg>',
45 function(ctx, img) {
46 ctx.drawImage(img, 0, 0, 100, 100);
47 });
48
49 createCanvasWithImage(
50 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="50" viewB ox="0 0 10 20"><circle cx="5" cy="10" r="5" fill="blue"/></svg>',
51 function(ctx, img) {
52 ctx.drawImage(img, 0, 0);
53 });
54
55 createCanvasWithImage(
56 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="50" view Box="0 0 20 10"><circle cx="10" cy="5" r="5" fill="blue"/></svg>',
57 function(ctx, img) {
58 ctx.drawImage(img, 0, 0);
59 });
60
61 createCanvasWithImage(
62 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" heig ht="50"><circle cx="50" cy="25" r="25" fill="blue"/></svg>',
63 function(ctx, img) {
64 ctx.drawImage(img, 0, 0);
65 });
66
67 createCanvasWithImage(
68 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><circle cx="5" cy="5" r="5" fill="blue"/></svg>',
69 function(ctx, img) {
70 ctx.drawImage(img, 0, 0, 50, 50, 0, 0, 50, 50);
71 ctx.drawImage(img, 50, 50, 50, 50, 50, 50, 50, 50);
72 ctx.drawImage(img, 0, 50, 50, 50, 0, 50, 50, 50);
73 ctx.drawImage(img, 50, 0, 50, 50, 50, 0, 50, 50);
74 });
75
76 createCanvasWithImage(
77 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><circle cx="5" cy="5" r="5" fill="blue"/></svg>',
78 function(ctx, img) {
79 var pattern = ctx.createPattern(img, "repeat");
80 ctx.fillStyle = pattern;
81 ctx.fillRect(0, 0, 100, 100);
82 });
83
84 createCanvasWithImage(
85 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 10"><circle cx="10" cy="5" r="5" fill="blue"/></svg>',
86 function(ctx, img) {
87 var pattern = ctx.createPattern(img, "repeat");
88 ctx.fillStyle = pattern;
89 ctx.fillRect(0, 0, 100, 100);
90 });
91
92 createCanvasWithImage(
93 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50" fill="blue"/></svg>',
94 function(ctx, img) {
95 var pattern = ctx.createPattern(img, "repeat");
96 ctx.fillStyle = pattern;
97 ctx.fillRect(0, 0, 100, 100);
98 });
99 </script>
OLDNEW
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/svg/canvas/canvas-default-object-sizing-expected.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698