layout/style/test/test_css_cross_domain.html

<!DOCTYPE HTML>
<html>
<!-- https://bugzilla.mozilla.org/show_bug.cgi?id=524223 -->
<head>
  <title>Test cross-domain CSS loading</title>
  <script src="/tests/SimpleTest/SimpleTest.js"></script>
  <link rel="stylesheet" type="text/css"
        href="/tests/SimpleTest/test.css"/>
  <style type="text/css">
    hr { border: none; clear: both }
    .column {
        margin: 10px;
        float: left;
    }
    iframe {
        width: 40px;
        height: 680px;
        border: none;
        margin: 0;
        padding: 0;
    }
    h2 { font-weight: normal; padding: 0 }
    ol, h2 { font-size: 13px; line-height: 20px; }
    ol { padding-left: 1em;
         list-style-type: upper-roman }
    ol ol { list-style-type: upper-alpha }
    ol ol ol { list-style-type: decimal }
  </style>
</head>
<body>
<a target="_blank"
   href="https://bugzilla.mozilla.org/show_bug.cgi?id=524223">Mozilla
   Bug 524223</a>

<hr/>

<div class="column">
<h2>&nbsp;</h2>
<ol><li>text/css<ol><li>same origin<ol><li>valid</li>
                                       <li>malformed</li>
                                       <li>http error</li></ol></li>
                  <li>cross origin<ol><li>valid</li>
                                      <li>malformed</li>
                                      <li>http error</li></ol></li>
                  <li>same to cross<ol><li>valid</li>
                                       <li>malformed</li>
                                       <li>http error</li></ol></li>
                  <li>cross to same<ol><li>valid</li>
                                       <li>malformed</li>
                                       <li>http error</li></ol></li></ol></li>
    <li>text/html<ol><li>same origin<ol><li>valid</li>
                                        <li>malformed</li>
                                        <li>http error</li></ol></li>
                     <li>cross origin<ol><li>valid</li>
                                         <li>malformed</li>
                                         <li>http error</li></ol></li>
                     <li>same to cross<ol><li>valid</li>
                                          <li>malformed</li>
                                          <li>http error</li></ol></li>
                     <li>cross to same<ol><li>valid</li>
                                          <li>malformed</li>
                                          <li>http error</li></ol></li></ol></li>
</ol>
</div>

<div class="column">
<h2>Quirks</h2>
<div id="quirks-placeholder"></div>
</div>

<div class="column">
<h2>Standards</h2>
<div id="standards-placeholder"></div>
</div>

<script type="application/javascript">

const COLOR = {red: "rgb(255, 0, 0)", lime: "rgb(0, 255, 0)"};

// Cross origin requests with text/html as the contentType.
// These requests will be blocked by ORB (when ORB is enabled),
// thus the color of the element is not going to be changed.
const BLOCKED_BY_ORB = ["JD1i", "JD1l", "JD2i", "JD2l"];

/** Test for Bug 524223 **/
function check_iframe(ifr) {
  var doc = ifr.contentDocument;
  var cases = doc.getElementsByTagName("p");

  for (var i = 0; i < cases.length; i++) {
	  var color = doc.defaultView.getComputedStyle(cases[i])
        .getPropertyValue("background-color");

    var id = cases[i].id;
    // only 'quirks' can have requests that are blocked by ORB.
    if (BLOCKED_BY_ORB.includes(id) && ifr.id === "quirks") {
	    is(color, COLOR.red, ifr.id + " " + id);
    } else {
	    is(color, COLOR.lime, ifr.id + " " + id);
    }
  }
}

SimpleTest.waitForExplicitFinish();

function insertIFrames(src, id) {
  const quirks = document.createElement("iframe");
  quirks.src = "ccd-quirks.html";
  quirks.id = "quirks";
  document.getElementById("quirks-placeholder").replaceWith(quirks);

  const standards = document.createElement("iframe");
  standards.src = "ccd-standards.html";
  standards.id = "standards";
  document.getElementById("standards-placeholder").replaceWith(standards);
}

var hasQuirksLoaded = false;
var hasStandardsLoaded = false;

function quirksLoaded() {
  hasQuirksLoaded = true;
  MaybeRunTest();
}

function standardsLoaded() {
  hasStandardsLoaded = true;
  MaybeRunTest();
}

function runTest() {
  check_iframe(document.getElementById("quirks"));
  check_iframe(document.getElementById("standards"));
}

function MaybeRunTest() {
  if (!hasQuirksLoaded || !hasStandardsLoaded) {
      return;
  }

  runTest();
  SimpleTest.finish();
}

window.onload = async function() {
  await SpecialPowers.pushPrefEnv(
    {
      set: [
        ['browser.opaqueResponseBlocking', true],
        ['browser.opaqueResponseBlocking.javascriptValidator', true],
      ],
    }
  );
  insertIFrames();
};
</script>
</body>
</html>