diff --git a/web-animations-1/Overview.bs b/web-animations-1/Overview.bs index 66b0354819c..1806a7362bc 100644 --- a/web-animations-1/Overview.bs +++ b/web-animations-1/Overview.bs @@ -3297,13 +3297,50 @@ If the keyframe-specific composite operation for a keyframe is not set, the composite operation specified for the keyframe effect as a whole is used for values specified in that keyframe. +### Computing property values ### {#computing-property-values} + +
+To compute a property value given a property property, +a value value, and an {{Element}} element: +resolve value according to the "Computed Value" line of the +property's definition table, using the computed values of +element as the context for resolving dependencies, and return the +result. + + Note: The computed values on element are not affected by + this algorithm. + +This algorithm implies that property values specified in keyframes can +establish order dependencies. +When [=compute a property value|computing a property value=], the +computed values of dependencies held by value must be +calculated first. + +
+
+var animation = elem.animate([{ fontSize: '10px', width: '10em' },
+                              { fontSize: '20px', width: '20em' }], 1000);
+animation.currentTime = 500;
+console.log(getComputedStyle(elem).fontSize); // Should be 15px
+console.log(getComputedStyle(elem).width); // Should be 225px
+
+In this example, in order to compute a property value for +10em, we must know the computed value of +'font-size' on the target element, which in turn is determined +by the effect value for 'font-size', which in turn requires that we +compute property values for 'font-size'. +Hence, computing property values are subject to ordering constraints. +
+ +
+ ### Calculating computed keyframes ### {#calculating-computed-keyframes} Before calculating the effect value of a keyframe effect, -the property values specified on its keyframes are resolved to -computed values, and the offset to use for any keyframes with a null -keyframe offset is computed. The result of resolving these values is -a set of computed keyframes. +the property values on its keyframes are +computed, and the offset to use for any +keyframes with a null keyframe offset is computed. The result of +resolving these values is a set of computed keyframes. The calculated keyframe offsets of a set of keyframe that includes suitable values for each null keyframe offset are referred @@ -3367,24 +3404,25 @@ an effect target for which computed property values can be calculated. 1. Add a new empty keyframe, computed keyframe, to computed keyframes. - 1. For each property specified in keyframe, calculate the - computed value specified on keyframe using the effect - target as the context for computing values and add the - corresponding property and computed value to computed - keyframe. - For shorthand properties, add the equivalent longhand properties. - For logical properties [[!CSS-LOGICAL-1]], add the [=equivalent physical - properties=] [[!CSS-WRITING-MODES-4]] based on the computed value of - 'writing-mode' and/or 'direction' for the effect target. + 1. For each property specified in keyframe: + - Compute a property value using the value specified on + keyframe as the value, and the target element as + the element; then add the property and resulting value to + computed keyframe. + - For shorthand properties, add the equivalent longhand properties. + - For logical properties [[!CSS-LOGICAL-1]], add the [=equivalent physical + properties=] [[!CSS-WRITING-MODES-4]] based on the computed value of + 'writing-mode' and/or 'direction' for the effect target. For example, if keyframe has a value of ‘12pt’ - for the 'border-width' property, the user agent may produce a computed - value of ‘16px’ for each of the longhand properties: + for the 'border-width' property, the user agent may + compute a property value + of ‘16px’ for each of the longhand properties: 'border-bottom-width', 'border-left-width', 'border-right-width', and 'border-top-width'. As a result, computed keyframe would not have a value for the 'border-width' property, but would instead include - each of the longhand properties, and each with the computed value, + each of the longhand properties, and each with the value ‘16px’. If conflicts arise when expanding shorthand properties or replacing @@ -3568,6 +3606,20 @@ Note: this procedure permits overlapping keyframes. or equal to 1 is the value of the first keyframe or the last keyframe in keyframes respectively. +
+ Note that computed keyframes are "live": + user-agents must behave as if they are recreated every time the + effect value is calculated. + + For example, if there is an ongoing transition on the 'font-size' property + from 10px to 20px, a property value specified as + 1em in a keyframe would during + keyframe computation + resolve against the computed value in the range + [10px, 20px] produced by the transition on + 'font-size'. +
+
In the presence of certain timing functions, the input iteration progress to an animation effect is not limited to the range [0, 1].