path: root/testing/web-platform/tests/2dcontext/tools/tests.yaml

# Copyright (c) 2010 Philip Taylor
# Released under the BSD license and W3C Test Suite License: see LICENSE.txt

- name: fallback.basic
  desc: Fallback content is inserted into the DOM
  testing:
    - fallback
  code: |
    @assert canvas.childNodes.length === 1;

- name: fallback.multiple
  desc: Fallback content with multiple elements
  testing:
    - fallback
  fallback: '<p class="fallback">FAIL</p><p class="fallback">FAIL</p>'
  code: |
    @assert canvas.childNodes.length === 2;

- name: fallback.nested
  desc: Fallback content containing another canvas (mostly testing parsers)
  testing:
    - fallback
  fallback: '<canvas><p class="fallback">FAIL (fallback content)</p></canvas><p class="fallback">FAIL (fallback content)</p>'
  code: |
    @assert canvas.childNodes.length === 2;

- name: type.name
  desc: HTMLCanvasElement type and toString
  testing:
    - canvas.type
  code: |
    @assert Object.prototype.toString.call(canvas) === '[object HTMLCanvasElement]';

- name: type.exists
  desc: HTMLCanvasElement is a property of window
  notes: &bindings Defined in "Web IDL" (draft)
  testing:
    - canvas.type
  code: |
    @assert window.HTMLCanvasElement;

- name: type.delete
  desc: window.HTMLCanvasElement interface object is [[Configurable]]
  notes: *bindings
  testing:
    - canvas.type
  code: |
    @assert delete window.HTMLCanvasElement === true;
    @assert window.HTMLCanvasElement === undefined;

- name: type.prototype
  desc: window.HTMLCanvasElement has prototype, which is { ReadOnly, DontDelete }. prototype has getContext, which is not
  notes: *bindings
  testing:
    - canvas.type
  code: |
    @assert window.HTMLCanvasElement.prototype;
    @assert window.HTMLCanvasElement.prototype.getContext;
    window.HTMLCanvasElement.prototype = null;
    @assert window.HTMLCanvasElement.prototype;
    delete window.HTMLCanvasElement.prototype;
    @assert window.HTMLCanvasElement.prototype;
    window.HTMLCanvasElement.prototype.getContext = 1;
    @assert window.HTMLCanvasElement.prototype.getContext === 1;
    delete window.HTMLCanvasElement.prototype.getContext;
    @assert window.HTMLCanvasElement.prototype.getContext === undefined;

- name: type.replace
  desc: HTMLCanvasElement methods can be replaced, and the replacement methods used by canvases
  notes: *bindings
  testing:
    - canvas.type
  code: |
    window.HTMLCanvasElement.prototype.getContext = function (name) { return 0; };
    @assert canvas.getContext('2d') === 0;

- name: type.extend
  desc: HTMLCanvasElement methods can be added, and the new methods used by canvases
  notes: *bindings
  testing:
    - canvas.type
  code: |
    window.HTMLCanvasElement.prototype.getZero = function () { return 0; };
    @assert canvas.getZero() === 0;


- name: size.attributes.idl.set.zero
  desc: Setting width/height IDL attributes to 0
  testing:
    - size.width
    - size.height
  code: |
    canvas.width = 0;
    canvas.height = 0;
    @assert canvas.width === 0;
    @assert canvas.height === 0;
#  expected: size 0 0 # can't generate zero-sized PNG

- name: size.attributes.idl
  desc: Getting/setting width/height IDL attributes
  testing:
    - size.width
    - size.height
  webidl:
    - es-unsigned-long
  code: |
    canvas.width = "100";
    canvas.height = "100";
    @assert canvas.width === 100;
    @assert canvas.height === 100;

    canvas.width = "+1.5e2";
    canvas.height = "0x96";
    @assert canvas.width === 150;
    @assert canvas.height === 150;

    canvas.width = 200 - Math.pow(2, 32);
    canvas.height = 200 - Math.pow(2, 32);
    @assert canvas.width === 200;
    @assert canvas.height === 200;

    canvas.width = 301.999;
    canvas.height = 301.001;
    @assert canvas.width === 301;
    @assert canvas.height === 301;

    canvas.width = "400x";
    canvas.height = "foo";
    @assert canvas.width === 0;
    @assert canvas.height === 0;

- name: size.attributes.default
  desc: Default width/height when attributes are missing
  testing:
    - size.default
    - size.missing
  canvas: ""
  code: |
    @assert canvas.width === 300;
    @assert canvas.height === 150;
    @assert !canvas.hasAttribute('width');
    @assert !canvas.hasAttribute('height');
  expected: size 300 150

- name: size.attributes.reflect.setidl
  desc: Setting IDL attributes updates IDL and content attributes
  testing:
    - size.reflect
  code: |
    canvas.width = 120;
    canvas.height = 60;
    @assert canvas.getAttribute('width') === '120';
    @assert canvas.getAttribute('height') === '60';
    @assert canvas.width === 120;
    @assert canvas.height === 60;
  expected: size 120 60

