[CSS Shapes] CORS-enabled fetch for shape image values
[WebKit-https.git] / LayoutTests / http / tests / security / shape-image-cors.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5     #clear-left {
6         clear: left;
7         font: 20px/1 Ahem, sans-serif;
8         color: green;
9     }
10
11     #clear-left > div {
12         float: left;
13         width: 200px;
14         height: 20px;
15     }
16
17     /* blocked because the URL's port number doesn't match this document's origin. */
18     #shape-outside-block-origin {
19         -webkit-shape-outside: url("http://localhost:8080/resources/square100.png");
20     } 
21
22     /* Access is OK because the URL and this document have the same origin. */
23     #shape-outside-same-origin {
24         -webkit-shape-outside: url("/resources/square100.png");
25     } 
26
27     /* DataURL Access is OK, as it is with Canvas. */
28     #shape-outside-data-url {
29         -webkit-shape-outside: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100px' height='20px'><rect width='200' height='20' fill='blue'/></svg>");
30     } 
31
32     /* Cross-origin request is OK because the "Access-Control-Allow-Origin: *" is returned. */
33     #shape-outside-allow-origin-url {
34         -webkit-shape-outside: url("http://localhost:8080/security/resources/image-access-control.php?file=../../resources/square100.png&allow=true");
35     } 
36
37     /* Cross-origin request is not OK because a "Access-Control-Allow-Origin:" header is not returned. */
38     #shape-outside-disallow-origin-url {
39         -webkit-shape-outside: url("http://localhost:8080/security/resources/image-access-control.php?file=../../resources/square100.png&allow=false");
40     } 
41 </style>
42 </head>
43 <body>
44     <p>Verify that images not allowed by CORS don't affect the layout and that same-origin images, data URLs, and images with a "Access-Control-Allow-Origin: *" header do define the layout.</p>
45     <div id="clear-left"><div id="shape-outside-block-origin"></div>X</div>
46     <div id="clear-left"><div id="shape-outside-same-origin"></div>X</div>
47     <div id="clear-left"><div id="shape-outside-data-url"></div>X</div>
48     <div id="clear-left"><div id="shape-outside-allow-origin-url"></div>X</div>
49     <div id="clear-left"><div id="shape-outside-disallow-origin-url"></div>X</div>
50 </body>
51 </html>