Chromium Code Reviews| Index: third_party/WebKit/LayoutTests/animations/animated-css-property-usecounter.html |
| diff --git a/third_party/WebKit/LayoutTests/animations/animated-css-property-usecounter.html b/third_party/WebKit/LayoutTests/animations/animated-css-property-usecounter.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..6f9c357ee8d97612b714f0b8196c74ab191e5769 |
| --- /dev/null |
| +++ b/third_party/WebKit/LayoutTests/animations/animated-css-property-usecounter.html |
| @@ -0,0 +1,91 @@ |
| +<!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(() => { |
| + // FIXME(suzyh): CSS property UseCounter should include custom properties |
|
alancutter (OOO until 2018)
2017/02/20 23:49:38
Tests should be testing what we want to happen and
|
| + assert_false( |
| + internals.isCSSPropertyUseCounted(document, "--x"), |
| + 'Usage of custom property --x in style is not counted in ' + |
| + 'normal CSS property UseCounter'); |
| + assert_false( |
| + 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> |