- name: size.attributes.reflect.setidlzero
  desc: Setting IDL attributes to 0 updates IDL and content attributes
  testing:
    - size.reflect
  code: |
    canvas.width = 0;
    canvas.height = 0;
    @assert canvas.getAttribute('width') === '0';
    @assert canvas.getAttribute('height') === '0';
    @assert canvas.width === 0;
    @assert canvas.height === 0;
#  expected: size 0 0 # can't generate zero-sized PNG

- name: size.attributes.reflect.setcontent
  desc: Setting content attributes updates IDL and content attributes
  testing:
    - size.reflect
  code: |
    canvas.setAttribute('width', '120');
    canvas.setAttribute('height', '60');
    @assert canvas.getAttribute('width') === '120';
    @assert canvas.getAttribute('height') === '60';
    @assert canvas.width === 120;
    @assert canvas.height === 60;
  expected: size 120 60

- name: size.attributes.removed
  desc: Removing content attributes reverts to default size
  testing:
    - size.missing
  canvas: width="120" height="60"
  code: |
    @assert canvas.width === 120;
    canvas.removeAttribute('width');
    @assert canvas.width === 300;
  expected: size 300 60

- meta: |
    cases = [
        ("zero", "0", 0),
        ("empty", "", None),
        ("onlyspace", "  ", None),
        ("space", "  100", 100),
        ("whitespace", "\n\t\f100", 100),
        ("plus", "+100", 100),
        ("minus", "-100", None),
        ("octal", "0100", 100),
        ("hex", "0x100", 0),
        ("exp", "100e1", 100),
        ("decimal", "100.999", 100),
        ("percent", "100%", 100),
        ("em", "100em", 100),
        ("junk", "#!?", None),
        ("trailingjunk", "100#!?", 100),
    ]
    def gen(name, string, exp, code):
        testing = ["size.nonnegativeinteger"]
        if exp is None:
            testing.append("size.error")
            code += "@assert canvas.width === 300;\n@assert canvas.height === 150;\n"
            expected = "size 300 150"
        else:
            code += "@assert canvas.width === %s;\n@assert canvas.height === %s;\n" % (exp, exp)
            expected = "size %s %s" % (exp, exp)

            # With "100%", Opera gets canvas.width = 100 but renders at 100% of the frame width,
            # so check the CSS display width
            code += '@assert window.getComputedStyle(canvas, null).getPropertyValue("width") === "%spx";\n' % (exp, )

        code += "@assert canvas.getAttribute('width') === %r;\n" % string
        code += "@assert canvas.getAttribute('height') === %r;\n" % string

        if exp == 0:
            expected = None # can't generate zero-sized PNGs for the expected image

        return code, testing, expected

    for name, string, exp in cases:
        code = ""
        code, testing, expected = gen(name, string, exp, code)
        tests.append( {
            "name": "size.attributes.parse.%s" % name,
            "desc": "Parsing of non-negative integers",
            "testing": testing,
            "canvas": 'width="%s" height="%s"' % (string, string),
            "code": code,
            "expected": expected
        } )

    for name, string, exp in cases:
        code = "canvas.setAttribute('width', %r);\ncanvas.setAttribute('height', %r);\n" % (string, string)
        code, testing, expected = gen(name, string, exp, code)
        tests.append( {
            "name": "size.attributes.setAttribute.%s" % name,
            "desc": "Parsing of non-negative integers in setAttribute",
            "testing": testing,
            "canvas": 'width="50" height="50"',
            "code": code,
            "expected": expected
        } )

- name: size.attributes.style
  desc: Canvas size is independent of CSS resizing
  testing:
    - size.css
  canvas: 'width="50" height="30" style="width: 100px; height: 50px"'
  code: |
    @assert canvas.width === 50;
    @assert canvas.height === 30;
  expected: size 100 50

- name: size.large
  DISABLED: |
    "User agents may impose implementation-specific limits on otherwise unconstrained
    inputs, e.g. to prevent denial of service attacks, to guard against running out of memory,
    or to work around platform-specific limitations."
  testing:
    - size.width
    - size.height
  notes: Not sure how reasonable this is, but the spec doesn't say there's an upper limit on the size.
  code: |
    var n = 2147483647; // 2^31 - 1, which should be supported by any sensible definition of "long"
    canvas.width = n;
    canvas.height = n;
    @assert canvas.width === n;
    @assert canvas.height === n;
#  expected: size 2147483647 2147483647 # not a good idea to generate the expected image in this case...

- name: initial.colour
  desc: Initial state is transparent black
  testing:
    - initial.colour
  notes: |
    Output should be transparent black (not transparent anything-else), but manual
    verification can only confirm that it's transparent - it's not possible to make
    the actual blackness visible.
  code: |
    @assert pixel 20,20 == 0,0,0,0;
  expected: size 100 50 # transparent

