ジオメトリインターフェイスモジュールレベル1

1. 導入

この節は規範的ではありません。

この仕様は、点、矩形、四角形、および3x2と4x4の次元を持つ変換行列を表現するためのいくつかのジオメトリインターフェースを記述します。

SVGインターフェイス SVGPoint、SVGRect、およびSVGMatrixは、ここで定義されたインターフェイスをSVG、Canvas 2Dコンテキスト、CSSトランスフォームで共通して使用されるインターフェイスに合わせてエイリアスしています。[SVG11] [HTML] [CSS3-TRANSFORMS]

テスト

2. DOMPoint インターフェイス

2Dまたは3Dの点は、以下のWebIDLインターフェイスによって表すことができます。

[Exposed=(Window,Worker),
 Serializable]
interface DOMPointReadOnly {
    constructor(optional unrestricted double x = 0, optional unrestricted double y = 0,
            optional unrestricted double z = 0, optional unrestricted double w = 1);

    [NewObject] static DOMPointReadOnly fromPoint(optional DOMPointInit other = {});

    readonly attribute unrestricted double x;
    readonly attribute unrestricted double y;
    readonly attribute unrestricted double z;
    readonly attribute unrestricted double w;

    [NewObject] DOMPoint matrixTransform(optional DOMMatrixInit matrix = {});

    [Default] object toJSON();
};

[Exposed=(Window,Worker),
 Serializable,
 LegacyWindowAlias=SVGPoint]
interface DOMPoint : DOMPointReadOnly {
    constructor(optional unrestricted double x = 0, optional unrestricted double y = 0,
            optional unrestricted double z = 0, optional unrestricted double w = 1);

    [NewObject] static DOMPoint fromPoint(optional DOMPointInit other = {});

    inherit attribute unrestricted double x;
    inherit attribute unrestricted double y;
    inherit attribute unrestricted double z;
    inherit attribute unrestricted double w;
};

dictionary DOMPointInit {
    unrestricted double x = 0;
    unrestricted double y = 0;
    unrestricted double z = 0;
    unrestricted double w = 1;
};

以下のアルゴリズムは、DOMPointReadOnly オブジェクトが内部メンバー変数 x座標、y座標、z座標およびw遠近を持つことを前提としています。 DOMPointReadOnly および継承インターフェイス DOMPointは、これらの変数の値にアクセスし、設定できなければなりません。

属性や関数によって DOMPointReadOnly オブジェクトを返すインターフェイスは、内部メンバー変数の値を変更できる場合があります。そのようなインターフェイスはこの能力を明示的に記述する必要があります。

内部メンバー変数は、いかなる方法でも公開してはなりません。

DOMPointReadOnly(x, y, z, w) および DOMPoint(x, y, z, w) コンストラクタを呼び出した際、以下の手順を実行しなければなりません：

pointを新しいDOMPointReadOnly または DOMPoint オブジェクトとして初期化します。
pointの変数 x座標を xに、y座標を yに、z座標を zに、w遠近を w に設定します。
pointを返します。

テスト

DOMPoint-001.html （ライブテスト）（ソース）

fromPoint(other) 静的メソッドは DOMPointReadOnly 上で、辞書からDOMPointReadOnlyを作成 (other)を実行しなければなりません。

fromPoint(other) 静的メソッドは DOMPoint 上で、辞書からDOMPointを作成 (other)を実行しなければなりません。

辞書からDOMPointReadOnlyを作成 (other) または辞書からDOMPointを作成 (other)の手順は以下の通りです：

pointを新しいDOMPointReadOnly または DOMPoint として初期化します。
pointの変数 x座標を other の x 辞書メンバーに、y座標を other の y 辞書メンバーに、z座標を other の z 辞書メンバーに、w遠近を other の w 辞書メンバーに設定します。
pointを返します。

x 属性は取得時、x座標の値を返さなければなりません。 DOMPoint インターフェイスの場合、x 属性を設定すると、x座標へ新しい値が設定されなければなりません。

y 属性は取得時、y座標の値を返さなければなりません。 DOMPoint インターフェイスの場合、y 属性を設定すると、y座標へ新しい値が設定されなければなりません。

z 属性は取得時、z座標の値を返さなければなりません。 DOMPoint インターフェイスの場合、z 属性を設定すると、z座標へ新しい値が設定されなければなりません。

w 属性は取得時、w遠近の値を返さなければなりません。 DOMPoint インターフェイスの場合、w 属性を設定すると、w遠近へ新しい値が設定されなければなりません。

matrixTransform(matrix) メソッドを呼び出した場合、以下の手順を実行しなければなりません：

matrixObject を辞書からDOMMatrixを作成 (matrix)の結果とします。
現在の点と matrixObject を与えて点を行列で変換の結果を返します。現在の点は変更されません。

この例では matrixTransform() メソッドが DOMPoint インスタンス上で呼ばれ、引数に DOMMatrix インスタンスが渡されます。

var point = new DOMPoint(5, 4);
var matrix = new DOMMatrix([2, 0, 0, 2, 10, 10]);
var transformedPoint = point.matrixTransform(matrix);

point 変数は、新しい DOMPoint オブジェクトとして設定され、x座標に5、y座標に4が初期値として与えられます。この新しい DOMPoint は、matrix でスケールされ、平行移動されます。そうして得られた transformedPoint の x座標は20、y座標は18となります。

テスト

DOMPoint-002.html （ライブテスト）（ソース）

2.1. 点を行列で変換

点を行列で変換するには、pointおよびmatrixに対して：

x を point の x座標に設定します。
y を point の y座標に設定します。
z を point の z座標に設定します。
w を point の w遠近に設定します。
pointVector を新しい列ベクトルとし、要素はそれぞれ x、y、z、wです。
$[\begin{matrix} x \\ y \\ z \\ w \end{matrix}]$
pointVectorをmatrixで前乗します。
transformedPoint を新しい DOMPoint オブジェクトとします。
transformedPointの x座標にpointVectorの1番目の要素を設定します。
transformedPointの y座標にpointVectorの2番目の要素を設定します。
transformedPointの z座標にpointVectorの3番目の要素を設定します。
transformedPointの w遠近にpointVectorの4番目の要素を設定します。
transformedPointを返します。

※ matrix の is 2D が trueであり、point の z座標が0 あるいは -0であり、point の w遠近が 1 の場合は、2D変換です。それ以外の場合は3D変換です。

3. DOMRect インターフェイス

DOMRectReadOnly インターフェイスを実装するオブジェクトは、矩形を表します。

矩形は次の属性を持ちます：

原点: 矩形の幅寸法がゼロ以上の場合、矩形の水平方向の原点は左端であり、それ以外の場合は右端です。同様に高さ寸法がゼロ以上の場合、矩形の垂直方向の原点は上端であり、それ以外の場合は下端です。
x座標: 矩形の原点までの、ビューポート左端からの水平方向の距離。
y座標: 矩形の原点までの、ビューポート上端からの垂直方向の距離。
幅寸法: 矩形の幅。負になり得ます。
高さ寸法: 矩形の高さ。負になり得ます。

[Exposed=(Window,Worker),
 Serializable]
interface DOMRectReadOnly {
    constructor(optional unrestricted double x = 0, optional unrestricted double y = 0,
            optional unrestricted double width = 0, optional unrestricted double height = 0);

    [NewObject] static DOMRectReadOnly fromRect(optional DOMRectInit other = {});

    readonly attribute unrestricted double x;
    readonly attribute unrestricted double y;
    readonly attribute unrestricted double width;
    readonly attribute unrestricted double height;
    readonly attribute unrestricted double top;
    readonly attribute unrestricted double right;
    readonly attribute unrestricted double bottom;
    readonly attribute unrestricted double left;

    [Default] object toJSON();
};

[Exposed=(Window,Worker),
 Serializable,
 LegacyWindowAlias=SVGRect]
interface DOMRect : DOMRectReadOnly {
    constructor(optional unrestricted double x = 0, optional unrestricted double y = 0,
            optional unrestricted double width = 0, optional unrestricted double height = 0);

    [NewObject] static DOMRect fromRect(optional DOMRectInit other = {});

    inherit attribute unrestricted double x;
    inherit attribute unrestricted double y;
    inherit attribute unrestricted double width;
    inherit attribute unrestricted double height;
};

dictionary DOMRectInit {
    unrestricted double x = 0;
    unrestricted double y = 0;
    unrestricted double width = 0;
    unrestricted double height = 0;
};

以下のアルゴリズムは、DOMRectReadOnly オブジェクトが、内部メンバー変数 x座標、y座標、幅寸法、高さ寸法を持つことを前提とします。DOMRectReadOnly および継承インターフェイス DOMRectは、これらの変数の値にアクセス・設定できなければなりません。

属性または関数によってDOMRectReadOnly オブジェクトを返すインターフェイスは、内部メンバー変数の値を変更できる場合があります。このようなインターフェイスは、その能力について本文で明示する必要があります。

内部メンバー変数は、いかなる方法でも公開してはなりません。

