CSS2.1 Test Suite

User interface (352 tests)

Test Flags
18.1 Cursors: the 'cursor' property
Cursor using the 'url()' function
  • Cursor 'uri' results in the cursor that is specified by the URI.
GU
Cursor set to 'auto'
  • Cursor 'auto' results in a cursor that is determined by the user agent according to the context.
U
Cursor set to 'crosshair'
  • Cursor 'crosshair' results in a crosshair cursor resembling a '+' sign.
U
Cursor set to 'default'
  • Cursor 'default' results in the default cursor.
U
Cursor set to 'pointer'
  • Cursor 'pointer' results in a cursor that indicates an element can be clicked.
U
Cursor set to 'move'
  • Cursor 'move' results in a cursor that indicates an element can be moved.
U
Cursor set to 'e-resize'
  • Cursor 'e-resize' results in a cursor that indicates the east edge of an element can be moved.
U
Cursor set to 'ne-resize'
  • Cursor 'ne-resize' results in a cursor that indicates the north-east corner of an element can be moved.
U
Cursor set to 'nw-resize'
  • Cursor 'nw-resize' results in a cursor that indicates the north-west corner of an element can be moved.
U
Cursor set to 'n-resize'
  • Cursor 'n-resize' results in a cursor that indicates the north edge of an element can be moved.
U
Cursor set to 'se-resize'
  • Cursor 'se-resize' results in a cursor that indicates the south-east corner of an element can be moved.
U
Cursor set to 'sw-resize'
  • Cursor 'sw-resize' results in a cursor that indicates the south-west corner of an element can be moved.
U
Cursor set to 's-resize'
  • Cursor 's-resize' results in a cursor that indicates the south edge of an element can be moved.
U
Cursor set to 'w-resize'
  • Cursor 'w-resize' results in a cursor that indicates the west edge of an element can be moved.
U
Cursor set to 'text'
  • Cursor 'text' results in a cursor that indicates user can select or input text.
U
Cursor set to 'wait'
  • Cursor 'wait' results in a cursor that indicates the page is busy and user needs to wait.
U
Cursor set to 'help'
  • Cursor 'help' results in a cursor that indicates help information is available.
U
Cursor set to 'progress'
  • Cursor 'progress' results in a cursor that indicates something is in progression.
U
Cursor set to 'inherit'
  • Cursor 'inherit' results in the same cursor value as the parent element has.
U
cursor - <uri> value
  • If the user agent cannot handle an user-defined cursor, it must use the generic cursor at the end of the list. The auto value should make UA determine the cursor to display based on the current context.
U
cursor - <uri> value
  • When an user-defined cursor is provided, a generic cursor value must be provided at the end of the list.
UI
cursor - set to an invalid value
  • The property 'cursor', when set to an invalid value or an illegal value, must be ignored. Then, instead, the cursor to display should be based on the current context.
UI
Cursor applied to element with 'display' set to 'table-row-group'
  • The 'cursor' property applies to elements with a display of table-row-group.
U
Cursor applied to element with 'display' set to 'table-header-group'
  • The 'cursor' property applies to elements with a display of table-header-group.
U
Cursor applied to element with 'display' set to 'table-footer-group'
  • The 'cursor' property applies to elements with a display of table-footer-group.
U
Cursor applied to element with 'display' set to 'table-row'
  • The 'cursor' property applies to elements with a display of table-row.
U
Cursor applied to element with 'display' set to 'table-column-group'
  • The 'cursor' property does not apply to elements with a display of table-column-group.
U
Cursor applied to element with 'display' set to 'table-column'
  • The 'cursor' property does not apply to elements with a display of table-column.
U
Cursor applied to element with 'display' set to 'table-cell'
  • The 'cursor' property applies to elements with a display of table-cell.
U
Cursor applied to element with 'display' set to 'inline'
  • The 'cursor' property applies to elements with a display of inline.
U
Cursor applied to element with 'display' set to 'block'
  • The 'cursor' property applies to elements with a display of block.
U
Cursor applied to element with 'display' set to 'list-item'
  • The 'cursor' property applies to elements with a 'display' set to 'list-item'.
U
Cursor applied to element with 'display' set to 'run-in'
  • The 'cursor' property applies to elements with a display of run-in.
U
Cursor applied to element with 'display' set to 'inline-block'
  • The 'cursor' property applies to elements with a display of inline-block.
U
Cursor applied to element with 'display' set to 'table'
  • The 'cursor' property applies to elements with a display of table.
U
Cursor applied to element with 'display' set to 'inline-table'
  • The 'cursor' property applies to elements with a display of inline-table.
U
Cursor applied to element with 'display' set to 'table-caption'
  • The 'cursor' property applies to elements with a display of table-caption.
U
Cursor specified with missing image for the url()
  • When a specified URL cursor doesn't exist, the next specified cursor is used.
U
Url cursor
  • URI cursor is applied correctly.
GU
18.2 System Colors
18.3 User preferences for fonts
18.4 Dynamic outlines: the 'outline' property
Outline: one value with outline-color
  • Outline value specified in the form of 'color' is correctly applied.
Outline: one value with outline-style
  • Outline value specified in the form of 'style' is correctly applied.