- name: initial.reset.different
  desc: Changing size resets canvas to transparent black
  testing:
    - initial.reset
  code: |
    ctx.fillStyle = '#f00';
    ctx.fillRect(0, 0, 50, 50);
    @assert pixel 20,20 == 255,0,0,255;
    canvas.width = 50;
    @assert pixel 20,20 == 0,0,0,0;
  expected: size 50 50 # transparent

- name: initial.reset.same
  desc: Setting size (not changing the value) resets canvas to transparent black
  testing:
    - initial.reset
  code: |
    canvas.width = 100;
    ctx.fillStyle = '#f00';
    ctx.fillRect(0, 0, 50, 50);
    @assert pixel 20,20 == 255,0,0,255;
    canvas.width = 100;
    @assert pixel 20,20 == 0,0,0,0;
  expected: size 100 50 # transparent

- name: initial.reset.path
  desc: Resetting the canvas state resets the current path
  testing:
    - initial.reset
  code: |
    canvas.width = 100;
    ctx.rect(0, 0, 100, 50);
    canvas.width = 100;
    ctx.fillStyle = '#f00';
    ctx.fill();
    @assert pixel 20,20 == 0,0,0,0;
  expected: size 100 50 # transparent

- name: initial.reset.clip
  desc: Resetting the canvas state resets the current clip region
  testing:
    - initial.reset
  code: |
    canvas.width = 100;
    ctx.rect(0, 0, 1, 1);
    ctx.clip();
    canvas.width = 100;
    ctx.fillStyle = '#0f0';
    ctx.fillRect(0, 0, 100, 50);
    @assert pixel 20,20 == 0,255,0,255;
  expected: green

- name: initial.reset.transform
  desc: Resetting the canvas state resets the current transformation matrix
  testing:
    - initial.reset
  code: |
    canvas.width = 100;
    ctx.scale(0.1, 0.1);
    canvas.width = 100;
    ctx.fillStyle = '#0f0';
    ctx.fillRect(0, 0, 100, 50);
    @assert pixel 20,20 == 0,255,0,255;
  expected: green

- name: initial.reset.gradient
  desc: Resetting the canvas state does not invalidate any existing gradients
  testing:
    - initial.reset
  code: |
    canvas.width = 50;
    var g = ctx.createLinearGradient(0, 0, 100, 0);
    g.addColorStop(0, '#0f0');
    g.addColorStop(1, '#0f0');
    canvas.width = 100;
    ctx.fillStyle = '#f00';
    ctx.fillRect(0, 0, 100, 50);
    ctx.fillStyle = g;
    ctx.fillRect(0, 0, 100, 50);
    @assert pixel 50,25 == 0,255,0,255;
  expected: green

- name: initial.reset.pattern
  desc: Resetting the canvas state does not invalidate any existing patterns
  testing:
    - initial.reset
  code: |
    canvas.width = 30;
    ctx.fillStyle = '#0f0';
    ctx.fillRect(0, 0, 30, 50);
    var p = ctx.createPattern(canvas, 'repeat-x');
    canvas.width = 100;
    ctx.fillStyle = '#f00';
    ctx.fillRect(0, 0, 100, 50);
    ctx.fillStyle = p;
    ctx.fillRect(0, 0, 100, 50);
    @assert pixel 50,25 == 0,255,0,255;
  expected: green

# See tests2d.yaml for initial.reset.2dstate


- name: context.emptystring
  desc: getContext with empty string returns null
  testing:
    - context.unrecognised
  code: |
    @assert canvas.getContext("") === null;

- name: context.unrecognised.badname
  desc: getContext with unrecognised context name returns null
  testing:
    - context.unrecognised
  code: |
    @assert canvas.getContext('This is not an implemented context in any real browser') === null;

- name: context.unrecognised.badsuffix
  desc: Context name "2d" plus a suffix is unrecognised
  testing:
    - context.unrecognised
  code: |
    @assert canvas.getContext("2d#") === null;

- name: context.unrecognised.nullsuffix
  desc: Context name "2d" plus a "\0" suffix is unrecognised
  testing:
    - context.unrecognised
  code: |
    @assert canvas.getContext("2d\0") === null;

- name: context.unrecognised.unicode
  desc: Context name which kind of looks like "2d" is unrecognised
  testing:
    - context.unrecognised
  code: |
    @assert canvas.getContext("2\uFF44") === null; // Fullwidth Latin Small Letter D

- name: context.casesensitive
  desc: Context name "2D" is unrecognised; matching is case sensitive
  testing:
    - context.unrecognised
  code: |
    @assert canvas.getContext('2D') === null;

- name: context.arguments.missing
  notes: *bindings
  testing:
    - canvas.getContext
  code: |
    @assert throws TypeError canvas.getContext(); @moz-todo



