<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>transition end event with shorthand property</title>
  <link rel="help" href="https://drafts.csswg.org/css-transitions/#transition-property-property">
  <style>
    #box {
      transition: padding 1s;
      padding: 0px 1px 2px 3px;  // top right bottom left
    }
  </style>
</head>
<body>
  <div id="container">
    <div id="box"></div>
  </div>
</body>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/css-transitions/support/helper.js"></script>
<script>
  window.onload = () => {
    function timeoutPromise() {
      return waitForAnimationFrames(5);
    }

    promise_test(async t => {
      // Make sure we have rendered the page before making the style change
      // to ensure we get transitions.
      await waitForAnimationFrames(2);

      // Change three padding properties, but preserve padding-bottom.
      // This should trigger 3 transitions.
      box.style.padding = "8px 7px 2px 5px";

      const animations = document.getAnimations();
      const properties =
          animations.map(anim => anim.transitionProperty).sort();
      assert_array_equals(properties,
                          ['padding-left', 'padding-right', 'padding-top']);

      // Expect a transitionend event for each of the CSSTransitions.
      const eventWatcher =
          new EventWatcher(t, box, 'transitionend', timeoutPromise);

      const eventsPromise =
          eventWatcher.wait_for(
              ['transitionend', 'transitionend', 'transitionend'],
              { record: 'all' }).then(events => {
        events.forEach(event => {
          assert_times_equal(event.elapsedTime, 1);
        })
      });
      animations.forEach(anim => {
        anim.finish();
      });
      await eventsPromise;

      // Ensure no unexpected events are received.
      await waitForAnimationFrames(2);
    }, 'Transition end events generated for transition on shorthand property');
  };
</script>
</html>
