6.1.1 Styling the Cursor: the cursor property

Chapter 6 - Pointing Devices and Keyboards - 6.1.1 Styling the Cursor: the cursor property

Go to the relevant page of the specification.

cursor-001 (interact)

cursor: none
The 'none' cursor value is supported

cursor-002 (interact)

cursor: context-menu
The 'context-menu' cursor value is supported

cursor-003 (interact)

cursor: cell
The 'cell' cursor value is supported

cursor-004 (interact)

cursor: vertical-text
The 'vertical-text' cursor value is supported

cursor-005 (interact)

cursor: alias
The 'alias' cursor value is supported

cursor-006 (interact)

cursor: copy
The 'copy' cursor value is supported

cursor-007 (interact)

cursor: no-drop
The 'no-drop' cursor value is supported

cursor-008 (interact)

cursor: not-allowed
The 'not-allowed' cursor value is supported

cursor-009 (interact)

cursor: grab
The 'grab' cursor value is supported

cursor-010 (interact)

cursor: grabbing
The 'grabbing' cursor value is supported

cursor-011 (interact)

cursor: ew-resize
The 'ew-resize' cursor value is supported

cursor-012 (interact)

cursor: ns-resize
The 'ns-resize' cursor value is supported

cursor-013 (interact)

cursor: nesw-resize
The 'nesw-resize' cursor value is supported

cursor-014 (interact)

cursor: nwse-resize
The 'nwse-resize' cursor value is supported

cursor-015 (interact)

cursor: col-resize
The 'col-resize' cursor value is supported

cursor-016 (interact)

cursor: row-resize
The 'row-resize' cursor value is supported

cursor-017 (interact)

cursor: all-scroll
The 'all-scroll' cursor value is supported

cursor-018 (interact)

cursor: zoom-in
The 'zoom-in' cursor value is supported

cursor-019 (interact)

cursor: zoom-out
The 'zoom-out' cursor value is supported

cursor-020 (interact)

cursor: pointer
The 'pointer' cursor value is supported

cursor-auto-001 (interact)

cursor:auto on text
The 'auto' cursor value does the same as 'text' over text.

cursor-auto-002 (interact)

cursor:auto on links
The 'auto' cursor value does the same as 'text' over text. Links are not special.

cursor-auto-003 (interact)

cursor:auto on non-textual links
The 'auto' cursor value does the same as 'default' over non textual content. Links are not special.

cursor-auto-004 (interact)

cursor:auto on empty space
The 'auto' cursor value does the same as 'text' over text.

cursor-auto-005 (interact, may)

cursor:auto on form elements
The 'auto' cursor value does the same as 'default' over everything other than text, such as form elements.

cursor-border-area (interact)

cursor on the border area
The cursor property is applied over the border area.

cursor-box-004 (interact)

cursor on the margin-box
The cursor property is not applied over the margin box.

cursor-box-005 (interact)

cursor on transparent borders
The cursor property is applied over the border box, even if the border is transparent.

cursor-box-006 (interact)

cursor on border images extending out of the border-box
The cursor property is not applied outside of the border box, even if border images do extend further out.

cursor-box-007 (interact)

cursor on the margin-box
The cursor property is only applied within the border-edge, which follows border-radius.

cursor-content-area (interact)

cursor on the content area
The cursor property is applied over the content area, as it is strictly inside the border edge.

cursor-hover-001 (interact)

cursor and :hover
Checks that the correct cursor is used when :hover appears at the rightmost part of the selector.

cursor-hover-002 (interact)

cursor and :hover on ancestor
Checks that the correct cursor is used when :hover appears in the selector other than at the rightmost part.

cursor-hover-003 (interact)

cursor, :hover and inheritance
Checks that a cursor set on an ancestor with the :hover pseudo class is properly inherited to the hovered child.

cursor-image-001 (image, interact)

Cursor property, url value
Test checks that a PNG image supported as a custom cursor.

cursor-image-002 (image, interact)

Cursor property, url value
Test checks that a PNG image supported as a custom cursor, loaded cross-domain with absolute url.

cursor-image-003 (image, interact, may)

Cursor property, url value
Test checks that an ICO image is supported as a custom cursor.

cursor-image-004 (image, interact, may)

Cursor property, url value
Test checks that an ICO image, with its own hotspot, is supported as a custom cursor.

