Browse files

Code dump for version 3

  • Loading branch information...
1 parent 9f303f8 commit 549f6eac866aa861d9649a0707ff2c0157895706 @NielsLeenheer NielsLeenheer committed Apr 12, 2012
Showing with 31,962 additions and 5,646 deletions.
  1. +216 −0 about.html
  2. +99 −0 backend/browser.php
  3. +4 −0 backend/config.php
  4. +116 −0 backend/feature.php
  5. +158 −0 backend/index.php
  6. +9 −0 backend/libraries/database.php
  7. +94 −0 backend/libraries/template.php
  8. +72 −0 backend/results.php
  9. +140 −0 backend/templates/browser.html
  10. +115 −0 backend/templates/feature.html
  11. +307 −0 backend/templates/results.html
  12. BIN button.png
  13. BIN crown.png
  14. +945 −481 css/main.css
  15. +0 −16 fonts/PUSAB___-cufon.js
  16. BIN fonts/PUSAB___.eot
  17. +0 −724 fonts/PUSAB___.svg
  18. BIN fonts/PUSAB___.ttf
  19. BIN fonts/PUSAB___.woff
  20. BIN icon.png
  21. BIN images/button.png
  22. BIN images/crown.png
  23. BIN images/crown@2x.png
  24. BIN images/html5.png
  25. BIN images/html5@2x.png
  26. BIN images/icon.png
  27. 0 images/sights.png
  28. BIN images/triangle.png
  29. +228 −3,571 index.html
  30. +0 −268 results-mobile.html
  31. +0 −205 results-tablets.html
  32. +0 −170 results-tv.html
  33. +0 −210 results.html
  34. +1,399 −0 scripts/data.js
  35. +2,829 −0 scripts/engine.js
  36. +12 −0 scripts/highcharts/adapters/mootools-adapter.js
  37. +298 −0 scripts/highcharts/adapters/mootools-adapter.src.js
  38. +15 −0 scripts/highcharts/adapters/prototype-adapter.js
  39. +364 −0 scripts/highcharts/adapters/prototype-adapter.src.js
  40. +202 −0 scripts/highcharts/highcharts.js
  41. +13,543 −0 scripts/highcharts/highcharts.src.js
  42. +133 −0 scripts/highcharts/modules/canvas-tools.js
  43. +3,114 −0 scripts/highcharts/modules/canvas-tools.src.js
  44. +23 −0 scripts/highcharts/modules/exporting.js
  45. +737 −0 scripts/highcharts/modules/exporting.src.js
  46. +263 −0 scripts/highcharts/themes/dark-blue.js
  47. +263 −0 scripts/highcharts/themes/dark-green.js
  48. +262 −0 scripts/highcharts/themes/gray.js
  49. +95 −0 scripts/highcharts/themes/grid.js
  50. +89 −0 scripts/highcharts/themes/skies.js
  51. +4 −0 scripts/jquery/jquery-1.7.2.min.js
  52. +759 −0 scripts/reporting.js
  53. +5,055 −0 scripts/useragents.js
  54. +0 −1 useragents.js
