third_party/WebKit/LayoutTests/fast/css/getComputedStyle/getComputedStyle-border-shorthand.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <meta charset="utf-8">
   5 <script src="../../../resources/js-test.js"></script>
   6 </head>
   7 <body>
   8 <script>
   9
  10 description("Tests that border shorthands are computed properly.")
  11
  12 var testContainer = document.createElement("div");
  13 testContainer.contentEditable = true;
  14 document.body.appendChild(testContainer);
  15
  16 testContainer.innerHTML = '<div id="test">hello</div>';
  17
  18 e = document.getElementById('test');
  19 computedStyle = window.getComputedStyle(e, null);
  20
  21 var properties = new Array("border-bottom","border-top","border-right", "border-left");
  22
  23 for (i = 0; i < properties.length; ++i) {
  24     e.style.cssText = properties[i] + ": 10px solid red;";
  25     shouldBe("computedStyle.getPropertyValue('" + properties[i] + "')", "'10px solid rgb(255, 0, 0)'");
  26
  27     e.style.cssText = properties[i] + ": 20em solid blue;";
  28     shouldBe("computedStyle.getPropertyValue('" + properties[i] + "')", "'320px solid rgb(0, 0, 255)'");
  29
  30     e.style.cssText = properties[i] + ": 10px none green;";
  31     shouldBe("computedStyle.getPropertyValue('" + properties[i] + "')", "'0px none rgb(0, 128, 0)'");
  32 }
  33
  34 e.style.cssText = "";
  35 e.style.border = "20em solid red";
  36 shouldBe("computedStyle.getPropertyValue('border')", "'320px solid rgb(255, 0, 0)'");
  37
  38 e.style.border = "20em solid red";
  39 e.style.borderTop = "10px groove blue";
  40 shouldBe("computedStyle.getPropertyValue('border')", "''");
  41
  42
  43 document.body.removeChild(testContainer);
  44
  45 </script>
  46 </body>
  47 </html>