test_canvas2d_crossorigin.html (6335B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=685518 5 --> 6 <head> 7 <title>Test for Bug 685518</title> 8 <script src="/tests/SimpleTest/SimpleTest.js"></script> 9 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 10 </head> 11 <body> 12 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685518">Mozilla Bug 685518</a> 13 <p id="display"></p> 14 <div id="content" style="display: none"> 15 16 </div> 17 <pre id="test"> 18 <script type="application/javascript"> 19 20 /** Test for Bug 685518 */ 21 22 SimpleTest.waitForExplicitFinish(); 23 24 const BAD_URI_ERR = "NS_ERROR_DOM_BAD_URI_ERR"; 25 const OK = ""; 26 27 function verifyError(actual_error, expected_error, message) { 28 ok(actual_error == expected_error, 29 message + ": expected " + expected_error + ", got " + actual_error); 30 } 31 32 var number_of_tests_live = 0; 33 34 function testDone() { 35 number_of_tests_live--; 36 37 if (number_of_tests_live == 0) 38 SimpleTest.finish(); 39 } 40 41 function testImage(url, crossOriginAttribute, expected_error) { 42 ++number_of_tests_live; 43 var image; 44 if (crossOriginAttribute == "just-crossOrigin-without-value") { 45 var div = document.createElement('div'); 46 div.innerHTML="<img crossOrigin>"; 47 image = div.children[0]; 48 } 49 else { 50 image = new Image(); 51 if (crossOriginAttribute != "missing-value-default") { 52 image.crossOrigin = crossOriginAttribute; 53 } 54 } 55 56 image.onload = function() { 57 var c = document.createElement("canvas"); 58 c.width = this.width; 59 c.height = this.height; 60 var ctx = c.getContext("2d"); 61 ctx.drawImage(this, 0, 0); 62 63 var data; 64 var actual_error; 65 try { 66 data = ctx.getImageData(0, 0, 1, 1); 67 actual_error = OK; 68 } catch (e) { 69 actual_error = e.name; 70 } 71 72 verifyError(actual_error, expected_error, 73 "drawImage then get image data on " + url + 74 " with crossOrigin=" + this.crossOrigin); 75 76 try { 77 c.captureStream(0); 78 actual_error = OK; 79 } catch (e) { 80 actual_error = e.name; 81 } 82 83 verifyError(actual_error, expected_error, 84 "drawImage then capture stream on " + url + 85 " with crossOrigin=" + this.crossOrigin); 86 87 // Now test patterns 88 c = document.createElement("canvas"); 89 c.width = this.width; 90 c.height = this.height; 91 ctx = c.getContext("2d"); 92 ctx.fillStyle = ctx.createPattern(this, ""); 93 ctx.fillRect(0, 0, c.width, c.height); 94 try { 95 data = ctx.getImageData(0, 0, 1, 1); 96 actual_error = OK; 97 } catch (e) { 98 actual_error = e.name; 99 } 100 101 verifyError(actual_error, expected_error, 102 "createPattern+fill then get image data on " + url + 103 " with crossOrigin=" + this.crossOrigin); 104 105 try { 106 c.captureStream(0); 107 actual_error = OK; 108 } catch (e) { 109 actual_error = e.name; 110 } 111 112 verifyError(actual_error, expected_error, 113 "createPattern+fill then capture stream on " + url + 114 " with crossOrigin=" + this.crossOrigin); 115 116 testDone(); 117 }; 118 119 image.onerror = function(event) { 120 verifyError(BAD_URI_ERR, expected_error, 121 "image error handler for " + url + 122 " with crossOrigin=" + this.crossOrigin); 123 124 testDone(); 125 } 126 127 image.src = url; 128 } 129 130 // Now kick off the tests. 131 const testPath = "/tests/dom/canvas/test/crossorigin/" 132 133 // First column is image file, second column is what CORS headers the server sends 134 const imageFiles = [ 135 [ "image.png", "none" ], 136 [ "image-allow-star.png", "allow-all-anon" ], 137 [ "image-allow-credentials.png", "allow-single-server-creds" ] 138 ]; 139 140 const hostnames = [ 141 [ "mochi.test:8888", "same-origin" ], 142 [ "example.com", "cross-origin" ] 143 ]; 144 145 // First column is the value; second column is the expected resulting CORS mode 146 const attrValues = [ 147 [ "missing-value-default", "none" ], 148 [ "", "anonymous" ], 149 [ "just-crossOrigin-without-value", "anonymous" ], 150 [ "anonymous", "anonymous" ], 151 [ "use-credentials", "use-credentials" ], 152 [ "foobar", "anonymous" ] 153 ]; 154 155 function beginTest() { 156 for (var imgIdx = 0; imgIdx < imageFiles.length; ++imgIdx) { 157 for (var hostnameIdx = 0; hostnameIdx < hostnames.length; ++hostnameIdx) { 158 var hostnameData = hostnames[hostnameIdx]; 159 var url = "http://" + hostnameData[0] + testPath + imageFiles[imgIdx][0]; 160 for (var attrValIdx = 0; attrValIdx < attrValues.length; ++attrValIdx) { 161 var attrValData = attrValues[attrValIdx]; 162 // Now compute the expected result 163 var expected_error; 164 if (hostnameData[1] == "same-origin") { 165 // Same-origin; these should all Just Work 166 expected_error = OK; 167 } else { 168 // Cross-origin 169 is(hostnameData[1], "cross-origin", 170 "what sort of host is " + hostnameData[0]); 171 var CORSMode = attrValData[1]; 172 if (CORSMode == "none") { 173 // Doesn't matter what headers the server sends; we're not 174 // using CORS on our end. 175 expected_error = "SecurityError"; 176 } else { 177 // Check whether the server will let us talk to them 178 var CORSHeaders = imageFiles[imgIdx][1]; 179 // We're going to look for CORS headers from the server 180 if (CORSHeaders == "none") { 181 // No CORS headers from server; load will fail. 182 expected_error = BAD_URI_ERR; 183 } else if (CORSHeaders == "allow-all-anon") { 184 // Server only allows anonymous requests 185 if (CORSMode == "anonymous") { 186 expected_error = OK; 187 } else { 188 is(CORSMode, "use-credentials", 189 "What other CORS modes are there?"); 190 // A load with credentials against a server that only 191 // allows anonymous loads will fail. 192 expected_error = BAD_URI_ERR; 193 } 194 } else { 195 is(CORSHeaders, "allow-single-server-creds", 196 "What other CORS headers could there be?"); 197 // Our server should allow both anonymous and non-anonymous requests 198 expected_error = OK; 199 } 200 } 201 } 202 testImage(url, attrValData[0], expected_error); 203 } 204 } 205 } 206 } 207 208 beginTest(); 209 </script> 210 </pre> 211 </body> 212 </html>