1.1 --- a/css-overflow/Overview.bs Sun Jan 15 18:31:04 2017 +0900
1.2 +++ b/css-overflow/Overview.bs Sun Jan 15 22:18:42 2017 +0900
1.3 @@ -478,17 +478,184 @@
1.4 (including propagation of 'direction' to the ICB).
1.5 </p>
1.6
1.7 +<h2 id="scollbar-gutter-property">
1.8 +Reserving space for the scrollbar: the 'scrollbar-gutter' property</h2>
1.9
1.10 - <p class="issue">
1.11 - [[CSS3-MARQUEE]] describes an 'overflow-style' property,
1.12 - but it has not picked up implementation experience
1.13 - that the working group is aware of.
1.14 - Should this document treat 'overflow-style' as a defunct proposal,
1.15 - or should this document describe the 'overflow-style' property
1.16 - and attempt to revive it,
1.17 - despite that implementations have implemented
1.18 - 'overflow-x' and 'overflow-y' instead?
1.19 - </p>
1.20 +The space between the inner border edge and the outer padding edge
1.21 +which user agents may reserve to display the scrollbar
1.22 +is called the <dfn>scrollbar gutter</dfn>.
1.23 +
1.24 +The 'scrollbar-gutter' property gives control to the author
1.25 +over the presence of <a>scrollbar gutters</a>
1.26 +separately from the ability to control the presence of scrollbars
1.27 +provided by the 'overflow' property.
1.28 +
1.29 +<pre class="propdef">
1.30 +Name: scrollbar-gutter
1.31 +Value: ''auto'' | [ ''stable'' | ''always'' ] && ''both''? && ''force''?
1.32 +Initial: auto
1.33 +Inherited: yes
1.34 +Computed value: specified value
1.35 +</pre>
1.36 +
1.37 +This property affects the presence of <a>scrollbar gutters</a>
1.38 +placed at the <a>inline start</a> edge or <a>inline end</a> edge of the box.
1.39 +
1.40 +The presence of a <a>scrollbar gutter</a>
1.41 +at the <a>block start</a> edge and <a>block end</a> edge of the box
1.42 +cannot be controlled in this level,
1.43 +and is determined the same way as the presence of <a>scrollbar gutters</a>
1.44 +placed at the <a>inline start</a> edge or <a>inline end</a> edge of the box
1.45 +when 'scrollbar-gutter' is ''scrollbar-gutter/auto''.
1.46 +
1.47 +Scrollbars which by default are placed over the content box
1.48 +and do not cause <a>scrollbar gutters</a> to be created
1.49 +are called <dfn>overlay scrollbars</dfn>.
1.50 +Such scrollbars are usually partially transparent, revealing the content behind them if any.
1.51 +Their appearance and size may vary
1.52 +based on whether and how the user is interacting with them.
1.53 +
1.54 +Scrollbars which are always placed in a <a>scrollbar gutter</a>,
1.55 +consuming space when present,
1.56 +are called <dfn>classic scrollbars</dfn>.
1.57 +Such scrollbars are usually opaque.
1.58 +
1.59 +Whether <a>classic scrollbars</a> or <a>overlay scrollbars</a> are used is UA defined.
1.60 +
1.61 +The appearance and size of the scrollbar is UA defined.
1.62 +
1.63 +Whether scrollbars appear on the start or end edge of the box is UA defined.
1.64 +
1.65 +For <a>classic scrollbars</a>,
1.66 +the width of the <a>scrollbar gutter</a> is the same as the width of the scrollbar.
1.67 +For <a>overlay scrollbars</a>,
1.68 +the width of the <a>scrollbar gutter</a> is UA defined.
1.69 +However, it must not be 0,
1.70 +and it must not change based on user interactions with the page or the scrollbar
1.71 +even if the scrollbar itself changes.
1.72 +Also, it must be the same for all elements in the page.
1.73 +
1.74 +The values of this property have the following meaning:
1.75 +
1.76 +<dl dfn-for="scrollbar-gutter">
1.77 + <dt><dfn>''scrollbar-gutter/auto''</dfn>
1.78 + <dd><a>Classic scrollbars</a> consume space by creating a <a>scrollbar gutter</a>
1.79 + when 'overflow' is ''overflow/scroll',
1.80 + or when 'overflow' is ''overflow/auto'' and the box is overflowing.
1.81 + <a>Overlay scrollbars</a> do not consume space.
1.82 +
1.83 + <dt><dfn>''stable''</dfn>
1.84 + <dd>The <a>scrollbar gutter</a> is present when
1.85 + 'overflow' is ''overflow/scroll'' or ''overflow/auto''
1.86 + and the scrollbar is a <a>classic scrollbar</a>
1.87 + even if the box is not overflowing,
1.88 + but not when the scrollbar is an <a>overlay scrollbar</a>.
1.89 +
1.90 + <dt><dfn>''always''</dfn>
1.91 + <dd>The <a>scrollbar gutter</a> is always present when
1.92 + 'overflow' is ''overflow/scroll'' or ''overflow/auto'',
1.93 + regardless of the type of scrollbar or
1.94 + of whether the box is overflowing.
1.95 +
1.96 + <dt><dfn>''both''</dfn>
1.97 + <dd>If a <a>scrollbar gutter</a> would be present
1.98 + on one of the inline start edge or the inline end edge of the box,
1.99 + another <a>scrollbar gutter</a> must be present on the opposite edge as well.
1.100 +
1.101 + <dt><dfn>''force''</dfn>
1.102 + <dd>When the ''scrollbar-gutter/force'' keyword is present
1.103 + ''scrollbar-gutter/stable'' and ''scrollbar-gutter/always'' take effect
1.104 + when 'overflow' is ''overflow/visible'', ''overflow/hidden'' or ''overflow/clip''
1.105 + in addition ''overflow/auto'' or ''overflow/scroll''.
1.106 + This does not cause a scrollbar to be displayed, only a <a>scrollbar gutter</a>.
1.107 +</dl>
1.108 +
1.109 +When the <a>scrollbar gutter</a> is present but the scrollbar is not,
1.110 +or the scrollbar is transparent or otherwise does not fully obscure the <a>scrollbar gutter</a>,
1.111 +the background of the <a>scrollbar gutter</a> must be painted as an extension of the padding.
1.112 +
1.113 +<div class=note>
1.114 +Note: The following table summarises the interaction of 'overflow' and 'scrollbar-gutter',
1.115 +showing in which case space is reserved for the <a>scrollbar gutter</a>.
1.116 +In this table, “G†represents cases where space is reserved for the <a>scrollbar gutter</a>,
1.117 +“f?†cases where space is reserved for the <a>scrollbar gutter</a>
1.118 +if ''scrollbar-gutter/force'' was specified,
1.119 +and empty cells cases where the no space is reserved.
1.120 +
1.121 +<table class=data>
1.122 + <thead>
1.123 + <tr>
1.124 + <td>
1.125 + <td>
1.126 + <th colspan=2>Classic scrollbars
1.127 + <th colspan=2>Overlay scrollbars
1.128 + <tr>
1.129 + <th>'overflow'
1.130 + <th>'scrollbar-gutter'
1.131 + <th>Overflowing
1.132 + <th>Not overflowing
1.133 + <th>Overflowing
1.134 + <th>Not overflowing
1.135 + </thead>
1.136 + <tr>
1.137 + <th rowspan=3>'overflow/scroll'
1.138 + <th>''scrollbar-gutter/auto''
1.139 + <td>G
1.140 + <td>G
1.141 + <td>
1.142 + <td>
1.143 + <tr>
1.144 + <th>''scrollbar-gutter/stable''
1.145 + <td>G
1.146 + <td>G
1.147 + <td>
1.148 + <td>
1.149 + <tr>
1.150 + <th>''scrollbar-gutter/always''
1.151 + <td>G
1.152 + <td>G
1.153 + <td>G
1.154 + <td>G
1.155 + <tr>
1.156 + <th rowspan=3>''overflow/auto''
1.157 + <th>''scrollbar-gutter/auto''
1.158 + <td>G
1.159 + <td>
1.160 + <td>
1.161 + <td>
1.162 + <tr>
1.163 + <th>''scrollbar-gutter/stable''
1.164 + <td>G
1.165 + <td>G
1.166 + <td>
1.167 + <td>
1.168 + <tr>
1.169 + <th>''scrollbar-gutter/always''
1.170 + <td>G
1.171 + <td>G
1.172 + <td>G
1.173 + <td>G
1.174 + <tr>
1.175 + <th rowspan=3>''overflow/visible'', ''overflow/hidden'', ''overflow/clip''
1.176 + <th>''scrollbar-gutter/auto''
1.177 + <td>
1.178 + <td>
1.179 + <td>
1.180 + <td>
1.181 + <tr>
1.182 + <th>''scrollbar-gutter/stable''
1.183 + <td>f?
1.184 + <td>f?
1.185 + <td>
1.186 + <td>
1.187 + <tr>
1.188 + <th>''scrollbar-gutter/always''
1.189 + <td>f?
1.190 + <td>f?
1.191 + <td>f?
1.192 + <td>f?
1.193 +</table>
1.194 +</div>
1.195
1.196 <h2 id="fragmentation">Fragmentation of overflow</h2>
1.197
