163 lines
5.9 KiB
HTML
163 lines
5.9 KiB
HTML
<!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>
|