HTML — Web application API

8.1. ~scripting

【 この節の和訳は、 `別~page＠~WAPI#scripting$にて。 】

8.2. `WindowOrWorkerGlobalScope^I ~mixin

`WindowOrWorkerGlobalScope$I ~mixinは、 `Window$I, `WorkerGlobalScope$I 両~obj上に公開されることになる~APIの利用~用にある。 ◎ The WindowOrWorkerGlobalScope mixin is for use of APIs that are to be exposed on Window and WorkerGlobalScope objects.

注記： 他の標準は、 更に拡張するときは， partial interface mixin `WindowOrWorkerGlobalScope$I { … }; を適切な参照-とともに利用することが奨励される。 ◎ Other standards are encouraged to further extend it using partial interface mixin WindowOrWorkerGlobalScope { … }; along with an appropriate reference.

typedef (DOMString or `Function$I) `TimerHandler@I;

interface mixin `WindowOrWorkerGlobalScope@I {
  [Replaceable] readonly attribute USVString `origin$m;
  readonly attribute boolean `isSecureContext$m;
  readonly attribute boolean `crossOriginIsolated$m;

  undefined `reportError$m(any %e);

  // base64 utility methods
  DOMString `btoa$m(DOMString %data);
  ByteString `atob$m(DOMString %data);

  // timers
  long `setTimeout$m(
      `TimerHandler$I %handler,
      optional long %timeout = 0,
      any... %arguments
  );
  undefined `clearTimeout$m(optional long %id = 0);
  long `setInterval$m(
      `TimerHandler$I %handler,
      optional long %timeout = 0,
      any... %arguments
  );
  undefined `clearInterval$m(optional long %id = 0);

  // microtask queuing
  undefined `queueMicrotask$m(`VoidFunction$I %callback);

  // ImageBitmap
  `Promise$<`ImageBitmap$I> `createImageBitmap$m(
      `ImageBitmapSource$I %image,
      optional `ImageBitmapOptions$I %options = {}
  );
  `Promise$<`ImageBitmap$I> `createImageBitmap$m(
      `ImageBitmapSource$I %image,
      long %sx, long %sy, long %sw, long %sh,
      optional `ImageBitmapOptions$I %options = {}
  );
  // structured cloning
  any `structuredClone$m(any %value, optional `StructuredSerializeOptions$I %options = {});
};
`Window$I includes `WindowOrWorkerGlobalScope$I;
`WorkerGlobalScope$I includes `WindowOrWorkerGlobalScope$I;

self.`isSecureContext$m

この大域~objは`~secureな文脈$enVを表現するかどうかを返す。 `SECURE-CONTEXTS$r ◎ Returns whether or not this global object represents a secure context. [SECURE-CONTEXTS]

%origin = self.`origin$m

この大域~objの`生成元$を文字列に直列化した結果を返す。 ◎ Returns the global object's origin, serialized as string.

%origin = self.`crossOriginIsolated$m

この大域~obj内で走っている~scriptには、 非同一-生成元~隔離を要求する~APIを利用することは，許容されるかどうかを返す。 これは、［ `Cross-Origin-Opener-Policy$h, `Cross-Origin-Embedder-Policy$h ］~HTTP応答~header, および `cross-origin-isolated$l 特能に依存する。 ◎ Returns whether scripts running in this global are allowed to use APIs that require cross-origin isolation. This depends on the `Cross-Origin-Opener-Policy` and `Cross-Origin-Embedder-Policy` HTTP response headers and the "cross-origin-isolated" feature.

var %frame = document.createElement("iframe")
%frame.onload = function() {
  var %frameWin = %frame.contentWindow
  console.log(%frameWin.location.origin) // "null"
  console.log(%frameWin.origin) // "https://stargate.example"
}
document.body.appendChild(%frame)

8.3. ~base64用の~~便利~method

［ `atob()$m ／ `btoa()$m ］~methodにより、 内容~dataと~base64符号化法との間で相互に変形できるようになる。 ◎ The atob() and btoa() methods allow developers to transform content to and from the base64 encoding.

注記： これらの~method名は、 語呂的には "b" は "binary", "a" は "ASCII" を表すと見なせるが、 主に歴史的な理由から，実施においては［ 入力, 出力† ］いずれも ~Unicode文字列である。 ◎ In these APIs, for mnemonic purposes, the "b" can be considered to stand for "binary", and the "a" for "ASCII". In practice, though, for primarily historical reasons, both the input and output of these functions are Unicode strings.

【† `atob()^m が返す値は `ByteString^I 型に改められたが （過去には `DOMString^I 型だった）、 いずれにせよ，~JS側においては文字列になる。 】

%result = self.`btoa(data)$m

~Unicode文字列の形をとる入力~data — 範囲 { `0000^U 〜 `00FF^U } 内の文字のみからなり，各~文字が［ 範囲 { 0x00 〜 0xFF } 内の同じ値をとる~binary~byte ］を表現する~data — を~base64表現へ変換した結果を返す。 ◎ Takes the input data, in the form of a Unicode string containing only characters in the range U+0000 to U+00FF, each representing a binary byte with values 0x00 to 0xFF respectively, and converts it to its base64 representation, which it returns.

入力~文字列~内に範囲~外の文字がある場合、 `InvalidCharacterError$E 例外が投出される。 ◎ Throws an "InvalidCharacterError" DOMException exception if the input string contains any out-of-range characters.

%result = self.`atob(data)$m

~Unicode文字列の形をとる［ ~base64に符号化された~binary~data ］を包含する入力を~Unicode文字列 — 範囲 { `0000^U 〜 `00FF^U } 内の文字のみからなり，各~文字が［ 範囲 { 0x00 〜 0xFF } 内の同じ値をとる~binary~byte ］を表現する文字列 — へ復号した結果を返す。 ◎ Takes the input data, in the form of a Unicode string containing base64-encoded binary data, decodes it, and returns a string consisting of characters in the range U+0000 to U+00FF, each representing a binary byte with values 0x00 to 0xFF respectively, corresponding to that binary data.

入力~文字列が妥当な~base64~dataでない場合、 `InvalidCharacterError$E 例外が投出される。 ◎ Throws an "InvalidCharacterError" DOMException if the input string is not valid base64 data.

8.4. 動的~markup挿入

【 この節の内容の和訳は、 `別~page＠~HTMLdynamic#dynamic-markup-insertion$にて。 】

8.5. ~DOMの構文解析-法

【 この節の内容の和訳は、 `別~page＠~HTMLdynamic#dom-parsing-and-serialization$にて。 】

8.6. ~timer

［ `setTimeout()$m ／ `setInterval()$m ］~methodにより、 作者は，~timerに基づく~callbackを~scheduleできるようになる。 ◎ The setTimeout() and setInterval() methods allow authors to schedule timer-based callbacks.

%id = self.`setTimeout(handler [, timeout [, ...arguments ] ])$m

%timeout ~milli秒~後に %handler を走らす~timeoutを~scheduleする。 %arguments は そのまま %handler に渡される。 ◎ Schedules a timeout to run handler after timeout milliseconds. Any arguments are passed straight through to the handler.

%id = self.`setTimeout(code [, timeout ])$m

%timeout ~milli秒~後に %code を~compileして走らす~timeoutを~scheduleする ◎ Schedules a timeout to compile and run code after timeout milliseconds.

self.`clearTimeout(id)$m

［ `setTimeout()$m ／ `setInterval()$m により設定された~timeout ］のうち， %id で識別されるものを取消す。 ◎ Cancels the timeout set with setTimeout() or setInterval() identified by id.

%id = self.`setInterval(handler [, timeout [, ...arguments ] ])$m

%timeout ~milli秒ごとに %handler を走らす~timeoutを~scheduleする。 %arguments は そのまま %handler に渡される。 ◎ Schedules a timeout to run handler every timeout milliseconds. Any arguments are passed straight through to the handler.

%id = self.`setInterval(code [, timeout ])$m

%timeout ~milli秒ごとに %code を~compileしてを走らす~timeoutを~scheduleする。 ◎ Schedules a timeout to compile and run code every timeout milliseconds.

self.`clearInterval(id)$m

［ `setTimeout()$m ／ `setInterval()$m により設定された~timeout ］のうち， %id で識別されるものを取消す。 ◎ Cancels the timeout set with setInterval() or setTimeout() identified by id.

注記： ~timerは、 入子にできる。 ただし，そのような入子な~timerが 5 個を超えて以降は、 ~intervalは 4 ~milli秒~以上に強制される。 ◎ Timers can be nested; after five such nested timers, however, the interval is forced to be at least four milliseconds.

注記： この~APIは、 ~timerを正確に~schedule通りに走らすことは保証しない。 ~CPU負荷, 他の~task, 等々に因る延期が予期される。 ◎ This API does not guarantee that timers will run exactly on schedule. Delays due to CPU load, other tasks, etc, are to be expected.

`WindowOrWorkerGlobalScope$I ~mixinを実装する~objは、 `作動中な~timer群が成す~map@ を持つ — それは`有順序~map$であり，初期~時は空とする。 この~mapを成す各~entryの： ◎ Objects that implement the WindowOrWorkerGlobalScope mixin have a map of active timers, which is a map, initially empty.＼

• `~key$mapは、 ある~timer用の識別子である。 ◎ Each key in this map is an identifier for a timer,＼
• `値$mapは、 `DOMHighResTimeStamp$I であり， 当の~timer用の失効~時刻を表現する。 ◎ and each value is a DOMHighResTimeStamp, representing the expiry time for that timer.

注記： `作動中な~timer群が成す~map$を成す~entryのうち， その~keyが数値になるものは、 `~timer初期化~手続き$により — すなわち，［ `setTimeout()$m ／ `setInterval()$m ］により — ~~作成されたものに限られる。 他の仕様が`手続きを~timeout後に走らす$~algoを利用するときは、 当の識別子は，数値~以外の一意な値になる。 ［ `clearTimeout()$m ／ `clearInterval()$m ］が影響するのは，数値を~keyとする~timer限られるが、 すべての~timerは， `遊休~刻限の算出＠~WAPI#idle-deadline-computation$に寄与することに加え， 関連な大域~objが破壊されるとき~clearされる。 ◎ For entries put in the map of active timers by the timer initialization steps, i.e., by setTimeout() and setInterval(), the keys are numbers. For other specifications that use the run steps after a timeout algorithm, the identifier is a unique non-numeric value. Only the numeric-keyed timers are affected by clearTimeout() and clearInterval(), but all timers contribute to idle deadline computation, and are cleared when the relevant global is destroyed.

注記： ~Web~IDLに定義されるとおり、 引数の変換は，`~timer初期化~手続き$が呼出される前に~Web~IDLにて定義される~algo内で起こる （例：最初の引数として渡された~objに対し `toString()^m ~methodを呼出すなど）： ◎ Argument conversion as defined by Web IDL (for example, invoking toString() methods on objects passed as the first argument) happens in the algorithms defined in Web IDL, before this algorithm is invoked.

var %log = '';
function logger(%s) { %log += %s + ' '; }

setTimeout({ toString: function () {
  setTimeout("logger('ONE')", 100);
  return "logger('TWO')";
} }, 100);

function doExpensiveWork() {
  var %done = false;
  // ...
  /* 
この部分は、
%done を ~T に設定するまでに数~milli秒かかる
◎
this part of the function takes up to five milliseconds set done to true if we're done
 */
  // ...

  return %done;
}

function rescheduleWork() {
  var %id = setTimeout(rescheduleWork, 0); /*
      
次回の反復を予め~scheduleしておく
◎
preschedule next iteration
 */
  if (doExpensiveWork())
    clearTimeout(%id); /*
      
用済みになったら~timeoutを~clearする
◎
clear the timeout if we don't need it
 */
}

function scheduleWork() {
  setTimeout(rescheduleWork, 0);
}

scheduleWork(); /*
  
たくさんの作業を行う~taskを~queueする
◎
queues a task to do lots of work
 */

`手続きを~timeout後に走らす$は、 他の仕様が `setTimeout()$m と類似な方式で［ 開発者が給した~codeを開発者が給した~timeout後に実行したい ］と求めるとき利用するために意味される （しかしながら、 それには `setTimeout()$m の［ 入子にする／【 %~timeout を】切り上げる ］挙動はないことに注意）。 そのような仕様は、 %順序付け識別子 を選ぶことで， 自身の仕様の~timeoutたちの順序付けを［ 他の仕様の~timeoutとの順序付けを拘束しない ］よう確保できる。 ◎ Run steps after a timeout is meant to be used by other specifications that want to execute developer-supplied code after a developer-supplied timeout, in a similar manner to setTimeout(). (Note, however, it does not have the nesting and clamping behavior of setTimeout().) Such specifications can choose an orderingIdentifier to ensure ordering within their specification's timeouts, while not constraining ordering with respect to other specification's timeouts.

8.7. 小taskの~queue法

%self.`queueMicrotask(callback)$m

所与の %callback を走らす`小taskを~queueする$。 ◎ Queues a microtask to run the given callback.

`queueMicrotask()$m ~methodは、 作者の~callbackを`小task~queue$上に~scheduleすることを許容する。 これは、当の~callbackの~codeを — 例えば `setTimeout(f, 0)$m を利用したときのように、 `~event~loop$に制御を戻すことなく — `~JS実行~文脈~stack$が次回に空になったとき，走らすことを許容する — それが起こるのは、 現在~実行-中な同期的な~JSすべてが完了まで走ったときである。 ◎ The queueMicrotask() method allows authors to schedule a callback on the microtask queue. This allows their code to run once the JavaScript execution context stack is next empty, which happens once all currently executing synchronous JavaScript has run to completion. This doesn't yield control back to the event loop, as would be the case when using, for example, setTimeout(f, 0).

作者は、［ いくつもの小taskを~scheduleするのは、 いくつもの同期的~codeを走らすのと同じ悪影響を処理能に及ぼす ］ことを，自覚すること。 どちらも，~browserが描画などの自前の作業を行うのを~~妨げる。 多くの事例では、［ `requestAnimationFrame()$m ／ `requestIdleCallback()$m ］を選ぶ方が良い。 特に，次回の描画~周回より前に~codeを走らすのが目標なら、 `requestAnimationFrame()$m がその目的を果たす。 ◎ Authors ought to be aware that scheduling a lot of microtasks has the same performance downsides as running a lot of synchronous code. Both will prevent the browser from doing its own work, such as rendering. In many cases, requestAnimationFrame() or requestIdleCallback() is a better choice. In particular, if the goal is to run code before the next rendering cycle, that is the purpose of requestAnimationFrame().

`queueMicrotask()$m は、 次の例から見てとれるように，同期的な~codeを配列し直す仕組みと捉えるのが最も良い — 実質的に、~queueした~codeを［ 現在~実行-中な同期的な~JSが完了まで走った直後 ］に配置するような。 ◎ As can be seen from the following examples, the best way of thinking about queueMicrotask() is as a mechanism for rearranging synchronous code, effectively placing the queued code immediately after the currently executing synchronous JavaScript has run to completion.

MyElement.prototype.loadData = function (%url) {
  if (this._cache[%url]) {
    this._setData(this._cache[%url]);
    this.dispatchEvent(new Event("load"));
  } else {
    fetch(%url).then(%res => %res.arrayBuffer()).then(%data => {
      this._cache[%url] = %data;
      this._setData(%data);
      this.dispatchEvent(new Event("load"));
    });
  }
};

%element.addEventListener("load", () => console.log("loaded"));
console.log("1");
%element.loadData();
console.log("2");

MyElement.prototype.loadData = function (%url) {
  if (this._cache[%url]) {
    queueMicrotask(() => {
      this._setData(this._cache[%url]);
      this.dispatchEvent(new Event("load"));
    });
  } else {
    fetch(%url).then(%res => %res.arrayBuffer()).then(%data => {
      this._cache[%url] = %data;
      this._setData(%data);
      this.dispatchEvent(new Event("load"));
    });
  }
};

const %queuedToSend = [];

function sendData(%data) {
  %queuedToSend.push(%data);

  if (%queuedToSend.length === 1) {
    queueMicrotask(() => {
      const %stringToSend = JSON.stringify(%queuedToSend);
      %queuedToSend.length = 0;

      fetch("/endpoint", %stringToSend);
    });
  }
}

8.8. 利用者~向けの~prompt

8.9. ~systemの状態と能力

【 この節の内容の和訳は、 `別~page＠~HTMLnavigator$にて。 】

8.10. 画像

[Exposed=(Window,Worker), `Serializable$, `Transferable$]
interface `ImageBitmap@I {
  readonly attribute unsigned long `width$m;
  readonly attribute unsigned long `height$m;
  undefined `close$m();
};

typedef (`CanvasImageSource$I or
         `Blob$I or
         `ImageData$I) `ImageBitmapSource@I;

enum `ImageOrientation@I { `from-image$l, `flipY$l };
enum `PremultiplyAlpha@I { `none$l, `premultiply$l, `default$l };
enum `ColorSpaceConversion@I { `~none0$l, `~default0$l };
enum `ResizeQuality@I { `pixelated$l, `low$l, `medium$l, `high$l };

dictionary `ImageBitmapOptions@I {
  `ImageOrientation$I `imageOrientation$m = `from-image$l;
  `PremultiplyAlpha$I `premultiplyAlpha$m = `default$l;
  `ColorSpaceConversion$I `colorSpaceConversion$m = `~default0$l;
  [EnforceRange] unsigned long `resizeWidth$m;
  [EnforceRange] unsigned long `resizeHeight$m;
  `ResizeQuality$I `resizeQuality$m = `low$l;
};

`ImageBitmap$I ~objは、 過度な待時間なく~canvasに塗れるような，~bitmap画像を表現する。 ◎ An ImageBitmap object represents a bitmap image that can be painted to a canvas without undue latency.

注記： 何を以って過度な待時間とするかの正確な判定は実装者に委ねられるが、 一般に，~bitmapの利用-時に ~network I/O, や~local~disk I/O を要するならば， 待時間はおそらく過度になる。 一方で，他を阻むのは GPU や~system RAM からの読取nに限られるならば、 待時間はおそらく受容-可能になる。 ◎ The exact judgement of what is undue latency of this is left up to the implementer, but in general if making use of the bitmap requires network I/O, or even local disk I/O, then the latency is probably undue; whereas if it only requires a blocking read from a GPU or system RAM, the latency is probably acceptable.

%promise = self.`createImageBitmap$m(%image [, %options ])

%promise = self.`createImageBitmap$m(%image, %sx, %sy, %sw, %sh [, %options ])

所与の %image から新たな `ImageBitmap$I が作成された時点で解決される，~promiseを返す — %image は次のいずれかをとり得る ⇒ `img$e 要素 ／ `~SVG-image$ 要素 ／ `video$e 要素 ／ `canvas$e 要素 ／ `Blob$I ~obj ／ `ImageData$I ~obj ／ 別の `ImageBitmap$I ~obj ◎ Takes image, which can be an img element, an SVG image element, a video element, a canvas element, a Blob object, an ImageData object, or another ImageBitmap object, and returns a promise that is resolved when a new ImageBitmap is created.

`ImageBitmap$I ~objを構築できなかった場合 — 例えば、供された %image ~dataが実際には画像でなかったなど — ~promiseは却下される。 ◎ If no ImageBitmap object can be constructed, for example because the provided image data is not actually an image, then the promise is rejected instead.

%sx, %sy, %sw, %sh 引数が供された場合、 ~source画像は，それらが成す矩形に切抜かれる — 元の画像に無い画素は、 `透明な黒$に置換される。【！＊ clip？】 これらの座標は、 ~source画像の~pixel座標~空間であり，`~CSS~pixel$数`ではない^em。 ◎ If sx, sy, sw, and sh arguments are provided, the source image is cropped to the given pixels, with any pixels missing in the original replaced by transparent black. These coordinates are in the source image's pixel coordinate space, not in CSS pixels.

%options が供された場合、 `ImageBitmap$I ~objの~bitmap~dataは， %options に則って改変される。 例えば［ %options の `premultiplyAlpha$m ~option ~EQ `premultiply$l ］ならば、 `~bitmap~data$ の各~色~channelは その`~alpha~channelにより乗算済み$にされる。 ◎ If options is provided, the ImageBitmap object's bitmap data is modified according to options. For example, if the premultiplyAlpha option is set to "premultiply", the bitmap data's color channels are premultiplied by its alpha channel.

~source画像の状態が妥当でない場合、 ~promiseは `InvalidStateError$E で却下される — 例えば：

• 成功裡に読込まれなかった `img$e 要素
• `ImageBitmap$I ~objであって［ `Detached$sl 内部~slot値 ~EQ ~T ］なるもの
• `ImageData$I ~objであって［ `data$m 属性~値の `ViewedArrayBuffer^sl 内部~slotは detached 【 `IsDetachedBuffer$jA( 内部~slotの値 ) ~EQ ~T 】 ］なるもの
• `Blob$I であって その~dataを~bitmap画像に解釈できないもの

◎ Rejects the promise with an "InvalidStateError" DOMException if the source image is not in a valid state (e.g., an img element that hasn't loaded successfully, an ImageBitmap object whose [[Detached]] internal slot value is true, an ImageData object whose data attribute value's [[ViewedArrayBuffer]] internal slot is detached, or a Blob whose data cannot be interpreted as a bitmap image).

~scriptから~source画像の画像~dataへの~accessは許容されない場合、 ~promiseは `SecurityError$E 例外で却下される （例： `~CORS非同一-生成元$の `video$e ／ 別の`生成元$からの~worker内の~scriptにより描かれている `canvas$e ）。 ◎ Rejects the promise with a "SecurityError" DOMException if the script is not allowed to access the image data of the source image (e.g. a video that is CORS-cross-origin, or a canvas being drawn on by a script in a worker from another origin).

%imageBitmap.`close$m()

%imageBitmap の下層の`~bitmap~data$を解放する。 ◎ Releases imageBitmap's underlying bitmap data.

%imageBitmap.`width$m

画像の`生来な横幅$を`~CSS~pixel$数で返す。 ◎ Returns the natural width of the image, in CSS pixels.

%imageBitmap.`height$m

画像の`生来な縦幅$を`~CSS~pixel$数で返す。 ◎ Returns the natural height of the image, in CSS pixels.

各 `ImageBitmap$I %O は： ◎ ↓

• ［ %O の `Detached$sl 内部~slot値 ~EQ ~F ］ならば、 ［ 横幅, 縦幅 ］を伴う `~bitmap~data@ が常に結付けられる 【~T にされたときは、この~dataは解放される（ ε にされる）】 。 しかしながら、 この~dataは破損していることもあり得る。 `ImageBitmap$I ~objは、 その~media~dataが~errorなしに復号できるならば， `全部的に復号-可能@ と呼ばれる。 ◎ An ImageBitmap object whose [[Detached]] internal slot value is false always has associated bitmap data, with a width and a height. However, it is possible for this data to be corrupted. If an ImageBitmap object's media data can be decoded without errors, it is said to be fully decodable.
• %O の~bitmapは、 `生成元cleanか$を持つ — それは、［ ~bitmapが，異なる`生成元$からの内容に染まっている（ tainted ）かどうか ］を指示する。 この~flagは、 初期~時には ~T に設定され（染まっていない）， `createImageBitmap()$m の手続きにより ~F に変化し得る。 ◎ An ImageBitmap object's bitmap has an origin-clean flag, which indicates whether the bitmap is tainted by content from a different origin. The flag is initially set to true and may be changed to false by the steps of createImageBitmap().

各 `ImageBitmap$I は、 `直列化-可能$／`転送-可能$である： ◎ ImageBitmap objects are serializable objects and transferable objects.

• その`直列化~手続き$は、所与の ( %値, %直列形 ) に対し，次を走らす： ◎ Their serialization steps, given value and serialized, are:

  1. ~IF［ %値 の`生成元cleanか$ ~EQ ~F ］ ⇒ ~THROW `DataCloneError$E ◎ If value's origin-clean flag is not set, then throw a "DataCloneError" DOMException.
  2. %直列形.`BitmapData^sl ~SET %値 の`~bitmap~data$の複製 ◎ Set serialized.[[BitmapData]] to a copy of value's bitmap data.

• その`逆直列化~手続き$は、所与の ( %直列形, %値, %宛先~realm ) に対し，次を走らす： ◎ Their deserialization steps, given serialized, value, and targetRealm, are:

  1. %値 の`~bitmap~data$ ~SET %直列形.`BitmapData^sl ◎ Set value's bitmap data to serialized.[[BitmapData]].

• その`転送-手続き$は、所与の ( %値, %~data保持体 ) に対し，次を走らす： ◎ Their transfer steps, given value and dataHolder, are:

  1. ~IF［ %値 の`生成元cleanか$ ~EQ ~F ］ ⇒ ~THROW `DataCloneError$E ◎ If value's origin-clean flag is not set, then throw a "DataCloneError" DOMException.
  2. %~data保持体.`BitmapData^sl ~SET %値 の`~bitmap~data$ ◎ Set dataHolder.[[BitmapData]] to value's bitmap data.
  3. %値 の`~bitmap~data$ ~SET ε ◎ Unset value's bitmap data.

• その`転送-受信-時の手続き$は、所与の ( %~data保持体, %値 ) に対し，次を走らす： ◎ Their transfer-receiving steps, given dataHolder and value, are:

  1. %値 の`~bitmap~data$ ~SET %~data保持体.`BitmapData^sl ◎ Set value's bitmap data to dataHolder.[[BitmapData]].

`resizeQuality@m ~memberは、 `ResizeQuality$I 列挙~値をとり，［ 画像の拡縮-時に利用する補間~品質の選好 ］を表出するために利用される — とり得る値の意味は： ◎ The ResizeQuality enumeration is used to express a preference for the interpolation quality to use when scaling images.

`pixelated@l

画像の外観をできるだけ保つような選好を指示する。 双線形~補間など、 色を “滑らかに” 拡縮する~algoは，受容-可能である。 ◎ The "pixelated" value indicates a preference to scale the image that maximizes the appearance. Scaling algorithms that "smooth" colors are acceptable, such as bilinear interpolation.

`low@l

低~品質な画像~補間の選好を指示する。 計算量は `high$l より少なく済み得る。 ◎ The "low" value indicates a preference for a low level of image interpolation quality. Low-quality image interpolation may be more computationally efficient than higher settings.

`medium@l

中間~品質な画像~補間の選好を指示する。 ◎ The "medium" value indicates a preference for a medium level of image interpolation quality.

`high@l

高~品質な画像~補間の選好を指示する。 計算量は `low$l より多くなり得る。 ◎ The "high" value indicates a preference for a high level of image interpolation quality. High-quality image interpolation may be more computationally expensive than lower settings.

注記： 双線形~拡縮-法は、 比較的~高速に画像を滑らかに補間するが，より低~品質な~algoの例である。 双三次 ／ Lanczos 拡縮-法は、 より高~品質な出力を生産する画像~拡縮ng~algoの例である。 この仕様は、 値 `pixelated$l を除いて，特定の補間~algoの利用を義務付けない。 ◎ Bilinear scaling is an example of a relatively fast, lower-quality image-smoothing algorithm. Bicubic or Lanczos scaling are examples of image-scaling algorithms that produce higher-quality output. This specification does not mandate that specific interpolation algorithms be used unless the value is "pixelated".

var %sprites = {};
function loadMySprites() {
  var %image = new Image();
  %image.src = 'mysprites.png';
  var %resolver;
  var %promise = new Promise(function (%arg) { %resolver = %arg });
  %image.onload = function () {
    %resolver(Promise.all([
      createImageBitmap(%image,  0,  0, 40, 40)
        .then(function (%image) { %sprites.person = %image }),
      createImageBitmap(%image, 40,  0, 40, 40)
        .then(function (%image) { %sprites.grass  = %image }),
      createImageBitmap(%image, 80,  0, 40, 40)
        .then(function (%image) { %sprites.tree  = %image }),
      createImageBitmap(%image,  0, 40, 40, 40)
        .then(function (%image) { %sprites.hut   = %image }),
      createImageBitmap(%image, 40, 40, 40, 40)
        .then(function (%image) { %sprites.apple = %image }),
      createImageBitmap(%image, 80, 40, 40, 40)
        .then(function (%image) { %sprites.snake = %image })
    ]));
  };
  return %promise;
}

function runDemo() {
  var %canvas = document.querySelector('canvas#demo');
  var %context = %canvas.getContext('2d');
  %context.drawImage(%sprites.tree, 30, 10);
  %context.drawImage(%sprites.snake, 70, 10);
}

loadMySprites().then(runDemo);

8.11. ~animation~frame

一部の~objは、 `AnimationFrameProvider$I ~interface~mixinを内包する。 ◎ Some objects include the AnimationFrameProvider interface mixin.

callback `FrameRequestCallback@I = undefined (`DOMHighResTimeStamp$I time);

interface mixin `AnimationFrameProvider@I {
  unsigned long `requestAnimationFrame$m(`FrameRequestCallback$I callback);
  undefined `cancelAnimationFrame$m(unsigned long handle);
};
`Window$I includes `AnimationFrameProvider$I;
`DedicatedWorkerGlobalScope$I includes `AnimationFrameProvider$I;

各 `AnimationFrameProvider$I ~objは、 自身の内部~状態を格納する `~target~obj@ を持つ — それは、 ~objに応じて次で定義される ⇒＃ `Window$I であるならば，それに`結付けられた文書$ ／ `DedicatedWorkerGlobalScope$I であるならば ~obj自身 ◎ Each AnimationFrameProvider object also has a target object that stores the provider's internal state. It is defined as follows: ◎ If the AnimationFrameProvider is a Window • The Window's associated Document ◎ If the AnimationFrameProvider is a DedicatedWorkerGlobalScope • The DedicatedWorkerGlobalScope

`AnimationFrameProvider$I は、 ~OR↓ を満たすならば `~supportされて@ いるものと見なされる： ◎ An AnimationFrameProvider provider is considered supported if any of the following are true:

• `Window$I ~objである ◎ provider is a Window.
• 【`DedicatedWorkerGlobalScope$I ~objであって】 その`所有者~集合$内に次を満たす~objが在る ⇒ ［ `文書$である ］~OR［ `~supportされて$いる `DedicatedWorkerGlobalScope$I ~objである ］ ◎ provider's owner set contains a Document object. ◎ Any of the DedicatedWorkerGlobalScope objects in provider's owner set are supported.

const %offscreenCanvas = document.getElementById("c").transferControlToOffscreen();
%worker.postMessage(%offscreenCanvas, [%offscreenCanvas]);

let %ctx, %pos = 0;
function draw(%dt) {
  %ctx.clearRect(0, 0, 100, 100);
  %ctx.fillRect(%pos, 0, 10, 10);
  %pos += 10 * %dt;
  requestAnimationFrame(%draw);
}

self.onmessage = function(%ev) {
  const %transferredCanvas = %ev.data;
  %ctx = %transferredCanvas.getContext("2d");
  draw();
};