summaryrefslogtreecommitdiffstats
path: root/dom/canvas/test/crossorigin/test_canvas2d_crossorigin.html
blob: ef8ba96dc9b36f6670f9f6e8eb91a85c0315e904 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=685518
-->
<head>
  <title>Test for Bug 685518</title>
  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
</head>
<body>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685518">Mozilla Bug 685518</a>
<p id="display"></p>
<div id="content" style="display: none">
  
</div>
<pre id="test">
<script type="application/javascript">

/** Test for Bug 685518 **/

SimpleTest.waitForExplicitFinish();

const BAD_URI_ERR = "NS_ERROR_DOM_BAD_URI_ERR";
const OK = "";

function verifyError(actual_error, expected_error, message) {
  ok(actual_error == expected_error,
     message + ": expected " + expected_error + ", got " + actual_error);
}

var number_of_tests_live = 0;

function testDone() {
  number_of_tests_live--;
        
  if (number_of_tests_live == 0)
    SimpleTest.finish();
}

function testImage(url, crossOriginAttribute, expected_error) {
  ++number_of_tests_live;
  var image;
  if (crossOriginAttribute == "just-crossOrigin-without-value") {
    var div = document.createElement('div');
    div.innerHTML="<img crossOrigin>";
    image = div.children[0];
  }
  else {
    image = new Image();
    if (crossOriginAttribute != "missing-value-default") {
      image.crossOrigin = crossOriginAttribute;
    }
  }

  image.onload = function() {
    var c = document.createElement("canvas");
    c.width = this.width;
    c.height = this.height;
    var ctx = c.getContext("2d");
    ctx.drawImage(this, 0, 0);

    var data;
    var actual_error;
    try {
      data = ctx.getImageData(0, 0, 1, 1);
      actual_error = OK;
    } catch (e) {
      actual_error = e.name;
    }

    verifyError(actual_error, expected_error,
                "drawImage then get image data on " + url +
                " with crossOrigin=" + this.crossOrigin);

    try {
      c.captureStream(0);
      actual_error = OK;
    } catch (e) {
      actual_error = e.name;
    }

    verifyError(actual_error, expected_error,
                "drawImage then capture stream on " + url +
                " with crossOrigin=" + this.crossOrigin);

    // Now test patterns
    c = document.createElement("canvas");
    c.width = this.width;
    c.height = this.height;
    ctx = c.getContext("2d");
    ctx.fillStyle = ctx.createPattern(this, "");
    ctx.fillRect(0, 0, c.width, c.height);
    try {
      data = ctx.getImageData(0, 0, 1, 1);
      actual_error = OK;
    } catch (e) {
      actual_error = e.name;
    }

    verifyError(actual_error, expected_error,
                "createPattern+fill then get image data on " + url +
                " with crossOrigin=" + this.crossOrigin);

    try {
      c.captureStream(0);
      actual_error = OK;
    } catch (e) {
      actual_error = e.name;
    }

    verifyError(actual_error, expected_error,
                "createPattern+fill then capture stream on " + url +
                " with crossOrigin=" + this.crossOrigin);

    testDone();
  };

  image.onerror = function(event) {
    verifyError(BAD_URI_ERR, expected_error,
                "image error handler for " + url +
                " with crossOrigin=" + this.crossOrigin);

    testDone();
  }

  image.src = url;
}

// Now kick off the tests.
const testPath = "/tests/dom/canvas/test/crossorigin/"

// First column is image file, second column is what CORS headers the server sends
const imageFiles = [
 [ "image.png", "none" ],
 [ "image-allow-star.png", "allow-all-anon" ],
 [ "image-allow-credentials.png", "allow-single-server-creds" ]
];

const hostnames = [
  [ "mochi.test:8888", "same-origin" ],
  [ "example.com", "cross-origin" ]
];

// First column is the value; second column is the expected resulting CORS mode
const attrValues = [
  [ "missing-value-default", "none" ],
  [ "", "anonymous" ],
  [ "just-crossOrigin-without-value", "anonymous" ],
  [ "anonymous", "anonymous" ],
  [ "use-credentials", "use-credentials" ],
  [ "foobar", "anonymous" ]
];

function beginTest() {
  for (var imgIdx = 0; imgIdx < imageFiles.length; ++imgIdx) {
    for (var hostnameIdx = 0; hostnameIdx < hostnames.length; ++hostnameIdx) {
      var hostnameData = hostnames[hostnameIdx];
      var url = "http://" + hostnameData[0] + testPath + imageFiles[imgIdx][0];
      for (var attrValIdx = 0; attrValIdx < attrValues.length; ++attrValIdx) {
        var attrValData = attrValues[attrValIdx];
        // Now compute the expected result
        var expected_error;
        if (hostnameData[1] == "same-origin") {
          // Same-origin; these should all Just Work
          expected_error = OK;
        } else {
          // Cross-origin
          is(hostnameData[1], "cross-origin",
             "what sort of host is " + hostnameData[0]);
          var CORSMode = attrValData[1];
          if (CORSMode == "none") {
            // Doesn't matter what headers the server sends; we're not
            // using CORS on our end.
            expected_error = "SecurityError";
          } else {
            // Check whether the server will let us talk to them
            var CORSHeaders = imageFiles[imgIdx][1];
            // We're going to look for CORS headers from the server
            if (CORSHeaders == "none") {
              // No CORS headers from server; load will fail.
              expected_error = BAD_URI_ERR;
            } else if (CORSHeaders == "allow-all-anon") {
              // Server only allows anonymous requests
              if (CORSMode == "anonymous") {
                expected_error = OK;
              } else {
                is(CORSMode, "use-credentials",
                   "What other CORS modes are there?");
                // A load with credentials against a server that only
                // allows anonymous loads will fail.
                expected_error = BAD_URI_ERR;
              }
            } else {
              is(CORSHeaders, "allow-single-server-creds",
                 "What other CORS headers could there be?");
              // Our server should allow both anonymous and non-anonymous requests
              expected_error = OK;
            }
          }
        }
        testImage(url, attrValData[0], expected_error);
      }
    }
  }
}

beginTest();
</script>
</pre>
</body>
</html>