Caniuse test page

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.

Select browser to compare results with:

Tests
Feature	Unprefixed tests	Prefixed tests
Shadow DOM [Table][Single feat]
Blob constructing [Table][Single feat]	Auto "BlobBuilder" in window Auto new Blob(["hey!<\/b><\/a>"], { "type" : "text\/xml" });
Canvas (basic support) [Table][Single feat]	Auto(m) Modernizr test for: "canvas" Visual-square Draw rect on canvas using fillStyle and fillRect
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
CSS position:fixed [Table][Single feat]	Auto Interact Test here
CSS Masks [Table][Single feat]	Visual mask-image: url(alpha.png);
CSS Grid Layout [Table][Single feat]	Visual-square Grid with two columns, two rows and three elements taking up space.
Scoped CSS [Table][Single feat]	Visual-square If the scoped attribute is ignored, the box will get a red background.
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
CSS Counters [Table][Single feat]	Visual-square Generated counter content should fill block with lime color.
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"] )
CSS min/max-width/height [Table][Single feat]	Visual-square Visual-square Visual-square Visual-square
CSS outline [Table][Single feat]	Visual-square Element with 0 width/height and 30px lime outline.
CSS inline-block [Table][Single feat]	Visual-square
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]	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) [Table][Single feat]	Auto(m) Modernizr test for: "borderradius" Visual-square
CSS3 Animation [Table][Single feat]	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 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 [Table][Single feat]	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 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 Visual-square IIIII Multiple shadows with radius value
CSS3 Transitions [Table][Single feat]	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
Flexible Box Layout Module [Table][Single feat]	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)
CSS3 Multiple backgrounds [Table][Single feat]	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 [Table][Single feat]	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;
CSS3 Transforms [Table][Single feat]	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: 100px; perspective-origin: 0% 50%; Child: transform: rotateY(-15deg);
@font-face Web fonts [Table][Single feat]	Auto(m) Modernizr test for: "fontface"
CSS3 Text-overflow [Table][Single feat]	Visual abcdefghijklmnopqrstuvwxyz Should end with ellipsis text-overflow: ellipsis;
Font feature settings [Table][Single feat]	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 [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 Feature Queries [Table][Single feat]	Visual-square Test for @supports ( display: block )
CSS Filter Effects [Table][Single feat]	Visual-square filter: invert(1);
CSS Hyphenation [Table][Single feat]	Visual-square hyphenation Test for hyphens: none Visual-square hyphenation Test for hyphens: auto Visual-square hyphenation Test for hyphens: manual
CSS3 Media Queries [Table][Single feat]	Visual-square
CSS Regions [Table][Single feat]	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)
CSS3 Box-sizing [Table][Single feat]	Visual-square Visual-square Test for box-sizing: padding-box
Intrinsic & Extrinsic Sizing [Table][Single feat]	Visual-square width: min-content
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;
Viewport units: vw, vh, vmin, vmax [Table][Single feat]	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 [Table][Single feat]	Visual-square aaabbbcccdddeeefff Test for word-break: break-all; Visual-square 这是一些汉字 Test for word-break: keep-all;
CSS3 Overflow-wrap [Table][Single feat]	Visual-square abcdefghijklmnop word-wrap: break-word; Visual-square abcdefghijklmnop overflow-wrap: break-word;
CSS resize property [Table][Single feat]	Interact Must be able to resize element resize: both
CSS3 selectors [Table][Single feat]	Interact Test here
CSS Repeating Gradients [Table][Single feat]	Visual-square background: repeating-linear-gradient(0deg, lime, lime 30px, red 30px, red 60px);
TTF/OTF - TrueType and OpenType font support [Table][Single feat]	Visual Windsong font TTF font test Visual Windsong font OTF font test
classList (DOMTokenList ) [Table][Single feat]	Auto "classList" in document.body Auto "classList" in document.body Visual-square
getComputedStyle [Table][Single feat]	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.
getElementsByClassName [Table][Single feat]	Auto Visual-square Test if two divs were correctly retrieved using getElementsByClassName
Mutation Observer [Table][Single feat]	Auto "MutationObserver" in window Auto Test if MutationObserver works
querySelector/querySelectorAll [Table][Single feat]	Auto Auto querySelector test on selector '[data-foo=bar] + ' Auto querySelectorAll test on selector '[data-foo=bar] + '
Touch events [Table][Single feat]	Auto(m) Modernizr test for: "touch"
XMLHttpRequest 2 [Table][Single feat]	Auto
async attribute for external scripts [Table][Single feat]	Visual-square Test to see if async script runs later.
defer attribute for external scripts [Table][Single feat]	Visual-square Test to see if defer script runs later.
Audio element [Table][Single feat]	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)
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.
Session history management [Table][Single feat]	Auto(m) Modernizr test for: "history" Auto Test if history.pushState was successful
sandbox attribute for iframes [Table][Single feat]	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.
Offline web applications [Table][Single feat]	Auto(m) Modernizr test for: "applicationcache"
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).
HTML5 form features [Table][Single feat]	Visual date/time/range/number widgets
Ruby annotation [Table][Single feat]	Visual (bottom1)(top1)(bottom2)(top2) Elements should be stacked on top of each other
New semantic elements [Table][Single feat]	Visual-square section, article, aside, hgroup, header, footer, nav tested for default "block" style.
contenteditable attribute (basic support) [Table][Single feat]	Interact This element should be editable. Div element with attribute contenteditable="true"
Download attribute [Table][Single feat]	Interact Clicking link must download pass.txt, not navigate Link with download attribute pointing at a file.
Drag and Drop [Table][Single feat]	Interact Test here
Toolbar/context menu [Table][Single feat]	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
input placeholder attribute [Table][Single feat]	Auto "placeholder" in document.createElement('input') Visual Placeholder text must say "PASS" Text input with placeholder value of "PASS"
Progress & Meter [Table][Single feat]	Visual fail fail Progress and meter widgets at 50%
Datalist element [Table][Single feat]	Interact Show "foo" and "foobar" as options when "f" is entered
Form validation [Table][Single feat]	Interact Form should show warning and NOT submit
Color input type [Table][Single feat]	Interact Must provide widget to select color
Date/time input types [Table][Single feat]	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 [Table][Single feat]	Interact Must provide number widget Interact Must provide number widget with increments of 2 and max value of 6.
Range input type [Table][Single feat]	Interact Must provide slider widget Interact Slider widget Uses -webkit-slider-thumb styling to make it visible/usable in Android browser
Web Audio API [Table][Single feat]	Auto
Cross-Origin Resource Sharing [Table][Single feat]	Auto Instant XHR request on page that should permit it.
DeviceOrientation events [Table][Single feat]	Auto Check for DeviceOrientationEvent in window Auto Must change to lime when device orientation changes. Add 'deviceorientation' event listener to window.
Server-sent DOM events [Table][Single feat]	Auto
File API [Table][Single feat]	Auto Auto "Blob" in window Auto "File" in window Interact Test here
Filesystem & FileWriter API [Table][Single feat]	Auto Check for requestFileSystem in window
Full Screen API [Table][Single feat]	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
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.
Hashchange event [Table][Single feat]	Auto(m) Modernizr test for: "hashchange" Visual-square iframe with addEventListener('hashchange', function() { document.body.style.background = 'lime'; }, false);
IndexedDB [Table][Single feat]	Auto(m) Modernizr test for: "indexeddb" Auto Test for "indexedDB" in window
JSON parsing [Table][Single feat]	Auto Auto Create a JS object, convert to JSON string, convert back to object and compare.
matches() DOM method [Table][Single feat]	Auto Test for "matchesSelector" in document.body Auto Test for "matches" in document.body
matchMedia [Table][Single feat]	Auto Check for matchMedia in window
Web Storage - name/value pairs [Table][Single feat]	Auto(m) Modernizr test for: "localstorage" Auto Test if getItem, setItem and removeItem work.
Navigation Timing API [Table][Single feat]	Auto Test for performance in window Auto Test for "timing" in window.performance Auto Test for all properties in performance.timing
Web Notifications [Table][Single feat]	Auto Test for "notifications" in window (older spec) Auto Try creating "Notification", check for "show" function in notification instance.
PageVisibility [Table][Single feat]	Auto typeof document.hidden == "boolean" Auto typeof document.visibilityState == "string"
requestAnimationFrame [Table][Single feat]	Auto Test the requestAnimationFrame callback Auto Check for requestAnimationFrame in window
getUserMedia/Stream API [Table][Single feat]	Auto Test for "getUserMedia" in navigator object
Typed Arrays [Table][Single feat]	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
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"
Blob URLs [Table][Single feat]	Auto Select a file to test support Test for window.URL.createObjectURL by selecting file.
FileReader API [Table][Single feat]	Auto Check for FileReader in window
Shared Web Workers [Table][Single feat]	Auto Create a new SharedWorker using new SharedWorker('sharedworker.js'); Then, test worker.port.onmessage event.
Channel messaging [Table][Single feat]	Auto "MessageChannel" in window Auto "MessagePort" in window
ECMAScript 5 Strict Mode [Table][Single feat]	Auto Test for error thrown using "use strict" and var a = {a:1,a:1}; Interact Test here External test suite
XHTML served as application/xhtml+xml [Table][Single feat]	Auto
MathML [Table][Single feat]	Visual
Content Security Policy [Table][Single feat]	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 [Table][Single feat]	Visual-square div with data URL as background image
JPEG XR image format [Table][Single feat]	Visual-square 30x30 lime jpegxr image Visual-square 30x30 lime lossless jpegxr image
WebP image format [Table][Single feat]	Visual-square 5x5 lime webp image sized at 30x30
WAI-ARIA Accessibility features [Table][Single feat]	Interact
WOFF - Web Open Font Format [Table][Single feat]	Visual Windsong font
MPEG-4/H.264 video format [Table][Single feat]	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 [Table][Single feat]	Auto Interact Video with source element and MIME set Interact Video with source element Interact Video, no MIME, no type attribute.
WebM/VP8 video format [Table][Single feat]	Auto Interact Video with source element and MIME set Interact Video with source element Interact Video, no MIME, no type attribute.
PNG alpha transparency [Table][Single feat]	Visual
SVG (basic support) [Table][Single feat]	Auto(m) Modernizr test for: "svg" Visual-square SVG in <object>
SVG effects for HTML [Table][Single feat]	Auto 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
SVG in CSS backgrounds [Table][Single feat]	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 [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"/>
SVG fragment identifiers [Table][Single feat]	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))
SVG in HTML img element [Table][Single feat]	Visual-square
SVG fonts [Table][Single feat]	Visual Windsong font
CSS Canvas Drawings [unoff] [Table][Single feat]	Auto 'getCSSCanvasContext' in document
CSS Reflections [unoff] [Table][Single feat]	Auto(m) Modernizr test for: "cssreflections" Visual-square box-reflect: below 0;
CSS user-select: none [unoff] [Table][Single feat]	Auto user-select: none; property "sticks" Interact This text should be unselectable by the user. user-select: none;
CSS text-stroke [unoff] [Table][Single feat]	Visual green stroked text text-stroke: 2px lime;
CSS pointer-events (for HTML) [unoff] [Table][Single feat]	Auto
Web SQL Database [unoff] [Table][Single feat]	Auto(m) Modernizr test for: "websqldatabase"
EOT - Embedded OpenType fonts [unoff] [Table][Single feat]	Visual Windsong font
XHTML+SMIL animation [unoff] [Table][Single feat]	Auto
Animated PNG (APNG) [unoff] [Table][Single feat]	Auto Test for second frame using Canvas element Visual Must animate

