CSS 2.1 Conformance Test Suite

Assigning property values, Cascading, and Inheritance (145 tests)

Test Refs Flags Info
+ 6 Assigning property values, Cascading, and Inheritance
at-import-001 @import not as the first declaration
  • An @import is ignored if it is not the first statement in a style block.
at-import-002 Importing external stylesheets with @import
  • An @import used to import external stylesheets.
at-import-003 Importing styles using @import with a string
  • An @import used with just a string is interpreted as if it had url(...) around it.
at-import-004 Media dependency on @import set to 'print'
  • Specifying a media-dependency of print does not apply rules to the user agent display.
at-import-005 Media dependency on @import set to 'all'
  • Specifying the media-dependency of 'all' applies to all media types including user agent display.
at-import-006 Media dependency on @import set to 'screen'
  • Specifying the media-dependent import rules to 'screen' applies to user agent display.
at-import-007 @import with @charset
  • An @import is valid after @charset.
html-precedence-002 Universal selector precedence
  • The universal selector and the 'color' attribute have the same specificity. The universal selector is applied since CSS takes precedence.
html-precedence-003 User Style 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.
inherited-value-002 Ahem 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).
user-stylesheet-001 User Style User defined stylesheet can be applied
  • User stylesheet can be applied to the page.
user-stylesheet-002 InteractUser Style User defined stylesheet can be applied and persisted
  • The user stylesheet is still applied after close and reopen the user agent window.
user-stylesheet-003 User Style Rules with normal declarations in an user defined stylesheet can be overriden by rules with normal declarations from author in a style block
  • A CSS rule (with normal - not !important - declarations) in an author style sheet have more weight than a CSS rule (with normal - not !important -declarations) in an user style sheet.
user-stylesheet-004 User Style Rules with normal declarations in an user defined stylesheet can be overriden by normal declarations from author in an inline style attribute
  • A normal - not !important - declaration in an inline style from author have more weight than a CSS rule (with normal - not !important -) declarations in an user style sheet.
user-stylesheet-005 User Style Descendant selector defined in user stylesheet can be applied
  • The descendant selector defined in user stylesheet is applied to the appropriate element.
user-stylesheet-006 User Style Child selector defined in user stylesheet can be applied
  • The child selector defined in user stylesheet is applied to the appropriate element.
user-stylesheet-007 User Style Adjacent sibling selector defined in user stylesheet can be applied
  • The adjacent sibling selector defined in user stylesheet is applied to the appropriate element.
user-stylesheet-008 User Style Attribute selector defined in user stylesheet can be applied
  • The attribute selector defined in user stylesheet is applied to the appropriate element.
user-stylesheet-009 User Style ID selector defined in user stylesheet can be applied
  • The ID selector defined in user stylesheet is applied to the appropriate element.
user-stylesheet-010 User Style 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.
user-stylesheet-011 User Style 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.
user-stylesheet-012 HistoryUser Style Link defined in user stylesheet can be applied
  • The pseudo-class selector :link defined in user stylesheet is applied to all links.
user-stylesheet-013 InteractUser Style 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.
user-stylesheet-014 InteractUser Style 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.
user-stylesheet-015 InteractUser Style Pseudo-class :active defined in user stylesheet can be applied
  • The pseudo-class selector :active defined in user stylesheet is implemented.
user-stylesheet-016 User Style 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.
user-stylesheet-017 User Style 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.
user-stylesheet-018 User Style 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
cascade-precedence-001 cascade mechanism has precedence over inheritance - font boldness
  • When determining the specified value of a property, the cascade mechanism of (user agent, author, user) style sheets has precedence. If no value results from such mechanism, then the property may inherit from its parent. In this testcase, it is presumed that b elements are specified in the user agents style sheets to embold their text content.
cascade-precedence-002 cascade mechanism has precedence over inheritance - font styling
  • When determining the specified value of a property, the cascade mechanism of (user agent, author, user) style sheets has precedence. If no value results from such mechanism, then the property may inherit from its parent. In this testcase, it is presumed that i elements are specified in the user agents style sheets to italicize their text content.
list-style-019 Bitmaps 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.
non-inherited-value-001 Non-inherited values
  • If the cascade results in a value, use it.
