1.1 --- a/css-transitions/Overview.bs Fri May 15 16:49:03 2015 -0700
1.2 +++ b/css-transitions/Overview.bs Fri May 15 17:00:51 2015 -0700
1.3 @@ -29,68 +29,72 @@
1.4 Issue Tracking: Bugzilla bugs for all levels https://www.w3.org/Bugs/Public/buglist.cgi?query_format=advanced&product=CSS&component=Transitions&resolution=---
1.5 Abstract: CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration.
1.6 Status Text: <strong>This document</strong> is expected to be relatively close to last call. While some issues raised have yet to be addressed, new features are extremely unlikely to be considered for this level.
1.7 -Ignored Terms: domstring, float
1.8 +Ignored Terms: float
1.9 </pre>
1.10 <!-- FIXME: font-size and font-weight link defaults don't work -->
1.11 <pre class="link-defaults">
1.12 -spec:css21; type:property; text:top
1.13 -spec:css21; type:property; text:right
1.14 -spec:css21; type:property; text:bottom
1.15 -spec:css21; type:property; text:left
1.16 -spec:css21; type:property; text:margin-top
1.17 -spec:css21; type:property; text:margin-right
1.18 -spec:css21; type:property; text:margin-bottom
1.19 -spec:css21; type:property; text:margin-left
1.20 -spec:css21; type:property; text:padding-top
1.21 -spec:css21; type:property; text:padding-right
1.22 -spec:css21; type:property; text:padding-bottom
1.23 -spec:css21; type:property; text:padding-left
1.24 -spec:css21; type:property; text:border-top-color
1.25 -spec:css21; type:property; text:border-right-color
1.26 -spec:css21; type:property; text:border-bottom-color
1.27 -spec:css21; type:property; text:border-left-color
1.28 -spec:css21; type:property; text:border-top-width
1.29 -spec:css21; type:property; text:border-right-width
1.30 -spec:css21; type:property; text:border-bottom-width
1.31 -spec:css21; type:property; text:border-left-width
1.32 -spec:css21; type:property; text:background-color
1.33 -spec:css21; type:property; text:background-position
1.34 -spec:css21; type:property; text:border-spacing
1.35 -spec:css21; type:property; text:width
1.36 -spec:css21; type:property; text:height
1.37 -spec:css21; type:property; text:min-width
1.38 -spec:css21; type:property; text:min-height
1.39 -spec:css21; type:property; text:max-width
1.40 -spec:css21; type:property; text:max-height
1.41 -spec:css21; type:property; text:clip
1.42 -spec:css21; type:property; text:letter-spacing
1.43 -spec:css21; type:property; text:line-height
1.44 -spec:css21; type:property; text:outline-color
1.45 -spec:css21; type:property; text:outline-width
1.46 -spec:css21; type:property; text:text-indent
1.47 -spec:css21; type:property; text:font-size
1.48 -spec:css21; type:property; text:font-weight
1.49 -spec:css21; type:property; text:vertical-align
1.50 -spec:css21; type:property; text:visibility
1.51 -spec:css21; type:property; text:word-spacing
1.52 -spec:css21; type:property; text:z-index
1.53 -spec:css-color-3; type:property; text:color
1.54 -spec:css-color-3; type:property; text:opacity
1.55 +spec:css21; type:property;
1.56 + text:top
1.57 + text:right
1.58 + text:bottom
1.59 + text:left
1.60 + text:margin-top
1.61 + text:margin-right
1.62 + text:margin-bottom
1.63 + text:margin-left
1.64 + text:padding-top
1.65 + text:padding-right
1.66 + text:padding-bottom
1.67 + text:padding-left
1.68 + text:border-top-color
1.69 + text:border-right-color
1.70 + text:border-bottom-color
1.71 + text:border-left-color
1.72 + text:border-top-width
1.73 + text:border-right-width
1.74 + text:border-bottom-width
1.75 + text:border-left-width
1.76 + text:background-color
1.77 + text:background-position
1.78 + text:border-spacing
1.79 + text:width
1.80 + text:height
1.81 + text:min-width
1.82 + text:min-height
1.83 + text:max-width
1.84 + text:max-height
1.85 + text:clip
1.86 + text:letter-spacing
1.87 + text:line-height
1.88 + text:outline-color
1.89 + text:outline-width
1.90 + text:text-indent
1.91 + text:font-size
1.92 + text:font-weight
1.93 + text:vertical-align
1.94 + text:visibility
1.95 + text:word-spacing
1.96 + text:z-index
1.97 +spec:css-color-3;
1.98 + type:property;
1.99 + text:color
1.100 + text:opacity
1.101 + type:value
1.102 + text:green
1.103 + text:blue
1.104 + text:transparent
1.105 spec:css-values-3; type:type; text:<time>
1.106 -spec:css-color-3; type:value; text:green
1.107 -spec:css-color-3; type:value; text:blue
1.108 -spec:css-color-3; type:value; text:transparent
1.109 </pre>
1.110 <!-- FIXME: These overrides aren't great for dev/TR switching -->
1.111 <pre class="anchors">
1.112 url: http://dev.w3.org/csswg/css-backgrounds-3/#shadow-inset; type: value; for: shadow; text: inset;
1.113 url: http://www.w3.org/TR/CSS21/visufx.html#propdef-visibility; type: value; for: visibility; text: visible;
1.114 -url: http://dev.w3.org/csswg/css-color-3/#transparent; type: value; text: transparent;
1.115 -url: http://dev.w3.org/csswg/css-color-3/#html4; type: value; text: blue;
1.116 -url: http://dev.w3.org/csswg/css-color-3/#html4; type: value; text: green;
1.117 +urlPrefix: http://dev.w3.org/csswg/css-color-3/; type: value;
1.118 + text: transparent
1.119 + text: blue
1.120 + text: green
1.121 url: http://w3c.github.io/dom/#constructing-events; type: dfn; text: event constructor;
1.122 url: https://html.spec.whatwg.org/multipage/infrastructure.html#concept-event-dispatch; type: dfn; text: dispatch;
1.123 -url: https://html.spec.whatwg.org/multipage/infrastructure.html#concept-event-dispatch; type: dfn; text: dispatched;
1.124 </pre>
1.125 </dl>
1.126
1.127 @@ -283,7 +287,7 @@
1.128 The 'transition-duration' property defines the length of time that a transition takes.
1.129 </p>
1.130 <pre class="propdef">
1.131 - Name: <dfn id="transition-duration">transition-duration</dfn>
1.132 + Name: transition-duration
1.133 Value: <<time>>#
1.134 Initial: ''0s''
1.135 Applies to: all elements, ::before and ::after pseudo elements
1.136 @@ -374,7 +378,7 @@
1.137 Bézier Timing Function Control Points
1.138 </p>
1.139 <pre class="propdef">
1.140 - Name: <dfn id="transition-timing-function">transition-timing-function</dfn>
1.141 + Name: transition-timing-function
1.142 Value: <<single-transition-timing-function>>#
1.143 Initial: ''transition-timing-function/ease''
1.144 Applies to: all elements, ::before and ::after pseudo elements
1.145 @@ -391,7 +395,7 @@
1.146 <p>
1.147 The timing functions have the following definitions.
1.148 </p>
1.149 - <dl dfn-type="value" dfn-for="transition-timing-function">
1.150 + <dl dfn-type="value" dfn-for="transition-timing-function, <single-transition-timing-function>">
1.151 <dt><dfn>ease</dfn></dt>
1.152 <dd>
1.153 The ease function is equivalent to <a lt="cubic-bezier()" function>cubic-bezier(0.25, 0.1, 0.25, 1)</a>.
1.154 @@ -450,7 +454,7 @@
1.155 If the value for 'transition-delay' is a negative time offset then the transition will execute the moment the property is changed, but will appear to have begun execution at the specified offset. That is, the transition will appear to begin part-way through its play cycle. In the case where a transition has implied starting values and a negative 'transition-delay', the starting values are taken from the moment the property is changed.
1.156 </p>
1.157 <pre class="propdef">
1.158 - Name: <dfn id="transition-delay">transition-delay</dfn>
1.159 + Name: transition-delay
1.160 Value: <<time>>#
1.161 Initial: ''0s''
1.162 Applies to: all elements, ::before and ::after pseudo elements
1.163 @@ -468,7 +472,7 @@
1.164 The 'transition' shorthand property combines the four properties described above into a single property.
1.165 </p>
1.166 <pre class="propdef">
1.167 - Name: <dfn id="transition">transition</dfn>
1.168 + Name: transition
1.169 Value: <<single-transition>>#
1.170 Initial: see individual properties
1.171 Applies to: all elements, ::before and ::after pseudo elements
1.172 @@ -505,16 +509,16 @@
1.173
1.174 <p>
1.175 Implementations must maintain a set of
1.176 - <dfn lt="running transition">running transitions</dfn>,
1.177 + <dfn export lt="running transition">running transitions</dfn>,
1.178 each of which applies to a specific element and non-shorthand
1.179 property. Each of these transitions also has a
1.180 - <dfn>start time</dfn>, <dfn>end time</dfn>, <dfn>start value</dfn>,
1.181 - <dfn>end value</dfn>, <dfn>reversing-adjusted start value</dfn>,
1.182 - and <dfn>reversing shortening factor</dfn>.
1.183 + <dfn export for="transition">start time</dfn>, <dfn export for="transition">end time</dfn>,
1.184 + <dfn export for="transition">start value</dfn>, <dfn export for="transition">end value</dfn>,
1.185 + <dfn export for="transition">reversing-adjusted start value</dfn>, and <dfn export for="transition">reversing shortening factor</dfn>.
1.186 Transitions are added to this set as described in this section,
1.187 and are removed from this set
1.188 when they <a>complete</a>
1.189 - or when implementations are required to <dfn>cancel</dfn> them.
1.190 + or when implementations are required to <dfn export for="transition">cancel</dfn> them.
1.191 <span class="note">
1.192 For the rationale behind the <a>reversing-adjusted start value</a>
1.193 and <a>reversing shortening factor</a>, see [[#reversing]].
1.194 @@ -523,7 +527,7 @@
1.195
1.196 <p>
1.197 Implementations must also maintain a set of
1.198 - <dfn lt="completed transition">completed transitions</dfn>,
1.199 + <dfn export lt="completed transition">completed transitions</dfn>,
1.200 each of which
1.201 (like <a>running transitions</a>)
1.202 applies to a specific element and non-shorthand property.
1.203 @@ -601,7 +605,7 @@
1.204 (or at least it must be undetectable that it was done at a
1.205 different time).
1.206 This processing of a set of simultaneous style changes is called a
1.207 - <dfn>style change event</dfn>.
1.208 + <dfn export>style change event</dfn>.
1.209 (Implementations typically have a <a>style change event</a> to
1.210 correspond with their desired screen refresh rate,
1.211 and when up-to-date computed style or layout information is needed
1.212 @@ -629,7 +633,7 @@
1.213 then transitions are not started for that element
1.214 in that style change event.
1.215 Otherwise,
1.216 - define the <dfn>before-change style</dfn> as
1.217 + define the <dfn export>before-change style</dfn> as
1.218 the <a>computed values</a> of all properties on the element as of
1.219 the previous <a>style change event</a>,
1.220 except with any styles derived from declarative
1.221 @@ -637,7 +641,7 @@
1.222 ([[CSS3-ANIMATIONS]]),
1.223 and SMIL Animations ([[SMIL-ANIMATION]], [[SVG11]])
1.224 updated to the current time.
1.225 - Likewise, define the <dfn>after-change style</dfn> as
1.226 + Likewise, define the <dfn export>after-change style</dfn> as
1.227 the <a>computed values</a> of all properties
1.228 on the element based on the information
1.229 known at the start of that <a>style change event</a>,
1.230 @@ -681,20 +685,20 @@
1.231 For each element with a <a>before-change style</a> and
1.232 an <a>after-change style</a>,
1.233 and each property (other than shorthands),
1.234 - define the <dfn>matching transition-property value</dfn> as
1.235 + define the <dfn export>matching transition-property value</dfn> as
1.236 the last value in the
1.237 'transition-property' in the element's <a>after-change style</a>
1.238 that matches the property,
1.239 as described in
1.240 [[#transition-property-property]].
1.241 If there is such a value, then corresponding to it, there is
1.242 - a <dfn>matching transition duration</dfn>,
1.243 - a <dfn>matching transition delay</dfn>, and
1.244 - a <dfn>matching transition timing function</dfn>
1.245 + a <dfn export>matching transition duration</dfn>,
1.246 + a <dfn export>matching transition delay</dfn>, and
1.247 + a <dfn export>matching transition timing function</dfn>
1.248 in the values in the <a>after-change style</a> of
1.249 'transition-duration', 'transition-delay', and 'transition-timing-function'
1.250 (see <a href="#list-matching">the rules on matching lists</a>).
1.251 - Define the <dfn>combined duration</dfn> of the transition
1.252 + Define the <dfn export for="transition">combined duration</dfn> of the transition
1.253 as the sum of max(<a>matching transition duration</a>, ''0s'') and
1.254 the <a>matching transition delay</a>.
1.255 For each element and property, the implementation must act
1.256 @@ -1050,7 +1054,7 @@
1.257 When a property on an element is undergoing a transition
1.258 (that is, when or after the transition has started and before the
1.259 <a>end time</a> of the transition)
1.260 - the transition adds a style called the <dfn>current value</dfn>
1.261 + the transition adds a style called the <dfn export>current value</dfn>
1.262 to the CSS cascade
1.263 at the level defined for CSS Transitions in [[!CSS3CASCADE]].
1.264 </p>
1.265 @@ -1108,7 +1112,7 @@
1.266
1.267 <p>
1.268 <a>Running transitions</a>
1.269 - <dfn id="dfn-complete">complete</dfn>
1.270 + <dfn export for="transition" id="dfn-complete">complete</dfn>
1.271 at a time that equal to or after their end time,
1.272 but prior to to the first <a>style change event</a>
1.273 whose time is equal to or after their <a>end time</a>.