DOMRectReadOnly(x, y, width, height) および DOMRect(x, y, width, height) コンストラクタを呼び出した際は、以下の手順を実行しなければなりません：

rect を新しい DOMRectReadOnly または DOMRect オブジェクトとして初期化します。
rect の変数 x座標を xに、y座標を yに、幅寸法を widthに、高さ寸法を heightに設定します。
rectを返します。

DOMRectReadOnly 上の静的メソッド fromRect(other) は、辞書からDOMRectReadOnlyを作成 (other) を実行しなければなりません。

DOMRect 上の静的メソッド fromRect(other) は、辞書からDOMRectを作成 (other)を実行しなければなりません。

辞書からDOMRectReadOnlyを作成 (other) または辞書からDOMRectを作成 (other) の手順は以下の通りです：

rect を新しい DOMRectReadOnly または DOMRect として初期化します。
rect の変数 x座標を other の x 辞書メンバーに、y座標を other の y 辞書メンバーに、幅寸法を other の width 辞書メンバーに、高さ寸法を other の height 辞書メンバーに設定します。
rect を返します。

x 属性は取得時、x座標の値を返さなければなりません。DOMRect インターフェイスの場合、x 属性を設定すると、x座標に新しい値を設定しなければなりません。

y 属性は取得時、y座標の値を返さなければなりません。DOMRect インターフェイスの場合、y 属性を設定すると、y座標に新しい値を設定しなければなりません。

width 属性は取得時、幅寸法の値を返さなければなりません。DOMRect インターフェイスの場合、width 属性を設定すると、幅寸法に新しい値を設定しなければなりません。

height 属性は取得時、高さ寸法の値を返さなければなりません。DOMRect インターフェイスの場合、height 属性を設定すると、高さ寸法に新しい値を設定しなければなりません。

top 属性は取得時、NaN安全な最小値（y座標と、y座標に高さ寸法を加えた値）のうち小さい方を返さなければなりません。

right 属性は取得時、NaN安全な最大値（x座標と、x座標に幅寸法を加えた値）のうち大きい方を返さなければなりません。

bottom 属性は取得時、NaN安全な最大値（y座標と、y座標に高さ寸法を加えた値）のうち大きい方を返さなければなりません。

left 属性は取得時、NaN安全な最小値（x座標と、x座標に幅寸法を加えた値）のうち小さい方を返さなければなりません。

テスト

4. DOMRectList インターフェイス

[Exposed=Window]
interface DOMRectList {
    readonly attribute unsigned long length;
    getter DOMRect? item(unsigned long index);
};

length 属性は、オブジェクトに紐づくDOMRectオブジェクトの総数を返さなければなりません。

item(index) メソッドは呼び出されたとき、index がDOMRectオブジェクト総数以上の場合はnullを返さなければなりません。そうでない場合は、該当するDOMRectオブジェクトを返します。インデックスはゼロ始まりです。

DOMRectList はレガシーWebコンテンツとの互換性のためだけに存在します。新しいAPIを定義する際は、DOMRectList を使用してはなりません。代わりに sequence<DOMRect> を用いてください。[WEBIDL]

テスト

DOMRectList.html （ライブテスト）（ソース）

5. DOMQuad インターフェイス

DOMQuad インターフェイスを実装するオブジェクトは四辺形を表します。

[Exposed=(Window,Worker),
 Serializable]
interface DOMQuad {
    constructor(optional DOMPointInit p1 = {}, optional DOMPointInit p2 = {},
            optional DOMPointInit p3 = {}, optional DOMPointInit p4 = {});

    [NewObject] static DOMQuad fromRect(optional DOMRectInit other = {});
    [NewObject] static DOMQuad fromQuad(optional DOMQuadInit other = {});

    [SameObject] readonly attribute DOMPoint p1;
    [SameObject] readonly attribute DOMPoint p2;
    [SameObject] readonly attribute DOMPoint p3;
    [SameObject] readonly attribute DOMPoint p4;
    [NewObject] DOMRect getBounds();

    [Default] object toJSON();
};

dictionary DOMQuadInit {
  DOMPointInit p1;
  DOMPointInit p2;
  DOMPointInit p3;
  DOMPointInit p4;
};

以下のアルゴリズムは、DOMQuad オブジェクトが内部メンバー変数点1、点2、点3、点4（いずれも DOMPoint オブジェクト）を持つことを前提とします。DOMQuad は、これら変数の値にアクセスし設定できなければなりません。著者はこれらの DOMPoint オブジェクトを修正することができ、これは四辺形に直接影響します。

属性や関数で DOMQuad オブジェクトを返すインターフェイスは、内部メンバー変数の値を変更できる場合があります。そのようなインターフェイスはこの能力を本文で明示しなければなりません。

内部メンバー変数は、いかなる方法でも公開してはなりません。

DOMQuad(p1, p2, p3, p4) コンストラクターを呼び出した場合、以下の手順を実行しなければなりません：

point1 を、新しい DOMPoint として、属性値を p1 の同名辞書メンバーの値に設定します。
point2 を、新しい DOMPoint として、属性値を p2 の同名辞書メンバーの値に設定します。
point3 を、新しい DOMPoint として、属性値を p3 の同名辞書メンバーの値に設定します。
point4 を、新しい DOMPoint として、属性値を p4 の同名辞書メンバーの値に設定します。
新しい DOMQuad を返し、点1 に point1、点2 に point2、点3 に point3、点4 に point4 を設定します。

※ DOMPoint／DOMPointReadOnly 型の引数も渡せます。渡された引数は WebIDL の規則に従って内部的に適切なオブジェクト型へ変換されます。[WEBIDL]

DOMQuad 上の静的メソッド fromRect(other) は、DOMRectInit 辞書から DOMQuad を作成 (other) を実行しなければなりません。

DOMRectInit 辞書から DOMQuad を作成 (other) の手順：

other の x、 y、 width、 height の値を x, y, width, height に設定します。
point1 を新しい DOMPoint とし、 x座標を x、 y座標を y、 z座標を 0、 w遠近を 1 に設定します。
point2 を新しい DOMPoint とし、 x座標を x + width、 y座標を y、 z座標を 0、 w遠近を 1 に設定します。
point3 を新しい DOMPoint とし、 x座標を x + width、 y座標を y + height、 z座標を 0、 w遠近を 1 に設定します。
point4 を新しい DOMPoint とし、 x座標を x、 y座標を y + height、 z座標を 0、 w遠近を 1 に設定します。
新しい DOMQuad を返し、点1 に point1、点2 に point2、点3 に point3、点4 に point4 を設定します。

DOMQuad 上の静的メソッド fromQuad(other) は、DOMQuadInit 辞書から DOMQuad を作成 (other) を実行しなければなりません。

DOMQuadInit 辞書から DOMQuad を作成 (other) の手順：

other の p1 辞書メンバーが存在すれば、辞書から DOMPoint を作成を呼び出して point1 を得ます。
other の p2 辞書メンバーが存在すれば、辞書から DOMPoint を作成を呼び出して point2 を得ます。
other の p3 辞書メンバーが存在すれば、辞書から DOMPoint を作成を呼び出して point3 を得ます。
other の p4 辞書メンバーが存在すれば、辞書から DOMPoint を作成を呼び出して point4 を得ます。
新しい DOMQuad を返し、点1 に point1、点2 に point2、点3 に point3、点4 に point4 を設定します。

p1 属性は点1 を返さなければなりません。

p2 属性は点2 を返さなければなりません。

p3 属性は点3 を返さなければなりません。

p4 属性は点4 を返さなければなりません。

getBounds() メソッドは呼び出された際、以下のアルゴリズムを実行します：

bounds を DOMRect オブジェクトに設定します。
left を NaN安全な最小値（点1 の x座標、点2 の x座標、点3 の x座標、点4 の x座標）に設定します。
top を NaN安全な最小値（点1 の y座標、点2 の y座標、点3 の y座標、点4 の y座標）に設定します。
right を NaN安全な最大値（点1 の x座標、点2 の x座標、点3 の x座標、点4 の x座標）に設定します。
bottom を NaN安全な最大値（点1 の y座標、点2 の y座標、点3 の y座標、点4 の y座標）に設定します。
bounds の x座標を left に、y座標を top に、幅寸法を right - left に、高さ寸法を bottom - top に設定します。
bounds を返します。

テスト

この例では、DOMQuad コンストラクターが DOMPoint 型および DOMPointInit 型の引数で呼び出されています。どちらの引数も受け入れられ、使用できます。

var point = new DOMPoint(2, 0);
var quad1 = new DOMQuad(point, {x: 12, y: 0}, {x: 12, y: 10}, {x: 2, y: 10});

上記の DOMQuad quad1 の属性値は、以下の DOMQuad quad2 の属性値と同等です：

var rect = new DOMRect(2, 0, 10, 10);
var quad2 = DOMQuad.fromRect(rect);

これは不規則な四辺形の例です：

