OLD | NEW |
1 <html> | 1 <html> |
2 <style> | 2 <style> |
3 div | 3 div |
4 { | 4 { |
5 width: 100px; | 5 width: 100px; |
6 height: 100px; | 6 height: 100px; |
7 margin: 10px; | 7 margin: 10px; |
8 | 8 |
9 » -webkit-transform:translateZ(0); | 9 » transform:translateZ(0); |
10 border: 1px solid black; | 10 border: 1px solid black; |
11 } | 11 } |
12 </style> | 12 </style> |
13 <!--The first cross-fade should appear as a 100% green square, 100x100px.--> | 13 <!--The first cross-fade should appear as a 100% green square, 100x100px.--> |
14 <div style="background-image: -webkit-cross-fade(url(resources/red-10.png), url(
resources/green-10.png), 100%); background-repeat: repeat;"></div> | 14 <div style="background-image: -webkit-cross-fade(url(resources/red-10.png), url(
resources/green-10.png), 100%); background-repeat: repeat;"></div> |
15 <!--The second cross-fade should appear as a 100% green square, 100x100px.--> | 15 <!--The second cross-fade should appear as a 100% green square, 100x100px.--> |
16 <div style="background-image: -webkit-cross-fade(url(resources/green-100.png), u
rl(resources/red-100.png), 0%);"></div> | 16 <div style="background-image: -webkit-cross-fade(url(resources/green-100.png), u
rl(resources/red-100.png), 0%);"></div> |
17 <!--The third cross-fade should appear as a blue-green square, 100x100px.--> | 17 <!--The third cross-fade should appear as a blue-green square, 100x100px.--> |
18 <div style="background-image: -webkit-cross-fade(url(resources/blue-100.png), ur
l(resources/green-100.png), 50%);"></div> | 18 <div style="background-image: -webkit-cross-fade(url(resources/blue-100.png), ur
l(resources/green-100.png), 50%);"></div> |
19 </html> | 19 </html> |
OLD | NEW |