How to use _assertPixelApprox method in wpt

Best JavaScript code snippet using wpt

pixel-manipulation.js

Source:pixel-manipulation.js Github

copy

Full Screen

...50 assert.strictEqual(c[1], g, 'Green channel of the pixel at (' + x + ', ' + y + ')');51 assert.strictEqual(c[2], b, 'Blue channel of the pixel at (' + x + ', ' + y + ')');52 assert.strictEqual(c[3], a, 'Alpha channel of the pixel at (' + x + ', ' + y + ')');53}54function _assertPixelApprox(canvas, x, y, r, g, b, a, pos, color, tolerance) {55 const c = _getPixel(canvas, x,y);56 _assertApprox(c[0], r, tolerance, 'Red channel of the pixel at (' + x + ', ' + y + ')');57 _assertApprox(c[1], g, tolerance, 'Green channel of the pixel at (' + x + ', ' + y + ')');58 _assertApprox(c[2], b, tolerance, 'Blue channel of the pixel at (' + x + ', ' + y + ')');59 _assertApprox(c[3], a, tolerance, 'Alpha channel of the pixel at (' + x + ', ' + y + ')');60}61function assert_throws_js(Type, fn) {62 assert.throws(fn, Type);63}64// Used by font tests to allow fonts to load.65function deferTest() {}66class Test {67 // Two cases of this in the tests, look unnecessary.68 done() {}69 // Used by font tests to allow fonts to load.70 step_func_done(func) { func(); }71 // Used for image onload callback.72 step_func(func) { func(); }73}74function step_timeout(result, time) {75 // Nothing; code needs to be converted for this to work.76}77describe("WPT: pixel-manipulation", function () {78 it("2d.imageData.create2.basic", function () {79 // createImageData(sw, sh) exists and returns something80 const canvas = createCanvas(100, 50);81 const ctx = canvas.getContext("2d");82 const t = new Test();83 assert.notStrictEqual(ctx.createImageData(1, 1), null, "ctx.createImageData(1, 1)", "null");84 });85 it("2d.imageData.create1.basic", function () {86 // createImageData(imgdata) exists and returns something87 const canvas = createCanvas(100, 50);88 const ctx = canvas.getContext("2d");89 const t = new Test();90 assert.notStrictEqual(ctx.createImageData(ctx.createImageData(1, 1)), null, "ctx.createImageData(ctx.createImageData(1, 1))", "null");91 });92 it("2d.imageData.create2.type", function () {93 // createImageData(sw, sh) returns an ImageData object containing a Uint8ClampedArray object94 const canvas = createCanvas(100, 50);95 const ctx = canvas.getContext("2d");96 const t = new Test();97 assert.notStrictEqual(window.ImageData, undefined, "window.ImageData", "undefined");98 assert.notStrictEqual(window.Uint8ClampedArray, undefined, "window.Uint8ClampedArray", "undefined");99 window.ImageData.prototype.thisImplementsImageData = true;100 window.Uint8ClampedArray.prototype.thisImplementsUint8ClampedArray = true;101 var imgdata = ctx.createImageData(1, 1);102 assert(imgdata.thisImplementsImageData, "imgdata.thisImplementsImageData");103 assert(imgdata.data.thisImplementsUint8ClampedArray, "imgdata.data.thisImplementsUint8ClampedArray");104 });105 it("2d.imageData.create1.type", function () {106 // createImageData(imgdata) returns an ImageData object containing a Uint8ClampedArray object107 const canvas = createCanvas(100, 50);108 const ctx = canvas.getContext("2d");109 const t = new Test();110 assert.notStrictEqual(window.ImageData, undefined, "window.ImageData", "undefined");111 assert.notStrictEqual(window.Uint8ClampedArray, undefined, "window.Uint8ClampedArray", "undefined");112 window.ImageData.prototype.thisImplementsImageData = true;113 window.Uint8ClampedArray.prototype.thisImplementsUint8ClampedArray = true;114 var imgdata = ctx.createImageData(ctx.createImageData(1, 1));115 assert(imgdata.thisImplementsImageData, "imgdata.thisImplementsImageData");116 assert(imgdata.data.thisImplementsUint8ClampedArray, "imgdata.data.thisImplementsUint8ClampedArray");117 });118 it("2d.imageData.create2.this", function () {119 // createImageData(sw, sh) should throw when called with the wrong |this|120 const canvas = createCanvas(100, 50);121 const ctx = canvas.getContext("2d");122 const t = new Test();123 assert.throws(function() { CanvasRenderingContext2D.prototype.createImageData.call(null, 1, 1); }, TypeError);124 assert.throws(function() { CanvasRenderingContext2D.prototype.createImageData.call(undefined, 1, 1); }, TypeError);125 assert.throws(function() { CanvasRenderingContext2D.prototype.createImageData.call({}, 1, 1); }, TypeError);126 });127 it("2d.imageData.create1.this", function () {128 // createImageData(imgdata) should throw when called with the wrong |this|129 const canvas = createCanvas(100, 50);130 const ctx = canvas.getContext("2d");131 const t = new Test();132 var imgdata = ctx.createImageData(1, 1);133 assert.throws(function() { CanvasRenderingContext2D.prototype.createImageData.call(null, imgdata); }, TypeError);134 assert.throws(function() { CanvasRenderingContext2D.prototype.createImageData.call(undefined, imgdata); }, TypeError);135 assert.throws(function() { CanvasRenderingContext2D.prototype.createImageData.call({}, imgdata); }, TypeError);136 });137 it("2d.imageData.create2.initial", function () {138 // createImageData(sw, sh) returns transparent black data of the right size139 const canvas = createCanvas(100, 50);140 const ctx = canvas.getContext("2d");141 const t = new Test();142 var imgdata = ctx.createImageData(10, 20);143 assert.strictEqual(imgdata.data.length, imgdata.width*imgdata.height*4, "imgdata.data.length", "imgdata.width*imgdata.height*4")144 assert(imgdata.width < imgdata.height, "imgdata.width < imgdata.height");145 assert(imgdata.width > 0, "imgdata.width > 0");146 var isTransparentBlack = true;147 for (var i = 0; i < imgdata.data.length; ++i)148 if (imgdata.data[i] !== 0)149 isTransparentBlack = false;150 assert(isTransparentBlack, "isTransparentBlack");151 });152 it("2d.imageData.create1.initial", function () {153 // createImageData(imgdata) returns transparent black data of the right size154 const canvas = createCanvas(100, 50);155 const ctx = canvas.getContext("2d");156 const t = new Test();157 ctx.fillStyle = '#0f0';158 ctx.fillRect(0, 0, 100, 50);159 var imgdata1 = ctx.getImageData(0, 0, 10, 20);160 var imgdata2 = ctx.createImageData(imgdata1);161 assert.strictEqual(imgdata2.data.length, imgdata1.data.length, "imgdata2.data.length", "imgdata1.data.length")162 assert.strictEqual(imgdata2.width, imgdata1.width, "imgdata2.width", "imgdata1.width")163 assert.strictEqual(imgdata2.height, imgdata1.height, "imgdata2.height", "imgdata1.height")164 var isTransparentBlack = true;165 for (var i = 0; i < imgdata2.data.length; ++i)166 if (imgdata2.data[i] !== 0)167 isTransparentBlack = false;168 assert(isTransparentBlack, "isTransparentBlack");169 });170 it("2d.imageData.create2.large", function () {171 // createImageData(sw, sh) works for sizes much larger than the canvas172 const canvas = createCanvas(100, 50);173 const ctx = canvas.getContext("2d");174 const t = new Test();175 var imgdata = ctx.createImageData(1000, 2000);176 assert.strictEqual(imgdata.data.length, imgdata.width*imgdata.height*4, "imgdata.data.length", "imgdata.width*imgdata.height*4")177 assert(imgdata.width < imgdata.height, "imgdata.width < imgdata.height");178 assert(imgdata.width > 0, "imgdata.width > 0");179 var isTransparentBlack = true;180 for (var i = 0; i < imgdata.data.length; i += 7813) // check ~1024 points (assuming normal scaling)181 if (imgdata.data[i] !== 0)182 isTransparentBlack = false;183 assert(isTransparentBlack, "isTransparentBlack");184 });185 it.skip("2d.imageData.create2.negative", function () {186 // createImageData(sw, sh) takes the absolute magnitude of the size arguments187 const canvas = createCanvas(100, 50);188 const ctx = canvas.getContext("2d");189 const t = new Test();190 var imgdata1 = ctx.createImageData(10, 20);191 var imgdata2 = ctx.createImageData(-10, 20);192 var imgdata3 = ctx.createImageData(10, -20);193 var imgdata4 = ctx.createImageData(-10, -20);194 assert.strictEqual(imgdata1.data.length, imgdata2.data.length, "imgdata1.data.length", "imgdata2.data.length")195 assert.strictEqual(imgdata2.data.length, imgdata3.data.length, "imgdata2.data.length", "imgdata3.data.length")196 assert.strictEqual(imgdata3.data.length, imgdata4.data.length, "imgdata3.data.length", "imgdata4.data.length")197 });198 it.skip("2d.imageData.create2.zero", function () {199 // createImageData(sw, sh) throws INDEX_SIZE_ERR if size is zero200 const canvas = createCanvas(100, 50);201 const ctx = canvas.getContext("2d");202 const t = new Test();203 assert.throws(function() { ctx.createImageData(10, 0); }, /INDEX_SIZE_ERR/);204 assert.throws(function() { ctx.createImageData(0, 10); }, /INDEX_SIZE_ERR/);205 assert.throws(function() { ctx.createImageData(0, 0); }, /INDEX_SIZE_ERR/);206 assert.throws(function() { ctx.createImageData(0.99, 10); }, /INDEX_SIZE_ERR/);207 assert.throws(function() { ctx.createImageData(10, 0.1); }, /INDEX_SIZE_ERR/);208 });209 it.skip("2d.imageData.create2.nonfinite", function () {210 // createImageData() throws TypeError if arguments are not finite211 const canvas = createCanvas(100, 50);212 const ctx = canvas.getContext("2d");213 const t = new Test();214 assert.throws(function() { ctx.createImageData(Infinity, 10); }, TypeError);215 assert.throws(function() { ctx.createImageData(-Infinity, 10); }, TypeError);216 assert.throws(function() { ctx.createImageData(NaN, 10); }, TypeError);217 assert.throws(function() { ctx.createImageData(10, Infinity); }, TypeError);218 assert.throws(function() { ctx.createImageData(10, -Infinity); }, TypeError);219 assert.throws(function() { ctx.createImageData(10, NaN); }, TypeError);220 assert.throws(function() { ctx.createImageData(Infinity, Infinity); }, TypeError);221 var posinfobj = { valueOf: function() { return Infinity; } },222 neginfobj = { valueOf: function() { return -Infinity; } },223 nanobj = { valueOf: function() { return -Infinity; } };224 assert.throws(function() { ctx.createImageData(posinfobj, 10); }, TypeError);225 assert.throws(function() { ctx.createImageData(neginfobj, 10); }, TypeError);226 assert.throws(function() { ctx.createImageData(nanobj, 10); }, TypeError);227 assert.throws(function() { ctx.createImageData(10, posinfobj); }, TypeError);228 assert.throws(function() { ctx.createImageData(10, neginfobj); }, TypeError);229 assert.throws(function() { ctx.createImageData(10, nanobj); }, TypeError);230 assert.throws(function() { ctx.createImageData(posinfobj, posinfobj); }, TypeError);231 });232 it.skip("2d.imageData.create1.zero", function () {233 // createImageData(null) throws TypeError234 const canvas = createCanvas(100, 50);235 const ctx = canvas.getContext("2d");236 const t = new Test();237 assert.throws(function() { ctx.createImageData(null); }, TypeError);238 });239 it.skip("2d.imageData.create2.double", function () {240 // createImageData(w, h) double is converted to long241 const canvas = createCanvas(100, 50);242 const ctx = canvas.getContext("2d");243 const t = new Test();244 var imgdata1 = ctx.createImageData(10.01, 10.99);245 var imgdata2 = ctx.createImageData(-10.01, -10.99);246 assert.strictEqual(imgdata1.width, 10, "imgdata1.width", "10")247 assert.strictEqual(imgdata1.height, 10, "imgdata1.height", "10")248 assert.strictEqual(imgdata2.width, 10, "imgdata2.width", "10")249 assert.strictEqual(imgdata2.height, 10, "imgdata2.height", "10")250 });251 it("2d.imageData.create.and.resize", function () {252 // Verify no crash when resizing an image bitmap to zero.253 const canvas = createCanvas(100, 50);254 const ctx = canvas.getContext("2d");255 const t = new Test();256 var image = new Image();257 image.onload = t.step_func(function() {258 var options = { resizeHeight: 0 };259 var p1 = createImageBitmap(image, options);260 p1.catch(function(error){});261 t.done();262 });263 image.src = 'red.png';264 });265 it("2d.imageData.get.basic", function () {266 // getImageData() exists and returns something267 const canvas = createCanvas(100, 50);268 const ctx = canvas.getContext("2d");269 const t = new Test();270 assert.notStrictEqual(ctx.getImageData(0, 0, 100, 50), null, "ctx.getImageData(0, 0, 100, 50)", "null");271 });272 it("2d.imageData.get.type", function () {273 // getImageData() returns an ImageData object containing a Uint8ClampedArray object274 const canvas = createCanvas(100, 50);275 const ctx = canvas.getContext("2d");276 const t = new Test();277 assert.notStrictEqual(window.ImageData, undefined, "window.ImageData", "undefined");278 assert.notStrictEqual(window.Uint8ClampedArray, undefined, "window.Uint8ClampedArray", "undefined");279 window.ImageData.prototype.thisImplementsImageData = true;280 window.Uint8ClampedArray.prototype.thisImplementsUint8ClampedArray = true;281 var imgdata = ctx.getImageData(0, 0, 1, 1);282 assert(imgdata.thisImplementsImageData, "imgdata.thisImplementsImageData");283 assert(imgdata.data.thisImplementsUint8ClampedArray, "imgdata.data.thisImplementsUint8ClampedArray");284 });285 it("2d.imageData.get.zero", function () {286 // getImageData() throws INDEX_SIZE_ERR if size is zero287 const canvas = createCanvas(100, 50);288 const ctx = canvas.getContext("2d");289 const t = new Test();290 assert.throws(function() { ctx.getImageData(1, 1, 10, 0); }, /INDEX_SIZE_ERR/);291 assert.throws(function() { ctx.getImageData(1, 1, 0, 10); }, /INDEX_SIZE_ERR/);292 assert.throws(function() { ctx.getImageData(1, 1, 0, 0); }, /INDEX_SIZE_ERR/);293 assert.throws(function() { ctx.getImageData(1, 1, 0.1, 10); }, /INDEX_SIZE_ERR/);294 assert.throws(function() { ctx.getImageData(1, 1, 10, 0.99); }, /INDEX_SIZE_ERR/);295 assert.throws(function() { ctx.getImageData(1, 1, -0.1, 10); }, /INDEX_SIZE_ERR/);296 assert.throws(function() { ctx.getImageData(1, 1, 10, -0.99); }, /INDEX_SIZE_ERR/);297 });298 it("2d.imageData.get.nonfinite", function () {299 // getImageData() throws TypeError if arguments are not finite300 const canvas = createCanvas(100, 50);301 const ctx = canvas.getContext("2d");302 const t = new Test();303 assert.throws(function() { ctx.getImageData(Infinity, 10, 10, 10); }, TypeError);304 assert.throws(function() { ctx.getImageData(-Infinity, 10, 10, 10); }, TypeError);305 assert.throws(function() { ctx.getImageData(NaN, 10, 10, 10); }, TypeError);306 assert.throws(function() { ctx.getImageData(10, Infinity, 10, 10); }, TypeError);307 assert.throws(function() { ctx.getImageData(10, -Infinity, 10, 10); }, TypeError);308 assert.throws(function() { ctx.getImageData(10, NaN, 10, 10); }, TypeError);309 assert.throws(function() { ctx.getImageData(10, 10, Infinity, 10); }, TypeError);310 assert.throws(function() { ctx.getImageData(10, 10, -Infinity, 10); }, TypeError);311 assert.throws(function() { ctx.getImageData(10, 10, NaN, 10); }, TypeError);312 assert.throws(function() { ctx.getImageData(10, 10, 10, Infinity); }, TypeError);313 assert.throws(function() { ctx.getImageData(10, 10, 10, -Infinity); }, TypeError);314 assert.throws(function() { ctx.getImageData(10, 10, 10, NaN); }, TypeError);315 assert.throws(function() { ctx.getImageData(Infinity, Infinity, 10, 10); }, TypeError);316 assert.throws(function() { ctx.getImageData(Infinity, Infinity, Infinity, 10); }, TypeError);317 assert.throws(function() { ctx.getImageData(Infinity, Infinity, Infinity, Infinity); }, TypeError);318 assert.throws(function() { ctx.getImageData(Infinity, Infinity, 10, Infinity); }, TypeError);319 assert.throws(function() { ctx.getImageData(Infinity, 10, Infinity, 10); }, TypeError);320 assert.throws(function() { ctx.getImageData(Infinity, 10, Infinity, Infinity); }, TypeError);321 assert.throws(function() { ctx.getImageData(Infinity, 10, 10, Infinity); }, TypeError);322 assert.throws(function() { ctx.getImageData(10, Infinity, Infinity, 10); }, TypeError);323 assert.throws(function() { ctx.getImageData(10, Infinity, Infinity, Infinity); }, TypeError);324 assert.throws(function() { ctx.getImageData(10, Infinity, 10, Infinity); }, TypeError);325 assert.throws(function() { ctx.getImageData(10, 10, Infinity, Infinity); }, TypeError);326 var posinfobj = { valueOf: function() { return Infinity; } },327 neginfobj = { valueOf: function() { return -Infinity; } },328 nanobj = { valueOf: function() { return -Infinity; } };329 assert.throws(function() { ctx.getImageData(posinfobj, 10, 10, 10); }, TypeError);330 assert.throws(function() { ctx.getImageData(neginfobj, 10, 10, 10); }, TypeError);331 assert.throws(function() { ctx.getImageData(nanobj, 10, 10, 10); }, TypeError);332 assert.throws(function() { ctx.getImageData(10, posinfobj, 10, 10); }, TypeError);333 assert.throws(function() { ctx.getImageData(10, neginfobj, 10, 10); }, TypeError);334 assert.throws(function() { ctx.getImageData(10, nanobj, 10, 10); }, TypeError);335 assert.throws(function() { ctx.getImageData(10, 10, posinfobj, 10); }, TypeError);336 assert.throws(function() { ctx.getImageData(10, 10, neginfobj, 10); }, TypeError);337 assert.throws(function() { ctx.getImageData(10, 10, nanobj, 10); }, TypeError);338 assert.throws(function() { ctx.getImageData(10, 10, 10, posinfobj); }, TypeError);339 assert.throws(function() { ctx.getImageData(10, 10, 10, neginfobj); }, TypeError);340 assert.throws(function() { ctx.getImageData(10, 10, 10, nanobj); }, TypeError);341 assert.throws(function() { ctx.getImageData(posinfobj, posinfobj, 10, 10); }, TypeError);342 assert.throws(function() { ctx.getImageData(posinfobj, posinfobj, posinfobj, 10); }, TypeError);343 assert.throws(function() { ctx.getImageData(posinfobj, posinfobj, posinfobj, posinfobj); }, TypeError);344 assert.throws(function() { ctx.getImageData(posinfobj, posinfobj, 10, posinfobj); }, TypeError);345 assert.throws(function() { ctx.getImageData(posinfobj, 10, posinfobj, 10); }, TypeError);346 assert.throws(function() { ctx.getImageData(posinfobj, 10, posinfobj, posinfobj); }, TypeError);347 assert.throws(function() { ctx.getImageData(posinfobj, 10, 10, posinfobj); }, TypeError);348 assert.throws(function() { ctx.getImageData(10, posinfobj, posinfobj, 10); }, TypeError);349 assert.throws(function() { ctx.getImageData(10, posinfobj, posinfobj, posinfobj); }, TypeError);350 assert.throws(function() { ctx.getImageData(10, posinfobj, 10, posinfobj); }, TypeError);351 assert.throws(function() { ctx.getImageData(10, 10, posinfobj, posinfobj); }, TypeError);352 });353 it.skip("2d.imageData.get.source.outside", function () {354 // getImageData() returns transparent black outside the canvas355 const canvas = createCanvas(100, 50);356 const ctx = canvas.getContext("2d");357 const t = new Test();358 ctx.fillStyle = '#08f';359 ctx.fillRect(0, 0, 100, 50);360 361 var imgdata1 = ctx.getImageData(-10, 5, 1, 1);362 assert.strictEqual(imgdata1.data[0], 0, "imgdata1.data[\""+(0)+"\"]", "0")363 assert.strictEqual(imgdata1.data[1], 0, "imgdata1.data[\""+(1)+"\"]", "0")364 assert.strictEqual(imgdata1.data[2], 0, "imgdata1.data[\""+(2)+"\"]", "0")365 assert.strictEqual(imgdata1.data[3], 0, "imgdata1.data[\""+(3)+"\"]", "0")366 367 var imgdata2 = ctx.getImageData(10, -5, 1, 1);368 assert.strictEqual(imgdata2.data[0], 0, "imgdata2.data[\""+(0)+"\"]", "0")369 assert.strictEqual(imgdata2.data[1], 0, "imgdata2.data[\""+(1)+"\"]", "0")370 assert.strictEqual(imgdata2.data[2], 0, "imgdata2.data[\""+(2)+"\"]", "0")371 assert.strictEqual(imgdata2.data[3], 0, "imgdata2.data[\""+(3)+"\"]", "0")372 373 var imgdata3 = ctx.getImageData(200, 5, 1, 1);374 assert.strictEqual(imgdata3.data[0], 0, "imgdata3.data[\""+(0)+"\"]", "0")375 assert.strictEqual(imgdata3.data[1], 0, "imgdata3.data[\""+(1)+"\"]", "0")376 assert.strictEqual(imgdata3.data[2], 0, "imgdata3.data[\""+(2)+"\"]", "0")377 assert.strictEqual(imgdata3.data[3], 0, "imgdata3.data[\""+(3)+"\"]", "0")378 379 var imgdata4 = ctx.getImageData(10, 60, 1, 1);380 assert.strictEqual(imgdata4.data[0], 0, "imgdata4.data[\""+(0)+"\"]", "0")381 assert.strictEqual(imgdata4.data[1], 0, "imgdata4.data[\""+(1)+"\"]", "0")382 assert.strictEqual(imgdata4.data[2], 0, "imgdata4.data[\""+(2)+"\"]", "0")383 assert.strictEqual(imgdata4.data[3], 0, "imgdata4.data[\""+(3)+"\"]", "0")384 385 var imgdata5 = ctx.getImageData(100, 10, 1, 1);386 assert.strictEqual(imgdata5.data[0], 0, "imgdata5.data[\""+(0)+"\"]", "0")387 assert.strictEqual(imgdata5.data[1], 0, "imgdata5.data[\""+(1)+"\"]", "0")388 assert.strictEqual(imgdata5.data[2], 0, "imgdata5.data[\""+(2)+"\"]", "0")389 assert.strictEqual(imgdata5.data[3], 0, "imgdata5.data[\""+(3)+"\"]", "0")390 391 var imgdata6 = ctx.getImageData(0, 10, 1, 1);392 assert.strictEqual(imgdata6.data[0], 0, "imgdata6.data[\""+(0)+"\"]", "0")393 assert.strictEqual(imgdata6.data[1], 136, "imgdata6.data[\""+(1)+"\"]", "136")394 assert.strictEqual(imgdata6.data[2], 255, "imgdata6.data[\""+(2)+"\"]", "255")395 assert.strictEqual(imgdata6.data[3], 255, "imgdata6.data[\""+(3)+"\"]", "255")396 397 var imgdata7 = ctx.getImageData(-10, 10, 20, 20);398 assert.strictEqual(imgdata7.data[ 0*4+0], 0, "imgdata7.data[ 0*4+0]", "0")399 assert.strictEqual(imgdata7.data[ 0*4+1], 0, "imgdata7.data[ 0*4+1]", "0")400 assert.strictEqual(imgdata7.data[ 0*4+2], 0, "imgdata7.data[ 0*4+2]", "0")401 assert.strictEqual(imgdata7.data[ 0*4+3], 0, "imgdata7.data[ 0*4+3]", "0")402 assert.strictEqual(imgdata7.data[ 9*4+0], 0, "imgdata7.data[ 9*4+0]", "0")403 assert.strictEqual(imgdata7.data[ 9*4+1], 0, "imgdata7.data[ 9*4+1]", "0")404 assert.strictEqual(imgdata7.data[ 9*4+2], 0, "imgdata7.data[ 9*4+2]", "0")405 assert.strictEqual(imgdata7.data[ 9*4+3], 0, "imgdata7.data[ 9*4+3]", "0")406 assert.strictEqual(imgdata7.data[10*4+0], 0, "imgdata7.data[10*4+0]", "0")407 assert.strictEqual(imgdata7.data[10*4+1], 136, "imgdata7.data[10*4+1]", "136")408 assert.strictEqual(imgdata7.data[10*4+2], 255, "imgdata7.data[10*4+2]", "255")409 assert.strictEqual(imgdata7.data[10*4+3], 255, "imgdata7.data[10*4+3]", "255")410 assert.strictEqual(imgdata7.data[19*4+0], 0, "imgdata7.data[19*4+0]", "0")411 assert.strictEqual(imgdata7.data[19*4+1], 136, "imgdata7.data[19*4+1]", "136")412 assert.strictEqual(imgdata7.data[19*4+2], 255, "imgdata7.data[19*4+2]", "255")413 assert.strictEqual(imgdata7.data[19*4+3], 255, "imgdata7.data[19*4+3]", "255")414 assert.strictEqual(imgdata7.data[20*4+0], 0, "imgdata7.data[20*4+0]", "0")415 assert.strictEqual(imgdata7.data[20*4+1], 0, "imgdata7.data[20*4+1]", "0")416 assert.strictEqual(imgdata7.data[20*4+2], 0, "imgdata7.data[20*4+2]", "0")417 assert.strictEqual(imgdata7.data[20*4+3], 0, "imgdata7.data[20*4+3]", "0")418 });419 it.skip("2d.imageData.get.source.negative", function () {420 // getImageData() works with negative width and height, and returns top-to-bottom left-to-right421 const canvas = createCanvas(100, 50);422 const ctx = canvas.getContext("2d");423 const t = new Test();424 ctx.fillStyle = '#000';425 ctx.fillRect(0, 0, 100, 50);426 ctx.fillStyle = '#fff';427 ctx.fillRect(20, 10, 60, 10);428 429 var imgdata1 = ctx.getImageData(85, 25, -10, -10);430 assert.strictEqual(imgdata1.data[0], 255, "imgdata1.data[\""+(0)+"\"]", "255")431 assert.strictEqual(imgdata1.data[1], 255, "imgdata1.data[\""+(1)+"\"]", "255")432 assert.strictEqual(imgdata1.data[2], 255, "imgdata1.data[\""+(2)+"\"]", "255")433 assert.strictEqual(imgdata1.data[3], 255, "imgdata1.data[\""+(3)+"\"]", "255")434 assert.strictEqual(imgdata1.data[imgdata1.data.length-4+0], 0, "imgdata1.data[imgdata1.data.length-4+0]", "0")435 assert.strictEqual(imgdata1.data[imgdata1.data.length-4+1], 0, "imgdata1.data[imgdata1.data.length-4+1]", "0")436 assert.strictEqual(imgdata1.data[imgdata1.data.length-4+2], 0, "imgdata1.data[imgdata1.data.length-4+2]", "0")437 assert.strictEqual(imgdata1.data[imgdata1.data.length-4+3], 255, "imgdata1.data[imgdata1.data.length-4+3]", "255")438 439 var imgdata2 = ctx.getImageData(0, 0, -1, -1);440 assert.strictEqual(imgdata2.data[0], 0, "imgdata2.data[\""+(0)+"\"]", "0")441 assert.strictEqual(imgdata2.data[1], 0, "imgdata2.data[\""+(1)+"\"]", "0")442 assert.strictEqual(imgdata2.data[2], 0, "imgdata2.data[\""+(2)+"\"]", "0")443 assert.strictEqual(imgdata2.data[3], 0, "imgdata2.data[\""+(3)+"\"]", "0")444 });445 it("2d.imageData.get.source.size", function () {446 // getImageData() returns bigger ImageData for bigger source rectangle447 const canvas = createCanvas(100, 50);448 const ctx = canvas.getContext("2d");449 const t = new Test();450 var imgdata1 = ctx.getImageData(0, 0, 10, 10);451 var imgdata2 = ctx.getImageData(0, 0, 20, 20);452 assert(imgdata2.width > imgdata1.width, "imgdata2.width > imgdata1.width");453 assert(imgdata2.height > imgdata1.height, "imgdata2.height > imgdata1.height");454 });455 it.skip("2d.imageData.get.double", function () {456 // createImageData(w, h) double is converted to long457 const canvas = createCanvas(100, 50);458 const ctx = canvas.getContext("2d");459 const t = new Test();460 var imgdata1 = ctx.getImageData(0, 0, 10.01, 10.99);461 var imgdata2 = ctx.getImageData(0, 0, -10.01, -10.99);462 assert.strictEqual(imgdata1.width, 10, "imgdata1.width", "10")463 assert.strictEqual(imgdata1.height, 10, "imgdata1.height", "10")464 assert.strictEqual(imgdata2.width, 10, "imgdata2.width", "10")465 assert.strictEqual(imgdata2.height, 10, "imgdata2.height", "10")466 });467 it("2d.imageData.get.nonpremul", function () {468 // getImageData() returns non-premultiplied colors469 const canvas = createCanvas(100, 50);470 const ctx = canvas.getContext("2d");471 const t = new Test();472 ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';473 ctx.fillRect(0, 0, 100, 50);474 var imgdata = ctx.getImageData(10, 10, 10, 10);475 assert(imgdata.data[0] > 200, "imgdata.data[\""+(0)+"\"] > 200");476 assert(imgdata.data[1] > 200, "imgdata.data[\""+(1)+"\"] > 200");477 assert(imgdata.data[2] > 200, "imgdata.data[\""+(2)+"\"] > 200");478 assert(imgdata.data[3] > 100, "imgdata.data[\""+(3)+"\"] > 100");479 assert(imgdata.data[3] < 200, "imgdata.data[\""+(3)+"\"] < 200");480 });481 it("2d.imageData.get.range", function () {482 // getImageData() returns values in the range [0, 255]483 const canvas = createCanvas(100, 50);484 const ctx = canvas.getContext("2d");485 const t = new Test();486 ctx.fillStyle = '#000';487 ctx.fillRect(0, 0, 100, 50);488 ctx.fillStyle = '#fff';489 ctx.fillRect(20, 10, 60, 10);490 var imgdata1 = ctx.getImageData(10, 5, 1, 1);491 assert.strictEqual(imgdata1.data[0], 0, "imgdata1.data[\""+(0)+"\"]", "0")492 var imgdata2 = ctx.getImageData(30, 15, 1, 1);493 assert.strictEqual(imgdata2.data[0], 255, "imgdata2.data[\""+(0)+"\"]", "255")494 });495 it("2d.imageData.get.clamp", function () {496 // getImageData() clamps colors to the range [0, 255]497 const canvas = createCanvas(100, 50);498 const ctx = canvas.getContext("2d");499 const t = new Test();500 ctx.fillStyle = 'rgb(-100, -200, -300)';501 ctx.fillRect(0, 0, 100, 50);502 ctx.fillStyle = 'rgb(256, 300, 400)';503 ctx.fillRect(20, 10, 60, 10);504 var imgdata1 = ctx.getImageData(10, 5, 1, 1);505 assert.strictEqual(imgdata1.data[0], 0, "imgdata1.data[\""+(0)+"\"]", "0")506 assert.strictEqual(imgdata1.data[1], 0, "imgdata1.data[\""+(1)+"\"]", "0")507 assert.strictEqual(imgdata1.data[2], 0, "imgdata1.data[\""+(2)+"\"]", "0")508 var imgdata2 = ctx.getImageData(30, 15, 1, 1);509 assert.strictEqual(imgdata2.data[0], 255, "imgdata2.data[\""+(0)+"\"]", "255")510 assert.strictEqual(imgdata2.data[1], 255, "imgdata2.data[\""+(1)+"\"]", "255")511 assert.strictEqual(imgdata2.data[2], 255, "imgdata2.data[\""+(2)+"\"]", "255")512 });513 it("2d.imageData.get.length", function () {514 // getImageData() returns a correctly-sized Uint8ClampedArray515 const canvas = createCanvas(100, 50);516 const ctx = canvas.getContext("2d");517 const t = new Test();518 var imgdata = ctx.getImageData(0, 0, 10, 10);519 assert.strictEqual(imgdata.data.length, imgdata.width*imgdata.height*4, "imgdata.data.length", "imgdata.width*imgdata.height*4")520 });521 it("2d.imageData.get.order.cols", function () {522 // getImageData() returns leftmost columns first523 const canvas = createCanvas(100, 50);524 const ctx = canvas.getContext("2d");525 const t = new Test();526 ctx.fillStyle = '#fff';527 ctx.fillRect(0, 0, 100, 50);528 ctx.fillStyle = '#000';529 ctx.fillRect(0, 0, 2, 50);530 var imgdata = ctx.getImageData(0, 0, 10, 10);531 assert.strictEqual(imgdata.data[0], 0, "imgdata.data[\""+(0)+"\"]", "0")532 assert.strictEqual(imgdata.data[Math.round(imgdata.width/2*4)], 255, "imgdata.data[Math.round(imgdata.width/2*4)]", "255")533 assert.strictEqual(imgdata.data[Math.round((imgdata.height/2)*imgdata.width*4)], 0, "imgdata.data[Math.round((imgdata.height/2)*imgdata.width*4)]", "0")534 });535 it("2d.imageData.get.order.rows", function () {536 // getImageData() returns topmost rows first537 const canvas = createCanvas(100, 50);538 const ctx = canvas.getContext("2d");539 const t = new Test();540 ctx.fillStyle = '#fff';541 ctx.fillRect(0, 0, 100, 50);542 ctx.fillStyle = '#000';543 ctx.fillRect(0, 0, 100, 2);544 var imgdata = ctx.getImageData(0, 0, 10, 10);545 assert.strictEqual(imgdata.data[0], 0, "imgdata.data[\""+(0)+"\"]", "0")546 assert.strictEqual(imgdata.data[Math.floor(imgdata.width/2*4)], 0, "imgdata.data[Math.floor(imgdata.width/2*4)]", "0")547 assert.strictEqual(imgdata.data[(imgdata.height/2)*imgdata.width*4], 255, "imgdata.data[(imgdata.height/2)*imgdata.width*4]", "255")548 });549 it("2d.imageData.get.order.rgb", function () {550 // getImageData() returns R then G then B551 const canvas = createCanvas(100, 50);552 const ctx = canvas.getContext("2d");553 const t = new Test();554 ctx.fillStyle = '#48c';555 ctx.fillRect(0, 0, 100, 50);556 var imgdata = ctx.getImageData(0, 0, 10, 10);557 assert.strictEqual(imgdata.data[0], 0x44, "imgdata.data[\""+(0)+"\"]", "0x44")558 assert.strictEqual(imgdata.data[1], 0x88, "imgdata.data[\""+(1)+"\"]", "0x88")559 assert.strictEqual(imgdata.data[2], 0xCC, "imgdata.data[\""+(2)+"\"]", "0xCC")560 assert.strictEqual(imgdata.data[3], 255, "imgdata.data[\""+(3)+"\"]", "255")561 assert.strictEqual(imgdata.data[4], 0x44, "imgdata.data[\""+(4)+"\"]", "0x44")562 assert.strictEqual(imgdata.data[5], 0x88, "imgdata.data[\""+(5)+"\"]", "0x88")563 assert.strictEqual(imgdata.data[6], 0xCC, "imgdata.data[\""+(6)+"\"]", "0xCC")564 assert.strictEqual(imgdata.data[7], 255, "imgdata.data[\""+(7)+"\"]", "255")565 });566 it("2d.imageData.get.order.alpha", function () {567 // getImageData() returns A in the fourth component568 const canvas = createCanvas(100, 50);569 const ctx = canvas.getContext("2d");570 const t = new Test();571 ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';572 ctx.fillRect(0, 0, 100, 50);573 var imgdata = ctx.getImageData(0, 0, 10, 10);574 assert(imgdata.data[3] < 200, "imgdata.data[\""+(3)+"\"] < 200");575 assert(imgdata.data[3] > 100, "imgdata.data[\""+(3)+"\"] > 100");576 });577 it("2d.imageData.get.unaffected", function () {578 // getImageData() is not affected by context state579 const canvas = createCanvas(100, 50);580 const ctx = canvas.getContext("2d");581 const t = new Test();582 ctx.fillStyle = '#0f0';583 ctx.fillRect(0, 0, 50, 50)584 ctx.fillStyle = '#f00';585 ctx.fillRect(50, 0, 50, 50)586 ctx.save();587 ctx.translate(50, 0);588 ctx.globalAlpha = 0.1;589 ctx.globalCompositeOperation = 'destination-atop';590 ctx.shadowColor = '#f00';591 ctx.rect(0, 0, 5, 5);592 ctx.clip();593 var imgdata = ctx.getImageData(0, 0, 50, 50);594 ctx.restore();595 ctx.putImageData(imgdata, 50, 0);596 _assertPixelApprox(canvas, 25,25, 0,255,0,255);597 _assertPixelApprox(canvas, 75,25, 0,255,0,255);598 });599 it.skip("2d.imageData.get.large.crash", function () {600 // Test that canvas crash when image data cannot be allocated.601 const canvas = createCanvas(100, 50);602 const ctx = canvas.getContext("2d");603 const t = new Test();604 assert.throws(function() { ctx.getImageData(10, 0xffffffff, 2147483647, 10); }, TypeError);605 });606 it("2d.imageData.get.rounding", function () {607 // Test the handling of non-integer source coordinates in getImageData().608 const canvas = createCanvas(100, 50);609 const ctx = canvas.getContext("2d");610 const t = new Test();611 function testDimensions(sx, sy, sw, sh, width, height)612 {613 imageData = ctx.getImageData(sx, sy, sw, sh);614 assert(imageData.width == width, "imageData.width == width");615 assert(imageData.height == height, "imageData.height == height");616 }617 618 testDimensions(0, 0, 20, 10, 20, 10);619 620 testDimensions(.1, .2, 20, 10, 20, 10);621 testDimensions(.9, .8, 20, 10, 20, 10);622 623 testDimensions(0, 0, 20.9, 10.9, 20, 10);624 testDimensions(0, 0, 20.1, 10.1, 20, 10);625 626 testDimensions(-1, -1, 20, 10, 20, 10);627 628 testDimensions(-1.1, 0, 20, 10, 20, 10);629 testDimensions(-1.9, 0, 20, 10, 20, 10);630 });631 it("2d.imageData.get.invalid", function () {632 // Verify getImageData() behavior in invalid cases.633 const canvas = createCanvas(100, 50);634 const ctx = canvas.getContext("2d");635 const t = new Test();636 imageData = ctx.getImageData(0,0,2,2);637 var testValues = [NaN, true, false, "\"garbage\"", "-1",638 "0", "1", "2", Infinity, -Infinity,639 -5, -0.5, 0, 0.5, 5,640 5.4, 255, 256, null, undefined];641 var testResults = [0, 1, 0, 0, 0,642 0, 1, 2, 255, 0,643 0, 0, 0, 0, 5,644 5, 255, 255, 0, 0];645 for (var i = 0; i < testValues.length; i++) {646 imageData.data[0] = testValues[i];647 assert(imageData.data[0] == testResults[i], "imageData.data[\""+(0)+"\"] == testResults[\""+(i)+"\"]");648 }649 imageData.data['foo']='garbage';650 assert(imageData.data['foo'] == 'garbage', "imageData.data['foo'] == 'garbage'");651 imageData.data[-1]='garbage';652 assert(imageData.data[-1] == undefined, "imageData.data[-1] == undefined");653 imageData.data[17]='garbage';654 assert(imageData.data[17] == undefined, "imageData.data[\""+(17)+"\"] == undefined");655 });656 it("2d.imageData.object.properties", function () {657 // ImageData objects have the right properties658 const canvas = createCanvas(100, 50);659 const ctx = canvas.getContext("2d");660 const t = new Test();661 var imgdata = ctx.getImageData(0, 0, 10, 10);662 assert.strictEqual(typeof(imgdata.width), 'number', "typeof(imgdata.width)", "'number'")663 assert.strictEqual(typeof(imgdata.height), 'number', "typeof(imgdata.height)", "'number'")664 assert.strictEqual(typeof(imgdata.data), 'object', "typeof(imgdata.data)", "'object'")665 });666 it("2d.imageData.object.readonly", function () {667 // ImageData objects properties are read-only668 const canvas = createCanvas(100, 50);669 const ctx = canvas.getContext("2d");670 const t = new Test();671 var imgdata = ctx.getImageData(0, 0, 10, 10);672 var w = imgdata.width;673 var h = imgdata.height;674 var d = imgdata.data;675 imgdata.width = 123;676 imgdata.height = 123;677 imgdata.data = [100,100,100,100];678 assert.strictEqual(imgdata.width, w, "imgdata.width", "w")679 assert.strictEqual(imgdata.height, h, "imgdata.height", "h")680 assert.strictEqual(imgdata.data, d, "imgdata.data", "d")681 assert.strictEqual(imgdata.data[0], 0, "imgdata.data[\""+(0)+"\"]", "0")682 assert.strictEqual(imgdata.data[1], 0, "imgdata.data[\""+(1)+"\"]", "0")683 assert.strictEqual(imgdata.data[2], 0, "imgdata.data[\""+(2)+"\"]", "0")684 assert.strictEqual(imgdata.data[3], 0, "imgdata.data[\""+(3)+"\"]", "0")685 });686 it("2d.imageData.object.ctor.size", function () {687 // ImageData has a usable constructor688 const canvas = createCanvas(100, 50);689 const ctx = canvas.getContext("2d");690 const t = new Test();691 assert.notStrictEqual(window.ImageData, undefined, "window.ImageData", "undefined");692 693 var imgdata = new window.ImageData(2, 3);694 assert.strictEqual(imgdata.width, 2, "imgdata.width", "2")695 assert.strictEqual(imgdata.height, 3, "imgdata.height", "3")696 assert.strictEqual(imgdata.data.length, 2 * 3 * 4, "imgdata.data.length", "2 * 3 * 4")697 for (var i = 0; i < imgdata.data.length; ++i) {698 assert.strictEqual(imgdata.data[i], 0, "imgdata.data[\""+(i)+"\"]", "0")699 }700 });701 it("2d.imageData.object.ctor.basics", function () {702 // Testing different type of ImageData constructor703 const canvas = createCanvas(100, 50);704 const ctx = canvas.getContext("2d");705 const t = new Test();706 function setRGBA(imageData, i, rgba)707 {708 var s = i * 4;709 imageData[s] = rgba[0];710 imageData[s + 1] = rgba[1];711 imageData[s + 2] = rgba[2];712 imageData[s + 3] = rgba[3];713 }714 715 function getRGBA(imageData, i)716 {717 var result = [];718 var s = i * 4;719 for (var j = 0; j < 4; j++) {720 result[j] = imageData[s + j];721 }722 return result;723 }724 725 function assertArrayEquals(actual, expected)726 {727 assert.strictEqual(typeof actual, "object", "typeof actual", "\"object\"")728 assert.notStrictEqual(actual, null, "actual", "null");729 assert.strictEqual("length" in actual, true, "\"length\" in actual", "true")730 assert.strictEqual(actual.length, expected.length, "actual.length", "expected.length")731 for (var i = 0; i < actual.length; i++) {732 assert.strictEqual(actual.hasOwnProperty(i), expected.hasOwnProperty(i), "actual.hasOwnProperty(i)", "expected.hasOwnProperty(i)")733 assert.strictEqual(actual[i], expected[i], "actual[\""+(i)+"\"]", "expected[\""+(i)+"\"]")734 }735 }736 737 assert.notStrictEqual(ImageData, undefined, "ImageData", "undefined");738 imageData = new ImageData(100, 50);739 740 assert.notStrictEqual(imageData, null, "imageData", "null");741 assert.notStrictEqual(imageData.data, null, "imageData.data", "null");742 assert.strictEqual(imageData.width, 100, "imageData.width", "100")743 assert.strictEqual(imageData.height, 50, "imageData.height", "50")744 assertArrayEquals(getRGBA(imageData.data, 4), [0, 0, 0, 0]);745 746 var testColor = [0, 255, 255, 128];747 setRGBA(imageData.data, 4, testColor);748 assertArrayEquals(getRGBA(imageData.data, 4), testColor);749 750 assert.throws(function() { new ImageData(10); }, TypeError);751 assert.throws(function() { new ImageData(0, 10); }, /INDEX_SIZE_ERR/);752 assert.throws(function() { new ImageData(10, 0); }, /INDEX_SIZE_ERR/);753 assert.throws(function() { new ImageData('width', 'height'); }, /INDEX_SIZE_ERR/);754 assert.throws(function() { new ImageData(1 << 31, 1 << 31); }, /INDEX_SIZE_ERR/);755 assert.throws(function() { new ImageData(new Uint8ClampedArray(0)); }, TypeError);756 assert.throws(function() { new ImageData(new Uint8Array(100), 25); }, /INDEX_SIZE_ERR/);757 assert.throws(function() { new ImageData(new Uint8ClampedArray(27), 2); }, /INVALID_STATE_ERR/);758 assert.throws(function() { new ImageData(new Uint8ClampedArray(28), 7, 0); }, /INDEX_SIZE_ERR/);759 assert.throws(function() { new ImageData(new Uint8ClampedArray(104), 14); }, /INDEX_SIZE_ERR/);760 assert.throws(function() { new ImageData(new Uint8ClampedArray([12, 34, 168, 65328]), 1, 151); }, /INDEX_SIZE_ERR/);761 assert.throws(function() { new ImageData(self, 4, 4); }, TypeError);762 assert.throws(function() { new ImageData(null, 4, 4); }, TypeError);763 assert.throws(function() { new ImageData(imageData.data, 0); }, /INDEX_SIZE_ERR/);764 assert.throws(function() { new ImageData(imageData.data, 13); }, /INDEX_SIZE_ERR/);765 assert.throws(function() { new ImageData(imageData.data, 1 << 31); }, /INDEX_SIZE_ERR/);766 assert.throws(function() { new ImageData(imageData.data, 'biggish'); }, /INDEX_SIZE_ERR/);767 assert.throws(function() { new ImageData(imageData.data, 1 << 24, 1 << 31); }, /INDEX_SIZE_ERR/);768 assert.strictEqual(new ImageData(new Uint8ClampedArray(28), 7).height, 1, "new ImageData(new Uint8ClampedArray(28), 7).height", "1")769 770 imageDataFromData = new ImageData(imageData.data, 100);771 assert.strictEqual(imageDataFromData.width, 100, "imageDataFromData.width", "100")772 assert.strictEqual(imageDataFromData.height, 50, "imageDataFromData.height", "50")773 assert.strictEqual(imageDataFromData.data, imageData.data, "imageDataFromData.data", "imageData.data")774 assertArrayEquals(getRGBA(imageDataFromData.data, 10), getRGBA(imageData.data, 10));775 setRGBA(imageData.data, 10, testColor);776 assertArrayEquals(getRGBA(imageDataFromData.data, 10), getRGBA(imageData.data, 10));777 778 var data = new Uint8ClampedArray(400);779 data[22] = 129;780 imageDataFromData = new ImageData(data, 20, 5);781 assert.strictEqual(imageDataFromData.width, 20, "imageDataFromData.width", "20")782 assert.strictEqual(imageDataFromData.height, 5, "imageDataFromData.height", "5")783 assert.strictEqual(imageDataFromData.data, data, "imageDataFromData.data", "data")784 assertArrayEquals(getRGBA(imageDataFromData.data, 2), getRGBA(data, 2));785 setRGBA(imageDataFromData.data, 2, testColor);786 assertArrayEquals(getRGBA(imageDataFromData.data, 2), getRGBA(data, 2));787 788 if (window.SharedArrayBuffer) {789 assert.throws(function() { new ImageData(new Uint16Array(new SharedArrayBuffer(32)), 4, 2); }, TypeError);790 }791 });792 it("2d.imageData.object.ctor.array", function () {793 // ImageData has a usable constructor794 const canvas = createCanvas(100, 50);795 const ctx = canvas.getContext("2d");796 const t = new Test();797 assert.notStrictEqual(window.ImageData, undefined, "window.ImageData", "undefined");798 799 var array = new Uint8ClampedArray(8);800 var imgdata = new window.ImageData(array, 1, 2);801 assert.strictEqual(imgdata.width, 1, "imgdata.width", "1")802 assert.strictEqual(imgdata.height, 2, "imgdata.height", "2")803 assert.strictEqual(imgdata.data, array, "imgdata.data", "array")804 });805 it("2d.imageData.object.ctor.array.bounds", function () {806 // ImageData has a usable constructor807 const canvas = createCanvas(100, 50);808 const ctx = canvas.getContext("2d");809 const t = new Test();810 assert.notStrictEqual(window.ImageData, undefined, "window.ImageData", "undefined");811 812 assert.throws(function() { new ImageData(new Uint8ClampedArray(0), 1); }, /INVALID_STATE_ERR/);813 assert.throws(function() { new ImageData(new Uint8ClampedArray(3), 1); }, /INVALID_STATE_ERR/);814 assert.throws(function() { new ImageData(new Uint8ClampedArray(4), 0); }, /INDEX_SIZE_ERR/);815 assert.throws(function() { new ImageData(new Uint8ClampedArray(4), 1, 2); }, /INDEX_SIZE_ERR/);816 assert.throws(function() { new ImageData(new Uint8Array(8), 1, 2); }, TypeError);817 assert.throws(function() { new ImageData(new Int8Array(8), 1, 2); }, TypeError);818 });819 it("2d.imageData.object.set", function () {820 // ImageData.data can be modified821 const canvas = createCanvas(100, 50);822 const ctx = canvas.getContext("2d");823 const t = new Test();824 var imgdata = ctx.getImageData(0, 0, 10, 10);825 imgdata.data[0] = 100;826 assert.strictEqual(imgdata.data[0], 100, "imgdata.data[\""+(0)+"\"]", "100")827 imgdata.data[0] = 200;828 assert.strictEqual(imgdata.data[0], 200, "imgdata.data[\""+(0)+"\"]", "200")829 });830 it("2d.imageData.object.undefined", function () {831 // ImageData.data converts undefined to 0832 const canvas = createCanvas(100, 50);833 const ctx = canvas.getContext("2d");834 const t = new Test();835 var imgdata = ctx.getImageData(0, 0, 10, 10);836 imgdata.data[0] = 100;837 imgdata.data[0] = undefined;838 assert.strictEqual(imgdata.data[0], 0, "imgdata.data[\""+(0)+"\"]", "0")839 });840 it("2d.imageData.object.nan", function () {841 // ImageData.data converts NaN to 0842 const canvas = createCanvas(100, 50);843 const ctx = canvas.getContext("2d");844 const t = new Test();845 var imgdata = ctx.getImageData(0, 0, 10, 10);846 imgdata.data[0] = 100;847 imgdata.data[0] = NaN;848 assert.strictEqual(imgdata.data[0], 0, "imgdata.data[\""+(0)+"\"]", "0")849 imgdata.data[0] = 100;850 imgdata.data[0] = "cheese";851 assert.strictEqual(imgdata.data[0], 0, "imgdata.data[\""+(0)+"\"]", "0")852 });853 it("2d.imageData.object.string", function () {854 // ImageData.data converts strings to numbers with ToNumber855 const canvas = createCanvas(100, 50);856 const ctx = canvas.getContext("2d");857 const t = new Test();858 var imgdata = ctx.getImageData(0, 0, 10, 10);859 imgdata.data[0] = 100;860 imgdata.data[0] = "110";861 assert.strictEqual(imgdata.data[0], 110, "imgdata.data[\""+(0)+"\"]", "110")862 imgdata.data[0] = 100;863 imgdata.data[0] = "0x78";864 assert.strictEqual(imgdata.data[0], 120, "imgdata.data[\""+(0)+"\"]", "120")865 imgdata.data[0] = 100;866 imgdata.data[0] = " +130e0 ";867 assert.strictEqual(imgdata.data[0], 130, "imgdata.data[\""+(0)+"\"]", "130")868 });869 it("2d.imageData.object.clamp", function () {870 // ImageData.data clamps numbers to [0, 255]871 const canvas = createCanvas(100, 50);872 const ctx = canvas.getContext("2d");873 const t = new Test();874 var imgdata = ctx.getImageData(0, 0, 10, 10);875 876 imgdata.data[0] = 100;877 imgdata.data[0] = 300;878 assert.strictEqual(imgdata.data[0], 255, "imgdata.data[\""+(0)+"\"]", "255")879 imgdata.data[0] = 100;880 imgdata.data[0] = -100;881 assert.strictEqual(imgdata.data[0], 0, "imgdata.data[\""+(0)+"\"]", "0")882 883 imgdata.data[0] = 100;884 imgdata.data[0] = 200+Math.pow(2, 32);885 assert.strictEqual(imgdata.data[0], 255, "imgdata.data[\""+(0)+"\"]", "255")886 imgdata.data[0] = 100;887 imgdata.data[0] = -200-Math.pow(2, 32);888 assert.strictEqual(imgdata.data[0], 0, "imgdata.data[\""+(0)+"\"]", "0")889 890 imgdata.data[0] = 100;891 imgdata.data[0] = Math.pow(10, 39);892 assert.strictEqual(imgdata.data[0], 255, "imgdata.data[\""+(0)+"\"]", "255")893 imgdata.data[0] = 100;894 imgdata.data[0] = -Math.pow(10, 39);895 assert.strictEqual(imgdata.data[0], 0, "imgdata.data[\""+(0)+"\"]", "0")896 897 imgdata.data[0] = 100;898 imgdata.data[0] = -Infinity;899 assert.strictEqual(imgdata.data[0], 0, "imgdata.data[\""+(0)+"\"]", "0")900 imgdata.data[0] = 100;901 imgdata.data[0] = Infinity;902 assert.strictEqual(imgdata.data[0], 255, "imgdata.data[\""+(0)+"\"]", "255")903 });904 it("2d.imageData.object.round", function () {905 // ImageData.data rounds numbers with round-to-zero906 const canvas = createCanvas(100, 50);907 const ctx = canvas.getContext("2d");908 const t = new Test();909 var imgdata = ctx.getImageData(0, 0, 10, 10);910 imgdata.data[0] = 0.499;911 assert.strictEqual(imgdata.data[0], 0, "imgdata.data[\""+(0)+"\"]", "0")912 imgdata.data[0] = 0.5;913 assert.strictEqual(imgdata.data[0], 0, "imgdata.data[\""+(0)+"\"]", "0")914 imgdata.data[0] = 0.501;915 assert.strictEqual(imgdata.data[0], 1, "imgdata.data[\""+(0)+"\"]", "1")916 imgdata.data[0] = 1.499;917 assert.strictEqual(imgdata.data[0], 1, "imgdata.data[\""+(0)+"\"]", "1")918 imgdata.data[0] = 1.5;919 assert.strictEqual(imgdata.data[0], 2, "imgdata.data[\""+(0)+"\"]", "2")920 imgdata.data[0] = 1.501;921 assert.strictEqual(imgdata.data[0], 2, "imgdata.data[\""+(0)+"\"]", "2")922 imgdata.data[0] = 2.5;923 assert.strictEqual(imgdata.data[0], 2, "imgdata.data[\""+(0)+"\"]", "2")924 imgdata.data[0] = 3.5;925 assert.strictEqual(imgdata.data[0], 4, "imgdata.data[\""+(0)+"\"]", "4")926 imgdata.data[0] = 252.5;927 assert.strictEqual(imgdata.data[0], 252, "imgdata.data[\""+(0)+"\"]", "252")928 imgdata.data[0] = 253.5;929 assert.strictEqual(imgdata.data[0], 254, "imgdata.data[\""+(0)+"\"]", "254")930 imgdata.data[0] = 254.5;931 assert.strictEqual(imgdata.data[0], 254, "imgdata.data[\""+(0)+"\"]", "254")932 imgdata.data[0] = 256.5;933 assert.strictEqual(imgdata.data[0], 255, "imgdata.data[\""+(0)+"\"]", "255")934 imgdata.data[0] = -0.5;935 assert.strictEqual(imgdata.data[0], 0, "imgdata.data[\""+(0)+"\"]", "0")936 imgdata.data[0] = -1.5;937 assert.strictEqual(imgdata.data[0], 0, "imgdata.data[\""+(0)+"\"]", "0")938 });939 it("2d.imageData.put.null", function () {940 // putImageData() with null imagedata throws TypeError941 const canvas = createCanvas(100, 50);942 const ctx = canvas.getContext("2d");943 const t = new Test();944 assert.throws(function() { ctx.putImageData(null, 0, 0); }, TypeError);945 });946 it("2d.imageData.put.nonfinite", function () {947 // putImageData() throws TypeError if arguments are not finite948 const canvas = createCanvas(100, 50);949 const ctx = canvas.getContext("2d");950 const t = new Test();951 var imgdata = ctx.getImageData(0, 0, 10, 10);952 assert.throws(function() { ctx.putImageData(imgdata, Infinity, 10); }, TypeError);953 assert.throws(function() { ctx.putImageData(imgdata, -Infinity, 10); }, TypeError);954 assert.throws(function() { ctx.putImageData(imgdata, NaN, 10); }, TypeError);955 assert.throws(function() { ctx.putImageData(imgdata, 10, Infinity); }, TypeError);956 assert.throws(function() { ctx.putImageData(imgdata, 10, -Infinity); }, TypeError);957 assert.throws(function() { ctx.putImageData(imgdata, 10, NaN); }, TypeError);958 assert.throws(function() { ctx.putImageData(imgdata, Infinity, Infinity); }, TypeError);959 assert.throws(function() { ctx.putImageData(imgdata, Infinity, 10, 10, 10, 10, 10); }, TypeError);960 assert.throws(function() { ctx.putImageData(imgdata, -Infinity, 10, 10, 10, 10, 10); }, TypeError);961 assert.throws(function() { ctx.putImageData(imgdata, NaN, 10, 10, 10, 10, 10); }, TypeError);962 assert.throws(function() { ctx.putImageData(imgdata, 10, Infinity, 10, 10, 10, 10); }, TypeError);963 assert.throws(function() { ctx.putImageData(imgdata, 10, -Infinity, 10, 10, 10, 10); }, TypeError);964 assert.throws(function() { ctx.putImageData(imgdata, 10, NaN, 10, 10, 10, 10); }, TypeError);965 assert.throws(function() { ctx.putImageData(imgdata, 10, 10, Infinity, 10, 10, 10); }, TypeError);966 assert.throws(function() { ctx.putImageData(imgdata, 10, 10, -Infinity, 10, 10, 10); }, TypeError);967 assert.throws(function() { ctx.putImageData(imgdata, 10, 10, NaN, 10, 10, 10); }, TypeError);968 assert.throws(function() { ctx.putImageData(imgdata, 10, 10, 10, Infinity, 10, 10); }, TypeError);969 assert.throws(function() { ctx.putImageData(imgdata, 10, 10, 10, -Infinity, 10, 10); }, TypeError);970 assert.throws(function() { ctx.putImageData(imgdata, 10, 10, 10, NaN, 10, 10); }, TypeError);971 assert.throws(function() { ctx.putImageData(imgdata, 10, 10, 10, 10, Infinity, 10); }, TypeError);972 assert.throws(function() { ctx.putImageData(imgdata, 10, 10, 10, 10, -Infinity, 10); }, TypeError);973 assert.throws(function() { ctx.putImageData(imgdata, 10, 10, 10, 10, NaN, 10); }, TypeError);974 assert.throws(function() { ctx.putImageData(imgdata, 10, 10, 10, 10, 10, Infinity); }, TypeError);975 assert.throws(function() { ctx.putImageData(imgdata, 10, 10, 10, 10, 10, -Infinity); }, TypeError);976 assert.throws(function() { ctx.putImageData(imgdata, 10, 10, 10, 10, 10, NaN); }, TypeError);977 assert.throws(function() { ctx.putImageData(imgdata, Infinity, Infinity, 10, 10, 10, 10); }, TypeError);978 assert.throws(function() { ctx.putImageData(imgdata, Infinity, Infinity, Infinity, 10, 10, 10); }, TypeError);979 assert.throws(function() { ctx.putImageData(imgdata, Infinity, Infinity, Infinity, Infinity, 10, 10); }, TypeError);980 assert.throws(function() { ctx.putImageData(imgdata, Infinity, Infinity, Infinity, Infinity, Infinity, 10); }, TypeError);981 assert.throws(function() { ctx.putImageData(imgdata, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity); }, TypeError);982 assert.throws(function() { ctx.putImageData(imgdata, Infinity, Infinity, Infinity, Infinity, 10, Infinity); }, TypeError);983 assert.throws(function() { ctx.putImageData(imgdata, Infinity, Infinity, Infinity, 10, Infinity, 10); }, TypeError);984 assert.throws(function() { ctx.putImageData(imgdata, Infinity, Infinity, Infinity, 10, Infinity, Infinity); }, TypeError);985 assert.throws(function() { ctx.putImageData(imgdata, Infinity, Infinity, Infinity, 10, 10, Infinity); }, TypeError);986 assert.throws(function() { ctx.putImageData(imgdata, Infinity, Infinity, 10, Infinity, 10, 10); }, TypeError);987 assert.throws(function() { ctx.putImageData(imgdata, Infinity, Infinity, 10, Infinity, Infinity, 10); }, TypeError);988 assert.throws(function() { ctx.putImageData(imgdata, Infinity, Infinity, 10, Infinity, Infinity, Infinity); }, TypeError);989 assert.throws(function() { ctx.putImageData(imgdata, Infinity, Infinity, 10, Infinity, 10, Infinity); }, TypeError);990 assert.throws(function() { ctx.putImageData(imgdata, Infinity, Infinity, 10, 10, Infinity, 10); }, TypeError);991 assert.throws(function() { ctx.putImageData(imgdata, Infinity, Infinity, 10, 10, Infinity, Infinity); }, TypeError);992 assert.throws(function() { ctx.putImageData(imgdata, Infinity, Infinity, 10, 10, 10, Infinity); }, TypeError);993 assert.throws(function() { ctx.putImageData(imgdata, Infinity, 10, Infinity, 10, 10, 10); }, TypeError);994 assert.throws(function() { ctx.putImageData(imgdata, Infinity, 10, Infinity, Infinity, 10, 10); }, TypeError);995 assert.throws(function() { ctx.putImageData(imgdata, Infinity, 10, Infinity, Infinity, Infinity, 10); }, TypeError);996 assert.throws(function() { ctx.putImageData(imgdata, Infinity, 10, Infinity, Infinity, Infinity, Infinity); }, TypeError);997 assert.throws(function() { ctx.putImageData(imgdata, Infinity, 10, Infinity, Infinity, 10, Infinity); }, TypeError);998 assert.throws(function() { ctx.putImageData(imgdata, Infinity, 10, Infinity, 10, Infinity, 10); }, TypeError);999 assert.throws(function() { ctx.putImageData(imgdata, Infinity, 10, Infinity, 10, Infinity, Infinity); }, TypeError);1000 assert.throws(function() { ctx.putImageData(imgdata, Infinity, 10, Infinity, 10, 10, Infinity); }, TypeError);1001 assert.throws(function() { ctx.putImageData(imgdata, Infinity, 10, 10, Infinity, 10, 10); }, TypeError);1002 assert.throws(function() { ctx.putImageData(imgdata, Infinity, 10, 10, Infinity, Infinity, 10); }, TypeError);1003 assert.throws(function() { ctx.putImageData(imgdata, Infinity, 10, 10, Infinity, Infinity, Infinity); }, TypeError);1004 assert.throws(function() { ctx.putImageData(imgdata, Infinity, 10, 10, Infinity, 10, Infinity); }, TypeError);1005 assert.throws(function() { ctx.putImageData(imgdata, Infinity, 10, 10, 10, Infinity, 10); }, TypeError);1006 assert.throws(function() { ctx.putImageData(imgdata, Infinity, 10, 10, 10, Infinity, Infinity); }, TypeError);1007 assert.throws(function() { ctx.putImageData(imgdata, Infinity, 10, 10, 10, 10, Infinity); }, TypeError);1008 assert.throws(function() { ctx.putImageData(imgdata, 10, Infinity, Infinity, 10, 10, 10); }, TypeError);1009 assert.throws(function() { ctx.putImageData(imgdata, 10, Infinity, Infinity, Infinity, 10, 10); }, TypeError);1010 assert.throws(function() { ctx.putImageData(imgdata, 10, Infinity, Infinity, Infinity, Infinity, 10); }, TypeError);1011 assert.throws(function() { ctx.putImageData(imgdata, 10, Infinity, Infinity, Infinity, Infinity, Infinity); }, TypeError);1012 assert.throws(function() { ctx.putImageData(imgdata, 10, Infinity, Infinity, Infinity, 10, Infinity); }, TypeError);1013 assert.throws(function() { ctx.putImageData(imgdata, 10, Infinity, Infinity, 10, Infinity, 10); }, TypeError);1014 assert.throws(function() { ctx.putImageData(imgdata, 10, Infinity, Infinity, 10, Infinity, Infinity); }, TypeError);1015 assert.throws(function() { ctx.putImageData(imgdata, 10, Infinity, Infinity, 10, 10, Infinity); }, TypeError);1016 assert.throws(function() { ctx.putImageData(imgdata, 10, Infinity, 10, Infinity, 10, 10); }, TypeError);1017 assert.throws(function() { ctx.putImageData(imgdata, 10, Infinity, 10, Infinity, Infinity, 10); }, TypeError);1018 assert.throws(function() { ctx.putImageData(imgdata, 10, Infinity, 10, Infinity, Infinity, Infinity); }, TypeError);1019 assert.throws(function() { ctx.putImageData(imgdata, 10, Infinity, 10, Infinity, 10, Infinity); }, TypeError);1020 assert.throws(function() { ctx.putImageData(imgdata, 10, Infinity, 10, 10, Infinity, 10); }, TypeError);1021 assert.throws(function() { ctx.putImageData(imgdata, 10, Infinity, 10, 10, Infinity, Infinity); }, TypeError);1022 assert.throws(function() { ctx.putImageData(imgdata, 10, Infinity, 10, 10, 10, Infinity); }, TypeError);1023 assert.throws(function() { ctx.putImageData(imgdata, 10, 10, Infinity, Infinity, 10, 10); }, TypeError);1024 assert.throws(function() { ctx.putImageData(imgdata, 10, 10, Infinity, Infinity, Infinity, 10); }, TypeError);1025 assert.throws(function() { ctx.putImageData(imgdata, 10, 10, Infinity, Infinity, Infinity, Infinity); }, TypeError);1026 assert.throws(function() { ctx.putImageData(imgdata, 10, 10, Infinity, Infinity, 10, Infinity); }, TypeError);1027 assert.throws(function() { ctx.putImageData(imgdata, 10, 10, Infinity, 10, Infinity, 10); }, TypeError);1028 assert.throws(function() { ctx.putImageData(imgdata, 10, 10, Infinity, 10, Infinity, Infinity); }, TypeError);1029 assert.throws(function() { ctx.putImageData(imgdata, 10, 10, Infinity, 10, 10, Infinity); }, TypeError);1030 assert.throws(function() { ctx.putImageData(imgdata, 10, 10, 10, Infinity, Infinity, 10); }, TypeError);1031 assert.throws(function() { ctx.putImageData(imgdata, 10, 10, 10, Infinity, Infinity, Infinity); }, TypeError);1032 assert.throws(function() { ctx.putImageData(imgdata, 10, 10, 10, Infinity, 10, Infinity); }, TypeError);1033 assert.throws(function() { ctx.putImageData(imgdata, 10, 10, 10, 10, Infinity, Infinity); }, TypeError);1034 });1035 it("2d.imageData.put.basic", function () {1036 // putImageData() puts image data from getImageData() onto the canvas1037 const canvas = createCanvas(100, 50);1038 const ctx = canvas.getContext("2d");1039 const t = new Test();1040 ctx.fillStyle = '#0f0';1041 ctx.fillRect(0, 0, 100, 50)1042 var imgdata = ctx.getImageData(0, 0, 100, 50);1043 ctx.fillStyle = '#f00';1044 ctx.fillRect(0, 0, 100, 50)1045 ctx.putImageData(imgdata, 0, 0);1046 _assertPixelApprox(canvas, 50,25, 0,255,0,255);1047 });1048 it("2d.imageData.put.created", function () {1049 // putImageData() puts image data from createImageData() onto the canvas1050 const canvas = createCanvas(100, 50);1051 const ctx = canvas.getContext("2d");1052 const t = new Test();1053 var imgdata = ctx.createImageData(100, 50);1054 for (var i = 0; i < imgdata.data.length; i += 4) {1055 imgdata.data[i] = 0;1056 imgdata.data[i+1] = 255;1057 imgdata.data[i+2] = 0;1058 imgdata.data[i+3] = 255;1059 }1060 ctx.fillStyle = '#f00';1061 ctx.fillRect(0, 0, 100, 50)1062 ctx.putImageData(imgdata, 0, 0);1063 _assertPixelApprox(canvas, 50,25, 0,255,0,255);1064 });1065 it("2d.imageData.put.wrongtype", function () {1066 // putImageData() does not accept non-ImageData objects1067 const canvas = createCanvas(100, 50);1068 const ctx = canvas.getContext("2d");1069 const t = new Test();1070 var imgdata = { width: 1, height: 1, data: [255, 0, 0, 255] };1071 assert.throws(function() { ctx.putImageData(imgdata, 0, 0); }, TypeError);1072 assert.throws(function() { ctx.putImageData("cheese", 0, 0); }, TypeError);1073 assert.throws(function() { ctx.putImageData(42, 0, 0); }, TypeError);1074 });1075 it("2d.imageData.put.cross", function () {1076 // putImageData() accepts image data got from a different canvas1077 const canvas = createCanvas(100, 50);1078 const ctx = canvas.getContext("2d");1079 const t = new Test();1080 var canvas2 = document.createElement('canvas');1081 var ctx2 = canvas2.getContext('2d');1082 ctx2.fillStyle = '#0f0';1083 ctx2.fillRect(0, 0, 100, 50)1084 var imgdata = ctx2.getImageData(0, 0, 100, 50);1085 ctx.fillStyle = '#f00';1086 ctx.fillRect(0, 0, 100, 50)1087 ctx.putImageData(imgdata, 0, 0);1088 _assertPixelApprox(canvas, 50,25, 0,255,0,255);1089 });1090 it("2d.imageData.put.alpha", function () {1091 // putImageData() puts non-solid image data correctly1092 const canvas = createCanvas(100, 50);1093 const ctx = canvas.getContext("2d");1094 const t = new Test();1095 ctx.fillStyle = 'rgba(0, 255, 0, 0.25)';1096 ctx.fillRect(0, 0, 100, 50)1097 var imgdata = ctx.getImageData(0, 0, 100, 50);1098 ctx.fillStyle = '#f00';1099 ctx.fillRect(0, 0, 100, 50)1100 ctx.putImageData(imgdata, 0, 0);1101 _assertPixelApprox(canvas, 50,25, 0,255,0,64);1102 });1103 it("2d.imageData.put.modified", function () {1104 // putImageData() puts modified image data correctly1105 const canvas = createCanvas(100, 50);1106 const ctx = canvas.getContext("2d");1107 const t = new Test();1108 ctx.fillStyle = '#0f0';1109 ctx.fillRect(0, 0, 100, 50)1110 ctx.fillStyle = '#f00';1111 ctx.fillRect(45, 20, 10, 10)1112 var imgdata = ctx.getImageData(45, 20, 10, 10);1113 for (var i = 0, len = imgdata.width*imgdata.height*4; i < len; i += 4)1114 {1115 imgdata.data[i] = 0;1116 imgdata.data[i+1] = 255;1117 }1118 ctx.putImageData(imgdata, 45, 20);1119 _assertPixelApprox(canvas, 50,25, 0,255,0,255);1120 });1121 it("2d.imageData.put.dirty.zero", function () {1122 // putImageData() with zero-sized dirty rectangle puts nothing1123 const canvas = createCanvas(100, 50);1124 const ctx = canvas.getContext("2d");1125 const t = new Test();1126 ctx.fillStyle = '#f00';1127 ctx.fillRect(0, 0, 100, 50)1128 var imgdata = ctx.getImageData(0, 0, 100, 50);1129 ctx.fillStyle = '#0f0';1130 ctx.fillRect(0, 0, 100, 50)1131 ctx.putImageData(imgdata, 0, 0, 0, 0, 0, 0);1132 _assertPixelApprox(canvas, 50,25, 0,255,0,255);1133 });1134 it("2d.imageData.put.dirty.rect1", function () {1135 // putImageData() only modifies areas inside the dirty rectangle, using width and height1136 const canvas = createCanvas(100, 50);1137 const ctx = canvas.getContext("2d");1138 const t = new Test();1139 ctx.fillStyle = '#f00';1140 ctx.fillRect(0, 0, 100, 50)1141 ctx.fillStyle = '#0f0';1142 ctx.fillRect(0, 0, 20, 20)1143 1144 var imgdata = ctx.getImageData(0, 0, 100, 50);1145 1146 ctx.fillStyle = '#0f0';1147 ctx.fillRect(0, 0, 100, 50)1148 ctx.fillStyle = '#f00';1149 ctx.fillRect(40, 20, 20, 20)1150 ctx.putImageData(imgdata, 40, 20, 0, 0, 20, 20);1151 1152 _assertPixelApprox(canvas, 50,25, 0,255,0,255);1153 _assertPixelApprox(canvas, 35,25, 0,255,0,255);1154 _assertPixelApprox(canvas, 65,25, 0,255,0,255);1155 _assertPixelApprox(canvas, 50,15, 0,255,0,255);1156 _assertPixelApprox(canvas, 50,45, 0,255,0,255);1157 });1158 it("2d.imageData.put.dirty.rect2", function () {1159 // putImageData() only modifies areas inside the dirty rectangle, using x and y1160 const canvas = createCanvas(100, 50);1161 const ctx = canvas.getContext("2d");1162 const t = new Test();1163 ctx.fillStyle = '#f00';1164 ctx.fillRect(0, 0, 100, 50)1165 ctx.fillStyle = '#0f0';1166 ctx.fillRect(60, 30, 20, 20)1167 1168 var imgdata = ctx.getImageData(0, 0, 100, 50);1169 1170 ctx.fillStyle = '#0f0';1171 ctx.fillRect(0, 0, 100, 50)1172 ctx.fillStyle = '#f00';1173 ctx.fillRect(40, 20, 20, 20)1174 ctx.putImageData(imgdata, -20, -10, 60, 30, 20, 20);1175 1176 _assertPixelApprox(canvas, 50,25, 0,255,0,255);1177 _assertPixelApprox(canvas, 35,25, 0,255,0,255);1178 _assertPixelApprox(canvas, 65,25, 0,255,0,255);1179 _assertPixelApprox(canvas, 50,15, 0,255,0,255);1180 _assertPixelApprox(canvas, 50,45, 0,255,0,255);1181 });1182 it("2d.imageData.put.dirty.negative", function () {1183 // putImageData() handles negative-sized dirty rectangles correctly1184 const canvas = createCanvas(100, 50);1185 const ctx = canvas.getContext("2d");1186 const t = new Test();1187 ctx.fillStyle = '#f00';1188 ctx.fillRect(0, 0, 100, 50)1189 ctx.fillStyle = '#0f0';1190 ctx.fillRect(0, 0, 20, 20)1191 1192 var imgdata = ctx.getImageData(0, 0, 100, 50);1193 1194 ctx.fillStyle = '#0f0';1195 ctx.fillRect(0, 0, 100, 50)1196 ctx.fillStyle = '#f00';1197 ctx.fillRect(40, 20, 20, 20)1198 ctx.putImageData(imgdata, 40, 20, 20, 20, -20, -20);1199 1200 _assertPixelApprox(canvas, 50,25, 0,255,0,255);1201 _assertPixelApprox(canvas, 35,25, 0,255,0,255);1202 _assertPixelApprox(canvas, 65,25, 0,255,0,255);1203 _assertPixelApprox(canvas, 50,15, 0,255,0,255);1204 _assertPixelApprox(canvas, 50,45, 0,255,0,255);1205 });1206 it("2d.imageData.put.dirty.outside", function () {1207 // putImageData() handles dirty rectangles outside the canvas correctly1208 const canvas = createCanvas(100, 50);1209 const ctx = canvas.getContext("2d");1210 const t = new Test();1211 ctx.fillStyle = '#f00';1212 ctx.fillRect(0, 0, 100, 50)1213 1214 var imgdata = ctx.getImageData(0, 0, 100, 50);1215 1216 ctx.fillStyle = '#0f0';1217 ctx.fillRect(0, 0, 100, 50)1218 1219 ctx.putImageData(imgdata, 100, 20, 20, 20, -20, -20);1220 ctx.putImageData(imgdata, 200, 200, 0, 0, 100, 50);1221 ctx.putImageData(imgdata, 40, 20, -30, -20, 30, 20);1222 ctx.putImageData(imgdata, -30, 20, 0, 0, 30, 20);1223 1224 _assertPixelApprox(canvas, 50,25, 0,255,0,255);1225 _assertPixelApprox(canvas, 98,15, 0,255,0,255);1226 _assertPixelApprox(canvas, 98,25, 0,255,0,255);1227 _assertPixelApprox(canvas, 98,45, 0,255,0,255);1228 _assertPixelApprox(canvas, 1,5, 0,255,0,255);1229 _assertPixelApprox(canvas, 1,25, 0,255,0,255);1230 _assertPixelApprox(canvas, 1,45, 0,255,0,255);1231 });1232 it("2d.imageData.put.unchanged", function () {1233 // putImageData(getImageData(...), ...) has no effect1234 const canvas = createCanvas(100, 50);1235 const ctx = canvas.getContext("2d");1236 const t = new Test();1237 var i = 0;1238 for (var y = 0; y < 16; ++y) {1239 for (var x = 0; x < 16; ++x, ++i) {1240 ctx.fillStyle = 'rgba(' + i + ',' + (Math.floor(i*1.5) % 256) + ',' + (Math.floor(i*23.3) % 256) + ',' + (i/256) + ')';1241 ctx.fillRect(x, y, 1, 1);1242 }1243 }1244 var imgdata1 = ctx.getImageData(0.1, 0.2, 15.8, 15.9);1245 var olddata = [];1246 for (var i = 0; i < imgdata1.data.length; ++i)1247 olddata[i] = imgdata1.data[i];1248 1249 ctx.putImageData(imgdata1, 0.1, 0.2);1250 1251 var imgdata2 = ctx.getImageData(0.1, 0.2, 15.8, 15.9);1252 for (var i = 0; i < imgdata2.data.length; ++i) {1253 assert.strictEqual(olddata[i], imgdata2.data[i], "olddata[\""+(i)+"\"]", "imgdata2.data[\""+(i)+"\"]")1254 }1255 });1256 it("2d.imageData.put.unaffected", function () {1257 // putImageData() is not affected by context state1258 const canvas = createCanvas(100, 50);1259 const ctx = canvas.getContext("2d");1260 const t = new Test();1261 ctx.fillStyle = '#0f0';1262 ctx.fillRect(0, 0, 100, 50)1263 var imgdata = ctx.getImageData(0, 0, 100, 50);1264 ctx.fillStyle = '#f00';1265 ctx.fillRect(0, 0, 100, 50)1266 ctx.globalAlpha = 0.1;1267 ctx.globalCompositeOperation = 'destination-atop';1268 ctx.shadowColor = '#f00';1269 ctx.shadowBlur = 1;1270 ctx.translate(100, 50);1271 ctx.scale(0.1, 0.1);1272 ctx.putImageData(imgdata, 0, 0);1273 _assertPixelApprox(canvas, 50,25, 0,255,0,255);1274 });1275 it("2d.imageData.put.clip", function () {1276 // putImageData() is not affected by clipping regions1277 const canvas = createCanvas(100, 50);1278 const ctx = canvas.getContext("2d");1279 const t = new Test();1280 ctx.fillStyle = '#0f0';1281 ctx.fillRect(0, 0, 100, 50)1282 var imgdata = ctx.getImageData(0, 0, 100, 50);1283 ctx.fillStyle = '#f00';1284 ctx.fillRect(0, 0, 100, 50)1285 ctx.beginPath();1286 ctx.rect(0, 0, 50, 50);1287 ctx.clip();1288 ctx.putImageData(imgdata, 0, 0);1289 _assertPixelApprox(canvas, 25,25, 0,255,0,255);1290 _assertPixelApprox(canvas, 75,25, 0,255,0,255);1291 });1292 it("2d.imageData.put.path", function () {1293 // putImageData() does not affect the current path1294 const canvas = createCanvas(100, 50);1295 const ctx = canvas.getContext("2d");1296 const t = new Test();1297 ctx.fillStyle = '#f00';1298 ctx.fillRect(0, 0, 100, 50)1299 ctx.rect(0, 0, 100, 50);1300 var imgdata = ctx.getImageData(0, 0, 100, 50);1301 ctx.putImageData(imgdata, 0, 0);1302 ctx.fillStyle = '#0f0';1303 ctx.fill();1304 _assertPixelApprox(canvas, 50,25, 0,255,0,255);1305 });...

