<!DOCTYPE html>
<html>
    <head>
        <script src="../../../resources/js-test-pre.js"></script>
    </head>
    <body>
        <script>
            description("This tests checks that all of the input values for object-position parse correctly.");

            function test(value)
            {
                var div = document.createElement("div");
                div.setAttribute("style", value);
                document.body.appendChild(div);

                var result = div.style.getPropertyValue("object-position");
                document.body.removeChild(div);
                return result;
            }

            function testComputedStyle(value)
            {
                var div = document.createElement("div");
                div.setAttribute("style", value);
                document.body.appendChild(div);

                var result = window.getComputedStyle(div).objectPosition;
                document.body.removeChild(div);
                return result;
            }

            shouldBe('testComputedStyle(";")', '"50% 50%"');
            shouldBe('test("object-position: inherit;")', '"inherit"');
            shouldBe('test("object-position: initial;")', '"initial"');
            
            shouldBeEqualToString('test("object-position: 23px;")', '23px center');
            shouldBeEqualToString('test("object-position: center 23px;")', 'center 23px');
            shouldBeEqualToString('test("object-position: 50% 23px;")', '50% 23px');
            shouldBeEqualToString('test("object-position: 50% left;")', '');
            
            shouldBeEqualToString('test("object-position: left 10px top 15px;")', 'left 10px top 15px');
            shouldBeEqualToString('test("object-position: right 10px bottom 15px;")', 'right 10px bottom 15px');

            shouldBeEqualToString('testComputedStyle("object-position: bottom 20%;")', '50% 50%');
            shouldBeEqualToString('testComputedStyle("object-position: right 20%;")', '100% 20%');
            shouldBeEqualToString('testComputedStyle("object-position: right")', '100% 50%');
            shouldBeEqualToString('testComputedStyle("object-position: right bottom")', '100% 100%');

            shouldBeEqualToString('testComputedStyle("object-position: left 10px top 15px;")', '10px 15px');
            shouldBeEqualToString('testComputedStyle("object-position: right 10px bottom 15px;")', 'calc(100% - 10px) calc(100% - 15px)');
            shouldBeEqualToString('testComputedStyle("object-position: bottom 20% right -20px;")', 'calc(100% + 20px) 80%');
            shouldBeEqualToString('testComputedStyle("object-position: calc(100% - 20px) calc(100% - 10%)")', 'calc(100% - 20px) 90%');
            shouldBeEqualToString('testComputedStyle("object-position: right calc(100% - 20px) bottom calc(100% - 10%)")', 'calc(100% - (100% - 20px)) 10%');
            
        </script>
        <script src="../../../resources/js-test-post.js"></script>
    </body>
</html>