Outline: one value with outline-width
  • Outline value specified in the form of 'width' is correctly applied.
Outline: two values in the order of 'outline-color outline-style'
  • Outline value specified in the form of 'color style' is correctly applied.
Outline: two values in the order of 'outline-color outline-width'
  • Outline value specified in the form of 'color width' is correctly applied.
Outline: two values in the order of 'outline-style outline-color'
  • Outline value specified in the form of 'style color' is correctly applied.
Outline: two values in the order of 'outline-style outline-width'
  • Outline value specified in the form of 'style width' is correctly applied.
Outline: two values in the order of 'outline-width outline-color'
  • Outline value specified in the form of 'width color' is correctly applied.
Outline: two values in the order of 'outline-width outline-style'
  • Outline value specified in the form of 'width style' is correctly applied.
Outline: three values in the order of 'outline-color outline-style outline-width'
  • Outline value specified in the form of 'color style width' is correctly applied.
Outline: three values in the order of 'outline-color outline-width outline-style'
  • Outline value specified in the form of 'color width style' is correctly applied.
Outline: three values in the order of 'outline-style outline-color outline-width'
  • Outline value specified in the form of 'style color width' is correctly applied.
Outline: three values in the order of 'outline-style outline-width outline-color'
  • Outline value specified in the form of 'style width color' is correctly applied.
Outline: three values in the order of 'outline-width outline-color outline-style'
  • Outline specified in the form of 'width color style' is correctly applied.
Outline: three values in the order of 'outline-width outline-style outline-color'
  • Outline value specified in the form of 'width style color' is correctly applied.
Outline: inherit with one value
  • Outline with value inherit uses its parent's outline values (1 value).
Outline: inherit with two values
  • Outline with value inherit uses its parent's outline values (2 values).
Outline: inherit with three values
  • Outline with value inherit uses its parent's outline values (3 values).
Outline applied to element with display table-row-group
  • The 'outline' property applies to elements with a display of table-row-group.
Outline applied to element with display table-header-group
  • The 'outline' property applies to elements with a display of table-header-group.
Outline applied to element with display table-footer-group
  • The 'outline' property applies to elements with a display of table-footer-group.
Outline applied to element with display table-row
  • The 'outline' property applies to elements with a display of table-row.
Outline applied to element with display table-column-group
  • The 'outline' property does not apply to elements with a display of table-column-group.
Outline applied to element with display table-column
  • The 'outline' property does not apply to elements with a display of table-column.
Outline applied to element with display table-cell
  • The 'outline' property applies to elements with a display of table-cell.
Outline applied to element with display inline
  • The 'outline' property applies to elements with a display of inline.
Outline applied to element with display block
  • The 'outline' property applies to elements with a display of block.
Outline applied to element with display list-item
  • The 'outline' property applies to elements with a display of list-item.
Outline applied to element with display run-in
  • The 'outline' property applies to elements with a display of run-in.
Outline applied to element with display inline-block
  • The 'outline' property applies to elements with a display of inline-block.
Outline applied to element with display table
  • The 'outline' property applies to elements with a display of table.
Outline applied to element with display inline-table
  • The 'outline' property applies to elements with a display of inline-table.
Outline applied to element with display table-caption
  • The 'outline' property applies to elements with a display of table-caption.
Outline-color set to '#00000'
  • Outline color #00000 (invalid) falls back to a default color.
I
Outline-color set to '#000000'
  • Outline color #000000 renders the correct outline color on the element.
Outline-color set to '#010101'
  • Outline color #010101 renders the correct outline color on the element.
Outline-color set to '#999999'
  • Outline color #999999 renders the correct outline color on the element.
Outline-color set to '#fefefe'
  • Outline color #fefefe renders the correct outline color on the element.
Outline-color set to '#ffffff'
  • Outline color #ffffff renders the correct outline color on the element.
Outline-color set to '#1000000'
  • Outline color #1000000 (invalid) falls back to a default color.
I
Outline-color set to '#fgfgfg'
  • Outline color #fgfgfg (invalid) falls back to a default color.
I
Outline-color set to '#010000'
  • Outline color #010000 renders the correct outline color on the element.
Outline-color set to '#990000'
  • Outline color #990000 renders the correct outline color on the element.
Outline-color set to '#fe0000'
  • Outline color #fe0000 renders the correct outline color on the element.
Outline-color set to '#ff0000'
  • Outline color #ff0000 renders the correct outline color on the element.
Outline-color set to '#fg0000'
  • Outline color #fg0000 (invalid) falls back to a default color.
I
Outline-color set to '#000100'
  • Outline color #000100 renders the correct outline color on the element.
Outline-color set to '#009900'
  • Outline color #009900 renders the correct outline color on the element.
Outline-color set to '#00fe00'
  • Outline color #00fe00 renders the correct outline color on the element.
Outline-color set to '#00ff00'
  • Outline color #00ff00 renders the correct outline color on the element.
Outline-color set to '#00fg00'
  • Outline color #00fg00 (invalid) falls back to a default color.
I
Outline-color set to '#000001'
  • Outline color #000001 renders the correct outline color on the element.
Outline-color set to '#000099'
  • Outline color #000099 renders the correct outline color on the element.
