CSS2.1 Conformance Test Suite

Chapter 6 - Assigning property values, Cascading, and Inheritance (90 tests)

Test Flags
6 Assigning property values, Cascading, and Inheritance
@import not as the first declaration
  • An @import is ignored if it is not the first statement in a style block.
Importing external stylesheets with @import
  • An @import used to import external stylesheets.
Importing styles using @import with a string
  • An @import used with just a string is interpreted as if it had url(...) around it.
Media dependency on @import set to 'print'
  • Specifying a media-dependency of print does not apply rules to the user agent display.
Media dependency on @import set to 'all'
  • Specifying the media-dependency of 'all' applies to all media types including user agent display.
Media dependency on @import set to 'screen'
  • Specifying the media-dependent import rules to 'screen' applies to user agent display.
@import with @charset
  • An @import is valid after @charset.
Overriding the default style sheet
  • Default style sheet settings can be overridden.
A
Attribute 'align' vs. CSS 'text-align' specificity
  • Attribute 'align' has a specificity of zero and is overridden by CSS.
Attribute 'alink' vs. CSS active specificity
  • Attribute 'alink' has a specificity of zero and is overridden by CSS.
I
Attribute 'bgcolor' vs. CSS 'background-color' specificity
  • Attribute 'bgcolor' has a specificity of zero and is overridden by CSS.
Attribute 'border' vs. CSS border specificity
  • Attribute 'border' has 0 specificity and is overridden by CSS.
Attribute 'cellpadding' vs. CSS 'padding' specificity
  • Attribute 'cellpadding' has a specificity of zero and is overridden by CSS.
Attribute 'cellspacing' vs. CSS border-spacing specificity
  • Attribute 'cellspacing' has 0 specificity and is overridden by CSS.
Attribute 'clear' vs. CSS 'clear' specificity
  • Attribute 'clear' has a specificity of zero and is overridden by CSS.
Attribute 'color' vs. CSS 'color' specificity
  • Attribute 'color' has a specificity of zero and is overridden by CSS.
Attribute 'cols' vs CSS 'width' specificity
  • Attribute 'cols' has a specificity of zero and is overridden by CSS.
Attribute 'width' vs. CSS 'width' specificity
  • Attribute 'width' has a specificity of zero and is overridden by CSS.
Attribute 'face' vs. CSS 'font-family' specificity
  • Attribute 'face' has a specificity of zero and is overridden by CSS.
A
Attribute 'valign' vs. CSS 'vertical-align' specificity
  • Attribute 'valign' has a specificity of zero and is overridden by CSS.
Attribute 'frame' vs. CSS 'border' specificity
  • Attribute 'frame' has a specificity of zero and is overridden by CSS.
Attribute 'rules' vs. CSS border specificity
  • Attribute 'rules' has a specificity of zero and is overridden by CSS.
Attribute 'height' vs. CSS 'height' specificity
  • Attribute 'height' has a specificity of zero and is overridden by CSS.
Attribute 'hspace' vs. CSS 'margin' specificity
  • Attribute 'hspace' has a specificity of zero and is overridden by CSS.
G
Attribute 'vspace' vs. CSS 'margin' specificity
  • Attribute 'vspace' has a specificity of zero and is overridden by CSS.
G
Attribute 'link' vs. CSS ':link' specificity
  • Attribute 'link' has a specificity of zero and is overridden by CSS.
Attribute 'marginheight' vs. CSS 'margin' specificity
  • Attribute 'marginheight' has a specificity of zero and is overridden by CSS.
Attribute 'marginwidth' vs. CSS 'margin' specificity
  • Attribute 'marginwidth' has a specificity of zero and is overridden by CSS.
Attribute 'nowrap' vs. CSS 'white-space' specificity
  • Attribute 'nowrap' has a specificity of zero and is overridden by CSS.
Attribute 'rows' vs CSS 'height' specificity
  • Attribute 'rows' has a specificity of zero and is overridden by CSS.
Attribute 'size' vs CSS 'height' specificity
  • Attribute 'size' has a specificity of zero and is overridden by CSS.
Attribute 'text' vs. CSS 'color' specificity
  • Attribute 'text' has a specificity of zero and is overridden by CSS.
Attribute 'vlink' vs. CSS ':visited' specificity
  • Attribute 'vlink' has a specificity of zero and is overridden by CSS.
Element selector precedence
  • The element selector takes precedence over the font element 'color' attribute.
Universal selector precedence
  • The universal selector and the 'color' attribute have the same specificity. The universal selector is applied since CSS takes precedence.
User style sheet precedence
  • The 'font' element's 'color' attribute trumps the user stylesheet's universal selector. They have the same specificity but the font element is a virtual author rule.
Inheritance
  • Children elements can inherit properties from parents.
Inheriting computed values
  • The computed value of a font-size with a percentage is the percentage of its parent's font-size value. A nested element which also has a percentage applies the parents' specified value (which is inherited).
A
Non-inherited values
  • If the cascade results in a value, use it.
Calculating specificity - Specificity 0010 vs. 0001
  • The element selector has the highest specificity - specificity 0010 takes precedence over 0001.
Calculating specificity - Inline Style
  • Specificity of the inline style trumps all other selectors.
Calculating specificity - Specificity 0100 vs. 0011
  • The element selector has the highest specificity - specificity 0100 takes precedence over 0011.
