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

1. はじめに

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

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

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

2. DOMPoint インターフェイス

2D または 3D の点は、以下の WebIDL インターフェイスで表現できます:

[Constructor(optional unrestricted double x = 0, optional unrestricted double y = 0,
             optional unrestricted double z = 0, optional unrestricted double w = 1),
 Exposed=(Window,Worker),
 Serializable]
interface DOMPointReadOnly {
    [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;

    DOMPoint matrixTransform(optional DOMMatrixInit matrix);

    [Default] object toJSON();
};

[Constructor(optional unrestricted double x = 0, optional unrestricted double y = 0,
             optional unrestricted double z = 0, optional unrestricted double w = 1),
 Exposed=(Window,Worker),
 Serializable,
 LegacyWindowAlias=SVGPoint]
interface DOMPoint : DOMPointReadOnly {
    [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 を返します。

fromPoint(other) 静的メソッドは DOMPointReadOnly 上で引数 other から辞書から DOMPointReadOnly を作る必要があります。

fromPoint(other) 静的メソッドは DOMPoint 上で引数 other から辞書から DOMPoint を作る必要があります。

辞書 other から DOMPointReadOnly を作成する、または辞書 other から DOMPoint を作成するために、次の手順に従います:

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 を辞書 matrix から DOMMatrix を作成するを呼び出した結果とします。
現在の点と 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 になります。

2.1. 行列による点の変換

点 point を行列 matrix で変換する（行列で点を変換する）には、与えられた 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 によって後掛け（post-multiplied）します。
transformedPoint を新しい DOMPoint オブジェクトとします。
transformedPoint の x 座標を pointVector の最初の要素に設定します。
transformedPoint の y 座標を pointVector の2番目の要素に設定します。
transformedPoint の z 座標を pointVector の3番目の要素に設定します。
transformedPoint の w 透視を pointVector の4番目の要素に設定します。
transformedPoint を返します。

注: もし matrix の is 2D が真、point の z 座標が 0 または -0 であり、point の w 透視が 1 であれば、これは 2D 変換です。そうでなければ 3D 変換です。

3. DOMRect インターフェイス

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

矩形は次の性質を持ちます:

原点: 矩形の幅が非負のとき、矩形の水平方向の原点は左端です。そうでない場合は右端になります。同様に、矩形の高さが非負のとき、垂直方向の原点は上端です。そうでない場合は下端になります。
x 座標: ビューポートの左端と矩形の原点との水平方向の距離。
y 座標: ビューポートの上端と矩形の原点との垂直方向の距離。
幅（width）: 矩形の幅。負の値になり得ます。
高さ（height）: 矩形の高さ。負の値になり得ます。

[Constructor(optional unrestricted double x = 0, optional unrestricted double y = 0,
             optional unrestricted double width = 0, optional unrestricted double height = 0),
 Exposed=(Window,Worker),
 Serializable]
interface DOMRectReadOnly {
    [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();
};

[Constructor(optional unrestricted double x = 0, optional unrestricted double y = 0,
             optional unrestricted double width = 0, optional unrestricted double height = 0),
 Exposed=(Window,Worker),
 Serializable,
 LegacyWindowAlias=SVGRect]
interface DOMRect : DOMRectReadOnly {
    [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 を返します。

fromRect(other) 静的メソッドは DOMRectReadOnly 上で引数 other から辞書から DOMRectReadOnly を作成する必要があります。

fromRect(other) 静的メソッドは DOMRect 上で引数 other から辞書から DOMRect を作成する必要があります。

辞書 other から DOMRectReadOnly を作成する、または辞書 other から DOMRect を作成するために、次の手順に従います:

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 属性の取得は min(y 座標, y 座標 + 高さ) を返さなければなりません。

right 属性の取得は max(x 座標, x 座標 + 幅) を返さなければなりません。

bottom 属性の取得は max(y 座標, y 座標 + 高さ) を返さなければなりません。

left 属性の取得は min(x 座標, x 座標 + 幅) を返さなければなりません。

4. DOMRectList インターフェイス

interface DOMRectList {
    readonly attribute unsigned long length;
    getter DOMRect? item(unsigned long index);
};

length 属性は、そのオブジェクトに関連付けられている DOMRect オブジェクトの総数を返さなければなりません。

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

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

5. DOMQuad インターフェイス

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

[Constructor(optional DOMPointInit p1, optional DOMPointInit p2,
             optional DOMPointInit p3, optional DOMPointInit p4),
 Exposed=(Window,Worker),
 Serializable]
interface DOMQuad {
    [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 オブジェクトが内部メンバー変数として point 1、point 2、point 3、および point 4 を持ち、これらは DOMPoint オブジェクトであると仮定しています。DOMQuad は、これらの変数の値にアクセスし設定できなければなりません。作成者はこれらの DOMPoint オブジェクトを変更でき、それにより四辺形が直接影響を受けます。

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

内部メンバー変数はどのような方法でも露出してはなりません。

DOMQuad(p1, p2, p3, p4) コンストラクタは、呼び出されたときに次の手順を実行しなければなりません:

point1 を、p1 の同名の辞書メンバーの値で属性が設定された新しい DOMPoint オブジェクトとします。
point2 を、p2 の同名の辞書メンバーの値で属性が設定された新しい DOMPoint オブジェクトとします。
point3 を、p3 の同名の辞書メンバーの値で属性が設定された新しい DOMPoint オブジェクトとします。
point4 を、p4 の同名の辞書メンバーの値で属性が設定された新しい DOMPoint オブジェクトとします。
point1 を point 1 に、point2 を point 2 に、point3 を point 3 に、point4 を point 4 に設定した新しい DOMQuad を返します。

注: DOMPoint／DOMPointReadOnly 型の引数を渡すことも可能です。渡された引数は WebIDL の規則に従って内部的に正しいオブジェクト型に変換されます。 [WEBIDL]

fromRect(other) 静的メソッドは DOMQuad 上で引数 other の DOMRectInit 辞書から DOMQuad を作成する必要があります。

DOMRectInit 辞書 other から DOMQuad を作成するには、次の手順に従います:

x, y, width および height を、それぞれ other の辞書メンバー 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 に設定します。
上記の point1〜point4 をそれぞれ point 1、point 2、point 3、point 4 に設定した新しい DOMQuad を返します。

fromQuad(other) 静的メソッドは DOMQuad 上で引数 other の DOMQuadInit 辞書から DOMQuad を作成する必要があります。

DOMQuadInit 辞書 other から DOMQuad を作成するには次の手順に従います:

point1 を、もし存在すれば other の辞書メンバー p1 に対して辞書から DOMPoint を作成するを呼び出した結果とします。
point2 を、もし存在すれば other の辞書メンバー p2 に対して辞書から DOMPoint を作成するを呼び出した結果とします。
point3 を、もし存在すれば other の辞書メンバー p3 に対して辞書から DOMPoint を作成するを呼び出した結果とします。
point4 を、もし存在すれば other の辞書メンバー p4 に対して辞書から DOMPoint を作成するを呼び出した結果とします。
これらの point1〜point4 を point 1〜point 4 に設定した新しい DOMQuad を返します。

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

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

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

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

getBounds() メソッドは、呼び出されたときに次のアルゴリズムを実行しなければなりません:

bounds を DOMRect オブジェクトとします。
left を、point 1 の x 座標、point 2 の x 座標、point 3 の x 座標、および point 4 の x 座標の最小値とします。
top を、point 1 の y 座標、point 2 の y 座標、point 3 の y 座標、および point 4 の y 座標の最小値とします。
right を、point 1 の x 座標、point 2 の x 座標、point 3 の x 座標、および point 4 の x 座標の最大値とします。
bottom を、point 1 の y 座標、point 2 の y 座標、point 3 の y 座標、および point 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 で表現したものです。4つの赤い円は DOMPoint 属性の p1 から p4 を表します。破線の矩形は getBounds() メソッドが返す境界矩形を表しています。

6. DOMMatrix インターフェイス

The DOMMatrix and DOMMatrixReadOnly インターフェイスはそれぞれ、グラフィカルな文脈での変換を記述する目的で数学的な matrix を表します。以下の節ではインターフェイスの詳細を説明します。

[\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}]

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

以下の節では、用語は次の意味を持ちます:

post-multiply: 項 A を項 B に後ろ掛けする（post-multiply）とは、A · B に等しいことを意味します。
pre-multiply: 項 A を項 B に前掛けする（pre-multiply）とは、B · A に等しいことを意味します。
multiply: 項 A を項 B で乗算する（Multiply）とは、A · B に等しいことを意味します。

[Constructor(optional (DOMString or sequence<unrestricted double>) init),
 Exposed=(Window,Worker),
 Serializable]
interface DOMMatrixReadOnly {
    [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();
};

[Constructor(optional (DOMString or sequence<unrestricted double>) init),
 Exposed=(Window,Worker),
 Serializable,
 LegacyWindowAlias=(SVGMatrix,WebKitCSSMatrix)]
interface DOMMatrix : DOMMatrixReadOnly {
    [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 element, m12 element, m13 element, m14 element, m21 element, m22 element, m23 element, m24 element, m31 element, m32 element, m33 element, m34 element, m41 element, m42 element, m43 element, m44 element と is 2D を持つものと仮定します。DOMMatrixReadOnly および継承インターフェイスである DOMMatrix は、これらの変数の値にアクセスし、設定できなければなりません。

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

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

DOMMatrix と DOMMatrixReadOnly インターフェイスは、SVG の SVGMatrix インターフェイスに代わるものです。 [SVG11]

6.1. DOMMatrix2DInit および DOMMatrixInit 辞書

DOMMatrix2DInit または DOMMatrixInit 辞書 dict を検証および修正（2D）するために、次の手順を実行します:

もし 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 比較アルゴリズムは、2つの NaN 値に対して true を返し、また 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)" に設定します。
Parse を用いて文法として CSS の transform プロパティの文法に従い transformList を parsedValue に解析します。結果は <transform-list>、キーワード none、または失敗になります。もし parsedValue が失敗であるか、または任意の <transform-function> が <length> 値を持ち、かつそれが絶対長さ単位を持たない場合、あるいは none 以外のキーワードが使用されている場合、失敗を返します。 [CSS3-SYNTAX] [CSS3-TRANSFORMS]
もし parsedValue が none であれば、parsedValue を単一の恒等行列を含む <transform-list> に設定します。
parsedValue の 2D/3D 次元状態を追跡するために 2dTransform を用意します。

もし parsedValue が任意の 3 次元変換関数を含む場合

2dTransform を false に設定します。

それ以外の場合

2dTransform を true に設定します。
全ての <transform-function> を、"変換関数の数学的記述" に従って 4x4 抽象行列に変換します。 [CSS3-TRANSFORMS]
matrix をこの節冒頭の図に示されたような 4x4 抽象行列とします。左から右へすべての行列を後ろ掛け（post-multiply）し、その積を matrix に設定します。
matrix と 2dTransform を返します。

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

6 要素の列 init を用いて、型 type が DOMMatrixReadOnly または DOMMatrix のいずれかであるときに、2D 行列を作成するには次の手順に従います:

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 を返します。

型 type が DOMMatrixReadOnly または DOMMatrix であり、16 要素の列 init に対して 3D 行列を作成するには次の手順に従います:

matrix を type の新しいインスタンスとします。
m11 要素から m44 要素を、列優先（column-major）順で init の値に設定します。
is 2D を false に設定します。
matrix を返します。

DOMMatrixReadOnly(init) および DOMMatrix(init) コンストラクタは、次の手順に従わなければなりません:

もし init が省略されている場合

適切な型（DOMMatrixReadOnly または DOMMatrix）の create a 2d matrix を、列 [1, 0, 0, 1, 0, 0] で呼び出した結果を返します。

もし init が DOMString の場合

もし現在のグローバルオブジェクトが Window オブジェクトでないなら、TypeError 例外を投げます。
Parse init into an abstract matrix を実行し、その結果を matrix と 2dTransform に格納します。もし結果が失敗であれば、"SyntaxError" DOMException を投げます。
もし 2dTransform が true の場合

適切な型の create a 2d matrix を、DOMMatrixReadOnly または DOMMatrix に対して呼び出し、引数として matrix の要素 m11, m12, m21, m22, m41, m42 を与えて、その結果を返します。

それ以外

適切な型の create a 3d matrix を、DOMMatrixReadOnly または DOMMatrix に対して呼び出し、引数として matrix の 16 要素を与えて、その結果を返します。

もし init が 6 要素の列である場合

適切な型の create a 2d matrix を DOMMatrixReadOnly または DOMMatrix に対して呼び出し、引数として列 init を与えた結果を返します。

もし init が 16 要素の列である場合

適切な型の create a 3d matrix を DOMMatrixReadOnly または DOMMatrix に対して呼び出し、引数として列 init を与えた結果を返します。

それ以外

TypeError 例外を投げます。

fromMatrix(other) 静的メソッドは、DOMMatrixReadOnly に対して辞書 other から DOMMatrixReadOnly を作成するを実行しなければなりません。

fromMatrix(other) 静的メソッドは、DOMMatrix に対して辞書 other から DOMMatrix を作成するを実行しなければなりません。

2D 辞書から DOMMatrixReadOnly を作成する other、または 2D 辞書から DOMMatrix を作成するために手順に従います:

Validate and fixup (2D) を other に対して実行します。
適切な型の create a 2d matrix を呼び出し、引数として other の 6 要素 m11, m12, m21, m22, m41 および m42 を与え、その結果を返します。

辞書 other から DOMMatrixReadOnly を作成する（または辞書から DOMMatrix を作成する）には、次の手順に従います:

Validate and fixup を other に対して実行します。
もし other の辞書メンバー is2D が true の場合

適切な型の create a 2d matrix を呼び出し、引数として other の 6 要素 m11, m12, m21, m22, m41 および m42 を与え、その結果を返します。

それ以外

適切な型の create a 3d matrix を呼び出し、引数として other の 16 要素（m11, m12, m13, ..., m44）を与え、その結果を返します。

fromFloat32Array(array32) 静的メソッドは、DOMMatrixReadOnly および fromFloat32Array(array32)（DOMMatrix）は次の手順に従わなければなりません:

もし array32 の長さが 6 要素なら: 適切な型の create a 2d matrix を呼び出し、引数として array32 の値をその順で与えた結果を返します（型は DOMMatrixReadOnly または DOMMatrix のいずれか適切なもの）。
もし array32 の長さが 16 要素なら: 適切な型の create a 3d matrix を呼び出し、引数として array32 の値をその順で与えた結果を返します（型は DOMMatrixReadOnly または DOMMatrix のいずれか適切なもの）。
それ以外: TypeError 例外を投げます。

fromFloat64Array(array64) 静的メソッドは、DOMMatrixReadOnly および fromFloat64Array(array64)（DOMMatrix）は次の手順に従わなければなりません:

もし array64 の長さが 6 要素なら: 適切な型の create a 2d matrix を呼び出し、引数として array64 の値をその順で与えた結果を返します（型は DOMMatrixReadOnly または DOMMatrix のいずれか適切なもの）。
もし array64 の長さが 16 要素なら: 適切な型の create a 3d matrix を呼び出し、引数として array64 の値をその順で与えた結果を返します（型は DOMMatrixReadOnly または DOMMatrix のいずれか適切なもの）。
それ以外: TypeError 例外を投げます。

6.4. DOMMatrix 属性

次の属性 m11 から m44 は、行列インターフェイスの16個の要素に対応します。

m11 と a 属性は、取得時に m11 element の値を返さなければなりません。DOMMatrix インターフェイスでは、m11 または a 属性の設定は、m11 element を新しい値に設定しなければなりません。

m12 と b 属性は、取得時に m12 element の値を返さなければなりません。DOMMatrix インターフェイスでは、m12 または b 属性の設定は、m12 element を新しい値に設定しなければなりません。

m13 属性は、取得時に m13 element の値を返さなければなりません。DOMMatrix インターフェイスでは、m13 属性の設定は、m13 element を新しい値に設定し、もし新しい値が 0 または -0 でない場合は is 2D を false に設定しなければなりません。

m14 属性は、取得時に m14 element の値を返さなければなりません。DOMMatrix インターフェイスでは、m14 属性の設定は、m14 element を新しい値に設定し、もし新しい値が 0 または -0 でない場合は is 2D を false に設定しなければなりません。

m21 と c 属性は、取得時に m21 element の値を返さなければなりません。DOMMatrix インターフェイスでは、m21 または c 属性の設定は、m21 element を新しい値に設定しなければなりません。

m22 と d 属性は、取得時に m22 element の値を返さなければなりません。DOMMatrix インターフェイスでは、m22 または d 属性の設定は、m22 element を新しい値に設定しなければなりません。

m23 属性は、取得時に m23 element の値を返さなければなりません。DOMMatrix インターフェイスでは、m23 属性の設定は、m23 element を新しい値に設定し、もし新しい値が 0 または -0 でない場合は is 2D を false に設定しなければなりません。

m24 属性は、取得時に m24 element の値を返さなければなりません。DOMMatrix インターフェイスでは、m24 属性の設定は、m24 element を新しい値に設定し、もし新しい値が 0 または -0 でない場合は is 2D を false に設定しなければなりません。

m31 属性は、取得時に m31 element の値を返さなければなりません。DOMMatrix インターフェイスでは、m31 属性の設定は、m31 element を新しい値に設定し、もし新しい値が 0 または -0 でない場合は is 2D を false に設定しなければなりません。

m32 属性は、取得時に m32 element の値を返さなければなりません。DOMMatrix インターフェイスでは、m32 属性の設定は、m32 element を新しい値に設定し、もし新しい値が 0 または -0 でない場合は is 2D を false に設定しなければなりません。

m33 属性は、取得時に m33 element の値を返さなければなりません。DOMMatrix インターフェイスでは、m33 属性の設定は、m33 element を新しい値に設定し、もし新しい値が 1 でない場合は is 2D を false に設定しなければなりません。

m34 属性は、取得時に m34 element の値を返さなければなりません。DOMMatrix インターフェイスでは、m34 属性の設定は、m34 element を新しい値に設定し、もし新しい値が 0 または -0 でない場合は is 2D を false に設定しなければなりません。

m41 と e 属性は、取得時に m41 element の値を返さなければなりません。DOMMatrix インターフェイスでは、m41 または e 属性の設定は、m41 element を新しい値に設定しなければなりません。

m42 と f 属性は、取得時に m42 element の値を返さなければなりません。DOMMatrix インターフェイスでは、m42 または f 属性の設定は、m42 element を新しい値に設定しなければなりません。

m43 属性は、取得時に m43 element の値を返さなければなりません。DOMMatrix インターフェイスでは、m43 属性の設定は、m43 element を新しい値に設定し、もし新しい値が 0 または -0 でない場合は is 2D を false に設定しなければなりません。

m44 属性は、取得時に m44 element の値を返さなければなりません。DOMMatrix インターフェイスでは、m44 属性の設定は、m44 element を新しい値に設定し、もし新しい値が 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 element, m13 element, m14 element, m21 element, m23 element, m24 element, m31 element, m32 element, m34 element, m41 element, m42 element, m43 element が 0 または -0 であり、かつ m11 element, m22 element, m33 element, m44 element が 1 である場合は true を返し、それ以外は false を返さなければなりません。

すべての DOMMatrixReadOnly オブジェクトには、ブール値の is 2D フラグが設定されていなければなりません。このフラグは次を示します:

現在の行列が2D 行列として初期化されたこと。詳細は個別の作成手順を参照してください。
適用された変換操作は2D のみであること。各可変または不変の変換メソッドは is 2D を false に設定すべきかを定義します。

注: Is 2D は、一度 false に設定された後、例外的に DOMMatrix オブジェクト上で再び true に設定されることはありません。ただし setMatrixValue() メソッドを呼び出した場合は例外です。

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 と互換性を保つためにサポートされています（[SVG11]）。作者は代わりに 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 を現在の行列の値で初期化した結果行列とします。
result に対して引数 sx で skewXSelf() 変換を実行します。
result を返します。

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

skewY(sy)

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

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

multiply(other)

result を現在の行列の値で初期化した結果行列とします。
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 を辞書 point から DOMPoint を作成するの結果とします。現在の行列と与えられた pointObject を用いて行列で点を変換するを実行した結果を返します。渡された引数は変更されません。

toFloat32Array()

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

toFloat64Array()

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

文字列化の振る舞い

もし m11 element から m44 element のいずれかが非有限値であれば、"InvalidStateError" DOMException をスローします。

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

この例では、行列を作成し、いくつかの 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);

Note: チェーンされたメソッド呼び出しを使用する作者は、ユーザーエージェント内で中間の DOMMatrix オブジェクトが生成されることで不要なメモリ割当が発生するのを避けるため、可変な変換メソッドを使用することが推奨されます。

multiplySelf(other)

otherObject を辞書 other から DOMMatrix を作成するを呼び出した結果とします。
otherObject 行列を現在の行列に後ろ掛けします。
もし is 2D が otherObject の場合に false であれば、現在の行列の is 2D を false に設定します。
現在の行列を返します。

preMultiplySelf(other)

otherObject を辞書 other から DOMMatrix を作成するを呼び出した結果とします。
otherObject 行列を現在の行列に前掛けします。
もし is 2D が otherObject の場合に false であれば、現在の行列の is 2D を false に設定します。
現在の行列を返します。

translateSelf(tx, ty, tz)

後ろ掛けによって現在の行列に平行移動変換を適用します。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 の値を設定します。
後ろ掛けによって現在の行列に非一様スケール変換を適用します。3D スケール行列は CSS Transforms に記述されており、sx=scaleX, sy=scaleY, sz=scaleZ です。 [CSS3-TRANSFORMS]
originX, originY, originZ を negation（符号反転）します。
引数 originX, originY, originZ で再度 translateSelf() を実行します。
もし scaleZ が 1 でないか、あるいは originZ が 0 または -0 でない場合、現在の行列の 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 に記述されています。 [CSS3-TRANSFORMS]
後ろ掛けによって、ベクトル 0,1,0 の周りに指定された角度 rotY（度）で回転変換を現在の行列に適用します。3D 回転行列は CSS Transforms に記述されています。 [CSS3-TRANSFORMS]
後ろ掛けによって、ベクトル 1,0,0 の周りに指定された角度 rotX（度）で回転変換を現在の行列に適用します。3D 回転行列は CSS Transforms に記述されています。 [CSS3-TRANSFORMS]
現在の行列を返します。

rotateFromVectorSelf(x, y)

後ろ掛けによって現在の行列に回転変換を適用します。回転角はベクトル (1,0)^T と (x,y)^T の間の角（時計回り）から求められます。もし x と y が両方とも 0 または -0 であるべき場合、角は 0 に指定されます。2D 回転行列は CSS Transforms に記述されており、alpha は (1,0)^T と (x,y)^T の間の角（度）です。 [CSS3-TRANSFORMS]
現在の行列を返します。

rotateAxisAngleSelf(x, y, z, angle)

後ろ掛けによって、指定されたベクトル x, y, z の周りに指定された角度 angle（度）で回転変換を現在の行列に適用します。3D 回転行列は CSS Transforms に記述されています。 [CSS3-TRANSFORMS]
もし x または y が 0 または -0 でない場合、現在の行列の is 2D を false に設定します。
現在の行列を返します。

skewXSelf(sx)

後ろ掛けによって現在の行列に対して指定角 sx（度）で skewX 変換を適用します。2D の skewX 行列は CSS Transforms に記述されています。 [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 element から m44 element までを、列優先順で matrix の要素値に設定します。
現在の行列を返します。

7. 構造化シリアライズ

DOMPointReadOnly, DOMPoint, DOMRectReadOnly, DOMRect, DOMQuad, DOMMatrixReadOnly, and 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]] に設定します。

与えられた value と serialized に対する、serialization steps は、DOMRectReadOnly と DOMRect について次のとおりです:

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 の部分シリアライズによる点 1 に設定します。
serialized.[[P2]] を value の部分シリアライズによる点 2 に設定します。
serialized.[[P3]] を value の部分シリアライズによる点 3 に設定します。
serialized.[[P4]] を value の部分シリアライズによる点 4 に設定します。

それらのデシリアライズ手順は、与えられた serialized と value に対して次のとおりです:

value の点 1 を serialized.[[P1]] の部分デシリアライズの結果に設定します。
value の点 2 を serialized.[[P2]] の部分デシリアライズの結果に設定します。
value の点 3 を serialized.[[P3]] の部分デシリアライズの結果に設定します。
value の点 4 を serialized.[[P4]] の部分デシリアライズの結果に設定します。

DOMMatrixReadOnly および DOMMatrix のためのシリアライズ手順は、与えられた value と serialized に対して次のとおりです:

もし value の is 2D が true なら:
1. serialized.[[M11]] を value の m11 element に設定します。
2. serialized.[[M12]] を value の m12 element に設定します。
3. serialized.[[M21]] を value の m21 element に設定します。
4. serialized.[[M22]] を value の m22 element に設定します。
5. serialized.[[M41]] を value の m41 element に設定します。
6. serialized.[[M42]] を value の m42 element に設定します。
7. serialized.[[Is2D]] を true に設定します。
Note: 2D の DOMMatrix または DOMMatrixReadOnly が一部の他の要素に -0 を持つことはあり得ます（例: m13 element）が、このアルゴリズムではそれらはラウンドトリップされません。
それ以外:
1. serialized.[[M11]] を value の m11 element に設定します。
2. serialized.[[M12]] を value の m12 element に設定します。
3. serialized.[[M13]] を value の m13 element に設定します。
4. serialized.[[M14]] を value の m14 element に設定します。
5. serialized.[[M21]] を value の m21 element に設定します。
6. serialized.[[M22]] を value の m22 element に設定します。
7. serialized.[[M23]] を value の m23 element に設定します。
8. serialized.[[M24]] を value の m24 element に設定します。
9. serialized.[[M31]] を value の m31 element に設定します。
10. serialized.[[M32]] を value の m32 element に設定します。
11. serialized.[[M33]] を value の m33 element に設定します。
12. serialized.[[M34]] を value の m34 element に設定します。
13. serialized.[[M41]] を value の m41 element に設定します。
14. serialized.[[M42]] を value の m42 element に設定します。
15. serialized.[[M43]] を value の m43 element に設定します。
16. serialized.[[M44]] を value の m44 element に設定します。
17. serialized.[[Is2D]] を false に設定します。
それらのデシリアライズ手順は、与えられた serialized と value に対して次のとおりです:
1. もし serialized.[[Is2D]] が true なら:
  1. value の m11 element を serialized.[[M11]] に設定します。
  2. value の m12 element を serialized.[[M12]] に設定します。
  3. value の m13 element を 0 に設定します。
  4. value の m14 element を 0 に設定します。
  5. value の m21 element を serialized.[[M21]] に設定します。
  6. value の m22 element を serialized.[[M22]] に設定します。
  7. value の m23 element を 0 に設定します。
  8. value の m24 element を 0 に設定します。
  9. value の m31 element を 0 に設定します。
  10. value の m32 element を 0 に設定します。
  11. value の m33 element を 1 に設定します。
  12. value の m34 element を 0 に設定します。
  13. value の m41 element を serialized.[[M41]] に設定します。
  14. value の m42 element を serialized.[[M42]] に設定します。
  15. value の m43 element を 0 に設定します。
  16. value の m44 element を 1 に設定します。
  17. value の is 2D を true に設定します。
2. それ以外:
  1. value の m11 element を serialized.[[M11]] に設定します。
  2. value の m12 element を serialized.[[M12]] に設定します。
  3. value の m13 element を serialized.[[M13]] に設定します。
  4. value の m14 element を serialized.[[M14]] に設定します。
  5. value の m21 element を serialized.[[M21]] に設定します。
  6. value の m22 element を serialized.[[M22]] に設定します。
  7. value の m23 element を serialized.[[M23]] に設定します。
  8. value の m24 element を serialized.[[M24]] に設定します。
  9. value の m31 element を serialized.[[M31]] に設定します。
  10. value の m32 element を serialized.[[M32]] に設定します。
  11. value の m33 element を serialized.[[M33]] に設定します。
  12. value の m34 element を serialized.[[M34]] に設定します。
  13. value の m41 element を serialized.[[M41]] に設定します。
  14. value の m42 element を serialized.[[M42]] に設定します。
  15. value の m43 element を serialized.[[M43]] に設定します。
  16. value の m44 element を serialized.[[M44]] に設定します。
  17. value の is 2D を false に設定します。

8. プライバシーおよびセキュリティに関する考慮事項

The DOMMatrix and DOMMatrixReadOnly interfaces have entry-points to parsing a string with CSS syntax. Therefore the privacy and security considerations of the CSS Syntax specification applies. [CSS3-SYNTAX]

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

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

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

9. 履歴

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

本仕様のインターフェイスは、さまざまな仕様に見られる以前の類似インターフェイスや一部のユーザーエージェントに存在した独自のインターフェイスを置き換えることを意図しています。本節はこれらのインターフェイスを列挙しようとするものです。

9.1. CSSOM View

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

9.2. SVG

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

9.3. 非標準

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

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

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

前回の公開以降の変更点

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

次の変更は 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 の旧来の window エイリアスとして定義しました。
Worker 内では、DOMMatrix と DOMMatrixReadOnly は CSS 構文による解析や文字列化をサポートしません。
インターフェイスの構造化シリアライズを定義しました。
DOMQuad のライブ属性 bounds は非ライブの getBounds() メソッドに置き換えられました。「関連付けられた境界矩形（associated bounding rectangle）」の概念も削除されました。
文字列パーサを SVG 規則から CSS 規則を使うように変更しました（DOMMatrix と DOMMatrixReadOnly）。
文字列化処理は、非有限値がある場合に例外を投げ、それ以外の場合は ToString アルゴリズムを使用するように変更しました。 [ECMA-262]
比較処理で 0 と -0 を同一視するように変更しました。
§8 プライバシーとセキュリティ考慮事項および §9 履歴セクションを追加しました。

次の変更は 2014年9月18日作業草案以降に行われました。

DOMPointReadOnly, DOMPoint, DOMRectReadOnly, DOMRect, DOMQuad, DOMMatrixReadOnly および DOMMatrix を Window と Worker に公開しました。クローンの定義も行いました。

次の変更は 2014年6月26日最終公開作業草案以降に行われました。

DOMPointReadOnly に 4 引数を取るコンストラクタを追加しました。
DOMRectReadOnly に 4 引数を取るコンストラクタを追加しました。
DOMMatrixReadOnly に数値の列を引数とするコンストラクタを追加しました。
DOMRectList は ArrayClass に変更されました。インターフェイスはレガシーのために使えるように残されます。
DOMRectList をブラウザのフィードバックを待つ at-Risk に置きました。
すべてのインターフェイスは読み取り専用/書き込み可能および継承の振る舞いを説明するための内部要素の観点で記述されました。
IndexSizeError 例外を TypeError に置き換えました。

次の変更は 2014年5月22日最初の公開作業草案以降に行われました。

可変の変換メソッド名を *By から *Self に改名しました。（例: translateBy() は translateSelf() に改名。）
invert() を invertSelf() に改名しました。
setMatrixValue() を追加し、これは変換リストを DOMString として受け取ります。
is2D と isIdentity は現在読み取り専用の属性になっています。
DOMMatrixReadOnly は 3D 変換や属性設定を追跡するようにフラグ付けされ、is2D を管理します。
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 。

適合性（Conformance）

文書上の慣例

適合性要件は記述的な主張と RFC 2119 用語の組み合わせで表現されています。規範的な部分におけるキーワード “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, および “OPTIONAL” は RFC 2119 に記載されたとおりに解釈されます。ただし、可読性のため、これらの語は本仕様ではすべて大文字で現れるわけではありません。

この仕様のテキスト全体は、明示的に非規範とマークされた節、例、および注を除いて規範的です。 [RFC2119]

本仕様の例は「for example」という語で導入されるか、または規範的テキストから class="example" で区別されます。

説明的な注は “Note” という語で始まり、class="note" で区別されます。

注意喚起（Advisements）は規範的な節で、特別な注意を喚起するために <strong class="advisement"> で区別されます。例: UAs MUST provide an accessible alternative.

適合クラス

スタイルシートが本仕様に適合しているとは、このモジュールで定義された構文を用いるすべての文が、汎用 CSS 文法および各機能の個別の文法に従って有効であることを意味します。

レンダラが本仕様に適合するためには、適切な仕様に従ってスタイルシートを解釈することに加え、本仕様で定義されたすべての機能を正しく解析し文書をレンダリングすることをサポートしている必要があります。ただし、デバイスの制約によって文書を正しくレンダリングできないことがあっても、UA が非適合になるわけではありません（例えば、モノクロモニタ上で色を表示する必要はありません）。

オーサリングツールが本仕様に適合するためには、生成するスタイルシートが汎用 CSS 文法および本モジュールの各機能の文法に従って構文的に正しいこと、並びに本モジュールで記述されたスタイルシートの他のすべての適合要件を満たしていることが必要です。

CSS の責任ある実装の要件

以下の節は、現在および将来の相互運用性を促進するような形で、CSS を責任を持って実装するためのいくつかの適合要件を定義します。

部分的な実装

作者がフォワード互換のパース規則を利用してフォールバック値を割り当てられるようにするため、CSS レンダラはサポートの実用的なレベルがない at-rule、プロパティ、プロパティ値、キーワード、その他の構文構成要素を無効として扱い（適切に ignore as appropriate）なければなりません。特に、ユーザーエージェントは単一の複数値プロパティ宣言内で、サポートされていないプロパティ値を選択的に無視してサポートされている値だけを有効にすることをしてはなりません。もし任意の値が無効と見なされる（サポートされていない値はそのように扱われる）なら、CSS は宣言全体を無視することを要求します。

不安定または独自の機能の実装

CR レベル機能の実装

仕様が Candidate Recommendation ステージに到達したら、実装者は仕様に従って正しく実装されていることを示せる CR レベルの機能について、プレフィックスのない実装（unprefixed）を公開し、その機能のプレフィックス付きバリアントを公開しないようにすべきです。

CSS の実装間で相互運用性を確立および維持するため、CSS 作業部会は非実験的な CSS レンダラに対して、任意の CSS 機能のプレフィックスのない実装を公開する前に実装レポート（必要に応じてその実装レポートに使用したテストケースを含む）を W3C に提出するよう要請します。W3C に提出されたテストケースは CSS 作業部会によるレビューと修正の対象となります。

テストケースおよび実装レポートの提出に関する詳細は、CSS 作業部会のウェブサイト https://www.w3.org/Style/CSS/Test/ を参照してください。質問はメールリスト public-css-testsuite@w3.org 宛てに送ってください。

CR 退出基準

本仕様が Proposed Recommendation に進むためには、各機能について少なくとも 2 つの独立して相互運用可能な実装が存在しなければなりません。各機能は異なる製品群によって実装され得るので、すべての機能が単一製品によって実装される必要はありません。本基準の目的のために以下の用語を定義します：

本仕様は少なくとも 6 か月間 Candidate Recommendation として維持されます。

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

W3C候補勧告、2018年12月4日

要約

この文書のステータス

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. 履歴

9.1. CSSOM View

9.2. SVG

9.3. 非標準

前回の公開以降の変更点

謝辞

適合性（Conformance）

文書上の慣例

適合クラス

CSS の責任ある実装の要件

部分的な実装

不安定または独自の機能の実装

CR レベル機能の実装

CR 退出基準

索引

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

参照で定義された用語

参考文献

規範的な参考文献

参考情報

IDL 索引

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

W3C候補勧告、2018年12月4日

要約

この文書のステータス

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. 履歴

9.1. CSSOM View

9.2. SVG

9.3. 非標準

前回の公開以降の変更点

謝辞

適合性（Conformance）

文書上の慣例

適合クラス

CSS の責任ある実装の要件

部分的な実装

不安定または独自の機能の実装

CR レベル機能の実装

CR 退出基準

索引

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

参照で定義された用語

参考文献

規範的な参考文献

参考情報

IDL 索引

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