Tests

Feature

Unprefixed tests

Prefixed tests

Shadow DOM

[Table][Single feat]

Blob constructing

[Table][Single feat]

Auto

"BlobBuilder" in window

Auto

new Blob(["hey!<\/b><\/a>"], { "type" : "text\/xml" });

Canvas (basic support)

[Table][Single feat]

Auto(m)

Modernizr test for: "canvas"

Visual-square

Draw rect on canvas using fillStyle and fillRect

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

CSS position:fixed

[Table][Single feat]

Auto

Interact

Test here

CSS Masks

[Table][Single feat]

Visual

mask-image: url(alpha.png);

CSS Grid Layout

[Table][Single feat]

Visual-square

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

Scoped CSS

[Table][Single feat]

Visual-square

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

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

CSS Counters

[Table][Single feat]

Visual-square

Generated counter content should fill block with lime color.

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"] )

CSS min/max-width/height

[Table][Single feat]

Visual-square

CSS outline

[Table][Single feat]

Visual-square

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

CSS inline-block

[Table][Single feat]

Visual-square

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]

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)

[Table][Single feat]

Auto(m)

Modernizr test for: "borderradius"

Visual-square

CSS3 Animation

[Table][Single feat]

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

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

[Table][Single feat]

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 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

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

Visual

