<!DOCTYPE HTML>
<html>
<head>
  <title>Test animations of all properties that have -moz prefix</title>
  <script src="/resources/testharness.js"></script>
  <script src="/resources/testharnessreport.js"></script>
  <script src="../testcommon.js"></script>
  <script src="../property_database.js"></script>
</head>
<body>
<div id="log"></div>
<script>
"use strict";

const testcases = [
  {
    property: "-moz-box-align"
  },
  {
    property: "-moz-box-direction"
  },
  {
    property: "-moz-box-ordinal-group"
  },
  {
    property: "-moz-box-orient",
  },
  {
    property: "-moz-box-pack"
  },
  {
    property: "-moz-float-edge"
  },
  {
    property: "-moz-force-broken-image-icon"
  },
  {
    property: "-moz-orient"
  },
  {
    property: "-moz-osx-font-smoothing",
    pref: "layout.css.osx-font-smoothing.enabled"
  },
  {
    property: "-moz-text-size-adjust"
  },
  {
    property: "-moz-user-focus"
  },
  {
    property: "-moz-user-input"
  },
  {
    property: "-moz-user-modify"
  },
  {
    property: "user-select"
  },
  {
    property: "-moz-window-dragging"
  },
];

testcases.forEach(testcase => {
  if (testcase.pref && !IsCSSPropertyPrefEnabled(testcase.pref)) {
    return;
  }

  const property = gCSSProperties[testcase.property];
  const values = property.initial_values.concat(property.other_values);
  values.forEach(value => {
    test(function(t) {
      const container = addDiv(t);
      const target = document.createElement("div");
      container.appendChild(target);

      container.style[property.domProp] = value;

      const animation =
        target.animate({ [property.domProp]: [value, "inherit"] },
                       { duration: 1000, delay: -500 } );

      const expectedValue = getComputedStyle(container)[property.domProp];
      assert_equals(getComputedStyle(target)[property.domProp], expectedValue,
                    `Computed style shoud be "${ expectedValue }"`);
    }, `Test inherit value for "${ testcase.property }" `
       + `(Parent element style is "${ value }")`);
  });
});
</script>
</pre>
</body>
</html>
