LayoutTests/animations/responsive-neutral-keyframes.html - Issue 948583003: Use StringKeyframes to make CSS Animations responsive to style changes

Side by Side Diff: LayoutTests/animations/responsive-neutral-keyframes.html

Issue 948583003: Use StringKeyframes to make CSS Animations responsive to style changes (Closed) Base URL: svn://svn.chromium.org/blink/trunk

Patch Set: Split baseStyle out Created 5 years, 9 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 | Annotate | Revision Log

« no previous file with comments | « LayoutTests/animations/interpolation/webkit-mask-box-image-source-interpolation-expected.txt ('k') | ManualTests/animation/compositor-neutral-keyframes.html » ('j') | Source/core/animation/DeferredLegacyStyleInterpolation.cpp » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

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-missing-from { to { width: 200px; height: 200px; } }

	6 @keyframes anim-missing-to { from { left: 100px; } }

	7 @keyframes anim-missing-both { 50% { background-color: rgb(200, 100, 40); } }

	8 @keyframes anim-missing-compositor { 100% { opacity: 0.0; } }

	9 @keyframes anim-missing-ems { from { top: 1em; } }

	10

	11 .target-before {

	12 width: 100px;

	13 height: 100px;

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

	15 left: 20px;

	16 top: 1em;

	17 font-size: 12px;

	18 opacity: 1.0;

	19 }

	20

	21 .target-after {

	22 width: 600px;

	23 height: 300px;

	24 background-color: rgb(120, 160, 200);

	25 left: 200px;

	26 top: 2em;

	27 opacity: 0.5;

	28 }

	29

	30 #target1 { animation: anim-missing-from 4s -1s linear paused; }

	31 #target2 { animation: anim-missing-to 4s -1s linear paused; }

	32 #target3 { animation: anim-missing-both 4s -1s linear paused; }

	33 #target4 { animation: anim-missing-both 0.2s 2 linear paused forwards; }

	34 #target5 { animation: anim-missing-compositor 2s -1s linear paused; }

	35 #target6 { animation: anim-missing-ems 0.2s 2 linear paused forwards; }

	36

	37 </style>

	38 <div id="target1" class="target-before"></div>

	39 <div id="target2" class="target-before"></div>

	40 <div id="target3" class="target-before"></div>

	41 <div id="target4" class="target-before"></div>

	42 <div id="target5" class="target-before"></div>

	43 <div id="target6" class="target-before"></div>

	44 <script>

	45 var async1 = async_test("Neutral keyframe updates during animation style updat e");

	46 var async2 = async_test("Neutral keyframe specified with ems responds to chang es in font size");

	47

	48 target4.addEventListener('animationiteration', function() {

	49 target4.className = 'target-after';

	50 });

	51

	52 target4.addEventListener('animationend', function() {

	53 assert_equals(getComputedStyle(target4).backgroundColor, 'rgb(120, 160, 200) ');

	54 async1.done();

	55 });

	56

	57 target6.addEventListener('animationiteration', function() {

	58 target6.style.fontSize = '24px';

	59 target6.className = 'target-after';

	60 });

	61

	62 target6.addEventListener('animationend', function() {

	63 assert_equals(parseInt(getComputedStyle(target6).top), 48); // 2em at 24px

	64 async2.done();

	65 });

	66

	67 test(function() {

	68 assert_equals(parseInt(getComputedStyle(target1).width), 125);

	69 assert_equals(parseInt(getComputedStyle(target1).height), 125);

	70 target1.className = 'target-after';

	71 assert_equals(parseInt(getComputedStyle(target1).width), 500);

	72 assert_equals(parseInt(getComputedStyle(target1).height), 275);

	73 }, "Check that animations missing 'from' keyframes are responsive to underlyin g style changes");

	74

	75 test(function() {

	76 assert_equals(parseInt(getComputedStyle(target2).left), 80);

	77 target2.className = 'target-after';

	78 assert_equals(parseInt(getComputedStyle(target2).left), 125);

	79 }, "Check that animations missing 'to' keyframes are responsive to underlying style changes");

	80

	81 test(function() {

	82 assert_equals(getComputedStyle(target3).backgroundColor, 'rgb(100, 50, 20)') ;

	83 target3.className = 'target-after';

	84 assert_equals(getComputedStyle(target3).backgroundColor, 'rgb(160, 130, 120) ');

	85 }, "Check that animations missing both 'from' and 'to' keyframes are responsiv e to underlying style changes");

	86

	87 test(function() {

	88 target4.style.animationPlayState = 'running';

	89 }, "Check that running animations with neutral keyframes are responsive to und erlying style changes");

	90

	91 test(function() {

	92 assert_approx_equals(parseFloat(getComputedStyle(target5).opacity), 0.5, 0.0 01);

	93 target5.className = 'target-after';

	94 assert_approx_equals(parseFloat(getComputedStyle(target5).opacity), 0.25, 0. 001);

	95 }, "Check that composited animations with neutral keyframes are responsive to underlying style changes");

	96

	97 test(function() {

	98 assert_equals(parseInt(getComputedStyle(target6).top), 12); // 1em at 12px

	99 target6.style.animationPlayState = 'running';

	100 }, "Check that running animations with neutral keyframes specified using ems a re responsive to font size changes");

	101 </script>

OLD	NEW