offscreencanvas-resize.html (3351B)
1 <!-- 2 Copyright (c) 2019 The Khronos Group Inc. 3 Use of this source code is governed by an MIT-style license that can be 4 found in the LICENSE.txt file. 5 --> 6 <!DOCTYPE html> 7 <html> 8 <head> 9 <meta charset="utf-8"> 10 <title>Resizing Test for OffscreenCanvas commit()</title> 11 <link rel="stylesheet" href="../../resources/js-test-style.css"/> 12 <script src="../../js/js-test-pre.js"></script> 13 <script src="../../js/webgl-test-utils.js"></script> 14 <script src="../../js/tests/canvas-tests-utils.js"></script> 15 </head> 16 <body> 17 <div id="description"></div> 18 <div id="console"></div> 19 <script> 20 "use strict"; 21 description("This test ensures that the OffscreenCanvas context returns the correct image size after resizing and calling commit()."); 22 23 function testResizeOnNewOffscreenCanvas() { 24 var canvas = new OffscreenCanvas(10, 20); 25 canvas.getContext("webgl"); 26 canvas.width = 30; 27 canvas.height = 40; 28 assertWidthAndHeight(canvas, "canvas", 30, 40); 29 var imagebitmap = canvas.transferToImageBitmap(); 30 assertWidthAndHeight(imagebitmap, "imagebitmap", 30, 40); 31 } 32 33 function testResizeOnTransferredOffscreenCanvas() { 34 var placeholder = document.createElement("canvas"); 35 var offscreencanvas = transferredOffscreenCanvasCreation(placeholder, 10, 20); 36 var ctx = offscreencanvas.getContext("webgl"); 37 38 // Verify that setting the size of an OffscreenCanvas that has a placeholder works. 39 offscreencanvas.width = 30; 40 offscreencanvas.height = 40; 41 assertWidthAndHeight(offscreencanvas, "resized offscreencanvas", 30, 40); 42 var imagebitmap = offscreencanvas.transferToImageBitmap(); 43 assertWidthAndHeight(imagebitmap, "imagebitmap transferred from resized offscreencanvas" , 30, 40); 44 45 // Verify that setting the size of an OffscreenCanvas does not directly update the size of its placeholder canvas. 46 assertWidthAndHeight(placeholder, "placeholder canvas", 10, 20); 47 48 var asyncStepsCompleted = 0; 49 ctx.commit(); 50 createImageBitmap(placeholder).then(image => { 51 // Verify that the placeholder was not updated synchronously. 52 assertWidthAndHeight(image, "imagebitmap from placeholder canvas", 10, 20); 53 asyncStepsCompleted++; 54 if (asyncStepsCompleted == 2) { 55 finishTest(); 56 } 57 }); 58 59 // Set timeout acts as a sync barrier to allow commit to propagate 60 setTimeout(function() { 61 // Verify that commit() asynchronously updates the size of its placeholder canvas. 62 assertWidthAndHeight(placeholder, "placeholder canvas", 30, 40); 63 64 // Verify that width/height attributes are not settable 65 shouldThrow("placeholder.width = 50"); 66 shouldThrow("placeholder.height = 60"); 67 68 assertWidthAndHeight(placeholder, "placeholder canvas after size reset", 30, 40); 69 70 createImageBitmap(placeholder).then(image => { 71 // Verify that an image grabbed from the placeholder has the correct dimensions 72 assertWidthAndHeight(image, "imagebitmap from placeholder canvas", 30, 40); 73 asyncStepsCompleted++; 74 if (asyncStepsCompleted == 2) { 75 finishTest(); 76 } 77 }); 78 }, 0); 79 } 80 81 if (!window.OffscreenCanvas) { 82 testPassed("No OffscreenCanvas support"); 83 finishTest(); 84 } else if (!new OffscreenCanvas(10, 20).getContext("webgl").commit) { 85 testPassed("commit() not supported"); 86 finishTest(); 87 } else { 88 testResizeOnNewOffscreenCanvas(); 89 testResizeOnTransferredOffscreenCanvas(); 90 } 91 </script> 92 </body> 93 </html>