- name: toBlob.png
  desc: toBlob with image/png returns a PNG Blob
  testing:
    - toBlob.png
  code: |
    canvas.toBlob(function(data){
      @assert data.type === "image/png";
    }, 'image/png');

- name: toBlob.jpeg
  desc: toBlob with image/jpeg returns a JPEG Blob
  testing:
    - toBlob.jpeg
  code: |
    canvas.toBlob(function(data){
      @assert data.type === "image/jpeg";
    }, 'image/jpeg');

- name: toDataURL.default
  desc: toDataURL with no arguments returns a PNG
  testing:
    - toDataURL.noarguments
  code: |
    var data = canvas.toDataURL();
    @assert data =~ /^data:image\/png[;,]/;

- name: toDataURL.png
  desc: toDataURL with image/png returns a PNG
  testing:
    - toDataURL.png
    - toDataURL.witharguments
  code: |
    var data = canvas.toDataURL('image/png');
    @assert data =~ /^data:image\/png[;,]/;

- name: toDataURL.jpg
  desc: toDataURL with image/jpg is invalid type hence returns a PNG
  testing:
    - toDataURL.jpg
    - toDataURL.witharguments
  code: |
    var data = canvas.toDataURL('image/jpg');
    @assert data =~ /^data:image\/png[;,]/;


- name: toDataURL.bogustype
  desc: toDataURL with a syntactically invalid type returns a PNG
  testing:
    - toDataURL.unrecognised
  code: |
    var data = canvas.toDataURL('bogus');
    @assert data =~ /^data:image\/png[;,]/;

- name: toDataURL.unrecognised
  desc: toDataURL with an unhandled type returns a PNG
  testing:
    - toDataURL.unrecognised
  code: |
    var data = canvas.toDataURL('image/example');
    @assert data =~ /^data:image\/png[;,]/;

- name: toDataURL.lowercase.ascii
  desc: toDataURL type is case-insensitive
  testing:
    - toDataURL.lowercase
  code: |
    var data = canvas.toDataURL('ImAgE/PnG');
    @assert data =~ /^data:image\/png[;,]/;

    // If JPEG is supported at all, it must be supported case-insensitively
    data = canvas.toDataURL('image/jpeg');
    if (data.match(/^data:image\/jpeg[;,]/)) {
        data = canvas.toDataURL('ImAgE/JpEg');
        @assert data =~ /^data:image\/jpeg[;,]/;
    }

- name: toDataURL.lowercase.unicode
  desc: toDataURL type is ASCII-case-insensitive
  testing:
    - toDataURL.lowercase
  code: |
    // Use LATIN CAPITAL LETTER I WITH DOT ABOVE (Unicode lowercase is "i")
    var data = canvas.toDataURL('\u0130mage/png');
    @assert data =~ /^data:image\/png[;,]/;

    var data = canvas.toDataURL('\u0130mage/jpeg');
    @assert data =~ /^data:image\/png[;,]/;

- name: toDataURL.arguments.1
  desc: toDataURL ignores extra arguments
  testing:
    - toDataURL.arguments
  code: |
    var data = canvas.toDataURL('image/png', 'another argument that should not raise an exception');
    @assert data =~ /^data:image\/png[;,]/;

- name: toDataURL.arguments.2
  desc: toDataURL ignores extra arguments
  testing:
    - toDataURL.arguments
  code: |
    var data = canvas.toDataURL('image/png', 'another argument that should not raise an exception', 'and another');
    @assert data =~ /^data:image\/png[;,]/;

- name: toDataURL.arguments.3
  desc: toDataURL ignores extra arguments
  testing:
    - toDataURL.arguments
  code: |
    // More arguments that should not raise exceptions
    var data = canvas.toDataURL('image/png', null, null, null);
    @assert data =~ /^data:image\/png[;,]/;

- name: toDataURL.nocontext
  desc: toDataURL works before any context has been got
  testing:
    - toDataURL.noarguments
  code: |
    var canvas2 = document.createElement('canvas');
    var data = canvas2.toDataURL();
    @assert data =~ /^data:image\/png[;,]/;

- name: toDataURL.zerosize
  desc: toDataURL on zero-size canvas returns 'data:,'
  testing:
    - toDataURL.zerosize
  canvas: width="0" height="0"
  code: |
    var data = canvas.toDataURL();
    @assert data === 'data:,';

- name: toDataURL.zerowidth
  desc: toDataURL on zero-size canvas returns 'data:,'
  testing:
    - toDataURL.zerosize
  canvas: width="0"
  code: |
    var data = canvas.toDataURL();
    @assert data === 'data:,';

- name: toDataURL.zeroheight
  desc: toDataURL on zero-size canvas returns 'data:,'
  testing:
    - toDataURL.zerosize
  canvas: height="0"
  code: |
    var data = canvas.toDataURL();
    @assert data === 'data:,';

