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 var testIsRunning = true; |
| 23 |
| 24 function parseParams() { |
| 25 var query = window.location.search.substring(1); |
| 26 if (!query) |
| 27 return; |
| 28 var params = query.split('&'); |
| 29 for (var i = 0, len = params.length; i < len; i++) { |
| 30 var pair = params[i].split('='); |
| 31 if (pair.length == 1) |
| 32 testParams[pair[0]] = true; |
| 33 else |
| 34 testParams[pair[0]] = pair[1]; |
| 35 } |
| 36 } |
| 37 |
| 38 function setCoordinates(e) { |
| 39 // Prevent the page from dirtying when the test has already ended. Otherwise, |
| 40 // on OSX some tests never get the domAutomationController FINISHED message. |
| 41 if (!testIsRunning) |
| 42 return; |
| 43 |
| 44 // Ignore mouse events with wrong Y coordinate. |
| 45 if (e.clientY != parseInt(testParams.y)) |
| 46 return; |
| 47 |
| 48 mouseX = e.clientX; |
| 49 if (testParams.inputDirty) { |
| 50 document.getElementById('text').firstChild.textContent = |
| 51 mouseX.toString(); |
| 52 } |
| 53 if (testParams.inputHeavy) { |
| 54 sleep(parseInt(testParams.delayTimeMS)); |
| 55 } |
| 56 } |
| 57 |
| 58 function init() { |
| 59 parseParams(); |
| 60 |
| 61 if (testParams.mode == 'webgl') { |
| 62 var canvas = document.getElementById('canvas'); |
| 63 if (!canvas) |
| 64 return false; |
| 65 canvas.width = parseInt(testParams.canvasWidth); |
| 66 canvas.height = parseInt(testParams.canvasWidth); |
| 67 try { |
| 68 // Specify antialiasing to ensure that we get a BlitFramebufferEXT in |
| 69 // the trace when the compositor consumes a webgl frame. |
| 70 gl = canvas.getContext('webgl', { antialias: true }); |
| 71 } catch (e) {} |
| 72 if (!gl) { |
| 73 try { |
| 74 gl = canvas.getContext('experimental-webgl'); |
| 75 } catch (e) { |
| 76 return false; |
| 77 } |
| 78 } |
| 79 return true; |
| 80 } else if (testParams.mode == 'software') { |
| 81 var table = document.getElementById('table'); |
| 82 table.style.backgroundColor = '#ff00ff'; |
| 83 return true; |
| 84 } |
| 85 } |
| 86 |
| 87 function onLoad() { |
| 88 if (init()) |
| 89 window.webkitRequestAnimationFrame(draw); |
| 90 else |
| 91 endTest(); |
| 92 } |
| 93 |
| 94 function sleep(milliseconds) { |
| 95 var start = Date.now(); |
| 96 while(Date.now() - start <= milliseconds); |
| 97 } |
| 98 |
| 99 function draw() { |
| 100 if (testParams.rafHeavy) { |
| 101 sleep(parseInt(testParams.delayTimeMS)); |
| 102 } |
| 103 |
| 104 if (testParams.mode == 'webgl') { |
| 105 gl.viewport(0, 0, testParams.canvasWidth, testParams.canvasWidth); |
| 106 if (testParams.paintHeavy) { |
| 107 gl.clearColor(0, 0, 0.0, 1.0); |
| 108 for (var i = 0; i < 1000; ++i) |
| 109 gl.clear(gl.COLOR_BUFFER_BIT); |
| 110 } |
| 111 gl.clearColor(mouseX, testParams.clearColorGreen, 0.0, 1.0); |
| 112 gl.clear(gl.COLOR_BUFFER_BIT); |
| 113 } else if (testParams.mode == 'software') { |
| 114 var table = document.getElementById('table'); |
| 115 // Encode mouse x value into color channels (support up to 64k x values). |
| 116 var g = (mouseX & 0xff00) >> 8; |
| 117 var b = (mouseX & 0xff); |
| 118 table.style.backgroundColor = 'rgb(0, ' + g + ', ' + b + ')'; |
| 119 // When no inputs are coming in, the first table won't change. Since we |
| 120 // still need to cause a paint, toggle the color of another element: |
| 121 var table2 = document.getElementById('table2'); |
| 122 table2.style.backgroundColor = (frameCount & 1) ? 'gray' : 'silver'; |
| 123 if (testParams.paintHeavy) { |
| 124 var body = document.getElementById('body'); |
| 125 body.style.backgroundColor = (frameCount & 1) ? 'silver' : 'gray'; |
| 126 } |
| 127 } |
| 128 |
| 129 frameCount++; |
| 130 if (frameCount == parseInt(testParams.numFrames)) { |
| 131 if (testParams.mode == 'webgl') |
| 132 gl.finish(); |
| 133 endTest(); |
| 134 } else { |
| 135 window.webkitRequestAnimationFrame(draw); |
| 136 } |
| 137 } |
| 138 |
| 139 function endTest() { |
| 140 testIsRunning = false; |
| 141 domAutomationController.setAutomationId(1); |
| 142 domAutomationController.send('FINISHED'); |
| 143 } |
| 144 </script> |
| 145 </head> |
| 146 <style> |
| 147 #table { |
| 148 height: 10px; |
| 149 width: 10px; |
| 150 } |
| 151 </style> |
| 152 <body id="body" style="margin:0px" onload="onLoad()" |
| 153 onmousemove="setCoordinates(event)"> |
| 154 <table id="table"><tr/></table> |
| 155 <table id="table2"><tr/></table> |
| 156 <canvas id="canvas"></canvas> |
| 157 <p><b id="text">x</b></p> |
| 158 </body> |
| 159 </html> |
OLD | NEW |