| <html> |
| <head> |
| <style type="text/css" media="screen"> |
| #container |
| { |
| position: relative; |
| width: 500px; |
| height: 100px; |
| opacity: 0.85; |
| border: 1px solid black; |
| } |
| |
| #box |
| { |
| position: absolute; |
| height: 100px; |
| width: 250px; |
| left: 250px; |
| background-color: blue; |
| transition: left 0.2s, top 0.2s; |
| } |
| |
| #container.right #box |
| { |
| left: 0px; |
| top: 100px; |
| } |
| |
| #fader |
| { |
| position: absolute; |
| top: 0; |
| left: 0; |
| background-color: black; |
| width: 50px; |
| height: 50px; |
| opacity: 0.5; |
| transition: opacity 0.2s; |
| } |
| |
| #container.right #fader { |
| opacity: 1; |
| } |
| </style> |
| <script type="text/javascript" charset="utf-8"> |
| if (window.testRunner) |
| testRunner.waitUntilDone(); |
| |
| function runTest() |
| { |
| var container = document.getElementById("container"); |
| var fader = document.getElementById("fader"); |
| fader.addEventListener('transitionend', function() { |
| fader.addEventListener('transitionend', function() { |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| }); |
| container.className = ""; |
| }); |
| container.className = "right"; |
| } |
| |
| window.addEventListener('load', runTest, false); |
| </script> |
| </head> |
| <body> |
| <p><a href="<rdar://problem/6983207>">rdar://problem/6983207</a>Should not leave blue box behind after moving to the top right.</p> |
| <div id="container"> |
| <div id="box"></div> |
| <div id="fader"></div> |
| </div> |
| |
| </body></html> |