- name: toDataURL.large1
  DISABLED: just testing implementation limits, and tends to crash
  canvas: width="30000" height="1"
  code: |
    var data = canvas.toDataURL();
    @assert data =~ /^data:image\/png[;,]/;

- name: toDataURL.large2
  DISABLED: just testing implementation limits, and tends to crash
  canvas: width="32767" height="1"
  code: |
    var data = canvas.toDataURL();
    @assert data =~ /^data:image\/png[;,]/;

- name: toDataURL.large3
  DISABLED: just testing implementation limits, and tends to crash
  canvas: width="32768" height="1"
  code: |
    var data = canvas.toDataURL();
    @assert data =~ /^data:image\/png[;,]/;

- name: toDataURL.png.primarycolours
  desc: toDataURL with PNG handles simple colours correctly
  testing:
    - toDataURL.png
  code: |
    ctx.fillStyle = '#ff0';
    ctx.fillRect(0, 0, 25, 40);
    ctx.fillStyle = '#0ff';
    ctx.fillRect(25, 0, 50, 40);
    ctx.fillStyle = '#00f';
    ctx.fillRect(75, 0, 25, 40);
    ctx.fillStyle = '#fff';
    ctx.fillRect(0, 40, 100, 10);
    var data = canvas.toDataURL();
    ctx.fillStyle = '#f00';
    ctx.fillRect(0, 0, 100, 50);
    var img = new Image();
    deferTest();
    img.onload = t.step_func_done(function ()
    {
        ctx.drawImage(img, 0, 0);
        @assert pixel 12,20 == 255,255,0,255;
        @assert pixel 50,20 == 0,255,255,255;
        @assert pixel 87,20 == 0,0,255,255;
        @assert pixel 50,45 == 255,255,255,255;
    });
    img.src = data;
  expected: |
    size 100 50
    cr.set_source_rgb(1, 1, 0)
    cr.rectangle(0, 0, 25, 40)
    cr.fill()
    cr.set_source_rgb(0, 1, 1)
    cr.rectangle(25, 0, 50, 40)
    cr.fill()
    cr.set_source_rgb(0, 0, 1)
    cr.rectangle(75, 0, 25, 40)
    cr.fill()
    cr.set_source_rgb(1, 1, 1)
    cr.rectangle(0, 40, 100, 10)
    cr.fill()

- name: toDataURL.png.complexcolours
  desc: toDataURL with PNG handles non-primary and non-solid colours correctly
  testing:
    - toDataURL.png
  code: |
    // (These values are chosen to survive relatively alright through being premultiplied)
    ctx.fillStyle = 'rgba(1, 3, 254, 1)';
    ctx.fillRect(0, 0, 25, 25);
    ctx.fillStyle = 'rgba(8, 252, 248, 0.75)';
    ctx.fillRect(25, 0, 25, 25);
    ctx.fillStyle = 'rgba(6, 10, 250, 0.502)';
    ctx.fillRect(50, 0, 25, 25);
    ctx.fillStyle = 'rgba(12, 16, 244, 0.25)';
    ctx.fillRect(75, 0, 25, 25);
    var img = new Image();
    deferTest();
    img.onload = t.step_func_done(function ()
    {
        ctx.drawImage(img, 0, 25);
        // (The alpha values do not really survive float->int conversion, so just
        // do approximate comparisons)
        @assert pixel 12,40 == 1,3,254,255;
        @assert pixel 37,40 ==~ 8,252,248,191 +/- 2;
        @assert pixel 62,40 ==~ 6,10,250,127 +/- 4;
        @assert pixel 87,40 ==~ 12,16,244,63 +/- 8;
    });
    img.src = canvas.toDataURL();
  expected: |
    size 100 50
    cr.set_source_rgba(1/255., 3/255., 254/255., 1)
    cr.rectangle(0, 0, 25, 50)
    cr.fill()
    cr.set_source_rgba(8/255., 252/255., 248/255., 191/255.)
    cr.rectangle(25, 0, 25, 50)
    cr.fill()
    cr.set_source_rgba(6/255., 10/255., 250/255., 127/255.)
    cr.rectangle(50, 0, 25, 50)
    cr.fill()
    cr.set_source_rgba(12/255., 16/255., 244/255., 63/255.)
    cr.rectangle(75, 0, 25, 50)
    cr.fill()

