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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 1292893005: Deflake virtual/threaded/animations/responsive-neutral-keyframes.html (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Created 5 years, 4 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/TestExpectations ('k') | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <script src="../resources/testharness.js"></script> 2 <script src="../resources/testharness.js"></script>
3 <script src="../resources/testharnessreport.js"></script> 3 <script src="../resources/testharnessreport.js"></script>
4 <style> 4 <style>
5 @keyframes anim-missing-from { to { width: 200px; height: 200px; } } 5 @keyframes anim-missing-from { to { width: 200px; height: 200px; } }
6 @keyframes anim-missing-to { from { left: 100px; } } 6 @keyframes anim-missing-to { from { left: 100px; } }
7 @keyframes anim-missing-both { 50% { background-color: rgb(200, 100, 40); } } 7 @keyframes anim-missing-both { 50% { left: 100px; } }
8 @keyframes anim-missing-compositor { 100% { opacity: 0.0; } } 8 @keyframes anim-missing-compositor { 100% { opacity: 0.0; } }
9 @keyframes anim-missing-ems { from { top: 1em; } } 9 @keyframes anim-missing-ems { from { top: 1em; } }
10 10
11 .target-before { 11 .target {
12 visibility: hidden;
13 position: absolute;
12 width: 100px; 14 width: 100px;
13 height: 100px; 15 height: 100px;
14 background-color: rgb(0, 0, 0); 16 background-color: rgb(0, 0, 0);
15 left: 20px; 17 left: 20px;
16 top: 1em; 18 top: 50px;
17 font-size: 12px; 19 font-size: 10px;
18 opacity: 1.0; 20 opacity: 1.0;
19 } 21 }
20 22
21 .target-after { 23 .target.changed {
22 width: 600px; 24 width: 600px;
23 height: 300px; 25 height: 300px;
24 background-color: rgb(120, 160, 200); 26 background-color: rgb(120, 160, 200);
25 left: 200px; 27 left: 200px;
26 top: 2em;
27 opacity: 0.5; 28 opacity: 0.5;
28 } 29 }
29 30
30 #target1 { animation: anim-missing-from 4s -1s linear paused; } 31 #target1 { animation: anim-missing-from 4s -1s linear paused; }
31 #target2 { animation: anim-missing-to 4s -1s linear paused; } 32 #target2 { animation: anim-missing-to 4s -1s linear paused; }
32 #target3 { animation: anim-missing-both 4s -1s linear paused; } 33 #target3 { animation: anim-missing-both 4s -1s linear paused; }
33 #target4 { animation: anim-missing-both 0.2s 2 linear paused forwards; } 34 #target4 { animation: anim-missing-ems 4s -1s linear paused; }
34 #target5 { animation: anim-missing-compositor 2s -1s linear paused; } 35 #target5 { animation: anim-missing-compositor 2s -1s linear paused; }
35 #target6 { animation: anim-missing-ems 0.2s 2 linear paused forwards; } 36 #target6 { animation: anim-missing-from 1e10s linear; }
36 37
37 </style> 38 </style>
38 <div id="target1" class="target-before"></div> 39 <div id="target1" class="target"></div>
39 <div id="target2" class="target-before"></div> 40 <div id="target2" class="target"></div>
40 <div id="target3" class="target-before"></div> 41 <div id="target3" class="target"></div>
41 <div id="target4" class="target-before"></div> 42 <div id="target4" class="target"></div>
42 <div id="target5" class="target-before"></div> 43 <div id="target5" class="target"></div>
43 <div id="target6" class="target-before"></div> 44 <div id="target6" class="target"></div>
44 <script> 45 <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() { 46 test(function() {
68 assert_equals(parseInt(getComputedStyle(target1).width), 125); 47 assert_equals(parseInt(getComputedStyle(target1).width), 125);
69 assert_equals(parseInt(getComputedStyle(target1).height), 125); 48 assert_equals(parseInt(getComputedStyle(target1).height), 125);
70 target1.className = 'target-after'; 49 target1.classList.add('changed');
71 assert_equals(parseInt(getComputedStyle(target1).width), 500); 50 assert_equals(parseInt(getComputedStyle(target1).width), 500);
72 assert_equals(parseInt(getComputedStyle(target1).height), 275); 51 assert_equals(parseInt(getComputedStyle(target1).height), 275);
73 }, "Check that animations missing 'from' keyframes are responsive to underlyin g style changes"); 52 }, "Check that animations missing 'from' keyframes are responsive to underlyin g style changes");
74 53
75 test(function() { 54 test(function() {
76 assert_equals(parseInt(getComputedStyle(target2).left), 80); 55 assert_equals(parseInt(getComputedStyle(target2).left), 80);
77 target2.className = 'target-after'; 56 target2.classList.add('changed');
78 assert_equals(parseInt(getComputedStyle(target2).left), 125); 57 assert_equals(parseInt(getComputedStyle(target2).left), 125);
79 }, "Check that animations missing 'to' keyframes are responsive to underlying style changes"); 58 }, "Check that animations missing 'to' keyframes are responsive to underlying style changes");
80 59
81 test(function() { 60 test(function() {
82 assert_equals(getComputedStyle(target3).backgroundColor, 'rgb(100, 50, 20)') ; 61 assert_equals(parseInt(getComputedStyle(target3).left), 60);
83 target3.className = 'target-after'; 62 target3.classList.add('changed');
84 assert_equals(getComputedStyle(target3).backgroundColor, 'rgb(160, 130, 120) '); 63 assert_equals(parseInt(getComputedStyle(target3).left), 150);
85 }, "Check that animations missing both 'from' and 'to' keyframes are responsiv e to underlying style changes"); 64 }, "Check that animations missing both 'from' and 'to' keyframes are responsiv e to underlying style changes");
86 65
87 test(function() { 66 test(function() {
88 target4.style.animationPlayState = 'running'; 67 assert_equals(parseInt(getComputedStyle(target4).top), 20);
89 }, "Check that running animations with neutral keyframes are responsive to und erlying style changes"); 68 target4.style.fontSize = '90px';
69 assert_equals(parseInt(getComputedStyle(target4).top), 80);
70 }, "Check that animations with neutral keyframes are responsive to font size c hanges");
90 71
91 test(function() { 72 test(function() {
92 assert_approx_equals(parseFloat(getComputedStyle(target5).opacity), 0.5, 0.0 01); 73 assert_approx_equals(parseFloat(getComputedStyle(target5).opacity), 0.5, 0.0 01);
93 target5.className = 'target-after'; 74 target5.classList.add('changed');
94 assert_approx_equals(parseFloat(getComputedStyle(target5).opacity), 0.25, 0. 001); 75 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"); 76 }, "Check that composited animations with neutral keyframes are responsive to underlying style changes");
96 77
97 test(function() { 78 var async = async_test("Check that running animations with neutral keyframes a re responsive to style changes");
98 assert_equals(parseInt(getComputedStyle(target6).top), 12); // 1em at 12px 79 requestAnimationFrame(function() {
99 target6.style.animationPlayState = 'running'; 80 assert_less_than(parseInt(getComputedStyle(target6).width), 200);
100 }, "Check that running animations with neutral keyframes specified using ems a re responsive to font size changes"); 81 requestAnimationFrame(function() {
82 target6.classList.add('changed');
83 assert_greater_than(parseInt(getComputedStyle(target6).width), 200);
84 async.done();
85 });
86 });
101 </script> 87 </script>
OLDNEW
« no previous file with comments | « LayoutTests/TestExpectations ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698