<!DOCTYPE html>
<title>Service Worker: FetchEvent for css image</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/get-host-info.sub.js"></script>
<script src="resources/test-helpers.sub.js?pipe=sub"></script>
<script>
var SCOPE = 'resources/fetch-request-resources-iframe.https.html';
var SCRIPT = 'resources/fetch-request-resources-worker.js';
var host_info = get_host_info();
var LOCAL_URL =
  host_info['HTTPS_ORIGIN'] + base_path() + 'resources/dummy?test';
var REMOTE_URL =
  host_info['HTTPS_REMOTE_ORIGIN'] + base_path() + 'resources/dummy?test';

function css_image_test(expected_results, frame, url, type,
                        expected_mode, expected_credentials) {
  expected_results[url] = {
      url: url,
      mode: expected_mode,
      credentials: expected_credentials,
      message: 'CSSImage load (url:' + url + ' type:' + type + ')'
    };
  return frame.contentWindow.load_css_image(url, type);
}

function css_image_set_test(expected_results, frame, url, type,
                            expected_mode, expected_credentials) {
  expected_results[url] = {
      url: url,
      mode: expected_mode,
      credentials: expected_credentials,
      message: 'CSSImageSet load (url:' + url + ' type:' + type + ')'
    };
  return frame.contentWindow.load_css_image_set(url, type);
}

function create_message_promise(t, expected_results, frame,
                                worker, test_count, scope) {
  return new Promise(function(resolve) {
    var channel = new MessageChannel();
    channel.port1.onmessage = t.step_func(function(msg) {
      if (msg.data.ready) {
        resolve();
        return;
      }
      var result = msg.data;
      var expected = expected_results[result.url];
      if (!expected) {
        return;
      }
      assert_equals(
          result.mode, expected.mode,
          'mode of ' + expected.message +  ' must be ' +
          expected.mode + '.');
      assert_equals(
          result.credentials, expected.credentials,
          'credentials of ' + expected.message +  ' must be ' +
          expected.credentials + '.');
      --test_count;
      delete expected_results[result.url];
      if (test_count == 0) {
        frame.remove();
        service_worker_unregister_and_done(t, scope);
      }
    });
    worker.postMessage(
      {port: channel.port2}, [channel.port2]);
  });
}

async_test(function(t) {
    var scope = SCOPE + "?img=backgroundImage";
    var test_count = 2;
    var expected_results = {};
    var worker;
    var frame;
    service_worker_unregister_and_register(t, SCRIPT, scope)
      .then(function(registration) {
          worker = registration.installing;
          return wait_for_state(t, worker, 'activated');
        })
      .then(function() { return with_iframe(scope); })
      .then(function(f) {
          frame = f;
          return create_message_promise(t, expected_results, frame,
                                        worker, test_count, scope);
        })
      .then(function() {
        css_image_test(expected_results, frame, LOCAL_URL + Date.now(),
                       'backgroundImage', 'no-cors', 'include');
        css_image_test(expected_results, frame, REMOTE_URL + Date.now(),
                      'backgroundImage', 'no-cors', 'include');
      })
      .catch(unreached_rejection(t));
  }, 'Verify FetchEvent for css image (backgroundImage).');

async_test(function(t) {
    var scope = SCOPE + "?img=shapeOutside";
    var test_count = 2;
    var expected_results = {};
    var worker;
    var frame;
    service_worker_unregister_and_register(t, SCRIPT, scope)
      .then(function(registration) {
          worker = registration.installing;
          return wait_for_state(t, worker, 'activated');
        })
      .then(function() { return with_iframe(scope); })
      .then(function(f) {
          frame = f;
          return create_message_promise(t, expected_results, frame,
                                        worker, test_count, scope);
        })
      .then(function() {
         css_image_test(expected_results, frame, LOCAL_URL + Date.now(),
                        'shapeOutside', 'cors', 'same-origin');
         css_image_test(expected_results, frame, REMOTE_URL + Date.now(),
                        'shapeOutside', 'cors', 'same-origin');
      })
      .catch(unreached_rejection(t));
  }, 'Verify FetchEvent for css image (shapeOutside).');

async_test(function(t) {
    var scope = SCOPE + "?img_set=backgroundImage";
    var test_count = 2;
    var expected_results = {};
    var worker;
    var frame;
    service_worker_unregister_and_register(t, SCRIPT, scope)
      .then(function(registration) {
          worker = registration.installing;
          return wait_for_state(t, worker, 'activated');
        })
      .then(function() { return with_iframe(scope); })
      .then(function(f) {
          frame = f;
          return create_message_promise(t, expected_results, frame,
                                        worker, test_count, scope);
        })
      .then(function() {
         css_image_set_test(expected_results, frame, LOCAL_URL + Date.now(),
                           'backgroundImage', 'no-cors', 'include');
         css_image_set_test(expected_results, frame, REMOTE_URL + Date.now(),
                           'backgroundImage', 'no-cors', 'include');
      })
      .catch(unreached_rejection(t));
  }, 'Verify FetchEvent for css image-set (backgroundImage).');

async_test(function(t) {
    var scope = SCOPE + "?img_set=shapeOutside";
    var test_count = 2;
    var expected_results = {};
    var worker;
    var frame;
    service_worker_unregister_and_register(t, SCRIPT, scope)
      .then(function(registration) {
          worker = registration.installing;
          return wait_for_state(t, worker, 'activated');
        })
      .then(function() { return with_iframe(scope); })
      .then(function(f) {
          frame = f;
          return create_message_promise(t, expected_results, frame,
                                        worker, test_count, scope);
        })
      .then(function() {
         css_image_set_test(expected_results, frame, LOCAL_URL + Date.now(),
                            'shapeOutside', 'cors', 'same-origin');
         css_image_set_test(expected_results, frame, REMOTE_URL + Date.now(),
                           'shapeOutside', 'cors', 'same-origin');
      })
      .catch(unreached_rejection(t));
  }, 'Verify FetchEvent for css image-set (shapeOutside).');

</script>