Skip to content

[cssom-view] Add more positioning control to scrollIntoView #81

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

Merged
merged 2 commits into from
Dec 4, 2015
Merged

[cssom-view] Add more positioning control to scrollIntoView #81

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
76e9602
[cssom-view] Add more positioning control to scrollIntoView
zcorpan Dec 3, 2015
4dd6811
[cssom-view] Change scrollIntoView({}) to center, and add "nearest"
zcorpan Dec 3, 2015
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
46 changes: 34 additions & 12 deletions cssom-view/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,7 @@ url: http://www.w3.org/TR/DOM-Level-3-Events/#interface-MouseEvent; type: interf
spec:dom-ls; type:method; text:addEventListener()
spec:css-display-3; type:value; for:display; text:table
spec:css-position-3; type:property; text:position
spec:dom-ls; type:interface; text:Document
</pre>

<script src=https://resources.whatwg.org/file-bug.js async></script>
Expand Down Expand Up @@ -990,9 +991,10 @@ Extensions to the {{Element}} Interface {#extension-to-the-element-interface}
=============================================================================

<pre class=idl>
enum ScrollLogicalPosition { "start", "end" };
enum ScrollLogicalPosition { "start", "center", "end", "nearest" };
dictionary ScrollIntoViewOptions : ScrollOptions {
ScrollLogicalPosition block = "start";
ScrollLogicalPosition block = "center";
ScrollLogicalPosition inline = "center";
};

partial interface Element {
Expand Down Expand Up @@ -1049,16 +1051,16 @@ algorithm:

The <dfn method for=Element>scrollIntoView(<var>arg</var>)</dfn> method must run these steps:

<!-- scrollIntoView() means top=true but scrollIntoView(undefined) means top=false, to align with impls. -->
<!-- scrollIntoView() means arg=true but scrollIntoView(undefined) means arg=false, to align with impls. -->

1. Let <var>options</var> be null.
1. If <var>arg</var> is an object, let <var>options</var> be <var>arg</var>.
1. <a lt="converted to an IDL value">Convert</a> <var>options</var> to a {{ScrollIntoViewOptions}} dictionary. [[!WEBIDL]]
1. If <var>arg</var> is false, let the {{ScrollIntoViewOptions/block}} dictionary member of <var>options</var> have the value "<code>end</code>".
1. If <var>arg</var> is not specified or is true, let the {{ScrollIntoViewOptions/block}} dictionary member of <var>options</var> have the value "<code>start</code>", and let the {{ScrollIntoViewOptions/inline}} dictionary member of <var>options</var> have the value "<code>nearest</code>".
1. If <var>arg</var> is false, let the {{ScrollIntoViewOptions/block}} dictionary member of <var>options</var> have the value "<code>end</code>", and let the {{ScrollIntoViewOptions/inline}} dictionary member of <var>options</var> have the value "<code>nearest</code>".
1. If the element does not have any associated <a>layout box</a> terminate these steps.
1. <a lt='scroll an element into view'>Scroll the element into view</a>
with the <i>align to top</i> flag set if <var>options</var> {{ScrollIntoViewOptions/block}} dictionary member has the value "<code>start</code>",
and the scroll behavior being the value of the {{ScrollOptions/behavior}} dictionary member of <var>options</var>.
with the options <var>options</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 @@ -1218,23 +1220,42 @@ document are not reflected in the objects.
{{Element}} Scrolling Members {#element-scrolling-members}
----------------------------------------------------------

To <dfn>scroll an element into view</dfn> <var>element</var>, optionally with an <i>align to top flag</i> set, and optionally with a scroll behavior
<var>behavior</var> (which is <code>"auto"</code> if omitted), means to run these steps for each ancestor element or <a>viewport</a> that establishes
To <dfn>scroll an element into view</dfn> <var>element</var>,
with a {{ScrollIntoViewOptions}} dictionary <var>options</var>,
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>:

1. If the {{Document}} associated with <var>element</var> is not <a>same origin</a> with the {{Document}} associated with the element or <a>viewport</a> associated with <var>box</var>, terminate these steps.
1. Let <var>element bounding border box</var> be the box that the return value of invoking {{Element/getBoundingClientRect()}} on <var>element</var> represents.
1. Let <var>scrolling box edge A</var> be the <a>beginning edge</a> in the <a>block flow direction</a> of <var>scrolling box</var>, and let <var>element edge A</var> be <var>element bounding border box</var>'s edge on the same physical side as that of <var>scrolling box edge A</var>.
1. Let <var>scrolling box edge B</var> be the <a>ending edge</a> in the <a>block flow direction</a> of <var>scrolling box</var>, and let <var>element edge B</var> be <var>element bounding border box</var>'s edge on the same physical side as that of <var>scrolling box edge B</var>.
1. Let <var>scrolling box edge C</var> be the <a>beginning edge</a> in the <a>inline base direction</a> of <var>scrolling box</var>, and let <var>element edge C</var> be <var>element bounding border box</var>'s edge on the same physical side as that of <var>scrolling box edge C</var>.
1. Let <var>scrolling box edge D</var> be the <a>ending edge</a> in the <a>inline base direction</a> of <var>scrolling box</var>, and let <var>element edge D</var> be <var>element bounding border box</var>'s edge on the same physical side as that of <var>box edge D</var>.
1. Let <var>scrolling box edge D</var> be the <a>ending edge</a> in the <a>inline base direction</a> of <var>scrolling box</var>, and let <var>element edge D</var> be <var>element bounding border box</var>'s edge on the same physical side as that of <var>scrolling box edge D</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. Let <var>position</var> be the scroll position <var>scrolling box</var> would have by following these steps:

1. If the <i>align to top flag</i> is set align <var>element edge A</var> with <var>scrolling box edge A</var>.
1. Otherwise, the <i>align to top flag</i> is not set; align <var>element edge B</var> with <var>scrolling box edge B</var>.
1. <dl class=switch>
1. If the {{ScrollIntoViewOptions/block}} dictionary member of <var>options</var> is "start", align <var>element edge A</var> with <var>scrolling box edge A</var>.
1. Otherwise, if the {{ScrollIntoViewOptions/block}} dictionary member of <var>options</var> is "end"; align <var>element edge B</var> with <var>scrolling box edge B</var>.
1. Otherwise, if the {{ScrollIntoViewOptions/block}} dictionary member of <var>options</var> is "center"; align the center of <var>element bounding border box</var> with the center of <var>scrolling box</var> in <var>scrolling box</var>'s <a>block flow direction</a>.
1. Otherwise, it is "nearest"; follow these steps:
<dl class=switch>
<dt>If <var>element edge A</var> and <var>element edge B</var> are both outside <var>scrolling box edge A</var> and <var>scrolling box edge B</var>
<dd>Do nothing.

<dt>If <var>element edge A</var> is outside <var>scrolling box edge A</var> and <var>element width</var> is less than <var>scrolling box width</var>
<dt>If <var>element edge B</var> is outside <var>scrolling box edge B</var> and <var>element width</var> is greater than <var>scrolling box width</var>
<dd>Align <var>element edge A</var> with <var>scrolling box edge A</var>.

<dt>If <var>element edge A</var> is outside <var>scrolling box edge A</var> and <var>element width</var> is greater than <var>scrolling box width</var>
<dt>If <var>element edge B</var> is outside <var>scrolling box edge B</var> and <var>element width</var> is less than <var>scrolling box width</var>
<dd>Align <var>element edge B</var> with <var>scrolling box edge B</var>.
</dl>
1. If the {{ScrollIntoViewOptions/inline}} dictionary member of <var>options</var> is "start", align <var>element edge C</var> with <var>scrolling box edge C</var>.
1. Otherwise, if the {{ScrollIntoViewOptions/inline}} dictionary member of <var>options</var> is "end"; align <var>element edge D</var> with <var>scrolling box edge D</var>.
1. Otherwise, if the {{ScrollIntoViewOptions/inline}} dictionary member of <var>options</var> is "center", align the center of <var>element bounding border box</var> with the center of <var>scrolling box</var> in <var>scrolling box</var>'s <a>inline base direction</a>.
1. Otherwise, it is "nearest"; follow these steps:
<dl class=switch>
<dt>If <var>element edge C</var> and <var>element edge D</var> are both outside <var>scrolling box edge C</var> and <var>scrolling box edge D</var>
<dd>Do nothing.

Expand All @@ -1258,6 +1279,7 @@ a <a>scrolling box</a> <var>scrolling box</var>, in order of innermost to outerm
Let <var>document</var> be the <a>viewport’s</a> associated {{Document}}.
Let <var>associated element</var> be <var>document</var>'s root element, if there is one, or null otherwise.
</dl>
1. Let <var>behavior</var> be the {{ScrollOptions/behavior}} dictionary member of <var>options</var>.
1. <a>Perform a scroll</a> of <var>scrolling box</var> to <var>position</var>, <var>associated element</var> as the associated element and <var>behavior</var> as the scroll behavior.


Expand Down