| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <style> | 4 <style> |
| 5 .square { | 5 .square { |
| 6 position: absolute; | 6 position: absolute; |
| 7 background: blue; | 7 background: blue; |
| 8 width: 20px; | 8 width: 20px; |
| 9 height: 20px; | 9 height: 20px; |
| 10 left: 0px; | 10 left: 0px; |
| (...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 43 | 43 |
| 44 <script> | 44 <script> |
| 45 // The delays of squares 1 and 3 are negative, so they should be ahead. | 45 // The delays of squares 1 and 3 are negative, so they should be ahead. |
| 46 const expectedValues = [ | 46 const expectedValues = [ |
| 47 // [time, element-id, property, expected-value, tolerance] | 47 // [time, element-id, property, expected-value, tolerance] |
| 48 [0.0, "square1", "left", 300, 15], | 48 [0.0, "square1", "left", 300, 15], |
| 49 [0.0, "square2", "left", 0, 15], | 49 [0.0, "square2", "left", 0, 15], |
| 50 [0.5, "square1", "left", 450, 15], | 50 [0.5, "square1", "left", 450, 15], |
| 51 [0.5, "square2", "left", 150, 15], | 51 [0.5, "square2", "left", 150, 15], |
| 52 [0.0, "square3", "-webkit-transform.4", 300, 20], | 52 [0.0, "square3", "-webkit-transform.4", 300, 20], |
| 53 [0.0, "square4", "-webkit-transform.4", 'none', 20], | 53 [0.0, "square4", "-webkit-transform.4", 0, 20], |
| 54 [0.5, "square3", "-webkit-transform.4", 450, 20], | 54 [0.5, "square3", "-webkit-transform.4", 450, 20], |
| 55 [0.5, "square4", "-webkit-transform.4", 150, 20], | 55 [0.5, "square4", "-webkit-transform.4", 150, 20], |
| 56 ]; | 56 ]; |
| 57 | 57 |
| 58 function setupTest() | 58 function setupTest() |
| 59 { | 59 { |
| 60 document.getElementById('square1').className = 'moved square'; | 60 document.getElementById('square1').className = 'moved square'; |
| 61 document.getElementById('square2').className = 'moved square'; | 61 document.getElementById('square2').className = 'moved square'; |
| 62 document.getElementById('square3').className = 'translated square'; | 62 document.getElementById('square3').className = 'translated square'; |
| 63 document.getElementById('square4').className = 'translated square'; | 63 document.getElementById('square4').className = 'translated square'; |
| 64 } | 64 } |
| 65 | 65 |
| 66 runTransitionTest(expectedValues, setupTest); | 66 runTransitionTest(expectedValues, setupTest); |
| 67 </script> | 67 </script> |
| 68 </head> | 68 </head> |
| 69 | 69 |
| 70 <body> | 70 <body> |
| 71 | 71 |
| 72 <div class="square" id="square1"></div> | 72 <div class="square" id="square1"></div> |
| 73 <div class="square" id="square2"></div> | 73 <div class="square" id="square2"></div> |
| 74 <div class="square" id="square3"></div> | 74 <div class="square" id="square3"></div> |
| 75 <div class="square" id="square4"></div> | 75 <div class="square" id="square4"></div> |
| 76 | 76 |
| 77 <div id="result"> | 77 <div id="result"> |
| 78 </div> | 78 </div> |
| 79 | 79 |
| 80 </body> | 80 </body> |
| 81 </html> | 81 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 189883003:
Web Animations: Allow animations with delay to start on compositor (Closed)
Base URL: svn://svn.chromium.org/blink/trunk