CSS Typed OM Level 1（日本語訳）

◎要約

~CSSOM値~文字列を~JSにおいて有意義な型の表現に変換したり，元へ戻すことは、有意な処理能~overheadを被り得る。この仕様は、 ~CSS値を有型~JS~objとして公開して，容易かつ高処理能に操作できるようにする。 ◎ Converting CSSOM value strings into meaningfully typed JavaScript representations and back can incur a significant performance overhead. This specification exposes CSS values as typed JavaScript objects, to make manipulating them both easier and more performant.

1. 序論

~CSS~stylesheetは、 ~CSSの `内部~表現@ と称される，~UAに内部的な抽象-~data構造に構文解析される。様々な仕様~algoが，それらを操作する。 ◎ CSS stylesheets are parsed into abstract UA-internal data structures, the internal representations of CSS, which various specification algorithms manipulate.

`内部~表現$は、実装に依存するので，直に操作できない — 各~UAは、 `内部~表現$を`解釈する方法^emについて，合意する必要がある。が，それらの表現~自体は、［ ~UAが、自身にとって最も効率的な仕方で，~CSSを格納して操作できる］ようにする目的で，定義されないままにされている。 ◎ Internal representations can’t be directly manipulated, as they are implementation-dependent; UAs have to agree on how to interpret the internal representations, but the representations themselves are purposely left undefined so that UAs can store and manipulate CSS in whatever way is most efficient for them.

以前までは、 `内部~表現$を［読取る／書込む］には、文字列を介する仕方しかなかった — ~stylesheetや~CSSOMで作者に許容されていたのは、［ `内部~表現$に構文解析される文字列を~UAに送信すること／ `内部~表現$を文字列に直列化して戻すよう ~UAに要請すること］であった。 ◎ Previously, the only way to read or write to the internal representations was via strings—stylesheets or the CSSOM allowed authors to send strings to the UA, which were parsed into internal representations, and the CSSOM allowed authors to request that the UA serialize their internal representations back into strings.

この仕様は、 `内部~表現$とヤリトリするための新たな仕方を導入する — それらを［文字列を構文解析したり, 連結するよりも，容易かつ依拠-可能に操作したり, 解せる］ような，特化された~JS~objで表現することにより。この新たな~approachは、作者にとってより容易になり（例えば, 数量-値は実際の~JS `number^c 【！＊】に反映され，それら用に単位も~~扱える数学的な演算が定義される）、また，多くの事例でより高処理能になる — 値は直に操作でき、 ~CSS文字列を築いて構文解析する必要なく，安価に`内部~表現$に翻訳して戻せるので。 ◎ This specification introduces a new way to interact with internal representations, by representing them with specialized JS objects that can be manipulated and understood more easily and more reliably than string parsing/concatenation. This new approach is both easier for authors (for example, numeric values are reflected with actual JS numbers, and have unit-aware mathematical operations defined for them) and in many cases are more performant, as values can be directly manipulated and then cheaply translated back into internal representations without having to build and then parse strings of CSS.

【この訳に特有な表記規約】

◎表記記号

また、簡潔に述べるため，次の定義も導入している。

所与の`~list$ %~list を，各~itemから何かを得る `演算で写像する@ ときは、次を走らす：【！＊~listの置換-＋複製を利用？】

%結果~list ~LET 新たな`~list$
%~list を成す ~EACH( %~item ) に対し ⇒ %結果~list に［所与の演算を %~item に適用した結果］を`付加する$
~RET %結果~list

~IDL属性 %m に対する “%m 内部~slot” という表記は、当の~obj上の %m に対応する内部~data~fieldを指す。原文にて，そのような表記を利用している属性には、暗黙的に次が規定されていると見受けられる：

属性を宣言している~interfaceを実装する各~objは、そのような~data~fieldを有する。
その取得子~手続きは、他が指定されない限り†，単に当の~data~fieldの値を返す。
読専でない場合，その設定子~手続きは、他が指定されない限り†，単に当の~data~fieldの値を所与の値に設定する。

† 他の挙動を指定している属性もあることに注意。

2. `CSSStyleValue^I ~obj

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

`CSSStyleValue$I ~objは、 ~TypedOM~APIを介して~access可能なすべての ~CSS値の基底~classを与える。 ◎ CSSStyleValue objects are the base class of all CSS values accessible via the Typed OM API.

`stringifier@m における`文字列~化の挙動$は、 § `CSSStyleValue^I の直列化に定義される。 ◎ The stringification behavior of CSSStyleValue objects is defined in § 6 CSSStyleValue Serialization.

`parse(property, cssText)@m ~method~手続きは ⇒ ~RET `~CSSStyleValueを構文解析する$( %property, %cssText, `単数^i ) ◎ The parse(property, cssText) method, when invoked, must parse a CSSStyleValue with property property, cssText cssText, and parseMultiple set to false, and return the result.

`parseAll(property, cssText)@m ~method~手続きは ⇒ ~RET `~CSSStyleValueを構文解析する$( %property, %cssText, `複数^i ) ◎ The parseAll(property, cssText) method, when invoked, must parse a CSSStyleValue with property property, cssText cssText, and parseMultiple set to true, and return the result.

`~CSSStyleValueを構文解析する@ ときは、所与の ( `文字列$ %~prop, `文字列$ %cssText, %単複 ~IN { `単数^i, `複数^i } ) に対し、次を走らす： ◎ To parse a CSSStyleValue given a string property, a string cssText, and a parseMultiple flag, run these steps:

%~prop ~SET `~prop名を検査して正規化する$( %~prop ) ◎ If property is not a custom property name string, set property to property ASCII lowercased. ◎ If property is not a valid CSS property, throw a TypeError.
%一体~値 ~LET 次の結果 ⇒ %cssText を %~prop の`文法に則って構文解析する$ ◎ Attempt to parse cssText according to property’s grammar.＼
~IF［ %一体~値 ~EQ `失敗^i ］ ⇒ ~THROW `TypeError$E ◎ If this fails, throw a TypeError. Otherwise, let whole value be the parsed result.
注記： ~custom~propの挙動は、 ~JSを介して改変されるときと, ~stylesheet内で定義されるときとで異なる。 ◎ The behavior of custom properties are different when modified via JavaScript than when defined in style sheets.
- ~stylesheet内で定義された~custom~propが妥当でない構文を伴う場合、 ~custom~propの登録-時にあらゆる~stylesheetを構文解析し直すのを避けるため，値は “未設定” として記録される。 ◎ When a custom property is defined with an invalid syntax in a style sheet, then the value is recorded as "unset", to avoid having to reparse every style sheet when a custom property is registered.
- 対照的に，~custom~propが~JS~APIを介して改変された場合、構文解析-~errorは，即時に開発者に~feedbackされるよう， `TypeError$E を介して~programming環境へ伝播される。 ◎ Conversely, when a custom property is modified via the JavaScript API, any parse errors are propagated to the progamming environment via a TypeError. This allows more immediate feedback of errors to developers.
%値~list ~LET `~CSS値を反復成分に細分化する$( %一体~値, %~prop ) ◎ Subdivide into iterations whole value, according to property, and let values be the result.
%値~list ~SET %値~list を，各 %~item から次を得る`演算で写像する$ ⇒ `具象化する$( %~item, %~prop ) ◎ For each value in values, replace it with the result of reifying value for property.

大域~objを定義する必要がある。【`671$issue】 ◎ Define the global.
~RET %単複に応じて ⇒＃ `単数^i ならば %値~list[0] ／ `複数^i ならば %値~list ◎ If parseMultiple is false, return values[0]. Otherwise, return values.

`~CSS値を反復成分に細分化する@ ときは、所与の ( ~CSS値 %一体~値, ~prop %~prop ) に対し，次を走らす： ◎ To subdivide into iterations a CSS value whole value for a property property, execute the following steps:

~IF［ %~prop は`単独の値をとる$ ］ ⇒ ~RET 新たな`~list$ « %一体~値 » ◎ If property is a single-valued property, return a list containing whole value.
~RET %一体~値を［ %~prop 用に適切な，個々の反復成分］に細分した結果が成す，同順の反復成分からなる`~list$ ◎ Otherwise, divide whole value into individual iterations, as appropriate for property, and return a list containing the iterations in order.

`~list値をとる$~propを何個かの反復成分に細分する方法は、意図的に定義されておらず，現時点では手作業である。 `一般には^em、 ~top-levelの~commaで分割するだけで済む（文法における~top-levelの <%foo># 項に対応する）。しかしながら，旧来の~propには、反復成分を~commaで分離しないもの（ `counter-reset$p など）もある。 ◎ How to divide a list-valued property into iterations is intentionally undefined and hand-wavey at the moment. Generally, you just split it on top-level commas (corresponding to a top-level <foo># term in the grammar), but some legacy properties (such as counter-reset) don’t separate their iterations with commas.

将来には，厳格に定義されるものと期待されているが、現時点では，明示的に “わかるよね” である。 ◎ It’s expected to be rigorously defined in the future, but at the moment is explicitly a "you know what we mean" thing.

2.1. 直な `CSSStyleValue^I ~obj

直に~supportできる［より特化された `CSSStyleValue$I の下位class ］がまだない値は、 `CSSStyleValue$I ~objとして直に表現される — そのような各 `CSSStyleValue$I ~objは： ◎ Values that can’t yet be directly supported by a more specialized CSSStyleValue subclass are instead represented as CSSStyleValue objects.

その `associatedProperty$sl 内部~slotを介して特定0の~CSS~propが結付けられ，特定0の変異-不能な`内部~表現$が結付けられる。これらの~objは、自身が`具象化-$している特定0の`内部~表現$を “表現する” と呼ばれる — すなわち，同じ~prop用に~stylesheetの中へ設定し戻された場合には、等価な`内部~表現$を再生産することになる。 ◎ Each CSSStyleValue object is associated with a particular CSS property, via its [[associatedProperty]] internal slot, and a particular, immutable, internal representation. These objects are said to "represent" the particular internal representation they were reified from, such that if they are set back into a stylesheet for the same property, they reproduce an equivalent internal representation.
~objを得るために構文解析された~prop用に限り妥当になると見なされる。これは、各 `CSSStyleValue$I ~objが有する `associatedProperty$sl 内部~slotにより施行される ◎ These CSSStyleValue objects are only considered valid for the property that they were parsed for. This is enforced by CSSStyleValue objects having＼

各 `CSSStyleValue$I ~objは、 `associatedProperty@sl 内部~slotを有する — それは、次のいずれかを値にとる ⇒＃ ~NULL （既定【特に，下位classの場合】）／ある~prop名を指定している`文字列$ ◎ a [[associatedProperty]] internal slot, which is either null (the default) or a string specifying a property name.

注記：この~slotは、 `StylePropertyMap$I の［ `set()$m1 ／ `append()$m1 ］により検査される。 ◎ Note: This slot is checked by StylePropertyMap.set()/append()

3. `StylePropertyMap^I

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

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

`StylePropertyMap$I は、 `~CSS宣言~block$を~objで表現する，別の仕方である（ `CSSOM$r を介して~fetchされる`~CSS宣言~block$は、 `CSSStyleDeclaration$I ~objとして表現される。） ◎ StylePropertyMap is an alternate way to represent a CSS declaration block as an object (when fetched via the [cssom], CSS declaration blocks are instead represented as CSSStyleDeclaration objects.)

`StylePropertyMapReadOnly$I ~objは `declarations@sl 内部~slotを有する — それは、 `~CSS宣言~block$を成す`宣言~群$dBを反映している`有順序~map$である。 ◎ A StylePropertyMapReadOnly object has a [[declarations]] internal slot, which is a map reflecting the CSS declaration block's declarations.

注記： `宣言~群$dBは、まだ `INFRA$r の各種用語を利用して定義されていないが、この仕様の目的においては `有順序~map$であると見做される。その~keyは，~prop名を表現している`文字列$を与え、その値は，その~prop用の`内部~表現$を与える。 ◎ Note: The declarations are not yet defined using [infra] terminology, but for the purpose of this spec it’s assumed to be a map whose keys are strings (representing property names) and whose values are internal representations for those properties.

他が指定されない限り，初期~時における `declarations$sl 内部~slotを成す`~entry$たちの順序は、各自の~keyに基づいて，次に挙げる順になるとする： ◎ Unless otherwise stated, the initial ordering of the [[declarations]] internal slot is based on the key of each entry:

標準~化された~propたち（`~custom~prop$でも, ~vendor接頭辞~付きでもないもの） — これらは、 `~ASCII小文字~化$した上で符号位置の昇順で~sortする。 ◎ Standardized properties (not custom properties or vendor-prefixed properties), ASCII lowercased and then sorted in increasing code-point order.
~vendor接頭辞~付きまたは試験的な~propたち（名前が 1 個の `002D^U ( `-^l ) から開始するもの） — これらも、前項と同様に~sortする。 ◎ Vendor-prefixed/experimental properties (those whose name starts with a single dash), ASCII lowercased and then sorted in increasing code-point order.
`~custom~prop$たち — これらは、符号位置の昇順で~sortする（これらは決して小文字~化されず，書かれたものが正確に保全される）。 ◎ Custom properties, sorted in increasing code-point order. (These are never lower-cased; they are preserved exactly as written.)

`StylePropertyMapReadOnly$I ~obj %O の `iterable@m1 用の`反復される値~pair群$は、次に従って得される： ◎ The value pairs to iterate over for a StylePropertyMapReadOnly object this are obtained as follows:

%宣言~map ~LET %O の `declarations$sl 内部~slot ◎ Let declarations be this’s [[declarations]] slot.
%値~pairたち ~LET 新たな`~list$ ◎ Let value pairs be an empty list.
%宣言~map を成す ~EACH( %~prop → %値 ) に対し： ◎ For each prop → value in declarations:
1. %反復成分 ~LET `~CSS値を反復成分に細分化する$( %値 ) ◎ Let iterations be the result of dividing into iterations value.
2. %~obj~list ~LET %反復成分を，各 %~item から次を得る`演算で写像する$ ⇒ `具象化する$( %~item, %~prop ) ◎ Reify each item of iterations, and let objects be the result.
3. %値~pairたちに~pair ( %~prop / %~obj~list ) を付加する ◎ Append prop/objects to value pairs.
~RET %値~pairたち ◎ Return value pairs.

一部の~CSS~propは、 `~list値をとる@ — 例： `background-image$p, `animation$p など。その種の値は，大概は ~commaで分離された並列的な文法~項の~listであり（例外は， `counter-reset$p の様な一握りの旧来の~prop）、それを成す複数の “値のそれぞれ” は，同じ仕方で解釈されることを指示する。他の~propは、（場合によっては複階的な） `単独の値をとる@ とされる — 例： `color$p など。 ◎ Some CSS properties are list-valued properties, such as background-image or animation; their value is a list of parallel grammar terms, almost always comma-separated (the only exceptions are certain legacy properties like counter-reset), indicating multiple distinct "values" interpreted in the same way. Other properties, such as color, are single-valued properties; they take only a single (possibly complex) value.

どの~propが~list値をとり，どれがそうでないか精確に定義する — おそらく付録にて。 `644$issue ◎ w3c/css-houdini-drafts/644[css-typed-om]Define precisely which properties are list-valued and which aren't, probably in an appendix.

注記： ~CSS~propには、 `単独の値をとる$ものから`~list値をとる$ように遷移した例が，いくつかある。 ~propが`単独の値をとる$頃に書かれた~codeが，将来に`~list値をとる$ようになったときにも非互換化しないことを確保するため、 `StylePropertyMap$I は `multi-map^en にされている† — それは，各~keyごとに値の`~list^emを格納するが、各~keyに対し，単独の値しかないかのようにヤリトリ-可能にする††。 ◎ There are multiple examples of CSS properties that have transitioned from being single-valued to list-valued. To ensure that code written at a time when a property was single-valued does not break when it becomes list-valued in the future, the StylePropertyMap is a multi-map; it stores list of values for each key, but allows you to interact with it as if there was only a single value for each key as well.

【† この “`multi-map^en” は、単に “一対多” を表すと見受けられる。】【†† `get()^m ~methodを通して。】

このことは、 `StylePropertyMap$I 内の単独の~prop用の複数の値は，その~propの値を成す複数片からなる連続的な定義を表現しないことを意味する。それらは代わりに、単独の~prop値において，~commaで分離された複数個の下位-値を表現する — `background-image$p ~prop内の各 “層” の様に。 ◎ This means that multiple values for a single property in a StylePropertyMap do not represent multiple successive definition of that property’s value; instead, they represent multiple comma-separated sub-values in a single property value, like each "layer" in a background-image property.

`get(property)@m ~method~手続きは： ◎ The get(property) method, when called on a StylePropertyMap this, must perform the following steps:

%property ~SET `~prop名を検査して正規化する$( %property ) ◎ If property is not a custom property name string, set property to property ASCII lowercased. ◎ If property is not a valid CSS property, throw a TypeError.
%~prop値 ~LET コレの `declarations$sl 内部~slot[ %property ] ◎ Let props be the value of this’s [[declarations]] internal slot.
~IF［ %~prop値 ~NEQ ε ］ ⇒ ~RET `具象化する$( 次の結果の最初の~item, %property ) ⇒ `~CSS値を反復成分に細分化する$( %~prop値 ) ◎ If props[property] exists, subdivide into iterations props[property], then reify the first item of the result and return it.
~RET `undefined^c 【！＊jv】 ◎ Otherwise, return undefined.

大域~objを定義する必要がある。【`671$issue】 ◎ Define the global.

`getAll(property)@m ~method~手続きは： ◎ The getAll(property) method, when called on a StylePropertyMap this, must perform the following steps:

%property ~SET `~prop名を検査して正規化する$( %property ) ◎ If property is not a custom property name string, set property to property ASCII lowercased. ◎ If property is not a valid CSS property, throw a TypeError.
%~prop値 ~LET コレの `declarations$sl 内部~slot[ %property ] ◎ Let props be the value of this’s [[declarations]] internal slot.
~IF［ %~prop値 ~NEQ ε ］ ⇒ ~RET ［ `~CSS値を反復成分に細分化する$( %~prop値 ) の結果］を，各 %~item から次を得る`演算で写像する$ ⇒ `具象化する$( %~item, %property ) ◎ If props[property] exists, subdivide into iterations props[property], then reify each item of the result, and return the list.
~RET 空`~list$ ◎ Otherwise, return an empty list.

大域~objを定義する必要がある。【`671$issue】 ◎ Define the global.

`has(property)@m ~method~手続きは： ◎ The has(property) method, when called on a StylePropertyMap this, must perform the following steps:

%property ~SET `~prop名を検査して正規化する$( %property ) ◎ If property is not a custom property name string, set property to property ASCII lowercased. ◎ If property is not a valid CSS property, throw a TypeError.
%~prop~map ~LET コレの `declarations$sl 内部~slot ◎ Let props be the value of this’s [[declarations]] internal slot.
~RET ~IS［ %~prop~map[ %property ] ~NEQ ε ］ ◎ If props[property] exists, return true. Otherwise, return false.

`size@m 取得子~手続きは ⇒ ~RET コレの `declarations$sl 内部~slotの`~size$map ◎ The size attribute, on getting from a StylePropertyMap this, must perform the following steps: • Return the size of the value of this’s [[declarations]] internal slot.

`set(property, ...values)@m ~method~手続きは： ◎ The set(property, ...values) method, when called on a StylePropertyMap this, must perform the following steps:

%property ~SET `~prop名を検査して正規化する$( %property ) ◎ If property is not a custom property name string, set property to property ASCII lowercased. ◎ If property is not a valid CSS property, throw a TypeError.
%値~list ~LET %values を成す値たちの`~list$ ◎ ↓
%個数 ~LET %値~list の`~size$ ◎ ↓
~IF［ ~OR↓ ］ ⇒ ~THROW `TypeError$E： ◎ ↓
- ［ %property は`単独の値をとる$ ］~AND［ %個数 ~GTE 2 ］ ◎ If property is a single-valued property and values has more than one item, throw a TypeError.
- %値~list 内のある`~item$の `associatedProperty$sl 内部~slot値 ~NIN { ~NULL, %property } ◎ If any of the items in values have a non-null [[associatedProperty]] internal slot, and that slot’s value is anything other than property, throw a TypeError.
- ［ %個数 ~GTE 2 ］~AND［ %値~list 内のある`~item$は［ `CSSUnparsedValue$I ／ `CSSVariableReferenceValue$I ］~objである］ ◎ If the size of values is two or more, and one or more of the items are a CSSUnparsedValue or CSSVariableReferenceValue object, throw a TypeError.
  
  注記：値が 2 個~以上あることは，~list値をとる~propに複数の~itemを設定していることを含意するが、文字列に基づく~OMにおいては， `var$f 関数が在るとすべての構文の構文解析は不能化される — 個々の反復成分に分割することも含め（ `var$f 値の内側にはもっと~commaがあるかもしれず、実際は何個の~itemがあるか伝えれない）。この段の制約は、 ~TypedOMにおいて同じ意味論を保全する。 ◎ Note: Having 2+ values implies that you’re setting multiple items of a list-valued property, but the presence of a var() function in the string-based OM disables all syntax parsing, including splitting into individual iterations (because there might be more commas inside of the var() value, so you can’t tell how many items are actually going to show up). This step’s restriction preserves the same semantics in the Typed OM.
%~prop~map ~LET コレの `declarations$sl 内部~slot ◎ Let props be the value of this’s [[declarations]] internal slot.
%~prop~map[ %property ] ~SET 空`~list$ ◎ If props[property] exists, remove it. ◎ Let values to set be an empty list.
%値~list を成す ~EACH( %値 ) に対し ⇒ %~prop~map[ %property ] に次の結果を付加する ⇒ `内部~表現を作成する$( %property, %値 ) ◎ For each value in values, create an internal representation for property and value, and append the result to values to set. ◎ Set props[property] to values to set.

注記： %property は削除されてから, また追加され、 `有順序~map$の末尾に置かれる — これにより、 `略式~prop$に面したときでも，期待される挙動を与える。 ◎ Note: The property is deleted then added back so that it gets put at the end of the ordered map, which gives the expected behavior in the face of shorthand properties.

`append(property, ...values)@m ~method~手続きは： ◎ The append(property, ...values) method, when called on a StylePropertyMap this, must perform the following steps:

%property ~SET `~prop名を検査して正規化する$( %property ) ◎ If property is not a custom property name string, set property to property ASCII lowercased. ◎ If property is not a valid CSS property, throw a TypeError.
%値~list ~LET %values を成す値たちの`~list$ ◎ ↓
~IF［ ~OR↓ ］ ⇒ ~THROW `TypeError$E： ◎ ↓
- %property は`単独の値をとる$ ◎ If property is not a list-valued property, throw a TypeError.
- %値~list 内のある`~item$の `associatedProperty$sl 内部~slot値 ~NIN { ~NULL, %property } ◎ If any of the items in values have a non-null [[associatedProperty]] internal slot, and that slot’s value is anything other than property, throw a TypeError.
- %値~list 内のある`~item$は［ `CSSUnparsedValue$I ／ `CSSVariableReferenceValue$I ］~objである ◎ If any of the items in values are a CSSUnparsedValue or CSSVariableReferenceValue object, throw a TypeError.
  
  注記： ~propが文字列に基づく~APIを介して設定されるとき、 ~prop内に `var$f が在ると，全体が解釈できなくなる。言い換えれば、 `var$f に`~~付随するすべて^emは，有意義な型が無い素な`成分~値$になる。この段の制約は、 ~TypedOMにおける同じ意味論を保全する。 ◎ Note: When a property is set via string-based APIs, the presence of var() in a property prevents the entire thing from being interpreted. In other words, everything besides the var() is a plain component value, not a meaningful type. This step’s restriction preserves the same semantics in the Typed OM.
%~prop~map ~LET コレの `declarations$sl 内部~slot ◎ Let props be the value of this’s [[declarations]] internal slot.
~IF［ %~prop~map[ %property ] ~EQ ε ］ ⇒ %~prop~map[ %property ] ~SET 空`~list$ ◎ If props[property] does not exist, set props[property] to an empty list.
~IF［ %~prop~map[ %property ] は `var$f 参照を含む］ ⇒ ~THROW `TypeError$E ◎ If props[property] contains a var() reference, throw a TypeError.
%値~list を成す ~EACH( %値 ) に対し ⇒ %~prop~map[ %property ] に次の結果を`付加する$ ⇒ `内部~表現を作成する$( %property, %値 ) ◎ Let temp values be an empty list. ◎ For each value in values, create an internal representation with property and value, and append the returned value to temp values. ◎ Append the entries of temp values to props[property].

`delete(property)@m ~method~手続きは： ◎ The delete(property) method, when called on a StylePropertyMap this, must perform the following steps:

%property ~SET `~prop名を検査して正規化する$( %property ) ◎ If property is not a custom property name string, set property to property ASCII lowercased. ◎ If property is not a valid CSS property, throw a TypeError.
コレの `declarations$sl 内部~slot[ %property ] ~SET ε ◎ If this’s [[declarations]] internal slot contains property, remove it.

`clear()@m ~method~手続きは ⇒ コレの `declarations$sl 内部~slotからすべての宣言を`除去する$map ◎ The clear() method, when called on a StylePropertyMap this, must perform the following steps: • Remove all of the declarations in this’s [[declarations]] internal slot.

`内部~表現を作成する@ ときは、所与の ( `文字列$ %~prop, `文字列$または `CSSStyleValue$I ~obj %値 ) に対し， %値の型に応じて次を走らす： ◎ To create an internal representation, given a string property and a string or CSSStyleValue value:

~IF［ %値は `CSSStyleValue$I ~objである］： ◎ ↓
1. ~IF［ %値は `CSSStyleValue$I の下位classでない］ ⇒ ~RET %値に結付けられた値 ◎ If value is a direct CSSStyleValue, • Return value’s associated value.
2. ~IF［ ~NOT %~prop は`~list値をとる$ ］~OR［ %値は %~prop の反復成分の`文法に合致-$しない【！＊property iteration of property】］ ⇒ ~THROW `TypeError$E ◎ If value is a CSSStyleValue subclass, ◎ If value does not match the grammar of a list-valued property iteration of property, throw a TypeError.
3. %~prop の~CSS文法を成す ~EACH( 数量-を表し, かつ範囲は制限されている成分 %成分 ) に対し：
  1. %成分~値 ~LET %値の中の %成分に対応する部分
  2. ~IF［ %成分~値は %成分の範囲~内にある］ ⇒ ~CONTINUE
  3. ~ELSE （ %成分~値は `CSSUnitValue$I ~objである） ⇒ %値の中の %成分~値を次のようにされた新たな `CSSMathSum$I 内に包装した結果に置換する ⇒ `values$m1 内部~slot ~SET « %成分~値 »
  ◎ If any component of property’s CSS grammar has a limited numeric range, and the corresponding part of value is a CSSUnitValue that is outside of that range, replace that value with the result of wrapping it in a fresh CSSMathSum whose values internal slot contains only that part of value.
4. ~RET %値 ◎ Return the value.
~ELSE （ %値は `USVString$T である） ⇒ ~RET `~CSSStyleValueを構文解析する$( %~prop, %値, `単数^i ) ◎ If value is a USVString, • Parse a CSSStyleValue with property property, cssText value, and parseMultiple set to false, and return the result.

注記：これは `TypeError$E を投出することもある。 ◎ Note: This can throw a TypeError instead.

~CSS~propは、それへの妥当な入力を，［ `CSS-SYNTAX-3$r `§ ~token化＠~CSSSYN#tokenization$ にて定義されるとおり，文字列を構文解析して得られる~CSS~token列に対して照合すること］を前提に書かれた文法で表出する。しかしながら、 `CSSStyleValue$I ~objも，これらの文法と照合できる。 ◎ CSS properties express their valid inputs with grammars, which are written with the assumption of being matched against strings parsed into CSS tokens, as defined in CSS Syntax 3 § 4 Tokenization. CSSStyleValue objects can also be matched against these grammars, however.

`CSSStyleValue$I がどの `文法に合致-@ するとされるかは、次の規則に基づく： ◎ A CSSStyleValue is said to match a grammar based on the following rules:

`CSSKeywordValue$I は、その `value$m1 内部~slotが `ident$t に合致するならば，文法~内に指定された `ident$t に合致する。 ◎ A CSSKeywordValue matches an <ident> specified in a grammar if its value internal slot matches the identifier.

その `ident$t 用の文字大小正規化~規則による効果が通常にある場合（ `width$p 用の文法~内に指定された~keyword `auto^v に合致している `Auto^v など）、この比較にも適用される。 ◎ If case-folding rules are in effect normally for that <ident> (such as Auto matching the keyword auto specified in the grammar for width), they apply to this comparison as well.
`CSSTransformValue$I は、 `transform-list$t に合致する。 ◎ A CSSTransformValue matches <transform-list>.
`CSSNumericValue$I は［その型が`合致-$するもの］に合致する。 ◎ A CSSNumericValue matches what its type matches.
`CSSUnparsedValue$I は、どの文法にも合致する。 ◎ A CSSUnparsedValue matches any grammar.
［ `CSSStyleValue$I ~objであってその下位classではないもの］のうち，［ `associatedProperty$sl ~slot ~NEQ ~NULL ］なるものは、その~slot内に指定された~propの文法に合致する — その文法が何であれ。 ◎ A direct CSSStyleValue object (not a subclass) with a non-null [[associatedProperty]] slot matches the grammar of the property specified in its [[associatedProperty]] slot, regardless of what it is.

注記： ~TypedOMにおいて複階的な値を作成する能がもっと増えれば、それに伴い，この節ももっと複階的になることになる。 ◎ Note: As the ability to create more complex values in Typed OM increases, this section will become more complex.

`--foo^p の様に 2 個の `002D^U ( `-^l ) から開始される`文字列$ は、 `~custom~prop名~文字列@ とされる。（これは， `custom-property-name$t 生成規則に対応するが、 `~CSS識別子$ではなく`文字列$に適用されるので，~CSS構文解析器を呼出すことなく利用できる／され得る。） ◎ A string is a custom property name string if it starts with two dashes (U+002D HYPHEN-MINUS), like --foo. (This corresponds to the <custom-property-name> production, but applies to strings, rather than identifiers; it can be used without invoking the CSS parser.)

次を満たす`文字列$は、 `妥当な~CSS~prop名@ とされる ⇒ ［ `~custom~prop名~文字列$である］~OR［ ~UAが認識する~CSS~prop名である【`~supportされる~CSS~prop$】］ ◎ A string is a valid CSS property if it is a custom property name string, or is a CSS property name recognized by the user agent.

`~prop名を検査して正規化する@ ときは、所与の ( 文字列 %property ) に対し，次を走らす：

【この~algoは、他所に共通な記述を集約するために，この訳にて導入している。】

~IF［ %property は`~custom~prop名~文字列$でない］ ⇒ %property ~LET `~ASCII小文字~化する$( %property )
~IF［ %property は`妥当な~CSS~prop名$でない］ ⇒ ~THROW `TypeError$E
~RET %property

◎ ↑↑

3.1. 算出d `StylePropertyMapReadOnly^I ~obj

partial interface `Element$I0 {
    [`SameObject$] `StylePropertyMapReadOnly$I `computedStyleMap$m();
};

`算出d~StylePropertyMap@ ~objは， `Element$I の`算出d値$を表現する。それは、 `computedStyleMap()$m ~methodを~callして~accessされる。 ◎ Computed StylePropertyMap objects represent the computed values of an Element, and are accessed by calling the computedStyleMap() method.

各 `Element$I は、 `computedStyleMapCache@sl 内部~slotを持ち，初期~時には ~NULL にされるとする。それは、 `computedStyleMap()$m ~methodが最初に~callされたときの結果を~cacheする。 ◎ Every Element has a [[computedStyleMapCache]] internal slot, initially set to null, which caches the result of the computedStyleMap() method when it is first called.

`computedStyleMap()@m ~method~手続きは： ◎ The computedStyleMap() method must, when called on an Element this, perform the following steps:

~IF［コレの `computedStyleMapCache$sl 内部~slot ~EQ ~NULL ］ ⇒ コレの `computedStyleMapCache$sl 内部~slot ~SET 次に従うような新たな `StylePropertyMapReadOnly$I ~obj： ◎ If this’s [[computedStyleMapCache]] internal slot is set to null, set its value to a new StylePropertyMapReadOnly object,＼

この~objの `declarations$sl 内部~slotは： ◎ whose [[declarations]] internal slot are＼
- 次に該当するすべての~propの［名前, `算出d値$ ］からなるとする ⇒＃ ~UAが~supportする略式でない~CSS~prop, 登録されている`~custom~prop$, 登録されていない`~custom~prop$のうちコレ上にてその初期~値に設定されていないもの ◎ the name and computed value of every longhand CSS property supported by the User Agent, every registered custom property, and every non-registered custom property which is not set to its initial value on this,＼
- 標準な順序に~sortされるとする。【 `declarations$sl 内部~slotの定義に述べた順序】 ◎ in the standard order.
- `declarations$sl 内の`算出d値$は、［コレ上の~propに対する~style解決が変化し, それらがどう算出されるか］に伴い変化するよう，~~最新であり続けるモノトスル。 ◎ The computed values in the [[declarations]] of this object must remain up-to-date, changing as style resolution changes the properties on this and how they’re computed.
  
  注記：実施においては、値は `get()^m ~method~callの背後に “隠される” ので、 ~UAは，所与の~propが実際に要請されるまでは算出するのを遅延できる。 ◎ Note: In practice, since the values are "hidden" behind a .get() method call, UAs can delay computing anything until a given property is actually requested.
~RET コレの `computedStyleMapCache$sl 内部~slot ◎ Return this’s [[computedStyleMapCache]] internal slot.

注記： `getComputedStyle()$m と同様に、この~methodは［ `生成元cleanか$ ~EQ ~F ］にされた~stylesheetからの情報を公開し得る。 ◎ Note: like Window.getComputedStyle(), this method can expose information from stylesheets with the origin-clean flag unset.

注記：この~methodが返す `StylePropertyMapReadOnly$I は、 `getComputedStyle()$m に利用される`解決d値$の概念ではなく，`実際の^em `算出d値$を表現する。したがって，一部の~prop（ `width$p など）に対しては、 `getComputedStyle()$m と異なる値を返すこともある。 ◎ Note: The StylePropertyMapReadOnly returned by this method represents the actual computed values, not the resolved value concept used by Window.getComputedStyle(). It can thus return different values than Window.getComputedStyle() for some properties (such as width).

注記： `~WGによる解決＠https://github.com/w3c/css-houdini-drafts/issues/350#issuecomment-294690156$ により、疑似要素の~styleは，この~methodを新たな `PseudoElement^I ~interfaceに追加することで得せるようになるものと意図されている（ `getComputedStyle()$m が 2 個目の引数（ %pseudoElt ）を利用して行う様にはせずに）。 ◎ Note: Per WG resolution, pseudo-element styles are intended to be obtainable by adding this method to the new PseudoElement interface (rather than using a pseudoElt argument like Window.getComputedStyle() does).

3.2. 宣言d／~inline `StylePropertyMap^I ~obj

partial interface `CSSStyleRule$I0 {
    [`SameObject$] readonly attribute `StylePropertyMap$I `styleMap$m;
};

partial interface mixin `ElementCSSInlineStyle$I0 {
    [`SameObject$] readonly attribute `StylePropertyMap$I `attributeStyleMap$m;
};

