Unprefix -webkit-cross-fade()
[WebKit-https.git] / LayoutTests / fast / css / getComputedStyle / computed-style-cross-fade.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <script src="../../../resources/js-test-pre.js"></script>
5 </head>
6 <body>
7 <script type="text/javascript">
8
9 function testCrossfade(css, queryProp)
10 {
11     var div = document.createElement('div');
12     div.setAttribute('style', css);
13     document.body.appendChild(div);
14
15     var result = getComputedStyle(div).getPropertyValue(queryProp);
16     document.body.removeChild(div);
17     return result;
18 }
19
20 debug('<h2>cross-fade</h2>');
21
22 // Valid
23
24 shouldBe('testCrossfade("opacity: 500%", "opacity")', '"1"');
25
26 debug('Prefixed');
27
28 shouldBe('testCrossfade("background-image: -webkit-cross-fade(url(dummy://example.png), url(dummy://example.png), 50%)", "background-image")', '"-webkit-cross-fade(url(dummy://example.png), url(dummy://example.png), 0.5)"');
29 shouldBe('testCrossfade("background-image: -webkit-cross-fade(-webkit-cross-fade(url(dummy://a.png), url(dummy://b.png), 25%), url(dummy://example.png), 50%)", "background-image")', '"-webkit-cross-fade(-webkit-cross-fade(url(dummy://a.png), url(dummy://b.png), 0.25), url(dummy://example.png), 0.5)"');
30 shouldBe('testCrossfade("background-image: -webkit-cross-fade(url(dummy://c.png), -webkit-cross-fade(url(dummy://a.png), url(dummy://b.png), 25%), 50%)", "background-image")',
31     '"-webkit-cross-fade(url(dummy://c.png), -webkit-cross-fade(url(dummy://a.png), url(dummy://b.png), 0.25), 0.5)"');
32 shouldBe('testCrossfade("background-image: -webkit-cross-fade(-webkit-linear-gradient(black, white), url(dummy://example.png), 10%)", "background-image")', '"-webkit-cross-fade(-webkit-linear-gradient(top, black, white), url(dummy://example.png), 0.1)"');
33 shouldBe('testCrossfade("background-image: -webkit-cross-fade(url(dummy://example.png), url(dummy://example.png), 1.0)", "background-image")', '"-webkit-cross-fade(url(dummy://example.png), url(dummy://example.png), 1)"');
34 shouldBe('testCrossfade("background-image: -webkit-cross-fade(url(dummy://example.png), url(dummy://example.png), 0.5)", "background-image")', '"-webkit-cross-fade(url(dummy://example.png), url(dummy://example.png), 0.5)"');
35
36 shouldBe('testCrossfade("background-image: -webkit-cross-fade(url(dummy://example.png), url(dummy://example.png), 5.0)", "background-image")', '"-webkit-cross-fade(url(dummy://example.png), url(dummy://example.png), 1)"');
37 shouldBe('testCrossfade("background-image: -webkit-cross-fade(url(dummy://example.png), url(dummy://example.png), 700%)", "background-image")', '"-webkit-cross-fade(url(dummy://example.png), url(dummy://example.png), 1)"');
38
39 shouldBe('testCrossfade("background-image: -webkit-cross-fade(url(dummy://example.png), url(dummy://example.png), -20)", "background-image")', '"-webkit-cross-fade(url(dummy://example.png), url(dummy://example.png), 0)"');
40
41 debug('<h2>Unprefixed</h2>');
42
43 shouldBe('testCrossfade("background-image: cross-fade(url(dummy://example.png), url(dummy://example.png), 50%)", "background-image")', '"cross-fade(url(dummy://example.png), url(dummy://example.png), 0.5)"');
44 shouldBe('testCrossfade("background-image: cross-fade(url(dummy://example.png), url(dummy://example.png), 1.0)", "background-image")', '"cross-fade(url(dummy://example.png), url(dummy://example.png), 1)"');
45
46 debug('<h2>Mixed</h2>');
47
48 shouldBe('testCrossfade("background-image: -webkit-cross-fade(cross-fade(url(dummy://a.png), url(dummy://b.png), 25%), url(dummy://example.png), 50%)", "background-image")',
49     '"-webkit-cross-fade(cross-fade(url(dummy://a.png), url(dummy://b.png), 0.25), url(dummy://example.png), 0.5)"');
50 shouldBe('testCrossfade("background-image: -webkit-cross-fade(cross-fade(url(dummy://a.png), url(dummy://b.png), 25%), cross-fade(url(dummy://a.png), url(dummy://b.png), 25%), 50%)", "background-image")',
51     '"-webkit-cross-fade(cross-fade(url(dummy://a.png), url(dummy://b.png), 0.25), cross-fade(url(dummy://a.png), url(dummy://b.png), 0.25), 0.5)"');
52 shouldBe('testCrossfade("background-image: cross-fade(cross-fade(url(dummy://a.png), url(dummy://b.png), 25%), -webkit-cross-fade(url(dummy://a.png), url(dummy://b.png), 25%), 50%)", "background-image")',
53         '"cross-fade(cross-fade(url(dummy://a.png), url(dummy://b.png), 0.25), -webkit-cross-fade(url(dummy://a.png), url(dummy://b.png), 0.25), 0.5)"');
54
55 debug('<h2>Invalid values</h2>');
56
57 shouldBe('testCrossfade("background-image: -webkit-cross-fade(url(dummy://example.png), url(dummy://example.png))", "background-image")', '"none"');
58 shouldBe('testCrossfade("background-image: -webkit-cross-fade(url(dummy://example.png), url(dummy://example.png),)", "background-image")', '"none"');
59
60 shouldBe('testCrossfade("background-image: cross-fade(url(dummy://example.png), url(dummy://example.png))", "background-image")', '"none"');
61 shouldBe('testCrossfade("background-image: cross-fade(url(dummy://example.png), url(dummy://example.png),)", "background-image")', '"none"');
62 shouldBe('testCrossfade("background-image: cross-fade(url(dummy://example.png))", "background-image")', '"none"');
63 shouldBe('testCrossfade("background-image: cross-fade(), url(dummy://example.png))", "background-image")', '"none"');
64 shouldBe('testCrossfade("background-image: cross-fade(url(", "background-image")', '"none"');
65 shouldBe('testCrossfade("background-image: cross-fade(10px 20% 5px #bbb)", "background-image")', '"none"');
66 shouldBe('testCrossfade("background-image: cross-fade(cross-fade(cross-fade()))", "background-image")', '"none"');
67 shouldBe('testCrossfade("background-image: cross-fade(20%, url(dummy://a.png), url(dummy://b.png))", "background-image")', '"none"');
68 shouldBe('testCrossfade("background-image: cross-fade(url(dummy://a.png),)", "background-image")', '"none"');
69 shouldBe('testCrossfade("background-image: cross-fade(,)", "background-image")', '"none"');
70 shouldBe('testCrossfade("background-image: cross-fade(,url(dummy://a.png))", "background-image")', '"none"');
71 shouldBe('testCrossfade("background-image: cross-fade(,,,,,)", "background-image")', '"none"');
72
73
74 </script>
75
76 <script src="../../../resources/js-test-post.js"></script>
77 </body>
78 </html>