Make OffscreenCanvas Webgl Context work with preserveDrawingBuffer flag

third_party/WebKit/LayoutTests/fast/canvas/OffscreenCanvas-webgl-preserveDrawingBuffer.html

+<canvas id="withoutPreserve" width="50" height="50"></canvas>
+<canvas id="withPreserve" width="50" height="50"></canvas>

[Justin Novosad, 2017/01/11 21:40:04]

You don't need these.

[xlai (Olivia), 2017/01/12 20:04:47]

Done.

+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script>
+
+function getPixelsFromOffscreenWebgl(placeHolderCanvasId, preserveFlag) {
+  var canvas = document.getElementById(placeHolderCanvasId);

[Justin Novosad, 2017/01/11 21:40:04]

Just do:
var canvas = document.createElement('canvas');

[xlai (Olivia), 2017/01/12 20:04:47]

Done.

+  var offscreenCanvas = canvas.transferControlToOffscreen();
+  var gl = offscreenCanvas.getContext("webgl", {preserveDrawingBuffer: preserveFlag});
+
+  // Draw some color on gl and commit
+  gl.clearColor(1, 0, 1, 1);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  gl.commit();
+
+  var pixels = new Uint8Array(50 * 50 * 4);
+  gl.readPixels(0, 0, 50, 50, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
+  return pixels;
+}
+
+test(function() {
+  var pixelsPreserve = getPixelsFromOffscreenWebgl("withPreserve", true);
+  assert_equals(pixelsPreserve[0], 255);
+  assert_equals(pixelsPreserve[1], 0);
+  assert_equals(pixelsPreserve[2], 255);
+  assert_equals(pixelsPreserve[3], 255);
+}, "test if OffscreenCanvas.webgl retains context if preserveDrawingBuffer is true.");
+
+test(function() {
+  var pixelsNoPreserve = getPixelsFromOffscreenWebgl("withoutPreserve", false);
+  assert_equals(pixelsNoPreserve[0], 0);
+  assert_equals(pixelsNoPreserve[1], 0);
+  assert_equals(pixelsNoPreserve[2], 0);
+  assert_equals(pixelsNoPreserve[3], 0);
+}, "test if OffscreenCanvas.webgl loses context if presereDrawingbuffer is false.");
+</script>