dom/canvas/test/webgl-conf/checkout/conformance/manual/framebuffers-keep-contents-exiting-fullscreen-mode.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
   7 <!DOCTYPE html>
   8 <html>
   9 <head>
  10 <meta charset="utf-8">
  11 <title>Check that framebuffers keep contents exiting fullscreen mode.</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 <style>
  16 canvas {
  17     width: 100%;
  18     height: 50px;
  19     border: 1px solid black;
  20 }
  21 #f {
  22     left: 0px;
  23     top: 0px;
  24 }
  25 #inner {
  26 }
  27 input.button {
  28     font-size: 36pt;
  29 }
  30 .redbox {
  31     border: 1px solid black;
  32     background-color: red;
  33 }
  34 #canvasholder {
  35     position: relative;
  36 }
  37 #clabel {
  38     position: absolute;
  39     width: 100%;
  40     top: 0px;
  41     left: 0px;
  42     font-size: 40px;
  43     z-index: 10;
  44     text-align: center;
  45 }
  46 </style>
  47 </head>
  48 <body>
  49 <pre>
  50 This test must be run manually.
  51
  52 Checks that framebuffers keep their contents going into and out of fullscreen mode.
  53
  54 Through the entire test you should see a <span class="redbox">red rectangle</span>. If it is not <span class="redbox">red</span> in all cases the test has failed.
  55 </pre>
  56 <div id="f">
  57   <div id="inner">
  58     <div id="buttonHolder">
  59       <div><input id="button" class="button" type="button" value="Click this button to continue the test"/></div>
  60       <div id="canvasholder">
  61         <canvas id='c'></canvas>
  62         <div id='clabel'>
  63           should be red
  64         </div>
  65       </div>
  66     </div>
  67   </div>
  68 </div>
  69 <div id="description"></div>
  70 <div id="console"></div>
  71 <script>
  72 "use strict";
  73 var wtu = WebGLTestUtils;
  74 var testedFullScreen = false;
  75 var c = document.getElementById("c");
  76 var button = document.getElementById("button");
  77 var buttonHolder = document.getElementById("buttonHolder");
  78 var gl = wtu.create3DContext(c);
  79 if (!gl) {
  80   testFailed("can't init WebGL");
  81 }
  82
  83 var checkState = function() {
  84   debug("");
  85   wtu.checkCanvasRect(gl, 0, 0, 1, 1, [0, 255, 0, 255]);
  86   shouldBeNonNull("gl.getParameter(gl.FRAMEBUFFER_BINDING)");
  87   wtu.glErrorShouldBe(gl, gl.NO_ERROR, "there should be no errors");
  88 }
  89
  90 var checkFramebufferState = function(fullscreen) {
  91   checkState();
  92
  93   debug("fullscreen:" + fullscreen);
  94
  95   if (fullscreen) {
  96     // Not sure if this is needed but need to make sure
  97     // we at least went fullscreen once.
  98     testedFullScreen = true;
  99   } else {
 100     if (testedFullScreen) {
 101       finishTest();
 102     }
 103   }
 104 };
 105
 106 var test = function() {
 107   if (!wtu.setupFullscreen("button", "f", checkFramebufferState)) {
 108     testPassed("Browser does not support fullscreen mode. This is OK");
 109     finishTest();
 110     return;
 111   }
 112
 113   var fb = gl.createFramebuffer();
 114   var tex = gl.createTexture();
 115
 116   gl.clearColor(1,0,0,1);
 117   gl.clear(gl.COLOR_BUFFER_BIT);
 118
 119   gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
 120   gl.bindTexture(gl.TEXTURE_2D, tex);
 121   gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
 122   gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0);
 123   shouldBe("gl.checkFramebufferStatus(gl.FRAMEBUFFER)", "gl.FRAMEBUFFER_COMPLETE");
 124
 125   gl.clearColor(0, 1, 0, 1);
 126   gl.clear(gl.COLOR_BUFFER_BIT);
 127
 128   checkState();
 129 };
 130 test();
 131
 132 </script>
 133 </body>
 134 </html>