CSS Typed OM レベル 1

1. 導入

CSSスタイルシートは抽象的なUA内部データ構造、すなわちCSSの内部表現にパースされ、様々な仕様アルゴリズムによって操作されます。

内部表現は直接操作できません。実装依存であるためです。 UAは内部表現の解釈方法に合意する必要がありますが、表現自体は意図的に未定義にされています。これは、UAがCSSを最も効率的な方法で保存・操作できるようにするためです。

以前は、内部表現を読み書きする唯一の方法は文字列経由でした。スタイルシートやCSSOMによって作成者はUAに文字列を送信し、それが内部表現にパースされます。また、CSSOMは作成者がUAに自分の内部表現を再度文字列にシリアライズすることを要求することもできました。

本仕様は、新たな方法で内部表現とやり取りする手段を導入します。それは、これらを特殊なJSオブジェクトで表現するものであり、従来の文字列のパースや連結よりも容易かつ確実に操作・理解できます。この新しいアプローチは、作成者にとってより簡単であり（例えば、数値値は実際のJSの数値として反映され、単位対応の数学的演算も定義されています）、多くの場合より高性能です。値を直接操作し、CSS文字列を生成・パースせずに内部表現へ安価に変換できるためです。

2. `CSSStyleValue` オブジェクト

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSStyleValue {
    stringifier;
    [Exposed=Window] static CSSStyleValue parse(USVString property, USVString cssText);
    [Exposed=Window] static sequence<CSSStyleValue> parseAll(USVString property, USVString cssText);
};

CSSStyleValue オブジェクトは、Typed OM APIでアクセス可能なすべてのCSS値の基本クラスです。

文字列化挙動は、CSSStyleValue オブジェクトについて §6 CSSStyleValueのシリアライズで定義されています。

parse(property, cssText) メソッドは、呼び出された際、 CSSStyleValueをパースする際に property property、cssText cssText、parseMultiple を false で渡し、その結果を返します。

parseAll(property, cssText) メソッドは、呼び出された際、 CSSStyleValueをパースする際に property property、cssText cssText、parseMultiple を true で渡し、その結果を返します。

CSSStyleValueをパースするには、文字列 property、文字列 cssText、 parseMultipleフラグを受け取り、次の手順を実行します:

propertyがカスタムプロパティ名文字列でなければ、 propertyをASCII小文字化します。
propertyが有効なCSSプロパティでなければ、throwで TypeError を投げます。
propertyの文法に従って cssTextをパースしようとします。失敗した場合は throwで TypeError を投げます。成功した場合は whole value をパース結果にします。

カスタムプロパティの挙動は、JavaScript経由で変更された場合と、スタイルシートで定義された場合で異なります。
スタイルシートでカスタムプロパティが不正な構文で定義された場合、その値は「unset」として記録され、プロパティ登録時にすべてのスタイルシートを再パースしなくて済むようになっています。

一方、JavaScript APIでカスタムプロパティを変更した場合、パースエラーはプログラミング環境にTypeErrorとして伝播されます。これにより、開発者へ即時のエラー通知が可能となります。
反復に分割する whole valueを、 propertyに従って実行し、valuesを得ます。
values の各 value に対し、 reifying value for property の結果で置換します。

グローバルの定義が必要です。
parseMultipleがfalseならvalues[0]を返し、trueならvalues全体を返します。

反復に分割するには、 CSS値 whole value とプロパティ property を受け取り、以下の手順を実行します:

propertyが単一値プロパティなら、 whole valueを含むリストを返します。
それ以外なら、 whole valueをプロパティに応じて個々の反復に分割し、分割した順序でリストを返します。

リスト値プロパティを反復に分割する方法は、現時点では意図的に未定義かつ曖昧です。一般的には、トップレベルのカンマ（文法のトップレベル<foo>#項）で分割しますが、一部のレガシープロパティ（例えばcounter-reset）はカンマで区切りません。

将来的には厳密に定義される予定ですが、現状では「みんな意味はわかるよね」的なものです。

2.1. 直接的な `CSSStyleValue` オブジェクト

より特殊化されたCSSStyleValue のサブクラスでまだ直接サポートできない値は、 CSSStyleValue オブジェクトとして表現されます。

各CSSStyleValue オブジェクトは、特定のCSSプロパティと関連付けられており、 [[associatedProperty]] 内部スロットと、特定の不変な内部表現を持ちます。これらのオブジェクトは、どの内部表現から具体化されたかを「表現」していると言えます。同じプロパティのスタイルシートに再設定する場合、同等の内部表現を再現します。

これらのCSSStyleValue オブジェクトは、パースされたプロパティ専用でのみ有効です。これは、CSSStyleValue オブジェクトが[[associatedProperty]]内部スロットを持つこと、その値がnull（デフォルト）または文字列（プロパティ名）であることによって保証されます。

注: このスロットはStylePropertyMap.set()/append() によってチェックされます。

3. `StylePropertyMap`について

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface StylePropertyMapReadOnly {
    iterable<USVString, sequence<CSSStyleValue>>;
    (undefined or CSSStyleValue) get(USVString property);
    sequence<CSSStyleValue> getAll(USVString property);
    boolean has(USVString property);
    readonly attribute unsigned long size;
};

[Exposed=Window]
interface StylePropertyMap : StylePropertyMapReadOnly {
    undefined set(USVString property, (CSSStyleValue or USVString)... values);
    undefined append(USVString property, (CSSStyleValue or USVString)... values);
    undefined delete(USVString property);
    undefined clear();
};

StylePropertyMap は、CSS宣言ブロックをオブジェクトとして表現するための別の方法です。（[cssom]で取得した場合、CSS宣言ブロックは CSSStyleDeclaration オブジェクトとして表現されます。)

StylePropertyMapReadOnly オブジェクトは [[declarations]]内部スロットを持ちます。これはマップであり、CSS宣言ブロックの宣言を反映します。

注: 宣言はまだ[infra]用語で定義されていませんが、本仕様ではキーが文字列（プロパティ名）で、値がそのプロパティの内部表現であるマップであると推定します。

特に指定がない限り、 [[declarations]] 内部スロットの初期順序は各エントリのキーに基づきます：

標準化プロパティ（カスタムプロパティやベンダープレフィックス付きプロパティ以外）は ASCII小文字化した後、コードポイント順で昇順にソート。
ベンダープレフィックス／実験的プロパティ（名前が単一のダッシュで始まる）は ASCII小文字化した後、コードポイント順で昇順にソート。
カスタムプロパティは、コードポイント順で昇順にソート。（これらは小文字化されず、記述通りに保持されます。）

反復する値ペアは、StylePropertyMapReadOnly オブジェクトthisに対し、以下の方法で取得します：

declarationsをthisの[[declarations]] スロットとします。
value pairsを空のリストとします。
declarationsの各prop→valueについて：
1. 反復に分割する value の結果をiterationsとします。
2. reifyし、各itemについて objectsとします。
3. prop/objectsをvalue pairsに追加します。
value pairsを返します。

一部のCSSプロパティはリスト値プロパティです。例：background-imageやanimationなど。これらの値は並列する文法項のリストで、ほとんどの場合カンマ区切りとなります（例外はcounter-resetなど一部のレガシープロパティです）。複数の別々の「値」が同じ方法で解釈されることを示します。その他のプロパティ、例えばcolorは単一値プロパティです。これらは1つの（場合によっては複雑な）値のみを取ります。

w3c/css-houdini-drafts/644 [css-typed-om]どのプロパティがリスト値でどれがそうでないか、付録に正確に定義すること。

CSSプロパティが単一値からリスト値に移行した例は複数あります。プロパティが単一値だった時代に書かれたコードが、将来リスト値になっても壊れないように、 StylePropertyMap はマルチマップとなっています。各キーに対して値のリストを保持しますが、単一値としても操作可能です。

つまり、StylePropertyMap の1つのプロパティに複数の値がある場合、それはプロパティ値が複数回定義されたことを意味するのではなく、 1つのプロパティ値内の複数のカンマ区切り部分、例えばbackground-imageの各「レイヤー」を表します。

get(property)メソッドは、 StylePropertyMap thisに対して呼び出された場合、以下の手順を実行します：

propertyがカスタムプロパティ名文字列でなければ、 propertyをASCII小文字化します。
propertyが有効なCSSプロパティでなければ、throwで TypeError を投げます。
propsをthisの[[declarations]] 内部スロットの値とします。
props[property]が存在すれば、反復に分割する props[property] を実行し、その結果の最初の項目をreifyして返します。

存在しなければundefinedを返します。

グローバルの定義が必要です。

getAll(property)メソッドは、 StylePropertyMap thisに対して呼び出された場合、以下の手順を実行します：

propertyがカスタムプロパティ名文字列でなければ、 propertyをASCII小文字化します。
propertyが有効なCSSプロパティでなければ、throwで TypeError を投げます。
propsをthisの[[declarations]] 内部スロットの値とします。
props[property]が存在すれば、反復に分割する props[property] を実行し、その結果の各itemをreifyしてリストで返します。

存在しなければ空のリストを返します。

グローバルの定義が必要です。

has(property)メソッドは、 StylePropertyMap thisに対して呼び出された場合、以下の手順を実行します：

propertyがカスタムプロパティ名文字列でなければ、 propertyをASCII小文字化します。
propertyが有効なCSSプロパティでなければ、throwで TypeError を投げます。
propsをthisの[[declarations]] 内部スロットの値とします。
props[property]が存在すれば、 trueを返します。そうでなければfalseを返します。

size属性は、 StylePropertyMap thisから取得するときに、以下の手順を実行します：

thisの[[declarations]] 内部スロットのサイズを返します。

set(property, ...values)メソッドは、 StylePropertyMap thisに対して呼び出された場合、以下の手順を実行します：

propertyがカスタムプロパティ名文字列でなければ、 propertyをASCII小文字化します。
propertyが有効なCSSプロパティでなければ、throwで TypeError を投げます。
propertyが単一値プロパティで、valuesに itemが複数ある場合、throwで TypeError を投げます。
valuesのいずれかのitemの[[associatedProperty]] 内部スロットがnull以外で、その値がproperty以外なら、throwで TypeError を投げます。
valuesのサイズが2以上であり、 1つ以上のitemが CSSUnparsedValue または CSSVariableReferenceValue オブジェクトである場合、throwで TypeError を投げます。

注: 2つ以上の値がある場合、リスト値プロパティの複数項目を設定していることになりますが、文字列型OMでvar()関数があると、すべての構文解析が無効化されます（var()値内にさらにカンマがある可能性があるため、項目数が不明になる）。この仕様の制限はTyped OMでも同じ意味を保ちます。
propsをthisの[[declarations]] 内部スロットの値とします。
props[property]が存在すれば、削除します。
values to setを空のリストとします。
各valueについて、内部表現を作成し、結果をvalues to setに追加します。
props[property]にvalues to setを設定します。

注: プロパティは一度削除され再追加されるため、順序付きマップの末尾に来ることになり、ショートハンドプロパティに対して期待通りの挙動となります。

append(property, ...values)メソッドは、 StylePropertyMap thisに対して呼び出された場合、以下の手順を実行します：

propertyがカスタムプロパティ名文字列でなければ、 propertyをASCII小文字化します。
propertyが有効なCSSプロパティでなければ、throwで TypeError を投げます。
propertyがリスト値プロパティでなければ、throwで TypeError を投げます。
valuesのいずれかのitemの[[associatedProperty]] 内部スロットがnull以外で、その値がproperty以外なら、throwで TypeError を投げます。
valuesのいずれかのitemが CSSUnparsedValue または CSSVariableReferenceValue オブジェクトである場合、throwで TypeError を投げます。

注: 文字列ベースAPIでプロパティを設定するとき、var()が存在すると全体の解釈が無効化されます。つまり、var()以外は単なるコンポーネント値であり、意味のある型ではありません。この仕様の制限はTyped OMでも同じ意味を保ちます。
propsをthisの[[declarations]] 内部スロットの値とします。
props[property]が存在しなければ、props[property]に空のリストを設定します。
props[property]にvar()参照が含まれていれば、 throw で TypeError を投げます。
temp valuesを空のリストとします。
各valueについて、内部表現を作成し、 temp valuesに追加します。
temp valuesの各エントリを props[property]に追加します。

delete(property)メソッドは、 StylePropertyMap thisに対して呼び出された場合、以下の手順を実行します：

propertyがカスタムプロパティ名文字列でなければ、 propertyをASCII小文字化します。
propertyが有効なCSSプロパティでなければ、throwで TypeError を投げます。
thisの[[declarations]] 内部スロットがpropertyを含む場合、削除します。

clear()メソッドは、 StylePropertyMap thisに対して呼び出された場合、以下の手順を実行します：

thisの[[declarations]] 内部スロットのすべての宣言を削除します。

内部表現を作成するには、文字列 propertyと文字列またはCSSStyleValue valueを受け取ります：

valueが直接CSSStyleValueなら

valueの関連値を返します。

valueがCSSStyleValueのサブクラスなら

valueがpropertyの文法に一致しない場合は、throwで TypeError を投げます。

プロパティのCSS文法の一部が制限された数値範囲を持ち、該当部分が範囲外のCSSUnitValueなら、その値を新しいCSSMathSumでラップし、 values 内部スロットにその値のみを入れたものに置換します。

valueを返します。

valueがUSVStringなら

CSSStyleValueをパースする（property, cssText = value, parseMultiple = false）を実行し、その結果を返します。

注: これでTypeErrorが投げられることがあります。

CSSプロパティは、入力として有効な文法を文字列をCSSトークンにパースしたものとして記述します（CSS Syntax 3 §4 トークン化で規定）。 CSSStyleValue オブジェクトもこの文法にマッチ可能です。

CSSStyleValue が文法に一致するかどうかのルール：

CSSKeywordValue は、文法で指定された<ident> に対し、 value 内部スロットの識別子が一致すればマッチ。

その識別子に通常ケース折りたたみルールがある場合（例：Autoがautoに一致するなど）この比較にも適用。
CSSTransformValue は<transform-list>に一致。
CSSNumericValue は、その型が一致するものにマッチ。
CSSUnparsedValue はどんな文法にも一致。
直接的なCSSStyleValue（サブクラスでない）が非nullの [[associatedProperty]] スロットを持つ場合、その[[associatedProperty]] のプロパティの文法に一致（内容問わず）。

注: Typed OMでより複雑な値が作れるようになるにつれ、この節はより複雑になります。

文字列は先頭が2つのダッシュ（U+002D HYPHEN-MINUS）で始まる場合カスタムプロパティ名文字列です（例：--foo）。（これは<custom-property-name>に対応しますが、文字列に適用され、識別子には適用されません。CSSパーサを呼び出さずに使用できます。）

文字列は有効なCSSプロパティであれば、カスタムプロパティ名文字列であるか、またはユーザーエージェントが認識するCSSプロパティ名です。

3.1. 算出済み `StylePropertyMapReadOnly` オブジェクト

partial interface Element {
    [SameObject] StylePropertyMapReadOnly computedStyleMap();
};

算出済みStylePropertyMapオブジェクトは、算出値を表現し、 Element の computedStyleMap() メソッドで取得できます。

すべての Element は、 [[computedStyleMapCache]] 内部スロットを持ち、初期値は null です。このスロットは computedStyleMap() メソッドが初めて呼ばれた際、その結果をキャッシュします。

computedStyleMap() メソッドは、 Element this に対して呼び出された時、次の手順を実行します:

this の [[computedStyleMapCache]] 内部スロットが null の場合、その値を新しい StylePropertyMapReadOnly オブジェクトに設定し、 [[declarations]] 内部スロットは、UAがサポートするすべてのロングハンドCSSプロパティ名と登録済みカスタムプロパティ、および初期値以外が設定されている未登録のカスタムプロパティの名前と算出値を標準順で持つものとなります。

このオブジェクトの [[declarations]] の算出値は、スタイル解決によって this のプロパティや算出値が変化した場合、最新状態を保つ必要があります。