Multiple shadow test

Visual-square

IIIII

Multiple shadows with radius value

CSS3 Transitions

[Table][Single feat]

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

Flexible Box Layout Module

[Table][Single feat]

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)

CSS3 Multiple backgrounds

[Table][Single feat]

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

[Table][Single feat]

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;

CSS3 Transforms

[Table][Single feat]

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: 100px; perspective-origin: 0% 50%; Child: transform: rotateY(-15deg);

@font-face Web fonts

[Table][Single feat]

Auto(m)

Modernizr test for: "fontface"

CSS3 Text-overflow

[Table][Single feat]

Visual

abcdefghijklmnopqrstuvwxyz

Should end with ellipsis

text-overflow: ellipsis;

Font feature settings

[Table][Single feat]

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

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

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 Feature Queries

[Table][Single feat]

Visual-square

Test for @supports ( display: block )

CSS Filter Effects

[Table][Single feat]

Visual-square

filter: invert(1);

CSS Hyphenation

[Table][Single feat]

Visual-square

hyphenation

Test for hyphens: none

Visual-square

hyphenation

Test for hyphens: auto

Visual-square

hyphenation

Test for hyphens: manual

CSS3 Media Queries

[Table][Single feat]

Visual-square

CSS Regions

[Table][Single feat]

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)

