<html>
<head>
    <title>The crossfade should appear as two *bottom* halves of a green circle, with a paler green background.</title>
    <style>
    #image {
        background-image: -webkit-cross-fade(url(resources/half-circles.svg), url(resources/green-100.png), 50%);
        width: 100px; height: 100px;
        background-repeat: no-repeat;
    }

    #tiledImage {
        background-image: -webkit-cross-fade(url(resources/half-circles.svg), url(resources/green-100.png), 50%);
        width: 300px; height: 300px;
    }

    div.container {
        overflow: hidden;
        height: 50px;
        width: 100px;
        margin: 10px;
    }
    </style>
    <script>
    function load()
    {
        var normalContainer = document.getElementById("normal");
        normalContainer.scrollTop = normalContainer.scrollHeight;
        var tiledContainer = document.getElementById("tiled");
        tiledContainer.scrollTop = tiledContainer.scrollHeight;
    }
    </script>
</head>
<body onload="load()">
    <div id="normal" class="container">
        <div id="image"></div>
    </div>
    <div id="tiled" class="container">
        <div id="tiledImage"></div>
    </div>
</body>
</html>