The Can I use... test suite

About

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.

Feature Unprefixed tests Prefixed tests

Resource Hints: dns-prefetch

[Feat] [Tests]

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

getContext('experimental-webgl')

Visual-square

getContext('webgl')

Canvas blend modes

[Feat] [Tests]

Visual-square

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

WebGL 2.0

[Feat] [Tests]

Visual-square

getContext('experimental-webgl2')

Visual-square

getContext('webgl2')

CSS background-attachment

[Feat] [Tests]

Auto

background-attachment: fixed; property "sticks"

Auto

background-attachment: local; property "sticks"

Interact

CSS Appearance

[Feat] [Tests]

Auto

appearance: none; property stays

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

[Feat] [Tests]

Auto

letter-spacing CSS property

[Feat] [Tests]

Auto

AAAAAAAAAAA
AAAAAAAAAAA
AAAAAAAAAAA
Test for fractional letter-spacing

Visual-square

AAAAAAAAAAAAA
Test for negative letter spacing

CSS page-break properties

[Feat] [Tests]

Auto

break-before: always; property "sticks"

Auto

page-break-before: always; property "sticks"

Visual-square

Test page-break-inside:avoid

Visual-square

Test column-break-inside:avoid

CSSOM Scroll-behavior

[Feat] [Tests]

Auto

scroll-behavior: smooth; property "sticks"

Auto

Test if el.scrollBy({ "behavior": "smooth", "left": 0, "top": 0 }); does not throw an error

CSS Scroll snap points

[Feat] [Tests]

Auto

scroll-snap-type: mandatory; property "sticks"

Auto

scroll-snap-destination: 10px; property "sticks"

Auto

scroll-snap-coordinate: 10px; property "sticks"

Auto

scroll-snap-points-x: repeat(10px); property "sticks"

Auto

scroll-snap-points-x: snapList(10px); property "sticks" (older spec)

CSS text-justify

[Feat] [Tests]

Auto

CSS.supports test for text-justify: inter-word

Auto

Test if text-justify: distribute sticks

CSS touch-action property

[Feat] [Tests]

Auto

touch-action: none; property stays

CSS widows & orphans

[Feat] [Tests]

Auto

orphans: 5; property "sticks"

Auto

widows: 5; property "sticks"

Visual-square

a a a a
Test for orphans: 9

Visual-square

a a a a
Test for widows: 9

CSS font-size-adjust

[Feat] [Tests]

Auto

font-size-adjust: 1; property stays

Visual-square

x
Test for font-size-adjust: 3

CSS user-select: none

[Feat] [Tests]

Auto

user-select: none; property "sticks"

Interact

This text should be unselectable by the user.

user-select: none;

CSS will-change property

[Feat] [Tests]

Auto

will-change: contents; property stays

::placeholder CSS pseudo-element

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

:placeholder-shown CSS pseudo-class

[Feat] [Tests]

Visual

Placeholder should be lime

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

CSS Masks

[Feat] [Tests]

Visual

mask-image: url(alpha.png);

CSS all property

[Feat] [Tests]

Visual-square

Test for all:inherit

CSS background-blend-mode

[Feat] [Tests]

Visual-square

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

:dir() CSS pseudo-class

[Feat] [Tests]

Visual-square

CSS Exclusions Level 1

[Feat] [Tests]

Visual-square

Test for wrap-flow: both

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.

:in-range and :out-of-range CSS pseudo-classes

[Feat] [Tests]

Visual-square

Visual-square

:matches() CSS pseudo-class

[Feat] [Tests]

Visual-square

Visual-square

Blending of HTML/SVG elements

[Feat] [Tests]

Visual-square

Overlapping divs with mix-blend-mode: multiply

selector list argument of :not()

[Feat] [Tests]

Visual-square

CSS revert value

[Feat] [Tests]

Visual-square

CSS text-indent

[Feat] [Tests]

Visual-square

length

text-indent: 30px;

Visual-square


each-line

text-indent: 30px each-line;

Visual-square

hanging

text-indent: 30px hanging;

CSS unset value

[Feat] [Tests]

Visual-square

Test for background:unset

CSS writing-mode property

[Feat] [Tests]

Visual-square

aaaaaaa

CSS currentColor value

[Feat] [Tests]

Visual-square

Test for background:currentColor; with parent having color set to "lime"

CSS Device Adaptation

[Feat] [Tests]

Interact

