<!DOCTYPE html>
<html>
	<head>
		<title>HTML5test - How well does your browser support HTML5?</title>

		<meta charset="UTF-8">
		<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 rel="stylesheet" href="/css/main.css" type="text/css">
		<link rel="stylesheet" href="/css/reporting.css" type="text/css">

		<script src='/scripts/base.js' type='text/javascript'></script>
		<script src='/scripts/8/data.js' type='text/javascript'></script>
		<script src='/scripts/8/engine.js' type='text/javascript'></script>
		<script src='/scripts/reporting.js' type='text/javascript'></script>

		<script>
			(function(){var p=[],w=window,d=document,e=f=0;p.push('ua='+encodeURIComponent(navigator.userAgent));e|=w.ActiveXObject?1:0;e|=w.opera?2:0;e|=w.chrome?4:0;
			e|='getBoxObjectFor' in d || 'mozInnerScreenX' in w?8:0;e|=('WebKitCSSMatrix' in w||'WebKitPoint' in w||'webkitStorageInfo' in w||'webkitURL' in w)?16:0;
			e|=(e&16&&({}.toString).toString().indexOf("\n")===-1)?32:0;p.push('e='+e);f|='sandbox' in d.createElement('iframe')?1:0;f|='WebSocket' in w?2:0;
			f|=w.Worker?4:0;f|=w.applicationCache?8:0;f|=w.history && history.pushState?16:0;f|=d.documentElement.webkitRequestFullScreen?32:0;f|='FileReader' in w?64:0;
			p.push('f='+f);p.push('r='+Math.random().toString(36).substring(7));p.push('w='+screen.width);p.push('h='+screen.height);var s=d.createElement('script');
			s.src='//api.whichbrowser.net/rel/detect.js?' + p.join('&');d.getElementsByTagName('head')[0].appendChild(s);})();
		</script>

		<meta name="application-name" content="HTML5test"/>

		<link rel="apple-touch-icon" sizes="57x57" href="/images/icons/apple-touch-icon-57x57.png" />
		<link rel="apple-touch-icon" sizes="114x114" href="/images/icons/apple-touch-icon-114x114.png" />
		<link rel="apple-touch-icon" sizes="72x72" href="/images/icons/apple-touch-icon-72x72.png" />
		<link rel="apple-touch-icon" sizes="144x144" href="/images/icons/apple-touch-icon-144x144.png" />
		<link rel="apple-touch-icon" sizes="60x60" href="/images/icons/apple-touch-icon-60x60.png" />
		<link rel="apple-touch-icon" sizes="120x120" href="/images/icons/apple-touch-icon-120x120.png" />
		<link rel="apple-touch-icon" sizes="76x76" href="/images/icons/apple-touch-icon-76x76.png" />
		<link rel="apple-touch-icon" sizes="152x152" href="/images/icons/apple-touch-icon-152x152.png" />
		<link rel="icon" type="image/png" href="/images/icons/favicon-16x16.png" sizes="16x16" />
		<link rel="icon" type="image/png" href="/images/icons/favicon-32x32.png" sizes="32x32" />
		<link rel="icon" type="image/png" href="/images/icons/favicon-96x96.png" sizes="96x96" />
		<link rel="icon" type="image/png" href="/images/icons/favicon-160x160.png" sizes="160x160" />
		<link rel="icon" type="image/png" href="/images/icons/favicon-196x196.png" sizes="196x196" />
		<meta name="msapplication-TileColor" content="#0092bf" />
		<meta name="msapplication-TileImage" content="/images/icons/mstile-144x144.png" />
	</head>

	<body>
		<div class='header'>
			<h1><span>HTML<strong>5</strong>test</span> <em>how well does your browser support HTML5?</em></h1>
			<div class='navigation'>
				<ul class='left'>
					<li><a href='/index.html'>Your browser</a></li>
					<li><a href='/results/desktop.html'>Other<span> browser</span>s</a></li>
					<li class='selected'><a href='/compare/browser/index.html'>Compare</a></li>
				</ul>
				<ul class='right'>
					<li><a href='http://blog.html5test.com/'>News</a></li>
					<li><a href='/devicelab'>Device Lab</a></li>
					<li><a href='/about.html'>About<span> the test</span></a></li>
				</ul>
			</div>
		</div>

		<div class='page'>
			<div class='column'>
				<div class='paper hasNavigation'>
					<ul class='navigation'>
						<li class='selected'><a href='/compare/browser/index.html'>Browsers</a></li>
						<li><a href='/compare/feature/index.html'>Features</a></li>
					</ul>

					<div>
						<div id='comparison' class='comparisonTable detailsTable'>
							<div class='filters'>
								<div id='searchField'></div>
								<div id='scoreToggle'></div>
							</div>
							<hr>
						</div>

						<hr>

						<h3>About these scores</h3>
						<div class='text'>
							The data above is compiled from automatically submitted test results. It is possible your results
							may differ slightly due to external factors such as settings and which operating system is used.
							If you believe the data above is incorrect, or if you think we are missing an important browser
							or device, please open a bug report at <a href='http://github.com/NielsLeenheer/html5test'>Github</a>.
						</div>
					</div>

					<script>
					<!--

						window.addEventListener('load', function() {

							Browsers = new WhichBrowser({
								useFeatures:		true,
								detectCamouflage:	true
							});

							var m = new Metadata(tests);


							var table = new FeatureTable({
								title:			'<h2>Browsers</h2><p>Select up to five browsers and compare their test results in detail</p>',
								parent:			document.getElementById('comparison'),
								tests:			m.data,
								browsers:		<?php echo json_encode($results); ?>,
								header:			true,
								explainations: 	false,
								features:		true,
								columns:		5,

								onChange:		function(ids) {
													if (window.history && window.history.replaceState) {
														if (ids.length)
															window.history.replaceState([], document.title, '/compare/browser/' + ids.join('/') + '.html');
														else
															window.history.replaceState([], document.title, '/compare/browser/index.html');
													}
												}
							});

							var search = new SearchField({
								parent:		document.getElementById('searchField'),
								onQuery:	function(query) {
												toggle.deactivate();
												table.filter(query);
											}
							});

							var toggle = new ToggleSwitch({
								parent:		document.getElementById('scoreToggle'),
								inactive:	'Show all',
								active:		'Difference',
								onChange:	function(active) {
												search.clear();
												table.filter(active ? ':diff' : '');
											}
							});


						<?php if (isset($one)): ?>
							<?php if ($one != ''): ?>
								table.updateColumn(0, <?php echo $one; ?>);
							<?php else: ?>
								new Test(function(r) {
									var c = new Calculate(r, m.data);

									table.updateColumn(0, {
										id:				'mybrowser',
										nickname:		'My browser',
										score:			c.score,
										bonus:			c.bonus,
										points:			c.points,
										results:		r.results
									});
								});
							<?php endif; ?>
						<?php endif; ?>


						<?php if (isset($two)): ?>
							<?php if ($two != ''): ?>
								table.updateColumn(1, <?php echo $two; ?>);
							<?php else: ?>
								new Test(function(r) {
									var c = new Calculate(r, m.data);

									table.updateColumn(1, {
										id:				'mybrowser',
										nickname:		'My browser',
										score:			c.score,
										bonus:			c.bonus,
										points:			c.points,
										results:		r.results
									});
								});
							<?php endif; ?>
						<?php endif; ?>


						<?php if (isset($three)): ?>
							<?php if ($three != ''): ?>
								table.updateColumn(2, <?php echo $three; ?>);
							<?php else: ?>
								new Test(function(r) {
									var c = new Calculate(r, m.data);

									table.updateColumn(2, {
										id:				'mybrowser',
										nickname:		'My browser',
										score:			c.score,
										bonus:			c.bonus,
										points:			c.points,
										results:		r.results
									});
								});
							<?php endif; ?>
						<?php endif; ?>


						<?php if (isset($four)): ?>
							<?php if ($four != ''): ?>
								table.updateColumn(3, <?php echo $four; ?>);
							<?php else: ?>
								new Test(function(r) {
									var c = new Calculate(r, m.data);

									table.updateColumn(3, {
										id:				'mybrowser',
										nickname:		'My browser',
										score:			c.score,
										bonus:			c.bonus,
										points:			c.points,
										results:		r.results
									});
								});
							<?php endif; ?>
						<?php endif; ?>


						<?php if (isset($five)): ?>
							<?php if ($five != ''): ?>
								table.updateColumn(4, <?php echo $five; ?>);
							<?php else: ?>
								new Test(function(r) {
									var c = new Calculate(r, m.data);

									table.updateColumn(4, {
										id:				'mybrowser',
										nickname:		'My browser',
										score:			c.score,
										bonus:			c.bonus,
										points:			c.points,
										results:		r.results
									});
								});
							<?php endif; ?>
						<?php endif; ?>

						}, false);

					-->
					</script>
				</div>

				<div class='footer'>
					<div>
						<div class='copyright'>
							<p>
								Created by Niels Leenheer.<br>
								Please note that the HTML5 test is not affiliated with the W3C or the HTML5 working group.<br>
								HTML5 Logo by <a href="http://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a>.
								Browser detection by <a href='http://whichbrowser.net'>WhichBrowser</a>.
							</p>

							<div id='cloudvps'>
								<a href="http://www.cloudvps.nl" target="_blank" ><b>CloudVPS</b><br> High Availability<br> Cloud Servers</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<script src='//www.google-analytics.com/ga.js'></script>
		<script>
		<!--
			try {
				var pageTracker = _gat._getTracker("UA-68192-4");
				pageTracker._trackPageview();
			} catch(err) {}
		//-->
		</script>
	</body>
</html>
