Skip to content

Commit 3d0a099

Browse files
svgeesussvgeesus
committed
Updates for publication
1 parent 65edb84 commit 3d0a099

File tree

1 file changed

+26
-24
lines changed

1 file changed

+26
-24
lines changed

‎compositing-1/Overview.bs‎

Lines changed: 26 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,23 @@
11
<h1>Compositing and Blending Level 1</h1>
22
<pre class='metadata'>
3-
Status: ED
3+
Status: CRD
4+
Date: 2024-03-21
45
Work Status: Refining
56
ED: https://drafts.fxtf.org/compositing-1/
67
TR: https://www.w3.org/TR/compositing-1/
7-
Prepare for TR: no
8+
Prepare for TR: yes
89
Previous Version: https://www.w3.org/TR/2015/CR-compositing-1-20150113/
910
Shortname: compositing
1011
Link Defaults: css-color-4 (property) color, css-masking-1 (property) mask
1112
Level: 1
12-
Group: fxtf
13+
Group: csswg
1314
Repository: w3c/fxtf-drafts
14-
Complain About: missing-example-ids false
15+
Complain About: missing-example-ids true
1516
Complain About: broken-links false
1617
Complain About: accidental-2119 true
1718
Inline Github Issues: title
18-
Default Highlight: css
19+
!Feedback: https://github.com/w3c/fxtf-drafts/labels/compositing-1
20+
Issue Tracking: GitHub https://github.com/w3c/fxtf-drafts/labels/compositing-1
1921
Implementation Report: https://wpt.fyi/results/css/compositing
2022
WPT Path Prefix: css/compositing/
2123
WPT Display: open
@@ -57,7 +59,7 @@ and/or the creation of a <a href="https://www.w3.org/tr/css21/visuren.html#x43">
5759

5860
The 'background-blend-mode' property also builds upon the properties defined in the <a href="https://www.w3.org/TR/css3-background/#placement" title="Backgrounds and Borders">CSS Backgrounds and Borders</a> module [[!CSS3BG]].
5961

60-
This specification also enhances the rules as specified in <a href="https://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#SimpleAlphaBlending" title="simple alpha blending">Section 14.2 Simple alpha compositing</a> of [[SVG11]] and <a href="https://www.w3.org/TR/css3-color/#alpha" title="simple alpha compositing">simple alpha compositing</a> of [[!CSS3COLOR]].
62+
This specification also enhances the rules as specified in <a href="https://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#SimpleAlphaBlending" title="simple alpha blending">Section 14.2 Simple alpha compositing</a> of [[SVG11]] and <a href="https://www.w3.org/TR/css-color-4/#alpha" title="simple alpha compositing">simple alpha compositing</a> of [[!CSS-COLOR-4]].
6163

6264
This module also extends the {{globalCompositeOperation}} attribute.
6365

@@ -66,7 +68,7 @@ This module also extends the {{globalCompositeOperation}} attribute.
6668
This specification follows the <a href="https://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
6769
definition conventions</a> from [[!CSS21]]. Value types not defined in
6870
this specification are defined in CSS Level 2 Revision 1 [[!CSS21]]. Other CSS
69-
modules may expand the definitions of these value types: for example [[!CSS3COLOR]],
71+
modules may expand the definitions of these value types: for example [[!CSS-COLOR-4]],
7072
when combined with this module, expands the definition of the &lt;color>
7173
value type as used in this specification.
7274

@@ -83,8 +85,8 @@ The compositing model must follow the <a href="https://www.w3.org/TR/SVG11/rende
8385

