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

Side by Side Diff: third_party/WebKit/LayoutTests/fast/canvas/canvas-imageSmoothingQuality-pixel.html

Issue 2679083003: Use testharness.js instead of js-test.js in LayoutTests/fast/canvas tests. (Closed)
Patch Set: Adding virtual/gpu/fast/canvas/canvas-imageSmoothingQuality.html to TestExpectations Created 3 years, 10 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
OLDNEW
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
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>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698