new DOMQuad({x: 40, y: 25}, {x: 180, y: 8}, {x: 210, y: 150}, {x: 10, y: 180});

不規則な四辺形は DOMQuad で表されます。赤色で示された４つの円は、DOMPoint の属性 p1 から p4 までを示します。点線の矩形は getBounds() メソッドによって得られるバウンディング矩形を表します（DOMQuad）。

6. DOMMatrix インターフェイス

DOMMatrix および DOMMatrixReadOnly インターフェイスは、いずれもグラフィカルなコンテキストでの変換を記述するための数学的な行列を表します。次のセクションでインターフェイスの詳細を説明します。

[\begin{matrix} m_{11} & m_{21} & m_{31} & m_{41} \\ m_{12} & m_{22} & m_{32} & m_{42} \\ m_{13} & m_{23} & m_{33} & m_{43} \\ m_{14} & m_{24} & m_{34} & m_{44} \end{matrix}]

4x4 抽象行列。項目は m₁₁ から m₄₄ までです。

以下のセクションでは、用語の意味は次の通りです：

後乗: 項 A を後乗するとは、A · B と等しいことを示します。
前乗: 項 A を前乗するとは、B · A と等しいことを示します。
乗算: 項 A に項 B を乗算するとは、A · B と等しいことを示します。

[Exposed=(Window,Worker),
 Serializable]
interface DOMMatrixReadOnly {
    constructor(optional (DOMString or sequence<unrestricted double>) init);

    [NewObject] static DOMMatrixReadOnly fromMatrix(optional DOMMatrixInit other = {});
    [NewObject] static DOMMatrixReadOnly fromFloat32Array(Float32Array array32);
    [NewObject] static DOMMatrixReadOnly fromFloat64Array(Float64Array array64);

    // These attributes are simple aliases for certain elements of the 4x4 matrix
    readonly attribute unrestricted double a;
    readonly attribute unrestricted double b;
    readonly attribute unrestricted double c;
    readonly attribute unrestricted double d;
    readonly attribute unrestricted double e;
    readonly attribute unrestricted double f;

    readonly attribute unrestricted double m11;
    readonly attribute unrestricted double m12;
    readonly attribute unrestricted double m13;
    readonly attribute unrestricted double m14;
    readonly attribute unrestricted double m21;
    readonly attribute unrestricted double m22;
    readonly attribute unrestricted double m23;
    readonly attribute unrestricted double m24;
    readonly attribute unrestricted double m31;
    readonly attribute unrestricted double m32;
    readonly attribute unrestricted double m33;
    readonly attribute unrestricted double m34;
    readonly attribute unrestricted double m41;
    readonly attribute unrestricted double m42;
    readonly attribute unrestricted double m43;
    readonly attribute unrestricted double m44;

    readonly attribute boolean is2D;
    readonly attribute boolean isIdentity;

    // Immutable transform methods
    [NewObject] DOMMatrix translate(optional unrestricted double tx = 0,
                                    optional unrestricted double ty = 0,
                                    optional unrestricted double tz = 0);
    [NewObject] DOMMatrix scale(optional unrestricted double scaleX = 1,
                                optional unrestricted double scaleY,
                                optional unrestricted double scaleZ = 1,
                                optional unrestricted double originX = 0,
                                optional unrestricted double originY = 0,
                                optional unrestricted double originZ = 0);
    [NewObject] DOMMatrix scaleNonUniform(optional unrestricted double scaleX = 1,
                                          optional unrestricted double scaleY = 1);
    [NewObject] DOMMatrix scale3d(optional unrestricted double scale = 1,
                                  optional unrestricted double originX = 0,
                                  optional unrestricted double originY = 0,
                                  optional unrestricted double originZ = 0);
    [NewObject] DOMMatrix rotate(optional unrestricted double rotX = 0,
                                 optional unrestricted double rotY,
                                 optional unrestricted double rotZ);
    [NewObject] DOMMatrix rotateFromVector(optional unrestricted double x = 0,
                                           optional unrestricted double y = 0);
    [NewObject] DOMMatrix rotateAxisAngle(optional unrestricted double x = 0,
                                          optional unrestricted double y = 0,
                                          optional unrestricted double z = 0,
                                          optional unrestricted double angle = 0);
    [NewObject] DOMMatrix skewX(optional unrestricted double sx = 0);
    [NewObject] DOMMatrix skewY(optional unrestricted double sy = 0);
    [NewObject] DOMMatrix multiply(optional DOMMatrixInit other = {});
    [NewObject] DOMMatrix flipX();
    [NewObject] DOMMatrix flipY();
    [NewObject] DOMMatrix inverse();

    [NewObject] DOMPoint transformPoint(optional DOMPointInit point = {});
    [NewObject] Float32Array toFloat32Array();
    [NewObject] Float64Array toFloat64Array();

    [Exposed=Window] stringifier;
    [Default] object toJSON();
};

[Exposed=(Window,Worker),
 Serializable,
 LegacyWindowAlias=(SVGMatrix,WebKitCSSMatrix)]
interface DOMMatrix : DOMMatrixReadOnly {
    constructor(optional (DOMString or sequence<unrestricted double>) init);

    [NewObject] static DOMMatrix fromMatrix(optional DOMMatrixInit other = {});
    [NewObject] static DOMMatrix fromFloat32Array(Float32Array array32);
    [NewObject] static DOMMatrix fromFloat64Array(Float64Array array64);

    // These attributes are simple aliases for certain elements of the 4x4 matrix
    inherit attribute unrestricted double a;
    inherit attribute unrestricted double b;
    inherit attribute unrestricted double c;
    inherit attribute unrestricted double d;
    inherit attribute unrestricted double e;
    inherit attribute unrestricted double f;

    inherit attribute unrestricted double m11;
    inherit attribute unrestricted double m12;
    inherit attribute unrestricted double m13;
    inherit attribute unrestricted double m14;
    inherit attribute unrestricted double m21;
    inherit attribute unrestricted double m22;
    inherit attribute unrestricted double m23;
    inherit attribute unrestricted double m24;
    inherit attribute unrestricted double m31;
    inherit attribute unrestricted double m32;
    inherit attribute unrestricted double m33;
    inherit attribute unrestricted double m34;
    inherit attribute unrestricted double m41;
    inherit attribute unrestricted double m42;
    inherit attribute unrestricted double m43;
    inherit attribute unrestricted double m44;

    // Mutable transform methods
    DOMMatrix multiplySelf(optional DOMMatrixInit other = {});
    DOMMatrix preMultiplySelf(optional DOMMatrixInit other = {});
    DOMMatrix translateSelf(optional unrestricted double tx = 0,
                            optional unrestricted double ty = 0,
                            optional unrestricted double tz = 0);
    DOMMatrix scaleSelf(optional unrestricted double scaleX = 1,
                        optional unrestricted double scaleY,
                        optional unrestricted double scaleZ = 1,
                        optional unrestricted double originX = 0,
                        optional unrestricted double originY = 0,
                        optional unrestricted double originZ = 0);
    DOMMatrix scale3dSelf(optional unrestricted double scale = 1,
                          optional unrestricted double originX = 0,
                          optional unrestricted double originY = 0,
                          optional unrestricted double originZ = 0);
    DOMMatrix rotateSelf(optional unrestricted double rotX = 0,
                         optional unrestricted double rotY,
                         optional unrestricted double rotZ);
    DOMMatrix rotateFromVectorSelf(optional unrestricted double x = 0,
                                   optional unrestricted double y = 0);
    DOMMatrix rotateAxisAngleSelf(optional unrestricted double x = 0,
                                  optional unrestricted double y = 0,
                                  optional unrestricted double z = 0,
                                  optional unrestricted double angle = 0);
    DOMMatrix skewXSelf(optional unrestricted double sx = 0);
    DOMMatrix skewYSelf(optional unrestricted double sy = 0);
    DOMMatrix invertSelf();

    [Exposed=Window] DOMMatrix setMatrixValue(DOMString transformList);
};

dictionary DOMMatrix2DInit {
    unrestricted double a;
    unrestricted double b;
    unrestricted double c;
    unrestricted double d;
    unrestricted double e;
    unrestricted double f;
    unrestricted double m11;
    unrestricted double m12;
    unrestricted double m21;
    unrestricted double m22;
    unrestricted double m41;
    unrestricted double m42;
};

dictionary DOMMatrixInit : DOMMatrix2DInit {
    unrestricted double m13 = 0;
    unrestricted double m14 = 0;
    unrestricted double m23 = 0;
    unrestricted double m24 = 0;
    unrestricted double m31 = 0;
    unrestricted double m32 = 0;
    unrestricted double m33 = 1;
    unrestricted double m34 = 0;
    unrestricted double m43 = 0;
    unrestricted double m44 = 1;
    boolean is2D;
};

以下のアルゴリズムは、DOMMatrixReadOnly オブジェクトが、内部メンバー変数 m11要素、m12要素、m13要素、m14要素、m21要素、m22要素、m23要素、m24要素、m31要素、m32要素、m33要素、m34要素、m41要素、m42要素、m43要素、m44要素とis 2Dを持つことを前提とします。DOMMatrixReadOnly および継承インターフェイス DOMMatrixは、これらの変数の値にアクセス・設定できなければなりません。

