Skip to content
Open
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
[cssom-view] Add notIfViewed to ScrollIntoViewOptions; add FocusScrol…
…lOptions

notIfViewed was originally suggested in
http://www.w3.org/mid/CAE3TfZPmNWvz1z7XPqFjtg5S+m_9BOmNNHsOZuSrR2z2AgyNHA@mail.gmail.com

Now it is needed for HTMLElement focus(options) to match the behavior
of focus() in browsers. Since the defaults for focus() is different
from the defaults for scrollIntoView(), a new dictionary
FocusScrollOptions is introduced. For now the defaults for block
and inline are UA-defined.

whatwg/html#2787 (comment)
  • Loading branch information
zcorpan committed Oct 28, 2020
commit f60ebed9b7f450666adf939a86eb0e613d8e239a
31 changes: 28 additions & 3 deletions cssom-view-1/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -1065,9 +1065,15 @@ Note: This {{DOMRect}} object is not <a spec=html>live</a>.
<pre class=idl>
enum ScrollLogicalPosition { "start", "center", "end", "nearest" };
dictionary ScrollIntoViewOptions : ScrollOptions {
boolean notIfViewed = false;
ScrollLogicalPosition block = "start";
ScrollLogicalPosition inline = "nearest";
};
dictionary FocusScrollOptions : ScrollOptions {
boolean notIfViewed = true;
ScrollLogicalPosition block;
ScrollLogicalPosition inline;
};

partial interface Element {
DOMRectList getClientRects();
Expand All @@ -1090,6 +1096,13 @@ partial interface Element {
};
</pre>

The {{ScrollIntoViewOptions}} dictionary is used by {{Element/scrollIntoView()}} and similar APIs
that primarily scroll something into view.

The {{FocusScrollOptions}} dictionary is similar to {{ScrollIntoViewOptions}}, but has different
defaults, and is used by {{HTMLElement}}'s {{HTMLElement/focus()}} and similar APIs that primarily
move focus to something, or equivalent, and secondarily scroll it into view.

The <dfn method for=Element>getClientRects()</dfn> method, when invoked, must return the result of the following algorithm:

1. If the element on which it was invoked does not have an associated <a>layout box</a> return an empty {{DOMRectList}} object and stop this algorithm.
Expand Down Expand Up @@ -1130,14 +1143,16 @@ The <dfn method for=Element caniuse=scrollintoview>scrollIntoView(<var>arg</var>
1. Let <var>behavior</var> be "<code>auto</code>".
1. Let <var>block</var> be "<code>start</code>".
1. Let <var>inline</var> be "<code>nearest</code>".
1. Let <var>notIfViewed</var> be false.
1. If <var>arg</var> is a {{ScrollIntoViewOptions}} dictionary, then:
1. Set <var>behavior</var> to the {{ScrollOptions/behavior}} dictionary member of <var>options</var>.
1. Set <var>block</var> to the {{ScrollIntoViewOptions/block}} dictionary member of <var>options</var>.
1. Set <var>inline</var> to the {{ScrollIntoViewOptions/inline}} dictionary member of <var>options</var>.
1. Set <var>notIfViewed</var> to the {{ScrollIntoViewOptions/notIfViewed}} dictionary member of <var>options</var>.
1. Otherwise, if <var>arg</var> is false, then set <var>block</var> to "<code>end</code>".
1. If the element does not have any associated <a>layout box</a>, then return.
1. <a lt='scroll an element into view'>Scroll the element into view</a>
with <var>behavior</var>, <var>block</var>, and <var>inline</var>.
with <var>behavior</var>, <var>block</var>, <var>inline</var>, and <var>notIfViewed</var>.
1. Optionally perform some other action that brings the element to the user's attention.

The <dfn method for=Element lt="scroll(options)|scroll(x, y)">scroll()</dfn> method must run these steps:
Expand Down Expand Up @@ -1290,8 +1305,9 @@ The <dfn attribute for=Element>clientHeight</dfn> attribute must run these steps

To <dfn>scroll an element into view</dfn> <var>element</var>,
with a scroll behavior <var>behavior</var>,
a block flow direction position <var>block</var>,
and an inline base direction position <var>inline</var>,
a boolean indicating to not scroll if the element is already in view <var>notIfViewed</var>,
optionally a block flow direction position <var>block</var> (undefined if not given),
and optionally an inline base direction position <var>inline</var> (undefined if not given),
means to run these steps for each ancestor element or <a>viewport</a> that establishes
a <a>scrolling box</a> <var>scrolling box</var>, in order of innermost to outermost <a>scrolling box</a>:

Expand All @@ -1305,6 +1321,15 @@ a <a>scrolling box</a> <var>scrolling box</var>, in order of innermost to outerm
1. Let <var>scrolling box height</var> be the distance between <var>scrolling box edge A</var> and <var>scrolling box edge B</var>.
1. Let <var>element width</var> be the distance between <var>element edge C</var> and <var>element edge D</var>.
1. Let <var>scrolling box width</var> be the distance between <var>scrolling box edge C</var> and <var>scrolling box edge D</var>.
1. If <var>notIfViewed</var> is true, and <var>element</var> is entirely in view already, then return.

ISSUE: Define "entirely in view".

1. If <var>block</var> is undefined, set <var>block</var> to a UA-defined value.
1. If <var>inline</var> is undefined, set <var>inline</var> to a UA-defined value.

ISSUE: Define defaults for <var>block</var> and <var>inline</var> for {{FocusScrollOptions}}.

1. Let <var>position</var> be the scroll position <var>scrolling box</var> would have by following these steps:

1. If <var>block</var> is "<code>start</code>", then align <var>element edge A</var> with <var>scrolling box edge A</var>.
Expand Down