CSS ペインティング API レベル 1

1. name が空文字列の場合、throw TypeError を投げて処理を中止する。

2. paintDefinitionMap を PaintWorkletGlobalScope の paint definitions マップとする。

3. paintDefinitionMap[name] が 存在する場合は throw "InvalidModificationError" DOMException を投げて処理を中止する。

4. inputProperties を空の sequence<DOMString>とする。

5. inputPropertiesIterable を Get(paintCtor, "inputProperties") の結果とする。

6. inputPropertiesIterable が undefined でなければ inputProperties に 変換した inputPropertiesIterable の sequence<DOMString> をセットする。例外が throw された場合は再throwして処理を中止する。

7. inputProperties をフィルタし、サポートされているCSSプロパティとカスタムプロパティのみを含める。

注: inputProperties getter で提供されるCSSプロパティのリストは、カスタムまたはネイティブCSSプロパティのどちらでもよいです。

注: CSSプロパティリストには省略プロパティ（ショートハンド）が含まれる場合があります。

注: ペイント画像クラスを将来互換とするため、現在ユーザーエージェントで無効なプロパティ（例: margin-bikeshed-property）も含まれる場合があります。

8. inputArguments を空の sequence<DOMString>とする。

9. inputArgumentsIterable を Get(paintCtor, "inputArguments") の結果とする。

10. inputArgumentsIterable が undefined でなければ inputArguments に 変換した inputArgumentsIterable の sequence<DOMString> をセットする。例外が発生した場合は再throwして処理を中止する。

11. inputArgumentSyntaxes を 空の リストとする。

12. inputArguments の各 item について、以下のサブ手順を実行する:

    1. item から構文定義を消費しようとする。 失敗した場合は throw TypeError を投げて処理を中止する。 成功した場合は parsedSyntax を返された 構文定義とする。

    2. parsedSyntax を inputArgumentSyntaxes に追加する。

13. contextOptionsValue を Get(paintCtor, "contextOptions") の結果とする。

14. paintRenderingContext2DSettings を 変換した contextOptionsValue の PaintRenderingContext2DSettings とする。 例外が throw された場合は再throwして処理を中止する。

    注: paintRenderingContext2DSettings.alpha を false に設定すると、ユーザーエージェントはテキストのアンチエイリアスや「可視性」最適化（例：ペイント画像が不透明な場合は背面を描画しない）を行うことができます。

15. IsConstructor(paintCtor) の結果が false なら throw TypeError を投げて処理を中止する。

16. prototype を Get(paintCtor, "prototype") の結果とする。

17. Type(prototype) の結果が Object でない場合は throw TypeError を投げて処理を中止する。

18. paintValue を Get(prototype, "paint") の結果とする。

19. paint を 変換した paintValue の Function callback function 型とする。変換時に例外が発生した場合は再throwする。

20. definition を新しい ペイント定義として、以下とする:

    • クラスコンストラクターは paintCtor。

    • ペイント関数は paint。

    • コンストラクター有効フラグ はtrue。

    • input propertiesは inputProperties。

    • PaintRenderingContext2DSettingsオブジェクトは paintRenderingContext2DSettings。

21. paintDefinitionMap[name] に definition をセットする。

22. タスクをキューに追加し、以下の手順を実行する:

    1. documentPaintDefinitionMap を関連する document の document paint definitions マップとする。

    2. documentDefinition を新しい 文書ペイント定義として、以下とする:

       • input properties は inputProperties。

       • input argument syntaxes は inputArgumentSyntaxes。

       • PaintRenderingContext2DSettingsオブジェクト は paintRenderingContext2DSettings。

    3. documentPaintDefinitionMap[name] が 存在する場合、以下の手順を実行:

       1. existingDocumentDefinition を get documentPaintDefinitionMap[name] の結果とする。

       2. existingDocumentDefinition が "invalid" なら、手順を中止する。

       3. existingDocumentDefinition と documentDefinition が等しくない場合（すなわち input properties・input argument syntaxes・PaintRenderingContext2DSettingsオブジェクトが異なる場合）、次を実行する:

          documentPaintDefinitionMap[name] に "invalid" をセットする。

          同じクラスが異なる inputProperties・inputArguments・paintRenderingContext2DSettings で登録されたことをデバッグコンソールにエラーとして記録する。

    4. そうでなければ documentPaintDefinitionMap[name] に documentDefinition をセットする。

