- 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.lang.default
  code: |
    @assert ctx.lang === 'inherit';

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

    ctx.lang = 'inherit';
    @assert ctx.lang === 'inherit';

    ctx.lang = 'en-US';
    @assert ctx.lang === 'en-US';

    ctx.lang = 'not-a-real-lang';
    @assert ctx.lang === 'not-a-real-lang';

- 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.direction.default
  code: |
    @assert ctx.direction === 'inherit';

- name: 2d.text.direction.valid
  code: |
    ctx.direction = 'ltr';
    @assert ctx.direction === 'ltr';

    ctx.direction = 'rtl';
    @assert ctx.direction === 'rtl';

    ctx.direction = 'inherit';
    @assert ctx.direction === 'inherit';

- name: 2d.text.direction.invalid
  code: |
    ctx.direction = 'ltr';
    ctx.direction = 'rtl ';
    @assert ctx.direction === 'ltr';

    ctx.direction = 'rtl';
    ctx.direction = 'LTR';
    @assert ctx.direction === 'rtl';

    ctx.direction = 'ltr';
    ctx.direction = 'rtl\0';
    @assert ctx.direction === 'ltr';

    ctx.direction = 'ltr';
    ctx.direction = 'bogus';
    @assert ctx.direction === 'ltr';

    ctx.direction = 'ltr';
    ctx.direction = 'inheri';
    @assert ctx.direction === 'ltr';

- 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

- name: 2d.text.drawing.style.reset.fontKerning.none
  desc: >-
    crbug/338965374, fontKerning still works after setting font for a second
    time.
  code: |
    ctx.font = '100px serif';
    ctx.fontKerning = "none";
    const width1 = ctx.measureText("AW").width;
    ctx.font = '100px serif';
    @assert ctx.fontKerning === "none";
    const width2 = ctx.measureText("AW").width;
    @assert width1 === width2;

- name: 2d.text.drawing.style.reset.fontKerning.none2
  desc: FontKerning value still applies after font changes.
  code: |
    ctx.font = '10px serif';
    ctx.fontKerning = "none";
    ctx.font = '20px serif';
    ctx.fillText("TATATA", 20, 30);
  reference: |
    ctx.font = '20px serif';
    ctx.fontKerning = "none";
    ctx.fillText("TATATA", 20, 30);

# 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.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.actualBoundingBox.whitespace
  desc: Testing actualBoundingBox with leading/trailing whitespace
  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.
    var whitespaces = [0x9, 0xa, 0xc, 0xd, 0x20, 0x3000];
    for (var codepoint of whitespaces) {
      let whitespace = String.fromCharCode(codepoint);

      @assert Math.abs(ctx.measureText('A' + whitespace).actualBoundingBoxLeft) <= 1;
      @assert ctx.measureText('A' + whitespace).actualBoundingBoxRight >= 50;

      @assert Math.abs(ctx.measureText(whitespace + 'A').actualBoundingBoxLeft) >= 49;
      @assert ctx.measureText(whitespace + 'A').actualBoundingBoxRight <= 101;
    }
  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.measure.selection-rects.tentative
  desc: >-
    Check that TextMetrics::getSelectionRects() matches its DOM equivalent, with
    direction {{ text_direction }}, text align {{ text_align }},
    {{ letter_spacing }} letter spacing, and {{ variant_names[3] }}.
  canvas_types: ['HtmlCanvas', 'OffscreenCanvas']
  code: |
    function placeAndSelectTextInDOM(text, from, to) {
      const el = document.createElement("div");
      el.innerHTML = text;
      el.style.font = '50px sans-serif';
      el.style.direction = '{{ text_direction }}';
      el.style.textAlign = '{{ text_align }}';
      el.style.letterSpacing = '{{ letter_spacing }}';
      document.body.appendChild(el);

      let range = document.createRange();

      range.setStart(el.childNodes[0], 0);
      range.setEnd(el.childNodes[0], text.length);
      const parent = range.getClientRects()[0];
      let width = 0;
      for (const rect of range.getClientRects()) {
        width += rect.width;
      }

      range.setStart(el.childNodes[0], from);
      range.setEnd(el.childNodes[0], to);

      let sel = window.getSelection();
      sel.removeAllRanges();
      sel.addRange(range);

      let sel_rects = sel.getRangeAt(0).getClientRects();

      document.body.removeChild(el);

      // Offset to the alignment point determined by textAlign.
      let text_align_dx;
      switch (el.style.textAlign) {
        case 'right':
          text_align_dx = width;
          break;
        case 'center':
          text_align_dx = width / 2;
          break;
        default:
          text_align_dx = 0;
      }

      for(let i = 0 ; i < sel_rects.length ; ++i) {
        sel_rects[i].x -= parent.x + text_align_dx;
        sel_rects[i].y -= parent.y;
      }

      return sel_rects;
    }

    function checkRectListsMatch(list_a, list_b) {
      @assert list_a.length === list_b.length;
      for(let i = 0 ; i < list_a.length ; ++i) {
        assert_approx_equals(list_a[i].x, list_b[i].x, 1.0);
        assert_approx_equals(list_a[i].width, list_b[i].width, 1.0);
        assert_approx_equals(list_a[i].height, list_b[i].height, 1.0);
        // Y-position not tested here as getting the baseline for text in the
        // DOM is not straightforward.
      }
    }
    {% if use_directional_override %}

    function addDirectionalOverrideCharacters(text, direction_is_ltr) {
      // source: www.w3.org/International/questions/qa-bidi-unicode-controls.en
      const LTR_OVERRIDE = '\u202D';
      const RTL_OVERRIDE = '\u202E';
      const OVERRIDE_END = '\u202C';
      if (direction_is_ltr) {
        return LTR_OVERRIDE + text + OVERRIDE_END;
      }
      return RTL_OVERRIDE + text + OVERRIDE_END;
    }
    {% endif %}

    ctx.font = '50px sans-serif';
    ctx.direction = '{{ text_direction }}';
    ctx.textAlign = '{{ text_align }}';
    ctx.letterSpacing = '{{ letter_spacing }}';

    const kTexts = [
      'UNAVAILABLE',
      '🏁🎶🏁',
      '）（あ）（',
      '-abcd_',
      'איפה הספרייה?',
      'bidiמתמטיקה'
    ]

    for (text of kTexts) {
      {% if use_directional_override %}
      text = addDirectionalOverrideCharacters(text, ctx.direction == 'ltr');
      {% endif %}
      const tm = ctx.measureText(text);
      // First character.
      checkRectListsMatch(
        tm.getSelectionRects(0, 1),
        placeAndSelectTextInDOM(text, 0, 1)
      );
      // Last character.
      checkRectListsMatch(
        tm.getSelectionRects(text.length - 1, text.length),
        placeAndSelectTextInDOM(text, text.length - 1, text.length)
      );
      // Whole string.
      checkRectListsMatch(
        tm.getSelectionRects(0, text.length),
        placeAndSelectTextInDOM(text, 0, text.length)
      );
      // Intermediate string.
      checkRectListsMatch(
        tm.getSelectionRects(1, text.length - 1),
        placeAndSelectTextInDOM(text, 1, text.length - 1)
      );
      // Invalid start > end string. Creates 0 width rectangle.
      checkRectListsMatch(
        tm.getSelectionRects(3, 2),
        placeAndSelectTextInDOM(text, 3, 2)
      );
      checkRectListsMatch(
        tm.getSelectionRects(1, 0),
        placeAndSelectTextInDOM(text, 1, 0)
      );
    }
  variants_layout: [single_file, single_file, single_file, single_file]
  variants:
  - direction-ltr:
      text_direction: ltr
    direction-rtl:
      text_direction: rtl
  - align-left:
      text_align: left
    align-center:
      text_align: center
    align-right:
      text_align: right
  - no-spacing:
      letter_spacing: 0px
    spacing:
      letter_spacing: 10px
  - no-directional-override:
      use_directional_override: false
    directional-override:
      use_directional_override: true

