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