属性や関数によってDOMMatrixReadOnly オブジェクトを返すインターフェイスは、内部メンバー変数の値を変更できる場合があります。そのようなインターフェイスは、この能力について本文で明示する必要があります。

内部メンバー変数は、いかなる方法でも公開してはなりません。

DOMMatrix および DOMMatrixReadOnly インターフェイスは、SVG の SVGMatrix インターフェイスを置き換えます。[SVG11]

テスト

6.1. DOMMatrix2DInit および DOMMatrixInit 辞書

（2D の）検証と修正を DOMMatrix2DInit または DOMMatrixInit 辞書 dict に対して行うには、以下の手順を実行します：

dict に対して、次のいずれかが真の場合、TypeError 例外を投げて、これらの手順を中止します。
- a および m11 の両方が存在し、SameValueZero(a, m11) が false となる場合。
- b および m12 の両方が存在し、SameValueZero(b, m12) が false となる場合。
- c および m21 の両方が存在し、SameValueZero(c, m21) が false となる場合。
- d および m22 の両方が存在し、SameValueZero(d, m22) が false となる場合。
- e および m41 の両方が存在し、SameValueZero(e, m41) が false となる場合。
- f および m42 の両方が存在し、SameValueZero(f, m42) が false となる場合。
m11 が存在しない場合、メンバー a の値、または a も存在しない場合は 1 を設定する。
m12 が存在しない場合、メンバー b の値、または b も存在しない場合は 0 を設定する。
m21 が存在しない場合、メンバー c の値、または c も存在しない場合は 0 を設定する。
m22 が存在しない場合、メンバー d の値、または d も存在しない場合は 1 を設定する。
m41 が存在しない場合、メンバー e の値、または e も存在しない場合は 0 を設定する。
m42 が存在しない場合、メンバー f の値、または f も存在しない場合は 0 を設定する。

※ SameValueZero 比較アルゴリズムは、二つの NaN 値、そして 0 と -0 に対して true を返します。[ECMA-262]

検証と修正を DOMMatrixInit 辞書 dict に対して行う場合、以下の手順を実行します：

（2D の）検証と修正を dict に行う。
is2D が true かつ：m13、 m14、 m23、 m24、 m31、 m32、 m34、 m43 のいずれかが 0 または -0 以外で存在する場合、または m33、 m44 のいずれかが 1 以外で存在する場合、TypeError 例外を投げ、これらの手順を中止する。
is2D が存在せず、かつ m13、 m14、 m23、 m24、 m31、 m32、 m34、 m43 のいずれかが 0 または -0 以外で存在する場合、または m33、 m44 のいずれかが 1 以外で存在する場合、is2D を false に設定する。
is2D が未設定の場合、true に設定する。

テスト

6.2. 文字列から抽象行列へのパース

文字列から抽象行列をパースするとは、与えられた文字列 transformList に対して、以下の手順を実行することを意味します。処理は 4x4 抽象行列とブール値 2dTransform のペア、または失敗を返します。

もし transformList が空文字列なら、"matrix(1, 0, 0, 1, 0, 0)" という文字列に設定します。
パースを行い、transformList を CSS の transform プロパティの文法で parsedValue へ変換します。結果は <transform-list>、キーワード none、または失敗となります。もし parsedValue が失敗の場合や、<transform-function> に <length> 値が絶対長さ単位無しで使われている場合、または none 以外のキーワードが使われている場合は失敗を返します。[CSS3-SYNTAX] [CSS3-TRANSFORMS]
もし parsedValue が none なら、parsedValue を単一の単位行列を含む <transform-list> に設定します。
2dTransform に parsedValue の 2D/3D 寸法状態を記録します。

もし parsedValue が三次元変換関数を含む場合

2dTransform に false を設定します。

それ以外の場合

2dTransform に true を設定します。
すべての <transform-function> を “Transform 関数の数学的記述” に従って 4x4 抽象行列に変換します。[CSS3-TRANSFORMS]
本節冒頭の図と同じ形式の 4x4 抽象行列 matrix を用意します。全ての行列を左から右へ後乗して、その積を matrix に設定します。
matrix と 2dTransform を返します。

6.3. DOMMatrixReadOnly と DOMMatrix オブジェクトの作成

2D行列を作成とは、type（DOMMatrixReadOnly または DOMMatrix）型と、6要素のシーケンス init が与えられた場合、次の手順を実行します：

matrix を type の新しいインスタンスとして作成します。
m11 要素、m12 要素、m21 要素、m22 要素、m41 要素、m42 要素を、init のそれぞれの値順に設定します。
m13 要素、 m14 要素、 m23 要素、 m24 要素、 m31 要素、 m32 要素、 m34 要素、 m43 要素を 0 に設定します。
m33 要素および m44 要素を 1 に設定します。
is 2D を true に設定します。
matrix を返します。

3D行列を作成とは、type（DOMMatrixReadOnly または DOMMatrix）型と、16要素のシーケンス init が与えられた場合、次の手順を実行します：

matrix を type の新しいインスタンスとして作成します。
m11 要素から m44 要素までを、init の値からカラムメジャー順（列優先順）で設定します。
is 2D を false に設定します。
matrix を返します。

DOMMatrixReadOnly(init) と DOMMatrix(init) のコンストラクターは、以下の手順に従わなければなりません：

もし init が省略された場合

DOMMatrixReadOnly または DOMMatrix 型として、シーケンス [1, 0, 0, 1, 0, 0] で 2D行列を作成の結果を返します。

init が DOMString 型の場合

もし current global object が Window オブジェクトでない場合は、TypeError 例外を投げる。
init を抽象行列へパースし、結果の matrix, 2dTransform を取得。失敗なら "SyntaxError" DOMException を投げる。
もし 2dTransform が true の場合

2D行列を作成で matrix の m11, m12, m21, m22, m41, m42 を値として返す。

それ以外の場合

3D行列を作成で matrix の16要素を返す。

init が6要素のシーケンスの場合

2D行列を作成の結果を返す。

init が16要素のシーケンスの場合

3D行列を作成の結果を返す。

それ以外の場合

TypeError 例外を投げる。

テスト

DOMMatrix-001.html （ライブテスト）（ソース）

fromMatrix(other) 静的メソッド（DOMMatrixReadOnly 上）では辞書からDOMMatrixReadOnlyを作成 (other) を実行しなければなりません。

fromMatrix(other) 静的メソッド（DOMMatrix 上）では辞書からDOMMatrixを作成 (other) を実行しなければなりません。

2D 辞書からDOMMatrixReadOnlyを作成 (other) または 2D 辞書からDOMMatrixを作成 (other) の手順は次の通りです：

（2D の）検証と修正を other に対し行う。
DOMMatrixReadOnly または DOMMatrix 型として、other の m11, m12, m21, m22, m41 と m42 の順で値を使い 2D行列を作成を返す。

辞書からDOMMatrixReadOnlyを作成 (other) または辞書からDOMMatrixを作成 (other) の手順は次の通りです：

検証と修正を other に対し行う。
もし is2D 辞書メンバーが true の場合

DOMMatrixReadOnly または DOMMatrix 型として、other の m11, m12, m21, m22, m41 と m42 の順で値を使い 2D行列を作成を返す。

それ以外の場合

DOMMatrixReadOnly または DOMMatrix 型として、other の m11, m12, m13, ..., m44 の16要素の値を使い 3D行列を作成を返す。

fromFloat32Array(array32) 静的メソッド（DOMMatrixReadOnly 上）、および fromFloat32Array(array32) 静的メソッド（DOMMatrix 上）は以下の手順に従います：

もし array32 が6要素の場合: DOMMatrixReadOnly または DOMMatrix 型で array32 から値を順に使い 2D行列を作成を返す。
array32 が16要素の場合: DOMMatrixReadOnly または DOMMatrix 型で array32 から値を順に使い 3D行列を作成を返す。
それ以外の場合: TypeError 例外を投げる。

fromFloat64Array(array64) 静的メソッド（DOMMatrixReadOnly 上）、および fromFloat64Array(array64) 静的メソッド（DOMMatrix 上）は以下の手順に従います：

もし array64 が6要素の場合: DOMMatrixReadOnly または DOMMatrix 型で array64 から値を順に使い 2D行列を作成を返す。
array64 が16要素の場合: DOMMatrixReadOnly または DOMMatrix 型で array64 から値を順に使い 3D行列を作成を返す。
それ以外の場合: TypeError 例外を投げる。

6.4. DOMMatrix の属性

以下の属性 m11 から m44 までが、行列インターフェイスの16項目に対応します。

m11 および a を取得した場合、m11要素の値を返す必要があります。DOMMatrix インターフェイスの場合、m11 または a 属性を設定すると、m11要素が新しい値となります。

