Skip to content

Commit 0a494a4

Browse files
fantasaifantasai
committed
[css-overflow-3][editorial] Consolidate scrollbar layout sections (move section)
1 parent 0cc97b1 commit 0a494a4

File tree

1 file changed

+80
-77
lines changed

1 file changed

+80
-77
lines changed

‎css-overflow-3/Overview.bs‎

Lines changed: 80 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -503,81 +503,6 @@ Overflow in Print and Other Static Media</h3>
503503
for example, e-book readers paginate content,
504504
but are interactive.
505505

506-
<h3 id="scrollbar-layout">
507-
Scrollbars and Layout</h3>
508-
509-
When reserving space for a scrollar placed at the edge of an element's box,
510-
the reserved space is inserted between the inner border edge
511-
and the outer padding edge.
512-
For the purpose of the <a spec=css-backgrounds>background positioning area</a> and <a spec=css-backgrounds>background painting area</a> however,
513-
this reserved space is considered to be part of the [=padding box=].
514-
515-
<div class="example">
516-
In the following document fragment,
517-
both an absolutely-positioned element
518-
and a background image
519-
are positioned to the top right of the box.
520-
521-
<xmp highlight=html>
522-
<style>
523-
article {
524-
background: top right no-repeat url(circle.png);
525-
position: relative;
526-
overflow: auto; }
527-
aside { position: absolute; top: 0; right: 0; }
528-
</style>
529-
<article>
530-
<aside>×</aside>
531-
</article>
532-
</xmp>
533-
534-
If no scrollbars are present on <code>&lt;article></code>,
535-
they will both coincide in the top right padding edge corner.
536-
However, if scrollbars are present
537-
then <code>&lt;aside></code> will be completely visible,
538-
on the right padding-box edge adjacent to the scrollbars;
539-
whereas the background image will be tucked underneath the scrollbars,
540-
in the top right corner of the scrollbar-extended <a spec=css-backgrounds>background positioning area</a>.
541-
</div>
542-
543-
When the box is intrinsically sized,
544-
this reserved space is added to the size of its contents.
545-
It is otherwise subtracted from space alotted to the [=content area=].
546-
To the extent that the presence of scrollbars can affect sizing,
547-
UAs must start with the assumption that no scrollbars are needed,
548-
and recalculate sizes if it turns out they are.
549-
550-
<div class="example">
551-
In the following document fragment,
552-
the outer <code>&lt;article></code> has ''height: auto'', but ''max-height: 5em''.
553-
The inner <code>&lt;section></code> has large margins and would normally just fit:
554-
555-
<xmp highlight=html>
556-
...
557-
article { overflow: auto; max-height: 5em; width: max-content; }
558-
section { margin: 2em; line-height: 1 }
559-
...
560-
<article>
561-
<section>
562-
This section has big margins.
563-
</section>
564-
</article>
565-
</xmp>
566-
567-
If we assumed that <code>&lt;article></code> needed scrollbars,
568-
then the height of <code>&lt;section></code>,
569-
including the single line of text and twice 2em of margins,
570-
adds up to 5em plus a scrollbar.
571-
Since that is greater than 5em, the maximum allowed height,
572-
it seems we made the right assumption and d1 indeed needs scrollbars.
573-
574-
However, we should have started by assuming that no scrollbars are needed.
575-
In that case the content height of <code>&lt;article></code>
576-
is exactly the maximum height of 5em,
577-
proving that the assumption was correct
578-
and <code>&lt;article></code> indeed should not have scrollbars.
579-
</div>
580-
581506
<h3 id="scrolling-direction">
582507
Scrolling Origin, Direction, and Restriction</h3>
583508

@@ -744,8 +669,86 @@ Smooth Scrolling: the 'scroll-behavior' Property</h3>
744669

745670
User agents may ignore this property. <!--fingerprint-->
746671

747-
<h2 id="scrollbar-gutter-property">
748-
Reserving space for the scrollbar: the 'scrollbar-gutter' property</h2>
672+
<h2 id="scrollbar-layout">
673+
Scrollbars and Layout</h2>
674+
675+
<h3 id="scrollbar-sizing">
676+
Reserving Space for the Scrollbar</h3>
677+
678+
When reserving space for a scrollar placed at the edge of an element's box,
679+
the reserved space is inserted between the inner border edge
680+
and the outer padding edge.
681+
For the purpose of the <a spec=css-backgrounds>background positioning area</a> and <a spec=css-backgrounds>background painting area</a> however,
682+
this reserved space is considered to be part of the [=padding box=].
683+
684+
<div class="example">
685+
In the following document fragment,
686+
both an absolutely-positioned element
687+
and a background image
688+
are positioned to the top right of the box.
689+
690+
<xmp highlight=html>
691+
<style>
692+
article {
693+
background: top right no-repeat url(circle.png);
694+
position: relative;
695+
overflow: auto; }
696+
aside { position: absolute; top: 0; right: 0; }
697+
</style>
698+
<article>
699+
<aside>×</aside>
700+
</article>
701+
</xmp>
702+
703+
If no scrollbars are present on <code>&lt;article></code>,
704+
they will both coincide in the top right padding edge corner.
705+
However, if scrollbars are present
706+
then <code>&lt;aside></code> will be completely visible,
707+
on the right padding-box edge adjacent to the scrollbars;
708+
whereas the background image will be tucked underneath the scrollbars,
709+
in the top right corner of the scrollbar-extended <a spec=css-backgrounds>background positioning area</a>.
710+
</div>
711+
712+
When the box is intrinsically sized,
713+
this reserved space is added to the size of its contents.
714+
It is otherwise subtracted from space alotted to the [=content area=].
715+
To the extent that the presence of scrollbars can affect sizing,
716+
UAs must start with the assumption that no scrollbars are needed,
717+
and recalculate sizes if it turns out they are.
718+
719+
<div class="example">
720+
In the following document fragment,
721+
the outer <code>&lt;article></code> has ''height: auto'', but ''max-height: 5em''.
722+
The inner <code>&lt;section></code> has large margins and would normally just fit:
723+
724+
<xmp highlight=html>
725+
...
726+
article { overflow: auto; max-height: 5em; width: max-content; }
727+
section { margin: 2em; line-height: 1 }
728+
...
729+
<article>
730+
<section>
731+
This section has big margins.
732+
</section>
733+
</article>
734+
</xmp>
735+
736+
If we assumed that <code>&lt;article></code> needed scrollbars,
737+
then the height of <code>&lt;section></code>,
738+
including the single line of text and twice 2em of margins,
739+
adds up to 5em plus a scrollbar.
740+
Since that is greater than 5em, the maximum allowed height,
741+
it seems we made the right assumption and d1 indeed needs scrollbars.
742+
743+
However, we should have started by assuming that no scrollbars are needed.
744+
In that case the content height of <code>&lt;article></code>
745+
is exactly the maximum height of 5em,
746+
proving that the assumption was correct
747+
and <code>&lt;article></code> indeed should not have scrollbars.
748+
</div>
749+
750+
<h3 id="scrollbar-gutter-property">
751+
Reserving space for the scrollbar: the 'scrollbar-gutter' property</h3>
749752

750753
The space between the inner border edge and the outer padding edge
751754
which user agents may reserve to display the scrollbar

0 commit comments

Comments
 (0)