Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(65)

Unified Diff: third_party/WebKit/LayoutTests/animations/custom-properties/unregistered-inheritance.html

Issue 2532953008: Apply custom property animations (Closed)
Patch Set: Make animatedElement usage consistent Created 4 years ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
Index: third_party/WebKit/LayoutTests/animations/custom-properties/unregistered-inheritance.html
diff --git a/third_party/WebKit/LayoutTests/animations/custom-properties/unregistered-inheritance.html b/third_party/WebKit/LayoutTests/animations/custom-properties/unregistered-inheritance.html
new file mode 100644
index 0000000000000000000000000000000000000000..3e4ef366bb4fbab9c234e276a2e6fb9e1e6fc53a
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/animations/custom-properties/unregistered-inheritance.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<style>
+@keyframes test {
+ from { --x: green; }
+ to { --x: lime; }
+}
+#parentA, #parentB {
+ --x: red;
+}
+#targetA, #targetB {
+ background-color: var(--x);
+}
+#parentA {
+ animation: test 10s -2s;
+}
+#parentB {
+ animation: test 10s -8s;
+}
+</style>
+<div id="parentA">
+ <div id="targetA"></div>
+</div>
+<div id="parentB">
+ <div id="targetB"></div>
+</div>
+<script>
+test(() => {
+ assert_equals(getComputedStyle(targetA).getPropertyValue('--x'), ' green');
+ assert_equals(getComputedStyle(targetB).getPropertyValue('--x'), ' lime');
+}, 'CSS Animations on custom properties should get inherited');
+
+test(() => {
+ assert_equals(getComputedStyle(targetA).backgroundColor, 'rgb(0, 128, 0)');
+ assert_equals(getComputedStyle(targetB).backgroundColor, 'rgb(0, 255, 0)');
+}, 'CSS Animations on custom properties that get inherited should be reflected in var() references');
+</script>

Powered by Google App Engine
This is Rietveld 408576698