m12 および b を取得した場合、m12要素の値を返します。DOMMatrix インターフェイスの場合、m12 または b 属性を設定すると、m12要素が新しい値となります。

m13 を取得した場合、m13要素の値を返します。DOMMatrix インターフェイスの場合、m13 属性を設定すると、m13要素が新しい値となり、その値が 0 または -0 でなければ is 2D を false に設定します。

m14 を取得した場合、m14要素の値を返します。DOMMatrix インターフェイスの場合、m14 属性を設定すると、m14要素が新しい値となり、その値が 0 または -0 でなければ is 2D を false に設定します。

m21 および c を取得した場合、m21要素の値を返します。DOMMatrix インターフェイスの場合、m21 または c 属性を設定すると、m21要素が新しい値となります。

m22 および d を取得した場合、m22要素の値を返します。DOMMatrix インターフェイスの場合、m22 または d 属性を設定すると、m22要素が新しい値となります。

m23 を取得した場合、m23要素の値を返します。DOMMatrix インターフェイスの場合、m23 属性を設定すると、m23要素が新しい値となり、その値が 0 または -0 でなければ is 2D を false に設定します。

m24 を取得した場合、m24要素の値を返します。DOMMatrix インターフェイスの場合、m24 属性を設定すると、m24要素が新しい値となり、その値が 0 または -0 でなければ is 2D を false に設定します。

m31 を取得した場合、m31要素の値を返します。DOMMatrix インターフェイスの場合、m31 属性を設定すると、m31要素が新しい値となり、その値が 0 または -0 でなければ is 2D を false に設定します。

m32 を取得した場合、m32要素の値を返します。DOMMatrix インターフェイスの場合、m32 属性を設定すると、m32要素が新しい値となり、その値が 0 または -0 でなければ is 2D を false に設定します。

m33 を取得した場合、m33要素の値を返します。DOMMatrix インターフェイスの場合、m33 属性を設定すると、m33要素が新しい値となり、その値が 1 でなければ is 2D を false に設定します。

m34 を取得した場合、m34要素の値を返します。DOMMatrix インターフェイスの場合、m34 属性を設定すると、m34要素が新しい値となり、その値が 0 または -0 でなければ is 2D を false に設定します。

m41 および e を取得した場合、m41要素の値を返します。DOMMatrix インターフェイスの場合、m41 または e 属性を設定すると、m41要素が新しい値となります。

m42 および f を取得した場合、m42要素の値を返します。DOMMatrix インターフェイスの場合、m42 または f 属性を設定すると、m42要素が新しい値となります。

m43 を取得した場合、m43要素の値を返します。DOMMatrix インターフェイスの場合、m43 属性を設定すると、m43要素が新しい値となり、その値が 0 または -0 でなければ is 2D を false に設定します。

m44 を取得した場合、m44要素の値を返します。DOMMatrix インターフェイスの場合、m44 属性を設定すると、m44要素が新しい値となり、その値が 1 でなければ is 2D を false に設定します。

以下の属性 a から f は、行列インターフェイスの2D成分に対応します。

a 属性は m11 属性のエイリアスです。

b 属性は m12 属性のエイリアスです。

c 属性は m21 属性のエイリアスです。

d 属性は m22 属性のエイリアスです。

e 属性は m41 属性のエイリアスです。

f 属性は m42 属性のエイリアスです。

テスト

以下の属性は DOMMatrixReadOnly の状態情報を提供します。

is2D 属性は is 2D の値を返しなければなりません。

isIdentity 属性は、 m12要素、m13要素、m14要素、m21要素、m23要素、m24要素、m31要素、m32要素、m34要素、m41要素、m42要素、m43要素が 0 または -0 であり、m11要素、m22要素、m33要素、m44要素が 1 である場合 true を返します。そうでない場合 false を返します。

全ての DOMMatrixReadOnly オブジェクトは boolean の is 2D フラグを持たなければなりません。このフラグは以下を示します：

現在の行列が 2D 行列として初期化された。詳細は各作成者を参照してください。
2D 変換操作のみが行われた。各 mutable および immutable transformation method 毎に is 2D を false にするかどうかが定義されています。

※ is 2D は、一度 false になると、例外的に setMatrixValue() メソッドを呼び出す場合以外、DOMMatrix オブジェクト上で true には戻りません。

6.5. 不変変換メソッド

以下のメソッドは現在の行列を変更せず、新しい DOMMatrix オブジェクトを返します。

translate(tx, ty, tz)

result を現在の行列の値で初期化した結果行列とする。
result に tx, ty, tz を引数に translateSelf() 変換を実行する。
result を返す。

現在の行列は変更されません。

scale(scaleX, scaleY, scaleZ, originX, originY, originZ)

scaleY が省略された場合、scaleY に scaleX の値を設定する。
result を現在の行列の値で初期化した結果行列とする。
result に scaleX, scaleY, scaleZ, originX, originY, originZ を引数に scaleSelf() 変換を実行する。
result を返す。

現在の行列は変更されません。

scaleNonUniform(scaleX, scaleY)

※ レガシー互換（SVG 1.1のSVGMatrix）のためにサポートされています。作者は scale() の使用を推奨します。

result を現在の行列の値で初期化した結果行列とする。
result に scaleX, scaleY, 1, 0, 0, 0 を引数に scaleSelf() 変換を実行する。
result を返す。

現在の行列は変更されません。

scale3d(scale, originX, originY, originZ)

result を現在の行列の値で初期化した結果行列とする。
result に scale, originX, originY, originZ を引数に scale3dSelf() 変換を実行する。
result を返す。

現在の行列は変更されません。

rotate(rotX, rotY, rotZ)

result を現在の行列の値で初期化した結果行列とする。
result に rotX, rotY, rotZ を引数に rotateSelf() 変換を実行する。
result を返す。

現在の行列は変更されません。

rotateFromVector(x, y)

result を現在の行列の値で初期化した結果行列とする。
result に x, y を引数に rotateFromVectorSelf() 変換を実行する。
result を返す。

現在の行列は変更されません。

rotateAxisAngle(x, y, z, angle)

result を現在の行列の値で初期化した結果行列とする。
result に x, y, z, angle を引数に rotateAxisAngleSelf() 変換を実行する。
result を返す。

現在の行列は変更されません。

skewX(sx)

result を現在の行列の値で初期化した結果行列とする。
sx を引数に skewXSelf() 変換を result に実行します。
result を返す。

現在の行列は変更されません。

skewY(sy)

result を現在の行列の値で初期化した結果行列とする。
sy を引数に skewYSelf() 変換を result に実行します。
result を返す。

現在の行列は変更されません。

multiply(other)

result を現在の行列の値で初期化した結果行列とする。
other を引数に multiplySelf() 変換を結果に実行します。
result を返す。

現在の行列は変更されません。

flipX()

result を現在の行列の値で初期化した結果行列とする。
result を new DOMMatrix([-1, 0, 0, 1, 0, 0]) で後乗変換する。
result を返す。

現在の行列は変更されません。

flipY()

result を現在の行列の値で初期化した結果行列とする。
result を new DOMMatrix([1, 0, 0, -1, 0, 0]) で後乗変換する。
result を返す。

現在の行列は変更されません。

inverse()

result を現在の行列の値で初期化した結果行列とする。
result に invertSelf() 変換を実行する。
result を返す。

現在の行列は変更されません。

テスト

以下のメソッドは現在の行列を変更しません。

transformPoint(point)

pointObject を辞書からDOMPointを作成 (point) の結果とし、点を行列で変換の結果（pointObject と現在の行列を引数に実行）を返します。渡した引数は変更されません。

toFloat32Array()

現在の行列の m11 から m44 までの16要素を、列優先順で Float32Array でシリアライズして返します。

toFloat64Array()

現在の行列の m11 から m44 までの16要素を、列優先順で Float64Array でシリアライズして返します。

文字列化挙動

m11要素から m44要素のいずれかが非有限値の場合、"InvalidStateError" DOMException を投げる。

※ CSS構文では NaN や Infinity 値は表現できません。
string を空文字列とする。
is 2D が true なら：
1. string に "matrix(" を追加する。
2. string に ! ToString(m11要素) を追加する。
3. string に ", " を追加する。
4. string に ! ToString(m12要素) を追加する。
5. string に ", " を追加する。
6. string に ! ToString(m21要素) を追加する。
7. string に ", " を追加する。
8. string に ! ToString(m22要素) を追加する。
9. string に ", " を追加する。
10. string に ! ToString(m41要素) を追加する。
11. string に ", " を追加する。
12. string に ! ToString(m42要素) を追加する。
13. string に ")" を追加する。
※ この文字列は CSS Transforms の <matrix()> 関数形式になります。[CSS3-TRANSFORMS]
それ以外の場合：
1. string に "matrix3d(" を追加する。
2. string に ! ToString(m11要素) を追加する。
3. string に ", " を追加する。
4. string に ! ToString(m12要素) を追加する。
5. string に ", " を追加する。
6. string に ! ToString(m13要素) を追加する。
7. string に ", " を追加する。
8. string に ! ToString(m14要素) を追加する。
9. string に ", " を追加する。
10. string に ! ToString(m21要素) を追加する。
11. string に ", " を追加する。
12. string に ! ToString(m22要素) を追加する。
13. string に ", " を追加する。
14. string に ! ToString(m23要素) を追加する。
15. string に ", " を追加する。
16. string に ! ToString(m24要素) を追加する。
17. string に ", " を追加する。
18. string に ! ToString(m41要素) を追加する。
19. string に ", " を追加する。
20. string に ! ToString(m42要素) を追加する。
21. string に ", " を追加する。
22. string に ! ToString(m43要素) を追加する。
23. string に ", " を追加する。
24. string に ! ToString(m44要素) を追加する。
25. string に ")" を追加する。
※ この文字列は CSS Transforms の <matrix3d()> 関数形式になります。[CSS3-TRANSFORMS]
string を返す。