- name: toDataURL.jpeg.primarycolours
  desc: toDataURL with JPEG handles simple colours correctly
  testing:
    - toDataURL.jpeg
  code: |
    ctx.fillStyle = '#ff0';
    ctx.fillRect(0, 0, 25, 40);
    ctx.fillStyle = '#0ff';
    ctx.fillRect(25, 0, 50, 40);
    ctx.fillStyle = '#00f';
    ctx.fillRect(75, 0, 25, 40);
    ctx.fillStyle = '#fff';
    ctx.fillRect(0, 40, 100, 10);
    var data = canvas.toDataURL('image/jpeg'); // it is okay if this returns a PNG instead
    ctx.fillStyle = '#f00';
    ctx.fillRect(0, 0, 100, 50);
    var img = new Image();
    deferTest();
    img.onload = t.step_func_done(function ()
    {
        ctx.drawImage(img, 0, 0);
        @assert pixel 12,20 ==~ 255,255,0,255 +/- 8;
        @assert pixel 50,20 ==~ 0,255,255,255 +/- 8;
        @assert pixel 87,20 ==~ 0,0,255,255 +/- 8;
        @assert pixel 50,45 ==~ 255,255,255,255 +/- 8;
    });
    img.src = data;
  expected: |
    size 100 50
    cr.set_source_rgb(1, 1, 0)
    cr.rectangle(0, 0, 25, 40)
    cr.fill()
    cr.set_source_rgb(0, 1, 1)
    cr.rectangle(25, 0, 50, 40)
    cr.fill()
    cr.set_source_rgb(0, 0, 1)
    cr.rectangle(75, 0, 25, 40)
    cr.fill()
    cr.set_source_rgb(1, 1, 1)
    cr.rectangle(0, 40, 100, 10)
    cr.fill()

- name: toDataURL.jpeg.alpha
  desc: toDataURL with JPEG composites onto black
  testing:
    - toDataURL.jpeg
    - toDataURL.noalpha
  code: |
    ctx.fillStyle = 'rgba(128, 255, 128, 0.5)';
    ctx.fillRect(0, 0, 100, 50);
    ctx.globalCompositeOperation = 'destination-over'; // should be ignored by toDataURL
    var data = canvas.toDataURL('image/jpeg');
    ctx.globalCompositeOperation = 'source-over';
    if (!data.match(/^data:image\/jpeg[;,]/)) {
      @assert true;
    } else {
      ctx.fillStyle = '#f00';
      ctx.fillRect(0, 0, 100, 50);
      var img = new Image();
      deferTest();
      img.onload = t.step_func_done(function ()
      {
          ctx.drawImage(img, 0, 0);
          @assert pixel 50,25 ==~ 63,127,63,255 +/- 8;
      });
      img.src = data;
    }
  expected: |
    size 100 50
    cr.set_source_rgb(0.25, 0.5, 0.25)
    cr.rectangle(0, 0, 100, 50)
    cr.fill()

- name: toDataURL.jpeg.quality.basic
  desc: toDataURL with JPEG uses the quality parameter
  testing:
    - toDataURL.jpeg.quality
  mozilla: { throws }
  code: |
    ctx.fillStyle = '#00f';
    ctx.fillRect(0, 0, 100, 50);
    ctx.fillStyle = '#0ff';
    ctx.fillRect(0, 3, 100, 1);
    // Check for JPEG support first
    var data = canvas.toDataURL('image/jpeg');
    if (!data.match(/^data:image\/jpeg[;,]/)) {
      @assert true;
    } else {
      var data_hi = canvas.toDataURL('image/jpeg', 0.99);
      var data_lo = canvas.toDataURL('image/jpeg', 0.01);
      ctx.fillStyle = '#f00';
      ctx.fillRect(0, 0, 100, 50);
      deferTest();
      var img_hi = new Image();
      img_hi.onload = function ()
      {
          var img_lo = new Image();
          img_lo.onload = t.step_func_done(function ()
          {
              ctx.drawImage(img_hi, 0, 0, 50, 50, 0, 0, 50, 50);
              ctx.drawImage(img_lo, 0, 0, 50, 50, 50, 0, 50, 50);
              @assert data_hi.length > data_lo.length;
              @assert pixel 25,25 ==~ 0,0,255,255 +/- 8;
              @assert pixel 75,25 ==~ 0,0,255,255 +/- 32;
          });
          img_lo.src = data_lo;
      };
      img_hi.src = data_hi;
    }
  expected: |
    size 100 50
    cr.set_source_rgb(0, 0, 1)
    cr.rectangle(0, 0, 100, 50)
    cr.fill()
    cr.set_source_rgb(0, 1, 1)
    cr.rectangle(0, 3, 100, 1)
    cr.fill()

- name: toDataURL.jpeg.quality.notnumber
  desc: toDataURL with JPEG handles non-numeric quality parameters
  testing:
    - toDataURL.jpeg.nan
  code: |
    ctx.fillStyle = '#00f';
    ctx.fillRect(0, 0, 100, 50);
    ctx.fillStyle = '#0ff';
    ctx.fillRect(0, 3, 100, 1);
    // Check for JPEG support first
    var data = canvas.toDataURL('image/jpeg');
    if (!data.match(/^data:image\/jpeg[;,]/)) {
      @assert true;
    } else {
        @assert canvas.toDataURL('image/jpeg', 'bogus') === data;
        @assert canvas.toDataURL('image/jpeg', {}) === data;
        @assert canvas.toDataURL('image/jpeg', null) === data;
        @assert canvas.toDataURL('image/jpeg', undefined) === data;
        @assert canvas.toDataURL('image/jpeg', true) === data;
        @assert canvas.toDataURL('image/jpeg', '0.01') === data;
    }

