mask-image-cors-001-styles.sub.css (1625B)
1 #mask-allowed { 2 height: 100px; 3 width: 100px; 4 /* We reference the image from "origin C" (the www2 origin); and we ensure 5 that it's served with a 'Access-Control-Allow-Origin' header whose value 6 is set to "origin A" (the "www" origin). This matches the origin of the 7 iframe's inner document, and hence allows the mask-image to be used 8 there, which should make this element render as two blue squares with 9 corners touching. See the main comment in mask-image-cors-001.sub.html 10 for more details. */ 11 mask-image: url("https://{{domains[www2]}}:{{ports[https][0]}}/css/css-masking/mask-image/mask-image-cors-001-image.png?pipe=header(Access-Control-Allow-Origin,https://{{domains[www]}}:{{ports[https][0]}})"); 12 mask-size: 100px 100px; 13 background: blue; 14 } 15 16 #mask-disallowed { 17 height: 100px; 18 width: 100px; 19 /* We reference the image from "origin C" (the www2 origin); and we ensure 20 that it's served with a 'Access-Control-Allow-Origin' header whose value 21 is set to "origin B" (the "www1" origin). This happens to match this 22 stylesheet's origin, but it *does not match* the origin of the iframe's 23 inner document. So, the mask-image should be forbidden in that document, 24 and this element should render fully-masked, i.e. no red should be 25 visible. */ 26 mask-image: url("https://{{domains[www2]}}:{{ports[https][0]}}/css/css-masking/mask-image/mask-image-cors-001-image.png?pipe=header(Access-Control-Allow-Origin,https://{{domains[www1]}}:{{ports[https][0]}})"); 27 mask-size: 100px 100px; 28 background: red; 29 }