| OLD | NEW |
| (Empty) |
| 1 <!DOCTYPE html> | |
| 2 <script src="../../resources/testharness.js"></script> | |
| 3 <script src="../../resources/testharnessreport.js"></script> | |
| 4 | |
| 5 <style> | |
| 6 @keyframes bgColorAnim { | |
| 7 from { | |
| 8 background-color: blue; | |
| 9 } | |
| 10 to { | |
| 11 background-color: red; | |
| 12 } | |
| 13 } | |
| 14 | |
| 15 @keyframes customPropertyAnim { | |
| 16 from { | |
| 17 --x: blue; | |
| 18 } | |
| 19 to { | |
| 20 --x: red; | |
| 21 } | |
| 22 } | |
| 23 | |
| 24 #target { | |
| 25 width: 100px; | |
| 26 height: 100px; | |
| 27 } | |
| 28 </style> | |
| 29 | |
| 30 <div id="target"></div> | |
| 31 | |
| 32 <script> | |
| 33 'use strict'; | |
| 34 | |
| 35 test(() => { | |
| 36 assert_true( | |
| 37 internals.isCSSPropertyUseCounted(document, "background-color"), | |
| 38 'Usage of background-color in style causes it to be counted in ' + | |
| 39 'normal CSS property UseCounter'); | |
| 40 assert_true( | |
| 41 internals.isCSSPropertyUseCounted(document, "width"), | |
| 42 'Usage of width in style causes it to be counted in normal CSS ' + | |
| 43 'property UseCounter'); | |
| 44 | |
| 45 assert_false( | |
| 46 internals.isAnimatedCSSPropertyUseCounted(document, "background-color"), | |
| 47 'Initially background-color animation has not been UseCounted'); | |
| 48 assert_false( | |
| 49 internals.isAnimatedCSSPropertyUseCounted(document, "width"), | |
| 50 'Initially width animation has not been UseCounted'); | |
| 51 | |
| 52 target.style.animation = 'bgColorAnim 1s'; | |
| 53 target.offsetTop; // force recalc | |
| 54 | |
| 55 assert_true( | |
| 56 internals.isAnimatedCSSPropertyUseCounted(document, "background-color"), | |
| 57 'After applying the animation, background-color has been counted'); | |
| 58 assert_false( | |
| 59 internals.isAnimatedCSSPropertyUseCounted(document, "width"), | |
| 60 'Width is not animated, so not counted'); | |
| 61 }, 'Animating properties via CSS causes UseCounter to be incremented.'); | |
| 62 | |
| 63 test(() => { | |
| 64 assert_true( | |
| 65 internals.isCSSPropertyUseCounted(document, "--x"), | |
| 66 'Usage of custom property --x in style causes it to be counted in ' + | |
| 67 'normal CSS property UseCounter'); | |
| 68 assert_true( | |
| 69 internals.isCSSPropertyUseCounted(document, "--y"), | |
| 70 'All custom properties are counted together in normal CSS property ' + | |
| 71 'UseCounter'); | |
| 72 | |
| 73 assert_false( | |
| 74 internals.isAnimatedCSSPropertyUseCounted(document, "--x"), | |
| 75 'Initially custom property --x animation has not been UseCounted'); | |
| 76 assert_false( | |
| 77 internals.isAnimatedCSSPropertyUseCounted(document, "--y"), | |
| 78 'Initially custom property --y animation has not been UseCounted'); | |
| 79 | |
| 80 target.style.animation = 'customPropertyAnim 1s'; | |
| 81 target.offsetTop; // force recalc | |
| 82 | |
| 83 assert_true( | |
| 84 internals.isAnimatedCSSPropertyUseCounted(document, "--x"), | |
| 85 'After applying the animation, custom property animation has been counted'
); | |
| 86 assert_true( | |
| 87 internals.isAnimatedCSSPropertyUseCounted(document, "--y"), | |
| 88 'All custom property animations are counted together'); | |
| 89 }, 'Animating custom CSS properties causes UseCounter to be incremented.'); | |
| 90 </script> | |
| OLD | NEW |