Archive for January, 2012

Shadow DOM, Pointer Lock and a new CSS Lexer

Published on in Google Chrome, Last Week, tech, WebKit. Version: Chrome 18

929 changes landed at Chromium’s repository last week, whereas WebKit’s received 626, totaling up to 1,555. Highlights include quite some progress on implementing the Shadow DOM and the Pointer Lock API.

Web Inspector’s Timeline Panel has been extended with three graphs, all hidden behind the Experimental Settings option, showing information about objects and events in the DOM. Hovering over a function in the Script Panel may now show an overlay with general information and it’s source-code and elements within iframes are selectable again.

The Flexible Box module implementation has been taught about distributed packing and now supports scrollbars for overflowing content, also taking the flex direction into account. Furthermore, floated pseudo-elements within table captions will now be positioned correctly.

In order to verify whether ES.next’s let keyword will be compatible with websites, Apple has reserved the word from normal usage in JavaScriptCore. Support for Uint8ClampedArray has landed for both V8 as JSC, values for the dropzone attribute will be normalized and various issues with radio-button groups have been fixed.

In terms of the Shadow DOM, registering of scoped stylesheets with the scoped element has been implemented and an initial version of the <content> element is now available as well. Following an API change and the actual interface, Vincent Scheib’ Pointer Lock API has made it into Chrome Canary as well.

Other changes which occurred last week:

And that’ll be all again, thanks for reading!

Read more (4 comments) »

Content Shell, Shadow DOM and Emulating Screen Sizes

Published on in Google Chrome, Last Week, tech, WebKit. Version: Chrome 18

Last week brought 563 new commits in WebKit’s repository and 709 new commits to Chromium’s, totalling up to 1,272 changes. Highlights include a content shell for Chromium and work on emulating screen sizes.

Chromium’s content shell for Linux-based systems was announced on the chromium-dev mailing list on Friday, sharing the news that it’s now usable for day-to-day WebKit development. It uses Chromium’s content module but leaves out other parts of the browser, so it’ll be significantly faster to compile and run.

For free-flow HTML editing in the Resources Panel of Web Inspector, revisions will now be tracked. Unsafe cross-origin requests will now show a stack trace in the console, making them easier to track down and content in iframes won’t appear to be in the same document anymore when using the DOM Viewer. Finally, a screen-size emulation back-end has been implemented, which will eventually allow you to emulate mobile device screens!


The -webkit-cross-fade will now report the intrinsic size of the background, fixing rendering when the background-size property is being used. Baseline grid alignment has been implemented, as have the text-overflow property for input fields and parsing for the custom() function of CSS Shaders. Painting background colors for regions has been re-enabled, and regions will now be exposed to the DOM.

WebKit’s Device Orientation implementation has been updated with the absolute property, which indicates whether the angles in the event are absolute. The abort() method for Application Cache has been added, as has a constructor for MediaStream accepting a collection of MediaStreamTracks. A window’s innerWidth and innerHeight properties won’t be affected by page scales anymore and drop and dragend events will now be issued for contentEditable elements.

Finally, the first significant patch in exposing the Shadow DOM to JavaScript has landed in WebKit! Minor as it is right now, it’ll pave the path to implementing the rest of the specification.

Other changes which occurred last week:

Finally, be sure to take a look at HTML5 Please, a new website sharing recommendations about which features of the Web Platform can be used today!

Read more (3 comments) »

Font CSS Properties, Selector Source Location and calc() Tests

Published on in Google Chrome, Last Week, tech, WebKit. Version: Chrome 18

Exactly 1,500 changes landed last week, 890 for Chromium and 610 for WebKit, bringing changes such as some usability updates in the CSS Profiler and new font-related CSS properties.

The experimental Sidebar Extension API has been removed from Chromium. The Downloads Extension API gained an getFileIcon method and now also works for POST-download requests, and Panels may now be resized and spawned without drawing attention using the chrome.windows API. chrome.experimental.dns made its entry.

Early steps in supporting IndexedDB in Web Inspector have been made and a “source” column has been added to the CSS Profiler, directly pointing out the offending CSS rule.
As part of an ongoing effort in WebKit, several failing tests on the IE Testcenter have been fixed. Among these are executing prepared scripts even when they’ve been removed from the DOM and sandboxed i-frames will now block the autofocus attribute if the sandbox flags request it.

WebKit now also supports getting the computed style for border-radius properties. Four compliance improvements have been made to JavaScriptCore, namely that defineOwnProperty is now available for arrays, changes around the length property for arrays, defineProperty and handling of colons in timezones. Finally, the navigator.startActivity method for Web Intents has been implemented, albeit behind a compile-time guard.

Following a specification change, the flex-align CSS property has been renamed to flex-item-align and a new version of flex-align has been implemented, and the implementation has been taught about handling absolutely positioned elements within flexboxes. Color matrix-based filters will now be done by Skia for Chromium, and the serpia tone filter has been aligned color-wise for Mac OS X. Text decorations won’t propagate to all descendants anymore and several more element types can now render outlines.

