CSS2.1 Test Suite

Visual formatting model (1111 tests)

Test Refs Flags Info
+ 9 Visual formatting model
c5526c-display-000 display/box/float/clear test
+ 9.1 Introduction to the visual formatting model
+ 9.1.1 The viewport
first-line-selector-014 :first-line pseudo-element - text-transform
first-line-selector-015 :first-line pseudo-element - text-transform
  • The :first-line pseudo-element can be attached to an unordered list because it is a block-level element. The "first formatted line" of an unordered list occurs inside its first list-item because it is a non-positioned and non-floated block-level descendant in the same flow. User agents may change the document's layout (preferred behavior but nonetheless optional) when the viewport is resized.
root-canvas-001 Canvas: Embedded documents
viewport-001 InteractOptional Viewport resize can change layout
  • Resizing the viewport may change the layout of page.
viewport-002 InteractRecommend Scrolling mechanism
  • Scrolling mechanism should be available when canvas is larger than viewport.
viewport-003 InteractRecommend Scrolling mechanism and right-to-left
  • Scrolling mechanism should be available when canvas is larger than viewport even when page is set to right-to-left.
viewport-004 Optional Rendering more than one canvas
  • User agents may render more than one canvas.
+ 9.1.2 Containing blocks
containing-block-026 Element position based on containing block
  • An element's position is based on the position of its containing block.
containing-block-027 Optional Content is not confined by containing blocks
  • Content may overflow containing blocks.
containing-block-030 Optional Content is not confined by containing blocks
  • Content may overflow containing blocks.
+ 9.2 Controlling box generation
+ 9.2.1 Block-level elements and block boxes
box-generation-001 Block-level elements generate principal block boxes with block boxes
  • Block boxes can reside within a principal block box established by a block-level element; inline boxes are outside of the principal block box.
box-generation-002 Block-level elements generate principal block boxes with inline boxes
  • Inline boxes can reside within a principal block box established by a block-level element; block boxes are outside of the principal block box.
box-generation-003 Additional boxes generated outside the principal block box
  • Some block-level elements (i.e. 'list-item' elements) can generate additional boxes outside the principal block box.
containing-block-028 Principal block box establishes the containing block
  • Principal block boxes establish a containing block for descendant boxes.
containing-block-029 Principal block box establishes the containing block for generated content
  • Principal block boxes establish a containing block for generated content.
list-style-position-001 Marker box position - first-child block box with 'overflow'
  • The position of a first-child block box inside a principal box must not be affected by 'overflow' being applied to the first-child, when marker box is positioned outside the principal box
list-style-position-002 Marker box position - descendant block box with 'overflow'
  • The position of a descendant block box inside a principal box must not be affected by 'overflow' being applied to the descendant, when marker box is positioned outside the principal box
list-style-position-003 Marker box position - list-item overflow - 'list-style-position:inside'
  • 'overflow' applied to principal box and presence of child block box (in normal flow) must have no affect on visibility or position of marker box
list-style-position-005 Marker box position (inside principal box) - block box in normal flow (as child of principal box)
  • Since a marker box is the first inline element in the principal box when 'list-style-position:inside', the following block box (in normal flow) must create a new stacking context below the marker box
list-style-position-006 Marker box position (inside principal box) - block box with 'float:left' (as child of principal box)
  • Since a marker box is the first inline element in the principal box when 'list-style-position:inside', the following block box (floated to the left) must visually appear before the marker box in the rendered document
list-style-position-007 Marker box position (inside principal box) - block box with 'float:right' (as child of principal box)
list-style-position-008 Marker box position (outside principal box) - floated-left child
  • A floated element (as a child of the principal box) should not affect the horizontal position of the marker box (positioned outside principal box) in relation to the principal box's content
list-style-position-009 Marker box position (outside principal box) - floated-right child
  • A floated element (as a child of the principal box) should not affect the horizontal position of the marker box (positioned outside principal box) in relation to the principal box's content
