| <!DOCTYPE HTML> |
| |
| <html> |
| <head> |
| <title>Worker requestAnimationFrame with WebGLcontext after GPU crash</title> |
| |
| <script id="worker" type="text/worker"> |
| self.onmessage = msg => { |
| const canvas = msg.data.canvas; |
| const gl = canvas.getContext('webgl'); |
| let restored = false; |
| canvas.addEventListener('webglcontextlost', evt => { |
| self.postMessage("context lost"); |
| // To allow restore event to be fired: |
| evt.preventDefault(); |
| }); |
| canvas.addEventListener('webglcontextrestored', evt => { |
| restored = true; |
| self.postMessage("context restored"); |
| }); |
| self.postMessage("setup complete"); |
| |
| function animate() { |
| if (restored) { |
| gl.clearColor(0, 1, 0, 1); |
| } else { |
| gl.clearColor(1, 0, 0, 1) |
| } |
| gl.clear(gl.COLOR_BUFFER_BIT); |
| self.postMessage("animation frame"); |
| requestAnimationFrame(animate); |
| } |
| requestAnimationFrame(animate); |
| } |
| </script> |
| |
| <script> |
| // Test that a WebGL rAF loop keeps running after recovering from a context loss. |
| // Test will timeout if animation fails to resume. |
| |
| function UnexpectedMessage(state, msg) { |
| console.log(`Unexpected message '${msg}' received while in state '${state}'`); |
| window.domAutomationController.send('FAILED'); |
| } |
| |
| window.onload = () => { |
| const worker_blob = new Blob([document.getElementById("worker").textContent]); |
| const worker = new Worker(URL.createObjectURL(worker_blob)); |
| let state = "init"; |
| let frames_after_restore = 0; |
| |
| worker.onmessage = evt => { |
| // Expected sequence (state: expected message): |
| // |
| // "init": expect to receive "setup complete" once |
| // "ready": expect to receive "animation frame" x1 -> request gpu crash |
| // "expecting crash": receive "animation frame" (any count), then "context lost" once |
| // "expecting restore": receive "animation frame" (any count), then "context restored" once |
| // "recover": receive 5+ "animation frame". |
| |
| switch(state) { |
| case "init": |
| if (evt.data == "setup complete") { |
| state = "ready"; |
| } else { |
| UnexpectedMessage(state, evt.data); |
| } |
| break; |
| case "ready": |
| if (evt.data == "animation frame") { |
| state = "expecting crash"; |
| // send message that test is ready for GPU process crash |
| window.domAutomationController.send('LOADED'); |
| } else { |
| UnexpectedMessage(state, evt.data); |
| } |
| break; |
| case "expecting crash": |
| if (evt.data == "animation frame") { |
| break; |
| } |
| if (evt.data == "context lost") { |
| state = "expecting restore"; |
| } else { |
| UnexpectedMessage(state, evt.data); |
| } |
| break; |
| case "expecting restore": |
| if (evt.data == "animation frame") { |
| break; |
| } |
| if (evt.data == "context restored") { |
| state = "recover"; |
| } else { |
| UnexpectedMessage(state, evt.data); |
| } |
| break; |
| case "recover": |
| if (evt.data == "animation frame") { |
| // Wait for enough frames to pass to ensure the pipeline |
| // is not stalled. |
| if (++frames_after_restore == 5) |
| window.domAutomationController.send('SUCCESS'); |
| } else { |
| UnexpectedMessage(state, evt.data); |
| } |
| break; |
| } |
| } |
| let offscreen = document.getElementById('c').transferControlToOffscreen(); |
| worker.postMessage({ |
| canvas: offscreen |
| }, [offscreen]); |
| } |
| </script> |
| |
| </head> |
| <body> |
| <canvas id="c" width="300" height="300" class="nomargin" style="position:absolute; top:0px; left:0px;"></canvas> |
| </body> |
| </html> |
