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 |