LayoutTests/fast/css/getPropertyValue-border.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
   2 <html lang="en">
   3  <head>
   4   <title>currentColor basic test</title>
   5   <style type="text/css">
   6    .test {
   7       display: inline-block;
   8       height: 5em;
   9       width: 10em;
  10       text-align: center;
  11       vertical-align: middle;
  12    }
  13   </style>
  14   <link rel="stylesheet" href="../js/resources/js-test-style.css">
  15   <script src="../js/resources/js-test-pre.js"></script>
  16   <script>
  17     if (window.layoutTestController)
  18       layoutTestController.dumpAsText();
  19   </script>
  20  </head>
  21  <body>
  22     <div id="border1" class="test" style="border: 5px solid green;">1</div>
  23     <div id="border2" class="test" style="border-left: 5px solid red; border-top: 5px solid green; border-right: 5px solid blue; border-bottom: 5px solid purple;">2</div>
  24     <div id="border3" class="test" style="border-left: 5px dashed green; border-top: 5px solid green; border-right: 5px dotted green; border-bottom: 5px groove green;">3</div>
  25     <div id="border4" class="test" style="border-left: 4px solid green; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green;">4</div>
  26     <div id="border5" class="test" style="border-left: 2px dashed green; border-top: 3px solid green; border-right: 4px dotted green; border-bottom: 5px groove green;">5</div>
  27     <div id="border6" class="test" style="border-left: 5px dashed red; border-top: 5px solid green; border-right: 5px dotted blue; border-bottom: 5px groove purple;">6</div>
  28     <div id="border7" class="test" style="border-left: 2px solid red; border-top: 3px solid green; border-right: 4px solid blue; border-bottom: 5px solid purple;">7</div>
  29     <div id="border8" class="test" style="border-left: 2px dashed red; border-top: 3px solid green; border-right: 5px dotted blue; border-bottom: 5px groove purple;">8</div>
  30     <div id="border9" class="test" style="border-left: 5px solid red; border-top: 5px solid green; border-right: 5px solid blue;">9</div>
  31   <p id="description"></p>
  32   <div id="console"></div>
  33   <script>
  34     description("<a href=\"https://bugs.webkit.org/show_bug.cgi?id=15823\">Bug 15823: getPropertyValue for border returns null, should compute the shorthand value</a>");
  35
  36     var div1 = document.getElementById("border1");
  37     shouldBe('div1.style.getPropertyValue("border")', "'5px solid green'");
  38
  39     var div2 = document.getElementById("border2");
  40     shouldBe('div2.style.getPropertyValue("border")', "'5px solid'");
  41
  42     var div3 = document.getElementById("border3");
  43     shouldBe('div3.style.getPropertyValue("border")', "'5px green'");
  44     debug("    NOTE: '5px green' is an illegal CSS value for 'border'.");
  45
  46     var div4 = document.getElementById("border4");
  47     shouldBe('div4.style.getPropertyValue("border")', "'solid green'");
  48
  49     var div5 = document.getElementById("border5");
  50     shouldBe('div5.style.getPropertyValue("border")', "'green'");
  51     debug("    NOTE: 'green' is an illegal CSS value for 'border'.");
  52
  53     var div6 = document.getElementById("border6");
  54     shouldBe('div6.style.getPropertyValue("border")', "'5px'");
  55
  56     var div7 = document.getElementById("border7");
  57     shouldBe('div7.style.getPropertyValue("border")', "'solid'");
  58
  59     var div8 = document.getElementById("border8");
  60     shouldBe('div8.style.getPropertyValue("border")', "null");
  61
  62     var div9 = document.getElementById("border9");
  63     shouldBe('div9.style.getPropertyValue("border")', "null");
  64
  65     var successfullyParsed = true;
  66   </script>
  67   <script src="../js/resources/js-test-post.js"></script>
  68  </body>
  69 </html>