animations-parsing-002.html | Explore in Territory

<!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_not_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, 'steps(1, start)');
  assert_equals(style.webkitAnimationTimingFunction, 'step-start');
  assert_equals(computedStyle.webkitAnimationTimingFunction, 'steps(1, start)');

  style.animationTimingFunction = "step-end";
  assert_equals(style.animationTimingFunction, 'step-end');
  assert_equals(computedStyle.animationTimingFunction, 'steps(1)');
  assert_equals(style.webkitAnimationTimingFunction, 'step-end');
  assert_equals(computedStyle.webkitAnimationTimingFunction, 'steps(1)');

  style.animationTimingFunction = "steps(3)";
  assert_equals(style.animationTimingFunction, 'steps(3)');
  assert_equals(computedStyle.animationTimingFunction, 'steps(3)');
  assert_equals(style.webkitAnimationTimingFunction, 'steps(3)');
  assert_equals(computedStyle.webkitAnimationTimingFunction, 'steps(3)');

  style.animationTimingFunction = "steps(4, end)";
  assert_equals(style.animationTimingFunction, 'steps(4)');
  assert_equals(computedStyle.animationTimingFunction, 'steps(4)');
  assert_equals(style.webkitAnimationTimingFunction, 'steps(4)');
  assert_equals(computedStyle.webkitAnimationTimingFunction, 'steps(4)');

  style.animationTimingFunction = "steps(5, jump-end)";
  assert_equals(style.animationTimingFunction, 'steps(5)');
  assert_equals(computedStyle.animationTimingFunction, 'steps(5)');
  assert_equals(style.webkitAnimationTimingFunction, 'steps(5)');
  assert_equals(computedStyle.webkitAnimationTimingFunction, 'steps(5)');

  style.animationTimingFunction = "steps(6, jump-none)";
  assert_equals(style.animationTimingFunction, 'steps(6, jump-none)');
  assert_equals(computedStyle.animationTimingFunction, 'steps(6, jump-none)');
  assert_equals(style.webkitAnimationTimingFunction, 'steps(6, jump-none)');
  assert_equals(computedStyle.webkitAnimationTimingFunction, 'steps(6, jump-none)');

  style.animationTimingFunction = "steps(7, jump-both)";
  assert_equals(style.animationTimingFunction, 'steps(7, jump-both)');
  assert_equals(computedStyle.animationTimingFunction, 'steps(7, jump-both)');
  assert_equals(style.webkitAnimationTimingFunction, 'steps(7, jump-both)');
  assert_equals(computedStyle.webkitAnimationTimingFunction, 'steps(7, jump-both)');

  style.animationTimingFunction = "steps(8, jump-start)";
  assert_equals(style.animationTimingFunction, 'steps(8, jump-start)');
  assert_equals(computedStyle.animationTimingFunction, 'steps(8, jump-start)');
  assert_equals(style.webkitAnimationTimingFunction, 'steps(8, jump-start)');
  assert_equals(computedStyle.webkitAnimationTimingFunction, 'steps(8, jump-start)');

  style.animationTimingFunction = "steps(9, start)";
  assert_equals(style.animationTimingFunction, 'steps(9, start)');
  assert_equals(computedStyle.animationTimingFunction, 'steps(9, start)');
  assert_equals(style.webkitAnimationTimingFunction, 'steps(9, start)');
  assert_equals(computedStyle.webkitAnimationTimingFunction, 'steps(9, start)');

  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, '');
  assert_equals(computedStyle.animationTimingFunction, 'ease');
  assert_equals(style.webkitAnimationTimingFunction, '');
  assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease');

  style.animationTimingFunction = "steps(5, middle)";
  assert_equals(style.animationTimingFunction, '');
  assert_equals(computedStyle.animationTimingFunction, 'ease');
  assert_equals(style.webkitAnimationTimingFunction, '');
  assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease');
}, "Invalid animation-timing-function values.");
</script>
</body>
</html>
chromium/third_party/blink/web_tests/animations/animations-parsing-002.html