- name: 2d.text.measure.selection-rects-baselines.tentative
  desc: >-
    Check that TextMetrics::getSelectionRects() works correctly with
    textBaseline.
  code: |
    ctx.font = '50px sans-serif';

    const kBaselines = [
      "top",
      "hanging",
      "middle",
      "alphabetic",
      "ideographic",
      "bottom",
    ];

    const kTexts = [
      'UNAVAILABLE',
      '🏁🎶🏁',
      '）（あ）（',
      '-abcd_',
      'איפה הספרייה?',
      'bidiמתמטיקה'
    ]

    for (const text of kTexts) {
      for (const baseline of kBaselines) {
        const tm = ctx.measureText(text);
        // First character.
        for (const r of tm.getSelectionRects(0, 1)) {
          assert_approx_equals(r.top, -tm.fontBoundingBoxAscent, 1.0);
          assert_approx_equals(r.bottom, tm.fontBoundingBoxDescent, 1.0);
        }
        // Last character.
        for (const r of tm.getSelectionRects(text.length - 1, text.length)) {
          assert_approx_equals(r.top, -tm.fontBoundingBoxAscent, 1.0);
          assert_approx_equals(r.bottom, tm.fontBoundingBoxDescent, 1.0);
        }
        // Whole string.
        for (const r of tm.getSelectionRects(0, text.length)) {
          assert_approx_equals(r.top, -tm.fontBoundingBoxAscent, 1.0);
          assert_approx_equals(r.bottom, tm.fontBoundingBoxDescent, 1.0);
        }
        // Intermediate string.
        for (const r of tm.getSelectionRects(1, text.length - 1)) {
          assert_approx_equals(r.top, -tm.fontBoundingBoxAscent, 1.0);
          assert_approx_equals(r.bottom, tm.fontBoundingBoxDescent, 1.0);
        }
        // Invalid start > end string. Creates 0 width rectangle.
        for (const r of tm.getSelectionRects(3, 2)) {
          assert_approx_equals(r.top, -tm.fontBoundingBoxAscent, 1.0);
          assert_approx_equals(r.bottom, tm.fontBoundingBoxDescent, 1.0);
        }
        for (const r of tm.getSelectionRects(1, 0)) {
          assert_approx_equals(r.top, -tm.fontBoundingBoxAscent, 1.0);
          assert_approx_equals(r.bottom, tm.fontBoundingBoxDescent, 1.0);
        }
      }
    }

- name: 2d.text.measure.selection-rects-exceptions.tentative
  desc: >-
    Check that TextMetrics::getSelectionRects() throws when using invalid
    indexes.
  code: |
    const kTexts = [
      'UNAVAILABLE',
      '🏁🎶🏁',
      '）（あ）（',
      '-abcd_',
      'اين المكتبة؟',
      'bidiالرياضيات'
    ]

    for (const text of kTexts) {
      const tm = ctx.measureText(text);
      // Handled by the IDL binding.
      assert_throws_js(TypeError, () => tm.getSelectionRects(-1, 0) );
      assert_throws_js(TypeError, () => tm.getSelectionRects(0, -1) );
      assert_throws_js(TypeError, () => tm.getSelectionRects(-1, -1) );
      // Thrown in TextMetrics.
      assert_throws_dom("IndexSizeError",
                        () => tm.getSelectionRects(text.length + 1, 0) );
      assert_throws_dom("IndexSizeError",
                        () => tm.getSelectionRects(0, text.length + 1) );
      assert_throws_dom("IndexSizeError",
                        () => tm.getSelectionRects(text.length + 1, text.length + 1) );
    }

- name: 2d.text.measure.getActualBoundingBox.tentative
  desc: >-
    Test TextMetrics::getActualBoundingBox(), with text align {{ text_align }}
    , and {{ letter_spacing }} letter spacing.
  test_type: promise
  fonts:
  - CanvasTest
  size: [800, 200]
  code: |
    // Use measureText to create a rect for the whole text
    function getFullTextBoundingBox(text) {
      const tm = ctx.measureText(text);
      return {
        x: -tm.actualBoundingBoxLeft,
        y: -tm.actualBoundingBoxAscent,
        width: tm.actualBoundingBoxLeft + tm.actualBoundingBoxRight,
        height: tm.actualBoundingBoxAscent + tm.actualBoundingBoxDescent
      };
    }

    // Returns a string a replaces the characters in text that are not in the
    // range [start, end) with spaces.
    function buildTestString(text, start, end) {
      let ret = '';
      for (let i = 0; i < text.length; ++i) {
        if (start <= i && i < end)
          ret += text[i];
        else
          ret += ' ';
      }
      return ret;
    }

    function checkRectsMatch(rect_a, rect_b, text, start, end) {
      assert_approx_equals(rect_a.x, rect_b.x, 1.0, `${text} :: x :: ${start} to ${end}`);
      assert_approx_equals(rect_a.y, rect_b.y, 1.0, `${text} :: y :: ${start} to ${end}`);
      assert_approx_equals(rect_a.width, rect_b.width, 1.0, `${text} :: width :: ${start} to ${end}`);
      assert_approx_equals(rect_a.height, rect_b.height, 1.0, `${text} :: height :: ${start} to ${end}`);
    }

    function testForSubstring(text, start, end) {
      const textMetrics = ctx.measureText(text);
      const rect_from_api = textMetrics.getActualBoundingBox(start, end);
      const rect_from_full_bounds = getFullTextBoundingBox(
                                      buildTestString(text, start, end));
      checkRectsMatch(rect_from_api, rect_from_full_bounds, buildTestString(text, start, end), start, end);
    }

    {{ load_font }}
    ctx.textAlign = '{{ text_align }}';
    ctx.letterSpacing = '{{ letter_spacing }}';

    const kAligns = [
      'left',
      'center',
      'right',
    ];

    const kBaselines = [
      'top',
      'hanging',
      'middle',
      'alphabetic',
      'ideographic',
      'bottom',
    ];

    ctx.font = '50px CanvasTest';
    const text = 'ABCDE';
    for (const align of kAligns) {
      for (const baseline of kBaselines) {
        ctx.textAlign = align;
        ctx.textBaseline = baseline;
        // Full string.
        testForSubstring(text, 0, text.length);
        // Intermediate string.
        testForSubstring(text, 1, text.length - 1);
        // First character.
        testForSubstring(text, 0, 1);
        // Intermediate character.
        testForSubstring(text, 2, 3);
      }
    }
  variants_layout:
      [multi_files, single_file, single_file]
  variants:
  - *load-font-variant-definition
  - align-left:
      text_align: left
    align-center:
      text_align: center
    align-right:
      text_align: right
  - no-spacing:
      letter_spacing: 0px
    spacing:
      letter_spacing: 10px

