<!DOCTYPE html>
<meta charset=utf-8>
<title>Test for handling of 'crossorigin' attribute on CSS link with data: URL</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="log"></div>
<div id="someuniqueidhere"></div>
<img id="testimg" crossorigin src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mP4z8AAAAMBAQD3A0FDAAAAAElFTkSuQmCC">
<script>
  /* global async_test, assert_equals */
  var t = async_test("img@crossorigin with data: src");
  window.addEventListener("load", t.step_func_done(function() {
    var img = document.getElementById("testimg");
    assert_equals(img.naturalWidth, 1, "Should have 1px width");
    assert_equals(img.naturalHeight, 1, "Should have 1px height");
    var c = document.createElement("canvas");
    c.width = c.height = 1;
    var ctx = c.getContext("2d");
    ctx.drawImage(img, 0, 0);
    var data = ctx.getImageData(0, 0, 1, 1);
    assert_equals(data.width, 1, "Should have 1px data width");
    assert_equals(data.height, 1, "Should have 1px data height");
    assert_equals(data.data[0], 255, "Should have lots of red");
    assert_equals(data.data[1], 0, "Should have no green");
    assert_equals(data.data[2], 0, "Should have no blue");
    assert_equals(data.data[3], 255, "Should have no translucency");
  }));
</script>
