Chromium Code Reviews Chromium Code Reviews
Issue 2621603002:
CSS Transitions: avoid flakes in cancel-transition.html (Closed)
| OLD | NEW |
|---|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <meta charset="utf-8"> | 4 <meta charset="utf-8"> |
| 5 <script src="../resources/testharness.js"></script> | 5 <script src="../resources/testharness.js"></script> |
| 6 <script src="../resources/testharnessreport.js"></script> | 6 <script src="../resources/testharnessreport.js"></script> |
| 7 <style> | 7 <style> |
| 8 #container { | 8 #container { |
| 9 width: 700px; | 9 width: 700px; |
| 10 background-color: #fcc; | 10 background-color: #fcc; |
| (...skipping 30 matching lines...) Expand all Loading... | |
| 41 restarted, it would pick up where it left off. | 41 restarted, it would pick up where it left off. |
| 42 https://bugs.webkit.org/show_bug.cgi?id=26163 | 42 https://bugs.webkit.org/show_bug.cgi?id=26163 |
| 43 --> | 43 --> |
| 44 <div id="container"> | 44 <div id="container"> |
| 45 <div id="left">left</div> | 45 <div id="left">left</div> |
| 46 <div id="translate">translate</div> | 46 <div id="translate">translate</div> |
| 47 </div> | 47 </div> |
| 48 <script> | 48 <script> |
| 49 'use strict'; | 49 'use strict'; |
| 50 | 50 |
| 51 function waitForProgress() { | |
| 52 var initialLeft = getComputedStyle(left).left; | |
| 53 return new Promise(resolve => { | |
| 54 function poll() { | |
| 55 var currentLeft = getComputedStyle(left).left; | |
| 56 if (currentLeft === initialLeft) { | |
|
alancutter (OOO until 2018)
2017/01/10 08:41:54
Shouldn't we see a change in the value after a sin
suzyh_UTC10 (ex-contributor)
2017/01/10 22:43:30
I don't see the harm in continuing to call rAF in
Eric Willigers
2017/01/11 03:07:42
We occasionally have more than 10 frames with the
| |
| 57 requestAnimationFrame(poll); | |
| 58 } else { | |
| 59 resolve(); | |
| 60 } | |
| 61 } | |
| 62 requestAnimationFrame(poll); | |
| 63 }); | |
| 64 } | |
| 65 | |
| 51 function waitSeveralFrames() { | 66 function waitSeveralFrames() { |
| 52 return container.animate({opacity: ['1', '1']}, 100).finished; | 67 return container.animate({opacity: ['1', '1']}, 100).finished; |
| 53 } | 68 } |
| 54 | 69 |
| 55 async_test(t => { | 70 async_test(t => { |
| 56 getComputedStyle(container).height; // force style recalc | 71 getComputedStyle(container).height; // force style recalc |
| 57 container.className = 'run'; | 72 container.className = 'run'; |
| 58 getComputedStyle(container).height; // force style recalc - transiti on will start | 73 getComputedStyle(container).height; // force style recalc - transiti on will start |
| 59 waitSeveralFrames().then(t.step_func(() => { | 74 waitForProgress().then(t.step_func(() => { |
| 60 assert_greater_than(parseFloat(getComputedStyle(left).left), 50) ; | 75 assert_greater_than(parseFloat(getComputedStyle(left).left), 50) ; |
| 61 container.className = ''; | 76 container.className = ''; |
| 62 getComputedStyle(container).height; // force style recalc - tran sition will cancel | 77 getComputedStyle(container).height; // force style recalc - tran sition will cancel |
| 63 })).then(waitSeveralFrames).then(t.step_func_done(() => { | 78 })).then(waitSeveralFrames).then(t.step_func_done(() => { |
|
alancutter (OOO until 2018)
2017/01/10 08:41:54
I don't think this test should need to be wait mor
suzyh_UTC10 (ex-contributor)
2017/01/10 22:43:30
Whichever is chosen, I'd suggest doing the same fo
Eric Willigers
2017/01/11 03:07:42
waitForProgress won't work here as no transitions
| |
| 64 container.className = 'run'; // restart transition | 79 container.className = 'run'; // restart transition |
| 65 assert_equals(getComputedStyle(left).left, '50px'); | 80 assert_equals(getComputedStyle(left).left, '50px'); |
| 66 assert_equals(getComputedStyle(translate).transform, 'matrix(1, 0, 0, 1, 100, 0)'); | 81 assert_equals(getComputedStyle(translate).transform, 'matrix(1, 0, 0, 1, 100, 0)'); |
| 67 })); | 82 })); |
| 68 }, 'Transition restarts from the beginning'); | 83 }, 'Transition restarts from the beginning'); |
| 69 </script> | 84 </script> |
| 70 </body> | 85 </body> |
| 71 </html> | 86 </html> |
| OLD | NEW |
