Commit 69eba886 authored by Eric Willigers's avatar Eric Willigers Committed by Commit Bot

Shard animations/animations-parsing.html

The test has taken more than ten seconds to run in recent
debug builds.

We shard the test to avoid flakes, for example when running
under virtual/threaded.

BUG=757868

Change-Id: I0ca84820bafb5be00c3f39a0aa4dc95d45134be2
Reviewed-on: https://chromium-review.googlesource.com/722480Reviewed-by: default avatarBugs Nash <bugsnash@chromium.org>
Commit-Queue: Eric Willigers <ericwilligers@chromium.org>
Cr-Commit-Position: refs/heads/master@{#510271}
parent 140f8ce0
......@@ -3377,8 +3377,6 @@ crbug.com/686118 virtual/mojo-loading/http/tests/security/contentSecurityPolicy/
crbug.com/686118 http/tests/security/contentSecurityPolicy/register-bypassing-scheme-script.https.html [ Pass Crash ]
crbug.com/686118 virtual/mojo-loading/http/tests/security/contentSecurityPolicy/register-bypassing-scheme-script.https.html [ Pass Crash ]
crbug.com/757868 [ Linux ] virtual/threaded/animations/animations-parsing.html [ Pass Failure ]
# Tests currently failing on Windows when run on Swarming
crbug.com/757165 [ Win ] compositing/culling/filter-occlusion-blur.html [ Skip ]
crbug.com/757165 [ Win ] css3/blending/mix-blend-mode-with-filters.html [ Skip ]
......
<!DOCTYPE html>
<html>
<head>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
</head>
<body>
<div>
<div style="width:500px;height:500px"><div id="test">hello</div></div>
</div>
<script>
'use strict';
// Test the parsing and the computed style values of the animations properties.
var e = document.getElementById('test');
var style = e.style;
var computedStyle = window.getComputedStyle(e, null);
test(() => {
// Test initial value.
assert_equals(computedStyle.animationName, 'none');
assert_equals(computedStyle.webkitAnimationName, 'none');
style.animationName = "none";
assert_not_equals(Object.keys(style).indexOf('animationName'), -1);
assert_equals(Object.keys(style).indexOf('webkitAnimationName'), -1);
assert_equals(style.animationName, 'none');
assert_equals(computedStyle.animationName, 'none');
assert_equals(style.webkitAnimationName, 'none');
assert_equals(computedStyle.webkitAnimationName, 'none');
style.animationName = "none, none";
assert_equals(style.animationName, 'none, none');
assert_equals(computedStyle.animationName, 'none, none');
assert_equals(style.webkitAnimationName, 'none, none');
assert_equals(computedStyle.webkitAnimationName, 'none, none');
style.animationName = "myAnim";
assert_equals(style.animationName, 'myAnim');
assert_equals(computedStyle.animationName, 'myAnim');
assert_equals(style.webkitAnimationName, 'myAnim');
assert_equals(computedStyle.webkitAnimationName, 'myAnim');
style.animationName = "background-position, font-size";
assert_equals(style.animationName, 'background-position, font-size');
assert_equals(computedStyle.animationName, 'background-position, font-size');
assert_equals(style.webkitAnimationName, 'background-position, font-size');
assert_equals(computedStyle.webkitAnimationName, 'background-position, font-size');
style.animationName = "background-position, font-size, color";
assert_equals(style.animationName, 'background-position, font-size, color');
assert_equals(computedStyle.animationName, 'background-position, font-size, color');
assert_equals(style.webkitAnimationName, 'background-position, font-size, color');
assert_equals(computedStyle.webkitAnimationName, 'background-position, font-size, color');
style.animationName = "all, font-size, color";
assert_equals(style.animationName, 'all, font-size, color');
assert_equals(computedStyle.animationName, 'all, font-size, color');
assert_equals(style.webkitAnimationName, 'all, font-size, color');
assert_equals(computedStyle.webkitAnimationName, 'all, font-size, color');
style.animationName = "inherit";
assert_equals(style.animationName, 'inherit');
assert_equals(computedStyle.animationName, 'none');
assert_equals(style.webkitAnimationName, 'inherit');
assert_equals(computedStyle.webkitAnimationName, 'none');
style.animationName = "initial";
assert_equals(style.animationName, 'initial');
assert_equals(computedStyle.animationName, 'none');
assert_equals(style.webkitAnimationName, 'initial');
assert_equals(computedStyle.webkitAnimationName, 'none');
}, "Valid animation-name values.");
test(() => {
style.animationName = "";
style.animationName = "0";
assert_equals(style.animationName, '');
assert_equals(computedStyle.animationName, 'none');
assert_equals(style.webkitAnimationName, '');
assert_equals(computedStyle.webkitAnimationName, 'none');
style.animationName = "all none";
assert_equals(style.animationName, '');
assert_equals(computedStyle.animationName, 'none');
assert_equals(style.webkitAnimationName, '');
assert_equals(computedStyle.webkitAnimationName, 'none');
style.animationName = "opacity width";
assert_equals(style.animationName, '');
assert_equals(computedStyle.animationName, 'none');
assert_equals(style.webkitAnimationName, '');
assert_equals(computedStyle.webkitAnimationName, 'none');
style.animationName = "";
}, "Invalid animation-name values.");
test(() => {
// Test initial value.
assert_equals(computedStyle.animationDuration, '0s');
assert_equals(computedStyle.webkitAnimationDuration, '0s');
style.animationDuration = "0s";
assert_not_equals(Object.keys(style).indexOf('animationDuration'), -1);
assert_equals(Object.keys(style).indexOf('webkitAnimationDuration'), -1);
assert_equals(style.animationDuration, '0s');
assert_equals(computedStyle.animationDuration, '0s');
assert_equals(style.webkitAnimationDuration, '0s');
assert_equals(computedStyle.webkitAnimationDuration, '0s');
style.animationDuration = "5s";
assert_equals(style.animationDuration, '5s');
assert_equals(computedStyle.animationDuration, '5s');
assert_equals(style.webkitAnimationDuration, '5s');
assert_equals(computedStyle.webkitAnimationDuration, '5s');
style.animationDuration = "10ms";
assert_equals(style.animationDuration, '10ms');
assert_equals(computedStyle.animationDuration, '0.01s');
assert_equals(style.webkitAnimationDuration, '10ms');
assert_equals(computedStyle.webkitAnimationDuration, '0.01s');
style.animationDuration = "10ms, 20s";
assert_equals(style.animationDuration, '10ms, 20s');
assert_equals(computedStyle.animationDuration, '0.01s, 20s');
assert_equals(style.webkitAnimationDuration, '10ms, 20s');
assert_equals(computedStyle.webkitAnimationDuration, '0.01s, 20s');
}, "Valid animation-duration values.");
test(() => {
style.animationDuration = "";
// Negative values are invalid.
style.animationDuration = "-10ms";
assert_equals(style.animationDuration, '');
assert_equals(computedStyle.animationDuration, '0s');
assert_equals(style.webkitAnimationDuration, '');
assert_equals(computedStyle.webkitAnimationDuration, '0s');
style.animationDuration = "'5ms'";
assert_equals(style.animationDuration, '');
assert_equals(computedStyle.animationDuration, '0s');
assert_equals(style.webkitAnimationDuration, '');
assert_equals(computedStyle.webkitAnimationDuration, '0s');
style.animationDuration = "30px";
assert_equals(style.animationDuration, '');
assert_equals(computedStyle.animationDuration, '0s');
assert_equals(style.webkitAnimationDuration, '');
assert_equals(computedStyle.webkitAnimationDuration, '0s');
style.animationDuration = "solid";
assert_equals(style.animationDuration, '');
assert_equals(computedStyle.animationDuration, '0s');
assert_equals(style.webkitAnimationDuration, '');
assert_equals(computedStyle.webkitAnimationDuration, '0s');
style.animationDuration = "20";
assert_equals(style.animationDuration, '');
assert_equals(computedStyle.animationDuration, '0s');
assert_equals(style.webkitAnimationDuration, '');
assert_equals(computedStyle.webkitAnimationDuration, '0s');
style.animationDuration = "20%";
assert_equals(style.animationDuration, '');
assert_equals(computedStyle.animationDuration, '0s');
assert_equals(style.webkitAnimationDuration, '');
assert_equals(computedStyle.webkitAnimationDuration, '0s');
style.animationDuration = "0s, 20px";
assert_equals(style.animationDuration, '');
assert_equals(computedStyle.animationDuration, '0s');
assert_equals(style.webkitAnimationDuration, '');
assert_equals(computedStyle.webkitAnimationDuration, '0s');
}, "Invalid animation-duration values.");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
</head>
<body>
<div>
<div style="width:500px;height:500px"><div id="test">hello</div></div>
</div>
<script>
'use strict';
// Test the parsing and the computed style values of the animations properties.
var e = document.getElementById('test');
var style = e.style;
var computedStyle = window.getComputedStyle(e, null);
test(() => {
// Test initial value.
assert_equals(computedStyle.animationTimingFunction, 'ease');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease');
style.animationTimingFunction = "linear";
assert_not_equals(Object.keys(style).indexOf('animationTimingFunction'), -1);
assert_equals(Object.keys(style).indexOf('webkitAnimationTimingFunction'), -1);
assert_equals(style.animationTimingFunction, 'linear');
assert_equals(computedStyle.animationTimingFunction, 'linear');
assert_equals(style.webkitAnimationTimingFunction, 'linear');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'linear');
style.animationTimingFunction = "ease";
assert_equals(style.animationTimingFunction, 'ease');
assert_equals(computedStyle.animationTimingFunction, 'ease');
assert_equals(style.webkitAnimationTimingFunction, 'ease');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease');
style.animationTimingFunction = "ease-in";
assert_equals(style.animationTimingFunction, 'ease-in');
assert_equals(computedStyle.animationTimingFunction, 'ease-in');
assert_equals(style.webkitAnimationTimingFunction, 'ease-in');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease-in');
style.animationTimingFunction = "ease-out";
assert_equals(style.animationTimingFunction, 'ease-out');
assert_equals(computedStyle.animationTimingFunction, 'ease-out');
assert_equals(style.webkitAnimationTimingFunction, 'ease-out');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease-out');
style.animationTimingFunction = "ease-in-out";
assert_equals(style.animationTimingFunction, 'ease-in-out');
assert_equals(computedStyle.animationTimingFunction, 'ease-in-out');
assert_equals(style.webkitAnimationTimingFunction, 'ease-in-out');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease-in-out');
style.animationTimingFunction = "cubic-bezier(0.25, 0.1, 0.25, 1)";
assert_equals(style.animationTimingFunction, 'cubic-bezier(0.25, 0.1, 0.25, 1)');
assert_equals(computedStyle.animationTimingFunction, 'cubic-bezier(0.25, 0.1, 0.25, 1)');
assert_equals(style.webkitAnimationTimingFunction, 'cubic-bezier(0.25, 0.1, 0.25, 1)');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'cubic-bezier(0.25, 0.1, 0.25, 1)');
style.animationTimingFunction = "cubic-bezier(0.1, 0, 0.23, 0.4)";
assert_equals(style.animationTimingFunction, 'cubic-bezier(0.1, 0, 0.23, 0.4)');
assert_equals(computedStyle.animationTimingFunction, 'cubic-bezier(0.1, 0, 0.23, 0.4)');
assert_equals(style.webkitAnimationTimingFunction, 'cubic-bezier(0.1, 0, 0.23, 0.4)');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'cubic-bezier(0.1, 0, 0.23, 0.4)');
style.animationTimingFunction = "cubic-bezier(0.1, 0, 0.23, 3)";
assert_equals(style.animationTimingFunction, 'cubic-bezier(0.1, 0, 0.23, 3)');
assert_equals(computedStyle.animationTimingFunction, 'cubic-bezier(0.1, 0, 0.23, 3)');
assert_equals(style.webkitAnimationTimingFunction, 'cubic-bezier(0.1, 0, 0.23, 3)');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'cubic-bezier(0.1, 0, 0.23, 3)');
style.animationTimingFunction = "cubic-bezier(0.1, 5, 0.23, 3)";
assert_equals(style.animationTimingFunction, 'cubic-bezier(0.1, 5, 0.23, 3)');
assert_equals(computedStyle.animationTimingFunction, 'cubic-bezier(0.1, 5, 0.23, 3)');
assert_equals(style.webkitAnimationTimingFunction, 'cubic-bezier(0.1, 5, 0.23, 3)');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'cubic-bezier(0.1, 5, 0.23, 3)');
style.animationTimingFunction = "cubic-bezier(0.1, 5, 0.23, 0)";
assert_equals(style.animationTimingFunction, 'cubic-bezier(0.1, 5, 0.23, 0)');
assert_equals(computedStyle.animationTimingFunction, 'cubic-bezier(0.1, 5, 0.23, 0)');
assert_equals(style.webkitAnimationTimingFunction, 'cubic-bezier(0.1, 5, 0.23, 0)');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'cubic-bezier(0.1, 5, 0.23, 0)');
style.animationTimingFunction = "cubic-bezier(0.2, 2, 0.2, -0.4)";
assert_equals(style.animationTimingFunction, 'cubic-bezier(0.2, 2, 0.2, -0.4)');
assert_equals(computedStyle.animationTimingFunction, 'cubic-bezier(0.2, 2, 0.2, -0.4)');
assert_equals(style.webkitAnimationTimingFunction, 'cubic-bezier(0.2, 2, 0.2, -0.4)');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'cubic-bezier(0.2, 2, 0.2, -0.4)');
style.animationTimingFunction = "cubic-bezier(0.2, -2, 0.2, 0.4)";
assert_equals(style.animationTimingFunction, 'cubic-bezier(0.2, -2, 0.2, 0.4)');
assert_equals(computedStyle.animationTimingFunction, 'cubic-bezier(0.2, -2, 0.2, 0.4)');
assert_equals(style.webkitAnimationTimingFunction, 'cubic-bezier(0.2, -2, 0.2, 0.4)');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'cubic-bezier(0.2, -2, 0.2, 0.4)');
style.animationTimingFunction = "step-start";
assert_equals(style.animationTimingFunction, 'step-start');
assert_equals(computedStyle.animationTimingFunction, 'step-start');
assert_equals(style.webkitAnimationTimingFunction, 'step-start');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'step-start');
style.animationTimingFunction = "step-end";
assert_equals(style.animationTimingFunction, 'step-end');
assert_equals(computedStyle.animationTimingFunction, 'step-end');
assert_equals(style.webkitAnimationTimingFunction, 'step-end');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'step-end');
style.animationTimingFunction = "steps(3)";
assert_equals(style.animationTimingFunction, 'steps(3, end)');
assert_equals(computedStyle.animationTimingFunction, 'steps(3, end)');
assert_equals(style.webkitAnimationTimingFunction, 'steps(3, end)');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'steps(3, end)');
style.animationTimingFunction = "steps(4, end)";
assert_equals(style.animationTimingFunction, 'steps(4, end)');
assert_equals(computedStyle.animationTimingFunction, 'steps(4, end)');
assert_equals(style.webkitAnimationTimingFunction, 'steps(4, end)');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'steps(4, end)');
style.animationTimingFunction = "steps(5, start)";
assert_equals(style.animationTimingFunction, 'steps(5, start)');
assert_equals(computedStyle.animationTimingFunction, 'steps(5, start)');
assert_equals(style.webkitAnimationTimingFunction, 'steps(5, start)');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'steps(5, start)');
style.animationTimingFunction = "frames(5)";
assert_equals(style.animationTimingFunction, 'frames(5)');
assert_equals(computedStyle.animationTimingFunction, 'frames(5)');
assert_equals(style.webkitAnimationTimingFunction, 'frames(5)');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'frames(5)');
style.animationName = "anim1, anim2";
style.animationTimingFunction = "ease-in-out, ease-in";
assert_equals(style.animationTimingFunction, 'ease-in-out, ease-in');
assert_equals(computedStyle.animationTimingFunction, 'ease-in-out, ease-in');
assert_equals(style.webkitAnimationTimingFunction, 'ease-in-out, ease-in');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease-in-out, ease-in');
style.animationTimingFunction = "ease-in-out, cubic-bezier(0.1, 0, 0.23, 0.4)";
assert_equals(style.animationTimingFunction, 'ease-in-out, cubic-bezier(0.1, 0, 0.23, 0.4)');
assert_equals(computedStyle.animationTimingFunction, 'ease-in-out, cubic-bezier(0.1, 0, 0.23, 0.4)');
assert_equals(style.webkitAnimationTimingFunction, 'ease-in-out, cubic-bezier(0.1, 0, 0.23, 0.4)');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease-in-out, cubic-bezier(0.1, 0, 0.23, 0.4)');
style.animationTimingFunction = "steps(3, start), ease-in-out";
assert_equals(style.animationTimingFunction, 'steps(3, start), ease-in-out');
assert_equals(computedStyle.animationTimingFunction, 'steps(3, start), ease-in-out');
assert_equals(style.webkitAnimationTimingFunction, 'steps(3, start), ease-in-out');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'steps(3, start), ease-in-out');
}, "Valid animation-timing-function values.");
test(() => {
style.animationName = "";
style.animationTimingFunction = "";
style.animationTimingFunction = "cubic-bezier(3, 0.1, 4, 1)";
assert_equals(style.animationTimingFunction, '');
assert_equals(computedStyle.animationTimingFunction, 'ease');
assert_equals(style.webkitAnimationTimingFunction, '');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease');
style.animationTimingFunction = "cubic-bezier(1, 0.1, 3, 1)";
assert_equals(style.animationTimingFunction, '');
assert_equals(computedStyle.animationTimingFunction, 'ease');
assert_equals(style.webkitAnimationTimingFunction, '');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease');
style.animationTimingFunction = "cubic-bezier(0.1, 0, 4, 0.4)";
assert_equals(style.animationTimingFunction, '');
assert_equals(computedStyle.animationTimingFunction, 'ease');
assert_equals(style.webkitAnimationTimingFunction, '');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease');
style.animationTimingFunction = "cubic-bezier(3, 0, 4, 0.4)";
assert_equals(style.animationTimingFunction, '');
assert_equals(computedStyle.animationTimingFunction, 'ease');
assert_equals(style.webkitAnimationTimingFunction, '');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease');
style.animationTimingFunction = "cubic-bezier(3, 0, 0.2, 0.4)";
assert_equals(style.animationTimingFunction, '');
assert_equals(computedStyle.animationTimingFunction, 'ease');
assert_equals(style.webkitAnimationTimingFunction, '');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease');
style.animationTimingFunction = "cubic-bezier(-0.2, 0, 0.2, 0.4)";
assert_equals(style.animationTimingFunction, '');
assert_equals(computedStyle.animationTimingFunction, 'ease');
assert_equals(style.webkitAnimationTimingFunction, '');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease');
style.animationTimingFunction = "cubic-bezier(0.2, 2, -0.2, 0.4)";
assert_equals(style.animationTimingFunction, '');
assert_equals(computedStyle.animationTimingFunction, 'ease');
assert_equals(style.webkitAnimationTimingFunction, '');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease');
style.animationTimingFunction = "steps(5, 3)";
assert_equals(style.animationTimingFunction, '');
assert_equals(computedStyle.animationTimingFunction, 'ease');
assert_equals(style.webkitAnimationTimingFunction, '');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease');
style.animationTimingFunction = "steps(-5, start)";
assert_equals(style.animationTimingFunction, '');
assert_equals(computedStyle.animationTimingFunction, 'ease');
assert_equals(style.webkitAnimationTimingFunction, '');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease');
style.animationTimingFunction = "steps(5, start, end)";
assert_equals(style.animationTimingFunction, '');
assert_equals(computedStyle.animationTimingFunction, 'ease');
assert_equals(style.webkitAnimationTimingFunction, '');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease');
style.animationTimingFunction = "step(5)";
assert_equals(style.animationTimingFunction, '');
assert_equals(computedStyle.animationTimingFunction, 'ease');
assert_equals(style.webkitAnimationTimingFunction, '');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease');
style.animationTimingFunction = "frame(5)";
assert_equals(style.animationTimingFunction, '');
assert_equals(computedStyle.animationTimingFunction, 'ease');
assert_equals(style.webkitAnimationTimingFunction, '');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease');
style.animationTimingFunction = "frames(1)";
assert_equals(style.animationTimingFunction, '');
assert_equals(computedStyle.animationTimingFunction, 'ease');
assert_equals(style.webkitAnimationTimingFunction, '');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease');
style.animationTimingFunction = "frames(2, 3)";
assert_equals(style.animationTimingFunction, '');
assert_equals(computedStyle.animationTimingFunction, 'ease');
assert_equals(style.webkitAnimationTimingFunction, '');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease');
style.animationTimingFunction = "red";
assert_equals(style.animationTimingFunction, '');
assert_equals(computedStyle.animationTimingFunction, 'ease');
assert_equals(style.webkitAnimationTimingFunction, '');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease');
style.animationTimingFunction = "cubic-bezier(0.25, 0.1, 0.25)";
assert_equals(style.animationTimingFunction, '');
assert_equals(computedStyle.animationTimingFunction, 'ease');
assert_equals(style.webkitAnimationTimingFunction, '');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease');
style.animationTimingFunction = "cubic-bezier(0.25, 0.1, 0.25, 1, 2)";
assert_equals(style.animationTimingFunction, '');
assert_equals(computedStyle.animationTimingFunction, 'ease');
assert_equals(style.webkitAnimationTimingFunction, '');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease');
style.animationTimingFunction = "cubic-foo(0.25, 0.1, 0.25, 1)";
assert_equals(style.animationTimingFunction, '');
assert_equals(computedStyle.animationTimingFunction, 'ease');
assert_equals(style.webkitAnimationTimingFunction, '');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease');
style.animationTimingFunction = "step-middle";
assert_equals(style.animationTimingFunction, 'step-middle');
assert_equals(computedStyle.animationTimingFunction, 'ease');
assert_equals(style.webkitAnimationTimingFunction, 'step-middle');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease');
style.animationTimingFunction = "steps(5, middle)";
assert_equals(style.animationTimingFunction, 'steps(5, middle)');
assert_equals(computedStyle.animationTimingFunction, 'ease');
assert_equals(style.webkitAnimationTimingFunction, 'steps(5, middle)');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease');
}, "Invalid animation-timing-function values.");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
</head>
<body>
<div>
<div style="width:500px;height:500px"><div id="test">hello</div></div>
</div>
<script>
'use strict';
// Test the parsing and the computed style values of the animations properties.
var e = document.getElementById('test');
var style = e.style;
var computedStyle = window.getComputedStyle(e, null);
test(() => {
// Test initial value.
assert_equals(computedStyle.animationDelay, '0s');
assert_equals(computedStyle.webkitAnimationDelay, '0s');
style.animationDelay = "0s";
assert_not_equals(Object.keys(style).indexOf('animationDelay'), -1);
assert_equals(Object.keys(style).indexOf('webkitAnimationDelay'), -1);
assert_equals(style.animationDelay, '0s');
assert_equals(computedStyle.animationDelay, '0s');
assert_equals(style.webkitAnimationDelay, '0s');
assert_equals(computedStyle.webkitAnimationDelay, '0s');
style.animationDelay = "5s";
assert_equals(style.animationDelay, '5s');
assert_equals(computedStyle.animationDelay, '5s');
assert_equals(style.webkitAnimationDelay, '5s');
assert_equals(computedStyle.webkitAnimationDelay, '5s');
style.animationDelay = "10ms";
assert_equals(style.animationDelay, '10ms');
assert_equals(computedStyle.animationDelay, '0.01s');
assert_equals(style.webkitAnimationDelay, '10ms');
assert_equals(computedStyle.webkitAnimationDelay, '0.01s');
style.animationDelay = "-10ms";
assert_equals(style.animationDelay, '-10ms');
assert_equals(computedStyle.animationDelay, '-0.01s');
assert_equals(style.webkitAnimationDelay, '-10ms');
assert_equals(computedStyle.webkitAnimationDelay, '-0.01s');
style.transitionProperty = "opacity, width";
style.animationDelay = "-10ms, 20s";
assert_equals(style.animationDelay, '-10ms, 20s');
assert_equals(computedStyle.animationDelay, '-0.01s, 20s');
assert_equals(style.webkitAnimationDelay, '-10ms, 20s');
assert_equals(computedStyle.webkitAnimationDelay, '-0.01s, 20s');
}, "Valid animation-delay values.");
test(() => {
style.transitionProperty = "opacity";
style.animationDelay = "";
style.animationDelay = "'5ms'";
assert_equals(style.animationDelay, '');
assert_equals(computedStyle.animationDelay, '0s');
assert_equals(style.webkitAnimationDelay, '');
assert_equals(computedStyle.webkitAnimationDelay, '0s');
style.animationDelay = "30px";
assert_equals(style.animationDelay, '');
assert_equals(computedStyle.animationDelay, '0s');
assert_equals(style.webkitAnimationDelay, '');
assert_equals(computedStyle.webkitAnimationDelay, '0s');
style.animationDelay = "solid";
assert_equals(style.animationDelay, '');
assert_equals(computedStyle.animationDelay, '0s');
assert_equals(style.webkitAnimationDelay, '');
assert_equals(computedStyle.webkitAnimationDelay, '0s');
style.animationDelay = "20";
assert_equals(style.animationDelay, '');
assert_equals(computedStyle.animationDelay, '0s');
assert_equals(style.webkitAnimationDelay, '');
assert_equals(computedStyle.webkitAnimationDelay, '0s');
style.animationDelay = "20%";
assert_equals(style.animationDelay, '');
assert_equals(computedStyle.animationDelay, '0s');
assert_equals(style.webkitAnimationDelay, '');
assert_equals(computedStyle.webkitAnimationDelay, '0s');
style.animationDelay = "0s, 20px";
assert_equals(style.animationDelay, '');
assert_equals(computedStyle.animationDelay, '0s');
assert_equals(style.webkitAnimationDelay, '');
assert_equals(computedStyle.webkitAnimationDelay, '0s');
}, "Invalid animation-delay values.");
test(() => {
// Test initial value.
assert_equals(computedStyle.animationIterationCount, '1');
assert_equals(computedStyle.webkitAnimationIterationCount, '1');
style.animationIterationCount = "4";
assert_not_equals(Object.keys(style).indexOf('animationIterationCount'), -1);
assert_equals(Object.keys(style).indexOf('webkitAnimationIterationCount'), -1);
assert_equals(style.animationIterationCount, '4');
assert_equals(computedStyle.animationIterationCount, '4');
assert_equals(style.webkitAnimationIterationCount, '4');
assert_equals(computedStyle.webkitAnimationIterationCount, '4');
style.animationIterationCount = "2.5";
assert_equals(style.animationIterationCount, '2.5');
assert_equals(computedStyle.animationIterationCount, '2.5');
assert_equals(style.webkitAnimationIterationCount, '2.5');
assert_equals(computedStyle.webkitAnimationIterationCount, '2.5');
style.animationIterationCount = "infinite";
assert_equals(style.animationIterationCount, 'infinite');
assert_equals(computedStyle.animationIterationCount, 'infinite');
assert_equals(style.webkitAnimationIterationCount, 'infinite');
assert_equals(computedStyle.webkitAnimationIterationCount, 'infinite');
style.animationIterationCount = "infinite, 3";
assert_equals(style.animationIterationCount, 'infinite, 3');
assert_equals(computedStyle.animationIterationCount, 'infinite, 3');
assert_equals(style.webkitAnimationIterationCount, 'infinite, 3');
assert_equals(computedStyle.webkitAnimationIterationCount, 'infinite, 3');
style.animationIterationCount = "0";
assert_equals(style.animationIterationCount, '0');
assert_equals(computedStyle.animationIterationCount, '0');
assert_equals(style.webkitAnimationIterationCount, '0');
assert_equals(computedStyle.webkitAnimationIterationCount, '0');
style.animationIterationCount = "infinite, infinite";
assert_equals(style.animationIterationCount, 'infinite, infinite');
assert_equals(computedStyle.animationIterationCount, 'infinite, infinite');
assert_equals(style.webkitAnimationIterationCount, 'infinite, infinite');
assert_equals(computedStyle.webkitAnimationIterationCount, 'infinite, infinite');
}, "Valid animation-iteration-count values.");
test(() => {
style.animationIterationCount = "";
style.animationIterationCount = "none";
assert_equals(style.animationIterationCount, '');
assert_equals(computedStyle.animationIterationCount, '1');
assert_equals(style.webkitAnimationIterationCount, '');
assert_equals(computedStyle.webkitAnimationIterationCount, '1');
style.animationIterationCount = "-3";
assert_equals(style.animationIterationCount, '');
assert_equals(computedStyle.animationIterationCount, '1');
assert_equals(style.webkitAnimationIterationCount, '');
assert_equals(computedStyle.webkitAnimationIterationCount, '1');
style.animationIterationCount = "infinite, -3";
assert_equals(style.animationIterationCount, '');
assert_equals(computedStyle.animationIterationCount, '1');
assert_equals(style.webkitAnimationIterationCount, '');
assert_equals(computedStyle.webkitAnimationIterationCount, '1');
style.animationIterationCount = "solid";
assert_equals(style.animationIterationCount, '');
assert_equals(computedStyle.animationIterationCount, '1');
assert_equals(style.webkitAnimationIterationCount, '');
assert_equals(computedStyle.webkitAnimationIterationCount, '1');
style.animationIterationCount = "-1, infinite";
assert_equals(style.animationIterationCount, '');
assert_equals(computedStyle.animationIterationCount, '1');
assert_equals(style.webkitAnimationIterationCount, '');
assert_equals(computedStyle.webkitAnimationIterationCount, '1');
style.animationIterationCount = "-1, 3";
assert_equals(style.animationIterationCount, '');
assert_equals(computedStyle.animationIterationCount, '1');
assert_equals(style.webkitAnimationIterationCount, '');
assert_equals(computedStyle.webkitAnimationIterationCount, '1');
}, "Invalid animation-iteration-count values.");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
</head>
<body>
<div>
<div style="width:500px;height:500px"><div id="test">hello</div></div>
</div>
<script>
'use strict';
// Test the parsing and the computed style values of the animations properties.
var e = document.getElementById('test');
var style = e.style;
var computedStyle = window.getComputedStyle(e, null);
test(() => {
// Test initial value.
assert_equals(computedStyle.animationDirection, 'normal');
assert_equals(computedStyle.webkitAnimationDirection, 'normal');
style.animationDirection = "reverse";
assert_not_equals(Object.keys(style).indexOf('animationDirection'), -1);
assert_equals(Object.keys(style).indexOf('webkitAnimationDirection'), -1);
assert_equals(style.animationDirection, 'reverse');
assert_equals(computedStyle.animationDirection, 'reverse');
assert_equals(style.webkitAnimationDirection, 'reverse');
assert_equals(computedStyle.webkitAnimationDirection, 'reverse');
style.animationDirection = "normal";
assert_equals(style.animationDirection, 'normal');
assert_equals(computedStyle.animationDirection, 'normal');
assert_equals(style.webkitAnimationDirection, 'normal');
assert_equals(computedStyle.webkitAnimationDirection, 'normal');
style.animationDirection = "normal, alternate";
assert_equals(style.animationDirection, 'normal, alternate');
assert_equals(computedStyle.animationDirection, 'normal, alternate');
assert_equals(style.webkitAnimationDirection, 'normal, alternate');
assert_equals(computedStyle.webkitAnimationDirection, 'normal, alternate');
style.animationDirection = "alternate";
assert_equals(style.animationDirection, 'alternate');
assert_equals(computedStyle.animationDirection, 'alternate');
assert_equals(style.webkitAnimationDirection, 'alternate');
assert_equals(computedStyle.webkitAnimationDirection, 'alternate');
style.animationDirection = "alternate-reverse";
assert_equals(style.animationDirection, 'alternate-reverse');
assert_equals(computedStyle.animationDirection, 'alternate-reverse');
assert_equals(style.webkitAnimationDirection, 'alternate-reverse');
assert_equals(computedStyle.webkitAnimationDirection, 'alternate-reverse');
}, "Valid animation-direction values.");
test(() => {
style.animationDirection = "";
style.animationDirection = "solid";
assert_equals(style.animationDirection, '');
assert_equals(computedStyle.animationDirection, 'normal');
assert_equals(style.webkitAnimationDirection, '');
assert_equals(computedStyle.webkitAnimationDirection, 'normal');
style.animationDirection = "0";
assert_equals(style.animationDirection, '');
assert_equals(computedStyle.animationDirection, 'normal');
assert_equals(style.webkitAnimationDirection, '');
assert_equals(computedStyle.webkitAnimationDirection, 'normal');
style.animationDirection = "3px";
assert_equals(style.animationDirection, '');
assert_equals(computedStyle.animationDirection, 'normal');
assert_equals(style.webkitAnimationDirection, '');
assert_equals(computedStyle.webkitAnimationDirection, 'normal');
style.animationDirection = "alternate-normal";
assert_equals(style.animationDirection, '');
assert_equals(computedStyle.animationDirection, 'normal');
assert_equals(style.webkitAnimationDirection, '');
assert_equals(computedStyle.webkitAnimationDirection, 'normal');
style.animationDirection = "3.5";
assert_equals(style.animationDirection, '');
assert_equals(computedStyle.animationDirection, 'normal');
assert_equals(style.webkitAnimationDirection, '');
assert_equals(computedStyle.webkitAnimationDirection, 'normal');
style.animationDirection = "3.5, reverse";
assert_equals(style.animationDirection, '');
assert_equals(computedStyle.animationDirection, 'normal');
assert_equals(style.webkitAnimationDirection, '');
assert_equals(computedStyle.webkitAnimationDirection, 'normal');
style.animationDirection = "reverse, solid";
assert_equals(style.animationDirection, '');
assert_equals(computedStyle.animationDirection, 'normal');
assert_equals(style.webkitAnimationDirection, '');
assert_equals(computedStyle.webkitAnimationDirection, 'normal');
}, "Invalid animation-direction values.");
test(() => {
// Test initial value.
assert_equals(computedStyle.animationPlayState, 'running');
assert_equals(computedStyle.webkitAnimationPlayState, 'running');
style.animationPlayState = "paused";
assert_not_equals(Object.keys(style).indexOf('animationPlayState'), -1);
assert_equals(Object.keys(style).indexOf('webkitAnimationPlayState'), -1);
assert_equals(style.animationPlayState, 'paused');
assert_equals(computedStyle.animationPlayState, 'paused');
assert_equals(style.webkitAnimationPlayState, 'paused');
assert_equals(computedStyle.webkitAnimationPlayState, 'paused');
style.animationPlayState = "running";
assert_equals(style.animationPlayState, 'running');
assert_equals(computedStyle.animationPlayState, 'running');
assert_equals(style.webkitAnimationPlayState, 'running');
assert_equals(computedStyle.webkitAnimationPlayState, 'running');
style.animationPlayState = "running, running";
assert_equals(style.animationPlayState, 'running, running');
assert_equals(computedStyle.animationPlayState, 'running, running');
assert_equals(style.webkitAnimationPlayState, 'running, running');
assert_equals(computedStyle.webkitAnimationPlayState, 'running, running');
style.animationPlayState = "paused, paused";
assert_equals(style.animationPlayState, 'paused, paused');
assert_equals(computedStyle.animationPlayState, 'paused, paused');
assert_equals(style.webkitAnimationPlayState, 'paused, paused');
assert_equals(computedStyle.webkitAnimationPlayState, 'paused, paused');
style.animationPlayState = "paused, running";
assert_equals(style.animationPlayState, 'paused, running');
assert_equals(computedStyle.animationPlayState, 'paused, running');
assert_equals(style.webkitAnimationPlayState, 'paused, running');
assert_equals(computedStyle.webkitAnimationPlayState, 'paused, running');
}, "Valid animation-play-state values.");
test(() => {
style.animationPlayState = "";
style.animationPlayState = "running3";
assert_equals(style.animationPlayState, '');
assert_equals(computedStyle.animationPlayState, 'running');
assert_equals(style.webkitAnimationPlayState, '');
assert_equals(computedStyle.webkitAnimationPlayState, 'running');
style.animationPlayState = "0";
assert_equals(style.animationPlayState, '');
assert_equals(computedStyle.animationPlayState, 'running');
assert_equals(style.webkitAnimationPlayState, '');
assert_equals(computedStyle.webkitAnimationPlayState, 'running');
style.animationPlayState = "solid";
assert_equals(style.animationPlayState, '');
assert_equals(computedStyle.animationPlayState, 'running');
assert_equals(style.webkitAnimationPlayState, '');
assert_equals(computedStyle.webkitAnimationPlayState, 'running');
style.animationPlayState = "20px";
assert_equals(style.animationPlayState, '');
assert_equals(computedStyle.animationPlayState, 'running');
assert_equals(style.webkitAnimationPlayState, '');
assert_equals(computedStyle.webkitAnimationPlayState, 'running');
style.animationPlayState = "all";
assert_equals(style.animationPlayState, '');
assert_equals(computedStyle.animationPlayState, 'running');
assert_equals(style.webkitAnimationPlayState, '');
assert_equals(computedStyle.webkitAnimationPlayState, 'running');
style.animationPlayState = "running, test";
assert_equals(style.animationPlayState, '');
assert_equals(computedStyle.animationPlayState, 'running');
assert_equals(style.webkitAnimationPlayState, '');
assert_equals(computedStyle.webkitAnimationPlayState, 'running');
style.animationPlayState = "all, paused";
assert_equals(style.animationPlayState, '');
assert_equals(computedStyle.animationPlayState, 'running');
assert_equals(style.webkitAnimationPlayState, '');
assert_equals(computedStyle.webkitAnimationPlayState, 'running');
}, "Invalid animation-play-state values.");
test(() => {
// Test initial value.
assert_equals(computedStyle.animationFillMode, 'none');
assert_equals(computedStyle.webkitAnimationFillMode, 'none');
style.animationFillMode = "forwards";
assert_not_equals(Object.keys(style).indexOf('animationFillMode'), -1);
assert_equals(Object.keys(style).indexOf('webkitAnimationFillMode'), -1);
assert_equals(style.animationFillMode, 'forwards');
assert_equals(computedStyle.animationFillMode, 'forwards');
assert_equals(style.webkitAnimationFillMode, 'forwards');
assert_equals(computedStyle.webkitAnimationFillMode, 'forwards');
style.animationFillMode = "backwards";
assert_equals(style.animationFillMode, 'backwards');
assert_equals(computedStyle.animationFillMode, 'backwards');
assert_equals(style.webkitAnimationFillMode, 'backwards');
assert_equals(computedStyle.webkitAnimationFillMode, 'backwards');
style.animationFillMode = "both";
assert_equals(style.animationFillMode, 'both');
assert_equals(computedStyle.animationFillMode, 'both');
assert_equals(style.webkitAnimationFillMode, 'both');
assert_equals(computedStyle.webkitAnimationFillMode, 'both');
style.animationFillMode = "none";
assert_equals(style.animationFillMode, 'none');
assert_equals(computedStyle.animationFillMode, 'none');
assert_equals(style.webkitAnimationFillMode, 'none');
assert_equals(computedStyle.webkitAnimationFillMode, 'none');
style.animationFillMode = "none, both";
assert_equals(style.animationFillMode, 'none, both');
assert_equals(computedStyle.animationFillMode, 'none, both');
assert_equals(style.webkitAnimationFillMode, 'none, both');
assert_equals(computedStyle.webkitAnimationFillMode, 'none, both');
style.animationFillMode = "backwards, forwards";
assert_equals(style.animationFillMode, 'backwards, forwards');
assert_equals(computedStyle.animationFillMode, 'backwards, forwards');
assert_equals(style.webkitAnimationFillMode, 'backwards, forwards');
assert_equals(computedStyle.webkitAnimationFillMode, 'backwards, forwards');
}, "Valid animation-fill-mode values.");
test(() => {
style.animationFillMode = "";
style.animationFillMode = "foo";
assert_equals(style.animationFillMode, '');
assert_equals(computedStyle.animationFillMode, 'none');
assert_equals(style.webkitAnimationFillMode, '');
assert_equals(computedStyle.webkitAnimationFillMode, 'none');
style.animationFillMode = "0";
assert_equals(style.animationFillMode, '');
assert_equals(computedStyle.animationFillMode, 'none');
assert_equals(style.webkitAnimationFillMode, '');
assert_equals(computedStyle.webkitAnimationFillMode, 'none');
style.animationFillMode = "-";
assert_equals(style.animationFillMode, '');
assert_equals(computedStyle.animationFillMode, 'none');
assert_equals(style.webkitAnimationFillMode, '');
assert_equals(computedStyle.webkitAnimationFillMode, 'none');
style.animationFillMode = "3px";
assert_equals(style.animationFillMode, '');
assert_equals(computedStyle.animationFillMode, 'none');
assert_equals(style.webkitAnimationFillMode, '');
assert_equals(computedStyle.webkitAnimationFillMode, 'none');
style.animationFillMode = "backwards, test";
assert_equals(style.animationFillMode, '');
assert_equals(computedStyle.animationFillMode, 'none');
assert_equals(style.webkitAnimationFillMode, '');
assert_equals(computedStyle.webkitAnimationFillMode, 'none');
style.animationFillMode = "test, all";
assert_equals(style.animationFillMode, '');
assert_equals(computedStyle.animationFillMode, 'none');
assert_equals(style.webkitAnimationFillMode, '');
assert_equals(computedStyle.webkitAnimationFillMode, 'none');
style.animationFillMode = "test, none";
assert_equals(style.animationFillMode, '');
assert_equals(computedStyle.animationFillMode, 'none');
assert_equals(style.webkitAnimationFillMode, '');
assert_equals(computedStyle.webkitAnimationFillMode, 'none');
style.animationFillMode = "forwards,";
assert_equals(style.animationFillMode, '');
}, "Invalid animation-fill-mode values.");
</script>
</body>
</html>
......@@ -24,855 +24,9 @@ function checkAnimationShorthandValue() {
return (computedStyle.getPropertyValue('animation') == before);
}
test(() => {
// Initial test.
assert_equals(computedStyle.animationName, 'none');
assert_equals(computedStyle.webkitAnimationName, 'none');
style.animationName = "none";
assert_not_equals(Object.keys(style).indexOf('animationName'), -1);
assert_equals(Object.keys(style).indexOf('webkitAnimationName'), -1);
assert_equals(style.animationName, 'none');
assert_equals(computedStyle.animationName, 'none');
assert_equals(style.webkitAnimationName, 'none');
assert_equals(computedStyle.webkitAnimationName, 'none');
style.animationName = "none, none";
assert_equals(style.animationName, 'none, none');
assert_equals(computedStyle.animationName, 'none, none');
assert_equals(style.webkitAnimationName, 'none, none');
assert_equals(computedStyle.webkitAnimationName, 'none, none');
style.animationName = "myAnim";
assert_equals(style.animationName, 'myAnim');
assert_equals(computedStyle.animationName, 'myAnim');
assert_equals(style.webkitAnimationName, 'myAnim');
assert_equals(computedStyle.webkitAnimationName, 'myAnim');
style.animationName = "background-position, font-size";
assert_equals(style.animationName, 'background-position, font-size');
assert_equals(computedStyle.animationName, 'background-position, font-size');
assert_equals(style.webkitAnimationName, 'background-position, font-size');
assert_equals(computedStyle.webkitAnimationName, 'background-position, font-size');
style.animationName = "background-position, font-size, color";
assert_equals(style.animationName, 'background-position, font-size, color');
assert_equals(computedStyle.animationName, 'background-position, font-size, color');
assert_equals(style.webkitAnimationName, 'background-position, font-size, color');
assert_equals(computedStyle.webkitAnimationName, 'background-position, font-size, color');
style.animationName = "all, font-size, color";
assert_equals(style.animationName, 'all, font-size, color');
assert_equals(computedStyle.animationName, 'all, font-size, color');
assert_equals(style.webkitAnimationName, 'all, font-size, color');
assert_equals(computedStyle.webkitAnimationName, 'all, font-size, color');
style.animationName = "inherit";
assert_equals(style.animationName, 'inherit');
assert_equals(computedStyle.animationName, 'none');
assert_equals(style.webkitAnimationName, 'inherit');
assert_equals(computedStyle.webkitAnimationName, 'none');
style.animationName = "initial";
assert_equals(style.animationName, 'initial');
assert_equals(computedStyle.animationName, 'none');
assert_equals(style.webkitAnimationName, 'initial');
assert_equals(computedStyle.webkitAnimationName, 'none');
}, "Valid animation-name values.");
test(() => {
style.animationName = "";
style.animationName = "0";
assert_equals(style.animationName, '');
assert_equals(computedStyle.animationName, 'none');
assert_equals(style.webkitAnimationName, '');
assert_equals(computedStyle.webkitAnimationName, 'none');
style.animationName = "all none";
assert_equals(style.animationName, '');
assert_equals(computedStyle.animationName, 'none');
assert_equals(style.webkitAnimationName, '');
assert_equals(computedStyle.webkitAnimationName, 'none');
style.animationName = "opacity width";
assert_equals(style.animationName, '');
assert_equals(computedStyle.animationName, 'none');
assert_equals(style.webkitAnimationName, '');
assert_equals(computedStyle.webkitAnimationName, 'none');
style.animationName = "";
}, "Invalid animation-name values.");
test(() => {
// Initial test.
assert_equals(computedStyle.animationDuration, '0s');
assert_equals(computedStyle.webkitAnimationDuration, '0s');
style.animationDuration = "0s";
assert_not_equals(Object.keys(style).indexOf('animationDuration'), -1);
assert_equals(Object.keys(style).indexOf('webkitAnimationDuration'), -1);
assert_equals(style.animationDuration, '0s');
assert_equals(computedStyle.animationDuration, '0s');
assert_equals(style.webkitAnimationDuration, '0s');
assert_equals(computedStyle.webkitAnimationDuration, '0s');
style.animationDuration = "5s";
assert_equals(style.animationDuration, '5s');
assert_equals(computedStyle.animationDuration, '5s');
assert_equals(style.webkitAnimationDuration, '5s');
assert_equals(computedStyle.webkitAnimationDuration, '5s');
style.animationDuration = "10ms";
assert_equals(style.animationDuration, '10ms');
assert_equals(computedStyle.animationDuration, '0.01s');
assert_equals(style.webkitAnimationDuration, '10ms');
assert_equals(computedStyle.webkitAnimationDuration, '0.01s');
style.animationDuration = "10ms, 20s";
assert_equals(style.animationDuration, '10ms, 20s');
assert_equals(computedStyle.animationDuration, '0.01s, 20s');
assert_equals(style.webkitAnimationDuration, '10ms, 20s');
assert_equals(computedStyle.webkitAnimationDuration, '0.01s, 20s');
}, "Valid animation-duration values.");
test(() => {
style.animationDuration = "";
// Negative values are invalid.
style.animationDuration = "-10ms";
assert_equals(style.animationDuration, '');
assert_equals(computedStyle.animationDuration, '0s');
assert_equals(style.webkitAnimationDuration, '');
assert_equals(computedStyle.webkitAnimationDuration, '0s');
style.animationDuration = "'5ms'";
assert_equals(style.animationDuration, '');
assert_equals(computedStyle.animationDuration, '0s');
assert_equals(style.webkitAnimationDuration, '');
assert_equals(computedStyle.webkitAnimationDuration, '0s');
style.animationDuration = "30px";
assert_equals(style.animationDuration, '');
assert_equals(computedStyle.animationDuration, '0s');
assert_equals(style.webkitAnimationDuration, '');
assert_equals(computedStyle.webkitAnimationDuration, '0s');
style.animationDuration = "solid";
assert_equals(style.animationDuration, '');
assert_equals(computedStyle.animationDuration, '0s');
assert_equals(style.webkitAnimationDuration, '');
assert_equals(computedStyle.webkitAnimationDuration, '0s');
style.animationDuration = "20";
assert_equals(style.animationDuration, '');
assert_equals(computedStyle.animationDuration, '0s');
assert_equals(style.webkitAnimationDuration, '');
assert_equals(computedStyle.webkitAnimationDuration, '0s');
style.animationDuration = "20%";
assert_equals(style.animationDuration, '');
assert_equals(computedStyle.animationDuration, '0s');
assert_equals(style.webkitAnimationDuration, '');
assert_equals(computedStyle.webkitAnimationDuration, '0s');
style.animationDuration = "0s, 20px";
assert_equals(style.animationDuration, '');
assert_equals(computedStyle.animationDuration, '0s');
assert_equals(style.webkitAnimationDuration, '');
assert_equals(computedStyle.webkitAnimationDuration, '0s');
}, "Invalid animation-duration values.");
test(() => {
// Initial test.
assert_equals(computedStyle.animationTimingFunction, 'ease');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease');
style.animationTimingFunction = "linear";
assert_not_equals(Object.keys(style).indexOf('animationTimingFunction'), -1);
assert_equals(Object.keys(style).indexOf('webkitAnimationTimingFunction'), -1);
assert_equals(style.animationTimingFunction, 'linear');
assert_equals(computedStyle.animationTimingFunction, 'linear');
assert_equals(style.webkitAnimationTimingFunction, 'linear');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'linear');
style.animationTimingFunction = "ease";
assert_equals(style.animationTimingFunction, 'ease');
assert_equals(computedStyle.animationTimingFunction, 'ease');
assert_equals(style.webkitAnimationTimingFunction, 'ease');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease');
style.animationTimingFunction = "ease-in";
assert_equals(style.animationTimingFunction, 'ease-in');
assert_equals(computedStyle.animationTimingFunction, 'ease-in');
assert_equals(style.webkitAnimationTimingFunction, 'ease-in');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease-in');
style.animationTimingFunction = "ease-out";
assert_equals(style.animationTimingFunction, 'ease-out');
assert_equals(computedStyle.animationTimingFunction, 'ease-out');
assert_equals(style.webkitAnimationTimingFunction, 'ease-out');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease-out');
style.animationTimingFunction = "ease-in-out";
assert_equals(style.animationTimingFunction, 'ease-in-out');
assert_equals(computedStyle.animationTimingFunction, 'ease-in-out');
assert_equals(style.webkitAnimationTimingFunction, 'ease-in-out');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease-in-out');
style.animationTimingFunction = "cubic-bezier(0.25, 0.1, 0.25, 1)";
assert_equals(style.animationTimingFunction, 'cubic-bezier(0.25, 0.1, 0.25, 1)');
assert_equals(computedStyle.animationTimingFunction, 'cubic-bezier(0.25, 0.1, 0.25, 1)');
assert_equals(style.webkitAnimationTimingFunction, 'cubic-bezier(0.25, 0.1, 0.25, 1)');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'cubic-bezier(0.25, 0.1, 0.25, 1)');
style.animationTimingFunction = "cubic-bezier(0.1, 0, 0.23, 0.4)";
assert_equals(style.animationTimingFunction, 'cubic-bezier(0.1, 0, 0.23, 0.4)');
assert_equals(computedStyle.animationTimingFunction, 'cubic-bezier(0.1, 0, 0.23, 0.4)');
assert_equals(style.webkitAnimationTimingFunction, 'cubic-bezier(0.1, 0, 0.23, 0.4)');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'cubic-bezier(0.1, 0, 0.23, 0.4)');
style.animationTimingFunction = "cubic-bezier(0.1, 0, 0.23, 3)";
assert_equals(style.animationTimingFunction, 'cubic-bezier(0.1, 0, 0.23, 3)');
assert_equals(computedStyle.animationTimingFunction, 'cubic-bezier(0.1, 0, 0.23, 3)');
assert_equals(style.webkitAnimationTimingFunction, 'cubic-bezier(0.1, 0, 0.23, 3)');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'cubic-bezier(0.1, 0, 0.23, 3)');
style.animationTimingFunction = "cubic-bezier(0.1, 5, 0.23, 3)";
assert_equals(style.animationTimingFunction, 'cubic-bezier(0.1, 5, 0.23, 3)');
assert_equals(computedStyle.animationTimingFunction, 'cubic-bezier(0.1, 5, 0.23, 3)');
assert_equals(style.webkitAnimationTimingFunction, 'cubic-bezier(0.1, 5, 0.23, 3)');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'cubic-bezier(0.1, 5, 0.23, 3)');
style.animationTimingFunction = "cubic-bezier(0.1, 5, 0.23, 0)";
assert_equals(style.animationTimingFunction, 'cubic-bezier(0.1, 5, 0.23, 0)');
assert_equals(computedStyle.animationTimingFunction, 'cubic-bezier(0.1, 5, 0.23, 0)');
assert_equals(style.webkitAnimationTimingFunction, 'cubic-bezier(0.1, 5, 0.23, 0)');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'cubic-bezier(0.1, 5, 0.23, 0)');
style.animationTimingFunction = "cubic-bezier(0.2, 2, 0.2, -0.4)";
assert_equals(style.animationTimingFunction, 'cubic-bezier(0.2, 2, 0.2, -0.4)');
assert_equals(computedStyle.animationTimingFunction, 'cubic-bezier(0.2, 2, 0.2, -0.4)');
assert_equals(style.webkitAnimationTimingFunction, 'cubic-bezier(0.2, 2, 0.2, -0.4)');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'cubic-bezier(0.2, 2, 0.2, -0.4)');
style.animationTimingFunction = "cubic-bezier(0.2, -2, 0.2, 0.4)";
assert_equals(style.animationTimingFunction, 'cubic-bezier(0.2, -2, 0.2, 0.4)');
assert_equals(computedStyle.animationTimingFunction, 'cubic-bezier(0.2, -2, 0.2, 0.4)');
assert_equals(style.webkitAnimationTimingFunction, 'cubic-bezier(0.2, -2, 0.2, 0.4)');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'cubic-bezier(0.2, -2, 0.2, 0.4)');
style.animationTimingFunction = "step-start";
assert_equals(style.animationTimingFunction, 'step-start');
assert_equals(computedStyle.animationTimingFunction, 'step-start');
assert_equals(style.webkitAnimationTimingFunction, 'step-start');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'step-start');
style.animationTimingFunction = "step-end";
assert_equals(style.animationTimingFunction, 'step-end');
assert_equals(computedStyle.animationTimingFunction, 'step-end');
assert_equals(style.webkitAnimationTimingFunction, 'step-end');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'step-end');
style.animationTimingFunction = "steps(3)";
assert_equals(style.animationTimingFunction, 'steps(3, end)');
assert_equals(computedStyle.animationTimingFunction, 'steps(3, end)');
assert_equals(style.webkitAnimationTimingFunction, 'steps(3, end)');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'steps(3, end)');
style.animationTimingFunction = "steps(4, end)";
assert_equals(style.animationTimingFunction, 'steps(4, end)');
assert_equals(computedStyle.animationTimingFunction, 'steps(4, end)');
assert_equals(style.webkitAnimationTimingFunction, 'steps(4, end)');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'steps(4, end)');
style.animationTimingFunction = "steps(5, start)";
assert_equals(style.animationTimingFunction, 'steps(5, start)');
assert_equals(computedStyle.animationTimingFunction, 'steps(5, start)');
assert_equals(style.webkitAnimationTimingFunction, 'steps(5, start)');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'steps(5, start)');
style.animationTimingFunction = "frames(5)";
assert_equals(style.animationTimingFunction, 'frames(5)');
assert_equals(computedStyle.animationTimingFunction, 'frames(5)');
assert_equals(style.webkitAnimationTimingFunction, 'frames(5)');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'frames(5)');
style.animationName = "anim1, anim2";
style.animationTimingFunction = "ease-in-out, ease-in";
assert_equals(style.animationTimingFunction, 'ease-in-out, ease-in');
assert_equals(computedStyle.animationTimingFunction, 'ease-in-out, ease-in');
assert_equals(style.webkitAnimationTimingFunction, 'ease-in-out, ease-in');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease-in-out, ease-in');
style.animationTimingFunction = "ease-in-out, cubic-bezier(0.1, 0, 0.23, 0.4)";
assert_equals(style.animationTimingFunction, 'ease-in-out, cubic-bezier(0.1, 0, 0.23, 0.4)');
assert_equals(computedStyle.animationTimingFunction, 'ease-in-out, cubic-bezier(0.1, 0, 0.23, 0.4)');
assert_equals(style.webkitAnimationTimingFunction, 'ease-in-out, cubic-bezier(0.1, 0, 0.23, 0.4)');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease-in-out, cubic-bezier(0.1, 0, 0.23, 0.4)');
style.animationTimingFunction = "steps(3, start), ease-in-out";
assert_equals(style.animationTimingFunction, 'steps(3, start), ease-in-out');
assert_equals(computedStyle.animationTimingFunction, 'steps(3, start), ease-in-out');
assert_equals(style.webkitAnimationTimingFunction, 'steps(3, start), ease-in-out');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'steps(3, start), ease-in-out');
}, "Valid animation-timing-function values.");
test(() => {
style.animationName = "";
style.animationTimingFunction = "";
style.animationTimingFunction = "cubic-bezier(3, 0.1, 4, 1)";
assert_equals(style.animationTimingFunction, '');
assert_equals(computedStyle.animationTimingFunction, 'ease');
assert_equals(style.webkitAnimationTimingFunction, '');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease');
style.animationTimingFunction = "cubic-bezier(1, 0.1, 3, 1)";
assert_equals(style.animationTimingFunction, '');
assert_equals(computedStyle.animationTimingFunction, 'ease');
assert_equals(style.webkitAnimationTimingFunction, '');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease');
style.animationTimingFunction = "cubic-bezier(0.1, 0, 4, 0.4)";
assert_equals(style.animationTimingFunction, '');
assert_equals(computedStyle.animationTimingFunction, 'ease');
assert_equals(style.webkitAnimationTimingFunction, '');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease');
style.animationTimingFunction = "cubic-bezier(3, 0, 4, 0.4)";
assert_equals(style.animationTimingFunction, '');
assert_equals(computedStyle.animationTimingFunction, 'ease');
assert_equals(style.webkitAnimationTimingFunction, '');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease');
style.animationTimingFunction = "cubic-bezier(3, 0, 0.2, 0.4)";
assert_equals(style.animationTimingFunction, '');
assert_equals(computedStyle.animationTimingFunction, 'ease');
assert_equals(style.webkitAnimationTimingFunction, '');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease');
style.animationTimingFunction = "cubic-bezier(-0.2, 0, 0.2, 0.4)";
assert_equals(style.animationTimingFunction, '');
assert_equals(computedStyle.animationTimingFunction, 'ease');
assert_equals(style.webkitAnimationTimingFunction, '');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease');
style.animationTimingFunction = "cubic-bezier(0.2, 2, -0.2, 0.4)";
assert_equals(style.animationTimingFunction, '');
assert_equals(computedStyle.animationTimingFunction, 'ease');
assert_equals(style.webkitAnimationTimingFunction, '');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease');
style.animationTimingFunction = "steps(5, 3)";
assert_equals(style.animationTimingFunction, '');
assert_equals(computedStyle.animationTimingFunction, 'ease');
assert_equals(style.webkitAnimationTimingFunction, '');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease');
style.animationTimingFunction = "steps(-5, start)";
assert_equals(style.animationTimingFunction, '');
assert_equals(computedStyle.animationTimingFunction, 'ease');
assert_equals(style.webkitAnimationTimingFunction, '');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease');
style.animationTimingFunction = "steps(5, start, end)";
assert_equals(style.animationTimingFunction, '');
assert_equals(computedStyle.animationTimingFunction, 'ease');
assert_equals(style.webkitAnimationTimingFunction, '');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease');
style.animationTimingFunction = "step(5)";
assert_equals(style.animationTimingFunction, '');
assert_equals(computedStyle.animationTimingFunction, 'ease');
assert_equals(style.webkitAnimationTimingFunction, '');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease');
style.animationTimingFunction = "frame(5)";
assert_equals(style.animationTimingFunction, '');
assert_equals(computedStyle.animationTimingFunction, 'ease');
assert_equals(style.webkitAnimationTimingFunction, '');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease');
style.animationTimingFunction = "frames(1)";
assert_equals(style.animationTimingFunction, '');
assert_equals(computedStyle.animationTimingFunction, 'ease');
assert_equals(style.webkitAnimationTimingFunction, '');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease');
style.animationTimingFunction = "frames(2, 3)";
assert_equals(style.animationTimingFunction, '');
assert_equals(computedStyle.animationTimingFunction, 'ease');
assert_equals(style.webkitAnimationTimingFunction, '');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease');
style.animationTimingFunction = "red";
assert_equals(style.animationTimingFunction, '');
assert_equals(computedStyle.animationTimingFunction, 'ease');
assert_equals(style.webkitAnimationTimingFunction, '');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease');
style.animationTimingFunction = "cubic-bezier(0.25, 0.1, 0.25)";
assert_equals(style.animationTimingFunction, '');
assert_equals(computedStyle.animationTimingFunction, 'ease');
assert_equals(style.webkitAnimationTimingFunction, '');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease');
style.animationTimingFunction = "cubic-bezier(0.25, 0.1, 0.25, 1, 2)";
assert_equals(style.animationTimingFunction, '');
assert_equals(computedStyle.animationTimingFunction, 'ease');
assert_equals(style.webkitAnimationTimingFunction, '');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease');
style.animationTimingFunction = "cubic-foo(0.25, 0.1, 0.25, 1)";
assert_equals(style.animationTimingFunction, '');
assert_equals(computedStyle.animationTimingFunction, 'ease');
assert_equals(style.webkitAnimationTimingFunction, '');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease');
style.animationTimingFunction = "step-middle";
assert_equals(style.animationTimingFunction, 'step-middle');
assert_equals(computedStyle.animationTimingFunction, 'ease');
assert_equals(style.webkitAnimationTimingFunction, 'step-middle');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease');
style.animationTimingFunction = "steps(5, middle)";
assert_equals(style.animationTimingFunction, 'steps(5, middle)');
assert_equals(computedStyle.animationTimingFunction, 'ease');
assert_equals(style.webkitAnimationTimingFunction, 'steps(5, middle)');
assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease');
}, "Invalid animation-timing-function values.");
test(() => {
// Initial test.
assert_equals(computedStyle.animationDelay, '0s');
assert_equals(computedStyle.webkitAnimationDelay, '0s');
style.animationDelay = "0s";
assert_not_equals(Object.keys(style).indexOf('animationDelay'), -1);
assert_equals(Object.keys(style).indexOf('webkitAnimationDelay'), -1);
assert_equals(style.animationDelay, '0s');
assert_equals(computedStyle.animationDelay, '0s');
assert_equals(style.webkitAnimationDelay, '0s');
assert_equals(computedStyle.webkitAnimationDelay, '0s');
style.animationDelay = "5s";
assert_equals(style.animationDelay, '5s');
assert_equals(computedStyle.animationDelay, '5s');
assert_equals(style.webkitAnimationDelay, '5s');
assert_equals(computedStyle.webkitAnimationDelay, '5s');
style.animationDelay = "10ms";
assert_equals(style.animationDelay, '10ms');
assert_equals(computedStyle.animationDelay, '0.01s');
assert_equals(style.webkitAnimationDelay, '10ms');
assert_equals(computedStyle.webkitAnimationDelay, '0.01s');
style.animationDelay = "-10ms";
assert_equals(style.animationDelay, '-10ms');
assert_equals(computedStyle.animationDelay, '-0.01s');
assert_equals(style.webkitAnimationDelay, '-10ms');
assert_equals(computedStyle.webkitAnimationDelay, '-0.01s');
style.transitionProperty = "opacity, width";
style.animationDelay = "-10ms, 20s";
assert_equals(style.animationDelay, '-10ms, 20s');
assert_equals(computedStyle.animationDelay, '-0.01s, 20s');
assert_equals(style.webkitAnimationDelay, '-10ms, 20s');
assert_equals(computedStyle.webkitAnimationDelay, '-0.01s, 20s');
}, "Valid animation-delay values.");
test(() => {
style.transitionProperty = "opacity";
style.animationDelay = "";
style.animationDelay = "'5ms'";
assert_equals(style.animationDelay, '');
assert_equals(computedStyle.animationDelay, '0s');
assert_equals(style.webkitAnimationDelay, '');
assert_equals(computedStyle.webkitAnimationDelay, '0s');
style.animationDelay = "30px";
assert_equals(style.animationDelay, '');
assert_equals(computedStyle.animationDelay, '0s');
assert_equals(style.webkitAnimationDelay, '');
assert_equals(computedStyle.webkitAnimationDelay, '0s');
style.animationDelay = "solid";
assert_equals(style.animationDelay, '');
assert_equals(computedStyle.animationDelay, '0s');
assert_equals(style.webkitAnimationDelay, '');
assert_equals(computedStyle.webkitAnimationDelay, '0s');
style.animationDelay = "20";
assert_equals(style.animationDelay, '');
assert_equals(computedStyle.animationDelay, '0s');
assert_equals(style.webkitAnimationDelay, '');
assert_equals(computedStyle.webkitAnimationDelay, '0s');
style.animationDelay = "20%";
assert_equals(style.animationDelay, '');
assert_equals(computedStyle.animationDelay, '0s');
assert_equals(style.webkitAnimationDelay, '');
assert_equals(computedStyle.webkitAnimationDelay, '0s');
style.animationDelay = "0s, 20px";
assert_equals(style.animationDelay, '');
assert_equals(computedStyle.animationDelay, '0s');
assert_equals(style.webkitAnimationDelay, '');
assert_equals(computedStyle.webkitAnimationDelay, '0s');
}, "Invalid animation-delay values.");
test(() => {
// Initial test.
assert_equals(computedStyle.animationIterationCount, '1');
assert_equals(computedStyle.webkitAnimationIterationCount, '1');
style.animationIterationCount = "4";
assert_not_equals(Object.keys(style).indexOf('animationIterationCount'), -1);
assert_equals(Object.keys(style).indexOf('webkitAnimationIterationCount'), -1);
assert_equals(style.animationIterationCount, '4');
assert_equals(computedStyle.animationIterationCount, '4');
assert_equals(style.webkitAnimationIterationCount, '4');
assert_equals(computedStyle.webkitAnimationIterationCount, '4');
style.animationIterationCount = "2.5";
assert_equals(style.animationIterationCount, '2.5');
assert_equals(computedStyle.animationIterationCount, '2.5');
assert_equals(style.webkitAnimationIterationCount, '2.5');
assert_equals(computedStyle.webkitAnimationIterationCount, '2.5');
style.animationIterationCount = "infinite";
assert_equals(style.animationIterationCount, 'infinite');
assert_equals(computedStyle.animationIterationCount, 'infinite');
assert_equals(style.webkitAnimationIterationCount, 'infinite');
assert_equals(computedStyle.webkitAnimationIterationCount, 'infinite');
style.animationIterationCount = "infinite, 3";
assert_equals(style.animationIterationCount, 'infinite, 3');
assert_equals(computedStyle.animationIterationCount, 'infinite, 3');
assert_equals(style.webkitAnimationIterationCount, 'infinite, 3');
assert_equals(computedStyle.webkitAnimationIterationCount, 'infinite, 3');
style.animationIterationCount = "0";
assert_equals(style.animationIterationCount, '0');
assert_equals(computedStyle.animationIterationCount, '0');
assert_equals(style.webkitAnimationIterationCount, '0');
assert_equals(computedStyle.webkitAnimationIterationCount, '0');
style.animationIterationCount = "infinite, infinite";
assert_equals(style.animationIterationCount, 'infinite, infinite');
assert_equals(computedStyle.animationIterationCount, 'infinite, infinite');
assert_equals(style.webkitAnimationIterationCount, 'infinite, infinite');
assert_equals(computedStyle.webkitAnimationIterationCount, 'infinite, infinite');
}, "Valid animation-iteration-count values.");
test(() => {
style.animationIterationCount = "";
style.animationIterationCount = "none";
assert_equals(style.animationIterationCount, '');
assert_equals(computedStyle.animationIterationCount, '1');
assert_equals(style.webkitAnimationIterationCount, '');
assert_equals(computedStyle.webkitAnimationIterationCount, '1');
style.animationIterationCount = "-3";
assert_equals(style.animationIterationCount, '');
assert_equals(computedStyle.animationIterationCount, '1');
assert_equals(style.webkitAnimationIterationCount, '');
assert_equals(computedStyle.webkitAnimationIterationCount, '1');
style.animationIterationCount = "infinite, -3";
assert_equals(style.animationIterationCount, '');
assert_equals(computedStyle.animationIterationCount, '1');
assert_equals(style.webkitAnimationIterationCount, '');
assert_equals(computedStyle.webkitAnimationIterationCount, '1');
style.animationIterationCount = "solid";
assert_equals(style.animationIterationCount, '');
assert_equals(computedStyle.animationIterationCount, '1');
assert_equals(style.webkitAnimationIterationCount, '');
assert_equals(computedStyle.webkitAnimationIterationCount, '1');
style.animationIterationCount = "-1, infinite";
assert_equals(style.animationIterationCount, '');
assert_equals(computedStyle.animationIterationCount, '1');
assert_equals(style.webkitAnimationIterationCount, '');
assert_equals(computedStyle.webkitAnimationIterationCount, '1');
style.animationIterationCount = "-1, 3";
assert_equals(style.animationIterationCount, '');
assert_equals(computedStyle.animationIterationCount, '1');
assert_equals(style.webkitAnimationIterationCount, '');
assert_equals(computedStyle.webkitAnimationIterationCount, '1');
}, "Invalid animation-iteration-count values.");
test(() => {
// Initial test.
assert_equals(computedStyle.animationDirection, 'normal');
assert_equals(computedStyle.webkitAnimationDirection, 'normal');
style.animationDirection = "reverse";
assert_not_equals(Object.keys(style).indexOf('animationDirection'), -1);
assert_equals(Object.keys(style).indexOf('webkitAnimationDirection'), -1);
assert_equals(style.animationDirection, 'reverse');
assert_equals(computedStyle.animationDirection, 'reverse');
assert_equals(style.webkitAnimationDirection, 'reverse');
assert_equals(computedStyle.webkitAnimationDirection, 'reverse');
style.animationDirection = "normal";
assert_equals(style.animationDirection, 'normal');
assert_equals(computedStyle.animationDirection, 'normal');
assert_equals(style.webkitAnimationDirection, 'normal');
assert_equals(computedStyle.webkitAnimationDirection, 'normal');
style.animationDirection = "normal, alternate";
assert_equals(style.animationDirection, 'normal, alternate');
assert_equals(computedStyle.animationDirection, 'normal, alternate');
assert_equals(style.webkitAnimationDirection, 'normal, alternate');
assert_equals(computedStyle.webkitAnimationDirection, 'normal, alternate');
style.animationDirection = "alternate";
assert_equals(style.animationDirection, 'alternate');
assert_equals(computedStyle.animationDirection, 'alternate');
assert_equals(style.webkitAnimationDirection, 'alternate');
assert_equals(computedStyle.webkitAnimationDirection, 'alternate');
style.animationDirection = "alternate-reverse";
assert_equals(style.animationDirection, 'alternate-reverse');
assert_equals(computedStyle.animationDirection, 'alternate-reverse');
assert_equals(style.webkitAnimationDirection, 'alternate-reverse');
assert_equals(computedStyle.webkitAnimationDirection, 'alternate-reverse');
}, "Valid animation-direction values.");
test(() => {
style.animationDirection = "";
style.animationDirection = "solid";
assert_equals(style.animationDirection, '');
assert_equals(computedStyle.animationDirection, 'normal');
assert_equals(style.webkitAnimationDirection, '');
assert_equals(computedStyle.webkitAnimationDirection, 'normal');
style.animationDirection = "0";
assert_equals(style.animationDirection, '');
assert_equals(computedStyle.animationDirection, 'normal');
assert_equals(style.webkitAnimationDirection, '');
assert_equals(computedStyle.webkitAnimationDirection, 'normal');
style.animationDirection = "3px";
assert_equals(style.animationDirection, '');
assert_equals(computedStyle.animationDirection, 'normal');
assert_equals(style.webkitAnimationDirection, '');
assert_equals(computedStyle.webkitAnimationDirection, 'normal');
style.animationDirection = "alternate-normal";
assert_equals(style.animationDirection, '');
assert_equals(computedStyle.animationDirection, 'normal');
assert_equals(style.webkitAnimationDirection, '');
assert_equals(computedStyle.webkitAnimationDirection, 'normal');
style.animationDirection = "3.5";
assert_equals(style.animationDirection, '');
assert_equals(computedStyle.animationDirection, 'normal');
assert_equals(style.webkitAnimationDirection, '');
assert_equals(computedStyle.webkitAnimationDirection, 'normal');
style.animationDirection = "3.5, reverse";
assert_equals(style.animationDirection, '');
assert_equals(computedStyle.animationDirection, 'normal');
assert_equals(style.webkitAnimationDirection, '');
assert_equals(computedStyle.webkitAnimationDirection, 'normal');
style.animationDirection = "reverse, solid";
assert_equals(style.animationDirection, '');
assert_equals(computedStyle.animationDirection, 'normal');
assert_equals(style.webkitAnimationDirection, '');
assert_equals(computedStyle.webkitAnimationDirection, 'normal');
}, "Invalid animation-direction values.");
test(() => {
// Initial test.
assert_equals(computedStyle.animationPlayState, 'running');
assert_equals(computedStyle.webkitAnimationPlayState, 'running');
style.animationPlayState = "paused";
assert_not_equals(Object.keys(style).indexOf('animationPlayState'), -1);
assert_equals(Object.keys(style).indexOf('webkitAnimationPlayState'), -1);
assert_equals(style.animationPlayState, 'paused');
assert_equals(computedStyle.animationPlayState, 'paused');
assert_equals(style.webkitAnimationPlayState, 'paused');
assert_equals(computedStyle.webkitAnimationPlayState, 'paused');
style.animationPlayState = "running";
assert_equals(style.animationPlayState, 'running');
assert_equals(computedStyle.animationPlayState, 'running');
assert_equals(style.webkitAnimationPlayState, 'running');
assert_equals(computedStyle.webkitAnimationPlayState, 'running');
style.animationPlayState = "running, running";
assert_equals(style.animationPlayState, 'running, running');
assert_equals(computedStyle.animationPlayState, 'running, running');
assert_equals(style.webkitAnimationPlayState, 'running, running');
assert_equals(computedStyle.webkitAnimationPlayState, 'running, running');
style.animationPlayState = "paused, paused";
assert_equals(style.animationPlayState, 'paused, paused');
assert_equals(computedStyle.animationPlayState, 'paused, paused');
assert_equals(style.webkitAnimationPlayState, 'paused, paused');
assert_equals(computedStyle.webkitAnimationPlayState, 'paused, paused');
style.animationPlayState = "paused, running";
assert_equals(style.animationPlayState, 'paused, running');
assert_equals(computedStyle.animationPlayState, 'paused, running');
assert_equals(style.webkitAnimationPlayState, 'paused, running');
assert_equals(computedStyle.webkitAnimationPlayState, 'paused, running');
}, "Valid animation-play-state values.");
test(() => {
style.animationPlayState = "";
style.animationPlayState = "running3";
assert_equals(style.animationPlayState, '');
assert_equals(computedStyle.animationPlayState, 'running');
assert_equals(style.webkitAnimationPlayState, '');
assert_equals(computedStyle.webkitAnimationPlayState, 'running');
style.animationPlayState = "0";
assert_equals(style.animationPlayState, '');
assert_equals(computedStyle.animationPlayState, 'running');
assert_equals(style.webkitAnimationPlayState, '');
assert_equals(computedStyle.webkitAnimationPlayState, 'running');
style.animationPlayState = "solid";
assert_equals(style.animationPlayState, '');
assert_equals(computedStyle.animationPlayState, 'running');
assert_equals(style.webkitAnimationPlayState, '');
assert_equals(computedStyle.webkitAnimationPlayState, 'running');
style.animationPlayState = "20px";
assert_equals(style.animationPlayState, '');
assert_equals(computedStyle.animationPlayState, 'running');
assert_equals(style.webkitAnimationPlayState, '');
assert_equals(computedStyle.webkitAnimationPlayState, 'running');
style.animationPlayState = "all";
assert_equals(style.animationPlayState, '');
assert_equals(computedStyle.animationPlayState, 'running');
assert_equals(style.webkitAnimationPlayState, '');
assert_equals(computedStyle.webkitAnimationPlayState, 'running');
style.animationPlayState = "running, test";
assert_equals(style.animationPlayState, '');
assert_equals(computedStyle.animationPlayState, 'running');
assert_equals(style.webkitAnimationPlayState, '');
assert_equals(computedStyle.webkitAnimationPlayState, 'running');
style.animationPlayState = "all, paused";
assert_equals(style.animationPlayState, '');
assert_equals(computedStyle.animationPlayState, 'running');
assert_equals(style.webkitAnimationPlayState, '');
assert_equals(computedStyle.webkitAnimationPlayState, 'running');
}, "Invalid animation-play-state values.");
test(() => {
// Initial test.
assert_equals(computedStyle.animationFillMode, 'none');
assert_equals(computedStyle.webkitAnimationFillMode, 'none');
style.animationFillMode = "forwards";
assert_not_equals(Object.keys(style).indexOf('animationFillMode'), -1);
assert_equals(Object.keys(style).indexOf('webkitAnimationFillMode'), -1);
assert_equals(style.animationFillMode, 'forwards');
assert_equals(computedStyle.animationFillMode, 'forwards');
assert_equals(style.webkitAnimationFillMode, 'forwards');
assert_equals(computedStyle.webkitAnimationFillMode, 'forwards');
style.animationFillMode = "backwards";
assert_equals(style.animationFillMode, 'backwards');
assert_equals(computedStyle.animationFillMode, 'backwards');
assert_equals(style.webkitAnimationFillMode, 'backwards');
assert_equals(computedStyle.webkitAnimationFillMode, 'backwards');
style.animationFillMode = "both";
assert_equals(style.animationFillMode, 'both');
assert_equals(computedStyle.animationFillMode, 'both');
assert_equals(style.webkitAnimationFillMode, 'both');
assert_equals(computedStyle.webkitAnimationFillMode, 'both');
style.animationFillMode = "none";
assert_equals(style.animationFillMode, 'none');
assert_equals(computedStyle.animationFillMode, 'none');
assert_equals(style.webkitAnimationFillMode, 'none');
assert_equals(computedStyle.webkitAnimationFillMode, 'none');
style.animationFillMode = "none, both";
assert_equals(style.animationFillMode, 'none, both');
assert_equals(computedStyle.animationFillMode, 'none, both');
assert_equals(style.webkitAnimationFillMode, 'none, both');
assert_equals(computedStyle.webkitAnimationFillMode, 'none, both');
style.animationFillMode = "backwards, forwards";
assert_equals(style.animationFillMode, 'backwards, forwards');
assert_equals(computedStyle.animationFillMode, 'backwards, forwards');
assert_equals(style.webkitAnimationFillMode, 'backwards, forwards');
assert_equals(computedStyle.webkitAnimationFillMode, 'backwards, forwards');
}, "Valid animation-fill-mode values.");
test(() => {
style.animationFillMode = "";
style.animationFillMode = "foo";
assert_equals(style.animationFillMode, '');
assert_equals(computedStyle.animationFillMode, 'none');
assert_equals(style.webkitAnimationFillMode, '');
assert_equals(computedStyle.webkitAnimationFillMode, 'none');
style.animationFillMode = "0";
assert_equals(style.animationFillMode, '');
assert_equals(computedStyle.animationFillMode, 'none');
assert_equals(style.webkitAnimationFillMode, '');
assert_equals(computedStyle.webkitAnimationFillMode, 'none');
style.animationFillMode = "-";
assert_equals(style.animationFillMode, '');
assert_equals(computedStyle.animationFillMode, 'none');
assert_equals(style.webkitAnimationFillMode, '');
assert_equals(computedStyle.webkitAnimationFillMode, 'none');
style.animationFillMode = "3px";
assert_equals(style.animationFillMode, '');
assert_equals(computedStyle.animationFillMode, 'none');
assert_equals(style.webkitAnimationFillMode, '');
assert_equals(computedStyle.webkitAnimationFillMode, 'none');
style.animationFillMode = "backwards, test";
assert_equals(style.animationFillMode, '');
assert_equals(computedStyle.animationFillMode, 'none');
assert_equals(style.webkitAnimationFillMode, '');
assert_equals(computedStyle.webkitAnimationFillMode, 'none');
style.animationFillMode = "test, all";
assert_equals(style.animationFillMode, '');
assert_equals(computedStyle.animationFillMode, 'none');
assert_equals(style.webkitAnimationFillMode, '');
assert_equals(computedStyle.webkitAnimationFillMode, 'none');
style.animationFillMode = "test, none";
assert_equals(style.animationFillMode, '');
assert_equals(computedStyle.animationFillMode, 'none');
assert_equals(style.webkitAnimationFillMode, '');
assert_equals(computedStyle.webkitAnimationFillMode, 'none');
style.animationFillMode = "forwards,";
assert_equals(style.animationFillMode, '');
}, "Invalid animation-fill-mode values.");
test(() => {
style.animation = "";
// Initial test.
// Test initial value.
assert_equals(computedStyle.animation, 'none 0s ease 0s 1 normal none running');
assert_equals(computedStyle.webkitAnimation, 'none 0s ease 0s 1 normal none running');
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment