<!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/reporting.js' type='text/javascript'></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 class='selected'><a href='/results/desktop.html'>Other browsers</a></li>
					<li><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><a href='/results/desktop.html'>Desktop<span> browsers</span></a></li>
						<li><a href='/results/tablet.html'>Tablets</a></li>
						<li><a href='/results/mobile.html'>Mobiles</a></li>
						<li><a href='/results/other.html'>Other</a></li>
						<li class='more selected'><a href='/results/search.html'>Search</a></li>
						<li class='more'><a href='/results/latest.html'>Latest</a></li>
					</ul>

					<div>
						<div class='scorePanel'>
							<div id='searchField'></div>

							<div id='searchBusy'>
								<div id='loading'><div></div></div>
							</div>

							<div id='searchResults' style="display: none;">
								<hr>

								<div class='searchResults' style="display: none;">
									<table class='scoreTable latestTable'>
										<thead>
											<tr>
												<th class='points'>Score</th>
												<th class='nickname'>Browser</th>
												<th class='ago'>When</th>
											</tr>
										</thead>
										<tbody>
										</tbody>
									</table>
									<p>
										Please note that all data shown above are unconfirmed test results. They could be fake or
										belong to a different browser than the one listed.
									</p>
								</div>

								<div class='searchMessage notFound' style="display: none;">
									No test results found that match your search criteria
								</div>
							</div>

						</div>

						<script>

							var search = new SearchField({
								parent:		document.getElementById('searchField'),
								value:		<?php echo isset($_REQUEST['query']) ? '"' . addslashes($_REQUEST['query']) . '"' : 'null'; ?>,
								onSubmit:	function(query) {
												clearTable();

												if (query != "") {
													searchResults(query);
												}
											}
							});

							function clearTable() {
								if (window.history && window.history.replaceState) {
									window.history.replaceState([], document.title, '/results/search.html');
								}

								var b = document.querySelector("#searchBusy");
								b.className = "";

								var t = document.querySelector("#searchResults");
								t.style.display = "none";

								var o = document.querySelector(".scoreTable tbody");
								o.innerHTML = "";
							}

							function searchResults(query) {
								var b = document.querySelector("#searchBusy");
								b.className = "visible";

								if (window.history && window.history.replaceState) {
									window.history.replaceState([], document.title, '/results/search.html?query=' + encodeURIComponent(query));
								}

								var httpRequest;
								if (window.XMLHttpRequest) {
									httpRequest = new XMLHttpRequest();
								} else if (window.ActiveXObject) {
									httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
								}

							   	httpRequest.open('POST','/api/searchResults', true);
								httpRequest.onreadystatechange = process;
							   	httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
								httpRequest.send("query=" + encodeURIComponent(query));

								function process() {
									if (httpRequest.readyState == 4 && httpRequest.responseText != '') {
										var data = JSON.parse(httpRequest.responseText);
										refreshTable(data);
									}
								}
							}

							function refreshTable(data) {
								var contents = "";
								for (var i = 0; i < data.length; i++) {
									contents +=
										"<tr>" +
											"<td class='points'><a href='//html5te.st/" + data[i].uniqueid + "'>" + data[i].score + "</a></td>" +
											"<th class='nickname'><a href='//html5te.st/" + data[i].uniqueid + "'>" + data[i].humanReadable + "</a></th>" +
											"<td class='ago'><a href='//html5te.st/" + data[i].uniqueid + "'>" + data[i].ago + " ago</a></td>" +
										"</tr>";

								}

								var b = document.querySelector("#searchBusy");
								b.className = "";

								var o = document.querySelector("#searchResults");
								o.style.display = "block";

								var o = document.querySelector(".searchMessage.notFound");
								o.style.display = data.length ? 'none' : 'block';

								var o = document.querySelector(".searchResults");
								o.style.display = data.length ? 'block' : 'none';

								var o = document.querySelector(".scoreTable tbody");
								o.innerHTML = contents;
							}

<?php if (isset($_REQUEST['query'])): ?>

							searchResults(<?php echo '"' . addslashes($_REQUEST['query']) . '"'; ?>);

<?php endif; ?>

						</script>

						<hr>

						<h3>Examples</h3>
						<div class='text no-columns'>
							<dl>
								<dt><a href='?query=deviceType:mobile osName:Windows'><code>deviceType:mobile osName:Windows</code></a></dt>
								<dd>All mobile devices running Windows</dd>

								<dt><a href='?query=deviceManufacturer:Samsung -osName:Android'><code>deviceManufacturer:Samsung -osName:Android</code></a></dt>
								<dd>All non-Android devices created by Samsung</dd>

								<dt><a href='?query=osName:Android osVersion:4.4'><code>osName:Android osVersion:4.4</code></a></dt>
								<dd>All devices running Android 4.4</dd>

								<dt><a href='?query=browserName:Chrome osName:"Mac OS X"'><code>browserName:Chrome osName:"Mac OS X"</code></a></dt>
								<dd>Chrome running on OS X</dd>

								<dt><a href='?query=deviceModel:iPhone'><code>deviceModel:iPhone</code></a></dt>
								<dd>All iPhones</dd>

								<dt><a href='?query=engineName:Gecko -browserName:Firefox'><code>engineName:Gecko -browserName:Firefox</code></a></dt>
								<dd>All Gecko based browser except for Firefox</dd>

								<dt><a href='?query=score:500+'><code>score:500+</code></a></dt>
								<dd>All results with a score higher than or equal to 500</dd>
							</dd>
						</div>
					</div>
				</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>
