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