The Can I use... test suite

This is a basic test suite of various web technologies for the When Can I Use website.

It is used to quickly test basic support for features in upcoming browsers, rather than any full support of the feature's specification.

Results on this page generally match the results as they appear on the When Can I Use site, but may not always due to a variety of circumstances (test may pass but support is actually buggy, not tested well enough, has alternative method, etc).

Four different types of tests are used:

Auto
Automated JS-based tests. (m) means Modernizr is used.
Visual
Requires visual confirmation/comparison to confirm
Visual-square
Test must create a 30x30px green (lime) square
Interactive
Requires interaction to confirm support

If you are interested in contributing tests, follow these instructions.

Tests
Feature Unprefixed tests Prefixed tests

Strict Transport Security

[Feat] [Tests]

Canvas (basic support)

[Feat] [Tests]

Auto(m)

Modernizr test for: "canvas"

Visual-square

Draw rect on canvas using fillStyle and fillRect

Text API for Canvas

[Feat] [Tests]

Auto(m)

Modernizr test for: "canvastext"

WebGL - 3D Canvas graphics

[Feat] [Tests]

Auto(m)

Modernizr test for: "webgl"

Visual-square

Canvas blend modes

[Feat] [Tests]

Visual-square

Draw cyan and yellow rects on canvas with globalCompositeOperation to result in lime rectangle

CSS position:fixed

[Feat] [Tests]

Auto

Interact

CSS font-stretch

[Feat] [Tests]

Auto

font-stretch: condensed; property stays

Visual

Expanded
Condensed

Show expanded & condensed text

CSS touch-action property

[Feat] [Tests]

Auto

touch-action: none; property stays

CSS font-size-adjust

[Feat] [Tests]

Auto

font-size-adjust: 1; property stays

Visual-square

x
Test for font-size-adjust: 3

CSS will-change property

[Feat] [Tests]

Auto

will-change: contents; property stays

CSS Masks

[Feat] [Tests]

Visual

mask-image: url(alpha.png);

CSS background-blend-mode

[Feat] [Tests]

Visual-square

div with background image, background color & background-blend-mode: multiply

CSS Grid Layout

[Feat] [Tests]

Visual-square

Grid with two columns, two rows and three elements taking up space.

Visual-square

Grid with two columns, two rows and three elements taking up space.

Blending of HTML/SVG elements

[Feat] [Tests]

Visual-square

Overlapping divs with mix-blend-mode: multiply

Scoped CSS

[Feat] [Tests]

Visual-square

If the scoped attribute is ignored, the box will get a red background.

CSS Table display

[Feat] [Tests]

Visual

topleft
topright
bottomleft
bottomright

Should be 2x2 table

CSS Counters

[Feat] [Tests]

Visual-square

Generated counter content should fill block with lime color.

CSS 2.1 selectors

[Feat] [Tests]

Visual-square

Test for child ( > )selector

Visual-square

Adjacent sibling selector test ( + )

Visual-square

Attribute selector ( [role="none"] )

CSS min/max-width/height

[Feat] [Tests]

Visual-square

Visual-square

Visual-square

Visual-square

CSS outline

[Feat] [Tests]

Visual-square

Element with 0 width/height and 30px lime outline.

Visual-square

Test for outline-color: invert

CSS inline-block

[Feat] [Tests]

Visual-square

CSS3 Background-image options

[Feat] [Tests]

Auto(m)

Modernizr test for: "backgroundsize"

Visual-square

background-clip: content-box;

Visual-square

background-origin: content-box;

Visual-square

background-size: 30px 30px;

Visual-square

background-size: cover;

CSS3 Border images

[Feat] [Tests]

Auto(m)

Modernizr test for: "borderimage"

Visual-square

Separate properties: border-image-source: url(green5x5.png); border-image-slice: 2;

Visual-square

Shorthand syntax: border-image: url(green5x5.png) 2;

CSS3 Border-radius (rounded corners)

[Feat] [Tests]

Auto(m)

Modernizr test for: "borderradius"

Visual-square

CSS3 Animation

[Feat] [Tests]

Auto(m)

Modernizr test for: "cssanimations"

Visual-square

