<!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 = layers[4];
        var scaleTransformDIVLayer = layers[5];
        // 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>