CSS Images Module Level 4

1.1. 値~定義

【 この節の内容は `~CSS日本語訳 共通~page＠~CSScommon#values$に移譲。 】

2.1. 画像~file形式

~propにおいて `image$t 値から参照される妥当な画像に対しては、 ~UAは，最低限，次の~file形式を~supportするモノトスル： ◎ At minimum, the UA must support the following image file formats when referenced from an <image> value, for all the properties in which using <image> is valid:

• `PNG$r により指定される，~PNG ◎ PNG, as specified in [PNG]
• `SVG11$r により指定される，`~secure静的~mode$を利用している~SVG （ `SVG-INTEGRATION$r を見よ） ◎ SVG, as specified in [SVG11], using the secure static mode (See [SVG-INTEGRATION])
• ~UAが~animate化 `image$t を~supportする場合、 `SVG11$r により指定される，`~secure~animate化~mode$を利用している~SVG （ `SVG-INTEGRATION$r を見よ） ◎ If the UA supports animated <image>s, SVG, as specified in [SVG11], using the secure animated mode (See [SVG-INTEGRATION])

~UAは、 他の~file形式を~supportしてもヨイ。 ◎ The UA may support other file formats as well.

2.2. 画像~参照： `url^f 記法

注記： `~level 3 と同じ＠~CSSIMAGE#url-notation$。 ◎ Note: No change from [css-images-3].

2.3. 外部~画像の~fetch法

2.4. 解像度／型の折衝： `image-set^f 記法

利用者の機器に最も適切な解像度の画像を送達することは、 困難な~~仕事にもなり得る。 理想的には、 画像~解像度は，［ 利用者~間で様々な，機器それぞれの解像度 ］と同じになるべきである。 しかしながら、 どの画像を送信するか裁定する要因になるものは，他にもあり得る — 例えば，低速な~mobile接続の下では、 利用者は，［ 解像度は適正でも，巨大になる画像 ］を読込むのを待つより，低-解像度な画像を受信する方を選好するかもしれない。 `image-set@f 関数は、 作者が［ これらの課題のほとんどを無視して、 単純に，ある画像に複数の解像度を供する ］ことにより［ 所与の状況で最も適切なものを~UAに裁定してもらう ］ことを許容する。 ◎ Delivering the most appropriate image resolution for a user’s device can be a difficult task. Ideally, images should be in the same resolution as the device they’re being viewed in, which can vary between users. However, other factors can factor into the decision of which image to send; for example, if the user is on a slow mobile connection, they may prefer to receive lower-res images rather than waiting for a large proper-res image to load. The image-set() function allows an author to ignore most of these issues, simply providing multiple resolutions of an image and letting the UA decide which is most appropriate in a given situation.

この解決策は、 解像度が~filesizeを代理するものと見做しているので，［ 複数の解像度からなる一連の~vector画像／ 一連の画像に~vectorと~rasterが混在しているとき（例：~icon） ］を適切に取扱わない。 例えば、［ 高-解像度 用には~vector画像, 低-解像度 用には画素に最適化された~bitmap, 低-帯域幅 用には同じ~vector画像（高-解像度であってもずっと小さいので） ］を利用する場合など。 ◎ This solution assumes that resolution is a proxy for filesize, and therefore doesn’t appropriately handle multi-resolution sets of vector images, or mixing vector images with raster ones (e.g. for icons). For example, use a vector for high-res, pixel-optimized bitmap for low-res, and same vector again for low-bandwidth (because it’s much smaller, even though it’s higher resolution).

`image-set$f の構文は： ◎ The syntax for image-set() is:

`image-set$ft
	= image-set( `image-set-option$t# )
`image-set-option@t
	= [ `image$t | `string$t ] [ `resolution$t || type(`string$t) ]?

~HTMLの `picture$e 要素の機能性に合致する可能性として、［ `w^u, `h^u ］次元を追加するべき。 ◎ We should add "w" and "h" dimensions as a possibility to match the functionality of HTML’s picture.

`image-set$f の内側にある各 `string$t は、 `url$t を表現する。 ◎ Each <string> inside image-set() represents a <url>.

`image-set$f 関数は、 直接的にも（他の `image$t 型の引数として）間接的にも，入子にできない。 ◎ The image-set() function can not be nested inside of itself, either directly or indirectly (as an argument to another <image> type).

各 `image-set-option$t は、 `image-set$f 関数が表現する画像としてアリなものを定義し，次に挙げる各部で構成される： ◎ Each <image-set-option> defines a possible image for the image-set() function to represent, composed of three parts:

画像~参照 （要求される） ◎ An image reference (required).＼

次のいずれかをとり得る ⇒＃ ~URL／ ~CSSから生成される画像 （ `linear-gradient$f など） ◎ This can be a URL, or a CSS generated image, such as a linear-gradient().

`resolution$t （省略可能） ◎ A <resolution> (optional).＼

これは、［ ~UAが，どの `image-set-option$t を選ぶか裁定する ］ことを助けるために利用される。 当の画像~参照が~raster画像~用ならば、 画像の`生来な解像度$も指定する — それは、 `生来な解像度$を給する他の~data~sourceがあっても，それを上書きする。 ◎ This is used to help the UA decide which <image-set-option> to choose. If the image reference is for a raster image, it also specifies the image’s natural resolution, overriding any other source of data that might supply a natural resolution.

指定されなかった場合、［ どの `image-set-option$t を利用するか選定する目的 ］においては， `1x^v として挙動する。 それはまた，画像の`生来な解像度$も`既定の^em `1x^v にするが、 他の何らかの~data~sourceが`生来な解像度$を給する場合，その解像度を尊守するモノトスル。 ◎ If not specified, it behaves as 1x for the purpose of selecting which <image-set-option> to use. It also defaults the image’s natural resolution to 1x, but if some other source of data supplies a natural resolution, that resolution must be honored instead.

type( `string$t ) 関数 （省略可能） ◎ A type( <string> ) function (optional),＼

`string$t 内に画像の~MIME型を指定する。 ◎ specifying the image’s MIME type in the <string>.

`string$t を`妥当な~MIME型$として構文解析した結果が［ 妥当でない／ ~supportされる画像~形式を指定しない ］場合、 `image-set-option$t は妥当な~optionを定義しない。 （これは、 `image-set$f 関数の妥当性には影響しない。） ◎ If the <string>, when parsed as a valid MIME type string, is either not valid, or is valid but doesn’t specify a supported image format, the <image-set-option> does not define a valid option. (This has no effect on the validity of the image-set() function.)

これには、 画像~自体に対する効果は無い。 `url("picture.png") 1x type("image/jpeg")^v の様な `image-set-option$t は妥当であり、 選ばれた場合 — ~JPEG形式として宣言されていようが — ~link先の~PNG画像を表示することになる。 ◎ It does not have any effect on the image itself; an <image-set-option> like url("picture.png") 1x type("image/jpeg") is valid, and if chosen will display the linked PNG image, even though it was declared to be a JPEG.

指定されなかった場合、 `image-set-option$t に対する効果は無い。 ◎ If not specified, it has no effect on the <image-set-option>.

