<!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(() => {
  // Test initial value.
  assert_equals(computedStyle.transitionProperty, 'all');
  assert_equals(computedStyle.webkitTransitionProperty, 'all');

  style.transitionProperty = "none";
  assert_not_equals(Object.keys(style).indexOf('transitionProperty'), -1);
  assert_not_equals(Object.keys(style).indexOf('webkitTransitionProperty'), -1);
  assert_equals(style.transitionProperty, 'none');
  assert_equals(computedStyle.transitionProperty, 'none');
  assert_equals(style.webkitTransitionProperty, 'none');
  assert_equals(computedStyle.webkitTransitionProperty, 'none');

  style.transitionProperty = "all";
  assert_equals(style.transitionProperty, 'all');
  assert_equals(computedStyle.transitionProperty, 'all');
  assert_equals(style.webkitTransitionProperty, 'all');
  assert_equals(computedStyle.webkitTransitionProperty, 'all');

  style.transitionProperty = "all, all";
  assert_equals(style.transitionProperty, 'all, all');
  assert_equals(computedStyle.transitionProperty, 'all, all');
  assert_equals(style.webkitTransitionProperty, 'all, all');
  assert_equals(computedStyle.webkitTransitionProperty, 'all, all');

  style.transitionProperty = "-webkit-transform-origin";
  assert_equals(style.transitionProperty, '-webkit-transform-origin');
  assert_equals(computedStyle.transitionProperty, '-webkit-transform-origin');

  style.transitionProperty = "background-position";
  assert_equals(style.transitionProperty, 'background-position');
  assert_equals(computedStyle.transitionProperty, 'background-position');
  assert_equals(style.webkitTransitionProperty, 'background-position');
  assert_equals(computedStyle.webkitTransitionProperty, 'background-position');

  style.transitionProperty = "background-position, font-size";
  assert_equals(style.transitionProperty, 'background-position, font-size');
  assert_equals(computedStyle.transitionProperty, 'background-position, font-size');
  assert_equals(style.webkitTransitionProperty, 'background-position, font-size');
  assert_equals(computedStyle.webkitTransitionProperty, 'background-position, font-size');

  style.transitionProperty = "background-position, font-size, color";
  assert_equals(style.transitionProperty, 'background-position, font-size, color');
  assert_equals(computedStyle.transitionProperty, 'background-position, font-size, color');
  assert_equals(style.webkitTransitionProperty, 'background-position, font-size, color');
  assert_equals(computedStyle.webkitTransitionProperty, 'background-position, font-size, color');

  style.transitionProperty = "all, font-size, color";
  assert_equals(style.transitionProperty, 'all, font-size, color');
  assert_equals(computedStyle.transitionProperty, 'all, font-size, color');
  assert_equals(style.webkitTransitionProperty, 'all, font-size, color');
  assert_equals(computedStyle.webkitTransitionProperty, 'all, font-size, color');

  style.transitionProperty = "font-size, color, all";
  assert_equals(style.transitionProperty, 'font-size, color, all');
  assert_equals(computedStyle.transitionProperty, 'font-size, color, all');
  assert_equals(style.webkitTransitionProperty, 'font-size, color, all');
  assert_equals(computedStyle.webkitTransitionProperty, 'font-size, color, all');

  style.transitionProperty = "font-size, all, color";
  assert_equals(style.transitionProperty, 'font-size, all, color');
  assert_equals(computedStyle.transitionProperty, 'font-size, all, color');
  assert_equals(style.webkitTransitionProperty, 'font-size, all, color');
  assert_equals(computedStyle.webkitTransitionProperty, 'font-size, all, color');
}, "Valid transition-property values.");

