[css-transforms] scale function and property %

Allow percentages inside the scale functions,
and the scale property.

resolves w3c#3399

Author: ericwilligers

css-transforms-1/Overview.bs

@@ -150,7 +150,10 @@ When used in this specification, terms have the meanings assigned in this sectio
     : <dfn export>user coordinate system</dfn>
     : <dfn export>local coordinate system</dfn>
     :: In general, a coordinate system defines locations and distances on the current canvas. The current local coordinate system (also user coordinate system) is the coordinate system that is currently active and which is used to define how coordinates and lengths are located and computed, respectively, on the current canvas.
-        The current user coordinate system has its origin at the top-left of a [=reference box=] specified by the 'transform-box' property. Percentage values are relative to the dimension of this reference box. One unit equals one CSS pixel.
+        The current user coordinate system has its origin at the top-left of a [=reference box=] specified by the 'transform-box' property.
+        Percentage values (except in scale functions) are relative to the dimension of this reference box.
+        One unit equals one CSS pixel.
+        In scale functions, a <<percentage>> is equivalent to a <<number>>, for example ''transform: scale(100%);'' is equivalent to ''transform: scale(1);''.
 
     : <dfn>transformation matrix</dfn>
     :: A matrix that defines the mathematical mapping from one coordinate system into another. It is computed from the values of the 'transform' and 'transform-origin' properties as described <a href="#transformation-matrix-computation">below</a>.
@@ -374,7 +377,7 @@ Value: none | <<transform-list>>
 Initial: none
 Applies to: [=transformable elements=]
 Inherited: no
-Percentages: refer to the size of [=reference box=]
+Percentages: refer to the size of [=reference box=] (scale functions excluded)
 Computed value: as specified, but with lengths made absolute
 Animation type: transform list, see <a href="#interpolation-of-transforms">interpolation rules</a>
 </pre>
@@ -913,13 +916,13 @@ A percentage for vertical translations is relative to the height of the [=refere
 	: <span class='prod'><dfn>translateY()</dfn> = translateY( <<length-percentage>> )</span>
 	:: specifies a <a href="#TranslateDefined">translation</a> by the given amount in the Y direction.
 
-	: <span class='prod'><dfn>scale()</dfn> = scale( <<number>> , <<number>>? )</span>
+	: <span class='prod'><dfn>scale()</dfn> = scale( <<number>> | <<percentage>> , [ <<number>> | <<percentage>> ]? )</span>
 	:: specifies a <a href="#ScaleDefined">2D scale</a> operation by the [sx,sy] scaling vector described by the 2 parameters. If the second parameter is not provided, it takes a value equal to the first. For example, scale(1, 1) would leave an element unchanged, while scale(2, 2) would cause it to appear twice as long in both the X and Y axes, or four times its typical geometric size.
 
-	: <span class='prod'><dfn>scaleX()</dfn> = scaleX( <<number>> )</span>
+	: <span class='prod'><dfn>scaleX()</dfn> = scaleX( <<number>> | <<percentage>> )</span>
 	:: specifies a <a href="#ScaleDefined">2D scale</a> operation using the [sx,1] scaling vector, where sx is given as the parameter.
 
-	: <span class='prod'><dfn>scaleY()</dfn> = scaleY( <<number>> )</span>
+	: <span class='prod'><dfn>scaleY()</dfn> = scaleY( <<number>> | <<percentage>> )</span>
 	:: specifies a <a href="#ScaleDefined">2D scale</a> operation using the [1,sy] scaling vector, where sy is given as the parameter.
 
 	: <span class='prod'><dfn>rotate()</dfn> = rotate( [ <<angle>> | <<zero>> ] )</span>

css-transforms-2/Overview.bs

@@ -605,7 +605,7 @@ which can have additional side-effects in UAs.
 
 <pre class="propdef">
 Name: scale
-Value: none | <<number>>{1,3}
+Value: none | [ <<number>> | <<percentage>> ]{1,3}
 Initial: none
 Applies to: <a>transformable elements</a>
 Inherited: no
@@ -627,6 +627,8 @@ If three values are given,
 this specifies a 3d scaling,
 equivalent to the ''scale3d()'' function.
 
+A <<percentage>> is equivalent to a <<number>>,
+for example ''scale: 100%;'' is equivalent to ''scale: 1;''.
 ----
 
 All three properties accept
@@ -892,9 +894,9 @@ In the following <dfn export>3d transform functions</dfn>, a <<zero>> behaves th
 :: specifies a <a href="#Translate3dDefined">3D translation</a> by the vector [tx,ty,tz], with tx, ty and tz being the first, second and third translation-value parameters respectively.
 : <span class='prod'><dfn>translateZ()</dfn> = translateZ( <<length>> )</span>
 :: specifies a <a href="#Translate3dDefined">3D translation</a> by the vector [0,0,tz] with the given amount in the Z direction.
-: <span class='prod'><dfn>scale3d()</dfn> = scale3d( <<number>> , <<number>>, <<number>> )</span>
+: <span class='prod'><dfn>scale3d()</dfn> = scale3d( <<number>> | <<percentage>>, <<number>> | <<percentage>>, <<number>> | <<percentage>> )</span>
 :: specifies a <a href="#Scale3dDefined">3D scale</a> operation by the [sx,sy,sz] scaling vector described by the 3 parameters.
-: <span class='prod'><dfn>scaleZ()</dfn> = scaleZ( <<number>> )</span>
+: <span class='prod'><dfn>scaleZ()</dfn> = scaleZ( <<number>> | <<percentage>> )</span>
 :: specifies a <a href="#Scale3dDefined">3D scale</a> operation using the [1,1,sz] scaling vector, where sz is given as the parameter.
 : <span class='prod'><dfn>rotate3d()</dfn> = rotate3d( <<number>> , <<number>> , <<number>> , [ <<angle>> | <<zero>> ] )</span>
 :: specifies a <a href="#Rotate3dDefined">3D rotation</a> by the angle specified in last parameter about the [x,y,z] direction vector described by the first three parameters. A direction vector that cannot be normalized, such as [0,0,0], will cause the rotation to not be applied.