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