Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-06-24 00:54:32 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update CSS tests to revision 7d0ff6117ee51720c307ea24d413d13eb5abf3e6

Browse source
This commit is contained in:
Ms2ger 2016-03-01 16:08:43 +01:00
parent 40c52d55e2
commit 349c75536d
7391 changed files with 304135 additions and 153491 deletions
Download patch file Download diff file Expand all files Collapse all files

32
tests/wpt/css-tests/compositing-1_dev/html/background-blend-mode-gradient-image.htm Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Test: blending between multiple backgrounds (gradient and image) using background-blend-mode</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="https://drafts.fxtf.org/compositing-1/#background-blend-mode" rel="help">
<meta content="" name="flags">
<meta content="Test checks that setting background-blend-mode property for an element with two background layers (a gradient and a png image) results in blending between the two layers." name="assert">
<link href="reference/background-blend-mode-gradient-image-ref.htm" rel="match">
<style>
div {
margin: 5px;
width: 130px;
height: 130px;
background: url('support/red.png') no-repeat 0 0 /100% 100%, linear-gradient(to right, lime 50%, blue 51%);
/*lime: rgb(0,255,0);
blue: rgb(0,0,255);*/
display: block;
float: left;
background-blend-mode: multiply, normal;
}
</style>
</head>
<body>
<p>Test passes if there is no red square on the screen. <br>
You should see a black square.</p>
<div></div>
</body></html>

1
tests/wpt/css-tests/compositing-1_dev/html/blend-isolation.htm
View file

@ -1,7 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html><head> <html><head>
<title>CSS Compositing and Blending: isolation applied to a group containing blending</title> <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="mailto:cabanier@adobe.com" rel="author" title="cabanier">
<link href="http://www.w3.org/TR/compositing-1/#isolation" rel="help"> <link href="http://www.w3.org/TR/compositing-1/#isolation" rel="help">
<meta content="Isolation on a group with blending" name="assert"> <meta content="Isolation on a group with blending" name="assert">

2
tests/wpt/css-tests/compositing-1_dev/html/chapter-1.htm
View file

@ -30,7 +30,7 @@
<tbody id="s1"> <tbody id="s1">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s1">+</a> <a href="#s1">+</a>
<a href="http://www.w3.org/TR/compositing-1/#introduction">1 Introduction</a></th></tr> <a href="https://www.w3.org/TR/compositing-1/#introduction">1 Introduction</a></th></tr>
<!-- 0 tests --> <!-- 0 tests -->
</tbody> </tbody>
</table> </table>

40
tests/wpt/css-tests/compositing-1_dev/html/chapter-10.htm
View file

