| <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> |
| <html> |
| <head> |
| <script src="../../../resources/js-test-pre.js"></script> |
| </head> |
| <body> |
| <script> |
| function testElementStyle(type, value) |
| { |
| if (type != null) { |
| shouldBe("e.style.textDecoration", "'" + value + "'"); |
| shouldBe("e.style.getPropertyValue('text-decoration')", "'" + value + "'"); |
| shouldBeNull("e.style.getPropertyCSSValue('text-decoration')"); |
| |
| shouldBe("e.style.textDecorationLine", "'" + value + "'"); |
| shouldBe("e.style.getPropertyValue('text-decoration-line')", "'" + value + "'"); |
| shouldBe("e.style.getPropertyCSSValue('text-decoration-line').toString()", "'" + type + "'"); |
| shouldBe("e.style.getPropertyCSSValue('text-decoration-line').cssText", "'" + value + "'"); |
| } else { |
| shouldBe("e.style.textDecoration", "''"); |
| shouldBe("e.style.getPropertyValue('text-decoration')", "''"); |
| shouldBeNull("e.style.getPropertyCSSValue('text-decoration')"); |
| |
| shouldBe("e.style.textDecorationLine", "''"); |
| shouldBe("e.style.getPropertyValue('text-decoration-line')", "''"); |
| shouldBeNull("e.style.getPropertyCSSValue('text-decoration-line')"); |
| } |
| } |
| |
| function testComputedStyle(type, value) |
| { |
| computedStyle = window.getComputedStyle(e, null); |
| |
| shouldBe("computedStyle.textDecoration", "'" + value + "'"); |
| shouldBe("computedStyle.getPropertyValue('text-decoration')", "'" + value + "'"); |
| shouldBe("computedStyle.getPropertyCSSValue('text-decoration').toString()", "'" + type + "'"); |
| shouldBe("computedStyle.getPropertyCSSValue('text-decoration').cssText", "'" + value + "'"); |
| |
| shouldBe("computedStyle.textDecorationLine", "'" + value + "'"); |
| shouldBe("computedStyle.getPropertyValue('text-decoration-line')", "'" + value + "'"); |
| shouldBe("computedStyle.getPropertyCSSValue('text-decoration-line').toString()", "'" + type + "'"); |
| shouldBe("computedStyle.getPropertyCSSValue('text-decoration-line').cssText", "'" + value + "'"); |
| } |
| |
| description("Test to make sure text-decoration property returns values properly.") |
| |
| var testContainer = document.createElement("div"); |
| testContainer.contentEditable = true; |
| document.body.appendChild(testContainer); |
| |
| testContainer.innerHTML = '<div id="test">hello world</div>'; |
| debug("Initial value:"); |
| e = document.getElementById('test'); |
| testElementStyle(null, ''); |
| testComputedStyle("[object CSSPrimitiveValue]", "none"); |
| debug(''); |
| |
| debug("Initial value (explicit):"); |
| e.style.textDecoration = 'initial'; |
| testElementStyle("[object CSSValue]", "initial"); |
| testComputedStyle("[object CSSPrimitiveValue]", "none"); |
| debug(''); |
| |
| debug("Value 'none':"); |
| e.style.textDecoration = 'none'; |
| testElementStyle("[object CSSPrimitiveValue]", "none"); |
| testComputedStyle("[object CSSPrimitiveValue]", "none"); |
| debug(''); |
| |
| debug("Value 'underline':"); |
| e.style.textDecoration = 'underline'; |
| testElementStyle("[object CSSValueList]", "underline"); |
| testComputedStyle("[object CSSValueList]", "underline"); |
| debug(''); |
| |
| debug("Value 'overline':"); |
| e.style.textDecoration = 'overline'; |
| testElementStyle("[object CSSValueList]", "overline"); |
| testComputedStyle("[object CSSValueList]", "overline"); |
| debug(''); |
| |
| debug("Value 'line-through':"); |
| e.style.textDecoration = 'line-through'; |
| testElementStyle("[object CSSValueList]", "line-through"); |
| testComputedStyle("[object CSSValueList]", "line-through"); |
| debug(''); |
| |
| debug("Value 'underline overline line-through':"); |
| e.style.textDecoration = 'underline overline line-through'; |
| testElementStyle("[object CSSValueList]", "underline overline line-through"); |
| testComputedStyle("[object CSSValueList]", "underline overline line-through"); |
| debug(''); |
| |
| debug("Value 'blink' (valid but ignored):"); |
| e.style.textDecoration = 'blink'; |
| testElementStyle("[object CSSValueList]", "blink"); |
| testComputedStyle("[object CSSPrimitiveValue]", "none"); |
| debug(''); |
| |
| debug("Value '':"); |
| e.style.textDecoration = ''; |
| testElementStyle(null, ''); |
| testComputedStyle("[object CSSPrimitiveValue]", "none"); |
| debug(''); |
| |
| testContainer.innerHTML = '<div id="test-parent" style="text-decoration: underline;">hello <span id="test-ancestor" style="text-decoration: inherit;">world</span></div>'; |
| debug("Parent gets 'underline' value:"); |
| e = document.getElementById('test-parent'); |
| testElementStyle("[object CSSValueList]", "underline"); |
| testComputedStyle("[object CSSValueList]", "underline"); |
| debug(''); |
| |
| debug("Ancestor should explicitly inherit value from parent when 'inherit' value is used:"); |
| e = document.getElementById('test-ancestor'); |
| testElementStyle("[object CSSValue]", "inherit"); |
| testComputedStyle("[object CSSValueList]", "underline"); |
| debug(''); |
| |
| debug("Ancestor should not implicitly inherit value from parent (i.e. when value is void):"); |
| e.style.textDecoration = ''; |
| testElementStyle(null, ''); |
| testComputedStyle("[object CSSPrimitiveValue]", "none"); |
| debug(''); |
| |
| document.body.removeChild(testContainer); |
| </script> |
| <script src="../../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
