JavaScript Full Screen API, Navigation Timing and repeating CSS Gradients

Published on in Google Chrome, Last Week, Standards, tech, Trident, WebKit. Version: Chrome 10

Development is slowly getting back on track with the 851 commits which were done last week. This week’s highlights include the availability of a per element JavaScript full screen API, a prefixless Navigation Timing implementation and the addition of support for repeating CSS gradients.

With both Microsoft and Google strongly pushing the Navigation Timing specification, both vendors finished most of their implementation and a Last Call specification will be published tomorrow. Because of this, WebKit has dropped the vendor prefix and Microsoft is very likely to do the same. Opera and Mozilla have expressed concerns, but seem supportive as well. It’ll certainly become an interesting Last Call phase.

As for other specification-related changes, text emphasis marks won’t appear over characters that have ruby annotations anymore. Support for repeating gradients has been added as well, completing the set of gradient related CSS properties. Negated selectors will be given the specificity of the selector they’re negating, and parsing of the argument for the :nth-child CSS selector has been updated and now accepts whitespace, but rejects invalid values.

...
var elem = document.getElementById("my-element");
elem.onwebkitfullscreenchange = function () {
console.log ("We went fullscreen!");
};
elem.webkitRequestFullScreen ();
..

After several months of writing and updating patches, Jer Noble landed the final part of his work on supporting per-element full screen last Friday. While the implementation is only available in WebKit nightlies on Mac OS systems so far, I’d expect a Windows nightly rather soon and Chromium is interested as well.

WebKit’s implementation follows Mozilla’s proposal with only a few exceptions: instead of accepting flags for requestFullScreen, an additional method called requestFullScreenWithKeys has been made available. The following three methods have been added for the Document and all Elements in the DOM:

void webkitRequestFullScreen();
void webkitRequestFullScreenWithKeys();
void webkitCancelFullScreen(); // only on Document

Furthermore, a new attribute called allowFullScreen has been introduced for iframe elements, the fullScreenChange event has been added and three CSS pseudo-classes have been added, namely :full-screen, :full-screen-doc and :full-screen-root-with-target. Mind that each of these additions has been prefixed with “webkit” or “-webkit-”, depending on the context.

Want to try the feature yourself?
All you need is a Mac OS X system on which you can run WebKit nightlies. Download and install the latest one and open up Terminal. Within it, execute the following command to enable the feature:

defaults write com.apple.Safari WebKitFullScreenEnabled 1

After (re)starting the nightly, the exposed API will actually launch an element in full screen. Click on the icon to the left of this paragraph to display this very article in full screen. Using it to display a single element in full screen can be done too, but still is a bit unstable at the time of writing.

Other changes which occurred last week:

  • The disabled property on stylesheet elements will now disable the sheet altogether.
  • Adam Barth moved the WebCore directory, containing most of WebKit’s code, to Source.
  • A memory sampler has been added to WebKit, primarily for usage in Safari on Mac OS X.
  • The onbeforeunload event is now available for framesets as well.
  • SGML-style comments within <style> elements will now be ignored when using XHTML.
  • Tabbed options (also known as WebUI) have been enabled by default in Chromium.
  • Per an update in the HTML5 specification, framesets will now be allowed after hidden inputs.
  • The Web Audio API received some more work for the Chromium port.
  • Mihai Parparita now is a WebKit reviewer, congratulations!
  • The PNG compression settings for Chromium have been optimized for performance.
  • Inline script execution will now block on pending stylesheet loads, as other browsers do.
  • The O3D Plugin API will now work with Opera 11 as well.
  • Web Inspector has been enabled for all internal chrome:// pages.
  • The icon for active background extensions over the wrench menu in Chrome has been updated.
  • The position of Notifications can now be changed via a notification’s option menu.

This week might bring four times faster JavaScript to Samsung’s EFL port, support for the object-fit CSS property and, hopefully, much more patches from the Web Inspector team. Have a good week!

19 Responses to “JavaScript Full Screen API, Navigation Timing and repeating CSS Gradients”

Both comments and pings are currently closed.

ebraminio

January 10, 2011 at 8:37 pm

wow, thanks, great information


Peter Beverloo

January 10, 2011 at 11:28 pm

You’re right, I’ve updated the post :) Thanks!


Joe

August 16, 2011 at 3:03 pm

I’ve been rooting around the “–enable-fullscreen” startup switch for Chrome, but cannot get the webkit method you mentioned to work with it. Your example works with Safari 5.1, and I thought it might have made it into Chrome 13. Any ideas? Thanks.


Derek

October 21, 2011 at 4:38 am

Thanks for the great information and it works like a charm on Google Chrome 16.