<blend-mode> =
normal |
darken | multiply | color-burn |
lighten | screen | color-dodge |
overlay | soft-light | hard-light |
difference | exclusion |
hue | saturation | color | luminosity
Applying a blendmode other than normal to the element must establish a new stacking context [[!CSS21]]. This group must then be blended and composited with the stacking context that contains the element.
Given the following sample markup:
<body> <img src="ducky.png"/> </body>
And the following style rule:
body { background-color: lime; }
... will produce the following result:
Partially transparent image on a lime backdrop
If we change the style rule to include blending:
body { background-color: lime; }
img { mix-blend-mode: multiply; }
... the output will be the image blending with the lime background of the body element.
Blending of a transparent image on a lime backdrop.
Given the following svg code:
<svg> <circle cx="40" cy="40" r="40" fill="red"/> <circle cx="80" cy="40" r="40" fill="lime"/> <circle cx="60" cy="80" r="40" fill="blue"/> </svg>
And the following style rule:
circle { mix-blend-mode: screen; }
... the output will be blending of the 3 circles. Each circle is rendered from bottom to top. Where the elements overlap, the blend mode produces a change in color.
Example of 3 circles blending with a screen blend mode
In the following style sheet and document fragment:
body { background-color: lime; }
div { background-color: red; width: 200px; opacity: .95}
img { mix-blend-mode: difference; }
<body>
<div>
<img src="ducky.png"/>
</div>
</body>
... the 'opacity' on the div element is causing the creation of a stacking context. This causes the creation of a new group so the image doesn't blend with the color of the body element.
Example of blending within a stacking context.
Note how the image is not blending with the lime color.
Given the following sample markup:
<body>
<div>
<p>''overlay'' blending on text</p>
</div>
</body>
And the following style rule:
div { background-image: url('texture.png'); }
@font-face {
font-family: "Mythos Std";
src: url("http://myfontvendor.com/mythos.otf");
}
p {
mix-blend-mode: overlay;
font-family: "Mythos Std"
}
Text with a blend overlay on top of an image.
The 'isolation' property
In SVG, this defines whether an element is isolated or not.For CSS, setting 'isolation' to ''isolation/isolate'' will turn the element into a stacking context. By default, elements use the ''isolation/auto'' keyword which implies that they are not isolated. However operations that cause the creation of stacking context [[!CSS21]] must cause a group to be isolated. These operations are described in 'behavior specific to HTML' and 'behavior specific to SVG'.
Name: isolation Value: <The syntax of the property of <> Initial: auto Applies to: All elements. In SVG, it applies to container elements, graphics elements and graphics referencing elements. [[SVG11]] Inherited: no Percentages: N/A Computed value: as specified Media: visual Animation type: discrete
<isolation-mode> = auto | isolate
In CSS, a background image or the content of an img must always be rendered into an isolated group.
For instance, if you link to an SVG file through the img tag, the artwork of that SVG will not blend with the backdrop of the content.
The 'background-blend-mode' property
Defines the blending mode of each background layer. Each background layer must blend with the element's background layer that is below it and the element's background color. Background layers must not blend with the content that is behind the element, instead they must act as if they are rendered into an isolated group. The description of the 'background-blend-mode' property is as follows:Name: background-blend-mode Value: <># Initial: normal Applies to: All HTML elements Inherited: no Percentages: N/A Computed value: as specified Media: visual Animation type: discrete
Given the following sample markup:
<body> <div></div> </body>
And the following style rule:
body { background-color: lime; }
div {
width: 200px;
height: 200px;
background-size: 200px 200px;
background-repeat:no-repeat;
background-image: linear-gradient(to right, #000000 0%,#ffffff 100%), url('ducky.png');
background-blend-mode: difference, normal;
}
Blending of 2 background images.
Note that the gradient is not blending with the color of body. Instead it retains its original color.
Specifying Compositing and Blending in Canvas 2D
The canvas 2d context defines the {{globalCompositeOperation}} attribute that is used to set the current compositing and blending operator. This property takes the following value:- ‘globalCompositeOperation’
-
Value: < > | < > Initial: source-over
<composite-mode> = clear | copy | source-over | destination-over | source-in |
destination-in | source-out | destination-out | source-atop |
destination-atop | xor | lighter
Introduction to compositing
Compositing is the combining of a graphic element with its backdrop. In the model described in this specification there are two steps to the overall compositing operation - Porter-Duff compositing and blending. The blending step determines how the colors from the graphic element and the backdrop interact. Typically, the blending step is performed first, followed by the Porter-Duff compositing step. In the blending step, the resultant color from the mix of the element and the the backdrop is calculated. The graphic element's color is replaced with this resultant color. The graphic element is then composited with the backdrop using the specified compositing operator. Note: Shape is defined by the mathematical description of the shape. A particular point is either inside the shape or it is not. There are no gradations. Note: Opacity is described using an alpha value, stored alongside the color value for each particular point. The alpha value is between 0 and 1, inclusive. A value of 0 means that the pixel has no coverage at that point, and is therefore transparent; i.e. there is no color contribution from any geometry because the geometry does not overlap this pixel. A value of 1 means that the pixel is fully opaque; the geometry completely overlaps the pixel.Simple alpha compositing
The formula for simple alpha compositing isco = Cs x αs + Cb x αb x (1 - αs)Where
- co: the premultiplied pixel value after compositing
- Cs: the color value of the source graphic element being composited
- αs: the alpha value of the source graphic element being composited
- Cb: the color value of the backdrop
- αb: the alpha value of the backdrop
αo = αs + αb x (1 - αs)Where
- αo: the alpha value of the composite
- αs: the alpha value of the graphic element being composited
- αb: the alpha value of the backdrop
Often, it can be more efficient to store a pre-multiplied value for the color and opacity.
The pre-multiplied value is given by
cs = Cs x αswith
- cs: the pre-multiplied value
- Cs: the color value
- αs: the alpha value
Thus the formula for simple alpha compositing using pre-multiplied values becomes
co = cs + cb x (1 - αs)
To extract the color component of a pre-multiplied value, the formula is reversed:
Co = co / αo
Examples of simple alpha compositing
This describes the most basic case. It consists of 1 shape that is filled with a solid color (α = 1). The shape is composited with an empty background. The empty background has no effect on the resultant composite.
Cs = RGB(1,0,0) αs = 1 Cb = RGB(0,0,0) αb = 0 co = Cs x αs + Cb x αb x (1 - αs) co = RGB(1,0,0) x 1 + RGB(0,0,0) x 0 x (1 - 1) co = RGB(1,0,0) x 1 co = RGB(1,0,0)
This is a more complex example. There is no transparency, but the 2 shapes intersect.
Applying the compositing formula in the area of intersection, gives:
Cs = RGB(0,0,1) αs = 1 Cb = RGB(1,0,0) αb = 1 co = Cs x αs + Cb x αb x (1 - αs) co = RGB(0,0,1) x 1 + RGB(1,0,0) x 1 x (1 - 1) co = RGB(0,0,1) x 1 + RGB(1,0,0) x 1 x 0 co = RGB(0,0,1) x 1 co = RGB(0,0,1)Calculating the alpha of the resultant composite
αo = αs + αb x (1 - αs) αo = 1 + 1 x (1 - 1) αo = 1Calculating the color component of the resultant composite
Co = co / αo Co = RGB(0, 0, 1) / 1 Co = RGB(0, 0, 1)
This is an example where the shape has some transparency, but the backdrop is fully opaque.
Applying the compositing formula in the area of intersection, gives:
Cs = RGB(0,0,1) αs = 0.5 Cb = RGB(1,0,0) αb = 1 co = Cs x αs + Cb x αb x (1 - αs) co = RGB(0,0,1) x 0.5 + RGB(1,0,0) x 1 x (1 - 0.5) co = RGB(0,0,1) x 0.5 + RGB(1,0,0) x 0.5 co = RGB(0.5,0,0.5)Calculating the alpha of the resultant composite
αo = αs + αb x (1 - αs) αo = 0.5 + 1 x (1 - 0.5) αo = 1Calculating the color component of the resultant composite
Co = co / αo Co = RGB(0.5, 0, 0.5) / 1 Co = RGB(0.5, 0, 0.5)
Figure 4 shows an example where both the shape and the backdrop are transparent.
Applying the compositing formula in the area of intersection, gives:
Cs = RGB(0,0,1) αs = 0.5 Cb = RGB(1,0,0) αb = 0.5 co = Cs x αs + Cb x αb x (1 - αs) co = RGB(0,0,1) x 0.5 + RGB(1,0,0) x 0.5 x (1 - 0.5) co = RGB(0,0,1) x 0.5 + RGB(1,0,0) x 0.25 co = RGB(0.25, 0, 0.5)Calculating the alpha of the resultant composite
αo = αs + αb x (1 - αs) αo = 0.5 + 0.5 x (1 - 0.5) αo = 0.75Calculating the color component of the resultant composite
Co = co / αo Co = RGB(0.25, 0, 0.5) / 0.75 Co = RGB(0.33, 0, 0.66)
General Formula for Compositing and Blending
The general formula for compositing and blending which allows for selection of the compositing operator and blending function comprises two steps. The terms used in these functions will be described in detail in the following sections. Apply the blend in placeCs = (1 - αb) x Cs + αb x B(Cb, Cs)Composite
Co = αs x Fa x Cs + αb x Fb x CbWhere:
- Cs: is the source color
- Cb: is the backdrop color
- αs: is the source alpha
- αb: is the backdrop alpha
- B(Cb, Cs): is the mixing function
- Fa: is defined by the Porter Duff operator in use
- Fb: is defined by the Porter Duff operator in use
Backdrop calculation
The backdrop is the content behind the element and is what the element is composited with. This means that the backdrop is the result of compositing all previous elements.Examples of backdrop calculation
This example has 2 simple shapes. The backdrop for the blue shape includes the bottom right corner of the red shape . The dotted line shows the area that is examined during compositing of the blue shape.
The shape in the backdrop has an alpha value. The alpha value of the backdrop shape is preserved when the backdrop is calculated.
Compositing Groups
Compositing groups allow more control over the interaction of compositing with the backdrop. Groups can be used to specify how a compositing effect within a group will interact with the content that is already in the scene (the backdrop). Compositing groups may be made up of any number of elements, and may contain other compositing groups. The default properties of a compositing group shall cause no visual difference compared to having no group. See Group Invariance. A compositing group is rendered by first compositing the elements of the group onto the initial backdrop. The result of this is a single element containing color and alpha information. This element is then composited onto the group backdrop. Steps shall be taken to ensure the group backdrop makes only a single contribution to the final composite.- initial backdrop
- The initial backdrop is the backdrop used for compositing the group's first element. This will be the same as the group backdrop in a non-isolated group, or a fully transparent backdrop for an isolated group.
- group backdrop
- The group backdrop is the result of compositing all elements up to but not including the first element in the group.
Group invariance
An important property of simple alpha compositing is its group invariance. This behavior is preserved in the more complex model described in this specification. Adding or removing grouping with default attributes shall not show visual differences.so: A + B + C = A + (B + C) = (A + B) + CWhen adding attributes to the group such as ''isolation/isolate'', blending modes other than ''normal'' or Porter Duff compositing operators other than ''source-over'', groups may no longer be invariant.
Isolated Groups
In an isolated group, the initial backdrop shall be black and fully transparent. In this instance, the initial backdrop is different than the group backdrop. The only interaction with the group backdrop shall occur when the group's computed color, shape and alpha are composited with it. See 'Isolated groups and Porter Duff modes' for a description of the effect of isolated groups on compositing. See 'Effect of group isolation on blending' for a description of the effect of isolated groups on blending.The Root Element Group
The isolated group for the root element is the root element group. All elements and other groups are composited into this group. The canvas background [[!CSS3BG]] is painted into the root element group, and any filter, clip-path, mask and and opacity for the root element is then applied, before compositing into the root group, if present.The Root Group
The root group encompasses the entire canvas and contains (or is below) the root element group of the root element of a web page.Browsers often use an infinite white, 100% opaque canvas surface [[!CSS3BG]] in the root group, for final compositing, but this is not required.
Advanced compositing features
Simple alpha compositing uses the source-over Porter Duff compositing operator. Porter Duff compositing is based on a model of a pixel in which two shapes (source and destination) may contribute to the final color of the pixel. The pixel is divided into 4 sub-pixel regions and each region represents a possible combination of source and destination. [[PORTERDUFF]] The four regions are:- Source Only
- Where only the source contributes to the pixel color
- Destination only
- where only the destination contributes to the pixel color
- Both
- Source and Destination – where both the source and destination may combine to define the pixel color
- None
- No source or Destination – where neither make a contribution to the final pixel color
| Both | αs x αb |
|---|---|
| Source only | αs x (1 – αb) |
| Destination only | αb x (1 – αs) |
| None | (1 – αs) x (1 – αb) |
Both = 0.5 x 0.5 = 0.25 Source Only = 0.5 (1 – 0.5) = 0.25 Destination Only = 0.5(1 – 0.5) = 0.25 None = (1 – 0.5)(1 – 0.5) = 0.25Therefore, the coverage of each region is 0.25 in this example.
The Porter Duff Compositing Operators
The landmark paper by Thomas Porter and Tom Duff, who worked for Lucasfilm, defined the algebra of compositing and developed the twelve "Porter Duff" operators. These operators control the results of mixing the four sub-pixel regions formed by the overlapping of graphical objects that have an alpha or pixel coverage channel/value. The operators use all practical combinations of the four regions. There are 12 basic Porter Duff operators, satisfying all possible combinations of source and destination. From the geometric representation of each operator, the contribution of each shape can be seen to be expressed as a fraction of the total coverage of the output. For example, in source over, the possible contribution of source is full (1) and the possible contribution of destination is whatever is remaining (1 – αs). This is modified by the coverage of source and destination to give the equation for the final coverage of the pixel:
αo = αs x 1 + αb x (1 – αs)
The fractional terms Fa (1 in this example) and Fb (1 – αs in this example) are defined for each operator and specify the fraction of the shapes that may contribute to the final pixel value.
The general form of the equation for coverage is:
αs x Fa + αb x Fb
and incorporating color gives the general Porter Duff equation
co = αs x Fa x Cs + αb x Fb x Cb
Where:
- co is the output color pre-multiplied with the output alpha [0 <= co <= 1]
- αs is the coverage of the source Fa is defined by the operator and controls inclusion of the source Cs is the color of the source (not multiplied by alpha)
- αb is the coverage of the destination Fb is defined by the operator and controls inclusion of the destination Cb is the color of the destination (not multiplied by alpha)
Clear
No regions are enabled.
Fa = 0; Fb = 0
co = 0
αo = 0
Copy
Only the source will be present.
Fa = 1; Fb = 0
co = αs x Cs
αo = αs
Destination
Only the destination will be present.
Fa = 0; Fb = 1
co = αb x Cb
αo = αb
Source Over
Source is placed over the destination.
Fa = 1; Fb = 1 – αs
co = αs x Cs + αb x Cb x (1 – αs)
αo = αs + αb x (1 – αs)
Destination Over
Destination is placed over the source.
Fa = 1 – αb; Fb = 1
co = αs x Cs x (1 – αb) + αb x Cb
αo = αs x (1 – αb) + αb
Source In
The source that overlaps the destination, replaces the destination.
Fa = αb; Fb = 0
co = αs x Cs x αb
αo = αs x αb
Destination In
Destination which overlaps the source, replaces the source.
Fa = 0; Fb = αs
co = αb x Cb x αs
αo = αb x αs
Source Out
Source is placed, where it falls outside of the destination.
Fa = 1 – αb; Fb = 0
co = αs x Cs x (1 – αb)
αo = αs x (1 – αb)
Destination Out
Destination is placed, where it falls outside of the source.
Fa = 0; Fb = 1 – αs
co = αb x Cb x (1 – αs)
αo = αb x (1 – αs)
Source Atop
Source which overlaps the destination, replaces the destination. Destination is placed elsewhere.
Fa = αb; Fb = 1 – αs
co = αs x Cs x αb + αb x Cb x (1 – αs)
αo = αs x αb + αb x (1 – αs)
Destination Atop
Destination which overlaps the source replaces the source. Source is placed elsewhere.
Fa = 1 - αb; Fb = αs
co = αs x Cs x (1 - αb) + αb x Cb x αs
αo = αs x (1 - αb) + αb x αs
XOR
The non-overlapping regions of source and destination are combined.
Fa = 1 - αb; Fb = 1 – αs
co = αs x Cs x (1 - αb) + αb x Cb x (1 – αs)
αo = αs x (1 - αb) + αb x (1 – αs)
Lighter
Display the sum of the source image and destination image. It is defined in the Porter Duff paper as the ''plus'' operator [[PORTERDUFF]].
Fa = 1; Fb = 1
co = αs x Cs + αb x Cb;
αo = αs + αb
Group compositing behavior with Porter Duff modes
When compositing the elements within an isolated group, the elements are composited over a transparent black initial backdrop. If the bottom element in the group uses a Porter Duff compositing operator which is dependent on the backdrop, such as destination, source-in, destination-in, destination-out or source-atop, then the result of the composite will be empty. Subsequent elements within the group are composited with the result of the first composite.Blending
Blending is the aspect of compositing that calculates the mixing of colors where the source element and backdrop overlap.Conceptually, the colors in the source element are blended in place with the backdrop. After blending, the modified source element is composited with the backdrop. In practice, this is usually all performed in one step.
The blending calculations must not use pre-multiplied color values. The "mixing" formula is defined as:
Cm = B(Cb, Cs)
with:
- Cm: the result color after blending
- B: the formula that does the blending
- Cb: the backdrop color
- Cs: the source color
Cr = (1 - αb) x Cs + αb x B(Cb, Cs)
with:
- Cr: the result color
- B: the formula that does the blending
- Cs: the source color
- Cb: the backdrop color
- αb: the backdrop alpha
This example has a red rectangle with a blending mode that is placed on top of a set of green rectangles that have different levels of opacity.
Note how the top rectangle shifts more toward red as the opacity of the backdrop gets smaller.
Note: The following formula gives the color value in the area where the source and backdrop intersects and then composites with the specified Porter Duff compositing formula. For simple alpha blending, the formula thus becomes:
simple alpha compositing:
co = cs + cb x (1 - αs)
written as non-premultiplied:
αo x Co = αs x Cs + (1 - αs) x αb x Cb
now substitute the result of blending for Cs:
αo x Co = αs x ((1 - αb) x Cs + αb x B(Cb, Cs)) + (1 - αs) x αb x Cb
= αs x (1 - αb) x Cs + αs x αb x B(Cb, Cs) + (1 - αs) x αb x Cb
Separable blend modes
A blend mode is termed separable if each component of the result color is completely determined by the corresponding components of the constituent backdrop and source colors — that is, if the mixing formula is applied separately to each set of corresponding components. Each of the following blend modes will apply the blending function B(Cb, Cs) on each of the color components. For simplicity, all the examples in this chapter use source-over compositing.normal blend mode
This is the default attribute which specifies no blending. The blending formula simply selects the source color.
B(Cb, Cs) = Cs
multiply blend mode
The source color is multiplied by the destination color and replaces the destination. The resultant color is always at least as dark as either the source or destination color. Multiplying any color with black results in black. Multiplying any color with white preserves the original color.
B(Cb, Cs) = Cb x Cs
screen blend mode
Multiplies the complements of the backdrop and source color values, then complements the result. The result color is always at least as light as either of the two constituent colors. Screening any color with white produces white; screening with black leaves the original color unchanged. The effect is similar to projecting multiple photographic slides simultaneously onto a single screen.
B(Cb, Cs) = 1 - [(1 - Cb) x (1 - Cs)]
= Cb + Cs -(Cb x Cs)
overlay blend mode
Multiplies or screens the colors, depending on the backdrop color value. Source colors overlay the backdrop while preserving its highlights and shadows. The backdrop color is not replaced but is mixed with the source color to reflect the lightness or darkness of the backdrop.
B(Cb, Cs) = HardLight(Cs, Cb)
Overlay is the inverse of the hard-light blend mode. See the definition of hard-light for the formula.
darken blend mode
Selects the darker of the backdrop and source colors. The backdrop is replaced with the source where the source is darker; otherwise, it is left unchanged.
B(Cb, Cs) = min(Cb, Cs)
lighten blend mode
Selects the lighter of the backdrop and source colors. The backdrop is replaced with the source where the source is lighter; otherwise, it is left unchanged.
B(Cb, Cs) = max(Cb, Cs)
The result must be rounded down if it exceeds the range.
color-dodge blend mode
Brightens the backdrop color to reflect the source color. Painting with black produces no changes.
if(Cb == 0)
B(Cb, Cs) = 0
else if(Cs == 1)
B(Cb, Cs) = 1
else
B(Cb, Cs) = min(1, Cb / (1 - Cs))
color-burn blend mode
Darkens the backdrop color to reflect the source color. Painting with white produces no change.
if(Cb == 1)
B(Cb, Cs) = 1
else if(Cs == 0)
B(Cb, Cs) = 0
else
B(Cb, Cs) = 1 - min(1, (1 - Cb) / Cs)
hard-light blend mode
Multiplies or screens the colors, depending on the source color value. The effect is similar to shining a harsh spotlight on the backdrop.
if(Cs <= 0.5)
B(Cb, Cs) = Multiply(Cb, 2 x Cs)
else
B(Cb, Cs) = Screen(Cb, 2 x Cs -1)
See the definition of multiply and screen for their formulas.
soft-light blend mode
Darkens or lightens the colors, depending on the source color value. The effect is similar to shining a diffused spotlight on the backdrop.
if(Cs <= 0.5)
B(Cb, Cs) = Cb - (1 - 2 x Cs) x Cb x (1 - Cb)
else
B(Cb, Cs) = Cb + (2 x Cs - 1) x (D(Cb) - Cb)
with
if(Cb <= 0.25)
D(Cb) = ((16 * Cb - 12) x Cb + 4) x Cb
else
D(Cb) = sqrt(Cb)
difference blend mode
Subtracts the darker of the two constituent colors from the lighter color. Painting with white inverts the backdrop color; painting with black produces no change.
B(Cb, Cs) = | Cb - Cs |
exclusion blend mode
Produces an effect similar to that of the Difference mode but lower in contrast. Painting with white inverts the backdrop color; painting with black produces no change
B(Cb, Cs) = Cb + Cs - 2 x Cb x Cs
Non-separable blend modes
Nonseparable blend modes consider all color components in combination as opposed to the separable ones that look at each component individually. All of these blend modes conceptually entail the following steps:- Convert the backdrop and source colors from the blending color space to an intermediate hue-saturation-luminosity representation.
- Create a new color from some combination of hue, saturation, and luminosity components selected from the backdrop and source colors.
- Convert the result back to the original color space.
Lum(C) = 0.3 x Cred + 0.59 x Cgreen + 0.11 x Cblue
ClipColor(C)
L = Lum(C)
n = min(Cred, Cgreen, Cblue)
x = max(Cred, Cgreen, Cblue)
if(n < 0)
C = L + (((C - L) × L) / (L - n))
if(x > 1)
C = L + (((C - L) × (1 - L)) / (x - L))
return C
SetLum(C, l)
d = l - Lum(C)
Cred = Cred + d
Cgreen = Cgreen + d
Cblue = Cblue + d
return ClipColor(C)
Sat(C) = max(Cred, Cgreen, Cblue) - min(Cred, Cgreen, Cblue)
The subscripts min, mid, and max in the next function refer to the color
components having the minimum, middle, and maximum values upon entry to the function.
SetSat(C, s)
if(Cmax > Cmin)
Cmid = (((Cmid - Cmin) x s) / (Cmax - Cmin))
Cmax = s
else
Cmid = Cmax = 0
Cmin = 0
return C;
hue blend mode
Creates a color with the hue of the source color and the saturation and luminosity of the backdrop color.
B(Cb, Cs) = SetLum(SetSat(Cs, Sat(Cb)), Lum(Cb))
saturation blend mode
Creates a color with the saturation of the source color and the hue and luminosity of the backdrop color. Painting with this mode in an area of the backdrop that is a pure gray (no saturation) produces no change.
B(Cb, Cs) = SetLum(SetSat(Cb, Sat(Cs)), Lum(Cb))
color blend mode
Creates a color with the hue and saturation of the source color and the luminosity of the backdrop color. This preserves the gray levels of the backdrop and is useful for coloring monochrome images or tinting color images.
B(Cb, Cs) = SetLum(Cs, Lum(Cb))
luminosity blend mode
Creates a color with the luminosity of the source color and the hue and saturation of the backdrop color. This produces an inverse effect to that of the Color mode.
B(Cb, Cs) = SetLum(Cb, Lum(Cs))
Effect of group isolation on blending
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.
The airplane on the left is a normal group, the airplane on the right is an isolated group.
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.
In the normal group, the elements within the group are composited onto the initial backdrop containing the land and sky. Therefore the elements of the airplane multiply with the land and sky.
In both instances, the result of the group composite is composited onto the land and sky using the normal mix-blend-mode (the default mix-blend-mode applied to the group).
Privacy Considerations
No new privacy considerations have been reported on this specification.
Security Considerations
It is important that the timing to the blending and compositing operations is independent of the source and destination pixel. Operations must be implemented in such a way that they always take the same amount of time regardless of the pixel values.If this rule is not followed, an attacker could infer information and mount a timing attack.
A timing attack is a method of obtaining information about content that is otherwise protected, based on studying the amount of time it takes for an operation to occur. If, for example, red pixels took longer to draw than green pixels, one might be able to reconstruct a rough image of the element being rendered, without ever having access to the content of the element.
Changes
The following changes were made relative to the Candidate Recommendation of 13 January 2015:- Added Privacy and Security sections
- Updated Animatable: no to Animation type: discrete
- Defined root elements for HTML and SVG, and the root element group
- Clarified that root groups are not necessarily opaque white
- Better definitions for root group and isolating groups
- Consistently use the multiplication symbol × rather than x or *
- Corrected examples that used ''green'' where ''lime'' was meant
- Corrected initial value of background-blend-mode
- Assorted markup and linking fixes
- force isolation of SVG images embedded as <img> no longer at risk
- removed destination as an option for <
>
- unneeded normative and informative references were removed
- knockout was removed from the non-normative section
- removed paragraph on SVG from simple alpha compositing
- updated abstract to include CSS and clarify intent
- removed clip-to-self and its references
- Changed section 5-10 to be normative + clarified notes/examples in those sections
- clipping was removed as one of the operators that creates an isolated group in SVG
- background-blend-mode was changed so it matches repeating behavior of other background syntaxes.
- The mix-composite property was removed
- all open issues were resolved