LayoutTests:
[WebKit-https.git] / LayoutTests / fast / css / background-position-serialize.html
1 <html>
2 <body>
3 <div id=t></div>
4 <div id=console></div>
5 <script>
6 function print(message, color) 
7 {
8     var paragraph = document.createElement("div");
9     paragraph.appendChild(document.createTextNode(message));
10     paragraph.style.fontFamily = "monospace";
11     if (color)
12         paragraph.style.color = color;
13     document.getElementById("console").appendChild(paragraph);
14 }
15
16 function run(a)
17 {
18     print(a);
19     try {
20         eval(a);
21     } catch(e) {
22         print(e);
23     }
24 }
25
26 function shouldBe(a, b)
27 {
28     var evalA;
29     try {
30         evalA = eval(a);
31     } catch(e) {
32         evalA = e;
33     }
34     
35     if (evalA == b)
36         print("PASS: " + a + " should be " + b + " and is.", "green");
37     else
38         print("FAIL: " + a + " should be " + b + " but instead is " + evalA + ".", "red");
39 }
40
41 if (window.layoutTestController)
42     layoutTestController.dumpAsText();
43
44 var t = document.getElementById('t');
45
46 run("t.style.backgroundPositionX = '5%';");
47 shouldBe("t.style.backgroundPosition", "5%");
48 shouldBe("t.style.backgroundPositionX", "5%");
49 shouldBe("t.style.backgroundPositionY", "");
50 shouldBe("t.style.cssText", "background-position-x: 5%; ");
51 shouldBe("t.getAttribute('style')", "background-position-x: 5%; ");
52
53 run("t.style.backgroundPositionY = '5%';");
54 shouldBe("t.style.backgroundPosition", "5% 5%");
55 shouldBe("t.style.backgroundPositionX", "5%");
56 shouldBe("t.style.backgroundPositionY", "5%");
57 shouldBe("t.style.cssText", "background-position: 5% 5%; ");
58 shouldBe("t.getAttribute('style')", "background-position: 5% 5%; ");
59
60 run("t.style.backgroundPosition = '10% 10%';");
61 shouldBe("t.style.backgroundPosition", "10% 10%");
62 shouldBe("t.style.backgroundPositionX", "10%");
63 shouldBe("t.style.backgroundPositionY", "10%");
64 shouldBe("t.style.cssText", "background-position: 10% 10%; ");
65 shouldBe("t.getAttribute('style')", "background-position: 10% 10%; ");
66
67 run("t.style.backgroundPositionX = '20%';");
68 shouldBe("t.style.backgroundPosition", "20% 10%");
69 shouldBe("t.style.backgroundPositionX", "20%");
70 shouldBe("t.style.backgroundPositionY", "10%");
71 shouldBe("t.style.cssText", "background-position: 20% 10%; ");
72 shouldBe("t.getAttribute('style')", "background-position: 20% 10%; ");
73
74 run("t.style.backgroundPositionY = '20%';");
75 shouldBe("t.style.backgroundPosition", "20% 20%");
76 shouldBe("t.style.backgroundPositionX", "20%");
77 shouldBe("t.style.backgroundPositionY", "20%");
78 shouldBe("t.style.cssText", "background-position: 20% 20%; ");
79 shouldBe("t.getAttribute('style')", "background-position: 20% 20%; ");
80
81 run("t.setAttribute('style', 'background-position: 30% 30%');");
82 shouldBe("t.style.backgroundPosition", "30% 30%");
83 shouldBe("t.style.backgroundPositionX", "30%");
84 shouldBe("t.style.backgroundPositionY", "30%");
85 shouldBe("t.style.cssText", "background-position: 30% 30%; ");
86 shouldBe("t.getAttribute('style')", "background-position: 30% 30%");
87
88 run("t.style.backgroundPositionX = '20%';");
89 shouldBe("t.style.backgroundPosition", "20% 30%");
90 shouldBe("t.style.backgroundPositionX", "20%");
91 shouldBe("t.style.backgroundPositionY", "30%");
92 shouldBe("t.style.cssText", "background-position: 20% 30%; ");
93 shouldBe("t.getAttribute('style')", "background-position: 20% 30%; ");
94
95 run("t.style.backgroundPositionY = '20%';");
96 shouldBe("t.style.backgroundPosition", "20% 20%");
97 shouldBe("t.style.backgroundPositionX", "20%");
98 shouldBe("t.style.backgroundPositionY", "20%");
99 shouldBe("t.style.cssText", "background-position: 20% 20%; ");
100 shouldBe("t.getAttribute('style')", "background-position: 20% 20%; ");
101
102 run("t.setAttribute('style', 'background-position: 60% 60% !important;');");
103 shouldBe("t.style.backgroundPosition", "60% 60%");
104 shouldBe("t.style.backgroundPositionX", "60%");
105 shouldBe("t.style.backgroundPositionY", "60%");
106 shouldBe("t.style.cssText", "background-position: 60% 60% !important; ");
107
108 run("t.setAttribute('style', 'background-position: 10px 15px, 20px 25px, 30px 35px');");
109 shouldBe("t.style.backgroundPosition", "10px 15px, 20px 25px, 30px 35px");
110 shouldBe("t.style.backgroundPositionX", "10px, 20px, 30px");
111 shouldBe("t.style.backgroundPositionY", "15px, 25px, 35px");
112 shouldBe("t.style.cssText", "background-position: 10px 15px, 20px 25px, 30px 35px; ");
113
114 run("t.setAttribute('style', 'background: url(about:blank) 80% 80%;');");
115 run("t.style.backgroundPositionY = '50px'");
116 print("style.cssText =");
117 print(t.style.cssText);
118 </script>