| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| .circle { |
| display: inline-block; |
| width: 200px; |
| height: 200px; |
| border-radius: 100px; |
| margin: 100px; |
| box-shadow : 0 0 50px currentColor; |
| background: currentColor; |
| color: white; |
| } |
| .animation { |
| transition: all 0.25s linear; |
| } |
| </style> |
| <script src="../../resources/js-test.js"></script> |
| </head> |
| <body> |
| <div id="circle1" class="circle" data-from="white" data-to="rgb(255, 0, 0)"> |
| |
| </div> |
| <div id="circle2" class="circle" data-from="white" data-to="rgb(0, 128, 0)"> |
| |
| </div> |
| <div id="circle3" class="circle" data-from="white" data-to="rgb(64, 64, 255)"> |
| |
| </div> |
| <script> |
| if (window.testRunner) |
| testRunner.waitUntilDone(); |
| |
| // Force a layout so that changing the classname below causes an animation. |
| document.body.offsetHeight; |
| |
| var elements = document.getElementsByClassName('circle'); |
| for (var el, i = 0; el = elements[i]; i++) { |
| el.style.color = el.dataset.from; |
| } |
| for (var el, i = 0; el = elements[i]; i++) { |
| el.classList.add('animation'); |
| el.addEventListener('transitionend', onTransitionend, false /* capture */ ); |
| el.style.color = el.dataset.to; |
| } |
| |
| var RGB_REGEXP = /rgb\([0-9]+, [0-9]+, [0-9]+\)/; |
| var elementColors = {}; |
| var timer; |
| |
| function onTransitionend(e) |
| { |
| var style = window.getComputedStyle(e.target); |
| elementColors[e.target.id] = style.boxShadow.match(RGB_REGEXP); |
| if (typeof timer == 'undefined') |
| timer = window.setTimeout(finish, 0); |
| } |
| |
| function testColor(id) |
| { |
| var expectedColor = document.getElementById(id).dataset.to; |
| var actualColor = elementColors[id]; |
| if (expectedColor == actualColor) |
| testPassed(id + ' has ' + expectedColor + ' shadow as expected.'); |
| else |
| testFailed(id + ' has ' + actualColor + ' shadow, expected ' + expectedColor + '.'); |
| } |
| |
| function finish() |
| { |
| testColor('circle1'); |
| testColor('circle2'); |
| testColor('circle3'); |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| } |
| </script> |
| </body> |
| </html> |
