Compositing and Blending Module Level 1

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 = 1
Calculating 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 = 1
Calculating 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.75
Calculating 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)
6.
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 place
Cs = (1 - αb) x Cs + αb x B(Cb, Cs)
Composite
Co = αs x Fa x Cs + αb x Fb x Cb
Where:
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
7.
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.
7.1.
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.
8.
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.
8.1.
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) + C
When adding attributes to the group such as
isolate
, blending modes other than
normal
or Porter Duff compositing operators other than
source-over
, groups may no longer be invariant.
8.2.
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.
8.3.
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.
Tests
root-element-background-image-transparency-001.html
(live test)
(source)
root-element-background-image-transparency-002.html
(live test)
(source)
root-element-background-image-transparency-003.html
(live test)
(source)
root-element-background-image-transparency-004.html
(live test)
(source)
root-element-background-transparency.html
(live test)
(source)
root-element-blend-mode.html
(live test)
(source)
root-element-filter-background-clip-text-crash.html
(live test)
(source)
root-element-filter.html
(live test)
(source)
root-element-opacity-change.html
(live test)
(source)
root-element-opacity.html
(live test)
(source)
8.4.
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.
9.
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
Note:
Destination is synonymous with backdrop. The term destination is used in this section as this is considered the standard when working with Porter Duff compositing. Additionally, the compositing operators use
destination
in their names.
The contribution from each region to the final pixel color is defined by the coverage of the shape at that pixel, and the operator in use.
Coverage is specified in terms of alpha. Full alpha (1) implies full coverage, while zero alpha (0) implies no coverage.
This means that the area of each region within the sub-pixel is dependent on the coverage of each shape contributing to the pixel.
The area of each region can be calculated with the following equations:
Both
αs x αb
Source only
αs x (1 – αb)
Destination only
αb x (1 – αs)
None
(1 – αs) x (1 – αb)
The figure above represents coverage of 0.5 for both source and destination.
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.25
Therefore, the coverage of each region is 0.25 in this example.
9.1.
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)
9.1.1.
Clear
No regions are enabled.
Fa = 0; Fb = 0
co = 0
αo = 0
9.1.2.
Copy
Only the source will be present.
Fa = 1; Fb = 0
co = αs x Cs
αo = αs
9.1.3.
Destination
Only the destination will be present.
Fa = 0; Fb = 1
co = αb x Cb
αo = αb
9.1.4.
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)
9.1.5.
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
9.1.6.
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
9.1.7.
Destination In
Destination which overlaps the source, replaces the source.
Fa = 0; Fb = αs
co = αb x Cb x αs
αo = αb x αs
9.1.8.
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)
9.1.9.
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)
9.1.10.
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)
9.1.11.
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
9.1.12.
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)
9.1.13.
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
9.2.
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.
10.
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
The result of the mixing formula must be clamped to the minimum and maximum values of the color range.
The result of the mixing function is modulated by the backdrop alpha. A fully opaque backdrop allows the mixing function to be fully realized.
A transparent backdrop will cause the final result to be a weighted average between the source color and mixed color with the weight controlled by the backdrop alpha.
The value of the new color becomes:
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
10.1.
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.
10.1.1.
normal
blend mode
This is the default attribute which specifies no blending. The blending formula simply selects the source color.
B(Cb, Cs) = Cs
10.1.2.
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
10.1.3.
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)
10.1.4.
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.
10.1.5.
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)
10.1.6.
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.
10.1.7.
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))
10.1.8.
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)
10.1.9.
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.
10.1.10.
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)
10.1.11.
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 |
10.1.12.
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
10.2.
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.
The nonseparable blend mode formulas make use of several auxiliary functions:
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;
10.2.1.
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))
10.2.2.
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))
10.2.3.
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))
10.2.4.
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))
10.3.
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
The following changes were made relative to the
Candidate Recommendation of 20 February 2014
force isolation of SVG images embedded as no longer at risk
removed destination as an option for

The following changes were made relative to the
Last Call
Working draft of 7 January 2014
unneeded normative and informative references were removed
The following changes were made relative to the
Last Call
Working draft of 10 October 2013
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
The following changes were made relative to the
Working
Draft of 2013-06-25
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
Tests
opacity-and-transform-animation-crash.html
(live test)
(source)
Conformance
Document conventions
Conformance requirements are expressed with a combination of
descriptive assertions and RFC 2119 terminology. The key words “MUST”,
“MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
“RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
document are to be interpreted as described in RFC 2119.
However, for readability, these words do not appear in all uppercase
letters in this specification.
All of the text of this specification is normative except sections
explicitly marked as non-normative, examples, and notes.
[RFC2119]
Examples in this specification are introduced with the words “for example”
or are set apart from the normative text with
class="example"
like this:
This is an example of an informative example.
Informative notes begin with the word “Note” and are set apart from the
normative text with
class="note"
, like this:
Note, this is an informative note.
Advisements are normative sections styled to evoke special attention and are
set apart from other normative text with

