OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <meta charset="utf-8"> | 4 <meta charset="utf-8"> |
5 <script src="../../../resources/js-test.js"></script> | 5 <script src="../../../resources/js-test.js"></script> |
6 </head> | 6 </head> |
7 <body> | 7 <body> |
8 <script> | 8 <script> |
9 | 9 |
10 description("Tests that the background shorthand is computed properly.") | 10 description("Tests that the background shorthand is computed properly.") |
11 | 11 |
12 var testContainer = document.createElement("div"); | 12 var testContainer = document.createElement("div"); |
13 testContainer.contentEditable = true; | 13 testContainer.contentEditable = true; |
14 document.body.appendChild(testContainer); | 14 document.body.appendChild(testContainer); |
15 | 15 |
16 testContainer.innerHTML = '<div id="test">hello</div>'; | 16 testContainer.innerHTML = '<div id="test">hello</div>'; |
17 | 17 |
18 e = document.getElementById('test'); | 18 e = document.getElementById('test'); |
19 computedStyle = window.getComputedStyle(e, null); | 19 computedStyle = window.getComputedStyle(e, null); |
20 | 20 |
21 function checkComputedStyleValue() { | 21 function checkComputedStyleValue() { |
22 var before = window.getComputedStyle(e, null).getPropertyValue('background')
; | 22 var before = window.getComputedStyle(e, null).getPropertyValue('background')
; |
23 e.style.background = 'none'; | 23 e.style.background = 'none'; |
24 e.style.background = before; | 24 e.style.background = before; |
25 return (window.getComputedStyle(e, null).getPropertyValue('background') == b
efore); | 25 return (window.getComputedStyle(e, null).getPropertyValue('background') == b
efore); |
26 } | 26 } |
27 | 27 |
28 e.style.background = "red"; | 28 e.style.background = "red"; |
29 shouldBe("computedStyle.getPropertyValue('background')", "'rgb(255, 0, 0) none r
epeat scroll 0% 0% / auto padding-box border-box'"); | 29 shouldBeEqualToString("computedStyle.getPropertyValue('background')", 'rgb(255,
0, 0) none repeat scroll 0% 0% / auto padding-box border-box'); |
30 shouldBe("checkComputedStyleValue()", "true"); | 30 shouldBe("checkComputedStyleValue()", "true"); |
31 | 31 |
32 e.style.backgroundImage = "url(dummy://test.png)"; | 32 e.style.backgroundImage = "url(dummy://test.png)"; |
33 shouldBe("computedStyle.getPropertyValue('background')", "'rgb(255, 0, 0) url(du
mmy://test.png) repeat scroll 0% 0% / auto padding-box border-box'"); | 33 shouldBeEqualToString("computedStyle.getPropertyValue('background')", 'rgb(255,
0, 0) url("dummy://test.png") repeat scroll 0% 0% / auto padding-box border-box'
); |
34 shouldBe("checkComputedStyleValue()", "true"); | 34 shouldBe("checkComputedStyleValue()", "true"); |
35 | 35 |
36 e.style.backgroundRepeat = "no-repeat"; | 36 e.style.backgroundRepeat = "no-repeat"; |
37 shouldBe("computedStyle.getPropertyValue('background')", "'rgb(255, 0, 0) url(du
mmy://test.png) no-repeat scroll 0% 0% / auto padding-box border-box'"); | 37 shouldBeEqualToString("computedStyle.getPropertyValue('background')", 'rgb(255,
0, 0) url("dummy://test.png") no-repeat scroll 0% 0% / auto padding-box border-b
ox'); |
38 shouldBe("checkComputedStyleValue()", "true"); | 38 shouldBe("checkComputedStyleValue()", "true"); |
39 | 39 |
40 e.style.backgroundAttachment = "fixed"; | 40 e.style.backgroundAttachment = "fixed"; |
41 shouldBe("computedStyle.getPropertyValue('background')", "'rgb(255, 0, 0) url(du
mmy://test.png) no-repeat fixed 0% 0% / auto padding-box border-box'"); | 41 shouldBeEqualToString("computedStyle.getPropertyValue('background')", 'rgb(255,
0, 0) url("dummy://test.png") no-repeat fixed 0% 0% / auto padding-box border-bo
x'); |
42 shouldBe("checkComputedStyleValue()", "true"); | 42 shouldBe("checkComputedStyleValue()", "true"); |
43 | 43 |
44 e.style.backgroundPosition = "right bottom"; | 44 e.style.backgroundPosition = "right bottom"; |
45 shouldBe("computedStyle.getPropertyValue('background')", "'rgb(255, 0, 0) url(du
mmy://test.png) no-repeat fixed 100% 100% / auto padding-box border-box'"); | 45 shouldBeEqualToString("computedStyle.getPropertyValue('background')", 'rgb(255,
0, 0) url("dummy://test.png") no-repeat fixed 100% 100% / auto padding-box borde
r-box'); |
46 shouldBe("checkComputedStyleValue()", "true"); | 46 shouldBe("checkComputedStyleValue()", "true"); |
47 | 47 |
48 e.style.backgroundSize = "cover"; | 48 e.style.backgroundSize = "cover"; |
49 shouldBe("computedStyle.getPropertyValue('background')", "'rgb(255, 0, 0) url(du
mmy://test.png) no-repeat fixed 100% 100% / cover padding-box border-box'"); | 49 shouldBeEqualToString("computedStyle.getPropertyValue('background')", 'rgb(255,
0, 0) url("dummy://test.png") no-repeat fixed 100% 100% / cover padding-box bord
er-box'); |
50 shouldBe("checkComputedStyleValue()", "true"); | 50 shouldBe("checkComputedStyleValue()", "true"); |
51 | 51 |
52 e.style.backgroundOrigin = "content-box"; | 52 e.style.backgroundOrigin = "content-box"; |
53 shouldBe("computedStyle.getPropertyValue('background')", "'rgb(255, 0, 0) url(du
mmy://test.png) no-repeat fixed 100% 100% / cover content-box border-box'"); | 53 shouldBeEqualToString("computedStyle.getPropertyValue('background')", 'rgb(255,
0, 0) url("dummy://test.png") no-repeat fixed 100% 100% / cover content-box bord
er-box'); |
54 shouldBe("checkComputedStyleValue()", "true"); | 54 shouldBe("checkComputedStyleValue()", "true"); |
55 | 55 |
56 e.style.backgroundClip = "padding-box"; | 56 e.style.backgroundClip = "padding-box"; |
57 shouldBe("computedStyle.getPropertyValue('background')", "'rgb(255, 0, 0) url(du
mmy://test.png) no-repeat fixed 100% 100% / cover content-box padding-box'"); | 57 shouldBeEqualToString("computedStyle.getPropertyValue('background')", 'rgb(255,
0, 0) url("dummy://test.png") no-repeat fixed 100% 100% / cover content-box padd
ing-box'); |
58 shouldBe("checkComputedStyleValue()", "true"); | 58 shouldBe("checkComputedStyleValue()", "true"); |
59 | 59 |
60 e.style.background = "border-box padding-box url(dummy://test.png) green 45% / c
ontain repeat fixed"; | 60 e.style.background = "border-box padding-box url(dummy://test.png) green 45% / c
ontain repeat fixed"; |
61 shouldBe("computedStyle.getPropertyValue('background')", "'rgb(0, 128, 0) url(du
mmy://test.png) repeat fixed 45% 50% / contain border-box padding-box'"); | 61 shouldBeEqualToString("computedStyle.getPropertyValue('background')", 'rgb(0, 12
8, 0) url("dummy://test.png") repeat fixed 45% 50% / contain border-box padding-
box'); |
62 shouldBe("checkComputedStyleValue()", "true"); | 62 shouldBe("checkComputedStyleValue()", "true"); |
63 | 63 |
64 document.body.removeChild(testContainer); | 64 document.body.removeChild(testContainer); |
65 | 65 |
66 </script> | 66 </script> |
67 </body> | 67 </body> |
68 </html> | 68 </html> |
OLD | NEW |