- name: 2d.text.measure.getActualBoundingBox-full-text.tentative
  desc: >-
    Test TextMetrics::getActualBoundingBox() for the full length of the string
    for some edge cases, with direction {{ text_direction }} and
    {{ variant_names[1] }}
  size: [800, 200]
  code: |
    // Use measureText to create a rect for the whole text
    function getFullTextBoundingBox(text) {
      const tm = ctx.measureText(text);
      return {
        x: -tm.actualBoundingBoxLeft,
        y: -tm.actualBoundingBoxAscent,
        width: tm.actualBoundingBoxLeft + tm.actualBoundingBoxRight,
        height: tm.actualBoundingBoxAscent + tm.actualBoundingBoxDescent
      };
    }

    function checkRectsMatch(rect_a, rect_b) {
      assert_approx_equals(rect_a.x, rect_b.x, 1.0);
      assert_approx_equals(rect_a.y, rect_b.y, 1.0);
      assert_approx_equals(rect_a.width, rect_b.width, 1.0);
      assert_approx_equals(rect_a.height, rect_b.height, 1.0);
    }
    {% if use_directional_override %}

    function addDirectionalOverrideCharacters(text, direction_is_ltr) {
      // source: www.w3.org/International/questions/qa-bidi-unicode-controls.en
      const LTR_OVERRIDE = '\u202D';
      const RTL_OVERRIDE = '\u202E';
      const OVERRIDE_END = '\u202C';
      if (direction_is_ltr) {
        return LTR_OVERRIDE + text + OVERRIDE_END;
      }
      return RTL_OVERRIDE + text + OVERRIDE_END;
    }
    {% endif %}

    const kAligns = [
      'left',
      'center',
      'right',
    ];

    const kBaselines = [
      'top',
      'hanging',
      'middle',
      'alphabetic',
      'ideographic',
      'bottom',
    ];

    const kTexts = [
      'UNAVAILABLE',
      '🏁🎶🏁',
      '）（あ）（',
      '-abcd ',
      'اين المكتبة؟',
      'bidiالرياضيات'
    ]

    ctx.font = '50px sans-serif';
    ctx.direction = '{{ text_direction }}';
    for (const align of kAligns) {
      for (const baseline of kBaselines) {
        ctx.textAlign = align;
        ctx.textBaseline = baseline;
        for (text of kTexts) {
          {% if use_directional_override %}
          text = addDirectionalOverrideCharacters(text, ctx.direction == 'ltr');
          {% endif %}
          const tm = ctx.measureText(text);
          const rect_from_api = tm.getActualBoundingBox(0, text.length);
          const rect_from_full_bounds = getFullTextBoundingBox(text);
          checkRectsMatch(rect_from_api, rect_from_full_bounds)
        }
      }
    }
  variants_layout: [single_file, single_file]
  variants:
  - direction-ltr:
      text_direction: ltr
    direction-rtl:
      text_direction: rtl
  - no-directional-override:
      use_directional_override: false
    directional-override:
      use_directional_override: true

- name: 2d.text.measure.getActualBoundingBox-exceptions.tentative
  desc: >-
    Check that TextMetrics::getActualBoundingBox() throws when using invalid
    indexes.
  code: |
    const kTexts = [
      'UNAVAILABLE',
      '🏁🎶🏁',
      '）（あ）（',
      '-abcd_',
      'اين المكتبة؟',
      'bidiالرياضيات'
    ]

    for (const text of kTexts) {
      const tm = ctx.measureText(text);
      // Handled by the IDL binding.
      assert_throws_js(TypeError, () => tm.getActualBoundingBox(-1, 0) );
      assert_throws_js(TypeError, () => tm.getActualBoundingBox(0, -1) );
      assert_throws_js(TypeError, () => tm.getActualBoundingBox(-1, -1) );
      // Thrown in TextMetrics.
      assert_throws_dom("IndexSizeError",
                        () => tm.getActualBoundingBox(text.length, 0) );
      assert_throws_dom("IndexSizeError",
                        () => tm.getActualBoundingBox(0, text.length + 1) );
      assert_throws_dom("IndexSizeError",
                        () => tm.getActualBoundingBox(text.length, text.length + 1) );
    }

