css-shortHands.html | Explore in Territory

<html>
<head>
<style>
div { margin: 1px; }
div { margin: 1px 2px; }
div { margin: 1px 2px 3px; }
div { margin: 1px 2px 3px 4px; }

div { padding: 1px; }
div { padding: 1px 2px; }
div { padding: 1px 2px 3px; }
div { padding: 1px 2px 3px 4px; }

div { border-top: red; }
div { border-bottom: red; }
div { border-left: red; }
div { border-right: red; }
</style>
</head>
<body>
<pre id="result"></pre>
<script>
if (window.testRunner)
    testRunner.dumpAsText();
var styleSheet = document.styleSheets.item(0);
var s = "";
for (var i = 0; i < styleSheet.cssRules.length; i++) {
	var rule = styleSheet.cssRules[i];
	var prop = null;
	if (i < 4) prop = "margin";
	else if (i >= 4 && i < 8) prop = "padding";
	else if (i == 8) prop = "border-top";
	else if (i == 9) prop = "border-bottom";
	else if (i == 10) prop = "border-left";
	else if (i == 11) prop = "border-right";
	s += rule.style.getPropertyValue(prop) + " (" + rule.style[prop] + ")\n";
}
document.getElementById("result").innerText = s;
</script>
</body>
</html>
chromium/third_party/blink/web_tests/fast/dom/css-shortHands.html
