diff options
Diffstat (limited to 'testing/web-platform/tests/css/compositing/mix-blend-mode/reference')
39 files changed, 1096 insertions, 0 deletions
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> |