@ -30,19 +30,19 @@
<tbody id="s10"> <tbody id="s10">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s10">+</a> <a href="#s10">+</a>
<a href="http://www.w3.org/TR/compositing-1/#blending">10 Blending</a></th></tr> <a href="https://www.w3.org/TR/compositing-1/#blending">10 Blending</a></th></tr>
<!-- 0 tests --> <!-- 0 tests -->
</tbody> </tbody>
<tbody id="s10.1"> <tbody id="s10.1">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s10.1">+</a> <a href="#s10.1">+</a>
<a href="http://www.w3.org/TR/compositing-1/#blendingseparable">10.1 Separable blend modes</a></th></tr> <a href="https://www.w3.org/TR/compositing-1/#blendingseparable">10.1 Separable blend modes</a></th></tr>
<!-- 0 tests --> <!-- 0 tests -->
</tbody> </tbody>
<tbody id="s10.1.1"> <tbody id="s10.1.1">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s10.1.1">+</a> <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> <a href="https://www.w3.org/TR/compositing-1/#blendingnormal">10.1.1 normal blend mode</a></th></tr>
<!-- 0 tests --> <!-- 0 tests -->
</tbody> </tbody>
<tbody id="s10.1.1.#valdef-blend-mode-normal"> <tbody id="s10.1.1.#valdef-blend-mode-normal">
@ -51,7 +51,7 @@
<tbody id="s10.1.2"> <tbody id="s10.1.2">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s10.1.2">+</a> <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> <a href="https://www.w3.org/TR/compositing-1/#blendingmultiply">10.1.2 multiply blend mode</a></th></tr>
<!-- 0 tests --> <!-- 0 tests -->
</tbody> </tbody>
<tbody id="s10.1.2.#valdef-blend-mode-multiply"> <tbody id="s10.1.2.#valdef-blend-mode-multiply">
@ -60,7 +60,7 @@
<tbody id="s10.1.3"> <tbody id="s10.1.3">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s10.1.3">+</a> <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> <a href="https://www.w3.org/TR/compositing-1/#blendingscreen">10.1.3 screen blend mode</a></th></tr>
<!-- 0 tests --> <!-- 0 tests -->
</tbody> </tbody>
<tbody id="s10.1.3.#valdef-blend-mode-screen"> <tbody id="s10.1.3.#valdef-blend-mode-screen">
@ -69,7 +69,7 @@
<tbody id="s10.1.4"> <tbody id="s10.1.4">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s10.1.4">+</a> <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> <a href="https://www.w3.org/TR/compositing-1/#blendingoverlay">10.1.4 overlay blend mode</a></th></tr>
<!-- 0 tests --> <!-- 0 tests -->
</tbody> </tbody>
<tbody id="s10.1.4.#valdef-blend-mode-overlay"> <tbody id="s10.1.4.#valdef-blend-mode-overlay">
@ -78,7 +78,7 @@
<tbody id="s10.1.5"> <tbody id="s10.1.5">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s10.1.5">+</a> <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> <a href="https://www.w3.org/TR/compositing-1/#blendingdarken">10.1.5 darken blend mode</a></th></tr>
<!-- 0 tests --> <!-- 0 tests -->
</tbody> </tbody>
<tbody id="s10.1.5.#valdef-blend-mode-darken"> <tbody id="s10.1.5.#valdef-blend-mode-darken">
@ -87,7 +87,7 @@
<tbody id="s10.1.6"> <tbody id="s10.1.6">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s10.1.6">+</a> <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> <a href="https://www.w3.org/TR/compositing-1/#blendinglighten">10.1.6 lighten blend mode</a></th></tr>
<!-- 0 tests --> <!-- 0 tests -->
</tbody> </tbody>
<tbody id="s10.1.6.#valdef-blend-mode-lighten"> <tbody id="s10.1.6.#valdef-blend-mode-lighten">
@ -96,7 +96,7 @@
<tbody id="s10.1.7"> <tbody id="s10.1.7">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s10.1.7">+</a> <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> <a href="https://www.w3.org/TR/compositing-1/#blendingcolordodge">10.1.7 color-dodge blend mode</a></th></tr>
<!-- 0 tests --> <!-- 0 tests -->
</tbody> </tbody>
<tbody id="s10.1.7.#valdef-blend-mode-color-dodge"> <tbody id="s10.1.7.#valdef-blend-mode-color-dodge">
@ -105,7 +105,7 @@
<tbody id="s10.1.8"> <tbody id="s10.1.8">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s10.1.8">+</a> <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> <a href="https://www.w3.org/TR/compositing-1/#blendingcolorburn">10.1.8 color-burn blend mode</a></th></tr>
<!-- 0 tests --> <!-- 0 tests -->
</tbody> </tbody>
<tbody id="s10.1.8.#valdef-blend-mode-color-burn"> <tbody id="s10.1.8.#valdef-blend-mode-color-burn">
@ -114,7 +114,7 @@
<tbody id="s10.1.9"> <tbody id="s10.1.9">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s10.1.9">+</a> <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> <a href="https://www.w3.org/TR/compositing-1/#blendinghardlight">10.1.9 hard-light blend mode</a></th></tr>
<!-- 0 tests --> <!-- 0 tests -->
</tbody> </tbody>
<tbody id="s10.1.9.#valdef-blend-mode-hard-light"> <tbody id="s10.1.9.#valdef-blend-mode-hard-light">
@ -123,7 +123,7 @@
<tbody id="s10.1.10"> <tbody id="s10.1.10">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s10.1.10">+</a> <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> <a href="https://www.w3.org/TR/compositing-1/#blendingsoftlight">10.1.10 soft-light blend mode</a></th></tr>
<!-- 0 tests --> <!-- 0 tests -->
</tbody> </tbody>
<tbody id="s10.1.10.#valdef-blend-mode-soft-light"> <tbody id="s10.1.10.#valdef-blend-mode-soft-light">
@ -132,7 +132,7 @@
<tbody id="s10.1.11"> <tbody id="s10.1.11">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s10.1.11">+</a> <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> <a href="https://www.w3.org/TR/compositing-1/#blendingdifference">10.1.11 difference blend mode</a></th></tr>
<!-- 0 tests --> <!-- 0 tests -->
</tbody> </tbody>
<tbody id="s10.1.11.#valdef-blend-mode-difference"> <tbody id="s10.1.11.#valdef-blend-mode-difference">
@ -141,7 +141,7 @@
<tbody id="s10.1.12"> <tbody id="s10.1.12">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s10.1.12">+</a> <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> <a href="https://www.w3.org/TR/compositing-1/#blendingexclusion">10.1.12 exclusion blend mode</a></th></tr>
<!-- 0 tests --> <!-- 0 tests -->
</tbody> </tbody>
<tbody id="s10.1.12.#valdef-blend-mode-exclusion"> <tbody id="s10.1.12.#valdef-blend-mode-exclusion">
@ -150,13 +150,13 @@
<tbody id="s10.2"> <tbody id="s10.2">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s10.2">+</a> <a href="#s10.2">+</a>
<a href="http://www.w3.org/TR/compositing-1/#blendingnonseparable">10.2 Non-separable blend modes</a></th></tr> <a href="https://www.w3.org/TR/compositing-1/#blendingnonseparable">10.2 Non-separable blend modes</a></th></tr>
<!-- 0 tests --> <!-- 0 tests -->
</tbody> </tbody>
<tbody id="s10.2.1"> <tbody id="s10.2.1">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s10.2.1">+</a> <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> <a href="https://www.w3.org/TR/compositing-1/#blendinghue">10.2.1 hue blend mode</a></th></tr>
<!-- 0 tests --> <!-- 0 tests -->
</tbody> </tbody>
<tbody id="s10.2.1.#valdef-blend-mode-hue"> <tbody id="s10.2.1.#valdef-blend-mode-hue">
@ -165,7 +165,7 @@
<tbody id="s10.2.2"> <tbody id="s10.2.2">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s10.2.2">+</a> <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> <a href="https://www.w3.org/TR/compositing-1/#blendingsaturation">10.2.2 saturation blend mode</a></th></tr>
<!-- 0 tests --> <!-- 0 tests -->
</tbody> </tbody>
<tbody id="s10.2.2.#valdef-blend-mode-saturation"> <tbody id="s10.2.2.#valdef-blend-mode-saturation">
@ -174,7 +174,7 @@
<tbody id="s10.2.3"> <tbody id="s10.2.3">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s10.2.3">+</a> <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> <a href="https://www.w3.org/TR/compositing-1/#blendingcolor">10.2.3 color blend mode</a></th></tr>
<!-- 0 tests --> <!-- 0 tests -->
</tbody> </tbody>
<tbody id="s10.2.3.#valdef-blend-mode-color"> <tbody id="s10.2.3.#valdef-blend-mode-color">
@ -183,7 +183,7 @@
<tbody id="s10.2.4"> <tbody id="s10.2.4">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s10.2.4">+</a> <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> <a href="https://www.w3.org/TR/compositing-1/#blendingluminosity">10.2.4 luminosity blend mode</a></th></tr>
<!-- 0 tests --> <!-- 0 tests -->
</tbody> </tbody>
<tbody id="s10.2.4.#valdef-blend-mode-luminosity"> <tbody id="s10.2.4.#valdef-blend-mode-luminosity">
@ -192,7 +192,7 @@
<tbody id="s10.3"> <tbody id="s10.3">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s10.3">+</a> <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> <a href="https://www.w3.org/TR/compositing-1/#isolationblending">10.3 Effect of group isolation on blending</a></th></tr>
<!-- 0 tests --> <!-- 0 tests -->
</tbody> </tbody>
</table> </table>