注: input properties のリストは一度だけ取得されるべきであり、クラスが動的にinput propertiesを変更することはできません。

注: 将来の仕様では、作者が異なる種類のRenderingContextを受け取れるようになる可能性があります。特に作者がWebGLレンダリングコンテキストを利用して3D効果を描画したい場合などです。WebGLコンテキストのセットアップには PaintSize や StylePropertyMap を入力として渡すなどの複雑さがあります。

1. 新しいPaintRenderingContext2Dを作成する。

2. コンテキストのビットマップ寸法を設定し、出力ビットマップのサイズをwidthとheightの丸め値にする。

3. PaintRenderingContext2Dの alphaフラグを paintRenderingContext2DSettingsのalphaで設定する。

4. 新しいPaintRenderingContext2Dを返す。

注: レンダリングコンテキストの初期状態はset bitmap dimensionsアルゴリズム内部で設定され、レンダリングコンテキストをデフォルト状態にリセットし、出力ビットマップもクリアされます。

1. paintFunction を描画対象の box 上の <paint()> 関数とする。

2. name を paintFunction の第1引数とする。

3. documentPaintDefinitionMap を関連する document の document paint definitions マップとする。

4. documentPaintDefinitionMap[name] が 存在しない場合、画像出力は 無効な画像とし、以降の手順を中止する。

5. documentDefinition を get documentPaintDefinitionMap[name] の結果とする。

6. documentDefinition が "invalid" の場合、画像出力は 無効な画像とし、以降の手順を中止する。

7. inputArgumentSyntaxes を documentDefinition の input argument syntaxes とする。

8. inputArguments を paintFunction の "paint name" 引数以降の全引数の リストとする。

9. inputArguments が inputArgumentSyntaxes の登録文法と一致しない場合、画像出力は 無効な画像とし、以降の手順を中止する。

   このステップは以下のような場合に失敗します:

   // paint.js
   registerPaint('failing-argument-syntax', class {
       static get inputArguments() { return ['<length>']; }
       paint(ctx, size, styleMap, args) { /* paint code here. */ }
   });
   

   <style>
       .example-1 {
           background-image: paint(failing-argument-syntax, red);
       }
       .example-2 {
           background-image: paint(failing-argument-syntax, 1px, 2px);
       }
   </style>
   <div class=example-1></div>
   <div class=example-2></div>
   <script>
       CSS.paintWorklet.addModule('paint.js');
   </script>
   

   example-1 は 無効な画像となります。理由は "red" が登録文法に一致しないためです。

   example-2 は 無効な画像となります。理由は引数が多すぎるためです。

10. workletGlobalScope を PaintWorkletGlobalScope のいずれかとして、§ 7.1 グローバルスコープ選択の規則に従う。

    ユーザーエージェントはこの時点で Worklet から worklet global scope を作成してもよい。

11. invoke a paint callback を name、inputArguments、snappedConcreteObjectSize、workletGlobalScope で実行、必要なら 並列で。

    注: ユーザーエージェントが invoke a paint callback をスレッドで並列実行する場合、そのスレッドで使えるペイントワークレットグローバルスコープを選択するべきです。

1. paintDefinitionMap を workletGlobalScope の paint definitions マップとする。

2. paintDefinitionMap[name] が 存在しない場合は、次の手順を実行:

   1. タスクをキューに追加し、次の手順を実行:

      1. documentPaintDefinitionMap を関連する document の document paint definitions マップとする。

      2. documentPaintDefinitionMap[name] に "invalid" をセットする。

      3. ユーザーエージェントは、全 PaintWorkletGlobalScope でクラスが登録されていない旨をデバッグコンソールにエラーとして記録するべき。

   2. 画像出力は 無効な画像とし、以降の手順を中止する。

   注: これは、あるペイントワークレットグローバルスコープが registerPaint(name, paintCtor) を受け取らなかった場合を扱います（他のグローバルスコープが受け取った場合も）。他のグローバルスコープでペイントコールバックが成功しても、以降のフレームで draw a paint image が呼ばれると成功しません。

