third_party/WebKit/LayoutTests/fast/dom/css-shortHands.html

   1 <html>
   2 <head>
   3 <style>
   4 div { margin: 1px; }
   5 div { margin: 1px 2px; }
   6 div { margin: 1px 2px 3px; }
   7 div { margin: 1px 2px 3px 4px; }
   8
   9 div { padding: 1px; }
  10 div { padding: 1px 2px; }
  11 div { padding: 1px 2px 3px; }
  12 div { padding: 1px 2px 3px 4px; }
  13
  14 div { border-top: red; }
  15 div { border-bottom: red; }
  16 div { border-left: red; }
  17 div { border-right: red; }
  18 </style>
  19 </head>
  20 <body>
  21 <pre id="result"></pre>
  22 <script>
  23 if (window.testRunner)
  24     testRunner.dumpAsText();
  25 var styleSheet = document.styleSheets.item(0);
  26 var s = "";
  27 for (var i = 0; i < styleSheet.cssRules.length; i++) {
  28         var rule = styleSheet.cssRules[i];
  29         var prop = null;
  30         if (i < 4) prop = "margin";
  31         else if (i >= 4 && i < 8) prop = "padding";
  32         else if (i == 8) prop = "border-top";
  33         else if (i == 9) prop = "border-bottom";
  34         else if (i == 10) prop = "border-left";
  35         else if (i == 11) prop = "border-right";
  36         s += rule.style.getPropertyValue(prop) + " (" + rule.style[prop] + ")\n";
  37 }
  38 document.getElementById("result").innerText = s;
  39 </script>
  40 </body>
  41 </html>