Quelle  test_bug652486.html   Sprache: HTML

<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=652486
https://bugzilla.mozilla.org/show_bug.cgi?id=1039488
https://bugzilla.mozilla.org/show_bug.cgi?id=1574222
https://bugzilla.mozilla.org/show_bug.cgi?id=1980562
-->
<head>
  <title>Test for Bug 652486, Bug 1039488, Bug 1574222 and Bug 1980562</title>
  <script src="/tests/SimpleTest/SimpleTest.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
</head>
<body>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=652486">Mozilla Bug 652486</a>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1039488">Mozilla Bug 1039488</a>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1574222">Mozilla Bug 1574222</a>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1980562">Mozilla Bug 1980562</a>

<p id="display"></p>
<div id="content" style="display: none">
  <div id="t"></div>
</div>
<pre id="test">
<script class="testbody" type="text/javascript">

/** Test for Bug 652486, Bug 1039488 and Bug 1574222 */

function c() {
  return document.defaultView.getComputedStyle($('t')).
           getPropertyValue("text-decoration");
}

var tests = [
  // Since bug 1980562, we can now determine whether the resolved color value
  // comes from the initial value `currentColor` and can be omitted from the
  // computed value of the shorthand, so it does not appear in the expected
  // value here unless a color was explicitly specified.
    { decoration: "none",
    line: null, color: null, style: null,
    expectedValue: "none" },
  { decoration: "underline",
    line: null, color: null, style: null,
    expectedValue: "underline" },
  { decoration: "overline",
    line: null, color: null, style: null,
    expectedValue: "overline" },
  { decoration: "line-through",
    line: null, color: null, style: null,
    expectedValue: "line-through" },
  { decoration: "blink",
    line: null, color: null, style: null,
    expectedValue: "blink" },
  { decoration: "underline overline",
    line: null, color: null, style: null,
    expectedValue: "underline overline" },
  { decoration: "underline line-through",
    line: null, color: null, style: null,
    expectedValue: "underline line-through" },
  { decoration: "blink underline",
    line: null, color: null, style: null,
    expectedValue: "underline blink" },
  { decoration: "underline blink",
    line: null, color: null, style: null,
    expectedValue: "underline blink" },

  // When only text-decoration-line or text-blink was specified,
  // text-decoration should look like a longhand property.
  { decoration: null,
    line: "blink", color: null, style: null,
    expectedValue: "blink" },
  { decoration: null,
    line: "underline", color: null, style: null,
    expectedValue: "underline" },
  { decoration: null,
    line: "overline", color: null, style: null,
    expectedValue: "overline" },
  { decoration: null,
    line: "line-through", color: null, style: null,
    expectedValue: "line-through" },
  { decoration: null,
    line: "blink underline", color: null, style: null,
    expectedValue: "underline blink" },

  // When text-decoration-color isn't its initial value,
  // text-decoration should be a shorthand property.
  { decoration: "blink",
    line: null, color: "rgb(0, 0, 0)", style: null,
    expectedValue: "blink rgb(0, 0, 0)" },
  { decoration: "underline",
    line: null, color: "black", style: null,
    expectedValue: "underline rgb(0, 0, 0)" },
  { decoration: "overline",
    line: null, color: "#ff0000", style: null,
    expectedValue: "overline rgb(255, 0, 0)" },
  { decoration: "line-through",
    line: null, color: "initial", style: null,
    expectedValue: "line-through" },
  { decoration: "blink underline",
    line: null, color: "currentColor", style: null,
    expectedValue: "underline blink" },
  { decoration: "underline line-through",
    line: null, color: "currentcolor", style: null,
    expectedValue: "underline line-through" },

  // When text-decoration-style isn't its initial value,
  // text-decoration should be a shorthand property.
  { decoration: "blink",
    line: null, color: null, style: "-moz-none",
    expectedValue: "blink -moz-none" },
  { decoration: "underline",
    line: null, color: null, style: "dotted",
    expectedValue: "underline dotted" },
  { decoration: "overline",
    line: null, color: null, style: "dashed",
    expectedValue: "overline dashed" },
  { decoration: "line-through",
    line: null, color: null, style: "double",
    expectedValue: "line-through double" },
  { decoration: "blink underline",
    line: null, color: null, style: "wavy",
    expectedValue: "underline blink wavy" },
  { decoration: "underline blink overline line-through",
    line: null, color: null, style: "solid",
    expectedValue: "underline overline line-through blink" },
  { decoration: "line-through overline underline",
    line: null, color: null, style: "initial",
    expectedValue: "underline overline line-through" }
];

function makeDeclaration(aTest)
{
  var str = "";
  if (aTest.decoration) {
    str += "text-decoration: " + aTest.decoration + "; ";
  }
  if (aTest.color) {
    str += "text-decoration-color: " + aTest.color + "; ";
  }
  if (aTest.line) {
    str += "text-decoration-line: " + aTest.line + "; ";
  }
  if (aTest.style) {
    str += "text-decoration-style: " + aTest.style + "; ";
  }
  return str;
}

function clearStyleObject()
{
  $('t').style.textDecoration = null;
}

for (var i = 0; i < tests.length; ++i) {
  var test = tests[i];
  if (test.decoration) {
    $('t').style.textDecoration = test.decoration;
  }
  if (test.color) {
    $('t').style.textDecorationColor = test.color;
  }
  if (test.line) {
    $('t').style.textDecorationLine = test.line;
  }
  if (test.style) {
    $('t').style.textDecorationStyle = test.style;
  }

  var dec = makeDeclaration(test);
  is(c(), test.expectedValue, "Test1 (computed value): " + dec);

  clearStyleObject();

  $('t').setAttribute("style", dec);

  is(c(), test.expectedValue, "Test2 (computed value): " + dec);

  $('t').removeAttribute("style");
}

</script>
</pre>
</body>
</html>