dom/canvas/test/crossorigin/test_webgl_crossorigin_textures.html

   1 <!DOCTYPE HTML>
   2 <title>WebGL cross-origin textures test</title>
   3 <script src="/tests/SimpleTest/SimpleTest.js"></script>
   4 <link rel="stylesheet" href="/tests/SimpleTest/test.css">
   5 <body>
   6 <canvas id="canvas" style="border: none;" width="100" height="100">
   7   <p class="fallback"> FAIL (fallback content) </p>
   8 </canvas>
   9 <script>
  10
  11   SimpleTest.waitForExplicitFinish();
  12
  13   const OK = "";
  14
  15   var gl;
  16   var number_of_tests_live = 0;
  17   var all_tests_started = false;
  18
  19   function verifyError(actual_error, expected_error, message) {
  20     ok(actual_error == expected_error,
  21        message + ": expected " + expected_error + ", got " + actual_error);
  22   }
  23
  24   function testTexture(url, crossOriginAttribute, expected_error) {
  25     number_of_tests_live++;
  26     var image = new Image();
  27     if (crossOriginAttribute == "just-crossOrigin-without-value") {
  28       var div = document.createElement('div');
  29       div.innerHTML="<img crossOrigin>";
  30       image = div.children[0];
  31     }
  32     else if (crossOriginAttribute != "missing-value-default")
  33       image.crossOrigin = crossOriginAttribute;
  34
  35
  36     function testDone() {
  37       number_of_tests_live--;
  38
  39       if (number_of_tests_live == 0 && all_tests_started)
  40         SimpleTest.finish();
  41     }
  42
  43     image.onload = function() {
  44       var tex = gl.createTexture();
  45       gl.bindTexture(gl.TEXTURE_2D, tex);
  46       var actual_error = OK;
  47       try {
  48         gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
  49       } catch(e) {
  50         actual_error = e.name;
  51       }
  52       verifyError(actual_error, expected_error, "texImage2D on " + url + " with crossOrigin=" + image.crossOrigin);
  53
  54       testDone();
  55     };
  56
  57     image.onerror = function(event) {
  58       ok(expected_error != OK, "Got an error but expected OK!");
  59
  60       testDone();
  61     }
  62
  63     image.src = url;
  64   }
  65
  66   addLoadEvent(function () {
  67     var canvas = document.getElementById("canvas");
  68     gl = canvas.getContext("experimental-webgl");
  69     if (!gl) {
  70       todo(false, "Canvas WebGL not supported");
  71       SimpleTest.finish();
  72       return;
  73     }
  74
  75
  76     testTexture("http://mochi.test:8888/tests/dom/canvas/test/crossorigin/image.png",
  77                 "missing-value-default",
  78                 OK);
  79     testTexture("http://mochi.test:8888/tests/dom/canvas/test/crossorigin/image.png",
  80                 "",
  81                 OK);
  82     testTexture("http://mochi.test:8888/tests/dom/canvas/test/crossorigin/image.png",
  83                 "just-crossOrigin-without-value",
  84                 OK);
  85     testTexture("http://example.com/tests/dom/canvas/test/crossorigin/image.png",
  86                 "missing-value-default",
  87                 "SecurityError");
  88     testTexture("http://example.com/tests/dom/canvas/test/crossorigin/image.png",
  89                 "",
  90                 "SecurityError");
  91     testTexture("http://example.com/tests/dom/canvas/test/crossorigin/image.png",
  92                 "just-crossOrigin-without-value",
  93                 "SecurityError");
  94
  95     testTexture("http://example.com/tests/dom/canvas/test/crossorigin/image-allow-star.png",
  96                 "missing-value-default",
  97                 "SecurityError");
  98     testTexture("http://example.com/tests/dom/canvas/test/crossorigin/image-allow-star.png",
  99                 "",
 100                 OK);
 101     testTexture("http://example.com/tests/dom/canvas/test/crossorigin/image-allow-star.png",
 102                 "just-crossOrigin-without-value",
 103                 OK);
 104     testTexture("http://example.com/tests/dom/canvas/test/crossorigin/image-allow-star.png",
 105                 "anonymous",
 106                 OK);
 107     testTexture("http://example.com/tests/dom/canvas/test/crossorigin/image-allow-star.png",
 108                 "use-credentials",
 109                 "SecurityError");
 110
 111     testTexture("http://example.com/tests/dom/canvas/test/crossorigin/image-allow-credentials.png",
 112                 "missing-value-default",
 113                 "SecurityError");
 114     testTexture("http://example.com/tests/dom/canvas/test/crossorigin/image-allow-credentials.png",
 115                 "",
 116                 OK);
 117     testTexture("http://example.com/tests/dom/canvas/test/crossorigin/image-allow-credentials.png",
 118                 "just-crossOrigin-without-value",
 119                 OK);
 120     testTexture("http://example.com/tests/dom/canvas/test/crossorigin/image-allow-credentials.png",
 121                 "anonymous",
 122                 OK);
 123     testTexture("http://example.com/tests/dom/canvas/test/crossorigin/image-allow-credentials.png",
 124                 "use-credentials",
 125                 OK);
 126
 127     // Test that bad values for crossorigin="..." are interpreted as invalid-value-default which is "anonymous".
 128     testTexture("http://mochi.test:8888/tests/dom/canvas/test/crossorigin/image.png",
 129                 "foobar",
 130                 OK);
 131     testTexture("http://example.com/tests/dom/canvas/test/crossorigin/image.png",
 132                 "foobar",
 133                 "SecurityError");
 134     testTexture("http://example.com/tests/dom/canvas/test/crossorigin/image-allow-star.png",
 135                 "foobar",
 136                 OK);
 137     testTexture("http://example.com/tests/dom/canvas/test/crossorigin/image-allow-credentials.png",
 138                 "foobar",
 139                 OK);
 140
 141     all_tests_started = true;
 142   });
 143 </script>