animation: staylime 60s infinite; @keyframes staylime { from { background-color: lime; } to { background-color: lime; } }

CSS3 Box-shadow

[Feat] [Tests]

Auto(m)

Modernizr test for: "boxshadow"

Visual-square

Test for support for basic support

Visual-square

Test for support for radius value

Visual-square

Test for support for multiple shadows

Visual-square

Test for support for "inset" shadow

Visual-square

Test for support for multiple inset shadows with radius

CSS Gradients

[Feat] [Tests]

Auto(m)

Modernizr test for: "cssgradients"

Visual-square

linear-gradient(to right, lime, lime, red);

Visual-square

radial-gradient(lime, lime)

Visual-square

linear-gradient(lime, lime)

CSS3 image-orientation

[Feat] [Tests]

Auto

image-orientation: from-image; property stays

Visual-square

Test image-orientation: from-image

Visual-square

Test image-orientation: 180deg

Visual-square

Test image-orientation: 180deg on image with no exif setting

Visual-square

Test image-orientation: flip on image with no exif setting

CSS3 Opacity

[Feat] [Tests]

Auto(m)

Modernizr test for: "opacity"

Visual-square

Test for opacity: 0

CSS3 Text-shadow

[Feat] [Tests]

Auto(m)

Modernizr test for: "textshadow"

Visual

A
font-size: 25px; color: white; text-shadow: 25px 0 3px lime; position: relative; left: -25px;

Visual

A
Multiple shadow test

Visual-square

IIIII
Multiple shadows with radius value

CSS3 Transitions

[Feat] [Tests]

Auto(m)

Modernizr test for: "csstransitions"

Interact

Green square must (briefly) appear on hover

5 second transition from left to right using cubic-bezier(0, 1, 1, 0);

CSS3 Colors

[Feat] [Tests]

Auto(m)

Modernizr test for: "hsla"

Visual-square

Visual-square

Flexible Box Layout Module

[Feat] [Tests]

Auto(m)

Modernizr test for: "flexbox"

Visual-square

Test for display: box; (old syntax)

Visual-square

Test for display: flexbox; (2009 syntax)

Visual-square

Test for display: flex; (current syntax)

Font unicode-range subsetting

[Feat] [Tests]

Auto

unicode-range: U+0400-14FF; property stays

CSS3 Multiple backgrounds

[Feat] [Tests]

Auto(m)

Modernizr test for: "multiplebgs"

Visual-square

background-repeat: repeat-x; background-image: url(green5x5.png), url(green5x5.png), url(green5x5.png), url(green5x5.png), url(green5x5.png), url(green5x5.png); background-position: 0 0, 0 5px, 0 10px, 0 15px, 0 20px, 0 25px;

CSS3 Multiple column layout

[Feat] [Tests]

Auto(m)

Modernizr test for: "csscolumns"

Visual-square

column-width: 15px; column-gap: 0;

Visual-square

column-width: 30px; column-gap: 0; break-after: column;

CSS text-size-adjust

[Feat] [Tests]

Auto

text-size-adjust: none; property stays

CSS3 Transforms

[Feat] [Tests]

Auto(m)

Modernizr test for: "csstransforms"

Visual-square

transform: translate(30px);

CSS3 3D Transforms

[Feat] [Tests]

Auto(m)

Modernizr test for: "csstransforms3d"

Visual-square

Parent: perspective: 100px; perspective-origin: 0% 50%; Child: transform: rotateY(-15deg);

@font-face Web fonts

[Feat] [Tests]

Auto(m)

Modernizr test for: "fontface"

text-decoration styling

[Feat] [Tests]

Visual

Lime underline
text-decoration-color: lime

Visual

Dashed underline
text-decoration-style: dashed

Visual

Line-through
text-decoration-line: line-through

Visual

Line-through/dashed/lime
text-decoration-line: line-through dashed lime

CSS3 Text-overflow

[Feat] [Tests]

Visual

abcdefghijklmnopqrstuvwxyz

Should end with ellipsis

text-overflow: ellipsis;

CSS Generated content for pseudo-elements

[Feat] [Tests]

Visual

-
Element with CSS: #gencontent:before { content: 'A'; } #gencontent:after { content: 'Z'; }