Full Screen

Full Screen

drawing-text-to-the-canvas.js

Source:drawing-text-to-the-canvas.js Github

copy

Full Screen

...50 assert.strictEqual(c[1], g, 'Green channel of the pixel at (' + x + ', ' + y + ')');51 assert.strictEqual(c[2], b, 'Blue channel of the pixel at (' + x + ', ' + y + ')');52 assert.strictEqual(c[3], a, 'Alpha channel of the pixel at (' + x + ', ' + y + ')');53}54function _assertPixelApprox(canvas, x, y, r, g, b, a, pos, color, tolerance) {55 const c = _getPixel(canvas, x,y);56 _assertApprox(c[0], r, tolerance, 'Red channel of the pixel at (' + x + ', ' + y + ')');57 _assertApprox(c[1], g, tolerance, 'Green channel of the pixel at (' + x + ', ' + y + ')');58 _assertApprox(c[2], b, tolerance, 'Blue channel of the pixel at (' + x + ', ' + y + ')');59 _assertApprox(c[3], a, tolerance, 'Alpha channel of the pixel at (' + x + ', ' + y + ')');60}61function assert_throws_js(Type, fn) {62 assert.throws(fn, Type);63}64// Used by font tests to allow fonts to load.65function deferTest() {}66class Test {67 // Two cases of this in the tests, look unnecessary.68 done() {}69 // Used by font tests to allow fonts to load.70 step_func_done(func) { func(); }71 // Used for image onload callback.72 step_func(func) { func(); }73}74function step_timeout(result, time) {75 // Nothing; code needs to be converted for this to work.76}77describe("WPT: drawing-text-to-the-canvas", function () {78 it("2d.text.draw.fill.basic", function () {79 // fillText draws filled text80 const canvas = createCanvas(100, 50);81 const ctx = canvas.getContext("2d");82 const t = new Test();83 ctx.fillStyle = '#000';84 ctx.fillRect(0, 0, 100, 50);85 ctx.fillStyle = '#0f0';86 ctx.strokeStyle = '#f00';87 ctx.font = '35px Arial, sans-serif';88 ctx.fillText('PASS', 5, 35);89 });90 it("2d.text.draw.fill.unaffected", function () {91 // fillText does not start a new path or subpath92 const canvas = createCanvas(100, 50);93 const ctx = canvas.getContext("2d");94 const t = new Test();95 ctx.fillStyle = '#f00';96 ctx.fillRect(0, 0, 100, 50);97 98 ctx.moveTo(0, 0);99 ctx.lineTo(100, 0);100 101 ctx.font = '35px Arial, sans-serif';102 ctx.fillText('FAIL', 5, 35);103 104 ctx.lineTo(100, 50);105 ctx.lineTo(0, 50);106 ctx.fillStyle = '#0f0';107 ctx.fill();108 109 _assertPixel(canvas, 50,25, 0,255,0,255);110 _assertPixel(canvas, 5,45, 0,255,0,255);111 });112 it("2d.text.draw.fill.rtl", function () {113 // fillText respects Right-To-Left Override characters114 const canvas = createCanvas(100, 50);115 const ctx = canvas.getContext("2d");116 const t = new Test();117 ctx.fillStyle = '#000';118 ctx.fillRect(0, 0, 100, 50);119 ctx.fillStyle = '#0f0';120 ctx.strokeStyle = '#f00';121 ctx.font = '35px Arial, sans-serif';122 ctx.fillText('\u202eFAIL \xa0 \xa0 SSAP', 5, 35);123 });124 it("2d.text.draw.fill.maxWidth.large", function () {125 // fillText handles maxWidth correctly126 const canvas = createCanvas(100, 50);127 const ctx = canvas.getContext("2d");128 const t = new Test();129 ctx.fillStyle = '#000';130 ctx.fillRect(0, 0, 100, 50);131 ctx.fillStyle = '#0f0';132 ctx.font = '35px Arial, sans-serif';133 ctx.fillText('PASS', 5, 35, 200);134 });135 it("2d.text.draw.fill.maxWidth.small", function () {136 // fillText handles maxWidth correctly137 const canvas = createCanvas(100, 50);138 const ctx = canvas.getContext("2d");139 const t = new Test();140 ctx.fillStyle = '#0f0';141 ctx.fillRect(0, 0, 100, 50);142 ctx.fillStyle = '#f00';143 ctx.font = '35px Arial, sans-serif';144 ctx.fillText('fail fail fail fail fail', -100, 35, 90);145 _assertGreen(ctx, 100, 50);146 });147 it("2d.text.draw.fill.maxWidth.zero", function () {148 // fillText handles maxWidth correctly149 const canvas = createCanvas(100, 50);150 const ctx = canvas.getContext("2d");151 const t = new Test();152 ctx.fillStyle = '#0f0';153 ctx.fillRect(0, 0, 100, 50);154 ctx.fillStyle = '#f00';155 ctx.font = '35px Arial, sans-serif';156 ctx.fillText('fail fail fail fail fail', 5, 35, 0);157 _assertGreen(ctx, 100, 50);158 });159 it("2d.text.draw.fill.maxWidth.negative", function () {160 // fillText handles maxWidth correctly161 const canvas = createCanvas(100, 50);162 const ctx = canvas.getContext("2d");163 const t = new Test();164 ctx.fillStyle = '#0f0';165 ctx.fillRect(0, 0, 100, 50);166 ctx.fillStyle = '#f00';167 ctx.font = '35px Arial, sans-serif';168 ctx.fillText('fail fail fail fail fail', 5, 35, -1);169 _assertGreen(ctx, 100, 50);170 });171 it("2d.text.draw.fill.maxWidth.NaN", function () {172 // fillText handles maxWidth correctly173 const canvas = createCanvas(100, 50);174 const ctx = canvas.getContext("2d");175 const t = new Test();176 ctx.fillStyle = '#0f0';177 ctx.fillRect(0, 0, 100, 50);178 ctx.fillStyle = '#f00';179 ctx.font = '35px Arial, sans-serif';180 ctx.fillText('fail fail fail fail fail', 5, 35, NaN);181 _assertGreen(ctx, 100, 50);182 });183 it("2d.text.draw.stroke.basic", function () {184 // strokeText draws stroked text185 const canvas = createCanvas(100, 50);186 const ctx = canvas.getContext("2d");187 const t = new Test();188 ctx.fillStyle = '#000';189 ctx.fillRect(0, 0, 100, 50);190 ctx.strokeStyle = '#0f0';191 ctx.fillStyle = '#f00';192 ctx.lineWidth = 1;193 ctx.font = '35px Arial, sans-serif';194 ctx.strokeText('PASS', 5, 35);195 });196 it("2d.text.draw.stroke.unaffected", function () {197 // strokeText does not start a new path or subpath198 const canvas = createCanvas(100, 50);199 const ctx = canvas.getContext("2d");200 const t = new Test();201 ctx.fillStyle = '#f00';202 ctx.fillRect(0, 0, 100, 50);203 204 ctx.moveTo(0, 0);205 ctx.lineTo(100, 0);206 207 ctx.font = '35px Arial, sans-serif';208 ctx.strokeStyle = '#f00';209 ctx.strokeText('FAIL', 5, 35);210 211 ctx.lineTo(100, 50);212 ctx.lineTo(0, 50);213 ctx.fillStyle = '#0f0';214 ctx.fill();215 216 _assertPixel(canvas, 50,25, 0,255,0,255);217 _assertPixel(canvas, 5,45, 0,255,0,255);218 });219 it("2d.text.draw.kern.consistent", function () {220 // Stroked and filled text should have exactly the same kerning so it overlaps221 const canvas = createCanvas(100, 50);222 const ctx = canvas.getContext("2d");223 const t = new Test();224 ctx.fillStyle = '#0f0';225 ctx.fillRect(0, 0, 100, 50);226 ctx.fillStyle = '#f00';227 ctx.strokeStyle = '#0f0';228 ctx.lineWidth = 3;229 ctx.font = '20px Arial, sans-serif';230 ctx.fillText('VAVAVAVAVAVAVA', -50, 25);231 ctx.fillText('ToToToToToToTo', -50, 45);232 ctx.strokeText('VAVAVAVAVAVAVA', -50, 25);233 ctx.strokeText('ToToToToToToTo', -50, 45);234 });235 it("2d.text.draw.fill.maxWidth.fontface", function () {236 // fillText works on @font-face fonts237 const canvas = createCanvas(100, 50);238 const ctx = canvas.getContext("2d");239 const t = new Test();240 ctx.font = '50px CanvasTest';241 deferTest();242 step_timeout(t.step_func_done(function () {243 ctx.fillStyle = '#0f0';244 ctx.fillRect(0, 0, 100, 50);245 ctx.fillStyle = '#f00';246 ctx.fillText('EEEE', -50, 37.5, 40);247 _assertPixelApprox(canvas, 5,5, 0,255,0,255);248 _assertPixelApprox(canvas, 95,5, 0,255,0,255);249 _assertPixelApprox(canvas, 25,25, 0,255,0,255);250 _assertPixelApprox(canvas, 75,25, 0,255,0,255);251 }), 500);252 });253 it("2d.text.draw.fill.maxWidth.bound", function () {254 // fillText handles maxWidth based on line size, not bounding box size255 const canvas = createCanvas(100, 50);256 const ctx = canvas.getContext("2d");257 const t = new Test();258 ctx.font = '50px CanvasTest';259 deferTest();260 step_timeout(t.step_func_done(function () {261 ctx.fillStyle = '#f00';262 ctx.fillRect(0, 0, 100, 50);263 ctx.fillStyle = '#0f0';264 ctx.fillText('DD', 0, 37.5, 100);265 _assertPixelApprox(canvas, 5,5, 0,255,0,255);266 _assertPixelApprox(canvas, 95,5, 0,255,0,255);267 _assertPixelApprox(canvas, 25,25, 0,255,0,255);268 _assertPixelApprox(canvas, 75,25, 0,255,0,255);269 }), 500);270 });271 it("2d.text.draw.fontface", function () {272 const canvas = createCanvas(100, 50);273 const ctx = canvas.getContext("2d");274 const t = new Test();275 ctx.font = '67px CanvasTest';276 deferTest();277 step_timeout(t.step_func_done(function () {278 ctx.fillStyle = '#f00';279 ctx.fillRect(0, 0, 100, 50);280 ctx.fillStyle = '#0f0';281 ctx.fillText('AA', 0, 50);282 _assertPixelApprox(canvas, 5,5, 0,255,0,255);283 _assertPixelApprox(canvas, 95,5, 0,255,0,255);284 _assertPixelApprox(canvas, 25,25, 0,255,0,255);285 _assertPixelApprox(canvas, 75,25, 0,255,0,255);286 }), 500);287 });288 it("2d.text.draw.fontface.repeat", function () {289 // Draw with the font immediately, then wait a bit until and draw again. (This crashes some version of WebKit.)290 const canvas = createCanvas(100, 50);291 const ctx = canvas.getContext("2d");292 const t = new Test();293 ctx.fillStyle = '#f00';294 ctx.fillRect(0, 0, 100, 50);295 ctx.font = '67px CanvasTest';296 ctx.fillStyle = '#0f0';297 ctx.fillText('AA', 0, 50);298 deferTest();299 step_timeout(t.step_func_done(function () {300 ctx.fillText('AA', 0, 50);301 _assertPixelApprox(canvas, 5,5, 0,255,0,255);302 _assertPixelApprox(canvas, 95,5, 0,255,0,255);303 _assertPixelApprox(canvas, 25,25, 0,255,0,255);304 _assertPixelApprox(canvas, 75,25, 0,255,0,255);305 }), 500);306 });307 it("2d.text.draw.fontface.notinpage", function () {308 // @font-face fonts should work even if they are not used in the page309 const canvas = createCanvas(100, 50);310 const ctx = canvas.getContext("2d");311 const t = new Test();312 ctx.font = '67px CanvasTest';313 deferTest();314 step_timeout(t.step_func_done(function () {315 ctx.fillStyle = '#f00';316 ctx.fillRect(0, 0, 100, 50);317 ctx.fillStyle = '#0f0';318 ctx.fillText('AA', 0, 50);319 _assertPixelApprox(canvas, 5,5, 0,255,0,255);320 _assertPixelApprox(canvas, 95,5, 0,255,0,255);321 _assertPixelApprox(canvas, 25,25, 0,255,0,255);322 _assertPixelApprox(canvas, 75,25, 0,255,0,255);323 }), 500);324 });325 it("2d.text.draw.align.left", function () {326 // textAlign left is the left of the first em square (not the bounding box)327 const canvas = createCanvas(100, 50);328 const ctx = canvas.getContext("2d");329 const t = new Test();330 ctx.font = '50px CanvasTest';331 deferTest();332 step_timeout(t.step_func_done(function () {333 ctx.fillStyle = '#f00';334 ctx.fillRect(0, 0, 100, 50);335 ctx.fillStyle = '#0f0';336 ctx.textAlign = 'left';337 ctx.fillText('DD', 0, 37.5);338 _assertPixelApprox(canvas, 5,5, 0,255,0,255);339 _assertPixelApprox(canvas, 95,5, 0,255,0,255);340 _assertPixelApprox(canvas, 25,25, 0,255,0,255);341 _assertPixelApprox(canvas, 75,25, 0,255,0,255);342 _assertPixelApprox(canvas, 5,45, 0,255,0,255);343 _assertPixelApprox(canvas, 95,45, 0,255,0,255);344 }), 500);345 });346 it("2d.text.draw.align.right", function () {347 // textAlign right is the right of the last em square (not the bounding box)348 const canvas = createCanvas(100, 50);349 const ctx = canvas.getContext("2d");350 const t = new Test();351 ctx.font = '50px CanvasTest';352 deferTest();353 step_timeout(t.step_func_done(function () {354 ctx.fillStyle = '#f00';355 ctx.fillRect(0, 0, 100, 50);356 ctx.fillStyle = '#0f0';357 ctx.textAlign = 'right';358 ctx.fillText('DD', 100, 37.5);359 _assertPixelApprox(canvas, 5,5, 0,255,0,255);360 _assertPixelApprox(canvas, 95,5, 0,255,0,255);361 _assertPixelApprox(canvas, 25,25, 0,255,0,255);362 _assertPixelApprox(canvas, 75,25, 0,255,0,255);363 _assertPixelApprox(canvas, 5,45, 0,255,0,255);364 _assertPixelApprox(canvas, 95,45, 0,255,0,255);365 }), 500);366 });367 it("2d.text.draw.align.start.ltr", function () {368 // textAlign start with ltr is the left edge369 const canvas = createCanvas(100, 50);370 const ctx = canvas.getContext("2d");371 const t = new Test();372 ctx.font = '50px CanvasTest';373 deferTest();374 step_timeout(t.step_func_done(function () {375 ctx.fillStyle = '#f00';376 ctx.fillRect(0, 0, 100, 50);377 ctx.fillStyle = '#0f0';378 ctx.textAlign = 'start';379 ctx.fillText('DD', 0, 37.5);380 _assertPixelApprox(canvas, 5,5, 0,255,0,255);381 _assertPixelApprox(canvas, 95,5, 0,255,0,255);382 _assertPixelApprox(canvas, 25,25, 0,255,0,255);383 _assertPixelApprox(canvas, 75,25, 0,255,0,255);384 _assertPixelApprox(canvas, 5,45, 0,255,0,255);385 _assertPixelApprox(canvas, 95,45, 0,255,0,255);386 }), 500);387 });388 it("2d.text.draw.align.start.rtl", function () {389 // textAlign start with rtl is the right edge390 const canvas = createCanvas(100, 50);391 const ctx = canvas.getContext("2d");392 const t = new Test();393 ctx.font = '50px CanvasTest';394 deferTest();395 step_timeout(t.step_func_done(function () {396 ctx.fillStyle = '#f00';397 ctx.fillRect(0, 0, 100, 50);398 ctx.fillStyle = '#0f0';399 ctx.textAlign = 'start';400 ctx.fillText('DD', 100, 37.5);401 _assertPixelApprox(canvas, 5,5, 0,255,0,255);402 _assertPixelApprox(canvas, 95,5, 0,255,0,255);403 _assertPixelApprox(canvas, 25,25, 0,255,0,255);404 _assertPixelApprox(canvas, 75,25, 0,255,0,255);405 _assertPixelApprox(canvas, 5,45, 0,255,0,255);406 _assertPixelApprox(canvas, 95,45, 0,255,0,255);407 }), 500);408 });409 it("2d.text.draw.align.end.ltr", function () {410 // textAlign end with ltr is the right edge411 const canvas = createCanvas(100, 50);412 const ctx = canvas.getContext("2d");413 const t = new Test();414 ctx.font = '50px CanvasTest';415 deferTest();416 step_timeout(t.step_func_done(function () {417 ctx.fillStyle = '#f00';418 ctx.fillRect(0, 0, 100, 50);419 ctx.fillStyle = '#0f0';420 ctx.textAlign = 'end';421 ctx.fillText('DD', 100, 37.5);422 _assertPixelApprox(canvas, 5,5, 0,255,0,255);423 _assertPixelApprox(canvas, 95,5, 0,255,0,255);424 _assertPixelApprox(canvas, 25,25, 0,255,0,255);425 _assertPixelApprox(canvas, 75,25, 0,255,0,255);426 _assertPixelApprox(canvas, 5,45, 0,255,0,255);427 _assertPixelApprox(canvas, 95,45, 0,255,0,255);428 }), 500);429 });430 it("2d.text.draw.align.end.rtl", function () {431 // textAlign end with rtl is the left edge432 const canvas = createCanvas(100, 50);433 const ctx = canvas.getContext("2d");434 const t = new Test();435 ctx.font = '50px CanvasTest';436 deferTest();437 step_timeout(t.step_func_done(function () {438 ctx.fillStyle = '#f00';439 ctx.fillRect(0, 0, 100, 50);440 ctx.fillStyle = '#0f0';441 ctx.textAlign = 'end';442 ctx.fillText('DD', 0, 37.5);443 _assertPixelApprox(canvas, 5,5, 0,255,0,255);444 _assertPixelApprox(canvas, 95,5, 0,255,0,255);445 _assertPixelApprox(canvas, 25,25, 0,255,0,255);446 _assertPixelApprox(canvas, 75,25, 0,255,0,255);447 _assertPixelApprox(canvas, 5,45, 0,255,0,255);448 _assertPixelApprox(canvas, 95,45, 0,255,0,255);449 }), 500);450 });451 it("2d.text.draw.align.center", function () {452 // textAlign center is the center of the em squares (not the bounding box)453 const canvas = createCanvas(100, 50);454 const ctx = canvas.getContext("2d");455 const t = new Test();456 ctx.font = '50px CanvasTest';457 deferTest();458 step_timeout(t.step_func_done(function () {459 ctx.fillStyle = '#f00';460 ctx.fillRect(0, 0, 100, 50);461 ctx.fillStyle = '#0f0';462 ctx.textAlign = 'center';463 ctx.fillText('DD', 50, 37.5);464 _assertPixelApprox(canvas, 5,5, 0,255,0,255);465 _assertPixelApprox(canvas, 95,5, 0,255,0,255);466 _assertPixelApprox(canvas, 25,25, 0,255,0,255);467 _assertPixelApprox(canvas, 75,25, 0,255,0,255);468 _assertPixelApprox(canvas, 5,45, 0,255,0,255);469 _assertPixelApprox(canvas, 95,45, 0,255,0,255);470 }), 500);471 });472 it("2d.text.draw.space.basic", function () {473 // U+0020 is rendered the correct size (1em wide)474 const canvas = createCanvas(100, 50);475 const ctx = canvas.getContext("2d");476 const t = new Test();477 ctx.font = '50px CanvasTest';478 deferTest();479 step_timeout(t.step_func_done(function () {480 ctx.fillStyle = '#f00';481 ctx.fillRect(0, 0, 100, 50);482 ctx.fillStyle = '#0f0';483 ctx.fillText('E EE', -100, 37.5);484 _assertPixelApprox(canvas, 25,25, 0,255,0,255);485 _assertPixelApprox(canvas, 75,25, 0,255,0,255);486 }), 500);487 });488 it("2d.text.draw.space.collapse.nonspace", function () {489 // Non-space characters are not converted to U+0020 and collapsed490 const canvas = createCanvas(100, 50);491 const ctx = canvas.getContext("2d");492 const t = new Test();493 ctx.font = '50px CanvasTest';494 deferTest();495 step_timeout(t.step_func_done(function () {496 ctx.fillStyle = '#f00';497 ctx.fillRect(0, 0, 100, 50);498 ctx.fillStyle = '#0f0';499 ctx.fillText('E\x0b EE', -150, 37.5);500 _assertPixelApprox(canvas, 25,25, 0,255,0,255);501 _assertPixelApprox(canvas, 75,25, 0,255,0,255);502 }), 500);503 });504 it("2d.text.measure.width.basic", function () {505 // The width of character is same as font used506 const canvas = createCanvas(100, 50);507 const ctx = canvas.getContext("2d");508 const t = new Test();509 deferTest();510 var f = new FontFace("CanvasTest", "/fonts/CanvasTest.ttf");511 document.fonts.add(f);512 document.fonts.ready.then(() => {513 step_timeout(t.step_func_done(function () {514 ctx.font = '50px CanvasTest';515 assert.strictEqual(ctx.measureText('A').width, 50, "ctx.measureText('A').width", "50")...

