Skip to content

Commit

Permalink
[css-overflow] Define scrollbar-gutter
Browse files Browse the repository at this point in the history 
Closes #92
  • Loading branch information
@frivoal
frivoal committed Jan 15, 2017
1 parent ae22e36 commit e29a8fd
Showing 1 changed file with 177 additions and 10 deletions.
187 changes: 177 additions & 10 deletions css-overflow/Overview.bs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -478,17 +478,184 @@ Introduction</h2>
(including propagation of 'direction' to the ICB).
</p>

<h2 id="scollbar-gutter-property">
Reserving space for the scrollbar: the 'scrollbar-gutter' property</h2>

The space between the inner border edge and the outer padding edge
which user agents may reserve to display the scrollbar
is called the <dfn>scrollbar gutter</dfn>.

The 'scrollbar-gutter' property gives control to the author
over the presence of <a>scrollbar gutters</a>
separately from the ability to control the presence of scrollbars
provided by the 'overflow' property.

<pre class="propdef">
Name: scrollbar-gutter
Value: ''auto'' | [ ''stable'' | ''always'' ] && ''both''? && ''force''?
Initial: auto
Inherited: yes
Computed value: specified value
</pre>

<p class="issue">
[[CSS3-MARQUEE]] describes an 'overflow-style' property,
but it has not picked up implementation experience
that the working group is aware of.
Should this document treat 'overflow-style' as a defunct proposal,
or should this document describe the 'overflow-style' property
and attempt to revive it,
despite that implementations have implemented
'overflow-x' and 'overflow-y' instead?
</p>
This property affects the presence of <a>scrollbar gutters</a>
placed at the <a>inline start</a> edge or <a>inline end</a> edge of the box.

The presence of a <a>scrollbar gutter</a>
at the <a>block start</a> edge and <a>block end</a> edge of the box
cannot be controlled in this level,
and is determined the same way as the presence of <a>scrollbar gutters</a>
placed at the <a>inline start</a> edge or <a>inline end</a> edge of the box
when 'scrollbar-gutter' is ''scrollbar-gutter/auto''.

Scrollbars which by default are placed over the content box
and do not cause <a>scrollbar gutters</a> to be created
are called <dfn>overlay scrollbars</dfn>.
Such scrollbars are usually partially transparent, revealing the content behind them if any.
Their appearance and size may vary
based on whether and how the user is interacting with them.

Scrollbars which are always placed in a <a>scrollbar gutter</a>,
consuming space when present,
are called <dfn>classic scrollbars</dfn>.
Such scrollbars are usually opaque.

Whether <a>classic scrollbars</a> or <a>overlay scrollbars</a> are used is UA defined.

The appearance and size of the scrollbar is UA defined.

Whether scrollbars appear on the start or end edge of the box is UA defined.

For <a>classic scrollbars</a>,
the width of the <a>scrollbar gutter</a> is the same as the width of the scrollbar.
For <a>overlay scrollbars</a>,
the width of the <a>scrollbar gutter</a> is UA defined.
However, it must not be 0,
and it must not change based on user interactions with the page or the scrollbar
even if the scrollbar itself changes.
Also, it must be the same for all elements in the page.

The values of this property have the following meaning:

<dl dfn-for="scrollbar-gutter">
<dt><dfn>''scrollbar-gutter/auto''</dfn>
<dd><a>Classic scrollbars</a> consume space by creating a <a>scrollbar gutter</a>
when 'overflow' is ''overflow/scroll',
or when 'overflow' is ''overflow/auto'' and the box is overflowing.
<a>Overlay scrollbars</a> do not consume space.
<dt><dfn>''stable''</dfn>
<dd>The <a>scrollbar gutter</a> is present when
'overflow' is ''overflow/scroll'' or ''overflow/auto''
and the scrollbar is a <a>classic scrollbar</a>
even if the box is not overflowing,
but not when the scrollbar is an <a>overlay scrollbar</a>.
<dt><dfn>''always''</dfn>
<dd>The <a>scrollbar gutter</a> is always present when
'overflow' is ''overflow/scroll'' or ''overflow/auto'',
regardless of the type of scrollbar or
of whether the box is overflowing.
<dt><dfn>''both''</dfn>
<dd>If a <a>scrollbar gutter</a> would be present
on one of the inline start edge or the inline end edge of the box,
another <a>scrollbar gutter</a> must be present on the opposite edge as well.
<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>.
</dl>
When the <a>scrollbar gutter</a> is present but the scrollbar is not,
or the scrollbar is transparent or otherwise does not fully obscure the <a>scrollbar gutter</a>,
the background of the <a>scrollbar gutter</a> must be painted as an extension of the padding.
<div class=note>
Note: The following table summarises the interaction of 'overflow' and 'scrollbar-gutter',
showing in which case space is reserved for the <a>scrollbar gutter</a>.
In this table, “G” represents cases where space is reserved for the <a>scrollbar gutter</a>,
“f?” cases where space is reserved for the <a>scrollbar gutter</a>
if ''scrollbar-gutter/force'' was specified,
and empty cells cases where the no space is reserved.
<table class=data>
<thead>
<tr>
<td>
<td>
<th colspan=2>Classic scrollbars
<th colspan=2>Overlay scrollbars
<tr>
<th>'overflow'
<th>'scrollbar-gutter'
<th>Overflowing
<th>Not overflowing
<th>Overflowing
<th>Not overflowing
</thead>
<tr>
<th rowspan=3>'overflow/scroll'
<th>''scrollbar-gutter/auto''
<td>G
<td>G
<td>
<td>
<tr>
<th>''scrollbar-gutter/stable''
<td>G
<td>G
<td>
<td>
<tr>
<th>''scrollbar-gutter/always''
<td>G
<td>G
<td>G
<td>G
<tr>
<th rowspan=3>''overflow/auto''
<th>''scrollbar-gutter/auto''
<td>G
<td>
<td>
<td>
<tr>
<th>''scrollbar-gutter/stable''
<td>G
<td>G
<td>
<td>
<tr>
<th>''scrollbar-gutter/always''
<td>G
<td>G
<td>G
<td>G
<tr>
<th rowspan=3>''overflow/visible'', ''overflow/hidden'', ''overflow/clip''
<th>''scrollbar-gutter/auto''
<td>
<td>
<td>
<td>
<tr>
<th>''scrollbar-gutter/stable''
<td>f?
<td>f?
<td>
<td>
<tr>
<th>''scrollbar-gutter/always''
<td>f?
<td>f?
<td>f?
<td>f?
</table>
</div>
<h2 id="fragmentation">Fragmentation of overflow</h2>
Expand Down

0 comments on commit e29a8fd

Please sign in to comment.