| 9.3 Positioning schemes |
|---|
| Absolute positions impact on later siblings |
|
| Absolute positioned elements do not impact later siblings. |
|
| 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. |
|
| 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 |
I |
| If relative positioning causes overflow the user agent needs to provide a scrolling mechanism to all of the content at its offset position. |
|
| Relative positioning and overflow: scroll |
I |
| If relative positioning causes overflow the user agent needs to provide a scrolling mechanism to all of the content at its offset position. |
|
| Relative positioning with left canceled out by right position |
|
| Relative positioning with left and right values that cancel each other out appear at the original offset before applying left or right. |
|
| Relative positioning with right canceled out by left position |
|
| Relative positioning with left and right values that cancel each other out appear at the original offset before applying left or right. |
|
| 9.4.2 Inline formatting context |
|---|
| 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 |
A |
| Inline element width is determined by the containing block. |
|
| Inline element widths are determined by the containing block and floated elements |
A |
| Inline element width is determined by the containing block and any floated elements. |
|
| Line boxes are tall enough for all boxes |
A |
| A line box is always tall enough to contain all the boxes in the line. |
|
| Vertical-align and alignment of inline boxes |
A |
| The 'vertical-align' property determines the vertical alignment of a box within a line box. |
|
| 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 |
A |
| Line boxes are stacked with no vertical separation and they never overlap. |
|
| Line boxes span the container |
A |
| Line boxes span the entire width of a container unless constrained by floats. |
|
| 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. |
|
| 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 |
AG |
| Margins, borders and padding have no visual effect when inline boxes are split. |
|
| Bidirectional text runs can create additional line boxes |
|
| Additional inline boxes can be created for the bidirectional text. |
|
| Inline Elements |
AG |
| 9.5 Floats |
|---|
| 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 |
|
| Left floated boxes shift down until it fits. |
|
| 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 |
G |
| 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. |
|
| Position of floated elements in relation to previous inline elements |
G |
| 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. |
|
| 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 |
G |
| The border box of a block level replaced element cannot overlap any floats in the same block formatting context as the element itself. |
|
| 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. |
|
| Margin Collapsing with Clearance |
|
| Margin Collapsing with Clearance |
|
| Margin Collapsing with Clearance |
|
| Margin Collapsing with Clearance |
|
| Margin Collapsing with Clearance |
|
| Margin Collapsing with Clearance |
|
| Floating Elements |
|
| Floating Elements |
|
| Floating Elements |
G |
| Floating Elements |
G |
| Floating Elements |
|
| Floating Elements |
G |
| Floating Elements |
|
| Floating Elements |
|
| Floating Elements |
|
| float |
AG |
| float |
G |
| float |
G |
| float |
G |
| float |
G |
| float |
AG |
| float |
AG |
| float |
|
| float |
|
| float |
G |
| float |
G |
| clear |
AG |
| clear |
G |
| 9.10 Text direction: the 'direction' and 'unicode-bidi' properties |
|---|
| 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' |
A |
| The 'direction' property applies to elements with a display of 'table-row-group'. |
|
| Direction applied to element with 'display' set to 'table-header-group' |
A |
| The 'direction' property applies to elements with a display of 'table-header-group'. |
|
| Direction applied to element with 'display' set to 'table-footer-group' |
A |
| The 'direction' property applies to elements with a display of 'table-footer-group'. |
|
| Direction applied to element with 'display' set to 'table-row' |
A |
| The 'direction' property applies to elements with a display of 'table-row'. |
|
| Direction applied to element with 'display' set to 'table-column-group' |
A |
| The 'direction' property applies to elements with a display of 'table-column-group'. |
|
| Direction applied to element with 'display' set to 'table-column' |
A |
| The 'direction' property applies to elements with a display of 'table-column'. |
|
| Direction applied to element with 'display' set to 'table-cell' |
A |
| The 'direction' property applies to elements with a display of 'table-cell'. |
|
| 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 |
A |
| The 'direction' property applies to elements with a display of block. |
|
| Direction applied to element with 'display' set to list-item |
A |
| The 'direction' property applies to elements with a display of list-item. |
|
| Direction applied to element with 'display' set to run-in |
A |
| The 'direction' property applies to elements with a display of run-in. |
|
| Direction applied to element with 'display' set to inline-block |
A |
| The 'direction' property applies to elements with a display of inline-block. |
|
| Direction applied to element with 'display' set to 'table' |
A |
| The 'direction' property applies to elements with a display of 'table'. |
|
| Direction applied to element with 'display' set to 'inline-table' |
A |
| The 'direction' property applies to elements with a display of 'inline-table'. |
|
| Direction applied to element with 'display' set to 'table-caption' |
A |
| The 'direction' property applies to elements with a display of 'table-caption'. |
|
| 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'. |
|
| direction:rtl on body |
|
| direction:rtl on body should inherit to paragraphs |
|
| direction - nested ltr and rtl |
|
| Direction on paragraph should override direction on body |
|
| direction:rtl - unordered list |
|
| direction:rtl should apply to unordered lists, putting bullets on the right |
|
| direction:rtl - nested unordered list |
|
| direction:rtl should apply to nested unordered lists, putting bullets on the right and offset leftwards |
|
| direction:rtl - ordered list |
|
| direction:rtl should apply to nested ordered lists, putting bullets on the right and offset leftwards |
|
| text-align: justify and direction:rtl - unordered list |
|
| text-align: justify should apply to unordered lists in rtl context without affecting their rtlness |
|
| text-align: left and direction:rtl - unordered list |
|
| text-align:left should be applied to unordered list in rtl context without affecting its rtlness |
|
| text-align: right and direction:rtl - unordered list |
|
| text-align:right should be applied to unordered list in rtl context without affecting its rtlness |
|
| text-align: center and direction:rtl - unordered list |
|
| text-align: center should apply to unordered lists in rtl context without affecting their rtlness |
|
| list-style-image in rtl context |
|
| list-style-image should be applied correctly in rtl context |
|
| list-style-position in rtl context |
|
| list-style-position:inside in rtl context should let text flow below the bullet on the right side |
|
| Lists 4 - list-style-type |
|
| list-style-type should be correctly applied in rtl context |
|
| overflow:scroll in rtl context |
|
| Scrolling UI created by overflow should be positioned on the left in rtl context |
|
| unicode-bidi: bidi-override on table |
|
| bidi-override should not be applied to table cell content when specified on table |
|
| unicode-bidi: bidi-override on table cell |
|
| bidi-override should be applied to table-cell content when specified on the cell |
|
| unicode-bidi: bidi-override on list |
|
| bidi-override should not be applied to list item when specified on ul |
|
| unicode-bidi: bidi-override on list item |
|
| bidi-override should be applied when specified on list item |
|
| unicode-bidi: bidi-override on nested div |
|
| bidi-override should be applied to inline-level descendants but not block-level descendants |
|
| 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 |
|
| direction: rtl on table |
|
| direction:rtl on table should reverse order of table cells |
|
| direction: on nested tables |
|
| direction: should affect order of table cells |
|
| unicode-bidi: bidi-override - rtl |
|
| unicode-bidi: bidi-override should order characters strictly according to value of direction property |
|
| unicode-bidi: embed - nested ltr and rtl |
|
| unicode-bidi: embed should open a new bidi embedding level for inline-level element |
|
| CSS test: unicode-bidi: bidi-override in alt text |
|
| unicode-bidi should be applied to image alt text |
|
| :first-letter and direction:rtl - inherent ltr text |
|
| :first-letter applied to inherent LTR text in RTL context should adhere to text direction, not paragraph direction |
|
| :first-letter and bidi-override - inherent ltr text |
|
| :first-letter applied to inherent LTR text reordered with bidi-override should pick out the first logical letter |
|
| :first-letter and bidi-override - inherent rtl text |
|
| :first-letter applied to inherent RTL text reordered with bidi-override should pick out the first logical letter |
|
| 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 |
|
| unicode-bidi: bidi-override - glyph mirroring |
|
| Glyph mirroring of characters with unicode Bidi_Mirrored property should be performed direction:rtl is applied |
|
| unicode-bidi: bidi-override on inline - rtl |
|
| bidi-override should be applied to inlines with no interruptions to surrounding text |
|
| unicode-bidi: bidi-override on inline - nested |
|
| Nested bidi-override should be applied to inlines with no interruptions to surrounding text |
|
| Text-align and direction - left and rtl |
|
| Text-align property should override the default text-align change caused by a switch of direction |
|
| Text-align and direction - nested center and rtl |
|
| Text-align property should override the default text-align change caused by a switch of direction |
|
| Text-align and direction - nested rtl, center and ltr |
|
| Text-align property should override the default text-align change caused by a switch of direction |
|
| Text-align and direction - nested center and ltr |
|
| Text-align property should override the default text-align change caused by a switch of direction |
|
| Text-align and direction - nested rtl, right and ltr |
|
| Text-align property should override the default text-align change caused by a switch of direction |
|
| Text-align and direction - nested left and rtl |
|
| Text-align property should override the default text-align change caused by a switch of direction |
|
| direction:rtl and text-align: left |
|
| Text-align should override default text-align in rtl context |
|
| direction:rtl and text-align: justify |
|
| Text-align should override default text-align in rtl context |
|
| text-align: justify - joined text |
|
| Joined text should be justified by text-align: justify |
|