145 lines
4.1 KiB
HTML
145 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html>
|
|
<head>
|
|
<style>
|
|
.box {
|
|
height: 100px;
|
|
width: 100px;
|
|
margin: 10px;
|
|
background-color: blue;
|
|
display: inline-block;
|
|
-webkit-transform:translateZ(0);
|
|
-webkit-animation-duration:2s !important;
|
|
}
|
|
|
|
#grayscale-box {
|
|
-webkit-animation: grayscale-anim 2s linear
|
|
}
|
|
|
|
#sepia-box {
|
|
-webkit-animation: sepia-anim 2s linear
|
|
}
|
|
|
|
#saturate-box {
|
|
-webkit-animation: saturate-anim 2s linear
|
|
}
|
|
|
|
#huerotate-box {
|
|
-webkit-animation: huerotate-anim 2s linear
|
|
}
|
|
|
|
#invert-box {
|
|
-webkit-animation: invert-anim 2s linear
|
|
}
|
|
|
|
#opacity-box {
|
|
-webkit-animation: opacity-anim 2s linear
|
|
}
|
|
|
|
#brightness-box {
|
|
-webkit-animation: brightness-anim 2s linear
|
|
}
|
|
|
|
#contrast-box {
|
|
-webkit-animation: contrast-anim 2s linear
|
|
}
|
|
|
|
#blur-box {
|
|
-webkit-animation: blur-anim 2s linear
|
|
}
|
|
|
|
#dropshadow-box {
|
|
-webkit-animation: dropshadow-anim 2s linear
|
|
}
|
|
|
|
|
|
@-webkit-keyframes grayscale-anim {
|
|
from { -webkit-filter: grayscale(0); }
|
|
to { -webkit-filter: grayscale(1); }
|
|
}
|
|
|
|
@-webkit-keyframes sepia-anim {
|
|
from { -webkit-filter: sepia(0); }
|
|
to { -webkit-filter: sepia(1); }
|
|
}
|
|
|
|
@-webkit-keyframes saturate-anim {
|
|
from { -webkit-filter: saturate(0); }
|
|
to { -webkit-filter: saturate(1); }
|
|
}
|
|
|
|
@-webkit-keyframes huerotate-anim {
|
|
from { -webkit-filter: hue-rotate(0); }
|
|
to { -webkit-filter: hue-rotate(180deg); }
|
|
}
|
|
|
|
@-webkit-keyframes invert-anim {
|
|
from { -webkit-filter: invert(0); }
|
|
to { -webkit-filter: invert(1); }
|
|
}
|
|
|
|
@-webkit-keyframes opacity-anim {
|
|
from { -webkit-filter: opacity(1); }
|
|
to { -webkit-filter: opacity(0); }
|
|
}
|
|
|
|
@-webkit-keyframes brightness-anim {
|
|
from { -webkit-filter: brightness(1); }
|
|
to { -webkit-filter: brightness(0); }
|
|
}
|
|
|
|
@-webkit-keyframes contrast-anim {
|
|
from { -webkit-filter: contrast(1); }
|
|
to { -webkit-filter: contrast(0); }
|
|
}
|
|
|
|
@-webkit-keyframes blur-anim {
|
|
from { -webkit-filter: blur(0); }
|
|
to { -webkit-filter: blur(20px); }
|
|
}
|
|
|
|
@-webkit-keyframes dropshadow-anim {
|
|
from { -webkit-filter: drop-shadow(0 0 0 transparent); }
|
|
to { -webkit-filter: drop-shadow(20px 30px 10px black)); }
|
|
}
|
|
|
|
</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]
|
|
["grayscale-anim", 1, "grayscale-box", "webkitFilter", 'grayscale(0.5)', 0.05],
|
|
["sepia-anim", 1, "sepia-box", "webkitFilter", 'sepia(0.5)', 0.05],
|
|
["saturate-anim", 1, "saturate-box", "webkitFilter", 'saturate(0.5)', 0.05],
|
|
["huerotate-anim", 1, "huerotate-box", "webkitFilter", 'hue-rotate(90deg)', 2],
|
|
["invert-anim", 1, "invert-box", "webkitFilter", 'invert(0.5)', 0.05],
|
|
["opacity-anim", 1, "opacity-box", "webkitFilter", 'opacity(0.5)', 0.05],
|
|
["brightness-anim", 1, "brightness-box", "webkitFilter", 'brightness(0.5)', 0.05],
|
|
["contrast-anim", 1, "contrast-box", "webkitFilter", 'contrast(0.5)', 0.05],
|
|
["blur-anim", 1, "blur-box", "webkitFilter", 'blur(10px)', 1],
|
|
// FIXME when we implement computed filter style for drop-shadow.
|
|
// ["dropshadow-anim", 1, "dropshadow-box", "webkitFilter", 'drop-shadow(rgba(0, 0, 0, 0.5) 10px 15px 5px )', 2],
|
|
];
|
|
|
|
runAnimationTest(expectedValues);
|
|
</script>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="box" id="grayscale-box"></div>
|
|
<div class="box" id="sepia-box"></div>
|
|
<div class="box" id="saturate-box"></div>
|
|
<div class="box" id="huerotate-box"></div>
|
|
<div class="box" id="invert-box"></div>
|
|
<div class="box" id="opacity-box"></div>
|
|
<div class="box" id="brightness-box"></div>
|
|
<div class="box" id="contrast-box"></div>
|
|
<div class="box" id="blur-box"></div>
|
|
<!-- <div class="box" id="dropshadow-box"></div> -->
|
|
|
|
<div id="result">
|
|
</div>
|
|
</body>
|
|
</html>
|