OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <title>Synchronized screenshot test</title> | 4 <title>Synchronized screenshot test</title> |
5 <style> | 5 <style> |
6 html, body { margin: 0; } | 6 html, body { margin: 0; } |
7 #log { height: 150px; overflow: auto; width: 512px; } | |
8 #log.failed { background-color: #FFAAAA; } | |
9 </style> | 7 </style> |
10 </head> | 8 </head> |
11 <body> | 9 <body> |
12 <canvas id="src-canvas" width="256" height="256"></canvas> | 10 <canvas id="canvas" width="256" height="256"></canvas> |
13 <canvas id="dest-canvas" width="256" height="256"></canvas><br/> | 11 <div id="text"></div> |
14 <div id="log"></div> | |
15 | 12 |
16 <script> | 13 <script> |
17 "use strict"; | 14 var canvas = document.getElementById("canvas"); |
18 | 15 var ctx = canvas.getContext("2d"); |
19 (function () { | 16 var text = document.getElementById("text"); |
20 window.__testComplete = false; | 17 function draw(r, g, b) { |
21 window.__testMessage = ''; | 18 var rgb = "RGB(" + r + "," + g + "," + b + ")"; |
22 window.__testSuccess = true; | 19 text.textContent = rgb; |
23 var log = document.getElementById("log"); | 20 ctx.fillStyle = rgb; |
24 var canvas1 = document.getElementById("src-canvas"); | 21 ctx.fillRect(0, 0, canvas.width, canvas.height); |
25 var canvas2 = document.getElementById("dest-canvas"); | 22 } |
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 avail
able.<br/>" + | |
32 "Please make sure Chrome was launched with --enable-gpu-
benchmarking." | |
33 window.__testComplete = true; | |
34 window.__testMessage = 'chrome.gpuBenchmarking.beginWindowSnapshotPNG no
t 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'>F
ail</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, sc
reenshotClearColor, validatedColor); | |
125 if (!window.__testSuccess) { | |
126 log.classList.add("failed"); | |
127 window.__testMessage = 'Color mismatch after ' + testCount + ' ite
rations.'; | |
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> | 23 </script> |
144 </body> | 24 </body> |
145 </html> | 25 </html> |
OLD | NEW |