Chromium Code Reviews Chromium Code Reviews
Issue 2614683002:
CSS Animations: Fix flaky change-keyframes-name.html (Closed)
| OLD | NEW |
|---|---|
| 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" | 1 <!DOCTYPE html> |
| 2 "http://www.w3.org/TR/html4/loose.dtd"> | 2 <html> |
| 3 | |
| 4 <html lang="en"> | |
| 5 <head> | 3 <head> |
| 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | 4 <meta charset="utf-8"> |
| 7 <title>Test Changing Name of A Keyframes Rule Using CSSOM</title> | 5 <title>Test Changing Name of A Keyframes Rule Using CSSOM</title> |
| 8 <style type="text/css" media="screen"> | 6 <script src="../resources/testharness.js"></script> |
| 9 #box { | 7 <script src="../resources/testharnessreport.js"></script> |
| 10 position: relative; | 8 <style> |
| 11 left: 0; | 9 #target { |
| 12 top: 0; | 10 position: absolute; |
| 13 height: 100px; | 11 left: 0; |
| 14 width: 100px; | 12 top: 0; |
| 15 background-color: blue; | 13 height: 100px; |
| 16 -webkit-animation-duration: 0.5s; | 14 width: 100px; |
| 17 -webkit-animation-timing-function: linear; | 15 background-color: blue; |
| 18 -webkit-animation-name: bar; | 16 animation-duration: 0.05s; |
| 17 animation-fill-mode: forwards; | |
| 18 animation-timing-function: linear; | |
| 19 animation-name: bar; | |
| 19 } | 20 } |
| 20 @-webkit-keyframes foo { | 21 @keyframes foo { |
| 21 from { left: 100px; } | 22 from { left: 100px; } |
| 22 40% { left: 200px; } | 23 to { left: 200px; } |
| 23 60% { left: 200px; } | |
| 24 to { left: 300px; } | |
| 25 } | 24 } |
| 26 </style> | 25 </style> |
| 27 <script src="resources/animation-test-helpers.js" type="text/javascript" cha rset="utf-8"></script> | 26 </head> |
| 28 <script type="text/javascript" charset="utf-8"> | 27 <body> |
| 29 | 28 <div id="target"></div> |
| 30 const expectedValues = [ | 29 <script> |
| 31 // [time, element-id, property, expected-value, tolerance] | 30 'use strict'; |
| 32 [0.25, "box", "left", 200, 20], | |
| 33 ]; | |
| 34 | 31 |
| 35 function findKeyframesRule(rule) | 32 function findKeyframesRule(rule) |
| 36 { | 33 { |
| 37 var ss = document.styleSheets; | 34 var ss = document.styleSheets; |
| 38 for (var i = 0; i < ss.length; ++i) { | 35 for (var i = 0; i < ss.length; ++i) { |
| 39 for (var j = 0; j < ss[i].cssRules.length; ++j) { | 36 for (var j = 0; j < ss[i].cssRules.length; ++j) { |
| 40 if (ss[i].cssRules[j].type == window.CSSRule.WEBKIT_KEYFRAMES_RU LE && ss[i].cssRules[j].name == rule) | 37 if (ss[i].cssRules[j].type == window.CSSRule.KEYFRAMES_RULE && ss[i].c ssRules[j].name == rule) |
| 41 return ss[i].cssRules[j]; | 38 return ss[i].cssRules[j]; |
| 42 } | |
| 43 } | 39 } |
| 44 | 40 } |
| 45 return null; | 41 |
| 42 return null; | |
| 46 } | 43 } |
| 47 | |
| 48 function change() | |
| 49 { | |
| 50 // change keyframes name | |
| 51 var keyframes = findKeyframesRule("foo"); | |
| 52 keyframes.name = "anim"; | |
| 53 document.getElementById('box').style.webkitAnimationName = "anim"; | |
| 54 | 44 |
| 55 runAnimationTest(expectedValues, null, null, 'do-not-use-pause-api'); | 45 async_test(t => { |
| 56 } | 46 target.offsetTop; // Force style recalc |
| 57 | 47 |
| 58 function setup() | 48 document.addEventListener('animationend', t.step_func_done(() => { |
|
suzyh_UTC10 (ex-contributor)
2017/01/06 00:01:56
Of course if the animation doesn't run, this will
Eric Willigers
2017/01/06 00:16:25
Added description to assert.
| |
| 59 { | 49 assert_equals(getComputedStyle(target).left, '200px'); |
| 60 if (window.testRunner) { | 50 })); |
| 61 testRunner.dumpAsText(); | 51 |
| 62 testRunner.waitUntilDone(); | 52 // change keyframes name |
| 63 } | 53 var keyframes = findKeyframesRule('foo'); |
|
suzyh_UTC10 (ex-contributor)
2017/01/06 00:01:56
Maybe assert keyframes is not null
Eric Willigers
2017/01/06 00:16:25
Done.
| |
| 64 requestAnimationFrame(() => { | 54 keyframes.name = 'anim'; |
| 65 requestAnimationFrame(change); | 55 target.style.animationName = 'anim'; |
| 66 }); | 56 |
| 67 } | 57 t.step(() => { |
| 68 | 58 assert_equals(getComputedStyle(target).left, '100px'); |
| 59 }); | |
| 60 }, 'Changing Name of A Keyframes Rule Using CSSOM starts animation'); | |
| 69 </script> | 61 </script> |
| 70 </head> | |
| 71 <body onload="setup()"> | |
| 72 This test changes the name of the @keyframes rule so that it matches | |
| 73 and makes sure the animation starts running. | |
| 74 <div id="box"> | |
| 75 </div> | |
| 76 <div id="pre-result"> | |
| 77 </div> | |
| 78 <div id="result"> | |
| 79 </div> | |
| 80 </body> | 62 </body> |
| 81 </html> | 63 </html> |
| OLD | NEW |