3. definition を get paintDefinitionMap[name] の結果とする。

4. paintClassInstanceMap を workletGlobalScope の paint class instances マップとする。

5. paintInstance を get paintClassInstanceMap[|name|] の結果とする。paintInstance が null の場合は次の手順を実行:

   1. definition の constructor valid flag が false の場合、画像出力は 無効な画像とし、以降の手順を中止する。

   2. paintCtor を definition の class constructor とする。

   3. paintInstance を Construct(paintCtor) の結果とする。

      もし construct が例外を投げた場合は、definition の constructor valid flag を false にし、画像出力は 無効な画像とし、以降の手順を中止する。

   4. paintClassInstanceMap[name] に paintInstance をセットする。

6. inputProperties を definition の input properties とする。

7. styleMap を StylePropertyMapReadOnly の新規インスタンスとして、inputProperties に列挙されるプロパティの computed value のみを設定する。

8. renderingContext を create a PaintRenderingContext2D object で次を渡して生成する:

   • "width" - snappedConcreteObjectSize の幅。

   • "height" - snappedConcreteObjectSize の高さ。

   • "paintRenderingContext2DSettings" - definition の PaintRenderingContext2DSettings オブジェクト。

   注: renderingContext はペイントの呼び出し間で再利用されません。つまり、呼び出し間で renderingContext に格納されたデータや状態はありません。例えば、コンテキストにクリップを設定しても、次回のペイントメソッド実行時に同じクリップは適用されません。

   注: また、ペイントメソッド終了後は renderingContext は実質的に「無効化」されます。作者コードが renderingContext を参照してメソッドを呼び出しても、現在の画像や以降の画像には影響しません。

9. paintSize を PaintSize の新規インスタンスとして snappedConcreteObjectSize の幅・高さで初期化する。

10. この段階で、ユーザーエージェントは paintSize、styleMap、inputArguments が前回と同じなら以前の呼び出しの画像を再利用してもよい。その場合は画像出力をキャッシュ画像とし、以降の手順を中止する。

    下記の例では、div-1 と div-2 はペイント関数のJavaScript引数が同じです。ユーザーエージェントは一方の呼び出し結果をキャッシュし、両方の要素で利用できます。

    // paint.js
    registerPaint('simple', class {
        paint(ctx, size) {
            ctx.fillStyle = 'green';
            ctx.fillRect(0, 0, size.width, size.height);
        }
    });
    

    <style>
        .div-1 {
            width: 50px;
            height: 50px;
            background-image: paint(simple);
        }
        .div-2 {
            width: 100px;
            height: 100px;
    
            background-size: 50% 50%;
            background-image: paint(simple);
        }
    </style>
    <div class=div-1></div>
    <div class=div-2></div>
    <script>
        CSS.paintWorklet.addModule('paint.js');
    </script>
    

11. paintFunctionCallback を definition の paint function とする。

12. Invoke paintFunctionCallback を引数 «renderingContext, paintSize, styleMap, inputArguments» で、paintInstance を callback this value として呼び出す。

    もし paintFunctionCallback が適切な時間内に完了しない場合（ユーザーエージェントが「長時間実行スクリプト」と判断）、ユーザーエージェントはスクリプトを強制終了してもよい。画像出力は 無効な画像とし、以降の手順を中止する。

    注: ユーザーエージェントは、デバッグツールで作者にペイントクラスのコストを可視化したり、「応答しないスクリプト」ダイアログを表示するなどのツールを提供できます。

13. 画像出力はメソッドに渡された renderingContext から生成する。

    もし例外が throw された場合、画像出力は 無効な画像とする。

注: 生成画像の内容はアクセシビリティ目的には設計されていません。作者は必要な情報を標準アクセシビリティAPIで提供してください。