HTML — 対話的な要素

UA は、［ 要素 要素 に対し，追加の情報を［ 示す／隠す ］よう要請する ］ことを利用者に許容するべきである。 そのような要請を尊守するときは、 UA は，次を走らすものとする：

• 示す場合 ：要素 の属性値を設定する( "open", 空文字列 )
• 隠す場合 ：要素 から open 属性を除去する

The user agent should allow the user to request that the additional information be shown or hidden. To honor a request for the details to be shown, the user agent must set the open attribute on the element to the empty string. To honor a request for the information to be hidden, the user agent must remove the open attribute from the element.

details 要素 要素 用に利用される属性変更時の手続きは、 所与の ( 局所名, 旧値, 値, 名前空間 ) に対し： The following attribute change steps, given element, localName, oldValue, value, and namespace, are used for all details elements:

1. IF［ 名前空間 ≠ null ］ ：RETURN If namespace is not null, then return.
2. IF［ 局所名 ＝ "name" ］ ：必要なら要素を閉じることにより details の排他性を確保する( 要素, 自身 ) If localName is name, then ensure details exclusivity by closing the given element if needed given element.

3. IF［ 局所名 ＝ "open" ］： If localName is open, then:

   1. IF［ 旧値 ≠ 値 ］∧［ null ∈ { 旧値, 値 } ］： If one of oldValue or value is null and the other is not null, run the following steps,＼

      この段を成す手続きは、 要素 用の details 通知タスク手続き と称される。 which are known as the details notification task steps, for this details element:

      注記： open 属性が何回か続けてトグルされたときは、 結果のタスクは，本質的にイベントが 1 回だけ発火されるよう合体される。 When the open attribute is toggled several times in succession, the resulting tasks essentially get coalesced so that only one event is fired.

      1. IF［ 旧値 ＝ null ］ ：details 用のトグルイベントタスクをキューする( 要素, "closed", "open" ) If oldValue is null, queue a details toggle event task given the details element, "closed", and "open".
      2. ELSE ：details 用のトグルイベントタスクをキューする( 要素, "open", "closed" ) Otherwise, queue a details toggle event task given the details element, "open", and "closed".
   2. IF［ 旧値 ＝ null ］∧［ 値 ≠ null ］ ：必要なら要素を閉じることにより details の排他性を確保する( 要素, 他の要素 ) If oldValue is null and value is not null, then ensure details exclusivity by closing other elements if needed given element.

details 用の HTML 要素挿入時の手続きは、 所与の ( 挿入されるノード ) に対し： The details HTML element insertion steps, given insertedNode, are:

1. 必要なら要素を閉じることにより details の排他性を確保する( 挿入されるノード, 自身 ) Ensure details exclusivity by closing the given element if needed given insertedNode.

details 用のトグルイベントタスクをキューする アルゴリズムは、 所与の ( details 要素 要素, 文字列 旧状態, 文字列 新状態 ) に対し： To queue a details toggle event task given a details element element, a string oldState, and a string newState:

1. 追跡子 :← 要素 の details 用のトグルタスク追跡子 ↓

2. IF［ 追跡子 ≠ null ］： If element's details toggle task tracker is not null, then:

   1. 旧状態 ← 追跡子 の旧状態 Set oldState to element's details toggle task tracker's old state.
   2. 追跡子 のタスクを それが属するタスクキューから除去する Remove element's details toggle task tracker's task from its task queue.
   3. 要素 の details 用のトグルタスク追跡子 ← null Set element's details toggle task tracker to null.

