Skip to content

Commit 00b0acc

Browse files
frivoalfrivoal
committed
[css-contain] Disable propagation from body when containment is on
Addresses #5913
1 parent d6d0852 commit 00b0acc

File tree

6 files changed

+202
-2
lines changed

6 files changed

+202
-2
lines changed

‎css-backgrounds-3/Overview.bs

+4
Original file line numberDiff line numberDiff line change
@@ -1305,6 +1305,10 @@ It is recommended that authors of HTML documents specify the canvas background
13051305
for the <code class=html>BODY</code> element rather than the
13061306
<code class=html>HTML</code> element.
13071307

1308+
Note: Using [=containment=] disables
1309+
this special handling of the HTML <{body}> element.
1310+
See the [[CSS-CONTAIN-1#contain-property]] for details.
1311+
13081312
<div class="example">
13091313
<p>According to these rules, the canvas underlying the following HTML
13101314
document will have a “marble” background:

‎css-contain-1/Overview.bs

+123
Original file line numberDiff line numberDiff line change
@@ -398,6 +398,124 @@ Strong Containment: the 'contain' property</h2>
398398
''contain: strict'' can be applied to communicate further restrictions.
399399
</div>
400400

401+
<div class=correction id=c3>
402+
<span class=marker>Candidate Correction 3:</span>
403+
The CSS Working Group had forgotten to consider the effects of containment
404+
on the HTML <{html}> and <{body}> elements,
405+
particularly in consideration of the fact that
406+
for legacy reasons,
407+
some properties can propagate outwards from the <{body}> element.
408+
This proposed text addresses this oversight.
409+
410+
<blockquote>
411+
Additionally, when the [=used value=] of the 'contain' property
412+
on either the HTML <{html}> or <{body}> elements
413+
is anything other than ''contain/none'',
414+
propagation of properties
415+
from the <{body}> element
416+
to the [=initial containing block=], the viewport, or the [=canvas background=],
417+
is disabled.
418+
Notably, this affects:
419+
* 'writing-mode', 'direction', and 'text-orientation' (see [[CSS-WRITING-MODES-3#principal-flow]])
420+
* 'overflow' and its longhands (see [[CSS-OVERFLOW-3#overflow-propagation]])
421+
* 'background' and its longhands (see [[CSS-BACKGROUNDS-3#body-background]])
422+
423+
<wpt>
424+
contain-body-bg-001.html
425+
contain-body-bg-002.html
426+
contain-body-bg-003.html
427+
contain-body-bg-004.html
428+
contain-body-dir-001.html
429+
contain-body-dir-002.html
430+
contain-body-dir-003.html
431+
contain-body-dir-004.html
432+
contain-body-overflow-001.html
433+
contain-body-overflow-002.html
434+
contain-body-overflow-003.html
435+
contain-body-overflow-004.html
436+
contain-body-t-o-001.html
437+
contain-body-t-o-002.html
438+
contain-body-t-o-003.html
439+
contain-body-t-o-004.html
440+
contain-body-w-m-001.html
441+
contain-body-w-m-002.html
442+
contain-body-w-m-003.html
443+
contain-body-w-m-004.html
444+
contain-html-bg-001.html
445+
contain-html-bg-002.html
446+
contain-html-bg-003.html
447+
contain-html-bg-004.html
448+
contain-html-dir-001.html
449+
contain-html-dir-002.html
450+
contain-html-dir-003.html
451+
contain-html-dir-004.html
452+
contain-html-overflow-001.html
453+
contain-html-overflow-002.html
454+
contain-html-overflow-003.html
455+
contain-html-overflow-004.html
456+
contain-html-t-o-001.html
457+
contain-html-t-o-002.html
458+
contain-html-t-o-003.html
459+
contain-html-t-o-004.html
460+
contain-html-w-m-001.html
461+
contain-html-w-m-002.html
462+
contain-html-w-m-003.html
463+
contain-html-w-m-004.html
464+
</wpt>
465+
466+
Note: Propagation
467+
to the [=initial containing block=], the viewport, or the [=canvas background=],
468+
of properties set on the <{html}> element itself
469+
is unaffected.
470+
</blockquote>
471+
<details>
472+
<summary>This change has tests</summary>
473+
Tests to cover these new requirements have been added to <abbr title="Web Platform Tests">WPT</abbr>.
474+
The results of these tests can be seen at the <a href="https://wpt.fyi/">Web-Platform-Tests dashboard</a>:
475+
<ol>
476+
<li><a href=https://wpt.fyi/results/css/css-contain/contain-body-bg-001.html>contain-body-bg-001.html</a>
477+
<li><a href=https://wpt.fyi/results/css/css-contain/contain-body-bg-002.html>contain-body-bg-002.html</a>
478+
<li><a href=https://wpt.fyi/results/css/css-contain/contain-body-bg-003.html>contain-body-bg-003.html</a>
479+
<li><a href=https://wpt.fyi/results/css/css-contain/contain-body-bg-004.html>contain-body-bg-004.html</a>
480+
<li><a href=https://wpt.fyi/results/css/css-contain/contain-body-dir-001.html>contain-body-dir-001.html</a>
481+
<li><a href=https://wpt.fyi/results/css/css-contain/contain-body-dir-002.html>contain-body-dir-002.html</a>
482+
<li><a href=https://wpt.fyi/results/css/css-contain/contain-body-dir-003.html>contain-body-dir-003.html</a>
483+
<li><a href=https://wpt.fyi/results/css/css-contain/contain-body-dir-004.html>contain-body-dir-004.html</a>
484+
<li><a href=https://wpt.fyi/results/css/css-contain/contain-body-overflow-001.html>contain-body-overflow-001.html</a>
485+
<li><a href=https://wpt.fyi/results/css/css-contain/contain-body-overflow-002.html>contain-body-overflow-002.html</a>
486+
<li><a href=https://wpt.fyi/results/css/css-contain/contain-body-overflow-003.html>contain-body-overflow-003.html</a>
487+
<li><a href=https://wpt.fyi/results/css/css-contain/contain-body-overflow-004.html>contain-body-overflow-004.html</a>
488+
<li><a href=https://wpt.fyi/results/css/css-contain/contain-body-t-o-001.html>contain-body-t-o-001.html</a>
489+
<li><a href=https://wpt.fyi/results/css/css-contain/contain-body-t-o-002.html>contain-body-t-o-002.html</a>
490+
<li><a href=https://wpt.fyi/results/css/css-contain/contain-body-t-o-003.html>contain-body-t-o-003.html</a>
491+
<li><a href=https://wpt.fyi/results/css/css-contain/contain-body-t-o-004.html>contain-body-t-o-004.html</a>
492+
<li><a href=https://wpt.fyi/results/css/css-contain/contain-body-w-m-001.html>contain-body-w-m-001.html</a>
493+
<li><a href=https://wpt.fyi/results/css/css-contain/contain-body-w-m-002.html>contain-body-w-m-002.html</a>
494+
<li><a href=https://wpt.fyi/results/css/css-contain/contain-body-w-m-003.html>contain-body-w-m-003.html</a>
495+
<li><a href=https://wpt.fyi/results/css/css-contain/contain-body-w-m-004.html>contain-body-w-m-004.html</a>
496+
<li><a href=https://wpt.fyi/results/css/css-contain/contain-html-bg-001.html>contain-html-bg-001.html</a>
497+
<li><a href=https://wpt.fyi/results/css/css-contain/contain-html-bg-002.html>contain-html-bg-002.html</a>
498+
<li><a href=https://wpt.fyi/results/css/css-contain/contain-html-bg-003.html>contain-html-bg-003.html</a>
499+
<li><a href=https://wpt.fyi/results/css/css-contain/contain-html-bg-004.html>contain-html-bg-004.html</a>
500+
<li><a href=https://wpt.fyi/results/css/css-contain/contain-html-dir-001.html>contain-html-dir-001.html</a>
501+
<li><a href=https://wpt.fyi/results/css/css-contain/contain-html-dir-002.html>contain-html-dir-002.html</a>
502+
<li><a href=https://wpt.fyi/results/css/css-contain/contain-html-dir-003.html>contain-html-dir-003.html</a>
503+
<li><a href=https://wpt.fyi/results/css/css-contain/contain-html-dir-004.html>contain-html-dir-004.html</a>
504+
<li><a href=https://wpt.fyi/results/css/css-contain/contain-html-overflow-001.html>contain-html-overflow-001.html</a>
505+
<li><a href=https://wpt.fyi/results/css/css-contain/contain-html-overflow-002.html>contain-html-overflow-002.html</a>
506+
<li><a href=https://wpt.fyi/results/css/css-contain/contain-html-overflow-003.html>contain-html-overflow-003.html</a>
507+
<li><a href=https://wpt.fyi/results/css/css-contain/contain-html-overflow-004.html>contain-html-overflow-004.html</a>
508+
<li><a href=https://wpt.fyi/results/css/css-contain/contain-html-t-o-001.html>contain-html-t-o-001.html</a>
509+
<li><a href=https://wpt.fyi/results/css/css-contain/contain-html-t-o-002.html>contain-html-t-o-002.html</a>
510+
<li><a href=https://wpt.fyi/results/css/css-contain/contain-html-t-o-003.html>contain-html-t-o-003.html</a>
511+
<li><a href=https://wpt.fyi/results/css/css-contain/contain-html-t-o-004.html>contain-html-t-o-004.html</a>
512+
<li><a href=https://wpt.fyi/results/css/css-contain/contain-html-w-m-001.html>contain-html-w-m-001.html</a>
513+
<li><a href=https://wpt.fyi/results/css/css-contain/contain-html-w-m-002.html>contain-html-w-m-002.html</a>
514+
<li><a href=https://wpt.fyi/results/css/css-contain/contain-html-w-m-003.html>contain-html-w-m-003.html</a>
515+
<li><a href=https://wpt.fyi/results/css/css-contain/contain-html-w-m-004.html>contain-html-w-m-004.html</a>
516+
</ol>
517+
</details>
518+
</div>
401519

402520
<h2 id='containment-types'>
403521
Types of Containment</h2>
@@ -1150,6 +1268,11 @@ This appendix is <em>informative</em>.
11501268
and improve the general legibility.
11511269
The intended behavior is unaltered.
11521270

1271+
<li>
1272+
Marked as <a href="#c3">Candidate Correction 3</a>:
1273+
Define the effects of containment on outwards propagation of properties
1274+
from the HTML <{body}> element.
1275+
11531276
<li>
11541277
Editorial tweaks:
11551278
<ul>

‎css-contain-2/Overview.bs

+63-2
Original file line numberDiff line numberDiff line change
@@ -423,6 +423,65 @@ Strong Containment: the 'contain' property</h2>
423423
''contain: strict'' can be applied to communicate further restrictions.
424424
</div>
425425

426+
Additionally, when the [=used value=] of the 'contain' property
427+
on either the HTML <{html}> or <{body}> elements
428+
is anything other than ''contain/none'',
429+
propagation of properties
430+
from the <{body}> element
431+
to the [=initial containing block=], the viewport, or the [=canvas background=],
432+
is disabled.
433+
Notably, this affects:
434+
* 'writing-mode', 'direction', and 'text-orientation' (see [[CSS-WRITING-MODES-3#principal-flow]])
435+
* 'overflow' and its longhands (see [[CSS-OVERFLOW-3#overflow-propagation]])
436+
* 'background' and its longhands (see [[CSS-BACKGROUNDS-3#body-background]])
437+
438+
<wpt>
439+
contain-body-bg-001.html
440+
contain-body-bg-002.html
441+
contain-body-bg-003.html
442+
contain-body-bg-004.html
443+
contain-body-dir-001.html
444+
contain-body-dir-002.html
445+
contain-body-dir-003.html
446+
contain-body-dir-004.html
447+
contain-body-overflow-001.html
448+
contain-body-overflow-002.html
449+
contain-body-overflow-003.html
450+
contain-body-overflow-004.html
451+
contain-body-t-o-001.html
452+
contain-body-t-o-002.html
453+
contain-body-t-o-003.html
454+
contain-body-t-o-004.html
455+
contain-body-w-m-001.html
456+
contain-body-w-m-002.html
457+
contain-body-w-m-003.html
458+
contain-body-w-m-004.html
459+
contain-html-bg-001.html
460+
contain-html-bg-002.html
461+
contain-html-bg-003.html
462+
contain-html-bg-004.html
463+
contain-html-dir-001.html
464+
contain-html-dir-002.html
465+
contain-html-dir-003.html
466+
contain-html-dir-004.html
467+
contain-html-overflow-001.html
468+
contain-html-overflow-002.html
469+
contain-html-overflow-003.html
470+
contain-html-overflow-004.html
471+
contain-html-t-o-001.html
472+
contain-html-t-o-002.html
473+
contain-html-t-o-003.html
474+
contain-html-t-o-004.html
475+
contain-html-w-m-001.html
476+
contain-html-w-m-002.html
477+
contain-html-w-m-003.html
478+
contain-html-w-m-004.html
479+
</wpt>
480+
481+
Note: Propagation
482+
to the [=initial containing block=], the viewport, or the [=canvas background=],
483+
of properties set on the <{html}> element itself
484+
is unaffected.
426485

427486
<h2 id='containment-types'>
428487
Types of Containment</h2>
@@ -1174,7 +1233,8 @@ Suppressing An Element's Contents Entirely: the 'content-visibility' property {#
11741233

11751234
: <dfn>auto</dfn>
11761235
::
1177-
The element turns on [=layout containment=],
1236+
The user agent must change the [=used value=] of the 'contain' property
1237+
so as to turn on [=layout containment=],
11781238
[=style containment=],
11791239
and [=paint containment=].
11801240

@@ -1189,7 +1249,8 @@ Suppressing An Element's Contents Entirely: the 'content-visibility' property {#
11891249

11901250
<div algorithm="skips its contents">
11911251
When an element <dfn export lt="skips its contents|skipping its contents|skip its contents|skipped contents" local-lt="skip">skips its contents</dfn>,
1192-
it turns on [=layout containment=],
1252+
the user agent must change the [=used value=] of the 'contain' property
1253+
so as to turn on [=layout containment=],
11931254
[=style containment=],
11941255
[=paint containment=],
11951256
and [=size containment=].

‎css-overflow-3/Overview.bs

+4
Original file line numberDiff line numberDiff line change
@@ -568,6 +568,10 @@ Overflow Viewport Propagation</h3>
568568
The element from which the value is propagated must then have
569569
a used 'overflow' value of ''overflow/visible''.
570570

571+
Note: Using [=containment=] disables
572+
this special handling of the HTML <{body}> element.
573+
See the [[CSS-CONTAIN-1#contain-property]] for details.
574+
571575
If ''overflow/visible'' is applied to the viewport,
572576
it must be interpreted as ''overflow/auto''.
573577
If ''overflow/clip'' is applied to the viewport,

‎css-writing-modes-3/Overview.bs

+4
Original file line numberDiff line numberDiff line change
@@ -2271,6 +2271,10 @@ The Principal Writing Mode</h2>
22712271
Note that this does not affect the computed values of 'writing-mode', 'direction', or 'text-orientation'
22722272
of the root element itself.
22732273

2274+
Note: Using [=containment=] disables
2275+
this special handling of the HTML <{body}> element.
2276+
See the [[CSS-CONTAIN-1#contain-property]] for details.
2277+
22742278
<div class=correction id=correction-display-none-propagation>
22752279
<span class=marker>Candidate Correction 1:</span>
22762280
Specify that the <{body}> element is ignored for determining the [=principal writing mode=]

‎css-writing-modes-4/Overview.bs

+4
Original file line numberDiff line numberDiff line change
@@ -2479,6 +2479,10 @@ The Principal Writing Mode</h2>
24792479
Note that this does not affect the computed values of 'writing-mode', 'direction', or 'text-orientation'
24802480
of the root element itself.
24812481

2482+
Note: Using [=containment=] disables
2483+
this special handling of the HTML <{body}> element.
2484+
See the [[CSS-CONTAIN-1#contain-property]] for details.
2485+
24822486
Note: Propagation is done on used values rather than computed values
24832487
to avoid disrupting other aspects of style computation,
24842488
such as [=inheritance=],

0 commit comments

Comments
 (0)