`宣言d~StylePropertyMap@ ~objは、［ ~style規則／ ~inline~style ］内に埋込まれた ( ~prop / 値 ) ~pairたちが成す~styleを表現する： ◎ Declared StylePropertyMap objects represent style property-value pairs embedded in a style rule or inline style, and＼

それは、次の属性を介して~accessされる：
- ~style規則に対しては、 `CSSStyleRule$I ~objの `styleMap@m1 属性
- ~inline~styleに対しては、（ `HTMLElement$I などの） `ElementCSSInlineStyle$I ~interface~mixinを実装する~objの `attributeStyleMap@m1 属性
◎ are accessed via the styleMap attribute of CSSStyleRule objects, or the attributeStyleMap attribute of objects implementing the ElementCSSInlineStyle interface mixin (such as HTMLElements).
その `declarations$sl 内部~slotは、 ~objの構築-時に，次のように初期化されるとする ⇒ 各~propのうち，［ ~objが表現する［ ~style規則／~inline~style ］の内側に妥当な値を伴うもの］ごとに， 1 個の`~entry$を包含する ◎ When constructed, the [[declarations]] internal slot for declared StylePropertyMap objects is initialized to contain an entry for each property with a valid value inside the CSSStyleRule or inline style that the object represents, in the same order as the CSSStyleRule or inline style.

4. `CSSStyleValue^I の下位class

4.1. `CSSUnparsedValue^I ~obj

