- name: 2d.text.font.parse.basic
  code: |
    ctx.font = '20px serif';
    @assert ctx.font === '20px serif';

    ctx.font = '20PX   SERIF';
    @assert ctx.font === '20px serif'; @moz-todo

- name: 2d.text.font.parse.tiny
  code: |
    ctx.font = '1px sans-serif';
    @assert ctx.font === '1px sans-serif';

- name: 2d.text.font.parse.complex
  code: |
    ctx.font = 'small-caps italic 400 12px/2 Unknown Font, sans-serif';
    @assert ['italic small-caps 12px "Unknown Font", sans-serif', 'italic small-caps 12px Unknown Font, sans-serif'].includes(ctx.font);

- name: 2d.text.font.parse.complex2
  code: |
    ctx.font = 'small-caps italic 400 12px/2 "Unknown Font #2", sans-serif';
    @assert ctx.font === 'italic small-caps 12px "Unknown Font #2", sans-serif';

- name: 2d.text.font.parse.family
  code: |
    ctx.font = '20px cursive,fantasy,monospace,sans-serif,serif,UnquotedFont,"QuotedFont\\\\\\","';
    @assert ctx.font === '20px cursive, fantasy, monospace, sans-serif, serif, UnquotedFont, "QuotedFont\\\\\\","';

  # TODO:
  #   2d.text.font.parse.size.absolute
  #     xx-small x-small small medium large x-large xx-large
  #   2d.text.font.parse.size.relative
  #     smaller larger
  #   2d.text.font.parse.size.length.relative
  #     em ex px
  #   2d.text.font.parse.size.length.absolute
  #     in cm mm pt pc

- name: 2d.text.font.parse.size.percentage
  canvas: 'style="font-size: 144px"'
  canvas_types: ['HtmlCanvas']
  code: |
    ctx.font = '50% serif';
    @assert ctx.font === '72px serif'; @moz-todo
    canvas.setAttribute('style', 'font-size: 100px');
    @assert ctx.font === '72px serif'; @moz-todo

- name: 2d.text.font.parse.size.percentage.default
  canvas_types: ['HtmlCanvas']
  code: |
    var canvas2 = document.createElement('canvas');
    var ctx2 = canvas2.getContext('2d');
    ctx2.font = '1000% serif';
    @assert ctx2.font === '100px serif'; @moz-todo

- name: 2d.text.font.parse.system
  desc: System fonts must be computed to explicit values
  code: |
    ctx.font = 'message-box';
    @assert ctx.font !== 'message-box';

- name: 2d.text.font.parse.invalid
  code: |
    ctx.font = '20px serif';
    @assert ctx.font === '20px serif';

    ctx.font = '20px serif';
    ctx.font = '';
    @assert ctx.font === '20px serif';

    ctx.font = '20px serif';
    ctx.font = 'bogus';
    @assert ctx.font === '20px serif';

    ctx.font = '20px serif';
    ctx.font = 'inherit';
    @assert ctx.font === '20px serif';

    ctx.font = '20px serif';
    ctx.font = '10px {bogus}';
    @assert ctx.font === '20px serif';

    ctx.font = '20px serif';
    ctx.font = '10px initial';
    @assert ctx.font === '20px serif'; @moz-todo

    ctx.font = '20px serif';
    ctx.font = '10px default';
    @assert ctx.font === '20px serif'; @moz-todo

    ctx.font = '20px serif';
    ctx.font = '10px inherit';
    @assert ctx.font === '20px serif';

    ctx.font = '20px serif';
    ctx.font = '10px revert';
    @assert ctx.font === '20px serif';

    ctx.font = '20px serif';
    ctx.font = 'var(--x)';
    @assert ctx.font === '20px serif';

    ctx.font = '20px serif';
    ctx.font = 'var(--x, 10px serif)';
    @assert ctx.font === '20px serif';

    ctx.font = '20px serif';
    ctx.font = '1em serif; background: green; margin: 10px';
    @assert ctx.font === '20px serif';

- name: 2d.text.font.default
  code: |
    @assert ctx.font === '10px sans-serif';

- name: 2d.text.font.relative_size
  canvas_types: ['HtmlCanvas']
  code: |
    var canvas2 = document.createElement('canvas');
    var ctx2 = canvas2.getContext('2d');
    ctx2.font = '1em sans-serif';
    @assert ctx2.font === '10px sans-serif';

- name: 2d.text.font.relative_size
  canvas_types: ['OffscreenCanvas', 'Worker']
  code: |
    ctx.font = '1em sans-serif';
    @assert ctx.font === '10px sans-serif';

- name: 2d.text.font.weight
  code: |
    ctx.font = 'italic 400 12px serif';
    @assert ctx.font === 'italic 12px serif';

    ctx.font = 'italic 300 12px serif';
    @assert ctx.font === 'italic 300 12px serif';

- name: 2d.text.align.valid
  code: |
    ctx.textAlign = 'start';
    @assert ctx.textAlign === 'start';

    ctx.textAlign = 'end';
    @assert ctx.textAlign === 'end';

    ctx.textAlign = 'left';
    @assert ctx.textAlign === 'left';

    ctx.textAlign = 'right';
    @assert ctx.textAlign === 'right';

    ctx.textAlign = 'center';
    @assert ctx.textAlign === 'center';

- name: 2d.text.align.invalid
  code: |
    ctx.textAlign = 'start';
    ctx.textAlign = 'bogus';
    @assert ctx.textAlign === 'start';

    ctx.textAlign = 'start';
    ctx.textAlign = 'END';
    @assert ctx.textAlign === 'start';

    ctx.textAlign = 'start';
    ctx.textAlign = 'end ';
    @assert ctx.textAlign === 'start';

    ctx.textAlign = 'start';
    ctx.textAlign = 'end\0';
    @assert ctx.textAlign === 'start';

- name: 2d.text.align.default
  code: |
    @assert ctx.textAlign === 'start';

- name: 2d.text.baseline.valid
  code: |
    ctx.textBaseline = 'top';
    @assert ctx.textBaseline === 'top';

    ctx.textBaseline = 'hanging';
    @assert ctx.textBaseline === 'hanging';

    ctx.textBaseline = 'middle';
    @assert ctx.textBaseline === 'middle';

    ctx.textBaseline = 'alphabetic';
    @assert ctx.textBaseline === 'alphabetic';

    ctx.textBaseline = 'ideographic';
    @assert ctx.textBaseline === 'ideographic';

    ctx.textBaseline = 'bottom';
    @assert ctx.textBaseline === 'bottom';

- name: 2d.text.baseline.invalid
  code: |
    ctx.textBaseline = 'top';
    ctx.textBaseline = 'bogus';
    @assert ctx.textBaseline === 'top';

    ctx.textBaseline = 'top';
    ctx.textBaseline = 'MIDDLE';
    @assert ctx.textBaseline === 'top';

    ctx.textBaseline = 'top';
    ctx.textBaseline = 'middle ';
    @assert ctx.textBaseline === 'top';

    ctx.textBaseline = 'top';
    ctx.textBaseline = 'middle\0';
    @assert ctx.textBaseline === 'top';

- name: 2d.text.baseline.default
  code: |
    @assert ctx.textBaseline === 'alphabetic';

- name: 2d.text.draw.baseline.top
  desc: textBaseline top is the top of the em square (not the bounding box)
  test_type: promise
  fonts:
  - CanvasTest
  code: |
    {{ load_font }}
    ctx.font = '50px CanvasTest';
    ctx.fillStyle = '#f00';
    ctx.fillRect(0, 0, 100, 50);
    ctx.fillStyle = '#0f0';
    ctx.textBaseline = 'top';
    ctx.fillText('CC', 0, 0);
    @assert pixel 5,5 ==~ 0,255,0,255;
    @assert pixel 95,5 ==~ 0,255,0,255;
    @assert pixel 25,25 ==~ 0,255,0,255;
    @assert pixel 75,25 ==~ 0,255,0,255;
    @assert pixel 5,45 ==~ 0,255,0,255;
    @assert pixel 95,45 ==~ 0,255,0,255;
  expected: green
  variants: &load-font-variant-definition
  - HtmlCanvas:
      append_variants_to_name: false
      canvas_types: ['HtmlCanvas']
      load_font: |-
        await document.fonts.ready;
    OffscreenCanvas:
      append_variants_to_name: false
      canvas_types: ['OffscreenCanvas', 'Worker']
      load_font: |-
        var f = new FontFace("{{ fonts[0] }}", "url('/fonts/{{ fonts[0] }}.ttf')");
        f.load();
        {% set root = 'self' if canvas_type == 'Worker' else 'document' %}
        {{ root }}.fonts.add(f);
        await {{ root }}.fonts.ready;

