content/test/data/gpu/pixel_acceleratedOffscreen2d_commit_worker.html - Issue 2359723003: Implement OffscreenCanvas Accelerated 2D commit()

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

Issue 2359723003: Implement OffscreenCanvas Accelerated 2D commit() (Closed)

Patch Set: Fix rebase error Created 4 years, 2 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:

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 commit flow on worker thread: red square on white backgro und.</title>	11 <title>OffscreenCanvas 2d commit flow on worker thread: blue square on white bac kground.</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 self.onmessage = function(e) {	18 self.onmessage = function(e) {

19 var transferredOffscreenCanvas = e.data;	19 var transferredCanvas = e.data;

20 var gl = transferredOffscreenCanvas.getContext("webgl");	20 var offscreen2d = transferredCanvas.getContext("2d");

21 gl.clearColor(1.0, 0.0, 0.0, 1.0);	21 offscreen2d.fillStyle = "blue";

22 gl.clear(gl.COLOR_BUFFER_BIT);	22 offscreen2d.fillRect(0, 0, transferredCanvas.width, transferredCanvas.height );

23 gl.commit();	23 offscreen2d.commit();

24 self.postMessage("");	24 self.postMessage("");

25 };	25 };

26 </script>	26 </script>

27 <script>	27 <script>

28 var g_swapsBeforeAck = 15;	28 var g_swapsBeforeAck = 15;

29	29

30 function makeWorker(script) {	30 function makeWorker(script)

	31 {

31 var blob = new Blob([script]);	32 var blob = new Blob([script]);

32 return new Worker(URL.createObjectURL(blob));	33 return new Worker(URL.createObjectURL(blob));

33 }	34 }

34	35

35 function main()

36 {

37 draw();

38 }

39

40 function draw()

41 {

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

43 var offscreenCanvas = canvas.transferControlToOffscreen();

44 var worker = makeWorker(document.getElementById("myWorker").textContent);

45 worker.postMessage(offscreenCanvas, [offscreenCanvas]);

46 worker.onmessage = function (e) {

47 waitForFinish();

48 }

49 }

50

51 function waitForFinish()	36 function waitForFinish()

52 {	37 {

53 if (g_swapsBeforeAck == 0) {	38 if (g_swapsBeforeAck == 0) {

54 domAutomationController.setAutomationId(1);	39 domAutomationController.setAutomationId(1);

55 domAutomationController.send("SUCCESS");	40 domAutomationController.send("SUCCESS");

56 } else {	41 } else {

57 g_swapsBeforeAck--;	42 g_swapsBeforeAck--;

58 document.getElementById('container').style.zIndex = g_swapsBeforeAck + 1;	43 document.getElementById('container').style.zIndex = g_swapsBeforeAck + 1;

59 window.webkitRequestAnimationFrame(waitForFinish);	44 window.webkitRequestAnimationFrame(waitForFinish);

60 }	45 }

61 }	46 }

	47

	48 function main()

	49 {

	50 var canvas2D = document.getElementById("c");

	51 var offscreenCanvas = canvas2D.transferControlToOffscreen();

	52 var worker = makeWorker(document.getElementById("myWorker").textContent);

	53 worker.postMessage(offscreenCanvas, [offscreenCanvas]);

	54 worker.onmessage = function (e) {

	55 waitForFinish();

	56 };

	57 }

62 </script>	58 </script>

63 </head>	59 </head>

64 <body onload="main()">	60 <body onload="main()">

65 <div style="position:relative; width:200px; height:200px; background-color:white ">	61 <div style="position:relative; width:350px; height:350px; background-color:white ">

66 </div>	62 </div>

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

68 <canvas id="c" width="200" height="200" class="nomargin"></canvas>	64 <canvas id="c" width="320" height="320" class="nomargin"></canvas>

69 </div>	65 </div>

70 </body>	66 </body>

71 </html>	67 </html>

OLD	NEW