html5test
Github
https://github.com/NielsLeenheer/html5test
主程序是 scripts/7/engine.js
目前看到的分类大部分是基于判断该对象是否存在来判断的.
比如响应式图片支持, 多媒体输入的支持, Drag Drop交互, ContentEditable, HTML5的新Histroy对象, 安全对象 crypto, Geolocation定位支持, HTML5的通信, 包括Beacon, SSE.Promise,全屏, JSON, 通知.
也有一些不是根据这样的原理.
比如是否支持
对于SVG Math标签 根据namespaceURI判断
总体上分为下面几类测试
语义类:
parsing解析文档方式: 是否支持 <!DOCTYPE html>触发标准模式, 这个是根据文档对象的compatMode的值来判断的.
测试是否支持html5的元素 testElements testForm(html5表单元素)
MIcrodata
离线存储
testOffline 测试appcache
testStorage 测试localStorage sessionStorage
testFiles 测试fileReader dataURL objectURL
设备访问
testGeolocation 定位支持
testOutput 全屏支持 通知
testInput 用户摄像头 麦克风等作为信息输入 getUserMedia(已弃用)
通讯
testCommunication 测试Beacon SSE fetch
testWebRTC RTC(网页即时通讯 音频 视频等)
多媒体
audio video
3D& 特效
testResponsive 响应式图片
testCanvas testWebGL
testAnimation 元素原生animate函数支持
交互
testInteraction 拖拽支持
testSecurity crypto 和 csp策略支持
其他
testOther onerror base64 encoding的支持
html5test原理
<!DOCTYPE html> triggers standards mode
document.compatMode == 'CSS1Compat' 为true即可
document.compatMode 有两个值 BackCompat和CSS1Compat
BackCompat Standards-compliant mode is not switched on. (Quirks Mode) 标准兼容模式关闭
CSS1Compat Standards-compliant mode is switched on. (Standards Mode) 标准兼容模式开启
判断SVG Math的支持
大部分的元素的namespaceURI 都是http://www.w3.org/1999/xhtml
SVG
element.namespaceURI == 'http://www.w3.org/2000/svg'
Math
element.namespaceURI == 'http://www.w3.org/1998/Math/MathML'
响应式图片支持
这是一个新的标签Picture
<picture>
<source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
<img src="mdn-logo-narrow.png" alt="MDN">
</picture>
<img class="image" src="mm-width-128px.jpg"
srcset="mm-width-128px.jpg 128w, mm-width-256px.jpg 256w, mm-width-512px.jpg 512w"
sizes="(max-width: 360px) 340px, 128px">关于sizes
sizes="100px"表示这个图片将以100px的宽度显示sizes="(min-width: 33em) 33em, 100vw"
视口宽超过 33em 吗？那这张图将会是 33em 宽。否则它会是 100vw 宽。
Window中应该有HTMLPictureElement()方法 支持srcset sizes属性
'HTMLPictureElement' in window
'srcset' in document.createElement('img')
'sizes' in document.createElement('img')Canvas支持
(canvas.getContext && typeof CanvasRenderingContext2D != 'undefined' && canvas.getContext('2d') instanceof CanvasRenderingContext2D)canvas text支持 canvas.getContext('2d').fillText == 'function'
canvas 碰撞检测canvas.getContext('2d').addHitRegion != 'undefined'
canvas输出图片支持 canvas.toDataURL('image/jpeg').substring(5,15) == 'image/jpeg'
更多请见 html5test的engine.js函数中testCanvas函数
video audio webRTC参见testVideo testAudio testWebRTC
多媒体输入支持
浏览器是否支持摄像头 麦克风等设备
return navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
更多见testInput
元素
data-xxx属性
var element = document.createElement('div');
element.setAttribute('data-test', 'test');
return 'dataset' in elementelement.dataset为 {test: "test"} 是一个 DOMStringMap 对象
是否支持新元素
element instanceof HTMLElement && !(element instanceof HTMLUnknownElement) && this.isBlock(element) && this.closesImplicitly(eletag)isBlock是判断元素的display是否是block
元素样式判断
根据document.defaultView.getComputedStyle(element)返回的对象
如一个div元素经过此函数返回的对象s s.display == 'block' 应为true
this.closesImplicitly是这么一个函数
function (name) {
var foo = document.createElement('div');
foo.innerHTML = '<p><' + name + '></' + name + '>';
return foo.childNodes.length == 2;
}新Form标签
var element = this.createInput('email');
var validation = false;
if ('validity' in element.field) {
validation = true;
element.field.value = "foo";
validation &= !element.field.validity.valid
element.field.value = "foo@bar.org";
validation &= element.field.validity.valid
}submit类型的input标签( 也就是创建input的时候不指定任何type )的
formAction formEnctype formMethod formNoValidate formTarget 属性检测
(HTML5允许一个表单有两个提交按钮 该以上属将会覆盖form中的属性)
element = document.createElement('input');
return 'formAction' in element;更多在engine中的testForm函数中
与元素的交互
Drag And Drop
var element = document.createElement('div');
return 'draggable' in element;更多在testInteraction 中
ContentEditable return 'contentEditable' in element
对应事件 return 'execCommand' in document
更多在 /* Content editable */ L2780
History
return window.histroy && histroy.pushState
html5协议支持
你现在可以使用 navigator.registerProtocolHandler() 方法把 web 应用程序注册成一个协议处理程序。return indow.navigator.registerProtocolHandler
更多在 testOffline 中
安全
window.crypto支持
全局相关的加密对象 该对象允许网页访问某些加密相关的服务。
var crypto = window.crypto || window.webkitCrypto || window.mozCrypto || window.msCrypto || window.oCrypto;
return crypto && 'subtle' in crypto ;CSP支持(内容安全策略 Content Security Policy)
内容安全策略（Content Security Policy，简称CSP）是一种以可信白名单作机制，来限制网站中是否可以包含某来源内容。
- 默认配置下不允许执行内联代码
<script>块内容，内联事件，内联样式 - 禁止执行eval() , newFunction() , setTimeout([string], …) 和setInterval([string], …)
return (!(function() { try { return eval('true'); } catch (e) {} return false; })()) && 'SecurityPolicyViolationEvent' in windowiframe的sandbox支持
Sandbox
在html5页面中，可以使用iframe的sandbox属性，比如：<iframe src="http://alibaba.com" sandbox>
sandbox后面如果不加任何值，就代表采用默认的安全策略，即：iframe的页面将会被当做一个独自的源，同时不能提交表单，以及执行javascript脚本，也不能让包含iframe的父页面导航到其他地方
return 'sandbox' in document.createElement('iframe')更多参考 testSecurity
Geographic定位支持
return !!navigator.geolocation更多在testGeolocation
WebGL
canvas的context除了常见的 '2d' 还有 web-gl 这个就是绘制3d图形的
var contexts = ['webgl', 'ms-webgl', 'experimental-webgl', 'moz-webgl']
//...
if ( element.getContext(contexts[i] ){
pass = true;
}HTML5 通信
Beacon支持
The navigator.sendBeacon() method can be used to asynchronously transfer small HTTP data from the User Agent to a web server.
Beacon用在哪里
如某些统计系统，在页面unload时，如果要上报当前数据，采用xhr的同步上报方式，会阻塞当前页面的跳转；使用new Image有可能遇到aborted，导致无法成功发送。
现在好了，可以使用浏览器来提供发送保障的更简洁的sendBeacon方法。sendBeacon是异步的，不会影响当前页到下一个页面的跳转速度，且不受同域限制。
'sendBeacon' in navigatorEventSource支持
这个是用于初始化一个SSE对象的
一个最简单的SSE例子
var source=new EventSource("demo_sse.php");
source.onmessage=function(event)
{
document.getElementById("result").innerHTML+=event.data + "<br />";
};判断 'EventSource' in window
Promise支持
'Promise' in window && typeof window.fetch === 'function' && window.fetch('') instanceof Promise好好的Promise判断 为什么这里还要判断fetch呢
fetch是啥 它是用来取代ajax的 更多点这里
使用fetch会返回Promise对象 所以加上fetch的判断才是更加完整的Promise支持
更完整一点的Promise
if ('Promise' in window &&
'resolve' in window.Promise &&
'reject' in window.Promise &&
'all' in window.Promise &&
'race' in window.Promise &&
(function() {
var resolve;
new window.Promise(function(r) { resolve = r; });
return typeof resolve === 'function';
}()))
{
passed = YES;
}
WebSocket支持
return 'WebSocket' in window || 'MozWebSocket' in windowWebSocket对二进制的支持
new WebSocket('wss://.').binaryType)
//OR
new WebSocket('ws://.').binaryType)Streams 流 (视频流)'ReadableStream' in window'WriteableStream' in window
文件支持
'FileReader' in window
dataURL支持
'FileReader' in window && 'readAsDataURL' in (new FileReader()) 更多见testFiles()
存储
sessionStorage localStorage
'sessionStorage' in window && window.sessionStorage != null
'localStorage' in window && window.localStorage != nullindexedDB的判断大约在 L3485
但是我没看明白 if (indexedDB && ! 'deleteDatabase' in indexedDB) passed != BUGGY; 有啥意义
更多在testStorage()
其它
全屏支持
return document.documentElement.requestFullscreen document.documentElement.webkitRequestFullScreen || document.documentElement.mozRequestFullScreen || document.documentElement.msRequestFullscreen;通知
return 'Notification' in window || 'webkitNotifications' in window || 'mozNotification' in window.navigator || 'oNotification' in window || 'msNotification' in window
JSON支持 应该都支持JSON吧'JSON' in window && 'parse' in JSON
base64支持
我们知道使用base64加密字符串 是使用btoa()函数 解码则是 atob()'btoa' in window && 'atob' in window
mutationObserver
它可以监测DOM的变化, 用于取代DOM3 中的 Mutation Events
入门例子
return 'MutationObserver' in window || 'WebKitMutationObserver' in window || 'MozMutationObserver' in window || 'oMutationObserver' in window || 'msMutationObserver' in windowonerror 支持
是一种类似于try catch的东东 chrome不支持