Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[cssom-view] Add ScrollIntoViewMode ("always", "if-needed"); add FocusScrollOptions #5677

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
+29 −3
Open

[cssom-view] Add ScrollIntoViewMode ("always", "if-needed"); add FocusScrollOptions #5677

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f60ebed
[cssom-view] Add notIfViewed to ScrollIntoViewOptions; add FocusScrol…
zcorpan Sep 12, 2017
6ff3c4d
Change notIfViewed to scroll:"always"/"if-needed"
zcorpan Sep 13, 2017
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
32 changes: 29 additions & 3 deletions cssom-view-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1063,11 +1063,18 @@ Note: This {{DOMRect}} object is not <a spec=html>live</a>.
<h2 id=extension-to-the-element-interface>Extensions to the {{Element}} Interface</h2>

<pre class=idl>
enum ScrollIntoViewMode { "always", "if-needed" };
enum ScrollLogicalPosition { "start", "center", "end", "nearest" };
dictionary ScrollIntoViewOptions : ScrollOptions {
ScrollIntoViewMode scroll = "always";
ScrollLogicalPosition block = "start";
ScrollLogicalPosition inline = "nearest";
};
dictionary FocusScrollOptions : ScrollOptions {
ScrollIntoViewMode scroll = "if-needed";
ScrollLogicalPosition block;
ScrollLogicalPosition inline;
};

partial interface Element {
DOMRectList getClientRects();
Expand All @@ -1090,6 +1097,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 +1144,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>scrollMode</var> be "<code>always</code>".
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>scrollMode</var> to the {{ScrollIntoViewOptions/scroll}} 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>scrollMode</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 +1306,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 mode indicating whether to scroll if the element is already in view <var>scrollMode</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 +1322,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>scrollMode</var> is "<code>if-needed</code>", 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