OLD | NEW |
1 <!DOCTYPE html> | |
2 <html> | 1 <html> |
3 <head> | 2 <head> |
4 <style> | 3 <style> |
5 .hide {display:none} | 4 .hide {display:none} |
6 .row {display:table-row} | 5 .row {display:table-row} |
7 .cell {display:table-cell; padding:10px} | 6 .cell {display:table-cell; padding:10px} |
8 #test-output {display:table} | 7 #test-output {display:table} |
9 label {display:row} | 8 label {display:row} |
10 </style> | 9 </style> |
11 </head> | 10 <body> |
12 <body> | |
13 | 11 |
14 <script src="../../resources/js-test.js"></script> | 12 <script src="../../resources/testharness.js"></script> |
15 <canvas class="hide" id="source-up-canvas"></canvas> | 13 <script src="../../resources/testharnessreport.js"></script> |
16 <canvas class="hide" id="source-down-canvas"></canvas> | 14 <canvas class="hide" id="source-up-canvas"></canvas> |
17 <div id="test-output"> | 15 <canvas class="hide" id="source-down-canvas"></canvas> |
18 <label>Scale Up</label> | 16 <div id="test-output"> |
19 <div id="up" class="row"> | 17 <label>Scale Up</label> |
20 <div class="cell"> | 18 <div id="up" class="row"> |
21 <div id="low-up"></div> | 19 <div class="cell"> |
22 <canvas id="low-up-canvas"></canvas> | 20 <div id="low-up"></div> |
23 </div> | 21 <canvas id="low-up-canvas"></canvas> |
24 <div class="cell"> | 22 </div> |
25 <div id="medium-up"></div> | 23 <div class="cell"> |
26 <canvas id="medium-up-canvas"></canvas> | 24 <div id="medium-up"></div> |
27 </div> | 25 <canvas id="medium-up-canvas"></canvas> |
28 <div class="cell"> | 26 </div> |
29 <div id="high-up"></div> | 27 <div class="cell"> |
30 <canvas id="high-up-canvas"></canvas> | 28 <div id="high-up"></div> |
31 </div> | 29 <canvas id="high-up-canvas"></canvas> |
32 </div> | 30 </div> |
| 31 </div> |
33 | 32 |
34 <label>Scale Down</label> | 33 <label>Scale Down</label> |
35 <div id="down" class="row"> | 34 <div id="down" class="row"> |
36 <div class="cell"> | 35 <div class="cell"> |
37 <div id="low-down"></div> | 36 <div id="low-down"></div> |
38 <canvas id="low-down-canvas"></canvas> | 37 <canvas id="low-down-canvas"></canvas> |
39 </div> | |
40 <div class="cell"> | |
41 <div id="medium-down"></div> | |
42 <canvas id="medium-down-canvas"></canvas> | |
43 </div> | |
44 <div class="cell"> | |
45 <div id="high-down"></div> | |
46 <canvas id="high-down-canvas"></canvas> | |
47 </div> | |
48 </div> | |
49 </div> | 38 </div> |
50 <script> | 39 <div class="cell"> |
51 if (window.testRunner) | 40 <div id="medium-down"></div> |
52 window.testRunner.dumpAsTextWithPixelResults(); | 41 <canvas id="medium-down-canvas"></canvas> |
| 42 </div> |
| 43 <div class="cell"> |
| 44 <div id="high-down"></div> |
| 45 <canvas id="high-down-canvas"></canvas> |
| 46 </div> |
| 47 </div> |
| 48 </div> |
53 | 49 |
54 drawCanvas("source", "up", drawPicture); | 50 <script> |
55 drawCanvas("source", "down", drawWord); | |
56 | |
57 qualities = ["low", "medium", "high"]; | |
58 scales = ["up", "down"]; | |
59 for (var i = 0; i < scales.length; i++) { | |
60 for (var j = 0; j < qualities.length; j++) { | |
61 drawCanvas(qualities[j], scales[i], copyPicture); | |
62 } | |
63 } | |
64 | 51 |
65 function drawCanvas(quality, scale, drawFunc) { | 52 function drawCanvas(quality, scale, drawFunc) { |
66 var id = quality + "-" + scale; | 53 var id = quality + "-" + scale; |
67 var canvas = document.getElementById(id + "-canvas"); | 54 var canvas = document.getElementById(id + "-canvas"); |
68 var context = canvas.getContext("2d"); | 55 var context = canvas.getContext("2d"); |
69 var testCaseTitle = document.getElementById(id); | 56 var testCaseTitle = document.getElementById(id); |
70 if (testCaseTitle) { | 57 if (testCaseTitle) { |
71 testCaseTitle.innerHTML = quality; | 58 testCaseTitle.innerHTML = quality; |
72 } | 59 } |
73 drawFunc(canvas, context, quality, scale); | 60 drawFunc(canvas, context, quality, scale); |
74 } | 61 } |
75 | 62 |
76 function copyPicture(canvas, context, quality, scale) { | 63 function copyPicture(canvas, context, quality, scale) { |
77 var source = document.getElementById("source-" + scale + "-canvas"); | 64 var source = document.getElementById("source-" + scale + "-canvas"); |
78 canvas.width = 100; | 65 canvas.width = 100; |
79 canvas.height = 100; | 66 canvas.height = 100; |
80 context.imageSmoothingQuality = quality; | 67 context.imageSmoothingQuality = quality; |
81 context.drawImage(source, 0, 0, canvas.width, canvas.height); | 68 context.drawImage(source, 0, 0, canvas.width, canvas.height); |
82 } | 69 } |
83 | 70 |
84 function drawWord(canvas, context) { | 71 function drawWord(canvas, context) { |
85 canvas.width = 1800; | 72 canvas.width = 1800; |
86 canvas.height = 1800; | 73 canvas.height = 1800; |
87 context.font = '250pt Calibri'; | 74 context.font = '250pt Calibri'; |
88 context.textAlign = 'center'; | 75 context.textAlign = 'center'; |
89 context.fillStyle = 'blue'; | 76 context.fillStyle = 'blue'; |
90 context.fillText('Hello World!', canvas.width/2, canvas.height/2); | 77 context.fillText('Hello World!', canvas.width/2, canvas.height/2); |
91 } | 78 } |
92 | 79 |
93 | |
94 function drawPicture(canvas, context) { | 80 function drawPicture(canvas, context) { |
95 canvas.width = 5; | 81 canvas.width = 5; |
96 canvas.height = 5; | 82 canvas.height = 5; |
97 | 83 |
98 var image = context.createImageData(canvas.width, canvas.height); | 84 var image = context.createImageData(canvas.width, canvas.height); |
99 | 85 |
100 function drawBlackDot(x, y, col) { | 86 function drawBlackDot(x, y, col) { |
101 var offset = y * 4 * canvas.width + x * 4; | 87 var offset = y * 4 * canvas.width + x * 4; |
102 image.data[offset + 0] = col[0]; // R | 88 image.data[offset + 0] = col[0]; // R |
103 image.data[offset + 1] = col[1] ; // G | 89 image.data[offset + 1] = col[1] ; // G |
(...skipping 10 matching lines...) Expand all Loading... |
114 'w' : [255,255,255], | 100 'w' : [255,255,255], |
115 'b' : [0,0,0], | 101 'b' : [0,0,0], |
116 } | 102 } |
117 for (var x = 0 ; x < canvas.width; x++) { | 103 for (var x = 0 ; x < canvas.width; x++) { |
118 for (var y = 0; y < canvas.height; y++) { | 104 for (var y = 0; y < canvas.height; y++) { |
119 drawBlackDot(x, y, nameToColor[imageData[x][y]]); | 105 drawBlackDot(x, y, nameToColor[imageData[x][y]]); |
120 } | 106 } |
121 } | 107 } |
122 context.putImageData(image, 0, 0); | 108 context.putImageData(image, 0, 0); |
123 } | 109 } |
124 </script> | 110 |
125 </body> | 111 test(function(t) { |
126 </html> | 112 drawCanvas("source", "up", drawPicture); |
| 113 drawCanvas("source", "down", drawWord); |
| 114 |
| 115 qualities = ["low", "medium", "high"]; |
| 116 scales = ["up", "down"]; |
| 117 for (var i = 0; i < scales.length; i++) { |
| 118 for (var j = 0; j < qualities.length; j++) { |
| 119 drawCanvas(qualities[j], scales[i], copyPicture); |
| 120 } |
| 121 } |
| 122 }, 'Test that createImageBitmap from a bitmaprenderer canvas produces correct re
sult'); |
| 123 </script> |
| 124 </body> |
OLD | NEW |