8486
<h3 id="csscompositingrules_CSS">Behavior specific to HTML</h3>
8587
<!-- <p>
86-
If an element specifies non-default blending or <a href="https://www.w3.org/TR/css3-color/#transparency">'opacity'</a>, its <a href="https://www.w3.org/TR/css3-2d-transforms/#transform-style-property">transform-style</a> [[CSS3-TRANSFORMS]] and that of all of its children must revert to 'flat'.<br>
87-
The application of blending other than 'normal' to an element must also establish a <a href="https://www.w3.org/tr/css21/visuren.html#x43">stacking context</a> [[!CSS21]] the same way that CSS <a href="https://www.w3.org/TR/css3-color/#transparency">'opacity'</a> does. One of the consequences is that elements with z-index must not honor the depth of elements outside of the group.<br> -->
88+
If an element specifies non-default blending or <a href="https://www.w3.org/TR/css-color-4/#transparency">'opacity'</a>, its <a href="https://www.w3.org/TR/css3-2d-transforms/#transform-style-property">transform-style</a> [[CSS3-TRANSFORMS]] and that of all of its children must revert to 'flat'.<br>
89+
The application of blending other than 'normal' to an element must also establish a <a href="https://www.w3.org/tr/css21/visuren.html#x43">stacking context</a> [[!CSS21]] the same way that CSS <a href="https://www.w3.org/TR/css-color-4/#transparency">'opacity'</a> does. One of the consequences is that elements with z-index must not honor the depth of elements outside of the group.<br> -->
8890

8991
Everything in CSS that creates a <a href="https://www.w3.org/TR/CSS21/zindex.html">stacking context</a> must be considered an <a href="#isolatedgroups">‘isolated’ group</a>. HTML elements themselves should not create groups.
9092

@@ -121,7 +123,7 @@ This behavior is described in more detail in <a href="#blending">Blending</a>.
121123
Name: mix-blend-mode
122124
Value: <<blend-mode>>
123125
Initial: normal
124-
Applies to: All elements. In SVG, it applies to <a href="https://www.w3.org/TR/SVG/intro.html#TermContainerElement">container elements</a>, <a href="https://www.w3.org/TR/SVG/intro.html#TermGraphicsElement">graphics elements</a> and <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsReferencingElement">graphics referencing elements</a>. [[SVG11]]
126+
Applies to: All elements. In SVG, it applies to <a href="https://www.w3.org/TR/SVG11/intro.html#TermContainerElement">container elements</a>, <a href="https://www.w3.org/TR/SVG11/intro.html#TermGraphicsElement">graphics elements</a> and <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsReferencingElement">graphics referencing elements</a>. [[SVG11]]
125127
Inherited: no
126128
Percentages: N/A
127129
Computed value: as specified
@@ -204,7 +206,7 @@ Applying a blendmode other than <a value>normal</a> to the element must establis
204206
parsing/mix-blend-mode-valid.html
205207
</wpt>
206208

207-
<div class="example">
209+
<div class="example" id='ex-duck-on-lime'>
208210
<p>Given the following sample markup:</p>
209211
<pre>
210212
&lt;body>
@@ -239,7 +241,7 @@ Blending of a transparent image on a lime backdrop.
239241
</div>
240242
</div>
241243

242-
<div class="example">
244+
<div class="example" id="ex-svg-screen-mode">
243245
<p>Given the following svg code:</p>
244246
<pre>
245247
<!-- -->&lt;svg>
@@ -264,7 +266,7 @@ Example of 3 circles blending with a screen blend mode
264266

265267
</div>
266268

267-
<div class="example">
269+
<div class="example" id="ex-opacity-stacking">
268270
<p>In the following style sheet and document fragment:</p>
269271
<pre>
270272
body { background-color: lime; }
@@ -290,7 +292,7 @@ Note how the image is not blending with the lime color.
290292
</p>
291293
</div>
292294

293-
<div class="example">
295+
<div class="example" id="ex-overlay-blend">
294296
<p>Given the following sample markup:</p>
295297
<pre>
296298
&lt;body>
@@ -331,7 +333,7 @@ By default, elements use the ''isolation/auto'' keyword which implies that they
331333
Name: isolation
332334
Value: <<isolation-mode>>
333335
Initial: auto
334-
Applies to: All elements. In SVG, it applies to <a href="https://www.w3.org/TR/SVG/intro.html#TermContainerElement">container elements</a>, <a href="https://www.w3.org/TR/SVG/intro.html#TermGraphicsElement">graphics elements</a> and <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsReferencingElement">graphics referencing elements</a>. [[SVG11]]
336+
Applies to: All elements. In SVG, it applies to <a href="https://www.w3.org/TR/SVG11/intro.html#TermContainerElement">container elements</a>, <a href="https://www.w3.org/TR/SVG11/intro.html#TermGraphicsElement">graphics elements</a> and <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsReferencingElement">graphics referencing elements</a>. [[SVG11]]
335337
Inherited: no
336338
Percentages: N/A
337339
Computed value: as specified
@@ -392,7 +394,7 @@ The 'background-blend-mode' list must be applied in the same order as 'backgroun
392394
If the 'background' [[!CSS3BG]] shorthand is used, the 'background-blend-mode'
393395
property for that element must be reset to its initial value.
394396

