[css-overflow-5] Define ::scroll-button(). #10722

Author: tabatkins

css-overflow-5/Overview.bs

@@ -339,6 +339,99 @@ The 'scroll-marker-group' property</h4>
 	the next tabindex-ordered focus navigation will focus the [=scroll target=] if it is focusable,
 	otherwise, it will find the next focusable element from this <var>element</var> as though it were focused.
 
+<h2 id="scroll-buttons">
+Scroll Buttons</h2>
+
+The <dfn>::scroll-button( <<scroll-button-direction>> )</dfn> pseudo-elements
+are generated on [=scroll containers=]
+when their computed 'content' value is not ''content/none''.
+They generate boxes as if they were immediate children
+of their [=originating element=],
+with content as specified by 'content'.
+They exist after their [=originating element's=] ''::scroll-marker-group'' pseudo-element
+(when used with ''scroll-marker-group: before'')
+and before its ''::before'' pseudo-element,
+if those exist.
+
+Four distinct ''::scroll-button()'' pseudo-elements can exist on a [=scroll container=],
+each associated with a [=logical=] direction,
+based on their [=originating element's=] [=writing mode=]:
+in order, [=block-start=], [=inline-start=], [=block-end=], and [=inline-end=].
+The ''::scroll-button()'' pseudo-elements are both focusable and activatable by default,
+with their activation behavior being to scroll their [=originating element=]
+by one "page" in their associated direction,
+similar to pressing PgUp/PgDn keys.
+<span class=note>(Usually, this will be about 85% of the [=scrollport=] size.)</span>
+Like those keys, this scroll has an [=intended direction and end position=].
+
+Issue: [[CSSOM-VIEW-1]] will grow a "scroll by pages" algorithm,
+at which point this can reference that.
+See <a href="https://github.com/w3c/csswg-drafts/issues/10914#issuecomment-2380139977">
+the resolution on issue #10914</a>.
+
+Issue: Is this the best order for the buttons? 
+This does match the usual ordering of logical directions in CSS,
+but similar buttons created manually
+are usually either ordered with verticals and horizontals each grouped together
+(aka block-start/block-end then inline-start/inline-end)
+or the verticals "around" the horizontals
+(aka block-start/inline-start/inline-end/block-end).
+
+The four ''::scroll-button()'' pseudo-elements are individually selected 
+by the selector's argument.
+The possible <dfn><<scroll-button-direction>></dfn> values are:
+
+<dl dfn-type=value for="<scroll-button-direction>, ::scroll-button()">
+	: <dfn>up</dfn>
+	: <dfn>down</dfn>
+	: <dfn>left</dfn>
+	: <dfn>right</dfn>
+	:: Selects the ''::scroll-button()' corresponding to the given physical direction.
+
+	: <dfn>block-start</dfn>
+	: <dfn>block-end</dfn>
+	: <dfn>inline-start</dfn>
+	: <dfn>inline-end</dfn>
+	:: Selects the indicated ''::scroll-button()'' pseudo-element.
+
+	: <dfn>prev</dfn>
+	::
+		Selects either the [=block-start=] or [=inline-start=] ''::scroll-button()'',
+		whichever's axis has more "scrollable pages" in the [=originating element=]:
+		the [=originating element's=] [=scrollable overflow height=]
+		divided by its [=scrollport=] height,
+		or the same but for widths.
+
+		If both dimensions are equally sized,
+		selects the [=block-start=] ''::scroll-button()''.
+
+		<p class=example>
+			For example, say the [=originating element=]
+			was 800px wide and 500px tall,
+			while its [=scrollable overflow area=]
+			was 1200px wide and 1000px tall.
+			The horizontal scrolling thus represents 1.5 "pages" (1200/800),
+			while the vertical scrolling represents 2 "pages" (1000/500),
+			so (assuming the element is in English)
+			the ''::scroll-button(prev)'' selector
+			would select the [=block-start=] button.
+
+	: <dfn>next</dfn>
+	:: Identical to ''::scroll-button()/prev'',
+		except it selects the [=block-end=] or [=inline-end=] ''::scroll-button()'' instead.
+</dl>
+
+Issue: Do we want to add some multi-button keywords 
+to make it easier to style several buttons the same way?
+In particular, <css>all</css> is probably useful,
+but maybe also <css>horizontal</css>/<css>vertical</css>/<css>block</css>/<css>inline</css>.
+
+The ''::scroll-button()''s are [=fully stylable pseudo-elements=]: there is no restriction on what properties apply to them.
+
+Issue: The UA stylesheet needs to specify that ''::scroll-button()''s
+are styled identically to the <{button}> element.
+
+
 <h2 id="fragmentation" class=no-num>
 Appendix A: Redirection of Overflow</h2>