注: 実際には値が .get() メソッドの裏に隠されているため、 UAはプロパティが実際に要求されるまで計算を遅延できます。
this の [[computedStyleMapCache]] 内部スロットを返します。

注: Window.getComputedStyle() と同様に、このメソッドは origin-clean flag が未設定のスタイルシートの情報を公開する場合があります。

注: このメソッドが返す StylePropertyMapReadOnly は 実際の 算出値を表し、 Window.getComputedStyle() で使われる resolved valueの概念とは異なります。そのため、Window.getComputedStyle() と異なる値を返すことがあります（例：widthなど）。

注: WGの決議により、疑似要素のスタイルは PseudoElement インターフェースにこのメソッドを追加することで取得できることを意図しています（pseudoElt 引数を使う Window.getComputedStyle() とは異なります）。

3.2. 宣言・インライン `StylePropertyMap` オブジェクト

partial interface CSSStyleRule {
    [SameObject] readonly attribute StylePropertyMap styleMap;
};

partial interface mixin ElementCSSInlineStyle {
    [SameObject] readonly attribute StylePropertyMap attributeStyleMap;
};

宣言済みStylePropertyMapオブジェクトは、スタイルルールまたはインラインスタイル内のプロパティと値のペアを表現し、 CSSStyleRule オブジェクトの styleMap 属性や、 ElementCSSInlineStyle インターフェースミックスイン（例：HTMLElement）を実装するオブジェクトの attributeStyleMap 属性から取得できます。

宣言済みStylePropertyMapオブジェクトの [[declarations]] 内部スロットは、構築時に CSSStyleRule またはインラインスタイル内で有効値がある各プロパティのエントリを、該当 CSSStyleRule やインラインスタイル内の順序で初期化します。

4. `CSSStyleValue` のサブクラス

4.1. `CSSUnparsedValue` オブジェクト

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSUnparsedValue : CSSStyleValue {
    constructor(sequence<CSSUnparsedSegment> members);
    iterable<CSSUnparsedSegment>;
    readonly attribute unsigned long length;
    getter CSSUnparsedSegment (unsigned long index);
    setter CSSUnparsedSegment (unsigned long index, CSSUnparsedSegment val);
};

typedef (USVString or CSSVariableReferenceValue) CSSUnparsedSegment;

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSVariableReferenceValue {
    constructor(USVString variable, optional CSSUnparsedValue? fallback = null);
    attribute USVString variable;
    readonly attribute CSSUnparsedValue? fallback;
};

CSSUnparsedValue オブジェクトは、カスタムプロパティを参照するプロパティ値を表現します。これらは文字列断片と変数参照のリストで構成されます。

これらのオブジェクトは [[tokens]] 内部スロットを持ち、リストとして USVString と CSSVariableReferenceValue オブジェクトを含みます。このリストがオブジェクトの「反復する値」となります。

length 属性は、 [[tokens]] 内部スロットのサイズを返します。

CSSUnparsedValue this のサポートされるプロパティインデックスは、 0以上で [[tokens]] 内部スロットのサイズ未満の整数です。

CSSUnparsedValue this のインデックス付きプロパティ値を取得するには、n番目の [[tokens]] を返します。

既存のインデックス付きプロパティ値を設定するには、tokens[n] に新しい値 new value を設定します。

新しいインデックス付きプロパティ値を設定するには、n が tokens のサイズと等しくなければ throw で RangeError を投げます。そうでなければ、tokens に new value を追加します。

CSSVariableReferenceValue this の variable 属性のgetterは、内部スロット variable を返します。

CSSVariableReferenceValue this の variable 属性のsetterは、変数 variable を設定する時、以下の手順を実行します：

variable がカスタムプロパティ名文字列でなければ、throw で TypeError を投げます。
それ以外の場合、this の variable 内部スロットに variable を設定します。

CSSVariableReferenceValue(variable, fallback) コンストラクタは、呼び出された際に以下を実行します：

variable がカスタムプロパティ名文字列でなければ、throw で TypeError を投げます。
新しい CSSVariableReferenceValue を作成し、内部スロット variable に variable、fallback に fallback を設定して返します。

4.2. `CSSKeywordValue` オブジェクト

CSSKeywordValue オブジェクトは、CSSキーワードやその他の識別子（ident）を表します。

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSKeywordValue : CSSStyleValue {
    constructor(USVString value);
    attribute USVString value;
};

CSSKeywordValue(value) コンストラクタは、呼び出された時、以下の手順を実行します:

value が空文字列なら、throw で TypeError を投げます。
それ以外の場合、新しい CSSKeywordValue を作成し、 value 内部スロットに value を設定して返します。

CSSKeywordValue を受け付けるすべての箇所は、生の USVString も受け付けます。 typedefとアルゴリズムは以下の通りです：

typedef (DOMString or CSSKeywordValue) CSSKeywordish;

キーワード値を補正する valに対し、以下の手順を実行します:

val が CSSKeywordValue なら、そのまま val を返す。
val が DOMString なら、新しい CSSKeywordValue を作成し、 value 内部スロットに val を設定して返す。

CSSKeywordValue this の value 属性のsetterは、値 value を設定する時、以下の手順を実行します:

value が空文字列なら、throw で TypeError を投げる。
それ以外の場合、this の value 内部スロットに value を設定する。

4.3. 数値型値：

CSSNumericValue オブジェクトは、数値的性質を持つCSS値（<number>、<percentage>、 <dimension>）を表します。 CSSNumericValue を継承するインターフェースは2つあります：

CSSUnitValue オブジェクトは、単一の単位型を持つ値（例："42px"）を表します。
CSSMathValue オブジェクトは数式（複数の値や単位を含む可能性がある、例："calc(56em + 10%)"）を表します。

CSSNumericValue オブジェクトは範囲制限されません。任意の有効な数値型値は CSSNumericValue で表現可能であり、その値は宣言済みStylePropertyMap に設定しても切り捨て、丸め、拒否されません。代わりに、切り捨てや丸めはスタイル計算時に行われます。

以下のコードは有効です

myElement.attributeStyleMap.set("opacity", CSS.number(3));
myElement.attributeStyleMap.set("z-index", CSS.number(15.4));

console.log(myElement.attributeStyleMap.get("opacity").value); // 3
console.log(myElement.attributeStyleMap.get("z-index").value); // 15.4

var computedStyle = myElement.computedStyleMap();
var opacity = computedStyle.get("opacity");
var zIndex = computedStyle.get("z-index");

実行後、opacity の値は 1 となります（opacity は範囲制限される）、 zIndex の値は 15 となります（z-index は整数値に丸められる）。

注: 変数参照を含む「数値型値」は CSSUnparsedValue オブジェクトで、キーワードは CSSKeywordValue オブジェクトとして表現されます。

CSSNumericValue を受け付けるすべての箇所では、生の double も受け付けます。 typedefとアルゴリズムは以下の通りです：

typedef (double or CSSNumericValue) CSSNumberish;

数値型値を補正する numについて、 unit（デフォルトは "number"）へ補正する場合、以下の手順を実行します：

num が CSSNumericValue なら、そのまま num を返します。
num が double なら、新しい CSSUnitValue を作成し、 value 内部スロットに num を、unit 内部スロットに unit を設定して返します。

4.3.1. 共通の数値演算と `CSSNumericValue` スーパークラス

すべての数値型CSS値（<number>、<percentage>、 <dimension>）は CSSNumericValue インターフェースのサブクラスによって表現されます。

enum CSSNumericBaseType {
    "length",
    "angle",
    "time",
    "frequency",
    "resolution",
    "flex",
    "percent",
};

dictionary CSSNumericType {
    long length;
    long angle;
    long time;
    long frequency;
    long resolution;
    long flex;
    long percent;
    CSSNumericBaseType percentHint;
};

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSNumericValue : CSSStyleValue {
    CSSNumericValue add(CSSNumberish... values);
    CSSNumericValue sub(CSSNumberish... values);
    CSSNumericValue mul(CSSNumberish... values);
    CSSNumericValue div(CSSNumberish... values);
    CSSNumericValue min(CSSNumberish... values);
    CSSNumericValue max(CSSNumberish... values);

    boolean equals(CSSNumberish... value);

    CSSUnitValue to(USVString unit);
    CSSMathSum toSum(USVString... units);
    CSSNumericType type();

    [Exposed=Window] static CSSNumericValue parse(USVString cssText);
};

CSSNumericValue スーパークラスのメソッドは、すべての数値型値が実行可能な操作を表します。

次は、寸法値に対して実行できる算術演算です：

add(...values) メソッドは、 CSSNumericValue this で呼び出されたとき、次の手順を実行します：

values の各 item を、数値型値を補正する結果で置換します。
this が CSSMathSum オブジェクトの場合、this の values 内部スロットの items を values の先頭に追加する。それ以外の場合は、this を values の先頭に追加する。
values のすべての item が CSSUnitValue かつ同一の unit を持つ場合、 this の unit 内部スロットを設定し、 value 内部スロットに values 内の各 value を左から右へ順次加算した合計値を設定した新しい CSSUnitValue を返す。（浮動小数点演算の互換性保持のため、加算順序は左から右。）
values の各 item の type を加算した結果 type を得る。 type が失敗なら throw で TypeError を投げる。
values を内部スロットに持つ新しい CSSMathSum オブジェクトを返す。

sub(...values) メソッドは、 CSSNumericValue this で呼び出されたとき、次の手順を実行します：

values の各 item を数値型値を補正する結果で置換し、さらに negate する。
this と values を使い add() 内部アルゴリズムを呼び出し、その結果を返す。

CSSNumericValueをnegateする this：

this が CSSMathNegate オブジェクトなら、 this の value 内部スロットを返す。
this が CSSUnitValue オブジェクトなら、 this と同じ unit 内部スロットを持ち、 value 内部スロットに negated値を設定した新しい CSSUnitValue を返す。
それ以外の場合、 this を内部スロットにもつ新しい CSSMathNegate オブジェクトを返す。

mul(...values) メソッドは、 CSSNumericValue this で呼び出されたとき、次の手順を実行します：

values の各 item を数値型値を補正する結果で置換する。
this が CSSMathProduct オブジェクトの場合、 this の values 内部スロットの items を values の先頭に追加する。それ以外の場合は this を values の先頭に追加する。
values のすべての item が CSSUnitValue で unit 内部スロットが"number"の場合、 value 内部スロットに values の各 value を左から右へ順次乗算した積を設定した新しい CSSUnitValue を返す。（掛け算順序は左から右。）
values のすべての item が CSSUnitValue で unit 内部スロットが"number"だが 1つだけ unit の場合、 value 内部スロットに values の各 value を左から右へ順次乗算した積を設定し、 unit 内部スロットに unit を設定した新しい CSSUnitValue を返す。
values の各 item の type を乗算した結果 type を得る。 type が失敗なら throw で TypeError を投げる。
values を内部スロットに持つ新しい CSSMathProduct オブジェクトを返す。

div(...values) メソッドは、 CSSNumericValue this で呼び出されたとき、次の手順を実行します：

values の各 item を数値型値を補正する結果で置換し、さらに invert する。
this と values を使い mul() 内部アルゴリズムを呼び出し、その結果を返す。

CSSNumericValueをinvertする this：

this が CSSMathInvert オブジェクトなら、 this の value 内部スロットを返す。
this が CSSUnitValue オブジェクトで unit 内部スロットが "number" の場合：
1. this の value 内部スロットが 0 または -0 なら throw で RangeError を投げる。
2. それ以外の場合、CSSUnitValue を作成し、 unit 内部スロットに "number" を、 value 内部スロットに 1 / this の値を設定して返す。
それ以外の場合、 this を内部スロットにもつ新しい CSSMathInvert オブジェクトを返す。

min(...values) メソッドは、 CSSNumericValue this で呼び出されたとき、次の手順を実行します：

values の各 item を数値型値を補正する結果で置換する。
this が CSSMathMin オブジェクトの場合、 this の values 内部スロットの items を values の先頭に追加する。それ以外の場合は this を values の先頭に追加する。
values のすべての item が CSSUnitValue かつ同一の unit を持つ場合、 this の unit 内部スロットを設定し、 value 内部スロットに values 内の各 value の最小値を設定した新しい CSSUnitValue を返す。
values の各 item の type を加算した結果 type を得る。 type が失敗なら throw で TypeError を投げる。
values を内部スロットに持つ新しい CSSMathMin オブジェクトを返す。

max(...values) メソッドは、 CSSNumericValue this で呼び出されたとき、次の手順を実行します：

values の各 item を数値型値を補正する結果で置換する。
this が CSSMathMax オブジェクトの場合、 this の values 内部スロットの items を values の先頭に追加する。それ以外の場合は this を values の先頭に追加する。
values のすべての item が CSSUnitValue かつ同一の unit を持つ場合、 this の unit 内部スロットを設定し、 value 内部スロットに values 内の各 value の最大値を設定した新しい CSSUnitValue を返す。
values の各 item の type を加算した結果 type を得る。 type が失敗なら throw で TypeError を投げる。
values を内部スロットに持つ新しい CSSMathMax オブジェクトを返す。

equals(...values) メソッドは、 CSSNumericValue this で呼び出されたとき、次の手順を実行します：

values の各 item を数値型値を補正する結果で置換する。
values の各 item について、その item が this と equal numeric value でなければ false を返す。
すべて一致すれば true を返す。

この等価性判定は意図的に非常に厳密です。すべての値が同じ型・値・順序である必要があります。例えば、CSSMathSum(CSS.px(1), CSS.px(2))は CSSMathSum(CSS.px(2), CSS.px(1))とは等しくありません。

この厳密な等価性は、構造的な等価性判定を高速にできるため採用しています。より緩い等価性（順序を問わないなど）を採用する場合は、例えば96pxと1inを等しいとみなす等、より多くの簡約処理が必要となるため、将来的により緩い等価性を追加する可能性があります。

2つの CSSNumericValue value1 と value2 が等価な数値型値かどうかを判定するには、次の手順を実行する：

value1 と value2 が同じインターフェースのメンバーでなければ、false を返す。
value1 と value2 が両方とも CSSUnitValue なら、 unit と value 内部スロットが等しければ true、そうでなければ false を返す。
value1 と value2 が両方とも CSSMathSum、 CSSMathProduct、 CSSMathMin、 CSSMathMax の場合：
1. value1 の values と value2 の values 内部スロットのサイズが異なれば、false を返す。
2. value1 の values 内部スロットの各 item が、同じインデックスの value2 の values 内部スロットの item と等価な数値型値でなければ、 false を返す。
3. true を返す。
Assert: value1 と value2 は両方とも CSSMathNegate または CSSMathInvert である。
value1 の value と value2 の value が等価な数値型値かどうか返す。

to(unit) メソッドは、既存の CSSNumericValue this を指定した unit に変換する（可能な場合）。呼び出されたとき、次の手順を実行する：

type を typeを作成する（unitから）で得る。 type が失敗なら throw で SyntaxError。
sum を sum値を作成する（thisから）で得る。 sum が失敗なら throw で TypeError。
sum の item が複数ある場合、throw で TypeError。そうでなければ sum の唯一の item から CSSUnitValueを作成し、さらに unitに変換する。 item が失敗なら throw で TypeError。
item を返す。

sum値itemからCSSUnitValueを作成する item について、次の手順を実行する：

もし item の entry が unit map に複数存在する場合、失敗を返す。
item の entry がなければ、 CSSUnitValue を作成し、 unit 内部スロットを "number"、 value 内部スロットを item の value に設定して返す。
それ以外の場合、item の entry が1つだけある。その entry の value が1以外なら失敗を返す。
それ以外の場合、 CSSUnitValue を作成し、 unit 内部スロットを entry の key に、 value 内部スロットを item の value に設定して返す。

toSum(...units) メソッドは、既存の CSSNumericValue this を指定した units のみを持つ CSSMathSum の CSSUnitValue に変換する（可能な場合）。（これは to() に似ているが、複数の単位を許容する。） unitsなしで呼び出すと、this を最小限の CSSUnitValue の sum に単純化する。

呼び出されたときの手順：