~UAは、 ~pageの存続期間において［ 所与の `image-set$f 用に利用する `image-set-option$t ］を変更してもヨイ — どの `image-set-option^t を選ぶか決定するために利用した判定基準が， ~UAの見積もりにおいて変更に価する程に十分~変化したならば。 ◎ UAs may change which <image-set-option> they wish to use for a given image-set() over the lifetime of the page, if the criteria used to determine which option to choose change significantly enough to make it worthwhile in the UA’s estimation.

background-image: image-set(
    "foo.png" 1x,
    "foo-2x.png" 2x,
    "foo-print.png" 600dpi
);

background-image: image-set(
    "foo.avif" type("image/avif"),
    "foo.jpg" type("image/jpeg")
);

background-image: image-set(
    linear-gradient(cornflowerblue, white) 1x,
    url("detailed-gradient.png") 3x
);

2.5. 画像~fallbackと注釈： `image^f 記法

`image$f 関数により、 作者は次が可能になる： ◎ The image() function allows an author to:

• `媒体~素片$を利用して、 画像の一部分を切抜く。 ◎ use media fragments to clip out a portion of an image
• 単色を画像として利用する。 ◎ use a solid color as an image
• 指定された URL にある画像が［ ~downloadできない, または復号できない ］ときの，単色~画像への~fallbackを指定する。 ◎ fallback to a solid-color image, when the image at the specified url can’t be downloaded or decoded
• 画像の~metadataに指定されている画像の方位に，自動的に従うようにする。 ◎ automatically respect the image orientation specified in the image’s metadata