- name: toDataURL.jpeg.quality.outsiderange
  desc: toDataURL with JPEG handles out-of-range quality parameters
  testing:
    - toDataURL.jpeg.range
  code: |
    ctx.fillStyle = '#00f';
    ctx.fillRect(0, 0, 100, 50);
    ctx.fillStyle = '#0ff';
    ctx.fillRect(0, 3, 100, 1);
    // Check for JPEG support first
    var data = canvas.toDataURL('image/jpeg');
    if (!data.match(/^data:image\/jpeg[;,]/)) {
      @assert true;
    } else {
        @assert canvas.toDataURL('image/jpeg', 10) === data;
        @assert canvas.toDataURL('image/jpeg', -10) === data;
        @assert canvas.toDataURL('image/jpeg', 1.01) === data;
        @assert canvas.toDataURL('image/jpeg', -0.01) === data;

        @assert canvas.toDataURL('image/jpeg', 1).length >= canvas.toDataURL('image/jpeg', 0.9).length;
        @assert canvas.toDataURL('image/jpeg', 0).length <= canvas.toDataURL('image/jpeg', 0.1).length;
    }


# TODO: work out what security exception should be thrown
# TODO: test same-origin vs same-host

- name: security.drawImage.image
  desc: drawImage of different-origin image makes the canvas origin-unclean
  mozilla: { disabled } # relies on external resources
  testing:
    - security.drawImage.image
    - security.toDataURL
    - security.getImageData
  scripts:
    - /common/get-host-info.sub.js
    - data:text/javascript,addCrossOriginYellowImage()
  code: |
    ctx.drawImage(document.getElementById('yellow.png'), 0, 0);
    @assert throws SECURITY_ERR canvas.toDataURL();
    @assert throws SECURITY_ERR ctx.getImageData(0, 0, 1, 1);

- name: security.drawImage.canvas
  desc: drawImage of unclean canvas makes the canvas origin-unclean
  mozilla: { disabled } # relies on external resources
  testing:
    - security.drawImage.canvas
  scripts:
    - /common/get-host-info.sub.js
    - data:text/javascript,addCrossOriginYellowImage()
  code: |
    var canvas2 = document.createElement('canvas');
    canvas2.width = 100;
    canvas2.height = 50;
    var ctx2 = canvas2.getContext('2d');
    ctx2.drawImage(document.getElementById('yellow.png'), 0, 0);
    ctx.drawImage(canvas2, 0, 0);
    @assert throws SECURITY_ERR canvas.toDataURL();
    @assert throws SECURITY_ERR ctx.getImageData(0, 0, 1, 1);

- name: security.pattern.create
  desc: Creating an unclean pattern does not make the canvas origin-unclean
  mozilla: { disabled } # relies on external resources
  testing:
    - security.start
  scripts:
    - /common/get-host-info.sub.js
    - data:text/javascript,addCrossOriginYellowImage()
  code: |
    var p = ctx.createPattern(document.getElementById('yellow.png'), 'repeat');
    canvas.toDataURL();
    ctx.getImageData(0, 0, 1, 1);
    @assert true; // okay if there was no exception

- name: security.pattern.cross
  desc: Using an unclean pattern makes the target canvas origin-unclean, not the pattern canvas
  mozilla: { disabled } # relies on external resources
  testing:
    - security.start
  scripts:
    - /common/get-host-info.sub.js
    - data:text/javascript,addCrossOriginYellowImage()
  code: |
    var canvas2 = document.createElement('canvas');
    canvas2.width = 100;
    canvas2.height = 50;
    var ctx2 = canvas2.getContext('2d');
    var p = ctx2.createPattern(document.getElementById('yellow.png'), 'repeat');
    ctx.fillStyle = p;
    ctx.fillRect(0, 0, 100, 50);
    @assert throws SECURITY_ERR canvas.toDataURL();
    @assert throws SECURITY_ERR ctx.getImageData(0, 0, 1, 1);
    canvas2.toDataURL();
    ctx2.getImageData(0, 0, 1, 1);

- name: security.pattern.canvas.timing
  desc: Pattern safety depends on whether the source was origin-clean, not on whether it still is clean
  notes: Disagrees with spec on "is" vs "was"
  mozilla: { disabled } # relies on external resources
  testing:
    - security.start
    - security.fillStyle.canvas
  scripts:
    - /common/get-host-info.sub.js
    - data:text/javascript,addCrossOriginYellowImage()
  code: |
    var canvas2 = document.createElement('canvas');
    canvas2.width = 100;
    canvas2.height = 50;
    var ctx2 = canvas2.getContext('2d');
    ctx2.fillStyle = '#0f0';
    ctx2.fillRect(0, 0, 100, 50);
    var p = ctx.createPattern(canvas2, 'repeat');
    ctx2.drawImage(document.getElementById('yellow.png'), 0, 0); // make canvas2 origin-unclean
    ctx.fillStyle = p;
    ctx.fillRect(0, 0, 100, 50);
    canvas.toDataURL();
    ctx.getImageData(0, 0, 1, 1);
    @assert true; // okay if there was no exception

