|
+
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.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.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.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.
|