How to use _assertPixelApprox method in wpt

Best JavaScript code snippet using wpt

pixel-manipulation.js

Source:pixel-manipulation.js

...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	});...

drawing-text-to-the-canvas.js

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

...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")...

text-styles.js

Source:text-styles.js

...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")...

Using AI Code Generation

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)

Using AI Code Generation

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

Using AI Code Generation

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 {

Using AI Code Generation

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});

Using AI Code Generation

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});

Using AI Code Generation

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):

Using AI Code Generation

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)

Using AI Code Generation

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)

Using AI Code Generation

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);

Using AI Code Generation

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

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.