Eyes Above The Waves

We landed support for CSS Transforms over the weekend. This is our implementation of a spec spec proposed by Apple that allows authors to apply affine transforms (e.g. scaling and rotation) to the rendering of Web content. This feature is useful and usually can't be achieved using SVG and <foreignObject>, because wrapping HTML content in an SVG wrapper tends to mess up CSS layout and other things...

This is almost entirely the work of one intern, Keith Schwarz. We've had a great bunch of interns this (northern) summer and Keith's work was really outstanding. Not only was there are lot of work to do in the style system and rendering pipeline, but also various places in the code had to be tested and modified to be transform-aware. Not only that, but we wanted to make sure that -moz-transform wasn't just hacked in, so we made Keith create general infrastructure for handling transformed content that can cover -moz-transform, SVG <foreignObject>, and whatever else is needed in the future. So we now have an nsIFrame::GetTransformMatrix API to express transformations within the frame hierarchy, that we can build on whenever we need that information.

There are still a few loose ends. Transforms applied to windowed plugins just don't work (unsurprisingly). Combobox dropdowns and other popups such as XUL menus aren't transformed --- fixing that is possible, using transparent widgets, but would be a ridiculous waste of time in my opinion. If someone mad wants to contribute a patch, I'd review it though :-). There are issues with the construction and placement of native widgets that can cause transient rendering glitches --- they should go away with compositor. There are definitely performance issues because with a lot of the transforms you'll fall off all graphics fast-paths. A big chunk of those problems can only be solved with hardware-accelerated graphics.

Update Here's the source file for the demo.