blob: 28c48c4aca8104df83f09e220e68be9a3267b947 [file] [log] [blame]
<html>
<style>
div
{
width: 100px;
height: 80px;
margin: 20px;
will-change: transform;
}
</style>
<!--The 1st cross-fade should appear as a simple tartan, with the pattern clipped to fit.-->
<div style="background-image: -webkit-cross-fade(url(resources/red-half-stripe.png), url(resources/green-half-stripe.png), 50%); background-repeat: repeat;"></div>
<!--The 2nd cross-fade should appear as a simple tartan, not repeated.-->
<div style="background-image: -webkit-cross-fade(url(resources/red-half-stripe.png), url(resources/green-half-stripe.png), 50%); background-repeat: no-repeat;"></div>
<!--The 3rd cross-fade should appear as a simple tartan, with the pattern scaled to fit exactly in both dimensions.-->
<div style="background-image: -webkit-cross-fade(url(resources/red-half-stripe.png), url(resources/green-half-stripe.png), 50%); background-repeat: round;"></div>
<!--The 4th cross-fade should appear as a simple tartan, with the pattern spaced to fit exactly in both dimensions without scaling.-->
<div style="background-image: -webkit-cross-fade(url(resources/red-half-stripe.png), url(resources/green-half-stripe.png), 50%); background-repeat: space;"></div>
</html>