Skip to content

[cssom-view] Change scrollIntoView(undefined) to be like true #1505

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 4 commits into from
Sep 11, 2017
Merged

[cssom-view] Change scrollIntoView(undefined) to be like true #1505

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
27591aa
[cssom-view] Change scrollIntoView(undefined) to be like true
zcorpan Jun 7, 2017
73f06e5
[cssom-view] Change defaults for ScrollIntoViewOptions
zcorpan Sep 8, 2017
f02a15d
Address comments. This changes the input to 'scroll an element into v…
zcorpan Sep 8, 2017
51eef11
Fixup
zcorpan Sep 8, 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
65 changes: 33 additions & 32 deletions cssom-view/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -382,14 +382,14 @@ This specification depends on the WHATWG Infra standard. [[!INFRA]]
When a user agent is to <dfn>perform a scroll</dfn> of a <a>scrolling box</a> <var>box</var>,
to a given position <var>position</var>,
an associated element <var>element</var> and optionally a scroll behavior <var>behavior</var>
(which is <code>"auto"</code> if omitted),
(which is "<code>auto</code>" if omitted),
the following steps must be run:

<ol>
<li><a lt="smooth scroll aborted">Abort</a> any ongoing <a>smooth scroll</a> for <var>box</var>.
<li>If the user agent honors the 'scroll-behavior' property and one of the following are true:
<ul>
<li><var>behavior</var> is <code>"auto"</code> and <var>element</var> is not null and its computed value of the
<li><var>behavior</var> is "<code>auto</code>" and <var>element</var> is not null and its computed value of the
'scroll-behavior' property is ''smooth''
<li><var>behavior</var> is <code>smooth</code>
</ul>
Expand Down Expand Up @@ -768,7 +768,7 @@ When asked to <dfn>evaluate media queries and report changes</dfn> for a {{Docum
<div class='example'>
A simple piece of code that detects changes in the orientation of the viewport can be written as follows:

<pre class='lang-javascript'>
<pre highlight=javascript>
function handleOrientationChange(event) {
if(event.matches) // landscape
&hellip;
Expand Down Expand Up @@ -922,7 +922,7 @@ Note: Some non-conforming implementations are known to return 32 instead of 24.
<code>colorDepth</code> can be used in the context of selecting SDR/HDR in
addition with other information. For example, combined with color gamut.

<pre class='lang-javascript'>
<pre highlight=javascript>
if (screen.colorDepth >= 48 && window.matchMedia('(color-gamut: p3)').matches &&
/* other checks */) {
// Use HDR content.
Expand Down Expand Up @@ -1075,15 +1075,14 @@ Note: This {{DOMRect}} object is not <a spec=html>live</a>.
<pre class=idl>
enum ScrollLogicalPosition { "start", "center", "end", "nearest" };
dictionary ScrollIntoViewOptions : ScrollOptions {
ScrollLogicalPosition block = "center";
ScrollLogicalPosition inline = "center";
ScrollLogicalPosition block = "start";
ScrollLogicalPosition inline = "nearest";
};

partial interface Element {
DOMRectList getClientRects();
[NewObject] DOMRect getBoundingClientRect();
void scrollIntoView();
void scrollIntoView((boolean or object) arg);
void scrollIntoView(optional (boolean or ScrollIntoViewOptions) arg);
void scroll(optional ScrollToOptions options);
void scroll(unrestricted double x, unrestricted double y);
void scrollTo(optional ScrollToOptions options);
Expand Down Expand Up @@ -1129,7 +1128,7 @@ Note: The {{DOMRect}} object returned by {{Element/getBoundingClientRect()}} is
<div class='example'>
The following snippet gets the dimensions of the first <code>div</code> element in a document:

<pre class='lang-javascript'>
<pre highlight=javascript>
var example = document.getElementsByTagName("div")[0].getBoundingClientRect();
var exampleWidth = example.width;
var exampleHeight = example.height;
Expand All @@ -1138,16 +1137,17 @@ Note: The {{DOMRect}} object returned by {{Element/getBoundingClientRect()}} is

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

<!-- 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 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. 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. 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. 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 the options <var>options</var>.
with <var>behavior</var>, <var>block</var>, and <var>inline</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 @@ -1225,7 +1225,7 @@ When setting the {{Element/scrollTop}} attribute these steps must be run:
1. If the element is the root element invoke {{Window/scroll()}} on <var>window</var> with {{Window/scrollX}} on <var>window</var> as first argument and <var>y</var> as second argument, and terminate these steps.
1. If the element is <a>the HTML <code>body</code> element</a>, <var>document</var> is in <a>quirks mode</a>, and the element is not <a>potentially scrollable</a>, invoke {{Window/scroll()}} on <var>window</var> with {{Window/scrollX}} as first argument and <var>y</var> as second argument, and terminate these steps.
1. If the element does not have any associated <a>CSS layout box</a>, the element has no associated <a>scrolling box</a>, or the element has no overflow, terminate these steps.
1. <a lt='scroll an element'>Scroll the element</a> to {{Element/scrollLeft}},<var>y</var>, with the scroll behavior being <code>"auto"</code>.
1. <a lt='scroll an element'>Scroll the element</a> to {{Element/scrollLeft}},<var>y</var>, with the scroll behavior being "<code>auto</code>".

The <dfn attribute for=Element>scrollLeft</dfn> attribute, on getting, must return the result of running these steps:

Expand All @@ -1251,7 +1251,7 @@ When setting the {{Element/scrollLeft}} attribute these steps must be run:
1. If the element is the root element invoke {{Window/scroll()}} on <var>window</var> with <var>x</var> as first argument and {{Window/scrollY}} on <var>window</var> as second argument, and terminate these steps.
1. If the element is <a>the HTML <code>body</code> element</a>, <var>document</var> is in <a>quirks mode</a>, and the element is not <a>potentially scrollable</a>, invoke {{Window/scroll()}} on <var>window</var> with <var>x</var> as first argument and {{Window/scrollY}} on <var>window</var> as second argument, and terminate these steps.
1. If the element does not have any associated <a>CSS layout box</a>, the element has no associated <a>scrolling box</a>, or the element has no overflow, terminate these steps.
1. <a lt='scroll an element'>Scroll the element</a> to <var>x</var>,{{Element/scrollTop}}, with the scroll behavior being <code>"auto"</code>.
1. <a lt='scroll an element'>Scroll the element</a> to <var>x</var>,{{Element/scrollTop}}, with the scroll behavior being "<code>auto</code>".

The <dfn attribute for=Element>scrollWidth</dfn> attribute must return the result of running these steps:

Expand Down Expand Up @@ -1299,7 +1299,9 @@ The <dfn attribute for=Element>clientHeight</dfn> attribute must run these steps
<h3 id=element-scrolling-members>{{Element}} Scrolling Members</h3>

To <dfn>scroll an element into view</dfn> <var>element</var>,
with a {{ScrollIntoViewOptions}} dictionary <var>options</var>,
with a scroll behavior <var>behavior</var>,
a block flow direction position <var>block</var>,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

and an optional block flow ... and an inline base ...

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure I follow. Would you like me to tweak the wording? Or make these optional? Both?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you treat the second and third argument as optional because there's one invocation that just invokes this with "auto", afaict.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't see that. Within cssom-view it's only invoked here

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>.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah you're right. I got confused with "scroll an element".

and an inline base direction position <var>inline</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>:

Expand All @@ -1313,10 +1315,10 @@ a <a>scrolling box</a> <var>scrolling box</var>, in order of innermost to outerm
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 {{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:
1. If <var>block</var> is "<code>start</code>", then align <var>element edge A</var> with <var>scrolling box edge A</var>.
1. Otherwise, if <var>block</var> is "<code>end</code>", then align <var>element edge B</var> with <var>scrolling box edge B</var>.
1. Otherwise, if <var>block</var> is "<code>center</code>", then 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, <var>block</var> is "<code>nearest</code>":
<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.
Expand All @@ -1329,10 +1331,10 @@ a <a>scrolling box</a> <var>scrolling box</var>, in order of innermost to outerm
<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:
1. If <var>inline</var> is "<code>start</code>", then align <var>element edge C</var> with <var>scrolling box edge C</var>.
1. Otherwise, if <var>inline</var> is "<code>end</code>", then align <var>element edge D</var> with <var>scrolling box edge D</var>.
1. Otherwise, if <var>inline</var> is "<code>center</code>", then 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, <var>inline</var> is "<code>nearest</code>":
<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 @@ -1346,7 +1348,7 @@ a <a>scrolling box</a> <var>scrolling box</var>, in order of innermost to outerm
<dd>Align <var>element edge D</var> with <var>scrolling box edge D</var>.
</dl>

1. If <var>position</var> is the same as <var>scrolling box</var>'s current scroll position, and <var>scrolling box</var> does not have an ongoing <a>smooth scroll</a>, abort these steps.
1. If <var>position</var> is the same as <var>scrolling box</var>'s current scroll position, and <var>scrolling box</var> does not have an ongoing <a>smooth scroll</a>, then return.
1. <dl class=switch>
<dt>If <var>scrolling box</var> is associated with an element
<dd>
Expand All @@ -1357,11 +1359,10 @@ 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.


To <dfn>scroll an element</dfn> <var>element</var> to <var>x</var>,<var>y</var> optionally with a scroll behavior <var>behavior</var> (which is <code>"auto"</code> if omitted) means to:
To <dfn>scroll an element</dfn> <var>element</var> to <var>x</var>,<var>y</var> optionally with a scroll behavior <var>behavior</var> (which is "<code>auto</code>" if omitted) means to:

1. Let <var>box</var> be <var>element</var>'s associated <a>scrolling box</a>.
1. <dl class=switch>
Expand Down