<!DOCTYPE html>
<html>
<head>
    <style>
        * {
            color: black;
        }
        /* Simple Selector. */
        .case1:not(.notgreen) {
            color: green;
        }
        /* Compound Selector. */
        .case2:not(.foo.bar) {
            color: green;
        }
        /* Element not in a link. */
        .case3:not(a *) {
            color: green;
        }
        /* Neither .foo nor .bar. */
        .case4:not(.foo, .bar) {
            color: green;
        }
    </style>
    <script>
        window.addEventListener("load", function() {
            document.body.offsetTop;    // Force layout.
            document.getElementById("case1update1").classList.add("notgreen");
            document.getElementById("case1update2").classList.add("notgreen");
            document.getElementById("case2update1").classList.add("foo");
            document.getElementById("case2update1").classList.add("bar");
            document.getElementById("case2update2").classList.add("bar");
            document.getElementById("case2update2").classList.add("foo");
            document.getElementById("case4update1").classList.add("foo");
            document.getElementById("case4update2").classList.add("bar");
        });
    </script>
</head>
<body>
    <p>Test various use cases of the :not() pseudo class. If the test succeed, the text "GREEN" should be colored green.</p>
    <div>
        <span class="case1 notgreen">WebKit</span> <span class="case1">GREEN</span> <span class="case1 notgreen">WebKit</span>
        <span id="case1update1" class="case1">WebKit</span> <span class="case1">GREEN</span> <span id="case1update2" class="case1">WebKit</span>

        <span class="case2 foo bar">WebKit</span> <span class="case2">GREEN</span> <span class="case2 foo bar">WebKit</span>
        <span id="case2update1" class="case2">WebKit</span> <span class="case2">GREEN</span> <span id="case2update2" class="case2">WebKit</span>

        <div>
            <a>
                <div>
                    <span>WebKit</span>
                    <span class="case3">WebKit</span>
                    <span>WebKit</span>
                </div>
            </a>
        </div>
        <div>
            <div>
                <div>
                    <span>WebKit</span>
                    <span class="case3">GREEN</span>
                    <span>WebKit</span>
                    <div>
                        <span>WebKit</span>
                        <span class="case3">GREEN</span>
                        <span>WebKit</span>
                    </div>
                </div>
            </div>
        </div>

        <span class="case4 foo">WebKit</span> <span class="case4">GREEN</span> <span class="case4 bar">WebKit</span>
        <span id="case4update1" class="case4">WebKit</span> <span class="case4">GREEN</span> <span id="case4update2" class="case4">WebKit</span>
    </div>
</body>
</html>
