path: root/testing/web-platform/tests/html/canvas/tools/yaml-new/reset.yaml

- name: 2d.reset.basic
  desc: reset clears to transparent black
  code: |
    ctx.fillStyle = '#f00';
    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    ctx.reset();
    @assert pixel 0,0 == 0,0,0,0;
    @assert pixel 50,25 == 0,0,0,0;
    @assert pixel 25,50 == 0,0,0,0;
    @assert pixel 100,50 == 0,0,0,0;
    @assert pixel 0,50 == 0,0,0,0;
    @assert pixel 100,0 == 0,0,0,0;
    t.done();

- name: 2d.reset.state
  desc: check that the state is reset
  code: |
    const default_value = ctx.{{ state_name }};

    ctx.{{ state_name }} = {{ new_value }};
    @assert ctx.{{ state_name }} == {{ new_value }};

    ctx.reset();
    @assert ctx.{{ state_name }} == default_value;

  variants:
    letter_spacing:
      state_name: letterSpacing
      new_value: "'12px'"

    word_spacing:
      state_name: wordSpacing
      new_value: "'12px'"

    fill_style:
      state_name: fillStyle
      new_value: "'#ffffff'"

    stroke_style:
      state_name: strokeStyle
      new_value: "'#ffffff'"

    filter:
      state_name: filter
      new_value: "'blur(10px)'"

    font:
      state_name: font
      new_value: "'25px sans-serif'"

    global_alpha:
      state_name: globalAlpha
      new_value: 0.5

    global_composite_operation:
      state_name: globalCompositeOperation
      new_value: "'destination-over'"

    line_width:
      state_name: lineWidth
      new_value: 1

    line_cap:
      state_name: lineCap
      new_value: "'square'"

    line_join:
      state_name: lineJoin
      new_value: "'bevel'"

    miter_limit:
      state_name: miterLimit
      new_value: 1.0

    line_dash_offset:
      state_name: lineDashOffset
      new_value: 1.0

    shadow_offset_x:
      state_name: shadowOffsetX
      new_value: 10.0

    shadow_offset_y:
      state_name: shadowOffsetY
      new_value: 10.0

    shadow_blur:
      state_name: shadowBlur
      new_value: 10.0

    shadow_color:
      state_name: shadowColor
      new_value: "'#ff0000'"

    font:
      state_name: font
      new_value: "'16px sans-serif'"

    text_align:
      state_name: textAlign
      new_value: "'end'"

    text_baseline:
      state_name: textBaseline
      new_value: "'middle'"

    direction:
      state_name: direction
      new_value: "'rtl'"

    font_kerning:
      state_name: fontKerning
      new_value: "'normal'"

    font_stretch:
      state_name: fontStretch
      new_value: "'ultra-condensed'"

    font_variant_caps:
      state_name: fontVariantCaps
      new_value: "'unicase'"

    text_rendering:
      state_name: textRendering
      new_value: "'geometricPrecision'"

    image_smoothing_enabled:
      state_name: imageSmoothingEnabled
      new_value: "false"

    image_smoothing_quality:
      state_name: imageSmoothingQuality
      new_value: "'high'"

- name: 2d.reset.state.transformation_matrix
  desc: check that the state is reset
  code: |
    ctx.scale(2, 2);

    ctx.reset();
    @assert ctx.getTransform().isIdentity;

- name: 2d.reset.state.clip
  desc: check that the clip is reset
  size: [200, 200]
  code: |
    ctx.beginPath();
    ctx.rect(0, 0, 100, 100);
    ctx.clip();

    ctx.fillRect(0, 0, 200, 200);

    ctx.reset();

    ctx.fillRect(0, 0, 200, 200);
  reference: |
    ctx.fillRect(0, 0, 200, 200);

- name: 2d.reset.state.line_dash
  desc: check that the line dash is reset
  code: |
    ctx.setLineDash([1, 2]);

    ctx.reset();
    @assert ctx.getLineDash().length == 0;