2
tests/wpt/css-tests/compositing-1_dev/html/chapter-11.htm
View file

@ -30,7 +30,7 @@
<tbody id="s11"> <tbody id="s11">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s11">+</a> <a href="#s11">+</a>
<a href="http://www.w3.org/TR/compositing-1/#security">11 Security issues with compositing and blending</a></th></tr> <a href="https://www.w3.org/TR/compositing-1/#security">11 Security issues with compositing and blending</a></th></tr>
<!-- 0 tests --> <!-- 0 tests -->
</tbody> </tbody>
</table> </table>

2
tests/wpt/css-tests/compositing-1_dev/html/chapter-12.htm
View file

@ -30,7 +30,7 @@
<tbody id="s12"> <tbody id="s12">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s12">+</a> <a href="#s12">+</a>
<a href="http://www.w3.org/TR/compositing-1/#changes">12 Changes</a></th></tr> <a href="https://www.w3.org/TR/compositing-1/#changes">12 Changes</a></th></tr>
<!-- 0 tests --> <!-- 0 tests -->
</tbody> </tbody>
<tbody id="s.#abstract"> <tbody id="s.#abstract">

6
tests/wpt/css-tests/compositing-1_dev/html/chapter-2.htm
View file

@ -30,19 +30,19 @@
<tbody id="s2"> <tbody id="s2">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s2">+</a> <a href="#s2">+</a>
<a href="http://www.w3.org/TR/compositing-1/#reading-this-document">2 Reading This Document</a></th></tr> <a href="https://www.w3.org/TR/compositing-1/#reading-this-document">2 Reading This Document</a></th></tr>
<!-- 0 tests --> <!-- 0 tests -->
</tbody> </tbody>
<tbody id="s2.1"> <tbody id="s2.1">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s2.1">+</a> <a href="#s2.1">+</a>
<a href="http://www.w3.org/TR/compositing-1/#module-interactions">2.1 Module interactions</a></th></tr> <a href="https://www.w3.org/TR/compositing-1/#module-interactions">2.1 Module interactions</a></th></tr>
<!-- 0 tests --> <!-- 0 tests -->
</tbody> </tbody>
<tbody id="s2.2"> <tbody id="s2.2">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s2.2">+</a> <a href="#s2.2">+</a>
<a href="http://www.w3.org/TR/compositing-1/#values">2.2 Values</a></th></tr> <a href="https://www.w3.org/TR/compositing-1/#values">2.2 Values</a></th></tr>
<!-- 0 tests --> <!-- 0 tests -->
</tbody> </tbody>
</table> </table>

552
tests/wpt/css-tests/compositing-1_dev/html/chapter-3.htm
View file

