From 5030bc4a5c3ed4b72206738f5e1d7690303ba54a Mon Sep 17 00:00:00 2001 From: Gcaufy Date: Tue, 24 Nov 2020 11:44:44 +0800 Subject: [PATCH 1/2] update setSource in nextTick --- lib/image.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/lib/image.js b/lib/image.js index 2788a5d93..de496e463 100644 --- a/lib/image.js +++ b/lib/image.js @@ -88,6 +88,8 @@ function getSource(img){ } function setSource(img, src, origSrc){ - SetSource.call(img, src); + process.nextTick(function(){ + SetSource.call(img, src); + }); img._originalSource = origSrc; } From 1fb18bc9ce6337304a605f7fc760eec1b6bef1f6 Mon Sep 17 00:00:00 2001 From: Gcaufy Date: Fri, 27 Nov 2020 23:32:47 +0800 Subject: [PATCH 2/2] test: Fixed setImmediate and added test cases --- lib/image.js | 6 +- test/image.test.js | 146 +++++++++++++++++++++++++++++++-------------- 2 files changed, 106 insertions(+), 46 deletions(-) diff --git a/lib/image.js b/lib/image.js index de496e463..428dd8cbc 100644 --- a/lib/image.js +++ b/lib/image.js @@ -84,12 +84,14 @@ Image.prototype[util.inspect.custom || 'inspect'] = function(){ }; function getSource(img){ - return img._originalSource || GetSource.call(img); + return img._originalSource || img._src || GetSource.call(img); } function setSource(img, src, origSrc){ - process.nextTick(function(){ + clearImmediate(img._setSourceTimer); + img._setSourceTimer = setImmediate(() => { SetSource.call(img, src); }); + img._src = src; img._originalSource = origSrc; } diff --git a/test/image.test.js b/test/image.test.js index f8d37e465..43f6871bd 100644 --- a/test/image.test.js +++ b/test/image.test.js @@ -127,11 +127,14 @@ describe('Image', function () { img.onload = () => { onloadCalled += 1 } + // it's should be png_clock, because when you change the img.src, it doesn't load the image immediately. img.src = png_checkers assert.strictEqual(img.src, png_checkers) assert.strictEqual(img.complete, true) - assert.strictEqual(img.width, 2) - assert.strictEqual(img.height, 2) + + // it's still png_clock + assert.strictEqual(img.width, 320) + assert.strictEqual(img.height, 320) img.src = png_clock assert.strictEqual(img.src, png_clock) @@ -139,13 +142,22 @@ describe('Image', function () { assert.strictEqual(320, img.width) assert.strictEqual(320, img.height) - assert.strictEqual(onloadCalled, 2) + // called in nextTick + assert.strictEqual(onloadCalled, 0) onloadCalled = 0 img.onload = () => { onloadCalled += 1 } + // reset src will clear the old src changes. img.src = png_clock - assert.strictEqual(onloadCalled, 1) + assert.strictEqual(onloadCalled, 0) + + return new Promise(resolve => { + setTimeout(() => { + assert.strictEqual(onloadCalled, 1) + resolve(); + }, 0) + }); }) }) @@ -189,7 +201,8 @@ describe('Image', function () { img.src = `${png_clock}s2` assert.strictEqual(img.src, `${png_clock}s2`) - assert.strictEqual(onerrorCalled, 2) + // it's not synchronized call, onerror will be invoked in async steps. + assert.strictEqual(onerrorCalled, 0) onerrorCalled = 0 img.onerror = () => { onerrorCalled += 1 } @@ -197,20 +210,38 @@ describe('Image', function () { img.src = `${png_clock}s3` assert.strictEqual(img.src, `${png_clock}s3`) - assert.strictEqual(onerrorCalled, 1) + assert.strictEqual(onerrorCalled, 0) assert.strictEqual(onloadCalled, 0) + + return new Promise(resolve => { + setTimeout(() => { + assert.strictEqual(onerrorCalled, 1) + assert.strictEqual(onloadCalled, 0) + resolve(); + }); + }); }) }) it('Image#{width,height}', function () { return loadImage(png_clock).then((img) => { img.src = '' - assert.strictEqual(img.width, 0) - assert.strictEqual(img.height, 0) - - img.src = png_clock - assert.strictEqual(img.width, 320) - assert.strictEqual(img.height, 320) + return new Promise((resolve) => { + setTimeout(() => { + assert.strictEqual(img.width, 0) + assert.strictEqual(img.height, 0) + resolve(); + }) + }).then(() => { + img.src = png_clock + return new Promise((resolve) => { + setTimeout(() => { + assert.strictEqual(img.width, 320) + assert.strictEqual(img.height, 320) + resolve() + }) + }) + }) }) }) @@ -221,11 +252,17 @@ describe('Image', function () { img.onerror = () => { onerrorCalled += 1 } img.src = Buffer.alloc(0) - assert.strictEqual(img.width, 0) - assert.strictEqual(img.height, 0) - assert.strictEqual(img.complete, true) - assert.strictEqual(onerrorCalled, 1) + return new Promise((resolve) => { + setTimeout(() => { + assert.strictEqual(img.width, 0) + assert.strictEqual(img.height, 0) + assert.strictEqual(img.complete, true) + + assert.strictEqual(onerrorCalled, 1) + resolve() + }) + }) }) }) @@ -236,23 +273,34 @@ describe('Image', function () { img.onload = () => { onloadCalled += 1 } img.src = png_checkers - assert.strictEqual(img.src, png_checkers) - assert.strictEqual(img.complete, true) - assert.strictEqual(img.width, 2) - assert.strictEqual(img.height, 2) - - assert.strictEqual(onloadCalled, 1) - - onloadCalled = 0 - img.onload = null - - img.src = png_clock - assert.strictEqual(img.src, png_clock) - assert.strictEqual(img.complete, true) - assert.strictEqual(img.width, 320) - assert.strictEqual(img.height, 320) - assert.strictEqual(onloadCalled, 0) + return new Promise((resolve) => { + setTimeout(() => { + assert.strictEqual(img.src, png_checkers) + assert.strictEqual(img.complete, true) + assert.strictEqual(img.width, 2) + assert.strictEqual(img.height, 2) + + assert.strictEqual(onloadCalled, 1) + + onloadCalled = 0 + img.onload = null + img.src = png_clock + resolve() + }) + }).then(() => { + return new Promise((resolve) => { + setTimeout(() => { + assert.strictEqual(img.src, png_clock) + assert.strictEqual(img.complete, true) + assert.strictEqual(img.width, 320) + assert.strictEqual(img.height, 320) + + assert.strictEqual(onloadCalled, 0) + resolve() + }) + }) + }) }) }) @@ -265,21 +313,31 @@ describe('Image', function () { img.onerror = () => { onerrorCalled += 1 } img.src = `${png_clock}s1` + assert.strictEqual(img.src, `${png_clock}s1`) img.src = `${png_clock}s2` assert.strictEqual(img.src, `${png_clock}s2`) - assert.strictEqual(onerrorCalled, 2) - onerrorCalled = 0 - img.onerror = null - - img.src = `${png_clock}s3` - assert.strictEqual(img.src, `${png_clock}s3`) - - assert.strictEqual(onloadCalled, 0) - assert.strictEqual(onerrorCalled, 0) + return new Promise((resolve) => { + setTimeout(() => { + assert.strictEqual(onerrorCalled, 1) + resolve() + }) + }).then(() => new Promise(resolve => { + onerrorCalled = 0 + img.onerror = null + + img.src = `${png_clock}s3` + assert.strictEqual(img.src, `${png_clock}s3`) + + setTimeout(() => { + assert.strictEqual(onloadCalled, 0) + assert.strictEqual(onerrorCalled, 0) + resolve() + }) + })) }) }) @@ -386,7 +444,7 @@ describe('Image', function () { 255, 0, 0, 127, 255, 255, 255, 127, ]); - + done(); }; @@ -404,7 +462,7 @@ describe('Image', function () { testImgd(img, [ 255, 0, 0, 255, ]); - + done(); }; @@ -423,7 +481,7 @@ describe('Image', function () { 255, 0, 0, 255, 0, 255, 0, 255, ]); - + done(); };