<!DOCTYPE HTML>
<head>
    <link rel="stylesheet" href="resources/blending-style.css">
    <style>
        .example {
            width: 180px;
            height: 180px;
            display: inline-block;
        }

        .blendingbg {
            position: relative;
            width: 150px;
            height: 150px;
            background: linear-gradient(to right, #0ff 0%, #00f 25%, #f00 50%, #ff0 75%, #0f0 100%);
        }

        .intermediate {
            position: absolute;
            top: 10px;
            left: 10px;
            width: 150px;
            height: 150px;
            background: linear-gradient(to bottom, #f00 0%, #0f0 100%);
        }

        img {
            position: absolute;
            top: 20px;
            left: 20px;
            width: 150px;
            height: 150px;
        }

        ol {
            margin-bottom: 2em;
        }
    </style>
</head>
<body>
    <ul>
        <ol>
            <li>No blending. Duck should be yellow everywhere.</li>
            <li>Simple blending. Duck should be a horizontal rainbow inside, and blue on overflow.</li>
            <li>Parent is a stacking context. Duck should be a horizontal rainbow inside, and yellow on overflow (since there is no background there to blend with).</li>
            <li>Intermediate parent - no stacking context. Duck should be a vertical gradient inside, and blue on overflow.</li>
            <li>Intermediate parent with grandparent stacking context. Duck should be a vertical gradient inside, and yellow on overflow.</li>
            <li>Intermediate parent has overflow. Duck should be a vertical gradient inside, and overflow is hidden.</li>
        </ol>

        <!-- no blending -->
        <div class="example">
            <div class="blendingbg">
                <img src="resources/ducky.png">
            </div>
        </div>

        <!-- normal blending -->
        <div class="example">
            <div class="blendingbg">
                <img src="resources/ducky.png" style="mix-blend-mode: difference;">
            </div>
        </div>

        <!-- parent is a stacking context -->
        <div class="example">
            <div class="accelerated blendingbg">
                <img src="resources/ducky.png" style="mix-blend-mode: difference;">
            </div>
        </div>

        <!-- intermediate hierarchy -->
        <div class="example">
            <div class="blendingbg">
                <div class="intermediate">
                    <img src="resources/ducky.png" style="mix-blend-mode: difference;">
                </div>
            </div>
        </div>

        <!-- intermediate hierarchy with stacking context -->
        <div class="example">
            <div class="accelerated blendingbg">
                <div class="intermediate">
                    <img src="resources/ducky.png" style="mix-blend-mode: difference;">
                </div>
            </div>
        </div>

        <!-- intermediate hierarchy that overflows -->
        <div class="example">
            <div class="accelerated blendingbg">
                <div class="intermediate" style="overflow: hidden">
                    <img src="resources/ducky.png" style="mix-blend-mode: difference;">
                </div>
            </div>
        </div>
    </ul>
</body>
