summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/content-security-policy/style-src/style-src-inline-style-nonce-blocked-error-event.html
blob: e5c0174f6f99bf312c0cd90f6b90b3c4b0b19965 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Security-Policy" content="style-src 'nonce-nonceynonce';">
    <script src="/resources/testharness.js"></script>
    <script src="/resources/testharnessreport.js"></script>

    <script>
      var t_spv = async_test("Should fire a securitypolicyviolation event");

      document.addEventListener("securitypolicyviolation", t_spv.step_func_done(function(e) {
        assert_equals("style-src-elem", e.violatedDirective);
      }));
    </script>
</head>
<body>
    <div id='log'></div>

    <div id="content">Lorem ipsum</div>

    <script>
        function verifyStep1() {
            var marginLeft = getComputedStyle(document.querySelector("#content")).getPropertyValue('margin-left');
            assert_not_equals(marginLeft, '2px', "Content still does not have a 2px margin-left after initial style.");
        }

        function setupStep2() {
            var sty = document.createElement("style");
            sty.nonce = "not-nonceynonce";
            sty.innerHTML = "#content { margin-left: 2px; }";
            sty.onerror = styleError;
            document.body.appendChild(sty);
        }
        function verifyStep2() {
            var marginLeft = getComputedStyle(document.querySelector("#content")).getPropertyValue('margin-left');
            assert_not_equals(marginLeft, '2px', "Content still does not have a 2px margin-left after inserted style.");
        }

        function setupStep3() {
            var e = document.getElementById('style1');
            e.innerHTML = "#content { margin-left: 2px; }";
        }
        function verifyStep3() {
            var marginLeft = getComputedStyle(document.querySelector("#content")).getPropertyValue('margin-left');
            assert_not_equals(marginLeft, '2px', "Content still does not have a 2px margin-left after changing style.");
            test.done();
        }

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

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

        function styleError() {
            test.step(function() {
                verifySteps.shift()();
                var nextSetup = setupSteps.shift();
                if (nextSetup)
                    nextSetup();
            });
        }
    </script>

    <style id="style1" nonce="not-nonceynonce"
           onerror="styleError();">
        #content {
            margin-left: 2px;
        }
    </style>
</body>
</html>