利用中のブラウザで
・これらの属性の
・ x: y: を入力に

次の媒体クエリ:

に対し, Window.matchMedia()
利用中のブラウザでこれらの属性の
利用中のブラウザでマウス位置に対する
(1) elementFromPoint() の結果を
(1) elementsFromPoint() の結果の Array.length の
(2) caretPositionFromPoint()
利用中のブラウザで
マウスが重なった要素について
・これらの属性の
getClientRects()
getBoundingClientRect()
ランダムに選ばれた 要素に対し
scrollIntoView( )
scrollIntoView( { behavior: , block: , inline: } )
利用中のブラウザでマウスが重なった要素について,これらの属性の
利用中のブラウザでテキスト選択に応じて,その範囲に対する
(1) getClientRects()
(2) getBoundingClientRect()
利用中のブラウザで mousemove イベントに対する,これらの属性の
W3C

CSSOM View Module

2016 年 8 月 25 日付 W3C 編集者草案

このバージョン
編集者草案
https://drafts.csswg.org/cssom-view/
最新発行版
https://www.w3.org/TR/cssom-view-1/
以前のバージョン
https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/
https://www.w3.org/TR/2013/WD-cssom-view-20131217/
https://www.w3.org/TR/2011/WD-cssom-view-20110804/
https://www.w3.org/TR/2009/WD-cssom-view-20090804/
https://www.w3.org/TR/2008/WD-cssom-view-20080222/
https://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/
テスト一式
http://test.csswg.org/suites/cssom-view-1_dev/nightly-unstable/
最新の課題
仕様内
GitHub Issues
編集
Simon Pieters (Opera Software ASA)
前任編集者
Glenn Adams (Cox Communications, Inc.) glenn.adams@cos.com
Anne van Kesteren (Opera Software ASA) annevk@annevk.nl
旧来の課題リスト
Bugzilla
Copyright © 2016 W3C® (MIT, ERCIM, Keio, Beihang). W3C liability, trademark and document use rules apply.

要約

この仕様で導入される API は、作者に,文書の視覚的ビューを調べたり, 操作するための方法を与える。 これには、要素のレイアウトボックスの位置の取得, スクリプトを通した表示域サイズの取得, 要素のスクロール処理なども含まれる。 The APIs introduced by this specification provide authors with a way to inspect and manipulate the visual view of a document. This includes getting the position of element layout boxes, obtaining the width of the viewport through script, and also scrolling an element.

CSS は、( HTML や XML などの)構造を備える文書から, スクリーン, 紙, スピーチ, 等々 の媒体への具現化法を記述するための言語である。 CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, in speech, etc.

この文書の位置付け

この節では、発行時点における… 【 以下,この節の内容は CSS 日本語訳 共通ページ に委譲。 】

1. 背景

この仕様にて定義される特色機能の多くは、長い間~browserから~supportされてきた。 この仕様の目標は、これらの特色機能を,すべての~browserが相互運用可能な形に実装し得るように定義することである。 仕様では、作者にとって有用になるであろう,一組の新たな特色機能も定義する。 (If they are not you can bug us!) ◎ Many of the features defined in this specification have been supported by browsers for a long period of time. The goal of this specification is to define these features in such a way that they can be implemented by all browsers in an interoperable manner. The specification also defines a couple of new features that will hopefully be useful to authors. (If they are not you can bug us!)

2. 各種用語

この仕様で用いられる用語は DOM, CSSOM, HTML による。 `DOM$r `CSSOM$r `HTML$r ◎ Terminology used in this specification is from DOM, CSSOM and HTML. [DOM] [CSSOM] [HTML]

`HTML body 要素@ とは、根 `HTML 要素$ `html^e の子である,最初の `body^e `HTML 要素$ である。 ◎ The HTML body element is the first body HTML element child of the root HTML element html.

【 文書の `根~要素@ という語も現れる。 これは、`文書~要素$と同義( HTML 文書であれば `html^e 要素)になると見られる。 】

`内容~辺@, `~padding辺@, `~border辺@, `~margin辺@, `表示域@(~viewport) は CSS にて定義される。 ◎ Content edge, padding edge, border edge, margin edge, and viewport are defined by CSS.

【 参照 — 各種~辺の定義と図式, 表示域

[ 要素/`表示域$ ]は、次のいずれかを満たすとき, `~scrolling~box@ が結付けられる:

  • それは、~scrolling0の仕組みを有する。
  • 次の両者を満たす:

    • その内容は、その内容~区画を~overflowする
    • その[ `overflow-x$p, `overflow-y$p ]いずれかの~propの使用値は `hidden$v である `CSS3-OVERFLOW-3$r
◎ Elements and viewports have an associated scrolling box if has a scrolling mechanism or it overflows its content area and the used value of the overflow-x or overflow-y property is hidden. [CSS3-BOX]

【 この`~scrolling~box$を指して,単に 要素/表示域の~scrolling~box と記す。 そのような~boxが結付けられていない(存在しない)ことを, (要素/表示域は)~scrolling~boxを持たない と記す。 】

要素は、次のすべてを満たすとき, `~scroll可能になり得る@ とされる。 ◎ An element is potentially scrollable if all of the following conditions are true:

注記: 要素は、`~scroll可能になり得る$としても,`~scrolling~box$は持たないこともある。 具体的には、要素は `overflow$p が `auto^v に設定されているが,その内容は内容~区画を~overflowしない場合など。 ◎ Note: An element that is potentially scrollable might not have a scrolling box. For instance, it could have overflow set to auto but not have its content overflowing its content area.

`表示域$または要素の`~scrolling~box$は、`表示域$の/要素の`塊~flow方向$ と`行内~基底~方向$ に応じて,次の様な縦横2方向の `~overflow方向@ を持つ: ◎ A scrolling box of a viewport or element has two overflow directions, depending on the viewport’s or element’s block flow direction and inline base direction, as follows:

`塊~flow方向$ `行内~基底~方向$ `~overflow方向$
top-to-bottom ↓ left-to-right → 右方&下方 →↓
left-to-right → left-to-right † (同上)
top-to-bottom ↓ right-to-left ← 左方&下方 ←↓
right-to-left ← left-to-right † (同上)
right-to-left ← right-to-left † 左方&上方 ←↑
left-to-right → right-to-left † 右方&上方 →↑

【† `行内~基底~方向$の left-to-right, right-to-left は順に,[ HTML `dir$ 要素や CSS `direction$p ~prop ]がとる値 `ltr^v, `rtl^v に対応する。 上の表から,縦書き(`塊~flow方向$が left-to-right / right-to-left )のときの left-to-right は下向きを意味することになる。 その意図は、縦組において 左横書きの~textを 90 度回転してレイアウトするときに,行が伸びる方向を下向きにすることに対応すると見られる(右横書きの~textは逆方向 — 上向き — になる)。 】

If the block flow direction is top-to-bottom and the inline base direction is left-to-right
If the block flow direction is left-to-right and the inline base direction is left-to-right
Rightward and downward.
If the block flow direction is top-to-bottom and the inline base direction is right-to-left
If the block flow direction is right-to-left and the inline base direction is left-to-right
Leftward and downward.
If the block flow direction is right-to-left and the inline base direction is right-to-left
Leftward and upward.
If the block flow direction is left-to-right and the inline base direction is right-to-left
Rightward and upward.

`表示域$/要素の `~scrolling区画@ とは、その`~overflow方向$に応じて 各辺が次の様に定められる,~boxである: ◎ The term scrolling area refers to a box of a viewport or an element that has the following edges, depending on the viewport’s or element’s scrolling box’s overflow directions.

【 この訳では、原文の内容と等価になるように,パラメタ化により大幅に圧縮して記述する。 】

記号 %D は 右方/左方/下方/上方 いずれかの方向を表し, `D'^V は その反対~方向を表すとする。 `~overflow方向$に %D が含まれている(すなわち `D'^V は含まれていない)ならば、~boxの %D, `D'^V 側の辺は次で与えられる:

`表示域$に対しては 要素に対しては
%D 側の辺 [ `初期~包含塊$の %D 側の辺, および `表示域$のすべての子孫の~boxの %D 側の`~margin辺$ ]のうち,最も %D 側の辺。 ◎ The D-most edge of the D edge of the initial containing block and the D margin edge of all of the viewport’s descendants' boxes. [ 要素の %D 側の`~padding辺$, および 要素のすべての子孫の~boxの %D 側の`~margin辺$ ]のうち,最も %D 側の辺 — ただし,要素の先祖を`包含塊$として持つような~boxは除外する。 ◎ The D-most edge of the element’s D padding edge and the D margin edge of all of the element’s descendants' boxes, excluding boxes that have an ancestor of the element as their containing block.
`D'^V 側の辺 `初期~包含塊$の `D'^V 側の辺。 ◎ The D' edge of the initial containing block. 要素の `D'^V 側の`~padding辺$。 ◎ The element’s D' padding edge.

【 子孫~box( descendant boxes ): CSS の`視覚~整形~model$参照。 】【 “除外”: 例えば “position:fixed” にされている子孫~要素により生成される~boxは、除外されると見られる。 】

If the overflow directions are… For a viewport For an element
rightward and downward
top edge
The top edge of the initial containing block.
right edge
The right-most edge of the right edge of the initial containing block and the right margin edge of all of the viewport’s descendants' boxes.
bottom edge
The bottom-most edge of the bottom edge of the initial containing block and the bottom margin edge of all of the viewport’s descendants' boxes.
left edge
The left edge of the initial containing block.
top edge
The element’s top padding edge.
right edge
The right-most edge of the element’s right padding edge and the right margin edge of all of the element’s descendants' boxes, excluding boxes that have an ancestor of the element as their containing block.
bottom edge
The bottom-most edge of the element’s bottom padding edge and the bottom margin edge of all of the element’s descendants' boxes, excluding boxes that have an ancestor of the element as their containing block.
left edge
The element’s left padding edge.
leftward and downward
top edge
The top edge of the initial containing block.
right edge
The right edge of the initial containing block.
bottom edge
The bottom-most edge of the bottom edge of the initial containing block and the bottom margin edge of all of the viewport’s descendants' boxes.
left edge
The left-most edge of the left edge of the initial containing block and the left margin edge of all of the viewport’s descendants' boxes.
top edge
The element’s top padding edge.
right edge
The element’s right padding edge.
bottom edge
The bottom-most edge of the element’s bottom padding edge and the bottom margin edge of all of the element’s descendants' boxes, excluding boxes that have an ancestor of the element as their containing block.
left edge
The left-most edge of the element’s left padding edge and the left margin edge of all of the element’s descendants' boxes, excluding boxes that have an ancestor of the element as their containing block.
leftward and upward
top edge
The top-most edge of the top edge of the initial containing block and the top margin edge of all of the viewport’s descendants' boxes.
right edge
The right edge of the initial containing block.
bottom edge
The bottom edge of the initial containing block.
left edge
The left-most edge of the left edge of the initial containing block and the left margin edge of all of the viewport’s descendants' boxes.
top edge
The top-most edge of the element’s top padding edge and the top margin edge of all of the element’s descendants' boxes, excluding boxes that have an ancestor of the element as their containing block.
right edge
The element’s right padding edge.
bottom edge
The element’s bottom padding edge.
left edge
The left-most edge of the element’s left padding edge and the left margin edge of all of the element’s descendants' boxes, excluding boxes that have an ancestor of the element as their containing block.
rightward and upward
top edge
The top-most edge of the top edge of the initial containing block and the top margin edge of all of the viewport’s descendants' boxes.
right edge
The right-most edge of the right edge of the initial containing block and the right margin edge of all of the viewport’s descendants' boxes.
bottom edge
The bottom edge of the initial containing block.
left edge
The left edge of the initial containing block.
top edge
The top-most edge of the element’s top padding edge and the top margin edge of all of the element’s descendants' boxes, excluding boxes that have an ancestor of the element as their containing block.
right edge
The right-most edge of the element’s right padding edge and the right margin edge of all of the element’s descendants' boxes, excluding boxes that have an ancestor of the element as their containing block.
bottom edge
The element’s bottom padding edge.
left edge
The element’s left padding edge.

`~scrolling区画$の `原点@ は、 `~scrolling区画$が`表示域$である場合は,`初期~包含塊$の原点に位置し、 他の場合は,要素の~scroll位置が既定の位置にあるときの 要素の~padding辺の左上隅に位置する。 x, y 座標は それぞれ右方, 下方へ増大する。 ◎ The origin of a scrolling area is the origin of the initial containing block if the scrolling area is a viewport, and otherwise the top left padding edge of the element when the element has its default scroll position. The x-coordinate increases rightwards, and the y-coordinate increases downwards.

~boxあるいは要素の `開始辺@ / `終止辺@ とは、それぞれ,その `~overflow方向$と 反対~方向 / 同じ方向 に位置する2辺を指す(例えば,`~overflow方向$が 右方&下方 ならば、 開始辺は左辺および上辺 / 終止辺は右辺および下辺 等々)。 `ここでも、原文と等価になるように,圧縮して訳している。^tnote

The beginning edges of a particular set of edges of a box or element are the following edges:

If the overflow directions are rightward and downward
The top and left edges.
If the overflow directions are leftward and downward
The top and right edges.
If the overflow directions are leftward and upward
The bottom and right edges.
If the overflow directions are rightward and upward
The bottom and left edges.

The ending edges of a particular set of edges of a box or element are the following edges:

If the overflow directions are rightward and downward
The bottom and right edges.
If the overflow directions are leftward and downward
The bottom and left edges.
If the overflow directions are leftward and upward
The top and left edges.
If the overflow directions are rightward and upward
The top and right edges.

語 `CSS ~layout~box@ は CSS のそれと同じ意味とする。 この仕様の要件の目的においては、 `display$p ~propの算出値が `table-column$v / `table-column-group$v になるような要素は、(それぞれ, ~column/~column~groupの) `CSS ~layout~box$を持つものと見なされ~MUST。 `要素は、複数の~layout~boxを持つこともある。^tnote ◎ The term CSS layout box refers to the same term in CSS. For the purpose of the requirements in this specification, elements that have a computed value of the display property that is table-column or table-column-group must be considered to have an associated CSS layout box (the column or column group, respectively).

語 `SVG ~layout~box@ は SVG のそれと同じ意味とする。 ◎ The term SVG layout box refers to the same term in SVG.

語 `CSS ~layout~box$, `SVG ~layout~box$ のいずれも,現時点では CSS や SVG の中で定義されていない。 ◎ The terms CSS layout box and SVG layout box are not currently defined by CSS or SVG.

語 `~layout~box@ は `CSS ~layout~box$, `SVG ~layout~box$ のいずれかを指す。 ◎ The term layout box refers to either a CSS layout box or an SVG layout box.

【 “要素に結付けられている( CSS / SVG )`~layout~box$のことを,単に 要素の~layout~box と記す。 そのような~boxが存在しない(例えば描画の対象でない要素など)ことを, (要素は)~layout~boxを持たない と記す。 】

語 `座標系変換@ は、 SVG / CSS による,座標系変換を指す。 `SVG$r `CSS-TRANSFORMS-1$r ◎ The term transforms refers to SVG transforms and CSS transforms. [SVG] [CSS-TRANSFORMS-1]

IDL ~method/属性(以下,単に “~member” )から別の~memberが呼ばれるときは、~UAは,~memberの内部~APIを呼出さ~MUST — すなわち、作者は独自の ECMAScript ~propや関数で上書きして,~memberの挙動を変更することはできない。 ◎ When a method or an attribute is said to call another method or attribute, the user agent must invoke its internal API for that attribute or method so that e.g. the author can’t change the behavior by overriding attributes or methods with custom properties or functions in ECMAScript.

特に指定されない限り、文字列の比較は,`文字大小区別$で行われる。 ◎ Unless otherwise stated, string comparisons are done in a case-sensitive manner.

2.1. CSS ~pixel

特に指定されない限り、この仕様で定義される~APIに対する,すべての座標と寸法は、 CSS ~pixel単位とする。 ◎ All coordinates and dimensions for the APIs defined in this specification are in CSS pixels, unless otherwise specified.

注記: このことは、例えば `matchMedia()^c には該当しない。 そのような所では単位は明示的に与えられる。 ◎ Note: This does not apply to e.g. matchMedia() as the units are explicitly given there.

2.2. ~zooming

~zoomには,次の2種類のものがある `CSS-DEVICE-ADAPT$r:

  • 初期 表示域の~sizeに影響する `頁~zoom@,および
  • 拡大鏡のように挙動して, 初期 表示域や実際の表示域には影響しない, `~pinch~zoom@ 。 `局所的な~zoom。おそらく、マルチタッチ機器の UI で利用される,二本指で “つまんで” 拡げる操作に由来する呼称。^tnote
◎ There are two kinds of zoom, page zoom which affects the size of the initial viewport, and pinch zoom which acts like a magnifying glass and does not affect the initial viewport or actual viewport. [CSS-DEVICE-ADAPT]

2.3. ~Webに公開される~screen情報

~UAは、利用者の~privacyを保護するためとして,出力~機器の~screenについての情報を隠すことを選んでもよい。 各種~APIにわたって一貫する方式でそうするため、この仕様は、以下の区画を表す用語を定義する。 各種~区画は、いずれも有限の ( 横幅, 縦幅 ) があり, 原点は左上隅に~~位置し, ( x, y ) 座標は順に ( 右方, 下方 ) に増大し,単位は CSS ~pixelとする: ◎ User agents may choose to hide information about the screen of the output device, in order to protect the user’s privacy. In order to do so in a consistent manner across APIs, this specification defines the following terms, each having a width and a height, the origin being the top left corner, and the x- and y-coordinates increase rightwards and downwards, respectively.

`~Webに公開される~screen区画@

次のうち,いずれかとする: ◎ The Web-exposed screen area is one of the following:

  • 出力~機器の区画。 ◎ The area of the output device, in CSS pixels.
  • `表示域$の区画。 ◎ The area of the viewport, in CSS pixels.
`~Webに公開される可用な~screen区画@

次のうち,いずれかとする: ◎ The Web-exposed available screen area is one of the following:

  • 出力~機器の描画面として可用な区画。 ◎ The available area of the rendering surface of the output device, in CSS pixels.
  • 出力~機器の区画。 ◎ The area of the output device, in CSS pixels.
  • `表示域$の区画。 ◎ The area of the viewport, in CSS pixels.

【日本語訳に固有の表記規約】

この訳の,~algoや定義の記述に利用されている各種記号( ~LET, ~EQ, ~IF, 此れ, ~WHILE 等々)の意味や定義の詳細は、~SYMBOL_DEF_REFを~~参照されたし。

加えて、記述を簡潔にするため,次の(非公式な)用語も定義する:

  • `Document$I ~interfaceを実装する~objは、単に `文書@ と略記される。
  • `表示域$の `有効~横幅@ / `有効~縦幅@ とは、`表示域$に~scroll~barが描画されているときは その部分の区画は除外した,`表示域$の横幅/縦幅を表す(~scroll~barが無ければ,通常の意味の横幅/縦幅と同じになる)。

加えて、次の記法を用いる:

  • 記法 “[ %W | %H ]” ( "|" は全角の縦棒)は、縦横それぞれの方向についての,並立的な記述を表す。

    例えば: “[ x 属性 | y 属性 ] は表示域の[ 左端の x 座標 | 上端の y 座標 ] を返す” と記されていれば、それは2つの記述: “x 属性 は表示域の左端の x 座標を返す”,
    “y 属性 は表示域の上端の y 座標を返す”
    が,並立的に重ねられていることを表す。 この対応関係は,同じ~algoの中の別々の段の間でも維持される。

    (このような表記を導入する理由は、記述の簡約以外にも,[ 縦横両方向に関する記述であって, その両方向について対称性がある ]ことを明らかにすることもある。)

3. 共通基盤

3.1. ~scrolling0

~UAは,次を入力に…:

  • 関連要素: %要素
  • ~scrollの挙動(省略可): %挙動
  • 目的位置: %目的位置

… `~scrolling~box$ %~box の `~scrollを遂行する@ ときは、次を走らす:

◎ When a user agent is to perform a scroll of a scrolling box box, to a given position position, an associated element element and optionally a scroll behavior behavior (which is "auto" if omitted), the following steps must be run:
  1. ~IF[ %挙動 は省略されている ] ⇒ %挙動 ~SET `auto$l ◎ ↑
  2. ~IF[ %~box において`滑らかな~scroll$は進行中である ] ⇒ それを`中止-$する ◎ Abort any ongoing smooth scroll for box.
  3. ~IF[ ~UAは, `scroll-behavior$p ~propを尊守する ]~AND[ 次のいずれかが満たされる ]…: ◎ If the user agent honors the scroll-behavior property and one of the following are true:

    【 尊守( honor ) — ~supportしていて, かつ その機能が(環境設定 他により)可能化されてもいる,といった含みも込められた語と見られる。 】

    • [ %挙動 ~EQ `auto$l ]~AND[ %要素 ~NEQ ~NULL ]~AND[ %要素 の `scroll-behavior$p ~propの算出値 ~EQ `smooth$v ] ◎ behavior is "auto" and element is not null and its computed value of the scroll-behavior property is smooth
    • %挙動 ~EQ `smooth$l ◎ behavior is smooth

    …ならば ⇒ %目的位置 へ向けて, %~box を`滑らかに~scroll$する ◎ ...then perform a smooth scroll of box to position. Otherwise, perform an instant scroll of box to position.

  4. ~ELSE ⇒ %目的位置 へ向けて, %~box を`瞬時に~scroll$する

~UAは,%目的位置 へ向けて `~scrolling~box$ %~box を `滑らかに~scroll@ するときは、~UA定義の~~速度&~~動きにより, %~box の~scroll位置を更新し~MUST。 ~scrollの `完了-@ 時には、 %~box の~scroll位置は %目的位置 にされ~MUST。 ~scrollは~algoまたは利用者により `中止-@ され得る。 ◎ When a user agent is to perform a smooth scroll of a scrolling box box to position, it must update the scroll position of box in a user-agent-defined fashion over a user-agent-defined amount of time. When the scroll is completed, the scroll position of box must be position. The scroll can also be aborted, either by an algorithm or by the user.

~UAは,`~scrolling~box$ %~box を %目的位置 へ向けて `瞬時に~scroll@ させるときは、 %~box の~scroll位置を %目的位置 に更新し~MUST。 ◎ When a user agent is to perform an instant scroll of a scrolling box box to position, it must update the scroll position of box to position.

文書 %文書 を `文書の開始位置に~scroll@ するときは、次を走らす: ◎ To scroll to the beginning of the document for a document document, follow these steps:

  1. %表示域 ~LET %文書 に結付けられている`表示域$ ◎ Let viewport be the viewport that is associated with document.
  2. %目的位置 ~LET %表示域 の`開始辺$が`~scrolling区画$の`開始辺$に揃えられたときに %表示域 がとる,~scroll位置 ◎ Let position be the the scroll position viewport would have by aligning the beginning edges of the scrolling area with the beginning edges of viewport.
  3. ~IF[ %目的位置 ~EQ %表示域 の現在の~scroll位置 ]~AND[ %表示域 において`滑らかな~scroll$は進行中でない ] ⇒ ~RET ◎ If position is the same as viewport’s current scroll position, and viewport does not have an ongoing smooth scroll, abort these steps.
  4. 次を入力に, %表示域 の`~scrollを遂行する$

    関連要素
    %文書 の`根~要素$が在れば それ / 無ければ ~NULL
    目的位置
    %目的位置
    ◎ Perform a scroll of viewport to position, and document’s root element as the associated element, if there is one, or null otherwise.

