<!DOCTYPE html>
<meta charset="utf8">
<title>HTML5 Game Benchmarks</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<style>
.test .results {
display: none;
}
.test.pass .results, .test.fail .results {
display: block;
}
.test.pass .name {
font-weight: bold;
color: #008800;
}
.test.fail .name {
font-weight: bold;
color: #CC0000;
}
.test .error-message {
display: none;
}
.test.error {
font-weight: bold;
color: #FFFFFF;
background-color: #880000;
}
.test.error .error-message {
display: block;
}
table thead th, table tfoot th {
text-align: center;
font-weight: bold;
}
table tbody th {
text-align: left;
font-weight: bold;
}
table {
border-collapse: collapse;
}
table th, table td {
border: 2px solid #CCCCCC;
padding: 0.25em 0.5em;
}
#all-test-results {
width: 40em;
height: 20em;
}
</style>
<h1>PerfMarks</h1>
<p>Basic benchmarks to measure HTML5 performance and support for game related features.<p>
<h2>Performance Tests</h2>
<p style="display: none;"><button disabled id="start-performance-tests">Run Tests</button></p>
<p><label>Browser
<select id="ua-browser">
<option value="">Other...</option>
<optgroup label="Desktop">
<option>Firefox 3.6</option>
<option>Firefox 4-8</option>
<option>Firefox 9</option>
<option>Firefox 10</option>
<option>Google Chrome</option>
<option>IE7</option>
<option>IE8</option>
<option>IE9</option>
<option>IE10</option>
<option>Opera 11.x</option>
<option>Safari 5.1.5</option>
</optgroup>
<optgroup label="Mobile">
<option>Android Browser</option>
<option>Blackberry Webkit</option>
<option>Google Chrome</option>
<option>Mobile Firefox 10</option>
<option>Mobile Google Chrome</option>
<option>Mobile IE8</option>
<option>Mobile IE9</option>
<option>Mobile Safari</option>
<option>Opera Mobile</option>
</optgroup>
</select>
</label>
<input type="text" id="ua-browser-custom">
</p>
<p><label>Device name
<select id="ua-device-name">
<option value="">Other...</option>
<optgroup label="Laptop Computers">
<option>Macbook Pro 2.8 Ghz Intel Core 2 Duo 8 GB 1067 MHz DDR3</option>
</optgroup>
<optgroup label="Android">
<option>Amazon Kindle Fire</option>
<option>Asus Eee Pad Transformer TF101</option>
<option>Asus Transformer Prime TF201</option>
<option>HTC EVO 4G</option>
<option>HTC EVO 3D</option>
<option>LG Optimus V</option>
<option>Motorola Droid 2</option>
<option>Motorola Droid</option>
<option>Motorola Droid RAZR XT910</option>
<option>Motorola Droid X / Shadow</option>
<option>Motorola XOOM</option>
<option>Samsung Droid Charge</option>
<option>Samsung Galaxy Fit</option>
<option>Samsung Galaxy Nexus</option>
<option>Samsung Galaxy S II (GT-I9100)</option>
<option>Samsung Galaxy Tab</option>
<option>Sony Ericsson Xperia PLAY</option>
<option>T-Mobile G2X</option>
<option>T-Mobile myTouch 4G Slide</option>
</optgroup>
<optgroup label="iOS">
<option>iPhone 3GS</option>
<option>iPhone 4</option>
<option>iPhone 4S</option>
<option>iPad</option>
<option>iPad 2</option>
<option>iPod Touch 4G</option>
</optgroup>
<optgroup label="Etc.">
<option>Blackberry Torch</option>
<option>Blackberry Playbook</option>
<option>HTC HD7S Windows Phone</option>
</optgroup>
</select>
</label>
<input type="text" id="ua-device-name-custom">
</p>
<p><label>OS
<select id="ua-os">
<option value="">Other...</option>
<optgroup label="Desktop">
<option>Mac OS X 10.6.8</option>
<option>Mac OS X 10.7.3</option>
<option>Windows 7</option>
</optgroup>
<optgroup label="Android">
<option>Android 2.2.2</option>
<option>Android 2.2.3</option>
<option>Android 2.3.3</option>
<option>Android 2.3.4</option>
<option>Android 2.3.5</option>
<option>Android 2.3.6</option>
<option>Android 3.2</option>
<option>Android 3.2.1</option>
<option>Android 3.2.4</option>
<option>Android 3.2.6</option>
<option>Android 4.0.2</option>
<option>Android 4.0.3</option>
<option>Android 4.0.4</option>
</optgroup>
<optgroup label="iOS">
<option>iOS 4.2</option>
<option>iOS 4.3.2</option>
<option>iOS 4.3.3</option>
<option>iOS 4.3.5</option>
<option>iOS 5.0.1</option>
<option>iOS 5.1</option>
<option>iOS 5.1.1</option>
</optgroup>
<optgroup label="Other Mobile">
<option>Windows Phone 7.5</option>
<option>Blackberry Playbook 1.0.8.6067</option>
<option>Blackberry 7.0.0.261</option>
</optgroup>
</select>
</label>
<input type="text" id="ua-os-custom">
</p>
<p><label>Device type
<select id="ua-type">
<option>Laptop</option>
<option>Phone</option>
<option>Tablet</option>
<option>Desktop</option>
</select>
</p>
<p><label>Other data <input type="text" id="ua-misc"></label></p>
<p><button disabled id="upload-performance-tests">Run Tests and Upload Results</button></p>
<p>This will upload test results to your <em>local web server</em>. See <code>README.md</code> in the PerfMarks repository for details.</p>
<ul>
<li id="performance-sprites"><span class="name">Sprites</span>
<div id="performance-sprites-placeholder"></div>
<li id="performance-audioLatency" class="test"><span class="name">Audio latency</span>
<ul class="results">
<li>Cold play latency: <span data-property="coldLatency"></span>ms
<li>Warm play latency: <span data-property="warmLatency"></span>ms
</ul>
<li id="performance-text"><span class="name">Canvas text</span>
<div id="performance-text-placeholder"></div>
</ul>
<h2>Test Result Data</h2>
<textarea id="all-test-results"></textarea>
<script>
Object.keys = function keys(object) {
// Quick shim; doesn't handle IE bugs
var keys = [ ];
var key;
for (key in object) {
if (Object.prototype.hasOwnProperty.call(object, key)) {
keys.push(key);
}
}
return keys;
};
(function () {
var onLoadFunctions = [ ];
var loaded = false;
function registerOnLoad(fn) {
if (loaded) {
setTimeout(fn, 0);
} else {
onLoadFunctions.push(fn);
}
}
window.addEventListener('load', function () {
loaded = true;
while (onLoadFunctions.length) {
var fn = onLoadFunctions.shift();
setTimeout(fn, 0);
}
}, false);
window.registerOnLoad = registerOnLoad;
}());
</script>
<script src="js/curl.js"></script>
<script>curl({ baseUrl: 'js' }, [ 'index' ]);</script>