| <html> |
| <head> |
| <script> |
| if (window.testRunner) { |
| testRunner.dumpAsText(); |
| testRunner.waitUntilDone(); |
| } |
| |
| function done() { |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| } |
| |
| function dumpTreeAsText() { |
| if (!window.internals) |
| return; |
| document.getElementById('layers').textContent = |
| internals.layerTreeAsText(document); |
| document.getElementById('test').style.display = 'none'; |
| done(); |
| } |
| |
| function removeStackingContext() { |
| var intermediary = document.getElementById("intermediary"); |
| intermediary.setAttribute("class", "accelerated-no-stacking-context"); |
| if (window.testRunner) |
| window.setTimeout(dumpTreeAsText, 0); |
| } |
| |
| window.addEventListener('load', function () { |
| window.setTimeout(removeStackingContext, 100); |
| }, false); |
| </script> |
| <style> |
| .accelerated, |
| .accelerated-stacking-context { |
| transform: rotateX(0deg); |
| } |
| .accelerated-no-stacking-context { |
| backface-visibility: hidden; |
| } |
| .blended { |
| mix-blend-mode: multiply; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="test"> |
| <!--This test checks that isolation property is removed when the element |
| no longer requires stacking context and it remains accelerated. --> |
| <div class="accelerated-stacking-context" style="background-color: blue;"> |
| <div id="intermediary" class="accelerated-stacking-context" |
| style="background-color: green; height: 90px;"> |
| <img class="accelerated blended" src="resources/reference.png"> |
| </div> |
| </div> |
| </div> |
| <pre id="layers">Layer tree goes here when testing.</pre> |
| </body> |
| </html> |
