blob: 7ea5d742e11f7ad791fd921982e7392718220631 [file] [log] [blame]
<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>