element-img-environment-change.https.sub.html (11417B)
1 <!DOCTYPE html> 2 <!-- 3 This test was procedurally generated. Please do not modify it directly. 4 Sources: 5 - fetch/metadata/tools/fetch-metadata.conf.yml 6 - fetch/metadata/tools/templates/element-img-environment-change.sub.html 7 --> 8 <html lang="en"> 9 <meta charset="utf-8"> 10 <title>HTTP headers on image request triggered by change to environment</title> 11 <script src="/resources/testharness.js"></script> 12 <script src="/resources/testharnessreport.js"></script> 13 <script src="/fetch/metadata/resources/helper.sub.js"></script> 14 <body> 15 <script> 16 'use strict'; 17 18 // The response to the request under test must describe a valid image 19 // resource in order for the `load` event to be fired. 20 const params = { 21 body: ` 22 <svg xmlns="http://www.w3.org/2000/svg" width="123" height="123"> 23 <rect fill="lime" width="123" height="123"/> 24 </svg> 25 `, 26 mime: 'image/svg+xml' 27 }; 28 29 function induceRequest(t, url, attributes) { 30 const iframe = document.createElement('iframe'); 31 iframe.style.width = '50px'; 32 document.body.appendChild(iframe); 33 t.add_cleanup(() => iframe.remove()); 34 iframe.contentDocument.open(); 35 iframe.contentDocument.close(); 36 37 const image = iframe.contentDocument.createElement('img'); 38 for (const [ name, value ] of Object.entries(attributes)) { 39 image.setAttribute(name, value); 40 } 41 iframe.contentDocument.body.appendChild(image); 42 43 image.setAttribute('srcset', `${url} 100w, /media/1x1-green.png 1w`); 44 image.setAttribute('sizes', '(max-width: 100px) 1px, (min-width: 150px) 123px'); 45 46 return new Promise((resolve) => { 47 image.onload = image.onerror = resolve; 48 }) 49 .then(() => { 50 51 iframe.style.width = '200px'; 52 53 return new Promise((resolve) => image.onload = resolve); 54 }); 55 } 56 57 promise_test((t) => { 58 const key = '{{uuid()}}'; 59 60 return induceRequest( 61 t, 62 makeRequestURL(key, ['httpsOrigin'], params), 63 {} 64 ) 65 .then(() => retrieve(key)) 66 .then((headers) => { 67 assert_own_property(headers, 'sec-fetch-site'); 68 assert_array_equals(headers['sec-fetch-site'], ['same-origin']); 69 }); 70 }, 'sec-fetch-site - Same origin, no attributes'); 71 72 promise_test((t) => { 73 const key = '{{uuid()}}'; 74 75 return induceRequest( 76 t, 77 makeRequestURL(key, ['httpsCrossSite'], params), 78 {} 79 ) 80 .then(() => retrieve(key)) 81 .then((headers) => { 82 assert_own_property(headers, 'sec-fetch-site'); 83 assert_array_equals(headers['sec-fetch-site'], ['cross-site']); 84 }); 85 }, 'sec-fetch-site - Cross-site, no attributes'); 86 87 promise_test((t) => { 88 const key = '{{uuid()}}'; 89 90 return induceRequest( 91 t, 92 makeRequestURL(key, ['httpsSameSite'], params), 93 {} 94 ) 95 .then(() => retrieve(key)) 96 .then((headers) => { 97 assert_own_property(headers, 'sec-fetch-site'); 98 assert_array_equals(headers['sec-fetch-site'], ['same-site']); 99 }); 100 }, 'sec-fetch-site - Same site, no attributes'); 101 102 promise_test((t) => { 103 const key = '{{uuid()}}'; 104 105 return induceRequest( 106 t, 107 makeRequestURL(key, ['httpsOrigin', 'httpsCrossSite', 'httpsOrigin'], params), 108 {} 109 ) 110 .then(() => retrieve(key)) 111 .then((headers) => { 112 assert_own_property(headers, 'sec-fetch-site'); 113 assert_array_equals(headers['sec-fetch-site'], ['cross-site']); 114 }); 115 }, 'sec-fetch-site - Same-Origin -> Cross-Site -> Same-Origin redirect, no attributes'); 116 117 promise_test((t) => { 118 const key = '{{uuid()}}'; 119 120 return induceRequest( 121 t, 122 makeRequestURL(key, ['httpsOrigin', 'httpsSameSite', 'httpsOrigin'], params), 123 {} 124 ) 125 .then(() => retrieve(key)) 126 .then((headers) => { 127 assert_own_property(headers, 'sec-fetch-site'); 128 assert_array_equals(headers['sec-fetch-site'], ['same-site']); 129 }); 130 }, 'sec-fetch-site - Same-Origin -> Same-Site -> Same-Origin redirect, no attributes'); 131 132 promise_test((t) => { 133 const key = '{{uuid()}}'; 134 135 return induceRequest( 136 t, 137 makeRequestURL(key, ['httpsCrossSite', 'httpsOrigin'], params), 138 {} 139 ) 140 .then(() => retrieve(key)) 141 .then((headers) => { 142 assert_own_property(headers, 'sec-fetch-site'); 143 assert_array_equals(headers['sec-fetch-site'], ['cross-site']); 144 }); 145 }, 'sec-fetch-site - Cross-Site -> Same Origin, no attributes'); 146 147 promise_test((t) => { 148 const key = '{{uuid()}}'; 149 150 return induceRequest( 151 t, 152 makeRequestURL(key, ['httpsCrossSite', 'httpsSameSite'], params), 153 {} 154 ) 155 .then(() => retrieve(key)) 156 .then((headers) => { 157 assert_own_property(headers, 'sec-fetch-site'); 158 assert_array_equals(headers['sec-fetch-site'], ['cross-site']); 159 }); 160 }, 'sec-fetch-site - Cross-Site -> Same-Site, no attributes'); 161 162 promise_test((t) => { 163 const key = '{{uuid()}}'; 164 165 return induceRequest( 166 t, 167 makeRequestURL(key, ['httpsCrossSite', 'httpsCrossSite'], params), 168 {} 169 ) 170 .then(() => retrieve(key)) 171 .then((headers) => { 172 assert_own_property(headers, 'sec-fetch-site'); 173 assert_array_equals(headers['sec-fetch-site'], ['cross-site']); 174 }); 175 }, 'sec-fetch-site - Cross-Site -> Cross-Site, no attributes'); 176 177 promise_test((t) => { 178 const key = '{{uuid()}}'; 179 180 return induceRequest( 181 t, 182 makeRequestURL(key, ['httpsOrigin', 'httpsOrigin'], params), 183 {} 184 ) 185 .then(() => retrieve(key)) 186 .then((headers) => { 187 assert_own_property(headers, 'sec-fetch-site'); 188 assert_array_equals(headers['sec-fetch-site'], ['same-origin']); 189 }); 190 }, 'sec-fetch-site - Same-Origin -> Same Origin, no attributes'); 191 192 promise_test((t) => { 193 const key = '{{uuid()}}'; 194 195 return induceRequest( 196 t, 197 makeRequestURL(key, ['httpsOrigin', 'httpsSameSite'], params), 198 {} 199 ) 200 .then(() => retrieve(key)) 201 .then((headers) => { 202 assert_own_property(headers, 'sec-fetch-site'); 203 assert_array_equals(headers['sec-fetch-site'], ['same-site']); 204 }); 205 }, 'sec-fetch-site - Same-Origin -> Same-Site, no attributes'); 206 207 promise_test((t) => { 208 const key = '{{uuid()}}'; 209 210 return induceRequest( 211 t, 212 makeRequestURL(key, ['httpsOrigin', 'httpsCrossSite'], params), 213 {} 214 ) 215 .then(() => retrieve(key)) 216 .then((headers) => { 217 assert_own_property(headers, 'sec-fetch-site'); 218 assert_array_equals(headers['sec-fetch-site'], ['cross-site']); 219 }); 220 }, 'sec-fetch-site - Same-Origin -> Cross-Site, no attributes'); 221 222 promise_test((t) => { 223 const key = '{{uuid()}}'; 224 225 return induceRequest( 226 t, 227 makeRequestURL(key, ['httpsSameSite', 'httpsOrigin'], params), 228 {} 229 ) 230 .then(() => retrieve(key)) 231 .then((headers) => { 232 assert_own_property(headers, 'sec-fetch-site'); 233 assert_array_equals(headers['sec-fetch-site'], ['same-site']); 234 }); 235 }, 'sec-fetch-site - Same-Site -> Same Origin, no attributes'); 236 237 promise_test((t) => { 238 const key = '{{uuid()}}'; 239 240 return induceRequest( 241 t, 242 makeRequestURL(key, ['httpsSameSite', 'httpsSameSite'], params), 243 {} 244 ) 245 .then(() => retrieve(key)) 246 .then((headers) => { 247 assert_own_property(headers, 'sec-fetch-site'); 248 assert_array_equals(headers['sec-fetch-site'], ['same-site']); 249 }); 250 }, 'sec-fetch-site - Same-Site -> Same-Site, no attributes'); 251 252 promise_test((t) => { 253 const key = '{{uuid()}}'; 254 255 return induceRequest( 256 t, 257 makeRequestURL(key, ['httpsSameSite', 'httpsCrossSite'], params), 258 {} 259 ) 260 .then(() => retrieve(key)) 261 .then((headers) => { 262 assert_own_property(headers, 'sec-fetch-site'); 263 assert_array_equals(headers['sec-fetch-site'], ['cross-site']); 264 }); 265 }, 'sec-fetch-site - Same-Site -> Cross-Site, no attributes'); 266 267 promise_test((t) => { 268 const key = '{{uuid()}}'; 269 270 return induceRequest( 271 t, 272 makeRequestURL(key, [], params), 273 {} 274 ) 275 .then(() => retrieve(key)) 276 .then((headers) => { 277 assert_own_property(headers, 'sec-fetch-mode'); 278 assert_array_equals(headers['sec-fetch-mode'], ['no-cors']); 279 }); 280 }, 'sec-fetch-mode - no attributes'); 281 282 promise_test((t) => { 283 const key = '{{uuid()}}'; 284 285 return induceRequest( 286 t, 287 makeRequestURL(key, [], params), 288 {"crossorigin": ""} 289 ) 290 .then(() => retrieve(key)) 291 .then((headers) => { 292 assert_own_property(headers, 'sec-fetch-mode'); 293 assert_array_equals(headers['sec-fetch-mode'], ['cors']); 294 }); 295 }, 'sec-fetch-mode - attributes: crossorigin'); 296 297 promise_test((t) => { 298 const key = '{{uuid()}}'; 299 300 return induceRequest( 301 t, 302 makeRequestURL(key, [], params), 303 {"crossorigin": "anonymous"} 304 ) 305 .then(() => retrieve(key)) 306 .then((headers) => { 307 assert_own_property(headers, 'sec-fetch-mode'); 308 assert_array_equals(headers['sec-fetch-mode'], ['cors']); 309 }); 310 }, 'sec-fetch-mode - attributes: crossorigin=anonymous'); 311 312 promise_test((t) => { 313 const key = '{{uuid()}}'; 314 315 return induceRequest( 316 t, 317 makeRequestURL(key, [], params), 318 {"crossorigin": "use-credentials"} 319 ) 320 .then(() => retrieve(key)) 321 .then((headers) => { 322 assert_own_property(headers, 'sec-fetch-mode'); 323 assert_array_equals(headers['sec-fetch-mode'], ['cors']); 324 }); 325 }, 'sec-fetch-mode - attributes: crossorigin=use-credentials'); 326 327 promise_test((t) => { 328 const key = '{{uuid()}}'; 329 330 return induceRequest( 331 t, 332 makeRequestURL(key, [], params), 333 {} 334 ) 335 .then(() => retrieve(key)) 336 .then((headers) => { 337 assert_own_property(headers, 'sec-fetch-dest'); 338 assert_array_equals(headers['sec-fetch-dest'], ['image']); 339 }); 340 }, 'sec-fetch-dest - no attributes'); 341 342 promise_test((t) => { 343 const key = '{{uuid()}}'; 344 345 return induceRequest( 346 t, 347 makeRequestURL(key, [], params), 348 {} 349 ) 350 .then(() => retrieve(key)) 351 .then((headers) => { 352 assert_not_own_property(headers, 'sec-fetch-user'); 353 }); 354 }, 'sec-fetch-user - no attributes'); 355 356 promise_test((t) => { 357 const key = '{{uuid()}}'; 358 359 return induceRequest( 360 t, 361 makeRequestURL(key, ['httpsCrossSite'], params), 362 {} 363 ) 364 .then(() => retrieve(key)) 365 .then((headers) => { 366 assert_own_property(headers, 'sec-fetch-storage-access'); 367 assert_array_equals(headers['sec-fetch-storage-access'], ['none']); 368 }); 369 }, 'sec-fetch-storage-access - Cross-site, no attributes'); 370 371 promise_test((t) => { 372 const key = '{{uuid()}}'; 373 374 return induceRequest( 375 t, 376 makeRequestURL(key, ['httpsSameSite'], params), 377 {} 378 ) 379 .then(() => retrieve(key)) 380 .then((headers) => { 381 assert_not_own_property(headers, 'sec-fetch-storage-access'); 382 }); 383 }, 'sec-fetch-storage-access - Same site, no attributes'); 384 </script> 385 </body> 386 </html>