Home | History | Annotate | Download | only in gpu 
      1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4 <title>Synchronized screenshot test</title>
      5 <style>
      6   html, body { margin: 0; }
      7   #log { height: 150px; overflow: auto; width: 512px; }
      8   #log.failed { background-color: #FFAAAA; }
      9 </style>
     10 </head>
     11 <body>
     12   <canvas id="src-canvas" width="256" height="256"></canvas>
     13   <canvas id="dest-canvas" width="256" height="256"></canvas><br/>
     14   <div id="log"></div>
     15 
     16   <script>
     17     "use strict";
     18 
     19     (function () {
     20       window.__testComplete = false;
     21       window.__testMessage = '';
     22       window.__testSuccess = true;
     23       var log = document.getElementById("log");
     24       var canvas1 = document.getElementById("src-canvas");
     25       var canvas2 = document.getElementById("dest-canvas");
     26 
     27       if (!window.chrome || !window.chrome.gpuBenchmarking ||
     28           !window.chrome.gpuBenchmarking.beginWindowSnapshotPNG) {
     29         canvas1.style.display = "none";
     30         canvas2.style.display = "none";
     31         log.innerHTML = "chrome.gpuBenchmarking.beginWindowSnapshotPNG not available.<br/>" +
     32                         "Please make sure Chrome was launched with --enable-gpu-benchmarking."
     33         window.__testComplete = true;
     34         window.__testMessage = 'chrome.gpuBenchmarking.beginWindowSnapshotPNG not available.';
     35         window.__testSuccess = false;
     36         return;
     37       }
     38 
     39       var totalTests = 50;
     40       var testInterval = 75;
     41       var testStartDelay = 1000;
     42       var testCount = 0;
     43 
     44       var ctx1 = canvas1.getContext("2d");
     45       var ctx2 = canvas2.getContext("2d");
     46 
     47       var clearColor = [0, 0, 0];
     48       var screenshotClearColor = [0, 0, 0];
     49       var validatedColor = [0, 0, 0];
     50       var capturing = false;
     51       function draw() {
     52         if (testCount == totalTests || !window.__testSuccess)
     53           return;
     54 
     55         if (!capturing) {
     56           clearColor[0] = Math.floor(Math.random() * 256.0);
     57           clearColor[1] = Math.floor(Math.random() * 256.0);
     58           clearColor[2] = Math.floor(Math.random() * 256.0);
     59 
     60           ctx1.fillStyle="RGB(" +
     61             clearColor[0] + "," +
     62             clearColor[1] + "," +
     63             clearColor[2] + ")";
     64           ctx1.fillRect(0,0,canvas1.width,canvas1.height);
     65         }
     66 
     67         window.requestAnimationFrame(draw);
     68       };
     69       draw();
     70 
     71       var snapshotImg = new Image();
     72       var snapshotBtn = document.getElementById("snapshot");
     73       var snapshotColorSpan = document.getElementById("snapshotColorSpan");
     74       var validatedColorSpan = document.getElementById("validatedColorSpan");
     75       
     76 
     77       function colorsMatch(a, b) {
     78         return (Math.abs(a[0] - b[0]) < 2 &&
     79                 Math.abs(a[1] - b[1]) < 2 &&
     80                 Math.abs(a[2] - b[2]) < 2);
     81       }
     82 
     83       function logString(str) {
     84         var entry = document.createElement("div");
     85         entry.innerHTML = str
     86         log.insertBefore(entry, log.firstChild);
     87       }
     88 
     89       function colorToString(a) {
     90         return "[" + a[0] +", " + a[1] +", " + a[2] +"]";
     91       }
     92 
     93       function logTest(id, a, b) {
     94         var match = colorsMatch(a, b);
     95         logString("Test " + id + ": " +
     96           colorToString(a) + " " +
     97           "~= " + 
     98           colorToString(b) + " " +
     99           ": " +
    100           (match ? "<b style='color: green'>Pass</b>" : "<b style='color: red'>Fail</b>"));
    101         return match;
    102       }
    103 
    104       // Take snapshots at an arbitrary interval and ensure that the resulting
    105       // image matches the color we last cleared the webgl canvas with
    106       function testSnapshot() {
    107         capturing = true;
    108         ++testCount;
    109 
    110         screenshotClearColor[0] = clearColor[0];
    111         screenshotClearColor[1] = clearColor[1];
    112         screenshotClearColor[2] = clearColor[2];
    113 
    114         window.chrome.gpuBenchmarking.beginWindowSnapshotPNG(
    115           function(s) {
    116             snapshotImg.src = "data:image/png;base64," + s.data;
    117             ctx2.drawImage(snapshotImg,0,0);
    118 
    119             var img_data = ctx2.getImageData(0, 0, 1, 1);
    120             validatedColor[0] = img_data.data[0];
    121             validatedColor[1] = img_data.data[1];
    122             validatedColor[2] = img_data.data[2];
    123 
    124             window.__testSuccess = window.__testSuccess && logTest(testCount, screenshotClearColor, validatedColor);
    125             if (!window.__testSuccess) {
    126               log.classList.add("failed");
    127               window.__testMessage = 'Color mismatch after ' + testCount + ' iterations.';
    128             }
    129 
    130             capturing = false;
    131 
    132             if (testCount < totalTests && window.__testSuccess) {
    133               if (window.__testSuccess)
    134                 setTimeout(testSnapshot, testInterval);
    135             } else {
    136               window.__testComplete = true;
    137             }
    138           }
    139         );
    140       }
    141       setTimeout(testSnapshot, testStartDelay);
    142     })();
    143   </script>
    144  </body>
    145 </html>
    146