LayoutTests/animations/keyframes-cssom-updates-animation.html - Issue 814083003: Update animation when changes in animation keyframes are detected.

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 + 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 | « LayoutTests/animations/keyframes-cssom-change-name-updates-animation.html ('k') | LayoutTests/animations/keyframes-cssom-updates-compositor-animation.html » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | 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..aa8474b26aae754d527c316c476005f40a2954ec

--- /dev/null

+++ b/LayoutTests/animations/keyframes-cssom-updates-animation.html

@@ -0,0 +1,66 @@

+<!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;

+ left: 0px;

+ }

+ #target2 {

+ animation: anim 10s -6s linear paused;

+ left: 100px;

+ }

+</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');

+ }, "Check that changes to animation via CSSOM update it accordingly");

+</script>