haikuwebkit/LayoutTests/css3/blending/background-blend-mode-tiled...

<!DOCTYPE HTML>

<!-- Test background blend mode with several tiled layers. Test passes if you can see 6 lime squares. -->

<link rel="stylesheet" href="resources/blending-style.css">
<style>
    div {
        margin: 5px;
        width: 100px;
        height: 100px;
        background-blend-mode: difference, normal;
        float: left;
    }

    .tiledSVG {
        background: url('data:image/svg+xml;utf8, \
            <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"> \
                <rect width="100" height="100" fill="%23F00"/> \
            </svg>'
            ) 0 0 /50% 50%, #FF0;
    }

    .tiledGradient {
        background: linear-gradient(to right, #F00 0%, #F00 100%) 0 0 /50% 50%, #FF0;
    }

    .tiledCrossfadeImage {
        background: -webkit-cross-fade(url('data:image/svg+xml;utf8, \
            <svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px"> \
                <rect width="100" height="100" fill="%23F00"/> \
            </svg>'
            ), url('data:image/svg+xml;utf8, \
            <svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px"> \
                <rect width="100" height="100" fill="%23F00"/> \
            </svg>'
            ), 100%) 0 0 /50% 50%, #FF0;
    }

</style>

<div class="tiledSVG"></div>
<div class="tiledSVG accelerated"></div>

<div class="tiledGradient"></div>
<div class="tiledGradient accelerated"></div>

<div class="tiledCrossfadeImage"></div>
<div class="tiledCrossfadeImage accelerated"></div>