units の各 unit について、 typeを作成する（unitから）が失敗なら throw で SyntaxError。
sum を sum値を作成する（thisから）で得る。 sum が失敗なら throw で TypeError。
values を sum の各 itemについて CSSUnitValueを作成で得る。 values のいずれかの item が失敗なら throw で TypeError。
units が空なら、 values を unit 内部スロットでコードポイント順に並べ、 CSSMathSum を作成し、 values 内部スロットに values を設定して返す。
それ以外の場合、 result を空リストに初期化し、units の各 unit について：
1. temp を CSSUnitValue で初期化し、 unit 内部スロットに unit、 value 内部スロットに 0 を設定。
2. values の各 value について：
  1. value unit を value の unit 内部スロットとする。
  2. value unit が unit と互換性がある場合：
    1. valueをunitに変換する。
    2. value の value 内部スロットの値を temp の value 内部スロット値に加算。
    3. value を values から削除。
3. temp を result に追加。
values が空でなければ、throw で TypeError。 this に要求しなかった単位が含まれていた。
CSSMathSum を作成し、 values 内部スロットに result を設定して返す。

type() メソッドは、 this の type を表現する値を返す。

呼び出されたときの手順：

result を新しい CSSNumericType で初期化。
this の type の各 baseType → power について：
1. power が0でなければ result[baseType] に power を設定。
this の percent hint が null でなければ：
1. percentHint に this の percent hint を設定。
result を返す。

sum値は、CSSNumericValue を（複雑な単位もあり得る）数値の和として抽象的に表現したものです。すべての CSSNumericValue が sum値で表現できるとは限りません。

sum値はリストです。リストの各エントリは、value（数値）と単位マップ（単位文字列→べき乗（整数）のマップ）のタプルです。

CSS値と、それに等価な sum値の例：

1px → «(1, «["px" → 1]»)»
calc(1px + 1in) → «(97, «["px" → 1]»)»（inとpxは互換性あり、pxが標準単位）
calc(1px + 2em) → «(1, «["px" → 1]»), (2, «["em" → 1]»)»
calc(1px + 2%) → «(1, «["px" → 1]»), (2, «["percent" → 1]»)» （パーセントは他の単位と加算できるが、型では他の単位に解決されない）
calc(1px * 2em) → «(2, «["em" → 1, "px" → 1]»)»
calc(1px + 1deg) は sum値で表現不可（不正な演算）
calc(1px * 2deg) → «(2, «["deg" → 1, "px" → 1]»)»

CSSNumericValue this から sum値を作成するには、クラスごとに手順が異なる：

CSSUnitValue

unit を this の unit 内部スロット、 value を this の value 内部スロットの値とする。
unit が互換単位集合のメンバーで標準単位でなければ、 value を変換比率で掛け、unit を標準単位に変更。
unit が "number" なら、«(value, «[ ]»)» を返す。
それ以外の場合、«(value, «[unit → 1]»)» を返す。

CSSMathSum

values を空リストで初期化。
this の values 内部スロットの各 item について：
1. value を sum値を作成する（itemから）で得る。 value が失敗なら失敗を返す。
2. value の各 subvalue について：
  1. values に同じ単位マップを持つ item が既にあれば、その value に subvalue の値を加算。
  2. なければ subvalue を values に追加。
各 values の単位マップから typeを作成し、すべて加算。失敗なら失敗を返す。
values を返す。

CSSMathNegate

values を sum値を作成する（this の value 内部スロットから）で得る。
values が失敗なら失敗を返す。
values の各 item の value を負にする。
values を返す。

CSSMathProduct

values を sum値 «(1, «[ ]»)» で初期化（つまり 1 から得られるもの）。
this の values 内部スロットの各 item について：
1. new values を sum値を作成する（itemから）で得る。 temp を空リストで初期化。
2. new values が失敗なら失敗を返す。
3. values の各 item1 について：
  1. new values の各 item2 について：
    1. item を値（item1とitem2の値の積）と単位マップ（2つの単位マップの積）を持つタプルで作成し、 0の値のエントリは削除する。
    2. item を temp に追加。
4. values を temp に置換。
values を返す。

CSSMathInvert

values を sum値を作成する（this の value 内部スロットから）で得る。
values が失敗なら失敗を返す。
values の長さが1より大きければ失敗を返す。
values の value を逆数にし、その単位マップの各エントリの値を負にする。
values を返す。

CSSMathMin

args を this の values 内部スロットの各 item について sum値を作成するで得る。
args のいずれかの item が失敗または長さが1より大きければ失敗を返す。
args の各単位マップがすべて同じでなければ失敗を返す。
唯一の item の値が最小のものを返す。

CSSMathMax

args を this の values 内部スロットの各 item について sum値を作成するで得る。
args のいずれかの item が失敗または長さが1より大きければ失敗を返す。
args の各単位マップがすべて同じでなければ失敗を返す。
唯一の item の値が最大のものを返す。

単位マップからtypeを作成する unit map について：

types を空リストで初期化。
unit map の各 unit → power について：
1. type を typeを作成する（unitから）で得る。
2. type の唯一の value を power に設定。
3. type を types に追加。
types の全 item を乗算した結果を返す。

2つの単位マップの積 units1 と units2 の結果は次の通り：

result を units1 のコピーで初期化。
units2 の各 unit → power について：
1. result[unit] が存在すれば、その値に power を加算。
2. なければ result[unit] に power を設定。
result を返す。

parse() メソッドは、CSS文字列から CSSNumericValue を直接構築できる。これは static メソッドであり、 CSSNumericValue インターフェースオブジェクト上に存在し、インスタンス上にはないことに注意。

parse(cssText) メソッドは、呼び出された時、次の手順を実行する：

cssText からコンポーネント値をパースし、result とする。 result が構文エラーなら throw で SyntaxError、アルゴリズム終了。
result が <number-token>、<percentage-token>、<dimension-token>、または math function でなければ throw で SyntaxError、アルゴリズム終了。
result が <dimension-token> かつ typeを作成する（result の単位から）が失敗なら、throw で SyntaxError、アルゴリズム終了。
result を数値型値としてreify し、その結果を返す。

4.3.2. 数値値の型付け

各CSSNumericValue には、関連付けられた型があります。これはマップで、基本型を整数値に対応させています（各型の指数を表します。例えば、<length>²は calc(1px * 1em) の場合 «[ "length" → 2 ]» となります）。また関連付けられたpercent hint（この型が実際にはパーセンテージであるが、最終的にhintされた基本型に解決されるため型内で置き換えられている）も持ちます。

基本型は "length"（長さ）, "angle"（角度）, "time"（時間）, "frequency"（周波数）, "resolution"（解像度）, "flex"（フレックス）, "percent"（パーセント）です。型のエントリ順は必ずこの基本型の順序に一致します。 percent hintはnullまたは"percent"以外の基本型です。

注: CSSに新しい単位型が追加されると、この基本型リストやCSSのmath関数にも追加されます。

型を作成するには、文字列 unitから、以下の分岐に従います:

unit が "number" の場合: «[ ]»（空のマップ）を返す
unit が "percent" の場合: «[ "percent" → 1 ]»を返す
unit が<length>単位の場合: «[ "length" → 1 ]»を返す
unit が<angle>単位の場合: «[ "angle" → 1 ]»を返す
unit が<time>単位の場合: «[ "time" → 1 ]»を返す
unit が<frequency>単位の場合: «[ "frequency" → 1 ]»を返す
unit が<resolution>単位の場合: «[ "resolution" → 1 ]»を返す
unit が<flex>単位の場合: «[ "flex" → 1 ]»を返す
それ以外: 失敗を返す。

いずれの場合も、関連するpercent hintはnullです。

2つの型を加算するには type1 と type2 で、以下の手順を実行します:

type1とtype2を新しいコピーに置換する。 finalTypeを新しい型（空のマップ、nullのpercent hint）で初期化。
両方のtype1とtype2が異なる値の非nullpercent hintを持つ場合

型は加算できません。失敗を返す。

type1が非nullのpercent hinthintを持ち、type2は持たない場合

percent hintを適用 hintをtype2に。

逆の場合も同様にtype2が非nullのpercent hintを持ちtype1は持たない場合。

それ以外

次のステップへ進む。
type1の非ゼロ値のエントリが全て同値でtype2に含まれ、逆も同様の場合

type1のエントリを全てfinalTypeにコピーし、さらにtype2のエントリもfinalTypeに未登録分のみコピーする。 finalTypeのpercent hintをtype1のpercent hintに設定。 finalTypeを返す。

type1と/またはtype2が非ゼロの"percent"を含み、他のキー（"percent"以外）も非ゼロの場合
"percent"以外の各基本型hintについて:
1. 仮に両方のtype1とtype2にhintでpercent hintを適用する。
2. その後、type1の非ゼロ値エントリがすべて同値でtype2に含まれ、逆も同様なら type1のエントリをfinalTypeにコピーし、 type2の未登録分もコピー。 finalTypeのpercent hintをhintに設定。 finalTypeを返す。
3. そうでなければ、ループ開始時点のtype1とtype2に戻す。
ループ終了までfinalTypeを返さなければ加算不可。失敗を返す。

注: 合計値だけ見て加算不可を判定できる場合もあります。合計値が異なれば加算不可です。
それ以外

型は加算できません。失敗を返す。

percent hintを適用するには hint を type に対し次を行う：

typeがhintを含まなければ、type[hint]に0を設定。
typeが"percent"を含むなら、type["percent"]をtype[hint]に加算し、 type["percent"]を0に設定する。
typeのpercent hintにhintを設定。

2つの型を乗算する type1 と type2について、以下を実行：

type1とtype2を新しいコピーに置換する。 finalTypeを新しい型（空のマップ、nullのpercent hint）で初期化。
両方のtype1とtype2が異なる値の非nullpercent hintを持つ場合、乗算不可。失敗を返す。
type1が非nullのpercent hinthintを持ちtype2は持たない場合、 percent hintを適用 hintをtype2に。

逆の場合も同様。
type1のエントリを全てfinalTypeにコピーし、 type2の各baseType→powerについて：
1. finalType[baseType]が存在すれば、その値にpowerを加算。
2. なければfinalType[baseType]にpowerを設定。
finalTypeのpercent hintをtype1のpercent hintに設定。
finalTypeを返す。

型を反転するには type について次の手順を実行：

resultを新しい型（空のマップ、typeのpercent hint）で初期化。
typeの各unit→exponentについて、 result[unit]に(-1 * exponent)を設定。
resultを返す。

型は特定の場合に CSSの生成規則に一致するとされます：

型が <length>に一致するのは、唯一の非ゼロエントリが«[ "length" → 1 ]»の場合。他の<angle>、 <time>、 <frequency>、 <resolution>、 <flex>も同様。

値の利用コンテキストで<percentage>値が許容されない場合、型は percent hintがnullであれば一致とみなされます。
型が <percentage>に一致するのは、唯一の非ゼロエントリが«[ "percent" → 1 ]»の場合。
型が <length-percentage>に一致するのは、唯一の非ゼロエントリが«[ "length" → 1 ]»または«[ "percent" → 1 ]»の場合。 <angle-percentage>、 <time-percentage>なども同様。
型が <number>に一致するのは、非ゼロエントリがない場合。

値の利用コンテキストで<percentage>値が許容されない場合、型は percent hintがnullであれば一致とみなされます。

注: 型は加算に関して半群、乗算に関してモノイド（乗法単位元は«[ ]»かつnullのpercent hint）であり、つまり結合・可換則が成立します。そのため仕様では、型をペアごとに加算せずとも、任意個数まとめて曖昧なく加算できます。

4.3.3. 値 + 単位: `CSSUnitValue` オブジェクト

単一の単位（または裸の数値やパーセンテージ）で表現できる数値は、 CSSUnitValueとして表現されます。

例えば、スタイルシート内の値5pxは CSSUnitValue によって表現されます。そのvalue属性は5に、unit属性は"px"に設定されます。

同様に、スタイルシート内の値10は CSSUnitValue によって表現されます。そのvalue属性は10に、unit属性は"number"に設定されます。

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSUnitValue : CSSNumericValue {
    constructor(double value, USVString unit);
    attribute double value;
    readonly attribute USVString unit;
};

CSSUnitValue(value, unit) コンストラクターは、呼び出された際に次の手順を実行しなければなりません:

unitから型を生成するが失敗を返した場合、TypeErrorを TypeError として投げ、このアルゴリズムを中止する。
新しいCSSUnitValue を返す。そのvalue 内部スロットにvalueを、unit にunitを設定する。

CSSUnitValueの型は、そのunit 内部スロットから型を生成する結果です。

ペアからCSSUnitValueを生成する (num, unit)とは、新しいCSSUnitValue オブジェクトを返すことです。そのvalue 内部スロットにはnumを、 unit 内部スロットにはunitを設定します。

例えば、 (5, "px")から新しい単位値を生成すると new CSSUnitValue(5, "px")と同等のオブジェクトが作成されます。

注: これは仕様内部のアルゴリズムであり、アルゴリズム内で必要なときに単位値を簡単に生成できるようにするためのものです。

CSSUnitValueを変換する this を単位 unit に変換するには、次の手順を実行します:

old unit を this の unit 内部スロットの値とし、 old value を this の value 内部スロットの値とする。
old unit と unit が互換性のある単位でない場合、失敗を返す。
新しいCSSUnitValue を返す。そのunit 内部スロットはunitに、 value 内部スロットは old valueに old unitとunitの変換比率を掛けた値を設定する。

4.3.4. 複雑な数値: `CSSMathValue` オブジェクト

単一の値+単位よりも複雑な数値は、 CSSMathValue のサブクラスの木構造で表現され、最終的には葉ノードとしてCSSUnitValue オブジェクトとなります。 CSSのcalc()、min()、max() 関数はこのように表現されます。

例えば、 CSSの値calc(1em + 5px)は CSSMathSum によって CSSMathSum(CSS.em(1), CSS.px(5))のように表現されます。

より複雑な式、例えばcalc(1em + 5px * 2)は、 CSSMathSum(CSS.em(1), CSSMathProduct(CSS.px(5), 2))のようなネストされた構造で表現されます。

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSMathValue : CSSNumericValue {
    readonly attribute CSSMathOperator operator;
};

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSMathSum : CSSMathValue {
    constructor(CSSNumberish... args);
    readonly attribute CSSNumericArray values;
};

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSMathProduct : CSSMathValue {
    constructor(CSSNumberish... args);
    readonly attribute CSSNumericArray values;
};

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSMathNegate : CSSMathValue {
    constructor(CSSNumberish arg);
    readonly attribute CSSNumericValue value;
};

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSMathInvert : CSSMathValue {
    constructor(CSSNumberish arg);
    readonly attribute CSSNumericValue value;
};

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSMathMin : CSSMathValue {
    constructor(CSSNumberish... args);
    readonly attribute CSSNumericArray values;
};

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSMathMax : CSSMathValue {
    constructor(CSSNumberish... args);
    readonly attribute CSSNumericArray values;
};

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSMathClamp : CSSMathValue {
    constructor(CSSNumberish lower, CSSNumberish value, CSSNumberish upper);
    readonly attribute CSSNumericValue lower;
    readonly attribute CSSNumericValue value;
    readonly attribute CSSNumericValue upper;
};

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSNumericArray {
    iterable<CSSNumericValue>;
    readonly attribute unsigned long length;
    getter CSSNumericValue (unsigned long index);
};

enum CSSMathOperator {
    "sum",
    "product",
    "negate",
    "invert",
    "min",
    "max",
    "clamp",
};

注: CSSMathValue は純粋なスーパークラスであり、直接構築することはできません。すべての「math」演算の共通属性のみを持つために存在します。

operator 属性は、CSSMathValue this において取得時、thisのインターフェースに応じて以下の文字列を返します:

CSSMathSum: "sum"
CSSMathProduct: "product"
CSSMathMin: "min"
CSSMathMax: "max"
CSSMathClamp: "clamp"
CSSMathNegate: "negate"
CSSMathInvert: "invert"

注: これらは全て CSSMathOperator enum のインスタンスです。

