Codebase Browser
chromium
Go to App

chromium/third_party/blink/web_tests/animations/animations-parsing-004.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_not_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_not_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_not_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>