::first-letter CSS pseudo-element selector

[Feat] [Tests]

Interact

::selection CSS pseudo-element

[Feat] [Tests]

Interact

This should be lime when selected

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

Media Queries: interaction media features

[Feat] [Tests]

Visual-square

Test support for @media (pointer:none), (pointer:coarse), (pointer:fine)

Visual-square

Test support for @media (any-hover:none), (any-hover:on-demand), (any-hover:hover)

Visual-square

Test support for @media (any-pointer:none), (any-pointer:coarse), (any-pointer:fine)

Visual-square

Test support for @media (hover:none), (hover:on-demand), (hover:hover)

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 selectors

[Feat] [Tests]

Should be lime when box is checked

Test for :checked support

Interact

text-emphasis styling

[Feat] [Tests]

A B C D E F

Should have blue triangles above text

text-emphasis: filled triangle blue;

Auto

text-emphasis: circle filled; property "sticks"

Auto

text-emphasis-position: under left; property "sticks"

Visual-square

-
Test for text-emphasis-style: filled circle; text-emphasis-position: over; text-emphasis-color: lime;

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;

Visual-square

background: url(green5x5.png) no-repeat 0/cover; (shorthand)

CSS3 Border images

[Feat] [Tests]

Auto(m)

Modernizr test for: "borderimage"

Visual

Must include 2 or 3 full horizontal yellow diamonds

Test for "round" - longhand

Visual

Must include full horizontal yellow diamonds w/spaces

Test for "space"

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

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

CSS3 font-kerning

[Feat] [Tests]

Auto

font-kerning: normal; property "sticks"

Auto

Test if text width changes when switching from font-kerning: none to font-kerning: normal on text 'AVAVAVAVAVAVAVAV'

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;

CSS3 2D Transforms

[Feat] [Tests]

Auto(m)

Modernizr test for: "csstransforms"

Visual-square

transform: translate(30px);

Visual-square

CSS transform on an SVG element

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"

CSS Counter Styles

[Feat] [Tests]

Visual

  •  

Should say "PASS"

Interact

CSS ::marker pseudo-element

[Feat] [Tests]

Visual

  • -

should say "PASS" and be colored green

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'; }

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

ch (character) unit

[Feat] [Tests]

Visual-square

A
span with single character and font-size: 10ch;

CSS background-position edge offsets

[Feat] [Tests]

Visual-square

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

CSS box-decoration-break

[Feat] [Tests]

Visual-square

abc def
Test for box-decoration-break: clone

CSS element() function

[Feat] [Tests]

Visual-square

Test for background:element()

CSS Feature Queries

[Feat] [Tests]

Visual-square

Test for @supports ( display: block )

CSS filter() function

[Feat] [Tests]

Visual-square

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

Visual-square

Test support for nested @media

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

CSS3 text-align-last

[Feat] [Tests]

Visual-square

Test for text-align-last: right

Visual-square

Test for text-align-last: right

Visual-square

Test for text-align-last: end

Visual-square

Test for text-align-last: end

CSS Variables (Custom Properties)

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

CSS font-variant-alternates

[Feat] [Tests]

Visual-square

tu
Test for font-variant-alternates: styleset(myset)

Intrinsic & Extrinsic Sizing

[Feat] [Tests]

Visual-square

width: min-content

Visual-square

width: min-intrinsic

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 Cursors (original values)

[Feat] [Tests]

Interact

CSS3 Cursors: zoom-in & zoom-out

[Feat] [Tests]

Interact

CSS Repeating Gradients

[Feat] [Tests]

Visual-square

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

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)

Media Queries: resolution feature

[Feat] [Tests]

Visual-square

Test for min-device-pixel-ratio

Visual-square

Test for min-resolution: 1dpi

Visual-square

Test for min-resolution: 0.01dppx

Visual-square

Test for min-resolution: 1dpcm

CSS first-line pseudo-element

[Feat] [Tests]

Auto

foo bar

first line should be lime (:first-line)

TTF/OTF - TrueType and OpenType font support

[Feat] [Tests]

Visual

Windsong font

TTF font test

Visual

Windsong font

OTF font test

EventTarget.addEventListener()

[Feat] [Tests]

Auto

Test for addEventListener without useCapture param

Auto

Test for addEventListener with useCapture param

Auto

click should turn it to lime

Test for stopPropagation in event object

ChildNode.remove()

[Feat] [Tests]

Auto

Test for "remove" in document.body

