| <!DOCTYPE HTML> |
| <head> |
| <link rel="stylesheet" href="resources/blending-style.css"> |
| <style> |
| img { |
| width: 150px; |
| height: 150px; |
| } |
| |
| .div1 { |
| width: 160px; |
| height: 75px; |
| margin: 50px 0px 0px; |
| background-color: cyan; |
| } |
| |
| .div2 { |
| width: 160px; |
| height: 160px; |
| background-image: url("resources/ducky.png"); |
| background-size: 130px 130px; |
| background-repeat: no-repeat; |
| position: relative; |
| top: -40px; |
| left: 20px; |
| } |
| |
| .div3 { |
| width: 80px; |
| height: 150px; |
| background-color: yellow; |
| position: relative; |
| top: 10px; |
| left: -20px; |
| } |
| |
| li { |
| margin: 5px 5px 120px; |
| width: 160px; |
| height: 50px; |
| background-color: magenta; |
| display: block; |
| float: left; |
| } |
| </style> |
| </head> |
| |
| <!-- This file tests interaction of blending with stacking contexts. |
| It uses nested content and then set various attributes to show the interaction of stacking contexts. --> |
| <body> |
| <ul> |
| <li><div class="div1"><div class="div2"><div class="div3"></div></div></div></li> |
| |
| <!-- setting the blendmode will create a new stacking context which causes z-index to change --> |
| <li><div class="div1"><div class="div2" style="mix-blend-mode: multiply"><div class="div3"></div></div></div></li> |
| <li><div class="div1"><div class="div2 composited" style="mix-blend-mode: multiply"><div class="div3"></div></div></div></li> |
| |
| <!-- just setting slight opacity which causes a stacking context. This also causes z-index to be resolved to the stacking context --> |
| <li><div class="div1" style="opacity:.99"><div class="div2"><div class="div3"></div></div></div></li> |
| |
| <!-- blending will now only happen upto the stacking context generated by opacity. Z-index is resolved against the stacking context of the div with the blendmode --> |
| <li><div class="div1" style="opacity:.99"><div class="div2" style="mix-blend-mode: multiply"><div class="div3"></div></div></div></li> |
| <li><div class="div1" style="opacity:.99"><div class="div2 composited" style="mix-blend-mode: multiply"><div class="div3"></div></div></div></li> |
| </ul> |
| </body> |
