diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
| commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
| tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/compositing/mix-blend-mode | |
| parent | Initial commit. (diff) | |
| download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip | |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/compositing/mix-blend-mode')
98 files changed, 2861 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-animation.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-animation.html new file mode 100644 index 0000000000..55618485d8 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-animation.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: Blended element with animation</title> + <link rel="author" title="Mihai Tica" href="mailto:mitica@adobe.com"> + <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> + <meta name="assert" content="Test checks that an element with mix-blend-mode and animation blends with the parent element."> + <meta name="fuzzy" content="0-2;0-11000"> + <link rel="reviewer" title="Rik Cabanier" href="mailto:cabanier@adobe.com"> + <link rel="reviewer" title="Mirela Budaes" href="mailto:mbudaes@adobe.com"> + <link rel="match" href="reference/mix-blend-mode-animation-ref.html"> + <style type="text/css"> + div { + width: 100px; + height: 100px; + background: #FF0; + } + + @keyframes changeOpacity + { + from { opacity: 0.9; } + 50% { opacity: 0.9; } + to { opacity: 0.1; } + } + + #blender { + background: #F00; + mix-blend-mode: difference; + animation: changeOpacity 10s; + } + </style> + </head> + <body> + <p>Test passes if you can see a fading green box after 5 seconds.</p> + <div><div id="blender"></div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-blended-element-interposed.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-blended-element-interposed.html new file mode 100644 index 0000000000..768352de02 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-blended-element-interposed.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Mirela Budăeș" href="mailto:mbudaes@adobe.com"> + <link rel="author" title="Mihai Tica" href="mailto:mitica@adobe.com"> + <link rel="reviewer" title="Mihai Balan" href="mailto:mibalan@adobe.com"> + <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> + <meta name="assert" content="Test checks that an element with mix-blend-mode having a child blends with the parent element."> + <meta name="fuzzy" content="0-1;0-10"> + <link rel="match" href="reference/green-square.html"> + <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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-blended-element-overflow-hidden-and-border-radius.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-blended-element-overflow-hidden-and-border-radius.html new file mode 100644 index 0000000000..305e0e2e0c --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-blended-element-overflow-hidden-and-border-radius.html @@ -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 rel="author" title="Mirela Budăeș" href="mailto:mbudaes@adobe.com"> + <link rel="author" title="Ion Roșca" href="mailto:rosca@adobe.com"> + <link rel="reviewer" title="Mihai Țică" href="mailto:mitica@adobe.com"> + <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> + <meta name="assert" content="Test checks that an element having mix-blend-mode, overflow:hidden and border-radius blends correctly with its parent element."> + <meta name="fuzzy" content="0-10;0-5"> + <link rel="match" href="reference/mix-blend-mode-blended-element-overflow-hidden-and-border-radius-ref.html"> + <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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-blended-element-overflow-scroll.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-blended-element-overflow-scroll.html new file mode 100644 index 0000000000..8952b39452 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-blended-element-overflow-scroll.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: blending between an element and its child having overflow:scroll</title> + <link rel="author" title="Mirela Budăeș" href="mailto:mbudaes@adobe.com"> + <link rel="author" title="Ion Roșca" href="mailto:rosca@adobe.com"> + <link rel="reviewer" title="Mihai Țică" href="mailto:mitica@adobe.com"> + <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> + <meta name="assert" content="Test checks that an element with mix-blend-mode and overflow:scroll blends with its parent element"> + <link rel="match" href="reference/mix-blend-mode-blended-element-overflow-scroll-ref.html"> + <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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-blended-element-with-transparent-pixels.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-blended-element-with-transparent-pixels.html new file mode 100644 index 0000000000..6fd3a8bad7 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-blended-element-with-transparent-pixels.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: blending between an element with transparent pixels and a child element</title> + <link rel="author" title="Mirela Budăeș" href="mailto:mbudaes@adobe.com"> + <link rel="author" title="Mihai Tica" href="mailto:mitica@adobe.com"> + <link rel="reviewer" title="Mihai Balan" href="mailto:mibalan@adobe.com"> + <link rel="reviewer" title="Horia Olaru" href="mailto:olaru@adobe.com"> + <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> + <meta name="assert" 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."> + <link rel="match" href="reference/mix-blend-mode-blended-element-with-transparent-pixels-ref.html"> + <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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-blended-with-3D-transform.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-blended-with-3D-transform.html new file mode 100644 index 0000000000..1739e01382 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-blended-with-3D-transform.html @@ -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 rel="author" title="Mirela Budăeș" href="mailto:mbudaes@adobe.com"> + <link rel="author" title="Ion Roșca" href="mailto:rosca@adobe.com"> + <link rel="reviewer" title="Mihai Țică" href="mailto:mitica@adobe.com"> + <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> + <meta name="assert" content="Test checks that the element with mix-blend-mode and 3D transform blends correctly with its parent"> + <meta name="fuzzy" content="0-255;0-350"> + <link rel="match" href="reference/mix-blend-mode-blended-with-3D-transform-ref.html"> + <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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-blended-with-transform-and-perspective.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-blended-with-transform-and-perspective.html new file mode 100644 index 0000000000..46189afc58 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-blended-with-transform-and-perspective.html @@ -0,0 +1,36 @@ +<!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 rel="author" title="Mirela Budăeș" href="mailto:mbudaes@adobe.com"> + <link rel="author" title="Ion Roșca" href="mailto:rosca@adobe.com"> + <link rel="reviewer" title="Mihai Țică" href="mailto:mitica@adobe.com"> + <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> + <meta name="assert" content="Test checks that an element having mix-blend-mode and perspective blends correctly with its parent"> + <link rel="match" href="reference/mix-blend-mode-blended-with-transform-and-perspective-ref.html"> + <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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-blending-with-sibling.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-blending-with-sibling.html new file mode 100644 index 0000000000..80f197c40b --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-blending-with-sibling.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: mix-blend-mode between an element and its sibling</title> + <link rel="author" title="Mirela Budăeș" href="mailto:mbudaes@adobe.com"> + <link rel="author" title="Mihai Tica" href="mailto:mitica@adobe.com"> + <link rel="reviewer" title="Mihai Balan" href="mailto:mibalan@adobe.com"> + <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> + <meta name="assert" content="Test checks that an element with mix-blend-mode blends with a sibling element"> + <link rel="match" href="reference/green-square.html"> + <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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-border-image.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-border-image.html new file mode 100644 index 0000000000..7309e37372 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-border-image.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: Blended element with border image</title> + <link rel="author" title="Mihai Tica" href="mailto:mitica@adobe.com"> + <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> + <meta name="assert" content="Test checks if mix-blend-mode is applied for an element with border-image."> + <meta name="flags" content="svg"> + <link rel="reviewer" title="Rik Cabanier" href="mailto:cabanier@adobe.com"> + <link rel="reviewer" title="Mirela Budaes" href="mailto:mbudaes@adobe.com"> + <link rel="match" href="reference/mix-blend-mode-border-image-ref.html"> + <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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-both-parent-and-blended-with-3D-transform.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-both-parent-and-blended-with-3D-transform.html new file mode 100644 index 0000000000..59fca74f84 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-both-parent-and-blended-with-3D-transform.html @@ -0,0 +1,43 @@ +<!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 rel="author" title="Mirela Budăeș" href="mailto:mbudaes@adobe.com"> + <link rel="author" title="Ion Roșca" href="mailto:rosca@adobe.com"> + <link rel="reviewer" title="Mihai Țică" href="mailto:mitica@adobe.com"> + <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> + <meta name="assert" content="Test checks that the element with mix-blend-mode blends with the parent element (both with 3D transform)"> + <meta name="fuzzy" content="0-128;0-1000"> + <link rel="match" href="reference/mix-blend-mode-both-parent-and-blended-with-3D-transform-ref.html"> + <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; + } + p { + will-change: transform; + } + </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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-canvas-parent.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-canvas-parent.html new file mode 100644 index 0000000000..5107207e36 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-canvas-parent.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: Canvas with mix-blend-mode blends with the parent element.</title> + <link rel="author" title="Mihai Tica" href="mailto:mitica@adobe.com"> + <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> + <meta name="assert" content="Test checks that a canvas element having mix-blend-mode applied blends with the content of the parent element."> + <meta name="flags" content="dom"/> + <meta name="fuzzy" content="0-1;0-10"> + <link rel="reviewer" title="Rik Cabanier" href="mailto:cabanier@adobe.com"> + <link rel="reviewer" title="Mirela Budaes" href="mailto:mbudaes@adobe.com"> + <link rel="match" href="reference/mix-blend-mode-canvas-parent-ref.html"> + </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 id="cvs" width="100" height="100" style="mix-blend-mode: difference;"></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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-canvas-sibling.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-canvas-sibling.html new file mode 100644 index 0000000000..2ecffbf51e --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-canvas-sibling.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: Canvas with mix-blend-mode blends with sibling element</title> + <link rel="author" title="Mihai Tica" href="mailto:mitica@adobe.com"> + <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> + <meta name="assert" content="Test checks that a canvas element having mix-blend-mode applied blends with a sibling element."> + <meta name="flags" content="dom"/> + <meta name="fuzzy" content="0-1;0-10"> + <link rel="reviewer" title="Rik Cabanier" href="mailto:cabanier@adobe.com"> + <link rel="reviewer" title="Mirela Budaes" href="mailto:mbudaes@adobe.com"> + <link rel="match" href="reference/mix-blend-mode-canvas-sibling-ref.html"> + </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 id="cvs" width="100" height="100" style="mix-blend-mode: difference; position: relative; top: -100px;"></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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-creates-stacking-context.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-creates-stacking-context.html new file mode 100644 index 0000000000..2d24a3f589 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-creates-stacking-context.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: an element with mix-blend-mode other than normal creates a stacking context</title> + <link rel="author" title="Mihai Tica" href="mailto:mitica@adobe.com"> + <link rel="reviewer" title="Mihai Balan" href="mailto:mibalan@adobe.com"> + <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> + <meta name="flags" content="dom"> + <meta name="assert" content="Test checks that applying a blendmode other than normal + to the element must establish a new stacking context."> + <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_not_equals(blenderStyle.zIndex, "auto"); + } + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-filter.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-filter.html new file mode 100644 index 0000000000..d95866f839 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-filter.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: Blended element with filter.</title> + <link rel="author" title="Mihai Tica" href="mailto:mitica@adobe.com"> + <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> + <meta name="assert" content="Test checks that an element having a filter effect and mix-blend-mode blends with its parent element."> + <link rel="reviewer" title="Rik Cabanier" href="mailto:cabanier@adobe.com"> + <link rel="reviewer" title="Mirela Budaes" href="mailto:mbudaes@adobe.com"> + <link rel="match" href="reference/mix-blend-mode-filter-ref.html"> + </head> + <style type="text/css"> + div { + width: 100px; + height: 100px; + } + </style> + <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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-iframe-parent.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-iframe-parent.html new file mode 100644 index 0000000000..a24a5f933e --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-iframe-parent.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: an iframe element with mix-blend-mode should blend with its parent element.</title> + <link rel="author" title="Mihai Tica" href="mailto:mitica@adobe.com"> + <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> + <meta name="assert" content="Test checks that an iframe element blends with its parent element."> + <meta name="fuzzy" content="0-1;0-10"> + <link rel="reviewer" title="Rik Cabanier" href="mailto:cabanier@adobe.com"> + <link rel="reviewer" title="Mirela Budaes" href="mailto:mbudaes@adobe.com"> + <link rel="match" href="reference/mix-blend-mode-iframe-parent-ref.html"> + </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" frameborder="0" style="margin-top: -8px; margin-left: -8px; mix-blend-mode: difference;"></iframe> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-iframe-sibling.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-iframe-sibling.html new file mode 100644 index 0000000000..d1a5518b8c --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-iframe-sibling.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: an iframe element with mix-blend-mode should blend with a sibling element.</title> + <link rel="author" title="Mihai Tica" href="mailto:mitica@adobe.com"> + <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> + <meta name="assert" content="Test checks that an iframe element blends with a sibling element."> + <meta name="fuzzy" content="0-1;0-10"> + <link rel="reviewer" title="Rik Cabanier" href="mailto:cabanier@adobe.com"> + <link rel="reviewer" title="Mirela Budaes" href="mailto:mbudaes@adobe.com"> + <link rel="match" href="reference/mix-blend-mode-iframe-sibling-ref.html"> + </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" frameborder="0" style="margin-top: -108px; margin-left: -8px; mix-blend-mode: difference;"></iframe> + </body> +</html> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-image.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-image.html new file mode 100644 index 0000000000..bd0ef8eb7c --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-image.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: Image element with mix-blend-mode.</title> + <link rel="author" title="Mihai Tica" href="mailto:mitica@adobe.com"> + <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> + <meta name="assert" content="Test checks that mix-blend-mode is applied to an img element."> + <meta name="flags" content="image"> + <link rel="reviewer" title="Rik Cabanier" href="mailto:cabanier@adobe.com"> + <link rel="reviewer" title="Mirela Budaes" href="mailto:mbudaes@adobe.com"> + <link rel="mismatch" href="reference/mix-blend-mode-image-notref.html"> + <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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-intermediate-element-overflow-hidden-and-border-radius.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-intermediate-element-overflow-hidden-and-border-radius.html new file mode 100644 index 0000000000..8317473821 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-intermediate-element-overflow-hidden-and-border-radius.html @@ -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 rel="author" title="Mirela Budăeș" href="mailto:mbudaes@adobe.com"> + <link rel="author" title="Ion Roșca" href="mailto:rosca@adobe.com"> + <link rel="reviewer" title="Mihai Țică" href="mailto:mitica@adobe.com"> + <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> + <meta name="assert" 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."> + <meta name="fuzzy" content="0-10;0-50"> + <link rel="match" href="reference/mix-blend-mode-intermediate-element-overflow-hidden-and-border-radius-ref.html"> + <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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-mask.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-mask.html new file mode 100644 index 0000000000..2a7072febb --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-mask.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: Blended element with masking.</title> + <link rel="author" title="Mihai Tica" href="mailto:mitica@adobe.com"> + <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> + <meta name="assert" content="Test checks that an element having mask and mix-blend-mode blends with its parent element."> + <meta name="flags" content="svg"> + <meta name="fuzzy" content="0-1;0-10"> + <link rel="reviewer" title="Rik Cabanier" href="mailto:cabanier@adobe.com"> + <link rel="reviewer" title="Mirela Budaes" href="mailto:mbudaes@adobe.com"> + <link rel="match" href="reference/mix-blend-mode-mask-ref.html"> + <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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-overflowing-child-of-blended-element.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-overflowing-child-of-blended-element.html new file mode 100644 index 0000000000..8096cf7f3d --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-overflowing-child-of-blended-element.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: blend an element having an overflowing child.</title> + <link rel="author" title="Mirela Budăeș" href="mailto:mbudaes@adobe.com"> + <link rel="author" title="Mihai Tica" href="mailto:mitica@adobe.com"> + <link rel="reviewer" title="Mihai Balan" href="mailto:mibalan@adobe.com"> + <link rel="reviewer" title="Horia Olaru" href="mailto:olaru@adobe.com"> + <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> + <meta name="assert" 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."> + <link rel="match" href="reference/mix-blend-mode-blended-element-with-transparent-pixels-ref.html"> + <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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-overflowing-child.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-overflowing-child.html new file mode 100644 index 0000000000..de808bab0b --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-overflowing-child.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: blended element overflows parent</title> + <link rel="author" title="Mihai Tica" href="mailto:mitica@adobe.com"> + <link rel="reviewer" title="Mihai Balan" href="mailto:mibalan@adobe.com"> + <link rel="reviewer" title="Horia Olaru" href="mailto:olaru@adobe.com"> + <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> + <meta name="assert" content="Test checks that an overflowing element with mix-blend-mode blends with the parent element."> + <link rel="match" href="reference/mix-blend-mode-overflowing-child-ref.html"> + <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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-paragraph-background-image.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-paragraph-background-image.html new file mode 100644 index 0000000000..51744dc783 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-paragraph-background-image.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: Paragraph element with mix-blend-mode over parent with background image.</title> + <link rel="author" title="Mihai Tica" href="mailto:mitica@adobe.com"> + <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> + <meta name="assert" content="Test checks that test a paragraph element blends with the parent element having background image."> + <meta name="flags" content="svg"> + <meta name="fuzzy" content="0-1;0-10"> + <link rel="reviewer" title="Rik Cabanier" href="mailto:cabanier@adobe.com"> + <link rel="reviewer" title="Mirela Budaes" href="mailto:mbudaes@adobe.com"> + <link rel="match" href="reference/mix-blend-mode-paragraph-background-image-ref.html"> + <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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-paragraph.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-paragraph.html new file mode 100644 index 0000000000..e0f4e383a5 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-paragraph.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: Paragraph element with mix-blend-mode.</title> + <link rel="author" title="Mihai Tica" href="mailto:mitica@adobe.com"> + <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> + <meta name="assert" content="Test checks that test a paragraph element blends with the parent element."> + <meta name="fuzzy" content="0-1;0-10"> + <link rel="reviewer" title="Rik Cabanier" href="mailto:cabanier@adobe.com"> + <link rel="reviewer" title="Mirela Budaes" href="mailto:mbudaes@adobe.com"> + <link rel="match" href="reference/mix-blend-mode-paragraph-ref.html"> + <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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-parent-element-overflow-hidden-and-border-radius.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-parent-element-overflow-hidden-and-border-radius.html new file mode 100644 index 0000000000..840d2626bc --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-parent-element-overflow-hidden-and-border-radius.html @@ -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 rel="author" title="Mirela Budăeș" href="mailto:mbudaes@adobe.com"> + <link rel="author" title="Ion Roșca" href="mailto:rosca@adobe.com"> + <link rel="reviewer" title="Mihai Țică" href="mailto:mitica@adobe.com"> + <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> + <meta name="assert" content="Test checks that an element having mix-blend-mode blends with the parent element having overflow:hidden and border-radius"> + <meta name="fuzzy" content="0-128;0-400"> + <link rel="match" href="reference/mix-blend-mode-parent-element-overflow-hidden-and-border-radius-ref.html"> + <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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-parent-element-overflow-scroll-blended-position-fixed.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-parent-element-overflow-scroll-blended-position-fixed.html new file mode 100644 index 0000000000..5b0c246834 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-parent-element-overflow-scroll-blended-position-fixed.html @@ -0,0 +1,44 @@ +<!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 rel="author" title="Mirela Budăeș" href="mailto:mbudaes@adobe.com"> + <link rel="author" title="Ion Roșca" href="mailto:rosca@adobe.com"> + <link rel="reviewer" title="Mihai Țică" href="mailto:mitica@adobe.com"> + <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> + <meta name="assert" content="Test checks that an element with mix-blend-mode blends with the parent element with overflow:scroll"> + <link rel="match" href="reference/mix-blend-mode-parent-element-overflow-scroll-blended-position-fixed-ref.html"> + <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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-parent-element-overflow-scroll.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-parent-element-overflow-scroll.html new file mode 100644 index 0000000000..81c110c496 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-parent-element-overflow-scroll.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: blending between an element with overflow:scroll and its child</title> + <link rel="author" title="Mirela Budăeș" href="mailto:mbudaes@adobe.com"> + <link rel="author" title="Ion Roșca" href="mailto:rosca@adobe.com"> + <link rel="reviewer" title="Mihai Țică" href="mailto:mitica@adobe.com"> + <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> + <meta name="assert" content="Test checks that an element with mix-blend-mode blends its parent having overflow:scroll"> + <link rel="match" href="reference/mix-blend-mode-parent-element-overflow-scroll-ref.html"> + <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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-parent-with-3D-transform-and-transition.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-parent-with-3D-transform-and-transition.html new file mode 100644 index 0000000000..cd5f0e462b --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-parent-with-3D-transform-and-transition.html @@ -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 rel="author" title="Mirela Budăeș" href="mailto:mbudaes@adobe.com"> + <link rel="author" title="Ion Roșca" href="mailto:rosca@adobe.com"> + <link rel="reviewer" title="Mihai Țică" href="mailto:mitica@adobe.com"> + <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> + <meta name="flags" content="dom"/> + <meta name="assert" content="Test checks that an element having mix-blend-mode blends with its parent element having 3D transform and transition"> + <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 class="parent" id="parent"> + <div class="blended"></div> + </div> + <div class="parent ref" id="parentref"> + <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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-parent-with-3D-transform.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-parent-with-3D-transform.html new file mode 100644 index 0000000000..d2175cfbd9 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-parent-with-3D-transform.html @@ -0,0 +1,37 @@ +<!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 rel="author" title="Mirela Budăeș" href="mailto:mbudaes@adobe.com"> + <link rel="author" title="Ion Roșca" href="mailto:rosca@adobe.com"> + <link rel="reviewer" title="Mihai Țică" href="mailto:mitica@adobe.com"> + <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> + <meta name="assert" content="Test checks that an element with mix-blend-mode blends with its parent having 3D transform"> + <link rel="match" href="reference/mix-blend-mode-parent-with-3D-transform-ref.html"> + <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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-parent-with-border-radius.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-parent-with-border-radius.html new file mode 100644 index 0000000000..e6562706d8 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-parent-with-border-radius.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: blending with parent having border radius</title> + <link rel="author" title="Mirela Budăeș" href="mailto:mbudaes@adobe.com"> + <link rel="author" title="Mihai Tica" href="mailto:mitica@adobe.com"> + <link rel="reviewer" title="Mihai Balan" href="mailto:mibalan@adobe.com"> + <link rel="reviewer" title="Horia Olaru" href="mailto:olaru@adobe.com"> + <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> + <meta name="assert" content="Test checks that an element with mix-blend-mode blends + with the parent element having border-radius."> + <meta name="fuzzy" content="0-5;0-200"> + <link rel="match" href="reference/mix-blend-mode-parent-with-border-radius-ref.html"> + <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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-parent-with-text.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-parent-with-text.html new file mode 100644 index 0000000000..274bebe539 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-parent-with-text.html @@ -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 rel="author" title="Mirela Budăeș" href="mailto:mbudaes@adobe.com"> + <link rel="author" title="Mihai Tica" href="mailto:mitica@adobe.com"> + <link rel="reviewer" title="Mihai Balan" href="mailto:mibalan@adobe.com"> + <link rel="reviewer" title="Horia Olaru" href="mailto:olaru@adobe.com"> + <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> + <meta name="assert" content="Test checks that an element with mix-blend-mode only blends with the contents + of a parent that creates a stacking context."> + <meta name="fuzzy" content="0-1;0-10"> + <link rel="match" href="reference/mix-blend-mode-parent-with-text-ref.html"> + <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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-parsing.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-parsing.html new file mode 100644 index 0000000000..1cf84dd826 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-parsing.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: parsing mix-blend-mode property</title> + <link rel="author" title="Mirela Budăeș" href="mailto:mbudaes@adobe.com"> + <link rel="reviewer" title="Mihai Balan" href="mailto:mibalan@adobe.com"> + <link rel="reviewer" title="Rik Cabanier" href="mailto:cabanier@adobe.com"> + <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> + <meta name="flags" content="dom"> + <meta name="assert" content="Test checks that the value specified for mix-blend-mode property is correctly parsed"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + </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", "plus-lighter"]; + + 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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-plus-lighter-basic.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-plus-lighter-basic.html new file mode 100644 index 0000000000..fcf2d172af --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-plus-lighter-basic.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<title>mix-blend-mode: plus-lighter test</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.fxtf.org/compositing-2/#mix-blend-mode"> +<link rel="match" href="reference/mix-blend-mode-plus-lighter-basic-ref.html"> + +<style> +.container { + position: relative; + isolation: isolate; + width: 500px; + height: 500px; +} +.blue { background: #000064; } +.green { background: #006400; } +.common { + position: absolute; + width: 100px; + height: 100px; + opacity: 0.6; +} +.one { + top: 10px; + left: 10px; +} +.two { + top: 65px; + left: 30px; + mix-blend-mode: plus-lighter; +} +.three { + top: 120px; + left: 50px; + mix-blend-mode: plus-lighter; +} +</style> + +<div class=container> + <div class="one common blue"></div> + <div class="two common blue"></div> + <div class="three common green"></div> +</div> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-plus-lighter-svg-basic.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-plus-lighter-svg-basic.html new file mode 100644 index 0000000000..c7c3ae9b97 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-plus-lighter-svg-basic.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>mix-blend-mode: plus-lighter SVG test</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.fxtf.org/compositing-2/#mix-blend-mode"> +<link rel="match" href="reference/mix-blend-mode-plus-lighter-svg-basic-ref.html"> + +<style> +.isolate { isolation: isolate; } +rect { + opacity: 0.6; + mix-blend-mode: plus-lighter; +} +</style> + +<svg width=500 height=500> + <g class="isolate"> + <rect x="10" y="10" width="100" height="100" fill="#000064"></rect> + <rect x="30" y="65" width="100" height="100" fill="#000064"></rect> + <rect x="50" y="120" width="100" height="100" fill="#006400"></rect> + </g> +</svg> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-plus-lighter-svg.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-plus-lighter-svg.html new file mode 100644 index 0000000000..630dcd777b --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-plus-lighter-svg.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<title>mix-blend-mode: plus-lighter SVG test</title> +<link rel="author" title="Jake Archibald" href="mailto:jakearchibald@chromium.org"> +<link rel="help" href="https://drafts.fxtf.org/compositing-2/#mix-blend-mode"> +<link rel="match" href="reference/mix-blend-mode-plus-lighter-svg-ref.html"> +<meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-4294967295"> +<style> + .blend-group { + isolation: isolate; + } + .layer { + mix-blend-mode: plus-lighter; + } +</style> +<script type="module"> + import { tests } from '../support/plus-lighter.js'; + import { toCSSColor } from '../support/utils.js'; + + function createRects(colors) { + let html = ''; + + for (const color of colors) { + html += `<rect class="layer" x="0" y="0" width="100%" height="100%" fill="${toCSSColor(color)}" />`; + } + + return html; + } + + for (const colors of tests) { + document.body.insertAdjacentHTML('beforeend', ` + <svg width="100" height="100"> + <g class="blend-group"> + ${createRects(colors)} + </g> + </svg> + `); + } +</script> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-plus-lighter.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-plus-lighter.html new file mode 100644 index 0000000000..86bf1cc3f4 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-plus-lighter.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<title>mix-blend-mode: plus-lighter test</title> +<link rel="author" title="Jake Archibald" href="mailto:jakearchibald@chromium.org"> +<link rel="help" href="https://drafts.fxtf.org/compositing-2/#mix-blend-mode"> +<link rel="match" href="reference/mix-blend-mode-plus-lighter-ref.html"> +<meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-4294967295"> +<style> + .test { + width: 100px; + height: 100px; + position: relative; + isolation: isolate; + } + .layer { + position: absolute; + inset: 0; + mix-blend-mode: plus-lighter; + } +</style> +<script type="module"> + import { tests } from '../support/plus-lighter.js'; + import { toCSSColor } from '../support/utils.js'; + + function createLayers(colors) { + let html = ''; + + for (const color of colors) { + html += `<div class="layer" style="background-color: ${toCSSColor(color)}"></div>`; + } + + return html; + } + + for (const colors of tests) { + document.body.insertAdjacentHTML('beforeend', ` + <div class="test">${createLayers(colors)}</div> + `); + } +</script> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-root-element-group-ref.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-root-element-group-ref.html new file mode 100644 index 0000000000..a661c4663a --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-root-element-group-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Matt Woodrow" href="mailto:mattwoodrow@apple.com"> + <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> + <style type="text/css"> + div { + width: 200px; + height: 200px; + } + .green { + background: rgba(0,160,0,0.5); + mix-blend-mode: soft-light; + } + .blue { + position: absolute; + top: 75px; + left: 75px; + background: rgba(0,0,160,0.5) + } + .wrapper { + isolation: isolate; + } + </style> + </head> + <body> + <div class="wrapper"> + <div class="blue"></div> + <div class="green"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-root-element-group.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-root-element-group.html new file mode 100644 index 0000000000..8a190b9281 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-root-element-group.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: mix-blend-mode in the Root Element Group should have a transparent backdrop</title> + <link rel="author" title="Matt Woodrow" href="mailto:mattwoodrow@apple.com"> + <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> + <meta name="assert" content="Test checks that the Root Element Group has a transparent backdrop"> + <link rel="match" href="mix-blend-mode-root-element-group-ref.html"> + <style type="text/css"> + div { + width: 200px; + height: 200px; + } + .green { + background: rgba(0,160,0,0.5); + mix-blend-mode: soft-light; + } + .blue { + position: absolute; + top: 75px; + left: 75px; + background: rgba(0,0,160,0.5) + } + </style> + </head> + <body> + <div class="blue"></div> + <div class="green"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-rotated-clip.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-rotated-clip.html new file mode 100644 index 0000000000..63db5cbbe1 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-rotated-clip.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>mix-blend-mode under rotated clip</title> +<link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> +<link rel="match" href="reference/mix-blend-mode-rotated-clip-ref.html"> +<meta name="fuzzy" content="0-1;0-30"> +<style>div { width: 100px; height: 100px; }</style> +<div style="background: lime; overflow: hidden"> + <div style="transform: rotate(45deg)"> + <div style="background: lime; overflow: hidden"> + <div style="background: red; transform: rotate(-45deg); mix-blend-mode: overlay; will-change: transform"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-script.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-script.html new file mode 100644 index 0000000000..e842d0b395 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-script.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: Set mix-blend-mode from script.</title> + <link rel="author" title="Mihai Tica" href="mailto:mitica@adobe.com"> + <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> + <meta name="assert" content="Test checks that mix-blend-mode is applied when set from script."> + <meta name="flags" content="dom"/> + <meta name="fuzzy" content="0-1;0-10"> + <link rel="reviewer" title="Rik Cabanier" href="mailto:cabanier@adobe.com"> + <link rel="reviewer" title="Mirela Budaes" href="mailto:mbudaes@adobe.com"> + <link rel="match" href="reference/mix-blend-mode-script-ref.html"> + <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 id="blender" style="background: #F00;"></div></div> + <script type="text/javascript"> + document.getElementById("blender").style.mixBlendMode = "difference"; + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-sibling-with-3D-transform-and-transition.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-sibling-with-3D-transform-and-transition.html new file mode 100644 index 0000000000..798b1e2618 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-sibling-with-3D-transform-and-transition.html @@ -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 rel="author" title="Mirela Budăeș" href="mailto:mbudaes@adobe.com"> + <link rel="author" title="Ion Roșca" href="mailto:rosca@adobe.com"> + <link rel="reviewer" title="Mihai Țică" href="mailto:mitica@adobe.com"> + <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> + <meta name="flags" content="dom"/> + <meta name="assert" content="Test checks that an element having mix-blend-mode blends with an overlapping sibling element having 3D transform and transition"> + <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 class="siblingOfBlended" id="sibling"></div> + <div class="blended"></div> + </div> + <div class="parent ref"> + <div class="siblingOfBlended ref" id="siblingref"></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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-sibling-with-3D-transform.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-sibling-with-3D-transform.html new file mode 100644 index 0000000000..a9a9d1bd25 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-sibling-with-3D-transform.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: blending between an element and its sibling element having 3D transform</title> + <link rel="author" title="Mirela Budăeș" href="mailto:mbudaes@adobe.com"> + <link rel="author" title="Ion Roșca" href="mailto:rosca@adobe.com"> + <link rel="reviewer" title="Mihai Țică" href="mailto:mitica@adobe.com"> + <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> + <meta name="assert" content="Test checks that an element with mix-blend-mode blends with both parent element and with sibling element having 3D transform"> + <link rel="match" href="reference/mix-blend-mode-sibling-with-3D-transform-ref.html"> + <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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-simple.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-simple.html new file mode 100644 index 0000000000..b00f81694e --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-simple.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: An element with mix-blend-mode blends with its parent element.</title> + <link rel="author" title="Mihai Tica" href="mailto:mitica@adobe.com"> + <link rel="reviewer" title="Mihai Balan" href="mailto:mibalan@adobe.com"> + <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> + <meta name="assert" content="Test checks that an element with mix-blend-mode blends with its parent element."> + <meta name="fuzzy" content="0-1;0-10"> + <link rel="match" href="reference/green-square.html"> + <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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-stacking-context-001.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-stacking-context-001.html new file mode 100644 index 0000000000..6fc7c21f33 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-stacking-context-001.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: mix-blend-mode between an element and its child</title> + <link rel="author" title="Mirela Budăeș" href="mailto:mbudaes@adobe.com"> + <link rel="reviewer" title="Mihai Balan" href="mailto:mibalan@adobe.com"> + <link rel="reviewer" title="Rik Cabanier" href="mailto:cabanier@adobe.com"> + <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> + <meta name="assert" content="Test checks that the element with mix-blend-mode and opacity blends with the parent element"> + <link rel="match" href="reference/mix-blend-mode-stacking-context-001-ref.html"> + <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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-stacking-context-creates-isolation.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-stacking-context-creates-isolation.html new file mode 100644 index 0000000000..79edf0f090 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-stacking-context-creates-isolation.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: stacking context creates isolated group</title> + <link rel="author" title="Mirela Budăeș" href="mailto:mbudaes@adobe.com"> + <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> + <link rel="reviewer" title="Mihai Balan" href="mailto:mibalan@adobe.com"> + <link rel="reviewer" title="Rik Cabanier" href="mailto:cabanier@adobe.com"> + <meta name="assert" content="Test checks that properties that cause the creation of stacking context cause a group to be isolated"> + <link rel="match" href="reference/mix-blend-mode-stacking-context-creates-isolation-ref.html"> + <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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-svg.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-svg.html new file mode 100644 index 0000000000..b7b9f89e92 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-svg.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: SVG element is blended.</title> + <link rel="author" title="Mihai Tica" href="mailto:mitica@adobe.com"> + <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> + <meta name="assert" content="Test checks that an SVG element blends with the parent container."> + <meta name="flags" content="svg"> + <meta name="fuzzy" content="0-1;0-10"> + <link rel="reviewer" title="Rik Cabanier" href="mailto:cabanier@adobe.com"> + <link rel="reviewer" title="Mirela Budaes" href="mailto:mbudaes@adobe.com"> + <link rel="match" href="reference/mix-blend-mode-svg-ref.html"> + <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" height="100" style="mix-blend-mode: difference;"> + <rect width="100" height="100" style="fill: #F00;"> + </svg> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-video-sibling.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-video-sibling.html new file mode 100644 index 0000000000..87d7d1eac6 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-video-sibling.html @@ -0,0 +1,31 @@ +<!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 rel="author" title="Mirela Budăeș" href="mailto:mbudaes@adobe.com"> + <link rel="author" title="Mihai Tica" href="mailto:mitica@adobe.com"> + <link rel="reviewer" title="Mihai Balan" href="mailto:mibalan@adobe.com"> + <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> + <meta name="assert" content="Test checks that a video element blends with an overlapping sibling element with some text inside"> + <link rel="mismatch" href="reference/mix-blend-mode-video-sibling-notref.html"> + <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 type="video/mp4" src="support/red_circle.mp4"> + </video> + <div>Some text inside the div.</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-video.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-video.html new file mode 100644 index 0000000000..298ba99080 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-video.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: Video element with mix-blend-mode.</title> + <link rel="author" title="Mihai Tica" href="mailto:mitica@adobe.com"> + <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> + <meta name="assert" content="Test checks that mix-blend-mode is applied to a video element."> + <link rel="reviewer" title="Rik Cabanier" href="mailto:cabanier@adobe.com"> + <link rel="reviewer" title="Mirela Budaes" href="mailto:mbudaes@adobe.com"> + <link rel="mismatch" href="reference/mix-blend-mode-video-notref.html"> + <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 style="mix-blend-mode: difference"> + <source src="support/red_circle.mp4" type="video/mp4"> + </video> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-with-transform-and-preserve-3D.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-with-transform-and-preserve-3D.html new file mode 100644 index 0000000000..6d27a40ff2 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-with-transform-and-preserve-3D.html @@ -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 rel="author" title="Mirela Budăeș" href="mailto:mbudaes@adobe.com"> + <link rel="author" title="Ion Roșca" href="mailto:rosca@adobe.com"> + <link rel="reviewer" title="Mihai Țică" href="mailto:mitica@adobe.com"> + <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode"> + <meta name="assert" content="Test checks that mix-blend-mode overrides the behavior of transform-style:preserve-3d"> + <meta name="fuzzy" content="0-50;0-300"> + <link rel="match" href="reference/mix-blend-mode-with-transform-and-preserve-3D-ref.html"> + <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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/green-square.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/green-square.html new file mode 100644 index 0000000000..bfc4f715ef --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/green-square.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Mirela Budăeș" href="mailto:mbudaes@adobe.com"> + <link rel="author" title="Mihai Tica" href="mailto:mitica@adobe.com"> + <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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-animation-ref.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-animation-ref.html new file mode 100644 index 0000000000..1dc65d8131 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-animation-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: Blended element with animation</title> + <link rel="author" title="Mihai Tica" href="mailto:mitica@adobe.com"> + <style type="text/css"> + div { + width: 100px; + height: 100px; + background: #FF0; + } + + @keyframes changeOpacity + { + from { opacity: 0.9; } + 50% { opacity: 0.9; } + to { opacity: 0.1; } + } + + #blender { + background: #0F0; + animation: changeOpacity 10s; + } + </style> + </head> + <body> + <p>Test passes if you can see a fading green box after 5 seconds.</p> + <div><div id="blender"></div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-blended-element-overflow-hidden-and-border-radius-ref.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-blended-element-overflow-hidden-and-border-radius-ref.html new file mode 100644 index 0000000000..32e73e7fe9 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-blended-element-overflow-hidden-and-border-radius-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Mirela Budăeș" href="mailto:mbudaes@adobe.com"> + <link rel="author" title="Ion Roșca" href="mailto:rosca@adobe.com"> + <link rel="reviewer" title="Mihai Țică" href="mailto:mitica@adobe.com"> + <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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-blended-element-overflow-scroll-ref.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-blended-element-overflow-scroll-ref.html new file mode 100644 index 0000000000..12bc979025 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-blended-element-overflow-scroll-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Mirela Budăeș" href="mailto:mbudaes@adobe.com"> + <link rel="author" title="Ion Roșca" href="mailto:rosca@adobe.com"> + <link rel="reviewer" title="Mihai Țică" href="mailto:mitica@adobe.com"> + <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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-blended-element-with-transparent-pixels-ref.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-blended-element-with-transparent-pixels-ref.html new file mode 100644 index 0000000000..ee77433640 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-blended-element-with-transparent-pixels-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Mihai Tica" href="mailto:mitica@adobe.com"> + <link rel="reviewer" title="Mihai Balan" href="mailto:mibalan@adobe.com"> + <link rel="reviewer" title="Horia Olaru" href="mailto:olaru@adobe.com"> + <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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-blended-with-3D-transform-ref.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-blended-with-3D-transform-ref.html new file mode 100644 index 0000000000..83ee7deef1 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-blended-with-3D-transform-ref.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Mirela Budăeș" href="mailto:mbudaes@adobe.com"> + <link rel="author" title="Ion Roșca" href="mailto:rosca@adobe.com"> + <link rel="reviewer" title="Mihai Țică" href="mailto:mitica@adobe.com"> + <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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-blended-with-transform-and-perspective-ref.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-blended-with-transform-and-perspective-ref.html new file mode 100644 index 0000000000..3219d0f65e --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-blended-with-transform-and-perspective-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Mirela Budăeș" href="mailto:mbudaes@adobe.com"> + <link rel="author" title="Ion Roșca" href="mailto:rosca@adobe.com"> + <link rel="reviewer" title="Mihai Țică" href="mailto:mitica@adobe.com"> + <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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-border-image-ref.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-border-image-ref.html new file mode 100644 index 0000000000..9f12587738 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-border-image-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: Blended element with border image</title> + <link rel="author" title="Mihai Tica" href="mailto:mitica@adobe.com"> + <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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-both-parent-and-blended-with-3D-transform-ref.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-both-parent-and-blended-with-3D-transform-ref.html new file mode 100644 index 0000000000..b59802a229 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-both-parent-and-blended-with-3D-transform-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Mirela Budăeș" href="mailto:mbudaes@adobe.com"> + <link rel="author" title="Ion Roșca" href="mailto:rosca@adobe.com"> + <link rel="reviewer" title="Mihai Țică" href="mailto:mitica@adobe.com"> + <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; + } + p { + will-change: transform; + } + </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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-canvas-parent-ref.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-canvas-parent-ref.html new file mode 100644 index 0000000000..44a9f48aac --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-canvas-parent-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: Canvas with mix-blend-mode blends with the parent element.</title> + <link rel="author" title="Mihai Tica" href="mailto:mitica@adobe.com"> + </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;"> + </body> +</html> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-canvas-sibling-ref.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-canvas-sibling-ref.html new file mode 100644 index 0000000000..cf4ce40117 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-canvas-sibling-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: Canvas with mix-blend-mode blends with sibling element</title> + <link rel="author" title="Mihai Tica" href="mailto:mitica@adobe.com"> + </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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-filter-ref.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-filter-ref.html new file mode 100644 index 0000000000..282d525753 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-filter-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: Blended element with filter.</title> + <link rel="author" title="Mihai Tica" href="mailto:mitica@adobe.com"> + <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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-iframe-parent-ref.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-iframe-parent-ref.html new file mode 100644 index 0000000000..f1c8e9d105 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-iframe-parent-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: an iframe element with mix-blend-mode should blend with its parent element.</title> + <link rel="author" title="Mihai Tica" href="mailto:mitica@adobe.com"> + </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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-iframe-sibling-ref.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-iframe-sibling-ref.html new file mode 100644 index 0000000000..0be26410ce --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-iframe-sibling-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: an iframe element with mix-blend-mode should blend with a sibling element.</title> + <link rel="author" title="Mihai Tica" href="mailto:mitica@adobe.com"> + </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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-image-notref.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-image-notref.html new file mode 100644 index 0000000000..963697d84b --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-image-notref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: Image element with mix-blend-mode.</title> + <link rel="author" title="Mihai Tica" href="mailto:mitica@adobe.com"> + <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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-intermediate-element-overflow-hidden-and-border-radius-ref.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-intermediate-element-overflow-hidden-and-border-radius-ref.html new file mode 100644 index 0000000000..96ac8b3e31 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-intermediate-element-overflow-hidden-and-border-radius-ref.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Mirela Budăeș" href="mailto:mbudaes@adobe.com"> + <link rel="author" title="Ion Roșca" href="mailto:rosca@adobe.com"> + <link rel="reviewer" title="Mihai Țică" href="mailto:mitica@adobe.com"> + <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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-mask-ref.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-mask-ref.html new file mode 100644 index 0000000000..530a5d5ec7 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-mask-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: Blended element with masking.</title> + <link rel="author" title="Mihai Tica" href="mailto:mitica@adobe.com"> + </head> + <style type="text/css"> + div { + width: 100px; + height: 100px; + } + </style> + <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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-overflowing-child-ref.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-overflowing-child-ref.html new file mode 100644 index 0000000000..a083cbc532 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-overflowing-child-ref.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Mihai Tica" href="mailto:mitica@adobe.com"> + <link rel="reviewer" title="Mihai Balan" href="mailto:mibalan@adobe.com"> + <link rel="reviewer" title="Horia Olaru" href="mailto:olaru@adobe.com"> + <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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-paragraph-background-image-ref.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-paragraph-background-image-ref.html new file mode 100644 index 0000000000..3a89df453b --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-paragraph-background-image-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: Paragraph element with mix-blend-mode over parent with background image.</title> + <link rel="author" title="Mihai Tica" href="mailto:mitica@adobe.com"> + <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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-paragraph-ref.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-paragraph-ref.html new file mode 100644 index 0000000000..dc8b21654a --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-paragraph-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: Paragraph element with mix-blend-mode.</title> + <link rel="author" title="Mihai Tica" href="mailto:mitica@adobe.com"> + <meta name="assert" content="Test checks that test a paragraph element blends with the parent element."> + <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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-parent-element-overflow-hidden-and-border-radius-ref.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-parent-element-overflow-hidden-and-border-radius-ref.html new file mode 100644 index 0000000000..d415624f20 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-parent-element-overflow-hidden-and-border-radius-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Mirela Budăeș" href="mailto:mbudaes@adobe.com"> + <link rel="author" title="Ion Roșca" href="mailto:rosca@adobe.com"> + <link rel="reviewer" title="Mihai Țică" href="mailto:mitica@adobe.com"> + <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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-parent-element-overflow-scroll-blended-position-fixed-ref.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-parent-element-overflow-scroll-blended-position-fixed-ref.html new file mode 100644 index 0000000000..fd780ee3cc --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-parent-element-overflow-scroll-blended-position-fixed-ref.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Mirela Budăeș" href="mailto:mbudaes@adobe.com"> + <link rel="author" title="Ion Roșca" href="mailto:rosca@adobe.com"> + <link rel="reviewer" title="Mihai Țică" href="mailto:mitica@adobe.com"> + <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 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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-parent-element-overflow-scroll-ref.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-parent-element-overflow-scroll-ref.html new file mode 100644 index 0000000000..1e583b349c --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-parent-element-overflow-scroll-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Mirela Budăeș" href="mailto:mbudaes@adobe.com"> + <link rel="author" title="Ion Roșca" href="mailto:rosca@adobe.com"> + <link rel="reviewer" title="Mihai Țică" href="mailto:mitica@adobe.com"> + <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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-parent-with-3D-transform-ref.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-parent-with-3D-transform-ref.html new file mode 100644 index 0000000000..d512e70d6c --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-parent-with-3D-transform-ref.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Mirela Budăeș" href="mailto:mbudaes@adobe.com"> + <link rel="author" title="Ion Roșca" href="mailto:rosca@adobe.com"> + <link rel="reviewer" title="Mihai Țică" href="mailto:mitica@adobe.com"> + <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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-parent-with-border-radius-ref.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-parent-with-border-radius-ref.html new file mode 100644 index 0000000000..68e97ecff9 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-parent-with-border-radius-ref.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Mirela Budăeș" href="mailto:mbudaes@adobe.com"> + <link rel="author" title="Mihai Tica" href="mailto:mitica@adobe.com"> + <link rel="reviewer" title="Mihai Balan" href="mailto:mibalan@adobe.com"> + <link rel="reviewer" title="Horia Olaru" href="mailto:olaru@adobe.com"> + <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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-parent-with-text-ref.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-parent-with-text-ref.html new file mode 100644 index 0000000000..275105c5db --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-parent-with-text-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Mirela Budăeș" href="mailto:mbudaes@adobe.com"> + <link rel="author" title="Mihai Tica" href="mailto:mitica@adobe.com"> + <link rel="reviewer" title="Mihai Balan" href="mailto:mibalan@adobe.com"> + <link rel="reviewer" title="Horia Olaru" href="mailto:olaru@adobe.com"> + <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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-plus-lighter-basic-ref.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-plus-lighter-basic-ref.html new file mode 100644 index 0000000000..e5acd26b6f --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-plus-lighter-basic-ref.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<title>mix-blend-mode: plus-lighter test</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.fxtf.org/compositing-2/#mix-blend-mode"> + +<style> +.container { + isolation: isolate; + position: relative; + width: 500px; + height: 500px; +} +.blue { background: #000064; } +.green { background: #006400; } +.common { + position: absolute; + width: 100px; + height: 100px; + opacity: 0.6; +} +.one { + top: 10px; + left: 10px; +} +.two { + top: 65px; + left: 30px; +} +.three { + top: 120px; + left: 50px; +} +.one_and_two { + position: absolute; + width: 80px; + height: 45px; + top: 65px; + left: 30px; + background: #000078; +} +.two_and_three { + position: absolute; + width: 80px; + height: 45px; + top: 120px; + left: 50px; + background: #003C3C; +} +</style> + +<div class=container> + <div class="one common blue"></div> + <div class="two common blue"></div> + <div class="three common green"></div> + <div class="one_and_two"></div> + <div class="two_and_three"></div> +</div> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-plus-lighter-ref.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-plus-lighter-ref.html new file mode 100644 index 0000000000..4709ab8b68 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-plus-lighter-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<title>mix-blend-mode: plus-lighter test</title> +<link rel="author" title="Jake Archibald" href="mailto:jakearchibald@chromium.org"> +<link rel="help" href="https://drafts.fxtf.org/compositing-2/#mix-blend-mode"> +<style> + .test { + width: 100px; + height: 100px; + } +</style> +<script type="module"> + import { tests, plusLighter } from '../../support/plus-lighter.js'; + import { toCSSColor } from '../../support/utils.js'; + + for (const colors of tests) { + document.body.insertAdjacentHTML('beforeend', ` + <div class="test" style="background-color: ${toCSSColor(plusLighter(colors))}"></div> + `); + } +</script> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-plus-lighter-svg-basic-ref.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-plus-lighter-svg-basic-ref.html new file mode 100644 index 0000000000..9193bb574b --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-plus-lighter-svg-basic-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<title>mix-blend-mode: plus-lighter SVG test</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.fxtf.org/compositing-2/#mix-blend-mode"> + +<style> +.isolate { isolation: isolate; } +.original { opacity: 0.6; } +</style> + +<svg width=500 height=500> + <g class="isolate"> + <rect class="original" x="10" y="10" width="100" height="100" fill="#000064"></rect> + <rect class="original" x="30" y="65" width="100" height="100" fill="#000064"></rect> + <rect class="original" x="50" y="120" width="100" height="100" fill="#006400"></rect> + <rect x="30" y="65" width="80" height="45" fill="#000078"></rect> + <rect x="50" y="120" width="80" height="45" fill="#003C3C"></rect> + </g> +</svg> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-plus-lighter-svg-ref.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-plus-lighter-svg-ref.html new file mode 100644 index 0000000000..8e1cb70759 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-plus-lighter-svg-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<title>mix-blend-mode: plus-lighter SVG test</title> +<link rel="author" title="Jake Archibald" href="mailto:jakearchibald@chromium.org"> +<link rel="help" href="https://drafts.fxtf.org/compositing-2/#mix-blend-mode"> +<script type="module"> + import { tests, plusLighter } from '../../support/plus-lighter.js'; + import { toCSSColor } from '../../support/utils.js'; + + for (const colors of tests) { + document.body.insertAdjacentHTML('beforeend', ` + <svg width="100" height="100" style="background-color: ${toCSSColor(plusLighter(colors))}"></svg> + `); + } +</script> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-rotated-clip-ref.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-rotated-clip-ref.html new file mode 100644 index 0000000000..377ed7c879 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-rotated-clip-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<div style="width: 100px; height: 100px; background: lime"></div> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-script-ref.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-script-ref.html new file mode 100644 index 0000000000..b18ed6cd3c --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-script-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: Set mix-blend-mode from script.</title> + <link rel="author" title="Mihai Tica" href="mailto:mitica@adobe.com"> + <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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-sibling-with-3D-transform-ref.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-sibling-with-3D-transform-ref.html new file mode 100644 index 0000000000..146f7b6307 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-sibling-with-3D-transform-ref.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Mirela Budăeș" href="mailto:mbudaes@adobe.com"> + <link rel="author" title="Ion Roșca" href="mailto:rosca@adobe.com"> + <link rel="reviewer" title="Mihai Țică" href="mailto:mitica@adobe.com"> + <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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-stacking-context-001-ref.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-stacking-context-001-ref.html new file mode 100644 index 0000000000..9b0710acec --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-stacking-context-001-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Mirela Budăeș" href="mailto:mbudaes@adobe.com"> + <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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-stacking-context-creates-isolation-ref.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-stacking-context-creates-isolation-ref.html new file mode 100644 index 0000000000..806abe25e8 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-stacking-context-creates-isolation-ref.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Mirela Budăeș" href="mailto:mbudaes@adobe.com"> + <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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-svg-ref.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-svg-ref.html new file mode 100644 index 0000000000..2ebde9167c --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-svg-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: SVG element is blended.</title> + <link rel="author" title="Mihai Tica" href="mailto:mitica@adobe.com"> + <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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-video-notref.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-video-notref.html new file mode 100644 index 0000000000..43b8e11e5a --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-video-notref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: Video element with mix-blend-mode.</title> + <link rel="author" title="Mihai Tica" href="mailto:mitica@adobe.com"> + <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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-video-sibling-notref.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-video-sibling-notref.html new file mode 100644 index 0000000000..f42bb53f26 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-video-sibling-notref.html @@ -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 rel="author" title="Mirela Budăeș" href="mailto:mbudaes@adobe.com"> + <link rel="author" title="Mihai Tica" href="mailto:mitica@adobe.com"> + <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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-with-transform-and-preserve-3D-ref.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-with-transform-and-preserve-3D-ref.html new file mode 100644 index 0000000000..cb92384720 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/reference/mix-blend-mode-with-transform-and-preserve-3D-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Mirela Budăeș" href="mailto:mbudaes@adobe.com"> + <link rel="author" title="Ion Roșca" href="mailto:rosca@adobe.com"> + <link rel="reviewer" title="Mihai Țică" href="mailto:mitica@adobe.com"> + <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> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/support/RGB_Circles.mov b/testing/web-platform/tests/css/compositing/mix-blend-mode/support/RGB_Circles.mov Binary files differnew file mode 100644 index 0000000000..08e6b499cc --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/support/RGB_Circles.mov diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/support/RGB_Circles.mp4 b/testing/web-platform/tests/css/compositing/mix-blend-mode/support/RGB_Circles.mp4 Binary files differnew file mode 100644 index 0000000000..0d0ac933ec --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/support/RGB_Circles.mp4 diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/support/RGB_Circles.oggtheora.ogv b/testing/web-platform/tests/css/compositing/mix-blend-mode/support/RGB_Circles.oggtheora.ogv Binary files differnew file mode 100644 index 0000000000..baed6e2f5d --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/support/RGB_Circles.oggtheora.ogv diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/support/RGB_Circles.webmhd.webm b/testing/web-platform/tests/css/compositing/mix-blend-mode/support/RGB_Circles.webmhd.webm Binary files differnew file mode 100644 index 0000000000..37e6862bca --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/support/RGB_Circles.webmhd.webm diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/support/RGB_Circles.webmsd.webm b/testing/web-platform/tests/css/compositing/mix-blend-mode/support/RGB_Circles.webmsd.webm Binary files differnew file mode 100644 index 0000000000..51337c7cff --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/support/RGB_Circles.webmsd.webm diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/support/red.png b/testing/web-platform/tests/css/compositing/mix-blend-mode/support/red.png Binary files differnew file mode 100644 index 0000000000..acc86d4770 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/support/red.png diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/support/red_circle.mp4 b/testing/web-platform/tests/css/compositing/mix-blend-mode/support/red_circle.mp4 Binary files differnew file mode 100644 index 0000000000..ff251316a5 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/support/red_circle.mp4 diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/support/red_circle.svg b/testing/web-platform/tests/css/compositing/mix-blend-mode/support/red_circle.svg new file mode 100644 index 0000000000..3a8050ec30 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/support/red_circle.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> + <circle cx="50" cy="50" r="40" fill="#F00"/> +</svg> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/support/red_square.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/support/red_square.html new file mode 100644 index 0000000000..05bac7a135 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/support/red_square.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<html> +<body> + <div style="width: 100px; height: 100px; background: #F00;"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/support/red_square.svg b/testing/web-platform/tests/css/compositing/mix-blend-mode/support/red_square.svg new file mode 100644 index 0000000000..a078e6b731 --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/support/red_square.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> + <rect width="100" height="100" style="fill:rgb(255,0,0);"/> +</svg> diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/support/yellow_square.svg b/testing/web-platform/tests/css/compositing/mix-blend-mode/support/yellow_square.svg new file mode 100644 index 0000000000..9ab6394e2a --- /dev/null +++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/support/yellow_square.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> + <rect width="100" height="100" style="fill:rgb(255,255,0);"/> +</svg> |
