Add webview sample for captureVisibleRegion().

chrome/common/extensions/docs/examples/api/webview/capturevisibleregion/test.js

+// Copyright (c) 2016 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+document.addEventListener('DOMContentLoaded', function() {
+
+  var deleteNode = function(node) {
+    node.parentNode.removeChild(node);
+  };
+
+  var deleteAWebview = function() {
+    deleteNode(document.querySelector('.ib'));
+  };
+
+  var findContainer = function(node) {
+    var container = node;
+    while (container && !container.classList.contains('ib')) {
+      container = container.parentElement;
+    }
+    return container;
+  };
+
+  var handleDelete = function(event) {
+    var container = findContainer(event.target);
+    if (container) {
+      deleteNode(container);
+    }
+  };
+
+  var viewScreenshot = function(wv) {
+    return function(data) {
+      chrome.app.window.create('display.html', {
+        innerBounds: { width: wv.clientWidth, height: wv.clientHeight }
+      },
+      function(aw) {
+        var d = aw.contentWindow.document;
+        d.addEventListener('DOMContentLoaded', function() {
+          var img = d.createElement('img');
+          img.src = data;
+          d.body.appendChild(img);
+        });
+      });
+    };
+  };
+
+  var handleScreenshot = function(event) {
+    var container = findContainer(event.target);
+    var wv = container.querySelector('webview');
+    wv.captureVisibleRegion({format:'png'}, viewScreenshot(wv));
+  };
+
+  var getControls = (function() {
+    var controls = document.createElement('div');
+    controls.className = 'controls';
+    controls.innerHTML = '<button id="screenshot">Screenshot</button>' +
+        '<button id="delete">Delete webview</button>';
+
+    return function() {
+      var c = controls.cloneNode(true);
+      c.querySelector('#delete').addEventListener('click', handleDelete);
+      c.querySelector('#screenshot').
+          addEventListener('click', handleScreenshot);
+      return c;
+    };
+  })();
+
+  var createWebview = (function(){
+    var id = 0;
+    return function() {
+      var wv = document.createElement('webview');
+      wv.partition = "partition";
+      wv.src = 'test2.html';
+      wv.allowtransparency = document.getElementById('transparent').checked;
+      wv.style.width = "640px";
+      wv.style.height = "480px";
+
+      var container = document.createElement('div');
+      container.id = 'wvid0' + id;
+      id++;
+
+      container.className = 'ib';
+
+      container.appendChild(wv);
+      container.appendChild(getControls());
+      return container;
+    };
+  })();
+
+  document.getElementById('delete_wv').
+      addEventListener('click', deleteAWebview);
+  document.getElementById('add_wv').
+      addEventListener('click', function() {
+        document.body.appendChild(createWebview());
+      });
+});