`image$f 記法は，次で定義される： ◎ The image() notation is defined as:

`image@f
	= image( `image-tags$t? [ `image-src$t? , `color$t? ]! )
`image-tags@t
	= ltr
	| rtl
`image-src@t
	= `url$t
	| `string$t

`image$f 内で利用される `string$t は、 `url$t を表現する。 CSS における通例の~URLと同じく、 `image$f 値に指定された相対~URLは，算出d値を得るときに （ “値と単位” 仕様 `CSS-VALUES-3$r に従って） 絶対~URLに解決される。 ◎ A <string> used in image() represents a <url>. As usual for URLs in CSS, relative URLs are resolved to an absolute URL (as described in Values & Units [CSS-VALUES-3]) when a specified image() value is computed.

EXIF などの画像の~metadata内に，方位が指定されている場合、 ~UAは，その~metadataの指定に従って［ 画像を回転させたり裏返して，正しく方位させる ］モノトスル。 ◎ If the image has an orientation specified in its metadata, such as EXIF, the UA must rotate or flip the image to correctly orient it as the metadata specifies.

body      { color: black; background: white; }
p.special { color: white; background: url("dark.png") black; }

body      { color: black; background: white; }
p.special { color: white; background: image("dark.png", black); }

background-image: image('sprites.svg#xywh=80,0,40,40')

background-image: url('swirl.png'); /* 旧~UA */
background-image: image('sprites.png#xywh=10,30,60,20'); /* 新~UA */

background-image: image(rgba(0,0,255,.5)), url("bg-image.png");

<ul style="list-style-image: image(ltr 'arrow.png');">
  <li dir='ltr'>左に~bulletがあります。</li>
  <li dir='rtl'>~bulletは右にあります。</li>
</ul>

☞ 左に~bulletがあります。
  。すまりあに右は~tellub ☜

2.6. 画像を組合せる： `cross-fade^f 記法

~CSSにより 2 個の画像~間の遷移を与えるためには、［ 開始-, 終止- ］画像を組合せた中間的な画像を明示的に指す仕方を要する。 `cross-fade$f 関数が、 これを達成する。 それは、 組合される 2 個の画像, および 組合nの遷移の進行度合いを指示する。 ◎ When transitioning between images, CSS requires a way to explicitly refer to the intermediate image that is a combination of the start and end images. This is accomplished with the cross-fade() function, which indicates the two images to be combined and how far along in the transition the combination is.

注記： 作者は、 `cross-fade$f 関数を，多くの単純な画像~操作にも利用できる — 画像を単色で淡く染めたり、 `放射型~gradient$と組合せて，~page内の特定0の区画を強調するなど。 ◎ Note: Authors can also use the cross-fade() function for many simple image manipulations, such as tinting an image with a solid color or highlighting a particular area of the page by combining an image with a radial gradient.

`cross-fade^f の構文は、 次で定義される： ◎ The syntax for cross-fade() is defined as:

`cross-fade@f
	= cross-fade( `cf-image$t# )
`cf-image@t
	= [ `image$t | `color$t ] && `percentage [0,100]$t?

この関数は、 1 個~以上の画像を組合せて生成される画像を表現する。 ◎ The function represents an image generated by combining one or more images.

各~画像の `percentage$t は、 その画像が他の画像と混色されたときの含有率を表現する。 `percentage$t 値は、 `0%^v 以上 `100%^v 以下でなければナラナイ — 他の値は無効とする。 ◎ The <percentage> represents how much of each image is retained when it is blended with the other images. The <percentage> must be between 0% and 100% inclusive; any other value is invalid.

百分率が省略された画像がある場合、 `100%^v から［ 他の画像に指定されたすべての百分率の総和 ］を減算してから `0%^v 以上に切り上げた結果が，算出d値の時点で［ 省略された百分率を伴うすべての画像 ］に等分にあてがわれる。 【`実際の~algo＠#cross-fade-painting$／下の注記と食い違う？】 ◎ If any percentages are omitted, all the specified percentages are summed together and subtracted from 100%, the result is floored at 0%, then divided equally between all images with omitted percentages at computed-value time.

`color$t が供された場合、 それは “自動的”な寸法を伴う単色~画像を表現する （それは、 結果の画像の~sizingにはまったく関与しない — 詳細は下の~sizingを見よ）。 ◎ If a <color> is provided, it represents a solid-color image with “automatic” dimensions (it doesn’t participate in the sizing of the result image at all; see details in the sizing details below).

2.7. 要素を画像として利用する： `element^f 記法

`element$f 関数により、 作者は，文書~内の要素を画像として利用することが可能になる。 参照先の要素の外観が変化するに伴い，画像も変化するようになる。 これを利用すれば，例えば、 ~slideshowにおける［ 次／前 ］の~slideの~live~previewを作成したり， ~fancyな~gradientを生成するために `canvas$e 要素を参照したり， 背景を~animate化することさえ可能になる。 ◎ The element() function allows an author to use an element in the document as an image. As the referenced element changes appearance, the image changes as well. This can be used, for example, to create live previews of the next/previous slide in a slideshow, or to reference a canvas element for a fancy generated gradient or even an animated background.

注記： `element$f 関数が再生産するのは、 参照先の要素の`外観^emに限られ，実際の内容やその構造を再生産することはない。 作者は、 装飾的な目的に限り，これを利用するべきである。 `element$f を，~pageにまたがる有意な内容を伴う要素を再生産するために利用してはナラナイ — 代わりに、 単に文書の中に要素の複数の複製を挿入すること。 ◎ Note: The element() function only reproduces the appearance of the referenced element, not the actual content and its structure. Authors should only use this for decorative purposes, and must not use element() to reproduce an element with significant content across the page. Instead, just insert multiple copies of the element into the document.

`element$f の構文は、 次で与えられる： ◎ The syntax for element() is:

`element@f
	= element( `id-selector$t )

ここで `id-selector$t は`~ID選択子$である。 `SELECT$r ◎ where <id-selector> is an ID selector [SELECT].

外部~文書~内の要素（~SVGの`塗り~server$など）を参照rできるようにする必要はあるか？ あるいは、 この用途には `url^f を利用するだけで十分か？ ◎ Do we need to be able to refer to elements in external documents (such as SVG paint servers)? Or is it enough to just use url() for this?

この名前は、 GCPM† のいくぶん類似な関数と競合する。 これはどうにかして解決される必要がある。 【† `CSS Generated Content for Paged Media Module^en（~page媒体~用の生成d内容）】 ◎ This name conflicts with a somewhat similar function in GCPM. This needs to be resolved somehow.

要素の “反映” を行う能が求まれる — 要素~上の背景~画像として, または疑似要素~内で。 循環の検出を誘発するのを避けるため、 これは特別に取扱われる必要がある。 ◎ Want the ability to do "reflections" of an element, either as a background-image on the element or in a pseudo-element. This needs to be specially-handled to avoid triggering the cycle-detection.

`overflow^p が `paged^v にされている~view内の単独の~pageにはどう取組むか？ ◎ When we have overflow:paged, how can we address a single page in the view?

`element$f 関数は、 その引数に与えた~IDに合致する要素を参照する。 ~IDは、 先ず `elementSources$m ~map内で検索される。 見出されなかった場合、 文書【内の要素】に対し照合される — 合致した要素が複数ある場合、 関数は，それらのうち最初の要素を参照する。 ◎ The element() function references the element matched by its argument. The ID is first looked up in the elementSources map, as described in that section. If it’s not found, it’s then matched against the document. If multiple elements are matched, the function references the first such element.

`element$f 関数により表現される画像は、 要素が文書~内で可視かどうかに基づいて変わり得る： ◎ The image represented by the element() function can vary based on whether the element is visible in the document:

要素は`描画され$ていて，`置換d要素$の子孫ではない, かつ`積層~文脈$を生成する場合： ◎ an element that is rendered, is not a descendant of a replaced element, and generates a stacking context

関数は、 `生来な~size$が参照先の要素の `装飾d限界~box@ に等しい画像を表現する： ◎ The function represents an image with its natural size equal to the decorated bounding box of the referenced element:

• ~CSS描画~modelを利用して描画される要素に対しては、 `装飾d限界~box$は，［ `首要~box$のすべての断片の`~border画像~区画$を包含する, かつ軸に~~平行 ］な最も小さい矩形になる。 ◎ for an element rendered using a CSS rendering model, the decorated bounding box is the smallest axis-aligned rectangle that contains the border image areas of all the fragments of the principal box
• ~SVG描画~modelを利用して描画される要素に対しては、 `装飾d限界~box$は， `~SVGにより定義されるそれ＠~SVGcoords#TermDecoratedBoundingBox$になる。 【！~TR/SVGTiny12/intro.html#TermDecoratedBoundingBox】 【大雑把に言えば，外形線の太さも含め，図形~全体を囲う最~小な矩形】 ◎ for an element rendered using the SVG rendering model, the decorated bounding box is defined by SVG

注記： 画像の限界域の外側にあるものは既定で切取られるので、 ~box影の様な`装飾d限界~box$の外側へ拡張する装飾は， 切取られることになる。 ◎ Note: Because images clip anything outside their bounds by default, this means that decorations that extend outside the decorated bounding box, like box shadows, may be clipped.

画像は、［ 広さ無限で`透明な黒$にされた~canvas ］上に［ 参照先の要素とその子孫 ］を描画して構築され （文書~内にあるときの~sizeと同じになる），［ `装飾d限界~box$の各~辺が画像の各~辺に接合される ］ように位置される。 ◎ The image is constructed by rendering the referenced element and its descendants (at the same size that they would be in the document) over an infinite transparent canvas, positioned so that the edges of the decorated bounding box are flush with the edges of the image.

実装を効率的にするためには、 要素には積層~文脈またはそれに準じるものが要求されるよう見受けられる。 全部的な積層~文脈は必要か？ あるいは疑似的な積層~文脈で済むか？ それは通常の積層~文脈になる必要はあるか？ あるいは `element^f に描画するときに積層~文脈として描画するだけで済むか？ ◎ Requiring some degree of stacking context on the element appears to be required for an efficient implementation. Do we need a full stacking context, or just a pseudo-stacking context? Should it need to be a stacking context normally, or can we just render it as a stacking context when rendering it to element()?

参照先の要素またはその先祖に変形-が適用されている場合、 要素を画像として描画するときには，変形-は無視するモノトスル。 `CSS3-TRANSFORMS$r ◎ If the referenced element has a transform applied to it or an ancestor, the transform must be ignored when rendering the element as an image. [CSS3-TRANSFORMS]

参照先の要素が何~pageかに分断されている場合、 要素は，~pageの内容~区画が~page割り方向に接合されていたかのように表示される — ~pageの各~辺は初期~包含塊の対応する始端~辺に整列された上で。 何~行lか／何~柱か に分断されている要素は、 単に`装飾d限界~box$と伴に描画される ◎ If the referenced element is broken across pages, the element is displayed as if the page content areas were joined flush in the pagination direction, with pages' edges corresponding to the initial containing block’s start edge aligned. Elements broken across lines or columns are just rendered with their decorated bounding box.

実装は、 参照先の要素~用に生成した既存の~bitmap~dataを再利用してもヨイ。 あるいは，要素の表示-を生成し直して、 当の~sizeにおける画像の品質を最大化してもヨイ （例えば、参照先の要素は~SVG素片であると検出された場合）。 生成し直す場合でも、 結果の画像における~layoutは参照先の要素から変化させないモノトスル。 すなわち，画像の見かけは、 ~raster化の品質の違いを除き，参照先の要素と一致させるモノトスル。 ◎ Implementations may either re-use existing bitmap data generated for the referenced element or regenerate the display of the element to maximize quality at the image’s size (for example, if the implementation detects that the referenced element is an SVG fragment); in the latter case, the layout of the referenced element in the image must not be changed by the regeneration process. That is, the image must look identical to the referenced element, modulo rasterization quality.

`p$e 要素を文書~内の他所で背景として再利用する例： ◎ As a somewhat silly example, a p element can be reused as a background elsewhere in the document:

`efunc1^dgm

`efunc2^dgm

要素は`描画され$ないが、 `塗り~source$を供する場合： ◎ an element that is not rendered, but which provides a paint source

関数は、 `塗り~source$の［ `生来な寸法$, 【内在的な】外観 ］を伴う画像を表現する — ~sizeと外観は、 ~host言語により定義される。 ◎ The function represents an image with the natural dimensions and appearance of the paint source. The host language defines the size and appearance of paint sources.

例えば， `element$f 関数は、 ~HTML文書~内の ~SVG `pattern$e 要素を参照できる： ◎ For example, the element() function can reference an SVG <pattern> element in an HTML document:

<!DOCTYPE html>
<svg>
  <defs>
    <pattern id='pattern1'>
      <path d='...'>
    </pattern>
  </defs>
</svg>
<p style="background: element(#pattern1)">

ここでは~patternを背景に利用しています。
~patternが変化したり~animateされた場合、
背景も更新されることになります。
◎
I’m using the pattern as a background! If the pattern is changed or animated, my background will be updated too!

</p>

~HTMLは、 塗り~sourceを供する数種の要素 — ［ `canvas$e, `img$e, `video$e ］など — を定義する。 ~page内には表示されてないが、 中に何か描かれている `canvas$e を，~CSSから参照できることを意味する： ◎ HTML also defines that a handful of elements, such as canvas, img, and video, provide a paint source. This means that CSS can, for example, reference a canvas that’s being drawn into, but not displayed in the page:

<!DOCTYPE html>
<script>
  var %canvas = document.querySelector('#animated-bullet');
  %canvas.width = 20; canvas.height = 20;
  drawAnimation(%canvas);
</script>
<canvas id='animated-bullet' style='display:none'></canvas>
<ul style="list-style-image: element(#animated-bullet);">
  <li>
ここでは `canvas$e を~bulletに利用しています。
◎
I’m using the canvas as a bullet!
</li>
  <li>
ここでも。
◎
So am I!
</li>
  <li>
`canvas$e が~JSで変更される度に，すべての~bullet画像も更新されます。
◎
As the canvas is changed over time with Javascript, we’ll all update our bullet image with it!
</li>
</ul>

その他の場合： ◎ anything else

関数は`無効な画像$を表現する。 ◎ The function represents an invalid image.

例えば，次に挙げる `element$f の利用は、 どれも透明な背景になる： ◎ For example, all of the following element() uses will result in a transparent background:

<!DOCTYPE html>
<p id='one' style="display:none; position: relative;">one</p>
<iframe src="http://example.com">
  <p id='two' style="position: relative;">
~fallback内容
◎
I’m fallback content!
</p>
</iframe>
<ul>
  <li style="background: element(#one);">

要素 `p id='one'^e は、
`display^p が `none^v にされていて`描画され$ないので，塗り~sourceを供さない。
◎
A display:none element isn’t rendered, and a P element doesn’t provide a paint source.

  </li>
  <li style="background: element(#two);">

`element^f には `iframe$e の様な`置換d要素$の子孫は利用できない。
◎
The descendants of a replaced element like an IFRAME can’t be used in element() either.

  </li>
  <li style="background: element(#three);">

`id^a "`three^v" の要素はないので、
この背景も透明になる。
◎
There’s no element with an id of "three", so this also gets rendered as a transparent image.

  </li>
</ul>

結付けられた~boxがない要素は、 `描画され@ ないとされる。 これは、例えば［ 要素またはその ある先祖にて， `display^p が `none^v にされている場合 ］などに起こり得る。 ~host言語は、 要素が描画されないと見なされ得る追加的な仕方を定義してもヨイ — 例えば，~SVGにおいては、 `defs$e 要素のどの子孫も，描画されないものと見なされる。 ◎ An element is not rendered if it does not have an associated box. This can happen, for example, if the element or an ancestor is display:none. Host languages may define additional ways in which an element can be considered not rendered; for example, in SVG, any descendant of a <defs> element is considered to be not rendered.

<!DOCTYPE html>
<script>
function navigateSlides() {
  var %currentSlide = ...;
  document.querySelector('#prev-slide').id = '';
  document.querySelector('#next-slide').id = '';
  %currentSlide.previousElementSibling.id = 'prev-slide';
  %currentSlide.nextElementSibling.id = 'next-slide';
}
</script>
<style>
.slide {
  /* 
`element^f 可能になるためには、
積層~文脈にする必要がある。
◎
Need to be a stacking context to be element()-able.
 */
  position: relative;
}
#prev-preview, #next-preview {
  position: fixed;
  ...
}
#prev-preview { background: element(#prev-slide); }
#next-preview { background: element(#next-slide); }
</style>
<a id='prev-preview'>前の~slide</a>
<a id='next-preview'>次の~slide</a>
<section class='slide'>...</section>
<section class='slide current-slide'>...</section>
...

