Sat, 14 Jan 2017 00:10:44 -0800
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å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 |