- name: 2d.text.draw.baseline.bottom
  desc: textBaseline bottom is the bottom of the em square (not the bounding box)
  test_type: promise
  fonts:
  - CanvasTest
  code: |
    {{ load_font }}
    ctx.font = '50px CanvasTest';
    ctx.fillStyle = '#f00';
    ctx.fillRect(0, 0, 100, 50);
    ctx.fillStyle = '#0f0';
    ctx.textBaseline = 'bottom';
    ctx.fillText('CC', 0, 50);
    @assert pixel 5,5 ==~ 0,255,0,255;
    @assert pixel 95,5 ==~ 0,255,0,255;
    @assert pixel 25,25 ==~ 0,255,0,255;
    @assert pixel 75,25 ==~ 0,255,0,255;
    @assert pixel 5,45 ==~ 0,255,0,255;
    @assert pixel 95,45 ==~ 0,255,0,255;
  expected: green
  variants: *load-font-variant-definition

- name: 2d.text.draw.baseline.middle
  desc: textBaseline middle is the middle of the em square (not the bounding box)
  test_type: promise
  fonts:
  - CanvasTest
  code: |
    {{ load_font }}
    ctx.font = '50px CanvasTest';
    ctx.fillStyle = '#f00';
    ctx.fillRect(0, 0, 100, 50);
    ctx.fillStyle = '#0f0';
    ctx.textBaseline = 'middle';
    ctx.fillText('CC', 0, 25);
    @assert pixel 5,5 ==~ 0,255,0,255;
    @assert pixel 95,5 ==~ 0,255,0,255;
    @assert pixel 25,25 ==~ 0,255,0,255;
    @assert pixel 75,25 ==~ 0,255,0,255;
    @assert pixel 5,45 ==~ 0,255,0,255;
    @assert pixel 95,45 ==~ 0,255,0,255;
  expected: green
  variants: *load-font-variant-definition

- name: 2d.text.draw.baseline.alphabetic
  test_type: promise
  fonts:
  - CanvasTest
  code: |
    {{ load_font }}
    ctx.font = '50px CanvasTest';
    ctx.fillStyle = '#f00';
    ctx.fillRect(0, 0, 100, 50);
    ctx.fillStyle = '#0f0';
    ctx.textBaseline = 'alphabetic';
    ctx.fillText('CC', 0, 37.5);
    @assert pixel 5,5 ==~ 0,255,0,255;
    @assert pixel 95,5 ==~ 0,255,0,255;
    @assert pixel 25,25 ==~ 0,255,0,255;
    @assert pixel 75,25 ==~ 0,255,0,255;
    @assert pixel 5,45 ==~ 0,255,0,255;
    @assert pixel 95,45 ==~ 0,255,0,255;
  expected: green
  variants: *load-font-variant-definition

- name: 2d.text.draw.baseline.ideographic
  test_type: promise
  fonts:
  - CanvasTest
  code: |
    {{ load_font }}
    ctx.font = '50px CanvasTest';
    ctx.fillStyle = '#f00';
    ctx.fillRect(0, 0, 100, 50);
    ctx.fillStyle = '#0f0';
    ctx.textBaseline = 'ideographic';
    ctx.fillText('CC', 0, 31.25);
    @assert pixel 5,5 ==~ 0,255,0,255;
    @assert pixel 95,5 ==~ 0,255,0,255;
    @assert pixel 25,25 ==~ 0,255,0,255;
    @assert pixel 75,25 ==~ 0,255,0,255;
    @assert pixel 5,45 ==~ 0,255,0,255; @moz-todo
    @assert pixel 95,45 ==~ 0,255,0,255; @moz-todo
  expected: green
  variants: *load-font-variant-definition

- name: 2d.text.draw.baseline.hanging
  test_type: promise
  fonts:
  - CanvasTest
  code: |
    {{ load_font }}
    ctx.font = '50px CanvasTest';
    ctx.fillStyle = '#f00';
    ctx.fillRect(0, 0, 100, 50);
    ctx.fillStyle = '#0f0';
    ctx.textBaseline = 'hanging';
    ctx.fillText('CC', 0, 12.5);
    @assert pixel 5,5 ==~ 0,255,0,255; @moz-todo
    @assert pixel 95,5 ==~ 0,255,0,255; @moz-todo
    @assert pixel 25,25 ==~ 0,255,0,255;
    @assert pixel 75,25 ==~ 0,255,0,255;
    @assert pixel 5,45 ==~ 0,255,0,255;
    @assert pixel 95,45 ==~ 0,255,0,255;
  expected: green
  variants: *load-font-variant-definition

- name: 2d.text.draw.space.collapse.space
  desc: Space characters are converted to U+0020, and are NOT collapsed
  test_type: promise
  fonts:
  - CanvasTest
  code: |
    {{ load_font }}
    ctx.font = '50px CanvasTest';
    ctx.fillStyle = '#f00';
    ctx.fillRect(0, 0, 100, 50);
    ctx.fillStyle = '#0f0';
    ctx.fillText('E  EE', 0, 37.5);
    @assert pixel 25,25 ==~ 0,255,0,255;
    @assert pixel 75,25 ==~ 255,0,0,255;
  expected: green
  variants: *load-font-variant-definition

- name: 2d.text.draw.space.collapse.other
  desc: Space characters are converted to U+0020, and are NOT collapsed
  test_type: promise
  fonts:
  - CanvasTest
  code: |
    {{ load_font }}
    ctx.font = '50px CanvasTest';
    ctx.fillStyle = '#f00';
    ctx.fillRect(0, 0, 100, 50);
    ctx.fillStyle = '#0f0';
    ctx.fillText('E \x09\x0a\x0c\x0d  \x09\x0a\x0c\x0dEE', 0, 37.5);
    @assert pixel 25,25 ==~ 0,255,0,255;
    @assert pixel 75,25 ==~ 255,0,0,255;
  expected: green
  variants: *load-font-variant-definition

- name: 2d.text.draw.space.collapse.start
  desc: Space characters at the start of a line are NOT collapsed
  test_type: promise
  fonts:
  - CanvasTest
  code: |
    {{ load_font }}
    ctx.font = '50px CanvasTest';
    ctx.fillStyle = '#f00';
    ctx.fillRect(0, 0, 100, 50);
    ctx.fillStyle = '#0f0';
    ctx.fillText(' EE', 0, 37.5);
    @assert pixel 25,25 ==~ 255,0,0,255; @moz-todo
    @assert pixel 75,25 ==~ 0,255,0,255;
  expected: green
  variants: *load-font-variant-definition

- name: 2d.text.draw.space.collapse.end
  desc: Space characters at the end of a line are NOT collapsed
  test_type: promise
  fonts:
  - CanvasTest
  code: |
    {{ load_font }}
    ctx.font = '50px CanvasTest';
    ctx.fillStyle = '#f00';
    ctx.fillRect(0, 0, 100, 50);
    ctx.fillStyle = '#0f0';
    ctx.textAlign = 'right';
    ctx.fillText('EE ', 100, 37.5);
    @assert pixel 25,25 ==~ 0,255,0,255;
    @assert pixel 75,25 ==~ 255,0,0,255;
  expected: green
  variants: *load-font-variant-definition

- name: 2d.text.measure.width.space
  desc: Space characters are converted to U+0020 and NOT collapsed
  test_type: promise
  fonts:
  - CanvasTest
  code: |
    {{ load_font }}
    ctx.font = '50px CanvasTest';
    @assert ctx.measureText('A B').width === 150;
    @assert ctx.measureText('A  B').width === 200;
    @assert ctx.measureText('A \x09\x0a\x0c\x0d  \x09\x0a\x0c\x0dB').width === 650;
    @assert ctx.measureText('A \x0b B').width >= 200;

    @assert ctx.measureText(' AB').width === 150;
    @assert ctx.measureText('AB ').width === 150;
  variants: *load-font-variant-definition

