1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
|
<!DOCTYPE html>
<html>
<script src="../../resources/js-test.js"></script>
<div id="test"> </div>
<script>
description("Tests background shortand property with background-size");
var e = document.getElementById('test');
var computedStyle = window.getComputedStyle(e, null);
function checkStyle() {
var before = e.style.background;
e.style.background = 'none';
e.style.background = before;
return (e.style.background == before);
}
function checkComputedStyleValue() {
var before = window.getComputedStyle(e, null).getPropertyValue('background');
e.style.background = 'none';
e.style.background = before;
return (window.getComputedStyle(e, null).getPropertyValue('background') == before);
}
e.style.background = 'center / cover red url("dummy://test.png") no-repeat border-box';
shouldBeEqualToString("e.style.background", 'url("dummy://test.png") center center / cover no-repeat border-box border-box red');
shouldBeEqualToString("e.style.backgroundSize", 'cover');
shouldBe("checkStyle()", "true");
shouldBeEqualToString('computedStyle.getPropertyValue("background")', 'rgb(255, 0, 0) url("dummy://test.png") no-repeat scroll 50% 50% / cover border-box border-box');
shouldBeEqualToString('computedStyle.getPropertyValue("background-size")', 'cover');
shouldBe("checkComputedStyleValue()", "true");
debug("")
e.style.background = 'red 20px / contain url("dummy://test.png") no-repeat padding-box';
shouldBeEqualToString("e.style.background", 'url("dummy://test.png") 20px center / contain no-repeat padding-box padding-box red');
shouldBeEqualToString("e.style.backgroundSize", 'contain');
shouldBe("checkStyle()", "true");
shouldBeEqualToString('computedStyle.getPropertyValue("background")', 'rgb(255, 0, 0) url("dummy://test.png") no-repeat scroll 20px 50% / contain padding-box padding-box');
shouldBeEqualToString('computedStyle.getPropertyValue("background-size")', 'contain');
shouldBe("checkComputedStyleValue()", "true");
debug("")
e.style.background = 'red url("dummy://test.png") 50px 60px / 50% 75% no-repeat';
shouldBeEqualToString("e.style.background", 'url("dummy://test.png") 50px 60px / 50% 75% no-repeat red');
shouldBeEqualToString("e.style.backgroundSize", '50% 75%');
shouldBe("checkStyle()", "true");
shouldBeEqualToString('computedStyle.getPropertyValue("background")', 'rgb(255, 0, 0) url("dummy://test.png") no-repeat scroll 50px 60px / 50% 75% padding-box border-box');
shouldBeEqualToString('computedStyle.getPropertyValue("background-size")', '50% 75%');
shouldBe("checkComputedStyleValue()", "true");
debug("")
e.style.background = 'red url("dummy://test.png") repeat top left / 100px 200px border-box content-box';
shouldBeEqualToString("e.style.background", 'url("dummy://test.png") left top / 100px 200px repeat border-box content-box red');
shouldBeEqualToString("e.style.backgroundSize", '100px 200px');
shouldBe("checkStyle()", "true");
shouldBeEqualToString('computedStyle.getPropertyValue("background")', 'rgb(255, 0, 0) url("dummy://test.png") repeat scroll 0% 0% / 100px 200px border-box content-box');
shouldBeEqualToString('computedStyle.getPropertyValue("background-size")', '100px 200px');
shouldBe("checkComputedStyleValue()", "true");
debug("")
e.style.background = 'red url("dummy://test.png") repeat 50% / auto auto content-box padding-box';
shouldBeEqualToString("e.style.background", 'url("dummy://test.png") 50% center / auto repeat content-box padding-box red');
shouldBeEqualToString("e.style.backgroundSize", 'auto');
shouldBe("checkStyle()", "true");
shouldBeEqualToString('computedStyle.getPropertyValue("background")', 'rgb(255, 0, 0) url("dummy://test.png") repeat scroll 50% 50% / auto content-box padding-box');
shouldBeEqualToString('computedStyle.getPropertyValue("background-size")', 'auto');
shouldBe("checkComputedStyleValue()", "true");
debug("")
e.style.background = 'url("dummy://test.png") red 50px 60px / 50% no-repeat fixed';
shouldBeEqualToString("e.style.background", 'url("dummy://test.png") 50px 60px / 50% no-repeat fixed red');
shouldBeEqualToString("e.style.backgroundSize", '50%');
shouldBe("checkStyle()", "true");
shouldBeEqualToString('computedStyle.getPropertyValue("background")', 'rgb(255, 0, 0) url("dummy://test.png") no-repeat fixed 50px 60px / 50% padding-box border-box');
shouldBeEqualToString('computedStyle.getPropertyValue("background-size")', '50%');
shouldBe("checkComputedStyleValue()", "true");
debug("")
e.style.background = 'red repeat scroll padding-box border-box top left / 100px url("dummy://test.png")';
shouldBeEqualToString("e.style.background", 'url("dummy://test.png") left top / 100px repeat scroll padding-box border-box red');
shouldBeEqualToString("e.style.backgroundSize", '100px');
shouldBe("checkStyle()", "true");
shouldBeEqualToString('computedStyle.getPropertyValue("background")', 'rgb(255, 0, 0) url("dummy://test.png") repeat scroll 0% 0% / 100px padding-box border-box');
shouldBeEqualToString('computedStyle.getPropertyValue("background-size")', '100px');
shouldBe("checkComputedStyleValue()", "true");
debug("")
e.style.background = '50% / auto fixed url("dummy://test.png") repeat content-box red';
shouldBeEqualToString("e.style.background", 'url("dummy://test.png") 50% center / auto repeat fixed content-box content-box red');
shouldBeEqualToString("e.style.backgroundSize", 'auto');
shouldBe("checkStyle()", "true");
shouldBeEqualToString('computedStyle.getPropertyValue("background")', 'rgb(255, 0, 0) url("dummy://test.png") repeat fixed 50% 50% / auto content-box content-box');
shouldBeEqualToString('computedStyle.getPropertyValue("background-size")', 'auto');
shouldBe("checkComputedStyleValue()", "true");
debug("")
e.style.background = "top left / 50%";
shouldBeEqualToString("e.style.background", 'left top / 50%');
shouldBeEqualToString("e.style.backgroundSize", '50%');
shouldBe("checkStyle()", "true");
shouldBeEqualToString('computedStyle.getPropertyValue("background")', 'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / 50% padding-box border-box');
shouldBeEqualToString('computedStyle.getPropertyValue("background-size")', '50%');
shouldBe("checkComputedStyleValue()", "true");
debug("")
e.style.background = "red fixed";
shouldBeEqualToString("e.style.background", 'fixed red');
shouldBeEqualToString("e.style.backgroundSize", 'initial');
shouldBe("checkStyle()", "true");
shouldBeEqualToString('computedStyle.getPropertyValue("background")', 'rgb(255, 0, 0) none repeat fixed 0% 0% / auto padding-box border-box');
shouldBeEqualToString('computedStyle.getPropertyValue("background-size")', 'auto');
shouldBe("checkComputedStyleValue()", "true");
debug("")
e.style.background = "";
e.style.background = 'red / cover url("dummy://test.png") repeat';
shouldBeEqualToString("e.style.background", '');
shouldBeEqualToString("e.style.backgroundSize", '');
shouldBe("checkStyle()", "true");
shouldBeEqualToString('computedStyle.getPropertyValue("background")', 'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box');
shouldBeEqualToString('computedStyle.getPropertyValue("background-size")', 'auto');
shouldBe("checkComputedStyleValue()", "true");
debug("")
e.style.background = "";
e.style.background = 'red url("dummy://test.png") repeat 25px / contain contain';
shouldBeEqualToString("e.style.background", '');
shouldBeEqualToString("e.style.backgroundSize", '');
shouldBe("checkStyle()", "true");
shouldBeEqualToString('computedStyle.getPropertyValue("background")', 'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box');
shouldBeEqualToString('computedStyle.getPropertyValue("background-size")', 'auto');
shouldBe("checkComputedStyleValue()", "true");
debug("")
e.style.background = "";
e.style.background = 'red top left / 100px cover url("dummy://test.png") repeat';
shouldBeEqualToString("e.style.background", '');
shouldBeEqualToString("e.style.backgroundSize", '');
shouldBe("checkStyle()", "true");
shouldBeEqualToString('computedStyle.getPropertyValue("background")', 'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box');
shouldBeEqualToString('computedStyle.getPropertyValue("background-size")', 'auto');
shouldBe("checkComputedStyleValue()", "true");
debug("")
</script>
</body>
</html>
|
