<!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 transitions properties.
var e = document.getElementById('test');
var style = e.style;
var computedStyle = window.getComputedStyle(e, null);
test(() => {
// Initial test.
assert_equals(computedStyle.transitionTimingFunction, 'ease');
assert_equals(computedStyle.webkitTransitionTimingFunction, 'ease');
style.transitionTimingFunction = "linear";
assert_not_equals(Object.keys(style).indexOf('transitionTimingFunction'), -1);
assert_not_equals(Object.keys(style).indexOf('webkitTransitionTimingFunction'), -1);
assert_equals(style.transitionTimingFunction, 'linear');
assert_equals(computedStyle.transitionTimingFunction, 'linear');
assert_equals(style.webkitTransitionTimingFunction, 'linear');
assert_equals(computedStyle.webkitTransitionTimingFunction, 'linear');
style.transitionTimingFunction = "ease";
assert_equals(style.transitionTimingFunction, 'ease');
assert_equals(computedStyle.transitionTimingFunction, 'ease');
assert_equals(style.webkitTransitionTimingFunction, 'ease');
assert_equals(computedStyle.webkitTransitionTimingFunction, 'ease');
style.transitionTimingFunction = "ease-in";
assert_equals(style.transitionTimingFunction, 'ease-in');
assert_equals(computedStyle.transitionTimingFunction, 'ease-in');
assert_equals(style.webkitTransitionTimingFunction, 'ease-in');
assert_equals(computedStyle.webkitTransitionTimingFunction, 'ease-in');
style.transitionTimingFunction = "ease-out";
assert_equals(style.transitionTimingFunction, 'ease-out');
assert_equals(computedStyle.transitionTimingFunction, 'ease-out');
assert_equals(style.webkitTransitionTimingFunction, 'ease-out');
assert_equals(computedStyle.webkitTransitionTimingFunction, 'ease-out');
style.transitionTimingFunction = "ease-in-out";
assert_equals(style.transitionTimingFunction, 'ease-in-out');
assert_equals(computedStyle.transitionTimingFunction, 'ease-in-out');
assert_equals(style.webkitTransitionTimingFunction, 'ease-in-out');
assert_equals(computedStyle.webkitTransitionTimingFunction, 'ease-in-out');
style.transitionTimingFunction = "cubic-bezier(0.25, 0.1, 0.25, 1)";
assert_equals(style.transitionTimingFunction, 'cubic-bezier(0.25, 0.1, 0.25, 1)');
assert_equals(computedStyle.transitionTimingFunction, 'cubic-bezier(0.25, 0.1, 0.25, 1)');
assert_equals(style.webkitTransitionTimingFunction, 'cubic-bezier(0.25, 0.1, 0.25, 1)');
assert_equals(computedStyle.webkitTransitionTimingFunction, 'cubic-bezier(0.25, 0.1, 0.25, 1)');
style.transitionTimingFunction = "cubic-bezier(0.1, 0, 0.23, 0.4)";
assert_equals(style.transitionTimingFunction, 'cubic-bezier(0.1, 0, 0.23, 0.4)');
assert_equals(computedStyle.transitionTimingFunction, 'cubic-bezier(0.1, 0, 0.23, 0.4)');
assert_equals(style.webkitTransitionTimingFunction, 'cubic-bezier(0.1, 0, 0.23, 0.4)');
assert_equals(computedStyle.webkitTransitionTimingFunction, 'cubic-bezier(0.1, 0, 0.23, 0.4)');
style.transitionTimingFunction = "cubic-bezier(0.1, 0, 0.23, 3)";
assert_equals(style.transitionTimingFunction, 'cubic-bezier(0.1, 0, 0.23, 3)');
assert_equals(computedStyle.transitionTimingFunction, 'cubic-bezier(0.1, 0, 0.23, 3)');
assert_equals(style.webkitTransitionTimingFunction, 'cubic-bezier(0.1, 0, 0.23, 3)');
assert_equals(computedStyle.webkitTransitionTimingFunction, 'cubic-bezier(0.1, 0, 0.23, 3)');
style.transitionTimingFunction = "cubic-bezier(0.1, 5, 0.23, 3)";
assert_equals(style.transitionTimingFunction, 'cubic-bezier(0.1, 5, 0.23, 3)');
assert_equals(computedStyle.transitionTimingFunction, 'cubic-bezier(0.1, 5, 0.23, 3)');
assert_equals(style.webkitTransitionTimingFunction, 'cubic-bezier(0.1, 5, 0.23, 3)');
assert_equals(computedStyle.webkitTransitionTimingFunction, 'cubic-bezier(0.1, 5, 0.23, 3)');
style.transitionTimingFunction = "cubic-bezier(0.1, 5, 0.23, 0)";
assert_equals(style.transitionTimingFunction, 'cubic-bezier(0.1, 5, 0.23, 0)');
assert_equals(computedStyle.transitionTimingFunction, 'cubic-bezier(0.1, 5, 0.23, 0)');
assert_equals(style.webkitTransitionTimingFunction, 'cubic-bezier(0.1, 5, 0.23, 0)');
assert_equals(computedStyle.webkitTransitionTimingFunction, 'cubic-bezier(0.1, 5, 0.23, 0)');
style.transitionTimingFunction = "cubic-bezier(0.2, 2, 0.2, -0.4)";
assert_equals(style.transitionTimingFunction, 'cubic-bezier(0.2, 2, 0.2, -0.4)');
assert_equals(computedStyle.transitionTimingFunction, 'cubic-bezier(0.2, 2, 0.2, -0.4)');
assert_equals(style.webkitTransitionTimingFunction, 'cubic-bezier(0.2, 2, 0.2, -0.4)');
assert_equals(computedStyle.webkitTransitionTimingFunction, 'cubic-bezier(0.2, 2, 0.2, -0.4)');
style.transitionTimingFunction = "cubic-bezier(0.2, -2, 0.2, 0.4)";
assert_equals(style.transitionTimingFunction, 'cubic-bezier(0.2, -2, 0.2, 0.4)');
assert_equals(computedStyle.transitionTimingFunction, 'cubic-bezier(0.2, -2, 0.2, 0.4)');
assert_equals(style.webkitTransitionTimingFunction, 'cubic-bezier(0.2, -2, 0.2, 0.4)');
assert_equals(computedStyle.webkitTransitionTimingFunction, 'cubic-bezier(0.2, -2, 0.2, 0.4)');
style.transitionTimingFunction = "step-start";
assert_equals(style.transitionTimingFunction, 'step-start');
assert_equals(computedStyle.transitionTimingFunction, 'steps(1, start)');
assert_equals(style.webkitTransitionTimingFunction, 'step-start');
assert_equals(computedStyle.webkitTransitionTimingFunction, 'steps(1, start)');
style.transitionTimingFunction = "step-end";
assert_equals(style.transitionTimingFunction, 'step-end');
assert_equals(computedStyle.transitionTimingFunction, 'steps(1)');
assert_equals(style.webkitTransitionTimingFunction, 'step-end');
assert_equals(computedStyle.webkitTransitionTimingFunction, 'steps(1)');
style.transitionTimingFunction = "steps(3)";
assert_equals(style.transitionTimingFunction, 'steps(3)');
assert_equals(computedStyle.transitionTimingFunction, 'steps(3)');
assert_equals(style.webkitTransitionTimingFunction, 'steps(3)');
assert_equals(computedStyle.webkitTransitionTimingFunction, 'steps(3)');
style.transitionTimingFunction = "steps(4, end)";
assert_equals(style.transitionTimingFunction, 'steps(4)');
assert_equals(computedStyle.transitionTimingFunction, 'steps(4)');
assert_equals(style.webkitTransitionTimingFunction, 'steps(4)');
assert_equals(computedStyle.webkitTransitionTimingFunction, 'steps(4)');
style.transitionTimingFunction = "steps(5, start)";
assert_equals(style.transitionTimingFunction, 'steps(5, start)');
assert_equals(computedStyle.transitionTimingFunction, 'steps(5, start)');
assert_equals(style.webkitTransitionTimingFunction, 'steps(5, start)');
assert_equals(computedStyle.webkitTransitionTimingFunction, 'steps(5, start)');
style.transitionTimingFunction = "steps(6, jump-start)";
assert_equals(style.transitionTimingFunction, 'steps(6, jump-start)');
assert_equals(computedStyle.transitionTimingFunction, 'steps(6, jump-start)');
assert_equals(style.webkitTransitionTimingFunction, 'steps(6, jump-start)');
assert_equals(computedStyle.webkitTransitionTimingFunction, 'steps(6, jump-start)');
style.transitionTimingFunction = "steps(7, jump-end)";
assert_equals(style.transitionTimingFunction, 'steps(7)');
assert_equals(computedStyle.transitionTimingFunction, 'steps(7)');
assert_equals(style.webkitTransitionTimingFunction, 'steps(7)');
assert_equals(computedStyle.webkitTransitionTimingFunction, 'steps(7)');
style.transitionProperty = "opacity, width";
style.transitionTimingFunction = "ease-in-out, ease-in";
assert_equals(style.transitionTimingFunction, 'ease-in-out, ease-in');
assert_equals(computedStyle.transitionTimingFunction, 'ease-in-out, ease-in');
assert_equals(style.webkitTransitionTimingFunction, 'ease-in-out, ease-in');
assert_equals(computedStyle.webkitTransitionTimingFunction, 'ease-in-out, ease-in');
style.transitionTimingFunction = "ease-in-out, cubic-bezier(0.1, 0, 0.23, 0.4)";
assert_equals(style.transitionTimingFunction, 'ease-in-out, cubic-bezier(0.1, 0, 0.23, 0.4)');
assert_equals(computedStyle.transitionTimingFunction, 'ease-in-out, cubic-bezier(0.1, 0, 0.23, 0.4)');
assert_equals(style.webkitTransitionTimingFunction, 'ease-in-out, cubic-bezier(0.1, 0, 0.23, 0.4)');
assert_equals(computedStyle.webkitTransitionTimingFunction, 'ease-in-out, cubic-bezier(0.1, 0, 0.23, 0.4)');
style.transitionTimingFunction = "steps(3, start), ease-in-out";
assert_equals(style.transitionTimingFunction, 'steps(3, start), ease-in-out');
assert_equals(computedStyle.transitionTimingFunction, 'steps(3, start), ease-in-out');
assert_equals(style.webkitTransitionTimingFunction, 'steps(3, start), ease-in-out');
assert_equals(computedStyle.webkitTransitionTimingFunction, 'steps(3, start), ease-in-out');
}, "Valid transition-timing-function values.");
test(() => {
style.transitionProperty = "";
style.transitionTimingFunction = "";
style.transitionTimingFunction = "cubic-bezier(3, 0.1, 4, 1)";
assert_equals(style.transitionTimingFunction, '');
assert_equals(computedStyle.transitionTimingFunction, 'ease');
assert_equals(style.webkitTransitionTimingFunction, '');
assert_equals(computedStyle.webkitTransitionTimingFunction, 'ease');
style.transitionTimingFunction = "cubic-bezier(1, 0.1, 3, 1)";
assert_equals(style.transitionTimingFunction, '');
assert_equals(computedStyle.transitionTimingFunction, 'ease');
assert_equals(style.webkitTransitionTimingFunction, '');
assert_equals(computedStyle.webkitTransitionTimingFunction, 'ease');
style.transitionTimingFunction = "cubic-bezier(0.1, 0, 4, 0.4)";
assert_equals(style.transitionTimingFunction, '');
assert_equals(computedStyle.transitionTimingFunction, 'ease');
assert_equals(style.webkitTransitionTimingFunction, '');
assert_equals(computedStyle.webkitTransitionTimingFunction, 'ease');
style.transitionTimingFunction = "cubic-bezier(3, 0, 4, 0.4)";
assert_equals(style.transitionTimingFunction, '');
assert_equals(computedStyle.transitionTimingFunction, 'ease');
assert_equals(style.webkitTransitionTimingFunction, '');
assert_equals(computedStyle.webkitTransitionTimingFunction, 'ease');
style.transitionTimingFunction = "cubic-bezier(3, 0, 0.2, 0.4)";
assert_equals(style.transitionTimingFunction, '');
assert_equals(computedStyle.transitionTimingFunction, 'ease');
assert_equals(style.webkitTransitionTimingFunction, '');
assert_equals(computedStyle.webkitTransitionTimingFunction, 'ease');
style.transitionTimingFunction = "cubic-bezier(-0.2, 0, 0.2, 0.4)";
assert_equals(style.transitionTimingFunction, '');
assert_equals(computedStyle.transitionTimingFunction, 'ease');
assert_equals(style.webkitTransitionTimingFunction, '');
assert_equals(computedStyle.webkitTransitionTimingFunction, 'ease');
style.transitionTimingFunction = "cubic-bezier(0.2, 2, -0.2, 0.4)";
assert_equals(style.transitionTimingFunction, '');
assert_equals(computedStyle.transitionTimingFunction, 'ease');
assert_equals(style.webkitTransitionTimingFunction, '');
assert_equals(computedStyle.webkitTransitionTimingFunction, 'ease');
style.transitionTimingFunction = "steps(5, 3)";
assert_equals(style.transitionTimingFunction, '');
assert_equals(computedStyle.transitionTimingFunction, 'ease');
assert_equals(style.webkitTransitionTimingFunction, '');
assert_equals(computedStyle.webkitTransitionTimingFunction, 'ease');
style.transitionTimingFunction = "steps(-5, start)";
assert_equals(style.transitionTimingFunction, '');
assert_equals(computedStyle.transitionTimingFunction, 'ease');
assert_equals(style.webkitTransitionTimingFunction, '');
assert_equals(computedStyle.webkitTransitionTimingFunction, 'ease');
style.transitionTimingFunction = "steps(5, start, end)";
assert_equals(style.transitionTimingFunction, '');
assert_equals(computedStyle.transitionTimingFunction, 'ease');
assert_equals(style.webkitTransitionTimingFunction, '');
assert_equals(computedStyle.webkitTransitionTimingFunction, 'ease');
style.transitionTimingFunction = "step(5)";
assert_equals(style.transitionTimingFunction, '');
assert_equals(computedStyle.transitionTimingFunction, 'ease');
assert_equals(style.webkitTransitionTimingFunction, '');
assert_equals(computedStyle.webkitTransitionTimingFunction, 'ease');
style.transitionTimingFunction = "red";
assert_equals(style.transitionTimingFunction, '');
assert_equals(computedStyle.transitionTimingFunction, 'ease');
assert_equals(style.webkitTransitionTimingFunction, '');
assert_equals(computedStyle.webkitTransitionTimingFunction, 'ease');
style.transitionTimingFunction = "cubic-bezier(0.25, 0.1, 0.25)";
assert_equals(style.transitionTimingFunction, '');
assert_equals(computedStyle.transitionTimingFunction, 'ease');
assert_equals(style.webkitTransitionTimingFunction, '');
assert_equals(computedStyle.webkitTransitionTimingFunction, 'ease');
style.transitionTimingFunction = "cubic-bezier(0.25, 0.1, 0.25, 1, 2)";
assert_equals(style.transitionTimingFunction, '');
assert_equals(computedStyle.transitionTimingFunction, 'ease');
assert_equals(style.webkitTransitionTimingFunction, '');
assert_equals(computedStyle.webkitTransitionTimingFunction, 'ease');
style.transitionTimingFunction = "cubic-foo(0.25, 0.1, 0.25, 1)";
assert_equals(style.transitionTimingFunction, '');
assert_equals(computedStyle.transitionTimingFunction, 'ease');
assert_equals(style.webkitTransitionTimingFunction, '');
assert_equals(computedStyle.webkitTransitionTimingFunction, 'ease');
}, "Invalid transition-timing-function values.");
</script>
</body>
</html>
Codebase Browser
chromium