animations-parsing-001.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.animationName, 'none');
  assert_equals(computedStyle.webkitAnimationName, 'none');

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