1.1 --- a/css-overflow/Overview.bs Mon May 22 17:33:36 2017 +0900
1.2 +++ b/css-overflow/Overview.bs Mon May 22 18:25:40 2017 +0900
1.3 @@ -11,23 +11,11 @@
1.4 Editor: L. David Baron, Mozilla https://www.mozilla.org/, https://dbaron.org/
1.5 Editor: Florian Rivoal, On behalf of Bloomberg, http://florian.rivoal.net/
1.6 Abstract: This module contains the features of CSS relating to new mechanisms of overflow handling in visual media (e.g., screen or paper). In interactive media, it describes features that allow the overflow from a fixed size container to be handled by pagination (displaying one page at a time). It also describes features, applying to all visual media, that allow the contents of an element to be spread across multiple fragments, allowing the contents to flow across multiple regions or to have different styles for different fragments.
1.7 -!Change Log: <a href="https://hg.csswg.org/drafts/log/tip/css-overflow/Overview.bs">from 27 January 2015 to the present</a>
1.8 -!Change Log: <a href="https://hg.csswg.org/drafts/log/tip/css-overflow/Overview.src.html">from 28 March 2013 to 27 January 2015</a>
1.9 -!Change Log: <a href="https://hg.csswg.org/drafts/log/tip/css3-overflow/Overview.src.html">from 31 July 2012 to 27 March 2013</a>
1.10 -Ignored Terms: display-inside, display-outside
1.11 </pre>
1.12 -<!-- FIXME: Regressions from bikeshed conversion: -->
1.13 -<!-- - Value lines in propdef tables no longer link to #values. -->
1.14 -<!-- - no longer says "Test suite: none yet" -->
1.15 -<!-- - Abstract has the most introductory sentence last -->
1.16 -<!-- FIXME: other bikeshed issues -->
1.17 <pre class="link-defaults">
1.18 -spec:css-transforms-1; type:property; text:transform-style
1.19 type: dfn; spec:css-multicol-1; text:overflow column
1.20 </pre>
1.21 -<!-- FIXME: the break-* link doesn't actually work! -->
1.22 <pre class="anchors">
1.23 -url: https://www.w3.org/TR/2008/CR-css3-marquee-20081205/#the-overflow-style; type: property; text: overflow-style;
1.24 url: https://drafts.csswg.org/selectors-3/#subject; type: dfn; text: subject;
1.25 </pre>
1.26 <style>
1.27 @@ -129,12 +117,17 @@
1.28 }
1.29 </style>
1.30
1.31 - <p>
1.32 - </p>
1.33 -
1.34 <h2 id="intro">
1.35 Introduction</h2>
1.36
1.37 +Note: At the time of writing, [[CSS-OVERFLOW-3]] is not completely finalized yet.
1.38 +To avoid accidental divergences and maintenance overhead,
1.39 +This specification is written as a delta specification over css-overflow Level 3.
1.40 +Once the level 3 specification is final,
1.41 +its content will be integrated into this specification,
1.42 +which will then replace it.
1.43 +Until then, this specification only contains additions and extensions to level 3.
1.44 +
1.45 <p>
1.46 In CSS Level 1 [[CSS1]], placing more content than would fit
1.47 inside an element with a specified size
1.48 @@ -153,6 +146,7 @@
1.49 that overflow is handled by clipping,
1.50 which makes sense when the author's intent
1.51 is that the content not be shown.
1.52 + This was further refined in the CSS Overflow Module Level 3 [[CSS-OVERFLOW-3]].
1.53 </p>
1.54
1.55 <p>
1.56 @@ -191,292 +185,13 @@
1.57
1.58 <h2 id="overflow-concepts">Types of overflow</h2>
1.59
1.60 - <p>
1.61 - CSS uses the term <dfn>overflow</dfn> to describe
1.62 - the contents of a box
1.63 - that extend outside that one of that box's edges
1.64 - (i.e., its <i>content edge</i>, <i>padding edge</i>,
1.65 - <i>border edge</i>, or <i>margin edge</i>).
1.66 - The overflow might be described as the elements or features
1.67 - that cause this overflow,
1.68 - the non-rectangular region occupied by these features,
1.69 - or, more commonly,
1.70 - as the minimal rectangle that bounds that region.
1.71 - A box's overflow is computed based on the boxes and styles
1.72 - of the box and of all its descendants whose containing block chain
1.73 - <span class="issue">undefined term?</span>
1.74 - includes the box.
1.75 - </p>
1.76 + Issue: copy level 3 content when final
1.77
1.78 - <p>
1.79 - In most cases, any of these types of overflow
1.80 - can be computed for any box
1.81 - from the bounds and properties of that box,
1.82 - and from the overflow (of that type)
1.83 - of each of its children.
1.84 - However, this is not always the case; for example,
1.85 - when ''transform-style: preserve-3d'' [[CSS3-TRANSFORMS]] is used on
1.86 - some of the children, their descendants with
1.87 - ''transform-style: preserve-3d'' must also be examined.
1.88 - </p>
1.89 -
1.90 -<h3 id="ink-overflow">Ink overflow</h3>
1.91 -
1.92 - <p>
1.93 - The <dfn id="ink-overflow0">ink overflow</dfn> of a box
1.94 - is the part of that box and its contents that
1.95 - creates a visual effect outside of
1.96 - the box's border box.
1.97 - </p>
1.98 -
1.99 - <p>
1.100 - Since some effects in CSS (for example, the blurs in
1.101 - 'text-shadow' [[CSS3TEXT]] and 'box-shadow' [[CSS3BG]])
1.102 - do not define what visual extent they cover, the extent
1.103 - of the <a>ink overflow</a> is undefined.
1.104 - </p>
1.105 -
1.106 - <p class="issue">
1.107 - Should we try to define it at all and just leave pieces undefined?
1.108 - </p>
1.109 -
1.110 - <p>
1.111 - The <dfn>ink overflow region</dfn> is the non-rectangular region
1.112 - occupied by the <a>ink overflow</a>, and the
1.113 - <dfn>ink overflow rectangle</dfn> is
1.114 - the minimal rectangle whose axis is aligned to the box's axes
1.115 - and contains the <a>ink overflow region</a>.
1.116 - Note that the <a>ink overflow rectangle</a> is a rectangle
1.117 - in the box's coordinate system, but might be non-rectangular
1.118 - in other coordinate systems due to transforms [[CSS3-TRANSFORMS]].
1.119 - </p>
1.120 -
1.121 -<h3 id="scrollable-overflow">Scrollable overflow</h3>
1.122 -
1.123 - <p>
1.124 - The <dfn id="scrollable-overflow0">scrollable overflow</dfn> of a box is the
1.125 - set of things extending outside of that box's padding edge
1.126 - for which a scrolling mechanism needs to be provided.
1.127 - </p>
1.128 -
1.129 - <p class="issue">
1.130 - The following definition should be rewritten to use
1.131 - the concept of <a href="https://drafts.csswg.org/css-transforms/#3d-rendering-context">3D rendering context</a> [[!CSS3-TRANSFORMS]]
1.132 - and related terms,
1.133 - particularly once those concepts stabilize following changes
1.134 - proposed in the CSS WG meeting on the morning of 2014-01-28.
1.135 - </p>
1.136 -
1.137 - <p>
1.138 - Given the following definitions
1.139 - <span class="issue">which belong in [[CSS3-TRANSFORMS]]</span>:
1.140 - </p>
1.141 -
1.142 - <dl>
1.143 - <dt><dfn>3d-preserving child</dfn></dt>
1.144 - <dd>
1.145 - A child box B of a containing block C is a 3d-preserving
1.146 - child if it has ''transform-style: preserve-3d''
1.147 - and the user-agent is not required to flatten it
1.148 - based on the <a href="https://www.w3.org/TR/css3-transforms/#transform-style-property">requirements</a> in [[!CSS3-TRANSFORMS]].
1.149 - </dt>
1.150 - <dt><dfn>non-3d-preserving child</dfn></dt>
1.151 - <dd>
1.152 - A child C of a box P is a non-3d-preserving-child if
1.153 - it is not a <a>3d-preserving child</a>.
1.154 - </dd>
1.155 - <dt><dfn>3d-preserving descendant</dfn></dt>
1.156 - <dd>
1.157 - Box D is a 3d-preserving descendant of box A if A is
1.158 - an ancestor of D, and D and all of the boxes (if any)
1.159 - in the containing block chain from D to A
1.160 - are <a>3d-preserving child</a> boxes.
1.161 - </dd>
1.162 - </dl>
1.163 -
1.164 - <p>The scrollable overflow of a box is the union of the following things,
1.165 - all adjusted for transforms <span class="issue">undefined concept!</span> into the box's coordinate space:</p>
1.166 -
1.167 - <ul>
1.168 - <li>
1.169 - for the box and all of its <a>3d-preserving descendant</a> boxes:
1.170 - <ul>
1.171 - <li>the box's own padding edge (for the box itself) or border edge (for <a>3d-preserving descendant</a> boxes)</li>
1.172 - <li>the bounds <span class="issue">undefined term!</span> of any text directly in the box</li>
1.173 - <li><span class="issue">MORE HERE!</span>
1.174 - </ul>
1.175 - <li>
1.176 - for all the <a>non-3d-preserving child</a> boxes of the
1.177 - box and its <a>3d-preserving descendant</a> boxes,
1.178 - the scrollable overflow of the box
1.179 - </li>
1.180 - </ul>
1.181 -
1.182 - <p class="issue">
1.183 - I wrote this definition off the top of my head,
1.184 - so it can't possibly be right.
1.185 - It's missing tons of pieces!
1.186 - </p>
1.187 -
1.188 - <p class="issue">
1.189 - The handling of preserve-3d subtrees here is probably wrong;
1.190 - the elements should probably count
1.191 - only towards the overflow of the element that flattens them.
1.192 - </p>
1.193 -
1.194 - <p>
1.195 - The <dfn>scrollable overflow region</dfn> is the non-rectangular region
1.196 - occupied by the <a>scrollable overflow</a>, and the
1.197 - <dfn>scrollable overflow rectangle</dfn> is
1.198 - the minimal rectangle whose axis is aligned to the box's axes
1.199 - and contains the <a>scrollable overflow region</a>.
1.200 - Note that the <a>scrollable overflow rectangle</a> is a rectangle
1.201 - in the box's coordinate system, but might be non-rectangular
1.202 - in other coordinate systems due to transforms [[CSS3-TRANSFORMS]].
1.203 - </p>
1.204
1.205 <h2 id="overflow-properties">Overflow properties</h2>
1.206
1.207 - <p>
1.208 - The 'overflow-x' property specifies
1.209 - the handling of overflow in the horizontal direction
1.210 - (i.e., overflow from the left and right sides of the box),
1.211 - and the 'overflow-y' property specifies the handling
1.212 - of overflow in the vertical direction
1.213 - (i.e., overflow from the top and bottom sides of the box)
1.214 - </p>
1.215 + Issue: copy level 3 content when final
1.216
1.217 - <pre class=propdef>
1.218 - Name: overflow-x, overflow-y
1.219 - Value: ''visible'' | ''hidden'' | ''clip'' | ''scroll'' | ''auto''
1.220 - Initial: ''visible''
1.221 - Applies to: block containers [[!CSS21]], flex containers [[!CSS3-FLEXBOX]], and grid containers [[!CSS3-GRID-LAYOUT]]
1.222 - Inherited: no
1.223 - Percentages: N/A
1.224 - Media: visual
1.225 - Computed value: see below
1.226 - Animatable: no
1.227 - Canonical order: <abbr title="follows order of property value definition">per grammar</abbr>
1.228 - </pre>
1.229 -
1.230 - <p>
1.231 - The 'overflow' property is a shorthand property
1.232 - that sets the specified values of both 'overflow-x' and 'overflow-y'
1.233 - to the value specified for 'overflow'.
1.234 - </p>
1.235 -
1.236 - <pre class=propdef>
1.237 - Name: overflow
1.238 - Value: ''visible'' | ''hidden'' | ''clip'' | ''scroll'' | ''auto''
1.239 - Initial: see individual properties
1.240 - Applies to: block containers [[!CSS21]], flex containers [[!CSS3-FLEXBOX]], and grid containers [[!CSS3-GRID-LAYOUT]]
1.241 - Inherited: no
1.242 - Percentages: N/A
1.243 - Media: visual
1.244 - Computed value: see individual properties
1.245 - Animatable: no
1.246 - Canonical order: <abbr title="follows order of property value definition">per grammar</abbr>
1.247 - </pre>
1.248 -
1.249 - <div id="overflow-computed-values">
1.250 - <p>The computed values of 'overflow-x' and 'overflow-y'
1.251 - are determined from the cascaded values [[!CSS3CASCADE]]
1.252 - based on the following rules:</p>
1.253 -
1.254 - <ol>
1.255 - <li>
1.256 - If one cascaded values is ''overflow/visible''
1.257 - and the other is not,
1.258 - then computed values are the cascaded values
1.259 - with ''overflow/visible'' changed to ''overflow/auto''.
1.260 - </li>
1.261 - <li>
1.262 - Otherwise, the computed values are as specified.
1.263 - </li>
1.264 - </ol>
1.265 - </div>
1.266 -
1.267 - <p>The values of these properties are:</p>
1.268 -
1.269 - <dl dfn-for="overflow, overflow-x, overflow-y" dfn-type="value">
1.270 - <dt><dfn>visible</dfn>
1.271 - <dd>
1.272 - There is no special handling of overflow, that is, it
1.273 - may be rendered outside the block container.
1.274 - </dd>
1.275 - <dt><dfn>hidden</dfn>
1.276 - <dd>
1.277 - This value indicates that
1.278 - the box’s content is clipped to its padding box
1.279 - and that the UA must not provide any scrolling user interface
1.280 - to view the content outside the clipping region,
1.281 - nor allow scrolling by direct intervention of the user,
1.282 - such as dragging on a touch screen
1.283 - or using the scrolling wheel on a mouse.
1.284 - However, the content must still be scrollable programatically,
1.285 - for example using the mechanisms defined in [[CSSOM-VIEW]],
1.286 - and the box is therefore still a <a>scroll container</a>.
1.287 -
1.288 - <dt><dfn>clip</dfn>
1.289 - <dd>Like ''hidden'',
1.290 - this value indicates that
1.291 - the content is clipped
1.292 - and that no scrolling user interface should be provided by the UA
1.293 - to view the content outside the clipping region.
1.294 - In addition, unlike ''overflow: hidden''
1.295 - which still allows programmatic scrolling,
1.296 - ''overflow: clip'' forbids scrolling entirely,
1.297 - through any mechanism.
1.298 -
1.299 - Issue: Mozilla implements -moz-hidden-unscrollable,
1.300 - which is similar to ''clip'',
1.301 - except that it does not cause the element to establish a BFC.
1.302 - Should we match that?
1.303 - <dt><dfn>scroll</dfn>
1.304 - <dd>This value indicates that the content is clipped
1.305 - and that if the user agent uses a scrolling mechanism
1.306 - that is visible on the screen (such as a scroll bar or a panner),
1.307 - that mechanism should be displayed for a box
1.308 - whether or not any of its content is clipped.
1.309 - This avoids any problem with scrollbars appearing
1.310 - and disappearing in a dynamic environment.
1.311 - When this value is specified and the target medium is ''print'',
1.312 - overflowing content may be printed.
1.313 - <dt><dfn>auto</dfn>
1.314 - <dd>The behavior of the ''overflow/auto'' value is user agent-dependent,
1.315 - but should cause a scrolling mechanism to be provided for overflowing boxes.
1.316 - </dl>
1.317 -
1.318 - Even if 'overflow' is set to ''overflow/visible'',
1.319 - content may be clipped to a UA's document window by the native operating environment.
1.320 -
1.321 - If the computed value of 'overflow' is not ''overflow/visible'',
1.322 - the element creates a block formatting context.
1.323 -
1.324 - UAs must apply the 'overflow' property
1.325 - set on the root element to the viewport.
1.326 - HTML UAs must instead apply the ‘overflow’ property
1.327 - from the <{body}> element to the viewport
1.328 - if the value on the root element is ''visible''.
1.329 - The ''visible'' value when used for the viewport
1.330 - must be interpreted as ''overflow/auto''.
1.331 - The element from which the value is propagated
1.332 - must have a used value for 'overflow' of ''visible''.
1.333 -
1.334 - In the case of a scrollbar being placed on an edge of the element's box,
1.335 - it should be inserted between the inner border edge
1.336 - and the outer padding edge.
1.337 - Any space taken up by the scrollbars should be
1.338 - taken out of (subtracted from the dimensions of)
1.339 - the containing block formed by the element with the scrollbars.
1.340 -
1.341 - Issue: import examples from [[CSS3-BOX]].
1.342 -
1.343 - <p class="issue">
1.344 - Explain which directions allow scrolling and which don't,
1.345 - as a function of 'direction'
1.346 - (including propagation of 'direction' to the ICB).
1.347 - </p>
1.348
1.349 <h2 id="scollbar-gutter-property">
1.350 Reserving space for the scrollbar: the 'scrollbar-gutter' property</h2>
1.351 @@ -1312,18 +1027,18 @@
1.352 </td></tr></table>
1.353 </div>
1.354
1.355 -<h2 id="static-media">Overflow in static media</h2>
1.356 +<h2 id="changes" class="no-num">
1.357 +Changes</h2>
1.358 +<h3 id="changes-l3">
1.359 +Changes Since Level 3</h3>
1.360
1.361 - <p class="issue">
1.362 - This specification should define useful behavior
1.363 - for all values of 'overflow' and 'continue'
1.364 - in static media (such as print).
1.365 - Current implementation behavior is quite poor and
1.366 - produces unexpected results when authors have not considered
1.367 - what will happen when
1.368 - the content they produce for interactive media
1.369 - is printed.
1.370 - </p>
1.371 +The following changes were made to this specification since the
1.372 +<a href="https://drafts.csswg.org/css-overflow-3/">CSS Overflow Module Level 3</a>:
1.373 +
1.374 +<ul>
1.375 + <li>The Fragmentation of overflow, Paginated overflow, and Fragment overflow sections and subsections have been removed form Level 3 and moved to Level 4.
1.376 + <li>The 'scrollbar-gutter' property has been added.
1.377 +</ul>
1.378
1.379 <h2 class=no-num id="acknowledgments">
1.380 Acknowledgments</h2>
1.381 @@ -1345,4 +1060,3 @@
1.382 Steve Zilles,
1.383 and all the rest of the
1.384 <a href="http://lists.w3.org/Archives/Public/www-style/">www-style</a> community.
1.385 - </p>