テスト

DOMMatrix-stringifier.html (ライブテスト) (ソース)

テスト

DOMMatrix-003.html （ライブテスト）（ソース）

この例では、行列を作成し、2D変換メソッドをいくつか呼び出しています：

var matrix = new DOMMatrix();
matrix.scaleSelf(2);
matrix.translateSelf(20,20);
console.assert(matrix.toString() ===
                "matrix(2, 0, 0, 2, 40, 40)");

この例では、行列を作成し、3D変換メソッドをいくつか呼び出しています：

var matrix = new DOMMatrix();
matrix.scale3dSelf(2);
console.assert(matrix.toString() ===
                "matrix3d(2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1)");

3D操作の場合、文字列化では3D行列を表す文字列になります。

この例では、行列に非有限値が含まれるため、例外がスローされます。

var matrix = new DOMMatrix([NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN]);
var string = matrix + " Batman!";

6.6. 可変変換メソッド

以下のメソッドは現在の行列を変更しますので、それぞれのメソッドは呼び出し元の行列自身を返します。主な利点は、コンテンツ作成者がメソッド呼び出しをチェーンできることです。

次のコード例：

var matrix = new DOMMatrix();
matrix.translateSelf(20, 20);
matrix.scaleSelf(2);
matrix.translateSelf(-20, -20);

は、次のコードと等価です：

var matrix = new DOMMatrix();
matrix.translateSelf(20, 20).scaleSelf(2).translateSelf(-20, -20);

※ メソッドチェーンを利用する場合は、可変変換メソッドを使うことで、中間的な DOMMatrix オブジェクトの生成によるユーザーエージェントの不要なメモリ割り当てを避けられます。

multiplySelf(other)

otherObject を辞書からDOMMatrixを作成 (other) の結果とする。
otherObject 行列を現在の行列に後乗する。
is 2D が otherObject で false の場合、現在の行列の is 2D を false に設定する。
現在の行列を返す。

preMultiplySelf(other)

otherObject を辞書からDOMMatrixを作成 (other) の結果とする。
otherObject 行列を現在の行列に前乗する。
is 2D が otherObject で false の場合、現在の行列の is 2D を false に設定する。
現在の行列を返す。

translateSelf(tx, ty, tz)

現在の行列に、3D平行移動変換を後乗する。3D平行移動行列はCSS Transformsで定義されています。[CSS3-TRANSFORMS]
tz が0または-0以外に指定された場合、現在の行列の is 2D を false に設定します。
現在の行列を返す。

scaleSelf(scaleX, scaleY, scaleZ, originX, originY, originZ)

現在の行列に、originX, originY, originZ を引数に translateSelf() 変換を実行します。
scaleY が省略された場合、scaleY に scaleX の値を設定します。
現在の行列に、scaleX, scaleY, scaleZ を使い非均等スケール変換を後乗する。3Dスケール行列はCSS Transformsで定義されており、sx = scaleX, sy = scaleY, sz = scaleZとなる。[CSS3-TRANSFORMS]
originX, originY, originZ の符号を反転する。
現在の行列に、-originX, -originY, -originZ を引数に translateSelf() 変換を実行します。
scaleZ が 1 でない場合、現在の行列の is 2D を false に設定します。
現在の行列を返す。

scale3dSelf(scale, originX, originY, originZ)

現在の行列に、originX, originY, originZ を引数に translateSelf() 変換を実行します。
現在の行列に、3D一様スケール変換 (m11 = m22 = m33 = scale) を後乗で適用する。3Dスケール行列はCSS Transformsで定義されており、sx = sy = sz = scaleとなる。[CSS3-TRANSFORMS]
現在の行列に、-originX, -originY, -originZ を引数に translateSelf() 変換を実行します。
scale が 1 でない場合、現在の行列の is 2D を false に設定します。
現在の行列を返す。

rotateSelf(rotX, rotY, rotZ)

rotY および rotZ の両方が省略された場合、rotZ に rotXの値を設定し、rotX および rotY は 0 に設定する。
さらに rotY が省略されていれば、rotY を 0 に設定する。
さらに rotZ が省略されていれば、rotZ を 0 に設定する。
rotX または rotY が 0 または -0 でなければ現在の行列の is 2D を false に設定する。
現在の行列に、ベクトル(0,0,1)周りに rotZ 度回転する変換を後乗する。3D回転行列はCSS Transformsで定義されていて alpha=rotZ度。[CSS3-TRANSFORMS]
現在の行列に、ベクトル(0,1,0)周りに rotY 度回転する変換を後乗する。3D回転行列はCSS Transformsで定義されていて alpha=rotY度。[CSS3-TRANSFORMS]
現在の行列に、ベクトル(1,0,0)周りに rotX 度回転する変換を後乗する。3D回転行列はCSS Transformsで定義されていて alpha=rotX度。[CSS3-TRANSFORMS]
現在の行列を返す。

rotateFromVectorSelf(x, y)

現在の行列に、ベクトル(1,0)^Tと(x,y)^Tが成す時計回りの角度による回転変換を後乗する。xとyが両方とも0または-0なら、角度は0とする。2D回転行列はCSS Transformsで定義されていて、alphaはこの角度（度単位）。[CSS3-TRANSFORMS]
現在の行列を返す。

rotateAxisAngleSelf(x, y, z, angle)

現在の行列に、指定されたベクトル x, y, z 周りに angle 度回転する回転変換を後乗する。3D回転行列はCSS Transformsで定義されていて alpha=angle度。[CSS3-TRANSFORMS]
x または y が 0 または -0 でなければ現在の行列の is 2D を false に設定する。
現在の行列を返す。

skewXSelf(sx)

現在の行列に、sx度のskewX変換を後乗する。2D skewX行列はCSS Transformsで定義されていて alpha=sx度。[CSS3-TRANSFORMS]
現在の行列を返す。

skewYSelf(sy)

現在の行列に、sy度のskewY変換を後乗する。2D skewY行列はCSS Transformsで定義されていて beta=sy度。[CSS3-TRANSFORMS]
現在の行列を返す。

invertSelf()

現在の行列を反転させる。
現在の行列が反転可能でない場合、全ての属性を NaN にし、is 2D を false に設定する。
現在の行列を返す。

テスト

setMatrixValue(transformList)

transformListを抽象行列にパースし、結果の matrix と 2dTransform を取得。失敗なら "SyntaxError" DOMException を投げる。
is 2D に 2dTransform の値を設定する。
m11要素から m44要素までを matrix の列優先順で各要素値に設定する。
現在の行列を返す。

テスト

DOMMatrix-css-string.worker.js （ライブテスト）（ソース）

7. 構造化シリアル化

DOMPointReadOnly, DOMPoint, DOMRectReadOnly, DOMRect, DOMQuad, DOMMatrixReadOnly, DOMMatrix オブジェクトはシリアル化可能オブジェクトです。[HTML]

DOMPointReadOnly および DOMPoint のシリアル化手順は、value と serialized が与えられたとき、以下の通りです：

serialized.[[X]] に value の x座標を設定する。
serialized.[[Y]] に value の y座標を設定する。
serialized.[[Z]] に value の z座標を設定する。
serialized.[[W]] に value の w透視座標を設定する。

これらの逆シリアル化手順は、serialized および value が与えられたとき、以下の通りです：

value の x座標に serialized.[[X]] を設定する。
value の y座標に serialized.[[Y]] を設定する。
value の z座標に serialized.[[Z]] を設定する。
value の w透視座標に serialized.[[W]] を設定する。

DOMRectReadOnly および DOMRect のシリアル化手順は、value と serialized が与えられたとき、以下の通りです：

serialized.[[X]] に value の x座標を設定する。
serialized.[[Y]] に value の y座標を設定する。
serialized.[[Width]] に value の幅寸法を設定する。
serialized.[[Height]] に value の高さ寸法を設定する。

これらの逆シリアル化手順は、serialized と value が与えられたとき、以下の通りです：

value の x座標に serialized.[[X]] を設定する。
value の y座標に serialized.[[Y]] を設定する。
value の幅寸法に serialized.[[Width]] を設定する。
value の高さ寸法に serialized.[[Height]] を設定する。

