<!DOCTYPE html>
<title>Service Worker: Mime type checking of CSS files fetched via SW.</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/common/get-host-info.sub.js"></script>
<script src="resources/test-helpers.sub.js"></script>
<script>

function getElementColorInFrame(frame, id) {
  var element = frame.contentDocument.getElementById(id);
  var style = frame.contentWindow.getComputedStyle(element, '');
  return style['color'];
}

promise_test(function(t) {
    var SCOPE =
        'resources/fetch-request-css-cross-origin-mime-check-iframe.html';
    var SCRIPT =
        'resources/fetch-request-css-cross-origin-mime-check-worker.js';
    var EXPECTED_COLOR = 'rgb(0, 0, 255)';

    return service_worker_unregister_and_register(t, SCRIPT, SCOPE)
      .then(r => wait_for_state(t, r.installing, 'activated'))
      .then(_ => with_iframe(SCOPE) )
      .then(f => {
          assert_equals(
              getElementColorInFrame(f, 'crossOriginCss'),
              EXPECTED_COLOR,
              'The color must be overridden by cross origin CSS.');
          assert_equals(
              getElementColorInFrame(f, 'crossOriginHtml'),
              EXPECTED_COLOR,
              'The color must not be overridden by cross origin non CSS file.');
          assert_equals(
              getElementColorInFrame(f, 'sameOriginCss'),
              EXPECTED_COLOR,
              'The color must be overridden by same origin CSS.');
          assert_equals(
              getElementColorInFrame(f, 'sameOriginHtml'),
              EXPECTED_COLOR,
              'The color must be overridden by same origin non CSS file.');
          assert_equals(
              getElementColorInFrame(f, 'synthetic'),
              EXPECTED_COLOR,
              'The color must be overridden by synthetic CSS.');
          f.remove();
          return service_worker_unregister_and_done(t, SCOPE);
        });
  }, 'Mime type checking of CSS files fetched via SW.');
</script>