opacity-keep-intermediate-surface-too-long.html (1382B)
1 <!DOCTYPE html> 2 <html lang="en" class="reftest-wait"><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)"><!-- create reference frame --> 19 <div class="wrapper"><!-- this starts out without a transform but later gets transformed --> 20 <div class="opacity"><!-- this creates a ContainerLayer with an intermediate surface for group opacity --> 21 <div class="border"><!-- this adds another visual element into the group opacity --> 22 <canvas id="canvas" width="200" height="200"></canvas><!-- this causes all ancestor effects to become active ContainerLayers --> 23 </div> 24 </div> 25 </div> 26 </div> 27 28 <script> 29 30 var canvas = document.getElementById('canvas'); 31 var wrapper = document.querySelector('.wrapper'); 32 canvas.width = 200; 33 canvas.height = 200; 34 var ctx = canvas.getContext('2d'); 35 ctx.fillStyle = 'red'; 36 ctx.fillRect(0, 0, 200, 200); 37 38 function doTest() { 39 ctx.fillStyle = 'lime'; 40 ctx.fillRect(0, 0, 200, 200); 41 wrapper.style.transform = 'translateX(1px)'; 42 document.documentElement.removeAttribute("class"); 43 } 44 document.addEventListener("MozReftestInvalidate", doTest); 45 46 </script> 47 </body></html>