| 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 waitSeveralFrames() { | 51 function waitForProgress() { |
| 52 return container.animate({opacity: ['1', '1']}, 100).finished; | 52 var initialLeft = getComputedStyle(left).left; |
| 53 return new Promise(resolve => { |
| 54 function poll() { |
| 55 var currentLeft = getComputedStyle(left).left; |
| 56 if (currentLeft === initialLeft) { |
| 57 requestAnimationFrame(poll); |
| 58 } else { |
| 59 resolve(); |
| 60 } |
| 61 } |
| 62 requestAnimationFrame(poll); |
| 63 }); |
| 53 } | 64 } |
| 54 | 65 |
| 55 async_test(t => { | 66 async_test(t => { |
| 56 getComputedStyle(container).height; // force style recalc | 67 getComputedStyle(container).height; // force style recalc |
| 57 container.className = 'run'; | 68 container.className = 'run'; |
| 58 getComputedStyle(container).height; // force style recalc - transiti
on will start | 69 getComputedStyle(container).height; // force style recalc - transiti
on will start |
| 59 waitSeveralFrames().then(t.step_func(() => { | 70 waitForProgress().then(t.step_func_done(() => { |
| 60 assert_greater_than(parseFloat(getComputedStyle(left).left), 50)
; | 71 assert_greater_than(parseFloat(getComputedStyle(left).left), 50)
; |
| 61 container.className = ''; | 72 container.className = ''; |
| 62 getComputedStyle(container).height; // force style recalc - tran
sition will cancel | 73 getComputedStyle(container).height; // force style recalc - tran
sition will cancel |
| 63 })).then(waitSeveralFrames).then(t.step_func_done(() => { | 74 |
| 64 container.className = 'run'; // restart transition | 75 container.className = 'run'; // restart transition |
| 65 assert_equals(getComputedStyle(left).left, '50px'); | 76 assert_equals(getComputedStyle(left).left, '50px'); |
| 66 assert_equals(getComputedStyle(translate).transform, 'matrix(1,
0, 0, 1, 100, 0)'); | 77 assert_equals(getComputedStyle(translate).transform, 'matrix(1,
0, 0, 1, 100, 0)'); |
| 67 })); | 78 })); |
| 68 }, 'Transition restarts from the beginning'); | 79 }, 'Transition restarts from the beginning'); |
| 69 </script> | 80 </script> |
| 70 </body> | 81 </body> |
| 71 </html> | 82 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2621603002:
CSS Transitions: avoid flakes in cancel-transition.html (Closed)