+ 6.1.2 Computed values
+ 6.1.3 Used values
+ 6.1.4 Actual values
+ 6.2 Inheritance
c13-inh-underlin-000 Inheritance
c13-inheritance-000 = Inheritance
c548-ln-ht-003 = AhemBitmaps line-height
c548-ln-ht-004 = AhemBitmaps line-height
cascade-precedence-001 cascade mechanism has precedence over inheritance - font boldness
  • When determining the specified value of a property, the cascade mechanism of (user agent, author, user) style sheets has precedence. If no value results from such mechanism, then the property may inherit from its parent. In this testcase, it is presumed that b elements are specified in the user agents style sheets to embold their text content.
cascade-precedence-002 cascade mechanism has precedence over inheritance - font styling
  • When determining the specified value of a property, the cascade mechanism of (user agent, author, user) style sheets has precedence. If no value results from such mechanism, then the property may inherit from its parent. In this testcase, it is presumed that i elements are specified in the user agents style sheets to italicize their text content.
inherit-border-padding-000 Explicit Inheritance
inherited-value-001 Inheritance
  • Children elements can inherit properties from parents.
style-attr-cascade-007 = Bitmaps Style Attribute Inheritance
  • Iff a property inherits, it also inherits when declared via style attribute.
+ 6.2.1 The 'inherit' value
dynamic-top-change-001 = DOM/JS Inheriting 'top' changes from relpos grandparent
  • The position of a positioned element which inherits its 'top' value from its relatively positioned grandparent changes when the grandparent's 'top' value is changed.
dynamic-top-change-002 = DOM/JS Inheriting 'top' changes from parent table-row through anonymous table boxes
  • The position of a positioned element which inherits its 'top' value from its parent changes when the parent's 'top' value is changed even if the parent is display:table-row.
dynamic-top-change-003 = DOM/JS Inheriting 'top' changes from parent table through anonymous table boxes
  • The position of a positioned element which inherits its 'top' value from its parent changes when the parent's 'top' value is changed even if the parent is display:table.
dynamic-top-change-004 = DOM/JS Inheriting 'top' changes from abspos parent
  • The position of a positioned element which inherits its 'top' value from its parent changes when the parent's 'top' value is changed.
dynamic-top-change-005 ComboDOM/JS Inheriting 'top' changes from abspos grandparent
  • The position of a positioned element which inherits its 'top' value from its relatively positioned parent changes when the parent's 'top' value is changed.
dynamic-top-change-005a DOM/JS Inheriting 'top' changes from abspos grandparent (variant: block parent)
  • The position of a positioned element which inherits its 'top' value from its relatively positioned parent changes when the parent's 'top' value is changed.
dynamic-top-change-005b DOM/JS Inheriting 'top' changes from abspos grandparent (non-dynamic variant)
  • The position of a positioned element which inherits its 'top' value from its relatively positioned parent changes when the parent's 'top' value is changed.
height-inherit-001 = Inheriting Explicit Heights
  • The computed height is inherited, even if the 'height' property does not apply.
inherit-001 Inherit keyword
  • Children elements inherit the parents color given the 'inherit' keyword.
inherit-002 Inherit on non-inherited properties
  • Inherit can be used on properties which are not normally inherited.
inherit-003 Inherit on the root element
  • If the 'inherit' value is set on the root element, the property is assigned its initial value.
inherit-static-offset-001 = Bitmaps top and left - inherit keyword on element with statically positioned parent
  • When using the 'inherit' reserved keyword value, the property takes the same specified value as the property for the element's parent, even in cases where such property does not apply. This test covers the case where the parent has absolute value lengths for left and top.
inherit-static-offset-002 = Bitmaps top and left - inherit keyword on element with statically positioned parent
  • When using the 'inherit' reserved keyword value, the property takes the same specified value as the property for the element's parent, even in cases where such property does not apply. This test covers the case where the parent has percentage value lengths for left and top. Box offset specified as a percentage refer to the height (for top and bottom) or to the width (for left and right) of its containing block. If an element's position is 'relative', then its containing block is formed by the content edge of the nearest block container ancestor box.
inherit-static-offset-003 = Bitmaps top and left - inherit keyword on element with statically positioned parent
  • When using the 'inherit' reserved keyword value, the property takes the same specified value as the property for the element's parent, even in cases where such property does not apply. This test covers the case where the parent has relative value lengths for left and top.
left-offset-percentage-002 = position absolute - left offset percentage and inherit
  • 'left: inherit' makes the left property take the same computed value as the left property for the element's parent; in the case of a percentage value, the computed value is the specified percentage value. 'left: [percentage]' refers to width of containing block.