注記: この~algoは、 HTML により定義される,[ `#top^c 素片識別子 `The indicated part of the document^tnote へ~navigateするとき ]に利用される。 `HTML$r ◎ Note: This algorithm is used when navigating to the #top fragment identifier, as defined in HTML. [HTML]

3.2. WebIDL 値

与えられた値 %x を `有限~値に正規化-@ するときは、 %x が特別な浮動小数点リテラル値 ( `Infinity^I / `-Infinity^c / `NaN^I ) `WEBIDL$r である場合は、それを値 `0^c にする。 ◎ When asked to normalize non-finite values for a value x, if x is one of the three special floating point literal values (Infinity, -Infinity or NaN), then x must be changed to the value 0. [WEBIDL]

4. `Window^I ~interfaceに対する拡張

⇒! enum `ScrollBehavior@I { `auto@l, `instant@l, `smooth@l }; dictionary `ScrollOptions@I { `ScrollBehavior$I `behavior@mb = `auto$l; }; dictionary `ScrollToOptions@I : `ScrollOptions$I { unrestricted double `left@mb; unrestricted double `top@mb; };◎ ⇒! partial interface `Window!I { [NewObject] `MediaQueryList$I `matchMedia$m(DOMString %query); [SameObject, Replaceable] readonly attribute `Screen$I `screen$m; // 閲覧文脈 void `moveTo$m(long %x, long %y); void `moveBy$m(long %x, long %y); void `resizeTo$m(long %x, long %y); void `resizeBy$m(long %x, long %y); // 表示域 [Replaceable] readonly attribute long `innerWidth$m; [Replaceable] readonly attribute long `innerHeight$m; // 表示域~scroll [Replaceable] readonly attribute double `scrollX$m; [Replaceable] readonly attribute double `pageXOffset$m; [Replaceable] readonly attribute double `scrollY$m; [Replaceable] readonly attribute double `pageYOffset$m; void `scroll$m(optional `ScrollToOptions$I %options); void `scroll$m(unrestricted double %x, unrestricted double %y); void `scrollTo$m(optional `ScrollToOptions$I %options); void `scrollTo$m(unrestricted double %x, unrestricted double %y); void `scrollBy$m(optional `ScrollToOptions$I %options); void `scrollBy$m(unrestricted double %x, unrestricted double %y); // ~client~window [Replaceable] readonly attribute long `screenX$m; [Replaceable] readonly attribute long `screenY$m; [Replaceable] readonly attribute long `outerWidth$m; [Replaceable] readonly attribute long `outerHeight$m; [Replaceable] readonly attribute double `devicePixelRatio$m; };◎ `Window^dgm

`matchMedia(query)@m ~methodの被呼出時には、次を走らせ~MUST: ◎ When the matchMedia(query) method is invoked these steps must be run:

  1. ~RET 次のように設定された,新たな `MediaQueryList$I ~obj:

    • `媒体~query~list$ ~SET %query を 構文解析- した結果
    • `文書$mq ~SET 此れに`結付けられている文書$
    ◎ Let parsed media query list be the result of parsing query. ◎ Return a new MediaQueryList object, with the context object’s associated Document as the document, with parsed media query list as its associated media query list.

`screen@m 属性の被取得時には ⇒ `Window$I ~objに結付けられている `Screen$I ~objを返さ~MUST。 ◎ The screen attribute must return the Screen object associated with the Window object.

注記: `WindowProxy$I ~objを通した `screen^c への~accessでは、`文書$が~navigateされた際には、異なる結果が取得され得る。 ◎ Note: Accessing screen through a WindowProxy object might yield different results when the Document is navigated.

`moveTo(x, y)@m ~methodの被呼出時には、次を走らせ~MUST: ◎ The moveTo(x, y) method must follow these steps:

  1. 任意選択で ⇒ ~RET ◎ Optionally, terminate these steps.
  2. %target ~LET 此れの`閲覧文脈$ ◎ Let target be the browsing context of the context object.
  3. ~IF[[ `~incumbent設定群~obj$の`担当の閲覧文脈$ ]に %target の `~resizeと移動は許容され$ていない ] ⇒ ~RET ◎ Let source be the responsible browsing context of the incumbent settings object. ◎ If source is not allowed to resize and move target, terminate these steps.
  4. 任意選択で,~UA定義0の方式で ⇒ %x, %y を[ 可用な空間の外に~windowが出ない様な大きさ ]に切詰める ◎ Optionally, clamp x and y in a user-agent-defined manner so that the window does not move outside the available space.
  5. %target の~windowを,その左上隅が[ 出力~機器の左上隅から相対的な[ %target の CSS ~pixel単位による座標 (%x, %y) ]]に揃うように移動させる。 ここで,各~座標軸の正方向は[ 右方, 下方 ]とする。 ◎ Move target’s window such that the window’s top left corner is at coordinates (x, y) relative to the top left corner of the output device, measured in CSS pixels of target. The positive axes are rightward and downward.

`moveBy(x, y)@m ~methodの被呼出時には、次を走らせ~MUST: ◎ The moveBy(x, y) method must follow these steps:

  1. 任意選択で ⇒ ~RET ◎ Optionally, terminate these steps.
  2. %target ~LET 此れの`閲覧文脈$ ◎ Let target be the browsing context of the context object.
  3. ~IF[[ `~incumbent設定群~obj$の`担当の閲覧文脈$ ]に %target の `~resizeと移動は許容され$ていない ] ⇒ ~RET ◎ Let source be the responsible browsing context of the incumbent settings object. ◎ If source is not allowed to resize and move target, terminate these steps.
  4. 任意選択で,~UA定義0の方式で ⇒ %x, %y を[ 可用な空間の外に~windowが出ない様な大きさ ]に切詰める ◎ Optionally, clamp x and y in a user-agent-defined manner so that the window does not move outside the available space.
  5. %target の~windowを, %target の CSS ~pixel単位で[ 右方に %x, 下方に %y ]だけ移動させる ◎ Move target’s window x CSS pixels of target rightward and y CSS pixels of target downward.

`resizeTo(x, y)@m ~methodの被呼出時には、次を走らせ~MUST: ◎ The resizeTo(x, y) method must follow these steps:

  1. 任意選択で ⇒ ~RET ◎ Optionally, terminate these steps.
  2. %target ~LET 此れの`閲覧文脈$ ◎ Let target be the browsing context of the context object.
  3. ~IF[[ `~incumbent設定群~obj$の`担当の閲覧文脈$ ]に %target の `~resizeと移動は許容され$ていない ] ⇒ ~RET ◎ Let source be the responsible browsing context of the incumbent settings object. ◎ If source is not allowed to resize and move target, terminate these steps.
  4. 任意選択で,~UA定義0の方式で ⇒ %x, %y を[ 可用な空間の中で~windowの大きさが~~適度な上限/下限に収まる ]ように切詰める ◎ Optionally, clamp x and y in a user-agent-defined manner so that the window does not get too small or bigger than the available space.
  5. %target の~windowを,~resizeする — その右辺と下辺を %target の CSS ~pixel単位で[ 表示域の左辺と右辺の距離は %x, 表示域の上辺と下辺の距離は %y ]になるように移動させる ◎ Resize target’s window by moving its right and bottom edges such that the distance between the left and right edges of the viewport are x CSS pixels of target and the distance between the top and bottom edges of the viewport are y CSS pixels of target.
  6. 任意選択で,~UA定義0の方式で ⇒ %target の~windowを,可用な空間をはみ出さないように移動させる ◎ Optionally, move target’s window in a user-agent-defined manner so that it does not grow outside the available space.

