@@ -380,7 +380,7 @@ Introduction</h2>
380
380
381
381
<pre class=propdef>
382
382
Name : overflow-x, overflow-y
383
- Value : ''visible'' | ''hidden'' | ''scroll'' | ''auto'' | ''paged-x'' | ''paged-y'' | ''paged-x-controls'' | ''paged-y-controls'' | ''fragments''
383
+ Value : ''visible'' | ''hidden'' | ''scroll'' | ''auto''
384
384
Initial : ''visible''
385
385
Applies to : block containers [[!CSS21]], flex containers [[!CSS3-FLEXBOX]], and grid containers [[!CSS3-GRID-LAYOUT]]
386
386
Inherited : no
@@ -399,7 +399,7 @@ Introduction</h2>
399
399
400
400
<pre class=propdef>
401
401
Name : overflow
402
- Value : ''visible'' | ''hidden'' | ''scroll'' | ''auto'' | ''paged-x'' | ''paged-y'' | ''paged-x-controls'' | ''paged-y-controls'' | ''fragments''
402
+ Value : ''visible'' | ''hidden'' | ''scroll'' | ''auto''
403
403
Initial : see individual properties
404
404
Applies to : block containers [[!CSS21]], flex containers [[!CSS3-FLEXBOX]], and grid containers [[!CSS3-GRID-LAYOUT]]
405
405
Inherited : no
@@ -410,73 +410,15 @@ Introduction</h2>
410
410
Canonical order : <abbr title="follows order of property value definition">per grammar</abbr>
411
411
</pre>
412
412
413
- <p> The values of these properties are:</p>
414
-
415
- <dl dfn-for="overflow" dfn-type="value">
416
- <dt> <dfn>visible</dfn>
417
- <dd>
418
- There is no special handling of overflow, that is, it
419
- may be rendered outside the block container.
420
- </dd>
421
- <dt> <dfn>hidden</dfn>
422
- <dt> <dfn>scroll</dfn>
423
- <dt> <dfn>auto</dfn>
424
- <dd>
425
- These values are collectively the <dfn dfn>scrolling values</dfn> ;
426
- they are defined in the section on
427
- <a href="#scrolling-overflow">scrolling and hidden overflow</a> .
428
- </dd>
429
- <dt> <dfn>paged-x</dfn>
430
- <dt> <dfn>paged-y</dfn>
431
- <dt> <dfn>paged-x-controls</dfn>
432
- <dt> <dfn>paged-y-controls</dfn>
433
- <dt> <dfn>fragments</dfn>
434
- <dd>
435
- These values are collectively the <dfn dfn>fragmenting values</dfn> ;
436
- they are defined in the sections on
437
- <a href="#paginated-overflow">paginated overflow</a> and
438
- <a href="#fragment-overflow">fragment overflow</a> .
439
- </dd>
440
- </dl>
441
-
442
413
<div id="overflow-computed-values">
443
414
<p> The computed values of 'overflow-x' and 'overflow-y'
444
415
are determined from the cascaded values [[!CSS3CASCADE]]
445
416
based on the following rules:</p>
446
417
447
418
<ol>
448
419
<li>
449
- If one or both of the cascaded values are
450
- <a>fragmenting values</a> , then:
451
- <ol>
452
- <li>
453
- If one of the cascaded values is one of the
454
- <a>fragmenting values</a>
455
- and the other is not,
456
- then the computed values are
457
- the same as the cascaded values.
458
- </li>
459
- <li>
460
- If both of the cascaded values are <a>fragmenting values</a> , then:
461
- <ol>
462
- <li>
463
- for horizontal writing mode [[!CSS3-WRITING-MODES]] ,
464
- the computed value for 'overflow-y' is the cascaded value
465
- and the computed value for 'overflow-x' is ''overflow/hidden'' , or
466
- </li>
467
- <li>
468
- for vertical writing mode [[!CSS3-WRITING-MODES]] ,
469
- the computed value for 'overflow-x' is the cascaded value
470
- and the computed value for 'overflow-y' is ''overflow/hidden'' .
471
- </li>
472
- </ol>
473
- </li>
474
- </ol>
475
- </li>
476
- <li>
477
- Otherwise, if one cascaded values is
478
- one of the <a>scrolling values</a>
479
- and the other is ''overflow/visible'' ,
420
+ If one cascaded values is ''overflow/visible''
421
+ and the other is not,
480
422
then computed values are the cascaded values
481
423
with ''overflow/visible'' changed to ''overflow/auto'' .
482
424
</li>
@@ -486,17 +428,30 @@ Introduction</h2>
486
428
</ol>
487
429
</div>
488
430
431
+ <p> The values of these properties are:</p>
432
+
433
+ <dl dfn-for="overflow" dfn-type="value">
434
+ <dt> <dfn>visible</dfn>
435
+ <dd>
436
+ There is no special handling of overflow, that is, it
437
+ may be rendered outside the block container.
438
+ </dd>
439
+ <dt> <dfn>hidden</dfn>
440
+ <dt> <dfn>scroll</dfn>
441
+ <dt> <dfn>auto</dfn>
442
+ <dd>
443
+ <p class="issue">
444
+ Move material from [[CSS21]] and [[CSS3BOX]] here.
445
+ </p>
446
+ </dd>
447
+ </dl>
448
+
489
449
<p class="issue">
490
- Are all 4 of the ''paged-*'' values really needed?
450
+ Explain which directions allow scrolling and which don't,
451
+ as a function of 'direction'
452
+ (including propagation of 'direction' to the ICB).
491
453
</p>
492
454
493
- <p>
494
- When the <a>fragmenting values</a> are used,
495
- the overflow from the fragments themselves
496
- treats the fragmenting value as ''overflow/hidden'' .
497
- <span class="issue"> Is this the right behavior?</span>
498
- <span class="issue"> Give example.</span>
499
- </p>
500
455
501
456
<p class="issue">
502
457
[[CSS3-MARQUEE]] describes an 'overflow-style' property,
@@ -509,27 +464,43 @@ Introduction</h2>
509
464
'overflow-x' and 'overflow-y' instead?
510
465
</p>
511
466
467
+ <h2 id="fragmentation-properties">Fragmentation properties</h2>
468
+
469
+ Issue: This section is a WIP, and currently just holds bits of information that need to be massaged into proper form.
470
+
471
+ | ''paged-x'' | ''paged-y'' | ''paged-x-controls'' | ''paged-y-controls'' | ''fragments''
472
+
512
473
<p class="issue">
474
+ Are all 4 of the ''paged-*'' values really needed?
475
+ </p>
476
+
477
+ <dl>
478
+ <dt> <dfn>paged-x</dfn>
479
+ <dt> <dfn>paged-y</dfn>
480
+ <dt> <dfn>paged-x-controls</dfn>
481
+ <dt> <dfn>paged-y-controls</dfn>
482
+ <dt> <dfn>fragments</dfn>
483
+ <dd>
484
+ These values are collectively the <dfn dfn>fragmenting values</dfn> ;
485
+ they are defined in the sections on
486
+ <a href="#paginated-overflow">paginated overflow</a> and
487
+ <a href="#fragment-overflow">fragment overflow</a> .
488
+ </dd>
489
+ </dl>
490
+
491
+ <div class="issue">
492
+ Having split the overflow and fragmentation properties, this issue is no longer relevant, but there are
493
+ useful bits of information in the thread, so I am leaving it here for now.
494
+
513
495
There are <a href="http://lists.w3.org/Archives/Public/www-style/2012May/1197.html">discussions</a>
514
496
about how overflow, overflow-style, overflow-x and overflow-y
515
497
should work and interact with each other.
516
498
Until consensus on this topic is reached,
517
499
it is not completely clear which of these
518
500
should be used for
519
501
paged-x | paged-y | paged-x-controls | paged-y-controls | fragments
520
- </p>
521
-
522
- <h2 id="scrolling-overflow">Scrolling and hidden overflow</h2>
523
-
524
- <p class="issue">
525
- Move material from [[CSS21]] and [[CSS3BOX]] here.
526
- </p>
502
+ </div>
527
503
528
- <p class="issue">
529
- Explain which directions allow scrolling and which don't,
530
- as a function of 'direction'
531
- (including propagation of 'direction' to the ICB).
532
- </p>
533
504
534
505
<h2 id="paginated-overflow">Paginated overflow</h2>
535
506
0 commit comments