| <!DOCTYPE html> |
| <style> |
| #parent { |
| overflow:hidden; |
| width: 400px; |
| height: 400px; |
| background-color: pink; |
| will-change: transform |
| } |
| |
| #child { |
| opacity: 0.9; |
| width: 200px; |
| height: 200px; |
| background-color: salmon; |
| transition: opacity 5ms; |
| } |
| |
| .fade #child { |
| visibility: hidden; |
| opacity: 0.2; |
| } |
| </style> |
| <div id="parent"> |
| <div id="child"></div> |
| </div> |
| <pre></pre> |
| <script> |
| if (window.testRunner) { |
| testRunner.dumpAsText(); |
| testRunner.waitUntilDone(); |
| } |
| |
| requestAnimationFrame(function() { |
| requestAnimationFrame(function() { |
| document.getElementById('parent').classList.add('fade'); |
| document.getElementById('child').addEventListener('transitionend', function() { |
| if (window.testRunner) { |
| document.getElementsByTagName('pre')[0].textContent = internals.layerTreeAsText(document); |
| setTimeout(function() { |
| testRunner.notifyDone(); |
| }); |
| } |
| }); |
| }); |
| }); |
| </script> |
