<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="resources/mark-result-red.css" integrity="sha256-deadbeef">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<body>
<script>
function waitForLinkElementToLoad(linkElement) {
  return new Promise(resolve => {
    (function waitAgain() {
      if (linkElement.sheet !== null) {
        resolve(); 
      } else {
        setTimeout(waitAgain, 100);
      }
    })();
  });
}

promise_test(() => {
  let link = document.querySelector("link");

  let divResult = document.createElement("div");
  divResult.id = "result";
  document.body.appendChild(divResult);

  let divResult2 = document.createElement("div");
  divResult2.id = "result2";
  document.body.appendChild(divResult2);

  return new Promise(resolve => {
    window.addEventListener("load", resolve, {once: true});
  })
  .then(() => {
    assert_equals(getComputedStyle(divResult).color.toString(), "rgb(0, 0, 0)", "bad integrity CSS should not be applied");

    let linkElement = document.querySelector("link");
    linkElement.removeAttribute("integrity");
    linkElement.href = "resources/mark-result2-blue.css";
    return waitForLinkElementToLoad(linkElement);
  })
  .then(() => {
    assert_equals(getComputedStyle(divResult).color.toString(), "rgb(0, 0, 0)", "bad integrity CSS should not be applied");
    assert_equals(getComputedStyle(divResult2).color.toString(), "rgb(0, 0, 255)", "CSS w/o integrity check disabled should load on the link element");
  })
  .then(() => {
    document.body.removeChild(divResult);
    document.body.removeChild(divResult2);
  });
}, 'Link element should still load another CSS after SRI check failed.');
</script>