mask-image-cors-001.sub.html (4576B)
1 <!doctype html> 2 <html class="reftest-wait"> 3 <title>Cross-origin CSS mask-images can be referenced via cross-origin 4 stylesheets, iff the image allows the origin of the document.</title> 5 <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image"> 6 <link rel="help" href="https://fetch.spec.whatwg.org/#http-access-control-allow-origin"> 7 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 8 <link rel="author" title="Mozilla" href="https://www.mozilla.org"> 9 <link rel="match" href="mask-image-cors-001-ref.html"> 10 11 <!-- This test is set up with several different resources, each referenced via 12 a different origin, to test a particular cross-origin scenario. The origins 13 are referenced symbolically, using the WPT web-server's 14 variable-substitution mechanism described at 15 https://web-platform-tests.org/writing-tests/server-features.html#tests-involving-multiple-origins 16 https://web-platform-tests.org/writing-tests/server-pipes.html#sub 17 18 The various resources/origins involved here are: 19 20 (0) The outer document - this is a shim whose origin we don't need to know 21 or care about. This outer document's purpose is just to load the 22 iframe's inner document, from a particular *known* origin. 23 24 (1) The iframe's inner document (mask-image-cors-001-frame.sub.html), 25 loaded from "origin A", https://{{domains[www]}}:{{ports[https][0]}} 26 27 (2) The stylesheet (mask-image-cors-001-styles.sub.css), loaded from 28 "origin B", https://{{domains[www1]}}:{{ports[https][0]}} 29 30 (3) The mask-image (mask-image-cors-001-image.png), loaded from 31 "origin C", https://{{domains[www2]}}:{{ports[https][0]}} 32 Importantly, we reference this image URL with an added query-param: 33 `pipe=header(Access-Control-Allow-Origin,...)`, where "..." is 34 origin A for #mask-allowed. This prompts the WPT web-server to serve 35 that resource with the Access-Control-Allow-Origin header set to 36 origin A, which should allow that resource to be used in the iframe's 37 inner document. (We use a different header-value for #mask-disallowed 38 which should prevent that one from being usable.) 39 40 The test's expectation is that: 41 * The iframe's inner document should successfully load the stylesheet. 42 * Then the iframe should make a cross-origin request to load the 43 mask-image for the #mask-allowed element, and the UA should allow the 44 document to use that mask-image, because the response's 45 Access-Control-Allow-Origin header matches the document. 46 * The iframe should *also* make a cross-origin request to load the 47 mask-image for the #mask-disallowed element, and the UA should *not* 48 allow the document to use that mask-image, because the header value 49 does not match the document (even though it matches the stylesheet). 50 * Therefore: the iframe should render with two blue squares, with corners 51 touching like a checkerboard (from the square solid-blue #mask-allowed 52 element, masked via the checkerboard-like mask-image). And no red should 53 be visible because #mask-disallowed should be fully masked away, with 54 its mask-image request having failed. 55 --> 56 <style> 57 /* Zero out the margin in the outer document, so that the iframe's inner 58 document is rendered directly at the top-left corner. (This makes the 59 reference case slightly simpler.) */ 60 body { margin: 0; } 61 iframe { 62 border: none; 63 height: 400px; 64 width: 400px; 65 } 66 </style> 67 <body> 68 <script> 69 // Construct the iframe URL: 70 // 71 // The iframe's origin is "origin A" described in the main explanatory 72 // comment above: 73 const frameOrigin = "https://{{domains[www]}}:{{ports[https][0]}}"; 74 75 // The iframe's path/filename is the same as this outer document, but with 76 // "-frame.sub" inserted before the .html file-extension: 77 const framePath = window.location.pathname.replace(".sub.html", 78 "-frame.sub.html"); 79 80 // The iframe's URL is those^ concatenated together: 81 const frameURL = `${frameOrigin}${framePath}`; 82 83 // Create/load the iframe: 84 let myIframe = document.createElement("iframe"); 85 myIframe.src = frameURL; 86 87 // We can take the reftest snapshot once the iframe has finished loading. 88 // (Its mask-image resource will block its load event.) 89 myIframe.addEventListener("load", ()=>{ 90 document.documentElement.removeAttribute("class"); 91 }); 92 document.body.appendChild(myIframe); 93 </script>