Differences

This shows you the differences between two versions of the page.

--- 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/01/14 15:33] – add astearn' tabatkins
@@ Line 1: / Line 1: @@
 ====== 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 <position> variants, or
+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.