| <html> |
| <head> |
| <style> |
| .hide {display:none} |
| .row {display:table-row} |
| .cell {display:table-cell; padding:10px} |
| #test-output {display:table} |
| label {display:row} |
| </style> |
| <body> |
| |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <canvas class="hide" id="source-up-canvas"></canvas> |
| <canvas class="hide" id="source-down-canvas"></canvas> |
| <div id="test-output"> |
| <label>Scale Up</label> |
| <div id="up" class="row"> |
| <div class="cell"> |
| <div id="low-up"></div> |
| <canvas id="low-up-canvas"></canvas> |
| </div> |
| <div class="cell"> |
| <div id="medium-up"></div> |
| <canvas id="medium-up-canvas"></canvas> |
| </div> |
| <div class="cell"> |
| <div id="high-up"></div> |
| <canvas id="high-up-canvas"></canvas> |
| </div> |
| </div> |
| |
| <label>Scale Down</label> |
| <div id="down" class="row"> |
| <div class="cell"> |
| <div id="low-down"></div> |
| <canvas id="low-down-canvas"></canvas> |
| </div> |
| <div class="cell"> |
| <div id="medium-down"></div> |
| <canvas id="medium-down-canvas"></canvas> |
| </div> |
| <div class="cell"> |
| <div id="high-down"></div> |
| <canvas id="high-down-canvas"></canvas> |
| </div> |
| </div> |
| </div> |
| |
| <script> |
| |
| function drawCanvas(quality, scale, drawFunc) { |
| var id = quality + "-" + scale; |
| var canvas = document.getElementById(id + "-canvas"); |
| var context = canvas.getContext("2d"); |
| var testCaseTitle = document.getElementById(id); |
| if (testCaseTitle) { |
| testCaseTitle.innerHTML = quality; |
| } |
| drawFunc(canvas, context, quality, scale); |
| } |
| |
| function copyPicture(canvas, context, quality, scale) { |
| var source = document.getElementById("source-" + scale + "-canvas"); |
| canvas.width = 100; |
| canvas.height = 100; |
| context.imageSmoothingQuality = quality; |
| context.drawImage(source, 0, 0, canvas.width, canvas.height); |
| } |
| |
| function drawWord(canvas, context) { |
| canvas.width = 1800; |
| canvas.height = 1800; |
| context.font = '250pt Calibri'; |
| context.textAlign = 'center'; |
| context.fillStyle = 'blue'; |
| context.fillText('Hello World!', canvas.width/2, canvas.height/2); |
| } |
| |
| function drawPicture(canvas, context) { |
| canvas.width = 5; |
| canvas.height = 5; |
| |
| var image = context.createImageData(canvas.width, canvas.height); |
| |
| function drawBlackDot(x, y, col) { |
| var offset = y * 4 * canvas.width + x * 4; |
| image.data[offset + 0] = col[0]; // R |
| image.data[offset + 1] = col[1] ; // G |
| image.data[offset + 2] = col[2] ; // B |
| image.data[offset + 3] = 225; // Alpha |
| } |
| |
| var imageData = [ |
| ['b', 'w', 'b', 'w', 'b',],['w', 'b', 'w', 'b', 'w',], |
| ['b', 'w', 'b', 'w', 'b',],['w', 'b', 'w', 'b', 'w',], |
| ['b', 'w', 'b', 'w', 'b',], |
| ] |
| var nameToColor = { |
| 'w' : [255,255,255], |
| 'b' : [0,0,0], |
| } |
| for (var x = 0 ; x < canvas.width; x++) { |
| for (var y = 0; y < canvas.height; y++) { |
| drawBlackDot(x, y, nameToColor[imageData[x][y]]); |
| } |
| } |
| context.putImageData(image, 0, 0); |
| } |
| |
| test(function(t) { |
| drawCanvas("source", "up", drawPicture); |
| drawCanvas("source", "down", drawWord); |
| |
| qualities = ["low", "medium", "high"]; |
| scales = ["up", "down"]; |
| for (var i = 0; i < scales.length; i++) { |
| for (var j = 0; j < qualities.length; j++) { |
| drawCanvas(qualities[j], scales[i], copyPicture); |
| } |
| } |
| }, 'Test that createImageBitmap from a bitmaprenderer canvas produces correct result'); |
| </script> |
| </body> |