CSSMathSum(...args) コンストラクターは、呼び出された際に次の手順を実行しなければなりません:

args の各 item を、numberish値の修正結果に置き換える。
args が空の場合、SyntaxErrorを投げる。
type を、すべての itemの型を加算した結果とする。 type が失敗なら、TypeErrorを投げる。
新しいCSSMathSumを返す。そのvalues 内部スロットにargsを設定する。

CSSMathMin(...args) および CSSMathMax(...args) のコンストラクターは、上記と同様に定義されますが、最後のステップでそれぞれ新しい CSSMathMin または CSSMathMax オブジェクトを返します。

CSSMathProduct(...args) コンストラクターは上記と同様に定義されますが、 3ステップ目で型を乗算し、最後のステップで CSSMathProductを返します。

CSSMathClamp(lower, value, upper) コンストラクターは、呼び出された際に次の手順を実行しなければなりません:

lower, value, upper をそれぞれ numberish値の修正結果に置き換える。
type を lower, value, upper の型を加算した結果とする。 type が失敗なら TypeError を投げる。
新しいCSSMathClampを返す。そのlower、 value、 upper 内部スロットに、それぞれlower, value, upperを設定する。

CSSMathNegate(arg) コンストラクターは、呼び出された際に次の手順を実行しなければなりません:

arg を numberish値の修正結果に置き換える。
新しいCSSMathNegateを返す。そのvalue 内部スロットにargを設定する。

CSSMathInvert(arg) コンストラクターは上記と同様に定義されますが、最後のステップで新しい CSSMathInvert オブジェクトを返します。

CSSMathValueの型はクラスにより異なります:

CSSMathSum
CSSMathMin
CSSMathMax: 型はそのvalues 内部スロット内の各itemの型を加算した結果です。
CSSMathClamp: 型は lower、 value、 upper 内部スロットの型を加算した結果です。
CSSMathProduct: 型はそのvalues 内部スロット内の各itemの型を乗算した結果です。
CSSMathNegate: 型はそのvalue 内部スロットの型と同じです。
CSSMathInvert: 型はそのvalue 内部スロットの型と同じですが、すべての値が反転されます。

length 属性は、CSSNumericArray 内に含まれているCSSNumericValueの個数を示します。

インデックス付きプロパティゲッターは、CSSNumericArray の指定したインデックスにあるCSSNumericValueを取得します。

4.3.5. 数値ファクトリー関数

以下のファクトリー関数を使用することで、コンストラクターを直接使うよりもずっと簡潔に新しい数値を作成できます。

partial namespace CSS {
    CSSUnitValue number(double value);
    CSSUnitValue percent(double value);

    // <length>
    CSSUnitValue cap(double value);
    CSSUnitValue ch(double value);
    CSSUnitValue em(double value);
    CSSUnitValue ex(double value);
    CSSUnitValue ic(double value);
    CSSUnitValue lh(double value);
    CSSUnitValue rcap(double value);
    CSSUnitValue rch(double value);
    CSSUnitValue rem(double value);
    CSSUnitValue rex(double value);
    CSSUnitValue ric(double value);
    CSSUnitValue rlh(double value);
    CSSUnitValue vw(double value);
    CSSUnitValue vh(double value);
    CSSUnitValue vi(double value);
    CSSUnitValue vb(double value);
    CSSUnitValue vmin(double value);
    CSSUnitValue vmax(double value);
    CSSUnitValue svw(double value);
    CSSUnitValue svh(double value);
    CSSUnitValue svi(double value);
    CSSUnitValue svb(double value);
    CSSUnitValue svmin(double value);
    CSSUnitValue svmax(double value);
    CSSUnitValue lvw(double value);
    CSSUnitValue lvh(double value);
    CSSUnitValue lvi(double value);
    CSSUnitValue lvb(double value);
    CSSUnitValue lvmin(double value);
    CSSUnitValue lvmax(double value);
    CSSUnitValue dvw(double value);
    CSSUnitValue dvh(double value);
    CSSUnitValue dvi(double value);
    CSSUnitValue dvb(double value);
    CSSUnitValue dvmin(double value);
    CSSUnitValue dvmax(double value);
    CSSUnitValue cqw(double value);
    CSSUnitValue cqh(double value);
    CSSUnitValue cqi(double value);
    CSSUnitValue cqb(double value);
    CSSUnitValue cqmin(double value);
    CSSUnitValue cqmax(double value);
    CSSUnitValue cm(double value);
    CSSUnitValue mm(double value);
    CSSUnitValue Q(double value);
    CSSUnitValue in(double value);
    CSSUnitValue pt(double value);
    CSSUnitValue pc(double value);
    CSSUnitValue px(double value);

    // <angle>
    CSSUnitValue deg(double value);
    CSSUnitValue grad(double value);
    CSSUnitValue rad(double value);
    CSSUnitValue turn(double value);

    // <time>
    CSSUnitValue s(double value);
    CSSUnitValue ms(double value);

    // <frequency>
    CSSUnitValue Hz(double value);
    CSSUnitValue kHz(double value);

    // <resolution>
    CSSUnitValue dpi(double value);
    CSSUnitValue dpcm(double value);
    CSSUnitValue dppx(double value);

    // <flex>
    CSSUnitValue fr(double value);
};

上記のすべてのメソッドは、double型のvalueを引数に呼び出された際、 CSSUnitValue の新しいインスタンスを返さなければなりません。そのvalue 内部スロットにはvalueが設定され、 unit 内部スロットにはここで定義されたメソッド名が設定されます。

注: 使用される単位は、関数が現在どの変数名であるかには依存しません。例えば let foo = CSS.px; let val = foo(5); の場合、 {value: 5, unit: "foo"} の CSSUnitValue は返されません。上記の「名前」についての説明は、約60個の関数ごとに個別に単位を定義しないための省略記法にすぎません。

上記のメソッド一覧は、ある特定の時点でのCSSの有効な事前定義単位セットを反映しています。この一覧は今後更新されていきますが、常に最新であるとは限りません。実装が上記リストに対応するメソッドを持たない追加のCSS単位をサポートする場合でも、既存の CSSNumericType 値に対応するものであれば、その単位名を定義された正規の表記でメソッド名にしたメソッドを、上記の一般的な挙動で追加でサポートしなければなりません。

もし実装が、既存の CSSNumericType 値に対応しない単位をサポートする場合、本仕様で定義されたAPIにおいてはそれらの単位をサポートしてはなりません。その単位と型が明示的に本仕様に追加されるよう申請すべきです。単位から適切な型名が自明になるわけではないためです。

実装が特定の単位をサポートしていない場合は、上記リストの該当するメソッドを実装してはなりません。

例えば、CSS Speech仕様 [CSS-SPEECH-1] では、デシベル dB およびセミトーン st という2つの追加単位が定義されています。現在のブラウザ実装はいずれもこれらをサポートしておらず、対応予定もありません。そのため上記リストには含まれていませんが、もし実装がSpeech仕様をサポートする場合、 CSS.dB() および CSS.st() メソッドも公開しなければなりません。

4.4. `CSSTransformValue` オブジェクト

CSSTransformValue オブジェクトは <transform-list> 値を表し、 transform プロパティで使用されます。これらは 1つ以上の CSSTransformComponent を「含み」、それぞれが個別の <transform-function> 値を表します。

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSTransformValue : CSSStyleValue {
    constructor(sequence<CSSTransformComponent> transforms);
    iterable<CSSTransformComponent>;
    readonly attribute unsigned long length;
    getter CSSTransformComponent (unsigned long index);
    setter CSSTransformComponent (unsigned long index, CSSTransformComponent val);

    readonly attribute boolean is2D;
    DOMMatrix toMatrix();
};

CSSTransformValueの反復する値は、リストであり、 CSSTransformComponentのリストです。

CSSTransformValue(transforms) コンストラクターは、呼び出されたとき、次の手順を実行しなければなりません:

transformsが空の場合、TypeErrorを投げる。
新しいCSSTransformValueを返す。その反復する値はtransformsである。

is2D属性は、CSSTransformValue thisにおいて取得されたとき、全てのfuncがthisの反復する値に含まれているとき、 funcのis2D属性がtrueを返すなら trueを返す。それ以外の場合はfalseを返す。

toMatrix()メソッドは、CSSTransformValue thisにおいて呼び出されたとき、次の手順を実行しなければなりません:

matrixを新しいDOMMatrixとする。初期状態は単位行列であり、そのis2D内部スロットはtrueに設定する。
全てのfuncについて、thisの反復する値を反復する:
1. funcMatrixをfuncのDOMMatrixで、 toMatrix()を呼び出して得る。
2. matrixを、matrixとfuncMatrixで表される行列の積に更新する。
matrixを返す。

length属性は、CSSTransformValue に含まれる変形コンポーネントの数を示します。

これらは[[values]]内部スロットを持ちます。これはCSSTransformComponentオブジェクトのリストです。このリストがオブジェクトの反復する値です。

CSSTransformValue thisのサポートされるプロパティインデックスは、0以上でthisの[[values]]内部スロットのサイズ未満の整数です。

CSSTransformValue thisとインデックスnのインデックス付きプロパティ値の決定は、 thisの[[values]]内部スロットをvaluesとし、 values[n]を返す。

CSSTransformValue this、インデックスn、値new valueの既存のインデックス付きプロパティ値の設定は、 thisの[[values]]内部スロットをvaluesとし、 values[n]にnew valueを設定する。

CSSTransformValue this、インデックスn、値new valueの新しいインデックス付きプロパティ値の設定は、 thisの[[values]]内部スロットをvaluesとする。 nがvaluesのサイズと等しくない場合、RangeErrorを投げる。そうでなければ、new valueをvaluesに追加する。

typedef (CSSNumericValue or CSSKeywordish) CSSPerspectiveValue;

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSTransformComponent {
    stringifier;
    attribute boolean is2D;
    DOMMatrix toMatrix();
};

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSTranslate : CSSTransformComponent {
    constructor(CSSNumericValue x, CSSNumericValue y, optional CSSNumericValue z);
    attribute CSSNumericValue x;
    attribute CSSNumericValue y;
    attribute CSSNumericValue z;
};

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSRotate : CSSTransformComponent {
    constructor(CSSNumericValue angle);
    constructor(CSSNumberish x, CSSNumberish y, CSSNumberish z, CSSNumericValue angle);
    attribute CSSNumberish x;
    attribute CSSNumberish y;
    attribute CSSNumberish z;
    attribute CSSNumericValue angle;
};

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSScale : CSSTransformComponent {
    constructor(CSSNumberish x, CSSNumberish y, optional CSSNumberish z);
    attribute CSSNumberish x;
    attribute CSSNumberish y;
    attribute CSSNumberish z;
};

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSSkew : CSSTransformComponent {
    constructor(CSSNumericValue ax, CSSNumericValue ay);
    attribute CSSNumericValue ax;
    attribute CSSNumericValue ay;
};

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSSkewX : CSSTransformComponent {
    constructor(CSSNumericValue ax);
    attribute CSSNumericValue ax;
};

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSSkewY : CSSTransformComponent {
    constructor(CSSNumericValue ay);
    attribute CSSNumericValue ay;
};

/* Note that skew(x,y) is *not* the same as skewX(x) skewY(y),
   thus the separate interfaces for all three. */

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSPerspective : CSSTransformComponent {
    constructor(CSSPerspectiveValue length);
    attribute CSSPerspectiveValue length;
};

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSMatrixComponent : CSSTransformComponent {
    constructor(DOMMatrixReadOnly matrix, optional CSSMatrixComponentOptions options = {});
    attribute DOMMatrix matrix;
};

dictionary CSSMatrixComponentOptions {
    boolean is2D;
};

is2D 属性は、変形が2Dか3Dかを示します。 trueのとき、 3D変形に関連する属性（例えば CSSTranslate.z 属性など）は、表現する変形に全く影響しません。

注記: これはオブジェクトのシリアライズや、オブジェクトの「等価な4x4行列」などの概念に影響します。

is2D 設計上の考慮事項

レガシーな理由により、 2D変形と3D変形は効果が同じでも区別されています。 translateZ(0px) はページ上で観察可能な効果があります。それが単位変換と定義されていても、 UAが要素に対して3Dベースの最適化を有効化するためです。

これを反映する方法はいくつかありました—3D関連属性をnullableにすることや、 2D/3Dのインターフェースを分けることなど—しかし現在の設計（著者が切り替えられるスイッチで挙動を決定する方式）を選択しました。これにより多くの場合で、著者は2Dか3Dかを気にせず変形を扱えますが、「偶然」2D変形を3Dにしてしまうことも防げます。

toMatrix() メソッドは、 CSSTransformComponent の this に対して呼び出された場合、次の手順を実行しなければなりません:

matrix を新しい DOMMatrix オブジェクトとして、 this の等価な4x4変換行列（CSS Transforms 1 §  14. Mathematical Description of Transform Functionsで定義）で初期化し、 is2D 内部スロットを this の is2D 内部スロットと同じ値に設定します。

注記: is2D フラグは、どの変形（=どの等価行列）を CSSTransformComponent が表すかに影響します。

このような行列の各要素はpx単位を基準に定義されます。 this に含まれる行列生成に関与する <length> のいずれかが pxと互換性のある単位（例えば相対長さやパーセンテージ）でない場合は、例外を投げます（TypeError）。
matrix を返します。

CSSTranslate(x, y, z) コンストラクタは、呼び出されたときに以下の手順を実行しなければなりません:

x または y が一致しない場合 <length-percentage> に、例外を投げます（TypeError）。
z が渡され、かつ一致しない場合 <length> に、例外を投げます（TypeError）。
this を新しい CSSTranslate オブジェクトとして、 x と y の内部スロットを x と y に設定します。
z が渡された場合、 this の z 内部スロットを z に設定し、 this の is2D 内部スロットを false に設定します。
z が渡されなかった場合、 this の z 内部スロットを新しい単位値 (0, "px") に設定し、 this の is2D 内部スロットを true に設定します。
this を返します。

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

angle が一致しない場合 <angle> に、例外を投げます（TypeError）。
新しい CSSRotate を返します。その angle 内部スロットは angle、 x と y 内部スロットは新しい単位値 (0, "number")、 z 内部スロットは新しい単位値 (1, "number")、 is2D 内部スロットは true に設定されます。

CSSRotate(x, y, z, angle) コンストラクタは、呼び出されたときに次の手順を実行しなければなりません:

angle が一致しない場合 <angle> に、例外を投げます（TypeError）。
x、y、z を数値らしき値を修正する結果で置き換えます。
x、y、z のいずれかが一致しない場合 <number> に、例外を投げます（TypeError）。
新しい CSSRotate を返します。その angle 内部スロットは angle、 x、 y、 z 内部スロットは x、y、z に、 is2D 内部スロットは false に設定されます。

x、y、およびz属性は、新しい値valが設定されたとき、数値らしき値を修正するをvalに対して行い、対応する内部スロットにその結果を設定しなければならない。

CSSScale(x, y, z)コンストラクターは、呼び出されたとき、以下の手順を実行しなければならない:

x、y、および（渡された場合）zを、数値らしき値を修正するの結果で置き換える。
x、y、または（渡された場合）zが一致しない場合、<number>に、例外を投げる（TypeError）。
thisを新しいCSSScaleオブジェクトとして、 xおよび y の内部スロットにxとyを設定する。
zが渡された場合、 thisのz 内部スロットにzを設定し、 thisのis2D 内部スロットをfalseに設定する。
zが渡されなかった場合、 thisのz 内部スロットに新しい単位値(1, "number")を設定し、 thisのis2D 内部スロットをtrueに設定する。
thisを返す。

CSSSkew(ax, ay)コンストラクターは、呼び出されたとき、以下の手順を実行しなければならない:

axまたはayが一致しない場合、<angle>に、例外を投げる（TypeError）。
新しいCSSSkewオブジェクトを返す。そのaxおよび ay の内部スロットはaxとay、 is2D 内部スロットはtrueに設定される。

CSSSkewX(ax) コンストラクターは、呼び出されたとき、以下の手順を実行しなければならない:

