unclosed-layers.w.html (1488B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <link rel="match" href="unclosed-layers-expected.html"> 4 <title>Canvas test: unclosed-layers</title> 5 <h1>unclosed-layers</h1> 6 <p class="desc">Check that unclosed 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 = 'purple'; 17 ctx.fillRect(60, 60, 75, 50); 18 19 ctx.beginLayer(); 20 ctx.fillRect(40, 40, 75, 50); 21 ctx.fillStyle = 'grey'; 22 ctx.fillRect(50, 50, 75, 50); 23 24 self.postMessage('setup ready'); 25 } 26 </script> 27 <script> 28 const blob = new Blob([document.getElementById('myWorker').textContent]); 29 const worker = new Worker(URL.createObjectURL(blob)); 30 var placeholder = document.getElementById('canvas'); 31 var offscreen = placeholder.transferControlToOffscreen(); 32 worker.addEventListener('message', msg => { 33 if(msg.data == 'setup ready') { 34 function draw () { 35 // Wait until frame propagates. 36 if(placeholder.width != 1) { 37 document.documentElement.classList.remove("reftest-wait"); 38 } else { 39 requestAnimationFrame(draw); 40 } 41 } 42 requestAnimationFrame(draw); 43 } 44 }); 45 worker.postMessage({ 46 canvas: offscreen 47 }, [offscreen]); 48 </script>