partial namespace `CSS$I {
  [`SameObject$] readonly attribute `any$ `elementSources@m;
};

<script>
var %bg = document.createElement('canvas');
%bg.height = 200;
%bg.width = 1000;
drawFancyBackground(%bg);
CSS.elementSources.set('fancy', %bg);
</script>
<style>
h1 {
  background-image: element(#fancy);
}
</style>

3.1. 線型~gradient： `linear-gradient^f 記法

この~level 4 は、［ `linear-gradient$f, `repeating-linear-gradient$f ］に `color-interpolation-method$t 引数を追加する。 それは、 `~gradient線$上の色を補間するときに利用する色~空間と~path†を指示する — `CSS-COLOR-4$r `§ 色~補間＠~CSSCOLOR#interpolation$ を見よ。 ◎ This level adds a <color-interpolation-method> argument to linear-gradient() and repeating-linear-gradient(), indicating the color space and path to use when interpolating colors on the gradient line. See CSS Color 4 § 12. Color Interpolation.

【† 言い換えれば、 空間を［ `極-座標＠~CSSCOLOR#cylindrical-polar-color$, `直交-座標＠~CSSCOLOR#rectangular-orthogonal-color$ ］どちらにするか。 極-座標の場合（色相を補間する場合）、 ~pathは曲線になる（曲線に沿って補間することになる）。 】

`linear-gradient-syntax@t
	= [ [ `angle$t | `to^v `side-or-corner$t || `color-interpolation-method$t ]?, `color-stop-list$t

3.2. 放射型~gradient： `radial-gradient^f 記法

`radial-gradient-syntax@t
	= [ [ [ `radial-shape$t || `radial-size$t ]? [ at `position$t ]? ] || `color-interpolation-method$t]? , `color-stop-list$t

`radial-size$t
	= `radial-extent$t{1,2}
	| `length-percentage[0,∞]$t{1,2}

3.3. 円錐型~gradient： `conic-gradient^f 記法

円錐型~gradientは、 放射型~gradientと類似に 真円の中心を指定するが、 その色停は，［ 中心から湧出る線ではなく，`真円の周^em ］に沿って配置される — 色は、 中心から外方へは進捗せず，中心の周りを回るに伴い滑らかに遷移する。 ◎ A conic gradient starts by specifying the center of a circle, similar to radial gradients, except that conic gradient color-stops are placed around the circumference of the circle, rather than on a line emerging from the center, causing the color to smoothly transition as you spin around the center, rather than as you progress outward from the center.

円錐型~gradientを指定するためには、［ 回転~角度, ~gradientの中心 ］を指示した上で，色停たちが成す~listを指定する。 円錐型~gradientの各~色停は `angle$t で指定される — `length$t 指定して配置する［ 線型／放射型 ］~gradientと違って。 射線は，中心からすべての方向へ湧出るように描かれ、 各~射線の色は，それが~gradient線に交差する所の色に等しくなる。 ◎ A conic gradient is specified by indicating a rotation angle, the center of the gradient, and then specifying a list of color-stops. Unlike linear and radial gradients, whose color-stops are placed by specifying a <length>, the color-stops of a conic gradient are specified with an <angle>. Rays are then drawn emerging from the center and pointing in all directions, with the color of each ray equal to the color of the gradient-line where they intersect it.

注記： これらの~gradientが “円錐型” （ “`conic^en” あるいは “`conical^en” ）と呼ばれるわけは、 それが生産する~patternが — 一方の色停を他方のそれより有意に明るくしたときには — 円錐を上から眺めた様な見かけになるからである。 それは，射線の回転~角度を変えることで生産されるので、 一部の文脈においては “角度” ~gradientとも称されている。 ◎ Note: These gradients are called "conic" or "conical" because, if the color stops are chosen to be significantly lighter on one side than the other, it produces a pattern that looks like a cone observed from above. They are also known as "angle" gradients in some contexts, since they are produced by varying the rotation angle of a ray.

`conic-gradient@f
	= conic-gradient( [ `conic-gradient-syntax$t ] )
`conic-gradient-syntax@t
	= [ [ [ from `angle$t ]? [ at `position$t ]? ] || `color-interpolation-method$t ]?, `angular-color-stop-list$t

background: conic-gradient(#f06, gold);
background: conic-gradient(at 50% 50%, #f06, gold);
background: conic-gradient(from 0deg, #f06, gold);
background: conic-gradient(from 0deg at center, #f06, gold);
background: conic-gradient(#f06 0%, gold 100%);
background: conic-gradient(#f06 0deg, gold 1turn);

background: conic-gradient(white -50%, black 150%);
background: conic-gradient(white -180deg, black 540deg);
background: conic-gradient(hsl(0,0%,75%), hsl(0,0%,25%));

background: conic-gradient(from 45deg, white, black, white);
background: conic-gradient(hsl(0,0%,75%), white 45deg, black 225deg, hsl(0,0%,75%));

background: conic-gradient(white 45deg, black 225deg, white 405deg);

background: radial-gradient(closest-side, gray, transparent),
            conic-gradient(red, magenta, blue, aqua, lime, yellow, red);
border-radius: 50%;
width: 200px; height: 200px;

background: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);
border-radius: 50%;
width: 200px; height: 200px;

3.4. ~gradientの繰返ng： `repeating-linear-gradient^f, `repeating-radial-gradient^f, `repeating-conic-gradient^f 記法

