Skip to content

Commit d83fac7

Browse files
rachelandrewrachelandrew
committed
Merge branch 'main' of https://github.com/w3c/csswg-drafts into main
2 parents 90c1efe + b885427 commit d83fac7

9 files changed

Lines changed: 269 additions & 41 deletions

File tree

‎css-backgrounds-3/Overview.bs‎

Lines changed: 4 additions & 0 deletions
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-color-4/Overview.bs‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4503,7 +4503,7 @@ Interpolating with alpha</h3>
45034503
[32.102% 53.61 337.7].
45044504

45054505
The midpoint of linearly interpolating these,
4506-
along the shorter hue arc (the default) would be
4506+
along the ''shorter'' hue arc (the default) would be
45074507
[29.4365% 40.563 31.82]
45084508
which, with an alpha value of 0.5,
45094509
is <span class="swatch" style="--color: rgb(83.918% 44.583% 0% / 0.5)"></span> lch(58.873% 81.126 63.64) / 0.5)
@@ -4535,7 +4535,7 @@ Hue interpolation</h3>
45354535
then for interpolation, NaN is replaced
45364536
by the value 0 for both angles.
45374537

4538-
<h4 id="hue-shorter">''shorter''</h4>
4538+
<h4 id="hue-shorter"><dfn export>shorter</dfn></h4>
45394539

45404540
Angles are adjusted so that |θ₂ - θ₁| ∈ [-180, 180]. In pseudo-Javascript:
45414541
<pre>
@@ -4547,7 +4547,7 @@ Hue interpolation</h3>
45474547
}
45484548
</pre>
45494549

4550-
<h4 id="hue-longer">''longer''</h4>
4550+
<h4 id="hue-longer"><dfn export>longer</dfn></h4>
45514551

45524552
Angles are adjusted so that |θ₂ - θ₁| ∈ {0, [180, 360)}. In pseudo-Javascript:
45534553
<pre>
@@ -4559,7 +4559,7 @@ Hue interpolation</h3>
45594559
}
45604560
</pre>
45614561

4562-
<h4 id="hue-increasing">''increasing''</h4>
4562+
<h4 id="hue-increasing"><dfn export>increasing</dfn></h4>
45634563

45644564
Angles are adjusted so that |θ₂ - θ₁| ∈ [0, 360). In pseudo-Javascript:
45654565
<pre>
@@ -4568,7 +4568,7 @@ Hue interpolation</h3>
45684568
}
45694569
</pre>
45704570

4571-
<h4 id="hue-decreasing">''decreasing''</h4>
4571+
<h4 id="hue-decreasing"><dfn export>decreasing</dfn></h4>
45724572

45734573
Angles are adjusted so that |θ₂ - θ₁| ∈ (-360, 0]. In pseudo-Javascript:
45744574
<pre>
@@ -4577,7 +4577,7 @@ Hue interpolation</h3>
45774577
}
45784578
</pre>
45794579

4580-
<h4 id="hue-specified">''specified''</h4>
4580+
<h4 id="hue-specified"><dfn export>specified</dfn></h4>
45814581

45824582
No fixup is performed. Angles are interpolated in the same way as every other component.
45834583

‎css-color-5/Overview.bs‎

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,9 @@ Mixing colors: the ''color-mix()'' function {#color-mix}
125125

126126

127127
<pre class='prod'>
128-
<dfn>color-mix()</dfn> = color-mix( in <<color-space>> , [ <<color>> && <<percentage [0,100]>>? ]#{2})
128+
<dfn>color-mix()</dfn> = color-mix( in <<color-space>> , [ <<color>> && <<percentage [0,100]>>? ]#{2} <<hue-adjuster>>?)
129+
<dfn>&lt;hue-adjuster></dfn> = ''shorter'' | ''longer'' | ''increasing'' | ''decreasing'' | ''specified''
130+
129131
</pre>
130132

131133
Percentages are required to be in the range 0% to 100%. Negative percentages are specifically disallowed. The percentages are normalized as follows:
@@ -178,7 +180,17 @@ After normalizing both percentages, the result is produced via the following alg
178180
If the specified color space has a smaller gamut
179181
than the one in which the color to be adjusted is specified,
180182
gamut mapping will occur.
181-
2. Colors are then <a href="../css-color-4/#interpolation">interpolated in the specified color space</a>.
183+
2. Colors are then interpolated in the specified color space,
184+
as described in [[css-color-4#interpolation]]. If the specified color space is a ''cylindrical-polar-color'' space,
185+
then the <<hue-adjuster>> controls the
186+
interpolation of hue, as described in
187+
[[css-color-4#hue-interpolation]].
188+
If no <<hue-adjuster>> is specified, it is as if
189+
''shorter'' had been specified.
190+
If the specified colorspace is a
191+
''rectangular-orthogonal-color'' space,
192+
then specifying a <<hue-adjuster>> is not an error,
193+
but has no effect.
182194
3. If an alpha multiplier was produced during percentage normalization,
183195
the alpha component of the interpolated result is multiplied
184196
by the alpha multiplier.
@@ -710,14 +722,13 @@ Adjusting colors: the ''color-adjust'' function {#coloradjust}
710722
<dfn>&lt;color-adjuster></dfn> = [ [
711723
<<srgb-adjuster>> | <<hsl-adjuster>> | <<hwb-adjuster>>
712724
| <<xyz-adjuster>> | <<lab-adjuster>> | <<lch-adjuster>>
713-
] | alpha ] <<percentage>>?
725+
] | alpha ] <<percentage>>
714726
<dfn>&lt;srgb-adjuster></dfn> = red | green | blue
715-
<dfn>&lt;hsl-adjuster></dfn> = <<hue-adjuster>> | saturation | lightness
716-
<dfn>&lt;hwb-adjuster></dfn> = <<hue-adjuster>> | whiteness | blackness
727+
<dfn>&lt;hsl-adjuster></dfn> = hue | saturation | lightness
728+
<dfn>&lt;hwb-adjuster></dfn> = hue | whiteness | blackness
717729
<dfn>&lt;xyz-adjuster></dfn> = x | y | z
718730
<dfn>&lt;lab-adjuster></dfn> = lightness | a | b
719-
<dfn>&lt;lch-adjuster></dfn> = lightness | chroma | <<hue-adjuster>>
720-
<dfn>&lt;hue-adjuster></dfn> = hue [shorter | longer | increasing | decreasing | specified ]?
731+
<dfn>&lt;lch-adjuster></dfn> = lightness | chroma | hue
721732
</pre>
722733

723734
The meaning of the adjusters is defined by color space.
@@ -741,8 +752,6 @@ Adjusting colors: the ''color-adjust'' function {#coloradjust}
741752
however, adjusting all three channels together is useful
742753
and will lighten or darken the color.
743754

744-
The <<hue-adjuster>> takes optional keywords, to specify the [[css-color-4#hue-interpolation]] algorithm.
745-
If no keyword is specified, it is as if ''shorter'' were specified.
746755

747756
<div class="example">
748757
This example produces the adjustment of peru (#CD853F),

‎css-contain-1/Overview.bs‎

Lines changed: 123 additions & 0 deletions
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‎

Lines changed: 63 additions & 2 deletions
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‎

Lines changed: 4 additions & 0 deletions
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,

0 commit comments

Comments
 (0)