<!DOCTYPE html>
<title>Test resizing an OffscreenCanvas with a 2d context</title>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>

<script>
test(function() {
  var canvas = new OffscreenCanvas(10, 20);
  canvas.width = 30;
  canvas.height = 40;
  assert_equals(canvas.width, 30);
  assert_equals(canvas.height, 40);
}, "Verify that writing to the width and height attributes of an OffscreenCanvas works when there is no context attached.");

test(function() {
  var canvas = new OffscreenCanvas(10, 20);
  canvas.getContext('2d');
  canvas.width = 30;
  canvas.height = 40;
  assert_equals(canvas.width, 30);
  assert_equals(canvas.height, 40);
  var image = canvas.transferToImageBitmap();
  assert_equals(image.width, 30);
  assert_equals(image.height, 40);    
}, "Verify that writing to the width and height attributes of an OffscreenCanvas works when there is a 2d context attached.");

test(function() {
  var canvas = new OffscreenCanvas(10, 20);
  canvas.getContext('webgl');
  canvas.width = 30;
  canvas.height = 40;
  assert_equals(canvas.width, 30);
  assert_equals(canvas.height, 40);
  var image = canvas.transferToImageBitmap();
  assert_equals(image.width, 30);
  assert_equals(image.height, 40);    
}, "Verify that writing to the width and height attributes of an OffscreenCanvas works when there is a webgl context attached.");

test(function() {
  var canvas = new OffscreenCanvas(10, 20);
  var ctx = canvas.getContext('2d');
  ctx.lineWidth = 5;
  canvas.width = 30;
  assert_equals(ctx.lineWidth, 1);
  ctx.lineWidth = 5;
  canvas.height = 40;
  assert_equals(ctx.lineWidth, 1);

}, "Verify that resizing a 2d context resets its state.");

test(function() {
  var canvas = new OffscreenCanvas(10, 20);
  var ctx = canvas.getContext('2d');
  ctx.lineWidth = 5;
  canvas.width = canvas.width;
  assert_equals(ctx.lineWidth, 1);
  ctx.lineWidth = 5;
  canvas.height = canvas.height;
  assert_equals(ctx.lineWidth, 1);
}, "Verify that setting the size of a 2d context to the same size it already had resets its state.");

async_test(function(t) {
  var placeholder = document.createElement('canvas');
  placeholder.width = 10;
  placeholder.height = 20;
  var offscreen = placeholder.transferControlToOffscreen();
  var ctx = offscreen.getContext('2d');
  t.step(function() {
    // Verify that setting the size of an OffscreenCanvas that has a placeholder works.
    offscreen.width = 30;
    offscreen.height = 40;
    assert_equals(offscreen.width, 30);
    assert_equals(offscreen.height, 40);
    var image = offscreen.transferToImageBitmap();
    assert_equals(image.width, 30);
    assert_equals(image.height, 40);
  });
  t.step(function() {
    // Verify that setting the size of an OffscreenCanvas does not directly update the size of its placeholder canvas.
    assert_equals(placeholder.width, 10);
    assert_equals(placeholder.height, 20);     
  });
  ctx.commit();
  t.step(function() {
    // Verify that commit() does not synchronously update the size of its placeholder canvas.
    assert_equals(placeholder.width, 10);
    assert_equals(placeholder.height, 20);     
  });
  // Set timeout acts as a sync barrier to allow commit to propagate
  setTimeout(function(){
    t.step(function() {
      // Verify that commit() asynchronously updates the size of its placeholder canvas.
      assert_equals(placeholder.width, 30);
      assert_equals(placeholder.height, 40);     
    });
    createImageBitmap(placeholder).then(image => {
      t.step(function() {
        // Verify that an image grabbed from the placeholder has the correct dimensions
        assert_equals(image.width, 30);
        assert_equals(image.height, 40);          
      });
      t.done();
    });
  }, 0);
}, "Verify that resizing an OffscreenCanvas with a 2d context propagates the new size to its placeholder canvas asynchronously, upon commit.");

async_test(function(t) {
  var placeholder = document.createElement('canvas');
  placeholder.width = 10;
  placeholder.height = 20;
  var offscreen = placeholder.transferControlToOffscreen();
  var ctx = offscreen.getContext('webgl');
  t.step(function() {
    // Verify that setting the size of an OffscreenCanvas that has a placeholder works.
    offscreen.width = 30;
    offscreen.height = 40;
    assert_equals(offscreen.width, 30);
    assert_equals(offscreen.height, 40);
    var image = offscreen.transferToImageBitmap();
    assert_equals(image.width, 30);
    assert_equals(image.height, 40);
  });
  t.step(function() {
    // Verify that setting the size of an OffscreenCanvas does not directly update the size of its placeholder canvas.
    assert_equals(placeholder.width, 10);
    assert_equals(placeholder.height, 20);     
  });
  ctx.commit();
  t.step(function() {
    // Verify that commit() does not synchronously update the size of its placeholder canvas.
    assert_equals(placeholder.width, 10);
    assert_equals(placeholder.height, 20);     
  });
  // Set timeout acts as a sync barrier to allow commit to propagate
  setTimeout(function(){
    t.step(function() {
      // Verify that commit() asynchronously updates the size of its placeholder canvas.
      assert_equals(placeholder.width, 30);
      assert_equals(placeholder.height, 40);     
    });
    createImageBitmap(placeholder).then(image => {
      t.step(function() {
        // Verify that an image grabbed from the placeholder has the correct dimensions
        assert_equals(image.width, 30);
        assert_equals(image.height, 40);          
      });
      t.done();
    });
  }, 0);
}, "Verify that resizing an OffscreenCanvas with a webgl context propagates the new size to its placeholder canvas asynchronously, upon commit.");

</script>