- name: 2d.text.measure.index-from-offset.tentative
  desc: >-
    Check that TextMetrics::getIndexFromOffset() matches its DOM equivalent,
    where possible, with direction {{ text_direction }}, text align
    {{ text_align }}, {{ letter_spacing }} letter spacing and
    {{ variant_names[3] }}.
  canvas_types: ['HtmlCanvas', 'OffscreenCanvas']
  code: |
    function alignOffset(offset, width) {
      if ('{{ text_align }}' == 'center') {
        offset -= width / 2;
      } else if ('{{ text_align }}' == 'right' ||
               ('{{ text_direction }}' == 'ltr' && '{{ text_align }}' == 'end') ||
               ('{{ text_direction }}' == 'rtl' && '{{ text_align }}' == 'start')) {
        offset -= width;
      }
      return offset;
    }

    {% if use_directional_override %}
    function addDirectionalOverrideCharacters(text, direction_is_ltr) {
      // source: www.w3.org/International/questions/qa-bidi-unicode-controls.en
      const LTR_OVERRIDE = '\u202D';
      const RTL_OVERRIDE = '\u202E';
      const OVERRIDE_END = '\u202C';
      if (direction_is_ltr) {
        return LTR_OVERRIDE + text + OVERRIDE_END;
      }
      return RTL_OVERRIDE + text + OVERRIDE_END;
    }
    {% endif %}

    function placeAndMeasureTextInDOM(text, text_width, point) {
      const el = document.createElement("p");
      el.innerHTML = text;
      el.style.font = '50px sans-serif';
      el.style.direction = '{{ text_direction }}';
      el.style.letterSpacing = '{{ letter_spacing }}';
      // Put the text top left to make offsets simpler.
      el.style.padding = '0px';
      el.style.margin = '0px';
      el.style.position = 'absolute';
      el.style.x = '0px';
      el.style.y = '0px';
      document.body.appendChild(el);
      text_bound = el.getBoundingClientRect();
      text_x = text_bound.x;
      text_y = text_bound.y + text_bound.height / 2;

      // Offset to the requested point determined by textAlign and direction.
      let text_align_dx = 0;
      if ('{{ text_align }}' == 'center') {
        text_align_dx = text_width / 2;
      } else if ('{{ text_align }}' == 'right' ||
               ('{{ text_direction }}' == 'ltr' && '{{ text_align }}' == 'end') ||
               ('{{ text_direction }}' == 'rtl' && '{{ text_align }}' == 'start')) {
        text_align_dx = text_width;
      }
      position = document.caretPositionFromPoint(point + text_align_dx + text_x, text_y);
      @assert position.offsetNode.parentNode === el;

      document.body.removeChild(el);

      return position.offset;
    }

    ctx.font = '50px sans-serif';
    ctx.direction = '{{ text_direction }}';
    ctx.textAlign = '{{ text_align }}';
    ctx.letterSpacing = '{{ letter_spacing }}';

    const kTexts = [
      'UNAVAILABLE',
      '🏁🎶🏁',
      '）（あ）（',
      '）（ああ）（',
      'ああ）（ああ',
      '--abcd__'
    ]

    for (text of kTexts) {
      {% if use_directional_override %}
      text = addDirectionalOverrideCharacters(text, ctx.direction == 'ltr');
      {% endif %}
      const tm = ctx.measureText(text);
      text_width = tm.width;
      step = 30;
      if ('{{letter_spacing}}' == '10px') {
        step = 40;
      }

      offset = step;
      adjusted_offset = alignOffset(offset, text_width);
      tm_position = tm.getIndexFromOffset(adjusted_offset);
      doc_position = placeAndMeasureTextInDOM(text, text_width, adjusted_offset);
      assert_equals(tm_position,
                    doc_position,
                    "for " + text + " offset " + offset);

      offset = text_width / 2 - 10;
      adjusted_offset = alignOffset(offset, text_width);
      tm_position = tm.getIndexFromOffset(adjusted_offset);
      doc_position = placeAndMeasureTextInDOM(text, text_width, adjusted_offset);
      assert_equals(tm_position,
                    doc_position,
                    "for " + text + " offset " + offset);

      offset = text_width / 2 + 10;
      adjusted_offset = alignOffset(offset, text_width);
      tm_position = tm.getIndexFromOffset(adjusted_offset);
      doc_position = placeAndMeasureTextInDOM(text, text_width, adjusted_offset);
      assert_equals(tm_position,
                    doc_position,
                    "for " + text + " offset " + offset);

      offset = text_width - step;
      adjusted_offset = alignOffset(offset, text_width);
      tm_position = tm.getIndexFromOffset(adjusted_offset);
      doc_position = placeAndMeasureTextInDOM(text, text_width, adjusted_offset);
      assert_equals(tm_position,
                    doc_position,
                    "for " + text + " offset " + offset);
    }
  variants_layout: [single_file, single_file, single_file, single_file]
  variants:
  - direction-ltr:
      text_direction: ltr
    direction-rtl:
      text_direction: rtl
  - align-left:
      text_align: left
    align-center:
      text_align: center
    align-right:
      text_align: right
    align-start:
      text_align: start
    align-end:
      text_align: end
  - no-spacing:
      letter_spacing: 0px
    spacing:
      letter_spacing: 10px
  - no-directional-override:
      use_directional_override: false
    directional-override:
      use_directional_override: true

- name: 2d.text.measure.index-from-offset-edges.tentative
  desc: >-
    Check that TextMetrics::getIndexFromOffset() gives correct edges when
    the requested point is outside the range, with direction {{ text_direction }}
    and text align {{ text_align }}.
  code: |
    function computeExpected(text, text_width, offset) {
      expected_position = 0;
      if ('{{ text_align }}' == 'center' && offset == 0) {
        return text.length / 2;
      }
      if ('{{ text_direction }}' == 'ltr') {
        if (offset >= text_width) {
          return text.length;
        }
        if (offset <= -text_width) {
          return 0;
        }
        // offset must be 0.
        if ('{{ text_align }}' == 'start' || '{{ text_align }}' == 'left') {
          return 0;
        } else {
          return text.length;
        }
      } else {
        if (offset >= text_width) {
          return 0;
        }
        if (offset <= -text_width) {
          return text.length;
        }
        // offset must be 0.
        if ('{{ text_align }}' == 'start' || '{{ text_align }}' == 'right') {
          return 0;
        } else {
          return text.length;
        }
      }
      return expected_position;
    }

    ctx.font = '50px sans-serif';
    ctx.direction = '{{ text_direction }}';
    ctx.textAlign = '{{ text_align }}';
    ctx.letterSpacing = '{{ letter_spacing }}';

    // The leading and trailing '-' cause the string to always follow
    // the specified direction, even though the interior will always be ltr.
    const text = '-0123456789-';

    // Points are multiples of the string width as reported by
    // textMetrics.width.
    const kPoints = [
      -2,
      -1,
      0,
      1,
      2
    ]

    const tm = ctx.measureText(text);
    text_width = tm.width;
    for (const multiple of kPoints) {
      offset = multiple * text_width;
      tm_position = tm.getIndexFromOffset(offset);
      expected_position = computeExpected(text, text_width, offset);
      assert_equals(tm_position,
                    expected_position,
                    "for " + text + " multiple " + multiple);
    }
  variants_layout: [single_file, single_file]
  variants:
  - direction-ltr:
      text_direction: ltr
    direction-rtl:
      text_direction: rtl
  - align-left:
      text_align: left
    align-center:
      text_align: center
    align-right:
      text_align: right
    align-start:
      text_align: start
    align-end:
      text_align: end

