CSS2.1 Conformance Test Suite

Chapter 18 - User interface (351 tests)

Test Flags
18 User interface
18.1 Cursors: the 'cursor' property
Cursor using the 'url()' function
  • Cursor 'uri' results in the cursor that is specified by the URI.
GI
Cursor set to 'auto'
  • Cursor 'auto' results in a cursor that is determined by the user agent according to the context.
I
Cursor set to 'crosshair'
  • Cursor 'crosshair' results in a crosshair cursor resembling a '+' sign.
I
Cursor set to 'default'
  • Cursor 'default' results in the default cursor.
I
Cursor set to 'pointer'
  • Cursor 'pointer' results in a cursor that indicates an element can be clicked.
I
Cursor set to 'move'
  • Cursor 'move' results in a cursor that indicates an element can be moved.
I
Cursor set to 'e-resize'
  • Cursor 'e-resize' results in a cursor that indicates the east edge of an element can be moved.
I
Cursor set to 'ne-resize'
  • Cursor 'ne-resize' results in a cursor that indicates the north-east corner of an element can be moved.
I
Cursor set to 'nw-resize'
  • Cursor 'nw-resize' results in a cursor that indicates the north-west corner of an element can be moved.
I
Cursor set to 'n-resize'
  • Cursor 'n-resize' results in a cursor that indicates the north edge of an element can be moved.
I
Cursor set to 'se-resize'
  • Cursor 'se-resize' results in a cursor that indicates the south-east corner of an element can be moved.
I
Cursor set to 'sw-resize'
  • Cursor 'sw-resize' results in a cursor that indicates the south-west corner of an element can be moved.
I
Cursor set to 's-resize'
  • Cursor 's-resize' results in a cursor that indicates the south edge of an element can be moved.
I
Cursor set to 'w-resize'
  • Cursor 'w-resize' results in a cursor that indicates the west edge of an element can be moved.
I
Cursor set to 'text'
  • Cursor 'text' results in a cursor that indicates user can select or input text.
I
Cursor set to 'wait'
  • Cursor 'wait' results in a cursor that indicates the page is busy and user needs to wait.
I
Cursor set to 'help'
  • Cursor 'help' results in a cursor that indicates help information is available.
I
Cursor set to 'progress'
  • Cursor 'progress' results in a cursor that indicates something is in progression.
I
Cursor set to 'inherit'
  • Cursor 'inherit' results in the same cursor value as the parent element has.
I
Cursor applied to element with 'display' set to 'table-row-group'
  • The 'cursor' property applies to elements with a display of table-row-group.
I
Cursor applied to element with 'display' set to 'table-header-group'
  • The 'cursor' property applies to elements with a display of table-header-group.
I
Cursor applied to element with 'display' set to 'table-footer-group'
  • The 'cursor' property applies to elements with a display of table-footer-group.
I
Cursor applied to element with 'display' set to 'table-row'
  • The 'cursor' property applies to elements with a display of table-row.
I
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.
I
Cursor applied to element with 'display' set to 'table-column'
  • The 'cursor' property does not apply to elements with a display of table-column.
I
Cursor applied to element with 'display' set to 'table-cell'
  • The 'cursor' property applies to elements with a display of table-cell.
I
Cursor applied to element with 'display' set to 'inline'
  • The 'cursor' property applies to elements with a display of inline.
I
Cursor applied to element with 'display' set to 'block'
  • The 'cursor' property applies to elements with a display of block.
I
Cursor applied to element with 'display' set to 'list-item'
  • The 'cursor' property applies to elements with a 'display' set to 'list-item'.
I
Cursor applied to element with 'display' set to 'run-in'
  • The 'cursor' property applies to elements with a display of run-in.
I
Cursor applied to element with 'display' set to 'inline-block'
  • The 'cursor' property applies to elements with a display of inline-block.
I
Cursor applied to element with 'display' set to 'table'
  • The 'cursor' property applies to elements with a display of table.
I
Cursor applied to element with 'display' set to 'inline-table'
  • The 'cursor' property applies to elements with a display of inline-table.
I
Cursor applied to element with 'display' set to 'table-caption'
  • The 'cursor' property applies to elements with a display of table-caption.
I
Cursor specified with missing image for the url()
  • When a specified URL cursor doesn't exist, the next specified cursor is used.
I
Url cursor
  • URI cursor is applied correctly.
GI
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.
I
cursor - <uri> value
  • When an user-defined cursor is provided, a generic cursor value must be provided at the end of the list.
Iinvalid
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.
invalid
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.
invalid
Outline-color set to '#fgfgfg'
  • Outline color #fgfgfg (invalid) falls back to a default color.
invalid
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.
invalid
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.
invalid
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.
invalid
Outline-color set to '#00'
  • Outline color #00 (invalid) falls back to a default color.
invalid
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.
invalid
Outline-color set to '#ggg'
  • Outline color #ggg (invalid) falls back to a default color.
invalid
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.
invalid
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.
invalid
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.
invalid
Outline-color set to 'rgb(-1%, -1%, -1%)'
  • Outline color rgb(-1%, -1%, -1%) renders the correct outline color on the element.
invalid
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.
invalid
Outline-color set to 'rgb(-1, -1, -1)'
  • Outline color rgb(-1, -1, -1) renders the correct outline color on the element.
invalid
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.
invalid
Outline-color set to 'rgb(-1%, 0%, 0%)'
  • Outline color rgb(-1%, 0%, 0%) renders the correct outline color on the element.
invalid
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.
invalid
Outline-color set to 'rgb(-1, 0, 0)'
  • Outline color rgb(-1, 0, 0) renders the correct outline color on the element.
invalid
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.
invalid
Outline-color set to 'rgb(0%, -1%, 0%)'
  • Outline color rgb(0%, -1%, 0%) renders the correct outline color on the element.
invalid
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.
invalid
Outline-color set to 'rgb(0, -1, 0)'
  • Outline color rgb(0, -1, 0) renders the correct outline color on the element.
invalid
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.
invalid
Outline-color set to 'rgb(0%, 0%, -1%)'
  • Outline color rgb(0%, 0%, -1%) renders the correct outline color on the element.
invalid
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.
invalid
Outline-color set to 'rgb(0, 0, -1)'
  • Outline color rgb(0, 0, -1) renders the correct outline color on the element.
invalid
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.
invalid
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.
invalid
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'.
invalid
Outline-left is not valid
  • Outline does not support setting individual values for the outline like 'outline-left'.
invalid
Outline-bottom is not valid
  • Outline does not support setting individual values for the outline like 'outline-bottom'.
invalid
Outline-right is not valid
  • Outline does not support setting individual values for the outline like 'outline-right'.
invalid
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.
OI
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.
invalid
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.
invalid
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.
invalid
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.
invalid
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.
invalid
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.
invalid
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.
invalid
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.
invalid
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.
I
Outline specified with the ':hover' selector
  • Outline works with the ':hover' selector.
I
Outline specified with the ':active' selector
  • Outline works with the ':active' selectors.
I
18.5 Magnification