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

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

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

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

  style.transitionDuration = "5s";
  assert_equals(style.transitionDuration, '5s');
  assert_equals(computedStyle.transitionDuration, '5s');
  assert_equals(style.webkitTransitionDuration, '5s');
  assert_equals(computedStyle.webkitTransitionDuration, '5s');

  style.transitionDuration = "10ms";
  assert_equals(style.transitionDuration, '10ms');
  assert_equals(computedStyle.transitionDuration, '0.01s');
  assert_equals(style.webkitTransitionDuration, '10ms');
  assert_equals(computedStyle.webkitTransitionDuration, '0.01s');

  style.transitionProperty = "opacity, width";

  style.transitionDuration = "10ms, 20s";
  assert_equals(style.transitionDuration, '10ms, 20s');
  assert_equals(computedStyle.transitionDuration, '0.01s, 20s');
  assert_equals(style.webkitTransitionDuration, '10ms, 20s');
  assert_equals(computedStyle.webkitTransitionDuration, '0.01s, 20s');
}, "Valid transition-duration values.");

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

  // Negative values are invalid.
  style.transitionDuration = "-10ms";
  assert_equals(style.transitionDuration, '');
  assert_equals(computedStyle.transitionDuration, '0s');
  assert_equals(style.webkitTransitionDuration, '');
  assert_equals(computedStyle.webkitTransitionDuration, '0s');

  style.transitionDuration = "'5ms'";
  assert_equals(style.transitionDuration, '');
  assert_equals(computedStyle.transitionDuration, '0s');
  assert_equals(style.webkitTransitionDuration, '');
  assert_equals(computedStyle.webkitTransitionDuration, '0s');

  style.transitionDuration = "30px";
  assert_equals(style.transitionDuration, '');
  assert_equals(computedStyle.transitionDuration, '0s');
  assert_equals(style.webkitTransitionDuration, '');
  assert_equals(computedStyle.webkitTransitionDuration, '0s');

  style.transitionDuration = "solid";
  assert_equals(style.transitionDuration, '');
  assert_equals(computedStyle.transitionDuration, '0s');
  assert_equals(style.webkitTransitionDuration, '');
  assert_equals(computedStyle.webkitTransitionDuration, '0s');

  style.transitionDuration = "20";
  assert_equals(style.transitionDuration, '');
  assert_equals(computedStyle.transitionDuration, '0s');
  assert_equals(style.webkitTransitionDuration, '');
  assert_equals(computedStyle.webkitTransitionDuration, '0s');

  style.transitionDuration = "20%";
  assert_equals(style.transitionDuration, '');
  assert_equals(computedStyle.transitionDuration, '0s');
  assert_equals(style.webkitTransitionDuration, '');
  assert_equals(computedStyle.webkitTransitionDuration, '0s');

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