DOMQuad のシリアル化手順は、value と serialized が与えられた場合、以下の通りです：

serialized.[[P1]] に value の部分シリアル化 point 1 を設定する。
serialized.[[P2]] に value の部分シリアル化 point 2 を設定する。
serialized.[[P3]] に value の部分シリアル化 point 3 を設定する。
serialized.[[P4]] に value の部分シリアル化 point 4 を設定する。

これらの逆シリアル化手順は、serialized と value が与えられた場合、以下の通りです：

value の point 1 に部分逆シリアル化 serialized.[[P1]] を設定する。
value の point 2 に部分逆シリアル化 serialized.[[P2]] を設定する。
value の point 3 に部分逆シリアル化 serialized.[[P3]] を設定する。
value の point 4 に部分逆シリアル化 serialized.[[P4]] を設定する。

DOMMatrixReadOnly および DOMMatrix のシリアル化手順は、value と serialized が与えられた場合：

value の is 2D が true の場合：
1. serialized.[[M11]] に value の m11要素を設定する。
2. serialized.[[M12]] に value の m12要素を設定する。
3. serialized.[[M21]] に value の m21要素を設定する。
4. serialized.[[M22]] に value の m22要素を設定する。
5. serialized.[[M41]] に value の m41要素を設定する。
6. serialized.[[M42]] に value の m42要素を設定する。
7. serialized.[[Is2D]] に true を設定する。
※ 2Dの DOMMatrix や DOMMatrixReadOnly の場合、一部の要素(例:m13要素)で -0 を持つ可能性がありますが、このアルゴリズムではラウンドトリップされません。
それ以外の場合：
1. serialized.[[M11]] に value の m11要素を設定する。
2. serialized.[[M12]] に value の m12要素を設定する。
3. serialized.[[M13]] に value の m13要素を設定する。
4. serialized.[[M14]] に value の m14要素を設定する。
5. serialized.[[M21]] に value の m21要素を設定する。
6. serialized.[[M22]] に value の m22要素を設定する。
7. serialized.[[M23]] に value の m23要素を設定する。
8. serialized.[[M24]] に value の m24要素を設定する。
9. serialized.[[M31]] に value の m31要素を設定する。
10. serialized.[[M32]] に value の m32要素を設定する。
11. serialized.[[M33]] に value の m33要素を設定する。
12. serialized.[[M34]] に value の m34要素を設定する。
13. serialized.[[M41]] に value の m41要素を設定する。
14. serialized.[[M42]] に value の m42要素を設定する。
15. serialized.[[M43]] に value の m43要素を設定する。
16. serialized.[[M44]] に value の m44要素を設定する。
17. serialized.[[Is2D]] に false を設定する。
これらの逆シリアル化手順は、serialized および value が与えられた場合：
1. serialized.[[Is2D]] が true の場合：
  1. value の m11要素に serialized.[[M11]] を設定する。
  2. value の m12要素に serialized.[[M12]] を設定する。
  3. value の m13要素に 0 を設定する。
  4. value の m14要素に 0 を設定する。
  5. value の m21要素に serialized.[[M21]] を設定する。
  6. value の m22要素に serialized.[[M22]] を設定する。
  7. value の m23要素に 0 を設定する。
  8. value の m24要素に 0 を設定する。
  9. value の m31要素に 0 を設定する。
  10. value の m32要素に 0 を設定する。
  11. value の m33要素に 1 を設定する。
  12. value の m34要素に 0 を設定する。
  13. value の m41要素に serialized.[[M41]] を設定する。
  14. value の m42要素に serialized.[[M42]] を設定する。
  15. value の m43要素に 0 を設定する。
  16. value の m44要素に 1 を設定する。
  17. value の is 2D に true を設定する。
2. それ以外の場合：
  1. value の m11要素に serialized.[[M11]] を設定する。
  2. value の m12要素に serialized.[[M12]] を設定する。
  3. value の m13要素に serialized.[[M13]] を設定する。
  4. value の m14要素に serialized.[[M14]] を設定する。
  5. value の m21要素に serialized.[[M21]] を設定する。
  6. value の m22要素に serialized.[[M22]] を設定する。
  7. value の m23要素に serialized.[[M23]] を設定する。
  8. value の m24要素に serialized.[[M24]] を設定する。
  9. value の m31要素に serialized.[[M31]] を設定する。
  10. value の m32要素に serialized.[[M32]] を設定する。
  11. value の m33要素に serialized.[[M33]] を設定する。
  12. value の m34要素に serialized.[[M34]] を設定する。
  13. value の m41要素に serialized.[[M41]] を設定する。
  14. value の m42要素に serialized.[[M42]] を設定する。
  15. value の m43要素に serialized.[[M43]] を設定する。
  16. value の m44要素に serialized.[[M44]] を設定する。
  17. value の is 2D に false を設定する。

テスト

structured-serialization.html （ライブテスト）（ソース）

8. セキュリティの考慮事項

DOMMatrix および DOMMatrixReadOnly インターフェイスは、CSS 構文による文字列のパースへのエントリーポイントを持ちます。したがって、CSS 構文仕様のセキュリティに関する考慮事項が適用されます。[CSS3-SYNTAX]

これは、ユーザーエージェントの CSS パーサーのバグを悪用するために使われる可能性があります。

この仕様で定義されているインターフェイスには、他に既知のセキュリティまたはプライバシーへの影響はありません。しかし、この仕様で定義されたインターフェイスを使用する API を持つ他の仕様は、セキュリティまたはプライバシーの問題を引き起こす可能性があります。

9. プライバシーの考慮事項

例えば、CSSOM View で定義された getBoundingClientRect() API は、DOMRect を返し、特定のフォントのテキストを含むインライン要素のサイズを測定するために使用できます。これはユーザーがそのフォントをインストールしているかどうかについての情報を露呈します。その情報は、一般的なフォントを多数テストすることで、個人を特定できる情報となり得ます。[CSSOM-VIEW]

10. 歴史的事項

このセクションは規範的ではありません。

この仕様のインターフェイスは、過去の各種仕様で見られた同様のインターフェイスや、いくつかのユーザーエージェントで見られる独自のインターフェイスを置き換えることを意図しています。本セクションではそれらのインターフェイスを列挙しようとします。

10.1. CSSOM View

CSSOM View の以前の版では ClientRect インターフェイスが定義されていましたが、これは DOMRect に置き換えられました。本仕様に準拠する実装は ClientRect をサポートしません。[CSSOM-VIEW]

10.2. SVG

SVG の以前の版では、SVGPoint、SVGRect、SVGMatrix が定義されており、これは本仕様においてそれぞれ DOMPoint、DOMRect、DOMMatrix のエイリアスとして定義されています。[SVG11]

10.3. 非標準

一部のユーザーエージェントは WebKitPoint インターフェイスをサポートしていました。本仕様に準拠する実装は WebKitPoint をサポートしません。

複数のユーザーエージェントは WebKitCSSMatrix インターフェイスをサポートしており、これは Web で広く使用されています。本仕様では、DOMMatrix のエイリアスとして定義されています。

一部のユーザーエージェントは MSCSSMatrix インターフェイスをサポートしていました。本仕様に準拠する実装は MSCSSMatrix をサポートしません。

Tests

historical.html (live test) (source)

文書上の慣習

空ではない unrestricted double 値のリストに対する NaN を優先する最小値は、リストのいずれかのメンバーが NaN の場合は NaN、そうでなければそのリストの最小値です。

同様に、空ではない unrestricted double 値のリストに対する NaN を優先する最大値は、リストのいずれかのメンバーが NaN の場合は NaN、そうでなければそのリストの最大値です。

前回の公開以降の変更点

このセクションは規範的ではありません。

2018 年 12 月 4 日の候補勧告以降に行われた変更は次の通りです。

列ベクトルが行列によって前乗されることを明確化 #294、#359
最小値と最大値を NaN を優先するように定義 #222
新しい WebIDL コンストラクター定義を使用
辞書のデフォルト値を追加
本文の記述に合わせて matrixTransform に [NewObject] を追加
冗長な originZ チェックを削除 #350
DOMRectList に明示的な [Exposed] を追加
Web Platform Tests のカバレッジを追加

2014 年 11 月 25 日の候補勧告以降に行われた変更は次の通りです。

