third_party/WebKit/LayoutTests/virtual/threaded/fast/canvas-toBlob/canvas-createImageBitmap-blob-in-workers.html - Issue 1792623002: Revise layout tests to avoid race condition

Side by Side Diff: third_party/WebKit/LayoutTests/virtual/threaded/fast/canvas-toBlob/canvas-createImageBitmap-blob-in-workers.html

Issue 1792623002: Revise layout tests to avoid race condition (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Created 4 years, 9 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch

« no previous file with comments | « third_party/WebKit/LayoutTests/TestExpectations ('k') | third_party/WebKit/LayoutTests/virtual/threaded/fast/canvas-toBlob/canvas-createImageBitmap-blob-in-workers-expected.txt » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
1 <!DOCTYPE html>	1 <!DOCTYPE html>

2 <html>	2 <html>

3 <head>	3 <head>

4 <script src="../../../../resources/js-test.js"></script>	4 <script src="../../../../resources/js-test.js"></script>

5 </head>	5 </head>

6 <body>	6 <body>

7 <script>	7 <script>

8 jsTestIsAsync = true;	8 jsTestIsAsync = true;

9 var worker = startWorker('../../../../fast/canvas/resources/canvas-createImageBi tmap-blob-in-workers.js');	9 var worker = new Worker('../../../../fast/canvas/resources/canvas-createImageBit map-blob-in-workers.js');

10	10

11 description('Test createImageBitmap with blob in workers.');	11 description('Test race condition for createImageBitmap from blob in workers and main.');

12	12

13 var imgWidth = 20;	13 var imgWidth = 20;

14 var imgHeight = 20;	14 var imgHeight = 20;

15 var imageData2;

16 var numOfBitmaps = 5;	15 var numOfBitmaps = 5;

17 var bitmapArray = [];	16 var bitmapArray = [];

18	17

19 var canvas1 = document.createElement("canvas");	18 var canvas1 = document.createElement("canvas");

20 var ctx1 = canvas1.getContext("2d");	19 var ctx1 = canvas1.getContext("2d");

21 ctx1.fillStyle = "#FF0000";	20 ctx1.fillStyle = "#FF0000";

22 ctx1.fillRect(0, 0, imgWidth, imgHeight);	21 ctx1.fillRect(0, 0, imgWidth, imgHeight);

23	22

24 function compareImageData(data1, data2)	23 function compareImageData(data1, data2)

25 {	24 {

26 if (data1.length != data2.length) {	25 if (data1.length != data2.length) {

27 testFailed("The two image have different dimensions");	26 testFailed("The two image have different dimensions");

28 finishJSTest();	27 finishJSTest();

29 }	28 }

30 for (var i = 0; i < data1.length; i++) {	29 for (var i = 0; i < data1.length; i++) {

31 if (data1[i] != data2[i]) {	30 if (data1[i] != data2[i]) {

32 testFailed("The two image have different pixel data");	31 testFailed("The two image have different pixel data");

33 finishJSTest();	32 finishJSTest();

34 }	33 }

35 }	34 }

36 }	35 }

37	36

	37 var getMessageFromWorker = new Promise((resolve, reject) => {

	38 function onMessage(e) {

	39 resolve(e.data.data);

	40 worker.removeEventListener("message", onMessage);

	41 }

	42 worker.addEventListener("message", onMessage);

	43 });

	44

38 var newImg = new Image();	45 var newImg = new Image();
	jbroman 2016/03/14 14:58:42 nit: Not new to this CL, but I'm a little confused nit: Not new to this CL, but I'm a little confused about what this test is testing. The description suggest it's racing use of createImageBitmap on workers and in the main context, but it's not obvious to me what the <img> has to do with it. Would be nice to have a comment explaining what we gain by adding this extra step.
39 newImg.onload = function() {	46 canvas1.toBlob(function(blob) {

40 var canvas2 = document.createElement("canvas");	47 worker.postMessage(blob);

41 var ctx2 = canvas2.getContext("2d");	48 for (var i = 0; i < numOfBitmaps; i++) {

42 ctx2.drawImage(newImg, 0, 0, imgWidth, imgHeight);	49 createImageBitmap(blob).then(imageBitmap => {

43 imageData2 = ctx2.getImageData(0, 0, imgWidth, imgHeight).data;	50 bitmapArray.push(imageBitmap);

	51 if (bitmapArray.length == numOfBitmaps) {

	52 var url = URL.createObjectURL(blob);

	53 newImg.src = url;

	54 }

	55 });

	56 }

	57 });

44	58

	59 var imageLoaded = new Promise((resolve, reject) => {

	60 newImg.onload = function() {

	61 var canvas2 = document.createElement("canvas");

	62 var ctx2 = canvas2.getContext("2d");

	63 ctx2.drawImage(newImg, 0, 0, imgWidth, imgHeight);

	64 resolve(ctx2.getImageData(0, 0, imgWidth, imgHeight).data);

	65 }
	jbroman 2016/03/14 14:58:42 super-nit: semicolon on this line? super-nit: semicolon on this line?
	66 });

	67

	68 Promise.all([imageLoaded, getMessageFromWorker]).then(([imageData2, newImageBitm ap]) => {
	jbroman 2016/03/14 14:58:42 nit: The names "imageData" and "imageData2" make i nit: The names "imageData" and "imageData2" make it a little hard to remember which is from where. WDYT of something like imageData2 -> "imageDataFromImg", "newImageBitmap" -> "imageBitmapFromWorker"?
45 var canvas3 = document.createElement("canvas");	69 var canvas3 = document.createElement("canvas");

46 var ctx3 = canvas3.getContext("2d");	70 var ctx3 = canvas3.getContext("2d");

47 for (var i = 0; i < numOfBitmaps; i++) {	71 for (var i = 0; i < numOfBitmaps; i++) {

48 ctx3.clearRect(0, 0, imgWidth, imgHeight);	72 ctx3.clearRect(0, 0, imgWidth, imgHeight);

49 ctx3.drawImage(bitmapArray[i], 0, 0, imgWidth, imgHeight);	73 ctx3.drawImage(bitmapArray[i], 0, 0, imgWidth, imgHeight);

50 var imageData = ctx3.getImageData(0, 0, imgWidth, imgHeight).data;	74 var imageData = ctx3.getImageData(0, 0, imgWidth, imgHeight).data;

51 compareImageData(imageData, imageData2);	75 compareImageData(imageData, imageData2);

52 }	76 }

53	77

54 worker.onmessage = function(e) {	78 ctx3.clearRect(0, 0, imgWidth, imgHeight);

55 var newImageBitmap = e.data.data;	79 ctx3.drawImage(newImageBitmap, 0, 0, imgWidth, imgHeight);

56 ctx3.clearRect(0, 0, imgWidth, imgHeight);	80 var imageData = ctx3.getImageData(0, 0, imgWidth, imgHeight).data;

57 ctx3.drawImage(newImageBitmap, 0, 0, imgWidth, imgHeight);	81 compareImageData(imageData, imageData2);

58 var imageData = ctx3.getImageData(0, 0, imgWidth, imgHeight).data;	82 testPassed("ImageBitmaps created from blob in worker and in main have the sa me pixel data");

59 compareImageData(imageData, imageData2);	83 finishJSTest();

60 testPassed("ImageBitmaps created from blob in worker and in main have th e same pixel data");

61 finishJSTest();

62 }

63 }

64

65 canvas1.toBlob(function(blob) {

66 worker.postMessage(blob);

67 var setImgSrc = false;

68 for (var i = 0; i < numOfBitmaps; i++) {

69 createImageBitmap(blob).then(imageBitmap => {

70 bitmapArray.push(imageBitmap);

71 if (i >= numOfBitmaps - 1 && setImgSrc == false) {

72 var url = URL.createObjectURL(blob);

73 newImg.src = url;

74 setImgSrc = true;

75 }

76 });

77 }

78 });	84 });

79	85

80 </script>	86 </script>

81 </body>	87 </body>

82 </html>	88 </html>

OLD	NEW