1. 序論
~CSS~stylesheetは、~CSSの `下層~値@ と称される,~UAに内部的な抽象~data構造に構文解析される。 様々な仕様~algoが,それらを操作する。 ◎ CSS stylesheets are parsed into abstract UA-internal data structures, the underlying values of CSS, which various specification algorithms manipulate.
下層~値は、実装に依存するので,直に操作できない — 各~UAは、下層~値を解釈する方法について,互いに同意する必要がある。 が,それらの値~自体は、[ ~UAが、自身にとって最も効率的な仕方で,~CSSを格納して操作できる ]ようにする目的で,定義されないままにされている。 ◎ Underlying values can’t be directly manipulated, as they are implementation-dependent; UAs have to agree on how to interpret the underlying values, but the values 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 underlying values was via strings—stylesheets or the CSSOM allowed authors to send strings to the UA, which were parsed into underlying values, and the CSSOM allowed authors to request that the UA serialize their underlying values back into strings.
この仕様は、`下層~値$と相互作用するための新たな仕方を導入する — それらを[ 文字列を 構文解析したり, 連結する よりも,容易かつ依拠-可能に 操作したり, 解せる ]ような,特化された~JS~objで表現することにより。 この新たな~approachは、作者にとってより容易になり(例えば, 数量~値は実際の~JS `number^c に反映され,それら用に単位も扱える数学的な演算が定義される)、また,多くの事例でより高処理能になる — 値は直に操作でき、~CSS文字列を築いて構文解析する必要なく,安価に`下層~値$に翻訳して戻せるので。 ◎ This specification introduces a new way to interact with underlying values, 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 underlying values without having to build and then parse strings of CSS.
【この訳に固有の表記規約】
この訳の,~algoや定義の記述に利用されている各種記号( ~LET, 此れ, ~IF, ~THROW, 等々)の意味や定義の詳細は、~SYMBOL_DEF_REFを~~参照されたし。 また、簡潔に述べるため,次の定義も導入している。
所与の`~list$ %~list を,各~itemから何かを得る `演算で写像する@ ときは、次を走らす:
- %結果~list ~LET 新たな`~list$
- %~list 内の~EACH( %~item ) に対し ⇒ %結果~list に[ 所与の演算を %~item に適用した結果 ]を`付加する$
- ~RET %結果~list
~IDL属性 %m に対する “%m 内部~slot” という表記は、当の~obj上の %m に対応する内部~data~fieldを指す(原文にて,そのような表記を利用している~IDL属性には、[ その属性を~memberに持つ~interfaceを実装する各~obj上に,そのような~data~fieldが在る ]ことが,暗黙的に規定されている)。
2. `CSSStyleValue^I ~obj
[`Exposed$=(Window, Worker, PaintWorklet, LayoutWorklet)] interface `CSSStyleValue@I { `stringifier$m; [`Exposed$=Window] static `CSSStyleValue$I `parse$m(USVString %property, USVString %cssText); [`Exposed$=Window] static sequence<`CSSStyleValue$I> `parseAll$m(USVString %property, USVString %cssText); };
`CSSStyleValue$I ~objは、~TypedOM~APIを介して~access可能なすべての ~CSS値の基底~classを与える。 ◎ CSSStyleValue objects are the base class of all CSS values accessible via the Typed OM API.
- `stringifier@m
- `文字列化の挙動$は、 `CSSStyleValue^I の直列化 節に定義される。 ◎ The stringification behavior of CSSStyleValue objects is defined in §6 CSSStyleValue Serialization.
- `parse(property, cssText)@m
- 被呼出時には、次を遂行し~MUST ⇒ ~RET `~CSSStyleValueを構文解析する$( %property, %cssText, %複数~flag ~SET ~F ) ◎ The parse(property, cssText) method, when invoked, must parse a CSSStyleValue with property property, cssText cssText, and parseMultiple set to false, and return the result.
- `parseAll(property, cssText)@m
- 被呼出時には、次を遂行し~MUST ⇒ ~RET `~CSSStyleValueを構文解析する$( %property, %cssText, %複数~flag ~SET ~T ) ◎ The parseAll(property, cssText), when invoked, must parse a CSSStyleValue with property property, cssText cssText, and parseMultiple set to true, and return the result.
`~CSSStyleValueを構文解析する@ ときは、所与の ( `文字列$ %~prop, `文字列$ %cssText, 真偽値 %複数~flag ) に対し、次を走らす: ◎ 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 の`文法に則って構文解析する$ ⇒ ~IF[ 失敗した ] ⇒ ~THROW `TypeError$E ◎ Attempt to parse cssText according to property’s grammar. 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.
- ~custom~propが~stylesheet内の妥当でない構文で定義された場合、~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されるよう,構文解析-~errorは `TypeError$E を介して~progamming環境へ伝播される。 ◎ 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 [ %複数~flag ~EQ ~F ならば %値~list[0] / ~ELSE_ %値~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を何個かの反復成分に細分する方法は、意図的に定義されておらず,現時点では手作業である。
一般には、~top-levelの~commaで分割するだけで済む(文法における ~top-levelの
<%foo>#
項に対応する)。
しかしながら,旧来の~propには、反復成分を~commaで区切らないもの( `counter-reset$p など)もある。
◎
How to divide a list-valued property into iterations is intentionally undefined and hand-wavey at the moment. Generally, you just split it on top-level commas (corresponding to a top-level <foo># term in the grammar), but some legacy properties (such as counter-reset) don’t separate their iterations with commas.
将来には,厳格に定義されるものと期待されているが、現時点では,明示的に “わかるよね” である。 ◎ It’s expected to be rigorously defined in the future, but at the moment is explicitly a "you know what we mean" thing.
2.1. 直の `CSSStyleValue^I ~obj
直に~supportできる[ より特化された `CSSStyleValue$I の下位class ]が まだない値は、 `CSSStyleValue$I ~objとして直に表現される — そのような各 `CSSStyleValue$I ~objは: ◎ Values that can’t yet be directly supported by a more specialized CSSStyleValue subclass are instead represented as CSSStyleValue objects.
- その `associatedProperty$sl 内部~slotを介して 特定0の~CSS~propが結付けられ,特定0の変異-不能な`下層~値$が結付けられる。 これらの~objは、自身が`具象化-$している特定0の`下層~値$を “表現する” と呼ばれる — すなわち,同じ~prop用に~stylesheetの中へ設定し戻された場合には、等価な`下層~値$を再生産することになる。 ◎ Each CSSStyleValue object is associated with a particular CSS property, via its [[associatedProperty]] internal slot, and a particular, immutable, underlying value. These objects are said to "represent" the particular underlying value they were reified from, such that if they are set back into a stylesheet for the same property, they reproduce an equivalent underlying value.
- ~objを得るために構文解析された~prop用に限り妥当になると見なされる。 これは、各 `CSSStyleValue$I ~objが有する `associatedProperty$sl 内部~slotにより施行される ◎ These CSSStyleValue objects are only considered valid for the property that they were parsed for. This is enforced by CSSStyleValue objects having\
各 `CSSStyleValue$I ~objは、 `associatedProperty@sl 内部~slotを有する — それは、次のいずれかを値にとる ⇒# ~NULL (既定 【特に,下位classの場合】)/ ある~prop名を指定している`文字列$ ◎ a [[associatedProperty]] internal slot, which is either null (the default) or a string specifying a property name.
注記: この~slotは、 `StylePropertyMap$I の[ `set()$m1 / `append()$m1 ]により検査される。 ◎ Note: This slot is checked by StylePropertyMap.set()/append()
3. `StylePropertyMap^I
[`Exposed$=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface `StylePropertyMapReadOnly@I {
`iterable$m<USVString, sequence<`CSSStyleValue$I>>;
any `get$m(USVString %property);
/*
ここでの `any^c は
`(undefined or CSSStyleValue)^c を意味する
— https://github.com/heycam/webidl/issues/60 を見よ。
◎
'any' means (undefined or CSSStyleValue) here, see https://github.com/heycam/webidl/issues/60
*/
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 {
void `set$m(USVString %property, (`CSSStyleValue$I or USVString)... %values);
void `append$m(USVString %property, (`CSSStyleValue$I or USVString)... %values);
void `delete$m(USVString %property);
void `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$を成す`宣言~list$を反映している`有順序~map$である。 ◎ A StylePropertyMapReadOnly object has a [[declarations]] internal slot, which is a map reflecting the CSS declaration block's declarations.
注記: `宣言~list$は、まだ `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 underlying values 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 用の`反復する値~pair$( `iterable@m1 )は、次に従って得られる: ◎ 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~list ~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~list に~pair ( %~prop / %~obj~list ) を付加する ◎ Append prop/objects to value pairs.
- ~RET %値~pair~list ◎ 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を格納するが、各~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
-
被呼出時には、次を遂行し~MUST: ◎ 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 ◎ Otherwise, return undefined.
- 大域~objを定義する必要がある。 【`671$issue】 ◎ Define the global.
- `getAll(property)@m
-
被呼出時には、次を遂行し~MUST: ◎ 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
-
被呼出時には、次を遂行し~MUST: ◎ 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[ %~prop~map[ %property ] ~NEQ ε ならば ~T / ~ELSE_ ~F ] ◎ If props[property] exists, return true. Otherwise, return false.
- `size@m
- 被呼出時には、次を返さ~MUST ⇒ 此れの `declarations$sl 内部~slotの`~size$map ◎ The size attribute, on getting from a StylePropertyMap this, must perform the following steps: • Return the size of the value of this’s [[declarations]] internal slot.
- `set(property, ...values)@m
-
被呼出時には、次を遂行し~MUST: ◎ 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[ 次のいずれかが満たされる ] ⇒ ~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[ %values 内のある`~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 underlying value 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
-
被呼出時には、次を遂行し~MUST: ◎ 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[ 次のいずれかが満たされる ] ⇒ ~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.
-
%values 内のある`~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 に~~付随するすべては,有意義な型がない素の`成分~値$になる。 この段の制約は、~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 underlying value with property and value, and append the returned value to temp values. ◎ Append the entries of temp values to props[property].
- `delete(property)@m
-
被呼出時には、次を遂行し~MUST ◎ The delete(property) method, when called on a StylePropertyMap this, must perform the following steps:
- %property ~SET `~prop名を検査して正規化する$( %property ) ◎ If property is not a custom property name string, set property to property ASCII lowercased.. ◎ If property is not a valid CSS property, throw a TypeError.
- 此れの `declarations$sl 内部~slot[ %property ] ~SET ε ◎ If this’s [[declarations]] internal slot contains property, remove it.
- `clear()@m
- 被呼出時には、次を遂行し~MUST ⇒ 此れの `declarations$sl 内部~slotからすべての宣言を`除去する$map ◎ The clear() method, when called on a StylePropertyMap this, must perform the following steps: • Remove all of the declarations in this’s [[declarations]] internal slot.
`下層~値を作成する@ ときは、所与の ( `文字列$ %~prop, `文字列$または `CSSStyleValue$I %値 ) に対し, %値 の型に応じて次を走らす: ◎ To create an underlying value, 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[ %~prop は`~list値をとる$でない ]~OR[ %値 は %~prop の反復成分の`文法に合致-$しない ] ⇒ ~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 である ) ⇒ %値 の中の %成分~値 を次のようにされた新たな `CSSMathSum$I 内に包装した結果に置換する ⇒ `values$m1 内部~slot ~SET « %成分~値 »
- ~RET %値 ◎ Return the value.
-
~ELSE(%値 は `USVString^I である) ⇒ ~RET `~CSSStyleValueを構文解析する$( %~prop, %値, %複数~flag ~SET ~F ) ◎ 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化 にて定義されるように,文字列を構文解析して得られる~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 ident.
その `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>.
- `CSSPositionValue$I は、 `position$t に合致する。 ◎ A CSSPositionValue matches <position>.
- `CSSNumericValue$I は[ その型が`合致-$するもの ]に合致する。 ◎ A CSSNumericValue matches what its type matches.
- `CSSURLImageValue^I は、 `url$t に合致する。 ◎ A CSSURLImageValue matches <url>.
- `CSSImageValue$I の下位classは、 `image$t に合致する。 ◎ Any subclass of CSSImageValue matches <image>.
- `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構文解析器を呼出すことなく利用できる/され得る。) ◎ 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
-
被呼出時には、次を遂行し~MUST: ◎ 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解決が変化し, それらがどう算出されるか ]に伴い変化するよう,~~最新であり続け~MUST。 ◎ 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~flag$ ~EQ ~OFF ]にされた~stylesheetからの情報を公開し得る。 ◎ Note: like Window.getComputedStyle(), this method can expose information from stylesheets with the origin-clean flag unset.
注記: この~methodが返す `StylePropertyMapReadOnly$I は、 `getComputedStyle()$m に利用される`解決値$の概念ではなく,実際の`算出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 resolution により、疑似要素の~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 `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に対しては、 ( `Element^I などの) `ElementCSSInlineStyle$I ~interfaceを実装する~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), `CSSUnparsedValue@mC(sequence<`CSSUnparsedSegment$I> %members)] interface `CSSUnparsedValue@I : `CSSStyleValue$I { `iterable$m<`CSSUnparsedSegment$I>; readonly attribute unsigned long `length$m; `getter$m `CSSUnparsedSegment$I (unsigned long %index); `setter$m `CSSUnparsedSegment$I (unsigned long %index, `CSSUnparsedSegment$I %val); }; typedef (USVString or `CSSVariableReferenceValue$I) `CSSUnparsedSegment@I; [`Exposed$=(Window, Worker, PaintWorklet, LayoutWorklet), `CSSVariableReferenceValue$mC(USVString %variable, optional `CSSUnparsedValue$I? %fallback = null)] interface `CSSVariableReferenceValue@I { attribute USVString `variable$m; readonly attribute `CSSUnparsedValue$I? `fallback$m; };
`CSSUnparsedValue$I ~objは、`~custom~prop$を参照する~prop値を表現する。 それは,[ `USVString^I として与えられる文字列~片, `CSSVariableReferenceValue$I ~objとして与えられる変数~参照 ]が~~混在する`~list$であり、~objの `tokens@sl 内部~slotに格納される。 ◎ CSSUnparsedValue objects represent property values that reference custom properties. They are comprised of a list of string fragments and variable references. ◎ ↓
- `iterable@m
- 此れの`値~反復子$は、此れの `tokens$sl 内部~slotを成す~itemたちを順に反復する。 ◎ They have a [[tokens]] internal slot, which is a list of USVStrings and CSSVariableReferenceValue objects. This list is the object’s values to iterate over.
- `length@m
- 取得子は、此れの `tokens$sl 内部~slotの`~size$を返さ~MUST。 ◎ The length attribute returns the size of the [[tokens]] internal slot.
- `getter@m
- `setter@m
-
これらの`特殊~演算$のふるまいは、此れの `tokens$sl に基づく: ◎ ↓
- 此れが`~supportする~prop~index$は、 0 以上[ 此れの `tokens$sl 内部~slotの`~size$ ]未満とする。 ◎ The supported property indexes of a CSSUnparsedValue this are the integers greater than or equal to 0, and less than the size of this’s [[tokens]] internal slot.
- 此れの`有index~propの値を決定する$ときは、所与の ( 此れが`~supportする~prop~index$ %n ) に対し,此れの `tokens$sl 内部~slot[ %n ] を返す。 【 %n が他の値のときにどうなるか言及されていない — ~NULL は返せないので、例外が投出される?】 ◎ To determine the value of an indexed property of a CSSUnparsedValue this and an index n, let tokens be this’s [[tokens]] internal slot, and return tokens[n].
-
此れの[ `既存の有index~propの値を設定する$ / `新たな有index~propの値を設定する$ ]ときは、所与の ( ~index %n, 値 %新たな値 ) に対し,次を遂行する:
- %~token~list ~LET 此れの `tokens$sl 内部~slot
- ~IF[ %n は此れが`~supportする~prop~index$である ] ⇒ %~token~list[ %n ] ~SET %新たな値
- ~ELIF[ %n ~EQ %~token~list の`~size$ ] ⇒ %~token~list に %新たな値 を`付加する$
- ~ELSE ⇒ ~THROW `RangeError$E
- `variable@m
- 取得子は、此れの `variable$m 内部~slotを返さ~MUST。 ◎ The getter for the variable attribute of a CSSVariableReferenceValue this must return its variable internal slot.
-
設定子は、所与の ( 文字列 %variable ) に対し,次を走らせ~MUST: ◎ 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.
- `fallback@m
- 【言及されていないが、単に構築子にて設定された値を返すであろう。】
- `CSSVariableReferenceValue(variable, fallback)@mc
-
この構築子の被呼出時には、次を遂行し~MUST: ◎ 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.
- ~RET 次のようにされt新たな `CSSVariableReferenceValue$I ⇒# `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/他の`識別子$ ]を表現する。 ◎ CSSKeywordValue objects represent CSS keywords and other identifiers.
[`Exposed$=(Window, Worker, PaintWorklet, LayoutWorklet), `CSSKeywordValue$mC(USVString %value)] interface `CSSKeywordValue@I : `CSSStyleValue$I { attribute USVString `value$m; };
- `CSSKeywordValue(value)@mc
-
この構築子の被呼出時には、次を遂行し~MUST ◎ 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.
- ~RET 次のようにされた新たな `CSSKeywordValue$I ⇒ `value$m1 内部~slot ~SET %value ◎ Otherwise, return a new CSSKeywordValue with its value internal slot set to value.
- ◎ *この段落は、おそらく削除漏れ Any place that accepts a CSSKeywordValue also accepts a raw USVString, by using the following typedef and algorithm:
- `value@m
-
設定子は、次を走らせ~MUST: ◎ 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.
- ~RET 次のようにされた新たな `CSSKeywordValue$I ⇒ 此れの `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^I も受容される: ◎ Any place that accepts a CSSNumericValue also accepts a raw double, by using the following typedef and algorithm:
typedef (double or `CSSNumericValue$I) `CSSNumberish@I;
`実数に類する値を規格化する@ ときは、所与の ( %~num ) に対し,次を遂行する: ◎ To rectify a numberish value num, perform the following steps:
- ~IF[ %~num は `CSSNumericValue$I 型である ] ⇒ ~RET %~num ◎ If num is a CSSNumericValue, return num.
- ~Assert: %~num は `double^I 型である ◎ If num is a double,\
- ~RET 次のようにされた新たな `CSSUnitValue$I ⇒# `value$m1 内部~slot ~SET %~num, `unit$m1 内部~slot ~SET `number^l ◎ return a new CSSUnitValue with its value internal slot set to num and its unit internal slot set to "number".
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$I... %values); `CSSNumericValue$I `sub$m(`CSSNumberish$I... %values); `CSSNumericValue$I `mul$m(`CSSNumberish$I... %values); `CSSNumericValue$I `div$m(`CSSNumberish$I... %values); `CSSNumericValue$I `min$m(`CSSNumberish$I... %values); `CSSNumericValue$I `max$m(`CSSNumberish$I... %values); boolean `equals$m(`CSSNumberish$I... %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
-
被呼出時には、次を遂行し~MUST: ◎ 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 である ]~AND[ %値~list 内のすべての`~item$の `unit$m1 は互いに同じ %単位 である ] ⇒ ~RET 次のようにされた新たな `CSSUnitValue$I ~obj ⇒# `unit$m1 内部~slot ~SET %単位, `value$m1 内部~slot ~SET [ %値~list 内のすべての`~item$の `value$m1 内部~slot ]の総和†
† この加算は、 “左から右の順” に行われ~MUST — 例えば,値が « 1, 2, 3, 4 » ならば、結果は (((1 + 2) + 3) + 4) になるように(この詳細は、浮動小数点~算術の下で,相互運用性を確保するために必要とされる)。
◎ 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
-
被呼出時には、次を遂行し~MUST: ◎ 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
-
被呼出時には、次を遂行し~MUST: ◎ 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 である ]:
- %単位 ~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 } の積†
† この乗算は、 “左から右の順” に行われ~MUST — 例えば,値が « 1, 2, 3, 4 » ならば、結果は (((1 × 2) × 3) × 4) になるように(この詳細は、浮動小数点~算術の下で,相互運用性を確保するために必要とされる)。
◎ 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
-
被呼出時には、次を遂行し~MUST: ◎ 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
-
被呼出時には、次を遂行し~MUST: ◎ 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 %単位, `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
-
被呼出時には、次を遂行し~MUST: ◎ 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 %単位, `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
-
被呼出時には、次を遂行し~MUST: ◎ The equals(...values) method, when called on a CSSNumericValue this, must perform the following steps:
- ~RET [ 次が満たされるならば ~T / ~ELSE_ ~F ] ⇒ %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 つは同等でない ⇒# `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)).
このように,かなり厳正で精密な概念0にしている目的は、構造的な同等性を素早く試験できるようにするためである。 より低速で~~寛容な同等性 — 引数たちは どの順序で合致することも許容するなど — の概念0を利用した場合、おそらく,他のあらゆる単純化 — `96px^v は `1in^v に同等になることを考慮する様な — も突き詰めるよう求められるであろう — 将来的には、このような~~緩い同等性の概念0も,追加されるかもしれない。 ◎ 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は相異なる ] ⇒ ~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,\
- ~RET [ 次が満たされるならば ~T / ~ELSE_ ~F ] ⇒ `CSSUnitValue^II [ %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 [ 次が満たされるならば ~T / ~ELSE_ ~F ] ⇒ どの %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 [ 次が満たされるならば ~T / ~ELSE_ ~F ] ⇒ ( %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は、可能なら,此れを[ %unit に指定された単位を伴う,別の `CSSNumericValue$I ]に変換する。 ◎ The to(unit) method converts an existing CSSNumericValue this into another one with the specified unit, if possible.\
-
被呼出時には、次を遂行し~MUST: ◎ 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は、可能なら此れを[ %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.
被呼出時には、次を遂行し~MUST: ◎ 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[ ( %値の単位, %単位 ) は`互換~単位$でない ] ⇒ ~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は、此れの`型$の表現を返す。 ◎ The type() method returns a representation of the type of this.
-
被呼出時には、次を遂行し~MUST: ◎ When called, it must perform the following steps:
- %結果 ~LET 新たな `CSSNumericType$I 辞書 ◎ Let result be a new CSSNumericType.
- 此れの`型$を成す ~EACH( %基底~型 → %累乗数 ) に対し ⇒ ~IF[ %累乗数 ~NEQ 0 ] ⇒ %結果 の %基底~型 ~member ~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: %基底~型 は`基底~型$である
- %型[ %基底~型 ] ~INCBY %累乗数
- ~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は、~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.
-
被呼出時には、次を遂行し~MUST: ◎ 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関数$ ]のいずれかである ] ⇒ ~RET `数量~値を具象化する$( %結果 ) ◎ If result is not a <number-token>, <percentage-token>, <dimension-token>, or a math function, throw a SyntaxError and abort this algorithm. ◎ Reify a numeric value result, and return the result.
- ~THROW `SyntaxError$E ◎ ↑
4.3.2. 数量~値の型~付け
各 `CSSNumericValue$I ~objには、 `型@ が結付けられる:
- `型$は、各`基底~型$を整数に対応付ける`有順序~map$である。
- 次に挙げるものが `基底~型@ とされる ⇒# `length^l, `angle^l, `time^l, `frequency^l, `resolution^l, `flex^l, `percent^l
-
`型$は、常に,次の拘束を満たす ⇒ どの`基底~型$ %基底~型 に対しても ⇒ `型$[ %基底~型 ] ~NEQ ε
【 この拘束は、この訳による追加である。 原文の`型$は,初期~時は空とされているが、あらゆる箇所で,所与の ( `型$ %型, `基底~型$ %~key ) に対する 2 つの条件 ⇒# %型[ %~key ] ~EQ ε ( %~key を`~key$とする`~entry$は無い), %型[ %~key ] ~EQ 0 ◎終 は 常に同じに扱われる(その違いは外から観測され得ない)ので、前者を後者に統合して,他所の条件分岐を簡略化している( %型[…] の定義を,~entryが無い場合は常に 0 を返すものと定義しても同じになる)。 それに伴い,新たな`型$~instanceは、常に,この拘束を満たすように作成される — [ `型を作成する$ / `単位~mapから型を作成する$ / 既存の`型$を複製する ]を通して。 】
- `型$を成す`~entry$たちの順序は、常に,上に挙げた`基底~型$の順序に従うとする。
-
各`型$には、 `百分率hint@ も結付けられる。 それは、[ ~NULL または `percent^l 以外の`基底~型$ ]のいずれかをとり,他が指定されない限り ~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.
`型を作成する@ ときは、所与の ( 文字列 %単位 (省略時は `number^l ) ) に対し,次を遂行する: ◎ To create a type from a string unit, follow the appropriate branch of the following:
-
%基底~型 ~LET %単位 に`対応する基底~型$
所与の文字列 %単位 に `対応する基底~型@ は、下の表の左列に挙げる分類のうち, %単位 が該当する行の右列に与える値とする 【この定義は、この訳による追加】 :
`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 新たな`有順序~map$
-
~EACH( `基底~型$ %~key ) に対し,`基底~型$に挙げた順に ⇒ %型[ %~key ] ~SET 0
【 この段は、この訳による`型$の定義に対する追加の拘束に伴い,追加している。 】
- ~IF[ %基底~型 ~NEQ `無次元^i ] ⇒ %型[ %基底~型 ] ~SET 1
- %型 の`百分率hint$ ~SET ~NULL ◎ In all cases, the associated percent hint is null.
- ~RET %型
`型を加算する@ ときは、所与の ( `型$ %型/1, `型$ %型/2 ) に対し,次を遂行する: ◎ To add two types type1 and type2, perform the following steps:
【 入力は 3 個以上与えられ得る(この節の末尾の注記を見よ)。 】【 ここでは、`百分率hint$にて述べた不変則も利用して,原文の~algoを単純化している。 】
- %~hint ~LET %型/1 の`百分率hint$ ◎ ↓
- ~IF[ %~hint ~NEQ ~NULL ] ⇒ ~IF[ %型/2 の`百分率hint$ ~NIN { ~NULL, %~hint } ] ⇒ ~RET `失敗^i — %型/1, %型/2 は加算できない ◎ Replace type1 with a fresh copy of type1, and type2 with a fresh copy of type2. Let finalType be a new type with an initially empty ordered map and an initially null percent hint. ◎ If both type1 and type2 have non-null percent hints with different values • The types can’t be added. Return failure.
- ~ELSE ⇒ %~hint ~SET %型/2 の`百分率hint$ ◎ ↓
-
~IF[ %~hint ~NEQ ~NULL ] ⇒ ~IF[ %型/1, %型/2 は %~hint に関して`同値である^i ] ⇒ ~GOTO `成功^i
ここで、[ %~hint に関して`同値である^i ]とは、次がいずれも満たされることを意味する:
- どの`基底~型$ %~key ~NIN { `percent^l, %~hint } に対しても ⇒ %型/1[ %~key ] ~EQ %型/2[ %~key ]
- %型/1[ `percent^l ] ~PLUS %型/1[ %~hint ] ~EQ %型/2[ `percent^l ] ~PLUS %型/2[ %~hint ]
-
~ELSE:
- ~IF[ どの`基底~型$ %~key に対しても, %型/1[ %~key ] ~EQ %型/2[ %~key ] ] ⇒ ~GOTO `成功^i
- ~IF[ ある `percent^l 以外の`基底~型$ %~hint/3 があって, %型/1, %型/2 は %~hint/3 に関して`同値である^i ] ⇒# %~hint ~SET %~hint/3 (該当する %~hint/3 は、一意に定まる); ~GOTO `成功^i
- ~RET `失敗^i — %型/1, %型/2 は加算できない ◎ Otherwise • The types can’t be added. Return failure.
-
`成功^i:
- %型 ~SET %型/1 の複製
- %型 に`百分率hintを適用する$( %~hint )
- ~RET %型
`型$ %型 に `百分率hintを適用する@ ときは、所与の ( `百分率hint$ %~hint ) に対し,次を遂行する: ◎ To apply the percent hint hint to a type, perform the following steps:
- ~IF[ %~hint ~EQ ~NULL ] ⇒ ~RET 【この段は、他所を単純化するための,この訳による追加。】
- %型[ %~hint ] ~INCBY %型[`percent^l ] ◎ If type doesn’t contain hint, set type[hint] to 0. ◎ If type contains "percent", add type["percent"] to type[hint], then\
- %型[`percent^l ] ~SET 0 ◎ set type["percent"] to 0.
- %型 の`百分率hint$ ~SET %~hint ◎ Set type’s percent hint to hint.
`型を乗算する@ ときは、所与の ( `型$ %型/1, `型$ %型/2 ) に対し,次を遂行する: ◎ To multiply two types type1 and type2, perform the following steps:
【 入力は 3 個以上与えられ得る(この節の末尾の注記を見よ)。 】【 ここでは、`百分率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.
- %型 に`百分率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 and an initially null percent hint
- %型 を成す ~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:
-
この定義の目的においては、 %型 の `純~単位@ とは、次をいずれも満たす %単位 が[ 在るならばそれ / 無いならば ε ]とする:
- [ %単位 ~EQ `number^l ]~OR[[ %単位 は`基底~型$である ]~AND[ %型[ %単位 ] ~EQ 1 ]]
- どの`基底~型$ %~key も,次を満たす ⇒ [ %~key ~EQ %単位 ]~OR[ %型[ %~key ] ~EQ 0 ]
【 この定義は、以下を簡潔に述べるため,この訳に導入している。 %型 は、`純~単位$に応じて[ `number^l ならば無次元量(単位なし) / `percent^l ならば他の単位に相対的な一次元量か, 無次元量に相対的な無次元量 / 他の非 ε 値ならば単位 %単位 の一次元量 / ε ならば多重次元量 ]を表す。 】
-
%型 は次を満たすならば `length$t に`合致-$するとされる ⇒ [ `純~単位$ ~EQ `length^l ]~AND[ `百分率hint$ ~EQ ~NULL ]
`angle$t, `time$t, `frequency$t, `resolution$t, `flex$t に対しても,同様に定義される。
◎ A type matches <length> if its only non-zero entry is «[ "length" → 1 ]» and its percent hint is null. Similarly for <angle>, <time>, <frequency>, <resolution>, and <flex>. - %型 は次を満たすならば `percentage$t に`合致-$するとされる ⇒ `純~単位$ ~EQ `percent^l ◎ A type matches <percentage> if its only non-zero entry is «[ "percent" → 1 ]».
-
%型 は次を満たすならば `length-percentage$t に`合致-$するとされる ⇒ `純~単位$ ~IN { `length^l, `percent^l }
`angle-percentage$t, `time-percentage$t, 等々に対しても,同様に定義される。
◎ A type matches <length-percentage> if its only non-zero entry is either «[ "length" → 1 ]» or «[ "percent" → 1 ]» Same for <angle-percentage>, <time-percentage>, etc. -
%型 は次を満たすならば `number$t に`合致-$するとされる ⇒ [ `純~単位$ ~EQ `number^l ]~AND[ `百分率hint$ ~EQ ~NULL ] ◎ A type matches <number> if it has no non-zero entries and its percent hint is null.
-
%型 は次を満たすならば `number-percentage^t に`合致-$するとされる ⇒ `純~単位$ ~IN { `number^l, `percent^l } ◎ A type matches <number-percentage> if it has no non-zero entries, or its only non-zero entry is «[ "percent" → 1 ]».
仕様には、文法において `length-percentage$t の代わりに [`length$t | `percentage$t] を利用して,注釈文にて `length$t と `percentage$t を組合せれるものと指定しているものも多い。 `合致-$~~処理の目的においては、これらの事例は `length-percentage$t として扱われるべきである。 `angle-percentage$t, 等々に対しても同様に扱われるべきである。 ◎ Many specifications use ''[ <length> | <percentage> ]'' instead of ''<length-percentage>'' in their grammar, and specify in prose that the <length> and <percentage> can be combined. For the purposes of matching, these cases should be treated as <length-percentage>. Similarly for <angle-percentage>, etc.
注記: `型$の集合は、加算の下で半群( `semi-group^en )を形成し,乗算の下で単位元を有する半群( `monoid^en )を形成する( `型を作成する$() の結果が乗法的~単位元を与える)。 すなわち、それらは結合的, かつ可換である。 したがって仕様は、何個でも一義的に`型を加算する$ことができる — 一度に 2 個ずつ`型を加算する$よう記すことに代えて。 ◎ Note: Types form a semi-group under both addition and a monoid under multiplication (with the multiplicative identity being «[ ]» with a null percent hint), meaning that they’re associative and commutative. Thus the spec can, for example, add an unbounded number of types together unambiguously, rather than having to manually add them pair-wise.
4.3.3. 単位~付きの値: `CSSUnitValue^I ~obj
単独の単位として表せる数量~値(あるいは裸の実数/百分率)は `CSSUnitValue$I として表現される。 ◎ 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), `CSSUnitValue$mC(double %value, USVString %unit)] interface `CSSUnitValue@I : `CSSNumericValue$I { attribute double `value@m; readonly attribute USVString `unit@m; };
- `CSSUnitValue(value, unit)@mc
-
この構築子の被呼出時には、次を遂行し~MUST: ◎ 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.
- ~RET 次のようにされた新たな `CSSUnitValue$I ⇒# `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 CSSUnitValue 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たちが成す木により表現され、その各~~末端~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), `CSSMathSum$mC(`CSSNumberish$I... %args)] interface `CSSMathSum@I : `CSSMathValue$I { readonly attribute `CSSNumericArray$I `values@m; }; [`Exposed$=(Window, Worker, PaintWorklet, LayoutWorklet), `CSSMathProduct$mC(`CSSNumberish$I... %args)] interface `CSSMathProduct@I : `CSSMathValue$I { readonly attribute `CSSNumericArray$I `values@m; }; [`Exposed$=(Window, Worker, PaintWorklet, LayoutWorklet), `CSSMathNegate$mC(`CSSNumberish$I %arg)] interface `CSSMathNegate@I : `CSSMathValue$I { readonly attribute `CSSNumericValue$I `value@m; }; [`Exposed$=(Window, Worker, PaintWorklet, LayoutWorklet), `CSSMathInvert$mC(`CSSNumberish$I %arg)] interface `CSSMathInvert@I : `CSSMathValue$I { readonly attribute `CSSNumericValue$I `value@m; }; [`Exposed$=(Window, Worker, PaintWorklet, LayoutWorklet), `CSSMathMin$mC(`CSSNumberish$I... %args)] interface `CSSMathMin@I : `CSSMathValue$I { readonly attribute `CSSNumericArray$I `values@m; }; [`Exposed$=(Window, Worker, PaintWorklet, LayoutWorklet), `CSSMathMax$mC(`CSSNumberish$I... %args)] interface `CSSMathMax@I : `CSSMathValue$I { readonly attribute `CSSNumericArray$I `values@m; }; [`Exposed$=(Window, Worker, PaintWorklet, LayoutWorklet), `CSSMathClamp$mC(`CSSNumberish$I %min, `CSSNumberish$I %val, `CSSNumberish$I %max)] interface `CSSMathClamp@I : `CSSMathValue$I { readonly attribute `CSSNumericArray$I `min@m; readonly attribute `CSSNumericArray$I `val@m; readonly attribute `CSSNumericArray$I `max@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
-
取得子は、此れの~interfaceに応じて,次の表の右列に与える文字列( `CSSMathOperator$I 列挙~値 )を返さ~MUST:
◎ The operator attribute of a CSSMathValue this must, on getting, return the following string, depending on the interface of this: ◎ CSSMathSum • "sum" CSSMathProduct • "product" CSSMathMin • "min" CSSMathMax • "max" CSSMathNegate • "negate" CSSMathInvert • "invert" ◎ Note: These are all instances of the CSSMathOperator enum.~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)@mc
-
この構築子の被呼出時には、次を遂行し~MUST: ◎ 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.
- ~RET 次のようにされた新たな `CSSMathSum$I ~obj ⇒ `values$m1 内部~slot ~SET %args ◎ Return a new CSSMathSum whose values internal slot is set to args.
- `CSSMathMin(...args)@mc
- `CSSMathMax(...args)@mc
- これらの構築子は、次を除いて `CSSMathSum()$mc と同じに定義される ⇒ 最後の段においては、順に,新たな[ `CSSMathMin$I, `CSSMathMax$I ]~objを返す ◎ The CSSMathMin(...args) and CSSMathMax(...args) constructors are defined identically to the above, except that in the last step they return a new CSSMathMin or CSSMathMax object, respectively.
- `CSSMathProduct(...args)@mc
- この構築子は、次を除いて `CSSMathSum()$mc と同じに定義される ⇒# 3 番目の段においては,`型を加算する$に代えて`型を乗算する$を用いる, および 最後の段においては `CSSMathProduct$I ~objを返す ◎ The CSSMathProduct(...args) constructor is defined identically to the above, except that in step 3 it multiplies the types instead of adding, and in the last step it returns a CSSMathProduct.
- `CSSMathClamp(min, val, max)@mc
-
この構築子の被呼出時には、次を遂行し~MUST: ◎ The CSSMathClamp(min, val, max) constructor must, when called, perform the following steps:
- %min ~SET `実数に類する値を規格化する$( %min ) ◎ ↓
- %val ~SET `実数に類する値を規格化する$( %val ) ◎ ↓
- %max ~SET `実数に類する値を規格化する$( %max ) ◎ Replace min, val, and max with the result of rectifying a numberish value for each.
- %型 ~LET `型を加算する$( %min, %val, %max ) ◎ Let type be the result of adding the types of min, val, and max.\
- ~IF[ %型 ~EQ `失敗^i ] ⇒ ~THROW `TypeError$E ◎ If type is failure, throw a TypeError.
- ~RET 次のようにされた新たな `CSSMathClamp$I ~obj ⇒# `min$m1 内部~slot ~SET %min, `val$m1 内部~slot ~SET %val, `max$m1 内部~slot ~SET %max ◎ Return a new CSSMathClamp whose min, val, and max internal slots are set to min, val, and max, respectively.
- `CSSMathNegate(arg)@mc
- この構築子の被呼出時には、次のようにされた新たな `CSSMathNegate$I ~objを返さ~MUST ⇒ `value$m1 内部~slot ~SET `実数に類する値を規格化する$( %arg ) ◎ The CSSMathNegate(arg) constructor must, when called, perform the following steps: • Replace arg with the result of rectifying a numberish value for arg. • Return a new CSSMathNegate whose value internal slot is set to arg.
- `CSSMathInvert(arg)@mc
- この構築子の被呼出時には、次のようにされた新たな `CSSMathInvert$I ~objを返さ~MUST ⇒ `value$m1 内部~slot ~SET `実数に類する値を規格化する$( %arg ) ◎ The CSSMathInvert(arg) constructor is defined identically to the above, except that in the last step it returns a new CSSMathInvert object.
`CSSMathValue$I %M の`型$ は、 %M の~classに応じて,次で与えられる: ◎ The type of a CSSMathValue depends on its class:
- `CSSMathSum$I
- `型を加算する$( %M の `values$m1 内部~slot内の各`~item$の`型$ )
- `CSSMathMin$I
- `型を加算する$( %M の `values$m1 内部~slot内の各`~item$の`型$ )
- `CSSMathMax$I
- `型を加算する$( %M の `values$m1 内部~slot内の各`~item$の`型$ ) ◎ The type is the result of adding the types of each of the items in its values internal slot.
- `CSSMathClamp$I
- `型を加算する$( %M の[ `min$m1, `val$m1, `max$m1 ]内部~slotの`型$ ) ◎ The type is the result of adding the types of the min, val, and max 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にある `CSSNumericValue$I を検索取得する。 ◎ The indexed 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 `em@m(double %value); `CSSUnitValue$I `ex@m(double %value); `CSSUnitValue$I `ch@m(double %value); `CSSUnitValue$I `ic@m(double %value); `CSSUnitValue$I `rem@m(double %value); `CSSUnitValue$I `lh@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 `cm@m(double %value); `CSSUnitValue$I `mm@m(double %value); `CSSUnitValue$I `Q@m(double %value); `CSSUnitValue$I `in@m(double %value); `CSSUnitValue$I `pt@m(double %value); `CSSUnitValue$I `pc@m(double %value); `CSSUnitValue$I `px@m(double %value); // `angle^t `CSSUnitValue$I `deg@m(double %value); `CSSUnitValue$I `grad@m(double %value); `CSSUnitValue$I `rad@m(double %value); `CSSUnitValue$I `turn@m(double %value); // `time^t `CSSUnitValue$I `s@m(double %value); `CSSUnitValue$I `ms@m(double %value); // `frequency^t `CSSUnitValue$I `Hz@m(double %value); `CSSUnitValue$I `kHz@m(double %value); // `resolution^t `CSSUnitValue$I `dpi@m(double %value); `CSSUnitValue$I `dpcm@m(double %value); `CSSUnitValue$I `dppx@m(double %value); // `flex^t `CSSUnitValue$I `fr@m(double %value); };
上に定義されたどの名前 %N ( `number^l, `px^l, 等々)の~methodも,所与の ( %value ) を渡して~callされたときは、次のようにされた新たな `CSSUnitValue$I ~objを返さ~MUST ⇒# `value$m1 内部~slot ~SET %value, `unit$m1 内部~slot ~SET %N ◎ All of the above methods must, when called with a double value, return a new CSSUnitValue whose value internal slot is set to value and whose unit internal slot is set to the name of the method as defined here. ◎ Note: The unit used does not depend on the current name of the function, if it’s stored in another variable; let foo = CSS.px; let val = foo(5); does not return a {value: 5, unit: "foo"} CSSUnitValue. The above talk about names is just a shorthand to avoid defining the unit individually for all ~20 functions.
例えば,新たな `CSSPositionValue$I を作成するときは、次の様な~codeに代えて: ◎ For example, rather than creating a new CSSPositionValue with code like:
let %pos = new CSSPositionValue( new CSSUnitValue(5, "px"), new CSSUnitValue(10, "px") );
次の様に書ける: ◎ One can instead write:
let pos = new CSSPositionValue(CSS.px(5), CSS.px(10));
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), `CSSTransformValue$mC(sequence<`CSSTransformComponent$I> %transforms)] interface `CSSTransformValue@I : `CSSStyleValue$I { `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)@mc
-
この構築子の被呼出時には、次を遂行し~MUST: ◎ The CSSTransformValue(transforms) constructor must, when called, perform the following steps:
- ~IF[ %transforms は空である ] ⇒ ~THROW `TypeError$E ◎ If transforms is empty, throw a TypeError.
- 次のようにされた新たな `CSSTransformValue$I ⇒ `values$sl ~SET %transforms に等価な同順の`~list$ ◎ Return a new CSSTransformValue whose values to iterate over is transforms.
- `is2D@m
- 取得子は、此れの `values$sl 内に次を満たす~itemが[ 在るならば ~F / 無いならば ~T ]を返さ~MUST ⇒ ~itemの `~TCis2D$m 属性 ~EQ ~F ◎ The is2D attribute of a CSSTransformValue this must, on getting, return true if, for each func in this’s values to iterate over, the func’s is2D attribute would return true; otherwise, the attribute returns false.
- `toMatrix()@m
-
被呼出時には、次を遂行し~MUST: ◎ 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,\
- %行列 の`~is2D$ ~SET ~T ◎ with its is2D internal slot set to true.
- 此れの `values$sl 内の~EACH( `CSSTransformComponent$I %成分 ) に対し ⇒ %行列 ~SET %行列 に[ %成分 上で `toMatrix()$m1 を~callした結果の `DOMMatrix$I ]で表現される行列を,右から乗算した結果 【結果の`~is2D$にも %成分 の `~TCis2D$m が影響する。】 ◎ For each func in this’s values to iterate over: • Let funcMatrix be the DOMMatrix returned by calling toMatrix() on func. • Set matrix to the result of multiplying matrix and the matrix represented by funcMatrix.
- ~RET %行列 ◎ Return matrix.
- `length@m
- 取得子は、此れの `values$sl 内部~slotの`~size$を返さ~MUST。 ◎ The length attribute indicates how many transform components are contained within the CSSTransformValue. ◎ They have a [[values]] internal slot, which is a list of CSSTransformComponent objects. This list is the object’s values to iterate over.
- `getter@m
- `setter@m
-
これらの`特殊~演算$のふるまいは、此れの `values$sl に基づく: ◎ ↓
- 此れが`~supportする~prop~index$は、 0 以上[ 此れの `values$sl 内部~slotの`~size$ ]未満とする。 ◎ The supported property indexes of a CSSTransformValue this are the integers greater than or equal to 0, and less than the size of this’s [[values]] internal slot.
- 此れの`有index~propの値を決定する$ときは、所与の ( 此れが`~supportする~prop~index$ %n ) に対し,此れの `values$sl 内部~slot[ %n ] を返す。 【 %n が他の値のときにどうなるか言及されていない — ~NULL は返せないので、例外が投出される?】 ◎ To determine the value of an indexed property of a CSSTransformValue this and an index n, let values be this’s [[values]] internal slot, and return values[n].
-
此れの[ `既存の有index~propの値を設定する$ / `新たな有index~propの値を設定する$ ]ときは、所与の ( ~index %n, 値 %新たな値 ) に対し,次を遂行する:
- %値~list ~LET 此れの `values$sl 内部~slot
- ~IF[ %n は此れが`~supportする~prop~index$である ] ⇒ %値~list[ %n ] ~SET %新たな値
- ~ELIF[ %n ~EQ %値~list の`~size$ ] ⇒ %値~list に %新たな値 を`付加する$
- ~ELSE ⇒ ~THROW `RangeError$E
[`Exposed$=(Window, Worker, PaintWorklet, LayoutWorklet)] interface `CSSTransformComponent@I { `stringifier@m; attribute boolean `is2D$m; `DOMMatrix$I `toMatrix$m(); }; [`Exposed$=(Window, Worker, PaintWorklet, LayoutWorklet), `CSSTranslate$mC(`CSSNumericValue$I %x, `CSSNumericValue$I %y, optional `CSSNumericValue$I %z)] interface `CSSTranslate@I : `CSSTransformComponent$I { attribute `CSSNumericValue$I `x@m; attribute `CSSNumericValue$I `y@m; attribute `CSSNumericValue$I `z@m; }; [`Exposed$=(Window, Worker, PaintWorklet, LayoutWorklet), `CSSRotate$mC(`CSSNumericValue$I %angle), Constructor(`CSSNumberish$I %x, `CSSNumberish$I %y, `CSSNumberish$I %z, `CSSNumericValue$I %angle)] interface `CSSRotate@I : `CSSTransformComponent$I { attribute `CSSNumberish$I `x$m; attribute `CSSNumberish$I `y$m; attribute `CSSNumberish$I `z$m; attribute `CSSNumericValue$I `angle@m; }; [`Exposed$=(Window, Worker, PaintWorklet, LayoutWorklet), `CSSScale$mC(`CSSNumberish$I %x, `CSSNumberish$I %y, optional `CSSNumberish$I %z)] interface `CSSScale@I : `CSSTransformComponent$I { attribute `CSSNumberish$I `x$m; attribute `CSSNumberish$I `y$m; attribute `CSSNumberish$I `z$m; }; [`Exposed$=(Window, Worker, PaintWorklet, LayoutWorklet), `CSSSkew$mC(`CSSNumericValue$I %ax, `CSSNumericValue$I %ay)] interface `CSSSkew@I : `CSSTransformComponent$I { attribute `CSSNumericValue$I `ax@m; attribute `CSSNumericValue$I `ay@m; }; [`Exposed$=(Window, Worker, PaintWorklet, LayoutWorklet), `CSSSkewX$mC(`CSSNumericValue$I %ax)] interface `CSSSkewX@I : `CSSTransformComponent$I { attribute `CSSNumericValue$I `ax@m; }; [`Exposed$=(Window, Worker, PaintWorklet, LayoutWorklet), `CSSSkewY$mC(`CSSNumericValue$I %ay)] interface `CSSSkewY@I : `CSSTransformComponent$I { attribute `CSSNumericValue$I `ay@m; }; /* "`skew(x,y)^v" が表現する変形は、 "`skewX(x) skewY(y)^v" と同じではないことに注意。 よって、~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), `CSSPerspective$mC(`CSSNumericValue$I %length)] interface `CSSPerspective@I : `CSSTransformComponent$I { attribute `CSSNumericValue$I `length@m; }; [`Exposed$=(Window, Worker, PaintWorklet, LayoutWorklet), `CSSMatrixComponent$mC(`DOMMatrixReadOnly$I %matrix, optional `CSSMatrixComponentOptions$I %options)] interface `CSSMatrixComponent@I : `CSSTransformComponent$I { attribute `DOMMatrix$I `matrix@m; }; dictionary `CSSMatrixComponentOptions@I { boolean `is2D@m; };
- `~TCis2D@m
- この属性は、変形が~2D, ~3Dのどちらなのかを指示する。 ~T のときは、変形の属性のうち~3D変形に関連するもの( `CSSTranslate^II `z$m1 属性など)による,此れが表現する変形に対する効果はなくなる。 ◎ The is2D attribute 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上の,この属性の設定子は、何もしては~MUST_NOT:
- `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基づく最適化を作動化する点で,頁~上に観測-可能な効果がある。 ◎ 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
-
被呼出時には、次を遂行し~MUST: ◎ 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 の 変形~関数の数学的~記述 【または ~3D変形~関数の数学的~記述】 ]に定義される,此れに等価な変形~行列を表現する ◎ this’s equivalent 4x4 transform matrix, as defined in CSS Transforms 1 §15 Mathematical Description of Transform Functions, and\
-
%M の`~is2D$ ~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)@mc
-
この構築子の被呼出時には、次を遂行し~MUST: ◎ The CSSTranslate(x, y, z) constructor must, when invoked, perform the following steps:
- %is2D ~LET ~F ◎ ↓
- ~IF[ %z は与えられていない ] ⇒# %z ~SET `~CSSUnitValueを作成する$( 0, `px^l ); %is2D ~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.
- ~RET 次のようにされた新たな `CSSTranslate$I ~obj, ⇒# `x$m1 内部~slot ~SET %x, `y$m1 内部~slot ~SET %y, `z$m1 内部~slot ~SET %z, `~TCis2D$m 内部~slot ~SET %is2D ◎ 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 new unit value of (0, "px"), and set this’s is2D internal slot to true. ◎ Return this.
- `CSSRotate(angle)@mc
-
この構築子の被呼出時には、次を遂行し~MUST: ◎ 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.
- ~RET 次のようにされた新たな `CSSRotate$I ~obj ⇒# `angle$m1 内部~slot ~SET %angle `x$m1 内部~slot ~SET `~CSSUnitValueを作成する$( 0, `number^l ), `y$m1 内部~slot ~SET `~CSSUnitValueを作成する$( 0, `number^l ), `z$m1 内部~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.
- `CSSRotate(x, y, z, angle )^m
-
この構築子の被呼出時には、次を遂行し~MUST: ◎ 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.
- ~RET 次のようにされた新たな `CSSRotate$I ~obj ⇒# `angle$m1 内部~slot ~SET %angle, `x$m1 内部~slot ~SET %x, `y$m1 内部~slot ~SET %y, `z$m1 内部~slot ~SET %z, `~TCis2D$m 内部~slot ~SET ~F ◎ Return a new CSSRotate with its angle internal slot set to angle, its x, y, z internal slots set to x, y, and z, and its is2D internal slot set to false.
- `x@m
- `y@m
- `z@m
- これらの属性の設定子は、次を走らせ~MUST ⇒ 当の属性に対応する内部~slot ~SET `実数に類する値を規格化する$( 所与の値 ) ◎ The x, y, and z attributes must, on setting to a new value val, rectify a numberish value from val and set the corresponding internal slot to the result of that.
- `CSSScale(x, y, z)@mc
-
この構築子の被呼出時には、次を遂行し~MUST: ◎ The CSSScale(x, y, z) constructor must, when invoked, perform the following steps:
- %is2D ~LET ~F ◎ ↓
- ~IF[ %z は与えられていない ] ⇒# %z ~SET `~CSSUnitValueを作成する$( 1, `number^l ); %is2D ~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.
- ~RET 次のようにされた新たな `CSSScale$I ~obj ⇒# `x$m1 内部~slot ~SET %x, `y$m1 内部~slot ~SET %y `z$m1 内部~slot ~SET %z, `~TCis2D$m 内部~slot ~SET %is2D ◎ 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.
- `x@m
- `y@m
- `z@m
- これらの属性の設定子は、次を走らせ~MUST ⇒ 当の属性に対応する内部~slot ~SET `実数に類する値を規格化する$( 所与の値 ) ◎ The x, y, and z attributes must, on setting to a new value val, rectify a numberish value from val and set the corresponding internal slot to the result of that.
- `CSSSkew(ax, ay)@mc
-
この構築子の被呼出時には、次を遂行し~MUST: ◎ 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.
- ~RET 次のようにされた新たな `CSSSkew$I ~obj ⇒# `ax$m1 内部~slot ~SET %ax, `ay$m1 内部~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)@mc
-
この構築子の被呼出時には、次を遂行し~MUST: ◎ 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.
- ~RET 次のようにされた新たな `CSSSkewX$I ~obj ⇒# `ax$m1 内部~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)@mc
-
この構築子の被呼出時には、次を遂行し~MUST: ◎ 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.
- ~RET 次のようにされた新たな `CSSSkewY$I ~obj ⇒# `ay$m1 内部~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)@mc
-
この構築子の被呼出時には、次を遂行し~MUST: ◎ The CSSPerspective(length) constructor must, when invoked, perform the following steps:
- ~IF[ %length は `length$t に`合致-$しない ] ⇒ ~THROW `TypeError$E ◎ If length does not match <length>, throw a TypeError.
- ~RET 次のようにされた新たな `CSSPerspective$I ~obj ⇒# `length$m1 内部~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)@mc
-
この構築子の被呼出時には、次を遂行し~MUST:
- %is2D ~LET %matrix の`~is2D$
- ~IF[ %options は与えられていて,その `CSSMatrixComponentOptions^II `is2D$m1 ~memberは在る ] ⇒ %is2D ~SET その~member値
- ~RET 次のようにされた新たな `CSSMatrixComponent$I ~obj ⇒# `matrix$m1 内部~slot ~SET %matrix, `~TCis2D$m 内部~slot ~SET %is2D
注記: `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. `CSSPositionValue^I ~obj
`CSSPositionValue$I ~objは、 `object-position$p などの~propに利用される `position$t 値を表現する。 ◎ CSSPositionValue objects represent <position> values, used by properties such as object-position.
[`Exposed$=(Window, Worker, PaintWorklet, LayoutWorklet), `CSSPositionValue$mC(`CSSNumericValue$I %x, `CSSNumericValue$I %y)] interface `CSSPositionValue@I : `CSSStyleValue$I { attribute `CSSNumericValue$I `x$m; attribute `CSSNumericValue$I `y$m; };
[ `x$m / `y$m ]属性は、容器の[ 左端 / 上端 ]辺からの~offsetを表す。 ◎ The x attribute expresses the offset from the left edge of the container. y expresses the offset from the top edge of the container.
- `CSSPositionValue(x, y)@mc
-
この構築子の被呼出時には、次を遂行し~MUST: ◎ The CSSPositionValue(x, y) constructor must, when called, perform the following steps:
- ~IF[ %x, %y のいずれかは `length-percentage$t に`合致-$しない ] ⇒ ~THROW `TypeError$E ◎ If x or y doesn’t match <length-percentage>, throw a TypeError.
- ~RET 次のようにされた新たな `CSSPositionValue$I ~obj ⇒# `x$m 内部~slot ~SET %x, `y$m 内部~slot ~SET %y ◎ Otherwise, return a new CSSPositionValue whose x internal slot is set to x, and whose y internal slot is set to y.
- `x@m
-
設定子は、次を遂行し~MUST: ◎ The x and y attribute of a CSSPositionValue this must, on setting a value value, perform the following steps:
- ~IF[ 所与の値 は `length-percentage$t に`合致-$しない ] ⇒ ~THROW `TypeError$E ◎ If value doesn’t match <length-percentage>, throw a TypeError.
- 此れの `x$m 内部~slot ~SET 所与の値 ◎ Otherwise, set this’s x or y internal slot, as appropriate, to value.
- 取得子は、此れの `x$m 内部~slotの値を返さ~MUST。 ◎ On reading, the attributes must return the value of the x or y internal slot, as appropriate.
- `y@m
- 設定子と取得子は、 `x$m と同様に定義されるとする。
`position$t 値は~keywordや値が成す複雑な組合わせを受容するが、~TypedOMでは, `position^t 値の具象化 節に従って,常に 2 個だけの~offsetに単純化される。 例えば、次の~stylesheetは: ◎ <position> values accept a complicated combination of keywords and values, but Typed OM always simplifies to just two offsets as per the §5.8 <position> Values algorithm. For example, the following style sheet:
.example { object-position: center bottom 10px; }
次の挙動を生産することになる: ◎ Will produce the following behavior:
let %map = document.querySelector('.example').computedStyleMap(); %map.get('object-position').x; // CSS.percent(50) %map.get('object-position').y; // CSSMathSum(CSS.percent(100), CSS.px(-10))
4.6. `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 用には、画像を表現するために何かを持つことが必要とされる ]が、~URLの取扱いと読込みを,この仕様の~timeline内できっちり指定するには~~複雑に過ぎ,現実的には可能でないためである。 これは、将来~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の取扱いは、それが~URL孕むような `image$t ( `url$f や `image$f など )を表現する場合には,現在の~CSSによる取扱いに一致する。 特に,相対~URLや`素片~URL$の解決-法は、通常の~CSSにおけるそれと同じ挙動になる。 ◎ If a CSSImageValue object represents an <image> that involves a URL (such as url() or image()), the handling of such values is identical to how CSS currently handles them. In particular, resolving relative URLs or fragment URLs has the same behavior as in normal CSS.
例えば,相対~URLは、それが属する~stylesheetの~URL(あるいは[ `style$e 要素 / `style$a 属性 ]内で指定されている場合は、文書の~URL)に対し解決される。 この解決は — 構文解析-時点では起ころうとしないが — 現在は指定されていない,値を算出する間の ある時点で起こる。 ◎ For example, relative URLs are resolved against the URL of the stylesheet they’re within (or the document’s URL, if they’re specified in a style element or style attribute). This resolution doesn’t happen eagerly at parse-time, but at some currently-unspecified point during value computation.
したがって,ある要素の~styleに `background-image: url(foo);^css が設定された下で、その指定d値が Typed OM を介して抽出されてから,異なる文書~内のある要素~上に設定された場合、これら 2 つの要素が供する基底~URLは異なるので,それぞれの要素に対し解決した結果の~URLも異なることになる。 ◎ Thus, if an element’s style is set to background-image: url(foo);, and that specified value is extracted via the Typed OM and then set on an element in a different document, both the source and destination elements will resolve the URL differently, as they provide different base URLs.
他方,抽出された値が( `Element^II `computedStyleMap()$m1 からの)`算出d値$であった場合、すでに絶対~URLに解決されているので,後でそれをどこで設定しようが~~動作は一致する(ただし、`素片~URL$の場合は除く — ~CSSは、それを全部的に解決することは決してなく,常に現在の文書に対し解決するので、どこで用いられるかに応じて扱いも異なる)。 ◎ On the other hand, if the extracted value was a computed value (from computedStyleMap()), then it would already be resolved to an absolute URL, and thus would act identically no matter where you later set it to. (Unless it was a fragment URL, which CSS treats differently and never fully resolves, so it always resolves against the current document.)
5. `CSSStyleValue^I の具象化
この節は、 `具象化@ ( `reification^en )と称される,`下層~値$ 【および,~prop名】 から~TypedOM~objを構築する方法を述べる。 ◎ This section describes how Typed OM objects are constructed from underlying values, a process called reification
【 以下、この節と下位~節は 別ページに分ける 。 】
6. `CSSStyleValue^I の直列化
`CSSStyleValue$I 値を直列化する仕方は、それがどう構築されたかに依存する: ◎ The way that a CSSStyleValue serializes is dependent on how the value was constructed.
- `USVString^I %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からの値の直列化 節にて指定される。 ◎ otherwise, if the value was extracted from the CSSOM • the serialization is specified in §6.8 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 を 直列化する ときは: ◎ To serialize a CSSUnparsedValue this:
- %s ~LET 空`文字列$ ◎ Let s initially be the empty string.
-
%O の `tokens$sl 内部~slot内の~EACH( %~item ) に対し: ◎ For each item in this’s [[tokens]] internal slot:
- %s に[ %~item に応じて,次に与える結果 ]を付加する ⇒# `USVString^I ならば %~item / `CSSVariableReferenceValue$I であるならば %~item を直列化した結果 ◎ If item is a USVString, append it to s. ◎ Otherwise, item is a CSSVariableReferenceValue. Serialize it, then append the result to s.
- ~RET %s ◎ Return s.
`CSSVariableReferenceValue$I0 %O を 直列化する ときは:
- %fallback ~LET %O の `fallback$m 内部~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$I0 %O を 直列化する ときは: ◎ To serialize a CSSKeywordValue this:
- ~RET %O の `value$m 内部~slot ◎ Return this’s value internal slot.
6.3. `CSSUnitValue^I の直列化
`CSSUnitValue$I %O を 直列化する ときは: ◎ To serialize a CSSUnitValue this:
- %単位 ~LET %O の `unit$m1 内部~slot ◎ Let value and unit be this‘s value and unit internal slots.
-
~RET 次を順に連結した結果: ◎ ↓
- `CSSOM-1$r に従って,[ %O の `value$m1 内部~slot ]が与える~CSS値から `number$t に 直列化-した結果 ◎ Set s to the result of serializing a <number> from value, per CSS Object Model (CSSOM) §serializing-css-values.
- %単位 に応じて 次に与える文字列 ⇒# `number^l ならば空~文字列 / `percent^l ならば `%^l / ~ELSE_ %単位 ◎ If unit is "number", return s. ◎ Otherwise, if unit is "percent", append "%" to s, then return s. ◎ Otherwise, append unit to s, then return s.
6.4. `CSSMathValue^I の直列化
`CSSMathValue$I ~obj %O を直列化するときは、所与の ( 真偽値 %入子あり (省略時は ~F ) , 真偽値 %括弧なし (省略時は ~F ) ) に対し,次を走らす: ◎ To serialize a CSSMathValue this, with additional flags nested, a boolean (defaulting to false if unspecified), and paren-less, a boolean (defaulting to false if unspecified):
-
~IF[ %O は[ `CSSMathMin$I0 / `CSSMathMax$I ]である ] ⇒ ~RET 次を順に連結した結果: ◎ Let s initially be the empty string. ◎ If this is a CSSMathMin or CSSMathMax:
- %O に応じて ⇒# `CSSMathMin$I ならば `min(^l / `CSSMathMax$I ならば `max(^l ◎ Append "min(" or "max(" to s, as appropriate.
- 次の結果を `, ^l で`区切って連結-$した結果 ⇒ %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, and append the result to s, appending a ", " between successive values.
- `)^l ◎ Append ")" to s and return s.
- %s ~LET 次に与える値 ⇒# %括弧なし ~EQ ~T ならば 空~文字列 / ~ELSE_ %入子あり ~EQ ~T ならば `(^l / ~ELSE_ `calc(^l ◎ ↓↓
-
~IF[ %O は `CSSMathSum$I である ]: ◎ 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 である ] ⇒# %s に ` - ^l を付加する; %~arg ~SET %~arg の `value$m1 内部~slot
- ~ELSE ⇒ %s に ` + ^l を付加する
- %s に次を付加する ⇒ %~arg を直列化する( %入子あり ~SET ~T ) ◎ ↑
-
-
~ELIF[ %O は `CSSMathNegate$I である ]: ◎ 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 である ]: ◎ 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 である ] ⇒# %s に ` / ^l を付加する; %~arg ~SET %~arg の `value$m1 内部~slot
- ~ELSE ⇒ %s に ` * ^l を付加する
- %s に次を付加する ⇒ %~arg を直列化する( %入子あり ~SET ~T ) ◎ ↑
-
- ~ELIF[ %O は `CSSMathInvert$I である ] ⇒ %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.5. `CSSTransformValue^I, `CSSTransformComponent^I の直列化
`CSSTransformValue$I %O を 直列化する ときは: ◎ To serialize a CSSTransformValue this:
- ~RET 次の結果を ` ^l で`区切って連結-$した結果 ⇒ %O の `values$sl を[ ~itemを直列化する ]`演算で写像する$ ◎ Return the result of serializing each item in this’s values to iterate over, then concatenating them separated by " ".
`CSSTranslate$I0 %O を 直列化する ときは: ◎ To serialize a CSSTranslate this:
- ( %x, %y, %z ) ~LET 順に, %O の[ `x$m, `y$m, `z$m ]内部~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$I0 %O を 直列化する ときは: ◎ To serialize a CSSRotate this:
- ( %x, %y, %z, %a ) ~LET 順に, %O の[ `x$m, `y$m, `z$m, `angle$m ]内部~slotを直列化した結果 ◎ ↓
- %s ~LET 空`文字列$ ◎ Let s initially be the empty string.
- ~IF[ %O の `CSSTransformValue^II `is2D$m1 内部~slot ~EQ ~F ] ⇒ ~RET 次を順に連結した結果 ⇒# `rotate3d(^l, %x, `, ^l, %y, `, ^l, %z, `,^l, %a, `)^l ◎ 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$I0 %O を 直列化する ときは: ◎ To serialize a CSSScale this:
- ( %x, %y, %z ) ~LET 順に, %O の[ `x$m, `y$m, `z$m ]内部~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$m 内部~slot, `y$m 内部~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$I0 %O を 直列化する ときは: ◎ To serialize a CSSSkew this:
- ( %ax, %ay ) ~LET 順に, %O の[ `ax$m, `ay$m ]内部~slotを直列化した結果 ◎ ↓
- ~IF[ %O の `ay$m 内部~slotは `CSSUnitValue$I であって,その `value$m1 ~EQ 0 ] ⇒ ~RET 次を順に連結した結果 ⇒# `skew(^l, %ax, `)^l ◎ Let s initially be "skew(". ◎ Serialize this’s ax internal slot, and append it to s. ◎ If this’s ay internal slot is a CSSUnitValue with a value of 0, then append ")" to s and return s.
- ~RET 次を順に連結した結果 ⇒# `skew(^l, %ax, `, ^l, %ay, `)^l ◎ Otherwise, append ", " to s. • Serialize this’s ay internal slot, and append it to s. • Append ")" to s, and return s.
`CSSSkewX$I0 %O を 直列化する ときは、次を順に連結した結果を返す ⇒# `skewX(^l, %O の `ax$m 内部~slotを直列化した結果, `)^l ◎ To serialize a CSSSkewX this: • Let s initially be "skewX(". • Serialize this’s ax internal slot, and append it to s. • Append ")" to s, and return s.
`CSSSkewY$I0 %O を 直列化する ときは、次を順に連結した結果を返す ⇒# `skewY(^l, %O の `ay$m 内部~slotを直列化した結果, `)^l ◎ To serialize a CSSSkewY this: • Let s initially be "skewY(". • Serialize this’s ay internal slot, and append it to s. • Append ")" to s, and return s.
`CSSPerspective$I0 %O を 直列化する ときは、次を順に連結した結果を返す ⇒# `perspective(^l, %O の `length$m 内部~slotを直列化した結果, `)^l ◎ To serialize a CSSPerspective this: • Let s initially be "perspective(". • Serialize this’s length internal slot, and append it to s. • Append ")" to s, and return s.
`CSSMatrixComponent$I0 %O を 直列化する ときは、次の結果を返す ⇒ %O の `matrix$m 内部~slotの直列化 ◎ To serialize a CSSMatrixComponent this: • Return the serialization of this’s matrix internal slot.
6.6. `CSSPositionValue^I の直列化
`CSSPositionValue$I ~obj %O を直列化した結果は ⇒ [ %O の[ `x$m1, `y$m1 ]属性~値を,それぞれ上の `CSSNumericValue$I ~obj用の規則に則って順に直列化した結果 ]を~spaceで区切って順に連結した結果とする。 ◎ CSSPositionValue objects are serialized by: • serializing the x attribute according to the rules for CSSNumericValue objects above. • serializing the y attribute according to the rules for CSSNumericValue objects above. • returning the concatenation of the two serializations (x before y), separated by a space.
6.7. `CSSURLImageValue^I の直列化
`CSSURLImageValue^I ~obj %O を直列化するときは、次を順に連結した結果を返す ⇒# `url("^l, %O の `url^m 値, `")^l ◎ CSSURLImageValue objects are serialized to the string given by 'url("' + url + '")'.
6.8. ~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.
7. ~securityの考慮点
これらの特色機能により導入される既知の~security課題は無い。 ◎ There are no known security issues introduced by these features.
8. ~privacyの考慮点
これらの特色機能により導入される既知の~privacy課題は無い。 ◎ There are no known privacy issues introduced by these features.