<!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>
