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">
<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')
'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.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;

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 element
            var element = document.createElement('div');
            element.setAttribute('data-test', 'test');
            return 'dataset' in element

element.dataset为 {test: "test"} 是一个 DOMStringMap 对象

是否支持新元素

element instanceof HTMLElement && !(element instanceof HTMLUnknownElement) && this.isBlock(element) && this.closesImplicitly(eletag)
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
            }
            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 ;
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 window

iframe的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;
}
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 navigator

EventSource支持
这个是用于初始化一个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 window

WebSocket对二进制的支持

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 != null

indexedDB的判断大约在 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 window

onerror 支持
是一种类似于try catch的东东 chrome不支持