dom/canvas/test/webgl-conf/checkout/conformance/offscreencanvas/offscreencanvas-resize.html

   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>