Outline-color set to '#0000fe'
  • Outline color #0000fe renders the correct outline color on the element.
Outline-color set to '#0000ff'
  • Outline color #0000ff renders the correct outline color on the element.
Outline-color set to '#0000fg'
  • Outline color #0000fg (invalid) falls back to a default color.
I
Outline-color set to '#00'
  • Outline color #00 (invalid) falls back to a default color.
I
Outline-color set to '#000'
  • Outline color #000 renders the correct outline color on the element.
Outline-color set to '#111'
  • Outline color #111 renders the correct outline color on the element.
Outline-color set to '#999'
  • Outline color #999 renders the correct outline color on the element.
Outline-color set to '#eee'
  • Outline color #eee renders the correct outline color on the element.
Outline-color set to '#fff'
  • Outline color #fff renders the correct outline color on the element.
Outline-color set to '#1000'
  • Outline color #1000 (invalid) falls back to a default color.
I
Outline-color set to '#ggg'
  • Outline color #ggg (invalid) falls back to a default color.
I
Outline-color set to '#100'
  • Outline color #100 renders the correct outline color on the element.
Outline-color set to '#900'
  • Outline color #900 renders the correct outline color on the element.
Outline-color set to '#e00'
  • Outline color #e00 renders the correct outline color on the element.
Outline-color set to '#f00'
  • Outline color #f00 renders the correct outline color on the element.
Outline-color set to '#g00'
  • Outline color #g00 (invalid) falls back to a default color.
I
Outline-color set to '#010'
  • Outline color #010 renders the correct outline color on the element.
Outline-color set to '#090'
  • Outline color #090 renders the correct outline color on the element.
Outline-color set to '#0e0'
  • Outline color #0e0 renders the correct outline color on the element.
Outline-color set to '#0f0'
  • Outline color #0f0 renders the correct outline color on the element.
Outline-color set to '#0g0'
  • Outline color #0g0 (invalid) falls back to a default color.
I
Outline-color set to '#001'
  • Outline color #001 renders the correct outline color on the element.
Outline-color set to '#009'
  • Outline color #009 renders the correct outline color on the element.
Outline-color set to '#00e'
  • Outline color #00e renders the correct outline color on the element.
Outline-color set to '#00f'
  • Outline color #00f renders the correct outline color on the element.
Outline-color set to '#00g'
  • Outline color #00g (invalid) falls back to a default color.
I
Outline-color set to 'rgb(-1%, -1%, -1%)'
  • Outline color rgb(-1%, -1%, -1%) renders the correct outline color on the element.
I
Outline-color set to 'rgb(0%, 0%, 0%)'
  • Outline color rgb(0%, 0%, 0%) renders the correct outline color on the element.
Outline-color set to 'rgb(1%, 1%, 1%)'
  • Outline color rgb(1%, 1%, 1%) renders the correct outline color on the element.
Outline-color set to 'rgb(-0%, -0%, -0%)'
  • Outline color rgb(-0%, -0%, -0%) renders the correct outline color on the element.
Outline-color set to 'rgb(+0%, +0%, +0%)'
  • Outline color rgb(+0%, +0%, +0%) renders the correct outline color on the element.
Outline-color set to 'rgb(50%, 50%, 50%)'
  • Outline color rgb(50%, 50%, 50%) renders the correct outline color on the element.
Outline-color set to 'rgb(+50%, +50%, +50%)'
  • Outline color rgb(+50%, +50%, +50%) renders the correct outline color on the element.
Outline-color set to 'rgb(99%, 99%, 99%)'
  • Outline color rgb(99%, 99%, 99%) renders the correct outline color on the element.
Outline-color set to 'rgb(100%, 100%, 100%)'
  • Outline color rgb(100%, 100%, 100%) renders the correct outline color on the element.
Outline-color set to 'rgb(+100%, +100%, +100%)'
  • Outline color rgb(+100%, +100%, +100%) renders the correct outline color on the element.
Outline-color set to 'rgb(101%, 101%, 101%)'
  • Outline color rgb(101%, 101%, 101%) renders the correct outline color on the element.
I
Outline-color set to 'rgb(-1, -1, -1)'
  • Outline color rgb(-1, -1, -1) renders the correct outline color on the element.
I
Outline-color set to 'rgb(0, 0, 0)'
  • Outline color rgb(0, 0, 0) renders the correct outline color on the element.
Outline-color set to 'rgb(1, 1, 1)'
  • Outline color rgb(1, 1, 1) renders the correct outline color on the element.
Outline-color set to 'rgb(-0, -0, -0)'
  • Outline color rgb(-0, -0, -0) renders the correct outline color on the element.
Outline-color set to 'rgb(+0, +0, +0)'
  • Outline color rgb(+0, +0, +0) renders the correct outline color on the element.
Outline-color set to 'rgb(128, 128, 128)'
  • Outline color rgb(128, 128, 128) renders the correct outline color on the element.
Outline-color set to 'rgb(+128, +128, +128)'
  • Outline color rgb(+128, +128, +128) renders the correct outline color on the element.
Outline-color set to 'rgb(254, 254, 254)'
  • Outline color rgb(254, 254, 254) renders the correct outline color on the element.
Outline-color set to 'rgb(255, 255, 255)'
  • Outline color rgb(255, 255, 255) renders the correct outline color on the element.
