Skip to content

[css-transforms-1] Editorial changes and inlining issue. #2170

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jan 9, 2018
Merged

[css-transforms-1] Editorial changes and inlining issue. #2170

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 15 additions & 16 deletions css-transforms-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,9 +47,6 @@ spec:css-display-3; type:value; for:display
text: table-cell
text: table-caption

spec:css-overflow-4; type:property;
text:overflow

spec:css-backgrounds-3; type:property
text: background-attachment
</pre>
Expand Down Expand Up @@ -231,7 +228,7 @@ For elements whose layout is governed by the CSS box model, any value other than

For elements whose layout is governed by the CSS box model, any value other than ''transform/none'' for the transform also causes the element to become a containing block, and the object acts as a containing block for fixed positioned descendants.

Issue: Is this effect on ''position: fixed'' necessary? If so, 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. See <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16328">Bug 16328</a>.
Issue(913): Is this effect on ''position: fixed'' necessary? If so, 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.

<a href="https://www.w3.org/TR/css3-background/#fixed0">Fixed backgrounds</a> on the root element are affected by any transform specified for that element. For all other elements that are effected by a transform (i.e. have a transform applied to them, or to any of their ancestor elements), a value of ''fixed'' for the 'background-attachment' property is treated as if it had a value of ''background-attachment/scroll''. The computed value of 'background-attachment' is not affected.

Expand Down Expand Up @@ -268,17 +265,17 @@ To serialize the <<transform-function>>s, serialize as per their individual gram
Serialization of the computed value of <<transform-list>> {#serialization-of-the-computed-value}
----------------------------------------------------------------

A <<transform-list>> for the computed value is serialized to one ''matrix()'' function by the following algorithm:
A <<transform-list>> for the computed value is serialized to one <<matrix()>> function by the following algorithm:

Issue: keep 4x4 matrix here and below?

<ol class="algorithm">
1. Let <var>transform</var> be a 4x4 matrix initialized to the identity matrix. The elements <var ignore> m11</var>, <var ignore>m22</var>, <var ignore>m33</var> and <var ignore>m44</var> of <var>transform</var> must be set to ''1'' all other elements of <var>transform</var> must be set to ''0''.
2. Post-multiply all <<transform-function>>s in <<transform-list>> to <var>transform</var>.
3. Chose between ''matrix()'' or <<matrix3d()>> serialization:
3. Chose between <<matrix()>> or <<matrix3d()>> serialization:
<dl class="switch">
<dt>If <var>transform</var> is a [=2D matrix=]
<dd>Serialize <var>transform</var> to a ''matrix()'' function.
<dd>Serialize <var>transform</var> to a <<matrix()>> function.
<dt>Otherwise
<dd>Serialize <var>transform</var> to a <<matrix3d()>> function.
</dl>
Expand Down Expand Up @@ -565,7 +562,7 @@ Neutral element for addition {#neutral-element}

Some animations require a neutral element for addition. For transform functions this is a scalar or a list of scalars of 0. Examples of neutral elements for transform functions are ''translate(0)'', ''translateX(0)'', ''translateY(0)'', ''scale(0)'', ''scaleX(0)'', ''scaleY(0)'', ''rotate(0)'', ''skew(0, 0)'', ''skewX(0)'', ''skewY(0)'' and ''matrix(0, 0, 0, 0, 0, 0)''.

Note: Animations to or from the neutral element of additions ''matrix()'' fall back to discrete animations (See [[#matrix-interpolation]]).
Note: Animations to or from the neutral element of additions <<matrix()>> fall back to discrete animations (See [[#matrix-interpolation]]).

<div class="example">

Expand Down Expand Up @@ -616,7 +613,7 @@ A percentage for vertical translations is relative to the height of the [=refere
2D Transform Functions {#two-d-transform-functions}
----------------------

<dl dfn-for=transform dfn-type=value>
<dl dfn-for=transform>
: <span class='prod'><dfn>matrix()</dfn> = matrix( <<number>> [, <<number>> ]{5,5} )</span>
:: specifies a 2D transformation in the form of a <a href="#MatrixDefined">transformation matrix</a> of the six values a, b, c, d, e, f.

Expand Down Expand Up @@ -746,27 +743,29 @@ Two-dimensional primitives with derived transform functions are:

<dl>
<dt id="translate-primitive">''translate()''
<dd>for ''translateX()'', ''translateY()'' and ''translate()''.
<dd>for <<translateX()>>, <<translateY()>> and <<translate()>>.

<dt id="rotate-three-primitive">''rotate()'' with three arguments
<dd>for ''rotate()'' with one or three arguments if <a href="#svg-transform-functions">rotate with three arguments</a> is supported.
<dd>for <<rotate()>> with one or three arguments if <a href="#svg-transform-functions">rotate with three arguments</a> is supported.

<dt id="scale-primitive">''scale()''
<dd>for ''scaleX()'', ''scaleY()'' and ''scale()''.
<dd>for <<scaleX()>>, <<scaleY()>> and <<scale()>>.

</dl>

Issue: Move the following lines to CSS-Transforms-2.

Three-dimensional primitives with derived transform functions are:

<dl>
<dt id="translate3d-primitive">''translate3d()''
<dd>for ''translateX()'', ''translateY()'', ''translateZ()'' and ''translate()''.
<dd>for <<translateX()>>, <<translateY()>>, ''translateZ()'' and <<translate()>>.

<dt id="scale3d-primitive">''scale3d()''
<dd>for ''scaleX()'', ''scaleY()'', ''scaleZ()'' and ''scale()''.
<dd>for <<scaleX()>>, <<scaleY()>>, ''scaleZ()'' and <<scale()>>.

<dt id="rotate3d-primitive">''rotate3d()''
<dd>for ''rotate()'', ''rotateX()'', ''rotateY()'' and ''rotateZ()''.
<dd>for <<rotate()>>, ''rotateX()'', ''rotateY()'' and ''rotateZ()''.
</dl>

<p id="interpolation-two-three-dimensional-function">
Expand All @@ -776,7 +775,7 @@ Three-dimensional primitives with derived transform functions are:
Interpolation of primitives and derived transform functions {#interpolation-of-transform-functions}
===================================================================================================

Two transform functions with the same name and the same number of arguments are interpolated numerically without a former conversion. The calculated value will be of the same transform function type with the same number of arguments. Special rules apply to ''matrix()''.
Two transform functions with the same name and the same number of arguments are interpolated numerically without a former conversion. The calculated value will be of the same transform function type with the same number of arguments. Special rules apply to <<matrix()>>.

<div class="example">

Expand Down