dom/canvas/test/webgl-conf/checkout/conformance/rendering/clear-default-framebuffer-with-scissor-test.html

   1 <!--
   2 Copyright (c) 2021 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
   7 <!DOCTYPE html>
   8 <html>
   9 <head>
  10 <meta charset="utf-8">
  11 <title>Clear with scissor bug on WebGL canvas</title>
  12 <link rel="stylesheet" href="../../resources/js-test-style.css"/>
  13 <script src="../../js/js-test-pre.js"></script>
  14 <script src="../../js/webgl-test-utils.js"></script>
  15 </head>
  16 <body>
  17 <div id="description"></div>
  18 <div id="console"></div>
  19 <canvas id="canvas-webgl" width="20" height="20"> </canvas>
  20 <canvas id="canvas-2d" width="20" height="20"> </canvas>
  21
  22 <script>
  23 "use strict";
  24 // This test exposes an issue in older Intel D3D drivers.
  25 var wtu = WebGLTestUtils;
  26
  27 function test_clear_with_scissor_on_canvas()
  28 {
  29   var canvasWebGL = document.getElementById("canvas-webgl");
  30   var gl = canvasWebGL.getContext("webgl", { antialias:false });
  31   const scissorRectSize = 16;
  32   gl.enable(gl.SCISSOR_TEST);
  33   gl.scissor(0, 0, scissorRectSize, scissorRectSize);
  34   gl.clearColor(0, 1, 0, 1);
  35   gl.clear(gl.COLOR_BUFFER_BIT);
  36
  37   // The issue is found in the Chromium compositor so we need another canvas element for reproduction.
  38   var canvas2D = document.getElementById("canvas-2d");
  39   var context2D = canvas2D.getContext('2d');
  40   context2D.drawImage(canvasWebGL, 0, 0);
  41   context2D.fill();
  42
  43   var imageData =
  44     context2D.getImageData(0, canvas2D.clientHeight - scissorRectSize, scissorRectSize, scissorRectSize);
  45   var data = imageData.data;
  46   var expectedColor = [0, 255, 0, 255];
  47   for (var pixelIndex = 0; pixelIndex < scissorRectSize * scissorRectSize; ++pixelIndex) {
  48     for (var colorIndex = 0; colorIndex < 4; ++colorIndex) {
  49       if (data[pixelIndex * 4 + colorIndex] !== expectedColor[colorIndex]) {
  50         var y = Math.floor(pixelIndex / scissorRectSize);
  51         var x = pixelIndex % scissorRectSize;
  52         testFailed("The canvas color at (" + x + ", " + y + ") is not expected");
  53         return;
  54       }
  55     }
  56   }
  57 }
  58
  59 test_clear_with_scissor_on_canvas();
  60
  61 description("Exposes clearing WebGL canvas with scissor bug on Intel D3D drivers - see https://crbug.com/1206763");
  62 var successfullyParsed = true;
  63
  64 </script>
  65 <script src="../../js/js-test-post.js"></script>
  66
  67 </body>
  68 </html>