[`Exposed$=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface `CSSUnparsedValue@I : `CSSStyleValue$I {
    `CSSUnparsedValue@mc(`sequence$<`CSSUnparsedSegment$> %members);

    `iterable$m<`CSSUnparsedSegment$>;
    readonly attribute `unsigned long$ `length$m;
    `getter$m `CSSUnparsedSegment$ (`unsigned long$ %index);
    `setter$m `CSSUnparsedSegment$ (`unsigned long$ %index, `CSSUnparsedSegment$ %val);
};

typedef (`USVString$ or `CSSVariableReferenceValue$I) `CSSUnparsedSegment@;

[`Exposed$=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface `CSSVariableReferenceValue@I {
    `CSSVariableReferenceValue$mc(`USVString$ %variable, optional `CSSUnparsedValue$I? %fallback = null);
    attribute `USVString$ `variable$m;
    readonly attribute `CSSUnparsedValue$I? `fallback@m;
};

`CSSUnparsedValue$I ~objは、 `~custom~prop$を参照する~prop値を表現する。それは，［ `USVString$T として与えられる文字列~片, `CSSVariableReferenceValue$I ~objとして与えられる変数~参照］が~~混在する`~list$であり、 ~objの `tokens@sl 内部~slotに格納される。 ◎ CSSUnparsedValue objects represent property values that reference custom properties. They are comprised of a list of string fragments and variable references. ◎ ↓

`iterable@m コレの`値~反復子$は、コレの `tokens$sl 内部~slotを成す~itemたちを順に反復する。 ◎ They have a [[tokens]] internal slot, which is a list of USVStrings and CSSVariableReferenceValue objects. This list is the object’s values to iterate over.

`length@m 取得子~手続きは ⇒ ~RET コレの `tokens$sl 内部~slotの`~size$ ◎ The length attribute returns the size of the [[tokens]] internal slot.

［ `getter@m／ `setter@m ］`特殊~演算$のふるまいは、コレの `tokens$sl に基づく： ◎ ↓

コレが`~supportする~prop~index$は、 0 以上［コレの `tokens$sl 内部~slotの`~size$ ］未満とする。 ◎ The supported property indexes of a CSSUnparsedValue this are the integers greater than or equal to 0, and less than the size of this’s [[tokens]] internal slot.
コレの`有index~propの値を決定する$ときは、所与の ( コレが`~supportする~prop~index$ %n ) に対し，コレの `tokens$sl 内部~slot[ %n ] を返す。【 %n が他の値のときにどうなるか言及されていない — ~NULL は返せないので、例外が投出される？】 ◎ To determine the value of an indexed property of a CSSUnparsedValue this and an index n, let tokens be this’s [[tokens]] internal slot, and return tokens[n].
コレの［ `既存の有index~propの値を設定する$ ／ `新たな有index~propの値を設定する$ ］ときは、所与の ( ~index %n, 値 %新たな値 ) に対し，次を遂行する：
1. %~token~list ~LET コレの `tokens$sl 内部~slot
2. ~IF［ %n はコレが`~supportする~prop~index$である］ ⇒ %~token~list[ %n ] ~SET %新たな値
3. ~ELIF［ %n ~EQ %~token~list の`~size$ ］ ⇒ %~token~list に %新たな値を`付加する$
4. ~ELSE ⇒ ~THROW `RangeError$E
◎ To set the value of an existing indexed property of a CSSUnparsedValue this, an index n, and a value new value, let tokens be this’s [[tokens]] internal slot, and set tokens[n] to new value. ◎ To set the value of a new indexed property of a CSSUnparsedValue this, an index n, and a value new value, let tokens be this’s [[tokens]] internal slot. If n is not equal to the size of tokens, throw a RangeError. Otherwise, append new value to tokens.

`variable@m 取得子~手続きは ⇒ ~RET コレの `variable$m 内部~slot。 ◎ The getter for the variable attribute of a CSSVariableReferenceValue this must return its variable internal slot.

`variable$m 設定子~手続きは、所与の ( 文字列 %variable ) に対し，次を走らすモノトスル： ◎ The variable attribute of a CSSVariableReferenceValue this must, on setting a variable variable, perform the following steps:

~IF［ %variable は`~custom~prop名~文字列$でない］ ⇒ ~THROW `TypeError$E ◎ If variable is not a custom property name string, throw a TypeError.
コレの `variable$m 内部~slot ~SET %variable ◎ Otherwise, set this’s variable internal slot to variable.

`CSSVariableReferenceValue(variable, fallback)@mm 構築子~手続きは： ◎ The CSSVariableReferenceValue(variable, fallback) constructor must, when called, perform the following steps:

~IF［ %variable は`~custom~prop名~文字列$でない］ ⇒ ~THROW `TypeError$E ◎ If variable is not a custom property name string, throw a TypeError.
コレの ⇒＃ `variable$m 内部~slot ~SET %variable, `fallback$m 内部~slot ~SET %fallback ◎ Return a new CSSVariableReferenceValue with its variable internal slot set to variable and its fallback internal slot set to fallback.

4.2. `CSSKeywordValue^I ~obj

`CSSKeywordValue$I ~objは、［ ~CSS~keyword／他の`~CSS識別子$ ］を表現する。 ◎ CSSKeywordValue objects represent CSS keywords and other idents.

[`Exposed$=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface `CSSKeywordValue@I : `CSSStyleValue$I {
    `CSSKeywordValue$mc(`USVString$ %value);
    attribute `USVString$ `value$m;
};

`CSSKeywordValue(value)@mm 構築子~手続きは： ◎ The CSSKeywordValue(value) constructor must, when called, perform the following steps:

~IF［ %value ~EQ 空~文字列］ ⇒ ~THROW `TypeError$E ◎ If value is an empty string, throw a TypeError.
コレの `value$m 内部~slot ~SET %value ◎ Otherwise, return a new CSSKeywordValue with its value internal slot set to value.

`CSSKeywordValue$I を受容する所はどこでも、次の~typedefと~algoを利用することにより，生の `USVString$T も受容する： ◎ Any place that accepts a CSSKeywordValue also accepts a raw USVString, by using the following typedef and algorithm:

typedef (`DOMString$ or `CSSKeywordValue$I) `CSSKeywordish@;

`~keywordに類する値を規格化する@ ときは、所与の ( %値 ) に対し，次を遂行する： ◎ To rectify a keywordish value val, perform the following steps:

~IF［ %値は `CSSKeywordValue$I ~objである］ ⇒ ~RET %値 ◎ If val is a CSSKeywordValue, return val.
~Assert： %値は `DOMString$T 型である ◎ If val is a DOMString,＼
~RET 次のようにされた新たな `CSSKeywordValue$I ⇒＃ `value$m 内部~slot ~SET %値 ◎ return a new CSSKeywordValue with its value internal slot set to val.

`value@m 設定子~手続きは： ◎ The value attribute of a CSSKeywordValue this must, on setting a value value, perform the following steps:

~IF［ %value ~EQ 空~文字列］ ⇒ ~THROW `TypeError$E ◎ If value is an empty string, throw a TypeError.
コレの `value$m 内部~slot ~SET %value ◎ Otherwise, set this’s value internal slot, to value.

4.3. 数量-値

`CSSNumericValue$I ~objは、その資質から数量-である~CSS値を表現する（ `number$t, `percentage$t, `dimension$t, など）。次の 2 つの~interfaceが `CSSNumericValue$I を継承する： ◎ CSSNumericValue objects represent CSS values that are numeric in nature (<number>s, <percentage>s, <dimension>s). There are two interfaces that inherit from CSSNumericValue:

`CSSUnitValue$I ~objは、単独の単位~型を包含する値を表現する（例： `42px^v ）。 ◎ CSSUnitValue objects represent values that contain a single unit type (for example "42px").
`CSSMathValue$I ~objは、複数の ( 値/単位 ) ~pairを包含し得るような，数式を表現する（例： `calc(56em + 10%)^v ）。 ◎ CSSMathValue objects represent math expressions, which can contain more than one value/unit (for example "calc(56em + 10%)").

`CSSNumericValue$I ~objが表現する値の範囲は、制約されない。妥当などの数量-値も、 `CSSNumericValue$I により表現できる。その値が`宣言d~StylePropertyMap$上に設定されても，［切詰められる／丸められる／却下される］ことはない。［切詰められる／丸められる］のは、 ~styleを算出する間に生じることになる。 ◎ CSSNumericValue objects are not range-restricted. Any valid numeric value can be represented by a CSSNumericValue, and that value will not be clamped, rounded, or rejected when set on a declared StylePropertyMap. Instead, clamping and/or rounding will occur during computation of style.

次の~codeは妥当である： ◎ The following code is valid

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^v になり（ `opacity$p は範囲が制約される）， %zIndex の値は `15^v になる（ `z-index$p は整数~値に丸められる）。 ◎ After execution, the value of opacity is 1 (opacity is range-restricted), and the value of zIndex is 15 (z-index is rounded to an integer value).

注記：変数~参照を組入れる “数量-値” は、代わりに `CSSUnparsedValue$I ~objとして表現され、 ~keywordは `CSSKeywordValue$I ~objとして表現されることになる。 ◎ Note: "Numeric values" which incorporate variable references will instead be represented as CSSUnparsedValue objects, and keywords as CSSKeywordValue objects.

`CSSNumericValue$I を受容する所はどこでも、次の~typedefと~algoを利用することにより，生の `double$T も受容する： ◎ Any place that accepts a CSSNumericValue also accepts a raw double, by using the following typedef and algorithm:

typedef (`double$ or `CSSNumericValue$I) `CSSNumberish@;

`実数に類する値を規格化する@ ときは、所与の ( %~num, 単位 %単位（省略時は `number^l ） ) に対し，次を遂行する： ◎ To rectify a numberish value num, optionally to a given unit unit (defaulting to "number"), perform the following steps:

~IF［ %~num は `CSSNumericValue$I ~objである］ ⇒ ~RET %~num ◎ If num is a CSSNumericValue, return num.
~Assert： %~num は `double$T 型である ◎ If num is a double,＼
~RET 次のようにされた新たな `CSSUnitValue$I ⇒＃ `value$m1 内部~slot ~SET %~num, `unit$m1 内部~slot ~SET %単位 ◎ return a new CSSUnitValue with its value internal slot set to num and its unit internal slot set to unit.

4.3.1. 共通な数量-演算と `CSSNumericValue^I 上位class

すべての数量-~CSS値（ `number$t, `percentage$t, `dimension$t ）は、 `CSSNumericValue$I ~interfaceの下位classにより表現される。 ◎ All numeric CSS values (<number>s, <percentage>s, and <dimension>s) are represented by subclasses of the CSSNumericValue interface.

enum `CSSNumericBaseType@I {
    "`length@m",
    "`angle@m",
    "`time@m",
    "`frequency@m",
    "`resolution@m",
    "`flex@m",
    "`percent@m",
};

dictionary `CSSNumericType@I {
    long `length@m;
    long `angle@m;
    long `time@m;
    long `frequency@m;
    long `resolution@m;
    long `flex@m;
    long `percent@m;
    `CSSNumericBaseType$I `percentHint@m;
};

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

    `boolean$ `equals$m(`CSSNumberish$... %value);

    `CSSUnitValue$I `to$m(`USVString$ %unit);
    `CSSMathSum$I `toSum$m(`USVString$... %units);
    `CSSNumericType$I `type$m();

    [`Exposed$=Window] static `CSSNumericValue$I `parse$m(`USVString$ %cssText);
};

上位class `CSSNumericValue$I の各種~methodは、すべての数量-値に遂行できる演算を表現する。 ◎ The methods on the CSSNumericValue superclass represent operations that all numeric values can perform.

以下に、各種次元に遂行できる算術~演算を与える： ◎ The following are the arithmetic operations you can perform on dimensions:

`add(...values)@m ~method~手続きは： ◎ The add(...values) method, when called on a CSSNumericValue this, must perform the following steps:

%値~list ~LET コレは `CSSMathSum$I ~objであるならばコレの `values$m1 内部~slotを`~clone$した結果／ ~ELSE_ « コレ » ◎ ↓
%values を成す ~EACH( %値 ) に対し ⇒ %値~list に次の結果を`付加する$ ⇒ `実数に類する値を規格化する$( %値 ) ◎ Replace each item of values with the result of rectifying a numberish value for the item. ◎ If this is a CSSMathSum object, prepend the items in this’s values internal slot to values. Otherwise, prepend this to values.
~IF［ %値~list 内のどの`~item$も `CSSUnitValue$I ~objである］~AND［ %値~list 内のすべての`~item$の `unit$m1 は互いに同じ %単位である］ ⇒ ~RET 次のようにされた新たな `CSSUnitValue$I ~obj ⇒＃ `unit$m1 内部~slot ~SET %単位【！コレの＊ `unit$m1 内部~slot】, `value$m1 内部~slot ~SET ［ %値~list 内のすべての`~item$の `value$m1 内部~slot ］の総和†

† この加算は、 “左から右の順” に行うモノトスル — 例えば，値が « 1, 2, 3, 4 » ならば、結果は (((1 + 2) + 3) + 4) になるように（この詳細は、浮動小数点~算術の下で，相互運用能を確保するために必要yである）。
◎ If all of the items in values are CSSUnitValues and have the same unit, return a new CSSUnitValue whose unit internal slot is set to this’s unit internal slot, and value internal slot is set to the sum of the value internal slots of the items in values. This addition must be done "left to right" - if values is « 1, 2, 3, 4 », the result must be (((1 + 2) + 3) + 4). (This detail is necessary to ensure interoperability in the presence of floating-point arithmetic.)
%型 ~LET `型を加算する$( %値~list 内のすべての`~item$の`型$ ) ◎ Let type be the result of adding the types of every item in values.＼
~IF［ %型 ~EQ `失敗^i ］ ⇒ ~THROW `TypeError$E ◎ If type is failure, throw a TypeError.
~RET 次のようにされた新たな `CSSMathSum$I ~obj ⇒ `values$m1 内部~slot ~SET %値~list ◎ Return a new CSSMathSum object whose values internal slot is set to values.

`sub(...values)@m ~method~手続きは： ◎ The sub(...values) method, when called on a CSSNumericValue this, must perform the following steps:

%values ~SET %values が成す~listを［各 %~item に対し，次の結果を`反数にする$ ］`演算で写像する$ ⇒ `実数に類する値を規格化する$( %~item ) ◎ Replace each item of values with the result of rectifying a numberish value for the item, then negating the value.
~RET ( %values ) を渡して，コレ上で `add()$m の内部~algoを~callした結果 ◎ Return the result of calling the add() internal algorithm with this and values.

`CSSNumericValue$I %V を `反数にする@ ときは： ◎ To negate a CSSNumericValue this:

~IF［ %V は `CSSMathNegate$I ~objである］ ⇒ ~RET %V の `value$m1 内部~slot ◎ If this is a CSSMathNegate object, return this’s value internal slot.
~IF［ %V は `CSSUnitValue$I ~objである］ ⇒ ~RET 次のようにされた新たな `CSSUnitValue$I ⇒＃ `unit$m1 内部~slot ~SET %V の`unit$m1 内部~slot, `value$m1 内部~slot ~SET %V の `value$m1 内部~slotの反数 ◎ If this is a CSSUnitValue object, return a new CSSUnitValue with the same unit internal slot as this, and a value internal slot set to the negation of this’s.
~RET 次のようにされた新たな `CSSMathNegate$I ~obj ⇒ `value$m1 内部~slot ~SET %V ◎ Otherwise, return a new CSSMathNegate object whose value internal slot is set to this.

`mul(...values)@m ~method~手続きは： ◎ The mul(...values) method, when called on a CSSNumericValue this, must perform the following steps:

%値~list ~LET コレは `CSSMathProduct$I ~objであるならばコレの `values$m1 内部~slotを`~clone$した結果／ ~ELSE_ « コレ » ◎ ↓
%values を成す ~EACH( %値 ) に対し ⇒ %値~list に次の結果を`付加する$ ⇒ `実数に類する値を規格化する$( %値 ) ◎ Replace each item of values with the result of rectifying a numberish value for the item. ◎ If this is a CSSMathProduct object, prepend the items in this’s values internal slot to values. Otherwise, prepend this to values.
~IF［ %値~list 内のどの`~item$も `CSSUnitValue$I ~objである］：
1. %単位 ~LET %値~list 内の`~item$のうち［その `unit$m1 内部~slot ~NEQ `number^l ］を満たすものの個数に応じて ⇒＃ 0 個ならば `number^l 1 個ならばその`~item$の `unit$m1 内部~slot ／ 2 個以上ならば ε
2. ~IF［ %単位 ~NEQ ε ］ ⇒ ~RET 次のようにされた新たな `CSSUnitValue$I ~obj ⇒＃ `unit$m1 内部~slot ~SET %単位, `value$m1 内部~slot ~SET { %値~list 内のすべての`~item$の `value$m1 内部~slot } の積†
† この乗算は、 “左から右の順” に行うモノトスル — 例えば，値が « 1, 2, 3, 4 » ならば、結果は (((1 × 2) × 3) × 4) になるように（この詳細は、浮動小数点~算術の下で，相互運用能を確保するために必要yである）。
◎ If all of the items in values are CSSUnitValues with unit internal slot set to "number", return a new CSSUnitValue whose unit internal slot is set to "number", and value internal slot is set to the product of the value internal slots of the items in values. ◎ This multiplication must be done "left to right" - if values is « 1, 2, 3, 4 », the result must be (((1 × 2) × 3) × 4). (This detail is necessary to ensure interoperability in the presence of floating-point arithmetic.) ◎ If all of the items in values are CSSUnitValues with unit internal slot set to "number" except one which is set to unit, return a new CSSUnitValue whose unit internal slot is set to unit, and value internal slot is set to the product of the value internal slots of the items in values. ◎ This multiplication must be done "left to right" - if values is « 1, 2, 3, 4 », the result must be (((1 × 2) × 3) × 4).
%型 ~LET `型を乗算する$( %値~list 内のすべての`~item$の`型$ ) ◎ Let type be the result of multiplying the types of every item in values.＼
~IF［ %型 ~EQ `失敗^i ］ ⇒ ~THROW `TypeError$E ◎ If type is failure, throw a TypeError.
~RET 次のようにされた新たな `CSSMathProduct$I ~obj ⇒ `values$m1 内部~slot ~SET %値~list ◎ Return a new CSSMathProduct object whose values internal slot is set to values.

`div(...values)@m ~method~手続きは： ◎ The div(...values) method, when called on a CSSNumericValue this, must perform the following steps:

%values ~SET %values が成す~listを［各 %~item に対し，次の結果を`逆数にする$ ］`演算で写像する$ ⇒ `実数に類する値を規格化する$( %~item ) ◎ Replace each item of values with the result of rectifying a numberish value for the item, then inverting the value.
~RET ( %values ) を渡して，コレ上で `mul()$m の内部~algoを~callした結果 ◎ Return the result of calling the mul() internal algorithm with this and values.

`CSSNumericValue$I %V を `逆数にする@ ときは： ◎ To invert a CSSNumericValue this:

~IF［ %V は `CSSMathInvert$I ~objである］ ⇒ ~RET %V の `value$m1 内部~slot ◎ If this is a CSSMathInvert object, return this’s value internal slot.
~IF［ %V は `CSSUnitValue$I ~objである］~AND［ %V の `unit$m1 内部~slot ~EQ `number^l ］： ◎ If this is a CSSUnitValue object with unit internal slot set to "number":
1. ~IF［ %V の `value$m1 内部~slot ~IN { 0, −0 } ］ ⇒ ~THROW `RangeError$E ◎ If this’s value internal slot is set to 0 or -0, throw a RangeError.
2. ~RET 次のようにされた新たな `CSSUnitValue$I ~obj ⇒＃ `unit$m1 内部~slot ~SET `number^l `value$m1 内部~slot ~SET 1 ~DIV ( %V の `value$m1 内部~slot値 ) ◎ Else return a new CSSUnitValue with the unit internal slot set to "number", and a value internal slot set to 1 divided by this’s {CSSUnitValue/value}} internal slot.
~RET 次のようにされた新たな `CSSMathInvert$I ~obj ⇒ `value$m1 内部~slot ~SET %V ◎ Otherwise, return a new CSSMathInvert object whose value internal slot is set to this.

`min(...values)@m ~method~手続きは： ◎ The min(...values) method, when called on a CSSNumericValue this, must perform the following steps:

%値~list ~LET コレは `CSSMathMin$I ~objであるならばコレの `values$m1 内部~slotを`~clone$した結果／ ~ELSE_ « コレ » ◎ ↓
%values を成す ~EACH( %値 ) に対し ⇒ %値~list に次の結果を`付加する$ ⇒ `実数に類する値を規格化する$( %値 ) ◎ Replace each item of values with the result of rectifying a numberish value for the item. ◎ If this is a CSSMathMin object, prepend the items in this’s values internal slot to values. Otherwise, prepend this to values.
~IF［ %値~list 内のどの`~item$も `CSSUnitValue$I ~objである］~AND［ %値~list 内のすべての`~item$の `unit$m1 は互いに同じ %単位である］ ⇒ ~RET 次のようにされた新たな `CSSUnitValue$I ~obj ⇒＃ `unit$m1 内部~slot ~SET %単位【！コレの＊ `unit$m1 内部~slot】, `value$m1 内部~slot ~SET { %値~list 内のすべての`~item$の `value$m1 内部~slot値 } の最小 ◎ If all of the items in values are CSSUnitValues and have the same unit, return a new CSSUnitValue whose unit internal slot is set to this’s unit internal slot, and value internal slot is set to the minimum of the value internal slots of the items in values.
%型 ~LET `型を加算する$( %値~list 内のすべての`~item$の`型$ ) ◎ Let type be the result of adding the types of every item in values.＼
~IF［ %型 ~EQ `失敗^i ］ ⇒ ~THROW `TypeError$E 。 ◎ If type is failure, throw a TypeError.
~RET 次のようにされた新たな `CSSMathMin$I ~obj ⇒ `values$m1 内部~slot ~SET %値~list ◎ Return a new CSSMathMin object whose values internal slot is set to values.

`max(...values)@m ~method~手続きは： ◎ The max(...values) method, when called on a CSSNumericValue this, must perform the following steps:

%値~list ~LET コレは `CSSMathMax$I ~objであるならばコレの `values$m1 内部~slotを`~clone$した結果／ ~ELSE_ « コレ » ◎ ↓
%values を成す ~EACH( %値 ) に対し ⇒ %値~list に次の結果を`付加する$ ⇒ `実数に類する値を規格化する$( %値 ) ◎ Replace each item of values with the result of rectifying a numberish value for the item. ◎ If this is a CSSMathMax object, prepend the items in this’s values internal slot to values. Otherwise, prepend this to values.
~IF［ %値~list 内のどの`~item$も `CSSUnitValue$I ~objである］~AND［ %値~list 内のすべての`~item$の `unit$m1 は互いに同じ %単位である］ ⇒ ~RET 次のようにされた新たな `CSSUnitValue$I ~obj ⇒＃ `unit$m1 内部~slot ~SET %単位【！コレの＊ `unit$m1 内部~slot】, `value$m1 内部~slot ~SET { %値~list 内のすべての`~item$の `value$m1 内部~slot値 } の最大 ◎ If all of the items in values are CSSUnitValues and have the same unit, return a new CSSUnitValue whose unit internal slot is set to this’s unit internal slot, and value internal slot is set to the maximum of the value internal slots of the items in values.
%型 ~LET `型を加算する$( %値~list 内のすべての`~item$の`型$ ) ◎ Let type be the result of adding the types of every item in values.＼
~IF［ %型 ~EQ `失敗^i ］ ⇒ ~THROW `TypeError$E ◎ If type is failure, throw a TypeError.
~RET 次のようにされた新たな `CSSMathMax$I ~obj ⇒ `values$m1 内部~slot ~SET %値~list ◎ Return a new CSSMathMax object whose values internal slot is set to values.

`equals(...values)@m ~method~手続きは： ◎ The equals(...values) method, when called on a CSSNumericValue this, must perform the following steps:

~RET ~IS［ %values を成すどの %値も次を満たす］ ⇒ ( コレ, `実数に類する値を規格化する$( %値 ) ) は`同等な数量-値$である ◎ Replace each item of values with the result of rectifying a numberish value for the item. ◎ For each item in values, if the item is not an equal numeric value to this, return false. ◎ Return true.

注記：この同等性は、すべての値が正確に［同じ順序で，同じ型かつ同じ値］にならない限り，満たされない。例えば、次の 2 つは`同等でない^em ⇒＃ `CSSMathSum(CSS.px(1), CSS.px(2))^c, `CSSMathSum(CSS.px(2), CSS.px(1))^c ◎ This notion of equality is purposely fairly exacting; all the values must be the exact same type and value, in the same order. For example, CSSMathSum(CSS.px(1), CSS.px(2)) is not equal to CSSMathSum(CSS.px(2), CSS.px(1)).

このように，かなり厳正で精密な観念にしている目的は、構造的な同等性を素早く~testできるようにするためである。より低速で~~寛容な同等性 — 引数たちはどの順序で合致することも許容するなど — の観念を利用した場合、おそらく，他のあらゆる単純~化 — `96px^v は `1in^v に同等になることを考慮する様な — も突き詰めるよう求まれるであろう — 将来的には、このような~~緩い同等性の観念も，追加されるかもしれない。 ◎ This precise notion is used because it allows structural equality to be tested for very quickly; if we were to use a slower and more forgiving notion of equality, such as allowing the arguments to match in any order, we’d probably want to go all the way and perform other simplifications, like considering 96px to be equal to 1in; this looser notion of equality might be added in the future.

2 つの `CSSNumericValue$I ~obj ( %V1, %V2 ) は、次を走らせた結果が ~T になるならば `同等な数量-値@ であるとされる： ◎ To determine whether two CSSNumericValues value1 and value2 are equal numeric values, perform the following steps:

~IF［ %V1, %V2 の~interfaceは相異なる【！members of ≠ interface member】］ ⇒ ~RET ~F ◎ If value1 and value2 are not members of the same interface, return false.
%V1 の~interfaceに応じて：
`CSSUnitValue$I ◎ If value1 and value2 are both CSSUnitValues,＼

`CSSUnitValue^II ~RET ~IS［ %V1 の `unit$m1 内部~slot ~EQ %V2 の `unit$m1 内部~slot ］~AND［ %V1 の `value$m1 内部~slot ~EQ %V2 の `value$m1 内部~slot ］ ◎ return true if they have equal unit and value internal slots, or false otherwise.

`CSSMathSum$I

`CSSMathProduct$I

`CSSMathMin$I

`CSSMathMax$I ◎ If value1 and value2 are both CSSMathSums, CSSMathProducts, CSSMathMins, or CSSMathMaxs:
1. %~size ~LET %V1 の `CSSMathSum^II `values$m1 内部~slotの`~size$ ◎ ↓
2. ~IF［ %~size ~NEQ %V2 の `CSSMathSum^II `values$m1 内部~slotの`~size$ ］ ⇒ ~RET ~F ◎ If value1’s values and value2s values internal slots have different sizes, return false.
3. ~RET ~IS［どの %i ~IN { 0 〜 %~size ~MINUS 1 } に対しても，次が満たされる］ ⇒ ( %V1 の `values$m1 内部~slot[ %i ], %V2 の `values$m1 内部~slot[ %i ] ) は`同等な数量-値$である ◎ If any item in value1’s values internal slot is not an equal numeric value to the item in value2’s values internal slot at the same index, return false. ◎ Return true.
`CSSMathNegate$I

`CSSMathInvert$I ◎ Assert: value1 and value2 are both CSSMathNegates or CSSMathInverts.

~RET ~IS［ ( %V1 の `CSSMathNegate^II `value$m1, %V2 の `value$m1 ) は`同等な数量-値$である］ ◎ Return whether value1’s value and value2’s value are equal numeric values.

`to(unit)@m ~method~手続きは： ◎ ↓

この~methodは、アリなら，コレを［ %unit に指定された単位を伴う，別の `CSSNumericValue$I ］に変換した結果を返す。 ◎ The to(unit) method converts an existing CSSNumericValue this into another one with the specified unit, if possible.＼ When called, it must perform the following steps:

~IF［ %unit に`対応する基底~型$ ~EQ ε ］ ⇒ ~THROW `SyntaxError$E ◎ Let type be the result of creating a type from unit. If type is failure, throw a SyntaxError.
%総和 ~LET `総和~値を作成する$( コレ ) ◎ Let sum be the result of creating a sum value from this.＼
~IF［ %総和 ~EQ `失敗^i ］ ⇒ ~THROW `TypeError$E ◎ If sum is failure, throw a TypeError.
~IF［ %総和の`~size$ ~NEQ 1 ］ ⇒ ~THROW `TypeError$E ◎ If sum has more than one item, throw a TypeError.＼
%単位~値 ~LET `総和~値~itemから~CSSUnitValueを作成する$( %総和[ 0 ] ) ◎ Otherwise, let item be the result of creating a CSSUnitValue from the sole item in sum, then＼
%単位~値 ~SET `単位~値を変換する$( %単位~値, %unit ) ◎ converting it to unit.＼
~IF［ %単位~値 ~EQ `失敗^i ］ ⇒ ~THROW `TypeError$E ◎ If item is failure, throw a TypeError.
~RET %単位~値 ◎ Return item.

`総和~値~itemから~CSSUnitValueを作成する@ ときは、所与の ( `総和~値$を成すある~item %~item ) に対し，次を遂行する：

( %~key, %N ) ~LET %~item の`単位~map$を成す`~entry$の個数に応じて ⇒＃ 0 個ならば ( `number^l, 1 ) 1 個ならばその`~entry$の ( `~key$map, `値$map ) ／ 2 個以上ならば ( ε, ε )
~IF［ %N ~NEQ 1 ］ ⇒ ~RET `失敗^i
~RET 次のようにされた新たな `CSSUnitValue$I ~obj ⇒＃ `unit$m1 内部~slot ~SET %~key, `value$m1 内部~slot ~SET %~item の`値$sum

◎ When asked to create a CSSUnitValue from a sum value item item, perform the following steps: • If item has more than one entry in its unit map, return failure. • If item has no entries in its unit map, return a new CSSUnitValue whose unit internal slot is set to "number", and whose value internal slot is set to item’s value. • Otherwise, item has a single entry in its unit map. If that entry’s value is anything other than 1, return failure. • Otherwise, return a new CSSUnitValue whose unit internal slot is set to that entry’s key, and whose value internal slot is set to item’s value.

`toSum(...units)@m ~method~手続きは： ◎ ↓

この~methodは、アリならコレを［ %units に指定された単位たちのみを伴う，一連の `CSSUnitValue$I ］からなる `CSSMathSum$I に変換する（ `to()$m に似るが、結果~内に複数の単位が~~混在することも許容する）。 %units が省略されて~callされた場合、単にコレを［コレを成す `CSSUnitValue$I たちの極力少ない総和］に単純~化する。 ◎ The toSum(...units) method converts an existing CSSNumericValue this into a CSSMathSum of only CSSUnitValues with the specified units, if possible. (It’s like to(), but allows the result to have multiple units in it.) If called without any units, it just simplifies this into a minimal sum of CSSUnitValues. ◎ ↑When called, it must perform the following steps:

%単位~list ~LET %units が成す引数~list ◎ ↓
%単位~list を成す ~EACH( %単位 ) に対し ⇒ ~IF［ %単位に`対応する基底~型$ ~EQ ε ］ ⇒ ~THROW `SyntaxError$E ◎ For each unit in units, if the result of creating a type from unit is failure, throw a SyntaxError.
%総和 ~LET `総和~値を作成する$( コレ ) ◎ Let sum be the result of creating a sum value from this.＼
~IF［ %総和 ~EQ `失敗^i ］ ⇒ ~THROW `TypeError$E ◎ If sum is failure, throw a TypeError.
%値~list ~LET %総和を［ `総和~値~itemから~CSSUnitValueを作成する$ ］`演算で写像する$ ◎ Let values be the result of creating a CSSUnitValue for each item in sum.＼
~IF［ `失敗^i ~IN %値~list ］ ⇒ ~THROW `TypeError$E ◎ If any item of values is failure, throw a TypeError.
~IF［ %単位~list は`空$である］：
1. %値~list を［その各`~item$の `CSSUnitValue^II `unit$m1 内部~slotの`符号位置$ ］順に~sortする
2. ~RET 次のようにされた新たな `CSSMathSum$I ~obj ⇒ `values$m1 内部~slot ~SET %値~list
◎ If units is empty, sort values in code point order according to the unit internal slot of its items, then return a new CSSMathSum object whose values internal slot is set to values.
%結果~list ~LET 空`~list$ ◎ Otherwise, let result initially be an empty list.＼
%単位~list を成す ~EACH( %単位 ) に対し： ◎ For each unit in units:
1. %合計 ~LET 0 ◎ Let temp initially be a new CSSUnitValue whose unit internal slot is set to unit and whose value internal slot is set to 0.
2. %値~list を成す ~EACH( %値 ) に対し： ◎ For each value in values:
  1. %値の単位 ~LET %値の`CSSUnitValue^II `unit$m1 内部~slot ◎ Let value unit be value’s unit internal slot.
  2. ~IF［ ( %値の単位, %単位 ) は`互換~単位$でない【！＊number の取り扱いは？】］ ⇒ ~CONTINUE ◎ If value unit is a compatible unit with unit, then:
  3. %合計 ~INCBY %値の `value$m1 内部~slotの値 ~MUL ( %値の単位から %単位への換算率 ) 【！＊単位~値を変換する$( 値, 単位 ) を簡素化】 ◎ Convert value to unit. ◎ Increment temp’s value internal slot by the value of value’s value internal slot.
  4. %値~list から %値を`除去する$ ◎ Remove value from values.
3. %結果~list に次のようにされた新たな `CSSUnitValue$I ~objを`付加する$ ⇒＃ `unit$m1 内部~slot ~SET %単位, `value$m1 内部~slot ~SET %合計 ◎ Append temp to result.
~IF［ %値~list は空でない］ ⇒ ~THROW `TypeError$E 渡されたどの単位にも互換でない単位の値が，コレ内にある。 ◎ If values is not empty, throw a TypeError. this had units that you didn’t ask for.
~RET 次のようにされた新たな `CSSMathSum$I ~obj ⇒ `values$m1 内部~slot ~SET %結果~list ◎ Return a new CSSMathSum object whose values internal slot is set to result.

`type()@m ~method~手続きは： ◎ ↓

この~methodは、コレの`型$の表現を返す。 ◎ The type() method returns a representation of the type of this. ◎ When called, it must perform the following steps:

%結果 ~LET 新たな `CSSNumericType$I 辞書 ◎ Let result be a new CSSNumericType.
~EACH( `基底~型$ %基底~型 ) に対し ⇒ %結果[ %基底~型 ] ~SET コレの`型$[ %累乗数 ] ◎ For each baseType → power in the type of this, • If power is not 0, set result[baseType] to power.
~IF［コレの`型$の`百分率hint$ ~NEQ ~NULL ］ ⇒ %結果の `percentHint$m1 ~SET コレの`型$の`百分率hint$ ◎ If the percent hint of this is not null, • Set percentHint to the percent hint of this.
~RET %結果 ◎ Return result.

`総和~値@ は、何個かの単位~付きの実数の総和により， `CSSNumericValue$I を抽象的に表現する（単位は、場合によっては複階的になる）。が、 `総和~値$で表出できない `CSSNumericValue$I もある。 ◎ A sum value is an abstract representation of a CSSNumericValue as a sum of numbers with (possibly complex) units. Not all CSSNumericValues can be expressed as a sum value.

`総和~値$は`~list$であり、その各~itemは， ( `値@sum, `単位~map@ ) が成す`~tuple$である：

`値$sumは、実数を与える。
`単位~map$は、 `有順序~map$であり，［単位を与える文字列］を［累乗数を与える整数］に対応付ける。

◎ A sum value is a list. Each entry in the list is a tuple of a value, which is a number, and a unit map, which is a map of units (strings) to powers (integers).

~CSS値とそれに等価な`総和~値$の例：

~CSS値	`総和~値$（備考）
`1px^v	« (1, «[`px^l → 1]») »
`calc(1px + 1in)^v	« (97, «[`px^l → 1]») » （`in$u , `px$u は`互換~単位$であり， `px$u はそれらの`正準-単位$なので。）
`calc(1px + 2em)^v	« (1, «[`px^l → 1]»), (2, «[`em^l → 1]») »
`calc(1px + 2%)^v	« (1, «[`px^l → 1]»), (2, «[`percent^l → 1]») » （百分率は、他の単位に加算するのは許容されるが，`型$内の単位の様に別の単位に解決されることはない。）
`calc(1px * 2em)^v	« (2, «[`em^l → 1, `px^l → 1]») »
`calc(1px + 1deg)^v	（算出は妥当でないので`総和~値$として表現できない。）
`calc(1px * 2deg)^v	« (2, «[`deg^l → 1, `px^l → 1]») »

◎ Here are a few examples of CSS values, and their equivalent sum values: • 1px becomes «(1, «["px" → 1]»)» • calc(1px + 1in) becomes «(97, «["px" → 1]»)» (because in and px are compatible units, and px is the canonical unit for them) • calc(1px + 2em) becomes «(1, «["px" → 1]»), (2, «["em" → 1]»)» • calc(1px + 2%) becomes «(1, «["px" → 1]»), (2, «["percent" → 1]»)» (percentages are allowed to add to other units, but aren’t resolved into another unit, like they are in a type) • calc(1px * 2em) becomes «(2, «["em" → 1, "px" → 1]»)» • calc(1px + 1deg) can’t be represented as a sum value because it’s an invalid computation • calc(1px * 2deg) becomes «(2, «["deg" → 1, "px" → 1]»)»

所与の `CSSNumericValue$I %N から `総和~値を作成する@ ときは、 %N の~classに応じて： ◎ To create a sum value from a CSSNumericValue this, the steps differ based on this’s class:

`CSSUnitValue$I

%単位 ~LET %N の `unit$m1 内部~slotの値 ◎ Let unit be the value of this’s unit internal slot, and＼
%値 ~LET %N の `value$m1 内部~slotの値 ◎ value be the value of this’s value internal slot.
~IF［ %単位 ~EQ `number^l ］ ⇒ ~RET « ( %値, «[ ]» ) » ◎ ↓
~IF［ %単位はある`正準-単位$ %U の`互換~単位$である］ ⇒＃ %値 ~SET %値 ~MUL ( %単位から %U への換算率 )； %単位 ~SET %U 【を表現する文字列】 ◎ If unit is a member of a set of compatible units, and is not the set’s canonical unit, multiply value by the conversion ratio between unit and the canonical unit, and change unit to the canonical unit.
~RET « (%値, «[%単位 → 1]») » ◎ If unit is "number", return «(value, «[ ]»)». ◎ Otherwise, return «(value, «[unit → 1]»)».

`CSSMathSum$I

%値~list ~LET 空`~list$ ◎ Let values initially be an empty list.
%N の `values$m1 内部~slotを成す ~EACH( %~item ) に対し： ◎ For each item in this’s values internal slot:
1. %値 ~LET `総和~値を作成する$( %~item ) ◎ Let value be the result of creating a sum value from item.＼
2. ~IF［ %値 ~EQ `失敗^i ］ ⇒ ~RET `失敗^i ◎ If value is failure, return failure.
3. %値を成す ~EACH( %下位-値 ) に対し： ◎ For each subvalue of value:
  1. ~IF［ %値~list 内にある`~item$ %~item があって，［ %~item, %下位-値］の`単位~map$は互いに一致する【！＊一致するの定義】］ ⇒ %~item の`値$sum ~INCBY %下位-値の`値$sum ◎ If values already contains an item with the same unit map as subvalue, increment that item’s value by the value of subvalue.
  2. ~ELSE ⇒ %値~list に %下位-値を`付加する$ ◎ Otherwise, append subvalue to values.
%型~list ~LET %値~list を［ `単位~mapから型を作成する$ ］`演算で写像する$ ◎ Create a type from the unit map of each item of values, and＼
~IF［ `型を加算する$( %型~list を成すすべての型 ) ~EQ `失敗^i ］ ⇒ ~RET `失敗^i ◎ add all the types together.＼ ◎ If the result is failure, return failure.
~RET %値~list ◎ Return values.

`CSSMathNegate$I

%値~list ~LET `総和~値を作成する$( %N の `value$m1 内部~slot ) ◎ Let values be the result of creating a sum value from this’s value internal slot.
~IF［ %値~list ~EQ `失敗^i ］ ⇒ ~RET `失敗^i ◎ If values is failure, return failure.
%値~list を成す ~EACH( `~item$ ) に対し ⇒ ~itemの`値$sumを反数にする ◎ Negate the value of each item of values.
~RET %値~list ◎ Return values.

`CSSMathProduct$I

%値~list ~LET `総和~値$ «(1, «[ ]»)» （すなわち， `1^v から取得されるもの） ◎ Let values initially be the sum value «(1, «[ ]»)». (I.e. what you’d get from 1.)
%N の `values$m1 内部~slotを成す ~EACH( %~item ) に対し： ◎ For each item in this’s values internal slot:
1. %新-値~list ~LET `総和~値を作成する$( %~item ) ◎ Let new values be the result of creating a sum value from item.＼
2. %一時~list ~LET 空`~list$ ◎ Let temp initially be an empty list.
3. ~IF［ %新-値~list ~EQ `失敗^i ］ ⇒ ~RET `失敗^i ◎ If new values is failure, return failure.
4. %値~list を成す ~EACH( %~item ) に対し ⇒ %新-値~list を成す ~EACH( %新~item ) に対し ⇒ %一時~list に次に与える`~tuple$を付加する：
  - `値$sum ~SET %~item の`値$sum ~MUL %新~item の`値$sum
  - `単位~map$ ~SET ［ `単位~mapの積をとる$( %~item の`単位~map$, %新~item の`単位~map$ ) ］の結果から， 0 を値にとる`~entry$はすべて除去した結果
  ◎ For each item1 in values: • For each item2 in new values: •• Let item be a tuple with its value set to the product of the values of item1 and item2, and its unit map set to the product of the unit maps of item1 and item2, with all entries with a zero value removed. •• Append item to temp.
5. %値~list ~SET %一時~list ◎ Set values to temp.
~RET %値~list ◎ Return values.

`CSSMathInvert$I

%値~list ~LET `総和~値を作成する$( %N の `value$m1 内部~slot ) ◎ Let values be the result of creating a sum value from this’s value internal slot.
~IF［ %値~list ~EQ `失敗^i ］ ⇒ ~RET `失敗^i ◎ If values is failure, return failure.
~IF［ `値$sum の`~size$ ~GT 1 ］ ⇒ ~RET `失敗^i ◎ If the length of values is more than one, return failure.
%値~list を成す ~EACH( %~item ) に対し：
1. %~item の`値$sum ~SET その逆数（乗法逆元を見出す）
2. %~item の`単位~map$を成す ~EACH( %~entry ) に対し ⇒ %~entry の`値$map ~SET その反数（加法逆元を見出す）
◎ Invert (find the reciprocal of) the value of the item in values, and negate the value of each entry in its unit map.
~RET %値~list ◎ Return values.

`CSSMathMin$I

`CSSMathMax$I

%総和~値~list ~LET %N の `values$m1 内部~slotを［ `総和~値を作成する$ ］`演算で写像する$ ◎ Let args be the result of creating a sum value for each item in this’s values internal slot.
~IF［ `失敗^i ~IN %総和~値~list ］~OR［ある`総和~値$ ~IN %総和~値~list があって，その`~size$ ~GT 1 ］ ⇒ ~RET `失敗^i ◎ If any item of args is failure, or has a length greater than one, return failure.
%~item~list ~LET %総和~値~list を［ %~item に対し， %~item[0] を得る］`演算で写像する$ ◎ ↓
~IF［ %~item~list 内にある 2 つの~itemがあって，それらの`単位~map$は互いに一致しない【！＊一致するの定義】］ ⇒ ~RET `失敗^i ◎ If not all of the unit maps among the items of args are identical, return failure.
%値~list ~LET %~item~list を［ ~itemの`値$sumを得る］`演算で写像する$ ◎ ↓
%N の~classに応じて ⇒＃ `CSSMathMin$I ならば %値~list 内の最も小さい値／ `CSSMathMax$I ならば %値~list 内の最も大きい値 ◎ Return the item of args whose sole item has the smallest value. ◎ CSSMathMax ◎ Let args be the result of creating a sum value for each item in this’s values internal slot. ◎ If any item of args is failure, or has a length greater than one, return failure. ◎ If not all of the unit maps among the items of args are identical, return failure. ◎ Return the item of args whose sole item has the largest value.

`単位~mapから型を作成する@ ときは、所与の ( %単位~map ) に対し： ◎ To create a type from a unit map unit map:

%型 ~LET `型を作成する$() ◎ Let types be an initially empty list.
%単位~map を成す ~EACH( %単位 → %累乗数 ) に対し：
1. %基底~型 ~LET %単位に`対応する基底~型$
2. ~Assert： %基底~型は`基底~型$である
3. %型[ %基底~型 ] ~SET %型[ %基底~型 ] ~PLUS %累乗数
◎ For each unit → power in unit map: • Let type be the result of creating a type from unit. • Set type’s sole value to power. • Append type to types.
~RET %型 ◎ Return the result of multiplying all the items of types.

【原文は`型を乗算する$~algoを利用しているが、この訳では “`対応する基底~型$” を利用して，等価に簡約している。】

`単位~mapの積をとる@ ときは、所与の ( `単位~map$ %U, `単位~map$ %V ) に対し，次を走らす： ◎ The product of two unit maps units1 and units2 is the result given by the following steps:

%結果 ~LET %U の複製 ◎ Let result be a copy of units1.
%V を成す ~EACH( %単位 → %累乗数 ) に対し： ◎ For each unit → power in units2:
1. ~IF［ %結果[ %単位 ] ~NEQ ε ］ ⇒ %結果[ %単位 ] ~INCBY %累乗数 ◎ If result[unit] exists, increment result[unit] by power.
2. ~ELSE ⇒ %結果[ %単位 ] ~SET %累乗数 ◎ Otherwise, set result[unit] to power.
~RET %結果 ◎ Return result.

`parse(cssText)@m ~method~手続きは： ◎ ↓

この静的~methodは、 ~CSSを包含している文字列から直に `CSSNumericValue$I を構築-可能にする。 ◎ The parse() method allows a CSSNumericValue to be constructed directly from a string containing CSS. Note that this is a static method, existing directly on the CSSNumericValue interface object, rather than on CSSNumericValue instances. ◎ The parse(cssText) method, when called, must perform the following steps:

%結果 ~LET `成分~値を構文解析する$( %cssText ) ◎ Parse a component value from cssText and let result be the result.＼
~IF［ %結果 ~EQ 構文~error ］ ⇒ ~THROW `SyntaxError$E ◎ If result is a syntax error, throw a SyntaxError and abort this algorithm.
~IF［ %結果は［ `number-token$t ／ `percentage-token$t ／ `dimension-token$t ／ `~math関数$ ］でない］ ⇒ ~THROW `SyntaxError$E ◎ If result is not a <number-token>, <percentage-token>, <dimension-token>, or a math function, throw a SyntaxError and abort this algorithm.
~IF［ %結果は `dimension-token$t である］~AND［ `型を作成する$( %結果の単位 ) ~EQ `失敗^i ］ ⇒ ~THROW `SyntaxError$E ◎ If result is a <dimension-token> and creating a type from result’s unit returns failure, throw a SyntaxError and abort this algorithm.
~RET `数量-値を具象化する$( %結果 ) ◎ Reify a numeric value result, and return the result.

4.3.2. 数量-値の型~付け

各 `CSSNumericValue$I ~objには、 `型@ が結付けられる：

`型$は、各`基底~型$を整数に対応付ける`有順序~map$である。

（これらの整数は、 `型$を成す`基底~型$の指数を表す。 `calc(1px * 1em)^v などから得られる `length$t² は、 «[ `length^l → 2 ]» になる。）
ただし，`型$ %型においては、所与の`基底~型$ %~key に対し %~key を伴う`~entryを包含して$いないならば， %型[ %~key ] は 0 を返すとする（ ε ではなく）。

【この規約は、この訳による追加である。原文では、あらゆる箇所で， 2 つの条件［ %型は %~key を伴う`~entryを包含して$いない（ %型[ %~key ] ~EQ ε ）］と［ %型[ %~key ] ~EQ 0 ］は同じに扱われている（その違いは外から観測され得ない）。なので、この訳では前者の条件を後者に統合して，他所の条件分岐を簡略化している。（これは、すべての`基底~型$ %~key に対し暗黙的に［ %型[ %~key ] ~SET 0 ］に初期化されていると見做しても同じことになる。）】
次に挙げるものが `基底~型@ とされる ⇒＃ `length^l, `angle^l, `time^l, `frequency^l, `resolution^l, `flex^l, `percent^l
`型$を成す`~entry$たちの順序は、常に，前項の`基底~型$に挙げた順序に従うとする。
各`型$には、 `百分率hint@ も結付けられる。それは、［ ~NULL または `percent^l 以外の`基底~型$ ］のいずれかをとり，他が指定されない限り ~NULL をとる。

（~NULL でない場合、次を指示する：当の`型$は，実際には百分率を保持しているが、その百分率は最終的には，それが与える`基底~型$に解決され, 当の`型$の中でその結果に置換される。）

【 `百分率hint$は、おそらく、確定されていない値（~lay-outしないと判明しない，内容に依存する~sizeなど）に相対的な百分率~値を表現-可能にするためにある。】【この仕様は、どの`型$ %型に対しても，次の不変則：［ %型の`百分率hint$ ~EQ ~NULL ］~OR［ %型[ `percent^l ] ~EQ 0 ］を保ち続ける。この訳では、この不変則も利用して，原文の［ `型を加算する$／`型を乗算する$ ］~algoを論理的に単純~化している（入力の`型$がこの不変則を満たさない場合の結果は、原文の~algoと異なり得る — が，原文の~algoは、そのような入力に対しては，結合的でも可換でもなくなる（なので、この不変則を前提に記されていると見受けられる）。この訳では、そのような入力に対しても，結合的, かつ可換になるようにしている）。】

◎ Each CSSNumericValue has an associated type,＼ which is a map of base types to integers＼ (denoting the exponent of each type, so a <length>2, such as from calc(1px * 1em), is «[ "length" → 2 ]»),＼ and an associated percent hint＼ (indicating that the type actually holds a percentage, but that percentage will eventually resolve to the hinted base type, and so has been replaced with it in the type). ◎ The base types are "length", "angle", "time", "frequency", "resolution", "flex", and "percent".＼ The ordering of a type’s entries always matches this base type ordering.＼ The percent hint is either null or a base type other than "percent".

注記： ~CSSに新たな単位~型が追加されれば、それに伴い，この`基底~型$の~listと~CSS`~math関数$にも追加されることになる。 ◎ Note: As new unit types are added to CSS, they’ll be added to this list of base types, and to the CSS math functions.

`型を作成する@ ときは、所与の ( 文字列 %単位（省略時は `number^l ） ) に対し，次を遂行する： ◎ To create a type from a string unit, follow the appropriate branch of the following:

%基底~型 ~LET %単位に`対応する基底~型$

所与の文字列 %単位に `対応する基底~型@ は、次の表tの 1 列目に挙げる分類のうち， %単位が該当する行の 2 列目に与える値とする【この定義は、この訳による追加】：

`number^l	`無次元^i
`percent^l	`percent^l
`length$t 単位	`length^l
`angle$t 単位	`angle^l
`time$t 単位	`time^l
`frequency$t 単位	`frequency^l
`resolution$t 単位	`resolution^l
`flex$t 単位	`flex^l
その他	ε

◎ unit is "number" • Return «[ ]» (empty map) ◎ unit is "percent" • Return «[ "percent" → 1 ]» ◎ unit is a <length> unit • Return «[ "length" → 1 ]» ◎ unit is an <angle> unit • Return «[ "angle" → 1 ]» ◎ unit is a <time> unit • Return «[ "time" → 1 ]» ◎ unit is a <frequency> unit • Return «[ "frequency" → 1 ]» ◎ unit is a <resolution> unit • Return «[ "resolution" → 1 ]» ◎ unit is a <flex> unit • Return «[ "flex" → 1 ]»

~IF［ %基底~型 ~EQ ε ］ ⇒ ~RET `失敗^i ◎ anything else • Return failure.
%型 ~LET 新たな`型$（すなわち， «[ ]» ）
~IF［ %基底~型 ~NEQ `無次元^i ］ ⇒ %型[ %基底~型 ] ~SET 1
%型の`百分率hint$ ~SET ~NULL ◎ In all cases, the associated percent hint is null.
~RET %型

`型を加算する@ ときは、所与の ( `型$ %型/1, `型$ %型/2 ) に対し，次を遂行する：

【入力は 3 個~以上の`型$からなる~listとしても与えられ得る（この節の末尾の注記を見よ）。】【ここでは、 `百分率hint$にて述べた不変則も利用して，原文の~algoを単純~化している。】

%~hint ~LET %型/1 の`百分率hint$
~IF［ %~hint ~NEQ ~NULL ］ ⇒ ~IF［ %型/2 の`百分率hint$ ~NIN { ~NULL, %~hint } ］ ⇒ ~RET `失敗^i — %型/1, %型/2 は加算できない（以下同様）
~ELSE ⇒ %~hint ~SET %型/2 の`百分率hint$
%~hint~key ~LET ~NULL
~EACH( `基底~型$ %~key ) に対し（順序は有意にならない）：
1. ~IF［ %~key ~EQ `percent^l ］ ⇒ ~CONTINUE
2. ~IF［ %~key ~NEQ %~hint ］~AND［ %型/1[ %~key ] ~EQ %型/2[ %~key ] ］ ⇒ ~CONTINUE
3. ~IF［ %~hint ~NIN { ~NULL, %~key } ］ ⇒ ~RET `失敗^i
4. ~IF［ %型/1[ `percent^l ] ~PLUS %型/1[ %~key ] ~NEQ %型/2[ `percent^l ] ~PLUS %型/2[ %~key ] ］ ⇒ ~RET `失敗^i
5. ~IF［ %~hint~key ~NEQ ~NULL ］ ⇒ ~RET `失敗^i
6. %~hint~key ~SET %~key
%型 ~SET %型/1 の複製
%型に`百分率hintを適用する$( %~hint~key )
~RET %型

◎ To add two types type1 and type2, perform the following steps: • Replace type1 with a fresh copy of type1, and type2 with a fresh copy of type2. Let finalType be a new type with an initially empty ordered map and an initially null percent hint. • If both type1 and type2 have non-null percent hints with different values •• The types can’t be added. Return failure. • If type1 has a non-null percent hint hint and type2 doesn’t •• Apply the percent hint hint to type2. •• Vice versa if type2 has a non-null percent hint and type1 doesn’t. • Otherwise •• Continue to the next step. • If all the entries of type1 with non-zero values are contained in type2 with the same value, and vice-versa •• Copy all of type1’s entries to finalType, and then copy all of type2’s entries to finalType that finalType doesn’t already contain. Set finalType’s percent hint to type1’s percent hint. Return finalType. • If type1 and/or type2 contain "percent" with a non-zero value, and type1 and/or type2 contain a key other than "percent" with a non-zero value •• For each base type other than "percent" hint: ••• Provisionally apply the percent hint hint to both type1 and type2. ••• If, afterwards, all the entries of type1 with non-zero values are contained in type2 with the same value, and vice versa, then copy all of type1’s entries to finalType, and then copy all of type2’s entries to finalType that finalType doesn’t already contain. Set finalType’s percent hint to hint. Return finalType. ••• Otherwise, revert type1 and type2 to their state at the start of this loop. •• If the loop finishes without returning finalType, then the types can’t be added. Return failure. •• Note: You can shortcut this in some cases by just checking the sum of all the values of type1 vs type2. If the sums are different, the types can’t be added. • Otherwise •• The types can’t be added. Return failure.

`型$ %型に `百分率hintを適用する@ ときは、所与の ( `百分率hint$ %~hint ) に対し，次を遂行する： ◎ To apply the percent hint hint to a type, perform the following steps:

~IF［ %~hint ~EQ ~NULL ］ ⇒ ~RET 【この段は、他所を単純~化するための，この訳による追加。】
%型[ %~hint ] ~INCBY %型[ `percent^l ] ◎ If type doesn’t contain hint, set type[hint] to 0. ◎ If type contains "percent", add type["percent"] to type[hint], then＼
%型[ `percent^l ] ~SET 0 ◎ set type["percent"] to 0.
%型の`百分率hint$ ~SET %~hint ◎ Set type’s percent hint to hint.

`型を乗算する@ ときは、所与の ( `型$ %型/1, `型$ %型/2 ) に対し，次を遂行する： ◎ To multiply two types type1 and type2, perform the following steps:

%型 ~LET `型を作成する$() ◎ Replace type1 with a fresh copy of type1, and type2 with a fresh copy of type2. Let finalType be a new type with an initially empty ordered map and an initially null percent hint.
%~hint ~LET %型/1 の`百分率hint$
~IF［ %~hint ~NEQ ~NULL ］ ⇒ ~IF［ %型/2 の`百分率hint$ ~NIN { ~NULL, %~hint } ］ ⇒ ~RET `失敗^i — %型/1, %型/2 は乗算できない ◎ If both type1 and type2 have non-null percent hints with different values, the types can’t be multiplied. Return failure.
~ELSE ⇒ %~hint ~SET %型/2 の`百分率hint$ ◎ If type1 has a non-null percent hint hint and type2 doesn’t, apply the percent hint hint to type2. ◎ Vice versa if type2 has a non-null percent hint and type1 doesn’t.
~EACH( `基底~型$ %基底~型 ) に対し ⇒ %型[ %~key ] ~SET %型/1[ %基底~型 ] ~PLUS %型/2[ %基底~型 ] ◎ Copy all of type1’s entries to finalType, then for each baseType → power of type2: • If finalType[baseType] exists, increment its value by power. • Otherwise, set finalType[baseType] to power.
%型に`百分率hintを適用する$( %~hint ) ◎ Set finalType’s percent hint to type1’s percent hint.
~RET %型 ◎ Return finalType.

`型を逆数にする@ ときは、所与の ( `型$ %型 ) に対し，次を遂行する： ◎ To invert a type type, perform the following steps:

%結果 ~LET `型を作成する$() ◎ Let result be a new type with an initially empty ordered map＼
%結果の`百分率hint$ ~SET %型の`百分率hint$ ◎ and a percent hint matching that of type.
%型を成す ~EACH( %単位 → %指数 ) に対し ⇒ %結果[ %単位 ] ~SET − %指数 ◎ For each unit → exponent of type, set result[unit] to (-1 * exponent).
~RET %結果 ◎ Return result.

所与の`型$ %型【および，場合によっては %型を成す値】が，所与の~CSS生成規則に `合致-@ するかどうかは、以下に従って定義される： ◎ A type is said to match a CSS production in some circumstances:

この定義の目的においては、 %型の `純~単位@ とは， ~AND↓ を満たす %単位が［在るならばそれ／無いならば ε ］とする：
- ［ %単位 ~EQ `number^l ］~OR［［ %単位は`基底~型$である］~AND［ %型[ %単位 ] ~EQ 1 ］］
- どの`基底~型$ %~key も，次を満たす ⇒ ［ %~key ~EQ %単位］~OR［ %型[ %~key ] ~EQ 0 ］
【この定義は、以下を簡潔に述べるため，この訳に導入している。 %型を成す値は、 `純~単位$に応じて［ `number^l ならば無次元量（単位なし）／ `percent^l ならば他の単位に相対的な一次元量か, 無次元量に相対的な無次元量／他の非 ε 値ならば単位 %単位の一次元量／ ε ならば多重次元量］を表すことになる。】
%型は次を満たすならば `length$t に`合致-$するとされる ⇒ `純~単位$ ~EQ `length^l

ただし， %型を成す値が `percentage$t 値を許容しない文脈において利用される所では、次も追加的に満たさなければナラナイ ⇒ `百分率hint$ ~EQ ~NULL

`angle$t, `time$t, `frequency$t, `resolution$t, `flex$t に対しても，同様に定義される。
◎ A type matches <length> if its only non-zero entry is «[ "length" → 1 ]». Similarly for <angle>, <time>, <frequency>, <resolution>, and <flex>. ◎ If the context in which the value is used does not allow <percentage> values, then the type must additionally have a null percent hint to be considered matching.
%型は次を満たすならば `percentage$t に`合致-$するとされる ⇒ `純~単位$ ~EQ `percent^l ◎ A type matches <percentage> if its only non-zero entry is «[ "percent" → 1 ]».
%型は次を満たすならば `length-percentage$t に`合致-$するとされる ⇒ `純~単位$ ~IN { `length^l, `percent^l }

`angle-percentage$t, `time-percentage$t, 等々に対しても，同様に定義される。
◎ A type matches <length-percentage> if its only non-zero entry is either «[ "length" → 1 ]» or «[ "percent" → 1 ]». Same for <angle-percentage>, <time-percentage>, etc.
%型は次を満たすならば `number$t に`合致-$するとされる ⇒ `純~単位$ ~EQ `number^l

ただし， %型を成す値が `percentage$t 値を許容しない文脈において利用される所では、次も追加的に満たさなければナラナイ ⇒ `百分率hint$ ~EQ ~NULL
◎ A type matches <number> if it has no non-zero entries. ◎ If the context in which the value is used does not allow <percentage> values, then the type must additionally have a null percent hint to be considered matching.

注記： `型$の集合は、加算の下で半群（ `semi-group^en ）を形成し，乗算の下で単位元を有する半群（ `monoid^en ）を形成する（【！`百分率hint$に~NULLを伴う «[ ]»】 `型を作成する$() の結果が乗法的~単位元を与える）。すなわち、それらは結合的, かつ可換である。したがって仕様は、何個でも一義的に`型を加算する$ことができる — 一度に 2 個ずつ`型を加算する$よう記すことに代えて。 ◎ Note: Types form a semi-group under both addition and a monoid under multiplication (with the multiplicative identity being «[ ]» with a null percent hint), meaning that they’re associative and commutative. Thus the spec can, for example, add an unbounded number of types together unambiguously, rather than having to manually add them pair-wise.

4.3.3. 単位~付きの値： `CSSUnitValue^I ~obj

単独の単位として表出できる数量-値（あるいは裸の実数／百分率）は、 `CSSUnitValue$I ~objとして表現される。 ◎ Numeric values that can be expressed as a single unit (or a naked number or percentage) are represented as CSSUnitValues.

例えば~stylesheet内の値 `5px^v は、次のようにされた `CSSUnitValue$I により表現される ⇒＃ `value^m 属性 ~SET 5, `unit^m 属性 ~SET `px^l ◎ For example, the value 5px in a stylesheet will be represented by a CSSUnitValue with its value attribute set to 5 and its unit attribute set to "px".

同様に，~stylesheet内の値 `10^v は、次のようにされた `CSSUnitValue$I により表現される ⇒＃ `value^m 属性 ~SET 10, `unit^m 属性 ~SET `number^l ◎ Similarly, the value 10 in a stylesheet will be represented by a CSSUnitValue with its value attribute set to 10 and its unit attribute set to "number".

[`Exposed$=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface `CSSUnitValue@I : `CSSNumericValue$I {
    `CSSUnitValue$mc(`double$ %value, `USVString$ %unit);
    attribute `double$ `value@m;
    readonly attribute `USVString$ `unit@m;
};

`CSSUnitValue(value, unit)@mm 構築子~手続きは： ◎ The CSSUnitValue(value, unit) constructor must, when called, perform the following steps:

~IF［ %unit に`対応する基底~型$ ~EQ ε ］ ⇒ ~THROW `TypeError$E ◎ If creating a type from unit returns failure, throw a TypeError and abort this algorithm.
コレの ⇒＃ `value$m 内部~slot ~SET %値, `unit$m ~SET %単位 ◎ Return a new CSSUnitValue with its value internal slot set to value and its unit set to unit.

`CSSUnitValue$I %V の`型$ は、次の結果になる ⇒ `型を作成する$( %V の `unit$m 内部~slot ) ◎ The type of a CSSUnitValue is the result of creating a type from its unit internal slot.

`~CSSUnitValueを作成する@ ときは、所与の ( %実数, %単位 ) に対し，次のようにされた新たな `CSSUnitValue$I ~objを返す ⇒＃ `value$m 内部~slot ~SET %実数, `unit$m 内部~slot ~SET %単位 ◎ To create a CSSUnitValue from a pair (num, unit), return a new CSSUnitValue object with its value internal slot set to num, and its unit internal slot set to unit.

例えば、次の結果は `new CSSUnitValue(5, "px")^c の結果と等価な~objになる ⇒ `~CSSUnitValueを作成する$( 5, `px^l ) ◎ For example, creating a new unit value from (5, "px") creates an object equivalent to new CSSUnitValue(5, "px").

注記：これは、仕様~内部の~algoであり、単純に，必要なときに単位~付きの値を容易に作成するためにある。 ◎ Note: This is a spec-internal algorithm, meant simply to make it easier to create unit values in algorithms when needed.

`単位~値を変換する@ ときは、所与の ( `CSSUnitValue$I ~obj %単位~値, 単位 %単位 ) に対し，次を遂行する： ◎ To convert a CSSUnitValue this to a unit unit, perform the following steps:

%旧-単位 ~LET %単位~値の `unit$m 内部~slotの値 ◎ Let old unit be the value of this’s unit internal slot,＼
%旧-値 ~LET %単位~値の `value$m 内部~slotの値 ◎ and old value be the value of this’s value internal slot.
~IF［ ( %旧-単位, %単位 ) は`互換~単位$でない］ ⇒ ~RET `失敗^i ◎ If old unit and unit are not compatible units, return failure.
~RET 次のようにされた新たな `CSSUnitValue$I ~obj ⇒＃ `unit$m 内部~slot ~SET %単位, `value$m 内部~slot ~SET %旧-値 ~MUL ( %旧-単位から %単位への換算率 ) ◎ Return a new CSSUnitValue whose unit internal slot is set to unit, and whose value internal slot is set to old value multiplied by the conversation ratio between old unit and unit.

4.3.4. 複階的な数量-値： `CSSMathValue^I ~obj

単独の ( 値, 単位 ) 組より複雑な数量-値は， `CSSMathValue$I 下位classたちが成す~treeにより表現され、その各~~末端~nodeは， `CSSUnitValue$I ~objになる。 ~CSSにおける`~math関数$（ `calc$f, `min$f, `max$f ）は、この仕方で表現される。 ◎ Numeric values that are more complicated than a single value+unit are represented by a tree of CSSMathValue subclasses, eventually terminating in CSSUnitValue objects at the leaf nodes. The calc(), min(), and max() functions in CSS are represented in this way.

例えば~CSS値 `calc(1em + 5px)^v は、 `CSSMathSum(CSS.em(1), CSS.px(5))^c の様に， `CSSMathSum$I により表現されることになる。 ◎ For example, the CSS value calc(1em + 5px) will be represented by a CSSMathSum like CSSMathSum(CSS.em(1), CSS.px(5)).

`calc(1em + 5px * 2)^v の様な複階的な式は、 `CSSMathSum(CSS.em(1), CSSMathProduct(CSS.px(5), 2))^c の様な入子な構造により表現されることになる。 ◎ A more complex expression, like calc(1em + 5px * 2), will be represented by a nested structure like CSSMathSum(CSS.em(1), CSSMathProduct(CSS.px(5), 2)).

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

[`Exposed$=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface `CSSMathSum@I : `CSSMathValue$I {
    `CSSMathSum$mc(`CSSNumberish$... %args);
    readonly attribute `CSSNumericArray$I `values@m;
};

