[SCM] WebKit Debian packaging branch, debian/experimental, updated. upstream/1.3.3-9427-gc2be6fc
simon.fraser at apple.com
simon.fraser at apple.com
Wed Dec 22 12:42:47 UTC 2010
The following commit has been merged in the debian/experimental branch:
commit 945fad38d8e766d4e56eb5eb520eb651e5bc7da3
Author: simon.fraser at apple.com <simon.fraser at apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Date: Fri Aug 27 17:50:26 2010 +0000
Remove obsolete CSS proposals, adding links to the most recent ones. Add nodes to the HTML media proposals indicating that they are stagnant or have been superseded.
git-svn-id: http://svn.webkit.org/repository/webkit/trunk@66236 268f45cc-cd09-0410-ab3c-d52691b4dbfc
diff --git a/WebKitSite/specs/CSSVisualEffects/css3-2d-transforms/Makefile b/WebKitSite/specs/CSSVisualEffects/css3-2d-transforms/Makefile
deleted file mode 100644
index f26d0fb..0000000
--- a/WebKitSite/specs/CSSVisualEffects/css3-2d-transforms/Makefile
+++ /dev/null
@@ -1,39 +0,0 @@
-# Calling the post-processor with file-upload. Assumes the username
-# and password are in ~/.curl-w3.org
-#
-# Possible other options:
-# -F date=YYYY-MM-DD
-# -F ids=on
-
-%.html: %.src.html
- @echo "Calling post-processor to generate $@..."
- @curl -F file=@$< -F group=CSS -F output=html -F method=file -s -K ~/.curl-w3.org http://cgi.w3.org/member-bin/process.cgi >$@
-%.err: %.src.html
- @echo "Calling post-processor to check $<..."
- @curl -F file=@$< -F group=CSS -F output=err -F method=file -s -K ~/.curl-w3.org http://cgi.w3.org/member-bin/process.cgi >$@
-
-
-
-all: check Overview.html
- @echo Done.
-
-check: Overview.err
- @cat $<
- @grep -q '^No errors$$' $< # Force a non-zero exit code if errors
-
-
-
-# A handy shortcut:
-
-commit: update clean all
- cvs commit -m 'Generated. Do not edit!' Overview.html
-
-update:
- cvs update
-
-clean:
- rm Overview.html
-
-
-
-.PHONY: check commit update clean
diff --git a/WebKitSite/specs/CSSVisualEffects/css3-2d-transforms/Overview.err b/WebKitSite/specs/CSSVisualEffects/css3-2d-transforms/Overview.err
deleted file mode 100644
index 4269126..0000000
--- a/WebKitSite/specs/CSSVisualEffects/css3-2d-transforms/Overview.err
+++ /dev/null
@@ -1 +0,0 @@
-No errors
diff --git a/WebKitSite/specs/CSSVisualEffects/css3-2d-transforms/Overview.html b/WebKitSite/specs/CSSVisualEffects/css3-2d-transforms/Overview.html
deleted file mode 100644
index b1779c7..0000000
--- a/WebKitSite/specs/CSSVisualEffects/css3-2d-transforms/Overview.html
+++ /dev/null
@@ -1,1487 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
-"http://www.w3.org/TR/html4/strict.dtd">
-
-<html lang=en>
- <head>
- <title>CSS 2D Transforms Module Level 3</title>
- <meta content="text/html;charset=UTF-8" http-equiv=Content-type>
- <link href=default.css rel=stylesheet type="text/css">
-
- <style type="text/css">
- .rhs { white-space: pre-wrap; }
- code { font-size: inherit; }
- #box-shadow-samples td { background: white; color: black; }
- </style>
- <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
- type="text/css">
-
- <body>
- <div class=head> <!--begin-logo-->
- <p><a href="http://www.w3.org/"><img alt=W3C height=48
- src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
-
- <h1>CSS 2D Transforms Module Level 3</h1>
-
- <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 6 July 2009</h2>
-
- <dl>
- <dt>This version:
-
- <dd> <a
- href="http://www.w3.org/TR/2009/ED-css3-2d-transforms-20090706">http://dev.w3.org/csswg/css3-2d-transforms/</a>
- <!--http://www.w3.org/TR/2009/WD-css3-2d-transforms-20090706-->
-
- <dt>Latest version:
-
- <dd><a
- href="http://www.w3.org/TR/css3-2d-transforms">http://www.w3.org/TR/css3-2d-transforms</a>
-
-
- <dt>Previous version:
-
- <dd><a href="http://www.w3.org/TR/2009/WD-css3-2d-transforms-20090320/">
- http://www.w3.org/TR/2009/WD-css3-2d-transforms-20090320/</a>
-
- <dt id=editors-list>Editors:
-
- <dd><a href="mailto:dino at apple.com">Dean Jackson</a> (<a
- href="http://www.apple.com/">Apple Inc</a>)
-
- <dd><a href="mailto:hyatt at apple.com">David Hyatt</a> (<a
- href="http://www.apple.com/">Apple Inc</a>)
-
- <dd><a href="mailto:cmarrin at apple.com">Chris Marrin</a> (<a
- href="http://www.apple.com/">Apple Inc</a>)
- </dl>
- <!--begin-copyright-->
- <p class=copyright><a
- href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
- rel=license>Copyright</a> © 2009 <a
- href="http://www.w3.org/"><acronym title="World Wide Web
- Consortium">W3C</acronym></a><sup>®</sup> (<a
- href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute
- of Technology">MIT</acronym></a>, <a
- href="http://www.ercim.org/"><acronym title="European Research Consortium
- for Informatics and Mathematics">ERCIM</acronym></a>, <a
- href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
- href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
- <a
- href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
- and <a
- href="http://www.w3.org/Consortium/Legal/copyright-documents">document
- use</a> rules apply.</p>
- <!--end-copyright-->
- <hr title="Separator for header">
- </div>
-
- <h2 class="no-num no-toc" id=abstract>Abstract</h2>
-
- <p>CSS 2D Transforms allows elements rendered by CSS to be transformed in
- two-dimensional space.
-
- <h2 class="no-num no-toc" id=status>Status of this document</h2>
- <!--begin-status-->
-
- <p>This is a public copy of the editors' draft. It is provided for
- discussion only and may change at any moment. Its publication here does
- not imply endorsement of its contents by W3C. Don't cite this document
- other than as work in progress.
-
- <p>The (<a
- href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
- mailing list <a href="mailto:www-style at w3.org">www-style at w3.org</a> (see
- <a href="http://www.w3.org/Mail/Request">instructions</a>) is preferred
- for discussion of this specification. When sending e-mail, please put the
- text “css3-2d-transforms” in the subject, preferably like
- this: “[<!---->css3-2d-transforms<!---->] <em>…summary of
- comment…</em>”
-
- <p>This document was produced by the <a href="/Style/CSS/members">CSS
- Working Group</a> (part of the <a href="/Style/">Style Activity</a>).
-
- <p>This document was produced by a group operating under the <a
- href="/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent
- Policy</a>. W3C maintains a <a href="/2004/01/pp-impl/32061/status"
- rel=disclosure>public list of any patent disclosures</a> made in
- connection with the deliverables of the group; that page also includes
- instructions for disclosing a patent. An individual who has actual
- knowledge of a patent which the individual believes contains <a
- href="/Consortium/Patent-Policy-20040205/#def-essential">Essential
- Claim(s)</a> must disclose the information in accordance with <a
- href="/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the
- W3C Patent Policy</a>.</p>
- <!--end-status-->
-
- <h2 class="no-num no-toc" id=contents>Table of contents</h2>
- <!--begin-toc-->
-
- <ul class=toc>
- <li><a href="#introduction"><span class=secno>1 </span>Introduction</a>
-
- <li><a href="#transform-property"><span class=secno>2 </span> The <span
- class=prop-name>‘<code
- class=property>transform</code>’</span> Property </a>
-
- <li><a href="#transform-origin-property"><span class=secno>3 </span> The
- <span class=prop-name>‘<code
- class=property>transform-origin</code>’</span> Property </a>
-
- <li><a href="#transform-functions"><span class=secno>4 </span> The
- Transformation Functions </a>
-
- <li><a href="#transform-values"><span class=secno>5 </span> Transform
- Values and Lists </a>
-
- <li><a href="#animation"><span class=secno>6 </span> Transitions and
- animations between transform values </a>
-
- <li><a href="#matrix-decomposition"><span class=secno>7 </span> Matrix
- decomposition for animation </a>
-
- <li><a href="#dom-interfaces"><span class=secno>8 </span> DOM Interfaces
- </a>
- <ul class=toc>
- <li><a href="#point-interface"><span class=secno>8.1 </span> Point </a>
-
- <li><a href="#window-interface"><span class=secno>8.2 </span> Window
- </a>
-
- <li><a href="#cssmatrix-interface"><span class=secno>8.3 </span>
- CSSMatrix </a>
-
- <li><a href="#csstransformvalue-interface"><span class=secno>8.4 </span>
- CSSTransformValue </a>
- </ul>
-
- <li><a href="#references"><span class=secno>9 </span>References</a>
- <ul class=toc>
- <li class=no-num><a href="#normative-references">Normative
- references</a>
-
- <li class=no-num><a href="#other-references">Other references</a>
- </ul>
-
- <li class=no-num><a href="#property-index">Property index</a>
-
- <li class=no-num><a href="#index">Index</a>
- </ul>
- <!--end-toc-->
-
- <h2 id=introduction><span class=secno>1 </span>Introduction</h2>
-
- <p><em>This section is not normative.</em>
-
- <p> The CSS <a href="http://www.w3.org/TR/REC-CSS2/visuren.html">visual
- formatting model</a> describes a coordinate system within which each
- element is positioned. Positions and sizes in this coordinate space can be
- thought of as being expressed in pixels, starting in the upper left corner
- of the parent with positive values proceeding to the right and down.
-
- <p> This coordinate space can be modified with the <span
- class=prop-name>‘<code class=property><a
- href="#effects">transform</a></code>’</span> property. Using
- transform, elements can be translated, rotated and scaled in two
- dimensional space. The coordinate space behaves as described in the <a
- href="http://www.w3.org/TR/SVG/coords.html#EstablishingANewUserSpace">coordinate
- system transformations</a> section of the SVG 1.1 specification. This is a
- coordinate system with two axes: the X axis increases horizontally to the
- right; the Y axis increases vertically downwards.
-
- <p> Specifying a value other than ‘<code
- class=property>none</code>’ for the <span
- class=prop-name>‘<code class=property><a
- href="#effects">transform</a></code>’</span> property establishes a
- new <em>local coordinate system</em> at the element that it is applied to.
- Transformations are cumulative. That is, elements establish their local
- coordinate system within the coordinate system of their parent. In this
- way, a <span class=prop-name>‘<code class=property><a
- href="#effects">transform</a></code>’</span> property effectively
- accumulates all the <span class=prop-name>‘<code class=property><a
- href="#effects">transform</a></code>’</span> properties of its
- ancestors. The accumulation of these transforms defines a <em>current
- transformation matrix (CTM)</em> for the element.
-
- <p> The transform property does not affect the flow of the content
- surrounding the transformed element. However, the value of the overflow
- area takes into account transformed elements. This behavior is similar to
- what happens when elements are translated via relative positioning.
- Therefore, if the value of the <span class=prop-name>‘<code
- class=property>overflow</code>’</span> property is <span
- class=prop-value>‘<code class=property>scroll</code>’</span>
- or <span class=prop-value>‘<code
- class=property>auto</code>’</span>, scrollbars will appear as needed
- to see content that is transformed outside the visible area.
-
- <p> Any value other than ‘<code class=property>none</code>’ for
- the transform results in the creation of both a stacking context and a
- containing block. The object acts as though position: relative has been
- specified, but also acts as a containing block for fixed positioned
- descendants.
-
- <div class=todo> Need to go into more detail here about why fixed
- positioned objects should do this, i.e., that it's much harder to
- implement otherwise.</div>
-
- <div class=issue> There are two roles for transformations in layout: (1)
- transformations that adjust the position of the affected content without
- changing the normal layout of that content (much like relative
- positioning) and (2) transformation of the content prior to layout that
- affects the layout of that content. See <a
- href="http://lists.w3.org/Archives/Public/www-style/2007Oct/0209">
- http://lists.w3.org/Archives/Public/www-style/2007Oct/0209</a> for
- examples of both cases. The "transform" property (as defined in this
- document) is equally useful for both roles. This document is focused on
- satisfying the first role. There is, however, an architectural question
- that arises because there needs to be a way to distinguish which role an
- author of a stylesheet wants. The key question is which is the default
- behavior/role for the "transform" property and how is the other
- behavior/role indicated by a stylesheet author. One possibility is to use
- the position property, particularly position: relative, to trigger the
- first role; another possibility is to make the first role the default
- which leaves the question as to how to indicate the second role. If you
- have an opinion on this topic, please send feedback.</div>
-
- <div class=issue> What do fixed backgrounds do in transforms? They should
- probably ignore the transform completely, since - even transformed - the
- object should be acting as "porthole" through which the fixed background
- can be viewed in its original form.</div>
-
- <div class=issue> This property should also be applicable to SVG elements.</div>
-
- <div class=issue> We also need to specify that SVG transforms *do* combine
- with this transform, e.g., if a <foreignObject> is inside
- transformed SVG and then defines a transform of its own. This means we may
- potentially have to examine the current SVG transform and combine with it
- to set the correct transform.</div>
- <!-- ======================================================================================================= -->
-
- <h2 id=transform-property><span class=secno>2 </span> The <span
- class=prop-name>‘<code class=property><a
- href="#effects">transform</a></code>’</span> Property</h2>
-
- <p> A two-dimensional transformation is applied to an element through the
- <span class=prop-name>‘<code class=property><a
- href="#effects">transform</a></code>’</span> property. This property
- contains a list of <a href="#transform-functions">transform functions</a>.
- The final transformation value for an element is obtained by performing a
- matrix concatenation of each entry in the list. The set of transform
- functions is similar to those allowed by SVG.
-
- <table class=propdef>
- <tbody>
- <tr>
- <td> <em>Name:</em>
-
- <td> <dfn id=effects>transform</dfn>
-
- <tr>
- <td> <em>Value:</em>
-
- <td> none | <transform-function> [ <transform-function> ]*
-
- <tr>
- <td> <em>Initial:</em>
-
- <td> none
-
- <tr>
- <td> <em>Applies to:</em>
-
- <td> block-level and inline-level elements
-
- <tr>
- <td> <em>Inherited:</em>
-
- <td> no
-
- <tr>
- <td> <em>Percentages:</em>
-
- <td> refer to the size of the element's box
-
- <tr>
- <td> <em>Media:</em>
-
- <td> visual
-
- <tr>
- <td> <em>Computed value:</em>
-
- <td> Same as specified value.
- </table>
- <!-- ======================================================================================================= -->
-
- <h2 id=transform-origin-property><span class=secno>3 </span> The <span
- class=prop-name>‘<code class=property><a
- href="#transform-origin">transform-origin</a></code>’</span>
- Property</h2>
-
- <p> The <span class=prop-name>‘<code class=property><a
- href="#transform-origin">transform-origin</a></code>’</span>
- property establishes the origin of transformation for an element. This
- property is applied by first translating the element by the negated value
- of the property, then applying the element's transform, then translating
- by the property value. This effectively moves the desired transformation
- origin of the element to (0,0) in the local coordinate system, then
- applies the element's transform, then moves the element back to its
- original position.
-
- <table class=propdef>
- <tbody>
- <tr>
- <td> <em>Name:</em>
-
- <td> <dfn id=transform-origin>transform-origin</dfn>
-
- <tr>
- <td> <em>Value:</em>
-
- <td> [ [ <percentage> | <length> | left | center | right ] [
- <percentage> | <length> | top | center | bottom ]? ] | [ [
- left | center | right ] || [ top | center | bottom ] ]
-
- <tr>
- <td> <em>Initial:</em>
-
- <td> 50% 50%
-
- <tr>
- <td> <em>Applies to:</em>
-
- <td> block-level and inline-level elements
-
- <tr>
- <td> <em>Inherited:</em>
-
- <td> no
-
- <tr>
- <td> <em>Percentages:</em>
-
- <td> refer to the size of the element's box
-
- <tr>
- <td> <em>Media:</em>
-
- <td> visual
-
- <tr>
- <td> <em>Computed value:</em>
-
- <td> For <length> the absolute value, otherwise a percentage
- </table>
- <!-- ======================================================================================================= -->
-
- <h2 id=transform-functions><span class=secno>4 </span> The Transformation
- Functions</h2>
-
- <p> The value of the <a class=prop-name href="#effects">transform</a>
- property is a list of <transform-functions>, applied in the order
- provided. The individual transform functions are separated by whitespace.
- The following is a list of allowed transform functions. In this list the
- type <translation-value> is defined as a <length> or
- <percentage> value, and the <angle> type is defined by <a
- href="http://www.w3.org/TR/css3-values/">CSS Values and Units.</a>
-
- <dl>
- <dt> <span class=prop-value>none</span>
-
- <dd> specifies an identity transform.
-
- <dt> <span class=prop-value>matrix(<number>, <number>,
- <number>, <number>, <number>, <number>) </span>
-
- <dd> specifies a 2D transformation in the form of a <a
- href="http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined">transformation
- matrix</a> of six values. <span
- class=prop-value>matrix(a,b,c,d,e,f)</span> is equivalent to applying the
- transformation matrix <strong>[a b c d e f]</strong>.
-
- <dt> <span class=prop-value>translate(<translation-value>[,
- <translation-value>])</span>
-
- <dd> specifies a <a
- href="http://www.w3.org/TR/SVG/coords.html#TranslationDefined">2D
- translation</a> by the vector [tx, ty], where tx is the first
- translation-value parameter and ty is the optional second
- translation-value parameter. If <em><ty></em> is not provided, ty
- has zero as a value.
-
- <dt> <span class=prop-value>translateX(<translation-value>)</span>
-
- <dd> specifies a <a
- href="http://www.w3.org/TR/SVG/coords.html#TranslationDefined">translation</a>
- by the given amount in the X direction.
-
- <dt> <span class=prop-value>translateY(<translation-value>)</span>
-
- <dd> specifies a <a
- href="http://www.w3.org/TR/SVG/coords.html#TranslationDefined">translation</a>
- by the given amount in the Y direction.
-
- <dt> <span class=prop-value>scale(<number>[, <number>])</span>
-
-
- <dd> specifies a <a
- href="http://www.w3.org/TR/SVG/coords.html#ScalingDefined">2D scale</a>
- operation by the [sx,sy] scaling vector described by the 2 parameters. If
- the second parameter is not provided, it is takes a value equal to the
- first.
-
- <dt> <span class=prop-value>scaleX(<number>)</span>
-
- <dd> specifies a scale operation using the [sx,1] scaling vector, where sx
- is given as the parameter.
-
- <dt> <span class=prop-value>scaleY(<number>)</span>
-
- <dd> specifies a scale operation using the [1,sy] scaling vector, where sy
- is given as the parameter.
-
- <dt> <span class=prop-value>rotate(<angle>)</span>
-
- <dd> specifies a <a
- href="http://www.w3.org/TR/SVG/coords.html#RotationDefined">2D
- rotation</a> by the angle specified in the parameter about the origin of
- the element, as defined by the <em><a
- href="#transform-origin">transform-origin</a></em> property.
-
- <dt> <span class=prop-value>skewX(<angle>)</span>
-
- <dd> specifies a <a
- href="http://www.w3.org/TR/SVG/coords.html#SkewXDefined">skew
- transformation along the X axis</a> by the given angle.
-
- <dt> <span class=prop-value>skewY(<angle>)</span>
-
- <dd> specifies a <a
- href="http://www.w3.org/TR/SVG/coords.html#SkewYDefined">skew
- transformation along the Y axis</a> by the given angle.
-
- <dt> <span class=prop-value>skew(<angle> [, <angle>])</span>
-
- <dd> specifies a <a
- href="http://www.w3.org/TR/SVG/coords.html#SkewXDefined">skew
- transformation along the X and Y axes</a>. The first angle parameter
- specifies the skew on the X axis. The second angle parameter specifies
- the skew on the Y axis. If the second parameter is not given then a value
- of 0 is used for the Y angle (ie. no skew on the Y axis).
- </dl>
-
- <h2 id=transform-values><span class=secno>5 </span> Transform Values and
- Lists</h2>
-
- <p> The <translation-value> values are defined as [<percentage>
- | <length>]. All other value types are described <a
- href="http://www.w3.org/TR/REC-CSS2/syndata.html#values">as CSS types</a>.
- If a list of transforms is provided, then the net effect is as if each
- transform had been specified separately in the order provided. For
- example,
-
- <pre>
- <div style="transform:translate(-10px,-20px) scale(2) rotate(45deg) translate(5px,10px)"/>
- </pre>
-
- <p> is functionally equivalent to:
-
- <pre>
- <div style="transform:translate(-10px,-20px)">
- <div style="transform:scale(2)">
- <div style="transform:rotate(45deg)">
- <div style="transform:translate(5px,10px)">
- </div>
- </div>
- </div>
- </div>
- </pre>
-
- <div class=example>
- <pre>
- div {
- transform: translate(100px, 100px);
- }
- </pre>
- Move the element by 100 pixels in both the X and Y directions.
- <div class=figure> <img alt="The 100px translation in X and Y"
- src=transform1.png></div>
- </div>
-
- <div class=example>
- <pre>
- div {
- height: 100px; width: 100px;
- transform: translate(80px, 80px) scale(1.5, 1.5) rotate(45deg);
- }
- </pre>
- Move the element by 80 pixels in both the X and Y directions, then scale
- the element by 150%, then rotate it 45 degrees clockwise about the Z axis.
- Note that the scale and rotate operate about the center of the element,
- since the element has the default transform-origin of 50% 50%.
- <div class=figure> <img alt="The transform specified above"
- src="compound_transform.png"></div>
- </div>
- <!-- ======================================================================================================= -->
-
- <h2 id=animation><span class=secno>6 </span> Transitions and animations
- between transform values</h2>
-
- <p> When animating or transitioning the value of a transform property the
- rules described below are applied. The ‘<code
- class=property>from</code>’ transform is the transform at the start
- of the transition or current keyframe. The ‘<code
- class=property>end</code>’ transform is the transform at the end of
- the transition or current keyframe.
-
- <ul>
- <li> If the ‘<code class=property>from</code>’ and
- ‘<code class=property>to</code>’ transforms are both single
- functions of the same type:
- <ul>
- <li> For translate, translateX, translateY, translateZ, scale, scaleX,
- scaleY, rotate, skewX and skewY functions:
- <ul>
- <li> the individual components of the function are interpolated
- numerically.
- </ul>
-
- <li> For matrix:
- <ul>
- <li> the matrix is decomposed using the technique described in "Matrix
- decomposition for animation" below into separate translation, scale,
- rotation, skew, and perspective components, then each decomposed
- component is interpolated numerically, and finally combined in order
- to produce a resulting 3x2 matrix.
- </ul>
- </ul>
-
- <li> If both the ‘<code class=property>from</code>’ and
- ‘<code class=property>to</code>’ transforms are "none":
- <ul>
- <li> There is no interpolation necessary
- </ul>
-
- <li> If one of the ‘<code class=property>from</code>’ or
- ‘<code class=property>to</code>’ transforms is "none":
- <ul>
- <li> The ‘<code class=property>none</code>’ is replaced by
- an equivalent identity function list for the corresponding transform
- function list.
- <p> For example, if the ‘<code class=property>from</code>’
- transform is "scale(2)" and the ‘<code
- class=property>to</code>’ transform is "none" then the value
- "scale(1)" will be used as the ‘<code
- class=property>to</code>’ value, and animation will proceed
- using the rule above. Similarly, if the ‘<code
- class=property>from</code>’ transform is "none" and the
- ‘<code class=property>to</code>’ transform is "scale(2)
- rotate(50deg)" then the animation will execute as if the ‘<code
- class=property>from</code>’ value is "scale(1) rotate(0)".</p>
-
- <p> The identity functions are translate(0), translateX(0),
- translateY(0), scale(1), scaleX(1), scaleY(1), rotate(0), rotateX(0),
- rotateY(0), skewX(0), skewY(0), and matrix(1, 0, 0, 1, 0, 0).</p>
- </ul>
-
- <li> If both the ‘<code class=property>from</code>’ and
- ‘<code class=property>to</code>’ transforms have the same
- number of transform functions and corresponding functions in each
- transform list are of the same type:
- <ul>
- <li> Each transform function is animated with its corresponding
- destination function in isolation using the rules described above. The
- individual values are then applied as a list to produce resulting
- transform value.
- </ul>
-
- <li> Otherwise:
- <ul>
- <li> The transform function lists are each converted into the equivalent
- matrix value and animation proceeds using the rule for a single
- function above.
- </ul>
- </ul>
-
- <h2 id=matrix-decomposition><span class=secno>7 </span> Matrix
- decomposition for animation</h2>
-
- <p> When interpolating between 2 matrices, each is decomposed into the
- corresponding translation, rotation, scale, skew, and perspective values.
- Not all matrices can be accurately described by these values. Those that
- can't are decomposed into the most accurate representation possible, using
- the technique below. This technique is taken from The "unmatrix" method in
- "Graphics Gems II, edited by Jim Arvo". The pseudocode below works on a
- 4x4 homogeneous matrix. A 3x2 2D matrix is therefore first converted to
- 4x4 homogeneous form.
-
- <pre>
- Input: matrix ; a 4x4 matrix
- Output: translation ; a 3 component vector
- rotation ; euler angles, represented as a 3 component vector
- scale ; a 3 component vector
- skew ; skew factors XY,XZ,YZ represented as a 3 component vector
- perspective ; a 4 component vector
- Returns false if the matrix cannot be decomposed, true if it can
-
- Supporting functions (point is a 3 component vector, matrix is a 4x4 matrix):
- float determinant(matrix) returns the 4x4 determinant of the matrix
- matrix inverse(matrix) returns the inverse of the passed matrix
- matrix transpose(matrix) returns the transpose of the passed matrix
- point multVecMatrix(point, matrix) multiplies the passed point by the passed matrix
- and returns the transformed point
- float length(point) returns the length of the passed vector
- point normalize(point) normalizes the length of the passed point to 1
- float dot(point, point) returns the dot product of the passed points
- float cos(float) returns the cosine of the passed angle in radians
- float asin(float) returns the arcsine in radians of the passed value
- float atan2(float y, float x) returns the principal value of the arc tangent of
- y/x, using the signs of both arguments to determine
- the quadrant of the return value
-
- Decomposition also makes use of the following function:
- point combine(point a, point b, float ascl, float bscl)
- result[0] = (ascl * a[0]) + (bscl * b[0])
- result[1] = (ascl * a[1]) + (bscl * b[1])
- result[2] = (ascl * a[2]) + (bscl * b[2])
- return result
-
-
- // Normalize the matrix.
- if (matrix[3][3] == 0)
- return false
-
- for (i = 0; i < 4; i++)
- for (j = 0; j < 4; j++)
- matrix[i][j] /= matrix[3][3]
-
- // perspectiveMatrix is used to solve for perspective, but it also provides
- // an easy way to test for singularity of the upper 3x3 component.
- perspectiveMatrix = matrix
-
- for (i = 0; i < 3; i++)
- perspectiveMatrix[i][3] = 0
-
- perspectiveMatrix[3][3] = 1
-
- if (determinant(perspectiveMatrix) == 0)
- return false
-
- // First, isolate perspective.
- if (matrix[0][3] != 0 || matrix[1][3] != 0 || matrix[2][3] != 0)
- // rightHandSide is the right hand side of the equation.
- rightHandSide[0] = matrix[0][3];
- rightHandSide[1] = matrix[1][3];
- rightHandSide[2] = matrix[2][3];
- rightHandSide[3] = matrix[3][3];
-
- // Solve the equation by inverting perspectiveMatrix and multiplying
- // rightHandSide by the inverse.
- inversePerspectiveMatrix = inverse(perspectiveMatrix)
- transposedInversePerspectiveMatrix = transposeMatrix4(inversePerspectiveMatrix)
- perspective = multVecMatrix(rightHandSide, transposedInversePerspectiveMatrix)
-
- // Clear the perspective partition
- matrix[0][3] = matrix[1][3] = matrix[2][3] = 0
- matrix[3][3] = 1
- else
- // No perspective.
- perspective[0] = perspective[1] = perspective[2] = 0
- perspective[3] = 1
-
- // Next take care of translation
- translate[0] = matrix[3][0]
- matrix[3][0] = 0
- translate[1] = matrix[3][1]
- matrix[3][1] = 0
- translate[2] = matrix[3][2]
- matrix[3][2] = 0
-
- // Now get scale and shear. 'row' is a 3 element array of 3 component vectors
- for (i = 0; i < 3; i++)
- row[i][0] = matrix[i][0]
- row[i][1] = matrix[i][1]
- row[i][2] = matrix[i][2]
-
- // Compute X scale factor and normalize first row.
- scale[0] = length(row[0])
- row[0] = normalize(row[0])
-
- // Compute XY shear factor and make 2nd row orthogonal to 1st.
- skew[0] = dot(row[0], row[1])
- row[1] = combine(row[1], row[0], 1.0, -skew[0])
-
- // Now, compute Y scale and normalize 2nd row.
- scale[1] = length(row[1])
- row[1] = normalize(row[1])
- skew[0] /= scale[1];
-
- // Compute XZ and YZ shears, orthogonalize 3rd row
- skew[1] = dot(row[0], row[2])
- row[2] = combine(row[2], row[0], 1.0, -skew[1])
- skew[2] = dot(row[1], row[2])
- row[2] = combine(row[2], row[1], 1.0, -skew[2])
-
- // Next, get Z scale and normalize 3rd row.
- scale[2] = length(row[2])
- row[2] = normalize(row[2])
- skew[1] /= scale[2]
- skew[2] /= scale[2]
-
- // At this point, the matrix (in rows) is orthonormal.
- // Check for a coordinate system flip. If the determinant
- // is -1, then negate the matrix and the scaling factors.
- pdum3 = cross(row[1], row[2])
- if (dot(row[0], pdum3) < 0)
- for (i = 0; i < 3; i++) {
- scale[0] *= -1;
- row[i][0] *= -1
- row[i][1] *= -1
- row[i][2] *= -1
-
- // Now, get the rotations ou
- rotate[1] = asin(-row[0][2]);
- if (cos(rotate[1]) != 0)
- rotate[0] = atan2(row[1][2], row[2][2]);
- rotate[2] = atan2(row[0][1], row[0][0]);
- else
- rotate[0] = atan2(-row[2][0], row[1][1]);
- rotate[2] = 0;
-
- return true;
- </pre>
-
- <p> Each component of each returned value is linearly interpolated with the
- corresponding component of the other matrix. The resulting components are
- then recomposed into a final matrix as though combining the following
- transform functions:
-
- <pre>
- matrix3d(1,0,0,0, 0,1,0,0, 0,0,1,0, perspective[0], perspective[1], perspective[2], perspective[3])
- translate3d(translation[0], translation[1], translation[2])
- rotateX(rotation[0]) rotateY(rotation[1]) rotateZ(rotation[2])
- matrix3d(1,0,0,0, 0,1,0,0, 0,skew[2],1,0, 0,0,0,1)
- matrix3d(1,0,0,0, 0,1,0,0, skew[1],0,1,0, 0,0,0,1)
- matrix3d(1,0,0,0, skew[0],1,0,0, 0,0,1,0, 0,0,0,1)
- scale3d(scale[0], scale[1], scale[2])
- </pre>
-
- <h2 id=dom-interfaces><span class=secno>8 </span> DOM Interfaces</h2>
-
- <p> This section describes the interfaces and functionality added to the
- DOM to support runtime access to the functionality described above.
-
- <h3 id=point-interface><span class=secno>8.1 </span> Point</h3>
-
- <dl>
- <dt> <b>Interface <i><a id=DOM-Point name=DOM-Point>Point</a></i></b>
-
- <dd>
- <p> The <code>Point</code> interface represents a point in
- two-dimensional space.</p>
-
- <dl>
- <dt> <b>IDL Definition</b>
-
- <dd>
- <div class=idl-code>
- <pre>
- interface Point {
- attribute float x;
- attribute float y;
- };</pre>
- </div>
- </dd>
- <!-- IDL -->
-
- <dt> <b>Attributes</b>
-
- <dd>
- <dl>
- <dt> <code class=attribute-name><a id=DOM-Point-x
- name=DOM-Point-x>x</a></code> of type <code>float</code>
-
- <dd> The value of the point along the X dimension.
-
- <dt> <code class=attribute-name><a id=DOM-Point-y
- name=DOM-Point-y>y</a></code> of type <code>float</code>
-
- <dd> The value of the point along the Y dimension.
- </dl>
- </dd>
- <!-- Attributes -->
- </dl>
- </dd>
- <!-- interface Point -->
- </dl>
- <!-- ====================================================================== -->
-
- <h3 id=window-interface><span class=secno>8.2 </span> Window</h3>
-
- <dl>
- <dt> <b>Interface <i><a id=DOM-Window name=DOM-Window>Window</a></i></b>
-
- <dd>
- <p> The following 2 functions are added to the <code>Window</code>
- interface. They provide conversions between the page and node coordinate
- spaces.</p>
-
- <dl>
- <dt> <b>IDL Definition</b>
-
- <dd>
- <div class=idl-code>
- <pre>
- interface Window {
- ...
- Point convertPointFromPageToNode(in Node node, in Point point);
- Point convertPointFromNodeToPage(in Node node, in Point point);
- ...
- };</pre>
- </div>
- </dd>
- <!-- IDL -->
-
- <dt> <b>Methods</b>
-
- <dd>
- <dl><!-- ============================================================ -->
-
- <dt> <code class=method-name><a
- id=DOM-Window-convertPointFromPageToNode
- name=DOM-Window-convertPointFromPageToNode>convertPointFromPageToNode</a></code>
-
-
- <dd>
- <div class=method> The <code>convertPointFromPageToNode</code> method
- returns a point in the coordinate space of the passed Node that is
- at the same location in the page as the passed point, which is in
- the coordinate space of the page.
- <div class=parameters> <b>Parameters</b>
- <div class=paramtable>
- <dl>
- <dt> <code class=parameter-name>node</code> of type
- <code>Node</code>
-
- <dd> The Node which defines the desired coordinate space of the
- returned point.<br>
-
- <dt> <code class=parameter-name>point</code> of type
- <code>Point</code>
-
- <dd> The point, in the page's coordinate space, for which the
- desired point, in the Node's coordinate space, should be
- returned.<br>
- </dl>
- </div>
- </div>
- <!-- parameters -->
- <div class=return-value> <b>Return Value</b></div>
-
- <div class=returnvalue>
- <dl>
- <dt> <code>Point</code>
-
- <dd> The resultant point in the coordinate space of the passed
- Node.<br>
- </dl>
- </div>
- </div>
-
- <div> <b>No Exceptions</b></div>
- </dd>
- <!-- convertPointFromPageToNode -->
- <!-- ============================================================ -->
-
- <dt> <code class=method-name><a
- id=DOM-Window-convertPointFromNodeToPage
- name=DOM-Window-convertPointFromNodeToPage>convertPointFromNodeToPage</a></code>
-
-
- <dd>
- <div class=method> The <code>convertPointFromNodeToPage</code> method
- returns a point in the coordinate space of the page that is at the
- same location in the page as the passed point, which is in the
- coordinate space of the passed Node.
- <div class=parameters> <b>Parameters</b>
- <div class=paramtable>
- <dl>
- <dt> <code class=parameter-name>node</code> of type
- <code>Node</code>
-
- <dd> The Node which defines the coordinate space of the passed
- point.<br>
-
- <dt> <code class=parameter-name>point</code> of type
- <code>Point</code>
-
- <dd> The point, in the Node's coordinate space, for which the
- desired point, in the page's coordinate space, should be
- returned.<br>
- </dl>
- </div>
- </div>
- <!-- parameters -->
- <div class=return-value> <b>Return Value</b></div>
-
- <div class=returnvalue>
- <dl>
- <dt> <code>Point</code>
-
- <dd> The resultant point in the coordinate space of the page.<br>
- </dl>
- </div>
- </div>
-
- <div> <b>No Exceptions</b></div>
- </dd>
- <!-- convertPointFromNodeToPage -->
- </dl>
- </dd>
- <!-- Methods -->
- </dl>
- </dd>
- <!-- Interface Window -->
- </dl>
- <!-- ============================================================ -->
-
- <h3 id=cssmatrix-interface><span class=secno>8.3 </span> CSSMatrix</h3>
-
- <dl>
- <dt> <b>Interface <i><a id=DOM-CSSMatrix
- name=DOM-CSSMatrix>CSSMatrix</a></i></b>
-
- <dd>
- <p> The <code>CSSMatrix</code> interface represents a 4x4 homogeneous
- matrix.</p>
-
- <dl>
- <dt> <b>IDL Definition</b>
-
- <dd>
- <div class=idl-code>
- <pre>
- interface CSSMatrix {
- attribute float a;
- attribute float b;
- attribute float c;
- attribute float d;
- attribute float e;
- attribute float f;
-
- void setMatrixValue(in DOMString string) raises(DOMException);
- CSSMatrix multiply(in CSSMatrix secondMatrix);
- CSSMatrix inverse() raises(DOMException);
- CSSMatrix translate(in float x, in float y);
- CSSMatrix scale(in float scaleX, in float scaleY);
- CSSMatrix rotate(in float angle);
- };</pre>
- </div>
- <br>
- </dd>
- <!-- IDL -->
-
- <dt> <b>Attributes</b>
-
- <dd>
- <dl>
- <dt> <code class=attribute-name><a id=DOM-CSSMatrix-matrix
- name=DOM-CSSMatrix-matrix>a-f</a></code> of type <code>float</code>
-
- <dd> Each of these attributes represents one of the values in the 3x2
- matrix.<br>
- </dl>
- </dd>
- <!-- Attributes -->
-
- <dt> <b>Methods</b>
-
- <dd>
- <dl><!-- ===================================================== -->
-
- <dt> <code class=method-name><a id=DOM-CSSMatrix-setMatrixValue
- name=DOM-CSSMatrix-setMatrixValue>setMatrixValue</a></code>
-
- <dd>
- <div class=method> The <code>setMatrixValue</code> method replaces
- the existing matrix with one computed from parsing the passed string
- as though it had been assigned to the transform property in a CSS
- style rule.
- <div class=parameters> <b>Parameters</b>
- <div class=paramtable>
- <dl>
- <dt> <code class=parameter-name>string</code> of type
- <code>DOMString</code>
-
- <dd> The string to parse.<br>
- </dl>
- </div>
- </div>
- <!-- parameters -->
- <div class=return-value> <b>No Return Value</b></div>
-
- <div> <b>Exceptions</b>
- <div class=returnvalue>
- <dl>
- <dt> <code>SYNTAX_ERR</code>
-
- <dd> Thrown when the provided string can not be parsed into a
- CSSMatrix.
- </dl>
- </div>
- </div>
- </div>
- </dd>
- <!-- setMatrixValue -->
- <!-- ===================================================== -->
-
- <dt> <code class=method-name><a id=DOM-CSSMatrix-multiply
- name=DOM-CSSMatrix-multiply>multiply</a></code>
-
- <dd>
- <div class=method> The <code>multiply</code> method returns a new
- CSSMatrix which is the result of this matrix multiplied by the
- passed matrix, with the passed matrix to the right. This matrix is
- not modified.
- <div class=parameters> <b>Parameters</b>
- <div class=paramtable>
- <dl>
- <dt> <code class=parameter-name>secondMatrix</code> of type
- <code>CSSMatrix</code>
-
- <dd> The matrix to multipy.<br>
- </dl>
- </div>
- </div>
- <!-- parameters -->
- <div class=return-value> <b>Return Value</b>
- <div class=returnvalue>
- <dl>
- <dt> <code>CSSMatrix</code>
-
- <dd> The result matrix.<br>
- </dl>
- </div>
- </div>
-
- <div> <b>No Exceptions</b></div>
- </div>
- </dd>
- <!-- multiply() -->
- <!-- ===================================================== -->
-
- <dt> <code class=method-name><a id=DOM-CSSMatrix-inverse
- name=DOM-CSSMatrix-inverse>inverse</a></code>
-
- <dd>
- <div class=method> The <code>inverse</code> method returns a new
- matrix which is the inverse of this matrix. This matrix is not
- modified.
- <div class=parameters> <b>No Parameters</b></div>
- <!-- parameters -->
- <div class=return-value> <b>Return Value</b>
- <div class=returnvalue>
- <dl>
- <dt> <code>CSSMatrix</code>
-
- <dd> The inverted matrix.<br>
- </dl>
- </div>
- </div>
-
- <div> <b>Exceptions</b>
- <div class=returnvalue>
- <dl>
- <dt> <code>NOT_SUPPORTED_ERROR</code>
-
- <dd> Thrown when the CSSMatrix can not be inverted.
- </dl>
- </div>
- </div>
- </div>
- <!-- ======================================================================================================= -->
- </dd>
- <!-- inverse() -->
- <!-- ===================================================== -->
-
- <dt> <code class=method-name><a id=DOM-CSSMatrix-translate
- name=DOM-CSSMatrix-translate>translate</a></code>
-
- <dd>
- <div class=method> The <code>translate</code> method returns a new
- matrix which is this matrix post multiplied by a translation matrix
- containing the passed values. This matrix is not modified.
- <div class=parameters> <b>Parameters</b>
- <div class=paramtable>
- <dl>
- <dt> <code class=parameter-name>x</code> of type
- <code>float</code>
-
- <dd> The X component of the translation value.<br>
-
- <dt> <code class=parameter-name>y</code> of type
- <code>float</code>
-
- <dd> The Y component of the translation value.<br>
- </dl>
- </div>
- </div>
- <!-- parameters -->
- <div class=return-value> <b>Return Value</b>
- <div class=returnvalue>
- <dl>
- <dt> <code>CSSMatrix</code>
-
- <dd> The result matrix.<br>
- </dl>
- </div>
- </div>
-
- <div> <b>No Exceptions</b></div>
- </div>
- <!-- ===================================================================================== -->
- </dd>
- <!-- translate() -->
- <!-- ===================================================== -->
-
- <dt> <code class=method-name><a id=DOM-CSSMatrix-scale
- name=DOM-CSSMatrix-scale>scale</a></code>
-
- <dd>
- <div class=method> The <code>scale</code> method returns a new matrix
- which is this matrix post multiplied by a scale matrix containing
- the passed values. If the z component is undefined, a 1 value is
- used in its place. If the y component is undefined, the x component
- value is used in its place. This matrix is not modified.
- <div class=parameters> <b>Parameters</b>
- <div class=paramtable>
- <dl>
- <dt> <code class=parameter-name>scaleX</code> of type
- <code>float</code>
-
- <dd> The X component of the scale value.<br>
-
- <dt> <code class=parameter-name>scaleY</code> of type
- <code>float</code>
-
- <dd> The (optional) Y component of the scale value.<br>
- </dl>
- </div>
- </div>
- <!-- parameters -->
- <div class=return-value> <b>Return Value</b>
- <div class=returnvalue>
- <dl>
- <dt> <code>CSSMatrix</code>
-
- <dd> The result matrix.<br>
- </dl>
- </div>
- </div>
-
- <div> <b>No Exceptions</b></div>
- </div>
- <!-- ========================================================================================-->
- </dd>
- <!-- scale() -->
- <!-- ===================================================== -->
-
- <dt> <code class=method-name><a id=DOM-CSSMatrix-rotate
- name=DOM-CSSMatrix-rotate>rotate</a></code>
-
- <dd>
- <div class=method> The <code>rotate</code> method returns a new
- matrix which is this matrix post multiplied by a rotation matrix.
- The rotation value is in degrees. This matrix is not modified.
- <div class=parameters> <b>Parameters</b>
- <div class=paramtable>
- <dl>
- <dt> <code class=parameter-name>angle</code> of type
- <code>float</code>
-
- <dd> The angle of rotation.<br>
- </dl>
- </div>
- </div>
- <!-- parameters -->
- <div class=return-value> <b>Return Value</b>
- <div class=returnvalue>
- <dl>
- <dt> <code>CSSMatrix</code>
-
- <dd> The result matrix.<br>
- </dl>
- </div>
- </div>
-
- <div> <b>No Exceptions</b></div>
- </div>
- <!-- ====================================================================================== -->
- </dd>
- <!-- rotate() -->
- </dl>
- <!-- methods -->
- </dl>
- </dd>
- <!-- Interface CSSMatrix -->
- </dl>
- <!-- ============================================================ -->
-
- <h3 id=csstransformvalue-interface><span class=secno>8.4 </span>
- CSSTransformValue</h3>
-
- <dl>
- <dt> <b>Interface <i><a id=DOM-CSSTransformValue
- name=DOM-CSSTransformValue>CSSTransformValue</a></i></b>
-
- <dd>
- <p> The <code>CSSTransformValue</code> interface represents one transform
- function in the transform property. The <code>operationType</code>
- defines which operation is represented. The object also contains a list
- of values, which are the parameters of the function, in the same order
- in which they appear in the transform functions.</p>
-
- <dl>
- <dt> <b>IDL Definition</b>
-
- <dd>
- <div class=idl-code>
- <pre>
- interface CSSTransformValue : CSSValueList {
-
- // 2D OperationTypes
- const unsigned short CSS_TRANSLATE = 1;
- const unsigned short CSS_TRANSLATEX = 2;
- const unsigned short CSS_TRANSLATEY = 3;
- const unsigned short CSS_ROTATE = 4;
- const unsigned short CSS_SCALE = 5;
- const unsigned short CSS_SCALEX = 6;
- const unsigned short CSS_SCALEY = 7;
- const unsigned short CSS_SKEW = 8;
- const unsigned short CSS_SKEWX = 9;
- const unsigned short CSS_SKEWY = 10;
- const unsigned short CSS_MATRIX = 11;
-
- attribute unsigned short operationType;
-
- CSSMatrix getCSSMatrix() raises(DOMException);
- };
- </pre>
- </div>
- </dd>
- <!-- IDL -->
-
- <dt> <b>Attributes</b>
-
- <dd>
- <dl>
- <dt> <code class=attribute-name><a
- id=DOM-CSSTransformValue-operationType
- name=DOM-CSSTransformValue-operationType>operationType</a></code> of
- type <code>unsigned short</code>
-
- <dd> One of the listed operation types.<br>
- </dl>
- </dd>
- <!-- Attributes -->
-
- <dt> <b>Methods</b>
-
- <dd>
- <dl><!-- ===================================================== -->
-
- <dt> <code class=method-name><a id=DOM-CSSTransformValue-getCSSMatrix
- name=DOM-CSSTransformValue-getCSSMatrix>getCSSMatrix</a></code>
-
- <dd>
- <div class=method> The <code>getCSSMatrix</code> method returns a
- CSSMatrix object representing this transform.
- <div class=parameters> <b>No Parameters</b></div>
- <!-- parameters -->
- <div class=return-value> <b>Return Value</b>
- <div class=returnvalue>
- <dl>
- <dt> <code>CSSMatrix</code>
-
- <dd> The result matrix.
- </dl>
- </div>
- </div>
-
- <div> <b>Exceptions</b>
- <div class=returnvalue>
- <dl>
- <dt> <code>NOT_SUPPORTED_ERROR</code>
-
- <dd> Thrown when the CSSTranformValue can not be converted into a
- CSSMatrix, such as when the CSSTransformValue contains
- percentage units and is being called on an object with unknown
- dimensions.
- </dl>
- </div>
- </div>
- </div>
- </dd>
- <!-- setMatrixValue -->
- </dl>
- </dd>
- <!-- methods -->
- </dl>
- </dd>
- <!-- Interface CSSTransformValue -->
- </dl>
-
- <p> In addition to the interfaces listed above, the
- <code>getComputedStyle</code> method of the <code>Window</code> object has
- been updated. The <code><a href="#effects">transform</a></code> property
- of the style object returned by <code>getComputedStyle</code> contains a
- single CSSTransformValue with a type of CSS_MATRIX. The 6 parameters
- represent the 3x2 matrix that is the result of applying the individual
- functions listed in the <code><a href="#effects">transform</a></code>
- property.</p>
- <!--
-<p class=issue>Editor's Note: This list needs to be updated (or
-dropped).
-
-<p>This specification is the product of the W3C Working Group on
-Cascading Style Sheets and Formatting Properties. In addition to the
-editor of this specification, the members of the Working Group
-are:
-<ul>
- <li>Marc Attinasi (Netscape/AOL)
- <li>Bert Bos (W3C)
- <li>Tantek Çelik (Microsoft Corp.)
- <li>Don Day (IBM)
- <li>Martin Dürst (W3C)
- <li>Angel Diaz (IBM)
- <li>Daniel Glazman (Netscape/AOL from nov. 2000, and Electricité de France
- until feb. 2000)
- <li>Håkon W. Lie (Opera Software from April 1999, and W3C until April
- 1999)
- <li>Chris Lilley (W3C)
- <li>Dave Raggett (W3C/Openwave Systems Inc.)
- <li>Pierre Saslawsky (Netscape/AOL)
- <li>Michel Suignard (Microsoft Corp.)
- <li>Ted Wugofski (Openwave Systems Inc.)
- <li>Steve Zilles (Adobe)
-</ul>
-
-<p>A number of invited experts to the Working Group have significantly
-contributed to CSS 3 : David. L Baron, Todd Fahrner, Daniel Glazman,
-Ian Hickson, Eric Meyer (The OPAL Group), Jeff Veen.
-
-<p>Former members of the Working Group:
-<ul>
- <li>Chris Brichford (Adobe)
- <li>Troy Chevalier (Netscape/AOL)
- <li>Dwayne Dicks (Softquad)
- <li>Ian Jacobs (W3C)
- <li>Lorin Jurow (Quark)
- <li>Sho Kuwamoto (Macromedia)
- <li>Peter Linss (Netscape/AOL)
- <li>Steven Pemberton (W3C/CWI)
- <li>Robert Pernett (Lotus)
- <li>Douglas Rand (SGI)
- <li>Nisheeth Ranjan (Netscape/AOL)
- <li>Ed Tecot (Microsoft Corp.)
- <li>Jared Sorensen (Novell)
- <li>Robert Stevahn (Hewlett-Packard)
- <li>Mike Wexler (Adobe)
- <li>John Williams (Quark)
- <li>Chris Wilson (Microsoft Corp.)
-</ul>
--->
-
- <h2 id=references><span class=secno>9 </span>References</h2>
-
- <h3 class=no-num id=normative-references>Normative references</h3>
- <!--begin-normative-->
- <!-- Sorted by label -->
-
- <dl class=bibliography>
- <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
- <!---->
- </dl>
- <!--end-normative-->
-
- <h3 class=no-num id=other-references>Other references</h3>
- <!--begin-informative-->
- <!-- Sorted by label -->
-
- <dl class=bibliography>
- <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
- <!---->
- </dl>
- <!--end-informative-->
-
- <h2 class=no-num id=property-index>Property index</h2>
- <!--begin-properties-->
-
- <table class=proptable>
- <thead>
- <tr>
- <th>Property
-
- <th>Values
-
- <th>Initial
-
- <th>Applies to
-
- <th>Inh.
-
- <th>Percentages
-
- <th>Media
-
- <tbody>
- <tr valign=baseline>
- <td><a class=property href="#effects">transform</a>
-
- <td>none | <transform-function> [ <transform-function> ]*
-
- <td>none
-
- <td>block-level and inline-level elements
-
- <td>no
-
- <td>refer to the size of the element's box
-
- <td>visual
-
- <tr valign=baseline>
- <td><a class=property href="#transform-origin">transform-origin</a>
-
- <td>[ [ <percentage> | <length> | left | center | right ] [
- <percentage> | <length> | top | center | bottom ]? ] | [ [
- left | center | right ] || [ top | center | bottom ] ]
-
- <td>50% 50%
-
- <td>block-level and inline-level elements
-
- <td>no
-
- <td>refer to the size of the element's box
-
- <td>visual
- </table>
- <!--end-properties-->
-
- <h2 class=no-num id=index>Index</h2>
- <!--begin-index-->
-
- <ul class=indexlist>
- <li>transform, <a href="#effects" title=transform><strong>2</strong></a>
-
- <li>transform-origin, <a href="#transform-origin"
- title=transform-origin><strong>3</strong></a>
- </ul>
- <!--end-index-->
-</html>
-<!-- Keep this comment at the end of the file
-Local variables:
-mode: sgml
-sgml-default-doctype-name:"html"
-sgml-minimize-attributes:t
-End:
--->
diff --git a/WebKitSite/specs/CSSVisualEffects/css3-2d-transforms/Overview.src.html b/WebKitSite/specs/CSSVisualEffects/css3-2d-transforms/Overview.src.html
deleted file mode 100644
index ffb03de..0000000
--- a/WebKitSite/specs/CSSVisualEffects/css3-2d-transforms/Overview.src.html
+++ /dev/null
@@ -1,1468 +0,0 @@
-<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01//EN'
- 'http://www.w3.org/TR/html4/strict.dtd'>
-
-<html lang="en">
-<head>
- <title>CSS 2D Transforms Module Level 3</title>
- <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
- <link rel="stylesheet" type="text/css" href="default.css">
- <style type="text/css">
- .rhs { white-space: pre-wrap; }
- code { font-size: inherit; }
- #box-shadow-samples td { background: white; color: black; }
- </style>
- <link rel="stylesheet" type="text/css"
- href="http://www.w3.org/StyleSheets/TR/W3C-WD.css">
-</head>
-
-<body>
-
-<div class="head">
-<!--logo-->
-
-<h1>CSS 2D Transforms Module Level 3</h1>
-
-<h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2>
-<dl>
- <dt>This version:
- <dd>
- <a href="[VERSION]">http://dev.w3.org/csswg/css3-2d-transforms/</a>
- <!--http://www.w3.org/TR/[YEAR]/WD-[SHORTNAME]-[CDATE]-->
- <dt>Latest version:
- <dd><a
- href="http://www.w3.org/TR/css3-2d-transforms">[LATEST]</a>
- <dt>Previous version:
- <dd><a href="http://www.w3.org/TR/2009/WD-css3-2d-transforms-20090320/">
- http://www.w3.org/TR/2009/WD-css3-2d-transforms-20090320/</a>
- <dt id="editors-list">Editors:
- <dd><a href="mailto:dino at apple.com">Dean Jackson</a> (<a
- href="http://www.apple.com/">Apple Inc</a>)
- <dd><a href="mailto:hyatt at apple.com">David Hyatt</a> (<a
- href="http://www.apple.com/">Apple Inc</a>)
- <dd><a href="mailto:cmarrin at apple.com">Chris Marrin</a> (<a
- href="http://www.apple.com/">Apple Inc</a>)
-</dl>
-
-<!--copyright-->
-
-<hr title="Separator for header">
-</div>
-
-<h2 class="no-num no-toc" id="abstract">Abstract</h2>
-
-<p>CSS 2D Transforms allows elements rendered by CSS to be transformed
- in two-dimensional space.
-
-<h2 class="no-num no-toc" id="status">Status of this document</h2>
-<!--status-->
-
-
-<h2 class="no-num no-toc" id="contents">Table of contents</h2>
-<!--toc-->
-
-
-<h2>Introduction</h2>
-
-<p><em>This section is not normative.</em>
-
-
- <p>
- The CSS <a href="http://www.w3.org/TR/REC-CSS2/visuren.html">visual
- formatting model</a> describes a coordinate system within which each
- element is positioned. Positions and sizes in this coordinate space can
- be thought of as being expressed in pixels, starting in the upper left
- corner of the parent with positive values proceeding to the right and
- down.
- </p>
- <p>
- This coordinate space can be modified with the <span
- class="prop-name">'transform'</span> property. Using transform, elements
- can be translated, rotated and scaled in two dimensional space.
- The coordinate space
- behaves as described in the <a
- href="http://www.w3.org/TR/SVG/coords.html#EstablishingANewUserSpace">coordinate
- system transformations</a> section of the SVG 1.1 specification. This is
- a coordinate system with two axes: the X axis increases horizontally to
- the right; the Y axis increases vertically downwards.
- </p>
- <p>
- Specifying a value other than 'none' for the <span
- class="prop-name">'transform'</span> property establishes a new
- <em>local coordinate system</em> at the element that it is applied to.
- Transformations are cumulative. That is, elements establish their local
- coordinate system within the coordinate system of their parent. In this
- way, a <span class="prop-name">'transform'</span> property effectively
- accumulates all the <span class="prop-name">'transform'</span>
- properties of its ancestors. The accumulation of these transforms
- defines a <em>current transformation matrix (CTM)</em> for the element.
- </p>
- <p>
- The transform property does not affect the flow of the content
- surrounding the transformed element. However, the value of the overflow
- area takes into account transformed elements. This behavior is similar
- to what happens when elements are translated via relative positioning.
- Therefore, if the value of the <span class="prop-name">'overflow'</span>
- property is <span class="prop-value">'scroll'</span> or <span
- class="prop-value">'auto'</span>, scrollbars will appear as needed to
- see content that is transformed outside the visible area.
- </p>
- <p>
- Any value other than 'none' for the transform results in the creation of
- both a stacking context and a containing block. The object acts as
- though position: relative has been specified, but also acts as a
- containing block for fixed positioned descendants.
- </p>
- <div class="todo">
- Need to go into more detail here about why fixed positioned objects
- should do this, i.e., that it's much harder to implement otherwise.
- </div>
- <div class="issue">
- There are two roles for transformations in layout: (1) transformations
- that adjust the position of the affected content without changing the
- normal layout of that content (much like relative positioning) and (2)
- transformation of the content prior to layout that affects the layout
- of that content. See <a href="http://lists.w3.org/Archives/Public/www-style/2007Oct/0209">
- http://lists.w3.org/Archives/Public/www-style/2007Oct/0209</a>
- for examples of both cases. The "transform" property (as defined in
- this document) is equally useful for both roles. This document is
- focused on satisfying the first role. There is, however, an
- architectural question that arises because there needs to be a way to
- distinguish which role an author of a stylesheet wants. The key
- question is which is the default behavior/role for the "transform"
- property and how is the other behavior/role indicated by a stylesheet
- author. One possibility is to use the position property, particularly
- position: relative, to trigger the first role; another possibility is
- to make the first role the default which leaves the question as to how
- to indicate the second role. If you have an opinion on this topic,
- please send feedback.
- </div>
- <div class="issue">
- What do fixed backgrounds do in transforms? They should probably ignore
- the transform completely, since - even transformed - the object should
- be acting as "porthole" through which the fixed background can be viewed
- in its original form.
- </div>
- <div class="issue">
- This property should also be applicable to SVG elements.
- </div>
- <div class="issue">
- We also need to specify that SVG transforms *do* combine with this
- transform, e.g., if a <foreignObject> is inside transformed SVG
- and then defines a transform of its own. This means we may potentially
- have to examine the current SVG transform and combine with it to set the
- correct transform.
- </div><!-- ======================================================================================================= -->
- <h2 id="transform-property">
- The <span class="prop-name">'transform'</span> Property
- </h2>
- <p>
- A two-dimensional transformation is applied to an element through the <span
- class="prop-name">'transform'</span> property. This property contains a
- list of <a href="#transform-functions">transform functions</a>. The
- final transformation value for an element is obtained by performing a
- matrix concatenation of each entry in the list. The set of transform
- functions is similar to those allowed by SVG.
- </p>
- <table class="propdef">
- <tbody>
- <tr>
- <td>
- <em>Name:</em>
- </td>
- <td>
- <dfn id="effects">transform</dfn>
- </td>
- </tr>
- <tr>
- <td>
- <em>Value:</em>
- </td>
- <td>
- none | <transform-function> [ <transform-function> ]*
- </td>
- </tr>
- <tr>
- <td>
- <em>Initial:</em>
- </td>
- <td>
- none
- </td>
- </tr>
- <tr>
- <td>
- <em>Applies to:</em>
- </td>
- <td>
- block-level and inline-level elements
- </td>
- </tr>
- <tr>
- <td>
- <em>Inherited:</em>
- </td>
- <td>
- no
- </td>
- </tr>
- <tr>
- <td>
- <em>Percentages:</em>
- </td>
- <td>
- refer to the size of the element's box
- </td>
- </tr>
- <tr>
- <td>
- <em>Media:</em>
- </td>
- <td>
- visual
- </td>
- </tr>
- <tr>
- <td>
- <em>Computed value:</em>
- </td>
- <td>
- Same as specified value.
- </td>
- </tr>
- </tbody>
- </table><!-- ======================================================================================================= -->
- <h2 id="transform-origin-property">
- The <span class="prop-name">'transform-origin'</span> Property
- </h2>
- <p>
- The <span class="prop-name">'transform-origin'</span> property
- establishes the origin of transformation for an element. This property
- is applied by first translating the element by the negated value of the
- property, then applying the element's transform, then translating by the
- property value. This effectively moves the desired transformation origin
- of the element to (0,0) in the local coordinate system, then applies
- the element's transform, then moves the element back to its original
- position.
- </p>
- <table class="propdef">
- <tbody>
- <tr>
- <td>
- <em>Name:</em>
- </td>
- <td>
- <dfn id="transform-origin">transform-origin</dfn>
- </td>
- </tr>
- <tr>
- <td>
- <em>Value:</em>
- </td>
- <td>
- [ [ <percentage> | <length> | left | center | right ] [
- <percentage> | <length> | top | center | bottom ]? ] | [ [ left |
- center | right ] || [ top | center | bottom ] ]
- </td>
- </tr>
- <tr>
- <td>
- <em>Initial:</em>
- </td>
- <td>
- 50% 50%
- </td>
- </tr>
- <tr>
- <td>
- <em>Applies to:</em>
- </td>
- <td>
- block-level and inline-level elements
- </td>
- </tr>
- <tr>
- <td>
- <em>Inherited:</em>
- </td>
- <td>
- no
- </td>
- </tr>
- <tr>
- <td>
- <em>Percentages:</em>
- </td>
- <td>
- refer to the size of the element's box
- </td>
- </tr>
- <tr>
- <td>
- <em>Media:</em>
- </td>
- <td>
- visual
- </td>
- </tr>
- <tr>
- <td>
- <em>Computed value:</em>
- </td>
- <td>
- For <length> the absolute value, otherwise a percentage
- </td>
- </tr>
- </tbody>
- </table>
-
- <!-- ======================================================================================================= -->
-
- <h2 id="transform-functions">
- The Transformation Functions
- </h2>
- <p>
- The value of the <span class="prop-name">transform</span> property is a
- list of <transform-functions>, applied in the order provided. The
- individual transform functions are separated by whitespace. The
- following is a list of allowed transform functions. In this list the
- type <translation-value> is defined as a <length> or
- <percentage> value, and the <angle> type is defined by <a
- href="http://www.w3.org/TR/css3-values/">CSS Values and Units.</a>
- </p>
- <dl>
- <dt>
- <span class="prop-value">none</span>
- </dt>
- <dd>
- specifies an identity transform.
- </dd>
- <dt>
- <span class="prop-value">matrix(<number>, <number>, <number>, <number>,
- <number>, <number>)
- </span>
- </dt>
- <dd>
- specifies a 2D transformation in the form of a
- <a href="http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined">transformation matrix</a>
- of six values. <span class="prop-value">matrix(a,b,c,d,e,f)</span> is equivalent to applying
- the transformation matrix <strong>[a b c d e f]</strong>.
- </dd>
- <dt>
- <span class="prop-value">translate(<translation-value>[, <translation-value>])</span>
- </dt>
- <dd>
- specifies a <a href="http://www.w3.org/TR/SVG/coords.html#TranslationDefined">2D translation</a> by
- the vector [tx, ty], where tx is the first translation-value parameter and ty is the optional second
- translation-value parameter. If <em><ty></em> is not provided, ty has zero as a value.
- </dd>
- <dt>
- <span class="prop-value">translateX(<translation-value>)</span>
- </dt>
- <dd>
- specifies a <a href="http://www.w3.org/TR/SVG/coords.html#TranslationDefined">translation</a> by the given
- amount in the X direction.
- </dd>
- <dt>
- <span class="prop-value">translateY(<translation-value>)</span>
- </dt>
- <dd>
- specifies a <a href="http://www.w3.org/TR/SVG/coords.html#TranslationDefined">translation</a> by the given
- amount in the Y direction.
- </dd>
- <dt>
- <span class="prop-value">scale(<number>[, <number>])</span>
- </dt>
- <dd>
- specifies a <a href="http://www.w3.org/TR/SVG/coords.html#ScalingDefined">2D scale</a> operation by the [sx,sy]
- scaling vector described by the 2 parameters. If the second parameter is not provided, it is takes a value
- equal to the first.
- </dd>
- <dt>
- <span class="prop-value">scaleX(<number>)</span>
- </dt>
- <dd>
- specifies a scale operation using the [sx,1] scaling vector, where sx is given as the parameter.
- </dd>
- <dt>
- <span class="prop-value">scaleY(<number>)</span>
- </dt>
- <dd>
- specifies a scale operation using the [1,sy] scaling vector, where sy is given as the parameter.
- </dd>
- <dt>
- <span class="prop-value">rotate(<angle>)</span>
- </dt>
- <dd>
- specifies a <a href="http://www.w3.org/TR/SVG/coords.html#RotationDefined">2D rotation</a> by the angle
- specified in the parameter about the origin of the element, as defined by the <em>transform-origin</em> property.
- </dd>
- <dt>
- <span class="prop-value">skewX(<angle>)</span>
- </dt>
- <dd>
- specifies a <a href="http://www.w3.org/TR/SVG/coords.html#SkewXDefined">skew transformation along the X axis</a>
- by the given angle.
- </dd>
- <dt>
- <span class="prop-value">skewY(<angle>)</span>
- </dt>
- <dd>
- specifies a <a href="http://www.w3.org/TR/SVG/coords.html#SkewYDefined">skew transformation along the Y axis</a>
- by the given angle.
- </dd>
- <dt>
- <span class="prop-value">skew(<angle> [, <angle>])</span>
- </dt>
- <dd>
- specifies a <a
- href="http://www.w3.org/TR/SVG/coords.html#SkewXDefined">skew
- transformation along the X and Y axes</a>. The first angle parameter
- specifies the skew on the X axis. The second angle parameter specifies
- the skew on the Y axis. If the second parameter is not given then a
- value of 0 is used for the Y angle (ie. no skew on the Y axis).
- </dd>
- </dl>
- <h2 id="transform-values">
- Transform Values and Lists
- </h2>
- <p>
- The <translation-value> values are defined as [<percentage> | <length>]. All other value
- types are described
- <a href="http://www.w3.org/TR/REC-CSS2/syndata.html#values">as CSS types</a>. If a list of transforms is
- provided, then the net effect is as if each transform had been specified separately in the order provided.
- For example,
- </p>
- <pre>
- <div style="transform:translate(-10px,-20px) scale(2) rotate(45deg) translate(5px,10px)"/>
- </pre>
- <p>
- is functionally equivalent to:
- </p>
- <pre>
- <div style="transform:translate(-10px,-20px)">
- <div style="transform:scale(2)">
- <div style="transform:rotate(45deg)">
- <div style="transform:translate(5px,10px)">
- </div>
- </div>
- </div>
- </div>
- </pre>
- <div class="example">
- <pre>
- div {
- transform: translate(100px, 100px);
- }
- </pre>Move the element by 100 pixels in both the X and Y directions.
- <div class="figure">
- <img src="transform1.png" alt="The 100px translation in X and Y">
- </div>
- </div>
- <div class="example">
- <pre>
- div {
- height: 100px; width: 100px;
- transform: translate(80px, 80px) scale(1.5, 1.5) rotate(45deg);
- }
- </pre>
- Move the element by 80 pixels in both the X and Y directions, then scale the element by 150%, then rotate it 45
- degrees clockwise about the Z axis. Note that the scale and rotate operate about the center of the element,
- since the element has the default transform-origin of 50% 50%.
- <div class="figure">
- <img src="compound_transform.png" alt="The transform specified above">
- </div>
- </div>
- <!-- ======================================================================================================= -->
-
- <h2 id="animation">
- Transitions and animations between transform values
- </h2>
-
- <p>
- When animating or transitioning the value of a transform property
- the rules described below are applied. The 'from' transform is
- the transform at the start of the transition or current keyframe. The
- 'end' transform is the transform at the end of the transition or
- current keyframe.
- </p>
-
- <ul>
- <li>
- If the 'from' and 'to' transforms are both single functions
- of the same type:
- <ul>
- <li>
- For translate, translateX, translateY, translateZ, scale,
- scaleX, scaleY, rotate, skewX and skewY functions:
- <ul>
- <li>
- the individual components of the function are
- interpolated numerically.
- </li>
- </ul>
- </li>
- <li>
- For matrix:
- <ul>
- <li>
- the matrix is decomposed using the technique described in "Matrix decomposition
- for animation" below into separate translation, scale, rotation, skew, and
- perspective components, then each decomposed component is interpolated numerically,
- and finally combined in order to produce a resulting 3x2 matrix.
- </li>
- </ul>
- </li>
- </ul>
- </li>
- <li>
- If both the 'from' and 'to' transforms are "none":
- <ul>
- <li>
- There is no interpolation necessary
- </li>
- </ul>
- </li>
- <li>
- If one of the 'from' or 'to' transforms is "none":
- <ul>
- <li>
- The 'none' is replaced by an equivalent identity function list for
- the corresponding transform function list.
- <p>
- For example, if the 'from' transform is "scale(2)" and the 'to'
- transform is "none" then the value "scale(1)" will be used as the
- 'to' value, and animation will proceed using the rule above.
- Similarly, if the 'from' transform is "none" and the 'to' transform
- is "scale(2) rotate(50deg)" then the animation will execute as
- if the 'from' value is "scale(1) rotate(0)".
- </p>
- <p>
- The identity functions are translate(0),
- translateX(0), translateY(0), scale(1),
- scaleX(1), scaleY(1), rotate(0),
- rotateX(0), rotateY(0), skewX(0), skewY(0),
- and matrix(1, 0, 0, 1, 0, 0).
- </p>
- </li>
- </ul>
- </li>
- <li>
- If both the 'from' and 'to' transforms have the same number of
- transform functions and corresponding functions in each transform
- list are of the same type:
- <ul>
- <li>
- Each transform function is animated with its corresponding
- destination function in isolation using the rules described above.
- The individual values are then applied as a list to produce
- resulting transform value.
- </li>
- </ul>
- </li>
- <li>
- Otherwise:
- <ul>
- <li>
- The transform function lists are each converted into the
- equivalent matrix value and animation proceeds using the rule
- for a single function above.
- </li>
- </ul>
- </li>
- </ul>
-
- <h2 id="matrix-decomposition">
- Matrix decomposition for animation
- </h2>
- <p>
- When interpolating between 2 matrices, each is decomposed into the corresponding
- translation, rotation, scale, skew, and perspective values. Not all matrices can be
- accurately described by these values. Those that can't are decomposed into the most
- accurate representation possible, using the technique below. This technique is taken
- from The "unmatrix" method in "Graphics Gems II, edited by Jim Arvo". The pseudocode
- below works on a 4x4 homogeneous matrix. A 3x2 2D matrix is therefore first converted
- to 4x4 homogeneous form.
- </p>
- <pre>
- Input: matrix ; a 4x4 matrix
- Output: translation ; a 3 component vector
- rotation ; euler angles, represented as a 3 component vector
- scale ; a 3 component vector
- skew ; skew factors XY,XZ,YZ represented as a 3 component vector
- perspective ; a 4 component vector
- Returns false if the matrix cannot be decomposed, true if it can
-
- Supporting functions (point is a 3 component vector, matrix is a 4x4 matrix):
- float determinant(matrix) returns the 4x4 determinant of the matrix
- matrix inverse(matrix) returns the inverse of the passed matrix
- matrix transpose(matrix) returns the transpose of the passed matrix
- point multVecMatrix(point, matrix) multiplies the passed point by the passed matrix
- and returns the transformed point
- float length(point) returns the length of the passed vector
- point normalize(point) normalizes the length of the passed point to 1
- float dot(point, point) returns the dot product of the passed points
- float cos(float) returns the cosine of the passed angle in radians
- float asin(float) returns the arcsine in radians of the passed value
- float atan2(float y, float x) returns the principal value of the arc tangent of
- y/x, using the signs of both arguments to determine
- the quadrant of the return value
-
- Decomposition also makes use of the following function:
- point combine(point a, point b, float ascl, float bscl)
- result[0] = (ascl * a[0]) + (bscl * b[0])
- result[1] = (ascl * a[1]) + (bscl * b[1])
- result[2] = (ascl * a[2]) + (bscl * b[2])
- return result
-
-
- // Normalize the matrix.
- if (matrix[3][3] == 0)
- return false
-
- for (i = 0; i < 4; i++)
- for (j = 0; j < 4; j++)
- matrix[i][j] /= matrix[3][3]
-
- // perspectiveMatrix is used to solve for perspective, but it also provides
- // an easy way to test for singularity of the upper 3x3 component.
- perspectiveMatrix = matrix
-
- for (i = 0; i < 3; i++)
- perspectiveMatrix[i][3] = 0
-
- perspectiveMatrix[3][3] = 1
-
- if (determinant(perspectiveMatrix) == 0)
- return false
-
- // First, isolate perspective.
- if (matrix[0][3] != 0 || matrix[1][3] != 0 || matrix[2][3] != 0)
- // rightHandSide is the right hand side of the equation.
- rightHandSide[0] = matrix[0][3];
- rightHandSide[1] = matrix[1][3];
- rightHandSide[2] = matrix[2][3];
- rightHandSide[3] = matrix[3][3];
-
- // Solve the equation by inverting perspectiveMatrix and multiplying
- // rightHandSide by the inverse.
- inversePerspectiveMatrix = inverse(perspectiveMatrix)
- transposedInversePerspectiveMatrix = transposeMatrix4(inversePerspectiveMatrix)
- perspective = multVecMatrix(rightHandSide, transposedInversePerspectiveMatrix)
-
- // Clear the perspective partition
- matrix[0][3] = matrix[1][3] = matrix[2][3] = 0
- matrix[3][3] = 1
- else
- // No perspective.
- perspective[0] = perspective[1] = perspective[2] = 0
- perspective[3] = 1
-
- // Next take care of translation
- translate[0] = matrix[3][0]
- matrix[3][0] = 0
- translate[1] = matrix[3][1]
- matrix[3][1] = 0
- translate[2] = matrix[3][2]
- matrix[3][2] = 0
-
- // Now get scale and shear. 'row' is a 3 element array of 3 component vectors
- for (i = 0; i < 3; i++)
- row[i][0] = matrix[i][0]
- row[i][1] = matrix[i][1]
- row[i][2] = matrix[i][2]
-
- // Compute X scale factor and normalize first row.
- scale[0] = length(row[0])
- row[0] = normalize(row[0])
-
- // Compute XY shear factor and make 2nd row orthogonal to 1st.
- skew[0] = dot(row[0], row[1])
- row[1] = combine(row[1], row[0], 1.0, -skew[0])
-
- // Now, compute Y scale and normalize 2nd row.
- scale[1] = length(row[1])
- row[1] = normalize(row[1])
- skew[0] /= scale[1];
-
- // Compute XZ and YZ shears, orthogonalize 3rd row
- skew[1] = dot(row[0], row[2])
- row[2] = combine(row[2], row[0], 1.0, -skew[1])
- skew[2] = dot(row[1], row[2])
- row[2] = combine(row[2], row[1], 1.0, -skew[2])
-
- // Next, get Z scale and normalize 3rd row.
- scale[2] = length(row[2])
- row[2] = normalize(row[2])
- skew[1] /= scale[2]
- skew[2] /= scale[2]
-
- // At this point, the matrix (in rows) is orthonormal.
- // Check for a coordinate system flip. If the determinant
- // is -1, then negate the matrix and the scaling factors.
- pdum3 = cross(row[1], row[2])
- if (dot(row[0], pdum3) < 0)
- for (i = 0; i < 3; i++) {
- scale[0] *= -1;
- row[i][0] *= -1
- row[i][1] *= -1
- row[i][2] *= -1
-
- // Now, get the rotations ou
- rotate[1] = asin(-row[0][2]);
- if (cos(rotate[1]) != 0)
- rotate[0] = atan2(row[1][2], row[2][2]);
- rotate[2] = atan2(row[0][1], row[0][0]);
- else
- rotate[0] = atan2(-row[2][0], row[1][1]);
- rotate[2] = 0;
-
- return true;
- </pre>
- <p>
- Each component of each returned value is linearly interpolated with the corresponding
- component of the other matrix. The resulting components are then recomposed into a
- final matrix as though combining the following transform functions:
- </p>
- <pre>
- matrix3d(1,0,0,0, 0,1,0,0, 0,0,1,0, perspective[0], perspective[1], perspective[2], perspective[3])
- translate3d(translation[0], translation[1], translation[2])
- rotateX(rotation[0]) rotateY(rotation[1]) rotateZ(rotation[2])
- matrix3d(1,0,0,0, 0,1,0,0, 0,skew[2],1,0, 0,0,0,1)
- matrix3d(1,0,0,0, 0,1,0,0, skew[1],0,1,0, 0,0,0,1)
- matrix3d(1,0,0,0, skew[0],1,0,0, 0,0,1,0, 0,0,0,1)
- scale3d(scale[0], scale[1], scale[2])
- </pre>
- <h2 id="dom-interfaces">
- DOM Interfaces
- </h2>
- <p>
- This section describes the interfaces and functionality added to the DOM
- to support runtime access to the functionality described above.
- </p>
-
- <h3 id="point-interface">
- Point
- </h3>
-
- <dl>
- <dt>
- <b>Interface <i><a id="DOM-Point" name='DOM-Point'>Point</a></i></b>
- </dt>
- <dd>
- <p>
- The <code>Point</code> interface represents a point in two-dimensional space.
- </p>
- <dl>
-
- <dt>
- <b>IDL Definition</b>
- </dt>
- <dd>
- <div class='idl-code'>
- <pre>
- interface Point {
- attribute float x;
- attribute float y;
- };</pre>
- </div>
- </dd> <!-- IDL -->
-
- <dt>
- <b>Attributes</b>
- </dt>
- <dd>
- <dl>
- <dt>
- <code class='attribute-name'><a id="DOM-Point-x" name='DOM-Point-x'>x</a></code> of type <code>float</code>
- </dt>
- <dd>
- The value of the point along the X dimension.
- </dd>
- <dt>
- <code class='attribute-name'><a id="DOM-Point-y" name='DOM-Point-y'>y</a></code> of type <code>float</code>
- </dt>
- <dd>
- The value of the point along the Y dimension.
- </dd>
- </dl>
- </dd> <!-- Attributes -->
-
- </dl>
- </dd> <!-- interface Point -->
- </dl>
-
- <!-- ====================================================================== -->
- <h3 id="window-interface">
- Window
- </h3>
-
- <dl>
- <dt>
- <b>Interface <i><a id = "DOM-Window" name='DOM-Window'>Window</a></i></b>
- </dt>
- <dd>
- <p>
- The following 2 functions are added to the <code>Window</code> interface. They provide conversions
- between the page and node coordinate spaces.
- </p>
- <dl>
-
- <dt>
- <b>IDL Definition</b>
- </dt>
- <dd>
- <div class='idl-code'>
- <pre>
- interface Window {
- ...
- Point convertPointFromPageToNode(in Node node, in Point point);
- Point convertPointFromNodeToPage(in Node node, in Point point);
- ...
- };</pre>
- </div>
- </dd> <!-- IDL -->
-
- <dt>
- <b>Methods</b>
- </dt>
- <dd>
- <dl>
- <!-- ============================================================ -->
- <dt>
- <code class='method-name'><a id="DOM-Window-convertPointFromPageToNode" name='DOM-Window-convertPointFromPageToNode'>convertPointFromPageToNode</a></code>
- </dt>
- <dd>
- <div class='method'>
- The <code>convertPointFromPageToNode</code> method returns a point in the coordinate space of
- the passed Node that is at the same location in the page as the passed point, which is in the
- coordinate space of the page.
- <div class='parameters'>
- <b>Parameters</b>
- <div class='paramtable'>
- <dl>
- <dt>
- <code class='parameter-name'>node</code> of type <code>Node</code>
- </dt>
- <dd>
- The Node which defines the desired coordinate space of the returned point.<br>
- </dd>
- <dt>
- <code class='parameter-name'>point</code> of type <code>Point</code>
- </dt>
- <dd>
- The point, in the page's coordinate space, for which the desired point, in the Node's
- coordinate space, should be returned.<br>
- </dd>
- </dl>
- </div>
- </div><!-- parameters -->
- <div class='return-value'>
- <b>Return Value</b>
- </div>
- <div class='returnvalue'>
- <dl>
- <dt>
- <code>Point</code>
- </dt>
- <dd>
- The resultant point in the coordinate space of the passed Node.<br>
- </dd>
- </dl>
- </div>
- </div>
- <div>
- <b>No Exceptions</b>
- </div>
- </dd> <!-- convertPointFromPageToNode -->
- <!-- ============================================================ -->
- <dt>
- <code class='method-name'><a id="DOM-Window-convertPointFromNodeToPage"
- name='DOM-Window-convertPointFromNodeToPage'>convertPointFromNodeToPage</a></code>
- </dt>
- <dd>
- <div class='method'>
- The <code>convertPointFromNodeToPage</code> method returns a point in the coordinate space
- of the page that is at the same location in the page as the passed point, which is in
- the coordinate space of the passed Node.
- <div class='parameters'>
- <b>Parameters</b>
- <div class='paramtable'>
- <dl>
- <dt>
- <code class='parameter-name'>node</code> of type <code>Node</code>
- </dt>
- <dd>
- The Node which defines the coordinate space of the passed point.<br>
- </dd>
- <dt>
- <code class='parameter-name'>point</code> of type <code>Point</code>
- </dt>
- <dd>
- The point, in the Node's coordinate space, for which the desired point, in the page's
- coordinate space, should be returned.<br>
- </dd>
- </dl>
- </div>
- </div><!-- parameters -->
- <div class='return-value'>
- <b>Return Value</b>
- </div>
- <div class='returnvalue'>
- <dl>
- <dt>
- <code>Point</code>
- </dt>
- <dd>
- The resultant point in the coordinate space of the page.<br>
- </dd>
- </dl>
- </div>
- </div>
- <div>
- <b>No Exceptions</b>
- </div>
- </dd> <!-- convertPointFromNodeToPage -->
- </dl>
- </dd> <!-- Methods -->
-
- </dl>
- </dd> <!-- Interface Window -->
- </dl>
-
- <!-- ============================================================ -->
-
- <h3 id="cssmatrix-interface">
- CSSMatrix
- </h3>
-
- <dl>
- <dt>
- <b>Interface <i><a id="DOM-CSSMatrix" name='DOM-CSSMatrix'>CSSMatrix</a></i></b>
- </dt>
- <dd>
- <p>
- The <code>CSSMatrix</code> interface represents a 4x4 homogeneous matrix.
- </p>
- <dl>
-
- <dt>
- <b>IDL Definition</b>
- </dt>
- <dd>
- <div class='idl-code'>
- <pre>
- interface CSSMatrix {
- attribute float a;
- attribute float b;
- attribute float c;
- attribute float d;
- attribute float e;
- attribute float f;
-
- void setMatrixValue(in DOMString string) raises(DOMException);
- CSSMatrix multiply(in CSSMatrix secondMatrix);
- CSSMatrix inverse() raises(DOMException);
- CSSMatrix translate(in float x, in float y);
- CSSMatrix scale(in float scaleX, in float scaleY);
- CSSMatrix rotate(in float angle);
- };</pre>
- </div><br>
- </dd> <!-- IDL -->
-
- <dt>
- <b>Attributes</b>
- </dt>
- <dd>
- <dl>
- <dt>
- <code class='attribute-name'><a id="DOM-CSSMatrix-matrix" name='DOM-CSSMatrix-matrix'>a-f</a></code>
- of type <code>float</code>
- </dt>
- <dd>
- Each of these attributes represents one of the values in the 3x2 matrix.<br>
- </dd>
- </dl>
- </dd> <!-- Attributes -->
-
- <dt>
- <b>Methods</b>
- </dt>
- <dd>
- <dl>
-
- <!-- ===================================================== -->
- <dt>
- <code class='method-name'><a id="DOM-CSSMatrix-setMatrixValue" name='DOM-CSSMatrix-setMatrixValue'>setMatrixValue</a></code>
- </dt>
- <dd>
- <div class='method'>
- The <code>setMatrixValue</code> method replaces the existing matrix with one computed from
- parsing the passed string as though it had been assigned to the transform property in a CSS
- style rule.
- <div class='parameters'>
- <b>Parameters</b>
- <div class='paramtable'>
- <dl>
- <dt>
- <code class='parameter-name'>string</code> of type <code>DOMString</code>
- </dt>
- <dd>
- The string to parse.<br>
- </dd>
- </dl>
- </div>
- </div><!-- parameters -->
- <div class='return-value'>
- <b>No Return Value</b>
- </div>
- <div>
- <b>Exceptions</b>
- <div class='returnvalue'>
- <dl>
- <dt>
- <code>SYNTAX_ERR</code>
- </dt>
- <dd>
- Thrown when the provided string can not be
- parsed into a CSSMatrix.
- </dd>
- </dl>
- </div>
- </div>
- </div>
- </dd> <!-- setMatrixValue -->
-
- <!-- ===================================================== -->
- <dt>
- <code class='method-name'><a id="DOM-CSSMatrix-multiply"
- name='DOM-CSSMatrix-multiply'>multiply</a></code>
- </dt>
- <dd>
- <div class='method'>
- The <code>multiply</code> method returns a new CSSMatrix which is the result of this matrix
- multiplied by the passed matrix, with the passed matrix to the right. This matrix is not modified.
- <div class='parameters'>
- <b>Parameters</b>
- <div class='paramtable'>
- <dl>
- <dt>
- <code class='parameter-name'>secondMatrix</code> of type <code>CSSMatrix</code>
- </dt>
- <dd>
- The matrix to multipy.<br>
- </dd>
- </dl>
- </div>
- </div><!-- parameters -->
- <div class='return-value'>
- <b>Return Value</b>
- <div class='returnvalue'>
- <dl>
- <dt>
- <code>CSSMatrix</code>
- </dt>
- <dd>
- The result matrix.<br>
- </dd>
- </dl>
- </div>
- </div>
- <div>
- <b>No Exceptions</b>
- </div>
- </div>
- </dd> <!-- multiply() -->
-
- <!-- ===================================================== -->
- <dt>
- <code class='method-name'><a id="DOM-CSSMatrix-inverse"
- name='DOM-CSSMatrix-inverse'>inverse</a></code>
- </dt>
- <dd>
- <div class='method'>
- The <code>inverse</code> method returns a new matrix which is the inverse of this matrix. This
- matrix is not modified.
- <div class='parameters'>
- <b>No Parameters</b>
- </div><!-- parameters -->
- <div class='return-value'>
- <b>Return Value</b>
- <div class='returnvalue'>
- <dl>
- <dt>
- <code>CSSMatrix</code>
- </dt>
- <dd>
- The inverted matrix.<br>
- </dd>
- </dl>
- </div>
- </div>
- <div>
- <b>Exceptions</b>
- <div class='returnvalue'>
- <dl>
- <dt>
- <code>NOT_SUPPORTED_ERROR</code>
- </dt>
- <dd>
- Thrown when the CSSMatrix can not be
- inverted.
- </dd>
- </dl>
- </div>
- </div>
- </div><!-- ======================================================================================================= -->
- </dd> <!-- inverse() -->
-
- <!-- ===================================================== -->
- <dt>
- <code class='method-name'><a id="DOM-CSSMatrix-translate"
- name='DOM-CSSMatrix-translate'>translate</a></code>
- </dt>
- <dd>
- <div class='method'>
- The <code>translate</code> method returns a new matrix which is this matrix post multiplied
- by a translation matrix containing the passed
- values. This matrix is not modified.
- <div class='parameters'>
- <b>Parameters</b>
- <div class='paramtable'>
- <dl>
- <dt>
- <code class='parameter-name'>x</code> of type <code>float</code>
- </dt>
- <dd>
- The X component of the translation value.<br>
- </dd>
- <dt>
- <code class='parameter-name'>y</code> of type <code>float</code>
- </dt>
- <dd>
- The Y component of the translation value.<br>
- </dd>
- </dl>
- </div>
- </div><!-- parameters -->
- <div class='return-value'>
- <b>Return Value</b>
- <div class='returnvalue'>
- <dl>
- <dt>
- <code>CSSMatrix</code>
- </dt>
- <dd>
- The result matrix.<br>
- </dd>
- </dl>
- </div>
- </div>
- <div>
- <b>No Exceptions</b>
- </div>
- </div>
- <!-- ===================================================================================== -->
- </dd> <!-- translate() -->
-
- <!-- ===================================================== -->
- <dt>
- <code class='method-name'><a id="DOM-CSSMatrix-scale" name='DOM-CSSMatrix-scale'>scale</a></code>
- </dt>
- <dd>
- <div class='method'>
- The <code>scale</code> method returns a new matrix which is this matrix post multiplied by a
- scale matrix containing the passed values. If the z component is undefined, a 1 value is used in
- its place. If the y component is undefined, the x component value is used in its
- place. This matrix is not modified.
- <div class='parameters'>
- <b>Parameters</b>
- <div class='paramtable'>
- <dl>
- <dt>
- <code class='parameter-name'>scaleX</code> of type <code>float</code>
- </dt>
- <dd>
- The X component of the scale value.<br>
- </dd>
- <dt>
- <code class='parameter-name'>scaleY</code> of type <code>float</code>
- </dt>
- <dd>
- The (optional) Y component of the scale value.<br>
- </dd>
- </dl>
- </div>
- </div><!-- parameters -->
- <div class='return-value'>
- <b>Return Value</b>
- <div class='returnvalue'>
- <dl>
- <dt>
- <code>CSSMatrix</code>
- </dt>
- <dd>
- The result matrix.<br>
- </dd>
- </dl>
- </div>
- </div>
- <div>
- <b>No Exceptions</b>
- </div>
- </div>
- <!-- ========================================================================================-->
- </dd> <!-- scale() -->
-
- <!-- ===================================================== -->
- <dt>
- <code class='method-name'><a id="DOM-CSSMatrix-rotate" name='DOM-CSSMatrix-rotate'>rotate</a></code>
- </dt>
- <dd>
- <div class='method'>
- The <code>rotate</code> method returns a new matrix which is this matrix post multiplied by
- a rotation matrix. The rotation value is in degrees. This matrix is not modified.
- <div class='parameters'>
- <b>Parameters</b>
- <div class='paramtable'>
- <dl>
- <dt>
- <code class='parameter-name'>angle</code> of type <code>float</code>
- </dt>
- <dd>
- The angle of rotation.<br>
- </dd>
- </dl>
- </div>
- </div><!-- parameters -->
- <div class='return-value'>
- <b>Return Value</b>
- <div class='returnvalue'>
- <dl>
- <dt>
- <code>CSSMatrix</code>
- </dt>
- <dd>
- The result matrix.<br>
- </dd>
- </dl>
- </div>
- </div>
- <div>
- <b>No Exceptions</b>
- </div>
- </div>
- <!-- ====================================================================================== -->
- </dd> <!-- rotate() -->
-
- </dl><!-- methods -->
- </dd>
-
- </dl>
- </dd> <!-- Interface CSSMatrix -->
- </dl>
- <!-- ============================================================ -->
-
- <h3 id="csstransformvalue-interface">
- CSSTransformValue
- </h3>
-
- <dl>
- <dt>
- <b>Interface <i><a id="DOM-CSSTransformValue" name='DOM-CSSTransformValue'>CSSTransformValue</a></i></b>
- </dt>
- <dd>
- <p>
- The <code>CSSTransformValue</code> interface represents one transform function in the transform property. The
- <code>operationType</code> defines which operation is represented. The object also contains a list of values,
- which are the parameters of the function, in the same order in which they appear in the transform functions.
- </p>
- <dl>
- <dt>
- <b>IDL Definition</b>
- </dt>
- <dd>
- <div class='idl-code'>
- <pre>
- interface CSSTransformValue : CSSValueList {
-
- // 2D OperationTypes
- const unsigned short CSS_TRANSLATE = 1;
- const unsigned short CSS_TRANSLATEX = 2;
- const unsigned short CSS_TRANSLATEY = 3;
- const unsigned short CSS_ROTATE = 4;
- const unsigned short CSS_SCALE = 5;
- const unsigned short CSS_SCALEX = 6;
- const unsigned short CSS_SCALEY = 7;
- const unsigned short CSS_SKEW = 8;
- const unsigned short CSS_SKEWX = 9;
- const unsigned short CSS_SKEWY = 10;
- const unsigned short CSS_MATRIX = 11;
-
- attribute unsigned short operationType;
-
- CSSMatrix getCSSMatrix() raises(DOMException);
- };
- </pre>
- </div>
- </dd> <!-- IDL -->
-
- <dt>
- <b>Attributes</b>
- </dt>
- <dd>
- <dl>
- <dt>
- <code class='attribute-name'><a id="DOM-CSSTransformValue-operationType" name='DOM-CSSTransformValue-operationType'>operationType</a></code>
- of type <code>unsigned short</code>
- </dt>
- <dd>
- One of the listed operation types.<br>
- </dd>
- </dl>
- </dd> <!-- Attributes -->
-
- <dt>
- <b>Methods</b>
- </dt>
- <dd>
- <dl>
-
- <!-- ===================================================== -->
- <dt>
- <code class='method-name'><a id="DOM-CSSTransformValue-getCSSMatrix" name='DOM-CSSTransformValue-getCSSMatrix'>getCSSMatrix</a></code>
- </dt>
- <dd>
- <div class='method'>
- The <code>getCSSMatrix</code> method returns
- a CSSMatrix object representing this transform.
- <div class='parameters'>
- <b>No Parameters</b>
- </div><!-- parameters -->
- <div class='return-value'>
- <b>Return Value</b>
- <div class='returnvalue'>
- <dl>
- <dt>
- <code>CSSMatrix</code>
- </dt>
- <dd>
- The result matrix.
- </dd>
- </dl>
- </div>
- </div>
- <div>
- <b>Exceptions</b>
- <div class='returnvalue'>
- <dl>
- <dt>
- <code>NOT_SUPPORTED_ERROR</code>
- </dt>
- <dd>
- Thrown when the CSSTranformValue can not be converted into a CSSMatrix, such as when
- the CSSTransformValue contains percentage units and is being called on an object with
- unknown dimensions.
- </dd>
- </dl>
- </div>
- </div>
- </div>
- </dd> <!-- setMatrixValue -->
- </dl>
- </dd> <!-- methods -->
-
- </dl>
- </dd> <!-- Interface CSSTransformValue -->
- </dl>
-
- <p>
- In addition to the interfaces listed above, the <code>getComputedStyle</code> method of the <code>Window</code>
- object has been updated. The <code>transform</code> property of the style object returned by
- <code>getComputedStyle</code> contains a single CSSTransformValue with a type of CSS_MATRIX. The 6 parameters
- represent the 3x2 matrix that is the result of applying the individual functions listed in the
- <code>transform</code> property.
- </p>
-
-
-
-<!--
-<p class=issue>Editor's Note: This list needs to be updated (or
-dropped).
-
-<p>This specification is the product of the W3C Working Group on
-Cascading Style Sheets and Formatting Properties. In addition to the
-editor of this specification, the members of the Working Group
-are:
-<ul>
- <li>Marc Attinasi (Netscape/AOL)
- <li>Bert Bos (W3C)
- <li>Tantek Çelik (Microsoft Corp.)
- <li>Don Day (IBM)
- <li>Martin Dürst (W3C)
- <li>Angel Diaz (IBM)
- <li>Daniel Glazman (Netscape/AOL from nov. 2000, and Electricité de France
- until feb. 2000)
- <li>Håkon W. Lie (Opera Software from April 1999, and W3C until April
- 1999)
- <li>Chris Lilley (W3C)
- <li>Dave Raggett (W3C/Openwave Systems Inc.)
- <li>Pierre Saslawsky (Netscape/AOL)
- <li>Michel Suignard (Microsoft Corp.)
- <li>Ted Wugofski (Openwave Systems Inc.)
- <li>Steve Zilles (Adobe)
-</ul>
-
-<p>A number of invited experts to the Working Group have significantly
-contributed to CSS 3 : David. L Baron, Todd Fahrner, Daniel Glazman,
-Ian Hickson, Eric Meyer (The OPAL Group), Jeff Veen.
-
-<p>Former members of the Working Group:
-<ul>
- <li>Chris Brichford (Adobe)
- <li>Troy Chevalier (Netscape/AOL)
- <li>Dwayne Dicks (Softquad)
- <li>Ian Jacobs (W3C)
- <li>Lorin Jurow (Quark)
- <li>Sho Kuwamoto (Macromedia)
- <li>Peter Linss (Netscape/AOL)
- <li>Steven Pemberton (W3C/CWI)
- <li>Robert Pernett (Lotus)
- <li>Douglas Rand (SGI)
- <li>Nisheeth Ranjan (Netscape/AOL)
- <li>Ed Tecot (Microsoft Corp.)
- <li>Jared Sorensen (Novell)
- <li>Robert Stevahn (Hewlett-Packard)
- <li>Mike Wexler (Adobe)
- <li>John Williams (Quark)
- <li>Chris Wilson (Microsoft Corp.)
-</ul>
--->
-
-
-<h2>References</h2>
-
-<h3 class="no-num">Normative references</h3>
-<!--normative-->
-
-<h3 class="no-num">Other references</h3>
-<!--informative-->
-
-
-
-<h2 class="no-num">Property index</h2>
-<!-- properties -->
-
-
-
-<h2 class="no-num" id="index">Index</h2>
-<!--index-->
-
-</body>
-</html>
-<!-- Keep this comment at the end of the file
-Local variables:
-mode: sgml
-sgml-default-doctype-name:"html"
-sgml-minimize-attributes:t
-End:
--->
diff --git a/WebKitSite/specs/CSSVisualEffects/css3-2d-transforms/compound_transform.png b/WebKitSite/specs/CSSVisualEffects/css3-2d-transforms/compound_transform.png
deleted file mode 100644
index 8ab0c5c..0000000
Binary files a/WebKitSite/specs/CSSVisualEffects/css3-2d-transforms/compound_transform.png and /dev/null differ
diff --git a/WebKitSite/specs/CSSVisualEffects/css3-2d-transforms/default.css b/WebKitSite/specs/CSSVisualEffects/css3-2d-transforms/default.css
deleted file mode 100644
index fe7e2c6..0000000
--- a/WebKitSite/specs/CSSVisualEffects/css3-2d-transforms/default.css
+++ /dev/null
@@ -1,477 +0,0 @@
-/*
- * Style sheet for the CSS3 specification,
- * to be used in addition to http://www.w3.org/StyleSheets/TR/W3C-{WD,PR,REC}
- * $Id: default.css,v 1.1 2009-02-10 23:20:44 dean Exp $
- */
-
- at media print {
-
- /* the following doesn't work for now,
- instead we rely on a patched version of html2ps which has this built-in */
- .dlink { display: none }
-
- /* the following doesn't work for now,
- instead we rely on a patched version of html2ps which has this built-in */
- div.navbar {
- display: none;
- }
-
- html { margin: 0 !important }
- body { font-family: serif }
- th, td { font-family: inherit }
- a { color: inherit !important }
- div.example:before { font-family: serif !important }
- pre.example:before { font-family: serif !important }
- a:link, a:visited { text-decoration: none !important }
- a:link:after, a:visited:after { /* create a cross-ref "see..." */ }
-}
- at page {
- margin: 1.5cm 1.1cm;
-}
-
-/* html body { margin-left: 8.5em } /* Overrides 70px in base.css */
-
-body {counter-reset: exampleno figure}
-
-h2, h3, h5, h6 { margin-top: 2em }
-h1, h2, h3, h4, h5, h6 { page-break-after: avoid; font-family: inherit }
-div.figure, div.sidefigure, pre, table.propdef, table.propdef-extra,
-div.example { page-break-inside: avoid }
-dt { page-break-after: avoid }
-
-span.id {float: right; font-weight: bold}
-
-p, p.testlink + p, p.mtb {
- text-indent: 0;
- margin-bottom: 0;
- margin-top: 0.8em
-}
-p + p, p + div.sidefigure + p {
- text-indent: 2em;
- margin-top: 0
-}
-dd > p:first-child, li > p:first-child {
- margin-top: 0
-}
-
-h1 + h2 {
- margin-top: 0;
-}
-
-pre {
- text-align: left; /* fixes justification in Mac IE 5 */
- text-indent: 0; /* fixes indent in Mac Netscape 6 */
- margin-top: 1em;
- margin-bottom: 1em;
- font-size: 90% /*smaller*/;
-}
-/*
-var {
- font-style: normal;
-}
-*/
-img {
- border-style: none;
- color: white;
-}
-.toc {
- text-indent: 0;
-}
-
-
- at media all { /* NS < 6 doesn't like borders around inline elements... */
-
- body {
- line-height: 1.3;
- }
-
- a:link, a:visited {
- color: inherit;
- text-decoration: underline;
- }
-
- a.logo:link, a.logo:visited {
- padding: 0;
- border-style: none;
- }
-
- /* Hmm, this seems to confuse many browsers... */
- dt { margin-left: 0 }
- dd { margin-left: 2em }
- dl, ul, ol { margin-left: 0; padding-left: 0 }
- li { margin-left: 2em; padding-left: 0 }
-
-}
-ul.indexlist { margin-left: 0; /*column-width: 13em; columns: 13em*/ }
-ul.indexlist li { margin-left: 0; list-style: none }
-ul.indexlist li li { margin-left: 1em }
-
-.example {
- counter-increment: exampleno;
-}
-div.example:before {
- content: "Example";
- content: "Example " counter(exampleno, upper-roman);
- font: bold small sans-serif;
- /*float: left;*/
- position: absolute;
- top: -0.6em;
- left: -2.5em;
- width: 7.5em;
- text-align: center;
- line-height: 1em;
- color: #FFF8DD;
- background: #600;
- padding: 0.1em;
- border: thin solid #999;
- /*margin: -1.3em 0 0.3em -2.5em;*/
-}
-pre.example:before {
- content: "Example";
- content: "Example " counter(exampleno, upper-roman);
- font: bold small sans-serif;
- /*float: left;*/
- position: absolute;
- top: -0.6em;
- left: -2.5em;
- width: 7.5em;
- text-align: center;
- line-height: 1em;
- color: #FFF8DD;
- background: #600;
- padding: 0.1em;
- border: thin solid #999;
- /*margin: -1.3em 0 0.3em -2.5em;*/
-}
-div.example, div.illegal-example, div.html, div.illegal-html, div.xml,
-div.illegal-xml, pre.example, pre.illegal-example, pre.html,
-pre.illegal-html, pre.xml, pre.illegal-xml {
- background: #FFF8DD;
- padding: 0.5em;
- margin: 1em 0;
- border: thin solid #999;
- position: relative;
-}
-pre.example, pre.illegal-example, pre.html,
-pre.illegal-html, pre.xml, pre.illegal-xml {
- padding-top: 1.5em;
-}
-div.example { color: #600 }
-pre.example { color: #600 }
-pre.illegal-example { color: red }
-div.illegal-example { color: red }
-div.illegal-example p { color: black }
-
-div.html { color: #600 }
-pre.html { color: #600 }
-pre.illegal-html { color: red }
-div.illegal-html { color: red }
-div.illegal-html p { color: black }
-pre.deprecated-html { color: red }
-div.deprecated-html { color: red }
-div.deprecated-html p { color: black }
-
-div.xml { color: #600 }
-pre.xml { color: #600 }
-pre.illegal-xml { color: red }
-div.illegal-xml { color: red }
-div.illegal-xml p { color: black }
-
-/* code { font-size: 90% } */
-.css { color: #800 } /* inline CSS code (SPAN/CODE) */
-code.css { font-family: inherit; font-size: 100% }
-code.html { color: #600 } /* inline HTML */
-code.xml { color: #600 } /* inline XML */
-.property { font: inherit; } /* name of a CSS property (SPAN) */
-.descriptor { } /* name of a CSS descriptor (SPAN) */
-.issue { color: #c00 } /* editorial remark, open issue */
-.type { font-style: italic } /* A <type> value for a property */
-
-dfn { font-weight: bolder; /*font-size: 1em*/ }
-
-/* Class note is a non-normative note. May be inline or a P or DIV */
-.note {
- /* font-weight: bold; */
- color: green
-}
-p.note, div.note {
- /* margin: 1em 2em; */
-}
-p.note:before, span.note:before { content: "\25B6" " " }
-div.note > p:first-child:before { content: "\25B6" " " }
-
-.normref { color: red }
-.informref { color: green }
-
-
-/* ToC not indented, but font style shows hierarchy */
-ul.toc {margin: 1em 0; padding: 0; font-weight: bold}
-ul.toc ul {margin: 0; padding: 0; font-weight: normal}
-ul.toc ul ul {margin: 0 /*0 0 2em*/; font-style: italic}
-ul.toc ul ul ul {margin: 0}
-ul.toc li {margin: 0.6em 0; padding: 0}
-ul.toc li li {margin: 0}
-/*
-ul.toc li li li, ul.toc li li li ul {margin-left: 0; display: inline}
-ul.toc li li li ul, ul.toc li li li ul li {margin-left: 0; display: inline}
-*/
-
- at media all { /* NS4 doesn't align the floats properly :-( */
-
- /* Section numbers in a column of their own */
- ul.toc span.secno {margin-right: 1em} /* workaround for Opera6 */
- ul.toc span.secno {float: left; width: 4em; margin-left: -5em}
- /*ul.toc span.secno {text-align: right}*/
- ul.toc li {clear: both}
- ul.toc {margin-left: 5em}
- /* If we had 'tab', floats would not be needed here:
- ul.toc span.secno {tab: 5em right; margin-right: 1em}
- ul.toc li {text-indent: 5em hanging}
- The second line in case items wrap
- */
-}
-
-ul.index {
- list-style: disc; /* Mac NS has problem with 'none' */
- list-style: none;
-}
-
-s, del {text-decoration: line-through; color: red}
-u, ins {text-decoration: underline; background: #bfa}
-
-div.figure, div.sidefigure {
- text-align: center;
- margin: 2.5em 0;
-}
-div.sidefigure {
- float: right;
- width: 50%;
- margin: 0 0 0.5em 0.5em
-}
-div.figure img, div.sidefigure img {
- display: block;
- margin: auto;
- max-width: 100%
-}
-p.caption, caption {
- text-align: center;
- font-style: italic;
- font-size: 90%;
- margin: 1.5em 2em;
- text-indent: 0;
-}
-p.caption:before {
- content: "Figure " counter(figure) ". ";
- font-weight: bold;
-}
-p.caption {
- counter-increment: figure;
-}
-
-/* DL list is indented, but figure inside it is not */
-dd { margin-left: 2em }
-dd div.figure { margin-left: -2em }
-
-sup {
- vertical-align: super;
- font-size: 80%
-}
-
-/* "Equations" (not real MathML, but simple HTML) are put in a
-blockquote and may have an equation number. We make sure the
-blockquote has enough margin on the right and then put the equation
-number there. */
-
-blockquote {
- margin: 0.5em 4em 0.5em 2em;
- text-indent: 0;
-}
-.eqno {
- text-align: right;
- float: right;
- width: 3em;
- margin: 0 -4em 0 0;
- font-weight: bold;
- /* background: silver; color: black; padding: 0.1em */
-}
-
-table.equiv-table { border-spacing: 0; margin: 0.5em 0 }
-table.equiv-table th, table.equiv-table td { padding: 0.3em }
-table.equiv-table th { text-align: left }
-/* table.equiv-table th:first-child { text-align: right } */
-table.equiv-table td, table.equiv-table th { border-bottom: thin solid #666 }
-table.equiv-table { border-bottom: hidden }
-table.equiv-table { empty-cells: show }
-table.equiv-table caption { margin: 0.5em 0 0 0 }
-
-/* Style for table of properties */
-table.proptable {
- font-size: small;
- border-collapse: collapse;
- border-spacing: 0;
- text-align: left;
- margin: 1em 0;
-}
-
-table.proptable td, table.proptable th {
- padding: 0.4em;
- border-style: solid none none dotted;
- border-width: thin;
- border-color: red;
-}
-table.proptable th:first-child, table.proptable td:first-child {
- border-left-style: none;
-}
-
-
-/* Style for table that defines a property or a descriptor */
-table.propdef, table.propdef-extra, table.descdef {
- border-spacing: 0;
- border-collapse: collapse;
- width: 100%;
- table-layout: fixed;
- background: #DEF;
- margin-top: 1.2em;
- margin-bottom: 1.2em
-}
-
-/* Since Jan 2008, some CSS modules use <th> instead of <td> in the
-first column of a table.propdef. These rules handle both. As of Jan
-2008, http://www.w3.org/Style/spec-mark-up still only documents <td>
-*/
-
-table.propdef td, table.propdef-extra td, table.descdef td,
-table.propdef th, table.propdef-extra th, table.descdef th {
- padding: 0 0.3em;
- vertical-align: baseline;
-}
-/*
-table.propdef dfn, table.propdef-extra dfn, table.descdef dfn {
- font-weight: bold;
- font-style: normal
-}
-*/
-table.propdef td:first-child,
-table.propdef-extra td:first-child,
-table.descdef td:first-child,
-table.propdef th:first-child,
-table.propdef-extra th:first-child,
-table.descdef th:first-child {
- font-style: italic;
- font-weight: normal;
- text-align: left;
- width: 8.3em
-}
-table.propdef td[colspan]:first-child,
-table.propdef-extra td[colspan]:first-child,
-table.descdef td[colspan]:first-child,
-table.propdef th[colspan]:first-child,
-table.propdef-extra th[colspan]:first-child,
-table.descdef th[colspan]:first-child {
- font-style: inherit
-}
-table.propdef tr:first-child,
-table.propdef-extra tr:first-child,
-table.descdef tr:first-child {
- background: #005A9C;
- color: white
-}
-/* table.propdef tr:first-child td { padding-top: 0.1em; padding-bottom: 0.1em } */
-
-/* This would replace :first-child for Opera, but it confuses WinIE :-( */
-/*
-table.propdef td { width: 8em }
-table.propdef td + td { width: auto }
-table.propdef tr { background: #005A9C; color: white }
-table.propdef tr + tr { background: transparent; color: black }
-*/
-
-/* CSS modules typically don't use MUST, SHOULD etc. from RFC 2119,
-or, if they do, they don't put them in uppercase. But the following
-class is provided in case a spec wants to use RFC 2119 terms in
-uppercase in the source. */
-
-em.rfc2119 {
- text-transform: lowercase;
- font-variant: small-caps;
- font-style: normal
-}
-
-/* In Profile specs, a table of required features: */
-
-table.features th {
- background: #00589f;
- color: #fff;
- text-align: left;
- padding: 0.2em 0.2em 0.2em 0.5em;
-}
-table.features td {
- vertical-align: top;
- border-bottom: 1px solid #ccc;
- padding: 0.3em 0.3em 0.3em 0.7em;
-}
-
-
-/* Style for data tables (and properly marked-up proptables) */
-
- .data, .proptable {
- margin: 1em auto;
- border-collapse: collapse;
- border: solid #005A9B;
- }
- .data caption {
- width: 100%;
- text-align: center;
- }
- .data td, .data th,
- .proptable td, .proptable th {
- border: thin solid;
- padding: 0.2em;
- text-align: center;
- }
- .data thead th[scope="row"],
- .proptable thead th[scope="row"] {
- text-align: right;
- background: #A4C8E2;
- color: inherit;
- }
- .data thead,
- .proptable thead {
- background: #EEEEEE;
- color: inherit;
- }
- .data tbody th:first-child,
- .proptable tbody th:first-child {
- text-align: right;
- background: #EEEEEE;
- color: inherit;
- }
- .data thead,
- .data tbody,
- .data tfoot,
- .data colgroup {
- border: solid;
- }
-
- .data img {
- vertical-align: middle;
- }
-
- table.propdef {
- table-layout: auto;
- }
- .propdef th {
- font-style: italic;
- font-weight: normal;
- text-align: left;
- width: 3em;
- }
- dt dfn code {
- font-size: inherit;
- }
-
-/* This is mostly to make the list inside the CR exit criteria more compact. */
-dl ol, dl li {display: inline; padding: 0; margin: 0}
-dl ol {counter-reset: list-item}
-dl li {counter-increment: list-item}
-dl li:before {content: "(" counter(list-item) ") "; font-weight: bold}
diff --git a/WebKitSite/specs/CSSVisualEffects/css3-2d-transforms/transform1.png b/WebKitSite/specs/CSSVisualEffects/css3-2d-transforms/transform1.png
deleted file mode 100644
index 47200fb..0000000
Binary files a/WebKitSite/specs/CSSVisualEffects/css3-2d-transforms/transform1.png and /dev/null differ
diff --git a/WebKitSite/specs/CSSVisualEffects/css3-2d-transforms/transform2.png b/WebKitSite/specs/CSSVisualEffects/css3-2d-transforms/transform2.png
deleted file mode 100644
index 0de0c9e..0000000
Binary files a/WebKitSite/specs/CSSVisualEffects/css3-2d-transforms/transform2.png and /dev/null differ
diff --git a/WebKitSite/specs/CSSVisualEffects/css3-3d-transforms/Makefile b/WebKitSite/specs/CSSVisualEffects/css3-3d-transforms/Makefile
deleted file mode 100644
index f26d0fb..0000000
--- a/WebKitSite/specs/CSSVisualEffects/css3-3d-transforms/Makefile
+++ /dev/null
@@ -1,39 +0,0 @@
-# Calling the post-processor with file-upload. Assumes the username
-# and password are in ~/.curl-w3.org
-#
-# Possible other options:
-# -F date=YYYY-MM-DD
-# -F ids=on
-
-%.html: %.src.html
- @echo "Calling post-processor to generate $@..."
- @curl -F file=@$< -F group=CSS -F output=html -F method=file -s -K ~/.curl-w3.org http://cgi.w3.org/member-bin/process.cgi >$@
-%.err: %.src.html
- @echo "Calling post-processor to check $<..."
- @curl -F file=@$< -F group=CSS -F output=err -F method=file -s -K ~/.curl-w3.org http://cgi.w3.org/member-bin/process.cgi >$@
-
-
-
-all: check Overview.html
- @echo Done.
-
-check: Overview.err
- @cat $<
- @grep -q '^No errors$$' $< # Force a non-zero exit code if errors
-
-
-
-# A handy shortcut:
-
-commit: update clean all
- cvs commit -m 'Generated. Do not edit!' Overview.html
-
-update:
- cvs update
-
-clean:
- rm Overview.html
-
-
-
-.PHONY: check commit update clean
diff --git a/WebKitSite/specs/CSSVisualEffects/css3-3d-transforms/Overview.err b/WebKitSite/specs/CSSVisualEffects/css3-3d-transforms/Overview.err
deleted file mode 100644
index 4269126..0000000
--- a/WebKitSite/specs/CSSVisualEffects/css3-3d-transforms/Overview.err
+++ /dev/null
@@ -1 +0,0 @@
-No errors
diff --git a/WebKitSite/specs/CSSVisualEffects/css3-3d-transforms/Overview.html b/WebKitSite/specs/CSSVisualEffects/css3-3d-transforms/Overview.html
deleted file mode 100644
index c09a5c4..0000000
--- a/WebKitSite/specs/CSSVisualEffects/css3-3d-transforms/Overview.html
+++ /dev/null
@@ -1,1539 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
-"http://www.w3.org/TR/html4/strict.dtd">
-
-<html lang=en>
- <head>
- <title>CSS 3D Transforms Module Level 3</title>
- <link href=default.css rel=stylesheet type="text/css">
-
- <style type="text/css">
- .rhs { white-space: pre-wrap; }
- code { font-size: inherit; }
- #box-shadow-samples td { background: white; color: black; }
- </style>
- <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
- type="text/css">
-
- <body>
- <div class=head> <!--begin-logo-->
- <p><a href="http://www.w3.org/"><img alt=W3C height=48
- src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
-
- <h1>CSS 3D Transforms Module Level 3</h1>
-
- <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 14 April 2009</h2>
-
- <dl>
- <dt>This version:
-
- <dd> <a
- href="http://www.w3.org/TR/2009/ED-css3-3d-transforms-20090414">http://dev.w3.org/csswg/css3-3d-transforms/</a>
- <!--http://www.w3.org/TR/2009/WD-css3-3d-transforms-20090414-->
-
- <dt>Latest version:
-
- <dd><a
- href="http://www.w3.org/TR/css3-3d-transforms/">http://www.w3.org/TR/css3-3d-transforms</a>
-
-
- <dt>Previous version:
-
- <dd><a href="http://www.w3.org/TR/2009/WD-css3-3d-transforms-20090320/">
- http://www.w3.org/TR/2009/WD-css3-3d-transforms-20090320/</a>
-
- <dt id=editors-list>Editors:
-
- <dd><a href="mailto:dino at apple.com">Dean Jackson</a> (<a
- href="http://www.apple.com/">Apple Inc</a>)
-
- <dd><a href="mailto:hyatt at apple.com">David Hyatt</a> (<a
- href="http://www.apple.com/">Apple Inc</a>)
-
- <dd><a href="mailto:cmarrin at apple.com">Chris Marrin</a> (<a
- href="http://www.apple.com/">Apple Inc</a>)
- </dl>
- <!--begin-copyright-->
- <p class=copyright><a
- href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
- rel=license>Copyright</a> © 2009 <a
- href="http://www.w3.org/"><acronym title="World Wide Web
- Consortium">W3C</acronym></a><sup>®</sup> (<a
- href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute
- of Technology">MIT</acronym></a>, <a
- href="http://www.ercim.org/"><acronym title="European Research Consortium
- for Informatics and Mathematics">ERCIM</acronym></a>, <a
- href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
- href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
- <a
- href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
- and <a
- href="http://www.w3.org/Consortium/Legal/copyright-documents">document
- use</a> rules apply.</p>
- <!--end-copyright-->
- <hr title="Separator for header">
- </div>
-
- <h2 class="no-num no-toc" id=abstract>Abstract</h2>
-
- <p>CSS 3D Transforms extends CSS Transforms to allow elements rendered by
- CSS to be transformed in three-dimensional space.
-
- <h2 class="no-num no-toc" id=status>Status of this document</h2>
- <!--begin-status-->
-
- <p>This is a public copy of the editors' draft. It is provided for
- discussion only and may change at any moment. Its publication here does
- not imply endorsement of its contents by W3C. Don't cite this document
- other than as work in progress.
-
- <p>The (<a
- href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
- mailing list <a href="mailto:www-style at w3.org">www-style at w3.org</a> (see
- <a href="http://www.w3.org/Mail/Request">instructions</a>) is preferred
- for discussion of this specification. When sending e-mail, please put the
- text “css3-3d-transforms” in the subject, preferably like
- this: “[<!---->css3-3d-transforms<!---->] <em>…summary of
- comment…</em>”
-
- <p>This document was produced by the <a href="/Style/CSS/members">CSS
- Working Group</a> (part of the <a href="/Style/">Style Activity</a>).
-
- <p>This document was produced by a group operating under the <a
- href="/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent
- Policy</a>. W3C maintains a <a href="/2004/01/pp-impl/32061/status"
- rel=disclosure>public list of any patent disclosures</a> made in
- connection with the deliverables of the group; that page also includes
- instructions for disclosing a patent. An individual who has actual
- knowledge of a patent which the individual believes contains <a
- href="/Consortium/Patent-Policy-20040205/#def-essential">Essential
- Claim(s)</a> must disclose the information in accordance with <a
- href="/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the
- W3C Patent Policy</a>.</p>
- <!--end-status-->
-
- <h2 class="no-num no-toc" id=contents>Table of contents</h2>
- <!--begin-toc-->
-
- <ul class=toc>
- <li><a href="#introduction"><span class=secno>1 </span>Introduction</a>
-
- <li><a href="#transform-property"><span class=secno>2 </span> The <span
- class=prop-name>‘<code
- class=property>transform</code>’</span> Property </a>
-
- <li><a href="#transform-origin-property"><span class=secno>3 </span> The
- <span class=prop-name>‘<code
- class=property>transform-origin</code>’</span> Property </a>
-
- <li><a href="#transform-style-property"><span class=secno>4 </span> The
- <span class=prop-name>‘<code
- class=property>transform-style</code>’</span> Property </a>
-
- <li><a href="#perspective-property"><span class=secno>5 </span> The <span
- class=prop-name>‘<code
- class=property>perspective</code>’</span> Property </a>
-
- <li><a href="#perspective-origin-property"><span class=secno>6 </span> The
- <span class=prop-name>‘<code
- class=property>perspective-origin</code>’</span> Property </a>
-
- <li><a href="#backface-visibility-property"><span class=secno>7 </span>
- The <span class=prop-name>‘<code
- class=property>backface-visibility</code>’</span> Property </a>
-
- <li><a href="#transform-functions"><span class=secno>8 </span> The
- Transformation Functions </a>
-
- <li><a href="#animation"><span class=secno>9 </span> Transitions and
- animations between transform values </a>
-
- <li><a href="#dom-interfaces"><span class=secno>10 </span> DOM Interfaces
- </a>
- <ul class=toc>
- <li><a href="#cssmatrix-interface"><span class=secno>10.1 </span> 10.1
- CSSMatrix </a>
-
- <li><a href="#csstransformvalue-interface"><span class=secno>10.2
- </span> 10.2 CSSTransformValue </a>
- </ul>
-
- <li><a href="#references"><span class=secno>11 </span>References</a>
- <ul class=toc>
- <li class=no-num><a href="#normative-references">Normative
- references</a>
-
- <li class=no-num><a href="#other-references">Other references</a>
- </ul>
-
- <li class=no-num><a href="#property-index">Property index</a>
-
- <li class=no-num><a href="#index">Index</a>
- </ul>
- <!--end-toc-->
-
- <h2 id=introduction><span class=secno>1 </span>Introduction</h2>
-
- <p><em>This section is not normative.</em>
-
- <p> This is an enhancement to the CSS Transforms specification which
- provides transforms in three dimensions. It should be read in conjunction
- with that specification.
-
- <p> This coordinate space can be modified with the <span
- class=prop-name>‘<code class=property><a
- href="#effects">transform</a></code>’</span> property. Using
- transform, elements can be translated, rotated and scaled in two or three
- dimensional space. A perspective transform can also be applied to give a
- sense of depth to the way elements are displayed. In three dimensions, a Z
- axis is added, with positive z values conceptually rising perpendicularly
- out of the window toward the user and negative z values falling into the
- window away from the user.
-
- <p> Any value other than ‘<code class=property>none</code>’ for
- the transform results in the creation of both a stacking context and a
- containing block. The object acts as though position: relative has been
- specified, but also acts as a containing block for fixed positioned
- descendants. The position on the Z axis of a transformed element does not
- affect the order within a stacking context. With elements at the same
- z-index, objects are drawn in order of increasing z position.
-
- <p> Note that while <span class=prop-name>‘<code class=property><a
- href="#effects">transform</a></code>’</span> uses a
- three-dimensional coordinate system, the elements themselves are not
- three-dimensional objects. Instead, they exist on a two-dimensional plane
- (a flat surface) and have no depth.
-
- <h2 id=transform-property><span class=secno>2 </span> The <span
- class=prop-name>‘<code class=property><a
- href="#effects">transform</a></code>’</span> Property</h2>
-
- <p> A 2D or 3D transformation is applied to an element through the <span
- class=prop-name>‘<code class=property><a
- href="#effects">transform</a></code>’</span> property. This property
- contains a list of <a href="#transform-functions">transform functions</a>.
- The final transformation value for an element is obtained by performing a
- matrix concatenation of each entry in the list. The set of transform
- functions is similar to those allowed by SVG. There are additional
- functions to support 3D transformations.
-
- <table class=propdef>
- <tbody>
- <tr>
- <td> <em>Name:</em>
-
- <td> <dfn id=effects>transform</dfn>
-
- <tr>
- <td> <em>Value:</em>
-
- <td> none | <transform-function> [ <transform-function> ]*
-
- <tr>
- <td> <em>Initial:</em>
-
- <td> none
-
- <tr>
- <td> <em>Applies to:</em>
-
- <td> block-level and inline-level elements
-
- <tr>
- <td> <em>Inherited:</em>
-
- <td> no
-
- <tr>
- <td> <em>Percentages:</em>
-
- <td> refer to the size of the element's box
-
- <tr>
- <td> <em>Media:</em>
-
- <td> visual
-
- <tr>
- <td> <em>Computed value:</em>
-
- <td> Same as specified value.
- </table>
- <!-- ======================================================================================================= -->
-
- <h2 id=transform-origin-property><span class=secno>3 </span> The <span
- class=prop-name>‘<code class=property><a
- href="#transform-origin">transform-origin</a></code>’</span>
- Property</h2>
-
- <p> The <span class=prop-name>‘<code class=property><a
- href="#transform-origin">transform-origin</a></code>’</span>
- property establishes the origin of transformation for an element. This
- property is applied by first translating the element by the negated value
- of the property, then applying the element's transform, then translating
- by the property value. This effectively moves the desired transformation
- origin of the element to (0,0,0) in the local coordinate system, then
- applies the element's transform, then moves the element back to its
- original position.
-
- <table class=propdef>
- <tbody>
- <tr>
- <td> <em>Name:</em>
-
- <td> <dfn id=transform-origin>transform-origin</dfn>
-
- <tr>
- <td> <em>Value:</em>
-
- <td> [ [ [ <percentage> | <length> | left | center | right ]
- [ <percentage> | <length> | top | center | bottom ]? ]
- <length> ] | [ [ [ left | center | right ] || [ top | center |
- bottom ] ] <length> ]
-
- <tr>
- <td> <em>Initial:</em>
-
- <td> 50% 50% 0
-
- <tr>
- <td> <em>Applies to:</em>
-
- <td> block-level and inline-level elements
-
- <tr>
- <td> <em>Inherited:</em>
-
- <td> no
-
- <tr>
- <td> <em>Percentages:</em>
-
- <td> refer to the size of the element's box
-
- <tr>
- <td> <em>Media:</em>
-
- <td> visual
-
- <tr>
- <td> <em>Computed value:</em>
-
- <td> For <length> the absolute value, otherwise a percentage
- </table>
- <!-- ======================================================================================================= -->
-
- <h2 id=transform-style-property><span class=secno>4 </span> The <span
- class=prop-name>‘<code class=property><a
- href="#transform-style">transform-style</a></code>’</span> Property</h2>
-
- <p> The <span class=prop-name>‘<code class=property><a
- href="#transform-style">transform-style</a></code>’</span> property
- defines how nested elements are rendered in 3D space. If the <span
- class=prop-name>‘<code class=property><a
- href="#transform-style">transform-style</a></code>’</span> is <span
- class=prop-value>‘<code class=property>flat</code>’</span>,
- all children of this element are rendered flattened into the 2D plane of
- the element. Therefore, rotating the element about the X or Y axes will
- cause children positioned at positive or negative Z positions to appear on
- the element's plane, rather than in front of or behind it. If the <span
- class=prop-name>‘<code class=property><a
- href="#transform-style">transform-style</a></code>’</span> is <span
- class=prop-value>‘<code class=css>preserve-3d</code>’</span>,
- this flattening is not performed, so children maintain their position in
- 3D space.
-
- <p> This flattening takes place at each element, so preserving a hierarchy
- of elements in 3D space requires that each ancestor in the hierarchy have
- the value <span class=prop-value>‘<code
- class=css>preserve-3d</code>’</span> for <span
- class=prop-name>‘<code class=property><a
- href="#transform-style">transform-style</a></code>’</span>. But
- since <span class=prop-name>‘<code class=property><a
- href="#transform-style">transform-style</a></code>’</span> affects
- only an element's children, the leaf nodes in a hierarchy do not require
- the perspective style.
-
- <table class=propdef>
- <tbody>
- <tr>
- <td> <em>Name:</em>
-
- <td> <dfn id=transform-style>transform-style</dfn>
-
- <tr>
- <td> <em>Value:</em>
-
- <td> flat | preserve-3d
-
- <tr>
- <td> <em>Initial:</em>
-
- <td> flat
-
- <tr>
- <td> <em>Applies to:</em>
-
- <td> block-level and inline-level elements
-
- <tr>
- <td> <em>Inherited:</em>
-
- <td> no
-
- <tr>
- <td> <em>Percentages:</em>
-
- <td> N/A
-
- <tr>
- <td> <em>Media:</em>
-
- <td> visual
-
- <tr>
- <td> <em>Computed value:</em>
-
- <td> Same as specified value.
- </table>
-
- <p> For some effects, the author will have to ensure that an ancestor
- element to a subtree using <span class=prop-value>‘<code
- class=css>preserve-3d</code>’</span> has a <span
- class=prop-name>‘<code class=property><a
- href="#transform-style">transform-style</a></code>’</span> of <span
- class=prop-value>‘<code class=property>flat</code>’</span> (or
- the default). Otherwise, the elements in the 3D tree may be located behind
- ancestor elements and, thus, invisible (hidden behind an ancestor's
- background).
-
- <p> Note that while ‘<code class=css>preserve-3d</code>’ can be
- specified on an element, the effect may not be possible. Elements that
- have <span class=prop-name>‘<code
- class=property>overflow</code>’</span> set to <span
- class=prop-value>‘<code class=property>hidden</code>’</span>
- are unable to keep their children in 3D. In this case the element will
- behave as if the property was set to <span class=prop-value>‘<code
- class=property>flat</code>’</span>.
-
- <div class=issue> Does transform-style: preserve-3d need to establish a
- stacking context and containing block like transform does?</div>
- <!-- ======================================================================================================= -->
-
- <h2 id=perspective-property><span class=secno>5 </span> The <span
- class=prop-name>‘<code class=property><a
- href="#perspective">perspective</a></code>’</span> Property</h2>
-
- <p> The <span class=prop-name>‘<code class=property><a
- href="#perspective">perspective</a></code>’</span> property applies
- the same transform as the <span
- class=prop-value>perspective(<number>)</span> transform function,
- except that it applies only to the positioned or transformed children of
- the element, not to the transform on the element itself.
-
- <p> If the value is <span class=prop-value>‘<code
- class=property>none</code>’</span>, less than or equal to 0 no
- perspective transform is applied.
-
- <p> The use of this property with any value other than ‘<code
- class=property>none</code>’ establishes a stacking context. It also
- establishes a containing block (somewhat similar to position:relative),
- just like the ‘<code class=property><a
- href="#effects">transform</a></code>’ property does.
-
- <table class=propdef>
- <tbody>
- <tr>
- <td> <em>Name:</em>
-
- <td> <dfn id=perspective>perspective</dfn>
-
- <tr>
- <td> <em>Value:</em>
-
- <td> none | <number>
-
- <tr>
- <td> <em>Initial:</em>
-
- <td> none
-
- <tr>
- <td> <em>Applies to:</em>
-
- <td> block-level and inline-level elements
-
- <tr>
- <td> <em>Inherited:</em>
-
- <td> no
-
- <tr>
- <td> <em>Percentages:</em>
-
- <td> N/A
-
- <tr>
- <td> <em>Media:</em>
-
- <td> visual
-
- <tr>
- <td> <em>Computed value:</em>
-
- <td> Same as specified value.
- </table>
- <!-- ======================================================================================================= -->
-
- <h2 id=perspective-origin-property><span class=secno>6 </span> The <span
- class=prop-name>‘<code class=property><a
- href="#perspective-origin">perspective-origin</a></code>’</span>
- Property</h2>
-
- <p> The <span class=prop-name>‘<code class=property><a
- href="#perspective-origin">perspective-origin</a></code>’</span>
- property establishes the origin for the <em><a
- href="#perspective">perspective</a></em> property. It effectively sets the
- X and Y position at which the viewer appears to be looking at the children
- of the element.
-
- <table class=propdef>
- <tbody>
- <tr>
- <td> <em>Name:</em>
-
- <td> <dfn id=perspective-origin>perspective-origin</dfn>
-
- <tr>
- <td> <em>Value:</em>
-
- <td> [ [ <percentage> | <length> | left | center | right ] [
- <percentage> | <length> | top | center | bottom ]? ] | [ [
- left | center | right ] || [ top | center | bottom ] ]
-
- <tr>
- <td> <em>Initial:</em>
-
- <td> 50% 50%
-
- <tr>
- <td> <em>Applies to:</em>
-
- <td> block-level and inline-level elements
-
- <tr>
- <td> <em>Inherited:</em>
-
- <td> no
-
- <tr>
- <td> <em>Percentages:</em>
-
- <td> refer to the size of the box itself
-
- <tr>
- <td> <em>Media:</em>
-
- <td> visual
-
- <tr>
- <td> <em>Computed value:</em>
-
- <td> Same as specified value.
- </table>
- <!-- ======================================================================================================= -->
-
- <h2 id=backface-visibility-property><span class=secno>7 </span> The <span
- class=prop-name>‘<code class=property><a
- href="#backface-visibility">backface-visibility</a></code>’</span>
- Property</h2>
-
- <p> The <span class=prop-name>‘<code class=property><a
- href="#backface-visibility">backface-visibility</a></code>’</span>
- property determines whether or not the "back" side of a transformed
- element is visible when facing the viewer. With an identity transform, the
- front side of an element faces the viewer. Applying a rotation about Y of
- 180 degrees (for instance) would cause the back side of the element to
- face the viewer.
-
- <p> This property is useful when you place two elements back-to-back, as
- you would to create a playing card. Without this property, the front and
- back elements could switch places at times during an animation to flip the
- card. Another example is creating a box out of 6 elements, but where you
- want to see the inside faces of the box. This is useful when creating the
- backdrop for a 3 dimensional stage.
-
- <table class=propdef>
- <tbody>
- <tr>
- <td> <em>Name:</em>
-
- <td> <dfn id=backface-visibility>backface-visibility</dfn>
-
- <tr>
- <td> <em>Value:</em>
-
- <td> visible | hidden
-
- <tr>
- <td> <em>Initial:</em>
-
- <td> visible
-
- <tr>
- <td> <em>Applies to:</em>
-
- <td> block-level and inline-level elements
-
- <tr>
- <td> <em>Inherited:</em>
-
- <td> no
-
- <tr>
- <td> <em>Percentages:</em>
-
- <td> N/A
-
- <tr>
- <td> <em>Media:</em>
-
- <td> visual
-
- <tr>
- <td> <em>Computed value:</em>
-
- <td> Same as specified value.
- </table>
- <!-- ======================================================================================================= -->
-
- <h2 id=transform-functions><span class=secno>8 </span> The Transformation
- Functions</h2>
-
- <p> The value of the <a class=prop-name href="#effects">transform</a>
- property is a list of <transform-functions>, applied in the order
- provided. The individual transform functions are separated by whitespace.
- The following is a list of allowed transform functions. In this list the
- type <translation-value> is defined as a <length> or
- <percentage> value, and the <angle> type is defined by <a
- href="http://www.w3.org/TR/css3-values/">CSS Values and Units.</a>
-
- <dl>
- <dt> <span class=prop-value>matrix(<number>, <number>,
- <number>, <number>, <number>, <number>)</span>
-
- <dd> specifies a 2D transformation in the form of a <a
- href="http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined">transformation
- matrix</a> of six values. <span
- class=prop-value>matrix(a,b,c,d,e,f)</span> is equivalent to matrix3d(a,
- b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, e, f, 0, 1).
-
- <dt> <span class=prop-value>matrix3d(<number>, <number>,
- <number>, <number>, <number>, <number>,
- <number>, <number>, <number>, <number>,
- <number>, <number>, <number>, <number>,
- <number>, <number>)</span>
-
- <dd> specifies a 3D transformation as a 4x4 homogeneous matrix of 16
- values in column-major order.
-
- <dt> <span class=prop-value>translate(<translation-value>[,
- <translation-value>])</span>
-
- <dd> specifies a <a
- href="http://www.w3.org/TR/SVG/coords.html#TranslationDefined">2D
- translation</a> by the vector [tx, ty], where tx is the first
- translation-value parameter and ty is the optional second
- translation-value parameter. If <em><ty></em> is not provided, ty
- has zero as a value.
-
- <dt> <span class=prop-value>translate3d(<translation-value>,
- <translation-value>, <translation-value>)</span>
-
- <dd> specifies a 3D translation by the vector [tx,ty,tz], with tx, ty and
- tz being the first, second and third translation-value parameters
- respectively.
-
- <dt> <span class=prop-value>translateX(<translation-value>)</span>
-
- <dd> specifies a <a
- href="http://www.w3.org/TR/SVG/coords.html#TranslationDefined">translation</a>
- by the given amount in the X direction.
-
- <dt> <span class=prop-value>translateY(<translation-value>)</span>
-
- <dd> specifies a <a
- href="http://www.w3.org/TR/SVG/coords.html#TranslationDefined">translation</a>
- by the given amount in the Y direction.
-
- <dt> <span class=prop-value>translateZ(<translation-value>)</span>
-
- <dd> specifies a <a
- href="http://www.w3.org/TR/SVG/coords.html#TranslationDefined">translation</a>
- by the given amount in the Z direction. Note that percentage values are
- not allowed in the translateZ translation-value, and if present are
- evaluated as 0.
-
- <dt> <span class=prop-value>scale(<number>[, <number>])</span>
-
-
- <dd> specifies a <a
- href="http://www.w3.org/TR/SVG/coords.html#ScalingDefined">2D scale</a>
- operation by the [sx,sy] scaling vector described by the 2 parameters. If
- the second parameter is not provided, it is takes a value equal to the
- first.
-
- <dt> <span class=prop-value>scale3d(<number>, <number>,
- <number>)</span>
-
- <dd> specifies a 3D scale operation by the [sx,sy,sz] scaling vector
- described by the 3 parameters.
-
- <dt> <span class=prop-value>scaleX(<number>)</span>
-
- <dd> specifies a scale operation using the [sx,1,1] scaling vector, where
- sx is given as the parameter.
-
- <dt> <span class=prop-value>scaleY(<number>)</span>
-
- <dd> specifies a scale operation using the [1,sy,1] scaling vector, where
- sy is given as the parameter.
-
- <dt> <span class=prop-value>scaleZ(<number>)</span>
-
- <dd> specifies a scale operation using the [1,1,sz] scaling vector, where
- sz is given as the parameter.
-
- <dt> <span class=prop-value>rotate(<angle>)</span>
-
- <dd> specifies a <a
- href="http://www.w3.org/TR/SVG/coords.html#RotationDefined">2D
- rotation</a> by the angle specified in the parameter about the origin of
- the element, as defined by the <em><a
- href="#transform-origin">transform-origin</a></em> property.
-
- <dt> <span class=prop-value>rotate3d(<number>, <number>,
- <number>, <angle>)</span>
-
- <dd> specifies a clockwise 3D rotation by the angle specified in last
- parameter about the [x,y,z] direction vector described by the first 3
- parameters. If the direction vector is not of unit length, it will be
- normalized. A direction vector that cannot be normalized, such as [0, 0,
- 0], will cause the rotation to not be applied. This function is
- equivalent to <code>matrix3d(1 + (1-cos(angle))*(x*x-1),
- -z*sin(angle)+(1-cos(angle))*x*y, y*sin(angle)+(1-cos(angle))*x*z, 0,
- z*sin(angle)+(1-cos(angle))*x*y, 1 + (1-cos(angle))*(y*y-1),
- -x*sin(angle)+(1-cos(angle))*y*z, 0, -y*sin(angle)+(1-cos(angle))*x*z,
- x*sin(angle)+(1-cos(angle))*y*z, 1 + (1-cos(angle))*(z*z-1), 0, 0, 0, 0,
- 1)</code>.
-
- <dt> <span class=prop-value>rotateX(<angle>)</span>
-
- <dd> specifies a clockwise rotation by the given angle about the X axis.
-
- <dt> <span class=prop-value>rotateY(<angle>)</span>
-
- <dd> specifies a clockwise rotation by the given angle about the Y axis.
-
- <dt> <span class=prop-value>rotateZ(<angle>)</span>
-
- <dd> specifies a clockwise rotation by the given angle about the Z axis.
-
- <dt> <span class=prop-value>skewX(<angle>)</span>
-
- <dd> specifies a <a
- href="http://www.w3.org/TR/SVG/coords.html#SkewXDefined">skew
- transformation along the X axis</a> by the given angle.
-
- <dt> <span class=prop-value>skewY(<angle>)</span>
-
- <dd> specifies a <a
- href="http://www.w3.org/TR/SVG/coords.html#SkewYDefined">skew
- transformation along the Y axis</a> by the given angle.
-
- <dt> <span class=prop-value>skew(<angle> [, <angle>])</span>
-
- <dd> specifies a <a
- href="http://www.w3.org/TR/SVG/coords.html#SkewXDefined">skew
- transformation along the X and Y axes</a>. The first angle parameter
- specifies the skew on the X axis. The second angle parameter specifies
- the skew on the Y axis. If the second parameter is not given then a value
- of 0 is used for the Y angle (ie. no skew on the Y axis).
-
- <dt> <span class=prop-value>perspective(<number>)</span>
-
- <dd> specifies a perspective projection matrix. This matrix maps a
- <em>viewing cube</em> onto a pyramid whose base is infinitely far away
- from the viewer and whose peak represents the viewer's position. The
- viewable area is the region bounded by the four edges of the viewport
- (the portion of the browser window used for rendering the webpage between
- the viewer's position and a point at a distance of infinity from the
- viewer). The <em>depth</em>, given as the parameter to the function,
- represents the distance of the z=0 plane from the viewer. Lower values
- give a more flattened pyramid and therefore a more pronounced perspective
- effect. The value is given in pixels, so a value of 1000 gives a moderate
- amount of foreshortening and a value of 200 gives an extreme amount. The
- matrix is computed by starting with an identity matrix and replacing the
- value at row 3, column 4 with the value -1/depth. The value for depth
- must be greater than zero, otherwise the function is invalid.
- </dl>
- <!-- ======================================================================================================= -->
-
- <h2 id=animation><span class=secno>9 </span> Transitions and animations
- between transform values</h2>
-
- <p> When animating or transitioning the value of a transform property the
- rules described below are applied. The ‘<code
- class=property>from</code>’ transform is the transform at the start
- of the transition or current keyframe. The ‘<code
- class=property>end</code>’ transform is the transform at the end of
- the transition or current keyframe.
-
- <ul>
- <li> If the ‘<code class=property>from</code>’ and
- ‘<code class=property>to</code>’ transforms are both single
- functions of the same type:
- <ul>
- <li> For translate, translate3d, translateX, translateY, translateZ,
- scale, scale3d, scaleX, scaleY, scaleZ, rotate, rotateX, rotateY,
- rotateZ, skewX and skewY functions:
- <ul>
- <li> the individual components of the function are interpolated
- numerically.
- </ul>
-
- <li> For perspective, matrix, matrix3d and rotate3d:
- <ul>
- <li> the values are first converted to a 4x4 matrix, then decomposed
- using <a href="http://tog.acm.org/GraphicsGems/gemsii/unmatrix.c">the
- method described by unmatrix</a> into separate translation, scale,
- rotation, skew and perspective matrices, then each decomposed matrix
- is interpolated numerically, and finally combined in order to produce
- a resulting 4x4 matrix.
- </ul>
- </ul>
-
- <li> If both the ‘<code class=property>from</code>’ and
- ‘<code class=property>to</code>’ transforms are "none":
- <ul>
- <li> There is no interpolation necessary
- </ul>
-
- <li> If one of the ‘<code class=property>from</code>’ or
- ‘<code class=property>to</code>’ transforms is "none":
- <ul>
- <li> The ‘<code class=property>none</code>’ is replaced by
- an equivalent identity function list for the corresponding transform
- function list.
- <p> For example, if the ‘<code class=property>from</code>’
- transform is "scale(2)" and the ‘<code
- class=property>to</code>’ transform is "none" then the value
- "scale(1)" will be used as the ‘<code
- class=property>to</code>’ value, and animation will proceed
- using the rule above. Similarly, if the ‘<code
- class=property>from</code>’ transform is "none" and the
- ‘<code class=property>to</code>’ transform is "scale(2)
- rotate(50deg)" then the animation will execute as if the ‘<code
- class=property>from</code>’ value is "scale(1) rotate(0)".</p>
-
- <p> The identity functions are translate(0), translate3d(0, 0, 0),
- translateX(0), translateY(0), translateZ(0), scale(1), scale3d(1, 1,
- 1), scaleX(1), scaleY(1), scaleZ(1), rotate(0), rotate3d(1, 1, 1, 0),
- rotateX(0), rotateY(0), rotateZ(0), skewX(0), skewY(0), matrix(1, 0,
- 0, 1, 0, 0) and matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0,
- 1).</p>
- </ul>
-
- <li> If both the ‘<code class=property>from</code>’ and
- ‘<code class=property>to</code>’ transforms have the same
- number of transform functions and corresponding functions in each
- transform list are of the same type:
- <ul>
- <li> Each transform function is animated with its corresponding
- destination function in isolation using the rules described above. The
- individual values are then applied as a list to produce resulting
- transform value.
- </ul>
-
- <li> Otherwise:
- <ul>
- <li> The transform function lists are each converted into the equivalent
- matrix3d value and animation proceeds using the rule for a single
- function above.
- </ul>
- </ul>
- <!-- ======================================================================================================= -->
-
- <h2 id=dom-interfaces><span class=secno>10 </span> DOM Interfaces</h2>
-
- <p> This section describes the interfaces and functionality added to the
- DOM to support runtime access to the functionality described above.</p>
- <!-- ============================================================ -->
-
- <h3 id=cssmatrix-interface><span class=secno>10.1 </span> 10.1 CSSMatrix</h3>
-
- <dl>
- <dt> <b>Interface <i><a id=DOM-CSSMatrix
- name=DOM-CSSMatrix>CSSMatrix</a></i></b>
-
- <dd>
- <p> The <code>CSSMatrix</code> interface represents a 4x4 homogeneous
- matrix.</p>
-
- <dl>
- <dt> <b>IDL Definition</b>
-
- <dd>
- <div class=idl-code>
- <pre>
- interface CSSMatrix {
- attribute float m11;
- attribute float m12;
- attribute float m13;
- attribute float m14;
- attribute float m21;
- attribute float m22;
- attribute float m23;
- attribute float m24;
- attribute float m31;
- attribute float m32;
- attribute float m33;
- attribute float m34;
- attribute float m41;
- attribute float m42;
- attribute float m43;
- attribute float m44;
-
- void setMatrixValue(in DOMString string) raises(DOMException);
- CSSMatrix multiply(in CSSMatrix secondMatrix);
- CSSMatrix inverse() raises(DOMException);
- CSSMatrix translate(in float x, in float y, in float z);
- CSSMatrix scale(in float scaleX, in float scaleY, in float scaleZ);
- CSSMatrix rotate(in float rotX, in float rotY, in float rotZ);
- CSSMatrix rotateAxisAngle(in float x, in float y, in float z, in float angle);
- };</pre>
- </div>
- <br>
- </dd>
- <!-- IDL -->
-
- <dt> <b>Attributes</b>
-
- <dd>
- <dl>
- <dt> <code class=attribute-name><a id=DOM-CSSMatrix-matrix
- name=DOM-CSSMatrix-matrix>m11-m44</a></code> of type
- <code>float</code>
-
- <dd> Each of these attributes represents one of the values in the 4x4
- matrix. For instance m12 represents the value in the 2nd column of
- the first row.<br>
- </dl>
- </dd>
- <!-- Attributes -->
-
- <dt> <b>Methods</b>
-
- <dd>
- <dl><!-- ===================================================== -->
-
- <dt> <code class=method-name><a id=DOM-CSSMatrix-setMatrixValue
- name=DOM-CSSMatrix-setMatrixValue>setMatrixValue</a></code>
-
- <dd>
- <div class=method> The <code>setMatrixValue</code> method replaces
- the existing matrix with one computed from parsing the passed string
- as though it had been assigned to the transform property in a CSS
- style rule.
- <div class=parameters> <b>Parameters</b>
- <div class=paramtable>
- <dl>
- <dt> <code class=parameter-name>string</code> of type
- <code>DOMString</code>
-
- <dd> The string to parse.<br>
- </dl>
- </div>
- </div>
- <!-- parameters -->
- <div class=return-value> <b>No Return Value</b></div>
-
- <div> <b>Exceptions</b>
- <div class=returnvalue>
- <dl>
- <dt> <code>SYNTAX_ERR</code>
-
- <dd> Thrown when the provided string can not be parsed into a
- CSSMatrix.
- </dl>
- </div>
- </div>
- </div>
- </dd>
- <!-- setMatrixValue -->
- <!-- ===================================================== -->
-
- <dt> <code class=method-name><a id=DOM-CSSMatrix-multiply
- name=DOM-CSSMatrix-multiply>multiply</a></code>
-
- <dd>
- <div class=method> The <code>multiply</code> method returns a new
- CSSMatrix which is the result of this matrix multiplied by the
- passed matrix, with the passed matrix to the right. This matrix is
- not modified.
- <div class=parameters> <b>Parameters</b>
- <div class=paramtable>
- <dl>
- <dt> <code class=parameter-name>secondMatrix</code> of type
- <code>CSSMatrix</code>
-
- <dd> The matrix to multipy.<br>
- </dl>
- </div>
- </div>
- <!-- parameters -->
- <div class=return-value> <b>Return Value</b>
- <div class=returnvalue>
- <dl>
- <dt> <code>CSSMatrix</code>
-
- <dd> The result matrix.<br>
- </dl>
- </div>
- </div>
-
- <div> <b>No Exceptions</b></div>
- </div>
- </dd>
- <!-- multiply() -->
- <!-- ===================================================== -->
-
- <dt> <code class=method-name><a id=DOM-CSSMatrix-inverse
- name=DOM-CSSMatrix-inverse>inverse</a></code>
-
- <dd>
- <div class=method> The <code>inverse</code> method returns a new
- matrix which is the inverse of this matrix. This matrix is not
- modified.
- <div class=parameters> <b>No Parameters</b></div>
- <!-- parameters -->
- <div class=return-value> <b>Return Value</b>
- <div class=returnvalue>
- <dl>
- <dt> <code>CSSMatrix</code>
-
- <dd> The inverted matrix.<br>
- </dl>
- </div>
- </div>
-
- <div> <b>Exceptions</b>
- <div class=returnvalue>
- <dl>
- <dt> <code>NOT_SUPPORTED_ERROR</code>
-
- <dd> Thrown when the CSSMatrix can not be inverted.
- </dl>
- </div>
- </div>
- </div>
- <!-- ======================================================================================================= -->
- </dd>
- <!-- inverse() -->
- <!-- ===================================================== -->
-
- <dt> <code class=method-name><a id=DOM-CSSMatrix-translate
- name=DOM-CSSMatrix-translate>translate</a></code>
-
- <dd>
- <div class=method> The <code>translate</code> method returns a new
- matrix which is this matrix post multiplied by a translation matrix
- containing the passed values. If the z component is undefined, a 0
- value is used in its place. This matrix is not modified.
- <div class=parameters> <b>Parameters</b>
- <div class=paramtable>
- <dl>
- <dt> <code class=parameter-name>x</code> of type
- <code>float</code>
-
- <dd> The X component of the translation value.<br>
-
- <dt> <code class=parameter-name>y</code> of type
- <code>float</code>
-
- <dd> The Y component of the translation value.<br>
-
- <dt> <code class=parameter-name>z</code> of type
- <code>float</code>
-
- <dd> The (optional) Z component of the translation value.<br>
- </dl>
- </div>
- </div>
- <!-- parameters -->
- <div class=return-value> <b>Return Value</b>
- <div class=returnvalue>
- <dl>
- <dt> <code>CSSMatrix</code>
-
- <dd> The result matrix.<br>
- </dl>
- </div>
- </div>
-
- <div> <b>No Exceptions</b></div>
- </div>
- <!-- ======================================================================================================= -->
- </dd>
- <!-- translate() -->
- <!-- ===================================================== -->
-
- <dt> <code class=method-name><a id=DOM-CSSMatrix-scale
- name=DOM-CSSMatrix-scale>scale</a></code>
-
- <dd>
- <div class=method> The <code>scale</code> method returns a new matrix
- which is this matrix post multiplied by a scale matrix containing
- the passed values. If the z component is undefined, a 1 value is
- used in its place. If the y component is undefined, the x component
- value is used in its place. This matrix is not modified.
- <div class=parameters> <b>Parameters</b>
- <div class=paramtable>
- <dl>
- <dt> <code class=parameter-name>scaleX</code> of type
- <code>float</code>
-
- <dd> The X component of the scale value.<br>
-
- <dt> <code class=parameter-name>scaleY</code> of type
- <code>float</code>
-
- <dd> The (optional) Y component of the scale value.<br>
-
- <dt> <code class=parameter-name>scaleZ</code> of type
- <code>float</code>
-
- <dd> The (optional) Z component of the scale value.<br>
- </dl>
- </div>
- </div>
- <!-- parameters -->
- <div class=return-value> <b>Return Value</b>
- <div class=returnvalue>
- <dl>
- <dt> <code>CSSMatrix</code>
-
- <dd> The result matrix.<br>
- </dl>
- </div>
- </div>
-
- <div> <b>No Exceptions</b></div>
- </div>
- <!-- ======================================================================================================= -->
- </dd>
- <!-- scale() -->
- <!-- ===================================================== -->
-
- <dt> <code class=method-name><a id=DOM-CSSMatrix-rotate
- name=DOM-CSSMatrix-rotate>rotate</a></code>
-
- <dd>
- <div class=method> The <code>rotate</code> method returns a new
- matrix which is this matrix post multiplied by each of 3 rotation
- matrices about the major axes, first X, then Y, then Z. If the y and
- z components are undefined, the x value is used to rotate the object
- about the z axis, as though the vector (0,0,x) were passed. All
- rotation values are in degrees. This matrix is not modified.
- <div class=parameters> <b>Parameters</b>
- <div class=paramtable>
- <dl>
- <dt> <code class=parameter-name>rotX</code> of type
- <code>float</code>
-
- <dd> The X component of the rotation value, or the Z component if
- the rotY and rotZ parameters are undefined.<br>
-
- <dt> <code class=parameter-name>rotY</code> of type
- <code>float</code>
-
- <dd> The (optional) Y component of the rotation value.<br>
-
- <dt> <code class=parameter-name>rotZ</code> of type
- <code>float</code>
-
- <dd> The (optional) Z component of the rotation value.<br>
- </dl>
- </div>
- </div>
- <!-- parameters -->
- <div class=return-value> <b>Return Value</b>
- <div class=returnvalue>
- <dl>
- <dt> <code>CSSMatrix</code>
-
- <dd> The result matrix.<br>
- </dl>
- </div>
- </div>
-
- <div> <b>No Exceptions</b></div>
- </div>
- <!-- ======================================================================================================= -->
- </dd>
- <!-- rotate() -->
- <!-- ===================================================== -->
-
- <dt> <code class=method-name><a id=DOM-CSSMatrix-rotateAxisAngle
- name=DOM-CSSMatrix-rotateAxisAngle>rotateAxisAngle</a></code>
-
- <dd>
- <div class=method> The <code>rotateAxisAngle</code> method returns a
- new matrix which is this matrix post multiplied by a rotation matrix
- with the given axis and angle. The <a
- href="http://en.wikipedia.org/wiki/Right-hand_rule">right-hand
- rule</a> is used to determine the direction of rotation. All
- rotation values are in degrees. This matrix is not modified.
- <div class=parameters> <b>Parameters</b>
- <div class=paramtable>
- <dl>
- <dt> <code class=parameter-name>x</code> of type
- <code>float</code>
-
- <dd> The X component of the axis vector.<br>
-
- <dt> <code class=parameter-name>y</code> of type
- <code>float</code>
-
- <dd> The Y component of the axis vector.<br>
-
- <dt> <code class=parameter-name>z</code> of type
- <code>float</code>
-
- <dd> The Z component of the axis vector.<br>
-
- <dt> <code class=parameter-name>angle</code> of type
- <code>float</code>
-
- <dd> The angle of rotation about the axis vector, in degrees.<br>
- </dl>
- </div>
- </div>
- <!-- parameters -->
- <div class=return-value> <b>Return Value</b>
- <div class=returnvalue>
- <dl>
- <dt> <code>CSSMatrix</code>
-
- <dd> The result matrix.<br>
- </dl>
- </div>
- </div>
-
- <div> <b>No Exceptions</b></div>
- </div>
- </dd>
- <!-- rotateAxisAngle -->
- </dl>
- <!-- methods -->
- </dl>
- </dd>
- <!-- Interface CSSMatrix -->
- </dl>
- <!-- ============================================================ -->
-
- <h3 id=csstransformvalue-interface><span class=secno>10.2 </span> 10.2
- CSSTransformValue</h3>
-
- <dl>
- <dt> <b>Interface <i><a id=DOM-CSSTransformValue
- name=DOM-CSSTransformValue>CSSTransformValue</a></i></b>
-
- <dd>
- <p> The <code>CSSTransformValue</code> interface represents one transform
- function in the transform property. The <code>operationType</code>
- defines which operation is represented. The object also contains a list
- of values, which are the parameters of the function, in the same order
- in which they appear in the transform functions.</p>
-
- <dl>
- <dt> <b>IDL Definition</b>
-
- <dd>
- <div class=idl-code>
- <pre>
- interface CSSTransformValue : CSSValueList {
-
- // 2D OperationTypes
- const unsigned short CSS_TRANSLATE = 1;
- const unsigned short CSS_TRANSLATEX = 2;
- const unsigned short CSS_TRANSLATEY = 3;
- const unsigned short CSS_ROTATE = 4;
- const unsigned short CSS_SCALE = 5;
- const unsigned short CSS_SCALEX = 6;
- const unsigned short CSS_SCALEY = 7;
- const unsigned short CSS_SKEW = 8;
- const unsigned short CSS_SKEWX = 9;
- const unsigned short CSS_SKEWY = 10;
- const unsigned short CSS_MATRIX = 11;
-
- // 3D OperationTypes
- const unsigned short CSS_TRANSLATEZ = 12;
- const unsigned short CSS_TRANSLATE3D = 13;
- const unsigned short CSS_ROTATEX = 14;
- const unsigned short CSS_ROTATEY = 15;
- const unsigned short CSS_ROTATEZ = 16;
- const unsigned short CSS_ROTATE3D = 17;
- const unsigned short CSS_SCALEZ = 18;
- const unsigned short CSS_SCALE3D = 19;
- const unsigned short CSS_PERSPECTIVE = 20;
- const unsigned short CSS_MATRIX3D = 21;
-
- attribute unsigned short operationType;
-
- CSSMatrix getCSSMatrix() raises(DOMException);
- };
- </pre>
- </div>
- </dd>
- <!-- IDL -->
-
- <dt> <b>Attributes</b>
-
- <dd>
- <dl>
- <dt> <code class=attribute-name><a
- id=DOM-CSSTransformValue-operationType
- name=DOM-CSSTransformValue-operationType>operationType</a></code> of
- type <code>unsigned short</code>
-
- <dd> One of the listed operation types.<br>
- </dl>
- </dd>
- <!-- Attributes -->
-
- <dt> <b>Methods</b>
-
- <dd>
- <dl><!-- ===================================================== -->
-
- <dt> <code class=method-name><a id=DOM-CSSTransformValue-getCSSMatrix
- name=DOM-CSSTransformValue-getCSSMatrix>getCSSMatrix</a></code>
-
- <dd>
- <div class=method> The <code>getCSSMatrix</code> method returns a
- CSSMatrix object representing this transform.
- <div class=parameters> <b>No Parameters</b></div>
- <!-- parameters -->
- <div class=return-value> <b>Return Value</b>
- <div class=returnvalue>
- <dl>
- <dt> <code>CSSMatrix</code>
-
- <dd> The result matrix.
- </dl>
- </div>
- </div>
-
- <div> <b>Exceptions</b>
- <div class=returnvalue>
- <dl>
- <dt> <code>NOT_SUPPORTED_ERROR</code>
-
- <dd> Thrown when the CSSTranformValue can not be converted into a
- CSSMatrix, such as when the CSSTransformValue contains
- percentage units and is being called on an object with unknown
- dimensions.
- </dl>
- </div>
- </div>
- </div>
- </dd>
- <!-- setMatrixValue -->
- </dl>
- </dd>
- <!-- methods -->
- </dl>
- </dd>
- <!-- Interface CSSTransformValue -->
- </dl>
-
- <p> In addition to the interfaces listed above, the
- <code>getComputedStyle</code> method of the <code>Window</code> object has
- been updated. The <code><a href="#effects">transform</a></code> property
- of the style object returned by <code>getComputedStyle</code> contains a
- single CSSTransformValue with a type of CSS_MATRIX3D. The 16 parameters
- represent the 4x4 matrix that is the result of applying the individual
- functions listed in the <code><a href="#effects">transform</a></code>
- property.
-
- <h2 id=references><span class=secno>11 </span>References</h2>
-
- <h3 class=no-num id=normative-references>Normative references</h3>
- <!--begin-normative-->
- <!-- Sorted by label -->
-
- <dl class=bibliography>
- <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
- <!---->
- </dl>
- <!--end-normative-->
-
- <h3 class=no-num id=other-references>Other references</h3>
- <!--begin-informative-->
- <!-- Sorted by label -->
-
- <dl class=bibliography>
- <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
- <!---->
- </dl>
- <!--end-informative-->
-
- <h2 class=no-num id=property-index>Property index</h2>
- <!--begin-properties-->
-
- <table class=proptable>
- <thead>
- <tr>
- <th>Property
-
- <th>Values
-
- <th>Initial
-
- <th>Applies to
-
- <th>Inh.
-
- <th>Percentages
-
- <th>Media
-
- <tbody>
- <tr valign=baseline>
- <td><a class=property
- href="#backface-visibility">backface-visibility</a>
-
- <td>visible | hidden
-
- <td>visible
-
- <td>block-level and inline-level elements
-
- <td>no
-
- <td>N/A
-
- <td>visual
-
- <tr valign=baseline>
- <td><a class=property href="#perspective">perspective</a>
-
- <td>none | <number>
-
- <td>none
-
- <td>block-level and inline-level elements
-
- <td>no
-
- <td>N/A
-
- <td>visual
-
- <tr valign=baseline>
- <td><a class=property href="#perspective-origin">perspective-origin</a>
-
- <td>[ [ <percentage> | <length> | left | center | right ] [
- <percentage> | <length> | top | center | bottom ]? ] | [ [
- left | center | right ] || [ top | center | bottom ] ]
-
- <td>50% 50%
-
- <td>block-level and inline-level elements
-
- <td>no
-
- <td>refer to the size of the box itself
-
- <td>visual
-
- <tr valign=baseline>
- <td><a class=property href="#effects">transform</a>
-
- <td>none | <transform-function> [ <transform-function> ]*
-
- <td>none
-
- <td>block-level and inline-level elements
-
- <td>no
-
- <td>refer to the size of the element's box
-
- <td>visual
-
- <tr valign=baseline>
- <td><a class=property href="#transform-origin">transform-origin</a>
-
- <td>[ [ [ <percentage> | <length> | left | center | right ]
- [ <percentage> | <length> | top | center | bottom ]? ]
- <length> ] | [ [ [ left | center | right ] || [ top | center |
- bottom ] ] <length> ]
-
- <td>50% 50% 0
-
- <td>block-level and inline-level elements
-
- <td>no
-
- <td>refer to the size of the element's box
-
- <td>visual
-
- <tr valign=baseline>
- <td><a class=property href="#transform-style">transform-style</a>
-
- <td>flat | preserve-3d
-
- <td>flat
-
- <td>block-level and inline-level elements
-
- <td>no
-
- <td>N/A
-
- <td>visual
- </table>
- <!--end-properties-->
-
- <h2 class=no-num id=index>Index</h2>
- <!--begin-index-->
-
- <ul class=indexlist>
- <li>backface-visibility, <a href="#backface-visibility"
- title=backface-visibility><strong>7</strong></a>
-
- <li>perspective, <a href="#perspective"
- title=perspective><strong>5</strong></a>
-
- <li>perspective-origin, <a href="#perspective-origin"
- title=perspective-origin><strong>6</strong></a>
-
- <li>transform, <a href="#effects" title=transform><strong>2</strong></a>
-
- <li>transform-origin, <a href="#transform-origin"
- title=transform-origin><strong>3</strong></a>
-
- <li>transform-style, <a href="#transform-style"
- title=transform-style><strong>4</strong></a>
- </ul>
- <!--end-index-->
-</html>
-<!-- Keep this comment at the end of the file
-Local variables:
-mode: sgml
-sgml-default-doctype-name:"html"
-sgml-minimize-attributes:t
-End:
--->
diff --git a/WebKitSite/specs/CSSVisualEffects/css3-3d-transforms/Overview.src.html b/WebKitSite/specs/CSSVisualEffects/css3-3d-transforms/Overview.src.html
deleted file mode 100644
index 23a867a..0000000
--- a/WebKitSite/specs/CSSVisualEffects/css3-3d-transforms/Overview.src.html
+++ /dev/null
@@ -1,1456 +0,0 @@
-<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01//EN'
- 'http://www.w3.org/TR/html4/strict.dtd'>
-
-<html lang="en">
-<head>
- <title>CSS 3D Transforms Module Level 3</title>
- <link rel="stylesheet" type="text/css" href="default.css">
- <style type="text/css">
- .rhs { white-space: pre-wrap; }
- code { font-size: inherit; }
- #box-shadow-samples td { background: white; color: black; }
- </style>
- <link rel="stylesheet" type="text/css"
- href="http://www.w3.org/StyleSheets/TR/W3C-WD.css">
-</head>
-
-<body>
-
-<div class="head">
-<!--logo-->
-
-<h1>CSS 3D Transforms Module Level 3</h1>
-
-<h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2>
-<dl>
- <dt>This version:
- <dd>
- <a href="[VERSION]">http://dev.w3.org/csswg/css3-3d-transforms/</a>
- <!--http://www.w3.org/TR/[YEAR]/WD-[SHORTNAME]-[CDATE]-->
- <dt>Latest version:
- <dd><a
- href="http://www.w3.org/TR/css3-3d-transforms/">[LATEST]</a>
- <dt>Previous version:
- <dd><a href="http://www.w3.org/TR/2009/WD-css3-3d-transforms-20090320/">
- http://www.w3.org/TR/2009/WD-css3-3d-transforms-20090320/</a>
- <dt id="editors-list">Editors:
- <dd><a href="mailto:dino at apple.com">Dean Jackson</a> (<a
- href="http://www.apple.com/">Apple Inc</a>)
- <dd><a href="mailto:hyatt at apple.com">David Hyatt</a> (<a
- href="http://www.apple.com/">Apple Inc</a>)
- <dd><a href="mailto:cmarrin at apple.com">Chris Marrin</a> (<a
- href="http://www.apple.com/">Apple Inc</a>)
-</dl>
-
-<!--copyright-->
-
-<hr title="Separator for header">
-</div>
-
-<h2 class="no-num no-toc" id="abstract">Abstract</h2>
-
-<p>CSS 3D Transforms extends CSS Transforms to allow elements rendered by CSS to be transformed
- in three-dimensional space.
-
-<h2 class="no-num no-toc" id="status">Status of this document</h2>
-<!--status-->
-
-
-<h2 class="no-num no-toc" id="contents">Table of contents</h2>
-<!--toc-->
-
-
-<h2 id="introduction">Introduction</h2>
-
-<p><em>This section is not normative.</em>
-
- <p>
- This is an enhancement to the CSS
- Transforms specification which provides transforms in three
- dimensions. It should be read in conjunction with that specification.
- </p>
- <p>
- This coordinate space can be modified with the <span
- class="prop-name">'transform'</span> property. Using transform, elements
- can be translated, rotated and scaled in two or three dimensional space.
- A perspective transform can also be applied to give a sense of depth to
- the way elements are displayed. In three
- dimensions, a Z axis is added, with positive z values conceptually
- rising perpendicularly out of the window toward the user and negative z
- values falling into the window away from the user.
- </p>
- <p>
- Any value other than 'none' for the transform results in the creation of
- both a stacking context and a containing block. The object acts as
- though position: relative has been specified, but also acts as a
- containing block for fixed positioned descendants. The position on the Z
- axis of a transformed element does not affect the order within a
- stacking context. With elements at the same z-index, objects are drawn
- in order of increasing z position.
- </p>
- <p>
- Note that while <span class="prop-name">'transform'</span> uses a
- three-dimensional coordinate system, the elements themselves are not
- three-dimensional objects. Instead, they exist on a two-dimensional
- plane (a flat surface) and have no depth.
- </p>
- <h2 id="transform-property">
- The <span class="prop-name">'transform'</span> Property
- </h2>
- <p>
- A 2D or 3D transformation is applied to an element through the <span
- class="prop-name">'transform'</span> property. This property contains a
- list of <a href="#transform-functions">transform functions</a>. The
- final transformation value for an element is obtained by performing a
- matrix concatenation of each entry in the list. The set of transform
- functions is similar to those allowed by SVG. There are additional
- functions to support 3D transformations.
- </p>
- <table class="propdef">
- <tbody>
- <tr>
- <td>
- <em>Name:</em>
- </td>
- <td>
- <dfn id="effects">transform</dfn>
- </td>
- </tr>
- <tr>
- <td>
- <em>Value:</em>
- </td>
- <td>
- none | <transform-function> [ <transform-function> ]*
- </td>
- </tr>
- <tr>
- <td>
- <em>Initial:</em>
- </td>
- <td>
- none
- </td>
- </tr>
- <tr>
- <td>
- <em>Applies to:</em>
- </td>
- <td>
- block-level and inline-level elements
- </td>
- </tr>
- <tr>
- <td>
- <em>Inherited:</em>
- </td>
- <td>
- no
- </td>
- </tr>
- <tr>
- <td>
- <em>Percentages:</em>
- </td>
- <td>
- refer to the size of the element's box
- </td>
- </tr>
- <tr>
- <td>
- <em>Media:</em>
- </td>
- <td>
- visual
- </td>
- </tr>
- <tr>
- <td>
- <em>Computed value:</em>
- </td>
- <td>
- Same as specified value.
- </td>
- </tr>
- </tbody>
- </table><!-- ======================================================================================================= -->
- <h2 id="transform-origin-property">
- The <span class="prop-name">'transform-origin'</span> Property
- </h2>
- <p>
- The <span class="prop-name">'transform-origin'</span> property
- establishes the origin of transformation for an element. This property
- is applied by first translating the element by the negated value of the
- property, then applying the element's transform, then translating by the
- property value. This effectively moves the desired transformation origin
- of the element to (0,0,0) in the local coordinate system, then applies
- the element's transform, then moves the element back to its original
- position.
- </p>
- <table class="propdef">
- <tbody>
- <tr>
- <td>
- <em>Name:</em>
- </td>
- <td>
- <dfn id="transform-origin">transform-origin</dfn>
- </td>
- </tr>
- <tr>
- <td>
- <em>Value:</em>
- </td>
- <td>
- [ [ [ <percentage> | <length> | left | center | right ] [
- <percentage> | <length> | top | center | bottom ]? ] <length> ] | [ [ [ left |
- center | right ] || [ top | center | bottom ] ] <length> ]
- </td>
- </tr>
- <tr>
- <td>
- <em>Initial:</em>
- </td>
- <td>
- 50% 50% 0
- </td>
- </tr>
- <tr>
- <td>
- <em>Applies to:</em>
- </td>
- <td>
- block-level and inline-level elements
- </td>
- </tr>
- <tr>
- <td>
- <em>Inherited:</em>
- </td>
- <td>
- no
- </td>
- </tr>
- <tr>
- <td>
- <em>Percentages:</em>
- </td>
- <td>
- refer to the size of the element's box
- </td>
- </tr>
- <tr>
- <td>
- <em>Media:</em>
- </td>
- <td>
- visual
- </td>
- </tr>
- <tr>
- <td>
- <em>Computed value:</em>
- </td>
- <td>
- For <length> the absolute value, otherwise a percentage
- </td>
- </tr>
- </tbody>
- </table>
- <!-- ======================================================================================================= -->
- <h2 id="transform-style-property">
- The <span class="prop-name">'transform-style'</span> Property
- </h2>
- <p>
- The <span class="prop-name">'transform-style'</span> property defines how nested elements are rendered in 3D space. If the <span class="prop-name">'transform-style'</span> is <span class="prop-value">'flat'</span>, all children of this element are rendered flattened into the 2D plane of the element. Therefore, rotating the element about the X or Y axes will cause children positioned at positive or negative Z positions to appear on the element's plane, rather than in front of or behind it. If the <span class="prop-name">'transform-style'</span> is <span class="prop-value">'preserve-3d'</span>, this flattening is not performed, so children maintain their position in 3D space.
- </p>
- <p>
- This flattening takes place at each element, so preserving a hierarchy
- of elements in 3D space requires that each ancestor in the hierarchy
- have the value <span class="prop-value">'preserve-3d'</span> for <span
- class="prop-name">'transform-style'</span>. But since <span
- class="prop-name">'transform-style'</span> affects only an element's
- children, the leaf nodes in a hierarchy do not require the perspective
- style.
- </p>
- <table class="propdef">
- <tbody>
- <tr>
- <td>
- <em>Name:</em>
- </td>
- <td>
- <dfn id="transform-style">transform-style</dfn>
- </td>
- </tr>
- <tr>
- <td>
- <em>Value:</em>
- </td>
- <td>
- flat | preserve-3d
- </td>
- </tr>
- <tr>
- <td>
- <em>Initial:</em>
- </td>
- <td>
- flat
- </td>
- </tr>
- <tr>
- <td>
- <em>Applies to:</em>
- </td>
- <td>
- block-level and inline-level elements
- </td>
- </tr>
- <tr>
- <td>
- <em>Inherited:</em>
- </td>
- <td>
- no
- </td>
- </tr>
- <tr>
- <td>
- <em>Percentages:</em>
- </td>
- <td>
- N/A
- </td>
- </tr>
- <tr>
- <td>
- <em>Media:</em>
- </td>
- <td>
- visual
- </td>
- </tr>
- <tr>
- <td>
- <em>Computed value:</em>
- </td>
- <td>
- Same as specified value.
- </td>
- </tr>
- </tbody>
- </table>
-
- <p>
- For some effects, the author will have to ensure that an ancestor
- element to a subtree using <span class="prop-value">'preserve-3d'</span>
- has a <span class="prop-name">'transform-style'</span> of <span
- class="prop-value">'flat'</span> (or the default). Otherwise, the
- elements in the 3D tree may be located behind ancestor elements and,
- thus, invisible (hidden behind an ancestor's background).
- </p>
-
- <p>
- Note that while 'preserve-3d' can be specified on an element, the effect may not
- be possible. Elements that have <span class="prop-name">'overflow'</span> set to
- <span class="prop-value">'hidden'</span> are unable to keep their children in 3D.
- In this case the element will behave as if the property was set to
- <span class="prop-value">'flat'</span>.
- </p>
-
- <div class="issue">
- Does transform-style: preserve-3d need to establish a stacking context
- and containing block like transform does?
- </div><!-- ======================================================================================================= -->
- <h2 id="perspective-property">
- The <span class="prop-name">'perspective'</span> Property
- </h2>
- <p>
- The <span class="prop-name">'perspective'</span> property applies the
- same transform as the <span
- class="prop-value">perspective(<number>)</span> transform
- function, except that it applies only to the positioned or transformed
- children of the element, not to the transform on the element itself.
- <p>
- If the value is <span
- class="prop-value">'none'</span>, less than or equal to 0 no perspective transform is applied.
- </p>
- <p>
- The use of this property with any value other than 'none' establishes a
- stacking context. It also establishes a containing block (somewhat
- similar to position:relative), just like the 'transform' property does.
- </p>
- <table class="propdef">
- <tbody>
- <tr>
- <td>
- <em>Name:</em>
- </td>
- <td>
- <dfn id="perspective">perspective</dfn>
- </td>
- </tr>
- <tr>
- <td>
- <em>Value:</em>
- </td>
- <td>
- none | <number>
- </td>
- </tr>
- <tr>
- <td>
- <em>Initial:</em>
- </td>
- <td>
- none
- </td>
- </tr>
- <tr>
- <td>
- <em>Applies to:</em>
- </td>
- <td>
- block-level and inline-level elements
- </td>
- </tr>
- <tr>
- <td>
- <em>Inherited:</em>
- </td>
- <td>
- no
- </td>
- </tr>
- <tr>
- <td>
- <em>Percentages:</em>
- </td>
- <td>
- N/A
- </td>
- </tr>
- <tr>
- <td>
- <em>Media:</em>
- </td>
- <td>
- visual
- </td>
- </tr>
- <tr>
- <td>
- <em>Computed value:</em>
- </td>
- <td>
- Same as specified value.
- </td>
- </tr>
- </tbody>
- </table><!-- ======================================================================================================= -->
- <h2 id="perspective-origin-property">
- The <span class="prop-name">'perspective-origin'</span> Property
- </h2>
- <p>
- The <span class="prop-name">'perspective-origin'</span> property
- establishes the origin for the <em>perspective</em> property. It
- effectively sets the X and Y position at which the viewer appears to be
- looking at the children of the element.
- </p>
- <table class="propdef">
- <tbody>
- <tr>
- <td>
- <em>Name:</em>
- </td>
- <td>
- <dfn id="perspective-origin">perspective-origin</dfn>
- </td>
- </tr>
- <tr>
- <td>
- <em>Value:</em>
- </td>
- <td>
- [ [ <percentage> | <length> | left | center | right ] [
- <percentage> | <length> | top | center | bottom ]? ] | [ [ left |
- center | right ] || [ top | center | bottom ] ]
- </td>
- </tr>
- <tr>
- <td>
- <em>Initial:</em>
- </td>
- <td>
- 50% 50%
- </td>
- </tr>
- <tr>
- <td>
- <em>Applies to:</em>
- </td>
- <td>
- block-level and inline-level elements
- </td>
- </tr>
- <tr>
- <td>
- <em>Inherited:</em>
- </td>
- <td>
- no
- </td>
- </tr>
- <tr>
- <td>
- <em>Percentages:</em>
- </td>
- <td>
- refer to the size of the box itself
- </td>
- </tr>
- <tr>
- <td>
- <em>Media:</em>
- </td>
- <td>
- visual
- </td>
- </tr>
- <tr>
- <td>
- <em>Computed value:</em>
- </td>
- <td>
- Same as specified value.
- </td>
- </tr>
- </tbody>
- </table><!-- ======================================================================================================= -->
- <h2 id="backface-visibility-property">
- The <span class="prop-name">'backface-visibility'</span> Property
- </h2>
- <p>
- The <span class="prop-name">'backface-visibility'</span> property
- determines whether or not the "back" side of a transformed element is
- visible when facing the viewer. With an identity transform, the front
- side of an element faces the viewer. Applying a rotation about Y of 180
- degrees (for instance) would cause the back side of the element to face
- the viewer.
- </p>
- <p>
- This property is useful when you place two elements back-to-back, as you
- would to create a playing card. Without this property, the front and
- back elements could switch places at times during an animation to flip
- the card. Another example is creating a box out of 6 elements, but where
- you want to see the inside faces of the box. This is useful when
- creating the backdrop for a 3 dimensional stage.
- </p>
- <table class="propdef">
- <tbody>
- <tr>
- <td>
- <em>Name:</em>
- </td>
- <td>
- <dfn id="backface-visibility">backface-visibility</dfn>
- </td>
- </tr>
- <tr>
- <td>
- <em>Value:</em>
- </td>
- <td>
- visible | hidden
- </td>
- </tr>
- <tr>
- <td>
- <em>Initial:</em>
- </td>
- <td>
- visible
- </td>
- </tr>
- <tr>
- <td>
- <em>Applies to:</em>
- </td>
- <td>
- block-level and inline-level elements
- </td>
- </tr>
- <tr>
- <td>
- <em>Inherited:</em>
- </td>
- <td>
- no
- </td>
- </tr>
- <tr>
- <td>
- <em>Percentages:</em>
- </td>
- <td>
- N/A
- </td>
- </tr>
- <tr>
- <td>
- <em>Media:</em>
- </td>
- <td>
- visual
- </td>
- </tr>
- <tr>
- <td>
- <em>Computed value:</em>
- </td>
- <td>
- Same as specified value.
- </td>
- </tr>
- </tbody>
- </table><!-- ======================================================================================================= -->
- <h2 id="transform-functions">
- The Transformation Functions
- </h2>
- <p>
- The value of the <span class="prop-name">transform</span> property is a
- list of <transform-functions>, applied in the order provided. The
- individual transform functions are separated by whitespace. The
- following is a list of allowed transform functions. In this list the
- type <translation-value> is defined as a <length> or
- <percentage> value, and the <angle> type is defined by <a
- href="http://www.w3.org/TR/css3-values/">CSS Values and Units.</a>
- </p>
- <dl>
- <dt>
- <span class="prop-value">matrix(<number>, <number>, <number>, <number>, <number>, <number>)</span>
- </dt>
- <dd>
- specifies a 2D transformation in the form of a <a href="http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined">transformation matrix</a> of six values. <span class="prop-value">matrix(a,b,c,d,e,f)</span> is equivalent to matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, e, f, 0, 1).
- </dd>
- <dt>
- <span class="prop-value">matrix3d(<number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>)</span>
- </dt>
- <dd>
- specifies a 3D transformation as a 4x4 homogeneous matrix of 16 values in column-major order.
- </dd>
- <dt>
- <span class="prop-value">translate(<translation-value>[, <translation-value>])</span>
- </dt>
- <dd>
- specifies a <a href="http://www.w3.org/TR/SVG/coords.html#TranslationDefined">2D translation</a> by the vector [tx, ty], where tx is the first translation-value parameter and ty is the optional second translation-value parameter. If <em><ty></em> is not provided, ty has zero as a value.
- </dd>
- <dt>
- <span class="prop-value">translate3d(<translation-value>, <translation-value>, <translation-value>)</span>
- </dt>
- <dd>
- specifies a 3D translation by the vector [tx,ty,tz], with tx, ty and tz being the first, second and third translation-value parameters respectively.
- </dd>
- <dt>
- <span class="prop-value">translateX(<translation-value>)</span>
- </dt>
- <dd>
- specifies a <a href="http://www.w3.org/TR/SVG/coords.html#TranslationDefined">translation</a> by the given amount in the X direction.
- </dd>
- <dt>
- <span class="prop-value">translateY(<translation-value>)</span>
- </dt>
- <dd>
- specifies a <a href="http://www.w3.org/TR/SVG/coords.html#TranslationDefined">translation</a> by the given amount in the Y direction.
- </dd>
- <dt>
- <span class="prop-value">translateZ(<translation-value>)</span>
- </dt>
- <dd>
- specifies a <a href="http://www.w3.org/TR/SVG/coords.html#TranslationDefined">translation</a> by the given amount in the Z direction. Note that percentage values are not allowed in the translateZ translation-value, and if present are evaluated as 0.
- </dd>
- <dt>
- <span class="prop-value">scale(<number>[, <number>])</span>
- </dt>
- <dd>
- specifies a <a href="http://www.w3.org/TR/SVG/coords.html#ScalingDefined">2D scale</a> operation by the [sx,sy] scaling vector described by the 2 parameters. If the second parameter is not provided, it is takes a value equal to the first.
- </dd>
- <dt>
- <span class="prop-value">scale3d(<number>, <number>, <number>)</span>
- </dt>
- <dd>
- specifies a 3D scale operation by the [sx,sy,sz] scaling vector described by the 3 parameters.
- </dd>
- <dt>
- <span class="prop-value">scaleX(<number>)</span>
- </dt>
- <dd>
- specifies a scale operation using the [sx,1,1] scaling vector, where sx is given as the parameter.
- </dd>
- <dt>
- <span class="prop-value">scaleY(<number>)</span>
- </dt>
- <dd>
- specifies a scale operation using the [1,sy,1] scaling vector, where sy is given as the parameter.
- </dd>
- <dt>
- <span class="prop-value">scaleZ(<number>)</span>
- </dt>
- <dd>
- specifies a scale operation using the [1,1,sz] scaling vector, where sz is given as the parameter.
- </dd>
- <dt>
- <span class="prop-value">rotate(<angle>)</span>
- </dt>
- <dd>
- specifies a <a href="http://www.w3.org/TR/SVG/coords.html#RotationDefined">2D rotation</a> by the angle specified in the parameter about the origin of the element, as defined by the <em>transform-origin</em> property.
- </dd>
- <dt>
- <span class="prop-value">rotate3d(<number>, <number>, <number>, <angle>)</span>
- </dt>
- <dd>
- specifies a clockwise 3D rotation by the angle specified in last
- parameter about the [x,y,z] direction vector described by the first 3
- parameters. If the direction vector is not of unit length, it will be
- normalized. A direction vector that cannot be normalized, such as [0,
- 0, 0], will cause the rotation to not be applied. This function is
- equivalent to <code>matrix3d(1 + (1-cos(angle))*(x*x-1), -z*sin(angle)+(1-cos(angle))*x*y, y*sin(angle)+(1-cos(angle))*x*z, 0, z*sin(angle)+(1-cos(angle))*x*y, 1 + (1-cos(angle))*(y*y-1), -x*sin(angle)+(1-cos(angle))*y*z, 0, -y*sin(angle)+(1-cos(angle))*x*z, x*sin(angle)+(1-cos(angle))*y*z, 1 + (1-cos(angle))*(z*z-1), 0, 0, 0, 0, 1)</code>.</dd>
- <dt>
- <span class="prop-value">rotateX(<angle>)</span>
- </dt>
- <dd>
- specifies a clockwise rotation by the given angle about the X axis.
- </dd>
- <dt>
- <span class="prop-value">rotateY(<angle>)</span>
- </dt>
- <dd>
- specifies a clockwise rotation by the given angle about the Y axis.
- </dd>
- <dt>
- <span class="prop-value">rotateZ(<angle>)</span>
- </dt>
- <dd>
- specifies a clockwise rotation by the given angle about the Z axis.
- </dd>
- <dt>
- <span class="prop-value">skewX(<angle>)</span>
- </dt>
- <dd>
- specifies a <a href="http://www.w3.org/TR/SVG/coords.html#SkewXDefined">skew transformation along the X axis</a> by the given angle.
- </dd>
- <dt>
- <span class="prop-value">skewY(<angle>)</span>
- </dt>
- <dd>
- specifies a <a href="http://www.w3.org/TR/SVG/coords.html#SkewYDefined">skew transformation along the Y axis</a> by the given angle.
- </dd>
- <dt>
- <span class="prop-value">skew(<angle> [, <angle>])</span>
- </dt>
- <dd>
- specifies a <a
- href="http://www.w3.org/TR/SVG/coords.html#SkewXDefined">skew
- transformation along the X and Y axes</a>. The first angle parameter
- specifies the skew on the X axis. The second angle parameter specifies
- the skew on the Y axis. If the second parameter is not given then a
- value of 0 is used for the Y angle (ie. no skew on the Y axis).
- </dd>
- <dt>
- <span class="prop-value">perspective(<number>)</span>
- </dt>
- <dd>
- specifies a perspective projection matrix. This matrix maps a <em>viewing cube</em> onto a pyramid whose
- base is infinitely far away from the viewer and whose peak represents the viewer's position. The
- viewable area is the region bounded by the four edges of the viewport (the portion of the browser
- window used for rendering the webpage between the viewer's position and a point at a distance of
- infinity from the viewer). The <em>depth</em>, given as the parameter to the function, represents the
- distance of the z=0 plane from the viewer. Lower values give a more flattened pyramid and
- therefore a more pronounced perspective effect. The value is given in pixels, so a value of 1000
- gives a moderate amount of foreshortening and a value of 200 gives an extreme amount. The matrix
- is computed by starting with an identity matrix and replacing the value at row 3, column 4 with
- the value -1/depth. The value for depth must be greater than zero, otherwise the function is invalid.
- </dd>
- </dl>
- <!-- ======================================================================================================= -->
-
- <h2 id="animation">
- Transitions and animations between transform values
- </h2>
-
- <p>
- When animating or transitioning the value of a transform property
- the rules described below are applied. The 'from' transform is
- the transform at the start of the transition or current keyframe. The
- 'end' transform is the transform at the end of the transition or
- current keyframe.
- </p>
-
- <ul>
- <li>
- If the 'from' and 'to' transforms are both single functions
- of the same type:
- <ul>
- <li>
- For translate, translate3d, translateX, translateY, translateZ, scale,
- scale3d, scaleX, scaleY, scaleZ, rotate, rotateX, rotateY, rotateZ, skewX
- and skewY functions:
- <ul>
- <li>
- the individual components of the function are
- interpolated numerically.
- </li>
- </ul>
- </li>
- <li>
- For perspective, matrix, matrix3d and rotate3d:
- <ul>
- <li>
- the values are first converted to a 4x4 matrix, then
- decomposed using <a
- href="http://tog.acm.org/GraphicsGems/gemsii/unmatrix.c">the
- method described by unmatrix</a> into separate translation,
- scale, rotation, skew and perspective matrices, then each
- decomposed matrix is interpolated numerically, and finally
- combined in order to produce a resulting 4x4 matrix.
- </li>
- </ul>
- </li>
- </ul>
- </li>
- <li>
- If both the 'from' and 'to' transforms are "none":
- <ul>
- <li>
- There is no interpolation necessary
- </li>
- </ul>
- </li>
- <li>
- If one of the 'from' or 'to' transforms is "none":
- <ul>
- <li>
- The 'none' is replaced by an equivalent identity function list for
- the corresponding transform function list.
- <p>
- For example, if the 'from' transform is "scale(2)" and the 'to'
- transform is "none" then the value "scale(1)" will be used as the
- 'to' value, and animation will proceed using the rule above.
- Similarly, if the 'from' transform is "none" and the 'to' transform
- is "scale(2) rotate(50deg)" then the animation will execute as
- if the 'from' value is "scale(1) rotate(0)".
- </p>
- <p>
- The identity functions are translate(0), translate3d(0, 0, 0),
- translateX(0), translateY(0), translateZ(0), scale(1), scale3d(1, 1, 1),
- scaleX(1), scaleY(1), scaleZ(1), rotate(0), rotate3d(1, 1, 1, 0),
- rotateX(0), rotateY(0), rotateZ(0), skewX(0), skewY(0),
- matrix(1, 0, 0, 1, 0, 0) and
- matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1).
- </p>
- </li>
- </ul>
- </li>
- <li>
- If both the 'from' and 'to' transforms have the same number of
- transform functions and corresponding functions in each transform
- list are of the same type:
- <ul>
- <li>
- Each transform function is animated with its corresponding
- destination function in isolation using the rules described above.
- The individual values are then applied as a list to produce
- resulting transform value.
- </li>
- </ul>
- </li>
- <li>
- Otherwise:
- <ul>
- <li>
- The transform function lists are each converted into the
- equivalent matrix3d value and animation proceeds using the rule
- for a single function above.
- </li>
- </ul>
- </li>
- </ul>
-
- <!-- ======================================================================================================= -->
- <h2 id="dom-interfaces">
- DOM Interfaces
- </h2>
- <p>
- This section describes the interfaces and functionality added to the DOM to support runtime access to the functionality described above.
- </p>
-
- <!-- ============================================================ -->
-
- <h3 id="cssmatrix-interface">
- 10.1 CSSMatrix
- </h3>
-
- <dl>
- <dt>
- <b>Interface <i><a id="DOM-CSSMatrix" name='DOM-CSSMatrix'>CSSMatrix</a></i></b>
- </dt>
- <dd>
- <p>
- The <code>CSSMatrix</code> interface represents a 4x4 homogeneous matrix.
- </p>
- <dl>
-
- <dt>
- <b>IDL Definition</b>
- </dt>
- <dd>
- <div class='idl-code'>
- <pre>
- interface CSSMatrix {
- attribute float m11;
- attribute float m12;
- attribute float m13;
- attribute float m14;
- attribute float m21;
- attribute float m22;
- attribute float m23;
- attribute float m24;
- attribute float m31;
- attribute float m32;
- attribute float m33;
- attribute float m34;
- attribute float m41;
- attribute float m42;
- attribute float m43;
- attribute float m44;
-
- void setMatrixValue(in DOMString string) raises(DOMException);
- CSSMatrix multiply(in CSSMatrix secondMatrix);
- CSSMatrix inverse() raises(DOMException);
- CSSMatrix translate(in float x, in float y, in float z);
- CSSMatrix scale(in float scaleX, in float scaleY, in float scaleZ);
- CSSMatrix rotate(in float rotX, in float rotY, in float rotZ);
- CSSMatrix rotateAxisAngle(in float x, in float y, in float z, in float angle);
- };</pre>
- </div><br>
- </dd> <!-- IDL -->
-
- <dt>
- <b>Attributes</b>
- </dt>
- <dd>
- <dl>
- <dt>
- <code class='attribute-name'><a id="DOM-CSSMatrix-matrix" name='DOM-CSSMatrix-matrix'>m11-m44</a></code> of type <code>float</code>
- </dt>
- <dd>
- Each of these attributes represents one of the values in the 4x4 matrix. For instance m12 represents the value in the 2nd
- column of the first row.<br>
- </dd>
- </dl>
- </dd> <!-- Attributes -->
-
- <dt>
- <b>Methods</b>
- </dt>
- <dd>
- <dl>
-
- <!-- ===================================================== -->
- <dt>
- <code class='method-name'><a id="DOM-CSSMatrix-setMatrixValue" name='DOM-CSSMatrix-setMatrixValue'>setMatrixValue</a></code>
- </dt>
- <dd>
- <div class='method'>
- The <code>setMatrixValue</code> method replaces the existing matrix with one computed from parsing the passed string
- as though it had been assigned to the transform property in a CSS style rule.
- <div class='parameters'>
- <b>Parameters</b>
- <div class='paramtable'>
- <dl>
- <dt>
- <code class='parameter-name'>string</code> of type <code>DOMString</code>
- </dt>
- <dd>
- The string to parse.<br>
- </dd>
- </dl>
- </div>
- </div><!-- parameters -->
- <div class='return-value'>
- <b>No Return Value</b>
- </div>
- <div>
- <b>Exceptions</b>
- <div class='returnvalue'>
- <dl>
- <dt>
- <code>SYNTAX_ERR</code>
- </dt>
- <dd>
- Thrown when the provided string can not be
- parsed into a CSSMatrix.
- </dd>
- </dl>
- </div>
- </div>
- </div>
- </dd> <!-- setMatrixValue -->
-
- <!-- ===================================================== -->
- <dt>
- <code class='method-name'><a id="DOM-CSSMatrix-multiply" name='DOM-CSSMatrix-multiply'>multiply</a></code>
- </dt>
- <dd>
- <div class='method'>
- The <code>multiply</code> method returns a new CSSMatrix which is the result of this matrix multiplied by the passed matrix, with the passed matrix to the right. This matrix is not modified.
- <div class='parameters'>
- <b>Parameters</b>
- <div class='paramtable'>
- <dl>
- <dt>
- <code class='parameter-name'>secondMatrix</code> of type <code>CSSMatrix</code>
- </dt>
- <dd>
- The matrix to multipy.<br>
- </dd>
- </dl>
- </div>
- </div><!-- parameters -->
- <div class='return-value'>
- <b>Return Value</b>
- <div class='returnvalue'>
- <dl>
- <dt>
- <code>CSSMatrix</code>
- </dt>
- <dd>
- The result matrix.<br>
- </dd>
- </dl>
- </div>
- </div>
- <div>
- <b>No Exceptions</b>
- </div>
- </div>
- </dd> <!-- multiply() -->
-
- <!-- ===================================================== -->
- <dt>
- <code class='method-name'><a id="DOM-CSSMatrix-inverse" name='DOM-CSSMatrix-inverse'>inverse</a></code>
- </dt>
- <dd>
- <div class='method'>
- The <code>inverse</code> method returns a new matrix which is the inverse of this matrix. This matrix is not modified.
- <div class='parameters'>
- <b>No Parameters</b>
- </div><!-- parameters -->
- <div class='return-value'>
- <b>Return Value</b>
- <div class='returnvalue'>
- <dl>
- <dt>
- <code>CSSMatrix</code>
- </dt>
- <dd>
- The inverted matrix.<br>
- </dd>
- </dl>
- </div>
- </div>
- <div>
- <b>Exceptions</b>
- <div class='returnvalue'>
- <dl>
- <dt>
- <code>NOT_SUPPORTED_ERROR</code>
- </dt>
- <dd>
- Thrown when the CSSMatrix can not be
- inverted.
- </dd>
- </dl>
- </div>
- </div>
- </div><!-- ======================================================================================================= -->
- </dd> <!-- inverse() -->
-
- <!-- ===================================================== -->
- <dt>
- <code class='method-name'><a id="DOM-CSSMatrix-translate" name='DOM-CSSMatrix-translate'>translate</a></code>
- </dt>
- <dd>
- <div class='method'>
- The <code>translate</code> method returns a new matrix which is this matrix post multiplied by a translation matrix containing the passed values. If the z component is undefined, a 0 value is used in its place. This matrix is not modified.
- <div class='parameters'>
- <b>Parameters</b>
- <div class='paramtable'>
- <dl>
- <dt>
- <code class='parameter-name'>x</code> of type <code>float</code>
- </dt>
- <dd>
- The X component of the translation value.<br>
- </dd>
- <dt>
- <code class='parameter-name'>y</code> of type <code>float</code>
- </dt>
- <dd>
- The Y component of the translation value.<br>
- </dd>
- <dt>
- <code class='parameter-name'>z</code> of type <code>float</code>
- </dt>
- <dd>
- The (optional) Z component of the translation value.<br>
- </dd>
- </dl>
- </div>
- </div><!-- parameters -->
- <div class='return-value'>
- <b>Return Value</b>
- <div class='returnvalue'>
- <dl>
- <dt>
- <code>CSSMatrix</code>
- </dt>
- <dd>
- The result matrix.<br>
- </dd>
- </dl>
- </div>
- </div>
- <div>
- <b>No Exceptions</b>
- </div>
- </div><!-- ======================================================================================================= -->
- </dd> <!-- translate() -->
-
- <!-- ===================================================== -->
- <dt>
- <code class='method-name'><a id="DOM-CSSMatrix-scale" name='DOM-CSSMatrix-scale'>scale</a></code>
- </dt>
- <dd>
- <div class='method'>
- The <code>scale</code> method returns a new matrix which is this matrix post multiplied by a scale matrix containing the passed values. If the z component is undefined, a 1 value is used in its place. If the y component is undefined, the x component value is used in its place. This matrix is not modified.
- <div class='parameters'>
- <b>Parameters</b>
- <div class='paramtable'>
- <dl>
- <dt>
- <code class='parameter-name'>scaleX</code> of type <code>float</code>
- </dt>
- <dd>
- The X component of the scale value.<br>
- </dd>
- <dt>
- <code class='parameter-name'>scaleY</code> of type <code>float</code>
- </dt>
- <dd>
- The (optional) Y component of the scale value.<br>
- </dd>
- <dt>
- <code class='parameter-name'>scaleZ</code> of type <code>float</code>
- </dt>
- <dd>
- The (optional) Z component of the scale value.<br>
- </dd>
- </dl>
- </div>
- </div><!-- parameters -->
- <div class='return-value'>
- <b>Return Value</b>
- <div class='returnvalue'>
- <dl>
- <dt>
- <code>CSSMatrix</code>
- </dt>
- <dd>
- The result matrix.<br>
- </dd>
- </dl>
- </div>
- </div>
- <div>
- <b>No Exceptions</b>
- </div>
- </div><!-- ======================================================================================================= -->
- </dd> <!-- scale() -->
-
- <!-- ===================================================== -->
- <dt>
- <code class='method-name'><a id="DOM-CSSMatrix-rotate" name='DOM-CSSMatrix-rotate'>rotate</a></code>
- </dt>
- <dd>
- <div class='method'>
- The <code>rotate</code> method returns a new matrix which is this matrix post multiplied by each of 3 rotation matrices about the major axes, first X, then Y, then Z. If the y and z components are undefined, the x value is used to rotate the object about the z axis, as though the vector (0,0,x) were passed. All rotation values are in degrees. This matrix is not modified.
- <div class='parameters'>
- <b>Parameters</b>
- <div class='paramtable'>
- <dl>
- <dt>
- <code class='parameter-name'>rotX</code> of type <code>float</code>
- </dt>
- <dd>
- The X component of the rotation value, or the Z component if the rotY and rotZ parameters are undefined.<br>
- </dd>
- <dt>
- <code class='parameter-name'>rotY</code> of type <code>float</code>
- </dt>
- <dd>
- The (optional) Y component of the rotation value.<br>
- </dd>
- <dt>
- <code class='parameter-name'>rotZ</code> of type <code>float</code>
- </dt>
- <dd>
- The (optional) Z component of the rotation value.<br>
- </dd>
- </dl>
- </div>
- </div><!-- parameters -->
- <div class='return-value'>
- <b>Return Value</b>
- <div class='returnvalue'>
- <dl>
- <dt>
- <code>CSSMatrix</code>
- </dt>
- <dd>
- The result matrix.<br>
- </dd>
- </dl>
- </div>
- </div>
- <div>
- <b>No Exceptions</b>
- </div>
- </div>
- <!-- ======================================================================================================= -->
- </dd> <!-- rotate() -->
-
- <!-- ===================================================== -->
- <dt>
- <code class='method-name'><a id="DOM-CSSMatrix-rotateAxisAngle" name='DOM-CSSMatrix-rotateAxisAngle'>rotateAxisAngle</a></code>
- </dt>
- <dd>
- <div class='method'>
- The <code>rotateAxisAngle</code> method returns a new matrix which is this matrix post multiplied by a rotation matrix with the given axis and angle. The <a href="http://en.wikipedia.org/wiki/Right-hand_rule">right-hand rule</a> is used to determine the direction of rotation. All rotation values are in degrees. This matrix is not modified.
- <div class='parameters'>
- <b>Parameters</b>
- <div class='paramtable'>
- <dl>
- <dt>
- <code class='parameter-name'>x</code> of type <code>float</code>
- </dt>
- <dd>
- The X component of the axis vector.<br>
- </dd>
- <dt>
- <code class='parameter-name'>y</code> of type <code>float</code>
- </dt>
- <dd>
- The Y component of the axis vector.<br>
- </dd>
- <dt>
- <code class='parameter-name'>z</code> of type <code>float</code>
- </dt>
- <dd>
- The Z component of the axis vector.<br>
- </dd>
- <dt>
- <code class='parameter-name'>angle</code> of type <code>float</code>
- </dt>
- <dd>
- The angle of rotation about the axis vector, in degrees.<br>
- </dd>
- </dl>
- </div>
- </div><!-- parameters -->
- <div class='return-value'>
- <b>Return Value</b>
- <div class='returnvalue'>
- <dl>
- <dt>
- <code>CSSMatrix</code>
- </dt>
- <dd>
- The result matrix.<br>
- </dd>
- </dl>
- </div>
- </div>
- <div>
- <b>No Exceptions</b>
- </div>
- </div>
- </dd> <!-- rotateAxisAngle -->
-
- </dl><!-- methods -->
- </dd>
-
- </dl>
- </dd> <!-- Interface CSSMatrix -->
- </dl>
- <!-- ============================================================ -->
-
- <h3 id="csstransformvalue-interface">
- 10.2 CSSTransformValue
- </h3>
-
- <dl>
- <dt>
- <b>Interface <i><a id="DOM-CSSTransformValue" name='DOM-CSSTransformValue'>CSSTransformValue</a></i></b>
- </dt>
- <dd>
- <p>
- The <code>CSSTransformValue</code> interface represents one transform function in the transform property. The
- <code>operationType</code> defines which operation is represented. The object also contains a list of values,
- which are the parameters of the function, in the same order in which they appear in the transform functions.
- </p>
- <dl>
- <dt>
- <b>IDL Definition</b>
- </dt>
- <dd>
- <div class='idl-code'>
- <pre>
- interface CSSTransformValue : CSSValueList {
-
- // 2D OperationTypes
- const unsigned short CSS_TRANSLATE = 1;
- const unsigned short CSS_TRANSLATEX = 2;
- const unsigned short CSS_TRANSLATEY = 3;
- const unsigned short CSS_ROTATE = 4;
- const unsigned short CSS_SCALE = 5;
- const unsigned short CSS_SCALEX = 6;
- const unsigned short CSS_SCALEY = 7;
- const unsigned short CSS_SKEW = 8;
- const unsigned short CSS_SKEWX = 9;
- const unsigned short CSS_SKEWY = 10;
- const unsigned short CSS_MATRIX = 11;
-
- // 3D OperationTypes
- const unsigned short CSS_TRANSLATEZ = 12;
- const unsigned short CSS_TRANSLATE3D = 13;
- const unsigned short CSS_ROTATEX = 14;
- const unsigned short CSS_ROTATEY = 15;
- const unsigned short CSS_ROTATEZ = 16;
- const unsigned short CSS_ROTATE3D = 17;
- const unsigned short CSS_SCALEZ = 18;
- const unsigned short CSS_SCALE3D = 19;
- const unsigned short CSS_PERSPECTIVE = 20;
- const unsigned short CSS_MATRIX3D = 21;
-
- attribute unsigned short operationType;
-
- CSSMatrix getCSSMatrix() raises(DOMException);
- };
- </pre>
- </div>
- </dd> <!-- IDL -->
-
- <dt>
- <b>Attributes</b>
- </dt>
- <dd>
- <dl>
- <dt>
- <code class='attribute-name'><a id="DOM-CSSTransformValue-operationType" name='DOM-CSSTransformValue-operationType'>operationType</a></code> of type <code>unsigned short</code>
- </dt>
- <dd>
- One of the listed operation types.<br>
- </dd>
- </dl>
- </dd> <!-- Attributes -->
-
- <dt>
- <b>Methods</b>
- </dt>
- <dd>
- <dl>
-
- <!-- ===================================================== -->
- <dt>
- <code class='method-name'><a id="DOM-CSSTransformValue-getCSSMatrix" name='DOM-CSSTransformValue-getCSSMatrix'>getCSSMatrix</a></code>
- </dt>
- <dd>
- <div class='method'>
- The <code>getCSSMatrix</code> method returns
- a CSSMatrix object representing this transform.
- <div class='parameters'>
- <b>No Parameters</b>
- </div><!-- parameters -->
- <div class='return-value'>
- <b>Return Value</b>
- <div class='returnvalue'>
- <dl>
- <dt>
- <code>CSSMatrix</code>
- </dt>
- <dd>
- The result matrix.
- </dd>
- </dl>
- </div>
- </div>
- <div>
- <b>Exceptions</b>
- <div class='returnvalue'>
- <dl>
- <dt>
- <code>NOT_SUPPORTED_ERROR</code>
- </dt>
- <dd>
- Thrown when the CSSTranformValue can not be converted into a CSSMatrix, such as when the CSSTransformValue contains percentage units and is being called on an object with unknown dimensions.
- </dd>
- </dl>
- </div>
- </div>
- </div>
- </dd> <!-- setMatrixValue -->
- </dl>
- </dd> <!-- methods -->
-
- </dl>
- </dd> <!-- Interface CSSTransformValue -->
- </dl>
-
- <p>
- In addition to the interfaces listed above, the <code>getComputedStyle</code> method of the <code>Window</code>
- object has been updated. The <code>transform</code> property of the style object returned by
- <code>getComputedStyle</code> contains a single CSSTransformValue with a type of CSS_MATRIX3D. The 16 parameters
- represent the 4x4 matrix that is the result of applying the individual functions listed in the
- <code>transform</code> property.
- </p>
-
-
-<h2>References</h2>
-
-<h3 class="no-num">Normative references</h3>
-<!--normative-->
-
-<h3 class="no-num">Other references</h3>
-<!--informative-->
-
-
-
-<h2 class="no-num">Property index</h2>
-<!-- properties -->
-
-
-
-<h2 class="no-num" id="index">Index</h2>
-<!--index-->
-
-</body>
-</html>
-<!-- Keep this comment at the end of the file
-Local variables:
-mode: sgml
-sgml-default-doctype-name:"html"
-sgml-minimize-attributes:t
-End:
--->
diff --git a/WebKitSite/specs/CSSVisualEffects/css3-3d-transforms/compound_transform.png b/WebKitSite/specs/CSSVisualEffects/css3-3d-transforms/compound_transform.png
deleted file mode 100644
index 8ab0c5c..0000000
Binary files a/WebKitSite/specs/CSSVisualEffects/css3-3d-transforms/compound_transform.png and /dev/null differ
diff --git a/WebKitSite/specs/CSSVisualEffects/css3-3d-transforms/default.css b/WebKitSite/specs/CSSVisualEffects/css3-3d-transforms/default.css
deleted file mode 100644
index 2cba317..0000000
--- a/WebKitSite/specs/CSSVisualEffects/css3-3d-transforms/default.css
+++ /dev/null
@@ -1,477 +0,0 @@
-/*
- * Style sheet for the CSS3 specification,
- * to be used in addition to http://www.w3.org/StyleSheets/TR/W3C-{WD,PR,REC}
- * $Id: default.css,v 1.1 2009-02-10 23:33:45 dean Exp $
- */
-
- at media print {
-
- /* the following doesn't work for now,
- instead we rely on a patched version of html2ps which has this built-in */
- .dlink { display: none }
-
- /* the following doesn't work for now,
- instead we rely on a patched version of html2ps which has this built-in */
- div.navbar {
- display: none;
- }
-
- html { margin: 0 !important }
- body { font-family: serif }
- th, td { font-family: inherit }
- a { color: inherit !important }
- div.example:before { font-family: serif !important }
- pre.example:before { font-family: serif !important }
- a:link, a:visited { text-decoration: none !important }
- a:link:after, a:visited:after { /* create a cross-ref "see..." */ }
-}
- at page {
- margin: 1.5cm 1.1cm;
-}
-
-/* html body { margin-left: 8.5em } /* Overrides 70px in base.css */
-
-body {counter-reset: exampleno figure}
-
-h2, h3, h5, h6 { margin-top: 2em }
-h1, h2, h3, h4, h5, h6 { page-break-after: avoid; font-family: inherit }
-div.figure, div.sidefigure, pre, table.propdef, table.propdef-extra,
-div.example { page-break-inside: avoid }
-dt { page-break-after: avoid }
-
-span.id {float: right; font-weight: bold}
-
-p, p.testlink + p, p.mtb {
- text-indent: 0;
- margin-bottom: 0;
- margin-top: 0.8em
-}
-p + p, p + div.sidefigure + p {
- text-indent: 2em;
- margin-top: 0
-}
-dd > p:first-child, li > p:first-child {
- margin-top: 0
-}
-
-h1 + h2 {
- margin-top: 0;
-}
-
-pre {
- text-align: left; /* fixes justification in Mac IE 5 */
- text-indent: 0; /* fixes indent in Mac Netscape 6 */
- margin-top: 1em;
- margin-bottom: 1em;
- font-size: 90% /*smaller*/;
-}
-/*
-var {
- font-style: normal;
-}
-*/
-img {
- border-style: none;
- color: white;
-}
-.toc {
- text-indent: 0;
-}
-
-
- at media all { /* NS < 6 doesn't like borders around inline elements... */
-
- body {
- line-height: 1.3;
- }
-
- a:link, a:visited {
- color: inherit;
- text-decoration: underline;
- }
-
- a.logo:link, a.logo:visited {
- padding: 0;
- border-style: none;
- }
-
- /* Hmm, this seems to confuse many browsers... */
- dt { margin-left: 0 }
- dd { margin-left: 2em }
- dl, ul, ol { margin-left: 0; padding-left: 0 }
- li { margin-left: 2em; padding-left: 0 }
-
-}
-ul.indexlist { margin-left: 0; /*column-width: 13em; columns: 13em*/ }
-ul.indexlist li { margin-left: 0; list-style: none }
-ul.indexlist li li { margin-left: 1em }
-
-.example {
- counter-increment: exampleno;
-}
-div.example:before {
- content: "Example";
- content: "Example " counter(exampleno, upper-roman);
- font: bold small sans-serif;
- /*float: left;*/
- position: absolute;
- top: -0.6em;
- left: -2.5em;
- width: 7.5em;
- text-align: center;
- line-height: 1em;
- color: #FFF8DD;
- background: #600;
- padding: 0.1em;
- border: thin solid #999;
- /*margin: -1.3em 0 0.3em -2.5em;*/
-}
-pre.example:before {
- content: "Example";
- content: "Example " counter(exampleno, upper-roman);
- font: bold small sans-serif;
- /*float: left;*/
- position: absolute;
- top: -0.6em;
- left: -2.5em;
- width: 7.5em;
- text-align: center;
- line-height: 1em;
- color: #FFF8DD;
- background: #600;
- padding: 0.1em;
- border: thin solid #999;
- /*margin: -1.3em 0 0.3em -2.5em;*/
-}
-div.example, div.illegal-example, div.html, div.illegal-html, div.xml,
-div.illegal-xml, pre.example, pre.illegal-example, pre.html,
-pre.illegal-html, pre.xml, pre.illegal-xml {
- background: #FFF8DD;
- padding: 0.5em;
- margin: 1em 0;
- border: thin solid #999;
- position: relative;
-}
-pre.example, pre.illegal-example, pre.html,
-pre.illegal-html, pre.xml, pre.illegal-xml {
- padding-top: 1.5em;
-}
-div.example { color: #600 }
-pre.example { color: #600 }
-pre.illegal-example { color: red }
-div.illegal-example { color: red }
-div.illegal-example p { color: black }
-
-div.html { color: #600 }
-pre.html { color: #600 }
-pre.illegal-html { color: red }
-div.illegal-html { color: red }
-div.illegal-html p { color: black }
-pre.deprecated-html { color: red }
-div.deprecated-html { color: red }
-div.deprecated-html p { color: black }
-
-div.xml { color: #600 }
-pre.xml { color: #600 }
-pre.illegal-xml { color: red }
-div.illegal-xml { color: red }
-div.illegal-xml p { color: black }
-
-/* code { font-size: 90% } */
-.css { color: #800 } /* inline CSS code (SPAN/CODE) */
-code.css { font-family: inherit; font-size: 100% }
-code.html { color: #600 } /* inline HTML */
-code.xml { color: #600 } /* inline XML */
-.property { font: inherit; } /* name of a CSS property (SPAN) */
-.descriptor { } /* name of a CSS descriptor (SPAN) */
-.issue { color: #c00 } /* editorial remark, open issue */
-.type { font-style: italic } /* A <type> value for a property */
-
-dfn { font-weight: bolder; /*font-size: 1em*/ }
-
-/* Class note is a non-normative note. May be inline or a P or DIV */
-.note {
- /* font-weight: bold; */
- color: green
-}
-p.note, div.note {
- /* margin: 1em 2em; */
-}
-p.note:before, span.note:before { content: "\25B6" " " }
-div.note > p:first-child:before { content: "\25B6" " " }
-
-.normref { color: red }
-.informref { color: green }
-
-
-/* ToC not indented, but font style shows hierarchy */
-ul.toc {margin: 1em 0; padding: 0; font-weight: bold}
-ul.toc ul {margin: 0; padding: 0; font-weight: normal}
-ul.toc ul ul {margin: 0 /*0 0 2em*/; font-style: italic}
-ul.toc ul ul ul {margin: 0}
-ul.toc li {margin: 0.6em 0; padding: 0}
-ul.toc li li {margin: 0}
-/*
-ul.toc li li li, ul.toc li li li ul {margin-left: 0; display: inline}
-ul.toc li li li ul, ul.toc li li li ul li {margin-left: 0; display: inline}
-*/
-
- at media all { /* NS4 doesn't align the floats properly :-( */
-
- /* Section numbers in a column of their own */
- ul.toc span.secno {margin-right: 1em} /* workaround for Opera6 */
- ul.toc span.secno {float: left; width: 4em; margin-left: -5em}
- /*ul.toc span.secno {text-align: right}*/
- ul.toc li {clear: both}
- ul.toc {margin-left: 5em}
- /* If we had 'tab', floats would not be needed here:
- ul.toc span.secno {tab: 5em right; margin-right: 1em}
- ul.toc li {text-indent: 5em hanging}
- The second line in case items wrap
- */
-}
-
-ul.index {
- list-style: disc; /* Mac NS has problem with 'none' */
- list-style: none;
-}
-
-s, del {text-decoration: line-through; color: red}
-u, ins {text-decoration: underline; background: #bfa}
-
-div.figure, div.sidefigure {
- text-align: center;
- margin: 2.5em 0;
-}
-div.sidefigure {
- float: right;
- width: 50%;
- margin: 0 0 0.5em 0.5em
-}
-div.figure img, div.sidefigure img {
- display: block;
- margin: auto;
- max-width: 100%
-}
-p.caption, caption {
- text-align: center;
- font-style: italic;
- font-size: 90%;
- margin: 1.5em 2em;
- text-indent: 0;
-}
-p.caption:before {
- content: "Figure " counter(figure) ". ";
- font-weight: bold;
-}
-p.caption {
- counter-increment: figure;
-}
-
-/* DL list is indented, but figure inside it is not */
-dd { margin-left: 2em }
-dd div.figure { margin-left: -2em }
-
-sup {
- vertical-align: super;
- font-size: 80%
-}
-
-/* "Equations" (not real MathML, but simple HTML) are put in a
-blockquote and may have an equation number. We make sure the
-blockquote has enough margin on the right and then put the equation
-number there. */
-
-blockquote {
- margin: 0.5em 4em 0.5em 2em;
- text-indent: 0;
-}
-.eqno {
- text-align: right;
- float: right;
- width: 3em;
- margin: 0 -4em 0 0;
- font-weight: bold;
- /* background: silver; color: black; padding: 0.1em */
-}
-
-table.equiv-table { border-spacing: 0; margin: 0.5em 0 }
-table.equiv-table th, table.equiv-table td { padding: 0.3em }
-table.equiv-table th { text-align: left }
-/* table.equiv-table th:first-child { text-align: right } */
-table.equiv-table td, table.equiv-table th { border-bottom: thin solid #666 }
-table.equiv-table { border-bottom: hidden }
-table.equiv-table { empty-cells: show }
-table.equiv-table caption { margin: 0.5em 0 0 0 }
-
-/* Style for table of properties */
-table.proptable {
- font-size: small;
- border-collapse: collapse;
- border-spacing: 0;
- text-align: left;
- margin: 1em 0;
-}
-
-table.proptable td, table.proptable th {
- padding: 0.4em;
- border-style: solid none none dotted;
- border-width: thin;
- border-color: red;
-}
-table.proptable th:first-child, table.proptable td:first-child {
- border-left-style: none;
-}
-
-
-/* Style for table that defines a property or a descriptor */
-table.propdef, table.propdef-extra, table.descdef {
- border-spacing: 0;
- border-collapse: collapse;
- width: 100%;
- table-layout: fixed;
- background: #DEF;
- margin-top: 1.2em;
- margin-bottom: 1.2em
-}
-
-/* Since Jan 2008, some CSS modules use <th> instead of <td> in the
-first column of a table.propdef. These rules handle both. As of Jan
-2008, http://www.w3.org/Style/spec-mark-up still only documents <td>
-*/
-
-table.propdef td, table.propdef-extra td, table.descdef td,
-table.propdef th, table.propdef-extra th, table.descdef th {
- padding: 0 0.3em;
- vertical-align: baseline;
-}
-/*
-table.propdef dfn, table.propdef-extra dfn, table.descdef dfn {
- font-weight: bold;
- font-style: normal
-}
-*/
-table.propdef td:first-child,
-table.propdef-extra td:first-child,
-table.descdef td:first-child,
-table.propdef th:first-child,
-table.propdef-extra th:first-child,
-table.descdef th:first-child {
- font-style: italic;
- font-weight: normal;
- text-align: left;
- width: 8.3em
-}
-table.propdef td[colspan]:first-child,
-table.propdef-extra td[colspan]:first-child,
-table.descdef td[colspan]:first-child,
-table.propdef th[colspan]:first-child,
-table.propdef-extra th[colspan]:first-child,
-table.descdef th[colspan]:first-child {
- font-style: inherit
-}
-table.propdef tr:first-child,
-table.propdef-extra tr:first-child,
-table.descdef tr:first-child {
- background: #005A9C;
- color: white
-}
-/* table.propdef tr:first-child td { padding-top: 0.1em; padding-bottom: 0.1em } */
-
-/* This would replace :first-child for Opera, but it confuses WinIE :-( */
-/*
-table.propdef td { width: 8em }
-table.propdef td + td { width: auto }
-table.propdef tr { background: #005A9C; color: white }
-table.propdef tr + tr { background: transparent; color: black }
-*/
-
-/* CSS modules typically don't use MUST, SHOULD etc. from RFC 2119,
-or, if they do, they don't put them in uppercase. But the following
-class is provided in case a spec wants to use RFC 2119 terms in
-uppercase in the source. */
-
-em.rfc2119 {
- text-transform: lowercase;
- font-variant: small-caps;
- font-style: normal
-}
-
-/* In Profile specs, a table of required features: */
-
-table.features th {
- background: #00589f;
- color: #fff;
- text-align: left;
- padding: 0.2em 0.2em 0.2em 0.5em;
-}
-table.features td {
- vertical-align: top;
- border-bottom: 1px solid #ccc;
- padding: 0.3em 0.3em 0.3em 0.7em;
-}
-
-
-/* Style for data tables (and properly marked-up proptables) */
-
- .data, .proptable {
- margin: 1em auto;
- border-collapse: collapse;
- border: solid #005A9B;
- }
- .data caption {
- width: 100%;
- text-align: center;
- }
- .data td, .data th,
- .proptable td, .proptable th {
- border: thin solid;
- padding: 0.2em;
- text-align: center;
- }
- .data thead th[scope="row"],
- .proptable thead th[scope="row"] {
- text-align: right;
- background: #A4C8E2;
- color: inherit;
- }
- .data thead,
- .proptable thead {
- background: #EEEEEE;
- color: inherit;
- }
- .data tbody th:first-child,
- .proptable tbody th:first-child {
- text-align: right;
- background: #EEEEEE;
- color: inherit;
- }
- .data thead,
- .data tbody,
- .data tfoot,
- .data colgroup {
- border: solid;
- }
-
- .data img {
- vertical-align: middle;
- }
-
- table.propdef {
- table-layout: auto;
- }
- .propdef th {
- font-style: italic;
- font-weight: normal;
- text-align: left;
- width: 3em;
- }
- dt dfn code {
- font-size: inherit;
- }
-
-/* This is mostly to make the list inside the CR exit criteria more compact. */
-dl ol, dl li {display: inline; padding: 0; margin: 0}
-dl ol {counter-reset: list-item}
-dl li {counter-increment: list-item}
-dl li:before {content: "(" counter(list-item) ") "; font-weight: bold}
diff --git a/WebKitSite/specs/CSSVisualEffects/css3-3d-transforms/transform1.png b/WebKitSite/specs/CSSVisualEffects/css3-3d-transforms/transform1.png
deleted file mode 100644
index 47200fb..0000000
Binary files a/WebKitSite/specs/CSSVisualEffects/css3-3d-transforms/transform1.png and /dev/null differ
diff --git a/WebKitSite/specs/CSSVisualEffects/css3-3d-transforms/transform2.png b/WebKitSite/specs/CSSVisualEffects/css3-3d-transforms/transform2.png
deleted file mode 100644
index 0de0c9e..0000000
Binary files a/WebKitSite/specs/CSSVisualEffects/css3-3d-transforms/transform2.png and /dev/null differ
diff --git a/WebKitSite/specs/CSSVisualEffects/css3-animations/CSSAnimation.html b/WebKitSite/specs/CSSVisualEffects/css3-animations/CSSAnimation.html
deleted file mode 100644
index b1e9124..0000000
--- a/WebKitSite/specs/CSSVisualEffects/css3-animations/CSSAnimation.html
+++ /dev/null
@@ -1,1835 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
-"http://www.w3.org/TR/html4/strict.dtd">
-<html lang="en">
- <head>
- <meta http-equiv="Content-type" content="text/html; charset=utf-8">
- <title>
- CSS Animation
- </title>
- <link href="base.css" rel="stylesheet" type="text/css">
- <style type="text/css">
-
- @media print {
-
- /* the following doesn't work for now,
- instead we rely on a patched version of html2ps which has this built-in */
- .dlink { display: none }
-
- /* the following doesn't work for now,
- instead we rely on a patched version of html2ps which has this built-in */
- div.navbar {
- display: none;
- }
-
- html { margin: 0 !important }
- body { font-family: serif }
- th, td { font-family: inherit }
- a { color: inherit !important }
- div.example:before { font-family: serif !important }
- pre.example:before { font-family: serif !important }
- a:link, a:visited { text-decoration: none !important }
- a:link:after, a:visited:after { /* create a cross-ref "see..." */ }
- }
- @page {
- margin: 1.5cm 1.1cm;
- }
-
- /* html body { margin-left: 8.5em } /* Overrides 70px in base.css */
-
- body {counter-reset: exampleno figure}
-
- h2, h3, h5, h6 { margin-top: 2em }
- h1, h2, h3, h4, h5, h6 { page-break-after: avoid; font-family: inherit }
- div.figure, div.sidefigure, pre, table.propdef, table.propdef-extra,
- div.example { page-break-inside: avoid }
- dt { page-break-after: avoid }
-
- span.id {float: right; font-weight: bold}
-
- /* p, p.note + p, p.testlink + p, p.note, p.issue { */
- p, p.testlink + p, p.issue, p.mtb {
- /* text-indent: 2em; */
- margin-bottom: 0.6em;
- margin-top: 0.6em
- }
- p + p, p + div.sidefigure + p {
- /* text-indent: 2em; */
- margin-top: 0
- }
- dd p {
- margin-top: 0
- }
-
- h1 + h2 {
- margin-top: 0;
- }
-
- pre {
- text-align: left; /* fixes justification in Mac IE 5 */
- text-indent: 0; /* fixes indent in Mac Netscape 6 */
- margin-top: 1em;
- margin-bottom: 1em;
- font-size: 90% /*smaller*/;
- }
- /*
- var {
- font-style: normal;
- }
- */
- img {
- border-style: none;
- color: white;
- }
- .toc {
- text-indent: 0;
- }
-
-
- @media all { /* NS < 6 doesn't like borders around inline elements... */
-
- body {
- line-height: 1.3;
- }
-
- a:link, a:visited {
- /* color: inherit;*/
- }
- a.logo:link, a.logo:visited {
- padding: 0;
- border-style: none;
- }
-
- /* Hmm, this seems to confuse many browsers... */
- dt { margin-left: 0; margin-top: 1em; color: #030; font-weight: bold;}
- dd { margin-left: 2em }
- dl, ul, ol { margin-left: 1em; padding-left: 0 }
- li { margin-left: 2em; padding-left: 0 }
-
- }
- ul.indexlist { margin-left: 0; /*column-width: 13em; columns: 13em*/ }
- ul.indexlist li { margin-left: 0; list-style: none }
- ul.indexlist li li { margin-left: 1em }
-
- div.example:before {
- content: "Example";
- content: "Example " counter(exampleno, upper-roman);
- font: bold small sans-serif;
- /*float: left;*/
- position: absolute;
- top: -0.6em;
- left: -2.5em;
- width: 7.5em;
- text-align: center;
- line-height: 1em;
- color: #FFF8DD;
- background: #600;
- padding: 0.1em;
- border: thin solid #999;
- /*margin: -1.3em 0 0.3em -2.5em;*/
- }
- div.example {
- counter-increment: exampleno;
- }
- pre.example:before {
- content: "Example";
- content: "Example " counter(exampleno, upper-roman);
- font: bold small sans-serif;
- /*float: left;*/
- position: absolute;
- top: -0.6em;
- left: -2.5em;
- width: 7.5em;
- text-align: center;
- line-height: 1em;
- color: #FFF8DD;
- background: #600;
- padding: 0.1em;
- border: thin solid #999;
- /*margin: -1.3em 0 0.3em -2.5em;*/
- }
- pre.example {
- counter-increment: exampleno;
- }
- div.example, div.illegal-example, div.html, div.illegal-html, div.xml,
- div.illegal-xml, pre.example, pre.illegal-example, pre.html,
- pre.illegal-html, pre.xml, pre.illegal-xml {
- background: #FFF8DD;
- padding: 0.5em;
- margin: 1em 0;
- border: thin solid #999;
- position: relative;
- }
- pre.example, pre.illegal-example, pre.html,
- pre.illegal-html, pre.xml, pre.illegal-xml {
- padding-top: 1.5em;
- }
- div.example { color: #600 }
- pre.example { color: #600 }
- pre.illegal-example { color: red }
- div.illegal-example { color: red }
- div.illegal-example p { color: black }
-
- div.html { color: #600 }
- pre.html { color: #600 }
- pre.illegal-html { color: red }
- div.illegal-html { color: red }
- div.illegal-html p { color: black }
- pre.deprecated-html { color: red }
- div.deprecated-html { color: red }
- div.deprecated-html p { color: black }
-
- div.xml { color: #600 }
- pre.xml { color: #600 }
- pre.illegal-xml { color: red }
- div.illegal-xml { color: red }
- div.illegal-xml p { color: black }
-
- code { font-size: 90% }
- .css { color: #800 } /* inline CSS code (SPAN/CODE) */
- code.css { font-family: inherit; font-size: 100% }
- code.html { color: #600 } /* inline HTML */
- code.xml { color: #600 } /* inline XML */
- .property { } /* name of a CSS property (SPAN) */
- .prop-name { color: #2A2AA5; font-weight: bold; font-size: 90%} /* name of a CSS property (SPAN) */
- .prop-value { font-weight: bold; font-size: 90%} /* CSS property value (SPAN) */
- .descriptor { } /* name of a CSS descriptor (SPAN) */
- .issue { color: #c00 } /* editorial remark, open issue */
- .type { font-style: italic } /* A <type> value for a property */
-
- dfn { font-weight: bolder; /*font-size: 1em*/ }
-
- /* Class note is a non-normative note. May be inline or a P or DIV */
- .note {
- /* font-weight: bold; */
- color: green
- }
- p.note, div.note {
- /* margin: 1em 2em; */
- }
- p.note:before, span.note:before { content: "\25B6" " " }
- div.note > p:first-child:before { content: "\25B6" " " }
-
- .normref { color: red }
- .informref { color: green }
-
-
- /* ToC not indented, but font style shows hierarchy */
- ul.toc {margin: 1em 0; padding: 0; font-weight: bold}
- ul.toc ul {margin: 0; padding: 0; font-weight: normal}
- ul.toc ul ul {margin: 0 /*0 0 2em*/; font-style: italic}
- ul.toc ul ul ul {margin: 0}
- ul.toc li {margin: 0.6em 0; padding: 0}
- ul.toc li li {margin: 0}
- /*
- ul.toc li li li, ul.toc li li li ul {margin-left: 0; display: inline}
- ul.toc li li li ul, ul.toc li li li ul li {margin-left: 0; display: inline}
- */
-
- @media all { /* NS4 doesn't align the floats properly :-( */
-
- /* Section numbers in a column of their own */
- ul.toc span.secno {margin-right: 1em} /* workaround for Opera6 */
- ul.toc span.secno {float: left; width: 4em; margin-left: -5em}
- /*ul.toc span.secno {text-align: right}*/
- ul.toc li {clear: both}
- ul.toc {margin-left: 5em}
- /* If we had 'tab', floats would not be needed here:
- ul.toc span.secno {tab: 5em right; margin-right: 1em}
- ul.toc li {text-indent: 5em hanging}
- The second line in case items wrap
- */
- }
-
- ul.index {
- list-style: disc; /* Mac NS has problem with 'none' */
- list-style: none;
- }
-
- s, del {text-decoration: line-through; color: red}
- u, ins {text-decoration: underline; background: #bfa}
-
- div.figure, div.sidefigure {
- text-align: center;
- margin: 2.5em 0;
- }
- div.sidefigure {
- float: right;
- width: 50%;
- margin: 0 0 0.5em 0.5em
- }
- div.figure img, div.sidefigure img {
- display: block;
- margin: auto;
- max-width: 100%
- }
- p.caption, caption {
- text-align: center;
- font-style: italic;
- font-size: 90%;
- margin: 1.5em 2em;
- text-indent: 0;
- }
- p.caption:before {
- content: "Figure " counter(figure) ". ";
- font-weight: bold;
- }
- p.caption {
- counter-increment: figure;
- }
-
- /* DL list is indented, but figure inside it is not */
- dd { margin-left: 2em }
- dd div.figure { margin-left: -2em }
-
- sup {
- vertical-align: super;
- font-size: 80%
- }
-
- /* "Equations" (not real MathML, but simple HTML) are put in a
- blockquote and may have an equation number. We make sure the
- blockquote has enough margin on the right and then put the equation
- number there. */
-
- blockquote {
- margin: 0.5em 4em 0.5em 2em;
- text-indent: 0;
- }
- .eqno {
- text-align: right;
- float: right;
- width: 3em;
- margin: 0 -4em 0 0;
- font-weight: bold;
- /* background: silver; color: black; padding: 0.1em */
- }
-
- table.equiv-table { border-spacing: 0; margin: 0.5em 0 }
- table.equiv-table th, table.equiv-table td { padding: 0.3em }
- table.equiv-table th { text-align: left }
- /* table.equiv-table th:first-child { text-align: right } */
- table.equiv-table td, table.equiv-table th { border-bottom: thin solid #666 }
- table.equiv-table { border-bottom: hidden }
- table.equiv-table { empty-cells: show }
- table.equiv-table caption { margin: 0.5em 0 0 0 }
-
- /* Style for table of properties */
- table.proptable {
- font-size: small;
- border-collapse: collapse;
- border-spacing: 0;
- text-align: left;
- margin: 1em 0;
- }
-
- @media print { /* Use the wide margin in print */
- table.proptable {margin: 1em 0 1em -8.5em}
- }
-
- table.proptable td, table.proptable th {
- padding: 0.4em;
- border-style: solid none none dotted;
- border-width: thin;
- border-color: red;
- }
- table.proptable th:first-child, table.proptable td:first-child {
- border-left-style: none;
- }
-
-
- /* Style for table that defines a property or a descriptor */
- table.propdef, table.propdef-extra, table.descdef {
- border-spacing: 0;
- border-collapse: collapse;
- width: 100%;
- table-layout: fixed;
- background: #DEF;
- margin-top: 1.2em;
- margin-bottom: 1.2em
- }
- table.propdef td, table.propdef-extra td, table.descdef td {
- padding: 0 0.3em;
- vertical-align: baseline;
- }
- /*
- table.propdef dfn, table.propdef-extra dfn, table.descdef dfn {
- font-weight: bold;
- font-style: normal
- }
- */
- table.propdef td:first-child,
- table.propdef-extra td:first-child,
- table.descdef td:first-child {
- font-style: italic;
- width: 8.1em
- }
- table.propdef td[colspan]:first-child,
- table.propdef-extra td[colspan]:first-child,
- table.descdef td[colspan]:first-child {
- font-style: inherit
- }
- table.propdef tr:first-child,
- table.propdef-extra tr:first-child,
- table.descdef tr:first-child {
- background: #005A9C;
- color: white
- }
- /* table.propdef tr:first-child td { padding-top: 0.1em; padding-bottom: 0.1em } */
-
- /* This would replace :first-child for Opera, but it confuses WinIE :-( */
- /*
- table.propdef td { width: 8em }
- table.propdef td + td { width: auto }
- table.propdef tr { background: #005A9C; color: white }
- table.propdef tr + tr { background: transparent; color: black }
- */
-
- /* CSS modules typically don't use MUST, SHOULD etc. from RFC 2119,
- or, if they do, they don't put them in uppercase. But the following
- class is provided in case a spec wants to use RFC 2119 terms in
- uppercase in the source. */
-
- em.rfc2119 {
- text-transform: lowercase;
- font-variant: small-caps;
- font-style: normal
- }
-
- /* In Profile specs, a table of required features: */
-
- table.features th {
- background: #00589f;
- color: #fff;
- text-align: left;
- padding: 0.2em 0.2em 0.2em 0.5em;
- }
- table.features td {
- vertical-align: top;
- border-bottom: 1px solid #ccc;
- padding: 0.3em 0.3em 0.3em 0.7em;
- }
-
- body { line-height: 1.4; }
-
- .issue, .todo {
- //display: none;
- margin: 1em;
- border: 2px solid;
- padding: 1em;
- }
- span.issue, span.todo {
- border-width: 1px;
- margin: 0; padding: 0;
- }
- .issue { border-color: red; }
- .todo { border-color: yellow; }
- .issue:before, .todo:before {
- content: attr(class) ": ";
- text-transform: uppercase;
- font-weight: bold;
- }
- .issue { background: rgb(255,224,224); color: black; }
- .todo { background: rgb(255,255,192); color: black; }
-
- .syntax {
- padding: 1em;
- margin: 1em 0;
- border: 1px black solid;
- background: rgb(224,224,255);
- color: black;
- }
- .idl-code {
- margin: 0;
- font-family: monospace;
- border: 1px solid black;
- color: black;
- background-color: #dfdfdf;
- }
-
- </style>
- </head>
- <body>
- <h1>
- CSS Animation
- </h1>
- <h2>
- 21 November 2008
- </h2>
- <dl>
- <dt>
- Authors:
- </dt>
- <dd>
- Dave Hyatt (<a href="mailto:hyatt at apple.com">hyatt at apple.com</a>), <a href="http://www.apple.com/">Apple</a>
- </dd>
- <dd>
- Dean Jackson (<a href="mailto:dino at apple.com">dino at apple.com</a>), <a href="http://www.apple.com/">Apple</a>
- </dd>
- <dd>
- Chris Marrin (<a href="mailto:cmarrin at apple.com">cmarrin at apple.com</a>), <a href="http://www.apple.com/">Apple</a>
- </dd>
- </dl>
- <hr>
- <!-- ======================================================================================================= -->
- <h2>
- 1 Introduction
- </h2>
- <p>
- This document introduces new CSS features to enable animation.
- </p>
- <p>
- Animation is currently possible in languages like SVG, but no system exists for the native animation of CSS styles. This proposal introduces <em>defined animations</em>, which specify the values that CSS properties will take over a given time interval.
- </p>
- <p>
- This specification is an extension to <a href="CSSTransitions.html">CSS Transitions</a>.
- </p>
- <h2>
- 2 Keyframes
- </h2>
- <p>
- In a simple transition, since both the starting value and ending value
- are known, a single timing function and duration determine the
- intermediate values of the animating property. If finer control of the
- intermediate values is required, keyframes can be used.
- </p>
- <p>
- Keyframes are specified using a specialized CSS at-rule. A <span
- class="prop-name">@keyframes</span> rule consists of the keyword
- "@keyframes", followed by an identifier giving a name for the animation
- (which will be referenced using <span
- class="prop-name">'animation-name'</span>), followed by a set of style
- rules (delimited by curly braces).
- </p>
- <p>
- The <i>keyframe selector</i> for a keyframe style rule consists of a
- comma-separated list of percentage values or the keywords 'from' or
- 'to'. The selector is used to specify the percentage along the duration
- of the animation that the keyframe represents. The
- keyframe itself is specified by the block of property values declared on
- the selector. The keyword 'from' is equivalent to the value 0. The
- keyword 'to' is equivalent to the value 100%. Note that the percentage
- unit specifier must be used on percentage values. Therefore, "0" is an
- invalid keyframe selector.
- </p>
- <p>
- Keyframes can be specified in any order. The selector determines
- the placement of the keyframe in the animation.
- </p>
- <p>
- Every keyframe declaration must have a keyframe rule for
- 0% or 100%, possibly defined using "from" or "to". A keyframe
- declaration without these keyframe selectors is invalid and will not
- be available for animation.
- </p>
- <p>
- The <i>keyframe declaration</i> for a keyframe rule consists of
- properties and values. Properties that are unable to be
- animated are ignored in these rules, with the exception of <span
- class="prop-name">animation-timing-function'</span>, the behavior
- of which is described below.
- </p>
- <p>
- The @keyframes rule that is used by an animation will be the last one encountered in sorted rules order that matches the name of the animation. <span class="prop-name">@keyframes</span> rules do not cascade; therefore an animation will never derive keyframes from more than one <span class="prop-name">@keyframes</span> rule.
- </p>
- <p>
- To determine the set of keyframes, all of the values in selectors are sorted in increasing order by time. If there are any duplicates, then the last keyframe specified inside the <span class="prop-name">@keyframes</span> rule will be used to provide the keyframe information for that time. There is no cascading within a <span class="prop-name">@keyframes</span> rule if multiple keyframes specify the same keyframe selector values.
- </p>
- <div class="example">
- <p style="display:none">
- Example(s):
- </p>
- <pre>
- at keyframes 'wobble' {
-
- 0% {
- left: 100px;
- }
-
- 40% {
- left: 150px;
- }
-
- 60% {
- left: 75px;
- }
-
- 100% {
- left: 100px;
- }
-
-}
-
-</pre>Four keyframes are specified for the animation named "wobble". In the first keyframe, shown at the beginning of the animation cycle, the 'left' value of the animation is 100px. By 40% of the animation duration, 'left' value has animated to 150px. At 60% of the animation duration, the 'left' value has animated back to 75px. At the end of the animation cycle, the 'left' value has returned to 100px. The diagram below shows the state of the animation if it were given a duration of 10s.
- <div class="figure">
- <img src="animation1.png" alt="">
- </div>
- <p class="caption">
- Animations states specified by keyframes
- </p>
- </div>
-
- <p>
- The following is the grammar for the keyframes rule.
- </p>
-
- <pre>
- keyframes-rule: '@keyframes' IDENT '{' keyframes-blocks '}';
-
- keyframes-blocks: [ keyframe-selectors block ]* ;
-
- keyframe-selectors: [ 'from' | 'to' | PERCENTAGE ] [ ',' [ 'from' | 'to' | PERCENTAGE ] ]*;
- </pre>
- <!-- ======================================================================================================= -->
- <h3>
- 2.1 Timing functions for keyframes
- </h3>
- <p>
- A keyframe style rule may also declare the timing function that is to be used as the animation moves to the next keyframe.
- </p>
- <div class="example">
- <p style="display:none">
- Example(s):
- </p>
- <pre>
- at keyframes 'bounce' {
-
- from {
- top: 100px;
- animation-timing-function: ease-out;
- }
-
- 25% {
- top: 50px;
- animation-timing-function: ease-in;
- }
-
- 50% {
- top: 100px;
- animation-timing-function: ease-out;
- }
-
- 75% {
- top: 75px;
- animation-timing-function: ease-in;
- }
-
- to {
- top: 100px;
- }
-
-}
-
-</pre>Five keyframes are specified for the animation named "bounce". Between the first and second keyframe (ie. between 0 and 25%) an "ease-out" timing function is used. Between the second and third keyframe (ie. between 25% and 50%) an "ease-in" timing function is used. And so on. The effect will appear as an element that moves up the page 50px, slowing down as it reaches its highest point then speeding up as it falls back to 100px. The second half of the animation behaves in a similar manner, but only moves the element 25px units up the page.
- </div>
- <p>
- See <a href="#animation-timing-function_tag">the <span class="prop-name">'animation-timing-function'</span> property</a> for more information.
- </p><!-- ======================================================================================================= -->
- <h2>
- 3 Animations
- </h2>
- <p>
- Animations are similar to transitions in that they change the presentational value of CSS properties over time. The principal difference is that while transitions trigger <i>implicitly</i> when property values change, animations are <i>explicitly</i> executed when the animation properties are applied. Because of this, animations require explicit values for the properties being animated. These values are specified using animation keyframes, described above.
- </p>
- <p>
- Many aspects of the animation can be controlled, including how many times the animation iterates, whether or not it alternates between the begin and end values, and whether or not the animation should be running or paused. An animation can also delay its start time.
- </p>
- <div class="example">
- <p style="display:none">
- Example(s):
- </p>
- <pre>
-div {
- animation-name: 'diagonal-slide';
- animation-duration: 5s;
- animation-iteration-count: 10;
-}
-
- at keyframes 'diagonal-slide' {
-
- from {
- left: 0;
- top: 0;
- }
-
- to {
- left: 100px;
- top: 100px;
- }
-
-}
-
-</pre>This will produce an animation that moves an element from (0, 0) to (100px, 100px) over five seconds and repeats itself nine times (for a total of ten iterations).
- </div>
- <!-- ======================================================================================================= -->
- <h3>
- 3.1 Animation behavior
- </h3>
-
- <p>
- CSS Animations affect computed property values. During the execution of an animation, the
- computed value for a property is controlled by the animation. This overrides the value
- specified in the normal styling system.
- </p>
-
- <p>
- In the case of multiple animations specifying behavior for the same property, the animation
- defined last will override the previously defined animations.
- </p>
-
- <p>
- An animation does not affect the computed value before the application of the animation,
- before the animation delay has expired, and after the end of the animation.
- </p>
-
- <div class="figure">
- <img src="sandwich.png" alt="">
- </div>
- <p class="caption">
- Computation of animated property values
- </p>
-
- <p>
- The diagram above shows how property values are computed. The intrinsic style is shown at the
- top of the diagram. The computed value is derived from intrinsic style at the times when an
- animation is not running and also when an animation is delayed (see below for specification of
- animation delay). During an animation, the computed style is derived from the animated value.
- </p>
-
- <p>
- The start time of an animation is the latter of two moments: the time at which the style is
- resolved that specifies the animation, or the time the document's load event is fired.
- Therefore, an animation specified in the document stylesheet will begin at the document load.
- An animation specified on an element by modifying the style after the document has loaded will
- start when the style is resolved. That may be immediately in the case of a pseudo style rule
- such as hover, or may be when the scripting engine returns control to the browser (in the case
- of style applied by script).
- </p>
-
- <p>
- An animation applies to an element if the element has a value for
- <span class="prop-name">'animation-name'</span> that references a valid
- keyframes rule. Once an animation has started it continues until it ends
- or the <span class="prop-name">'animation-name'</span> is removed. The values
- used for the keyframes and animation properties are snapshotted at the
- time the animation starts. Changing them during the execution of the
- animation has no effect. Note also, that changing the value of
- <span class="prop-name">'animation-name'</span> does not necessarily
- restart an animation (e.g. if a list of animations are applied and
- one is removed from the list, only that animation will stop; The other
- animations will continue). In order to restart an animation, it must be
- removed then reapplied.
- </p>
-
- <!-- ======================================================================================================= -->
- <h3>
- 3.2 The <span class="prop-name">'animation-name'</span> Property
- </h3>
- <p>
- The <span class="prop-name">'animation-name'</span> property defines a
- list of animations that apply. Each name is used to select the keyframe at-rule
- that provides the property values for the animation. If the name does
- not match any keyframe at-rule, there are no properties to be animated
- and the animation will not execute. Furthermore, if the animation name
- is 'none' then there will be no animation. This can be used to override
- any animations coming from the cascade.
- </p>
- <table class="propdef">
- <tbody>
- <tr>
- <td>
- <em>Name:</em>
- </td>
- <td>
- <dfn id="animation-name">animation-name</dfn>
- </td>
- </tr>
- <tr>
- <td>
- <em>Value:</em>
- </td>
- <td>
- none | IDENT [, none | IDENT ]*
- </td>
- </tr>
- <tr>
- <td>
- <em>Initial:</em>
- </td>
- <td>
- none
- </td>
- </tr>
- <tr>
- <td>
- <em>Applies to:</em>
- </td>
- <td>
- block-level and inline-level elements
- </td>
- </tr>
- <tr>
- <td>
- <em>Inherited:</em>
- </td>
- <td>
- no
- </td>
- </tr>
- <tr>
- <td>
- <em>Percentages:</em>
- </td>
- <td>
- N/A
- </td>
- </tr>
- <tr>
- <td>
- <em>Media:</em>
- </td>
- <td>
- visual
- </td>
- </tr>
- <tr>
- <td>
- <em>Computed value:</em>
- </td>
- <td>
- Same as specified value.
- </td>
- </tr>
- </tbody>
- </table>
-
- <!--
- <p>
- It is possible for elements to have multiple animations running that change the same property or properties. In this case the animations combine in a manner defined by the property. For example, animations on <span class="prop-name">opacity</span> will add together and animations on <span class="prop-name">transform</span> will have their transformation matrices multiplied.
- </p>
- <div class="example">
- <p style="display:none">
- Example(s):
- </p>
- <pre>
- @keyframes 'border-bloat' {
- from {
- border-width: 0;
- }
- to {
- border-width: 10px;
- }
- }
-
- @keyframes 'border-diet' {
- from {
- border-width: 4px;
- }
- to {
- border-width: 2px;
- }
- }
-
- div {
- animation-name: 'border-bloat', 'border-diet';
- animation-duration: 10s, 4s;
- }
- </pre>
- <p>
- The above example has two animations executing on the same property, <span class="prop-name">border-width</span>. The animations are additive. That is, the
- resulting value for the property will be the addition of the values from the
- two animations.
- </p>
- <p>
- At time '0s' the element's border will be 4px wide (0px from 'border-bloat' plus 4px from 'border-diet').
- At time '4s' the element's border will be 6px wide (4px from 'border-bloat' plus 2px from 'border-diet').
- At time '10s' the element's border will be 10px wide (10px from 'border-bloat' and no addition from
- 'border-diet' as it is no longer executing).
- </p>
- </div>
--->
-
-
- <!-- ======================================================================================================= -->
- <h3>
- 3.3 The <span class="prop-name">'animation-duration'</span> Property
- </h3>
- <p>
- The <span class="prop-name">'animation-duration'</span> property defines the length of time that an animation takes to complete one cycle.
- </p>
- <table class="propdef">
- <tbody>
- <tr>
- <td>
- <em>Name:</em>
- </td>
- <td>
- <dfn id="animation-duration">animation-duration</dfn>
- </td>
- </tr>
- <tr>
- <td>
- <em>Value:</em>
- </td>
- <td>
- <time> [, <time>]*
- </td>
- </tr>
- <tr>
- <td>
- <em>Initial:</em>
- </td>
- <td>
- 0
- </td>
- </tr>
- <tr>
- <td>
- <em>Applies to:</em>
- </td>
- <td>
- block-level and inline-level elements
- </td>
- </tr>
- <tr>
- <td>
- <em>Inherited:</em>
- </td>
- <td>
- no
- </td>
- </tr>
- <tr>
- <td>
- <em>Percentages:</em>
- </td>
- <td>
- N/A
- </td>
- </tr>
- <tr>
- <td>
- <em>Media:</em>
- </td>
- <td>
- visual
- </td>
- </tr>
- <tr>
- <td>
- <em>Computed value:</em>
- </td>
- <td>
- Same as specified value.
- </td>
- </tr>
- </tbody>
- </table>
-
- <p>
- By default the value is '0', meaning that the animation cycle is immediate (i.e. there will be no animation). A negative value for <span class="prop-name">animation-duration</span> is treated as '0'.
- </p>
-
- <!-- ======================================================================================================= -->
- <h3 id="animation-timing-function_tag">
- 3.4 The <span class="prop-name">'animation-timing-function'</span> Property
- </h3>
- <p>
- The <span class="prop-name">'animation-timing-function'</span> property describes how the animation will progress over one cycle of its duration. See <a href="CSSTransitions.html#transition-timing-function_tag">the <span class="prop-name">'transition-timing-function'</span> property</a> for a complete description of timing function calculation.
- </p>
- <table class="propdef">
- <tbody>
- <tr>
- <td>
- <em>Name:</em>
- </td>
- <td>
- <dfn id="animation-timing-function">animation-timing-function</dfn>
- </td>
- </tr>
- <tr>
- <td>
- <em>Value:</em>
- </td>
- <td>
- ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*
- </td>
- </tr>
- <tr>
- <td>
- <em>Initial:</em>
- </td>
- <td>
- ease
- </td>
- </tr>
- <tr>
- <td>
- <em>Applies to:</em>
- </td>
- <td>
- block-level and inline-level elements
- </td>
- </tr>
- <tr>
- <td>
- <em>Inherited:</em>
- </td>
- <td>
- no
- </td>
- </tr>
- <tr>
- <td>
- <em>Percentages:</em>
- </td>
- <td>
- N/A
- </td>
- </tr>
- <tr>
- <td>
- <em>Media:</em>
- </td>
- <td>
- visual
- </td>
- </tr>
- <tr>
- <td>
- <em>Computed value:</em>
- </td>
- <td>
- Same as specified value.
- </td>
- </tr>
- </tbody>
- </table>
-
- <p>
- For a keyframed animation, the <span class="prop-name">'animation-timing-function'</span> applies
- between keyframes, not over the entire animation. For example, in the case of an ease-in-out timing function, an animation will ease in at the start of the keyframe and ease out at the end of the keyframe. A <span class="prop-name">'animation-timing-function'</span> defined within a keyframe block applies to that keyframe, otherwise the timing function specified for the animation is used.
- </p>
-
- <!-- ======================================================================================================= -->
- <h3>
- 3.5 The <span class="prop-name">'animation-iteration-count'</span> Property
- </h3>
- <p>
- The <span class="prop-name">'animation-iteration-count'</span> property defines the number of times an animation cycle is played. The default value is one, meaning the animation will play from beginning to end once. A value of <span class="prop-value">'infinite'</span> will cause the animation to repeat forever. Non-integer numbers will cause the animation to end part-way through a cycle. Negative values for <span class="prop-name">'animation-iteration-count'</span> are treated as zero. This property is often used with an <span class="prop-name">'animation-direction'</span> value of <span class="prop-value">'alternate'</span>, which will cause the animation to play in reverse on alternate cycles.
- </p>
- <table class="propdef">
- <tbody>
- <tr>
- <td>
- <em>Name:</em>
- </td>
- <td>
- <dfn id="animation-iteration-count">animation-iteration-count</dfn>
- </td>
- </tr>
- <tr>
- <td>
- <em>Value:</em>
- </td>
- <td>
- infinite | <number> [, infinite | <number>]*
- </td>
- </tr>
- <tr>
- <td>
- <em>Initial:</em>
- </td>
- <td>
- 1
- </td>
- </tr>
- <tr>
- <td>
- <em>Applies to:</em>
- </td>
- <td>
- block-level and inline-level elements
- </td>
- </tr>
- <tr>
- <td>
- <em>Inherited:</em>
- </td>
- <td>
- no
- </td>
- </tr>
- <tr>
- <td>
- <em>Percentages:</em>
- </td>
- <td>
- N/A
- </td>
- </tr>
- <tr>
- <td>
- <em>Media:</em>
- </td>
- <td>
- visual
- </td>
- </tr>
- <tr>
- <td>
- <em>Computed value:</em>
- </td>
- <td>
- Same as specified value.
- </td>
- </tr>
- </tbody>
- </table><!-- ======================================================================================================= -->
- <h3>
- 3.6 The <span class="prop-name">'animation-direction'</span> Property
- </h3>
- <p>
- The <span class="prop-name">'animation-direction'</span> property defines whether or not the animation should play in reverse on alternate cycles. If <span class="prop-value">'alternate'</span> is specified, the animation cycle iterations that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction. When an animation is played in reverse the timing functions are also reversed. For example, when played in reverse an ease-in animation would appear to be an ease-out animation.
- </p>
- <table class="propdef">
- <tbody>
- <tr>
- <td>
- <em>Name:</em>
- </td>
- <td>
- <dfn id="animation-direction">animation-direction</dfn>
- </td>
- </tr>
- <tr>
- <td>
- <em>Value:</em>
- </td>
- <td>
- normal | alternate [, normal | alternate]*
- </td>
- </tr>
- <tr>
- <td>
- <em>Initial:</em>
- </td>
- <td>
- normal
- </td>
- </tr>
- <tr>
- <td>
- <em>Applies to:</em>
- </td>
- <td>
- block-level and inline-level elements
- </td>
- </tr>
- <tr>
- <td>
- <em>Inherited:</em>
- </td>
- <td>
- no
- </td>
- </tr>
- <tr>
- <td>
- <em>Percentages:</em>
- </td>
- <td>
- N/A
- </td>
- </tr>
- <tr>
- <td>
- <em>Media:</em>
- </td>
- <td>
- visual
- </td>
- </tr>
- <tr>
- <td>
- <em>Computed value:</em>
- </td>
- <td>
- Same as specified value.
- </td>
- </tr>
- </tbody>
- </table><!-- ======================================================================================================= -->
- <h3>
- 3.7 The <span class="prop-name">'animation-play-state'</span> Property
- </h3>
-
- <div class="issue">
- We are considering removing 'animation-play-state' since its behaviour can
- be replicated using other techniques. For example, by querying the
- computed style, removing the animation and then setting style.
- </div>
-
- <p>
- The <span class="prop-name">'animation-play-state'</span> property defines whether the animation is running or paused. A running animation can be paused by setting this property to <span class="prop-value">'paused'</span>. To continue running a paused animation this property can be set to <span class="prop-value">'running'</span>. A paused animation will continue to display the current value of the animation in a static state, as if the time of the animation is constant. When a paused animation is resumed, it restarts from the current value, not necessarily from the beginning of the animation.
- </p>
- <table class="propdef">
- <tbody>
- <tr>
- <td>
- <em>Name:</em>
- </td>
- <td>
- <dfn id="animation-play-state">animation-play-state</dfn>
- </td>
- </tr>
- <tr>
- <td>
- <em>Value:</em>
- </td>
- <td>
- running | paused [, running | paused]*
- </td>
- </tr>
- <tr>
- <td>
- <em>Initial:</em>
- </td>
- <td>
- running
- </td>
- </tr>
- <tr>
- <td>
- <em>Applies to:</em>
- </td>
- <td>
- block-level and inline-level elements
- </td>
- </tr>
- <tr>
- <td>
- <em>Inherited:</em>
- </td>
- <td>
- no
- </td>
- </tr>
- <tr>
- <td>
- <em>Percentages:</em>
- </td>
- <td>
- N/A
- </td>
- </tr>
- <tr>
- <td>
- <em>Media:</em>
- </td>
- <td>
- visual
- </td>
- </tr>
- <tr>
- <td>
- <em>Computed value:</em>
- </td>
- <td>
- Same as specified value.
- </td>
- </tr>
- </tbody>
- </table><!-- ======================================================================================================= -->
- <h3>
- 3.8 The <span class="prop-name">'animation-delay'</span> Property
- </h3>
- <p>
- The <span class="prop-name">'animation-delay'</span> property defines when the animation will start. It allows an animation to begin execution some time after it is applied. An <span class="prop-name">'animation-delay'</span> value of '0' means the animation will execute as soon as it is applied. Otherwise, the value specifies an offset from the moment the animation is applied, and the animation will delay execution by that offset.
- </p>
- <p>
- If the value for <span class="prop-name">'animation-delay'</span> is a negative time offset then the animation will execute the moment it is applied, but will appear to have begun execution at the specified offset. That is, the animation will appear to begin part-way through its play cycle. In the case where an animation has implied starting values and a negative <span class="prop-name">'animation-delay'</span>, the starting values are taken from the moment the animation is applied.
- </p>
- <table class="propdef">
- <tbody>
- <tr>
- <td>
- <em>Name:</em>
- </td>
- <td>
- <dfn id="animation-trigger">animation-delay</dfn>
- </td>
- </tr>
- <tr>
- <td>
- <em>Value:</em>
- </td>
- <td>
- <time> [, <time>]*
- </td>
- </tr>
- <tr>
- <td>
- <em>Initial:</em>
- </td>
- <td>
- 0
- </td>
- </tr>
- <tr>
- <td>
- <em>Applies to:</em>
- </td>
- <td>
- block-level and inline-level elements
- </td>
- </tr>
- <tr>
- <td>
- <em>Inherited:</em>
- </td>
- <td>
- no
- </td>
- </tr>
- <tr>
- <td>
- <em>Percentages:</em>
- </td>
- <td>
- N/A
- </td>
- </tr>
- <tr>
- <td>
- <em>Media:</em>
- </td>
- <td>
- visual
- </td>
- </tr>
- <tr>
- <td>
- <em>Computed value:</em>
- </td>
- <td>
- Same as specified value.
- </td>
- </tr>
- </tbody>
- </table><!-- ======================================================================================================= -->
- <h3>
- 3.9 The <span class="prop-name">'animation'</span> Shorthand Property
- </h3>
- <p>
- The <span class="prop-name">'animation'</span> shorthand property combines six of the animation properties into a single property.
- </p>
- <table class="propdef">
- <tbody>
- <tr>
- <td>
- <em>Name:</em>
- </td>
- <td>
- <dfn id="animation">animation</dfn>
- </td>
- </tr>
- <tr>
- <td>
- <em>Value:</em>
- </td>
- <td>
- [<animation-name> ||
- <animation-duration> ||
- <animation-timing-function> ||
- <animation-delay> ||
- <animation-iteration-count> ||
- <animation-direction>]
- [, [<animation-name> ||
- <animation-duration> ||
- <animation-timing-function> ||
- <animation-delay> ||
- <animation-iteration-count> ||
- <animation-direction>] ]*
- </td>
- </tr>
- <tr>
- <td>
- <em>Initial:</em>
- </td>
- <td>
- see individual properties
- </td>
- </tr>
- <tr>
- <td>
- <em>Applies to:</em>
- </td>
- <td>
- block-level and inline-level elements
- </td>
- </tr>
- <tr>
- <td>
- <em>Inherited:</em>
- </td>
- <td>
- no
- </td>
- </tr>
- <tr>
- <td>
- <em>Percentages:</em>
- </td>
- <td>
- N/A
- </td>
- </tr>
- <tr>
- <td>
- <em>Media:</em>
- </td>
- <td>
- visual
- </td>
- </tr>
- <tr>
- <td>
- <em>Computed value:</em>
- </td>
- <td>
- Same as specified value.
- </td>
- </tr>
- </tbody>
- </table><!-- ======================================================================================================= -->
- <h2>
- 4 Animation Events
- </h2>
- <p>
- Several animation related events are available through the <a
- href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM Event
- system</a>. The start and end of an animation, and the end of each
- iteration of an animation all generate DOM events. An element can have
- multiple properties being animated simultaneously. This can occur either
- with a single <span class="prop-name">animation-name</span> value with
- keyframes containing multiple properties, or with multiple <span
- class="prop-name">animation-name</span> values. For the purposes of
- events, each <span class="prop-name">animation-name</span> specifies a
- single animation. Therefore an event will be generated for each <span
- class="prop-name">animation-name</span> value and not necessarily for
- each property being animated.
- </p>
- <p>
- The time the animation has been running is sent with each event
- generated. This allows the event handler to determine the current
- iteration of a looping animation or the current position of an
- alternating animation. This time does not include any time the animation
- was in the <code>paused</code> play state.
- </p>
- <dl>
- <dt>
- <b>Interface <i><a id="Events-AnimationEvent" name='Events-AnimationEvent'>AnimationEvent</a></i></b>
- </dt>
- <dd>
- <p>
- The <code>AnimationEvent</code> interface provides specific contextual information associated with Animation events.
- </p>
- <dl>
- <dt>
- <br>
- <b>IDL Definition</b>
- </dt>
- <dd>
- <div class='idl-code'>
- <pre>
-interface AnimationEvent : Event {
- readonly attribute DOMString animationName;
- readonly attribute float elapsedTime;
- void initAnimationEvent(in DOMString typeArg,
- in boolean canBubbleArg,
- in boolean cancelableArg,
- in DOMString animationNameArg,
- in float elapsedTimeArg);
-};
-</pre>
- </div>
- </dd>
- <dt>
- <b>Attributes</b>
- </dt>
- <dd>
- <dl>
- <dt>
- <code class='attribute-name'><a id="Events-AnimationEvent-animationName" name='Events-AnimationEvent-animationName'>animationName</a></code> of type <code>DOMString</code>, readonly
- </dt>
- <dd>
- The value of the <span class="prop-name">animation-name</span> property of the animation that fired the event.
- </dd>
- </dl>
- <dl>
- <dt>
- <code class='attribute-name'><a id="Events-AnimationEvent-elapsedTime" name='Events-AnimationEvent-elapsedTime'>elapsedTime</a></code> of type <code>float</code>, readonly
- </dt>
- <dd>
- The amount of time the animation has been running, in seconds, when this event fired, excluding any time the animation was paused. Note that this value is not affected by the value of <span class="prop-name">animation-delay</span>. For an "animationstart" event, the elapsedTime is always zero.
- </dd>
- </dl>
- </dd>
- <dt>
- <b>Methods</b>
- </dt>
- <dd>
- <dl>
- <dt>
- <code class='method-name'><a id="Events-AnimationEvent-initAnimationEvent" name='Events-AnimtionEvent-initAnimationEvent'>initAnimationEvent</a></code>
- </dt>
- <dd>
- <div class='method'>
- The <code>initAnimationEvent</code> method is used to initialize the value of an <code>AnimationEvent</code> created through the <a href='events.html#Events-DocumentEvent'><code>DocumentEvent</code></a> interface. This method may only be called before the <code>AnimationEvent</code> has been dispatched via the <code>dispatchEvent</code> method, though it may be called multiple times during that phase if necessary. If called multiple times, the final invocation takes precedence.
- <div class='parameters'>
- <b>Parameters</b>
- <div class='paramtable'>
- <dl>
- <dt>
- <code class='parameter-name'>typeArg</code> of type <code>DOMString</code>
- </dt>
- <dd>
- Specifies the event type.<br>
- </dd>
- <dt>
- <code class='parameter-name'>canBubbleArg</code> of type <code>boolean</code>
- </dt>
- <dd>
- Specifies whether or not the event can bubble.<br>
- </dd>
- <dt>
- <code class='parameter-name'>cancelableArg</code> of type <code>boolean</code>
- </dt>
- <dd>
- Specifies whether or not the event's default action can be prevented.
- </dd>
- <dt>
- <code class='parameter-name'>animationNameArg</code> of type <code>DOMString</code>
- </dt>
- <dd>
- Specifies the <a href='events.html#Events-Event'><code>Event</code></a>'s animation name.<br>
- </dd>
- <dt>
- <code class='parameter-name'>elapsedTimeArg</code> of type <code>float</code>
- </dt>
- <dd>
- Specifies the amount of time, in seconds, the animation has been running at the time of initialization.
- </dd>
- </dl>
- </div>
- </div><!-- parameters -->
- <div>
- <b>No Return Value</b>
- </div>
- <div>
- <b>No Exceptions</b>
- </div>
- </div><!-- method -->
- </dd>
- </dl>
- </dd>
- </dl>
- </dd>
- </dl>
- <p>
- The different types of Animation events that can occur are:
- </p>
- <dl>
- <dt>
- <b>animationstart</b>
- </dt>
- <dd>
- The 'animationstart' event occurs at the start of the animation
- <ul>
- <li>Bubbles: Yes
- </li>
- <li>Cancelable: Yes
- </li>
- <li>Context Info: animationName
- </li>
- </ul>
- </dd>
- <dt>
- <b>animationend</b>
- </dt>
- <dd>
- The 'animationend' event occurs when the animation finishes.
- <ul>
- <li>Bubbles: Yes
- </li>
- <li>Cancelable: Yes
- </li>
- <li>Context Info: animationName, elapsedTime
- </li>
- </ul>
- </dd>
- <dt>
- <b>animationiteration</b>
- </dt>
- <dd>
- The 'animationiteration' event occurs at the end of each iteration of an animation for which <code>animation-iteration-count</code> is greater than one. This event does not occur for animations with an iteration count of one.
- <ul>
- <li>Bubbles: Yes
- </li>
- <li>Cancelable: Yes
- </li>
- <li>Context Info: animationName, elapsedTime
- </li>
- </ul>
- </dd>
- </dl>
- <!-- ======================================================================================================= -->
- <h2>
- 5 DOM Interfaces
- </h2>
- <p>
- CSS animation is exposed to the CSSOM through a pair of new interfaces
- describing the keyframes.
- </p>
- <dl>
- <dt>
- <b>Interface <i><a id="DOM-CSSRule" name='DOM-CSSRule'>CSSRule</a></i></b>
- </dt>
- <dd>
- <p>
- The following 2 rule types are added to the <code>CSSRule</code> interface. They provide identification for the new keyframe and keyframes rules.
- </p>
- <dl>
-
- <dt>
- <b>IDL Definition</b>
- </dt>
- <dd>
- <div class='idl-code'>
- <pre>
- interface CSSRule {
- ...
- const unsigned short KEYFRAMES_RULE = 7;
- const unsigned short KEYFRAME_RULE = 8;
- ...
- };</pre>
- </div>
- </dd> <!-- IDL -->
- </dl>
- </dd>
-
- <dt>
- <b>Interface <i><a id="DOM-CSSKeyframeRule" name='DOM-CSSKeyframeRule'>CSSKeyframeRule</a></i></b>
- </dt>
- <dd>
- <p>
- The <code>CSSKeyframeRule</code> interface represents the style rule for a single key.
- </p>
- <dl>
- <dt>
- <br>
- <b>IDL Definition</b>
- </dt>
- <dd>
- <div class='idl-code'>
- <pre>
- interface CSSKeyframeRule : CSSRule {
- attribute DOMString keyText;
- readonly attribute CSSStyleDeclaration style;
- };
- </pre>
- </div><br>
- </dd>
- <dt>
- <b>Attributes</b>
- </dt>
- <dd>
- <dl>
- <dt>
- <code class='attribute-name'><a id="DOM-CSSKeyframeRule-keyText" name='DOM-CSSKeyframeRule-keyText'>keyText</a></code> of type <code>DOMString</code>
- </dt>
- <dd>
- This attribute represents the key as the string representation of a floating point number between 0 and 1. If the value
- in the CSS style is <code>from</code> this value will be 0, and if the value in the CSS style is <code>to</code> this
- value will be 1.<br>
- </dd>
- </dl>
- </dd>
- <dd>
- <dl>
- <dt>
- <code class='attribute-name'><a id="DOM-CSSKeyframeRule-style" name='DOM-CSSKeyframeRule-style'>style</a></code> of type <code>CSSStyleDeclaration</code>
- </dt>
- <dd>
- This attribute represents the style associated with this keyframe.<br>
- </dd>
- </dl>
- </dd>
- <dt>
- <b>No Methods</b>
- </dt>
- </dl>
- </dd>
- </dl>
- <dl>
- <dt>
- <b>Interface <i><a id="DOM-CSSKeyframesRule" name='DOM-CSSKeyframesRule'>CSSKeyframesRule</a></i></b>
- </dt>
- <dd>
- <p>
- The <code>CSSKeyframesRule</code> interface represents a complete set of keyframes for a single animation.
- </p>
- <dl>
- <dt>
- <br>
- <b>IDL Definition</b>
- </dt>
- <dd>
- <div class='idl-code'>
- <pre>
- interface CSSKeyframesRule : CSSRule {
- attribute DOMString name;
- readonly attribute CSSRuleList cssRules;
-
- void insertRule(in DOMString rule);
- void deleteRule(in DOMString key);
- CSSKeyframeRule findRule(in DOMString key);
- };
- </pre>
- </div><br>
- </dd>
- <dt>
- <b>Attributes</b>
- </dt>
- <dd>
- <dl>
- <dt>
- <code class='attribute-name'><a id="DOM-CSSKeyframesRule-name" name='DOM-CSSKeyframesRule-name'>name</a></code> of type <code>DOMString</code>
- </dt>
- <dd>
- This attribute is the name of the keyframes, used by the <code>animation-name</code> property.<br>
- </dd>
- </dl>
- </dd>
- <dd>
- <dl>
- <dt>
- <code class='attribute-name'><a id="DOM-CSSKeyframeRules-cssRules" name='DOM-CSSKeyframeRules-cssRules'>cssRules</a></code> of type <code>CSSRuleList</code>
- </dt>
- <dd>
- This attribute gives access to the keyframes in the list.<br>
- </dd>
- </dl>
- </dd>
- <dt>
- <b>Methods</b>
- <dd>
- <dl>
- <!-- ======================================================================================================= -->
- <dt>
- <code class='method-name'><a id="DOM-CSSKeyframesRule-insertRule" name='DOM-CSSKeyframesRule-insertRule'>insertRule</a></code>
- </dt>
- <dd>
- <div class='method'>
- The <code>insertRule</code> method inserts the passed CSSKeyframeRule into the list at the passed key.
- <div class='parameters'>
- <b>Parameters</b>
- <div class='paramtable'>
- <dl>
- <dt>
- <code class='parameter-name'>rule</code> of type <code>DOMString</code>
- </dt>
- <dd>
- The rule to be inserted, expressed in the same syntax as one entry in the
- <code>@keyframes</code> rule. The key is included in the rule string, which described the
- point at which the rule should be inserted. If a rule with the same key already exists in
- the list, it is replaced with this rule.
- </dd>
- </dl>
- </div>
- </div><!-- parameters -->
- <div class='return-value'>
- <b>No Return Value</b>
- </div>
- <div>
- <b>No Exceptions</b>
- </div>
- </div><!-- ======================================================================================================= -->
- </dd>
- <dt>
- <code class='method-name'><a id="DOM-CSSKeyframesRule-deleteRule" name='DOM-CSSKeyframesRule-deleteRule'>deleteRule</a></code>
- </dt>
- <dd>
- <div class='method'>
- The <code>deleteRule</code> method deletes the CSSKeyframeRule with the passed key. If a rule with this key
- does not exist, the method does nothing.
- <div class='parameters'>
- <b>Parameters</b>
- <div class='paramtable'>
- <dl>
- <dt>
- <code class='parameter-name'>key</code> of type <code>DOMString</code>
- </dt>
- <dd>
- The key which describes the rule to be deleted. The key must
- resolve to a number between 0 and 1, or the rule is ignored.<br>
- </dd>
- </dl>
- </div>
- </div><!-- parameters -->
- <div class='return-value'>
- <b>No Return Value</b>
- </div>
- <div>
- <b>No Exceptions</b>
- </div>
- </div><!-- ======================================================================================================= -->
- </dd>
- <dt>
- <code class='method-name'><a id="DOM-CSSKeyframesRule-findRule" name='DOM-CSSKeyframesRule-findRule'>findRule</a></code>
- </dt>
- <dd>
- <div class='method'>
- The <code>findRule</code> method returns the rule with a key matching the passed key. If no such rule
- exists, a null value is returned.
- <div class='parameters'>
- <b>Parameters</b>
- <div class='paramtable'>
- <dl>
- <dt>
- <code class='parameter-name'>key</code> of type <code>DOMString</code>
- </dt>
- <dd>
- The key which described the rule to find. The key must
- resolve to a number between 0 and 1, or the rule is ignored.<br>
- </dd>
- </dl>
- </div>
- </div><!-- parameters -->
- <div class='return-value'>
- <b>Return Value</b>
- <div class='returnvalue'>
- <dl>
- <dt>
- <code>CSSKeyframeRule</code>
- </dt>
- <dd>
- The found rule.<br>
- </dd>
- </dl>
- </div>
- </div>
- <div>
- <b>No Exceptions</b>
- </div>
- </div><!-- ======================================================================================================= -->
- </dd>
- </dl><!-- method -->
- </dd>
- </dt>
- </dl>
- </dd>
- </dl>
-
- </body>
-</html>
diff --git a/WebKitSite/specs/CSSVisualEffects/css3-animations/Makefile b/WebKitSite/specs/CSSVisualEffects/css3-animations/Makefile
deleted file mode 100644
index f26d0fb..0000000
--- a/WebKitSite/specs/CSSVisualEffects/css3-animations/Makefile
+++ /dev/null
@@ -1,39 +0,0 @@
-# Calling the post-processor with file-upload. Assumes the username
-# and password are in ~/.curl-w3.org
-#
-# Possible other options:
-# -F date=YYYY-MM-DD
-# -F ids=on
-
-%.html: %.src.html
- @echo "Calling post-processor to generate $@..."
- @curl -F file=@$< -F group=CSS -F output=html -F method=file -s -K ~/.curl-w3.org http://cgi.w3.org/member-bin/process.cgi >$@
-%.err: %.src.html
- @echo "Calling post-processor to check $<..."
- @curl -F file=@$< -F group=CSS -F output=err -F method=file -s -K ~/.curl-w3.org http://cgi.w3.org/member-bin/process.cgi >$@
-
-
-
-all: check Overview.html
- @echo Done.
-
-check: Overview.err
- @cat $<
- @grep -q '^No errors$$' $< # Force a non-zero exit code if errors
-
-
-
-# A handy shortcut:
-
-commit: update clean all
- cvs commit -m 'Generated. Do not edit!' Overview.html
-
-update:
- cvs update
-
-clean:
- rm Overview.html
-
-
-
-.PHONY: check commit update clean
diff --git a/WebKitSite/specs/CSSVisualEffects/css3-animations/Overview.err b/WebKitSite/specs/CSSVisualEffects/css3-animations/Overview.err
deleted file mode 100644
index 4269126..0000000
--- a/WebKitSite/specs/CSSVisualEffects/css3-animations/Overview.err
+++ /dev/null
@@ -1 +0,0 @@
-No errors
diff --git a/WebKitSite/specs/CSSVisualEffects/css3-animations/Overview.html b/WebKitSite/specs/CSSVisualEffects/css3-animations/Overview.html
deleted file mode 100644
index 784de23..0000000
--- a/WebKitSite/specs/CSSVisualEffects/css3-animations/Overview.html
+++ /dev/null
@@ -1,1658 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
-"http://www.w3.org/TR/html4/strict.dtd">
-
-<html lang=en>
- <head>
- <title>CSS Animations Module Level 3</title>
- <link href=default.css rel=stylesheet type="text/css">
-
- <style type="text/css">
- .rhs { white-space: pre-wrap; }
- code { font-size: inherit; }
- #box-shadow-samples td { background: white; color: black; }
-
- table {
- border-collapse: collapse;
- }
- td {
- padding: 0.2em 1em;
- border: 1px solid black;
- }
- </style>
- <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
- type="text/css">
-
- <body>
- <div class=head> <!--begin-logo-->
- <p><a href="http://www.w3.org/"><img alt=W3C height=48
- src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
-
- <h1>CSS Animations Module Level 3</h1>
-
- <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 14 April 2009</h2>
-
- <dl>
- <dt>This version:
-
- <dd><a
- href="http://www.w3.org/TR/2009/ED-css3-animations-20090414">http://dev.w3.org/csswg/css3-animations/</a>
- <!--http://www.w3.org/TR/2009/WD-css3-animations-20090414-->
-
- <dt>Latest version:
-
- <dd><a
- href="http://www.w3.org/TR/css3-animations">http://www.w3.org/TR/css3-animations</a>
-
-
- <dt>Previous version:
-
- <dd><a href="http://www.w3.org/TR/2009/WD-css3-animations-20090320/">
- http://www.w3.org/TR/2009/WD-css3-animations-20090320/</a>
-
- <dt id=editors-list>Editors:
-
- <dd><a href="mailto:dino at apple.com">Dean Jackson</a> (<a
- href="http://www.apple.com/">Apple Inc</a>)
-
- <dd><a href="mailto:hyatt at apple.com">David Hyatt</a> (<a
- href="http://www.apple.com/">Apple Inc</a>)
-
- <dd><a href="mailto:cmarrin at apple.com">Chris Marrin</a> (<a
- href="http://www.apple.com/">Apple Inc</a>)
- </dl>
- <!--begin-copyright-->
- <p class=copyright><a
- href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
- rel=license>Copyright</a> © 2009 <a
- href="http://www.w3.org/"><acronym title="World Wide Web
- Consortium">W3C</acronym></a><sup>®</sup> (<a
- href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute
- of Technology">MIT</acronym></a>, <a
- href="http://www.ercim.org/"><acronym title="European Research Consortium
- for Informatics and Mathematics">ERCIM</acronym></a>, <a
- href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
- href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
- <a
- href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
- and <a
- href="http://www.w3.org/Consortium/Legal/copyright-documents">document
- use</a> rules apply.</p>
- <!--end-copyright-->
- <hr title="Separator for header">
- </div>
-
- <h2 class="no-num no-toc" id=abstract>Abstract</h2>
-
- <p>CSS Animations allow an author to modify CSS property values over time.
-
- <h2 class="no-num no-toc" id=status>Status of this document</h2>
- <!--begin-status-->
-
- <p>This is a public copy of the editors' draft. It is provided for
- discussion only and may change at any moment. Its publication here does
- not imply endorsement of its contents by W3C. Don't cite this document
- other than as work in progress.
-
- <p>The (<a
- href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
- mailing list <a href="mailto:www-style at w3.org">www-style at w3.org</a> (see
- <a href="http://www.w3.org/Mail/Request">instructions</a>) is preferred
- for discussion of this specification. When sending e-mail, please put the
- text “css3-animations” in the subject, preferably like this:
- “[<!---->css3-animations<!---->] <em>…summary of
- comment…</em>”
-
- <p>This document was produced by the <a href="/Style/CSS/members">CSS
- Working Group</a> (part of the <a href="/Style/">Style Activity</a>).
-
- <p>This document was produced by a group operating under the <a
- href="/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent
- Policy</a>. W3C maintains a <a href="/2004/01/pp-impl/32061/status"
- rel=disclosure>public list of any patent disclosures</a> made in
- connection with the deliverables of the group; that page also includes
- instructions for disclosing a patent. An individual who has actual
- knowledge of a patent which the individual believes contains <a
- href="/Consortium/Patent-Policy-20040205/#def-essential">Essential
- Claim(s)</a> must disclose the information in accordance with <a
- href="/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the
- W3C Patent Policy</a>.</p>
- <!--end-status-->
-
- <h2 class="no-num no-toc" id=contents>Table of contents</h2>
- <!--begin-toc-->
-
- <ul class=toc>
- <li><a href="#introduction"><span class=secno>1 </span>Introduction</a>
-
- <li><a href="#keyframes-"><span class=secno>2 </span> Keyframes </a>
- <ul class=toc>
- <li><a href="#timing-functions-for-keyframes-"><span class=secno>2.1
- </span> Timing functions for keyframes </a>
- </ul>
-
- <li><a href="#animations-"><span class=secno>3 </span> Animations </a>
- <ul class=toc>
- <li><a href="#animation-behavior-"><span class=secno>3.1 </span>
- Animation behavior </a>
-
- <li><a href="#the-animation-name-property-"><span class=secno>3.2
- </span> The <span class=prop-name>‘<code
- class=property>animation-name</code>’</span> Property </a>
-
- <li><a href="#the-animation-duration-property-"><span class=secno>3.3
- </span> The <span class=prop-name>‘<code
- class=property>animation-duration</code>’</span> Property </a>
-
- <li><a href="#animation-timing-function_tag"><span class=secno>3.4
- </span> The <span class=prop-name>‘<code
- class=property>animation-timing-function</code>’</span> Property
- </a>
-
- <li><a href="#the-animation-iteration-count-property-"><span
- class=secno>3.5 </span> The <span class=prop-name>‘<code
- class=property>animation-iteration-count</code>’</span> Property
- </a>
-
- <li><a href="#the-animation-direction-property-"><span class=secno>3.6
- </span> The <span class=prop-name>‘<code
- class=property>animation-direction</code>’</span> Property </a>
-
- <li><a href="#the-animation-play-state-property-"><span class=secno>3.7
- </span> The <span class=prop-name>‘<code
- class=property>animation-play-state</code>’</span> Property </a>
-
- <li><a href="#the-animation-delay-property-"><span class=secno>3.8
- </span> The <span class=prop-name>‘<code
- class=property>animation-delay</code>’</span> Property </a>
-
- <li><a href="#the-animation-shorthand-property-"><span class=secno>3.9
- </span> The <span class=prop-name>‘<code
- class=property>animation</code>’</span> Shorthand Property </a>
- </ul>
-
- <li><a href="#animation-events-"><span class=secno>4 </span> Animation
- Events </a>
-
- <li><a href="#dom-interfaces-"><span class=secno>5 </span> DOM Interfaces
- </a>
-
- <li><a href="#references"><span class=secno>6 </span>References</a>
- <ul class=toc>
- <li class=no-num><a href="#normative-references">Normative
- references</a>
-
- <li class=no-num><a href="#other-references">Other references</a>
- </ul>
-
- <li class=no-num><a href="#property-index">Property index</a>
-
- <li class=no-num><a href="#index">Index</a>
- </ul>
- <!--end-toc-->
-
- <h2 id=introduction><span class=secno>1 </span>Introduction</h2>
-
- <p><em>This section is not normative.</em>
-
- <p> This document introduces new CSS features to enable animation.
-
- <p> Animation is currently possible in languages like SVG, but no system
- exists for the native animation of CSS styles. This proposal introduces
- <em>defined animations</em>, which specify the values that CSS properties
- will take over a given time interval.
-
- <p> This specification is an extension to CSS Transitions <a
- href="#CSS3-TRANSITIONS"
- rel=biblioentry>[CSS3-TRANSITIONS]<!--{{!CSS3-TRANSITIONS}}--></a>.
-
- <h2 id=keyframes-><span class=secno>2 </span> Keyframes</h2>
-
- <p> In a simple transition, since both the starting value and ending value
- are known, a single timing function and duration determine the
- intermediate values of the animating property. If finer control of the
- intermediate values is required, keyframes can be used.
-
- <p> Keyframes are specified using a specialized CSS at-rule. A <span
- class=prop-name>@keyframes</span> rule consists of the keyword
- "@keyframes", followed by an identifier giving a name for the animation
- (which will be referenced using <span class=prop-name>‘<code
- class=property><a
- href="#animation-name">animation-name</a></code>’</span>), followed
- by a set of style rules (delimited by curly braces).
-
- <p> The <i>keyframe selector</i> for a keyframe style rule consists of a
- comma-separated list of percentage values or the keywords ‘<code
- class=property>from</code>’ or ‘<code
- class=property>to</code>’. The selector is used to specify the
- percentage along the duration of the animation that the keyframe
- represents. The keyframe itself is specified by the block of property
- values declared on the selector. The keyword ‘<code
- class=property>from</code>’ is equivalent to the value 0. The
- keyword ‘<code class=property>to</code>’ is equivalent to the
- value 100%. Note that the percentage unit specifier must be used on
- percentage values. Therefore, "0" is an invalid keyframe selector.
-
- <p> Keyframes can be specified in any order. The selector determines the
- placement of the keyframe in the animation.
-
- <p> Every keyframe declaration must have a keyframe rule for 0% or 100%,
- possibly defined using "from" or "to". A keyframe declaration without
- these keyframe selectors is invalid and will not be available for
- animation.
-
- <p> The <i>keyframe declaration</i> for a keyframe rule consists of
- properties and values. Properties that are unable to be animated are
- ignored in these rules, with the exception of <a class=prop-name
- href="#animation-timing-function">animation-timing-function'</a>, the
- behavior of which is described below.
-
- <p> The @keyframes rule that is used by an animation will be the last one
- encountered in sorted rules order that matches the name of the animation.
- <span class=prop-name>@keyframes</span> rules do not cascade; therefore an
- animation will never derive keyframes from more than one <span
- class=prop-name>@keyframes</span> rule.
-
- <p> To determine the set of keyframes, all of the values in selectors are
- sorted in increasing order by time. If there are any duplicates, then the
- last keyframe specified inside the <span class=prop-name>@keyframes</span>
- rule will be used to provide the keyframe information for that time. There
- is no cascading within a <span class=prop-name>@keyframes</span> rule if
- multiple keyframes specify the same keyframe selector values.
-
- <div class=example>
- <p style="display:none"> Example(s):</p>
-
- <pre>
- @keyframes 'wobble' {
-
- 0% {
- left: 100px;
- }
-
- 40% {
- left: 150px;
- }
-
- 60% {
- left: 75px;
- }
-
- 100% {
- left: 100px;
- }
-
- }
-
- </pre>
- Four keyframes are specified for the animation named "wobble". In the
- first keyframe, shown at the beginning of the animation cycle, the
- ‘<code class=property>left</code>’ value of the animation is
- 100px. By 40% of the animation duration, ‘<code
- class=property>left</code>’ value has animated to 150px. At 60% of
- the animation duration, the ‘<code class=property>left</code>’
- value has animated back to 75px. At the end of the animation cycle, the
- ‘<code class=property>left</code>’ value has returned to
- 100px. The diagram below shows the state of the animation if it were given
- a duration of 10s.
- <div class=figure> <img alt="" src=animation1.png></div>
-
- <p class=caption> Animations states specified by keyframes</p>
- </div>
-
- <p> The following is the grammar for the keyframes rule.
-
- <pre>
- keyframes-rule: '@keyframes' IDENT '{' keyframes-blocks '}';
-
- keyframes-blocks: [ keyframe-selectors block ]* ;
-
- keyframe-selectors: [ 'from' | 'to' | PERCENTAGE ] [ ',' [ 'from' | 'to' | PERCENTAGE ] ]*;
- </pre>
- <!-- ======================================================================================================= -->
-
- <h3 id=timing-functions-for-keyframes-><span class=secno>2.1 </span> Timing
- functions for keyframes</h3>
-
- <p> A keyframe style rule may also declare the timing function that is to
- be used as the animation moves to the next keyframe.
-
- <div class=example>
- <p style="display:none"> Example(s):</p>
-
- <pre>
- @keyframes 'bounce' {
-
- from {
- top: 100px;
- animation-timing-function: ease-out;
- }
-
- 25% {
- top: 50px;
- animation-timing-function: ease-in;
- }
-
- 50% {
- top: 100px;
- animation-timing-function: ease-out;
- }
-
- 75% {
- top: 75px;
- animation-timing-function: ease-in;
- }
-
- to {
- top: 100px;
- }
-
- }
-
- </pre>
- Five keyframes are specified for the animation named "bounce". Between the
- first and second keyframe (ie. between 0 and 25%) an "ease-out" timing
- function is used. Between the second and third keyframe (ie. between 25%
- and 50%) an "ease-in" timing function is used. And so on. The effect will
- appear as an element that moves up the page 50px, slowing down as it
- reaches its highest point then speeding up as it falls back to 100px. The
- second half of the animation behaves in a similar manner, but only moves
- the element 25px units up the page.</div>
-
- <p> See <a href="#animation-timing-function_tag">the <span
- class=prop-name>‘<code
- class=property>animation-timing-function</code>’</span> property</a>
- for more information.</p>
- <!-- ======================================================================================================= -->
-
- <h2 id=animations-><span class=secno>3 </span> Animations</h2>
-
- <p> Animations are similar to transitions in that they change the
- presentational value of CSS properties over time. The principal difference
- is that while transitions trigger <i>implicitly</i> when property values
- change, animations are <i>explicitly</i> executed when the animation
- properties are applied. Because of this, animations require explicit
- values for the properties being animated. These values are specified using
- animation keyframes, described above.
-
- <p> Many aspects of the animation can be controlled, including how many
- times the animation iterates, whether or not it alternates between the
- begin and end values, and whether or not the animation should be running
- or paused. An animation can also delay its start time.
-
- <div class=example>
- <p style="display:none"> Example(s):</p>
-
- <pre>
- div {
- animation-name: 'diagonal-slide';
- animation-duration: 5s;
- animation-iteration-count: 10;
- }
-
- @keyframes 'diagonal-slide' {
-
- from {
- left: 0;
- top: 0;
- }
-
- to {
- left: 100px;
- top: 100px;
- }
-
- }
-
- </pre>
- This will produce an animation that moves an element from (0, 0) to
- (100px, 100px) over five seconds and repeats itself nine times (for a
- total of ten iterations).</div>
- <!-- ======================================================================================================= -->
-
- <h3 id=animation-behavior-><span class=secno>3.1 </span> Animation behavior
- </h3>
-
- <p> CSS Animations affect computed property values. During the execution of
- an animation, the computed value for a property is controlled by the
- animation. This overrides the value specified in the normal styling
- system.
-
- <p> In the case of multiple animations specifying behavior for the same
- property, the animation defined last will override the previously defined
- animations.
-
- <p> An animation does not affect the computed value before the application
- of the animation, before the animation delay has expired, and after the
- end of the animation.
-
- <div class=figure> <img alt="" src=sandwich.png></div>
-
- <p class=caption> Computation of animated property values
-
- <p> The diagram above shows how property values are computed. The intrinsic
- style is shown at the top of the diagram. The computed value is derived
- from intrinsic style at the times when an animation is not running and
- also when an animation is delayed (see below for specification of
- animation delay). During an animation, the computed style is derived from
- the animated value.
-
- <p> The start time of an animation is the latter of two moments: the time
- at which the style is resolved that specifies the animation, or the time
- the document's load event is fired. Therefore, an animation specified in
- the document stylesheet will begin at the document load. An animation
- specified on an element by modifying the style after the document has
- loaded will start when the style is resolved. That may be immediately in
- the case of a pseudo style rule such as hover, or may be when the
- scripting engine returns control to the browser (in the case of style
- applied by script).
-
- <p> An animation applies to an element if the element has a value for <span
- class=prop-name>‘<code class=property><a
- href="#animation-name">animation-name</a></code>’</span> that
- references a valid keyframes rule. Once an animation has started it
- continues until it ends or the <span class=prop-name>‘<code
- class=property><a
- href="#animation-name">animation-name</a></code>’</span> is removed.
- The values used for the keyframes and animation properties are snapshotted
- at the time the animation starts. Changing them during the execution of
- the animation has no effect. Note also, that changing the value of <span
- class=prop-name>‘<code class=property><a
- href="#animation-name">animation-name</a></code>’</span> does not
- necessarily restart an animation (e.g. if a list of animations are applied
- and one is removed from the list, only that animation will stop; The other
- animations will continue). In order to restart an animation, it must be
- removed then reapplied.</p>
- <!-- ======================================================================================================= -->
-
- <h3 id=the-animation-name-property-><span class=secno>3.2 </span> The <span
- class=prop-name>‘<code class=property><a
- href="#animation-name">animation-name</a></code>’</span> Property</h3>
-
- <p> The <span class=prop-name>‘<code class=property><a
- href="#animation-name">animation-name</a></code>’</span> property
- defines a list of animations that apply. Each name is used to select the
- keyframe at-rule that provides the property values for the animation. If
- the name does not match any keyframe at-rule, there are no properties to
- be animated and the animation will not execute. Furthermore, if the
- animation name is ‘<code class=property>none</code>’ then
- there will be no animation. This can be used to override any animations
- coming from the cascade.
-
- <table class=propdef>
- <tbody>
- <tr>
- <td> <em>Name:</em>
-
- <td> <dfn id=animation-name>animation-name</dfn>
-
- <tr>
- <td> <em>Value:</em>
-
- <td> none | IDENT [, none | IDENT ]*
-
- <tr>
- <td> <em>Initial:</em>
-
- <td> none
-
- <tr>
- <td> <em>Applies to:</em>
-
- <td> block-level and inline-level elements
-
- <tr>
- <td> <em>Inherited:</em>
-
- <td> no
-
- <tr>
- <td> <em>Percentages:</em>
-
- <td> N/A
-
- <tr>
- <td> <em>Media:</em>
-
- <td> visual
-
- <tr>
- <td> <em>Computed value:</em>
-
- <td> Same as specified value.
- </table>
- <!--
- <p>
- It is possible for elements to have multiple animations running that change the same property or properties. In this case the animations combine in a manner defined by the property. For example, animations on <span class="prop-name">opacity</span> will add together and animations on <span class="prop-name">transform</span> will have their transformation matrices multiplied.
- </p>
- <div class="example">
- <p style="display:none">
- Example(s):
- </p>
- <pre>
- @keyframes 'border-bloat' {
- from {
- border-width: 0;
- }
- to {
- border-width: 10px;
- }
- }
-
- @keyframes 'border-diet' {
- from {
- border-width: 4px;
- }
- to {
- border-width: 2px;
- }
- }
-
- div {
- animation-name: 'border-bloat', 'border-diet';
- animation-duration: 10s, 4s;
- }
- </pre>
- <p>
- The above example has two animations executing on the same property, <span class="prop-name">border-width</span>. The animations are additive. That is, the
- resulting value for the property will be the addition of the values from the
- two animations.
- </p>
- <p>
- At time ‘<code class=css>0s</code>’ the element's border will be 4px wide (0px from ‘<code class=property>border-bloat</code>’ plus 4px from ‘<code class=property>border-diet</code>’).
- At time ‘<code class=css>4s</code>’ the element's border will be 6px wide (4px from ‘<code class=property>border-bloat</code>’ plus 2px from ‘<code class=property>border-diet</code>’).
- At time ‘<code class=css>10s</code>’ the element's border will be 10px wide (10px from ‘<code class=property>border-bloat</code>’ and no addition from
- ‘<code class=property>border-diet</code>’ as it is no longer executing).
- </p>
- </div>
- -->
- <!-- ======================================================================================================= -->
-
- <h3 id=the-animation-duration-property-><span class=secno>3.3 </span> The
- <span class=prop-name>‘<code class=property><a
- href="#animation-duration">animation-duration</a></code>’</span>
- Property</h3>
-
- <p> The <span class=prop-name>‘<code class=property><a
- href="#animation-duration">animation-duration</a></code>’</span>
- property defines the length of time that an animation takes to complete
- one cycle.
-
- <table class=propdef>
- <tbody>
- <tr>
- <td> <em>Name:</em>
-
- <td> <dfn id=animation-duration>animation-duration</dfn>
-
- <tr>
- <td> <em>Value:</em>
-
- <td> <time> [, <time>]*
-
- <tr>
- <td> <em>Initial:</em>
-
- <td> 0
-
- <tr>
- <td> <em>Applies to:</em>
-
- <td> block-level and inline-level elements
-
- <tr>
- <td> <em>Inherited:</em>
-
- <td> no
-
- <tr>
- <td> <em>Percentages:</em>
-
- <td> N/A
-
- <tr>
- <td> <em>Media:</em>
-
- <td> visual
-
- <tr>
- <td> <em>Computed value:</em>
-
- <td> Same as specified value.
- </table>
-
- <p> By default the value is ‘<code class=css>0</code>’, meaning
- that the animation cycle is immediate (i.e. there will be no animation). A
- negative value for <a class=prop-name
- href="#animation-duration">animation-duration</a> is treated as
- ‘<code class=css>0</code>’.</p>
- <!-- ======================================================================================================= -->
-
- <h3 id="animation-timing-function_tag"><span class=secno>3.4 </span> The
- <span class=prop-name>‘<code class=property><a
- href="#animation-timing-function">animation-timing-function</a></code>’</span>
- Property</h3>
-
- <p> The <span class=prop-name>‘<code class=property><a
- href="#animation-timing-function">animation-timing-function</a></code>’</span>
- property describes how the animation will progress over one cycle of its
- duration. See the <span class=prop-name>‘<code
- class=property>transition-timing-function</code>’</span> property <a
- href="#CSS3-TRANSITIONS"
- rel=biblioentry>[CSS3-TRANSITIONS]<!--{{!CSS3-TRANSITIONS}}--></a> for a
- complete description of timing function calculation.
-
- <table class=propdef>
- <tbody>
- <tr>
- <td> <em>Name:</em>
-
- <td> <dfn id=animation-timing-function>animation-timing-function</dfn>
-
- <tr>
- <td> <em>Value:</em>
-
- <td> ease | linear | ease-in | ease-out | ease-in-out |
- cubic-bezier(<number>, <number>, <number>,
- <number>) [, ease | linear | ease-in | ease-out | ease-in-out |
- cubic-bezier(<number>, <number>, <number>,
- <number>)]*
-
- <tr>
- <td> <em>Initial:</em>
-
- <td> ease
-
- <tr>
- <td> <em>Applies to:</em>
-
- <td> block-level and inline-level elements
-
- <tr>
- <td> <em>Inherited:</em>
-
- <td> no
-
- <tr>
- <td> <em>Percentages:</em>
-
- <td> N/A
-
- <tr>
- <td> <em>Media:</em>
-
- <td> visual
-
- <tr>
- <td> <em>Computed value:</em>
-
- <td> Same as specified value.
- </table>
-
- <p> For a keyframed animation, the <span class=prop-name>‘<code
- class=property><a
- href="#animation-timing-function">animation-timing-function</a></code>’</span>
- applies between keyframes, not over the entire animation. For example, in
- the case of an ease-in-out timing function, an animation will ease in at
- the start of the keyframe and ease out at the end of the keyframe. A <span
- class=prop-name>‘<code class=property><a
- href="#animation-timing-function">animation-timing-function</a></code>’</span>
- defined within a keyframe block applies to that keyframe, otherwise the
- timing function specified for the animation is used.</p>
- <!-- ======================================================================================================= -->
-
- <h3 id=the-animation-iteration-count-property-><span class=secno>3.5
- </span> The <span class=prop-name>‘<code class=property><a
- href="#animation-iteration-count">animation-iteration-count</a></code>’</span>
- Property</h3>
-
- <p> The <span class=prop-name>‘<code class=property><a
- href="#animation-iteration-count">animation-iteration-count</a></code>’</span>
- property defines the number of times an animation cycle is played. The
- default value is one, meaning the animation will play from beginning to
- end once. A value of <span class=prop-value>‘<code
- class=property>infinite</code>’</span> will cause the animation to
- repeat forever. Non-integer numbers will cause the animation to end
- part-way through a cycle. Negative values for <span
- class=prop-name>‘<code class=property><a
- href="#animation-iteration-count">animation-iteration-count</a></code>’</span>
- are treated as zero. This property is often used with an <span
- class=prop-name>‘<code class=property><a
- href="#animation-direction">animation-direction</a></code>’</span>
- value of <span class=prop-value>‘<code
- class=property>alternate</code>’</span>, which will cause the
- animation to play in reverse on alternate cycles.
-
- <table class=propdef>
- <tbody>
- <tr>
- <td> <em>Name:</em>
-
- <td> <dfn id=animation-iteration-count>animation-iteration-count</dfn>
-
- <tr>
- <td> <em>Value:</em>
-
- <td> infinite | <number> [, infinite | <number>]*
-
- <tr>
- <td> <em>Initial:</em>
-
- <td> 1
-
- <tr>
- <td> <em>Applies to:</em>
-
- <td> block-level and inline-level elements
-
- <tr>
- <td> <em>Inherited:</em>
-
- <td> no
-
- <tr>
- <td> <em>Percentages:</em>
-
- <td> N/A
-
- <tr>
- <td> <em>Media:</em>
-
- <td> visual
-
- <tr>
- <td> <em>Computed value:</em>
-
- <td> Same as specified value.
- </table>
- <!-- ======================================================================================================= -->
-
- <h3 id=the-animation-direction-property-><span class=secno>3.6 </span> The
- <span class=prop-name>‘<code class=property><a
- href="#animation-direction">animation-direction</a></code>’</span>
- Property</h3>
-
- <p> The <span class=prop-name>‘<code class=property><a
- href="#animation-direction">animation-direction</a></code>’</span>
- property defines whether or not the animation should play in reverse on
- alternate cycles. If <span class=prop-value>‘<code
- class=property>alternate</code>’</span> is specified, the animation
- cycle iterations that are odd counts are played in the normal direction,
- and the animation cycle iterations that are even counts are played in a
- reverse direction. When an animation is played in reverse the timing
- functions are also reversed. For example, when played in reverse an
- ease-in animation would appear to be an ease-out animation.
-
- <table class=propdef>
- <tbody>
- <tr>
- <td> <em>Name:</em>
-
- <td> <dfn id=animation-direction>animation-direction</dfn>
-
- <tr>
- <td> <em>Value:</em>
-
- <td> normal | alternate [, normal | alternate]*
-
- <tr>
- <td> <em>Initial:</em>
-
- <td> normal
-
- <tr>
- <td> <em>Applies to:</em>
-
- <td> block-level and inline-level elements
-
- <tr>
- <td> <em>Inherited:</em>
-
- <td> no
-
- <tr>
- <td> <em>Percentages:</em>
-
- <td> N/A
-
- <tr>
- <td> <em>Media:</em>
-
- <td> visual
-
- <tr>
- <td> <em>Computed value:</em>
-
- <td> Same as specified value.
- </table>
- <!-- ======================================================================================================= -->
-
- <h3 id=the-animation-play-state-property-><span class=secno>3.7 </span> The
- <span class=prop-name>‘<code class=property><a
- href="#animation-play-state">animation-play-state</a></code>’</span>
- Property</h3>
-
- <div class=issue> We are considering removing ‘<code
- class=property><a
- href="#animation-play-state">animation-play-state</a></code>’ since
- its behaviour can be replicated using other techniques. For example, by
- querying the computed style, removing the animation and then setting
- style.</div>
-
- <p> The <span class=prop-name>‘<code class=property><a
- href="#animation-play-state">animation-play-state</a></code>’</span>
- property defines whether the animation is running or paused. A running
- animation can be paused by setting this property to <span
- class=prop-value>‘<code class=property>paused</code>’</span>.
- To continue running a paused animation this property can be set to <span
- class=prop-value>‘<code class=property>running</code>’</span>.
- A paused animation will continue to display the current value of the
- animation in a static state, as if the time of the animation is constant.
- When a paused animation is resumed, it restarts from the current value,
- not necessarily from the beginning of the animation.
-
- <table class=propdef>
- <tbody>
- <tr>
- <td> <em>Name:</em>
-
- <td> <dfn id=animation-play-state>animation-play-state</dfn>
-
- <tr>
- <td> <em>Value:</em>
-
- <td> running | paused [, running | paused]*
-
- <tr>
- <td> <em>Initial:</em>
-
- <td> running
-
- <tr>
- <td> <em>Applies to:</em>
-
- <td> block-level and inline-level elements
-
- <tr>
- <td> <em>Inherited:</em>
-
- <td> no
-
- <tr>
- <td> <em>Percentages:</em>
-
- <td> N/A
-
- <tr>
- <td> <em>Media:</em>
-
- <td> visual
-
- <tr>
- <td> <em>Computed value:</em>
-
- <td> Same as specified value.
- </table>
- <!-- ======================================================================================================= -->
-
- <h3 id=the-animation-delay-property-><span class=secno>3.8 </span> The
- <span class=prop-name>‘<code class=property><a
- href="#animation-trigger">animation-delay</a></code>’</span>
- Property</h3>
-
- <p> The <span class=prop-name>‘<code class=property><a
- href="#animation-trigger">animation-delay</a></code>’</span>
- property defines when the animation will start. It allows an animation to
- begin execution some time after it is applied. An <span
- class=prop-name>‘<code class=property><a
- href="#animation-trigger">animation-delay</a></code>’</span> value
- of ‘<code class=css>0</code>’ means the animation will execute
- as soon as it is applied. Otherwise, the value specifies an offset from
- the moment the animation is applied, and the animation will delay
- execution by that offset.
-
- <p> If the value for <span class=prop-name>‘<code class=property><a
- href="#animation-trigger">animation-delay</a></code>’</span> is a
- negative time offset then the animation will execute the moment it is
- applied, but will appear to have begun execution at the specified offset.
- That is, the animation will appear to begin part-way through its play
- cycle. In the case where an animation has implied starting values and a
- negative <span class=prop-name>‘<code class=property><a
- href="#animation-trigger">animation-delay</a></code>’</span>, the
- starting values are taken from the moment the animation is applied.
-
- <table class=propdef>
- <tbody>
- <tr>
- <td> <em>Name:</em>
-
- <td> <dfn id=animation-trigger>animation-delay</dfn>
-
- <tr>
- <td> <em>Value:</em>
-
- <td> <time> [, <time>]*
-
- <tr>
- <td> <em>Initial:</em>
-
- <td> 0
-
- <tr>
- <td> <em>Applies to:</em>
-
- <td> block-level and inline-level elements
-
- <tr>
- <td> <em>Inherited:</em>
-
- <td> no
-
- <tr>
- <td> <em>Percentages:</em>
-
- <td> N/A
-
- <tr>
- <td> <em>Media:</em>
-
- <td> visual
-
- <tr>
- <td> <em>Computed value:</em>
-
- <td> Same as specified value.
- </table>
- <!-- ======================================================================================================= -->
-
- <h3 id=the-animation-shorthand-property-><span class=secno>3.9 </span> The
- <span class=prop-name>‘<code class=property><a
- href="#animation">animation</a></code>’</span> Shorthand Property</h3>
-
- <p> The <span class=prop-name>‘<code class=property><a
- href="#animation">animation</a></code>’</span> shorthand property
- combines six of the animation properties into a single property.
-
- <table class=propdef>
- <tbody>
- <tr>
- <td> <em>Name:</em>
-
- <td> <dfn id=animation>animation</dfn>
-
- <tr>
- <td> <em>Value:</em>
-
- <td> [<animation-name> || <animation-duration> ||
- <animation-timing-function> || <animation-delay> ||
- <animation-iteration-count> || <animation-direction>] [,
- [<animation-name> || <animation-duration> ||
- <animation-timing-function> || <animation-delay> ||
- <animation-iteration-count> || <animation-direction>] ]*
-
- <tr>
- <td> <em>Initial:</em>
-
- <td> see individual properties
-
- <tr>
- <td> <em>Applies to:</em>
-
- <td> block-level and inline-level elements
-
- <tr>
- <td> <em>Inherited:</em>
-
- <td> no
-
- <tr>
- <td> <em>Percentages:</em>
-
- <td> N/A
-
- <tr>
- <td> <em>Media:</em>
-
- <td> visual
-
- <tr>
- <td> <em>Computed value:</em>
-
- <td> Same as specified value.
- </table>
- <!-- ======================================================================================================= -->
-
- <h2 id=animation-events-><span class=secno>4 </span> Animation Events</h2>
-
- <p> Several animation related events are available through the <a
- href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM Event
- system</a>. The start and end of an animation, and the end of each
- iteration of an animation all generate DOM events. An element can have
- multiple properties being animated simultaneously. This can occur either
- with a single <a class=prop-name href="#animation-name">animation-name</a>
- value with keyframes containing multiple properties, or with multiple <a
- class=prop-name href="#animation-name">animation-name</a> values. For the
- purposes of events, each <a class=prop-name
- href="#animation-name">animation-name</a> specifies a single animation.
- Therefore an event will be generated for each <a class=prop-name
- href="#animation-name">animation-name</a> value and not necessarily for
- each property being animated.
-
- <p> The time the animation has been running is sent with each event
- generated. This allows the event handler to determine the current
- iteration of a looping animation or the current position of an alternating
- animation. This time does not include any time the animation was in the
- <code>paused</code> play state.
-
- <dl>
- <dt> <b>Interface <i><a id=Events-AnimationEvent
- name=Events-AnimationEvent>AnimationEvent</a></i></b>
-
- <dd>
- <p> The <code>AnimationEvent</code> interface provides specific
- contextual information associated with Animation events.</p>
-
- <dl>
- <dt> <br>
- <b>IDL Definition</b>
-
- <dd>
- <div class=idl-code>
- <pre>
- interface AnimationEvent : Event {
- readonly attribute DOMString animationName;
- readonly attribute float elapsedTime;
- void initAnimationEvent(in DOMString typeArg,
- in boolean canBubbleArg,
- in boolean cancelableArg,
- in DOMString animationNameArg,
- in float elapsedTimeArg);
- };
- </pre>
- </div>
-
- <dt> <b>Attributes</b>
-
- <dd>
- <dl>
- <dt> <code class=attribute-name><a
- id=Events-AnimationEvent-animationName
- name=Events-AnimationEvent-animationName>animationName</a></code> of
- type <code>DOMString</code>, readonly
-
- <dd> The value of the <a class=prop-name
- href="#animation-name">animation-name</a> property of the animation
- that fired the event.
- </dl>
-
- <dl>
- <dt> <code class=attribute-name><a
- id=Events-AnimationEvent-elapsedTime
- name=Events-AnimationEvent-elapsedTime>elapsedTime</a></code> of type
- <code>float</code>, readonly
-
- <dd> The amount of time the animation has been running, in seconds,
- when this event fired, excluding any time the animation was paused.
- Note that this value is not affected by the value of <a
- class=prop-name href="#animation-trigger">animation-delay</a>. For an
- "animationstart" event, the elapsedTime is always zero.
- </dl>
-
- <dt> <b>Methods</b>
-
- <dd>
- <dl>
- <dt> <code class=method-name><a
- id=Events-AnimationEvent-initAnimationEvent
- name=Events-AnimtionEvent-initAnimationEvent>initAnimationEvent</a></code>
-
-
- <dd>
- <div class=method> The <code>initAnimationEvent</code> method is used
- to initialize the value of an <code>AnimationEvent</code> created
- through the <a
- href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-DocumentEvent"><code>DocumentEvent</code></a>
- interface. This method may only be called before the
- <code>AnimationEvent</code> has been dispatched via the
- <code>dispatchEvent</code> method, though it may be called multiple
- times during that phase if necessary. If called multiple times, the
- final invocation takes precedence.
- <div class=parameters> <b>Parameters</b>
- <div class=paramtable>
- <dl>
- <dt> <code class=parameter-name>typeArg</code> of type
- <code>DOMString</code>
-
- <dd> Specifies the event type.<br>
-
- <dt> <code class=parameter-name>canBubbleArg</code> of type
- <code>boolean</code>
-
- <dd> Specifies whether or not the event can bubble.<br>
-
- <dt> <code class=parameter-name>cancelableArg</code> of type
- <code>boolean</code>
-
- <dd> Specifies whether or not the event's default action can be
- prevented.
-
- <dt> <code class=parameter-name>animationNameArg</code> of type
- <code>DOMString</code>
-
- <dd> Specifies the <a
- href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event"><code>Event</code></a>'s
- animation name.<br>
-
- <dt> <code class=parameter-name>elapsedTimeArg</code> of type
- <code>float</code>
-
- <dd> Specifies the amount of time, in seconds, the animation has
- been running at the time of initialization.
- </dl>
- </div>
- </div>
- <!-- parameters -->
- <div> <b>No Return Value</b></div>
-
- <div> <b>No Exceptions</b></div>
- </div>
- <!-- method -->
- </dl>
- </dl>
- </dl>
-
- <p> The different types of Animation events that can occur are:
-
- <dl>
- <dt> <b>animationstart</b>
-
- <dd> The ‘<code class=property>animationstart</code>’ event
- occurs at the start of the animation
- <ul>
- <li>Bubbles: Yes
-
- <li>Cancelable: Yes
-
- <li>Context Info: animationName
- </ul>
-
- <dt> <b>animationend</b>
-
- <dd> The ‘<code class=property>animationend</code>’ event
- occurs when the animation finishes.
- <ul>
- <li>Bubbles: Yes
-
- <li>Cancelable: Yes
-
- <li>Context Info: animationName, elapsedTime
- </ul>
-
- <dt> <b>animationiteration</b>
-
- <dd> The ‘<code class=property>animationiteration</code>’
- event occurs at the end of each iteration of an animation for which
- <code><a
- href="#animation-iteration-count">animation-iteration-count</a></code> is
- greater than one. This event does not occur for animations with an
- iteration count of one.
- <ul>
- <li>Bubbles: Yes
-
- <li>Cancelable: Yes
-
- <li>Context Info: animationName, elapsedTime
- </ul>
- </dl>
- <!-- ======================================================================================================= -->
-
- <h2 id=dom-interfaces-><span class=secno>5 </span> DOM Interfaces</h2>
-
- <p> CSS animation is exposed to the CSSOM through a pair of new interfaces
- describing the keyframes.
-
- <dl>
- <dt> <b>Interface <i><a id=DOM-CSSRule
- name=DOM-CSSRule>CSSRule</a></i></b>
-
- <dd>
- <p> The following 2 rule types are added to the <code>CSSRule</code>
- interface. They provide identification for the new keyframe and
- keyframes rules.</p>
-
- <dl>
- <dt> <b>IDL Definition</b>
-
- <dd>
- <div class=idl-code>
- <pre>
- interface CSSRule {
- ...
- const unsigned short KEYFRAMES_RULE = 7;
- const unsigned short KEYFRAME_RULE = 8;
- ...
- };</pre>
- </div>
- </dd>
- <!-- IDL -->
- </dl>
-
- <dt> <b>Interface <i><a id=DOM-CSSKeyframeRule
- name=DOM-CSSKeyframeRule>CSSKeyframeRule</a></i></b>
-
- <dd>
- <p> The <code>CSSKeyframeRule</code> interface represents the style rule
- for a single key.</p>
-
- <dl>
- <dt> <br>
- <b>IDL Definition</b>
-
- <dd>
- <div class=idl-code>
- <pre>
- interface CSSKeyframeRule : CSSRule {
- attribute DOMString keyText;
- readonly attribute CSSStyleDeclaration style;
- };
- </pre>
- </div>
- <br>
-
- <dt> <b>Attributes</b>
-
- <dd>
- <dl>
- <dt> <code class=attribute-name><a id=DOM-CSSKeyframeRule-keyText
- name=DOM-CSSKeyframeRule-keyText>keyText</a></code> of type
- <code>DOMString</code>
-
- <dd> This attribute represents the key as the string representation of
- a floating point number between 0 and 1. If the value in the CSS
- style is <code>from</code> this value will be 0, and if the value in
- the CSS style is <code>to</code> this value will be 1.<br>
- </dl>
-
- <dd>
- <dl>
- <dt> <code class=attribute-name><a id=DOM-CSSKeyframeRule-style
- name=DOM-CSSKeyframeRule-style>style</a></code> of type
- <code>CSSStyleDeclaration</code>
-
- <dd> This attribute represents the style associated with this
- keyframe.<br>
- </dl>
-
- <dt> <b>No Methods</b>
- </dl>
- </dl>
-
- <dl>
- <dt> <b>Interface <i><a id=DOM-CSSKeyframesRule
- name=DOM-CSSKeyframesRule>CSSKeyframesRule</a></i></b>
-
- <dd>
- <p> The <code>CSSKeyframesRule</code> interface represents a complete set
- of keyframes for a single animation.</p>
-
- <dl>
- <dt> <br>
- <b>IDL Definition</b>
-
- <dd>
- <div class=idl-code>
- <pre>
- interface CSSKeyframesRule : CSSRule {
- attribute DOMString name;
- readonly attribute CSSRuleList cssRules;
-
- void insertRule(in DOMString rule);
- void deleteRule(in DOMString key);
- CSSKeyframeRule findRule(in DOMString key);
- };
- </pre>
- </div>
- <br>
-
- <dt> <b>Attributes</b>
-
- <dd>
- <dl>
- <dt> <code class=attribute-name><a id=DOM-CSSKeyframesRule-name
- name=DOM-CSSKeyframesRule-name>name</a></code> of type
- <code>DOMString</code>
-
- <dd> This attribute is the name of the keyframes, used by the <code><a
- href="#animation-name">animation-name</a></code> property.<br>
- </dl>
-
- <dd>
- <dl>
- <dt> <code class=attribute-name><a id=DOM-CSSKeyframeRules-cssRules
- name=DOM-CSSKeyframeRules-cssRules>cssRules</a></code> of type
- <code>CSSRuleList</code>
-
- <dd> This attribute gives access to the keyframes in the list.<br>
- </dl>
-
- <dt> <b>Methods</b>
-
- <dd>
- <dl><!-- ======================================================================================================= -->
-
- <dt> <code class=method-name><a id=DOM-CSSKeyframesRule-insertRule
- name=DOM-CSSKeyframesRule-insertRule>insertRule</a></code>
-
- <dd>
- <div class=method> The <code>insertRule</code> method inserts the
- passed CSSKeyframeRule into the list at the passed key.
- <div class=parameters> <b>Parameters</b>
- <div class=paramtable>
- <dl>
- <dt> <code class=parameter-name>rule</code> of type
- <code>DOMString</code>
-
- <dd> The rule to be inserted, expressed in the same syntax as one
- entry in the <code>@keyframes</code> rule. The key is included
- in the rule string, which described the point at which the rule
- should be inserted. If a rule with the same key already exists
- in the list, it is replaced with this rule.
- </dl>
- </div>
- </div>
- <!-- parameters -->
- <div class=return-value> <b>No Return Value</b></div>
-
- <div> <b>No Exceptions</b></div>
- </div>
- <!-- ======================================================================================================= -->
-
-
- <dt> <code class=method-name><a id=DOM-CSSKeyframesRule-deleteRule
- name=DOM-CSSKeyframesRule-deleteRule>deleteRule</a></code>
-
- <dd>
- <div class=method> The <code>deleteRule</code> method deletes the
- CSSKeyframeRule with the passed key. If a rule with this key does
- not exist, the method does nothing.
- <div class=parameters> <b>Parameters</b>
- <div class=paramtable>
- <dl>
- <dt> <code class=parameter-name>key</code> of type
- <code>DOMString</code>
-
- <dd> The key which describes the rule to be deleted. The key must
- resolve to a number between 0 and 1, or the rule is ignored.<br>
- </dl>
- </div>
- </div>
- <!-- parameters -->
- <div class=return-value> <b>No Return Value</b></div>
-
- <div> <b>No Exceptions</b></div>
- </div>
- <!-- ======================================================================================================= -->
-
-
- <dt> <code class=method-name><a id=DOM-CSSKeyframesRule-findRule
- name=DOM-CSSKeyframesRule-findRule>findRule</a></code>
-
- <dd>
- <div class=method> The <code>findRule</code> method returns the rule
- with a key matching the passed key. If no such rule exists, a null
- value is returned.
- <div class=parameters> <b>Parameters</b>
- <div class=paramtable>
- <dl>
- <dt> <code class=parameter-name>key</code> of type
- <code>DOMString</code>
-
- <dd> The key which described the rule to find. The key must
- resolve to a number between 0 and 1, or the rule is ignored.<br>
- </dl>
- </div>
- </div>
- <!-- parameters -->
- <div class=return-value> <b>Return Value</b>
- <div class=returnvalue>
- <dl>
- <dt> <code>CSSKeyframeRule</code>
-
- <dd> The found rule.<br>
- </dl>
- </div>
- </div>
-
- <div> <b>No Exceptions</b></div>
- </div>
- <!-- ======================================================================================================= -->
-
- </dl>
- <!-- method -->
- </dl>
- </dl>
-
- <h2 id=references><span class=secno>6 </span>References</h2>
-
- <h3 class=no-num id=normative-references>Normative references</h3>
- <!--begin-normative-->
- <!-- Sorted by label -->
-
- <dl class=bibliography>
- <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
- <!---->
-
- <dt id=CSS3-TRANSITIONS>[CSS3-TRANSITIONS]
-
- <dd>Dean Jackson; David Hyatt; Chris Marrin. <a
- href="http://www.w3.org/TR/2009/WD-css3-transitions-20090320"><cite>CSS
- Transitions Module Level 3.</cite></a> 20 March 2009. W3C Working Draft.
- (Work in progress.) URL: <a
- href="http://www.w3.org/TR/2009/WD-css3-transitions-20090320">http://www.w3.org/TR/2009/WD-css3-transitions-20090320</a>
- </dd>
- <!---->
- </dl>
- <!--end-normative-->
-
- <h3 class=no-num id=other-references>Other references</h3>
- <!--begin-informative-->
- <!-- Sorted by label -->
-
- <dl class=bibliography>
- <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
- <!---->
- </dl>
- <!--end-informative-->
-
- <h2 class=no-num id=property-index>Property index</h2>
- <!--begin-properties-->
-
- <table class=proptable>
- <thead>
- <tr>
- <th>Property
-
- <th>Values
-
- <th>Initial
-
- <th>Applies to
-
- <th>Inh.
-
- <th>Percentages
-
- <th>Media
-
- <tbody>
- <tr valign=baseline>
- <td><a class=property href="#animation">animation</a>
-
- <td>[<animation-name> || <animation-duration> ||
- <animation-timing-function> || <animation-delay> ||
- <animation-iteration-count> || <animation-direction>] [,
- [<animation-name> || <animation-duration> ||
- <animation-timing-function> || <animation-delay> ||
- <animation-iteration-count> || <animation-direction>] ]*
-
- <td>see individual properties
-
- <td>block-level and inline-level elements
-
- <td>no
-
- <td>N/A
-
- <td>visual
-
- <tr valign=baseline>
- <td><a class=property href="#animation-trigger">animation-delay</a>
-
- <td><time> [, <time>]*
-
- <td>0
-
- <td>block-level and inline-level elements
-
- <td>no
-
- <td>N/A
-
- <td>visual
-
- <tr valign=baseline>
- <td><a class=property
- href="#animation-direction">animation-direction</a>
-
- <td>normal | alternate [, normal | alternate]*
-
- <td>normal
-
- <td>block-level and inline-level elements
-
- <td>no
-
- <td>N/A
-
- <td>visual
-
- <tr valign=baseline>
- <td><a class=property href="#animation-duration">animation-duration</a>
-
- <td><time> [, <time>]*
-
- <td>0
-
- <td>block-level and inline-level elements
-
- <td>no
-
- <td>N/A
-
- <td>visual
-
- <tr valign=baseline>
- <td><a class=property
- href="#animation-iteration-count">animation-iteration-count</a>
-
- <td>infinite | <number> [, infinite | <number>]*
-
- <td>1
-
- <td>block-level and inline-level elements
-
- <td>no
-
- <td>N/A
-
- <td>visual
-
- <tr valign=baseline>
- <td><a class=property href="#animation-name">animation-name</a>
-
- <td>none | IDENT [, none | IDENT ]*
-
- <td>none
-
- <td>block-level and inline-level elements
-
- <td>no
-
- <td>N/A
-
- <td>visual
-
- <tr valign=baseline>
- <td><a class=property
- href="#animation-play-state">animation-play-state</a>
-
- <td>running | paused [, running | paused]*
-
- <td>running
-
- <td>block-level and inline-level elements
-
- <td>no
-
- <td>N/A
-
- <td>visual
-
- <tr valign=baseline>
- <td><a class=property
- href="#animation-timing-function">animation-timing-function</a>
-
- <td>ease | linear | ease-in | ease-out | ease-in-out |
- cubic-bezier(<number>, <number>, <number>,
- <number>) [, ease | linear | ease-in | ease-out | ease-in-out |
- cubic-bezier(<number>, <number>, <number>,
- <number>)]*
-
- <td>ease
-
- <td>block-level and inline-level elements
-
- <td>no
-
- <td>N/A
-
- <td>visual
- </table>
- <!--end-properties-->
-
- <h2 class=no-num id=index>Index</h2>
- <!--begin-index-->
-
- <ul class=indexlist>
- <li>animation, <a href="#animation"
- title=animation><strong>3.9</strong></a>
-
- <li>animation-delay, <a href="#animation-trigger"
- title=animation-delay><strong>3.8</strong></a>
-
- <li>animation-direction, <a href="#animation-direction"
- title=animation-direction><strong>3.6</strong></a>
-
- <li>animation-duration, <a href="#animation-duration"
- title=animation-duration><strong>3.3</strong></a>
-
- <li>animation-iteration-count, <a href="#animation-iteration-count"
- title=animation-iteration-count><strong>3.5</strong></a>
-
- <li>animation-name, <a href="#animation-name"
- title=animation-name><strong>3.2</strong></a>
-
- <li>animation-play-state, <a href="#animation-play-state"
- title=animation-play-state><strong>3.7</strong></a>
-
- <li>animation-timing-function, <a href="#animation-timing-function"
- title=animation-timing-function><strong>3.4</strong></a>
- </ul>
- <!--end-index-->
-</html>
-<!-- Keep this comment at the end of the file
-Local variables:
-mode: sgml
-sgml-default-doctype-name:"html"
-sgml-minimize-attributes:t
-End:
--->
diff --git a/WebKitSite/specs/CSSVisualEffects/css3-animations/Overview.src.html b/WebKitSite/specs/CSSVisualEffects/css3-animations/Overview.src.html
deleted file mode 100644
index d138dc5..0000000
--- a/WebKitSite/specs/CSSVisualEffects/css3-animations/Overview.src.html
+++ /dev/null
@@ -1,1458 +0,0 @@
-<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01//EN'
- 'http://www.w3.org/TR/html4/strict.dtd'>
-
-<html lang="en">
-<head>
- <title>CSS Animations Module Level 3</title>
- <link rel="stylesheet" type="text/css" href="default.css">
- <style type="text/css">
- .rhs { white-space: pre-wrap; }
- code { font-size: inherit; }
- #box-shadow-samples td { background: white; color: black; }
-
- table {
- border-collapse: collapse;
- }
- td {
- padding: 0.2em 1em;
- border: 1px solid black;
- }
- </style>
- <link rel="stylesheet" type="text/css"
- href="http://www.w3.org/StyleSheets/TR/W3C-WD.css">
-</head>
-
-<body>
-
-<div class="head">
-<!--logo-->
-
-<h1>CSS Animations Module Level 3</h1>
-
-<h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2>
-<dl>
- <dt>This version:
- <dd><a href="[VERSION]">http://dev.w3.org/csswg/css3-animations/</a>
- <!--http://www.w3.org/TR/[YEAR]/WD-[SHORTNAME]-[CDATE]-->
- <dt>Latest version:
- <dd><a
- href="http://www.w3.org/TR/css3-animations">[LATEST]</a>
- <dt>Previous version:
- <dd><a href="http://www.w3.org/TR/2009/WD-css3-animations-20090320/">
- http://www.w3.org/TR/2009/WD-css3-animations-20090320/</a>
- <dt id="editors-list">Editors:
- <dd><a href="mailto:dino at apple.com">Dean Jackson</a> (<a
- href="http://www.apple.com/">Apple Inc</a>)
- <dd><a href="mailto:hyatt at apple.com">David Hyatt</a> (<a
- href="http://www.apple.com/">Apple Inc</a>)
- <dd><a href="mailto:cmarrin at apple.com">Chris Marrin</a> (<a
- href="http://www.apple.com/">Apple Inc</a>)
-</dl>
-
-<!--copyright-->
-
-<hr title="Separator for header">
-</div>
-
-<h2 class="no-num no-toc" id="abstract">Abstract</h2>
-
-<p>CSS Animations allow an author to modify CSS property values over
- time.
-
-<h2 class="no-num no-toc" id="status">Status of this document</h2>
-<!--status-->
-
-
-<h2 class="no-num no-toc" id="contents">Table of contents</h2>
-<!--toc-->
-
-
-<h2 id="introduction">Introduction</h2>
-
-<p><em>This section is not normative.</em>
-
- <p>
- This document introduces new CSS features to enable animation.
- </p>
- <p>
- Animation is currently possible in languages like SVG, but no system exists for the native animation of CSS styles. This proposal introduces <em>defined animations</em>, which specify the values that CSS properties will take over a given time interval.
- </p>
- <p>
- This specification is an extension to CSS Transitions
- [[!CSS3-TRANSITIONS]].
- </p>
- <h2>
- Keyframes
- </h2>
- <p>
- In a simple transition, since both the starting value and ending value
- are known, a single timing function and duration determine the
- intermediate values of the animating property. If finer control of the
- intermediate values is required, keyframes can be used.
- </p>
- <p>
- Keyframes are specified using a specialized CSS at-rule. A <span
- class="prop-name">@keyframes</span> rule consists of the keyword
- "@keyframes", followed by an identifier giving a name for the animation
- (which will be referenced using <span
- class="prop-name">'animation-name'</span>), followed by a set of style
- rules (delimited by curly braces).
- </p>
- <p>
- The <i>keyframe selector</i> for a keyframe style rule consists of a
- comma-separated list of percentage values or the keywords 'from' or
- 'to'. The selector is used to specify the percentage along the duration
- of the animation that the keyframe represents. The
- keyframe itself is specified by the block of property values declared on
- the selector. The keyword 'from' is equivalent to the value 0. The
- keyword 'to' is equivalent to the value 100%. Note that the percentage
- unit specifier must be used on percentage values. Therefore, "0" is an
- invalid keyframe selector.
- </p>
- <p>
- Keyframes can be specified in any order. The selector determines
- the placement of the keyframe in the animation.
- </p>
- <p>
- Every keyframe declaration must have a keyframe rule for
- 0% or 100%, possibly defined using "from" or "to". A keyframe
- declaration without these keyframe selectors is invalid and will not
- be available for animation.
- </p>
- <p>
- The <i>keyframe declaration</i> for a keyframe rule consists of
- properties and values. Properties that are unable to be
- animated are ignored in these rules, with the exception of <span
- class="prop-name">animation-timing-function'</span>, the behavior
- of which is described below.
- </p>
- <p>
- The @keyframes rule that is used by an animation will be the last one encountered in sorted rules order that matches the name of the animation. <span class="prop-name">@keyframes</span> rules do not cascade; therefore an animation will never derive keyframes from more than one <span class="prop-name">@keyframes</span> rule.
- </p>
- <p>
- To determine the set of keyframes, all of the values in selectors are sorted in increasing order by time. If there are any duplicates, then the last keyframe specified inside the <span class="prop-name">@keyframes</span> rule will be used to provide the keyframe information for that time. There is no cascading within a <span class="prop-name">@keyframes</span> rule if multiple keyframes specify the same keyframe selector values.
- </p>
- <div class="example">
- <p style="display:none">
- Example(s):
- </p>
- <pre>
- @keyframes 'wobble' {
-
- 0% {
- left: 100px;
- }
-
- 40% {
- left: 150px;
- }
-
- 60% {
- left: 75px;
- }
-
- 100% {
- left: 100px;
- }
-
- }
-
- </pre>Four keyframes are specified for the animation named "wobble". In the first keyframe, shown at the beginning of the animation cycle, the 'left' value of the animation is 100px. By 40% of the animation duration, 'left' value has animated to 150px. At 60% of the animation duration, the 'left' value has animated back to 75px. At the end of the animation cycle, the 'left' value has returned to 100px. The diagram below shows the state of the animation if it were given a duration of 10s.
- <div class="figure">
- <img src="animation1.png" alt="">
- </div>
- <p class="caption">
- Animations states specified by keyframes
- </p>
- </div>
-
- <p>
- The following is the grammar for the keyframes rule.
- </p>
-
- <pre>
- keyframes-rule: '@keyframes' IDENT '{' keyframes-blocks '}';
-
- keyframes-blocks: [ keyframe-selectors block ]* ;
-
- keyframe-selectors: [ 'from' | 'to' | PERCENTAGE ] [ ',' [ 'from' | 'to' | PERCENTAGE ] ]*;
- </pre>
- <!-- ======================================================================================================= -->
- <h3>
- Timing functions for keyframes
- </h3>
- <p>
- A keyframe style rule may also declare the timing function that is to be used as the animation moves to the next keyframe.
- </p>
- <div class="example">
- <p style="display:none">
- Example(s):
- </p>
- <pre>
- @keyframes 'bounce' {
-
- from {
- top: 100px;
- animation-timing-function: ease-out;
- }
-
- 25% {
- top: 50px;
- animation-timing-function: ease-in;
- }
-
- 50% {
- top: 100px;
- animation-timing-function: ease-out;
- }
-
- 75% {
- top: 75px;
- animation-timing-function: ease-in;
- }
-
- to {
- top: 100px;
- }
-
- }
-
- </pre>Five keyframes are specified for the animation named "bounce". Between the first and second keyframe (ie. between 0 and 25%) an "ease-out" timing function is used. Between the second and third keyframe (ie. between 25% and 50%) an "ease-in" timing function is used. And so on. The effect will appear as an element that moves up the page 50px, slowing down as it reaches its highest point then speeding up as it falls back to 100px. The second half of the animation behaves in a similar manner, but only moves the element 25px units up the page.
- </div>
- <p>
- See <a href="#animation-timing-function_tag">the <span class="prop-name">'animation-timing-function'</span> property</a> for more information.
- </p><!-- ======================================================================================================= -->
- <h2>
- Animations
- </h2>
- <p>
- Animations are similar to transitions in that they change the presentational value of CSS properties over time. The principal difference is that while transitions trigger <i>implicitly</i> when property values change, animations are <i>explicitly</i> executed when the animation properties are applied. Because of this, animations require explicit values for the properties being animated. These values are specified using animation keyframes, described above.
- </p>
- <p>
- Many aspects of the animation can be controlled, including how many times the animation iterates, whether or not it alternates between the begin and end values, and whether or not the animation should be running or paused. An animation can also delay its start time.
- </p>
- <div class="example">
- <p style="display:none">
- Example(s):
- </p>
- <pre>
- div {
- animation-name: 'diagonal-slide';
- animation-duration: 5s;
- animation-iteration-count: 10;
- }
-
- @keyframes 'diagonal-slide' {
-
- from {
- left: 0;
- top: 0;
- }
-
- to {
- left: 100px;
- top: 100px;
- }
-
- }
-
- </pre>This will produce an animation that moves an element from (0, 0) to (100px, 100px) over five seconds and repeats itself nine times (for a total of ten iterations).
- </div>
- <!-- ======================================================================================================= -->
- <h3>
- Animation behavior
- </h3>
-
- <p>
- CSS Animations affect computed property values. During the execution of an animation, the
- computed value for a property is controlled by the animation. This overrides the value
- specified in the normal styling system.
- </p>
-
- <p>
- In the case of multiple animations specifying behavior for the same property, the animation
- defined last will override the previously defined animations.
- </p>
-
- <p>
- An animation does not affect the computed value before the application of the animation,
- before the animation delay has expired, and after the end of the animation.
- </p>
-
- <div class="figure">
- <img src="sandwich.png" alt="">
- </div>
- <p class="caption">
- Computation of animated property values
- </p>
-
- <p>
- The diagram above shows how property values are computed. The intrinsic style is shown at the
- top of the diagram. The computed value is derived from intrinsic style at the times when an
- animation is not running and also when an animation is delayed (see below for specification of
- animation delay). During an animation, the computed style is derived from the animated value.
- </p>
-
- <p>
- The start time of an animation is the latter of two moments: the time at which the style is
- resolved that specifies the animation, or the time the document's load event is fired.
- Therefore, an animation specified in the document stylesheet will begin at the document load.
- An animation specified on an element by modifying the style after the document has loaded will
- start when the style is resolved. That may be immediately in the case of a pseudo style rule
- such as hover, or may be when the scripting engine returns control to the browser (in the case
- of style applied by script).
- </p>
-
- <p>
- An animation applies to an element if the element has a value for
- <span class="prop-name">'animation-name'</span> that references a valid
- keyframes rule. Once an animation has started it continues until it ends
- or the <span class="prop-name">'animation-name'</span> is removed. The values
- used for the keyframes and animation properties are snapshotted at the
- time the animation starts. Changing them during the execution of the
- animation has no effect. Note also, that changing the value of
- <span class="prop-name">'animation-name'</span> does not necessarily
- restart an animation (e.g. if a list of animations are applied and
- one is removed from the list, only that animation will stop; The other
- animations will continue). In order to restart an animation, it must be
- removed then reapplied.
- </p>
-
- <!-- ======================================================================================================= -->
- <h3>
- The <span class="prop-name">'animation-name'</span> Property
- </h3>
- <p>
- The <span class="prop-name">'animation-name'</span> property defines a
- list of animations that apply. Each name is used to select the keyframe at-rule
- that provides the property values for the animation. If the name does
- not match any keyframe at-rule, there are no properties to be animated
- and the animation will not execute. Furthermore, if the animation name
- is 'none' then there will be no animation. This can be used to override
- any animations coming from the cascade.
- </p>
- <table class="propdef">
- <tbody>
- <tr>
- <td>
- <em>Name:</em>
- </td>
- <td>
- <dfn id="animation-name">animation-name</dfn>
- </td>
- </tr>
- <tr>
- <td>
- <em>Value:</em>
- </td>
- <td>
- none | IDENT [, none | IDENT ]*
- </td>
- </tr>
- <tr>
- <td>
- <em>Initial:</em>
- </td>
- <td>
- none
- </td>
- </tr>
- <tr>
- <td>
- <em>Applies to:</em>
- </td>
- <td>
- block-level and inline-level elements
- </td>
- </tr>
- <tr>
- <td>
- <em>Inherited:</em>
- </td>
- <td>
- no
- </td>
- </tr>
- <tr>
- <td>
- <em>Percentages:</em>
- </td>
- <td>
- N/A
- </td>
- </tr>
- <tr>
- <td>
- <em>Media:</em>
- </td>
- <td>
- visual
- </td>
- </tr>
- <tr>
- <td>
- <em>Computed value:</em>
- </td>
- <td>
- Same as specified value.
- </td>
- </tr>
- </tbody>
- </table>
-
- <!--
- <p>
- It is possible for elements to have multiple animations running that change the same property or properties. In this case the animations combine in a manner defined by the property. For example, animations on <span class="prop-name">opacity</span> will add together and animations on <span class="prop-name">transform</span> will have their transformation matrices multiplied.
- </p>
- <div class="example">
- <p style="display:none">
- Example(s):
- </p>
- <pre>
- @keyframes 'border-bloat' {
- from {
- border-width: 0;
- }
- to {
- border-width: 10px;
- }
- }
-
- @keyframes 'border-diet' {
- from {
- border-width: 4px;
- }
- to {
- border-width: 2px;
- }
- }
-
- div {
- animation-name: 'border-bloat', 'border-diet';
- animation-duration: 10s, 4s;
- }
- </pre>
- <p>
- The above example has two animations executing on the same property, <span class="prop-name">border-width</span>. The animations are additive. That is, the
- resulting value for the property will be the addition of the values from the
- two animations.
- </p>
- <p>
- At time '0s' the element's border will be 4px wide (0px from 'border-bloat' plus 4px from 'border-diet').
- At time '4s' the element's border will be 6px wide (4px from 'border-bloat' plus 2px from 'border-diet').
- At time '10s' the element's border will be 10px wide (10px from 'border-bloat' and no addition from
- 'border-diet' as it is no longer executing).
- </p>
- </div>
- -->
-
-
- <!-- ======================================================================================================= -->
- <h3>
- The <span class="prop-name">'animation-duration'</span> Property
- </h3>
- <p>
- The <span class="prop-name">'animation-duration'</span> property defines the length of time that an animation takes to complete one cycle.
- </p>
- <table class="propdef">
- <tbody>
- <tr>
- <td>
- <em>Name:</em>
- </td>
- <td>
- <dfn id="animation-duration">animation-duration</dfn>
- </td>
- </tr>
- <tr>
- <td>
- <em>Value:</em>
- </td>
- <td>
- <time> [, <time>]*
- </td>
- </tr>
- <tr>
- <td>
- <em>Initial:</em>
- </td>
- <td>
- 0
- </td>
- </tr>
- <tr>
- <td>
- <em>Applies to:</em>
- </td>
- <td>
- block-level and inline-level elements
- </td>
- </tr>
- <tr>
- <td>
- <em>Inherited:</em>
- </td>
- <td>
- no
- </td>
- </tr>
- <tr>
- <td>
- <em>Percentages:</em>
- </td>
- <td>
- N/A
- </td>
- </tr>
- <tr>
- <td>
- <em>Media:</em>
- </td>
- <td>
- visual
- </td>
- </tr>
- <tr>
- <td>
- <em>Computed value:</em>
- </td>
- <td>
- Same as specified value.
- </td>
- </tr>
- </tbody>
- </table>
-
- <p>
- By default the value is '0', meaning that the animation cycle is immediate (i.e. there will be no animation). A negative value for <span class="prop-name">animation-duration</span> is treated as '0'.
- </p>
-
- <!-- ======================================================================================================= -->
- <h3 id="animation-timing-function_tag">
- The <span class="prop-name">'animation-timing-function'</span> Property
- </h3>
- <p>
- The <span class="prop-name">'animation-timing-function'</span> property describes how the animation will progress over one cycle of its duration. See the <span class="prop-name">'transition-timing-function'</span> property [[!CSS3-TRANSITIONS]] for a complete description of timing function calculation.
- </p>
- <table class="propdef">
- <tbody>
- <tr>
- <td>
- <em>Name:</em>
- </td>
- <td>
- <dfn id="animation-timing-function">animation-timing-function</dfn>
- </td>
- </tr>
- <tr>
- <td>
- <em>Value:</em>
- </td>
- <td>
- ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*
- </td>
- </tr>
- <tr>
- <td>
- <em>Initial:</em>
- </td>
- <td>
- ease
- </td>
- </tr>
- <tr>
- <td>
- <em>Applies to:</em>
- </td>
- <td>
- block-level and inline-level elements
- </td>
- </tr>
- <tr>
- <td>
- <em>Inherited:</em>
- </td>
- <td>
- no
- </td>
- </tr>
- <tr>
- <td>
- <em>Percentages:</em>
- </td>
- <td>
- N/A
- </td>
- </tr>
- <tr>
- <td>
- <em>Media:</em>
- </td>
- <td>
- visual
- </td>
- </tr>
- <tr>
- <td>
- <em>Computed value:</em>
- </td>
- <td>
- Same as specified value.
- </td>
- </tr>
- </tbody>
- </table>
-
- <p>
- For a keyframed animation, the <span class="prop-name">'animation-timing-function'</span> applies
- between keyframes, not over the entire animation. For example, in the case of an ease-in-out timing function, an animation will ease in at the start of the keyframe and ease out at the end of the keyframe. A <span class="prop-name">'animation-timing-function'</span> defined within a keyframe block applies to that keyframe, otherwise the timing function specified for the animation is used.
- </p>
-
- <!-- ======================================================================================================= -->
- <h3>
- The <span class="prop-name">'animation-iteration-count'</span> Property
- </h3>
- <p>
- The <span class="prop-name">'animation-iteration-count'</span> property defines the number of times an animation cycle is played. The default value is one, meaning the animation will play from beginning to end once. A value of <span class="prop-value">'infinite'</span> will cause the animation to repeat forever. Non-integer numbers will cause the animation to end part-way through a cycle. Negative values for <span class="prop-name">'animation-iteration-count'</span> are treated as zero. This property is often used with an <span class="prop-name">'animation-direction'</span> value of <span class="prop-value">'alternate'</span>, which will cause the animation to play in reverse on alternate cycles.
- </p>
- <table class="propdef">
- <tbody>
- <tr>
- <td>
- <em>Name:</em>
- </td>
- <td>
- <dfn id="animation-iteration-count">animation-iteration-count</dfn>
- </td>
- </tr>
- <tr>
- <td>
- <em>Value:</em>
- </td>
- <td>
- infinite | <number> [, infinite | <number>]*
- </td>
- </tr>
- <tr>
- <td>
- <em>Initial:</em>
- </td>
- <td>
- 1
- </td>
- </tr>
- <tr>
- <td>
- <em>Applies to:</em>
- </td>
- <td>
- block-level and inline-level elements
- </td>
- </tr>
- <tr>
- <td>
- <em>Inherited:</em>
- </td>
- <td>
- no
- </td>
- </tr>
- <tr>
- <td>
- <em>Percentages:</em>
- </td>
- <td>
- N/A
- </td>
- </tr>
- <tr>
- <td>
- <em>Media:</em>
- </td>
- <td>
- visual
- </td>
- </tr>
- <tr>
- <td>
- <em>Computed value:</em>
- </td>
- <td>
- Same as specified value.
- </td>
- </tr>
- </tbody>
- </table><!-- ======================================================================================================= -->
- <h3>
- The <span class="prop-name">'animation-direction'</span> Property
- </h3>
- <p>
- The <span class="prop-name">'animation-direction'</span> property defines whether or not the animation should play in reverse on alternate cycles. If <span class="prop-value">'alternate'</span> is specified, the animation cycle iterations that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction. When an animation is played in reverse the timing functions are also reversed. For example, when played in reverse an ease-in animation would appear to be an ease-out animation.
- </p>
- <table class="propdef">
- <tbody>
- <tr>
- <td>
- <em>Name:</em>
- </td>
- <td>
- <dfn id="animation-direction">animation-direction</dfn>
- </td>
- </tr>
- <tr>
- <td>
- <em>Value:</em>
- </td>
- <td>
- normal | alternate [, normal | alternate]*
- </td>
- </tr>
- <tr>
- <td>
- <em>Initial:</em>
- </td>
- <td>
- normal
- </td>
- </tr>
- <tr>
- <td>
- <em>Applies to:</em>
- </td>
- <td>
- block-level and inline-level elements
- </td>
- </tr>
- <tr>
- <td>
- <em>Inherited:</em>
- </td>
- <td>
- no
- </td>
- </tr>
- <tr>
- <td>
- <em>Percentages:</em>
- </td>
- <td>
- N/A
- </td>
- </tr>
- <tr>
- <td>
- <em>Media:</em>
- </td>
- <td>
- visual
- </td>
- </tr>
- <tr>
- <td>
- <em>Computed value:</em>
- </td>
- <td>
- Same as specified value.
- </td>
- </tr>
- </tbody>
- </table><!-- ======================================================================================================= -->
- <h3>
- The <span class="prop-name">'animation-play-state'</span> Property
- </h3>
-
- <div class="issue">
- We are considering removing 'animation-play-state' since its behaviour can
- be replicated using other techniques. For example, by querying the
- computed style, removing the animation and then setting style.
- </div>
-
- <p>
- The <span class="prop-name">'animation-play-state'</span> property defines whether the animation is running or paused. A running animation can be paused by setting this property to <span class="prop-value">'paused'</span>. To continue running a paused animation this property can be set to <span class="prop-value">'running'</span>. A paused animation will continue to display the current value of the animation in a static state, as if the time of the animation is constant. When a paused animation is resumed, it restarts from the current value, not necessarily from the beginning of the animation.
- </p>
- <table class="propdef">
- <tbody>
- <tr>
- <td>
- <em>Name:</em>
- </td>
- <td>
- <dfn id="animation-play-state">animation-play-state</dfn>
- </td>
- </tr>
- <tr>
- <td>
- <em>Value:</em>
- </td>
- <td>
- running | paused [, running | paused]*
- </td>
- </tr>
- <tr>
- <td>
- <em>Initial:</em>
- </td>
- <td>
- running
- </td>
- </tr>
- <tr>
- <td>
- <em>Applies to:</em>
- </td>
- <td>
- block-level and inline-level elements
- </td>
- </tr>
- <tr>
- <td>
- <em>Inherited:</em>
- </td>
- <td>
- no
- </td>
- </tr>
- <tr>
- <td>
- <em>Percentages:</em>
- </td>
- <td>
- N/A
- </td>
- </tr>
- <tr>
- <td>
- <em>Media:</em>
- </td>
- <td>
- visual
- </td>
- </tr>
- <tr>
- <td>
- <em>Computed value:</em>
- </td>
- <td>
- Same as specified value.
- </td>
- </tr>
- </tbody>
- </table><!-- ======================================================================================================= -->
- <h3>
- The <span class="prop-name">'animation-delay'</span> Property
- </h3>
- <p>
- The <span class="prop-name">'animation-delay'</span> property defines when the animation will start. It allows an animation to begin execution some time after it is applied. An <span class="prop-name">'animation-delay'</span> value of '0' means the animation will execute as soon as it is applied. Otherwise, the value specifies an offset from the moment the animation is applied, and the animation will delay execution by that offset.
- </p>
- <p>
- If the value for <span class="prop-name">'animation-delay'</span> is a negative time offset then the animation will execute the moment it is applied, but will appear to have begun execution at the specified offset. That is, the animation will appear to begin part-way through its play cycle. In the case where an animation has implied starting values and a negative <span class="prop-name">'animation-delay'</span>, the starting values are taken from the moment the animation is applied.
- </p>
- <table class="propdef">
- <tbody>
- <tr>
- <td>
- <em>Name:</em>
- </td>
- <td>
- <dfn id="animation-trigger">animation-delay</dfn>
- </td>
- </tr>
- <tr>
- <td>
- <em>Value:</em>
- </td>
- <td>
- <time> [, <time>]*
- </td>
- </tr>
- <tr>
- <td>
- <em>Initial:</em>
- </td>
- <td>
- 0
- </td>
- </tr>
- <tr>
- <td>
- <em>Applies to:</em>
- </td>
- <td>
- block-level and inline-level elements
- </td>
- </tr>
- <tr>
- <td>
- <em>Inherited:</em>
- </td>
- <td>
- no
- </td>
- </tr>
- <tr>
- <td>
- <em>Percentages:</em>
- </td>
- <td>
- N/A
- </td>
- </tr>
- <tr>
- <td>
- <em>Media:</em>
- </td>
- <td>
- visual
- </td>
- </tr>
- <tr>
- <td>
- <em>Computed value:</em>
- </td>
- <td>
- Same as specified value.
- </td>
- </tr>
- </tbody>
- </table><!-- ======================================================================================================= -->
- <h3>
- The <span class="prop-name">'animation'</span> Shorthand Property
- </h3>
- <p>
- The <span class="prop-name">'animation'</span> shorthand property combines six of the animation properties into a single property.
- </p>
- <table class="propdef">
- <tbody>
- <tr>
- <td>
- <em>Name:</em>
- </td>
- <td>
- <dfn id="animation">animation</dfn>
- </td>
- </tr>
- <tr>
- <td>
- <em>Value:</em>
- </td>
- <td>
- [<animation-name> ||
- <animation-duration> ||
- <animation-timing-function> ||
- <animation-delay> ||
- <animation-iteration-count> ||
- <animation-direction>]
- [, [<animation-name> ||
- <animation-duration> ||
- <animation-timing-function> ||
- <animation-delay> ||
- <animation-iteration-count> ||
- <animation-direction>] ]*
- </td>
- </tr>
- <tr>
- <td>
- <em>Initial:</em>
- </td>
- <td>
- see individual properties
- </td>
- </tr>
- <tr>
- <td>
- <em>Applies to:</em>
- </td>
- <td>
- block-level and inline-level elements
- </td>
- </tr>
- <tr>
- <td>
- <em>Inherited:</em>
- </td>
- <td>
- no
- </td>
- </tr>
- <tr>
- <td>
- <em>Percentages:</em>
- </td>
- <td>
- N/A
- </td>
- </tr>
- <tr>
- <td>
- <em>Media:</em>
- </td>
- <td>
- visual
- </td>
- </tr>
- <tr>
- <td>
- <em>Computed value:</em>
- </td>
- <td>
- Same as specified value.
- </td>
- </tr>
- </tbody>
- </table><!-- ======================================================================================================= -->
- <h2>
- Animation Events
- </h2>
- <p>
- Several animation related events are available through the <a
- href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM Event
- system</a>. The start and end of an animation, and the end of each
- iteration of an animation all generate DOM events. An element can have
- multiple properties being animated simultaneously. This can occur either
- with a single <span class="prop-name">animation-name</span> value with
- keyframes containing multiple properties, or with multiple <span
- class="prop-name">animation-name</span> values. For the purposes of
- events, each <span class="prop-name">animation-name</span> specifies a
- single animation. Therefore an event will be generated for each <span
- class="prop-name">animation-name</span> value and not necessarily for
- each property being animated.
- </p>
- <p>
- The time the animation has been running is sent with each event
- generated. This allows the event handler to determine the current
- iteration of a looping animation or the current position of an
- alternating animation. This time does not include any time the animation
- was in the <code>paused</code> play state.
- </p>
- <dl>
- <dt>
- <b>Interface <i><a id="Events-AnimationEvent" name='Events-AnimationEvent'>AnimationEvent</a></i></b>
- </dt>
- <dd>
- <p>
- The <code>AnimationEvent</code> interface provides specific contextual information associated with Animation events.
- </p>
- <dl>
- <dt>
- <br>
- <b>IDL Definition</b>
- </dt>
- <dd>
- <div class='idl-code'>
- <pre>
- interface AnimationEvent : Event {
- readonly attribute DOMString animationName;
- readonly attribute float elapsedTime;
- void initAnimationEvent(in DOMString typeArg,
- in boolean canBubbleArg,
- in boolean cancelableArg,
- in DOMString animationNameArg,
- in float elapsedTimeArg);
- };
- </pre>
- </div>
- </dd>
- <dt>
- <b>Attributes</b>
- </dt>
- <dd>
- <dl>
- <dt>
- <code class='attribute-name'><a id="Events-AnimationEvent-animationName" name='Events-AnimationEvent-animationName'>animationName</a></code> of type <code>DOMString</code>, readonly
- </dt>
- <dd>
- The value of the <span class="prop-name">animation-name</span> property of the animation that fired the event.
- </dd>
- </dl>
- <dl>
- <dt>
- <code class='attribute-name'><a id="Events-AnimationEvent-elapsedTime" name='Events-AnimationEvent-elapsedTime'>elapsedTime</a></code> of type <code>float</code>, readonly
- </dt>
- <dd>
- The amount of time the animation has been running, in seconds, when this event fired, excluding any time the animation was paused. Note that this value is not affected by the value of <span class="prop-name">animation-delay</span>. For an "animationstart" event, the elapsedTime is always zero.
- </dd>
- </dl>
- </dd>
- <dt>
- <b>Methods</b>
- </dt>
- <dd>
- <dl>
- <dt>
- <code class='method-name'><a id="Events-AnimationEvent-initAnimationEvent" name='Events-AnimtionEvent-initAnimationEvent'>initAnimationEvent</a></code>
- </dt>
- <dd>
- <div class='method'>
- The <code>initAnimationEvent</code> method is used to initialize the value of an <code>AnimationEvent</code> created through the <a href='http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-DocumentEvent'><code>DocumentEvent</code></a> interface. This method may only be called before the <code>AnimationEvent</code> has been dispatched via the <code>dispatchEvent</code> method, though it may be called multiple times during that phase if necessary. If called multiple times, the final invocation takes precedence.
- <div class='parameters'>
- <b>Parameters</b>
- <div class='paramtable'>
- <dl>
- <dt>
- <code class='parameter-name'>typeArg</code> of type <code>DOMString</code>
- </dt>
- <dd>
- Specifies the event type.<br>
- </dd>
- <dt>
- <code class='parameter-name'>canBubbleArg</code> of type <code>boolean</code>
- </dt>
- <dd>
- Specifies whether or not the event can bubble.<br>
- </dd>
- <dt>
- <code class='parameter-name'>cancelableArg</code> of type <code>boolean</code>
- </dt>
- <dd>
- Specifies whether or not the event's default action can be prevented.
- </dd>
- <dt>
- <code class='parameter-name'>animationNameArg</code> of type <code>DOMString</code>
- </dt>
- <dd>
- Specifies the <a href='http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event'><code>Event</code></a>'s animation name.<br>
- </dd>
- <dt>
- <code class='parameter-name'>elapsedTimeArg</code> of type <code>float</code>
- </dt>
- <dd>
- Specifies the amount of time, in seconds, the animation has been running at the time of initialization.
- </dd>
- </dl>
- </div>
- </div><!-- parameters -->
- <div>
- <b>No Return Value</b>
- </div>
- <div>
- <b>No Exceptions</b>
- </div>
- </div><!-- method -->
- </dd>
- </dl>
- </dd>
- </dl>
- </dd>
- </dl>
- <p>
- The different types of Animation events that can occur are:
- </p>
- <dl>
- <dt>
- <b>animationstart</b>
- </dt>
- <dd>
- The 'animationstart' event occurs at the start of the animation
- <ul>
- <li>Bubbles: Yes
- </li>
- <li>Cancelable: Yes
- </li>
- <li>Context Info: animationName
- </li>
- </ul>
- </dd>
- <dt>
- <b>animationend</b>
- </dt>
- <dd>
- The 'animationend' event occurs when the animation finishes.
- <ul>
- <li>Bubbles: Yes
- </li>
- <li>Cancelable: Yes
- </li>
- <li>Context Info: animationName, elapsedTime
- </li>
- </ul>
- </dd>
- <dt>
- <b>animationiteration</b>
- </dt>
- <dd>
- The 'animationiteration' event occurs at the end of each iteration of an animation for which <code>animation-iteration-count</code> is greater than one. This event does not occur for animations with an iteration count of one.
- <ul>
- <li>Bubbles: Yes
- </li>
- <li>Cancelable: Yes
- </li>
- <li>Context Info: animationName, elapsedTime
- </li>
- </ul>
- </dd>
- </dl>
- <!-- ======================================================================================================= -->
- <h2>
- DOM Interfaces
- </h2>
- <p>
- CSS animation is exposed to the CSSOM through a pair of new interfaces
- describing the keyframes.
- </p>
- <dl>
- <dt>
- <b>Interface <i><a id="DOM-CSSRule" name='DOM-CSSRule'>CSSRule</a></i></b>
- </dt>
- <dd>
- <p>
- The following 2 rule types are added to the <code>CSSRule</code> interface. They provide identification for the new keyframe and keyframes rules.
- </p>
- <dl>
-
- <dt>
- <b>IDL Definition</b>
- </dt>
- <dd>
- <div class='idl-code'>
- <pre>
- interface CSSRule {
- ...
- const unsigned short KEYFRAMES_RULE = 7;
- const unsigned short KEYFRAME_RULE = 8;
- ...
- };</pre>
- </div>
- </dd> <!-- IDL -->
- </dl>
- </dd>
-
- <dt>
- <b>Interface <i><a id="DOM-CSSKeyframeRule" name='DOM-CSSKeyframeRule'>CSSKeyframeRule</a></i></b>
- </dt>
- <dd>
- <p>
- The <code>CSSKeyframeRule</code> interface represents the style rule for a single key.
- </p>
- <dl>
- <dt>
- <br>
- <b>IDL Definition</b>
- </dt>
- <dd>
- <div class='idl-code'>
- <pre>
- interface CSSKeyframeRule : CSSRule {
- attribute DOMString keyText;
- readonly attribute CSSStyleDeclaration style;
- };
- </pre>
- </div><br>
- </dd>
- <dt>
- <b>Attributes</b>
- </dt>
- <dd>
- <dl>
- <dt>
- <code class='attribute-name'><a id="DOM-CSSKeyframeRule-keyText" name='DOM-CSSKeyframeRule-keyText'>keyText</a></code> of type <code>DOMString</code>
- </dt>
- <dd>
- This attribute represents the key as the string representation of a floating point number between 0 and 1. If the value
- in the CSS style is <code>from</code> this value will be 0, and if the value in the CSS style is <code>to</code> this
- value will be 1.<br>
- </dd>
- </dl>
- </dd>
- <dd>
- <dl>
- <dt>
- <code class='attribute-name'><a id="DOM-CSSKeyframeRule-style" name='DOM-CSSKeyframeRule-style'>style</a></code> of type <code>CSSStyleDeclaration</code>
- </dt>
- <dd>
- This attribute represents the style associated with this keyframe.<br>
- </dd>
- </dl>
- </dd>
- <dt>
- <b>No Methods</b>
- </dt>
- </dl>
- </dd>
- </dl>
- <dl>
- <dt>
- <b>Interface <i><a id="DOM-CSSKeyframesRule" name='DOM-CSSKeyframesRule'>CSSKeyframesRule</a></i></b>
- </dt>
- <dd>
- <p>
- The <code>CSSKeyframesRule</code> interface represents a complete set of keyframes for a single animation.
- </p>
- <dl>
- <dt>
- <br>
- <b>IDL Definition</b>
- </dt>
- <dd>
- <div class='idl-code'>
- <pre>
- interface CSSKeyframesRule : CSSRule {
- attribute DOMString name;
- readonly attribute CSSRuleList cssRules;
-
- void insertRule(in DOMString rule);
- void deleteRule(in DOMString key);
- CSSKeyframeRule findRule(in DOMString key);
- };
- </pre>
- </div><br>
- </dd>
- <dt>
- <b>Attributes</b>
- </dt>
- <dd>
- <dl>
- <dt>
- <code class='attribute-name'><a id="DOM-CSSKeyframesRule-name" name='DOM-CSSKeyframesRule-name'>name</a></code> of type <code>DOMString</code>
- </dt>
- <dd>
- This attribute is the name of the keyframes, used by the <code>animation-name</code> property.<br>
- </dd>
- </dl>
- </dd>
- <dd>
- <dl>
- <dt>
- <code class='attribute-name'><a id="DOM-CSSKeyframeRules-cssRules" name='DOM-CSSKeyframeRules-cssRules'>cssRules</a></code> of type <code>CSSRuleList</code>
- </dt>
- <dd>
- This attribute gives access to the keyframes in the list.<br>
- </dd>
- </dl>
- </dd>
- <dt>
- <b>Methods</b>
- <dd>
- <dl>
- <!-- ======================================================================================================= -->
- <dt>
- <code class='method-name'><a id="DOM-CSSKeyframesRule-insertRule" name='DOM-CSSKeyframesRule-insertRule'>insertRule</a></code>
- </dt>
- <dd>
- <div class='method'>
- The <code>insertRule</code> method inserts the passed CSSKeyframeRule into the list at the passed key.
- <div class='parameters'>
- <b>Parameters</b>
- <div class='paramtable'>
- <dl>
- <dt>
- <code class='parameter-name'>rule</code> of type <code>DOMString</code>
- </dt>
- <dd>
- The rule to be inserted, expressed in the same syntax as one entry in the
- <code>@keyframes</code> rule. The key is included in the rule string, which described the
- point at which the rule should be inserted. If a rule with the same key already exists in
- the list, it is replaced with this rule.
- </dd>
- </dl>
- </div>
- </div><!-- parameters -->
- <div class='return-value'>
- <b>No Return Value</b>
- </div>
- <div>
- <b>No Exceptions</b>
- </div>
- </div><!-- ======================================================================================================= -->
- </dd>
- <dt>
- <code class='method-name'><a id="DOM-CSSKeyframesRule-deleteRule" name='DOM-CSSKeyframesRule-deleteRule'>deleteRule</a></code>
- </dt>
- <dd>
- <div class='method'>
- The <code>deleteRule</code> method deletes the CSSKeyframeRule with the passed key. If a rule with this key
- does not exist, the method does nothing.
- <div class='parameters'>
- <b>Parameters</b>
- <div class='paramtable'>
- <dl>
- <dt>
- <code class='parameter-name'>key</code> of type <code>DOMString</code>
- </dt>
- <dd>
- The key which describes the rule to be deleted. The key must
- resolve to a number between 0 and 1, or the rule is ignored.<br>
- </dd>
- </dl>
- </div>
- </div><!-- parameters -->
- <div class='return-value'>
- <b>No Return Value</b>
- </div>
- <div>
- <b>No Exceptions</b>
- </div>
- </div><!-- ======================================================================================================= -->
- </dd>
- <dt>
- <code class='method-name'><a id="DOM-CSSKeyframesRule-findRule" name='DOM-CSSKeyframesRule-findRule'>findRule</a></code>
- </dt>
- <dd>
- <div class='method'>
- The <code>findRule</code> method returns the rule with a key matching the passed key. If no such rule
- exists, a null value is returned.
- <div class='parameters'>
- <b>Parameters</b>
- <div class='paramtable'>
- <dl>
- <dt>
- <code class='parameter-name'>key</code> of type <code>DOMString</code>
- </dt>
- <dd>
- The key which described the rule to find. The key must
- resolve to a number between 0 and 1, or the rule is ignored.<br>
- </dd>
- </dl>
- </div>
- </div><!-- parameters -->
- <div class='return-value'>
- <b>Return Value</b>
- <div class='returnvalue'>
- <dl>
- <dt>
- <code>CSSKeyframeRule</code>
- </dt>
- <dd>
- The found rule.<br>
- </dd>
- </dl>
- </div>
- </div>
- <div>
- <b>No Exceptions</b>
- </div>
- </div><!-- ======================================================================================================= -->
- </dd>
- </dl><!-- method -->
- </dd>
- </dt>
- </dl>
- </dd>
- </dl>
-
-<h2>References</h2>
-
-<h3 class="no-num">Normative references</h3>
-<!--normative-->
-
-<h3 class="no-num">Other references</h3>
-<!--informative-->
-
-
-
-<h2 class="no-num">Property index</h2>
-<!-- properties -->
-
-
-
-<h2 class="no-num" id="index">Index</h2>
-<!--index-->
-
-</body>
-</html>
-<!-- Keep this comment at the end of the file
-Local variables:
-mode: sgml
-sgml-default-doctype-name:"html"
-sgml-minimize-attributes:t
-End:
--->
diff --git a/WebKitSite/specs/CSSVisualEffects/css3-animations/animation1.png b/WebKitSite/specs/CSSVisualEffects/css3-animations/animation1.png
deleted file mode 100644
index ff4e8b3..0000000
Binary files a/WebKitSite/specs/CSSVisualEffects/css3-animations/animation1.png and /dev/null differ
diff --git a/WebKitSite/specs/CSSVisualEffects/css3-animations/default.css b/WebKitSite/specs/CSSVisualEffects/css3-animations/default.css
deleted file mode 100644
index 44fa54e..0000000
--- a/WebKitSite/specs/CSSVisualEffects/css3-animations/default.css
+++ /dev/null
@@ -1,477 +0,0 @@
-/*
- * Style sheet for the CSS3 specification,
- * to be used in addition to http://www.w3.org/StyleSheets/TR/W3C-{WD,PR,REC}
- * $Id: default.css,v 1.1 2009-02-10 23:51:42 dean Exp $
- */
-
- at media print {
-
- /* the following doesn't work for now,
- instead we rely on a patched version of html2ps which has this built-in */
- .dlink { display: none }
-
- /* the following doesn't work for now,
- instead we rely on a patched version of html2ps which has this built-in */
- div.navbar {
- display: none;
- }
-
- html { margin: 0 !important }
- body { font-family: serif }
- th, td { font-family: inherit }
- a { color: inherit !important }
- div.example:before { font-family: serif !important }
- pre.example:before { font-family: serif !important }
- a:link, a:visited { text-decoration: none !important }
- a:link:after, a:visited:after { /* create a cross-ref "see..." */ }
-}
- at page {
- margin: 1.5cm 1.1cm;
-}
-
-/* html body { margin-left: 8.5em } /* Overrides 70px in base.css */
-
-body {counter-reset: exampleno figure}
-
-h2, h3, h5, h6 { margin-top: 2em }
-h1, h2, h3, h4, h5, h6 { page-break-after: avoid; font-family: inherit }
-div.figure, div.sidefigure, pre, table.propdef, table.propdef-extra,
-div.example { page-break-inside: avoid }
-dt { page-break-after: avoid }
-
-span.id {float: right; font-weight: bold}
-
-p, p.testlink + p, p.mtb {
- text-indent: 0;
- margin-bottom: 0;
- margin-top: 0.8em
-}
-p + p, p + div.sidefigure + p {
- text-indent: 2em;
- margin-top: 0
-}
-dd > p:first-child, li > p:first-child {
- margin-top: 0
-}
-
-h1 + h2 {
- margin-top: 0;
-}
-
-pre {
- text-align: left; /* fixes justification in Mac IE 5 */
- text-indent: 0; /* fixes indent in Mac Netscape 6 */
- margin-top: 1em;
- margin-bottom: 1em;
- font-size: 90% /*smaller*/;
-}
-/*
-var {
- font-style: normal;
-}
-*/
-img {
- border-style: none;
- color: white;
-}
-.toc {
- text-indent: 0;
-}
-
-
- at media all { /* NS < 6 doesn't like borders around inline elements... */
-
- body {
- line-height: 1.3;
- }
-
- a:link, a:visited {
- color: inherit;
- text-decoration: underline;
- }
-
- a.logo:link, a.logo:visited {
- padding: 0;
- border-style: none;
- }
-
- /* Hmm, this seems to confuse many browsers... */
- dt { margin-left: 0 }
- dd { margin-left: 2em }
- dl, ul, ol { margin-left: 0; padding-left: 0 }
- li { margin-left: 2em; padding-left: 0 }
-
-}
-ul.indexlist { margin-left: 0; /*column-width: 13em; columns: 13em*/ }
-ul.indexlist li { margin-left: 0; list-style: none }
-ul.indexlist li li { margin-left: 1em }
-
-.example {
- counter-increment: exampleno;
-}
-div.example:before {
- content: "Example";
- content: "Example " counter(exampleno, upper-roman);
- font: bold small sans-serif;
- /*float: left;*/
- position: absolute;
- top: -0.6em;
- left: -2.5em;
- width: 7.5em;
- text-align: center;
- line-height: 1em;
- color: #FFF8DD;
- background: #600;
- padding: 0.1em;
- border: thin solid #999;
- /*margin: -1.3em 0 0.3em -2.5em;*/
-}
-pre.example:before {
- content: "Example";
- content: "Example " counter(exampleno, upper-roman);
- font: bold small sans-serif;
- /*float: left;*/
- position: absolute;
- top: -0.6em;
- left: -2.5em;
- width: 7.5em;
- text-align: center;
- line-height: 1em;
- color: #FFF8DD;
- background: #600;
- padding: 0.1em;
- border: thin solid #999;
- /*margin: -1.3em 0 0.3em -2.5em;*/
-}
-div.example, div.illegal-example, div.html, div.illegal-html, div.xml,
-div.illegal-xml, pre.example, pre.illegal-example, pre.html,
-pre.illegal-html, pre.xml, pre.illegal-xml {
- background: #FFF8DD;
- padding: 0.5em;
- margin: 1em 0;
- border: thin solid #999;
- position: relative;
-}
-pre.example, pre.illegal-example, pre.html,
-pre.illegal-html, pre.xml, pre.illegal-xml {
- padding-top: 1.5em;
-}
-div.example { color: #600 }
-pre.example { color: #600 }
-pre.illegal-example { color: red }
-div.illegal-example { color: red }
-div.illegal-example p { color: black }
-
-div.html { color: #600 }
-pre.html { color: #600 }
-pre.illegal-html { color: red }
-div.illegal-html { color: red }
-div.illegal-html p { color: black }
-pre.deprecated-html { color: red }
-div.deprecated-html { color: red }
-div.deprecated-html p { color: black }
-
-div.xml { color: #600 }
-pre.xml { color: #600 }
-pre.illegal-xml { color: red }
-div.illegal-xml { color: red }
-div.illegal-xml p { color: black }
-
-/* code { font-size: 90% } */
-.css { color: #800 } /* inline CSS code (SPAN/CODE) */
-code.css { font-family: inherit; font-size: 100% }
-code.html { color: #600 } /* inline HTML */
-code.xml { color: #600 } /* inline XML */
-.property { font: inherit; } /* name of a CSS property (SPAN) */
-.descriptor { } /* name of a CSS descriptor (SPAN) */
-.issue { color: #c00 } /* editorial remark, open issue */
-.type { font-style: italic } /* A <type> value for a property */
-
-dfn { font-weight: bolder; /*font-size: 1em*/ }
-
-/* Class note is a non-normative note. May be inline or a P or DIV */
-.note {
- /* font-weight: bold; */
- color: green
-}
-p.note, div.note {
- /* margin: 1em 2em; */
-}
-p.note:before, span.note:before { content: "\25B6" " " }
-div.note > p:first-child:before { content: "\25B6" " " }
-
-.normref { color: red }
-.informref { color: green }
-
-
-/* ToC not indented, but font style shows hierarchy */
-ul.toc {margin: 1em 0; padding: 0; font-weight: bold}
-ul.toc ul {margin: 0; padding: 0; font-weight: normal}
-ul.toc ul ul {margin: 0 /*0 0 2em*/; font-style: italic}
-ul.toc ul ul ul {margin: 0}
-ul.toc li {margin: 0.6em 0; padding: 0}
-ul.toc li li {margin: 0}
-/*
-ul.toc li li li, ul.toc li li li ul {margin-left: 0; display: inline}
-ul.toc li li li ul, ul.toc li li li ul li {margin-left: 0; display: inline}
-*/
-
- at media all { /* NS4 doesn't align the floats properly :-( */
-
- /* Section numbers in a column of their own */
- ul.toc span.secno {margin-right: 1em} /* workaround for Opera6 */
- ul.toc span.secno {float: left; width: 4em; margin-left: -5em}
- /*ul.toc span.secno {text-align: right}*/
- ul.toc li {clear: both}
- ul.toc {margin-left: 5em}
- /* If we had 'tab', floats would not be needed here:
- ul.toc span.secno {tab: 5em right; margin-right: 1em}
- ul.toc li {text-indent: 5em hanging}
- The second line in case items wrap
- */
-}
-
-ul.index {
- list-style: disc; /* Mac NS has problem with 'none' */
- list-style: none;
-}
-
-s, del {text-decoration: line-through; color: red}
-u, ins {text-decoration: underline; background: #bfa}
-
-div.figure, div.sidefigure {
- text-align: center;
- margin: 2.5em 0;
-}
-div.sidefigure {
- float: right;
- width: 50%;
- margin: 0 0 0.5em 0.5em
-}
-div.figure img, div.sidefigure img {
- display: block;
- margin: auto;
- max-width: 100%
-}
-p.caption, caption {
- text-align: center;
- font-style: italic;
- font-size: 90%;
- margin: 1.5em 2em;
- text-indent: 0;
-}
-p.caption:before {
- content: "Figure " counter(figure) ". ";
- font-weight: bold;
-}
-p.caption {
- counter-increment: figure;
-}
-
-/* DL list is indented, but figure inside it is not */
-dd { margin-left: 2em }
-dd div.figure { margin-left: -2em }
-
-sup {
- vertical-align: super;
- font-size: 80%
-}
-
-/* "Equations" (not real MathML, but simple HTML) are put in a
-blockquote and may have an equation number. We make sure the
-blockquote has enough margin on the right and then put the equation
-number there. */
-
-blockquote {
- margin: 0.5em 4em 0.5em 2em;
- text-indent: 0;
-}
-.eqno {
- text-align: right;
- float: right;
- width: 3em;
- margin: 0 -4em 0 0;
- font-weight: bold;
- /* background: silver; color: black; padding: 0.1em */
-}
-
-table.equiv-table { border-spacing: 0; margin: 0.5em 0 }
-table.equiv-table th, table.equiv-table td { padding: 0.3em }
-table.equiv-table th { text-align: left }
-/* table.equiv-table th:first-child { text-align: right } */
-table.equiv-table td, table.equiv-table th { border-bottom: thin solid #666 }
-table.equiv-table { border-bottom: hidden }
-table.equiv-table { empty-cells: show }
-table.equiv-table caption { margin: 0.5em 0 0 0 }
-
-/* Style for table of properties */
-table.proptable {
- font-size: small;
- border-collapse: collapse;
- border-spacing: 0;
- text-align: left;
- margin: 1em 0;
-}
-
-table.proptable td, table.proptable th {
- padding: 0.4em;
- border-style: solid none none dotted;
- border-width: thin;
- border-color: red;
-}
-table.proptable th:first-child, table.proptable td:first-child {
- border-left-style: none;
-}
-
-
-/* Style for table that defines a property or a descriptor */
-table.propdef, table.propdef-extra, table.descdef {
- border-spacing: 0;
- border-collapse: collapse;
- width: 100%;
- table-layout: fixed;
- background: #DEF;
- margin-top: 1.2em;
- margin-bottom: 1.2em
-}
-
-/* Since Jan 2008, some CSS modules use <th> instead of <td> in the
-first column of a table.propdef. These rules handle both. As of Jan
-2008, http://www.w3.org/Style/spec-mark-up still only documents <td>
-*/
-
-table.propdef td, table.propdef-extra td, table.descdef td,
-table.propdef th, table.propdef-extra th, table.descdef th {
- padding: 0 0.3em;
- vertical-align: baseline;
-}
-/*
-table.propdef dfn, table.propdef-extra dfn, table.descdef dfn {
- font-weight: bold;
- font-style: normal
-}
-*/
-table.propdef td:first-child,
-table.propdef-extra td:first-child,
-table.descdef td:first-child,
-table.propdef th:first-child,
-table.propdef-extra th:first-child,
-table.descdef th:first-child {
- font-style: italic;
- font-weight: normal;
- text-align: left;
- width: 8.3em
-}
-table.propdef td[colspan]:first-child,
-table.propdef-extra td[colspan]:first-child,
-table.descdef td[colspan]:first-child,
-table.propdef th[colspan]:first-child,
-table.propdef-extra th[colspan]:first-child,
-table.descdef th[colspan]:first-child {
- font-style: inherit
-}
-table.propdef tr:first-child,
-table.propdef-extra tr:first-child,
-table.descdef tr:first-child {
- background: #005A9C;
- color: white
-}
-/* table.propdef tr:first-child td { padding-top: 0.1em; padding-bottom: 0.1em } */
-
-/* This would replace :first-child for Opera, but it confuses WinIE :-( */
-/*
-table.propdef td { width: 8em }
-table.propdef td + td { width: auto }
-table.propdef tr { background: #005A9C; color: white }
-table.propdef tr + tr { background: transparent; color: black }
-*/
-
-/* CSS modules typically don't use MUST, SHOULD etc. from RFC 2119,
-or, if they do, they don't put them in uppercase. But the following
-class is provided in case a spec wants to use RFC 2119 terms in
-uppercase in the source. */
-
-em.rfc2119 {
- text-transform: lowercase;
- font-variant: small-caps;
- font-style: normal
-}
-
-/* In Profile specs, a table of required features: */
-
-table.features th {
- background: #00589f;
- color: #fff;
- text-align: left;
- padding: 0.2em 0.2em 0.2em 0.5em;
-}
-table.features td {
- vertical-align: top;
- border-bottom: 1px solid #ccc;
- padding: 0.3em 0.3em 0.3em 0.7em;
-}
-
-
-/* Style for data tables (and properly marked-up proptables) */
-
- .data, .proptable {
- margin: 1em auto;
- border-collapse: collapse;
- border: solid #005A9B;
- }
- .data caption {
- width: 100%;
- text-align: center;
- }
- .data td, .data th,
- .proptable td, .proptable th {
- border: thin solid;
- padding: 0.2em;
- text-align: center;
- }
- .data thead th[scope="row"],
- .proptable thead th[scope="row"] {
- text-align: right;
- background: #A4C8E2;
- color: inherit;
- }
- .data thead,
- .proptable thead {
- background: #EEEEEE;
- color: inherit;
- }
- .data tbody th:first-child,
- .proptable tbody th:first-child {
- text-align: right;
- background: #EEEEEE;
- color: inherit;
- }
- .data thead,
- .data tbody,
- .data tfoot,
- .data colgroup {
- border: solid;
- }
-
- .data img {
- vertical-align: middle;
- }
-
- table.propdef {
- table-layout: auto;
- }
- .propdef th {
- font-style: italic;
- font-weight: normal;
- text-align: left;
- width: 3em;
- }
- dt dfn code {
- font-size: inherit;
- }
-
-/* This is mostly to make the list inside the CR exit criteria more compact. */
-dl ol, dl li {display: inline; padding: 0; margin: 0}
-dl ol {counter-reset: list-item}
-dl li {counter-increment: list-item}
-dl li:before {content: "(" counter(list-item) ") "; font-weight: bold}
diff --git a/WebKitSite/specs/CSSVisualEffects/css3-animations/sandwich.png b/WebKitSite/specs/CSSVisualEffects/css3-animations/sandwich.png
deleted file mode 100644
index 178192f..0000000
Binary files a/WebKitSite/specs/CSSVisualEffects/css3-animations/sandwich.png and /dev/null differ
diff --git a/WebKitSite/specs/CSSVisualEffects/css3-transitions/Makefile b/WebKitSite/specs/CSSVisualEffects/css3-transitions/Makefile
deleted file mode 100644
index f26d0fb..0000000
--- a/WebKitSite/specs/CSSVisualEffects/css3-transitions/Makefile
+++ /dev/null
@@ -1,39 +0,0 @@
-# Calling the post-processor with file-upload. Assumes the username
-# and password are in ~/.curl-w3.org
-#
-# Possible other options:
-# -F date=YYYY-MM-DD
-# -F ids=on
-
-%.html: %.src.html
- @echo "Calling post-processor to generate $@..."
- @curl -F file=@$< -F group=CSS -F output=html -F method=file -s -K ~/.curl-w3.org http://cgi.w3.org/member-bin/process.cgi >$@
-%.err: %.src.html
- @echo "Calling post-processor to check $<..."
- @curl -F file=@$< -F group=CSS -F output=err -F method=file -s -K ~/.curl-w3.org http://cgi.w3.org/member-bin/process.cgi >$@
-
-
-
-all: check Overview.html
- @echo Done.
-
-check: Overview.err
- @cat $<
- @grep -q '^No errors$$' $< # Force a non-zero exit code if errors
-
-
-
-# A handy shortcut:
-
-commit: update clean all
- cvs commit -m 'Generated. Do not edit!' Overview.html
-
-update:
- cvs update
-
-clean:
- rm Overview.html
-
-
-
-.PHONY: check commit update clean
diff --git a/WebKitSite/specs/CSSVisualEffects/css3-transitions/Overview.err b/WebKitSite/specs/CSSVisualEffects/css3-transitions/Overview.err
deleted file mode 100644
index 4269126..0000000
--- a/WebKitSite/specs/CSSVisualEffects/css3-transitions/Overview.err
+++ /dev/null
@@ -1 +0,0 @@
-No errors
diff --git a/WebKitSite/specs/CSSVisualEffects/css3-transitions/Overview.html b/WebKitSite/specs/CSSVisualEffects/css3-transitions/Overview.html
deleted file mode 100644
index 19b1064..0000000
--- a/WebKitSite/specs/CSSVisualEffects/css3-transitions/Overview.html
+++ /dev/null
@@ -1,1350 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
-"http://www.w3.org/TR/html4/strict.dtd">
-
-<html lang=en>
- <head>
- <title>CSS Transitions Module Level 3</title>
- <link href=default.css rel=stylesheet type="text/css">
-
- <style type="text/css">
- .rhs { white-space: pre-wrap; }
- code { font-size: inherit; }
- #box-shadow-samples td { background: white; color: black; }
-
- table {
- border-collapse: collapse;
- }
- td {
- padding: 0.2em 1em;
- border: 1px solid black;
- }
- </style>
- <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
- type="text/css">
-
- <body>
- <div class=head> <!--begin-logo-->
- <p><a href="http://www.w3.org/"><img alt=W3C height=48
- src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
-
- <h1>CSS Transitions Module Level 3</h1>
-
- <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 14 April 2009</h2>
-
- <dl>
- <dt>This version:
-
- <dd> <a href="http://www.w3.org/TR/2009/ED-css3-transitions-20090414">
- http://dev.w3.org/csswg/css3-transitions/</a>
- <!--http://www.w3.org/TR/2009/WD-css3-transitions-20090414-->
-
- <dt>Latest version:
-
- <dd><a href="http://www.w3.org/TR/css3-transitions">
- http://www.w3.org/TR/css3-transitions</a>
-
- <dt>Previous version:
-
- <dd><a href="http://www.w3.org/TR/2009/WD-css3-transitions-20090320/">
- http://www.w3.org/TR/2009/WD-css3-transitions-20090320/</a>
-
- <dt id=editors-list>Editors:
-
- <dd><a href="mailto:dino at apple.com">Dean Jackson</a> (<a
- href="http://www.apple.com/">Apple Inc</a>)
-
- <dd><a href="mailto:hyatt at apple.com">David Hyatt</a> (<a
- href="http://www.apple.com/">Apple Inc</a>)
-
- <dd><a href="mailto:cmarrin at apple.com">Chris Marrin</a> (<a
- href="http://www.apple.com/">Apple Inc</a>)
- </dl>
- <!--begin-copyright-->
- <p class=copyright><a
- href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
- rel=license>Copyright</a> © 2009 <a
- href="http://www.w3.org/"><acronym title="World Wide Web
- Consortium">W3C</acronym></a><sup>®</sup> (<a
- href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute
- of Technology">MIT</acronym></a>, <a
- href="http://www.ercim.org/"><acronym title="European Research Consortium
- for Informatics and Mathematics">ERCIM</acronym></a>, <a
- href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
- href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
- <a
- href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
- and <a
- href="http://www.w3.org/Consortium/Legal/copyright-documents">document
- use</a> rules apply.</p>
- <!--end-copyright-->
- <hr title="Separator for header">
- </div>
-
- <h2 class="no-num no-toc" id=abstract>Abstract</h2>
-
- <p>CSS Transitions allows property changes in CSS values to occur smoothly
- over a specified duration.
-
- <h2 class="no-num no-toc" id=status>Status of this document</h2>
- <!--begin-status-->
-
- <p>This is a public copy of the editors' draft. It is provided for
- discussion only and may change at any moment. Its publication here does
- not imply endorsement of its contents by W3C. Don't cite this document
- other than as work in progress.
-
- <p>The (<a
- href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
- mailing list <a href="mailto:www-style at w3.org">www-style at w3.org</a> (see
- <a href="http://www.w3.org/Mail/Request">instructions</a>) is preferred
- for discussion of this specification. When sending e-mail, please put the
- text “css3-transitions” in the subject, preferably like this:
- “[<!---->css3-transitions<!---->] <em>…summary of
- comment…</em>”
-
- <p>This document was produced by the <a href="/Style/CSS/members">CSS
- Working Group</a> (part of the <a href="/Style/">Style Activity</a>).
-
- <p>This document was produced by a group operating under the <a
- href="/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent
- Policy</a>. W3C maintains a <a href="/2004/01/pp-impl/32061/status"
- rel=disclosure>public list of any patent disclosures</a> made in
- connection with the deliverables of the group; that page also includes
- instructions for disclosing a patent. An individual who has actual
- knowledge of a patent which the individual believes contains <a
- href="/Consortium/Patent-Policy-20040205/#def-essential">Essential
- Claim(s)</a> must disclose the information in accordance with <a
- href="/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the
- W3C Patent Policy</a>.</p>
- <!--end-status-->
-
- <h2 class="no-num no-toc" id=contents>Table of contents</h2>
- <!--begin-toc-->
-
- <ul class=toc>
- <li><a href="#introduction"><span class=secno>1 </span>Introduction</a>
-
- <li><a href="#transitions-"><span class=secno>2 </span> Transitions </a>
- <ul class=toc>
- <li><a href="#the-transition-property-property-"><span class=secno>2.1
- </span> The <span class=prop-name>‘<code
- class=property>transition-property</code>’</span> Property </a>
-
- <li><a href="#the-transition-duration-property-"><span class=secno>2.2
- </span> The <span class=prop-name>‘<code
- class=property>transition-duration</code>’</span> Property </a>
-
- <li><a href="#transition-timing-function_tag"><span class=secno>2.3
- </span> The <span class=prop-name>‘<code
- class=property>transition-timing-function</code>’</span> Property
- </a>
-
- <li><a href="#the-transition-delay-property-"><span class=secno>2.4
- </span> The <span class=prop-name>‘<code
- class=property>transition-delay</code>’</span> Property </a>
-
- <li><a href="#the-transition-shorthand-property-"><span class=secno>2.5
- </span> The <span class=prop-name>‘<code
- class=property>transition</code>’</span> Shorthand Property </a>
- </ul>
-
- <li><a href="#transition-events-"><span class=secno>3 </span> Transition
- Events </a>
-
- <li><a href="#animation-of-property-types-"><span class=secno>4 </span>
- Animation of property types </a>
-
- <li><a href="#animatable-properties-"><span class=secno>5 </span>
- Animatable properties </a>
- <ul class=toc>
- <li><a href="#properties-from-css-"><span class=secno>5.1 </span>
- Properties from CSS </a>
-
- <li><a href="#properties-from-svg-"><span class=secno>5.2 </span>
- Properties from SVG </a>
- </ul>
-
- <li><a href="#references"><span class=secno>6 </span>References</a>
- <ul class=toc>
- <li class=no-num><a href="#normative-references">Normative
- references</a>
-
- <li class=no-num><a href="#other-references">Other references</a>
- </ul>
-
- <li class=no-num><a href="#property-index">Property index</a>
-
- <li class=no-num><a href="#index">Index</a>
- </ul>
- <!--end-toc-->
-
- <h2 id=introduction><span class=secno>1 </span>Introduction</h2>
-
- <p><em>This section is not normative.</em>
-
- <p> This document introduces new CSS features to enable <em>implicit
- transitions</em>, which describe how CSS properties can be made to change
- smoothly from one value to another over a given duration.
-
- <h2 id=transitions-><span class=secno>2 </span> Transitions</h2>
-
- <p> Normally when the value of a CSS property changes, the rendered result
- is instantly updated, with the affected elements immediately changing from
- the old property value to the new property value. This section describes a
- way to specify transitions using new CSS properties. These properties are
- used to animate smoothly from the old state to the new state over time.
-
- <p> For example, suppose that transitions of one second have been defined
- on the <span class=prop-name>‘<code
- class=property>left</code>’</span> and <span
- class=prop-name>‘<code
- class=property>background-color</code>’</span> properties. The
- following diagram illustrates the effect of updating those properties on
- an element, in this case moving it to the right and changing the
- background from red to blue. This assumes other transition parameters
- still have their default values.
-
- <div class=figure> <img alt="" src=transition1.png></div>
-
- <p class=caption> Transitions of <span class=prop-name>‘<code
- class=property>left</code>’</span> and <span
- class=prop-name>‘<code
- class=property>background-color</code>’</span>
-
- <p> Transitions are a presentational effect. The computed value of a
- property transitions over time from the old value to the new value.
- Therefore if a script queries the computed style of a property as it is
- transitioning, it will see an intermediate value that represents the
- current animated value of the property.
-
- <p> Only animatable CSS properties can be transitioned. See the table at
- the end of this document for a list of properties that are animatable.
-
- <p> The transition for a property is defined using a number of new
- properties. For example:
-
- <div class=example>
- <p style="display:none"> Example(s):</p>
-
- <pre>
- div {
- transition-property: opacity;
- transition-duration: 2s;
- }
- </pre>
- The above example defines a transition on the <span
- class=prop-name>‘<code class=property>opacity</code>’</span>
- property that, when a new value is assigned to it, will cause a smooth
- change between the old value and the new value over a period of two
- seconds.</div>
-
- <p> Each of the transition properties accepts a comma-separated list,
- allowing multiple transitions to be defined, each acting on a different
- property. In this case, the individual transitions take their parameters
- from the same index in all the lists. For example:
-
- <div class=example>
- <p style="display:none"> Example(s):</p>
-
- <pre>
- div {
- transition-property: opacity, left;
- transition-duration: 2s, 4s;
- }
-
- </pre>
- This will cause the <span class=prop-name>‘<code
- class=property>opacity</code>’</span> property to transition over a
- period of two seconds and the left property to transition over a period of
- four seconds.</div>
- <!-- ======================================================================================================= -->
-
- <h3 id=the-transition-property-property-><span class=secno>2.1 </span> The
- <span class=prop-name>‘<code class=property><a
- href="#transition-property">transition-property</a></code>’</span>
- Property</h3>
-
- <p> The <span class=prop-name>‘<code class=property><a
- href="#transition-property">transition-property</a></code>’</span>
- property specifies the name of the CSS property to which the transition is
- applied.
-
- <div class=issue> We may ultimately want to support a keypath syntax for
- this property. A keypath syntax would enable different transitions to be
- specified for components of a property. For example the blur of a shadow
- could have a different transition than the color of a shadow.</div>
-
- <table class=propdef>
- <tbody>
- <tr>
- <td> <em>Name:</em>
-
- <td> <dfn id=transition-property>transition-property</dfn>
-
- <tr>
- <td> <em>Value:</em>
-
- <td> none | all | [ <IDENT> ] [ ‘<code
- class=css>,</code>’ <IDENT> ]*
-
- <tr>
- <td> <em>Initial:</em>
-
- <td> all
-
- <tr>
- <td> <em>Applies to:</em>
-
- <td> block-level and inline-level elements
-
- <tr>
- <td> <em>Inherited:</em>
-
- <td> no
-
- <tr>
- <td> <em>Percentages:</em>
-
- <td> N/A
-
- <tr>
- <td> <em>Media:</em>
-
- <td> visual
-
- <tr>
- <td> <em>Computed value:</em>
-
- <td> Same as specified value.
- </table>
-
- <p> A value of ‘<code class=property>none</code>’ means that no
- property will transition. A value of ‘<code
- class=property>all</code>’ means that every property that is able to
- undergo a transition will do so. Otherwise, a list of properties to be
- transitioned is given.
-
- <div class=issue> We need to generate a list of properties that can be
- transitioned.</div>
-
- <div class=issue> Is "none" even a useful value if the initial value is
- "all"? The syntax is more elegant if transition-duration defaults to 0 and
- this property defaults to "all", but another option is to default this
- property to "none" and duration to something reasonable, e.g., 250ms. This
- would force an author to specify transition-property in the shorthand all
- the time though.</div>
- <!-- ======================================================================================================= -->
-
- <h3 id=the-transition-duration-property-><span class=secno>2.2 </span> The
- <span class=prop-name>‘<code class=property><a
- href="#transition-duration">transition-duration</a></code>’</span>
- Property</h3>
-
- <p> The <span class=prop-name>‘<code class=property><a
- href="#transition-duration">transition-duration</a></code>’</span>
- property defines the length of time that a transition takes.
-
- <table class=propdef>
- <tbody>
- <tr>
- <td> <em>Name:</em>
-
- <td> <dfn id=transition-duration>transition-duration</dfn>
-
- <tr>
- <td> <em>Value:</em>
-
- <td> <time> [, <time>]*
-
- <tr>
- <td> <em>Initial:</em>
-
- <td> 0
-
- <tr>
- <td> <em>Applies to:</em>
-
- <td> block-level and inline-level elements
-
- <tr>
- <td> <em>Inherited:</em>
-
- <td> no
-
- <tr>
- <td> <em>Percentages:</em>
-
- <td> N/A
-
- <tr>
- <td> <em>Media:</em>
-
- <td> visual
-
- <tr>
- <td> <em>Computed value:</em>
-
- <td> Same as specified value.
- </table>
-
- <p> This property specifies how long the transition from the old value to
- the new value should take. By default the value is ‘<code
- class=css>0</code>’, meaning that the transition is immediate (i.e.
- there will be no animation). A negative value for <a class=prop-name
- href="#transition-duration">transition-duration</a> is treated as
- ‘<code class=css>0</code>’.</p>
- <!-- =======================================================================================================
- -->
-
- <h3 id="transition-timing-function_tag"><span class=secno>2.3 </span> The
- <span class=prop-name>‘<code class=property><a
- href="#transition-timing-function">transition-timing-function</a></code>’</span>
- Property</h3>
-
- <p> The <span class=prop-name>‘<code class=property><a
- href="#transition-timing-function">transition-timing-function</a></code>’</span>
- property describes how the intermediate values used during a transition
- will be calculated. It allows for a transition to change speed over its
- duration. These effects are commonly called <em>easing</em> functions. In
- either case, a mathematical function that provides a smooth curve is used.
-
-
- <p> The timing function is specified using a <a
- href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curves">cubic
- bezier curve</a>, which is defined by four control points, P<sub>0</sub>
- through P<sub>3</sub> (see Figure 1). P<sub>0</sub> and P<sub>3</sub> are
- always set to (0,0) and (1,1). The <span class=prop-name>‘<code
- class=property><a
- href="#transition-timing-function">transition-timing-function</a></code>’</span>
- property is used to specify the values for points P<sub>1</sub> and
- P<sub>2</sub>. These can be set to preset values using the keywords listed
- below, or can be set to specific values using the <span
- class=prop-value>‘<code
- class=property>cubic-bezier</code>’</span> function. In the <span
- class=prop-value>‘<code
- class=property>cubic-bezier</code>’</span> function, P<sub>1</sub>
- and P<sub>2</sub> are each specified by both an X and Y value.
-
- <div class=figure> <img alt="The timing function is a smooth curve from
- point P0 = (0,0) to point P3 = (1,1). The length and orientation of the
- line segment P0-P1 determines the tangent and the curvature of the curve
- at P0 and the line segment P2-P3 does the same at P3."
- src=TimingFunction.png></div>
-
- <p class=caption> Timing Function Control Points
-
- <p> The timing function takes as its input the current elapsed percentage
- of the transition duration and outputs a percentage that determines how
- close the transition is to its goal state.
-
- <table class=propdef>
- <tbody>
- <tr>
- <td> <em>Name:</em>
-
- <td> <dfn id=transition-timing-function>transition-timing-function</dfn>
-
-
- <tr>
- <td> <em>Value:</em>
-
- <td> ease | linear | ease-in | ease-out | ease-in-out |
- cubic-bezier(<number>, <number>, <number>,
- <number>) [, ease | linear | ease-in | ease-out | ease-in-out |
- cubic-bezier(<number>, <number>, <number>,
- <number>)]*
-
- <tr>
- <td> <em>Initial:</em>
-
- <td> ease
-
- <tr>
- <td> <em>Applies to:</em>
-
- <td> block-level and inline-level elements
-
- <tr>
- <td> <em>Inherited:</em>
-
- <td> no
-
- <tr>
- <td> <em>Percentages:</em>
-
- <td> N/A
-
- <tr>
- <td> <em>Media:</em>
-
- <td> visual
-
- <tr>
- <td> <em>Computed value:</em>
-
- <td> Same as specified value.
- </table>
-
- <p> The timing functions have the following definitions.
-
- <dl>
- <dt> ease
-
- <dd> The ease function is equivalent to cubic-bezier(0.25, 0.1, 0.25,
- 1.0).
-
- <dt> linear
-
- <dd> The linear function is equivalent to cubic-bezier(0.0, 0.0, 1.0,
- 1.0).
-
- <dt> ease-in
-
- <dd> The ease-in function is equivalent to cubic-bezier(0.42, 0, 1.0,
- 1.0).
-
- <dt> ease-out
-
- <dd> The ease-out function is equivalent to cubic-bezier(0, 0, 0.58, 1.0).
-
-
- <dt> ease-in-out
-
- <dd> The ease-in-out function is equivalent to cubic-bezier(0.42, 0, 0.58,
- 1.0)
-
- <dt> cubic-bezier
-
- <dd> Specifies a <a
- href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve">cubic-bezier
- curve</a>. The four values specify points P<sub>1</sub> and P<sub>2</sub>
- of the curve as (x1, y1, x2, y2). All values must be in the range [0, 1]
- or the definition is invalid.
- </dl>
- <!-- ======================================================================================================= -->
-
- <h3 id=the-transition-delay-property-><span class=secno>2.4 </span> The
- <span class=prop-name>‘<code class=property><a
- href="#transition-delay">transition-delay</a></code>’</span>
- Property</h3>
-
- <p> The <span class=prop-name>‘<code class=property><a
- href="#transition-delay">transition-delay</a></code>’</span>
- property defines when the transition will start. It allows a transition to
- begin execution some some period of time from when it is applied. A <span
- class=prop-name>‘<code class=property><a
- href="#transition-delay">transition-delay</a></code>’</span> value
- of ‘<code class=css>0</code>’ means the transition will
- execute as soon as the property is changed. Otherwise, the value specifies
- an offset from the moment the property is changed, and the transition will
- delay execution by that offset.
-
- <p> If the value for <span class=prop-name>‘<code class=property><a
- href="#transition-delay">transition-delay</a></code>’</span> 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 <span class=prop-name>‘<code
- class=property><a
- href="#transition-delay">transition-delay</a></code>’</span>, the
- starting values are taken from the moment the property is changed.
-
- <table class=propdef>
- <tbody>
- <tr>
- <td> <em>Name:</em>
-
- <td> <dfn id=transition-delay>transition-delay</dfn>
-
- <tr>
- <td> <em>Value:</em>
-
- <td> <time> [, <time>]*
-
- <tr>
- <td> <em>Initial:</em>
-
- <td> 0
-
- <tr>
- <td> <em>Applies to:</em>
-
- <td> block-level and inline-level elements
-
- <tr>
- <td> <em>Inherited:</em>
-
- <td> no
-
- <tr>
- <td> <em>Percentages:</em>
-
- <td> N/A
-
- <tr>
- <td> <em>Media:</em>
-
- <td> visual
-
- <tr>
- <td> <em>Computed value:</em>
-
- <td> Same as specified value.
- </table>
- <!-- ======================================================================================================= -->
-
- <h3 id=the-transition-shorthand-property-><span class=secno>2.5 </span> The
- <span class=prop-name>‘<code class=property><a
- href="#transition">transition</a></code>’</span> Shorthand Property</h3>
-
- <p> The <span class=prop-name>‘<code class=property><a
- href="#transition">transition</a></code>’</span> shorthand property
- combines the four properties described above into a single property.
-
- <table class=propdef>
- <tbody>
- <tr>
- <td> <em>Name:</em>
-
- <td> <dfn id=transition>transition</dfn>
-
- <tr>
- <td> <em>Value:</em>
-
- <td> [<transition-property> || <transition-duration> ||
- <transition-timing-function> || <transition-delay> [,
- [<transition-property> || <transition-duration> ||
- <transition-timing-function> || <transition-delay>]]*
-
- <tr>
- <td> <em>Initial:</em>
-
- <td> see individual properties
-
- <tr>
- <td> <em>Applies to:</em>
-
- <td> block-level and inline-level elements
-
- <tr>
- <td> <em>Inherited:</em>
-
- <td> no
-
- <tr>
- <td> <em>Percentages:</em>
-
- <td> N/A
-
- <tr>
- <td> <em>Media:</em>
-
- <td> visual
-
- <tr>
- <td> <em>Computed value:</em>
-
- <td> Same as specified value.
- </table>
-
- <div class=issue> What should happen when a value is changed midway through
- a transition? One option is to simply begin a new transition from the
- current position. However things get interesting when from/to values are
- being flipped. For example you'd like symmetry on fade-in/fade-out hover
- effects if the user rolls over the object and rolls out before the
- animation finishes. This implies that there needs to be a convenient and
- straightforward rule for running transitions in reverse under certain
- circumstances. This could be controlled via a new property, or could
- perhaps be done simply by detecting when the from/to values are flipped.</div>
-
- <h2 id=transition-events-><span class=secno>3 </span> Transition Events</h2>
-
- <p> The completion of a CSS Transition generates a corresponding <a
- href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM Event</a>.
- An event is fired for each property that undergoes a transition. This
- allows a content developer to perform actions that synchronize with the
- completion of a transition.
-
- <p> Each event provides the name of the property the transition is
- associated with as well as the duration of the transition.
-
- <dl>
- <dt> <b>Interface <i><a id=Events-TransitionEvent
- name=Events-TransitionEvent>TransitionEvent</a></i></b>
-
- <dd>
- <p> The <code>TransitionEvent</code> interface provides specific
- contextual information associated with transitions.</p>
-
- <dl>
- <dt> <b>IDL Definition</b>
-
- <dd>
- <div class=idl-code>
- <pre>
- interface TransitionEvent : Event {
- readonly attribute DOMString propertyName;
- readonly attribute float elapsedTime;
- void initTransitionEvent(in DOMString typeArg,
- in boolean canBubbleArg,
- in boolean cancelableArg,
- in DOMString propertyNameArg,
- in float elapsedTimeArg);
- };
- </pre>
- </div>
-
- <dt> <b>Attributes</b>
-
- <dd>
- <dl>
- <dt> <code class=attribute-name><a
- id=Events-TransitionEvent-propertyName
- name=Events-TransitionEvent-propertyName>propertyName</a></code> of
- type <code>DOMString</code>, readonly
-
- <dd> The name of the CSS property associated with the transition.
- </dl>
-
- <dl>
- <dt> <code class=attribute-name><a
- id=Events-TransitionEvent-elapsedTime
- name=Events-TransitionEvent-elapsedTime>elapsedTime</a></code> of
- type <code>float</code>, readonly
-
- <dd> The amount of time the transition has been running, in seconds,
- when this event fired. Note that this value is not affected by the
- value of <a class=prop-name
- href="#transition-delay">transition-delay</a>.
- </dl>
-
- <dt> <b>Methods</b>
-
- <dd>
- <dl>
- <dt> <code class=method-name><a
- id=Events-TransitionEvent-initTransitionEvent
- name=Events-TransitionEvent-initTransitionEvent>initTransitionEvent</a></code>
-
-
- <dd>
- <div class=method> The <code>initTransitionEvent</code> method is
- used to initialize the value of a <code>TransitionEvent</code>
- created through the <a
- href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-DocumentEvent"><code>DocumentEvent</code></a>
- interface. This method may only be called before the
- <code>TransitionEvent</code> has been dispatched via the
- <code>dispatchEvent</code> method, though it may be called multiple
- times during that phase if necessary. If called multiple times, the
- final invocation takes precedence.
- <div class=parameters> <b>Parameters</b>
- <div class=paramtable>
- <dl>
- <dt> <code class=parameter-name>typeArg</code> of type
- <code>DOMString</code>
-
- <dd> Specifies the event type.<br>
-
- <dt> <code class=parameter-name>canBubbleArg</code> of type
- <code>boolean</code>
-
- <dd> Specifies whether or not the event can bubble.<br>
-
- <dt> <code class=parameter-name>cancelableArg</code> of type
- <code>boolean</code>
-
- <dd> Specifies whether or not the event's default action can be
- prevented.<br>
-
- <dt> <code class=parameter-name>propertyNameArg</code> of type
- <code>DOMString</code>
-
- <dd> Specifies the name of the property associated with the <a
- href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event"><code>Event</code></a>
-
-
- <dt> <code class=parameter-name>elapsedTimeArg</code> of type
- <code>float</code>
-
- <dd> Specifies the amount of time, in seconds, the transition has
- been running at the time of initialization.
- </dl>
- </div>
- </div>
- <!-- parameters -->
- <div> <b>No Return Value</b></div>
-
- <div> <b>No Exceptions</b></div>
- </div>
- <!-- method -->
- </dl>
- </dl>
- </dl>
-
- <p> There is one type of transition event available.
-
- <dl>
- <dt> <b>transitionend</b>
-
- <dd> The ‘<code class=property>transitionend</code>’ event
- occurs at the completion of the transition
- <ul>
- <li>Bubbles: Yes
-
- <li>Cancelable: Yes
-
- <li>Context Info: propertyName
- </ul>
- </dl>
-
- <h2 id=animation-of-property-types-><span class=secno>4 </span> Animation
- of property types</h2>
-
- <p> The following describes how each property type undergoes transition or
- animation.
-
- <ul>
- <li> <strong>color</strong>: interpolated via red, green, blue and alpha
- components (treating each as a number, see below).
-
- <li> <strong>length</strong>: interpolated as real numbers.
-
- <li> <strong>percentage</strong>: interpolated as real numbers.
-
- <li> <strong>integer</strong>: interpolated via discrete steps (whole
- numbers). The interpolation happens in real number space and is converted
- to an integer using <code>floor()</code>.
-
- <li> <strong>number</strong>: interpolated as real (floating point)
- numbers.
-
- <li> <strong>transform list</strong>: see CSS Transforms specification <a
- href="#CSS3-2D-TRANSFORMS"
- rel=biblioentry>[CSS3-2D-TRANSFORMS]<!--{{!CSS3-2D-TRANSFORMS}}--></a>.
-
- <li> <strong>rectangle</strong>: interpolated via the x, y, width and
- height components (treating each as a number).
-
- <li> <strong>visibility</strong>: interpolated via a discrete step. The
- interpolation happens in real number space between 0 and 1, where 1 is
- "visible" and all other values are "hidden".
-
- <li> <strong>shadow</strong>: interpolated via the color, x, y and blur
- components (treating them as color and numbers where appropriate).
-
- <li> <strong>gradient</strong>: interpolated via the positions and colors
- of each stop. They must have the same type (radial or linear) and same
- number of stops in order to be animated.
-
- <li> <strong>paint server</strong> (SVG): interpolation is only supported
- between: gradient to gradient and color to color. They then work as
- above.
-
- <li> <strong>space-separated list of above</strong>: each item in the list
- is interpolated using the rules above.
- </ul>
-
- <h2 id=animatable-properties-><span class=secno>5 </span> Animatable
- properties</h2>
-
- <h3 id=properties-from-css-><span class=secno>5.1 </span> Properties from
- CSS</h3>
-
- <table>
- <tbody>
- <tr>
- <th>Property Name
-
- <th>Type
-
- <tr>
- <td>background-color
-
- <td>color
-
- <tr>
- <td>background-image
-
- <td>only gradients
-
- <tr>
- <td>background-position
-
- <td>percentage, length
-
- <tr>
- <td>border-bottom-color
-
- <td>color
-
- <tr>
- <td>border-bottom-width
-
- <td>length
-
- <tr>
- <td>border-color
-
- <td>color
-
- <tr>
- <td>border-left-color
-
- <td>color
-
- <tr>
- <td>border-left-width
-
- <td>length
-
- <tr>
- <td>border-right-color
-
- <td>color
-
- <tr>
- <td>border-right-width
-
- <td>length
-
- <tr>
- <td>border-spacing
-
- <td>length
-
- <tr>
- <td>border-top-color
-
- <td>color
-
- <tr>
- <td>border-top-width
-
- <td>length
-
- <tr>
- <td>border-width
-
- <td>length
-
- <tr>
- <td>bottom
-
- <td>length, percentage
-
- <tr>
- <td>color
-
- <td>color
-
- <tr>
- <td>crop
-
- <td>rectangle
-
- <tr>
- <td>font-size
-
- <td>length, percentage
-
- <tr>
- <td>font-weight
-
- <td>number
-
- <tr>
- <td>grid-*
-
- <td>various
-
- <tr>
- <td>height
-
- <td>length, percentage
-
- <tr>
- <td>left
-
- <td>length, percentage
-
- <tr>
- <td>letter-spacing
-
- <td>length
-
- <tr>
- <td>line-height
-
- <td>number, length, percentage
-
- <tr>
- <td>margin-bottom
-
- <td>length
-
- <tr>
- <td>margin-left
-
- <td>length
-
- <tr>
- <td>margin-right
-
- <td>length
-
- <tr>
- <td>margin-top
-
- <td>length
-
- <tr>
- <td>max-height
-
- <td>length, percentage
-
- <tr>
- <td>max-width
-
- <td>length, percentage
-
- <tr>
- <td>min-height
-
- <td>length, percentage
-
- <tr>
- <td>min-width
-
- <td>length, percentage
-
- <tr>
- <td>opacity
-
- <td>number
-
- <tr>
- <td>outline-color
-
- <td>color
-
- <tr>
- <td>outline-offset
-
- <td>integer
-
- <tr>
- <td>outline-width
-
- <td>length
-
- <tr>
- <td>padding-bottom
-
- <td>length
-
- <tr>
- <td>padding-left
-
- <td>length
-
- <tr>
- <td>padding-right
-
- <td>length
-
- <tr>
- <td>padding-top
-
- <td>length
-
- <tr>
- <td>right
-
- <td>length, percentage
-
- <tr>
- <td>text-indent
-
- <td>length, percentage
-
- <tr>
- <td>text-shadow
-
- <td>shadow
-
- <tr>
- <td>top
-
- <td>length, percentage
-
- <tr>
- <td>vertical-align
-
- <td>keywords, length, percentage
-
- <tr>
- <td>visibility
-
- <td>visibility
-
- <tr>
- <td>width
-
- <td>length, percentage
-
- <tr>
- <td>word-spacing
-
- <td>length, percentage
-
- <tr>
- <td>z-index
-
- <td>integer
-
- <tr>
- <td>zoom
-
- <td>number
- </table>
-
- <h3 id=properties-from-svg-><span class=secno>5.2 </span> Properties from
- SVG</h3>
-
- <table>
- <tbody>
- <tr>
- <th>Property Name
-
- <th>Type
-
- <tr>
- <td>stop-color
-
- <td>color
-
- <tr>
- <td>stop-opacity
-
- <td>float
-
- <tr>
- <td>fill
-
- <td>paint server
-
- <tr>
- <td>fill-opacity
-
- <td>float
-
- <tr>
- <td>stroke
-
- <td>paint server
-
- <tr>
- <td>stroke-dasharray
-
- <td>list of numbers
-
- <tr>
- <td>stroke-dashoffset
-
- <td>number
-
- <tr>
- <td>stroke-miterlimit
-
- <td>number
-
- <tr>
- <td>stroke-opacity
-
- <td>float
-
- <tr>
- <td>stroke-width
-
- <td>float
-
- <tr>
- <td>viewport-fill
-
- <td>color
-
- <tr>
- <td>viewport-fill-opacity
-
- <td>color
- </table>
-
- <h2 id=references><span class=secno>6 </span>References</h2>
-
- <h3 class=no-num id=normative-references>Normative references</h3>
- <!--begin-normative-->
- <!-- Sorted by label -->
-
- <dl class=bibliography>
- <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
- <!---->
-
- <dt id=CSS3-2D-TRANSFORMS>[CSS3-2D-TRANSFORMS]
-
- <dd>Dean Jackson; David Hyatt; Chris Marrin. <a
- href="http://www.w3.org/TR/2009/WD-css3-2d-transforms-20090320"><cite>CSS
- 2D Transforms Module Level 3.</cite></a> 20 March 2009. W3C Working
- Draft. (Work in progress.) URL: <a
- href="http://www.w3.org/TR/2009/WD-css3-2d-transforms-20090320">http://www.w3.org/TR/2009/WD-css3-2d-transforms-20090320</a>
- </dd>
- <!---->
- </dl>
- <!--end-normative-->
-
- <h3 class=no-num id=other-references>Other references</h3>
- <!--begin-informative-->
- <!-- Sorted by label -->
-
- <dl class=bibliography>
- <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
- <!---->
- </dl>
- <!--end-informative-->
-
- <h2 class=no-num id=property-index>Property index</h2>
- <!--begin-properties-->
-
- <table class=proptable>
- <thead>
- <tr>
- <th>Property
-
- <th>Values
-
- <th>Initial
-
- <th>Applies to
-
- <th>Inh.
-
- <th>Percentages
-
- <th>Media
-
- <tbody>
- <tr valign=baseline>
- <td><a class=property href="#transition">transition</a>
-
- <td>[<transition-property> || <transition-duration> ||
- <transition-timing-function> || <transition-delay> [,
- [<transition-property> || <transition-duration> ||
- <transition-timing-function> || <transition-delay>]]*
-
- <td>see individual properties
-
- <td>block-level and inline-level elements
-
- <td>no
-
- <td>N/A
-
- <td>visual
-
- <tr valign=baseline>
- <td><a class=property href="#transition-delay">transition-delay</a>
-
- <td><time> [, <time>]*
-
- <td>0
-
- <td>block-level and inline-level elements
-
- <td>no
-
- <td>N/A
-
- <td>visual
-
- <tr valign=baseline>
- <td><a class=property
- href="#transition-duration">transition-duration</a>
-
- <td><time> [, <time>]*
-
- <td>0
-
- <td>block-level and inline-level elements
-
- <td>no
-
- <td>N/A
-
- <td>visual
-
- <tr valign=baseline>
- <td><a class=property
- href="#transition-property">transition-property</a>
-
- <td>none | all | [ <IDENT> ] [ ‘,’ <IDENT> ]*
-
- <td>all
-
- <td>block-level and inline-level elements
-
- <td>no
-
- <td>N/A
-
- <td>visual
-
- <tr valign=baseline>
- <td><a class=property
- href="#transition-timing-function">transition-timing-function</a>
-
- <td>ease | linear | ease-in | ease-out | ease-in-out |
- cubic-bezier(<number>, <number>, <number>,
- <number>) [, ease | linear | ease-in | ease-out | ease-in-out |
- cubic-bezier(<number>, <number>, <number>,
- <number>)]*
-
- <td>ease
-
- <td>block-level and inline-level elements
-
- <td>no
-
- <td>N/A
-
- <td>visual
- </table>
- <!--end-properties-->
-
- <h2 class=no-num id=index>Index</h2>
- <!--begin-index-->
-
- <ul class=indexlist>
- <li>transition, <a href="#transition"
- title=transition><strong>2.5</strong></a>
-
- <li>transition-delay, <a href="#transition-delay"
- title=transition-delay><strong>2.4</strong></a>
-
- <li>transition-duration, <a href="#transition-duration"
- title=transition-duration><strong>2.2</strong></a>
-
- <li>transition-property, <a href="#transition-property"
- title=transition-property><strong>2.1</strong></a>
-
- <li>transition-timing-function, <a href="#transition-timing-function"
- title=transition-timing-function><strong>2.3</strong></a>
- </ul>
- <!--end-index-->
-</html>
-<!-- Keep this comment at the end of the file
-Local variables:
-mode: sgml
-sgml-default-doctype-name:"html"
-sgml-minimize-attributes:t
-End:
--->
diff --git a/WebKitSite/specs/CSSVisualEffects/css3-transitions/Overview.src.html b/WebKitSite/specs/CSSVisualEffects/css3-transitions/Overview.src.html
deleted file mode 100644
index 2c1fbec..0000000
--- a/WebKitSite/specs/CSSVisualEffects/css3-transitions/Overview.src.html
+++ /dev/null
@@ -1,1052 +0,0 @@
-<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01//EN'
- 'http://www.w3.org/TR/html4/strict.dtd'>
-
-<html lang="en">
-<head>
- <title>CSS Transitions Module Level 3</title>
- <link rel="stylesheet" type="text/css" href="default.css">
- <style type="text/css">
- .rhs { white-space: pre-wrap; }
- code { font-size: inherit; }
- #box-shadow-samples td { background: white; color: black; }
-
- table {
- border-collapse: collapse;
- }
- td {
- padding: 0.2em 1em;
- border: 1px solid black;
- }
- </style>
- <link rel="stylesheet" type="text/css"
- href="http://www.w3.org/StyleSheets/TR/W3C-WD.css">
-</head>
-
-<body>
-
-<div class="head">
-<!--logo-->
-
-<h1>CSS Transitions Module Level 3</h1>
-
-<h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2>
-<dl>
- <dt>This version:
- <dd>
- <a href="[VERSION]">
- http://dev.w3.org/csswg/css3-transitions/</a>
- <!--http://www.w3.org/TR/[YEAR]/WD-[SHORTNAME]-[CDATE]-->
- <dt>Latest version:
- <dd><a href="http://www.w3.org/TR/css3-transitions">
- [LATEST]</a>
- <dt>Previous version:
- <dd><a href="http://www.w3.org/TR/2009/WD-css3-transitions-20090320/">
- http://www.w3.org/TR/2009/WD-css3-transitions-20090320/</a>
- <dt id="editors-list">Editors:
- <dd><a href="mailto:dino at apple.com">Dean Jackson</a> (<a
- href="http://www.apple.com/">Apple Inc</a>)
- <dd><a href="mailto:hyatt at apple.com">David Hyatt</a> (<a
- href="http://www.apple.com/">Apple Inc</a>)
- <dd><a href="mailto:cmarrin at apple.com">Chris Marrin</a> (<a
- href="http://www.apple.com/">Apple Inc</a>)
-</dl>
-
-<!--copyright-->
-
-<hr title="Separator for header">
-</div>
-
-<h2 class="no-num no-toc" id="abstract">Abstract</h2>
-
-<p>CSS Transitions allows property changes in CSS values to occur smoothly
- over a specified duration.
-
-<h2 class="no-num no-toc" id="status">Status of this document</h2>
-<!--status-->
-
-
-<h2 class="no-num no-toc" id="contents">Table of contents</h2>
-<!--toc-->
-
-
-<h2 id="introduction">Introduction</h2>
-
-<p><em>This section is not normative.</em>
- <p>
- This document introduces new CSS features to enable <em>implicit transitions</em>, which describe how CSS properties can be made to change smoothly from one value to another over a given duration.
- </p>
- <h2>
- Transitions
- </h2>
- <p>
- Normally when the value of a CSS property changes, the rendered result is instantly updated, with the affected elements immediately changing from the old property value to the new property value. This section describes a way to specify transitions using new CSS properties. These properties are used to animate smoothly from the old state to the new state over time.
- </p>
- <p>
- For example, suppose that transitions of one second have been defined on the <span class="prop-name">'left'</span> and <span class="prop-name">'background-color'</span> properties. The following diagram illustrates the effect of updating those properties on an element, in this case moving it to the right and changing the background from red to blue. This assumes other transition parameters still have their default values.
- </p>
- <div class="figure">
- <img src="transition1.png" alt="">
- </div>
- <p class="caption">
- Transitions of <span class="prop-name">'left'</span> and <span class="prop-name">'background-color'</span>
- </p>
- <p>
- Transitions are a presentational effect. The computed value of a property transitions over time from the old value to the new value. Therefore if a script queries the computed style of a property as it is transitioning, it will see an intermediate value that represents the current animated value of the property.
- </p>
- <p>
- Only animatable CSS properties can be transitioned. See the table at the end of this document for a list
- of properties that are animatable.
- </p>
- <p>
- The transition for a property is defined using a number of new properties. For example:
- </p>
- <div class="example">
- <p style="display:none">
- Example(s):
- </p>
- <pre>
- div {
- transition-property: opacity;
- transition-duration: 2s;
- }
- </pre>The above example defines a transition on the <span class="prop-name">'opacity'</span> property that, when a new value is assigned to it, will cause a smooth change between the old value and the new value over a period of two seconds.
- </div>
- <p>
- Each of the transition properties accepts a comma-separated list, allowing multiple transitions to be defined, each acting on a different property. In this case, the individual transitions take their parameters from the same index in all the lists. For example:
- </p>
- <div class="example">
- <p style="display:none">
- Example(s):
- </p>
- <pre>
- div {
- transition-property: opacity, left;
- transition-duration: 2s, 4s;
- }
-
- </pre>This will cause the <span class="prop-name">'opacity'</span> property to transition over a period of two seconds and the left property to transition over a period of four seconds.
- </div><!-- ======================================================================================================= -->
- <h3>
- The <span class="prop-name">'transition-property'</span> Property
- </h3>
- <p>
- The <span class="prop-name">'transition-property'</span> property specifies the name of the CSS property to which the transition is applied.
- </p>
- <div class="issue">
- We may ultimately want to support a keypath syntax for this property. A keypath syntax would enable different transitions to be specified for components of a property. For example the blur of a shadow could have a different transition than the color of a shadow.
- </div>
- <table class="propdef">
- <tbody>
- <tr>
- <td>
- <em>Name:</em>
- </td>
- <td>
- <dfn id="transition-property">transition-property</dfn>
- </td>
- </tr>
- <tr>
- <td>
- <em>Value:</em>
- </td>
- <td>
- none | all | [ <IDENT> ] [ ',' <IDENT> ]*
- </td>
- </tr>
- <tr>
- <td>
- <em>Initial:</em>
- </td>
- <td>
- all
- </td>
- </tr>
- <tr>
- <td>
- <em>Applies to:</em>
- </td>
- <td>
- block-level and inline-level elements
- </td>
- </tr>
- <tr>
- <td>
- <em>Inherited:</em>
- </td>
- <td>
- no
- </td>
- </tr>
- <tr>
- <td>
- <em>Percentages:</em>
- </td>
- <td>
- N/A
- </td>
- </tr>
- <tr>
- <td>
- <em>Media:</em>
- </td>
- <td>
- visual
- </td>
- </tr>
- <tr>
- <td>
- <em>Computed value:</em>
- </td>
- <td>
- Same as specified value.
- </td>
- </tr>
- </tbody>
- </table>
-
- <p>
- A value of 'none' means that no property will transition. A value of
- 'all' means that every property that is able to undergo a transition
- will do so. Otherwise, a list
- of properties to be transitioned is given.
- </p>
-
- <div class="issue">
- We need to generate a list of properties that can be transitioned.
- </div>
-
- <div class="issue">
- Is "none" even a useful value if the initial value is "all"? The syntax is more elegant if transition-duration defaults to 0 and this property defaults to "all", but another option is to default this property to "none" and duration to something reasonable, e.g., 250ms. This would force an author to specify transition-property in the shorthand all the time though.
- </div><!-- ======================================================================================================= -->
- <h3>
- The <span class="prop-name">'transition-duration'</span> Property
- </h3>
- <p>
- The <span class="prop-name">'transition-duration'</span> property defines the length of time that a transition takes.
- </p>
- <table class="propdef">
- <tbody>
- <tr>
- <td>
- <em>Name:</em>
- </td>
- <td>
- <dfn id="transition-duration">transition-duration</dfn>
- </td>
- </tr>
- <tr>
- <td>
- <em>Value:</em>
- </td>
- <td>
- <time> [, <time>]*
- </td>
- </tr>
- <tr>
- <td>
- <em>Initial:</em>
- </td>
- <td>
- 0
- </td>
- </tr>
- <tr>
- <td>
- <em>Applies to:</em>
- </td>
- <td>
- block-level and inline-level elements
- </td>
- </tr>
- <tr>
- <td>
- <em>Inherited:</em>
- </td>
- <td>
- no
- </td>
- </tr>
- <tr>
- <td>
- <em>Percentages:</em>
- </td>
- <td>
- N/A
- </td>
- </tr>
- <tr>
- <td>
- <em>Media:</em>
- </td>
- <td>
- visual
- </td>
- </tr>
- <tr>
- <td>
- <em>Computed value:</em>
- </td>
- <td>
- Same as specified value.
- </td>
- </tr>
- </tbody>
- </table>
- <p>
- This property specifies how long the transition from the old value to the new value should take. By default the value is '0', meaning that the transition is immediate (i.e. there will be no animation). A negative value for <span class="prop-name">transition-duration</span> is treated as '0'.
- </p>
-
- <!-- =======================================================================================================
- -->
-
- <h3 id="transition-timing-function_tag">
- The <span class="prop-name">'transition-timing-function'</span> Property
- </h3>
- <p>
- The <span class="prop-name">'transition-timing-function'</span> property
- describes how the intermediate values used during a transition will be
- calculated. It allows for a transition to change speed over its
- duration. These effects are commonly called <em>easing</em> functions.
- In either case, a mathematical function that provides a smooth curve is
- used.
- </p>
- <p>
- The timing function is specified using a <a
- href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curves">cubic
- bezier curve</a>, which is defined by four control points, P<sub>0</sub>
- through P<sub>3</sub> (see Figure 1). P<sub>0</sub> and P<sub>3</sub>
- are always set to (0,0) and (1,1). The <span
- class="prop-name">'transition-timing-function'</span> property is used
- to specify the values for points P<sub>1</sub> and P<sub>2</sub>. These
- can be set to preset values using the keywords listed below, or can be
- set to specific values using the <span
- class="prop-value">'cubic-bezier'</span> function. In the <span
- class="prop-value">'cubic-bezier'</span> function, P<sub>1</sub> and
- P<sub>2</sub> are each specified by both an X and Y value.
- </p>
- <div class="figure">
- <img src="TimingFunction.png" alt="The timing function is a
- smooth curve from point P0 = (0,0) to point P3 = (1,1). The
- length and orientation of the line segment P0-P1 determines
- the tangent and the curvature of the curve at P0 and the
- line segment P2-P3 does the same at P3.">
- </div>
- <p class="caption">
- Timing Function Control Points
- </p>
- <p>
- The timing function takes as its input the current elapsed percentage of
- the transition duration and outputs a percentage that determines how
- close the transition is to its goal state.
- </p>
- <table class="propdef">
- <tbody>
- <tr>
- <td>
- <em>Name:</em>
- </td>
- <td>
- <dfn id="transition-timing-function">transition-timing-function</dfn>
- </td>
- </tr>
- <tr>
- <td>
- <em>Value:</em>
- </td>
- <td>
- ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*
- </td>
- </tr>
- <tr>
- <td>
- <em>Initial:</em>
- </td>
- <td>
- ease
- </td>
- </tr>
- <tr>
- <td>
- <em>Applies to:</em>
- </td>
- <td>
- block-level and inline-level elements
- </td>
- </tr>
- <tr>
- <td>
- <em>Inherited:</em>
- </td>
- <td>
- no
- </td>
- </tr>
- <tr>
- <td>
- <em>Percentages:</em>
- </td>
- <td>
- N/A
- </td>
- </tr>
- <tr>
- <td>
- <em>Media:</em>
- </td>
- <td>
- visual
- </td>
- </tr>
- <tr>
- <td>
- <em>Computed value:</em>
- </td>
- <td>
- Same as specified value.
- </td>
- </tr>
- </tbody>
- </table>
- <p>
- The timing functions have the following definitions.
- </p>
- <dl>
- <dt>
- ease
- </dt>
- <dd>
- The ease function is equivalent to cubic-bezier(0.25, 0.1, 0.25, 1.0).
- </dd>
- <dt>
- linear
- </dt>
- <dd>
- The linear function is equivalent to cubic-bezier(0.0, 0.0, 1.0, 1.0).
- </dd>
- <dt>
- ease-in
- </dt>
- <dd>
- The ease-in function is equivalent to cubic-bezier(0.42, 0, 1.0, 1.0).
- </dd>
- <dt>
- ease-out
- </dt>
- <dd>
- The ease-out function is equivalent to cubic-bezier(0, 0, 0.58, 1.0).
- </dd>
- <dt>
- ease-in-out
- </dt>
- <dd>
- The ease-in-out function is equivalent to cubic-bezier(0.42, 0, 0.58, 1.0)
- </dd>
- <dt>
- cubic-bezier
- </dt>
- <dd>
- Specifies a <a
- href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve">cubic-bezier
- curve</a>. The four values specify points P<sub>1</sub> and
- P<sub>2</sub> of the curve as (x1, y1, x2, y2). All values must be
- in the range [0, 1] or the definition is invalid.
- </dd>
- </dl><!-- ======================================================================================================= -->
- <h3>
- The <span class="prop-name">'transition-delay'</span> Property
- </h3>
- <p>
- The <span class="prop-name">'transition-delay'</span> property defines when the transition will start. It allows a transition to begin execution some some period of time from when it is applied. A <span class="prop-name">'transition-delay'</span> value of '0' means the transition will execute as soon as the property is changed. Otherwise, the value specifies an offset from the moment the property is changed, and the transition will delay execution by that offset.
- </p>
- <p>
- If the value for <span class="prop-name">'transition-delay'</span> 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 <span class="prop-name">'transition-delay'</span>, the starting values are taken from the moment the property is changed.
- </p>
- <table class="propdef">
- <tbody>
- <tr>
- <td>
- <em>Name:</em>
- </td>
- <td>
- <dfn id="transition-delay">transition-delay</dfn>
- </td>
- </tr>
- <tr>
- <td>
- <em>Value:</em>
- </td>
- <td>
- <time> [, <time>]*
- </td>
- </tr>
- <tr>
- <td>
- <em>Initial:</em>
- </td>
- <td>
- 0
- </td>
- </tr>
- <tr>
- <td>
- <em>Applies to:</em>
- </td>
- <td>
- block-level and inline-level elements
- </td>
- </tr>
- <tr>
- <td>
- <em>Inherited:</em>
- </td>
- <td>
- no
- </td>
- </tr>
- <tr>
- <td>
- <em>Percentages:</em>
- </td>
- <td>
- N/A
- </td>
- </tr>
- <tr>
- <td>
- <em>Media:</em>
- </td>
- <td>
- visual
- </td>
- </tr>
- <tr>
- <td>
- <em>Computed value:</em>
- </td>
- <td>
- Same as specified value.
- </td>
- </tr>
- </tbody>
- </table><!-- ======================================================================================================= -->
- <h3>
- The <span class="prop-name">'transition'</span> Shorthand Property
- </h3>
- <p>
- The <span class="prop-name">'transition'</span> shorthand property combines the four properties described above into a single property.
- </p>
- <table class="propdef">
- <tbody>
- <tr>
- <td>
- <em>Name:</em>
- </td>
- <td>
- <dfn id="transition">transition</dfn>
- </td>
- </tr>
- <tr>
- <td>
- <em>Value:</em>
- </td>
- <td>
- [<transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay> [, [<transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay>]]*
- </td>
- </tr>
- <tr>
- <td>
- <em>Initial:</em>
- </td>
- <td>
- see individual properties
- </td>
- </tr>
- <tr>
- <td>
- <em>Applies to:</em>
- </td>
- <td>
- block-level and inline-level elements
- </td>
- </tr>
- <tr>
- <td>
- <em>Inherited:</em>
- </td>
- <td>
- no
- </td>
- </tr>
- <tr>
- <td>
- <em>Percentages:</em>
- </td>
- <td>
- N/A
- </td>
- </tr>
- <tr>
- <td>
- <em>Media:</em>
- </td>
- <td>
- visual
- </td>
- </tr>
- <tr>
- <td>
- <em>Computed value:</em>
- </td>
- <td>
- Same as specified value.
- </td>
- </tr>
- </tbody>
- </table>
- <div class="issue">
- What should happen when a value is changed midway through a transition? One option is to simply begin a new transition from the current position. However things get interesting when from/to values are being flipped. For example you'd like symmetry on fade-in/fade-out hover effects if the user rolls over the object and rolls out before the animation finishes. This implies that there needs to be a convenient and straightforward rule for running transitions in reverse under certain circumstances. This could be controlled via a new property, or could perhaps be done simply by detecting when the from/to values are flipped.
- </div>
-
- <h2>
- Transition Events
- </h2>
- <p>
- The completion of a CSS Transition generates a corresponding <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM Event</a>.
- An event is fired for each property that undergoes a transition.
- This allows a content developer to perform actions that synchronize
- with the completion of a transition.
- </p>
- <p>
- Each event provides the name of the property the transition is
- associated with as well as the duration of the transition.
- </p>
- <dl>
- <dt>
- <b>Interface <i><a id="Events-TransitionEvent" name='Events-TransitionEvent'>TransitionEvent</a></i></b>
- </dt>
- <dd>
- <p>
- The <code>TransitionEvent</code> interface provides specific contextual information associated with transitions.
- </p>
- <dl>
- <dt>
- <b>IDL Definition</b>
- </dt>
- <dd>
- <div class='idl-code'>
- <pre>
- interface TransitionEvent : Event {
- readonly attribute DOMString propertyName;
- readonly attribute float elapsedTime;
- void initTransitionEvent(in DOMString typeArg,
- in boolean canBubbleArg,
- in boolean cancelableArg,
- in DOMString propertyNameArg,
- in float elapsedTimeArg);
- };
- </pre>
- </div>
- </dd>
- <dt>
- <b>Attributes</b>
- </dt>
- <dd>
- <dl>
- <dt>
- <code class='attribute-name'><a id="Events-TransitionEvent-propertyName" name='Events-TransitionEvent-propertyName'>propertyName</a></code> of type <code>DOMString</code>, readonly
- </dt>
- <dd>
- The name of the CSS property associated with the transition.
- </dd>
- </dl>
- <dl>
- <dt>
- <code class='attribute-name'><a id="Events-TransitionEvent-elapsedTime" name='Events-TransitionEvent-elapsedTime'>elapsedTime</a></code> of type <code>float</code>, readonly
- </dt>
- <dd>
- The amount of time the transition has been running, in seconds, when this event fired. Note that this value is not affected by the value of <span class="prop-name">transition-delay</span>.
- </dd>
- </dl>
- </dd>
- <dt>
- <b>Methods</b>
- </dt>
- <dd>
- <dl>
- <dt>
- <code class='method-name'><a id="Events-TransitionEvent-initTransitionEvent" name='Events-TransitionEvent-initTransitionEvent'>initTransitionEvent</a></code>
- </dt>
- <dd>
- <div class='method'>
- The <code>initTransitionEvent</code> method is used to initialize the value of a <code>TransitionEvent</code> created through the <a href='http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-DocumentEvent'><code>DocumentEvent</code></a> interface. This method may only be called before the <code>TransitionEvent</code> has been dispatched via the <code>dispatchEvent</code> method, though it may be called multiple times during that phase if necessary. If called multiple times, the final invocation takes precedence.
- <div class='parameters'>
- <b>Parameters</b>
- <div class='paramtable'>
- <dl>
- <dt>
- <code class='parameter-name'>typeArg</code> of type <code>DOMString</code>
- </dt>
- <dd>
- Specifies the event type.<br>
- </dd>
- <dt>
- <code class='parameter-name'>canBubbleArg</code> of type <code>boolean</code>
- </dt>
- <dd>
- Specifies whether or not the event can bubble.<br>
- </dd>
- <dt>
- <code class='parameter-name'>cancelableArg</code> of type <code>boolean</code>
- </dt>
- <dd>
- Specifies whether or not the event's default action can be prevented.<br>
- </dd>
- <dt>
- <code class='parameter-name'>propertyNameArg</code> of type <code>DOMString</code>
- </dt>
- <dd>
- Specifies the name of the property associated with the <a href='http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event'><code>Event</code></a>
- </dd>
- <dt>
- <code class='parameter-name'>elapsedTimeArg</code> of type <code>float</code>
- </dt>
- <dd>
- Specifies the amount of time, in seconds, the transition has been running at the time of initialization.
- </dd>
- </dl>
- </div>
- </div><!-- parameters -->
- <div>
- <b>No Return Value</b>
- </div>
- <div>
- <b>No Exceptions</b>
- </div>
- </div><!-- method -->
- </dd>
- </dl>
- </dd>
- </dl>
- </dd>
- </dl>
- <p>
- There is one type of transition event available.
- </p>
- <dl>
- <dt>
- <b>transitionend</b>
- </dt>
- <dd>
- The 'transitionend' event occurs at the completion of the transition
- <ul>
- <li>Bubbles: Yes
- </li>
- <li>Cancelable: Yes
- </li>
- <li>Context Info: propertyName
- </li>
- </ul>
- </dd>
- </dl>
-
- <h2>
- Animation of property types
- </h2>
-
- <p>
- The following describes how each property type undergoes transition or
- animation.
- </p>
-
- <ul>
- <li>
- <strong>color</strong>: interpolated via red, green, blue and alpha
- components (treating each as a number, see below).
- </li>
- <li>
- <strong>length</strong>: interpolated as real numbers.
- </li>
- <li>
- <strong>percentage</strong>: interpolated as real numbers.
- </li>
- <li>
- <strong>integer</strong>: interpolated via discrete steps (whole
- numbers). The interpolation happens in real number space and is
- converted to an integer using <code>floor()</code>.
- </li>
- <li>
- <strong>number</strong>: interpolated as real (floating point)
- numbers.
- </li>
- <li>
- <strong>transform list</strong>: see
- CSS Transforms specification [[!CSS3-2D-TRANSFORMS]].
- </li>
- <li>
- <strong>rectangle</strong>: interpolated via the x, y,
- width and height components (treating each as a number).
- </li>
- <li>
- <strong>visibility</strong>: interpolated via a discrete
- step. The interpolation happens in real number space between 0 and 1,
- where 1 is "visible" and all other values are "hidden".
- </li>
- <li>
- <strong>shadow</strong>: interpolated via the color, x, y
- and blur components (treating them as color and numbers where
- appropriate).
- </li>
- <li>
- <strong>gradient</strong>: interpolated via the
- positions and colors of each stop. They must have the same type
- (radial or linear) and same number of stops in order to be animated.
- </li>
- <li>
- <strong>paint server</strong> (SVG): interpolation is only supported
- between</strong>: gradient to gradient and color to color. They then
- work as above.
- </li>
- <li>
- <strong>space-separated list of above</strong>: each item in the list
- is interpolated using the rules above.
- </li>
- </ul>
-
- <h2>
- Animatable properties
- </h2>
-
- <h3>
- Properties from CSS
- </h3>
-
- <table>
- <tr>
- <th>Property Name</th>
- <th>Type</th>
- </tr>
- <tr>
- <td>background-color</td><td>color</tr>
- <tr>
- <td>background-image</td><td>only gradients</td>
- </tr>
- <tr>
- <td>background-position</td><td>percentage, length</td>
- </tr>
- <tr>
- <td>border-bottom-color</td><td>color</td>
- </tr>
- <tr>
- <td>border-bottom-width</td><td>length</td>
- </tr>
- <tr>
- <td>border-color</td><td>color</td>
- </tr>
- <tr>
- <td>border-left-color</td><td>color</td>
- </tr>
- <tr>
- <td>border-left-width</td><td>length</td>
- </tr>
- <tr>
- <td>border-right-color</td><td>color</td>
- </tr>
- <tr>
- <td>border-right-width</td><td>length</td>
- </tr>
- <tr>
- <td>border-spacing</td><td>length</td>
- </tr>
- <tr>
- <td>border-top-color</td><td>color</td>
- </tr>
- <tr>
- <td>border-top-width</td><td>length</td>
- </tr>
- <tr>
- <td>border-width</td><td>length</td>
- </tr>
- <tr>
- <td>bottom</td><td>length, percentage</td>
- </tr>
- <tr>
- <td>color</td><td>color</td>
- </tr>
- <tr>
- <td>crop</td><td>rectangle</td>
- </tr>
- <tr>
- <td>font-size</td><td>length, percentage</td>
- </tr>
- <tr>
- <td>font-weight</td><td>number</td>
- </tr>
- <tr>
- <td>grid-*</td><td>various</td>
- </tr>
- <tr>
- <td>height</td><td>length, percentage</td>
- </tr>
- <tr>
- <td>left</td><td>length, percentage</td>
- </tr>
- <tr>
- <td>letter-spacing</td><td>length</td>
- </tr>
- <tr>
- <td>line-height</td><td>number, length, percentage</td>
- </tr>
- <tr>
- <td>margin-bottom</td><td>length</td>
- </tr>
- <tr>
- <td>margin-left</td><td>length</td>
- </tr>
- <tr>
- <td>margin-right</td><td>length</td>
- </tr>
- <tr>
- <td>margin-top</td><td>length</td>
- </tr>
- <tr>
- <td>max-height</td><td>length, percentage</td>
- </tr>
- <tr>
- <td>max-width</td><td>length, percentage </td>
- </tr>
- <tr>
- <td>min-height</td><td>length, percentage</td>
- </tr>
- <tr>
- <td>min-width</td><td>length, percentage</td>
- </tr>
- <tr>
- <td>opacity</td><td>number</td>
- </tr>
- <tr>
- <td>outline-color</td><td>color</td>
- </tr>
- <tr>
- <td>outline-offset</td><td>integer</td>
- </tr>
- <tr>
- <td>outline-width</td><td>length</td>
- </tr>
- <tr>
- <td>padding-bottom</td><td>length</td>
- </tr>
- <tr>
- <td>padding-left</td><td>length</td>
- </tr>
- <tr>
- <td>padding-right</td><td>length</td>
- </tr>
- <tr>
- <td>padding-top</td><td>length</td>
- </tr>
- <tr>
- <td>right</td><td>length, percentage</td>
- </tr>
- <tr>
- <td>text-indent</td><td>length, percentage</td>
- </tr>
- <tr>
- <td>text-shadow</td><td>shadow</td>
- </tr>
- <tr>
- <td>top</td><td>length, percentage</td>
- </tr>
- <tr>
- <td>vertical-align</td><td>keywords, length, percentage</td>
- </tr>
- <tr>
- <td>visibility</td><td>visibility</td>
- </tr>
- <tr>
- <td>width</td><td>length, percentage</td>
- </tr>
- <tr>
- <td>word-spacing</td><td>length, percentage</td>
- </tr>
- <tr>
- <td>z-index</td><td>integer</td>
- </tr>
- <tr>
- <td>zoom</td><td>number</td>
- </tr>
- </table>
-
- <h3>
- Properties from SVG
- </h3>
-
- <table>
- <tr>
- <th>Property Name</th><th>Type</th>
- </tr>
- <tr>
- <td>stop-color</td><td>color</td>
- </tr>
- <tr>
- <td>stop-opacity</td><td>float</td>
- </tr>
- <tr>
- <td>fill</td><td>paint server</td>
- </tr>
- <tr>
- <td>fill-opacity</td><td>float</td>
- </tr>
- <tr>
- <td>stroke</td><td>paint server</td>
- </tr>
- <tr>
- <td>stroke-dasharray</td><td>list of numbers</td>
- </tr>
- <tr>
- <td>stroke-dashoffset</td><td>number</td>
- </tr>
- <tr>
- <td>stroke-miterlimit</td><td>number</td>
- </tr>
- <tr>
- <td>stroke-opacity</td><td>float</td>
- </tr>
- <tr>
- <td>stroke-width</td><td>float</td>
- </tr>
- <tr>
- <td>viewport-fill</td><td>color</td>
- </tr>
- <tr>
- <td>viewport-fill-opacity</td><td>color</td>
- </tr>
- </table>
-
-
-<h2>References</h2>
-
-<h3 class="no-num">Normative references</h3>
-<!--normative-->
-
-<h3 class="no-num">Other references</h3>
-<!--informative-->
-
-
-
-<h2 class="no-num">Property index</h2>
-<!-- properties -->
-
-
-
-<h2 class="no-num" id="index">Index</h2>
-<!--index-->
-
-</body>
-</html>
-<!-- Keep this comment at the end of the file
-Local variables:
-mode: sgml
-sgml-default-doctype-name:"html"
-sgml-minimize-attributes:t
-End:
--->
diff --git a/WebKitSite/specs/CSSVisualEffects/css3-transitions/TimingFunction.png b/WebKitSite/specs/CSSVisualEffects/css3-transitions/TimingFunction.png
deleted file mode 100644
index 717fb8a..0000000
Binary files a/WebKitSite/specs/CSSVisualEffects/css3-transitions/TimingFunction.png and /dev/null differ
diff --git a/WebKitSite/specs/CSSVisualEffects/css3-transitions/default.css b/WebKitSite/specs/CSSVisualEffects/css3-transitions/default.css
deleted file mode 100644
index 0192d08..0000000
--- a/WebKitSite/specs/CSSVisualEffects/css3-transitions/default.css
+++ /dev/null
@@ -1,477 +0,0 @@
-/*
- * Style sheet for the CSS3 specification,
- * to be used in addition to http://www.w3.org/StyleSheets/TR/W3C-{WD,PR,REC}
- * $Id: default.css,v 1.1 2009-02-10 23:44:52 dean Exp $
- */
-
- at media print {
-
- /* the following doesn't work for now,
- instead we rely on a patched version of html2ps which has this built-in */
- .dlink { display: none }
-
- /* the following doesn't work for now,
- instead we rely on a patched version of html2ps which has this built-in */
- div.navbar {
- display: none;
- }
-
- html { margin: 0 !important }
- body { font-family: serif }
- th, td { font-family: inherit }
- a { color: inherit !important }
- div.example:before { font-family: serif !important }
- pre.example:before { font-family: serif !important }
- a:link, a:visited { text-decoration: none !important }
- a:link:after, a:visited:after { /* create a cross-ref "see..." */ }
-}
- at page {
- margin: 1.5cm 1.1cm;
-}
-
-/* html body { margin-left: 8.5em } /* Overrides 70px in base.css */
-
-body {counter-reset: exampleno figure}
-
-h2, h3, h5, h6 { margin-top: 2em }
-h1, h2, h3, h4, h5, h6 { page-break-after: avoid; font-family: inherit }
-div.figure, div.sidefigure, pre, table.propdef, table.propdef-extra,
-div.example { page-break-inside: avoid }
-dt { page-break-after: avoid }
-
-span.id {float: right; font-weight: bold}
-
-p, p.testlink + p, p.mtb {
- text-indent: 0;
- margin-bottom: 0;
- margin-top: 0.8em
-}
-p + p, p + div.sidefigure + p {
- text-indent: 2em;
- margin-top: 0
-}
-dd > p:first-child, li > p:first-child {
- margin-top: 0
-}
-
-h1 + h2 {
- margin-top: 0;
-}
-
-pre {
- text-align: left; /* fixes justification in Mac IE 5 */
- text-indent: 0; /* fixes indent in Mac Netscape 6 */
- margin-top: 1em;
- margin-bottom: 1em;
- font-size: 90% /*smaller*/;
-}
-/*
-var {
- font-style: normal;
-}
-*/
-img {
- border-style: none;
- color: white;
-}
-.toc {
- text-indent: 0;
-}
-
-
- at media all { /* NS < 6 doesn't like borders around inline elements... */
-
- body {
- line-height: 1.3;
- }
-
- a:link, a:visited {
- color: inherit;
- text-decoration: underline;
- }
-
- a.logo:link, a.logo:visited {
- padding: 0;
- border-style: none;
- }
-
- /* Hmm, this seems to confuse many browsers... */
- dt { margin-left: 0 }
- dd { margin-left: 2em }
- dl, ul, ol { margin-left: 0; padding-left: 0 }
- li { margin-left: 2em; padding-left: 0 }
-
-}
-ul.indexlist { margin-left: 0; /*column-width: 13em; columns: 13em*/ }
-ul.indexlist li { margin-left: 0; list-style: none }
-ul.indexlist li li { margin-left: 1em }
-
-.example {
- counter-increment: exampleno;
-}
-div.example:before {
- content: "Example";
- content: "Example " counter(exampleno, upper-roman);
- font: bold small sans-serif;
- /*float: left;*/
- position: absolute;
- top: -0.6em;
- left: -2.5em;
- width: 7.5em;
- text-align: center;
- line-height: 1em;
- color: #FFF8DD;
- background: #600;
- padding: 0.1em;
- border: thin solid #999;
- /*margin: -1.3em 0 0.3em -2.5em;*/
-}
-pre.example:before {
- content: "Example";
- content: "Example " counter(exampleno, upper-roman);
- font: bold small sans-serif;
- /*float: left;*/
- position: absolute;
- top: -0.6em;
- left: -2.5em;
- width: 7.5em;
- text-align: center;
- line-height: 1em;
- color: #FFF8DD;
- background: #600;
- padding: 0.1em;
- border: thin solid #999;
- /*margin: -1.3em 0 0.3em -2.5em;*/
-}
-div.example, div.illegal-example, div.html, div.illegal-html, div.xml,
-div.illegal-xml, pre.example, pre.illegal-example, pre.html,
-pre.illegal-html, pre.xml, pre.illegal-xml {
- background: #FFF8DD;
- padding: 0.5em;
- margin: 1em 0;
- border: thin solid #999;
- position: relative;
-}
-pre.example, pre.illegal-example, pre.html,
-pre.illegal-html, pre.xml, pre.illegal-xml {
- padding-top: 1.5em;
-}
-div.example { color: #600 }
-pre.example { color: #600 }
-pre.illegal-example { color: red }
-div.illegal-example { color: red }
-div.illegal-example p { color: black }
-
-div.html { color: #600 }
-pre.html { color: #600 }
-pre.illegal-html { color: red }
-div.illegal-html { color: red }
-div.illegal-html p { color: black }
-pre.deprecated-html { color: red }
-div.deprecated-html { color: red }
-div.deprecated-html p { color: black }
-
-div.xml { color: #600 }
-pre.xml { color: #600 }
-pre.illegal-xml { color: red }
-div.illegal-xml { color: red }
-div.illegal-xml p { color: black }
-
-/* code { font-size: 90% } */
-.css { color: #800 } /* inline CSS code (SPAN/CODE) */
-code.css { font-family: inherit; font-size: 100% }
-code.html { color: #600 } /* inline HTML */
-code.xml { color: #600 } /* inline XML */
-.property { font: inherit; } /* name of a CSS property (SPAN) */
-.descriptor { } /* name of a CSS descriptor (SPAN) */
-.issue { color: #c00 } /* editorial remark, open issue */
-.type { font-style: italic } /* A <type> value for a property */
-
-dfn { font-weight: bolder; /*font-size: 1em*/ }
-
-/* Class note is a non-normative note. May be inline or a P or DIV */
-.note {
- /* font-weight: bold; */
- color: green
-}
-p.note, div.note {
- /* margin: 1em 2em; */
-}
-p.note:before, span.note:before { content: "\25B6" " " }
-div.note > p:first-child:before { content: "\25B6" " " }
-
-.normref { color: red }
-.informref { color: green }
-
-
-/* ToC not indented, but font style shows hierarchy */
-ul.toc {margin: 1em 0; padding: 0; font-weight: bold}
-ul.toc ul {margin: 0; padding: 0; font-weight: normal}
-ul.toc ul ul {margin: 0 /*0 0 2em*/; font-style: italic}
-ul.toc ul ul ul {margin: 0}
-ul.toc li {margin: 0.6em 0; padding: 0}
-ul.toc li li {margin: 0}
-/*
-ul.toc li li li, ul.toc li li li ul {margin-left: 0; display: inline}
-ul.toc li li li ul, ul.toc li li li ul li {margin-left: 0; display: inline}
-*/
-
- at media all { /* NS4 doesn't align the floats properly :-( */
-
- /* Section numbers in a column of their own */
- ul.toc span.secno {margin-right: 1em} /* workaround for Opera6 */
- ul.toc span.secno {float: left; width: 4em; margin-left: -5em}
- /*ul.toc span.secno {text-align: right}*/
- ul.toc li {clear: both}
- ul.toc {margin-left: 5em}
- /* If we had 'tab', floats would not be needed here:
- ul.toc span.secno {tab: 5em right; margin-right: 1em}
- ul.toc li {text-indent: 5em hanging}
- The second line in case items wrap
- */
-}
-
-ul.index {
- list-style: disc; /* Mac NS has problem with 'none' */
- list-style: none;
-}
-
-s, del {text-decoration: line-through; color: red}
-u, ins {text-decoration: underline; background: #bfa}
-
-div.figure, div.sidefigure {
- text-align: center;
- margin: 2.5em 0;
-}
-div.sidefigure {
- float: right;
- width: 50%;
- margin: 0 0 0.5em 0.5em
-}
-div.figure img, div.sidefigure img {
- display: block;
- margin: auto;
- max-width: 100%
-}
-p.caption, caption {
- text-align: center;
- font-style: italic;
- font-size: 90%;
- margin: 1.5em 2em;
- text-indent: 0;
-}
-p.caption:before {
- content: "Figure " counter(figure) ". ";
- font-weight: bold;
-}
-p.caption {
- counter-increment: figure;
-}
-
-/* DL list is indented, but figure inside it is not */
-dd { margin-left: 2em }
-dd div.figure { margin-left: -2em }
-
-sup {
- vertical-align: super;
- font-size: 80%
-}
-
-/* "Equations" (not real MathML, but simple HTML) are put in a
-blockquote and may have an equation number. We make sure the
-blockquote has enough margin on the right and then put the equation
-number there. */
-
-blockquote {
- margin: 0.5em 4em 0.5em 2em;
- text-indent: 0;
-}
-.eqno {
- text-align: right;
- float: right;
- width: 3em;
- margin: 0 -4em 0 0;
- font-weight: bold;
- /* background: silver; color: black; padding: 0.1em */
-}
-
-table.equiv-table { border-spacing: 0; margin: 0.5em 0 }
-table.equiv-table th, table.equiv-table td { padding: 0.3em }
-table.equiv-table th { text-align: left }
-/* table.equiv-table th:first-child { text-align: right } */
-table.equiv-table td, table.equiv-table th { border-bottom: thin solid #666 }
-table.equiv-table { border-bottom: hidden }
-table.equiv-table { empty-cells: show }
-table.equiv-table caption { margin: 0.5em 0 0 0 }
-
-/* Style for table of properties */
-table.proptable {
- font-size: small;
- border-collapse: collapse;
- border-spacing: 0;
- text-align: left;
- margin: 1em 0;
-}
-
-table.proptable td, table.proptable th {
- padding: 0.4em;
- border-style: solid none none dotted;
- border-width: thin;
- border-color: red;
-}
-table.proptable th:first-child, table.proptable td:first-child {
- border-left-style: none;
-}
-
-
-/* Style for table that defines a property or a descriptor */
-table.propdef, table.propdef-extra, table.descdef {
- border-spacing: 0;
- border-collapse: collapse;
- width: 100%;
- table-layout: fixed;
- background: #DEF;
- margin-top: 1.2em;
- margin-bottom: 1.2em
-}
-
-/* Since Jan 2008, some CSS modules use <th> instead of <td> in the
-first column of a table.propdef. These rules handle both. As of Jan
-2008, http://www.w3.org/Style/spec-mark-up still only documents <td>
-*/
-
-table.propdef td, table.propdef-extra td, table.descdef td,
-table.propdef th, table.propdef-extra th, table.descdef th {
- padding: 0 0.3em;
- vertical-align: baseline;
-}
-/*
-table.propdef dfn, table.propdef-extra dfn, table.descdef dfn {
- font-weight: bold;
- font-style: normal
-}
-*/
-table.propdef td:first-child,
-table.propdef-extra td:first-child,
-table.descdef td:first-child,
-table.propdef th:first-child,
-table.propdef-extra th:first-child,
-table.descdef th:first-child {
- font-style: italic;
- font-weight: normal;
- text-align: left;
- width: 8.3em
-}
-table.propdef td[colspan]:first-child,
-table.propdef-extra td[colspan]:first-child,
-table.descdef td[colspan]:first-child,
-table.propdef th[colspan]:first-child,
-table.propdef-extra th[colspan]:first-child,
-table.descdef th[colspan]:first-child {
- font-style: inherit
-}
-table.propdef tr:first-child,
-table.propdef-extra tr:first-child,
-table.descdef tr:first-child {
- background: #005A9C;
- color: white
-}
-/* table.propdef tr:first-child td { padding-top: 0.1em; padding-bottom: 0.1em } */
-
-/* This would replace :first-child for Opera, but it confuses WinIE :-( */
-/*
-table.propdef td { width: 8em }
-table.propdef td + td { width: auto }
-table.propdef tr { background: #005A9C; color: white }
-table.propdef tr + tr { background: transparent; color: black }
-*/
-
-/* CSS modules typically don't use MUST, SHOULD etc. from RFC 2119,
-or, if they do, they don't put them in uppercase. But the following
-class is provided in case a spec wants to use RFC 2119 terms in
-uppercase in the source. */
-
-em.rfc2119 {
- text-transform: lowercase;
- font-variant: small-caps;
- font-style: normal
-}
-
-/* In Profile specs, a table of required features: */
-
-table.features th {
- background: #00589f;
- color: #fff;
- text-align: left;
- padding: 0.2em 0.2em 0.2em 0.5em;
-}
-table.features td {
- vertical-align: top;
- border-bottom: 1px solid #ccc;
- padding: 0.3em 0.3em 0.3em 0.7em;
-}
-
-
-/* Style for data tables (and properly marked-up proptables) */
-
- .data, .proptable {
- margin: 1em auto;
- border-collapse: collapse;
- border: solid #005A9B;
- }
- .data caption {
- width: 100%;
- text-align: center;
- }
- .data td, .data th,
- .proptable td, .proptable th {
- border: thin solid;
- padding: 0.2em;
- text-align: center;
- }
- .data thead th[scope="row"],
- .proptable thead th[scope="row"] {
- text-align: right;
- background: #A4C8E2;
- color: inherit;
- }
- .data thead,
- .proptable thead {
- background: #EEEEEE;
- color: inherit;
- }
- .data tbody th:first-child,
- .proptable tbody th:first-child {
- text-align: right;
- background: #EEEEEE;
- color: inherit;
- }
- .data thead,
- .data tbody,
- .data tfoot,
- .data colgroup {
- border: solid;
- }
-
- .data img {
- vertical-align: middle;
- }
-
- table.propdef {
- table-layout: auto;
- }
- .propdef th {
- font-style: italic;
- font-weight: normal;
- text-align: left;
- width: 3em;
- }
- dt dfn code {
- font-size: inherit;
- }
-
-/* This is mostly to make the list inside the CR exit criteria more compact. */
-dl ol, dl li {display: inline; padding: 0; margin: 0}
-dl ol {counter-reset: list-item}
-dl li {counter-increment: list-item}
-dl li:before {content: "(" counter(list-item) ") "; font-weight: bold}
diff --git a/WebKitSite/specs/CSSVisualEffects/css3-transitions/transition1.png b/WebKitSite/specs/CSSVisualEffects/css3-transitions/transition1.png
deleted file mode 100644
index 91164b8..0000000
Binary files a/WebKitSite/specs/CSSVisualEffects/css3-transitions/transition1.png and /dev/null differ
diff --git a/WebKitSite/specs/CSSVisualEffects/index.html b/WebKitSite/specs/CSSVisualEffects/index.html
index 874b641..3a2310e 100644
--- a/WebKitSite/specs/CSSVisualEffects/index.html
+++ b/WebKitSite/specs/CSSVisualEffects/index.html
@@ -8,14 +8,13 @@
<body>
<h1>CSS Effects proposed specifications</h1>
<p>
- <em>IMPORTANT</em>: these documents are proposals, not final specifications. They have not
- been approved by any standards bodies.
+ <em>IMPORTANT</em>: These proposals are now available at the <a href="http://www.w3.org/Style/CSS/current-work" title="CSS: Current Work">CSS Working Group Current Work page</a>:
</p>
<ul>
- <li><a href="http://www.w3.org/TR/css3-2d-transforms/">CSS Transforms</a></li>
- <li><a href="http://www.w3.org/TR/css3-3d-transforms/">CSS Transforms 3D</a></li>
- <li><a href="http://www.w3.org/TR/css3-transitions/">CSS Transitions</a></li>
- <li><a href="http://www.w3.org/TR/css3-animations/">CSS Animation</a></li>
+ <li><a href="http://dev.w3.org/csswg/css3-2d-transforms/">CSS 2D Transforms</a></li>
+ <li><a href="http://dev.w3.org/csswg/css3-3d-transforms/">CSS 3D Transforms</a></li>
+ <li><a href="http://dev.w3.org/csswg/css3-transitions/">CSS Transitions</a></li>
+ <li><a href="http://dev.w3.org/csswg/css3-animations/">CSS Animation</a></li>
</ul>
</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/WebKitSite/specs/HTML_Timed_Media_Elements.html b/WebKitSite/specs/HTML_Timed_Media_Elements.html
index e5b88ae..dbec0a9 100644
--- a/WebKitSite/specs/HTML_Timed_Media_Elements.html
+++ b/WebKitSite/specs/HTML_Timed_Media_Elements.html
@@ -27,6 +27,11 @@
/* needed to override wiki CSS */
a, a:link { text-decoration: underline;}
th { color: #000; }
+
+ .obsolete {
+ font-size: larger;
+ color: red;
+ }
</style>
</head>
@@ -45,8 +50,7 @@
<h2 class="no-num no-toc" id="status"> Status of this document </h2>
- <p><strong>This is a work in progress!</strong> This document is changing frequently in response
- to comments and as a general part of its development process. Comments are very welcome.</p>
+ <p class="obsolete"><strong>This document is obsolete. Media Elements are now specified in the <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html" title="4.8.6 The video element — HTML5 (including next generation additions still in development)">HTML5 specification</a>.</strong></p>
<h2 class="no-num no-toc"id="contents"> Table of contents </h2>
diff --git a/WebKitSite/specs/MediaQueriesExtensions.html b/WebKitSite/specs/MediaQueriesExtensions.html
index 0c3dd0a..16ab31f 100644
--- a/WebKitSite/specs/MediaQueriesExtensions.html
+++ b/WebKitSite/specs/MediaQueriesExtensions.html
@@ -672,8 +672,8 @@
<div class="note">
This section previously contained a definition for a DOM method that
would evaluate media query strings. This has been removed from the
- proposal. Developers should instead use the <code>matchMedium</code>
- method defined in the <a href="http://www.w3.org/TR/cssom-view/">CSS View</a> specification.
+ proposal. Developers should instead use the <code>MediaQueryList</code>
+ interface defined in the <a href="http://dev.w3.org/csswg/cssom-view/">CSS View</a> specification.
</div>
diff --git a/WebKitSite/specs/Timed_Media_CSS.html b/WebKitSite/specs/Timed_Media_CSS.html
index 78b64fe..c0d74be 100644
--- a/WebKitSite/specs/Timed_Media_CSS.html
+++ b/WebKitSite/specs/Timed_Media_CSS.html
@@ -18,6 +18,11 @@
table.history { width: 100%; }
td.hversion, td.author, td.date { width: 5%; }
td.change { width: 65%; }
+
+ .obsolete {
+ font-size: larger;
+ color: red;
+ }
</style>
</head>
@@ -45,8 +50,7 @@
<h2 class="no-num no-toc" id="status"> Status of this document </h2>
- <p><strong>This is a work in progress!</strong> This document is changing frequently in response
- to comments and as a general part of its development process. Comments are very welcome.</p>
+ <p class="obsolete">This proposal is not under active development at this time.</p>
<h2 class="no-num no-toc"id="contents"> Table of contents </h2>
diff --git a/WebKitSite/specs/index.html b/WebKitSite/specs/index.html
index 8d93af2..1d2a7bb 100644
--- a/WebKitSite/specs/index.html
+++ b/WebKitSite/specs/index.html
@@ -8,7 +8,8 @@
<h1>Specification proposals from the WebKit project</h1>
<p>
<em>IMPORTANT</em>: these documents are proposals, not final specifications. They have not
- been approved by any standards bodies.
+ been approved by any standards bodies. In some cases, these are obsolete proposals that have
+ been superseded.
</p>
<ul>
<li><a href="squirrelfish-bytecode.html">Squirrelfish Bytecode</a></li>
--
WebKit Debian packaging
More information about the Pkg-webkit-commits
mailing list