mirror of
https://github.com/servo/servo.git
synced 2025-09-06 13:08:21 +01:00
Update web-platform-tests to revision 58b72393db0bd273bb93268c33666cf893feb985
This commit is contained in:
Josh Matthews
parent
43a4f01647
commit
64e0a52537
12717 changed files with 59835 additions and 59820 deletions
|
|
@ -0,0 +1,35 @@
|
|||
<!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.">
|
||||
<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: 1; }
|
||||
to { opacity: 0.1; }
|
||||
}
|
||||
|
||||
#blender {
|
||||
background: #F00;
|
||||
mix-blend-mode: difference;
|
||||
animation: changeOpacity 1s;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a fading green box.</p>
|
||||
<div><div id="blender"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,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="flags" content=""/>
|
||||
<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>
|
||||
|
|
@ -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="flags" content="">
|
||||
<meta name="assert" content="Test checks that an element having mix-blend-mode, overflow:hidden and border-radius blends correctly with its parent element.">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: blending between an element and its child having overflow:scroll</title>
|
||||
<link 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="">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: blending between an element with transparent pixels and a child element</title>
|
||||
<link 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.">
|
||||
<meta name="flags" content=""/>
|
||||
<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>
|
||||
|
|
@ -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="flags" content="">
|
||||
<meta name="assert" content="Test checks that the element with mix-blend-mode and 3D transform blends correctly with its parent">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: blending between an element and its child having mix-blend-mode and perspective</title>
|
||||
<link 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="">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: mix-blend-mode between an element and its sibling</title>
|
||||
<link 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">
|
||||
<meta name="flags" content=""/>
|
||||
<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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: mix-blend-mode between an element and its child (both with 3D transform) </title>
|
||||
<link 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="">
|
||||
<meta name="assert" content="Test checks that the element with mix-blend-mode blends with the parent element (both with 3D transform)">
|
||||
<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;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see a fuchsia square overlapping an aqua square. <br>
|
||||
The overlapping area should be yellow. </p>
|
||||
<div class="parent">
|
||||
<div class="blended">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Canvas with mix-blend-mode blends with the parent element.</title>
|
||||
<link 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"/>
|
||||
<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>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!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"/>
|
||||
<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>
|
||||
|
|
@ -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_true(blenderStyle.zIndex !== "auto");
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</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>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: an iframe element with mix-blend-mode should blend with its parent element.</title>
|
||||
<link 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.">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: an iframe element with mix-blend-mode should blend with a sibling element.</title>
|
||||
<link 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.">
|
||||
<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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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="flags" content="">
|
||||
<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.">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!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">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!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.">
|
||||
<meta name="flags" content=""/>
|
||||
<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>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!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.">
|
||||
<meta name="flags" content=""/>
|
||||
<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>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!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">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!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.">
|
||||
<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>
|
||||
|
|
@ -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="flags" content="">
|
||||
<meta name="assert" content="Test checks that an element having mix-blend-mode blends with the parent element having overflow:hidden and border-radius">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: blending between an element having overflow:scroll and its child having position: fixed</title>
|
||||
<link 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="">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: blending between an element with overflow:scroll and its child</title>
|
||||
<link 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="">
|
||||
<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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: mix-blend-mode between an element with 3D transform and its child</title>
|
||||
<link 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="">
|
||||
<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>
|
||||
|
|
@ -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="flags" content=""/>
|
||||
<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>
|
||||
|
|
@ -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="flags" content=""/>
|
||||
<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>
|
||||
|
|
@ -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"];
|
||||
|
||||
for (var i = 0; i < blendModes.length; i++) {
|
||||
test(function() {assert_equals(testParse("mix-blend-mode: " + blendModes[i]), blendModes[i] )}, "Mix-blend-mode " + blendModes[i]);
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Set mix-blend-mode from script.</title>
|
||||
<link 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"/>
|
||||
<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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: blending between an element and its sibling element having 3D transform</title>
|
||||
<link 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="">
|
||||
<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>
|
||||
|
|
@ -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="flags" content=""/>
|
||||
<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>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: mix-blend-mode between an element and its child</title>
|
||||
<link 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="">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!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="flags" content="">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!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">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Blended element with transition</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 transition applied on opacity blends with the parent element.">
|
||||
<meta name="flags" content="dom"/>
|
||||
<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-transition-ref.html">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: #FF0;
|
||||
}
|
||||
|
||||
#blender {
|
||||
background: #F00;
|
||||
mix-blend-mode: difference;
|
||||
transition: opacity 1s ease;
|
||||
}
|
||||
|
||||
.opaqueBox {
|
||||
opacity: 0.4;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a fading green rectangle.</p>
|
||||
<div><div id="blender"></div></div>
|
||||
<script type="text/javascript">
|
||||
setInterval(function(){ document.getElementById('blender').className = 'opaqueBox'; }, 100);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: mix-blend-mode blending between a video element and an overlapping sibling</title>
|
||||
<link 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">
|
||||
<meta name="flags" content=""/>
|
||||
<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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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="flags" content="">
|
||||
<meta name="assert" content="Test checks that mix-blend-mode overrides the behavior of transform-style:preserve-3d">
|
||||
<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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!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: 1; }
|
||||
to { opacity: 0.1; }
|
||||
}
|
||||
|
||||
#blender {
|
||||
background: #0F0;
|
||||
animation: changeOpacity 1s;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a fading green box.</p>
|
||||
<div><div id="blender"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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">
|
||||
.parent {
|
||||
background: aqua;/*rgb(0,255,255);*/
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
padding-top: 1px;
|
||||
transform:rotateX(20deg);
|
||||
}
|
||||
.blended {
|
||||
background: fuchsia;/*rgb(255,0,255);*/
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
transform:rotateX(20deg);
|
||||
}
|
||||
.childOfBlended {
|
||||
background: yellow;/*rgb(255,255,0);*/
|
||||
width: 120px;
|
||||
height: 122px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see a fuchsia square overlapping an aqua square. <br>
|
||||
The overlapping area should be yellow. </p>
|
||||
<div class="parent">
|
||||
<div class="blended">
|
||||
<div class="childOfBlended"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Canvas with mix-blend-mode blends with the parent element.</title>
|
||||
<link 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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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 a bigger aqua container. <br>
|
||||
The aqua container should have scrollbars on the left and bottom.</p>
|
||||
<div class="parent">
|
||||
<div class="blended"></div>
|
||||
<div class="scrollableContent"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Blended element with transition</title>
|
||||
<link rel="author" title="Mihai Tica" href="mailto:mitica@adobe.com">
|
||||
<meta name="flags" content="dom"/>
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#blender {
|
||||
background: #0F0;
|
||||
transition: opacity 1s ease;
|
||||
}
|
||||
|
||||
.opaqueBox {
|
||||
opacity: 0.4;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you can see a fading green rectangle.</p>
|
||||
<div style="background: #FF0;"><div id="blender"></div></div>
|
||||
<script type="text/javascript">
|
||||
setInterval(function(){ document.getElementById('blender').className = 'opaqueBox'; }, 100);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Video element with mix-blend-mode.</title>
|
||||
<link 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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 111 B |
|
|
@ -0,0 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body>
|
||||
<div style="width: 100px; height: 100px; background: #F00;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 126 B |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 128 B |
Loading…
Add table
Add a link
Reference in a new issue