| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <div class="target">-webkit-transform 10ms</div><br> | 2 <meta charset="utf-8"> |
| 3 <div class="target">transform 10ms</div><br> | 3 <script src="../resources/testharness.js"></script> |
| 4 <div class="target">transform 10ms, -webkit-transform 10ms</div><br> | 4 <script src="../resources/testharnessreport.js"></script> |
| 5 <div class="target">-webkit-transform 10ms, transform 10ms</div><br> | 5 <div id="container"></div> |
| 6 <div class="target">all 10ms</div><br> | |
| 7 <div class="target">all 10ms, -webkit-transform 10ms</div><br> | |
| 8 <div class="target">-webkit-transform 10ms, all 10ms</div> | |
| 9 <script> | 6 <script> |
| 10 if (window.testRunner) { | 7 'use strict'; |
| 11 testRunner.dumpAsText(); | |
| 12 testRunner.waitUntilDone(); | |
| 13 } | |
| 14 | 8 |
| 15 document.addEventListener('transitionend', function(e) { | 9 var transitionValues = [ |
| 16 var result = document.createElement('div'); | 10 '-webkit-transform 10ms', |
| 17 result.textContent = 'fired transitionend with propertyName: ' + e.propertyNam
e; | 11 'transform 10ms', |
| 18 e.target.appendChild(result); | 12 'transform 10ms, -webkit-transform 10ms', |
| 19 if (window.testRunner) { | 13 '-webkit-transform 10ms, transform 10ms', |
| 20 // All events should be fired by next frame. | 14 'all 10ms', |
| 21 requestAnimationFrame(function() { | 15 'all 10ms, -webkit-transform 10ms', |
| 22 testRunner.notifyDone(); | 16 '-webkit-transform 10ms, all 10ms' |
| 17 ]; |
| 18 |
| 19 async_test(t => { |
| 20 var remaining = transitionValues.length; |
| 21 for (let i = 0; i < transitionValues.length; i++) { |
| 22 const element = document.createElement('div'); |
| 23 container.appendChild(element); |
| 24 |
| 25 element.addEventListener('transitionend', e => { |
| 26 t.step(() => { |
| 27 assert_equals(e.target, element); |
| 28 assert_equals(e.type, 'transitionend'); |
| 29 assert_equals(e.propertyName, 'transform'); |
| 30 assert_greater_than(remaining, 0); |
| 31 |
| 32 remaining -= 1; |
| 33 if (!remaining) { |
| 34 // Delay provides opportunity to detect excess events. |
| 35 setTimeout(() => { |
| 36 t.done(); |
| 37 }, 50); |
| 38 } |
| 39 }); |
| 40 }); |
| 41 |
| 42 requestAnimationFrame(() => { |
| 43 element.offsetTop; |
| 44 element.style.transition = transitionValues[i]; |
| 45 element.style.webkitTransform = 'rotate(360deg)'; |
| 46 element.style.transform = 'rotate(360deg)'; |
| 23 }); | 47 }); |
| 24 } | 48 } |
| 25 }); | 49 }, 'Transition on the prefixed and/or unprefixed transform property causes a sin
gle transitionend event for the unprefixed transform property.'); |
| 26 | |
| 27 onload = function() { | |
| 28 var targets = document.querySelectorAll('.target'); | |
| 29 for (var i = 0; i < targets.length; i++) { | |
| 30 targets[i].offsetTop; | |
| 31 targets[i].style.transition = targets[i].textContent; | |
| 32 targets[i].style.webkitTransform = 'rotate(360deg)'; | |
| 33 targets[i].style.transform = 'rotate(360deg)'; | |
| 34 } | |
| 35 }; | |
| 36 </script> | 50 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2578143003:
CSS Transitions: Fix flaky test unprefixed-transform.html (Closed)
