fetch-request-css-images.https.html (7706B)
1 <!DOCTYPE html> 2 <title>Service Worker: FetchEvent for css image</title> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <script src="/common/get-host-info.sub.js"></script> 6 <script src="resources/test-helpers.sub.js?pipe=sub"></script> 7 <script> 8 var SCOPE = 'resources/fetch-request-resources-iframe.https.html'; 9 var SCRIPT = 'resources/fetch-request-resources-worker.js'; 10 var host_info = get_host_info(); 11 var LOCAL_URL = 12 host_info['HTTPS_ORIGIN'] + base_path() + 'resources/sample?test'; 13 var REMOTE_URL = 14 host_info['HTTPS_REMOTE_ORIGIN'] + base_path() + 'resources/sample?test'; 15 16 function css_image_test(expected_results, frame, url, type, 17 expected_mode, expected_credentials) { 18 expected_results[url] = { 19 url: url, 20 mode: expected_mode, 21 credentials: expected_credentials, 22 message: 'CSSImage load (url:' + url + ' type:' + type + ')' 23 }; 24 return frame.contentWindow.load_css_image(url, type); 25 } 26 27 function css_image_set_test(expected_results, frame, url, type, 28 expected_mode, expected_credentials) { 29 expected_results[url] = { 30 url: url, 31 mode: expected_mode, 32 credentials: expected_credentials, 33 message: 'CSSImageSet load (url:' + url + ' type:' + type + ')' 34 }; 35 return frame.contentWindow.load_css_image_set(url, type); 36 } 37 38 function waitForWorker(worker) { 39 return new Promise(function(resolve) { 40 var channel = new MessageChannel(); 41 channel.port1.addEventListener('message', function(msg) { 42 if (msg.data.ready) { 43 resolve(channel); 44 } 45 }); 46 channel.port1.start(); 47 worker.postMessage({port: channel.port2}, [channel.port2]); 48 }); 49 } 50 51 function create_message_promise(channel, expected_results, worker, scope) { 52 return new Promise(function(resolve) { 53 channel.port1.addEventListener('message', function(msg) { 54 var result = msg.data; 55 if (!expected_results[result.url]) { 56 return; 57 } 58 resolve(result); 59 }); 60 }).then(function(result) { 61 var expected = expected_results[result.url]; 62 assert_equals( 63 result.mode, expected.mode, 64 'mode of ' + expected.message + ' must be ' + 65 expected.mode + '.'); 66 assert_equals( 67 result.credentials, expected.credentials, 68 'credentials of ' + expected.message + ' must be ' + 69 expected.credentials + '.'); 70 delete expected_results[result.url]; 71 }); 72 } 73 74 promise_test(function(t) { 75 var scope = SCOPE + "?img=backgroundImage"; 76 var expected_results = {}; 77 var worker; 78 var frame; 79 return service_worker_unregister_and_register(t, SCRIPT, scope) 80 .then(function(registration) { 81 t.add_cleanup(function() { 82 return service_worker_unregister(t, scope); 83 }); 84 85 worker = registration.installing; 86 return wait_for_state(t, worker, 'activated'); 87 }) 88 .then(function() { return with_iframe(scope); }) 89 .then(function(f) { 90 t.add_cleanup(function() { 91 f.remove(); 92 }); 93 frame = f; 94 return waitForWorker(worker); 95 }) 96 .then(function(channel) { 97 css_image_test(expected_results, frame, LOCAL_URL + Date.now(), 98 'backgroundImage', 'no-cors', 'include'); 99 css_image_test(expected_results, frame, REMOTE_URL + Date.now(), 100 'backgroundImage', 'no-cors', 'include'); 101 102 return Promise.all([ 103 create_message_promise(channel, expected_results, worker, scope), 104 create_message_promise(channel, expected_results, worker, scope) 105 ]); 106 }); 107 }, 'Verify FetchEvent for css image (backgroundImage).'); 108 109 promise_test(function(t) { 110 var scope = SCOPE + "?img=shapeOutside"; 111 var expected_results = {}; 112 var worker; 113 var frame; 114 return service_worker_unregister_and_register(t, SCRIPT, scope) 115 .then(function(registration) { 116 t.add_cleanup(function() { 117 return service_worker_unregister(t, scope); 118 }); 119 120 worker = registration.installing; 121 return wait_for_state(t, worker, 'activated'); 122 }) 123 .then(function() { return with_iframe(scope); }) 124 .then(function(f) { 125 t.add_cleanup(function() { 126 f.remove(); 127 }); 128 frame = f; 129 return waitForWorker(worker); 130 }) 131 .then(function(channel) { 132 css_image_test(expected_results, frame, LOCAL_URL + Date.now(), 133 'shapeOutside', 'cors', 'same-origin'); 134 css_image_test(expected_results, frame, REMOTE_URL + Date.now(), 135 'shapeOutside', 'cors', 'same-origin'); 136 137 return Promise.all([ 138 create_message_promise(channel, expected_results, worker, scope), 139 create_message_promise(channel, expected_results, worker, scope) 140 ]); 141 }); 142 }, 'Verify FetchEvent for css image (shapeOutside).'); 143 144 promise_test(function(t) { 145 var scope = SCOPE + "?img_set=backgroundImage"; 146 var expected_results = {}; 147 var worker; 148 var frame; 149 return service_worker_unregister_and_register(t, SCRIPT, scope) 150 .then(function(registration) { 151 t.add_cleanup(function() { 152 return service_worker_unregister(t, scope); 153 }); 154 155 worker = registration.installing; 156 return wait_for_state(t, worker, 'activated'); 157 }) 158 .then(function() { return with_iframe(scope); }) 159 .then(function(f) { 160 t.add_cleanup(function() { 161 f.remove();; 162 }); 163 frame = f; 164 return waitForWorker(worker); 165 }) 166 .then(function(channel) { 167 css_image_set_test(expected_results, frame, LOCAL_URL + Date.now(), 168 'backgroundImage', 'no-cors', 'include'); 169 css_image_set_test(expected_results, frame, REMOTE_URL + Date.now(), 170 'backgroundImage', 'no-cors', 'include'); 171 172 return Promise.all([ 173 create_message_promise(channel, expected_results, worker, scope), 174 create_message_promise(channel, expected_results, worker, scope) 175 ]); 176 }); 177 }, 'Verify FetchEvent for css image-set (backgroundImage).'); 178 179 promise_test(function(t) { 180 var scope = SCOPE + "?img_set=shapeOutside"; 181 var expected_results = {}; 182 var worker; 183 var frame; 184 return service_worker_unregister_and_register(t, SCRIPT, scope) 185 .then(function(registration) { 186 t.add_cleanup(function() { 187 return service_worker_unregister(t, scope); 188 }); 189 190 worker = registration.installing; 191 return wait_for_state(t, worker, 'activated'); 192 }) 193 .then(function() { return with_iframe(scope); }) 194 .then(function(f) { 195 t.add_cleanup(function() { 196 f.remove(); 197 }); 198 frame = f; 199 return waitForWorker(worker); 200 }) 201 .then(function(channel) { 202 css_image_set_test(expected_results, frame, LOCAL_URL + Date.now(), 203 'shapeOutside', 'cors', 'same-origin'); 204 css_image_set_test(expected_results, frame, REMOTE_URL + Date.now(), 205 'shapeOutside', 'cors', 'same-origin'); 206 207 return Promise.all([ 208 create_message_promise(channel, expected_results, worker, scope), 209 create_message_promise(channel, expected_results, worker, scope) 210 ]); 211 }); 212 }, 'Verify FetchEvent for css image-set (shapeOutside).'); 213 214 </script>