list-style-position-010 Marker box position (outside principal box) - :before pseudo-element list-item ('list-style-position:inside')
  • When the :before element is set as a list-item, it establishes a principal box into which a marker box is placed (when 'list-style-position:inside). The document tree content of the associated element must be placed after the principal box established by the :before pseudo element. The presence of the :before pseudo element in this context, must have no affect on the position of the marker box of the associated element as it must still appear to the outside left edge of it's own principal box (since 'list-style-position:outside').
list-style-position-011 Marker box position (inside principal box) - :before pseudo-element list-item ('list-style-position:outside')
  • When the :before element is set as a list-item, it establishes a principal box and a marker box which is positioned outside of that principal box (since 'list-style-position:outside). The document tree content of the associated element must be placed after the principal box established by the :before pseudo element. Since the marker box of the associated element must be the first inline element within it's principal box (since 'list-style-position:inside'), that marker box must appear before the marker box and principal box of the :before pseudo-element.
list-style-position-012 Marker box position (inside principal box) - :before pseudo-element list-item ('list-style-position:inside')
  • When the :before element is set as a list-item, it establishes a principal box into which a marker box is placed (when 'list-style-position:inside). The document tree content of the associated element must be placed after the principal box established by the :before pseudo element. Since the marker box of the associated element must be the first inline element within it's principal box (since 'list-style-position:inside'), that marker box must appear before the marker box and principal box of the :before pseudo-element.
list-style-position-013 Marker box position (outside principal box) - :before pseudo-element list-item ('list-style-position:outside')
  • When the :before element is set as a list-item, it establishes a principal box and a marker box which is positioned outside of that principal box (since 'list-style-position:outside). The document tree content of the associated element must be placed after the principal box established by the :before pseudo element. The position of the marker box of the associated element must still appear to the outside left edge of it's principal box (since 'list-style-position:outside') and should be positioned towards the top of this principal box. Since the marker box of the :before pseudo element should be positioned at the same coordinate as the associated element's marker box, either bullet could appear in front of the other (since stacking levels of marker boxes aren't defined in CSS2.1, in this context).
list-style-position-014 Marker box position (outside principal box) - floated :before pseudo-element list-item ('list-style-position:inside')
  • When the :before element is set as a list-item, it establishes a principal box into which a marker box is placed (when 'list-style-position:inside). Since this :before pseudo element is floated left, the document tree content of the associated element must appear alongside (after) this :before pseudo element. The position of the marker box of the associated element must not be affected, as it must still appear to the outside left edge of it's principal box (since 'list-style-position:outside').
list-style-position-015 Marker box position (inside principal box) - floated :before pseudo-element list-item ('list-style-position:outside')
  • When the :before element is set as a list-item, it establishes a principal box and a marker box which is positioned outside of that principal box (since 'list-style-position:outside). Since this :before pseudo element is floated left, the principal box (and marker box, since 'list-style-position:inside') of the associated element must appear alongside (after) this :before pseudo element. The position of the marker box of the :before pseudo element must still appear to the outside left edge of it's associated element's principal box (since 'list-style-position:outside').
list-style-position-016 Marker box position (inside principal box) - floated :before pseudo-element list-item ('list-style-position:inside')
  • When the :before element is set as a list-item, it establishes a principal box into which a marker box is placed (when 'list-style-position:inside). Since the :before pseudo element is floated left, the principal box (and marker box, since 'list-style-position:inside') of the associated element must appear alongside (after) the :before pseudo element.
list-style-position-017 Marker box position (outside principal box) - floated :before pseudo-element list-item ('list-style-position:outside')
  • When the :before element is set as a list-item, it establishes a principal box into which a marker box is placed (when 'list-style-position:inside). Since the :before pseudo element is floated left, The document tree content of the associated element must appear alongside (after) the :before pseudo element. Since the marker box of the :before pseudo element should be positioned at the same coordinate as the associated element's marker box, either bullet could appear in front of the other (since stacking levels of marker boxes aren't defined in CSS2.1, in this context).
+ 9.2.1.1 Anonymous block boxes
anonymous-box-generation-001 Anonymous block box generation
  • Block boxes with inline content followed by a block box generate an anonymous block box around the inline content.
anonymous-boxes-001 = Percent heights inside anonymous blocks
  • Anonymous block boxes are ignored when resolving percentage values that would refer to it: the closest non-anonymous ancestor box is used instead.
anonymous-boxes-inheritance-001 Ahem Anonymous box property inheritance
  • Anonymous boxes inherit property values from their non-anonymous box.
block-in-inline-001 CSS: Blocks Within Inlines - Basic
  • When an inline box contains a block box, the inline box is broken around the block.
block-in-inline-002 CSS: Blocks Within Inlines - Backgrounds
  • When an inline box contains a block box, the inline box is broken around the box and its background is drawn only behind the inline's pieces, not behind the block.
block-in-inline-append-001 = DOM/JS blocks inside inlines – append-to-empty-trailing-inline-1
block-in-inline-append-002 = = DOM/JS blocks inside inlines – append-to-nested-split-inline-1
block-in-inline-empty-001 = blocks inside inlines – emptyspan-1
block-in-inline-empty-002 = blocks inside inlines – emptyspan-2
block-in-inline-empty-003 = blocks inside inlines – emptyspan-3
block-in-inline-empty-004 = blocks inside inlines – emptyspan-4
block-in-inline-float-between-001 = blocks inside inlines – float-inside-inline-between-blocks-1
block-in-inline-insert-001a = = DOM/JS blocks inside inlines – insert-into-split-inline-1a
block-in-inline-insert-001b = DOM/JS blocks inside inlines – insert-into-split-inline-1b
block-in-inline-insert-001c = DOM/JS blocks inside inlines – insert-into-split-inline-1c
block-in-inline-insert-001d = DOM/JS blocks inside inlines – insert-into-split-inline-1d
block-in-inline-insert-001e = DOM/JS blocks inside inlines – insert-into-split-inline-1e
block-in-inline-insert-001f = DOM/JS blocks inside inlines – insert-into-split-inline-1f
block-in-inline-insert-001g = DOM/JS blocks inside inlines – insert-into-split-inline-1g
block-in-inline-insert-001h = DOM/JS blocks inside inlines – insert-into-split-inline-1h
block-in-inline-insert-001i = DOM/JS blocks inside inlines – insert-into-split-inline-1i
block-in-inline-insert-001j = DOM/JS blocks inside inlines – insert-into-split-inline-1j
block-in-inline-insert-001k = DOM/JS blocks inside inlines – insert-into-split-inline-1k
block-in-inline-insert-001l = DOM/JS blocks inside inlines – insert-into-split-inline-1l
block-in-inline-insert-002a = = DOM/JS blocks inside inlines – insert-into-split-inline-2a
block-in-inline-insert-002b = DOM/JS blocks inside inlines – insert-into-split-inline-2b
block-in-inline-insert-002c = DOM/JS blocks inside inlines – insert-into-split-inline-2c
block-in-inline-insert-002d = DOM/JS blocks inside inlines – insert-into-split-inline-2d
block-in-inline-insert-002e = DOM/JS blocks inside inlines – insert-into-split-inline-2e
block-in-inline-insert-002f = DOM/JS blocks inside inlines – insert-into-split-inline-2f
block-in-inline-insert-002g = DOM/JS blocks inside inlines – insert-into-split-inline-2g
block-in-inline-insert-002h = DOM/JS blocks inside inlines – insert-into-split-inline-2h
block-in-inline-insert-002i = DOM/JS blocks inside inlines – insert-into-split-inline-2i
block-in-inline-insert-003 = = DOM/JS blocks inside inlines – insert-into-split-inline-3
block-in-inline-insert-004 = = DOM/JS blocks inside inlines – insert-into-split-inline-4
block-in-inline-insert-006 = = DOM/JS blocks inside inlines – insert-into-split-inline-6
block-in-inline-insert-007 = = DOM/JS blocks inside inlines – insert-into-split-inline-7
block-in-inline-insert-008a = = DOM/JS blocks inside inlines – insert-into-split-inline-8a
block-in-inline-insert-008b = DOM/JS blocks inside inlines – insert-into-split-inline-8b
block-in-inline-insert-008c = DOM/JS blocks inside inlines – insert-into-split-inline-8c
block-in-inline-insert-009 = = DOM/JS blocks inside inlines – insert-into-split-inline-9
block-in-inline-insert-010 = = DOM/JS blocks inside inlines – insert-into-split-inline-10
block-in-inline-insert-011 = = DOM/JS blocks inside inlines – insert-into-split-inline-11
block-in-inline-insert-012 = = DOM/JS blocks inside inlines – insert-into-split-inline-12
block-in-inline-insert-013 = = DOM/JS blocks inside inlines – insert-into-split-inline-13
block-in-inline-insert-014 = = DOM/JS blocks inside inlines – insert-into-split-inline-14
block-in-inline-insert-015 = = DOM/JS blocks inside inlines – insert-into-split-inline-15
block-in-inline-insert-016a = = DOM/JS blocks inside inlines – insert-into-split-inline-16a
block-in-inline-insert-016b = DOM/JS blocks inside inlines – insert-into-split-inline-16b
block-in-inline-insert-017 = DOM/JS blocks inside inlines – trailing-inline-with-continuations-1
block-in-inline-margins-001a = blocks inside inlines – ignored-margins-1a
block-in-inline-margins-001b = blocks inside inlines – ignored-margins-1b
block-in-inline-margins-002a = blocks inside inlines – ignored-margins-2a
block-in-inline-margins-002b = blocks inside inlines – ignored-margins-2b
block-in-inline-nested-001 = blocks inside inlines – split-inner-inline-1
block-in-inline-nested-002 = blocks inside inlines – split-inner-inline-2
block-in-inline-percents-001 = blocks inside inlines – percent-height-1
block-in-inline-relpos-001 Relative-positioning Inline Containing Block
  • When such an inline box is affected by relative positioning, the relative positioning also affects the block-level box contained in the inline box.
block-in-inline-relpos-002 Relative-positioning Inline Containing Blocks and Floats
  • When such an inline box is affected by relative positioning, the relative positioning also affects the block-level box contained in the inline box.
block-in-inline-remove-000 = DOM/JS blocks inside inlines – remove-split-inline-1
block-in-inline-remove-001 = = DOM/JS blocks inside inlines – remove-from-split-inline-1
block-in-inline-remove-002 = DOM/JS blocks inside inlines – remove-from-split-inline-2
block-in-inline-remove-003 = = DOM/JS blocks inside inlines – remove-from-split-inline-3
block-in-inline-remove-004 = = DOM/JS blocks inside inlines – remove-from-split-inline-4
block-in-inline-remove-005 = = DOM/JS blocks inside inlines – remove-from-split-inline-5
block-in-inline-remove-006 = = DOM/JS blocks inside inlines – remove-from-split-inline-6
block-in-inline-whitespace-001a = blocks inside inlines – whitespace-present-1a
block-in-inline-whitespace-001b = DOM/JS blocks inside inlines – whitespace-present-1b
inline-box-001 Inline box containing block boxes
  • Inline boxes that contain block boxes will break up the inline content around the block box.
inline-box-002 Block boxes within inline boxes are affected by positioning
  • Block boxes within inline boxes are also affected by relative positioning on the inline box.
table-in-inline-001 = blocks inside inlines – table-pseudo-in-part3-1
+ 9.2.2 Inline-level elements and inline boxes
inlines-002 CSS Inline Box Model: Layering Model
inlines-003 Interact CSS Inline Box Model: Wrapping Borders
inlines-004 Interact CSS Inline Box Model: Wrapping Spaces Outside Inline Elements
inlines-005 Interact CSS Inline Box Model: Wrapping Spaces Outside Inline Elements
inlines-006 Interact CSS Inline Box Model: Wrapping Spaces Outside Inline Elements
inlines-007 CSS Inline Box Model: Behaviour near cells
inlines-013 Bitmaps Inline box model: space taken by images before floats
inlines-014 Inline box model: space taken by images in cells
inlines-015 Bitmaps Inline box model: space taken by images in cells
inlines-016 Ahem Inline box model: space collapsing, padding, white-space, et al
  • If a space (U+0020) at the beginning of a line has 'white-space' set to 'normal', then it is removed, even if there's padding.
inlines-017 Ahem First line alignment
inlines-020 CSS Inline Box Model: Empty inlines near the top of the document
+ 9.2.2.1 Anonymous inline boxes
anonymous-inline-whitespace-001 White space does not generate an anonymous inline box
  • White space is collapsed according to the 'white-space' property and does not generate an anonymous inline box.
+ 9.2.3 Run-in boxes
+ 9.2.4 The 'display' property
after-content-display-001 :after generated content - display inline
  • Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
after-content-display-002 :after generated content - display block
  • Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
after-content-display-003 :after generated content - display list-item
  • Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
after-content-display-005 :after generated content - display inline-block
  • Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
after-content-display-006 :after generated content - display table
  • Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
after-content-display-007 :after generated content - display inline-table
  • Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
after-content-display-008 :after generated content - display table-row-group
  • Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
after-content-display-009 :after generated content - display table-header-group
  • Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
after-content-display-010 :after generated content - display table-footer-group
  • Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
after-content-display-011 :after generated content - display table-row
  • Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
after-content-display-014 :after generated content - display table-cell
  • Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
after-content-display-015 :after generated content - display table-caption
  • Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
after-content-display-016 :after generated content - display none
  • Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
after-content-display-017 :after generated content - display inherit
  • Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
before-content-display-001 :before generated content - display inline
  • Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
before-content-display-002 :before generated content - display block
  • Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
before-content-display-003 :before generated content - display list-item
  • Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
before-content-display-005 :before generated content - display inline-block
  • Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
before-content-display-006 :before generated content - display table
  • Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
before-content-display-007 :before generated content - display inline-table
  • Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
before-content-display-008 :before generated content - display table-row-group
  • Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
before-content-display-009 :before generated content - display table-header-group
  • Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
before-content-display-010 :before generated content - display table-footer-group
  • Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
before-content-display-011 :before generated content - display table-row
  • Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
before-content-display-014 :before generated content - display table-cell
  • Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
before-content-display-015 :before generated content - display table-caption
  • Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
before-content-display-016 :before generated content - display none
  • Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
before-content-display-017 :before generated content - display inherit
  • Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
block-in-inline-003 Blocks within inlines: Simple
  • When an inline box contains a block box, the inline box is broken around the box and its pieces, if empty, will not show any background.
block-in-inline-004 Interact Blocks within inlines: Simple with :hover
  • A block that splits an inline still inherits from the inline, even in dynamic cases.
block-in-inline-005 DOM/JSInteract Blocks within inlines: Simple with dynamic class changes
block-in-inline-006 DOM/JSInteract Blocks within inlines: Simple with dynamic class changes
block-in-inline-007 Blocks within inlines: Simple
  • When an inline box contains block boxes, the inline box is broken around the blocks.
block-in-inline-008 Blocks within inlines: Relative positioning
c561-list-displ-000 display
clear-applies-to-000 Clear on floats after floats with display:none blocks between them
descendant-display-none-001 Descendant elements and 'display: none'
  • Descendant elements do not get generated when parent is 'display: none'.
descendant-display-override-001 Overriding display none from parent
  • Descendant elements cannot override the parent's setting of the 'display' property when set to 'none'.
display-001 Display set to 'inline'
  • The property 'display' set to 'inline' behaves in layout as an inline element.
display-002 Display set to 'block'
  • The property 'display' set to 'block' behaves in layout as a block.
display-003 Display set to 'list-item'
  • The property 'display' set to 'list-item' behaves in layout as a list item block.
display-005 Display set to 'inline-block'
  • The property 'display' set to 'inline-block' is formatted in layout as an inline-level element: it creates a new block formatting context for its descendants but it is laid out, flowed as an inline-level element. An inline-block does not begin on a new line and does not require to begin on a new line.
display-006 Display set to 'table'
  • The property 'display' set to 'table' behaves in layout as a table.
display-007 Display set to 'inline-table'
  • The property 'display' set to 'inline-table' behaves in layout as an inline table.
display-008 Display set to 'table-row-group'
  • The property 'display' set to 'table-row-group' behaves in layout as a table row group.
display-009 Display set to 'table-header-group'
  • The property 'display' set to 'table-header-group' behaves in layout as a table header group.
display-010 Display set to 'table-footer-group'
  • The property 'display' set to 'table-footer-group' behaves in layout as a table footer group.
display-011 Display set to 'table-row'
  • The property 'display' set to 'table-row' behaves in layout as a table row.
display-012 Display set to 'table-column-group'
  • The property 'display' set to 'table-column-group' behaves in layout as a table column group.
display-013 Display set to 'table-column'
  • The property 'display' set to 'table-column' behaves in layout as a table column.
display-014 Display set to 'table-cell'
  • The property 'display' set to 'table-cell' behaves in layout as a table cell.
display-015 Display set to 'table-caption'
  • The property 'display' set to 'table-caption' behaves in layout as a table caption.
display-016 Display set to 'none'
  • The property 'display' set to 'none' has no layout.
display-017 Display set to 'inherit'
  • The property 'display' set to 'inherit' can inherit its layout behavior from a parent container.
display-018 display - sub-table elements with 'display' set to 'inline'
  • The property 'display' set to 'inline' behaves in layout as an inline element and should generate inline box.
display-applies-to-001 Applying the property 'display' set to 'inline' to the 'a' element
  • Display set to 'inline' applies the correct rendering behavior for the 'a' element.
display-applies-to-002 Applying the property 'display' set to 'inline' to the 'abbr' element
  • Display set to 'inline' applies the correct rendering behavior for the 'abbr' element.
display-change-001 AhemDOM/JS Updating layout on display changes
display-initial-001 Display initial value
  • The initial display value for all elements is 'inline'.
inline-block-000 = Test for inline-block
  • This value causes an element to generate a block box, which itself is flowed as a single inline box, similar to a replaced element. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an inline replaced element.
  • The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.
inline-block-valign-001 = Test for vertical alignment on inline-block
  • This value causes an element to generate a block box, which itself is flowed as a single inline box, similar to a replaced element. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an inline replaced element.
  • The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.
inline-block-valign-002 = Test for vertical alignment on inline-block
  • This value causes an element to generate a block box, which itself is flowed as a single inline box, similar to a replaced element. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an inline replaced element.
  • The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.
root-box-002 Bitmaps Styling the root element: display:table
  • HTML elements can be set to other display property values - like sub-table elements just like in this testcase - in order to behave like another element.
root-box-003 Styling the root element: display:none (page should be a big green expanse)
+ 9.3 Positioning schemes
position-absolute-001 Absolute positions impact on later siblings
  • Absolute positioned elements do not impact later siblings.
position-relative-004 Relative positioning dimensions
  • Relative positioning with left or right does not change size of a box.
position-relative-005 Relative positioning with left
  • Relatively positioned element with the left specified offsets the element from the left of the containing block.
position-relative-006 Relative positioning with right
  • Relatively positioned element with the right specified offsets the element from the right of the containing block.
position-relative-007 Relative positioning with 'left' set and 'right' 'auto'
  • Relatively positioned element with 'left' set to 'auto' and 'right' set to a value appears at expected offset.
position-relative-008 Relative positioning with 'right' set and 'left' 'auto'
  • If 'right' offset of a relatively positioned box is specified as 'auto', then its computed value is minus the value of 'left' offset. A relatively positioned box with 'left' set to a value moves the box to the left by the value of 'right'.
position-relative-009 Over-constrained situation with position 'left' property
  • If the 'direction' property of the containing block is 'ltr', the value of 'left' wins and 'right' becomes negative 'left'.
position-relative-010 Over-constrained situation with position 'right' property
  • If the 'direction' property of the containing block is 'rtl', the value of 'right' wins and 'left' becomes negative 'right'.
position-relative-013 Relative positioning with top and bottom do not change element dimensions
  • Relatively positioned element dimensions are not changed with top/bottom applied.
position-relative-014 Relative positioning with top
  • Relatively positioned element dimensions are not changed with top applied.
position-relative-015 Relative positioning with bottom
  • Relatively positioned element dimensions are not changed with bottom applied.
position-relative-016 Relative positioning and computed top/bottom values
  • Used value of top equals negative bottom when top is auto and bottom is given. (Computed value of top remains auto.)
position-relative-017 Relative positioning and computed 'top'/'bottom' set to 'auto'
  • Computed values are zero when both 'top' and 'bottom' are set to 'auto'.
position-relative-018 Relative positioning and computed values when 'bottom' is set to 'auto'
  • Computed value of 'bottom' set to 'auto' is equal to negative 'top'.
position-relative-019 Relative positioning 'bottom' ignored if 'top' and 'bottom' are both not 'auto'
  • The 'bottom' value is ignored if neither 'top' or 'bottom' is 'auto'.
position-relative-020 Interact Relative positioning and overflow: auto
  • If relative positioning causes overflow the user agent needs to provide a scrolling mechanism to all of the content at its offset position.
position-relative-021 Interact Relative positioning and overflow: scroll
  • If relative positioning causes overflow the user agent needs to provide a scrolling mechanism to all of the content at its offset position.
position-relative-nested-001 Vertical centering with negative and positive top positioning
  • Equal 50% positive and negative positioning can vertically center objects.
positioning-float-001 Positioning a left floated element
  • Floating a box will first lay out the box then shift it to the left.
positioning-float-002 Positioning a right floated element
  • Floating a box will first lay out the box then shift it to the right.
+ 9.3.1 Choosing a positioning scheme: 'position' property
page-container-003 Paged paged media position fixed
  • Elements with 'position: fixed' are positioned relative to the page area and are rendered on every page of the printed document.
position-001 Position set to 'static'
  • The 'position' property applies the value 'static' and places the element in normal document flow.
position-002 Position set to 'relative'
  • The 'position' property applies the value 'relative' and places the element in normal document flow.
position-003 Position set to 'absolute'
  • The 'position' property applies the value 'absolute' and places the element out of flow of the document.
position-004 Interact Position set to 'fixed'
  • The 'position' property applies the value 'fixed' and places the element out of flow of the document and locks it to a specific point on the viewport.
position-005 Position set to 'inherit'
  • The 'position' property applies the value 'inherit' and inherits the 'position' value from its parent element.
position-absolute-002 Position absolute size and positioning
  • Absolutely positioned elements can be sized and positioned using 'top', 'right', 'bottom' and 'left' properties.
position-applies-to-001 Position applied to element with 'display' set to 'table-row-group'
  • The 'position' property applies to elements with a display of 'table-row-group'.
position-applies-to-002 Position applied to element with 'display' set to 'table-header-group'
  • The 'position' property applies to elements with a display of 'table-header-group'.
position-applies-to-003 Position applied to element with 'display' set to 'table-footer-group'
  • The 'position' property applies to elements with a display of 'table-footer-group'.
position-applies-to-004 Position applied to element with 'display' set to 'table-row'
  • The 'position' property applies to elements with a display of 'table-row'.
position-applies-to-005 Position applied to element with 'display' set to 'table-column-group'
  • The 'position' property applies to elements with a display of 'table-column-group'.
position-applies-to-006 Position applied to element with 'display' set to 'table-column'
  • The 'position' property applies to elements with a display of 'table-column'.
position-applies-to-007 Position applied to element with 'display' set to 'table-cell'
  • The 'position' property applies to elements with a display of 'table-cell'.
position-applies-to-008 Position applied to element with 'display' set to inline
  • The 'position' property applies to elements with a display of inline.
position-applies-to-009 Position applied to element with 'display' set to block
  • The 'position' property applies to elements with a display of block.
position-applies-to-010 Position applied to element with 'display' set to list-item
  • The 'position' property applies to elements with a display of list-item.
position-applies-to-012 Position applied to element with 'display' set to inline-block
  • The 'position' property applies to elements with a display of inline-block.
position-applies-to-013 Position applied to element with 'display' set to 'table'
  • The 'position' property applies to elements with a display of 'table'.
position-applies-to-014 Position applied to element with 'display' set to 'inline-table'
  • The 'position' property applies to elements with a display of 'inline-table'.
position-applies-to-015 Position applied to element with 'display' set to 'table-caption'
  • The 'position' property applies to elements with a display of 'table-caption'.
position-fixed-001 Fixed position elements impact on later siblings
  • Fixed positioned elements do not impact later siblings.
position-fixed-002 Position fixed size and positioning
  • Fixed positioned elements can be sized and positioned using 'top', 'right', 'bottom' and 'left' properties.
position-fixed-003 Interact Position fixed on different media types
  • Elements that are set to 'position: fixed' are fixed with respect to the viewport.
position-fixed-004 Paged Position fixed and print media
  • Fixed position elements are positioned with respect to the page box when printed.
position-fixed-005 Paged Pagination of fixed positioned elements
  • Fixed position elements cannot be paginated.
position-fixed-006 DOM/JSOptional Non-static position on the root element
  • Root elements may treat non-static positions as 'static'.
position-relative-001 Relative positioning and normal flow
  • Relatively positioned elements lay out in normal flow.
position-relative-002 Elements following relatively positioned elements
  • Element following relatively positioned element show up in normal flow as if the relatively positioned element were not offset.
position-static-001 Content laid out in normal flow when 'position' is set to 'static'
  • Static positioned elements are not affected by top, right, bottom, left property settings.
+ 9.3.2 Box offsets: 'top', 'right', 'bottom', 'left'
background-position-152 Bitmaps background-position - percentage values versus left offset and top offset percentages
  • The 'background-position' property, when expressed in percentage values will position the inner point (relative to percentage values) of the background-image itself within the padding box of the element. In this testcase, the point coordinates of the background-image are (14px, 84px) and such inner point of the background-image will be placed at the point 14% across and 84% down the padding box of #nearest-positioned-ancestor. On the other hand, the 'left' property and 'top' property, for absolute positioning, specifies the left offset and the top of the element applied to its left edge and to its top edge within the padding box of its nearest positioned ancestor.
bottom-004 Bottom using pixels with a value of negative zero, -0px
  • The 'bottom' property sets a negative zero length value in pixels.
bottom-005 Bottom using pixels with a value of zero, 0px
  • The 'bottom' property sets a zero length value in pixels.
bottom-006 Bottom using pixels with a value of positive zero, +0px
  • The 'bottom' property sets a positive zero length value in pixels.
bottom-007 Bottom using pixels with a nominal value, 96px
  • The 'bottom' property sets a nominal length value in pixels.
bottom-008 Bottom using pixels with a positive nominal value, +96px
  • The 'bottom' property sets a positive nominal length value in pixels.
bottom-016 Bottom using points with a value of negative zero, -0pt
  • The 'bottom' property sets a negative zero length value in points.
bottom-017 Bottom using points with a value of zero, 0pt
  • The 'bottom' property sets a zero length value in points.
bottom-018 Bottom using points with a value of positive zero, +0pt
  • The 'bottom' property sets a positive zero length value in points.
bottom-019 Bottom using points with a nominal value, 72pt
  • The 'bottom' property sets a nominal length value in points.
bottom-020 Bottom using points with a positive nominal value, +72pt
  • The 'bottom' property sets a positive nominal length value in points.
bottom-028 Bottom using picas with a value of negative zero, -0pc
  • The 'bottom' property sets a negative zero length value in picas.
bottom-029 Bottom using picas with a value of zero, 0pc
  • The 'bottom' property sets a zero length value in picas.
bottom-030 Bottom using picas with a value of positive zero, +0pc
  • The 'bottom' property sets a positive zero length value in picas.
bottom-031 Bottom using picas with a nominal value, 6pc
  • The 'bottom' property sets a nominal length value in picas.
bottom-032 Bottom using picas with a positive nominal value, +6pc
  • The 'bottom' property sets a positive nominal length value in picas.
bottom-040 Bottom using centimeters with a value of negative zero, -0cm
  • The 'bottom' property sets a negative zero length value in centimeters.
bottom-041 Bottom using centimeters with a value of zero, 0cm
  • The 'bottom' property sets a zero length value in centimeters.
bottom-042 Bottom using centimeters with a value of positive zero, +0cm
  • The 'bottom' property sets a positive zero length value in centimeters.
bottom-043 Bottom using centimeters with a nominal value, 2.54cm
  • The 'bottom' property sets a nominal length value in centimeters.
bottom-044 Bottom using centimeters with a positive nominal value, +2.54cm
  • The 'bottom' property sets a positive nominal length value in centimeters.
bottom-052 Bottom using millimeters with a value of negative zero, -0mm
  • The 'bottom' property sets a negative zero length value in millimeters.
bottom-053 Bottom using millimeters with a value of zero, 0mm
  • The 'bottom' property sets a zero length value in millimeters.
bottom-054 Bottom using millimeters with a value of positive zero, +0mm
  • The 'bottom' property sets a positive zero length value in millimeters.
bottom-055 Bottom using millimeters with a nominal value, 25.4mm
  • The 'bottom' property sets a nominal length value in millimeters.
bottom-056 Bottom using millimeters with a positive nominal value, +25.4mm
  • The 'bottom' property sets a positive nominal length value in millimeters.
bottom-064 Bottom using inches with a value of negative zero, -0in
  • The 'bottom' property sets a negative zero length value in inches.
bottom-065 Bottom using inches with a value of zero, 0in
  • The 'bottom' property sets a zero length value in inches.
bottom-066 Bottom using inches with a value of positive zero, +0in
  • The 'bottom' property sets a positive zero length value in inches.
bottom-067 Bottom using inches with a nominal value, 1in
  • The 'bottom' property sets a nominal length value in inches.
bottom-068 Bottom using inches with a positive nominal value, +1in
  • The 'bottom' property sets a positive nominal length value in inches.
bottom-076 Ahem Bottom using 'em' units with a value of negative zero, -0em
  • The 'bottom' property sets a negative zero length value in 'em' units.
bottom-077 Ahem Bottom using 'em' units with a value of zero, 0em
  • The 'bottom' property sets a zero length value in 'em' units.
bottom-078 Ahem Bottom using 'em' units with a value of positive zero, +0em
  • The 'bottom' property sets a positive zero length value in 'em' units.
bottom-079 Ahem Bottom using 'em' units with a nominal value, 6em
  • The 'bottom' property sets a nominal length value in 'em' units.
bottom-080 Ahem Bottom using 'em' units with a positive nominal value, +6em
  • The 'bottom' property sets a positive nominal length value in 'em' units.
bottom-088 Ahem Bottom using 'ex' units with a value of negative zero, -0ex
  • The 'bottom' property sets a negative zero length value in 'ex' units.
bottom-089 Ahem Bottom using 'ex' units with a value of zero, 0ex
  • The 'bottom' property sets a zero length value in 'ex' units.
bottom-090 Ahem Bottom using 'ex' units with a value of positive zero, +0ex
  • The 'bottom' property sets a positive zero length value in 'ex' units.
bottom-091 Ahem Bottom using 'ex' units with a nominal value, 6ex
  • The 'bottom' property sets a nominal length value in 'ex' units.
bottom-092 Ahem Bottom using 'ex' units with a positive nominal value, +6ex
  • The 'bottom' property sets a positive nominal length value in 'ex' units.
bottom-100 Bottom using percentages with a value of negative zero, -0%
  • The 'bottom' property sets a negative zero length value in percentages.
bottom-101 Bottom using percentages with a value of zero, 0%
  • The 'bottom' property sets a zero length value in percentages.
bottom-102 Bottom using percentages with a value of positive zero, +0%
  • The 'bottom' property sets a positive zero length value in percentages.
bottom-103 Bottom using percentages with a nominal value, 100%
  • The 'bottom' property sets a nominal length value in percentages.
bottom-104 Bottom using percentages with a positive nominal value, +100%
  • The 'bottom' property sets a positive nominal length value in percentages.
bottom-109 Bottom with a value of negative zero and no units, -0
  • The 'bottom' property sets a negative zero length value with no units.
bottom-110 Bottom with a value of zero and no units, 0
  • The 'bottom' property sets a zero length value with no units.
bottom-111 Bottom with a value of positive zero and no units, +0
  • The 'bottom' property sets a positive zero length value with no units.
bottom-112 Bottom with a value of 'auto'
  • The 'bottom' property sets a value of 'auto'.
bottom-113 Bottom with a value of 'inherit'
  • The 'bottom' property sets a value of 'inherit', inheriting the computed value from the parent element.
bottom-applies-to-001 Bottom applied to element with 'display' set to 'table-row-group'
  • The 'bottom' property applies to elements with a display of 'table-row-group'.
bottom-applies-to-002 Bottom applied to element with 'display' set to 'table-header-group'
  • The 'bottom' property applies to elements with a display of 'table-header-group'.
bottom-applies-to-003 Bottom applied to element with 'display' set to 'table-footer-group'
  • The 'bottom' property applies to elements with a display of 'table-footer-group'.
bottom-applies-to-004 Bottom applied to element with 'display' set to 'table-row'
  • The 'bottom' property applies to elements with a display of 'table-row'.
bottom-applies-to-005 Bottom applied to element with 'display' set to 'table-column-group'
  • The 'bottom' property applies to elements with a display of 'table-column-group'.
bottom-applies-to-006 Bottom applied to element with 'display' set to 'table-column'
  • The 'bottom' property applies to elements with a display of 'table-column'.
bottom-applies-to-007 Bottom applied to element with 'display' set to 'table-cell'
  • The 'bottom' property applies to elements with a display of 'table-cell'.
bottom-applies-to-008 Bottom applied to element with 'display' set to inline
  • The 'bottom' property applies to elements with a display of inline.
bottom-applies-to-009 Bottom applied to element with 'display' set to block
  • The 'bottom' property applies to elements with a display of block.
bottom-applies-to-010 Bottom applied to element with 'display' set to list-item
  • The 'bottom' property applies to elements with a display of list-item.
bottom-applies-to-012 Bottom applied to element with 'display' set to inline-block
  • The 'bottom' property applies to elements with a display of inline-block.
bottom-applies-to-013 Bottom applied to element with 'display' set to 'table'
  • The 'bottom' property applies to elements with a display of 'table'.
bottom-applies-to-014 Bottom applied to element with 'display' set to 'inline-table'
  • The 'bottom' property applies to elements with a display of 'inline-table'.
bottom-applies-to-015 Bottom applied to element with 'display' set to 'table-caption'
  • The 'bottom' property applies to elements with a display of 'table-caption'.
bottom-offset-001 Position 'bottom' property defines the offset from the bottom edge of the containing block for absolute positioning
  • The 'bottom' property, for absolute positioning, specifies the offset of the element in relation to the containing block's bottom content edge.
bottom-offset-002 Position 'bottom' offset property - absolute length value and relative positioning
  • The 'bottom' property, when using an absolute length value (not percentage) for relative positioning, specifies the offset of the box itself.
bottom-offset-003 Position 'bottom' property defines the offset from the bottom padding edge of the containing block for absolute positioning
  • The 'bottom' property, for absolute positioning, specifies the offset of the element in relation to the containing block's bottom padding edge.
bottom-offset-percentage-001 Bottom offset using percentage
  • Percentage offset values for the 'bottom' property are based off the height of the containing block.
box-offsets-abs-pos-001 Bitmaps box offsets - containing block for absolute positioned boxes
  • Box offsets (bottom, left, right, top) for an absolutely positioned box refers to the padding box of its nearest positioned ancestor; such padding box forms the containing block of the absolutely positioned box.
box-offsets-rel-pos-001 Bitmaps box offsets - relatively positioned boxes
  • Box offsets (bottom, left, right, top) expressed in absolute units (not with percentage unit) for relatively positioned boxes are with respect to the edges of the boxes themselves.
box-offsets-rel-pos-002 Bitmaps box offsets - position relative
  • The 'top', 'right', 'bottom', 'left' property, for relative positioning, specify the offset of the box itself from its normal in-flow position, from the position it would have had if it had been static.
dynamic-top-change-001 DOM/JS Inheriting 'top' changes from relpos grandparent
  • The position of a positioned element which inherits its 'top' value from its relatively positioned grandparent changes when the grandparent's 'top' value is changed.
dynamic-top-change-002 DOM/JS Inheriting 'top' changes from parent table-row through anonymous table boxes
  • The position of a positioned element which inherits its 'top' value from its parent changes when the parent's 'top' value is changed even if the parent is display:table-row.
dynamic-top-change-003 DOM/JS Inheriting 'top' changes from parent table through anonymous table boxes
  • The position of a positioned element which inherits its 'top' value from its parent changes when the parent's 'top' value is changed even if the parent is display:table.
dynamic-top-change-004 DOM/JS Inheriting 'top' changes from abspos parent
  • The position of a positioned element which inherits its 'top' value from its parent changes when the parent's 'top' value is changed.
dynamic-top-change-005 DOM/JS Inheriting 'top' changes from abspos grandparent
  • The position of a positioned element which inherits its 'top' value from its relatively positioned parent changes when the parent's 'top' value is changed.
dynamic-top-change-005a DOM/JS Inheriting 'top' changes from abspos grandparent (variant: block parent)
  • The position of a positioned element which inherits its 'top' value from its relatively positioned parent changes when the parent's 'top' value is changed.
dynamic-top-change-005b DOM/JS Inheriting 'top' changes from abspos grandparent (non-dynamic variant)
  • The position of a positioned element which inherits its 'top' value from its relatively positioned parent changes when the parent's 'top' value is changed.
left-004 Left using pixels with a value of negative zero, -0px
  • The 'left' property sets a negative zero length value in pixels.
left-005 Left using pixels with a value of zero, 0px
  • The 'left' property sets a zero length value in pixels.
left-006 Left using pixels with a value of positive zero, +0px
  • The 'left' property sets a positive zero length value in pixels.
left-007 Left using pixels with a nominal value, 96px
  • The 'left' property sets a nominal length value in pixels.
left-008 Left using pixels with a positive nominal value, +96px
  • The 'left' property sets a positive nominal length value in pixels.
left-016 Left using points with a value of negative zero, -0pt
  • The 'left' property sets a negative zero length value in points.
left-017 Left using points with a value of zero, 0pt
  • The 'left' property sets a zero length value in points.
left-018 Left using points with a value of positive zero, +0pt
  • The 'left' property sets a positive zero length value in points.
left-019 Left using points with a nominal value, 72pt
  • The 'left' property sets a nominal length value in points.
left-020 Left using points with a positive nominal value, +72pt
  • The 'left' property sets a positive nominal length value in points.
left-028 Left using picas with a value of negative zero, -0pc
  • The 'left' property sets a negative zero length value in picas.
left-029 Left using picas with a value of zero, 0pc
  • The 'left' property sets a zero length value in picas.
left-030 Left using picas with a value of positive zero, +0pc
  • The 'left' property sets a positive zero length value in picas.
left-031 Left using picas with a nominal value, 6pc
  • The 'left' property sets a nominal length value in picas.
left-032 Left using picas with a positive nominal value, +6pc
  • The 'left' property sets a positive nominal length value in picas.
left-040 Left using centimeters with a value of negative zero, -0cm
  • The 'left' property sets a negative zero length value in centimeters.
left-041 Left using centimeters with a value of zero, 0cm
  • The 'left' property sets a zero length value in centimeters.
left-042 Left using centimeters with a value of positive zero, +0cm
  • The 'left' property sets a positive zero length value in centimeters.
left-043 Left using centimeters with a nominal value, 2.54cm
  • The 'left' property sets a nominal length value in centimeters.
left-044 Left using centimeters with a positive nominal value, +2.54cm
  • The 'left' property sets a positive nominal length value in centimeters.
left-052 Left using millimeters with a value of negative zero, -0mm
  • The 'left' property sets a negative zero length value in millimeters.
left-053 Left using millimeters with a value of zero, 0mm
  • The 'left' property sets a zero length value in millimeters.
left-054 Left using millimeters with a value of positive zero, +0mm
  • The 'left' property sets a positive zero length value in millimeters.
left-055 Left using millimeters with a nominal value, 25.4mm
  • The 'left' property sets a nominal length value in millimeters.
left-056 Left using millimeters with a positive nominal value, +25.4mm
  • The 'left' property sets a positive nominal length value in millimeters.
left-064 Left using inches with a value of negative zero, -0in
  • The 'left' property sets a negative zero length value in inches.
left-065 Left using inches with a value of zero, 0in
  • The 'left' property sets a zero length value in inches.
left-066 Left using inches with a value of positive zero, +0in
  • The 'left' property sets a positive zero length value in inches.
left-067 Left using inches with a nominal value, 1in
  • The 'left' property sets a nominal length value in inches.
left-068 Left using inches with a positive nominal value, +1in
  • The 'left' property sets a positive nominal length value in inches.
left-076 Ahem Left using 'em' units with a value of negative zero, -0em
  • The 'left' property sets a negative zero length value in 'em' units.
left-077 Ahem Left using 'em' units with a value of zero, 0em
  • The 'left' property sets a zero length value in 'em' units.
left-078 Ahem Left using 'em' units with a value of positive zero, +0em
  • The 'left' property sets a positive zero length value in 'em' units.
left-079 Ahem Left using 'em' units with a nominal value, 6em
  • The 'left' property sets a nominal length value in 'em' units.
left-080 Ahem Left using 'em' units with a positive nominal value, +6em
  • The 'left' property sets a positive nominal length value in 'em' units.
left-088 Ahem Left using 'ex' units with a value of negative zero, -0ex
  • The 'left' property sets a negative zero length value in 'ex' units.
left-089 Ahem Left using 'ex' units with a value of zero, 0ex
  • The 'left' property sets a zero length value in 'ex' units.
left-090 Ahem Left using 'ex' units with a value of positive zero, +0ex
  • The 'left' property sets a positive zero length value in 'ex' units.
left-091 Ahem Left using 'ex' units with a nominal value, 6ex
  • The 'left' property sets a nominal length value in 'ex' units.
left-092 Ahem Left using 'ex' units with a positive nominal value, +6ex
  • The 'left' property sets a positive nominal length value in 'ex' units.
left-100 Left using percentages with a value of negative zero, -0%
  • The 'left' property sets a negative zero length value in percentages.
left-101 Left using percentages with a value of zero, 0%
  • The 'left' property sets a zero length value in percentages.
left-102 Left using percentages with a value of positive zero, +0%
  • The 'left' property sets a positive zero length value in percentages.
left-103 Left using percentages with a nominal value, 100%
  • The 'left' property sets a nominal length value in percentages.
left-104 Left using percentages with a positive nominal value, +100%
  • The 'left' property sets a positive nominal length value in percentages.
left-109 Left with a value of negative zero and no units, -0
  • The 'left' property sets a negative zero length value with no units.
left-110 Left with a value of zero and no units, 0
  • The 'left' property sets a zero length value with no units.
left-111 Left with a value of positive zero and no units, +0
  • The 'left' property sets a positive zero length value with no units.
left-112 Left with a value of 'auto'
  • The 'left' property sets a value of 'auto'.
left-113 Left with a value of 'inherit'
  • The 'left' property sets a value of 'inherit'.
left-applies-to-001 Left applied to element with 'display' set to 'table-row-group'
  • The 'left' property applies to elements with a display of 'table-row-group'.
left-applies-to-002 Left applied to element with 'display' set to 'table-header-group'
  • The 'left' property applies to elements with a display of 'table-header-group'.
left-applies-to-003 Left applied to element with 'display' set to 'table-footer-group'
  • The 'left' property applies to elements with a display of 'table-footer-group'.
left-applies-to-004 Left applied to element with 'display' set to 'table-row'
  • The 'left' property applies to elements with a display of 'table-row'.
left-applies-to-005 Left applied to element with 'display' set to 'table-column-group'
  • The 'left' property applies to elements with a display of 'table-column-group'.
left-applies-to-006 Left applied to element with 'display' set to 'table-column'
  • The 'left' property applies to elements with a display of 'table-column'.
left-applies-to-007 Left applied to element with 'display' set to 'table-cell'
  • The 'left' property applies to elements with a display of 'table-cell'.
left-applies-to-008 Ahem Left applied to element with 'display' set to inline
  • The 'left' property applies to elements with a display of inline.
left-applies-to-009 Left applied to element with 'display' set to block
  • The 'left' property applies to elements with a display of block.
left-applies-to-010 Left applied to element with 'display' set to list-item
  • The 'left' property applies to elements with a display of list-item.
left-applies-to-012 Left applied to element with 'display' set to inline-block
  • The 'left' property applies to elements with a display of inline-block.
left-applies-to-013 Left applied to element with 'display' set to 'table'
  • The 'left' property applies to elements with a display of 'table'.
left-applies-to-014 Left applied to element with 'display' set to 'inline-table'
  • The 'left' property applies to elements with a display of 'inline-table'.
left-applies-to-015 Left applied to element with 'display' set to 'table-caption'
  • The 'left' property applies to elements with a display of 'table-caption'.
left-offset-001 Absolute positioned elements with a left offset
  • Absolute positioned elements with a left offset, offsets the elements left margin edge from the left edge of the elements containing block.
left-offset-002 Position 'left' offset property - absolute length value and relative positioning
  • Relative positioned elements with a left offset, offsets with respect to the left edge of the box itself.
left-offset-003 Position 'left' property defines the offset from the left padding edge of the containing block for absolute positioning
  • The 'left' property, for absolute positioning, specifies the offset of the element in relation to the containing block's left padding edge.
left-offset-percentage-001 Left offset using percentage
  • Percentage offset values for the 'left' property are based off the width of the containing block.
left-offset-percentage-002 position absolute - left offset percentage and inherit
  • 'left: inherit' makes the left property take the same computed value as the left property for the element's parent; in the case of a percentage value, the computed value is the specified percentage value. 'left: [percentage]' refers to width of containing block.
position-absolute-percentage-inherit-001 position absolute - dimensions and position given by offset percentages and inherit
  • Absolutely positioned boxes can be dimensioned and positioned solely by setting offset 'top', 'right', 'bottom' and 'left' property values with percentage unit and then with inherit keyword. 'inherit' on a offset property makes such offset property take the same computed value as the offset property of the nearest positioned ancestor; in the case of a percentage value, the computed value is the specified percentage value of such nearest positioned ancestor.
right-004 Right using pixels with a value of negative zero, -0px
  • The 'right' property sets a negative zero length value in pixels.
right-005 Right using pixels with a value of zero, 0px
  • The 'right' property sets a zero length value in pixels.
right-006 Right using pixels with a value of positive zero, +0px
  • The 'right' property sets a positive zero length value in pixels.
right-007 Right using pixels with a nominal value, 96px
  • The 'right' property sets a nominal length value in pixels.
right-008 Right using pixels with a positive nominal value, +96px
  • The 'right' property sets a positive nominal length value in pixels.
right-016 Right using points with a value of negative zero, -0pt
  • The 'right' property sets a negative zero length value in points.
right-017 Right using points with a value of zero, 0pt
  • The 'right' property sets a zero length value in points.
right-018 Right using points with a value of positive zero, +0pt
  • The 'right' property sets a positive zero length value in points.
right-019 Right using points with a nominal value, 72pt
  • The 'right' property sets a nominal length value in points.
right-020 Right using points with a positive nominal value, +72pt
  • The 'right' property sets a positive nominal length value in points.
right-028 Right using picas with a value of negative zero, -0pc
  • The 'right' property sets a negative zero length value in picas.
right-029 Right using picas with a value of zero, 0pc
  • The 'right' property sets a zero length value in picas.
right-030 Right using picas with a value of positive zero, +0pc
  • The 'right' property sets a positive zero length value in picas.
right-031 Right using picas with a nominal value, 6pc
  • The 'right' property sets a nominal length value in picas.
right-032 Right using picas with a positive nominal value, +6pc
  • The 'right' property sets a positive nominal length value in picas.
right-040 Right using centimeters with a value of negative zero, -0cm
  • The 'right' property sets a negative zero length value in centimeters.
right-041 Right using centimeters with a value of zero, 0cm
  • The 'right' property sets a zero length value in centimeters.
right-042 Right using centimeters with a value of positive zero, +0cm
  • The 'right' property sets a positive zero length value in centimeters.
right-043 Right using centimeters with a nominal value, 2.54cm
  • The 'right' property sets a nominal length value in centimeters.
right-044 Right using centimeters with a positive nominal value, +2.54cm
  • The 'right' property sets a positive nominal length value in centimeters.
right-052 Right using millimeters with a value of negative zero, -0mm
  • The 'right' property sets a negative zero length value in millimeters.
right-053 Right using millimeters with a value of zero, 0mm
  • The 'right' property sets a zero length value in millimeters.
right-054 Right using millimeters with a value of positive zero, +0mm
  • The 'right' property sets a positive zero length value in millimeters.
right-055 Right using millimeters with a nominal value, 25.4mm
  • The 'right' property sets a nominal length value in millimeters.
right-056 Right using millimeters with a positive nominal value, +25.4mm
  • The 'right' property sets a positive nominal length value in millimeters.
right-064 Right using inches with a value of negative zero, -0in
  • The 'right' property sets a negative zero length value in inches.
right-065 Right using inches with a value of zero, 0in
  • The 'right' property sets a zero length value in inches.
right-066 Right using inches with a value of positive zero, +0in
  • The 'right' property sets a positive zero length value in inches.
right-067 Right using inches with a nominal value, 1in
  • The 'right' property sets a nominal length value in inches.
right-068 Right using inches with a positive nominal value, +1in
  • The 'right' property sets a positive nominal length value in inches.
right-076 Ahem Right using 'em' units with a value of negative zero, -0em
  • The 'right' property sets a negative zero length value in 'em' units.
right-077 Ahem Right using 'em' units with a value of zero, 0em
  • The 'right' property sets a zero length value in 'em' units.
right-078 Ahem Right using 'em' units with a value of positive zero, +0em
  • The 'right' property sets a positive zero length value in 'em' units.
right-079 Ahem Right using 'em' units with a nominal value, 6em
  • The 'right' property sets a nominal length value in 'em' units.
right-080 Ahem Right using 'em' units with a positive nominal value, +6em
  • The 'right' property sets a positive nominal length value in 'em' units.
right-088 Ahem Right using 'ex' units with a value of negative zero, -0ex
  • The 'right' property sets a negative zero length value in 'ex' units.
right-089 Ahem Right using 'ex' units with a value of zero, 0ex
  • The 'right' property sets a zero length value in 'ex' units.
right-090 Ahem Right using 'ex' units with a value of positive zero, +0ex
  • The 'right' property sets a positive zero length value in 'ex' units.
right-091 Ahem Right using 'ex' units with a nominal value, 7.5ex
  • The 'right' property sets a nominal length value in 'ex' units.
right-092 Ahem Right using 'ex' units with a positive nominal value, +7.5ex
  • The 'right' property sets a positive nominal length value in 'ex' units.
right-100 Right using percentages with a value of negative zero, -0%
  • The 'right' property sets a negative zero length value in percentages.
right-101 Right using percentages with a value of zero, 0%
  • The 'right' property sets a zero length value in percentages.
right-102 Right using percentages with a value of positive zero, +0%
  • The 'right' property sets a positive zero length value in percentages.
right-103 Right using percentages with a nominal value, 100%
  • The 'right' property sets a nominal length value in percentages.
right-104 Right using percentages with a positive nominal value, +100%
  • The 'right' property sets a positive nominal length value in percentages.
right-109 Right with a value of negative zero and no units, -0
  • The 'right' property sets a negative zero length value with no units.
right-110 Right with a value of zero and no units, 0
  • The 'right' property sets a zero length value with no units.
right-111 Right with a value of positive zero and no units, +0
  • The 'right' property sets a positive zero length value with no units.
right-112 Right with a value of 'auto'
  • The 'right' property sets a value of 'auto'.
right-113 Right with a value of 'inherit'
  • The 'right' property sets a value of 'inherit'.
right-applies-to-001 Right applied to element with 'display' set to 'table-row-group'
  • The 'right' property applies to elements with a display of 'table-row-group'.
right-applies-to-002 Right applied to element with 'display' set to 'table-header-group'
  • The 'right' property applies to elements with a display of 'table-header-group'.
right-applies-to-003 Right applied to element with 'display' set to 'table-footer-group'
  • The 'right' property applies to elements with a display of 'table-footer-group'.
right-applies-to-004 Right applied to element with 'display' set to 'table-row'
  • The 'right' property applies to elements with a display of 'table-row'.
right-applies-to-005 Right applied to element with 'display' set to 'table-column-group'
  • The 'right' property applies to elements with a display of 'table-column-group'.
right-applies-to-006 Right applied to element with 'display' set to 'table-column'
  • The 'right' property applies to elements with a display of 'table-column'.
right-applies-to-007 Right applied to element with 'display' set to 'table-cell'
  • The 'right' property applies to elements with a display of 'table-cell'.
right-applies-to-008 Right applied to element with 'display' set to inline
  • The 'right' property applies to elements with a display of inline.
right-applies-to-009 Right applied to element with 'display' set to block
  • The 'right' property applies to elements with a display of block.
right-applies-to-010 Right applied to element with 'display' set to list-item
  • The 'right' property applies to elements with a display of list-item.
right-applies-to-012 Right applied to element with 'display' set to inline-block
  • The 'right' property applies to elements with a display of inline-block.
right-applies-to-013 Right applied to element with 'display' set to 'table'
  • The 'right' property applies to elements with a display of 'table'.
right-applies-to-014 Right applied to element with 'display' set to 'inline-table'
  • The 'right' property applies to elements with a display of 'inline-table'.
right-applies-to-015 Right applied to element with 'display' set to 'table-caption'
  • The 'right' property applies to elements with a display of 'table-caption'.
right-offset-001 Position 'right' property defines the offset from the right edge of the containing block for absolute positioning
  • The 'right' property, for absolute positioning, specifies the offset of the element in relation to the containing block's right content edge.
right-offset-002 Position 'right' property defines the offset from the right of the box itself for relative positioning
  • The 'right' property, for relative positioning, specifies the offset of the box itself from the right toward the left. If 'left' is 'auto', then its computed value is minus the value of 'right' in which case the box will move from the right toward the left by the value of 'right'.
right-offset-003 Position 'right' property defines the offset from the right padding edge of the containing block for absolute positioning
  • The 'right' property, for absolute positioning, specifies the offset of the element in relation to the containing block's right padding edge.
right-offset-004 Bitmaps right box offset - position relative
  • The 'right' property, for relative positioning, specifies the offset of the box itself from its normal in-flow position, from the position it would have had if it had been static.
right-offset-percentage-001 Right offset using percentage
  • Percentage offset values for the 'right' property are based off the width of the containing block.
top-004 Top using pixels with a value of negative zero, -0px
  • The 'top' property sets a negative zero length value in pixels.
top-005 Top using pixels with a value of zero, 0px
  • The 'top' property sets a zero length value in pixels.
top-006 Top using pixels with a value of positive zero, +0px
  • The 'top' property sets a positive zero length value in pixels.
top-007 Top using pixels with a nominal value, 96px
  • The 'top' property sets a nominal length value in pixels.
top-008 Top using pixels with a positive nominal value, +96px
  • The 'top' property sets a positive nominal length value in pixels.
top-016 Top using points with a value of negative zero, -0pt
  • The 'top' property sets a negative zero length value in points.
top-017 Top using points with a value of zero, 0pt
  • The 'top' property sets a zero length value in points.
top-018 Top using points with a value of positive zero, +0pt
  • The 'top' property sets a positive zero length value in points.
top-019 Top using points with a nominal value, 72pt
  • The 'top' property sets a nominal length value in points.
top-020 Top using points with a positive nominal value, +72pt
  • The 'top' property sets a positive nominal length value in points.
top-028 Top using picas with a value of negative zero, -0pc
  • The 'top' property sets a negative zero length value in picas.
top-029 Top using picas with a value of zero, 0pc
  • The 'top' property sets a zero length value in picas.
top-030 Top using picas with a value of positive zero, +0pc
  • The 'top' property sets a positive zero length value in picas.
top-031 Top using picas with a nominal value, 6pc
  • The 'top' property sets a nominal length value in picas.
top-032 Top using picas with a positive nominal value, +6pc
  • The 'top' property sets a positive nominal length value in picas.
top-040 Top using centimeters with a value of negative zero, -0cm
  • The 'top' property sets a negative zero length value in centimeters.
top-041 Top using centimeters with a value of zero, 0cm
  • The 'top' property sets a zero length value in centimeters.
top-042 Top using centimeters with a value of positive zero, +0cm
  • The 'top' property sets a positive zero length value in centimeters.
top-043 Top using centimeters with a nominal value, 2.54cm
  • The 'top' property sets a nominal length value in centimeters.
top-044 Top using centimeters with a positive nominal value, +2.54cm
  • The 'top' property sets a positive nominal length value in centimeters.
top-052 Top using millimeters with a value of negative zero, -0mm
  • The 'top' property sets a negative zero length value in millimeters.
top-053 Top using millimeters with a value of zero, 0mm
  • The 'top' property sets a zero length value in millimeters.
top-054 Top using millimeters with a value of positive zero, +0mm
  • The 'top' property sets a positive zero length value in millimeters.
top-055 Top using millimeters with a nominal value, 25.4mm
  • The 'top' property sets a nominal length value in millimeters.
top-056 Top using millimeters with a positive nominal value, +25.4mm
  • The 'top' property sets a positive nominal length value in millimeters.
top-064 Top using inches with a value of negative zero, -0in
  • The 'top' property sets a negative zero length value in inches.
top-065 Top using inches with a value of zero, 0in
  • The 'top' property sets a zero length value in inches.
top-066 Top using inches with a value of positive zero, +0in
  • The 'top' property sets a positive zero length value in inches.
top-067 Top using inches with a nominal value, 1in
  • The 'top' property sets a nominal length value in inches.
top-068 Top using inches with a positive nominal value, +1in
  • The 'top' property sets a positive nominal length value in inches.
top-076 Ahem Top using 'em' units with a value of negative zero, -0em
  • The 'top' property sets a negative zero length value in 'em' units.
top-077 Ahem Top using 'em' units with a value of zero, 0em
  • The 'top' property sets a zero length value in 'em' units.
top-078 Ahem Top using 'em' units with a value of positive zero, +0em
  • The 'top' property sets a positive zero length value in 'em' units.
top-079 Ahem Top using 'em' units with a nominal value, 6em
  • The 'top' property sets a nominal length value in 'em' units.
top-080 Ahem Top using 'em' units with a positive nominal value, +6em
  • The 'top' property sets a positive nominal length value in 'em' units.
top-088 Ahem Top using 'ex' units with a value of negative zero, -0ex
  • The 'top' property sets a negative zero length value in 'ex' units.
top-089 Ahem Top using 'ex' units with a value of zero, 0ex
  • The 'top' property sets a zero length value in 'ex' units.
top-090 Ahem Top using 'ex' units with a value of positive zero, +0ex
  • The 'top' property sets a positive zero length value in 'ex' units.
top-091 Ahem Top using 'ex' units with a nominal value, 6ex
  • The 'top' property sets a nominal length value in 'ex' units.
top-092 Ahem Top using 'ex' units with a positive nominal value, +6ex
  • The 'top' property sets a positive nominal length value in 'ex' units.
top-100 Top using percentages with a value of negative zero, -0%
  • The 'top' property sets a negative zero length value in percentages.
top-101 Top using percentages with a value of zero, 0%
  • The 'top' property sets a zero length value in percentages.
top-102 Top using percentages with a value of positive zero, +0%
  • The 'top' property sets a positive zero length value in percentages.
top-103 Top using percentages with a nominal value, 100%
  • The 'top' property sets a nominal length value in percentages.
top-104 Top using percentages with a positive nominal value, +100%
  • The 'top' property sets a positive nominal length value in percentages.
top-109 Top with a value of negative zero and no units, -0
  • The 'top' property sets a negative zero length value with no units.
top-110 Top with a value of zero and no units, 0
  • The 'top' property sets a zero length value with no units.
top-111 Top with a value of positive zero and no units, +0
  • The 'top' property sets a positive zero length value with no units.
top-112 Top with a value of 'auto'
  • The 'top' property sets a value of 'auto'.
top-113 Top with a value of 'inherit'
  • The 'top' property sets a value of 'inherit', inheriting the value from the parent element.
top-applies-to-001 Top applied to element with 'display' set to 'table-row-group'
  • The 'top' property applies to elements with a display of 'table-row-group'.
top-applies-to-002 Top applied to element with 'display' set to 'table-header-group'
  • The 'top' property applies to elements with a display of 'table-header-group'.
top-applies-to-003 Top applied to element with 'display' set to 'table-footer-group'
  • The 'top' property applies to elements with a display of 'table-footer-group'.
top-applies-to-004 Top applied to element with 'display' set to 'table-row'
  • The 'top' property applies to elements with a display of 'table-row'.
top-applies-to-005 Top applied to element with 'display' set to 'table-column-group'
  • The 'top' property applies to elements with a display of 'table-column-group'.
top-applies-to-006 Top applied to element with 'display' set to 'table-column'
  • The 'top' property applies to elements with a display of 'table-column'.
top-applies-to-007 Top applied to element with 'display' set to 'table-cell'
  • The 'top' property applies to elements with a display of 'table-cell'.
top-applies-to-008 Top applied to element with 'display' set to inline
  • The 'top' property applies to elements with a display of inline.
top-applies-to-009 Top applied to element with 'display' set to block
  • The 'top' property applies to elements with a display of block.
top-applies-to-010 Top applied to element with 'display' set to list-item
  • The 'top' property applies to elements with a display of list-item.
top-applies-to-012 Top applied to element with 'display' set to inline-block
  • The 'top' property applies to elements with a display of inline-block.
top-applies-to-013 Top applied to element with 'display' set to 'table'
  • The 'top' property applies to elements with a display of 'table'.
top-applies-to-014 Top applied to element with 'display' set to 'inline-table'
  • The 'top' property applies to elements with a display of 'inline-table'.
top-applies-to-015 Top applied to element with 'display' set to 'table-caption'
  • The 'top' property applies to elements with a display of 'table-caption'.
top-offset-001 Position 'top' property defines the offset from the top edge of the containing block for absolute positioning
  • The 'top' property, for absolute positioning, specifies the offset of the element in relation to the containing block's top edge. The containing block of an absolutely positioned element is formed by the padding box of its nearest (closest) positioned ancestor element.
top-offset-002 Position 'top' offset property - absolute length value and relative positioning
  • The 'top' property, when using an absolute length value (not percentage) for relative positioning, specifies the offset of the box itself.
top-offset-003 Position 'top' property defines the offset from the top edge of the containing block
  • The 'top' property, for absolute positioning, specifies the offset of the element in relation to the containing block's top padding edge.
top-offset-percentage-001 Top offset using percentage
  • Percentage offset values for the 'top' property are based off the height of the containing block.
top-offset-percentage-002 position absolute - top offset percentage and inherit
  • 'top: inherit' makes the top property take the same computed value as the top property for the element's parent; in the case of a percentage value, the computed value is the specified percentage value. 'top: [percentage]' refers to height of containing block.
+ 9.4 Normal flow
+ 9.4.1 Block formatting contexts
block-formatting-contexts-001 Vertical layout of boxes
  • Boxes are vertically laid out one after the other beginning at the top of a containing block.
block-formatting-contexts-003 Vertical distance with margins
  • The vertical distance between two sibling boxes is determined by the margin property.
block-formatting-contexts-004 AhemBitmaps Block Formatting Contexts: Margin Collapsing
  • Margins collapse between adjacent block boxes in a block formatting context.
block-formatting-contexts-005 No padding or margin, left edges touch
  • When there is no padding or margins on elements the left outer edge of the child box will touch the left edge of the containing block.
block-formatting-contexts-006 No padding and margin, right edges touch
  • When there is no padding or margins on elements the right outer edge of the child box will touch the right edge of the containing block.
block-formatting-contexts-007 Floats and box edges
  • When there is no padding or margins on a floated child element the left outer edge of the child box will touch the left edge of the containing block.
block-formatting-contexts-008 New block formatting context with floated elements
  • Floated elements establish new block formatting context.
block-formatting-contexts-009 New block formatting context with absolute positioned elements
  • Absolutely positioned elements establish a new block formatting context.
block-formatting-contexts-010 Inline-block elements establish a new block formatting context
  • Elements defined as inline-blocks establish a new block formatting context.
block-formatting-contexts-011 Table-cell elements establish a new block formatting context
  • Elements defined as table-cell elements establish a new block formatting context.
block-formatting-contexts-012 Table-caption elements establish a new block formatting context
  • Elements with display table-caption establish a new block formatting context.
block-formatting-contexts-013 Overflow set to 'scroll' establishes a new block formatting context
  • A new block formatting context is established when overflow is set to 'scroll'.
block-formatting-contexts-014 Overflow set to 'auto' establishes a new block formatting context
  • A new block formatting context is established when overflow is set to 'auto'.
block-formatting-contexts-015 Overflow set to 'hidden' establishes a new block formatting context
  • A new block formatting context is established when overflow is set to 'hidden'.
block-formatting-contexts-016 Block formatting contexts and 'overflow' set to 'visible'
  • Overflow set to 'visible' does not establish a new block formatting context.
+ 9.4.2 Inline formatting context
c42-ibx-pad-000 AhemBitmaps Inline Elements
empty-inline-001 Empty inline elements
  • Empty inline elements create a zero-height line box.
inline-formatting-context-001 Inline formatting context and basic horizontal Layout
  • Inline boxes are laid out horizontally or one after the other starting at the top of the containing block.
inline-formatting-context-002 Inline formatting context with a horizontal left margins
  • Horizontal left margins are respected between inline boxes.
inline-formatting-context-003 Inline formatting context with a horizontal right margins
  • Horizontal right margins are respected between inline boxes.
inline-formatting-context-004 Inline formatting context with a left border
  • Left borders are respected between inline boxes.
inline-formatting-context-005 Inline formatting context with a right border
  • Right borders are respected between inline boxes.
inline-formatting-context-006 Inline formatting context with left padding
  • Left padding are respected between inline boxes.
inline-formatting-context-007 Inline formatting context with right padding
  • Right padding are respected between inline boxes.
inline-formatting-context-008 Ahem Inline element widths are determined by the containing block
  • Inline element width is determined by the containing block.
inline-formatting-context-009 Ahem Inline element widths are determined by the containing block and floated elements
  • Inline element width is determined by the containing block and any floated elements.
inline-formatting-context-010 Ahem Line boxes are tall enough for all boxes
  • A line box is always tall enough to contain all the boxes in the line.
inline-formatting-context-011 Ahem Vertical-align and alignment of inline boxes
  • The 'vertical-align' property determines the vertical alignment of a box within a line box.
inline-formatting-context-012 Inline boxes vertically stack if they do not fit horizontally
  • Inline boxes stack vertically when they do not fit within an element horizontally.
inline-formatting-context-013 Ahem Wrapping inline boxes and vertical spacing
  • Line boxes are stacked with no vertical separation and they never overlap.
inline-formatting-context-014 Ahem Line boxes span the container
  • Line boxes span the entire width of a container unless constrained by floats.
inline-formatting-context-015 Line boxes next to floats
  • Line boxes adjust for floated elements.
inline-formatting-context-016 Line box distribution with the 'text-align' property
  • When the inline box is wider than the line boxes the 'text-align' property is used to align the line boxes.
inline-formatting-context-017 Optional Text-align 'justify' and space and word stretching
  • If 'text-align' is set to 'justify' the user agent may stretch spaces and/or words.
inline-formatting-context-018 Text-align 'justify' and 'inline-table' elements
  • If 'text-align' is set to 'justify' the user agent does not stretch spaces and/or words when the 'display' property is set to 'inline-table'.
inline-formatting-context-019 Text-align 'justify' and 'inline-block' elements
  • If 'text-align' is set to 'justify' the user agent does not stretch spaces and/or words when the 'display' property is set to 'inline-block'.
inline-formatting-context-020 Inline boxes exceeding the line box
  • Inline boxes are split onto additional lines if the line box does not fit within the width.
inline-formatting-context-021 Inline boxes exceeding the line box and overflowing
  • If inline boxes cannot be split (i.e.: white-space: nowrap) then the inline box overflows the line box.
inline-formatting-context-022 AhemBitmaps Inline boxes that are split and the margin, border, padding effect
  • Margins, borders and padding have no visual effect when inline boxes are split.
inline-formatting-context-023 Bidirectional text runs can create additional line boxes
  • Additional inline boxes can be created for the bidirectional text.
inlines-001 CSS Inline Box Model: Layering Model
inlines-009 AhemBitmaps CSS Inline Box Model: Behaviour near cells (specified line height)
inlines-010 AhemBitmaps CSS Inline Box Model: Behaviour near cells (normal line height)
inlines-011 Bitmaps CSS Inline Box Model: Baseline alignment of images
inlines-012 Bitmaps CSS Inline Box Model: Baseline alignment of images
+ 9.4.3 Relative positioning
position-relative-003 Relative positioning with auto
  • The position of a relatively positioned element with left and right set to auto the values compute to zero.
position-relative-037 Relative positioning with over-constained situation and direction left-to-right
  • Relative positioning with left and right values and over-constrained situations when direction is left-to-right.
position-relative-038 Relative positioning with over-constained situation and direction right-to-left
  • Relative positioning with left and right values and over-constrained situations when direction is right-to-left.
relpos-calcs-001 Relative Positioning - auto top = -bottom
  • For a relatively positioned element, if 'top' is 'auto', its used value is minus the value of 'bottom'.
relpos-calcs-002 Relative Positioning - auto bottom = -top
  • For a relatively positioned element, if 'bottom' is 'auto', its used value is minus the value of 'top'.
relpos-calcs-003 Relative Positioning - Computing auto left = -right
  • For a relatively positioned element, if 'left' is 'auto', its used value is minus the value of 'right'.
relpos-calcs-004 Relative Positioning - auto right = -left
  • For a relatively positioned element, if 'right' is 'auto', its used value is minus the value of 'left'.
relpos-calcs-005 Relative Positioning - overconstrained left = -right (LTR)
  • For a relatively positioned element in an LTR containing block, if neither 'left' nor 'right' is 'auto', used value of 'right' is minus the value of 'left'.
relpos-calcs-006 Relative Positioning - overconstrained left = -right (RTL)
  • For a relatively positioned element in an RTL containing block, if neither 'left' nor 'right' is 'auto', used value of 'left' is minus the value of 'right'.
relpos-calcs-007 Relative Positioning - overconstrained top = -bottom
  • For a relatively positioned element, if neither 'top' nor 'bottom' is 'auto', used value of 'bottom' is minus the value of 'top'.
+ 9.5 Floats
adjacent-floats-001 Multiple floated boxes adjacent to each other
  • Floated boxes are allowed to be next to each other.
c414-flt-fit-000 Stacking Non-Replaced Left Floats
c414-flt-fit-001 Bitmaps Stacking Replaced Left Floats
c414-flt-fit-002 Stacking Mixed Floats Part I
c414-flt-fit-003 Stacking Mixed Floats Part II
c414-flt-fit-004 Stacking Mixed Floats Part III
c414-flt-fit-005 Non-Replaced Float Not Fitting Beside Opposite Float
c414-flt-fit-006 Bitmaps Replaced Float Not Fitting Beside Opposite Float
c414-flt-wrap-000 Text Not Fitting Beside Non-Replaced Float
  • If a shortened line box is too small to contain any further content, then it is shifted downward until either it fits or there are no more floats present.
c414-flt-wrap-001 Bitmaps Text Not Fitting Beside Replaced Float
c5525-fltblck-000 AhemBitmaps float
c5525-fltblck-001 float
c5525-fltcont-000 Bitmaps float
c5525-fltinln-000 AhemBitmaps float
c5525-fltmrgn-000 AhemBitmaps float
c5525-fltmult-000 Bitmaps float
c5525-fltwidth-000 Bitmaps float
c5525-fltwidth-001 Bitmaps float
c5525-fltwidth-002 Bitmaps float
c5525-fltwidth-003 Bitmaps float
c5525-fltwrap-000 float
c5526-fltclr-000 AhemBitmaps clear
c5526-flthw-000 Bitmaps clear
float-005 Ahem float
  • A non-positioned block box created after a float box should flow vertically as if the float did not exist. The line boxes created next to the float should be shortened to make room for that preceding floated box.
float-006 floats - zero height empty float
  • A zero-height (margin-box) empty float without border and without padding will not require the line box to be shortened; in such case, the zero-height (margin-box) empty float will slide in or will fit in at the top of the line box.
floats-001 Floats, shifting left until it touches container edge
  • A left floated box shifts left until its outer edge touches the containing block edge.
floats-002 Floats, shifting right until it touches container edge
  • A right floated box shifts right until its outer edge touches the containing block edge.
floats-003 Floats, shifting left until touching other floats
  • A left floated box shifts left until it touches another float.
floats-004 Floats, shifting right until touching other floats
  • A right floated box shifts right until it touches another float.
floats-005 Bitmaps Floats, shifting down below all other floated elements
  • Floated boxes shift down until it fits.
floats-006 Ahem Left floats interacting with inline content
  • Inline boxes are reflowed to the first available line on the other side of a float.
floats-007 Floated elements shifting down below non-floated elements
  • Left floated boxes shift down until next to another float and there is room to fit.
floats-008 Floats and block box flow
  • Block boxes flow vertically as if floats don't exist.
floats-009 Ahem Right floats interacting with right-to-left inline content
  • Inline boxes are reflowed to the first available line on the other side of a float for right-to-left.
floats-014 Left floated element margins do not collapse
  • Floating boxes never collapse with margins of adjacent floats or other boxes.
floats-015 Right floated elements margins do not collapse
  • Right floating boxes never collapse with margins of adjacent boxes or other floats.
floats-016 Floated elements stacked with blocks and inline elements
  • Floated elements are rendered in front of non-positioned in-flow blocks but behind in-flow inline boxes when a normal flow box is next to a floated element with negative margins.
floats-019 Float applied to absolutely positioned elements
  • Float cannot be applied to absolutely positioned element.
floats-020 Left floated elements and text wrapping
  • Block box is generated and floated to left and content flows on right side starting at the top.
floats-021 Right floated elements and text wrapping
  • Block box is generated and floated to right and content flows on left side starting at the top.
floats-022 Elements do not float when 'float' is set to 'none'
  • An element with 'float: none' behaves as if it were never set to begin with.
floats-023 Floated elements and container edges
  • Left floated boxes cannot go past the container's left edge.
floats-024 Left float with earlier floated siblings
  • Left floated box is to right of earlier floated box or below the earlier floated element's bottom edge.
floats-025 Right floating elements and container edge
  • Right floated boxes cannot go past the container's right edge.
floats-026 Margin affects left floated elements
  • Right outer edge of left-floating box cannot be to the right of the left outer edge of any right-floating box that is to the right of it.
floats-027 Margin affects right floated elements
  • Right outer edge of left-floating box cannot be to the right of the left outer edge of any right-floating box that is to the right of it.
floats-028 Floats and containment
  • Floating box's outer top cannot be higher than the top of its containing block.
floats-029 Content flowing around floated elements
  • Floats shift the current line and surrounding content to flow along its side unless clear is specified.
floats-030 Bitmaps Position of floated elements in relation to previous elements
  • Outer top of a floating box cannot be higher than the outer top of any block or floated box generated by an element earlier in the source document.
floats-031 Bitmaps Position of floated elements in relation to previous inline elements
  • Outer top of floating box cannot be higher than the top of any line-box containing a box generated by an element earlier in the source document.
floats-036 Floated left and aligned with current line box
  • A floated elements top edge will be aligned with the top of a line box.
floats-037 Floated right element aligns with current line box
  • A line box aligns with the top of a right floated box.
floats-038 Floats and table margins
  • The border box of a table cannot overlap any floats in the same block formatting context as the elements itself.
floats-039 Bitmaps Floats and block level replaced element margins
  • The border box of a block level replaced element cannot overlap any floats in the same block formatting context as the element itself.
floats-040 Floats inline-block level element margins
  • The border box of a inline-block level element cannot overlap any floats in the same block formatting context as the element itself.
floats-041 Floats and stacking contexts with content
  • The contents of floats are stacked as if floats generated new stacking contexts.
floats-043 Right float with earlier floated siblings
  • A right floated box is to left of earlier floated boxes or below the earlier floated element's bottom edge.
floats-101 CSS Floats: Nested floats (no other content)
floats-102 CSS Floats: Nested floats (some inline content before nested float)
floats-103 CSS Floats: Nested floats (some inline content after nested float)
floats-104 CSS Floats: Unexpected Presences, Part 1
floats-105 CSS Floats: Unexpected Presences, Part 2
floats-106 CSS Floats: Unexpected Presences, Part 3
floats-108 Interact CSS Floats: Float Sizing (styled floats)
floats-109 Interact CSS Floats: Float Sizing (blocks inside styled floats)
floats-110 CSS Floats: Float Sizing
floats-111 CSS Floats: Shrink Wrapped Right Floats With Right Aligned Text
floats-112 CSS Floats: Shrink Wrapped Right Floats With Right Aligned Text
floats-113 CSS Floats: Shrink Wrapped Right Floats With Right Aligned Text
floats-114 CSS Floats: Generated Content
floats-115 CSS Floats: Auto Sizing
floats-116 CSS Floats: Auto Sizing (with padding)
floats-117 CSS Floats: Auto Sizing (with border)
floats-118 CSS Floats: Auto Sizing
floats-119 CSS Floats: Auto Sizing (with padding)
floats-120 CSS Floats: Auto Sizing (with border)
floats-121 CSS Floats: Fixed Sizing (with border)
floats-122 CSS Floats: Auto Sizing Float Followed By Text
floats-123 CSS Floats: Auto Sizing (with relative positioning)
floats-124 CSS Floats: Bottom Padding on Inline Children
floats-125 CSS Floats: Bottom Padding on Inline Children
floats-126 Interact CSS Floats: Float Sizing (styled floated tables)
floats-127 Interact CSS Floats: Float Sizing (styled floated tables)
floats-128 Interact CSS Floats: Float Sizing (styled blocks within floated tables)
floats-129 Interact CSS Floats: Float Sizing (styled floated tables within tables)
floats-130 Interact CSS Floats: Float Sizing (blocks within styled floated tables within tables)
floats-131 Interact CSS Floats: Float Sizing (styled blocks within floated tables within tables)
floats-132 CSS Floats: Wrapping long text
floats-133 CSS Floats: Wrapping text and position:static
floats-134 CSS Floats: Wrapping text and position:relative
floats-135 CSS Floats: Wrapping blocks around floats
floats-136 CSS Floats: Wrapping blocks around floats
floats-137 AhemAnimated Wrapping text around multiple floats
floats-138 Clearing a float with margins
floats-139 Floats: Ultra basic test
floats-140 Floats: negative margin test
floats-141 Floats: No higher than earlier floats
floats-142 Floats: negative margin test
floats-143 Nested floats: Basic
floats-144 Floats inside blocks
floats-145 Bottom margins on floats
floats-146 Floats: No higher than earlier floats
floats-147 Floats: No more to the right than the right edge of the containing block
floats-149 Empty inlines being displaced by floats
floats-150 Positioning of floats in tables: auto-width floats with negative outer width
floats-151 Positioning of floats in tables: auto-width floats with negative outer width
floats-152 Positioning of floats in tables: zero-width floats with negative outer width
floats-153 Positioning of floats in tables: zero-width floats with negative outer width
floats-154 Stacking contexts of relatively positioned content inside floats
floats-bfc-001 Floats with overflow:hidden next to them
floats-bfc-002 Floats with overflow:hidden next to them
floats-rule3-outside-left-001 = float placement around other float in BFC but outside containing block
  • Test for float placement around other float in BFC but outside containing block
floats-rule3-outside-left-002 = float placement around other float in BFC but outside containing block
  • Test for float placement around other float in BFC but outside containing block
floats-rule3-outside-right-001 = float placement around other float in BFC but outside containing block
  • Test for float placement around other float in BFC but outside containing block
floats-rule3-outside-right-002 = float placement around other float in BFC but outside containing block
  • Test for float placement around other float in BFC but outside containing block
floats-rule7-outside-left-001 = float placement around other float in BFC but outside containing block
  • Test for float placement around other float in BFC but outside containing block
floats-rule7-outside-right-001 = float placement around other float in BFC but outside containing block
  • Test for float placement around other float in BFC but outside containing block
floats-wrap-bfc-001-left-overflow = Test for flow around floats
  • The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself.
floats-wrap-bfc-001-left-table = Test for flow around floats
  • The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself.
floats-wrap-bfc-001-right-overflow = Test for flow around floats
  • The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself.
floats-wrap-bfc-001-right-table = Test for flow around floats
  • The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself.
floats-wrap-bfc-002-left-overflow = Test for flow around floats
  • The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself.
floats-wrap-bfc-002-left-table = Test for flow around floats
  • The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself.
floats-wrap-bfc-002-right-overflow = Test for flow around floats
  • The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself.
floats-wrap-bfc-002-right-table = Test for flow around floats
  • The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself.
floats-wrap-bfc-003-left-overflow = Test for flow around floats
  • The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself.
floats-wrap-bfc-003-left-table = Test for flow around floats
  • The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself.
floats-wrap-bfc-003-right-overflow = Test for flow around floats
  • The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself.
floats-wrap-bfc-003-right-table = Test for flow around floats
  • The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself.
floats-wrap-bfc-004 = Test for flow around floats
  • The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself.
floats-wrap-bfc-005 = Test for flow around floats
  • The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself.
floats-wrap-bfc-006 = Test for flow around floats
  • The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself.
floats-wrap-bfc-007 = Test for flow around floats
  • The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself.
floats-wrap-bfc-outside-001 = float
floats-wrap-top-below-bfc-001l = ≠ Test for wrapping around floats whose top is below the top of what must wrap around them
  • The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself.
floats-wrap-top-below-bfc-001r = ≠ Test for wrapping around floats whose top is below the top of what must wrap around them
  • The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself.
floats-wrap-top-below-bfc-002l = Test for wrapping around floats whose top is below the top of what must wrap around them
  • The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself.
floats-wrap-top-below-bfc-002r = Test for wrapping around floats whose top is below the top of what must wrap around them
  • The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself.
floats-wrap-top-below-bfc-003l = Test for wrapping around floats whose top is below the top of what must wrap around them
  • The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself.
floats-wrap-top-below-bfc-003r = Test for wrapping around floats whose top is below the top of what must wrap around them
  • The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself.
floats-wrap-top-below-inline-001l = ≠ Test for wrapping around floats whose top is below the top of what must wrap around them
  • However, line boxes created next to the float are shortened to make room for the margin box of the float.
floats-wrap-top-below-inline-001r = ≠ Test for wrapping around floats whose top is below the top of what must wrap around them
  • However, line boxes created next to the float are shortened to make room for the margin box of the float.
floats-wrap-top-below-inline-002l = Test for wrapping around floats whose top is below the top of what must wrap around them
  • However, line boxes created next to the float are shortened to make room for the margin box of the float.
floats-wrap-top-below-inline-002r = Test for wrapping around floats whose top is below the top of what must wrap around them
  • However, line boxes created next to the float are shortened to make room for the margin box of the float.
floats-wrap-top-below-inline-003l = Test for wrapping around floats whose top is below the top of what must wrap around them
  • However, line boxes created next to the float are shortened to make room for the margin box of the float.
floats-wrap-top-below-inline-003r = Test for wrapping around floats whose top is below the top of what must wrap around them
  • However, line boxes created next to the float are shortened to make room for the margin box of the float.
floats-zero-height-wrap-001 = wrapping around zero-height floats
  • wrapping around zero-height floats
floats-zero-height-wrap-002 = wrapping around zero-height floats
  • wrapping around zero-height floats
list-style-position-008 Marker box position (outside principal box) - floated-left child
  • A floated element (as a child of the principal box) should not affect the horizontal position of the marker box (positioned outside principal box) in relation to the principal box's content
list-style-position-009 Marker box position (outside principal box) - floated-right child
  • A floated element (as a child of the principal box) should not affect the horizontal position of the marker box (positioned outside principal box) in relation to the principal box's content
margin-collapse-clear-005 Optional Margin Collapsing with Clearance
margin-collapse-clear-006 Margin Collapsing with Clearance
margin-collapse-clear-007 Margin Collapsing with Clearance
margin-collapse-clear-008 Margin Collapsing with Clearance
margin-collapse-clear-009 Margin Collapsing with Clearance
margin-collapse-clear-010 Margin Collapsing with Clearance
margin-collapse-clear-011 Optional Margin Collapsing with Clearance
max-height-106 Ahem max-height - float and overflow
max-width-106 Ahem max-width - float and overflow
  • 'max-width' specifies a fixed maximum used width. If the used width is greater than max-width, then the computed value of max-width is used as the computed value for width. A floated box should not become wider than its declared max-width.
stack-floats-001 Stacking order: Floats and Blocks in Inlines
stack-floats-002 Stacking order: Floats and Blocks in Inlines
stack-floats-003 Stacking order: Floats and Blocks in Inlines
stack-floats-004 Stacking order: Floats and Blocks in Inlines
+ 9.5.1 Positioning the float: the 'float' property
c414-flt-000 Non-Replaced Float Alignment to Containing Block Edges
  • A floated box is shifted to the left or right until its outer edge touches the containing block edge.
c414-flt-001 Non-Replaced Floating Left vs. Right
c414-flt-002 Bitmaps Replaced Float Alignment to Containing Block Edges
c414-flt-003 Bitmaps Replaced Floating Left vs. Right
c414-flt-ln-000 Vertical Position of Floats
c414-flt-ln-001 Bitmaps Vertical Position of Floats
c414-flt-ln-002 Interact Vertical Position of Floats
c414-flt-ln-003 Vertical Position of Floats
c5525-flt-l-000 Bitmaps Floating Elements
c5525-flt-r-000 Bitmaps float
c5525-fltcont-000 Bitmaps float
c5525-fltmult-000 Bitmaps float
float-001 Float set to 'left'
  • The 'float' property set to 'left' correctly aligns the element to the left and text/objects flow around it.
float-002 Float set to 'right'
  • The 'float' property set to 'right' correctly aligns the element to the right and text/objects flow around it.
float-003 Float set to 'none'
  • The 'float' property set to 'none' does not float the element.
float-004 Float set to 'inherit'
  • The 'float' property set to 'inherit' correctly inherits the value from the parent element.
float-applies-to-001 Float applied to element with 'display' set to 'table-row-group'
  • The 'float' property applies to elements with a display of 'table-row-group'.
float-applies-to-002 Float applied to element with 'display' set to 'table-header-group'
  • The 'float' property applies to elements with a display of 'table-header-group'.
float-applies-to-003 Float applied to element with 'display' set to 'table-footer-group'
  • The 'float' property applies to elements with a display of 'table-footer-group'.
float-applies-to-004 Float applied to element with 'display' set to 'table-row'
  • The 'float' property applies to elements with a display of 'table-row'.
float-applies-to-005 Float applied to element with 'display' set to 'table-column-group'
  • The 'float' property applies to elements with a display of 'table-column-group'.
float-applies-to-006 Float applied to element with 'display' set to 'table-column'
  • The 'float' property applies to elements with a display of 'table-column'.
float-applies-to-007 Float applied to element with 'display' set to 'table-cell'
  • The 'float' property applies to elements with a display of 'table-cell'.
float-applies-to-008 Float applied to element with 'display' set to inline
  • The 'float' property applies to elements with a display of inline.
float-applies-to-009 Float applied to element with 'display' set to block
  • The 'float' property applies to elements with a display of block.
float-applies-to-010 Float applied to element with 'display' set to list-item
  • The 'float' property applies to elements with a display of list-item.
float-applies-to-012 Float applied to element with 'display' set to inline-block
  • The 'float' property applies to elements with a display of inline-block.
float-applies-to-013 Float applied to element with 'display' set to 'table'
  • The 'float' property applies to elements with a display of 'table'.
float-applies-to-014 Float applied to element with 'display' set to 'inline-table'
  • The 'float' property applies to elements with a display of 'inline-table'.
float-applies-to-015 Float applied to element with 'display' set to 'table-caption'
  • The 'float' property applies to elements with a display of 'table-caption'.
floats-placement-vertical-001a = Test for float placement rules
  • A floating box must be placed as high as possible.
floats-placement-vertical-001b = Test for float placement rules
  • A floating box must be placed as high as possible.
floats-placement-vertical-001c = Test for float placement rules
  • A floating box must be placed as high as possible.
floats-placement-vertical-003 = Test for float placement rules
  • The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.
  • A floating box must be placed as high as possible.
floats-placement-vertical-004 = = Test for float placement rules
  • A floating box must be placed as high as possible.
inlines-013 Bitmaps Inline box model: space taken by images before floats
list-style-position-006 Marker box position (inside principal box) - block box with 'float:left' (as child of principal box)
  • Since a marker box is the first inline element in the principal box when 'list-style-position:inside', the following block box (floated to the left) must visually appear before the marker box in the rendered document
list-style-position-007 Marker box position (inside principal box) - block box with 'float:right' (as child of principal box)
list-style-position-014 Marker box position (outside principal box) - floated :before pseudo-element list-item ('list-style-position:inside')
  • When the :before element is set as a list-item, it establishes a principal box into which a marker box is placed (when 'list-style-position:inside). Since this :before pseudo element is floated left, the document tree content of the associated element must appear alongside (after) this :before pseudo element. The position of the marker box of the associated element must not be affected, as it must still appear to the outside left edge of it's principal box (since 'list-style-position:outside').
list-style-position-015 Marker box position (inside principal box) - floated :before pseudo-element list-item ('list-style-position:outside')
  • When the :before element is set as a list-item, it establishes a principal box and a marker box which is positioned outside of that principal box (since 'list-style-position:outside). Since this :before pseudo element is floated left, the principal box (and marker box, since 'list-style-position:inside') of the associated element must appear alongside (after) this :before pseudo element. The position of the marker box of the :before pseudo element must still appear to the outside left edge of it's associated element's principal box (since 'list-style-position:outside').
list-style-position-016 Marker box position (inside principal box) - floated :before pseudo-element list-item ('list-style-position:inside')
  • When the :before element is set as a list-item, it establishes a principal box into which a marker box is placed (when 'list-style-position:inside). Since the :before pseudo element is floated left, the principal box (and marker box, since 'list-style-position:inside') of the associated element must appear alongside (after) the :before pseudo element.
list-style-position-017 Marker box position (outside principal box) - floated :before pseudo-element list-item ('list-style-position:outside')
  • When the :before element is set as a list-item, it establishes a principal box into which a marker box is placed (when 'list-style-position:inside). Since the :before pseudo element is floated left, The document tree content of the associated element must appear alongside (after) the :before pseudo element. Since the marker box of the :before pseudo element should be positioned at the same coordinate as the associated element's marker box, either bullet could appear in front of the other (since stacking levels of marker boxes aren't defined in CSS2.1, in this context).
+ 9.5.2 Controlling flow next to floats: the 'clear' property
c5526-fltclr-000 AhemBitmaps clear
clear-001 Clear set to 'left'
  • The 'clear' property set to a value of 'left' positions the current element to clear left-floated elements.
clear-002 Clear set to 'right'
  • The 'clear' property set to a value of 'right' positions the current element to clear right-floated elements.
clear-003 Clear set to 'both'
  • The 'clear' property set to a value of 'both' positions the current element to clear both left- and right-floated elements.
clear-004 Clear set to 'none'
  • The 'clear' property set to a value of 'none' does not perform any clearing of floated elements.
clear-005 Clear set to 'inherit'
  • The 'clear' property set to 'inherit', inherits the computed value from the parent element.
clear-applies-to-000 Clear on floats after floats with display:none blocks between them
clear-applies-to-001 Clear applied to element with 'display' set to 'table-row-group'
  • The 'clear' property does not apply to elements with a display of 'table-row-group'.
clear-applies-to-002 Clear applied to element with 'display' set to 'table-header-group'
  • The 'clear' property does not apply to elements with a display of 'table-header-group'.
clear-applies-to-003 Clear applied to element with 'display' set to 'table-footer-group'
  • The 'clear' property does not apply to elements with a display of 'table-footer-group'.
clear-applies-to-004 Clear applied to element with 'display' set to 'table-row'
  • The 'clear' property does not apply to elements with a display of 'table-row'.
clear-applies-to-005 Clear applied to element with 'display' set to 'table-column-group'
  • The 'clear' property does not apply to elements with a display of 'table-column-group'.
clear-applies-to-006 Clear applied to element with 'display' set to 'table-column'
  • The 'clear' property does not apply to elements with a display of 'table-column'.
clear-applies-to-007 Clear applied to element with 'display' set to 'table-cell'
  • The 'clear' property does not apply to elements with a display of 'table-cell'.
clear-applies-to-008 Clear on inline elements
  • The 'clear' property does not apply to elements with a display of 'inline'.
clear-applies-to-009 Clear applied to element with 'display' set to block
  • The 'clear' property applies to elements with a display of block.
clear-applies-to-010 Clear applied to element with 'display' set to list-item
  • The 'clear' property applies to elements with a display of list-item.
clear-applies-to-012 Clear applied to element with 'display' set to inline-block
  • The 'clear' property does not apply to elements with a display of 'inline-block'.
clear-applies-to-013 Clear applied to element with 'display' set to 'table'
  • The 'clear' property does apply to elements with a display of 'table'.
clear-applies-to-014 Clear applied to element with 'display' set to 'inline-table'
  • The 'clear' property does not apply to elements with a display of 'inline-table'.
clear-applies-to-015 Clear applied to element with 'display' set to 'table-caption'
  • The 'clear' property does not apply to elements with a display of 'table-caption'.
clear-clearance-calculation-001 AhemBitmaps Clearance calculations - clear box non-collapsing margins with larger margings than clearance
  • When a cleared element has more top margin than the height of the floated element the margin is collpased with previous in-flow children. The element is then placed at the point of the resulting collapsed margin.
clear-clearance-calculation-002 AhemBitmaps Clearance calculations - clear box non-collapsing margins with larger clearance than margins
  • If after margin collapsing the position of the cleared element is above or hypothetically positioned within the layout position of the float. Then the cleared element is positioned directly below the floated element.
clear-clearance-calculation-003 Clearance calculations - clear box collapsing margins
  • When a cleared element has more top margin than the height of the floated element the margin is collpased with previous in-flow children. The element is then placed at the point of the resulting collapsed margin.
clear-clearance-calculation-004 clear and clearance calculation - margin collapsing
  • With clear: left, the top border edge of the last paragraph must be below the floating paragraph, i.e., 50px lower. That means that the margin-bottom of the first paragraph must not collapse with the margin-top of the last paragraph and clearance must be added such that clearance + margin-top of last paragraph = 50px, i.e., clearance = 50px - margin-top of last paragraph = 50px - 75px = - 25px.
clear-clearance-calculation-005 clear and clearance calculation - margin collapsing
  • With clear: none, the first and last paragraphs' margins collapse and the last paragraph's top border edge should be flush with the top of the floating paragraph.
clear-default-inheritance-001 Clear default inheritance
  • The 'clear' property is not inherited by default from the parent element.
clear-float-001 Child elements are not impacted by 'clear'
  • Child elements of the container are not impacted by clear.
clear-float-002 Clearance of floats and top margin affect
  • Clearance is introduced as spacing above the top margin.
clear-float-003 Clear floats handled after margin collapsing
  • Clearance is introduced as spacing above the top margin after margin collapsing occurs.
clear-float-004 Clear set to 'left' with earlier left floated boxes
  • Boxes with 'clear: left' need to clear earlier left floated boxes.
clear-float-005 Clear set to 'right' with earlier right floated boxes
  • Boxes with 'clear: right' need to clear earlier right floated boxes.
clear-float-006 Clear set to 'both' with earlier floated boxes
  • Boxes with 'clear: both' need to clear earlier floated boxes.
clear-float-007 Clear set to 'left' with later left floated boxes
  • Boxes with 'clear: left' do not clear later left floated boxes.
clear-float-008 Clear set to 'right' with later right floated boxes
  • Boxes with 'clear: right' do not clear later right floated boxes.
clear-float-009 Clear set to 'both' with later floated boxes
  • Boxes with 'clear: both' do not clear later floated boxes.
clear-initial-001 Clear initial value
  • The 'clear' property has a initial value of 'none'.
clear-inline-001 Clear on inline elements
  • Clear cannot be applied to an inline box.
clearance-006 Zero Clearance
  • Zero clearance is not the same as no clearance.
margin-collapse-033 margin collapsing - clear
  • Margin-top of following siblings of a block on which 'clear' has been set (to a different value than 'none') must not be substracted when calculating clearance. When an element's own margins collapse, and that element has had clearance applied to it, its top margin collapses with the adjoining margins of following siblings.
margin-collapse-034 margin collapsing - clear
  • Margin-top of following siblings of a block on which 'clear' has been set (to a different value than 'none') must not be substracted when calculating clearance. When an element's own margins collapse, and that element has had clearance applied to it, its top margin collapses with the adjoining margins of following siblings.
margin-collapse-035 margin collapsing - clear
  • Margin-top of following siblings of a block on which 'clear' has been set (to a different value than 'none') must not be substracted when calculating clearance. When an element's own margins collapse, and that element has had clearance applied to it, its top margin collapses with the adjoining margins of following siblings.
margin-collapse-clear-000 Margin Collapsing with Clearance
margin-collapse-clear-001 Margin Collapsing with Clearance
margin-collapse-clear-002 Margin Collapsing with Clearance
margin-collapse-clear-003 Margin Collapsing with Clearance
margin-collapse-clear-004 Margin Collapsing with Clearance
margin-collapse-clear-005 Optional Margin Collapsing with Clearance
margin-collapse-clear-006 Margin Collapsing with Clearance
margin-collapse-clear-007 Margin Collapsing with Clearance
margin-collapse-clear-008 Margin Collapsing with Clearance
margin-collapse-clear-009 Margin Collapsing with Clearance
margin-collapse-clear-010 Margin Collapsing with Clearance
margin-collapse-clear-011 Optional Margin Collapsing with Clearance
+ 9.6 Absolute positioning
position-absolute-003 Absolute position element taken out of flow
  • Absolute positioned elements are taken out of the normal flow when they have explicit offsets.
position-absolute-004 Absolutely positioned elements establishes a new containing block for normal flow children
  • An absolutely positioned box establishes a new containing block for normal flow children.
position-absolute-005 Absolutely positioned elements do not establish a new containing block for fixed position descendants
  • An absolutely positioned box does not establish a new containing block for fixed positioned descendants.
position-absolute-006 Absolutely positioned elements establishes a new containing block for absolutely positioned children
  • An absolutely positioned box establishes a new containing block for absolutely positioned children.
position-absolute-007 Absolutely positioned elements child behavior
  • The contents of an absolutely positioned element do not flow around any other boxes and can obscure the contents of another box.
position-absolute-008 Float is computed to 'none' when element is absolutely positioned
  • Float is computed to 'none' when 'position: absolute' is applied.
position-fixed-007 Float is computed to 'none' when element is fixed positioned
  • Float is computed to 'none' when 'position: fixed' is applied.
+ 9.6.1 Fixed positioning
page-container-007 BitmapsPaged Fixed content outside the page area
  • Any portion of an element with 'position: fixed' which is positioned outside the page area is not printed.
+ 9.7 Relationships between 'display', 'position', and 'float'
abspos-027 Absolutely positioned elements must shrink wrap tables
bottom-applies-to-001 Bottom applied to element with 'display' set to 'table-row-group'
  • The 'bottom' property applies to elements with a display of 'table-row-group'.
bottom-applies-to-002 Bottom applied to element with 'display' set to 'table-header-group'
  • The 'bottom' property applies to elements with a display of 'table-header-group'.
bottom-applies-to-003 Bottom applied to element with 'display' set to 'table-footer-group'
  • The 'bottom' property applies to elements with a display of 'table-footer-group'.
bottom-applies-to-004 Bottom applied to element with 'display' set to 'table-row'
  • The 'bottom' property applies to elements with a display of 'table-row'.
bottom-applies-to-005 Bottom applied to element with 'display' set to 'table-column-group'
  • The 'bottom' property applies to elements with a display of 'table-column-group'.
bottom-applies-to-006 Bottom applied to element with 'display' set to 'table-column'
  • The 'bottom' property applies to elements with a display of 'table-column'.
bottom-applies-to-007 Bottom applied to element with 'display' set to 'table-cell'
  • The 'bottom' property applies to elements with a display of 'table-cell'.
bottom-applies-to-008 Bottom applied to element with 'display' set to inline
  • The 'bottom' property applies to elements with a display of inline.
bottom-applies-to-009 Bottom applied to element with 'display' set to block
  • The 'bottom' property applies to elements with a display of block.
bottom-applies-to-010 Bottom applied to element with 'display' set to list-item
  • The 'bottom' property applies to elements with a display of list-item.
bottom-applies-to-012 Bottom applied to element with 'display' set to inline-block
  • The 'bottom' property applies to elements with a display of inline-block.
bottom-applies-to-013 Bottom applied to element with 'display' set to 'table'
  • The 'bottom' property applies to elements with a display of 'table'.
bottom-applies-to-014 Bottom applied to element with 'display' set to 'inline-table'
  • The 'bottom' property applies to elements with a display of 'inline-table'.
bottom-applies-to-015 Bottom applied to element with 'display' set to 'table-caption'
  • The 'bottom' property applies to elements with a display of 'table-caption'.
display-none-001 Display set to 'none' does not generate a box even with 'position' set to 'absolute'
  • Elements set to 'display: none' do not render even if element is positioned absolute.
display-none-002 Display set to 'none' does not generate a box even with 'position' set to 'fixed'
  • Elements set to 'display: none' do not render even if element is positioned fixed.
display-none-003 Display set to 'none' does not generate a box even when element is floated
  • Elements set to 'display: none' do not render even if element is floated.
left-applies-to-001 Left applied to element with 'display' set to 'table-row-group'
  • The 'left' property applies to elements with a display of 'table-row-group'.
left-applies-to-002 Left applied to element with 'display' set to 'table-header-group'
  • The 'left' property applies to elements with a display of 'table-header-group'.
left-applies-to-003 Left applied to element with 'display' set to 'table-footer-group'
  • The 'left' property applies to elements with a display of 'table-footer-group'.
left-applies-to-004 Left applied to element with 'display' set to 'table-row'
  • The 'left' property applies to elements with a display of 'table-row'.
left-applies-to-005 Left applied to element with 'display' set to 'table-column-group'
  • The 'left' property applies to elements with a display of 'table-column-group'.
left-applies-to-006 Left applied to element with 'display' set to 'table-column'
  • The 'left' property applies to elements with a display of 'table-column'.
left-applies-to-007 Left applied to element with 'display' set to 'table-cell'
  • The 'left' property applies to elements with a display of 'table-cell'.
left-applies-to-008 Ahem Left applied to element with 'display' set to inline
  • The 'left' property applies to elements with a display of inline.
left-applies-to-009 Left applied to element with 'display' set to block
  • The 'left' property applies to elements with a display of block.
left-applies-to-010 Left applied to element with 'display' set to list-item
  • The 'left' property applies to elements with a display of list-item.
left-applies-to-012 Left applied to element with 'display' set to inline-block
  • The 'left' property applies to elements with a display of inline-block.
left-applies-to-013 Left applied to element with 'display' set to 'table'
  • The 'left' property applies to elements with a display of 'table'.
left-applies-to-014 Left applied to element with 'display' set to 'inline-table'
  • The 'left' property applies to elements with a display of 'inline-table'.
left-applies-to-015 Left applied to element with 'display' set to 'table-caption'
  • The 'left' property applies to elements with a display of 'table-caption'.
position-applies-to-001 Position applied to element with 'display' set to 'table-row-group'
  • The 'position' property applies to elements with a display of 'table-row-group'.
position-applies-to-002 Position applied to element with 'display' set to 'table-header-group'
  • The 'position' property applies to elements with a display of 'table-header-group'.
position-applies-to-003 Position applied to element with 'display' set to 'table-footer-group'
  • The 'position' property applies to elements with a display of 'table-footer-group'.
position-applies-to-004 Position applied to element with 'display' set to 'table-row'
  • The 'position' property applies to elements with a display of 'table-row'.
position-applies-to-005 Position applied to element with 'display' set to 'table-column-group'
  • The 'position' property applies to elements with a display of 'table-column-group'.
position-applies-to-006 Position applied to element with 'display' set to 'table-column'
  • The 'position' property applies to elements with a display of 'table-column'.
position-applies-to-007 Position applied to element with 'display' set to 'table-cell'
  • The 'position' property applies to elements with a display of 'table-cell'.
position-applies-to-008 Position applied to element with 'display' set to inline
  • The 'position' property applies to elements with a display of inline.
position-applies-to-009 Position applied to element with 'display' set to block
  • The 'position' property applies to elements with a display of block.
position-applies-to-010 Position applied to element with 'display' set to list-item
  • The 'position' property applies to elements with a display of list-item.
position-applies-to-012 Position applied to element with 'display' set to inline-block
  • The 'position' property applies to elements with a display of inline-block.
position-applies-to-013 Position applied to element with 'display' set to 'table'
  • The 'position' property applies to elements with a display of 'table'.
position-applies-to-014 Position applied to element with 'display' set to 'inline-table'
  • The 'position' property applies to elements with a display of 'inline-table'.
position-applies-to-015 Position applied to element with 'display' set to 'table-caption'
  • The 'position' property applies to elements with a display of 'table-caption'.
right-applies-to-001 Right applied to element with 'display' set to 'table-row-group'
  • The 'right' property applies to elements with a display of 'table-row-group'.
right-applies-to-002 Right applied to element with 'display' set to 'table-header-group'
  • The 'right' property applies to elements with a display of 'table-header-group'.
right-applies-to-003 Right applied to element with 'display' set to 'table-footer-group'
  • The 'right' property applies to elements with a display of 'table-footer-group'.
right-applies-to-004 Right applied to element with 'display' set to 'table-row'
  • The 'right' property applies to elements with a display of 'table-row'.
right-applies-to-005 Right applied to element with 'display' set to 'table-column-group'
  • The 'right' property applies to elements with a display of 'table-column-group'.
right-applies-to-006 Right applied to element with 'display' set to 'table-column'
  • The 'right' property applies to elements with a display of 'table-column'.
right-applies-to-007 Right applied to element with 'display' set to 'table-cell'
  • The 'right' property applies to elements with a display of 'table-cell'.
right-applies-to-008 Right applied to element with 'display' set to inline
  • The 'right' property applies to elements with a display of inline.
right-applies-to-009 Right applied to element with 'display' set to block
  • The 'right' property applies to elements with a display of block.
right-applies-to-010 Right applied to element with 'display' set to list-item
  • The 'right' property applies to elements with a display of list-item.
right-applies-to-012 Right applied to element with 'display' set to inline-block
  • The 'right' property applies to elements with a display of inline-block.
right-applies-to-013 Right applied to element with 'display' set to 'table'
  • The 'right' property applies to elements with a display of 'table'.
right-applies-to-014 Right applied to element with 'display' set to 'inline-table'
  • The 'right' property applies to elements with a display of 'inline-table'.
right-applies-to-015 Right applied to element with 'display' set to 'table-caption'
  • The 'right' property applies to elements with a display of 'table-caption'.
top-applies-to-001 Top applied to element with 'display' set to 'table-row-group'
  • The 'top' property applies to elements with a display of 'table-row-group'.
top-applies-to-002 Top applied to element with 'display' set to 'table-header-group'
  • The 'top' property applies to elements with a display of 'table-header-group'.
top-applies-to-003 Top applied to element with 'display' set to 'table-footer-group'
  • The 'top' property applies to elements with a display of 'table-footer-group'.
top-applies-to-004 Top applied to element with 'display' set to 'table-row'
  • The 'top' property applies to elements with a display of 'table-row'.
top-applies-to-005 Top applied to element with 'display' set to 'table-column-group'
  • The 'top' property applies to elements with a display of 'table-column-group'.
top-applies-to-006 Top applied to element with 'display' set to 'table-column'
  • The 'top' property applies to elements with a display of 'table-column'.
top-applies-to-007 Top applied to element with 'display' set to 'table-cell'
  • The 'top' property applies to elements with a display of 'table-cell'.
top-applies-to-008 Top applied to element with 'display' set to inline
  • The 'top' property applies to elements with a display of inline.
top-applies-to-009 Top applied to element with 'display' set to block
  • The 'top' property applies to elements with a display of block.
top-applies-to-010 Top applied to element with 'display' set to list-item
  • The 'top' property applies to elements with a display of list-item.
top-applies-to-012 Top applied to element with 'display' set to inline-block
  • The 'top' property applies to elements with a display of inline-block.
top-applies-to-013 Top applied to element with 'display' set to 'table'
  • The 'top' property applies to elements with a display of 'table'.
top-applies-to-014 Top applied to element with 'display' set to 'inline-table'
  • The 'top' property applies to elements with a display of 'inline-table'.
top-applies-to-015 Top applied to element with 'display' set to 'table-caption'
  • The 'top' property applies to elements with a display of 'table-caption'.
+ 9.8 Comparison of normal flow, floats, and absolute positioning
+ 9.8.1 Normal flow
+ 9.8.2 Relative positioning
position-relative-027 Relatively positioned elements with auto positioning with anonymous boxes before and after
  • Relatively positioned element with auto positioning appear as though they were positioned in flow.
position-relative-028 Relatively positioned elements with auto positioning with anonymous boxes after
  • Relatively positioned element with auto positioning appear as though they were positioned in flow.
position-relative-029 Relatively positioned elements with auto positioning with inline box after
  • Relatively positioned element with auto positioning appear as though they were positioned in flow.
position-relative-030 Relatively positioned elements with auto positioning with anonymous boxes before and after with trailing inline
  • Relatively positioned element with auto positioning appear as though they were positioned in flow.
position-relative-031 Relatively positioned elements with auto positioning with an inline element before, anonymous boxes, and inline boxes after
  • Relatively positioned element with auto positioning render as though they were positioned in flow.
position-relative-032 Relatively positioned box has no impact on boxes which follow
  • Offsetting a box with relative positioning has no effect on the boxes which follow.
position-relative-033 Optional Relatively positioned box has no impact on boxes which follow and boxes may overlap
  • Offsetting a box with relative positioning has no effect on the boxes which follow and boxes may overlap.
position-relative-034 Interact Relatively positioned content inside container with overflow auto
  • A container with overflow set to auto provides a scrolling mechanism for relatively positioned content.
position-relative-035 Relatively positioned boxes preserve the space created for it in flow
  • Relative positioned content keeps its normal flow size including line breaks and the space originally reserved for it.
position-relative-036 Interact Relatively positioned content inside container with overflow scroll
  • A container with overflow set to scroll provides a scrolling mechanism for relatively positioned content.
+ 9.8.3 Floating a box
+ 9.8.4 Absolute positioning
abspos-001 CSS Absolute Positioning: static position after previous margin
abspos-002 Positioning with a relpos ancestor containing block
abspos-003 Positioning relative to the ICB: short root element
abspos-004 Positioning relative to the ICB: long root element
abspos-006 Absolute Positioning: Tables with two offsets
abspos-007 Positioning blocks inside inline contexts with top:auto
abspos-009 Right alignment with position:right
abspos-011 Optional position: absolute; top: auto; test (assumed initial values)
abspos-012 Optional position: absolute; top: auto; test (assumed initial values)
abspos-013 Optional position: fixed; top: auto; test - body padding
abspos-014 Optional position: fixed; top: auto; test - body padding
abspos-015 Optional position: fixed; top: auto; test - html padding
abspos-016 Optional position: fixed; top: auto; test - html padding
abspos-017 Optional position: fixed; top: auto; test - body margin
abspos-018 Optional position: fixed; top: auto; test - body margin
abspos-019 Optional position: fixed; top: auto; test - html margin
abspos-020 Optional position: fixed; top: auto; test - html margin
abspos-inline-001 Absolutely positioned boxes in inlines: 'auto'
abspos-inline-002 Absolutely positioned boxes in inlines: 'auto' with 'relative'
abspos-inline-003 Absolutely positioned boxes in inlines: positioning at top left
abspos-inline-004 Absolutely positioned boxes in inlines: positioning at top right
abspos-inline-005 Absolutely positioned boxes in inlines: positioning at bottom left
abspos-inline-006 Absolutely positioned boxes in inlines: positioning at bottom right
page-container-010 Paged Paged Media Height (percent)
  • For HTML documents in paged media, when the HTML and BODY elements have heights of 100%, a percentage height on a child of BODY is relative to the page area height.
page-container-011 Paged Paged Media: Relatively Positioned Pages
  • When a relatively positioned element whose 'height' and 'width' match that of the page area has a corner positioned at a corner of the page area, any positioned children are positioned relative to the page area.
+ 9.9 Layered presentation
stack-floats-001 Stacking order: Floats and Blocks in Inlines
stack-floats-002 Stacking order: Floats and Blocks in Inlines
stack-floats-003 Stacking order: Floats and Blocks in Inlines
stack-floats-004 Stacking order: Floats and Blocks in Inlines
z-index-stack-001 Z-index and stacking levels
  • Boxes with greater stack levels are always formatted in front of boxes with lower stack levels.
z-index-stack-002 Z-index and similar stacking levels
  • Boxes with the same stack level in a stacking context are stacked back-to-front according to document tree order.
+ 9.9.1 Specifying the stack level: the 'z-index' property
z-index-001 Optional Z-index set to minimum value minus 1
  • The property z-index set to a minimum value minus 1 for a 32-bit integer is correctly handled.
z-index-002 Optional Z-index set to minimum value
  • The property z-index set to a minimum value for a 32-bit integer is correctly handled.
z-index-003 Optional Z-index set to minimum value plus 1
  • The property z-index set to a minimum value plus 1 for a 32-bit integer is correctly handled.
z-index-004 Z-index set to zero prefixed with a minus sign
  • The property z-index set to '0' prefixed with a minus sign is read as value '0'.
z-index-005 Z-index set to zero
  • The property z-index with a zero value is read and applied as the value '0'.
z-index-006 Z-index set to zero prefixed with a plus sign
  • The property z-index set to '0' prefixed with a plus sign is read as value '0'.
z-index-007 Z-index set to a nominal value
  • The property z-index set to a nominal value is correctly read and applied.
z-index-008 Z-index set to a nominal value prefixed with a plus sign
  • The property z-index set to nominal value and prefixed with a plus sign is read the same as the value without the plus sign.
z-index-009 Optional Z-index set maximum value minus 1
  • The property z-index set to a maximum value minus 1 for a 32-bit integer is correctly handled.
z-index-010 Optional Z-index set to the maximum value
  • The property z-index set to a maximum value for a 32-bit integer is correctly handled.
z-index-011 Optional Z-index set to maximum value prefixed with a plus sign
  • The property z-index set to a maximum value for a 32-bit integer, prefixed with a plus sign is correctly handled.
z-index-012 Optional Z-index set to maximum value plus 1
  • The property 'z-index' set to a maximum value plus 1 for a 32-bit integer is correctly handled.
z-index-013 Z-index: auto results in the same stack level as parent element
  • The property z-index set to 'auto' results in the same stacking level as its parent element.
z-index-014 Z-index: inherit sets a value the same as parent element's value
  • The property z-index set to 'inherit' sets a value the same as parent element's computed value.
z-index-015 Invalid z-index - integer value
  • Besides 'auto' and 'inherit' keyword values, z-index property can only accept an integer value. An integer consists of one or more digits '0' to '9'.
z-index-016 Invalid z-index - integer value
  • Besides 'auto' and 'inherit' keyword values, z-index property can only accept an integer value. An integer consists of one or more digits '0' to '9'.
z-index-017 Invalid z-index - integer value
  • Besides 'auto' and 'inherit' keyword values, z-index property can only accept an integer value. An integer consists of one or more digits '0' to '9'.
z-index-018 z-index - negative values
  • Integers should range from -2,147,483,648 to 2,147,483,647 according to C Language Specification
z-index-019 z-index - negative values
  • Integers should range from -2,147,483,648 to 2,147,483,647 according to C Language Specification
z-index-020 = z-index
z-index-abspos-001 CSS: z-index auto, -1 and backgrounds (child)
z-index-abspos-002 CSS: z-index auto and -1 (siblings)
z-index-abspos-003 CSS: z-index 0, -1 and backgrounds (child)
z-index-abspos-004 CSS: z-index auto and 0 (siblings)
z-index-abspos-005 CSS: z-index auto and 0 (siblings)
z-index-abspos-006 CSS: z-index and SELECT elements
z-index-abspos-007 CSS: z-index 1, -1 and backgrounds (child)
z-index-abspos-008 z-index
z-index-abspos-009 CSS: z-index and the canvas and background propagation
z-index-applies-to-001 Optional Z-index applied to element with 'display' set to 'table-row-group'
  • The 'z-index' property can apply to elements with a display of 'table-row-group'.
z-index-applies-to-002 Optional Z-index applied to element with 'display' set to 'table-header-group'
  • The 'z-index' property can apply to elements with a display of 'table-header-group'.
z-index-applies-to-003 Optional Z-index applied to element with 'display' set to 'table-footer-group'
  • The 'z-index' property can apply to elements with a display of 'table-footer-group'.
z-index-applies-to-004 Optional Z-index applied to element with 'display' set to 'table-row'
  • The 'z-index' property can apply to elements with a display of 'table-row'.
z-index-applies-to-005 Optional Z-index applied to element with 'display' set to 'table-column-group'
  • The 'z-index' property can apply to elements with a display of 'table-column-group'.
z-index-applies-to-006 Optional Z-index applied to element with 'display' set to 'table-column'
  • The 'z-index' property can apply to elements with a display of 'table-column'.
z-index-applies-to-007 Optional Z-index applied to element with 'display' set to 'table-cell'
  • The 'z-index' property can apply to elements with a display of 'table-cell'.
z-index-applies-to-008 Ahem Z-index applied to element with 'display' set to inline
  • The 'z-index' property applies to elements with a display of inline.
z-index-applies-to-009 Z-index applied to element with 'display' set to block
  • The 'z-index' property applies to elements with a display of block.
z-index-applies-to-010 Z-index applied to element with 'display' set to list-item
  • The 'z-index' property applies to elements with a display of list-item.
z-index-applies-to-012 Z-index applied to element with 'display' set to inline-block
  • The 'z-index' property applies to elements with a display of inline-block.
z-index-applies-to-013 Z-index applied to element with 'display' set to 'table'
  • The 'z-index' property applies to elements with a display of 'table'.
z-index-applies-to-014 Z-index applied to element with 'display' set to 'inline-table'
  • The 'z-index' property applies to elements with a display of 'inline-table'.
z-index-applies-to-015 Optional Z-index applied to element with 'display' set to 'table-caption'
  • The 'z-index' property can apply to elements with a display of 'table-caption'.
z-index-dynamic-001 DOM/JS Z-index - dynamically setting z-index to bring an element from back to in front of
  • Setting the 'z-index' property of a positioned element can bring it from behind the surface on a lower stack level to a greater stack level passing it in front of another element painted on the surface.
z-index-stack-003 Z-index - stacking levels of positioned elements versus floated elements
  • Positioned elements should be painted over floated elements. A positioned descendant with 'z-index: auto' has a greater stacking level than non-positioned floated elements.
+ 9.10 Text direction: the 'direction' and 'unicode-bidi' properties
bidi-001 The bidi algorithm and inlines in CSS
bidi-002 The bidi algorithm and inlines in CSS
bidi-003 The bidi algorithm and inlines in CSS
bidi-004 Optional The bidi algorithm and inlines in CSS
bidi-004a Bidi Codes, White space, and Tree structure
  • The final order of characters in a block container is the same as if markup had been stripped, consecutive space collapsed in logical order, and the resulting character sequence, including any bidi codes, had been passed to an implementation of the Unicode bidirectional algorithm for plain text that produced the same line-breaks as the styled text.
bidi-005a The bidi algorithm and inlines in CSS: embed levels and white-space: pre;
bidi-005b The bidi algorithm and inlines in CSS: embed levels and white-space: pre;
bidi-006a The bidi algorithm and inlines in CSS: embed levels and white-space: nowrap;
bidi-006b The bidi algorithm and inlines in CSS: embed levels and white-space: nowrap;
bidi-007a The bidi algorithm and inlines in CSS: embed levels and float: left;
bidi-007b The bidi algorithm and inlines in CSS: embed levels and float: left;
bidi-008a The bidi algorithm and inlines in CSS: embed levels and display: table;
bidi-008b The bidi algorithm and inlines in CSS: embed levels and display: table;
bidi-009a The bidi algorithm and inlines in CSS: embed levels and display: table-row;
bidi-009b The bidi algorithm and inlines in CSS: embed levels and display: table-row;
bidi-010a The bidi algorithm and inlines in CSS: embed levels and position: absolute
bidi-010b The bidi algorithm and inlines in CSS: embed levels and position: absolute
bidi-011 The bidi algorithm and inlines in CSS wrapping bidi formatting characters
bidi-alt-001 unicode-bidi: bidi-override in alt text
  • If alt text is not treated as replaced content, then unicode-bidi applies to image alt text.
bidi-breaking-001 Bidi paragraph boundaries: Blocks
  • Block boundaries break bidi paragraphs.
bidi-breaking-002 Bidi paragraph boundaries: Forced Line Breaks
  • Forced line breaks of class B (but not class WS) break bidi paragraphs.
bidi-breaking-003 Optional Bidi paragraph boundaries: Forced Line Breaks (Unicode)
  • Forced line breaks of class B (but not class WS) break bidi paragraphs.
bidi-direction-001 direction:rtl on body
  • direction:rtl on body should inherit to paragraphs
bidi-direction-002 direction - nested ltr and rtl
  • Direction on paragraph should override direction on body
bidi-display-block-001 bidi and inline with display:block
  • An inline with display:block should be treated as a paragraph in the bidi algorithm
bidi-generated-content-001 content: with character forced bidi - rlo
  • A right-to-left override should be applied when u+202E is inserted through the content property
bidi-generated-content-002 content: with character forced bidi - lro
  • A left-to-right override should be correctly applied when inserted through the content property
bidi-glyph-mirroring-001 unicode-bidi: bidi-override - glyph mirroring
  • Glyph mirroring of characters with unicode Bidi_Mirrored property should be performed when unicode-bidi: bidi-override is applied
bidi-glyph-mirroring-002 unicode-bidi: bidi-override - glyph mirroring
  • Glyph mirroring of characters with unicode Bidi_Mirrored property should be performed direction:rtl is applied
bidi-inline-001 unicode-bidi: bidi-override on inline - rtl
  • bidi-override should be applied to inlines with no interruptions to surrounding text
bidi-inline-002 unicode-bidi: bidi-override on inline - nested
  • Nested bidi-override should be applied to inlines with no interruptions to surrounding text
bidi-list-001 direction:rtl - unordered list
  • direction:rtl should apply to unordered lists, putting bullets on the right
bidi-list-002 direction:rtl - nested unordered list
  • direction:rtl should apply to nested unordered lists, putting bullets on the right and offset leftwards
bidi-list-003 direction:rtl - ordered list
  • direction:rtl should apply to nested ordered lists, putting bullets on the right and offset leftwards
bidi-list-004 text-align: justify and direction:rtl - unordered list
  • text-align: justify should apply to unordered lists in rtl context without affecting their rtlness
bidi-list-005 text-align: left and direction:rtl - unordered list
  • text-align:left should be applied to unordered list in rtl context without affecting its rtlness
bidi-list-006 text-align: right and direction:rtl - unordered list
  • text-align:right should be applied to unordered list in rtl context without affecting its rtlness
bidi-list-007 text-align: center and direction:rtl - unordered list
  • text-align: center should apply to unordered lists in rtl context without affecting their rtlness
bidi-override-001 unicode-bidi: bidi-override on table
  • bidi-override should not be applied to table cell content when specified on table
bidi-override-002 unicode-bidi: bidi-override on table cell
  • bidi-override should be applied to table-cell content when specified on the cell
bidi-override-003 unicode-bidi: bidi-override on list
  • bidi-override should not be applied to list item when specified on ul
bidi-override-004 unicode-bidi: bidi-override on list item
  • bidi-override should be applied when specified on list item
bidi-override-005 unicode-bidi: bidi-override on nested div
  • bidi-override should be applied to inline-level descendants but not block-level descendants
bidi-position-fixed-001 position:fixed in rtl context
  • Default horizontal position of position:fixed block should be right in rtl context, and ancestor direction should still be applied inside the block taken out of normal flow
bidi-table-001 direction: rtl on table
  • direction:rtl on table should reverse order of table cells
bidi-table-002 direction: on nested tables
  • direction: should affect order of table cells
bidi-unicode-bidi-001 unicode-bidi: bidi-override - rtl
  • unicode-bidi: bidi-override should order characters strictly according to value of direction property
bidi-unicode-bidi-003 unicode-bidi: embed - nested ltr and rtl
  • unicode-bidi: embed should open a new bidi embedding level for inline-level element
direction-001 Direction set to 'ltr'
  • The 'direction' property set to 'ltr' sets the direction of an element to left-to-right.
direction-002 Direction set to 'rtl'
  • The 'direction' property set to 'rtl' sets the direction of an element to right-to-left.
direction-003 Direction set to 'inherit' sets a value that is inherited from parent element
  • The 'direction' property set to 'inherit' sets a direction value to the same as the parent element.
direction-applies-to-001 Ahem Direction applied to element with 'display' set to 'table-row-group'
  • The 'direction' property applies to elements with a display of 'table-row-group'.
direction-applies-to-002 Ahem Direction applied to element with 'display' set to 'table-header-group'
  • The 'direction' property applies to elements with a display of 'table-header-group'.
direction-applies-to-003 Ahem Direction applied to element with 'display' set to 'table-footer-group'
  • The 'direction' property applies to elements with a display of 'table-footer-group'.
direction-applies-to-004 Ahem Direction applied to element with 'display' set to 'table-row'
  • The 'direction' property applies to elements with a display of 'table-row'.
direction-applies-to-005 Ahem Direction applied to element with 'display' set to 'table-column-group'
  • The 'direction' property applies to elements with a display of 'table-column-group'.
direction-applies-to-006 Ahem Direction applied to element with 'display' set to 'table-column'
  • The 'direction' property applies to elements with a display of 'table-column'.
direction-applies-to-007 Ahem Direction applied to element with 'display' set to 'table-cell'
  • The 'direction' property applies to elements with a display of 'table-cell'.
direction-applies-to-008 Direction applied to element with 'display' set to inline
  • The 'direction' property applies to elements with a display of inline.
direction-applies-to-009 Ahem Direction applied to element with 'display' set to block
  • The 'direction' property applies to elements with a display of block.
direction-applies-to-010 Ahem Direction applied to element with 'display' set to list-item
  • The 'direction' property applies to elements with a display of list-item.
direction-applies-to-012 Ahem Direction applied to element with 'display' set to inline-block
  • The 'direction' property applies to elements with a display of inline-block.
direction-applies-to-013 Ahem Direction applied to element with 'display' set to 'table'
  • The 'direction' property applies to elements with a display of 'table'.
direction-applies-to-014 Ahem Direction applied to element with 'display' set to 'inline-table'
  • The 'direction' property applies to elements with a display of 'inline-table'.
direction-applies-to-015 Ahem Direction applied to element with 'display' set to 'table-caption'
  • The 'direction' property applies to elements with a display of 'table-caption'.
direction-unicode-bidi-001 default context, direction rtl, unicode-bidi embed
  • In the default context, if direction:rtl and unicode-bidi:embed are applied to an inline element containing mixed direction text, the text in that element will be displayed correctly.
direction-unicode-bidi-002 default context, direction rtl, unicode-bidi none
  • In the default context, if direction:rtl alone is applied to an inline element containing mixed direction text, the different directional runs in that element will not be in the correct order.
direction-unicode-bidi-003 ltr context, direction rtl, unicode-bidi embed
  • In a LTR context, if direction:rtl and unicode-bidi:embed are applied to an inline element containing mixed direction text, the text in that element will be displayed correctly.
direction-unicode-bidi-004 ltr context, direction rtl, unicode-bidi none
  • In a LTR context, if direction:rtl alone is applied to an inline element containing mixed direction text, the different directional runs in that element will not be in the correct order.
direction-unicode-bidi-005 rtl context, direction ltr, unicode-bidi embed
  • In a RTL context, if direction:ltr and unicode-bidi:embed are applied to a LTR inline element containing mixed direction text, the text in that element will be displayed correctly.
direction-unicode-bidi-006 rtl context, direction ltr, unicode-bidi none
  • In a RTL context, if direction:ltr alone is applied to a LTR inline element containing mixed direction text, the different directional runs in that element will not be in the correct order.
direction-unicode-bidi-007 direction of a ltr tspan
  • In a RTL context, if direction:ltr and unicode-bidi:embed are applied to an inline element containing mixed direction text, the the inline element will interact with surrounding ltr text as a LTR directional run.
direction-unicode-bidi-008 direction of a rtl tspan
  • In a LTR context, if direction:rtl and unicode-bidi:embed are applied to an inline element containing mixed direction text, the the inline element will interact with surrounding rtl text as a RTL directional run.
direction-unicode-bidi-009 on element, direction ltr, unicode-bidi none
  • direction:ltr alone on a block element will cause the text to be left-aligned, directional runs to be arranged LTR (but the words should look correct within each run), and punctuation should be treated as LTR.
direction-unicode-bidi-010 on element, direction rtl, unicode-bidi none
  • direction:rtl alone on a block element will cause the text to be right-aligned, directional runs to be arranged RTL (but the words should look correct within each run), and punctuation should be treated as RTL.
direction-unicode-bidi-011 inherited, direction ltr, unicode-bidi none
  • direction:ltr on a container element will be inherited by an embedded block element.
direction-unicode-bidi-012 inherited, direction rtl, unicode-bidi none
  • direction:rtl on a container element will be inherited by an embedded block element.
direction-unicode-bidi-013 default context, direction none, unicode-bidi override
  • In the default context, if unicode-bidi:bidi-override and no direction are applied to an inline element containing mixed direction text, the characters in that element will be displayed in backing-store order from left to right.
direction-unicode-bidi-014 default context, direction ltr, unicode-bidi override
  • In the default context, if direction:ltr and unicode-bidi:bidi-override are applied to an inline element containing mixed direction text, the characters in that element will be displayed in backing-store order from left to right.
direction-unicode-bidi-015 default context, direction rtl, unicode-bidi override
  • In the default context, if unicode-bidi:bidi-override and direction:rtl are applied to an inline element containing mixed direction text, the characters in that element will be displayed in reverse backing-store order from left to right.
direction-unicode-bidi-016 ltr context, direction none, unicode-bidi override
  • In a LTR context, if unicode-bidi:bidi-override and no direction are applied to an inline element containing mixed direction text, the characters in that element will be displayed in backing-store order from left to right.
direction-unicode-bidi-017 ltr context, direction ltr, unicode-bidi override
  • In a LTR context, if direction:ltr and unicode-bidi:bidi-override are applied to an inline element containing mixed direction text, the characters in that element will be displayed in backing-store order from left to right.
direction-unicode-bidi-018 ltr context, direction rtl, unicode-bidi override
  • In a LTR context, if unicode-bidi:bidi-override and direction:rtl are applied to an inline element containing mixed direction text, the characters in that element will be displayed in reverse backing-store order from left to right.
direction-unicode-bidi-019 rtl context, direction none, unicode-bidi override
  • In a RTL context, if unicode-bidi:bidi-override and no direction are applied to a LTR inline element containing mixed direction text, the characters in that element will be displayed in backing-store order from right to left.
direction-unicode-bidi-020 rtl context, direction ltr, unicode-bidi override
  • In a RTL context, if direction:ltr and unicode-bidi:bidi-override are applied to a LTR inline element containing mixed direction text, the characters in that element will be displayed in reverse backing-store order from right to left.
direction-unicode-bidi-021 rtl context, direction rtl, unicode-bidi override
  • In a RTL context, if unicode-bidi:bidi-override and direction:rtl are applied to a LTR inline element containing mixed direction text, the characters in that element will be displayed in backing-store order from right to left.
direction-unicode-bidi-022 on element, direction ltr, unicode-bidi override
  • direction:ltr and unicode-bidi:bidi-override on a block element will cause the text to be left-aligned, and all text to be displayed in backing-store order from left to right.
direction-unicode-bidi-023 on element, direction rtl, unicode-bidi override
  • direction:rtl and unicode-bidi:bidi-override on a block element will cause the text to be right-aligned, and all text to be displayed in backing-store order from right to left.
direction-unicode-bidi-024 inherited, direction ltr, unicode-bidi override
  • When direction:ltr and unicode-bidi:bidi-override is set on a block element, the override will not be inherited by a child block element, but the direction will.
direction-unicode-bidi-025 inherited, direction rtl, unicode-bidi override
  • When direction:rtl and unicode-bidi:bidi-override is set on a block element, the override will not be inherited by a child block element, but the direction will.
direction-unicode-bidi-026 right to left block
  • When direction:ltr and unicode-bidi:bidi-override is set on a block element containing block and inline elements, only the direction of the inline text will be overridden.
direction-unicode-bidi-027 left to right block
  • When direction:rtl and unicode-bidi:bidi-override is set on a block element containing block and inline elements, only the direction of the inline text will be overridden.
direction-unicode-bidi-028 inner block converted to inline
  • When direction:rtl and unicode-bidi:bidi-override is set on a block element containing block and inline elements, and CSS is used to change the block element to an inline element, the direction of all the text will be overridden.
list-style-position-025 list-style-position in rtl context
  • list-style-position:inside in rtl context should let text flow below the bullet on the right side
unicode-bidi-001 Unicode-bidi set to 'normal'
  • The property 'unicode-bidi' set to 'normal' doesn't modify the directionality of text.
unicode-bidi-002 Unicode-bidi set to 'embed'
  • The property 'unicode-bidi' set to 'embed' opens a new level of embedding in the Unicode bi-directional algorithm.
unicode-bidi-003 Unicode-bidi set to 'bidi-override'
  • The property 'unicode-bidi' set to 'bidi-override' overrides the directionality of text.
unicode-bidi-004 Unicode-bidi set to 'inherit'
  • The property 'unicode-bidi' set to 'inherit' sets a value the same as parent element's value.
unicode-bidi-applies-to-001 Unicode-bidi applied to element with 'display' set to 'table-row-group'
  • The 'unicode-bidi' property applies to elements with a display of 'table-row-group'.
unicode-bidi-applies-to-002 Unicode-bidi applied to element with 'display' set to 'table-header-group'
  • The 'unicode-bidi' property applies to elements with a display of 'table-header-group'.
unicode-bidi-applies-to-003 Unicode-bidi applied to element with 'display' set to 'table-footer-group'
  • The 'unicode-bidi' property applies to elements with a display of 'table-footer-group'.
unicode-bidi-applies-to-004 Unicode-bidi applied to element with 'display' set to 'table-row'
  • The 'unicode-bidi' property applies to elements with a display of 'table-row'.
unicode-bidi-applies-to-005 Unicode-bidi applied to element with 'display' set to 'table-column-group'
  • The 'unicode-bidi' property applies to elements with a display of 'table-column-group'.
unicode-bidi-applies-to-006 Unicode-bidi applied to element with 'display' set to 'table-column'
  • The 'unicode-bidi' property applies to elements with a display of 'table-column'.
unicode-bidi-applies-to-007 Unicode-bidi applied to element with 'display' set to 'table-cell'
  • The 'unicode-bidi' property applies to elements with a display of 'table-cell'.
unicode-bidi-applies-to-008 Unicode-bidi applied to element with 'display' set to inline
  • The 'unicode-bidi' property applies to elements with a display of inline.
unicode-bidi-applies-to-009 Unicode-bidi applied to element with 'display' set to block
  • The 'unicode-bidi' property applies to elements with a display of block.
unicode-bidi-applies-to-010 Unicode-bidi applied to element with 'display' set to list-item
  • The 'unicode-bidi' property applies to elements with a display of list-item.
unicode-bidi-applies-to-012 Unicode-bidi applied to element with 'display' set to inline-block
  • The 'unicode-bidi' property applies to elements with a display of inline-block.
unicode-bidi-applies-to-013 Unicode-bidi applied to element with 'display' set to 'table'
  • The 'unicode-bidi' property applies to elements with a display of 'table'.
unicode-bidi-applies-to-014 Unicode-bidi applied to element with 'display' set to 'inline-table'
  • The 'unicode-bidi' property applies to elements with a display of 'inline-table'.
unicode-bidi-applies-to-015 Unicode-bidi applied to element with 'display' set to 'table-caption'
  • The 'unicode-bidi' property applies to elements with a display of 'table-caption'.