OLD | NEW |
1 <html> | 1 <html> |
2 <style> | 2 <style> |
3 div | 3 div |
4 { | 4 { |
5 width: 100px; | 5 width: 100px; |
6 height: 80px; | 6 height: 80px; |
7 margin: 20px; | 7 margin: 20px; |
8 | 8 |
9 transform:translateZ(0); | 9 transform:translateZ(0); |
10 } | 10 } |
11 </style> | 11 </style> |
12 <!--The 1st cross-fade should appear as a simple tartan, with the pattern clippe
d to fit.--> | 12 <!--The 1st cross-fade should appear as a simple tartan, with the pattern clippe
d to fit.--> |
13 <div style="background-image: -webkit-cross-fade(url(resources/red-half-stripe.p
ng), url(resources/green-half-stripe.png), 50%); background-repeat: repeat;"></d
iv> | 13 <div style="background-image: -webkit-cross-fade(url(resources/red-half-stripe.p
ng), url(resources/green-half-stripe.png), 50%); background-repeat: repeat;"></d
iv> |
14 <!--The 2nd cross-fade should appear as a simple tartan, not repeated.--> | 14 <!--The 2nd cross-fade should appear as a simple tartan, not repeated.--> |
15 <div style="background-image: -webkit-cross-fade(url(resources/red-half-stripe.p
ng), url(resources/green-half-stripe.png), 50%); background-repeat: no-repeat;">
</div> | 15 <div style="background-image: -webkit-cross-fade(url(resources/red-half-stripe.p
ng), url(resources/green-half-stripe.png), 50%); background-repeat: no-repeat;">
</div> |
16 <!--The 3rd cross-fade should appear as a simple tartan, with the pattern scaled
to fit exactly in both dimensions.--> | 16 <!--The 3rd cross-fade should appear as a simple tartan, with the pattern scaled
to fit exactly in both dimensions.--> |
17 <div style="background-image: -webkit-cross-fade(url(resources/red-half-stripe.p
ng), url(resources/green-half-stripe.png), 50%); background-repeat: round;"></di
v> | 17 <div style="background-image: -webkit-cross-fade(url(resources/red-half-stripe.p
ng), url(resources/green-half-stripe.png), 50%); background-repeat: round;"></di
v> |
18 <!--The 4th cross-fade should appear as a simple tartan, with the pattern spaced
to fit exactly in both dimensions without scaling.--> | 18 <!--The 4th cross-fade should appear as a simple tartan, with the pattern spaced
to fit exactly in both dimensions without scaling.--> |
19 <div style="background-image: -webkit-cross-fade(url(resources/red-half-stripe.p
ng), url(resources/green-half-stripe.png), 50%); background-repeat: space;"></di
v> | 19 <div style="background-image: -webkit-cross-fade(url(resources/red-half-stripe.p
ng), url(resources/green-half-stripe.png), 50%); background-repeat: space;"></di
v> |
20 </html> | 20 </html> |
OLD | NEW |