Node.compareDocumentPosition()

[Feat] [Tests]

Auto

Test for 'compareDocumentPosition' in document.body

Interact

Window.devicePixelRatio

[Feat] [Tests]

Auto

EventTarget.dispatchEvent

[Feat] [Tests]

Auto

document.head

[Feat] [Tests]

Auto

Test if document.head matches document.getElementsByTagName('head')[0]

DOM manipulation convenience methods

[Feat] [Tests]

Auto

DOMContentLoaded

[Feat] [Tests]

Auto

Validates once DOMContentLoaded is triggered

Element.closest()

[Feat] [Tests]

Auto

Test Element.closest for self, parent and non-matching selector

document.elementFromPoint()

[Feat] [Tests]

Auto

Test for 'elementFromPoint' in document

Auto

Test if elementFromPoint matches expected element

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.

Node.innerText

[Feat] [Tests]

Auto

Test if innerText got set as expected

autocomplete attribute: on & off values

[Feat] [Tests]

Auto

Element.insertAdjacentElement() & Element.insertAdjacentText()

[Feat] [Tests]

Auto

insertAdjacentElement

Test for 'insertAdjacentElement' in document.body

Auto

insertAdjacentText

Test for 'insertAdjacentText' in document.body

Mutation events

[Feat] [Tests]

Auto

DOMNodeInserted

Auto

DOMCharacterDataModified

Auto

DOMNodeRemoved

Auto

DOMAttrModified

Auto

DOMNodeRemovedFromDocument

Auto

DOMNodeInsertedIntoDocument

"once" event listener option

[Feat] [Tests]

Auto

Passive event listeners

[Feat] [Tests]

Auto

Test triggering a custom event with passive: true

querySelector/querySelectorAll

[Feat] [Tests]

Auto

Auto

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

Auto

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

Shadow DOM v0

[Feat] [Tests]

Auto

Visual-square

Shadow DOM v1

[Feat] [Tests]

Auto

el.attachShadow

Test for 'attachShadow' in document.body

Auto

window.ShadowRoot

Test for 'ShadowRoot' in window

Node.textContent

[Feat] [Tests]

Auto

Test if textContent got set as expected

Client Hints: DPR, Width, Viewport-Width

[Feat] [Tests]

Visual-square

DPR

Test if "DPR" header is returned

Visual-square

Width

Test if "Width" header is returned

Visual-square

Viewport-Width

Test if "Viewport-Width" header is returned

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.

focusin & focusout events

[Feat] [Tests]

Interact

Focus & unfocus field to test

inputmode attribute

[Feat] [Tests]

Interact

Must show numeric keypad

KeyboardEvent.code

[Feat] [Tests]

Interact

Type "a"

Test if event.code for the "a" key returns "KeyA"

KeyboardEvent.getModifierState()

[Feat] [Tests]

Interact

Type "a"

Test for e.getModifierState('Shift');

KeyboardEvent.key

[Feat] [Tests]

Interact

Type "a"

Test if event.key for the "a" key returns "a"

KeyboardEvent.location

[Feat] [Tests]

Interact

Type "a"

Test if event.location for the "a" key returns 0

Interact

Type "a"

Test if event.keyLocation for the "a" key returns 0 (older spec)

Resource Hints: prefetch

[Feat] [Tests]

Interact

Resource Hints: preload

[Feat] [Tests]

Interact

Resource Hints: prerender

[Feat] [Tests]

Interact

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)

Audio Tracks

[Feat] [Tests]

Auto

Test for audioTracks in video

Autofocus attribute

[Feat] [Tests]

Auto

Field must have focus when added

Canvas (basic support)

[Feat] [Tests]

Auto(m)

Modernizr test for: "canvas"

Visual-square

Draw rect on canvas using fillStyle and fillRect

classList (DOMTokenList)

[Feat] [Tests]

Auto

"classList" in document.body

Auto

"classList" in document.body

Auto

"classList" in SVG element

Visual-square

Test for classList.add & classList.remove

Visual-square

Test for second toggle parameter

Visual-square

Test if multiple parameters for "add" are supported

Custom Elements v0

[Feat] [Tests]

Auto

Test support for 'registerElement' in document

Auto

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

Custom Elements v1

[Feat] [Tests]

Auto

window.customElements.define

Test for customElements.define in window

dataset & data-* attributes

[Feat] [Tests]

Auto

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

Visual-square

