| <!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> |
