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

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

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

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

                var div2 = document.createElement("div");
                div.appendChild(div2);
                
                document.body.appendChild(div);

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

            shouldBe('testComputedStyleInherited("paint-order: fill;")', '"fill"');
            shouldBe('testComputedStyleInherited("paint-order: stroke;")', '"stroke"');
            shouldBe('testComputedStyleInherited("paint-order: markers;")', '"markers"');

            shouldBe('testComputedStyle(";")', '"normal"');
            shouldBe('test("paint-order: fill;")', '"fill"');
            shouldBe('test("paint-order: fill stroke;")', '"fill"');
            shouldBe('test("paint-order: fill markers;")', '"fill markers"');
            shouldBe('test("paint-order: fill stroke markers;")', '"fill"');
            shouldBe('test("paint-order: fill markers stroke;")', '"fill markers"');
            
            shouldBe('test("paint-order: stroke;")', '"stroke"');
            shouldBe('test("paint-order: stroke fill;")', '"stroke"');
            shouldBe('test("paint-order: stroke markers;")', '"stroke markers"');
            shouldBe('test("paint-order: stroke fill markers;")', '"stroke"');
            shouldBe('test("paint-order: stroke markers fill;")', '"stroke markers"');
            
            shouldBe('test("paint-order: markers;")', '"markers"');
            shouldBe('test("paint-order: markers fill;")', '"markers"');
            shouldBe('test("paint-order: markers stroke;")', '"markers stroke"');
            shouldBe('test("paint-order: markers fill stroke;")', '"markers"');
            shouldBe('test("paint-order: markers stroke fill;")', '"markers stroke"');

            shouldBeEqualToString('test("paint-order: fil;")', '');
            shouldBeEqualToString('test("paint-order: fill markrs;")', '');
            shouldBeEqualToString('test("paint-order: 10px;")', '');
            shouldBeEqualToString('test("paint-order: 10%;")', '');
        </script>
        <script src="../../resources/js-test-post.js"></script>
    </body>
</html>