third_party/WebKit/LayoutTests/fast/canvas/image-pattern-rotate.html - Issue 2703803002: Use testharness.js instead of js-test.js in LayoutTests/fast/canvas tests.

Side by Side Diff: third_party/WebKit/LayoutTests/fast/canvas/image-pattern-rotate.html

Issue 2703803002: Use testharness.js instead of js-test.js in LayoutTests/fast/canvas tests. (Closed)

Patch Set: Addressing comments Created 3 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:

« no previous file with comments | « third_party/WebKit/LayoutTests/fast/canvas/gradient-with-clip-expected.txt ('k') | third_party/WebKit/LayoutTests/fast/canvas/image-pattern-rotate-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 PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"	1 <script src="../../resources/testharness.js"></script>

2 "http://www.w3.org/TR/html4/loose.dtd">	2 <script src="../../resources/testharnessreport.js"></script>

3 <html>	3

4 <head>

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

6 <style>	4 <style>

7 canvas {	5 canvas {

8 border: 1px solid #000;	6 border: 1px solid #000;

9 margin: 2px;	7 margin: 2px;

10 }	8 }

11 </style>	9 </style>

	10 <div id="canvases"></div>

	11

12 <script>	12 <script>

	13 // Visual result for debugging (test uses text baseline only): You should see si xteen canvases with a green dot (rotated square) in the center.

	14

13 var img;	15 var img;

14 var imgdata;	16 var imgdata;

15	17

16 function imageLoaded() {	18 function runTests() {

17 var NUM_IMAGE = 16;	19 var NUM_IMAGE = 16;

18 for (var i = 0; i < NUM_IMAGE; i++) {	20 for (var i = 0; i < NUM_IMAGE; i++) {

19 var canvases = document.getElementById('canvases')	21 var canvases = document.getElementById('canvases')

20 var canvas = document.createElement('canvas');	22 var canvas = document.createElement('canvas');

21 canvas.width = 9;	23 canvas.width = 9;

22 canvas.height = 9;	24 canvas.height = 9;

23 var ctx = canvas.getContext('2d');	25 var ctx = canvas.getContext('2d');

24	26

25 var pattern = ctx.createPattern(img, 'no-repeat');	27 var pattern = ctx.createPattern(img, 'no-repeat');

26 ctx.fillStyle = pattern;	28 ctx.fillStyle = pattern;

27 ctx.translate(img.width / 2, img.height / 2);	29 ctx.translate(img.width / 2, img.height / 2);

28 var angle = 2 * Math.PI * i / NUM_IMAGE;	30 var angle = 2 * Math.PI * i / NUM_IMAGE;

29 ctx.rotate(angle);	31 ctx.rotate(angle);

30 ctx.translate(- img.width / 2, - img.height / 2);	32 ctx.translate(- img.width / 2, - img.height / 2);

31 ctx.fillRect(0, 0, img.width, img.height);	33 ctx.fillRect(0, 0, img.width, img.height);

32	34

33 var div = document.createElement('div');	35 var div = document.createElement('div');

34 div.appendChild(canvas);	36 div.appendChild(canvas);

35 canvases.appendChild(div);	37 canvases.appendChild(div);

36	38

37 var imageData = ctx.getImageData(4, 4, 1, 1);	39 assert_array_equals(ctx.getImageData(4, 4, 1, 1).data.slice(0,3), [0, 25 5, 0]);

38 imgdata = imageData.data;

39 shouldBe("imgdata[0]", "0");

40 shouldBe("imgdata[1]", "255");

41 shouldBe("imgdata[2]", "0");

42 }

43

44 if (window.testRunner) {

45 testRunner.notifyDone();

46 }	40 }

47 }	41 }

48	42

49 function runTests() {

50 if (window.testRunner) {

51 testRunner.dumpAsText();

52 testRunner.waitUntilDone();

53 }

54	43

55 var patternCanvas = document.createElement('canvas');	44 var patternCanvas = document.createElement('canvas');

56 patternCanvas.width = 9;	45 patternCanvas.width = 9;

57 patternCanvas.height = 9;	46 patternCanvas.height = 9;

58 var patternCtx = patternCanvas.getContext('2d');	47 var patternCtx = patternCanvas.getContext('2d');

59 patternCtx.fillStyle = '#0F0';	48 patternCtx.fillStyle = '#0F0';

60 patternCtx.fillRect(3, 3, 3, 3);	49 patternCtx.fillRect(3, 3, 3, 3);

61 img = new Image();	50 img = new Image();

62 img.onload = imageLoaded;	51 img.src = patternCanvas.toDataURL();

63 img.src = patternCanvas.toDataURL();

64	52

65 }	53

	54 async_test(t => {

	55 img.onload = function() {

	56 t.step(runTests);

	57 t.done();

	58 }

	59 }, "Test image pattern rotation.");

66 </script>	60 </script>

67 </head>

68 <body onload="runTests();">

69 Visual result below is for debugging purposes only (test uses text baseline only ). You should see sixteen canvases with a green dot (rotated square) in the cent er.

70 <div id="canvases"></div>

71 </pre>

72 </body>

73 </html>

OLD	NEW