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

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: Rebase and address comments 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/animation/css/CSSAnimationUpdate.h » ('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..0a7af1d550419faf31a2e9d50f1fe35dbdb78176
--- /dev/null
+++ b/LayoutTests/animations/keyframes-cssom-updates-animation.html
@@ -0,0 +1,111 @@
+<!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; }
+ }
+
+ @keyframes anim-compositor {
+ 0% { opacity: 1.0; }
+ 100% { opacity: 1.0; }
+ }
+
+ #target1 {
+ animation: anim 10s -3s linear paused;
+ background-color: rgb(0, 0, 0);
+ left: 0px;
+ }
+
+ #target2 {
+ animation: anim 10s -6s linear paused;
+ background-color: rgb(0, 0, 0);
+ left: 100px;
+ }
+
+ #target3 {
+ animation: anim-compositor 2s -1s linear paused;
+ }
+</style>
+<div id="target1"></div>
+<div id="target2"></div>
+<div id="target3"></div>
+<script>
+ test(function() {
Timothy Loh 2015/01/30 02:43:44 Split this up into separate tests
shend 2015/02/01 23:49:13 Done.
+ 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.style.left = '200px';
+ assert_equals(parseInt(getComputedStyle(target1).left), 120, 'left offset');
+ assert_equals(parseInt(getComputedStyle(target2).left), 180, 'left offset');
+
+ keyframe.style.left = '500px';
+ keyframe.keyText = '20%';
+ assert_equals(parseInt(getComputedStyle(target1).left), 450, 'left offset');
+ assert_equals(parseInt(getComputedStyle(target2).left), 300, 'left offset');
+
+ keyframes.name = 'foobar';
+ assert_equals(parseInt(getComputedStyle(target1).left), 0, 'left offset');
+ assert_equals(parseInt(getComputedStyle(target2).left), 100, 'left offset');
+
+ keyframes.name = 'anim';
+ assert_equals(parseInt(getComputedStyle(target1).left), 450, 'left offset');
+ assert_equals(parseInt(getComputedStyle(target2).left), 300, 'left offset');
+
+ var compositorKeyframes = rules[1];
+ assert_approx_equals(parseFloat(getComputedStyle(target3).opacity), 1.0, 0.001, 'opacity');
+ compositorKeyframes.appendRule('50% { opacity: 0.0; }');
+ assert_approx_equals(parseFloat(getComputedStyle(target3).opacity), 0.0, 0.001, 'opacity');
+
+ }, "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/animation/css/CSSAnimationUpdate.h » ('J')

Powered by Google App Engine
This is Rietveld 408576698