`resizeBy(x, y)@m ~methodの被呼出時には、次を走らせ~MUST: ◎ The resizeBy(x, y) method must follow these steps:

  1. 任意選択で ⇒ ~RET ◎ Optionally, terminate these steps.
  2. %target ~LET 此れの`閲覧文脈$ ◎ Let target be the browsing context of the context object.
  3. ~IF[[ `~incumbent設定群~obj$の`担当の閲覧文脈$ ]に %target の `~resizeと移動は許容され$ていない ] ⇒ ~RET ◎ Let source be the responsible browsing context of the incumbent settings object. ◎ If source is not allowed to resize and move target, terminate these steps.
  4. 任意選択で,~UA定義0の方式で ⇒ %x, %y を[ 可用な空間の中で~windowの大きさが~~適度な上限/下限に収まる ]ように切詰める ◎ Optionally, clamp x and y in a user-agent-defined manner so that the window does not get too small or bigger than the available space.
  5. %target の~windowを,~resizeする — その右辺と下辺を %target の CSS ~pixel単位で[ 左辺を %x, 上辺を %y ]だけ移動させる ◎ Resize target’s window by moving its right edge x CSS pixels of target rightward and its bottom edge y CSS pixels of target downward.
  6. 任意選択で,~UA定義0の方式で ⇒ %target の~windowを,可用な空間をはみ出さないように移動させる ◎ Optionally, move target’s window in a user-agent-defined manner so that it does not grow outside the available space.

次のすべての条件が成立するとき、 `閲覧文脈$ %A には,`閲覧文脈$ %B の `~resizeと移動は許容され@ る: ◎ A browsing context A is allowed to resize and move a browsing context B if all the following conditions are met:

[ `innerWidth@m | `innerHeight@m ]属性の被取得時には、次を走らせ~MUST:

  1. ~IF[ 此れの`表示域$は無い ] ⇒ ~RET ~zero
  2. ~RET `表示域$の[ 横幅 | 縦幅 ](~scroll~barが描画されている場合はその~sizeも含める)
◎ The innerWidth attribute must return the viewport width including the size of a rendered scroll bar (if any), or zero if there is no viewport.

表示域の横幅は,次の~code片で取得できる: ◎ The following snippet shows how to obtain the width of the viewport:

var viewportWidth = innerWidth

The innerHeight attribute must return the viewport height including the size of a rendered scroll bar (if any), or zero if there is no viewport.

[ `scrollX@m | `scrollY@m ]属性の被取得時には、次を走らせ~MUST:

  1. ~IF[ 此れの`表示域$は無い ] ⇒ ~RET ~zero
  2. ~RET `初期~包含塊$原点に相対的な, `表示域$の[ 左端の x 座標 | 上端の y 座標 ]
◎ The scrollX attribute attribute must return the x-coordinate, relative to the initial containing block origin, of the left of the viewport, or zero if there is no viewport.

[ `pageXOffset@m | `pageYOffset@m ]属性の被取得時には ⇒ [ `scrollX$m | `scrollY$m ]属性と同じ値を返さ~MUST。 ◎ The pageXOffset attribute must return the value returned by the scrollX attribute.

The scrollY attribute attribute must return the y-coordinate, relative to the initial containing block origin, of the top of the viewport, or zero if there is no viewport.

The pageYOffset attribute must return the value returned by the scrollY attribute.

`scroll()@m ~methodの被呼出時には、次を走らせ~MUST: ◎ When the scroll() method is invoked these steps must be run:

  1. ~IF[ ~methodは 1 個の引数 %options を伴って呼出された ]: ◎ If invoked with one argument, follow these substeps:

    1. %x ~LET %options に `left$mb 辞書~memberは[ 在するならば その値/ 不在ならば `表示域$の現在の x 軸~scroll位置 ] ◎ Let options be the argument. ◎ Let x be the value of the left dictionary member of options, if present, or the viewport’s current scroll position on the x axis otherwise.
    2. %y ~LET %options に `top$mb 辞書~memberは[ 在するならば その値/ 不在ならば `表示域$の現在の y 軸~scroll位置 ] ◎ Let y be the value of the top dictionary member of options, if present, or the viewport’s current scroll position on the y axis otherwise.
  2. ~IF[ ~methodは 2 個の引数 %x, %y を伴って呼出された ]: ◎ If invoked with two arguments, follow these substeps:

    1. %options ~LET ~NULL を IDL `ScrollToOptions$I 型の`辞書~値に変換-$した結果 `WEBIDL$r ◎ Let options be null converted to a ScrollToOptions dictionary. [WEBIDL] ◎ Let x and y be the arguments, respectively.
  3. %x, %y を`有限~値に正規化-$ ◎ Normalize non-finite values for x and y.
  4. ~IF[ 此れの`表示域$は無い ] ⇒ ~RET ◎ If there is no viewport, abort these steps.
  5. `有効~横幅^V ~LET `表示域$の`有効~横幅$ ◎ Let viewport width be the width of the viewport excluding the width of the scroll bar, if any.
  6. `有効~縦幅^V ~LET `表示域$の`有効~縦幅$ ◎ Let viewport height be the height of the viewport excluding the height of the scroll bar, if any.
  7. %~scrolling区画 ~LET `表示域$の`~scrolling区画$ ◎ ↓
  8. `表示域$の横方向の`~overflow方向$に応じて: ◎ ↓

    右方 ◎ If the viewport has rightward overflow direction
    %x ~LET max( 0, min( %x, ( %~scrolling区画 の横幅 − `有効~横幅^V ))) ◎ Let x be max(0, min(x, viewport scrolling area width - viewport width)).
    左方 ◎ If the viewport has leftward overflow direction
    %x ~LET min( 0, max( %x, ( `有効~横幅^V − %~scrolling区画 の横幅 ))) ◎ Let x be min(0, max(x, viewport width - viewport scrolling area width)).
  9. `表示域$の縦方向の`~overflow方向$に応じて:

    下方 ◎ If the viewport has downward overflow direction
    %y ~LET max( 0, min( %y, ( %~scrolling区画 の縦幅 − `有効~縦幅^V ))) ◎ Let y be max(0, min(y, viewport scrolling area height - viewport height)).
    上方 ◎ If the viewport has upward overflow direction
    %y ~LET min( 0, max( %y, ( `有効~縦幅^V − %~scrolling区画 の縦幅 ))) ◎ Let y be min(0, max(y, viewport height - viewport scrolling area height)).
  10. %目的位置 ~LET %~scrolling区画 の座標 ( %x, %y ) が`表示域$の左上隅に揃えられるような,`表示域$の~scroll位置 ◎ Let position be the scroll position the viewport would have by aligning the x-coordinate x of the viewport scrolling area with the left of the viewport and aligning the y-coordinate y of the viewport scrolling area with the top of the viewport.
  11. ~IF[ %目的位置 ~EQ `表示域$の現在の~scroll位置 ]~AND[ `表示域$において`滑らかな~scroll$は進行中でない ] ⇒ ~RET ◎ If position is the same as the viewport’s current scroll position, and the viewport does not have an ongoing smooth scroll, abort these steps.
  12. %文書 ~LET `表示域$に結付けられている`文書$ ◎ Let document be the viewport’s associated Document.
  13. 次を入力に,`表示域$の`~scrollを遂行する$

    関連要素
    %文書 の`根~要素$があれば それ / なければ ~NULL
    ~scrollの挙動
    %options の `behavior$mb 辞書~memberの値
    目的位置
    %目的位置
    ◎ Perform a scroll of the viewport to position, document’s root element as the associated element, if there is one, or null otherwise, and the scroll behavior being the value of the behavior dictionary member of options.

`scrollTo()@m ~methodの被呼出時には ⇒ ~UAは、同じ引数で `scroll()$m ~methodが呼出されたかのように,動作し~MUST。 ◎ When the scrollTo() method is invoked, the user agent must act as if the scroll() method was invoked with the same arguments.

`scrollBy()@m ~methodの被呼出時には、次を走らせ~MUST: ◎ When the scrollBy() method is invoked, the user agent must run these steps:

  1. ~IF[ ~methodは 2 個の引数 %x, %y を伴って呼出された ]: ◎ If invoked with two arguments, follow these substeps:

    1. %options ~LET ~NULL を IDL `ScrollToOptions$I 型の`辞書~値に変換-$した結果 `WEBIDL$r ◎ Let options be null converted to a ScrollToOptions dictionary. [WEBIDL]
    2. %options の[ `left$mb, `top$mb ]辞書~member ~LET 順に[ %x, %y ] ◎ Let x and y be the arguments, respectively. ◎ Let the left dictionary member of options have the value x. ◎ Let the top dictionary member of options have the value y.
  2. %options の[ `left$mb, `top$mb ]辞書~member を`有限~値に正規化-$する ◎ Normalize non-finite values for the left and top dictionary members of options.
  3. %options の[ `left$mb, `top$mb ]辞書~memberに,[ `scrollX$m, `scrollY$m ]の値を順に加算する ◎ Add the value of scrollX to the left dictionary member. ◎ Add the value of scrollY to the top dictionary member.
  4. %options を唯一の引数に, `scroll()$m ~methodが呼出されたかのように,動作する ◎ Act as if the scroll() method was invoked with options as the only argument.

[ `screenX@m | `screenY@m ]属性の被取得時には、次を走らせ~MUST:

  1. ~IF[ 此れの~client~windowは存在しない ] ⇒ ~RET ~zero
  2. ~RET 出力~機器の`~Webに公開される~screen区画$の原点に相対的な, ~pixel単位による,~client~window†の[ 左端の x 座標 | 上端の y 座標 ]
◎ The screenX attribute must return the x-coordinate, relative to the origin of the Web-exposed screen area, of the left of the client window as number of pixels, or zero if there is no such thing. ◎ The screenY attribute must return the y-coordinate, relative to the origin of the screen of the Web-exposed screen area, of the top of the client window as number of pixels, or zero if there is no such thing.

【† “~client~window” がどの部分を指すのか,定義されていないが、現実の~browserのふるまいからは,外枠も含めた~window全体が占める区画を指すものと推定される。 】

[ `outerWidth@m | `outerHeight@m ]属性の被取得時には、次を走らせ~MUST:

  1. ~IF[ 此れの~client~windowは存在しない ] ⇒ ~RET ~zero
  2. ~RET ~client~windowの[ 横幅 | 縦幅 ]
◎ The outerWidth attribute must return the width of the client window. If there is no client window this attribute must return zero. ◎ The outerHeight attribute must return the height of the client window. If there is no client window this attribute must return zero.

`devicePixelRatio@m 属性の被取得時には、次を走らせ~MUST: ◎ The devicePixelRatio attribute must return the result of the following algorithm:

  1. ~IF[ 出力~機器は存在しない ] ⇒ ~RET 1 ◎ If there is no output device, return 1 and abort these steps.
  2. `CSS ~pixel~size^V ~LET [ 現在の`頁~zoom$倍率 ], および[ `~pinch~zoom$倍率 1.0 ]の下での, CSS ~pixel~size ◎ Let CSS pixel size be the size of a CSS pixel at the current page zoom scale factor and at a pinch zoom scale factor of 1.0.
  3. %機器~pixel~size ~LET 出力~機器の機器~pixelの縦~size ◎ Let device pixel size be the vertical size of a device pixel of the output device.
  4. ~RET `CSS ~pixel~size^V ÷ %機器~pixel~size ◎ Return the result of dividing CSS pixel size by device pixel size.

4.1. `open()^m ~methodに対する %features 引数

HTML は, `open()$m ~methodを定義しているが、3番目の引数 %features がどのような効果をもたらすかについては,定義していない。 `HTML$r ◎ HTML defines the open() method but has no defined effect for the third argument, features. [HTML]

この仕様は、その引数の効果を,次の様に定義する: ◎ This specification defines the effect of the features argument for user agents that do not opt to ignore it, as follows:

  1. ~IF[ `open()$m による結果、新たな`補助~閲覧文脈$は作成されない ] ⇒ ~RET ◎ If the method does not result in a new auxiliary browsing context being created, terminate these steps.
  2. %target ~LET 作成される新たな`補助~閲覧文脈$ ◎ Let target be the new auxiliary browsing context.
  3. %tokens ~LET %features を`~commaで分割$した結果 ◎ Let tokens be the result of splitting features on commas.
  4. `解析済み features^V ~LET 新たな空の`辞書$ ◎ Let parsed features be a new empty dictionary.
  5. ~FOR %tokens 内の ~EACH ( ~token %token ) に対し: ◎ Token loop: For each token token in tokens, follow these substeps:

    1. ~IF[ %token の中に文字 `=^l (U+003D) は含まれていない ] ⇒ ~CONTINUE
    2. [ %名前, %値 ] ~LET %token をその中の最初の文字 `=^l の所で 2 個の文字列に~~分割した結果
    3. %名前 ~SET [ %名前 から `頭部と尾部の空白~並びを剥いだ$結果 ]を `ASCII 小文字化$した結果
    4. ~IF[ %名前 は `解析済み features^V 内に在する ] ⇒ ~CONTINUE
    5. ~IF[ %名前 ~NIN `~supportされる~open_m特色機能~名$ ] ⇒ ~CONTINUE
    6. %値 ~LET %値 を`整数として構文解析-$した結果
    7. ~IF[ %値 ~EQ ~error ] ⇒ ~CONTINUE
    8. `解析済み features^V 内の %名前 ~memberの値 ~SET %値
    1. Let input be token.
    2. Let position point at the first character of input.
    3. Skip whitespace.
    4. Collect a sequence of characters that are not space characters nor "=" (U+003D). Let name be the collected characters, converted to ASCII lowercase.
    5. If name is in parsed features or if name is not a supported open() feature name, continue token loop.
    6. Skip whitespace.
    7. If the character at position is not "=" (U+003D), continue token loop.
    8. Advance position by one.
    9. If position is past the end of input, continue token loop.
    10. Collect a sequence of characters that are any characters. Let raw value be the collected characters.
    11. Let value be the result of invoking the rules for parsing integers on raw value.
    12. If value is an error, continue token loop.
    13. Set name in parsed features to value.
  6. ~IF[ `解析済み features^V 内に `left$opf は在する ]: ◎ If left is present in parsed features, follow these substeps:

    1. %x ~LET `left$opf の値 ◎ Let x be the value of left.
    2. 任意選択で,~UA定義0の方式で ⇒ %x を[ 可用な空間の外に~windowが出ない様な大きさ ]に切詰める ◎ Optionally, clamp x in a user-agent-defined manner so that the window does not move outside the available space.
    3. 任意選択で ⇒ %target の~windowを,[ %target の CSS ~pixelによる,出力~機器の左辺に相対的な[ ~windowの左辺の横方向 座標 ]]が %x に位置する様に移動させる。 — 正の値が右方を向くとする。 ◎ Optionally, move target’s window such that the window’s left edge is at the horizontal coordinate x relative to the left edge of the output device, measured in CSS pixels of target. The positive axis is rightward.
  7. ~IF[ `解析済み features^V 内に `top$opf は在する ]: ◎ If top is present in parsed features, follow these substeps:

    1. %y ~LET `top$opf の値 ◎ Let y be the value of top.
    2. 任意選択で,~UA定義0の方式で ⇒ %y を[ 可用な空間の外に~windowが出ない様な大きさ ]に切詰める ◎ Optionally, clamp y in a user-agent-defined manner so that the window does not move outside the available space.
    3. 任意選択で ⇒ %target の~windowを,[ %target の CSS ~pixelによる,出力~機器の上辺に相対的な[ ~windowの上辺の縦方向 座標 ]]は %y に位置する様に移動させる。 — 正の値が下方を向くとする。 ◎ Optionally, move target’s window such that the window’s top edge is at the vertical coordinate y relative to the top edge of the output device, measured in CSS pixels of target. The positive axis is downward.
  8. ~IF[ `解析済み features^V 内に `width$opf は在する ]: ◎ If width is present in parsed features, follow these substeps:

    1. %x ~LET `width$opf の値 ◎ Let x be the value of width.
    2. 任意選択で,~UA定義0の方式で ⇒ %x を,可用な空間の中で~windowの大きさが~~適度な上限/下限に収まるように切詰める ◎ Optionally, clamp x in a user-agent-defined manner so that the window does not get too small or bigger than the available space.
    3. 任意選択で ⇒ [ 表示域の左辺と右辺の距離は %target CSS ~pixel単位で %x になる ]様に, %target の~windowの右辺を移動させることにより,その~windowの~sizeを変える ◎ Optionally, size target’s window by moving its right edge such that the distance between the left and right edges of the viewport are x CSS pixels of target.
    4. 任意選択で,~UA定義0の方式で ⇒ %target の~windowを,可用な空間をはみ出さないように移動させる ◎ Optionally, move target’s window in a user-agent-defined manner so that it does not grow outside the available space.
  9. ~IF[ `解析済み features^V 内に `height$opf は在する ]: ◎ If height is present in parsed features, follow these substeps:

    1. %y ~LET `height$opf の値 ◎ Let y be the value of height.
    2. 任意選択で,~UA定義0の方式で ⇒ %y を,可用な空間の中で~windowの大きさが~~適度な上限/下限に収まるように切詰める ◎ Optionally, clamp y in a user-agent-defined manner so that the window does not get too small or bigger than the available space.
    3. 任意選択で ⇒ [ 表示域の上辺と下辺の距離は %target CSS ~pixel単位で %y になる ]様に, %target の~windowの右辺を移動させることにより,その~windowの~sizeを変える ◎ Optionally, size target’s window by moving its bottom edge such that the distance between the top and bottom edges of the viewport are y CSS pixels of target.
    4. 任意選択で,~UA定義0の方式で ⇒ %target の~windowを,可用な空間をはみ出さないように移動させる ◎ Optionally, move target’s window in a user-agent-defined manner so that it does not grow outside the available space.

`~supportされる~open_m特色機能~名@ は、次のいずれかである: ◎ A supported open() feature name is one of the following:

`width@opf
表示域の横幅 ◎ The width of the viewport.
`height@opf
表示域の縦幅 ◎ The height of the viewport.
`left@opf
~windowの左端の位置 ◎ The left position of the window.
`top@opf
~windowの上端の位置 ◎ The top position of the window.

4.2. `MediaQueryList^I ~interface

この節は、 `HTML$r に定義される`~event-loop$に統合される。 ◎ This section integrates with the event loop defined in HTML. [HTML]

`MediaQueryList$I ~objには、次に挙げるものが結付けられる:

`媒体~query~list@
`文書@mq
作成-時に設定される。 ◎ A MediaQueryList object has an associated media query list and an associated document set on creation.
`媒体@mq
直列化- された形による`媒体~query~list$。 ◎ A MediaQueryList object has an associated media which is the serialized form of the associated media query list.
`合致状態@mq
結付けられている`媒体~query~list$が[ `文書$mqの状態に合致するときは true / ~ELSE_ false ]を返す。 ◎ A MediaQueryList object has an associated matches state which is true if the associated media query list matches the state of the document, and false otherwise.

`文書$ %文書 に対し, `媒体~queryを評価して変化を報告する@ ときは、次を走らす: ◎ When asked to evaluate media queries and report changes for a Document doc, run these steps:

  1. ~FOR %文書 を`文書$mqに持つような, ~EACH ( `MediaQueryList$I ~obj %target ) に対し,先に作成されたものから順に: ◎ For each MediaQueryList object target that has doc as its document, in the order they were created, oldest first, run these substeps:

    1. ~IF[ %target の`合致状態$mqは、この手続きを前回~走らせたときから変化した ] ⇒ 次の様に初期化された新たな`~event$を, %target に向けて`配送$する:

      • ~eventは `MediaQueryList!I ~interfaceを利用する。
      • `type$m 属性 ~SET `change$et
      • `isTrusted$m 属性 ~SET true
      • `media$m 属性 ~SET %target の`媒体$mq
      • `matches$m 属性 ~SET %target の`合致状態$mq
      ◎ If target’s matches state has changed since the last time these steps were run, dispatch a new event to target using the MediaQueryList interface, with its type attribute initialized to change, its isTrusted attribute initialized to true, its media attribute initialized to target’s media, and its matches attribute initialized to target’s matches state.

`表示域$の方位( orientation )の変化を検知する簡単な~code片は、次のように書かれるであろう: ◎ A simple piece of code that detects changes in the orientation of the viewport can be written as follows:

function handleOrientationChange(%event) {
  if(%event.`matches$m) // landscape
    …
  else
    …
}
var %mql = `matchMedia^m(`(orientation:landscape)^l);
%mql.`onchange$m = handleOrientationChange;
⇒! interface `MediaQueryList@I : `EventTarget$I { readonly attribute DOMString `media$m; readonly attribute boolean `matches$m; void `addListener$m(`EventListener$I? %listener); void `removeListener$m(`EventListener$I? %listener); attribute `EventHandler$I `onchange$m; };◎

`media@m 属性の被取得時には ⇒ 此れに結付けられている`媒体$mqを返さ~MUST。 ◎ The media attribute must return the associated media.

`matches@m 属性の被取得時には ⇒ 此れに結付けられている`合致状態$mqを返さ~MUST。 ◎ The matches attribute must return the associated matches state.

`addListener(listener)@m ~methodの被呼出時には、次を走らせ~MUST: ◎ The addListener(listener) method must run these steps:

  1. ~IF[ %listener ~EQ ~NULL ] ⇒ ~RET ◎ If listener is null, terminate these steps.
  2. %~list ~LET 此れに結付けられている[ `~event~listener$の~list ] ◎ ↓
  3. ~IF[ %~list 内に[ ( type, callback, capture ) ~EQ ( `change$et, %listener, false ) ]なる`~event~listener$がある ] ⇒ ~RET ◎ ↓
  4. 次のようにされた`~event~listener$を, %~list に付加する ⇒ ( type, callback, capture ) ~SET ( `change$et, %listener, false ) ◎ Append an event listener to the associated list of event listeners with type set to change, callback set to listener, and capture set to false, unless there already is an event listener in that list with the same type, callback, and capture.

`removeListener(listener)@m ~methodの被呼出時には、次を走らせ~MUST: ◎ The removeListener(listener) method must run these steps:

  1. %~list ~LET 此れに結付けられている[ `~event~listener$の~list ] ◎ ↓
  2. ~IF[ %~list 内に[ ( type, callback, capture ) ~EQ ( `change$et, %listener, false ) ]なる`~event~listener$がある ] ⇒ その~event~listenerを %~list から除去する ◎ Remove an event listener from the associated list of event listeners, whose type is change, callback is listener, and capture is false.

注記: この仕様は、当初, `addListener()$m / `removeListener()$m による独自の~callbackの仕組みを利用していた — その~callbackは,結付けられている`媒体~query~list$を引数に呼出されていた。 今や、通常の~eventの仕組みが代わりに利用される。 後方互換性のため、 `addListener()$m / `removeListener()$m ~methodは基本的に `addEventListener()$m / `removeEventListener()$m の別名になり, `change$et ~eventが `MediaQueryList$I のふりをする。 ◎ Note: This specification initially had a custom callback mechanism with addListener() and removeListener(), and the callback was invoked with the associated media query list as argument. Now the normal event mechanism is used instead. For backwards compatibility, the addListener() and removeListener() methods are basically aliases for addEventListener() and removeEventListener(), respectively, and the change event masquerades as a MediaQueryList.

次に挙げる`~event~handler$(および対応する`~event~handler ~event型$)が、`~event~handler IDL 属性$として, `MediaQueryList$I ~interfaceを実装する すべての~objから~supportされ~MUST: ◎ The following are the event handlers (and their corresponding event handler event types) that must be supported, as event handler IDL attributes, by all objects implementing the MediaQueryList interface:

