content/test/data/gpu/pixel_offscreenCanvas_2d_commit_main.html - Issue 2594843002: Implementing promise-based commit for driving OffscreenCanvas animations

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

Issue 2594843002: Implementing promise-based commit for driving OffscreenCanvas animations (Closed)

Patch Set: apply senorblanco feedback Created 4 years 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 | « no previous file | content/test/data/gpu/pixel_offscreenCanvas_2d_commit_worker.html » ('j') | third_party/WebKit/Source/core/offscreencanvas/OffscreenCanvas.cpp » ('J')
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/page_sets/pixel_tests.py. This will ensure	5 associated test in content/test/gpu/page_sets/pixel_tests.py. This will ensure

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 main thread: Four-color squares on whit e background.</title>	11 <title>OffscreenCanvas 2d commit flow on main thread: Four-color squares on whit e 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 </head>

	18 <body onload="main()">

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

	20 </div>

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

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

	23 </div>

17 <script>	24 <script>

18 var g_swapsBeforeAck = 15;	25 var g_swapsBeforeAck = 15;

19	26

20 function main()	27 function main()

21 {	28 {

22 draw();	29 drawLoop();

23 waitForFinish();

24 }	30 }

25	31

26 function draw()	32 var g_animationFrameNumber = 0;

	33 var canvas = document.getElementById("c");

	34 var offscreenCanvas = canvas.transferControlToOffscreen();

	35 var offscreen2d = offscreenCanvas.getContext("2d");

	36

	37 function drawLoop()

27 {	38 {

28 var canvas = document.getElementById("c");	39 if (g_animationFrameNumber < 3) {

29 var offscreenCanvas = canvas.transferControlToOffscreen();	40 offscreen2d.fillStyle = "red";

30 var offscreen2d = offscreenCanvas.getContext("2d");	41 offscreen2d.fillRect(0, 0, 200, 200);

31 offscreen2d.fillStyle = "red";	42 g_animationFrameNumber++;

32 offscreen2d.fillRect(0, 0, 100, 100);	43 offscreen2d.commit().then(drawLoop);

33 offscreen2d.fillStyle = "green";	44 } else {

34 offscreen2d.fillRect(100, 0, 100, 100);	45 offscreen2d.fillStyle = "red";

35 offscreen2d.fillStyle = "blue";	46 offscreen2d.fillRect(0, 0, 100, 100);

36 offscreen2d.fillRect(0, 100, 100, 100);	47 offscreen2d.fillStyle = "green";

37 offscreen2d.fillStyle = "black";	48 offscreen2d.fillRect(100, 0, 100, 100);

38 offscreen2d.fillRect(100, 100, 100, 100);	49 offscreen2d.fillStyle = "blue";

39 offscreen2d.commit();	50 offscreen2d.fillRect(0, 100, 100, 100);

	51 offscreen2d.fillStyle = "black";

	52 offscreen2d.fillRect(100, 100, 100, 100);

	53 offscreen2d.commit();

	54

	55 // The following fill is never committed

	56 offscreen2d.fillStyle = "blue";

	57 offscreen2d.fillRect(0, 0, 200, 200);

	58 waitForFinish();

	59 }

40 }	60 }

41	61

42 function waitForFinish()	62 function waitForFinish()

43 {	63 {

44 if (g_swapsBeforeAck == 0) {	64 if (g_swapsBeforeAck == 0) {

45 domAutomationController.setAutomationId(1);	65 domAutomationController.setAutomationId(1);

46 domAutomationController.send("SUCCESS");	66 domAutomationController.send("SUCCESS");

47 } else {	67 } else {

48 g_swapsBeforeAck--;	68 g_swapsBeforeAck--;

49 document.getElementById('container').style.zIndex = g_swapsBeforeAck + 1;	69 document.getElementById('container').style.zIndex = g_swapsBeforeAck + 1;

50 window.webkitRequestAnimationFrame(waitForFinish);	70 window.requestAnimationFrame(waitForFinish);

51 }	71 }

52 }	72 }

53 </script>	73 </script>

54 </head>

55 <body onload="main()">

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

57 </div>

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

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

60 </div>

61 </body>	74 </body>

62 </html>	75 </html>

OLD	NEW