bee43fcd057a044a29c4c29ef72ab36ad5d9e958
[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 p;
34             while (p = allProperties.shift()) {
35                 if (remainingProperties[0] == p)
36                     remainingProperties.shift();
37                 else
38                     removedProperties.push("<tt>" + p.replace(/\:.*/,"") + "</tt>");
39             }
40             log("Removing <tt>" + shorthand + "</tt> removes " + removedProperties.join(", ") +".");
41         }
42         
43         function test()
44         {
45             if (window.layoutTestController)
46                 layoutTestController.dumpAsText();
47
48             var shorthands = [
49                 "background",
50                 "background-position",
51                 "border",
52                 "border-top", "border-right", "border-bottom", "border-left",
53                 "border-color", "border-style", "border-width",
54                 "border-radius",
55                 "-webkit-border-radius",
56                 "border-spacing",
57                 "-webkit-columns",
58                 "-webkit-column-rule",
59                 "list-style",
60                 "margin",
61                 "-webkit-margin-collapse",
62                 "-webkit-marquee",
63                 "-webkit-mask",
64                 "-webkit-mask-position",
65                 "overflow",
66                 "padding",
67                 "-webkit-text-stroke"
68             ];
69
70             for (i in shorthands)
71                 testShorthand(shorthands[i]);
72         }
73     </script>
74 </head>
75 <body onload="test()">
76     <p>
77         Test for <i><a href="http://bugs.webkit.org/show_bug.cgi?id=9284">http://bugs.webkit.org/show_bug.cgi?id=9284</a>
78         Quirksmode (CSS1): Removing inline border styles is impossible</i>.
79     </p>
80     <p>
81         Starting with a declaration containing all properties that are constituents of shortcuts, see what is removed
82         when a shortcut property is removed. The shortcut&rsquo;s constituents and only them should be removed.
83     </p>
84     <ul id="console"></ul>
85 </body>
86 </html>