Merge pull request w3c#3065 from upsuper/scrollbar-color

[css-scrollbar] Merge scrollbar color properties into one

Author: tantek

css-scrollbars-1/Overview.bs

@@ -50,58 +50,56 @@ Values</h3>
   also accept the <a>CSS-wide keywords</a> keywords as their property value.
   For readability they have not been repeated explicitly.
 
-<h2 id="scrollbar-color-properties">
-Scrollbar Colors: the 'scrollbar-face-color' and 'scrollbar-track-color' properties</h2>
+<h2 id="scrollbar-color">Scrollbar Colors: the 'scrollbar-color' property</h2>
 
 <pre class="propdef">
-Name: scrollbar-face-color, 
-      scrollbar-track-color
-Value: auto | <<color>>
+Name: scrollbar-color
+Value: auto | <<color>>{2}
 Initial: auto
 Inherited: yes
-Computed value: the computed color or the keyword auto
+Computed value: two computed colors or the keyword auto
 Animation type: <a href="https://www.w3.org/TR/css3-transitions/#animtype-color">color</a>
 Applies to: boxes to which 'overflow' applies
 Percentages: n/a
 </pre>
 
-These properties allow the author to set colors for various aspects of an element’s scrollbars.
+This property allows the author to set colors of an element's scrollbars.
 
-UAs must apply the scrollbar-* values set on the root element to the viewport.
+UAs must apply the scrollbar-color value set on the root element to the viewport.
 
 Note: Unlike 'overflow' (and overflow-*) properties, 
-scrollbar-* values set on the HTML body element are not propagated to the viewport.
+scrollbar-color value set on the HTML body element are not propagated to the viewport.
 
-<dl dfn-type="value" dfn-for="scrollbar-face-color">
+<dl dfn-type="value" dfn-for="scrollbar-color">
 <dt><dfn>auto</dfn></dt>
-<dd>default platform rendering for that portion of the scrollbar, in the absence of any other 
-related scrollbar color properties.
-See details below for which scrollbar color are related to which.
-</dd>
+<dd>default platform rendering for the scrollbar.</dd>
 <dt><dfn><<color>></dfn></dt>
-<dd>apply the color to that portion of the scrollbar, and potentially other portions of the scrollbar.
+<dd>
+apply the first color to the thumb of the scrollbar,
+and the second color to the track of the scrollbar.
 </dd>
 </dl>
 
 Details:
 
-If scrollbar-track-color computes to auto, and scrollbar-face-color is not auto, 
-it is used to color the scrollbar track. 
+Track refers to the background of the scrollbar,
+which is generally fixed regardless of the scrolling position.
 
-If an element has both horizontal and vertical scrollbars, and the scrollbar-face-color is not auto, 
-use it for the area in the corner between the two scrollbars.
+Thumb refers to the moving part of the scrollbar,
+which usually floats on top of the track.
 
-If the color of any part of the scrollbar is specified, 
-implementations may render a simpler scrollbar than the default platform UI rendering, and color it accordingly.
+If this property computes to value other than ''auto'',
+implementations may render a simpler scrollbar than the default platform UI rendering,
+and color it accordingly.
 
 (Note: add diagram showing the different named pieces - something like 
 <a href="http://www.howtocreate.co.uk/tutorials/scrlbar.html">http://www.howtocreate.co.uk/tutorials/scrlbar.html</a>)
 
 (Note: add example of an overflow element with colorized scrollbars to match page styling, 
 PNG of the same in a browser that supports it currently)
 
-Implementations may ignore any scrollbar color properties for scrollbar parts that do not exist 
-on the underlying platform.
+Implementations may ignore any of the colors
+if the corresponding part do not exist on the underlying platform.
 
 Note: when a user interacts with a scrollbar (e.g. hovering or activating), 
 implementations may alter which scrollbar colors apply to which scrollbar parts.
@@ -117,8 +115,7 @@ See related <a href="https://github.com/w3c/csswg-drafts/issues/1956">Issue 1956
 
     <pre><code class="css">
 <!-- -->html { 
-<!-- -->    scrollbar-face-color: ThreeDFace;
-<!-- -->    scrollbar-track-color: Scrollbar;
+<!-- -->    scrollbar-color: ThreeDFace Scrollbar;
 <!-- -->}</code></pre>
   </div>