Test .dataset on SVG

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

disabled attribute of the fieldset element

[Feat] [Tests]

Auto

Interact

Input field should be disabled

Attributes for form submission

[Feat] [Tests]

Auto

Test for form attribute properties

Interact

getElementsByClassName

[Feat] [Tests]

Auto

Visual-square

Test if two divs were correctly retrieved using getElementsByClassName

Visual-square

Test if SVG element was correctly retrieved using getElementsByClassName

hidden attribute

[Feat] [Tests]

Auto

Test for 'hidden' in document.body

Visual-square

Red square is hidden if attribute is supported

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

srcdoc attribute for iframes

[Feat] [Tests]

Auto

Visual-square

Test for iframe with srcdoc having lime background

naturalWidth & naturalHeight image properties

[Feat] [Tests]

Auto

HTML Imports

[Feat] [Tests]

Auto

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

Reversed attribute of ordered lists

[Feat] [Tests]

Auto

Test for 'reversed' in ol element

Visual

  1.  
  2.  
  3.  

Should number from 3 to 1

Ping attribute

[Feat] [Tests]

Auto

Interact

Click here

readonly attribute of input and textarea elements

[Feat] [Tests]

Auto

Test for "readOnly" in input element

Interact

Custom protocol handling

[Feat] [Tests]

Auto

Test for 'registerProtocolHandler' in navigator

Interact


Open caniuse-test://mytest

Link must open rph.html

Interact


Open web+caniuse-test://mytest

Link must open rph.html

Test protocol "web+caniuse-test"

relList (DOMTokenList)

[Feat] [Tests]

Auto

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

Auto

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

Ruby annotation

[Feat] [Tests]

Auto

display: ruby; property stays

Auto

display: ruby-base-container; property stays

Auto

ruby-position: over; property "sticks"

Auto

ruby-align: space-between; property "sticks"

Visual

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

Elements should be stacked on top of each other

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

HTML templates

[Feat] [Tests]

Auto

Test for 'content' when creating a template element

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

Video Tracks

[Feat] [Tests]

Auto

Test for videoTracks in video

HTML5 form features

[Feat] [Tests]

Visual




date/time/range/number widgets

indeterminate checkbox

[Feat] [Tests]

Visual

Middle checkbox should appear different from checked & unchecked

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

wbr (word break opportunity) element

[Feat] [Tests]

Visual-square

foofoofoofoofoofoo

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

Interact

drag file here

input event

[Feat] [Tests]

Interact

Test input event on input type=text

Interact

Test input event on input type=checkbox

accept attribute for file input

[Feat] [Tests]

Interact

Must only accept audio files

Interact


sample png sample jpg

Must only accept .png files

Interact

Must only accept image files

PNG favicons

[Feat] [Tests]

Interact

Toolbar/context menu

[Feat] [Tests]

Interact

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

Uses "menuitem" child elements

rel=noopener

[Feat] [Tests]

Interact

Subresource Integrity

[Feat] [Tests]

Interact

tabindex global attribute

[Feat] [Tests]

Interact

Element focus should cycle from right to left

Web App Manifest

[Feat] [Tests]

Interact

Minimum length attribute for input fields

[Feat] [Tests]

Auto

Test for 'minlength' in an input element

Interact

Form should show warning and NOT submit

Pattern attribute for input fields

[Feat] [Tests]

Auto

Test for "pattern" in input

Visual

All fields should be lime

Test for :valid, :invalid with pattern attribute

Interact

Form should only submit if value is "pass"

Form validation

[Feat] [Tests]

Auto

Run checkValidity() on an email field with invalid email input

Visual

All fields should be lime

Test for :valid, :invalid and :required CSS selectors

Interact

Form should show warning and NOT submit

Email, telephone & URL input types

[Feat] [Tests]

Auto

Test if url type "sticks" for an input element

Auto

Test if tel type "sticks" for an input element

Auto

Test if email type "sticks" for an input element

Interact

Email:
Tel:
URL:

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"

Search input type

[Feat] [Tests]

Auto

Test if type as search is recognized

Interact

<- search
<- text

Search should appear differently

meter element

[Feat] [Tests]

Visual

fail

meter widget at 50%

progress element

[Feat] [Tests]

Visual

fail

Progress widget at 50%

Datalist element

[Feat] [Tests]

Interact

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

Form attribute

[Feat] [Tests]

Interact

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

Interact

Must provide widget to select date and 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