- name: 2d.text.measure.index-from-offset-edge-cases.tentative
  desc: >-
    Test the edge cases for getIndexFromOffset, where the point is at the
    edge of glyph and at the midpoint.
  test_type: promise
  fonts:
  - CanvasTest
  code: |
    {{ load_font }}
    ctx.font = '50px CanvasTest';
    ctx.direction = 'ltr';
    ctx.align = 'left'
    ctx.baseline = 'alphabetic'
    tm = ctx.measureText('A');
    const a_width = tm.width;
    tm = ctx.measureText('B');
    const b_width = tm.width;
    tm = ctx.measureText('C');
    const c_width = tm.width;
    const epsilon = 1.0e-4;

    tm = ctx.measureText('ABC');
    @assert tm.getIndexFromOffset(0) == 0;
    @assert tm.getIndexFromOffset(a_width / 2) == 0;
    @assert tm.getIndexFromOffset(a_width / 2 + 1) == 1;
    @assert tm.getIndexFromOffset(a_width) == 1;
    @assert tm.getIndexFromOffset(a_width + b_width / 2) == 1;
    @assert tm.getIndexFromOffset(a_width + b_width / 2 + 1) == 2;
    @assert tm.getIndexFromOffset(a_width + b_width) == 2;
    @assert tm.getIndexFromOffset(a_width + b_width + c_width / 2) == 2;
    @assert tm.getIndexFromOffset(a_width + b_width + c_width / 2 + 1) == 3;
    @assert tm.getIndexFromOffset(a_width + b_width + c_width) == 3;
  variants:
  - *load-font-variant-definition

- name: 2d.text.measure.text-clusters-split.tentative
  desc: >-
    Test that getTextClusters() splits the input correctly into the
    minimal clusters, keeping emojis together.
  size: [400, 200]
  code: |
    ctx.font = '50px serif';
    const text = 'ABC ☺️❤️';
    ctx.fillText(text, 20, 100);
    const tm = ctx.measureText(text);
    const clusters = tm.getTextClusters();
    // Should return 6 clusters(A|B|C| |☺️|❤️).
    @assert clusters.length === 6;
    // A from position 0 to 1.
    @assert clusters[0].start === 0;
    @assert clusters[0].end === 1;
    // B from position 1 to 2.
    @assert clusters[1].start === 1;
    @assert clusters[1].end === 2;
    // C from position 2 to 3.
    @assert clusters[2].start === 2;
    @assert clusters[2].end === 3;
    // space from position 3 to 4.
    @assert clusters[3].start === 3;
    @assert clusters[3].end === 4;
    // ☺️ from position 4 to 6.
    @assert clusters[4].start === 4;
    @assert clusters[4].end === 6;
    // ❤️ from position 6 to 8.
    @assert clusters[5].start === 6;
    @assert clusters[5].end === 8;

- name: 2d.text.measure.text-clusters-exceptions.tentative
  desc: >-
    Check that TextMetrics::getTextClusters() throws when using invalid
    indexes.
  code: |
    const kTexts = [
      'UNAVAILABLE',
      '🏁🎶🏁',
      '）（あ）（',
      '-abcd_'
    ]

    for (const text of kTexts) {
      const tm = ctx.measureText(text);
      // Handled by the IDL binding.
      assert_throws_js(TypeError, () => tm.getTextClusters(-1, 0) );
      assert_throws_js(TypeError, () => tm.getTextClusters(0, -1) );
      assert_throws_js(TypeError, () => tm.getTextClusters(-1, -1) );
      // Thrown in TextMetrics.
      assert_throws_dom("IndexSizeError",
              () => tm.getTextClusters(text.length, 0) );
      assert_throws_dom("IndexSizeError",
              () => tm.getTextClusters(0, text.length + 1) );
      assert_throws_dom("IndexSizeError",
              () => tm.getTextClusters(text.length, text.length + 1) );
    }

- name: 2d.text.measure.text-clusters-position.tentative
  desc: >-
    Test that TextMetrics::getTextClusters() returns clusters that are
    positioned according to the target align and baseline passed as options.
  size: [500, 500]
  test_type: promise
  fonts:
  - CanvasTest
  code: |
    {{ load_font }}
    ctx.font = '40px CanvasTest';
    const text = 'E';

    // Origin for all the measurements is placed at the top left corner.
    ctx.textAlign = 'left';
    ctx.textBaseline = 'top';
    let tm = ctx.measureText(text);

    // X position.
    @assert Math.abs(tm.getTextClusters({align: 'left'})[0].x) === 0;
    @assert tm.getTextClusters({align: 'center'})[0].x === 20;
    @assert tm.getTextClusters({align: 'right'})[0].x === 40;

    // Y position.
    @assert Math.abs(tm.getTextClusters({baseline: 'top'})[0].y) === 0;
    @assert tm.getTextClusters({baseline: 'middle'})[0].y === 20;
    @assert tm.getTextClusters({baseline: 'bottom'})[0].y === 40;
    @assert tm.getTextClusters({baseline: 'alphabetic'})[0].y === 30;
  variants:
  - *load-font-variant-definition

- name: 2d.text.measure.fillTextCluster-align.tentative
  desc: >-
    Test that fillTextCluster() correctly positions the text, taking into
    account the textAlign from the context at the time the text was measured.
  size: [250, 43]
  code: |
    ctx.font = '20px serif';
    const text = 'Test ☺️ א';
    const x = canvas.width / 2;
    const y = canvas.height / 2;

    ctx.textAlign = '{{ ctx_align }}';
    let tm = ctx.measureText(text);
    const clusters = tm.getTextClusters();

    // Rendering all clusters with the same (x, y) parameters must be
    // equivalent to a fillText() call at (x, y).
    for (const cluster of clusters) {
        ctx.fillTextCluster(cluster, x, y);
    }
  reference: |
    ctx.font = '20px serif';
    const text = 'Test ☺️ א';
    const x = canvas.width / 2;
    const y = canvas.height / 2;

    ctx.textAlign = '{{ ctx_align }}';

    // Rendering all clusters with the same (x, y) parameters must be
    // equivalent to a fillText() call at (x, y).
    ctx.fillText(text, x, y);
  variants_layout:
      [single_file]
  variants:
  - ctx_align_left:
      ctx_align: left
    ctx_align_center:
      ctx_align: center
    ctx_align_right:
      ctx_align: right

- name: 2d.text.measure.strokeTextCluster-align.tentative
  desc: >-
    Test that strokeTextCluster() correctly positions the text, taking into
    account the textAlign from the context at the time the text was measured.
  size: [250, 43]
  code: |
    ctx.font = '20px serif';
    const text = 'Test ☺️ א';
    const x = canvas.width / 2;
    const y = canvas.height / 2;

    ctx.textAlign = '{{ ctx_align }}';
    let tm = ctx.measureText(text);
    const clusters = tm.getTextClusters();

    // Rendering all clusters with the same (x, y) parameters must be
    // equivalent to a strokeText() call at (x, y).
    for (const cluster of clusters) {
        ctx.strokeTextCluster(cluster, x, y);
    }
  reference: |
    ctx.font = '20px serif';
    const text = 'Test ☺️ א';
    const x = canvas.width / 2;
    const y = canvas.height / 2;

    ctx.textAlign = '{{ ctx_align }}';

    // Rendering all clusters with the same (x, y) parameters must be
    // equivalent to a strokeText() call at (x, y).
    ctx.strokeText(text, x, y);
  variants_layout:
      [single_file]
  variants:
  - ctx_align_left:
      ctx_align: left
    ctx_align_center:
      ctx_align: center
    ctx_align_right:
      ctx_align: right

