third_party/WebKit/LayoutTests/fast/css/getPropertyValue-column-rule.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <style>
   5       .test {
   6         width: 100px;
   7         height: 100px;
   8         display: inline-block;
   9       }
  10     </style>
  11     <script src="../../resources/js-test.js"></script>
  12     <script>
  13       if (window.testRunner)
  14         testRunner.dumpAsText();
  15     </script>
  16   </head>
  17   <body>
  18     <div id="-webkit-column-rule1" class="test" style="-webkit-column-rule: 10px solid black;"></div>
  19     <div id="-webkit-column-rule2" class="test" style="-webkit-column-rule: 10px solid;"></div>
  20     <div id="-webkit-column-rule3" class="test" style="-webkit-column-rule: 20px red;"></div>
  21     <div id="-webkit-column-rule4" class="test" style="-webkit-column-rule: 10px;"></div>
  22     <div id="-webkit-column-rule5" class="test" style="-webkit-column-rule: solid black;"></div>
  23     <div id="-webkit-column-rule6" class="test" style="-webkit-column-rule: dashed;"></div>
  24     <div id="-webkit-column-rule7" class="test" style="-webkit-column-rule: green;"></div>
  25     <div id="-webkit-column-rule8" class="test" style="-webkit-column-rule: foo;"></div>
  26     <div id="-webkit-column-rule9" class="test" style="-webkit-column-rule-style: dotted; -webkit-column-rule-width: 10px; -webkit-column-rule-color: black;"></div>
  27     <div id="-webkit-column-rule10" class="test" style="-webkit-column-rule-style: dashed; -webkit-column-rule-width: 10px;"></div>
  28     <div id="-webkit-column-rule11" class="test" style="-webkit-column-rule-style: dotted; -webkit-column-rule-color: black;"></div>
  29     <div id="-webkit-column-rule12" class="test" style="-webkit-column-rule-width: 10px;"></div>
  30     <p id="description"></p>
  31     <div id="console"></div>
  32     <script>
  33       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>");
  34       var div1 = document.getElementById("-webkit-column-rule1");
  35       shouldBe('div1.style.getPropertyValue("-webkit-column-rule")', "'10px solid black'");
  36
  37       var div2 = document.getElementById("-webkit-column-rule2");
  38       shouldBe('div2.style.getPropertyValue("-webkit-column-rule")', "'10px solid'");
  39
  40       var div3 = document.getElementById("-webkit-column-rule3");
  41       shouldBe('div3.style.getPropertyValue("-webkit-column-rule")', "'20px red'");
  42
  43       var div4 = document.getElementById("-webkit-column-rule4");
  44       shouldBe('div4.style.getPropertyValue("-webkit-column-rule")', "'10px'");
  45
  46       var div5 = document.getElementById("-webkit-column-rule5");
  47       shouldBe('div5.style.getPropertyValue("-webkit-column-rule")', "'solid black'");
  48
  49       var div6 = document.getElementById("-webkit-column-rule6");
  50       shouldBe('div6.style.getPropertyValue("-webkit-column-rule")', "'dashed'");
  51
  52       var div7 = document.getElementById("-webkit-column-rule7");
  53       shouldBe('div7.style.getPropertyValue("-webkit-column-rule")', "'green'");
  54
  55       var div8 = document.getElementById("-webkit-column-rule8");
  56       shouldBeEqualToString('div8.style.getPropertyValue("-webkit-column-rule")', "");
  57       debug("NOTE: 'foo' is an illegal CSS value for '-webkit-column-rule'.");
  58
  59       var div9 = document.getElementById("-webkit-column-rule9");
  60       shouldBe('div9.style.getPropertyValue("-webkit-column-rule")', "'10px dotted black'");
  61
  62       debug("NOTE: If only few longhand properties are specified, getPropertyValue for shorthand property returns null.");
  63       var div10 = document.getElementById("-webkit-column-rule10");
  64       shouldBeEqualToString('div10.style.getPropertyValue("-webkit-column-rule")', "");
  65
  66       var div11 = document.getElementById("-webkit-column-rule11");
  67       shouldBeEqualToString('div11.style.getPropertyValue("-webkit-column-rule")', "");
  68
  69       var div12 = document.getElementById("-webkit-column-rule12");
  70       shouldBeEqualToString('div12.style.getPropertyValue("-webkit-column-rule")', "");
  71     </script>
  72   </body>
  73 </html>