`~event~handler$ `~event~handler ~event型$
`onchange@m `change$et
⇒! [Constructor( DOMString type, optional `MediaQueryListEventInit$I eventInitDict )] interface `MediaQueryListEvent@I : `Event$I { readonly attribute DOMString `media$m; readonly attribute boolean `matches$m; }; dictionary `MediaQueryListEventInit@I : `EventInit$I { DOMString `media@mb = ""; boolean `matches@mb = false; };◎

`media@m 属性の被取得時には ⇒ 初期化-時の値を返さ~MUST。 ◎ The media attribute must return the value it was initialized to.

`matches@m 属性の被取得時には ⇒ 初期化-時の値を返さ~MUST。 ◎ The matches attribute must return the value it was initialized to.

4.2.1. ~event要覧

~INFORMATIVE
~event ~interface ~target ~~説明
`change@et `Event$I `MediaQueryList$I `合致状態$mqが変化したときに `MediaQueryList$I に向けて発火される。 ◎ Fired at the MediaQueryList when the matches state changes.

4.3. `Screen^I ~interface

その名前が示唆するように, `Screen$I ~interfaceは、出力~機器の~screenについての情報を表現する。 ◎ As its name suggests, the Screen interface represents information about the screen of the output device.

⇒! interface `Screen@I { readonly attribute long `availWidth$m; readonly attribute long `availHeight$m; readonly attribute long `width$m; readonly attribute long `height$m; readonly attribute unsigned long `colorDepth$m; readonly attribute unsigned long `pixelDepth$m; };◎ `Screen^dgm

[ `availWidth@m | `availHeight@m ]属性の被取得時には ⇒ `~Webに公開される可用な~screen区画$の[ 横幅 | 縦幅 ]を返さ~MUST。 ◎ The availWidth attribute must return the width of the Web-exposed available screen area. ◎ The availHeight attribute must return the height of the Web-exposed available screen area.

[ `width@m | `height@m ]属性の被取得時には ⇒ `~Webに公開される~screen区画$の[ 横幅 | 縦幅 ]を返さ~MUST。 ◎ The width attribute must return the width of the Web-exposed screen area. ◎ The height attribute must return the height of the Web-exposed screen area.

`colorDepth@m 属性の被取得時には ⇒ 24 を返さ~MUST。 ◎ The colorDepth attribute must return 24.

`pixelDepth@m 属性の被取得時には ⇒ 24 を返さ~MUST。 ◎ The pixelDepth attribute must return 24.

注記: `colorDepth^c と `pixelDepth^c 属性は無用の長物だが,互換性のために含められている。 ◎ Note: The colorDepth and pixelDepth attributes are useless but are included for compatibility.

5. `Document^I ~interfaceに対する拡張

⇒! partial interface `Document!I { `Element$I? `elementFromPoint$m(double %x, double %y); sequence<`Element$I> `elementsFromPoint$m(double %x, double %y); `CaretPosition$I? `caretPositionFromPoint$m(double %x, double %y); readonly attribute `Element$I? `scrollingElement$m; };◎ `Document^dgm

`elementFromPoint(x, y)@m ~methodの被呼出時には、次を走らせ~MUST: ◎ The elementFromPoint(x, y) method must follow these steps:

  1. ~IF[ 此れに結付けられている`表示域$はない ] ⇒ ~RET ~NULL ◎ ↓
  2. ~IF[[[ 0 ≤ %x ≤ `表示域$の`有効~横幅$ ], かつ[ 0 ≤ %y ≤ `表示域$の`有効~縦幅$ ]]でない ] ⇒ ~RET ~NULL ◎ If either argument is negative, x is greater than the viewport width excluding the size of a rendered scroll bar (if any), or y is greater than the viewport height excluding the size of a rendered scroll bar (if any), or there is no viewport associated with the document, return null and terminate these steps.
  3. ~IF[ `表示域$の子孫に対する`座標系変換$を適用した下で,座標 (%x, %y) の接触判定の標的になる`~layout~box$は`表示域$内にある ] ⇒ ~RET それに結付けられている要素 ◎ If there is a layout box in the viewport that would be a target for hit testing at coordinates x,y, when applying the transforms that apply to the descendants of the viewport, return the associated element and terminate these steps.
  4. ~RET 此れは`根~要素$を[ 持つならば それ / 持たないならば ~NULL ] ◎ If the document has a root element, return the root element and terminate these steps. ◎ Return null.

注記: `elementFromPoint()^c ~methodは必ずしも,最も手前に塗られている要素を返すわけではない。 例えば要素は `pointer-events$p CSS ~propの利用を通して接触判定の標的から除外され得る。 参照( SVG ) 】 ◎ Note: The elementFromPoint() method does not necessarily return the top-most painted element. For instance, an element can be excluded from being a target for hit testing by using the pointer-events CSS property.

`elementsFromPoint(x, y)@m ~methodの被呼出時には、次を走らせ~MUST: ◎ The elementsFromPoint(x, y) method must follow these steps:

  1. %連列 ~LET 空~連列 ◎ Let sequence be a new empty sequence.
  2. ~IF[ 此れに結付けられている`表示域$はない ] ⇒ ~RET %連列 ◎ ↓
  3. ~IF[[[ 0 ≤ %x ≤ `表示域$の`有効~横幅$ ]~AND[ 0 ≤ %y ≤ `表示域$の`有効~縦幅$ ]]でない ] ⇒ ~RET %連列 ◎ If either argument is negative, x is greater than the viewport width excluding the size of a rendered scroll bar (if any), or y is greater than the viewport height excluding the size of a rendered scroll bar (if any), or there is no viewport associated with the document, return sequence and terminate these steps.
  4. ~FOR `表示域$の子孫に対する`座標系変換$を適用した下で,座標 (%x, %y) の接触判定の標的になる(何もそれに overlap していない†としても)ような,`表示域$ 内の~EACH ( `~layout~box$ ) に対し、 topmost の†~boxから, それらの塗り順序に従って ⇒ ~boxに結付けられている要素を %連列 に付加する ◎ For each layout box in the viewport, in paint order, starting with the topmost box, that would be a target for hit testing at coordinates x,y even if nothing would be overlapping it, when applying the transforms that apply to the descendants of the viewport, append the associated element to sequence.

    【† 塗られる内容が無いとしても? 】【† 最も手前に塗られている? 】

  5. ~IF[ 此れは`根~要素$ %根 を持つ ]~AND[ %連列 の最後の項 ~NEQ %根 ] ⇒ %根 を %連列 に付加する ◎ If the document has a root element, and the last item in sequence is not the root element, append the root element to sequence.
  6. ~RET %連列 ◎ Return sequence.

`caretPositionFromPoint(x, y)@m ~methodの被呼出時には、次を走らせ~MUST: ◎ The caretPositionFromPoint(x, y) method must return the result of running these steps:

  1. ~IF[ 此れに結付けられている`表示域$はない ] ⇒ ~RET ~NULL ◎ If there is no viewport associated with the document, return null.
  2. ~IF[[[ 0 ≤ %x ≤ `表示域$の`有効~横幅$ ]~AND[ 0 ≤ %y ≤ `表示域$の`有効~縦幅$ ]]でない ] ⇒ ~RET ~NULL ◎ If either argument is negative, x is greater than the viewport width excluding the size of a rendered scroll bar (if any), y is greater than the viewport height excluding the size of a rendered scroll bar (if any) return null.
  3. ~IF[[ `表示域$の子孫に対する`座標系変換$を適用した下で,`表示域$内の座標 ( %x, %y ) の所に~text挿入位置指示が挿入されることになる ]ではない ] ⇒ ~RET ~NULL ◎ If at the coordinates x,y in the viewport no text insertion point indicator would have been inserted when applying the transforms that apply to the descendants of the viewport, return null.
  4. ~IF[ `表示域$の子孫に対する`座標系変換$を適用した下で,`表示域$内の座標 ( %x, %y ) の所に, かつ[ `置換要素$である~text入力~widget ]内に,~text挿入位置指示が挿入されることになる ] ⇒ ~RET 各種~propが次のように設定された`~caret位置$ ◎ If at the coordinates x,y in the viewport a text insertion point indicator would have been inserted in a text entry widget which is also a replaced element, when applying the transforms that apply to the descendants of the viewport, return a caret position with its properties set as follows:

    `~caret~node$
    ~text入力~widgetに対応する~node。 ◎ The node corresponding to the text entry widget.
    `~caret~offset$
    左端から~text挿入位置指示が挿入される地点までの符号単位の個数。 ◎ The amount of 16-bit units to the left of where the text insertion point indicator would have inserted.
    【 `符号単位$ ( 16-bit unit, code unit ): Unicode ( UTF-16 )の代用対(拡張用の文字~code割り当て域に属する文字)では1文字に 4 ~byte消費されるが、それに関わらず, javascript の文字列~処理では常に 2 ~byteを文字1個分と数えるため、通常の意味の “Unicode 文字” (符号位置)と区別するためにこの語が用いられる。 】
    `~caret範囲$
    ~NULL ◎ null
  5. ~RET 各種~propが次の様に設定された`~caret位置$: ◎ ↓

    `~caret範囲$

    `表示域$の子孫に対する`座標系変換$を適用した下で,~text挿入位置指示が挿入されることになる地点を指すような、畳まれた状態の `Range$I ~obj。 ◎ Otherwise, return a caret position where the caret range is a collapsed Range object for the position where the text insertion point indicator would have been inserted when applying the transforms that apply to the descendants of the viewport, and the other properties are set as follows:

    【 畳まれた状態( collapsed ): Range ~objの`始点$と`終点$が同じ`境界点$を指すようにされた状態(始点~nodeと終点~nodeが同一,かつ始点~offsetと終点~offsetが等しい) 】
    `~caret~node$
    `~caret範囲$ の `startContainer$m ◎ The startContainer of the caret range.
    `~caret~offset$
    `~caret範囲$ の `startOffset$m ◎ The startOffset of the caret range.

注記: 接触判定の詳細は、この仕様の視野外であり,したがって `elementFromPoint()$m と `caretPositionFromPoint()$m についての正確な詳細も同様になる。 接触判定は希望的には,CSS または HTML の将来版にて定義されることになる。 ◎ Note: The specifics of hit testing are out of scope of this specification and therefore the exact details of elementFromPoint() and caretPositionFromPoint() are therefore too. Hit testing will hopefully be defined in a future revision of CSS or HTML.

`scrollingElement@m 属性の被取得時には、次を走らせ~MUST: ◎ The scrollingElement attribute, on getting, must run these steps:

  1. ~IF[ 此れは`過去互換~mode$下にある ]: ◎ If the Document is in quirks mode, follow these substeps:

    1. ~IF[ `HTML body 要素$ %body は在る ]~AND[ %body は`~scroll可能になり得ない$ ] ⇒ ~RET %body ◎ If the HTML body element exists, and it is not potentially scrollable, return the HTML body element and abort these steps.
    2. ~RET ~NULL ◎ Return null and abort these steps.
  2. ~IF[ `根~要素$は在る ] ⇒ ~RET それ ◎ If there is a root element, return the root element and abort these steps.
  3. ~RET ~NULL ◎ Return null.

注記: `scrollTop^m, `scrollLeft^m に対し,`過去互換~mode$の挙動を常に利用する非適合~UAには、 `scrollingElement$m 属性は,常に `HTML body 要素$ (あるいは,なければ ~NULL )を返すものと期待されている。 この~APIは、~Web開発者が,~scrolling0~APIに利用する正しい要素を取得できるようにするためにある — 特定0の~UAの挙動を前提にしたり,どの要素が表示域を~scrollするかを見るために実際に~scrollする必要なく。 ◎ Note: For non-conforming user agents that always use the quirks mode behavior for scrollTop and scrollLeft, the scrollingElement attribute is expected to also always return the HTML body element (or null if it does not exist). This API exists so that Web developers can use it to get the right element to use for scrolling APIs, without making assumptions about a particular user agent’s behavior or having to invoke a scroll to see which element scrolls the viewport.

注記: `HTML body 要素$ は HTML の `document.body^m とは異なる — 後者は `frameset^m 要素も返し得る。 ◎ Note: The HTML body element is different from HTML’s document.body in that the latter can return a frameset element.

5.1. `CaretPosition^I ~interface

`~caret位置@ とは、~text挿入位置指示の位置を与えるものであり,常に `~caret~node@, `~caret~offset@, `~caret範囲@ が結付けられる。 ~caret位置は `CaretPosition$I ~objにより表現される。 ◎ A caret position gives the position of a text insertion point indicator. It always has an associated caret node, caret offset, and caret range. It is represented by a CaretPosition object.

⇒! interface `CaretPosition@I { readonly attribute `Node$I `offsetNode$m; readonly attribute unsigned long `offset$m; [NewObject] `DOMRect$I? `getClientRect$m(); };◎

`offsetNode@m 属性の被取得時には ⇒ 此れの`~caret~node$を返さ~MUST。 ◎ The offsetNode attribute must return the caret node.

`offset@m 属性の被取得時には ⇒ 此れの`~caret~offset$を返さ~MUST。 ◎ The offset attribute must return the caret offset.

