This shows you the differences between two versions of the page.
| Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
| spec:computed-values [2012/09/13 13:04] – Make the "no layout" bit more strict. Add rule about what elements you can compute from. Rearrange the list. tabatkins | 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. | ||