mirror of
https://github.com/servo/servo.git
synced 2025-06-24 09:04:33 +01:00
Update CSS tests to revision 2baa72daab8bf37e3e910a9fd311a1eaa5b0f4a8
This commit is contained in:
James Graham
parent
662c00a810
commit
df03062d62
10934 changed files with 428309 additions and 254265 deletions
|
|
@ -13,7 +13,7 @@
|
|||
<body>
|
||||
|
||||
<h1>Compositing and Blending Level 1 CR Test Suite</h1>
|
||||
<h2>Specifying Blending in CSS (50 tests)</h2>
|
||||
<h2>Specifying Blending in CSS (6 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
|
|
@ -49,23 +49,7 @@
|
|||
<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>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.4">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
|
|
@ -77,7 +61,7 @@
|
|||
<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 -->
|
||||
<!-- 5 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>
|
||||
|
|
@ -108,484 +92,6 @@
|
|||
<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>
|
||||
|
|
@ -616,10 +122,10 @@
|
|||
<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>
|
||||
<!-- 1 tests -->
|
||||
<tr id="blend-isolation-3.4.2" class="">
|
||||
<td>
|
||||
<a href="blend-isolation.htm">blend-isolation</a></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>CSS Compositing and Blending: isolation applied to a group containing blending
|
||||
|
|
@ -628,25 +134,6 @@
|
|||
</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 -->
|
||||
|
|
|
|||
|
|
@ -1,35 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Blended element with animation</title>
|
||||
<link href="mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<link href="http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="Test checks that an element with mix-blend-mode and animation blends with the parent element." name="assert">
|
||||
<link href="mailto:cabanier@adobe.com" rel="reviewer" title="Rik Cabanier">
|
||||
<link href="mailto:mbudaes@adobe.com" rel="reviewer" title="Mirela Budaes">
|
||||
<link href="reference/mix-blend-mode-animation-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: #FF0;
|
||||
}
|
||||
|
||||
@keyframes changeOpacity
|
||||
{
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0.1; }
|
||||
}
|
||||
|
||||
#blender {
|
||||
background: #F00;
|
||||
mix-blend-mode: difference;
|
||||
animation: changeOpacity 1s;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a fading green box.</p>
|
||||
<div><div id="blender"></div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<link href="mailto:mibalan@adobe.com" rel="reviewer" title="Mihai Balan">
|
||||
<link href="http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="Test checks that an element with mix-blend-mode having a child blends with the parent element." name="assert">
|
||||
<meta content="" name="flags">
|
||||
<link href="reference/green-square.htm" rel="match">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.parent {
|
||||
background: #FF0;
|
||||
}
|
||||
.blender {
|
||||
background: #345;
|
||||
mix-blend-mode: difference;
|
||||
}
|
||||
.child {
|
||||
background: #F00;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a green square on the screen.</p>
|
||||
<div class="parent">
|
||||
<div class="blender">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: blending between an element and its child having overflow:hidden and border-radius</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:rosca@adobe.com" rel="author" title="Ion Roșca">
|
||||
<link href="mailto:mitica@adobe.com" rel="reviewer" title="Mihai Țică">
|
||||
<link href="http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="" name="flags">
|
||||
<meta content="Test checks that an element having mix-blend-mode, overflow:hidden and border-radius blends correctly with its parent element." name="assert">
|
||||
<link href="reference/mix-blend-mode-blended-element-overflow-hidden-and-border-radius-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
.parent {
|
||||
background: aqua;/*rgb(0,255,255);*/
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.blended {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
overflow: hidden;
|
||||
border-radius: 2em 2em;
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
.childOfBlended {
|
||||
background: yellow;/*rgb(255,255,0);*/
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if you see a lime rectangle with aqua rounded corners.</p>
|
||||
<div class="parent">
|
||||
<div class="blended">
|
||||
<div class="childOfBlended"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: blending between an element and its child having overflow:scroll</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:rosca@adobe.com" rel="author" title="Ion Roșca">
|
||||
<link href="mailto:mitica@adobe.com" rel="reviewer" title="Mihai Țică">
|
||||
<link href="http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="" name="flags">
|
||||
<meta content="Test checks that an element with mix-blend-mode and overflow:scroll blends with its parent element" name="assert">
|
||||
<link href="reference/mix-blend-mode-blended-element-overflow-scroll-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
.parent {
|
||||
background: yellow;/*rgb(0,255,255);*/
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
.blended {
|
||||
background: red;/*rgb(255,0,0);*/
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
overflow:scroll;
|
||||
mix-blend-mode: difference;
|
||||
}
|
||||
.scrollingContent {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see a lime rectangle.</p>
|
||||
<div class="parent">
|
||||
<div class="blended">
|
||||
<div class="scrollingContent"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: blending between an element with transparent pixels and a child element</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<link href="mailto:mibalan@adobe.com" rel="reviewer" title="Mihai Balan">
|
||||
<link href="mailto:olaru@adobe.com" rel="reviewer" title="Horia Olaru">
|
||||
<link href="http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="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." name="assert">
|
||||
<meta content="" name="flags">
|
||||
<link href="reference/mix-blend-mode-blended-element-with-transparent-pixels-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
.parent {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
background: #00F;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 10px;
|
||||
}
|
||||
.blender {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background: transparent;
|
||||
mix-blend-mode: difference;
|
||||
margin: -10px;
|
||||
}
|
||||
.blendedChild {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background: #0FF;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a lime square with aqua borders.<br>
|
||||
If the borders are red, the test fails.</p>
|
||||
<div class="parent">
|
||||
<div class="blender">
|
||||
<div class="blendedChild"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: mix-blend-mode between an element and its child with 3D transform </title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:rosca@adobe.com" rel="author" title="Ion Roșca">
|
||||
<link href="mailto:mitica@adobe.com" rel="reviewer" title="Mihai Țică">
|
||||
<link href="http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="" name="flags">
|
||||
<meta content="Test checks that the element with mix-blend-mode and 3D transform blends correctly with its parent" name="assert">
|
||||
<link href="reference/mix-blend-mode-blended-with-3D-transform-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
.parent {
|
||||
background: aqua;/*rgb(0,255,255);*/
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
padding-top: 1px;
|
||||
position:relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.blended {
|
||||
background: fuchsia;/*rgb(255,0,255);*/
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
transform:rotateX(20deg);
|
||||
mix-blend-mode: difference;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see a fuchsia square overlapping an aqua square. <br>
|
||||
The overlapping area should be yellow. </p>
|
||||
<div class="parent">
|
||||
<div class="blended">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: blending between an element and its child having mix-blend-mode and perspective</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:rosca@adobe.com" rel="author" title="Ion Roșca">
|
||||
<link href="mailto:mitica@adobe.com" rel="reviewer" title="Mihai Țică">
|
||||
<link href="http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="" name="flags">
|
||||
<meta content="Test checks that an element having mix-blend-mode and perspective blends correctly with its parent" name="assert">
|
||||
<link href="reference/mix-blend-mode-blended-with-transform-and-perspective-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
div {
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
}
|
||||
.container {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background-color: lime;/*rgb(0,255,0);*/
|
||||
}
|
||||
.transformed {
|
||||
transform: perspective(600px) translateZ(-200px);
|
||||
background-color: red;/*rgb(255,0,0);*/
|
||||
mix-blend-mode: difference;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see a yellow square inside a green container.</p>
|
||||
<div class="container">
|
||||
<div class="transformed">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: mix-blend-mode between an element and its sibling</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<link href="mailto:mibalan@adobe.com" rel="reviewer" title="Mihai Balan">
|
||||
<link href="http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="Test checks that an element with mix-blend-mode blends with a sibling element" name="assert">
|
||||
<meta content="" name="flags">
|
||||
<link href="reference/green-square.htm" rel="match">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.container {
|
||||
position: fixed;
|
||||
z-index: 0;
|
||||
background: #FFF;
|
||||
}
|
||||
.blender {
|
||||
background: #FF0;
|
||||
mix-blend-mode: difference;
|
||||
}
|
||||
.sibling {
|
||||
margin-top: -100px;
|
||||
background: #F00;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a green square on the screen.</p>
|
||||
<div class="container">
|
||||
<div class="blender"></div>
|
||||
<div class="sibling"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Blended element with border image</title>
|
||||
<link href="mailto:mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<link href="http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="Test checks if mix-blend-mode is applied for an element with border-image." name="assert">
|
||||
<meta content="svg" name="flags">
|
||||
<link href="mailto:cabanier@adobe.com" rel="reviewer" title="Rik Cabanier">
|
||||
<link href="mailto:mbudaes@adobe.com" rel="reviewer" title="Mirela Budaes">
|
||||
<link href="reference/mix-blend-mode-border-image-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
.parent {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background: #FF0;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.child {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: #F00;
|
||||
mix-blend-mode: difference;
|
||||
border-width: 10px;
|
||||
border-image: url('support/red_square.svg') 10 repeat;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a green rectangle. <br>
|
||||
If blending is not performed, the div is displayed with red. </p>
|
||||
<div class="parent"><div class="child"></div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: mix-blend-mode between an element and its child (both with 3D transform) </title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:rosca@adobe.com" rel="author" title="Ion Roșca">
|
||||
<link href="mailto:mitica@adobe.com" rel="reviewer" title="Mihai Țică">
|
||||
<link href="http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="" name="flags">
|
||||
<meta content="Test checks that the element with mix-blend-mode blends with the parent element (both with 3D transform)" name="assert">
|
||||
<link href="reference/mix-blend-mode-both-parent-and-blended-with-3D-transform-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
.parent {
|
||||
background: aqua;/*rgb(0,255,255);*/
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
padding-top: 1px;
|
||||
transform:rotateX(20deg);
|
||||
}
|
||||
.blended {
|
||||
background: fuchsia;/*rgb(255,0,255);*/
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
transform:rotateX(20deg);
|
||||
mix-blend-mode: difference;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see a fuchsia square overlapping an aqua square. <br>
|
||||
The overlapping area should be yellow. </p>
|
||||
<div class="parent">
|
||||
<div class="blended">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Canvas with mix-blend-mode blends with the parent element.</title>
|
||||
<link href="mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<link href="http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="Test checks that a canvas element having mix-blend-mode applied blends with the content of the parent element." name="assert">
|
||||
<meta content="dom" name="flags">
|
||||
<link href="mailto:cabanier@adobe.com" rel="reviewer" title="Rik Cabanier">
|
||||
<link href="mailto:mbudaes@adobe.com" rel="reviewer" title="Mirela Budaes">
|
||||
<link href="reference/mix-blend-mode-canvas-parent-ref.htm" rel="match">
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a green rectangle. <br>
|
||||
If blending is not performed, the canvas is displayed with red. </p>
|
||||
<div style="width: 100px; height: 100px; background: #FF0;">
|
||||
<canvas width="100" style="mix-blend-mode: difference;" id="cvs" height="100"></canvas>
|
||||
<script type="text/javascript">
|
||||
var cvs = document.getElementById("cvs");
|
||||
var ctx = cvs.getContext("2d");
|
||||
ctx.fillStyle = "#F00";
|
||||
ctx.fillRect(0, 0, 100, 100);
|
||||
</script>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Canvas with mix-blend-mode blends with sibling element</title>
|
||||
<link href="mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<link href="http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="Test checks that a canvas element having mix-blend-mode applied blends with a sibling element." name="assert">
|
||||
<meta content="dom" name="flags">
|
||||
<link href="mailto:cabanier@adobe.com" rel="reviewer" title="Rik Cabanier">
|
||||
<link href="mailto:mbudaes@adobe.com" rel="reviewer" title="Mirela Budaes">
|
||||
<link href="reference/mix-blend-mode-canvas-sibling-ref.htm" rel="match">
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a green rectangle. <br>
|
||||
If blending is not performed, the canvas is displayed with red. </p>
|
||||
<div style="width: 100px; height: 100px; background: #FF0;"></div>
|
||||
<canvas width="100" style="mix-blend-mode: difference; position: relative; top: -100px;" id="cvs" height="100"></canvas>
|
||||
<script type="text/javascript">
|
||||
var canvas = document.getElementById("cvs");
|
||||
var context = canvas.getContext("2d");
|
||||
|
||||
context.fillStyle = "#F00";
|
||||
context.fillRect(0, 0, 100, 100);
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: an element with mix-blend-mode other than normal creates a stacking context</title>
|
||||
<link href="mailto:mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<link href="mailto:mibalan@adobe.com" rel="reviewer" title="Mihai Balan">
|
||||
<link href="http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="dom" name="flags">
|
||||
<meta content="Test checks that applying a blendmode other than normal
|
||||
to the element must establish a new stacking context." name="assert">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="blender"></div>
|
||||
<script type="text/javascript">
|
||||
var blendModes = ["multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn",
|
||||
"hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"];
|
||||
|
||||
test(function() {
|
||||
var blender = document.getElementById("blender");
|
||||
for (var i = 0; i < blendModes.length; ++i) {
|
||||
blender.style.mixBlendMode = blendModes[i];
|
||||
var blenderStyle = window.getComputedStyle(blender);
|
||||
assert_true(blenderStyle.zIndex !== "auto");
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Blended element with filter.</title>
|
||||
<link href="mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<link href="http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="Test checks that an element having a filter effect and mix-blend-mode blends with its parent element." name="assert">
|
||||
<link href="mailto:cabanier@adobe.com" rel="reviewer" title="Rik Cabanier">
|
||||
<link href="mailto:mbudaes@adobe.com" rel="reviewer" title="Mirela Budaes">
|
||||
<link href="reference/mix-blend-mode-filter-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style></head>
|
||||
|
||||
<body>
|
||||
<p>Test passes if you can see a green blurred square. <br>
|
||||
The test fails if the square is drawn with red. </p>
|
||||
|
||||
<div style="background: #FF0;">
|
||||
<div style="background: #F00; mix-blend-mode: difference; filter: opacity(0.9);"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: an iframe element with mix-blend-mode should blend with its parent element.</title>
|
||||
<link href="mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<link href="http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="Test checks that an iframe element blends with its parent element." name="assert">
|
||||
<link href="mailto:cabanier@adobe.com" rel="reviewer" title="Rik Cabanier">
|
||||
<link href="mailto:mbudaes@adobe.com" rel="reviewer" title="Mirela Budaes">
|
||||
<link href="reference/mix-blend-mode-iframe-parent-ref.htm" rel="match">
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a green rectangle. <br>
|
||||
If blending is not performed, the canvas is displayed with red. </p>
|
||||
|
||||
<div style="width: 100px; height: 100px; background: #FF0;">
|
||||
<iframe src="support/red_square.html" style="margin-top: -8px; margin-left: -8px; mix-blend-mode: difference;" frameborder="0"></iframe>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: an iframe element with mix-blend-mode should blend with a sibling element.</title>
|
||||
<link href="mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<link href="http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="Test checks that an iframe element blends with a sibling element." name="assert">
|
||||
<link href="mailto:cabanier@adobe.com" rel="reviewer" title="Rik Cabanier">
|
||||
<link href="mailto:mbudaes@adobe.com" rel="reviewer" title="Mirela Budaes">
|
||||
<link href="reference/mix-blend-mode-iframe-sibling-ref.htm" rel="match">
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a green rectangle. <br>
|
||||
If blending is not performed, the canvas is displayed with red. </p>
|
||||
|
||||
<div style="width: 100px; height: 100px; background: #FF0;"></div>
|
||||
<iframe src="support/red_square.html" style="margin-top: -108px; margin-left: -8px; mix-blend-mode: difference;" frameborder="0"></iframe>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Image element with mix-blend-mode.</title>
|
||||
<link href="mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<link href="http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="Test checks that mix-blend-mode is applied to an img element." name="assert">
|
||||
<meta content="image" name="flags">
|
||||
<link href="mailto:cabanier@adobe.com" rel="reviewer" title="Rik Cabanier">
|
||||
<link href="mailto:mbudaes@adobe.com" rel="reviewer" title="Mirela Budaes">
|
||||
<link href="reference/mix-blend-mode-image-notref.htm" rel="mismatch">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 75px;
|
||||
background: #FF0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a green rectangle.</p>
|
||||
<div>
|
||||
<img src="support/red.png" style="max-width:100%; max-height:100%; mix-blend-mode: difference;">
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Compositing and Blending: mix-blend-mode in an SVG linked as an image</title>
|
||||
<link U00022="" href="mailto:cabanier@adobe.com" rel="author" title="Rik Cabanier">
|
||||
<link href="http://dev.w3.org/fxtf/compositing-1/#isolation" rel="help">
|
||||
<link href="mailto:dschulze@adobe.com" rel="reviewer" title="Dirk Schulze">
|
||||
<link href="http://dev.w3.org/fxtf/compositing-1/#csscompositingrules_SVG" rel="help">
|
||||
<link href="http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="svg" name="flags">
|
||||
<link href="reference/mix-blend-mode-svg-rectangle-ref.htm" rel="match">
|
||||
</head>
|
||||
<body>
|
||||
<p>There should be a green rectangle on the screen. <br>
|
||||
Test passes if you see a green rectangle.</p>
|
||||
<img src="support/green_square_blending.svg">
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: mix-blend-mode between an element and its child having overflow:hidden and border-radius, when the blending element overlaps a sibling element</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:rosca@adobe.com" rel="author" title="Ion Roșca">
|
||||
<link href="mailto:mitica@adobe.com" rel="reviewer" title="Mihai Țică">
|
||||
<link href="http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="" name="flags">
|
||||
<meta content="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." name="assert">
|
||||
<link href="reference/mix-blend-mode-intermediate-element-overflow-hidden-and-border-radius-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
.parent {
|
||||
background: aqua;/*rgb(0,255,255);*/
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.blended {
|
||||
background: fuchsia;
|
||||
width: 150px;
|
||||
height: 75px;
|
||||
margin-top: -75px;
|
||||
mix-blend-mode: difference;
|
||||
}
|
||||
.siblingOfBlended {
|
||||
background: yellow;/*rgb(255,255,0);*/
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
overflow: hidden;
|
||||
border-radius: 2em 2em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p> This test passes if you can see a rectangle split in two pieces: the top half is yellow with aqua rounded borders and the bottom half is aqua with yellow borders.</p>
|
||||
<div class="parent">
|
||||
<div class="siblingOfBlended"></div>
|
||||
<div class="blended">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Blended element with masking.</title>
|
||||
<link href="mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<link href="http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="Test checks that an element having mask and mix-blend-mode blends with its parent element." name="assert">
|
||||
<meta content="svg" name="flags">
|
||||
<link href="mailto:cabanier@adobe.com" rel="reviewer" title="Rik Cabanier">
|
||||
<link href="mailto:mbudaes@adobe.com" rel="reviewer" title="Mirela Budaes">
|
||||
<link href="reference/mix-blend-mode-mask-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a green circle. <br>
|
||||
The test fails if the circle is drawn with red. </p>
|
||||
|
||||
<div style="background: #FF0">
|
||||
<div style="background: #F00; mix-blend-mode: difference; mask-image: url('support/red_circle.svg');"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: blend an element having an overflowing child.</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<link href="mailto:mibalan@adobe.com" rel="reviewer" title="Mihai Balan">
|
||||
<link href="mailto:olaru@adobe.com" rel="reviewer" title="Horia Olaru">
|
||||
<link href="http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="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." name="assert">
|
||||
<meta content="" name="flags">
|
||||
<link href="reference/mix-blend-mode-blended-element-with-transparent-pixels-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
.parent {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
background: #00F;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 10px;
|
||||
}
|
||||
.blender {
|
||||
background: #777;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
margin: -10px;
|
||||
mix-blend-mode: difference;
|
||||
}
|
||||
.child {
|
||||
background: #0FF;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a lime square with aqua borders.<br>
|
||||
If the borders are red, the test fails.</p>
|
||||
<div class="parent">
|
||||
<div class="blender">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: blended element overflows parent</title>
|
||||
<link href="mailto:mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<link href="mailto:mibalan@adobe.com" rel="reviewer" title="Mihai Balan">
|
||||
<link href="mailto:olaru@adobe.com" rel="reviewer" title="Horia Olaru">
|
||||
<link href="http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="Test checks that an overflowing element with mix-blend-mode blends with the parent element." name="assert">
|
||||
<meta content="" name="flags">
|
||||
<link href="reference/mix-blend-mode-overflowing-child-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
body {
|
||||
background: lightgray;
|
||||
}
|
||||
.container {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: #0F0;
|
||||
}
|
||||
.blender {
|
||||
background: #0F0;
|
||||
margin: 50px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
mix-blend-mode: difference;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see two green squares and a black square as their intersection,<br>
|
||||
drawn over a light gray background.</p>
|
||||
<div class="container">
|
||||
<div class="blender"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Paragraph element with mix-blend-mode over parent with background image.</title>
|
||||
<link href="mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<link href="http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="Test checks that test a paragraph element blends with the parent element having background image." name="assert">
|
||||
<meta content="svg" name="flags">
|
||||
<link href="mailto:cabanier@adobe.com" rel="reviewer" title="Rik Cabanier">
|
||||
<link href="mailto:mbudaes@adobe.com" rel="reviewer" title="Mirela Budaes">
|
||||
<link href="reference/mix-blend-mode-paragraph-background-image-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-image: url('support/yellow_square.svg');
|
||||
}
|
||||
|
||||
#blender {
|
||||
mix-blend-mode: difference;
|
||||
color: #F00;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the paragraph text is drawn with green.</p>
|
||||
<div>
|
||||
<p id="blender">This should be drawn with green.</p>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Paragraph element with mix-blend-mode.</title>
|
||||
<link href="mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<link href="http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="Test checks that test a paragraph element blends with the parent element." name="assert">
|
||||
<link href="mailto:cabanier@adobe.com" rel="reviewer" title="Rik Cabanier">
|
||||
<link href="mailto:mbudaes@adobe.com" rel="reviewer" title="Mirela Budaes">
|
||||
<link href="reference/mix-blend-mode-paragraph-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: #FF0;
|
||||
}
|
||||
|
||||
#blender {
|
||||
mix-blend-mode: difference;
|
||||
color: #F00;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the paragraph text is drawn with green.</p>
|
||||
<div>
|
||||
<p id="blender">This should be drawn with green.</p>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: blending between an element having overflow:hidden and border-radius and its child</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:rosca@adobe.com" rel="author" title="Ion Roșca">
|
||||
<link href="mailto:mitica@adobe.com" rel="reviewer" title="Mihai Țică">
|
||||
<link href="http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="" name="flags">
|
||||
<meta content="Test checks that an element having mix-blend-mode blends with the parent element having overflow:hidden and border-radius" name="assert">
|
||||
<link href="reference/mix-blend-mode-parent-element-overflow-hidden-and-border-radius-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
.parent {
|
||||
background: red;
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
border-radius: 1em 5em;
|
||||
}
|
||||
.blended {
|
||||
background: yellow;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
mix-blend-mode: difference;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p> Test passes if you see a lime square with rounded corners.</p>
|
||||
<div class="parent">
|
||||
<div class="blended"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: blending between an element having overflow:scroll and its child having position: fixed</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:rosca@adobe.com" rel="author" title="Ion Roșca">
|
||||
<link href="mailto:mitica@adobe.com" rel="reviewer" title="Mihai Țică">
|
||||
<link href="http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="" name="flags">
|
||||
<meta content="Test checks that an element with mix-blend-mode blends with the parent element with overflow:scroll" name="assert">
|
||||
<link href="reference/mix-blend-mode-parent-element-overflow-scroll-blended-position-fixed-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
.parent {
|
||||
background: aqua;/*rgb(0,255,255);*/
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
overflow:scroll;
|
||||
}
|
||||
|
||||
.blended {
|
||||
background: fuchsia;/*rgb(255,0,255);*/
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
mix-blend-mode: multiply;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.scrollableContent {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see a blue square inside an aqua container. <br>
|
||||
The aqua container should have scrollbars on the left and bottom.</p>
|
||||
<div class="parent">
|
||||
<div class="blended"></div>
|
||||
<div class="scrollableContent"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: blending between an element with overflow:scroll and its child</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:rosca@adobe.com" rel="author" title="Ion Roșca">
|
||||
<link href="mailto:mitica@adobe.com" rel="reviewer" title="Mihai Țică">
|
||||
<link href="http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="" name="flags">
|
||||
<meta content="Test checks that an element with mix-blend-mode blends its parent having overflow:scroll" name="assert">
|
||||
<link href="reference/mix-blend-mode-parent-element-overflow-scroll-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
.parent {
|
||||
background: yellow;
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
overflow:scroll;
|
||||
}
|
||||
.blended {
|
||||
background: red;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
mix-blend-mode: difference;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see a scrollable lime rectangle.</p>
|
||||
<div class="parent">
|
||||
<div class="blended"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: blending between an element having 3D transitions and its child</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:rosca@adobe.com" rel="author" title="Ion Roșca">
|
||||
<link href="mailto:mitica@adobe.com" rel="reviewer" title="Mihai Țică">
|
||||
<link href="http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="dom" name="flags">
|
||||
<meta content="Test checks that an element having mix-blend-mode blends with its parent element having 3D transform and transition" name="assert">
|
||||
<style type="text/css">
|
||||
.parent {
|
||||
background: yellow;
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
position:relative;
|
||||
z-index: 1;
|
||||
margin: 10px;
|
||||
float: left;
|
||||
transition: transform 2s;
|
||||
|
||||
}
|
||||
.rotated {
|
||||
transform: rotateX(60deg) rotateZ(10deg) rotateY(180deg);
|
||||
}
|
||||
.blended {
|
||||
background: red;
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
mix-blend-mode: difference;
|
||||
}
|
||||
.ref {
|
||||
background: none;
|
||||
}
|
||||
.ref .blended {
|
||||
background: lime;
|
||||
mix-blend-mode: normal;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see two rotating lime rectangles, both identical.</p>
|
||||
<div>
|
||||
<div id="parent" class="parent">
|
||||
<div class="blended"></div>
|
||||
</div>
|
||||
<div id="parentref" class="parent ref">
|
||||
<div class="blended"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
var parent = document.getElementById('parent');
|
||||
var parentref = document.getElementById('parentref');
|
||||
function rotate (el, cl) {
|
||||
if (el.className === cl + ' rotated')
|
||||
el.className = cl;
|
||||
else
|
||||
el.className = cl + ' rotated';
|
||||
}
|
||||
setTimeout(function () { rotate(parent, 'parent'); rotate(parentref, 'parent ref'); }, 0);
|
||||
setInterval(function () { rotate(parent, 'parent'); rotate(parentref, 'parent ref'); }, 2000);
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: mix-blend-mode between an element with 3D transform and its child</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:rosca@adobe.com" rel="author" title="Ion Roșca">
|
||||
<link href="mailto:mitica@adobe.com" rel="reviewer" title="Mihai Țică">
|
||||
<link href="http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="" name="flags">
|
||||
<meta content="Test checks that an element with mix-blend-mode blends with its parent having 3D transform" name="assert">
|
||||
<link href="reference/mix-blend-mode-parent-with-3D-transform-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
.parent {
|
||||
background: aqua;/*rgb(0,255,255);*/
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
padding-top: 1px;
|
||||
transform:rotateX(20deg);
|
||||
}
|
||||
.blended {
|
||||
background: fuchsia;/*rgb(255,0,255);*/
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
mix-blend-mode: difference;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see a fuchsia square overlapping an aqua square. <br>
|
||||
The overlapping area should be yellow. </p>
|
||||
<div class="parent">
|
||||
<div class="blended"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: blending with parent having border radius</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<link href="mailto:mibalan@adobe.com" rel="reviewer" title="Mihai Balan">
|
||||
<link href="mailto:olaru@adobe.com" rel="reviewer" title="Horia Olaru">
|
||||
<link href="http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="Test checks that an element with mix-blend-mode blends
|
||||
with the parent element having border-radius." name="assert">
|
||||
<meta content="" name="flags">
|
||||
<link href="reference/mix-blend-mode-parent-with-border-radius-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
body {
|
||||
background: lightgray;
|
||||
}
|
||||
.parent {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: #F00;
|
||||
border-radius: 50px;
|
||||
}
|
||||
.blended {
|
||||
background: #FF0;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
mix-blend-mode: difference;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if a green circle is drawn on top of a yellow square, over a lightgray background.</p>
|
||||
<div class="parent">
|
||||
<div class="blended"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: check that the stacking context created by the parent element isolates blending.</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<link href="mailto:mibalan@adobe.com" rel="reviewer" title="Mihai Balan">
|
||||
<link href="mailto:olaru@adobe.com" rel="reviewer" title="Horia Olaru">
|
||||
<link href="http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="Test checks that an element with mix-blend-mode only blends with the contents
|
||||
of a parent that creates a stacking context." name="assert">
|
||||
<meta content="" name="flags">
|
||||
<link href="reference/mix-blend-mode-parent-with-text-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
.parent {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.blender {
|
||||
background: #FF0;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-top: -60px;
|
||||
mix-blend-mode: difference;
|
||||
}
|
||||
.text {
|
||||
height: 60px;
|
||||
color: #F00;
|
||||
}
|
||||
body {
|
||||
background: lightgray;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if a yellow square with green text is drawn over a lightgray background.</p>
|
||||
<div class="parent">
|
||||
<div class="text">Red text that becomes green after blending </div>
|
||||
<div class="blender"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: parsing mix-blend-mode property</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:mibalan@adobe.com" rel="reviewer" title="Mihai Balan">
|
||||
<link href="mailto:cabanier@adobe.com" rel="reviewer" title="Rik Cabanier">
|
||||
<link href="http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="dom" name="flags">
|
||||
<meta content="Test checks that the value specified for mix-blend-mode property is correctly parsed" name="assert">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<link href="/resources/testharness.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<script type="text/javascript">
|
||||
function testParse(declaration) {
|
||||
var div = document.createElement("div");
|
||||
div.setAttribute("style", declaration);
|
||||
return div.style.mixBlendMode;
|
||||
}
|
||||
|
||||
var blendModes = ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn",
|
||||
"hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"];
|
||||
|
||||
for (var i = 0; i < blendModes.length; i++) {
|
||||
test(function() {assert_equals(testParse("mix-blend-mode: " + blendModes[i]), blendModes[i] )}, "Mix-blend-mode " + blendModes[i]);
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Set mix-blend-mode from script.</title>
|
||||
<link href="mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<link href="http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="Test checks that mix-blend-mode is applied when set from script." name="assert">
|
||||
<meta content="dom" name="flags">
|
||||
<link href="mailto:cabanier@adobe.com" rel="reviewer" title="Rik Cabanier">
|
||||
<link href="mailto:mbudaes@adobe.com" rel="reviewer" title="Mirela Budaes">
|
||||
<link href="reference/mix-blend-mode-script-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: #FF0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a green box.</p>
|
||||
<div><div style="background: #F00;" id="blender"></div></div>
|
||||
<script type="text/javascript">
|
||||
document.getElementById("blender").style.mixBlendMode = "difference";
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,75 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: blending between an element and its sibling having 3D transform and transition</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:rosca@adobe.com" rel="author" title="Ion Roșca">
|
||||
<link href="mailto:mitica@adobe.com" rel="reviewer" title="Mihai Țică">
|
||||
<link href="http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="dom" name="flags">
|
||||
<meta content="Test checks that an element having mix-blend-mode blends with an overlapping sibling element having 3D transform and transition" name="assert">
|
||||
<style type="text/css">
|
||||
.parent {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
float: left;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.blended {
|
||||
background: blue;
|
||||
margin-top: -120px;
|
||||
width: 140px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
height: 140px;
|
||||
mix-blend-mode: difference;
|
||||
}
|
||||
.siblingOfBlended {
|
||||
background: aqua;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
transition: transform 2s;
|
||||
}
|
||||
.rotated {
|
||||
transform: rotateX(60deg) rotateY(10deg) rotateZ(90deg);
|
||||
}
|
||||
|
||||
.ref .blended {
|
||||
mix-blend-mode: normal;
|
||||
}
|
||||
.ref .siblingOfBlended {
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
background: lime;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see two blue rectangles having inside a lime rotating rectangle each.<br>
|
||||
Lime rectangles should look identical when while rotating.</p>
|
||||
<div>
|
||||
<div class="parent">
|
||||
<div id="sibling" class="siblingOfBlended"></div>
|
||||
<div class="blended"></div>
|
||||
</div>
|
||||
<div class="parent ref">
|
||||
<div id="siblingref" class="siblingOfBlended ref"></div>
|
||||
<div class="blended"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
var sibling = document.getElementById('sibling');
|
||||
var siblingref = document.getElementById('siblingref');
|
||||
function rotate (el, cl) {
|
||||
if (el.className === cl + ' rotated')
|
||||
el.className = cl;
|
||||
else
|
||||
el.className = cl + ' rotated';
|
||||
}
|
||||
setTimeout(function () { rotate(sibling, 'siblingOfBlended'); rotate(siblingref, 'siblingOfBlended ref'); }, 0);
|
||||
setInterval(function () { rotate(sibling, 'siblingOfBlended'); rotate(siblingref, 'siblingOfBlended ref'); }, 2000);
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: blending between an element and its sibling element having 3D transform</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:rosca@adobe.com" rel="author" title="Ion Roșca">
|
||||
<link href="mailto:mitica@adobe.com" rel="reviewer" title="Mihai Țică">
|
||||
<link href="http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="" name="flags">
|
||||
<meta content="Test checks that an element with mix-blend-mode blends with both parent element and with sibling element having 3D transform" name="assert">
|
||||
<link href="reference/mix-blend-mode-sibling-with-3D-transform-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
.parent {
|
||||
background: aqua;/*rgb(0,255,255);*/
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
padding-top: 1px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.blended {
|
||||
background: fuchsia;/*rgb(255,0,255);*/
|
||||
margin-top: -200px;
|
||||
margin-left: 20px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
mix-blend-mode: difference;
|
||||
}
|
||||
.siblingOfBlended {
|
||||
background: red;/*rgb(255,0,0);*/
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
transform: perspective(600px) translateZ(-200px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see three overlapping squares, from back to front, having the following colors: aqua, fuchsia and blue. <br>
|
||||
The intersection area between aqua and fuchsia squares, which is not overlapped by the blue square, should be yellow.</p>
|
||||
<div class="parent">
|
||||
<div class="siblingOfBlended"></div>
|
||||
<div class="blended"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: An element with mix-blend-mode blends with its parent element.</title>
|
||||
<link href="mailto:mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<link href="mailto:mibalan@adobe.com" rel="reviewer" title="Mihai Balan">
|
||||
<link href="http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="Test checks that an element with mix-blend-mode blends with its parent element." name="assert">
|
||||
<meta content="" name="flags">
|
||||
<link href="reference/green-square.htm" rel="match">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.parent {
|
||||
background: #FF0;
|
||||
}
|
||||
.child {
|
||||
background: #F00;
|
||||
mix-blend-mode: difference;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a green square on the screen.</p>
|
||||
<div class="parent">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: mix-blend-mode between an element and its child</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:mibalan@adobe.com" rel="reviewer" title="Mihai Balan">
|
||||
<link href="mailto:cabanier@adobe.com" rel="reviewer" title="Rik Cabanier">
|
||||
<link href="http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="" name="flags">
|
||||
<meta content="Test checks that the element with mix-blend-mode and opacity blends with the parent element" name="assert">
|
||||
<link href="reference/mix-blend-mode-stacking-context-001-ref.htm" rel="match">
|
||||
<style>
|
||||
.simple{
|
||||
background: aqua;/*rgb(0,255,255);*/
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
display:inline-block;
|
||||
}
|
||||
.mixed {
|
||||
opacity: 0.9;
|
||||
background: red;/*rgb(255,0,0);*/
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see a black rectangle with large aqua borders.
|
||||
You should not see a red rectangle on the page. </p>
|
||||
<div class="simple">
|
||||
<div class="mixed"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: stacking context creates isolated group</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode" rel="help">
|
||||
<link href="mailto:mibalan@adobe.com" rel="reviewer" title="Mihai Balan">
|
||||
<link href="mailto:cabanier@adobe.com" rel="reviewer" title="Rik Cabanier">
|
||||
<meta content="" name="flags">
|
||||
<meta content="Test checks that properties that cause the creation of stacking context cause a group to be isolated" name="assert">
|
||||
<link href="reference/mix-blend-mode-stacking-context-creates-isolation-ref.htm" rel="match">
|
||||
<style>
|
||||
.container{
|
||||
margin: 30px;
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
float: left;
|
||||
background: yellow;/*rgb(255,255,0);*/
|
||||
}
|
||||
.simple{
|
||||
background: lime;/* rgb(0,255,0);*/
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: fixed;
|
||||
}
|
||||
.mixed {
|
||||
background: red;/*rgb(255,0,0);*/
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is no complete red square on the screen. <br>
|
||||
You should see two overlapping lime and red squares on top of a yellow one. <br>
|
||||
At the intersection of the lime and red squares, a black square will be created. </p>
|
||||
<div class="container">
|
||||
<div class="simple">
|
||||
<div class="mixed"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: mix-blend-mode for a simple SVG element - rectangle</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:mibalan@adobe.com" rel="reviewer" title="Mihai Balan">
|
||||
<link href="mailto:cabanier@adobe.com" rel="reviewer" title="Rik Cabanier">
|
||||
<link href="http://dev.w3.org/fxtf/compositing-1/#csscompositingrules_SVG" rel="help">
|
||||
<link href="http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="svg" name="flags">
|
||||
<link href="reference/mix-blend-mode-svg-rectangle-ref.htm" rel="match">
|
||||
</head>
|
||||
<body>
|
||||
<p>There should be no red rectangle on the screen. <br>
|
||||
Test passes if you see a black rectangle.</p>
|
||||
<svg width="400px" xmlns:xmlns="http://www.w3.org/2000/svg" version="1.1" height="400px">
|
||||
<rect y="0" width="100" fill="aqua" x="0" height="100"></rect>
|
||||
<rect width="100" style="mix-blend-mode: multiply" y="0" x="0" fill="red" height="100"></rect>
|
||||
</svg>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: SVG element is blended.</title>
|
||||
<link href="mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<link href="http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="Test checks that an SVG element blends with the parent container." name="assert">
|
||||
<meta content="svg" name="flags">
|
||||
<link href="mailto:cabanier@adobe.com" rel="reviewer" title="Rik Cabanier">
|
||||
<link href="mailto:mbudaes@adobe.com" rel="reviewer" title="Mirela Budaes">
|
||||
<link href="reference/mix-blend-mode-svg-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: #FF0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a green box.</p>
|
||||
<div>
|
||||
<svg width="100" style="mix-blend-mode: difference;" height="100">
|
||||
<rect width="100" style="fill: #F00;" height="100">
|
||||
</rect></svg>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Blended element with transition</title>
|
||||
<link href="mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<link href="http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="Test checks that an element having a transition applied on opacity blends with the parent element." name="assert">
|
||||
<meta content="dom" name="flags">
|
||||
<link href="mailto:cabanier@adobe.com" rel="reviewer" title="Rik Cabanier">
|
||||
<link href="mailto:mbudaes@adobe.com" rel="reviewer" title="Mirela Budaes">
|
||||
<link href="reference/mix-blend-mode-transition-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: #FF0;
|
||||
}
|
||||
|
||||
#blender {
|
||||
background: #F00;
|
||||
mix-blend-mode: difference;
|
||||
transition: opacity 1s ease;
|
||||
}
|
||||
|
||||
.opaqueBox {
|
||||
opacity: 0.4;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a fading green rectangle.</p>
|
||||
<div><div id="blender"></div></div>
|
||||
<script type="text/javascript">
|
||||
setInterval(function(){ document.getElementById('blender').className = 'opaqueBox'; }, 100);
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: mix-blend-mode blending between a video element and an overlapping sibling</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<link href="mailto:mibalan@adobe.com" rel="reviewer" title="Mihai Balan">
|
||||
<link href="http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="Test checks that a video element blends with an overlapping sibling element with some text inside" name="assert">
|
||||
<meta content="" name="flags">
|
||||
<link href="reference/mix-blend-mode-video-sibling-notref.htm" rel="mismatch">
|
||||
<style type="text/css">
|
||||
div {
|
||||
mix-blend-mode: difference;
|
||||
margin-top: -361px;
|
||||
background-color: #FF0;
|
||||
width: 300px;
|
||||
height: 350px;
|
||||
color: #F00;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see text and a circle moving from the top to the bottom of the page,<br>
|
||||
both drawn with green, over a blue background.</p>
|
||||
<video autoplay="">
|
||||
<source src="support/red_circle.mp4" type="video/mp4">
|
||||
</video>
|
||||
<div>Some text inside the div.</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Video element with mix-blend-mode.</title>
|
||||
<link href="mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<link href="http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="Test checks that mix-blend-mode is applied to a video element." name="assert">
|
||||
<link href="mailto:cabanier@adobe.com" rel="reviewer" title="Rik Cabanier">
|
||||
<link href="mailto:mbudaes@adobe.com" rel="reviewer" title="Mirela Budaes">
|
||||
<link href="reference/mix-blend-mode-video-notref.htm" rel="mismatch">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 480px;
|
||||
height: 352px;
|
||||
background: #FF0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a green circle over a blue background.</p>
|
||||
<div>
|
||||
<video style="mix-blend-mode: difference" autoplay="">
|
||||
<source src="support/red_circle.mp4" type="video/mp4">
|
||||
</video>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: mix-blend-mode between an element and its child having 3D transform and preserve 3D</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:rosca@adobe.com" rel="author" title="Ion Roșca">
|
||||
<link href="mailto:mitica@adobe.com" rel="reviewer" title="Mihai Țică">
|
||||
<link href="http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="" name="flags">
|
||||
<meta content="Test checks that mix-blend-mode overrides the behavior of transform-style:preserve-3d" name="assert">
|
||||
<link href="reference/mix-blend-mode-with-transform-and-preserve-3D-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
div {
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
}
|
||||
.container {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background-color: lime;/*rgb(0,255,0);*/
|
||||
}
|
||||
.transformed {
|
||||
transform-style: preserve-3d;
|
||||
transform: rotateY(50deg);
|
||||
background-color: aqua;/*rgb(0,255,255);*/
|
||||
mix-blend-mode: difference;
|
||||
}
|
||||
.child {
|
||||
transform-origin: top left;
|
||||
transform: rotateX(40deg);
|
||||
background-color: red;/*rgb(255,0,0);*/
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see 2 small rectangles (yellow and blue) drawn inside a lime container.<br>
|
||||
The edges for all the rectangles should be either horizontal, or vertical (not skewed).</p>
|
||||
<div class="container">
|
||||
<div class="transformed">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<style type="text/css">
|
||||
div {
|
||||
background: #0F0;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a green square on the screen.</p>
|
||||
<div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Blended element with animation</title>
|
||||
<link href="mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: #FF0;
|
||||
}
|
||||
|
||||
@keyframes changeOpacity
|
||||
{
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0.1; }
|
||||
}
|
||||
|
||||
#blender {
|
||||
background: #0F0;
|
||||
animation: changeOpacity 1s;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a fading green box.</p>
|
||||
<div><div id="blender"></div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:rosca@adobe.com" rel="author" title="Ion Roșca">
|
||||
<link href="mailto:mitica@adobe.com" rel="reviewer" title="Mihai Țică">
|
||||
<style type="text/css">
|
||||
.parent {
|
||||
background: aqua;/*rgb(0,255,255);*/
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.blended {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
overflow: hidden;
|
||||
border-radius: 2em 2em;
|
||||
}
|
||||
.childOfBlended {
|
||||
background: lime;/*rgb(0,255,0);*/
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if you see a lime rectangle with aqua rounded corners.</p>
|
||||
<div class="parent">
|
||||
<div class="blended">
|
||||
<div class="childOfBlended">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:rosca@adobe.com" rel="author" title="Ion Roșca">
|
||||
<link href="mailto:mitica@adobe.com" rel="reviewer" title="Mihai Țică">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: lime;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see a lime rectangle.</p>
|
||||
<div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<link href="mailto:mibalan@adobe.com" rel="reviewer" title="Mihai Balan">
|
||||
<link href="mailto:olaru@adobe.com" rel="reviewer" title="Horia Olaru">
|
||||
<style type="text/css">
|
||||
.parent {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
background: #0FF;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
.child {
|
||||
background: #0F0;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a lime square with aqua borders.<br>
|
||||
If the borders are red, the test fails.</p>
|
||||
<div class="parent">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:rosca@adobe.com" rel="author" title="Ion Roșca">
|
||||
<link href="mailto:mitica@adobe.com" rel="reviewer" title="Mihai Țică">
|
||||
<style type="text/css">
|
||||
.parent {
|
||||
background: aqua;/*rgb(0,255,255);*/
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
padding-top: 1px;
|
||||
position:relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.blended {
|
||||
background: fuchsia;/*rgb(255,0,255);*/
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
transform:rotateX(20deg);
|
||||
}
|
||||
.childOfBlended {
|
||||
background: yellow;/*rgb(255,255,0);*/
|
||||
width: 120px;
|
||||
height: 122px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see a fuchsia square overlapping an aqua square. <br>
|
||||
The overlapping area should be yellow. </p>
|
||||
<div class="parent">
|
||||
<div class="blended">
|
||||
<div class="childOfBlended"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:rosca@adobe.com" rel="author" title="Ion Roșca">
|
||||
<link href="mailto:mitica@adobe.com" rel="reviewer" title="Mihai Țică">
|
||||
<style type="text/css">
|
||||
div {
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
}
|
||||
.container {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background-color: lime;/*rgb(0,255,0);*/
|
||||
}
|
||||
.transformed {
|
||||
transform: perspective(600px) translateZ(-200px);
|
||||
background-color: yellow;/*rgb(255,255,0);*/
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see a yellow square inside a green container.</p>
|
||||
<div class="container">
|
||||
<div class="transformed">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Blended element with border image</title>
|
||||
<link href="mailto:mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<style>
|
||||
div {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background: #0F0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a green rectangle. <br>
|
||||
If blending is not performed, the div is displayed with red. </p>
|
||||
<div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:rosca@adobe.com" rel="author" title="Ion Roșca">
|
||||
<link href="mailto:mitica@adobe.com" rel="reviewer" title="Mihai Țică">
|
||||
<style type="text/css">
|
||||
.parent {
|
||||
background: aqua;/*rgb(0,255,255);*/
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
padding-top: 1px;
|
||||
transform:rotateX(20deg);
|
||||
}
|
||||
.blended {
|
||||
background: fuchsia;/*rgb(255,0,255);*/
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
transform:rotateX(20deg);
|
||||
}
|
||||
.childOfBlended {
|
||||
background: yellow;/*rgb(255,255,0);*/
|
||||
width: 120px;
|
||||
height: 122px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see a fuchsia square overlapping an aqua square. <br>
|
||||
The overlapping area should be yellow. </p>
|
||||
<div class="parent">
|
||||
<div class="blended">
|
||||
<div class="childOfBlended"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Canvas with mix-blend-mode blends with the parent element.</title>
|
||||
<link href="mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a green rectangle. <br>
|
||||
If blending is not performed, the canvas is displayed with red. </p>
|
||||
<div style="width: 100px; height: 100px; background: #0F0;">
|
||||
|
||||
|
||||
</div></body></html>
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Canvas with mix-blend-mode blends with sibling element</title>
|
||||
<link href="mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a green rectangle. <br>
|
||||
If blending is not performed, the canvas is displayed with red. </p>
|
||||
<div style="width: 100px; height: 100px; background: #0F0"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Blended element with filter.</title>
|
||||
<link href="mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a green blurred square. <br>
|
||||
The test fails if the square is drawn with red. </p>
|
||||
|
||||
<div style="background: #0F0; filter: opacity(0.9);"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: an iframe element with mix-blend-mode should blend with its parent element.</title>
|
||||
<link href="mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a green rectangle. <br>
|
||||
If blending is not performed, the canvas is displayed with red. </p>
|
||||
|
||||
<div style="width: 100px; height: 100px; background: #0F0;"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: an iframe element with mix-blend-mode should blend with a sibling element.</title>
|
||||
<link href="mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a green rectangle. <br>
|
||||
If blending is not performed, the canvas is displayed with red. </p>
|
||||
|
||||
<div style="width: 100px; height: 100px; background: #0F0;"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Image element with mix-blend-mode.</title>
|
||||
<link href="mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 75px;
|
||||
background: #FF0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a green rectangle.</p>
|
||||
<div>
|
||||
<img src="../support/red.png" style="max-width:100%; max-height:100%;">
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:rosca@adobe.com" rel="author" title="Ion Roșca">
|
||||
<link href="mailto:mitica@adobe.com" rel="reviewer" title="Mihai Țică">
|
||||
<style type="text/css">
|
||||
.parent {
|
||||
background: aqua;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.blended {
|
||||
background: yellow;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border-radius: 2em 2em;
|
||||
}
|
||||
.blended1 {
|
||||
background: yellow;
|
||||
width: 150px;
|
||||
height: 75px;
|
||||
margin-top: -75px;
|
||||
}
|
||||
.child1 {
|
||||
background: aqua;
|
||||
width: 150px;
|
||||
height: 75px;
|
||||
border-radius: 0 0 2em 2em;
|
||||
}
|
||||
.siblingOfBlended {
|
||||
background: yellow;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
overflow: hidden;
|
||||
border-radius: 2em 2em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p> This test passes if you can see a rectangle split in two pieces: the top half is yellow with aqua rounded borders and the bottom half is aqua with yellow borders.</p>
|
||||
<div class="parent">
|
||||
<div class="blended">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
<div class="blended1">
|
||||
<div class="child1"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Blended element with masking.</title>
|
||||
<link href="mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style></head>
|
||||
|
||||
<body>
|
||||
<p>Test passes if you can see a green circle. <br>
|
||||
The test fails if the circle is drawn with red. </p>
|
||||
|
||||
<div style="background: #FF0;"><div style="background: #0F0; mask-image: url('../support/red_circle.svg');"></div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<link href="mailto:mibalan@adobe.com" rel="reviewer" title="Mihai Balan">
|
||||
<link href="mailto:olaru@adobe.com" rel="reviewer" title="Horia Olaru">
|
||||
<style type="text/css">
|
||||
body {
|
||||
background: lightgray;
|
||||
}
|
||||
.container {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: #0F0;
|
||||
}
|
||||
.blender {
|
||||
background: #0F0;
|
||||
margin: 50px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.intersection {
|
||||
background: #000;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-top: -150px;
|
||||
margin-left: 50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see two green squares and a black square as their intersection,<br>
|
||||
drawn over a light gray background.</p>
|
||||
<div class="container">
|
||||
<div class="blender"></div>
|
||||
<div class="intersection"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Paragraph element with mix-blend-mode over parent with background image.</title>
|
||||
<link href="mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-image: url('../support/yellow_square.svg');
|
||||
}
|
||||
|
||||
#blender {
|
||||
color: #0F0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the paragraph text is drawn with green.</p>
|
||||
<div>
|
||||
<p id="blender">This should be drawn with green.</p>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Paragraph element with mix-blend-mode.</title>
|
||||
<link href="mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<link href="http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="Test checks that test a paragraph element blends with the parent element." name="assert">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: #FF0;
|
||||
}
|
||||
|
||||
#blender {
|
||||
color: #0F0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the paragraph text is drawn with green.</p>
|
||||
<div>
|
||||
<p id="blender">This should be drawn with green.</p>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:rosca@adobe.com" rel="author" title="Ion Roșca">
|
||||
<link href="mailto:mitica@adobe.com" rel="reviewer" title="Mihai Țică">
|
||||
<style type="text/css">
|
||||
.parent {
|
||||
background: lime;
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
border-radius: 1em 5em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p> Test passes if you see a lime square with rounded corners.</p>
|
||||
<div class="parent">
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:rosca@adobe.com" rel="author" title="Ion Roșca">
|
||||
<link href="mailto:mitica@adobe.com" rel="reviewer" title="Mihai Țică">
|
||||
<style type="text/css">
|
||||
.parent {
|
||||
background: aqua;/*rgb(0,255,255);*/
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
overflow:scroll;
|
||||
}
|
||||
|
||||
.blended {
|
||||
background: blue;/*rgb(0,0,255);*/
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.scrollableContent {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see a blue square inside a bigger aqua container. <br>
|
||||
The aqua container should have scrollbars on the left and bottom.</p>
|
||||
<div class="parent">
|
||||
<div class="blended"></div>
|
||||
<div class="scrollableContent"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:rosca@adobe.com" rel="author" title="Ion Roșca">
|
||||
<link href="mailto:mitica@adobe.com" rel="reviewer" title="Mihai Țică">
|
||||
<style type="text/css">
|
||||
.parent {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
overflow:scroll;
|
||||
}
|
||||
.blended {
|
||||
background: lime;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see a scrollable lime rectangle.</p>
|
||||
<div class="parent">
|
||||
<div class="blended"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:rosca@adobe.com" rel="author" title="Ion Roșca">
|
||||
<link href="mailto:mitica@adobe.com" rel="reviewer" title="Mihai Țică">
|
||||
<style type="text/css">
|
||||
.parent {
|
||||
background: aqua;/*rgb(0,255,255);*/
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
padding-top: 1px;
|
||||
transform:rotateX(20deg);
|
||||
}
|
||||
.blended {
|
||||
background: fuchsia;/*rgb(255,0,255);*/
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
.childOfBlended {
|
||||
background: yellow;/*rgb(255,255,0);*/
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see a fuchsia square overlapping an aqua square. <br>
|
||||
The overlapping area should be yellow. </p>
|
||||
<div class="parent">
|
||||
<div class="blended">
|
||||
<div class="childOfBlended"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<link href="mailto:mibalan@adobe.com" rel="reviewer" title="Mihai Balan">
|
||||
<link href="mailto:olaru@adobe.com" rel="reviewer" title="Horia Olaru">
|
||||
<style type="text/css">
|
||||
body {
|
||||
background: lightgray;
|
||||
}
|
||||
.parent {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: #FF0;
|
||||
}
|
||||
.blended {
|
||||
background: #0F0;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if a green circle is drawn on top of a yellow square, over a lightgray background.</p>
|
||||
<div class="parent">
|
||||
<div class="blended"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<link href="mailto:mibalan@adobe.com" rel="reviewer" title="Mihai Balan">
|
||||
<link href="mailto:olaru@adobe.com" rel="reviewer" title="Horia Olaru">
|
||||
<style type="text/css">
|
||||
.container {
|
||||
background: #FF0;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.text {
|
||||
color: #0F0;
|
||||
}
|
||||
body {
|
||||
background: lightgray;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if a yellow square with green text is drawn over a lightgray background.</p>
|
||||
<div class="container">
|
||||
<div class="text">Red text that becomes green after blending</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Set mix-blend-mode from script.</title>
|
||||
<link href="mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: #FF0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a green box.</p>
|
||||
<div><div style="background: #0F0;"></div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:rosca@adobe.com" rel="author" title="Ion Roșca">
|
||||
<link href="mailto:mitica@adobe.com" rel="reviewer" title="Mihai Țică">
|
||||
<style type="text/css">
|
||||
.parent {
|
||||
background: aqua;/*rgb(0,255,255);*/
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
padding-top: 1px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.blended {
|
||||
background: fuchsia;/*rgb(255,0,255);*/
|
||||
margin-top: -200px;
|
||||
margin-left: 20px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
.siblingOfBlended {
|
||||
background: blue;/*rgb(0,0,255);*/
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
transform: perspective(600px) translateZ(-200px);
|
||||
}
|
||||
.intersectionOfBlended {
|
||||
background: yellow;/*rgb(255,255,0);*/
|
||||
margin-top: -200px;
|
||||
margin-left: 20px;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see three overlapping squares, from back to front, having the following colors: aqua, fuchsia and blue. <br>
|
||||
The intersection area between aqua and fuchsia squares, which is not overlapped by the blue square, should be yellow.</p>
|
||||
<div class="parent">
|
||||
<div class="siblingOfBlended"></div>
|
||||
<div class="blended"></div>
|
||||
<div class="intersectionOfBlended"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<style>
|
||||
.simple {
|
||||
background: aqua;/*rgb(0,255,255);*/
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
display:inline-block;
|
||||
}
|
||||
.mixed {
|
||||
background: black;/*rgb(0,0,0);*/
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see a black rectangle with large aqua borders.
|
||||
You should not see a red rectangle on the page. </p>
|
||||
<div class="simple">
|
||||
<div class="mixed"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<style>
|
||||
.container{
|
||||
margin: 30px;
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
float: left;
|
||||
background: yellow;/*rgb(255,255,0);*/
|
||||
}
|
||||
.simple{
|
||||
background: lime;/* rgb(0,255,0);*/
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: fixed;
|
||||
}
|
||||
.mixed {
|
||||
background: red;/*rgb(255,0,0);*/
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.overlap {
|
||||
background: black;/*rgb(0,0,0);*/
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is no complete red square on the screen. <br>
|
||||
You should see two overlapping lime and red squares on top of a yellow one. <br>
|
||||
At the intersection of the lime and red squares, a black square will be created. </p>
|
||||
<div class="container">
|
||||
<div class="simple">
|
||||
<div class="mixed">
|
||||
<div class="overlap"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<style>
|
||||
div {
|
||||
width: 100px;
|
||||
height:100px;
|
||||
background-color: black;/*rgb(0,0,0);*/
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>There should be no red rectangle on the screen. <br>
|
||||
Test passes if you see a black rectangle.</p>
|
||||
<div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: SVG element is blended.</title>
|
||||
<link href="mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: #0F0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a green box.</p>
|
||||
<div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Blended element with transition</title>
|
||||
<link href="mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<meta content="dom" name="flags">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#blender {
|
||||
background: #0F0;
|
||||
transition: opacity 1s ease;
|
||||
}
|
||||
|
||||
.opaqueBox {
|
||||
opacity: 0.4;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a fading green rectangle.</p>
|
||||
<div style="background: #FF0;"><div id="blender"></div></div>
|
||||
<script type="text/javascript">
|
||||
setInterval(function(){ document.getElementById('blender').className = 'opaqueBox'; }, 100);
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: Video element with mix-blend-mode.</title>
|
||||
<link href="mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 480px;
|
||||
height: 352px;
|
||||
background: #FF0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a green circle over a blue background.</p>
|
||||
<div>
|
||||
<video autoplay="">
|
||||
<source src="../support/red_circle.mp4" type="video/mp4">
|
||||
</video>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test: mix-blend-mode blending between a video element and an overlapping sibling</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:mitica@adobe.com" rel="author" title="Mihai Tica">
|
||||
<style type="text/css">
|
||||
div {
|
||||
margin-top: -361px;
|
||||
background-color: #FF0;
|
||||
width: 300px;
|
||||
height: 350px;
|
||||
color: #F00;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see text and a circle moving from the top to the bottom of the page,<br>
|
||||
both drawn with green, over a blue background.</p>
|
||||
<video autoplay="">
|
||||
<source src="../support/red_circle.mp4" type="video/mp4">
|
||||
</video>
|
||||
<div>Some text inside the div.</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
|
||||
<link href="mailto:rosca@adobe.com" rel="author" title="Ion Roșca">
|
||||
<link href="mailto:mitica@adobe.com" rel="reviewer" title="Mihai Țică">
|
||||
<style type="text/css">
|
||||
div {
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
}
|
||||
.container {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background-color: lime;/*rgb(0,255,0);*/
|
||||
}
|
||||
.transformed {
|
||||
/*transform-style: preserve-3d;*/
|
||||
transform: rotateY(50deg);
|
||||
background-color: blue;/*rgb(0,0,255);*/
|
||||
/*mix-blend-mode: difference;*/
|
||||
}
|
||||
.child {
|
||||
transform-origin: top left;
|
||||
transform: rotateX(40deg);
|
||||
background-color: yellow;/*rgb(255,255,0);*/
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see 2 small rectangles (yellow and blue) drawn inside a lime container.<br>
|
||||
The edges for all the rectangles should be either horizontal, or vertical (not skewed).</p>
|
||||
<div class="container">
|
||||
<div class="transformed">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -1,3 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
|
||||
<rect width="100" height="100" style="fill:rgb(0,255,0);mix-blend-mode: difference;"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 152 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
|
@ -1,3 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
|
||||
<circle cx="50" cy="50" r="40" fill="#F00"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 110 B |
|
|
@ -1,6 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head></head><body>
|
||||
<div style="width: 100px; height: 100px; background: #F00;"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
|
||||
<rect width="100" height="100" style="fill:rgb(255,0,0);"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 125 B |
|
|
@ -1,3 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
|
||||
<rect width="100" height="100" style="fill:rgb(255,255,0);"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 127 B |
|
|
@ -24,326 +24,6 @@
|
|||
<th>Flags</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="mix-blend-mode-animation" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="Blended element with animation">
|
||||
<a href="mix-blend-mode-animation.htm">mix-blend-mode-animation</a></td>
|
||||
<td><a href="reference/mix-blend-mode-animation-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mix-blend-mode-blended-element-interposed" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Reftest Reference">
|
||||
<a href="mix-blend-mode-blended-element-interposed.htm">mix-blend-mode-blended-element-interposed</a></td>
|
||||
<td><a href="reference/green-square.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mix-blend-mode-blended-element-overflow-hidden-and-border-radius" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="blending between an element and its child having overflow:hidden and border-radius">
|
||||
<a href="mix-blend-mode-blended-element-overflow-hidden-and-border-radius.htm">mix-blend-mode-blended-element-overflow-hidden-and-border-radius</a></td>
|
||||
<td><a href="reference/mix-blend-mode-blended-element-overflow-hidden-and-border-radius-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mix-blend-mode-blended-element-overflow-scroll" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="blending between an element and its child having overflow:scroll">
|
||||
<a href="mix-blend-mode-blended-element-overflow-scroll.htm">mix-blend-mode-blended-element-overflow-scroll</a></td>
|
||||
<td><a href="reference/mix-blend-mode-blended-element-overflow-scroll-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mix-blend-mode-blended-element-with-transparent-pixels" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="blending between an element with transparent pixels and a child element">
|
||||
<a href="mix-blend-mode-blended-element-with-transparent-pixels.htm">mix-blend-mode-blended-element-with-transparent-pixels</a></td>
|
||||
<td><a href="reference/mix-blend-mode-blended-element-with-transparent-pixels-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mix-blend-mode-blended-with-3d-transform" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="mix-blend-mode between an element and its child with 3D transform">
|
||||
<a href="mix-blend-mode-blended-with-3D-transform.htm">mix-blend-mode-blended-with-3d-transform</a></td>
|
||||
<td><a href="reference/mix-blend-mode-blended-with-3D-transform-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mix-blend-mode-blended-with-transform-and-perspective" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="blending between an element and its child having mix-blend-mode and perspective">
|
||||
<a href="mix-blend-mode-blended-with-transform-and-perspective.htm">mix-blend-mode-blended-with-transform-and-perspective</a></td>
|
||||
<td><a href="reference/mix-blend-mode-blended-with-transform-and-perspective-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mix-blend-mode-blending-with-sibling" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="mix-blend-mode between an element and its sibling">
|
||||
<a href="mix-blend-mode-blending-with-sibling.htm">mix-blend-mode-blending-with-sibling</a></td>
|
||||
<td><a href="reference/green-square.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mix-blend-mode-border-image" class="svg">
|
||||
<tr>
|
||||
<td rowspan="1" title="Blended element with border image">
|
||||
<a href="mix-blend-mode-border-image.htm">mix-blend-mode-border-image</a></td>
|
||||
<td><a href="reference/mix-blend-mode-border-image-ref.htm">=</a> </td>
|
||||
<td rowspan="1"><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mix-blend-mode-both-parent-and-blended-with-3d-transform" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="mix-blend-mode between an element and its child (both with 3D transform)">
|
||||
<a href="mix-blend-mode-both-parent-and-blended-with-3D-transform.htm">mix-blend-mode-both-parent-and-blended-with-3d-transform</a></td>
|
||||
<td><a href="reference/mix-blend-mode-both-parent-and-blended-with-3D-transform-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mix-blend-mode-canvas-parent" class="dom">
|
||||
<tr>
|
||||
<td rowspan="1" title="Canvas with mix-blend-mode blends with the parent element.">
|
||||
<a href="mix-blend-mode-canvas-parent.htm">mix-blend-mode-canvas-parent</a></td>
|
||||
<td><a href="reference/mix-blend-mode-canvas-parent-ref.htm">=</a> </td>
|
||||
<td rowspan="1"><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mix-blend-mode-canvas-sibling" class="dom">
|
||||
<tr>
|
||||
<td rowspan="1" title="Canvas with mix-blend-mode blends with sibling element">
|
||||
<a href="mix-blend-mode-canvas-sibling.htm">mix-blend-mode-canvas-sibling</a></td>
|
||||
<td><a href="reference/mix-blend-mode-canvas-sibling-ref.htm">=</a> </td>
|
||||
<td rowspan="1"><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mix-blend-mode-filter" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="Blended element with filter.">
|
||||
<a href="mix-blend-mode-filter.htm">mix-blend-mode-filter</a></td>
|
||||
<td><a href="reference/mix-blend-mode-filter-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mix-blend-mode-iframe-parent" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="an iframe element with mix-blend-mode should blend with its parent element.">
|
||||
<a href="mix-blend-mode-iframe-parent.htm">mix-blend-mode-iframe-parent</a></td>
|
||||
<td><a href="reference/mix-blend-mode-iframe-parent-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mix-blend-mode-iframe-sibling" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="an iframe element with mix-blend-mode should blend with a sibling element.">
|
||||
<a href="mix-blend-mode-iframe-sibling.htm">mix-blend-mode-iframe-sibling</a></td>
|
||||
<td><a href="reference/mix-blend-mode-iframe-sibling-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mix-blend-mode-image" class="image">
|
||||
<tr>
|
||||
<td rowspan="1" title="Image element with mix-blend-mode.">
|
||||
<a href="mix-blend-mode-image.htm">mix-blend-mode-image</a></td>
|
||||
<td><a href="reference/mix-blend-mode-image-notref.htm">≠</a> </td>
|
||||
<td rowspan="1"><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mix-blend-mode-in-svg-image" class="svg">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Compositing and Blending: mix-blend-mode in an SVG linked as an image">
|
||||
<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 rowspan="1"><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mix-blend-mode-intermediate-element-overflow-hidden-and-border-radius" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="mix-blend-mode between an element and its child having overflow:hidden and border-radius, when the blending element overlaps a sibling element">
|
||||
<a href="mix-blend-mode-intermediate-element-overflow-hidden-and-border-radius.htm">mix-blend-mode-intermediate-element-overflow-hidden-and-border-radius</a></td>
|
||||
<td><a href="reference/mix-blend-mode-intermediate-element-overflow-hidden-and-border-radius-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mix-blend-mode-mask" class="svg">
|
||||
<tr>
|
||||
<td rowspan="1" title="Blended element with masking.">
|
||||
<a href="mix-blend-mode-mask.htm">mix-blend-mode-mask</a></td>
|
||||
<td><a href="reference/mix-blend-mode-mask-ref.htm">=</a> </td>
|
||||
<td rowspan="1"><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mix-blend-mode-overflowing-child" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="blended element overflows parent">
|
||||
<a href="mix-blend-mode-overflowing-child.htm">mix-blend-mode-overflowing-child</a></td>
|
||||
<td><a href="reference/mix-blend-mode-overflowing-child-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mix-blend-mode-overflowing-child-of-blended-element" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="blend an element having an overflowing child.">
|
||||
<a href="mix-blend-mode-overflowing-child-of-blended-element.htm">mix-blend-mode-overflowing-child-of-blended-element</a></td>
|
||||
<td><a href="reference/mix-blend-mode-blended-element-with-transparent-pixels-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mix-blend-mode-paragraph" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="Paragraph element with mix-blend-mode.">
|
||||
<a href="mix-blend-mode-paragraph.htm">mix-blend-mode-paragraph</a></td>
|
||||
<td><a href="reference/mix-blend-mode-paragraph-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mix-blend-mode-paragraph-background-image" class="svg">
|
||||
<tr>
|
||||
<td rowspan="1" title="Paragraph element with mix-blend-mode over parent with background image.">
|
||||
<a href="mix-blend-mode-paragraph-background-image.htm">mix-blend-mode-paragraph-background-image</a></td>
|
||||
<td><a href="reference/mix-blend-mode-paragraph-background-image-ref.htm">=</a> </td>
|
||||
<td rowspan="1"><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mix-blend-mode-parent-element-overflow-hidden-and-border-radius" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="blending between an element having overflow:hidden and border-radius and its child">
|
||||
<a href="mix-blend-mode-parent-element-overflow-hidden-and-border-radius.htm">mix-blend-mode-parent-element-overflow-hidden-and-border-radius</a></td>
|
||||
<td><a href="reference/mix-blend-mode-parent-element-overflow-hidden-and-border-radius-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mix-blend-mode-parent-element-overflow-scroll" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="blending between an element with overflow:scroll and its child">
|
||||
<a href="mix-blend-mode-parent-element-overflow-scroll.htm">mix-blend-mode-parent-element-overflow-scroll</a></td>
|
||||
<td><a href="reference/mix-blend-mode-parent-element-overflow-scroll-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mix-blend-mode-parent-element-overflow-scroll-blended-position-fixed" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="blending between an element having overflow:scroll and its child having position: fixed">
|
||||
<a href="mix-blend-mode-parent-element-overflow-scroll-blended-position-fixed.htm">mix-blend-mode-parent-element-overflow-scroll-blended-position-fixed</a></td>
|
||||
<td><a href="reference/mix-blend-mode-parent-element-overflow-scroll-blended-position-fixed-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mix-blend-mode-parent-with-3d-transform" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="mix-blend-mode between an element with 3D transform and its child">
|
||||
<a href="mix-blend-mode-parent-with-3D-transform.htm">mix-blend-mode-parent-with-3d-transform</a></td>
|
||||
<td><a href="reference/mix-blend-mode-parent-with-3D-transform-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mix-blend-mode-parent-with-border-radius" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="blending with parent having border radius">
|
||||
<a href="mix-blend-mode-parent-with-border-radius.htm">mix-blend-mode-parent-with-border-radius</a></td>
|
||||
<td><a href="reference/mix-blend-mode-parent-with-border-radius-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mix-blend-mode-parent-with-text" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="check that the stacking context created by the parent element isolates blending.">
|
||||
<a href="mix-blend-mode-parent-with-text.htm">mix-blend-mode-parent-with-text</a></td>
|
||||
<td><a href="reference/mix-blend-mode-parent-with-text-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mix-blend-mode-script" class="dom">
|
||||
<tr>
|
||||
<td rowspan="1" title="Set mix-blend-mode from script.">
|
||||
<a href="mix-blend-mode-script.htm">mix-blend-mode-script</a></td>
|
||||
<td><a href="reference/mix-blend-mode-script-ref.htm">=</a> </td>
|
||||
<td rowspan="1"><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mix-blend-mode-sibling-with-3d-transform" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="blending between an element and its sibling element having 3D transform">
|
||||
<a href="mix-blend-mode-sibling-with-3D-transform.htm">mix-blend-mode-sibling-with-3d-transform</a></td>
|
||||
<td><a href="reference/mix-blend-mode-sibling-with-3D-transform-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mix-blend-mode-simple" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="An element with mix-blend-mode blends with its parent element.">
|
||||
<a href="mix-blend-mode-simple.htm">mix-blend-mode-simple</a></td>
|
||||
<td><a href="reference/green-square.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mix-blend-mode-stacking-context-001" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="mix-blend-mode between an element and its child">
|
||||
<a href="mix-blend-mode-stacking-context-001.htm">mix-blend-mode-stacking-context-001</a></td>
|
||||
<td><a href="reference/mix-blend-mode-stacking-context-001-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mix-blend-mode-stacking-context-creates-isolation" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="stacking context creates isolated group">
|
||||
<a href="mix-blend-mode-stacking-context-creates-isolation.htm">mix-blend-mode-stacking-context-creates-isolation</a></td>
|
||||
<td><a href="reference/mix-blend-mode-stacking-context-creates-isolation-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mix-blend-mode-svg" class="svg">
|
||||
<tr>
|
||||
<td rowspan="1" title="SVG element is blended.">
|
||||
<a href="mix-blend-mode-svg.htm">mix-blend-mode-svg</a></td>
|
||||
<td><a href="reference/mix-blend-mode-svg-ref.htm">=</a> </td>
|
||||
<td rowspan="1"><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mix-blend-mode-svg-rectangle" class="svg">
|
||||
<tr>
|
||||
<td rowspan="1" title="mix-blend-mode for a simple SVG element - rectangle">
|
||||
<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 rowspan="1"><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mix-blend-mode-transition" class="dom">
|
||||
<tr>
|
||||
<td rowspan="1" title="Blended element with transition">
|
||||
<a href="mix-blend-mode-transition.htm">mix-blend-mode-transition</a></td>
|
||||
<td><a href="reference/mix-blend-mode-transition-ref.htm">=</a> </td>
|
||||
<td rowspan="1"><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mix-blend-mode-video" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="Video element with mix-blend-mode.">
|
||||
<a href="mix-blend-mode-video.htm">mix-blend-mode-video</a></td>
|
||||
<td><a href="reference/mix-blend-mode-video-notref.htm">≠</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mix-blend-mode-video-sibling" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="mix-blend-mode blending between a video element and an overlapping sibling">
|
||||
<a href="mix-blend-mode-video-sibling.htm">mix-blend-mode-video-sibling</a></td>
|
||||
<td><a href="reference/mix-blend-mode-video-sibling-notref.htm">≠</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="mix-blend-mode-with-transform-and-preserve-3d" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="mix-blend-mode between an element and its child having 3D transform and preserve 3D">
|
||||
<a href="mix-blend-mode-with-transform-and-preserve-3D.htm">mix-blend-mode-with-transform-and-preserve-3d</a></td>
|
||||
<td><a href="reference/mix-blend-mode-with-transform-and-preserve-3D-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -1,41 +1 @@
|
|||
|
||||
mix-blend-mode-animation.htm == reference/mix-blend-mode-animation-ref.htm
|
||||
mix-blend-mode-blended-element-interposed.htm == reference/green-square.htm
|
||||
mix-blend-mode-blended-element-overflow-hidden-and-border-radius.htm == reference/mix-blend-mode-blended-element-overflow-hidden-and-border-radius-ref.htm
|
||||
mix-blend-mode-blended-element-overflow-scroll.htm == reference/mix-blend-mode-blended-element-overflow-scroll-ref.htm
|
||||
mix-blend-mode-blended-element-with-transparent-pixels.htm == reference/mix-blend-mode-blended-element-with-transparent-pixels-ref.htm
|
||||
mix-blend-mode-blended-with-3D-transform.htm == reference/mix-blend-mode-blended-with-3D-transform-ref.htm
|
||||
mix-blend-mode-blended-with-transform-and-perspective.htm == reference/mix-blend-mode-blended-with-transform-and-perspective-ref.htm
|
||||
mix-blend-mode-blending-with-sibling.htm == reference/green-square.htm
|
||||
mix-blend-mode-border-image.htm == reference/mix-blend-mode-border-image-ref.htm
|
||||
mix-blend-mode-both-parent-and-blended-with-3D-transform.htm == reference/mix-blend-mode-both-parent-and-blended-with-3D-transform-ref.htm
|
||||
mix-blend-mode-canvas-parent.htm == reference/mix-blend-mode-canvas-parent-ref.htm
|
||||
mix-blend-mode-canvas-sibling.htm == reference/mix-blend-mode-canvas-sibling-ref.htm
|
||||
mix-blend-mode-filter.htm == reference/mix-blend-mode-filter-ref.htm
|
||||
mix-blend-mode-iframe-parent.htm == reference/mix-blend-mode-iframe-parent-ref.htm
|
||||
mix-blend-mode-iframe-sibling.htm == reference/mix-blend-mode-iframe-sibling-ref.htm
|
||||
mix-blend-mode-image.htm != reference/mix-blend-mode-image-notref.htm
|
||||
mix-blend-mode-in-svg-image.htm == reference/mix-blend-mode-svg-rectangle-ref.htm
|
||||
mix-blend-mode-intermediate-element-overflow-hidden-and-border-radius.htm == reference/mix-blend-mode-intermediate-element-overflow-hidden-and-border-radius-ref.htm
|
||||
mix-blend-mode-mask.htm == reference/mix-blend-mode-mask-ref.htm
|
||||
mix-blend-mode-overflowing-child.htm == reference/mix-blend-mode-overflowing-child-ref.htm
|
||||
mix-blend-mode-overflowing-child-of-blended-element.htm == reference/mix-blend-mode-blended-element-with-transparent-pixels-ref.htm
|
||||
mix-blend-mode-paragraph.htm == reference/mix-blend-mode-paragraph-ref.htm
|
||||
mix-blend-mode-paragraph-background-image.htm == reference/mix-blend-mode-paragraph-background-image-ref.htm
|
||||
mix-blend-mode-parent-element-overflow-hidden-and-border-radius.htm == reference/mix-blend-mode-parent-element-overflow-hidden-and-border-radius-ref.htm
|
||||
mix-blend-mode-parent-element-overflow-scroll.htm == reference/mix-blend-mode-parent-element-overflow-scroll-ref.htm
|
||||
mix-blend-mode-parent-element-overflow-scroll-blended-position-fixed.htm == reference/mix-blend-mode-parent-element-overflow-scroll-blended-position-fixed-ref.htm
|
||||
mix-blend-mode-parent-with-3D-transform.htm == reference/mix-blend-mode-parent-with-3D-transform-ref.htm
|
||||
mix-blend-mode-parent-with-border-radius.htm == reference/mix-blend-mode-parent-with-border-radius-ref.htm
|
||||
mix-blend-mode-parent-with-text.htm == reference/mix-blend-mode-parent-with-text-ref.htm
|
||||
mix-blend-mode-script.htm == reference/mix-blend-mode-script-ref.htm
|
||||
mix-blend-mode-sibling-with-3D-transform.htm == reference/mix-blend-mode-sibling-with-3D-transform-ref.htm
|
||||
mix-blend-mode-simple.htm == reference/green-square.htm
|
||||
mix-blend-mode-stacking-context-001.htm == reference/mix-blend-mode-stacking-context-001-ref.htm
|
||||
mix-blend-mode-stacking-context-creates-isolation.htm == reference/mix-blend-mode-stacking-context-creates-isolation-ref.htm
|
||||
mix-blend-mode-svg.htm == reference/mix-blend-mode-svg-ref.htm
|
||||
mix-blend-mode-svg-rectangle.htm == reference/mix-blend-mode-svg-rectangle-ref.htm
|
||||
mix-blend-mode-transition.htm == reference/mix-blend-mode-transition-ref.htm
|
||||
mix-blend-mode-video.htm != reference/mix-blend-mode-video-notref.htm
|
||||
mix-blend-mode-video-sibling.htm != reference/mix-blend-mode-video-sibling-notref.htm
|
||||
mix-blend-mode-with-transform-and-preserve-3D.htm == reference/mix-blend-mode-with-transform-and-preserve-3D-ref.htm
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue