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