Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
460 lines (375 sloc) 16.8 KB
<!DOCTYPE html>
<html>
<head>
<title>The HTML5 test - How well does your browser support HTML5?</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Alfa+Slab+One' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="/css/main.css" type="text/css">
<script src='/scripts/useragents.js' type='text/javascript'></script>
<script src='/scripts/engine.js' type='text/javascript'></script>
<script src='/scripts/data.js' type='text/javascript'></script>
<script src='/scripts/reporting.js' type='text/javascript'></script>
<link rel="icon" href="/images/icon.png">
<link rel="apple-touch-icon" href="/images/button.png">
<meta property="og:title" content="The HTML5 test - How well does your browser support HTML5?" />
<meta property="og:description" content="The HTML5 test score is an indication of how well your browser supports the upcoming HTML5 standard and related specifications. How well does your browser support HTML5?" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://html5test.com" />
<meta property="og:image" content="http://html5test.com/images/thumbnail.jpg" />
<meta property="og:site_name" content="HTML5test.com" />
<meta property="fb:admins" content="1087142132" />
<style>
<!--
/*
The following CSS rule is for deliberately changing the layout of number fields in Webkit.
This makes sure that if the field has a spin button, it will change the size of wrapping
elements, which will be detected by the test suite.
*/
input[type=number]::-webkit-outer-spin-button {
display: inline;
padding: 60px;
}
-->
</style>
</head>
<!--
Copyright (c) 2010-2012 Niels Leenheer
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-->
<body>
<!-- BuySellAds.com Ad Code -->
<script type="text/javascript">
(function(){
var bsa = document.createElement('script');
bsa.type = 'text/javascript';
bsa.async = true;
bsa.src = '//s3.buysellads.com/ac/bsa.js';
(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);
})();
</script>
<!-- End BuySellAds.com Ad Code -->
<div id="fb-root"></div>
<div class='header'>
<h1>The HTML5 test <em>&ndash; how well does your browser support HTML5?</em></h1>
<ul>
<li class='selected'><a href='/index.html'>Your browser</a></li>
<li><a href='/results/desktop.html'>Other<span> browser</span>s</a></li>
<li><a href='/compare/browser/index.html'>Compare</a></li>
<li class='right'><a href='/about.html'>About<span> the test</span></a></li>
</ul>
</div>
<div class='page'>
<div class='column'>
<!--
<div class='updated'>
Updated!
<span>3 April 2012</span>
</div>
-->
<noscript>
<h2>
To view the results of your browser you need to enable Javascript!
</h2>
</noscript>
<div id='results'></div>
</div>
<div class='column' id='explaination'>
<div>
<span id='html5'></span>
<p>
The HTML5 test score is an indication of how well your browser supports the
upcoming HTML5 standard and related specifications. Even though the specification
isn't finalized yet, all major browser manufacturers are making sure their
browser is ready for the future. Find out which parts of HTML5 are already
supported by your browser today and compare the results with other browsers.
</p>
<div class='ads'>
<p>Sponsors</p>
<!-- BuySellAds.com Zone Code -->
<div id="bsap_1262954" class="bsarocks bsap_6c18c40d896c427f049e74e4c708ab51"></div>
<!-- End BuySellAds.com Zone Code -->
</div>
<p>
The HTML5 test does not try to test all of the new features offered by HTML5, nor does it try to test the functionality of each feature it does detect.
Despite these shortcomings we hope that by quantifying the level of support users and web developers will get an idea of how hard the
browser manufacturers work on improving their browsers and the web as a development platform.
</p>
<p>
The score is calculated by testing for the many new features of HTML5. Each feature is worth one or more points. Apart from the main HTML5
specification and other specifications created the W3C HTML Working Group, this test also awards points for supporting related drafts and
specifications. Some of these specifications were initially part of HTML5, but are now further developed by other W3C working groups.
WebGL is also part of this test despite not being developed by the W3C, because it extends the HTML5 canvas element with a 3d context.
</p>
<p>
The test also awards bonus points for supporting audio and video codecs and supporting SVG or MathML embedding in a plain HTML document.
These test do not count towards the total score because HTML5 does not specify any required audio or video codec. Also SVG and MathML are
not required by HTML5, the specification only specifies rules for how such content should be embedded inside a plain HTML file.
</p>
<div class='ads'>
<p>Sponsors</p>
<!-- BuySellAds.com Zone Code -->
<div id="bsap_1262955" class="bsarocks bsap_6c18c40d896c427f049e74e4c708ab51"></div>
<!-- End BuySellAds.com Zone Code -->
</div>
<p>
Please be aware that the specifications that are being tested are still in development and could change before receiving an official status.
In the future new tests will be added for the pieces of the specification that are currently still missing.
The maximum number of points that can be scored is <span id='total'>0</span> at this moment, but this is a moving goalpost.
</p>
<p>
The HTML5 test is created by Niels Leenheer. Visit my website at <a href='http://rakaz.nl'>rakaz.nl</a> or follow me on <a href='http://twitter.com/rakaz'>twitter</a>.
</p>
<a href="http://www.twitter.com/rakaz"><img src="http://twitter-badges.s3.amazonaws.com/follow_me-c.png" alt="Follow rakaz on Twitter"/></a>
<p></p>
</div>
</div>
</div>
<div class='footer'>
<div>
<div class='hosting'>
<a href='http://sights.nl/en/'><img src='/images/sights.png' width=55 alt='Sights'></a>
</div>
<div class='copyright'>
<p>
Copyright 2010-2012 by Sights
</p>
<p>
April, 2012 - version 3.0
</p>
<p>
The HTML5 test is being developed at <a href='http://github.com/NielsLeenheer/html5test'>Github</a>. Please file an issue there if you find any bugs or think of any improvements to this test.
Please note that the HTML5 test is not affiliated with the W3C or the HTML5 working group.
</p>
</div>
</div>
</div>
<script>
<!--
var Confirm = function() { this.initialize.apply(this, arguments) };
Confirm.prototype = {
initialize: function(parent, options) {
var that = this;
this.options = options;
this.useragent = document.createElement('p');
this.useragent.className = 'useragent';
parent.appendChild(this.useragent);
this.useragent.innerHTML = 'You are using ' + Browsers;
this.confirm = document.createElement('span');
this.confirm.innerHTML = 'Correct?';
this.useragent.appendChild(this.confirm);
var correct = document.createElement('a');
if (correct.addEventListener) {
correct.addEventListener('click', function() { that.confirmUseragent.call(that); }, true);
} else {
correct.attachEvent('onclick', function() { that.confirmUseragent.call(that); });
}
correct.className = 'correct';
correct.innerHTML = '✔';
this.confirm.appendChild(correct);
var wrong = document.createElement('a');
if (correct.addEventListener) {
wrong.addEventListener('click', function() { that.reportUseragent.call(that); }, true);
} else {
wrong.attachEvent('onclick', function() { that.reportUseragent.call(that); });
}
wrong.className = 'wrong';
wrong.innerHTML = '✘';
this.confirm.appendChild(wrong);
this.thanks = document.createElement('span');
this.thanks.style.display = 'none';
this.thanks.innerHTML = 'Thanks!';
this.useragent.appendChild(this.thanks);
},
confirmUseragent: function() {
this.options.onConfirm();
this.showThanks();
},
reportUseragent: function() {
this.options.onReport();
this.showThanks();
},
showThanks: function() {
this.confirm.style.display = 'none';
this.thanks.style.display = 'inline';
var that = this;
window.setTimeout(function() {
that.thanks.style.display = 'none';
}, 2500);
}
}
var Share = function() { this.initialize.apply(this, arguments) };
Share.prototype = {
initialize: function(parent, options) {
var that = this;
this.parent = parent;
this.options = options;
this.parent.innerHTML +=
"<div id='share' style='opacity:0'>" +
"<div id='twitter'>" +
"<a href='https://twitter.com/share' class='twitter-share-button' " +
"data-url='http://html5test.com' " +
"data-related='rakaz' " +
"data-text='" + this.options.browser + " scored " + this.options.score + "+" + this.options.bonus + " points. How well does your browser support HTML5?' " +
"data-lang='en' "+
"data-count='vertical'"+
">Tweet</a>" +
"</div>" +
"<div id='facebook'>" +
"<div class='fb-like' " +
"data-href='http://html5test.com' " +
"data-send='false' " +
"data-layout='box_count' " +
"data-width='60' " +
"data-show-faces='false'" +
"></div>" +
"</div>" +
"<div id='google'>" +
"<div class='g-plusone' " +
"data-href='http://html5test.com' " +
"data-size='tall'" +
"></div>" +
"</div>" +
"</div>";
window.setTimeout(function() {
var e = document.getElementById('share');
e.style.opacity = '';
}, 1000);
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id))
{js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}
(document,"script","twitter-wjs");
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=202643099847776";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
}
}
Browsers = new UserAgents(navigator.userAgent, {
useFeatures: true,
detectCamouflage: true
});
new Test(function(r) {
/* Update total score */
var results = document.getElementById('results');
results.innerHTML =
"<div class='scorePanel'>" +
"<p class='intro'>Your browser scores</p>" +
"<h2>" + r.score + "</h2>" +
"<h3>and " + (r.bonus ? r.bonus : 'no') + " bonus point" + (r.bonus != 1 ? 's' : '') + "</h3>" +
"<p>out of a total of " + r.maximum + " points</p>" +
"</div>";
var total = document.getElementById('total');
total.innerHTML = r.maximum;
new Share(results, {
score: r.score,
bonus: r.bonus,
browser: Browsers.toString()
});
/* Show box for confirming useragent detection */
new Confirm(results, {
onConfirm: function() { submit('confirm', '{"uniqueid": "' + r.uniqueid + '"}'); },
onReport: function() { submit('report', '{"uniqueid": "' + r.uniqueid + '"}'); }
});
/* Show detailed report of scores */
var div = document.createElement('div');
div.className = 'resultsTable';
results.appendChild(div);
var table = new FeatureTable({
parent: div,
tests: tests,
header: false,
links: true,
explainations: true,
grading: true,
bonus: true,
columns: 1
});
table.updateColumn(0, r);
var div = document.createElement('div');
div.className = 'uniqueid';
div.innerHTML = 'id: ' + r.uniqueid;
results.appendChild(div);
/* Submit results */
var payload = '{' +
'"version": "3",' +
'"revision": "16",' +
'"uniqueid": "' + r.uniqueid + '",' +
'"score": ' + r.score + ',' +
'"bonus": ' + r.bonus + ',' +
'"camouflage": "' + (Browsers.camouflage ? '1' : '0') + '",' +
'"features": "' + (Browsers.features.join(',')) + '",' +
'"browserName": "' + (Browsers.browser.name ? Browsers.browser.name : '') + '",' +
'"browserChannel": "' + (Browsers.browser.channel ? Browsers.browser.channel : '') + '",' +
'"browserVersion": "' + (Browsers.browser.version ? Browsers.browser.version.toString() : '') + '",' +
'"browserVersionType": "' + (Browsers.browser.version ? Browsers.browser.version.type : '') + '",' +
'"browserVersionMajor": "' + (Browsers.browser.version ? Browsers.browser.version.major : '') + '",' +
'"browserVersionMinor": "' + (Browsers.browser.version ? Browsers.browser.version.minor : '') + '",' +
'"browserVersionOriginal": "' + (Browsers.browser.version ? Browsers.browser.version.original : '') + '",' +
'"browserMode": "' + (Browsers.browser.mode ? Browsers.browser.mode : '') + '",' +
'"engineName": "' + (Browsers.engine.name ? Browsers.engine.name : '') + '",' +
'"engineVersion": "' + (Browsers.engine.version ? Browsers.engine.version.toString() : '') + '",' +
'"osName": "' + (Browsers.os.name ? Browsers.os.name : '') + '",' +
'"osVersion": "' + (Browsers.os.version ? Browsers.os.version.toString() : '') + '",' +
'"deviceManufacturer": "' + (Browsers.device.manufacturer ? Browsers.device.manufacturer : '') + '",' +
'"deviceModel": "' + (Browsers.device.model ? Browsers.device.model : '') + '",' +
'"deviceType": "' + (Browsers.device.type ? Browsers.device.type : '') + '",' +
'"deviceWidth": "' + (Browsers.device.type != 'desktop' ? screen.width : '') + '",' +
'"deviceHeight": "' + (Browsers.device.type != 'desktop' ? screen.height : '') + '",' +
'"useragent": "' + navigator.userAgent + '",' +
'"humanReadable": "' + Browsers.toString() + '",' +
'"points": "' + r.points + '",' +
'"results": "' + r.results + '"' +
'}';
submit('submit', payload);
function submit(method, payload) {
var httpRequest;
if (window.XMLHttpRequest) {
httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) {
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
httpRequest.open('POST','/api/' + method, true);
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
httpRequest.send('payload=' + encodeURIComponent(payload));
}
});
//-->
</script>
<script src='http://www.google-analytics.com/ga.js'></script>
<script>
<!--
try {
var pageTracker = _gat._getTracker("UA-68192-4");
pageTracker._trackPageview();
} catch(err) {}
//-->
</script>
</body>
</html>