<!DOCTYPE html>
<html>
  <base ref="/gen/third_party/dawn/webgpu-cts/src/webgpu" />
  <title>WebGPU canvas_back_buffer_different_size (ref)</title>
  <meta charset="utf-8" />
  <link rel="help" href="https://gpuweb.github.io/gpuweb/" />
  <canvas id="cvs_larger_than_back_buffer_ref" width="3" height="4" style="width: 6px; height: 8px;"></canvas>
  <canvas id="cvs_same_as_back_buffer_ref" width="3" height="4"></canvas>
  <canvas id="cvs_smaller_than_back_buffer_ref" width="6" height="8" style="width: 3px; height: 4px;"></canvas>
  <canvas id="cvs_change_size_after_configure_ref" width="3" height="4" style="width: 6px; height: 8px;"></canvas>
  <canvas id="cvs_change_size_and_reconfigure_ref" width="6" height="8"></canvas>
  <canvas id="back_buffer_smaller_than_cvs_and_css_ref" width="3" height="4" style="width: 12px; height: 16px;"></canvas>
  <canvas id="cvs_smaller_than_back_buffer_and_css" width="6" height="8" style="width: 12px; height: 16px;"></canvas>
  <script>
  {
    const context = cvs_larger_than_back_buffer_ref.getContext('2d');
    context.fillStyle = "#FF0000";
    context.fillRect(0, 0, 2, 2);
    context.fillStyle = "#00FF00";
    context.fillRect(2, 0, 1, 2);
    context.fillStyle = "#0000FF";
    context.fillRect(0, 2, 2, 2);
    context.fillStyle = "#FFFF00";
    context.fillRect(2, 2, 1, 2);
    }

    {
    const context = cvs_same_as_back_buffer_ref.getContext('2d');
    context.fillStyle = "#FF0000";
    context.fillRect(0, 0, 2, 2);
    context.fillStyle = "#00FF00";
    context.fillRect(2, 0, 1, 2);
    context.fillStyle = "#0000FF";
    context.fillRect(0, 2, 2, 2);
    context.fillStyle = "#FFFF00";
    context.fillRect(2, 2, 1, 2);
    }

    {
    const context = cvs_smaller_than_back_buffer_ref.getContext('2d');
    context.fillStyle = "#FF0000";
    context.fillRect(0, 0, 4, 4);
    context.fillStyle = "#00FF00";
    context.fillRect(4, 0, 2, 4);
    context.fillStyle = "#0000FF";
    context.fillRect(0, 4, 4, 4);
    context.fillStyle = "#FFFF00";
    context.fillRect(4, 4, 2, 4);
    }

    {
    const context = cvs_change_size_after_configure_ref.getContext('2d');
    context.fillStyle = "#FF0000";
    context.fillRect(0, 0, 2, 2);
    context.fillStyle = "#00FF00";
    context.fillRect(2, 0, 1, 2);
    context.fillStyle = "#0000FF";
    context.fillRect(0, 2, 2, 2);
    context.fillStyle = "#FFFF00";
    context.fillRect(2, 2, 1, 2);
    }

    {
    const context = cvs_change_size_and_reconfigure_ref.getContext('2d');
    context.fillStyle = "#FF0000";
    context.fillRect(0, 0, 4, 4);
    context.fillStyle = "#00FF00";
    context.fillRect(4, 0, 2, 4);
    context.fillStyle = "#0000FF";
    context.fillRect(0, 4, 4, 4);
    context.fillStyle = "#FFFF00";
    context.fillRect(4, 4, 2, 4);
    }

    {
    const context = back_buffer_smaller_than_cvs_and_css_ref.getContext('2d');
    context.fillStyle = "#FF0000";
    context.fillRect(0, 0, 2, 2);
    context.fillStyle = "#00FF00";
    context.fillRect(2, 0, 1, 2);
    context.fillStyle = "#0000FF";
    context.fillRect(0, 2, 2, 2);
    context.fillStyle = "#FFFF00";
    context.fillRect(2, 2, 1, 2);
    }

    {
    const context = cvs_smaller_than_back_buffer_and_css.getContext('2d');
    context.fillStyle = "#FF0000";
    context.fillRect(0, 0, 4, 4);
    context.fillStyle = "#00FF00";
    context.fillRect(4, 0, 2, 4);
    context.fillRect(2, 1, 1, 1);
    context.fillStyle = "#0000FF";
    context.fillRect(0, 4, 4, 4);
    context.fillStyle = "#FFFF00";
    context.fillRect(4, 4, 2, 4);
    }
  </script>
</html>