@ -13,7 +13,7 @@
<body> <body>
<h1>Compositing and Blending Level 1 CR Test Suite</h1> <h1>Compositing and Blending Level 1 CR Test Suite</h1>
<h2>Specifying Blending in CSS (8 tests)</h2> <h2>Specifying Blending in CSS (52 tests)</h2>
<table width="100%"> <table width="100%">
<col id="test-column"> <col id="test-column">
<col id="refs-column"> <col id="refs-column">
@ -30,41 +30,57 @@
<tbody id="s3"> <tbody id="s3">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s3">+</a> <a href="#s3">+</a>
<a href="http://www.w3.org/TR/compositing-1/#csscompositingandblending">3 Specifying Blending in CSS</a></th></tr> <a href="https://www.w3.org/TR/compositing-1/#csscompositingandblending">3 Specifying Blending in CSS</a></th></tr>
<!-- 0 tests --> <!-- 0 tests -->
</tbody> </tbody>
<tbody id="s3.1"> <tbody id="s3.1">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s3.1">+</a> <a href="#s3.1">+</a>
<a href="http://www.w3.org/TR/compositing-1/#compositingandblendingorder">3.1 Order of graphical operations</a></th></tr> <a href="https://www.w3.org/TR/compositing-1/#compositingandblendingorder">3.1 Order of graphical operations</a></th></tr>
<!-- 0 tests --> <!-- 0 tests -->
</tbody> </tbody>
<tbody id="s3.2"> <tbody id="s3.2">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s3.2">+</a> <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> <a href="https://www.w3.org/TR/compositing-1/#csscompositingrules_CSS">3.2 Behavior specific to HTML</a></th></tr>
<!-- 0 tests --> <!-- 0 tests -->
</tbody> </tbody>
<tbody id="s3.3"> <tbody id="s3.3">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s3.3">+</a> <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> <a href="https://www.w3.org/TR/compositing-1/#csscompositingrules_SVG">3.3 Behavior specific to SVG</a></th></tr>
<!-- 0 tests --> <!-- 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>
<tbody id="s3.4"> <tbody id="s3.4">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s3.4">+</a> <a href="#s3.4">+</a>
<a href="http://www.w3.org/TR/compositing-1/#csskeywords">3.4 CSS Properties</a></th></tr> <a href="https://www.w3.org/TR/compositing-1/#csskeywords">3.4 CSS Properties</a></th></tr>
<!-- 0 tests --> <!-- 0 tests -->
</tbody> </tbody>
<tbody id="s3.4.1"> <tbody id="s3.4.1">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s3.4.1">+</a> <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> <a href="https://www.w3.org/TR/compositing-1/#mix-blend-mode">3.4.1 The mix-blend-mode property</a></th></tr>
<!-- 6 tests --> <!-- 50 tests -->
<tr id="blending_in_a_group_with_filter-3.4.1" class="primary svg"> <tr id="blending_in_a_group_with_filter-3.4.1" class="svg">
<td><strong> <td>
<a href="Blending_in_a_group_with_filter.htm">blending_in_a_group_with_filter</a></strong></td> <a href="Blending_in_a_group_with_filter.htm">blending_in_a_group_with_filter</a></td>
<td></td> <td></td>
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td> <td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
<td>Blending in a group with filter <td>Blending in a group with filter
@ -73,9 +89,9 @@
</ul> </ul>
</td> </td>
</tr> </tr>
<tr id="blending_in_a_group_with_opacity-3.4.1" class="primary svg"> <tr id="blending_in_a_group_with_opacity-3.4.1" class="svg">
<td><strong> <td>
<a href="Blending_in_a_group_with_opacity.htm">blending_in_a_group_with_opacity</a></strong></td> <a href="Blending_in_a_group_with_opacity.htm">blending_in_a_group_with_opacity</a></td>
<td></td> <td></td>
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td> <td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
<td>Blending in a group with opacity <td>Blending in a group with opacity
@ -84,25 +100,503 @@
</ul> </ul>
</td> </td>
</tr> </tr>
<tr id="line-with-svg-background-3.4.1" class="primary svg"> <tr id="line-with-svg-background-3.4.1" class="svg">
<td><strong> <td>
<a href="line-with-svg-background.htm">line-with-svg-background</a></strong></td> <a href="line-with-svg-background.htm">line-with-svg-background</a></td>
<td></td> <td></td>
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td> <td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
<td>CSS mix-blend-mode API Test <td>CSS mix-blend-mode API Test
</td> </td>
</tr> </tr>
<tr id="text-with-svg-background-3.4.1" class="primary svg"> <tr id="mix-blend-mode-animation-3.4.1" class="primary">
<td><strong> <td><strong>
<a href="text-with-svg-background.htm">text-with-svg-background</a></strong></td> <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">&#x2260;</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">&#x2260;</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">&#x2260;</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="svg">
<td>
<a href="text-with-svg-background.htm">text-with-svg-background</a></td>
<td></td> <td></td>
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td> <td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
<td>CSS mix-blend-mode API Test <td>CSS mix-blend-mode API Test
</td> </td>
</tr> </tr>
<tr id="text_with_svg_background-3.4.1" class="primary svg"> <tr id="text_with_svg_background-3.4.1" class="svg">
<td><strong> <td>
<a href="Text_with_SVG_background.htm">text_with_svg_background</a></strong></td> <a href="Text_with_SVG_background.htm">text_with_svg_background</a></td>
<td></td> <td></td>
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td> <td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
<td>Text with SVG background <td>Text with SVG background
@ -132,8 +626,8 @@
<tbody id="s3.4.2"> <tbody id="s3.4.2">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s3.4.2">+</a> <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> <a href="https://www.w3.org/TR/compositing-1/#isolation">3.4.2 The isolation property</a></th></tr>
<!-- 2 tests --> <!-- 3 tests -->
<tr id="blend-isolation-3.4.2" class=""> <tr id="blend-isolation-3.4.2" class="">
<td> <td>
<a href="blend-isolation.htm">blend-isolation</a></td> <a href="blend-isolation.htm">blend-isolation</a></td>
@ -145,6 +639,14 @@
</ul> </ul>
</td> </td>
</tr> </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>
<tr id="will-change-stacking-context-isolation-1-3.4.2" class=""> <tr id="will-change-stacking-context-isolation-1-3.4.2" class="">
<td> <td>
<a href="will-change-stacking-context-isolation-1.htm">will-change-stacking-context-isolation-1</a></td> <a href="will-change-stacking-context-isolation-1.htm">will-change-stacking-context-isolation-1</a></td>

2
tests/wpt/css-tests/compositing-1_dev/html/chapter-4.htm
View file

@ -30,7 +30,7 @@
<tbody id="s4"> <tbody id="s4">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s4">+</a> <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> <a href="https://www.w3.org/TR/compositing-1/#canvascompositingandblending">4 Specifying Compositing and Blending in Canvas 2D</a></th></tr>
<!-- 0 tests --> <!-- 0 tests -->
</tbody> </tbody>
<tbody id="s4.#compositemode"> <tbody id="s4.#compositemode">

6
tests/wpt/css-tests/compositing-1_dev/html/chapter-5.htm
View file

@ -30,19 +30,19 @@
<tbody id="s5"> <tbody id="s5">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s5">+</a> <a href="#s5">+</a>
<a href="http://www.w3.org/TR/compositing-1/#whatiscompositing">5 Introduction to compositing</a></th></tr> <a href="https://www.w3.org/TR/compositing-1/#whatiscompositing">5 Introduction to compositing</a></th></tr>
<!-- 0 tests --> <!-- 0 tests -->
</tbody> </tbody>
<tbody id="s5.1"> <tbody id="s5.1">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s5.1">+</a> <a href="#s5.1">+</a>
<a href="http://www.w3.org/TR/compositing-1/#simplealphacompositing">5.1 Simple alpha compositing</a></th></tr> <a href="https://www.w3.org/TR/compositing-1/#simplealphacompositing">5.1 Simple alpha compositing</a></th></tr>
<!-- 0 tests --> <!-- 0 tests -->
</tbody> </tbody>
<tbody id="s5.1.1"> <tbody id="s5.1.1">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s5.1.1">+</a> <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> <a href="https://www.w3.org/TR/compositing-1/#simplealphacompositingexamples">5.1.1 Examples of simple alpha compositing</a></th></tr>
<!-- 0 tests --> <!-- 0 tests -->
</tbody> </tbody>
</table> </table>

2
tests/wpt/css-tests/compositing-1_dev/html/chapter-6.htm
View file

@ -30,7 +30,7 @@
<tbody id="s6"> <tbody id="s6">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s6">+</a> <a href="#s6">+</a>
<a href="http://www.w3.org/TR/compositing-1/#generalformula">6 General Formula for Compositing and Blending</a></th></tr> <a href="https://www.w3.org/TR/compositing-1/#generalformula">6 General Formula for Compositing and Blending</a></th></tr>
<!-- 0 tests --> <!-- 0 tests -->
</tbody> </tbody>
</table> </table>

4
tests/wpt/css-tests/compositing-1_dev/html/chapter-7.htm
View file

