| 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>Canvas 2D Test: Red Box over Black Background</title> | 11 <title>OffscreenCanvas commit flow on main thread: green square on white backgro
    und.</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> | 17 <script> | 
| 18 var g_swapsBeforeAck = 15; | 18 var g_swapsBeforeAck = 15; | 
| 19 | 19 | 
| 20 function main() | 20 function main() | 
| 21 { | 21 { | 
| 22   draw(); | 22   draw(); | 
| 23   waitForFinish(); | 23   waitForFinish(); | 
| 24 } | 24 } | 
| 25 | 25 | 
| 26 function draw() | 26 function draw() | 
| 27 { | 27 { | 
| 28   var canvas = document.getElementById("c"); | 28   var canvas = document.getElementById("c"); | 
| 29   var c2d = canvas.getContext("2d"); | 29   var offscreenCanvas = canvas.transferControlToOffscreen(); | 
| 30   c2d.clearRect(0, 0, canvas.width, canvas.height); | 30   var gl = offscreenCanvas.getContext("webgl"); | 
| 31   c2d.fillStyle = "rgba(255, 0, 0, 0.5)"; | 31   gl.clearColor(0.0, 1.0, 0.0, 1.0); | 
| 32   c2d.fillRect(50, 50, 100, 100); | 32   gl.clear(gl.COLOR_BUFFER_BIT); | 
|  | 33   gl.commit(); | 
| 33 } | 34 } | 
| 34 | 35 | 
| 35 function waitForFinish() | 36 function waitForFinish() | 
| 36 { | 37 { | 
| 37   if (g_swapsBeforeAck == 0) { | 38   if (g_swapsBeforeAck == 0) { | 
| 38     domAutomationController.setAutomationId(1); | 39     domAutomationController.setAutomationId(1); | 
| 39     domAutomationController.send("SUCCESS"); | 40     domAutomationController.send("SUCCESS"); | 
| 40   } else { | 41   } else { | 
| 41     g_swapsBeforeAck--; | 42     g_swapsBeforeAck--; | 
| 42     document.getElementById('container').style.zIndex = g_swapsBeforeAck + 1; | 43     document.getElementById('container').style.zIndex = g_swapsBeforeAck + 1; | 
| 43     window.webkitRequestAnimationFrame(waitForFinish); | 44     window.webkitRequestAnimationFrame(waitForFinish); | 
| 44   } | 45   } | 
| 45 } | 46 } | 
| 46 </script> | 47 </script> | 
| 47 </head> | 48 </head> | 
| 48 <body onload="main()"> | 49 <body onload="main()"> | 
| 49 <div style="position:relative; width:200px; height:200px; background-color:black
    "> | 50 <div style="position:relative; width:200px; height:200px; background-color:white
    "> | 
| 50 </div> | 51 </div> | 
| 51 <div id="container" style="position:absolute; top:0px; left:0px"> | 52 <div id="container" style="position:absolute; top:0px; left:0px"> | 
| 52 <canvas id="c" width="200" height="200" class="nomargin"></canvas> | 53 <canvas id="c" width="200" height="200" class="nomargin"></canvas> | 
| 53 </div> | 54 </div> | 
| 54 </body> | 55 </body> | 
| 55 </html> | 56 </html> | 
| OLD | NEW | 
|---|