Two new CSS properties were implemented. The font-kerning property from the CSS Fonts specification will allow you to define kerning behavior, and the initial implementation of the font-variant-ligatures property will allow you to explicitly enable or disable OpenType’s common ligatures feature on a font.

Other changes which occurred last week:

Some interesting things currently going on include a Baidu contribution and basic grid alignment from the CSS Line Grid specification.

Read more (6 comments) »

Media Fragments, Performance and MediaElementAudioSourceNode

Published on in Google Chrome, Last Week, tech, WebKit. Version: Chrome 18

The new year’s first week ended calmly, bringing in 547 commits to WebKit and 650 to Chromium. Highlights include support for temporal dimensions for media files, alignment of Safari’s JavaScript engine with ES5 and lots of performance improvements.

Engadget, among other sites, has become significantly faster in WebKit, now using 10% less CPU over the entire page load due to analyzing inline stylesheet scopes. A CSS Selector using multiple indirect adjacency combinators won’t be able to be superlinear anymore, inserting nodes into the DOM has been sped up and several other tweaks were implemented.

Sanitization of non-parsable strings in date and time input boxes is now possible in WebKit, emptying the value if an invalid value has occurred. The </script>-close tag will now be properly highlighted in View Source, and horizontal paddings and borders will be used instead of vertical ones for a CSS table’s fixed width.

Safari’s JavaScript engine aligned its behavior closer to the ECMAScript specification. The JSON object is now configurable, the parseInt method won’t parse octal numbers anymore, ThrowTypeError is now a singleton and date parsing has been made more liberal. Alexis Menard implemented getComputedStyle output for the outline, border, list-style, border-image and background properties. Finally, the Web Audio API is now able to integrate with audio and video elements throught the MediaElementAudioSourceNode object!

Eric Carlson implemented the temporal dimension portion of the Media Fragments URI specification. This allows you to append a formatted hash-string to any media file’s URL selecting which portion of the file should be played. For example, this plays the fourth until the twelfth second: video.webm#t=4,12.

Other changes which occurred last week:

And that’ll be all for now! Lets get back on the Monday-track for updates starting next week!

Read more (9 comments) »

CSS Selector Profiler, Source Mapping and Software Rendering

Published on in Google Chrome, Last Week, tech, WebKit. Version: Chrome 18

Happy New Year! Since I didn’t publish an update last week, this one will cover all 680 WebKit and 986 Chromium commits made in the past two weeks. Highlights include a ton of Web Inspector changes, Jarred’s work on XMLHttpRequest and access to new JavaScript features through about:flags.

Besides support for true hardware acceleration, which pretty much is a requirement for features such as WebGL and CSS 3D Transforms, attention is also being given to software renderers. Several crashes for Apple’s OpenGL-software renderer have been fixed, and support for SwiftShader has been added for Windows installations, which will automatically be downloaded if support for GPU-based WebGL is blacklisted. While performance definitely won’t be en par with GPU-based WebGL, it’s a good solution for those on older systems.

The Web Inspector team landed some great new features, most notable of which is the CSS Selector Profiler. Available through the Profiles Panel in the Inspector, it will show the number of matches for a certain element and its contribution to the total style matching run-time. Two other new features, both displayed in the image below, are the ability to dock the Web Inspector to the right-side of the browser window (through the Settings window) and an experimental tabbed interface for the Script Panel.

New, experimental Web Inspector features will be hidden behind a command line flag and a setting. Tree views in side-bars cannot be collapsed anymore using the keyboard and subsequent @rule-statements in CSS will be highlighted. The ability to remove all breakpoints has been added, as has a cool Go To Function dialog. Finally, Web Inspector gained support for Source Mapping through the X-SourceMap HTTP header. When enabled (also through the Settings window), an Install Source Map context-menu item will be added to scripts in the Script Panel.

On Chromium’s side for Web Inspector, both the chrome.devtools and the chrome.debugger Extension APIs graduated from being experimental, so hopefully we’ll be seeing a lot of extensions starting with Chrome 18!

WebKit’s HTML5 parser has received a number of updates, which include support for the Noah’s Ark condition, 93 named entities which expand to more than a single character and some minor fixes related to NULL characters in HTML content. Video subtitles through the <track> element can now be rendered on a video, and subtitles will be enabled for WebKit-mac builds, meaning Safari. Finally, the dropzone attribute got aligned with the specification.

The XMLHttpRequest implementation has also been updated, which now compares the mime-types in a case insensitive way, gained support for the loadend event and allows more liberal modification of the withCredentials and responseType attributes. More excitingly, new response types (such as json) won’t support synchronous requests in a non-worker scope anymore. Two more init*Event methods have been removed, and retrieving the computed style of the border-style, border-color and margin properties has been implemented.

Default styling of the strong and b elements has been updated to be bold rather than bolder. CSS Filters may now be used on inline elements, the blur filter will now invalidate the entire element and animating brightness, contrast and drop-shadow filters won’t be reversed anymore, and two more issues with full CSS 2.1 support have been fixed.

Other changes which occurred during these weeks:

And that’s all again. Two bugs to keep an eye out for this week are updated patches for CSS calc()’s parsing and the beforeprint and afterprint events.

Read more (10 comments) »