- name: 2d.text.drawing.style.measure.rtl.text
  desc: Measurement should follow canvas direction instead text direction
  code: |
    metrics = ctx.measureText('اَلْعَرَبِيَّةُ');
    @assert metrics.actualBoundingBoxLeft < metrics.actualBoundingBoxRight;

    metrics = ctx.measureText('hello');
    @assert metrics.actualBoundingBoxLeft < metrics.actualBoundingBoxRight;

- name: 2d.text.drawing.style.measure.textAlign
  desc: Measurement should be related to textAlignment
  code: |
    ctx.textAlign = "right";
    metrics = ctx.measureText('hello');
    @assert metrics.actualBoundingBoxLeft > metrics.actualBoundingBoxRight;

    ctx.textAlign = "left"
    metrics = ctx.measureText('hello');
    @assert metrics.actualBoundingBoxLeft < metrics.actualBoundingBoxRight;

- name: 2d.text.drawing.style.measure.direction
  desc: Measurement should follow text direction
  code: |
    ctx.direction = "ltr";
    metrics = ctx.measureText('hello');
    @assert metrics.actualBoundingBoxLeft < metrics.actualBoundingBoxRight;

    ctx.direction = "rtl";
    metrics = ctx.measureText('hello');
    @assert metrics.actualBoundingBoxLeft > metrics.actualBoundingBoxRight;

- name: 2d.text.draw.fill.basic
  desc: fillText draws filled text
  manual:
  code: |
    ctx.fillStyle = '#000';
    ctx.fillRect(0, 0, 100, 50);
    ctx.fillStyle = '#0f0';
    ctx.strokeStyle = '#f00';
    ctx.font = '35px Arial, sans-serif';
    ctx.fillText('PASS', 5, 35);
  expected: &passfill |
    size 100 50
    cr.set_source_rgb(0, 0, 0)
    cr.rectangle(0, 0, 100, 50)
    cr.fill()
    cr.set_source_rgb(0, 1, 0)
    cr.select_font_face("Arial")
    cr.set_font_size(35)
    cr.translate(5, 35)
    cr.text_path("PASS")
    cr.fill()

- name: 2d.text.draw.fill.unaffected
  desc: fillText does not start a new path or subpath
  code: |
    ctx.fillStyle = '#f00';
    ctx.fillRect(0, 0, 100, 50);

    ctx.moveTo(0, 0);
    ctx.lineTo(100, 0);

    ctx.font = '35px Arial, sans-serif';
    ctx.fillText('FAIL', 5, 35);

    ctx.lineTo(100, 50);
    ctx.lineTo(0, 50);
    ctx.fillStyle = '#0f0';
    ctx.fill();

    @assert pixel 50,25 == 0,255,0,255;
    @assert pixel 5,45 == 0,255,0,255;
  expected: green

- name: 2d.text.draw.fill.rtl
  desc: fillText respects Right-To-Left Override characters
  manual:
  code: |
    ctx.fillStyle = '#000';
    ctx.fillRect(0, 0, 100, 50);
    ctx.fillStyle = '#0f0';
    ctx.strokeStyle = '#f00';
    ctx.font = '35px Arial, sans-serif';
    ctx.fillText('\u202eFAIL \xa0 \xa0 SSAP', 5, 35);
  expected: *passfill

- name: 2d.text.draw.fill.maxWidth.large
  desc: fillText handles maxWidth correctly
  manual:
  code: |
    ctx.fillStyle = '#000';
    ctx.fillRect(0, 0, 100, 50);
    ctx.fillStyle = '#0f0';
    ctx.font = '35px Arial, sans-serif';
    ctx.fillText('PASS', 5, 35, 200);
  expected: *passfill

- name: 2d.text.draw.fill.maxWidth.small
  desc: fillText handles maxWidth correctly
  code: |
    ctx.fillStyle = '#0f0';
    ctx.fillRect(0, 0, 100, 50);
    ctx.fillStyle = '#f00';
    ctx.font = '35px Arial, sans-serif';
    ctx.fillText('fail fail fail fail fail', -100, 35, 90);
    _assertGreen(ctx, 100, 50);
  expected: green

- name: 2d.text.draw.fill.maxWidth.zero
  desc: fillText handles maxWidth correctly
  code: |
    ctx.fillStyle = '#0f0';
    ctx.fillRect(0, 0, 100, 50);
    ctx.fillStyle = '#f00';
    ctx.font = '35px Arial, sans-serif';
    ctx.fillText('fail fail fail fail fail', 5, 35, 0);
    _assertGreen(ctx, 100, 50);
  expected: green

- name: 2d.text.draw.fill.maxWidth.negative
  desc: fillText handles maxWidth correctly
  code: |
    ctx.fillStyle = '#0f0';
    ctx.fillRect(0, 0, 100, 50);
    ctx.fillStyle = '#f00';
    ctx.font = '35px Arial, sans-serif';
    ctx.fillText('fail fail fail fail fail', 5, 35, -1);
    _assertGreen(ctx, 100, 50);
  expected: green

- name: 2d.text.draw.fill.maxWidth.NaN
  desc: fillText handles maxWidth correctly
  code: |
    ctx.fillStyle = '#0f0';
    ctx.fillRect(0, 0, 100, 50);
    ctx.fillStyle = '#f00';
    ctx.font = '35px Arial, sans-serif';
    ctx.fillText('fail fail fail fail fail', 5, 35, NaN);
    _assertGreen(ctx, 100, 50);
  expected: green

- name: 2d.text.draw.stroke.basic
  desc: strokeText draws stroked text
  manual:
  code: |
    ctx.fillStyle = '#000';
    ctx.fillRect(0, 0, 100, 50);
    ctx.strokeStyle = '#0f0';
    ctx.fillStyle = '#f00';
    ctx.lineWidth = 1;
    ctx.font = '35px Arial, sans-serif';
    ctx.strokeText('PASS', 5, 35);
  expected: |
    size 100 50
    cr.set_source_rgb(0, 0, 0)
    cr.rectangle(0, 0, 100, 50)
    cr.fill()
    cr.set_source_rgb(0, 1, 0)
    cr.select_font_face("Arial")
    cr.set_font_size(35)
    cr.set_line_width(1)
    cr.translate(5, 35)
    cr.text_path("PASS")
    cr.stroke()

- name: 2d.text.draw.stroke.unaffected
  desc: strokeText does not start a new path or subpath
  code: |
    ctx.fillStyle = '#f00';
    ctx.fillRect(0, 0, 100, 50);

    ctx.moveTo(0, 0);
    ctx.lineTo(100, 0);

    ctx.font = '35px Arial, sans-serif';
    ctx.strokeStyle = '#f00';
    ctx.strokeText('FAIL', 5, 35);

    ctx.lineTo(100, 50);
    ctx.lineTo(0, 50);
    ctx.fillStyle = '#0f0';
    ctx.fill();

    @assert pixel 50,25 == 0,255,0,255;
    @assert pixel 5,45 == 0,255,0,255;
  expected: green

- name: 2d.text.draw.kern.consistent
  desc: Stroked and filled text should have exactly the same kerning so it overlaps
  manual:
  code: |
    ctx.fillStyle = '#0f0';
    ctx.fillRect(0, 0, 100, 50);
    ctx.fillStyle = '#f00';
    ctx.strokeStyle = '#0f0';
    ctx.lineWidth = 3;
    ctx.font = '20px Arial, sans-serif';
    ctx.fillText('VAVAVAVAVAVAVA', -50, 25);
    ctx.fillText('ToToToToToToTo', -50, 45);
    ctx.strokeText('VAVAVAVAVAVAVA', -50, 25);
    ctx.strokeText('ToToToToToToTo', -50, 45);
  expected: green

# CanvasTest is:
#   A = (0, 0) to (1em, 0.75em)       (above baseline)
#   B = (0, 0) to (1em, -0.25em)      (below baseline)
#   C = (0, -0.25em) to (1em, 0.75em) (the em square) plus some Xs above and below
#   D = (0, -0.25em) to (1em, 0.75em) (the em square) plus some Xs left and right
#   E = (0, -0.25em) to (1em, 0.75em) (the em square)
#   space = empty, 1em wide
#
# At 50px, "E" will fill the canvas vertically
# At 67px, "A" will fill the canvas vertically
#
# Ideographic baseline  is 0.125em above alphabetic
# Mathematical baseline is 0.375em above alphabetic
# Hanging baseline      is 0.500em above alphabetic

