transitions-parsing-005.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);

// This function checks the return value of computedStyle.transition and verifies WebKit can parse it.
function checkTransitionShorthandValue() {
    var before = computedStyle.getPropertyValue('transition');
    e.style.transition = '';
    e.style.transition = before;
    return (computedStyle.getPropertyValue('transition') == before);
}

test(() => {
  style.transition = "";
  // Initial test.
  assert_equals(computedStyle.transition, 'all');
  assert_equals(computedStyle.webkitTransition, 'all');

  style.transition = "none";
  assert_not_equals(Object.keys(style).indexOf('transition'), -1);
  assert_not_equals(Object.keys(style).indexOf('webkitTransition'), -1);
  assert_equals(style.transition, 'none');
  assert_equals(computedStyle.transition, 'none');
  assert_equals(style.webkitTransition, 'none');
  assert_equals(computedStyle.webkitTransition, 'none');
  assert_true(checkTransitionShorthandValue());

  style.transition = "none 20s";
  assert_equals(style.transition, 'none 20s');
  assert_equals(computedStyle.transition, 'none 20s');
  assert_equals(style.webkitTransition, 'none 20s');
  assert_equals(computedStyle.webkitTransition, 'none 20s');
  assert_true(checkTransitionShorthandValue());

  style.transition = "ease-in none 20s";
  assert_equals(style.transition, 'none 20s ease-in');
  assert_equals(computedStyle.transition, 'none 20s ease-in');
  assert_equals(style.webkitTransition, 'none 20s ease-in');
  assert_equals(computedStyle.webkitTransition, 'none 20s ease-in');
  assert_true(checkTransitionShorthandValue());

  style.transition = "ease-in opacity 20s";
  assert_equals(style.transition, 'opacity 20s ease-in');
  assert_equals(computedStyle.transition, 'opacity 20s ease-in');
  assert_equals(style.webkitTransition, 'opacity 20s ease-in');
  assert_equals(computedStyle.webkitTransition, 'opacity 20s ease-in');
  assert_true(checkTransitionShorthandValue());

  style.transition = "ease-in opacity 20s 10s";
  assert_equals(style.transition, 'opacity 20s ease-in 10s');
  assert_equals(computedStyle.transition, 'opacity 20s ease-in 10s');
  assert_equals(style.webkitTransition, 'opacity 20s ease-in 10s');
  assert_equals(computedStyle.webkitTransition, 'opacity 20s ease-in 10s');
  // Let's double check here the delay and duration. As stated in the spec the first value parsed
  // is assigned to the duration.
  assert_equals(computedStyle.transitionDuration, '20s');
  assert_equals(computedStyle.webkitTransitionDuration, '20s');
  assert_equals(computedStyle.transitionDelay, '10s');
  assert_equals(computedStyle.webkitTransitionDelay, '10s');
  assert_true(checkTransitionShorthandValue());

  style.transition = "20s ease-in opacity 10s";
  assert_equals(style.transition, 'opacity 20s ease-in 10s');
  assert_equals(computedStyle.transition, 'opacity 20s ease-in 10s');
  assert_equals(style.webkitTransition, 'opacity 20s ease-in 10s');
  assert_equals(computedStyle.webkitTransition, 'opacity 20s ease-in 10s');
  assert_equals(computedStyle.transitionDuration, '20s');
  assert_equals(computedStyle.webkitTransitionDuration, '20s');
  assert_equals(computedStyle.transitionDelay, '10s');
  assert_equals(computedStyle.webkitTransitionDelay, '10s');
  assert_true(checkTransitionShorthandValue());

  style.transition = "ease-in opacity 20s 10s, cubic-bezier(0.32, 0, 1, 1) 10s width 20s";
  assert_equals(style.transition, 'opacity 20s ease-in 10s, width 10s cubic-bezier(0.32, 0, 1, 1) 20s');
  assert_equals(computedStyle.transition, 'opacity 20s ease-in 10s, width 10s cubic-bezier(0.32, 0, 1, 1) 20s');
  assert_equals(style.webkitTransition, 'opacity 20s ease-in 10s, width 10s cubic-bezier(0.32, 0, 1, 1) 20s');
  assert_equals(computedStyle.webkitTransition, 'opacity 20s ease-in 10s, width 10s cubic-bezier(0.32, 0, 1, 1) 20s');
  // Let's double check here the delay and duration. As stated in the spec the first value parsed
  // is assigned to the duration.
  assert_equals(computedStyle.transitionDuration, '20s, 10s');
  assert_equals(computedStyle.webkitTransitionDuration, '20s, 10s');
  assert_equals(computedStyle.transitionDelay, '10s, 20s');
  assert_equals(computedStyle.webkitTransitionDelay, '10s, 20s');
  assert_true(checkTransitionShorthandValue());

  style.transition = "all, all";
  assert_equals(style.transition, 'all, all');
  assert_equals(computedStyle.transition, 'all, all');
  assert_equals(style.webkitTransition, 'all, all');
  assert_equals(computedStyle.webkitTransition, 'all, all');

  style.transition = "all 20s 10s ease-in, all ease-out 20s";
  assert_equals(style.transition, '20s ease-in 10s, 20s ease-out');
  assert_equals(computedStyle.transition, '20s ease-in 10s, 20s ease-out');
  assert_equals(style.webkitTransition, '20s ease-in 10s, 20s ease-out');
  assert_equals(computedStyle.webkitTransition, '20s ease-in 10s, 20s ease-out');

  style.transition = "ease-in opacity 20s 10s, all ease-out 20s";
  assert_equals(style.transition, 'opacity 20s ease-in 10s, 20s ease-out');
  assert_equals(computedStyle.transition, 'opacity 20s ease-in 10s, 20s ease-out');
  assert_equals(style.webkitTransition, 'opacity 20s ease-in 10s, 20s ease-out');
  assert_equals(computedStyle.webkitTransition, 'opacity 20s ease-in 10s, 20s ease-out');
  assert_true(checkTransitionShorthandValue());

  style.transition = " all ease-out 20s, ease-in opacity 20s 10s";
  assert_equals(style.transition, '20s ease-out, opacity 20s ease-in 10s');
  assert_equals(computedStyle.transition, '20s ease-out, opacity 20s ease-in 10s');
  assert_equals(style.webkitTransition, '20s ease-out, opacity 20s ease-in 10s');
  assert_equals(computedStyle.webkitTransition, '20s ease-out, opacity 20s ease-in 10s');
  assert_true(checkTransitionShorthandValue());
}, "Valid transition shorthand values.");

