<!DOCTYPE html>
<html>
    <head>
        <title>Shape Margin - inherit</title>
        <link rel="author" title="Adobe" href="http://html.adobe.com/">
        <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
        <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
        <meta name="assert" content="The shape-margin value is not inherited and can be assigned the 'inherit' value.">
        <meta name="flags" content="dom">
        <script src="../../../../resources/testharness.js"></script>
        <script src="../../../../resources/testharnessreport.js"></script>
        <script src="support/parsing-utils.js"></script>
    </head>
    <body>
        <div id="log"></div>
        <script type="text/javascript">

            function setUpTest(parentValue, childValue) {
                var outer = document.createElement("div");
                var inner = document.createElement("div");
                outer.appendChild(inner);

                outer.style.setProperty("-webkit-shape-outside", "content-box");
                outer.style.setProperty("-webkit-shape-margin", parentValue);
                inner.style.setProperty("-webkit-shape-outside", "circle()");
                inner.style.setProperty("-webkit-shape-margin", childValue);

                document.body.appendChild(outer);

                var inline = inner.style.getPropertyValue("-webkit-shape-margin");
                var style = getComputedStyle(inner);
                var computed = style.getPropertyValue("-webkit-shape-margin");
                document.body.removeChild(outer);

                return [inline, computed];
            }

            test(function() {
                var results = setUpTest("10px", "inherit");
                assert_equals(results[0], "inherit");
                assert_equals(results[1], "10px");
            }, "shape-margin can be assigned 'inherit' value");

            test(function() {
                var results = setUpTest("5px", null);
                assert_equals(results[0], null);
                assert_equals(results[1], "0px");
            }, "shape-margin is not inherited and defaults to 0px");

            test(function() {
                var results = setUpTest("15px", "10px");
                assert_equals(results[0], "10px");
                assert_equals(results[1], "10px");
            }, "shape-margin is not inherited");

        </script>
    </body>
</html>