@@ -58,6 +58,7 @@ Introduction</h2>
58
58
is that the content not be shown.
59
59
60
60
This specification introduces the long-standing de-facto 'overflow-x' and 'overflow-y' properties,
61
+ adds a ''overflow/clip'' value,
61
62
and defines overflow handling more fully.
62
63
63
64
[Something something 'max-lines'.]
@@ -73,7 +74,7 @@ Introduction</h2>
73
74
-->
74
75
75
76
<h2 id="overflow-concepts">
76
- Types of overflow </h2>
77
+ Types of Overflow </h2>
77
78
78
79
CSS uses the term <dfn export>overflow</dfn> to describe
79
80
the contents of a box
@@ -83,7 +84,7 @@ Types of overflow</h2>
83
84
The term might be interpreted as
84
85
elements or features that cause this overflow,
85
86
the non-rectangular region occupied by these features,
86
- or, more commonly,
87
+ or, more commonly, as
87
88
the minimal rectangle that bounds that region.
88
89
A box's overflow is computed based on the layout and styling of the box itself
89
90
and of all descendants whose <a>containing block chain</a>
@@ -107,7 +108,7 @@ Types of overflow</h2>
107
108
<li> <a>scrollable overflow</a>
108
109
</ul>
109
110
110
- <h3 id="ink">Ink overflow </h3>
111
+ <h3 id="ink">Ink Overflow </h3>
111
112
112
113
The <dfn export>ink overflow</dfn> of a box
113
114
is the part of that box and its contents that
@@ -124,22 +125,24 @@ Types of overflow</h2>
124
125
etc.
125
126
126
127
Since some effects in CSS (for example, the blurs in
127
- 'text-shadow' [[CSS3TEXT]] and 'box-shadow' [[CSS3BG]] )
128
+ 'text-shadow' [[CSS-TEXT-3]] and 'box-shadow' [[CSS-BACKGROUNDS-3]] ,
129
+ which are theoretically infinite)
128
130
do not define what visual extent they cover, the extent
129
131
of the <a>ink overflow</a> is undefined.
130
132
131
133
The <dfn export>ink overflow region</dfn> is the non-rectangular area
132
- occupied by the <a>ink overflow</a> , and the
133
- <dfn export>ink overflow rectangle</dfn> is
134
- the minimal rectangle whose axis is aligned to the box's axes
135
- and contains the <a>ink overflow region</a> .
134
+ occupied by the <a>ink overflow</a>
135
+ of a box and its contents,
136
+ and the <dfn export>ink overflow rectangle</dfn> is
137
+ the minimal rectangle whose axes are aligned to the box's axes
138
+ and that contains the <a>ink overflow region</a> .
136
139
Note that the <a>ink overflow rectangle</a> is a rectangle
137
140
in the box's coordinate system, but might be non-rectangular
138
- in other coordinate systems due to transforms [[CSS3-TRANSFORMS]] .
141
+ in other coordinate systems due to transforms. [[CSS3-TRANSFORMS]]
139
142
140
143
141
144
<h3 id="scrollable">
142
- Scrollable overflow </h3>
145
+ Scrollable Overflow </h3>
143
146
144
147
The <dfn export>scrollable overflow</dfn> of a box is the
145
148
set of things extending outside of that box's padding edge
@@ -148,8 +151,8 @@ Scrollable overflow</h3>
148
151
The <dfn export>scrollable overflow region</dfn> is the non-rectangular region
149
152
occupied by the <a>scrollable overflow</a> , and the
150
153
<dfn export>scrollable overflow rectangle</dfn> is
151
- the minimal rectangle whose axis is aligned to the box's axes
152
- and contains the <a>scrollable overflow region</a> .
154
+ the minimal rectangle whose axes are aligned to the box's axes
155
+ and that contains the <a>scrollable overflow region</a> .
153
156
154
157
The <a>scrollable overflow region</a> is the union of:
155
158
<ul>
@@ -255,7 +258,7 @@ Scrollable overflow</h3>
255
258
-->
256
259
257
260
<h2 id="overflow-properties">
258
- Scrollable Overflow: the 'overflow-x', 'overflow-y', and 'overflow' properties</h2>
261
+ Scrolling and Clipping Overflow: the 'overflow-x', 'overflow-y', and 'overflow' properties</h2>
259
262
260
263
These properties specify whether a box’s content
261
264
(including any <a>ink overflow</a> )
@@ -310,8 +313,8 @@ Scrollable Overflow: the 'overflow-x', 'overflow-y', and 'overflow' properties</
310
313
<dl dfn-for="overflow, overflow-x, overflow-y" dfn-type="value">
311
314
<dt> <dfn>visible</dfn>
312
315
<dd>
313
- There is no special handling of overflow, that is, it
314
- may be rendered outside the box.
316
+ There is no special handling of overflow, that is,
317
+ the box’s content is rendered outside the box if positioned there .
315
318
The box is not a <a>scroll container</a> .
316
319
317
320
<dt> <dfn>hidden</dfn>
@@ -357,35 +360,35 @@ Scrollable Overflow: the 'overflow-x', 'overflow-y', and 'overflow' properties</
357
360
358
361
<dt> <dfn>auto</dfn>
359
362
<dd>
360
- This value indicates that
361
- the box’s content is clipped to the padding box,
362
- but can be scrolled into view
363
- (and therefore the box is a <a>scroll container</a> ).
364
- However, if the user agent uses a scrolling mechanism
363
+ Like ''overflow/scroll'' when the box has <a>scrollable overflow</a> ;
364
+ like ''overflow/hidden'' otherwise.
365
+ Thus, if the user agent uses a scrolling mechanism
365
366
that is visible on the screen (such as a scroll bar or a panner),
366
- that mechanism should only be displayed
367
+ that mechanism will only be displayed
367
368
if there is overflow.
368
369
</dl>
369
370
370
- If the computed value of 'overflow' on a <a>block box</a> is not ''overflow/visible'' ,
371
+ If the computed value of 'overflow' on a <a>block box</a>
372
+ is not ''overflow/visible'' ,
371
373
it creates a new <a>block formatting context</a> for its content.
372
374
373
375
<h3 id="overflow-propagation">
374
376
Overflow Value Propagation</h3>
375
377
376
- UAs must apply the 'overflow' property
377
- set on the root element to the viewport.
378
- When the root element is an [[!HTML]] <{html}> element
379
- (including <a href="https://html.spec.whatwg.org/multipage/introduction.html#html-vs-xhtml">XML syntax for HTML</a> ),
378
+ UAs must apply the 'overflow-*' values
379
+ set on the root element to the <a>viewport</a> .
380
+ However,
381
+ when the root element is an [[!HTML]] <{html}> element
382
+ (including <a href="https://html.spec.whatwg.org/multipage/introduction.html#html-vs-xhtml">XML syntax for HTML</a> )
383
+ whose 'overflow' value is ''overflow/visible'' (in both axes),
380
384
and that element has a <{body}> element as a child,
381
- user agents must instead apply the 'overflow' property
382
- from the first such child element to the viewport,
383
- if the value on the root element is ''overflow/visible'' .
384
- The ''overflow/visible'' value when used for the viewport must be interpreted as ''overflow/auto'' .
385
- The element from which the value is propagated must have a used value for 'overflow' of ''overflow/visible'' .
385
+ user agents must instead apply the 'overflow-*' values
386
+ of the first such child element to the viewport.
387
+ The element from which the value is propagated must then have
388
+ a used 'overflow' value of ''overflow/visible'' .
386
389
387
- If this application would result in the viewport having ''visible'' overflow ,
388
- the UA must instead treat the viewport as having ''overflow/auto'' overflow .
390
+ If ''overflow/visible'' is applied to the viewport,
391
+ it must be interpreted as ''overflow/auto'' .
389
392
390
393
<h3 id="scrollbar-layout">
391
394
Scrollbars and Layout</h3>
@@ -408,10 +411,11 @@ Scrolling Origin, Direction, and Restriction</h3>
408
411
with respect to its border box,
409
412
prior to any user or programmatic scrolling that changes it,
410
413
is dependent on the box’s <a>writing mode</a> ,
411
- and is by default the <a>block-start</a> /</ a> inline-start</a> edge
414
+ and is by default the <a>block-start</a> /<a>inline-start</a> edge
412
415
of the box’s <a>padding edge</a> .
413
416
However, the 'align-content' and 'justify-content' properties [[!CSS-ALIGN-3]]
414
- can be used to change this.
417
+ can be used to change this,
418
+ see [[css-align-3#overflow-scroll-position]] .
415
419
416
420
Due to Web-compatibility constraints
417
421
(caused by authors exploiting legacy bugs to surreptitiously hide content from visual readers but not search engines and/or speech output),
0 commit comments