<!DOCTYPE html>
<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
<html class="reftest-wait">
<link rel="match" href="{{ reference_file }}">
{% if fuzzy %}<meta name=fuzzy content="{{ fuzzy }}">
{% endif %}
{% if timeout %}<meta name="timeout" content="{{ timeout }}">
{% endif %}
<title>Canvas test: {{ name }}</title>
<h1 style="font-size: 20px;">{{ name }}</h1>
<p class="desc">{{ desc }}</p>
{% if notes %}<p class="notes">{{ notes }}{% endif %}
<script>pending_tests = {{ worker_variants | length }};</script>

<div style="display: grid; grid-gap: 4px;
            grid-template-columns: repeat({{ grid_width }}, max-content);
            font-size: 13px; text-align: center;">
{% for variant in worker_variants %}
<span>
  {% for variant_name in variant.grid_variant_names %}
  <div>{{ variant_name }}</div>
  {% endfor %}
  <canvas id="canvas{{ variant.id
      }}" width="{{ variant.size[0]
      }}" height="{{ variant.size[1]
      }}" style="outline: 1px solid"{{ variant.canvas }}>
    <p class="fallback">FAIL (fallback content)</p>
  </canvas>
  <script id="myWorker{{ variant.id }}" type="text/worker">
    {% set async = 'async ' if test_type == 'promise' else '' %}
    self.onmessage = {{async}}function(e) {
      const canvas = new OffscreenCanvas({{
          variant.size[0] }}, {{ variant.size[1] }});
      const ctx = canvas.getContext('2d'{%
          if variant.attributes %}, {{ variant.attributes }}{% endif %});

      {{ variant.code_worker | trim | indent(6) }}

      const bitmap = canvas.transferToImageBitmap();
      self.postMessage(bitmap, bitmap);
    };
  </script>
  <script type="module">
    const blob = new Blob([document.getElementById('myWorker{{
        variant.id }}').textContent]);
    const worker = new Worker(URL.createObjectURL(blob));
    worker.addEventListener('message', msg => {
      const outputCanvas = document.getElementById('canvas{{ variant.id }}');
      const outputCtx = outputCanvas.getContext('2d'{%
          if variant.attributes %}, {{ variant.attributes }}{% endif %});
      outputCtx.drawImage(msg.data, 0, 0);
      if (--pending_tests == 0) {
        document.documentElement.classList.remove('reftest-wait');
      }
    });
    worker.postMessage(null);
  </script>
</span>

{% endfor %}
</div>
</html>