axが一致しない場合、<angle>に、例外を投げる（TypeError）。
新しいCSSSkewXオブジェクトを返す。そのax 内部スロットはax、 is2D 内部スロットはtrueに設定される。

CSSSkewY(ay) コンストラクターは、呼び出されたとき、以下の手順を実行しなければならない:

ayが一致しない場合、<angle>に、例外を投げる（TypeError）。
新しいCSSSkewYオブジェクトを返す。そのay 内部スロットはay、 is2D 内部スロットはtrueに設定される。

is2D属性は、 CSSSkew、 CSSSkewX、またはCSSSkewYオブジェクトで設定されても、何もしない。

注記: skew()、skewX()、およびskewY()関数は常に2D変形を表す。

CSSPerspective(length)コンストラクターは、呼び出されたとき、以下の手順を実行しなければならない:

lengthがCSSNumericValueの場合:
1. lengthが一致しない場合、<length>に、例外を投げる（TypeError）。
それ以外の場合（つまりlengthがCSSNumericValueでない場合）:
1. キーワードらしき値を修正するをlengthに対して行い、その結果の値をlengthに設定する。
2. lengthがASCII大文字小文字を区別しない一致でキーワードnoneを表さない場合、例外を投げる（TypeError）。
新しいCSSPerspective オブジェクトを返す。そのlength 内部スロットはlength、 is2D 内部スロットはfalseに設定される。

is2D属性は、 CSSPerspective オブジェクトで設定されても、何もしない。

注記: perspective()関数は常に3D変形を表す。

CSSMatrixComponent(matrix, options) コンストラクターは、呼び出されたとき、以下の手順を実行しなければならない:

thisを新しいCSSMatrixComponent オブジェクトとして、 matrix 内部スロットにmatrixを設定する。
optionsが渡され、 is2D フィールドを持つ場合、 thisのis2D 内部スロットにそのフィールドの値を設定する。
それ以外の場合、 thisのis2D 内部スロットにmatrixのis2D 内部スロットの値を設定する。
thisを返す。

各CSSTransformComponent は、複数の基礎となる変形関数のいずれかに対応できる。例えば、CSSTranslateで x値が10px、yおよびz値が0pxの場合、以下のいずれも表現可能である:

translate(10px)
translate(10px, 0)
translateX(10px)
translate3d(10px, 0, 0)

ただし文字列化するときは、 is2D 内部スロットがtrueかfalseかに応じて、常にtranslate(10px, 0px)またはtranslate3d(10px, 0px, 0px)のいずれかが出力される。

4.5. `CSSImageValue` オブジェクト

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSImageValue : CSSStyleValue {
};

CSSImageValue オブジェクトは <image> 生成規則を受け付けるプロパティの値を表します。例えば background-image、list-style-image、border-image-source などです。

注記: このオブジェクトは意図的に不透明に設計されており、どんな種類の画像を含んでいるかや画像の詳細は公開しません。これは Custom Paint 用に画像を表す何かが必要ですが、 URLの扱いや読み込み仕様を厳密に定めるには十分な複雑さがあり、この仕様のタイムライン内で現実的に定義するのが難しいためです。今後のレベルで拡張される予定です。

CSSImageValue オブジェクトが <image> のうち URL を含むもの（例えば url() や image() など）を表す場合、その値の扱いは現在の CSS での扱いと同じです。特に、相対URLやフラグメントURLの解決は CSS の通常の挙動と同じです。

例えば、相対URLはそれが含まれるスタイルシートのURL （または style 要素や style 属性で指定された場合はドキュメントのURL）を基準に解決されます。この解決はパース時に即座に行われるのではなく、値の計算過程の現在未指定の時点で行われます。

したがって、ある要素のスタイルに background-image: url(foo); を指定し、その値を Typed OM で抽出して別のドキュメントの要素に設定した場合、元の要素と設定先の要素ではベースURLが異なるため URL の解決結果も異なります。

一方、抽出した値が computed value（computedStyleMap() 由来）だった場合、すでに絶対URLに解決されているため、その後どこに設定しても同じ挙動となります。（ただしフラグメントURLの場合は CSS の扱いが異なり、完全には解決されず、常に現在のドキュメントを基準として解決されます。）

4.6. `CSSColorValue` オブジェクト

CSSColorValue オブジェクトは <color> 値を表します。これは抽象スーパークラスであり、サブクラスが個々の CSS カラー関数を表します。

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSColorValue : CSSStyleValue {
    [Exposed=Window] static (CSSColorValue or CSSStyleValue) parse(USVString cssText);
};

parse(cssText) メソッドは、呼び出されたとき、次の手順を実行しなければならない:

cssText を <color> として構文解析し、result にその結果を格納する。 result が構文エラーの場合、SyntaxError を SyntaxError として投げ、このアルゴリズムを中止する。
reify a color value を result から行い、その結果を返す。

===============

いくつかの IDL 型が CSSColorValue で使用されるために定義されています:

typedef (CSSNumberish or CSSKeywordish) CSSColorRGBComp;
typedef (CSSNumberish or CSSKeywordish) CSSColorPercent;
typedef (CSSNumberish or CSSKeywordish) CSSColorNumber;
typedef (CSSNumberish or CSSKeywordish) CSSColorAngle;

これらの型は型シグネチャとしては同じですが、それぞれ異なる値を表します。CSSColorRGBComp は標準的には <number>、 <percentage>、またはキーワード none のいずれかです。 CSSColorPercent は標準的には <percentage> またはキーワード none、CSSColorNumber は標準的には <number> またはキーワード none、 CSSColorAngle は標準的には <angle> またはキーワード none です。

これらに対応する rectification アルゴリズムも double 値を CSSNumericValue に変換する際の挙動がそれぞれ異なります。

CSSColorRGBComp を rectify する val:

val が double の場合、 (val*100, "percent") で新しい単位値に置き換える。
val が DOMString の場合、キーワードらしき値を修正するの結果に置き換える。
val が CSSNumericValue で、 number や percentage に一致する場合、 val を返す。
val が CSSKeywordValue で、その value 内部スロットが "none"（ASCII 大文字小文字区別なし一致）なら val を返す。
SyntaxError を投げる。

CSSColorPercent を rectify する val:

val が double の場合、 (val*100, "percent") で新しい単位値に置き換える。
val が DOMString の場合、キーワードらしき値を修正するの結果に置き換える。
val が CSSNumericValue で、 percentage に一致する場合 val を返す。
val が CSSKeywordValue で、その value 内部スロットが "none"（ASCII 大文字小文字区別なし一致）なら val を返す。
SyntaxError を投げる。

CSSColorNumber を rectify する val:

val が double の場合、 (val, "number") で新しい単位値に置き換える。
val が DOMString の場合、キーワードらしき値を修正するの結果に置き換える。
val が CSSNumericValue で、 number に一致する場合 val を返す。
val が CSSKeywordValue で、その value 内部スロットが "none"（ASCII 大文字小文字区別なし一致）なら val を返す。
SyntaxError を投げる。

CSSColorAngle を rectify する val:

val が double の場合、 (val, "deg") で新しい単位値に置き換える。
val が DOMString の場合、キーワードらしき値を修正するの結果に置き換える。
val が CSSNumericValue で、 angle に一致する場合 val を返す。
val が CSSKeywordValue で、その value 内部スロットが "none"（ASCII 大文字小文字区別なし一致）なら val を返す。
TypeError を投げる。

===============

TODO: stringifier を追加する

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSRGB : CSSColorValue {
    constructor(CSSColorRGBComp r, CSSColorRGBComp g, CSSColorRGBComp b, optional CSSColorPercent alpha = 1);
    attribute CSSColorRGBComp r;
    attribute CSSColorRGBComp g;
    attribute CSSColorRGBComp b;
    attribute CSSColorPercent alpha;
};

CSSRGB クラスは、CSS の rgb()／rgba() 関数を表します。

CSSRGB(r, g, b, optional alpha) コンストラクターは、呼び出されたとき次の手順を実行しなければなりません:

r, g, b をそれぞれ CSSColorRGBComp を rectify する結果で置き換えます。alpha は CSSColorPercent を rectify する結果で置き換えます。
新しい CSSRGB を返します。その r, g, b, alpha の内部スロットをそれぞれ r, g, b, alpha に設定します。

r、g、b 属性は、CSSRGB の値に新しい値 val を設定する際、CSSColorRGBComp を rectify する結果で対応する内部スロットを設定しなければなりません。

alpha 属性は、CSSRGB の値に新しい値 val を設定する際、CSSColorPercent を rectify する結果で対応する内部スロットを設定しなければなりません。

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSHSL : CSSColorValue {
    constructor(CSSColorAngle h, CSSColorPercent s, CSSColorPercent l, optional CSSColorPercent alpha = 1);
    attribute CSSColorAngle h;
    attribute CSSColorPercent s;
    attribute CSSColorPercent l;
    attribute CSSColorPercent alpha;
};

CSSHSL クラスは、CSS の hsl()／hsla() 関数を表します。

CSSHSL(h, s, l, optional alpha) コンストラクターは、呼び出されたとき次の手順を実行しなければなりません:

h を CSSColorAngle を rectify する結果で置き換えます。s, l, alpha はそれぞれ CSSColorPercent を rectify する結果で置き換えます。
新しい CSSHSL を返します。その h, s, l, alpha の内部スロットをそれぞれ h, s, l, alpha に設定します。

h 属性は、CSSHSL の値に新しい値 val を設定する際、CSSColorAngle を rectify する結果で対応する内部スロットを設定しなければなりません。

s、l、alpha 属性は、CSSHSL の値に新しい値 val を設定する際、CSSColorPercent を rectify する結果で対応する内部スロットを設定しなければなりません。

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSHWB : CSSColorValue {
    constructor(CSSNumericValue h, CSSNumberish w, CSSNumberish b, optional CSSNumberish alpha = 1);
    attribute CSSNumericValue h;
    attribute CSSNumberish w;
    attribute CSSNumberish b;
    attribute CSSNumberish alpha;
};

CSSHWB クラスは、CSS の hwb() 関数を表します。

CSSHWB(h, w, b, optional alpha) コンストラクターは、呼び出されたとき次の手順を実行しなければなりません:

h を CSSColorAngle を rectify する結果で置き換えます。w, b, alpha はそれぞれ CSSColorPercent を rectify する結果で置き換えます。
新しい CSSHWB を返します。その h, w, b, alpha の内部スロットをそれぞれ h, w, b, alpha に設定します。

h 属性は、CSSHWB の値に新しい値 val を設定する際、CSSColorAngle を rectify する結果で対応する内部スロットを設定しなければなりません。

w、b、alpha 属性は、CSSHWB の値に新しい値 val を設定する際、CSSColorPercent を rectify する結果で対応する内部スロットを設定しなければなりません。

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSLab : CSSColorValue {
    constructor(CSSColorPercent l, CSSColorNumber a, CSSColorNumber b, optional CSSColorPercent alpha = 1);
    attribute CSSColorPercent l;
    attribute CSSColorNumber a;
    attribute CSSColorNumber b;
    attribute CSSColorPercent alpha;
};

CSSLab クラスは、CSS の lab() 関数を表します。

CSSLab(l, a, b, optional alpha) コンストラクターは、呼び出されたとき次の手順を実行しなければなりません:

a と b をそれぞれ CSSColorNumber を rectify する結果で置き換えます。l と alpha はそれぞれ CSSColorPercent を rectify する結果で置き換えます。
新しい CSSLab を返します。その l, a, b, alpha の内部スロットをそれぞれ l, a, b, alpha に設定します。

l、alpha 属性は、CSSLab の値に新しい値 val を設定する際、CSSColorPercent を rectify する結果で対応する内部スロットを設定しなければなりません。

a、b 属性は、CSSLab の値に新しい値 val を設定する際、CSSColorNumber を rectify する結果で対応する内部スロットを設定しなければなりません。

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSLCH : CSSColorValue {
    constructor(CSSColorPercent l, CSSColorPercent c, CSSColorAngle h, optional CSSColorPercent alpha = 1);
    attribute CSSColorPercent l;
    attribute CSSColorPercent c;
    attribute CSSColorAngle h;
    attribute CSSColorPercent alpha;
};

CSSLCH クラスは、CSS の lch() 関数を表します。

CSSLCH(l, c, h, optional alpha) コンストラクターは、呼び出されたとき次の手順を実行しなければなりません:

h を CSSColorAngle を rectify する結果で置き換えます。l, c, alpha はそれぞれ CSSColorPercent を rectify する結果で置き換えます。
新しい CSSLCH を返します。その l, c, h, alpha の内部スロットをそれぞれ l, c, h, alpha に設定します。

h 属性は、 CSSLCH 値に新しい値 val を設定する際、 CSSColorAngle を rectify するの結果で対応する内部スロットを設定しなければならない。

l、c、および alpha 属性は、 CSSLCH 値に新しい値 val を設定する際、 CSSColorPercent を rectify するの結果で対応する内部スロットを設定しなければならない。

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSOKLab : CSSColorValue {
    constructor(CSSColorPercent l, CSSColorNumber a, CSSColorNumber b, optional CSSColorPercent alpha = 1);
    attribute CSSColorPercent l;
    attribute CSSColorNumber a;
    attribute CSSColorNumber b;
    attribute CSSColorPercent alpha;
};

CSSOKLab クラスは CSS の oklab() 関数を表します。

CSSOKLab(l, a, b, optional alpha) コンストラクタは、呼び出されたとき、以下の手順を実行しなければなりません:

a および b をそれぞれ CSSColorNumber を補正した結果で置き換えます。 l および alpha をそれぞれ CSSColorPercent を補正した結果で置き換えます。
新しい CSSOKLab を返します。その l、 a、 b、および alpha 内部スロットを l、a、b、alpha に設定します。

l および alpha 属性は、CSSOKLab 値の新しい値 val に設定されるとき、CSSColorPercent を補正した結果を val から得て、対応する内部スロットにその結果を設定しなければなりません。

a、および b 属性は、CSSOKLab 値の新しい値 val に設定されるとき、CSSColorNumber を補正した結果を val から得て、対応する内部スロットにその結果を設定しなければなりません。

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSOKLCH : CSSColorValue {
    constructor(CSSColorPercent l, CSSColorPercent c, CSSColorAngle h, optional CSSColorPercent alpha = 1);
    attribute CSSColorPercent l;
    attribute CSSColorPercent c;
    attribute CSSColorAngle h;
    attribute CSSColorPercent alpha;
};

CSSOKLCH クラスは CSS の lch() 関数を表します。

CSSOKLCH(l, c, h, optional alpha) コンストラクタは、呼び出されたとき、以下の手順を実行しなければなりません:

h を CSSColorAngle を補正した結果で置き換えます。 l、c、alpha をそれぞれ CSSColorPercent を補正した結果で置き換えます。
新しい CSSOKLCH を返します。その l、 c、 h、および alpha 内部スロットを l、c、h、alpha に設定します。

h 属性は、CSSOKLCH 値の新しい値 val に設定されるとき、CSSColorAngle を補正した結果を val から得て、対応する内部スロットにその結果を設定しなければなりません。

l、 c、および alpha 属性は、CSSOKLCH 値の新しい値 val に設定されるとき、CSSColorPercent を補正した結果を val から得て、対応する内部スロットにその結果を設定しなければなりません。

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSColor : CSSColorValue {
    constructor(CSSKeywordish colorSpace, sequence<CSSColorPercent> channels, optional CSSNumberish alpha = 1);
    attribute CSSKeywordish colorSpace;
    attribute ObservableArray<CSSColorPercent> channels;
    attribute CSSNumberish alpha;
};

CSSColor クラスは CSS の color() 関数を表します。

CSSColor(colorSpace, channels, optional alpha) コンストラクタは、呼び出された際に、以下の手順を実行しなければなりません:

colorSpace を keywordish value を補正した結果で置き換えます。 channels の各項目を CSSColorPercent を補正した結果で置き換えます。 alpha を CSSColorPercent を補正した結果で置き換えます。
新しい CSSColor を返します。その colorSpace、 channels、および alpha 内部スロットを colorSpace、channels、alpha に設定します。

