[css-transforms] scale function and property %

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

resolves #3399

Author: ericwilligers

css-transforms-2/Overview.bs

@@ -629,7 +629,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
@@ -651,6 +651,10 @@ 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;''.
+Numbers are used during serialization of specified and computed values.
+
 ----
 
 All three properties accept
@@ -894,6 +898,19 @@ The Transform Functions {#transform-functions}
 =======================
 
 The value of the 'transform' property is a list of <dfn>&lt;transform-function></dfn>. The set of allowed transform functions is given below. Wherever <<angle>> is used in this specification, a <<number>> that is equal to zero is also allowed, which is treated the same as an angle of zero degrees. A percentage for horizontal translations is relative to the width of the <a>reference box</a>. A percentage for vertical translations is relative to the height of the <a>reference box</a>.
+A percentage in a scale function is equivalent to a number, and serializes as a number in specified values.
+For example, ''scale3d(50%, 100%, 150%)'' serializes as ''scale3d(0.5, 1, 1.5)''.
+
+2D Transform Functions {#two-d-transform-functions}
+----------------------
+
+The scale functions defined in [[!css-transforms-1]] now support percentages.
+
+: <span class='prod'><dfn>scale()</dfn> = scale( [ <<number>> | <<percentage>> ]#{1,2} )</span>
+
+: <span class='prod'><dfn>scaleX()</dfn> = scaleX( [ <<number>> | <<percentage>> ] )</span>
+
+: <span class='prod'><dfn>scaleY()</dfn> = scaleY( [ <<number>> | <<percentage>> ] )</span>
 
 3D Transform Functions {#three-d-transform-functions}
 ----------------------
@@ -908,9 +925,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>> ]#{3} )</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.