<!DOCTYPE html>
<html>
    <head>
        <script src="../../../../resources/js-test-pre.js"></script>
    </head>
    <body>
        <script>
            function testElementStyle(propertyJS, propertyCSS, value)
            {
                shouldBe("e.style.getPropertyValue('" + propertyCSS + "')", "'" + value + "'");
            }

            function testComputedStyle(propertyJS, propertyCSS, value)
            {
                computedStyle = window.getComputedStyle(e, null);
                shouldBe("computedStyle.getPropertyValue('" + propertyCSS + "')", "'" + value + "'");
            }

            function checkComputedStyleValue(propertyJS, propertyCSS) {
                var before = window.getComputedStyle(e, null).getPropertyValue(propertyCSS);
                e.style[propertyJS] = 'none';
                e.style[propertyJS] = before;
                return (window.getComputedStyle(e, null).getPropertyValue(propertyCSS) == before);
            }

            description("Test to make sure -webkit-text-decoration property is backwards compatible with CSS 2.1 and CSS 3 shorthand.")

            var testContainer = document.createElement("div");
            testContainer.contentEditable = true;
            document.body.appendChild(testContainer);

            testContainer.innerHTML = '<div id="test">hello world</div>';

            var e = document.getElementById('test');

            debug('Initial values:');
            shouldBeNull("e.style.getPropertyCSSValue('-webkit-text-decoration')");
            testComputedStyle("webkitTextDecoration", "-webkit-text-decoration", "none solid rgb(0, 0, 0)");
            shouldBe("checkComputedStyleValue('webkitTextDecoration', '-webkit-text-decoration')", "true");
            debug('');

            debug('CSS2.1 backwards compatibility ("-webkit-text-decoration: underline overline line-through blink;"):');
            e.style.webkitTextDecoration = "underline overline line-through blink";
            testElementStyle("webkitTextDecorationLine", "-webkit-text-decoration-line", "underline overline line-through blink");
            testComputedStyle("webkitTextDecorationLine", "-webkit-text-decoration-line", "underline overline line-through");
            testComputedStyle("webkitTextDecoration", "-webkit-text-decoration", "underline overline line-through solid rgb(0, 0, 0)");
            shouldBe("checkComputedStyleValue('webkitTextDecoration', '-webkit-text-decoration')", "true");
            debug('');

            debug('CSS3 Shorthand ("-webkit-text-decoration: underline overline line-through blink dashed red;"):');
            e.style.webkitTextDecoration = "underline overline line-through blink dashed red";
            testComputedStyle("webkitTextDecoration", "-webkit-text-decoration", "underline overline line-through dashed rgb(255, 0, 0)");
            testComputedStyle("webkitTextDecorationLine", "-webkit-text-decoration-line", "underline overline line-through");
            testComputedStyle("webkitTextDecorationStyle", "-webkit-text-decoration-style", "dashed");
            testComputedStyle("webkitTextDecorationColor", "-webkit-text-decoration-color", "rgb(255, 0, 0)");
            shouldBe("checkComputedStyleValue('webkitTextDecoration', '-webkit-text-decoration')", "true");
            debug('');

            debug('Omitting text decoration line resets to its initial value "none" ("-webkit-text-decoration: navy dotted;"):');
            e.style.webkitTextDecoration = "navy dotted";
            testComputedStyle("webkitTextDecoration", "-webkit-text-decoration", "none dotted rgb(0, 0, 128)");
            testComputedStyle("webkitTextDecorationLine", "-webkit-text-decoration-line", "none");
            testComputedStyle("webkitTextDecorationStyle", "-webkit-text-decoration-style", "dotted");
            testComputedStyle("webkitTextDecorationColor", "-webkit-text-decoration-color", "rgb(0, 0, 128)");
            shouldBe("checkComputedStyleValue('webkitTextDecoration', '-webkit-text-decoration')", "true");
            debug('');

            debug('CSS2.1 backwards compatibility of non-prefixed shorthand ("text-decoration: underline overline line-through blink;"):');
            e.style.cssText = "text-decoration: underline overline line-through blink";
            testElementStyle("textDecoration", "text-decoration", "underline overline line-through blink");
            testElementStyle("textDecorationLine", "text-decoration-line", "underline overline line-through blink");
            testElementStyle("textDecorationThickness", "text-decoration-thickness", "");
            testElementStyle("textDecorationStyle", "text-decoration-style", "");
            testElementStyle("textDecorationColor", "text-decoration-color", "");
            testComputedStyle("textDecoration", "text-decoration", "underline overline line-through");
            testComputedStyle("textDecorationLine", "text-decoration-line", "underline overline line-through");
            testComputedStyle("textDecorationThickness", "text-decoration-thickness", "auto");
            testComputedStyle("textDecorationStyle", "text-decoration-style", "solid");
            testComputedStyle("textDecorationColor", "text-decoration-color", "rgb(0, 0, 0)");
            shouldBe("checkComputedStyleValue('textDecoration', 'text-decoration')", "true");
            debug('');

            debug('Setting CSS3 longhands to initial values ("text-decoration-line: none; text-decoration-thickness: auto; text-decoration-style: solid; text-decoration-color: currentcolor;"):');
            e.style.cssText = "text-decoration-line: none; text-decoration-thickness: auto; text-decoration-style: solid; text-decoration-color: currentcolor;";
            testElementStyle("textDecoration", "text-decoration", "none");
            testElementStyle("textDecorationLine", "text-decoration-line", "none");
            testElementStyle("textDecorationThickness", "text-decoration-thickness", "auto");
            testElementStyle("textDecorationStyle", "text-decoration-style", "solid");
            testElementStyle("textDecorationColor", "text-decoration-color", "currentcolor");
            testComputedStyle("textDecoration", "text-decoration", "none");
            testComputedStyle("textDecorationLine", "text-decoration-line", "none");
            testComputedStyle("textDecorationThickness", "text-decoration-thickness", "auto");
            testComputedStyle("textDecorationStyle", "text-decoration-style", "solid");
            testComputedStyle("textDecorationColor", "text-decoration-color", "rgb(0, 0, 0)");
            shouldBe("checkComputedStyleValue('textDecoration', 'text-decoration')", "true");
            debug('');

            debug('Setting CSS3 longhands to values backwards compatibile with CSS2.1 ("text-decoration-line: underline overline line-through blink; text-decoration-thickness: auto; text-decoration-style: solid; text-decoration-color: currentcolor;"):');
            e.style.cssText = "text-decoration-line: underline overline line-through blink; text-decoration-thickness: auto; text-decoration-style: solid; text-decoration-color: currentcolor;";
            testElementStyle("textDecoration", "text-decoration", "underline overline line-through blink");
            testElementStyle("textDecorationLine", "text-decoration-line", "underline overline line-through blink");
            testElementStyle("textDecorationThickness", "text-decoration-thickness", "auto");
            testElementStyle("textDecorationStyle", "text-decoration-style", "solid");
            testElementStyle("textDecorationColor", "text-decoration-color", "currentcolor");
            testComputedStyle("textDecoration", "text-decoration", "underline overline line-through");
            testComputedStyle("textDecorationLine", "text-decoration-line", "underline overline line-through");
            testComputedStyle("textDecorationThickness", "text-decoration-thickness", "auto");
            testComputedStyle("textDecorationStyle", "text-decoration-style", "solid");
            testComputedStyle("textDecorationColor", "text-decoration-color", "rgb(0, 0, 0)");
            shouldBe("checkComputedStyleValue('textDecoration', 'text-decoration')", "true");
            debug('');

            debug('Setting CSS3 longhands to values not backwards compatibile with CSS2.1 ("text-decoration-line: underline overline line-through blink; text-decoration-thickness: 16px; text-decoration-style: dotted; text-decoration-color: blue;"):');
            e.style.cssText = "text-decoration-line: underline overline line-through blink; text-decoration-thickness: 16px; text-decoration-style: dotted; text-decoration-color: blue;";
            testElementStyle("textDecoration", "text-decoration", "underline overline line-through blink");
            testElementStyle("textDecorationLine", "text-decoration-line", "underline overline line-through blink");
            testElementStyle("textDecorationThickness", "text-decoration-thickness", "16px");
            testElementStyle("textDecorationStyle", "text-decoration-style", "dotted");
            testElementStyle("textDecorationColor", "text-decoration-color", "blue");
            testComputedStyle("textDecoration", "text-decoration", "underline overline line-through");
            testComputedStyle("textDecorationLine", "text-decoration-line", "underline overline line-through");
            testComputedStyle("textDecorationThickness", "text-decoration-thickness", "16px");
            testComputedStyle("textDecorationStyle", "text-decoration-style", "dotted");
            testComputedStyle("textDecorationColor", "text-decoration-color", "rgb(0, 0, 255)");
            shouldBe("checkComputedStyleValue('textDecoration', 'text-decoration')", "true");
            debug('');

            document.body.removeChild(testContainer);
        </script>
        <script src="../../../../resources/js-test-post.js"></script>
    </body>
</html>