3. タスク :← 要素タスクをキューする( DOM 操作タスクソース, 要素, 次の手続き ） Queue an element task given the DOM manipulation task source and element to run＼

   手続きは： the following steps:

   1. イベントを発火する( 要素, toggle, ToggleEvent ) — 次のように初期化して ：oldState 属性 ← 旧状態, newState 属性 ← 新状態 Fire an event named toggle at element, using ToggleEvent, with the oldState attribute initialized to oldState and the newState attribute initialized to newState.
   2. 要素 の details 用のトグルタスク追跡子 ← null Set element's details toggle task tracker to null.
4. 要素 の details 用のトグルタスク追跡子 ← 次を伴う構造体 ：タスク ← タスク, 旧状態 ← 旧状態 Set element's details toggle task tracker to a struct with task set to the just-queued task and old state set to oldState.

必要なら要素を閉じることにより details の排他性を確保する アルゴリズムは、 所与の ( details 要素 要素, 対象 ∈ { 自身, 他の要素 } ) に対し：

【 このアルゴリズムは、 原文では 2 つのアルゴリズムにより定義されているが， この訳では 対象 フラグを通して 1 つに集約する。 】

1. IF［ 対象 ＝ 自身 ］ ：Assert： 要素 は open 属性を有する
2. ELSE IF［ 要素 は open 属性を有さない ］ ：RETURN
3. IF［ 要素 は name 属性を有さない ］∨［ 要素 は name 属性を有していて，その値 ＝ 空文字列 ］ ：RETURN
4. 閉じる必要がある要素 :← ε

5. 要素 が属する有名 details グループを成す 各( 他の要素 ) に対し，ツリー順序で：

   1. IF［ 他の要素 ＝ 要素 ］ ：CONTINUE
   2. IF［ 他の要素 は open 属性を有さない ］ ：CONTINUE

   3. Assert： 要素 が属する有名 details グループを成すメンバのうち 要素, 他の要素 以外のものは open 属性を有さない。

      【 この表明は、 原文では 対象 ＝ 他の要素 の場合に限り与えられているが， 対象 を問わず満たされるはずである。 】

   4. 閉じる必要がある要素 :← 対象 に応じて ：他の要素 ならば 他の要素 ／ 自身 ならば 要素 ／
   5. BREAK
6. IF［ 閉じる必要がある要素 ≠ ε ］ ：閉じる必要がある要素 から open 属性を除去する

To ensure details exclusivity by closing other elements if needed given a details element element: • Assert: element has an open attribute. • If element does not have a name attribute, or its name attribute is the empty string, then return. • Let groupMembers be a list of elements, containing all elements in element's details name group except for element, in tree order. • For each element otherElement of groupMembers: •• If the open attribute is set on otherElement, then: ••• Assert: otherElement is the only element in groupMembers that has the open attribute set. ••• Remove the open attribute on otherElement. ••• Break.To ensure details exclusivity by closing the given element if needed given a details element element: • If element does not have an open attribute, then return. • If element does not have a name attribute, or its name attribute is the empty string, then return. • Let groupMembers be a list of elements, containing all elements in element's details name group except for element, in tree order. • For each element otherElement of groupMembers: •• If the open attribute is set on otherElement, then: ••• Remove the open attribute on element. ••• Break.

先祖 details を露わにする アルゴリズムは、 所与の ( 現在のノード ) に対し： The ancestor details revealing algorithm is to run the following steps on currentNode:

1. WHILE ［ 現在のノード は平坦ツリーの中で親ノードを有する ］: While currentNode has a parent node within the flat tree:

   1. IF［ ある details 要素 要素 が在って， 現在のノード は 要素 の 2 個目のスロットの中にスロットされている ］： If currentNode is slotted into the second slot of a details element:

      1. 現在のノード ← 要素 Set currentNode to the details element which currentNode is slotted into.
      2. IF［ 要素 は open 属性を有していない ］ ：要素 の属性値を設定する( "open", 空文字列 ) If the open attribute is not set on currentNode, then set the open attribute on currentNode to the empty string.
   2. ELSE ：現在のノード ← 平坦ツリーの中の 現在のノード の親ノード Otherwise, set currentNode to the parent node of currentNode within the flat tree.

<section class="progress window">
 <h1>"Really Achieving Your Childhood Dreams" を複製しています</h1>
 <details>
  <summary>複製中... <progress max="375505392" value="97543282"></progress> 25%</summary>
  <dl>
   <dt>転送レート： </dt> <dd>452KB/s</dd>
   <dt>保存先： </dt> <dd>/home/rpausch/raycd.m4v</dd>
   <dt>転送元： </dt> <dd>/var/www/lectures/raycd.m4v</dd>
   <dt>経過時間： </dt> <dd>01:16:27</dd>
   <dt>色プロファイル： </dt> <dd>SD (6-1-6)</dd>
   <dt>サイズ： </dt> <dd>320×240</dd>
  </dl>
 </details>
</section>

<details>
 <summary><label for=fn>名前と拡張子：</label></summary>
 <p><input type=text id=fn name=fn value="Pillar Magazine.pdf">
 <p><label><input type=checkbox name=ext checked>拡張子を隠す</label>
</details>

<section class="characteristics">
 <details name="frame-characteristics">
  <summary>素材</summary>
  この額縁は、無垢なオーク材でできています。
 </details>
 <details name="frame-characteristics">
  <summary>Size</summary>
  額縁には、高さ 40cm, 幅 30cm の写真が収まります。
  額縁自体は、高さ 45cm, 幅 35cm, 太さ 2cm です。
 </details>
 <details name="frame-characteristics">
  <summary>色</summary>
  この額縁には、
  自然な木目に着色されたもの, 黒に着色されたものがあります。
 </details>
</section>

<section class="characteristics">
 <details name="frame-characteristics" id="d1" open>...</details>
 <details name="frame-characteristics" id="d2">...</details>
 <details name="frame-characteristics" id="d3">...</details>
</section>

document.getElementById("d2").setAttribute("open", "");

<section class="characteristics">
 <details name="frame-characteristics" id="d1">...</details>
 <details name="frame-characteristics" id="d2" open>...</details>
 <details name="frame-characteristics" id="d3">...</details>
</section>

<style>
 details > summary { transition: color 1s; color: black; }
 details[open] > summary { color: red; }
</style>
<details>
 <summary>自動運転： 作動中</summary>
 <p>速度： 12m/s</p>
 <p>方向： 北</p>
</details>

次を満たす要素は 親 details 用の summary であるとされる ：［ summary 要素である ］∧［ 親は details 要素である ］∧［ 先行する同胞に別の summary 要素は無い ］ A summary element is a summary for its parent details if the following algorithm returns true: • If this summary element has no parent, then return false. • Let parent be this summary element's parent. • If parent is not a details element, then return false. • If parent's first summary element child is not this summary element, then return false. • Return true.

summary 要素 要素 の作動化のふるまいは： The activation behavior of summary elements is to run the following steps:

1. IF［ 要素 は親 details 用の summary でない ］ ：RETURN If this summary element is not the summary for its parent details, then return.
2. 親 :← 要素 の親 Let parent be this summary element's parent.
3. IF［ 親 は open 属性を有する ］ ：親 から open 属性を除去する† If the open attribute is present on parent, then remove it.＼
4. ELSE ：親 の属性値を設定する( "open", 空文字列 )† Otherwise, set parent's open attribute to the empty string.

注記†： これは、 details 通知タスク手続きを走らすことになる。 This will then run the details notification task steps.

<dialog>
  <label>製品番号 <input type="text" readonly></label>
  <label>製品名 <input type="text" autofocus></label>
</dialog>

<dialog style="height: 80vh;">
  <div style="overflow: auto; height: 60vh;" autofocus>
    <p>西暦 2010年 4月 1日に このサイトを介して発注することにより、あなたは、今から未来永劫に、あなたの魂に対する譲渡不能な請求権を我々に是認することに同意したものとする。</p>
    <p>我々がこの請求権を行使したいと望んだ場合、あなたは、このサイトまたはその権限の委託先から書面による通知を受け取った時点から 5 営業日以内に、あなたの魂およびそれに対するいかなる請求権も明け渡すことに同意するものとする。</p>
    <!-- …等々，以下多数の <p> 要素を伴う… -->
  </div>
  <form method="dialog">
    <button type="submit" value="agree">同意する</button>
    <button type="submit" value="disagree">同意しない</button>
  </form>
</dialog>

<dialog>
 <h1>財布に追加する</h1>
 <p><strong><label for=amt>何枚のコインを追加しますか？</label></strong></p>
 <p><input id=amt name=amt type=number min=0 step=0.01 value=100></p>
 <p><small>コインの追加は、ご自身の責任で行なってください。</small></p>
 <p><label><input name=round type=checkbox>端数は丸める</label></p>
 <p><input type=button onclick="submit()" value="追加する"></p>
</dialog>

show() メソッド手続きは： The show() method steps are:

1. IF［ これ°は open 属性を有する ］：

   1. IF［ これ°のモーダルか ＝ false ］ ：RETURN
   2. THROW InvalidStateError
   If this has an open attribute and is modal of this is false, then return.If this has an open attribute, then throw an "InvalidStateError" DOMException.
2. 取り消されなかったか :← イベントを発火する( これ°, beforetoggle, ToggleEvent ) — 次のように初期化して ：cancelable 属性 ← true, oldState 属性 ← "closed", newState 属性 ← "open" If the result of firing an event named beforetoggle, using ToggleEvent, with the cancelable attribute initialized to true, the oldState attribute initialized to "closed", and the newState attribute initialized to "open" at this＼

3. IF［ ∨↓ ］…

   • 取り消されなかったか ＝ false
   • これ°は open 属性を有する

   …ならば ：RETURN

   is false, then return.If this has an open attribute, then return.
4. ダイアログ用のトグルイベントタスクをキューする( これ°, "closed", "open" ) Queue a dialog toggle event task given this, "closed", and "open".
5. これ°の属性値を設定する( "open", 空文字列 ) Add an open attribute to this, whose value is the empty string.
6. 文書 :← これ°のノード文書 ↓
7. Assert： これ° ∉ 文書 の開いたダイアログリスト Assert: this's node document's open dialogs list does not contain this.
8. 文書 の開いたダイアログリストにこれ°を付加する Add this to this's node document's open dialogs list.
9. ダイアログ用の閉じ注視器を設定する( これ° ) Set the dialog close watcher with this.
10. これ°の前回にフォーカスされた要素 ← フォーカスされている要素 Set this's previously focused element to the focused element.

11. « "hint", "auto" » を成す 各( モード ) に対し：

    1. popover リスト :← 文書が示している popover リストを取得する( 文書, モード )
    2. ある所 ← 最上層な popover 先祖を見出す( これ°, popover リスト, null , false )
    3. IF［ ある所 ≠ null ］ ：BREAK
    ↑ Let document be this's node document.Let hideUntil be the result of running topmost popover ancestor given this, document's showing hint popover list, null, and false.If hideUntil is null, then set hideUntil to the result of running topmost popover ancestor given this, document's showing auto popover list, null, and false.
12. IF［ ある所 ＝ null ］ ：ある所 ← 文書 If hideUntil is null, then set hideUntil to document.
13. ある所までの popover をすべて隠す( ある所, false, true ) Run hide all popovers until given hideUntil, false, and true.
14. ダイアログをフォーカスする( これ° ) Run the dialog focusing steps given this.

showModal() メソッド手続きは ：モーダルダイアログを示す( これ° ) The showModal() method steps are to show a modal dialog given this.

close(returnValue) メソッド手続きは ：ダイアログを閉じる( これ°, returnValue ) The close(returnValue) method steps are: • If returnValue is not given, then set it to null. • Close the dialog this with returnValue.

requestClose(returnValue) メソッド手続きは： The requestClose(returnValue) method steps are:

1. IF［ これ°は open 属性を有していない ］ ：RETURN If this does not have an open attribute, then return.
2. Assert： これ°の閉じ注視器 ≠ null Assert: this's close watcher is not null.
3. これ°の閉じ要請メソッド用の閉じ注視器を可能化するか ← true Set dialog's enable close watcher for requestClose() to true.
4. IF［ returnValue ＝ ε ］ ：returnValue ← null If returnValue is not given, then set it to null.
5. これ°の閉じ要請の返り値 ← returnValue Set this's request close return value to returnValue.
6. 閉じ注視器に閉じるよう要請する( dialog の閉じ注視器, false ) Request to close dialog's close watcher with false.
7. dialog の閉じ要請メソッド用の閉じ注視器を可能化するか ← false Set dialog's enable close watcher for requestClose() to false.

dialog 要素用の HTML 要素除去時の手続きは、 所与の ( 除去されるノード, 旧親 ) に対し： The dialog HTML element removing steps, given removedNode and oldParent, are:

1. IF［ 除去されるノード の閉じ注視器 ≠ null ］： If removedNode's close watcher is not null, then:

   1. 閉じ注視器を破壊する( 除去されるノード の閉じ注視器 ) Destroy removedNode's close watcher.
   2. 除去されるノード の閉じ注視器 ← null Set removedNode's close watcher to null.
2. IF［ 除去されるノード ∈ 除去されるノード のノード文書の上端層 ］ ：上端層から要素を即時に除去する( 除去されるノード ) If removedNode's node document's top layer contains removedNode, then remove an element from the top layer immediately given removedNode.
3. 除去されるノード のモーダルか ← false Set is modal of removedNode to false.
4. 除去されるノード のノード文書の開いたダイアログリストから 除去されるノード を除去する Remove removedNode from removedNode's node document's open dialogs list.

モーダルダイアログを示す アルゴリズムは、 所与の ( dialog 要素 dialog ) に対し： To show a modal dialog given a dialog element subject:

1. IF［ dialog は open 属性を有する ］∧［ dialog のモーダルか ＝ true ］ ：RETURN If subject has an open attribute and is modal of subject is true, then return.

2. IF［ ∨↓ ］…

   • dialog は open 属性を有する
   • dialog のノード文書は全部的に作動中でない
   • dialog は接続されていない
   • dialog の popover 可視性状態 ＝ 示している

   …ならば ：THROW InvalidStateError

   If subject has an open attribute, then throw an "InvalidStateError" DOMException.If subject's node document is not fully active, then throw an "InvalidStateError" DOMException.If subject is not connected, then throw an "InvalidStateError" DOMException.If subject is in the popover showing state, then throw an "InvalidStateError" DOMException.
3. 取り消されなかったか :← イベントを発火する( dialog, beforetoggle, ToggleEvent ) — 次のように初期化して ：cancelable 属性 ← true, oldState 属性 ← "closed", newState 属性 ← "open" If the result of firing an event named beforetoggle, using ToggleEvent, with the cancelable attribute initialized to true, the oldState attribute initialized to "closed", and the newState attribute initialized to "open" at subject＼

4. IF［ ∨↓ ］…

   • 取り消されなかったか ＝ false
   • dialog は open 属性を有する
   • dialog は接続されていない
   • dialog の popover 可視性状態 ＝ 示している

   …ならば ：RETURN

   is false, then return.If subject has an open attribute, then return.If subject is not connected, then return.If subject is in the popover showing state, then return.
5. ダイアログ用のトグルイベントタスクをキューする( dialog, "closed", "open" ) Queue a dialog toggle event task given subject, "closed", and "open".
6. dialog の属性値を設定する( "open", 空文字列 ) Add an open attribute to subject, whose value is the empty string.
7. dialog のモーダルか ← true Set is modal of subject to true.
8. 文書 :← dialog のノード文書 ↓
9. Assert： dialog ∉ 文書 の開いたダイアログリスト Assert: subject's node document's open dialogs list does not contain subject.
10. 文書 の開いたダイアログリストに dialog を付加する Add subject to subject's node document's open dialogs list.

11. dialog を 文書 を阻んでいるモーダルダイアログにする Let subject's node document be blocked by the modal dialog subject.

    注記： これは、 文書 が指名する被フォーカス区画を不活にする （現在の被フォーカス区画が dialog の shadow も含めた子孫でない限り）。 そのような事例では、 文書 が指名する被フォーカス区画は， すぐに表示域に設定し直されることになる — が、 数段先にて，フォーカス先として もっと良い候補を見出そうと試みることになる。 This will cause the focused area of the document to become inert (unless that currently focused area is a shadow-including descendant of subject). In such cases, the focused area of the document will soon be reset to the viewport. In a couple steps we will attempt to find a better candidate to focus.

12. IF［ dialog ∉ 文書 の上端層 ］ ：上端層に要素を追加する( dialog ) If subject's node document's top layer does not already contain subject, then add an element to the top layer given subject.
13. ダイアログ用の閉じ注視器を設定する( dialog ) Set the dialog close watcher with subject.
14. dialog の前回にフォーカスされた要素 ← フォーカスされている要素 Set subject's previously focused element to the focused element.

15. « "hint", "auto" » を成す 各( モード ) に対し：

    1. popover リスト :← 文書が示している popover リストを取得する( 文書, モード )
    2. ある所 ← 最上層な popover 先祖を見出す( dialog, popover リスト, null , false )
    3. IF［ ある所 ≠ null ］ ：BREAK
    ↑ Let document be subject's node document.Let hideUntil be the result of running topmost popover ancestor given subject, document's showing hint popover list, null, and false.If hideUntil is null, then set hideUntil to the result of running topmost popover ancestor given subject, document's showing auto popover list, null, and false.
16. IF［ ある所 ＝ null ］ ：ある所 ← 文書 If hideUntil is null, then set hideUntil to document.
17. ある所までの popover をすべて隠す( ある所, false, true ) Run hide all popovers until given hideUntil, false, and true.
18. ダイアログをフォーカスする( dialog ) Run the dialog focusing steps given subject.

ダイアログ用の閉じ注視器を設定する アルゴリズムは、 所与の ( dialog 要素 dialog ) に対し： To set the dialog close watcher, given a dialog element dialog:

1. dialog の閉じ注視器 ← 閉じ注視器を確立する( dialog に関連する大域オブジェクト ) — 次も与える下で： Set dialog's close watcher to the result of establishing a close watcher given dialog's relevant global object, with:

   • 取り消し動作 は、 所与の ( 閉じを防止し得るか ) に対し ：イベントを発火する( dialog, cancel ) — 次のように初期化して ：cancelable 属性 ← 閉じを防止し得るか cancelAction given canPreventClose being to return the result of firing an event named cancel at dialog, with the cancelable attribute initialized to canPreventClose.
   • 閉じ動作 は ：ダイアログを閉じる( dialog, dialog の閉じ要請の返り値 ) closeAction being to close the dialog given dialog and dialog's request close return value.
   • 可能化状態を取得する は ：RETURN IS［ dialog の閉じ要請メソッド用の閉じ注視器を可能化するか ＝ true ］∨［ ダイアログの closed-by 状態を算出する( dialog ) ≠ なし ］ getEnabledState being to return true if dialog's enable close watcher for requestClose() is true or dialog's computed closed-by state is not None; otherwise false.

dialog 要素用の 呼び出し元コマンドは妥当か？手続き は、 所与の ( command 属性 コマンド ) に対し ：RETURN IS［ コマンド の状態 ∈ { 閉じる, モーダルを示す } ］ The is valid invoker command steps for dialog elements, given a command attribute command, are: • If command is in the Close state or in the Show Modal state, then return true. • Return false.

dialog 要素用の呼び出し元コマンド手続きは、 所与の ( 要素 dialog, 要素 呼び出し元, command 属性 コマンド ) に対し： The invoker command steps for dialog elements, given an element element, an element invoker, and a command attribute command, are:

1. IF［ dialog の popover 可視性状態 ＝ 示している ］ ：RETURN If element is in the popover showing state, then return.
2. IF［ コマンド の状態 ＝ 閉じる ］∧［ dialog は open 属性を有する ］ ：ダイアログを閉じる( dialog, 呼び出し元 の値 ) If command is in the Close state and element has an open attribute: • Let value be invoker's value. • Close the dialog element with value.
3. IF［ コマンド の状態 ＝ モーダルを示す ］∧［ dialog は open 属性を有さない ］ ：モーダルダイアログを示す( dialog ) If command is the Show Modal state and element does not have an open attribute, then show a modal dialog given element.

<button type=button
        commandfor="the-dialog"
        command="show-modal">
 削除する
</button>
<dialog id="the-dialog">
 <form action="/delete" method="POST">
  <button type="submit">
   削除する
  </button>
  <button commandfor="the-dialog"
          command="close">
   取り消す
  </button>
 </form>
</dialog>

ダイアログを閉じる アルゴリズムは、 所与の ( dialog 要素 dialog, ［ null ／文字列 ］ 結果 ) に対し： When a dialog element subject is to be closed, with null or a string result, run these steps:

1. IF［ dialog は open 属性を有さない ］ ：RETURN If subject does not have an open attribute, then return.
2. イベントを発火する( dialog, beforetoggle, ToggleEvent ) — 次のように初期化して ：oldState 属性 ← "open", newState 属性 ← "closed" Fire an event named beforetoggle, using ToggleEvent, with the oldState attribute initialized to "open" and the newState attribute initialized to "closed" at subject.
3. IF［ dialog は open 属性を有さない ］ ：RETURN If subject does not have an open attribute, then return.
4. ダイアログ用のトグルイベントタスクをキューする( これ°, "open", "closed" ) Queue a dialog toggle event task given subject, "open", and "closed".
5. dialog から open 属性を除去する Remove subject's open attribute.
6. IF［ dialog のモーダルか ＝ true ］ ：上端層から要素を除去するよう要請する( dialog ) If is modal of subject is true, then request an element to be removed from the top layer given subject.
7. モーダルであったか :← dialog のモーダルか Let wasModal be the value of subject's is modal flag.
8. dialog のモーダルか ← false Set is modal of subject to false.
9. dialog のノード文書 の開いたダイアログリストから dialog を除去する Remove subject from subject's node document's open dialogs list.
10. IF［ 結果 ≠ null ］ ：dialog の 結果値 ← 結果 If result is not null, then set the returnValue attribute to result.
11. 【 dialog の】閉じ要請の返り値 ← null Set the request close return value to null.

12. IF［ dialog の前回にフォーカスされた要素 ≠ null ］： If subject's previously focused element is not null, then:

    1. 要素 :← dialog の前回にフォーカスされた要素 Let element be subject's previously focused element.
    2. dialog の前回にフォーカスされた要素 ← null Set subject's previously focused element to null.

    3. IF［ dialog のノード文書が指名する被フォーカス区画の DOM アンカーは， dialog の shadow も含めた広義子孫である ］∨［ モーダルであったか ＝ true ］ ：オブジェクトをフォーカスする( 要素 ) If subject's node document's focused area of the document's DOM anchor is a shadow-including inclusive descendant of subject, or wasModal is true, then run the focusing steps for element;＼

       この段を行うときは、 表示域はスクロールされるべきでない。 the viewport should not be scrolled by doing this step.

13. 要素タスクをキューする( 利用者対話タスクソース, dialog, 次の手続き )

    手続きは ：イベントを発火する( dialog, close )
    Queue an element task on the user interaction task source given the subject element to fire an event named close at subject.

14. IF［ dialog の閉じ注視器 ≠ null ］： If subject's close watcher is not null, then:

    1. 閉じ注視器を破壊する( dialog の閉じ注視器 ) Destroy subject's close watcher.
    2. dialog の閉じ注視器 ← null Set subject's close watcher to null.

ダイアログ用のトグルイベントタスクをキューする アルゴリズムは、 所与の ( dialog 要素 dialog, 文字列 旧状態, 文字列 新状態 ) に対し： To queue a dialog toggle event task given a dialog element element, a string oldState, and a string newState:

1. IF［ dialog のトグルタスク追跡子 ≠ null ］： If element's dialog toggle task tracker is not null, then:

   1. 旧状態 ← dialog のトグルタスク追跡子の旧状態 Set oldState to element's dialog toggle task tracker's old state.
   2. dialog のトグルタスク追跡子のタスクを それが属するタスクキューから除去する Remove element's dialog toggle task tracker's task from its task queue.
   3. dialog のトグルタスク追跡子 ← null Set element's dialog toggle task tracker to null.

2. タスク :← 要素タスクをキューする( DOM 操作タスクソース, dialog, 次の手続き ) Queue an element task given the DOM manipulation task source and element to＼

   手続きは： run the following steps:

   1. イベントを発火する( dialog, toggle, ToggleEvent ) — 次のように初期化して ：oldState 属性 ← 旧状態, newState 属性 ← 新状態 Fire an event named toggle at element, using ToggleEvent, with the oldState attribute initialized to oldState and the newState attribute initialized to newState.
   2. dialog のトグルタスク追跡子 ← null Set element's dialog toggle task tracker to null.
3. dialog のトグルタスク追跡子 ← 次を伴う構造体 ：タスク ← タスク, 旧状態 ← 旧状態 Set element's dialog toggle task tracker to a struct with task set to the just-queued task and old state set to oldState.

ダイアログの closed-by 状態を算出する アルゴリズムは、 所与の ( dialog dialog ) に対し： To retrieve a dialog's computed closed-by state, given a dialog dialog:

1. 状態 :← dialog の closedby 属性の状態 ↓

2. IF［ 状態 ＝ 自動 ］： If the state of dialog's closedby attribute is Auto:

   1. IF［ dialog のモーダルか ＝ true ］ ：RETURN 閉じ要請 If dialog's is modal is true, then return Close Request.
   2. RETURN なし Return None.
3. RETURN 状態 Return the state of dialog's closedby attribute.

ダイアログをフォーカスする アルゴリズムは、 所与の ( dialog 要素 dialog ) に対し： The dialog focusing steps, given a dialog element subject, are as follows:

1. IF［ フォーカスを許容する手続き( dialog のノード文書 ) ＝ false ］ ：RETURN false If the allow focus steps given subject's node document return false, then return.
2. コントロール :← null Let control be null.
3. IF［ dialog は autofocus 属性を有さない ］ ：コントロール ← フォーカス委任先( dialog ) If subject has the autofocus attribute, then set control to subject.If control is null, then set control to the focus delegate of subject.
4. IF［ コントロール ＝ null ］ ：コントロール ← dialog If control is null, then set control to subject.

5. オブジェクトをフォーカスする( コントロール ) Run the focusing steps for control.

   注記： コントロール はフォーカス可能でない場合、 これは何もしない。 そうなるのは、［ dialog にフォーカス委任先は無かった ］かつ［ UA は［ dialog 要素は、 一般に，フォーカス可能でない ］ものと裁定していた ］ときに限られる。 その事例では、 当の文書が指名する被フォーカス区画に先の改変を適用することになる。 If control is not focusable, this will do nothing. This would only happen if subject had no focus delegate, and the user agent decided that dialog elements were not generally focusable. In that case, any earlier modifications to the focused area of the document will apply.

6. トップ文書 :← コントロール のノードナビ可能のトップレベル辿り可能にて作動中な文書 Let topDocument be control's node navigable's top-level traversable's active document.
7. IF［ ( コントロール のノード文書の生成元, トップ文書 の生成元 ) は同一生成元でない ］ ：RETURN If control's node document's origin is not the same as the origin of topDocument, then return.
8. トップ文書 の自動フォーカス候補群を空にする Empty topDocument's autofocus candidates.
9. トップ文書 の自動フォーカスは処理済みか ← true Set topDocument's autofocus processed flag to true.

開いたダイアログたちを軽く退ける アルゴリズムは、 所与の ( PointerEvent イベント ) に対し： To light dismiss open dialogs, given a PointerEvent event:

1. Assert： イベント の isTrusted 属性 ＝ true Assert: event's isTrusted attribute is true.
2. Assert： イベント のターゲット ≠ null 【この段は、この訳による補完。】
3. 文書 :← イベント のターゲットのノード文書 Let document be event's target's node document.
4. IF［ 文書 の開いたダイアログリストは空である ］ ：RETURN If document's open dialogs list is empty, then return.
5. 先祖 :← 最も近いクリックされたダイアログを見出す( イベント ) Let ancestor be the result of running nearest clicked dialog given event.
6. IF［ イベント の type ＝ "pointerdown" ］ ：文書 のダイアログ pointerdown ターゲット ← 先祖 If event's type is "pointerdown", then set document's dialog pointerdown target to ancestor.

7. ELSE IF［ イベント の type ＝ "pointerup" ］： If event's type is "pointerup", then:

   1. 同じターゲットか :← IS［ 先祖 ＝ 文書 のダイアログ pointerdown ターゲット ］ Let sameTarget be true if ancestor is document's dialog pointerdown target.
   2. 文書 のダイアログ pointerdown ターゲット ← null Set document's dialog pointerdown target to null.
   3. IF［ 同じターゲットか ＝ false ］ ：RETURN If sameTarget is false, then return.
   4. 最上層なダイアログ :← 文書 の開いたダイアログリストを成す最後の要素 Let topmostDialog be the last element of document's open dialogs list.
   5. IF［ 先祖 ＝ 最上層なダイアログ ］ ：RETURN If ancestor is topmostDialog, then return.
   6. IF［ ダイアログの closed-by 状態を算出する( 最上層なダイアログ ) ≠ 何でも ］ ：RETURN If topmostDialog's computed closed-by state is not Any, then return.
   7. Assert： 最上層なダイアログ の閉じ注視器 ≠ null Assert: topmostDialog's close watcher is not null.
   8. 閉じ注視器に閉じるよう要請する( 最上層なダイアログ の閉じ注視器, false ) Request to close topmostDialog's close watcher with false.

軽く退けるふるまいを走らす アルゴリズムは、 所与の ( PointerEvent イベント ) に対し： To run light dismiss activities, given a PointerEvent event:

1. 開いた popover たちを軽く退ける( イベント ) Run light dismiss open popovers with event.
2. 開いたダイアログたちを軽く退ける( イベント ) Run light dismiss open dialogs with event.

軽く退けるふるまいを走らすは、 利用者がページ上のどこでも［ クリックした／タッチした ］ときに， [POINTEREVENTS] 仕様により call されることになる。 Run light dismiss activities will be called by the Pointer Events spec when the user clicks or touches anywhere on the page.

最も近いクリックされたダイアログを見出す アルゴリズムは、 所与の ( PointerEvent イベント ) に対し： To find the nearest clicked dialog, given a PointerEvent event:

1. ターゲット :← イベント のターゲット Let target be event's target.

2. IF［ ∧↓ ］…

   • ターゲット は dialog 要素である
   • ターゲット は open 属性を有している
   • ターゲット のモーダルか ＝ true

   • イベント の ( clientX, clientY ) は、 ターゲット の限界域の外側にある

     注記： この条件は、［ イベント が当のダイアログの ::backdrop 疑似要素で生じたものである場合 ］でも［ ターゲット は当の dialog 要素になる ］ことから必要になる。

   …ならば ：RETURN null

   If target is a dialog element, target has an open attribute, target's is modal is true, and event's clientX and clientY are outside the bounds of target, then return null.The check for clientX and clientY is because a pointer event that hits the ::backdrop pseudo element of a dialog will result in event having a target of the dialog element itself.
3. 現在のノード :← ターゲット Let currentNode be target.

4. WHILE［ 現在のノード ≠ null ］： While currentNode is not null:

   1. IF［ 現在のノード は dialog 要素である ∧ 現在のノード は open 属性を有している ］ ：RETURN 現在のノード If currentNode is a dialog element and currentNode has an open attribute, then return currentNode.
   2. 現在のノード ← 平坦ツリーにおける 現在のノード の親 Set currentNode to currentNode's parent in the flat tree.
5. RETURN null Return null.