mix-blend-mode-creates-stacking-context.html (1472B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Test: an element with mix-blend-mode other than normal creates a stacking context</title> 5 <link rel="author" title="Mihai Tica" href="mailto:mitica@adobe.com"> 6 <link rel="reviewer" title="Mihai Balan" href="mailto:mibalan@adobe.com"> 7 <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> 8 <meta name="flags" content="dom"> 9 <meta name="assert" content="Test checks that applying a blendmode other than normal 10 to the element must establish a new stacking context."> 11 <script src="/resources/testharness.js"></script> 12 <script src="/resources/testharnessreport.js"></script> 13 </head> 14 <body> 15 <div id="blender"></div> 16 <script type="text/javascript"> 17 var blendModes = ["multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", 18 "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"]; 19 20 test(function() { 21 var blender = document.getElementById("blender"); 22 for (var i = 0; i < blendModes.length; ++i) { 23 blender.style.mixBlendMode = blendModes[i]; 24 var blenderStyle = window.getComputedStyle(blender); 25 assert_not_equals(blenderStyle.zIndex, "auto"); 26 } 27 }); 28 </script> 29 </body> 30 </html>