<!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>