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