transition-property-layer-collision.html

<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<body></body>
<script>
function createTarget() {
  var target = document.createElement('div');
  document.body.appendChild(target);
  return target;
}

test(() => {
  var target = createTarget();
  target.style.left = '100px';
  assert_equals(getComputedStyle(target).left, '100px');
  target.style.transition = 'left 1s -0.5s, left 1s -0.25s linear';
  target.style.left = '200px';
  assert_equals(getComputedStyle(target).left, '125px');
  target.remove();
}, 'The last timing properties for a transition property should be used');

test(() => {
  var target = createTarget();
  target.style.left = '100px';
  assert_equals(getComputedStyle(target).left, '100px');
  target.style.transition = 'left 1s -0.5s, all 1s -0.25s linear';
  target.style.left = '200px';
  assert_equals(getComputedStyle(target).left, '125px');
  target.remove();
}, 'The last timing properties for a transition property should be used including shorthand references to the property');

test(() => {
  var target = createTarget();
  target.style.left = '100px';
  assert_equals(getComputedStyle(target).left, '100px');
  target.style.transition = 'left 1s -0.5s, left 0s';
  target.style.left = '200px';
  assert_equals(getComputedStyle(target).left, '200px');
  target.remove();
}, 'The last timing properties for a transition property should be used even if they cause the transition to not start');
</script>
chromium/third_party/blink/web_tests/transitions/transition-property-layer-collision.html