コンストラクションにおいて、過負荷コンストラクターの代わりに一般に特定の静的操作を使用するようインターフェイスを変更し、インターフェイスをより一貫性のあるものにしました。ただし、DOMMatrix は WebKitCSSMatrix との互換性のために過負荷コンストラクターを引き続き使用します。
DOMMatrixInit 辞書を導入。
インターフェイスに JSON シリアライザーを追加。
DOMMatrixReadOnly と DOMMatrix を WebKitCSSMatrix に互換的にするため：
- rotate() と rotateSelf() の引数を (angle, originX, originY) から (rotX, rotY, rotZ) に変更。
- scale() および scaleSelf() メソッドを、従来の scaleNonUniform()/scaleNonUniformSelf() メソッドにより近いものに変更し、scaleNonUniformSelf() メソッドを廃止。レガシーのために scaleNonUniform() のサポートは維持。
- DOMMatrix/DOMMatrixReadOnly の各メソッドで、setMatrixValue() を除き、すべての引数をオプション化。
- 引数なしのコンストラクターを追加。
- WebKitCSSMatrix を DOMMatrix のレガシーなウィンドウエイリアスとして定義。
Worker では、DOMMatrix と DOMMatrixReadOnly は CSS 構文によるパースや文字列化をサポートしません。
インターフェイスの構造化シリアル化を定義。
DOMQuad のライブな bounds 属性を、非ライブな getBounds() メソッドへ置換。併せて「関連するバウンディング矩形」の概念を削除。
DOMMatrix および DOMMatrixReadOnly の文字列パーサーを、SVG の規則ではなく CSS の規則を用いるように変更。
DOMMatrix および DOMMatrixReadOnly の文字列化は、非有限値がある場合に例外を投げ、それ以外の場合は ToString アルゴリズムを使用するように変更。[ECMA-262]
比較において、0 と -0 を全体で等価として扱うように変更。
§ 9 プライバシーの考慮事項と § 10 歴史的事項のセクションを追加。

2014 年 9 月 18 日の作業草案以降に行われた変更は次の通りです。

DOMPointReadOnly、 DOMPoint、 DOMRectReadOnly、 DOMRect、 DOMQuad、 DOMMatrixReadOnly および DOMMatrix を Window と Worker に公開。インターフェイスのクローンを定義。

2014 年 6 月 26 日の最終コール公開作業草案以降に行われた変更は次の通りです。

DOMPointReadOnly は 4 つの引数を取るコンストラクターを得ました。
DOMRectReadOnly は 4 つの引数を取るコンストラクターを得ました。
DOMMatrixReadOnly は数値のシーケンスを引数に取るコンストラクターを得ました。
DOMRectList は ArrayClass に変更。インターフェイスはレガシーインターフェイスにのみ使用可能。
DOMRectList をブラウザーからのフィードバック待ちのリスク対象に。
すべてのインターフェイスについて、読み取り専用/書き込み可能や継承の挙動を説明するため、内部要素の観点で記述。
IndexSizeError 例外を TypeError 例外に置き換え。

2014 年 5 月 22 日の初版公開作業草案以降に行われた変更は次の通りです。

可変変換メソッドの *By を *Self に改名。（例：translateBy() は translateSelf() に改名。）
invert() を invertSelf() に改名。
変換リストを DOMString として受け取る setMatrixValue() を追加。
is2D および isIdentity は読み取り専用属性に。
DOMMatrixReadOnly は、is2D のために 3D 変換と属性設定を追跡するフラグを取得。
invertSelf() および inverse() は例外を投げなくなりました。

謝辞

編集者は、本仕様への貢献に対して Robert O’Callahan に感謝いたします。 DOMMatrix の初期提案に対して Dean Jackson に多大な感謝を捧げます。また、 Adenilson Cavalcanti、 Benoit Jacob、 Boris Zbarsky、 Brian Birtles、 Cameron McCormack、 Domenic Denicola、 Kari Pihkala、 Max Vujovic、 Mike Taylor、 Peter Hall、 Philip Jägenstedt、 Simon Fraser、および Timothy Loh の綿密なレビュー、コメント、修正に感謝します。

適合性

文書の慣例

適合要件は説明的な断言とRFC 2119の用語を組み合わせて表現されます。規範的な記述中の "MUST"、 "MUST NOT"、"REQUIRED"、"SHALL"、"SHALL NOT"、"SHOULD"、"SHOULD NOT"、"RECOMMENDED"、 "MAY"、"OPTIONAL" という重要語はRFC 2119の記述通りに解釈されます。ただし、可読性のため本仕様書ではこれらの語は全て大文字ではありません。

この仕様の本文は、明示的に非規範と記された箇所、例、注以外すべてが規範的です。[RFC2119]

この仕様書の例は「例えば」で始まるか、class="example" のような形式で規範文から区別して示されます：

情報としての注記は「注」で始まり、class="note" のように規範文から分離して示します：

助言は規範的な節で、特別な注意を喚起するために <strong class="advisement"> で装飾され、次のように示します： UAはアクセシブルな代替手段を提供しなければなりません。

適合クラス

この仕様への適合性は、次の３つの適合クラスで定義されます：

スタイルシートが本仕様に適合するのは、本モジュールで定義される文法を使用するすべてのステートメントが、汎用CSS文法と本モジュール各機能の文法に沿って有効な場合です。

レンダラーが本仕様に適合するのは、適切な仕様により定義された通りにスタイルシートを解釈するだけでなく、本仕様で定義されたすべての機能を正しくパースし、文書をそれに応じてレンダリングする場合です。ただし、UAがデバイスの制限のため文書を正しくレンダリングできないとしても、適合性が失われるわけではありません（例えば、UAはモノクロモニターで色を描画する必要はありません）。

オーサリングツールが本仕様に適合するのは、汎用CSS文法と各機能の文法に従って書かれた構文的に正しいスタイルシートを書き出し、本モジュール中で記述されたその他すべてのスタイルシート適合要件を満たす場合です。

部分実装

著者が将来的な互換性のあるパースルールを利用してフォールバック値を指定できるよう、CSSレンダラーは、サポートできるレベルに達していないat-規則、プロパティ、プロパティ値、キーワード、その他構文要素を無効として（適切に無視）、扱う必要があります。特に、ユーザーエージェントは複数値プロパティ宣言において未サポートの値を個別に無視してサポートされている値だけを適用してはなりません：いずれかの値が無効（サポートされていない値は必ず無効）なら、CSSは宣言全体が無視されることを要求します。

不安定および独自機能の実装

非実験的な実装

仕様が候補勧告（CR）段階に到達すると、非実験的な実装が可能となり、実装者は仕様通りに正しく実装できたCRレベル機能について、プレフィックス無し実装をリリースすべきです。

CSS実装間の相互運用性の確保と維持のため、CSS WGは非実験的なCSSレンダラーに対し、CSS機能についてプレフィックス無し実装をリリースする前に、実装報告書（必要に応じてそのテストケース）をW3Cに提出することを要請します。W3Cに提出されたテストケースはCSS WGによるレビューと校正の対象になります。

CR脱却基準

この仕様が提案勧告（PR）に進むには、各機能について少なくとも2つの独立した、相互運用可能な実装が必要です。各機能は別々の製品が実装してもよく、すべての機能が単一製品で実装されている必要はありません。基準のため、以下の用語を定義します：

ジオメトリインターフェイスモジュールレベル1

概要

この文書のステータス

1. 導入

2. DOMPoint インターフェイス

2.1. 点を行列で変換

3. DOMRect インターフェイス

4. DOMRectList インターフェイス

5. DOMQuad インターフェイス

6. DOMMatrix インターフェイス

6.1. DOMMatrix2DInit および DOMMatrixInit 辞書

6.2. 文字列から抽象行列へのパース

6.3. DOMMatrixReadOnly と DOMMatrix オブジェクトの作成

6.4. DOMMatrix の属性

6.5. 不変変換メソッド

6.6. 可変変換メソッド

7. 構造化シリアル化

8. セキュリティの考慮事項

9. プライバシーの考慮事項

10. 歴史的事項

10.1. CSSOM View

10.2. SVG

10.3. 非標準

文書上の慣習

前回の公開以降の変更点

謝辞

適合性

文書の慣例

適合クラス

部分実装

不安定および独自機能の実装

非実験的な実装

CR脱却基準

索引

この仕様で定義される用語

参照で定義される用語

参考文献

規範的参考文献

情報参考文献

IDL索引

ジオメトリインターフェイスモジュール レベル1

概要

この文書のステータス

1. 導入

2. DOMPoint インターフェイス

2.1. 点を行列で変換

3. DOMRect インターフェイス

4. DOMRectList インターフェイス

5. DOMQuad インターフェイス

6. DOMMatrix インターフェイス

6.1. DOMMatrix2DInit および DOMMatrixInit 辞書

6.2. 文字列から抽象行列へのパース

6.3. DOMMatrixReadOnly と DOMMatrix オブジェクトの作成

6.4. DOMMatrix の属性

6.5. 不変変換メソッド

6.6. 可変変換メソッド

7. 構造化シリアル化

8. セキュリティの考慮事項

9. プライバシーの考慮事項

10. 歴史的事項

10.1. CSSOM View

10.2. SVG

10.3. 非標準

文書上の慣習

前回の公開以降の変更点

謝辞

適合性

文書の慣例

適合クラス

部分実装

不安定および独自機能の実装

非実験的な実装

CR脱却基準

索引

この仕様で定義される用語

参照で定義される用語

参考文献

規範的参考文献

情報参考文献

IDL索引

ジオメトリインターフェイスモジュールレベル1