<!doctype html>
<meta charset=utf-8>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../testcommon.js"></script>
<body>
<div id="log"></div>
<script>
"use strict";

// Tests that we correctly extract the underlying value when the animation
// type is 'discrete'.
const discreteTests = [
  {
    stylesheet: {
      "@keyframes keyframes":
      "from { align-content: flex-start; } to { align-content: flex-end; } "
    },
    expectedKeyframes: [
      { computedOffset: 0, alignContent: "flex-start" },
      { computedOffset: 1, alignContent: "flex-end" }
    ],
    explanation: "Test for fully-specified keyframes"
  },
  {
    stylesheet: {
      "@keyframes keyframes": "from { align-content: flex-start; }"
    },
    expectedKeyframes: [
      { computedOffset: 0, alignContent: "flex-start" },
      { computedOffset: 1, alignContent: "normal" }
    ],
    explanation: "Test for 0% keyframe only",
  },
  {
    stylesheet: {
      "@keyframes keyframes": "to { align-content: flex-end; }"
    },
    expectedKeyframes: [
      { computedOffset: 0, alignContent: "normal" },
      { computedOffset: 1, alignContent: "flex-end" }
    ],
    explanation: "Test for 100% keyframe only",
  },
  {
    stylesheet: {
      "@keyframes keyframes": "50% { align-content: center; }",
      "#target": "align-content: space-between;"
    },
    expectedKeyframes: [
      { computedOffset: 0, alignContent: "space-between" },
      { computedOffset: 0.5, alignContent: "center" },
      { computedOffset: 1, alignContent: "space-between" }
    ],
    explanation: "Test for no 0%/100% keyframes " +
                 "and specified style on target element"
  },
  {
    stylesheet: {
      "@keyframes keyframes": "50% { align-content: center; }"
    },
    attributes: {
      style: "align-content: space-between"
    },
    expectedKeyframes: [
      { computedOffset: 0, alignContent: "space-between" },
      { computedOffset: 0.5, alignContent: "center" },
      { computedOffset: 1, alignContent: "space-between" }
    ],
    explanation: "Test for no 0%/100% keyframes " +
                 "and specified style on target element using style attribute"
  },
  {
    stylesheet: {
      "@keyframes keyframes": "50% { align-content: center; }",
      "#target": "align-content: inherit;"
    },
    expectedKeyframes: [
      { computedOffset: 0, alignContent: "normal" },
      { computedOffset: 0.5, alignContent: "center" },
      { computedOffset: 1, alignContent: "normal" }
    ],
    explanation: "Test for no 0%/100% keyframes " +
                 "and 'inherit' specified on target element",
  },
  {
    stylesheet: {
      "@keyframes keyframes": "50% { align-content: center; }",
      ".target": "align-content: space-between;"
    },
    attributes: {
      class: "target"
    },
    expectedKeyframes: [
      { computedOffset: 0, alignContent: "space-between" },
      { computedOffset: 0.5, alignContent: "center" },
      { computedOffset: 1, alignContent: "space-between" }
    ],
    explanation: "Test for no 0%/100% keyframes " +
                 "and specified style on target element using class selector"
  },
  {
    stylesheet: {
      "@keyframes keyframes": "50% { align-content: center; }",
      "div": "align-content: space-between;"
    },
    expectedKeyframes: [
      { computedOffset: 0, alignContent: "space-between" },
      { computedOffset: 0.5, alignContent: "center" },
      { computedOffset: 1, alignContent: "space-between" }
    ],
    explanation: "Test for no 0%/100% keyframes " +
                 "and specified style on target element using type selector"
  },
  {
    stylesheet: {
      "@keyframes keyframes": "50% { align-content: center; }",
      "div": "align-content: space-between;",
      ".target": "align-content: flex-start;",
      "#target": "align-content: flex-end;"
    },
    attributes: {
      class: "target"
    },
    expectedKeyframes: [
      { computedOffset: 0, alignContent: "flex-end" },
      { computedOffset: 0.5, alignContent: "center" },
      { computedOffset: 1, alignContent: "flex-end" }
    ],
    explanation: "Test for no 0%/100% keyframes " +
                 "and specified style on target element " +
                 "using ID selector that overrides class selector"
  },
  {
    stylesheet: {
      "@keyframes keyframes": "50% { align-content: center; }",
      "div": "align-content: space-between !important;",
      ".target": "align-content: flex-start;",
      "#target": "align-content: flex-end;"
    },
    attributes: {
      class: "target"
    },
    expectedKeyframes: [
      { computedOffset: 0, alignContent: "space-between" },
      { computedOffset: 0.5, alignContent: "center" },
      { computedOffset: 1, alignContent: "space-between" }
    ],
    explanation: "Test for no 0%/100% keyframes " +
                 "and specified style on target element " +
                 "using important type selector that overrides other rules"
  },
];

discreteTests.forEach(testcase => {
  test(t => {
    if (testcase.skip) {
      return;
    }
    addStyle(t, testcase.stylesheet);

    const div = addDiv(t, { "id": "target" });
    if (testcase.attributes) {
      for (let attributeName in testcase.attributes) {
        div.setAttribute(attributeName, testcase.attributes[attributeName]);
      }
    }
    div.style.animation = "keyframes 100s";

    const keyframes = div.getAnimations()[0].effect.getKeyframes();
    const expectedKeyframes = testcase.expectedKeyframes;
    assert_equals(keyframes.length, expectedKeyframes.length,
                  `keyframes.length should be ${ expectedKeyframes.length }`);

    keyframes.forEach((keyframe, index) => {
      const expectedKeyframe = expectedKeyframes[index];
      assert_equals(keyframe.computedOffset, expectedKeyframe.computedOffset,
                    `computedOffset of keyframes[${ index }] should be ` +
                    `${ expectedKeyframe.computedOffset }`);
      assert_equals(keyframe.alignContent, expectedKeyframe.alignContent,
                    `alignContent of keyframes[${ index }] should be ` +
                    `${ expectedKeyframe.alignContent }`);
    });
  }, testcase.explanation);
});

</script>
</body>