- name: 2d.text.draw.fill.maxWidth.fontface
  desc: fillText works on @font-face fonts
  test_type: promise
  fonts:
  - CanvasTest
  code: |
    {{ load_font }}
    ctx.font = '50px CanvasTest';
    ctx.fillStyle = '#0f0';
    ctx.fillRect(0, 0, 100, 50);
    ctx.fillStyle = '#f00';
    ctx.fillText('EEEE', -50, 37.5, 40);
    @assert pixel 5,5 ==~ 0,255,0,255;
    @assert pixel 95,5 ==~ 0,255,0,255;
    @assert pixel 25,25 ==~ 0,255,0,255;
    @assert pixel 75,25 ==~ 0,255,0,255;
  expected: green
  variants: *load-font-variant-definition

- name: 2d.text.draw.fill.maxWidth.bound
  desc: fillText handles maxWidth based on line size, not bounding box size
  test_type: promise
  fonts:
  - CanvasTest
  code: |
    {{ load_font }}
    ctx.font = '50px CanvasTest';
    ctx.fillStyle = '#f00';
    ctx.fillRect(0, 0, 100, 50);
    ctx.fillStyle = '#0f0';
    ctx.fillText('DD', 0, 37.5, 100);
    @assert pixel 5,5 ==~ 0,255,0,255;
    @assert pixel 95,5 ==~ 0,255,0,255;
    @assert pixel 25,25 ==~ 0,255,0,255;
    @assert pixel 75,25 ==~ 0,255,0,255;
  expected: green
  variants: *load-font-variant-definition

- name: 2d.text.draw.fontface
  fonts:
  - CanvasTest
  test_type: promise
  code: |
    {{ load_font }}
    ctx.font = '67px CanvasTest';
    ctx.fillStyle = '#f00';
    ctx.fillRect(0, 0, 100, 50);
    ctx.fillStyle = '#0f0';
    ctx.fillText('AA', 0, 50);
    @assert pixel 5,5 ==~ 0,255,0,255;
    @assert pixel 95,5 ==~ 0,255,0,255;
    @assert pixel 25,25 ==~ 0,255,0,255;
    @assert pixel 75,25 ==~ 0,255,0,255;
  expected: green
  variants: *load-font-variant-definition

- name: 2d.text.draw.fontface.repeat
  desc: Draw with the font immediately, then wait a bit until and draw again. (This
    crashes some version of WebKit.)
  test_type: promise
  fonts:
  - CanvasTest
  font_unused_in_dom: true
  code: |
    {{ load_font }}
    ctx.fillStyle = '#f00';
    ctx.fillRect(0, 0, 100, 50);
    ctx.font = '67px CanvasTest';
    ctx.fillStyle = '#0f0';
    ctx.fillText('AA', 0, 50);

    await new Promise(resolve => t.step_timeout(resolve, 500));
    ctx.fillText('AA', 0, 50);
    _assertPixelApprox(canvas, 5,5, 0,255,0,255, 2);
    _assertPixelApprox(canvas, 95,5, 0,255,0,255, 2);
    _assertPixelApprox(canvas, 25,25, 0,255,0,255, 2);
    _assertPixelApprox(canvas, 75,25, 0,255,0,255, 2);
  expected: green
  variants: *load-font-variant-definition

- name: 2d.text.draw.fontface.notinpage
  desc: '@font-face fonts should work even if they are not used in the page'
  test_type: promise
  fonts:
  - CanvasTest
  font_unused_in_dom: true
  code: |
    {{ load_font }}
    ctx.font = '67px CanvasTest';
    ctx.fillStyle = '#f00';
    ctx.fillRect(0, 0, 100, 50);
    ctx.fillStyle = '#0f0';
    ctx.fillText('AA', 0, 50);
    @assert pixel 5,5 ==~ 0,255,0,255; @moz-todo
    @assert pixel 95,5 ==~ 0,255,0,255; @moz-todo
    @assert pixel 25,25 ==~ 0,255,0,255; @moz-todo
    @assert pixel 75,25 ==~ 0,255,0,255; @moz-todo
  expected: green
  variants: *load-font-variant-definition

- name: 2d.text.draw.align.left
  desc: textAlign left is the left of the first em square (not the bounding box)
  test_type: promise
  fonts:
  - CanvasTest
  code: |
    {{ load_font }}
    ctx.font = '50px CanvasTest';
    ctx.fillStyle = '#f00';
    ctx.fillRect(0, 0, 100, 50);
    ctx.fillStyle = '#0f0';
    ctx.textAlign = 'left';
    ctx.fillText('DD', 0, 37.5);
    @assert pixel 5,5 ==~ 0,255,0,255;
    @assert pixel 95,5 ==~ 0,255,0,255;
    @assert pixel 25,25 ==~ 0,255,0,255;
    @assert pixel 75,25 ==~ 0,255,0,255;
    @assert pixel 5,45 ==~ 0,255,0,255;
    @assert pixel 95,45 ==~ 0,255,0,255;
  expected: green
  variants: *load-font-variant-definition

- name: 2d.text.draw.align.right
  desc: textAlign right is the right of the last em square (not the bounding box)
  test_type: promise
  fonts:
  - CanvasTest
  code: |
    {{ load_font }}
    ctx.font = '50px CanvasTest';
    ctx.fillStyle = '#f00';
    ctx.fillRect(0, 0, 100, 50);
    ctx.fillStyle = '#0f0';
    ctx.textAlign = 'right';
    ctx.fillText('DD', 100, 37.5);
    @assert pixel 5,5 ==~ 0,255,0,255;
    @assert pixel 95,5 ==~ 0,255,0,255;
    @assert pixel 25,25 ==~ 0,255,0,255;
    @assert pixel 75,25 ==~ 0,255,0,255;
    @assert pixel 5,45 ==~ 0,255,0,255;
    @assert pixel 95,45 ==~ 0,255,0,255;
  expected: green
  variants: *load-font-variant-definition

- name: 2d.text.draw.align.start.ltr
  desc: textAlign start with ltr is the left edge
  canvas: dir="ltr"
  test_type: promise
  fonts:
  - CanvasTest
  code: |
    {{ load_font }}
    ctx.font = '50px CanvasTest';
    {% if canvas_type != 'HtmlCanvas' %}
    ctx.direction = 'ltr';
    {% endif %}
    ctx.fillStyle = '#f00';
    ctx.fillRect(0, 0, 100, 50);
    ctx.fillStyle = '#0f0';
    ctx.textAlign = 'start';
    ctx.fillText('DD', 0, 37.5);
    @assert pixel 5,5 ==~ 0,255,0,255;
    @assert pixel 95,5 ==~ 0,255,0,255;
    @assert pixel 25,25 ==~ 0,255,0,255;
    @assert pixel 75,25 ==~ 0,255,0,255;
    @assert pixel 5,45 ==~ 0,255,0,255;
    @assert pixel 95,45 ==~ 0,255,0,255;
  expected: green
  variants: *load-font-variant-definition

- name: 2d.text.draw.align.start.rtl
  desc: textAlign start with rtl is the right edge
  canvas: dir="rtl"
  test_type: promise
  fonts:
  - CanvasTest
  code: |
    {{ load_font }}
    ctx.font = '50px CanvasTest';
    {% if canvas_type != 'HtmlCanvas' %}
    ctx.direction = 'rtl';
    {% endif %}
    ctx.fillStyle = '#f00';
    ctx.fillRect(0, 0, 100, 50);
    ctx.fillStyle = '#0f0';
    ctx.textAlign = 'start';
    ctx.fillText('DD', 100, 37.5);
    @assert pixel 5,5 ==~ 0,255,0,255;
    @assert pixel 95,5 ==~ 0,255,0,255;
    @assert pixel 25,25 ==~ 0,255,0,255;
    @assert pixel 75,25 ==~ 0,255,0,255;
    @assert pixel 5,45 ==~ 0,255,0,255;
    @assert pixel 95,45 ==~ 0,255,0,255;
  expected: green
  variants: *load-font-variant-definition