Calculating specificity - Specificity 0011 vs. 0010
  • The element selector has the highest specificity - specificity 0011 takes precedence over 0010.
Calculating specificity - Specificity 0002 vs. 0001
  • First-line selector with highest specificity wins - specificity 0002 takes precedence over 0001.
Calculating specificity - Pseudo-element vs. simple element
  • The pseudo-element 'first-line' takes precedence over simple element selector.
Calculating specificity - Specificity 0001 vs. 0000
  • The element selector has the highest specificity - specificity 0001 takes precedence over 0000.
Calculating specificity - specificity 0003 vs. 0001
  • First-line selector with highest specificity wins - specificity 0003 takes precedence over 0001.
Calculating specificity - specificity 0003 vs. 0002
  • First-line selector with highest specificity wins - specificity 0003 take precedence over 0002.
User defined stylesheet can be applied
  • User stylesheet can be applied to the page.
User defined stylesheet can be applied and persisted
  • The user stylesheet is still applied after close and reopen the user agent window.
User defined stylesheet cannot override property defined in style tag
  • The user style sheet cannot override property defined in style tag.
User defined stylesheet cannot override inline style
  • The user style sheet cannot override property defined in inline style attribute.
Descendant selector defined in user stylesheet can be applied
  • The descendant selector defined in user stylesheet is applied to the appropriate element.
Child selector defined in user stylesheet can be applied
  • The child selector defined in user stylesheet is applied to the appropriate element.
Adjacent sibling selector defined in user stylesheet can be applied
  • The adjacent sibling selector defined in user stylesheet is applied to the appropriate element.
Attribute selector defined in user stylesheet can be applied
  • The attribute selector defined in user stylesheet is applied to the appropriate element.
ID selector defined in user stylesheet can be applied
  • The ID selector defined in user stylesheet is applied to the appropriate element.
Pseudo-class selector :first-child defined in user stylesheet can be applied
  • The pseudo-class selector :first-child defined in user stylesheet is applied to the first child of an element.
Pseudo-element first-line selector defined in user stylesheet can be applied
  • The pseudo-element selector :first-line defined in user stylesheet is applied to the first line of an element.
Link defined in user stylesheet can be applied
  • The pseudo-class selector :link defined in user stylesheet is applied to all links.
Visited selector defined in user stylesheet can be applied
  • The pseudo-class selector :visited defined in user stylesheet is applied when a link has already been visited.
I
Hover defined in user stylesheet can be applied
  • The pseudo-class selector :hover defined in user stylesheet is applied when the mouse is above an element.
I
Pseudo-class :active defined in user stylesheet can be applied
  • The pseudo-class selector :active defined in user stylesheet is implemented.
I
Pseudo-element first-letter selector defined in user stylesheet can be applied
  • The pseudo-element selector :first-letter defined in user stylesheet is applied to the first letter of an element.
Pseudo-element before selector defined in user stylesheet can be applied
  • The pseudo-element selector :before defined in user stylesheet is inserted before an element.
Pseudo-element after selector defined in user stylesheet can be applied
  • The pseudo-element selector :after defined in user stylesheet is inserted after an element.
6.1 Specified, computed, and actual values
6.1.1 Specified values
list-style - initial value
  • 'list-style' property is a shorthand notation that sets the three properties 'list-style-type', 'list-style-image' and 'list-style-position'. If one of the 3 list-style properties is not specified explicitly, then such 'list-style' property is assigned its initial value as indicated in its property definition.
G
6.1.2 Computed values
6.1.3 Used values
6.1.4 Actual values
6.2 Inheritance
Explicit Inheritance
6.2.1 The 'inherit' value
Attribute 'background' vs. CSS 'background' specificity
  • Attribute 'background' has a specificity of zero and is overridden by CSS.
G
Inherit keyword
  • Children elements inherit the parents color given the 'inherit' keyword.
Inherit on non-inherited properties
  • Inherit can be used on properties which are not normally inherited.
Inherit on the root element
  • If the 'inherit' value is set on the root element, the property is assigned its initial value.
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
6.3 The @import rule
@import
  • Media-dependent @import rules
P
6.4 The cascade
User style sheets
  • Normal user declarations override the default user agent style sheet.
Author stylesheets override user stylesheets
  • Normal author declarations override normal user stylesheet declarations.
Author rules with !important and a user stylesheet
  • Author rules using !important override user stylesheet rules.
User stylesheet rules using !important and normal author rules
  • User stylesheet rules using !important override normal author rules.
Redefining rules
  • The latter specified rule wins when having the same specificity and weight.
User style sheets and redefining rules
  • The latter specified rule wins when having the same specificity and weight in user styles sheets.
Author rules local and external
  • Author rules in embedded stylesheets override author rules in imported stylesheets.
Shorthand properties with !important
  • Shorthand properties with !important apply to all direct sub-properties.
Author rules with !important and other normal author rules
  • Author rules with !important override normal author rules.
User stylesheet rules with !important and !important author rules
  • User stylesheet rules with !important override !important author rules.
User stylesheet rules with !important and normal user rules
  • User stylesheet rules with !important override normal user rules.
6.4.1 Cascading order
6.4.2 !important rules
6.4.3 Calculating a selector's specificity
6.4.4 Precedence of non-CSS presentational hints