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