<!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-fit parse correctly.");

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

                var result = div.style.getPropertyValue("object-fit");
                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).objectFit;
                document.body.removeChild(div);
                return result;
            }

            shouldBe('testComputedStyle(";")', '"fill"');
            shouldBe('test("object-fit: inherit;")', '"inherit"');
            shouldBe('test("object-fit: initial;")', '"initial"');
            shouldBe('test("object-fit: fill;")', '"fill"');
            shouldBe('test("object-fit: contain;")', '"contain"');
            shouldBe('test("object-fit: cover;")', '"cover"');
            shouldBe('test("object-fit: none;")', '"none"');
            shouldBe('test("object-fit: scale-down;")', '"scale-down"');

            shouldBeNull('test("object-fit: fill contain;")');
            shouldBeNull('test("object-fit: bananas;")');
            shouldBeNull('test("object-fit: 23px;")');
            shouldBeNull('test("object-fit: 20%;")');
        </script>
        <script src="../../resources/js-test-post.js"></script>
    </body>
</html>