Outline-color set to 'rgb(+255, +255, +255)'
  • Outline color rgb(+255, +255, +255) renders the correct outline color on the element.
Outline-color set to 'rgb(256, 256, 256)'
  • Outline color rgb(256, 256, 256) renders the correct outline color on the element.
I
Outline-color set to 'rgb(-1%, 0%, 0%)'
  • Outline color rgb(-1%, 0%, 0%) renders the correct outline color on the element.
I
Outline-color set to 'rgb(1%, 0%, 0%)'
  • Outline color rgb(1%, 0%, 0%) renders the correct outline color on the element.
Outline-color set to 'rgb(-0%, 0%, 0%)'
  • Outline color rgb(-0%, 0%, 0%) renders the correct outline color on the element.
Outline-color set to 'rgb(+0%, 0%, 0%)'
  • Outline color rgb(+0%, 0%, 0%) renders the correct outline color on the element.
Outline-color set to 'rgb(50%, 0%, 0%)'
  • Outline color rgb(50%, 0%, 0%) renders the correct outline color on the element.
Outline-color set to 'rgb(+50%, 0%, 0%)'
  • Outline color rgb(+50%, 0%, 0%) renders the correct outline color on the element.
Outline-color set to 'rgb(99%, 0%, 0%)'
  • Outline color rgb(99%, 0%, 0%) renders the correct outline color on the element.
Outline-color set to 'rgb(100%, 0%, 0%)'
  • Outline color rgb(100%, 0%, 0%) renders the correct outline color on the element.
Outline-color set to 'rgb(+100%, 0%, 0%)'
  • Outline color rgb(+100%, 0%, 0%) renders the correct outline color on the element.
Outline-color set to 'rgb(101%, 0%, 0%)'
  • Outline color rgb(101%, 0%, 0%) renders the correct outline color on the element.
I
Outline-color set to 'rgb(-1, 0, 0)'
  • Outline color rgb(-1, 0, 0) renders the correct outline color on the element.
I
Outline-color set to 'rgb(1, 0, 0)'
  • Outline color rgb(1, 0, 0) renders the correct outline color on the element.
Outline-color set to 'rgb(-0, 0, 0)'
  • Outline color rgb(-0, 0, 0) renders the correct outline color on the element.
Outline-color set to 'rgb(+0, 0, 0)'
  • Outline color rgb(+0, 0, 0) renders the correct outline color on the element.
Outline-color set to 'rgb(128, 0, 0)'
  • Outline color rgb(128, 0, 0) renders the correct outline color on the element.
Outline-color set to 'rgb(+128, 0, 0)'
  • Outline color rgb(+128, 0, 0) renders the correct outline color on the element.
Outline-color set to 'rgb(254, 0, 0)'
  • Outline color rgb(254, 0, 0) renders the correct outline color on the element.
Outline-color set to 'rgb(255, 0, 0)'
  • Outline color rgb(255, 0, 0) renders the correct outline color on the element.
Outline-color set to 'rgb(+255, 0, 0)'
  • Outline color rgb(+255, 0, 0) renders the correct outline color on the element.
Outline-color set to 'rgb(256, 0, 0)'
  • Outline color rgb(256, 0, 0) renders the correct outline color on the element.
I
Outline-color set to 'rgb(0%, -1%, 0%)'
  • Outline color rgb(0%, -1%, 0%) renders the correct outline color on the element.
I
Outline-color set to 'rgb(0%, 1%, 0%)'
  • Outline color rgb(0%, 1%, 0%) renders the correct outline color on the element.
Outline-color set to 'rgb(0%, -0%, 0%)'
  • Outline color rgb(0%, -0%, 0%) renders the correct outline color on the element.
Outline-color set to 'rgb(0%, +0%, 0%)'
  • Outline color rgb(0%, +0%, 0%) renders the correct outline color on the element.
Outline-color set to 'rgb(0%, 50%, 0%)'
  • Outline color rgb(0%, 50%, 0%) renders the correct outline color on the element.
Outline-color set to 'rgb(0%, +50%, 0%)'
  • Outline color rgb(0%, +50%, 0%) renders the correct outline color on the element.
Outline-color set to 'rgb(0%, 99%, 0%)'
  • Outline color rgb(0%, 99%, 0%) renders the correct outline color on the element.
Outline-color set to 'rgb(0%, 100%, 0%)'
  • Outline color rgb(0%, 100%, 0%) renders the correct outline color on the element.
Outline-color set to 'rgb(0%, +100%, 0%)'
  • Outline color rgb(0%, +100%, 0%) renders the correct outline color on the element.
Outline-color set to 'rgb(0%, 101%, 0%)'
  • Outline color rgb(0%, 101%, 0%) renders the correct outline color on the element.
I
Outline-color set to 'rgb(0, -1, 0)'
  • Outline color rgb(0, -1, 0) renders the correct outline color on the element.
I
Outline-color set to 'rgb(0, 1, 0)'
  • Outline color rgb(0, 1, 0) renders the correct outline color on the element.
Outline-color set to 'rgb(0, -0, 0)'
  • Outline color rgb(0, -0, 0) renders the correct outline color on the element.