Arrow functions

[Feat] [Tests]

Auto

Test if var fn = (n => n + 1) properly increments by one

Async functions

[Feat] [Tests]

Auto

Test if async function can be created

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

Auto

Test if "getBattery" in navigator is a function

Beacon API

[Feat] [Tests]

Auto

Test for 'sendBeacon' in navigator

Visual-square

Test if sendBeacon works on beforeunload event

BroadcastChannel

[Feat] [Tests]

Auto

"BroadcastChannel" in window

Clipboard API

[Feat] [Tests]

Auto

Check for "onpaste" in document

Auto

Test for ClipboardEvent in window

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)

Interact

select this

Paste here:

copy button should copy to clipboard

Interact

Copy this text

Copying text should turn background lime

Test if document.oncopy is triggered and has clipboardData

Basic console logging functions

[Feat] [Tests]

Auto

Test for console.log();

Auto

Test for console.error();

Auto

Test for console.warn();

Auto

Test for console.info();

const

[Feat] [Tests]

Auto

Test for const FOO = 'bar';

Auto

Test if const is block scoped

Auto

Test if const is block scoped with "use strict"

Auto

Test for const FOO = 'bar'; with "use strict"

Visual-square

Test if const cannot be changed

Visual-square

Test if const cannot be changed (with "use strict")

Cross-Origin Resource Sharing

[Feat] [Tests]

Auto

Instant XHR request on page that should permit it.

Credential Management API

[Feat] [Tests]

Auto

Web Cryptography

[Feat] [Tests]

Auto

Test if crypto.subtle.generateKey is function

CSS.supports() API

[Feat] [Tests]

Auto

Test for CSS.supports("color", "lime");

Auto

supportsCSS

Test for CSS.supports("color: lime");

CustomEvent

[Feat] [Tests]

Auto

Test for document.createEvent('CustomEvent')

Auto

Test if window.CustomEvent exists

Auto

Test for CustomEvent constructor

DeviceOrientation & DeviceMotion 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

document.currentScript

[Feat] [Tests]

Auto

Test for 'currentScript' in document

Auto

Test if document.currentScript is the last accessible script

Document Object Model Range

[Feat] [Tests]

Auto

Test for 'createRange' in document

Auto

Various range tests

ES6 classes

[Feat] [Tests]

Auto

Auto

strict mode

ES6 Number

[Feat] [Tests]

Auto

isFinite

Auto

isInteger

Auto

isSafeInteger

Auto

isNaN

Auto

EPSILON

Auto

MIN_SAFE_INTEGER

Auto

MAX_SAFE_INTEGER

Server-sent events

[Feat] [Tests]

Auto

Fetch

[Feat] [Tests]

Auto

Test for "fetch" in window

File API

[Feat] [Tests]

Auto

Auto

"Blob" in window

Auto

"File" in window

Auto

Test for File constructor

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

Input Method Editor API

[Feat] [Tests]

Auto

Test for "inputMethodContext" in an input field

Auto

Test for "getInputContext" in an input field

IndexedDB

[Feat] [Tests]

Auto(m)

Modernizr test for: "indexeddb"

Auto

Test for "indexedDB" in window

Auto

Test if onupgradeneeded or onsuccess fired

Internationalization API

[Feat] [Tests]

Auto

Test for Intl.Collator

Auto

Test for Intl.DateTimeFormat

Auto

Test for Intl.NumberFormat

let

[Feat] [Tests]

Auto

let foo = 'bar'

Auto

let foo = 'bar' with "use strict"

Visual-square

Test let support using the "application/javascript;version=1.7" type on the script tag

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

Media Source Extensions

[Feat] [Tests]

Auto

Auto

Test for "sourceopen" event and check existence of 'sourceBuffers'

Web MIDI API

[Feat] [Tests]

Auto

Test for "getMIDIAccess" in navigator object

Mutation Observer

[Feat] [Tests]

Auto

"MutationObserver" in window

Auto

Test if MutationObserver works

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'});

Object RTC (ORTC) API for WebRTC

[Feat] [Tests]

Auto

Online/offline status

[Feat] [Tests]

Auto

Test for 'onLine' in navigator

Auto

Should go lime when going from off to online

Auto

Should go lime when going from on to offline

PageTransitionEvent

[Feat] [Tests]

Auto

Auto

Visual-square

Test for iframe with page that turns lime on "pageshow" event

Page Visibility

