<html>
<head>
<title>There should be four bars, equivalent except for the length of the bar.</title>
<style>

div
{
    width: 200px;
    height: 50px;
}

#compositeTiledNormal
{
    background-image: url(resources/stripes-large.png);
    -webkit-transform: translateZ(0);
    background-size: 10px 50px;
}

#compositeTiledCrossfade
{
    background-image: -webkit-cross-fade(url(resources/stripes-large.png), url(resources/stripes-small.png), 1%);
    -webkit-transform: translateZ(0);
    background-size: 10px 50px;
}


#normal
{
    background-image: url(resources/stripes-large.png);
    background-size: 10px 50px;
    background-repeat: no-repeat;
}

#crossfade
{
    background-image: -webkit-cross-fade(url(resources/stripes-large.png), url(resources/stripes-small.png), 1%);
    background-size: 10px 50px;
    background-repeat: no-repeat;
}


</style>
</head>
<body>
<div id="compositeTiledNormal"></div><br/>
<div id="compositeTiledCrossfade"></div>
<br/><br/>
<div id="normal"></div><br/>
<div id="crossfade"></div>
</body>
</html>