Outline-color set to 'rgb(0, +0, 0)'
  • Outline color rgb(0, +0, 0) renders the correct outline color on the element.
Outline-color set to 'rgb(0, 128, 0)'
  • Outline color rgb(0, 128, 0) renders the correct outline color on the element.
Outline-color set to 'rgb(0, +128, 0)'
  • Outline color rgb(0, +128, 0) renders the correct outline color on the element.
Outline-color set to 'rgb(0, 254, 0)'
  • Outline color rgb(0, 254, 0) renders the correct outline color on the element.
Outline-color set to 'rgb(0, 255, 0)'
  • Outline color rgb(0, 255, 0) renders the correct outline color on the element.
Outline-color set to 'rgb(0, +255, 0)'
  • Outline color rgb(0, +255, 0) renders the correct outline color on the element.
Outline-color set to 'rgb(0, 256, 0)'
  • Outline color rgb(0, 256, 0) renders the correct outline color on the element.
I
Outline-color set to 'rgb(0%, 0%, -1%)'
  • Outline color rgb(0%, 0%, -1%) renders the correct outline color on the element.
I
Outline-color set to 'rgb(0%, 0%, 1%)'
  • Outline color rgb(0%, 0%, 1%) renders the correct outline color on the element.
Outline-color set to 'rgb(0%, 0%, -0%)'
  • Outline color rgb(0%, 0%, -0%) renders the correct outline color on the element.
Outline-color set to 'rgb(0%, 0%, +0%)'
  • Outline color rgb(0%, 0%, +0%) renders the correct outline color on the element.
Outline-color set to 'rgb(0%, 0%, 50%)'
  • Outline color rgb(0%, 0%, 50%) renders the correct outline color on the element.
Outline-color set to 'rgb(0%, 0%, +50%)'
  • Outline color rgb(0%, 0%, +50%) renders the correct outline color on the element.
Outline-color set to 'rgb(0%, 0%, 99%)'
  • Outline color rgb(0%, 0%, 99%) renders the correct outline color on the element.
Outline-color set to 'rgb(0%, 0%, 100%)'
  • Outline color rgb(0%, 0%, 100%) renders the correct outline color on the element.
Outline-color set to 'rgb(0%, 0%, +100%)'
  • Outline color rgb(0%, 0%, +100%) renders the correct outline color on the element.
Outline-color set to 'rgb(0%, 0%, 101%)'
  • Outline color rgb(0%, 0%, 101%) renders the correct outline color on the element.
I
Outline-color set to 'rgb(0, 0, -1)'
  • Outline color rgb(0, 0, -1) renders the correct outline color on the element.
I
Outline-color set to 'rgb(0, 0, 1)'
  • Outline color rgb(0, 0, 1) renders the correct outline color on the element.
Outline-color set to 'rgb(0, 0, -0)'
  • Outline color rgb(0, 0, -0) renders the correct outline color on the element.
Outline-color set to 'rgb(0, 0, +0)'
  • Outline color rgb(0, 0, +0) renders the correct outline color on the element.
Outline-color set to 'rgb(0, 0, 128)'
  • Outline color rgb(0, 0, 128) renders the correct outline color on the element.
Outline-color set to 'rgb(0, 0, +128)'
  • Outline color rgb(0, 0, +128) renders the correct outline color on the element.
I
Outline-color set to 'rgb(0, 0, 254)'
  • Outline color rgb(0, 0, 254) renders the correct outline color on the element.
Outline-color set to 'rgb(0, 0, 255)'
  • Outline color rgb(0, 0, 255) renders the correct outline color on the element.
Outline-color set to 'rgb(0, 0, +255)'
  • Outline color rgb(0, 0, +255) renders the correct outline color on the element.
I
Outline-color set to 'rgb(0, 0, 256)'
  • Outline color rgb(0, 0, 256) renders the correct outline color on the element.
Outline-color set to 'aqua'
  • Outline color aqua renders the correct outline color on the element.
Outline-color set to 'black'
  • Outline color black renders the correct outline color on the element.
Outline-color set to 'blue'
  • Outline color blue renders the correct outline color on the element.
Outline-color set to 'fuchsia'
  • Outline color fuchsia renders the correct outline color on the element.
Outline-color set to 'gray'
  • Outline color gray renders the correct outline color on the element.
Outline-color set to 'green'
  • Outline color green renders the correct outline color on the element.
Outline-color set to 'lime'
  • Outline color lime renders the correct outline color on the element.
Outline-color set to 'maroon'
  • Outline color maroon renders the correct outline color on the element.
Outline-color set to 'navy'
  • Outline color navy renders the correct outline color on the element.
Outline-color set to 'olive'
  • Outline color olive renders the correct outline color on the element.
Outline-color set to 'orange'
  • Outline color orange renders the correct outline color on the element.
Outline-color set to 'purple'
  • Outline color purple renders the correct outline color on the element.
Outline-color set to 'red'
  • Outline color red renders the correct outline color on the element.
Outline-color set to 'silver'
  • Outline color silver renders the correct outline color on the element.
Outline-color set to 'teal'
  • Outline color teal renders the correct outline color on the element.
Outline-color set to 'white'
  • Outline color white renders the correct outline color on the element.