[`Exposed$=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface `CSSMathProduct@I : `CSSMathValue$I {
    `CSSMathProduct$mc(`CSSNumberish$... %args);
    readonly attribute `CSSNumericArray$I `values@m;
};

[`Exposed$=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface `CSSMathNegate@I : `CSSMathValue$I {
    `CSSMathNegate$mc(`CSSNumberish$ %arg);
    readonly attribute `CSSNumericValue$I `value@m;
};

[`Exposed$=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface `CSSMathInvert@I : `CSSMathValue$I {
    `CSSMathInvert$mc(`CSSNumberish$ %arg);
    readonly attribute `CSSNumericValue$I `value@m;
};

[`Exposed$=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface `CSSMathMin@I : `CSSMathValue$I {
    `CSSMathMin$mc(`CSSNumberish$... %args);
    readonly attribute `CSSNumericArray$I `values@m;
};

[`Exposed$=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface `CSSMathMax@I : `CSSMathValue$I {
    `CSSMathMax$mc(`CSSNumberish$... %args);
    readonly attribute `CSSNumericArray$I `values@m;
};

[`Exposed$=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface `CSSMathClamp@I : `CSSMathValue$I {
    `CSSMathClamp$mc(`CSSNumberish$ %lower, `CSSNumberish$ %value, `CSSNumberish$ %upper);
    readonly attribute `CSSNumericValue$I `lower@m;
    readonly attribute `CSSNumericValue$I `value@m;
    readonly attribute `CSSNumericValue$I `upper@m;
};

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

enum `CSSMathOperator@I {
    "`sum@m",
    "`product@m",
    "`negate@m",
    "`invert@m",
    "`min@m",
    "`max@m",
    "`clamp@m",
};

注記： `CSSMathValue$I は、純粋な上位classであり，直には構築できない。それは，もっぱら、すべての “~math” 演算に共通な属性を~hostするためにある。 ◎ Note: CSSMathValue, being a pure superclass, cannot be directly constructed. It exists solely to host the common attributes of all the "math" operations.

`CSSMathValue^II `operator@m1 取得子~手続きは ⇒ ~RET コレの~interfaceに応じて，次の表tの 2 列目に与える文字列（ `CSSMathOperator$I 列挙~値）：

~interface	結果
`CSSMathSum$I	`sum^l
`CSSMathProduct$I	`product^l
`CSSMathMin$I	`min^l
`CSSMathMax$I	`max^l
`CSSMathClamp$I	`clamp^l
`CSSMathNegate$I	`negate^l
`CSSMathInvert$I	`invert^l

◎ The operator attribute of a CSSMathValue this must, on getting, return the following string, depending on the interface of this: ◎ CSSMathSum • "sum" CSSMathProduct • "product" CSSMathMin • "min" CSSMathMax • "max" CSSMathClamp • "clamp" CSSMathNegate • "negate" CSSMathInvert • "invert" ◎ Note: These are all instances of the CSSMathOperator enum.

`CSSMathSum(...args)@mm 構築子~手続きは： ◎ The CSSMathSum(...args) constructor must, when called, perform the following steps:

%args ~SET %args が成す~listを［ `実数に類する値を規格化する$ ］`演算で写像する$ ◎ Replace each item of args with the result of rectifying a numberish value for the item.
~IF［ %args は`空$である］ ⇒ ~THROW `SyntaxError$E ◎ If args is empty, throw a SyntaxError.
%型 ~LET `型を加算する$( %args を成すすべての`~item$の`型$ ) ◎ Let type be the result of adding the types of all the items of args.＼
~IF［ %型 ~EQ `失敗^i ］ ⇒ ~THROW `TypeError$E ◎ If type is failure, throw a TypeError.
コレの `values$m 内部~slot ~SET %args ◎ Return a new CSSMathSum whose values internal slot is set to args.

［ `CSSMathMin(...args)@mm ／ `CSSMathMax(...args)@mm ］構築子~手続きは、 `CSSMathSum()$mm 構築子~手続きと同じに定義される（最後の段において，各自の `values^m 内部~slotを設定することを除いて）。 ◎ The CSSMathMin(...args) and CSSMathMax(...args) constructors are defined identically to the above, except that in the last step they return a new CSSMathMin or CSSMathMax object, respectively.

`CSSMathProduct(...args)@mm 構築子~手続きは、次を除いて `CSSMathSum()$mm 構築子~手続きと同じに定義される ⇒ 3 番目の段においては、 `型を加算する$代わりに`型を乗算する$ （および、最後の段において，自身の `values$m 内部~slotを設定する） ◎ The CSSMathProduct(...args) constructor is defined identically to the above, except that in step 3 it multiplies the types instead of adding, and in the last step it returns a CSSMathProduct.

`CSSMathClamp(lower, value, upper)@mm 構築子~手続きは： ◎ The CSSMathClamp(lower, value, upper) constructor must, when called, perform the following steps:

%lower ~SET `実数に類する値を規格化する$( %lower ) ◎ ↓
%value ~SET `実数に類する値を規格化する$( %value ) ◎ ↓
%upper ~SET `実数に類する値を規格化する$( %upper ) ◎ Replace lower, value, and upper with the result of rectifying a numberish value for each.
%型 ~LET `型を加算する$( %lower, %value, %upper ) ◎ Let type be the result of adding the types of lower, value, and upper.＼
~IF［ %型 ~EQ `失敗^i ］ ⇒ ~THROW `TypeError$E ◎ If type is failure, throw a TypeError.
コレの ⇒＃ `lower$m 内部~slot ~SET %lower, `value$m 内部~slot ~SET %value, `upper$m 内部~slot ~SET %upper ◎ Return a new CSSMathClamp whose lower, value, and upper internal slots are set to lower, value, and upper, respectively.

`CSSMathNegate(arg)@mm 構築子~手続きは ⇒ コレの `value$m 内部~slot ~SET `実数に類する値を規格化する$( %arg ) ◎ The CSSMathNegate(arg) constructor must, when called, perform the following steps: • Replace arg with the result of rectifying a numberish value for arg. • Return a new CSSMathNegate whose value internal slot is set to arg.

`CSSMathInvert(arg)@mm 構築子~手続きは ⇒ コレの `value$m 内部~slot ~SET `実数に類する値を規格化する$( %arg ) ◎ The CSSMathInvert(arg) constructor is defined identically to the above, except that in the last step it returns a new CSSMathInvert object.

`CSSMathValue$I %M の`型$ は、 %M の~classに応じて，次で与えられる： ◎ The type of a CSSMathValue depends on its class:

`CSSMathSum$I: `型を加算する$( %M の `values$m1 内部~slot内の各`~item$の`型$ )
`CSSMathMin$I: `型を加算する$( %M の `values$m1 内部~slot内の各`~item$の`型$ )
`CSSMathMax$I: `型を加算する$( %M の `values$m1 内部~slot内の各`~item$の`型$ ) ◎ The type is the result of adding the types of each of the items in its values internal slot.
`CSSMathClamp$I: `型を加算する$( %M の［ `lower$m1, `value$m1, `upper$m1 ］内部~slotの`型$ ) ◎ The type is the result of adding the types of the lower, value, and upper internal slots.
`CSSMathProduct$I: `型を乗算する$( %M の `values$m1 内部~slot内の各`~item$の`型$ ) ◎ The type is the result of multiplying the types of each of the items in its values internal slot.
`CSSMathNegate$I: %M の `value$m1 内部~slotの`型$ ◎ The type is the same as the type of its value internal slot.
`CSSMathInvert$I: %M の `value$m1 内部~slotの`型$を，それを成すすべての`~entry$の`値$mapを反数にした結果 ◎ The type is the same as the type of its value internal slot, but with all values negated.

`CSSNumericArray$I0 の：

`length@m 取得子は、コレが包含する `CSSNumericValue$I の個数を返す。 ◎ The length attribute of CSSNumericArray indicates how many CSSNumericValues are contained within the CSSNumericArray.
`getter@m における`有index取得子$は、供された~indexにある `CSSNumericValue$I を検索取得する。 ◎ The indexed property getter of CSSNumericArray retrieves the CSSNumericValue at the provided index.

4.3.5. 数量-~factory関数

以下に挙げる~factory関数を利用すれば、構築子を直に利用するより，ずっと簡潔に新たな数量-値を作成できる。 ◎ The following factory functions can be used to create new numeric values much less verbosely than using the constructors directly.

partial namespace `CSS$I0 {
    `CSSUnitValue$I `number@m(`double$ %value);
    `CSSUnitValue$I `percent@m(`double$ %value);

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


    // `angle^t
    `CSSUnitValue$I `deg@m(`double$ %value);
    `CSSUnitValue$I `grad@m(`double$ %value);
    `CSSUnitValue$I `rad@m(`double$ %value);
    `CSSUnitValue$I `turn@m(`double$ %value);

    // `time^t
    `CSSUnitValue$I `s@m(`double$ %value);
    `CSSUnitValue$I `ms@m(`double$ %value);

    // `frequency^t
    `CSSUnitValue$I `Hz@m(`double$ %value);
    `CSSUnitValue$I `kHz@m(`double$ %value);

    // `resolution^t
    `CSSUnitValue$I `dpi@m(`double$ %value);
    `CSSUnitValue$I `dpcm@m(`double$ %value);
    `CSSUnitValue$I `dppx@m(`double$ %value);

    // `flex^t
    `CSSUnitValue$I `fr@m(`double$ %value);
};

上に定義されたどの名前 %N （ `number^l, `px^l, 等々）の~methodも，その~method手続きは、所与の ( %value ) に対し，次のようにされた新たな `CSSUnitValue$I ~objを返す ⇒＃ `value$m1 内部~slot ~SET %value, `unit$m1 内部~slot ~SET %N ◎ All of the above methods must, when called with a double value, return a new CSSUnitValue whose value internal slot is set to value and whose unit internal slot is set to the name of the method as defined here. ◎ Note: The unit used does not depend on the current name of the function, if it’s stored in another variable; let foo = CSS.px; let val = foo(5); does not return a {value: 5, unit: "foo"} CSSUnitValue. The above talk about names is just a shorthand to avoid defining the unit individually for all ~60 functions.

上に挙げた~methodたちは、特定0の時点における~CSSの妥当な定義済みな単位たちが成す集合を反映する。それらの集合は、時間~越しに更新されるので，~~最新とは限らない。実装が［上に挙げたどの~methodにも対応しないが，既存の `CSSNumericType$I 値のうちいずれかに対応する~CSS単位］を追加的に~supportする場合、そのような~methodを追加的に~supportするモノトスル — 当の単位に定義された正準的な文字大小-法で命名した上で，上で定義した汎用な挙動を利用して。 ◎ The above list of methods reflects the set of CSS’s valid predefined units at one particular point in time. It will be updated over time, but might be out-of-date at any given moment. If an implementation supports additional CSS units that do not have a corresponding method in the above list, but that do correspond to one of the existing CSSNumericType values, it must additionally support such a method, named after the unit in its defined canonical casing, using the generic behavior defined above.

実装は，既存のどの `CSSNumericType$I 値にも`対応しない^em単位を~supportする場合には、この仕様にて定義される~APIにおいては，そのような単位を~supportしないモノトスル。実装は、［そのような単位, その型が，この仕様に明示的に追加される］よう要請するベキである — 適切な型~名は，単位から暗黙的に与えられるものではないので。 ◎ If an implementation supports units that do not correspond to one of the existing CSSNumericType values, it must not support those units in the APIs defined in this specification; it should request the units and their types be added explicitly to this specification, as the appropriate type name is not implicit from the unit.

実装は，所与の単位を~supportしない場合、上に挙げたそれに対応する~methodを実装しないモノトスル。 ◎ If an implementation does not support a given unit, it must not implement its corresponding method from the list above.

例えば， `CSS-SPEECH-1$r は、追加的な単位として［ `decibel$t 用に `dB^u, `semitones$t 用に `st^u ］を定義する。現在の~browser実装のうち［これらを~supportする，あるいはそうする計画があるもの］は無いので，これらの単位~用の~methodは上に挙げられていないが、 `CSS-SPEECH-1$r を`~supportする^em実装は， `CSS$I において［ `dB()^m, `st()^m ］~methodも公開するモノトスル。 ◎ For example, the CSS Speech spec [CSS-SPEECH-1] defines two additional units, the decibel dB and semitone st. No current browser implementation supports these or has plans to, so they’re not included in the above list, but if an implementation does support the Speec spec, it must also expose CSS.dB() and CSS.st() methods.

4.4. `CSSTransformValue^I ~obj

`CSSTransformValue$I ~objは、 `transform$p ~propに利用される `transform-list$t 値を表現する。それは、個々の `transform-function$t 値を表現する 1 個~以上の `CSSTransformComponent$I を “包含し” 、 ~objの `values@sl 内部~slotに格納される。 ◎ CSSTransformValue objects represent <transform-list> values, used by the transform property. They "contain" one or more CSSTransformComponents, which represent individual <transform-function> values. ◎ ↓↓

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

    readonly attribute `boolean$ `is2D$m;
    `DOMMatrix$I `toMatrix$m();
};

`iterable@m における`値~反復子$は、コレの `values$sl 内部~slotを成す~itemたちを順に反復する。 ◎ A CSSTransformValue’s values to iterate over is a list of CSSTransformComponents.

`CSSTransformValue(transforms)@mm 構築子~手続きは： ◎ The CSSTransformValue(transforms) constructor must, when called, perform the following steps:

~IF［ %transforms は空である］ ⇒ ~THROW `TypeError$E ◎ If transforms is empty, throw a TypeError.
コレの `values$sl ~SET %transforms に等価な同順の`~list$ ◎ Return a new CSSTransformValue whose values to iterate over is transforms.

`is2D@m 取得子~手続きは ⇒ ~RET ~IS［コレの `values$sl を成すどの~itemも次を満たす］ ⇒ その `~TCis2D$m 属性は ~T を返す ◎ The is2D attribute of a CSSTransformValue this must, on getting, return true if, for each func in this’s values to iterate over, the func’s is2D attribute would return true; otherwise, the attribute returns false.

`toMatrix()@m ~method~手続きは： ◎ The toMatrix() method of a CSSTransformValue this must, when called, perform the following steps:

%行列 ~LET 単位行列で初期化された新たな `DOMMatrix$I ◎ Let matrix be a new DOMMatrix, initialized to the identity matrix,＼
%行列の`~2Dか$ ~SET ~T ◎ with its is2D internal slot set to true.
コレの `values$sl を成す ~EACH( `CSSTransformComponent$I %成分 ) に対し ⇒ %行列 ~SET %行列に［ %成分上で `toMatrix()$m1 を~callした結果の `DOMMatrix$I ］で表現される行列を，右から乗算した結果【結果の`~2Dか$にも %成分の `~TCis2D$m が影響する。】 ◎ For each func in this’s values to iterate over: • Let funcMatrix be the DOMMatrix returned by calling toMatrix() on func. • Set matrix to the result of multiplying matrix and the matrix represented by funcMatrix.
~RET %行列 ◎ Return matrix.

`length@m 取得子~手続きは ⇒ ~RET コレの `values$sl 内部~slotの`~size$ ◎ The length attribute indicates how many transform components are contained within the CSSTransformValue. ◎ They have a [[values]] internal slot, which is a list of CSSTransformComponent objects. This list is the object’s values to iterate over.

［ `getter@m ／ `setter@m ］`特殊~演算$のふるまいは、コレの `values$sl に基づく： ◎ ↓

コレが`~supportする~prop~index$は、 0 以上［コレの `values$sl 内部~slotの`~size$ ］未満とする。 ◎ The supported property indexes of a CSSTransformValue this are the integers greater than or equal to 0, and less than the size of this’s [[values]] internal slot.
コレの`有index~propの値を決定する$ときは、所与の ( コレが`~supportする~prop~index$ %n ) に対し，コレの `values$sl 内部~slot[ %n ] を返す。【 %n が他の値のときにどうなるか言及されていない — ~NULL は返せないので、例外が投出される？】 ◎ To determine the value of an indexed property of a CSSTransformValue this and an index n, let values be this’s [[values]] internal slot, and return values[n].
コレの［ `既存の有index~propの値を設定する$ ／ `新たな有index~propの値を設定する$ ］ときは、所与の ( ~index %n, 値 %新たな値 ) に対し，次を遂行する：
1. %値~list ~LET コレの `values$sl 内部~slot
2. ~IF［ %n はコレが`~supportする~prop~index$である］ ⇒ %値~list[ %n ] ~SET %新たな値
3. ~ELIF［ %n ~EQ %値~list の`~size$ ］ ⇒ %値~list に %新たな値を`付加する$
4. ~ELSE ⇒ ~THROW `RangeError$E
◎ To set the value of an existing indexed property of a CSSTransformValue this, an index n, and a value new value, let values be this’s [[values]] internal slot, and set values[n] to new value. ◎ To set the value of a new indexed property of a CSSTransformValue this, an index n, and a value new value, let values be this’s [[values]] internal slot. If n is not equal to the size of values, throw a RangeError. Otherwise, append new value to values.

typedef (`CSSNumericValue$I or `CSSKeywordish$) `CSSPerspectiveValue@;

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

[`Exposed$=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface `CSSTranslate@I : `CSSTransformComponent$I {
    `CSSTranslate$mc(`CSSNumericValue$I %x, `CSSNumericValue$I %y, optional `CSSNumericValue$I %z);
    attribute `CSSNumericValue$I `x@m;
    attribute `CSSNumericValue$I `y@m;
    attribute `CSSNumericValue$I `z@m;
};

[`Exposed$=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface `CSSRotate@I : `CSSTransformComponent$I {
    `CSSRotate$mc(`CSSNumericValue$I %angle);
    `constructor＠#dom-cssrotate-cssrotate-x-y-z-angle$(`CSSNumberish$ %x, `CSSNumberish$ %y, `CSSNumberish$ %z, `CSSNumericValue$I %angle);
    attribute `CSSNumberish$ `x$m;
    attribute `CSSNumberish$ `y$m;
    attribute `CSSNumberish$ `z$m;
    attribute `CSSNumericValue$I `angle@m;
};

[`Exposed$=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface `CSSScale@I : `CSSTransformComponent$I {
    `CSSScale$mc(`CSSNumberish$ %x, `CSSNumberish$ %y, optional `CSSNumberish$ %z);
    attribute `CSSNumberish$ `x$m;
    attribute `CSSNumberish$ `y$m;
    attribute `CSSNumberish$ `z$m;
};

[`Exposed$=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface `CSSSkew@I : `CSSTransformComponent$I {
    `CSSSkew$mc(`CSSNumericValue$I %ax, `CSSNumericValue$I %ay);
    attribute `CSSNumericValue$I `ax@m;
    attribute `CSSNumericValue$I `ay@m;
};

[`Exposed$=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface `CSSSkewX@I : `CSSTransformComponent$I {
    `CSSSkewX$mc(`CSSNumericValue$I %ax);
    attribute `CSSNumericValue$I `ax@m;
};

[`Exposed$=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface `CSSSkewY@I : `CSSTransformComponent$I {
    `CSSSkewY$mc(`CSSNumericValue$I %ay);
    attribute `CSSNumericValue$I `ay@m;
};

/* 
"`skew(x,y)^v" が表現する変形は、
"`skewX(x) skewY(y)^v" と`同じではない^emことに注意。
よって、
~interfaceも別々にされている。
◎
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@I : `CSSTransformComponent$I {
    `CSSPerspective$mc(`CSSPerspectiveValue$ %length);
    attribute `CSSPerspectiveValue$ `length@m;
};

[`Exposed$=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface `CSSMatrixComponent@I : `CSSTransformComponent$I {
    `CSSMatrixComponent$mc(`DOMMatrixReadOnly$I %matrix, optional `CSSMatrixComponentOptions$I %options = {});
    attribute `DOMMatrix$I `matrix@m;
};

dictionary `CSSMatrixComponentOptions@I {
    `boolean$ `is2D@m;
};

`~TCis2D@m 属性は： ◎ The is2D attribute＼

変形が~2D, ~3Dのどちらなのかを指示する。 ~T のときは、変形の属性のうち~3D変形に関連なもの（ `CSSTranslate^II `z$m1 属性など）による，コレが表現する変形に対する効果はなくなる。 ◎ indicates whether the transform is 2D or 3D. When it’s true, the attributes of the transform that are relevant to 3D transforms (such as the CSSTranslate.z attribute) simply have no effect on the transform they represent.
注記：これは~objの直列化, および ~objに “等価な 4×4 行列” などの概念に影響する。 ◎ Note: This affects the serialization of the object, and concepts such as the object’s "equivalent 4x4 matrix".
次に挙げる~obj上の，この属性の設定子~手続きは、何もしないモノトスル：
- `CSSSkew$I, `CSSSkewX$I, `CSSSkewY$I
- `CSSPerspective$I
【編集上の都合により、ここの記述は，原文から移動している。】

注記：［ `skew$f ／ `skewX$f ／ `skewY$f ］関数は常に~2D変形を表現する。 `perspective$f 関数は常に~3D変形を表現する。
◎ ↓↓
`~TCis2D$m の設計~上の考慮点 ◎ is2D Design Considerations

旧来の理由から，~2D変形と~3D変形は、効果は互いに一致していても，別個とされる。 `translateZ(0px)^v による変形は単位行列になると定義されていようが，~UAが当の要素~用に何らかの~3D基づく最適化を作動化する点で，~page上に観測-可能な効果がある。 ◎ For legacy reasons, 2D and 3D transforms are distinct, even if they have identical effects; a translateZ(0px) has observable effects on a page, even tho it’s defined to be an identity transform, as the UA activates some 3D-based optimizations for the element.

これを反映する仕方にはいくつかある — ~3Dに関係する属性を~nullableにする／ ~2D, ~3D ~interfaceを分離する, 等々 — が、現在の設計（作者が切り替えて挙動を規定できる）を選んでいるわけは、ほとんどの状況下において，作者が ~2D, ~3Dのどっちかか気を配る必要なく変形に対し演算-可能にしつつ、 ~2D変形が “不用意に切り替えられて” ~3Dになるのも防ぐためである。 ◎ There were several possible ways to reflect this—nullable 3D-related attributes, separate 2D and 3D interfaces, etc—but we chose the current design (an author-flippable switch that dictates the behavior) because it allows authors to, in most circumstances, operate on transforms without having to care whether they’re 2D or 3D, but also prevents "accidentally" flipping a 2D transform into becoming 3D.

`CSSTransformComponent^II `toMatrix()@m1 ~method~手続きは： ◎ The toMatrix() method of a CSSTransformComponent this must, when called, perform the following steps:

%M ~LET 次のように初期化された，新たな `DOMMatrix$I ~obj： ◎ Let matrix be a new DOMMatrix object, initialized to＼
- %M は［ `CSS-TRANSFORMS-1$r の `変形-関数の数学的~記述＠~TRANSFORM#mathematical-description$ 【または `~3D変形-関数の数学的~記述＠~TRANSFORM2#mathematical-description$】］に定義される，コレに等価な変形~行列を表現する ◎ this’s equivalent 4x4 transform matrix, as defined in CSS Transforms 1 § 12 Mathematical Description of Transform Functions, and＼
- %M の`~2Dか$ ~SET コレの `~TCis2D$m 内部~slotと同じ値 ◎ with its is2D internal slot set to the same value as this’s is2D internal slot.
  
  注記： `~TCis2D$m は、 `CSSTransformComponent$I が表現する変形が［何になるか，したがって等価な行列は何になるか］に影響することに~~留意されたし。 ◎ Note: Recall that the is2D flag affects what transform, and thus what equivalent matrix, a CSSTransformComponent represents.
~IF［前~段にて行列を生成するときに孕まれる `length$t に `px$u と`互換~単位$でないもの（`相対~長さ$や `percentage$t など）がある］ ⇒ ~THROW `TypeError$E — そのような行列を成す各~~成分は、 `px$u 単位に相対的に定義される必要があるので。 ◎ As the entries of such a matrix are defined relative to the px unit, if any <length>s in this involved in generating the matrix are not compatible units with px (such as relative lengths or percentages), throw a TypeError.
~RET %M ◎ Return matrix.

`CSSTranslate(x, y, z)@mm 構築子~手続きは： ◎ The CSSTranslate(x, y, z) constructor must, when invoked, perform the following steps:

%~2Dか ~LET ~F ◎ ↓
~IF［ %z ~EQ ε ］ ⇒＃ %z ~SET `~CSSUnitValueを作成する$( 0, `px^l )； %~2Dか ~SET ~T ◎ ↓
~IF［ %x, %y いずれかは `length-percentage$t に`合致-$しない］~OR［ %z は`length$t に`合致-$しない］ ⇒ ~THROW `TypeError$E ◎ If x or y don’t match <length-percentage>, throw a TypeError. ◎ If z was passed, but doesn’t match <length>, throw a TypeError.
コレの ⇒＃ `x$m 内部~slot ~SET %x, `y$m 内部~slot ~SET %y, `z$m 内部~slot ~SET %z, `~TCis2D$m 内部~slot ~SET %~2Dか ◎ Let this be a new CSSTranslate object, with its x and y internal slots set to x and y. ◎ If z was passed, set this’s z internal slot to z, and set this’s is2D internal slot to false. ◎ If z was not passed, set this’s z internal slot to a new unit value of (0, "px"), and set this’s is2D internal slot to true. ◎ Return this.

`CSSRotate(angle)@mm 構築子~手続きは： ◎ The CSSRotate(angle) constructor must, when invoked, perform the following steps:

~IF［ %angle は `angle$t に`合致-$しない］ ⇒ ~THROW `TypeError$E ◎ If angle doesn’t match <angle>, throw a TypeError.
コレの ⇒＃ `angle$m 内部~slot ~SET %angle `x$m 内部~slot ~SET `~CSSUnitValueを作成する$( 0, `number^l ), `y$m 内部~slot ~SET `~CSSUnitValueを作成する$( 0, `number^l ), `z$m 内部~slot ~SET `~CSSUnitValueを作成する$( 1, `number^l ), `~TCis2D$m 内部~slot ~SET ~T ◎ Return a new CSSRotate with its angle internal slot set to angle, its x and y internal slots set to new unit values of (0, "number"), its z internal slot set to a new unit value of (1, "number"), and its is2D internal slot set to true.

`new CSSRotate(x, y, z, angle)^m 構築子~手続きは： ◎ The CSSRotate(x, y, z, angle) constructor must, when invoked, perform the following steps:

~IF［ %angle は `angle$t に`合致-$しない］ ⇒ ~THROW `TypeError$E ◎ If angle doesn’t match <angle>, throw a TypeError.
%x ~SET `実数に類する値を規格化する$( %x ) ◎ ↓
%y ~SET `実数に類する値を規格化する$( %y ) ◎ ↓
%z ~SET `実数に類する値を規格化する$( %z ) ◎ Let x, y, and z be replaced by the result of rectifying a numberish value.
~IF［ %x, %y, %z のいずれかは `number$t に`合致-$しない］ ⇒ ~THROW `TypeError$E ◎ If x, y, or z don’t match <number>, throw a TypeError.
コレの ⇒＃ `angle$m 内部~slot ~SET %angle, `x$m 内部~slot ~SET %x, `y$m 内部~slot ~SET %y, `z$m 内部~slot ~SET %z, `~TCis2D$m 内部~slot ~SET ~F ◎ Return a new CSSRotate with its angle internal slot set to angle, its x, y, z internal slots set to x, y, and z, and its is2D internal slot set to false.

［ `x@m ／ `y@m ／ `z@m ］設定子~手続きは ⇒ コレの対応する内部~slot ~SET `実数に類する値を規格化する$( 所与の値 ) ◎ The x, y, and z attributes must, on setting to a new value val, rectify a numberish value from val and set the corresponding internal slot to the result of that.

`CSSScale(x, y, z)@mm 構築子~手続きは： ◎ The CSSScale(x, y, z) constructor must, when invoked, perform the following steps:

%~2Dか ~LET ~F ◎ ↓
~IF［ %z ~EQ ε ］ ⇒＃ %z ~SET `~CSSUnitValueを作成する$( 1, `number^l )； %~2Dか ~SET ~T ◎ ↓
%x ~SET `実数に類する値を規格化する$( %x ) ◎ ↓
%y ~SET `実数に類する値を規格化する$( %y ) ◎ ↓
%z ~SET `実数に類する値を規格化する$( %z ) ◎ Let x, y, and z (if passed) be replaced by the result of rectifying a numberish value.
~IF［ %x, %y, %z のいずれかは `number$t に`合致-$しない］ ⇒ ~THROW `TypeError$E ◎ If x, y, or z (if passed) don’t match <number>, throw a TypeError.
コレの ⇒＃ `x$m 内部~slot ~SET %x, `y$m 内部~slot ~SET %y `z$m 内部~slot ~SET %z, `~TCis2D$m 内部~slot ~SET %~2Dか ◎ Let this be a new CSSScale object, with its x and y internal slots set to x and y. ◎ If z was passed, set this’s z internal slot to z, and set this’s is2D internal slot to false. ◎ If z was not passed, set this’s z internal slot to a new unit value of (1, "number"), and set this’s is2D internal slot to true. ◎ Return this.

`CSSSkew(ax, ay)@mm 構築子~手続きは： ◎ The CSSSkew(ax, ay) constructor must, when invoked, perform the following steps:

~IF［ %ax, %ay のいずれかは `angle$t に`合致-$しない］ ⇒ ~THROW `TypeError$E ◎ If ax or ay do not match <angle>, throw a TypeError.
コレの ⇒＃ `ax$m 内部~slot ~SET %ax, `ay$m 内部~slot ~SET %ay, `~TCis2D$m 内部~slot ~SET ~T ◎ Return a new CSSSkew object with its ax and ay internal slots set to ax and ay, and its is2D internal slot set to true.

`CSSSkewX(ax)@mm 構築子~手続きは： ◎ The CSSSkewX(ax) constructor must, when invoked, perform the following steps:

~IF［ %ax は `angle$t に`合致-$しない］ ⇒ ~THROW `TypeError$E ◎ If ax does not match <angle>, throw a TypeError.
コレの ⇒＃ `ax$m 内部~slot ~SET %ax, `~TCis2D$m 内部~slot ~SET ~T ◎ Return a new CSSSkewX object with its ax internal slot set to ax, and its is2D internal slot set to true.

`CSSSkewY(ay)@mm 構築子~手続きは： ◎ The CSSSkewY(ay) constructor must, when invoked, perform the following steps:

~IF［ %ay は `angle$t に`合致-$しない］ ⇒ ~THROW `TypeError$E ◎ If ay does not match <angle>, throw a TypeError.
コレの ⇒＃ `ay$m 内部~slot ~SET %ay, `~TCis2D$m 内部~slot ~SET ~T ◎ Return a new CSSSkewY object with its ay internal slot set to ay, and its is2D internal slot set to true.

◎ ↑↑The is2D attribute of a CSSSkew, CSSSkewX, or CSSSkewY object must, on setting, do nothing. ◎ ↑↑Note: skew(), skewX(), and skewY() functions always represent 2D transforms.

`CSSPerspective(length)@mm 構築子~手続きは： ◎ The CSSPerspective(length) constructor must, when invoked, perform the following steps:

~IF［ ~NOT ~OR↓ ］…
- ［ %length は `CSSNumericValue$I ~objである］~AND［ %length は `length$t に`合致-$する］
- ［ %length は `CSSNumericValue$I ~objでない］~AND［ `~keywordに類する値を規格化する$( %length ) の結果は［ `~ASCII大小無視$で~keyword `none^v に合致する値］を表現する］
…ならば ⇒ ~THROW `TypeError$E
◎ If length is a CSSNumericValue: • If length does not match <length>, throw a TypeError. ◎ Otherwise (that is, if length is not a CSSNumericValue): • Rectify a keywordish value from length, then set length to the result’s value. • If length does not represent a value that is an ASCII case-insensitive match for the keyword none, throw a TypeError.
コレの ⇒＃ `length$m 内部~slot ~SET %length, `~TCis2D$m 内部~slot ~SET ~F ◎ Return a new CSSPerspective object with its length internal slot set to length, and its is2D internal slot set to false.

◎ ↑↑The is2D attribute of a CSSPerspective object must, on setting, do nothing. ◎ ↑↑Note: perspective() functions always represent 3D transforms.

`CSSMatrixComponent(matrix, options)@mm 構築子~手続きは：

%~2Dか ~LET %options[ `CSSMatrixComponentOptions^II"`is2D$m1" ]
~IF［ %~2Dか ~EQ ε ］ ⇒ %~2Dか ~SET %matrix の`~2Dか$
コレの ⇒＃ `matrix$m 内部~slot ~SET %matrix, `~TCis2D$m 内部~slot ~SET %~2Dか

◎ The CSSMatrixComponent(matrix, options) constructor must, when invoked, perform the following steps: ◎ Let this be a new CSSMatrixComponent object with its matrix internal slot set to matrix. ◎ If options was passed and has a is2D field, set this’s is2D internal slot to the value of that field. ◎ Otherwise, set this’s is2D internal slot to the value of matrix’s is2D internal slot. ◎ Return this.

注記： `CSSTransformComponent$I ~objに対応する下層の変形-関数は、いくつもあり得る。例えば `CSSTranslate$I ~objは、 ( `x$m1, `y$m1, `z$m1 ) 値に ( `10px^v, `0px^v, `0px^v ) を伴うならば，次のいずれも表現し得る ⇒＃ `translate(10px)^v ／ `translate(10px, 0)^v ／ `translateX(10px)^v ／ `translate3d(10px, 0, 0)^v ◎ Each CSSTransformComponent can correspond to one of a number of underlying transform functions. For example, a CSSTranslate with an x value of 10px and y & z values of 0px could represent any of the following: • translate(10px) • translate(10px, 0) • translateX(10px) • translate3d(10px, 0, 0)

しかしながら，文字列~化されるときは、その `~TCis2D$m 内部~slotに応じて，常に次を~~出力することになる ⇒＃ ~T ならば `translate(10px, 0px)^v ／ ~F ならば `translate3d(10px, 0px, 0px)^v ◎ When stringified, however, it will always print out either translate(10px, 0px) or translate3d(10px, 0px, 0px), depending on whether its is2D internal slot is true or false, respectively.

4.5. `CSSImageValue^I ~obj

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

`CSSImageValue$I0 ~objは、 `image$t 生成規則をとる~prop用の値を表現する — 例えば ⇒ `background-image$p, `list-style-image$p, `border-image-source$p ◎ CSSImageValue objects represent values for properties that take <image> productions, for example background-image, list-style-image, and border-image-source.

注記：この~objは，意図的に不透明にされており、それが包含する画像についての詳細は，種類その他, どの側面も公開しない。そうなっているのは、［ Custom Paint 用には、画像を表現するために`何かを持つ^emことが必要yである］が、 ~URLの取扱いと読込ngを，この仕様の時列線~内できっちり指定するには~~複雑に過ぎ，現実的にはアリでないためである。これは、将来~levelにて拡張pされることになる。 ◎ Note: This object is intentionally opaque, and exposes no details of what kind of image it contains, or any aspect of the image. This is because having something to represent images is necessary for Custom Paint, but there are sufficient complexities in getting URL-handling and loading specified firmly that it’s not realistically possible to specify in the timeline of this specification. This will be expanded on in future levels.

`CSSImageValue$I ~objの取扱いは、それが~URL孕むような `image$t （ `url$f や `image$f など）を表現する場合には，現在の~CSSによる取扱いに一致する。特に，相対~URLや`素片~URL$の解決-法は、通常の~CSSにおけるそれと同じ挙動になる。 ◎ If a CSSImageValue object represents an <image> that involves a URL (such as url() or image()), the handling of such values is identical to how CSS currently handles them. In particular, resolving relative URLs or fragment URLs has the same behavior as in normal CSS.

例えば，相対~URLは、それが属する~stylesheetの~URL （あるいは［ `style$e 要素／ `style$a 属性］内で指定されている場合は、文書の~URL）に対し解決される。この解決は — 構文解析-時点では起ころうとしないが — 現在は未指定な，値を算出する間のある時点で起こる。 ◎ For example, relative URLs are resolved against the URL of the stylesheet they’re within (or the document’s URL, if they’re specified in a style element or style attribute). This resolution doesn’t happen eagerly at parse-time, but at some currently-unspecified point during value computation.

したがって，ある要素の~styleに `background-image: url(foo);^css が設定された下で、その指定d値が Typed OM を介して抽出されてから，異なる文書~内のある要素~上に設定された場合、これら 2 つの要素が供する基底~URLは異なるので，それぞれの要素に対し解決した結果の~URLも異なることになる。 ◎ Thus, if an element’s style is set to background-image: url(foo);, and that specified value is extracted via the Typed OM and then set on an element in a different document, both the source and destination elements will resolve the URL differently, as they provide different base URLs.

他方，抽出された値が（ `Element^II `computedStyleMap()$m1 からの）`算出d値$であった場合、すでに絶対~URLに解決されているので，後でそれをどこで設定しようが~~動作は一致する（ただし、 `素片~URL$の場合は除く — ~CSSは、それを全部的に解決することは決してなく，常に現在の文書に対し解決するので、どこで用いられるかに応じて扱いも異なる）。 ◎ On the other hand, if the extracted value was a computed value (from computedStyleMap()), then it would already be resolved to an absolute URL, and thus would act identically no matter where you later set it to. (Unless it was a fragment URL, which CSS treats differently and never fully resolves, so it always resolves against the current document.)

4.6. `CSSColorValue^I ~obj

`CSSColorValue$I ~objは、 `color$t 値を表現する。それは、［個々の~CSS色~関数を表現している下位class ］の抽象-上位classである。 ◎ CSSColorValue objects represent <color> values. It is an abstract superclass, with the subclasses representing individual CSS color functions.

[`Exposed$=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface `CSSColorValue@I : `CSSStyleValue$I {
    [`Exposed$=Window] static (`CSSColorValue$I or `CSSStyleValue$I) `parse$m(`USVString$ %cssText);
};

`parse(cssText)@m ~method手続きは： ◎ The parse(cssText) method, when called, must perform the following steps:

%結果 ~LET 次の結果 ⇒ %cssText を `color$t の`文法に則って構文解析する$ ◎ Parse cssText as a <color> and let result be the result.＼
~IF［ %結果 ~EQ `失敗^i ］ ⇒ ~THROW `TypeError$E ◎ If result is a syntax error, throw a SyntaxError and abort this algorithm.
~RET `色~値を具象化する$( %結果 ) ◎ Reify a color value from result, and return the result.

次に定義される各種~IDL型は、 `CSSColorValue$I 用に利用される： ◎ Several IDL types are defined to be used in CSSColorValues:

typedef (`CSSNumberish$ or `CSSKeywordish$) `CSSColorRGBComp@;
typedef (`CSSNumberish$ or `CSSKeywordish$) `CSSColorPercent@;
typedef (`CSSNumberish$ or `CSSKeywordish$) `CSSColorNumber@;
typedef (`CSSNumberish$ or `CSSKeywordish$) `CSSColorAngle@;

これらの型は、どれも型~signatureとしては同じだが，それぞれ別個な値を表現する — 次の表tの 1 列目に与える型は、正準的に，同じ行の 2 列目に挙げる値を表現する： ◎ All of these types are the same in terms of type signature, but they represent distinct values:＼

型	値
`CSSColorRGBComp^T	［ `number$t ／ `percentage$t ／~keyword `none^v ］である値
`CSSColorPercent^T	［ `percentage$t ／~keyword `none^v ］である値
`CSSColorNumber^T	［ `number$t／~keyword `none^v ］である値
`CSSColorAngle^T	［ `angle$t ／~keyword `none^v ］である値

◎ CSSColorRGBComp represents a value that is, canonically, either a <number>, <percentage>, or the keyword none;＼ CSSColorPercent represents a value that is, canonically, either a <percentage> or the keyword none;＼ CSSColorNumber represents a value that is, canonically, either a <number> or the keyword none;＼ CSSColorAngle represents a value that is, canonically, either an <angle> or the keyword none.

それらを規格化する~algoも、［ `double$T 値を `CSSNumericValue$I に翻訳する挙動］は，型に応じて別個になる。 ◎ Their corresponding rectification algorithms also all have distinct behaviors for translating a double value into a CSSNumericValue.

`色~成分を規格化する@ ときは、所与の ( %値, %型~名 ) に対し，%型~名に応じて： ◎ ↓

`CSSColorRGBComp^T ： ◎ To rectify a CSSColorRGBComp val:

~IF［ %値は `double$T 型である］ ⇒ %値 ~SET `~CSSUnitValueを作成する$( %値 ~MUL 100, `percent^l ) ◎ If val is a double, replace it with a new unit value from (val*100, "percent").
~IF［ %値は `DOMString$T 型である］ ⇒ %値 ~SET `~keywordに類する値を規格化する$( %値 ) ◎ If val is a DOMString, replace it with the result of rectifying a keywordish value from val.
~IF［ %値は `CSSNumericValue$I ~objである］~AND［ %値は［ `number$t, `percentage$t ］いずれかに`合致-$する］ ⇒ ~RET %値 ◎ If val is a CSSNumericValue, and it matches <number> or <percentage>, return val.
~IF［ %値は `CSSKeywordValue$I ~objである］~AND［ %値の `value$m1 内部~slotは`~ASCII大小無視$で `none^l に合致する］ ⇒ %値 ◎ If val is a CSSKeywordValue, and its value internal slot is an ASCII case-insensitive match for "none", return val.
~THROW `SyntaxError$E ◎ Throw a SyntaxError.

`CSSColorPercent^T ： ◎ To rectify a CSSColorPercent val:

~IF［ %値は `double$T 型である］ ⇒ %値 ~SET `~CSSUnitValueを作成する$( %値 ~MUL 100, `percent^l ) ◎ If val is a double, replace it with a new unit value from (val*100, "percent").
~IF［ %値は `DOMString$T 型である］ ⇒ %値 ~SET `~keywordに類する値を規格化する$( %値 ) ◎ If val is a DOMString, replace it with the result of rectifying a keywordish value from val.
~IF［ %値は `CSSNumericValue$I ~objである］~AND［ %値は `percentage$t に`合致-$する］ ⇒ ~RET %値 ◎ If val is a CSSNumericValue, and it matches <percentage>, return val.
~IF［ %値は `CSSKeywordValue$I ~objである］~AND［ %値の `value$m1 内部~slotは`~ASCII大小無視$で `none^l に合致する］ ⇒ ~RET %値 ◎ If val is a CSSKeywordValue, and its value internal slot is an ASCII case-insensitive match for "none", return val.
~THROW `SyntaxError$E ◎ Throw a SyntaxError.

`CSSColorNumber^T ： ◎ To rectify a CSSColorNumber val:

~IF［ %値は `double$T 型である］ ⇒ %値 ~SET `~CSSUnitValueを作成する$( %値, `number^l ) ◎ If val is a double, replace it with a new unit value from (val, "number").
~IF［ %値は `DOMString$T 型である］ ⇒ %値 ~SET `~keywordに類する値を規格化する$( %値 ) ◎ If val is a DOMString, replace it with the result of rectifying a keywordish value from val.
~IF［ %値は `CSSNumericValue$I ~objである］~AND［ %値は `number$t に`合致-$する］ ⇒ ~RET %値 ◎ If val is a CSSNumericValue, and it matches <number>, return val.
~IF［ %値は `CSSKeywordValue$I ~objである］~AND［ %値の `value$m1 内部~slotは`~ASCII大小無視$で `none^l に合致する］ ⇒ ~RET %値 ◎ If val is a CSSKeywordValue, and its value internal slot is an ASCII case-insensitive match for "none", return val.
~THROW `SyntaxError$E ◎ Throw a SyntaxError.

`CSSColorAngle^T ： ◎ To rectify a CSSColorAngle val:

~IF［ %値は `double$T 型である］ ⇒ %値 ~SET `~CSSUnitValueを作成する$( %値, `deg^l ) ◎ If val is a double, replace it with a new unit value from (val, "deg").
~IF［ %値は `DOMString$T 型である］ ⇒ %値 ~SET `~keywordに類する値を規格化する$( %値 ) ◎ If val is a DOMString, replace it with the result of rectifying a keywordish value from val.
~IF［ %値は `CSSNumericValue$I ~objである］~AND［ %値は `angle$t に`合致-$する］ ⇒ ~RET %値 ◎ If val is a CSSNumericValue, and it matches <angle>, return val.
~IF［ %値は `CSSKeywordValue$I ~objである］~AND［ %値の `value$m1 内部~slot は`~ASCII大小無視$で `none^l に合致する］ ⇒ ~RET %値 ◎ If val is a CSSKeywordValue, and its value internal slot is an ASCII case-insensitive match for "none", return val.
~THROW `TypeError$E ◎ Throw a TypeError.

【この~algoは、原文では，上の場合分けに応じて 4 種の~algoとして個別に定義されているが、この訳では， %型~名引数に~parameter化して一つに統合する。】

文字列化子（ `stringifier^m ）を追加する。 ◎ TODO add stringifiers

[`Exposed$=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface `CSSRGB@I : `CSSColorValue$I {
    `CSSRGB$mc(`CSSColorRGBComp$ %r, `CSSColorRGBComp$ %g, `CSSColorRGBComp$ %b, optional `CSSColorPercent$ %alpha = 1);
    attribute `CSSColorRGBComp$ `r$m;
    attribute `CSSColorRGBComp$ `g$m;
    attribute `CSSColorRGBComp$ `b$m;
    attribute `CSSColorPercent$ `alpha$m;
};

`CSSRGB$I ~classは、 ~CSS［ `rgb$f ／ `rgba$f ］関数を表現する。 ◎ The CSSRGB class represents the CSS rgb()/rgba() functions.

`CSSRGB(r, g, b, alpha)@mm 構築子~手続きは： ◎ The CSSRGB(r, g, b, optional alpha) constructor must, when invoked, perform the following steps:

コレの ⇒＃ `r$m1 内部~slot ~SET `色~成分を規格化する$( %r, `CSSColorRGBComp^T ), `g$m1 内部~slot ~SET `色~成分を規格化する$( %g, `CSSColorRGBComp^T ), `b$m1 内部~slot ~SET `色~成分を規格化する$( %b, `CSSColorRGBComp^T ), `alpha$m1 内部~slot ~SET `色~成分を規格化する$( %alpha, `CSSColorPercent^T ) ◎ Let r, g, b be replaced by the result of rectifying a CSSColorRGBComp from each of them.＼ Let alpha be replaced by the result of rectifying a CSSColorPercent from it. ◎ Return a new CSSRGB with its r, g, b, and alpha internal slots set to r, g, b, and alpha.

［ `r@m ／ `g@m ／ `b@m ］設定子~手続きは ⇒ コレの対応する内部~slot ~SET `色~成分を規格化する$( 所与の値, `CSSColorRGBComp^T ) ◎ The r, g, and b attributes of a CSSRGB value must, on setting to a new value val, rectify a CSSColorRGBComp from val and set the corresponding internal slot to the result of that.

`alpha@m 設定子~手続きは ⇒ コレの対応する内部~slot ~SET `色~成分を規格化する$( 所与の値, `CSSColorPercent^T ) ◎ The alpha attribute of a CSSRGB value must, on setting to a new value val, rectify a CSSColorPercent from val and set the corresponding internal slot to the result of that.

[`Exposed$=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface `CSSHSL@I : `CSSColorValue$I {
    `CSSHSL$mc(`CSSColorAngle$ %h, `CSSColorPercent$ %s, `CSSColorPercent$ %l, optional `CSSColorPercent$ %alpha = 1);
    attribute `CSSColorAngle$ `h$m;
    attribute `CSSColorPercent$ `s$m;
    attribute `CSSColorPercent$ `l$m;
    attribute `CSSColorPercent$ `alpha$m;
};

`CSSHSL$I ~classは、 ~CSS［ `hsl$f ／ `hsla$f ］関数を表現する。 ◎ The CSSHSL class represents the CSS hsl()/hsla() functions.

`CSSHSL(h, s, l, alpha)@mm 構築子~手続きは： ◎ The CSSHSL(h, s, l, optional alpha) constructor must, when invoked, perform the following steps:

コレの ⇒＃ `h$m1 内部~slot ~SET `色~成分を規格化する$( %h, `CSSColorAngle^T ), `s$m1 内部~slot ~SET `色~成分を規格化する$( %s, `CSSColorPercent^T ), `l$m1 内部~slot ~SET `色~成分を規格化する$( %l, `CSSColorPercent^T ), `alpha$m1 内部~slot ~SET `色~成分を規格化する$( %alpha, `CSSColorPercent^T ) ◎ Let h be replaced by the result of rectifying a CSSColorAngle from it.＼ Let s, l, and alpha be replaced by the result of rectifying a CSSColorPercent from each of them. ◎ Return a new CSSHSL with its h, s, l, and alpha internal slots set to h, s, l, and alpha.

`h@m 設定子~手続きは ⇒ コレの対応する内部~slot ~SET `色~成分を規格化する$( 所与の値, `CSSColorAngle^T ) ◎ The h attribute of a CSSHSL value must, on setting to a new value val, rectify a CSSColorAngle from val and set the corresponding internal slot to the result of that.

［ `s@m ／ `l@m ／ `alpha@m ］設定子~手続きは ⇒ コレの対応する内部~slot ~SET `色~成分を規格化する$( 所与の値, `CSSColorPercent^T ) ◎ The s, l, and alpha attributes of a CSSHSL value must, on setting to a new value val, rectify a CSSColorPercent from val and set the corresponding internal slot to the result of that.

[`Exposed$=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface `CSSHWB@I : `CSSColorValue$I {
    `CSSHWB$mc(`CSSNumericValue$I %h, `CSSNumberish$ %w, `CSSNumberish$ %b, optional `CSSNumberish$ %alpha = 1);
    attribute `CSSNumericValue$I `h$m;
    attribute `CSSNumberish$ `w$m;
    attribute `CSSNumberish$ `b$m;
    attribute `CSSNumberish$ `alpha$m;
};

【他と違って、 `CSSHWB$I だけ［引数／~member ］の型が更新されていない — 次のように更新されるべき？】

[`Exposed$=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface `CSSHWB^I : `CSSColorValue$I {
    `CSSHWB$mc(`CSSColorAngle$ %h, `CSSColorPercent$ %w, `CSSColorPercent$ %b, optional `CSSColorPercent$ %alpha = 1);
    attribute `CSSColorAngle$ `h$m;
    attribute `CSSColorPercent$ `w$m;
    attribute `CSSColorPercent$ `b$m;
    attribute `CSSColorPercent$ `alpha$m;
};

`CSSHWB$I ~classは、 ~CSS `hwb$f 関数を表現する。 ◎ The CSSHWB class represents the CSS hwb() function.

`CSSHWB(h, w, b, alpha)@mm 構築子~手続きは： ◎ The CSSHWB(h, w, b, optional alpha) constructor must, when invoked, perform the following steps:

コレの ⇒＃ `h$m1 内部~slot ~SET `色~成分を規格化する$( %h, `CSSColorAngle^T ), `w$m1 内部~slot ~SET `色~成分を規格化する$( %w, `CSSColorPercent^T ), `b$m1 内部~slot ~SET `色~成分を規格化する$( %b, `CSSColorPercent^T ), `alpha$m1 内部~slot ~SET `色~成分を規格化する$( %alpha, `CSSColorPercent^T ) ◎ Let h be replaced by the result of rectifying a CSSColorAngle from it.＼ Let w, b, and alpha be replaced by the result of rectifying a CSSColorPercent from each of them. ◎ Return a new CSSHWB with its h, w, b, and alpha internal slots set to h, w, b, and alpha.

`h@m 設定子~手続きは ⇒ コレの対応する内部~slot ~SET `色~成分を規格化する$( 所与の値, `CSSColorAngle^T ) ◎ The h attribute of a CSSHWB value must, on setting to a new value val, rectify a CSSColorAngle from val and set the corresponding internal slot to the result of that.

［ `w@m ／ `b@m ／ `alpha@m ］設定子~手続きは ⇒ コレの対応する内部~slot ~SET `色~成分を規格化する$( 所与の値, `CSSColorPercent^T ) ◎ The w, b, and alpha attributes of a CSSHWB value must, on setting to a new value val, rectify a CSSColorPercent from val and set the corresponding internal slot to the result of that.

[`Exposed$=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface `CSSLab@I : `CSSColorValue$I {
    `CSSLab$mc(`CSSColorPercent$ %l, `CSSColorNumber$ %a, `CSSColorNumber$ %b, optional `CSSColorPercent$ %alpha = 1);
    attribute `CSSColorPercent$ `l$m;
    attribute `CSSColorNumber$ `a$m;
    attribute `CSSColorNumber$ `b$m;
    attribute `CSSColorPercent$ `alpha$m;
};

`CSSLab$I ~classは、 ~CSS `lab$f 関数を表現する。 ◎ The CSSLab class represents the CSS lab() function.

`CSSLab(l, a, b, alpha)@mm 構築子~手続きは： ◎ The CSSLab(l, a, b, optional alpha) constructor must, when invoked, perform the following steps:

コレの ⇒＃ `l$m1 内部~slot ~SET `色~成分を規格化する$( %l, `CSSColorPercent^T ), `a$m1 内部~slot ~SET `色~成分を規格化する$( %a, `CSSColorNumber^T ), `b$m1 内部~slot ~SET `色~成分を規格化する$( %b, `CSSColorNumber^T ), `alpha$m1 内部~slot ~SET `色~成分を規格化する$( %alpha, `CSSColorPercent^T ) ◎ Let a and b be replaced by the result of rectifying a CSSColorNumber from each of them.＼ Let l and alpha be replaced by the result of rectifying a CSSColorPercent from each of them. ◎ Return a new CSSLab with its l, a, b, and alpha internal slots set to l, a, b, and alpha.

［ `l@m ／ `alpha@m ］設定子~手続きは ⇒ コレの対応する内部~slot ~SET `色~成分を規格化する$( 所与の値, `CSSColorPercent^T ) ◎ The l and alpha attributes of a CSSLab value must, on setting to a new value val, rectify a CSSColorPercent from val and set the corresponding internal slot to the result of that.

［ `a@m ／ `b@m ］設定子~手続きは ⇒ コレの対応する内部~slot ~SET `色~成分を規格化する$( 所与の値, `CSSColorNumber^T ) ◎ The a, and b attributes of a CSSLab value must, on setting to a new value val, rectify a CSSColorNumber from val and set the corresponding internal slot to the result of that.

[`Exposed$=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface `CSSLCH@I : `CSSColorValue$I {
    `CSSLCH$mc(`CSSColorPercent$ %l, `CSSColorPercent$ %c, `CSSColorAngle$ %h, optional `CSSColorPercent$ %alpha = 1);
    attribute `CSSColorPercent$ `l$m;
    attribute `CSSColorPercent$ `c$m;
    attribute `CSSColorAngle$ `h$m;
    attribute `CSSColorPercent$ `alpha$m;
};

`CSSLCH$I ~classは、 ~CSS `lch$f 関数を表現する。 ◎ The CSSLCH class represents the CSS lch() function.

`CSSLCH(l, c, h, alpha)@mm 構築子~手続きは： ◎ The CSSLCH(l, c, h, optional alpha) constructor must, when invoked, perform the following steps:

コレの ⇒＃ `l$m1 内部~slot ~SET `色~成分を規格化する$( %l, `CSSColorPercent^T ), `c$m1 内部~slot ~SET `色~成分を規格化する$( %c, `CSSColorPercent^T ), `h$m1 内部~slot ~SET `色~成分を規格化する$( %l, `CSSColorAngle^T ) `alpha$m1 内部~slot ~SET `色~成分を規格化する$( %alpha, `CSSColorPercent^T ) ◎ Let h be replaced by the result of rectifying a CSSColorAngle from it.＼ Let l, c, and alpha be replaced by the result of rectifying a CSSColorPercent from each of them. ◎ Return a new CSSLCH with its l, c, h, and alpha internal slots set to l, c, h, and alpha.

`h@m 設定子~手続きは ⇒ コレの対応する内部~slot ~SET `色~成分を規格化する$( 所与の値, `CSSColorAngle^T ) ◎ The h attribute of a CSSLCH value must, on setting to a new value val, rectify a CSSColorAngle from val and set the corresponding internal slot to the result of that.

［ `l@m ／ `c@m ／ `alpha@m ］設定子~手続きは ⇒ コレの対応する内部~slot ~SET `色~成分を規格化する$( 所与の値, `CSSColorPercent^T ) ◎ The l, c, and alpha attributes of a CSSLCH value must, on setting to a new value val, rectify a CSSColorPercent from val and set the corresponding internal slot to the result of that.

[`Exposed$=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface `CSSOKLab@I : `CSSColorValue$I {
    `CSSOKLab$mc(`CSSColorPercent$ %l, `CSSColorNumber$ %a, `CSSColorNumber$ %b, optional `CSSColorPercent$ %alpha = 1);
    attribute `CSSColorPercent$ `l$m;
    attribute `CSSColorNumber$ `a$m;
    attribute `CSSColorNumber$ `b$m;
    attribute `CSSColorPercent$ `alpha$m;
};

`CSSOKLab$I ~classは、 ~CSS `oklab$f 関数を表現する。 ◎ The CSSOKLab class represents the CSS oklab() function.

`CSSOKLab(l, a, b, alpha)@mm 構築子~手続きは： ◎ The CSSOKLab(l, a, b, optional alpha) constructor must, when invoked, perform the following steps:

コレの ⇒＃ `l$m1 内部~slot ~SET `色~成分を規格化する$( %l, `CSSColorPercent^T ), `a$m1 内部~slot ~SET `色~成分を規格化する$( %a, `CSSColorNumber^T ), `b$m1 内部~slot ~SET `色~成分を規格化する$( %b, `CSSColorNumber^T ), `alpha$m1 内部~slot ~SET `色~成分を規格化する$( %alpha, `CSSColorPercent^T ) ◎ Let a and b be replaced by the result of rectifying a CSSColorNumber from each of them.＼ Let l and alpha be replaced by the result of rectifying a CSSColorPercent from each of them. ◎ Return a new CSSOKLab with its l, a, b, and alpha internal slots set to l, a, b, and alpha.

［ `l@m ／ `alpha@m ］設定子~手続きは ⇒ コレの対応する内部~slot ~SET `色~成分を規格化する$( 所与の値, `CSSColorPercent^T ) ◎ The l and alpha attributes of a CSSOKLab value must, on setting to a new value val, rectify a CSSColorPercent from val and set the corresponding internal slot to the result of that.

［ `a@m ／ `b@m ］設定子~手続きは ⇒ コレの対応する内部~slot ~SET `色~成分を規格化する$( 所与の値, `CSSColorNumber^T ) ◎ The a, and b attributes of a CSSOKLab value must, on setting to a new value val, rectify a CSSColorNumber from val and set the corresponding internal slot to the result of that.

[`Exposed$=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface `CSSOKLCH@I : `CSSColorValue$I {
    `CSSOKLCH$mc(`CSSColorPercent$ %l, `CSSColorPercent$ %c, `CSSColorAngle$ %h, optional `CSSColorPercent$ %alpha = 1);
    attribute `CSSColorPercent$ `l$m;
    attribute `CSSColorPercent$ `c$m;
    attribute `CSSColorAngle$ `h$m;
    attribute `CSSColorPercent$ `alpha$m;
};

`CSSOKLCH$I ~classは、 ~CSS `oklch$f【！`lch$f】関数を表現する。 ◎ The CSSOKLCH class represents the CSS lch() function.

`CSSOKLCH(l, c, h, alpha)@mm 構築子~手続きは： ◎ The CSSOKLCH(l, c, h, optional alpha) constructor must, when invoked, perform the following steps:

コレの ⇒＃ `l$m1 内部~slot ~SET `色~成分を規格化する$( %l, `CSSColorPercent^T ), `c$m1 内部~slot ~SET `色~成分を規格化する$( %c, `CSSColorPercent^T ), `h$m1 内部~slot ~SET `色~成分を規格化する$( %h, `CSSColorAngle^T ) `alpha$m1 内部~slot ~SET `色~成分を規格化する$( %alpha, `CSSColorPercent^T ) ◎ Let h be replaced by the result of rectifying a CSSColorAngle from it.＼ Let l, c, and alpha be replaced by the result of rectifying a CSSColorPercent from each of them. ◎ Return a new CSSOKLCH with its l, c, h, and alpha internal slots set to l, c, h, and alpha.

`h@m 設定子~手続きは ⇒ コレの対応する内部~slot ~SET `色~成分を規格化する$( 所与の値, `CSSColorAngle^T ) ◎ The h attribute of a CSSOKLCH value must, on setting to a new value val, rectify a CSSColorAngle from val and set the corresponding internal slot to the result of that.

［ `l@m ／ `c@m ／ `alpha@m ］設定子~手続きは ⇒ コレの対応する内部~slot ~SET `色~成分を規格化する$( 所与の値, `CSSColorPercent^T ) ◎ The l, c, and alpha attributes of a CSSOKLCH value must, on setting to a new value val, rectify a CSSColorPercent from val and set the corresponding internal slot to the result of that.

[`Exposed$=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface `CSSColor@I : `CSSColorValue$I {
    `CSSColor$mc(`CSSKeywordish$ %colorSpace, `sequence$<`CSSColorPercent$> %channels, optional `CSSNumberish$ %alpha = 1);
    attribute `CSSKeywordish$ `colorSpace$m;
    attribute `ObservableArray$<`CSSColorPercent$> `channels@m;
    attribute `CSSNumberish$ `alpha$m;
};

`CSSColor$I ~classは、 ~CSS `color$f 関数を表現する。 ◎ The CSSColor class represents the CSS color() function.

`CSSColor(colorSpace, channels, optional alpha)@mm 構築子~手続きは： ◎ The CSSColor(colorSpace, channels, optional alpha) constructor must, when invoked, perform the following steps:

%~channel群 ~LET 新たな`~list$
%channels を成す ~EACH( %~item ) に対し ⇒ %~channel群に次の結果を`付加する$ ⇒ `色~成分を規格化する$( %~item, `CSSColorPercent^T ) ◎ ↓Let colorSpace be replaced by the result of rectifying a keywordish value from it.＼ ◎ Let each item in channels be replaced by the result of rectifying a CSSColorPercent from the item.＼ ◎ ↓Let alpha be replaced by the result of rectifying a CSSColorPercent from it.
コレの ⇒＃ `colorSpace$m1 内部~slot ~SET `~keywordに類する値を規格化する$( %colorSpace ), `channels$m1 内部~slot ~SET %~channel群, `alpha$m1 内部~slot ~SET `色~成分を規格化する$( %alpha, `CSSColorPercent^T ) ◎ Return a new CSSColor with its colorSpace, channels, and alpha internal slots set to colorSpace, channels, and alpha.

`colorSpace@m 設定子~手続きは ⇒ コレの対応する内部~slot ~SET `~keywordに類する値を規格化する$( 所与の値 ) ◎ The colorSpace attribute of a CSSColor value must, on setting to a new value val, rectify a keywordish value from val and set the corresponding internal slot to the result of that.

`alpha@m 設定子~手続きは ⇒ コレの対応する内部~slot ~SET `色~成分を規格化する$( 所与の値, `CSSColorPercent^T ) ◎ The alpha attribute of a CSSColor value must, on setting to a new value val, rectify a CSSColorPercent from val and set the corresponding internal slot to the result of that.

`channels$m 属性~用に`観測-可能な配列~属性の有index値を設定する$ときは、所与の ( %値, ~index %i ) に対し： ◎ To set an indexed value val at index i for a CSSColor value’s channels attribute:

コレの `channels$m を`~backしている~list$[ %i ] ~SET `色~成分を規格化する$( %値, `CSSColorPercent^T ) ◎ Replace val with the result of rectifying a CSSColorPercent from val. ◎ Set the ith value in channels's backing list to val.

`channels$m 属性~用に`観測-可能な配列~属性の有index値を削除する$ときは、所与の ( %値, ~index %i ) に対し： ◎ To delete an indexed value val at index i for a CSSColor value’s channels attribute:

コレの `channels$m を`~backしている~list$から %i 番の~itemを`除去する$ ◎ Remove the ith value from channels's backing list.

5. `CSSStyleValue^I の具象化

この節は、 `具象化@ （ `reification^en ）と称される，`内部~表現$ 【および，~prop名】から~TypedOM~objを構築する方法を述べる。 ◎ This section describes how Typed OM objects are constructed from internal representations, a process called reification

【以下、この節は（その各~下位~節も含め） `別~pageに分ける＠~CSSTOMR#stylevalue-reification$。】

6. `CSSStyleValue^I の直列化

`CSSStyleValue$I 値を直列化する仕方は、それがどう構築されたかに依存する： ◎ The way that a CSSStyleValue serializes is dependent on how the value was constructed.

`USVString$T %s から構築された場合 ⇒ 直列化は %s になる。 ◎ if the value was constructed from a USVString • the serialization is the USVString from which the value was constructed.
~IDL構築子を利用して構築された場合 ⇒ この節の下位-節にて指定される。 ◎ otherwise, if the value was constructed using an IDL constructor • the serialization is specified in the sections below.
~CSSOMから抽出された場合 ⇒ `§ ~CSSOMからの値の直列化＠#cssom-serialization$ にて指定される。 ◎ otherwise, if the value was extracted from the CSSOM • the serialization is specified in § 6.7 Serialization from CSSOM Values below.

例えば： ◎ For example:

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^I の直列化

`CSSUnparsedValue$I %O を `直列化する@ser ときは： ◎ To serialize a CSSUnparsedValue this:

%s ~LET 空`文字列$ ◎ Let s initially be the empty string.
%値~list ~LET %O の `tokens$sl 内部~slotを［ ~itemを直列化する］`演算で写像する$ ◎ For each item in this’s [[tokens]] internal slot: • If item is a USVString, append it to s. • Otherwise, item is a CSSVariableReferenceValue. Serialize it, then append the result to s.
~RET %値~list を`連結する$ ◎ Return s.

`CSSVariableReferenceValue$I %O を `直列化する@ser ときは：

%fallback ~LET %O の `fallback$m1 内部~slot
~IF［ %fallback ~EQ ~NULL ］ ⇒ %fallback ~SET 空~文字列
~ELSE ⇒ %fallback ~SET 次を順に連結した結果 ⇒＃ `, ^l, %fallback を直列化した結果
~RET 次を順に連結した結果 ⇒＃ `var(^l, %O の `variable$m 内部~slot, %fallback, `)^l

◎ To serialize a CSSVariableReferenceValue this: • Let s initally be "var(". • Append this’s variable internal slot to s. • If this’s fallback internal slot is not null, append ", " to s, then serialize the fallback internal slot and append it to s. • Append ")" to s and return s.

6.2. `CSSKeywordValue^I の直列化

`CSSKeywordValue$I %O を `直列化する@ser ときは： ◎ To serialize a CSSKeywordValue this:

~RET %O の `value$m1 内部~slot ◎ Return this’s value internal slot.

6.3. `CSSNumericValue^I の直列化

`CSSNumericValue$I %O を `直列化する@ser ときは、所与の ( 数量-値 %最小（省略時は ε ）, 数量-値 %最大（省略時は ε ）) に対し： ◎ To serialize a CSSNumericValue this, given an optional minimum, a numeric value, and optional maximum, a numeric value:

~IF［ %O は `CSSUnitValue$I である］ ⇒ ~RET `CSSUnitValue^I %O を`直列化する$ser( %最小, %最大 ) ◎ If this is a CSSUnitValue, serialize a CSSUnitValue from this, passing minimum and maximum. Return the result.
~RET `CSSMathValue^I %O を`直列化する$ser ◎ Otherwise, serialize a CSSMathValue from this, and return the result.

6.4. `CSSUnitValue^I の直列化

`CSSUnitValue$I %O を `直列化する@ser ときは、所与の ( 数量-値 %最小（省略時は ε ）, 数量-値 %最大（省略時は ε ）) に対し： ◎ To serialize a CSSUnitValue this, with optional arguments minimum, a numeric value, and maximum, a numeric value:

%単位 ~LET %O の `unit$m1 内部~slot ◎ Let value and unit be this‘s value and unit internal slots.
%結果 ~LET 次を順に連結した結果： ◎ ↓
1. `CSSOM-1$r に従って，［ %O の `value$m1 内部~slot ］が与える~CSS値から `number$t に `直列化-＠~CSSOM1#serializing-css-values$した結果 ◎ Set s to the result of serializing a <number> from value, per CSSOM § 6.7.2 Serializing CSS Values.
2. %単位に応じて次に与える文字列 ⇒＃ `number^l ならば空~文字列／ `percent^l ならば `%^l ／ ~ELSE_ %単位 ◎ If unit is: "number" • Do nothing. "percent" • Append "%" to s. anything else • Append unit to s.
~IF［ ~OR↓ ］…
- ［ %最小 ~NEQ ε ］~AND［［ %O ~LT %最小］~OR［ %O ~LT %最小かどうかは、この時点で可用な情報からは決定し得ない］］
- ［ %最大 ~NEQ ε ］~AND［［ %O ~GT %最大］~OR［ %O ~GT %最大かどうかは、この時点で可用な情報からは決定し得ない］］
…ならば ⇒ %結果 ~SET 次を順に連結した結果 ⇒＃ `calc(^l, %結果, `)^l
◎ If minimum was passed and this is less than minimum, or if maximum was passed and this is greater than maximum, or either minimum and/or maximum were passed and the relative size of this and minimum/maximum can’t be determined with the available information at this time, prepend "calc(" to s, then append ")" to s.
~RET %結果 ◎ Return s.

6.5. `CSSMathValue^I の直列化

`CSSMathValue$I ~obj %O を `直列化する@ser ときは、所与の ( 真偽値 %入子にされたか（省略時は ~F ） , 真偽値 %括弧なしか（省略時は ~F ） ) に対し，次を遂行する： ◎ 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.

~IF［ %O は［ `CSSMathMin$I0 ／ `CSSMathMax$I ］~objである］： ◎ ↓↓Let s initially be the empty string. ◎ If this is a CSSMathMin or CSSMathMax:
1. %頭部 ~LET %O に応じて ⇒＃ `CSSMathMin$I ならば `min(^l ／ `CSSMathMax$I ならば `max(^l ◎ Append "min(" or "max(" to s, as appropriate.
2. %値~list ~LET %O の `values$m 内部~slotを次に与える`演算で写像する$ ⇒ ~itemを直列化する( %入子にされたか ~SET ~T, %括弧なしか ~SET ~T ) ◎ For each arg in this’s values internal slot, serialize arg with nested and paren-less both true,＼
3. ~RET 次を順に連結した結果 ⇒＃ %頭部, %値~list を `, ^l で`連結する$ `)^l ◎ and append the result to s, appending a ", " between successive values. ◎ Append ")" to s and return s.
%s ~LET 次に与える値 ⇒＃ %括弧なしか ~EQ ~T ならば空~文字列／ ~ELSE_ %入子にされたか ~EQ ~T ならば `(^l ／ ~ELSE_ `calc(^l ◎ ↓↓
~IF［ %O は `CSSMathSum$I ~objである］： ◎ Otherwise, if this is a CSSMathSum: • If paren-less is true, continue to the next step; otherwise, if nested is true, append "(" to s; otherwise, append "calc(" to s.
1. %O の `values$m1 内部~slotを成す ~EACH( %~arg ) に対し：
  1. ~IF［この反復は初回である］ ⇒ 何もしない
  2. ~ELIF［ %~arg は `CSSMathNegate$I ~objである］ ⇒＃ %s に ` - ^l を付加する； %~arg ~SET %~arg の `value$m1 内部~slot
  3. ~ELSE ⇒ %s に ` + ^l を付加する
  4. %s に次を付加する ⇒ %~arg を直列化する( %入子にされたか ~SET ~T )
  ◎ Serialize the first item in this’s values internal slot with nested set to true, and append the result to s. ◎ For each arg in this’s values internal slot beyond the first: • If arg is a CSSMathNegate, append " - " to s, then serialize arg’s value internal slot with nested set to true, and append the result to s. • Otherwise, append " + " to s, then serialize arg with nested set to true, and append the result to s. • ↓↓If paren-less is false, append ")" to s, • ↓↓Return s.
~ELIF［ %O は `CSSMathNegate$I ~objである］： ◎ Otherwise, if this is a CSSMathNegate: • If paren-less is true, continue to the next step; otherwise, if nested is true, append "(" to s; otherwise, append "calc(" to s.
1. %s に次を順に付加する ⇒＃ `-^l, %O の `value$m1 内部~slot を直列化する( %入子にされたか ~SET ~T ) ◎ Append "-" to s. ◎ Serialize this’s value internal slot with nested set to true, and append the result to s. ◎ ↓↓If paren-less is false, append ")" to s, ◎ ↓↓Return s.
~ELIF［ %O は `CSSMathProduct$I ~objである］： ◎ Otherwise, if this is a CSSMathProduct: • If paren-less is true, continue to the next step; otherwise, if nested is true, append "(" to s; otherwise, append "calc(" to s.
1. %O の `values$m1 内部~slotを成す ~EACH( %~arg ) に対し：
  1. ~IF［この反復は初回である］ ⇒ 何もしない
  2. ~ELIF［ %~arg は `CSSMathInvert$I ~objである］ ⇒＃ %s に ` / ^l を付加する； %~arg ~SET %~arg の `value$m1 内部~slot
  3. ~ELSE ⇒ %s に ` * ^l を付加する
  4. %s に次を付加する ⇒ %~arg を直列化する( %入子にされたか ~SET ~T )
  ◎ Serialize the first item in this’s values internal slot with nested set to true, and append the result to s. ◎ For each arg in this’s values internal slot beyond the first: • If arg is a CSSMathInvert, append " / " to s, then serialize arg’s value internal slot with nested set to true, and append the result to s. • Otherwise, append " * " to s, then serialize arg with nested set to true, and append the result to s. • ↓↓If paren-less is false, append ")" to s, • ↓↓Return s.
~ELIF［ %O は `CSSMathInvert$I ~objである］ ⇒ %s に次を順に付加する ⇒＃ `1 / ^l, %O の `value$m1 内部~slotを直列化する( %入子にされたか ~SET ~T ) ◎ Otherwise, if this is a CSSMathInvert: • If paren-less is true, continue to the next step; otherwise, if nested is true, append "(" to s; otherwise, append "calc(" to s. • Append "1 / " to s. • Serialize this’s value internal slot with nested set to true, and append the result to s. • ↓↓If paren-less is false, append ")" to s, • ↓↓Return s.
~IF［ %括弧なしか ~EQ ~F ］ ⇒ %s に `)^l を付加する ◎ ↑↑
~RET %s ◎ ↑↑

6.6. `CSSTransformValue^I, `CSSTransformComponent^I の直列化

`CSSTransformValue$I %O を `直列化する@ser ときは： ◎ To serialize a CSSTransformValue this:

%値~list ~LET %O の `values$sl を［ ~itemを直列化する］`演算で写像する$ ◎ Return the result of serializing each item in this’s values to iterate over,＼
~RET %値~list を ` ^l で`連結する$ ⇒ ◎ then concatenating them separated by " ".

`CSSTranslate$I %O を `直列化する@ser ときは： ◎ To serialize a CSSTranslate this:

( %x, %y, %z ) ~LET 順に， %O の［ `x$m1, `y$m1, `z$m1 ］内部~slotを直列化した結果 ◎ ↓
~IF［ %O の `CSSTransformValue^II `is2D$m1 内部~slot ~EQ ~F ］ ⇒ ~RET 次を順に連結した結果 ⇒＃ `translate3d(^l, %x, `, ^l, %y, `, ^l, %z, `)^l ◎ Let s initially be the empty string. ◎ If this’s is2D internal slot is false: • Append "translate3d(" to s. • Serialize this’s x internal slot, and append it to s. • Append ", " to s. • Serialize this’s y internal slot, and append it to s. • Append ", " to s. • Serialize this’s z internal slot, and append it to s. • Append ")" to s, and return s.
~RET 次を順に連結した結果 ⇒＃ `translate(^l, %x, `, ^l, %y, `)^l ◎ Otherwise: • Append "translate(" to s. • Serialize this’s x internal slot, and append it to s. • Append ", " to s. • Serialize this’s y internal slot, and append it to s. • Append ")" to s, and return s.

`CSSRotate$I %O を `直列化する@ser ときは： ◎ To serialize a CSSRotate this:

( %x, %y, %z, %a ) ~LET 順に， %O の［ `x$m1, `y$m1, `z$m1, `angle$m1 ］内部~slotを直列化した結果 ◎ ↓
~IF［ %O の `CSSTransformValue^II `is2D$m1 内部~slot ~EQ ~F ］ ⇒ ~RET 次を順に連結した結果 ⇒＃ `rotate3d(^l, %x, `, ^l, %y, `, ^l, %z, `,^l, %a, `)^l ◎ Let s initially be the empty string. ◎ If this’s is2D internal slot is false: • Append "rotate3d(" to s. • Serialize this’s x internal slot, and append it to s. • Append ", " to s. • Serialize this’s y internal slot, and append it to s. • Append ", " to s. • Serialize this’s z internal slot, and append it to s. • Append "," to s. • Serialize this’s angle internal slot, and append it to s. • Append ")" to s, and return s.
~RET 次を順に連結した結果 ⇒＃ `rotate(^l, %a, `)^l ◎ Otherwise: ◎ Append "rotate(" to s. • Serialize this’s angle internal slot, and append it to s. • Append ")" to s, and return s.

`CSSScale$I %O を `直列化する@ser ときは： ◎ To serialize a CSSScale this:

( %x, %y, %z ) ~LET 順に， %O の［ `x$m1, `y$m1, `z$m1 ］内部~slotを直列化した結果 ◎ ↓
~IF［ %O の `CSSTransformValue^II `is2D$m1 内部~slot ~EQ ~F ］ ⇒ ~RET 次を順に連結した結果 ⇒＃ `scale3d(^l, %x, `, ^l, %y, `, ^l, %z, `)^l ◎ Let s initially be the empty string. ◎ If this’s is2D internal slot is false: • Append "scale3d(" to s. • Serialize this’s x internal slot, and append it to s. • Append ", " to s. • Serialize this’s y internal slot, and append it to s. • Append ", " to s. • Serialize this’s z internal slot, and append it to s. • Append ")" to s, and return s.
~IF［ %O の ( `x$m1 内部~slot, `y$m1 内部~slot ) は`同等な数量-値$である］ ⇒ ~RET 次を順に連結した結果 ⇒＃ `scale(^l, %x, `)^l ◎ Otherwise: • Append "scale(" to s. • Serialize this’s x internal slot, and append it to s. ◎ If this’s x and y internal slots are equal numeric values, append ")" to s and return s.
~RET 次を順に連結した結果 ⇒＃ `scale(^l, %x, `, ^l, %y, `)^l ◎ Otherwise, append ", " to s. • Serialize this’s y internal slot, and append it to s. • Append ")" to s, and return s.

`CSSSkew$I %O を `直列化する@ser ときは： ◎ To serialize a CSSSkew this:

( %ax, %ay ) ~LET 順に， %O の［ `ax$m1, `ay$m1 ］内部~slotを直列化した結果 ◎ ↓
~IF［ %O の `ay$m1 内部~slotは `CSSUnitValue$I ~objであって，その `value$m1 ~EQ 0 ］ ⇒ ~RET 次を順に連結した結果 ⇒＃ `skew(^l, %ax, `)^l ◎ Let s initially be "skew(". ◎ Serialize this’s ax internal slot, and append it to s. ◎ If this’s ay internal slot is a CSSUnitValue with a value of 0, then append ")" to s and return s.
~RET 次を順に連結した結果 ⇒＃ `skew(^l, %ax, `, ^l, %ay, `)^l ◎ Otherwise, append ", " to s. • Serialize this’s ay internal slot, and append it to s. • Append ")" to s, and return s.

`CSSSkewX$I %O を `直列化する@ser ときは ⇒ ~RET 次を順に連結した結果 ⇒＃ `skewX(^l, %O の `ax$m1 内部~slotを直列化した結果, `)^l ◎ To serialize a CSSSkewX this: • Let s initially be "skewX(". • Serialize this’s ax internal slot, and append it to s. • Append ")" to s, and return s.

`CSSSkewY$I %O を `直列化する@ser ときは ⇒ ~RET 次を順に連結した結果 ⇒＃ `skewY(^l, %O の `ay$m1 内部~slotを直列化した結果, `)^l ◎ To serialize a CSSSkewY this: • Let s initially be "skewY(". • Serialize this’s ay internal slot, and append it to s. • Append ")" to s, and return s.

`CSSPerspective$I %O を `直列化する@ser ときは ⇒ ~RET 次を順に連結した結果 ⇒＃ `perspective(^l, %O の `length$m1 内部~slotを直列化する( `0px^v† ), `)^l

（† 引数 `0px^v は、 %値が `CSSNumericValue^I であるとき，それを`直列化する$serときに利用される。）

◎ To serialize a CSSPerspective this: • Let s initially be "perspective(". • Serialize this’s length internal slot, with a minimum of 0px, and append it to s. • Append ")" to s, and return s.

`CSSMatrixComponent$I %O を `直列化する@ser ときは ⇒ ~RET %O の `matrix$m1 内部~slotを`直列化する＠~GEOMETRY#dommatrixreadonly-stringification-behavior$ ◎ To serialize a CSSMatrixComponent this: • Return the serialization of this’s matrix internal slot.

6.7. ~CSSOM値からの直列化

~UAにより~CSSOM内の値から生産され，作者により直に構築されていない `CSSStyleValue$I ~objは、どの~propから得られたかに応じて，次の規則に則って直列化される【以下に現れる~CSS~keyword値は、すべて小文字に正規化されているとする】： ◎ CSSStyleValue objects produced by the user agent from values in the CSSOM, rather than directly constructed by the author, are serialized according to the following rules, depending on the property they came from:

`background-color$p

`color$p に対するときと同じ。 ◎ If the value is the currentcolor keyword, return "currentcolor". ◎ Otherwise, return the result of serializing the <color> value.

`border-color$p

`color$p に対するときと同じ。 ◎ If the value is the currentcolor keyword, return "currentcolor". ◎ Otherwise, return the result of serializing the <color> value.

`border-image$p

%値~list ~LET 空`~list$ ◎ Let values initially be the empty list.
~IF［ `border-image-source$p ~NEQ `none^v ］ ⇒ %値~list に `border-image-source$p を直列化した結果を付加する ◎ If border-image-source is not none, serialize border-image-source and append it to values.
~IF［ `border-image-slice$p は［［すべての側に `100%^v を指定している］でない］~AND［ `fill$v ~keywordを省略している］］ ⇒＃ %値~list に `border-image-slice$p を直列化した結果を付加する ◎ If border-image-slice does not specify 100% for all sides and omits the fill keyword, serialize border-image-slice and append it to values.
%接頭辞 ~LET `// ^l （ `002F^U, `002F^U, `0020^U ） ◎ ↓
~IF［ `border-image-width$p はある側に `1^v 以外を指定している］：
1. %接頭辞 ~SET `/ ^l （ `002F^U, `0020^U ）
2. %値~list に［次を順に連結した結果］を付加する ⇒＃ %接頭辞, `border-image-width$p を直列化した結果
【！append "/" = prepend ？紛らわしい】 ◎ If border-image-width does not specify 1 for all sides, append "/ " (U+002F FORWARD SLASH followed by U+0020 SPACE) to the result of serializing border-image-width and append it to values.
~IF［ `border-image-outset$p はある側に `0^v 以外を指定している］ ⇒ %値~list に［次を順に連結した結果］を付加する ⇒＃ %接頭辞, `border-image-outset$p を直列化した結果 ◎ If border-image-outset does not specify 0 for all sides: • ↑If the previous border-image-width step did not append anything to values, let prefix be "// " (two U+002F FORWARD SLASH characters followed by U+0020 SPACE); otherwise let prefix be "/ " (U+002F FORWARD SLASH followed by U+0020 SPACE) • Append prefix to the result of serializing border-image-outset and append it to values.
~IF［ `border-image-repeat$p は両~軸とも `stretch$v でない］ ⇒ %値~list に`border-image-repeat$p を直列化した結果を付加する ◎ If border-image-repeat is not stretch in both axises, serialize border-image-repeat and append it to values.
~IF［ %値~list は`空$である］ ⇒ %値~list に `none^l を付加する ◎ If values is empty, append "none" to values.
~RET %値~list を ` ^l ( `0020^U ) で`連結する$ ◎ Return the result of concatenating all the items in values, separated by " " (U+0020 SPACE).

`bottom$p

`top$p に対するときと同じ。 ◎ If the value is the auto keyword, return "auto". ◎ If the value is of type <length>, return the result of serializing the <length> value. ◎ Otherwise, return the result of serializing the <percentage> value.

`color$p

~IF［ ~propの値は `currentcolor$v ~keyword ］ ⇒ ~RET `currentcolor^l ◎ If the value is the currentcolor keyword, return "currentcolor".
~RET `color$t 値を直列化した結果 ◎ Otherwise, return the result of serializing the <color> value.

`left$p

`opacity$p

~IF［ ~propの値は `number$t 型である］ ⇒ ~RET `number^t 値を直列化した結果 ◎ If the value is of type <number>, return the result of serializing the <number> value.
~RET `percentage$t 値を直列化した結果 ◎ Otherwise, return the result of serializing the <percentage> value.

`right$p

`top$p

~IF［ ~propの値は `auto^v ~keyword ］ ⇒ ~RET `auto^l ◎ If the value is the auto keyword, return "auto".
~IF［ ~propの値は `length$t 型である］ ⇒ ~RET `length$t 値を直列化した結果 ◎ If the value is of type <length>, return the result of serializing the <length> value.
~RET `percentage$t 値を直列化した結果 ◎ Otherwise, return the result of serializing the <percentage> value.

7. ~securityの考慮点

これらの特能により導入される既知な~security課題は無い。 ◎ There are no known security issues introduced by these features.

8. ~privacyの考慮点

これらの特能により導入される既知な~privacy課題は無い。 ◎ There are no known privacy issues introduced by these features.