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

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: LayoutTests/animations/keyframes-cssom-updates-animation.html

Issue 814083003: Update animation when changes in animation keyframes are detected. (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Detect changes in keyText() Created 5 years, 11 months 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
« no previous file with comments | « no previous file | LayoutTests/animations/timing-functions-update-animation.html » ('j') | Source/core/css/CSSKeyframeRule.cpp » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: LayoutTests/animations/keyframes-cssom-updates-animation.html
diff --git a/LayoutTests/animations/keyframes-cssom-updates-animation.html b/LayoutTests/animations/keyframes-cssom-updates-animation.html
new file mode 100644
index 0000000000000000000000000000000000000000..ad9a917f52d21fe1c9aae37715384f3705d1d5f3
--- /dev/null
+++ b/LayoutTests/animations/keyframes-cssom-updates-animation.html
@@ -0,0 +1,81 @@
+<!doctype html>
+<script src="../resources/testharness.js"></script>
+<script src="../resources/testharnessreport.js"></script>
+<style>
+ @keyframes anim {
+ 0% { left: 0px; }
+ 20% { left: 500px; }
+ 100% { left: 100px; }
+ }
+
+ #target1 {
+ animation: anim 10s -3s linear paused;
+ background-color: rgb(0, 0, 0);
+ }
+
+ #target2 {
+ animation: anim 10s -6s linear paused;
+ background-color: rgb(0, 0, 0);
+ }
+</style>
+<div id="target1"></div>
+<div id="target2"></div>
+<script>
+ test(function() {
+ assert_equals(parseInt(getComputedStyle(target1).left), 450, 'left offset');
+ assert_equals(parseInt(getComputedStyle(target2).left), 300, 'left offset');
+
+ var sheet = document.styleSheets[0];
+ var rules = sheet.rules;
+ var keyframes = rules[0];
+ keyframes.appendRule('50% { left: 500px; }');
+ keyframes.deleteRule('20%');
+
+ assert_equals(parseInt(getComputedStyle(target1).left), 300, 'left offset');
+ assert_equals(parseInt(getComputedStyle(target2).left), 420, 'left offset');
+
+ var newKeyframeRuleIndex = sheet.rules.length;
+ sheet.insertRule('@keyframes anim { 0% { left: 0px; } 100% { left: 300px; } }', newKeyframeRuleIndex); // Should override 'anim'
+
+ assert_equals(parseInt(getComputedStyle(target1).left), 90, 'left offset');
+ assert_equals(parseInt(getComputedStyle(target2).left), 180, 'left offset');
+
+ sheet.deleteRule(newKeyframeRuleIndex); // Should revert to original 'anim'
+
+ assert_equals(parseInt(getComputedStyle(target1).left), 300, 'left offset');
+ assert_equals(parseInt(getComputedStyle(target2).left), 420, 'left offset');
+
+ newStyle = document.createElement('style');
+ newStyle.appendChild(document.createTextNode('@keyframes anim { 0% { left: 100px; } 100% { left: 400px; } }'));
+ document.head.appendChild(newStyle);
+
+ assert_equals(parseInt(getComputedStyle(target1).left), 190, 'left offset');
+ assert_equals(parseInt(getComputedStyle(target2).left), 280, 'left offset');
+
+ newStyle.innerHTML = '@keyframes anim { 0% { left: 200px; } 100% { left: 400px; } }';
+
+ assert_equals(parseInt(getComputedStyle(target1).left), 260, 'left offset');
+ assert_equals(parseInt(getComputedStyle(target2).left), 320, 'left offset');
+
+ document.head.removeChild(newStyle); // Should revert to original 'anim' with 50% { left: 500px; } replacing 20%.
+
+ assert_equals(parseInt(getComputedStyle(target1).left), 300, 'left offset');
+ assert_equals(parseInt(getComputedStyle(target2).left), 420, 'left offset');
+
+ assert_equals(keyframes.cssRules.length, 3);
+ var keyframe = keyframes[2];
+ assert_equals(keyframe.keyText, '50%');
+ keyframe.style.setProperty('background-color', 'rgb(200, 100, 50)');
+ assert_equals(getComputedStyle(target1).backgroundColor, 'rgb(120, 60, 30)');
+ assert_equals(getComputedStyle(target2).backgroundColor, 'rgb(160, 80, 40)');
+
+ keyframe.style.removeProperty('background-color');
+ assert_equals(getComputedStyle(target1).backgroundColor, 'rgb(0, 0, 0)');
+ assert_equals(getComputedStyle(target2).backgroundColor, 'rgb(0, 0, 0)');
+
+ keyframe.keyText = '20%';
+ assert_equals(parseInt(getComputedStyle(target1).left), 450, 'left offset');
+ assert_equals(parseInt(getComputedStyle(target2).left), 300, 'left offset');
shend 2015/01/06 00:36:18 With respect to the discussion on Friday, would th
+
+ }, "Check that changes to animation via CSSOM update it accordingly");
+</script>
« no previous file with comments | « no previous file | LayoutTests/animations/timing-functions-update-animation.html » ('j') | Source/core/css/CSSKeyframeRule.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698