| <!DOCTYPE html> |
| <script src="../../resources/testharness.js"></script> |
| <style> |
| .scale-transform { |
| transform: scale(0.75); |
| } |
| .translate-transform { |
| transform: translateX(5px); |
| } |
| </style> |
| <div 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> |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| onload = function() { |
| if (window.internals) { |
| var layers = JSON.parse(internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_DEBUG_INFO))["layers"]; |
| |
| var willChangeDIVLayer = internals.runtimeFlags.rootLayerScrollingEnabled ? layers[4] : layers[2]; |
| var scaleTransformDIVLayer = internals.runtimeFlags.rootLayerScrollingEnabled ? layers[5] : layers[3]; |
| // Both transformed layers squash together after the will-change layer. |
| assert_true(willChangeDIVLayer.compositingReasons[0] == "Has a will-change compositing hint"); |
| assert_true(scaleTransformDIVLayer.compositingReasons[0] == "Secondary layer, home for a group of squashable content"); |
| } |
| }; |
| </script> |