[Feat] [Tests]

Auto

typeof document.hidden == "boolean"

Auto

typeof document.visibilityState == "string"

Payment Request API

[Feat] [Tests]

Auto

Test for 'PaymentRequest' in window

PointerLock API

[Feat] [Tests]

Auto

Test for requestPointerLock in document.body

Auto

test for movementX in new MouseEvent('mousemove')

Interact

Promises

[Feat] [Tests]

Auto

Create a promise and resolve with parameter

Proximity API

[Feat] [Tests]

Auto

Check for 'ondeviceproximity' in window

Auto

Check for 'onuserproximity' in window

Proxy object

[Feat] [Tests]

Auto

Test for global Proxy object & revocable method

Push API

[Feat] [Tests]

Auto

Test for PushSubscription in window

Auto

Test for PushManager in window

requestAnimationFrame

[Feat] [Tests]

Auto

Test the requestAnimationFrame callback

Auto

Check for requestAnimationFrame in window

Auto

Check for cancelAnimationFrame in window

requestIdleCallback

[Feat] [Tests]

Auto

Auto

Test if requestIdleCallback callback is called

Resource Timing

[Feat] [Tests]

Auto

Test if window.performance.getEntriesByName is a function

Rest parameters

[Feat] [Tests]

Auto

Test if rest parameter has correct amount of items

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

Auto

Test if window.screen.orientation is an object

Interact

Interact

Selection API

[Feat] [Tests]

Auto

Test for 'getSelection' in window

Auto

Test for 'onselectstart' in document

Auto

Test for 'onselectionchange' in document

Visual

Select this text

selectstart triggered: no

selectionchange triggered: no

Service Workers

[Feat] [Tests]

Auto

Test for 'serviceWorker' in navigator

getUserMedia/Stream API

[Feat] [Tests]

Auto

Test for "getUserMedia" in navigator object

Auto

Test for "srcObject" in video element

TextEncoder & TextDecoder

[Feat] [Tests]

Auto

Test for 'TextEncoder' in window

Auto

Test if TextEncoder returns expected result

Auto

Test for 'TextDecoder' in window

Auto

Test if TextDecoder returns expected result

Touch events

[Feat] [Tests]

Auto(m)

Modernizr test for: "touch"

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

Auto

Test for ArrayBuffer

URLSearchParams

[Feat] [Tests]

Auto

window.URLSearchParams

Test for 'URLSearchParams' in window

Auto

.get()

Test for new URLSearchParams() & params.get()

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

Test .animate(), should animate from red to lime

Auto

Test if player.pause is function

Web Sockets

[Feat] [Tests]

Auto(m)

Modernizr test for: "websockets"

Auto

Test for binary websockets support

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"

XMLHttpRequest advanced features

[Feat] [Tests]

Auto

Auto

Test for 'timeout' property

Auto

Test for xhr.responseType = 'json'

DOM Parsing and Serialization

[Feat] [Tests]

Auto

Test DOMParser.parseFromString

Auto

Test XMLSerializer.serializeToString

Auto

Test innerHTML get and set

Auto

Test outerHTML get and set

Auto

Test insertAdjacentHTML with beforebegin and beforeend

Element.insertAdjacentHTML()

[Feat] [Tests]

Visual-square

Interact

scrollIntoView

[Feat] [Tests]

Visual-square

scrollIntoView()

Visual-square

scrollIntoView(false)

Visual-square

scrollIntoView({behavior: 'smooth'})

ECMAScript 5

[Feat] [Tests]

Interact

Element.getBoundingClientRect()

[Feat] [Tests]

Interact

Pointer events

[Feat] [Tests]

Interact

Must turn lime on click or tap

Tests support for "pointerdown" event

Interact

Must turn lime on "pointerover"

Tests support for "pointerover" event

FIDO U2F API

[Feat] [Tests]

Interact

Currently untestable, hopefully this will stay up to date on info until it is.

JSON parsing

[Feat] [Tests]

Auto

Auto

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

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

FileReaderSync

[Feat] [Tests]

Auto

Test filereadersync in a worker

Auto

Test if filereadersync exists in a worker

maxlength attribute for input and textarea elements

[Feat] [Tests]

Auto

Test for maxLength property

Interact

Should only allow one character to be entered

Interact


Change text length to 1+ chars, then click
Test for el.validity.tooLong

MediaRecorder API

[Feat] [Tests]

Auto

