cssText should use shorthand notations
[WebKit-https.git] / LayoutTests / fast / css / remove-shorthand.html
1 <html>
2 <head>
3     <title></title>
4     <script type="text/javascript">
5         function log(message)
6         {
7             var console = document.getElementById("console");
8             console.appendChild(document.createElement("li")).innerHTML = message;
9         }
10
11         function testShorthand(shorthand)
12         {
13             var element = document.createElement("div");
14             element.setAttribute("style",
15                 "border: thin dotted purple; \
16                  background: red url(/background.png) repeat-y scroll right bottom; \
17                  list-style: square outside url(/marker.png); \
18                  margin: 5%; \
19                  -webkit-margin-collapse: collapse; \
20                  -webkit-marquee: ahead small infinite slide slow; \
21                  padding: 2em; \
22                  -webkit-text-stroke: orange 1pt; \
23                  -webkit-columns: 100px 3; \
24                  -webkit-column-rule: thick dashed silver; \
25                  border-spacing: 10px 20px; \
26                  -webkit-border-radius: 6px 8px; \
27                  overflow: scroll; \
28                  -webkit-mask: url(/mask.png) repeat-x scroll center top;");
29             var allProperties = element.style.cssText.split("; ");
30             element.style.removeProperty(shorthand);
31             var remainingProperties = element.style.cssText.split("; ");
32             var removedProperties = [];
33             var addedProperties = [];
34
35             for (var i = 0; i < allProperties.length; i++) {
36                 if (remainingProperties.indexOf(allProperties[i]) < 0)
37                     removedProperties.push("<tt>" + allProperties[i].replace(/\:.*/,"") + "</tt>");
38             }
39             for (var i = 0; i < remainingProperties.length; i++) {
40                 if (allProperties.indexOf(remainingProperties[i]) < 0)
41                     addedProperties.push("<tt>" + remainingProperties[i].replace(/\:.*/,"") + "</tt>");
42             }
43
44             log("Removing <tt>" + shorthand + '</tt><br>removes "' + removedProperties.join(", ")
45                 + '"<br>and adds "' + addedProperties.join(", ") + '".');
46         }
47         
48         function test()
49         {
50             if (window.layoutTestController)
51                 layoutTestController.dumpAsText();
52
53             var shorthands = [
54                 "background",
55                 "background-position",
56                 "border",
57                 "border-top", "border-right", "border-bottom", "border-left",
58                 "border-color", "border-style", "border-width",
59                 "border-radius",
60                 "-webkit-border-radius",
61                 "border-spacing",
62                 "-webkit-columns",
63                 "-webkit-column-rule",
64                 "list-style",
65                 "margin",
66                 "-webkit-margin-collapse",
67                 "-webkit-marquee",
68                 "-webkit-mask",
69                 "-webkit-mask-position",
70                 "overflow",
71                 "padding",
72                 "-webkit-text-stroke"
73             ];
74
75             for (i in shorthands)
76                 testShorthand(shorthands[i]);
77         }
78     </script>
79 </head>
80 <body onload="test()">
81     <p>
82         Test for <i><a href="http://bugs.webkit.org/show_bug.cgi?id=9284">http://bugs.webkit.org/show_bug.cgi?id=9284</a>
83         Quirksmode (CSS1): Removing inline border styles is impossible</i>.
84     </p>
85     <p>
86         Starting with a declaration containing all properties that are constituents of shortcuts, see what is removed
87         when a shortcut property is removed. The shortcut&rsquo;s constituents and only them should be removed.
88     </p>
89     <ul id="console"></ul>
90 </body>
91 </html>