| 8.3.1 Collapsing margins |
|---|
| Margin collapsing - horizontal margins do not collapse |
A |
| Horizontal margins of element do not collapse. |
|
| Margin collapsing - maximum of the two adjoining margins |
AG |
| When margins collapse the margin is the maximum of the two margin widths. |
|
| Margin collapsing - negative margins adjoining positive margins |
|
| Negative margins deduct from the maximum of the adjoining positive margin. |
|
| Margin collapsing - negative margins deducted from zero |
|
| Negative margins are deducted from zero if no positive margins are adjoining. |
|
| Margin collapsing - adjoining margins of non-siblings or ancestors |
AG |
| Adjoining margin boxes generated by elements, that are not related by siblings or ancestors, collapse. |
|
| Margin collapsing - floated elements do not collapse margins |
AG |
| A floated box does not collapse its margins with any other box. |
|
| Margin collapsing - floated elements do not collapse margins with children |
AG |
| In-flow children of a floated element do not collapse margins. |
|
| Margin collapsing and elements with 'overflow' set to 'visible' |
AG |
| Elements with 'overflow' set to 'visible' collapse margin with in-flow children. |
|
| Margin collapsing and elements with 'overflow' set to 'hidden' |
A |
| Elements with 'overflow' set to 'hidden' do not collapse margin with in-flow children. |
|
| Margin collapsing and elements with 'overflow' set to 'scroll' |
A |
| Elements with 'overflow' set to 'scroll' do not collapse margin with in-flow children. |
|
| Margin collapsing and elements with 'overflow' set to 'auto' |
A |
| Elements with 'overflow' set to 'auto' do not collapse margin with in-flow children. |
|
| Margin collapsing - absolute positioning and siblings |
AG |
| Absolutely positioned boxes do not collapse margins with siblings. |
|
| Margin collapsing - absolute positioning with children elements |
AG |
| Absolutely positioned boxes do not collapse margins with any in-flow children. |
|
| Margin collapsing - inline-block elements as siblings |
AG |
| Inline-block elements that are siblings do not collapse their margins. |
|
| Margin collapsing - inline-block child does not collapse margins with parent |
AG |
| An element that is set in inline-block and its children set to inline-block do not collapse margins. |
|
| Margin collapsing - top/bottom margins adjoining collapse through |
AG |
| When top and bottom margins are adjoining margins collapse through that element. |
|
| Margin collapsing - parent edge and element edge are the same when margins collapse |
|
| When the margin top of a box collapses with the top margin of its parent the top edge is the same as the parent's. |
|
| Margin collapsing - element with clearance |
AG |
| An element that has clearance applied to it will not collapse its top margin with its parent's bottom margin. |
|
| Margin collapsing - elements that collapse margins have to effect on positions of other elements that also have margins that are collapsing |
AG |
| Positions of elements that have been collapsed through (empty elements) have no effect on positions of other elements whose margins are being collapsed. |
|
| Margin collapsing with the root element |
AG |
| For HTML pages the html element does not collapse its margins with other elements. |
|
| Margin collapsing with the 'body' element |
AG |
| For HTML pages the 'body' element's margins collapse. |
|
| Margin collapsing - adjoining block boxes |
AG |
| Bottom margin of an in-flow block-level element is always adjoining to the top margin of its next in-flow block-level sibling. |
|
| Margin collapsing - clearance applied to sibling |
AG |
| If a block-level sibling has clearance then the bottom margin of its previous sibling will not be adjoining its top margin. |
|
| Margin collapsing - in-flow block-level margin adjoining child's margin |
AG |
| When an in-flow block-level element is adjoining its in-flow block-level child's top margin and the child has no top border, top padding or clearance then collapse. |
|
| Margin collapsing - in-flow block-level margins with an element 'height' of 'auto' and 'min-height' of zero |
AG |
| An element's margins are adjoining and can collapse if the 'min-height' is zero, there are no vertical borders or padding, it has a 'height' of zero or 'auto', it has no line boxes and all of its in-flow children's margins are adjoining. |
|
| Margin collapsing - bottom margin not collapse when cleared |
AG |
| Top margins collapse to siblings and bottom margin do not collapse when own margins collapse and clearance is applied. |
|
| Margin collapsing is based on used values of 'padding', 'margin' and 'border' |
AG |
| Collapsing of margins is based on the used values of 'padding', 'margin' and 'border'. |
|
| 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 |
|
| Vertical Formatting |
|
| 8.5.2 Border color: 'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color', and 'border-color' |
|---|
| Border-color shorthand - one value |
|
| Specifying a single value on the 'border-color' property sets the value for all sides of the element. |
|
| Border-color shorthand - two values |
|
| Specifying two values on the 'border-color' property assigns the first value to the top and bottom and the second to the left and right. |
|
| Border-color shorthand - three values |
|
| Specifying three values to the 'border-color' property assigns the first value to the top the second value to the left and right and the third value to the bottom. |
|
| Border-color shorthand - four values |
|
| Specifying four values to the 'border-color' property assigns the values for top, right, bottom and left. |
|
| Border-style initial set to 'none' |
|
| Verify that 'border-color' and 'border-width' do not display a border since 'border-style' is initially 'none'. |
|
| Border-style set using three values |
|
| Applying three values to the border-style property applies the first value to the top the second value to the left and right and the third value to the bottom. |
|
| 8.5.3 Border style: 'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style', and 'border-style' |
|---|
| Border-style 'groove' color rendering |
|
| The 'groove' 'border-style' uses the color defined for rendering the groove border. |
|
| Border-style 'ridge' color rendering |
|
| The 'ridge' 'border-style' uses the color defined for rendering the ridge border. |
|
| Border-style 'inset' color rendering |
|
| The 'inset' 'border-style' uses the color defined for rendering the inset border. |
|
| Border-style 'outset' color rendering |
|
| The 'outset' 'border-style' uses the color defined for rendering the outset border. |
|
| Border-style set using one value |
|
| Applying a single value to the border-style property applies the value to all sides of the element. |
|
| Border-style set using two values |
|
| Applying two values to the border-style property applies the first value to the top and bottom and the second to the left and right. |
|
| Border-style set using four values |
|
| Applying four values to the border-style property applies the values top, right, bottom, left, respectively. |
|
| Double lines border style does not change border width |
|
| The 'double' 'border-style' does not change the size of the border width. The sum of the two lines and the space need to equal the border width. |
|
| 8.6 The box model for inline elements in bidirectional context |
|---|
| Borders drawn in visual order even when direction set to left-to-right |
AG |
| Borders are drawn in visual order depending on the direction of content. |
|
| Borders drawn in visual order even when direction set to right-to-left |
|
| Borders are drawn in visual order depending on the direction of content. |
|
| direction and borders - normal |
|
| Borders should be unaffected by directionality |
|
| bidirection box model - borders on inline in normal block |
|
| Border sides should be unaffected by directionality |
|
| bidirection box model - borders on inline in embed block |
|
| Border sides should be unaffected by directionality |
|
| bidirection box model - borders on inline in bidi-override block |
|
| Border sides should be unaffected by directionality |
|
| bidirection box model - borders on normal inline |
|
| Border sides should be unaffected by directionality |
|
| bidirection box model - borders on embed inline |
|
| Border sides should be unaffected by directionality |
|
| bidirection box model - borders on bidi-override inline |
|
| Border sides should be unaffected by directionality |
|
| bidirection box model - borders on normal block |
|
| Border sides should be unaffected by directionality |
|
| bidirection box model - borders on embed block |
|
| Border sides should be unaffected by directionality |
|
| bidirection box model - borders on bidi-override block |
|
| Border sides should be unaffected by directionality |
|
| bidirection box model - margin-left on bidi-override inline |
|
| Side margins should be unaffected by directionality |
|
| bidirection box model - margin-left on normal inline |
|
| Side margins should be unaffected by directionality |
|
| bidirection box model - margin-left on embed inline |
|
| Side margins should be unaffected by directionality |
|
| bidirection box model - margin-left on inline in bidi-override block |
|
| Side margins should be unaffected by directionality |
|
| bidirection box model - margin-left on inline in normal block |
|
| Side margins should be unaffected by directionality |
|
| bidirection box model - margin-left on inline in embed block |
|
| Side margins should be unaffected by directionality |
|
| bidirection box model - margin-left on bidi-override block |
|
| Side margins should be unaffected by directionality |
|
| bidirection box model - margin-left on normal block |
|
| Side margins should be unaffected by directionality |
|
| bidirection box model - margin-left on embed block |
|
| Side margins should be unaffected by directionality |
|
| bidirection box model - margin-right on bidi-override inline |
|
| Side margins should be unaffected by directionality |
|
| bidirection box model - margin-right on normal inline |
|
| Side margins should be unaffected by directionality |
|
| bidirection box model - margin-right on embed inline |
|
| Side margins should be unaffected by directionality |
|
| bidirection box model - margin-right on inline in bidi-override block |
|
| Side margins should be unaffected by directionality |
|
| bidirection box model - margin-right on inline in normal block |
|
| Side margins should be unaffected by directionality |
|
| bidirection box model - margin-right on inline in embed block |
|
| Side margins should be unaffected by directionality |
|
| bidirection box model - margin-right on bidi-override block |
|
| Side margins should be unaffected by directionality |
|
| bidirection box model - margin-right on normal block |
|
| Side margins should be unaffected by directionality |
|
| bidirection box model - margin-right on embed block |
|
| Side margins should be unaffected by directionality |
|
| bidirection box model - padding-left on bidi-override inline |
|
| Side padding should be unaffected by directionality |
|
| bidirection box model - padding-left on inline in normal block |
|
| Side padding should be unaffected by directionality |
|
| bidirection box model - padding-left on inline in embed block |
|
| Side padding should be unaffected by directionality |
|
| bidirection box model - padding-left on inline in bidi-override block |
|
| Side padding should be unaffected by directionality |
|
| bidirection box model - padding-left on normal inline |
|
| Side padding should be unaffected by directionality |
|
| bidirection box model - padding-left on embed inline |
|
| Side padding should be unaffected by directionality |
|
| bidirection box model - padding-left on bidi-override block |
|
| Side padding should be unaffected by directionality |
|
| bidirection box model - padding-left on normal block |
|
| Side padding should be unaffected by directionality |
|
| bidirection box model - padding-left on embed block |
|
| Side padding should be unaffected by directionality |
|
| bidirection box model - padding-right on bidi-override inline |
|
| Side padding should be unaffected by directionality |
|
| bidirection box model - padding-right on inline in normal block |
|
| Side padding should be unaffected by directionality |
|
| bidirection box model - padding-right on inline in embed block |
|
| Side padding should be unaffected by directionality |
|
| bidirection box model - padding-right on inline in bidi-override block |
|
| Side padding should be unaffected by directionality |
|
| bidirection box model - padding-right on normal inline |
|
| Side padding should be unaffected by directionality |
|
| bidirection box model - padding-right on embed inline |
|
| Side padding should be unaffected by directionality |
|
| bidirection box model - padding-right on bidi-override block |
|
| Side padding should be unaffected by directionality |
|
| bidirection box model - padding-right on normal block |
|
| Side padding should be unaffected by directionality |
|
| bidirection box model - padding-right on embed block |
|
| Side padding should be unaffected by directionality |
|