margin-em-inherit-001 = Bitmaps inherit applied on margin set with em
  • The 'em' unit is equal to the computed value of the 'font-size' property of the element on which it is used. When inherit keyword is used, the property takes the same computed value - a length value in this testcase - as the property for the element's parent.
margin-percentage-inherit-001 = Bitmaps margin - inherit applied on margin percentage
  • A margin percentage is calculated with respect to the width of the generated box's containing block. When inherit keyword is used, the property takes the same computed value - a percentage value in this testcase - as the property for the element's parent.
padding-em-inherit-001 = Bitmaps inherit applied on padding set with em
  • The 'em' unit is equal to the computed value of the 'font-size' property of the element on which it is used. When inherit keyword is used, the property takes the same computed value - a length value in this testcase - as the property for the element's parent.
padding-percentage-inherit-001 = Bitmaps padding - inherit applied on padding percentage
  • A padding percentage is calculated with respect to the width of the generated box's containing block. When inherit keyword is used, the property takes the same computed value - a percentage value in this testcase - as the property for the element's parent.
position-absolute-percentage-inherit-001 = position absolute - dimensions and position given by offset percentages and inherit
  • Absolutely positioned boxes can be dimensioned and positioned solely by setting offset 'top', 'right', 'bottom' and 'left' property values with percentage unit and then with inherit keyword. 'inherit' on a offset property makes such offset property take the same computed value as the offset property of the nearest positioned ancestor; in the case of a percentage value - like in this testcase - , the computed value is the specified percentage value of such nearest positioned ancestor.
style-attr-cascade-006 = CSS: style attribute and 'inherit'
top-114 = position relative - top offset percentage and inherit
  • 'top: inherit' makes the top property take the same computed value as the top property for the element's parent; in the case of a percentage value, the computed value is the specified percentage value. 'top: [percentage]' refers to height of containing block.
top-offset-percentage-002 = position absolute - top offset percentage and inherit
  • 'top: inherit' makes the top property take the same computed value as the top property for the element's parent; in the case of a percentage value, the computed value is the specified percentage value. 'top: [percentage]' refers to height of containing block.
+ 6.3 The @import rule
at-import-008 Paged @import - media-dependence
  • Media-dependent @import rules
c11-import-000 = Basic Containment
c64-uri-000 = Bitmaps URLs
cascade-012 = @import and !important
cascade-import-001 Cascade: Basic ordering test (with data:)
cascade-import-002 HTTP Cascade: Ordering test with various import techniques
+ 6.4 The cascade
c21-pseu-cls-000 Interact anchor
c21-pseu-id-000 Interact anchor
cascade-001 User Style User style sheets
  • Normal user declarations override the default user agent style sheet.
cascade-002 User Style Author stylesheets override user stylesheets
  • Normal author declarations override normal user stylesheet declarations.
cascade-003 User Style Author rules with !important and a user stylesheet
  • Author rules using !important override user stylesheet rules.
cascade-004 User Style User stylesheet rules using !important and normal author rules
  • User stylesheet rules using !important override normal author rules.
cascade-005 Redefining rules
  • The latter specified rule wins when having the same specificity and weight.
cascade-006 User Style User style sheets and redefining rules
  • The latter specified rule in a style sheet wins when having the same specificity and weight in user styles sheets.
cascade-007 Author rules local and external
  • Author rules in embedded stylesheets override author rules in imported stylesheets.
default-stylesheet-001 Ahem Overriding the user agent default style sheet
  • User agent default style sheet settings can be overridden.
+ 6.4.1 Cascading order
c31-important-000 = important
c32-cascading-000 = Cascading Order
cascade-import-002 HTTP Cascade: Ordering test with various import techniques
cascade-import-003 Cascade: Controlled delays with persistent sheets
cascade-import-004 Cascade: Controlled delays with persistent sheets (reversed)
cascade-import-005 Cascade: Controlled delays with two alternate sets
cascade-import-006 Cascade: Controlled delays with two alternate sets (reversed)
cascade-import-007 Cascade: Controlled delays with two alternate sets (link and meta)
cascade-import-008 Cascade: Controlled delays with two alternate sets (link and meta; reversed)
cascade-import-009 Cascade: Controlled delays with one alternate set
cascade-import-010 Cascade: Controlled delays with one alternate set (reversed)
cascade-import-011 Cascade: Controlled delays with one alternate set (link and meta)
cascade-import-012 Cascade: Controlled delays with one alternate set (link and meta; reversed)
list-style-021 = Bitmaps list-style: none - followed by a list-style-image reset
  • A value of 'none' for the 'list-style' property sets both 'list-style-type' and 'list-style-image' to 'none'. If two declarations have the same weight, origin and specificity, then the latter specified wins.
