css-overflow-3/Overview.bs

Sat, 14 Jan 2017 00:10:44 -0800

author
Florian Rivoal <[email protected]>
date
Sat, 14 Jan 2017 00:10:44 -0800
changeset 18674
dc1f0ffba654
parent 18362
654f466cd649
child 19333
f237c1a2c6aa
permissions
-rw-r--r--

Update personal info

dbaron@15115 1 <h1>CSS Overflow Module Level 3</h1>
dbaron@15115 2 <pre class="metadata">
dbaron@15115 3 Status: ED
dbaron@17794 4 Work Status: Revising
peter@16986 5 ED: https://drafts.csswg.org/css-overflow/
dbaron@15115 6 Shortname: css-overflow
dbaron@15115 7 Group: csswg
jackalmage@15315 8 Level: 3
peter@16989 9 TR: https://www.w3.org/TR/css-overflow-3/
dbaron@17794 10 Previous version: https://www.w3.org/TR/2016/WD-css-overflow-3-20160531/
peter@16989 11 Previous version: https://www.w3.org/TR/2013/WD-css-overflow-3-20130418/
dbaron@18303 12 Editor: L. David Baron, Mozilla https://www.mozilla.org/, https://dbaron.org/
git@18674 13 Editor: Florian Rivoal, On behalf of Bloomberg, http://florian.rivoal.net/
jackalmage@16933 14 Abstract: This module contains the features of CSS relating to scrollable overflow handling in visual media.
dbaron@15125 15 !Change Log: <a href="https://hg.csswg.org/drafts/log/tip/css-overflow/Overview.bs">from 27 January 2015 to the present</a>
dbaron@15125 16 !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>
dbaron@15125 17 !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>
fantasai@16936 18 Ignored Vars: B, P
fantasai@16944 19 Ignored Terms: padding edge
fantasai@17776 20 Status Text: <strong>This update trims away most of the experimental new ideas
fantasai@17776 21 for handling overflow that were described in the <a href="https://www.w3.org/TR/2013/WD-css-overflow-3-20130418/">previous Working Draft</a>.
fantasai@17776 22 These ideas are not abandoned; they are merely <a href="https://drafts.csswg.org/css-overflow/">deferred until Level 4</a>.</strong>
fantasai@17776 23 Level 3 is focused solely on completing a spec for the existing, shipped 'overflow' features;
fantasai@17776 24 work will resume on fragmented overflow and other fun things once this is completed.
dbaron@15115 25 </pre>
dbaron@15118 26 <!-- FIXME: Regressions from bikeshed conversion: -->
dbaron@15118 27 <!-- - Value lines in propdef tables no longer link to #values. -->
dbaron@15118 28 <!-- - no longer says "Test suite: none yet" -->
dbaron@15118 29 <!-- - Abstract has the most introductory sentence last -->
dbaron@15181 30 <!-- FIXME: other bikeshed issues -->
dbaron@15115 31 <pre class="link-defaults">
dbaron@15115 32 spec:css-transforms-1; type:property; text:transform-style
jackalmage@15315 33 type: dfn; spec:css-multicol-1; text:overflow column
fantasai@17746 34 type: dfn; spec:css-transforms-1; text:3d rendering context
dbaron@15115 35 </pre>
dbaron@15115 36 <!-- FIXME: the break-* link doesn't actually work! -->
dbaron@15115 37 <pre class="anchors">
peter@16989 38 url: https://www.w3.org/TR/2008/CR-css3-marquee-20081205/#the-overflow-style; type: property; text: overflow-style;
dbaron@15115 39 </pre>
dbaron@6470 40
dbaron@6470 41 <h2 id="intro">
dbaron@6470 42 Introduction</h2>
dbaron@6470 43
fantasai@16937 44 In CSS Level 1 [[CSS1]], placing more content than would fit
fantasai@16937 45 inside an element with a specified size
fantasai@16937 46 was generally an authoring error.
fantasai@16937 47 Doing so caused the content to extend
fantasai@16937 48 outside the bounds of the element,
fantasai@16937 49 which would likely cause
fantasai@16937 50 that content to overlap with other elements.
dbaron@6470 51
fantasai@16937 52 CSS Level 2 [[CSS21]] introduced the 'overflow' property,
fantasai@16937 53 which allows authors to have overflow be handled by scrolling,
fantasai@16937 54 which means it is no longer an authoring error.
fantasai@16937 55 It also allows authors to specify
fantasai@16937 56 that overflow is handled by clipping,
fantasai@16937 57 which makes sense when the author's intent
fantasai@16937 58 is that the content not be shown.
dbaron@6470 59
fantasai@16937 60 This specification introduces the long-standing de-facto 'overflow-x' and 'overflow-y' properties,
fantasai@16937 61 and defines overflow handling more fully.
dbaron@6470 62
fantasai@16937 63 [Something something 'max-lines'.]
dbaron@6470 64
jackalmage@16933 65 <!--
jackalmage@16933 66 ████████ ██ ██ ████████ ████████ ██████
jackalmage@16933 67 ██ ██ ██ ██ ██ ██ ██ ██
jackalmage@16933 68 ██ ████ ██ ██ ██ ██
jackalmage@16933 69 ██ ██ ████████ ██████ ██████
jackalmage@16933 70 ██ ██ ██ ██ ██
jackalmage@16933 71 ██ ██ ██ ██ ██ ██
jackalmage@16933 72 ██ ██ ██ ████████ ██████
jackalmage@16933 73 -->
jackalmage@16932 74
fantasai@16937 75 <h2 id="overflow-concepts">
fantasai@16937 76 Types of overflow</h2>
dbaron@9850 77
fantasai@16967 78 CSS uses the term <dfn export>overflow</dfn> to describe
fantasai@16937 79 the contents of a box
fantasai@16937 80 that extend outside one of that box's edges
fantasai@16937 81 (i.e., its <i>content edge</i>, <i>padding edge</i>,
fantasai@16937 82 <i>border edge</i>, or <i>margin edge</i>).
fantasai@16937 83 The term might be interpreted as
fantasai@16937 84 elements or features that cause this overflow,
fantasai@16937 85 the non-rectangular region occupied by these features,
fantasai@16937 86 or, more commonly,
fantasai@16937 87 the minimal rectangle that bounds that region.
fantasai@16937 88 A box's overflow is computed based on the layout and styling of the box itself
fantasai@16937 89 and of all descendants whose <a>containing block chain</a>
fantasai@16937 90 includes the box.
dbaron@9850 91
fantasai@16937 92 In most cases, <a>overflow</a>
fantasai@16937 93 can be computed for any box
fantasai@16937 94 from the bounds and properties of that box itself,
fantasai@16937 95 plus the <a>overflow</a>
fantasai@16937 96 of each of its children.
fantasai@16937 97 However, this is not always the case; for example,
fantasai@16937 98 when ''transform-style: preserve-3d'' [[CSS3-TRANSFORMS]] is used on
fantasai@16937 99 some of the children, any of their descendants with
fantasai@16937 100 ''transform-style: preserve-3d'' must also be examined.
dbaron@9850 101
fantasai@17740 102 There are two different types of overflow,
fantasai@16939 103 which are used for different purposes by the UA:
fantasai@16936 104
fantasai@16936 105 <ul>
fantasai@16936 106 <li><a>ink overflow</a>
fantasai@16936 107 <li><a>scrollable overflow</a>
fantasai@16936 108 </ul>
fantasai@16936 109
jackalmage@16932 110 <h3 id="ink">Ink overflow</h3>
dbaron@9850 111
fantasai@16967 112 The <dfn export>ink overflow</dfn> of a box
fantasai@16937 113 is the part of that box and its contents that
fantasai@16937 114 creates a visual effect outside of
fantasai@16937 115 the box's border box.
fantasai@16939 116 Ink overflow is the overflow of painting effects defined to not affect layout
fantasai@16939 117 or otherwise extend the <a>scrollable overflow region</a>,
peter@16989 118 such as <a href="https://www.w3.org/TR/css-backgrounds/#box-shadow">box shadows</a>,
fantasai@16939 119 <a href="">border images</a>,
fantasai@16939 120 <a href="https://www.w3.org/TR/css-text-decor-3/">text decoration</a>,
fantasai@16939 121 overhanging glyphs (with negative side bearings,
fantasai@16939 122 or with ascenders/descenders extending outside the em box),
fantasai@16939 123 <a href="https://www.w3.org/TR/CSS2/ui.html#dynamic-outlines">outlines</a>,
fantasai@16939 124 etc.
fantasai@16939 125
fantasai@16937 126 Since some effects in CSS (for example, the blurs in
fantasai@16937 127 'text-shadow' [[CSS3TEXT]] and 'box-shadow' [[CSS3BG]])
fantasai@16937 128 do not define what visual extent they cover, the extent
fantasai@16937 129 of the <a>ink overflow</a> is undefined.
dbaron@9850 130
fantasai@16967 131 The <dfn export>ink overflow region</dfn> is the non-rectangular area
fantasai@16937 132 occupied by the <a>ink overflow</a>, and the
fantasai@16967 133 <dfn export>ink overflow rectangle</dfn> is
fantasai@16937 134 the minimal rectangle whose axis is aligned to the box's axes
fantasai@16937 135 and contains the <a>ink overflow region</a>.
fantasai@16937 136 Note that the <a>ink overflow rectangle</a> is a rectangle
fantasai@16937 137 in the box's coordinate system, but might be non-rectangular
fantasai@16937 138 in other coordinate systems due to transforms [[CSS3-TRANSFORMS]].
dbaron@9850 139
dbaron@9850 140
fantasai@16937 141 <h3 id="scrollable">
fantasai@16937 142 Scrollable overflow</h3>
fantasai@16937 143
fantasai@16967 144 The <dfn export>scrollable overflow</dfn> of a box is the
fantasai@16937 145 set of things extending outside of that box's padding edge
fantasai@16937 146 for which a scrolling mechanism needs to be provided.
dbaron@9850 147
fantasai@16967 148 The <dfn export>scrollable overflow region</dfn> is the non-rectangular region
fantasai@16940 149 occupied by the <a>scrollable overflow</a>, and the
fantasai@16967 150 <dfn export>scrollable overflow rectangle</dfn> is
fantasai@16940 151 the minimal rectangle whose axis is aligned to the box's axes
fantasai@16940 152 and contains the <a>scrollable overflow region</a>.
fantasai@16940 153
fantasai@16942 154 The <a>scrollable overflow region</a> is the union of:
fantasai@16940 155 <ul>
fantasai@17738 156 <li>
fantasai@17738 157 the box’s own content and padding areas
fantasai@17774 158
jackalmage@17785 159 <div class=issue>
jackalmage@17785 160 There's disagreement on the scrolling model.
jackalmage@17785 161 2.1 apparently defined that you scrolled the *content* area;
jackalmage@17785 162 the content would overflow the content-box,
jackalmage@17785 163 and you would union that overflow with the content box to find the scrollable area.
jackalmage@17785 164 In particular, this means that the content would be offset by the start-sides padding,
jackalmage@17785 165 but if it overflowed,
jackalmage@17785 166 it would go right to the edge on the end sides.
jackalmage@17785 167 This is what Firefox and IE do.
jackalmage@17785 168
jackalmage@17785 169 At least some authors (and spec authors)
jackalmage@17785 170 instead have the mental model that the padding box is what's scrollable,
jackalmage@17785 171 so when you scroll to the end of the overflow,
jackalmage@17785 172 there's the right/bottom padding.
jackalmage@17785 173 Chrome/WebKit do this for the block axis, at least.
jackalmage@17785 174 They're somewhat inconsistent for the inline axis;
jackalmage@17785 175 there's something weird about how they handle lineboxes.
jackalmage@17785 176
jackalmage@17785 177 It seems that the block-axis padding is probably web-compatible to honor.
jackalmage@17785 178 It's unclear that the inline-axis padding will be.
jackalmage@17785 179 Further experimentation is needed.
jackalmage@17785 180 </div>
jackalmage@17785 181
jackalmage@17785 182
fantasai@17738 183 <li>
fantasai@17738 184 all line boxes directly contained by the box
fantasai@17774 185
fantasai@17738 186 <li>
fantasai@17743 187 the border boxes
fantasai@17744 188 of all boxes for which it is the containing block,
fantasai@17744 189 accounting for transforms by projecting each box onto
fantasai@17745 190 the plane of the element that establishes its <a>3D rendering context</a>.
fantasai@17745 191 [[!CSS3-TRANSFORMS]]
fantasai@17744 192
fantasai@17744 193 Issue: Is this description of handling transforms
fantasai@17744 194 sufficiently accurate?
fantasai@16940 195
fantasai@17738 196 <li>
fantasai@17738 197 the <a>scrollable overflow regions</a> of all of the above boxes
fantasai@17744 198 (accounting for transforms as described above),
fantasai@17738 199 provided they themselves have ''overflow: visible''
fantasai@17738 200 (i.e. do not themselves trap the overflow)
fantasai@17745 201 and that <a>scrollable overflow</a> is not already clipped
fantasai@17745 202 (e.g. by the 'clip' property or the 'contain' property).
fantasai@16940 203
fantasai@17740 204 Note: The 'mask-*' properties [[!CSS-MASKING-1]]
fantasai@17740 205 do not affect the <a>scrollable overflow region</a>.
fantasai@17737 206
fantasai@17737 207 Issue: Need to evaluate compat of honoring or ignoring 'clip' and 'clip-path'.
fantasai@17774 208
fantasai@17774 209 <li>
fantasai@17774 210 Optionally,
fantasai@17774 211 additional padding on the end-edge sides,
fantasai@17774 212 corresponding to the end-side padding of the <a>scroll container</a>, such that the end edges of its in-flow content
fantasai@17774 213 coincide with the end edges of its content area
fantasai@17774 214 when scrolled to the end.
fantasai@17774 215
fantasai@17774 216 Issue: It's not yet clear if including the end-side padding in the scrollable layer is Web-compatible, so this clause is under investigation.
fantasai@17774 217 It appears that Chrome and Safari include such padding <a href="https://bug748518.bmoattachments.org/attachment.cgi?id=618078">in the block axis</a>;
fantasai@17774 218 and the behavior in the inline axis is <a href="http://jsbin.com/digadoyohi/1/edit?html,css,output">not</a> <a href="http://jsbin.com/vexahocayi/1/edit?html,css,output">clear</a>.
fantasai@17774 219
fantasai@17774 220 <!-- Make sure http://jsbin.com/qececaqilo/edit?html,css,output is clearly defined. -->
fantasai@16940 221 </ul>
fantasai@16940 222
florian@17772 223 The UA may <em>additionally</em> include
fantasai@17743 224 the margin areas of boxes for which it is the containing block.
fantasai@17743 225 The conditions under which such margin areas are included is undefined in this level.
fantasai@17747 226 <span class="issue">This needs further testing and investigation; is therefore deferred in this draft.</span>
fantasai@17743 227 <!--
fantasai@17743 228 Considerations:
fantasai@17743 229 * floats
fantasai@17743 230 * relpos
fantasai@17743 231 * margins that collapsed through to the edge of the scrollable area
fantasai@17743 232 * inline-side margins on both blocks and inlines
fantasai@17743 233 Notes:
fantasai@17743 234 The reasoning for only including border boxes is to minimize the cases
fantasai@17743 235 in which overflow scrolling is triggered; however once overflow is triggered,
fantasai@17743 236 excluding margins creates tight, uncomfortable edges
fantasai@17743 237 because the margin has been effectively truncated.
fantasai@17743 238 Testcase:
fantasai@17743 239 http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0A%3Cstyle%3E%0A%20%20div%20%7B%20height%3A%2050px%3B%20overflow%3A%20scroll%3B%20border%3A%20solid%3B%20position%3A%20relative%3B%7D%0A%20%20p%20%7B%20margin%3A%2025px%3B%20background%3A%20red%3B%20%7D%0A%20%20q%20%7B%20position%3A%20absolute%3B%20background%3A%20blue%3B%20top%3A%2025px%3B%20margin%3A%2025px%3B%20%7D%0A%3C%2Fstyle%3E%0A%3Cdiv%3E%0A%20%20%3Cp%3ETest%20%3Cq%3ETest2%0A%3C%2Fdiv%3E
fantasai@17743 240 -->
fantasai@17743 241
fantasai@17746 242 Note: The <a>scrollable overflow rectangle</a> is always a rectangle
fantasai@16940 243 in the box's own coordinate system, but might be non-rectangular
fantasai@16937 244 in other coordinate systems due to transforms [[CSS3-TRANSFORMS]].
fantasai@17746 245 This means scrollbars can sometimes appear when not actually necessary.
jackalmage@16958 246
jackalmage@16933 247 <!--
jackalmage@16933 248 ███████ ██ ██ ████████ ████████ ████████ ██ ███████ ██ ██
jackalmage@16933 249 ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
jackalmage@16933 250 ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
jackalmage@16933 251 ██ ██ ██ ██ ██████ ████████ ██████ ██ ██ ██ ██ ██ ██ ███████ █████████
jackalmage@16933 252 ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
jackalmage@16933 253 ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
jackalmage@16933 254 ███████ ███ ████████ ██ ██ ██ ████████ ███████ ███ ███
jackalmage@16933 255 -->
jackalmage@16932 256
fantasai@16936 257 <h2 id="overflow-properties">
fantasai@16936 258 Scrollable Overflow: the 'overflow-x', 'overflow-y', and 'overflow' properties</h2>
dbaron@7814 259
fantasai@16945 260 These properties specify whether a box’s content
fantasai@16945 261 (including any <a>ink overflow</a>)
fantasai@16945 262 is clipped to its padding edge,
fantasai@16945 263 and if so,
fantasai@17532 264 whether it is a <dfn export>scroll container</dfn>
fantasai@16949 265 that allows the user to scroll clipped parts of its <a>scrollable overflow region</a>
fantasai@16945 266 into view.
fantasai@17532 267 The visual viewport of the <a>scroll container</a>
fantasai@17532 268 (through which the <a>scrollable overflow region</a> can be viewed)
fantasai@17532 269 coincides with its padding box,
fantasai@17532 270 and is called the <dfn export>scrollport</dfn>.
fantasai@16945 271
dbaron@15119 272 <pre class=propdef>
dbaron@15119 273 Name: overflow-x, overflow-y
florian@15497 274 Value: ''visible'' | ''hidden'' | ''clip'' | ''scroll'' | ''auto''
dbaron@15180 275 Initial: ''visible''
dbaron@15119 276 Applies to: block containers [[!CSS21]], flex containers [[!CSS3-FLEXBOX]], and grid containers [[!CSS3-GRID-LAYOUT]]
dbaron@15119 277 Inherited: no
dbaron@15119 278 Percentages: N/A
dbaron@15119 279 Media: visual
fantasai@17773 280 Computed value: as specified, except with ''visible'' computing to ''auto'' if one of 'overflow-x' or 'overflow-y' is not ''visible''
dbaron@15119 281 Animatable: no
dbaron@15119 282 </pre>
dbaron@7811 283
fantasai@16937 284 The 'overflow-x' property specifies
fantasai@16945 285 the handling of <a>overflow</a> in the horizontal direction
fantasai@16937 286 (i.e., overflow from the left and right sides of the box),
fantasai@16937 287 and the 'overflow-y' property specifies the handling
fantasai@16945 288 of <a>overflow</a> in the vertical direction
fantasai@16941 289 (i.e., overflow from the top and bottom sides of the box).
dbaron@7814 290
dbaron@15119 291 <pre class=propdef>
dbaron@15119 292 Name: overflow
florian@15497 293 Value: ''visible'' | ''hidden'' | ''clip'' | ''scroll'' | ''auto''
dbaron@15119 294 Initial: see individual properties
dbaron@15119 295 Applies to: block containers [[!CSS21]], flex containers [[!CSS3-FLEXBOX]], and grid containers [[!CSS3-GRID-LAYOUT]]
dbaron@15119 296 Inherited: no
dbaron@15119 297 Percentages: N/A
dbaron@15119 298 Media: visual
dbaron@15119 299 Computed value: see individual properties
dbaron@15119 300 Animatable: no
dbaron@15119 301 Canonical order: <abbr title="follows order of property value definition">per grammar</abbr>
dbaron@15119 302 </pre>
dbaron@7811 303
fantasai@16937 304 The 'overflow' property is a shorthand property
fantasai@16937 305 that sets the specified values of both 'overflow-x' and 'overflow-y'
fantasai@16937 306 to the value specified for 'overflow'.
fantasai@16936 307
fantasai@16946 308 Values have the following meanings:
fantasai@16941 309
fantasai@16941 310 <dl dfn-for="overflow, overflow-x, overflow-y" dfn-type="value">
fantasai@16941 311 <dt><dfn>visible</dfn>
fantasai@16941 312 <dd>
fantasai@16941 313 There is no special handling of overflow, that is, it
fantasai@16941 314 may be rendered outside the box.
fantasai@17532 315 The box is not a <a>scroll container</a>.
fantasai@16941 316
fantasai@16941 317 <dt><dfn>hidden</dfn>
fantasai@16941 318 <dd>
fantasai@16941 319 This value indicates that
fantasai@16943 320 the box’s content is clipped to its padding box
git@18362 321 and that the UA must not provide any scrolling user interface
git@18362 322 to view the content outside the clipping region,
git@18362 323 nor allow scrolling by direct intervention of the user,
git@18362 324 such as dragging on a touch screen
git@18362 325 or using the scrolling wheel on a mouse.
git@18362 326 However, the content must still be scrollable programatically,
fantasai@16943 327 for example using the mechanisms defined in [[CSSOM-VIEW]],
fantasai@17532 328 and the box is therefore still a <a>scroll container</a>.
fantasai@16941 329
fantasai@16941 330 <dt><dfn>clip</dfn>
fantasai@16941 331 <dd>
fantasai@16941 332 Like ''hidden'',
fantasai@16941 333 this value indicates that
fantasai@16943 334 the box’s content is clipped to its padding box
fantasai@16941 335 and that no scrolling user interface should be provided by the UA
fantasai@16941 336 to view the content outside the clipping region.
fantasai@16941 337 In addition, unlike ''overflow: hidden''
fantasai@16941 338 which still allows programmatic scrolling,
fantasai@16941 339 ''overflow: clip'' forbids scrolling entirely,
fantasai@16943 340 through any mechanism,
fantasai@17532 341 and therefore the box is not a <a>scroll container</a>.
fantasai@16941 342
fantasai@16941 343 <dt><dfn>scroll</dfn>
fantasai@16941 344 <dd>
fantasai@16941 345 This value indicates that
fantasai@16943 346 the content is clipped to the padding box,
fantasai@16943 347 but can be scrolled into view
fantasai@17532 348 (and therefore the box is a <a>scroll container</a>).
fantasai@16943 349 Furthermore, if the user agent uses a scrolling mechanism
fantasai@16941 350 that is visible on the screen (such as a scroll bar or a panner),
fantasai@16941 351 that mechanism should be displayed
fantasai@16941 352 whether or not any of its content is clipped.
fantasai@16941 353 This avoids any problem with scrollbars appearing
fantasai@16941 354 and disappearing in a dynamic environment.
fantasai@16941 355 When this value is specified and the target medium is ''print'',
fantasai@16941 356 overflowing content may be printed.
fantasai@16941 357
fantasai@16941 358 <dt><dfn>auto</dfn>
fantasai@16941 359 <dd>
fantasai@16943 360 This value indicates that
fantasai@16943 361 the box’s content is clipped to the padding box,
fantasai@16946 362 but can be scrolled into view
fantasai@17532 363 (and therefore the box is a <a>scroll container</a>).
fantasai@16943 364 However, if the user agent uses a scrolling mechanism
fantasai@16943 365 that is visible on the screen (such as a scroll bar or a panner),
fantasai@16943 366 that mechanism should only be displayed
fantasai@16943 367 if there is overflow.
fantasai@16943 368 </dl>
fantasai@16941 369
fantasai@16941 370 If the computed value of 'overflow' on a <a>block box</a> is not ''overflow/visible'',
fantasai@16941 371 it creates a new <a>block formatting context</a> for its content.
fantasai@16941 372
fantasai@17773 373 <h3 id="overflow-propagation">
fantasai@17773 374 Overflow Value Propagation</h3>
florian@15277 375
florian@15496 376 UAs must apply the 'overflow' property
florian@15496 377 set on the root element to the viewport.
jackalmage@16950 378 For HTML UAs,
jackalmage@16950 379 if this would result in the viewport having ''visible'' overflow,
jackalmage@16950 380 the UA must instead apply the 'overflow' property
jackalmage@16950 381 set on the <{body}> element to the viewport.
jackalmage@16950 382 In either case,
jackalmage@16950 383 the used value of 'overflow' for the element from which the value is propagated
jackalmage@16950 384 must evaluate to ''visible''.
jackalmage@16950 385
jackalmage@16950 386 If this application would result in the viewport having ''visible'' overflow,
jackalmage@16950 387 the UA must instead treat the viewport as having ''overflow/auto'' overflow.
florian@15496 388
fantasai@16941 389 <h3 id="scrollbar-layout">
fantasai@16941 390 Scrollbars and Layout</h3>
fantasai@16941 391
florian@15496 392 In the case of a scrollbar being placed on an edge of the element's box,
florian@15496 393 it should be inserted between the inner border edge
florian@15496 394 and the outer padding edge.
florian@15496 395 Any space taken up by the scrollbars should be
florian@15496 396 taken out of (subtracted from the dimensions of)
jackalmage@15674 397 the containing block formed by the element with the scrollbars.
florian@15496 398
florian@15496 399 Issue: import examples from [[CSS3-BOX]].
florian@15496 400
fantasai@16941 401 <h3 id="scrolling-direction">
fantasai@16941 402 Scrolling Origin, Direction, and Restriction</h3>
fantasai@16941 403
fantasai@16967 404 The <dfn export>initial scroll position</dfn>,
fantasai@16943 405 that is, the initial position of
fantasai@16943 406 the box’s <a>scrollable overflow region</a>
fantasai@16943 407 with respect to its border box,
fantasai@16943 408 prior to any user or programmatic scrolling that changes it,
fantasai@16943 409 is dependent on the box’s <a>writing mode</a>,
fantasai@16949 410 and is by default the <a>block-start</a>/</a>inline-start</a> edge
fantasai@16943 411 of the box’s <a>padding edge</a>.
fantasai@16949 412 However, the 'align-content' and 'justify-content' properties [[!CSS-ALIGN-3]]
fantasai@16949 413 can be used to change this.
fantasai@16937 414
fantasai@16943 415 Due to Web-compatibility constraints
fantasai@16943 416 (caused by authors exploiting legacy bugs to surreptitiously hide content from visual readers but not search engines and/or speech output),
fantasai@16943 417 UAs must clip the <a>scrollable overflow region</a>
fantasai@17532 418 of <a>scroll containers</a>
fantasai@16943 419 on the <a>block-start</a> and </a>inline-start</a> sides of the box
fantasai@16943 420 (thereby behaving as if they had no <a>scrollable overflow</a> on that side).
florian@15277 421
fantasai@16943 422 The viewport uses the <a>principal writing mode</a> for these calculations.
florian@15277 423
florian@15277 424 <p class="issue">
florian@15277 425 [[CSS3-MARQUEE]] describes an 'overflow-style' property,
florian@15277 426 but it has not picked up implementation experience
florian@15277 427 that the working group is aware of.
florian@15277 428 Should this document treat 'overflow-style' as a defunct proposal,
florian@15277 429 or should this document describe the 'overflow-style' property
florian@15277 430 and attempt to revive it,
florian@15277 431 despite that implementations have implemented
florian@15277 432 'overflow-x' and 'overflow-y' instead?
fantasai@16937 433
florian@15277 434
jackalmage@16933 435 <h2 id="max-lines">
jackalmage@16933 436 Limiting Number of Visible Text Lines: the 'max-lines' property</h2>
jackalmage@16933 437
jackalmage@16933 438
jackalmage@16933 439 <pre class=propdef>
jackalmage@16933 440 Name: max-lines
jackalmage@16933 441 Value: none | <<integer>>
jackalmage@16933 442 Initial: none
jackalmage@16933 443 Applies to: all non-inline elements
jackalmage@16933 444 Inherited: no
jackalmage@16933 445 Animatable: as integer
jackalmage@16933 446 Percentages: N/A
jackalmage@16933 447 Media: visual
jackalmage@16933 448 Computed value: specified value
jackalmage@16933 449 </pre>
jackalmage@16933 450
fantasai@16937 451 Issue: Add back 'max-lines', so we can kill the unspecified WebKit feature that does this poorly.
jackalmage@16933 452
dbaron@6478 453
fantasai@16937 454 <h2 id="static-media">
fantasai@16937 455 Overflow in static media</h2>
dbaron@6493 456
dbaron@6493 457 <p class="issue">
dbaron@6493 458 This specification should define useful behavior
jackalmage@16932 459 for all values of 'overflow'
dbaron@6493 460 in static media (such as print).
dbaron@6493 461 Current implementation behavior is quite poor and
dbaron@6493 462 produces unexpected results when authors have not considered
dbaron@6493 463 what will happen when
dbaron@6493 464 the content they produce for interactive media
dbaron@6493 465 is printed.
fantasai@16937 466
dbaron@6493 467
jackalmage@16932 468 Privacy and Security Considerations {#priv-sec}
jackalmage@16932 469 ===============================================
jackalmage@16932 470
jackalmage@16932 471 This specification introduces no new privacy or security concerns.
jackalmage@16932 472
dbaron@6470 473 <h2 class=no-num id="acknowledgments">
dbaron@6470 474 Acknowledgments</h2>
dbaron@6470 475
dbaron@6470 476 <p>
dbaron@6470 477 Thanks especially to the feedback from
dbaron@6496 478 Rossen Atanassov,
dbaron@6496 479 Bert Bos,
dbaron@6496 480 Tantek Çelik,
dbaron@6496 481 John Daggett,
dbaron@6496 482 fantasai,
dbaron@6496 483 Daniel Glazman,
dbaron@6496 484 Vincent Hardy,
dbaron@6470 485 H&aring;kon Wium Lie,
dbaron@6496 486 Peter Linss,
dbaron@7815 487 Robert O'Callahan,
dbaron@6470 488 Florian Rivoal,
dbaron@6473 489 Alan Stearns,
dbaron@6496 490 Steve Zilles,
dbaron@6470 491 and all the rest of the
dbaron@6470 492 <a href="http://lists.w3.org/Archives/Public/www-style/">www-style</a> community.
fantasai@16937 493

mercurial