2011-05-20 09:56:23 +04:00
|
|
|
<!DOCTYPE HTML>
|
|
|
|
|
<html>
|
|
|
|
|
<!--
|
|
|
|
|
https://bugzilla.mozilla.org/show_bug.cgi?id=652486
|
2014-11-18 13:23:09 +03:00
|
|
|
https://bugzilla.mozilla.org/show_bug.cgi?id=1039488
|
2011-05-20 09:56:23 +04:00
|
|
|
-->
|
|
|
|
|
<head>
|
2014-11-18 13:23:09 +03:00
|
|
|
<title>Test for Bug 652486 and Bug 1039488</title>
|
2011-05-20 09:56:23 +04:00
|
|
|
<script type="text/javascript" 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>
|
2014-11-18 13:23:09 +03:00
|
|
|
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1039488">Mozilla Bug 1039488</a>
|
2011-05-20 09:56:23 +04:00
|
|
|
|
|
|
|
|
<p id="display"></p>
|
|
|
|
|
<div id="content" style="display: none">
|
|
|
|
|
<div id="t"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<pre id="test">
|
|
|
|
|
<script class="testbody" type="text/javascript">
|
|
|
|
|
|
2014-11-18 13:23:09 +03:00
|
|
|
/** Test for Bug 652486 and Bug 1039488 **/
|
2011-05-20 09:56:23 +04:00
|
|
|
|
|
|
|
|
function c() {
|
2017-01-27 12:51:02 +03:00
|
|
|
return document.defaultView.getComputedStyle($('t')).
|
2011-05-20 09:56:23 +04:00
|
|
|
getPropertyValue("text-decoration");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var tests = [
|
|
|
|
|
// When only text-decoration was specified, text-decoration should look like
|
|
|
|
|
// a longhand property.
|
|
|
|
|
{ decoration: "none",
|
2013-08-06 18:02:34 +04:00
|
|
|
line: null, color: null, style: null,
|
2018-05-08 12:25:44 +03:00
|
|
|
expectedValue: "none" },
|
2011-05-20 09:56:23 +04:00
|
|
|
{ decoration: "underline",
|
2013-08-06 18:02:34 +04:00
|
|
|
line: null, color: null, style: null,
|
2018-05-08 12:25:44 +03:00
|
|
|
expectedValue: "underline" },
|
2011-05-20 09:56:23 +04:00
|
|
|
{ decoration: "overline",
|
2013-08-06 18:02:34 +04:00
|
|
|
line: null, color: null, style: null,
|
2018-05-08 12:25:44 +03:00
|
|
|
expectedValue: "overline" },
|
2011-05-20 09:56:23 +04:00
|
|
|
{ decoration: "line-through",
|
2013-08-06 18:02:34 +04:00
|
|
|
line: null, color: null, style: null,
|
2018-05-08 12:25:44 +03:00
|
|
|
expectedValue: "line-through" },
|
2011-05-20 09:56:23 +04:00
|
|
|
{ decoration: "blink",
|
2013-08-06 18:02:34 +04:00
|
|
|
line: null, color: null, style: null,
|
2018-05-08 12:25:44 +03:00
|
|
|
expectedValue: "blink" },
|
2011-05-20 09:56:23 +04:00
|
|
|
{ decoration: "underline overline",
|
2013-08-06 18:02:34 +04:00
|
|
|
line: null, color: null, style: null,
|
2018-05-08 12:25:44 +03:00
|
|
|
expectedValue: "underline overline" },
|
2011-05-20 09:56:23 +04:00
|
|
|
{ decoration: "underline line-through",
|
2013-08-06 18:02:34 +04:00
|
|
|
line: null, color: null, style: null,
|
2018-05-08 12:25:44 +03:00
|
|
|
expectedValue: "underline line-through" },
|
2011-05-20 09:56:23 +04:00
|
|
|
{ decoration: "blink underline",
|
2013-08-06 18:02:34 +04:00
|
|
|
line: null, color: null, style: null,
|
2018-05-08 12:25:44 +03:00
|
|
|
expectedValue: "underline blink" },
|
2011-05-20 09:56:23 +04:00
|
|
|
{ decoration: "underline blink",
|
2013-08-06 18:02:34 +04:00
|
|
|
line: null, color: null, style: null,
|
2018-05-08 12:25:44 +03:00
|
|
|
expectedValue: "underline blink" },
|
2011-05-20 09:56:23 +04:00
|
|
|
|
|
|
|
|
// When only text-decoration-line or text-blink was specified,
|
|
|
|
|
// text-decoration should look like a longhand property.
|
|
|
|
|
{ decoration: null,
|
2013-08-06 18:02:34 +04:00
|
|
|
line: "blink", color: null, style: null,
|
2018-05-08 12:25:44 +03:00
|
|
|
expectedValue: "blink" },
|
2011-05-20 09:56:23 +04:00
|
|
|
{ decoration: null,
|
2013-08-06 18:02:34 +04:00
|
|
|
line: "underline", color: null, style: null,
|
2018-05-08 12:25:44 +03:00
|
|
|
expectedValue: "underline" },
|
2011-05-20 09:56:23 +04:00
|
|
|
{ decoration: null,
|
2013-08-06 18:02:34 +04:00
|
|
|
line: "overline", color: null, style: null,
|
2018-05-08 12:25:44 +03:00
|
|
|
expectedValue: "overline" },
|
2011-05-20 09:56:23 +04:00
|
|
|
{ decoration: null,
|
2013-08-06 18:02:34 +04:00
|
|
|
line: "line-through", color: null, style: null,
|
2018-05-08 12:25:44 +03:00
|
|
|
expectedValue: "line-through" },
|
2011-05-20 09:56:23 +04:00
|
|
|
{ decoration: null,
|
2013-08-06 18:02:34 +04:00
|
|
|
line: "blink underline", color: null, style: null,
|
2018-05-08 12:25:44 +03:00
|
|
|
expectedValue: "underline blink" },
|
2011-05-20 09:56:23 +04:00
|
|
|
|
|
|
|
|
// When text-decoration-color isn't its initial value,
|
|
|
|
|
// text-decoration should be a shorthand property.
|
|
|
|
|
{ decoration: "blink",
|
2013-08-06 18:02:34 +04:00
|
|
|
line: null, color: "rgb(0, 0, 0)", style: null,
|
2018-05-08 12:25:44 +03:00
|
|
|
expectedValue: "blink rgb(0, 0, 0)" },
|
2011-05-20 09:56:23 +04:00
|
|
|
{ decoration: "underline",
|
2013-08-06 18:02:34 +04:00
|
|
|
line: null, color: "black", style: null,
|
2018-05-08 12:25:44 +03:00
|
|
|
expectedValue: "underline rgb(0, 0, 0)" },
|
2011-05-20 09:56:23 +04:00
|
|
|
{ decoration: "overline",
|
2013-08-06 18:02:34 +04:00
|
|
|
line: null, color: "#ff0000", style: null,
|
2018-05-08 12:25:44 +03:00
|
|
|
expectedValue: "overline rgb(255, 0, 0)" },
|
2011-05-20 09:56:23 +04:00
|
|
|
{ decoration: "line-through",
|
2013-08-06 18:02:34 +04:00
|
|
|
line: null, color: "initial", style: null,
|
2018-05-08 12:25:44 +03:00
|
|
|
expectedValue: "line-through" },
|
2011-05-20 09:56:23 +04:00
|
|
|
{ decoration: "blink underline",
|
2013-08-06 18:02:34 +04:00
|
|
|
line: null, color: "currentColor", style: null,
|
2018-05-08 12:25:44 +03:00
|
|
|
expectedValue: "underline blink" },
|
2011-05-20 09:56:23 +04:00
|
|
|
{ decoration: "underline line-through",
|
2016-09-29 10:47:22 +03:00
|
|
|
line: null, color: "currentcolor", style: null,
|
2018-05-08 12:25:44 +03:00
|
|
|
expectedValue: "underline line-through" },
|
2011-05-20 09:56:23 +04:00
|
|
|
|
|
|
|
|
// When text-decoration-style isn't its initial value,
|
|
|
|
|
// text-decoration should be a shorthand property.
|
|
|
|
|
{ decoration: "blink",
|
2013-08-06 18:02:34 +04:00
|
|
|
line: null, color: null, style: "-moz-none",
|
2018-05-08 12:25:44 +03:00
|
|
|
expectedValue: "blink -moz-none" },
|
2011-05-20 09:56:23 +04:00
|
|
|
{ decoration: "underline",
|
2013-08-06 18:02:34 +04:00
|
|
|
line: null, color: null, style: "dotted",
|
2018-05-08 12:25:44 +03:00
|
|
|
expectedValue: "underline dotted" },
|
2011-05-20 09:56:23 +04:00
|
|
|
{ decoration: "overline",
|
2013-08-06 18:02:34 +04:00
|
|
|
line: null, color: null, style: "dashed",
|
2018-05-08 12:25:44 +03:00
|
|
|
expectedValue: "overline dashed" },
|
2011-05-20 09:56:23 +04:00
|
|
|
{ decoration: "line-through",
|
2013-08-06 18:02:34 +04:00
|
|
|
line: null, color: null, style: "double",
|
2018-05-08 12:25:44 +03:00
|
|
|
expectedValue: "line-through double" },
|
2011-05-20 09:56:23 +04:00
|
|
|
{ decoration: "blink underline",
|
2013-08-06 18:02:34 +04:00
|
|
|
line: null, color: null, style: "wavy",
|
2018-05-08 12:25:44 +03:00
|
|
|
expectedValue: "underline blink wavy" },
|
2011-05-20 09:56:23 +04:00
|
|
|
{ decoration: "underline blink overline line-through",
|
2013-08-06 18:02:34 +04:00
|
|
|
line: null, color: null, style: "solid",
|
2018-05-08 12:25:44 +03:00
|
|
|
expectedValue: "underline overline line-through blink" },
|
2011-05-20 09:56:23 +04:00
|
|
|
{ decoration: "line-through overline underline",
|
2013-08-06 18:02:34 +04:00
|
|
|
line: null, color: null, style: "initial",
|
2018-05-08 12:25:44 +03:00
|
|
|
expectedValue: "underline overline line-through" }
|
2011-05-20 09:56:23 +04:00
|
|
|
];
|
|
|
|
|
|
|
|
|
|
function makeDeclaration(aTest)
|
|
|
|
|
{
|
|
|
|
|
var str = "";
|
|
|
|
|
if (aTest.decoration) {
|
|
|
|
|
str += "text-decoration: " + aTest.decoration + "; ";
|
|
|
|
|
}
|
|
|
|
|
if (aTest.color) {
|
2014-11-18 13:23:09 +03:00
|
|
|
str += "text-decoration-color: " + aTest.color + "; ";
|
2011-05-20 09:56:23 +04:00
|
|
|
}
|
|
|
|
|
if (aTest.line) {
|
2014-11-18 13:23:09 +03:00
|
|
|
str += "text-decoration-line: " + aTest.line + "; ";
|
2011-05-20 09:56:23 +04:00
|
|
|
}
|
|
|
|
|
if (aTest.style) {
|
2014-11-18 13:23:09 +03:00
|
|
|
str += "text-decoration-style: " + aTest.style + "; ";
|
2011-05-20 09:56:23 +04:00
|
|
|
}
|
|
|
|
|
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) {
|
2014-11-18 13:23:09 +03:00
|
|
|
$('t').style.textDecorationColor = test.color;
|
2011-05-20 09:56:23 +04:00
|
|
|
}
|
|
|
|
|
if (test.line) {
|
2014-11-18 13:23:09 +03:00
|
|
|
$('t').style.textDecorationLine = test.line;
|
2011-05-20 09:56:23 +04:00
|
|
|
}
|
|
|
|
|
if (test.style) {
|
2014-11-18 13:23:09 +03:00
|
|
|
$('t').style.textDecorationStyle = test.style;
|
2011-05-20 09:56:23 +04:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
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>
|