@ -30,7 +30,7 @@
<tbody id="s7"> <tbody id="s7">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s7">+</a> <a href="#s7">+</a>
<a href="http://www.w3.org/TR/compositing-1/#backdropCalc">7 Backdrop calculation</a></th></tr> <a href="https://www.w3.org/TR/compositing-1/#backdropCalc">7 Backdrop calculation</a></th></tr>
<!-- 0 tests --> <!-- 0 tests -->
</tbody> </tbody>
<tbody id="s7.#backdrop"> <tbody id="s7.#backdrop">
@ -39,7 +39,7 @@
<tbody id="s7.1"> <tbody id="s7.1">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s7.1">+</a> <a href="#s7.1">+</a>
<a href="http://www.w3.org/TR/compositing-1/#backdropexamples">7.1 Examples of backdrop calculation</a></th></tr> <a href="https://www.w3.org/TR/compositing-1/#backdropexamples">7.1 Examples of backdrop calculation</a></th></tr>
<!-- 0 tests --> <!-- 0 tests -->
</tbody> </tbody>
</table> </table>

8
tests/wpt/css-tests/compositing-1_dev/html/chapter-8.htm
View file

@ -30,7 +30,7 @@
<tbody id="s8"> <tbody id="s8">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s8">+</a> <a href="#s8">+</a>
<a href="http://www.w3.org/TR/compositing-1/#groups">8 Compositing Groups</a></th></tr> <a href="https://www.w3.org/TR/compositing-1/#groups">8 Compositing Groups</a></th></tr>
<!-- 0 tests --> <!-- 0 tests -->
</tbody> </tbody>
<tbody id="s8.#groupbackdrop"> <tbody id="s8.#groupbackdrop">
@ -42,19 +42,19 @@
<tbody id="s8.1"> <tbody id="s8.1">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s8.1">+</a> <a href="#s8.1">+</a>
<a href="http://www.w3.org/TR/compositing-1/#groupinvariance">8.1 Group invariance</a></th></tr> <a href="https://www.w3.org/TR/compositing-1/#groupinvariance">8.1 Group invariance</a></th></tr>
<!-- 0 tests --> <!-- 0 tests -->
</tbody> </tbody>
<tbody id="s8.2"> <tbody id="s8.2">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s8.2">+</a> <a href="#s8.2">+</a>
<a href="http://www.w3.org/TR/compositing-1/#isolatedgroups">8.2 Isolated Groups</a></th></tr> <a href="https://www.w3.org/TR/compositing-1/#isolatedgroups">8.2 Isolated Groups</a></th></tr>
<!-- 0 tests --> <!-- 0 tests -->
</tbody> </tbody>
<tbody id="s8.3"> <tbody id="s8.3">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s8.3">+</a> <a href="#s8.3">+</a>
<a href="http://www.w3.org/TR/compositing-1/#pagebackdrop">8.3 The Page Group</a></th></tr> <a href="https://www.w3.org/TR/compositing-1/#pagebackdrop">8.3 The Page Group</a></th></tr>
<!-- 0 tests --> <!-- 0 tests -->
</tbody> </tbody>
</table> </table>

32
tests/wpt/css-tests/compositing-1_dev/html/chapter-9.htm
View file

@ -30,97 +30,97 @@
<tbody id="s9"> <tbody id="s9">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s9">+</a> <a href="#s9">+</a>
<a href="http://www.w3.org/TR/compositing-1/#advancedcompositing">9 Advanced compositing features</a></th></tr> <a href="https://www.w3.org/TR/compositing-1/#advancedcompositing">9 Advanced compositing features</a></th></tr>
<!-- 0 tests --> <!-- 0 tests -->
</tbody> </tbody>
<tbody id="s9.1"> <tbody id="s9.1">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s9.1">+</a> <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> <a href="https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators">9.1 The Porter Duff Compositing Operators</a></th></tr>
<!-- 0 tests --> <!-- 0 tests -->
</tbody> </tbody>
<tbody id="s9.1.1"> <tbody id="s9.1.1">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s9.1.1">+</a> <a href="#s9.1.1">+</a>
<a href="http://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_clear">9.1.1 Clear</a></th></tr> <a href="https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_clear">9.1.1 Clear</a></th></tr>
<!-- 0 tests --> <!-- 0 tests -->
</tbody> </tbody>
<tbody id="s9.1.2"> <tbody id="s9.1.2">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s9.1.2">+</a> <a href="#s9.1.2">+</a>
<a href="http://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_src">9.1.2 Copy</a></th></tr> <a href="https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_src">9.1.2 Copy</a></th></tr>
<!-- 0 tests --> <!-- 0 tests -->
</tbody> </tbody>
<tbody id="s9.1.3"> <tbody id="s9.1.3">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s9.1.3">+</a> <a href="#s9.1.3">+</a>
<a href="http://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_dst">9.1.3 Destination</a></th></tr> <a href="https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_dst">9.1.3 Destination</a></th></tr>
<!-- 0 tests --> <!-- 0 tests -->
</tbody> </tbody>
<tbody id="s9.1.4"> <tbody id="s9.1.4">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s9.1.4">+</a> <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> <a href="https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_srcover">9.1.4 Source Over</a></th></tr>
<!-- 0 tests --> <!-- 0 tests -->
</tbody> </tbody>
<tbody id="s9.1.5"> <tbody id="s9.1.5">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s9.1.5">+</a> <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> <a href="https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_dstover">9.1.5 Destination Over</a></th></tr>
<!-- 0 tests --> <!-- 0 tests -->
</tbody> </tbody>
<tbody id="s9.1.6"> <tbody id="s9.1.6">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s9.1.6">+</a> <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> <a href="https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_srcin">9.1.6 Source In</a></th></tr>
<!-- 0 tests --> <!-- 0 tests -->
</tbody> </tbody>
<tbody id="s9.1.7"> <tbody id="s9.1.7">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s9.1.7">+</a> <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> <a href="https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_dstin">9.1.7 Destination In</a></th></tr>
<!-- 0 tests --> <!-- 0 tests -->
</tbody> </tbody>
<tbody id="s9.1.8"> <tbody id="s9.1.8">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s9.1.8">+</a> <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> <a href="https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_srcout">9.1.8 Source Out</a></th></tr>
<!-- 0 tests --> <!-- 0 tests -->
</tbody> </tbody>
<tbody id="s9.1.9"> <tbody id="s9.1.9">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s9.1.9">+</a> <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> <a href="https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_dstout">9.1.9 Destination Out</a></th></tr>
<!-- 0 tests --> <!-- 0 tests -->
</tbody> </tbody>
<tbody id="s9.1.10"> <tbody id="s9.1.10">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s9.1.10">+</a> <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> <a href="https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_srcatop">9.1.10 Source Atop</a></th></tr>
<!-- 0 tests --> <!-- 0 tests -->
</tbody> </tbody>
<tbody id="s9.1.11"> <tbody id="s9.1.11">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s9.1.11">+</a> <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> <a href="https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_dstatop">9.1.11 Destination Atop</a></th></tr>
<!-- 0 tests --> <!-- 0 tests -->
</tbody> </tbody>
<tbody id="s9.1.12"> <tbody id="s9.1.12">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s9.1.12">+</a> <a href="#s9.1.12">+</a>
<a href="http://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_xor">9.1.12 XOR</a></th></tr> <a href="https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_xor">9.1.12 XOR</a></th></tr>
<!-- 0 tests --> <!-- 0 tests -->
</tbody> </tbody>
<tbody id="s9.1.13"> <tbody id="s9.1.13">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s9.1.13">+</a> <a href="#s9.1.13">+</a>
<a href="http://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_plus">9.1.13 Lighter</a></th></tr> <a href="https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_plus">9.1.13 Lighter</a></th></tr>
<!-- 0 tests --> <!-- 0 tests -->
</tbody> </tbody>
<tbody id="s9.2"> <tbody id="s9.2">
<tr><th colspan="4" scope="rowgroup"> <tr><th colspan="4" scope="rowgroup">
<a href="#s9.2">+</a> <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> <a href="https://www.w3.org/TR/compositing-1/#groupcompositing">9.2 Group compositing behavior with Porter Duff modes</a></th></tr>
<!-- 0 tests --> <!-- 0 tests -->
</tbody> </tbody>
</table> </table>

