This shows you the differences between two versions of the page.
| Both sides previous revisionPrevious revisionNext revision | Previous revisionLast revisionBoth sides next 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/01/14 15:33] – add astearn' tabatkins | ||
|---|---|---|---|
| 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 ' | ||