- name: 2d.text.draw.align.end.ltr
  desc: textAlign end with ltr is the right edge
  test_type: promise
  canvas: dir="ltr"
  fonts:
  - CanvasTest
  code: |
    {{ load_font }}
    ctx.font = '50px CanvasTest';
    {% if canvas_type != 'HtmlCanvas' %}
    ctx.direction = 'ltr';
    {% endif %}
    ctx.fillStyle = '#f00';
    ctx.fillRect(0, 0, 100, 50);
    ctx.fillStyle = '#0f0';
    ctx.textAlign = 'end';
    ctx.fillText('DD', 100, 37.5);
    @assert pixel 5,5 ==~ 0,255,0,255;
    @assert pixel 95,5 ==~ 0,255,0,255;
    @assert pixel 25,25 ==~ 0,255,0,255;
    @assert pixel 75,25 ==~ 0,255,0,255;
    @assert pixel 5,45 ==~ 0,255,0,255;
    @assert pixel 95,45 ==~ 0,255,0,255;
  expected: green
  variants: *load-font-variant-definition

- name: 2d.text.draw.align.end.rtl
  desc: textAlign end with rtl is the left edge
  canvas: dir="rtl"
  test_type: promise
  fonts:
  - CanvasTest
  code: |
    {{ load_font }}
    ctx.font = '50px CanvasTest';
    {% if canvas_type != 'HtmlCanvas' %}
    ctx.direction = 'rtl';
    {% endif %}
    ctx.fillStyle = '#f00';
    ctx.fillRect(0, 0, 100, 50);
    ctx.fillStyle = '#0f0';
    ctx.textAlign = 'end';
    ctx.fillText('DD', 0, 37.5);
    @assert pixel 5,5 ==~ 0,255,0,255;
    @assert pixel 95,5 ==~ 0,255,0,255;
    @assert pixel 25,25 ==~ 0,255,0,255;
    @assert pixel 75,25 ==~ 0,255,0,255;
    @assert pixel 5,45 ==~ 0,255,0,255;
    @assert pixel 95,45 ==~ 0,255,0,255;
  expected: green
  variants: *load-font-variant-definition

- name: 2d.text.draw.align.center
  desc: textAlign center is the center of the em squares (not the bounding box)
  test_type: promise
  fonts:
  - CanvasTest
  code: |
    {{ load_font }}
    ctx.font = '50px CanvasTest';
    ctx.fillStyle = '#f00';
    ctx.fillRect(0, 0, 100, 50);
    ctx.fillStyle = '#0f0';
    ctx.textAlign = 'center';
    ctx.fillText('DD', 50, 37.5);
    @assert pixel 5,5 ==~ 0,255,0,255;
    @assert pixel 95,5 ==~ 0,255,0,255;
    @assert pixel 25,25 ==~ 0,255,0,255;
    @assert pixel 75,25 ==~ 0,255,0,255;
    @assert pixel 5,45 ==~ 0,255,0,255;
    @assert pixel 95,45 ==~ 0,255,0,255;
  expected: green
  variants: *load-font-variant-definition


- name: 2d.text.draw.space.basic
  desc: U+0020 is rendered the correct size (1em wide)
  test_type: promise
  fonts:
  - CanvasTest
  code: |
    {{ load_font }}
    ctx.font = '50px CanvasTest';
    ctx.fillStyle = '#f00';
    ctx.fillRect(0, 0, 100, 50);
    ctx.fillStyle = '#0f0';
    ctx.fillText('E EE', -100, 37.5);
    @assert pixel 25,25 ==~ 0,255,0,255;
    @assert pixel 75,25 ==~ 0,255,0,255;
  expected: green
  variants: *load-font-variant-definition

- name: 2d.text.draw.space.collapse.nonspace
  desc: Non-space characters are not converted to U+0020 and collapsed
  test_type: promise
  fonts:
  - CanvasTest
  code: |
    {{ load_font }}
    ctx.font = '50px CanvasTest';
    ctx.fillStyle = '#f00';
    ctx.fillRect(0, 0, 100, 50);
    ctx.fillStyle = '#0f0';
    ctx.fillText('E\x0b EE', -150, 37.5);
    @assert pixel 25,25 ==~ 0,255,0,255;
    @assert pixel 75,25 ==~ 0,255,0,255;
  expected: green
  variants: *load-font-variant-definition

- name: 2d.text.measure.width.basic
  desc: The width of character is same as font used
  test_type: promise
  fonts:
  - CanvasTest
  code: |
    {{ load_font }}
    ctx.font = '50px CanvasTest';
    @assert ctx.measureText('A').width === 50;
    @assert ctx.measureText('AA').width === 100;
    @assert ctx.measureText('ABCD').width === 200;

    ctx.font = '100px CanvasTest';
    @assert ctx.measureText('A').width === 100;
  variants: *load-font-variant-definition

- name: 2d.text.measure.width.empty
  desc: The empty string has zero width
  test_type: promise
  fonts:
  - CanvasTest
  code: |
    {{ load_font }}
    ctx.font = '50px CanvasTest';
    @assert ctx.measureText("").width === 0;
  variants: *load-font-variant-definition

- name: 2d.text.measure.advances
  desc: Testing width advances
  test_type: promise
  fonts:
  - CanvasTest
  code: |
    {{ load_font }}
    ctx.font = '50px CanvasTest';
    ctx.direction = 'ltr';
    ctx.align = 'left'
    // Some platforms may return '-0'.
    @assert Math.abs(ctx.measureText('Hello').advances[0]) === 0;
    // Different platforms may render text slightly different.
    @assert ctx.measureText('Hello').advances[1] >= 36;
    @assert ctx.measureText('Hello').advances[2] >= 58;
    @assert ctx.measureText('Hello').advances[3] >= 70;
    @assert ctx.measureText('Hello').advances[4] >= 80;

    var tm = ctx.measureText('Hello');
    @assert ctx.measureText('Hello').advances[0] === tm.advances[0];
    @assert ctx.measureText('Hello').advances[1] === tm.advances[1];
    @assert ctx.measureText('Hello').advances[2] === tm.advances[2];
    @assert ctx.measureText('Hello').advances[3] === tm.advances[3];
    @assert ctx.measureText('Hello').advances[4] === tm.advances[4];
  variants: *load-font-variant-definition

- name: 2d.text.measure.actualBoundingBox
  desc: Testing actualBoundingBox
  test_type: promise
  fonts:
  - CanvasTest
  code: |
    {{ load_font }}
    ctx.font = '50px CanvasTest';
    ctx.direction = 'ltr';
    ctx.align = 'left'
    ctx.baseline = 'alphabetic'
    // Different platforms may render text slightly different.
    // Values that are nominally expected to be zero might actually vary by a
    // pixel or so if the UA accounts for antialiasing at glyph edges, so we
    // allow a slight deviation.
    @assert Math.abs(ctx.measureText('A').actualBoundingBoxLeft) <= 1;
    @assert ctx.measureText('A').actualBoundingBoxRight >= 50;
    @assert ctx.measureText('A').actualBoundingBoxAscent >= 35;
    @assert Math.abs(ctx.measureText('A').actualBoundingBoxDescent) <= 1;

    @assert ctx.measureText('D').actualBoundingBoxLeft >= 48;
    @assert ctx.measureText('D').actualBoundingBoxLeft <= 52;
    @assert ctx.measureText('D').actualBoundingBoxRight >= 75;
    @assert ctx.measureText('D').actualBoundingBoxRight <= 80;
    @assert ctx.measureText('D').actualBoundingBoxAscent >= 35;
    @assert ctx.measureText('D').actualBoundingBoxAscent <= 40;
    @assert ctx.measureText('D').actualBoundingBoxDescent >= 12;
    @assert ctx.measureText('D').actualBoundingBoxDescent <= 15;

    @assert Math.abs(ctx.measureText('ABCD').actualBoundingBoxLeft) <= 1;
    @assert ctx.measureText('ABCD').actualBoundingBoxRight >= 200;
    @assert ctx.measureText('ABCD').actualBoundingBoxAscent >= 85;
    @assert ctx.measureText('ABCD').actualBoundingBoxDescent >= 37;
  variants: *load-font-variant-definition

- name: 2d.text.measure.fontBoundingBox
  desc: Testing fontBoundingBox measurements
  test_type: promise
  fonts:
  - CanvasTest
  code: |
    {{ load_font }}
    ctx.font = '40px CanvasTest';
    ctx.direction = 'ltr';
    ctx.align = 'left'
    @assert ctx.measureText('A').fontBoundingBoxAscent === 30;
    @assert ctx.measureText('A').fontBoundingBoxDescent === 10;

    @assert ctx.measureText('ABCD').fontBoundingBoxAscent === 30;
    @assert ctx.measureText('ABCD').fontBoundingBoxDescent === 10;
  variants: *load-font-variant-definition

