<html>
<head>
<title></title>
<script type="text/javascript">
function log(message)
{
var console = document.getElementById("console");
console.appendChild(document.createElement("li")).innerHTML = message;
}
function testShorthand(shorthand)
{
var element = document.createElement("div");
element.setAttribute("style",
"border: thin dotted purple; \
background: red url(/background.png) repeat-y scroll right bottom; \
list-style: square outside url(/marker.png); \
margin: 5%; \
-webkit-margin-collapse: collapse; \
padding: 2em; \
-webkit-text-stroke: orange 1pt; \
columns: 100px 3; \
column-rule: thick dashed silver; \
border-spacing: 10px 20px; \
-webkit-border-radius: 6px 8px; \
overflow: scroll; \
-webkit-mask: url(/mask.png) repeat-x center top;");
var allProperties = element.style.cssText.concat(" ").split("; ");
element.style.removeProperty(shorthand);
var remainingProperties = element.style.cssText.concat(" ").split("; ");
var removedProperties = [];
var addedProperties = [];
for (var i = 0; i < allProperties.length; i++) {
if (remainingProperties.indexOf(allProperties[i]) < 0)
removedProperties.push("<tt>" + allProperties[i].replace(/\:.*/,"") + "</tt>");
}
for (var i = 0; i < remainingProperties.length; i++) {
if (allProperties.indexOf(remainingProperties[i]) < 0)
addedProperties.push("<tt>" + remainingProperties[i].replace(/\:.*/,"") + "</tt>");
}
log("Removing <tt>" + shorthand + '</tt><br>removes "' + removedProperties.join(", ")
+ '"<br>and adds "' + addedProperties.join(", ") + '".');
}
function test()
{
if (window.testRunner)
testRunner.dumpAsText();
var shorthands = [
"background",
"background-position",
"border",
"border-top", "border-right", "border-bottom", "border-left",
"border-color", "border-style", "border-width",
"border-radius",
"-webkit-border-radius",
"border-spacing",
"-webkit-columns",
"-webkit-column-rule",
"list-style",
"margin",
"-webkit-margin-collapse",
"-webkit-mask",
"-webkit-mask-position",
"overflow",
"padding",
"-webkit-text-stroke"
];
for (i in shorthands)
testShorthand(shorthands[i]);
}
</script>
</head>
<body onload="test()">
<p>
Test for <i><a href="http://bugs.webkit.org/show_bug.cgi?id=9284">http://bugs.webkit.org/show_bug.cgi?id=9284</a>
Quirksmode (CSS1): Removing inline border styles is impossible</i>.
</p>
<p>
Starting with a declaration containing all properties that are constituents of shortcuts, see what is removed
when a shortcut property is removed. The shortcut’s constituents and only them should be removed.
</p>
<ul id="console"></ul>
</body>
</html>