remove-shorthand.html | Explore in Territory

<html>
<head>
    <title></title>
    <script type="text/javascript">
        function log(message)
        {
            var console = document.getElementById("console");
            console.appendChild(document.createElement("li")).innerHTML = message;
        }

        function testShorthand(shorthand)
        {
            var element = document.createElement("div");
            element.setAttribute("style",
                "border: thin dotted purple; \
                 background: red url(/background.png) repeat-y scroll right bottom; \
                 list-style: square outside url(/marker.png); \
                 margin: 5%; \
                 padding: 2em; \
                 -webkit-text-stroke: orange 1pt; \
                 columns: 100px 3; \
                 column-rule: thick dashed silver; \
                 border-spacing: 10px 20px; \
                 -webkit-border-radius: 6px 8px; \
                 overflow: scroll; \
                 -webkit-mask: url(/mask.png) repeat-x center top;");
            var allProperties = element.style.cssText.concat(" ").split("; ");
            element.style.removeProperty(shorthand);
            var remainingProperties = element.style.cssText.concat(" ").split("; ");
            var removedProperties = [];
            var addedProperties = [];

            for (var i = 0; i < allProperties.length; i++) {
                if (remainingProperties.indexOf(allProperties[i]) < 0)
                    removedProperties.push("<tt>" + allProperties[i].replace(/\:.*/,"") + "</tt>");
            }
            for (var i = 0; i < remainingProperties.length; i++) {
                if (allProperties.indexOf(remainingProperties[i]) < 0)
                    addedProperties.push("<tt>" + remainingProperties[i].replace(/\:.*/,"") + "</tt>");
            }

            log("Removing <tt>" + shorthand + '</tt><br>removes "' + removedProperties.join(", ")
                + '"<br>and adds "' + addedProperties.join(", ") + '".');
        }
        
        function test()
        {
            if (window.testRunner)
                testRunner.dumpAsText();

            var shorthands = [
                "background",
                "background-position",
                "border",
                "border-top", "border-right", "border-bottom", "border-left",
                "border-color", "border-style", "border-width",
                "border-radius",
                "-webkit-border-radius",
                "border-spacing",
                "-webkit-columns",
                "-webkit-column-rule",
                "list-style",
                "margin",
                "-webkit-mask",
                "-webkit-mask-position",
                "overflow",
                "padding",
                "-webkit-text-stroke"
            ];

            for (i in shorthands)
                testShorthand(shorthands[i]);
        }
    </script>
</head>
<body onload="test()">
    <p>
        Test for <i><a href="http://bugs.webkit.org/show_bug.cgi?id=9284">http://bugs.webkit.org/show_bug.cgi?id=9284</a>
        Quirksmode (CSS1): Removing inline border styles is impossible</i>.
    </p>
    <p>
        Starting with a declaration containing all properties that are constituents of shortcuts, see what is removed
        when a shortcut property is removed. The shortcut&rsquo;s constituents and only them should be removed.
    </p>
    <ul id="console"></ul>
</body>
</html>
chromium/third_party/blink/web_tests/fast/css/remove-shorthand.html
