OLD | NEW |
(Empty) | |
| 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.__testSuccess = true; |
| 22 var log = document.getElementById("log"); |
| 23 var canvas1 = document.getElementById("src-canvas"); |
| 24 var canvas2 = document.getElementById("dest-canvas"); |
| 25 |
| 26 if (!window.chrome || !window.chrome.gpuBenchmarking || |
| 27 !window.chrome.gpuBenchmarking.beginWindowSnapshotPNG) { |
| 28 canvas1.style.display = "none"; |
| 29 canvas2.style.display = "none"; |
| 30 log.innerHTML = "chrome.gpuBenchmarking.beginWindowSnapshotPNG not avail
able.<br/>" + |
| 31 "Please make sure Chrome was launched with --enable-gpu-
benchmarking." |
| 32 window.__testComplete = true; |
| 33 window.__testSuccess = false; |
| 34 return; |
| 35 } |
| 36 |
| 37 var totalTests = 100; |
| 38 var testInterval = 75; |
| 39 var testStartDelay = 1000; |
| 40 var testCount = 0; |
| 41 |
| 42 var ctx1 = canvas1.getContext("2d"); |
| 43 var ctx2 = canvas2.getContext("2d"); |
| 44 |
| 45 var clearColor = [0, 0, 0]; |
| 46 var screenshotClearColor = [0, 0, 0]; |
| 47 var validatedColor = [0, 0, 0]; |
| 48 function draw() { |
| 49 if (testCount == totalTests || !window.__testSuccess) |
| 50 return; |
| 51 |
| 52 clearColor[0] = Math.floor(Math.random() * 256.0); |
| 53 clearColor[1] = Math.floor(Math.random() * 256.0); |
| 54 clearColor[2] = Math.floor(Math.random() * 256.0); |
| 55 |
| 56 ctx1 |
| 57 ctx1.fillStyle="RGB(" + |
| 58 clearColor[0] + "," + |
| 59 clearColor[1] + "," + |
| 60 clearColor[2] + ")"; |
| 61 ctx1.fillRect(0,0,canvas1.width,canvas1.height); |
| 62 |
| 63 window.requestAnimationFrame(draw); |
| 64 }; |
| 65 draw(); |
| 66 |
| 67 var snapshotImg = new Image(); |
| 68 var snapshotBtn = document.getElementById("snapshot"); |
| 69 var snapshotColorSpan = document.getElementById("snapshotColorSpan"); |
| 70 var validatedColorSpan = document.getElementById("validatedColorSpan"); |
| 71 |
| 72 |
| 73 function colorsMatch(a, b) { |
| 74 return (Math.abs(a[0] - b[0]) < 2 && |
| 75 Math.abs(a[1] - b[1]) < 2 && |
| 76 Math.abs(a[2] - b[2]) < 2); |
| 77 } |
| 78 |
| 79 function logTest(id, a, b) { |
| 80 var entry = document.createElement("div"); |
| 81 var match = colorsMatch(a, b); |
| 82 entry.innerHTML = "Test " + id + ": " + |
| 83 "[" + a[0] +", " + a[1] +", " + a[2] +"] " + |
| 84 "~= " + |
| 85 "[" + b[0] +", " + b[1] +", " + b[2] +"] " + |
| 86 ": " + |
| 87 (match ? "<b style='color: green'>Pass</b>" : "<b style='color: red'>F
ail</b>"); |
| 88 log.insertBefore(entry, log.firstChild); |
| 89 return match; |
| 90 } |
| 91 |
| 92 // Take snapshots at an arbitrary interval and ensure that the resulting |
| 93 // image matches the color we last cleared the webgl canvas with |
| 94 function testSnapshot() { |
| 95 ++testCount; |
| 96 |
| 97 screenshotClearColor[0] = clearColor[0]; |
| 98 screenshotClearColor[1] = clearColor[1]; |
| 99 screenshotClearColor[2] = clearColor[2]; |
| 100 |
| 101 window.chrome.gpuBenchmarking.beginWindowSnapshotPNG( |
| 102 function(s) { |
| 103 snapshotImg.src = "data:image/png;base64," + s.data; |
| 104 ctx2.drawImage(snapshotImg,0,0); |
| 105 |
| 106 var img_data = ctx2.getImageData(0, 0, 1, 1); |
| 107 validatedColor[0] = img_data.data[0]; |
| 108 validatedColor[1] = img_data.data[1]; |
| 109 validatedColor[2] = img_data.data[2]; |
| 110 |
| 111 window.__testSuccess = window.__testSuccess && logTest(testCount, sc
reenshotClearColor, validatedColor); |
| 112 if (!window.__testSuccess) |
| 113 log.classList.add("failed"); |
| 114 |
| 115 if (testCount < totalTests || !window.__testSuccess) { |
| 116 setTimeout(testSnapshot, testInterval); |
| 117 } else { |
| 118 window.__testComplete = true; |
| 119 } |
| 120 } |
| 121 ); |
| 122 } |
| 123 setTimeout(testSnapshot, testStartDelay); |
| 124 })(); |
| 125 </script> |
| 126 </body> |
| 127 </html> |
OLD | NEW |