You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Link Defaults: css-color-3 (property) color, svg (property) mask
10
10
Deadline: 2014-08-17
11
11
Level: 1
12
12
Group: fxtf
13
13
Editor: Rik Cabanier, Adobe Systems Inc., cabanier@adobe.com
14
14
Editor: Nikos Andronikos, Canon Information Systems Research Australia, Nikos.Andronikos@cisra.canon.com.au
15
-
Abstract: Compositing describes how shapes of different elements are combined into a single image. There are various possible approaches for compositing. Previous versions of SVG and CSS used <a href="http://www.w3.org/TR/SVG11/masking.html#SimpleAlphaBlending">Simple Alpha Compositing</a>. In this model, each element is rendered into its own buffer and is then merged with its <a>backdrop</a> using the Porter Duff ''source-over'' operator. This specification will define a new compositing model that expands upon the Simple Alpha Compositing model by offering:
15
+
Abstract: Compositing describes how shapes of different elements are combined into a single image. There are various possible approaches for compositing. Previous versions of SVG and CSS used <a href="https://www.w3.org/TR/SVG11/masking.html#SimpleAlphaBlending">Simple Alpha Compositing</a>. In this model, each element is rendered into its own buffer and is then merged with its <a>backdrop</a> using the Porter Duff ''source-over'' operator. This specification will define a new compositing model that expands upon the Simple Alpha Compositing model by offering:
16
16
Abstract: <ul><li>additional Porter Duff compositing operators</li><li>advanced blending modes which allow control of how colors mix in the areas where shapes overlap</li><li>compositing groups</li></ul>
17
-
Abstract: In addition, this specification will define CSS properties for blending and group isolation and the properties of the <a href="http://www.w3.org/TR/2dcontext2/#dom-context-2d-globalcompositeoperation" title="canvas 2d globalcompositeoperation">‘globalcompositeoperation’</a> attribute as defined in [[2DCONTEXT2]].
17
+
Abstract: In addition, this specification will define CSS properties for blending and group isolation and the properties of the <a href="https://www.w3.org/TR/2dcontext2/#dom-context-2d-globalcompositeoperation" title="canvas 2d globalcompositeoperation">‘globalcompositeoperation’</a> attribute as defined in [[2DCONTEXT2]].
18
18
</pre>
19
19
20
20
<style type="text/css">
@@ -40,20 +40,20 @@ Each section of this document is normative unless otherwise specified.
40
40
41
41
This specification defines a set of CSS properties that affect the visual rendering of elements to which
42
42
those properties are applied; these effects are applied after elements have been sized and positioned according
43
-
to the <a href="http://www.w3.org/TR/CSS2/visuren.html" title="Visual formatting model">Visual formatting model</a>
43
+
to the <a href="https://www.w3.org/TR/CSS2/visuren.html" title="Visual formatting model">Visual formatting model</a>
44
44
from [[!CSS21]]. Some values of these properties result in the creation of a
and/or the creation of a <a spec="css21">stacking context</a>.
47
47
48
-
The 'background-blend-mode' property also builds upon the properties defined in the <a href="http://www.w3.org/TR/css3-background/#placement" title="Backgrounds and Borders">CSS Backgrounds and Borders</a> module [[!CSS3BG]].
48
+
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]].
49
49
50
-
This specification also enhances the rules as specified in <a href="http://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="http://www.w3.org/TR/css3-color/#alpha" title="simple alpha compositing">simple alpha compositing</a> of [[!CSS3COLOR]].
50
+
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]].
51
51
52
-
This module also extends the <a href="http://www.w3.org/TR/2dcontext2/#dom-context-2d-globalcompositeoperation" title="canvas 2d globalcompositeoperation">‘globalcompositeoperation’</a> as defined in [[!2DCONTEXT2]].
52
+
This module also extends the <a href="https://www.w3.org/TR/2dcontext2/#dom-context-2d-globalcompositeoperation" title="canvas 2d globalcompositeoperation">‘globalcompositeoperation’</a> as defined in [[!2DCONTEXT2]].
53
53
54
54
<h3 id="values">Values</h3>
55
55
56
-
This specification follows the <a href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
56
+
This specification follows the <a href="https://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
57
57
definition conventions</a> from [[!CSS21]]. Value types not defined in
58
58
this specification are defined in CSS Level 2 Revision 1 [[!CSS21]]. Other CSS
59
59
modules may expand the definitions of these value types: for example [[!CSS3COLOR]],
@@ -62,29 +62,29 @@ value type as used in this specification.
62
62
63
63
In addition to the property-specific values listed in their definitions,
64
64
all properties defined in this specification also accept the <a
keyword as their property value. For readability it has not been repeated
67
67
explicitly.
68
68
69
69
<h2 id="csscompositingandblending">Specifying Blending in CSS </h2>
70
70
<h3 id="compositingandblendingorder">Order of graphical operations</h3>
71
71
72
-
The compositing model must follow the <a href="http://www.w3.org/TR/SVG11/render.html#Introduction">SVG compositing</a> model [[!SVG11]]: first any filter effect is applied, then any clipping, masking, blending and compositing.
72
+
The compositing model must follow the <a href="https://www.w3.org/TR/SVG11/render.html#Introduction">SVG compositing</a> model [[!SVG11]]: first any filter effect is applied, then any clipping, masking, blending and compositing.
73
73
74
74
<h3 id="csscompositingrules_CSS">Behavior specific to HTML</h3>
75
75
<!-- <p>
76
-
If an element specifies non-default blending or <a href="http://www.w3.org/TR/css3-color/#transparency">'opacity'</a>, its <a href="http://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>
77
-
The application of blending other than 'normal' to an element must also establish a <a spec="css21">stacking context</a>[[!CSS21]] the same way that CSS <a href="http://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> -->
76
+
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>
77
+
The application of blending other than 'normal' to an element must also establish a <a spec="css21">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> -->
78
78
79
-
Everything in CSS that creates a <a href="http://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.
79
+
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.
80
80
81
81
An element that has blending applied, must blend with all the underlying content of the <a spec="css21">stacking context</a>[[!CSS21]] that that element belongs to.
82
82
83
83
<h3 id="csscompositingrules_SVG">Behavior specific to SVG</h3>
84
84
85
85
By default, every element must create a <a href="#isolatedgroups">non-isolated group</a>.
86
86
87
-
<!-- SVG has the following <a href="http://www.w3.org/TR/SVG11/render.html#Introduction">compositing model</a>: first any filter effect is applied, then any clipping, masking, blending and compositing -->
87
+
<!-- SVG has the following <a href="https://www.w3.org/TR/SVG11/render.html#Introduction">compositing model</a>: first any filter effect is applied, then any clipping, masking, blending and compositing -->
88
88
89
89
However, certain operations in SVG will create <a href="#isolatedgroups">isolated groups</a>. If one of the following features is used, the group must become isolated:
90
90
@@ -107,7 +107,7 @@ This behavior is described in more detail in <a href="#blending">Blending</a>.
107
107
Name: mix-blend-mode
108
108
Value: <<blend-mode>>
109
109
Initial: normal
110
-
Applies to: All elements. In SVG, it applies to <a href="http://www.w3.org/TR/SVG/intro.html#TermContainerElement">container elements</a>, <a href="http://www.w3.org/TR/SVG/intro.html#TermGraphicsElement">graphics elements</a> and <a href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsReferencingElement">graphics referencing elements</a>. [[SVG11]]
110
+
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]]
111
111
Inherited: no
112
112
Percentages: N/A
113
113
Computed value: as specified
@@ -250,7 +250,7 @@ By default, elements use the ''isolation/auto'' keyword which implies that they
250
250
Name: isolation
251
251
Value: <<isolation-mode>>
252
252
Initial: auto
253
-
Applies to: All elements. In SVG, it applies to <a href="http://www.w3.org/TR/SVG/intro.html#TermContainerElement">container elements</a>, <a href="http://www.w3.org/TR/SVG/intro.html#TermGraphicsElement">graphics elements</a> and <a href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsReferencingElement">graphics referencing elements</a>. [[SVG11]]
253
+
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]]
254
254
Inherited: no
255
255
Percentages: N/A
256
256
Computed value: as specified
@@ -324,7 +324,7 @@ Note that the gradient is not blending with the color of <a element>body</a>. In
324
324
325
325
<h2 id="canvascompositingandblending">Specifying Compositing and Blending in Canvas 2D</h2>
326
326
327
-
The <a href="http://www.w3.org/TR/2dcontext">canvas 2d</a> context defines the <a href="http://www.w3.org/TR/2dcontext/#dom-context-2d-globalcompositeoperation">‘globalCompositeOperation’</a> attribute that is used to set the current compositing and blending operator.
327
+
The <a href="https://www.w3.org/TR/2dcontext">canvas 2d</a> context defines the <a href="https://www.w3.org/TR/2dcontext/#dom-context-2d-globalcompositeoperation">‘globalCompositeOperation’</a> attribute that is used to set the current compositing and blending operator.
328
328
329
329
This property takes the following value:
330
330
@@ -1417,22 +1417,22 @@ If this rule is not followed, an attacker could infer information and mount a ti
1417
1417
<h2 id=changes>Changes</h2>
1418
1418
1419
1419
The following changes were made relative to the <a
1420
-
href="http://www.w3.org/TR/2014/CR-compositing-1-20140220/"> Candidate Recommendation of 20 February 2014</a>:
1420
+
href="https://www.w3.org/TR/2014/CR-compositing-1-20140220/"> Candidate Recommendation of 20 February 2014</a>:
1421
1421
<ul>
1422
1422
<li>force isolation of SVG images embedded as <img> no longer at risk</li>
1423
1423
<li>removed destination as an option for <<composite-mode>></li>
1424
1424
</ul>
1425
1425
1426
1426
The following changes were made relative to the <a
1427
-
href="http://www.w3.org/TR/2013/WD-compositing-1-20131010/"> Last Call
1427
+
href="https://www.w3.org/TR/2013/WD-compositing-1-20131010/"> Last Call
1428
1428
Working draft of 7 January 2014</a>:
1429
1429
1430
1430
<ul>
1431
1431
<li>unneeded normative and informative references were removed</li>
1432
1432
</ul>
1433
1433
1434
1434
The following changes were made relative to the <a
1435
-
href="http://www.w3.org/TR/2013/WD-compositing-1-20131010/"> Last Call
1435
+
href="https://www.w3.org/TR/2013/WD-compositing-1-20131010/"> Last Call
1436
1436
Working draft of 10 October 2013</a>:
1437
1437
1438
1438
<ul>
@@ -1444,7 +1444,7 @@ Working draft of 10 October 2013</a>:
1444
1444
</ul>
1445
1445
1446
1446
The following changes were made relative to the <a
0 commit comments