background-blend-mode-overlapping-accelerated-elements.html

<!DOCTYPE HTML>
<html>
<head>
<style>
    div {
        width: 160px;
        height: 160px;
        transform: rotateY(30deg) rotateX(-30deg);
        background-blend-mode: difference;
        color: black;
    }

    .a {
        background: url('resources/white_square.svg') no-repeat, rgba(55, 55, 99, 1);
    }

    .b, .c {
        width: 120px;
        height: 120px;
    }

    .b {
        background: url('resources/white_square.svg') no-repeat, rgba(200, 200, 156, 1);
        color: yellow;
    }

    .c {
        background: url('resources/white_square.svg') no-repeat, rgba(100, 100, 56, 1);
        color: white;
        margin-top: -90px;
    }

</style>
</head>
<!-- Test to validate that background blending is working properly for series of hardware accelerated elements. -->
<body>
    <!-- Simple test: parent and child, both accelerated, both having background-blend-mode set and some text. The child shouldn't blend with the parent's content. The text should keep its color. -->
    <div class="a">sample<div class="b">sample</div></div>

    <!-- Parent and two children, all accelerated, all having background-blend-mode set and some text. None of the elements should blend with any of the others. The text should keep its color. -->
    <div class="a">sample<div class="b">sample</div>sample<div class="c">sample</div></div>

    <!-- Parent and two children, all accelerated, all having background-blend-mode set and some text. The second child has z-index set, causing it to be painted below the first child. None of the elements should blend with any of the others. The text should keep its color. -->
    <div class="a">sample
        <div class="b">sample</div>
        <div class="c" style="position:absolute; z-index: -1">sample sample sample sample sample sample sample sample sample sample sample sample</div>
    </div>
</body>
chromium/third_party/blink/web_tests/css3/blending/background-blend-mode-overlapping-accelerated-elements.html