test(() => {
  style.transition = "";

  style.transition = "20";
  assert_equals(style.transition, '');
  assert_equals(computedStyle.transition, 'all');
  assert_equals(style.webkitTransition, '');
  assert_equals(computedStyle.webkitTransition, 'all');

  style.transition = "20, 20";
  assert_equals(style.transition, '');
  assert_equals(computedStyle.transition, 'all');
  assert_equals(style.webkitTransition, '');
  assert_equals(computedStyle.webkitTransition, 'all');

  style.transition = "all 30s width ease-in";
  assert_equals(style.transition, '');
  assert_equals(computedStyle.transition, 'all');
  assert_equals(style.webkitTransition, '');
  assert_equals(computedStyle.webkitTransition, 'all');

  style.transition = "all 30s ease-in 20px";
  assert_equals(style.transition, '');
  assert_equals(computedStyle.transition, 'all');
  assert_equals(style.webkitTransition, '');
  assert_equals(computedStyle.webkitTransition, 'all');

  style.transition = "all 30s ease-in 20s, 20px";
  assert_equals(style.transition, '');
  assert_equals(computedStyle.transition, 'all');
  assert_equals(style.webkitTransition, '');
  assert_equals(computedStyle.webkitTransition, 'all');

  style.transition = "all 30s ease-in 20s, step-start(2)";
  assert_equals(style.transition, '');
  assert_equals(computedStyle.transition, 'all');
  assert_equals(style.webkitTransition, '');
  assert_equals(computedStyle.webkitTransition, 'all');

  style.transition = "ease-in opacity 20s 10s, none";
  assert_equals(style.transition, '');
  assert_equals(computedStyle.transition, 'all');
  assert_equals(style.webkitTransition, '');
  assert_equals(computedStyle.webkitTransition, 'all');

  style.transition = "none, ease-in opacity 20s 10s, none";
  assert_equals(style.transition, '');
  assert_equals(computedStyle.transition, 'all');
  assert_equals(style.webkitTransition, '');
  assert_equals(computedStyle.webkitTransition, 'all');

  style.transition = "none, ease-in opacity 20s 10s";
  assert_equals(style.transition, '');
  assert_equals(computedStyle.transition, 'all');
  assert_equals(style.webkitTransition, '');
  assert_equals(computedStyle.webkitTransition, 'all');

  style.transition = "ease-in opacity 20s 10s, all 20s ease-out, none";
  assert_equals(style.transition, '');
  assert_equals(computedStyle.transition, 'all');
  assert_equals(style.webkitTransition, '');
  assert_equals(computedStyle.webkitTransition, 'all');

  style.transition = "ease-in opacity 20s 10s, ease-in width 20s 10s, none";
  assert_equals(style.transition, '');
  assert_equals(computedStyle.transition, 'all');
  assert_equals(style.webkitTransition, '');
  assert_equals(computedStyle.webkitTransition, 'all');

  style.transition = "none, none";
  assert_equals(style.transition, '');
  assert_equals(computedStyle.transition, 'all');
  assert_equals(style.webkitTransition, '');
  assert_equals(computedStyle.webkitTransition, 'all');
}, "Invalid transition shorthand values.");

test(() => {
  style.transition = "ease-in ease-out";
  assert_equals(style.transitionProperty, 'ease-out');
  assert_equals(style.transitionTimingFunction, 'ease-in');

  style.transition = "20s 10s";
  assert_equals(style.transitionDelay, '10s');
  assert_equals(style.transitionDuration, '20s');

  style.transition = "-10s 10s";
  assert_equals(style.transitionDelay, '-10s');
  assert_equals(style.transitionDuration, '10s');

  style.transition = "ease";
  assert_equals(style.transitionTimingFunction, 'ease');
  assert_equals(style.transitionProperty, 'all');
}, "Ambiguous shorthand values.");
</script>
</body>
</html>
chromium/third_party/blink/web_tests/transitions/transitions-parsing-005.html