, like
this:
UAs MUST provide an accessible alternative.
Tests
Tests relating to the content of this specification
may be documented in “Tests” blocks like this one.
Any such block is non-normative.
Conformance classes
Conformance to this specification
is defined for three conformance classes:
style sheet
CSS
style sheet
renderer
UA
that interprets the semantics of a style sheet and renders
documents that use them.
authoring tool
UA
that writes a style sheet.
A style sheet is conformant to this specification
if all of its statements that use syntax defined in this module are valid
according to the generic CSS grammar and the individual grammars of each
feature defined in this module.
A renderer is conformant to this specification
if, in addition to interpreting the style sheet as defined by the
appropriate specifications, it supports all the features defined
by this specification by parsing them correctly
and rendering the document accordingly. However, the inability of a
UA to correctly render a document due to limitations of the device
does not make the UA non-conformant. (For example, a UA is not
required to render color on a monochrome monitor.)
An authoring tool is conformant to this specification
if it writes style sheets that are syntactically correct according to the
generic CSS grammar and the individual grammars of each feature in
this module, and meet all other conformance requirements of style sheets
as described in this module.
Partial implementations
So that authors can exploit the forward-compatible parsing rules to
assign fallback values, CSS renderers
must
treat as invalid (and
ignore
as appropriate
) any at-rules, properties, property values, keywords,
and other syntactic constructs for which they have no usable level of
support. In particular, user agents
must not
selectively
ignore unsupported component values and honor supported values in a single
multi-value property declaration: if any value is considered invalid
(as unsupported values must be), CSS requires that the entire declaration
be ignored.
Implementations of Unstable and Proprietary Features
To avoid clashes with future stable CSS features,
the CSSWG recommends
following best practices
for the implementation of
unstable
features and
proprietary extensions
to CSS.
Non-experimental implementations
Once a specification reaches the Candidate Recommendation stage,
non-experimental implementations are possible, and implementors should
release an unprefixed implementation of any CR-level feature they
can demonstrate to be correctly implemented according to spec.
To establish and maintain the interoperability of CSS across
implementations, the CSS Working Group requests that non-experimental
CSS renderers submit an implementation report (and, if necessary, the
testcases used for that implementation report) to the W3C before
releasing an unprefixed implementation of any CSS features. Testcases
submitted to W3C are subject to review and correction by the CSS
Working Group.
Further information on submitting testcases and implementation reports
can be found from on the CSS Working Group’s website at
Questions should be directed to the
public-css-testsuite@w3.org
mailing list.
Index
Terms defined by this specification
backdrop
, in § 7
background-blend-mode
, in § 3.4.3

, in § 3.4.1
color
, in § 10.2.3
color-burn
, in § 10.1.8
color-dodge
, in § 10.1.7

, in § 4
darken
, in § 10.1.5
difference
, in § 10.1.11
exclusion
, in § 10.1.12
hard-light
, in § 10.1.9
hue
, in § 10.2.1
isolation
, in § 3.4.2

, in § 3.4.2
lighten
, in § 10.1.6
luminosity
, in § 10.2.4
mix-blend-mode
, in § 3.4.1
multiply
, in § 10.1.2
normal
, in § 10.1.1
overlay
, in § 10.1.4
saturation
, in § 10.2.2
screen
, in § 10.1.3
soft-light
, in § 10.1.10
Terms defined by reference
[CSS-COLOR-4]
defines the following terms:
green
lime
opacity
[CSS-MASKING-1]
defines the following terms:
mask
[CSS-VALUES-4]
defines the following terms:
[CSS3BG]
defines the following terms:
background
background-image
[HTML]
defines the following terms:
body
div
globalCompositeOperation
img
References
Normative References
[CSS-COLOR-4]
Tab Atkins Jr.; Chris Lilley; Lea Verou.
CSS Color Module Level 4
. URL:
[CSS-MASKING-1]
Dirk Schulze; Brian Birtles; Tab Atkins Jr..
CSS Masking Module Level 1
. URL:
[CSS-VALUES-4]
Tab Atkins Jr.; Elika Etemad.
CSS Values and Units Module Level 4
. URL:
[CSS21]
Bert Bos; et al.
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
. URL:
[CSS3BG]
Elika Etemad; Brad Kemper.
CSS Backgrounds and Borders Module Level 3
. URL:
[HTML]
Anne van Kesteren; et al.
HTML Standard
. Living Standard. URL:
[RFC2119]
S. Bradner.
Key words for use in RFCs to Indicate Requirement Levels
. March 1997. Best Current Practice. URL:
[SVG11]
Erik Dahlström; et al.
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
. 16 August 2011. REC. URL:
Non-Normative References
[PORTERDUFF]
Thomas Porter; Tom Duff.
Compositing digital images
. July 1984.
Property Index
Name
Value
Initial
Applies to
Inh.
%ages
Anim­ation type
Canonical order
Com­puted value
Media
background-blend-mode
#
normal
All HTML elements
no
N/A
discrete
per grammar
as specified
visual
isolation

auto
All elements. In SVG, it applies to container elements, graphics elements and graphics referencing elements. [SVG11]
no
N/A
discrete
per grammar
as specified
visual
mix-blend-mode

normal
All elements. In SVG, it applies to container elements, graphics elements and graphics referencing elements. [SVG11]
no
N/A
discrete
per grammar
as specified
visual
MDN
background-blend-mode
In all current engines.
Firefox
30+
Safari
8+
Chrome
35+
Opera
Edge
79+
Edge (Legacy)
IE
None
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
Samsung Internet
Opera Mobile
MDN
isolation
In all current engines.
Firefox
36+
Safari
8+
Chrome
41+
Opera
30+
Edge
79+
Edge (Legacy)
IE
None
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
Samsung Internet
Opera Mobile
30+
MDN
mix-blend-mode
In all current engines.
Firefox
32+
Safari
8+
Chrome
41+
Opera
Edge
79+
Edge (Legacy)
IE
None
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
Samsung Internet
Opera Mobile
MDN
blend-mode
In all current engines.
Firefox
30+
Safari
8+
Chrome
35+
Opera
Edge
79+
Edge (Legacy)
IE
None
Firefox for Android
54+
iOS Safari
Chrome for Android
59+
Android WebView
Samsung Internet
Opera Mobile
22+