<!DOCTYPE HTML>
<html>
<head>
  <title>Test that reports using the report-api service are sent when there's a violation</title>
  <script src='/resources/testharness.js'></script>
  <script src='/resources/testharnessreport.js'></script>
</head>
<body>
  <script>
    var t1 = async_test("Test that image does not load");
    async_test(function(t2) {
    window.addEventListener("securitypolicyviolation", t2.step_func(function(e) {
        assert_equals(e.blockedURI, "{{location[scheme]}}://{{location[host]}}/content-security-policy/support/fail.png");
        assert_equals(e.violatedDirective, "img-src");
        t2.done();
      }));
    }, "Event is fired");

    async_test(function(t3) {
      var observer = new ReportingObserver(function(reports, observer) {
        t3.step(function() {
          assert_equals(reports.length, 1);

          // Ensure that the contents of the report are valid.
          var base_url = "{{location[scheme]}}://{{location[host]}}/content-security-policy/"
          var document_url = base_url + "reporting-api/reporting-api-sends-reports-on-violation.https.sub.html";
          assert_equals(reports[0].type, "csp-violation");
          assert_equals(reports[0].url, document_url);
          assert_equals(reports[0].body.documentURL, document_url);
          assert_equals(reports[0].body.referrer, null);
          assert_equals(reports[0].body.blockedURL,
                        base_url + "support/fail.png");
          assert_equals(reports[0].body.effectiveDirective, "img-src");
          assert_equals(reports[0].body.originalPolicy,
                        "script-src 'self' 'unsafe-inline'; img-src 'none'; report-to csp-group");
          assert_equals(reports[0].body.sourceFile, document_url);
          assert_equals(reports[0].body.sample, null);
          assert_equals(reports[0].body.disposition, "enforce");
          assert_equals(reports[0].body.statusCode, 0);
          assert_equals(reports[0].body.lineNumber, 53);
          assert_equals(reports[0].body.columnNumber, 0);
        });

        t3.done();
      });
      observer.observe();
    }, "Report is observable to ReportingObserver");
  </script>
  <img src='/content-security-policy/support/fail.png'
       onload='t1.unreached_func("The image should not have loaded");'
       onerror='t1.done();'>

  <script async defer src='../support/checkReport.sub.js?reportField=effectiveDirective&reportValue=img-src%20%27none%27'></script>
</body>
</html>