<!doctype html>
<html>
<head>
    <style>
        span { display: none }
        *[test|="0"] #sp { color: green; display: block}
    </style>
</head>
<body onload="startTest();">
    <div test="1">
    <p>
    Test for bug <a href="https://bugs.webkit.org/show_bug.cgi?id=60752">https://bugs.webkit.org/show_bug.cgi?id=60752</a>
    </p>
    <p>This test checks whether CSS attribute selector [att|=val] is re-evaluated after attribute changes in DOM elements which have no style associated with them.</p>
    <span id="sp">PASSED</span>
    </div>

    <script>
        function change() {
            var element = document.getElementsByTagName('div')[0];
            element.attributes.test.value = "0-updated";
            if (window.testRunner) {
                testRunner.notifyDone();
            }
        }
        function startTest() {
            if (window.testRunner) {
                testRunner.dumpAsText();
                testRunner.waitUntilDone();
            }
            // Trigger an attribute change after all load processing is done. Doing the change
            // here immediately does not exhibit the problem.
            setTimeout("change();", 0);
        }
    </script>
</body>
</html>