| <!DOCTYPE html> |
| <html> |
| <!-- |
| | Verify that the transition is not started when an element is removed then |
| | reattached to the DOM. |
| --> |
| <head> |
| <style> |
| body { |
| background-color: #000000; |
| } |
| |
| div { |
| width: 100px; |
| height: 100px; |
| background-color: #FF0000; |
| transition: background-color 5s; |
| } |
| </style> |
| <script> |
| if (window.testRunner) { |
| window.testRunner.waitUntilDone(); |
| } |
| |
| window.onload = function() { |
| var frame = 0; |
| var e = document.getElementById("animated"); |
| |
| function requestAnimationFrame(callback) { |
| window.requestAnimationFrame(callback); |
| if (window.testRunner) { |
| window.testRunner.DoNonMeasuredLayout(); |
| } |
| } |
| |
| function frameCallback() { |
| switch(++frame) { |
| case 1: |
| case 2: |
| requestAnimationFrame(frameCallback); |
| break; |
| case 3: |
| document.body.removeChild(e); |
| requestAnimationFrame(frameCallback); |
| break; |
| case 4: |
| requestAnimationFrame(frameCallback); |
| break; |
| case 5: |
| // Should not trigger a transition; color should change immediately. |
| e.style.backgroundColor = "#0000FF"; |
| document.body.appendChild(e); |
| requestAnimationFrame(frameCallback); |
| break; |
| case 6: |
| requestAnimationFrame(frameCallback); |
| break; |
| case 7: |
| if (window.testRunner) { |
| window.testRunner.notifyDone(); |
| } |
| break; |
| } |
| } |
| |
| // Trigger initial transition. |
| e.style.backgroundColor = "#00FF00"; |
| frameCallback(); |
| } |
| </script> |
| </head> |
| <body> |
| <div id="animated"></div> |
| </body> |
| </html> |
