LayoutTests/fast/css/shorthands-four-values.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4 <title>Test for WebKit bug 7987: Inspector displays incorrect summary for padding information</title>
   5 <script src="../js/resources/js-test-pre.js"></script>
   6 </head>
   7 <body>
   8 <p id="description">Test for WebKit bug <a href="https://bugs.webkit.org/show_bug.cgi?id=7987">7987</a>: Inspector displays incorrect summary for padding information</p>
   9 <div id="console"></div>
  10
  11 <div id="tests_container">
  12
  13 <div id="test0" style="padding: 20px;"></div>
  14 <div id="test1" style="padding: 20px 30px;"></div>
  15 <div id="test2" style="padding: 20px 30px; padding-left: 15px; padding-bottom: 10px;"></div>
  16 <div id="test3" style="padding: 20px 30px 55px; padding-bottom: 20px;"></div>
  17
  18 <div id="test4" style="border-color: red; border-top-color: yellow"></div>
  19 <div id="test5" style="border-color: red blue; border-top-color: green"></div>
  20 <div id="test6" style="border-color: red green; border-top-color: blue; border-right-color: yellow;"></div>
  21 <div id="test7" style="border-color: red yellow green; border-right-color: blue;"></div>
  22
  23 <div id="test8" style="border-width: 2px; border-right-width: 5px"></div>
  24 <div id="test9" style="border-width: 2px 3px; border-right-width: 4px"></div>
  25 <div id="test10" style="border-width: 2px 3px 5px;"></div>
  26 <div id="test11" style="border-width: 20px 30px 55px 60px;"></div>
  27
  28 <div id="test12" style="border-style: solid; border-bottom-style: dashed"></div>
  29 <div id="test13" style="border-style: solid dashed; border-bottom-style: dotted;"></div>
  30 <div id="test14" style="border-style: solid dashed dotted; border-top-style: dotted;"></div>
  31 <div id="test15" style="border-top-style: dotted; border-right-style: dashed; border-bottom-style: solid;"></div>
  32
  33 <div id="test16" style="margin: 20px; margin-left: 25px"></div>
  34 <div id="test17" style="margin: 20px 30px; margin-left: 50px;"></div>
  35 <div id="test18" style="margin: 20px 30px 55px; margin-left: 30px;"></div>
  36 <div id="test19" style=""></div>
  37
  38 </div>
  39
  40 <script>
  41     var test0 = document.getElementById("test0");
  42     var test1 = document.getElementById("test1");
  43     var test2 = document.getElementById("test2");
  44     var test3 = document.getElementById("test3");
  45     var test4 = document.getElementById("test4");
  46     var test5 = document.getElementById("test5");
  47     var test6 = document.getElementById("test6");
  48     var test7 = document.getElementById("test7");
  49     var test8 = document.getElementById("test8");
  50     var test9 = document.getElementById("test9");
  51     var test10 = document.getElementById("test10");
  52     var test11 = document.getElementById("test11");
  53     var test12 = document.getElementById("test12");
  54     var test13 = document.getElementById("test13");
  55     var test14 = document.getElementById("test14");
  56     var test15 = document.getElementById("test15");
  57     var test16 = document.getElementById("test16");
  58     var test17 = document.getElementById("test17");
  59     var test18 = document.getElementById("test18");
  60     var test19 = document.getElementById("test19");
  61
  62     shouldBeEqualToString("test0.style.padding", "20px");
  63     shouldBeEqualToString("test1.style.padding", "20px 30px");
  64     shouldBeEqualToString("test2.style.padding", "20px 30px 10px 15px");
  65     shouldBeEqualToString("test3.style.padding", "20px 30px");
  66
  67     shouldBeEqualToString("test4.style.borderColor", "yellow red red");
  68     shouldBeEqualToString("test5.style.borderColor", "green blue red");
  69     shouldBeEqualToString("test6.style.borderColor", "blue yellow red green");
  70     shouldBeEqualToString("test7.style.borderColor", "red blue green yellow");
  71
  72     shouldBeEqualToString("test8.style.borderWidth", "2px 5px 2px 2px");
  73     shouldBeEqualToString("test9.style.borderWidth", "2px 4px 2px 3px");
  74     shouldBeEqualToString("test10.style.borderWidth", "2px 3px 5px");
  75     shouldBeEqualToString("test11.style.borderWidth", "20px 30px 55px 60px");
  76
  77     shouldBeEqualToString("test12.style.borderStyle", "solid solid dashed");
  78     shouldBeEqualToString("test13.style.borderStyle", "solid dashed dotted");
  79     shouldBeEqualToString("test14.style.borderStyle", "dotted dashed");
  80     shouldBeEqualToString("test15.style.borderStyle", "");
  81
  82     shouldBeEqualToString("test16.style.margin", "20px 20px 20px 25px");
  83     shouldBeEqualToString("test17.style.margin", "20px 30px 20px 50px");
  84     shouldBeEqualToString("test18.style.margin", "20px 30px 55px");
  85     shouldBeEqualToString("test19.style.margin", "");
  86
  87     // clean up after ourselves
  88     var tests_container = document.getElementById("tests_container");
  89     tests_container.parentNode.removeChild(tests_container);
  90 </script>
  91 <script src="../js/resources/js-test-post.js"></script>
  92 </body>
  93 </html>