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

Side by Side 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 again 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 unified diff | Download patch

OLD	NEW
(Empty)
	1 <!doctype html>

	2 <script src="../resources/testharness.js"></script>

	3 <script src="../resources/testharnessreport.js"></script>

	4 <style>

	5 @keyframes anim {

	6 0% { left: 0px; }

	7 20% { left: 500px; }

	8 100% { left: 100px; }

	9 }

	10

	11 #target1 {

	12 animation: anim 10s -3s linear paused;

	13 background-color: rgb(0, 0, 0);

	14 left: 0px;

	15 }

	16

	17 #target2 {

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

	19 background-color: rgb(0, 0, 0);

	20 left: 100px;

	21 }

	22 </style>

	23 <div id="target1"></div>

	24 <div id="target2"></div>

	25 <script>

	26 test(function() {

	27 assert_equals(parseInt(getComputedStyle(target1).left), 450, 'left offset');

	28 assert_equals(parseInt(getComputedStyle(target2).left), 300, 'left offset');

	29

	30 var sheet = document.styleSheets[0];

	31 var rules = sheet.rules;

	32 var keyframes = rules[0];

	33 keyframes.appendRule('50% { left: 500px; }');

	34 keyframes.deleteRule('20%');

	35

	36 assert_equals(parseInt(getComputedStyle(target1).left), 300, 'left offset');

	37 assert_equals(parseInt(getComputedStyle(target2).left), 420, 'left offset');

	38

	39 var newKeyframeRuleIndex = sheet.rules.length;

	40 sheet.insertRule('@keyframes anim { 0% { left: 0px; } 100% { left: 300px; } }', newKeyframeRuleIndex); // Should override 'anim'

	41

	42 assert_equals(parseInt(getComputedStyle(target1).left), 90, 'left offset');

	43 assert_equals(parseInt(getComputedStyle(target2).left), 180, 'left offset');

	44

	45 sheet.deleteRule(newKeyframeRuleIndex); // Should revert to original 'anim'

	46

	47 assert_equals(parseInt(getComputedStyle(target1).left), 300, 'left offset');

	48 assert_equals(parseInt(getComputedStyle(target2).left), 420, 'left offset');

	49

	50 newStyle = document.createElement('style');

	51 newStyle.appendChild(document.createTextNode('@keyframes anim { 0% { left: 1 00px; } 100% { left: 400px; } }'));

	52 document.head.appendChild(newStyle);

	53

	54 assert_equals(parseInt(getComputedStyle(target1).left), 190, 'left offset');

	55 assert_equals(parseInt(getComputedStyle(target2).left), 280, 'left offset');

	56

	57 newStyle.innerHTML = '@keyframes anim { 0% { left: 200px; } 100% { left: 400 px; } }';

	58

	59 assert_equals(parseInt(getComputedStyle(target1).left), 260, 'left offset');

	60 assert_equals(parseInt(getComputedStyle(target2).left), 320, 'left offset');

	61

	62 document.head.removeChild(newStyle); // Should revert to original 'anim' wit h 50% { left: 500px; } replacing 20%.

	63

	64 assert_equals(parseInt(getComputedStyle(target1).left), 300, 'left offset');

	65 assert_equals(parseInt(getComputedStyle(target2).left), 420, 'left offset');

	66

	67 assert_equals(keyframes.cssRules.length, 3);

	68 var keyframe = keyframes[2];

	69 assert_equals(keyframe.keyText, '50%');

	70 keyframe.style.setProperty('background-color', 'rgb(200, 100, 50)');

	71 assert_equals(getComputedStyle(target1).backgroundColor, 'rgb(120, 60, 30)') ;

	72 assert_equals(getComputedStyle(target2).backgroundColor, 'rgb(160, 80, 40)') ;

	73

	74 keyframe.style.removeProperty('background-color');

	75 assert_equals(getComputedStyle(target1).backgroundColor, 'rgb(0, 0, 0)');

	76 assert_equals(getComputedStyle(target2).backgroundColor, 'rgb(0, 0, 0)');

	77

	78 keyframe.style.left = '200px';

	79 assert_equals(parseInt(getComputedStyle(target1).left), 120, 'left offset');

	80 assert_equals(parseInt(getComputedStyle(target2).left), 180, 'left offset');

	81

	82 keyframe.style.left = '500px';

	83 keyframe.keyText = '20%';

	84 assert_equals(parseInt(getComputedStyle(target1).left), 450, 'left offset');

	85 assert_equals(parseInt(getComputedStyle(target2).left), 300, 'left offset');

	86

	87 keyframes.name = 'foobar';

	88 assert_equals(parseInt(getComputedStyle(target1).left), 0, 'left offset');

	89 assert_equals(parseInt(getComputedStyle(target2).left), 100, 'left offset');

	90

	91 keyframes.name = 'anim';

	92 assert_equals(parseInt(getComputedStyle(target1).left), 450, 'left offset');

	93 assert_equals(parseInt(getComputedStyle(target2).left), 300, 'left offset');

	94

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

	96 </script>

OLD	NEW

« no previous file with comments | « no previous file | LayoutTests/animations/timing-functions-update-animation.html » ('j') | Source/core/animation/css/CSSAnimationUpdate.h » ('J')