| 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 |
|---|
Chromium Code Reviews
Issue 2678143003:
Move CSS animations use counters to UseCounter (Closed)
