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.
`~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 %O は: ◎ Values that can’t yet be directly supported by a more specialized CSSStyleValue subclass are instead represented as CSSStyleValue objects.
- 特定0の~CSS~propが — %O の `associatedProperty$sl 内部~slotを介して — 結付けられることに加え, 特定0の変異-不能な`内部~表現$が結付けられる。 %O は、 自身が`具象化-$している特定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.
- %O を得るために構文解析された~prop用に限り妥当であると見なされる。 これは、 %O の `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:
- %反復成分 ~LET `~CSS値を反復成分に細分化する$( %値 ) ◎ Let iterations be the result of dividing into iterations value.
- %~obj~list ~LET %反復成分 を,各 %~item から次を得る`演算で写像する$ ⇒ `具象化する$( %~item, %~prop ) ◎ Reify each item of iterations, and let objects be the result.
- %値~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.
`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.
`内部~表現を作成する@ ときは、 所与の ( `文字列$ %~prop, `文字列$または `CSSStyleValue$I ~obj %値 ) に対し, %値 の型に応じて次を走らす: ◎ To create an internal representation, given a string property and a string or CSSStyleValue value:
-
~IF[ %値 は `CSSStyleValue$I ~objである ]: ◎ ↓
- ~IF[ %値 は `CSSStyleValue$I の下位classでない ] ⇒ ~RET %値 に結付けられた値 ◎ If value is a direct CSSStyleValue, • Return value’s associated value.
- ~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.
-
%~prop の~CSS文法を成す ~EACH( 数量-を表し, かつ範囲は制限されている成分 %成分 ) に対し:
- %成分~値 ~LET %値 の中の %成分 に対応する部分
- ~IF[ %成分~値 は %成分 の範囲~内にある ] ⇒ ~CONTINUE
- ~ELSE ( %成分~値 は `CSSUnitValue$I ~objである ) ⇒ %値 の中の %成分~値 を次のようにされた新たな `CSSMathSum$I 内に包装した結果に置換する ⇒ `values$m1 内部~slot ~SET « %成分~値 »
- ~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 属性
- その `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. ◎ ↓
[ `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$ %~index ) に対し ⇒ ~RET コレの `tokens$sl 内部~slot[ %~index ] ◎ 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 %~index, 値 %新たな値 ) に対し,次を遂行する:
- %~token~list ~LET コレの `tokens$sl 内部~slot
- ~IF[ %~index はコレが`~supportする~prop~index$である ] ⇒ %~token~list[ %~index ] ~SET %新たな値
- ~ELIF[ %~index ~EQ %~token~list の`~size$ ] ⇒ %~token~list に %新たな値 を`付加する$
- ~ELSE ⇒ ~THROW `RangeError$E
`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である ]:
- %単位 ~LET %値~list 内の`~item$のうち[ その `unit$m1 内部~slot ~NEQ `number^l ]を満たすものの個数に応じて ⇒# 0 個ならば `number^l 1 個ならば その`~item$の `unit$m1 内部~slot / 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":
- ~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.
- ~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:
-
- %~size ~LET %V1 の `CSSMathSum^II `values$m1 内部~slotの`~size$ ◎ ↓
- ~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.
- ~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
`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 は`空$である ]:
- %値~list を[ その各`~item$の `CSSUnitValue^II `unit$m1 内部~slotの`符号位置$ ]順に~sortする
- ~RET 次のようにされた新たな `CSSMathSum$I ~obj ⇒ `values$m1 内部~slot ~SET %値~list
- %結果~list ~LET 空`~list$ ◎ Otherwise, let result initially be an empty list.\
-
%単位~list を成す ~EACH( %単位 ) に対し: ◎ For each unit in units:
- %合計 ~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.
-
%値~list を成す ~EACH( %値 ) に対し: ◎ For each value in values:
- %値の単位 ~LET %値 の`CSSUnitValue^II `unit$m1 内部~slot ◎ Let value unit be value’s unit internal slot.
- ~IF[ ( %値の単位, %単位 ) は`互換~単位$でない 【!*number の取り扱いは?】 ] ⇒ ~CONTINUE ◎ If value unit is a compatible unit with unit, then:
- %合計 ~INCBY %値 の `value$m1 内部~slotの値 ~MUL ( %値の単位 から %単位 への換算率 ) 【!*単位~値を変換する$( 値, 単位 ) を簡素化】 ◎ Convert value to unit. ◎ Increment temp’s value internal slot by the value of value’s value internal slot.
- %値~list から %値 を`除去する$ ◎ Remove value from values.
- %結果~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$であり,[ 単位を与える文字列 ]を[ 累乗数を与える整数 ]に対応付ける。
~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]») » |
所与の `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:
- %値 ~LET `総和~値を作成する$( %~item ) ◎ Let value be the result of creating a sum value from item.\
- ~IF[ %値 ~EQ `失敗^i ] ⇒ ~RET `失敗^i ◎ If value is failure, return failure.
-
%値 を成す ~EACH( %下位-値 ) に対し: ◎ For each subvalue of value:
- ~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.
- ~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:
- %新-値~list ~LET `総和~値を作成する$( %~item ) ◎ Let new values be the result of creating a sum value from item.\
- %一時~list ~LET 空`~list$ ◎ Let temp initially be an empty list.
- ~IF[ %新-値~list ~EQ `失敗^i ] ⇒ ~RET `失敗^i ◎ If new values is failure, return failure.
-
%値~list を成す ~EACH( %~item ) に対し ⇒ %新-値~list を成す ~EACH( %新~item ) に対し ⇒ %一時~list に次に与える`~tuple$を付加する:
- `値$sum ~SET %~item の`値$sum ~MUL %新~item の`値$sum
- `単位~map$ ~SET [ `単位~mapの積をとる$( %~item の`単位~map$, %新~item の`単位~map$ ) ]の結果から, 0 を値にとる`~entry$はすべて除去した結果
- %値~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 ) に対し:
- %~item の`値$sum ~SET その逆数(乗法逆元を見出す)
- %~item の`単位~map$を成す ~EACH( %~entry ) に対し ⇒ %~entry の`値$map ~SET その反数(加法逆元を見出す)
- ~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( %単位 → %累乗数 ) に対し:
- %基底~型 ~LET %単位 に`対応する基底~型$
- ~Assert: %基底~型 は`基底~型$である
- %型[ %基底~型 ] ~SET %型[ %基底~型 ] ~PLUS %累乗数
- ~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:
- ~IF[ %結果[ %単位 ] ~NEQ ε ] ⇒ %結果[ %単位 ] ~INCBY %累乗数 ◎ If result[unit] exists, increment result[unit] by power.
- ~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$t2 は、 «[ `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 / `基底~型$ ]であり, 他が指定されない限り ~NULL とする。
(~NULL でない場合、 次を指示する: 当の`型$は,実際には百分率を保持しているが、 その百分率は最終的には,それが与える`基底~型$に解決され, 当の`型$の中で その結果に置換される。)
【 `百分率hint$は、 おそらく、 確定されていない値(~lay-outしないと判明しない,内容に依存する~sizeなど)に相対的な百分率~値を表現-可能にするためにある。 】【 この仕様は、 どの`型$ %型 に対しても,次の不変則:[ %型 の`百分率hint$ ~EQ ~NULL ]~OR[ %型[ `percent^l ] ~EQ 0 ]を保ち続ける。 この訳では、 この不変則も利用して,原文の[ `型を加算する$/`型を乗算する$ ]~algoを論理的に単純~化している (入力の`型$がこの不変則を満たさない場合の結果は、 原文の~algoと異なり得る — が,原文の~algoは、 そのような入力に対しては,結合的でも可換でもなくなる (なので、 この不変則を前提に記されていると見受けられる)。 この訳では、 そのような入力に対しても,結合的, かつ可換になるようにしている)。 】
注記: ~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.
注記: `百分率hint$は `percent^l もとり得る — それは、 百分率が それ自体として利用された【何らかの次元に相対的でない】ことを指示する (あるいは、 `number$t を~~基準に評価されることと等価である)が、 ~TypedOM~methodにより生産されることはない — それが生じるのは、[ 値の文脈が実際に既知な所で,~CSSにより直に型~機構が利用されたとき ]に限られる。 ◎ Note: A percent hint can be "percent", indicating the percentage is used as itself (or, equivalently, evaluated against a plain number), but this is not produced by the Typed OM methods; it only occurs when the type machinery is used directly by CSS, where a value’s context is actually known.
`型を作成する@ ときは、 所与の ( 文字列 %単位 (省略時は `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 その他 ε - ~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 ) に対し(順序は有意にならない):
- ~IF[ %~key ~EQ `percent^l ] ⇒ ~CONTINUE
- ~IF[ %~key ~NEQ %~hint ]~AND[ %型/1[ %~key ] ~EQ %型/2[ %~key ] ] ⇒ ~CONTINUE
- ~IF[ %~hint ~NIN { ~NULL, %~key } ] ⇒ ~RET `失敗^i
- ~IF[ %型/1[ `percent^l ] ~PLUS %型/1[ %~key ] ~NEQ %型/2[ `percent^l ] ~PLUS %型/2[ %~key ] ] ⇒ ~RET `失敗^i
- ~IF[ %~hint~key ~NEQ ~NULL ] ⇒ ~RET `失敗^i
- %~hint~key ~SET %~key
- %型 ~SET %型/1 の複製
- ~IF[ %型 の`百分率hint$ ~EQ ~NULL 【!実際には不要な条件だが、百分率hintを適用するときの ~Assert を満たすため】 ] ⇒ %型 ~SET `百分率hintを適用する$( %型, %~hint~key )
- ~RET %型
`百分率hintを適用する@ ときは、 所与の ( `型$ %型, `百分率hint$ %~hint ) に対し,次を遂行する: ◎ To apply the percent hint hint to a type without a percent hint, perform the following steps:
- ~Assert: %型 の`百分率hint$ ~EQ ~NULL ◎ ↑
-
~IF[ %~hint ~EQ ~NULL ] ⇒ ~RET %型
【 この段は、 他所を単純~化するための,この訳による追加。 】
- %型 の`百分率hint$ ~SET %~hint ◎ Set type’s percent hint to hint.
-
~IF[ %~hint ~NEQ `percent^l ]:
- %型[ %~hint ] ~INCBY %型[ `percent^l ]
- %型[ `percent^l ] ~SET 0
- ~RET %型 ◎ Return type.
`型を乗算する@ ときは、 所与の ( `型$ %型/1, `型$ %型/2 ) に対し,次を遂行する: ◎ To multiply two types type1 and type2, perform the following steps:
【 入力は 3 個~以上の`型$からなる~listとしても与えられ得る (この節の末尾の注記を見よ)。 】【 ここでは、 `百分率hint$にて述べた不変則も利用して,原文の~algoを単純~化している。 】
- %型 ~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.
- %型 ~SET `百分率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 ◎ A type matches <length> if its only non-zero entry is «[ "length" → 1 ]».\ ↓ Similarly for <angle>, <time>, <frequency>, <resolution>, and <flex>.
ただし, 当の型を成す値が利用された文脈が: ◎ ↓
- `percentage$t 値を許容していて, それは別の型 %別の型 を~~基準に解決される場合、 次が満たされる場合に限り,`合致-$すると見なすモノトスル ⇒ `百分率hint$ ~IN { ~NULL, %別の型 の単位に`対応する基底~型$ } ◎ If the context in which the value is used allows <percentage> values, and those percentages are resolved against another type, then for the type to be considered matching it must either have a null percent hint, or the percent hint must match the other type.
- [ `percentage$t 値を許容するが, `percentage$t 値と `length$t【!/etc】 値が~~混在することを`許容しない^em ]か[ `percentage$t 値を許容しない( `border-width$p など) ]場合、 次が満たされる場合に限り,`合致-$すると見なすモノトスル ⇒ `百分率hint$ ~EQ ~NULL ◎ If the context does not allow <percentage> values to be mixed with <length>/etc values (or doesn’t allow <percentage> values at all, such as border-width), then for the type to be considered matching the percent hint must be null.
次に挙げる生成規則に対しても, `length$t と類似に定義される ⇒# `angle$t, `time$t, `frequency$t, `resolution$t, `flex$t ◎ ↑
- 次を満たす`型$は、 `percentage$t に`合致-$するとされる ⇒ [ `純~単位$ ~EQ `percent^l ]~AND[ `百分率hint$ ~IN { ~NULL, `percent^l } ] ◎ A type matches <percentage> if its only non-zero entry is «[ "percent" → 1 ]», and its percent hint is either null or "percent".
-
次を満たす`型$は、 `length-percentage$t に`合致-$するとされる ⇒ [ `length$t に`合致-$する ]~OR[ `percentage$t に`合致-$する ] ◎ A type matches <length-percentage> if it matches <length> or matches <percentage>.\
[ `angle-percentage$t, `time-percentage$t, 等々 ]に対しても,類似に定義される。 ◎ Same for <angle-percentage>, <time-percentage>, etc.
-
次を満たす`型$は、 `number$t に`合致-$するとされる ⇒ `純~単位$ ~EQ `number^l ◎ A type matches <number> if it has no non-zero entries.
ただし, 当の型を成す値が利用された文脈が: ◎ ↓
- `percentage$t 値を許容していて, それは `number$t 以外の型 %他の型 を~~基準に解決される場合、 次が満たされる場合に限り,`合致-$すると見なすモノトスル ⇒ `百分率hint$ ~IN { ~NULL, %他の型 の単位に`対応する基底~型$ } ◎ If the context in which the value is used allows <percentage> values, and those percentages are resolved against a type other than <number>, then for the type to be considered matching the percent hint must either be null or match the other type.
- `percentage$t 値を許容するが,それは[ 別の型を~~基準に解決されることはない ]か[ `number$t 型を~~基準に解決される ]場合、 次が満たされる場合に限り,`合致-$すると見なすモノトスル ⇒ `百分率hint$ ~IN { ~NULL, `percent^l } ◎ If the context allows <percentage> values, but either doesn’t resolve them against another type or resolves them against a <number>, then for the type to be considered matching the percent hint must either be null or "percent".
- `percentage$t 値を`許容しない^em場合、 次が満たされる場合に限り,`合致-$すると見なすモノトスル ⇒ `百分率hint$ ~EQ ~NULL ◎ If the context does not allow <percentage> values, then for the type to be considered matching the percent hint must be null.
注記: `型$の集合は、 加算の下で半群( `semi-group^en )を形成し, 乗算の下で単位元を有する半群( `monoid^en )を形成する (【!`百分率hint$に~NULLを伴う «[ ]»】 `型を作成する$() の結果が乗法的~単位元を与える)。 すなわち、 それらは結合的, かつ可換である。 したがって仕様は、 何個でも一義的に`型を加算する$ことができる — 一度に 2 個ずつ`型を加算する$よう記すことに代えて。 ◎ Note: Types form a semi-group under 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 |
`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.
`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.
`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~prop取得子$は、 供された~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); };
上に挙げた~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.
`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.
[ `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$ %~index ) に対し ⇒ ~RET コレの `values$sl 内部~slot[ %~index ] ◎ 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 %~index, 値 %新たな値 ) に対し,次を遂行する:
- %値~list ~LET コレの `values$sl 内部~slot
- ~IF[ %~index はコレが`~supportする~prop~index$である ] ⇒ %値~list[ %~index ] ~SET %新たな値
- ~ELIF[ %~index ~EQ %値~list の`~size$ ] ⇒ %値~list に %新たな値 を`付加する$
- ~ELSE ⇒ ~THROW `RangeError$E
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.
`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か
注記: `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^en 【 `CSS-PAINT-API-1$r ?】用には、 画像を表現するためには`何かを有する^emことが必要yである ]が,[ ~URLの取扱いと読込ngを,この仕様の時列線において きっちり指定する ]ことは[ ~~複雑に過ぎ,現実的にはアリでない ]からである。 これは、 将来~levelにて拡げられることになる。 ◎ 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の取扱いは、 それが表現する `image$t が~URLを孕むもの( `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 |
それらを規格化する~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
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 次を順に`連結する$: ◎ ↓
- `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.
- %単位 に応じて 次に与える文字列 ⇒# `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:
- %頭部 ~LET %O に応じて ⇒# `CSSMathMin$I ならば `min(^l / `CSSMathMax$I ならば `max(^l ◎ Append "min(" or "max(" to s, as appropriate.
- %値~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,\
- ~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.
-
%O の `values$m1 内部~slotを成す ~EACH( %~arg ) に対し:
- ~IF[ この反復は初回である ] ⇒ 何もしない
- ~ELIF[ %~arg は `CSSMathNegate$I ~objである ] ⇒# %s に ` - ^l を付加する; %~arg ~SET %~arg の `value$m1 内部~slot
- ~ELSE ⇒ %s に ` + ^l を付加する
- %s に次を付加する ⇒ %~arg を直列化する( %入子にされたか ~SET ~T )
-
-
~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.
- %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.
-
%O の `values$m1 内部~slotを成す ~EACH( %~arg ) に対し:
- ~IF[ この反復は初回である ] ⇒ 何もしない
- ~ELIF[ %~arg は `CSSMathInvert$I ~objである ] ⇒# %s に ` / ^l を付加する; %~arg ~SET %~arg の `value$m1 内部~slot
- ~ELSE ⇒ %s に ` * ^l を付加する
- %s に次を付加する ⇒ %~arg を直列化する( %入子にされたか ~SET ~T )
-
- ~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.
`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.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 以外を指定している ]:
- %接頭辞 ~SET `/ ^l ( `002F^U, `0020^U )
- %値~list に次の結果を付加する ⇒ 次を順に`連結する$ ⇒# %接頭辞, `border-image-width$p を直列化した結果
-
~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
- `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.
- `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 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.
- `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.
~securityの考慮点
これらの特能により導入される既知な~security課題は無い。 ◎ There are no known security issues introduced by these features.
~privacyの考慮点
これらの特能により導入される既知な~privacy課題は無い。 ◎ There are no known privacy issues introduced by these features.
変更点
- `2018年 4月 10日 作業草案@~TR/2018/WD-css-typed-om-1-20180410/$ からの変更点 ◎ 9.1. Changes since the 10 April 2018 Working Draft
- 型が`合致-$するか否か決定する~algoは、 `百分率hint$を もっと抽象的に参照rするよう修正した。 ◎ Fixed the type match algorithm to refer to the percent hint more abstractly.
- `型を逆数にする$ときは、 `百分率hint$を保全する必要があることを明確化した。 ◎ Clarified that "invert a type" needs to preserve the percent hint.
- `~CSS数量-~factory関数@#numeric-factory$に欠落った~font単位を追加した。 ( `1107$pull ) ◎ Added missing font units to CSS numeric factory. (#1107)
- `数量-~factory関数@#numeric-factory$【!単位~略式~method】たちが成す~listは、 実装が~supportする単位たちに合致するよう[ 抑制する/拡げる ]モノトスルことを指定した。 ◎ Specified that the list of unit shorthand methods must be reduced or expanded to match the implementation’s support.
- `StylePropertyMapReadOnly$I の `get()$m1 は `undefined^c 値も返し得るようにした。 ( `1087$pull ) ◎ Used undefined union value for "StylePropertyMapReadOnly.get()". (#1087)
- `CSSColorValue$I から `to()^m, `colorSpace^m を除去した — 【色】変換は、 本当は,~TypedOMの~~管轄外なので。 ( `1070$issue ) ◎ Removed .to() and the CSSColorValue.colorSpace, as conversion isn’t really in Typed OM’s remit. (#1070)
- `CSSUnitValue$I を`直列化する@#serialize-a-cssunitvalue$ ~algoに[ %最小, %最大 ]を追加した — `CSSPerspective$I の引数を直列化するときに,それを渡すようにした【?】。 ( `1069$issue ) ◎ Added min/max to "serialize a CSSUnitValue", and pass it when serializing the argument of CSSPerspective. (#1069)
- 【`色~値を具象化する$~algoの末尾において、】 `~CSSStyleValueとして具象化する$所を`識別子を具象化する$よう変更した。 ( `1068$pull ) ◎ Changed reifying from "a CSSStyleValue" to "an identifier". (#1068)
- 新たな[ 表示域~単位/容器~単位 ]用に~factory関数を追加した。 ( `1067$pull ) ◎ Added factory functions for new viewport/container units. (#1067)
- `CSSNumericValue$I の `parse()$m1 が型を検査するようにした。 ( `1065$pull ) ◎ Added type checking to CSSNumericValue.parse. (#1065)
- `CSSDeviceCMYK^I を除去して, `CSSOKLab$I, `CSSOKLCH$I を追加した。 すべての色~classは、 ~keyword `none^v を受容するようにした。 ◎ Removed CSSDeviceCMYK, add CSSOKLab and CSSOKLCH, made all the color classes accept the "none" keyword.
- `色~値を具象化する$方法を定義した。 ◎ Defined how to reify a color value.
- 至る所で利用していた “`new unit value …^en(単位 〜 を伴う新たな値)” を`~CSSUnitValueを作成する$~algoへ~linkするようにした。 【この訳では、すべて後者の句で述べている。】 ◎ Allowed "new unit value" to link to "create a CSSUnitValue from a pair" since that phrasing is used everywhere already.
- `CSSPerspective$I に[ 引数 `none^v をとる `perspective$f ]用の~supportを追加した。 ( `1053$pull ) ◎ Added support for perspective(none) to CSSPerspective. (#1053)
- `CSSNumericValue$I の[ `min$m1 / `max$m1 ]と不用意に衝突していた `CSSMathClamp$I【!`CSSClampValue^I 】 の[ `min^m / `max^m ]を[ `lower$m1 / `upper$m1 ]に修正した。 ( `855$issue ) ◎ Fixed accidental clash of CSSClampValue.min/max with CSSNumericValue.min/max. (#855)
- 冒頭の要約aを単純~化した。 ◎ Simplified the Abstract
- `CSSGray^I とそれに関する仕様~textを除去した — `CSS-COLOR-4$r は、 `gray^f 関数を`落とした^emので。 ( `1027$issue ) ◎ Removed CSSGray and associated spec text, since Color 4 dropped gray() some time ago. (#1027)
- `CSSColorValue$I の `colorSpace^m を 上位class `CSSColor$I の `colorSpace$m1 へ移動した。 各種 `to*()^c 色~変換~関数を汎用な `to(colorSpace)^m ~method【?】と入れ替えた。 ( `1036$issue ) ◎ Moved .colorSpace up to the CSSColorValue superclass. Swapped the .to*() color-conversion functions for a generic .to(colorSpace) method. (#1036)
- `device-cmyk^f 用の~supportを追加した。 ◎ Added device-cmyk() support.
- `CSSColor$I 用の~OMを近過去な単純~化に合致するよう修正した。 ◎ Fix the OM for CSSColor to match recent simplifications.
- `CSSColorValue$I の各~下位classが どの色~関数を表現するかを指定した。 `CSSGray^I を追加した【が,今や除去された】。 ◎ Specified which color function each CSSColorValue subclass represents, and added CSSGray.
- 共用体に欠落った丸括弧を追加した。 ( `1016$pull ) ◎ Added missing parentheses for union. (#1016)
- `型$の造りについて説明的な~textを追加した。 ◎ Added some explanatory text about the makeup of a "type".
- ~Web~IDL仕様に倣うようにした。 ( `965$pull, `1006$pull ) ◎ Aligned with Web IDL specification. (#965 and #1006 )
- ~algoにおける誤った入子ngを修正した。 ◎ Fixed algorithm nesting.
- `~Web~IDLの更新@https://github.com/whatwg/webidl/pull/750$に従って、 辞書~型の引数に要求される既定~値を追加した。 ( `936$pull ) ◎ Added default dictionary value, required by update to WebIDL. (#936)
- 用語 “下層~値” を`内部~表現$へ切替えた — `下層~値@~WANIM#underlying-value$は、 すでに `CSS-ANIMATIONS-1$r にて異なる何かに利用されているので。 ◎ Switched term from "underlying value" to :internal representation", as Web Animations already uses "underlying value" for something different.
- `~CSSStyleValueとして具象化する$ときには、 【当の値を利用した】~propが要求されることを明確化した。 ◎ Clarified that reifying as a CSSSTyleValue requires a property.
- `登録-済み~custom~prop$用に具象化の挙動を定義した。 ( `886$pull ) ◎ Defined reification behavior for registered custom properties (#886)
- 【部分的~interfaceとして定義されていた】 `ElementCSSInlineStyle$I には、 部分的~interface~mixinを利用するようにした。 ( `853$pull ) ◎ Used partial interface mixin ElementCSSInlineStyle (#853)
- 【 `getter^m 用の】 正しい名前として,~Web~IDLの`有index~prop取得子$を利用するようにした。 ◎ Used the correct name from WebIDL for indexed property getter.
- いくつかの用語を他の仕様で利用するために~exportした。 ◎ Exported a number of terms for use in other specifications
- `CSSPositionValue^I を この~levelからは落とした。 ◎ Droped CSSPositionValue from this level.
- `clamp^f 関数~用に `CSSMathClamp$I を追加した。 ◎ Added CSSMathClamp for the "clamp()"" function.
- `文法に合致-$するか否か決定する~algoをもう少し精確にした。 ◎ Made the "match a grammar" algorithm a little more precise.
- 数量-算出d値の具象化-法に`正準-単位$を利用するようにした。 ( `725$issue ) ◎ Reifying computed numeric values uses the canonical unit. (#725)
- 新たな単位~型についての注記を追加した。 ( `734$issue ) ◎ Added note about new unit types. (#734)
- `percentage^l ではなく,正しい単位 `percent^l を利用するようにした。 ( `761$issue ) ◎ Used correct unit "percent", not "percentage" (#761).
- ~custom~propの構文解析-法について注記を追加した。 ◎ Added note about custom property parsing
- `Naina Raisinghani^en 氏を前任編集者へ移動した。 ◎ Moved Naina Raisinghani to Former Editor
- `型を逆数にする$ための演算を追加した。 ◎ Added an 'invert a type' operation.
- いくつかの数量-型~用語を `CSS-VALUES-4$r から参照rできるよう~exportした。 ◎ Exported several numeric-type terms, so CSS Values & Units can refer to them.
- `Shane Stephens^en 氏を前任編集者へ移動した。 ◎ Moved Shane Stephens to Former Editor