[css-overflow-4] Drop scrollbar-gutter: force

Closes #9815

Author: frivoal

css-overflow-4/Overview.bs

@@ -1847,7 +1847,6 @@ but non-experimental implementation is not recommended.
 
 	<div class=example>
 		This example exercises all the additional values of the 'scrollbar-gutter' property:
-		* ''scrollbar-gutter: always force'' on the header/toolbar
 		* ''scrollbar-gutter: always'' on the scroll container
 		* ''scrollbar-gutter: match-parent'' on each row inside the scroll container
 
@@ -1863,7 +1862,7 @@ but non-experimental implementation is not recommended.
 
 <pre class="propdef partial">
 Name: scrollbar-gutter
-New Values: auto | [ [ stable | always ] && both-edges? && force? ] || match-parent
+New Values: auto | [ [ stable | always ] && both-edges? ] || match-parent
 Applies to: all elements
 </pre>
 
@@ -1977,92 +1976,6 @@ The new values of this property have the following meaning:
 		and using <code>scrollbar-avoid: self</code> or <code>scrollbar-avoid: content</code> on the relevant children.
 	</div>
 
-	<dt><dfn>force</dfn>
-	<dd>
-	When the ''scrollbar-gutter/force'' keyword is present
-	''scrollbar-gutter/stable'' and ''scrollbar-gutter/always'' take effect
-	when 'overflow' is ''overflow/visible'', ''overflow/hidden'' or ''overflow/clip''
-	in addition ''overflow/auto'' or ''overflow/scroll''.
-	This does not cause a scrollbar to be displayed, only a <a>scrollbar gutter</a>.
-
-	<div class=example>
-		This value enables authors to reserve
-		the same amount of space on the edges of an element that is adjacent to a scroller
-		as is being reserved in the scroller itself,
-		so that their content would visually line up.
-		The same effect could be achieved by adding padding for classic scrollbars and none for overlay scrollbars,
-		but without this there is no reliable way for authors to know if they should be adding that padding,
-		and if so how much.
-
-		A concrete example can be seen (at the time of writing) in the UI of Gmail:
-		it attempts, not always successfully,
-		to line up the controls in the toolbar above the list of mails with those in the list of mails.
-		Here are two screenshots,
-		one with classic scrollbars turned on (at the OS level),
-		where Gmail correctly guesses how much padding it should be adding to the toolbar above the list,
-		and one with overlay scrollbars turned on,
-		where Gmail incorrectly adds padding,
-		throwing things out of alignment
-		(orange dotted line added manually to highlight the point under discussion).
-
-		<figure>
-			<figcaption>The Gmail UI with classic scrollbars</figcaption>
-			<img srcset="images/gmail-classic.png 2x"
-			alt="
-				Icons in and out of the scroller are properly aligned:
-				those in the scroller are shifted left from the right edge of their container due to the scrollbar
-				while those outside of it are shifted left by the same amount through padding.">
-		</figure>
-
-		<figure>
-			<figcaption>The Gmail UI with overlay scrollbars</figcaption>
-			<img srcset="images/gmail-overlay.png 2x"
-			alt="
-				Icons in and out of the scroller are not aligned:
-				those in the scroller are flush to the right edge of the container
-				while those outside of it are shifted left due to unnecessary padding.">
-		</figure>
-
-		Creating this spacing in the toolbar
-		using ''scrollbar-gutter: stable force'' rather than padding
-		would keep icons in alignment in both cases,
-		as well as on systems where the scrollbar has an atypical size.
-	</div>
-
-	Issue: It is because of this value that the property has been be made to apply to all elements,
-	rather than merely to [=scroll containers=],
-	so that it can apply to ''overflow: visible'' elements as shown in the example.
-	This could pause implementations difficulties,
-	as user agents cannot just rely on existing code to place the gutter,
-	since they may have to do so on elements which previously could not have one.
-	Restricting it to all elements where 'overflow' applies
-	would probably have no negative effect on use cases
-	and could make implementation easier;
-	however, even that may still be more difficult
-	that limiting it to [=scroll containers=].
-
-	Issue: In addition to the implementation challenges mentioned above,
-	it is not clear that this value solves the problem as reliably as it intends to.
-	As the size and side of the scrollbar and its gutter are UA defined,
-	they may vary between different elements.
-	Since the appearance and position of scrollbars are up to the user agent,
-	there is no limit to the list of properties that might influence them.
-	It is probable that setting properties such as 'direction' (via setting the HTML <a for=HTMLElement attribute>dir</a> attribute)
-	or 'scrollbar-width'
-	could give enough context to the user agent to know how it would create a scrollbar on that element
-	if it were scrollable,
-	and therefore to create a gutter of the same size at the right place,
-	but it cannot be guaranteed.
-
-	Issue: In early iterations of the specification,
-	this value was the only way to achieve the effect described in the example.
-	However, since then, ''scrollbar-gutter: stable'' has been made to apply to ''overflow: hidden'' elements.
-	While applying ''overflow: hidden'' has other effects which may be undesirable in that context,
-	the combination of ''scrollbar-gutter: stable'' and ''overflow: hidden''
-	does add spacing in the same way as ''scrollbar-gutter: stable force'',
-	and may prove to be a sufficient workaround,
-	particularly considering the other issues described above.
-
 	<dt><dfn>match-parent</dfn>
 	<dd>
 	On a [=block-level=] box whose parent has a [=scrollbar gutter=] (or gutters on both edges),
@@ -2231,6 +2144,8 @@ Recent Changes</h3>
 			(<a href="https://github.com/w3c/csswg-drafts/issues/7245">Issue 7245</a>)
 		<li>Change the 'line-clamp' shorthand syntax to allow omitting the 'max-lines' value
 			(<a href="https://github.com/w3c/csswg-drafts/issues/9368">Issue 9368</a>)
+		<li>Dropped the tentative <code>force</code> value for the 'scrollbar-gutter' property.
+			(<a href="https://github.com/w3c/csswg-drafts/issues/9815">Issue 9815</a>)
 	</ul>
 
 <h3 id="changes-l3">