Test for 'MediaRecorder' in window

Interact

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

WebAssembly

[Feat] [Tests]

Auto

window.Wasm & Wasm.instantiateModule

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 2000 image format

[Feat] [Tests]

Visual-square

30x30 lime jpeg2000 image

JPEG XR image format

[Feat] [Tests]

Visual-square

30x30 lime jpegxr image

Visual-square

30x30 lime lossless jpegxr image

'SameSite' cookie attribute

[Feat] [Tests]

Visual-square

SDCH Accept-Encoding/Content-Encoding

[Feat] [Tests]

Visual-square

asm.js

[Feat] [Tests]

Interact

Test here (result should be significant difference)

Brotli Accept-Encoding/Content-Encoding

[Feat] [Tests]

Interact

content-encoding: brotli

Interact

content-encoding: br

ChaCha20-Poly1305 cipher suites for TLS

[Feat] [Tests]

Interact

Content Security Policy Level 2

[Feat] [Tests]

Interact

CSS Paged Media (@page)

[Feat] [Tests]

Interact

HTTP/2 protocol

[Feat] [Tests]

Public Key Pinning

[Feat] [Tests]

Interact

Referrer Policy

[Feat] [Tests]

Interact

Interact

Test for content=never

Server Name Indication

[Feat] [Tests]

Interact

Strict Transport Security

[Feat] [Tests]

Interact

TLS 1.1

[Feat] [Tests]

Interact

TLS 1.2

[Feat] [Tests]

Interact

Upgrade Insecure Requests

[Feat] [Tests]

Interact

WAI-ARIA Accessibility features

[Feat] [Tests]

Interact

X-Frame-Options HTTP header

[Feat] [Tests]

Interact

AAC audio file format

[Feat] [Tests]

Interact

Audio element with aac file

MP3 audio format

[Feat] [Tests]

Interact

Audio element with mp3 file

Ogg Vorbis audio format

[Feat] [Tests]

Interact

Audio element with ogg vorbis file

Opus

[Feat] [Tests]

Interact

Audio element with opus file

Wav audio format

[Feat] [Tests]

Interact

Audio element with wav file

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

WOFF - Web Open Font Format

[Feat] [Tests]

Visual

Windsong font

WOFF 2.0 - Web Open Font 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.

WebVTT - Web Video Text Tracks

[Feat] [Tests]

Interact

Must say "WebVTT Success!" if supported

Video with controls and WebVTT file

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

Test CSS transform on SVG

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

Test for SVG image with embedded PNG

Visual-square

SVG favicons

[Feat] [Tests]

Interact

CSS image-set [unoff]

[Feat] [Tests]

CSS Canvas Drawings [unoff]

[Feat] [Tests]

Auto

'getCSSCanvasContext' in document

CSS Containment [unoff]

[Feat] [Tests]

Auto

CSS.supports test for contain: strict

CSS Motion Path [unoff]

[Feat] [Tests]

Auto

motion-path: path("M900,190 L993,245;")

Auto

motion-offset: 50%

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'

:indeterminate CSS pseudo-class [unoff]

[Feat] [Tests]

Visual

Visual

Visual

CSS scrollbar styling [unoff]

[Feat] [Tests]

Visual

Should have green & lime scrollbar

CSS text-stroke and text-fill [unoff]

[Feat] [Tests]

Visual

green stroked text
text-stroke: 2px lime;

Visual

green stroked text

-webkit-text-stroke

-webkit-text-stroke: 2px lime;

background-position-x & background-position-y [unoff]

[Feat] [Tests]

Visual-square

Test for background-position-x:30px;

Visual-square

Test for background-position-y:30px;

Case-insensitive CSS attribute selectors [unoff]

[Feat] [Tests]

Visual-square

CSS Cross-Fade Function [unoff]

[Feat] [Tests]

Visual-square

Test for cross-fade(url(green64x64.png), url(red30x30.png), 0%);

Visual-square

Test for cross-fade(url(red30x30.png), url(green64x64.png), 100%)

Explicit descendant combinator >> [unoff]

[Feat] [Tests]

Visual-square

:has() CSS relational pseudo-class [unoff]

[Feat] [Tests]

Visual-square

CSS line-clamp [unoff]

[Feat] [Tests]

Visual-square

a a a a a a a a a a a a a a a a a a a a a a a a a a a

NOTE: Forced -webkit- prefixes

