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