Skip to content

Commit 3e25e68

Browse files
committed
[css-overflow] Flesh out the overflow values, and include clipped
1 parent a349490 commit 3e25e68

File tree

2 files changed

+2245
-2123
lines changed

2 files changed

+2245
-2123
lines changed

css-overflow/Overview.bs

+58-7
Original file line numberDiff line numberDiff line change
@@ -377,7 +377,7 @@ Introduction</h2>
377377

378378
<pre class=propdef>
379379
Name: overflow-x, overflow-y
380-
Value: ''visible'' | ''hidden'' | ''scroll'' | ''auto''
380+
Value: ''visible'' | ''hidden'' | ''clipped'' | ''scroll'' | ''auto''
381381
Initial: ''visible''
382382
Applies to: block containers [[!CSS21]], flex containers [[!CSS3-FLEXBOX]], and grid containers [[!CSS3-GRID-LAYOUT]]
383383
Inherited: no
@@ -396,7 +396,7 @@ Introduction</h2>
396396

397397
<pre class=propdef>
398398
Name: overflow
399-
Value: ''visible'' | ''hidden'' | ''scroll'' | ''auto''
399+
Value: ''visible'' | ''hidden'' | ''clipped'' | ''scroll'' | ''auto''
400400
Initial: see individual properties
401401
Applies to: block containers [[!CSS21]], flex containers [[!CSS3-FLEXBOX]], and grid containers [[!CSS3-GRID-LAYOUT]]
402402
Inherited: no
@@ -434,15 +434,66 @@ Introduction</h2>
434434
may be rendered outside the block container.
435435
</dd>
436436
<dt><dfn>hidden</dfn>
437+
<dd>This value indicates that
438+
the content is clipped and that no scrolling user interface should be provided by the UA
439+
to view the content outside the clipping region.
440+
However, the content may still be scrolled programatically,
441+
for example using the mechanisms defined in [[CSSOM-VIEW]].
442+
<dt><dfn>clipped</dfn>
443+
<dd>Like ''hidden'',
444+
this value indicates that
445+
the content is clipped
446+
and that no scrolling user interface should be provided by the UA
447+
to view the content outside the clipping region.
448+
In addition, unlike ''overflow: hidden''
449+
which still allows programmatic scrolling,
450+
''overflow: clipped'' forbids scrolling entirely,
451+
through any mechanism.
452+
453+
Issue: Mozilla implements -moz-hidden-unscrollable,
454+
which is similar to ''clipped'',
455+
except that it does not cause the element to establish a BFC.
456+
Should we match that?
437457
<dt><dfn>scroll</dfn>
458+
<dd>This value indicates that the content is clipped
459+
and that if the user agent uses a scrolling mechanism
460+
that is visible on the screen (such as a scroll bar or a panner),
461+
that mechanism should be displayed for a box
462+
whether or not any of its content is clipped.
463+
This avoids any problem with scrollbars appearing
464+
and disappearing in a dynamic environment.
465+
When this value is specified and the target medium is ''print'',
466+
overflowing content may be printed.
438467
<dt><dfn>auto</dfn>
439-
<dd>
440-
<p class="issue">
441-
Move material from [[CSS21]] and [[CSS3BOX]] here.
442-
</p>
443-
</dd>
468+
<dd>The behavior of the ''overflow/auto'' value is user agent-dependent,
469+
but should cause a scrolling mechanism to be provided for overflowing boxes.
444470
</dl>
445471

472+
Even if 'overflow' is set to ''overflow/visible'',
473+
content may be clipped to a UA's document window by the native operating environment.
474+
475+
If the computed value of 'overflow' is not ''overflow/visible'',
476+
the element creates a block formatting context.
477+
478+
UAs must apply the 'overflow' property
479+
set on the root element to the viewport.
480+
HTML UAs must instead apply the ‘overflow’ property
481+
from the <{body}> element to the viewport
482+
if the value on the root element is ''visible''.
483+
The ''visible'' value when used for the viewport
484+
must be interpreted as ''overflow/auto''.
485+
The element from which the value is propagated
486+
must have a used value for 'overflow' of ''visible''.
487+
488+
In the case of a scrollbar being placed on an edge of the element's box,
489+
it should be inserted between the inner border edge
490+
and the outer padding edge.
491+
Any space taken up by the scrollbars should be
492+
taken out of (subtracted from the dimensions of)
493+
the containing block formed by the element with the scrollbars.
494+
495+
Issue: import examples from [[CSS3-BOX]].
496+
446497
<p class="issue">
447498
Explain which directions allow scrolling and which don't,
448499
as a function of 'direction'

0 commit comments

Comments
 (0)