OLD | NEW |
| (Empty) |
1 <html> | |
2 <head> | |
3 <script type="text/javascript"> | |
4 /** | |
5 * @fileoverview This page executes various animation behaviors based on URL | |
6 * arguments to test input latency. There are two main modes of | |
7 * operation: webgl and software. Both modes use | |
8 * requestAnimationFrame to drive the update rate. The basic task | |
9 * of the page is to collect mouse input coordinates in the input | |
10 * handler and render with the latest input coordinate in RAF. The | |
11 * latency test will look at the rendering trace data to detect | |
12 * the latest mouse coordinate that affected the frame. For | |
13 * software runs, the pixel at 0,0 on the page must contain the | |
14 * mouse coordinate encoded as a color. | |
15 */ | |
16 | |
17 var frameCountWarmup = 5; | |
18 var frameCount = 0; | |
19 var gl = null; | |
20 var mouseX = 0; | |
21 var testParams = {}; | |
22 | |
23 function parseParams() { | |
24 var query = window.location.search.substring(1); | |
25 if (!query) | |
26 return; | |
27 var params = query.split('&'); | |
28 for (var i = 0, len = params.length; i < len; i++) { | |
29 var pair = params[i].split('='); | |
30 if (pair.length == 1) | |
31 testParams[pair[0]] = true; | |
32 else | |
33 testParams[pair[0]] = pair[1]; | |
34 } | |
35 } | |
36 | |
37 function setCoordinates(e) { | |
38 // Ignore mouse events with wrong Y coordinate. | |
39 if (e.clientY != parseInt(testParams.y)) | |
40 return; | |
41 | |
42 mouseX = e.clientX; | |
43 if (testParams.inputDirty) { | |
44 document.getElementById('text').firstChild.textContent = | |
45 mouseX.toString(); | |
46 } | |
47 if (testParams.inputHeavy) { | |
48 sleep(parseInt(testParams.delayTimeMS)); | |
49 } | |
50 } | |
51 | |
52 function init() { | |
53 parseParams(); | |
54 | |
55 if (testParams.mode == 'webgl') { | |
56 var canvas = document.getElementById('canvas'); | |
57 if (!canvas) | |
58 return false; | |
59 canvas.width = parseInt(testParams.canvasWidth); | |
60 canvas.height = parseInt(testParams.canvasWidth); | |
61 try { | |
62 // Specify antialiasing to ensure that we get a BlitFramebufferEXT in | |
63 // the trace when the compositor consumes a webgl frame. | |
64 gl = canvas.getContext('webgl', { antialias: true }); | |
65 } catch (e) {} | |
66 if (!gl) { | |
67 try { | |
68 gl = canvas.getContext('experimental-webgl'); | |
69 } catch (e) { | |
70 return false; | |
71 } | |
72 } | |
73 return true; | |
74 } else if (testParams.mode == 'software') { | |
75 var table = document.getElementById('table'); | |
76 table.style.backgroundColor = '#ff00ff'; | |
77 return true; | |
78 } | |
79 } | |
80 | |
81 function onLoad() { | |
82 if (init()) | |
83 window.webkitRequestAnimationFrame(draw); | |
84 else | |
85 endTest(); | |
86 } | |
87 | |
88 function sleep(milliseconds) { | |
89 var start = Date.now(); | |
90 while(Date.now() - start <= milliseconds); | |
91 } | |
92 | |
93 function draw() { | |
94 if (testParams.rafHeavy) { | |
95 sleep(parseInt(testParams.delayTimeMS)); | |
96 } | |
97 | |
98 if (testParams.mode == 'webgl') { | |
99 gl.viewport(0, 0, testParams.canvasWidth, testParams.canvasWidth); | |
100 if (testParams.paintHeavy) { | |
101 gl.clearColor(0, 0, 0.0, 1.0); | |
102 for (var i = 0; i < 1000; ++i) | |
103 gl.clear(gl.COLOR_BUFFER_BIT); | |
104 } | |
105 gl.clearColor(mouseX, testParams.clearColorGreen, 0.0, 1.0); | |
106 gl.clear(gl.COLOR_BUFFER_BIT); | |
107 } else if (testParams.mode == 'software') { | |
108 var table = document.getElementById('table'); | |
109 // Encode mouse x value into color channels (support up to 64k x values). | |
110 var g = (mouseX & 0xff00) >> 8; | |
111 var b = (mouseX & 0xff); | |
112 table.style.backgroundColor = 'rgb(0, ' + g + ', ' + b + ')'; | |
113 // When no inputs are coming in, the first table won't change. Since we | |
114 // still need to cause a paint, toggle the color of another element: | |
115 var table2 = document.getElementById('table2'); | |
116 table2.style.backgroundColor = (frameCount & 1) ? 'gray' : 'silver'; | |
117 if (testParams.paintHeavy) { | |
118 var body = document.getElementById('body'); | |
119 body.style.backgroundColor = (frameCount & 1) ? 'silver' : 'gray'; | |
120 } | |
121 } | |
122 | |
123 frameCount++; | |
124 if (frameCount == parseInt(testParams.numFrames)) { | |
125 if (testParams.mode == 'webgl') | |
126 gl.finish(); | |
127 endTest(); | |
128 } else { | |
129 window.webkitRequestAnimationFrame(draw); | |
130 } | |
131 } | |
132 | |
133 function endTest() { | |
134 domAutomationController.setAutomationId(1); | |
135 domAutomationController.send('FINISHED'); | |
136 } | |
137 </script> | |
138 </head> | |
139 <style> | |
140 #table { | |
141 height: 10px; | |
142 width: 10px; | |
143 } | |
144 </style> | |
145 <body id="body" style="margin:0px" onload="onLoad()" | |
146 onmousemove="setCoordinates(event)"> | |
147 <table id="table"><tr/></table> | |
148 <table id="table2"><tr/></table> | |
149 <canvas id="canvas"></canvas> | |
150 <p><b id="text">x</b></p> | |
151 </body> | |
152 </html> | |
OLD | NEW |