OLD | NEW |
1 <html> | 1 <html> |
2 <head> | 2 <head> |
3 <title>There should be four bars, equivalent except for the length of the bar.</
title> | 3 <title>There should be four bars, equivalent except for the length of the bar.</
title> |
4 <style> | 4 <style> |
5 | 5 |
6 div | 6 div |
7 { | 7 { |
8 width: 200px; | 8 width: 200px; |
9 height: 50px; | 9 height: 50px; |
10 } | 10 } |
11 | 11 |
12 #compositeTiledNormal | 12 #compositeTiledNormal |
13 { | 13 { |
14 background-image: url(resources/stripes-large.png); | 14 background-image: url(resources/stripes-large.png); |
15 -webkit-transform: translateZ(0); | 15 transform: translateZ(0); |
16 background-size: 10px 50px; | 16 background-size: 10px 50px; |
17 } | 17 } |
18 | 18 |
19 #compositeTiledCrossfade | 19 #compositeTiledCrossfade |
20 { | 20 { |
21 background-image: -webkit-cross-fade(url(resources/stripes-large.png), url(r
esources/stripes-small.png), 1%); | 21 background-image: -webkit-cross-fade(url(resources/stripes-large.png), url(r
esources/stripes-small.png), 1%); |
22 -webkit-transform: translateZ(0); | 22 transform: translateZ(0); |
23 background-size: 10px 50px; | 23 background-size: 10px 50px; |
24 } | 24 } |
25 | 25 |
26 | 26 |
27 #normal | 27 #normal |
28 { | 28 { |
29 background-image: url(resources/stripes-large.png); | 29 background-image: url(resources/stripes-large.png); |
30 background-size: 10px 50px; | 30 background-size: 10px 50px; |
31 background-repeat: no-repeat; | 31 background-repeat: no-repeat; |
32 } | 32 } |
33 | 33 |
34 #crossfade | 34 #crossfade |
35 { | 35 { |
36 background-image: -webkit-cross-fade(url(resources/stripes-large.png), url(r
esources/stripes-small.png), 1%); | 36 background-image: -webkit-cross-fade(url(resources/stripes-large.png), url(r
esources/stripes-small.png), 1%); |
37 background-size: 10px 50px; | 37 background-size: 10px 50px; |
38 background-repeat: no-repeat; | 38 background-repeat: no-repeat; |
39 } | 39 } |
40 | 40 |
41 | 41 |
42 </style> | 42 </style> |
43 </head> | 43 </head> |
44 <body> | 44 <body> |
45 <div id="compositeTiledNormal"></div><br/> | 45 <div id="compositeTiledNormal"></div><br/> |
46 <div id="compositeTiledCrossfade"></div> | 46 <div id="compositeTiledCrossfade"></div> |
47 <br/><br/> | 47 <br/><br/> |
48 <div id="normal"></div><br/> | 48 <div id="normal"></div><br/> |
49 <div id="crossfade"></div> | 49 <div id="crossfade"></div> |
50 </body> | 50 </body> |
51 </html> | 51 </html> |
OLD | NEW |