Full Screen

Full Screen

text-styles.js

Source:text-styles.js Github

copy

Full Screen

...50 assert.strictEqual(c[1], g, 'Green channel of the pixel at (' + x + ', ' + y + ')');51 assert.strictEqual(c[2], b, 'Blue channel of the pixel at (' + x + ', ' + y + ')');52 assert.strictEqual(c[3], a, 'Alpha channel of the pixel at (' + x + ', ' + y + ')');53}54function _assertPixelApprox(canvas, x, y, r, g, b, a, pos, color, tolerance) {55 const c = _getPixel(canvas, x,y);56 _assertApprox(c[0], r, tolerance, 'Red channel of the pixel at (' + x + ', ' + y + ')');57 _assertApprox(c[1], g, tolerance, 'Green channel of the pixel at (' + x + ', ' + y + ')');58 _assertApprox(c[2], b, tolerance, 'Blue channel of the pixel at (' + x + ', ' + y + ')');59 _assertApprox(c[3], a, tolerance, 'Alpha channel of the pixel at (' + x + ', ' + y + ')');60}61function assert_throws_js(Type, fn) {62 assert.throws(fn, Type);63}64// Used by font tests to allow fonts to load.65function deferTest() {}66class Test {67 // Two cases of this in the tests, look unnecessary.68 done() {}69 // Used by font tests to allow fonts to load.70 step_func_done(func) { func(); }71 // Used for image onload callback.72 step_func(func) { func(); }73}74function step_timeout(result, time) {75 // Nothing; code needs to be converted for this to work.76}77describe("WPT: text-styles", function () {78 it("2d.text.font.parse.basic", function () {79 const canvas = createCanvas(100, 50);80 const ctx = canvas.getContext("2d");81 const t = new Test();82 ctx.font = '20px serif';83 assert.strictEqual(ctx.font, '20px serif', "ctx.font", "'20px serif'")84 85 ctx.font = '20PX SERIF';86 assert.strictEqual(ctx.font, '20px serif', "ctx.font", "'20px serif'")87 });88 it("2d.text.font.parse.tiny", function () {89 const canvas = createCanvas(100, 50);90 const ctx = canvas.getContext("2d");91 const t = new Test();92 ctx.font = '1px sans-serif';93 assert.strictEqual(ctx.font, '1px sans-serif', "ctx.font", "'1px sans-serif'")94 });95 it("2d.text.font.parse.complex", function () {96 const canvas = createCanvas(100, 50);97 const ctx = canvas.getContext("2d");98 const t = new Test();99 ctx.font = 'small-caps italic 400 12px/2 Unknown Font, sans-serif';100 assert.strictEqual(ctx.font, 'italic small-caps 12px "Unknown Font", sans-serif', "ctx.font", "'italic small-caps 12px \"Unknown Font\", sans-serif'")101 });102 it("2d.text.font.parse.family", function () {103 const canvas = createCanvas(100, 50);104 const ctx = canvas.getContext("2d");105 const t = new Test();106 ctx.font = '20px cursive,fantasy,monospace,sans-serif,serif,UnquotedFont,"QuotedFont\\\\\\","';107 assert.strictEqual(ctx.font, '20px cursive, fantasy, monospace, sans-serif, serif, UnquotedFont, "QuotedFont\\\\\\","', "ctx.font", "'20px cursive, fantasy, monospace, sans-serif, serif, UnquotedFont, \"QuotedFont\\\\\\\\\\\\\",\"'")108 });109 it("2d.text.font.parse.size.percentage", function () {110 const canvas = createCanvas(100, 50);111 const ctx = canvas.getContext("2d");112 const t = new Test();113 ctx.font = '50% serif';114 assert.strictEqual(ctx.font, '72px serif', "ctx.font", "'72px serif'")115 canvas.setAttribute('style', 'font-size: 100px');116 assert.strictEqual(ctx.font, '72px serif', "ctx.font", "'72px serif'")117 });118 it("2d.text.font.parse.size.percentage.default", function () {119 const canvas = createCanvas(100, 50);120 const ctx = canvas.getContext("2d");121 const t = new Test();122 var canvas2 = document.createElement('canvas');123 var ctx2 = canvas2.getContext('2d');124 ctx2.font = '1000% serif';125 assert.strictEqual(ctx2.font, '100px serif', "ctx2.font", "'100px serif'")126 });127 it("2d.text.font.parse.system", function () {128 // System fonts must be computed to explicit values129 const canvas = createCanvas(100, 50);130 const ctx = canvas.getContext("2d");131 const t = new Test();132 ctx.font = 'message-box';133 assert.notStrictEqual(ctx.font, 'message-box', "ctx.font", "'message-box'");134 });135 it("2d.text.font.parse.invalid", function () {136 const canvas = createCanvas(100, 50);137 const ctx = canvas.getContext("2d");138 const t = new Test();139 ctx.font = '20px serif';140 assert.strictEqual(ctx.font, '20px serif', "ctx.font", "'20px serif'")141 142 ctx.font = '20px serif';143 ctx.font = '';144 assert.strictEqual(ctx.font, '20px serif', "ctx.font", "'20px serif'")145 146 ctx.font = '20px serif';147 ctx.font = 'bogus';148 assert.strictEqual(ctx.font, '20px serif', "ctx.font", "'20px serif'")149 150 ctx.font = '20px serif';151 ctx.font = 'inherit';152 assert.strictEqual(ctx.font, '20px serif', "ctx.font", "'20px serif'")153 154 ctx.font = '20px serif';155 ctx.font = '10px {bogus}';156 assert.strictEqual(ctx.font, '20px serif', "ctx.font", "'20px serif'")157 158 ctx.font = '20px serif';159 ctx.font = '10px initial';160 assert.strictEqual(ctx.font, '20px serif', "ctx.font", "'20px serif'")161 162 ctx.font = '20px serif';163 ctx.font = '10px default';164 assert.strictEqual(ctx.font, '20px serif', "ctx.font", "'20px serif'")165 166 ctx.font = '20px serif';167 ctx.font = '10px inherit';168 assert.strictEqual(ctx.font, '20px serif', "ctx.font", "'20px serif'")169 170 ctx.font = '20px serif';171 ctx.font = '10px revert';172 assert.strictEqual(ctx.font, '20px serif', "ctx.font", "'20px serif'")173 174 ctx.font = '20px serif';175 ctx.font = 'var(--x)';176 assert.strictEqual(ctx.font, '20px serif', "ctx.font", "'20px serif'")177 178 ctx.font = '20px serif';179 ctx.font = 'var(--x, 10px serif)';180 assert.strictEqual(ctx.font, '20px serif', "ctx.font", "'20px serif'")181 182 ctx.font = '20px serif';183 ctx.font = '1em serif; background: green; margin: 10px';184 assert.strictEqual(ctx.font, '20px serif', "ctx.font", "'20px serif'")185 });186 it("2d.text.font.default", function () {187 const canvas = createCanvas(100, 50);188 const ctx = canvas.getContext("2d");189 const t = new Test();190 assert.strictEqual(ctx.font, '10px sans-serif', "ctx.font", "'10px sans-serif'")191 });192 it("2d.text.font.relative_size", function () {193 const canvas = createCanvas(100, 50);194 const ctx = canvas.getContext("2d");195 const t = new Test();196 var canvas2 = document.createElement('canvas');197 var ctx2 = canvas2.getContext('2d');198 ctx2.font = '1em sans-serif';199 assert.strictEqual(ctx2.font, '10px sans-serif', "ctx2.font", "'10px sans-serif'")200 });201 it("2d.text.align.valid", function () {202 const canvas = createCanvas(100, 50);203 const ctx = canvas.getContext("2d");204 const t = new Test();205 ctx.textAlign = 'start';206 assert.strictEqual(ctx.textAlign, 'start', "ctx.textAlign", "'start'")207 208 ctx.textAlign = 'end';209 assert.strictEqual(ctx.textAlign, 'end', "ctx.textAlign", "'end'")210 211 ctx.textAlign = 'left';212 assert.strictEqual(ctx.textAlign, 'left', "ctx.textAlign", "'left'")213 214 ctx.textAlign = 'right';215 assert.strictEqual(ctx.textAlign, 'right', "ctx.textAlign", "'right'")216 217 ctx.textAlign = 'center';218 assert.strictEqual(ctx.textAlign, 'center', "ctx.textAlign", "'center'")219 });220 it("2d.text.align.invalid", function () {221 const canvas = createCanvas(100, 50);222 const ctx = canvas.getContext("2d");223 const t = new Test();224 ctx.textAlign = 'start';225 ctx.textAlign = 'bogus';226 assert.strictEqual(ctx.textAlign, 'start', "ctx.textAlign", "'start'")227 228 ctx.textAlign = 'start';229 ctx.textAlign = 'END';230 assert.strictEqual(ctx.textAlign, 'start', "ctx.textAlign", "'start'")231 232 ctx.textAlign = 'start';233 ctx.textAlign = 'end ';234 assert.strictEqual(ctx.textAlign, 'start', "ctx.textAlign", "'start'")235 236 ctx.textAlign = 'start';237 ctx.textAlign = 'end\0';238 assert.strictEqual(ctx.textAlign, 'start', "ctx.textAlign", "'start'")239 });240 it("2d.text.align.default", function () {241 const canvas = createCanvas(100, 50);242 const ctx = canvas.getContext("2d");243 const t = new Test();244 assert.strictEqual(ctx.textAlign, 'start', "ctx.textAlign", "'start'")245 });246 it("2d.text.baseline.valid", function () {247 const canvas = createCanvas(100, 50);248 const ctx = canvas.getContext("2d");249 const t = new Test();250 ctx.textBaseline = 'top';251 assert.strictEqual(ctx.textBaseline, 'top', "ctx.textBaseline", "'top'")252 253 ctx.textBaseline = 'hanging';254 assert.strictEqual(ctx.textBaseline, 'hanging', "ctx.textBaseline", "'hanging'")255 256 ctx.textBaseline = 'middle';257 assert.strictEqual(ctx.textBaseline, 'middle', "ctx.textBaseline", "'middle'")258 259 ctx.textBaseline = 'alphabetic';260 assert.strictEqual(ctx.textBaseline, 'alphabetic', "ctx.textBaseline", "'alphabetic'")261 262 ctx.textBaseline = 'ideographic';263 assert.strictEqual(ctx.textBaseline, 'ideographic', "ctx.textBaseline", "'ideographic'")264 265 ctx.textBaseline = 'bottom';266 assert.strictEqual(ctx.textBaseline, 'bottom', "ctx.textBaseline", "'bottom'")267 });268 it("2d.text.baseline.invalid", function () {269 const canvas = createCanvas(100, 50);270 const ctx = canvas.getContext("2d");271 const t = new Test();272 ctx.textBaseline = 'top';273 ctx.textBaseline = 'bogus';274 assert.strictEqual(ctx.textBaseline, 'top', "ctx.textBaseline", "'top'")275 276 ctx.textBaseline = 'top';277 ctx.textBaseline = 'MIDDLE';278 assert.strictEqual(ctx.textBaseline, 'top', "ctx.textBaseline", "'top'")279 280 ctx.textBaseline = 'top';281 ctx.textBaseline = 'middle ';282 assert.strictEqual(ctx.textBaseline, 'top', "ctx.textBaseline", "'top'")283 284 ctx.textBaseline = 'top';285 ctx.textBaseline = 'middle\0';286 assert.strictEqual(ctx.textBaseline, 'top', "ctx.textBaseline", "'top'")287 });288 it("2d.text.baseline.default", function () {289 const canvas = createCanvas(100, 50);290 const ctx = canvas.getContext("2d");291 const t = new Test();292 assert.strictEqual(ctx.textBaseline, 'alphabetic', "ctx.textBaseline", "'alphabetic'")293 });294 it("2d.text.draw.baseline.top", function () {295 // textBaseline top is the top of the em square (not the bounding box)296 const canvas = createCanvas(100, 50);297 const ctx = canvas.getContext("2d");298 const t = new Test();299 ctx.font = '50px CanvasTest';300 deferTest();301 step_timeout(t.step_func_done(function () {302 ctx.fillStyle = '#f00';303 ctx.fillRect(0, 0, 100, 50);304 ctx.fillStyle = '#0f0';305 ctx.textBaseline = 'top';306 ctx.fillText('CC', 0, 0);307 _assertPixelApprox(canvas, 5,5, 0,255,0,255);308 _assertPixelApprox(canvas, 95,5, 0,255,0,255);309 _assertPixelApprox(canvas, 25,25, 0,255,0,255);310 _assertPixelApprox(canvas, 75,25, 0,255,0,255);311 _assertPixelApprox(canvas, 5,45, 0,255,0,255);312 _assertPixelApprox(canvas, 95,45, 0,255,0,255);313 }), 500);314 });315 it("2d.text.draw.baseline.bottom", function () {316 // textBaseline bottom is the bottom of the em square (not the bounding box)317 const canvas = createCanvas(100, 50);318 const ctx = canvas.getContext("2d");319 const t = new Test();320 ctx.font = '50px CanvasTest';321 deferTest();322 step_timeout(t.step_func_done(function () {323 ctx.fillStyle = '#f00';324 ctx.fillRect(0, 0, 100, 50);325 ctx.fillStyle = '#0f0';326 ctx.textBaseline = 'bottom';327 ctx.fillText('CC', 0, 50);328 _assertPixelApprox(canvas, 5,5, 0,255,0,255);329 _assertPixelApprox(canvas, 95,5, 0,255,0,255);330 _assertPixelApprox(canvas, 25,25, 0,255,0,255);331 _assertPixelApprox(canvas, 75,25, 0,255,0,255);332 _assertPixelApprox(canvas, 5,45, 0,255,0,255);333 _assertPixelApprox(canvas, 95,45, 0,255,0,255);334 }), 500);335 });336 it("2d.text.draw.baseline.middle", function () {337 // textBaseline middle is the middle of the em square (not the bounding box)338 const canvas = createCanvas(100, 50);339 const ctx = canvas.getContext("2d");340 const t = new Test();341 ctx.font = '50px CanvasTest';342 deferTest();343 step_timeout(t.step_func_done(function () {344 ctx.fillStyle = '#f00';345 ctx.fillRect(0, 0, 100, 50);346 ctx.fillStyle = '#0f0';347 ctx.textBaseline = 'middle';348 ctx.fillText('CC', 0, 25);349 _assertPixelApprox(canvas, 5,5, 0,255,0,255);350 _assertPixelApprox(canvas, 95,5, 0,255,0,255);351 _assertPixelApprox(canvas, 25,25, 0,255,0,255);352 _assertPixelApprox(canvas, 75,25, 0,255,0,255);353 _assertPixelApprox(canvas, 5,45, 0,255,0,255);354 _assertPixelApprox(canvas, 95,45, 0,255,0,255);355 }), 500);356 });357 it("2d.text.draw.baseline.alphabetic", function () {358 const canvas = createCanvas(100, 50);359 const ctx = canvas.getContext("2d");360 const t = new Test();361 ctx.font = '50px CanvasTest';362 deferTest();363 step_timeout(t.step_func_done(function () {364 ctx.fillStyle = '#f00';365 ctx.fillRect(0, 0, 100, 50);366 ctx.fillStyle = '#0f0';367 ctx.textBaseline = 'alphabetic';368 ctx.fillText('CC', 0, 37.5);369 _assertPixelApprox(canvas, 5,5, 0,255,0,255);370 _assertPixelApprox(canvas, 95,5, 0,255,0,255);371 _assertPixelApprox(canvas, 25,25, 0,255,0,255);372 _assertPixelApprox(canvas, 75,25, 0,255,0,255);373 _assertPixelApprox(canvas, 5,45, 0,255,0,255);374 _assertPixelApprox(canvas, 95,45, 0,255,0,255);375 }), 500);376 });377 it("2d.text.draw.baseline.ideographic", function () {378 const canvas = createCanvas(100, 50);379 const ctx = canvas.getContext("2d");380 const t = new Test();381 ctx.font = '50px CanvasTest';382 deferTest();383 step_timeout(t.step_func_done(function () {384 ctx.fillStyle = '#f00';385 ctx.fillRect(0, 0, 100, 50);386 ctx.fillStyle = '#0f0';387 ctx.textBaseline = 'ideographic';388 ctx.fillText('CC', 0, 31.25);389 _assertPixelApprox(canvas, 5,5, 0,255,0,255);390 _assertPixelApprox(canvas, 95,5, 0,255,0,255);391 _assertPixelApprox(canvas, 25,25, 0,255,0,255);392 _assertPixelApprox(canvas, 75,25, 0,255,0,255);393 _assertPixelApprox(canvas, 5,45, 0,255,0,255);394 _assertPixelApprox(canvas, 95,45, 0,255,0,255);395 }), 500);396 });397 it("2d.text.draw.baseline.hanging", function () {398 const canvas = createCanvas(100, 50);399 const ctx = canvas.getContext("2d");400 const t = new Test();401 ctx.font = '50px CanvasTest';402 deferTest();403 step_timeout(t.step_func_done(function () {404 ctx.fillStyle = '#f00';405 ctx.fillRect(0, 0, 100, 50);406 ctx.fillStyle = '#0f0';407 ctx.textBaseline = 'hanging';408 ctx.fillText('CC', 0, 12.5);409 _assertPixelApprox(canvas, 5,5, 0,255,0,255);410 _assertPixelApprox(canvas, 95,5, 0,255,0,255);411 _assertPixelApprox(canvas, 25,25, 0,255,0,255);412 _assertPixelApprox(canvas, 75,25, 0,255,0,255);413 _assertPixelApprox(canvas, 5,45, 0,255,0,255);414 _assertPixelApprox(canvas, 95,45, 0,255,0,255);415 }), 500);416 });417 it("2d.text.draw.space.collapse.space", function () {418 // Space characters are converted to U+0020, and collapsed (per CSS)419 const canvas = createCanvas(100, 50);420 const ctx = canvas.getContext("2d");421 const t = new Test();422 ctx.font = '50px CanvasTest';423 deferTest();424 step_timeout(t.step_func_done(function () {425 ctx.fillStyle = '#f00';426 ctx.fillRect(0, 0, 100, 50);427 ctx.fillStyle = '#0f0';428 ctx.fillText('E EE', -100, 37.5);429 _assertPixelApprox(canvas, 25,25, 0,255,0,255);430 _assertPixelApprox(canvas, 75,25, 0,255,0,255);431 }), 500);432 });433 it("2d.text.draw.space.collapse.other", function () {434 // Space characters are converted to U+0020, and collapsed (per CSS)435 const canvas = createCanvas(100, 50);436 const ctx = canvas.getContext("2d");437 const t = new Test();438 ctx.font = '50px CanvasTest';439 deferTest();440 step_timeout(t.step_func_done(function () {441 ctx.fillStyle = '#f00';442 ctx.fillRect(0, 0, 100, 50);443 ctx.fillStyle = '#0f0';444 ctx.fillText('E \x09\x0a\x0c\x0d \x09\x0a\x0c\x0dEE', -100, 37.5);445 _assertPixelApprox(canvas, 25,25, 0,255,0,255);446 _assertPixelApprox(canvas, 75,25, 0,255,0,255);447 }), 500);448 });449 it("2d.text.draw.space.collapse.start", function () {450 // Space characters at the start of a line are collapsed (per CSS)451 const canvas = createCanvas(100, 50);452 const ctx = canvas.getContext("2d");453 const t = new Test();454 ctx.font = '50px CanvasTest';455 deferTest();456 step_timeout(t.step_func_done(function () {457 ctx.fillStyle = '#f00';458 ctx.fillRect(0, 0, 100, 50);459 ctx.fillStyle = '#0f0';460 ctx.fillText(' EE', 0, 37.5);461 _assertPixelApprox(canvas, 25,25, 0,255,0,255);462 _assertPixelApprox(canvas, 75,25, 0,255,0,255);463 }), 500);464 });465 it("2d.text.draw.space.collapse.end", function () {466 // Space characters at the end of a line are collapsed (per CSS)467 const canvas = createCanvas(100, 50);468 const ctx = canvas.getContext("2d");469 const t = new Test();470 ctx.font = '50px CanvasTest';471 deferTest();472 step_timeout(t.step_func_done(function () {473 ctx.fillStyle = '#f00';474 ctx.fillRect(0, 0, 100, 50);475 ctx.fillStyle = '#0f0';476 ctx.textAlign = 'right';477 ctx.fillText('EE ', 100, 37.5);478 _assertPixelApprox(canvas, 25,25, 0,255,0,255);479 _assertPixelApprox(canvas, 75,25, 0,255,0,255);480 }), 500);481 });482 it("2d.text.measure.width.space", function () {483 // Space characters are converted to U+0020 and collapsed (per CSS)484 const canvas = createCanvas(100, 50);485 const ctx = canvas.getContext("2d");486 const t = new Test();487 deferTest();488 var f = new FontFace("CanvasTest", "/fonts/CanvasTest.ttf");489 document.fonts.add(f);490 document.fonts.ready.then(() => {491 step_timeout(t.step_func_done(function () {492 ctx.font = '50px CanvasTest';493 assert.strictEqual(ctx.measureText('A B').width, 150, "ctx.measureText('A B').width", "150")...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1 build();2driver.takeScreenshot().then(function(base64png) {3 _assertPixelApprox(base64png, 0, 0, 1, 1, 255, 0, 0, 0, 0, 0, 1);4 driver.quit();5});6 at Object.<anonymous> (/Users/username/Documents/wptdriver/test.js:9:3)7 at Module._compile (module.js:456:26)8 at Object.Module._extensions..js (module.js:474:10)9 at Module.load (module.js:356:32)10 at Function.Module._load (module.js:312:12)11 at Module.runMain (module.js:497:10)12 at process.startup.processNextTick.process._tickCallback (node.js:244:9)

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1var wptdriver = require('./wptdriver');2exports._assertPixelApprox = function(url, image, threshold) {3 console.log(url);4 console.log(image);5 console.log(threshold);6};

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1var page = require('webpage').create();2var system = require('system');3var args = system.args;4var wptdriver = require('wptdriver');5page.viewportSize = { width: 1280, height: 800 };6page.open(args[1], function(status) {7 if (status !== 'success') {8 console.log('FAIL to load the address');9 } else {10 page.render('test.png');11 var result = wptdriver._assertPixelApprox(page, 'test.png', 0, 0, 255, 255, 255, 0, 0);12 if (result === 1) {13 console.log('PASS');14 } else {15 console.log('FAIL');16 }17 }18 phantom.exit();19});20var page = require('webpage').create();21var system = require('system');22var args = system.args;23var wptdriver = require('wptdriver');24page.viewportSize = { width: 1280, height: 800 };25page.open(args[1], function(status) {26 if (status !== 'success') {27 console.log('FAIL to load the address');28 } else {

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1var test = async_test("Compare two images");2var img1 = document.getElementById("img1");3var img2 = document.getElementById("img2");4test.step(function() {5 _assertPixelApprox(img1, img2, "Images are same", "Images are not same");6 test.done();7});

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1var wptdriver = require('./wptdriver.js');2var driver = new wptdriver.WptDriver();3var x = 100;4var y = 100;5var r = 51;6var g = 133;7var b = 255;8var tolerance = 0.05;9driver.get(url, function() {10 driver._assertPixelApprox(x, y, r, g, b, tolerance, function(result) {11 console.log("Result of _assertPixelApprox: " + result);12 driver.quit();13 });14});

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1var wpt = require('wptdriver');2var assert = require('assert');3var screenshot = browser.takeScreenshot();4wpt._assertPixelApprox(screenshot, 'expected.png', 0.99, 'Test Case', 'Test Description');5 throw err;6at Function.Module._resolveFilename (module.js:337:15)7at Function.Module._load (module.js:287:25)8at Function.Module.runMain (module.js:467:10)9at startup (node.js:136:18)10Your name to display (optional):11Your name to display (optional):12var wpt = require('./node_modules/wptdriver');13var assert = require('assert');14var screenshot = browser.takeScreenshot();15wpt._assertPixelApprox(screenshot, 'expected.png', 0.99, 'Test Case', 'Test Description');16Your name to display (optional):

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1var wptdriver = require('wptdriver');2var assert = require('assert');3var image1 = "image1.png";4var image2 = "image2.png";5var tolerance = 0.1;6var message = "image1.png and image2.png are similar";7wptdriver._assertPixelApprox(image1, image2, tolerance, message, function(err, result) {8 assert.ok(!err, "Error in _assertPixelApprox");9 assert.ok(result, "Images are not similar");10 console.log("Images are similar");11});12var wptdriver = require('wptdriver');13var assert = require('assert');14var image1 = "image1.png";15var image2 = "image2.png";16var message = "image1.png and image2.png are similar";17wptdriver._assertPixelExact(image1, image2, message, function(err, result) {18 assert.ok(!err, "Error in _assertPixelExact");19 assert.ok(result, "Images are not similar");20 console.log("Images are similar");21});22var wptdriver = require('wptdriver');23var assert = require('assert');24var image1 = "image1.png";25var image2 = "image2.png";26var x = 1;27var y = 1;28var width = 1;29var height = 1;30var message = "image1.png and image2.png are similar";31wptdriver._assertPixel(image1, image2, x, y, width, height, message, function(err, result)

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1var wptdriver = require('./wptdriver');2var assert = require('assert');3var _assertPixelApprox = wptdriver._assertPixelApprox;4var pixel1 = [255, 255, 255, 255];5var pixel2 = [255, 255, 255, 255];6_assertPixelApprox(pixel1, pixel2, 0, 'test');7var pixel1 = [255, 255, 255, 255];8var pixel2 = [255, 255, 254, 255];9 throw new assert.AssertionError({10 at Object.<anonymous> (/home/rajat/Desktop/wptdriver/test.js:11:1)11 at Module._compile (module.js:460:26)12 at Object.Module._extensions..js (module.js:478:10)13 at Module.load (module.js:355:32)14 at Function.Module._load (module.js:310:12)15 at Function.Module.runMain (module.js:501:10)16 at startup (node.js:129:16)

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1var image1 = "image1.png";2var image2 = "image2.png";3_assertPixelApprox(image1, image2, 0.05);4var image1 = "image1.png";5var image2 = "image2.png";6_assertPixelApprox(image1, image2, 0.05);

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1function runTest() {2 var wptdriver = require('wptdriver');3 var test = new wptdriver.Test();4 test.addTest(function() {5 wptdriver._assertPixelApprox(50, 50, 50, 50, 20, 0.5);6 });7 test.run();8}9function runTest() {10 var wptdriver = require('wptdriver');11 var test = new wptdriver.Test();12 test.addTest(function() {13 wptdriver._assertPixel(50, 50, 50, 50, 0);14 });15 test.run();16}17function runTest() {18 var wptdriver = require('wptdriver');19 var test = new wptdriver.Test();20 test.addTest(function() {21 wptdriver._assertPixel(50, 50, 50, 50, 1);22 });23 test.run();24}25function runTest() {26 var wptdriver = require('wptdriver');27 var test = new wptdriver.Test();28 test.addTest(function() {29 wptdriver._assertPixel(50, 50, 50, 50

Full Screen

Full Screen

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.

LambdaTest Learning Hubs:

YouTube

You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.

Run wpt automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

... View sample repo... View DocumentationSign up Free
›
_

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

...
Sign up with GoogleSign up with Email
Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful