layout/style/test/test_bug652486.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <!--
   4 https://bugzilla.mozilla.org/show_bug.cgi?id=652486
   5 https://bugzilla.mozilla.org/show_bug.cgi?id=1039488
   6 -->
   7 <head>
   8   <title>Test for Bug 652486, Bug 1039488 and Bug 1574222</title>
   9   <script src="/tests/SimpleTest/SimpleTest.js"></script>
  10   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
  11 </head>
  12 <body>
  13 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=652486">Mozilla Bug 652486</a>
  14 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1039488">Mozilla Bug 1039488</a>
  15 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1574222">Mozilla Bug 1574222</a>
  16
  17 <p id="display"></p>
  18 <div id="content" style="display: none">
  19   <div id="t"></div>
  20 </div>
  21 <pre id="test">
  22 <script class="testbody" type="text/javascript">
  23
  24 /** Test for Bug 652486, Bug 1039488 and Bug 1574222 **/
  25
  26 function c() {
  27   return document.defaultView.getComputedStyle($('t')).
  28            getPropertyValue("text-decoration");
  29 }
  30
  31 // The default value of the 'color' property, which in turn establishes the
  32 // default value of 'text-decoration-color' (via the 'currentColor' keyword).
  33 var defaultLineColor = "rgb(0, 0, 0)";
  34
  35 var tests = [
  36   // When only text-decoration was specified, text-decoration should look like
  37   // a longhand property. However, as of Bug 1574222, the getComputedStyle()
  38   // serialization for "text-decoration" will always include the color,
  39   // because we can't tell whether the resolved color value came from the
  40   // initial "currentColor" value (and could safely be omitted) vs. whether it
  41   // came from a custom specified value (and cannot be omitted).
  42   { decoration: "none",
  43     line: null, color: null, style: null,
  44     expectedValue: defaultLineColor },
  45   { decoration: "underline",
  46     line: null, color: null, style: null,
  47     expectedValue: "underline " + defaultLineColor },
  48   { decoration: "overline",
  49     line: null, color: null, style: null,
  50     expectedValue: "overline " + defaultLineColor },
  51   { decoration: "line-through",
  52     line: null, color: null, style: null,
  53     expectedValue: "line-through " + defaultLineColor },
  54   { decoration: "blink",
  55     line: null, color: null, style: null,
  56     expectedValue: "blink " + defaultLineColor },
  57   { decoration: "underline overline",
  58     line: null, color: null, style: null,
  59     expectedValue: "underline overline " + defaultLineColor },
  60   { decoration: "underline line-through",
  61     line: null, color: null, style: null,
  62     expectedValue: "underline line-through " + defaultLineColor },
  63   { decoration: "blink underline",
  64     line: null, color: null, style: null,
  65     expectedValue: "underline blink " + defaultLineColor },
  66   { decoration: "underline blink",
  67     line: null, color: null, style: null,
  68     expectedValue: "underline blink " + defaultLineColor },
  69
  70   // When only text-decoration-line or text-blink was specified,
  71   // text-decoration should look like a longhand property.
  72   // However, as of Bug 1574222, the getComputedStyle() serialization for
  73   // "text-decoration" will always include the color, because we can't tell
  74   // whether the resolved color value came from the initial "currentColor"
  75   // value (and could safely be omitted) vs. whether it came from a custom
  76   // specified value (and cannot be omitted).
  77   { decoration: null,
  78     line: "blink", color: null, style: null,
  79     expectedValue: "blink " + defaultLineColor },
  80   { decoration: null,
  81     line: "underline", color: null, style: null,
  82     expectedValue: "underline " + defaultLineColor },
  83   { decoration: null,
  84     line: "overline", color: null, style: null,
  85     expectedValue: "overline " + defaultLineColor },
  86   { decoration: null,
  87     line: "line-through", color: null, style: null,
  88     expectedValue: "line-through " + defaultLineColor },
  89   { decoration: null,
  90     line: "blink underline", color: null, style: null,
  91     expectedValue: "underline blink " + defaultLineColor },
  92
  93   // When text-decoration-color isn't its initial value,
  94   // text-decoration should be a shorthand property.
  95   { decoration: "blink",
  96     line: null, color: "rgb(0, 0, 0)", style: null,
  97     expectedValue: "blink rgb(0, 0, 0)" },
  98   { decoration: "underline",
  99     line: null, color: "black", style: null,
 100     expectedValue: "underline rgb(0, 0, 0)" },
 101   { decoration: "overline",
 102     line: null, color: "#ff0000", style: null,
 103     expectedValue: "overline rgb(255, 0, 0)" },
 104   { decoration: "line-through",
 105     line: null, color: "initial", style: null,
 106     expectedValue: "line-through " + defaultLineColor },
 107   { decoration: "blink underline",
 108     line: null, color: "currentColor", style: null,
 109     expectedValue: "underline blink " + defaultLineColor },
 110   { decoration: "underline line-through",
 111     line: null, color: "currentcolor", style: null,
 112     expectedValue: "underline line-through " + defaultLineColor },
 113
 114   // When text-decoration-style isn't its initial value,
 115   // text-decoration should be a shorthand property.
 116   { decoration: "blink",
 117     line: null, color: null, style: "-moz-none",
 118     expectedValue: "blink -moz-none " + defaultLineColor },
 119   { decoration: "underline",
 120     line: null, color: null, style: "dotted",
 121     expectedValue: "underline dotted " + defaultLineColor },
 122   { decoration: "overline",
 123     line: null, color: null, style: "dashed",
 124     expectedValue: "overline dashed " + defaultLineColor },
 125   { decoration: "line-through",
 126     line: null, color: null, style: "double",
 127     expectedValue: "line-through double " + defaultLineColor },
 128   { decoration: "blink underline",
 129     line: null, color: null, style: "wavy",
 130     expectedValue: "underline blink wavy " + defaultLineColor },
 131   { decoration: "underline blink overline line-through",
 132     line: null, color: null, style: "solid",
 133     expectedValue: "underline overline line-through blink " + defaultLineColor },
 134   { decoration: "line-through overline underline",
 135     line: null, color: null, style: "initial",
 136     expectedValue: "underline overline line-through " + defaultLineColor }
 137 ];
 138
 139 function makeDeclaration(aTest)
 140 {
 141   var str = "";
 142   if (aTest.decoration) {
 143     str += "text-decoration: " + aTest.decoration + "; ";
 144   }
 145   if (aTest.color) {
 146     str += "text-decoration-color: " + aTest.color + "; ";
 147   }
 148   if (aTest.line) {
 149     str += "text-decoration-line: " + aTest.line + "; ";
 150   }
 151   if (aTest.style) {
 152     str += "text-decoration-style: " + aTest.style + "; ";
 153   }
 154   return str;
 155 }
 156
 157 function clearStyleObject()
 158 {
 159   $('t').style.textDecoration = null;
 160 }
 161
 162 for (var i = 0; i < tests.length; ++i) {
 163   var test = tests[i];
 164   if (test.decoration) {
 165     $('t').style.textDecoration = test.decoration;
 166   }
 167   if (test.color) {
 168     $('t').style.textDecorationColor = test.color;
 169   }
 170   if (test.line) {
 171     $('t').style.textDecorationLine = test.line;
 172   }
 173   if (test.style) {
 174     $('t').style.textDecorationStyle = test.style;
 175   }
 176
 177   var dec = makeDeclaration(test);
 178   is(c(), test.expectedValue, "Test1 (computed value): " + dec);
 179
 180   clearStyleObject();
 181
 182   $('t').setAttribute("style", dec);
 183
 184   is(c(), test.expectedValue, "Test2 (computed value): " + dec);
 185
 186   $('t').removeAttribute("style");
 187 }
 188
 189 </script>
 190 </pre>
 191 </body>
 192 </html>