CSS2.1 Test Suite

Visual formatting model (675 tests)

Test	Flags
9 Visual formatting model
display/box/float/clear test
9.1 Introduction to the visual formatting model
9.1.1 The viewport
:first-line pseudo-element - text-transform
: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.
Viewport resize can change layout Resizing the viewport may change the layout of page.	UM
Scrolling mechanism Scrolling mechanism should be available when canvas is larger than viewport.	UR
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.	UR
Rendering more than one canvas User agents may render more than one canvas.	M
9.1.2 Containing blocks
Element position based on containing block An element's position is based on the position of its containing block.
Content is not confined by containing blocks Content may overflow containing blocks.	M
9.2 Controlling box generation
9.2.1 Block-level elements and block boxes
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.
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.
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.
Principal block box establishes the containing block Principal block boxes establish a containing block for descendant boxes.
Principal block box establishes the containing block for generated content Principal block boxes establish a containing block for generated content.
9.2.1.1 Anonymous block boxes
Anonymous block box generation Block boxes with inline content followed by a block box generate an anonymous block box around the inline content.
Anonymous run-in box generation Block boxes with inline content followed by a run-in box generate an anonymous run-in box around the inline content.
Anonymous box property inheritance Anonymous boxes inherit property values from their non-anonymous box.	A
Inline box containing block boxes Inline boxes that contain block boxes will break up the inline content around the block box.
Block boxes within inline boxes are affected by positioning Block boxes within inline boxes are also affected by relative positioning on the inline box.
9.2.2 Inline-level elements and inline boxes
9.2.2.1 Anonymous inline boxes
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
Run-in with a block box converts to a block box Run-in boxes are converted to block boxes when the run-in box contains a block box.	A
Run-in boxes change to inline boxes Sibling block boxes following a run-in makes the run-in become an inline of the block box.
Run-in boxes and float Float prevents run-in from becoming inline.	A
Run-in boxes and absolute positioning Absolute positioning prevents run-in from becoming inline.	A
Run-in that starts with a run-in Run-in boxes cannot run-in with another box that already starts with a run-in.
Run-in boxes and inheritance Run-in boxes inherit properties from its parent element.
9.2.4 The 'display' property
display
Descendant elements and 'display: none' Descendant elements do not get generated when parent is 'display: none'.
Overriding display none from parent Descendant elements cannot override the parent's setting of the 'display' property when set to 'none'.
Display set to 'inline' The property 'display' set to 'inline' behaves in layout as an inline element.
Display set to 'block' The property 'display' set to 'block' behaves in layout as a block.
Display set to 'list-item' The property 'display' set to 'list-item' behaves in layout as a list item block.
Display set to 'run-in' The property 'display' set to 'run-in' behaves in layout as a run-in block.
Display set to 'inline-block' The property 'display' set to 'inline-block' behaves in layout as an inline block.
Display set to 'table' The property 'display' set to 'table' behaves in layout as a table.
Display set to 'inline-table' The property 'display' set to 'inline-table' behaves in layout as an inline table.
Display set to 'table-row-group' The property 'display' set to 'table-row-group' behaves in layout as a table row group.
Display set to 'table-header-group' The property 'display' set to 'table-header-group' behaves in layout as a table header group.
Display set to 'table-footer-group' The property 'display' set to 'table-footer-group' behaves in layout as a table footer group.
Display set to 'table-row' The property 'display' set to 'table-row' behaves in layout as a table row.
Display set to 'table-column-group' The property 'display' set to 'table-column-group' behaves in layout as a table column group.
Display set to 'table-column' The property 'display' set to 'table-column' behaves in layout as a table column.
Display set to 'table-cell' The property 'display' set to 'table-cell' behaves in layout as a table cell.
Display set to 'table-caption' The property 'display' set to 'table-caption' behaves in layout as a table caption.
Display set to 'none' The property 'display' set to 'none' has no layout.
Display set to 'inherit' The property 'display' set to 'inherit' can inherit its layout behavior from a parent container.
display - sub-table elements set to 'inline' The property 'display' set to 'inline' behaves in layout as an inline element and should generate inline box.
Applying the property 'display' set to 'inline' to the 'a' element Display set to 'inline' applies the correct rendering behavior for the 'a' element.
Applying the property 'display' set to 'inline' to the 'abbr' element Display set to 'inline' applies the correct rendering behavior for the 'abbr' element.
Updating layout on display changes	AO
Display initial value The initial display value for all elements is 'inline'.
Run-in with a table box Run-in boxes are converted to block boxes when the run-in box runs into a table box.	A
Run-in with a inline-table box Run-in boxes are converted to block boxes when the run-in box runs into an inline-table box.	A
Run-in with a table-row-group box Run-in boxes are converted to block boxes when the run-in box runs into a table-row-group box.	A
Run-in with a table-row box Run-in boxes are converted to block boxes when the run-in box runs into a table-row box.	A
Run-in with a table-cell box Run-in boxes are converted to block boxes when the run-in box runs into a table-cell box.	A
Run-in with a table-caption box Run-in boxes are converted to block boxes when the run-in box runs into a table-caption box.	A
Run-in with a table-header-group box Run-in boxes are converted to block boxes when the run-in box runs into a table-header-group box.	A
Run-in with a table-footer-group box Run-in boxes are converted to block boxes when the run-in box runs into a table-footer-group box.	A
9.3 Positioning schemes
Absolute positions impact on later siblings Absolute positioned elements do not impact later siblings.
Relative positioning dimensions Relative positioning with left or right does not change size of a box.
Relative positioning with left Relatively positioned element with the left specified offsets the element from the left of the containing block.
Relative positioning with right Relatively positioned element with the right specified offsets the element from the right of the containing block.
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.
Relative positioning with 'right' set and 'left' 'auto' Relatively positioned element with 'right' set to 'auto' and 'left' set to a value appears at expected offset.
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'.
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'.
Relative positioning with top and bottom do not change element dimensions Relatively positioned element dimensions are not changed with top/bottom applied.
Relative positioning with top Relatively positioned element dimensions are not changed with top applied.
Relative positioning with bottom Relatively positioned element dimensions are not changed with bottom applied.
Relative positioning and computed top/bottom values Computed value of positive top equals negative bottom.
Relative positioning and computed 'top'/'bottom' set to 'auto' Computed values are zero when both 'top' and 'bottom' are set to 'auto'.
Relative positioning and computed values when 'bottom' is set to 'auto' Computed value of 'bottom' set to 'auto' is equal to negative 'top'.
Relative positioning 'bottom' ignored if 'top' and 'bottom' are both not 'auto' The 'bottom' value is ignored if neither 'top' or 'bottom' is 'auto'.
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.	U
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.	U
Positioning a left floated element Floating a box will first lay out the box then shift it to the left.
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
Position set to 'static' The 'position' property applies the value 'static' and places the element in normal document flow.
Position set to 'relative' The 'position' property applies the value 'relative' and places the element in normal document flow.
Position set to 'absolute' The 'position' property applies the value 'absolute' and places the element out of flow of the document.
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.	U
Position set to 'inherit' The 'position' property applies the value 'inherit' and inherits the 'position' value from its parent element.
Position absolute size and positioning Absolutely positioned elements can be sized and positioned using 'top', 'right', 'bottom' and 'left' properties.
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 applied to element with 'display' set to 'table-header-group' The 'position' property applies to elements with a display of 'table-header-group'.
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 applied to element with 'display' set to 'table-row' The 'position' property applies to elements with a display of 'table-row'.
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 applied to element with 'display' set to 'table-column' The 'position' property applies to elements with a display of 'table-column'.
Position applied to element with 'display' set to 'table-cell' The 'position' property applies to elements with a display of 'table-cell'.
Position applied to element with 'display' set to inline The 'position' property applies to elements with a display of inline.
Position applied to element with 'display' set to block The 'position' property applies to elements with a display of block.
Position applied to element with 'display' set to list-item The 'position' property applies to elements with a display of list-item.
Position applied to element with 'display' set to run-in The 'position' property applies to elements with a display of run-in.
Position applied to element with 'display' set to inline-block The 'position' property applies to elements with a display of inline-block.
Position applied to element with 'display' set to 'table' The 'position' property applies to elements with a display of 'table'.
Position applied to element with 'display' set to 'inline-table' The 'position' property applies to elements with a display of 'inline-table'.
Position applied to element with 'display' set to 'table-caption' The 'position' property applies to elements with a display of 'table-caption'.
Fixed position elements impact on later siblings Fixed positioned elements do not impact later siblings.
Position fixed size and positioning Fixed positioned elements can be sized and positioned using 'top', 'right', 'bottom' and 'left' properties.
Position fixed on different media types Elements that are set to 'position: fixed' are fixed with respect to the viewport.	U
Position fixed and print media Fixed position elements are positioned with respect to the page box when printed.	P
Pagination of fixed positioned elements Fixed position elements cannot be paginated.	P
Relative positioning and normal flow Relatively positioned elements lay out in normal flow.
Elements following relatively positioned elements Element following relatively positioned element show up in normal flow as if the relatively positioned element were not offset.
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'
Bottom using pixels with a value of negative zero, -0px The 'bottom' property sets a negative zero length value in pixels.
Bottom using pixels with a value of zero, 0px The 'bottom' property sets a zero length value in pixels.
Bottom using pixels with a value of positive zero, +0px The 'bottom' property sets a positive zero length value in pixels.
Bottom using pixels with a nominal value, 96px The 'bottom' property sets a nominal length value in pixels.
Bottom using pixels with a positive nominal value, +96px The 'bottom' property sets a positive nominal length value in pixels.
Bottom using points with a value of negative zero, -0pt The 'bottom' property sets a negative zero length value in points.
Bottom using points with a value of zero, 0pt The 'bottom' property sets a zero length value in points.
Bottom using points with a value of positive zero, +0pt The 'bottom' property sets a positive zero length value in points.
Bottom using points with a nominal value, 72pt The 'bottom' property sets a nominal length value in points.
Bottom using points with a positive nominal value, +72pt The 'bottom' property sets a positive nominal length value in points.
Bottom using picas with a value of negative zero, -0pc The 'bottom' property sets a negative zero length value in picas.
Bottom using picas with a value of zero, 0pc The 'bottom' property sets a zero length value in picas.
Bottom using picas with a value of positive zero, +0pc The 'bottom' property sets a positive zero length value in picas.
Bottom using picas with a nominal value, 6pc The 'bottom' property sets a nominal length value in picas.
Bottom using picas with a positive nominal value, +6pc The 'bottom' property sets a positive nominal length value in picas.
Bottom using centimeters with a value of negative zero, -0cm The 'bottom' property sets a negative zero length value in centimeters.
Bottom using centimeters with a value of zero, 0cm The 'bottom' property sets a zero length value in centimeters.
Bottom using centimeters with a value of positive zero, +0cm The 'bottom' property sets a positive zero length value in centimeters.
Bottom using centimeters with a nominal value, 2.54cm The 'bottom' property sets a nominal length value in centimeters.
Bottom using centimeters with a positive nominal value, +2.54cm The 'bottom' property sets a positive nominal length value in centimeters.
Bottom using millimeters with a value of negative zero, -0mm The 'bottom' property sets a negative zero length value in millimeters.
Bottom using millimeters with a value of zero, 0mm The 'bottom' property sets a zero length value in millimeters.
Bottom using millimeters with a value of positive zero, +0mm The 'bottom' property sets a positive zero length value in millimeters.
Bottom using millimeters with a nominal value, 25.4mm The 'bottom' property sets a nominal length value in millimeters.
Bottom using millimeters with a positive nominal value, +25.4mm The 'bottom' property sets a positive nominal length value in millimeters.
Bottom using inches with a value of negative zero, -0in The 'bottom' property sets a negative zero length value in inches.
Bottom using inches with a value of zero, 0in The 'bottom' property sets a zero length value in inches.
Bottom using inches with a value of positive zero, +0in The 'bottom' property sets a positive zero length value in inches.
Bottom using inches with a nominal value, 1in The 'bottom' property sets a nominal length value in inches.
Bottom using inches with a positive nominal value, +1in The 'bottom' property sets a positive nominal length value in inches.
Bottom using 'em' units with a value of negative zero, -0em The 'bottom' property sets a negative zero length value in 'em' units.	A
Bottom using 'em' units with a value of zero, 0em The 'bottom' property sets a zero length value in 'em' units.	A
Bottom using 'em' units with a value of positive zero, +0em The 'bottom' property sets a positive zero length value in 'em' units.	A
Bottom using 'em' units with a nominal value, 6em The 'bottom' property sets a nominal length value in 'em' units.	A
Bottom using 'em' units with a positive nominal value, +6em The 'bottom' property sets a positive nominal length value in 'em' units.	A
Bottom using 'ex' units with a value of negative zero, -0ex The 'bottom' property sets a negative zero length value in 'ex' units.	A
Bottom using 'ex' units with a value of zero, 0ex The 'bottom' property sets a zero length value in 'ex' units.	A
Bottom using 'ex' units with a value of positive zero, +0ex The 'bottom' property sets a positive zero length value in 'ex' units.	A
Bottom using 'ex' units with a nominal value, 7.5ex The 'bottom' property sets a nominal length value in 'ex' units.	A
Bottom using 'ex' units with a positive nominal value, +7.5ex The 'bottom' property sets a positive nominal length value in 'ex' units.	A
Bottom using percentages with a value of negative zero, -0% The 'bottom' property sets a negative zero length value in percentages.
Bottom using percentages with a value of zero, 0% The 'bottom' property sets a zero length value in percentages.
Bottom using percentages with a value of positive zero, +0% The 'bottom' property sets a positive zero length value in percentages.
Bottom using percentages with a nominal value, 100% The 'bottom' property sets a nominal length value in percentages.
Bottom using percentages with a positive nominal value, +100% The 'bottom' property sets a positive nominal length value in percentages.
Bottom with a value of negative zero and no units, -0 The 'bottom' property sets a negative zero length value with no units.
Bottom with a value of zero and no units, 0 The 'bottom' property sets a zero length value with no units.
Bottom with a value of positive zero and no units, +0 The 'bottom' property sets a positive zero length value with no units.
Bottom with a value of 'auto' The 'bottom' property sets a value of 'auto'.
Bottom with a value of 'inherit' The 'bottom' property sets a value of 'inherit', inheriting the computed value from the parent element.
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 applied to element with 'display' set to 'table-header-group' The 'bottom' property applies to elements with a display of 'table-header-group'.
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 applied to element with 'display' set to 'table-row' The 'bottom' property applies to elements with a display of 'table-row'.
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 applied to element with 'display' set to 'table-column' The 'bottom' property applies to elements with a display of 'table-column'.
Bottom applied to element with 'display' set to 'table-cell' The 'bottom' property applies to elements with a display of 'table-cell'.
Bottom applied to element with 'display' set to inline The 'bottom' property applies to elements with a display of inline.
Bottom applied to element with 'display' set to block The 'bottom' property applies to elements with a display of block.
Bottom applied to element with 'display' set to list-item The 'bottom' property applies to elements with a display of list-item.
Bottom applied to element with 'display' set to run-in The 'bottom' property applies to elements with a display of run-in.
Bottom applied to element with 'display' set to inline-block The 'bottom' property applies to elements with a display of inline-block.
Bottom applied to element with 'display' set to 'table' The 'bottom' property applies to elements with a display of 'table'.
Bottom applied to element with 'display' set to 'inline-table' The 'bottom' property applies to elements with a display of 'inline-table'.
Bottom applied to element with 'display' set to 'table-caption' The 'bottom' property applies to elements with a display of 'table-caption'.
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.
Position 'bottom' property defines the offset from the bottom content edge of the parent box for relative positioning The 'bottom' property, for relative positioning, specifies the offset of the element in relation to the parent's bottom content edge.
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 using percentage Percentage offset values for the 'bottom' property are based off the height of the containing block.
Testing inherited 'top' changes The position of a positioned element which inherits its 'top' value from its grandparent changes when the grandparent's 'top' value is changed.	O
Testing inherited 'top' changes 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 table pseudo-elements are involved.	O
Testing inherited 'top' changes 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 table pseudo-elements are involved.	O
Testing inherited 'top' changes 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 table pseudo-elements are involved.	O
Testing inherited 'top' changes The position of a positioned element which inherits its 'top' value from its grandparent changes when the grandparent's 'top' value is changed.	O
Float set to 'left' The 'float' property set to 'left' correctly aligns the element to the left and text/objects flow around it.
Float set to 'right' The 'float' property set to 'right' correctly aligns the element to the right and text/objects flow around it.
Float set to 'none' The 'float' property set to 'none' does not float the element.
Float set to 'inherit' The 'float' property set to 'inherit' correctly inherits the value from the parent element.
Left using pixels with a value of negative zero, -0px The 'left' property sets a negative zero length value in pixels.
Left using pixels with a value of zero, 0px The 'left' property sets a zero length value in pixels.
Left using pixels with a value of positive zero, +0px The 'left' property sets a positive zero length value in pixels.
Left using pixels with a nominal value, 96px The 'left' property sets a nominal length value in pixels.
Left using pixels with a positive nominal value, +96px The 'left' property sets a positive nominal length value in pixels.
Left using points with a value of negative zero, -0pt The 'left' property sets a negative zero length value in points.
Left using points with a value of zero, 0pt The 'left' property sets a zero length value in points.
Left using points with a value of positive zero, +0pt The 'left' property sets a positive zero length value in points.
Left using points with a nominal value, 72pt The 'left' property sets a nominal length value in points.
Left using points with a positive nominal value, +72pt The 'left' property sets a positive nominal length value in points.
Left using picas with a value of negative zero, -0pc The 'left' property sets a negative zero length value in picas.
Left using picas with a value of zero, 0pc The 'left' property sets a zero length value in picas.
Left using picas with a value of positive zero, +0pc The 'left' property sets a positive zero length value in picas.
Left using picas with a nominal value, 6pc The 'left' property sets a nominal length value in picas.
Left using picas with a positive nominal value, +6pc The 'left' property sets a positive nominal length value in picas.
Left using centimeters with a value of negative zero, -0cm The 'left' property sets a negative zero length value in centimeters.
Left using centimeters with a value of zero, 0cm The 'left' property sets a zero length value in centimeters.
Left using centimeters with a value of positive zero, +0cm The 'left' property sets a positive zero length value in centimeters.
Left using centimeters with a nominal value, 2.54cm The 'left' property sets a nominal length value in centimeters.
Left using centimeters with a positive nominal value, +2.54cm The 'left' property sets a positive nominal length value in centimeters.
Left using millimeters with a value of negative zero, -0mm The 'left' property sets a negative zero length value in millimeters.
Left using millimeters with a value of zero, 0mm The 'left' property sets a zero length value in millimeters.
Left using millimeters with a value of positive zero, +0mm The 'left' property sets a positive zero length value in millimeters.
Left using millimeters with a nominal value, 25.4mm The 'left' property sets a nominal length value in millimeters.
Left using millimeters with a positive nominal value, +25.4mm The 'left' property sets a positive nominal length value in millimeters.
Left using inches with a value of negative zero, -0in The 'left' property sets a negative zero length value in inches.
Left using inches with a value of zero, 0in The 'left' property sets a zero length value in inches.
Left using inches with a value of positive zero, +0in The 'left' property sets a positive zero length value in inches.
Left using inches with a nominal value, 1in The 'left' property sets a nominal length value in inches.
Left using inches with a positive nominal value, +1in The 'left' property sets a positive nominal length value in inches.
Left using 'em' units with a value of negative zero, -0em The 'left' property sets a negative zero length value in 'em' units.	A
Left using 'em' units with a value of zero, 0em The 'left' property sets a zero length value in 'em' units.	A
Left using 'em' units with a value of positive zero, +0em The 'left' property sets a positive zero length value in 'em' units.	A
Left using 'em' units with a nominal value, 6em The 'left' property sets a nominal length value in 'em' units.	A
Left using 'em' units with a positive nominal value, +6em The 'left' property sets a positive nominal length value in 'em' units.	A
Left using 'ex' units with a value of negative zero, -0ex The 'left' property sets a negative zero length value in 'ex' units.	A
Left using 'ex' units with a value of zero, 0ex The 'left' property sets a zero length value in 'ex' units.	A
Left using 'ex' units with a value of positive zero, +0ex The 'left' property sets a positive zero length value in 'ex' units.	A
Left using 'ex' units with a nominal value, 7.5ex The 'left' property sets a nominal length value in 'ex' units.	A
Left using 'ex' units with a positive nominal value, +7.5ex The 'left' property sets a positive nominal length value in 'ex' units.	A
Left using percentages with a value of negative zero, -0% The 'left' property sets a negative zero length value in percentages.
Left using percentages with a value of zero, 0% The 'left' property sets a zero length value in percentages.
Left using percentages with a value of positive zero, +0% The 'left' property sets a positive zero length value in percentages.
Left using percentages with a nominal value, 100% The 'left' property sets a nominal length value in percentages.
Left using percentages with a positive nominal value, +100% The 'left' property sets a positive nominal length value in percentages.
Left with a value of negative zero and no units, -0 The 'left' property sets a negative zero length value with no units.
Left with a value of zero and no units, 0 The 'left' property sets a zero length value with no units.
Left with a value of positive zero and no units, +0 The 'left' property sets a positive zero length value with no units.
Left with a value of 'auto' The 'left' property sets a value of 'auto'.
Left with a value of 'inherit' The 'left' property sets a value of 'inherit'.
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 applied to element with 'display' set to 'table-header-group' The 'left' property applies to elements with a display of 'table-header-group'.
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 applied to element with 'display' set to 'table-row' The 'left' property applies to elements with a display of 'table-row'.
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 applied to element with 'display' set to 'table-column' The 'left' property applies to elements with a display of 'table-column'.
Left applied to element with 'display' set to 'table-cell' The 'left' property applies to elements with a display of 'table-cell'.
Left applied to element with 'display' set to inline The 'left' property applies to elements with a display of inline.
Left applied to element with 'display' set to block The 'left' property applies to elements with a display of block.
Left applied to element with 'display' set to list-item The 'left' property applies to elements with a display of list-item.
Left applied to element with 'display' set to run-in The 'left' property applies to elements with a display of run-in.
Left applied to element with 'display' set to inline-block The 'left' property applies to elements with a display of inline-block.
Left applied to element with 'display' set to 'table' The 'left' property applies to elements with a display of 'table'.
Left applied to element with 'display' set to 'inline-table' The 'left' property applies to elements with a display of 'inline-table'.
Left applied to element with 'display' set to 'table-caption' The 'left' property applies to elements with a display of 'table-caption'.
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.
Relative positioned elements with a left offset Relative positioned elements with a left offset, offsets with respect to the left edge of the box itself.
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 using percentage Percentage offset values for the 'left' property are based off the width of the containing block.
Right using pixels with a value of negative zero, -0px The 'right' property sets a negative zero length value in pixels.
Right using pixels with a value of zero, 0px The 'right' property sets a zero length value in pixels.
Right using pixels with a value of positive zero, +0px The 'right' property sets a positive zero length value in pixels.
Right using pixels with a nominal value, 96px The 'right' property sets a nominal length value in pixels.
Right using pixels with a positive nominal value, +96px The 'right' property sets a positive nominal length value in pixels.
Right using points with a value of negative zero, -0pt The 'right' property sets a negative zero length value in points.
Right using points with a value of zero, 0pt The 'right' property sets a zero length value in points.
Right using points with a value of positive zero, +0pt The 'right' property sets a positive zero length value in points.
Right using points with a nominal value, 72pt The 'right' property sets a nominal length value in points.
Right using points with a positive nominal value, +72pt The 'right' property sets a positive nominal length value in points.
Right using picas with a value of negative zero, -0pc The 'right' property sets a negative zero length value in picas.
Right using picas with a value of zero, 0pc The 'right' property sets a zero length value in picas.
Right using picas with a value of positive zero, +0pc The 'right' property sets a positive zero length value in picas.
Right using picas with a nominal value, 6pc The 'right' property sets a nominal length value in picas.
Right using picas with a positive nominal value, +6pc The 'right' property sets a positive nominal length value in picas.
Right using centimeters with a value of negative zero, -0cm The 'right' property sets a negative zero length value in centimeters.
Right using centimeters with a value of zero, 0cm The 'right' property sets a zero length value in centimeters.
Right using centimeters with a value of positive zero, +0cm The 'right' property sets a positive zero length value in centimeters.
Right using centimeters with a nominal value, 2.54cm The 'right' property sets a nominal length value in centimeters.
Right using centimeters with a positive nominal value, +2.54cm The 'right' property sets a positive nominal length value in centimeters.
Right using millimeters with a value of negative zero, -0mm The 'right' property sets a negative zero length value in millimeters.
Right using millimeters with a value of zero, 0mm The 'right' property sets a zero length value in millimeters.
Right using millimeters with a value of positive zero, +0mm The 'right' property sets a positive zero length value in millimeters.
Right using millimeters with a nominal value, 25.4mm The 'right' property sets a nominal length value in millimeters.
Right using millimeters with a positive nominal value, +25.4mm The 'right' property sets a positive nominal length value in millimeters.
Right using inches with a value of negative zero, -0in The 'right' property sets a negative zero length value in inches.
Right using inches with a value of zero, 0in The 'right' property sets a zero length value in inches.
Right using inches with a value of positive zero, +0in The 'right' property sets a positive zero length value in inches.
Right using inches with a nominal value, 1in The 'right' property sets a nominal length value in inches.
Right using inches with a positive nominal value, +1in The 'right' property sets a positive nominal length value in inches.
Right using 'em' units with a value of negative zero, -0em The 'right' property sets a negative zero length value in 'em' units.	A
Right using 'em' units with a value of zero, 0em The 'right' property sets a zero length value in 'em' units.	A
Right using 'em' units with a value of positive zero, +0em The 'right' property sets a positive zero length value in 'em' units.	A
Right using 'em' units with a nominal value, 6em The 'right' property sets a nominal length value in 'em' units.	A
Right using 'em' units with a positive nominal value, +6em The 'right' property sets a positive nominal length value in 'em' units.	A
Right using 'ex' units with a value of negative zero, -0ex The 'right' property sets a negative zero length value in 'ex' units.	A
Right using 'ex' units with a value of zero, 0ex The 'right' property sets a zero length value in 'ex' units.	A
Right using 'ex' units with a value of positive zero, +0ex The 'right' property sets a positive zero length value in 'ex' units.	A
Right using 'ex' units with a nominal value, 7.5ex The 'right' property sets a nominal length value in 'ex' units.	A
Right using 'ex' units with a positive nominal value, +7.5ex The 'right' property sets a positive nominal length value in 'ex' units.	A
Right using percentages with a value of negative zero, -0% The 'right' property sets a negative zero length value in percentages.
Right using percentages with a value of zero, 0% The 'right' property sets a zero length value in percentages.
Right using percentages with a value of positive zero, +0% The 'right' property sets a positive zero length value in percentages.
Right using percentages with a nominal value, 100% The 'right' property sets a nominal length value in percentages.
Right using percentages with a positive nominal value, +100% The 'right' property sets a positive nominal length value in percentages.
Right with a value of negative zero and no units, -0 The 'right' property sets a negative zero length value with no units.
Right with a value of zero and no units, 0 The 'right' property sets a zero length value with no units.
Right with a value of positive zero and no units, +0 The 'right' property sets a positive zero length value with no units.
Right with a value of 'auto' The 'right' property sets a value of 'auto'.
Right with a value of 'inherit' The 'right' property sets a value of 'inherit'.
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 applied to element with 'display' set to 'table-header-group' The 'right' property applies to elements with a display of 'table-header-group'.
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 applied to element with 'display' set to 'table-row' The 'right' property applies to elements with a display of 'table-row'.
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 applied to element with 'display' set to 'table-column' The 'right' property applies to elements with a display of 'table-column'.
Right applied to element with 'display' set to 'table-cell' The 'right' property applies to elements with a display of 'table-cell'.
Right applied to element with 'display' set to inline The 'right' property applies to elements with a display of inline.
Right applied to element with 'display' set to block The 'right' property applies to elements with a display of block.
Right applied to element with 'display' set to list-item The 'right' property applies to elements with a display of list-item.
Right applied to element with 'display' set to run-in The 'right' property applies to elements with a display of run-in.
Right applied to element with 'display' set to inline-block The 'right' property applies to elements with a display of inline-block.
Right applied to element with 'display' set to 'table' The 'right' property applies to elements with a display of 'table'.
Right applied to element with 'display' set to 'inline-table' The 'right' property applies to elements with a display of 'inline-table'.
Right applied to element with 'display' set to 'table-caption' The 'right' property applies to elements with a display of 'table-caption'.
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.
Position 'right' property defines the offset from the right content edge of the parent box for relative positioning The 'right' property, for relative positioning, specifies the offset of the element in relation to the parent's right content edge.
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 using percentage Percentage offset values for the 'right' property are based off the width of the containing block.
Top using pixels with a value of negative zero, -0px The 'top' property sets a negative zero length value in pixels.
Top using pixels with a value of zero, 0px The 'top' property sets a zero length value in pixels.
Top using pixels with a value of positive zero, +0px The 'top' property sets a positive zero length value in pixels.
Top using pixels with a nominal value, 96px The 'top' property sets a nominal length value in pixels.
Top using pixels with a positive nominal value, +96px The 'top' property sets a positive nominal length value in pixels.
Top using points with a value of negative zero, -0pt The 'top' property sets a negative zero length value in points.
Top using points with a value of zero, 0pt The 'top' property sets a zero length value in points.
Top using points with a value of positive zero, +0pt The 'top' property sets a positive zero length value in points.
Top using points with a nominal value, 72pt The 'top' property sets a nominal length value in points.
Top using points with a positive nominal value, +72pt The 'top' property sets a positive nominal length value in points.
Top using picas with a value of negative zero, -0pc The 'top' property sets a negative zero length value in picas.
Top using picas with a value of zero, 0pc The 'top' property sets a zero length value in picas.
Top using picas with a value of positive zero, +0pc The 'top' property sets a positive zero length value in picas.
Top using picas with a nominal value, 6pc The 'top' property sets a nominal length value in picas.
Top using picas with a positive nominal value, +6pc The 'top' property sets a positive nominal length value in picas.
Top using centimeters with a value of negative zero, -0cm The 'top' property sets a negative zero length value in centimeters.
Top using centimeters with a value of zero, 0cm The 'top' property sets a zero length value in centimeters.
Top using centimeters with a value of positive zero, +0cm The 'top' property sets a positive zero length value in centimeters.
Top using centimeters with a nominal value, 2.54cm The 'top' property sets a nominal length value in centimeters.
Top using centimeters with a positive nominal value, +2.54cm The 'top' property sets a positive nominal length value in centimeters.
Top using millimeters with a value of negative zero, -0mm The 'top' property sets a negative zero length value in millimeters.
Top using millimeters with a value of zero, 0mm The 'top' property sets a zero length value in millimeters.
Top using millimeters with a value of positive zero, +0mm The 'top' property sets a positive zero length value in millimeters.
Top using millimeters with a nominal value, 25.4mm The 'top' property sets a nominal length value in millimeters.
Top using millimeters with a positive nominal value, +25.4mm The 'top' property sets a positive nominal length value in millimeters.
Top using inches with a value of negative zero, -0in The 'top' property sets a negative zero length value in inches.
Top using inches with a value of zero, 0in The 'top' property sets a zero length value in inches.
Top using inches with a value of positive zero, +0in The 'top' property sets a positive zero length value in inches.
Top using inches with a nominal value, 1in The 'top' property sets a nominal length value in inches.
Top using inches with a positive nominal value, +1in The 'top' property sets a positive nominal length value in inches.
Top using 'em' units with a value of negative zero, -0em The 'top' property sets a negative zero length value in 'em' units.	A
Top using 'em' units with a value of zero, 0em The 'top' property sets a zero length value in 'em' units.	A
Top using 'em' units with a value of positive zero, +0em The 'top' property sets a positive zero length value in 'em' units.	A
Top using 'em' units with a nominal value, 6em The 'top' property sets a nominal length value in 'em' units.	A
Top using 'em' units with a positive nominal value, +6em The 'top' property sets a positive nominal length value in 'em' units.	A
Top using 'ex' units with a value of negative zero, -0ex The 'top' property sets a negative zero length value in 'ex' units.	A
Top using 'ex' units with a value of zero, 0ex The 'top' property sets a zero length value in 'ex' units.	A
Top using 'ex' units with a value of positive zero, +0ex The 'top' property sets a positive zero length value in 'ex' units.	A
Top using 'ex' units with a nominal value, 7.5ex The 'top' property sets a nominal length value in 'ex' units.	A
Top using 'ex' units with a positive nominal value, +7.5ex The 'top' property sets a positive nominal length value in 'ex' units.	A
Top using percentages with a value of negative zero, -0% The 'top' property sets a negative zero length value in percentages.
Top using percentages with a value of zero, 0% The 'top' property sets a zero length value in percentages.
Top using percentages with a value of positive zero, +0% The 'top' property sets a positive zero length value in percentages.
Top using percentages with a nominal value, 100% The 'top' property sets a nominal length value in percentages.
Top using percentages with a positive nominal value, +100% The 'top' property sets a positive nominal length value in percentages.
Top with a value of negative zero and no units, -0 The 'top' property sets a negative zero length value with no units.
Top with a value of zero and no units, 0 The 'top' property sets a zero length value with no units.
Top with a value of positive zero and no units, +0 The 'top' property sets a positive zero length value with no units.
Top with a value of 'auto' The 'top' property sets a value of 'auto'.
Top with a value of 'inherit' The 'top' property sets a value of 'inherit', inheriting the value from the parent element.
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 applied to element with 'display' set to 'table-header-group' The 'top' property applies to elements with a display of 'table-header-group'.
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 applied to element with 'display' set to 'table-row' The 'top' property applies to elements with a display of 'table-row'.
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 applied to element with 'display' set to 'table-column' The 'top' property applies to elements with a display of 'table-column'.
Top applied to element with 'display' set to 'table-cell' The 'top' property applies to elements with a display of 'table-cell'.
Top applied to element with 'display' set to inline The 'top' property applies to elements with a display of inline.
Top applied to element with 'display' set to block The 'top' property applies to elements with a display of block.
Top applied to element with 'display' set to list-item The 'top' property applies to elements with a display of list-item.
Top applied to element with 'display' set to run-in The 'top' property applies to elements with a display of run-in.
Top applied to element with 'display' set to inline-block The 'top' property applies to elements with a display of inline-block.
Top applied to element with 'display' set to 'table' The 'top' property applies to elements with a display of 'table'.
Top applied to element with 'display' set to 'inline-table' The 'top' property applies to elements with a display of 'inline-table'.
Top applied to element with 'display' set to 'table-caption' The 'top' property applies to elements with a display of 'table-caption'.
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 content edge.
Position 'top' property defines the offset from the top content edge of the parent box for relative positioning The 'top' property, for relative positioning, specifies the offset of the element in relation to the parent's top content edge.
Position 'top' property defines the offset from the top padding 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 padding edge.
Top offset using percentage Percentage offset values for the 'top' property are based off the height of the containing block.
9.4 Normal flow
9.4.1 Block formatting contexts
Vertical layout of boxes Boxes are vertically laid out one after the other beginning at the top of a containing block.
Vertical distance with margins The vertical distance between two sibling boxes is determined by the margin property.
Block Formatting Contexts: Margin Collapsing Margins collapse between adjacent block boxes in a block formatting context.	AG
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.
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.
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.
New block formatting context with floated elements Floated elements establish new block formatting context.
New block formatting context with absolute positioned elements Absolutely positioned elements establish a new block formatting context.
Inline-block elements establish a new block formatting context Elements defined as inline-blocks establish a new block formatting context.
Table-cell elements establish a new block formatting context Elements defined as table-cell elements establish a new block formatting context.
Table-caption elements establish a new block formatting context Elements with display table-caption establish a new block formatting context.
Overflow set to 'scroll' establishes a new block formatting context A new block formatting context is established when overflow is set to 'scroll'.
Overflow set to 'auto' establishes a new block formatting context A new block formatting context is established when overflow is set to 'auto'.
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 and 'overflow' set to 'visible' Overflow set to 'visible' does not establish a new block formatting context.
9.4.2 Inline formatting context
Inline Elements	AG
Empty inline elements Empty inline elements create a zero-height line box.
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 with a horizontal left margins Horizontal left margins are respected between inline boxes.
Inline formatting context with a horizontal right margins Horizontal right margins are respected between inline boxes.
Inline formatting context with a left border Left borders are respected between inline boxes.
Inline formatting context with a right border Right borders are respected between inline boxes.
Inline formatting context with left padding Left padding are respected between inline boxes.
Inline formatting context with right padding Right padding are respected between inline boxes.
Inline element widths are determined by the containing block Inline element width is determined by the containing block.	A
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.	A
Line boxes are tall enough for all boxes A line box is always tall enough to contain all the boxes in the line.	A
Vertical-align and alignment of inline boxes The 'vertical-align' property determines the vertical alignment of a box within a line box.	A
Inline boxes vertically stack if they do not fit horizontally Inline boxes stack vertically when they do not fit within an element horizontally.
Wrapping inline boxes and vertical spacing Line boxes are stacked with no vertical separation and they never overlap.	A
Line boxes span the container Line boxes span the entire width of a container unless constrained by floats.	A
Line boxes next to floats Line boxes adjust for floated elements.
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.
Text-align 'justify' and space and word stretching If 'text-align' is set to 'justify' the user agent may stretch spaces and/or words.	M
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'.
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 boxes exceeding the line box Inline boxes are split onto additional lines if the line box does not fit within the width.
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 boxes that are split and the margin, border, padding effect Margins, borders and padding have no visual effect when inline boxes are split.	AG
Bidirectional text runs can create additional line boxes Additional inline boxes can be created for the bidirectional text.
9.4.3 Relative positioning
Relative positioning with auto The position of a relatively positioned element with left and right set to auto the values compute to zero.
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.
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.
9.5 Floats
Multiple floated boxes adjacent to each other Floated boxes are allowed to be next to each other.
Stacking Non-Replaced Left Floats
Stacking Replaced Left Floats	G
Stacking Mixed Floats Part I
Stacking Mixed Floats Part II
Stacking Mixed Floats Part III
Non-Replaced Float Not Fitting Beside Opposite Float
Replaced Float Not Fitting Beside Opposite Float	G
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.
Text Not Fitting Beside Replaced Float	G
float	AG
float
float	G
float	AG
float	AG
float	G
float	G
float	G
float	G
float	G
float
clear	AG
clear	G
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.	A
Floats, shifting left until it touches container edge A left floated box shifts left until its outer edge touches the containing block edge.
Floats, shifting right until it touches container edge A right floated box shifts right until its outer edge touches the containing block edge.
Floats, shifting left until touching other floats A left floated box shifts left until it touches another float.
Floats, shifting right until touching other floats A right floated box shifts right until it touches another float.
Floats, shifting down below all other floated elements Floated boxes shift down until it fits.	G
Left floats interacting with inline content Inline boxes are reflowed to the first available line on the other side of a float.
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 and block box flow Block boxes flow vertically as if floats don't exist.
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.
Left floated element margins do not collapse Floating boxes never collapse with margins of adjacent floats or other boxes.
Right floated elements margins do not collapse Right floating boxes never collapse with margins of adjacent boxes or other floats.
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.
Float applied to absolutely positioned elements Float cannot be applied to absolutely positioned element.
Left floated elements and text wrapping Block box is generated and floated to left and content flows on right side starting at the top.
Right floated elements and text wrapping Block box is generated and floated to right and content flows on left side starting at the top.
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.
Floated elements and container edges Left floated boxes cannot go past the container's left edge.
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.
Right floating elements and container edge Right floated boxes cannot go past the container's right edge.
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.
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 and containment Floating box's outer top cannot be higher than the top of its containing block.
Content flowing around floated elements Floats shift the current line and surrounding content to flow along its side unless clear is specified.
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.	G
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.	G
Floated left and aligned with current line box A floated elements top edge will be aligned with the top of a line box.
Floated right element aligns with current line box A line box aligns with the top of a right floated box.
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 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.	G
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 and stacking contexts with content The contents of floats are stacked as if floats generated new stacking contexts.
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.
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
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 Collapsing with Clearance
Margin Collapsing with Clearance
Margin Collapsing with Clearance
Margin Collapsing with Clearance
Margin Collapsing with Clearance
Margin Collapsing with Clearance
max-height - float and overflow	A
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.	A
9.5.1 Positioning the float: the 'float' property
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.
Non-Replaced Floating Left vs. Right
Replaced Float Alignment to Containing Block Edges	G
Replaced Floating Left vs. Right	G
Vertical Position of Floats
Vertical Position of Floats	G
Vertical Position of Floats
Vertical Position of Floats
Floating Elements	G
float	G
float	G
float	G
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 applied to element with 'display' set to 'table-header-group' The 'float' property applies to elements with a display of 'table-header-group'.
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 applied to element with 'display' set to 'table-row' The 'float' property applies to elements with a display of 'table-row'.
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 applied to element with 'display' set to 'table-column' The 'float' property applies to elements with a display of 'table-column'.
Float applied to element with 'display' set to 'table-cell' The 'float' property applies to elements with a display of 'table-cell'.
Float applied to element with 'display' set to inline The 'float' property applies to elements with a display of inline.
Float applied to element with 'display' set to block The 'float' property applies to elements with a display of block.
Float applied to element with 'display' set to list-item The 'float' property applies to elements with a display of list-item.
Float applied to element with 'display' set to run-in The 'float' property applies to elements with a display of run-in.
Float applied to element with 'display' set to inline-block The 'float' property applies to elements with a display of inline-block.
Float applied to element with 'display' set to 'table' The 'float' property applies to elements with a display of 'table'.
Float applied to element with 'display' set to 'inline-table' The 'float' property applies to elements with a display of 'inline-table'.
Float applied to element with 'display' set to 'table-caption' The 'float' property applies to elements with a display of 'table-caption'.
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
Marker box position (inside principal box) - block box with 'float:right' (as child of principal box)
9.5.2 Controlling flow next to floats: the 'clear' property
clear	AG
Clear set to 'left' The 'clear' property set to a value of 'left' positions the current element to clear left-floated elements.
Clear set to 'right' The 'clear' property set to a value of 'right' positions the current element to clear right-floated elements.
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 set to 'none' The 'clear' property set to a value of 'none' does not perform any clearing of floated elements.
Clear set to 'inherit' The 'clear' property set to 'inherit', inherits the computed value from the parent element.
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 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 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 applied to element with 'display' set to 'table-row' The 'clear' property does not apply to elements with a display of 'table-row'.
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 applied to element with 'display' set to 'table-column' The 'clear' property does not apply to elements with a display of 'table-column'.
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 applied to element with 'display' set to inline The 'clear' property does not apply to elements with a display of 'inline'.
Clear applied to element with 'display' set to block The 'clear' property applies to elements with a display of block.
Clear applied to element with 'display' set to list-item The 'clear' property applies to elements with a display of list-item.
Clear applied to element with 'display' set to run-in The 'clear' property applies to elements with a display of 'run-in'.
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 applied to element with 'display' set to 'table' The 'clear' property does not apply to elements with a display of 'table'.
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 applied to element with 'display' set to 'table-caption' The 'clear' property does not apply to elements with a display of 'table-caption'.
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.	AG
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.	AG
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 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 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.
Child elements are not impacted by 'clear' Child elements of the container are not impacted by clear.
Clearance of floats and top margin affect Clearance is introduced as spacing above the top margin.
Clear floats handled after margin collapsing Clearance is introduced as spacing above the top margin after margin collapsing occurs.
Clear set to 'left' with earlier left floated boxes Boxes with 'clear: left' need to clear earlier left floated boxes.
Clear set to 'right' with earlier right floated boxes Boxes with 'clear: right' need to clear earlier right floated boxes.
Clear set to 'both' with earlier floated boxes Boxes with 'clear: both' need to clear earlier floated boxes.
Clear set to 'left' with later left floated boxes Boxes with 'clear: left' do not clear later left floated boxes.
Clear set to 'right' with later right floated boxes Boxes with 'clear: right' do not clear later right floated boxes.
Clear set to 'both' with later floated boxes Boxes with 'clear: both' do not clear later floated boxes.
Clear on inline elements Clear cannot be applied to an inline box.
Clear applies to final block box of a run-in Clearance only applies to the final block box of a run-in element.
Margin Collapsing with Clearance
Margin Collapsing with Clearance
Margin Collapsing with Clearance
Margin Collapsing with Clearance
Margin Collapsing with Clearance
Margin Collapsing with Clearance
Margin Collapsing with Clearance
Margin Collapsing with Clearance
Margin Collapsing with Clearance
Margin Collapsing with Clearance
Margin Collapsing with Clearance
Margin Collapsing with Clearance
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 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 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.
9.6 Absolute positioning
Absolute position element taken out of flow Absolute positioned elements are taken out of the normal flow when they have explicit offsets.
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.
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.
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.
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.
Float is computed to 'none' when element is absolutely positioned Float is computed to 'none' when 'position: absolute' is applied.
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
9.7 Relationships between 'display', 'position', and 'float'
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 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 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.
9.8 Comparison of normal flow, floats, and absolute positioning
9.8.1 Normal flow
9.8.2 Relative positioning
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.
Relatively positioned elements with auto positioning with anonymous boxes after Relatively positioned element with auto positioning appear as though they were positioned in flow.
Relatively positioned elements with auto positioning with inline box after Relatively positioned element with auto positioning appear as though they were positioned in flow.
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.
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.
Relatively positioned box has no impact on boxes which follow Offsetting a box with relative positioning has no effect on the boxes which follow.
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 can overlap.
Relatively positioned content inside container with overflow auto A container with overflow set to auto provides a scrolling mechanism for relatively positioned content.	U
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.
Relatively positioned content inside container with overflow scroll A container with overflow set to scroll provides a scrolling mechanism for relatively positioned content.	U
9.8.3 Floating a box
9.8.4 Absolute positioning
9.9 Layered presentation
Z-index and stacking levels Boxes with greater stack levels are always formatted in front of boxes with lower stack levels.
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 set to minimum value minus 1 The property z-index set to a minimum value minus 1 is correctly truncated to the minimum value.
Z-index set to minimum value The property z-index set to a minimum value is correctly read and applied.
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 set to zero The property z-index with a zero value is read and applied as the value '0'.
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 set to a nominal value The property z-index set to a nominal value is correctly read and applied.
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 set maximum value minus 1 The property z-index set to a maximum value minus 1 is correctly read and applied.
Z-index set to the maximum value The property z-index set to a maximum value is correctly read and applied.
Z-index set to maximum value prefixed with a plus sign The property z-index set to a maximum value prefixed with a plus sign is read as the maximum value.
Z-index set to maximum value plus 1 The property 'z-index' set to a maximum value plus 1 is correctly truncated to the maximum value.
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: 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 - 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'.	I
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'.	I
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'.	I
z-index - negative values Integers should range from -2,147,483,648 to 2,147,483,647 according to C Language Specification
z-index - negative values Integers should range from -2,147,483,648 to 2,147,483,647 according to C Language Specification
Z-index applied to element with 'display' set to 'table-row-group' The 'z-index' property applies to elements with a display of 'table-row-group'.
Z-index applied to element with 'display' set to 'table-header-group' The 'z-index' property applies to elements with a display of 'table-header-group'.
Z-index applied to element with 'display' set to 'table-footer-group' The 'z-index' property applies to elements with a display of 'table-footer-group'.
Z-index applied to element with 'display' set to 'table-row' The 'z-index' property applies to elements with a display of 'table-row'.
Z-index applied to element with 'display' set to 'table-column-group' The 'z-index' property applies to elements with a display of 'table-column-group'.
Z-index applied to element with 'display' set to 'table-column' The 'z-index' property applies to elements with a display of 'table-column'.
Z-index applied to element with 'display' set to 'table-cell' The 'z-index' property applies to elements with a display of 'table-cell'.
Z-index applied to element with 'display' set to inline The 'z-index' property applies to elements with a display of inline.	A
Z-index applied to element with 'display' set to block The 'z-index' property applies to elements with a display of block.
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 applied to element with 'display' set to run-in The 'z-index' property applies to elements with a display of run-in.
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 applied to element with 'display' set to 'table' The 'z-index' property applies to elements with a display of 'table'.
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 applied to element with 'display' set to 'table-caption' The 'z-index' property applies to elements with a display of 'table-caption'.
9.10 Text direction: the 'direction' and 'unicode-bidi' properties
content: with character forced bidi - lro A left-to-right override should be correctly applied when inserted through the content property
Direction set to 'ltr' The 'direction' property set to 'ltr' sets the direction of an element to left-to-right.
Direction set to 'rtl' The 'direction' property set to 'rtl' sets the direction of an element to right-to-left.
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 applied to element with 'display' set to 'table-row-group' The 'direction' property applies to elements with a display of 'table-row-group'.	A
Direction applied to element with 'display' set to 'table-header-group' The 'direction' property applies to elements with a display of 'table-header-group'.	A
Direction applied to element with 'display' set to 'table-footer-group' The 'direction' property applies to elements with a display of 'table-footer-group'.	A
Direction applied to element with 'display' set to 'table-row' The 'direction' property applies to elements with a display of 'table-row'.	A
Direction applied to element with 'display' set to 'table-column-group' The 'direction' property applies to elements with a display of 'table-column-group'.	A
Direction applied to element with 'display' set to 'table-column' The 'direction' property applies to elements with a display of 'table-column'.	A
Direction applied to element with 'display' set to 'table-cell' The 'direction' property applies to elements with a display of 'table-cell'.	A
Direction applied to element with 'display' set to inline The 'direction' property applies to elements with a display of inline.
Direction applied to element with 'display' set to block The 'direction' property applies to elements with a display of block.	A
Direction applied to element with 'display' set to list-item The 'direction' property applies to elements with a display of list-item.	A
Direction applied to element with 'display' set to run-in The 'direction' property applies to elements with a display of run-in.	A
Direction applied to element with 'display' set to inline-block The 'direction' property applies to elements with a display of inline-block.	A
Direction applied to element with 'display' set to 'table' The 'direction' property applies to elements with a display of 'table'.	A
Direction applied to element with 'display' set to 'inline-table' The 'direction' property applies to elements with a display of 'inline-table'.	A
Direction applied to element with 'display' set to 'table-caption' The 'direction' property applies to elements with a display of 'table-caption'.	A
Unicode-bidi set to 'normal' The property 'unicode-bidi' set to 'normal' doesn't modify the directionality of text.
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 set to 'bidi-override' The property 'unicode-bidi' set to 'bidi-override' overrides the directionality of text.
Unicode-bidi set to 'inherit' The property 'unicode-bidi' set to 'inherit' sets a value the same as parent element's value.
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 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 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 applied to element with 'display' set to 'table-row' The 'unicode-bidi' property applies to elements with a display of 'table-row'.
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 applied to element with 'display' set to 'table-column' The 'unicode-bidi' property applies to elements with a display of 'table-column'.
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 applied to element with 'display' set to inline The 'unicode-bidi' property applies to elements with a display of inline.
Unicode-bidi applied to element with 'display' set to block The 'unicode-bidi' property applies to elements with a display of block.
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 applied to element with 'display' set to run-in The 'unicode-bidi' property applies to elements with a display of run-in.
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 applied to element with 'display' set to 'table' The 'unicode-bidi' property applies to elements with a display of 'table'.
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 applied to element with 'display' set to 'table-caption' The 'unicode-bidi' property applies to elements with a display of 'table-caption'.