<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>Specifying Blending in CSS - Compositing and Blending Level 1 CR Test Suite</title> <style type="text/css"> @import "http://www.w3.org/StyleSheets/TR/base.css"; @import "../indices.css"; </style> </head> <body> <h1>Compositing and Blending Level 1 CR Test Suite</h1> <h2>Specifying Blending in CSS (50 tests)</h2> <table width="100%"> <col id="test-column"> <col id="refs-column"> <col id="flags-column"> <col id="info-column"> <thead> <tr> <th>Test</th> <th><abbr title="Rendering References">Refs</abbr></th> <th>Flags</th> <th>Info</th> </tr> </thead> <tbody id="s3"> <tr><th colspan="4" scope="rowgroup"> <a href="#s3">+</a> <a href="http://www.w3.org/TR/compositing-1/#csscompositingandblending">3 Specifying Blending in CSS</a></th></tr> <!-- 0 tests --> </tbody> <tbody id="s3.1"> <tr><th colspan="4" scope="rowgroup"> <a href="#s3.1">+</a> <a href="http://www.w3.org/TR/compositing-1/#compositingandblendingorder">3.1 Order of graphical operations</a></th></tr> <!-- 0 tests --> </tbody> <tbody id="s3.2"> <tr><th colspan="4" scope="rowgroup"> <a href="#s3.2">+</a> <a href="http://www.w3.org/TR/compositing-1/#csscompositingrules_CSS">3.2 Behavior specific to HTML</a></th></tr> <!-- 0 tests --> </tbody> <tbody id="s3.3"> <tr><th colspan="4" scope="rowgroup"> <a href="#s3.3">+</a> <a href="http://www.w3.org/TR/compositing-1/#csscompositingrules_SVG">3.3 Behavior specific to SVG</a></th></tr> <!-- 2 tests --> <tr id="mix-blend-mode-in-svg-image-3.3" class="svg"> <td> <a href="mix-blend-mode-in-svg-image.htm">mix-blend-mode-in-svg-image</a></td> <td><a href="reference/mix-blend-mode-svg-rectangle-ref.htm">=</a> </td> <td><abbr class="svg" title="Requires SVG support">SVG</abbr></td> <td>CSS Compositing and Blending: mix-blend-mode in an SVG linked as an image </td> </tr> <tr id="mix-blend-mode-svg-rectangle-3.3" class="primary svg"> <td><strong> <a href="mix-blend-mode-svg-rectangle.htm">mix-blend-mode-svg-rectangle</a></strong></td> <td><a href="reference/mix-blend-mode-svg-rectangle-ref.htm">=</a> </td> <td><abbr class="svg" title="Requires SVG support">SVG</abbr></td> <td>mix-blend-mode for a simple SVG element - rectangle </td> </tr> </tbody> <tbody id="s3.4"> <tr><th colspan="4" scope="rowgroup"> <a href="#s3.4">+</a> <a href="http://www.w3.org/TR/compositing-1/#csskeywords">3.4 CSS Properties</a></th></tr> <!-- 0 tests --> </tbody> <tbody id="s3.4.1"> <tr><th colspan="4" scope="rowgroup"> <a href="#s3.4.1">+</a> <a href="http://www.w3.org/TR/compositing-1/#mix-blend-mode">3.4.1 The mix-blend-mode property</a></th></tr> <!-- 49 tests --> <tr id="blending_in_a_group_with_filter-3.4.1" class="primary svg"> <td><strong> <a href="Blending_in_a_group_with_filter.htm">blending_in_a_group_with_filter</a></strong></td> <td></td> <td><abbr class="svg" title="Requires SVG support">SVG</abbr></td> <td>Blending in a group with filter <ul class="assert"> <li>Blending in a group with filter</li> </ul> </td> </tr> <tr id="blending_in_a_group_with_opacity-3.4.1" class="primary svg"> <td><strong> <a href="Blending_in_a_group_with_opacity.htm">blending_in_a_group_with_opacity</a></strong></td> <td></td> <td><abbr class="svg" title="Requires SVG support">SVG</abbr></td> <td>Blending in a group with opacity <ul class="assert"> <li>Blending in a group with opacity</li> </ul> </td> </tr> <tr id="line-with-svg-background-3.4.1" class="primary svg"> <td><strong> <a href="line-with-svg-background.htm">line-with-svg-background</a></strong></td> <td></td> <td><abbr class="svg" title="Requires SVG support">SVG</abbr></td> <td>CSS mix-blend-mode API Test </td> </tr> <tr id="mix-blend-mode-animation-3.4.1" class="primary"> <td><strong> <a href="mix-blend-mode-animation.htm">mix-blend-mode-animation</a></strong></td> <td><a href="reference/mix-blend-mode-animation-ref.htm">=</a> </td> <td></td> <td>Blended element with animation <ul class="assert"> <li>Test checks that an element with mix-blend-mode and animation blends with the parent element.</li> </ul> </td> </tr> <tr id="mix-blend-mode-blended-element-interposed-3.4.1" class="primary"> <td><strong> <a href="mix-blend-mode-blended-element-interposed.htm">mix-blend-mode-blended-element-interposed</a></strong></td> <td><a href="reference/green-square.htm">=</a> </td> <td></td> <td>CSS Reftest Reference <ul class="assert"> <li>Test checks that an element with mix-blend-mode having a child blends with the parent element.</li> </ul> </td> </tr> <tr id="mix-blend-mode-blended-element-overflow-hidden-and-border-radius-3.4.1" class="primary"> <td><strong> <a href="mix-blend-mode-blended-element-overflow-hidden-and-border-radius.htm">mix-blend-mode-blended-element-overflow-hidden-and-border-radius</a></strong></td> <td><a href="reference/mix-blend-mode-blended-element-overflow-hidden-and-border-radius-ref.htm">=</a> </td> <td></td> <td>blending between an element and its child having overflow:hidden and border-radius <ul class="assert"> <li>Test checks that an element having mix-blend-mode, overflow:hidden and border-radius blends correctly with its parent element.</li> </ul> </td> </tr> <tr id="mix-blend-mode-blended-element-overflow-scroll-3.4.1" class="primary"> <td><strong> <a href="mix-blend-mode-blended-element-overflow-scroll.htm">mix-blend-mode-blended-element-overflow-scroll</a></strong></td> <td><a href="reference/mix-blend-mode-blended-element-overflow-scroll-ref.htm">=</a> </td> <td></td> <td>blending between an element and its child having overflow:scroll <ul class="assert"> <li>Test checks that an element with mix-blend-mode and overflow:scroll blends with its parent element</li> </ul> </td> </tr> <tr id="mix-blend-mode-blended-element-with-transparent-pixels-3.4.1" class="primary"> <td><strong> <a href="mix-blend-mode-blended-element-with-transparent-pixels.htm">mix-blend-mode-blended-element-with-transparent-pixels</a></strong></td> <td><a href="reference/mix-blend-mode-blended-element-with-transparent-pixels-ref.htm">=</a> </td> <td></td> <td>blending between an element with transparent pixels and a child element <ul class="assert"> <li>Test checks that blending is performed with a parent that creates a stacking context, but not with any of its underlying content. The element, including its children, must blend with the parent as a whole.</li> </ul> </td> </tr> <tr id="mix-blend-mode-blended-with-3d-transform-3.4.1" class="primary"> <td><strong> <a href="mix-blend-mode-blended-with-3D-transform.htm">mix-blend-mode-blended-with-3d-transform</a></strong></td> <td><a href="reference/mix-blend-mode-blended-with-3D-transform-ref.htm">=</a> </td> <td></td> <td>mix-blend-mode between an element and its child with 3D transform <ul class="assert"> <li>Test checks that the element with mix-blend-mode and 3D transform blends correctly with its parent</li> </ul> </td> </tr> <tr id="mix-blend-mode-blended-with-transform-and-perspective-3.4.1" class="primary"> <td><strong> <a href="mix-blend-mode-blended-with-transform-and-perspective.htm">mix-blend-mode-blended-with-transform-and-perspective</a></strong></td> <td><a href="reference/mix-blend-mode-blended-with-transform-and-perspective-ref.htm">=</a> </td> <td></td> <td>blending between an element and its child having mix-blend-mode and perspective <ul class="assert"> <li>Test checks that an element having mix-blend-mode and perspective blends correctly with its parent</li> </ul> </td> </tr> <tr id="mix-blend-mode-blending-with-sibling-3.4.1" class="primary"> <td><strong> <a href="mix-blend-mode-blending-with-sibling.htm">mix-blend-mode-blending-with-sibling</a></strong></td> <td><a href="reference/green-square.htm">=</a> </td> <td></td> <td>mix-blend-mode between an element and its sibling <ul class="assert"> <li>Test checks that an element with mix-blend-mode blends with a sibling element</li> </ul> </td> </tr> <tr id="mix-blend-mode-border-image-3.4.1" class="primary svg"> <td><strong> <a href="mix-blend-mode-border-image.htm">mix-blend-mode-border-image</a></strong></td> <td><a href="reference/mix-blend-mode-border-image-ref.htm">=</a> </td> <td><abbr class="svg" title="Requires SVG support">SVG</abbr></td> <td>Blended element with border image <ul class="assert"> <li>Test checks if mix-blend-mode is applied for an element with border-image.</li> </ul> </td> </tr> <tr id="mix-blend-mode-both-parent-and-blended-with-3d-transform-3.4.1" class="primary"> <td><strong> <a href="mix-blend-mode-both-parent-and-blended-with-3D-transform.htm">mix-blend-mode-both-parent-and-blended-with-3d-transform</a></strong></td> <td><a href="reference/mix-blend-mode-both-parent-and-blended-with-3D-transform-ref.htm">=</a> </td> <td></td> <td>mix-blend-mode between an element and its child (both with 3D transform) <ul class="assert"> <li>Test checks that the element with mix-blend-mode blends with the parent element (both with 3D transform)</li> </ul> </td> </tr> <tr id="mix-blend-mode-canvas-parent-3.4.1" class="primary dom"> <td><strong> <a href="mix-blend-mode-canvas-parent.htm">mix-blend-mode-canvas-parent</a></strong></td> <td><a href="reference/mix-blend-mode-canvas-parent-ref.htm">=</a> </td> <td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td> <td>Canvas with mix-blend-mode blends with the parent element. <ul class="assert"> <li>Test checks that a canvas element having mix-blend-mode applied blends with the content of the parent element.</li> </ul> </td> </tr> <tr id="mix-blend-mode-canvas-sibling-3.4.1" class="primary dom"> <td><strong> <a href="mix-blend-mode-canvas-sibling.htm">mix-blend-mode-canvas-sibling</a></strong></td> <td><a href="reference/mix-blend-mode-canvas-sibling-ref.htm">=</a> </td> <td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td> <td>Canvas with mix-blend-mode blends with sibling element <ul class="assert"> <li>Test checks that a canvas element having mix-blend-mode applied blends with a sibling element.</li> </ul> </td> </tr> <tr id="mix-blend-mode-creates-stacking-context-3.4.1" class="primary dom script"> <td><strong> <a href="mix-blend-mode-creates-stacking-context.htm">mix-blend-mode-creates-stacking-context</a></strong></td> <td></td> <td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td> <td>an element with mix-blend-mode other than normal creates a stacking context <ul class="assert"> <li>Test checks that applying a blendmode other than normal to the element must establish a new stacking context.</li> </ul> </td> </tr> <tr id="mix-blend-mode-filter-3.4.1" class="primary"> <td><strong> <a href="mix-blend-mode-filter.htm">mix-blend-mode-filter</a></strong></td> <td><a href="reference/mix-blend-mode-filter-ref.htm">=</a> </td> <td></td> <td>Blended element with filter. <ul class="assert"> <li>Test checks that an element having a filter effect and mix-blend-mode blends with its parent element.</li> </ul> </td> </tr> <tr id="mix-blend-mode-iframe-parent-3.4.1" class="primary"> <td><strong> <a href="mix-blend-mode-iframe-parent.htm">mix-blend-mode-iframe-parent</a></strong></td> <td><a href="reference/mix-blend-mode-iframe-parent-ref.htm">=</a> </td> <td></td> <td>an iframe element with mix-blend-mode should blend with its parent element. <ul class="assert"> <li>Test checks that an iframe element blends with its parent element.</li> </ul> </td> </tr> <tr id="mix-blend-mode-iframe-sibling-3.4.1" class="primary"> <td><strong> <a href="mix-blend-mode-iframe-sibling.htm">mix-blend-mode-iframe-sibling</a></strong></td> <td><a href="reference/mix-blend-mode-iframe-sibling-ref.htm">=</a> </td> <td></td> <td>an iframe element with mix-blend-mode should blend with a sibling element. <ul class="assert"> <li>Test checks that an iframe element blends with a sibling element.</li> </ul> </td> </tr> <tr id="mix-blend-mode-image-3.4.1" class="primary image"> <td><strong> <a href="mix-blend-mode-image.htm">mix-blend-mode-image</a></strong></td> <td><a href="reference/mix-blend-mode-image-notref.htm">≠</a> </td> <td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td> <td>Image element with mix-blend-mode. <ul class="assert"> <li>Test checks that mix-blend-mode is applied to an img element.</li> </ul> </td> </tr> <tr id="mix-blend-mode-in-svg-image-3.4.1" class="svg"> <td> <a href="mix-blend-mode-in-svg-image.htm">mix-blend-mode-in-svg-image</a></td> <td><a href="reference/mix-blend-mode-svg-rectangle-ref.htm">=</a> </td> <td><abbr class="svg" title="Requires SVG support">SVG</abbr></td> <td>CSS Compositing and Blending: mix-blend-mode in an SVG linked as an image </td> </tr> <tr id="mix-blend-mode-intermediate-element-overflow-hidden-and-border-radius-3.4.1" class="primary"> <td><strong> <a href="mix-blend-mode-intermediate-element-overflow-hidden-and-border-radius.htm">mix-blend-mode-intermediate-element-overflow-hidden-and-border-radius</a></strong></td> <td><a href="reference/mix-blend-mode-intermediate-element-overflow-hidden-and-border-radius-ref.htm">=</a> </td> <td></td> <td>mix-blend-mode between an element and its child having overflow:hidden and border-radius, when the blending element overlaps a sibling element <ul class="assert"> <li>Test checks that the element with mix-blend-mode, overflow:hidden and border-radius blends correctly with its parent, as well as with the sibling element where they overlap.</li> </ul> </td> </tr> <tr id="mix-blend-mode-mask-3.4.1" class="primary svg"> <td><strong> <a href="mix-blend-mode-mask.htm">mix-blend-mode-mask</a></strong></td> <td><a href="reference/mix-blend-mode-mask-ref.htm">=</a> </td> <td><abbr class="svg" title="Requires SVG support">SVG</abbr></td> <td>Blended element with masking. <ul class="assert"> <li>Test checks that an element having mask and mix-blend-mode blends with its parent element.</li> </ul> </td> </tr> <tr id="mix-blend-mode-overflowing-child-3.4.1" class="primary"> <td><strong> <a href="mix-blend-mode-overflowing-child.htm">mix-blend-mode-overflowing-child</a></strong></td> <td><a href="reference/mix-blend-mode-overflowing-child-ref.htm">=</a> </td> <td></td> <td>blended element overflows parent <ul class="assert"> <li>Test checks that an overflowing element with mix-blend-mode blends with the parent element.</li> </ul> </td> </tr> <tr id="mix-blend-mode-overflowing-child-of-blended-element-3.4.1" class="primary"> <td><strong> <a href="mix-blend-mode-overflowing-child-of-blended-element.htm">mix-blend-mode-overflowing-child-of-blended-element</a></strong></td> <td><a href="reference/mix-blend-mode-blended-element-with-transparent-pixels-ref.htm">=</a> </td> <td></td> <td>blend an element having an overflowing child. <ul class="assert"> <li>Test checks that a group consisting of an element with mix-blend-mode and an overflowing child blends as a whole with the underlying stacking context.</li> </ul> </td> </tr> <tr id="mix-blend-mode-paragraph-3.4.1" class="primary"> <td><strong> <a href="mix-blend-mode-paragraph.htm">mix-blend-mode-paragraph</a></strong></td> <td><a href="reference/mix-blend-mode-paragraph-ref.htm">=</a> </td> <td></td> <td>Paragraph element with mix-blend-mode. <ul class="assert"> <li>Test checks that test a paragraph element blends with the parent element.</li> </ul> </td> </tr> <tr id="mix-blend-mode-paragraph-background-image-3.4.1" class="primary svg"> <td><strong> <a href="mix-blend-mode-paragraph-background-image.htm">mix-blend-mode-paragraph-background-image</a></strong></td> <td><a href="reference/mix-blend-mode-paragraph-background-image-ref.htm">=</a> </td> <td><abbr class="svg" title="Requires SVG support">SVG</abbr></td> <td>Paragraph element with mix-blend-mode over parent with background image. <ul class="assert"> <li>Test checks that test a paragraph element blends with the parent element having background image.</li> </ul> </td> </tr> <tr id="mix-blend-mode-parent-element-overflow-hidden-and-border-radius-3.4.1" class="primary"> <td><strong> <a href="mix-blend-mode-parent-element-overflow-hidden-and-border-radius.htm">mix-blend-mode-parent-element-overflow-hidden-and-border-radius</a></strong></td> <td><a href="reference/mix-blend-mode-parent-element-overflow-hidden-and-border-radius-ref.htm">=</a> </td> <td></td> <td>blending between an element having overflow:hidden and border-radius and its child <ul class="assert"> <li>Test checks that an element having mix-blend-mode blends with the parent element having overflow:hidden and border-radius</li> </ul> </td> </tr> <tr id="mix-blend-mode-parent-element-overflow-scroll-3.4.1" class="primary"> <td><strong> <a href="mix-blend-mode-parent-element-overflow-scroll.htm">mix-blend-mode-parent-element-overflow-scroll</a></strong></td> <td><a href="reference/mix-blend-mode-parent-element-overflow-scroll-ref.htm">=</a> </td> <td></td> <td>blending between an element with overflow:scroll and its child <ul class="assert"> <li>Test checks that an element with mix-blend-mode blends its parent having overflow:scroll</li> </ul> </td> </tr> <tr id="mix-blend-mode-parent-element-overflow-scroll-blended-position-fixed-3.4.1" class="primary"> <td><strong> <a href="mix-blend-mode-parent-element-overflow-scroll-blended-position-fixed.htm">mix-blend-mode-parent-element-overflow-scroll-blended-position-fixed</a></strong></td> <td><a href="reference/mix-blend-mode-parent-element-overflow-scroll-blended-position-fixed-ref.htm">=</a> </td> <td></td> <td>blending between an element having overflow:scroll and its child having position: fixed <ul class="assert"> <li>Test checks that an element with mix-blend-mode blends with the parent element with overflow:scroll</li> </ul> </td> </tr> <tr id="mix-blend-mode-parent-with-3d-transform-3.4.1" class="primary"> <td><strong> <a href="mix-blend-mode-parent-with-3D-transform.htm">mix-blend-mode-parent-with-3d-transform</a></strong></td> <td><a href="reference/mix-blend-mode-parent-with-3D-transform-ref.htm">=</a> </td> <td></td> <td>mix-blend-mode between an element with 3D transform and its child <ul class="assert"> <li>Test checks that an element with mix-blend-mode blends with its parent having 3D transform</li> </ul> </td> </tr> <tr id="mix-blend-mode-parent-with-3d-transform-and-transition-3.4.1" class="primary dom"> <td><strong> <a href="mix-blend-mode-parent-with-3D-transform-and-transition.htm">mix-blend-mode-parent-with-3d-transform-and-transition</a></strong></td> <td></td> <td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td> <td>blending between an element having 3D transitions and its child <ul class="assert"> <li>Test checks that an element having mix-blend-mode blends with its parent element having 3D transform and transition</li> </ul> </td> </tr> <tr id="mix-blend-mode-parent-with-border-radius-3.4.1" class="primary"> <td><strong> <a href="mix-blend-mode-parent-with-border-radius.htm">mix-blend-mode-parent-with-border-radius</a></strong></td> <td><a href="reference/mix-blend-mode-parent-with-border-radius-ref.htm">=</a> </td> <td></td> <td>blending with parent having border radius <ul class="assert"> <li>Test checks that an element with mix-blend-mode blends with the parent element having border-radius.</li> </ul> </td> </tr> <tr id="mix-blend-mode-parent-with-text-3.4.1" class="primary"> <td><strong> <a href="mix-blend-mode-parent-with-text.htm">mix-blend-mode-parent-with-text</a></strong></td> <td><a href="reference/mix-blend-mode-parent-with-text-ref.htm">=</a> </td> <td></td> <td>check that the stacking context created by the parent element isolates blending. <ul class="assert"> <li>Test checks that an element with mix-blend-mode only blends with the contents of a parent that creates a stacking context.</li> </ul> </td> </tr> <tr id="mix-blend-mode-parsing-3.4.1" class="primary dom script"> <td><strong> <a href="mix-blend-mode-parsing.htm">mix-blend-mode-parsing</a></strong></td> <td></td> <td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td> <td>parsing mix-blend-mode property <ul class="assert"> <li>Test checks that the value specified for mix-blend-mode property is correctly parsed</li> </ul> </td> </tr> <tr id="mix-blend-mode-script-3.4.1" class="primary dom"> <td><strong> <a href="mix-blend-mode-script.htm">mix-blend-mode-script</a></strong></td> <td><a href="reference/mix-blend-mode-script-ref.htm">=</a> </td> <td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td> <td>Set mix-blend-mode from script. <ul class="assert"> <li>Test checks that mix-blend-mode is applied when set from script.</li> </ul> </td> </tr> <tr id="mix-blend-mode-sibling-with-3d-transform-3.4.1" class="primary"> <td><strong> <a href="mix-blend-mode-sibling-with-3D-transform.htm">mix-blend-mode-sibling-with-3d-transform</a></strong></td> <td><a href="reference/mix-blend-mode-sibling-with-3D-transform-ref.htm">=</a> </td> <td></td> <td>blending between an element and its sibling element having 3D transform <ul class="assert"> <li>Test checks that an element with mix-blend-mode blends with both parent element and with sibling element having 3D transform</li> </ul> </td> </tr> <tr id="mix-blend-mode-sibling-with-3d-transform-and-transition-3.4.1" class="primary dom"> <td><strong> <a href="mix-blend-mode-sibling-with-3D-transform-and-transition.htm">mix-blend-mode-sibling-with-3d-transform-and-transition</a></strong></td> <td></td> <td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td> <td>blending between an element and its sibling having 3D transform and transition <ul class="assert"> <li>Test checks that an element having mix-blend-mode blends with an overlapping sibling element having 3D transform and transition</li> </ul> </td> </tr> <tr id="mix-blend-mode-simple-3.4.1" class="primary"> <td><strong> <a href="mix-blend-mode-simple.htm">mix-blend-mode-simple</a></strong></td> <td><a href="reference/green-square.htm">=</a> </td> <td></td> <td>An element with mix-blend-mode blends with its parent element. <ul class="assert"> <li>Test checks that an element with mix-blend-mode blends with its parent element.</li> </ul> </td> </tr> <tr id="mix-blend-mode-stacking-context-001-3.4.1" class="primary"> <td><strong> <a href="mix-blend-mode-stacking-context-001.htm">mix-blend-mode-stacking-context-001</a></strong></td> <td><a href="reference/mix-blend-mode-stacking-context-001-ref.htm">=</a> </td> <td></td> <td>mix-blend-mode between an element and its child <ul class="assert"> <li>Test checks that the element with mix-blend-mode and opacity blends with the parent element</li> </ul> </td> </tr> <tr id="mix-blend-mode-stacking-context-creates-isolation-3.4.1" class="primary"> <td><strong> <a href="mix-blend-mode-stacking-context-creates-isolation.htm">mix-blend-mode-stacking-context-creates-isolation</a></strong></td> <td><a href="reference/mix-blend-mode-stacking-context-creates-isolation-ref.htm">=</a> </td> <td></td> <td>stacking context creates isolated group <ul class="assert"> <li>Test checks that properties that cause the creation of stacking context cause a group to be isolated</li> </ul> </td> </tr> <tr id="mix-blend-mode-svg-3.4.1" class="primary svg"> <td><strong> <a href="mix-blend-mode-svg.htm">mix-blend-mode-svg</a></strong></td> <td><a href="reference/mix-blend-mode-svg-ref.htm">=</a> </td> <td><abbr class="svg" title="Requires SVG support">SVG</abbr></td> <td>SVG element is blended. <ul class="assert"> <li>Test checks that an SVG element blends with the parent container.</li> </ul> </td> </tr> <tr id="mix-blend-mode-svg-rectangle-3.4.1" class="svg"> <td> <a href="mix-blend-mode-svg-rectangle.htm">mix-blend-mode-svg-rectangle</a></td> <td><a href="reference/mix-blend-mode-svg-rectangle-ref.htm">=</a> </td> <td><abbr class="svg" title="Requires SVG support">SVG</abbr></td> <td>mix-blend-mode for a simple SVG element - rectangle </td> </tr> <tr id="mix-blend-mode-transition-3.4.1" class="primary dom"> <td><strong> <a href="mix-blend-mode-transition.htm">mix-blend-mode-transition</a></strong></td> <td><a href="reference/mix-blend-mode-transition-ref.htm">=</a> </td> <td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td> <td>Blended element with transition <ul class="assert"> <li>Test checks that an element having a transition applied on opacity blends with the parent element.</li> </ul> </td> </tr> <tr id="mix-blend-mode-video-3.4.1" class="primary"> <td><strong> <a href="mix-blend-mode-video.htm">mix-blend-mode-video</a></strong></td> <td><a href="reference/mix-blend-mode-video-notref.htm">≠</a> </td> <td></td> <td>Video element with mix-blend-mode. <ul class="assert"> <li>Test checks that mix-blend-mode is applied to a video element.</li> </ul> </td> </tr> <tr id="mix-blend-mode-video-sibling-3.4.1" class="primary"> <td><strong> <a href="mix-blend-mode-video-sibling.htm">mix-blend-mode-video-sibling</a></strong></td> <td><a href="reference/mix-blend-mode-video-sibling-notref.htm">≠</a> </td> <td></td> <td>mix-blend-mode blending between a video element and an overlapping sibling <ul class="assert"> <li>Test checks that a video element blends with an overlapping sibling element with some text inside</li> </ul> </td> </tr> <tr id="mix-blend-mode-with-transform-and-preserve-3d-3.4.1" class="primary"> <td><strong> <a href="mix-blend-mode-with-transform-and-preserve-3D.htm">mix-blend-mode-with-transform-and-preserve-3d</a></strong></td> <td><a href="reference/mix-blend-mode-with-transform-and-preserve-3D-ref.htm">=</a> </td> <td></td> <td>mix-blend-mode between an element and its child having 3D transform and preserve 3D <ul class="assert"> <li>Test checks that mix-blend-mode overrides the behavior of transform-style:preserve-3d</li> </ul> </td> </tr> <tr id="text-with-svg-background-3.4.1" class="primary svg"> <td><strong> <a href="text-with-svg-background.htm">text-with-svg-background</a></strong></td> <td></td> <td><abbr class="svg" title="Requires SVG support">SVG</abbr></td> <td>CSS mix-blend-mode API Test </td> </tr> <tr id="text_with_svg_background-3.4.1" class="primary svg"> <td><strong> <a href="Text_with_SVG_background.htm">text_with_svg_background</a></strong></td> <td></td> <td><abbr class="svg" title="Requires SVG support">SVG</abbr></td> <td>Text with SVG background <ul class="assert"> <li>Text with SVG background</li> </ul> </td> </tr> </tbody> <tbody id="s3.4.1.#ltblendmodegt"> <!-- 0 tests --> </tbody> <tbody id="s3.4.1.#propdef-mix-blend-mode"> <!-- 0 tests --> </tbody> <tbody id="s3.4.2"> <tr><th colspan="4" scope="rowgroup"> <a href="#s3.4.2">+</a> <a href="http://www.w3.org/TR/compositing-1/#isolation">3.4.2 The isolation property</a></th></tr> <!-- 3 tests --> <tr id="blend-isolation-3.4.2" class="primary"> <td><strong> <a href="blend-isolation.htm">blend-isolation</a></strong></td> <td></td> <td></td> <td>CSS Compositing and Blending: isolation applied to a group containing blending <ul class="assert"> <li>Isolation on a group with blending</li> </ul> </td> </tr> <tr id="blend-isolation-3.4.2" class="primary"> <td><strong> <a href="blend-isolation.htm">blend-isolation</a></strong></td> <td></td> <td></td> <td>CSS Compositing and Blending: isolation applied to a group containing blending <ul class="assert"> <li>Isolation on a group with blending</li> </ul> </td> </tr> <tr id="mix-blend-mode-in-svg-image-3.4.2" class="primary svg"> <td><strong> <a href="mix-blend-mode-in-svg-image.htm">mix-blend-mode-in-svg-image</a></strong></td> <td><a href="reference/mix-blend-mode-svg-rectangle-ref.htm">=</a> </td> <td><abbr class="svg" title="Requires SVG support">SVG</abbr></td> <td>CSS Compositing and Blending: mix-blend-mode in an SVG linked as an image </td> </tr> </tbody> <tbody id="s3.4.2.#img_isolation"> <!-- 0 tests --> </tbody> <tbody id="s3.4.2.#isolated-propid"> <!-- 0 tests --> </tbody> <tbody id="s3.4.2.#propdef-background-blend-mode"> <!-- 0 tests --> </tbody> <tbody id="s3.4.2.#propdef-isolation"> <!-- 0 tests --> </tbody> </table> </body> </html>