transition-em-unit.html | Explore in Territory

<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script>
  CSS.registerProperty({
    name: '--x',
    syntax: '<length>',
    inherits: false,
    initialValue: '0px'
  });
  CSS.registerProperty({
    name: '--y',
    syntax: '<integer>',
    inherits: false,
    initialValue: '0'
  });
</script>
<style>
#target1 {
  font-size: 10px;
  --x: 10em;
  transition: --x 3600s steps(2, start);
}
#target1.test {
  font-size: 20px;
}
#target2 {
  font-size: 10px;
  --x: 100px;
  --y: 0;
  transition: --x 0.1s, --y 0.1s;
}
#target2.test {
  --x: 10em;
  --y: 10;
}
</style>
<div id="target1"></div>
<div id="target2"></div>
<script>

test(() => {
  target1.offsetTop;
  target1.classList.toggle('test');
  let s = getComputedStyle(target1);
  assert_equals(s.getPropertyValue('--x'), '150px');
}, 'Transition starts when computed value changes via em unit');

promise_test(async () => {
  target2.offsetTop;

  // Collect all transitionstart events.
  let start_events = [];
  target2.addEventListener('transitionstart', (e) => start_events.push(e));

  // Wait for any transitionend.
  await new Promise((resolve, reject) => {
    target2.addEventListener('transitionend', resolve);
    target2.classList.toggle('test');
  });

  // --y should transition, but --x should not.
  assert_equals(start_events.length, 1);
}, 'No transition when computed value does not change');

</script>
chromium/third_party/blink/web_tests/animations/custom-properties/transition-em-unit.html