［ `linear-gradient$f ／ `radial-gradient$f ／ `conic-gradient$f ］に加えて，この仕様は［ `repeating-linear-gradient@f ／ `repeating-radial-gradient@f ／ `repeating-conic-gradient@f ］値を定義する。 これらの記法が引数にとり得る値は、 これまでに定義した各自に対応する繰返ngなしの記法と同じであり，同じに解釈される。 【が、その効果は繰返される — ~level 3 の`繰返ng~gradient$を見よ。】 ◎ In addition to linear-gradient(), radial-gradient(), and conic-gradient(), this specification defines repeating-linear-gradient(), repeating-radial-gradient(), and repeating-conic-gradient() values. These notations take the same values and are interpreted the same as their respective non-repeating siblings defined previously.

`repeating-conic-gradient()$t
	= repeating-conic-gradient( [ `conic-gradient-syntax$t ] )
`repeating-linear-gradient()$t
	= repeating-linear-gradient( [ `linear-gradient-syntax$t ] )
`repeating-radial-gradient()$t
	= repeating-radial-gradient( [ `radial-gradient-syntax$t ] )

background: repeating-conic-gradient(gold, #f06 20deg);

background: repeating-conic-gradient(
    hsla(0,0%,100%,.2) 0deg 15deg,
    hsla(0,0%,100%,0) 0deg 30deg
) #0ac;

background: repeating-conic-gradient(black 0deg 25%, white 0deg 50%);
background-size: 60px 60px;

background: conic-gradient(black 25%, white 0deg 50%, black 0deg 75%, white 0deg);
background-size: 60px 60px;

3.5. ~gradient色の定義-法

【 この節の内容の和訳は、 `~level 3 の内容＠~CSSIMAGE#gradient-colors$からの差分のみを与える （この節に定義される［ `色停@ ／ `遷移~hint@ ／ `色停~list@ ］は、 ~level 3 による定義に一致する）。 】

`color-stop-list@t
	= `linear-color-stop$t , [ `linear-color-hint$t? , `linear-color-stop$t ]#
`linear-color-stop@t
	= `color$t `color-stop-length$t?
`linear-color-hint@t
	= `length-percentage$t
`color-stop-length@t
	= `length-percentage$t{1,2}

`angular-color-stop-list@t
	= `angular-color-stop$t , [ `angular-color-hint$t? , ]? `angular-color-stop$t ]#
`angular-color-stop@t
	= `color$t `color-stop-angle$t?
`angular-color-hint@t
	= `angle-percentage$t
`color-stop-angle@t
	= `angle-percentage$t{1,2}

`color-stop@t
	= `color-stop-length$t
	| `color-stop-angle$t

background: linear-gradient(to right, red 0%, blue 100%);

background: linear-gradient(to right, red 0%, 25%, blue 100%);

5.1. ~objの~sizing： `object-fit^p ~prop

`object-fit$p ~propは、 置換d要素の内容が，その使用［ 横幅, 縦幅 ］により確立される~boxに，どう収めるべきかを指定する。 ◎ The object-fit property specifies how the contents of a replaced element should be fitted to the box established by its used height and width.

【 以下、 `~level 3 の内容＠~CSSIMAGE#the-object-fit$ と同じ部分 — “L3” と記されている箇所 — の和訳は省略する。 】

`fill@v

L3 ◎ The replaced content is sized to fill the element’s content box: the object’s concrete object size is the element’s used width and height.

`none@v

L3 ◎ The replaced content is not resized to fit inside the element’s content box: determine the object’s concrete object size using the default sizing algorithm with no specified size, and a default object size equal to the replaced element’s used width and height.

`contain@v

L3 ◎ The replaced content is sized to maintain its aspect ratio while fitting within the element’s content box: its concrete object size is resolved as a contain constraint against the element’s used width and height.

`scale-down$v も併用された場合、 内容は［ `none$v, `contain$v ］のうち，`具象-~obj~size$が小さくなる方が指定されたかのように~sizeされる。 ◎ If the scale-down flag is used, size the content as if none or contain were specified, whichever would result in a smaller concrete object size.

注記： `none$v も `contain$v も内容の`生来な縦横比$を保つので、 大きさは比較可能になる。 ◎ Note: Both none and contain respect the content’s natural aspect ratio, so the concept of "smaller" is well-defined.

`cover@v

L3 ◎ The replaced content is sized to maintain its aspect ratio while filling the element’s entire content box: its concrete object size is resolved as a cover constraint against the element’s used width and height.

`scale-down$v も併用された場合、 内容は［ `none$v, `cover$v ］のうち，`具象-~obj~size$が小さくなる方が指定されたかのように~sizeされる。 ◎ If the scale-down flag is used, size the content as if none or cover were specified, whichever would result in a smaller concrete object size.

注記： `none$v も `cover$v も内容の`生来な縦横比$を保つので、 大きさは比較可能になる。 ◎ Note: Both none and cover respect the content’s natural aspect ratio, so the concept of "smaller" is well-defined.

`scale-down@v

`contain scale-down^v と等価。 ◎ Equivalent to contain scale-down.

L3 ◎ If the content does not completely fill the replaced element’s content box, the unfilled space shows the replaced element’s background. Since replaced elements always clip their contents to the content box, the content will never overflow. See the object-position property for positioning the object with respect to the content box.

注記： L3 ◎ Note: The object-fit property has similar semantics to the fit attribute in [SMIL10] and the <meetOrSlice> parameter on the preserveAspectRatio attribute in [SVG11].

注記： L3 ◎ Note: Per the object size negotiation algorithm, the concrete object size (or, in this case, the size of the content) does not directly scale the object itself - it is merely passed to the object as information about the size of the visible canvas. How to then draw into that size is up to the image format. In particular, raster images always scale to the given size, while SVG uses the given size as the size of the "SVG Viewport" (a term defined by SVG) and then uses the values of several attributes on the root <svg> element to determine how to draw itself.

6.1. 画像~解像度の上書き法： `image-resolution^p ~prop

`画像~解像度@ は、 単位~長さあたりの画像~画素~数として定義される （例：~inchあたりの画素~数）。 画像~形式には、 画像の解像度についての情報を記録するものもある。 この情報は、 整形~処理nにあたって画像の実際の~sizeを決定する補助になり得る — しかしながら、 誤ったものにもなり得るので，その場合には無視されるべきである。 ~CSSの既定では，［ 解像度は、 ~CSS `px$u 単位が 1 画像~画素に等しい ］ものと見做されるが、 `image-resolution$p ~propは，他の何らかの解像度を利用することを許容する。 ◎ The image resolution is defined as the number of image pixels per unit length, e.g., pixels per inch. Some image formats can record information about the resolution of images. This information can be helpful when determining the actual size of the image in the formatting process. However, the information can also be wrong, in which case it should be ignored. By default, CSS assumes a resolution of one image pixel per CSS px unit; however, the image-resolution property allows using some other resolution.

`image-set$f 記法は、 画像の`生来な解像度$を改め得る — それは、 この~propを設定しなくても，自動的に尊守されるのが理想的だが【？】。 これをどう~~解決すべきか？ 初期~値を、 “~CSSが他を~~指示しない限り `1dppx^v とする” を意味する `auto^v に変えるか？ `image-resolution^p は、 解像度が~CSSにおける他の何かで設定された画像には効果がないようにするか？ あるいは、 `image-set$f を，それが常に何らかの方法で `1dppx^v 画像を生産するように，どうにか `wordsmith^en するか？ ◎ The image-set() notation can alter the natural resolution of an image, which ideally would be automatically honored without having to set this property. How should we best address this? Change the initial value to auto, meaning "1dppx, unless CSS says otherwise"? Say that image-resolution has no effect on images whose resolution was set by something else in CSS? Or somehow wordsmithing image-set() in some way such that it always produces 1dppx images somehow?

`image-resolution$p ~propは、［［ 要素~内／要素~上 ］で利用されるすべての~raster画像 ］の`選好d解像度$を指定する。 それは、 内容~画像（例： `置換d要素$や`生成d内容$）にも, 装飾的な画像（ `background-image$p など）にも影響する。 画像の `選好d解像度@ は、 画像の`生来な寸法$を決定するために利用される。 natural resolution 各種 値の意味は： ◎ The image-resolution property specifies the preferred resolution of all raster images used in or on the element. It affects both content images (e.g. replaced elements and generated content) and decorative images (such as background-image). The preferred resolution of an image is used to determine the image’s natural dimensions. Values have the following meanings:

`resolution$t

`選好d解像度$を数値的に指定する。 この場合の 1 “~dot” は， 1 画像~画素に対応する。 ◎ Specifies the preferred resolution explicitly. A "dot" in this case corresponds to a single image pixel.

【 すなわち、［ `CSS-VALUES-3$r による `resolution＠~CSSVAL#resolution$t の定義 ］に記されている “~dot” は 1 画像~画素と解釈される。 】

`from-image@v

画像の`選好d解像度$は、 画像~形式から指定される（ `生来な解像度@ ）。 画像が自前の解像度を指定していない場合、 `resolution$t が明示的に指定されていれば，それが利用され、 他の場合は既定の `1dppx^v になる。 ◎ The image’s preferred resolution is taken as that specified by the image format (the natural resolution). If the image does not specify its own resolution, the explicitly specified resolution is used (if given), else it defaults to 1dppx.

注記： どの~metadataを利用できるかに対しては、 ある制約が課される — ~level 3 の `§ 画像~metadata＠~CSSIMAGE#url-metadata$を見よ。 ◎ Note: CSS Images 3 § 2.1.2 Image Metadata imposes some restrictions on what metadata can be used.

`snap@v

この~keywordが伴われている `resolution$t は、 1 画像~画素が機器~画素の整数~倍に対応するような，最も近い値に丸めた結果に算出される。 解像度が画像からとられる【 `from-image$v が供されている】場合、 `生来な解像度$の使用~値は，画像の~nativeな解像度を同様に調整した結果になる。 ◎ If the "snap" keyword is provided, the computed <resolution> (if any) is the specified resolution rounded to the nearest value that would map one image pixel to an integer number of device pixels. If the resolution is taken from the image, then the used natural resolution is the image’s native resolution similarly adjusted.

SVG などの~vector形式には、 `生来な解像度$は無い。 この~propは、 ~vector画像には効果がない。 ◎ As vector formats such as SVG do not have a natural resolution, this property has no effect on vector images.

img.high-res {
  image-resolution: 300dpi;
}

img { image-resolution: from-image }

img { image-resolution: from-image 300dpi }
img { image-resolution: 300dpi from-image }

img { image-resolution: 300dpi }

img { image-resolution: 300dpi snap; }

img { image-resolution: snap from-image; }

7.1. `image$t の補間-法

すべての画像は補間できる — 一部の特殊な型の画像（~gradientなど）は、 特別な補間~規則を備えるが。 一般~語で述べるなら、 画像は、［ %開始-画像 の~sizeに拡縮した所から始まり， %終止-画像 の~sizeへ遷移する間に 2 つを~cross-fadeする ］ことにより，補間される。 ◎ All images can be interpolated, though some special types of images (like some gradients) have their own special interpolation rules. In general terms, images are interpolated by scaling them to the size of the start image and cross-fading the two while they transition to the size of the end image.

より詳しく述べるなら、 補間における各~時点にて，画像は cross-fade( ( 100% ~MINUS %t ) %開始-画像, %終止-画像 ) に等しくされる。 ◎ In specific terms, at each point in the interpolation the image is equal to cross-fade( (100% - t) start image, end image).

画像~無しから, あるいは画像~無しへ遷移するような，特殊な事例の補間-法 — `background-image^p: `url(foo)^v; から `background-image^p: `none^v; へ のような。 ◎ Special-case interpolating to/from no image, like "background-image: url(foo);" to "background-image: none;".

7.2. `cross-fade$f の補間-法

`cross-fade$f を成す 3 成分は独立に補間される。 これは、 入子な `cross-fade$f 記法にもなり得ることに注意。 ◎ The three components of cross-fade() are interpolated independently. Note this may result in nested cross-fade() notations.

7.3. `gradient$t の補間-法

この節は考査と改善を要する。 特に、 `linear-gradient^f の取扱いは不完全であろう — ~gradient線が［ 開始する位置から終止する位置までの “長さ” （ 0% から 100% までの距離） ］が同じ~animationを通じて増減しないように， 数値的に特に補間すべきと見られる。 ◎ This section needs review and improvement. In particular, I believe the handling of linear-gradient() is incomplete - I think we want to specifically interpolate the "length" of the gradient line (the distance between 0% and 100%) between the starting and ending positions explicitly, so it doesn’t grow and then shrink over a single animation.

~gradient画像は、 ~gradientから別の~gradientへ滑らかに~animateするよう［ ~CSS遷移／~CSS~animation ］において直に補間し得る。 ただし、 ~gradientの補間が許容されるためには，次に挙げる制約がある： ◎ Gradient images can be interpolated directly in CSS transitions and animations, smoothly animating from one gradient to another. There are only a few restrictions on what gradients are allowed to be interpolated:

• ［ 開始ng, 終止ng ］~gradientを与える関数の型は，同じでなければナラナイ。 （例えば、 `linear-gradient$f からは、 `linear-gradient$f へは遷移できるが，［ `radial-gradient$f ／ `repeating-linear-gradient$f ］へは遷移できない） ◎ Both the starting and ending gradient must be expressed with the same function. (For example, you can transition from a linear-gradient() to a linear-gradient(), but not from a linear-gradient() to a radial-gradient() or a repeating-linear-gradient().)
• ［ 開始ng, 終止ng ］~gradientの `color-stop$t は同数でなければナラナイ。 この目的においては、 すべての繰返ng~gradientには 無限~個の`色停$があり，互いに同数あると見なされる。 ◎ Both the starting and ending gradient must have the same number of <color-stop>s. For this purpose, all repeating gradients are considered to have infinite color stops, and thus all repeating gradients match in this respect.
• 両~gradientとも， `length$t, `percentage$t による`色停$を組合せて利用していない。 ◎ Neither gradient uses a combination of <length> and <percentage> color stops.

2 個の~gradientが，上述の 3 つの拘束すべてを満たすならば、 以下に述べるように補間するモノトスル。 3 つ目の拘束だけ満たさない場合、 50% の所で一足飛びに遷移するモノトスル （将来の仕様により他が指定されない限り）。 他の場合、 汎用 `image$t に対するときと同じく， `cross-fade$f を利用して補間するモノトスル。 ◎ If the two gradients satisfy all of those constraints, they must be interpolated as described below. If they fail the third one only, they must be abruptly transitioned at 50% (unless otherwise specified by a future specification). If they fail either of the first two constraints, they must be interpolated using cross-fade() as for generic images.

注記： 50% の所で一足飛びに遷移させるのは、 内容が~cross-fadeに依拠しないようにして，将来に［ この事例~用に，もっと賢い補間~規則を追加できるようにする ］ためである。 ◎ Note: The abrupt transition at 50% is so that content will not rely on cross-fading, and smarter interpolation rules can be added for this case in the future.

1. ［ 開始ng, 終止ng ］~gradientを成す各~成分を数値的な形に変換する： ◎ Convert both the start and end gradients to their explicit forms:

   `線型~gradient$に対しては 【成分は方向のみ】： ◎ For linear gradients:

   `angle$t として指定されている場合 ⇒ すでに数値的な形である。 ◎ If the direction is specified as an <angle>, it is already in its explicit form.

   他の場合【すなわち，~keyword】： ◎ Otherwise,＼

   1. 等価な描画を生産する［ 0 度 以上, 360 度 未満 ］の `angle$t に変換する。 ◎ change its direction to an <angle> in [0deg,360deg) that would produce an equivalent rendering.

   2. ［［ 開始ng, 終止ng ］~gradientの いずれの方向も~keywordで指定されていて ］かつ［ 前~段で数値化した 2 個の角度の差の絶対値 ~GT 180 度 ］の場合、 小さい方の角度に 360 度を加算する。 ◎ If both the start and end gradients had their direction specified with keywords, and the absolute difference between the angles their directions mapped to is greater than 180deg, add 360deg to the direction of the gradient with the smaller angle.＼

      注記： これにより、 例えば，［ `to left^v （ 270 度）から `to top^v （ 0 度）への遷移 ］は、 期待されるとおり， ~gradientを（反~時計回りに 3/4 回転ではなく，）時計回りに 1/4 回転させる。 ◎ This ensures that a transition from, for example, "to left" (270deg) to "to top" (0deg) rotates the gradient a quarter-turn clockwise, as expected, rather than rotating three-quarters of a turn counter-clockwise.

   `放射型~gradient$に対しては： ◎ For radial gradients:

   【`終形$の】~sizeが［ 2 個の `length$t または 2 個の `percentage$t ］として指定されている場合 ⇒ すでに数値的であり，変換は必要ない。 ◎ If the size is specified as two <length>s or <percentage>s, it is already in its explicit form.

   他の場合、 次に従うモノトスル： ◎ Otherwise,＼

   • 2 個の~sizeを［ 等価な`終形$を生産するような 2 個の `length$t が成す~pair ］に~~変換する。 ◎ the size must be changed to a pair of <length>s that would produce an equivalent ending-shape.＼
   • `radial-shape$t【！rg-ending-shape】 に `circle$v が指定されている場合、 それを `ellipse$v に変更する。 ◎ If the <rg-ending-shape> was specified as circle, change it to ellipse.

   【 ~gradientの`中心$（ `position$t ）も~keywordにより指定され得るが、 言及されていない — それらも同様に数値化すると思われる。 】

2. ~gradientを成す各［ 成分, 色停 ］を独立に補間する： ◎ Interpolate each component and color-stop of the gradients independently.＼

   • `線型~gradient$に対しては、 成分は角度のみになる。 ◎ For linear gradients, the only component is the angle.＼
   • `放射型~gradient$に対しては、 成分は［ 中心の［ 横, 縦 ］位置 ］, および［ 【終形の】 ［ 横, 縦 ］方向の長さ ］からなる。 ◎ For radial gradients, the components are the horizontal and vertical position of the center and the horizontal and vertical axis lengths.

3. `色停$を補間する： ◎ To interpolate a color-stop,＼

   1. ［ 開始ng, 終止ng ］~gradientの，各 色停を互いに対応~付ける：

      • 各~色停に，指定された順により ~indexを付与する。
      • 繰返ng~gradientに対しては、［ 後続する／先行する ］他のすべての色停には，色停~listを繰返しながら，適切にズラした~indexを付与する。
      • 各~gradientの同じ~indexの色停が互いに対応する。
      ◎ first match each color-stop in the start gradient to the corresponding color-stop at the same index in the end gradient. For repeating gradients, the first specified color-stop in the start and end gradients are considered to be at the same index, and all other color-stops following and preceding are indexed appropriately, repeating and shifting each gradient’s list of color-stops as needed.＼
   2. 各 対応する色停~pairに対し，その［ 位置, 色 ］を独立に補間する。 ◎ Then, for each pair of color-stops, interpolate the position and color independently.

7.4. `stripes$f の補間-法

2 個の `stripes$f は、 ~gradientと類似に補間でき， 一方の画像から他方へ滑らかな~animationを許容する。 ただし、 `stripes$f どうしの補間が許容されるためには，次に挙げる少数の制約がある： ◎ Similar to gradients, two stripes() can be interpolated, allowing for smooth animations from one image to another. There are only a few restrictions on what stripes() are allowed to be interpolated:

• 引数【！Both the starting and ending image】を成す `color-stripe$t の個数は互いに同じでなければナラナイ。 ◎ Both the starting and ending image must have the same number of <color-stripe>s.
• 対応する `color-stripe$t を成す太さの型は互いに同じ — すなわち，［ どちらも `length-percentage$t ／ どちらも `flex$t ］ — でなければナラナイ。 ◎ Each pair of interpolated thicknesses must be of the same type, i.e. both must either be of type <length-percentage>, or <flex>.

両~画像が： ◎ ↓

• 上の拘束をいずれも満たす場合、 以下に述べるとおりに補間するモノトスル。 ◎ If the two images satisfy both constraints, they must be interpolated as described below.＼
• 1 個目の拘束しか満たさない場合、 50% の所で一足飛びに遷移するモノトスル （将来の仕様により他が指定されない限り）。 ◎ If they fail the second one only, they must be abruptly transitioned at 50% (unless otherwise specified by a future specification).＼
• 他の場合、 汎用な画像~用の `cross-fade$f を利用して補間するモノトスル ◎ If they fail the first constraint, they must be interpolated using cross-fade() as for generic images.

注記： 50% の所で一足飛びに遷移させるのは、 内容が~cross-fadeに依拠しないようにして，将来に［ この事例~用に，もっと賢い補間~規則を追加できるようにする ］ためである。 ◎ Note: The abrupt transition at 50% is so that content will not rely on cross-fading, and smarter interpolation rules can be added for this case in the future.

1. 画像を成す各~縞（ `color-stripe$t ）【！component and stripe】は、 独立に補間する。 ◎ Interpolate each component and stripe of the images independently.

2. 縞を補間するときは、［ 開始~画像, 終了~画像 ］内の同じ~indexにある各~縞~pairに対し，その［ 太さ, 色 ］を独立に補間する。

   【 太さは `length^t 値の`補間-法＠~CSSVAL#combine-dimensions$, 色は`色の補間-法＠~CSSCOLOR#interpolation$ に従うことになろう。 】

   ◎ To interpolate a stripe, first match each stripe in the start image to the corresponding stripe at the same index in the end image. Then, for each pair of stripes, interpolate the thickness and color independently.