<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Security-Policy" content="style-src 'nonce-noncynonce' 'nonce-noncy+/=nonce'">
        <script src="/js-test-resources/js-test.js"></script>
        <style nonce="noncynonce">
            #test1 {
                color: green;
            }
        </style>
        <style>
            #test1 {
                color: red;
            }
        </style>
        <style nonce="noncynonce">
            #test2 {
                color: green;
            }
        </style>
    </head>
    <body>
        <p id="test1">This text should be green.</p>
        <p id="test2">This text should also be green.</p>
        <script>
            description("Style correctly allowed via a 'nonce-*' expression in 'style-src' should be applied to the page.");    
            var el = document.querySelector('#test1');
            shouldBeEqualToString("window.getComputedStyle(el).color", "rgb(0, 128, 0)");
            var el = document.querySelector('#test2');
            shouldBeEqualToString("window.getComputedStyle(el).color", "rgb(0, 128, 0)");
        </script>
    </body>
</html>