`getClientRect@m ~methodの被呼出時には、次を走らせ~MUST: ◎ The getClientRect() method must follow these steps, aborting on the first step that returns a value:

  1. ~IF[ 此れの`~caret範囲$ ~NEQ ~NULL ]: ◎ If caret range is not null:

    1. %list ~LET その範囲に対し `getClientRects()^m ~methodを呼出した結果 ◎ Let list be the result of invoking the getClientRects() method on the range.
    2. ~IF[ %list は空である ] ⇒ ~RET ~NULL ◎ If list is empty, return null.
    3. ~RET %list 内の最初の `DOMRect$I ~obj ◎ Return the DOMRect object in list at index 0.
  2. ~IF[ 此れの`~caret~node$ %node は,[ `置換要素$である~text入力~widgetである ~AND 文書~内に在る ]] ⇒ ~RET %node とその先祖に対する`座標系変換$を適用した下で、 %node 内の,`~caret~offset$ の値で表現される~caretに対する静的 `DOMRect$I ~obj ◎ If caret node is a text entry widget that is a replaced element, and that is in the document, return a static DOMRect object for the caret in the widget as represented by the caret offset value. The transforms that apply to the element and its ancestors are applied.
  3. ~RET ~NULL ◎ Return null.

6. `Element^I ~interfaceに対する拡張

⇒! enum `ScrollLogicalPosition@I { `start@l, `center@l, `end@l, `nearest@l }; dictionary `ScrollIntoViewOptions@I : `ScrollOptions$I { `ScrollLogicalPosition$I `block@mb = `center$l; `ScrollLogicalPosition$I `inline@mb = `center$l; };◎ ⇒! partial interface `Element!I { sequence<`DOMRect$I> `getClientRects$m(); [NewObject] `DOMRect$I `getBoundingClientRect$m(); void `scrollIntoView$m(); void `scrollIntoView$m((boolean or object) %arg); void `scroll$m(optional `ScrollToOptions$I %options); void `scroll$m(unrestricted double %x, unrestricted double %y); void `scrollTo$m(optional `ScrollToOptions$I %options); void `scrollTo$m(unrestricted double %x, unrestricted double %y); void `scrollBy$m(optional `ScrollToOptions$I %options); void `scrollBy$m(unrestricted double %x, unrestricted double %y); attribute unrestricted double `scrollTop$m; attribute unrestricted double `scrollLeft$m; readonly attribute long `scrollWidth$m; readonly attribute long `scrollHeight$m; readonly attribute long `clientTop$m; readonly attribute long `clientLeft$m; readonly attribute long `clientWidth$m; readonly attribute long `clientHeight$m; };◎ `Element^dgm

`getClientRects()@m ~methodの被呼出時には、次の~algoの結果を返さ~MUST: ◎ The getClientRects() method, when invoked, must return the result of the following algorithm:

  1. ~IF[ 此れは`~layout~box$を持たない ] ⇒ ~RET 空~連列 ◎ If the element on which it was invoked does not have an associated layout box return an empty sequence and stop this algorithm.
  2. ~IF[ 此れは `SVG ~layout~box$ `SVG$r を持つ ] ⇒ ~RET [ 次のような矩形を表す `DOMRect$I ~obj ]1個のみからなる連列 ⇒ [ 此れとその子孫に対する`座標系変換$を適用した下で, SVG 仕様の定義に従う此れの~bounding~box ] ◎ If the element has an associated SVG layout box return a sequence containing a single DOMRect object that describes the bounding box of the element as defined by the SVG specification, applying the transforms that apply to the element and its ancestors.
  3. ~RET [ 次で与えられる静的 `DOMRect$I ~objの~list ]を包含する連列 ⇒ ~listは、その各 `DOMRect$I が,次の拘束を満たすような 一個の`~box断片$の~border区画を表すものからなる: ◎ Return a sequence containing static DOMRect objects in content order, one for each box fragment, describing its border area (including those with a height or width of zero) with the following constraints:

    • 此れとその先祖に対する`座標系変換$は,適用される。 ◎ Apply the transforms that apply to the element and its ancestors.
    • 此れの `display$p ~propの算出値 ~IN { `table$v, `inline-table$v } の場合 ⇒ table ~box と caption ~boxは含めるが, 匿名~容器~boxは含めない。 ◎ If the element on which the method was invoked has a computed value for the display property of table or inline-table include both the table box and the caption box, if any, but not the anonymous container box.
    • ~list内の各 `匿名~塊~box$は,その子~boxたちに置換する。 ~list内の匿名~塊~boxが尽きるまで,これを繰り返す。 ◎ Replace each anonymous block box with its child box(es) and repeat this until no anonymous block boxes are left in the final list.

    ここで:

    • 縦幅/横幅 が~zeroのものも~listから除外しない。
    • ~listは、内容~順による。

`getBoundingClientRect()@m ~methodの被呼出時には、次の~algoによる結果を返さ~MUST: ◎ The getBoundingClientRect() method, when invoked, must return the result of the following algorithm:

  1. %list ~LET 此れ上で `getClientRects()$m を呼出した結果 ◎ Let list be the result of invoking getClientRects() on the same element this method was invoked on.
  2. ~IF[ %list は空である ] ⇒ ~RET 次のようにされた静的 `DOMRect$I ~obj ⇒ [ `x^m, `y^m, `width^m, `height^m ]属性 ~SET 0 ◎ If the list is empty return a static DOMRect object whose x, y, width and height members are zero.
  3. ~IF[ %list 内の どの矩形も,横幅, 縦幅ともに~zeroである ] ⇒ ~RET %list 内の最初の矩形 ◎ If all rectangles in list have zero width or height, return the first rectangle in list.
  4. ~RET [ %list 内の[ 横幅, 縦幅ともに~zeroでない ]すべての矩形を包含するような,最小の矩形 ]を表現する静的 `DOMRect$I ~obj ◎ Otherwise, return a static DOMRect object describing the smallest rectangle that includes all of the rectangles in list of which the height or width is not zero.

次の~code片は文書~内の最初の `div^e 要素の~sizeを取得する: ◎ The following snippet gets the dimensions of the first div element in a document:

var example = document
    .getElementsByTagName("div")[0]
    .getBoundingClientRect();
var exampleWidth = example.width;
var exampleHeight = example.height;

`scrollIntoView(arg)@m ~methodの被呼出時には、次を走らせ~MUST: ◎ The scrollIntoView(arg) method must run these steps:

  1. %options ~LET [ %arg は~objであるならば %arg / ~ELSE_ ~NULL ] ◎ Let options be null. ◎ If arg is an object, let options be arg.
  2. %options ~SET %options を IDL `ScrollIntoViewOptions$I 型の`辞書~値に変換-$した結果 `WEBIDL$r ◎ Convert options to a ScrollIntoViewOptions dictionary. [WEBIDL]
  3. ~IF[ %arg は与えられていない ]~OR[ %arg ~EQ ~T ] ⇒ %options の `block$mb 辞書~memberの値 ~SET `start$l;
    %options の `inline$mb 辞書~memberの値 ~SET `nearest$l ◎ If arg is not specified or is true, let the block dictionary member of options have the value "start", and let the inline dictionary member of options have the value "nearest".
  4. ~ELIF[ %arg ~EQ ~F ] ⇒ %options の `block$mb 辞書~memberの値 ~SET `end$l ;
    %options の `inline$mb 辞書~memberの値 ~SET `nearest$l ◎ If arg is false, let the block dictionary member of options have the value "end", and let the inline dictionary member of options have the value "nearest".
  5. ~IF[ 此れは`~layout~box$を持たない ] ⇒ ~RET ◎ If the element does not have any associated layout box terminate these steps.
  6. %options を用いて,此れを`~view内に~scrollさせる$ ◎ Scroll the element into view with the options options.
  7. 任意選択で ⇒ 利用者に 此れを注目してもらう何らかの動作があれば,それを遂行する。 ◎ Optionally perform some other action that brings the element to the user’s attention.

`scroll()@m ~methodの被呼出時には、次を走らせ~MUST: ◎ The scroll() method must run these steps:

  1. ~IF[ ~methodは 1 個の引数 %options を伴って呼出された ]: ◎ If invoked with one argument, follow these substeps:

    1. %options の[ `left$mb, `top$mb ]辞書~member を(もし在するならば)`有限~値に正規化-$する ◎ Let options be the argument. ◎ Normalize non-finite values for left and top dictionary members of options, if present.
    2. %x ~LET %options に `left$mb 辞書~memberは[ 在するならば その値/ 不在ならば 此れの現在の x 軸~scroll位置 ] ◎ Let x be the value of the left dictionary member of options, if present, or the element’s current scroll position on the x axis otherwise.
    3. %y ~LET %options に `top$mb 辞書~memberは[ 在するならば その値/ 不在ならば 此れの現在の y 軸~scroll位置 ] ◎ Let y be the value of the top dictionary member of options, if present, or the element’s current scroll position on the y axis otherwise.
  2. ~IF[ ~methodは 2 個の引数 %x, %y を伴って呼出された ]: ◎ If invoked with two arguments, follow these substeps:

    1. %options ~LET ~NULL を IDL `ScrollToOptions$I 型の`辞書~値に変換-$した結果 `WEBIDL$r ◎ Let options be null converted to a ScrollToOptions dictionary. [WEBIDL]
    2. %options の[ `left$mb, `top$mb ]辞書~member ~LET 順に[ %x, %y ]を`有限~値に正規化-$した結果 ◎ Let x and y be the arguments, respectively. ◎ Normalize non-finite values for x and y. ◎ Let the left dictionary member of options have the value x. ◎ Let the top dictionary member of options have the value y.
  3. %文書 ~LET 此れの`~node文書$ ◎ Let document be the element’s node document.
  4. ~IF[ %文書 は`作動中の文書$でない ] ⇒ ~RET ◎ If document is not the active document, terminate these steps.
  5. %window ~LET %文書 の `defaultView$m 属性~値 ◎ Let window be the value of document’s defaultView attribute.
  6. ~IF[ %window ~EQ ~NULL ] ⇒ ~RET ◎ If window is null, terminate these steps.
  7. ~IF[ 此れは`根~要素$である ]~AND[ %文書 は`過去互換~mode$下にある ] ⇒ ~RET ◎ If the element is the root element and document is in quirks mode, terminate these steps.
  8. ~IF[ 此れは`根~要素$である ] ⇒ ( `scrollX^m, %y ) を引数に渡して `scroll()^m を呼出す;
    ~RET ◎ If the element is the root element invoke scroll() on window with scrollX on window as first argument and y as second argument, and terminate these steps.
  9. ~IF[ 此れは `HTML body 要素$ である ]~AND[ %文書 は`過去互換~mode$下にある ]~AND[ 此れは`~scroll可能になり得ない$ ] ⇒ %options を唯一の引数に渡して %window 上の `scroll()^m を呼出す;
    ~RET ◎ If the element is the HTML body element, document is in quirks mode, and the element is not potentially scrollable, invoke scroll() on window with options as the only argument, and terminate these steps.
  10. ~IF[ 此れは,次のいずれかを満たす ]…:

    • `CSS ~layout~box$を持たない
    • `~scrolling~box$を持たない
    • ~overflowしない

    …ならば ⇒ ~RET

    ◎ If the element does not have any associated CSS layout box, the element has no associated scrolling box, or the element has no overflow, terminate these steps.
  11. 次を入力に,此れを`~scrollさせる$:

    ~scrollの挙動
    %options の `behavior$mb 辞書~memberの値
    目的位置
    ( %x, %y )
    ◎ Scroll the element to x,y, with the scroll behavior being the value of the behavior dictionary member of options.

`scrollTo()@m ~methodの被呼出時には ⇒ ~UAは、同じ引数で `scroll()$m ~methodが呼出されたかのように,動作し~MUST。 ◎ When the scrollTo() method is invoked, the user agent must act as if the scroll() method was invoked with the same arguments.

`scrollBy()@m ~methodの被呼出時には、次を走らせ~MUST ]: ◎ When the scrollBy() method is invoked, the user agent must run these steps:

  1. ~IF[ ~methodは 1 個の引数 %options を伴って呼出された ]: ◎ If invoked with one argument, follow these substeps:

    1. %options の[ `left$mb, `top$mb ]辞書~member を(もし在するならば)`有限~値に正規化-$する ◎ Let options be the argument. ◎ Normalize non-finite values for left and top dictionary members of options, if present.
  2. ~IF[ ~methodは 2 個の引数 %x, %y を伴って呼出された ]: ◎ If invoked with two arguments, follow these substeps:

    1. %options ~LET ~NULL を IDL `ScrollToOptions$I 型の`辞書~値に変換-$した結果 `WEBIDL$r ◎ Let options be null converted to a ScrollToOptions dictionary. [WEBIDL] ◎ Let x and y be the arguments, respectively.
    2. %options の[ `left$mb, `top$mb ]辞書~member ~SET 順に[ %x, %y ]を`有限~値に正規化-$した結果 ◎ Normalize non-finite values for x and y. ◎ Let the left dictionary member of options have the value x. ◎ Let the top dictionary member of options have the value y.
  3. %options の[ `left$mb, `top$mb ]辞書~memberに,此れの[ `scrollLeft$m, `scrollLeft$m ]値を順に加算する ◎ Add the value of scrollLeft to the left dictionary member. ◎ Add the value of scrollTop to the top dictionary member.
  4. %options を唯一の引数に, `scroll()$m ~methodが呼出されたかのように,動作する ◎ Act as if the scroll() method was invoked with options as the only argument.

