invalidated-blendmode-sorting.html (844B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <head> 4 <style> 5 div { 6 width: 200px; 7 height: 200px; 8 } 9 .sort-marker { 10 position: fixed; 11 background-color: green; 12 } 13 .wrapper { 14 position: absolute; 15 isolation: isolate; 16 } 17 .inner { 18 position: absolute; 19 background-color: blue; 20 } 21 </style> 22 </head> 23 <body> 24 <div class="sort-marker"></div> 25 <div class="wrapper"> 26 <div class="inner" style="left: 5px; top: 5px; mix-blend-mode:screen"></div> 27 <div class="inner" id="move" style="left: 220px;"></div> 28 </div> 29 <div class="sort-marker" style="left: 20px; top: 20px;"></div> 30 </body> 31 <script> 32 function doTest() { 33 document.getElementById("move").style.left = "221px"; 34 document.documentElement.removeAttribute("class"); 35 } 36 document.addEventListener("MozReftestInvalidate", doTest); 37 </script> 38 </html>