| Index: LayoutTests/animations/keyframes-invalid-keys.html
|
| diff --git a/LayoutTests/animations/keyframes.html b/LayoutTests/animations/keyframes-invalid-keys.html
|
| similarity index 51%
|
| copy from LayoutTests/animations/keyframes.html
|
| copy to LayoutTests/animations/keyframes-invalid-keys.html
|
| index 5205a2265645cd5746001e8ef5bca684d898d19a..d4285825184bfeff16b533555bd063936da665ff 100644
|
| --- a/LayoutTests/animations/keyframes.html
|
| +++ b/LayoutTests/animations/keyframes-invalid-keys.html
|
| @@ -4,11 +4,26 @@
|
| <html lang="en">
|
| <head>
|
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
| - <title>Keyframes test</title>
|
| + <title>Keyframes with invalid keys</title>
|
| <style type="text/css" media="screen">
|
| + @-webkit-keyframes "anim" {
|
| + 50% { left: 3px; }
|
| +
|
| + /* Out-of-range percentage values */
|
| + -10% { left: 100px; }
|
| + -10%, from { left: 100px; }
|
| + from, 110% { left: 100px; }
|
| + 110% { left: 100px; }
|
| +
|
| + /* Invalid keys (numbers and identifiers) */
|
| + 0, from { left: 100px; }
|
| + fromto { left: 100px; }
|
| + 60%, unknown { left: 100px; }
|
| + 100 { left: 100px; }
|
| + }
|
| #box {
|
| position: absolute;
|
| - left: 0;
|
| + left: 3px;
|
| top: 100px;
|
| height: 100px;
|
| width: 100px;
|
| @@ -17,31 +32,26 @@
|
| -webkit-animation-timing-function: linear;
|
| -webkit-animation-name: "anim";
|
| }
|
| - @-webkit-keyframes "anim" {
|
| - from { left: 50px; }
|
| - 20% { left: 100px; }
|
| - 40% { left: 100px; }
|
| - 60% { left: 200px; }
|
| - 80% { left: 200px; }
|
| - to { left: 300px; }
|
| - }
|
| +
|
| </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.3, "box", "left", 100, 1],
|
| - ["anim", 0.7, "box", "left", 200, 1],
|
| + ["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 stop for 100ms at 100px and 200px
|
| -We test for those values 50ms after it has stopped at each position.
|
| +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">
|
|
|