colorSpace 属性は、CSSColor 値に新しい値 val を設定する際、keywordish value を補正した結果を val から得て、対応する内部スロットにその結果を設定しなければなりません。

alpha 属性は、CSSColor 値に新しい値 val を設定する際、CSSColorPercent を補正した結果を val から得て、対応する内部スロットにその結果を設定しなければなりません。

CSSColor 値の channels 属性のインデックス i に値 val を設定するには:

val を CSSColorPercent を補正した結果で置き換えます。
channels の backing list の i 番目の値を val に設定します。

CSSColor 値の channels 属性のインデックス i に値 val を削除するには:

channels の backing list から i 番目の値を削除します。

5. `CSSStyleValue` 実体化

この節では、Typed OM オブジェクトが内部表現から構築される方法、すなわち実体化というプロセスについて説明します。

すべての実体化に共通する一般原則があり、個別のケースごとに再記述されていません:

内部表現がリスト値属性プロパティ由来の場合、このリストはプロパティの1回分の実体化方法を定義します。複数回分は StylePropertyMap.getAll() から複数値として反映されます。
内部表現に var() 参照が含まれていた場合、どのプロパティであってもコンポーネント値リストの実体化により実体化されます。

5.1. プロパティ固有のルール

以下のリストは、すべてのCSSプロパティについて、指定値・算出値両方の実体化挙動を定義します。

未登録のカスタムプロパティ

指定値・算出値ともに、値からコンポーネント値リストの実体化を行い、その結果を返します。

登録済みカスタムプロパティ

CSS Properties and Values API 1 § 6.2 CSSStyleValue Reificationで説明される通りに実体化されます。

align-content

align-items

指定値・算出値ともに:

値が normal または stretch の場合、値から識別子の実体化を行い、その結果を返す。
値が baseline または first baseline, の場合、"baseline" の識別子の実体化を行い、その結果を返す。
値が <self-position> で <overflow-position> を伴わない場合、値から識別子の実体化を行い、その結果を返す。
それ以外の場合、CSSStyleValue として実体化し、その結果を返す。

align-self

指定値・算出値ともに:

値が auto、normal、stretch の場合、値から識別子の実体化を行い、その結果を返す。
値が baseline または first baseline, の場合、"baseline" の識別子の実体化を行い、その結果を返す。
値が <self-position> で <overflow-position> を伴わない場合、値から識別子の実体化を行い、その結果を返す。
それ以外の場合、CSSStyleValue として実体化し、その結果を返す。

alignment-baseline

指定値・算出値ともに、値から識別子の実体化を行い、その結果を返す。

all

指定値・算出値ともに、値から識別子の実体化を行い、その結果を返す。

animation-composition

指定値・算出値ともに、値から識別子の実体化を行い、その結果を返す。

appearance

指定値・算出値ともに、値から識別子の実体化を行い、その結果を返す。

azimuth

指定値の場合:

値が <angle> の場合、値から数値値の実体化を行い、その結果を返す。
値が単一キーワードの場合、値から識別子の実体化を行い、その結果を返す。
それ以外の場合、CSSStyleValue として実体化し、その結果を返す。

算出値の場合:

角度から数値値の実体化を行い、その結果を返す。

backdrop-filter

指定値・算出値ともに:

値が none の場合、値から識別子の実体化を行い、その結果を返す。
それ以外の場合、CSSStyleValue として実体化し、その結果を返す。

backface-visibility

指定値・算出値ともに、値から識別子の実体化を行い、その結果を返す。

background

指定値・算出値ともに、CSSStyleValue として実体化し、その結果を返す。

background-attachment

指定値・算出値ともに、値から識別子の実体化を行い、その結果を返す。

background-blend-mode

指定値・算出値ともに、値から識別子の実体化を行い、その結果を返す。

background-clip

指定値・算出値ともに、値から識別子の実体化を行い、その結果を返す。

background-color

指定値・算出値ともに、 CSSStyleValue として実体化し、その結果を返す。

background-image

指定値・算出値ともに:

値が none の場合、値から識別子の実体化を行い、その結果を返す。
値が url() 関数の場合、値から url の実体化を行い、その結果を返す。
それ以外の場合は、値から画像の実体化を行い、その結果を返す。

background-position

指定値・算出値ともに、値から位置の実体化を行い、その結果を返す。

background-repeat

指定値・算出値ともに:

値が単一キーワード、または同じキーワードが2回繰り返された場合、キーワードから識別子の実体化を行い、その結果を返す。
値が repeat no-repeat の場合、"repeat-x" の識別子の実体化を行い、その結果を返す。
値が no-repeat repeat の場合、"repeat-y" の識別子の実体化を行い、その結果を返す。
それ以外の場合、CSSStyleValue として実体化し、その結果を返す。

baseline-shift

指定値・算出値ともに:

値が sub または super の場合、値から識別子の実体化を行い、その結果を返す。
それ以外の場合、値から数値値の実体化を行い、その結果を返す。

block-size

width と同じ

block-step

指定値・算出値ともに、 CSSStyleValue として実体化し、その結果を返す。

block-step-align

指定値・算出値ともに、値から識別子の実体化を行い、その結果を返す。

block-step-insert

指定値・算出値ともに、値から識別子の実体化を行い、その結果を返す。

block-step-round

指定値・算出値ともに、値から識別子の実体化を行い、その結果を返す。

block-step-size

指定値・算出値ともに:

値が none の場合、値から識別子の実体化を行い、その結果を返す。
それ以外の場合、値から数値値の実体化を行い、その結果を返す。

bookmark-label

指定値・算出値ともに、 CSSStyleValue として実体化し、その結果を返す。

bookmark-level

指定値・算出値ともに:

値が none の場合、値から識別子の実体化を行い、その結果を返す。
それ以外の場合、値から数値値の実体化を行い、その結果を返す。

bookmark-state

指定値・算出値ともに、値から識別子の実体化を行い、その結果を返す。

border

指定値・算出値ともに、 CSSStyleValue として実体化し、その結果を返す。

border-block

border-block-start と同じ

border-block-color

指定値・算出値ともに、 CSSStyleValue として実体化し、その結果を返す。

border-block-end

border-block-start と同じ

border-block-end-color

border-top-color と同じ

border-block-end-style

border-top-style と同じ

border-block-end-width

border-top-width と同じ

border-block-start

border-top と同じ

border-block-start-color

border-top-color と同じ

border-block-start-style

border-top-style と同じ

border-block-start-width

border-top-width と同じ

border-block-style

指定値・算出値ともに、 CSSStyleValue として実体化し、その結果を返す。

border-block-width

指定値・算出値ともに、 CSSStyleValue として実体化し、その結果を返す。

border-bottom

border-top と同じ

border-bottom-color

border-top-color と同じ

border-bottom-style

border-top-style と同じ

border-bottom-width

border-top-width と同じ

border-boundary

指定値・算出値ともに、値から識別子の実体化を行い、その結果を返す。

border-collapse

指定値・算出値ともに、値から識別子の実体化を行い、その結果を返す。

border-color

指定値・算出値ともに、 CSSStyleValue として実体化し、その結果を返す。

border-inline

border-inline-color

border-inline-end

border-inline-end-color

border-inline-end-style

border-inline-end-width

border-inline-start

border-inline-start-color

border-inline-start-style

border-inline-start-width

border-inline-style

border-inline-width

border-left

border-top と同じ

border-left-color

border-top-color と同じ

border-left-style

border-top-style と同じ

border-left-width

border-top-width と同じ

border-radius

指定値・算出値ともに、 CSSStyleValue として実体化し、その結果を返す。

border-right

border-top と同じ

border-right-color

border-top-color と同じ

border-right-style

border-top-style と同じ

border-right-width

border-top-width と同じ

border-spacing

border-style

border-top

指定値・算出値ともに、 CSSStyleValue として実体化し、その結果を返す。

border-top-color

指定値・算出値ともに:

値が currentcolor の場合、値から識別子の実体化を行い、その結果を返す。
それ以外の場合、CSSStyleValue として実体化し、その結果を返す。

border-top-style

指定値・算出値ともに、値から識別子の実体化を行い、その結果を返す。

border-top-width

指定値・算出値ともに:

値が <length> の場合、値から数値値の実体化を行い、その結果を返す。
それ以外の場合、値から識別子の実体化を行い、その結果を返す。

border-width

指定値・算出値ともに、 CSSStyleValue として実体化し、その結果を返す。

bottom

指定値・算出値ともに:

値が auto の場合、値から識別子の実体化を行い、その結果を返す。
それ以外の場合、値から数値値の実体化を行い、その結果を返す。

box-decoration-break

box-sizing

指定値・算出値ともに、値から識別子の実体化を行い、その結果を返す。

指定値・算出値ともに:

値が currentcolor の場合、値から識別子の実体化を行い、その結果を返す。
それ以外の場合、CSSStyleValue として実体化し、その結果を返す。

caret-shape

clear

指定値・算出値ともに、値から識別子の実体化を行い、その結果を返す。

指定値・算出値ともに:

値が currentcolor の場合、値から識別子の実体化を行い、その結果を返す。
それ以外の場合、CSSStyleValue として実体化し、その結果を返す。

color-adjust

color-interpolation

counter-increment

指定値・算出値ともに、値から識別子を実体化し、その結果を返す。

display

指定値・算出値ともに、値から識別子を実体化し、その結果を返す。

dominant-baseline

elevation

empty-cells

指定値・算出値ともに、値から識別子を実体化し、その結果を返す。

'filter-margin-top, filter-margin-right, filter-margin-bottom, filter-margin-left'

指定値・算出値ともに、値から識別子を実体化し、その結果を返す。

float-defer

font

指定値・算出値ともに、 CSSStyleValue として実体化し、その結果を返す。

font-family

指定値・算出値ともに、 CSSStyleValue として実体化し、その結果を返す。

font-language-override

指定値・算出値ともに:

値が normal の場合、値から識別子を実体化し、その結果を返す。
それ以外の場合、CSSStyleValue として実体化し、その結果を返す。

font-optical-sizing

指定値・算出値ともに、値から識別子を実体化し、その結果を返す。

font-palette

指定値・算出値ともに:

値が normal、light、dark の場合、値から識別子を実体化し、その結果を返す。
それ以外の場合、CSSStyleValue として実体化し、その結果を返す。

font-size

指定値・算出値ともに:

値が <absolute-size> または <relative-size> の場合、値から識別子を実体化し、その結果を返す。
それ以外の場合、値から数値値を実体化し、その結果を返す。

font-size-adjust

指定値・算出値ともに:

値が none の場合、値から識別子を実体化し、その結果を返す。
それ以外の場合、値から数値値を実体化し、その結果を返す。

font-stretch

指定値・算出値ともに:

値が <percentage> の場合、値から数値値を実体化し、その結果を返す。
それ以外の場合、値から識別子を実体化し、その結果を返す。

font-style

指定値・算出値ともに、値から識別子を実体化し、その結果を返す。

font-synthesis

指定値・算出値ともに:

値が none、weight、style、small-caps の場合、値から識別子を実体化し、その結果を返す。
それ以外の場合、CSSStyleValue として実体化し、その結果を返す。

font-variant

指定値・算出値ともに、 CSSStyleValue として実体化し、その結果を返す。

font-variant-alternates

指定値・算出値ともに:

値が none または historical-forms の場合、値から識別子を実体化し、その結果を返す。
それ以外の場合、CSSStyleValue として実体化し、その結果を返す。

font-variant-emoji

指定値・算出値ともに、値から識別子を実体化し、その結果を返す。

font-variation-settings

指定値・算出値ともに:

値が normal の場合、値から識別子を実体化し、その結果を返す。
それ以外の場合、CSSStyleValue として実体化し、その結果を返す。

font-weight

指定値・算出値ともに:

値が <number> の場合、値から数値値を実体化し、その結果を返す。
それ以外の場合、値から識別子を実体化し、その結果を返す。

gap

globalcompositeoperation

glyph-orientation-vertical

grid

grid-area

grid-auto-columns

grid-column-start

grid-template-areas

grid-template-columns

grid-template-rows

height

指定値・算出値ともに:

値が auto の場合、値から識別子を実体化し、その結果を返す。
値が <length> または <percentage> の場合、値から数値値を実体化し、その結果を返す。

image-rendering

image-resolution

initial-letter

initial-letter-align

initial-letter-wrap

inset-block-start

inset-inline

inset-inline-end

inset-inline-start

指定値・算出値ともに:

値が auto の場合、値から識別子を実体化し、その結果を返す。
それ以外の場合、値から数値値を実体化し、その結果を返す。

letter-spacing

line-grid

line-height

指定値・算出値ともに:

値が normal の場合、値から識別子を実体化し、その結果を返す。
それ以外の場合、値から数値値を実体化し、その結果を返す。

指定値および算出値の両方について：

値が none の場合、値から識別子を実体化し、その結果を返す。
値が url() 関数の場合、値から url を実体化し、その結果を返す。
それ以外の場合、値から画像を実体化し、その結果を返す。

list-style-position

指定値および算出値の両方について、値から識別子を実体化し、その結果を返す。

list-style-type

margin

指定値および算出値の両方について、 CSSStyleValue として実体化し、その結果を返す。

margin-block

margin-block-end

margin-block-start

margin-bottom

margin-top と同じ

margin-inline

margin-inline-end

margin-inline-start

margin-left

margin-top と同じ

margin-right

margin-top と同じ

margin-top

指定値および算出値の両方について：

値が auto の場合、値から識別子を実体化し、その結果を返す。
それ以外の場合、値から数値値を実体化し、その結果を返す。

mask-border-outset

mask-border-repeat

mask-border-slice

mask-border-source

mask-border-width

mask-clip

mask-composite

mask-image

指定値および算出値の両方について：

値が none の場合、値から識別子を実体化し、その結果を返す。
それ以外の場合、値から画像を実体化し、その結果を返す。

指定値および算出値の両方について、値から数値値を実体化し、その結果を返す。

指定値および算出値の両方について：

値が currentcolor の場合、値から識別子を実体化し、その結果を返す。
それ以外の場合、CSSStyleValue として実体化し、その結果を返す。

outline-offset

outline-style

指定値および算出値の両方について、値から識別子を実体化し、その結果を返す。

outline-width

overflow

指定値および算出値の両方について、 CSSStyleValue として実体化し、その結果を返す。

overflow-anchor

指定値および算出値の両方について、値から識別子を実体化し、その結果を返す。

overflow-x

指定値および算出値の両方について、値から識別子を実体化し、その結果を返す。

overflow-y

指定値および算出値の両方について、値から識別子を実体化し、その結果を返す。

padding

指定値および算出値の両方について、 CSSStyleValue として実体化し、その結果を返す。

padding-block

padding-block-end

padding-block-start

padding-bottom

padding-top と同じ

padding-inline

padding-inline-end

padding-inline-start

padding-left

padding-top と同じ

padding-right

padding-top と同じ

padding-top

指定値および算出値の両方について、値から数値値を実体化し、その結果を返す。

page

page-break-after

page-break-before

page-break-inside

perspective-origin

指定値・算出値ともに、値から識別子を実体化し、その結果を返す。

presentation-level

指定値・算出値ともに、値から識別子を実体化し、その結果を返す。

指定値・算出値ともに：

値が auto の場合、値から識別子を実体化し、その結果を返す。
それ以外の場合、値から数値値を実体化し、その結果を返す。

scroll-margin-block

scroll-margin-block-end

scroll-margin-block-start

scroll-margin-bottom

scroll-margin-inline

scroll-margin-inline-end

scroll-margin-inline-start

scroll-margin-left

scroll-margin-right

scroll-margin-top

scroll-padding

scroll-padding-block

scroll-padding-block-end

scroll-padding-block-start

scroll-padding-bottom

scroll-padding-inline

scroll-padding-inline-end

scroll-padding-inline-start

scroll-padding-left

scroll-padding-right

scroll-padding-top

scroll-snap-align

speak-punctuation

stroke-dash-corner

