<!DOCTYPE html>
<html>
  <head>
    <style>
      .test {
        width: 100px;
        height: 100px;
        display: inline-block;
      }
    </style>
    <script src="../../resources/js-test-pre.js"></script>
    <script>
      if (window.testRunner)
        testRunner.dumpAsText();
    </script>
  </head>
  <body>
    <div id="-webkit-column-rule1" class="test" style="-webkit-column-rule: 10px solid black;"></div>
    <div id="-webkit-column-rule2" class="test" style="-webkit-column-rule: 10px solid;"></div>
    <div id="-webkit-column-rule3" class="test" style="-webkit-column-rule: 20px red;"></div>
    <div id="-webkit-column-rule4" class="test" style="-webkit-column-rule: 10px;"></div>
    <div id="-webkit-column-rule5" class="test" style="-webkit-column-rule: solid black;"></div>
    <div id="-webkit-column-rule6" class="test" style="-webkit-column-rule: dashed;"></div>
    <div id="-webkit-column-rule7" class="test" style="-webkit-column-rule: green;"></div>
    <div id="-webkit-column-rule8" class="test" style="-webkit-column-rule: foo;"></div>
    <div id="-webkit-column-rule9" class="test" style="-webkit-column-rule-style: dotted; -webkit-column-rule-width: 10px; -webkit-column-rule-color: black;"></div>
    <div id="-webkit-column-rule10" class="test" style="-webkit-column-rule-style: dashed; -webkit-column-rule-width: 10px;"></div>
    <div id="-webkit-column-rule11" class="test" style="-webkit-column-rule-style: dotted; -webkit-column-rule-color: black;"></div>
    <div id="-webkit-column-rule12" class="test" style="-webkit-column-rule-width: 10px;"></div>
    <p id="description"></p>
    <div id="console"></div>
    <script>
      description("<a href=\"https://bugs.webkit.org/show_bug.cgi?id=110698\">Bug 110698: getPropertyValue for -webkit-column-rule returns null, should compute the shorthand value</a>");
      var div1 = document.getElementById("-webkit-column-rule1");
      shouldBe('div1.style.getPropertyValue("-webkit-column-rule")', "'10px solid black'");

      var div2 = document.getElementById("-webkit-column-rule2");
      shouldBe('div2.style.getPropertyValue("-webkit-column-rule")', "'10px solid'");

      var div3 = document.getElementById("-webkit-column-rule3");
      shouldBe('div3.style.getPropertyValue("-webkit-column-rule")', "'20px red'");

      var div4 = document.getElementById("-webkit-column-rule4");
      shouldBe('div4.style.getPropertyValue("-webkit-column-rule")', "'10px'");

      var div5 = document.getElementById("-webkit-column-rule5");
      shouldBe('div5.style.getPropertyValue("-webkit-column-rule")', "'solid black'");

      var div6 = document.getElementById("-webkit-column-rule6");
      shouldBe('div6.style.getPropertyValue("-webkit-column-rule")', "'dashed'");

      var div7 = document.getElementById("-webkit-column-rule7");
      shouldBe('div7.style.getPropertyValue("-webkit-column-rule")', "'green'");

      var div8 = document.getElementById("-webkit-column-rule8");
      shouldBe('div8.style.getPropertyValue("-webkit-column-rule")', "null");
      debug("NOTE: 'foo' is an illegal CSS value for '-webkit-column-rule'.");

      var div9 = document.getElementById("-webkit-column-rule9");
      shouldBe('div9.style.getPropertyValue("-webkit-column-rule")', "'10px dotted black'");

      debug("NOTE: If only few longhand properties are specified, getPropertyValue for shorthand property returns null.");
      var div10 = document.getElementById("-webkit-column-rule10");
      shouldBe('div10.style.getPropertyValue("-webkit-column-rule")', "null");

      var div11 = document.getElementById("-webkit-column-rule11");
      shouldBe('div11.style.getPropertyValue("-webkit-column-rule")', "null");

      var div12 = document.getElementById("-webkit-column-rule12");
      shouldBe('div12.style.getPropertyValue("-webkit-column-rule")', "null");
    </script>
    <script src="../../resources/js-test-post.js"></script>
  </body>
</html>