transitions-parsing-004.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 transitions properties.

var e = document.getElementById('test');
var style = e.style;
var computedStyle = window.getComputedStyle(e, null);

test(() => {
  // Initial test.
  assert_equals(computedStyle.transitionDelay, '0s');
  assert_equals(computedStyle.webkitTransitionDelay, '0s');

  style.transitionDelay = "0s";
  assert_not_equals(Object.keys(style).indexOf('transitionDelay'), -1);
  assert_not_equals(Object.keys(style).indexOf('webkitTransitionDelay'), -1);
  assert_equals(style.transitionDelay, '0s');
  assert_equals(computedStyle.transitionDelay, '0s');
  assert_equals(style.webkitTransitionDelay, '0s');
  assert_equals(computedStyle.webkitTransitionDelay, '0s');

  style.transitionDelay = "5s";
  assert_equals(style.transitionDelay, '5s');
  assert_equals(computedStyle.transitionDelay, '5s');
  assert_equals(style.webkitTransitionDelay, '5s');
  assert_equals(computedStyle.webkitTransitionDelay, '5s');

  style.transitionDelay = "10ms";
  assert_equals(style.transitionDelay, '10ms');
  assert_equals(computedStyle.transitionDelay, '0.01s');
  assert_equals(style.webkitTransitionDelay, '10ms');
  assert_equals(computedStyle.webkitTransitionDelay, '0.01s');

  style.transitionDelay = "-10ms";
  assert_equals(style.transitionDelay, '-10ms');
  assert_equals(computedStyle.transitionDelay, '-0.01s');
  assert_equals(style.webkitTransitionDelay, '-10ms');
  assert_equals(computedStyle.webkitTransitionDelay, '-0.01s');

  style.transitionProperty = "opacity, width";

  style.transitionDelay = "-10ms, 20s";
  assert_equals(style.transitionDelay, '-10ms, 20s');
  assert_equals(computedStyle.transitionDelay, '-0.01s, 20s');
  assert_equals(style.webkitTransitionDelay, '-10ms, 20s');
  assert_equals(computedStyle.webkitTransitionDelay, '-0.01s, 20s');
}, "Valid transition-delay values.");

test(() => {
  style.transitionProperty = "opacity";
  style.transitionDelay = "";

  style.transitionDelay = "'5ms'";
  assert_equals(style.transitionDelay, '');
  assert_equals(computedStyle.transitionDelay, '0s');
  assert_equals(style.webkitTransitionDelay, '');
  assert_equals(computedStyle.webkitTransitionDelay, '0s');

  style.transitionDelay = "30px";
  assert_equals(style.transitionDelay, '');
  assert_equals(computedStyle.transitionDelay, '0s');
  assert_equals(style.webkitTransitionDelay, '');
  assert_equals(computedStyle.webkitTransitionDelay, '0s');

  style.transitionDelay = "solid";
  assert_equals(style.transitionDelay, '');
  assert_equals(computedStyle.transitionDelay, '0s');
  assert_equals(style.webkitTransitionDelay, '');
  assert_equals(computedStyle.webkitTransitionDelay, '0s');

  style.transitionDelay = "20";
  assert_equals(style.transitionDelay, '');
  assert_equals(computedStyle.transitionDelay, '0s');
  assert_equals(style.webkitTransitionDelay, '');
  assert_equals(computedStyle.webkitTransitionDelay, '0s');

  style.transitionDelay = "20%";
  assert_equals(style.transitionDelay, '');
  assert_equals(computedStyle.transitionDelay, '0s');
  assert_equals(style.webkitTransitionDelay, '');
  assert_equals(computedStyle.webkitTransitionDelay, '0s');

  style.transitionDelay = "0s, 20px";
  assert_equals(style.transitionDelay, '');
  assert_equals(computedStyle.transitionDelay, '0s');
  assert_equals(style.webkitTransitionDelay, '');
  assert_equals(computedStyle.webkitTransitionDelay, '0s');
}, "Invalid transition-delay values.");
</script>
</body>
</html>
chromium/third_party/blink/web_tests/transitions/transitions-parsing-004.html