[ `scrollTop@m | `scrollLeft@m ]属性の被取得時には、次を走らせ~MUST: ◎ The scrollTop attribute, on getting, must return the result of running these steps:

  1. %文書 ~LET 此れの`~node文書$ ◎ Let document be the element’s node document.
  2. ~IF[ %文書 は`作動中の文書$でない ] ⇒ ~RET 0 ◎ If document is not the active document, return zero and terminate these steps.
  3. %window ~LET %文書 の `defaultView$m 属性~値 ◎ Let window be the value of document’s defaultView attribute.
  4. ~IF[ %window ~EQ ~NULL ] ⇒ ~RET 0 ◎ If window is null, return zero and terminate these steps.
  5. ~IF[ 此れは`根~要素$である ]~AND[ %文書 は`過去互換~mode$下にある ] ⇒ ~RET 0 ◎ If the element is the root element and document is in quirks mode, return zero and terminate these steps.
  6. ~IF[ 次のいずれかが満たされる ]…:

    • 此れは`根~要素$である
    • [ 此れは `HTML body 要素$である ]~AND[ %文書 は`過去互換~mode$下にある ]~AND[ 此れは`~scroll可能になり得ない$ ]

    …ならば ⇒ ~RET %window 上の[ `scrollY^m | `scrollX^m ]の値

    ◎ If the element is the root element return the value of scrollY on window. ◎ If the element is the HTML body element, document is in quirks mode, and the element is not potentially scrollable, return the value of scrollY on window.
  7. ~IF[ 此れは `CSS ~layout~box$を持たない ] ⇒ ~RET ~zero ◎ If the element does not have any associated CSS layout box, return zero and terminate these steps.
  8. ~RET 此れの`~scrolling区画$の揃点から相対的な, 此れの`~padding辺$の[ 上端の y 座標 | 左端の x 座標 ] ◎ Return the y-coordinate of the scrolling area at the alignment point with the top of the padding edge of the element.

[ `scrollTop@m | `scrollLeft@m ]属性の被設定時には、次を走らせ~MUST: ◎ When setting the scrollTop attribute these steps must be run:

  1. %v ~LET 与えられた値を`有限~値に正規化-$した結果 ◎ Let y be the given value. ◎ Normalize non-finite values for y.
  2. %文書 ~LET 此れの`~node文書$ ◎ Let document be the element’s node document.
  3. ~IF[ %文書 は`作動中の文書$でない ] ⇒ ~RET ◎ If document is not the active document, terminate these steps.
  4. %window ~LET %文書 の `defaultView$m 属性~値 ◎ Let window be the value of document’s defaultView attribute.
  5. ~IF[ %window ~EQ ~NULL ] ⇒ ~RET ◎ If window is null, terminate these steps.
  6. ~IF[ 此れは`根~要素$である ]~AND[ %文書 は`過去互換~mode$下にある ] ⇒ ~RET ◎ If the element is the root element and document is in quirks mode, terminate these steps.
  7. ~IF[ 次のいずれかが満たされる ]…:

    • 此れは`根~要素$である
    • [ 此れは `HTML body 要素$ である ]~AND[ %文書 は`過去互換~mode$下にある ]~AND[ 此れは`~scroll可能になり得ない$ ]

    …ならば:

    1. 次の引数を渡して, `scroll()^m を呼出す:

      1. 第一~引数:[ `scrollX^m の値| %v ]
      2. 第二~引数:[ %v | `scrollY^m の値 ]
    2. ~RET
    ◎ If the element is the root element invoke scroll() on window with scrollX on window as first argument and y as second argument, and terminate these steps. ◎ If the element is the HTML body element, document is in quirks mode, and the element is not potentially scrollable, invoke scroll() on window with scrollX as first argument and y as second argument, and terminate these steps.
  8. ~IF[ 此れは,次のいずれかを満たす ] ⇒ ~RET:

    • `CSS ~layout~box$を持たない
    • `~scrolling~box$を持たない
    • ~overflowしない
    ◎ If the element does not have any associated CSS layout box, the element has no associated scrolling box, or the element has no overflow, terminate these steps.
  9. 次を入力に,此れを`~scrollさせる$:

    ~scrollの挙動
    `auto$l
    目的位置
    ( [ `scrollLeft$m の値 | %v ], [ %v | `scrollTop$m の値 ] )
    ◎ Scroll the element to scrollLeft,y, with the scroll behavior being "auto".

The scrollLeft attribute, on getting, must return the result of running these steps:

  1. Let document be the element’s node document.
  2. If document is not the active document, return zero and terminate these steps.
  3. Let window be the value of document’s defaultView attribute.
  4. If window is null, return zero and terminate these steps.
  5. If the element is the root element and document is in quirks mode, return zero and terminate these steps.
  6. If the element is the root element return the value of scrollX on window.
  7. If the element is the HTML body element, document is in quirks mode, and the element is not potentially scrollable, return the value of scrollX on window.
  8. If the element does not have any associated CSS layout box, return zero and terminate these steps.
  9. Return the x-coordinate of the scrolling area at the alignment point with the left of the padding edge of the element.

When setting the scrollLeft attribute these steps must be run:

  1. Let x be the given value.
  2. Normalize non-finite values for x.
  3. Let document be the element’s node document.
  4. If document is not the active document, terminate these steps.
  5. Let window be the value of document’s defaultView attribute.
  6. If window is null, terminate these steps.
  7. If the element is the root element and document is in quirks mode, terminate these steps.
  8. If the element is the root element invoke scroll() on window with x as first argument and scrollY on window as second argument, and terminate these steps.
  9. If the element is the HTML body element, document is in quirks mode, and the element is not potentially scrollable, invoke scroll() on window with x as first argument and scrollY on window as second argument, and terminate these steps.
  10. If the element does not have any associated CSS layout box, the element has no associated scrolling box, or the element has no overflow, terminate these steps.
  11. Scroll the element to x,scrollTop, with the scroll behavior being "auto".

[ `scrollWidth@m | `scrollHeight@m ]属性の被取得時には、次を走らせ~MUST: ◎ The scrollWidth attribute must return the result of running these steps:

  1. %文書 ~LET 此れの`~node文書$ ◎ Let document be the element’s node document.
  2. ~IF[ %文書 は`作動中の文書$でない ] ⇒ ~RET 0 ◎ If document is not the active document, return zero and terminate these steps.
  3. ~IF[ 次のいずれかが満たされる ]…:

    • [ %文書 は`過去互換~mode$下にない ]~AND[ 此れは`根~要素$である ]
    • [ %文書 は`過去互換~mode$下にある ]~AND[ 此れは `HTML body 要素$である ]~AND[ 此れは `~scroll可能になり得ない$ ]

    …ならば:

    1. ~IF[ 此れの`表示域$は無い ] ⇒ ~RET ~zero
    2. ~RET max( `表示域$の`~scrolling区画$の[ 横幅 | 縦幅 ], `表示域$の[ `有効~横幅$ | `有効~縦幅$ ] )
    ◎ Let viewport width be the width of the viewport excluding the width of the scroll bar, if any, or zero if there is no viewport. ◎ If the element is the root element and document is not in quirks mode return max(viewport scrolling area width, viewport width). ◎ If the element is the HTML body element, document is in quirks mode and the element is not potentially scrollable, return max(viewport scrolling area width, viewport width).
  4. ~IF[ 此れは `CSS ~layout~box$を持たない ] ⇒ ~RET ~zero ◎ If the element does not have any associated CSS layout box return zero and terminate these steps.
  5. ~RET 此れの`~scrolling区画$の[ 横幅 | 縦幅 ] ◎ Return the width of the element’s scrolling area.

The scrollHeight attribute must return the result of running these steps:

  1. Let document be the element’s node document.
  2. If document is not the active document, return zero and terminate these steps.
  3. Let viewport height be the height of the viewport excluding the height of the scroll bar, if any, or zero if there is no viewport.
  4. If the element is the root element and document is not in quirks mode return max(viewport scrolling area height, viewport height).
  5. If the element is the HTML body element, document is in quirks mode and the element is not potentially scrollable, return max(viewport scrolling area height, viewport height).
  6. If the element does not have any associated CSS layout box return zero and terminate these steps.
  7. Return the height of the element’s scrolling area.

[ `clientTop@m | `clientLeft@m ]属性の被取得時には,次を走らせ~MUST: ◎ The clientTop attribute must run these steps:

  1. ~IF[ 此れは `CSS ~layout~box$を持たない ]~OR[ 此れの `CSS ~layout~box$は`行内$である ] ⇒ ~RET ~zero ◎ If the element has no associated CSS layout box or if the CSS layout box is inline, return zero.
  2. ~RET 次の和:

    • [ `border-top-width$p | `border-left-width$p ]~propの算出値
    • `~padding辺$の[ 上端 | 左端 ]と`~border辺$の[ 上端 | 左端 ]の間に描画された~scroll~barの[ 縦幅 | 横幅 ]

    — ここで、 此れとその先祖に対する`座標系変換$は適用しないとする。

    ◎ Return the computed value of the border-top-width property plus the height of any scrollbar rendered between the top padding edge and the top border edge, ignoring any transforms that apply to the element and its ancestors.

The clientLeft attribute must run these steps:

  1. If the element has no associated CSS layout box or if the CSS layout box is inline, return zero.
  2. Return the computed value of the border-left-width property plus the width of any scrollbar rendered between the left padding edge and the left border edge, ignoring any transforms that apply to the element and its ancestors.

[ `clientWidth@m | `clientHeight@m ]属性の被取得時には,次を走らせ~MUST: ◎ The clientWidth attribute must run these steps:

  1. ~IF[ 此れは `CSS ~layout~box$を持たない ]~OR[ 此れの `CSS ~layout~box$は`行内$である ] ⇒ ~RET ~zero ◎ If the element has no associated CSS layout box or if the CSS layout box is inline, return zero.
  2. ~IF[ 次のいずれかが満たされる ]…:

    • [ 此れは`根~要素$である ]~AND[ %文書 は`過去互換~mode$下にない ]
    • [ 此れは `HTML body 要素$ である ]~AND[ %文書 は`過去互換~mode$下にある ]

    …ならば ⇒ ~RET `表示域$の[ `有効~横幅$ | `有効~縦幅$ ]

    ◎ If the element is the root element and the element’s node document is not in quirks mode, or if the element is the HTML body element and the element’s node document is in quirks mode, return the viewport width excluding the size of a rendered scroll bar (if any).
  3. ~RET `~padding辺$の[ 横幅 | 縦幅 ] — ここで:

    • `~padding辺$と`~border辺$の間に~scroll~barが描画されている場合は,その分の[ 横幅 | 縦幅 ]は除外する。
    • 此れとその先祖に対する`座標系変換$は適用しないとする。
    ◎ Return the width of the padding edge excluding the width of any rendered scrollbar between the padding edge and the border edge, ignoring any transforms that apply to the element and its ancestors.

The clientHeight attribute must run these steps:

  1. If the element has no associated CSS layout box or if the CSS layout box is inline, return zero.
  2. If the element is the root element and the element’s node document is not in quirks mode, or if the element is the HTML body element and the element’s node document is in quirks mode, return the viewport height excluding the size of a rendered scroll bar (if any).
  3. Return the height of the padding edge excluding the height of any rendered scrollbar between the padding edge and the border edge, ignoring any transforms that apply to the element and its ancestors.

6.1. `Element^I の~scrolling0

`ScrollIntoViewOptions$I 辞書 %options を用いて,要素 %要素 を `~view内に~scrollさせる@ ときは ⇒ ~FOR `~scrolling~box$ %~box を確立した ~EACH ([ 先祖~要素 または`表示域$]%S ) に対し,最も内縁の`~scrolling~box$から最も外縁のそれの順に、次を走らす: ◎ To scroll an element into view element, with a ScrollIntoViewOptions dictionary options, means to run these steps for each ancestor element or viewport that establishes a scrolling box scrolling box, in order of innermost to outermost scrolling box:

  1. ~IF[[ %要素 に結付けられている`文書$ ]と[ %S に結付けられている`文書$ ]とは,`同一生成元$でない ] ⇒ ~RET ◎ If the Document associated with element is not same origin with the Document associated with the element or viewport associated with box, terminate these steps.
  2. %要素境界 ~LET [ 要素に対し `getBoundingClientRect()$m を呼出した結果 ]を表現する~box ◎ Let element bounding border box be the box that the return value of invoking getBoundingClientRect() on element represents.
  3. 以下において、 %~box の辺 %e に対する %要素境界 の `同じ側@ の辺とは、 %e と物理的に同じ側に位置する %要素境界 の辺を指すとする。 ◎ Let scrolling box edge A be the beginning edge in the block flow direction of scrolling box, and let element edge A be element bounding border box’s edge on the same physical side as that of scrolling box edge A. ◎ Let scrolling box edge B be the ending edge in the block flow direction of scrolling box, and let element edge B be element bounding border box’s edge on the same physical side as that of scrolling box edge B. ◎ Let scrolling box edge C be the beginning edge in the inline base direction of scrolling box, and let element edge C be element bounding border box’s edge on the same physical side as that of scrolling box edge C. ◎ Let scrolling box edge D be the ending edge in the inline base direction of scrolling box, and let element edge D be element bounding border box’s edge on the same physical side as that of scrolling box edge D.
  4. %目的位置 ~LET[ `塊~flow方向$ | `行内~基底~方向$ ]の それぞれについて、以下に従って与えられる, %~box が揃えられることになる~scroll位置: ◎ Let element width be the distance between element edge C and element edge D. ◎ Let scrolling box width be the distance between scrolling box edge C and scrolling box edge D. ◎ Let position be the scroll position scrolling box would have by following these steps:

    この段における[ `開始辺$/`終止辺$/中心 ]は,[ `塊~flow方向$ | `行内~基底~方向$ ]に位置するものを指すとする。 ◎ ↓↓

    1. ~scroll位置は、 %options の[ `block$mb | `inline$mb ]辞書~memberの値に応じて: ◎ ↓

      `start$l
      %~boxの`開始辺$に, %要素境界 の`同じ側$の辺を揃える ◎ If the block dictionary member of options is "start", align element edge A with scrolling box edge A.
      `end$l
      %~boxの`終止辺$に, %要素境界 の`同じ側$の辺を揃える ◎ Otherwise, if the block dictionary member of options is "end"; align element edge B with scrolling box edge B.
      `center$l
      %要素境界 の中心と %~box の中心とを揃える ◎ Otherwise, if the block dictionary member of options is "center"; align the center of element bounding border box with the center of scrolling box in scrolling box’s block flow direction.
      `nearest$l
      1. %要素~幅 ~LET %~box の[`開始辺$, `終止辺$]と`同じ側$にある, %要素境界 の2辺の距離 ◎ ↑
      2. %~box幅 ~LET %~box の`開始辺$と`終止辺$の距離 ◎ ↑
      3. %~box と %要素境界 の位置関係に応じて: ◎ Otherwise, it is "nearest"; follow these steps:

        %~box の`開始辺$と`終止辺$のいずれについても,その外側に %要素境界 の`同じ側$の辺が位置する場合 ◎ If element edge A and element edge B are both outside scrolling box edge A and scrolling box edge B
        何もしない `現在の~scroll位置と同じ^tnote ◎ Do nothing.
        [ %~box の`開始辺$の外側に %要素境界 の`同じ側$の辺が位置する ]~AND[ %要素~幅 ~LT %~box幅 ] ◎ If element edge A is outside scrolling box edge A and element width is less than scrolling box width
        [ %~box の`終止辺$の外側に %要素境界 の`同じ側$の辺が位置する ]~AND[ %要素~幅 ~GT %~box幅 ] ◎ If element edge B is outside scrolling box edge B and element width is greater than scrolling box width
        %~boxの`開始辺$に, %要素境界 の`同じ側$の辺を揃える ◎ Align element edge A with scrolling box edge A.
        [ %~box の`開始辺$の外側に %要素境界 の`同じ側$の辺が位置する ]~AND[ %要素~幅 ~GT %~box幅 ] ◎ If element edge A is outside scrolling box edge A and element width is greater than scrolling box width
        [ %~box の`終止辺$の外側に %要素境界 の`同じ側$の辺が位置する ]~AND[ %要素~幅 ~LT %~box幅 ] ◎ If element edge B is outside scrolling box edge B and element width is less than scrolling box width
        %~boxの`終止辺$に, %要素境界 の`同じ側$の辺を揃える ◎ Align element edge B with scrolling box edge B.
    1. If the inline dictionary member of options is "start", align element edge C with scrolling box edge C.
    2. Otherwise, if the inline dictionary member of options is "end"; align element edge D with scrolling box edge D.
    3. Otherwise, if the inline dictionary member of options is "center", align the center of element bounding border box with the center of scrolling box in scrolling box’s inline base direction.
    4. Otherwise, it is "nearest"; follow these steps:
      If element edge C and element edge D are both outside scrolling box edge C and scrolling box edge D
      Do nothing.
      If element edge C is outside scrolling box edge C and element width is less than scrolling box width
      If element edge D is outside scrolling box edge D and element width is greater than scrolling box width
      Align element edge C with scrolling box edge C.
      If element edge C is outside scrolling box edge C and element width is greater than scrolling box width
      If element edge D is outside scrolling box edge D and element width is less than scrolling box width
      Align element edge D with scrolling box edge D.
  5. ~IF[ %目的位置 ~EQ %~box の現在の~scroll位置 ]~AND[ %~box において`滑らかな~scroll$は進行中でない ] ⇒ ~RET ◎ If position is the same as scrolling box’s current scroll position, and scrolling box does not have an ongoing smooth scroll, abort these steps.
  6. 次を入力に, %~box の`~scrollを遂行する$。

    関連要素
    [ %S は要素であるならば %S / %S は`表示域$であるならば [ %S に結付けられている`文書$の`根~要素$があれば それ / なければ ~NULL ]]
    ~scrollの挙動
    %options の `behavior$mb 辞書~member
    目的位置
    %目的位置
    ◎ If scrolling box is associated with an element ◎ Let associated element be the element. ◎ If scrolling box is associated with a viewport ◎ Let document be the viewport’s associated Document. Let associated element be document’s root element, if there is one, or null otherwise. ◎ Let behavior be the behavior dictionary member of options. ◎ Perform a scroll of scrolling box to position, associated element as the associated element and behavior as the scroll behavior.

~UAは、次を入力に,要素 %要素 を `~scrollさせる@ ときは ⇒ ~scrollの挙動(省略可): %挙動;
目的位置: ( %x, %y )

次を走らす:

◎ To scroll an element element to x,y optionally with a scroll behavior behavior (which is "auto" if omitted) means to:
  1. ~IF[ %挙動 は省略されている ] ⇒ %挙動 ~SET `auto$l ◎ ↑
  2. %~box ~LET %要素 の`~scrolling~box$ ◎ Let box be element’s associated scrolling box.
  3. %x ~LET %~box の横方向の`~overflow方向$に応じて,次で与えられる値: ◎ ↓

    右方 ◎ If box has rightward overflow direction
    max( 0, min( %x, %要素 の`~scrolling区画$の横幅 − %要素 の`~padding辺$の横幅 )) ◎ Let x be max(0, min(x, element scrolling area width - element padding edge width)).
    左方 ◎ If box has leftward overflow direction
    min( 0, max( %x, %要素 の`~padding辺$の横幅 − %要素 の`~scrolling区画$の横幅 )) ◎ Let x be min(0, max(x, element padding edge width - element scrolling area width)).
  4. %y ~LET %~box の縦方向の`~overflow方向$に応じて,次で与えられる値: ◎ ↓

    下方 ◎ If box has downward overflow direction
    max( 0, min( %y, %要素 の`~scrolling区画$の縦幅 − %要素 の`~padding辺$の縦幅 )) ◎ Let y be max(0, min(y, element scrolling area height - element padding edge height)).
    上方 ◎ If box has upward overflow direction
    %y ~LET min( 0, max( %y, %要素 の`~padding辺$の縦幅 − %要素 の`~scrolling区画$の縦幅 )) ◎ Let y be min(0, max(y, element padding edge height - element scrolling area height)).
  5. %目的位置 ~LET `~scrolling区画$の座標 ( %x, %y ) は %~box の左上隅に揃えられるような, %~box の~scroll位置 ◎ Let position be the scroll position box would have by aligning scrolling area x-coordinate x with the left of box and aligning scrolling area y-coordinate y with the top of box.
  6. ~IF[ %目的位置 ~EQ %~box の現在の~scroll位置 ]~AND[ %~box において`滑らかな~scroll$は進行中でない ] ⇒ ~RET ◎ If position is the same as box’s current scroll position, and box does not have an ongoing smooth scroll, abort these steps.
  7. 次を入力に, %~box の`~scrollを遂行する$

    関連要素
    %要素
    ~scrollの挙動
    %挙動
    目的位置
    %目的位置
    ◎ Perform a scroll of box to position, element as the associated element and behavior as the scroll behavior.

7. `HTMLElement^I ~interfaceに対する拡張

⇒! partial interface `HTMLElement!I { readonly attribute `Element$I? `offsetParent$m; readonly attribute long `offsetTop$m; readonly attribute long `offsetLeft$m; readonly attribute long `offsetWidth$m; readonly attribute long `offsetHeight$m; };◎ `HTMLElement^dgm

`offsetParent@m 属性の被取得時には、次を走らせ~MUST: ◎ The offsetParent attribute must return the result of running these steps:

  1. ~IF[ 此れは次のいずれかを満たす ] ⇒ ~RET ~NULL: ◎ If any of the following holds true return null and terminate this algorithm:

    • `CSS ~layout~box$を持たない。 ◎ The element does not have an associated CSS layout box.
    • `根~要素$である。 ◎ The element is the root element.
    • `HTML body 要素$である。 ◎ The element is the HTML body element.
    • `position$p ~propの算出値 ~EQ `fixed^v ◎ The element’s computed value of the position property is fixed.
  2. %先祖 ~LET 此れ ◎ ↓
  3. ~WHILE[ `平坦な木$における %先祖 の親~要素 %親 はある ]: ◎ Let ancestor be the parent of the element in the flat tree and repeat these substeps:

    1. %先祖 ~SET %親 ◎ ↑
    2. ~IF[ %先祖 は 此れから`~closed-shadow-hidden$である ] ⇒ ~IF[ %先祖 の `position$p ~propの算出値 ~EQ `fixed^v ] ⇒ ~RET ~NULL ◎ If ancestor is closed-shadow-hidden from the element and its computed value of the position property is fixed, terminate this algorithm and return null.

    3. ~ELIF[ 次のいずれかが満たされる ]…: ◎ If ancestor is not closed-shadow-hidden from the element and satisfies at least one of the following, terminate this algorithm and return ancestor.

      • %先祖 の `position$p ~propの算出値 ~NEQ `static^v ◎ The computed value of the position property is not static.
      • %先祖 は`HTML body 要素$である ◎ It is the HTML body element.
      • [ 此れの `position$p ~propの算出値 ~EQ `static^v ]~AND[ %先祖 は[ `td^e, `th^e, `table^e ]いずれかの `HTML 要素$ である ] ◎ The computed value of the position property of the element is static and the ancestor is one of the following HTML elements: td, th, or table.

      …ならば ⇒ ~RET %先祖 ◎ If there is no more parent of ancestor in the flat tree, terminate this algorithm and return null. ◎ Let ancestor be the parent of ancestor in the flat tree.

  4. ~RET ~NULL ◎ ↑

[ `offsetTop@m | `offsetLeft@m ]属性の被取得時には、次を走らせ~MUST: ◎ The offsetTop attribute must return the result of running these steps:

  1. ~IF[ 此れは `HTML body 要素$である ]~OR[ 此れは `CSS ~layout~box$を持たない ] ⇒ ~RET ~zero ◎ If the element is the HTML body element or does not have any associated CSS layout box return zero and terminate this algorithm.
  2. ~IF[ 此れの `offsetParent$m ~EQ ~NULL ] ⇒ ~RET [ `初期~包含塊$原点に相対的な,此れの最初の `CSS ~layout~box$の`~border辺$の[ 上端の y 座標 | 左端の x 座標 ]] — ここで、此れとその先祖に対する`座標系変換$は適用しないとする。 ◎ If the offsetParent of the element is null return the y-coordinate of the top border edge of the first CSS layout box associated with the element, relative to the initial containing block origin, ignoring any transforms that apply to the element and its ancestors, and terminate this algorithm.
  3. ~RET ( 此れの最初の `CSS ~layout~box$の`~border辺$の[ 上端の y 座標 | 左端の x 座標 ] ) − ( 此れの `offsetParent$m の最初の `CSS ~layout~box$の`~padding辺$の[ 上端の y 座標 | 左端の x 座標 ] ) — ここで:

    • いずれの座標も`初期~包含塊$の原点に相対的とする。
    • 此れとその先祖に対する`座標系変換$は適用しないとする。
    ◎ Return the result of subtracting the y-coordinate of the top padding edge of the first CSS layout box associated with the offsetParent of the element from the y-coordinate of the top border edge of the first CSS layout box associated with the element, relative to the initial containing block origin, ignoring any transforms that apply to the element and its ancestors.

    注記: 複数の行~boxからなる`行内$要素については、その最初の `CSS ~layout~box$のみが考慮されることになる。 ◎ Note: An inline element that consists of multiple line boxes will only have its first CSS layout box considered.

The offsetLeft attribute must return the result of running these steps:

  1. If the element is the HTML body element or does not have any associated CSS layout box return zero and terminate this algorithm.
  2. If the offsetParent of the element is null return the x-coordinate of the left border edge of the first CSS layout box associated with the element, relative to the initial containing block origin, , ignoring any transforms that apply to the element and its ancestors, and terminate this algorithm.
  3. Return the result of subtracting the x-coordinate of the left padding edge of the first CSS layout box associated with the offsetParent of the element from the x-coordinate of the left border edge of the first CSS layout box associated with the element, relative to the initial containing block origin, ignoring any transforms that apply to the element and its ancestors.

[ `offsetWidth@m | `offsetHeight@m ]属性の被取得時には、次を走らせ~MUST: ◎ The offsetWidth attribute must return the result of running these steps:

  1. ~IF[ 此れは `CSS ~layout~box$を持たない ] ⇒ ~RET ~zero ◎ If the element does not have any associated CSS layout box return zero and terminate this algorithm.
  2. ~RET 此れの最初の `CSS ~layout~box$の`~border辺$の[ 横幅 | 縦幅 ] — ここで、此れとその先祖に対する`座標系変換$は適用しないとする。 ◎ Return the border edge width of the first CSS layout box associated with the element, ignoring any transforms that apply to the element and its ancestors.

The offsetHeight attribute must return the result of running these steps:

  1. If the element does not have any associated CSS layout box return zero and terminate this algorithm.
  2. Return the border edge height of the first CSS layout box associated with the element, ignoring any transforms that apply to the element and its ancestors.

8. `HTMLImageElement^I ~interfaceに対する拡張

⇒! partial interface `HTMLImageElement!I { readonly attribute long `x$m; readonly attribute long `y$m; };◎

[ `x@m | `y@m ]属性の被取得時には、次を走らせ~MUST:

  1. ~IF[ 此れは `CSS ~layout~box$を持たない ] ⇒ ~RET ~zero
  2. ~RET `初期~包含塊$の原点に相対的な[ 此れの最初の `CSS ~layout~box$の`~border辺$ ]の[ 左端の x 座標 | 上端の y 座標 ]] — ここで、此れとその先祖に対する`座標系変換$は適用しないとする。
◎ The x attribute, on getting, must return the x-coordinate of the left border edge of the first CSS layout box associated with the element, relative to the initial containing block origin, ignoring any transforms that apply to the element and its ancestors, or zero if there is no CSS layout box. ◎ The y attribute, on getting, must return the y-coordinate of the top border edge of the first CSS layout box associated with the element, relative to the initial containing block origin, ignoring any transforms that apply to the element and its ancestors, or zero if there is no CSS layout box.

9. `Range^I ~interfaceに対する拡張

この節で述べる~methodが返す~objは静的で~MUST。 ◎ The objects the methods described below return must be static.

【 静的: すなわち、取得された~objの内容が,動的に変化することはない — これは、 [NewObject] IDL 拡張属性に対応する(この節~以外の IDL ~memberも同様)。 】

⇒! partial interface `Range!I { sequence<`DOMRect$I> `getClientRects$m(); [NewObject] `DOMRect$I `getBoundingClientRect$m(); };◎ `Range^dgm

`getClientRects()@m ~methodの被呼出時には、次を走らせ~MUST: ◎ ↓

  1. ~IF[ 此れは文書~内を指していない ] ⇒ ~RET 空~連列~obj ◎ ↓
  2. ~RET [ 次の拘束に合致するような静的 `DOMRect$I ~obj ]からなる,内容~順の~listを包含する連列~obj: ◎ The getClientRects() method, when invoked, must return an empty sequence if the range is not in the document and otherwise a sequence object containing static DOMRect objects in content order that matches the following constraints:

    • ~FOR 此れに`被包含$なる ~EACH ( %要素 ) に対する ⇒ %要素 上の `getClientRects()^m を呼出した返り値に含まれる~border区画たち。 ◎ For each element selected by the range, whose parent is not selected by the range, include the border areas returned by invoking getClientRects() on the element.
    • 此れに[ `半被包含$または`被包含$† ]なる ~EACH( `Text$I ~node ) (`始点$と`終点$が同じになるものも含まれる)に対する ⇒ (行~box全体ではなく)選択された部分のみを囲む `DOMRect$I ~obj。

      【† `被包含$なる要素~内の `Text^I ~nodeも除外されないことになる。 】

      これらの `DOMRect$I ~objの境界は、~font計量を用いて算出される。 したがって,横書きの下では、各~boxの 縦方向の寸法は~fontの~ascentと~descentから決定され, 横方向の寸法は~textの送り幅から決定される。 此れの`中身$が `~typographic文字~単位$ `CSS-TEXT-3$r を部分的に含む場合(例: 代用対の片割れや書記素~clusterの一部分)、境界を算出する目的においては,その`~typographic文字~単位$を全部的に含め~MUST。 要素の先祖に対する`座標系変換$は、適用される。

      【 “送り幅( advance )” — 対象~textが描画される起点から,後続の~textが同じ行に描画されるとするときの,その起点までの長さ 】

      ◎ For each Text node selected or partially selected by the range (including when the boundary-points are identical), include a DOMRect object (for the part that is selected, not the whole line box). The bounds of these DOMRect objects are computed using font metrics; thus, for horizontal writing, the vertical dimension of each box is determined by the font ascent and descent, and the horizontal dimension by the text advance width. If the range covers a partial typographic character unit (e.g. half a surrogate pair or part of a grapheme cluster), the full typographic character unit must be included for the purpose of computing the bounds of the relevant DOMRect. [CSS-TEXT-3] The transforms that apply to the ancestors are applied.

`getBoundingClientRect@m ~methodの被呼出時には、次の~algoによる結果を返さ~MUST: ◎ The getBoundingClientRect() method, when invoked, must return the result of the following algorithm:

  1. %list ~LET 此れ上で `getClientRects()$m を呼出した結果 ◎ Let list be the result of invoking getClientRects() on the same range this method was invoked on.
  2. ~IF[ %list は空である ] ⇒ ~RET 次のようにされた静的 `DOMRect$I ~obj ⇒ [ `x^m, `y^m, `width^m, `height^m ]属性 ~SET 0 ◎ If list is empty return a static DOMRect object whose x, y, width and height members are zero.
  3. ~IF[ %list 内の どの矩形も,横幅, 縦幅ともに~zeroである ] ⇒ ~RET %list 内の最初の矩形 ◎ If all rectangles in list have zero width or height, return the first rectangle in list.
  4. ~RET [ %list 内の[ 横幅, 縦幅ともに~zeroでない ]すべての矩形を包含するような,最小の矩形 ]を表現する静的 `DOMRect$I ~obj ◎ Otherwise, return a static DOMRect object describing the smallest rectangle that includes all of the rectangles in list of which the height or width is not zero.

10. `MouseEvent^I ~interfaceに対する拡張

この~obj IDL 片は、一部の~memberを再定義している。 Can we resolve this somehow? ◎ The object IDL fragment redefines some members. Can we resolve this somehow?

⇒! partial interface `MouseEvent!I { readonly attribute double `screenX$m; readonly attribute double `screenY$m; readonly attribute double `pageX$m; readonly attribute double `pageY$m; readonly attribute double `clientX$m; readonly attribute double `clientY$m; readonly attribute double `x$m; readonly attribute double `y$m; readonly attribute double `offsetX$m; readonly attribute double `offsetY$m; }; partial dictionary `MouseEventInit!I { double `screenX@m = 0.0; double `screenY@m = 0.0; double `clientX@m = 0.0; double `clientY@m = 0.0; };◎ `MouseEvent^dgm

[ `screenX@m | `screenY@m ]属性の被取得時には ⇒ `~Webに公開される~screen区画$の原点に相対的な,此れが生じた地点の[ x 座標 | y 座標 ]を返さ~MUST。 ◎ The screenX attribute must return the x-coordinate of the position where the event occurred relative to the origin of the Web-exposed screen area. ◎ The screenY attribute must return the y-coordinate of the position where the event occurred relative to the origin of the Web-exposed screen area.

[ `pageX@m | `pageY@m ]属性の被取得時には、次を走らせ~MUST: ◎ The pageX attribute must follow these steps:

  1. ~IF[ 此れの`配送~flag$ ~EQ ~ON ] ⇒ ~RET `初期~包含塊$の原点に相対的な,此れが生じた地点の[ 横方向 | 縦方向 ]の座標 ◎ If the event’s dispatch flag is set, return the horizontal coordinate of the position where the event occurred relative to the origin of the initial containing block and terminate these steps.
  2. %offset ~SET 此れに結付けられている `Window$I ~objが[ あれば,その[ `scrollX^m | `scrollY^m ]属性の値 / 無ければ ~zero ]。 ◎ Let offset be the value of the scrollX attribute of the event’s associated Window object, if there is one, or zero otherwise.
  3. ~RET [ %offset + ( 此れの[ `clientX$m | `clientY$m ]属性の値 ) ] ◎ Return the sum of offset and the value of the event’s clientX attribute.

The pageY attribute must follow these steps:

  1. If the event’s dispatch flag is set, return the vertical coordinate of the position where the event occurred relative to the origin of the initial containing block and terminate these steps.
  2. Let offset be the value of the scrollY attribute of the event’s associated Window object, if there is one, or zero otherwise.
  3. Return the sum of offset and the value of the event’s clientY attribute.

[ `clientX@m | `clientY@m ]属性の被取得時には ⇒ `表示域$の原点に相対的な,此れが生じた地点の[ x 座標 | y 座標 ]を返さ~MUST。 ◎ The clientX attribute must return the x-coordinate of the position where the event occurred relative to the origin of the viewport. ◎ The clientY attribute must return the y-coordinate of the position where the event occurred relative to the origin of the viewport.

[ `x@m | `y@m ]属性の被取得時には ⇒ [ `clientX$m | `clientY$m ]と同じ値を返さ~MUST。 ◎ The x attribute must return the value of clientX. ◎ The y attribute must return the value of clientY.

[ `offsetX@m | `offsetY@m ]属性の被取得時には、次を走らせ~MUST: ◎ The offsetX attribute must follow these steps:

  1. ~IF[ 此れの`配送~flag$ ~EQ ~ON ] ⇒ ~RET 要素とその先祖に対する`座標系変換$は適用しない下で, target ~nodeの`~padding辺$の原点に相対的な,此れが生じた地点の[ x 座標 | y 座標 ] ◎ If the event’s dispatch flag is set, return the x-coordinate of the position where the event occurred relative to the origin of the padding edge of the target node, ignoring the transforms that apply to the element and its ancestors, and terminate these steps.

    【 target ~node: 此れの`配送$先の~node(より明確には,~event伝播の中で `AT_TARGET$m に該当する~node)。 】

  2. ~RET [ `pageX$m | `pageY$m ]属性の値 ◎ Return the value of the event’s pageX attribute.

The offsetY attribute must follow these steps:

  1. If the event’s dispatch flag is set, return the y-coordinate of the position where the event occurred relative to the origin of the padding edge of the target node, ignoring the transforms that apply to the element and its ancestors, and terminate these steps.
  2. Return the value of the event’s pageY attribute.

11. 幾何

11.1. `GeometryUtils^I ~interface

⇒! enum `CSSBoxType@I { `margin@l, `border@l, `padding@l, `content@l }; dictionary `BoxQuadOptions@I { `CSSBoxType$I `box@mb = `border$l; `GeometryNode$I `relativeTo@mb; // XXX default document (i.e. viewport) }; dictionary `ConvertCoordinateOptions@I { `CSSBoxType$I `fromBox@mb = `border$l; `CSSBoxType$I `toBox@mb = `border$l; }; [NoInterfaceObject] interface `GeometryUtils@I { sequence<`DOMQuad$I> `getBoxQuads$m( optional `BoxQuadOptions$I %options ); `DOMQuad$I `convertQuadFromNode$m( `DOMQuadInit$I %quad, `GeometryNode$I %from, optional `ConvertCoordinateOptions$I %options ); `DOMQuad$I `convertRectFromNode$m( `DOMRectReadOnly$I %rect, `GeometryNode$I %from, optional `ConvertCoordinateOptions$I %options ); `DOMPoint$I `convertPointFromNode$m( `DOMPointInit$I %point, `GeometryNode$I %from, optional `ConvertCoordinateOptions$I %options ); // XXX z,w turns into 0 }; `Text$I implements `GeometryUtils$I; // like Range `Element$I implements `GeometryUtils$I; `CSSPseudoElement$I implements `GeometryUtils$I; `Document$I implements `GeometryUtils$I; typedef (`Text$I or `Element$I or `CSSPseudoElement$I or `Document$I) `GeometryNode@I;◎

`getBoxQuads(options)@m ~methodは次を走らせ~MUST: ◎ The getBoxQuads(options) method must run the following steps:

  1. DOM order

    p1 = top left even in RTL

    scale to 0 means divide by zero, return 0x0

    cross-frames not allowed, throw WrongDocumentError?

    points are flattened (3d transform), z=0. like getClientRect

    test block in inline

    pseudo-elements before/after are children of the element

    viewport boxes are all the same

`convertQuadFromNode(quad, from, options)@m ~methodは次を走らせ~MUST: ◎ The convertQuadFromNode(quad, from, options) method must run the following steps:

  1. `未策定^tnote

`convertRectFromNode(rect, from, options)@m ~methodは次を走らせ~MUST: ◎ The convertRectFromNode(rect, from, options) method must run the following steps:

  1. `未策定^tnote

`convertPointFromNode(point, from, options)@m ~methodは次を走らせ~MUST: ◎ The convertPointFromNode(point, from, options) method must run the following steps:

  1. `未策定^tnote

12. ~event

12.1. 表示域の~size変更

この節は、 `HTML$r に定義される`~event-loop$に統合される。 ◎ This section integrates with the event loop defined in HTML. [HTML]

`文書$ %文書 の `~resize手続き@ は、次を走らす: ◎ When asked to run the resize steps for a Document doc, run these steps:

  1. ~IF[ この手続きを最後に走らせたときから `表示域$の横幅または縦幅は変化した† ] ⇒ %文書 に結付けられている `Window$I ~objに向けて,名前 `resize$et の~eventを`発火-$する

    † 例えば:

    • 利用者が~browserの~windowを[ ~resize/拡大 ]したとき
    • `頁~zoom$倍率が変化したとき
    • `iframe^e 要素の寸法が変化したとき
    ◎ If doc’s viewport has had its width or height changed (e.g. as a result of the user resizing the browser window, or changing the page zoom scale factor, or an iframe element’s dimensions are changed) since the last time these steps were run, fire an event named resize at the Window object associated with doc.

12.2. ~scrolling0

この節は、 `HTML$r に定義される`~event-loop$に統合される。 ◎ This section integrates with the event loop defined in HTML. [HTML]

各 `文書$には、 処理待ちにある~scroll~event~targetたちの~list が結付けられる(初期~時は空) — 長いので以下 ~scroll処理待ち~list と略記する。 ◎ Each Document has an associated list of pending scroll event targets, initially empty.

~UAは、`表示域$が~scrollされる度に(利用者との対話, ~API,いずれによるものであっても),次を走らせ~MUST: ◎ Whenever a viewport gets scrolled (whether in response to user interaction or by an API), the user agent must run these steps:

  1. %文書 ~LET `表示域$に結付けられている`文書$ ◎ Let doc be the viewport’s associated Document.
  2. ~IF[ %文書 ~IN %文書 の`~scroll処理待ち~list$ ] ⇒ ~RET ◎ If doc is already in doc’s pending scroll event targets, abort these steps.
  3. %文書 を %文書 の`~scroll処理待ち~list$に付加する ◎ Append doc to doc’s pending scroll event targets.

~UAは、要素が~scrollされる度に(利用者との対話, ~API,いずれによるものであっても),次を走らせ~MUST: ◎ Whenever an element gets scrolled (whether in response to user interaction or by an API), the user agent must run these steps:

  1. %文書 ~LET 要素の`~node文書$ ◎ Let doc be the element’s node document.
  2. ~IF[ 要素 ~IN %文書 の`~scroll処理待ち~list$ ] ⇒ ~RET ◎ If the element is already in doc’s pending scroll event targets, abort these steps.
  3. %文書 の`~scroll処理待ち~list$に要素を付加する ◎ Append the element to doc’s pending scroll event targets.

`文書$ %文書 の `~scroll手続き@ は、次を走らす: ◎ When asked to run the scroll steps for a Document doc, run these steps:

  1. ~FOR %文書 の`~scroll処理待ち~list$内の ~EACH ( %target ) に対し,~listに追加された順序で: ◎ For each item target in doc’s pending scroll event targets, in the order they were added to the list, run these substeps:

    1. ~IF[ %target は`文書$である ] ⇒ %target にて浮上する 名前 `scroll$et の~eventを`発火-$する ◎ If target is a Document, fire an event named scroll that bubbles at target.
    2. ~ELSE ⇒ %target に向けて,名前 `scroll$et の~eventを`発火-$する ◎ Otherwise, fire an event named scroll at target.
  2. %文書 の`~scroll処理待ち~list$を空にする ◎ Empty doc’s pending scroll event targets.

12.3. ~event要覧

~INFORMATIVE
~event ~interface ~target ~~説明
`resize@et `Event$I `Window$I `表示域$が~resizeされたときに `Window$I に向けて発火される。 ◎ Fired at the Window when the viewport is resized.
`scroll@et `Event$I `文書$, 要素 [ `表示域$ / 要素 ]が~scrollされたときに[ `文書$ / 要素 ]に向けて発火される。 ◎ Fired at the Document or element when the viewport or element is scrolled, respectively.

13. CSS ~prop

この節の特色機能は他の仕様に移動されるべきであろう。 ◎ The features in this section should be moved to some other specification.

13.1. 滑らかな~scroll: `scroll-behavior^p ~prop

`●名^ `scroll-behavior@p `●値^ `auto$v | `smooth$v `●初^ `auto$v `●適^ `~scrolling~box$ `●継^ されない `●百^ 利用不可 `●媒^ 視覚的 `●算^ 指定値 `●順^ 文法に従う `●ア^ 不可 `●表終^
Name: 	scroll-behavior
Value: 	auto | smooth
Initial: 	auto
Applies to: 	scrolling boxes
Inherited: 	no
Percentages: 	n/a
Media: 	visual
Computed value: 	specified value
Animatable: 	no
Canonical order: 	per grammar

`scroll-behavior$p ~propは、 navigation†や CSSOM ~scroll ~API により~scrollが生じた際の,`~scrolling~box$による~scrollの挙動を指定する。 他のどの~scrollも,この~propからは影響されない — 例えば利用者により行われるものなど。 この~propが`根~要素$に指定された場合、代わりに`表示域$に適用される。 `† ~scrollなので頁~内の移動を指すものと考えられるが、頁~外からの移動も含まれるかも?^tnote ◎ The scroll-behavior property specifies the scrolling behavior for a scrolling box, when scrolling happens due to navigation or CSSOM scrolling APIs. Any other scrolls, e.g. those that are performed by the user, are not affected by this property. When this property is specified on the root element, it applies to the viewport instead.

注記: HTML `body^e 要素の `scroll-behavior$p ~propは、表示域へは 伝播しない。 ◎ The scroll-behavior property of the HTML body element is not propagated to the viewport.

`auto@v
`~scrolling~box$による~scrollは、`瞬時に$行われる。 ◎ The scrolling box is scrolled in an instant fashion.
`smooth@v
`~scrolling~box$による~scrollは、~UA定義0の速度と動きにより,`滑らか$に行われる。 ~UAは~platform慣行があればそれに従うべきである。 ◎ The scrolling box is scrolled in a smooth fashion using a user-agent-defined timing function over a user-agent-defined period of time. User agents should follow platform conventions, if any.

~UAはこの~propを無視してよい。 ◎ User agents may ignore this property.

変更履歴

この節では、この仕様の各発行版の間の変更点の一部を文書化する。 この節は,網羅的なものではない。 ~bug修正および編集上の変更点は、一般に挙げられない。 ◎ This section documents some of the changes between publications of this specification. This section is not exhaustive. Bug fixes and editorial changes are generally not listed.

2013 年 12 月 17 日以降の変更点

  • `Element!I 上の `scrollIntoView()$m ~methodは、変更が加えられ,拡張された。 ◎ The scrollIntoView() method on Element was changed and extended.
  • `Element!I 上の[ `scrollTop$m, `scrollLeft$m ]属性は、~objをとらなくなった。 代わりに[ `scroll()$m, `scrollTo()$m, `scrollBy()$m ]~methodが追加された。 ◎ The scrollTop and scrollLeft IDL attributes on Element changed to no longer take an object; the scroll(), scrollTo() and scrollBy() methods were added instead.
  • `Element!I 上の[ `scrollWidth$m, `scrollHeight$m, `clientTop$m, `clientLeft$m, `clientWidth$m `clientHeight$m ]IDL 属性は、整数を返す元のふるまいに戻された。 ◎ The scrollWidth, scrollHeight, clientTop, clientLeft, clientWidth and clientHeight IDL attributes on Element were changed back to return integers.
  • `DOMRectList^I ~interfaceは除去された。 ◎ The DOMRectList interface was removed.
  • `Document!I 上に `scrollingElement$m 属性が追加された。 ◎ The scrollingElement IDL attribute on Document was added.
  • `Window$I 上の一部の readonly 属性は、 [Replaceable] IDL 拡張属性 注釈付きにされた。 ◎ Some readonly attributes on Window were annotated with [Replaceable] IDL extended attribute.
  • [ `MediaQueryList$I, `scroll$et ~event, `resize$et ~event ]は、~animation~frameと同期できるように, HTML における`~event-loop$に統合された。 ◎ MediaQueryList, scroll event and resize event are integrated with the event loop in HTML so they are synchronized with animation frames.
  • `scroll-behavior$p に対する `instant^v 値は、 `auto$v に改称された。 ◎ The instant value of scroll-behavior was renamed to auto.
  • `Element!I 上の `scrollLeft$m の原点は、(右横書きにも対応するように)変更された。 ◎ The origin of scrollLeft on Element was changed (for RTL).
  • `Element!I 上の `scrollIntoView()$m ~method, および `Window!I 上の[ `scroll()$m, `scrollTo()$m, `scrollBy()$m ]~methodは、関連する辞書~型~値を最初の引数にとるようにされた。 ◎ The scrollIntoView() method on Element and scroll(), scrollTo() and scrollBy() methods on Window take the relevant dictionary as the first argument.
  • `MediaQueryList!I ~interfaceは、正規の~event~APIを利用し,それを通して `addListener()$m を定義するように変更された。 ◎ The MediaQueryList interface was changed to use regular event API and define addListener() in terms of that.

2011 年 8 月 4 日 から 2013 年 12 月 17 日までの変更点

  • right-to-left (`行内~基底~方向$), および 縦組も取り扱われるようになった。 ◎ The specification now handles right-to-left and vertical writing modes.
  • `頁~zoom$, `~pinch~zoom$が織り込まれた。 ◎ The specification is now aware of page zoom and pinch zoom.
  • `scroll-behavior$p CSS ~propが導入され、滑らかな~scrollを制御できるように,~scrolling0~APIが拡張された。 ◎ The scroll-behavior CSS property is introduced and scrolling APIs are extended with a mechanism to control smooth scrolling.
  • `moveTo()^m, `moveBy()^m, `resizeTo()^m, `resizeBy()^m ~methodが定義された。 ◎ The moveTo(), moveBy(), resizeTo() and resizeBy() methods are now defined.
  • `innerWidth^m 等々は WebIDL 型 `long^c ではなく,`double^c を利用するようにされた。 ◎ innerWidth et al now use the WebIDL type double instead of long.
  • `devicePixelRatio^m が定義された。 ◎ devicePixelRatio is now defined.
  • `window.open()^m に対する `features^v 引数が定義された。 ◎ The features argument to window.open() is now defined.
  • `Screen$I の `colorDepth^m, `pixelDepth^m 属性は、 24 を返すようにされた。 ◎ The colorDepth and pixelDepth attributes of Screen now always return 24.
  • `Element$I に `elementsFromPoint()^m ~methodが導入された。 ◎ The elementsFromPoint() method of Element is introduced.
  • `座標系変換$が織り込まれた。 ◎ The specification is now aware of transforms.
  • 幾何~utility~APIがいくつか導入されたが、まだ仕様化されていない。 ◎ Some geometry utility APIs are introduced but are not yet specified.
  • `ClientRect^I は `DOMRect^I に改称され、 Geometry 仕様に移動された。 `GEOMETRY-1$r ◎ ClientRect has been renamed to DOMRect and has moved to the Geometry specification. [GEOMETRY-1]
  • `resize$et, `scroll$et ~eventの発火-時機について定義された。 ◎ The specification now defines when the resize and scroll events fire.

謝辞

この文書に対する次の方々からの寄与に感謝する:

The editors would like to thank Alan Stearns, Alexey Feldgendler, Antonio Gomes, Björn Höhrmann, Boris Zbarsky, Chris Rebert, Dan Bates, David Vest, Elliott Sprehn, Garrett Smith, Henrik Andersson, Hallvord R. M. Steen, Kang-Hao Lu, Koji Ishii, Leif Arne Storset, Luiz Agostini, Maciej Stachowiak, Michael Dyck, Mike Wilson, Morten Stenshorne, Olli Pettay, Pavel Curtis, Peter-Paul Koch, Rachel Kmetz, Rick Byers, Robert O’Callahan, Sam Weinig, Scott Johnson, Sebastian Zartner, Stewart Brodie, Sylvain Galineau, Tab Atkins, Tarquin Wilton-Jones, Thomas Moore, Thomas Shinnick, and Xiaomei Ji for their contributions to this document.

この草案にて指定された特色機能の多くを,Windows Internet Explorer ブラウザにて最初に実装した Microsoft の人達に特別な謝意を。 Special thanks to the Microsoft employees who first implemented many of the features specified in this draft, which were first widely deployed by the Windows Internet Explorer browser.

2. 適合性

【 この節の内容は CSS 日本語訳 共通ページ に委譲 】

参照文献

文献(規定)

[CSS-BACKGROUNDS-3]
CSS Backgrounds and Borders Module Level 3
https://drafts.csswg.org/css-backgrounds-3/
[CSS-BREAK-3]
Rossen Atanassov; Elika Etemad. CSS Fragmentation Module Level 3. 14 January 2016. CR.
http://dev.w3.org/csswg/css-break/
[CSS-DEVICE-ADAPT]
Rune Lillesveen; Florian Rivoal; Matt Rakow. CSS Device Adaptation Module Level 1. 29 March 2016. WD.
https://drafts.csswg.org/css-device-adapt/
[CSS-DISPLAY-3]
Tab Atkins Jr.; Elika Etemad. CSS Display Module Level 3. 15 October 2015. WD.
http://dev.w3.org/csswg/css-display/
[CSS-OVERFLOW-4]
CSS Overflow Module Level 4
https://drafts.csswg.org/css-overflow-4/
[CSS-POSITION-3]
Rossen Atanassov; Arron Eicholz. CSS Positioned Layout Module Level 3. 17 May 2016. WD.
https://drafts.csswg.org/css-position/
[CSS-PSEUDO-4]
Daniel Glazman; Elika Etemad; Alan Stearns. CSS Pseudo-Elements Module Level 4. 7 June 2016. WD.
https://drafts.csswg.org/css-pseudo-4/
[CSS-SCOPING-1]
Tab Atkins Jr.; Elika Etemad. CSS Scoping Module Level 1. 3 April 2014. WD.
http://dev.w3.org/csswg/css-scoping/
[CSS-TEXT-3]
Elika Etemad; Koji Ishii. CSS Text Module Level 3. 10 October 2013. LCWD.
http://dev.w3.org/csswg/css-text-3/
[CSS-TRANSFORMS-1]
Simon Fraser; et al. CSS Transforms Module Level 1. 26 November 2013. WD.
http://dev.w3.org/csswg/css-transforms/
[CSS-VALUES]
Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 3. 11 June 2015. CR.
http://dev.w3.org/csswg/css-values/
[CSS-WRITING-MODES-3]
Elika Etemad; Koji Ishii. CSS Writing Modes Level 3. 15 December 2015. CR.
http://dev.w3.org/csswg/css-writing-modes-3/
[CSS3-BOX]
Bert Bos. CSS basic box model. 9 August 2007. WD.
https://www.w3.org/TR/css3-box
[CSSOM]
Simon Pieters; Glenn Adams. CSS Object Model (CSSOM). 17 March 2016. WD.
https://drafts.csswg.org/cssom/
[DOM]
Anne van Kesteren. DOM Standard. Living Standard.
https://dom.spec.whatwg.org/
[GEOMETRY-1]
Simon Pieters; Dirk Schulze; Rik Cabanier. Geometry Interfaces Module Level 1. 25 November 2014. CR.
http://dev.w3.org/fxtf/geometry/
[HTML]
Ian Hickson. HTML Standard. Living Standard.
https://html.spec.whatwg.org/multipage/
[RFC2119]
S. Bradner. Key words for use in RFCs to Indicate Requirement Levels. March 1997. Best Current Practice.
https://tools.ietf.org/html/rfc2119
[SVG]
Jon Ferraiolo. Scalable Vector Graphics (SVG) 1.0 Specification. 4 September 2001. REC.
https://www.w3.org/TR/SVG/
[WEBIDL]
Cameron McCormack; Boris Zbarsky. WebIDL Level 1. 8 March 2016. CR.
https://heycam.github.io/webidl/

文献(参考)

[SVG2]
Nikos Andronikos; et al. Scalable Vector Graphics (SVG) 2. 15 September 2015. WD.
https://svgwg.org/svg2-draft/

索引

【 この節の内容は省略(ウィンドウ下端の索引機能を利用されたし)。 】

プロパティ索引

IDL 索引

課題索引

【 これらの節の内容は省略(見出しクリックで巡回)。 】

(クリックで消去)