selector list argument of :nth-child and :nth-last-child CSS pseudo-classes [unoff]

[Feat] [Tests]

Visual-square

CSS zoom [unoff]

[Feat] [Tests]

Visual-square

Test for zoom: 30

:default CSS pseudo-class [unoff]

[Feat] [Tests]

Interact

:optional CSS pseudo-class [unoff]

[Feat] [Tests]

Visual-square

Visual-square

Test to ensure :optional does not apply to a required field

CSS pointer-events (for HTML) [unoff]

[Feat] [Tests]

Auto

Interact

SVG: click should turn it to lime

CSS text-size-adjust [unoff]

[Feat] [Tests]

Auto

text-size-adjust: none; property stays

Crisp edges/pixelated images [unoff]

[Feat] [Tests]

Visual

img / bg / canvas

Test for image-rendering: crisp-edges

Visual

img / bg / canvas - must be crisp

Test for non-standard interpolation-mode: nearest-neighbor;

Visual

img / bg / canvas - must be crisp

Test for image-rendering: optimize-contrast; (non-standard)

Visual

img / bg / canvas - must be crisp

Test for image-rendering: pixelated;

CSS font-smooth [unoff]

[Feat] [Tests]

Visual

should appear lighter
should appear bolder

Visual

should appear lighter
should appear bolder
Test for osx-font-smoothing

CSS Backdrop Filter [unoff]

[Feat] [Tests]

Visual-square

backdrop-filter: invert(1);

CSS Logical Properties [unoff]

[Feat] [Tests]

Visual-square

Test for margin-start:30px

Visual-square

Test for margin-inline-start:30px

Visual-square

Test for text-align:end

IntersectionObserver [unoff]

[Feat] [Tests]

Auto

Test for 'IntersectionObserver' in window

Auto

Resource Hints: Lazyload [unoff]

[Feat] [Tests]

Auto

Test for 'lazyload' in an img element

Interact

KeyboardEvent.charCode [unoff]

[Feat] [Tests]

Interact

Type "a"

Test if event.charCode for the "a" key returns 97 (on keypress event)

KeyboardEvent.which [unoff]

[Feat] [Tests]

Interact

Type "a"

seamless attribute for iframes [unoff]

[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

Offline web applications [unoff]

[Feat] [Tests]

Auto(m)

Modernizr test for: "applicationcache"

Scoped CSS [unoff]

[Feat] [Tests]

Visual-square

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

Document.execCommand() [unoff]

[Feat] [Tests]

Auto

Test for 'execCommand' in document

Interact

TEST

Select text, then button should change background to lime & text to bold

Test for document.execCommand("backColor", false, 'lime');

Filesystem & FileWriter API [unoff]

[Feat] [Tests]

Auto

Check for requestFileSystem in window

Network Information API [unoff]

[Feat] [Tests]

Auto

Test for navigator.connection.type

Auto

Test for navigator.connection.downlinkMax

Interact

Object.observe data binding [unoff]

[Feat] [Tests]

Auto

Permissions API [unoff]

[Feat] [Tests]

Auto

Test for 'permissions' in navigator

Interact

Efficient Script Yielding: setImmediate() [unoff]

[Feat] [Tests]

Auto

Test if setImmediate calls a function

Speech Recognition API [unoff]

[Feat] [Tests]

Auto

Test if "SpeechRecognition" in window is a function

Web SQL Database [unoff]

[Feat] [Tests]

Auto(m)

Modernizr test for: "websqldatabase"

Web Bluetooth [unoff]

[Feat] [Tests]

Auto

Element.scrollIntoViewIfNeeded() [unoff]

[Feat] [Tests]

Visual-square

scrollIntoViewIfNeeded()

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

HTTP Live Streaming (HLS) [unoff]

[Feat] [Tests]

Auto

Interact

WebP image format [unoff]

[Feat] [Tests]

Visual-square

5x5 lime webp image sized at 30x30

SPDY protocol [unoff]

[Feat] [Tests]

EOT - Embedded OpenType fonts [unoff]

[Feat] [Tests]

Visual

Windsong font

XHTML+SMIL animation [unoff]

[Feat] [Tests]

Auto

Animated PNG (APNG) [unoff]

[Feat] [Tests]

Auto

Test for second frame using Canvas element

Visual

Must animate

SVG fonts [unoff]

[Feat] [Tests]

Visual

Windsong font

Most tests by Alexis Deveria, additional contributions by Paul Irish

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