
<!doctype html>
<html>
    <head>
        <style>
            @namespace svg "http://www.w3.org/2000/svg";

            .red-color {
                color: red;
            }

            .green-color {
                color: green;
            }

            .red-fill {
                fill: red;
            }

            .green-fill {
                fill: green;
            }

            .red-stop-color {
                stop-color: red;
            }

            .green-stop-color {
                stop-color: green;
            }

            .group0 div:nth-of-type(1),
            .group0 DIV:nth-of-type(2),
            .group0 Div:nth-of-type(3),
            .group1 foreignObject:nth-of-type(3) {
                color: green;
            }

            .group1 foreignobject:nth-of-type(1),
            .group1 FOREIGNOBJECT:nth-of-type(2),
            .group1 ForeignObject:nth-of-type(4)
            { 
                color: red;
            }

            .group2 circle:nth-of-type(1)
            { 
                fill: green;
            }

            .group2 CIRCLE:nth-of-type(2),
            .group2 Circle:nth-of-type(3) {
                /* Matching any of these selectors is bad as SVG should use case-sensitive matching. */
                fill: red;
            }

            .group3 linearGradient:nth-of-type(3) stop {
                stop-color: green;
            }

            .group3 lineargradient:nth-of-type(1) stop,
            .group3 LINEARGRADIENT:nth-of-type(2) stop,
            .group3 LinearGradient:nth-of-type(4) stop
            {
                /* Matching any of these selectors is bad as SVG should use case-sensitive matching. */
                stop-color: red;
            }

            .group4 svg|linearGradient:nth-of-type(3) stop {
                stop-color: green;
            }

            .group4 svg|lineargradient:nth-of-type(1) stop,
            .group4 svg|LINEARGRADIENT:nth-of-type(2) stop,
            .group4 svg|LinearGradient:nth-of-type(4) stop
            {
                /* Matching any of these selectors is bad as SVG should use case-sensitive matching. */
                stop-color: red;
            }
        </style>
        <script src="../../resources/js-test-pre.js"></script>
    </head>
    <body>
        <div id="container">
            <div class="group0">
                <div id="div1" class="red-color">HTML element matched using lower case selector.</div>
                <div id="div2" class="red-color">HTML element matched using upper case selector.</div>
                <div id="div3" class="red-color">HTML element matched using mixed case selector.</div>
            </div>

            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="900" width="800">
                <g class="group1" transform="translate(0, 10)">
                    <foreignObject id="fo1" class="green-color" y="0" width="100%" height="20">
                        SVG foreign object is NOT matched using lower case selector.
                    </foreignObject>
                    <foreignObject id="fo2" class="green-color" y="40" width="100%" height="20">
                        SVG foreign object is NOT matched using upper case selector.
                    </foreignObject>
                    <foreignObject id="fo3" class="red-color" y="80" width="100%" height="20">
                        SVG foreign object is matched using canonical form selector.
                    </foreignObject>
                    <foreignObject id="fo4" class="green-color" y="120" width="100%" height="20">
                        SVG foreign object is NOT matched using mixed case selector.
                    </foreignObject>
                </g>

                <g class="group2" transform="translate(25, 190)">
                    <line x1="-25" y1="-30" x2="100%" y2="-30" stroke-width="2" stroke="gray"></line>

                    <circle id="circle1" class="red-fill" cy="0" r="20" stroke="black" stroke-width="2" />
                    <text x="50" y="0">Circle SVG element is matched using lower case / canonical form selector</text>

                    <circle id="circle2" class="green-fill" cy="60" r="20" stroke="black" stroke-width="2" />
                    <text x="50" y="60">Circle SVG element is NOT matched using upper case selector</text>

                    <circle id="circle3" class="green-fill" cy="120" r="20" stroke="black" stroke-width="2" />
                    <text x="50" y="120">Circle SVG element is NOT matched using mixed case selector</text>
                </g>

                <g class="group3" transform="translate(25, 370)">
                    <line x1="-25" y1="-30" x2="100%" y2="-30" stroke-width="2" stroke="gray"></line>

                    <linearGradient id="Gradient1">
                        <stop id="stop1" offset="0%" class="green-stop-color" />
                    </linearGradient>
                    <circle cy="0" r="20" stroke="black" stroke-width="2" fill="url(#Gradient1)" />
                    <text x="50" y="0">SVG LinearGradient fill element is NOT matched using lower case selector</text>

                    <linearGradient id="Gradient2">
                        <stop id="stop2" offset="0%" class="green-stop-color" />
                    </linearGradient>
                    <circle cy="60" r="20" stroke="black" stroke-width="2" fill="url(#Gradient2)" />
                    <text x="50" y="60">SVG LinearGradient fill element is NOT matched using upper case selector</text>

                    <linearGradient id="Gradient3">
                        <stop id="stop3" offset="0%" class="red-stop-color" />
                    </linearGradient>
                    <circle cy="120" r="20" stroke="black" stroke-width="2" fill="url(#Gradient3)" />
                    <text x="50" y="120">SVG LinearGradient fill element is matched using canonical form selector</text>

                    <linearGradient id="Gradient4">
                        <stop id="stop4" offset="0%" class="green-stop-color" />
                    </linearGradient>
                    <circle cy="180" r="20" stroke="black" stroke-width="2" fill="url(#Gradient4)" />
                    <text x="50" y="180">SVG LinearGradient fill element is NOT matched using mixed case selector</text>
                </g>

                <g class="group4" transform="translate(25, 610)">
                    <line x1="-25" y1="-30" x2="100%" y2="-30" stroke-width="2" stroke="gray"></line>

                    <linearGradient id="Gradient5">
                        <stop id="stop5" offset="0%" class="green-stop-color" />
                    </linearGradient>
                    <circle cy="0" r="20" stroke="black" stroke-width="2" fill="url(#Gradient5)" />
                    <text x="50" y="0">SVG LinearGradient fill element is NOT matched using lower case selector + svg namespace</text>

                    <linearGradient id="Gradient6">
                        <stop id="stop6" offset="0%" class="green-stop-color" />
                    </linearGradient>
                    <circle cy="60" r="20" stroke="black" stroke-width="2" fill="url(#Gradient6)" />
                    <text x="50" y="60">SVG LinearGradient fill element is NOT matched using upper case selector + svg namespace</text>

                    <linearGradient id="Gradient7">
                        <stop id="stop7" offset="0%" class="red-stop-color" />
                    </linearGradient>
                    <circle cy="120" r="20" stroke="black" stroke-width="2" fill="url(#Gradient7)" />
                    <text x="50" y="120">SVG LinearGradient fill element is matched using canonical form selector + svg namespace</text>

                    <linearGradient id="Gradient8">
                        <stop id="stop8" offset="0%" class="green-stop-color" />
                    </linearGradient>
                    <circle cy="180" r="20" stroke="black" stroke-width="2" fill="url(#Gradient8)" />
                    <text x="50" y="180">SVG LinearGradient fill element is NOT matched using mixed case selector + svg namespace</text>
                </g>
            </svg>
        </div>
        <script>
            function checkStyle(prefix, count, property, value) {
                for (var i = 1; i <= count; ++i)
                    shouldBe("window.getComputedStyle(document.getElementById(\"" + prefix + i + "\"))." + property, "\"" + value + "\"");
            }
            checkStyle("div", 3, "color", "rgb(0, 128, 0)");
            checkStyle("fo", 4, "color", "rgb(0, 128, 0)");
            checkStyle("circle", 3, "fill", "rgb(0, 128, 0)");
            checkStyle("stop", 8, "stopColor", "rgb(0, 128, 0)");

            document.getElementById("container").style.display = "none";
        </script>
        <script src="../../resources/js-test-post.js"></script>
    </body>
</html>