cross-fade-tiled.html | Explore in Territory

<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>
chromium/third_party/blink/web_tests/images/cross-fade-tiled.html