Outline-color set to 'yellow'
  • Outline color yellow renders the correct outline color on the element.
Outline color set to 'invert'
  • Outline color 'invert' makes outline visible on any background color.
Outline-color set to 'inherit'
  • Outline color inherit renders the correct outline color on the element.
Outline-color applied to element with display table-row-group
  • The 'outline-color' property applies to elements with a display of table-row-group.
Outline-color applied to element with display table-header-group
  • The 'outline-color' property applies to elements with a display of table-header-group.
Outline-color applied to element with display table-footer-group
  • The 'outline-color' property applies to elements with a display of table-footer-group.
Outline-color applied to element with display table-row
  • The 'outline-color' property applies to elements with a display of table-row.
Outline-color applied to element with display table-column-group
  • The 'outline-color' property does not apply to elements with a display of table-column-group.
Outline-color applied to element with display table-column
  • The 'outline-color' property does not apply to elements with a display of table-column.
Outline-color applied to element with display table-cell
  • The 'outline-color' property applies to elements with a display of table-cell.
Outline-color applied to element with display inline
  • The 'outline-color' property applies to elements with a display of inline.
Outline-color applied to element with display block
  • The 'outline-color' property applies to elements with a display of block.
Outline-color applied to element with display list-item
  • The 'outline-color' property applies to elements with a display of list-item.
Outline-color applied to element with display run-in
  • The 'outline-color' property applies to elements with a display of run-in.
Outline-color applied to element with display inline-block
  • The 'outline-color' property applies to elements with a display of inline-block.
Outline-color applied to element with display table
  • The 'outline-color' property applies to elements with a display of table.
Outline-color applied to element with display inline-table
  • The 'outline-color' property applies to elements with a display of inline-table.
Outline-color applied to element with display table-caption
  • The 'outline-color' property applies to elements with a display of table-caption.
Outline-top is not valid
  • Outline does not support setting individual values for the outline like 'outline-top'.
I
Outline-left is not valid
  • Outline does not support setting individual values for the outline like 'outline-left'.
I
Outline-bottom is not valid
  • Outline does not support setting individual values for the outline like 'outline-bottom'.
I
Outline-right is not valid
  • Outline does not support setting individual values for the outline like 'outline-right'.
I
Outlines and box layout
  • Outlines do not affect box layout.
Outline and text layout
  • Outlines do not affect text layout.
Outline and border placement
  • Outline is drawn directly outside of the border.
Outline is connected and closed
  • Outline is connected and encloses the appropriate content.
Outline is the same on all sides
  • Outline is the same on all sides.
Outline-width is changed via script
  • Scripts can change outline width, without causing a reflow.
OU
Outline overlaps with other elements
  • Outline can overlap with other elements.
Outline-style set to 'none'
  • Outline style 'none' results in no outline.
Outline-style set to 'dotted'
  • Outline style 'dotted' results in a dotted outline.
Outline-style set to 'dashed'
  • Outline style 'dashed' results in a dashed outline.
Outline-style set to 'solid'
  • Outline style 'solid' results in a solid outline.
Outline-style set to 'double'
  • Outline style 'double' results in a double-line outline.
Outline-style set to 'groove'
  • Outline style 'groove' results in a carved outline.
Outline-style set to 'ridge'
  • Outline style 'ridge' results in a ridged outline (as if it were a bump around the box).
Outline-style set to 'inset'
  • Outline style 'inset' results in a sunken box.
Outline-style set to 'outset'
  • Outline style 'outset' results in a raised box.
Outline-style set to 'inherit'
  • Outline-style with value 'inherit' uses its parent's outline-style value.
Outline-style applied to element with display table-row-group
  • The 'outline-style' property applies to elements with a display of table-row-group.
Outline-style applied to element with display table-header-group
  • The 'outline-style' property applies to elements with a display of table-header-group.
Outline-style applied to element with display table-footer-group
  • The 'outline-style' property applies to elements with a display of table-footer-group.
Outline-style applied to element with display table-row
  • The 'outline-style' property applies to elements with a display of table-row.
Outline-style applied to element with display table-column-group
  • The 'outline-style' property does not apply to elements with a display of table-column-group.
Outline-style applied to element with display table-column
  • The 'outline-style' property does not apply to elements with a display of table-column.
Outline-style applied to element with display table-cell
  • The 'outline-style' property applies to elements with a display of table-cell.
Outline-style applied to element with display inline
  • The 'outline-style' property applies to elements with a display of inline.
Outline-style applied to element with display block
  • The 'outline-style' property applies to elements with a display of block.
Outline-style applied to element with display list-item
  • The 'outline-style' property applies to elements with a display of list-item.
Outline-style applied to element with display run-in
  • The 'outline-style' property applies to elements with a display of run-in.
Outline-style applied to element with display inline-block
  • The 'outline-style' property applies to elements with a display of inline-block.
Outline-style applied to element with display table
  • The 'outline-style' property applies to elements with a display of table.
Outline-style applied to element with display inline-table
  • The 'outline-style' property applies to elements with a display of inline-table.
Outline-style applied to element with display table-caption
  • The 'outline-style' property applies to elements with a display of table-caption.
Outline-style set to 'hidden'
  • Outline style does not support the 'border-style' value of 'hidden'.