sort-by-order-001 = Casdading order - sort by order specified
  • If 2 declarations have the same media, the same importance (normal or !important), the same origin (author, user or user agent) and the same specificity, then the latter specified wins.
style-attr-cascade-001 = CSS: style attributes vs. important tag selector
style-attr-cascade-003 = CSS: style attribute vs. tag selector
style-attr-cascade-004 = CSS: style attribute vs. important tag selectors
style-attr-cascade-005 = CSS: style attribute vs. tag selectors (interleaved importance)
style-attr-cascade-006 = CSS: style attribute and 'inherit'
+ 6.4.2 !important rules
c31-important-000 = important
cascade-008 Shorthand properties with !important
  • Shorthand properties with !important apply to all direct sub-properties.
cascade-009 Author rules with !important and other normal author rules
  • Author rules with !important override normal author rules.
cascade-009a = !important author rule in :first-letter pseudo-element
  • Author rules with !important have precedence over normal author rules.
cascade-009b = !important author rule in :first-line pseudo-element
  • Author rules with !important have precedence over normal author rules.
cascade-010 User Style User stylesheet rules with !important and !important author rules
  • User stylesheet rules with !important override !important author rules.
cascade-011 User Style User stylesheet rules with !important and normal user rules
  • User stylesheet rules with !important declarations override user stylesheet rules with normal declarations.
style-attr-cascade-001 = CSS: style attributes vs. important tag selector
style-attr-cascade-002 = CSS: style attribute (normal vs. important)
style-attr-cascade-004 = CSS: style attribute vs. important tag selectors
style-attr-cascade-005 = CSS: style attribute vs. tag selectors (interleaved importance)
+ 6.4.3 Calculating a selector's specificity
c21-pseu-cls-000 Interact anchor
c21-pseu-id-000 Interact anchor
c32-cascading-000 = Cascading Order
specificity-001 Calculating specificity - Specificity 0010 vs. 0001
  • The attribute selector has an higher specificity over the element selector - specificity 0010 takes precedence over 0001.
specificity-002 Calculating specificity - Inline Style
  • Specificity of the inline style trumps all other selectors.
specificity-003 Calculating specificity - Specificity 0100 vs. 0011
  • The ID attribute in a selector has the higher specificity than the combined pseudo-class and element selectors - specificity 0100 takes precedence over 0011.
specificity-004 Calculating specificity - Specificity 0011 vs. 0010
  • The combined pseudo-class and element selectors have a higher specificity than the attribute selector - specificity 0011 takes precedence over 0010.
specificity-005 Calculating specificity - Specificity 0002 vs. 0001
  • An element selector with a pseudo-element selector wins over a pseudo-element selector - specificity 0002 takes precedence over 0001.
specificity-006 Calculating specificity - Pseudo-element vs. simple element
  • The combination of a pseudo-element selector with an element selector takes takes precedence over simple and single element selector - specificity 0002 takes precedence over 0001.
specificity-007 Calculating specificity - Specificity 0001 vs. 0000
  • The element selector has a higher specificity over the universal selector - specificity 0001 takes precedence over 0000.
specificity-008 Calculating specificity - specificity 0012 vs. 0002
  • The combined specificity of an element selector, with a pseudo-class selector and a pseudo-element selector achieves an higher specificity than the combined specificity of an element selector with a pseudo-element selector.
specificity-009 Calculating specificity - specificity 0003 vs. 0002
  • First-line selector with highest specificity wins - specificity 0003 take precedence over 0002.
specificity-011 = Generated Content via Universal Selectors
specificity-012 HistoryInteract Pseudo-class Specificity
specificity-013 = Specificity with universal selector
style-attr-specificity-001 = Style attribute and specificity of selectors
  • The style attribute has a higher specificity than any other selector.
style-attr-specificity-002 = Inline styles vs. 101 ID selectors
  • The style attribute has a higher specificity than all selectors, including ID selectors no matter how many.
