| <html> |
| <style> |
| div |
| { |
| width: 100px; |
| height: 80px; |
| margin: 20px; |
| |
| transform:translateZ(0); |
| } |
| </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> |