Outline-width - outline the box with a -1px solid outline
  • The 'outline-width' property does not support a negative length value in pixels and is ignored.
I
Outline-width set to a minimum value for pixels
  • The 'outline-width' property supports a minimum length value in pixels that sets the width of the outline.
Outline-width - outline the box with a 1px solid outline
  • The 'outline-width' property supports a minimum plus one length value in pixels that sets the width of the outline.
Outline-width - outline the box with a -0px solid outline
  • The 'outline-width' property supports a minimum length value in pixels that that has a minus sign before it.
Outline-width - outline the box with a +0px solid outline
  • The 'outline-width' property supports a minimum length value in pixels that that has a plus sign before it.
Outline-width - outline the box with a 5px solid outline
  • The 'outline-width' property supports a nominal length value in pixels that sets the width of the outline.
Outline-width - outline the box with a +5px solid outline
  • The 'outline-width' property supports a nominal length value in pixels that has a plus sign before it.
Outline-width with a minimum minus one value in points
  • The 'outline-width' property does not support a negative length value in points and is ignored.
I
Outline-width with a minimum value in points
  • The 'outline-width' property supports a minimum length value in points that sets the width of the outline.
Outline-width with a minimum plus one value in pixels
  • The 'outline-width' property supports a minimum plus one length value in points that sets the width of the outline.
Outline-width with a negative minimum value in points
  • The 'outline-width' property supports a minimum length value in points that that has a minus sign before it.
Outline-width with a positive minimum value in points
  • The 'outline-width' property supports a minimum length value in points that that has a plus sign before it.
Outline-width - outline the box with a 5pt solid outline
  • The 'outline-width' property supports a nominal length value in points that sets the width of the outline.
Outline-width - outline the box with a +5pt solid outline
  • The 'outline-width' property supports a nominal length value in points that has a plus sign before it.
Outline-width - outline the box with a -1pc solid outline
  • The 'outline-width' property does not support a negative length value in picas and is ignored.
I
Outline-width - outline the box with a 0pc solid outline
  • The 'outline-width' property supports a minimum length value in picas that sets the width of the outline.
Outline-width - outline the box with a 1pc solid outline
  • The 'outline-width' property supports a minimum plus one length value in picas that sets the width of the outline.
Outline-width - outline the box with a -0pc solid outline
  • The 'outline-width' property supports a minimum length value in picas that that has a minus sign before it.
Outline-width - outline the box with a +0pc solid outline
  • The 'outline-width' property supports a minimum length value in picas that that has a plus sign before it.
Outline-width - outline the box with a 5pc solid outline
  • The 'outline-width' property supports a nominal length value in picas that sets the width of the outline.
Outline-width - outline the box with a +5pc solid outline
  • The 'outline-width' property supports a nominal length value in picas that has a plus sign before it.
Outline-width - outline the box with a -1cm solid outline
  • The 'outline-width' property does not support a negative length value in centimeters and is ignored.
I
Outline-width - outline the box with a 0cm solid outline
  • The 'outline-width' property supports a minimum length value in centimeters that sets the width of the outline.
Outline-width - outline the box with a 1cm solid outline
  • The 'outline-width' property supports a minimum plus one length value in centimeters that sets the width of the outline.
Outline-width - outline the box with a -0cm solid outline
  • The 'outline-width' property supports a minimum length value in centimeters that that has a minus sign before it.
Outline-width - outline the box with a +0cm solid outline
  • The 'outline-width' property supports a minimum length value in centimeters that that has a plus sign before it.
Outline-width - outline the box with a 5cm solid outline
  • The 'outline-width' property supports a nominal length value in centimeters that sets the width of the outline.
Outline-width - outline the box with a +5cm solid outline
  • The 'outline-width' property supports a nominal length value in centimeters that has a plus sign before it.
Outline-width - outline the box with a -1mm solid outline
  • The 'outline-width' property does not support a negative length value in millimeters and is ignored.
I
Outline-width - outline the box with a 0mm solid outline
  • The 'outline-width' property supports a minimum length value in millimeters that sets the width of the outline.
Outline-width - outline the box with a 1mm solid outline
  • The 'outline-width' property supports a minimum plus one length value in millimeters that sets the width of the outline.
Outline-width - outline the box with a -0mm solid outline
  • The 'outline-width' property supports a minimum length value in millimeters that that has a minus sign before it.
Outline-width - outline the box with a +0mm solid outline
  • The 'outline-width' property supports a minimum length value in millimeters that that has a plus sign before it.
Outline-width - outline the box with a 5mm solid outline
  • The 'outline-width' property supports a nominal length value in millimeters that sets the width of the outline.
Outline-width - outline the box with a +5mm solid outline
  • The 'outline-width' property supports a nominal length value in millimeters that has a plus sign before it.
Outline-width - outline the box with a -1in solid outline
  • The 'outline-width' property does not support a negative length value in inches and is ignored.
I
Outline-width - outline the box with a 0in solid outline
  • The 'outline-width' property supports a minimum length value in inches that sets the width of the outline.
Outline-width - outline the box with a 1in solid outline
  • The 'outline-width' property supports a minimum plus one length value in inches that sets the width of the outline.