395-
<div class="example">
397+
<div class="example" id="ex-background-blend">
396398
<p>Given the following sample markup:</p>
397399
<pre>
398400
<!-- -->&lt;body>
@@ -556,7 +558,7 @@ Co = co / αo
556558
</div>
557559

558560
<h4 id="simplealphacompositingexamples">Examples of simple alpha compositing</h4>
559-
<div class="example">
561+
<div class="example" id="ex-basic-alpha">
560562
<div class="figure">
561563
<img src="examples/simple_box.svg" alt="Simple box showing alpha compositing">
562564
<p class="caption"></p>
@@ -579,7 +581,7 @@ co = RGB(1,0,0)
579581
</p>
580582
</div>
581583

582-
<div class="example">
584+
<div class="example" id="ex-shapes-intersect">
583585
<div class="figure">
584586
<img src="examples/two_box.svg" alt="simple shape">
585587
<p class="caption"></p>
@@ -616,7 +618,7 @@ Co = RGB(0, 0, 1)
616618
</p>
617619
</div>
618620

619-
<div class="example">
621+
<div class="example" id="ex-transparent-over-opaque">
620622
<div class="figure">
621623
<img src="examples/two_box_transparency.svg" alt="interaction of a solid box with a transparent box on top">
622624
<p class="caption"></p>
@@ -652,7 +654,7 @@ Co = RGB(0.5, 0, 0.5)
652654
</p>
653655
</div>
654656

655-
<div class="example">
657+
<div class="example" id="ex-two-transparent">
656658
<div class="figure">
657659
<img src="examples/two_box_transparency_both.svg" alt="interaction of 2 transparent boxes">
658660
<p class="caption"></p>
@@ -723,7 +725,7 @@ The <dfn export>backdrop</dfn> is the content behind the element and is what the
723725
This means that the backdrop is the result of compositing all previous elements.
724726

725727
<h3 id="backdropexamples">Examples of backdrop calculation</h3>
726-
<div class="example">
728+
<div class="example" id="ex-simple-backdrop-calculation">
727729
<div class="figure">
728730
<img src="examples/simple_backdrop.svg" alt="example of a simple backdrop calculation">
729731
<p class="caption"></p>
@@ -733,7 +735,7 @@ This example has 2 simple shapes. The backdrop for the blue shape includes the b
733735
The dotted line shows the area that is examined during compositing of the blue shape.
734736
</p>
735737
</div>
736-
<div class="example">
738+
<div class="example" id="ex-backdrop-with-alpha">
737739
<div class="figure">
738740
<img src="examples/simple_backdrop_alpha.svg" alt="example of a backdrop with alpha">
739741
<p class="caption"></p>
@@ -1167,7 +1169,7 @@ with:
11671169
<li>αb: the <a>backdrop</a> alpha
11681170
</ul>
11691171

1170-
<div class="example">
1172+
<div class="example" id="ex-blend-with-opacity">
11711173
<div class="figure">
11721174
<img src="examples/blend_background_opacity.svg" alt="example of blending with opacity">
11731175
<p class="caption"></p>
@@ -1494,7 +1496,7 @@ Creates a color with the luminosity of the source color and the hue and saturati
14941496

14951497
Note: In the following example, the elements used to construct the paper airplane are within a group. Each of these elements has their blend mode set to multiply.
14961498

1497-
<div class="example">
1499+
<div class="example" id="ex-isolated-group">
14981500
The airplane on the left is a normal group, the airplane on the right is an <a href="#isolatedgroups">isolated group</a>.</p>
14991501
<p>
15001502
In the isolated group, the elements within the group are composited onto an empty initial backdrop, this stops the elements within the group multiplying with the backdrop.

0 commit comments

Comments
 (0)