test(() => {

  style.transitionProperty = "solid, font-size";
  assert_equals(style.transitionProperty, 'solid, font-size');
  assert_equals(computedStyle.transitionProperty, 'solid, font-size');
  assert_equals(style.webkitTransitionProperty, 'solid, font-size');
  assert_equals(computedStyle.webkitTransitionProperty, 'solid, font-size');

  style.transitionProperty = "solid, left";
  assert_equals(style.transitionProperty, 'solid, left');
  assert_equals(computedStyle.transitionProperty, 'solid, left');
  assert_equals(style.webkitTransitionProperty, 'solid, left');
  assert_equals(computedStyle.webkitTransitionProperty, 'solid, left');

  style.transitionProperty = "solid";
  assert_equals(style.transitionProperty, 'solid');
  assert_equals(computedStyle.transitionProperty, 'solid');
  assert_equals(style.webkitTransitionProperty, 'solid');
  assert_equals(computedStyle.webkitTransitionProperty, 'solid');

  style.transitionProperty = "default, top";
  assert_equals(style.transitionProperty, 'default, top');
  assert_equals(computedStyle.transitionProperty, 'default, top');
  assert_equals(style.webkitTransitionProperty, 'default, top');
  assert_equals(computedStyle.webkitTransitionProperty, 'default, top');
}, "Unknown transition-property values.");

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

  style.transitionProperty = "20px";
  assert_equals(style.transitionProperty, '');
  assert_equals(computedStyle.transitionProperty, 'all');
  assert_equals(style.webkitTransitionProperty, '');
  assert_equals(computedStyle.webkitTransitionProperty, 'all');

  style.transitionProperty = "0";
  assert_equals(style.transitionProperty, '');
  assert_equals(computedStyle.transitionProperty, 'all');
  assert_equals(style.webkitTransitionProperty, '');
  assert_equals(computedStyle.webkitTransitionProperty, 'all');

  style.transitionProperty = "'font-size'";
  assert_equals(style.transitionProperty, '');
  assert_equals(computedStyle.transitionProperty, 'all');
  assert_equals(style.webkitTransitionProperty, '');
  assert_equals(computedStyle.webkitTransitionProperty, 'all');

  style.transitionProperty = "all none";
  assert_equals(style.transitionProperty, '');
  assert_equals(computedStyle.transitionProperty, 'all');
  assert_equals(style.webkitTransitionProperty, '');
  assert_equals(computedStyle.webkitTransitionProperty, 'all');

  style.transitionProperty = "opacity width";
  assert_equals(style.transitionProperty, '');
  assert_equals(computedStyle.transitionProperty, 'all');
  assert_equals(style.webkitTransitionProperty, '');
  assert_equals(computedStyle.webkitTransitionProperty, 'all');

  style.transitionProperty = "all, none";
  assert_equals(style.transitionProperty, '');
  assert_equals(computedStyle.transitionProperty, 'all');
  assert_equals(style.webkitTransitionProperty, '');
  assert_equals(computedStyle.webkitTransitionProperty, 'all');

  style.transitionProperty = "none, none";
  assert_equals(style.transitionProperty, '');
  assert_equals(computedStyle.transitionProperty, 'all');
  assert_equals(style.webkitTransitionProperty, '');
  assert_equals(computedStyle.webkitTransitionProperty, 'all');

  style.transitionProperty = "none, all";
  assert_equals(style.transitionProperty, '');
  assert_equals(computedStyle.transitionProperty, 'all');
  assert_equals(style.webkitTransitionProperty, '');
  assert_equals(computedStyle.webkitTransitionProperty, 'all');

  style.transitionProperty = "width, none";
  assert_equals(style.transitionProperty, '');
  assert_equals(computedStyle.transitionProperty, 'all');
  assert_equals(style.webkitTransitionProperty, '');
  assert_equals(computedStyle.webkitTransitionProperty, 'all');

  style.transitionProperty = "none, width";
  assert_equals(style.transitionProperty, '');
  assert_equals(computedStyle.transitionProperty, 'all');
  assert_equals(style.webkitTransitionProperty, '');
  assert_equals(computedStyle.webkitTransitionProperty, 'all');

  style.transitionProperty = "initial, width";
  assert_equals(style.transitionProperty, '');
  style.transitionProperty = "width, inherit";
  assert_equals(style.transitionProperty, '');
  style.transitionProperty = "left, unset";
  assert_equals(style.transitionProperty, '');

  style.transitionProperty = "";
}, "Invalid transition-property values.");
</script>
</body>
</html>