[cssom-view] scrollIntoView(undefined) to be like true; change defaults for ScrollIntoViewOptions

zcorpan · web-flow · commit 232957f084dd · 2017-09-11T16:25:21.000+02:00
This aligns with the behavior of Gecko/WebKit/Chromium; EdgeHTML treats explicit undefined like false. Fixes w3c#1367. Also change defaults for ScrollIntoViewOptions. Fixes w3c#1720. Tests: web-platform-tests/wpt#6253
diff --git a/cssom-view/Overview.bs b/cssom-view/Overview.bs
@@ -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>
@@ -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;
@@ -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.
@@ -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);
@@ -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;
@@ -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:
@@ -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:
 
@@ -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:
 
@@ -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>,
+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>:
 
@@ -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.
@@ -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.
@@ -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>
@@ -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>