View
216 about.html
@@ -0,0 +1,216 @@
+<!DOCTYPE html>
+
+<!--
+ 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.
+-->
+
+<html>
+ <head>
+ <title>The HTML5 test - 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; minimum-scale=1.0; maximum-scale=1.0; user-scalable=no;">
+
+ <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?2.21" type="text/css">
+
+ <link rel="icon" href="icon.png">
+ <link rel="apple-touch-icon" href="button.png">
+ </head>
+
+ <body>
+ <div class='header'>
+ <h1>The HTML5 test <em>&ndash; how well does your browser support HTML5?</em></h1>
+ <ul>
+ <li><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 selected'><a href='/about.html'>About<span> the test</span></a></li>
+ </ul>
+ </div>
+
+ <div class='page'>
+ <div class='paper'>
+ <ul>
+ <li class='selected'><a href='about.html'>Frequently asked questions</a></li>
+ <li><a href='donate.html'>Donate</a></li>
+ </ul>
+
+ <div>
+
+ <h2>Specifications</h2>
+
+ <h3>The HTML5 specification isn't finished yet!</h3>
+ <div class='explaination'>
+ True. Whenever the specification is updated, we also make sure the test is updated. If features are removed
+ from the specification we remove them from our tests and new tests are created for additions to the specification.
+ </div>
+
+ <h3>Why do you include specifications that are not part of HTML5?</h3>
+ <div class='explaination'>
+ <p>
+ HTML5 means different things to different people. You could argue that HTML5 only includes features that are
+ defined in the W3C HTML5 specification. Or you could argue that it includes every specification, draft or
+ experimental feature that is added to browsers in the last couple of years. We decided to take the middle
+ ground and split the test into three parts: the official HTML5 specification, specifications that are related
+ to HTML5 and some experimental new features that are extensions of HTML5.
+ </p>
+ <p>
+ Many of the related specifications were at one time part of HTML5. During the development of the specification
+ they were moved to separate specifications.
+ </p>
+ </div>
+
+ <h3>But WebGL isn't even a W3C specification!</h3>
+ <div class='explaination'>
+ The W3C isn't the only organization that creates open specifications for the web. The WebGL specification is
+ published by Kronos, the same group that is also responsible for OpenGL. WebGL is related to HTML5 though and
+ listed as one of the HTML5 technologies on the W3C HTML5 logo page. The W3C HTML5 specification allows the
+ canvas element to be extended by new drawing methods and WebGL is one of them.
+ </div>
+
+ <h3>Why do you test for Chrome's Web Audio API, but not Mozilla's Audio Data API?</h3>
+ <div class='explaination'>
+ The Web Audio API is an official proposal submitted to the W3C Audio Working Group and may end up being an official audio
+ specification. The Audio Data API has been deprecated by Mozilla and may not be supported in future releases.
+ </div>
+
+ <h3>Why do you test for Web SQL?</h3>
+ <div class='explaination'>
+ The Web SQL specification has been deprecated and replaced by the IndexedDB specification. It is however
+ still commonly used on mobile phones and at least three vendors have shipped desktop browsers supporting Web SQL. We've decided to include
+ this specification, but make it a special case. Web SQL is worth 5 points, but only if IndexedDB is not supported.
+ IndexedDB is worth 10 points. If a browser supports both, only 10 points are awarded. This way browsers
+ that only included IndexedDB are not penalized, but browsers that only support Web SQL do get some points.
+ </div>
+
+ <hr>
+
+
+ <h2>Scoring</h2>
+
+ <h3>What is the maximum number of points you can score?</h3>
+ <div class='explaination'>
+ If a browser passes all tests it would receive the maximum score of 500 points and 15 bonus points. Previous
+ versions of the HTML5test had less tests and therefor also a lower maximum score, such as 160, 300, 450 and 475 points.
+ In the future we will probably add even more tests which would also mean we will raise the maximum number of
+ points.
+ </div>
+
+ <h3>What are bonus points?</h3>
+ <div class='explaination'>
+ HTML5 defines an <code>audio</code> and <code>video</code> element, which allows the browser to play media files. The HTML5 specification
+ does not define a required codec though. So for each common codec that is supported we award bonus points. Similarly
+ we give bonus points for SVG and MathML support. Bonus points are counted separately and do not count towards
+ the maximum of 500 points.
+ </div>
+
+ <h3>The scoring seems arbitrary, who decides how many points are awarded?</h3>
+ <div class='explaination'>
+ We decided to award points for each feature depending on how important that feature is for web developers
+ and how difficult it is to implement that feature. A small and simple feature would be worth less points than a
+ large and complicated feature. We think this is the most honest way to grade browsers, because otherwise a browser
+ that only supports the small and simple features would score as high or higher than a browser that went the
+ extra mile and decided to tackle the big features. But in the end it is based on personal preference,
+ but I doubt there is a truly objective alternative.
+ </div>
+
+
+ <hr>
+
+
+ <h2>Methods</h2>
+
+ <h3>Why are you using browser sniffing?</h3>
+ <div class='explaination'>
+ <p>
+ Unfortunately, in two very specific cases we are forced to use browser sniffing. The first case is <code>contentEditable</code>
+ which was not supported on many older mobile devices. Yet almost all mobile browsers claim to support <code>contentEditable</code>.
+ Fortunately modern mobile devices are starting to support <code>contentEditable</code>, but this left us with a problem. We
+ cannot reliably detect if a browser has proper support. The only way around this is to use a whitelist of
+ mobile browsers that do support this feature, otherwise you risk awarding points to mobile browsers that they
+ do not deserve. The second case is drag and drop, which is also not supported on mobile phones and tablets. </p>
+ <p>
+ Please open a new issue on <a href='https://github.com/NielsLeenheer/html5test'>Github</a> when you believe a
+ browser should be included on the whitelist.
+ </p>
+ </div>
+
+ <h3>How are you detecting when a field is using a custom user interface</h3>
+ <div class='explaination'>
+ The HTML5 specification introduces a number of new field types. Instead of just a plain input field there are now
+ color pickers, date pickers, number fields and sliders. The specification doesn't define what the user interface of these
+ new fields are supposed to look like. Rightly so, because the user interface might depend on the device that is
+ used. It does make detecting a bit problematic. What we do is look at the field itself and how the field affects
+ its surroundings. We start by creating a plain text field and wrap it with a block. We measure the rendered style of
+ the wrapper and the field itself. We then create a field of a specific type and measure the wrapper and the field again.
+ If the rendered style of the wrapper has changed, this should mean the field itself is rendered in such a way that
+ it affects its surroundings in a certain way. That does not mean it has a fully functioning custom user interface, but
+ this is the best we can do. Similarly we compare the rendered style of the field itself. If either one of these
+ is different from the plain text field, we assume the field has a custom user interface.
+ </div>
+
+
+ <hr>
+
+
+ <h2>Privacy</h2>
+
+ <h3>What kind of data is collected from visitors?</h3>
+ <div class='explaination'>
+ Each time you visit this website your score and test results are logged on our servers.
+ We also store the user agent of your browser which contains information about the browser,
+ operating system and device you are using. The collected information is solely used to
+ generated anonymized reports about HTML5 support in browsers and improve the quality of
+ our software.
+ </div>
+ </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>
+ </body>
+</html>
View
99 backend/browser.php
@@ -0,0 +1,99 @@
+<?php
+
+ include('config.php');
+ include('libraries/database.php');
+ include('libraries/template.php');
+
+
+ $tpl = new Template('templates/browser.html');
+
+ $results = array();
+ $types = array('desktop', 'tablet', 'mobile', 'television', 'gaming');
+
+ foreach($types AS $type) {
+ $res = mysql_query("
+ SELECT
+ b.unique AS id, b.nickname, b.details, '" . $type . "' AS type
+ FROM
+ browsers AS b,
+ scores AS s
+ WHERE
+ b.unique = s.id AND
+ b.listed = 1 AND
+ FIND_IN_SET('" . $type . "',b.type) AND
+ s.version = '" . $version . "' AND
+ s.points != ''
+ ORDER BY
+ id, nickname
+ ");
+
+ while ($row = mysql_fetch_object($res)) {
+ $results[] = $row;
+ }
+ }
+
+ $tpl->set('results', $results);
+
+ if (isset($_REQUEST['show'])) {
+ $show = explode('/', $_REQUEST['show']);
+
+ if (isset($show[0])) {
+ $res = mysql_query("
+ SELECT
+ b.unique AS id, b.nickname, s.score, s.bonus, s.points, s.results
+ FROM
+ browsers AS b,
+ scores AS s
+ WHERE
+ b.unique = s.id AND
+ b.listed = 1 AND
+ s.version = '" . $version . "' AND
+ b.unique ='" . mysql_real_escape_string($show[0]) . "'
+ ");
+
+ if ($row = mysql_fetch_object($res)) {
+ $tpl->set('one', json_encode($row));
+ }
+ }
+
+ if (isset($show[1])) {
+ $res = mysql_query("
+ SELECT
+ b.unique AS id, b.nickname, s.score, s.bonus, s.points, s.results
+ FROM
+ browsers AS b,
+ scores AS s
+ WHERE
+ b.unique = s.id AND
+ b.listed = 1 AND
+ s.version = '" . $version . "' AND
+ b.unique ='" . mysql_real_escape_string($show[1]) . "'
+ ");
+
+ if ($row = mysql_fetch_object($res)) {
+ $tpl->set('two', json_encode($row));
+ }
+ }
+
+ if (isset($show[2])) {
+ $res = mysql_query("
+ SELECT
+ b.unique AS id, b.nickname, s.score, s.bonus, s.points, s.results
+ FROM
+ browsers AS b,
+ scores AS s
+ WHERE
+ b.unique = s.id AND
+ b.listed = 1 AND
+ s.version = '" . $version . "' AND
+ b.unique ='" . mysql_real_escape_string($show[2]) . "'
+ ");
+
+ if ($row = mysql_fetch_object($res)) {
+ $tpl->set('three', json_encode($row));
+ }
+ }
+ }
+
+
+ echo $tpl->fetch();
View
4 backend/config.php
@@ -0,0 +1,4 @@
+<?php
+
+ $version = '3.00';
+ $readonly = false;
View
116 backend/feature.php
@@ -0,0 +1,116 @@
+<?php
+
+ include('config.php');
+ include('libraries/database.php');
+ include('libraries/template.php');
+
+
+ $tpl = new Template('templates/feature.html');
+
+ $results = array();
+ $types = array('desktop', 'tablet', 'mobile', 'television', 'gaming');
+
+ foreach($types AS $type) {
+ $res = mysql_query("
+ SELECT
+ b.unique AS id, CONCAT(b.unique,'-" . $type . "-',b.id) AS uid, b.nickname, b.details, '" . $type . "' AS type
+ FROM
+ browsers AS b,
+ scores AS s
+ WHERE
+ b.unique = s.id AND
+ b.listed = 1 AND
+ FIND_IN_SET('" . $type . "',b.type) AND
+ s.version = '" . $version . "' AND
+ s.points != ''
+ ORDER BY
+ id, nickname
+ ");
+
+ while ($row = mysql_fetch_object($res)) {
+ $results[] = $row;
+ }
+ }
+
+ $tpl->set('results', $results);
+
+ if (isset($_REQUEST['show'])) {
+ $show = explode('/', $_REQUEST['show']);
+
+ if (isset($show[0])) {
+ $results = array();
+
+ $res = mysql_query("
+ SELECT
+ IF(s.results LIKE '%" . mysql_real_escape_string($show[0]) . "=1%',1,0) AS supported, b.unique AS id, CONCAT(b.unique,'-',b.id) AS uid
+ FROM
+ browsers AS b,
+ scores AS s
+ WHERE
+ b.unique = s.id AND
+ b.listed = 1 AND
+ s.version = '" . $version . "'
+ ");
+
+ while ($row = mysql_fetch_object($res)) {
+ $results[] = $row->id . '=' . $row->supported;
+ }
+
+ $tpl->set('one', json_encode(array(
+ 'id' => $show[0],
+ 'supported' => implode(',', $results)
+ )));
+ }
+
+ if (isset($show[1])) {
+ $results = array();
+
+ $res = mysql_query("
+ SELECT
+ IF(s.results LIKE '%" . mysql_real_escape_string($show[1]) . "=1%',1,0) AS supported, b.unique AS id, CONCAT(b.unique,'-',b.id) AS uid
+ FROM
+ browsers AS b,
+ scores AS s
+ WHERE
+ b.unique = s.id AND
+ b.listed = 1 AND
+ s.version = '" . $version . "'
+ ");
+
+ while ($row = mysql_fetch_object($res)) {
+ $results[] = $row->id . '=' . $row->supported;
+ }
+
+ $tpl->set('two', json_encode(array(
+ 'id' => $show[1],
+ 'supported' => implode(',', $results)
+ )));
+ }
+
+ if (isset($show[2])) {
+ $results = array();
+
+ $res = mysql_query("
+ SELECT
+ IF(s.results LIKE '%" . mysql_real_escape_string($show[2]) . "=1%',1,0) AS supported, b.unique AS id, CONCAT(b.unique,'-',b.id) AS uid
+ FROM
+ browsers AS b,
+ scores AS s
+ WHERE
+ b.unique = s.id AND
+ b.listed = 1 AND
+ s.version = '" . $version . "'
+ ");
+
+ while ($row = mysql_fetch_object($res)) {
+ $results[] = $row->id . '=' . $row->supported;
+ }
+
+ $tpl->set('three', json_encode(array(
+ 'id' => $show[2],
+ 'supported' => implode(',', $results)
+ )));
+ }
+ }
+
+ echo $tpl->fetch();
View
158 backend/index.php
@@ -0,0 +1,158 @@
+<?php
+
+ if ($_SERVER['REQUEST_METHOD'] != 'GET') {
+ header('Access-Control-Allow-Origin: *');
+ header('Access-Control-Allow-Headers: Content-Type');
+ header('Content-Type: application/json');
+
+ if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
+ exit;
+ }
+ } else {
+ header('Content-Type: text/javascript');
+ }
+
+ include('config.php');
+ include('libraries/database.php');
+
+ $method = $_REQUEST['method'];
+ switch($method) {
+
+ case 'loadFeature':
+ $results = array();
+
+ $res = mysql_query("
+ SELECT
+ IF(s.results LIKE '%" . mysql_real_escape_string($_REQUEST['id']) . "=1%',1,0) AS supported, b.unique AS id, CONCAT(b.unique,'-',b.id) AS uid
+ FROM
+ browsers AS b,
+ scores AS s
+ WHERE
+ b.unique = s.id AND
+ b.listed = 1 AND
+ s.version = '" . $version . "'
+ ");
+
+ while ($row = mysql_fetch_object($res)) {
+ $results[] = $row->id . '=' . $row->supported;
+ }
+
+ echo json_encode(array(
+ 'id' => $_REQUEST['id'],
+ 'supported' => implode(',', $results)
+ ));
+
+ break;
+
+ case 'loadBrowser':
+ if (substr($_REQUEST['id'], 0, 7) == 'custom:') {
+ $res = mysql_query("
+ SELECT
+ 'custom' AS id, 'Unique id' AS nickname, score, bonus, points, results
+ FROM
+ results
+ WHERE
+ uniqueid ='" . mysql_real_escape_string(substr($_REQUEST['id'], 7)) . "'
+ ");
+ } else {
+ $res = mysql_query("
+ SELECT
+ b.unique AS id, b.nickname, s.score, s.bonus, s.points, s.results
+ FROM
+ browsers AS b,
+ scores AS s
+ WHERE
+ b.unique = s.id AND
+ b.listed = 1 AND
+ s.version = '" . $version . "' AND
+ b.unique ='" . mysql_real_escape_string($_REQUEST['id']) . "'
+ ");
+ }
+
+ if ($row = mysql_fetch_object($res)) {
+ echo json_encode($row);
+ }
+
+ break;
+
+ case 'submit':
+ $payload = json_decode($_REQUEST['payload']);
+ $headers = apache_request_headers();
+
+ $xWapProfile = isset($headers['x-wap-profile']) ? $headers['x-wap-profile'] : '';
+ $xOperaMiniPhoneUA = isset($headers['X-OperaMini-Phone-UA']) ? $headers['X-OperaMini-Phone-UA'] : '';
+
+ if (!$readonly) {
+ mysql_query('
+ INSERT INTO
+ results
+ SET
+ version = "' . mysql_real_escape_string($payload->version) . '",
+ revision = "' . mysql_real_escape_string($payload->revision) . '",
+ ip = "' . mysql_real_escape_string($_SERVER['REMOTE_ADDR']) . '",
+ uniqueid = "' . mysql_real_escape_string($payload->uniqueid) . '",
+ score = "' . mysql_real_escape_string($payload->score) . '",
+ bonus = "' . mysql_real_escape_string($payload->bonus) . '",
+ camouflage = "' . mysql_real_escape_string($payload->camouflage) . '",
+ features = "' . mysql_real_escape_string($payload->features) . '",
+ browserName = "' . mysql_real_escape_string($payload->browserName) . '",
+ browserChannel = "' . mysql_real_escape_string($payload->browserChannel) . '",
+ browserVersion = "' . mysql_real_escape_string($payload->browserVersion) . '",
+ browserVersionType = "' . mysql_real_escape_string($payload->browserVersionType) . '",
+ browserVersionMajor = "' . intval($payload->browserVersionMajor) . '",
+ browserVersionMinor = "' . intval($payload->browserVersionMinor) . '",
+ browserVersionOriginal = "' . mysql_real_escape_string($payload->browserVersionOriginal) . '",
+ browserMode = "' . mysql_real_escape_string($payload->browserMode) . '",
+ engineName = "' . mysql_real_escape_string($payload->engineName) . '",
+ engineVersion = "' . mysql_real_escape_string($payload->engineVersion) . '",
+ osName = "' . mysql_real_escape_string($payload->osName) . '",
+ osVersion = "' . mysql_real_escape_string($payload->osVersion) . '",
+ deviceManufacturer = "' . mysql_real_escape_string($payload->deviceManufacturer) . '",
+ deviceModel = "' . mysql_real_escape_string($payload->deviceModel) . '",
+ deviceWidth = "' . mysql_real_escape_string($payload->deviceWidth) . '",
+ deviceHeight = "' . mysql_real_escape_string($payload->deviceHeight) . '",
+ deviceType = "' . mysql_real_escape_string($payload->deviceType) . '",
+ useragent = "' . mysql_real_escape_string($payload->useragent) . '",
+ humanReadable = "' . mysql_real_escape_string($payload->humanReadable) . '",
+ xWapProfile = "' . mysql_real_escape_string($xWapProfile) . '",
+ xOperaMiniPhoneUA = "' . mysql_real_escape_string($xOperaMiniPhoneUA) . '",
+ results = "' . mysql_real_escape_string($payload->results) . '",
+ points = "' . mysql_real_escape_string($payload->points) . '",
+ status = 0
+ ');
+ }
+
+ break;
+
+ case 'confirm':
+ $payload = json_decode($_REQUEST['payload']);
+
+ if (!$readonly) {
+ mysql_query('
+ UPDATE
+ results
+ SET
+ status = 1
+ WHERE
+ uniqueid = "' . mysql_real_escape_string($payload->uniqueid) . '"
+ ');
+ }
+
+ break;
+
+ case 'report':
+ $payload = json_decode($_REQUEST['payload']);
+
+ if (!$readonly) {
+ mysql_query('
+ UPDATE
+ results
+ SET
+ status = -1
+ WHERE
+ uniqueid = "' . mysql_real_escape_string($payload->uniqueid) . '"
+ ');
+ }
+
+ break;
+ }
View
9 backend/libraries/database.php
@@ -0,0 +1,9 @@
+<?php
+
+ $mysql['server'] = 'localhost';
+ $mysql['username'] = '*****';
+ $mysql['password'] = '*****';
+ $mysql['database'] = '*****';
+
+ mysql_connect($mysql['server'], $mysql['username'], $mysql['password']);
+ mysql_select_db($mysql['database']);
View
94 backend/libraries/template.php
@@ -0,0 +1,94 @@
+<?php
+
+class Template {
+ var $filters;
+ var $value;
+ var $prepend;
+ var $append; /// Holds all the template variables
+
+ /**
+ * Constructor
+ *
+ * @param $file string the file name you want to load
+ */
+ function Template($file = null) {
+ $this->file = $file;
+ }
+
+ /**
+ * Set a template variable.
+ */
+ function set($name, $value) {
+ $this->value[$name] = is_object($value) && @function_exists(array($value, 'Template')) ? $value->fetch() : $value;
+ }
+
+ function append($name, $value) {
+ if (isset($this->append[$name]))
+ $this->append[$name] .= is_object($value) && @function_exists(array($value, 'Template')) ? $value->fetch() : $value;
+ else
+ $this->append[$name] = is_object($value) && @function_exists(array($value, 'Template')) ? $value->fetch() : $value;
+ }
+
+ function prepend($name, $value) {
+ if (isset($this->prepend[$name]))
+ $this->prepend[$name] .= is_object($value) && @function_exists(array($value, 'Template')) ? $value->fetch() : $value;
+ else
+ $this->prepend[$name] = is_object($value) && @function_exists(array($value, 'Template')) ? $value->fetch() : $value;
+ }
+
+ function filter($function) {
+ $this->filters[] = $function;
+ }
+
+ function get($name) {
+ return $this->value[$name];
+ }
+
+ /**
+ * Open, parse, and return the template file.
+ *
+ * @param $file string the template file name
+ */
+ function fetch($file = null) {
+ global $manager, $user, $tree, $lang, $config, $site;
+
+ if(!$file) $file = $this->file;
+
+ if (is_array($this->prepend)) {
+ while(list($k,) = each($this->prepend)) {
+ if (isset($this->value[$k]))
+ $this->value[$k] = $this->prepend[$k] . $this->value[$k];
+ else
+ $this->value[$k] = $this->prepend[$k];
+ }
+ }
+
+ if (is_array($this->append)) {
+ while(list($k,) = each($this->append)) {
+ if (isset($this->value[$k]))
+ $this->value[$k] = $this->value[$k] . $this->append[$k];
+ else
+ $this->value[$k] = $this->append[$k];
+ }
+ }
+
+ if (is_array($this->value)) {
+ extract($this->value);
+ }
+ // Extract the vars to local namespace
+
+ ob_start(); // Start output buffering
+ include($file); // Include the file
+ $contents = ob_get_contents(); // Get the contents of the buffer
+ ob_end_clean(); // End buffering and discard
+
+ // Execute any registered filters...
+ if (is_array($this->filters)) {
+ while(list(,$f) = each($this->filters)) {
+ $contents = call_user_func($f, $contents, $this);
+ }
+ }
+
+ return $contents; // Return the contents
+ }
+}
View
72 backend/results.php
@@ -0,0 +1,72 @@
+<?php
+
+ include('config.php');
+ include('libraries/database.php');
+ include('libraries/template.php');
+
+
+
+ $type = $_REQUEST['type'];
+ if (!in_array($type, array('desktop', 'mobile', 'tablet', 'gaming', 'television'))) $type = 'desktop';
+
+
+
+ $tpl = new Template('templates/results.html');
+ $tpl->set('type', $type);
+
+ $results = array();
+
+ $res = mysql_query("
+ SELECT
+ b.status, b.unique, b.nickname, b.details, b.description, s.score, s.bonus, s.points, s.results
+ FROM
+ browsers AS b,
+ scores AS s
+ WHERE
+ b.unique = s.id AND
+ b.listed = 1 AND
+ s.version = '" . $version . "' AND
+ FIND_IN_SET('" . $type . "',type)
+ ORDER BY
+ score DESC, bonus DESC
+ ");
+
+ while ($row = mysql_fetch_object($res)) {
+ $results[$row->status][] = $row;
+ }
+
+
+ $tpl->set('results', $results);
+ if (count($results['current']) > 0) $tpl->set('first', $results['current'][0]);
+ if (count($results['current']) > 1) $tpl->set('runnerup', $results['current'][1]);
+ if (count($results['development']) > 0) $tpl->set('upcoming', $results['development'][0]);
+
+
+
+
+ $sets = array();
+
+ $res = mysql_query("
+ SELECT
+ b.grouped, b.unique, b.nickname, b.details, IF(ISNULL(b.release),DATE(NOW()),b.release) AS `release`, b.status, s.score
+ FROM
+ browsers AS b,
+ scores AS s
+ WHERE
+ b.unique = s.id AND
+ (!ISNULL(b.release) OR b.status = 'development') AND
+ s.version = '" . $version . "' AND
+ FIND_IN_SET('" . $type . "',type)
+ ORDER BY
+ b.grouped, `release`
+ ");
+
+ while ($row = mysql_fetch_object($res)) {
+ $sets[$row->grouped]['name'] = $row->grouped;
+ $sets[$row->grouped]['data'][] = $row;
+ }
+
+ $tpl->set('sets', $sets);
+
+
+ echo $tpl->fetch();
View
140 backend/templates/browser.html
@@ -0,0 +1,140 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>The HTML5 test - 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 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?2.21" type="text/css">
+ <script src='/scripts/data.js' type='text/javascript'></script>
+ <script src='/scripts/engine.js' type='text/javascript'></script>
+ <script src='/scripts/reporting.js' type='text/javascript'></script>
+ <script src='/scripts/useragents.js' type='text/javascript'></script>
+
+ <link rel="icon" href="/icon.png">
+ <link rel="apple-touch-icon" href="/button.png">
+
+ <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>
+
+ <body>
+ <div class='header'>
+ <h1>The HTML5 test <em>&ndash; how well does your browser support HTML5?</em></h1>
+ <ul>
+ <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>
+
+ <li class='right'><a href='/about.html'>About<span> the test</span></a></li>
+ </ul>
+ </div>
+
+ <div class='page'>
+ <div class='paper'>
+ <ul>
+ <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'></div>
+
+ <hr>
+
+ <h3>About these scores</h3>
+ <div class='explaination'>
+ 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>
+ <!--
+
+ Browsers = new UserAgents(navigator.userAgent, {
+ useFeatures: true,
+ detectCamouflage: true
+ });
+
+ var table = new FeatureTable({
+ title: '<h2>browsers</h2><p>Select up to three browsers and compare their test results in detail</p>',
+ parent: document.getElementById('comparison'),
+ tests: tests,
+ browsers: <?php echo json_encode($results); ?>,
+ header: true,
+ explainations: false,
+ features: true,
+ columns: 3,
+
+ onChange: function(ids) {
+ if (window.history) {
+ if (ids.length)
+ window.history.replaceState([], document.title, '/compare/browser/' + ids.join('/') + '.html');
+ else
+ window.history.replaceState([], document.title, '/compare/browser/index.html');
+ }
+ }
+ });
+
+ <?php if ($one != ''): ?>
+ table.updateColumn(0, <?php echo $one; ?>);
+ <?php endif; ?>
+
+ <?php if ($two != ''): ?>
+ table.updateColumn(1, <?php echo $two; ?>);
+ <?php endif; ?>
+
+ <?php if ($three != ''): ?>
+ table.updateColumn(2, <?php echo $three; ?>);
+ <?php endif; ?>
+
+
+ -->
+ </script>
+ </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>
+ </body>
+</html>
View
115 backend/templates/feature.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>The HTML5 test - 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 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?2.21" type="text/css">
+ <script src='/scripts/data.js' type='text/javascript'></script>
+ <script src='/scripts/reporting.js' type='text/javascript'></script>
+
+ <link rel="icon" href="/icon.png">
+ <link rel="apple-touch-icon" href="/button.png">
+ </head>
+
+ <body>
+ <div class='header'>
+ <h1>The HTML5 test <em>&ndash; how well does your browser support HTML5?</em></h1>
+ <ul>
+ <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>
+
+ <li class='right'><a href='/about.html'>About<span> the test</span></a></li>
+ </ul>
+ </div>
+
+ <div class='page'>
+ <div class='paper'>
+ <ul>
+ <li><a href='/compare/browser/index.html'>Browsers</a></li>
+ <li class='selected'><a href='/compare/feature/index.html'>Features</a></li>
+ </ul>
+
+ <div>
+ <div id='comparison' class='comparisonTable'></div>
+
+ <hr>
+
+ <h3>About these scores</h3>
+ <div class='explaination'>
+ 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>
+ <!--
+
+ var table = new BrowserTable({
+ title: '<h2>features</h2><p>Select up to three features and immediately see how well it is supported by each browser</p>',
+ parent: document.getElementById('comparison'),
+ tests: tests,
+ browsers: <?php echo json_encode($results); ?>,
+ header: true,
+ explainations: false,
+ columns: 3,
+
+ onChange: function(ids) {
+ if (window.history) {
+ if (ids.length)
+ window.history.replaceState([], document.title, '/compare/feature/' + ids.join('/') + '.html');
+ else
+ window.history.replaceState([], document.title, '/compare/feature/index.html');
+ }
+ }
+ });
+
+ <?php if ($one != ''): ?>
+ table.updateColumn(0, <?php echo $one; ?>);
+ <?php endif; ?>
+
+ <?php if ($two != ''): ?>
+ table.updateColumn(1, <?php echo $two; ?>);
+ <?php endif; ?>
+
+ <?php if ($three != ''): ?>
+ table.updateColumn(2, <?php echo $three; ?>);
+ <?php endif; ?>
+
+ -->
+ </script>
+ </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>
+ </body>
+</html>
View
307 backend/templates/results.html
@@ -0,0 +1,307 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>The HTML5 test - 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 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?2.21" type="text/css">
+ <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>
+
+ <link rel="icon" href="/icon.png">
+ <link rel="apple-touch-icon" href="/button.png">
+ </head>
+
+ <body>
+ <div class='header'>
+ <h1>The HTML5 test <em>&ndash; how well does your browser support HTML5?</em></h1>
+ <ul>
+ <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>
+
+ <li class='right'><a href='/about.html'>About<span> the test</span></a></li>
+ </ul>
+ </div>
+
+ <div class='page'>
+ <div class='paper'>
+ <ul>
+ <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 == 'gaming' ? 'selected' : ''; ?>'><a href='/results/gaming.html'>Gaming</a></li>
+ <li class='<?php echo $type == 'television' ? 'selected' : ''; ?>'><a href='/results/television.html'>Television</a></li>
+ </ul>
+
+ <div>
+ <div class='rankingPanel'>
+ <?php if (isset($first)): ?>
+ <dl id='winner'>
+ <dt>first place</dt>
+ <dd class='score'><?php echo $first->score; ?></dd>
+ <dd><?php echo $first->nickname; ?></dd>
+ </dl>
+ <?php endif; ?>
+
+ <?php if (isset($runnerup)): ?>
+ <dl id='runnerup'>
+ <dt>runner up</dt>
+ <dd class='score'><?php echo $runnerup->score; ?></dd>
+ <dd><?php echo $runnerup->nickname; ?></dd>
+ </dl>
+ <?php endif; ?>
+
+ <?php if (isset($upcoming)): ?>
+ <dl id='upcoming'>
+ <dt>upcoming</dt>
+ <dd class='score'><?php echo $upcoming->score; ?></dd>
+ <dd><?php echo $upcoming->nickname; ?></dd>
+ </dl>
+ <?php endif; ?>
+ </div>
+
+ <hr>
+
+ <?php if (isset($results['current'])): ?>
+ <h2>Current</h2>
+ <table class='scoreTable'>
+ <thead>
+ <tr>
+ <th class='nickname'></th>
+ <th class='details'></th>
+ <th class='description'></th>
+ <th class='points'>Score</th>
+ <th class='bonus'>Bonus</th>
+ </tr>
+ </thead>
+ <tbody>
+ <?php foreach($results['current'] as $item): ?>
+ <tr>
+ <th class='nickname'>
+ <?php if ($item->points != ''): ?>
+ <a href='/compare/browser/<?php echo $item->unique; ?>.html'><?php echo $item->nickname; ?> <span>»</span></a>
+ <?php else: ?>
+ <?php echo $item->nickname; ?>
+ <?php endif; ?>
+ </th>
+ <th class='details'><?php echo $item->details; ?></th>
+ <th class='description'><em><?php echo $item->description; ?></em></th>
+ <td class='points'><?php echo $item->score; ?></td>
+ <td class='bonus'><?php echo $item->bonus; ?></td>
+ </tr>
+ <?php endforeach; ?>
+ </tbody>
+ </table>
+ <?php endif; ?>
+
+ <?php if (isset($results['development'])): ?>
+ <h2>Development or beta</h2>
+ <table class='scoreTable'>
+ <thead>
+ <tr>
+ <th class='nickname'></th>
+ <th class='details'></th>
+ <th class='description'></th>
+ <th class='points'>Score</th>
+ <th class='bonus'>Bonus</th>
+ </tr>
+ </thead>
+ <tbody>
+ <?php foreach($results['development'] as $item): ?>
+ <tr>
+ <th class='nickname'>
+ <?php if ($item->points != ''): ?>
+ <a href='/compare/browser/<?php echo $item->unique; ?>.html'><?php echo $item->nickname; ?> <span>»</span></a>
+ <?php else: ?>
+ <?php echo $item->nickname; ?>
+ <?php endif; ?>
+ </th>
+ <th class='details'><?php echo $item->details; ?></th>
+ <th class='description'><em><?php echo $item->description; ?></em></th>
+ <td class='points'><?php echo $item->score; ?></td>
+ <td class='bonus'><?php echo $item->bonus; ?></td>
+ </tr>
+ <?php endforeach; ?>
+ </tbody>
+ </table>
+ <?php endif; ?>
+
+ <?php if (isset($results['legacy'])): ?>
+ <h2>Older</h2>
+ <table class='scoreTable'>
+ <thead>
+ <tr>
+ <th class='nickname'></th>
+ <th class='details'></th>
+ <th class='description'></th>
+ <th class='points'>Score</th>
+ <th class='bonus'>Bonus</th>
+ </tr>
+ </thead>
+ <tbody>
+ <?php foreach($results['legacy'] as $item): ?>
+ <tr>
+ <th class='nickname'>
+ <?php if ($item->points != ''): ?>
+ <a href='/compare/browser/<?php echo $item->unique; ?>.html'><?php echo $item->nickname; ?> <span>»</span></a>
+ <?php else: ?>
+ <?php echo $item->nickname; ?>
+ <?php endif; ?>
+ </th>
+ <th class='details'><?php echo $item->details; ?></th>
+ <th class='description'><em><?php echo $item->description; ?></em></th>
+ <td class='points'><?php echo $item->score; ?></td>
+ <td class='bonus'><?php echo $item->bonus; ?></td>
+ </tr>
+ <?php endforeach; ?>
+ </tbody>
+ </table>
+ <?php endif; ?>
+
+
+ <?php if ($type == 'desktop' || $type == 'mobile' || $type == 'tablet'): ?>
+ <hr>
+ <h2>Timeline</h2>
+ <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].release) {
+ var date = sets[i].data[j].release.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,
+ x: ts,
+ y: parseInt(sets[i].data[j].score, 10)
+ });
+ }
+
+ series.push(s);
+ }
+
+ var chart = new Highcharts.Chart({
+ chart: {
+ renderTo: 'timelineGraph',
+ zoomType: 'x',
+ type: 'spline'
+ },
+ 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(2009,0,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 != 'development' ? Highcharts.dateFormat('%b %Y', this.x) : 'Unreleased') +'<br>' +
+ this.y +' points';
+ }
+ },
+
+ series: series
+ });
+
+ for (var s = 0; s < chart.series.length; s++) {
+ 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();
+ }
+ }
+
+
+ </script>
+ <?php endif; ?>
+
+ <hr>
+
+ <h3>About these scores</h3>
+ <div class='explaination'>
+ 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>
+
+ <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>
+ </body>
+</html>
View
BIN button.png
Deleted file not rendered
View
BIN crown.png
Deleted file not rendered
View
1,426 css/main.css
@@ -1,13 +1,3 @@
-/*
- 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;
-}
-
* {
padding: 0;
margin: 0;
@@ -25,8 +15,7 @@ img {
body {
font-family: 'Droid Sans', Arial, Helvetica, sans-serif;
- padding: 0 0 20px;
-
+ padding: 0;
background: #454545;
background: #454545 -webkit-gradient(radial, center 400, 50, center 400, 300, from(#707070), to(#454545));
background: #454545 -moz-radial-gradient(center 400px, circle, #707070 50px, #454545 300px);
@@ -68,7 +57,6 @@ body {
.header ul li {
display: block;
float: left;
-
margin: 0 3px 0 0;
padding: 0 10px;
line-height: 32px;
@@ -94,6 +82,132 @@ body {
color: #fff;
text-decoration: none;
}
+.header ul li.right {
+ float: right;
+}
+
+.footer {
+ background: #333;
+ background: #333 -webkit-gradient(linear, left 0, left 16, from(#2a2a2a), to(#333));
+ background: #333 -moz-linear-gradient(top, #2a2a2a, #333 16px);
+ background: #333 -ms-linear-gradient(top, #2a2a2a, #333 16px);
+ background: #333 -o-linear-gradient(top, #2a2a2a, #333 16px);
+}
+.footer > div {
+ margin: 0 auto;
+ width: 630px;
+ overflow: hidden;
+ padding-bottom: 20px;
+ position: relative;
+}
+.footer > div .hosting {
+ position: absolute;
+ top: 16px;
+ left: 0;
+}
+.footer > div .copyright {
+ margin: 24px 0 0 72px;
+ font-size: 0.75em;
+ color: #777;
+}
+.footer > div .copyright a {
+ color: #888;
+}
+.footer > div .copyright p {
+ margin-bottom: 0.8em;
+}
+
+
+#html5 {
+ float: right;
+ display: block;
+ width: 74px;
+ height: 102px;
+ margin: 16px 0 10px 10px;
+ background: url(/images/html5.png);
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 2) {
+ #html5 {
+ background: url(/images/html5@2x.png);
+ background-size: 100%;
+ }
+}
+
+
+
+.updated {
+ position: absolute;
+ top: -10px;
+ left: 500px;
+
+ float: left;
+ background-color: #db4d1a;
+ padding: 5px;
+ border-radius: 8px;
+
+ -webkit-box-shadow: 0px 0px 5px #222;
+ -moz-box-shadow: 0px 0px 5px #222;
+ -ms-box-shadow: 0px 0px 5px #222;
+ -o-box-shadow: 0px 0px 5px #222;
+ box-shadow: 0px 0px 5px #222;
+
+ -webkit-transform: rotate(10deg);
+ -moz-transform: rotate(10deg);
+ -ms-transform: rotate(10deg);
+ -o-transform: rotate(10deg);
+
+ text-shadow: 0px -1px 1px #852706;
+
+ font-family: 'Alfa Slab One', Arial;
+ font-weight: normal;
+ font-size: 1.4em;
+ text-transform: uppercase;
+ color: #eee;
+ text-align: center;
+ line-height: 100%;
+ margin: 0;
+}
+.updated span {
+ display: block;
+ font-family: 'Droid Sans', Arial, Helvetica, sans-serif;
+ font-size: 0.4em;
+ line-height: 100%;
+
+ text-shadow: none;
+ text-transform: none;
+}
+
+
+
+.ads {
+ border: 1px solid #555;
+ background: rgba(40,40,40,0.2);
+ padding: 16px 16px 16px 16px;
+ overflow: hidden;
+ margin: 20px 0;
+
+ -webkit-box-shadow: inset 0 3px 10px rgba(0,0,0,0.3);
+ -moz-box-shadow: inset 0 3px 10px rgba(0,0,0,0.3);
+ -ms-box-shadow: inset 0 3px 10px rgba(0,0,0,0.3);
+ -o-box-shadow: inset 0 3px 10px rgba(0,0,0,0.3);
+ box-shadow: inset 0 3px 10px rgba(0,0,0,0.3);
+}
+.ads > p {
+ text-transform: uppercase;
+ font-size: 0.6em !important;
+ text-align: center;
+ letter-spacing: 0.8em;
+
+ text-shadow: rgba(0,0,0,0.3) 0 1px 2px;
+}
+.ads > div {
+ margin: 0 0 0 18px;
+}
+
+
+
+
.page {
@@ -118,10 +232,11 @@ body {
text-transform: lowercase;
}
+
+
#explaination {
width: 200px;
- margin-left: 20px;
- margin-top: 60px;
+ margin: 60px 0 40px 20px;
}
#explaination p {
margin: 1em 0;
@@ -132,81 +247,167 @@ body {
#explaination p a {
color: #ddd;
}
-#explaination h3 {
- color: #fff;
- font-size: 0.9em;
- font-weight: normal;
- text-transform: uppercase;
- text-shadow: 0px -1px 1px #222;
- letter-spacing:0.2em;
-}
-#explaination p + h3 {
- margin-top: 40px;
-}
-#results p {
- color: #bbb;
- text-transform: lowercase;
- text-align: center;
- margin: 0 0 2em;
-}
-#results p.useragent {
- position: relative;
- text-align: left;
- text-transform: none;
- font-size: 0.8em;
- color: #222;
- padding: 10px 100px 10px 10px;
- background: #f0f0f0;
+.paper {
+ position:relative;
+ top: 32px;
+
+ background: #fff;
+
-webkit-border-radius: 6px;
+ -webkit-border-top-left-radius: 0;
-moz-border-radius: 6px;
+ -moz-border-radius-topleft: 0;
border-radius: 6px;
+ border-top-left-radius: 0;
-webkit-box-shadow: 0px 0px 5px #222;
-moz-box-shadow: 0px 0px 5px #222;
-ms-box-shadow: 0px 0px 5px #222;
-o-box-shadow: 0px 0px 5px #222;
box-shadow: 0px 0px 5px #222;
+
+ margin-bottom: 64px;
}
-#results p.useragent span {
- position: absolute;
- right: 10px;
- top: 8px;
- font-size: 0.85em;
- color: #aaa;
- line-height: 20px;
+.paper > ul {
+ position:absolute;
+ top: -32px;
+
+ margin: 0;
+ overflow:hidden;
+ list-style-type: none;
}
-#results p.useragent span a {
- font-size: 1.6em;
- padding: 0 0 0 6px;
- cursor: pointer;
+.paper > ul li {
+ display: block;
+ float: left;
+
+ margin: 0 3px 0 0;
+ padding: 0 10px;
+ line-height: 32px;
+ color: #fff;
+ font-size: 0.9em;
+ text-transform: lowercase;
+ text-shadow: 0px -1px 1px #000;
+
+ background: #5f5f5f;
+
+ -webkit-border-top-left-radius: 6px;
+ -moz-border-radius-topleft: 6px;
+ border-top-left-radius: 6px;
+
+ -webkit-border-top-right-radius: 6px;
+ -moz-border-radius-topright: 6px;
+ border-top-right-radius: 6px;
}
-#results p.useragent span a.correct:hover {
- color: #1c8c1d;
+.paper > ul li.selected {
+ background: #fff;
}
-#results p.useragent span a.wrong:hover {
- color: #853333;
+.paper > ul li a {
+ color: #fff;
+ text-decoration: none;
+}
+.paper > ul li.selected a {
+ color: #000;
+ text-shadow: none;
+}
+.paper > div {
+ padding: 30px;
+ font-size: 0.75em;
+ line-height: 140%;
+}
+.paper > div h2 {
+ font-family: 'Alfa Slab One', Arial;
+ font-size: 2.2em;
+ font-weight: normal;
+ font-style: normal;
+ color: #ec6534;
+ clear: both;
+ padding: 1.5em 0 0.5em;
+ margin: 0;
+}
+.paper > div h3 {
+ margin: 2em 0 0.3em;
+}
+.paper > div p {
+ margin: 0 0 0.5em;
+}
+.paper > div a {
+ color: #333;
+}
+.paper > div .explaination {
+ -moz-column-count: 2;
+ -moz-column-gap: 16px;
+ -webkit-column-count: 2;
+ -webkit-column-gap: 16px;
+ column-count: 2;
+ column-gap: 16px;
+}
+.paper > div hr {
+ clear: both;
+ display: block;
+ margin: 0 -30px;
+ height: 30px;
+ border: none;
+
+ background: #fff -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f3f3f3));
+ background: #fff -moz-linear-gradient(top, #fff, #f3f3f3);
+ background: #fff -ms-linear-gradient(top, #fff, #f3f3f3);
+ background: #fff -o-linear-gradient(top, #fff, #f3f3f3);
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+.uniqueid {
+ margin-top: 1em;
+ margin-bottom: 3em;
+ font-size: 0.75em;
+ color: #666;
}
-#results p.intro {
+
+.scorePanel p.intro {
color: #999;
font-size: 1.9em;
letter-spacing: 0.1em;
line-height: 100%;
margin: 0 0 10px;
}
-#results h2 {
+.scorePanel h2 {
font-family: 'Alfa Slab One', Arial;
+ font-weight: normal;
font-size: 10em;
color: #eee;
text-align: center;
text-shadow: 0px 0px 10px #333;
line-height: 100%;
margin: 0;
}
-#results h3 {
+.scorePanel h3 {
font-family: 'Alfa Slab One', Arial;
+ font-weight: normal;
font-size: 2.3em;
color: #aaa;
text-align: center;
@@ -217,84 +418,267 @@ body {
margin: 0 0 0.4em;
}
-
-#results h4 {
- font-size: 1.2em;
- color: #aaa;
- margin: 2em 0 0.5em;
+.scorePanel p {
+ color: #bbb;
+ text-transform: lowercase;
+ text-align: center;
+ margin: 0 0 2em;
}
-#results ul li {
+
+
+.useragent {
position: relative;
-
- font-size: 1.1em;
- padding: 4px 11px 6px;
- margin: 0 0 1em;
- background: #f0f0f0;
- list-style-type: none;
- line-height: 220%;
- -webkit-border-radius: 6px;
- -moz-border-radius: 6px;
+ text-align: left;
+ text-transform: none;
+ font-size: 0.8em;
+ color: #222;
+ padding: 10px 100px 10px 10px;
+ margin: 0 0 20px;
+
+ background: #f0f0f0;
+ -webkit-border-radius: 6px;
+ -moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0px 0px 5px #222;
-moz-box-shadow: 0px 0px 5px #222;
-ms-box-shadow: 0px 0px 5px #222;
-o-box-shadow: 0px 0px 5px #222;
box-shadow: 0px 0px 5px #222;
+}
+.useragent span {
+ position: absolute;
+ right: 10px;
+ top: 8px;
+ font-size: 0.85em;
+ color: #aaa;
+ line-height: 20px;
+}
+.useragent span a {
+ font-size: 1.6em;
+ padding: 0 0 0 6px;
+ cursor: pointer;
+}
+.useragent span a.correct:hover {
+ color: #1c8c1d;
+}
+.useragent span a.wrong:hover {
+ color: #853333;
+}
+
+
+
+.rankingPanel dl {
+ -webkit-border-radius: 6px;
+ -moz-border-radius: 6px;
+ border-radius: 6px;
- background: #f0f0f0 -webkit-gradient(linear, left top, left 86, from(#e6e6e6), to(#f0f0f0), color-stop(0.5, #f6f6f6), color-stop(0.5, #d6d6d6));
- background: #f0f0f0 -moz-linear-gradient(top, #e6e6e6, #f6f6f6 43px, #d6d6d6 43px, #f0f0f0);
- background: #f0f0f0 -ms-linear-gradient(top, #e6e6e6, #f6f6f6 43px, #d6d6d6 43px, #f0f0f0);
- background: #f0f0f0 -o-linear-gradient(top, #e6e6e6, #f6f6f6 43px, #d6d6d6 43px, #f0f0f0);
+ float: left;
+ margin-right: 20px;
+ padding: 4px 8px;
+ overflow: hidden;
+ text-align: center;
+
+ -webkit-box-shadow: 0px 0px 5px #999;
+ -moz-box-shadow: 0px 0px 5px #999;
+ -ms-box-shadow: 0px 0px 5px #999;
+ -o-box-shadow: 0px 0px 5px #999;
+ box-shadow: 0px 0px 5px #999;
+
+ background: #f0f0f0 -webkit-gradient(linear, left top, left bottom, from(#e6e6e6), to(#f6f6f6), color-stop(0.5, #f6f6f6), color-stop(0.5, #e6e6e6));
+ background: #f0f0f0 -moz-linear-gradient(top, #e6e6e6, #f6f6f6 50%, #e6e6e6 50%, #f6f6f6);
+ background: #f0f0f0 -ms-linear-gradient(top, #e6e6e6, #f6f6f6 50%, #e6e6e6 50%, #f6f6f6);
+ background: #f0f0f0 -o-linear-gradient(top, #e6e6e6, #f6f6f6 50%, #e6e6e6 50%, #f6f6f6);
+}
+.rankingPanel dl#winner {
+ background: #e04f2e -webkit-gradient(linear, left top, left bottom, from(#ec6534), to(#e04f2e), color-stop(0.5, #ec6534), color-stop(0.5, #e04f2e));
+ background: #e04f2e -moz-linear-gradient(top, #ec6534, #e04f2e 50%, #ec6534 50%, #e04f2e);
+ background: #e04f2e -ms-linear-gradient(top, #ec6534, #e04f2e 50%, #ec6534 50%, #e04f2e);
+ background: #e04f2e -o-linear-gradient(top, #ec6534, #e04f2e 50%, #ec6534 50%, #e04f2e);
+ padding-left: 38px;
+}
+.rankingPanel dl#winner::before {
+ display: block;
+ content: '';
+ background: url(../images/crown.png);
+ width: 54px;
+ height: 71px;
+
+ position: absolute;
+ margin-left: -58px;
+ margin-top: -32px;
+}
+.rankingPanel dl#upcoming {
+ float: right;
+ margin: 0;
+}
+.rankingPanel dl dt {
+ font-family: 'Alfa Slab One', Arial;
+ font-size: 1.6em;
+ line-height: 90%;
+
+ color: #fff;
+ text-shadow: 0px -1px 1px #aaa;
+}
+.rankingPanel dl dd {
+ color: #666;
+}
+.rankingPanel dl#winner dd {
+ color: #fff;
+}
+.rankingPanel dl dd.score {
+ font-family: 'Alfa Slab One', Arial;
+ font-size: 5em;
+ line-height: 95%;
+ text-shadow: 0px 0px 6px #999;
+ color: #fff;
+}
+.rankingPanel dl#winner dd.score {
+ text-shadow: 0px 0px 6px #963411;
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 2) {
+ .rankingPanel dl#winner::before {
+ background: url(../images/crown@2x.png);
+ background-size: 100%;
+ }
+}
+
+
+
+.scoreTable {
+ width: 100%;
+ border-collapse: collapse;
}
-#results ul li strong {
+.scoreTable th,
+.scoreTable td {
+ font-weight: normal;
+ text-align: left;
+
+ border-top: 1px solid #ddd;
+ padding: 4px 0;
+ vertical-align: top;
+ font-size: 1em;
+}
+.scoreTable thead th {
+ text-align: right;
+ padding-left: 10px;
+ border-top: none;
+ font-weight: bold;
+}
+.scoreTable a {
color: #000;
+ text-decoration: none;
display: block;
- width: 66%;
- overflow: hidden;
+}
+.scoreTable a span {
+ color: #aaa;
+ font-size: 120%;
+}
+.scoreTable em {
+ color: #888;
+}
+.scoreTable .nickname {
+ width: 30%;
+ padding-right: 10px;
white-space: nowrap;
- font-weight: bold;
+}
+.scoreTable .details {
+ width: 26%;
+ padding-right: 10px;
+}
+.scoreTable .description {
+ width: 28%;
+ padding-right: 10px;
+ font-size: 0.9em;
+}
+.scoreTable .description em {
+ display: inline-block;
text-overflow: ellipsis;
- text-overflow: ellipsis-word;
+ white-space: nowrap;
+ overflow: hidden;
+ width: 190px;
+}
+.scoreTable .points {
+ width: 8%;
+ text-align: right;
+}
+.scoreTable .bonus {
+ width: 8%;
+ text-align: right;
}
-#results ul li em {
- position: absolute;
- top: 4px;
- right: 8px;
- font-size: 1.6em;
- font-weight: bold;
- font-style: normal;
+
+
+.resultsTable table {
+ border-collapse: collapse;
+
+ position: relative;
+ width: 100%;
+
+ margin: 0 0 1em;
+ background: #f0f0f0;
+ -webkit-border-radius: 6px;
+ -moz-border-radius: 6px;
+ border-radius: 6px;
+
+ -webkit-box-shadow: 0px 0px 5px #222;
+ -moz-box-shadow: 0px 0px 5px #222;
+ -ms-box-shadow: 0px 0px 5px #222;
+ -o-box-shadow: 0px 0px 5px #222;
+ box-shadow: 0px 0px 5px #222;
+
+ background: #f0f0f0 -webkit-gradient(linear, left top, left 86, from(#e6e6e6), to(#f0f0f0), color-stop(0.5, #f6f6f6), color-stop(0.5, #d6d6d6));
+ background: #f0f0f0 -moz-linear-gradient(top, #e6e6e6, #f6f6f6 43px, #d6d6d6 43px, #f0f0f0);
+ background: #f0f0f0 -ms-linear-gradient(top, #e6e6e6, #f6f6f6 43px, #d6d6d6 43px, #f0f0f0);
+ background: #f0f0f0 -o-linear-gradient(top, #e6e6e6, #f6f6f6 43px, #d6d6d6 43px, #f0f0f0);
+}
+.resultsTable table thead th {
+ padding: 3px 10px;
+
+ font-size: 1.1em;
+ text-align: left;
+}
+.resultsTable table thead td {
+ padding: 3px 10px;
+
font-family: 'Alfa Slab One', Arial;
- color: #aaa;
+ font-weight: normal;
+ font-style: normal;
+ font-size: 1.8em;
+ text-align: right;
+ color: #999;
}
-#results ul li em.none {
+.resultsTable table thead td span.none {
color: #853333;
}
-#results ul li em.badly {
+.resultsTable table thead td span.badly {
color: #d68533;
}
-#results ul li em.reasonable {
+.resultsTable table thead td span.reasonable {
color: #e7c333;
}
-#results ul li em.good {
+.resultsTable table thead td span.good {
color: #88b038;
}
-#results ul li em.great {
+.resultsTable table thead td span.great {
color: #33af33;
}
-#results ul li em span {
- position: relative;
- top: -6px;
+.resultsTable table thead td span.bonus {
+ position: absolute;
+ margin-top: 5px;
+ margin-left: -155px;
- font-family: 'Ubuntu', Arial;
+ white-space: nowrap;
+ font-family: 'Droid Sans', Arial, Helvetica, sans-serif;
font-size: 0.6em;
text-transform: lowercase;
+ font-weight: bold;
+ text-align: right;
color: #fff;
padding: 3px 7px;
- margin: 0 14px 0 0;
background: #aaa;
background: #aaa -webkit-gradient(linear, left top, left bottom, from(#888), to(#aaa), color-stop(0.4, #999));
@@ -314,89 +698,90 @@ body {
text-shadow: rgba(0,0,0,0.3) 0 1px 2px;
}
-
-#results ul li table {
- width: 100%;
- margin: 3px 0 0;
- line-height: 100%;
- font-size: 0.70em;
- border-spacing: 0;
-}
-#results ul li table th,
-#results ul li table td {
- padding: 6px 0;
- vertical-align: bottom;
-}
-#results ul li table td.container {
- padding: 0;
-}
-#results ul li table tr.explaination th {
- padding: 16px 0 6px;
- font-size: 0.9em;
- font-style: italic;
- color: #666;