blob: 6307babbdcb8275e1cb06b3014a284c25986a48e [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<style>
.box {
height: 100px;
width: 100px;
margin: 10px;
background-color: blue;
display: inline-block;
}
#brightness {
-webkit-animation: brightness-anim 2s linear;
}
#blur {
-webkit-animation: blur-anim 2s linear;
}
#grayscale {
-webkit-animation: grayscale-anim 2s linear;
}
#sepia {
-webkit-animation: sepia-anim 2s linear;
}
#no {
-webkit-animation: no-anim 2s linear;
}
#multiple1 {
-webkit-animation: multiple-anim1 2s linear;
}
#multiple2 {
-webkit-animation: multiple-anim2 2s linear;
}
#urlfilter {
-webkit-animation: url-to-filter-anim 2s linear;
}
#filterurl {
-webkit-animation: filter-to-url-anim 2s linear;
}
#filterdiffurl {
-webkit-animation: filter-diff-url-anim 2s linear;
}
#generated1 {
-webkit-animation: generated-anim1 2s linear;
}
#generated2 {
-webkit-animation: generated-anim2 2s linear;
}
@-webkit-keyframes brightness-anim {
from { background-image: filter(url(resources/image.svg), brightness(1)); }
to { background-image: filter(url(resources/image.svg), brightness(0)); }
}
@-webkit-keyframes blur-anim {
from { background-image: filter(url(resources/image.svg), blur(0)); }
to { background-image: filter(url(resources/image.svg), blur(10px)); }
}
@-webkit-keyframes grayscale-anim {
from { background-image: filter(url(resources/image.svg), grayscale(1)); }
to { background-image: filter(url(resources/image.svg), grayscale(0)); }
}
@-webkit-keyframes sepia-anim {
from { background-image: filter(url(resources/image.svg), sepia(1)); }
to { background-image: filter(url(resources/image.svg), sepia(0)); }
}
@-webkit-keyframes no-anim {
from { background-image: filter(url(resources/image.svg), sepia(1)); }
to { background-image: filter(url(resources/blue.svg), sepia(0)); }
}
@-webkit-keyframes multiple-anim1 {
from { background-image: filter(url(resources/image.svg), sepia(0.25) blur(3px) hue-rotate(45deg)); }
to { background-image: filter(url(resources/image.svg), sepia(0.75)); }
}
@-webkit-keyframes multiple-anim2 {
from { background-image: filter(url(resources/image.svg), contrast(0.25)); }
to { background-image: filter(url(resources/image.svg), contrast(0.75) blur(3px) hue-rotate(45deg)); }
}
@-webkit-keyframes url-to-filter-anim {
from { background-image: url(resources/image.svg); }
to { background-image: filter(url(resources/image.svg), sepia(0.5)); }
}
@-webkit-keyframes filter-to-url-anim {
from { background-image: filter(url(resources/image.svg), sepia(0.5)); }
to { background-image: url(resources/image.svg); }
}
@-webkit-keyframes filter-diff-url-anim {
from { background-image: url(resources/image.svg); }
to { background-image: filter(url(resources/blue.svg), sepia(0.5)); }
}
@-webkit-keyframes generated-anim1 {
from { background-image: filter(filter(url(resources/image.svg), blur(3px)), sepia(1)); }
to { background-image: filter(filter(url(resources/image.svg), blur(3px)), sepia(0)); }
}
@-webkit-keyframes generated-anim2 {
from { background-image: filter(-webkit-cross-fade(url(resources/image.svg), url(resources/image.svg), 50%), sepia(1)); }
to { background-image: filter(-webkit-cross-fade(url(resources/image.svg), url(resources/image.svg), 50%), sepia(0)); }
}
</style>
<script src="../../animations/resources/animation-test-helpers.js"></script>
<script type="text/javascript">
const expectedValues = [
// [animation-name, time, element-id, property, expected-value, tolerance]
["brightness-anim", 1, "brightness", "backgroundImage", "filter(url(image.svg), brightness(0.5))", 0.05],
["blur-anim", 1, "blur", "backgroundImage", "filter(url(image.svg), blur(5px))", 0.05],
["grayscale-anim", 1, "grayscale", "backgroundImage", "filter(url(image.svg), grayscale(0.5))", 0.05],
["sepia-anim", 1, "sepia", "backgroundImage", "filter(url(image.svg), sepia(0.5))", 0.05],
["no-anim", 1, "no", "backgroundImage", "filter(url(blue.svg), sepia(0))", 0],
["multiple-anim1", 1, "multiple1", "backgroundImage", "filter(url(image.svg), sepia(0.5) blur(1.5px) hue-rotate(22.5deg))", 0.05],
["multiple-anim2", 1, "multiple2", "backgroundImage", "filter(url(image.svg), contrast(0.5) blur(1.5px) hue-rotate(22.5deg))", 0.05],
["url-to-filter-anim", 1, "urlfilter", "backgroundImage", " filter(url(image.svg), sepia(0.25))", 0.05],
["filter-to-url-anim", 1, "filterurl", "backgroundImage", " filter(url(image.svg), sepia(0.25))", 0.05],
["filter-diff-url-anim", 1, "filterdiffurl", "backgroundImage", " filter(url(blue.svg), sepia(0.5))", 0],
// FIXME: We need to support generated images as input to other generated images for animations first.
["generated-anim1", 1, "generated1", "backgroundImage", "filter(filter(url(image.svg), blur(3px)), sepia(0))", 0],
["generated-anim2", 1, "generated2", "backgroundImage", "filter(-webkit-cross-fade(url(image.svg), url(image.svg), 50%), sepia(0))", 0],
];
runAnimationTest(expectedValues);
</script>
</head>
<body>
<div class="box" id="brightness"></div>
<div class="box" id="blur"></div>
<div class="box" id="grayscale"></div>
<div class="box" id="sepia"></div>
<div class="box" id="no"></div>
<div class="box" id="multiple1"></div>
<div class="box" id="multiple2"></div>
<div class="box" id="urlfilter"></div>
<div class="box" id="filterurl"></div>
<div class="box" id="filterdiffurl"></div>
<div class="box" id="generated1"></div>
<div class="box" id="generated2"></div>
<div id="result">
</div>
</body>
</html>