| <!DOCTYPE html> |
| <style> |
| .scale-transform { |
| transform: scale(0.75); |
| } |
| .translate-transform { |
| transform: translateX(5px); |
| } |
| </style> |
| <div id="should-not-squash" style="will-change: transform; width: 200px; height: 200px; background: lightgray;"></div> |
| <div class="scale-transform" style="position: absolute; width: 200px; height: 200px; top: 100px; left: 100px; background: lightblue"></div> |
| <div class="translate-transform" style="position: absolute; width: 200px; height: 200px; top: 100px; left: 100px; background: lightblue"></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='should-not-squash'"), 'should not squash into scale transform'); |
| assert_true(layer_tree.includes("class='scale-transform'"), 'the scale transform'); |
| assert_false(layer_tree.includes("id='translate-transform'"), 'translate transform is squashed'); |
| } |
| }); |
| }; |
| </script> |