+ 6.4.4 Precedence of non-CSS presentational hints
html-attribute-001 Attribute 'align' vs. CSS 'caption-side' specificity
  • Attribute 'align' has a specificity of zero and is overridden by CSS.
html-attribute-002 Interact Attribute 'alink' vs. CSS active specificity
  • Attribute 'alink' has a specificity of zero and is overridden by CSS.
html-attribute-003 Bitmaps Attribute 'background' vs. CSS 'background' specificity
  • Attribute 'background' has a specificity of zero and is overridden by CSS.
html-attribute-004 Attribute 'bgcolor' vs. CSS 'background-color' specificity
  • Attribute 'bgcolor' has a specificity of zero and is overridden by CSS.
html-attribute-005 Attribute 'border' vs. CSS border specificity
  • Attribute 'border' has 0 specificity and is overridden by CSS.
html-attribute-006 Attribute 'cellpadding' vs. CSS 'padding' specificity
  • Attribute 'cellpadding' has a specificity of zero and is overridden by CSS.
html-attribute-007 Attribute 'cellspacing' vs. CSS border-spacing specificity
  • Attribute 'cellspacing' has 0 specificity and is overridden by CSS.
html-attribute-008 Attribute 'clear' vs. CSS 'clear' specificity
  • Attribute 'clear' has a specificity of zero and is overridden by CSS.
html-attribute-009 Attribute 'color' vs. CSS 'color' specificity
  • Attribute 'color' has a specificity of zero and is overridden by CSS.
html-attribute-010 Attribute 'cols' vs CSS 'width' specificity
  • Attribute 'cols' has a specificity of zero and is overridden by CSS.
html-attribute-011 Attribute 'width' vs. CSS 'width' specificity
  • Attribute 'width' has a specificity of zero and is overridden by CSS.
html-attribute-012 Ahem Attribute 'face' vs. CSS 'font-family' specificity
  • Attribute 'face' has a specificity of zero and is overridden by CSS.
html-attribute-013 Attribute 'valign' vs. CSS 'vertical-align' specificity
  • Attribute 'valign' has a specificity of zero and is overridden by CSS.
html-attribute-014 Attribute 'frame' vs. CSS 'border' specificity
  • Attribute 'frame' has a specificity of zero and is overridden by CSS.
html-attribute-015 Attribute 'rules' vs. CSS border specificity
  • Attribute 'rules' has a specificity of zero and is overridden by CSS.
html-attribute-017 Attribute 'height' vs. CSS 'height' specificity
  • Attribute 'height' has a specificity of zero and is overridden by CSS.
html-attribute-018 Bitmaps Attribute 'hspace' vs. CSS 'margin' specificity
  • Attribute 'hspace' has a specificity of zero and is overridden by CSS.
html-attribute-019 Bitmaps Attribute 'vspace' vs. CSS 'margin' specificity
  • Attribute 'vspace' has a specificity of zero and is overridden by CSS.
html-attribute-020 Attribute 'link' vs. CSS ':link' specificity
  • Attribute 'link' has a specificity of zero and is overridden by CSS.
html-attribute-021 Attribute 'marginheight' vs. CSS 'margin' specificity
  • Attribute 'marginheight' has a specificity of zero and is overridden by CSS.
html-attribute-022 Attribute 'marginwidth' vs. CSS 'margin' specificity
  • Attribute 'marginwidth' has a specificity of zero and is overridden by CSS.
html-attribute-023 HTML 'noshade' attribute vs CSS color specificity
  • Attribute 'noshade' has 0 specificity and is overridden by CSS.
html-attribute-024 Attribute 'nowrap' vs. CSS 'white-space' specificity
  • Attribute 'nowrap' has a specificity of zero and is overridden by CSS.
html-attribute-025 Attribute 'rows' vs CSS 'height' specificity
  • Attribute 'rows' has a specificity of zero and is overridden by CSS.
html-attribute-027 Attribute 'size' vs CSS 'height' specificity
  • Attribute 'size' has a specificity of zero and is overridden by CSS.
html-attribute-028 Attribute 'text' vs. CSS 'color' specificity
  • Attribute 'text' has a specificity of zero and is overridden by CSS.
html-attribute-029 HistoryInteract Attribute 'vlink' vs. CSS ':visited' specificity
  • Attribute 'vlink' has a specificity of zero and is overridden by CSS.
html-precedence-001 Element selector precedence
  • The 'color' attribute has a specificity equal to 0 which be overridden by subsequent style sheet rules.