- name: 2d.reset.render.drop_shadow
  desc: check that drop shadows are correctly rendered after reset
  size: [500, 500]
  code: |
    ctx.shadowOffsetX = 10;
    ctx.shadowOffsetY = 10;
    ctx.shadowColor = "red";
    ctx.shadowBlur = 10;

    ctx.reset();

    ctx.fillRect(100, 100, 100, 100);
  reference: |
    ctx.fillRect(100, 100, 100, 100);

- name: 2d.reset.render.text
  desc: check that text is correctly rendered after reset
  size: [400, 400]
  code: |
    ctx.font = "24px serif";
    ctx.textAlign = "center";
    ctx.textBaseline = "hanging";
    ctx.direction = "rtl";
    ctx.letterSpacing = "10px";
    ctx.fontKerning = "none";
    ctx.fontStretch = "semi-condensed";
    ctx.fontVariantCaps = "tilting-caps";
    ctx.textRendering = "optimizeLegibility";
    ctx.wordSpacing = "20px";

    ctx.reset();

    ctx.fillText("Lorem ipsum dolor sit amet, consectetur adipiscing elit", 0, 10);
  reference: |
    ctx.fillText("Lorem ipsum dolor sit amet, consectetur adipiscing elit", 0, 10);

- name: 2d.reset.render.line
  desc: check that lines are correctly rendered after reset
  size: [400, 400]
  code: |
    ctx.lineWidth = 10;
    ctx.lineCap = "round";
    ctx.lineJoin = "bevel";
    ctx.lineDashOffset = 10;
    ctx.setLineDash([20]);

    ctx.reset();

    ctx.beginPath();
    ctx.moveTo(100, 100);
    ctx.lineTo(100, 300);
    ctx.lineTo(300, 300);
    ctx.lineTo(300, 100);
    ctx.stroke();
  reference: |
    ctx.beginPath();
    ctx.moveTo(100, 100);
    ctx.lineTo(100, 300);
    ctx.lineTo(300, 300);
    ctx.lineTo(300, 100);
    ctx.stroke();

- name: 2d.reset.render.miter_limit
  desc: check that the lines are correctly rendered with the default miter limit after reset
  size: [400, 400]
  code: |
    ctx.miterLimit = 6;

    ctx.reset();

    ctx.lineWidth = 10;

    ctx.beginPath();
    ctx.moveTo(0, 100);
    for (let i = 0; i < 24; i++) {
      const dy = i % 2 === 0 ? 25 : -25;
      ctx.lineTo(Math.pow(i, 1.5) * 2, 75 + dy);
    }
    ctx.stroke();
  reference: |
    ctx.lineWidth = 10;

    ctx.beginPath();
    ctx.moveTo(0, 100);
    for (let i = 0; i < 24; i++) {
      const dy = i % 2 === 0 ? 25 : -25;
      ctx.lineTo(Math.pow(i, 1.5) * 2, 75 + dy);
    }
    ctx.stroke();

- name: 2d.reset.render.global_composite_operation
  desc: check that canvas correctly renders rectangles with the default global composite operation after reset
  size: [400, 400]
  code: |
    ctx.globalCompositeOperation = "xor";

    ctx.reset();

    ctx.fillRect(10, 10, 100, 100);
    ctx.fillRect(50, 50, 100, 100);
  reference: |
    ctx.fillRect(10, 10, 100, 100);
    ctx.fillRect(50, 50, 100, 100);

- name: 2d.reset.render.misc
  desc: check that canvas correctly renders rectangles after reset (states not covered by other tests)
  size: [400, 400]
  code: |
    ctx.fillStyle = "red";
    ctx.strokeStyle = "red";
    ctx.globalAlpha = 0.5;
    ctx.filter = "blur(2px)";

    ctx.reset();

    ctx.fillRect(0, 0, 100, 100);
    ctx.strokeRect(150, 150, 100, 100);
  reference: |
    ctx.fillRect(0, 0, 100, 100);
    ctx.strokeRect(150, 150, 100, 100);