| <!doctype HTML> |
| <style> |
| @keyframes twiddle { |
| 0% { transform: rotate(0deg); } |
| 100% { transform: rotate(180deg); } |
| } |
| |
| .animated { |
| animation: twiddle 3s alternate infinite linear; |
| width: 100px; |
| height: 100px; |
| background: orange; |
| } |
| </style> |
| <div id="target" class="animated" style="position: absolute; width: 200px; height: 200px; background: lightblue"></div> |
| <div id="affected" style="position: absolute; width: 200px; height: 200px; top: 100px; left: 100px; background: lightgray"></div> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script> |
| onload = function() { |
| test(function() { |
| if (window.internals) { |
| var layer_tree = internals.layerTreeAsText(document); |
| assert_true(layer_tree.includes("id='affected'"), 'should not be squashed into animated layer'); |
| assert_true(layer_tree.includes("id='target'"), 'animated layer'); |
| } |
| }); |
| }; |
| </script> |
