| Index: LayoutTests/animations/keyframes-invalid-keys.html
|
| diff --git a/LayoutTests/animations/keyframes-invalid-keys.html b/LayoutTests/animations/keyframes-invalid-keys.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..c84de502c162750f08202ac358a0f556b2c3497d
|
| --- /dev/null
|
| +++ b/LayoutTests/animations/keyframes-invalid-keys.html
|
| @@ -0,0 +1,52 @@
|
| +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
| + "http://www.w3.org/TR/html4/loose.dtd">
|
| +
|
| +<html lang="en">
|
| +<head>
|
| + <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
| + <title>Keyframes with invalid keys</title>
|
| + <style type="text/css" media="screen">
|
| + @-webkit-keyframes "anim" {
|
| + 0, from { left: 100px; }
|
| + fromto { left: 100px; }
|
| + 50% { left: 3px; }
|
| + 60%, unknown { left: 100px; }
|
| + 100 { left: 100px; }
|
| + }
|
| + #box {
|
| + position: absolute;
|
| + left: 3px;
|
| + top: 100px;
|
| + height: 100px;
|
| + width: 100px;
|
| + background-color: blue;
|
| + -webkit-animation-duration: 1s;
|
| + -webkit-animation-timing-function: linear;
|
| + -webkit-animation-name: "anim";
|
| + }
|
| +
|
| + </style>
|
| + <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
|
| + <script type="text/javascript" charset="utf-8">
|
| +
|
| + const expectedValues = [
|
| + // [animation-name, time, element-id, property, expected-value, tolerance]
|
| + ["anim", 0.2, "box", "left", 3, 1],
|
| + ["anim", 0.8, "box", "left", 3, 1],
|
| + ];
|
| +
|
| + runAnimationTest(expectedValues);
|
| +
|
| + </script>
|
| +</head>
|
| +<body>
|
| +This test performs an animation of the left property. It should always remain 3px, unless there are
|
| +errors during parsing, resulting in other values in keyframes with bad keys.
|
| +Four of the keyframes contain invalid keys, and should be discarded altogether
|
| +("If a keyframe selector specifies negative percentage values or values higher than 100%, then the keyframe will be ignored", see <a href="http://www.w3.org/TR/css3-animations/#keyframes">http://www.w3.org/TR/css3-animations/#keyframes</a>).
|
| +<div id="box">
|
| +</div>
|
| +<div id="result">
|
| +</div>
|
| +</body>
|
| +</html>
|
|
|