2d.layer.restore-style.w.html (1493B)
1 <!DOCTYPE html> 2 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> 3 <meta charset="UTF-8"> 4 <html class="reftest-wait"> 5 <link rel="match" href="2d.layer.restore-style-expected.html"> 6 <meta name=fuzzy content="maxDifference=0-1; totalPixels=0-950"> 7 <title>Canvas test: 2d.layer.restore-style</title> 8 <h1>2d.layer.restore-style</h1> 9 <p class="desc">Test that ensure layers restores style values upon endLayer.</p> 10 <canvas id="canvas" width="200" height="200"> 11 <p class="fallback">FAIL (fallback content)</p> 12 </canvas> 13 <script id='myWorker' type='text/worker'> 14 self.onmessage = function(e) { 15 const canvas = new OffscreenCanvas(200, 200); 16 const ctx = canvas.getContext('2d'); 17 18 ctx.fillStyle = 'rgba(0,0,255,1)'; 19 ctx.fillRect(50, 50, 75, 50); 20 ctx.globalAlpha = 0.5; 21 22 ctx.beginLayer(); 23 ctx.fillStyle = 'rgba(225, 0, 0, 1)'; 24 ctx.fillRect(60, 60, 75, 50); 25 ctx.endLayer(); 26 27 ctx.fillRect(70, 70, 75, 50); 28 29 const bitmap = canvas.transferToImageBitmap(); 30 self.postMessage(bitmap, bitmap); 31 }; 32 </script> 33 <script> 34 const blob = new Blob([document.getElementById('myWorker').textContent]); 35 const worker = new Worker(URL.createObjectURL(blob)); 36 worker.addEventListener('message', msg => { 37 const outputCtx = document.getElementById("canvas").getContext('2d'); 38 outputCtx.drawImage(msg.data, 0, 0); 39 document.documentElement.classList.remove("reftest-wait"); 40 }); 41 worker.postMessage(null); 42 </script> 43 </html>