436 lines
15 KiB
HTML
436 lines
15 KiB
HTML
<!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>
|
|
|
|
<script src='/scripts/jquery/jquery-1.7.2.min.js' type='text/javascript'></script>
|
|
<script src='/scripts/highcharts/highcharts.src.js' type='text/javascript'></script>
|
|
<script src="/scripts/highcharts/modules/exporting.js" type="text/javascript"></script>
|
|
<script src="/scripts/fullscreen.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<span> browser</span>s</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 class='<?php echo $type == 'desktop' ? 'selected' : ''; ?>'><a href='/results/desktop.html'>Desktop<span> browsers</span></a></li>
|
|
<li class='<?php echo $type == 'tablet' ? 'selected' : ''; ?>'><a href='/results/tablet.html'>Tablets</a></li>
|
|
<li class='<?php echo $type == 'mobile' ? 'selected' : ''; ?>'><a href='/results/mobile.html'>Mobiles</a></li>
|
|
<li class='<?php echo $type == 'other' ? 'selected' : ''; ?>'><a href='/results/other.html'>Other</a></li>
|
|
<li class='more'><a href='/results/search.html'>Search</a></li>
|
|
<li class='more'><a href='/results/latest.html'>Latest</a></li>
|
|
</ul>
|
|
|
|
<div>
|
|
|
|
<?php if ($type == 'desktop' || $type == 'mobile' || $type == 'tablet'): ?>
|
|
<div class='overviewPanel'>
|
|
<h2>Overview</h2>
|
|
<div class='horizontalOverflow'>
|
|
<table class='overviewTable'>
|
|
<thead>
|
|
<tr>
|
|
<th> </th>
|
|
<?php foreach($mainColumns as $c): ?>
|
|
<th><a href="/results/<?php echo $type; ?>/timeline/<?php echo $c[1]; ?>.html"><?php echo $c[0]; ?></a></th>
|
|
<?php endforeach; ?>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<?php for ($r = 0; $r < $mainRows; $r++): ?>
|
|
<tr>
|
|
<th class='<?php echo $r == 0 ? 'upcoming' : ''; ?><?php echo $r == 1 ? 'current' : ''; ?>'>
|
|
<?php echo $r == 0 ? 'Upcoming' : ''; ?><?php echo $r == 1 ? 'Current' : ''; ?><?php echo $r == 2 ? 'Older' : ''; ?>
|
|
</th>
|
|
|
|
<?php foreach($main as $d): ?>
|
|
<td class='<?php echo $r == 0 ? 'upcoming' : ''; ?><?php echo $r == 1 ? 'current' : ''; ?>'><?php
|
|
if (isset($d[$r]) && !is_null($d[$r])) {
|
|
if (is_object($d[$r])) {
|
|
echo '<span class="version"><span><span>' . $d[$r]->version . '</span></span></span> <span class="points">' . $d[$r]->score . '</span>';
|
|
}
|
|
|
|
if (is_string($d[$r])) {
|
|
echo "<span class='heading'>" . $d[$r] . "</span>";
|
|
}
|
|
}
|
|
?></td>
|
|
<?php endforeach; ?>
|
|
</tr>
|
|
<?php endfor; ?>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<hr>
|
|
<?php endif; ?>
|
|
|
|
|
|
<div class='scorePanel'>
|
|
<h2>Scores</h2>
|
|
|
|
<div id='scoreToggle'></div>
|
|
|
|
<div class='left'>
|
|
<?php if (isset($results['current'])): ?>
|
|
<div>
|
|
<h3>Current</h3>
|
|
<table class='scoreTable'>
|
|
<thead>
|
|
<tr>
|
|
<th class='points'>Score</th>
|
|
<th class='nickname'>Browser</th>
|
|
<th class='details'></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<?php foreach($results['current'] as $item): ?>
|
|
<tr class='<?php echo $item->visible == 0 ? 'secondary' :''; ?>'>
|
|
<td class='points'><?php echo $item->score; ?></td>
|
|
<th class='nickname' onclick="new BrowserPopup(this, '<?php echo $type; ?>', { platform: '<?php echo $item->platform; ?>', version: '<?php echo $item->version; ?>', id: '<?php echo $item->id; ?>', score: '<?php echo $item->score; ?>' }); ">
|
|
<?php echo $item->nickname; ?>
|
|
</th>
|
|
<th class='details'><?php echo $item->details; ?></th>
|
|
</tr>
|
|
<?php endforeach; ?>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<?php if (isset($results['upcoming'])): ?>
|
|
<div>
|
|
<h3>Upcoming</h3>
|
|
<table class='scoreTable'>
|
|
<thead>
|
|
<tr>
|
|
<th class='points'>Score</th>
|
|
<th class='nickname'>Browser</th>
|
|
<th class='details'></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<?php foreach($results['upcoming'] as $item): ?>
|
|
<tr class='<?php echo $item->visible == 0 ? 'secondary' :''; ?>'>
|
|
<td class='points'><?php echo $item->score; ?></td>
|
|
<th class='nickname' onclick="new BrowserPopup(this, '<?php echo $type; ?>', { platform: '<?php echo $item->platform; ?>', version: '<?php echo $item->version; ?>', id: '<?php echo $item->id; ?>', score: '<?php echo $item->score; ?>' }); ">
|
|
<?php echo $item->nickname; ?>
|
|
</th>
|
|
<th class='details'><?php echo $item->details; ?></th>
|
|
</tr>
|
|
<?php endforeach; ?>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<?php if (isset($results['experimental'])): ?>
|
|
<div>
|
|
<h3>Experimental</h3>
|
|
<table class='scoreTable'>
|
|
<thead>
|
|
<tr>
|
|
<th class='points'>Score</th>
|
|
<th class='nickname'>Browser</th>
|
|
<th class='details'></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<?php foreach($results['experimental'] as $item): ?>
|
|
<tr class='<?php echo $item->visible == 0 ? 'secondary' :''; ?>'>
|
|
<td class='points'><?php echo $item->score; ?></td>
|
|
<th class='nickname' onclick="new BrowserPopup(this, '<?php echo $type; ?>', { platform: '<?php echo $item->platform; ?>', version: '<?php echo $item->version; ?>', id: '<?php echo $item->id; ?>', score: '<?php echo $item->score; ?>' }); ">
|
|
<?php echo $item->nickname; ?>
|
|
</th>
|
|
<th class='details'><?php echo $item->details; ?></th>
|
|
</tr>
|
|
<?php endforeach; ?>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<?php endif; ?> </div>
|
|
|
|
<div class='right'>
|
|
<?php if (isset($results['legacy'])): ?>
|
|
<div>
|
|
<h3>Older</h3>
|
|
<table class='scoreTable'>
|
|
<thead>
|
|
<tr>
|
|
<th class='points'>Score</th>
|
|
<th class='nickname'>Browser</th>
|
|
<th class='details'></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<?php foreach($results['legacy'] as $item): ?>
|
|
<tr class='<?php echo $item->visible == 0 ? 'secondary' :''; ?>'>
|
|
<td class='points'><?php echo $item->score; ?></td>
|
|
<th class='nickname' onclick="new BrowserPopup(this, '<?php echo $type; ?>', { platform: '<?php echo $item->platform; ?>', version: '<?php echo $item->version; ?>', id: '<?php echo $item->id; ?>', score: '<?php echo $item->score; ?>' }); ">
|
|
<?php echo $item->nickname; ?>
|
|
</th>
|
|
<th class='details'><?php echo $item->details; ?></th>
|
|
</tr>
|
|
<?php endforeach; ?>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
|
|
new ToggleSwitch({
|
|
parent: document.getElementById('scoreToggle'),
|
|
inactive: 'Most used',
|
|
active: 'All browsers',
|
|
onChange: function(active) {
|
|
var tables = document.getElementsByClassName('scoreTable');
|
|
|
|
if (active) {
|
|
for (var i = 0; i < tables.length; i++) {
|
|
tables[i].className += ' showAll';
|
|
}
|
|
} else {
|
|
for (var i = 0; i < tables.length; i++) {
|
|
tables[i].className = tables[i].className.replace(' showAll', '');
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
<?php if ($type == 'desktop' || $type == 'mobile' || $type == 'tablet'): ?>
|
|
<hr>
|
|
|
|
<div class='timelinePanel'>
|
|
<div id='fsCanvas'>
|
|
<h2>Timeline</h2>
|
|
<button id='fsButton' style='display: none;'></button>
|
|
<br>
|
|
|
|
<div id='timelineGraph' style='height: 500px;'></div>
|
|
|
|
<script>
|
|
|
|
var sets = <?php echo json_encode(array_values($sets)); ?>;
|
|
var series = [];
|
|
|
|
var start = new Date().getTime();
|
|
|
|
for (var i = 0; i < sets.length; i++) {
|
|
var s = {
|
|
name: sets[i].name,
|
|
data: []
|
|
}
|
|
|
|
for (var j = 0; j < sets[i].data.length; j++) {
|
|
var ts = new Date().getTime();
|
|
|
|
if (sets[i].data[j].releasedate) {
|
|
var date = sets[i].data[j].releasedate.split('-');
|
|
var ts = Date.UTC(date[0], parseInt(date[1], 10) - 1, date[2]);
|
|
}
|
|
|
|
start = Math.min(ts, start);
|
|
|
|
s.data.push({
|
|
name: sets[i].data[j].nickname,
|
|
status: sets[i].data[j].status,
|
|
order: sets[i].data[j].order,
|
|
x: ts,
|
|
y: parseInt(sets[i].data[j].score, 10)
|
|
});
|
|
}
|
|
|
|
series.push(s);
|
|
}
|
|
|
|
Highcharts.setOptions({
|
|
chart: {
|
|
style: {
|
|
fontFamily: '"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif'
|
|
}
|
|
}
|
|
});
|
|
|
|
var chart = new Highcharts.Chart({
|
|
|
|
chart: {
|
|
renderTo: 'timelineGraph',
|
|
zoomType: 'x',
|
|
type: 'line'
|
|
},
|
|
credits: {
|
|
enabled: false
|
|
},
|
|
title: {
|
|
text: 'HTML5test.com score over the years'
|
|
},
|
|
legend: {
|
|
borderWidth: 0,
|
|
margin: 40
|
|
},
|
|
xAxis: {
|
|
type: 'datetime',
|
|
min: Math.max(start, Date.UTC(2008,9,1)),
|
|
dateTimeLabelFormats: {
|
|
month: '%b %Y',
|
|
year: '%b %Y'
|
|
}
|
|
},
|
|
yAxis: {
|
|
title: {
|
|
text: 'Score (points)'
|
|
},
|
|
min: 0
|
|
},
|
|
tooltip: {
|
|
formatter: function() {
|
|
return '<b>'+ this.key +'</b><br/>'+
|
|
(this.point.status != 'upcoming' ? Highcharts.dateFormat('%b %Y', this.x) : 'Unreleased') +'<br>' +
|
|
this.y +' points';
|
|
}
|
|
},
|
|
|
|
plotOptions: {
|
|
series: {
|
|
step: 'left'
|
|
}
|
|
},
|
|
series: series
|
|
});
|
|
|
|
for (var s = 0; s < chart.series.length; s++) {
|
|
if (chart.series[s].data[0].order < 1) {
|
|
chart.series[s].hide();
|
|
}
|
|
/*
|
|
console.debug(chart.series[s].data[0])
|
|
switch(chart.series[s].name) {
|
|
case 'Android':
|
|
case 'Blackberry':
|
|
case 'Chrome':
|
|
case 'Firefox':
|
|
case 'Internet Explorer':
|
|
case 'iOS':
|
|
case 'Opera':
|
|
case 'Safari':
|
|
case 'Windows':
|
|
break;
|
|
default:
|
|
chart.series[s].hide();
|
|
}
|
|
*/
|
|
}
|
|
|
|
var canvas = document.getElementById('fsCanvas');
|
|
var button = document.getElementById('fsButton');
|
|
|
|
if (canvas.requestFullscreen) {
|
|
button.style.display = '';
|
|
button.addEventListener('click', function() {
|
|
if (document.fullscreenElement)
|
|
document.exitFullscreen();
|
|
else
|
|
canvas.requestFullscreen();
|
|
}, true);
|
|
}
|
|
|
|
</script>
|
|
</div>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<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>
|
|
</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>
|