Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Tree: 520327509a
Fetching contributors…

Cannot retrieve contributors at this time

299 lines (291 sloc) 12.648 kB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Javascript feature tests</title>
<link rel="stylesheet" href="master.css" type="text/css" media="screen">
<script src="feature_tests.js" type="text/javascript"></script>
</head>
<body>
<h1>Common feature tests:</h1>
<p>
Too many times I see Javascript authors fail into the trap of browser sniffing.
Feature detection is known to be a much better practice when it comes to creating robust scripts for general web.
Hopefully, this collection can serve as a repository of most common (non-trivial) feature tests.
None of the tests require presence of <code>document.body</code> and so can be run at any time.
<br>
<br>
Found an error or have a suggestion?
<a href="mailto:kangax@gmail.com" title="author email">Please, tell me about it</a>
</p>
<p>
<span id="last-updated">Last updated: Dec 13 2008</span>
</p>
<h2>Features:</h2>
<table id="cft-data">
<thead>
<tr>
<th class="name">Name</th>
<th>Value</th>
<th>Affected Browsers</th>
<th>Info</th>
<th class="code">
Test code<br>
<span>
<a href="#" title="Show all test snippets" class="show-all">Show all</a> /
<a href="#" title="Hide all test snippets" class="hide-all">Hide all</a>
</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>IS_TRANSFORMATION_SUPPORTED</td>
<td></td>
<td>Chrome, Firefox 3.1+</td>
<td>
<a href="http://webkit.org/specs/CSSVisualEffects/CSSTransforms.html">
CSSTransforms specs
</a>
</td>
<td><a href="#" title="show test code" class="show-test-code">show</a></td>
</tr>
<tr style="display:none"><td colspan="5" class="test-code"><pre></pre></td></tr>
<tr>
<td>IS_ELEMENT_TAGNAME_UPPERCASED</td>
<td></td>
<td>-</td>
<td>
<a href="https://developer.mozilla.org/en/DOM/element.tagName" title="element.tagName on MDC">
element.tagName on MDC
</a>
</td>
<td><a href="#" title="show test code" class="show-test-code">show</a></td>
</tr>
<tr style="display:none"><td colspan="5" class="test-code"><pre></pre></td></tr>
<tr>
<td>ARRAY_PROTOTYPE_SLICE_CAN_CONVERT_NODELIST_TO_ARRAY</td>
<td></td>
<td>non-<abbr title="Internet Explorer">IE</abbr></td>
<td></td>
<td><a href="#" title="show test code" class="show-test-code">show</a></td>
</tr>
<tr style="display:none"><td colspan="5" class="test-code"><pre></pre></td></tr>
<tr>
<td>EVENT_HANDLERS_ARE_FIFO</td>
<td></td>
<td>non-<abbr title="Internet Explorer">IE</abbr></td>
<td></td>
<td><a href="#" title="show test code" class="show-test-code">show</a></td>
</tr>
<tr style="display:none"><td colspan="5" class="test-code"><pre></pre></td></tr>
<tr>
<td>WINDOW_EVAL_EVALUATES_IN_GLOBAL_SCOPE</td>
<td></td>
<td>Firefox, Safari 3.2.1, Opera</td>
<td>Test whether `window.eval` evaluates string in global context</td>
<td><a href="#" title="show test code" class="show-test-code">show</a></td>
</tr>
<tr style="display:none"><td colspan="5" class="test-code"><pre></pre></td></tr>
<tr>
<td>IS_EVENT_METAKEY_PRESENT</td>
<td></td>
<td></td>
<td></td>
<td><a href="#" title="show test code" class="show-test-code">show</a></td>
</tr>
<tr style="display:none"><td colspan="5" class="test-code"><pre></pre></td></tr>
<tr>
<td>IS_DOM2_EVENT_INTERFACE_IMPLEMENTED</td>
<td></td>
<td>non-<abbr title="Internet Explorer">IE</abbr></td>
<td>Test whether `preventDefault` and `stopPropagation` methods are present on event object</td>
<td><a href="#" title="show test code" class="show-test-code">show</a></td>
</tr>
<tr style="display:none"><td colspan="5" class="test-code"><pre></pre></td></tr>
<tr>
<td>IS_EVENT_SRCELEMENT_PRESENT</td>
<td></td>
<td><abbr title="Internet Explorer">IE</abbr>, Opera, Chrome, Safari 2+</td>
<td>Test whether `srcElement` is present on event object</td>
<td><a href="#" title="show test code" class="show-test-code">show</a></td>
</tr>
<tr style="display:none"><td colspan="5" class="test-code"><pre></pre></td></tr>
<tr>
<td>ARGUMENTS_INSTANCEOF_ARRAY</td>
<td></td>
<td>Opera</td>
<td></td>
<td><a href="#" title="show test code" class="show-test-code">show</a></td>
</tr>
<tr style="display:none"><td colspan="5" class="test-code"><pre></pre></td></tr>
<tr>
<td>IS_NATIVE_HAS_ATTRIBUTE_PRESENT</td>
<td></td>
<td>-</td>
<td>
Check for
<strong>actual</strong>
presence of <a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElHasAttr">Element::hasAttribute</a>.
The test should return proper result even if method was defined/removed by 3rd party scripts
</td>
<td><a href="#" title="show test code" class="show-test-code">show</a></td>
</tr>
<tr style="display:none"><td colspan="5" class="test-code"><pre></pre></td></tr>
</tbody>
</table>
<h2>Bugs:</h2>
<table id="cft-data-bugs">
<thead>
<tr>
<th>Name</th>
<th>Value</th>
<th>Affected Browsers</th>
<th>Info</th>
<th>Test code</th>
</tr>
</thead>
<tbody>
<tr>
<td>GETELEMENTSBYTAGNAME_RETURNS_COMMENT_NODES</td>
<td></td>
<td>IE</td>
<td>Test whether <code>getElementsByTagName</code> returns comments nodes</td>
<td><a href="#" title="show test code" class="show-test-code">show</a></td>
</tr>
<tr style="display:none"><td colspan="5" class="test-code"><pre></pre></td></tr>
<tr>
<td>IS_REGEXP_WHITESPACE_CHARACTER_CLASS_BUGGY</td>
<td></td>
<td>IE, Safari</td>
<td>
Test whether /\s/ matches whitespace characters (\t,\v,\f, etc.)
(See <a href="http://bclary.com/2004/11/07/#a-15.10.2.12" title="ECMA-262 15.10.2.12">15.10.2.12</a>)
</td>
<td><a href="#" title="show test code" class="show-test-code">show</a></td>
</tr>
<tr style="display:none"><td colspan="5" class="test-code"><pre></pre></td></tr>
<tr>
<td>IS_STRING_PROTOTYPE_REPLACE_REGEXP_BUGGY</td>
<td></td>
<td>IE</td>
<td>
Test whether <code>String.prototype.split</code> works with regexp capturing groups properly
</td>
<td><a href="#" title="show test code" class="show-test-code">show</a></td>
</tr>
<tr style="display:none"><td colspan="5" class="test-code"><pre></pre></td></tr>
<tr>
<td>SETATTRIBUTE_IGNORES_NAME_ATTRIBUTE</td>
<td></td>
<td>IE &lt;=7</td>
<td>
`name` attribute can not be set at run time in IE, see
<a href="http://msdn.microsoft.com/en-us/library/ms536389.aspx" title="article on MSDN">article on MSDN</a>
</td>
<td><a href="#" title="show test code" class="show-test-code">show</a></td>
</tr>
<tr style="display:none"><td colspan="5" class="test-code"><pre></pre></td></tr>
<tr>
<td>ELEMENT_PROPERTIES_ARE_ATTRIBUTES</td>
<td></td>
<td>IE</td>
<td></td>
<td><a href="#" title="show test code" class="show-test-code">show</a></td>
</tr>
<tr style="display:none"><td colspan="5" class="test-code"><pre></pre></td></tr>
<tr>
<td>QUERY_SELECTOR_IGNORES_CAPITALIZED_VALUES</td>
<td></td>
<td></td>
<td><a href="https://bugs.webkit.org/show_bug.cgi?id=19047">WebKit bug #19047</a></td>
<td><a href="#" title="show test code" class="show-test-code">show</a></td>
</tr>
<tr style="display:none"><td colspan="5" class="test-code"><pre></pre></td></tr>
<tr>
<td>STRING_PROTOTYPE_REPLACE_IGNORES_FUNCTIONS</td>
<td></td>
<td>Safari &lt;=2.0.2</td>
<td>
<a href="https://bugs.webkit.org/show_bug.cgi?id=3294" title="WebKit bug #3294">WebKit bug #3294</a>
</td>
<td><a href="#" title="show test code" class="show-test-code">show</a></td>
</tr>
<tr style="display:none"><td colspan="5" class="test-code"><pre></pre></td></tr>
<tr>
<td>ARRAY_PROTOTYPE_CONCAT_ARGUMENTS_BUGGY</td>
<td></td>
<td>Opera &lt;9.5</td>
<td></td>
<td><a href="#" title="show test code" class="show-test-code">show</a></td>
</tr>
<tr style="display:none"><td colspan="5" class="test-code"><pre></pre></td></tr>
<tr>
<td>PROPERTIES_SHADOWING_DONTENUM_ARE_ENUMERABLE</td>
<td></td>
<td>IE&lt;=6</td>
<td></td>
<td><a href="#" title="show test code" class="show-test-code">show</a></td>
</tr>
<tr style="display:none"><td colspan="5" class="test-code"><pre></pre></td></tr>
<tr>
<td>PRE_ELEMENTS_IGNORE_NEWLINES</td>
<td></td>
<td>IE&lt;=7</td>
<td></td>
<td><a href="#" title="show test code" class="show-test-code">show</a></td>
</tr>
<tr style="display:none"><td colspan="5" class="test-code"><pre></pre></td></tr>
<tr>
<td>SELECT_ELEMENT_INNERHTML_BUGGY</td>
<td></td>
<td>IE</td>
<td><a href="http://support.microsoft.com/kb/276228">Bug description on MSDN</a></td>
<td><a href="#" title="show test code" class="show-test-code">show</a></td>
</tr>
<tr style="display:none"><td colspan="5" class="test-code"><pre></pre></td></tr>
<tr>
<td>TABLE_ELEMENT_INNERHTML_BUGGY</td>
<td></td>
<td>IE</td>
<td><a href="http://msdn.microsoft.com/en-us/library/ms533897(VS.85).aspx">`innerHTML` article on MSDN</td>
<td><a href="#" title="show test code" class="show-test-code">show</a></td>
</tr>
<tr style="display:none"><td colspan="5" class="test-code"><pre></pre></td></tr>
<tr>
<td>SCRIPT_ELEMENT_REJECTS_TEXTNODE_APPENDING</td>
<td></td>
<td>IE</td>
<td></td>
<td><a href="#" title="show test code" class="show-test-code">show</a></td>
</tr>
<tr style="display:none"><td colspan="5" class="test-code"><pre></pre></td></tr>
<tr>
<td>DOCUMENT_GETELEMENTBYID_CONFUSES_IDS_WITH_NAMES</td>
<td></td>
<td>IE &lt;=7, Opera &lt;9.5</td>
<td>`document.getElementById` returns elements with corresponding name attributes</td>
<td><a href="#" title="show test code" class="show-test-code">show</a></td>
</tr>
<tr style="display:none"><td colspan="5" class="test-code"><pre></pre></td></tr>
<tr>
<td>DOCUMENT_GETELEMENTBYID_IGNORES_CASE</td>
<td></td>
<td>IE &lt;=7</td>
<td></td>
<td><a href="#" title="show test code" class="show-test-code">show</a></td>
</tr>
<tr style="display:none"><td colspan="5" class="test-code"><pre></pre></td></tr>
</tbody>
</table>
<script src="master.js" type="text/javascript"></script>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try { var pageTracker = _gat._getTracker("UA-735042-3"); pageTracker._trackPageview(); } catch(err) {}
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.