- name: security.pattern.image.fillStyle
  desc: Setting fillStyle to a pattern of a different-origin image makes the canvas origin-unclean
  mozilla: { disabled } # relies on external resources
  testing:
    - security.fillStyle.image
  scripts:
    - /common/get-host-info.sub.js
    - data:text/javascript,addCrossOriginYellowImage()
  code: |
    var p = ctx.createPattern(document.getElementById('yellow.png'), 'repeat');
    ctx.fillStyle = p;
    ctx.fillStyle = 'red';
    @assert throws SECURITY_ERR canvas.toDataURL();
    @assert throws SECURITY_ERR ctx.getImageData(0, 0, 1, 1);

- name: security.pattern.canvas.fillStyle
  desc: Setting fillStyle to a pattern of an unclean canvas makes the canvas origin-unclean
  mozilla: { bug: 354127, disabled } # relies on external resources
  testing:
    - security.fillStyle.canvas
  scripts:
    - /common/get-host-info.sub.js
    - data:text/javascript,addCrossOriginYellowImage()
  code: |
    var canvas2 = document.createElement('canvas');
    canvas2.width = 100;
    canvas2.height = 50;
    var ctx2 = canvas2.getContext('2d');
    ctx2.drawImage(document.getElementById('yellow.png'), 0, 0);
    var p = ctx.createPattern(canvas2, 'repeat');
    ctx.fillStyle = p;
    ctx.fillStyle = 'red';
    @assert throws SECURITY_ERR canvas.toDataURL();
    @assert throws SECURITY_ERR ctx.getImageData(0, 0, 1, 1);

- name: security.pattern.image.strokeStyle
  desc: Setting strokeStyle to a pattern of a different-origin image makes the canvas origin-unclean
  mozilla: { disabled } # relies on external resources
  testing:
    - security.strokeStyle.image
  scripts:
    - /common/get-host-info.sub.js
    - data:text/javascript,addCrossOriginYellowImage()
  code: |
    var p = ctx.createPattern(document.getElementById('yellow.png'), 'repeat');
    ctx.strokeStyle = p;
    ctx.strokeStyle = 'red';
    @assert throws SECURITY_ERR canvas.toDataURL();
    @assert throws SECURITY_ERR ctx.getImageData(0, 0, 1, 1);

- name: security.pattern.canvas.strokeStyle
  desc: Setting strokeStyle to a pattern of an unclean canvas makes the canvas origin-unclean
  mozilla: { bug: 354127, disabled } # relies on external resources
  testing:
    - security.strokeStyle.canvas
  scripts:
    - /common/get-host-info.sub.js
    - data:text/javascript,addCrossOriginYellowImage()
  code: |
    var canvas2 = document.createElement('canvas');
    canvas2.width = 100;
    canvas2.height = 50;
    var ctx2 = canvas2.getContext('2d');
    ctx2.drawImage(document.getElementById('yellow.png'), 0, 0);
    var p = ctx.createPattern(canvas2, 'repeat');
    ctx.strokeStyle = p;
    ctx.strokeStyle = 'red';
    @assert throws SECURITY_ERR canvas.toDataURL();
    @assert throws SECURITY_ERR ctx.getImageData(0, 0, 1, 1);

- name: security.dataURI
  desc: 'data: URIs do not count as different-origin, and do not taint the canvas'
  mozilla: { disabled, bug: 417836 } # can't do "todo" so just disable it
  code: |
    ctx.fillStyle = '#0f0';
    ctx.fillRect(0, 0, 100, 50);
    var data = canvas.toDataURL();
    ctx.fillStyle = '#f00';
    ctx.fillRect(0, 0, 100, 50);
    var img = new Image();
    deferTest();
    img.onload = t.step_func_done(function ()
    {
        ctx.drawImage(img, 0, 0);
        canvas.toDataURL(); // should be permitted
        @assert pixel 50,25 == 0,255,0,255;
    });
    img.src = data;
  expected: green

- name: security.reset
  desc: Resetting the canvas state does not reset the origin-clean flag
  mozilla: { disabled } # relies on external resources
  testing:
    - initial.reset
  scripts:
    - /common/get-host-info.sub.js
    - data:text/javascript,addCrossOriginYellowImage()
  code: |
    canvas.width = 50;
    ctx.drawImage(document.getElementById('yellow.png'), 0, 0);
    @assert throws SECURITY_ERR canvas.toDataURL();
    canvas.width = 100;
    @assert throws SECURITY_ERR canvas.toDataURL();