dom/canvas/test/webgl-mochitest/test_capture.html

   1 <!DOCTYPE HTML>
   2 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   3
   4 <title>WebGL test: CaptureStream()</title>
   5
   6 <script src="/tests/SimpleTest/SimpleTest.js"></script>
   7 <link rel="stylesheet" href="/tests/SimpleTest/test.css">
   8 <script src="captureStream_common.js">
   9 <script src="driver-info.js"></script>
  10 <script src="webgl-util.js"></script>
  11 <script id="vs" type="x-shader/x-vertex">
  12
  13 attribute vec2 aVertCoord;
  14
  15 void main(void) {
  16   gl_Position = vec4(aVertCoord, 0.0, 1.0);
  17 }
  18
  19 </script>
  20 <script id="fs" type="x-shader/x-fragment">
  21
  22 precision mediump float;
  23 uniform vec4 uColor;
  24
  25 void main(void) {
  26   gl_FragColor = uColor;
  27 }
  28
  29 </script>
  30 <body>
  31 <script>
  32
  33 // Globals. Initialized during beginTest().
  34 var c;       // Canvas element captured by streams.
  35 var gl;      // WebGLContext of |c|.
  36 var h;       // CaptureStreamTestHelper holding utility test functions.
  37 var vauto;   // Video element with captureStream stream in automatic mode.
  38 var vmanual; // Video element with captureStream stream in manual (fps 0) mode.
  39 var vrate;   // Video element with captureStream stream with fixed frame rate.
  40
  41 /* Fails the test if there was a GL error */
  42 function checkGLError(info) {
  43   var error = gl.getError();
  44   // Comparing strings for sake of log output in hex format.
  45   is("0x" + error.toString(16), "0x0", "WebGL error [" + info + "]");
  46 }
  47
  48 function checkClearColorInitialRed() {
  49   info("Checking that clearing to red works for first frame.");
  50
  51   h.clearColor(c, h.red);
  52
  53   vauto.srcObject = c.captureStream();
  54   vmanual.srcObject = c.captureStream(0);
  55   vrate.srcObject = c.captureStream(10);
  56
  57   ok(h.isPixel(h.getPixel(vauto), h.blackTransparent),
  58     "vauto should not be drawn to before stable state");
  59   ok(h.isPixel(h.getPixel(vrate), h.blackTransparent),
  60     "vrate should not be drawn to before stable state");
  61   ok(h.isPixel(h.getPixel(vmanual), h.blackTransparent),
  62     "vmanual should not be drawn to before stable state");
  63
  64   return Promise.resolve()
  65     .then(() => h.pixelMustBecome(vauto, h.red, {
  66       infoString: "should become red automatically",
  67     }))
  68     .then(() => h.pixelMustBecome(vrate, h.red, {
  69       infoString: "should become red automatically",
  70     }))
  71     .then(() => h.pixelMustBecome(vmanual, h.red, {
  72       infoString: "should become red when we get to stable "
  73         + "state (first frame)",
  74     }))
  75 }
  76
  77 function checkDrawColorGreen() {
  78   info("Checking that drawing green results in green video frames.");
  79   var drawing = h.startDrawing(h.drawColor.bind(h, c, h.green));
  80   checkGLError('after DrawColor');
  81   return Promise.resolve()
  82     .then(() => h.pixelMustBecome(vauto, h.green, {
  83       infoString: "should become green automatically",
  84     }))
  85     .then(() => h.pixelMustBecome(vrate, h.green, {
  86       infoString: "should become green automatically",
  87     }))
  88     .then(() => h.pixelMustBecome(vmanual, h.red, {
  89       infoString: "should still be red",
  90     }))
  91     .then(() => h.requestFrame(vmanual))
  92     .then(() => h.pixelMustBecome(vmanual, h.green, {
  93       infoString: "should become green after requstFrame()",
  94     }))
  95     .then(() => drawing.stop());
  96 }
  97
  98 function checkClearColorRed() {
  99   info("Checking that clearing to red works.");
 100   var drawing = h.startDrawing(h.clearColor.bind(h, c, h.red));
 101   return Promise.resolve()
 102     .then(() => h.pixelMustBecome(vauto, h.red, {
 103       infoString: "should become red automatically",
 104     }))
 105     .then(() => h.pixelMustBecome(vrate, h.red, {
 106       infoString: "should become red automatically",
 107     }))
 108     .then(() => h.pixelMustBecome(vmanual, h.green, {
 109       infoString: "should still be green",
 110     }))
 111     .then(() => h.requestFrame(vmanual))
 112     .then(() => h.pixelMustBecome(vmanual, h.red, {
 113       infoString: "should become red after requestFrame()",
 114     }))
 115     .then(() => drawing.stop());
 116 }
 117
 118 function checkRequestFrameOrderGuarantee() {
 119   info("Checking that requestFrame() immediately after a draw " +
 120        "call results in the expected frame seen in the stream.");
 121   return Promise.resolve()
 122     .then(() => h.pixelMustBecome(vmanual, h.red, 0, "should still be red"))
 123     .then(() => h.drawColor(c, h.green)) // 1. Draw canvas green
 124     .then(() => h.requestFrame(vmanual)) // 2. Immediately request a frame
 125     .then(() => h.pixelMustBecome(vmanual, h.green, {
 126       infoString: "should become green after call order test",
 127     }))
 128 }
 129
 130 function checkEndedOnStop() {
 131   let promises = [vauto, vmanual, vrate].map(elem => {
 132     elem.srcObject.getTracks()[0].stop();
 133     return new Promise(resolve =>
 134       elem.addEventListener("ended", function endedListener(event) {
 135         ok(true, "Element " + elem.id + " ended.");
 136         resolve();
 137         elem.removeEventListener("ended", endedListener);
 138       }));
 139   });
 140   return Promise.all(promises);
 141 }
 142
 143
 144 function finish() {
 145   ok(true, 'Test complete.');
 146   SimpleTest.finish();
 147 }
 148
 149 function beginTest() {
 150   h = new CaptureStreamTestHelperWebGL();
 151
 152   c = h.createAndAppendElement('canvas', 'c');
 153   vauto = h.createAndAppendElement('video', 'vauto');
 154   vmanual = h.createAndAppendElement('video', 'vmanual');
 155   vrate = h.createAndAppendElement('video', 'vrate');
 156
 157   gl = c.getContext('webgl');
 158   if (!gl) {
 159     todo(false, 'WebGL is unavailable.');
 160     finish();
 161     return;
 162   }
 163
 164   gl.disable(gl.DEPTH_TEST);
 165
 166   prog = WebGLUtil.createProgramByIds(gl, 'vs', 'fs');
 167   if (!prog) {
 168     ok(false, 'Program linking should succeed.');
 169     return;
 170   }
 171
 172   // Setup vertex coordinates for drawing a rectangle across the whole canvas.
 173
 174   prog.aVertCoord = gl.getAttribLocation(prog, "aVertCoord");
 175   ok(prog.aVertCoord >= 0, '`aVertCoord` should be valid.');
 176
 177   var vertCoordArr = new Float32Array([
 178     -1, -1,
 179      1, -1,
 180     -1,  1,
 181      1,  1,
 182   ]);
 183   var vertCoordBuff = gl.createBuffer();
 184   gl.bindBuffer(gl.ARRAY_BUFFER, vertCoordBuff);
 185   gl.bufferData(gl.ARRAY_BUFFER, vertCoordArr, gl.STATIC_DRAW);
 186
 187   gl.useProgram(prog);
 188   gl.enableVertexAttribArray(prog.aVertCoord);
 189   gl.vertexAttribPointer(prog.aVertCoord, 2, gl.FLOAT, false, 0, 0);
 190
 191   // Setup the helper with a pointer to how to change fragment color.
 192
 193   var uColorLocation = gl.getUniformLocation(prog, "uColor");
 194   h.setFragmentColorLocation(uColorLocation);
 195
 196   checkGLError('after setup');
 197
 198   // Run tests.
 199
 200   Promise.resolve()
 201     .then(checkClearColorInitialRed)
 202     .then(checkDrawColorGreen)
 203     .then(checkClearColorRed)
 204     .then(checkRequestFrameOrderGuarantee)
 205     .then(checkEndedOnStop)
 206     .then(finish);
 207 }
 208
 209 SimpleTest.waitForExplicitFinish();
 210
 211 beginTest();
 212 </script>
 213