cursor-image-005 (interact, svg)

Cursor property, url value
Test checks that a fixed size SVG image is supported as a custom cursor.

cursor-image-005-nfs (interact, svg)

Cursor property, url value
Test checks that an SVG image with no fixed size is supported as a custom cursor at the default object size for cursor images.

cursor-image-006 (animated, image, interact)

Cursor property, url value
Test checks that an ANI image, with it's own hotspot, is supported as a custom cursor.

cursor-image-007 (image, interact, svg)

Cursor property, url value
Test checks that a compressed, fixed size SVG image is supported as a custom cursor.

cursor-image-008 (image, interact)

Cursor property, url value fallback
Test checks that non-existent images cause the fallback to be used.

cursor-image-009 (image, interact, invalid)

Cursor property, url value, no fallback
Test checks that a fallback cursor is required.

cursor-image-010 (image, interact)

Cursor property, url value
Test checks that a GIF image is supported as a custom cursor.

cursor-image-011 (image, interact)

Cursor property, url value
Test checks that a GIF image with transparency is supported as a custom cursor.

cursor-image-012 (image, interact)

Cursor property, url value
Test checks that a JPEG/JFIF image is supported as a custom cursor.

cursor-image-013 (image, interact, may)

Cursor property, gradient image value
For cursors, UAs may support gradients, which are part of value type

cursor-image-014 (image, interact, may)

Cursor property, image() value
For cursors, UAs may support the image() function, which are part of value type.

cursor-image-015 (image, interact, may)

Cursor property, image-set() value
For cursors, UAs may support image-set(), which is part of value type

cursor-image-016 (image, interact, may)

Cursor property, cross-fade image value
For cursors, UAs may support cross-fade(), which is part of value type

cursor-image-017 (image, interact)

Cursor property, fallback images
If the user agent cannot handle the first cursor of a list of cursors, it must attempt to handle the second, etc.

cursor-image-018 (image, interact)

Cursor property, fallback keyword
If the user agent cannot handle any user-defined cursor, it must use the cursor keyword at the end of the list.

cursor-image-png-001 (image, interact)

Cursor property, PNG
Test checks that a monochrome (type 0) PNG image, 1 bit/pixel, is supported as a CSS custom cursor.

cursor-image-png-002 (interact)

Cursor property, PNG
Test checks that a black and white PNG image cursor is supported.

cursor-image-png-003 (interact)

Cursor property, PNG
Test checks that a black and white PNG image cursor is supported.

cursor-image-png-004 (interact)

Cursor property, PNG
Test checks that a black and white PNG image cursor is supported.

cursor-image-png-005 (interact)

Cursor property, PNG
Test checks that a black and white PNG image cursor is supported.

cursor-image-png-006 (interact)

Cursor property, PNG
Test checks that an RGB PNG image cursor is supported.

cursor-image-png-007 (interact)

Cursor property, PNG
Test checks that an RGB PNG image cursor is supported.

cursor-image-png-008 (interact)

Cursor property, PNG
Test checks that an indexed PNG image cursor is supported.

cursor-image-png-009 (interact)

Cursor property, PNG
Test checks that an indexed PNG image cursor is supported.

cursor-image-png-010 (interact)

Cursor property, PNG
Test checks that an indexed PNG image cursor is supported.

cursor-image-png-011 (interact)

Cursor property, PNG
Test checks that an indexed PNG image cursor is supported.

cursor-image-png-012 (interact)

Cursor property, PNG
Test checks that a greyscale with alpha PNG image cursor is supported.

cursor-image-png-013 (interact)

Cursor property, PNG
Test checks that a greyscale with alpha PNG image cursor is supported.

cursor-image-png-014 (interact)

Cursor property, PNG
Test checks that an RGB with alpha PNG image cursor is supported.

cursor-image-png-015 (interact)

Cursor property, PNG
Test checks that an RGB with alpha PNG image cursor is supported.

cursor-image-png-016 (interact)

Cursor property, PNG
Test checks that an interlaced black and white PNG image cursor is supported.

cursor-image-png-017 (interact)

Cursor property, PNG
Test checks that an interlaced black and white PNG image cursor is supported.

cursor-image-png-018 (interact)

Cursor property, PNG
Test checks that an interlaced black and white PNG image cursor is supported.

cursor-image-png-019 (interact)

