1. 背景0
この仕様にて定義される特能の多くは、 長い間~browserから~supportされてきた。 この仕様の目標は、 これらの特能を,すべての~browserが相互運用可能な方式で実装できるように定義することである。 この仕様は、 ~scrollの~custom化を許容する,新たな特能も定義する。 ◎ 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 some new features which allow for scroll customization.
【この訳に特有な表記規約】
◎表記記号簡潔に述べるため,次に挙げる(非公式な)用語も定義する:
- `Document$I ~interfaceを実装する~objは、 単に `文書@ と略記される。
- `表示域$の[ `有効~横幅@ / `有効~縦幅@ ]とは、 `表示域$に[ 縦方向/横方向 ]`古典~scrollbar$†が描画されているときは,[ それが成す区画を除外した`表示域$ ]の[ 横幅/縦幅 ]を表す — 他のときは,元の[ 横幅/縦幅 ]と同じになる。 († `上層~scrollbar$は、 ~layout用の区画を占めない。)
“要素が`~box$を有する” という句は、 要素に結付けられた~boxが在る — すなわち,要素は 1 個以上の~boxを生成する — ことを意味する。 要素の `display$p が[ `none^v / `contents^v ]の場合、 要素は,~boxを生成しないので~boxを有さない。
加えて、 次の記法を用いる:
-
記法 “[ %W | %H ]” ( "|" は全角の縦棒)は、 縦横それぞれの方向についての,並立的な記述を表す。
例えば ⇒ “[ x 属性 | y 属性 ] は表示域の[ 左端の~x座標 | 上端の~y座標 ] を返す” ◎終 と記されていれば、 それは 2 つの記述 ⇒# “x 属性 は表示域の左端の~x座標を返す”, “y 属性 は表示域の上端の~y座標を返す” ◎終 が,並立的に重ねられていることを表す。 この対応関係は,同じ~algoの中の別々な段の間でも維持される。
(このような表記を導入する理由は、 記述の簡約以外にも,[ 縦横両方向に関する記述であって, その両方向について対称性がある ]ことを明らかにすることもある。)
2. 各種用語
この仕様に利用される用語は `DOM$r, `CSSOM$r, `HTML$r による。 ◎ Terminology used in this specification is from DOM, CSSOM and HTML. [DOM] [CSSOM] [HTML]
所与の(ある`文書$の)`~body要素$ %~body は、 ~AND↓ を満たすとき, `~scroll可能になり得る@ とされる。 ◎ An element body (which will be the body element) is potentially scrollable if all of the following conditions are true:
- %~body は`~box$を有する。 ◎ body has an associated box.
-
%~body, %~body の`親~要素$は、 どちらも次を満たす ⇒ [ `overflow-x$p, `overflow-y$p ]~propのどちらかは次を満たす ⇒ 算出d値 ~NIN { `visible$v, `clip$v }
【 実際には、 片方の~propがこれを満たすならば,両方とも満たすことになる。 】
◎ body’s parent element’s computed value of the overflow-x or overflow-y properties is neither visible nor clip. ◎ body’s computed value of the overflow-x or overflow-y properties is neither visible nor clip.
注記: `body$e 要素は、 `~scroll可能になり得る$としても,`~scrollされる~box$は無いこともある。 具体的には、 要素の `overflow$p の使用~値は `auto^v であるが, その内容は内容~区画を~overflowしていない場合など。 ◎ Note: A body element that is potentially scrollable might not have a scrolling box. For instance, it could have a used value of overflow being auto but not have its content overflowing its content area.
[ `表示域$/要素 ]【が`~scroll容器$になるとき】の `~scrollされる~box@ ( `scrolling box^en )には、 2 つの `~overflow方向@ — `塊-終端$, `行内-終端$ — がある。 その初期~scroll位置は、 `内容-分布~prop$に依存して,`~scrollされる区画$の`原点$に整列されるとは限らないことに注意。 `CSS-ALIGN-3$r `§ ~overflowと~scroll位置@~CSSALIGN#overflow-scroll-position$ を見よ。 ◎ A scrolling box of a viewport or element has two overflow directions, which are the block-end and inline-end directions for that viewport or element. Note that the initial scroll position might not be aligned with the scrolling area origin depending on the content-distribution properties, see CSS Box Alignment 3 § 5.3 Overflow and Scroll Positions.
[ `表示域$/要素 ]の `~scrollされる区画@ ( `scrolling area^en )は、 その`~scrollされる~box$の`~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.
記号 %D1 は[ 上方, 下方, 左方, 右方 ]いずれかの方向を表し, %D2 は その反対~方向を表すとする。 `~overflow方向$に %D1 が含まれている(したがって %D2 は含まれていない)ならば、 ~boxの[ %D1, %D2 ]側の辺は次で与えられる:
`表示域$に対しては | 要素に対しては | |
---|---|---|
%D1 側の辺 | [ `初期~包含塊$の %D1 側の辺, および `表示域$のすべての子孫~box†の %D1 側の`~margin辺$ ]のうち,最も %D1 側の辺。 ◎ The D1-most edge of the D1 edge of the initial containing block and the D1 margin edge of all of the viewport’s descendants' boxes. | [ 要素の %D1 側の`~padding辺$, および 要素のすべての子孫~box†の %D1 側の`~margin辺$ ]のうち,最も %D1 側の辺 — ただし,要素の先祖を`包含塊$とするような~boxは除外する††。 ◎ The D1-most edge of the element’s D1 padding edge and the D1 margin edge of all of the element’s descendants' boxes, excluding boxes that have an ancestor of the element as their containing block. |
%D2 側の辺 | `初期~包含塊$の %D2 側の辺。 ◎ The D2 edge of the initial containing block. | 要素の %D2 側の`~padding辺$。 ◎ The element’s D2 padding edge. |
【† この子孫は、 `~box~tree$における子孫を意味する。 “表示域の子孫~box” が何を意味するのか不明だが、 当の文書の~box~treeを成す~boxすべてが該当すると見受けられる。 】【†† 例えば,`~flow外$にある~boxなど。 】【 この箇所は、 原文の内容と等価になるよう,~parameter化により大幅に圧縮して記述している。 】
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. |
`~scrollされる区画$の `原点@ は、[ `表示域$の`~scrollされる区画$ならば,`初期~包含塊$の原点/ 他の場合は,要素の~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方向$と[ 反対~方向 / 同じ方向 ]にある辺を指す (例えば,`~overflow方向$が右方と下方ならば、 開始辺は左辺および上辺, 終了辺は右辺および下辺になる, 等々)。 【ここでも、原文と等価になるよう,圧縮して訳している。】
◎ 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.`表示域$には、 `視覚-表示域@ ( `visual viewport^en ) , 対応する `~layout表示域@ ( `layout viewport^en )の 2 種類がある — 後者は、 前者の`~scrollされる区画$を成す。 ◎ The visual viewport is a kind of viewport whose scrolling area is another viewport, called the layout viewport.
~scroll法に加え、 `視覚-表示域$の`~layout表示域$には,拡縮-変形も適用され得る。 この変形は、 当の視覚-表示域の`~canvas$に適用され,その内部的な~座標~空間には影響しない。 ◎ In addition to scrolling, the visual viewport may also apply a scale transform to its layout viewport. This transform is applied to the canvas of the layout viewport and does not affect its internal coordinate space.
注記: 視覚-表示域の拡縮-変形は、 “~pinch~zoom( `pinch-zoom^en )” と称されることが多い†。 この変形は、 概念的に,~CSS`基準~pixel$の~sizeを変更するが, ~layout表示域の~sizeを — ~pageの内容を~flowし直すことなく — `proportional^en に変更する††。 ◎ Note: The scale transform of the visual viewport is often referred to as "pinch-zoom". Conceptually, this transform changes the size of the CSS reference pixel but changes the size of the layout viewport proportionally so that it does not cause reflow of the page’s contents.
【† “局所的” な~zoom。 おそらく、[ 複~touch機器の~UIで利用される,二本指で “つまんで” 拡げる~~操作 ]に由来する呼称。 】【†† “~~拡大鏡” のように、 `~box~tree$を成す すべての`~box$にわたって,同じ倍率で。 】
この拡縮-変形の倍率は、 `視覚-表示域$の `拡縮率@vV ( `scale factor^en )と称される。 ◎ The magnitude of the scale transform is known as the visual viewport’s scale factor.
この例は、 ある~zoomされた視覚-表示域が, (例えば,~touch~dragを遂行している利用者により) “~panされる” 様子を~animationで示す。 ~pageは、 `~layout表示域$が`視覚-表示域$より大きくなるよう拡縮されている。 ◎ This animation shows an example of a zoomed in visual viewport being "panned" around (for example, by a user performing a touch drag). The page is scaled so that the layout viewport is larger than the visual viewport.
~scroll差分は、 まず,当の`視覚-表示域$に適用される。 視覚-表示域の~~限界まで来たときは、 ~scroll差分は,当の`~layout表示域$に適用されることになる。 この挙動は、 `表示域の~scrollを遂行する$手続きにより実装される。 ◎ A scroll delta is applied to the visual viewport first. When the visual viewport is at its extent, scroll delta will be applied to the layout viewport. This behavior is implemented by the perform a scroll steps.
◎ ↓↓§ VisualViewport The VisualViewport object has an associated document, which is a Document object. It is the associated document of the owner Window of VisualViewport. The layout viewport is the owner Window's viewport.
この仕様の要件の目的においては、 `display$p ~propの算出d値が[ `table-column$v / `table-column-group$v ]になる要素は、 ([ ~col/~col~group ]の)`~box$を有すると見なすモノトスル。 ◎ 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 box (the column or column group, respectively).
用語 `~SVG~layout~box@ は、 ある~SVG要素により生成される`~box$を指す — それは、 ~CSSにより定義される`表示~型$【! `display$p 】には対応しない。 ( `rect$e 要素により生成される~boxなど。) ◎ The term SVG layout box refers to a box generated by an SVG element which does not correspond to a CSS-defined display type. (Such as the box generated by a rect element.)
用語 `変形@ は、[ ~SVG/~CSS ]による変形(座標系変換)を指す。 `SVG11$r `CSS-TRANSFORMS-1$r ◎ The term transforms refers to SVG transforms and CSS transforms. [SVG11] [CSS-TRANSFORMS-1]
[ ~IDL~method/属性 ](以下,単に “~member” )から別の~memberが呼ばれるときは、 ~UAは,~memberの内部~APIを呼出すモノトスル — すなわち、 作者は[ ~custom 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.
他が指定されない限り、 文字列は【!is】`一致する$かどうかにより比較される。 ◎ Unless otherwise stated, all string comparisons use is.
2.1. ~CSS~pixel
他が指定されない限り、 この仕様で定義される~API用の[ 座標, 寸法 ]は,すべて`~CSS~pixel@~CSSVAL#px$単位とする。 `CSS-VALUES$r 【この訳では、 “`px$u 単位” と略記する。】 ◎ All coordinates and dimensions for the APIs defined in this specification are in CSS pixels, unless otherwise specified. [CSS-VALUES]
注記: このことは、 例えば `matchMedia()^m には該当しない。 そのような所では、 単位は明示的に与えられる。 ◎ Note: This does not apply to e.g. matchMedia() as the units are explicitly given there.
2.2. ~zoom法
~zoomには 2 種類ある: `~page~zoom@ は、 `初期~表示域$の~sizeに影響する 【例:文字を大きく表示させたときなど】 。 `視覚-表示域$の`拡縮率$vVは、 ~~拡大鏡のように動作して,`初期~表示域$や`実際の表示域$には影響しない。 `CSS-DEVICE-ADAPT$r ◎ There are two kinds of zoom, page zoom which affects the size of the initial viewport, and the visual viewport scale factor which acts like a magnifying glass and does not affect the initial viewport or actual viewport. [CSS-DEVICE-ADAPT]
注記: 拡縮率は, “~pinch~zoom” と称されることが多いが、 ~pinch~zoomする以外の手段を通しても影響され得る。 例:~UAは、 ~focusされた入力~要素が判読可能になるよう~zoomすることもある。 ◎ Note: The "scale factor" is often referred to as "pinch-zoom"; however, it can be affected through means other than pinch-zooming. e.g. The user agent may zooms in on a focused input element to make it legible.
2.3. ~Webに公開される~screen情報
~UAは、 利用者の~privacyを保護するためとして,[ 出力~機器の~screenについての情報を隠す ]ことを選んでもヨイ。 各種~APIにわたって一貫した方式でそうするため、 この仕様は,以下の区画を表す用語を定義する。 これらの各~区画は、 いずれも[ 有限な ( 横幅, 縦幅 ) がある / 左上隅を原点にとる / ~x座標は右方に増大する / ~y座標は下方に増大する / 座標の単位は `px$u ]とする: ◎ 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.
3. 共通基盤
この仕様は WHATWG Infra 標準に依存する。 `INFRA$r ◎ This specification depends on the WHATWG Infra standard. [INFRA]
3.1. ~scroll法
`~scrollを遂行する@ ときは、 所与の ⇒# `~scrollされる~box$ %~box, 位置 %目的位置, [`要素$/`疑似要素$] %~assoc要素, ~scrollの挙動 %挙動 (省略時は `auto$l ) ◎終 に対し,次を走らす: ◎ When a user agent is to perform a scroll of a scrolling box box, to a given position position, an associated element or pseudo-element element and optionally a scroll behavior behavior (which is "auto" if omitted), the following steps must be run:
- ~IF[ %~box において`滑らかな~scroll$は進行中である ] ⇒ それを`中止-$sSする ◎ Abort any ongoing smooth scroll for box.
-
~IF[ ~UAは, `scroll-behavior$p ~propを尊守する† ]~AND[ ~OR↓ ]… ◎ If the user agent honors the scroll-behavior property and one of the following are true:
- [ %挙動 ~EQ `auto$l ]~AND[ %~assoc要素 ~NEQ ~NULL ]~AND[ %~assoc要素 の `scroll-behavior$p ~propの算出d値 ~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
【† 尊守する( `honor^en ) — [ 当の特能は、 ~UAが~supportしていて,(環境設定などにより)可能化されてもいる ]ことを意味すると見受けられる。 】
…ならば ⇒# %~box を %目的位置 へ`滑らかに~scrollする$ ◎ ...then perform a smooth scroll of box to position.\ ↓Once the position has finished updating, emit the scrollend event.\
- ~ELSE ⇒# %~box を %目的位置 へ`瞬時に~scrollする$ ◎ Otherwise, perform an instant scroll of box to position.\ ↓After an instant scroll emit the scrollend event.
-
上の段による~scrollを`完了-$したなら、 `scrollend$et ~eventを発する【ようにしておく】 ◎ ↑
注記: `behavior$mb に `instant$l を与えた場合、 この~algoにより,常に瞬時な~scrollが遂行される。 ◎ Note: behavior: "instant" always performs an instant scroll by this algorithm.
注記: [ 利用者-ヤリトリ/~program的な呼出n ]の結果,~scroll位置が変化せず, 適用される並進は無かった場合、 ~scrollは生じないので, `scrollend$et ~eventは発火されない。 ◎ Note: If the scroll position did not change as a result of the user interaction or programmatic invocation, where no translations were applied as a result, then no scrollend event fires because no scrolling occurred.
`表示域の~scrollを遂行する@ ときは、 所与の ⇒# `表示域$ %表示域, 位置 %目的位置, ~scrollの挙動 %挙動 (省略時は `auto$l ) ◎終 に対し,次の手続きにより協調された表示域~scroll 【視覚-表示域, ~layout表示域に対し協調された~scroll】 を遂行するモノトスル: `VisualViewport^I1 ◎ When a user agent is to perform a scroll of a viewport to a given position position and optionally a scroll behavior behavior (which is "auto" if omitted) it must perform a coordinated viewport scroll by following these steps:
- %文書 ~LET %表示域 に結付けられた`文書$ ◎ Let doc be the viewport’s associated Document.
- %vv ~LET 次を満たす `VisualViewport$I ~obj 【該当するものは、一つだけ在ることになる】 ⇒ それに`結付けられた文書$vV ~EQ %文書 ◎ Let vv be the VisualViewport whose associated document is doc.
- %最大~x ~LET %表示域 の`~scrollされる~box$の横幅 ~MINUS %vv の `width$m1 属性の値 ◎ Let maxX be the difference between viewport’s scrolling box’s width and the value of vv’s width attribute.
- %最大~y ~LET %表示域 の`~scrollされる~box$の縦幅 ~MINUS %vv の`height$m1 属性の値 ◎ Let maxY be the difference between viewport’s scrolling box’s height and the value of vv’s height attribute.
- %~dx ~LET %目的位置 の~x成分 ~MINUS %vv の `pageLeft$m1 属性の値 ◎ Let dx be the horizontal component of position - the value vv’s pageLeft attribute
- %~dy ~LET %目的位置 の~y成分 ~MINUS %vv の `pageTop$m1 属性の値 ◎ Let dy be the vertical component of position - the value of vv’s pageTop attribute
- %視覚-~x ~LET %vv の `offsetLeft$m1 属性の値 ◎ Let visual x be the value of vv’s offsetLeft attribute.
- %視覚-~y ~LET %vv の `offsetTop$m1 属性の値 ◎ Let visual y be the value of vv’s offsetTop attribute.
- %視覚-~dx ~LET `min^op( %最大~x, `max^op( 0, %視覚-~x ~PLUS %~dx )) ~MINUS %視覚-~x ◎ Let visual dx be min(maxX, max(0, visual x + dx)) - visual x.
- %視覚-~dy ~LET `min^op( %最大~y, `max^op( 0, %視覚-~y ~PLUS %~dy )) ~MINUS %視覚-~y ◎ Let visual dy be min(maxY, max(0, visual y + dy)) - visual y.
- %~layout~dx ~LET %~dx ~MINUS %視覚-~dx ◎ Let layout dx be dx - visual dx
- %~layout~dy ~LET %~dy ~MINUS %視覚-~dy ◎ Let layout dy be dy - visual dy
- %要素 ~LET %文書 の`根~要素$は[ 在るならば それ/ 無いならば ~NULL ] ◎ Let element be doc’s root element if there is one, null otherwise.
- `~scrollを遂行する$( ↓ ) ⇒# %表示域 の`~scrollされる~box$, %表示域 の~scroll位置 ~PLUS ( %~layout~dx, %~layout~dy ), %要素, %挙動 ◎ Perform a scroll of the viewport’s scrolling box to its current scroll position + (layout dx, layout dy) with element as the associated element, and behavior as the scroll behavior.
- `~scrollを遂行する$( ↓ ) ⇒# %vv の`~scrollされる~box$, %vv の~scroll位置 ~PLUS ( %視覚-~dx, %視覚-~dy ), %要素, %挙動 ◎ Perform a scroll of vv’s scrolling box to its current scroll position + (visual dx, visual dy) with element as the associated element, and behavior as the scroll behavior.
注記: 概念的には、 `視覚-表示域$は,`~layout表示域$の辺に “ぶつかる” 所まで~scrollされ、 そこから[ ~layout表示域に~scroll差分を適用する ]ことにより,~layout表示域を “押し出す” 。 しかしながら,上の手続きにおける~scrollは、[ ~layout表示域が視覚-表示域より前に~scrollされる ]よう,事前に算出され,逆順に適用される。 これは、 歴史的な理由により, ~scroll~eventの一貫した順序付けを確保するために行われる。 視覚的な図画化は、 `上の例@#example-vvanimation$を見よ。 ◎ Note: Conceptually, the visual viewport is scrolled until it "bumps up" against the layout viewport edge and then "pushes" the layout viewport by applying the scroll delta to the layout viewport. However, the scrolls in the steps above are computed ahead of time and applied in the opposite order so that the layout viewport is scrolled before the visual viewport. This is done for historical reasons to ensure consistent scroll event ordering. See the example above for a visual depiction.
利用者は[ 文書のある箇所を~pinch~zoomして,そこで~mouse~wheelを回す ]ことで[ 文書を `50px^v 下へ~scrollする ]よう~UAに要請しているが,[ 文書は~pinch~zoomされたので、 `視覚-表示域$は `20px^v までしか~scrollできない ]とする。 ~UAは、[ 視覚-表示域を `20px^v, `~layout表示域$を `30px^v ]下へ~scrollするよう分配することになる。 ◎ The user pinch-zooms into the document and ticks their mouse wheel, requesting the user agent scroll the document down by 50px. Because the document is pinch-zoomed in, the visual viewport has 20px of room to scroll. The user agent distributes the scroll by scrolling the visual viewport down by 20px and the layout viewport by 30px.
携帯機~UAの利用者が,文書~内の~screen外にある~text入力~要素を~focusした結果、 ~virtual~keyboardが示され,`視覚-表示域$が縮短されたとする。 ~UAは、 当の要素が視覚-表示域に入るよう,要素を~viewの中へ持ち込む必要がある。 ~UAは、[ 要素が~viewの中で可視になるよう,`~layout表示域$を~scrollして ]から[ 要素が利用者に可視になるよう,視覚-表示域を~scrollする ]ことになる。 ◎ The user is viewing a document in a mobile user agent. The document focuses an offscreen text input element, showing a virtual keyboard which shrinks the visual viewport. The user agent must now bring the element into view in the visual viewport. The user agent scrolls the layout viewport so that the element is visible within it, then the visual viewport so that the element is visible to the user.
~scrollが `完了-@ したとされるのは、 ~AND↓ が満たされる時点である: ◎ Scroll is completed when\
-
処理待ちな[ ~scroll位置の[ 更新/並進 ]]は無くなった。 ◎ the scroll position has no more pending updates or translations and\ ↓ the user has completed their gesture.\
そのような更新には、 次に挙げるものにより~scrollするときが含まれる — `滑らかに~scrollする$か`瞬時に~scrollする$†かを問わず【!smooth or instant …】 ⇒# ~mouse~wheel/ ~keyboard/ ~scroll留め~event【`参照@~CSSSCROLLSNAP2#snap-events$】/ ~scroll位置を[更新する, あるいは場合によっては補間する]原因になる,他の~APIや~gesture ◎ Scroll position updates include smooth or instant mouse wheel scrolling, keyboard scrolling, scroll-snap events, or other APIs and gestures which cause the scroll position to update and possibly interpolate.\
【† 瞬時に~scrollすることは, (意味論的には)同期的な処理nに見える(`完了-$の定義には不要に見える)が、 ~UAが`描画を更新する@~WAPI#update-the-rendering$ときまでは, “処理待ち” になる (対して,滑らかに~scrollするときは、 完了するまで,この段を複数回~経ることになる)。 】
- 利用者による~gestureは完了した。 [ ~touchにより~panする/~trackpadにより~scrollする ]様な~gestureは、 ~pointerや~UIkeyが解放されるまでは完了しないとする。 ◎ ↑ ◎ User gestures like touch panning or trackpad scrolling aren’t complete until pointers or keys have released.
`~scrollされる~box$ %~box を %目的位置 へ `滑らかに~scrollする@ ときは:
- ~UAが定義する~~速度, ~~動きにより, %~box の~scroll位置を更新するモノトスル。
- ~scrollの `完了-@sS 時には、 %~box の~scroll位置は %目的位置 になるモノトスル。
- この~scrollは、 ~algoまたは利用者により `中止-@sS され得る。
`~scrollされる~box$ %~box を %目的位置 へ `瞬時に~scrollする@ ときは ⇒ %~box の~scroll位置を %目的位置 に更新する ◎ 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:
- %表示域 ~LET %文書 に結付けられた`表示域$ ◎ Let viewport be the viewport that is associated with document.
- %目的位置 ~LET [ %表示域 の`開始辺$が`~scrollされる区画$の`開始辺$に整列された ]とするときの, %表示域 の~scroll位置 ◎ Let position be the scroll position viewport would have by aligning the beginning edges of the scrolling area with the beginning edges of viewport.
- ~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.
- `表示域の~scrollを遂行する$( %表示域, %目的位置 【!, document’s root element】 ) ◎ 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$r に定義されるとおり, 素片~識別子 `#top^c へ`~navigateする@~HTMLnav#navigate-fragid$ときに利用される。 【すなわち,文書~内の`指示された部位@~HTMLnav#the-indicated-part-of-the-document$は、文書の上端になる。】 ◎ Note: This algorithm is used when navigating to the #top fragment identifier, as defined in HTML. [HTML]
3.2. ~Web~IDL値
`有限~値に正規化する@ ときは、 所与の ( 値 %n ) に対し:
- ~IF[ %n は[ 特別な浮動小数点~literal値( `Infinity^I / `-Infinity^c / `NaN^I ) `WEBIDL$r ]である ] ⇒ ~RET 0
- ~RET %n
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 {`Window^I0 [`NewObject$] `MediaQueryList$I `matchMedia$m(`CSSOMString$ %query); [`SameObject$, `Replaceable$] readonly attribute `Screen$I `screen$m; [`SameObject$, `Replaceable$] readonly attribute `VisualViewport$I? `visualViewport$m; // 閲覧~文脈 `undefined$ `moveTo$m(`long$ %x, `long$ %y); `undefined$ `moveBy$m(`long$ %x, `long$ %y); `undefined$ `resizeTo$m(`long$ %width, `long$ %height); `undefined$ `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; `undefined$ `scroll$m(optional `ScrollToOptions$I %options = {}); `undefined$ `scroll$m(`unrestricted double$ %x, `unrestricted double$ %y); `undefined$ `scrollTo$m(optional `ScrollToOptions$I %options = {}); `undefined$ `scrollTo$m(`unrestricted double$ %x, `unrestricted double$ %y); `undefined$ `scrollBy$m(optional `ScrollToOptions$I %options = {}); `undefined$ `scrollBy$m(`unrestricted double$ %x, `unrestricted double$ %y); // ~client~UIwindow [`Replaceable$] readonly attribute `long$ `screenX$m; [`Replaceable$] readonly attribute `long$ `screenLeft$m; [`Replaceable$] readonly attribute `long$ `screenY$m; [`Replaceable$] readonly attribute `long$ `screenTop$m; [`Replaceable$] readonly attribute `long$ `outerWidth$m; [`Replaceable$] readonly attribute `long$ `outerHeight$m; [`Replaceable$] readonly attribute `double$ `devicePixelRatio$m; };`Window^dgm
`screen@m 取得子~手続きは ⇒ ~RET コレに結付けられた `Screen$I ~obj ◎ 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.
`visualViewport@m 取得子~手続きは:
- %文書 ~LET コレに`結付けられた文書$
- ~IF[ %文書 は`全部的に作動中$でない ] ⇒ ~RET ~NULL
- ~RET %文書 を結付けている `VisualViewport$I ~obj
注記: `VisualViewport$I ~objが[ 返される/有用になる ]のは、 %文書 が現在~呈示されている【`全部的に作動中$である】間に限られる。 `VisualViewport^I ~objへの参照が【~scriptにより】維持されていても、 %文書 は現在~呈示されていない場合, この~obj内の値【各~member】は当の閲覧~文脈についての情報を露呈しないモノトスル 【この要件の詳細は、 `VisualViewport^I の各~member定義を見よ】。 ◎ Note: the VisualViewport object is only returned and useful for a window whose Document is currently being presented. If a reference is retained to a VisualViewport whose associated Document is not being currently presented, the values in that VisualViewport must not reveal any information about the browsing context.
`moveTo(x, y)@m ~method手続きは: ◎ The moveTo(x, y) method must follow these steps:
- 任意選択で ⇒ ~RET ◎ Optionally, return.
- %target ~LET コレに`関連な大域~obj$に`対応する閲覧~文脈$ ◎ Let target be this's relevant global object's browsing context.
- ~IF[ %target は[ (利用者による動作ではなく)~scriptにより作成された`補助~閲覧~文脈$ ]ではない ] ⇒ ~RET ◎ If target is not an auxiliary browsing context that was created by a script (as opposed to by an action of the user), then return.
- %~UIwindow ~LET %target の~UIwindow ◎ ↓
- 任意選択で ⇒ ~UA定義な方式で,[ %x, %y ]を次を満たすよう切詰める ⇒ %~UIwindow が可用な空間の外側に出ない大きさになる ◎ Optionally, clamp x and y in a user-agent-defined manner so that the window does not move outside the available space.
- %~UIwindow を次を満たすよう移動する ⇒ %~UIwindow の左上隅が[ 出力~機器の左上隅から相対的な[ %target の `px$u 単位による座標 (%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手続きは: ◎ The moveBy(x, y) method must follow these steps:
- 任意選択で ⇒ ~RET ◎ Optionally, return.
- %target ~LET コレに`関連な大域~obj$に`対応する閲覧~文脈$ ◎ Let target be this's relevant global object's browsing context.
- ~IF[ %target は[ (利用者による動作ではなく)~scriptにより作成された`補助~閲覧~文脈$ ]ではない ] ⇒ ~RET ◎ If target is not an auxiliary browsing context that was created by a script (as opposed to by an action of the user), then return.
- %~UIwindow ~LET %target の~UIwindow ◎ ↓
- 任意選択で ⇒ ~UA定義な方式で,[ %x, %y ]を次を満たすよう切詰める ⇒ %~UIwindow が可用な空間の外側に出ない大きさになる ◎ Optionally, clamp x and y in a user-agent-defined manner so that the window does not move outside the available space.
- %~UIwindow を %target の `px$u 単位で[ 右方に %x, 下方に %y ]だけ移動する ◎ Move target’s window x CSS pixels of target rightward and y CSS pixels of target downward.
`resizeTo(width, height)@m ~method手続きは: ◎ The resizeTo(width, height) method must follow these steps:
- 任意選択で ⇒ ~RET ◎ Optionally, return.
- %target ~LET コレに`関連な大域~obj$に`対応する閲覧~文脈$ ◎ Let target be this's relevant global object's browsing context.
- ~IF[ %target は[ (利用者による動作ではなく)~scriptにより作成された`補助~閲覧~文脈$ ]ではない ] ⇒ ~RET ◎ If target is not an auxiliary browsing context that was created by a script (as opposed to by an action of the user), then return.
- %~UIwindow ~LET %target の~UIwindow ◎ ↓
- 任意選択で ⇒ ~UA定義な方式で,[ %width, %height ]を次を満たすよう切詰める ⇒ %~UIwindow の大きさが可用な空間の中で~~適度な[ 上限, 下限 ]に収まる ◎ Optionally, clamp width and height in a user-agent-defined manner so that the window does not get too small or bigger than the available space.
-
%~UIwindow の[ 右辺, 下辺 ]を ~AND↓ を満たすよう移動することにより, %~UIwindow を~resizeする:
- %target における `px$u 単位による[ 表示域の左辺と右辺の距離 ] ~EQ %width
- %target における `px$u 単位による[ 表示域の上辺と下辺の距離 ] ~EQ %height
- 任意選択で ⇒ ~UA定義な方式で, %~UIwindow を次を満たすよう移動する ⇒ 可用な空間をはみ出さない ◎ 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手続きは: ◎ The resizeBy(x, y) method must follow these steps:
- 任意選択で ⇒ ~RET ◎ Optionally, return.
- %target ~LET コレに`関連な大域~obj$に`対応する閲覧~文脈$ ◎ Let target be this's relevant global object's browsing context.
- ~IF[ %target は[ (利用者による動作ではなく)~scriptにより作成された`補助~閲覧~文脈$ ]ではない ] ⇒ ~RET ◎ If target is not an auxiliary browsing context that was created by a script (as opposed to by an action of the user), then return.
- %~UIwindow ~LET %target の~UIwindow ◎ ↓
- 任意選択で ⇒ ~UA定義な方式で,[ %x, %y ]を次を満たすよう切詰める ⇒ %~UIwindow の大きさが可用な空間の中で~~適度な[ 上限, 下限 ]に収まる ◎ 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.
- %~UIwindow の右辺と下辺を %target の `px$u 単位で[ 左辺を %x, 上辺を %y ]だけ移動することにより, %~UIwindow を~resizeする ◎ 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.
- 任意選択で ⇒ ~UA定義な方式で, %~UIwindow を次を満たすよう移動する ⇒ 可用な空間をはみ出さない ◎ Optionally, move target’s window in a user-agent-defined manner so that it does not grow outside the available space.
[ `innerWidth@m | `innerHeight@m ]取得子~手続きは:
- ~IF[ コレの`表示域$は無い ] ⇒ ~RET 0
- ~RET `表示域$の[ 横幅 | 縦幅 ](~scrollbarが描画されている場合はその~sizeも含める)
次の~code片は、 表示域の横幅を得する方法を示す:
var %viewportWidth = innerWidth
[ `scrollX@m | `scrollY@m ]取得子~手続きは:
- ~IF[ コレの`表示域$は無い ] ⇒ ~RET 0
- ~RET `初期~包含塊$の原点に相対的な,`表示域$の[ 左端の~x座標 | 上端の~y座標 ]
`scroll()@m ~method手続きは:
-
( %x, %y, %挙動 ) ~LET ~methodの引数に応じて:
- `ScrollToOptions$I %options 引数を伴って呼出された場合 ⇒ ( %options[ "`left$mb" ], %options[ "`top$mb" ], %options[ "`behavior$mb" ] )
- %x, %y 引数を伴って呼出された場合 ⇒ ( %x, %y, `auto$l )
- ~IF[ %x ~NEQ ε ] ⇒ %x ~SET `有限~値に正規化する$( %x )
- ~IF[ %y ~NEQ ε ] ⇒ %y ~SET `有限~値に正規化する$( %y )
- `~window用の~scroll手続き$( コレ, %x, %y, %挙動 )
【 この訳では、 原文による `scroll()$m ~method手続きを成す引数の取扱い以外の部分を, 次に与える手続きに分離する — それは、 複数の箇所から共通して利用されるので。 】
`~window用の~scroll手続き@ は、 所与の ( %window, %x, %y, %挙動 ) に対し: ◎ ↑
- ~IF[ %window の`表示域$は無い ] ⇒ ~RET ◎ If there is no viewport, abort these steps.
- %表示域 ~LET %window の`表示域$
-
%座標 ~LET 次の手続きを走らせた結果:
- ~IF[ %x ~EQ ε ] ⇒ %x ~SET `表示域$の現在の~x軸 ~scroll位置
- ~IF[ %y ~EQ ε ] ⇒ %y ~SET `表示域$の現在の~y軸 ~scroll位置
- %~scrollされる区画 ~LET %表示域 の`~scrollされる区画$
- %符号 ~LET %表示域 の横方向の`~overflow方向$に応じて ⇒# 右方 ならば 1 / 左方 ならば −1
- %x ~SET %符号 ~MUL `max^op( 0, `min^op( %符号 ~MUL %x, ( %~scrollされる区画 の横幅 ~MINUS %表示域 の`有効~横幅$ )))
- %符号 ~LET %表示域 の縦方向の`~overflow方向$に応じて ⇒# 下方 ならば 1 / 上方 ならば −1
- %y ~SET %符号 ~MUL `max^op( 0, `min^op( %符号 ~MUL %y, ( %~scrollされる区画 の縦幅 ~MINUS %表示域 の`有効~縦幅$ )))
- ~RET ( %x, %y )
- %目的位置 ~LET [ %~scrollされる区画 の座標 %座標 が %表示域 の左上隅に整列された ]とするときの, %表示域 の~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.
- ~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.
-
`表示域の~scrollを遂行する$( %表示域, %目的位置 【!, document】, %挙動 ) ◎ (不要)Let document be the viewport’s associated Document. ◎ 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.
各~UAは、 これが[ `~layout表示域$の`~scrollされる~box$に対し,次のどちらを利用する ]か合意していない ⇒ `表示域$に対する(協調された)`表示域の~scrollを遂行する$/ `~scrollされる~box$に対し`~scrollを遂行する$ ◎ User agents do not agree whether this uses the (coordinated) viewport perform a scroll or the scrolling box perform a scroll on the layout viewport’s scrolling box.
`scrollBy()@m ~method手続きは: ◎ When the scrollBy() method is invoked, the user agent must run these steps:
-
( %x, %y, %挙動 ) ~LET ~methodの引数に応じて:
- `ScrollToOptions$I %options 引数を伴って呼出された場合 ⇒ ( %options[ "`left$mb" ], %options[ "`top$mb" ], %options[ "`behavior$mb" ] )
- %x, %y 引数を伴って呼出された場合 ⇒ ( %x, %y, `auto$l )
- ~IF[ %x ~NEQ ε ] ⇒ %x ~SET `有限~値に正規化する$( %x ) ~PLUS コレの `scrollX$m 取得子~手続き() ◎ Normalize non-finite values for the left and top dictionary members of options. ◎ Add the value of scrollX to the left dictionary member.
- ~IF[ %y ~NEQ ε ] ⇒ %y ~SET `有限~値に正規化する$( %y ) ~PLUS コレの `scrollY$m 取得子~手続き() ◎ ↑ ◎ Add the value of scrollY to the top dictionary member.
- `~window用の~scroll手続き$( コレ, %x, %y, %挙動 ) ◎ Act as if the scroll() method was invoked with options as the only argument.
[ `screenX@m | `screenY@m ]取得子~手続きは:
- ~IF[ コレの~client~UIwindowは無い ] ⇒ ~RET 0
- ~RET 出力~機器の`~Webに公開される~screen区画$の原点に相対的な, `px$u 単位による,~client~UIwindow†の[ 左端の~x座標 | 上端の~y座標 ]
【† “~client~UIwindow” がどの部分を指すのか,定義されていないが、 現実の~browserのふるまいからは,外枠も含めた~UIwindow全体が占める区画を指すものと推定される。 】
◎ The screenX and screenLeft attributes 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 CSS pixels, or zero if there is no such thing. ◎ The screenY and screenTop attributes 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 CSS pixels, or zero if there is no such thing.[ `outerWidth@m | `outerHeight@m ]取得子~手続きは:
- ~IF[ コレの~client~UIwindowは無い ] ⇒ ~RET 0
- ~RET ~client~UIwindowの[ 横幅 | 縦幅 ]
`機器~pixel比を決定する@ ときは: ◎ the following determine the device pixel ratio algorithm:
- ~IF[ 出力~機器は無い ] ⇒ ~RET 1 ◎ If there is no output device, return 1 and abort these steps.
- %~CSS~pixel~size ~LET 1 `px$u の~size — 現在の`~page~zoom$の下で,`拡縮率$vV 1.0 を利用している下での ◎ Let CSS pixel size be the size of a CSS pixel at the current page zoom and using a scale factor of 1.0.
- %機器~pixel~size ~LET 出力~機器の機器~pixelの縦~size ◎ Let device pixel size be the vertical size of a device pixel of the output device.
- ~RET %~CSS~pixel~size ~DIV %機器~pixel~size ◎ Return the result of dividing CSS pixel size by device pixel size.
4.1. `open()^m ~methodに対する %features 引数
~HTMLは、 ~windowの `open()$m ~method 【および,文書の `~doc-open()$m ~method】 を定義している。 この節では、 その %features 引数にて与えられる位置と~sizeの挙動を定義する。 `HTML$r ◎ HTML defines the open() method. This section defines behavior for position and size given in the features argument. [HTML]
`閲覧~文脈の特能を設定しておく@ ときは、 所与の ( `閲覧~文脈$ %target, ( %features 引数から導出された)`~map$ %特能~map ) に対し,次を走らす: ◎ To set up browsing context features for a browsing context target given a map tokenizedFeatures:
- %~pixel単位 ~LET %target における `px$u 単位 ◎ ↓
- %~UIwindow ~LET %target の~UIwindow ◎ ↓
- %可用な~screen ~LET `~Webに公開される可用な~screen区画$ ◎ ↓
- %~screen ~LET `~Webに公開される~screen区画$ ◎ ↓
- %正規化-済み~map ~LET 新たな`~map$ ◎ ↓
-
~EACH( %名前 ~IN { `left$opf, `top$opf, `width$opf, `height$opf } ) に対し:
- %値 ~LET %特能~map[ %名前 ]
- ~IF[ %値 ~EQ ε ] ⇒ ~CONTINUE
- %値 ~SET `整数として構文解析する$( %値 )
- ~IF[ %値 ~EQ `失敗^i ] ⇒ %値 ~SET 0
- %正規化-済み~map[ %名前 ] ~SET %値
- ( %左端, %上端, %横幅, %縦幅 ) ~LET 順に ⇒# %正規化-済み~map[ `left$opf ], %正規化-済み~map[ `top$opf ], %正規化-済み~map[ `width$opf ], %正規化-済み~map[ `height$opf ] ◎ Let x be null. ◎ Let y be null. ◎ Let width be null. ◎ Let height be null.
-
~IF[ %左端 ~NEQ ε ]: ◎ If tokenizedFeatures["left"] exists: • Set x to the result of invoking the rules for parsing integers on tokenizedFeatures["left"]. • If x is an error, set x to 0.
- 任意選択で ⇒ ~UA定義な方式で, %左端 を次を満たすよう切詰める ⇒ %可用な~screen の外側に %~UIwindow が出ない大きさになる ◎ Optionally, clamp x in a user-agent-defined manner so that the window does not move outside the Web-exposed available screen area.
- 任意選択で ⇒ %~UIwindow を次を満たすよう移動する ⇒ %~pixel単位 による[ %~screen の左辺に相対的な %~UIwindow の左辺の~x座標 ] ~EQ %左端 ◎ 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 Web-exposed screen area, measured in CSS pixels of target. The positive axis is rightward.
-
~IF[ %上端 ~NEQ ε ]: ◎ If tokenizedFeatures["top"] exists: • Set y to the result of invoking the rules for parsing integers on tokenizedFeatures["top"]. • If y is an error, set y to 0.
- 任意選択で ⇒ ~UA定義な方式で, %上端 を次を満たすよう切詰める ⇒ %可用な~screen の外側に %~UIwindow が出ない大きさになる ◎ Optionally, clamp y in a user-agent-defined manner so that the window does not move outside the Web-exposed available screen area.
- 任意選択で ⇒ %~UIwindow を次を満たすよう移動する ⇒ %~pixel単位 による[ %~screen の上辺に相対的な %~UIwindow の上辺の~y座標 ] ~EQ %上端 ◎ 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 Web-exposed screen area, measured in CSS pixels of target. The positive axis is downward.
-
~IF[ %横幅 ~NIN { ε, 0 } ]: ◎ If tokenizedFeatures["width"] exists: • Set width to the result of invoking the rules for parsing integers on tokenizedFeatures["width"]. • If width is an error, set width to 0. • If width is not 0:
- 任意選択で ⇒ ~UA定義な方式で, %横幅 を次を満たすよう切詰める ⇒ %可用な~screen の中で %~UIwindow の大きさが~~適度な[ 上限, 下限 ]に収まる ◎ Optionally, clamp width in a user-agent-defined manner so that the window does not get too small or bigger than the Web-exposed available screen area.
- 任意選択で ⇒ %~UIwindow の右辺を次を満たすよう移動することにより, %~UIwindow を~resizeする ⇒ %~pixel単位 による[ 表示域の左辺と右辺の距離 ] ~EQ %横幅 ◎ Optionally, size target’s window by moving its right edge such that the distance between the left and right edges of the viewport are width CSS pixels of target.
- 任意選択で ⇒ ~UA定義な方式で, %~UIwindow を次を満たすよう移動する ⇒ %可用な~screen をはみ出さない ◎ Optionally, move target’s window in a user-agent-defined manner so that it does not grow outside the Web-exposed available screen area.
-
~IF[ %縦幅 ~NIN { ε, 0 } ]: ◎ If tokenizedFeatures["height"] exists: • Set height to the result of invoking the rules for parsing integers on tokenizedFeatures["height"]. • If height is an error, set height to 0. • If height is not 0:
- 任意選択で ⇒ ~UA定義な方式で, %縦幅 を次を満たすよう切詰める ⇒ %可用な~screen の中で %~UIwindow の大きさが~~適度な[ 上限, 下限 ]に収まる ◎ Optionally, clamp height in a user-agent-defined manner so that the window does not get too small or bigger than the Web-exposed available screen area.
- 任意選択で ⇒ %~UIwindow の下辺を次を満たすよう移動することにより, %~UIwindow を~resizeする ⇒ %~pixel単位 による[ 表示域の上辺と下辺の距離 ] ~EQ %縦幅 ◎ Optionally, size target’s window by moving its bottom edge such that the distance between the top and bottom edges of the viewport are height CSS pixels of target.
- 任意選択で ⇒ ~UA定義な方式で, %~UIwindow を次を満たすよう移動する ⇒ %可用な~screen をはみ出さない ◎ Optionally, move target’s window in a user-agent-defined manner so that it does not grow outside the Web-exposed available screen area.
次に挙げるものが `~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
- ~UIwindowの左端の位置 ◎ The left position of the window.
- `top@opf
- ~UIwindowの上端の位置 ◎ 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
- `文書@mq
- 作成-時に設定される。 ◎ A MediaQueryList object has an associated media query list and an associated document set on creation.
- `媒体@mq
- `直列化-@~CSSOM1#serialize-a-media-query-list$された形による,`媒体~query~list$mq。 ◎ A MediaQueryList object has an associated media which is the serialized form of the associated media query list.
- `合致-状態@mq
- 結付けられた`媒体~query~list$mqが[ `文書$mqの状態に合致するときは ~T / ~ELSE_ ~F ]を返す。 ◎ 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:
-
~EACH( `MediaQueryList$I ~obj %~target ) に対し,先に作成されたものから順に:
- ~IF[ %~target の`文書$mq ~NEQ %文書 ] ⇒ ~CONTINUE
- ~IF[ %~target の`合致-状態$mqは、 この手続きを前回~走らせたときから変化していない ] ⇒ ~CONTINUE
- `~eventを発火する$( %~target, `change$et, `MediaQueryList$I ) — 次のように初期化して ⇒# `isTrusted$m 属性 ~SET ~T, `media$m1 属性 ~SET %~target の`媒体$mq, `matches$m1 属性 ~SET %~target の`合致-状態$mq 【!fingerprint】
`表示域$の方位( `orientation^en )の変化を検出する単純な~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@#dom-window-matchmedia$m(`(orientation:landscape)^l); %mql.`onchange$m = handleOrientationChange;
[`Exposed$=Window] interface `MediaQueryList@I : `EventTarget$I { readonly attribute `CSSOMString$ `media$m; readonly attribute `boolean$ `matches$m; `undefined$ `addListener$m(`EventListener$I? %callback); `undefined$ `removeListener$m(`EventListener$I? %callback); attribute `EventHandler$I `onchange$m; };
`addListener(callback)@m ~method手続きは:
- %~listener ~LET 新たな`~event~listener$ — その ⇒# `型$evL ~SET `change$et, `~callback$evL ~SET %callback
- `~event~listenerを追加する$( コレ, %~listener )
`removeListener(callback)@m ~method手続きは: ◎ The removeListener(callback) method, when invoked, must run these steps:
- ~IF[ コレの`~event~listener~list$内に[ ( `型$evL, `~callback$evL, `捕捉するか$evL ) ~EQ ( `change$et, %callback, ~F ) ]を満たす`~event~listener$がある ] ⇒ `~event~listenerを除去する$( コレ, その~event~listener ) ◎ If this’s event listener list contains an event listener whose type is change, callback is callback, and capture is false, then remove an event listener with this and that event listener.
注記: この仕様は、 当初は,[ `addListener()$m / `removeListener()$m ]による~custom~callbackの仕組みを利用していた — その~callbackは、 結付けられた`媒体~query~list$mqを引数に呼出されていた。 今や、 通常の~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.
`MediaQueryList$I ~interfaceを実装する~objは、 `onchange@m `~event~handler$(および,対応する`~event~handler~event型$ `change$et )を,`~event~handler~IDL属性$として~supportするモノトスル。 ◎ 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 type onchange|change
[`Exposed$=Window] interface `MediaQueryListEvent@I : `Event$I { `MediaQueryListEvent@mc(`CSSOMString$ %type, optional `MediaQueryListEventInit$I %eventInitDict = {}); readonly attribute `CSSOMString$ `media$m; readonly attribute `boolean$ `matches$m; }; dictionary `MediaQueryListEventInit@I : `EventInit$I { `CSSOMString$ `media@mb = ""; `boolean$ `matches@mb = false; };`MediaQueryListEvent^I0
4.2.1. ~event要約
◎非規範的~event | ~interface | ~target | 記述 |
---|---|---|---|
`change@et | `MediaQueryListEvent$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.
[`Exposed$=Window] 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
[ `colorDepth@m / `pixelDepth@m ]属性の取得子は、 いずれも: ◎ The colorDepth and pixelDepth attributes\
- 出力~機器における~pixelの色に割振られている~bit数を — その~alpha~channelは除外して — 返すベキである。 ~UAがこの~bit数を知り得ない場合は、 自身による最も近い見積もりを返すベキである — 例えば、 出力~機器が利用する値に最も近くなるような,[ 機器に送り込まれる~frame~buffer, または何らかの内部~表現 ]に利用されている~bit数など。 ◎ should return the number of bits allocated to colors for a pixel in the output device, excluding the alpha channel. If the user agent is not able to return the number of bits used by the output device, it should return the closest estimation such as, for example, the number of bits used by the frame buffer sent to the display or any internal representation that would be the closest to the value the output device would use.\
- `color$d 媒体~特能の`実~値$の 3 倍~以上の値を返すモノトスル — ~bit数が色~成分ごとに異なる場合、 返す値は 3 倍を超えてもヨイ。 ~UAは、 色~深度を[ 知り得ない, または~privacyに配慮するため返したくない ]場合は, 24 を返すベキである。 ◎ The user agent must return a value for these attributes at least equal to the value of the color media feature multiplied by three. If the different color components are not represented with the same number of bits, the returned value may be greater than three times the value of the color media feature. If the user agent does not know the color depth or does not want to return it for privacy considerations, it should return 24.
- 注記: 互換性の理由から,両~属性とも同じ値を返す。 ◎ Note: The colorDepth and pixelDepth attributes return the same value for compatibility reasons.
- 注記: 一部の不適合な実装は、 24 でなく 32 を返すことが知られている。 ◎ Note: Some non-conforming implementations are known to return 32 instead of 24.
5. `Document^I ~interfaceに対する拡張
partial interface `Document$I {`Document^I0 `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, optional `CaretPositionFromPointOptions$I %options = {}); readonly attribute `Element$I? `scrollingElement$m; }; dictionary `CaretPositionFromPointOptions@I { `sequence$<`ShadowRoot$I> `shadowRoots@m = []; };`Document^I0 `Document^dgm
`elementFromPoint(x, y)@m ~method手続きは: ◎ The elementFromPoint(x, y) method must follow these steps:
- ~IF[ コレに結付けられた`表示域$は無い ] ⇒ ~RET ~NULL ◎ ↓
-
~IF[ ~NOT ~AND↓ ]…
- 0 ~LTE %x ~LTE `表示域$の`有効~横幅$
- 0 ~LTE %y ~LTE `表示域$の`有効~縦幅$
…ならば ⇒ ~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. - ~IF[ `表示域$の子孫に適用される`変形$を適用したとするとき,[ 座標 (%x, %y) にて`接触判定$の~targetになる`~box$ ]は`表示域$内にある ] ⇒ ~RET それを結付けている要素 ◎ If there is a 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.
- ~RET コレの`根~要素$ ◎ If the document has a root element, return the root element and terminate these steps. ◎ Return null.
注記: `elementFromPoint()^m ~methodは、 最も手前に塗られている要素を返すとは限らない。 例えば、 要素は, `pointer-events$p ~CSS~propの利用を通して`接触判定$の~targetから除外され得る。 ◎ 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手続きは: ◎ The elementsFromPoint(x, y) method must follow these steps:
- %~list ~LET 新たな~list ◎ Let sequence be a new empty sequence.
-
~IF[ コレに結付けられた`表示域$は在る ]~AND[ 0 ~LTE %x ~LTE `表示域$の`有効~横幅$ ]~AND[ 0 ~LTE %y ~LTE `表示域$の`有効~縦幅$ ]: ◎ 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.
- %~list に次を満たす すべての要素を付加する — 最~上端な【すなわち,最も手前に塗られる】~boxから順に,要素の`~box$の塗り順序で ⇒ `表示域$の子孫に適用される`変形$を適用したとするとき、 要素の`~box$は, `表示域$内にあり, かつ座標 ( %x, %y ) にて`接触判定$の~targetになる (そこに何も `overlap^en していないとしても【要素には塗られる内容がないとしても?】) ◎ For each 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.
- ~IF[ %~list は空でない ]~AND[ コレの`根~要素$ %根 ~NIN { ~NULL, %~list の最後の~item } ] ⇒ %~list に %根 を付加する ◎ If the document has a root element, and the last item in sequence is not the root element, append the root element to sequence.
- ~RET %~list を表現する連列~型~obj ◎ Return sequence.
`caretPositionFromPoint(x, y, options)@m ~method手続きは: ◎ The caretPositionFromPoint(x, y) method must return the result of running these steps:
- ~IF[ コレに結付けられた`表示域$は無い ] ⇒ ~RET ~NULL ◎ If there is no viewport associated with the document, return null.
-
~IF[ ~NOT ~AND↓ ]…
- 0 ~LTE %x ~LTE `表示域$の`有効~横幅$
- 0 ~LTE %y ~LTE `表示域$の`有効~縦幅$
…ならば ⇒ ~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. -
`表示域$の子孫に適用される`変形$を適用したとするときの, `表示域$内の座標 ( %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.
- 挿入でき,そこは[ ある`置換d要素$による~text手入力~widget %~widget ]内である場合 ⇒ ~RET 次のように設定された`~caret位置$ ⇒# `~caret~node$ ~SET %~widget に対応する~node, `~caret~offset$ ~SET 左端から~text挿入~点~指示子が挿入される位置までにある`符号単位$の個数 ◎ 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 •• The node corresponding to the text entry widget. • caret offset •• The amount of 16-bit units to the left of where the text insertion point indicator would have inserted.
-
挿入でき,そこは[ ある`境界~点$ %~caret位置 ]に一致する場合: ◎ Otherwise: • Let caretPosition be a tuple consisting of a caretPositionNode (a node) and a caretPositionOffset (a non-negative integer) 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.
- %始端~node ~LET %~caret位置 の`~node$bp ◎ Let startNode be the caretPositionNode of the caretPosition,\
- %始端~offset ~LET %~caret位置 の`~offset$bp ◎ and let startOffset be the caretPositionOffset of the caretPosition.
-
~WHILE[ %始端~node ~NEQ ~NULL【!は ~DOM4#boundary-point-node である】 ]:
- %根 ~LET %始端~node の`根$
- ~IF[ %根 は`~shadow根$【!~DOM4#concept-element-shadow-root】でない ] ⇒ ~BREAK
- %options[ `CaretPositionFromPointOptions^I1"`shadowRoots$m1" ] を成す ~EACH( %~shadow根 ) に対し ⇒ ~IF[ %根 は %~shadow根 の`~shadowも含めた広義-先祖$である ] ⇒ ~BREAK
- %始端~offset ~SET %根 の`~host$の`~index$
- %始端~node ~SET %根 の`~host$の`親$
- ~RET 次のように設定された`~caret位置$ ⇒# `~caret~node$ ~SET %始端~node, `~caret~offset$ ~SET %始端~offset, ◎ Return a caret position with its properties set as follows: • caret node is set to startNode. • caret offset is set to startOffset.
注記: `~caret位置$は`~live$でない。 ◎ Note: This caret position is not live.
注記: `接触判定@ の詳細は、 この仕様の視野から外れる。 したがって[ `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 取得子~手続きは: ◎ The scrollingElement attribute, on getting, must run these steps:
-
~IF[ コレは`過去互換~mode$下にある ]: ◎ If the Document is in quirks mode, follow these substeps:
- %~body ~LET コレの`~body要素$ ◎ ↓
-
~IF[ %~body ~NEQ ~NULL ]~AND[ %~body は`~scroll可能になり得ない$† ] ⇒ ~RET %~body ◎ If the body element exists, and it is not potentially scrollable, return the body element and abort these steps.
† この目的においては、 %~body の `overflow$p 値が `clip^v の場合には, %~body の親~要素の `overflow$p は `hidden^v として扱うモノトスル。 ◎ For this purpose, a value of overflow:clip on the body element’s parent element must be treated as overflow:hidden.
- ~RET ~NULL ◎ Return null and abort these steps.
- ~RET コレの`根~要素$ ◎ If there is a root element, return the root element and abort these steps. ◎ Return null.
注記: `scrollingElement$m 属性は、 不適合な~UA — [ `scrollTop^m, `scrollLeft^m ]用には常に`過去互換~mode$の挙動を利用する~UA — 用には,常に`~body要素$を返す( ~NULL にもなり得る)ものと期待されている。 この~APIは、 ~Web開発者が,それを利用して[ ~scroll用~APIに利用するための的確な要素 ]を取得できるようにするために存在する — ~UAの挙動について特定0の何かを前提にすることも, どの要素が表示域を~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 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.
注記: `~body要素$は、 ~HTMLの `document.body^m とは異なる — 後者は `frameset^e 要素を返すこともある。 ◎ Note: the 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挿入~点~指示子の位置を与える — それは、 `CaretPosition$I ~objにより表現され,次に挙げるものが結付けられる:
- `~caret~node@ ⇒ ある`~node$
- `~caret~offset@ ⇒ ある整数
【 挿入~点が ある~text~node内を指す場合、 それは, `境界~点$( `~caret~node$, `~caret~offset$ ) に一致する。 】
◎ A caret position gives the position of a text insertion point indicator. It always has an associated caret node and caret offset. It is represented by a CaretPosition object.[`Exposed$=Window] interface `CaretPosition@I { readonly attribute `Node$I `offsetNode$m; readonly attribute `unsigned long$ `offset$m; [`NewObject$] `DOMRect$I? `getClientRect$m(); };
`getClientRect()@m ~method手続きは: ◎ The getClientRect() method must follow these steps, aborting on the first step that returns a value:
- %~node ~LET コレの`~caret~node$ ◎ ↓
- ~IF[ %~node は`置換d要素$による~text手入力~widgetである ]~AND[ %~node は文書~内に在る【!*in the document】 ] ⇒ ~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 scaled 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.
- %境界~点 ~LET `境界~点$( %始端~node, %始端~offset ) ◎ ↓
- %~caret範囲 ~LET 新たな`~live範囲o$ — その ⇒# `始端$rG ~SET %境界~点, `終端$rG ~SET %境界~点 の複製 ◎ Otherwise: • Let caretRange be a collapsed Range object whose start node and end node are set to caret node, and whose start offset and end offset are set to caret offset.
- ~RET %~caret範囲 上の `Range^I1 `getBoundingClientRect$m1 ~method手続き() ◎ • Return the DOMRect object which is the result of invoking the getBoundingClientRect() method on caretRange.
注記: この~methodが返す `DOMRect$I ~objは、 `~live$でない。 ◎ Note: This DOMRect object is not live.
6. `Element^I ~interfaceに対する拡張
enum `ScrollLogicalPosition@I { `start@l, `center@l, `end@l, `nearest@l }; dictionary `ScrollIntoViewOptions@I : `ScrollOptions$I { `ScrollLogicalPosition$I `block@mb = `start$l; `ScrollLogicalPosition$I `inline@mb = `nearest$l; }; dictionary `CheckVisibilityOptions@I { `boolean$ `checkOpacity@mb = false; `boolean$ `checkVisibilityCSS@mb = false; `boolean$ `contentVisibilityAuto@mb = false; `boolean$ `opacityProperty@mb = false; `boolean$ `visibilityProperty@mb = false; };
注記: [ `checkOpacity$mb / `checkVisibilityCSS$mb ]~propは,歴史的な名前であり、 それらには,新たな命名~schemeに合致する別名[ `opacityProperty$mb / `visibilityProperty$mb ]がある。 【!編集上の都合により下から移動】 ◎ Note: The checkOpacity and checkVisibilityCSS properties are historical names. These properties have aliases that match the new naming scheme, namely opacityProperty and visibilityProperty.
partial interface `Element$I {`Element^I0 `DOMRectList$I `getClientRects$m(); [`NewObject$] `DOMRect$I `getBoundingClientRect$m(); `boolean$ `checkVisibility$m(optional `CheckVisibilityOptions$I %options = {}); `undefined$ `scrollIntoView$m(optional (`boolean$ or `ScrollIntoViewOptions$I) %arg = {}); `undefined$ `scroll$m(optional `ScrollToOptions$I %options = {}); `undefined$ `scroll$m(`unrestricted double$ %x, `unrestricted double$ %y); `undefined$ `scrollTo$m(optional `ScrollToOptions$I %options = {}); `undefined$ `scrollTo$m(`unrestricted double$ %x, `unrestricted double$ %y); `undefined$ `scrollBy$m(optional `ScrollToOptions$I %options = {}); `undefined$ `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; readonly attribute `double$ `currentCSSZoom$m; };`Element^dgm
`getClientRects()@m ~method手続きは: ◎ The getClientRects() method, when invoked, must return the result of the following algorithm:
- ~IF[ コレは`~box$を有さない ] ⇒ ~RET 空な `DOMRectList$I ~obj ◎ If the element on which it was invoked does not have an associated box return an empty DOMRectList object and stop this algorithm.
- ~IF[ コレは`~SVG~layout~box$を有する ] ⇒ ~RET 次で与えられる矩形を表す 1 個の `DOMRect$I ~objからなる`有拡縮$な `DOMRectList$I ~obj ⇒ コレとその先祖に適用される`変形$を適用したとするときの, コレの`限界~box$ `SVG2$r ◎ If the element has an associated SVG layout box return a scaled DOMRectList object 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.
-
%断片~list ~LET コレの`~box$内の`~box断片$たちが成す~list — ここで:
- コレの `display$p ~propの算出d値 ~IN { `table$v, `inline-table$v } の場合、 table ~box と caption ~boxは ~listに含めるが,匿名~容器~boxは含めない。
- 各 `匿名$な`塊~box$は,その子~boxたちに置換する。 匿名な塊~boxが尽きるまで,これを繰返す。
- 縦幅/横幅 が 0 であっても~listから除外しない。
- ~listは、 内容~順による。
- %矩形~list ~LET 空な~list ◎ ↑
-
%断片~list を成す ~EACH( %断片 ) に対し ⇒ %矩形~list に次を表現する `DOMRect$I ~objを付加する ⇒ 次を包含する最~小な矩形 ⇒ %断片 の`~border区画$に[ コレとその先祖に対する`変形$ ]を適用して得られる図形 ◎ ↑
【 原文には “最~小な矩形” という記述は無いが、 変形を孕んでいるので,必然的にそうなる。 】
-
~RET %矩形~list を表現している `DOMRectList$I ~obj ◎ ↑
【 新たな~objを返すとは限らない (前回の呼出nから何も変化していない場合、同じ~objを返すかもしれない)。 】
注記: この~methodが返す `DOMRect$I ~objたちは、 `~live$でない。 ◎ Note: The DOMRect objects returned by getClientRects() are not live.
`要素~用の限界~boxを取得する@ ときは、 所与の ( %要素 ) に対し: ◎ To get the bounding box for element, run the following steps:
- %~list ~LET %要素 の `getClientRects$m ~method手続き() ◎ Let list be the result of invoking getClientRects() on element.
- ~IF[ %~list は空である ] ⇒ ~RET 新たな `DOMRect$I ~obj — その ⇒ [ `x^m, `y^m, `width^m, `height^m ]属性 ~SET 0 ◎ If the list is empty return a DOMRect object whose x, y, width and height members are zero.
- ~IF[ %~list を成す矩形は,どれも[ 横幅, 縦幅 ]どちらかは 0 ] ⇒ ~RET %~list を成す最初の矩形 ◎ If all rectangles in list have zero width or height, return the first rectangle in list.
- ~RET 次を表現する新たな `DOMRect$I ~obj ⇒ 次をすべてを包含する最~小な矩形 ⇒ %~list を成す[ 横幅, 縦幅 ]どちらかは【どちらも?】 0 でない矩形 ◎ Otherwise, return a DOMRect object describing the smallest rectangle that includes all of the rectangles in list of which the height or width is not zero.
注記: この~methodが返す `DOMRect$I ~objは、 `~live$でない。 ◎ Note: The DOMRect object returned by getBoundingClientRect() is not live.
次の~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;
注記: `checkVisibility()$m ~methodは、 要素は “可視” になり得るかどうかについて,一群の単純な検査を供する。 それは,既定では[ `~box~tree$に基づく,ごく単純かつ単直な~method ]であるが、 “可視性” を成す精確な観念として何が欲されるかに依存して, いくつかの[ 任意で選べる追加的な検査 ]も許容する。 ◎ Note: The checkVisibility() method provides a set of simple checks for whether an element is potentially "visible". It defaults to a very simple and straightforward method based on the box tree, but allows for several additional checks to be opted into, depending on what precise notion of "visibility" is desired.
`checkVisibility(options)@m ~method手続きは ⇒ ~RET ~IS ~NOT ~OR↓: ◎ The checkVisibility(options) method must run these steps, when called on an element this:
- コレは`~box$を有さない ◎ If this does not have an associated box, return false.
- `平坦~tree$におけるコレの先祖として, `content-visibility$p が `hidden^v にされたものが在る ◎ If an ancestor of this in the flat tree has content-visibility: hidden, return false.
-
~AND↓:
- [ %options[ "`opacityProperty$mb" ] ~EQ ~T ]~OR[ %options[ "`checkOpacity$mb" ] ~EQ ~T ]
- `平坦~tree$におけるコレの先祖として, `opacity$p が `0^v に算出されるものが在る
-
~AND↓:
- [ %options[ "`visibilityProperty$mb" ] ~EQ ~T ]~OR[ %options[ "`checkVisibilityCSS$mb" ] ~EQ ~T ]
- コレは`不可視$である
-
~AND↓:
- %options[ "`contentVisibilityAuto$mb" ] ~EQ ~T
- `平坦~tree$におけるコレの先祖として, `content-visibility$p が `auto^v にされたことに因り`内容が飛ばされ$るものが在る
`scrollIntoView(arg)@m ~method手続きは: ◎ The scrollIntoView(arg) method must run these steps:
- %挙動 ~LET `auto^l ◎ Let behavior be "auto".
- %塊 ~LET `start^l ◎ Let block be "start".
- %行内 ~LET `nearest^l ◎ Let inline be "nearest".
- ~IF[ %arg は `ScrollIntoViewOptions$I 辞書である ] ⇒# %挙動 ~SET %options[ "`behavior$mb" ], %塊 ~SET %options[ "`block$mb" ] %行内 ~SET %options[ "`inline$mb" ] ◎ If arg is a ScrollIntoViewOptions dictionary, then: • Set behavior to the behavior dictionary member of options. • Set block to the block dictionary member of options. • Set inline to the inline dictionary member of options.
- ~ELIF[ %arg ~EQ ~F ] ⇒ %塊 ~SET `end^l ◎ Otherwise, if arg is false, then set block to "end".
- ~IF[ コレは`~box$を有さない ]~OR[ コレは~UA特能 【例:~tab~UIkeyによる巡回】 に可用でない 【例:先祖の`内容が飛ばされ$ている場合】 ] ⇒ ~RET ◎ If the element does not have any associated box, or is not available to user-agent features, then return.
- `~targetを~viewの中へ~scrollする$(コレ, %挙動, %塊, %行内 ) ◎ Scroll the element into view with behavior, block, and inline.
- 任意選択で ⇒ 利用者に コレを注目してもらう何らかの動作があれば,それを遂行する ◎ Optionally perform some other action that brings the element to the user’s attention.
`scroll()@m ~method手続きは:
-
( %x, %y, %挙動 ) ~LET ~methodの引数に応じて:
- `ScrollToOptions$I %options 引数を伴って呼出された場合 ⇒ ( %options[ "`left$mb" ], %options[ "`top$mb" ], %options[ "`behavior$mb" ] )
- %x, %y 引数を伴って呼出された場合 ⇒ ( %x, %y, `auto$l )
- ~IF[ %x ~NEQ ε ] ⇒ %x ~SET `有限~値に正規化する$( %x )
- ~IF[ %y ~NEQ ε ] ⇒ %y ~SET `有限~値に正規化する$( %y )
- `要素~用の~scroll手続き$( コレ, %x, %y, %挙動 )
【 この訳では、[ 原文による `scroll()$m ~method手続きを成す引数の取扱い ]以外の部分を,次に与える手続きに分離する — それは、 複数の箇所から共通して利用されるので。 】
`要素~用の~scroll手続き@ は、 所与の ( %要素, %x, %y, %挙動 ) に対し: ◎ ↑
- %文書 ~LET %要素 の`~node文書$ ◎ Let document be the element’s node document.
- ~IF[ %文書 は`作動中な文書$navでない ] ⇒ ~RET ◎ If document is not the active document, terminate these steps.
- %window ~LET %文書 の `defaultView$m 取得子~手続き() ◎ Let window be the value of document’s defaultView attribute.
- ~IF[ %window ~EQ ~NULL ] ⇒ ~RET ◎ If window is null, terminate these steps.
- ~IF[ %要素 ~EQ %文書 の`根~要素$ ]~AND[ %文書 は`過去互換~mode$下にある ] ⇒ ~RET ◎ If the element is the root element and document is in quirks mode, terminate these steps.
- ~IF[ %要素 ~EQ %文書 の`根~要素$ ] ⇒# %x ~SET %window の `Window^I1 `scrollX$m1 取得子~手続き(); `~window用の~scroll手続き$( %window, %x, %y, `auto$l ) ~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[ %要素 ~EQ %文書 の`~body要素$ ]~AND[ %文書 は`過去互換~mode$下にある ]~AND[ %要素 は`~scroll可能になり得ない$ ] ⇒# `~window用の~scroll手続き$( %window, %x, %y, %挙動 ); ~RET ◎ If the element is the 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.
- ~IF[ %x ~EQ ε ] ⇒ %x ~SET %要素 の現在の~x軸 ~scroll位置 ◎ ↑
- ~IF[ %y ~EQ ε ] ⇒ %y ~SET %要素 の現在の~y軸 ~scroll位置 ◎ ↑
-
~IF[ %要素 は ~OR↓ を満たす ]…
- `~box$を有さない
- `~scrollされる~box$は無い
- ~overflowしていない
…ならば ⇒ ~RET
◎ If the element does not have any associated box, the element has no associated scrolling box, or the element has no overflow, terminate these steps. - `要素を~scrollする$( %要素, ( %x, %y ), %挙動 ) ◎ Scroll the element to x,y, with the scroll behavior being the value of the behavior dictionary member of options.
`scrollBy()@m ~method手続きは: ◎ When the scrollBy() method is invoked, the user agent must run these steps:
-
( %x, %y, %挙動 ) ~LET ~methodの引数に応じて:
- `ScrollToOptions$I %options 引数を伴って呼出された場合 ⇒ ( %options[ "`left$mb" ], %options[ "`top$mb" ], %options[ "`behavior$mb" ] )
- %x, %y 引数を伴って呼出された場合 ⇒ ( %x, %y, `auto$l )
- ~IF[ %x ~NEQ ε ] ⇒ %x ~SET `有限~値に正規化する$( %x ) ~PLUS コレの `scrollLeft$m 取得子~手続き() ◎ Add the value of scrollLeft to the left dictionary member.
- ~IF[ %y ~NEQ ε ] ⇒ %y ~SET `有限~値に正規化する$( %y ) ~PLUS コレの `scrollTop$m 取得子~手続き() ◎ Add the value of scrollTop to the top dictionary member.
- `要素~用の~scroll手続き$( コレ, %x, %y, %挙動 ) ◎ Act as if the scroll() method was invoked with options as the only argument.
[ `scrollTop@m | `scrollLeft@m ]取得子~手続きは: ◎ The scrollTop attribute, on getting, must return the result of running these steps:
- %文書 ~LET コレの`~node文書$ ◎ Let document be the element’s node document.
- ~IF[ %文書 は`作動中な文書$navでない ] ⇒ ~RET 0 ◎ If document is not the active document, return zero and terminate these steps.
- %window ~LET %文書 の `defaultView$m 取得子~手続き() ◎ Let window be the value of document’s defaultView attribute.
- ~IF[ %window ~EQ ~NULL ] ⇒ ~RET 0 ◎ If window is null, return zero and terminate these steps.
- ~IF[ コレ ~EQ %文書 の`根~要素$ ]~AND[ %文書 は`過去互換~mode$下にある ] ⇒ ~RET 0 ◎ If the element is the root element and document is in quirks mode, return zero and terminate these steps.
-
~IF[ ~OR↓ ]…
- コレ ~EQ %文書 の`根~要素$
- [ コレ ~EQ %文書 の`~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 body element, document is in quirks mode, and the element is not potentially scrollable, return the value of scrollY on window. - ~IF[ コレは`~box$を有さない ] ⇒ ~RET 0 ◎ If the element does not have any associated box, return zero and terminate these steps.
- ~RET コレの`~scrollされる区画$の整列~点から相対的な, コレの`~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 ]設定子~手続きは: ◎ When setting the scrollTop attribute these steps must be run:
- %v ~LET `有限~値に正規化する$( 所与の値 ) ◎ Let y be the given value. ◎ Normalize non-finite values for y.
- %文書 ~LET コレの`~node文書$ ◎ Let document be the element’s node document.
- ~IF[ %文書 は`作動中な文書$navでない ] ⇒ ~RET ◎ If document is not the active document, terminate these steps.
- %window ~LET %文書 の `defaultView$m 取得子~手続き() ◎ Let window be the value of document’s defaultView attribute.
- ~IF[ %window ~EQ ~NULL ] ⇒ ~RET ◎ If window is null, terminate these steps.
- ~IF[ コレ ~EQ %文書 の`根~要素$ ]~AND[ %文書 は`過去互換~mode$下にある ] ⇒ ~RET ◎ If the element is the root element and document is in quirks mode, terminate these steps.
-
~IF[ ~OR↓ ]…
- コレ ~EQ %文書 の`根~要素$
- [ コレ ~EQ %文書 の`~body要素$ ]~AND[ %文書 は`過去互換~mode$下にある ]~AND[ コレは`~scroll可能になり得ない$ ]
…ならば: `Window^I1
- %x ~LET [ %window の `scrollX$m1 取得子~手続き() | %v ]
- %y ~LET [ %v | %window の `scrollY$m1 取得子~手続き() ]
- `~window用の~scroll手続き$( %window, %x, %y, `auto$l )
- ~RET
-
~IF[ コレは ~OR↓ を満たす ]…
- `~box$を有さない
- `~scrollされる~box$は無い
- ~overflowしていない
…ならば ⇒ ~RET
◎ If the element does not have any associated box, the element has no associated scrolling box, or the element has no overflow, terminate these steps. - %目的位置 ~LET ( [ コレの `scrollLeft$m 取得子~手続き() | %v ], [ %v | コレの `scrollTop$m 取得子~手続き() ] ) ◎ ↓
- `要素を~scrollする$( コレ, %目的位置 , `auto$l ) ◎ 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: • Let document be the element’s node document. • If document is not the active document, return zero and terminate these steps. • Let window be the value of document’s defaultView attribute. • If window is null, return zero and terminate these steps. • If the element is the root element and document is in quirks mode, return zero and terminate these steps. • If the element is the root element return the value of scrollX on window. • If the element is the body element, document is in quirks mode, and the element is not potentially scrollable, return the value of scrollX on window. • If the element does not have any associated box, return zero and terminate these steps. • 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: • Let x be the given value. • Normalize non-finite values for x. • Let document be the element’s node document. • If document is not the active document, terminate these steps. • Let window be the value of document’s defaultView attribute. • If window is null, terminate these steps. • If the element is the root element and document is in quirks mode, terminate these steps. • 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. • If the element is the 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. • If the element does not have any associated box, the element has no associated scrolling box, or the element has no overflow, terminate these steps. • Scroll the element to x,scrollTop, with the scroll behavior being "auto".
[ `scrollWidth@m | `scrollHeight@m ]取得子~手続きは: ◎ The scrollWidth attribute must return the result of running these steps:
- %文書 ~LET コレの`~node文書$ ◎ Let document be the element’s node document.
- ~IF[ %文書 は`作動中な文書$navでない ] ⇒ ~RET 0 ◎ If document is not the active document, return zero and terminate these steps.
-
~IF[ ~OR↓ ]…
- [ %文書 は`過去互換~mode$下にない ]~AND[ コレ ~EQ %文書 の`根~要素$ ]
- [ %文書 は`過去互換~mode$下にある ]~AND[ コレ ~EQ %文書 の`~body要素$ ]~AND[ コレは `~scroll可能になり得ない$ ]
…ならば:
- ~IF[ コレの`表示域$は無い ] ⇒ ~RET 0
- ~RET `max^op( `表示域$の`~scrollされる区画$の[ 横幅 | 縦幅 ], `表示域$の[ `有効~横幅$ | `有効~縦幅$ ] )
- ~IF[ コレは`~box$を有さない ] ⇒ ~RET 0 ◎ If the element does not have any associated box return zero and terminate these steps.
- ~RET コレの`~scrollされる区画$の[ 横幅 | 縦幅 ] ◎ Return the width of the element’s scrolling area.
◎ The scrollHeight attribute must return the result of running these steps: • Let document be the element’s node document. • If document is not the active document, return zero and terminate these steps. • 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. • If the element is the root element and document is not in quirks mode return max(viewport scrolling area height, viewport height). • If the element is the body element, document is in quirks mode and the element is not potentially scrollable, return max(viewport scrolling area height, viewport height). • If the element does not have any associated box return zero and terminate these steps. • Return the height of the element’s scrolling area.
[ `clientTop@m | `clientLeft@m ]取得子~手続きは: ◎ The clientTop attribute must run these steps:
- ~IF[ コレは`~box$を有さない ]~OR[ コレの`~box$は`行内$である ] ⇒ ~RET 0 ◎ If the element has no associated box or if the box is inline, return zero.
-
~RET 次の和:
- [ `border-top-width$p | `border-left-width$p ]~propの`無拡縮$な算出d値
- `~padding辺$の[ 上端 | 左端 ]と`~border辺$の[ 上端 | 左端 ]の間に描画された~scrollbarの[ 縦幅 | 横幅 ]
— ここで、 コレとその先祖に対する`変形$は適用しないとする。
◎ Return the unscaled 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: • If the element has no associated box or if the box is inline, return zero. • Return the unscaled 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 ]取得子~手続きは: ◎ The clientWidth attribute must run these steps:
- ~IF[ コレは`~box$を有さない ]~OR[ コレの`~box$は`行内$である ] ⇒ ~RET 0 ◎ If the element has no associated box or if the box is inline, return zero.
-
~IF[ ~OR↓ ]…
- [ コレ ~EQ %文書 の`根~要素$ ]~AND[ %文書 は`過去互換~mode$下にない ]
- [ コレ ~EQ %文書 の`~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 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). -
~RET `~padding辺$の`無拡縮$な[ 横幅 | 縦幅 ] — ここで:
- `~padding辺$と`~border辺$の間に~scrollbarが描画されている場合は,その分の[ 横幅 | 縦幅 ]は除外する。
- 【!or that → that】 コレとその先祖に対する`変形$は適用しないとする。
◎ The clientHeight attribute must run these steps: • If the element has no associated box or if the box is inline, return zero. • If the element is the root element and the element’s node document is not in quirks mode, or if the element is the 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). • Return the unscaled 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. 要素の~scroll法
`~viewの中へ~scrollする位置を決定する@ ときは、 所与の ⇒# [`要素$/`疑似要素$/`範囲o$] %~target, ~scrollの挙動 %挙動, 塊~flow方向~位置 %塊, 行内~基底~方向~位置 %行内 `~scrollされる~box$ %~box ◎終 に対し,次を走らす: ◎ To determine the scroll-into-view position of a target, which is an Element, pseudo-element, or Range, with a scroll behavior behavior, a block flow direction position block, an inline base direction position inline, and a scrolling box scrolling box, run the following steps:
- %~target限界~box ~LET %~target に応じて,次の結果を表現する~box ⇒# `要素$であるならば %~target の `getBoundingClientRect$m ~method手続き()/ `範囲o$であるならば %~target の `Range^I1 `getBoundingClientRect$m1 ~method手続き() ◎ Let target bounding border box be the box represented by the return value of invoking Element’s getBoundingClientRect(), if target is an Element, or Range’s getBoundingClientRect(), if target is a Range.
-
この段においては:
- %~box の辺 %e に対する %~target限界~box の `同じ側@ にある辺とは、 %~target限界~box を成す 4 辺のうち %e と物理的に同じ側にある辺を指すとする。
- [ `開始辺$ / `終了辺$ / 中心 / 距離 ]は、[ %塊 に関しては`塊~flow方向$, %行内 に関しては`行内~基底~方向$ ]におけるそれを指すとする。
%目的位置 ~LET %~box を[ %塊 に応じて,以下に従うように`塊~flow方向$において位置させ、 %行内 に応じて,以下に従うように`行内~基底~方向$において位置させた ]とするときの, %~box の~scroll位置:
- `start$l ⇒ %~box の`開始辺$と %~target限界~box の`同じ側$にある辺を整列する
- `end$l ⇒ %~box の`終了辺$と %~target限界~box の`同じ側$にある辺を整列する
- `center$l ⇒ %~box の中心と %~target限界~box の中心を整列する
-
`nearest$l:
- %~target幅 ~LET %~box の[`開始辺$, `終了辺$]と`同じ側$にある, %~target限界~box を成す 2 辺の距離
- %~box幅 ~LET %~box の`開始辺$と`終了辺$の距離
- %開始辺を過ぎるか ~LET ~IS[ %~box の`開始辺$の外側に %~target限界~box の`同じ側$にある辺がある ]
- %終了辺を過ぎるか ~LET ~IS[ %~box の`終了辺$の外側に %~target限界~box の`同じ側$にある辺がある ]
-
%幅を超過するか ~LET ~IS[ %~target幅 ~GT %~box幅 ]
【 原文は,[ %~target幅 ~EQ %~box幅 ]になる場合を一部の事例で取扱っていないので、 この訳では,[ %幅を超過するか ~EQ ~F ]になる事例に収容するよう改める。 】
-
( %開始辺を過ぎるか, %終了辺を過ぎるか, %幅を超過するか ) に応じて:
- ( ~T, ~T, ~T ) / ( ~F, ~F, ~F ) ⇒ 何もしない 【現在の~scroll位置と同じ】
- ( ~T, ~T, ~F ) / ( ~F, ~F, ~T ) ⇒ この事例は生じ得ない。
- ( ~T, ~F, ~F ) / ( ~F, ~T, ~T ) ⇒ %~box の`開始辺$と %~target限界~box の`同じ側$にある辺を整列する
- ( ~T, ~F, ~T ) / ( ~F, ~T, ~F ) ⇒ %~box の`終了辺$と %~target限界~box の`同じ側$にある辺を整列する
- ~RET %目的位置 ◎ Return position.
`~targetを~viewの中へ~scrollする@ ときは、 所与の ⇒# [`要素$/`疑似要素$/`範囲o$] %~target, ~scrollの挙動 %挙動, 塊~flow方向~位置 %塊, 行内~基底~方向~位置 %行内 ◎終 に対し,次を走らす: ◎ To scroll a target into view target, which is an Element, pseudo-element, or Range, with a scroll behavior behavior, a block flow direction position block, and an inline base direction position inline, means to run these steps\
- %~target生成元 ~LET [ %~target に応じて,次で与えられる~node ]の`~node文書$の`生成元$doc ⇒# `要素$であるならば %~target / `範囲o$であるならば %~target の`始端$rGの`~node$bp ◎ ↓
-
%~target の ~EACH( 先祖`~scroll容器$ %~scroll容器 ) に対し,最も内縁なものから順に: ◎ for each ancestor element or viewport that establishes a scrolling box scrolling box, in order of innermost to outermost scrolling box:
【 原文では,この~loopを要素の先祖~要素に基づいて反復しているが、 この訳では,先祖`~scroll容器$に基づくよう改める。 ~scroll法は呈示における挙動なので,この “先祖” は~DOM~treeではなく`~box~tree$におけるそれと解釈するべきであることに加え、 以下における同一-生成元の検査がイミを成すためには, `先祖~navigable@~HTMLds#ancestor-navigables$も孕む “広義な” 先祖も含める必要もあると見受けられるので。 】
- %容器 ~LET %~scroll容器 を確立している要素または`表示域$ ◎ ↓
- %容器~生成元 ~LET %容器 に応じて[ %~target に応じて,次で与えられる`文書$ ]の`生成元$doc ⇒# 要素であるならば %容器 の`~node文書$/ `表示域$であるならば それに結付けられた`文書$ ◎ ↓
-
~IF[ ( %~target生成元, %容器~生成元 ) は`同一-生成元$でない ] ⇒ ~RET ◎ If the Document associated with target is not same origin with the Document associated with the element or viewport associated with scrolling box, terminate these steps.
【 例えば %容器 が `iframe^e で, %~target は その中に埋込まれた文書~内にある場合、 これらの生成元は異なり得る。 】
- %~box ~LET %容器 の`~scrollされる~box$ ◎ ↓
- %目的位置 ~LET `~viewの中へ~scrollする位置を決定する$( ↓ ) ⇒# %~target, %挙動, %塊, %行内, %~box ◎ Let position be the scroll position resulting from running the steps to determine the scroll-into-view position of target with behavior as the scroll behavior, block as the block flow position, inline as the inline base direction position and scrolling box as the scrolling box.
- ~IF[ %目的位置 ~EQ %~box の現在の~scroll位置 ]~AND[ %~box において`滑らかな~scroll$は進行中でない ] ⇒ ~CONTINUE【!then return】 ◎ If position is the same as scrolling box’s current scroll position, and scrolling box does not have an ongoing smooth scroll, then return.
- ~IF[ %容器 は要素である ] ⇒ `~scrollを遂行する$( %~box, %目的位置, %要素, %挙動 ) ◎ If scrolling box is associated with an element • Perform a scroll of the element’s scrolling box to position, with the element as the associated element and behavior as the scroll behavior.
- ~ELSE( %容器 は`表示域$である) ⇒ `表示域の~scrollを遂行する$( %容器, %目的位置, %挙動 ) ◎ If scrolling box is associated with a viewport •↑ Let document be the viewport’s associated Document. •↑ Let root element be document’s root element, if there is one, or null otherwise. • Perform a scroll of the viewport to position, with root element as the associated element and behavior as the scroll behavior.
`要素を~scrollする@ ときは、 所与の ⇒# [`要素$/`疑似要素$] %要素, 位置 %目的位置, ~scrollの挙動 %挙動 (省略時は `auto$l ) ◎終 に対し: ◎ To scroll an element (or pseudo-element) element to x,y optionally with a scroll behavior behavior (which is "auto" if omitted) means to:
- %~box ~LET %要素 の`~scrollされる~box$ ◎ Let box be element’s associated scrolling box.
- ( %~x, %~y ) ~SET 目的位置の ( ~x, ~y ) ~~成分 ◎ ↓
- %符号 ~LET %~box の横方向の`~overflow方向$に応じて ⇒# 右方 ならば 1 / 左方 ならば −1 ◎ ↓
- %~x ~SET %符号 ~MUL `max^op( 0, `min^op( %符号 ~MUL %~x, %要素 の`~scrollされる区画$の横幅 ~MINUS %要素 の`~padding辺$の横幅 ) ) ◎ If box has rightward overflow direction • Let x be max(0, min(x, element scrolling area width - element padding edge width)). ◎ If box has leftward overflow direction • Let x be min(0, max(x, element padding edge width - element scrolling area width)).
- %符号 ~LET %~box の縦方向の`~overflow方向$に応じて ⇒# 下方 ならば 1 / 上方 ならば −1 ◎ ↓
- %y ~SET %符号 ~MUL `max^op( 0, `min^op( %符号 ~MUL %y, %要素 の`~scrollされる区画$の縦幅 ~MINUS %要素 の`~padding辺$の縦幅 ) ) ◎ If box has downward overflow direction • Let y be max(0, min(y, element scrolling area height - element padding edge height)). ◎ If box has upward overflow direction • Let y be min(0, max(y, element padding edge height - element scrolling area height)).
- %目的位置 ~LET [ `~scrollされる区画$の座標 ( %~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.
- ~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.
- `~scrollを遂行する$( %~box, %目的位置, %要素, %挙動 ) ◎ 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 {`HTMLElement^I0 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 取得子~手続きは: ◎ The offsetParent attribute must return the result of running these steps:
- %~body ~LET コレの`~node文書$の`~body要素$ ◎ ↓
-
~IF[ コレは ~OR↓ を満たす ]… ◎ If any of the following holds true return null and terminate this algorithm:
- `~box$を有さない ◎ The element does not have an associated box.
- `根~要素$である ◎ The element is the root element.
- コレ ~EQ %~body ◎ The element is the body element.
- `position$p ~propの算出d値 ~EQ `fixed^v ◎ The element’s computed value of the position property is fixed.
…ならば ⇒ ~RET ~NULL ◎ ↑
- %先祖 ~LET コレ ◎ ↓
-
~WHILE[ `平坦~tree$における %先祖 の親~要素 %親 は在る ]: ◎ Let ancestor be the parent of the element in the flat tree and repeat these substeps:
- %先祖 ~SET %親 ◎ ↑
-
~IF[ %先祖 は コレからは`閉な~shadowで非可視$である ] ⇒ ~IF[ %先祖 の `position$p ~propの算出d値 ~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.
-
~ELIF[ ~OR↓ ]… ◎ If ancestor is not closed-shadow-hidden from the element and satisfies at least one of the following, terminate this algorithm and return ancestor.
- %先祖 は[ `絶対~位置決め包含塊$/`固定d位置決め包含塊$ ]を確立する ◎ ancestor is a containing block of absolutely-positioned descendants (regardless of whether there are any absolutely-positioned descendants).
- コレの`実質的な~zoom$ ~NEQ %先祖 の`実質的な~zoom$ ◎ The element has a different effective zoom than ancestor.
- %先祖 ~EQ %~body ◎ It is the body element.
- [ コレの `position$p ~propの算出d値 ~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.
- ~RET ~NULL ◎ ↑
[ `offsetTop@m | `offsetLeft@m ]取得子~手続きは: ◎ The offsetTop attribute must return the result of running these steps:
- ~IF[ コレ ~EQ コレの`~node文書$の`~body要素$ ]~OR[ コレは`~box$を有さない ] ⇒ ~RET 0 ◎ If the element is the body element or does not have any associated box return zero and terminate this algorithm.
- 以下においては ⇒# どの座標も`初期~包含塊$の原点に相対的とする / コレとその先祖に対する`変形$は適用しないとする ◎ ↓
- %~border座標 ~LET コレの最初の`~box$の`~border辺$の`無拡縮$な[ 上端の~y座標 | 左端の~x座標 ] ◎ If the offsetParent of the element is null return the unscaled y-coordinate of the top border edge of the first box associated with the element, relative to the initial containing block origin, ignoring any transformsthat apply to the element and its ancestors and terminate this algorithm.
- ~IF[ コレの `offsetParent$m ~NEQ ~NULL ] ⇒ %~border座標 ~DECBY ( コレの `offsetParent$m の最初の`~box$の`~padding辺$の`無拡縮$な[ 上端の~y座標 | 左端の~x座標 ] ) ◎ Return the unscaled result of subtracting the y-coordinate of the top padding edge of the first box associated with the offsetParent of the element from the y-coordinate of the top border edge of the first box associated with the element, relative to the initial containing block origin, ignoring any transforms that apply to the element and its ancestors.
- ~RET %~border座標 ◎ ↑
注記: 複数の行l~boxからなる`行内$要素については、 その最初の`~box$のみが考慮されることになる。 ◎ Note: An inline element that consists of multiple line boxes will only have its first box considered.
◎ The offsetLeft attribute must return the result of running these steps: • If the element is the body element or does not have any associated box return zero and terminate this algorithm. • If the offsetParent of the element is null return the unscaled x-coordinate of the left border edge of the first 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. • Return the unscaled result of subtracting the x-coordinate of the left padding edge of the first box associated with the offsetParent of the element from the x-coordinate of the left border edge of the first 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 ]取得子~手続きは: ◎ The offsetWidth attribute must return the result of running these steps:
- ~IF[ コレは`~box$を有さない ] ⇒ ~RET 0 ◎ If the element does not have any associated box return zero and terminate this algorithm.
-
~RET [ コレの`首要~box$により生成される各`~box断片$の`~border~box$ ]すべてを囲う,[ 各辺が軸に整列された限界~box ]の`無拡縮$な[ 横幅 | 縦幅 ] — ここで: ◎ Return the unscaled width of the axis-aligned bounding box of the border boxes of all fragments generated by the element’s principal box,\
- コレとその先祖に対する`変形$は適用しないとする。 ◎ ignoring any transforms that apply to the element and its ancestors.
- 要素の`首要~box$が`行内~levelの~box$であって, ある`塊~level$の子孫により “分割され” ている場合、 そのような子孫により生成される断片のうち[ 横幅, 縦幅どちらも 0 でないもの ]も含めるとする。 ◎ If the element’s principal box is an inline-level box which was "split" by a block-level descendant, also include fragments generated by the block-level descendants, unless they are zero width or height.
◎ The offsetHeight attribute must return the result of running these steps: • If the element does not have any associated box return zero and terminate this algorithm. • Return the unscaled height of the axis-aligned bounding box of the border boxes of all fragments generated by the element’s principal box, ignoring any transforms that apply to the element and its ancestors. • If the element’s principal box is an inline-level box which was "split" by a block-level descendant, also include fragments generated by the block-level descendants, unless they are zero width or height.
8. `HTMLImageElement^I ~interfaceに対する拡張
partial interface `HTMLImageElement$I {`HTMLImageElement^I0 readonly attribute `long$ `x$m; readonly attribute `long$ `y$m; };
[ `x@m | `y@m ]取得子~手続きは:
- ~IF[ コレは`~box$を有さない ] ⇒ ~RET 0
- ~RET `初期~包含塊$の原点に相対的な[ コレの最初の`~box$の`~border辺$ ]の`有拡縮$な[ 左端の~x座標 | 上端の~y座標 ]] — ここで、 コレとその先祖に対する`変形$は適用しないとする。
9. `Range^I ~interfaceに対する拡張
partial interface `Range$I {`Range^I0 `DOMRectList$I `getClientRects$m(); [`NewObject$] `DOMRect$I `getBoundingClientRect$m(); };`Range^dgm
`getClientRects()@m ~method手続きは: ◎ The getClientRects() method, when invoked, must\
- ~IF[ コレは文書~内を指していない ] ⇒ ~RET 空な `DOMRectList$I ~obj ◎ return an empty DOMRectList object if the range is not in the document and\
-
~RET [ 次の拘束に合致する `DOMRect$I ~obj ]たちが成す,内容~順の~listを包含する `DOMRectList$I ~obj: ◎ otherwise a DOMRectList object containing a list of DOMRect objects in content order that matches the following constraints:
- コレに`包含され$ている各 %要素 に対する ⇒ [ %要素 の `Element^I1 `getClientRects$m1 ~method手続き() ]の結果に含まれる`~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.
-
コレに[ `部分的に包含され$ているか`包含され$ている† ]各 `Text$I ~node (`始端$rGと`終端$rGが同じになるものも含まれる)に対する ⇒ (行l~box全体ではなく)選択された部分のみを囲む`有拡縮$な `DOMRect$I ~obj ◎ For each Text node selected or partially selected by the range (including when the boundary-points are identical), include scaled DOMRect object (for the part that is selected, not the whole line box).\
【† `包含され$ている要素~内の `Text^I ~nodeも除外されないことになる。 】
これらの `DOMRect$I ~objの限界域は、 ~font計量を利用して算出される。 したがって,横書きの下では、 各~boxの[ 縦幅は~fontの~ascentと~descent/ 横幅は~textの送り幅 ]から決定される。 コレの`中身$が `~typographic文字~単位$ `CSS-TEXT-3$r を部分的に含む場合 (例: 代用対の片割れや書記素~clusterの一部分)、 限界域を算出する目的においては,その`~typographic文字~単位$を全部的に含めるモノトスル。 要素の先祖に対する`変形$は、 適用される。 ◎ 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.
【 “送り幅( `advance^en )” — 対象~textが描画される起点から,後続の~textが同じ行lに描画されるとするときの,その起点までの長さ 】
注記: この~methodが返す `DOMRect$I ~objは、 `~live$でない。 ◎ Note: The DOMRect objects returned by getClientRects() are not live.
`getBoundingClientRect()@m ~method手続きは: ◎ The getBoundingClientRect() method, when invoked, must return the result of the following algorithm:
- %~list ~LET コレの `getClientRects$m ~method手続き() ◎ Let list be the result of invoking getClientRects() on the same range this method was invoked on.
- ~IF[ %~list は空である ] ⇒ ~RET 新たな `DOMRect$I ~obj — その ⇒ [ `x^m, `y^m, `width^m, `height^m ]属性 ~SET 0 ◎ If list is empty return a DOMRect object whose x, y, width and height members are zero.
- ~IF[ %~list を成す矩形は,どれも[ 横幅, 縦幅 ]どちらかは 0 ] ⇒ ~RET %~list を成す最初の矩形 ◎ If all rectangles in list have zero width or height, return the first rectangle in list.
- ~RET 次を表現する新たな `DOMRect$I ~obj ⇒ 次をすべてを包含する最~小な矩形 ⇒ %~list を成す矩形のうち[ 横幅, 縦幅 ]どちらかは【どちらも?】 0 でないもの ◎ Otherwise, return a DOMRect object describing the smallest rectangle that includes all of the rectangles in list of which the height or width is not zero.
注記: この~methodが返す `DOMRect$I ~objは、 `~live$でない。 ◎ Note: The DOMRect object returned by getBoundingClientRect() is not live.
10. `MouseEvent^I ~interfaceに対する拡張
この~IDL片は、 一部の~memberを定義し直している。 これをどうにか解決できないか? ◎ The object IDL fragment redefines some members. Can we resolve this somehow?
partial interface `MouseEvent$I {`MouseEvent^I0 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@mb = 0.0; `double$ `screenY@mb = 0.0; `double$ `clientX@mb = 0.0; `double$ `clientY@mb = 0.0; };`MouseEvent^dgm `MouseEvent^I0
[ `pageX@m | `pageY@m ]取得子~手続きは:
- ~IF[ コレの`配送-中か$ev ~EQ ~T ] ⇒ ~RET `初期~包含塊$の原点に相対的な,コレが生じた位置の[ ~x座標 | ~y座標 ]
- %offset ~LET 0
- ~IF[ コレに結付けられた `Window$I ~obj %window 【!*】は在る ] ⇒ %offset ~SET %window の[ `scrollX$m1 | `scrollY$m1 ]取得子~手続き()
- %offset ~INCBY コレの[ `clientX$m | `clientY$m ]取得子~手続き()
- ~RET %offset
[ `offsetX@m | `offsetY@m ]取得子~手続きは: ◎ The offsetX attribute must follow these steps:
-
~IF[ コレの`配送-中か$ev ~EQ ~T ]:
- ~Assert: コレの`~target$ ~NEQ ~NULL
- ~RET 要素とその先祖に対する`変形$は適用しない下で, コレの`~target$の`~padding辺$の原点に相対的な,コレが生じた位置の[ ~x座標 | ~y座標 ]
【 この段おける~targetへの~linkおよび ~Assert は、 この訳による補完。 】
◎ 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. - ~RET コレの[ `pageX$m | `pageY$m ]取得子~手続き() ◎ Return the value of the event’s pageX attribute.
◎ The offsetY attribute must follow these steps: • 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. • Return the value of the event’s pageY attribute.
11. 幾何
【 現時点で,この節を実装している~UAは無い。 】
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; }; interface mixin `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 includes `GeometryUtils$I; // like Range `Element$I includes `GeometryUtils$I; `CSSPseudoElement$I includes `GeometryUtils$I; `Document$I includes `GeometryUtils$I; typedef (`Text$I or `Element$I or `CSSPseudoElement$I or `Document$I) `GeometryNode@I;
`getBoxQuads(options)@m ~method手続きは: ◎ The getBoxQuads(options) method must run the following steps:
-
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
12. `VisualViewport^I
12.1. `VisualViewport^I ~interface
[`Exposed$=Window] interface `VisualViewport@I : `EventTarget$I {`VisualViewport^I0 readonly attribute `double$ `offsetLeft$m; readonly attribute `double$ `offsetTop$m; readonly attribute `double$ `pageLeft$m; readonly attribute `double$ `pageTop$m; readonly attribute `double$ `width$m; readonly attribute `double$ `height$m; readonly attribute `double$ `scale$m; attribute `EventHandler$I `onresize$m; attribute `EventHandler$I `onscroll$m; attribute `EventHandler$I `onscrollend$m; };
`VisualViewport$I ~objは、 `視覚-表示域$を表現する。
`VisualViewport$I ~obj %O に `結付けられた文書@vV は、 %O に`関連な大域~obj$(ある `Window$I )【!owner Window】に`結付けられた文書$を指す。 `~layout表示域$は、 この大域~objの`表示域$になる。
以下の記述に現れる[ 当の`視覚-表示域$ / 当の`~layout表示域$ ]は、[ 当の~obj(コレ)が表現している`視覚-表示域$ / その`~layout表示域$ ]を指すとする。
【 上の 3 つの段落のうち[ 2 個目は 他所からここへ移動した/ 他は この訳による補完 ]。 】
[ `offsetLeft@m | `offsetTop@m ] 取得子~手続きは:
- ~IF[ コレに`結付けられた文書$vVは`全部的に作動中$でない ] ⇒ ~RET 0
- ~RET 当の`~layout表示域$の[ 左端|上端 ]辺から当の`視覚-表示域$の[ 左端|上端 ]辺までの~offset
[ `pageLeft@m | `pageTop@m ]取得子~手続きは:
- ~IF[ コレに`結付けられた文書$vVは`全部的に作動中$でない ] ⇒ ~RET 0
- ~RET コレに`結付けられた文書$vV【!`~layout表示域$の`文書$】の`初期~包含塊$の[ 左端|上端 ]辺から当の`視覚-表示域$の[ 左端|上端 ]辺までの~offset
[ `width@m | `height@m ]取得子~手続きは: ◎ The width attribute must run these steps:
- ~IF[ コレに`結付けられた文書$vVは`全部的に作動中$でない ] ⇒ ~RET 0 ◎ If the visual viewport’s associated document is not fully active, return 0.
- ~RET 当の`視覚-表示域$の[ `有効~横幅$|`有効~縦幅$ ]† ◎ Otherwise, return the width of the visual viewport excluding the width of any rendered vertical classic scrollbar that is fixed to the visual viewport.
注記: 結果の値は, `px$u 単位なので、[ `~page~zoom$/`拡縮率$vV ]が増大したときは,減少することになる。 ◎ Note: Since this value is returned in CSS pixels, the value will decrease in magnitude if either page zoom or the scale factor is increased.
注記†: この~sizeから除外される`古典~scrollbar$は、 `視覚-表示域$に “固定されて” 描画される — すなわち、 視覚-表示域が~zoomされても~panされても,その[ ~size, 所在 ]は変化しない。 【この仕様は、~UAがそのように描画するものと見做している。】 この値は `px$u 単位なので、 ~UAは,[ ~scrollbarの[ 横幅/縦幅 ]を除外する ]ときは[ `px$u 単位で測定した結果 ]を織り込むモノトスル。 すなわち、 除外される量は[ 拡大するときは減少する/ 縮小するときは増大する ]。 ◎ Note: A scrollbar that is fixed to the visual viewport is one that does not change size or location as the visual viewport is zoomed and panned. Because this value is in CSS pixels, when excluding the scrollbar width the UA must account for how large the scrollbar is as measured in CSS pixels. That is, the amount excluded decreases when zooming in and increases when zooming out.
◎ The height attribute must run these steps: • If the visual viewport’s associated document is not fully active, return 0. • Otherwise, return the height of the visual viewport excluding the height of any rendered horizontal classic scrollbar that is fixed to the visual viewport.
`scale@m 取得子~手続きは: ◎ The scale attribute must run these steps:
- ~IF[ コレに`結付けられた文書$vVは`全部的に作動中$でない ] ⇒ ~RET 0 ◎ If the visual viewport’s associated document is not fully active, return 0 and abort these steps.
- ~IF[ 出力~機器は無い ] ⇒ ~RET 1 ◎ If there is no output device, return 1 and abort these steps.
- ~RET 当の`視覚-表示域$の`拡縮率$vV ◎ Otherwise, return the visual viewport’s scale factor.
`onresize@m は、 `resize$et ~event用の`~event~handler~IDL属性$である。 ◎ onresize is the event handler IDL attribute for the resize event.
`onscroll@m は、 `scroll$et ~event用の`~event~handler~IDL属性$である。 ◎ onscroll is the event handler IDL attribute for the scroll event.
`onscrollend@m は、 `scrollend$et ~event用の`~event~handler~IDL属性$である。 ◎ onscrollend is the event handler IDL attribute for the scrollend event.
13. ~event
13.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:
- ~Assert: %文書 は`全部的に作動中$である 【この段は、この訳による補完】
-
~IF[ 当の`表示域$の[ 横幅/縦幅 ]は、 この手続きを最後に走らせたときから変化した† ] ⇒ `~eventを発火する$( %文書 を結付けている `Window$I ~obj, `resize$et )
† 例 ⇒# 利用者が~browserの~UIwindowを~resizeしたとき/ `~page~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 page zoom, 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. - %視覚-表示域 ~LET %文書 が結付けられた `VisualViewport$I ◎ ↓
- `VisualViewport^I1 ~IF[ %視覚-表示域 の[ `scale$m / `width$m / `height$m ]~propは、 この手続きを最後に走らせたときから変化した ] ⇒ `~eventを発火する$( %視覚-表示域, `resize$et ) ◎ If the VisualViewport associated with doc has had its scale, width, or height properties changed since the last time these steps were run, fire an event named resize at the VisualViewport.
13.2. ~scroll法
この節は、 `HTML$r に定義される`描画を更新する手続き$【!`~event~loop$】に統合されている。 ◎ This section integrates with the event loop defined in HTML. [HTML]
各 `文書$には、 次に挙げるものが結付けられる:
- `処理待ち~scroll_ev~event~target群@ ⇒ ある~list — 初期~時は空とする。 ◎ Each Document has an associated list of pending scroll event targets, initially empty.
- `処理待ち~scrollend_ev~event~target群@ ⇒ ある~list — 初期~時は空とする。 ◎ Each Document has an associated list of pending scrollend event targets, initially empty.
~UAは、[ `表示域$/要素 ]が~scrollされる度に (利用者-ヤリトリ, ~APIのどちらによるかを問わず), 次を走らすモノトスル:
- %~target ~LET [ `表示域$を~scrollしている場合は,それに結付けられた`文書$ / 要素を~scrollしている場合は,当の要素 ]
- %文書 ~LET %~target の`~node文書$
- ~IF[ %~target は`~scroll留め容器$である ] ⇒ `~scrollsnapchanging_ev~target群を更新する$( ↓ ) ⇒# %~target, 塊~軸における %~target の`最終的な留め~target$, 行内~軸における %~target の`最終的な留め~target$
- %~target群 ~LET %文書 の`処理待ち~scroll_ev~event~target群$
- ~IF[ %~target ~IN %~target群 ] ⇒ ~RET
- %~target群 に %文書 を付加する
`視覚-表示域$が~scrollされたときは、 (利用者-ヤリトリ, ~APIのどちらによるかを問わず) 次を走らすモノトスル: ◎ Whenever a visual viewport gets scrolled (whether in response to user interaction or by an API), the user agent must run these steps:
- %vv ~LET ~scrollされた`視覚-表示域$を表現する `VisualViewport$I ~obj ◎ Let vv be the VisualViewport object that was scrolled.
- %~target群 ~LET %vv に`結付けられた文書$vVの`処理待ち~scroll_ev~event~target群$ ◎ Let doc be vv’s associated document. ◎ ↓
- ~IF[ %vv ~IN %~target群 ] ⇒ ~RET ◎ If vv is already in doc’s pending scroll event targets, abort these steps.
- %~target群 に %vv を付加する ◎ Append vv to doc’s pending scroll event targets.
`文書の~scroll手続き@ は、 所与の ( `文書$ %文書 ) に対し,次を走らす: ◎ When asked to run the scroll steps for a Document doc, run these steps:
- ~Assert: %文書 は`全部的に作動中$である 【この段は、この訳による補完】
- `処理待ち~scrollsnapchanging_ev~event群を配送する$( %文書 ) ◎ Run the steps to dispatch pending scrollsnapchanging events for doc.
-
%文書 の`処理待ち~scroll_ev~event~target群$を成す ~EACH( %~target ) に対し: ◎ For each item target in doc’s pending scroll event targets, in the order they were added to the list, run these substeps:
- ~IF[ %~target は`文書$である ] ⇒ `~eventを発火する$( %~target, `scroll$et ) — 次のように初期化して ⇒ `bubbles^m 属性 ~SET ~T ◎ If target is a Document, fire an event named scroll that bubbles at target.
- ~ELSE ⇒ `~eventを発火する$( %~target, `scroll$et ) ◎ Otherwise, fire an event named scroll at target.
- %文書 の`処理待ち~scroll_ev~event~target群$を空にする ◎ Empty doc’s pending scroll event targets.
- `処理待ち~scrollsnapchange_ev~event群を配送する$( %文書 ) ◎ Run the steps to dispatch pending scrollsnapchange events for doc.
~scrollを`完了-$したときは、 次を走らすモノトスル: ◎ Whenever scrolling is completed, the user agent must run these steps:
`scrollend^et ~eventは、 ~scrollの[ 開始, 完了 ]どちらに基づく順序で配送されるのか? ◎ In what order are scrollend events dispatched? Ordered based on scroll start or scroll completion?
-
~scrollされた ~EACH( `~scrollされる~box$ %~box ) に対し: ◎ For each scrolling box box that was scrolled:
- %~target ~LET %~box の所属に応じて ⇒# `表示域$であるならば %~target が結付けられた`文書$/ `視覚-表示域$であるならば %~target を表現している `VisualViewport$I ~obj/ 要素であるならば %~target ◎ ↓
- %文書 ~LET %~target に応じて ⇒# `VisualViewport$I ~objであるならば %~target に`結付けられた文書$vV/ ~ELSE_ %~target の`~node文書$ ◎ If box belongs to a viewport, let doc be the viewport’s associated Document and target be the viewport. If box belongs to a VisualViewport, let doc be the VisualViewport's associated document and target be the VisualViewport. Otherwise, box belongs to an element and let doc be the element’s node document and target be the element.
- ~IF[ %~box の`~scroll留め容器$ %留め容器 は在る ] ⇒ `~scrollsnapchange_ev~target群を更新する$( %留め容器 ) ◎ If box belongs to a snap container, snapcontainer, run the update scrollsnapchange targets steps for snapcontainer.
- %~target群 ~LET %文書 の`処理待ち~scrollend_ev~event~target群$ ◎ ↓
- ~IF[ %~target ~IN %~target群 ] ⇒ ~RET ◎ If target is already in doc’s pending scrollend event targets, abort these steps.
- %~target群 に %~target を付加する ◎ Append target to doc’s pending scrollend event targets.
-
`~scrollsnapchange_ev~target群を更新する$( %文書 ) ◎ Run the steps to dispatch pending scrollsnapchange targets for doc.
【 この段~以降で利用される %文書 が どの`文書$を指すのか指定されていない。 上の~loop内で宣言された %文書 は %~box に応じて異なるかもしれない。 】
- %~target群 ~LET %文書 の`処理待ち~scrollend_ev~event~target群$ ◎ For each item target in doc’s pending scrollend event targets,\
-
%~target群 を成す ~EACH( %~target ) に対し: ◎ in the order they were added to the list, run these substeps:
- ~IF[ %~target は`文書$である ] ⇒ `~eventを発火する$( %~target, `scrollend$et ) — 次のように初期化して ⇒# `bubbles^m 属性 ~SET ~T ◎ If target is a Document, fire an event named scrollend that bubbles at target.
- ~ELSE ⇒ `~eventを発火する$( %~target, `scrollend$et ) ◎ Otherwise, fire an event named scrollend at target.
- %~target群 を空にする ◎ Empty doc’s pending scrollend event targets.
13.3. ~event要約
◎非規範的~event | ~interface | ~target | 記述 |
---|---|---|---|
`resize@et | `Event$I | `Window$I, `VisualViewport$I |
[ `表示域$/`視覚-表示域$ ]が~resizeされたとき, 当の[ `Window$I / `VisualViewport$I ]に向けて発火される。 `視覚-表示域$の`~layout表示域$が拡縮されたとき, 当の `VisualViewport$I に向けて発火される。 |
`scroll@et | `Event$I | `VisualViewport$I, `Document$I, `Element$I | [ `視覚-表示域$/`表示域$/要素 ]が~scrollされたとき, 当の[ `VisualViewport$I / `Document$I / `Element$I ]に向けて発火される。 |
`scrollend@et | `Event$I | `VisualViewport$I, `Document$I, `Element$I | [ `視覚-表示域$/`表示域$/要素 ]が~scrollされ,`完了-$したとき — すなわち、 ~scrollが終止して,~scroll~offsetの変化が適用された後に — 当の[ `VisualViewport$I / `Document$I / `Element$I ]に向けて発火される。 |
14. ~layout後の状態の~snapshot法
~scroll位置の様な一部の~CSS特能は、 次回の[ ~style, ~layout ]更新に対する入力として,~layout後の状態を利用する。 ◎ Some CSS features use post-layout state, like scroll position, as input to the next style and layout update.
`~layout後の状態を~snapshotする手続き@ は、 所与の ( `Document$I %文書 ) に対し,次の手続きを走らす: ◎ When asked to run snapshot post-layout state steps for a Document doc, run these steps:
- ~layout後の状態を~snapshotする必要がある各~CSS特能に対し ⇒ %文書 内の関連な状態の~snapshotをとる ◎ For each CSS feature that needs to snapshot post-layout state, take a snapshot of the relevant state in doc.
どの状態が~snapshotされるかは、 他の仕様にて定義される。 この手続きは、[ 他の~layout後に~snapshotする手続きが,そのような~snapshot法が起きたことを観測し得る仕方 ]では[ %文書 や他の `Document$I ]【の状態?】を無効~化しないモノトスル。 したがって、 そのような各~snapshot法が その場を占める順序は,問われてはナラナイ。 ◎ The state that is snapshot is defined in other specifications. These steps must not invalidate doc or any other Documents in such a way that other post-layout snapshotting steps can observe that such snapshotting happened. It follows that the order of which such snapshotting takes place must not matter.
~security/~privacyの考慮点
`Screen$I ~interfaceは、 利用者の~display環境設定についての情報を公開する — それは、 指紋収集~algoの入力として利用され得る。 利用者の~privacyを保護するためとして、 ~UAは,~screen~sizeや環境設定についての情報を[ 隠す/量子化する ]ことを選んでもヨイ。 ◎ The Screen interface exposes information about the user’s display configuration, which maybe be used as input to fingerprinting algorithms. User agents may choose to hide or quantize information about the screen size or configuration, in order to protect the user’s privacy.
`MouseEvent$I ~eventは、 ~screenに相対的な座標についての情報を包含する。 利用者の~privacyを保護するためとして、 ~UAは,~eventの そのような~propを[ 実際の~screenに相対的な所在 ]を隠蔽するような値に設定してもヨイ。 ◎ MouseEvent contains information about the screen-relative coordinates of the event. User agents may set these properties to values that obscure the actual screen-relative location of the event, in order to protect the user’s privacy.
変更点
この節では、 この仕様の各~公表版の間の変更点の一部を文書化する。 この節は、 網羅的ではない。 ~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.
- 2022年 7月 7日からの変更点 ◎ Changes From 07 July 2022
- `VisualViewport$I ~APIと関係する概念を導入した。 ◎ Introduced the VisualViewport API and related concepts
- ~pinch~zoomを`拡縮率$vVに改称した。 ◎ Pinch zoom is now renamed to scale factor
- `CheckVisibilityOptions$I に[ `visibilityProperty$mb, `opacityProperty$mb, `contentVisibilityAuto$mb ]を追加して,それらを `Element^I1`checkVisibility()$m1 ~method用に織り込んだ。 ◎ Added visibilityProperty, opacityProperty, and contentVisiblityAuto properties for checkVisibility() method.
- 2022年 6月 22日からの変更点 ◎ Changes From 22 June 2022
- 【!Adam Argyle】 `WICG overscroll-scrollend-events@https://wicg.github.io/overscroll-scrollend-events/$ から `scrollend$et ~eventを移動した。 ◎ Adam Argyle moved the scrollend event from WICG overscroll-scrollend-events to [CSSOM-VIEW-1]
- 2020年 10月 19日からの変更点 ◎ Changes From 19 October 2020
- `§ ~securityと~privacyの考慮点@#priv-sec$ を追加した。 ◎ Added the "Security and Privacy Considerations" section
- `§ 各種用語@#terminology$ における論理的な誤りを修正した。 ◎ Fixed a logical error in the Terminology section.
- `scroll-behavior$p ~propを `CSS-OVERFLOW-3$r へ移動した。 ◎ Moved the scroll-behavior property to [CSS-OVERFLOW-3]
- 2020年 1月 31日 からの変更点 ◎ Changes From 31 January 2020
- 編集者に `Simon Fraser^en を追加した。 ◎ Added Simon Fraser as editor
- `Window$I の `resizeTo()$m1 の引数を %width, %height に改称した。 (`課題 #4727@~CSSissue/4727$) ◎ Renamed the arguments to resizeTo() to be width and height (4727)
- 2013年 12月 17日 から 2020年 1月 31日 までの変更点 ◎ Changes From 17 December 2013 To 31 January 2020
- `Element$I 上の `scrollIntoView()$m1 ~methodを変更して拡張した。 ◎ The scrollIntoView() method on Element was changed and extended.
- `Element$I の[ `scrollTop$m1, `scrollLeft$m1 ]~IDL属性は、 ~objをとらないようにした — 代わりに[ `scroll()$m1, `scrollTo()$m1, `scrollBy()$m1 ]~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$m1, `scrollHeight$m1, `clientTop$m1, `clientLeft$m1, `clientWidth$m1 `clientHeight$m1 ]~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$m1 ~IDL属性を追加した。 ◎ The scrollingElement IDL attribute on Document was added.
- `Window$I 上の一部の読専( readonly )属性に、 [Replaceable] ~IDL拡張d属性で注釈した。 ◎ 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$m1 の原点を(右横書き用に)変更した。 ◎ The origin of scrollLeft on Element was changed (for RTL).
- `Element$I の `scrollIntoView()$m1 ~method, および `Window$I の[ `scroll()$m1, `scrollTo()$m1, `scrollBy()$m1 ]~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()$m1 を定義するよう変更した。 ◎ The MediaQueryList interface was changed to use regular event API and define addListener() in terms of that.
- 2011年 8月 4日 から 2013年 12月 17日 までの変更点 ◎ Changes From 4 August 2011 To 17 December 2013
- 右横書き(`行内~基底~方向$)と縦組みも取扱うようにした。 ◎ The specification now handles right-to-left and vertical writing modes.
- [ `~page~zoom$, ~pinch~zoom ]を織り込んだ。 ◎ The specification is now aware of page zoom and pinch zoom.
- `scroll-behavior$p ~CSS~propを導入して、 滑らかな~scrollを制御できるよう,~scroll用~APIを拡張した。 ◎ The scroll-behavior CSS property is introduced and scrolling APIs are extended with a mechanism to control smooth scrolling.
- `Window$I の[ `moveTo()$m1, `moveBy()$m1, `resizeTo()$m1, `resizeBy()$m1 ]~methodを定義した。 ◎ The moveTo(), moveBy(), resizeTo() and resizeBy() methods are now defined.
- `Window$I の `innerWidth$m1, 等々は、 ~Web~IDL型 `long^c ではなく, `double^c を利用するようにした。 ◎ innerWidth et al now use the WebIDL type double instead of long.
- `Window$I の `devicePixelRatio$m1 を定義した。 ◎ devicePixelRatio is now defined.
- `window.open()^m に対する %features 引数を定義した。 ◎ The features argument to window.open() is now defined.
- `Screen$I の[ `colorDepth$m1, `pixelDepth$m1 ]属性は、 24 を返すようにした。 ◎ The colorDepth and pixelDepth attributes of Screen now always return 24.
- `Document$I 【!`Element^I】 に `elementsFromPoint()$m1 ~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-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, Corey Farwell, 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 ~browserにて最初に実装した 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.