extra-transition.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="../resources/testharness.js"></script>
  <script src="../resources/testharnessreport.js"></script>
  <style>
  div > #picture {
      transition-property: transform;
      transition-duration: 50ms;
      transition-timing-function: ease-in;
      transform: scale(2);
  }

  div.enabled > #picture {
      transition-timing-function: ease-out;
      transform: scale(3);
  }

  div > #description {
      transition-property: transform;
      transition-duration: 90ms;
      transition-timing-function: ease-in;
  }

  div.enabled > #description {
      transform: translate3d(100px,0,0);
  }
  </style>
</head>
<body>

<div id="item">
  <div id="picture"></div>
  <div id="description"></div>
</div>
<script>
  'use strict';
  async_test(t => {
    description.addEventListener('transitionend', t.step_func_done(() => {
      assert_equals(getComputedStyle(picture).transform, 'matrix(3, 0, 0, 3, 0, 0)');
      assert_equals(getComputedStyle(description).transform, 'matrix(1, 0, 0, 1, 100, 0)');
    }));

    document.body.offsetHeight; // Force style recalc
    item.className = 'enabled';
  });
</script>
</body>
</html>
chromium/third_party/blink/web_tests/transitions/extra-transition.html
