| <!DOCTYPE html> |
| <style> |
| #target { |
| transition: opacity 10ms; |
| opacity: 0.5; |
| } |
| #target.dim { |
| opacity: 0.2; |
| } |
| </style> |
| <script> |
| if (window.testRunner) |
| testRunner.waitUntilDone(); |
| |
| window.addEventListener('load', function() { |
| requestAnimationFrame(function() { |
| requestAnimationFrame(function() { |
| var target = document.getElementById('target'); |
| target.classList.remove('dim'); |
| target.addEventListener('transitionend', function() { |
| requestAnimationFrame(function() { |
| requestAnimationFrame(function() { |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| }); |
| }); |
| }); |
| }); |
| }); |
| }); |
| </script> |
| <div id="target" class="dim" style="width: 500px; height: 500px; background-color: blue;"></div> |
| <div style="width: 300px; height: 300px; position: absolute; left: 20px; top: 400px; background-color: purple; z-index:1000"> |
| <div style="width:100px; height:100px; position:relative; left:10px; top:10px; will-change:transform; background-color:yellow"></div> |
| </div> |