stroke-dash-justify

stroke-dasharray

stroke-dashoffset

stroke-image

stroke-linecap

stroke-linejoin

stroke-miterlimit

指定値・算出値ともに、値から識別子を実体化し、その結果を返す。

text-anchor

text-combine-upright

text-decoration

text-decoration-fill

text-decoration-skip

text-decoration-skip-ink

text-decoration-stroke

text-decoration-thickness

text-emphasis-skip

指定値・算出値ともに、値から識別子を実体化し、その結果を返す。

text-underline-offset

top

指定値・算出値ともに：

値が auto の場合、値から識別子を実体化し、その結果を返す。
それ以外の場合、値から数値値を実体化し、その結果を返す。

transform-style

transition

transition-delay

transition-duration

transition-property

transition-timing-function

指定値・算出値ともに：

値が baseline の場合、値から識別子を実体化し、その結果を返す。
それ以外の場合、値から数値値を実体化し、その結果を返す。

visibility

指定値・算出値ともに、値から識別子を実体化し、その結果を返す。

指定値・算出値ともに、値から識別子を実体化し、その結果を返す。

widows

width

指定値・算出値ともに：

値が auto の場合、値から識別子を実体化し、その結果を返す。
値が <length> または <percentage> の場合、値から数値値を実体化し、その結果を返す。

5.2. 表現できない値

すべての内部表現が、現在の CSSStyleValue サブクラスの集合で実体化できるほど単純であるとは限らない。このような場合、そのプロパティは特定のプロパティ用にCSSStyleValue として実体化され、それにより当該プロパティの値としては使用できるが、それ以外には使用できないことが保証される。

To reify as a CSSStyleValue a value for a property:

value を表現する新しい CSSStyleValue オブジェクトを返す。その [[associatedProperty]] 内部スロットは property に設定する。

5.3. 生の CSS トークン: var() 参照を含むプロパティ

プロパティの文法が他にどうであれ、未代入の var() 参照を含むプロパティ値は list（component values の集合）として表現され、 Typed OM では CSSUnparsedValue になる。

To reify a list of component values from a list:

list 内のすべての var() 参照を CSSVariableReferenceValue オブジェクトに置き換える（§ 5.4 var() 参照参照）。
list 内に残っている各最大部分列の component values を、それらの直列化を連結した単一の文字列に置き換える。
CSSUnparsedValue の新しいオブジェクトを返し、その [[tokens]] スロットを list に設定する。

文字列 "calc(42px + var(--foo, 15em) + var(--bar, var(--far) + 15px))" は、次の列を含む CSSUnparsedValue に変換される:

文字列 "calc(42px + "
CSSVariableReferenceValue （以下の内容）
- variable "--foo"
- fallback 単一要素の列 " 15em" を含む CSSUnparsedValue
文字列 " + "
CSSVariableReferenceValue （以下の内容）
- variable "--bar"
- fallback 次を含む CSSUnparsedValue の列:
  - 文字列 " "
  - CSSVariableReferenceValue （以下の内容）
    - variable "--far"
    - fallback null
  - 文字列 " + 15px"
文字列 ")"

5.4. var() 参照

var() 参照は、Typed OM では CSSVariableReferenceValue になる。

To reify a var() reference var:

object を新しい CSSVariableReferenceValue として生成する。
object の variable 内部スロットを、変数名を与える <custom-ident> の直列化に設定する。
var にフォールバック値がある場合は、 object の fallback 内部スロットを、フォールバックの component values を実体化した結果に設定する。それ以外の場合は null に設定する。
object を返す。

5.5. 識別子値

CSS の識別子は、Typed OM では CSSKeywordValue になる。

To reify an identifier ident:

新しい CSSKeywordValue を返し、その value 内部スロットを ident の直列化に設定する。

5.6. <number>、<percentage>、および <dimension> の値

CSS の <number>、<percentage>、および <dimension> の値は、Typed OM では CSSNumericValue になる。

To reify a numeric value num:

num が math function である場合は、数学式を実体化して結果を返す。
num が単位なしの値 0 で、かつ <dimension> の場合、新しい CSSUnitValue を返し、その value 内部スロットを 0 に、 unit 内部スロットを "px" に設定する。
新しい CSSUnitValue を返し、その value 内部スロットを num の数値に設定し、 unit 内部スロットを、 num が <number> なら "number"、 <percentage> なら "percent"、 <dimension> なら num の単位に設定する。

もし実体化される値が算出値である場合、使用する単位はその値の型に対する適切な正準単位でなければならず、数値はそれに応じてスケールされる。

例えば、要素が style="width: 1in;" のとき、el.attributeStyleMap.get('width') は CSS.in(1) を返すが、 el.computedStyleMap.get('width') は CSS.px(96) を返す。これは px が絶対長さの正準単位であるため。

To reify a math expression num:

num が min() または max() 式の場合:
1. 実体化を、各引数を calc() の内容として扱って行い、その結果を values とする。
2. それぞれ新しい CSSMathMin または CSSMathMax オブジェクトを返し、その values 内部スロットを values に設定する。
それ以外の場合、num は calc() である。
num の引数を標準的な PEMDAS の優先順位に基づき式木に変換する。ただし次の例外／明確化がある:
- 減算は加算として扱い、右辺の引数を特別な「negate」ノードで包む。
- 除算は乗算として扱い、右辺の引数を特別な「invert」ノードで包む。
- 加算と乗算は N 項演算であり、各ノードは任意個の引数を持てる。
- 式に単一の値しかなく、演算がない場合、それを単一引数の加算ノードとして扱う。
次のように、式木を再帰的にオブジェクトへ変換する:

addition node

新しい CSSMathSum オブジェクトになり、その values 内部スロットをその引数リストに設定する。

multiplication node

新しい CSSMathProduct オブジェクトになり、その values 内部スロットをその引数リストに設定する。

negate node

新しい CSSMathNegate オブジェクトになり、その value 内部スロットをその引数に設定する。

invert node

新しい CSSMathInvert オブジェクトになり、その value 内部スロットをその引数に設定する。

leaf node

適切に実体化される。

例えば、calc(1px - 2 * 3em) は次の構造を生成する:

CSSMathSum(
    CSS.px(1),
    CSSMathNegate(
        CSSMathProduct(
            2,
            CSS.em(3)
        )
    )
)

加算と乗算は N 項演算であるため、 calc(1px + 2px + 3px) は次の構造を生成する:

CSSMathSum(
    CSS.px(1),
    CSS.px(2),
    CSS.px(3)
)

一方、calc(calc(1px + 2px) + 3px) は次の構造を生成する:

CSSMathSum(
    CSSMathSum(
        CSS.px(1),
        CSS.px(2)
    ),
    CSS.px(3)
)

Note: 値の算出過程で、異なる単位が同一のものに変換され、結果の式が簡約されることがある。例えば、指定値としての calc(1px + 2em) は CSSMathSum(CSS.px(1), CSS.em(2)) になるが、算出値では CSS.px(33) など（その文脈での em の値に依存）になる。

5.7. <color> の値

CSS の <color> の値は、（絶対色へ解決可能な場合は）CSSColorValue、それ以外の場合は汎用の CSSStyleValue になる。

To reify a color value val:

val が <hex-color>、 rgb() 関数、または rgba() 関数である場合、新しい CSSRGB オブジェクトを返し、その r、g、b、および alpha 内部スロットを、それぞれの赤・緑・青・アルファ成分の実体化に設定する。
val が hsl() または hsla() 関数である場合、新しい CSSHSL オブジェクトを返し、その h、s、l、および alpha 内部スロットを、それぞれの色相角・彩度・輝度・アルファ成分の実体化に設定する。
val が hwb() 関数である場合、新しい CSSHWB オブジェクトを返し、その h、w、b、および alpha 内部スロットを、それぞれの色相角・白さ・黒さ・アルファ成分の実体化に設定する。
val が lch() 関数である場合、新しい CSSLCH オブジェクトを返し、その l、c、h、および alpha 内部スロットを、それぞれの明度・彩度（クロマ）・色相角・アルファ成分の実体化に設定する。
val が lab() 関数である場合、新しい CSSLab オブジェクトを返し、その l、a、b、および alpha 内部スロットを、それぞれの明度・a・b・アルファ成分の実体化に設定する。
val が color() 関数である場合、新しい CSSColor オブジェクトを返し、その colorSpace 内部スロットを、val の色空間から識別子を実体化した結果に設定し、 channels 内部スロットのbacking list を、非アルファ成分の実体化結果に設定し、 alpha 内部スロットを val のアルファ成分の実体化結果に設定する。
val が <named-color> またはキーワード transparent の場合、新しい CSSRGB オブジェクトを返し、その r、g、b、および alpha 内部スロットを、それぞれの赤・緑・青・アルファ成分の実体化に設定する。
その他の色キーワードである場合は、識別子の実体化を val から行った結果を返す。

5.8. <transform-list> と <transform-function> の値

CSS の <transform-list> の値は Typed OM では CSSTransformValue になり、 CSS の <transform-function> の値は CSSTransformComponent になる。

To reify a <transform-list> list:

新しい CSSTransformValue を返す。その反復対象の値は、list に対して reify a <transform-function> アルゴリズムを写像した結果である。

To reify a <transform-function> func, func に基づき、以下の適切な手順を実行する:

matrix()

matrix3d()

新しい CSSMatrixComponent オブジェクトを返す。その matrix 内部スロットは func と同じ情報を表す 4x4 行列に設定し、 is2D 内部スロットは func が matrix() のとき true、それ以外は false とする。

新しい CSSTranslate オブジェクトを返す。その x、 y、および z 内部スロットは、指定された x/y/z オフセットの実体化に設定し、 func で指定されていない場合は 0px の実体化に設定する。また is2D 内部スロットは、 func が translate()、translateX()、または translateY() のとき true、それ以外は false とする。

新しい CSSScale オブジェクトを返す。その x、 y、および z 内部スロットは、指定された x/y/z スケールに設定し、 func で指定されていない場合は 1 に設定する。また is2D 内部スロットは、 func が scale()、 scaleX()、または scaleY() のとき true、それ以外は false とする。

新しい CSSRotate オブジェクトを返す。その angle 内部スロットを、指定された角度の実体化に設定し、 x、 y、および z 内部スロットを、指定された回転軸の座標に設定し、 func で指定されていない場合は暗黙の軸座標に設定する。また is2D 内部スロットは、 func が rotate() のとき true、それ以外は false とする。

skew()

新しい CSSSkew オブジェクトを返す。その ax および ay 内部スロットを、指定された x および y の角度の実体化に設定し、 func で指定されていない場合は 0deg の実体化に設定する。また is2D 内部スロットは true とする。

skewX()

新しい CSSSkewX オブジェクトを返す。その ax 内部スロットを、指定された x の角度の実体化に設定し、 func で指定されていない場合は 0deg の実体化に設定する。また is2D 内部スロットは true とする。

skewY()

新しい CSSSkewY オブジェクトを返す。その ay 内部スロットを、指定された y の角度の実体化に設定し、 func で指定されていない場合は 0deg の実体化に設定する。また is2D 内部スロットは true とする。

perspective()

新しい CSSPerspective オブジェクトを返す。その length 内部スロットを、指定された長さの実体化（長さであれば reify a numeric value、キーワードが none であれば reify an identifier を参照）に設定し、 is2D 内部スロットは false とする。

6. `CSSStyleValue` の直列化

CSSStyleValue がどのように直列化されるかは、その値がどのように構築されたかに依存する。

値が USVString から構築された場合: 直列化結果は、その値を構築した USVString である。
それ以外で、値が IDL コンストラクターを用いて構築された場合: 直列化は以下の節で規定される。
それ以外で、値が CSSOM から抽出された場合: 直列化は下の § 6.7 CSSOM 値からの直列化で規定される。

例えば:

var length1 = CSSNumericValue.parse("42.0px");
length1.toString(); // "42.0px"

var length2 = CSS.px(42.0);
length2.toString(); // "42px";

element.style.width = "42.0px";
var length3 = element.attributeStyleMap.get('width');
length3.toString(); // "42px";

6.1. `CSSUnparsedValue` の直列化

To serialize a CSSUnparsedValue this:

s を最初は空の文字列とする。
For each item in this’s [[tokens]] internal slot:
1. item が USVString であるなら、s にそれを追加する。
2. それ以外の場合、item は CSSVariableReferenceValue である。これを直列化し、その結果を s に追加する。
s を返す。

To serialize a CSSVariableReferenceValue this:

s を最初は "var(" とする。
this の variable 内部スロットを s に追加する。
this の fallback 内部スロットが null でない場合、 ", " を s に追加し、次に fallback 内部スロットを直列化してその結果を s に追加する。
")" を s に追加し、s を返す。

6.2. `CSSKeywordValue` の直列化

To serialize a CSSKeywordValue this:

this の value 内部スロットを返す。

6.3. `CSSNumericValue` の直列化

To serialize a CSSNumericValue this, given an optional minimum, a numeric value, and optional maximum, a numeric value:

this が CSSUnitValue であるなら、 CSSUnitValue を直列化し、 minimum と maximum を渡す。その結果を返す。
それ以外の場合、CSSMathValue を直列化し、その結果を返す。

6.4. `CSSUnitValue` の直列化

To serialize a CSSUnitValue this, with optional arguments minimum, a numeric value, and maximum, a numeric value:

value と unit を、this の value および unit 内部スロットとする。
s を、value から <number> を直列化した結果に設定する。直列化は CSSOM § 6.7.2 CSS 値の直列化に従う。
unit が次のいずれかの場合:

"number"

何もしない。

"percent"

"%" を s に追加する。

その他

unit を s に追加する。
minimum が渡されかつ this が minimum より小さい場合、または maximum が渡されかつ this が maximum より大きい場合、または minimum や maximum のいずれか／両方が渡され現時点で利用可能な情報では this と minimum/maximum の相対大小を決定できない場合は、 "calc(" を s の先頭に付加し、次に ")" を s に追加する。
s を返す。

6.5. `CSSMathValue` の直列化

To serialize a CSSMathValue this, with optional arguments nested, a boolean (defaulting to false if unspecified), paren-less, a boolean (defaulting to false if unspecified), perform the following steps.

s を最初は空の文字列とする。
this が CSSMathMin または CSSMathMax の場合:
1. 適切に "min(" または "max(" を s に追加する。
2. For each arg in this’s values internal slot, nested と paren-less をいずれも true にして arg を直列化し、その結果を s に追加し、連続する値の間には ", " を追加する。
3. ")" を s に追加し、s を返す。
それ以外で、this が CSSMathSum の場合:
1. paren-less が true なら次の手順へ進む。そうでなく、nested が true なら "(" を s に追加する。それ以外の場合は "calc(" を s に追加する。
2. this の values 内部スロットの最初の item を nested を true にして直列化し、その結果を s に追加する。
3. For each arg in this’s values internal slot beyond the first:
  1. arg が CSSMathNegate であるなら、" - " を s に追加し、次に arg の value 内部スロットを nested を true にして直列化し、その結果を s に追加する。
  2. それ以外の場合は " + " を s に追加し、 nested を true にして arg を直列化し、その結果を s に追加する。
4. paren-less が false なら ")" を s に追加する。
5. s を返す。
それ以外で、this が CSSMathNegate の場合:
1. paren-less が true なら次の手順へ進む。そうでなく、nested が true なら "(" を s に追加する。それ以外の場合は "calc(" を s に追加する。
2. "-" を s に追加する。
3. this の value 内部スロットを nested を true にして直列化し、その結果を s に追加する。
4. paren-less が false なら ")" を s に追加する。
5. s を返す。
それ以外で、this が CSSMathProduct の場合:
1. paren-less が true なら次の手順へ進む。そうでなく、nested が true なら "(" を s に追加する。それ以外の場合は "calc(" を s に追加する。
2. this の values 内部スロットの最初の item を nested を true にして直列化し、その結果を s に追加する。
3. For each arg in this’s values internal slot beyond the first:
  1. arg が CSSMathInvert であるなら、" / " を s に追加し、次に arg の value 内部スロットを nested を true にして直列化し、その結果を s に追加する。
  2. それ以外の場合は " * " を s に追加し、 nested を true にして arg を直列化し、その結果を s に追加する。