- name: 2d.text.measure.fontBoundingBox.ahem
  desc: Testing fontBoundingBox for font ahem
  test_type: promise
  fonts:
  - Ahem
  code: |
    {{ load_font }}
    ctx.font = '50px Ahem';
    ctx.direction = 'ltr';
    ctx.align = 'left'
    @assert ctx.measureText('A').fontBoundingBoxAscent === 40;
    @assert ctx.measureText('A').fontBoundingBoxDescent === 10;
    @assert ctx.measureText('ABCD').fontBoundingBoxAscent === 40;
    @assert ctx.measureText('ABCD').fontBoundingBoxDescent === 10;
  variants: *load-font-variant-definition

- name: 2d.text.measure.fontBoundingBox-reduced-ascent
  desc: Testing fontBoundingBox for OffscreenCanvas with reduced ascent metric
  test_type: promise
  fonts:
  - CanvasTest-ascent256
  code: |
    {{ load_font }}
    ctx.font = '40px CanvasTest-ascent256';
    ctx.direction = 'ltr';
    ctx.align = 'left'
    @assert ctx.measureText('A').fontBoundingBoxAscent === 10;
    @assert ctx.measureText('A').fontBoundingBoxDescent === 10;

    @assert ctx.measureText('ABCD').fontBoundingBoxAscent === 10;
    @assert ctx.measureText('ABCD').fontBoundingBoxDescent === 10;
  variants: *load-font-variant-definition

- name: 2d.text.measure.fontBoundingBox-zero-descent
  desc: Testing fontBoundingBox for OffscreenCanvas with zero descent metric
  test_type: promise
  fonts:
  - CanvasTest-descent0
  code: |
    {{ load_font }}
    ctx.font = '40px CanvasTest-descent0';
    ctx.direction = 'ltr';
    ctx.align = 'left'
    @assert ctx.measureText('A').fontBoundingBoxAscent === 30;
    @assert ctx.measureText('A').fontBoundingBoxDescent === 0;

    @assert ctx.measureText('ABCD').fontBoundingBoxAscent === 30;
    @assert ctx.measureText('ABCD').fontBoundingBoxDescent === 0;
  variants: *load-font-variant-definition

- name: 2d.text.measure.emHeights
  desc: Testing emHeights
  test_type: promise
  fonts:
  - CanvasTest
  code: |
    {{ load_font }}
    ctx.font = '40px CanvasTest';
    ctx.direction = 'ltr';
    ctx.align = 'left'
    @assert ctx.measureText('A').emHeightAscent === 30;
    @assert ctx.measureText('A').emHeightDescent === 10;
    @assert ctx.measureText('A').emHeightDescent + ctx.measureText('A').emHeightAscent === 40;

    @assert ctx.measureText('ABCD').emHeightAscent === 30;
    @assert ctx.measureText('ABCD').emHeightDescent === 10;
    @assert ctx.measureText('ABCD').emHeightDescent + ctx.measureText('ABCD').emHeightAscent === 40;
  variants: *load-font-variant-definition

- name: 2d.text.measure.emHeights-low-ascent
  desc: Testing emHeights with reduced ascent metric
  test_type: promise
  fonts:
  - CanvasTest-ascent256
  code: |
    {{ load_font }}
    ctx.font = '40px CanvasTest-ascent256';
    ctx.direction = 'ltr';
    ctx.align = 'left'
    @assert ctx.measureText('A').emHeightAscent === 20;
    @assert ctx.measureText('A').emHeightDescent === 20;
    @assert ctx.measureText('A').emHeightDescent + ctx.measureText('A').emHeightAscent === 40;

    @assert ctx.measureText('ABCD').emHeightAscent === 20;
    @assert ctx.measureText('ABCD').emHeightDescent === 20;
    @assert ctx.measureText('ABCD').emHeightDescent + ctx.measureText('ABCD').emHeightAscent === 40;
  variants: *load-font-variant-definition

- name: 2d.text.measure.emHeights-zero-descent
  desc: Testing emHeights with zero descent metric
  test_type: promise
  fonts:
  - CanvasTest-descent0
  code: |
    {{ load_font }}
    ctx.font = '40px CanvasTest-descent0';
    ctx.direction = 'ltr';
    ctx.align = 'left'
    @assert ctx.measureText('A').emHeightAscent === 40;
    @assert ctx.measureText('A').emHeightDescent === 0;
    @assert ctx.measureText('A').emHeightDescent + ctx.measureText('A').emHeightAscent === 40;

    @assert ctx.measureText('ABCD').emHeightAscent === 40;
    @assert ctx.measureText('ABCD').emHeightDescent === 0;
    @assert ctx.measureText('ABCD').emHeightDescent + ctx.measureText('ABCD').emHeightAscent === 40;
  variants: *load-font-variant-definition

- name: 2d.text.measure.baselines
  desc: Testing baselines
  test_type: promise
  fonts:
  - CanvasTest
  code: |
    {{ load_font }}
    ctx.font = '50px CanvasTest';
    ctx.direction = 'ltr';
    ctx.align = 'left'
    @assert Math.abs(ctx.measureText('A').alphabeticBaseline) === 0;
    @assert ctx.measureText('A').ideographicBaseline === 6.25;
    @assert ctx.measureText('A').hangingBaseline === 25;

    @assert Math.abs(ctx.measureText('ABCD').alphabeticBaseline) === 0;
    @assert ctx.measureText('ABCD').ideographicBaseline === 6.25;
    @assert ctx.measureText('ABCD').hangingBaseline === 25;
  variants: *load-font-variant-definition

- name: 2d.text.drawing.style.absolute.spacing
  desc: Testing letter spacing and word spacing with absolute length
  code: |
    @assert ctx.letterSpacing === '0px';
    @assert ctx.wordSpacing === '0px';

    ctx.letterSpacing = '3px';
    @assert ctx.letterSpacing === '3px';
    @assert ctx.wordSpacing === '0px';

    ctx.wordSpacing = '5px';
    @assert ctx.letterSpacing === '3px';
    @assert ctx.wordSpacing === '5px';

    ctx.letterSpacing = '-1px';
    ctx.wordSpacing = '-1px';
    @assert ctx.letterSpacing === '-1px';
    @assert ctx.wordSpacing === '-1px';

    ctx.letterSpacing = '1PX';
    ctx.wordSpacing = '10PX';
    @assert ctx.letterSpacing === '1px';
    @assert ctx.wordSpacing === '10px';

- name: 2d.text.drawing.style.font-relative.spacing
  desc: Testing letter spacing and word spacing with font-relative length
  code: |
    @assert ctx.letterSpacing === '0px';
    @assert ctx.wordSpacing === '0px';

    ctx.letterSpacing = '1EX';
    ctx.wordSpacing = '1EM';
    @assert ctx.letterSpacing === '1ex';
    @assert ctx.wordSpacing === '1em';

    ctx.letterSpacing = '1ch';
    ctx.wordSpacing = '1ic';
    @assert ctx.letterSpacing === '1ch';
    @assert ctx.wordSpacing === '1ic';

- name: 2d.text.drawing.style.nonfinite.spacing
  desc: Testing letter spacing and word spacing with nonfinite inputs
  code: |
    @assert ctx.letterSpacing === '0px';
    @assert ctx.wordSpacing === '0px';

    function test_word_spacing(value) {
      ctx.wordSpacing = value;
      ctx.letterSpacing = value;
      @assert ctx.wordSpacing === '0px';
      @assert ctx.letterSpacing === '0px';
    }
    @nonfinite test_word_spacing(<0 NaN Infinity -Infinity>);

- name: 2d.text.drawing.style.invalid.spacing
  desc: Testing letter spacing and word spacing with invalid units
  code: |
    @assert ctx.letterSpacing === '0px';
    @assert ctx.wordSpacing === '0px';

    function test_word_spacing(value) {
      ctx.wordSpacing = value;
      ctx.letterSpacing = value;
      @assert ctx.wordSpacing === '0px';
      @assert ctx.letterSpacing === '0px';
    }
    @nonfinite test_word_spacing(< '0s' '1min' '1deg' '1pp' 'initial' 'inherit' 'normal' 'none'>);

