| 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 |