Font feature settings

[Feat] [Tests]

Visual

LORE

Combine L&O and R&E (current syntax)

Current syntax: font-feature-settings: "dlig" 1;

Visual

LORE

Combine L&O and R&E (old syntax)

Old syntax: font-feature-settings: "dlig=1";

Visual-square

tu
If font-feature-settings:'ss06' 1; (or old syntax) works, the glyphs are replaced with larger ones.

calc() as CSS unit value

[Feat] [Tests]

Visual-square

width: calc(10px + 20px);

Visual-square

height: calc(60px - 100%); width: calc((100% / 2) + 15px - 0.5em); border-right: calc(0.5em) solid lime;

CSS background-position edge offsets

[Feat] [Tests]

Visual-square

Test for background-position:bottom 0px right 0px;

CSS clip-path property

[Feat] [Tests]

Visual-square

Test for clip-path: polygon()

Visual-square

Test for clip-path: url('svg-clippath.svg#clipPolygon')

Interact

Test for clip-path: url(#foo) with inline SVG (button needed due to Chrome/Safari bug)

CSS Feature Queries

[Feat] [Tests]

Visual-square

Test for @supports ( display: block )

CSS Filter Effects

[Feat] [Tests]

Visual-square

filter: invert(1);

Visual-square

filter: url(css-filter.svg#invert);

CSS Hyphenation

[Feat] [Tests]

Visual-square

hy­phen­ation
Test for hyphens: none

Visual-square

hyphenation
Test for hyphens: auto

Visual-square

hy­phen­ation
Test for hyphens: manual

CSS3 Media Queries

[Feat] [Tests]

Visual-square

CSS Regions

[Feat] [Tests]

Visual-square

Two elements: One with flow: "flowname"; and one with content: from-flow("flowname"); (Sept '11 WebKit nightlies)

Visual-square

Two elements: One content iframe with flow-into: flowname; and one div with flow-from: flowname; (IE10pp3)

Visual-square

Two elements: One with flow: "flowname"; and one with content: from-flow("flowname"); (Editor's Draft 30 September 2011)

CSS Shapes Level 1

[Feat] [Tests]

Visual-square

Test to make element float box take up no space using polygon(0px 0px, 0px 0px)

Interact

Adobe test suite

CSS Variables

[Feat] [Tests]

Visual-square

on parent: --success-color: lime on child: background-color: var(--success-color);

CSS3 Box-sizing

[Feat] [Tests]

Visual-square

Visual-square

Test for box-sizing: padding-box

CSS3 tab-size

[Feat] [Tests]

Visual-square

tab-size: 0;

Intrinsic & Extrinsic Sizing

[Feat] [Tests]

Visual-square

width: min-content

CSS3 object-fit/object-position

[Feat] [Tests]

Visual-square

object-fit: contain

Visual-square

object-position: 30px 30px;

rem (root em) units

[Feat] [Tests]

Visual-square

A
span with single character and font-size: 5rem;

Viewport units: vw, vh, vmin, vmax

[Feat] [Tests]

Visual-square

Test for width:100vmin; height:100vmin;

Visual-square

Test for width:100vh; height:100vh;

Visual-square

Test for width:100vw; height:100vw;

Visual-square

.
Test for font-size: 100vw;

Visual-square

.
Test for font-size: 100vh;

Visual-square

Test for width:100vmax; height:100vmax;

CSS3 word-break

[Feat] [Tests]

Visual-square

aaabbbcccdddeeefff
Test for word-break: break-all;

Visual-square

这是一些汉字
Test for word-break: keep-all;

CSS3 Overflow-wrap

[Feat] [Tests]

Visual-square

abcdefghijklmnop
word-wrap: break-word;

Visual-square

abcdefghijklmnop
overflow-wrap: break-word;

CSS resize property

[Feat] [Tests]

Interact

Must be able to resize element

resize: both

CSS3 selectors

[Feat] [Tests]

Interact

CSS3 Cursors (original values)

[Feat] [Tests]

Interact

CSS3 Cursors (new values)

[Feat] [Tests]

Interact

CSS Repeating Gradients

[Feat] [Tests]

Visual-square

background: repeating-linear-gradient(0deg, lime, lime 30px, red 30px, red 60px);

TTF/OTF - TrueType and OpenType font support

[Feat] [Tests]

Visual

Windsong font

TTF font test

Visual

Windsong font

OTF font test

classList (DOMTokenList )

[Feat] [Tests]

Auto

"classList" in document.body

Auto

"classList" in document.body

Visual-square

DOMContentLoaded

[Feat] [Tests]

Auto

Validates once DOMContentLoaded is triggered

getComputedStyle

[Feat] [Tests]

Auto

Test getComputedStyle to see if it correctly returns "display" property set on element.

Auto

Test getComputedStyle to see if it correctly returns "content" property set on element's :after pseudo-element.

Mutation Observer

[Feat] [Tests]

Auto

"MutationObserver" in window

Auto

Test if MutationObserver works

Promises

[Feat] [Tests]

Auto

Create a promise and resolve with parameter

querySelector/querySelectorAll

[Feat] [Tests]

Auto

Auto

querySelector test on selector '[data-foo=bar] + *'

Auto

querySelectorAll test on selector '[data-foo=bar] + *'

relList (DOMTokenList)

[Feat] [Tests]

Auto

"relList" in document.createElement("a")

Auto

"relList" in document.createElement("link")

HTML templates

[Feat] [Tests]

Auto

Test for 'content' when creating a template element

Touch events

[Feat] [Tests]

Auto(m)

Modernizr test for: "touch"

XMLHttpRequest 2

[Feat] [Tests]

Auto

Auto

Test for 'timeout' property

async attribute for external scripts

[Feat] [Tests]

Visual-square

Test to see if async script runs later.

defer attribute for external scripts

[Feat] [Tests]

Visual-square

Test to see if defer script runs later.

Pointer events

[Feat] [Tests]

Interact

Must turn lime on click or tap

Tests support for "pointerdown" event

Audio element

[Feat] [Tests]

Auto

document.createElement('audio').canPlayType

Interact

Audio element with 6 different sources (no MIME set)

Interact

Audio element with 6 different sources (with MIME set)

Custom Elements

[Feat] [Tests]

Auto

Test support for 'registerElement' in document

Auto

Test support for 'register' in document (old spec)

dataset & data-* attributes

[Feat] [Tests]

Auto

Test for 'dataset' in document.body and getting the correct value returned from a data-foo attribute.

Interact

Details & Summary elements

[Feat] [Tests]

Auto

Interact

(summary button)

(detail contents)

"(detail contents)" should be visible ONLY after clicking summary

Basic details element with summary and paragraph as children.

Dialog element

[Feat] [Tests]

Auto

Check for 'showModal' in document.createElement('dialog')

Interact

This is a dialog box

Should open dialog box

getElementsByClassName

[Feat] [Tests]

Auto

Visual-square

Test if two divs were correctly retrieved using getElementsByClassName

Session history management

[Feat] [Tests]

Auto(m)

Modernizr test for: "history"

Auto

Test if history.pushState was successful

New semantic elements

[Feat] [Tests]

Auto

Test if display value of main element is block

Visual-square

section, article, aside, hgroup, header, footer, nav tested for default "block" style.

sandbox attribute for iframes

[Feat] [Tests]

Auto

Test for "sandbox" property in iframe DOM object

Visual-square

Sandboxed iframe with page on other domain that would set its background to red if JS runs.

Visual-square

Sandboxed iframe allowing scripts with page on other domain that would set its background to lime if JS runs.

Visual-square

Sandboxed iframe allowing scripts (but not form submitting) with page on other domain that would set its background to red if a form WAS submitted.

Visual-square

Sandboxed iframe (no attribute value) with page on other domain that would set its background to red if a form WAS submitted.

seamless attribute for iframes

[Feat] [Tests]

Auto

Check for 'seamless' in document.createElement('iframe')

Visual-square

Owner page should style iframe[seamless] page body

Visual-square

Test if seamless iframe takes up the space of its content

HTML Imports

[Feat] [Tests]

Auto

Test support for 'import' in document.createElement('link')

Offline web applications

[Feat] [Tests]

Auto(m)

Modernizr test for: "applicationcache"

Ruby annotation

[Feat] [Tests]

Auto

display: ruby; property stays

Auto

display: ruby-base-container; property stays

Visual

(bottom1)(top1)(bottom2)(top2)

Elements should be stacked on top of each other

Shadow DOM

[Feat] [Tests]

Auto

Visual-square

Spellcheck attribute

[Feat] [Tests]

Auto

Check for 'spellcheck' in document.createElement('input')

Auto

Check for 'spellcheck' in document.createElement('textarea')

Interact

On:
Off:

Must have spellcheck only for first field

Srcset attribute

[Feat] [Tests]

Auto

Test for 'srcset' in document.createElement('img')

Video element

[Feat] [Tests]

Auto

Interact

Video with controls and all three formats available.

Interact

Video with controls and all three formats available (with MIME).

HTML5 form features

[Feat] [Tests]

Visual




date/time/range/number widgets

Picture element

[Feat] [Tests]

Visual-square

Picture element with one source with min-width:0em media query that should override the src of the img element

contenteditable attribute (basic support)

[Feat] [Tests]

Interact

This element should be editable.

Div element with attribute contenteditable="true"

Download attribute

[Feat] [Tests]

Interact

Clicking link must download pass.txt, not navigate

Link with download attribute pointing at a file.

Drag and Drop

[Feat] [Tests]

Interact

PNG favicons

[Feat] [Tests]

Interact

Toolbar/context menu

[Feat] [Tests]

Interact

Context menu of square must have a "TEST PASS" entry

Uses older spec's "menuitem" child elements

Interact

Context menu of square must have a "TEST PASS" entry

Uses current spec's "command" child elements

Multiple file selection

[Feat] [Tests]

Auto

Interact

Must allow selection of more than 1 files

input placeholder attribute

[Feat] [Tests]

Auto

"placeholder" in document.createElement('input')

Visual

Placeholder text must say "PASS"

Text input with placeholder value of "PASS"

Progress & Meter

[Feat] [Tests]

Visual

fail fail

Progress and meter widgets at 50%

Datalist element

[Feat] [Tests]

Interact

Show "foo" and "foobar" as options when "f" is entered

Form validation

[Feat] [Tests]

Interact

Form should show warning and NOT submit

Color input type

[Feat] [Tests]

Interact

Must provide widget to select color

Date and time input types

[Feat] [Tests]

Interact

Must provide widget to select date and time

Interact

Must provide widget to select date

Interact

Must provide widget to select time

Number input type

[Feat] [Tests]

Interact

Must provide number widget

Interact

Must provide number widget with increments of 2 and max value of 6.

Range input type

[Feat] [Tests]

Interact

Must provide slider widget

Interact

Slider widget

Uses -webkit-slider-thumb styling to make it visible/usable in Android browser

Ambient Light API

[Feat] [Tests]

Auto

Check for 'ondevicelight' in window

Auto

Check for 'onlightlevel' in window

Base64 encoding and decoding

[Feat] [Tests]

Auto

Test if window.btoa and window.atob work

Web Audio API

[Feat] [Tests]

Auto

Battery Status API

[Feat] [Tests]

Auto

Test if "battery" in navigator is an object

Clipboard API

[Feat] [Tests]

Auto

Try creating and verifying paste event with ClipboardEvent constructor

Auto

Check for "onpaste" in document

Interact

Pasting text should turn background lime

Test if document.onpaste is triggered and has clipboardData

Interact

Pasting text should turn background lime (IE)

Test if window.onpaste is triggered and window.clipboardData has data (IE proprietary)

Cross-Origin Resource Sharing

[Feat] [Tests]

Auto

Instant XHR request on page that should permit it.

Web Cryptography

[Feat] [Tests]

Auto

Test if crypto.subtle.generateKey is function

CSS.supports() DOM API

[Feat] [Tests]

Auto

Test for CSS.supports("font-weight", "bold");

DeviceOrientation events

[Feat] [Tests]

Auto

Check for DeviceOrientationEvent in window

Auto

Must change to lime when device orientation changes.

Add 'deviceorientation' event listener to window.

Auto

Check for 'oncompassneedscalibration' in window

Auto

Check for DeviceMotionEvent in window

Server-sent events

[Feat] [Tests]

Auto

File API

[Feat] [Tests]

Auto

Auto

"Blob" in window

Auto

"File" in window

Interact

CSS Font Loading

[Feat] [Tests]

Auto

Test if window.FontFace is a function

Full Screen API

[Feat] [Tests]

Auto

Check for requestFullScreen in document.body (supports old draft)

Auto

Check for requestFullscreen in document.body (supports current draft)

Interact

Clicking button should send request to go into full screen mode

Test requestFullscreen

Gamepad API

[Feat] [Tests]

Auto

Test for 'Gamepad' in window

Geolocation

[Feat] [Tests]

Auto(m)

Modernizr test for: "geolocation"

Auto

Test for getCurrentPosition, watchPosition and clearWatch in navigator.geolocation

Interact

Must provide LAT and LON info (may need to give permission first)

Test for navigator.geolocation.getCurrentPosition on which position.coords.latitude and position.coords.longitude are expected.

crypto.getRandomValues()

[Feat] [Tests]

Auto

Test for window.crypto.getRandomValues()

Hashchange event

[Feat] [Tests]

Auto(m)

Modernizr test for: "hashchange"

Visual-square

iframe with addEventListener('hashchange', function() { document.body.style.background = 'lime'; }, false);

High Resolution Time API

[Feat] [Tests]

Auto

test if performance.now() returns a number

IndexedDB

[Feat] [Tests]

Auto(m)

Modernizr test for: "indexeddb"

Auto

Test for "indexedDB" in window

JSON parsing

[Feat] [Tests]

Auto

Auto

Create a JS object, convert to JSON string, convert back to object and compare.

matches() DOM method

[Feat] [Tests]

Auto

Test for "matchesSelector" in document.body

Auto

Test for "matches" in document.body

matchMedia

[Feat] [Tests]

Auto

Check for matchMedia in window

Web Storage - name/value pairs

[Feat] [Tests]

Auto(m)

Modernizr test for: "localstorage"

Auto

Test if getItem, setItem and removeItem work.

Navigation Timing API

[Feat] [Tests]

Auto

Test for performance in window

Auto

Test for "timing" in window.performance

Auto

Test for all properties in performance.timing

Web Notifications

[Feat] [Tests]

Auto

Test for "notifications" in window (older spec)

Auto

Try creating "Notification", check for "show" function in notification instance.

Auto

Test for 'Notification' in window

Interact

Must show a notification

Create notification using: new Notification("Notifications supported!", { tag: 'mytag'});

Page Visibility

[Feat] [Tests]

Auto

typeof document.hidden == "boolean"

Auto

typeof document.visibilityState == "string"

Proximity API

[Feat] [Tests]

Auto

Check for 'ondeviceproximity' in window

Auto

Check for 'onuserproximity' in window

requestAnimationFrame

[Feat] [Tests]

Auto

Test the requestAnimationFrame callback

Auto

Check for requestAnimationFrame in window

Resource Timing

[Feat] [Tests]

Auto

Test if window.performance.getEntriesByName is a function

WebRTC Peer-to-peer connections

[Feat] [Tests]

Auto

Test for "RTCPeerConnection" in window object

Screen Orientation

[Feat] [Tests]

Auto

Test if window.screen.orientation is a string

getUserMedia/Stream API

[Feat] [Tests]

Auto

Test for "getUserMedia" in navigator object

Typed Arrays

[Feat] [Tests]

Auto

Check for Int8Array in window

Auto

Check for Uint8Array in window

Auto

Check for Uint8ClampedArray in window

Auto

Check for Int16Array in window

Auto

Check for Uint16Array in window

Auto

Check for Int32Array in window

Auto

Check for Uint32Array in window

Auto

Check for Float32Array in window

Auto

Check for Float64Array in window

User Timing API

[Feat] [Tests]

Auto

Test performance.mark and performance.getEntriesByType('mark')

Auto

Test performance.measure and performance.getEntriesByType('measure')

Vibration API

[Feat] [Tests]

Auto

Test if "vibrate" in navigator is a function

Web Animations API

[Feat] [Tests]

Auto

Should animate from red to lime

Web Sockets

[Feat] [Tests]

Auto(m)

Modernizr test for: "websockets"

Web Workers

[Feat] [Tests]

Auto(m)

Modernizr test for: "webworkers"

Auto

Create a new Worker using new Worker('worker.js'); Then, test postMessage and onmessage event.

Cross-document messaging

[Feat] [Tests]

Auto(m)

Modernizr test for: "postmessage"

Blob constructing

[Feat] [Tests]

Auto

"BlobBuilder" in window

Auto

Blob URLs

[Feat] [Tests]

Auto

Select a file to test support
Test for window.URL.createObjectURL by selecting file.

FileReader API

[Feat] [Tests]

Auto

Check for FileReader in window

Shared Web Workers

[Feat] [Tests]

Auto

Create a new SharedWorker using new SharedWorker('sharedworker.js'); Then, test worker.port.onmessage event.

Channel messaging

[Feat] [Tests]

Auto

"MessageChannel" in window

Auto

"MessagePort" in window

ECMAScript 5 Strict Mode

[Feat] [Tests]

Auto

Test for error thrown using "use strict" and var a = {a:1,a:1};

Interact

External test suite

XHTML served as application/xhtml+xml

[Feat] [Tests]

Auto

MathML

[Feat] [Tests]

Visual

Content Security Policy 1.0

[Feat] [Tests]

Visual-square

iframe with file that will have lime background if external file is supported, but red again if the (CSP-blocked) inline script is supported. Prefixes are converted to known CSP header prefixes with support.

Data URIs

[Feat] [Tests]

Visual-square

div with data URL as background image

JPEG XR image format

[Feat] [Tests]

Visual-square

30x30 lime jpegxr image

Visual-square

30x30 lime lossless jpegxr image

WebP image format

[Feat] [Tests]

Visual-square

5x5 lime webp image sized at 30x30

WAI-ARIA Accessibility features

[Feat] [Tests]

Interact

Opus

[Feat] [Tests]

Interact

Audio element with opus file

WOFF - Web Open Font Format

[Feat] [Tests]

Visual

Windsong font

WOFF 2.0 - A better web font compression format

[Feat] [Tests]

Visual

Windsong font

MPEG-4/H.264 video format

[Feat] [Tests]

Auto

Interact

Video with source element and MIME set

Interact

Video with source element

Interact

Video, no MIME, no type attribute.

Ogg/Theora video format

[Feat] [Tests]

Auto

Interact

Video with source element and MIME set

Interact

Video with source element

Interact

Video, no MIME, no type attribute.

WebM video format

[Feat] [Tests]

Auto

Interact

Video with source element and MIME set

Interact

Video with source element

Interact

Video, no MIME, no type attribute.

PNG alpha transparency

[Feat] [Tests]

Visual

SVG (basic support)

[Feat] [Tests]

Auto(m)

Modernizr test for: "svg"

Visual-square

SVG fail
SVG in <object>

SVG effects for HTML

[Feat] [Tests]

Auto

Visual

SVG fail

Text must appear blurry

SVG with feGaussianBlur filter on foreignObject

Inline SVG in HTML5

[Feat] [Tests]

Auto(m)

Modernizr test for: "inlinesvg"

Visual-square

SVG SMIL animation

[Feat] [Tests]

Auto(m)

Modernizr test for: "smil"

Visual-square

SVG fail
SVG with animate element inside a rect

Visual-square

Inline SVG with animate element inside a rect

SVG in CSS backgrounds

[Feat] [Tests]

Visual

Must not look pixelated/blurry

SVG CSS background image at 250%

Visual-square

Visual-square

Tiled 5x5 SVG image as background

Visual-square

Tiled 5x5 SVG image as background with background-position

SVG filters

[Feat] [Tests]

Visual

object SVG not supported

Visual-square

SVG fail

Must be green (not lime)

SVG with <feColorMatrix type="hueRotate" values="120"/>

Visual-square

SVG fail
SVG with <feFlood flood-color="lime"/>

SVG fragment identifiers

[Feat] [Tests]

Visual-square

SVG image as background pointing at small lime square: svg-icons.svg#lime-view

Visual-square

SVG image as background pointing at small lime square with file: svg-icons.svg#svgView(viewBox(100,200,5,5))

Visual-square

SVG image in img element pointing at small lime square with file: svg-icons.svg#svgView(viewBox(100,200,5,5))

Visual-square

SVG image as background pointing at small lime square (id on rect element, no view element): svg-icons-noview.svg#lime-view

SVG in HTML img element

[Feat] [Tests]

Visual-square

SVG favicons

[Feat] [Tests]

Interact

SVG fonts

[Feat] [Tests]

Visual

Windsong font

CSS Appearance [unoff]

[Feat] [Tests]

Auto

appearance: none; property stays

CSS Canvas Drawings [unoff]

[Feat] [Tests]

Auto

'getCSSCanvasContext' in document

CSS Reflections [unoff]

[Feat] [Tests]

Auto(m)

Modernizr test for: "cssreflections"

Visual-square

box-reflect: below 0;

CSS position:sticky [unoff]

[Feat] [Tests]

Auto

position: sticky; property stays

Improved kerning pairs & ligatures [unoff]

[Feat] [Tests]

Auto

Test if text-rendering: optimizeLegibility will result in smaller width on text 'AVAVAVAVAVAVAVAV'

CSS user-select: none [unoff]

[Feat] [Tests]

Auto

user-select: none; property "sticks"

Interact

This text should be unselectable by the user.

user-select: none;

:placeholder-shown CSS pseudo-class [unoff]

[Feat] [Tests]

Visual

Placeholder should be lime

::placeholder { color: lime; background-color: lime; opacity: 1 } (double colon)

Visual

Placeholder should be lime

:placeholder { color: lime; background-color: lime; opacity: 1 } (single colon)

Visual

Placeholder should be lime

::input-placeholder { color: lime; background-color: lime; opacity: 1 } (double colon)

Visual

Placeholder should be lime

:input-placeholder { color: lime; background-color: lime; opacity: 1 } (single colon)

Visual

Placeholder should be lime

:placeholder-shown { color: lime; background-color: lime; opacity: 1 } (single colon)

CSS text-stroke [unoff]

[Feat] [Tests]

Visual

green stroked text
text-stroke: 2px lime;

::selection CSS pseudo-element [unoff]

[Feat] [Tests]

Interact

This should be lime when selected

::selection { color: lime; background-color: lime }

CSS pointer-events (for HTML) [unoff]

[Feat] [Tests]

Auto

Filesystem & FileWriter API [unoff]

[Feat] [Tests]

Auto

Check for requestFileSystem in window

Web SQL Database [unoff]

[Feat] [Tests]

Auto(m)

Modernizr test for: "websqldatabase"

Web Speech API [unoff]

[Feat] [Tests]

Auto

Test if "SpeechRecognition" in window is a function

Auto

Test if "speechSynthesis" in window is an object

Interact

Clicking button should make browser speak

Speak using: var speak = new SpeechSynthesisUtterance('hello'); speak.lang = 'en-GB'; window.speechSynthesis.speak(spk);

Speech Synthesis API [unoff]

[Feat] [Tests]

Auto

Test if "speechSynthesis" in window is an object

Interact

Clicking button should make browser speak

Speak using: var speak = new SpeechSynthesisUtterance('hello'); speak.lang = 'en-GB'; window.speechSynthesis.speak(spk);

SPDY networking protocol [unoff]

[Feat] [Tests]

EOT - Embedded OpenType fonts [unoff]

[Feat] [Tests]

Visual

Windsong font

WebVTT - Web Video Text Tracks [unoff]

[Feat] [Tests]

Interact

Must say "WebVTT Success!" if supported

Video with controls and WebVTT file

XHTML+SMIL animation [unoff]

[Feat] [Tests]

Auto

Animated PNG (APNG) [unoff]

[Feat] [Tests]

Auto

Test for second frame using Canvas element

Visual

Must animate

Most tests by Alexis Deveria, additional contributions by Paul Irish

User agent: CCBot/2.0 (http://commoncrawl.org/faq/)