CSS3 Box-sizing

[Table][Single feat]

Visual-square

Test for box-sizing: padding-box

Intrinsic & Extrinsic Sizing

[Table][Single feat]

Visual-square

width: min-content

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

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

Viewport units: vw, vh, vmin, vmax

[Table][Single feat]

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

[Table][Single feat]

Visual-square

aaabbbcccdddeeefff

Test for word-break: break-all;

Visual-square

这是一些汉字

Test for word-break: keep-all;

CSS3 Overflow-wrap

[Table][Single feat]

Visual-square

abcdefghijklmnop

word-wrap: break-word;

Visual-square

abcdefghijklmnop

overflow-wrap: break-word;

CSS resize property

[Table][Single feat]

Interact

Must be able to resize element

resize: both

Visual-square

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

TTF/OTF - TrueType and OpenType font support

[Table][Single feat]

Visual

Windsong font

TTF font test

Visual

Windsong font

OTF font test

classList (DOMTokenList )

[Table][Single feat]

Auto

"classList" in document.body

Auto

"classList" in document.body

Visual-square

getComputedStyle

[Table][Single feat]

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.

getElementsByClassName

[Table][Single feat]

Auto

Visual-square

Test if two divs were correctly retrieved using getElementsByClassName

Mutation Observer

[Table][Single feat]

Auto

"MutationObserver" in window

Auto

Test if MutationObserver works

querySelector/querySelectorAll

[Table][Single feat]

Auto

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

Auto

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

Touch events

[Table][Single feat]

Auto(m)

Modernizr test for: "touch"

XMLHttpRequest 2

[Table][Single feat]

Auto

async attribute for external scripts

[Table][Single feat]

Visual-square

Test to see if async script runs later.

defer attribute for external scripts

[Table][Single feat]

Visual-square

Test to see if defer script runs later.

Audio element

[Table][Single feat]

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)

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.

Session history management

[Table][Single feat]

Auto(m)

Modernizr test for: "history"

Auto

Test if history.pushState was successful

sandbox attribute for iframes

[Table][Single feat]

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.

Offline web applications

[Table][Single feat]

Auto(m)

