| graouts@webkit.org | 447e3d9 | 2020-09-17 12:39:28 +0000 | [diff] [blame] | 1 | <!DOCTYPE html> |
| dino@apple.com | eff03da | 2008-07-17 01:16:30 +0000 | [diff] [blame] | 2 | |
| simon.fraser@apple.com | 4803cdd | 2011-04-26 03:25:14 +0000 | [diff] [blame] | 3 | <html> |
| dino@apple.com | eff03da | 2008-07-17 01:16:30 +0000 | [diff] [blame] | 4 | <head> |
| simon.fraser@apple.com | 4803cdd | 2011-04-26 03:25:14 +0000 | [diff] [blame] | 5 | <style> |
| dino@apple.com | eff03da | 2008-07-17 01:16:30 +0000 | [diff] [blame] | 6 | .container { |
| 7 | position: relative; |
| 8 | height: 300px; |
| 9 | width: 300px; |
| 10 | margin: 10px; |
| 11 | background-color: green; |
| 12 | -webkit-transition-property: opacity; |
| 13 | -webkit-transition-timing-function: linear; |
| 14 | -webkit-transition-duration: 5s; |
| 15 | } |
| 16 | |
| 17 | #first { |
| 18 | opacity: 0.5; |
| 19 | } |
| 20 | |
| 21 | .box { |
| 22 | position: absolute; |
| 23 | left: 10px; |
| 24 | top: 10px; |
| 25 | height: 200px; |
| 26 | width: 200px; |
| 27 | background-color: blue; |
| 28 | } |
| 29 | |
| 30 | .indicator { |
| 31 | position: absolute; |
| 32 | top: 150px; |
| 33 | left: 150px; |
| 34 | height: 100px; |
| 35 | width: 100px; |
| 36 | background-color: orange; |
| 37 | z-index: -1; |
| 38 | } |
| 39 | </style> |
| simon.fraser@apple.com | 4803cdd | 2011-04-26 03:25:14 +0000 | [diff] [blame] | 40 | <script> |
| rniwa@webkit.org | cc082ecd | 2012-06-16 03:42:58 +0000 | [diff] [blame] | 41 | if (window.testRunner) |
| 42 | testRunner.waitUntilDone(); |
| dino@apple.com | eff03da | 2008-07-17 01:16:30 +0000 | [diff] [blame] | 43 | |
| 44 | function runTest() |
| 45 | { |
| 46 | var container = document.getElementById('first'); |
| 47 | container.style.opacity = 1; |
| pol@apple.com | 8ceda8d | 2008-12-19 00:39:21 +0000 | [diff] [blame] | 48 | |
| dino@apple.com | eff03da | 2008-07-17 01:16:30 +0000 | [diff] [blame] | 49 | // dump the tree in the middle of the transition |
| benjamin@webkit.org | 84dbb0d | 2013-02-07 21:34:32 +0000 | [diff] [blame] | 50 | if (window.testRunner) |
| 51 | window.setTimeout(function() { |
| 52 | var firstElement = document.getElementById('first'); |
| graouts@webkit.org | a4438cc | 2018-03-29 06:49:27 +0000 | [diff] [blame] | 53 | const transition = firstElement.getAnimations()[0]; |
| 54 | transition.currentTime = 2500; |
| 55 | transition.pause(); |
| benjamin@webkit.org | 84dbb0d | 2013-02-07 21:34:32 +0000 | [diff] [blame] | 56 | testRunner.notifyDone(); |
| 57 | }, 0); |
| dino@apple.com | eff03da | 2008-07-17 01:16:30 +0000 | [diff] [blame] | 58 | } |
| simon.fraser@apple.com | 3d92c2b | 2011-04-26 21:49:10 +0000 | [diff] [blame] | 59 | // FIXME: this should use runTransitionTest(). |
| dino@apple.com | eff03da | 2008-07-17 01:16:30 +0000 | [diff] [blame] | 60 | window.addEventListener('load', runTest, false); |
| 61 | </script> |
| 62 | </head> |
| 63 | <body> |
| 64 | |
| 65 | <div class="container" id="first"> |
| 66 | <div class="box"></div> |
| 67 | <div class="indicator"></div> |
| 68 | </div> |
| 69 | |
| 70 | </body> |
| 71 | </html> |
