<!DOCTYPE HTML>
<html>
<head>
  <title>Bug 1262842: Test CSP inline style within svg image</title>
  <script src="/tests/SimpleTest/SimpleTest.js"></script>
  <script src="/tests/SimpleTest/WindowSnapshot.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
</head>
<body>
<iframe id="img_base"></iframe>
<iframe id="img_csp"></iframe>
<iframe id="img_base_srcset"></iframe>
<iframe id="img_csp_srcset"></iframe>
<iframe id="doc_base"></iframe>
<iframe id="doc_csp"></iframe>

<script class="testbody" type="text/javascript">

// Description of the two tests:
//  * CSP should not apply to SVGs loaded as images (in src or srcset)
//  * CSP should apply to SVGs loaded as document
// Since we have to test inline styles within SVGs, we loaded the SVGs
// and then take screenshots to comopare that the two SVGs are identical.

SimpleTest.waitForExplicitFinish();

let img_base = document.getElementById("img_base");
let img_csp = document.getElementById("img_csp");
let img_base_srcset = document.getElementById("img_base_srcset");
let img_csp_srcset = document.getElementById("img_csp_srcset");
let doc_base = document.getElementById("doc_base");
let doc_csp = document.getElementById("doc_csp");

let loadedFrames = 0;

async function compareSVGs() {
  loadedFrames++;
  if (loadedFrames != 6) {
    return;
  }
  // compare the two iframes where SVGs are loaded as images
  try {
    let img_base_snap = await snapshotWindow(img_base.contentWindow);
    let img_csp_snap = await snapshotWindow(img_csp.contentWindow);

    ok(compareSnapshots(img_base_snap, img_csp_snap, true)[0],
       "CSP should not apply to SVG loaded as image");
  } catch(err) {
    ok(false, "img error: " + err.message);
  }

  // compare the two iframes where SVGs are loaded as images with srcset
  try {
    let img_base_snap_srcset = await snapshotWindow(img_base_srcset.contentWindow);
    let img_csp_snap_srcset = await snapshotWindow(img_csp_srcset.contentWindow);

    ok(compareSnapshots(img_base_snap_srcset, img_csp_snap_srcset, true)[0],
       "CSP should not apply to SVG loaded as image with srcset");
  } catch(err) {
    ok(false, "img error: " + err.message);
  }

  // compare the two iframes where SVGs are loaded as documents
  try {
    let doc_base_snap = await snapshotWindow(doc_base.contentWindow);
    let doc_csp_snap = await snapshotWindow(doc_csp.contentWindow);

    ok(compareSnapshots(doc_base_snap, doc_csp_snap, true)[0],
       "CSP should apply to SVG loaded as document");
  } catch(err) {
    ok(false, "doc error: " + err.message);
  }

  SimpleTest.finish();
}

// load SVG as images
img_base.onerror = function() {
  ok(false, "sanity: img_base onerror should not fire");
}
img_base.onload = function() {
  ok(true, "sanity: img_base onload should fire");
  compareSVGs();
}
img_base.src = "file_svg_inline_style_base.html";

img_csp.onerror = function() {
  ok(false, "sanity: img_csp onerror should not fire");
}
img_csp.onload = function() {
  ok(true, "sanity: img_csp onload should fire");
  compareSVGs();
}
img_csp.src = "file_svg_inline_style_csp.html";

img_base_srcset.onerror = function() {
  ok(false, "sanity: img_base_srcset onerror should not fire");
}
img_base_srcset.onload = function() {
  ok(true, "sanity: img_base_srcset onload should fire");
  compareSVGs();
}
img_base_srcset.src = "file_svg_srcset_inline_style_base.html";

img_csp_srcset.onerror = function() {
  ok(false, "sanity: img_csp_srcset onerror should not fire");
}
img_csp_srcset.onload = function() {
  ok(true, "sanity: img_csp_srcset onload should fire");
  compareSVGs();
}
img_csp_srcset.src = "file_svg_srcset_inline_style_csp.html";

// load SVG as documnents
doc_base.onerror = function() {
  ok(false, "sanity: doc_base onerror should not fire");
}
doc_base.onload = function() {
  ok(true, "sanity: doc_base onload should fire");
  compareSVGs();
}
doc_base.src = "file_svg_inline_style_server.sjs?svg_no_inline_style&5";

doc_csp.onerror = function() {
  ok(false, "sanity: doc_csp onerror should not fire");
}
doc_csp.onload = function() {
  ok(true, "sanity: doc_csp onload should fire");
  compareSVGs();
}
doc_csp.src = "file_svg_inline_style_server.sjs?svg_inline_style_csp&6";

</script>
</body>
</html>