35
tests/wpt/css-tests/compositing-1_dev/html/mix-blend-mode-animation.htm Normal file
View file

@ -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="https://drafts.fxtf.org/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>

38
tests/wpt/css-tests/compositing-1_dev/html/mix-blend-mode-blended-element-interposed.htm Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<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="https://drafts.fxtf.org/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>

43
tests/wpt/css-tests/compositing-1_dev/html/mix-blend-mode-blended-element-overflow-hidden-and-border-radius.htm Normal file
View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<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="https://drafts.fxtf.org/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>

43
tests/wpt/css-tests/compositing-1_dev/html/mix-blend-mode-blended-element-overflow-scroll.htm Normal file
View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<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="https://drafts.fxtf.org/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>

48
tests/wpt/css-tests/compositing-1_dev/html/mix-blend-mode-blended-element-with-transparent-pixels.htm Normal file
View file

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<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="https://drafts.fxtf.org/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>

41
tests/wpt/css-tests/compositing-1_dev/html/mix-blend-mode-blended-with-3D-transform.htm Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<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="https://drafts.fxtf.org/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>

37
tests/wpt/css-tests/compositing-1_dev/html/mix-blend-mode-blended-with-transform-and-perspective.htm Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<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="https://drafts.fxtf.org/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>

40
tests/wpt/css-tests/compositing-1_dev/html/mix-blend-mode-blending-with-sibling.htm Normal file
View file

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<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="https://drafts.fxtf.org/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>

36
tests/wpt/css-tests/compositing-1_dev/html/mix-blend-mode-border-image.htm Normal file
View file

@ -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="https://drafts.fxtf.org/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>

40
tests/wpt/css-tests/compositing-1_dev/html/mix-blend-mode-both-parent-and-blended-with-3D-transform.htm Normal file
View file

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<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="https://drafts.fxtf.org/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>

26
tests/wpt/css-tests/compositing-1_dev/html/mix-blend-mode-canvas-parent.htm Normal file
View file

@ -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="https://drafts.fxtf.org/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>

26
tests/wpt/css-tests/compositing-1_dev/html/mix-blend-mode-canvas-sibling.htm Normal file
View file

@ -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="https://drafts.fxtf.org/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>

30
tests/wpt/css-tests/compositing-1_dev/html/mix-blend-mode-creates-stacking-context.htm Normal file
View file

@ -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="https://drafts.fxtf.org/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>

26
tests/wpt/css-tests/compositing-1_dev/html/mix-blend-mode-filter.htm Normal file
View file

@ -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="https://drafts.fxtf.org/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>

20
tests/wpt/css-tests/compositing-1_dev/html/mix-blend-mode-iframe-parent.htm Normal file
View file

@ -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="https://drafts.fxtf.org/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>

19
tests/wpt/css-tests/compositing-1_dev/html/mix-blend-mode-iframe-sibling.htm Normal file
View file

@ -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="https://drafts.fxtf.org/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>

26
tests/wpt/css-tests/compositing-1_dev/html/mix-blend-mode-image.htm Normal file
View file

@ -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="https://drafts.fxtf.org/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>

18
tests/wpt/css-tests/compositing-1_dev/html/mix-blend-mode-in-svg-image.htm Normal file
View file

@ -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="https://drafts.fxtf.org/compositing-1/#isolation" rel="help">
<link href="mailto:dschulze@adobe.com" rel="reviewer" title="Dirk Schulze">
<link href="https://drafts.fxtf.org/compositing-1/#csscompositingrules_SVG" rel="help">
<link href="https://drafts.fxtf.org/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>

45
tests/wpt/css-tests/compositing-1_dev/html/mix-blend-mode-intermediate-element-overflow-hidden-and-border-radius.htm Normal file
View file

@ -0,0 +1,45 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<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="https://drafts.fxtf.org/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>