- name: 2d.text.drawing.style.letterSpacing.measure
  desc: Testing letter spacing with different length units
  code: |
    @assert ctx.letterSpacing === '0px';
    @assert ctx.wordSpacing === '0px';
    var width_normal = ctx.measureText('Hello World').width;

    function test_letter_spacing(value, difference_spacing, epsilon) {
      ctx.letterSpacing = value;
      @assert ctx.letterSpacing === value;
      @assert ctx.wordSpacing === '0px';
      width_with_letter_spacing = ctx.measureText('Hello World').width;
      assert_approx_equals(width_with_letter_spacing, width_normal + difference_spacing, epsilon, "letter spacing doesn't work.");
    }

    // The first value is the letter Spacing to be set, the second value the
    // change in length of string 'Hello World', note that there are 11 letters
    // in 'hello world', so the length difference is always letterSpacing * 11.
    // and the third value is the acceptable differencee for the length change,
    // note that unit such as 1cm/1mm doesn't map to an exact pixel value.
    test_cases = [['3px', 33, 0.1],
                 ['5px', 55, 0.1],
                 ['-2px', -22, 0.1],
                 ['1em', 110, 0.1],
                 ['-0.1em', -11, 0.1],
                 ['1in', 1056, 0.1],
                 ['-0.1cm', -41.65, 0.2],
                 ['-0.6mm', -24,95, 0.2]]

    for (const test_case of test_cases) {
      test_letter_spacing(test_case[0], test_case[1], test_case[2]);
    }

- name: 2d.text.drawing.style.wordSpacing.measure
  desc: Testing word spacing with different length units
  code: |
    @assert ctx.letterSpacing === '0px';
    @assert ctx.wordSpacing === '0px';
    var width_normal = ctx.measureText('Hello World, again').width;

    function test_word_spacing(value, difference_spacing, epsilon) {
      ctx.wordSpacing = value;
      @assert ctx.letterSpacing === '0px';
      @assert ctx.wordSpacing === value;
      width_with_word_spacing = ctx.measureText('Hello World, again').width;
      assert_approx_equals(width_with_word_spacing, width_normal + difference_spacing, epsilon, "word spacing doesn't work.");
    }

    // The first value is the word Spacing to be set, the second value the
    // change in length of string 'Hello World', note that there are 2 words
    // in 'Hello World, again', so the length difference is always wordSpacing * 2.
    // and the third value is the acceptable differencee for the length change,
    // note that unit such as 1cm/1mm doesn't map to an exact pixel value.
    test_cases = [['3px', 6, 0.1],
                 ['5px', 10, 0.1],
                 ['-2px', -4, 0.1],
                 ['1em', 20, 0.1],
                 ['-0.5em', -10, 0.1],
                 ['1in', 192, 0.1],
                 ['-0.1cm', -7.57, 0.2],
                 ['-0.6mm', -4.54, 0.2]]

    for (const test_case of test_cases) {
      test_word_spacing(test_case[0], test_case[1], test_case[2]);
    }

- name: 2d.text.drawing.style.letterSpacing.change.font
  desc: Set letter spacing and word spacing to font dependent value and verify it works after font change.
  code: |
    @assert ctx.letterSpacing === '0px';
    @assert ctx.wordSpacing === '0px';
    // Get the width for 'Hello World' at default size, 10px.
    var width_normal = ctx.measureText('Hello World').width;

    ctx.letterSpacing = '1em';
    @assert ctx.letterSpacing === '1em';
    // 1em = 10px. Add 10px after each letter in "Hello World",
    // makes it 110px longer.
    var width_with_spacing = ctx.measureText('Hello World').width;
    assert_approx_equals(width_with_spacing, width_normal + 110, 0.1, "letter-spacing error");

    // Changing font to 20px. Without resetting the spacing, 1em letterSpacing
    // is now 20px, so it's suppose to be 220px longer without any letterSpacing set.
    ctx.font = '20px serif';
    width_with_spacing = ctx.measureText('Hello World').width;
    // Now calculate the reference spacing for "Hello World" with no spacing.
    ctx.letterSpacing = '0em';
    width_normal = ctx.measureText('Hello World').width;
    assert_approx_equals(width_with_spacing, width_normal + 220, 0.1, "letter-spacing error after font change");

- name: 2d.text.drawing.style.wordSpacing.change.font
  desc: Set word spacing and word spacing to font dependent value and verify it works after font change.
  code: |
    @assert ctx.letterSpacing === '0px';
    @assert ctx.wordSpacing === '0px';
    // Get the width for 'Hello World, again' at default size, 10px.
    var width_normal = ctx.measureText('Hello World, again').width;

    ctx.wordSpacing = '1em';
    @assert ctx.wordSpacing === '1em';
    // 1em = 10px. Add 10px after each word in "Hello World, again",
    // makes it 20px longer.
    var width_with_spacing = ctx.measureText('Hello World, again').width;
    @assert width_with_spacing === width_normal + 20;

    // Changing font to 20px. Without resetting the spacing, 1em wordSpacing
    // is now 20px, so it's suppose to be 40px longer without any wordSpacing set.
    ctx.font = '20px serif';
    width_with_spacing = ctx.measureText('Hello World, again').width;
    // Now calculate the reference spacing for "Hello World, again" with no spacing.
    ctx.wordSpacing = '0em';
    width_normal = ctx.measureText('Hello World, again').width;
    @assert width_with_spacing === width_normal + 40;

- name: 2d.text.drawing.style.fontKerning
  desc: Testing basic functionalities of fontKerning for canvas
  code: |
    @assert ctx.fontKerning === "auto";
    ctx.fontKerning = "normal";
    @assert ctx.fontKerning === "normal";
    width_normal = ctx.measureText("TAWATAVA").width;
    ctx.fontKerning = "none";
    @assert ctx.fontKerning === "none";
    width_none = ctx.measureText("TAWATAVA").width;
    @assert width_normal < width_none;

- name: 2d.text.drawing.style.fontKerning.with.uppercase
  desc: Testing basic functionalities of fontKerning for canvas
  code: |
    @assert ctx.fontKerning === "auto";
    ctx.fontKerning = "Normal";
    @assert ctx.fontKerning === "auto";
    ctx.fontKerning = "normal";
    @assert ctx.fontKerning === "normal";
    ctx.fontKerning = "Auto";
    @assert ctx.fontKerning === "normal";
    ctx.fontKerning = "auto";
    ctx.fontKerning = "noRmal";
    @assert ctx.fontKerning === "auto";
    ctx.fontKerning = "auto";
    ctx.fontKerning = "NoRMal";
    @assert ctx.fontKerning === "auto";
    ctx.fontKerning = "auto";
    ctx.fontKerning = "NORMAL";
    @assert ctx.fontKerning === "auto";

    ctx.fontKerning = "None";
    @assert ctx.fontKerning === "auto";
    ctx.fontKerning = "none";
    @assert ctx.fontKerning === "none";
    ctx.fontKerning = "Auto";
    @assert ctx.fontKerning === "none";
    ctx.fontKerning = "auto";
    ctx.fontKerning = "nOne";
    @assert ctx.fontKerning === "auto";
    ctx.fontKerning = "auto";
    ctx.fontKerning = "nonE";
    @assert ctx.fontKerning === "auto";
    ctx.fontKerning = "auto";
    ctx.fontKerning = "NONE";
    @assert ctx.fontKerning === "auto";

