opacity-keep-intermediate-surface-too-long-ref.html (782B)
1 <!DOCTYPE html> 2 <html lang="en"><head> 3 <meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta charset="utf-8"> 4 <title>Clicking the canvas should turn it green (and shift it slighly)</title> 5 6 <style> 7 8 canvas { 9 border: 10px solid black; 10 } 11 12 .opacity { 13 opacity: 0.8; 14 } 15 16 </style> 17 18 </head><body><div style="transform: translateX(1px)"> 19 <div class="wrapper" style="transform: translateX(1px);"> 20 <div class="opacity"> 21 <div class="border"> 22 <canvas id="canvas" width="200" height="200"></canvas> 23 </div> 24 </div> 25 </div> 26 </div> 27 28 <script> 29 30 var canvas = document.getElementById('canvas'); 31 canvas.width = 200; 32 canvas.height = 200; 33 var ctx = canvas.getContext('2d'); 34 ctx.fillStyle = 'lime'; 35 ctx.fillRect(0, 0, 200, 200); 36 </script> 37 </body></html>