<!doctype HTML>
<!-- Two composited layers should result: one for the preserve-3d element (since it has a child with a 3D transform,
and one for the translateX element, since its child has preserve-3d. The grandchild element does not get a composited
layer because it is invisible.
-->
<div style="transform: translateX(300px); width: 300px; height: 300px; background: lightblue">
<div style="transform-style: preserve-3d; width: 200px; height: 200px; background: lightgray">
<div style="transform: rotateX(1deg); visibility: hidden;"></div>
</div>
</div>