mirror of
https://github.com/servo/servo.git
synced 2025-08-03 12:40:06 +01:00
Update CSS tests to revision 31d63cc79bd4c929ed582229e936d7b389f3e6ab
This commit is contained in:
James Graham
parent
1a81b18b9f
commit
2c9faf5363
91915 changed files with 5979820 additions and 0 deletions
6
tests/wpt/css-tests/.gitmodules
vendored
Normal file
6
tests/wpt/css-tests/.gitmodules
vendored
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
[submodule "tools"]
|
||||
path = tools
|
||||
url = https://github.com/w3c/wpt-tools.git
|
||||
[submodule "resources"]
|
||||
path = resources
|
||||
url = https://github.com/w3c/testharness.js.git
|
||||
29
tests/wpt/css-tests/LICENSE
Normal file
29
tests/wpt/css-tests/LICENSE
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
W3C 3-clause BSD License
|
||||
|
||||
Redistribution and use in source and binary forms, with or without
|
||||
modification, are permitted provided that the following conditions are
|
||||
met:
|
||||
|
||||
* Redistributions of works must retain the original copyright notice, this
|
||||
list of conditions and the following disclaimer.
|
||||
|
||||
* Redistributions in binary form must reproduce the original copyright
|
||||
notice, this list of conditions and the following disclaimer in the
|
||||
documentation and/or other materials provided with the distribution.
|
||||
|
||||
* Neither the name of the W3C nor the names of its contributors may be
|
||||
used to endorse or promote products derived from this work without
|
||||
specific prior written permission.
|
||||
|
||||
|
||||
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS
|
||||
IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
|
||||
IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
|
||||
ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
|
||||
LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
|
||||
CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
|
||||
SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
|
||||
INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
|
||||
CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
|
||||
ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
|
||||
POSSIBILITY OF SUCH DAMAGE.
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>mix-blend-mode with isolated groups API Test: Blending in a group with filter</title>
|
||||
<link href="mailto:windtale@163.com" rel="author" title="windtale">
|
||||
<link href="http://www.w3.org/TR/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="svg" name="flags">
|
||||
<meta content="Blending in a group with filter" name="assert">
|
||||
<style type="text/css">
|
||||
#redSquare {
|
||||
mix-blend-mode: lighten;
|
||||
}
|
||||
#svgMain {
|
||||
top: 100px;
|
||||
left: 100px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: blue;
|
||||
}
|
||||
#group{
|
||||
filter: alpha(opacity=50,finishopacity=50,style=2);
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<svg id="svgMain">
|
||||
<g id="group">
|
||||
<rect width="100" fill="red" id="redSquare" height="100"></rect>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>mix-blend-mode with isolated groups API Test: Blending in a group with opacity</title>
|
||||
<link href="mailto:windtale@163.com" rel="author" title="windtale">
|
||||
<link href="http://www.w3.org/TR/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="svg" name="flags">
|
||||
<meta content="Blending in a group with opacity" name="assert">
|
||||
<style type="text/css">
|
||||
#greenSquare {
|
||||
mix-blend-mode: darken;
|
||||
}
|
||||
#redSquare {
|
||||
mix-blend-mode: lighten;
|
||||
}
|
||||
#svgMain {
|
||||
top: 100px;
|
||||
left: 100px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<svg id="svgMain">
|
||||
<g opacity="0.59">
|
||||
<rect width="100" fill="red" id="redSquare" height="100"></rect>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>mix-blend-mode with simple SVG graphical elements API Test: Text with SVG background</title>
|
||||
<link href="mailto:windtale@163.com" rel="author" title="windtale">
|
||||
<link href="http://www.w3.org/TR/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="svg" name="flags">
|
||||
<meta content="Text with SVG background" name="assert">
|
||||
<style type="text/css">
|
||||
#lblTxt {
|
||||
mix-blend-mode: darken;
|
||||
}
|
||||
#svgMain {
|
||||
top: 100px;
|
||||
left: 100px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<svg id="svgMain">
|
||||
<text y="55" id="lblTxt">Text with SVG background</text>
|
||||
</svg>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Compositing and Blending: isolation applied to a group containing blending</title>
|
||||
<link href="http://dev.w3.org/fxtf/compositing-1/#isolation" rel="help">
|
||||
<link href="mailto:cabanier@adobe.com" rel="author" title="cabanier">
|
||||
<link href="http://www.w3.org/TR/compositing-1/#isolation" rel="help">
|
||||
<meta content="Isolation on a group with blending" name="assert">
|
||||
<style>
|
||||
.a {
|
||||
background-color: rgb(0,255,0);
|
||||
}
|
||||
#b {
|
||||
width: 200px;
|
||||
height: 210px;
|
||||
}
|
||||
.c {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
mix-blend-mode: difference;
|
||||
}
|
||||
#d {
|
||||
isolation: isolate;
|
||||
}
|
||||
</style>
|
||||
</head><body><p>Test passes if you see a solid green rectangle</p>
|
||||
<div class="a" id="b">
|
||||
<div id="d">
|
||||
<div class="a c"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
39
tests/wpt/css-tests/compositing-1_dev/html/chapter-1.htm
Normal file
39
tests/wpt/css-tests/compositing-1_dev/html/chapter-1.htm
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Introduction - Compositing and Blending Level 1 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>Compositing and Blending Level 1 CR Test Suite</h1>
|
||||
<h2>Introduction (0 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s1">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#introduction">1 Introduction</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
201
tests/wpt/css-tests/compositing-1_dev/html/chapter-10.htm
Normal file
201
tests/wpt/css-tests/compositing-1_dev/html/chapter-10.htm
Normal file
|
|
@ -0,0 +1,201 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Blending - Compositing and Blending Level 1 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>Compositing and Blending Level 1 CR Test Suite</h1>
|
||||
<h2>Blending (0 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s10">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s10">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#blending">10 Blending</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s10.1">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#blendingseparable">10.1 Separable blend modes</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.1.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s10.1.1">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#blendingnormal">10.1.1 normal blend mode</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.1.1.#valdef-blend-mode-normal">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.1.2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s10.1.2">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#blendingmultiply">10.1.2 multiply blend mode</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.1.2.#valdef-blend-mode-multiply">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.1.3">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s10.1.3">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#blendingscreen">10.1.3 screen blend mode</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.1.3.#valdef-blend-mode-screen">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.1.4">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s10.1.4">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#blendingoverlay">10.1.4 overlay blend mode</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.1.4.#valdef-blend-mode-overlay">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.1.5">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s10.1.5">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#blendingdarken">10.1.5 darken blend mode</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.1.5.#valdef-blend-mode-darken">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.1.6">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s10.1.6">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#blendinglighten">10.1.6 lighten blend mode</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.1.6.#valdef-blend-mode-lighten">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.1.7">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s10.1.7">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#blendingcolordodge">10.1.7 color-dodge blend mode</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.1.7.#valdef-blend-mode-color-dodge">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.1.8">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s10.1.8">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#blendingcolorburn">10.1.8 color-burn blend mode</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.1.8.#valdef-blend-mode-color-burn">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.1.9">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s10.1.9">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#blendinghardlight">10.1.9 hard-light blend mode</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.1.9.#valdef-blend-mode-hard-light">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.1.10">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s10.1.10">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#blendingsoftlight">10.1.10 soft-light blend mode</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.1.10.#valdef-blend-mode-soft-light">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.1.11">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s10.1.11">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#blendingdifference">10.1.11 difference blend mode</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.1.11.#valdef-blend-mode-difference">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.1.12">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s10.1.12">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#blendingexclusion">10.1.12 exclusion blend mode</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.1.12.#valdef-blend-mode-exclusion">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s10.2">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#blendingnonseparable">10.2 Non-separable blend modes</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.2.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s10.2.1">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#blendinghue">10.2.1 hue blend mode</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.2.1.#valdef-blend-mode-hue">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.2.2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s10.2.2">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#blendingsaturation">10.2.2 saturation blend mode</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.2.2.#valdef-blend-mode-saturation">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.2.3">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s10.2.3">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#blendingcolor">10.2.3 color blend mode</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.2.3.#valdef-blend-mode-color">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.2.4">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s10.2.4">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#blendingluminosity">10.2.4 luminosity blend mode</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.2.4.#valdef-blend-mode-luminosity">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s10.3">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s10.3">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#isolationblending">10.3 Effect of group isolation on blending</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
39
tests/wpt/css-tests/compositing-1_dev/html/chapter-11.htm
Normal file
39
tests/wpt/css-tests/compositing-1_dev/html/chapter-11.htm
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Security issues with compositing and blending - Compositing and Blending Level 1 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>Compositing and Blending Level 1 CR Test Suite</h1>
|
||||
<h2>Security issues with compositing and blending (0 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s11">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s11">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#security">11 Security issues with compositing and blending</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
114
tests/wpt/css-tests/compositing-1_dev/html/chapter-12.htm
Normal file
114
tests/wpt/css-tests/compositing-1_dev/html/chapter-12.htm
Normal file
|
|
@ -0,0 +1,114 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Changes - Compositing and Blending Level 1 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>Compositing and Blending Level 1 CR Test Suite</h1>
|
||||
<h2>Changes (0 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s12">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s12">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#changes">12 Changes</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#abstract">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-2dcontext2">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-css21">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-css3bg">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-css3color">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-porterduff">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-rfc2119">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#biblio-svg11">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#conformance">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#conformance-classes">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#contents">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#conventions">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#cr-exit-criteria">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#experimental">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#index">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#informative">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#normative">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#partial">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#property-index">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#references">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#status">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#subtitle">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#testing">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#title">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#w3c_process_revision">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
51
tests/wpt/css-tests/compositing-1_dev/html/chapter-2.htm
Normal file
51
tests/wpt/css-tests/compositing-1_dev/html/chapter-2.htm
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Reading This Document - Compositing and Blending Level 1 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>Compositing and Blending Level 1 CR Test Suite</h1>
|
||||
<h2>Reading This Document (0 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s2">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#reading-this-document">2 Reading This Document</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s2.1">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#module-interactions">2.1 Module interactions</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s2.2">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#values">2.2 Values</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
666
tests/wpt/css-tests/compositing-1_dev/html/chapter-3.htm
Normal file
666
tests/wpt/css-tests/compositing-1_dev/html/chapter-3.htm
Normal file
|
|
@ -0,0 +1,666 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Specifying Blending in CSS - Compositing and Blending Level 1 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>Compositing and Blending Level 1 CR Test Suite</h1>
|
||||
<h2>Specifying Blending in CSS (50 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s3">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s3">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#csscompositingandblending">3 Specifying Blending in CSS</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s3.1">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#compositingandblendingorder">3.1 Order of graphical operations</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s3.2">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#csscompositingrules_CSS">3.2 Behavior specific to HTML</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.3">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s3.3">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#csscompositingrules_SVG">3.3 Behavior specific to SVG</a></th></tr>
|
||||
<!-- 2 tests -->
|
||||
<tr id="mix-blend-mode-in-svg-image-3.3" class="svg">
|
||||
<td>
|
||||
<a href="mix-blend-mode-in-svg-image.htm">mix-blend-mode-in-svg-image</a></td>
|
||||
<td><a href="reference/mix-blend-mode-svg-rectangle-ref.htm">=</a> </td>
|
||||
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
||||
<td>CSS Compositing and Blending: mix-blend-mode in an SVG linked as an image
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-svg-rectangle-3.3" class="primary svg">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-svg-rectangle.htm">mix-blend-mode-svg-rectangle</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-svg-rectangle-ref.htm">=</a> </td>
|
||||
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
||||
<td>mix-blend-mode for a simple SVG element - rectangle
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s3.4">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s3.4">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#csskeywords">3.4 CSS Properties</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.4.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s3.4.1">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#mix-blend-mode">3.4.1 The mix-blend-mode property</a></th></tr>
|
||||
<!-- 49 tests -->
|
||||
<tr id="blending_in_a_group_with_filter-3.4.1" class="primary svg">
|
||||
<td><strong>
|
||||
<a href="Blending_in_a_group_with_filter.htm">blending_in_a_group_with_filter</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
||||
<td>Blending in a group with filter
|
||||
<ul class="assert">
|
||||
<li>Blending in a group with filter</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="blending_in_a_group_with_opacity-3.4.1" class="primary svg">
|
||||
<td><strong>
|
||||
<a href="Blending_in_a_group_with_opacity.htm">blending_in_a_group_with_opacity</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
||||
<td>Blending in a group with opacity
|
||||
<ul class="assert">
|
||||
<li>Blending in a group with opacity</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="line-with-svg-background-3.4.1" class="primary svg">
|
||||
<td><strong>
|
||||
<a href="line-with-svg-background.htm">line-with-svg-background</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
||||
<td>CSS mix-blend-mode API Test
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-animation-3.4.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-animation.htm">mix-blend-mode-animation</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-animation-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>Blended element with animation
|
||||
<ul class="assert">
|
||||
<li>Test checks that an element with mix-blend-mode and animation blends with the parent element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-blended-element-interposed-3.4.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-blended-element-interposed.htm">mix-blend-mode-blended-element-interposed</a></strong></td>
|
||||
<td><a href="reference/green-square.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Reftest Reference
|
||||
<ul class="assert">
|
||||
<li>Test checks that an element with mix-blend-mode having a child blends with the parent element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-blended-element-overflow-hidden-and-border-radius-3.4.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-blended-element-overflow-hidden-and-border-radius.htm">mix-blend-mode-blended-element-overflow-hidden-and-border-radius</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-blended-element-overflow-hidden-and-border-radius-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>blending between an element and its child having overflow:hidden and border-radius
|
||||
<ul class="assert">
|
||||
<li>Test checks that an element having mix-blend-mode, overflow:hidden and border-radius blends correctly with its parent element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-blended-element-overflow-scroll-3.4.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-blended-element-overflow-scroll.htm">mix-blend-mode-blended-element-overflow-scroll</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-blended-element-overflow-scroll-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>blending between an element and its child having overflow:scroll
|
||||
<ul class="assert">
|
||||
<li>Test checks that an element with mix-blend-mode and overflow:scroll blends with its parent element</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-blended-element-with-transparent-pixels-3.4.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-blended-element-with-transparent-pixels.htm">mix-blend-mode-blended-element-with-transparent-pixels</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-blended-element-with-transparent-pixels-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>blending between an element with transparent pixels and a child element
|
||||
<ul class="assert">
|
||||
<li>Test checks that blending is performed with a parent that creates a stacking context, but not with any of its underlying content. The element, including its children, must blend with the parent as a whole.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-blended-with-3d-transform-3.4.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-blended-with-3D-transform.htm">mix-blend-mode-blended-with-3d-transform</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-blended-with-3D-transform-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>mix-blend-mode between an element and its child with 3D transform
|
||||
<ul class="assert">
|
||||
<li>Test checks that the element with mix-blend-mode and 3D transform blends correctly with its parent</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-blended-with-transform-and-perspective-3.4.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-blended-with-transform-and-perspective.htm">mix-blend-mode-blended-with-transform-and-perspective</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-blended-with-transform-and-perspective-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>blending between an element and its child having mix-blend-mode and perspective
|
||||
<ul class="assert">
|
||||
<li>Test checks that an element having mix-blend-mode and perspective blends correctly with its parent</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-blending-with-sibling-3.4.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-blending-with-sibling.htm">mix-blend-mode-blending-with-sibling</a></strong></td>
|
||||
<td><a href="reference/green-square.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>mix-blend-mode between an element and its sibling
|
||||
<ul class="assert">
|
||||
<li>Test checks that an element with mix-blend-mode blends with a sibling element</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-border-image-3.4.1" class="primary svg">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-border-image.htm">mix-blend-mode-border-image</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-border-image-ref.htm">=</a> </td>
|
||||
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
||||
<td>Blended element with border image
|
||||
<ul class="assert">
|
||||
<li>Test checks if mix-blend-mode is applied for an element with border-image.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-both-parent-and-blended-with-3d-transform-3.4.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-both-parent-and-blended-with-3D-transform.htm">mix-blend-mode-both-parent-and-blended-with-3d-transform</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-both-parent-and-blended-with-3D-transform-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>mix-blend-mode between an element and its child (both with 3D transform)
|
||||
<ul class="assert">
|
||||
<li>Test checks that the element with mix-blend-mode blends with the parent element (both with 3D transform)</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-canvas-parent-3.4.1" class="primary dom">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-canvas-parent.htm">mix-blend-mode-canvas-parent</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-canvas-parent-ref.htm">=</a> </td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
||||
<td>Canvas with mix-blend-mode blends with the parent element.
|
||||
<ul class="assert">
|
||||
<li>Test checks that a canvas element having mix-blend-mode applied blends with the content of the parent element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-canvas-sibling-3.4.1" class="primary dom">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-canvas-sibling.htm">mix-blend-mode-canvas-sibling</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-canvas-sibling-ref.htm">=</a> </td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
||||
<td>Canvas with mix-blend-mode blends with sibling element
|
||||
<ul class="assert">
|
||||
<li>Test checks that a canvas element having mix-blend-mode applied blends with a sibling element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-creates-stacking-context-3.4.1" class="primary dom script">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-creates-stacking-context.htm">mix-blend-mode-creates-stacking-context</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>an element with mix-blend-mode other than normal creates a stacking context
|
||||
<ul class="assert">
|
||||
<li>Test checks that applying a blendmode other than normal to the element must establish a new stacking context.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-filter-3.4.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-filter.htm">mix-blend-mode-filter</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-filter-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>Blended element with filter.
|
||||
<ul class="assert">
|
||||
<li>Test checks that an element having a filter effect and mix-blend-mode blends with its parent element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-iframe-parent-3.4.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-iframe-parent.htm">mix-blend-mode-iframe-parent</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-iframe-parent-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>an iframe element with mix-blend-mode should blend with its parent element.
|
||||
<ul class="assert">
|
||||
<li>Test checks that an iframe element blends with its parent element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-iframe-sibling-3.4.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-iframe-sibling.htm">mix-blend-mode-iframe-sibling</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-iframe-sibling-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>an iframe element with mix-blend-mode should blend with a sibling element.
|
||||
<ul class="assert">
|
||||
<li>Test checks that an iframe element blends with a sibling element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-image-3.4.1" class="primary image">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-image.htm">mix-blend-mode-image</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-image-notref.htm">≠</a> </td>
|
||||
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||
<td>Image element with mix-blend-mode.
|
||||
<ul class="assert">
|
||||
<li>Test checks that mix-blend-mode is applied to an img element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-in-svg-image-3.4.1" class="svg">
|
||||
<td>
|
||||
<a href="mix-blend-mode-in-svg-image.htm">mix-blend-mode-in-svg-image</a></td>
|
||||
<td><a href="reference/mix-blend-mode-svg-rectangle-ref.htm">=</a> </td>
|
||||
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
||||
<td>CSS Compositing and Blending: mix-blend-mode in an SVG linked as an image
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-intermediate-element-overflow-hidden-and-border-radius-3.4.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-intermediate-element-overflow-hidden-and-border-radius.htm">mix-blend-mode-intermediate-element-overflow-hidden-and-border-radius</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-intermediate-element-overflow-hidden-and-border-radius-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>mix-blend-mode between an element and its child having overflow:hidden and border-radius, when the blending element overlaps a sibling element
|
||||
<ul class="assert">
|
||||
<li>Test checks that the element with mix-blend-mode, overflow:hidden and border-radius blends correctly with its parent, as well as with the sibling element where they overlap.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-mask-3.4.1" class="primary svg">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-mask.htm">mix-blend-mode-mask</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-mask-ref.htm">=</a> </td>
|
||||
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
||||
<td>Blended element with masking.
|
||||
<ul class="assert">
|
||||
<li>Test checks that an element having mask and mix-blend-mode blends with its parent element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-overflowing-child-3.4.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-overflowing-child.htm">mix-blend-mode-overflowing-child</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-overflowing-child-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>blended element overflows parent
|
||||
<ul class="assert">
|
||||
<li>Test checks that an overflowing element with mix-blend-mode blends with the parent element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-overflowing-child-of-blended-element-3.4.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-overflowing-child-of-blended-element.htm">mix-blend-mode-overflowing-child-of-blended-element</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-blended-element-with-transparent-pixels-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>blend an element having an overflowing child.
|
||||
<ul class="assert">
|
||||
<li>Test checks that a group consisting of an element with mix-blend-mode and an overflowing child blends as a whole with the underlying stacking context.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-paragraph-3.4.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-paragraph.htm">mix-blend-mode-paragraph</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-paragraph-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>Paragraph element with mix-blend-mode.
|
||||
<ul class="assert">
|
||||
<li>Test checks that test a paragraph element blends with the parent element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-paragraph-background-image-3.4.1" class="primary svg">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-paragraph-background-image.htm">mix-blend-mode-paragraph-background-image</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-paragraph-background-image-ref.htm">=</a> </td>
|
||||
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
||||
<td>Paragraph element with mix-blend-mode over parent with background image.
|
||||
<ul class="assert">
|
||||
<li>Test checks that test a paragraph element blends with the parent element having background image.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-parent-element-overflow-hidden-and-border-radius-3.4.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-parent-element-overflow-hidden-and-border-radius.htm">mix-blend-mode-parent-element-overflow-hidden-and-border-radius</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-parent-element-overflow-hidden-and-border-radius-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>blending between an element having overflow:hidden and border-radius and its child
|
||||
<ul class="assert">
|
||||
<li>Test checks that an element having mix-blend-mode blends with the parent element having overflow:hidden and border-radius</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-parent-element-overflow-scroll-3.4.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-parent-element-overflow-scroll.htm">mix-blend-mode-parent-element-overflow-scroll</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-parent-element-overflow-scroll-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>blending between an element with overflow:scroll and its child
|
||||
<ul class="assert">
|
||||
<li>Test checks that an element with mix-blend-mode blends its parent having overflow:scroll</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-parent-element-overflow-scroll-blended-position-fixed-3.4.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-parent-element-overflow-scroll-blended-position-fixed.htm">mix-blend-mode-parent-element-overflow-scroll-blended-position-fixed</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-parent-element-overflow-scroll-blended-position-fixed-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>blending between an element having overflow:scroll and its child having position: fixed
|
||||
<ul class="assert">
|
||||
<li>Test checks that an element with mix-blend-mode blends with the parent element with overflow:scroll</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-parent-with-3d-transform-3.4.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-parent-with-3D-transform.htm">mix-blend-mode-parent-with-3d-transform</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-parent-with-3D-transform-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>mix-blend-mode between an element with 3D transform and its child
|
||||
<ul class="assert">
|
||||
<li>Test checks that an element with mix-blend-mode blends with its parent having 3D transform</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-parent-with-3d-transform-and-transition-3.4.1" class="primary dom">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-parent-with-3D-transform-and-transition.htm">mix-blend-mode-parent-with-3d-transform-and-transition</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
||||
<td>blending between an element having 3D transitions and its child
|
||||
<ul class="assert">
|
||||
<li>Test checks that an element having mix-blend-mode blends with its parent element having 3D transform and transition</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-parent-with-border-radius-3.4.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-parent-with-border-radius.htm">mix-blend-mode-parent-with-border-radius</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-parent-with-border-radius-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>blending with parent having border radius
|
||||
<ul class="assert">
|
||||
<li>Test checks that an element with mix-blend-mode blends with the parent element having border-radius.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-parent-with-text-3.4.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-parent-with-text.htm">mix-blend-mode-parent-with-text</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-parent-with-text-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>check that the stacking context created by the parent element isolates blending.
|
||||
<ul class="assert">
|
||||
<li>Test checks that an element with mix-blend-mode only blends with the contents of a parent that creates a stacking context.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-parsing-3.4.1" class="primary dom script">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-parsing.htm">mix-blend-mode-parsing</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>parsing mix-blend-mode property
|
||||
<ul class="assert">
|
||||
<li>Test checks that the value specified for mix-blend-mode property is correctly parsed</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-script-3.4.1" class="primary dom">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-script.htm">mix-blend-mode-script</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-script-ref.htm">=</a> </td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
||||
<td>Set mix-blend-mode from script.
|
||||
<ul class="assert">
|
||||
<li>Test checks that mix-blend-mode is applied when set from script.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-sibling-with-3d-transform-3.4.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-sibling-with-3D-transform.htm">mix-blend-mode-sibling-with-3d-transform</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-sibling-with-3D-transform-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>blending between an element and its sibling element having 3D transform
|
||||
<ul class="assert">
|
||||
<li>Test checks that an element with mix-blend-mode blends with both parent element and with sibling element having 3D transform</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-sibling-with-3d-transform-and-transition-3.4.1" class="primary dom">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-sibling-with-3D-transform-and-transition.htm">mix-blend-mode-sibling-with-3d-transform-and-transition</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
||||
<td>blending between an element and its sibling having 3D transform and transition
|
||||
<ul class="assert">
|
||||
<li>Test checks that an element having mix-blend-mode blends with an overlapping sibling element having 3D transform and transition</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-simple-3.4.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-simple.htm">mix-blend-mode-simple</a></strong></td>
|
||||
<td><a href="reference/green-square.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>An element with mix-blend-mode blends with its parent element.
|
||||
<ul class="assert">
|
||||
<li>Test checks that an element with mix-blend-mode blends with its parent element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-stacking-context-001-3.4.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-stacking-context-001.htm">mix-blend-mode-stacking-context-001</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-stacking-context-001-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>mix-blend-mode between an element and its child
|
||||
<ul class="assert">
|
||||
<li>Test checks that the element with mix-blend-mode and opacity blends with the parent element</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-stacking-context-creates-isolation-3.4.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-stacking-context-creates-isolation.htm">mix-blend-mode-stacking-context-creates-isolation</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-stacking-context-creates-isolation-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>stacking context creates isolated group
|
||||
<ul class="assert">
|
||||
<li>Test checks that properties that cause the creation of stacking context cause a group to be isolated</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-svg-3.4.1" class="primary svg">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-svg.htm">mix-blend-mode-svg</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-svg-ref.htm">=</a> </td>
|
||||
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
||||
<td>SVG element is blended.
|
||||
<ul class="assert">
|
||||
<li>Test checks that an SVG element blends with the parent container.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-svg-rectangle-3.4.1" class="svg">
|
||||
<td>
|
||||
<a href="mix-blend-mode-svg-rectangle.htm">mix-blend-mode-svg-rectangle</a></td>
|
||||
<td><a href="reference/mix-blend-mode-svg-rectangle-ref.htm">=</a> </td>
|
||||
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
||||
<td>mix-blend-mode for a simple SVG element - rectangle
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-transition-3.4.1" class="primary dom">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-transition.htm">mix-blend-mode-transition</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-transition-ref.htm">=</a> </td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
||||
<td>Blended element with transition
|
||||
<ul class="assert">
|
||||
<li>Test checks that an element having a transition applied on opacity blends with the parent element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-video-3.4.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-video.htm">mix-blend-mode-video</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-video-notref.htm">≠</a> </td>
|
||||
<td></td>
|
||||
<td>Video element with mix-blend-mode.
|
||||
<ul class="assert">
|
||||
<li>Test checks that mix-blend-mode is applied to a video element.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-video-sibling-3.4.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-video-sibling.htm">mix-blend-mode-video-sibling</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-video-sibling-notref.htm">≠</a> </td>
|
||||
<td></td>
|
||||
<td>mix-blend-mode blending between a video element and an overlapping sibling
|
||||
<ul class="assert">
|
||||
<li>Test checks that a video element blends with an overlapping sibling element with some text inside</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-with-transform-and-preserve-3d-3.4.1" class="primary">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-with-transform-and-preserve-3D.htm">mix-blend-mode-with-transform-and-preserve-3d</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-with-transform-and-preserve-3D-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>mix-blend-mode between an element and its child having 3D transform and preserve 3D
|
||||
<ul class="assert">
|
||||
<li>Test checks that mix-blend-mode overrides the behavior of transform-style:preserve-3d</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="text-with-svg-background-3.4.1" class="primary svg">
|
||||
<td><strong>
|
||||
<a href="text-with-svg-background.htm">text-with-svg-background</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
||||
<td>CSS mix-blend-mode API Test
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="text_with_svg_background-3.4.1" class="primary svg">
|
||||
<td><strong>
|
||||
<a href="Text_with_SVG_background.htm">text_with_svg_background</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
||||
<td>Text with SVG background
|
||||
<ul class="assert">
|
||||
<li>Text with SVG background</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s3.4.1.#ltblendmodegt">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.4.1.#propdef-mix-blend-mode">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.4.2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s3.4.2">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#isolation">3.4.2 The isolation property</a></th></tr>
|
||||
<!-- 3 tests -->
|
||||
<tr id="blend-isolation-3.4.2" class="primary">
|
||||
<td><strong>
|
||||
<a href="blend-isolation.htm">blend-isolation</a></strong></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>CSS Compositing and Blending: isolation applied to a group containing blending
|
||||
<ul class="assert">
|
||||
<li>Isolation on a group with blending</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="blend-isolation-3.4.2" class="primary">
|
||||
<td><strong>
|
||||
<a href="blend-isolation.htm">blend-isolation</a></strong></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>CSS Compositing and Blending: isolation applied to a group containing blending
|
||||
<ul class="assert">
|
||||
<li>Isolation on a group with blending</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mix-blend-mode-in-svg-image-3.4.2" class="primary svg">
|
||||
<td><strong>
|
||||
<a href="mix-blend-mode-in-svg-image.htm">mix-blend-mode-in-svg-image</a></strong></td>
|
||||
<td><a href="reference/mix-blend-mode-svg-rectangle-ref.htm">=</a> </td>
|
||||
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
||||
<td>CSS Compositing and Blending: mix-blend-mode in an SVG linked as an image
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s3.4.2.#img_isolation">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.4.2.#isolated-propid">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.4.2.#propdef-background-blend-mode">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.4.2.#propdef-isolation">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
45
tests/wpt/css-tests/compositing-1_dev/html/chapter-4.htm
Normal file
45
tests/wpt/css-tests/compositing-1_dev/html/chapter-4.htm
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Specifying Compositing and Blending in Canvas 2D - Compositing and Blending Level 1 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>Compositing and Blending Level 1 CR Test Suite</h1>
|
||||
<h2>Specifying Compositing and Blending in Canvas 2D (0 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s4">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s4">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#canvascompositingandblending">4 Specifying Compositing and Blending in Canvas 2D</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.#compositemode">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.#propdef-mix">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
51
tests/wpt/css-tests/compositing-1_dev/html/chapter-5.htm
Normal file
51
tests/wpt/css-tests/compositing-1_dev/html/chapter-5.htm
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Introduction to compositing - Compositing and Blending Level 1 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>Compositing and Blending Level 1 CR Test Suite</h1>
|
||||
<h2>Introduction to compositing (0 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s5">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s5">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#whatiscompositing">5 Introduction to compositing</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s5.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s5.1">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#simplealphacompositing">5.1 Simple alpha compositing</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s5.1.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s5.1.1">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#simplealphacompositingexamples">5.1.1 Examples of simple alpha compositing</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
39
tests/wpt/css-tests/compositing-1_dev/html/chapter-6.htm
Normal file
39
tests/wpt/css-tests/compositing-1_dev/html/chapter-6.htm
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>General Formula for Compositing and Blending - Compositing and Blending Level 1 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>Compositing and Blending Level 1 CR Test Suite</h1>
|
||||
<h2>General Formula for Compositing and Blending (0 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s6">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s6">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#generalformula">6 General Formula for Compositing and Blending</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
48
tests/wpt/css-tests/compositing-1_dev/html/chapter-7.htm
Normal file
48
tests/wpt/css-tests/compositing-1_dev/html/chapter-7.htm
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Backdrop calculation - Compositing and Blending Level 1 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>Compositing and Blending Level 1 CR Test Suite</h1>
|
||||
<h2>Backdrop calculation (0 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s7">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s7">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#backdropCalc">7 Backdrop calculation</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.#backdrop">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s7.1">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#backdropexamples">7.1 Examples of backdrop calculation</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
63
tests/wpt/css-tests/compositing-1_dev/html/chapter-8.htm
Normal file
63
tests/wpt/css-tests/compositing-1_dev/html/chapter-8.htm
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Compositing Groups - Compositing and Blending Level 1 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>Compositing and Blending Level 1 CR Test Suite</h1>
|
||||
<h2>Compositing Groups (0 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s8">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s8">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#groups">8 Compositing Groups</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.#groupbackdrop">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.#initialbackdrop">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s8.1">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#groupinvariance">8.1 Group invariance</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s8.2">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#isolatedgroups">8.2 Isolated Groups</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s8.3">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s8.3">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#pagebackdrop">8.3 The Page Group</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
129
tests/wpt/css-tests/compositing-1_dev/html/chapter-9.htm
Normal file
129
tests/wpt/css-tests/compositing-1_dev/html/chapter-9.htm
Normal file
|
|
@ -0,0 +1,129 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Advanced compositing features - Compositing and Blending Level 1 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>Compositing and Blending Level 1 CR Test Suite</h1>
|
||||
<h2>Advanced compositing features (0 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s9">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s9">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#advancedcompositing">9 Advanced compositing features</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s9.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s9.1">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#porterduffcompositingoperators">9.1 The Porter Duff Compositing Operators</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s9.1.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s9.1.1">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_clear">9.1.1 Clear</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s9.1.2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s9.1.2">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_src">9.1.2 Copy</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s9.1.3">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s9.1.3">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_dst">9.1.3 Destination</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s9.1.4">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s9.1.4">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_srcover">9.1.4 Source Over</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s9.1.5">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s9.1.5">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_dstover">9.1.5 Destination Over</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s9.1.6">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s9.1.6">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_srcin">9.1.6 Source In</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s9.1.7">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s9.1.7">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_dstin">9.1.7 Destination In</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s9.1.8">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s9.1.8">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_srcout">9.1.8 Source Out</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s9.1.9">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s9.1.9">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_dstout">9.1.9 Destination Out</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s9.1.10">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s9.1.10">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_srcatop">9.1.10 Source Atop</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s9.1.11">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s9.1.11">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_dstatop">9.1.11 Destination Atop</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s9.1.12">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s9.1.12">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_xor">9.1.12 XOR</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s9.1.13">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s9.1.13">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_plus">9.1.13 Lighter</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s9.2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s9.2">+</a>
|
||||
<a href="http://www.w3.org/TR/compositing-1/#groupcompositing">9.2 Group compositing behavior with Porter Duff modes</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS mix-blend-mode API Test</title>
|
||||
<link href="mailto:yangdemo@gmail.com" rel="author" title="dmyang">
|
||||
<link href="mailto:cabanier@adobe.com" rel="reviewer" title="Rik Cabanier"><!-- 11-09-2013 @TestTWF Shenzhen -->
|
||||
<link href="http://www.w3.org/TR/compositing-1/#mix-blend-mode" rel="help">
|
||||
<meta content="svg" name="flags">
|
||||
<style type="text/css">
|
||||
.svg {
|
||||
background-color: #888;
|
||||
width: 500px;
|
||||
display: block;
|
||||
height: 60px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
.svg text {
|
||||
font-size: 25px;
|
||||
line-height: 50px;
|
||||
}
|
||||
.multiply {mix-blend-mode: multiply;}
|
||||
.screen {mix-blend-mode: screen;}
|
||||
.overlay {mix-blend-mode: overlay;}
|
||||
.darken {mix-blend-mode: darken;}
|
||||
.color-dodge {mix-blend-mode: color-dodge;}
|
||||
.color-burn {mix-blend-mode: color-burn;}
|
||||
.hard-light {mix-blend-mode: hard-light;}
|
||||
.soft-light {mix-blend-mode: soft-light;}
|
||||
.difference {mix-blend-mode: difference;}
|
||||
.exclusion {mix-blend-mode: exclusion;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg class="svg">
|
||||
<line x2="300" style="stroke:blue; stroke-width:20;" y2="30" y1="30" x1="10" class="multiply"></line>
|
||||
</svg>
|
||||
<svg class="svg">
|
||||
<line x2="300" style="stroke:blue; stroke-width:20;" y2="30" y1="30" x1="10" class="screen"></line>
|
||||
</svg>
|
||||
<svg class="svg">
|
||||
<line x2="300" style="stroke:blue; stroke-width:20;" y2="30" y1="30" x1="10" class="overlay"></line>
|
||||
</svg>
|
||||
<svg class="svg">
|
||||
<line x2="300" style="stroke:blue; stroke-width:20;" y2="30" y1="30" x1="10" class="darken"></line>
|
||||
</svg>
|
||||
<svg class="svg">
|
||||
<line x2="300" style="stroke:blue; stroke-width:20;" y2="30" y1="30" x1="10" class="lighten"></line>
|
||||
</svg>
|
||||
<svg class="svg">
|
||||
<line x2="300" style="stroke:blue; stroke-width:20;" y2="30" y1="30" x1="10" class="color-dodge"></line>
|
||||
</svg>
|
||||
<svg class="svg">
|
||||
<line x2="300" style="stroke:blue; stroke-width:20;" y2="30" y1="30" x1="10" class="hard-light"></line>
|
||||
</svg>
|
||||
<svg class="svg">
|
||||
<line x2="300" style="stroke:blue; stroke-width:20;" y2="30" y1="30" x1="10" class="soft-light"></line>
|
||||
</svg>
|
||||
<svg class="svg">
|
||||
<line x2="300" style="stroke:blue; stroke-width:20;" y2="30" y1="30" x1="10" class="difference"></line>
|
||||
</svg>
|
||||
<svg class="svg">
|
||||
<line x2="300" style="stroke:blue; stroke-width:20;" y2="30" y1="30" x1="10" class="exclusion"></line>
|
||||
</svg>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!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.
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