1 <!DOCTYPE html>
2 <html><head>
3 <title>CSS Backgrounds and Borders Test: background-size - initial and supported values</title>
4 <link href="http://www.intel.com" rel="author" title="Intel">
5 <link href="http://www.w3.org/TR/css3-background/#the-background-size" rel="help">
6 <meta content="dom" name="flags">
7 <meta content="Check if background-size initial value is auto and supports values auto, cover and contain" name="assert">
8 <script src="/resources/testharness.js"></script>
9 <script src="/resources/testharnessreport.js"></script>
10 </head>
11 <body>
12 <div id="log"></div>
13 <div id="test"></div>
14 <script>
15 test(function() {
16 assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
17 "auto", "background-size initial value");
18 }, "background-size_initial");
19
20 document.getElementById("test").style.backgroundSize = "auto";
21 test(function() {
22 assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
23 "auto", "background-size supporting value");
24 }, "background-size_auto");
25
26 document.getElementById("test").style.backgroundSize = "cover";
27 test(function() {
28 assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
29 "cover", "background-size supporting value");
30 }, "background-size_cover");
31
32 document.getElementById("test").style.backgroundSize = "contain";
33 test(function() {
34 assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
35 "contain", "background-size supporting value");
36 }, "background-size_contain");
37
38 document.getElementById("test").style.backgroundSize = "0px";
39 test(function() {
40 assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
41 "0px", "background-size supporting value");
42 }, "background-size_length_zero");
43
44 document.getElementById("test").style.backgroundSize = "-0px";
45 test(function() {
46 assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
47 "0px", "background-size supporting value");
48 }, "background-size_length_negative_zero");
49
50 document.getElementById("test").style.backgroundSize = "+0px";
51 test(function() {
52 assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
53 "0px", "background-size supporting value");
54 }, "background-size_length_positive_zero");
55
56 document.getElementById("test").style.backgroundSize = "15px";
57 test(function() {
58 assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
59 "15px", "background-size supporting value");
60 }, "background-size_length_normal");
61
62 document.getElementById("test").style.backgroundSize = "0%";
63 test(function() {
64 assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
65 "0%", "background-size supporting value");
66 }, "background-size_percentage_min");
67
68 document.getElementById("test").style.backgroundSize = "50%";
69 test(function() {
70 assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
71 "50%", "background-size supporting value");
72 }, "background-size_percentage_normal");
73
74 document.getElementById("test").style.backgroundSize = "100%";
75 test(function() {
76 assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
77 "100%", "background-size supporting value");
78 }, "background-size_percentage_max");
79
80 document.getElementById("test").style.backgroundSize = "auto auto";
81 test(function() {
82 assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
83 "auto auto", "background-size supporting value");
84 }, "background-size_auto_auto");
85
86 document.getElementById("test").style.backgroundSize = "auto 15px";
87 test(function() {
88 assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
89 "auto 15px", "background-size supporting value");
90 }, "background-size_auto_length");
91
92 document.getElementById("test").style.backgroundSize = "auto 50%";
93 test(function() {
94 assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
95 "auto 50%", "background-size supporting value");
96 }, "background-size_auto_percentage");
97
98 document.getElementById("test").style.backgroundSize = "15px auto";
99 test(function() {
100 assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
101 "15px auto", "background-size supporting value");
102 }, "background-size_length_auto");
103
104 document.getElementById("test").style.backgroundSize = "15px 15px";
105 test(function() {
106 assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
107 "15px 15px", "background-size supporting value");
108 }, "background-size_length_length");
109
110 document.getElementById("test").style.backgroundSize = "15px 50%";
111 test(function() {
112 assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
113 "15px 50%", "background-size supporting value");
114 }, "background-size_length_percentage");
115
116 document.getElementById("test").style.backgroundSize = "50% auto";
117 test(function() {
118 assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
119 "50% auto", "background-size supporting value");
120 }, "background-size_percentage_auto");
121
122 document.getElementById("test").style.backgroundSize = "50% 15px";
123 test(function() {
124 assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
125 "50% 15px", "background-size supporting value");
126 }, "background-size_percentage_length");
127
128 document.getElementById("test").style.backgroundSize = "50% 50%";
129 test(function() {
130 assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
131 "50% 50%", "background-size supporting value");
132 }, "background-size_percentage_percentage");
133 </script>
134
135
136 </body></html>