Cursor property, PNG
Test checks that an interlaced black and white PNG image cursor is supported.

cursor-image-png-020 (interact)

Cursor property, PNG
Test checks that an interlaced black and white PNG image cursor is supported.

cursor-image-png-021 (interact)

Cursor property, PNG
Test checks that an interlaced RGB PNG image cursor is supported.

cursor-image-png-022 (interact)

Cursor property, PNG
Test checks that an interlaced RGB PNG image cursor is supported.

cursor-image-png-023 (interact)

Cursor property, PNG
Test checks that an interlaced, indexed PNG image cursor is supported.

cursor-image-png-024 (interact)

Cursor property, PNG
Test checks that an interlaced, indexed PNG image cursor is supported.

cursor-image-png-025 (interact)

Cursor property, PNG
Test checks that an interlaced, indexed PNG image cursor is supported.

cursor-image-png-026 (interact)

Cursor property, PNG
Test checks that an interlaced, indexed PNG image cursor is supported.

cursor-image-png-027 (interact)

Cursor property, PNG
Test checks that an interlaced greyscale with alpha PNG image cursor is supported.

cursor-image-png-028 (interact)

Cursor property, PNG
Test checks that an interlaced greyscale with alpha PNG image cursor is supported.

cursor-image-png-029 (interact)

Cursor property, PNG
Test checks that an interlaced RGB with alpha PNG image cursor is supported.

cursor-image-png-030 (interact)

Cursor property, PNG
Test checks that an interlaced RGB with alpha PNG image cursor is supported.

cursor-image-png-031 (interact)

Cursor property, PNG
Test checks that a greyscale PNG image cursor with transparency is supported.

cursor-image-png-032 (interact)

Cursor property, PNG
Test checks that a greyscale PNG image cursor with transparency is supported.

cursor-image-png-033 (interact)

Cursor property, PNG
Test checks that an RGB PNG image cursor with transparency is supported.

cursor-image-png-034 (interact)

Cursor property, PNG
Test checks that an RGB PNG image cursor with transparency is supported.

cursor-image-png-035 (interact)

Cursor property, PNG
Test checks that an RGB PNG image cursor with transparency is supported.

cursor-image-png-036 (interact)

Cursor property, PNG
Test checks that an indexed PNG image cursor with transparency is supported.

cursor-image-png-037 (interact)

Cursor property, PNG
Test checks that an indexed PNG image cursor with transparency is supported.

cursor-image-png-038 (interact)

Cursor property, PNG
Test checks that gamma correction on PNG image cursor is correct.

cursor-image-png-039 (interact)

Cursor property, PNG
Test checks that gamma correction on PNG image cursor is correct.

cursor-image-png-040 (interact)

Cursor property, PNG
Test checks that gamma correction on PNG image cursor is correct.

cursor-image-png-041 (interact)

Cursor property, PNG
Test checks invalid PNG image cursor skipped, fallback used.

cursor-image-png-042 (interact)

Cursor property, PNG
Test checks invalid PNG image cursor skipped, fallback used.

cursor-image-png-043 (interact)

Cursor property, PNG
Test checks invalid PNG image cursor skipped, fallback used.

cursor-outline-area (interact)

cursor on outline
The cursor property is not applied over outline.

cursor-padding-area (interact)

cursor on the padding area
The cursor property is applied over the padding area, as it is strictly inside the border edge.

cursor-text-001 (interact, may)

cursor:text with vertical text
User agents may automatically display a horizontal I-beam/cursor (e.g. same as the vertical-text keyword) for vertical text.

cursor-text-002 (interact, may)

cursor:text with rotated text
User agents may automatically display any angle of I-beam/cursor for text that is rendered at any particular angle

cursor-x-y-001 (dom, interact)

cursor hotspot coordinates
The coordnates of the cursor hotspot can be specified.

cursor-x-y-002 (dom, interact)

cursor hotspot coordinates clamping
The coordinates of the hotspot must be clamped if they fall outside of the range of the image.

cursor-x-y-003 (dom, interact)

cursor hotspot coordinates clamping
The coordinates of the hotspot must be clamped if they fall outside of the range of the image, including negative numbers.

select-cursor-001-manual (HTMLonly, interact)

cursor property and select element
Hovering the pointer over a select menu on top of an element with a cursor set should not display said cursor