This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
spec:computed-values [2012/01/15 02:22] – computed values shouldn't depend on containing block hierarchy - but they already do in CSS21 aprowse | spec:computed-values [2014/12/09 15:48] (current) – external edit 127.0.0.1 | ||
---|---|---|---|
Line 1: | Line 1: | ||
====== Computed Values Patterns ====== | ====== Computed Values Patterns ====== | ||
+ | |||
+ | Computed Value (the concept in the propdef table) is a UA-internal | ||
+ | representation of a property mainly meant for supporting animations. It’s | ||
+ | necessary for animatable properties to produce interpolable computed | ||
+ | values. Inferred values (such as with various < | ||
+ | single-value border-radius-* values) will likely need to be added to the | ||
+ | computed value to produce an interpolable result. Even if a property is | ||
+ | not animatable, it’s probably useful to design the computed value such | ||
+ | that it could support interpolation. | ||
+ | |||
+ | Serialization (such as the result from getComputedStyle) is a valid CSS | ||
+ | string representation that might only have a tenuous connection to the | ||
+ | computed value representation. Its main characteristic is that it must | ||
+ | ‘round-trip’ with parsing. Inferred values can be omitted here. If a | ||
+ | grammar allows ordering options, the serialized value should prefer an | ||
+ | order (usually what’s presented in the grammar). | ||
+ | |||
+ | Here are some examples using background-position: | ||
+ | |||
+ | Declared value: right 10px | ||
+ | Computed value: (100% - 10px), (50% + 0px) | ||
+ | getComputedValue result: right 10px | ||
+ | | ||
+ | Declared value: bottom 50px top 10% | ||
+ | Computed value: (10% + 0px), (100% - 50px) | ||
+ | getComputedValue result: 10% bottom 50px | ||
+ | | ||
+ | Declared value: center center | ||
+ | Computed value: (50% + 0px), (50% + 0px) | ||
+ | getComputedValue result: center | ||
This page lists a number of design patterns that have been identified for computed values. | This page lists a number of design patterns that have been identified for computed values. | ||
Line 5: | Line 35: | ||
If you're a spec editor, you should check the " | If you're a spec editor, you should check the " | ||
+ | - computed values should depend only on the specified or computed values of properties on the element or its parent | ||
+ | - computed values must never depend on layout | ||
- shorthand properties do not have computed values. For them, simply specify: | - shorthand properties do not have computed values. For them, simply specify: | ||
* Computed value: see individual properties | * Computed value: see individual properties | ||
Line 13: | Line 45: | ||
- properties that just accept keyword or IDREF values, should just specify: | - properties that just accept keyword or IDREF values, should just specify: | ||
* Computed value: as specified | * Computed value: as specified | ||
- | - computed values should never depend on layout | ||
- (disputed) computed values should never depend on containing block hierarchy (though note that they already do in CSS21, eg ' | - (disputed) computed values should never depend on containing block hierarchy (though note that they already do in CSS21, eg ' |