mirror of
https://github.com/servo/servo.git
synced 2025-06-23 16:44:33 +01:00
296fa2512b
- Update CSS tests to revision e05bfd5e30ed662c2f8a353577003f8eed230180. - Update web-platform-tests to revision a052787dd5c069a340031011196b73affbd68cd9.
685 lines
No EOL
34 KiB
HTML
685 lines
No EOL
34 KiB
HTML
|
|
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<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 (53 tests)</h2>
|
|
<table width="100%">
|
|
<col id="test-column"></col>
|
|
<col id="refs-column"></col>
|
|
<col id="flags-column"></col>
|
|
<col id="info-column"></col>
|
|
<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="https://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="https://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="https://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="https://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.xht">mix-blend-mode-in-svg-image</a></td>
|
|
<td><a href="reference/mix-blend-mode-svg-rectangle-ref.xht">=</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.xht">mix-blend-mode-svg-rectangle</a></strong></td>
|
|
<td><a href="reference/mix-blend-mode-svg-rectangle-ref.xht">=</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="https://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="https://www.w3.org/TR/compositing-1/#mix-blend-mode">3.4.1 The mix-blend-mode property</a></th></tr>
|
|
<!-- 51 tests -->
|
|
<tr id="blending_in_a_group_with_filter-3.4.1" class="svg">
|
|
<td>
|
|
<a href="Blending_in_a_group_with_filter.xht">blending_in_a_group_with_filter</a></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="svg">
|
|
<td>
|
|
<a href="Blending_in_a_group_with_opacity.xht">blending_in_a_group_with_opacity</a></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="compositing_simple_div-3.4.1" class="">
|
|
<td>
|
|
<a href="compositing_simple_div.xht">compositing_simple_div</a></td>
|
|
<td><a href="reference/compositing_simple_div-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>[simple<div>] blending
|
|
</td>
|
|
</tr>
|
|
<tr id="line-with-svg-background-3.4.1" class="svg">
|
|
<td>
|
|
<a href="line-with-svg-background.xht">line-with-svg-background</a></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.xht">mix-blend-mode-animation</a></strong></td>
|
|
<td><a href="reference/mix-blend-mode-animation-ref.xht">=</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.xht">mix-blend-mode-blended-element-interposed</a></strong></td>
|
|
<td><a href="reference/green-square.xht">=</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.xht">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.xht">=</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.xht">mix-blend-mode-blended-element-overflow-scroll</a></strong></td>
|
|
<td><a href="reference/mix-blend-mode-blended-element-overflow-scroll-ref.xht">=</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.xht">mix-blend-mode-blended-element-with-transparent-pixels</a></strong></td>
|
|
<td><a href="reference/mix-blend-mode-blended-element-with-transparent-pixels-ref.xht">=</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.xht">mix-blend-mode-blended-with-3d-transform</a></strong></td>
|
|
<td><a href="reference/mix-blend-mode-blended-with-3D-transform-ref.xht">=</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.xht">mix-blend-mode-blended-with-transform-and-perspective</a></strong></td>
|
|
<td><a href="reference/mix-blend-mode-blended-with-transform-and-perspective-ref.xht">=</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.xht">mix-blend-mode-blending-with-sibling</a></strong></td>
|
|
<td><a href="reference/green-square.xht">=</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.xht">mix-blend-mode-border-image</a></strong></td>
|
|
<td><a href="reference/mix-blend-mode-border-image-ref.xht">=</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.xht">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.xht">=</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.xht">mix-blend-mode-canvas-parent</a></strong></td>
|
|
<td><a href="reference/mix-blend-mode-canvas-parent-ref.xht">=</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.xht">mix-blend-mode-canvas-sibling</a></strong></td>
|
|
<td><a href="reference/mix-blend-mode-canvas-sibling-ref.xht">=</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.xht">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.xht">mix-blend-mode-filter</a></strong></td>
|
|
<td><a href="reference/mix-blend-mode-filter-ref.xht">=</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.xht">mix-blend-mode-iframe-parent</a></strong></td>
|
|
<td><a href="reference/mix-blend-mode-iframe-parent-ref.xht">=</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.xht">mix-blend-mode-iframe-sibling</a></strong></td>
|
|
<td><a href="reference/mix-blend-mode-iframe-sibling-ref.xht">=</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.xht">mix-blend-mode-image</a></strong></td>
|
|
<td><a href="reference/mix-blend-mode-image-notref.xht">≠</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.xht">mix-blend-mode-in-svg-image</a></td>
|
|
<td><a href="reference/mix-blend-mode-svg-rectangle-ref.xht">=</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.xht">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.xht">=</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.xht">mix-blend-mode-mask</a></strong></td>
|
|
<td><a href="reference/mix-blend-mode-mask-ref.xht">=</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.xht">mix-blend-mode-overflowing-child</a></strong></td>
|
|
<td><a href="reference/mix-blend-mode-overflowing-child-ref.xht">=</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.xht">mix-blend-mode-overflowing-child-of-blended-element</a></strong></td>
|
|
<td><a href="reference/mix-blend-mode-blended-element-with-transparent-pixels-ref.xht">=</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.xht">mix-blend-mode-paragraph</a></strong></td>
|
|
<td><a href="reference/mix-blend-mode-paragraph-ref.xht">=</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.xht">mix-blend-mode-paragraph-background-image</a></strong></td>
|
|
<td><a href="reference/mix-blend-mode-paragraph-background-image-ref.xht">=</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.xht">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.xht">=</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.xht">mix-blend-mode-parent-element-overflow-scroll</a></strong></td>
|
|
<td><a href="reference/mix-blend-mode-parent-element-overflow-scroll-ref.xht">=</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.xht">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.xht">=</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.xht">mix-blend-mode-parent-with-3d-transform</a></strong></td>
|
|
<td><a href="reference/mix-blend-mode-parent-with-3D-transform-ref.xht">=</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.xht">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.xht">mix-blend-mode-parent-with-border-radius</a></strong></td>
|
|
<td><a href="reference/mix-blend-mode-parent-with-border-radius-ref.xht">=</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.xht">mix-blend-mode-parent-with-text</a></strong></td>
|
|
<td><a href="reference/mix-blend-mode-parent-with-text-ref.xht">=</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.xht">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.xht">mix-blend-mode-script</a></strong></td>
|
|
<td><a href="reference/mix-blend-mode-script-ref.xht">=</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.xht">mix-blend-mode-sibling-with-3d-transform</a></strong></td>
|
|
<td><a href="reference/mix-blend-mode-sibling-with-3D-transform-ref.xht">=</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.xht">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.xht">mix-blend-mode-simple</a></strong></td>
|
|
<td><a href="reference/green-square.xht">=</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.xht">mix-blend-mode-stacking-context-001</a></strong></td>
|
|
<td><a href="reference/mix-blend-mode-stacking-context-001-ref.xht">=</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.xht">mix-blend-mode-stacking-context-creates-isolation</a></strong></td>
|
|
<td><a href="reference/mix-blend-mode-stacking-context-creates-isolation-ref.xht">=</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.xht">mix-blend-mode-svg</a></strong></td>
|
|
<td><a href="reference/mix-blend-mode-svg-ref.xht">=</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.xht">mix-blend-mode-svg-rectangle</a></td>
|
|
<td><a href="reference/mix-blend-mode-svg-rectangle-ref.xht">=</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.xht">mix-blend-mode-transition</a></strong></td>
|
|
<td><a href="reference/mix-blend-mode-transition-ref.xht">=</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.xht">mix-blend-mode-video</a></strong></td>
|
|
<td><a href="reference/mix-blend-mode-video-notref.xht">≠</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.xht">mix-blend-mode-video-sibling</a></strong></td>
|
|
<td><a href="reference/mix-blend-mode-video-sibling-notref.xht">≠</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.xht">mix-blend-mode-with-transform-and-preserve-3d</a></strong></td>
|
|
<td><a href="reference/mix-blend-mode-with-transform-and-preserve-3D-ref.xht">=</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="svg">
|
|
<td>
|
|
<a href="text-with-svg-background.xht">text-with-svg-background</a></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="svg">
|
|
<td>
|
|
<a href="Text_with_SVG_background.xht">text_with_svg_background</a></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>
|
|
<tr id="will-change-stacking-context-mix-blend-mode-1-3.4.1" class="">
|
|
<td>
|
|
<a href="will-change-stacking-context-mix-blend-mode-1.xht">will-change-stacking-context-mix-blend-mode-1</a></td>
|
|
<td><a href="reference/green-square-100-by-100-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>CSS will-change: 'will-change: mix-blend-mode' creates a stacking context
|
|
<ul class="assert">
|
|
<li>If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element.</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="https://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="">
|
|
<td>
|
|
<a href="blend-isolation.xht">blend-isolation</a></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.xht">mix-blend-mode-in-svg-image</a></strong></td>
|
|
<td><a href="reference/mix-blend-mode-svg-rectangle-ref.xht">=</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="will-change-stacking-context-isolation-1-3.4.2" class="">
|
|
<td>
|
|
<a href="will-change-stacking-context-isolation-1.xht">will-change-stacking-context-isolation-1</a></td>
|
|
<td><a href="reference/green-square-100-by-100-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>CSS will-change: 'will-change: isolation' creates a stacking context
|
|
<ul class="assert">
|
|
<li>If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element.</li>
|
|
</ul>
|
|
</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> |