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

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

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

<script>
'use strict';

function waitForProgress() {
  var initialWidth = getComputedStyle(target).width;
  return new Promise(resolve => {
    function poll() {
      var width = getComputedStyle(target).width;
      if (width === initialWidth) {
        requestAnimationFrame(poll);
      } else {
        resolve();
      }
    }
    requestAnimationFrame(poll);
  });
}

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

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

  target.offsetTop;  // force recalc
  target.style.width = '200px';

  waitForProgress().then(t.step_func_done(() => {
    assert_true(
        internals.isAnimatedCSSPropertyUseCounted(document, "width"),
        'After triggering the transition, width has been counted');
    assert_false(
        internals.isAnimatedCSSPropertyUseCounted(document, "height"),
        'Height is not animated, so not counted');
  }));
}, 'Using CSS transitions causes UseCounter to be incremented.');
</script>