animated-css-property-usecounter.html

<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>

<style>
@keyframes bgColorAnim {
  from {
    background-color: blue;
  }
  to {
    background-color: red;
  }
}

@keyframes customPropertyAnim {
  from {
    --x: blue;
  }
  to {
    --x: red;
  }
}

#target {
  width: 100px;
  height: 100px;
}
</style>

<div id="target"></div>

<script>
'use strict';

test(() => {
  assert_true(
      internals.isCSSPropertyUseCounted(document, "background-color"),
      'Usage of background-color in style causes it to be counted in ' +
      'normal CSS property UseCounter');
  assert_true(
      internals.isCSSPropertyUseCounted(document, "width"),
      'Usage of width in style causes it to be counted in normal CSS ' +
      'property UseCounter');

  assert_false(
      internals.isAnimatedCSSPropertyUseCounted(document, "background-color"),
      'Initially background-color animation has not been UseCounted');
  assert_false(
      internals.isAnimatedCSSPropertyUseCounted(document, "width"),
      'Initially width animation has not been UseCounted');

  target.style.animation = 'bgColorAnim 1s';
  target.offsetTop;  // force recalc

  assert_true(
      internals.isAnimatedCSSPropertyUseCounted(document, "background-color"),
      'After applying the animation, background-color has been counted');
  assert_false(
      internals.isAnimatedCSSPropertyUseCounted(document, "width"),
      'Width is not animated, so not counted');
}, 'Animating properties via CSS causes UseCounter to be incremented.');

test(() => {
  assert_true(
      internals.isCSSPropertyUseCounted(document, "--x"),
      'Usage of custom property --x in style causes it to be counted in ' +
      'normal CSS property UseCounter');
  assert_true(
      internals.isCSSPropertyUseCounted(document, "--y"),
      'All custom properties are counted together in normal CSS property ' +
      'UseCounter');

  assert_false(
      internals.isAnimatedCSSPropertyUseCounted(document, "--x"),
      'Initially custom property --x animation has not been UseCounted');
  assert_false(
      internals.isAnimatedCSSPropertyUseCounted(document, "--y"),
      'Initially custom property --y animation has not been UseCounted');

  target.style.animation = 'customPropertyAnim 1s';
  target.offsetTop;  // force recalc

  assert_true(
      internals.isAnimatedCSSPropertyUseCounted(document, "--x"),
      'After applying the animation, custom property animation has been counted');
  assert_true(
      internals.isAnimatedCSSPropertyUseCounted(document, "--y"),
      'All custom property animations are counted together');
}, 'Animating custom CSS properties causes UseCounter to be incremented.');
</script>
chromium/third_party/blink/web_tests/animations/usecounters/animated-css-property-usecounter.html
