Skip to content

Commit bc4cffe

Browse files
fantasaifantasai
committed
[css-overflow-3] Move scrollable overflow details out from the intro
1 parent 6dc4b57 commit bc4cffe

1 file changed

Lines changed: 111 additions & 107 deletions

File tree

‎css-overflow-3/Overview.bs‎

Lines changed: 111 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -216,110 +216,7 @@ Scrollable Overflow</h3>
216216
<dfn export>scrollable overflow rectangle</dfn> is
217217
the minimal rectangle whose axes are aligned to the box's axes
218218
and that contains the <a>scrollable overflow area</a>.
219-
220-
The <a>scrollable overflow area</a> is the union of:
221-
<ul>
222-
<li>
223-
The [=scroll container=]’s own [=padding box=].
224-
225-
<li>
226-
All [=line boxes=] directly contained by the [=scroll container=].
227-
228-
<li>
229-
The border boxes
230-
of all boxes for which it is the containing block
231-
and whose border boxes are positioned not wholly
232-
in the [=unreachable scrollable overflow region=],
233-
accounting for transforms by projecting each box onto
234-
the plane of the element that establishes its <a>3D rendering context</a>.
235-
[[!CSS3-TRANSFORMS]]
236-
237-
Issue: Is this description of handling transforms
238-
sufficiently accurate?
239-
240-
Border boxes with zero area
241-
do not affect the [=scrollable overflow area=].
242-
243-
<li>
244-
The margin areas of <a>grid item</a> and <a>flex item</a> boxes
245-
for which the box establishes a containing block.
246-
247-
The UA may <em>additionally</em> include
248-
the margin areas of other boxes
249-
for which the box establishes a containing block;
250-
however,
251-
the conditions under which such margin areas are included
252-
is undefined in this level.
253-
<span class="issue">This needs further testing and investigation;
254-
is therefore deferred in this draft.</span>
255-
256-
<li>
257-
The <a>scrollable overflow areas</a> of all of the above boxes
258-
(including zero-area boxes
259-
and accounting for transforms as described above),
260-
provided they themselves have ''overflow: visible''
261-
(i.e. do not themselves trap the overflow)
262-
and that <a>scrollable overflow</a> is not already clipped
263-
(e.g. by the 'clip' property or the 'contain' property).
264-
265-
Note: The 'mask-*' properties [[!CSS-MASKING-1]]
266-
do not affect the <a>scrollable overflow area</a>.
267-
268-
ISSUE(8607): Need to evaluate what should/should not clip [=scrollable overflow=].
269-
270-
<li>
271-
Additional padding added
272-
to the [=scrollable overflow rectangle=]
273-
as necessary to enable scroll positions
274-
that satisfy the requirements of both
275-
''place-content: start'' and ''place-content: end'' alignment.
276-
277-
Note: This padding represents,
278-
within the [=scrollable overflow rectangle=],
279-
the box’s own padding
280-
so that when its content is scrolled to its end,
281-
there is padding between the edge of its [=in-flow=] (or floated) content
282-
and the border edge of the box.
283-
It typically ends up being exactly the same size as the box's own padding,
284-
except in a few cases--
285-
such as when an [=out-of-flow=] positioned element,
286-
or the visible overflow of a descendent,
287-
has already increased the size of the [=scrollable overflow rectangle=]
288-
outside the conceptual “content edge” of the [=scroll container=]’s content.
289-
290-
<figure>
291-
<img src="images/scroll-align-padding.jpg" width="917" height="404" alt="">
292-
<figcaption>
293-
Issue: Replace this image with a proper SVG.
294-
</figcaption>
295-
</figure>
296-
297-
</ul>
298-
299-
Additionally, due to Web-compatibility constraints
300-
(caused by authors exploiting legacy bugs to surreptitiously hide content from visual readers but not search engines and/or speech output),
301-
UAs must clip any content in the [=unreachable scrollable overflow region=].
302-
303-
Note: The [=content-distribution properties=] can
304-
[[css-align-3#overflow-scroll-position|alter the unreachable scrollable overflow region]]
305-
to ensure that a [=scroll container=]’s [=alignment subject=]
306-
is reachable after alignment.
307-
[[CSS-ALIGN-3]]
308-
309-
<!--
310-
Considerations:
311-
* floats
312-
* relpos
313-
* margins that collapsed through to the edge of the scrollable area
314-
* inline-side margins on both blocks and inlines
315-
Notes:
316-
The reasoning for only including border boxes is to minimize the cases
317-
in which overflow scrolling is triggered; however once overflow is triggered,
318-
excluding margins creates tight, uncomfortable edges
319-
because the margin has been effectively truncated.
320-
Testcase:
321-
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
322-
-->
219+
See [[#scrollable-overflow-calculation]] for details.
323220

324221
Note: The <a>scrollable overflow rectangle</a> is always a rectangle
325222
in the box's own coordinate system, but might be non-rectangular
@@ -700,16 +597,123 @@ Expanding Clipping Bounds: the 'overflow-clip-margin' property</h3>
700597

701598
* the [=overflow clip edge=] is clamped to stay within the element's [=padding box=].
702599
(This does not affect the [=computed value|computed=] or [=used value=] of this property.)
703-
* the ''border-box'' value
704-
behaves as ''padding-box''
600+
* the ''overflow-clip-margin/border-box'' value
601+
behaves as ''overflow-clip-margin/padding-box''
705602
and ignores any specified offset.
706603

707604
Note: This property was previously defined to only affect ''overflow: clip''.
708605
It now also affects [=scroll containers=],
709606
but only to shrink the clipping edge.
710607

608+
<h3 id=scrollable-overflow-calculation>
609+
Calculating the Scrollable Overflow Area</h3>
610+
611+
The <a>scrollable overflow area</a> of a [=scroll container=] is the union of:
612+
<ul>
613+
<li>
614+
The [=scroll container=]’s own [=padding box=].
615+
616+
<li>
617+
All [=line boxes=] directly contained by the [=scroll container=].
618+
619+
<li>
620+
The border boxes
621+
of all boxes for which it is the containing block
622+
and whose border boxes are positioned not wholly
623+
in the [=unreachable scrollable overflow region=],
624+
accounting for transforms by projecting each box onto
625+
the plane of the element that establishes its <a>3D rendering context</a>.
626+
[[!CSS3-TRANSFORMS]]
627+
628+
Issue: Is this description of handling transforms
629+
sufficiently accurate?
630+
631+
Border boxes with zero area
632+
do not affect the [=scrollable overflow area=].
633+
634+
<li>
635+
The margin areas of <a>grid item</a> and <a>flex item</a> boxes
636+
for which the box establishes a containing block.
637+
638+
The UA may <em>additionally</em> include
639+
the margin areas of other boxes
640+
for which the box establishes a containing block;
641+
however,
642+
the conditions under which such margin areas are included
643+
is undefined in this level.
644+
<span class="issue">This needs further testing and investigation;
645+
is therefore deferred in this draft.</span>
646+
647+
<li>
648+
The <a>scrollable overflow areas</a> of all of the above boxes
649+
(including zero-area boxes
650+
and accounting for transforms as described above),
651+
provided they themselves have ''overflow: visible''
652+
(i.e. do not themselves trap the overflow)
653+
and that <a>scrollable overflow</a> is not already clipped
654+
(e.g. by the 'clip' property or the 'contain' property).
655+
656+
Note: The 'mask-*' properties [[!CSS-MASKING-1]]
657+
do not affect the <a>scrollable overflow area</a>.
658+
659+
ISSUE(8607): Need to evaluate what should/should not clip [=scrollable overflow=].
660+
661+
<li>
662+
Additional padding added
663+
to the [=scrollable overflow rectangle=]
664+
as necessary to enable scroll positions
665+
that satisfy the requirements of both
666+
''place-content: start'' and ''place-content: end'' alignment.
667+
668+
Note: This padding represents,
669+
within the [=scrollable overflow rectangle=],
670+
the box’s own padding
671+
so that when its content is scrolled to its end,
672+
there is padding between the edge of its [=in-flow=] (or floated) content
673+
and the border edge of the box.
674+
It typically ends up being exactly the same size as the box's own padding,
675+
except in a few cases--
676+
such as when an [=out-of-flow=] positioned element,
677+
or the visible overflow of a descendent,
678+
has already increased the size of the [=scrollable overflow rectangle=]
679+
outside the conceptual “content edge” of the [=scroll container=]’s content.
680+
681+
<figure>
682+
<img src="images/scroll-align-padding.jpg" width="917" height="404" alt="">
683+
<figcaption>
684+
Issue: Replace this image with a proper SVG.
685+
</figcaption>
686+
</figure>
687+
688+
</ul>
689+
690+
Additionally, due to Web-compatibility constraints
691+
(caused by authors exploiting legacy bugs to surreptitiously hide content from visual readers but not search engines and/or speech output),
692+
UAs must clip any content in the [=unreachable scrollable overflow region=].
693+
694+
Note: The [=content-distribution properties=] can
695+
[[css-align-3#overflow-scroll-position|alter the unreachable scrollable overflow region]]
696+
to ensure that a [=scroll container=]’s [=alignment subject=]
697+
is reachable after alignment.
698+
[[css-align-3]]
699+
700+
<!--
701+
Considerations:
702+
* floats
703+
* relpos
704+
* margins that collapsed through to the edge of the scrollable area
705+
* inline-side margins on both blocks and inlines
706+
Notes:
707+
The reasoning for only including border boxes is to minimize the cases
708+
in which overflow scrolling is triggered; however once overflow is triggered,
709+
excluding margins creates tight, uncomfortable edges
710+
because the margin has been effectively truncated.
711+
Testcase:
712+
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
713+
-->
714+
711715
<h2 id=scrolling-behaviors>
712-
Scrolling Behaviors and Animations</h3>
716+
Scrolling Behaviors and Animations</h2>
713717

714718
CSS provides several controls over how scrolling behaves when triggered.
715719
* <a href="https://www.w3.org/TR/css-scroll-snap/">CSS Scroll Snap</a> allows defining "snap positions",

0 commit comments

Comments
 (0)