Cross Fading, CSS Flexible Box, Grid Layout, Filters and Meta Referrer

Published on November 21st, 2011 in Google Chrome, Last Week, tech, WebKit. Version: Chrome 17

Last week was the busiest week so far for both projects, totaling up to 1,745 changes — 794 for WebKit, and 951 for Chromium. Highlights include CSS Cross Fading, Flexible Box, Filters and <meta name=referrer>.

Within Chromium, the new History UI has been launched and can be seen on chrome://history. Content Security Policy will be enabled for all extensions using a (newly introduced) manifest version of two or higher and improved download protection has now been enabled by default, assuming you have Safe Browsing enabled.

Right clicking on function values in Web Inspector will now give you the ability to browse to it’s definition. The font property in the styles pane will now show up as a proper shorthand property, selected items in context menus have been given a slight gradient and messages from the front-end to the back-end are now asynchronous.

Timothy Horton landed support for the CSS4 Images cross-fade() function. Though not fully implemented yet, it can be used as a value for any property that expects an image, such as background-image, and will render a cross faded combination of the two given images or gradients. Examples working in nightlies can be found here.

The new CSS3 Flexible Box implementation in WebKit has been enabled by default. While new features and enhancements are still incoming, it is a lot more performant and aligns WebKit better with the spec. Ojan, Tony and Julien have started working on implementing CSS Grid Layout, some patches for which have already landed.

Another new feature which landed today is support for <meta name=”referrer”>. By specifying the referrer policy in the content attribute, which can be one of never (don’t include a referrer header on navigation), always (which includes cross-protocol requests), origin (just send the page’s origin) and default, you can anonymize any request.

As for improved specification support, another CSS 2.1 test was fixed last week. The document.width and document.height properties have been removed, as has the initProgressEvent method, and access keys now work on all elements. JavaScriptCore’s implementation of Error.prototype.toString is now ES5 conformant, adding invalid track formats will throw an exception and the report-only mode for Content Security Policy has been fixed.

Most CSS Filters now work in WebKit nightlies, which includes grayscale, serpia, invert, hue rotating, saturating, opacity, gamma, drop shadow and blurring effects. Meanwhile, computed styles for CSS Shaders have been implemented as well. For CSS Exclusions, the wrap-margin, wrap-padding, wrap-flow and wrap-through properties are now being parsed, indicating good progress.

Other changes which occurred last week:

A low-latency audio channel has been implemented in Chrome for Windows, based on the WASAPI.
The WebKit Build bot previously used to test Flexible Box will now be testing the CSS Grid Layout progress.
Infrastructure for the BlackBerry WebKit build system is being upstreamed to the project.
Pages should no longer flash when switching to GPU Accelerated rendering, for example due to transitions.
An experimental WebGL extension has been implemented adding support for compressed textures.
Two more performance improvements for the DFG JIT: 1% due to improved speculation, and 1% due to calls.
Eight bit strings have been enabled for WTF’s StringImpl and JavaScriptCore.
Tab changes in Chromium for Linux are now about 15 millisecond faster.
Client-level Chrome installs can now update themselves even if a system-level Chrome has been installed.
Stack Exchange is now listed in all of Chrome’s Extension Documentation as a support channel.
Machine names will now also be listed on the about:sessions page for Tab Synchronization.
Color-filter optimizations have been enabled in Skia, delivering significant speedups for sites using shadows.
Exceptions for permissions given to the Full Screen API can now be managed through Chromium’s options.
The Bookmark All Tabs dialog has been re-implemented using WebUI.
Thanks to Nico Weber, another 59 static initializers and 116 exit-time destructors have been removed.
Through 16 commits similar to this one, Avi Drissman has been adding OVERRIDE keywords.
The new experimental Speech Input API was announced, including an example.

Work to keep an eye out for this week are related to Web Intents. That’ll be all!

7 Responses to “Cross Fading, CSS Flexible Box, Grid Layout, Filters and Meta Referrer”

Both comments and pings are currently closed.

It’s meta name=”referrer” with two Rs.

I never understood why elements flashed when using transitions until today. Good thing that they have been fixed now, so i can remove my backup 🙂 thanks!

Peter: Thanks again! 🙂

The shrinking of blurred images can be overcome by putting a null filter after the blur, e.g. -webkit-filter: blur(1px) grayscale(0);

Hi, Peter, great work on consistently giving us an overview on new features – just wondering if you can provide some more live examples (or links to)? (e.g. how did you generate the image in this post?) I wanted to have a look at webkit-filter properties for example but can’t get them to work at all, is it behind a flag in Chromium? Thanks.

Hi Adam,

In case of the images, I often lend them from pixel results in the layout tests, which may be found as .png files at the bottom of a changeset. Adding live examples for new features takes a lot of additional time (which I already have so little of), but I’ll try to do so every now and then. CSS Filters are not available yet in Chromium, you really need WebKit nightlies for these.

Cheers!

[…] [00:00:00] Cross Fading, CSS Flexible Box, Grid Layout, Filters and Meta Referrer […]