27
tests/wpt/css-tests/compositing-1_dev/html/mix-blend-mode-mask.htm Normal file
View file

@ -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="https://drafts.fxtf.org/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>

48
tests/wpt/css-tests/compositing-1_dev/html/mix-blend-mode-overflowing-child-of-blended-element.htm Normal file
View file

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<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="https://drafts.fxtf.org/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>

39
tests/wpt/css-tests/compositing-1_dev/html/mix-blend-mode-overflowing-child.htm Normal file
View file

@ -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="https://drafts.fxtf.org/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>

31
tests/wpt/css-tests/compositing-1_dev/html/mix-blend-mode-paragraph-background-image.htm Normal file
View file

@ -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="https://drafts.fxtf.org/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>

30
tests/wpt/css-tests/compositing-1_dev/html/mix-blend-mode-paragraph.htm Normal file
View file

@ -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="https://drafts.fxtf.org/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>

37
tests/wpt/css-tests/compositing-1_dev/html/mix-blend-mode-parent-element-overflow-hidden-and-border-radius.htm Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<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="https://drafts.fxtf.org/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>

45
tests/wpt/css-tests/compositing-1_dev/html/mix-blend-mode-parent-element-overflow-scroll-blended-position-fixed.htm Normal file
View file

@ -0,0 +1,45 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<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="https://drafts.fxtf.org/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>

36
tests/wpt/css-tests/compositing-1_dev/html/mix-blend-mode-parent-element-overflow-scroll.htm Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<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="https://drafts.fxtf.org/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>

65
tests/wpt/css-tests/compositing-1_dev/html/mix-blend-mode-parent-with-3D-transform-and-transition.htm Normal file
View file

@ -0,0 +1,65 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<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="https://drafts.fxtf.org/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>

38
tests/wpt/css-tests/compositing-1_dev/html/mix-blend-mode-parent-with-3D-transform.htm Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<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="https://drafts.fxtf.org/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>

42
tests/wpt/css-tests/compositing-1_dev/html/mix-blend-mode-parent-with-border-radius.htm Normal file
View file

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<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="https://drafts.fxtf.org/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>

45
tests/wpt/css-tests/compositing-1_dev/html/mix-blend-mode-parent-with-text.htm Normal file
View file

@ -0,0 +1,45 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<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="https://drafts.fxtf.org/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>

33
tests/wpt/css-tests/compositing-1_dev/html/mix-blend-mode-parsing.htm Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<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="https://drafts.fxtf.org/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>

27
tests/wpt/css-tests/compositing-1_dev/html/mix-blend-mode-script.htm Normal file
View file

@ -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="https://drafts.fxtf.org/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>

76
tests/wpt/css-tests/compositing-1_dev/html/mix-blend-mode-sibling-with-3D-transform-and-transition.htm Normal file
View file

@ -0,0 +1,76 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<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="https://drafts.fxtf.org/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>

48
tests/wpt/css-tests/compositing-1_dev/html/mix-blend-mode-sibling-with-3D-transform.htm Normal file
View file

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<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="https://drafts.fxtf.org/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>

31
tests/wpt/css-tests/compositing-1_dev/html/mix-blend-mode-simple.htm Normal file
View file

@ -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="https://drafts.fxtf.org/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>

38
tests/wpt/css-tests/compositing-1_dev/html/mix-blend-mode-stacking-context-001.htm Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<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="https://drafts.fxtf.org/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>

47
tests/wpt/css-tests/compositing-1_dev/html/mix-blend-mode-stacking-context-creates-isolation.htm Normal file
View file

@ -0,0 +1,47 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Test: stacking context creates isolated group</title>
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
<link href="https://drafts.fxtf.org/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>

22
tests/wpt/css-tests/compositing-1_dev/html/mix-blend-mode-svg-rectangle.htm Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<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="https://drafts.fxtf.org/compositing-1/#csscompositingrules_SVG" rel="help">
<link href="https://drafts.fxtf.org/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" version="1.1" xmlns:xmlns="http://www.w3.org/2000/svg" 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>

28
tests/wpt/css-tests/compositing-1_dev/html/mix-blend-mode-svg.htm Normal file
View file

@ -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="https://drafts.fxtf.org/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>

37
tests/wpt/css-tests/compositing-1_dev/html/mix-blend-mode-transition.htm Normal file
View file

@ -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="https://drafts.fxtf.org/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>

32
tests/wpt/css-tests/compositing-1_dev/html/mix-blend-mode-video-sibling.htm Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<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="https://drafts.fxtf.org/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>

27
tests/wpt/css-tests/compositing-1_dev/html/mix-blend-mode-video.htm Normal file
View file

@ -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="https://drafts.fxtf.org/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>

45
tests/wpt/css-tests/compositing-1_dev/html/mix-blend-mode-with-transform-and-preserve-3D.htm Normal file
View file

@ -0,0 +1,45 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<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="https://drafts.fxtf.org/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>

23
tests/wpt/css-tests/compositing-1_dev/html/reference/background-blend-mode-gradient-image-ref.htm Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Reftest Reference</title>
<link href="mailto:mbudaes@adobe.com" rel="author" title="Mirela Budăeș">
<style>
div {
margin: 5px;
width: 130px;
height: 130px;
background: black;/*rgb(0,0,0);*/
display: block;
float: left;
}
</style>
</head>
<body>
<p>Test passes if there is no red square on the screen. <br>
You should see a black square.</p>
<div></div>
</body></html>

20
tests/wpt/css-tests/compositing-1_dev/html/reference/green-square.htm Normal file
View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<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>

29
tests/wpt/css-tests/compositing-1_dev/html/reference/mix-blend-mode-animation-ref.htm Normal file
View file

@ -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>

39
tests/wpt/css-tests/compositing-1_dev/html/reference/mix-blend-mode-blended-element-overflow-hidden-and-border-radius-ref.htm Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<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>

22
tests/wpt/css-tests/compositing-1_dev/html/reference/mix-blend-mode-blended-element-overflow-scroll-ref.htm Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<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>

