layout/style/test/test_bug74880.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <!--
   4 https://bugzilla.mozilla.org/show_bug.cgi?id=74880
   5 -->
   6 <head>
   7   <title>Test for Bug 74880</title>
   8   <script type="text/javascript" src="/MochiKit/MochiKit.js"></script>
   9   <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
  10   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
  11   <style type="text/css">
  12
  13   /* so that computed values for other border properties work right */
  14   #display { border-style: solid; }
  15
  16   </style>
  17 </head>
  18 <body>
  19 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=74880">Mozilla Bug 74880</a>
  20 <div style="margin: 1px 2px 3px 4px; border-width: 5px 6px 7px 8px; border-style: dotted dashed solid double; border-color: blue fuchsia green orange; padding: 9px 10px 11px 12px">
  21 <p id="display"></p>
  22 </div>
  23 <div id="content" style="display: none">
  24
  25 </div>
  26 <pre id="test">
  27 <script class="testbody" type="text/javascript">
  28
  29 /** Test for Bug 74880 **/
  30
  31 var gProps = [
  32   [ "margin-left", "margin-right", "-moz-margin-start", "-moz-margin-end" ],
  33   [ "padding-left", "padding-right", "-moz-padding-start", "-moz-padding-end" ],
  34   [ "border-left-color", "border-right-color", "-moz-border-start-color", "-moz-border-end-color" ],
  35   [ "border-left-style", "border-right-style", "-moz-border-start-style", "-moz-border-end-style" ],
  36   [ "border-left-width", "border-right-width", "-moz-border-start-width", "-moz-border-end-width" ],
  37 ];
  38
  39 var gLengthValues = [ "inherit", "-moz-initial", "2px", "1em" ];
  40 var gColorValues = [ "inherit", "-moz-initial", "currentColor", "green" ];
  41 var gStyleValues = [ "inherit", "-moz-initial", "double", "dashed" ];
  42
  43 function values_for(set) {
  44   var values;
  45   if (set[0].match(/style$/))
  46     values = gStyleValues;
  47   else if (set[0].match(/color$/))
  48     values = gColorValues;
  49   else
  50     values = gLengthValues;
  51   return values;
  52 }
  53
  54 var e = document.getElementById("display");
  55 var s = e.style;
  56 var c = window.getComputedStyle(e, "");
  57
  58 for each (var set in gProps) {
  59   var values = values_for(set);
  60   for each (var val in values) {
  61     function check(dir, plogical, pvisual) {
  62       var v0 = c.getPropertyValue(pvisual);
  63       s.setProperty("direction", dir, "");
  64       s.setProperty(pvisual, val, "");
  65       var v1 = c.getPropertyValue(pvisual);
  66       if (val != "-moz-initial" && val != "currentColor")
  67         isnot(v1, v0, "setProperty set the property " + pvisual + ": " + val);
  68       s.removeProperty(pvisual);
  69       is(c.getPropertyValue(pvisual), v0, "removeProperty worked for " + pvisual);
  70       s.setProperty(plogical, val, "")
  71       var v2 = c.getPropertyValue(pvisual);
  72       is(v2, v1, "the logical property " + plogical + ": " + val + " showed up in the right place");
  73       s.removeProperty(plogical);
  74       is(c.getPropertyValue(pvisual), v0, "removeProperty worked for " + plogical);
  75
  76       s.removeProperty("direction");
  77     }
  78
  79     check("ltr", set[2], set[0]);
  80     check("ltr", set[3], set[1]);
  81     check("rtl", set[2], set[1]);
  82     check("rtl", set[3], set[0]);
  83   }
  84
  85   function check_cascading(dir, plogical, pvisual) {
  86     var dirstr = "direction: " + dir + ";";
  87     e.setAttribute("style", dirstr + pvisual + ":" + values[2]);
  88     var v2 = c.getPropertyValue(pvisual);
  89     e.setAttribute("style", dirstr + pvisual + ":" + values[3]);
  90     var v3 = c.getPropertyValue(pvisual);
  91     isnot(v2, v3, "values should produce different computed values");
  92
  93     var desc = ["cascading for", pvisual, "and", plogical, "with direction", dir].join(" ");
  94     e.setAttribute("style", dirstr + pvisual + ":" + values[3] + ";" +
  95                             plogical + ":" + values[2]);
  96     is(c.getPropertyValue(pvisual), v2, desc);
  97     e.setAttribute("style", dirstr + plogical + ":" + values[3] + ";" +
  98                             pvisual + ":" + values[2]);
  99     is(c.getPropertyValue(pvisual), v2, desc);
 100     e.setAttribute("style", dirstr + pvisual + ":" + values[2] + ";" +
 101                             plogical + ":" + values[3]);
 102     is(c.getPropertyValue(pvisual), v3, desc);
 103     e.setAttribute("style", dirstr + plogical + ":" + values[2] + ";" +
 104                             pvisual + ":" + values[3]);
 105     is(c.getPropertyValue(pvisual), v3, desc);
 106     e.removeAttribute("style");
 107   }
 108
 109   check_cascading("ltr", set[2], set[0]);
 110   check_cascading("ltr", set[3], set[1]);
 111   check_cascading("rtl", set[2], set[1]);
 112   check_cascading("rtl", set[3], set[0]);
 113 }
 114
 115
 116 </script>
 117 </pre>
 118 </body>
 119 </html>
 120