- name: 2d.text.measure.fillTextCluster-baseline.tentative
  desc: >-
    Test that fillTextCluster() correctly positions the text, taking into
    account the textBaseline from the context at the time the text was measured.
  size: [180, 43]
  code: |
    ctx.font = '20px serif';
    const text = 'Test ☺️ א';
    const x = 20;
    const y = canvas.height / 2;

    ctx.textBaseline = '{{ ctx_baseline }}';
    let tm = ctx.measureText(text);
    const clusters = tm.getTextClusters();

    // Rendering all clusters with the same (x, y) parameters must be
    // equivalent to a fillText() call at (x, y).
    for (const cluster of clusters) {
        ctx.fillTextCluster(cluster, x, y);
    }
  reference: |
    ctx.font = '20px serif';
    const text = 'Test ☺️ א';
    const x = 20;
    const y = canvas.height / 2;

    ctx.textBaseline = '{{ ctx_baseline }}';
    ctx.fillText(text, x, y);
  variants_layout:
      [single_file]
  variants:
  - ctx_baseline_top:
      ctx_baseline: top
    ctx_baseline_middle:
      ctx_baseline: middle
    ctx_baseline_bottom:
      ctx_baseline: bottom
    ctx_baseline_alphabetic:
      ctx_baseline: alphabetic

- name: 2d.text.measure.strokeTextCluster-baseline.tentative
  desc: >-
    Test that strokeTextCluster() correctly positions the text, taking into
    account the textBaseline from the context at the time the text was measured.
  size: [180, 43]
  code: |
    ctx.font = '20px serif';
    const text = 'Test ☺️ א';
    const x = 20;
    const y = canvas.height / 2;

    ctx.textBaseline = '{{ ctx_baseline }}';
    let tm = ctx.measureText(text);
    const clusters = tm.getTextClusters();

    // Rendering all clusters with the same (x, y) parameters must be
    // equivalent to a strokeText() call at (x, y).
    for (const cluster of clusters) {
        ctx.strokeTextCluster(cluster, x, y);
    }
  reference: |
    ctx.font = '20px serif';
    const text = 'Test ☺️ א';
    const x = 20;
    const y = canvas.height / 2;

    ctx.textBaseline = '{{ ctx_baseline }}';
    ctx.strokeText(text, x, y);
  variants_layout:
      [single_file]
  variants:
  - ctx_baseline_top:
      ctx_baseline: top
    ctx_baseline_middle:
      ctx_baseline: middle
    ctx_baseline_bottom:
      ctx_baseline: bottom
    ctx_baseline_alphabetic:
      ctx_baseline: alphabetic

- name: 2d.text.measure.fillTextCluster-font-change.tentative
  desc: >-
    Test that fillTextCluster() renders in the font used originally when the
    text was measured, even if the font set on the context has changed since.
  size: [500, 200]
  code: |
    ctx.font = '50px sans-serif';
    const text = 'Hello ♦️ World!';
    let tm = ctx.measureText(text);
    const clusters = tm.getTextClusters();

    ctx.font = '80px serif';

    const x = 100;
    const y = 100;
    for (const cluster of clusters) {
        ctx.fillTextCluster(cluster, x, y);
    }
  reference: |
    ctx.font = '50px sans-serif';
    const text = 'Hello ♦️ World!';
    let tm = ctx.measureText(text);
    const clusters = tm.getTextClusters();

    const x = 100;
    const y = 100;
    ctx.fillText(text, x, y);

- name: 2d.text.measure.strokeTextCluster-font-change.tentative
  desc: >-
    Test that strokeTextCluster() renders in the font used originally when the
    text was measured, even if the font set on the context has changed since.
  size: [500, 200]
  code: |
    ctx.font = '50px sans-serif';
    const text = 'Hello ♦️ World!';
    let tm = ctx.measureText(text);
    const clusters = tm.getTextClusters();

    ctx.font = '80px serif';

    const x = 100;
    const y = 100;
    for (const cluster of clusters) {
        ctx.strokeTextCluster(cluster, x, y);
    }
  reference: |
    ctx.font = '50px sans-serif';
    const text = 'Hello ♦️ World!';
    let tm = ctx.measureText(text);
    const clusters = tm.getTextClusters();

    const x = 100;
    const y = 100;
    ctx.strokeText(text, x, y);

- name: 2d.text.measure.fillTextCluster-drawing-styles-change.tentative
  desc: >-
    Test that fillTextCluster() renders using the drawing styles as they were
    when `ctx.measureText()` was called, regardless of any changes in the
    context since.
  size: [250, 80]
  code: |
    ctx.font = '20px serif';
    const text = 'Test ♦️ find';

    {{ original_value }}

    let tm = ctx.measureText(text);
    const clusters = tm.getTextClusters();

    {{ modified_value }}

    for (const cluster of clusters) {
        ctx.fillTextCluster(cluster, 10, 25);
    }

    ctx.fillText(text, 10, 50);
  reference: |
    ctx.font = '20px serif';
    const text = 'Test ♦️ find';

    {{ original_value }}

    ctx.fillText(text, 10, 25);

    {{ modified_value }}

    ctx.fillText(text, 10, 50);
  variants_layout:
      [single_file]
  grid_width: 2
  variants:
  - letter_spacing:
      original_value: |-
       ctx.letterSpacing = '2px';
      modified_value: |-
       ctx.letterSpacing = '6px';
    word_spacing:
      original_value: |-
       ctx.wordSpacing = '2px';
      modified_value: |-
       ctx.wordSpacing = '10px';
    font_kerning:
      original_value: |-
       ctx.fontKerning = 'none';
      modified_value: |-
       ctx.fontKerning = 'normal';
    font_variant_caps:
      original_value: |-
       ctx.fontVariantCaps = 'small-caps';
      modified_value: |-
       ctx.fontVariantCaps = 'all-small-caps';