4. paren-less が false なら ")" を s に追加する。
5. s を返す。
それ以外で、this が CSSMathInvert の場合:
1. paren-less が true なら次の手順へ進む。そうでなく、nested が true なら "(" を s に追加する。それ以外の場合は "calc(" を s に追加する。
2. "1 / " を s に追加する。
3. this の value 内部スロットを nested を true にして直列化し、その結果を s に追加する。
4. paren-less が false なら ")" を s に追加する。
5. s を返す。

6.6. `CSSTransformValue` と `CSSTransformComponent` の直列化

To serialize a CSSTransformValue this:

this の values to iterate over 内の各 item を直列化し、それらを " " 区切りで連結した結果を返す。

To serialize a CSSTranslate this:

s を最初は空の文字列とする。
this の is2D 内部スロットが false の場合:
1. "translate3d(" を s に追加する。
2. this の x 内部スロットを直列化し、その結果を s に追加する。
3. ", " を s に追加する。
4. this の y 内部スロットを直列化し、その結果を s に追加する。
5. ", " を s に追加する。
6. this の z 内部スロットを直列化し、その結果を s に追加する。
7. ")" を s に追加し、 s を返す。
それ以外の場合:
1. "translate(" を s に追加する。
2. this の x 内部スロットを直列化し、その結果を s に追加する。
3. ", " を s に追加する。
4. this の y 内部スロットを直列化し、その結果を s に追加する。
5. ")" を s に追加し、 s を返す。

To serialize a CSSRotate this:

s を最初は空の文字列とする。
this の is2D 内部スロットが false の場合:
1. "rotate3d(" を s に追加する。
2. this の x 内部スロットを直列化し、その結果を s に追加する。
3. ", " を s に追加する。
4. this の y 内部スロットを直列化し、その結果を s に追加する。
5. ", " を s に追加する。
6. this の z 内部スロットを直列化し、その結果を s に追加する。
7. "," を s に追加する。
8. this の angle 内部スロットを直列化し、その結果を s に追加する。
9. ")" を s に追加し、 s を返す。
それ以外の場合:
1. "rotate(" を s に追加する。
2. this の angle 内部スロットを直列化し、その結果を s に追加する。
3. ")" を s に追加し、 s を返す。

To serialize a CSSScale this:

s を最初は空の文字列とする。
this の is2D 内部スロットが false の場合:
1. "scale3d(" を s に追加する。
2. this の x 内部スロットを直列化し、その結果を s に追加する。
3. ", " を s に追加する。
4. this の y 内部スロットを直列化し、その結果を s に追加する。
5. ", " を s に追加する。
6. this の z 内部スロットを直列化し、その結果を s に追加する。
7. ")" を s に追加し、 s を返す。
それ以外の場合:
1. "scale(" を s に追加する。
2. this の x 内部スロットを直列化し、その結果を s に追加する。
3. this の x と y の内部スロットが等しい数値値であるなら、 ")" を s に追加して s を返す。
4. それ以外の場合は ", " を s に追加する。
5. this の y 内部スロットを直列化し、その結果を s に追加する。
6. ")" を s に追加し、 s を返す。

To serialize a CSSSkew this:

s を最初は "skew(" とする。
this の ax 内部スロットを直列化し、その結果を s に追加する。
this の ay 内部スロットが、CSSUnitValue でその value が 0 であるなら、 ")" を s に追加して s を返す。
それ以外の場合は ", " を s に追加する。
this の ay 内部スロットを直列化し、その結果を s に追加する。
")" を s に追加し、 s を返す。

To serialize a CSSSkewX this:

s を最初は "skewX(" とする。
this の ax 内部スロットを直列化し、その結果を s に追加する。
")" を s に追加し、 s を返す。

To serialize a CSSSkewY this:

s を最初は "skewY(" とする。
this の ay 内部スロットを直列化し、その結果を s に追加する。
")" を s に追加し、 s を返す。

To serialize a CSSPerspective this:

s を最初は "perspective(" とする。
this の length 内部スロットを 0px を minimum として直列化し、その結果を s に追加する。
")" を s に追加し、 s を返す。

To serialize a CSSMatrixComponent this:

this の matrix 内部スロットの直列化を返す。

6.7. CSSOM 値からの直列化

CSSStyleValue は、著者が直接構築したのではなく CSSOM 内の値からユーザーエージェントによって生成されたオブジェクトの場合、それが由来したプロパティに応じて、以下の規則に従って直列化される。

background-color

値が currentcolor キーワードである場合、 "currentcolor" を返す。
それ以外の場合、<color> 値の直列化結果を返す。

border-color

値が currentcolor キーワードである場合、 "currentcolor" を返す。
それ以外の場合、<color> 値の直列化結果を返す。

border-image

最初に values を空の list とする。
border-image-source が none でない場合、 border-image-source を直列化して values に追加する。
border-image-slice がすべての辺に 100% を指定しておらず、かつ fill キーワードを省略している場合、 border-image-slice を直列化して values に追加する。
border-image-width がすべての辺に 1 を指定していない場合、 border-image-width の直列化結果に "/ "（U+002F FORWARD SLASH の後に U+0020 SPACE）を付加し、それを values に追加する。
border-image-outset がすべての辺に 0 を指定していない場合:
1. 直前の border-image-width の手順で values に何も追加していない場合、 prefix を "// "（U+002F FORWARD SLASH 2 文字の後に U+0020 SPACE）とし、そうでなければ prefix を "/ "（U+002F FORWARD SLASH の後に U+0020 SPACE）とする。
2. prefix を border-image-outset の直列化結果に付加し、それを values に追加する。
border-image-repeat が両軸において stretch でない場合、 border-image-repeat を直列化して values に追加する。
values が empty の場合、 "none" を values に追加する。
values 内のすべての項目を、 " "（U+0020 SPACE）で区切って連結した結果を返す。

bottom

値が auto キーワードである場合、 "auto" を返す。
値が <length> 型である場合、 <length> 値の直列化結果を返す。
それ以外の場合、<percentage> 値の直列化結果を返す。

color

値が currentcolor キーワードである場合、 "currentcolor" を返す。
それ以外の場合、<color> 値の直列化結果を返す。

left

値が auto キーワードである場合、 "auto" を返す。
値が <length> 型である場合、 <length> 値の直列化結果を返す。
それ以外の場合、<percentage> 値の直列化結果を返す。

opacity

値が <number> 型である場合、 <number> 値の直列化結果を返す。
それ以外の場合、<percentage> 値の直列化結果を返す。

right

値が auto キーワードである場合、 "auto" を返す。
値が <length> 型である場合、 <length> 値の直列化結果を返す。
それ以外の場合、<percentage> 値の直列化結果を返す。

top

値が auto キーワードである場合、 "auto" を返す。
値が <length> 型である場合、 <length> 値の直列化結果を返す。
それ以外の場合、<percentage> 値の直列化結果を返す。

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

これらの機能によって新たに生じる既知のセキュリティ上の問題はない。

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

これらの機能によって新たに生じる既知のプライバシー上の問題はない。

9. 変更点

9.1. 2018年4月10日作業草案以降の変更点

型の一致アルゴリズムが percent ヒントをより抽象的に参照するよう修正。
「型を反転する」が percent ヒントを保持する必要があることを明確化。
CSS 数値ファクトリに不足していたフォント単位を追加。(#1107)
ユニットのショートハンドメソッドの一覧は、実装のサポートに合わせて縮小または拡張しなければならないことを規定。
"StylePropertyMapReadOnly.get()" に未定義のユニオン値を使用。(#1087)
.to() と CSSColorValue.colorSpace を削除。変換は Typed OM の守備範囲ではないため。(#1070)
"serialize a CSSUnitValue" に min/max を追加し、CSSPerspective の引数を直列化する際にそれを渡すようにした。(#1069)
実体化対象を「a CSSStyleValue」から「an identifier」へ変更。(#1068)
新しいビューポート／コンテナ単位のファクトリ関数を追加。(#1067)
CSSNumericValue.parse に型チェックを追加。(#1065)
CSSDeviceCMYK を削除し、CSSOKLab と CSSOKLCH を追加。すべての色クラスが "none" キーワードを受け付けるようにした。
色の値をどのように実体化するかを定義。
「new unit value」が「create a CSSUnitValue from a pair」へリンクできるようにした。既にその表現を広く用いているため。
CSSPerspective に perspective(none) のサポートを追加。(#1053)
CSSClampValue.min/max が CSSNumericValue.min/max と偶発的に衝突していた問題を修正。(#855)
要約を簡素化。
Color 4 が以前に gray() を廃止したため、CSSGray と関連仕様テキストを削除。(#1027)
.colorSpace を CSSColorValue のスーパークラスに上げ、色変換関数 .to*() を汎用の .to(colorSpace) に置き換え。(#1036)
device-cmyk() のサポートを追加。
最近の簡素化に合わせて CSSColor の OM を修正。
各 CSSColorValue サブクラスがどの色関数を表すかを規定し、CSSGray を追加。
ユニオンのための不足していた括弧を追加。(#1016)
「type（型）」の構成に関する説明文を追加。
Web IDL 仕様に整合。(#965 および #1006)
アルゴリズムの入れ子を修正。
WebIDL の更新により要求されるデフォルト辞書値を追加。(#936)
用語を "underlying value" から ":internal representation" に変更。Web Animations が既に "underlying value" を別用途で使用しているため。
CSSSTyleValue としての実体化にはプロパティが必要であることを明確化。
登録済みカスタムプロパティの実体化動作を定義 (#886)
部分インターフェイス mixin ElementCSSInlineStyle を使用 (#853)
インデックス付きプロパティ getter に対して WebIDL の正しい名称を使用。
他仕様で利用できるよう、いくつかの用語をエクスポート。
このレベルから CSSPositionValue を削除。
"clamp()"" 関数のために CSSMathClamp を追加。
「文法に一致させる」アルゴリズムをやや厳密に。
算出済み数値値の実体化では正準単位を使用。(#725)
新しい単位型に関する注記を追加。(#734)
正しい単位名 "percent" を使用し、"percentage" ではない (#761)。
カスタムプロパティの構文解析に関する注記を追加
Naina Raisinghani を Former Editor に移動
'invert a type' 操作を追加。
いくつかの数値型用語をエクスポートし、CSS Values & Units から参照できるようにした。
Shane Stephens を Former Editor に移動

適合性

文書の規約

適合要件は、説明的な断言と 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" により規範的テキストから区別される。次に示すように:

アドバイスは、特別な注意を喚起するためにスタイル付けされた規範的節であり、次のように <strong class="advisement"> により他の規範的テキストから区別される: UA はアクセス可能な代替手段を提供しなければならない。

適合クラス

本仕様への適合は、次の 3 つの適合クラスについて定義される。

スタイルシートは、本モジュールで定義される構文を用いるすべての記述が、汎用 CSS 文法および本モジュールで定義される各機能の個別文法に照らして妥当である場合、本仕様に適合している。

レンダラーは、適切な仕様で定義されたとおりにスタイルシートを解釈することに加え、本仕様で定義されるすべての機能を正しく構文解析し、それに応じて文書をレンダリングすることでサポートしている場合、本仕様に適合している。ただし、デバイスの制限により UA が文書を正しくレンダリングできないことは、 UA を非適合としない。（例えば、モノクロモニターで色のレンダリングは要求されない。）

オーサリングツールは、汎用 CSS 文法および本モジュールで定義される各機能の個別文法に照らして構文的に正しいスタイルシートを出力し、かつ本モジュールで述べるスタイルシートの他のすべての適合要件を満たす場合、本仕様に適合している。

部分実装

著者が前方互換の構文解析規則を活用してフォールバック値を割り当てられるようにするため、 CSS レンダラーは、使用可能なレベルのサポートを持たない at-rule、プロパティ、プロパティ値、キーワード、その他の構文要素を無効として（適切に無視）扱わなければならない。特に、ユーザーエージェントは、単一の複数値プロパティ宣言内で、未サポートの構成要素値を無視しつつサポートされる値のみを尊重する、といった選択的な無視を行ってはならない。いずれかの値が無効と見なされる場合（未サポートの値はそう見なされる）、 CSS は宣言全体を無視することを要求している。

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

非実験的実装

仕様が Candidate Recommendation 段階に達したら、非実験的実装が可能となり、実装者は、仕様に従って正しく実装されていることを示せる CR レベルの機能については接頭辞なしの実装を公開すべきである。

CSS の相互運用性を実装間で確立・維持するため、 CSS ワーキンググループは、非実験的 CSS レンダラーに対し、接頭辞なしの実装を公開する前に実装報告（必要であれば、その実装報告に用いたテストケースも）を W3C に提出するよう求める。W3C に提出されたテストケースは、CSS ワーキンググループによるレビューと修正の対象となる。

CSS Typed OM レベル 1

概要

この文書の位置付け

1. 導入

2. CSSStyleValue オブジェクト

2.1. 直接的な CSSStyleValue オブジェクト

3. StylePropertyMapについて

3.1. 算出済み StylePropertyMapReadOnly オブジェクト

3.2. 宣言・インライン StylePropertyMap オブジェクト

4. CSSStyleValue のサブクラス

4.1. CSSUnparsedValue オブジェクト

4.2. CSSKeywordValue オブジェクト

4.3. 数値型値：

4.3.1. 共通の数値演算と CSSNumericValue スーパークラス

4.3.2. 数値値の型付け

4.3.3. 値 + 単位: CSSUnitValue オブジェクト

4.3.4. 複雑な数値: CSSMathValue オブジェクト

4.3.5. 数値ファクトリー関数

4.4. CSSTransformValue オブジェクト

4.5. CSSImageValue オブジェクト

4.6. CSSColorValue オブジェクト

5. CSSStyleValue 実体化

5.1. プロパティ固有のルール

5.2. 表現できない値

5.3. 生の CSS トークン: var() 参照を含むプロパティ

5.4. var() 参照

5.5. 識別子値

5.6. <number>、<percentage>、および <dimension> の値

5.7. <color> の値

5.8. <transform-list> と <transform-function> の値

6. CSSStyleValue の直列化

6.1. CSSUnparsedValue の直列化

6.2. CSSKeywordValue の直列化

6.3. CSSNumericValue の直列化

6.4. CSSUnitValue の直列化

6.5. CSSMathValue の直列化

6.6. CSSTransformValue と CSSTransformComponent の直列化

6.7. CSSOM 値からの直列化

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

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

9. 変更点

9.1. 2018年4月10日作業草案以降の変更点

適合性

文書の規約

適合クラス

部分実装

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

非実験的実装

索引

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

参照によって定義される用語

参考文献

規範的参照

IDL索引

課題索引

2. `CSSStyleValue` オブジェクト

2.1. 直接的な `CSSStyleValue` オブジェクト

3. `StylePropertyMap`について

3.1. 算出済み `StylePropertyMapReadOnly` オブジェクト

3.2. 宣言・インライン `StylePropertyMap` オブジェクト

4. `CSSStyleValue` のサブクラス

4.1. `CSSUnparsedValue` オブジェクト

4.2. `CSSKeywordValue` オブジェクト

4.3.1. 共通の数値演算と `CSSNumericValue` スーパークラス

4.3.3. 値 + 単位: `CSSUnitValue` オブジェクト

4.3.4. 複雑な数値: `CSSMathValue` オブジェクト

4.4. `CSSTransformValue` オブジェクト

4.5. `CSSImageValue` オブジェクト

4.6. `CSSColorValue` オブジェクト

5. `CSSStyleValue` 実体化

6. `CSSStyleValue` の直列化

6.1. `CSSUnparsedValue` の直列化

6.2. `CSSKeywordValue` の直列化

6.3. `CSSNumericValue` の直列化

6.4. `CSSUnitValue` の直列化

6.5. `CSSMathValue` の直列化

6.6. `CSSTransformValue` と `CSSTransformComponent` の直列化