Outline-width - outline the box with a -0in solid outline
  • The 'outline-width' property supports a minimum length value in inches that that has a minus sign before it.
Outline-width - outline the box with a +0in solid outline
  • The 'outline-width' property supports a minimum length value in inches that that has a plus sign before it.
Outline-width - outline the box with a 5in solid outline
  • The 'outline-width' property supports a nominal length value in inches that sets the width of the outline.
Outline-width - outline the box with a +5in solid outline
  • The 'outline-width' property supports a nominal length value in inches that has a plus sign before it.
Outline-width - outline the box with a -1em solid outline
  • The 'outline-width' property does not support a negative length value in 'em' units and is ignored.
I
Outline-width - outline the box with a 0em solid outline
  • The 'outline-width' property supports a minimum length value in 'em' units that sets the width of the outline.
Outline-width - outline the box with a 1em solid outline
  • The 'outline-width' property supports a minimum plus one length value in 'em' units that sets the width of the outline.
Outline-width - outline the box with a -0em solid outline
  • The 'outline-width' property supports a minimum length value in 'em' units that that has a minus sign before it.
Outline-width - outline the box with a +0em solid outline
  • The 'outline-width' property supports a minimum length value in 'em' units that that has a plus sign before it.
Outline-width - outline the box with a 5em solid outline
  • The 'outline-width' property supports a nominal length value in 'em' units that sets the width of the outline.
Outline-width - outline the box with a +5em solid outline
  • The 'outline-width' property supports a nominal length value in 'em' units that has a plus sign before it.
Outline-width - outline the box with a -1ex solid outline
  • The 'outline-width' property does not support a negative length value in 'ex' units and is ignored.
I
Outline-width - outline the box with a 0ex solid outline
  • The 'outline-width' property supports a minimum length value in 'ex' units that sets the width of the outline.
Outline-width - outline the box with a 1ex solid outline
  • The 'outline-width' property supports a minimum plus one length value in 'ex' units that sets the width of the outline.
Outline-width - outline the box with a -0ex solid outline
  • The 'outline-width' property supports a minimum length value in 'ex' units that that has a minus sign before it.
Outline-width - outline the box with a +0ex solid outline
  • The 'outline-width' property supports a minimum length value in 'ex' units that that has a plus sign before it.
Outline-width - outline the box with a 5ex solid outline
  • The 'outline-width' property supports a nominal length value in 'ex' units that sets the width of the outline.
Outline-width - outline the box with a +5ex solid outline
  • The 'outline-width' property supports a nominal length value in 'ex' units that has a plus sign before it.
Outline-width - outline the box with a -0 solid outline
  • The 'outline-width' property supports a minimum length value with no units that has a minus sign before it.
Outline-width - outline the box with a 0 solid outline
  • The 'outline-width' property supports a minimum length value with no units.
Outline-width - outline the box with a +0 solid outline
  • The 'outline-width' property supports a minimum length value with no units that has a plus sign before it.
Outline-width - outline the box with a thin solid outline
  • The 'outline-width' property supports a value of thin.
Outline-width - outline the box with a medium solid outline
  • The 'outline-width' property supports a value of medium.
Outline-width - outline the box with a thick solid outline
  • The 'outline-width' property supports a value of thick.
Outline-width set to 'inherit'
  • The 'outline-width' property supports a value of 'inherit' and gets its computed value from its parent.
Outline-width applied to element with display table-row-group
  • The 'outline-width' property applies to elements with a display of table-row-group.
Outline-width applied to element with display table-header-group
  • The 'outline-width' property applies to elements with a display of table-header-group.
Outline-width applied to element with display table-footer-group
  • The 'outline-width' property applies to elements with a display of table-footer-group.
Outline-width applied to element with display table-row
  • The 'outline-width' property applies to elements with a display of table-row.
Outline-width applied to element with display table-column-group
  • The 'outline-width' property does not apply to elements with a display of table-column-group.
Outline-width applied to element with display table-column
  • The 'outline-width' property does not apply to elements with a display of table-column.
Outline-width applied to element with display table-cell
  • The 'outline-width' property applies to elements with a display of table-cell.
Outline-width applied to element with display inline
  • The 'outline-width' property applies to elements with a display of inline.
Outline-width applied to element with display block
  • The 'outline-width' property applies to elements with a display of block.
Outline-width applied to element with display list-item
  • The 'outline-width' property applies to elements with a display of list-item.
Outline-width applied to element with display run-in
  • The 'outline-width' property applies to elements with a display of run-in.
Outline-width applied to element with display inline-block
  • The 'outline-width' property applies to elements with a display of inline-block.
Outline-width applied to element with display table
  • The 'outline-width' property applies to elements with a display of table.
Outline-width applied to element with display inline-table
  • The 'outline-width' property applies to elements with a display of inline-table.
Outline-width applied to element with display table-caption
  • The 'outline-width' property applies to elements with a display of table-caption.
18.4.1 Outlines and the focus
Outline specified with the ':focus' selector
  • Outline works with the ':focus' selectors.
U
Outline specified with the ':hover' selector
  • Outline works with the ':hover' selector.
U
Outline specified with the ':active' selector
  • Outline works with the ':active' selectors.
U
18.5 Magnification