- name: 2d.text.measure.strokeTextCluster-drawing-styles-change.tentative
  desc: >-
    Test that strokeTextCluster() renders using the drawing styles as they were
    when `ctx.measureText()` was called, regardless of any changes in the
    context since.
  size: [250, 80]
  code: |
    ctx.font = '20px serif';
    const text = 'Test ♦️ find';

    {{ original_value }}

    let tm = ctx.measureText(text);
    const clusters = tm.getTextClusters();

    {{ modified_value }}

    for (const cluster of clusters) {
        ctx.strokeTextCluster(cluster, 10, 25);
    }

    ctx.strokeText(text, 10, 50);
  reference: |
    ctx.font = '20px serif';
    const text = 'Test ♦️ find';

    {{ original_value }}

    ctx.strokeText(text, 10, 25);

    {{ modified_value }}

    ctx.strokeText(text, 10, 50);
  variants_layout:
      [single_file]
  grid_width: 2
  variants:
  - letter_spacing:
      original_value: |-
       ctx.letterSpacing = '2px';
      modified_value: |-
       ctx.letterSpacing = '6px';
    word_spacing:
      original_value: |-
       ctx.wordSpacing = '2px';
      modified_value: |-
       ctx.wordSpacing = '10px';
    font_kerning:
      original_value: |-
       ctx.fontKerning = 'none';
      modified_value: |-
       ctx.fontKerning = 'normal';
    font_variant_caps:
      original_value: |-
       ctx.fontVariantCaps = 'small-caps';
      modified_value: |-
       ctx.fontVariantCaps = 'all-small-caps';

- name: 2d.text.measure.fillTextCluster-range.tentative
  desc: >-
    Test that getTextClusters() and fillTextCluster() correctly render
    different ranges of the input text.
  test_type: promise
  fonts:
  - CanvasTest
  size: [400, 300]
  code: |
    // Renders all the clusters in the list from position (x, y).
    function renderClusters(clusters, x, y) {
      for (const cluster of clusters) {
        ctx.fillTextCluster(cluster, x, y);
      }
    }

    {{ load_font }}

    ctx.font = '50px CanvasTest';
    ctx.textAlign = 'left';
    ctx.textBaseline = 'top';
    const text = 'EEEEE';
    let tm = ctx.measureText(text);

    // Background color.
    ctx.fillStyle = '#f00';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    ctx.fillStyle = '#0f0';

    // Without the first character.
    renderClusters(tm.getTextClusters(1, 5), 0, 0);
    @assert pixel 5,5 ==~ 255,0,0,255;
    @assert pixel 55,5 ==~ 0,255,0,255;
    @assert pixel 105,5 ==~ 0,255,0,255;
    @assert pixel 155,5 ==~ 0,255,0,255;
    @assert pixel 205,5 ==~ 0,255,0,255;
    // Without the last character.
    renderClusters(tm.getTextClusters(0, 4), 0, 100);
    @assert pixel 5,105 ==~ 0,255,0,255;
    @assert pixel 55,105 ==~ 0,255,0,255;
    @assert pixel 105,105 ==~ 0,255,0,255;
    @assert pixel 155,105 ==~ 0,255,0,255;
    @assert pixel 205,105 ==~ 255,0,0,255;
    // Only the middle character.
    renderClusters(tm.getTextClusters(2, 3), 0, 150);
    @assert pixel 5,155 ==~ 255,0,0,255;
    @assert pixel 55,155 ==~ 255,0,0,255;
    @assert pixel 105,155 ==~ 0,255,0,255;
    @assert pixel 155,155 ==~ 255,0,0,255;
    @assert pixel 205,155 ==~ 255,0,0,255;
  variants:
  - *load-font-variant-definition

- name: 2d.text.measure.strokeTextCluster-range.tentative
  desc: >-
    Test that getTextClusters() and strokeTextCluster() correctly render
    different ranges of the input text.
  test_type: promise
  fonts:
  - CanvasTest
  size: [400, 300]
  code: |
    // Renders all the clusters in the list from position (x, y).
    function renderClusters(clusters, x, y) {
      for (const cluster of clusters) {
        ctx.strokeTextCluster(cluster, x, y);
      }
    }

    {{ load_font }}

    ctx.font = '50px CanvasTest';
    ctx.textAlign = 'left';
    ctx.textBaseline = 'top';
    const text = 'EEEEE';
    let tm = ctx.measureText(text);

    // Background color.
    ctx.fillStyle = '#f00';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    ctx.strokeStyle = '#0f0';
    ctx.lineWidth = 12;

    // Without the first character.
    renderClusters(tm.getTextClusters(1, 5), 0, 0);
    @assert pixel 5,5 ==~ 255,0,0,255;
    @assert pixel 55,5 ==~ 0,255,0,255;
    @assert pixel 105,5 ==~ 0,255,0,255;
    @assert pixel 155,5 ==~ 0,255,0,255;
    @assert pixel 205,5 ==~ 0,255,0,255;
    // Without the last character.
    renderClusters(tm.getTextClusters(0, 4), 0, 100);
    @assert pixel 5,105 ==~ 0,255,0,255;
    @assert pixel 55,105 ==~ 0,255,0,255;
    @assert pixel 105,105 ==~ 0,255,0,255;
    @assert pixel 155,105 ==~ 0,255,0,255;
    @assert pixel 245,105 ==~ 255,0,0,255;
    // Only the middle character.
    renderClusters(tm.getTextClusters(2, 3), 0, 200);
    @assert pixel 5,205 ==~ 255,0,0,255;
    @assert pixel 55,205 ==~ 255,0,0,255;
    @assert pixel 105,205 ==~ 0,255,0,255;
    @assert pixel 195,205 ==~ 255,0,0,255;
    @assert pixel 245,205 ==~ 255,0,0,255;
  variants:
  - *load-font-variant-definition

- name: 2d.text.measure.fillTextCluster-options.tentative
  desc: >-
    Test that fillTextCluster() correctly applies the options passed as a
    dictionary.
  test_type: promise
  fonts:
  - CanvasTest
  size: [100, 300]
  code: |
    {{ load_font }}

    ctx.font = '50px CanvasTest';
    ctx.textAlign = 'left';
    ctx.textBaseline = 'top';
    const text = 'E';
    const tm = ctx.measureText(text);
    const cluster = tm.getTextClusters()[0];

    // Background color.
    ctx.fillStyle = '#f00';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    ctx.fillStyle = '#0f0';

    // Override the align and baseline of the cluster.
    ctx.fillTextCluster(cluster, 50, 50, {align: 'right', baseline: 'bottom'});
    @assert pixel 5,5 ==~ 0,255,0,255;
    @assert pixel 45,5 ==~ 0,255,0,255;
    @assert pixel 5,45 ==~ 0,255,0,255;
    @assert pixel 45,45 ==~ 0,255,0,255;
    @assert pixel 55,5 ==~ 255,0,0,255;
    @assert pixel 5,55 ==~ 255,0,0,255;
    @assert pixel 55,55 ==~ 255,0,0,255;

    // Override the x and y values of the cluster.
    ctx.fillTextCluster(cluster, 0, 100, {x: 10, y: 10});
    @assert pixel 15,115 ==~ 0,255,0,255;
    @assert pixel 55,115 ==~ 0,255,0,255;
    @assert pixel 15,155 ==~ 0,255,0,255;
    @assert pixel 55,155 ==~ 0,255,0,255;
    @assert pixel 65,115 ==~ 255,0,0,255;
    @assert pixel 15,165 ==~ 255,0,0,255;
    @assert pixel 65,165 ==~ 255,0,0,255;

    // Override the align, baseline, x, and y values of the cluster.
    ctx.fillTextCluster(cluster, 50, 250,
                        {align: 'right', baseline: 'bottom', x: 10,  y: 10});
    @assert pixel 15,215 ==~ 0,255,0,255;
    @assert pixel 55,215 ==~ 0,255,0,255;
    @assert pixel 15,255 ==~ 0,255,0,255;
    @assert pixel 55,255 ==~ 0,255,0,255;
    @assert pixel 65,215 ==~ 255,0,0,255;
    @assert pixel 15,265 ==~ 255,0,0,255;
    @assert pixel 65,265 ==~ 255,0,0,255;
  variants:
  - *load-font-variant-definition

