Skip to content

Add CSSTransformComponent.toMatrix #614

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 2 commits into from
Jan 31, 2018
Merged

Add CSSTransformComponent.toMatrix #614

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8288623
Add CSSTransformComponent.is2D
darrnshn Jan 30, 2018
ed5dc06
Simplify is2D handling.
tabatkins Jan 31, 2018
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
50 changes: 34 additions & 16 deletions css-typed-om/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1991,34 +1991,26 @@ is a [=list=] of {{CSSTransformComponent}}s.
when called,
perform the following steps:

1. Let |matrix| be a 4x4 matrix,
initially set to the identity matrix.
Let |is2D| be a boolean initially set to `true`.
1. Let |matrix| be a new {{DOMMatrix}},
initialized to the identity matrix,
with its {{DOMMatrix/is2D}} internal slot set to `true`.

2. [=list/For each=] |func| in |this|’s [=values to iterate over=]:

1. Let |funcMatrix| be |func|’s equivalent 4x4 transform matrix,
as defined in [[css-transforms-1#mathematical-description]].

As the entries of such a matrix are defined relative to the ''px'' unit,
if any <<length>>s in |func| involved in generating the matrix
are not [=compatible units=] with ''px'',
[=throw=] a {{TypeError}}.
1. Let |funcMatrix| be the {{DOMMatrix}} returned by
calling {{CSSTransformComponent/toMatrix()}} on |func|.
2. Set |matrix| to the result of multiplying |matrix|
and |funcMatrix|.
3. If |func|’s {{CSSTransformComponent/is2D}} internal slot is `false`,
set |is2D| to `false`.
and the matrix represented by |funcMatrix|.

3. Return a new {{DOMMatrix}}
representing |matrix|,
and with its internal [=matrix/is 2D=] flag set to |is2D|.
3. Return |matrix|.
</div>


<xmp class=idl>
interface CSSTransformComponent {
stringifier;
attribute boolean is2D;
DOMMatrix toMatrix();
};

[Constructor(CSSNumericValue x, CSSNumericValue y, optional CSSNumericValue z)]
Expand Down Expand Up @@ -2099,6 +2091,32 @@ is a [=list=] of {{CSSTransformComponent}}s.
but also prevents "accidentally" flipping a 2D transform into becoming 3D.
</details>

<div algorithm="CSSTransformComponent.toMatrix()">
The <dfn method for=CSSTransformComponent>toMatrix()</dfn> method of a {{CSSTransformComponent}} |this| must,
when called,
perform the following steps:

1. Let |matrix| be a new {{DOMMatrix}} object,
initialized to |this|’s equivalent 4x4 transform matrix,
as defined in [[css-transforms-1#mathematical-description]],
and with its {{DOMMatrixReadOnly/is2D}} internal slot
set to the same value as |this|'s {{CSSTransformComponent/is2D}} internal slot.

Note: Recall that the {{CSSTransformComponent/is2D}} flag
affects what transform,
and thus what equivalent matrix,
a {{CSSTransformComponent}} represents.

As the entries of such a matrix are defined relative to the ''px'' unit,
if any <<length>>s in |this| involved in generating the matrix
are not [=compatible units=] with ''px''
(such as [=relative lengths=] or [=percentages=]),
[=throw=] a {{TypeError}}.

2. Return |matrix|.
</div>


<div algorithm="CSSTranslate()">
The <dfn constructor for=CSSTranslate>CSSTranslate(|x|, |y|, |z|)</dfn> constructor must,
when invoked,
Expand Down