content/test/data/gpu/pixel_offscreenCanvas_2d_commit_worker.html - Issue 2644653003: Make OffscreenCanvas animation in sync with its placeholder canvas's parent frame rate

Side by Side Diff: content/test/data/gpu/pixel_offscreenCanvas_2d_commit_worker.html

Issue 2644653003: Make OffscreenCanvas animation in sync with its placeholder canvas's parent frame rate (Closed)

Patch Set: rebase again Created 3 years, 10 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 | « content/test/data/gpu/pixel_offscreenCanvas_2d_commit_main.html ('k') | content/test/data/gpu/pixel_offscreenCanvas_webgl_commit_main.html » ('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	2

3 <!-- READ BEFORE UPDATING:	3 <!-- READ BEFORE UPDATING:

4 If this test is updated make sure to increment the "revision" value of the	4 If this test is updated make sure to increment the "revision" value of the

5 associated test in content/test/gpu/gpu_tests/pixel_test_pages.py. This will ens ure	5 associated test in content/test/gpu/gpu_tests/pixel_test_pages.py. This will ens ure

6 that the baseline images are regenerated on the next run.	6 that the baseline images are regenerated on the next run.

7 -->	7 -->

8	8

9 <html>	9 <html>

10 <head>	10 <head>

11 <title>OffscreenCanvas 2d commit flow on worker thread: Four-color square on whi te background.</title>	11 <title>OffscreenCanvas 2d commit flow on worker thread: Four-color square on whi te background.</title>

12 <style type="text/css">	12 <style type="text/css">

13 .nomargin {	13 .nomargin {

14 margin: 0px auto;	14 margin: 0px auto;

15 }	15 }

16 </style>	16 </style>

17 <script id="myWorker" type="text/worker">	17 <script id="myWorker" type="text/worker">

18	18

19 var g_offscreen2d;	19 var g_offscreen2d;

20 var g_animationFrameNumber = 0;	20 var g_animationFrameNumber = 0;

21	21

22 self.onmessage = function(e) {	22 self.onmessage = function(e) {

23 var transferredCanvas = e.data;	23 var transferredCanvas = e.data;

24 g_offscreen2d = transferredCanvas.getContext("2d");	24 g_offscreen2d = transferredCanvas.getContext("2d");

	25 g_offscreen2d.fillStyle = "red";

	26 g_offscreen2d.fillRect(0, 0, 200, 200);

25 drawLoop();	27 drawLoop();

26 }	28 }

27	29

28 function drawLoop()	30 function drawLoop()

29 {	31 {

30 if (g_animationFrameNumber < 3) {	32 if (g_animationFrameNumber < 10) {

31 g_offscreen2d.fillStyle = "red";

32 g_offscreen2d.fillRect(0, 0, 200, 200);

33 g_animationFrameNumber++;	33 g_animationFrameNumber++;

34 g_offscreen2d.commit().then(drawLoop);	34 // Purposely intersperse overdraw and non-overdraw commit cases to see

	35 // if OffscreenCanvas commit() handles both cases well.

	36 if (0 == g_animationFrameNumber % 2) {

	37 // When promise is used, the next drawLoop() is called after the first

	38 // frame is resolved; therefore there is no overdraw in this case.

	39 g_offscreen2d.commit().then(drawLoop);

	40 } else {

	41 // When the next drawLoop() is invoked regardless the promise resolve

	42 // status of the previous commit(), the frame committed in the next

	43 // drawLoop() is very likely to be overdrawn.

	44 g_offscreen2d.commit();

	45 drawLoop();

	46 }

35 } else {	47 } else {

36 g_offscreen2d.fillStyle = "red";	48 g_offscreen2d.fillStyle = "red";

37 g_offscreen2d.fillRect(0, 0, 100, 100);	49 g_offscreen2d.fillRect(0, 0, 100, 100);

38 g_offscreen2d.fillStyle = "green";	50 g_offscreen2d.fillStyle = "green";

39 g_offscreen2d.fillRect(100, 0, 100, 100);	51 g_offscreen2d.fillRect(100, 0, 100, 100);

40 g_offscreen2d.fillStyle = "blue";	52 g_offscreen2d.fillStyle = "blue";

41 g_offscreen2d.fillRect(0, 100, 100, 100);	53 g_offscreen2d.fillRect(0, 100, 100, 100);

42 g_offscreen2d.fillStyle = "black";	54 g_offscreen2d.fillStyle = "black";

43 g_offscreen2d.fillRect(100, 100, 100, 100);	55 g_offscreen2d.fillRect(100, 100, 100, 100);

44 g_offscreen2d.commit()	56 g_offscreen2d.commit()

(...skipping 39 matching lines...) Expand 10 before \| Expand all \| Expand 10 after Loading...
84 </script>	96 </script>

85 </head>	97 </head>

86 <body onload="main()">	98 <body onload="main()">

87 <div style="position:relative; width:300px; height:300px; background-color:white ">	99 <div style="position:relative; width:300px; height:300px; background-color:white ">

88 </div>	100 </div>

89 <div id="container" style="position:absolute; top:0px; left:0px">	101 <div id="container" style="position:absolute; top:0px; left:0px">

90 <canvas id="c" width="200" height="200" class="nomargin"></canvas>	102 <canvas id="c" width="200" height="200" class="nomargin"></canvas>

91 </div>	103 </div>

92 </body>	104 </body>

93 </html>	105 </html>

OLD	NEW