third_party/WebKit/LayoutTests/fast/canvas/OffscreenCanvas-resize.html - chromium/src - Git at Google

 <!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>
	<!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>