Chromium Code Reviews| OLD | NEW |
|---|---|
| 1 This test ensures that getImageData works correctly. | 1 <script src="../../resources/testharness.js"></script> |
| 2 <div id="log"></div> | 2 <script src="../../resources/testharnessreport.js"></script> |
| 3 | |
| 3 <script> | 4 <script> |
| 4 if (window.testRunner) | |
| 5 testRunner.dumpAsText(); | |
| 6 | 5 |
| 7 var canvas = document.createElement("canvas"); | 6 var canvas = document.createElement("canvas"); |
| 8 canvas.width = 200; | 7 canvas.width = 200; |
| 9 canvas.height = 200; | 8 canvas.height = 200; |
| 10 var context = canvas.getContext("2d"); | 9 var context = canvas.getContext("2d"); |
| 11 | 10 |
| 12 function log(msg){ | |
| 13 document.getElementById("log").innerHTML += msg + "<br/>"; | |
| 14 } | |
| 15 | |
| 16 function dataToArray(data) { | 11 function dataToArray(data) { |
| 17 var result = new Array(data.length) | 12 var result = new Array(data.length) |
| 18 for (var i = 0; i < data.length; i++) | 13 for (var i = 0; i < data.length; i++) |
| 19 result[i] = data[i]; | 14 result[i] = data[i]; |
| 20 return result; | 15 return result; |
| 21 } | 16 } |
| 22 | 17 |
| 23 function getPixel(ctx, x, y) { | 18 function getPixel(ctx, x, y) { |
| 24 var data = ctx.getImageData(x,y,1,1); | 19 var data = ctx.getImageData(x,y,1,1); |
| 25 if (!data) // getImageData failed, which should never happen | 20 assert_not_equals(data, null); |
| 26 return [-1,-1,-1,-1]; | |
| 27 return dataToArray(data.data); | 21 return dataToArray(data.data); |
| 28 } | 22 } |
| 29 | 23 |
| 30 function pixelShouldBe(ctx, x, y, colour) { | 24 function pixelShouldBe(ctx, x, y, colour) { |
| 31 var ctxColour = getPixel(ctx, x, y); | 25 var ctxColour = getPixel(ctx, x, y); |
| 32 var correct = true; | |
| 33 for (var i = 0; i < 4; i++) | 26 for (var i = 0; i < 4; i++) |
| 34 if (colour[i] != ctxColour[i]) { | 27 assert_equals(colour[i], ctxColour[i]); |
| 35 correct = false; | |
| 36 break; | |
| 37 } | |
| 38 if (correct) | |
| 39 log("PASS: pixel at ("+[x,y]+") was ["+colour+"]"); | |
| 40 else | |
| 41 log("FAIL: pixel at ("+[x,y]+") was ["+ctxColour+"], expected ["+colour+ "]"); | |
| 42 } | 28 } |
| 43 | 29 |
| 30 test(function(t) { | |
| 31 | |
| 44 if (!context.setFillColor) | 32 if (!context.setFillColor) |
|
Justin Novosad
2017/02/03 18:07:18
indent
| |
| 45 context.setFillColor = function(r,g,b,a) { | 33 context.setFillColor = function(r,g,b,a) { |
| 46 this.fillStyle = "rgba("+[Math.round(r*255),Math.round(g*255),Math.round (b*255),Math.round(a*255)]+")" | 34 this.fillStyle = "rgba("+[Math.round(r*255),Math.round(g*255),Math.round (b*255),Math.round(a*255)]+")"; |
| 47 } | 35 } |
| 48 | 36 |
| 49 // Check that getImageData is return the data for the right portion of the image | 37 // Check that getImageData is return the data for the right portion of the image |
| 50 for(var x = 0; x < 100; x+=4) { | 38 for(var x = 0; x < 100; x += 4) { |
| 51 context.setFillColor(0, x/96, 0, 1); | 39 context.setFillColor(0, x/96, 0, 1); |
| 52 context.fillRect(x,0,1,1); | 40 context.fillRect(x, 0, 1, 1); |
| 53 pixelShouldBe(context, x, 0, [0, Math.round(255*x/96), 0, 255]); | 41 pixelShouldBe(context, x, 0, [0, Math.round(255*x/96), 0, 255]); |
| 54 } | 42 } |
| 55 | 43 |
| 56 // Check rgba ordering | 44 // Check rgba ordering |
| 57 context.clearRect(0,0,100,100); | 45 context.clearRect(0, 0, 100, 100); |
| 58 context.setFillColor(0.25, 0.5, 0.75, 1); | 46 context.setFillColor(0.25, 0.5, 0.75, 1); |
| 59 context.fillRect(5,5,1,1); | 47 context.fillRect(5, 5, 1, 1); |
| 60 pixelShouldBe(context, 5, 5, [Math.round(0.25*255), Math.round(0.5*255), Math.ro und(0.75*255), 255]); | 48 pixelShouldBe(context, 5, 5, [Math.round(0.25*255), Math.round(0.5*255), Math.ro und(0.75*255), 255]); |
| 61 | 49 |
| 62 // Make sure we return correct values for the row | 50 // Make sure we return correct values for the row |
| 63 for (var i = 0; i < 100; i++) { | 51 for (var i = 0; i < 100; i++) { |
| 64 context.fillStyle = "rgba("+[0, i, 0, 1]+")"; | 52 context.fillStyle = "rgba("+[0, i, 0, 1]+")"; |
| 65 context.fillRect(i, 10, 1, 1); | 53 context.fillRect(i, 10, 1, 1); |
| 66 } | 54 } |
| 67 | 55 |
| 68 var rowImageData = context.getImageData(0, 10, 100, 1).data; | 56 var rowImageData = context.getImageData(0, 10, 100, 1).data; |
| 69 var rowCheck = true; | 57 var rowCheck = true; |
| 70 for (var i = 0; i < 100; i++) { | 58 for (var i = 0; i < 100; i++) { |
| 71 if (rowImageData[i * 4 + 1] != i) { | 59 if (rowImageData[i * 4 + 1] != i) { |
| 72 rowCheck = false; | 60 rowCheck = false; |
| 73 break; | 61 break; |
| 74 } | 62 } |
| 75 } | 63 } |
| 76 if (!rowCheck) | 64 assert_true(rowCheck); |
| 77 log("FAIL: Did not correctly retrieve every pixel in a row"); | |
| 78 else | |
| 79 log("PASS: Correctly retrieved every pixel in a row"); | |
| 80 | 65 |
| 81 // Check that we return transparent black for regions outside the canvas proper | 66 // Check that we return transparent black for regions outside the canvas proper |
| 82 context.fillStyle = "rgba(255,255,255,255)"; | 67 context.fillStyle = "rgba(255,255,255,255)"; |
| 83 context.fillRect(198, 5, 4, 1); // final 2 pixels horizontally should be clipped | 68 context.fillRect(198, 5, 4, 1); // final 2 pixels horizontally should be clipped |
| 84 var content = dataToArray(context.getImageData(198, 5, 4, 1).data); | 69 var content = dataToArray(context.getImageData(198, 5, 4, 1).data); |
| 85 var expected = [255,255,255,255,255,255,255,255, | 70 var expected = [255,255,255,255,255,255,255,255, |
| 86 0,0,0,0,0,0,0,0]; | 71 0,0,0,0,0,0,0,0]; |
| 87 var matched = true; | |
| 88 for (var i = 0; i < 16; i++) | 72 for (var i = 0; i < 16; i++) |
| 89 if (content[i] != expected[i]) { | 73 assert_equals(content[i], expected[i]); |
| 90 matched = false; | |
| 91 break; | |
| 92 } | |
| 93 if (matched) | |
| 94 log("PASS: Correct data for content outside canvas bounds"); | |
| 95 else | |
| 96 log("FAIL: Did not get correct data for content outside canvas bounds: "+con tent); | |
| 97 | 74 |
| 75 }, 'This test ensures that getImageData works correctly.'); | |
| 98 </script> | 76 </script> |
| OLD | NEW |