| <!DOCTYPE html> |
| |
| <script src="../../resources/js-test.js"></script> |
| |
| <style> |
| @-webkit-keyframes example { |
| from { width: 50px; height: 50px; } |
| to { width: 10px; height: 10px; } |
| } |
| |
| @keyframes example { |
| from { width: 50px; height: 50px; } |
| to { width: 10px; height: 10px; } |
| } |
| |
| .after:after, |
| .before:before { |
| content: ""; |
| display: block; |
| position: relative; |
| background: green; |
| width: 10px; |
| height: 10px; |
| -webkit-animation: example 2s; |
| -moz-animation: example 2s; |
| animation: example 2s; |
| } |
| |
| .before, |
| .after { |
| display: inline-block; |
| border: 1px solid black; |
| background: red; |
| } |
| |
| </style> |
| |
| <div class="before"></div> |
| <div class="before" id="before"></div> |
| <div class="before"></div> |
| <div class="after"></div> |
| <div class="after" id="after"></div> |
| <div class="after"></div> |
| |
| <script> |
| description('Animations on :before and :after pseudo elements should run when applied before onload.'); |
| |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| |
| // FIXME: This test should be modified so subpixel doesn't cause off by one |
| // below and it no longer needs shouldBeCloseTo. |
| |
| function testAnimations() |
| { |
| if (window.internals) { |
| internals.pauseAnimations(1); |
| var div = document.getElementById('before'); |
| window.div = div; |
| shouldBeCloseTo('div.offsetWidth', 20, 1); |
| var div = document.getElementById('after'); |
| window.div = div; |
| shouldBeCloseTo('div.offsetWidth', 20, 1); |
| |
| internals.pauseAnimations(2); |
| var div = document.getElementById('before'); |
| window.div = div; |
| shouldBeCloseTo('div.offsetWidth', 12, 1); |
| var div = document.getElementById('after'); |
| window.div = div; |
| shouldBeCloseTo('div.offsetWidth', 12, 1); |
| } else { |
| // This will be flaky, but it's a reasonable approximation for testing |
| // in a browser instead of DRT. |
| setTimeout(function() { |
| var div = document.getElementById('before'); |
| window.div = div; |
| shouldBeCloseTo('div.offsetWidth', 20, 1); |
| var div = document.getElementById('after'); |
| window.div = div; |
| shouldBeCloseTo('div.offsetWidth', 20, 1); |
| }, 1000); |
| setTimeout(function() { |
| var div = document.getElementById('before'); |
| window.div = div; |
| shouldBeCloseTo('div.offsetWidth', 12, 1); |
| var div = document.getElementById('after'); |
| window.div = div; |
| shouldBeCloseTo('div.offsetWidth', 12, 1); |
| }, 2000); |
| } |
| } |
| |
| onload = testAnimations; |
| |
| </script> |
