<!DOCTYPE html>
<html>
<head>
    <title>SVG Style element has error on bad style nonce</title>
    <meta http-equiv="Content-Security-Policy" content="style-src 'nonce-nonceynonce'">
    <script src="/js-test-resources/testharness.js"></script>
    <script src="/js-test-resources/testharnessreport.js"></script>
    <script>
        function verifyStep1() {
            var color = window.getComputedStyle(document.querySelector('p')).color;
            assert_equals(color, "rgb(0, 128, 0)", "The color of the paragraph is still green after initial svg style.");
        }

        function setupStep2() {
            var e = document.getElementById("svgelement");
            var sty = document.createElementNS("http://www.w3.org/2000/svg", "style");
            sty.innerHTML = "p { color: red; }";
            sty.onerror = styleError;
            e.appendChild(sty);
        }
        function verifyStep2() {
            var color = window.getComputedStyle(document.querySelector('p')).color;
            assert_equals(color, "rgb(0, 128, 0)", "The color of the paragraph is still green after inserted svg style.");
        }

        function setupStep3() {
            var e = document.getElementById('style1');
            e.innerHTML = "p { color: blue; }";
        }
        function verifyStep3() {
            var color = window.getComputedStyle(document.querySelector('p')).color;
            assert_equals(color, "rgb(0, 128, 0)", "The color of the paragraph is still green after changing svg style.");
            test.done();
        }

        var verifySteps = [ verifyStep1, verifyStep2, verifyStep3 ];
        var setupSteps = [ setupStep2, setupStep3 ];

        var test = async_test("Test that paragraph remains green and error events received.");

        function styleError() {
            test.step(function() {
                verifySteps.shift()();
                var nextSetup = setupSteps.shift();
                if (nextSetup)
                    nextSetup();
            });
        }
    </script>
</head>
<body>
    <svg id="svgelement" xmlns="http://www.w3.org/2000/svg" width="800" height="100">
        <style nonce="nonceynonce">p { color: green; }</style>
        <style id="style1" nonce="notavalidnonce" onerror="styleError();">p { color: red; }</style>
        <p>A test paragraph</p>
    </svg>
</body>
</html>