Modernizr test for: "applicationcache"

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).

HTML5 form features

[Table][Single feat]

Visual

date/time/range/number widgets

Ruby annotation

[Table][Single feat]

Visual

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

Elements should be stacked on top of each other

New semantic elements

[Table][Single feat]

Visual-square

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

contenteditable attribute (basic support)

[Table][Single feat]

Interact

This element should be editable.

Div element with attribute contenteditable="true"

Download attribute

[Table][Single feat]

Interact

Clicking link must download pass.txt, not navigate

Link with download attribute pointing at a file.

Drag and Drop

[Table][Single feat]

Interact

Test here

Toolbar/context menu

[Table][Single feat]

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

input placeholder attribute

[Table][Single feat]

Auto

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

Visual

Placeholder text must say "PASS"

Text input with placeholder value of "PASS"

Progress & Meter

[Table][Single feat]

Visual

fail fail

Progress and meter widgets at 50%

Datalist element

[Table][Single feat]

Interact

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

Form validation

[Table][Single feat]

Interact

Form should show warning and NOT submit

Color input type

[Table][Single feat]

Interact

Must provide widget to select color

Date/time input types

[Table][Single feat]

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

[Table][Single feat]

Interact

Must provide number widget

Interact

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

Range input type

[Table][Single feat]

Interact

Must provide slider widget

Interact

Slider widget

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

Web Audio API

[Table][Single feat]

Auto

Cross-Origin Resource Sharing

[Table][Single feat]

Auto

Instant XHR request on page that should permit it.

DeviceOrientation events

[Table][Single feat]

Auto

Check for DeviceOrientationEvent in window

Auto

Must change to lime when device orientation changes.

Add 'deviceorientation' event listener to window.

Server-sent DOM events

[Table][Single feat]

Auto

File API

[Table][Single feat]

Auto

"Blob" in window

Auto

"File" in window

Interact

Test here

Filesystem & FileWriter API

[Table][Single feat]

Auto

Check for requestFileSystem in window

Full Screen API

[Table][Single feat]

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

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.

Hashchange event

[Table][Single feat]

Auto(m)

Modernizr test for: "hashchange"

Visual-square

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

IndexedDB

[Table][Single feat]

Auto(m)

Modernizr test for: "indexeddb"

Auto

Test for "indexedDB" in window

JSON parsing

[Table][Single feat]

Auto

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

matches() DOM method

[Table][Single feat]

Auto

Test for "matchesSelector" in document.body

Auto

Test for "matches" in document.body

matchMedia

[Table][Single feat]

Auto

Check for matchMedia in window

Web Storage - name/value pairs

[Table][Single feat]

Auto(m)

Modernizr test for: "localstorage"

Auto

Test if getItem, setItem and removeItem work.

Navigation Timing API

[Table][Single feat]

Auto

Test for performance in window

Auto

Test for "timing" in window.performance

Auto

Test for all properties in performance.timing

Web Notifications

[Table][Single feat]

Auto

Test for "notifications" in window (older spec)

Auto

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

PageVisibility

[Table][Single feat]

Auto

typeof document.hidden == "boolean"

Auto

typeof document.visibilityState == "string"

requestAnimationFrame

[Table][Single feat]

Auto

Test the requestAnimationFrame callback

Auto

Check for requestAnimationFrame in window

getUserMedia/Stream API

[Table][Single feat]

Auto

Test for "getUserMedia" in navigator object

Typed Arrays

[Table][Single feat]

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

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"

Blob URLs

[Table][Single feat]

Auto

Select a file to test support

Test for window.URL.createObjectURL by selecting file.

FileReader API

[Table][Single feat]

Auto

Check for FileReader in window

Shared Web Workers

[Table][Single feat]

Auto

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

Channel messaging

[Table][Single feat]

Auto

"MessageChannel" in window

Auto

"MessagePort" in window

ECMAScript 5 Strict Mode

[Table][Single feat]

Auto

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

Interact

Test here

External test suite

XHTML served as application/xhtml+xml

[Table][Single feat]

Auto

MathML

[Table][Single feat]

Visual

Content Security Policy

[Table][Single feat]

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.