<!DOCTYPE HTML>
<!-- Test that an element having mix-blend-mode applied blends only with the contents of the parent stacking context.
    Test that the contents of a blended element blend as a whole with the parent stacking context.-->

<link rel="stylesheet" href="resources/blending-style.css">
<style>
    body {
        background: blue;
    }

    div {
        margin: 20px;
        width: 60px;
        height: 60px;
    }

    .parent {
        position: relative;
        z-index: -1;
        float: left;
        background: violet;
    }

    .blender {
        background: url('resources/ducky.png') no-repeat 0 0 /100% 100%, green;
        mix-blend-mode: multiply;
    }

    .child {
        background: orange;
        z-index: 0;
        position: absolute;
    }
</style>

<div class="parent">
    <div class="blender">
        <div class="child"></div>
    </div>
</div>

<div class="parent composited">
    <div class="blender">
        <div class="child"></div>
    </div>
</div>

<div class="parent">
    <div class="blender composited">
        <div class="child"></div>
    </div>
</div>

<div class="parent composited">
    <div class="blender composited">
        <div class="child"></div>
    </div>
</div>

<div class="parent">
    <div class="blender">
        <div class="child composited"></div>
    </div>
</div>

<div class="parent composited">
    <div class="blender">
        <div class="child composited"></div>
    </div>
</div>

<div class="parent">
    <div class="blender composited">
        <div class="child composited"></div>
    </div>
</div>

<div class="parent composited">
    <div class="blender composited">
        <div class="child composited"></div>
    </div>
</div>