- name: 2d.text.measure.strokeTextCluster-options.tentative
  desc: >-
    Test that strokeTextCluster() correctly applies the options passed as a
    dictionary.
  test_type: promise
  fonts:
  - CanvasTest
  size: [100, 300]
  code: |
    {{ load_font }}

    ctx.font = '50px CanvasTest';
    ctx.textAlign = 'left';
    ctx.textBaseline = 'top';
    const text = 'E';
    const tm = ctx.measureText(text);
    const cluster = tm.getTextClusters()[0];

    // Background color.
    ctx.fillStyle = '#f00';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    ctx.strokeStyle = '#0f0';
    ctx.lineWidth = 12;

    // Override the align and baseline of the cluster.
    ctx.strokeTextCluster(cluster, 50, 50, {align: 'right', baseline: 'bottom'});
    @assert pixel 5,5 ==~ 0,255,0,255;
    @assert pixel 45,5 ==~ 0,255,0,255;
    @assert pixel 5,45 ==~ 0,255,0,255;
    @assert pixel 45,45 ==~ 0,255,0,255;
    @assert pixel 5,95 ==~ 255,0,0,255;
    @assert pixel 50,95 ==~ 255,0,0,255;
    @assert pixel 95,50 ==~ 255,0,0,255;
    @assert pixel 95,5 ==~ 255,0,0,255;

    // Override the x and y values of the cluster.
    ctx.strokeTextCluster(cluster, 0, 100, {x: 10, y: 10});
    @assert pixel 15,115 ==~ 0,255,0,255;
    @assert pixel 55,115 ==~ 0,255,0,255;
    @assert pixel 15,155 ==~ 0,255,0,255;
    @assert pixel 55,155 ==~ 0,255,0,255;
    @assert pixel 1,101 ==~ 255,0,0,255;
    @assert pixel 1,151 ==~ 255,0,0,255;
    @assert pixel 51,101 ==~ 255,0,0,255;

    // Override the align, baseline, x, and y values of the cluster.
    ctx.strokeTextCluster(cluster, 50, 250,
                        {align: 'right', baseline: 'bottom', x: 10,  y: 10});
    @assert pixel 15,215 ==~ 0,255,0,255;
    @assert pixel 55,215 ==~ 0,255,0,255;
    @assert pixel 15,255 ==~ 0,255,0,255;
    @assert pixel 55,255 ==~ 0,255,0,255;
    @assert pixel 5,295 ==~ 255,0,0,255;
    @assert pixel 50,295 ==~ 255,0,0,255;
    @assert pixel 95,250 ==~ 255,0,0,255;
    @assert pixel 95,25 ==~ 255,0,0,255;
  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.measure.lang
  desc: Testing the lang attribute
  test_type: promise
  fonts:
  - Lato-Medium
  code: |
    {{ load_font }}

    ctx.font = '50px Lato-Medium';
    ctx.lang = 'tr';
    const text = 'fi';
    const tm_tr = ctx.measureText(text);
    const tr_width = tm_tr.width;

    ctx.lang = 'en';
    const tm_en = ctx.measureText(text);
    const en_width = tm_en.width;

    @assert tr_width > en_width;
  variants:
  - *load-font-variant-definition

- name: 2d.text.measure.lang.inherit
  desc: Testing the lang attribute
  test_type: promise
  canvas_types: ['HtmlCanvas', 'OffscreenCanvas']
  fonts:
  - Lato-Medium
  canvas: 'lang="tr"'
  code: |
    {{ load_font }}

    ctx.font = '50px Lato-Medium';
    ctx.lang = 'inherit';
    const text = 'fi';
    const tm_tr = ctx.measureText(text);
    const tr_width = tm_tr.width;

    ctx.lang = 'en';
    const tm_en = ctx.measureText(text);
    const en_width = tm_en.width;

    @assert tr_width > en_width;
  variants:
  - &load-font-variant-definitio-and-set-lang
    HtmlCanvas:
      append_variants_to_name: false
      canvas_types: ['HtmlCanvas']
      load_font: |-
        await document.fonts.ready;
    OffscreenCanvas:
      append_variants_to_name: false
      canvas_types: ['OffscreenCanvas']
      load_font: |-
        document.documentElement.setAttribute('lang','tr');
        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.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.reset.TextRendering
  desc: TextRendering stays the same after font change.
  code: |
    ctx.font = '20px serif';
    ctx.textRendering = "optimizeSpeed";
    @assert ctx.textRendering === "optimizeSpeed";
    ctx.font = '10px serif';
    @assert ctx.textRendering === "optimizeSpeed";

- name: 2d.text.drawing.style.fontStretch.settings
  desc: Testing value setting of fontStretch in Canvas
  code: |
    // Setting fontStretch 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.fontVariantCaps.after.reset.font
  desc: Testing if the fontVariantCaps is reset after font change
  size: [300, 300]
  code: |
    ctx.font = "32px serif";
    ctx.fontVariantCaps = "small-caps";

    ctx.font = "31px serif";
    ctx.fillText("Hello World", 20, 40);
    ctx.fontVariantCaps = "small-caps";
    ctx.fillText("Hello World", 20, 80);
  reference: |
    ctx.font = "31px serif";
    ctx.fillText("Hello World", 20, 40);
    ctx.fontVariantCaps = "small-caps";
    ctx.fillText("Hello World", 20, 80);

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

- name: 2d.text.writingmode
  desc: writing-mode in css should not change how text is rendered
  canvas_types: ['HtmlCanvas']
  code: |
    canvas.style.writingMode = "vertical-rl";
    canvas.style.fontFamily = "Arial";

    ctx.font = "bold 64px Arial";
    ctx.textBaseline = "top";

    ctx.fillText("Happy", 0, 100);
  reference: |
    ctx.font = "bold 64px Arial";
    ctx.textBaseline = "top";

    ctx.fillText("Happy", 0, 100);

# TODO: shadows, alpha, composite, clip
