dom/canvas/test/crossorigin/test_canvas2d_crossorigin.html

   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>