- name: 2d.text.drawing.style.fontVariant.settings
  desc: Testing basic functionalities of fontVariant for canvas
  code: |
    // Setting fontVariantCaps with lower cases
    @assert ctx.fontVariantCaps === "normal";

    ctx.fontVariantCaps = "normal";
    @assert ctx.fontVariantCaps === "normal";

    ctx.fontVariantCaps = "small-caps";
    @assert ctx.fontVariantCaps === "small-caps";

    ctx.fontVariantCaps = "all-small-caps";
    @assert ctx.fontVariantCaps === "all-small-caps";

    ctx.fontVariantCaps = "petite-caps";
    @assert ctx.fontVariantCaps === "petite-caps";

    ctx.fontVariantCaps = "all-petite-caps";
    @assert ctx.fontVariantCaps === "all-petite-caps";

    ctx.fontVariantCaps = "unicase";
    @assert ctx.fontVariantCaps === "unicase";

    ctx.fontVariantCaps = "titling-caps";
    @assert ctx.fontVariantCaps === "titling-caps";

    // Setting fontVariantCaps with mixed-case values is not valid
    ctx.fontVariantCaps = "nORmal";
    @assert ctx.fontVariantCaps === "titling-caps";

    ctx.fontVariantCaps = "normal";
    @assert ctx.fontVariantCaps === "normal";

    ctx.fontVariantCaps = "smaLL-caps";
    @assert ctx.fontVariantCaps === "normal";

    ctx.fontVariantCaps = "all-small-CAPS";
    @assert ctx.fontVariantCaps === "normal";

    ctx.fontVariantCaps = "pEtitE-caps";
    @assert ctx.fontVariantCaps === "normal";

    ctx.fontVariantCaps = "All-Petite-Caps";
    @assert ctx.fontVariantCaps === "normal";

    ctx.fontVariantCaps = "uNIcase";
    @assert ctx.fontVariantCaps === "normal";

    ctx.fontVariantCaps = "titling-CAPS";
    @assert ctx.fontVariantCaps === "normal";

    // Setting fontVariantCaps with non-existing font variant.
    ctx.fontVariantCaps = "titling-caps";
    ctx.fontVariantCaps = "abcd";
    @assert ctx.fontVariantCaps === "titling-caps";

- name: 2d.text.drawing.style.textRendering.settings
  desc: Testing basic functionalities of textRendering in Canvas
  code: |
    // Setting textRendering with correct case.
    @assert ctx.textRendering === "auto";

    ctx.textRendering = "optimizeSpeed";
    @assert ctx.textRendering === "optimizeSpeed";

    ctx.textRendering = "optimizeLegibility";
    @assert ctx.textRendering === "optimizeLegibility";

    ctx.textRendering = "geometricPrecision";
    @assert ctx.textRendering === "geometricPrecision";

    ctx.textRendering = "auto";
    @assert ctx.textRendering === "auto";

    // Setting textRendering with incorrect case is ignored.
    ctx.textRendering = "OPtimizeSpeed";
    @assert ctx.textRendering === "auto";

    ctx.textRendering = "OPtimizELEgibility";
    @assert ctx.textRendering === "auto";

    ctx.textRendering = "GeometricPrecision";
    @assert ctx.textRendering === "auto";

    ctx.textRendering = "optimizespeed";
    @assert ctx.textRendering === "auto";

    ctx.textRendering = "optimizelegibility";
    @assert ctx.textRendering === "auto";

    ctx.textRendering = "geometricprecision";
    @assert ctx.textRendering === "auto";

    ctx.textRendering = "optimizeLegibility";
    @assert ctx.textRendering === "optimizeLegibility";

    ctx.textRendering = "AUTO";
    @assert ctx.textRendering === "optimizeLegibility";

    ctx.textRendering = "Auto";
    @assert ctx.textRendering === "optimizeLegibility";

    // Setting textRendering with non-existing font variant.
    ctx.textRendering = "abcd";
    @assert ctx.textRendering === "optimizeLegibility";

    ctx.textRendering = "normal";
    @assert ctx.textRendering === "optimizeLegibility";

    ctx.textRendering = "";
    @assert ctx.textRendering === "optimizeLegibility";

    ctx.textRendering = "auto";
    @assert ctx.textRendering === "auto";

- name: 2d.text.drawing.style.fontStretch.settings
  desc: Testing value setting of fontStretch in Canvas
  code: |
    // Setting textRendering with lower cases
    ctx.fontStretch = "ultra-condensed";
    @assert ctx.fontStretch === "ultra-condensed";

    ctx.fontStretch = "extra-condensed";
    @assert ctx.fontStretch === "extra-condensed";

    ctx.fontStretch = "condensed";
    @assert ctx.fontStretch === "condensed";

    ctx.fontStretch = "semi-condensed";
    @assert ctx.fontStretch === "semi-condensed";

    ctx.fontStretch = "normal";
    @assert ctx.fontStretch === "normal";

    ctx.fontStretch = "semi-expanded";
    @assert ctx.fontStretch === "semi-expanded";

    ctx.fontStretch = "expanded";
    @assert ctx.fontStretch === "expanded";

    ctx.fontStretch = "extra-expanded";
    @assert ctx.fontStretch === "extra-expanded";

    ctx.fontStretch = "ultra-expanded";
    @assert ctx.fontStretch === "ultra-expanded";

    // Setting fontStretch with lower cases and upper cases word,
    // these values should be ignored.
    ctx.fontStretch = "ulTra-condensed";
    @assert ctx.fontStretch === "ultra-expanded";

    ctx.fontStretch = "Extra-condensed";
    @assert ctx.fontStretch === "ultra-expanded";

    ctx.fontStretch = "cOndensed";
    @assert ctx.fontStretch === "ultra-expanded";

    ctx.fontStretch = "Semi-Condensed";
    @assert ctx.fontStretch === "ultra-expanded";

    ctx.fontStretch = "normaL";
    @assert ctx.fontStretch === "ultra-expanded";

    ctx.fontStretch = "semi-Expanded";
    @assert ctx.fontStretch === "ultra-expanded";

    ctx.fontStretch = "Expanded";
    @assert ctx.fontStretch === "ultra-expanded";

    ctx.fontStretch = "eXtra-expanded";
    @assert ctx.fontStretch === "ultra-expanded";

    ctx.fontStretch = "abcd";
    @assert ctx.fontStretch === "ultra-expanded";

- name: 2d.text.fontVariantCaps1
  desc: Testing small caps setting in fontVariant
  code: |
    ctx.font = "32px serif";
    ctx.fontVariantCaps = "small-caps";
    // This should render the same as font = "small-caps 32px serif".
    ctx.fillText("Hello World", 20, 100);
  reference: |
    ctx.font = "small-caps 32px serif";
    ctx.fillText("Hello World", 20, 100);

- name: 2d.text.fontVariantCaps2
  desc: Testing small caps setting in fontVariant
  code: |
    ctx.font = "small-caps 32px serif";
    // "mismatch" test, to verify that small-caps does change the rendering.
    smallCaps_len = ctx.measureText("Hello World").width;

    ctx.font = "32px serif";
    normalCaps_len = ctx.measureText("Hello World").width;
    @assert smallCaps_len != normalCaps_len;

- name: 2d.text.fontVariantCaps3
  desc: Testing small caps setting in fontVariant
  code: |
    ctx.font = "32px serif";
    ctx.fontVariantCaps = "all-small-caps";
    // This should render the same as using font = "small-caps 32px serif"
    // with all the underlying text in lowercase.
    ctx.fillText("Hello World", 20, 100);
  reference: |
    ctx.font = "small-caps 32px serif";
    ctx.fillText("hello world", 20, 100);

- name: 2d.text.fontVariantCaps4
  desc: Testing small caps setting in fontVariant
  code: |
    ctx.font = "small-caps 32px serif";
    // fontVariantCaps overrides the small-caps setting from the font attribute
    // (spec unclear, cf. https://github.com/whatwg/html/issues/8103)
    ctx.fontVariantCaps = "all-small-caps";
    ctx.fillText("Hello World", 20, 100);
  reference: |
    ctx.font = "small-caps 32px serif";
    ctx.fillText("hello world", 20, 100);

- name: 2d.text.fontVariantCaps5
  desc: Testing small caps setting in fontVariant
  code: |
    ctx.font = "small-caps 32px serif";
    // fontVariantCaps 'normal' does not override the setting from the font attribute.
    // (spec unclear, cf. https://github.com/whatwg/html/issues/8103)
    ctx.fontVariantCaps = "normal";
    ctx.fillText("Hello World", 20, 100);
  reference: |
    ctx.font = "small-caps 32px serif";
    ctx.fillText("Hello World", 20, 100);

- name: 2d.text.fontVariantCaps6
  desc: Testing small caps setting in fontVariant
  code: |
    // fontVariantCaps is reset when the font attribute is set.
    // (spec unclear, cf. https://github.com/whatwg/html/issues/8103)
    ctx.fontVariantCaps = "all-small-caps";
    ctx.font = "32px serif";
    ctx.fillText("Hello World", 20, 100);
  reference: |
    ctx.font = "32px serif";
    ctx.fillText("Hello World", 20, 100);

- name: 2d.text.setFont.mathFont
  desc: crbug.com/1212190, make sure offscreencanvas doesn't crash with Math Font
  code: |
    ctx.font = "math serif";

# TODO: shadows, alpha, composite, clip