<!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>