WCIU test page

## The When can I use... test suite... (originally from tests.caniuse.com)

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 you can contact me at: when (at) caniuse (dotcom).

Select browser to compare results with:
Select CSS prefix to use (does not affect modernizr or non-CSS tests):

Tests
Feature | chr13 | Tests
--- | --- | ---
### Toolbar/context menu [Table] [Single feat] |  |
### Audio element [Table] [Single feat] |  | ### Auto document.createElement('audio').canPlayType ### Interact Audio fail Audio element with 6 different sources (with MIME set) ### Interact --> Audio fail Audio element with 6 different sources (no MIME set)
### CSS3 Background-image options [Table] [Single feat] |  | ### Auto (m) Modernizr test for: "backgroundsize" ### Visual-square background-clip: content-box; ### Visual-square background-origin: content-box; ### Visual-square background-size: 30px 30px;
### CSS3 Border images [Table] [Single feat] | -pre- | ### Auto (m) Modernizr test for: "borderimage" ### Visual-square Separate properties: border-image-source: url(caniuse_files/green5x5.png); border-image-slice: 2; ### Visual-square Shorthand syntax: border-image: url(caniuse_files/green5x5.png) 2;
### CSS3 Border-radius (rounded corners) [Table] [Single feat] |  | ### Auto (m) Modernizr test for: "borderradius" ### Visual-square
### Canvas (basic support) [Table] [Single feat] |  | ### Auto (m) Modernizr test for: "canvas" ### Visual-square Draw rect on canvas using fillStyle and fillRect
### classList (DOMTokenList ) [Table] [Single feat] |  | ### Auto "classList" in document.body ### Visual-square
### Cross-Origin Resource Sharing [Table] [Single feat] |  | ### Auto Instant XHR request on page that should permit it.
### CSS3 Animation [Table] [Single feat] | -pre- | ### 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 [Table] [Single feat] |  | ### Auto (m) Modernizr test for: "boxshadow" ### Visual-square Must be greenish, may not be entirely lime depending on the implementation.
### CSS position:fixed [Table] [Single feat] |  | ### Interact Test here
### CSS Gradients [Table] [Single feat] | -pre- | ### Auto (m) Modernizr test for: "cssgradients" ### Visual-square linear-gradient(lime, lime); ### Visual-square radial-gradient(lime, lime)
### CSS3 Opacity [Table] [Single feat] |  | ### Auto (m) Modernizr test for: "opacity" ### Visual-square Test for opacity: 0
### CSS3 Text-shadow [Table] [Single feat] |  | ### 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
### CSS3 Transitions [Table] [Single feat] | -pre- | ### 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 [Table] [Single feat] |  | ### Auto (m) Modernizr test for: "hsla" ### Visual-square ### Visual-square
### dataset & data-* attributes [Table] [Single feat] |  | ### Auto Test for 'dataset' in document.body and getting the correct value returned from a data-foo attribute. ### Interact Test here
### Details & Summary elements [Table] [Single feat] |  | ### Auto ### Interact (summary button) (detail contents) "(detail contents)" should be visible ONLY after clicking summary Basic details element with summary and paragraph as children.
### Server-sent DOM events [Table] [Single feat] |  | ### Auto
### File API [Table] [Single feat] |  | ### Auto
### Flexible Box Layout Module [Table] [Single feat] | -pre- | ### Auto (m) Modernizr test for: "flexbox"
### @font-face Web fonts [Table] [Single feat] |  | ### Auto (m) Modernizr test for: "fontface"
### Geolocation [Table] [Single feat] |  | ### 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.
### getElementsByClassName [Table] [Single feat] |  | ### Auto ### Visual-square Test if two divs were correctly retrieved using getElementsByClassName
### Hashchange event [Table] [Single feat] |  | ### Auto (m) Modernizr test for: "hashchange" ### Visual-square iframe with addEventListener('hashchange', function() { document.body.style.background = 'lime'; }, false);
### Session history management [Table] [Single feat] |  | ### Auto (m) Modernizr test for: "history" ### Auto Test if history.pushState was successful
### IndexedDB [Table] [Single feat] |  | ### Auto (m) Modernizr test for: "indexeddb"
### JSON parsing [Table] [Single feat] |  | ### Auto ### Auto Create a JS object, convert to JSON string, convert back to object and compare.
### CSS3 Multiple backgrounds [Table] [Single feat] |  | ### Auto (m) Modernizr test for: "multiplebgs" ### Visual-square background-repeat: repeat-x; background-image: url(caniuse_files/green5x5.png), url(caniuse_files/green5x5.png), url(caniuse_files/green5x5.png), url(caniuse_files/green5x5.png), url(caniuse_files/green5x5.png), url(caniuse_files/green5x5.png); background-position: 0 0, 0 5px, 0 10px, 0 15px, 0 20px, 0 25px;
### CSS3 Multiple column layout [Table] [Single feat] | -pre- | ### Auto (m) Modernizr test for: "csscolumns" ### Visual-square column-width: 15px; column-gap: 0;
### Web Storage - name/value pairs [Table] [Single feat] |  | ### Auto (m) Modernizr test for: "localstorage" ### Auto Test if getItem, setItem and removeItem work.
### Web Notifications [Table] [Single feat] |  | ### Auto
### Offline web applications [Table] [Single feat] |  | ### Auto (m) Modernizr test for: "applicationcache"
### querySelector/querySelectorAll [Table] [Single feat] |  | ### Auto ### Auto querySelector test on selector '[data-foo=bar] + *' ### Auto querySelectorAll test on selector '[data-foo=bar] + *'
### SVG (basic support) [Table] [Single feat] |  | ### Auto (m) Modernizr test for: "svg" ### Visual-square SVG in <object>
### SVG effects for HTML [Table] [Single feat] |  | ### Visual Text must appear blurry SVG with feGaussianBlur filter on foreignObject
### Inline SVG in HTML5 [Table] [Single feat] |  | ### Auto (m) Modernizr test for: "inlinesvg" ### Visual-square
### SVG SMIL animation [Table] [Single feat] |  | ### Auto (m) Modernizr test for: "smil" ### Visual-square SVG with animate element inside a rect
### Touch events [Table] [Single feat] |  | ### Auto (m) Modernizr test for: "touch"
### CSS3 Transforms [Table] [Single feat] | -pre- | ### Auto (m) Modernizr test for: "csstransforms" ### Visual-square transform: translate(30px);
### CSS3 3D Transforms [Table] [Single feat] |  | ### Auto (m) Modernizr test for: "csstransforms3d" ### Visual-square Parent: perspective: 600; perspective-origin: 0 200px; Child: transform: translate3d(-234px, 0, 0) rotate3d(0, 1, 0, -70deg);
### Video element [Table] [Single feat] |  | ### Auto ### Interact Video with controls and all three formats available. ### Interact Video with controls and all three formats available (with MIME).
### Web Sockets [Table] [Single feat] |  | ### Auto (m) Modernizr test for: "websockets"
### Web Workers [Table] [Single feat] |  | ### 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 [Table] [Single feat] |  | ### Auto (m) Modernizr test for: "postmessage"
### XMLHttpRequest 2 [Table] [Single feat] |  | ### Auto
### XHTML served as application/xhtml+xml [Table] [Single feat] |  | ### Auto
### CSS Generated content [Table] [Single feat] |  | ### Visual - Element with CSS: #gencontent:before { content: 'A'; } #gencontent:after { content: 'Z'; }
### CSS Table display [Table] [Single feat] |  | ### Visual topleft topright bottomleft bottomright Should be 2x2 table
### HTML5 form features [Table] [Single feat] |  | ### Visual date/time/range/number widgets
### MathML [Table] [Single feat] |  | ### Visual
### PNG alpha transparency [Table] [Single feat] |  | ### Visual
### Ruby annotation [Table] [Single feat] |  | ### Visual (bottom1)(top1)(bottom2)(top2) Elements should be stacked on top of each other
### SVG filters [Table] [Single feat] |  | ### Visual ### Visual-square Must be green (not lime) SVG with <feColorMatrix type="hueRotate" values="120"/> ### Visual-square SVG with <feFlood flood-color="lime"/>
### CSS3 Word-wrap [Table] [Single feat] |  | ### Visual abcdefghijklmnopqrstuvwxyz Text should wrap ### Visual abcdefghijklmnopqrstuvwxyz Text should overflow box ### Visual-square abcdefghijklmnop word-wrap: break-word;
### calc() as CSS unit value [Table] [Single feat] |  | ### 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 Grid Layout [Table] [Single feat] |  | ### Visual-square Grid with two columns, two rows and three elements taking up space.
### CSS3 Media Queries [Table] [Single feat] |  | ### Visual-square
### CSS 2.1 selectors [Table] [Single feat] |  | ### Visual-square Test for child ( > )selector ### Visual-square Adjacent sibling selector test ( + ) ### Visual-square Attribute selector ( [role="none"] )
### CSS3 Box-sizing [Table] [Single feat] |  | ### Visual-square
### Data URLs [Table] [Single feat] |  | ### Visual-square div with data URL as background image
### New semantic elements [Table] [Single feat] |  | ### Visual-square section, article, aside, hgroup, header, footer, nav tested for default "block" style.
### CSS inline-block [Table] [Single feat] |  | ### Visual-square
### CSS min/max-width/height [Table] [Single feat] |  | ### Visual-square ### Visual-square ### Visual-square ### Visual-square
### CSS3 object-fit/object-position [Table] [Single feat] |  | ### Visual-square object-fit: contain ### Visual-square object-position: 30px 30px;
### rem (root em) units [Table] [Single feat] |  | ### Visual-square A span with single character and font-size: 5rem;
### SVG in CSS backgrounds [Table] [Single feat] |  | ### Visual-square
### SVG in HTML img element [Table] [Single feat] |  | ### Visual-square
### contenteditable attribute (basic support) [Table] [Single feat] |  | ### Interact This element should be editable. Div element with attribute contenteditable="true"
### CSS3 selectors [Table] [Single feat] |  | ### Interact Test here
### Drag and Drop [Table] [Single feat] |  | ### Interact Test here
### WAI-ARIA Accessibility features [Table] [Single feat] |  |
### Text API for Canvas [Table] [Single feat] |  | ### Auto (m) Modernizr test for: "canvastext"
### WebGL - 3D Canvas graphics [Table] [Single feat] |  | ### Auto (m) Modernizr test for: "webgl" ### Visual-square
### SVG fonts [Table] [Single feat] |  | ### Visual Windsong font
### TTF/OTF - TrueType and OpenType font support [Table] [Single feat] |  | ### Visual Windsong font OTF font test ### Visual Windsong font TTF font test
### WOFF - Web Open Font Format [Table] [Single feat] |  | ### Visual Windsong font
### Progress & Meter [Table] [Single feat] |  | ### Visual fail fail Progress and meter widgets at 50%
### Datalist element [Table] [Single feat] |  | ### Interact foo bar foobar Show "foo" and "foobar" as options when "f" is entered
### Form validation [Table] [Single feat] |  | ### Interact Form should show warning and NOT submit
### MPEG-4/H.264 video format [Table] [Single feat] |  | ### Auto ### Interact fail Video, no MIME, no type attribute. ### Interact Video with source element ### Interact Video with source element and MIME set
### Ogg/Theora video format [Table] [Single feat] |  | ### Auto ### Interact fail Video, no MIME, no type attribute. ### Interact Video with source element and MIME set ### Interact Video with source element
### WebM/VP8 video format [Table] [Single feat] |  | ### Auto ### Interact fail Video, no MIME, no type attribute. ### Interact Video with source element ### Interact Video with source element and MIME set
### Animated PNG (APNG) [unoff] [Table] [Single feat] |  | ### Auto Test for second frame using Canvas element ### Visual Must animate
### CSS Canvas Drawings [unoff] [Table] [Single feat] | -pre- | ### Auto 'getCSSCanvasContext' in document
### CSS Reflections [unoff] [Table] [Single feat] | -pre- | ### Auto (m) Modernizr test for: "cssreflections" ### Visual-square
### Web SQL Database [unoff] [Table] [Single feat] |  | ### Auto (m) Modernizr test for: "websqldatabase"
### Stream API [unoff] [Table] [Single feat] |  | ### Auto Test for "getUserMedia" in navigator object
### CSS Masks [unoff] [Table] [Single feat] | -pre- | ### Visual mask-image: url(caniuse_files/alpha.png);
### CSS3 Text-overflow [unoff] [Table] [Single feat] |  | ### Visual abcdefghijklmnopqrstuvwxyz Should end with ellipsis text-overflow: ellipsis;
### CSS text-stroke [unoff] [Table] [Single feat] | -pre- | ### Visual green stroked text text-stroke: 2px lime;
### EOT - Embedded OpenType fonts [unoff] [Table] [Single feat] |  | ### Visual Windsong font
### XHTML+SMIL animation [unoff] [Table] [Single feat] |  |

Most tests by Alexis Deveria, additional contributions by Paul Irish