31
tests/wpt/css-tests/compositing-1_dev/html/reference/mix-blend-mode-blended-element-with-transparent-pixels-ref.htm Normal file
View file

@ -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>

42
tests/wpt/css-tests/compositing-1_dev/html/reference/mix-blend-mode-blended-with-3D-transform-ref.htm Normal file
View file

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<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>

32
tests/wpt/css-tests/compositing-1_dev/html/reference/mix-blend-mode-blended-with-transform-and-perspective-ref.htm Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<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>

19
tests/wpt/css-tests/compositing-1_dev/html/reference/mix-blend-mode-border-image-ref.htm Normal file
View file

@ -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>

41
tests/wpt/css-tests/compositing-1_dev/html/reference/mix-blend-mode-both-parent-and-blended-with-3D-transform-ref.htm Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<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>

12
tests/wpt/css-tests/compositing-1_dev/html/reference/mix-blend-mode-canvas-parent-ref.htm Normal file
View file

@ -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>

12
tests/wpt/css-tests/compositing-1_dev/html/reference/mix-blend-mode-canvas-sibling-ref.htm Normal file
View file

@ -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>

19
tests/wpt/css-tests/compositing-1_dev/html/reference/mix-blend-mode-filter-ref.htm Normal file
View file

@ -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>

13
tests/wpt/css-tests/compositing-1_dev/html/reference/mix-blend-mode-iframe-parent-ref.htm Normal file
View file

@ -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>

13
tests/wpt/css-tests/compositing-1_dev/html/reference/mix-blend-mode-iframe-sibling-ref.htm Normal file
View file

@ -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>

20
tests/wpt/css-tests/compositing-1_dev/html/reference/mix-blend-mode-image-notref.htm Normal file
View file

@ -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>

55
tests/wpt/css-tests/compositing-1_dev/html/reference/mix-blend-mode-intermediate-element-overflow-hidden-and-border-radius-ref.htm Normal file
View file

@ -0,0 +1,55 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<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>

19
tests/wpt/css-tests/compositing-1_dev/html/reference/mix-blend-mode-mask-ref.htm Normal file
View file

@ -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>

42
tests/wpt/css-tests/compositing-1_dev/html/reference/mix-blend-mode-overflowing-child-ref.htm Normal file
View file

@ -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>

24
tests/wpt/css-tests/compositing-1_dev/html/reference/mix-blend-mode-paragraph-background-image-ref.htm Normal file
View file

@ -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>

25
tests/wpt/css-tests/compositing-1_dev/html/reference/mix-blend-mode-paragraph-ref.htm Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html><head>
<title>CSS Test: Paragraph element with mix-blend-mode.</title>
<link href="mitica@adobe.com" rel="author" title="Mihai Tica">
<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>

23
tests/wpt/css-tests/compositing-1_dev/html/reference/mix-blend-mode-parent-element-overflow-hidden-and-border-radius-ref.htm Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<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>

40
tests/wpt/css-tests/compositing-1_dev/html/reference/mix-blend-mode-parent-element-overflow-scroll-blended-position-fixed-ref.htm Normal file
View file

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<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>

30
tests/wpt/css-tests/compositing-1_dev/html/reference/mix-blend-mode-parent-element-overflow-scroll-ref.htm Normal file
View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<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>

40
tests/wpt/css-tests/compositing-1_dev/html/reference/mix-blend-mode-parent-with-3D-transform-ref.htm Normal file
View file

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<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>

35
tests/wpt/css-tests/compositing-1_dev/html/reference/mix-blend-mode-parent-with-border-radius-ref.htm Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<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>

30
tests/wpt/css-tests/compositing-1_dev/html/reference/mix-blend-mode-parent-with-text-ref.htm Normal file
View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<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>

18
tests/wpt/css-tests/compositing-1_dev/html/reference/mix-blend-mode-script-ref.htm Normal file
View file

@ -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>

51
tests/wpt/css-tests/compositing-1_dev/html/reference/mix-blend-mode-sibling-with-3D-transform-ref.htm Normal file
View file

@ -0,0 +1,51 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<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>

30
tests/wpt/css-tests/compositing-1_dev/html/reference/mix-blend-mode-stacking-context-001-ref.htm Normal file
View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<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>

47
tests/wpt/css-tests/compositing-1_dev/html/reference/mix-blend-mode-stacking-context-creates-isolation-ref.htm Normal file
View file

@ -0,0 +1,47 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<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>

20
tests/wpt/css-tests/compositing-1_dev/html/reference/mix-blend-mode-svg-rectangle-ref.htm Normal file
View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<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>

18
tests/wpt/css-tests/compositing-1_dev/html/reference/mix-blend-mode-svg-ref.htm Normal file
View file

@ -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>

30
tests/wpt/css-tests/compositing-1_dev/html/reference/mix-blend-mode-transition-ref.htm Normal file
View file

@ -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>

22
tests/wpt/css-tests/compositing-1_dev/html/reference/mix-blend-mode-video-notref.htm Normal file
View file

@ -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>

26
tests/wpt/css-tests/compositing-1_dev/html/reference/mix-blend-mode-video-sibling-notref.htm Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<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>

41
tests/wpt/css-tests/compositing-1_dev/html/reference/mix-blend-mode-with-transform-and-preserve-3D-ref.htm Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<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>

BIN
tests/wpt/css-tests/compositing-1_dev/html/reference/support/RGB_Circles.mov Normal file
View file

Binary file not shown.

BIN
tests/wpt/css-tests/compositing-1_dev/html/reference/support/RGB_Circles.mp4 Normal file
View file

Binary file not shown.

BIN
tests/wpt/css-tests/compositing-1_dev/html/reference/support/RGB_Circles.oggtheora.ogv Normal file
View file

Binary file not shown.

BIN
tests/wpt/css-tests/compositing-1_dev/html/reference/support/RGB_Circles.webmhd.webm Normal file
View file

Binary file not shown.

BIN
tests/wpt/css-tests/compositing-1_dev/html/reference/support/RGB_Circles.webmsd.webm Normal file
View file

Binary file not shown.

Some files were not shown because too many files have changed in this diff Show more