animations-parsing-003.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.animationDelay, '0s');
  assert_equals(computedStyle.webkitAnimationDelay, '0s');

  style.animationDelay = "0s";
  assert_not_equals(Object.keys(style).indexOf('animationDelay'), -1);
  assert_not_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_not_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>
chromium/third_party/blink/web_tests/animations/animations-parsing-003.html
