unclosed-nested-layers.w.html (1664B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <link rel="match" href="unclosed-nested-layers-expected.html"> 4 <title>Canvas test: unclosed-nested-layers</title> 5 <h1>unclosed-nested-layers</h1> 6 <p class="desc">Check that unclosed nested layers aren't rendered.</p> 7 <canvas id="canvas" width="1" height="1"> 8 <p class="fallback">FAIL (fallback content)</p> 9 </canvas> 10 <script id='myWorker' type='text/worker'> 11 self.onmessage = msg => { 12 const offscreen = msg.data.canvas; 13 const ctx = offscreen.getContext('2d'); 14 offscreen.width = offscreen.height = 200; 15 16 ctx.fillStyle = 'rgba(0, 0, 255, 1)'; 17 ctx.fillRect(60, 60, 75, 50); 18 19 ctx.beginLayer(); 20 ctx.fillStyle = 'rgba(225, 0, 0, 1)'; 21 ctx.fillRect(50, 50, 75, 50); 22 23 ctx.beginLayer(); 24 ctx.fillStyle = 'rgba(0, 255, 0, 1)'; 25 ctx.fillRect(70, 70, 75, 50); 26 27 ctx.endLayer(); 28 // Missing ctx.endLayer() here. 29 30 self.postMessage('setup ready'); 31 } 32 </script> 33 <script> 34 const blob = new Blob([document.getElementById('myWorker').textContent]); 35 const worker = new Worker(URL.createObjectURL(blob)); 36 var placeholder = document.getElementById('canvas'); 37 var offscreen = placeholder.transferControlToOffscreen(); 38 worker.addEventListener('message', msg => { 39 if(msg.data == 'setup ready') { 40 function draw () { 41 // Wait until frame propagates. 42 if(placeholder.width != 1) { 43 document.documentElement.classList.remove("reftest-wait"); 44 } else { 45 requestAnimationFrame(draw); 46 } 47 } 48 requestAnimationFrame(draw); 49 } 50 }); 51 worker.postMessage({ 52 canvas: offscreen 53 }, [offscreen]); 54 </script>