Header Gradient Blobs

This Month in Ladybird
January 2025

January has come to an end! We merged 242 PRs from 33 contributors, let’s take a look at some of the highlights!

Web Platform Tests (WPT)

We’ve continued improving our WPT score in January, with 24,898 more passing subtests than last month, bringing our total to 1,763,289.

In particular, we’ve made significant progress in our Web Crypto API coverage, reaching a subtest pass rate of over 99%, higher than any other browser!

test262 (JS spec compliance)

We’re also doing really well on test262, the official compliance test suite for the JavaScript language.

In fact, according to test262.fyi, we are currently beating all other engines on correctness:

Of course spec compliance is just one important aspect of what makes a good JavaScript engine. Nevertheless, we’re happy with our progress on this metric and will continue to improve it!

Google BotGuard support

When signing into Google, an anti-bot script is run in the background. This script failed to finish in Ladybird, resulting in the “This browser or app is not secure” error message.

After tracking the issue to a missing deoptimization required by eval(), BotGuard now runs to completion, allowing us to use Google services like Gmail:

New CSS properties

This month, we’ve implemented several new CSS properties, including:

  • contain: lets authors restrict an element’s effect on the rest of the page, for example, preventing them from affecting other elements’ layout. This paves the way for future optimizations.
  • isolation: prevents an element from visually blending with what is behind it, even if it would normally do so.
  • user-select: lets authors control which elements on the page are selectable, and how that selection works. For example, always selecting the entire element, or not allowing a click-and-drag selection to extend outside where it started.
  • block-size, min-block-size and max-block-size: let authors set the height or width of an element, if the writing mode is horizontal or vertical respectively.

Google Calendar uses some of these properties for its UI components, and now looks quite good:

Improvements to light/dark mode

Web pages can now specify a preference for light or dark mode, or support both, using <meta name="color-scheme">, and they can control this for each element using the color-scheme CSS property. Additionally in CSS, we now support the light-dark() function, which lets an element pick a color based on whether it is in light or dark mode.

calc() simplification

Calculations in CSS such as calc(), min(), or sin() are required to be simplified as much as possible. We’ve made progress toward that by simplifying calculations right after parsing them. While doing this, we also found and reported a couple of issues with the spec algorithm.

WebCrypto API improvements

We added a number of missing algorithms to our WebCrypto implementation this month. We now have support for Ed448 and RSA-PSS, as well as the P-521 elliptic curve.

We’ve also continued to migrate our existing, home-grown implementation to use OpenSSL, which has significantly improved both correctness and performance.

Editing commands

The .execCommand() family of methods allows a website to dynamically interact with editable contents to format text, create lists, etc. Although the API is deprecated, it’s still widely used, so we need to support it! This month, we implemented nearly all commands in the specification, leading to a big increase in our WPT score.

Block elements inside inline elements

Ladybird learned how to properly layout block elements inside inline elements. For example, an <img> inside an <a> should behave as if it’s part of the link, even if there’s text surrounding it. As a bonus, our support for the CSS property pointer-events was improved to take advantage of the improved layout.

Style invalidation optimizations

We’ve begun implementing invalidation sets, a clever technique invented by Chromium that allows us to narrow the number of invalidated elements by using metadata collected from CSS rules.

Additionally, we’ve made considerable improvements to :hover invalidation, reducing the number of elements that get updated when the user moves the mouse cursor around.

Figma support

Expanding on the WebGL support introduced last month, with an additional fix to send cookies in the WebSocket handshake, we are now able to load Figma, a very complex web app built on WebGL and Wasm!

Partial layout tree updates

In the past, whenever the structure of the DOM changed, we’d rebuild our layout tree (analogous to the CSS “box tree”) from scratch every time.

Starting this month, we’re incrementally updating the layout tree for common operations, such as inserting or removing a DOM node. This avoids a lot of redundant work on dynamic pages.

Performance improvements for Vulkan backend

Websites with many <iframe>s or SVG images might see a significant reduction in load times since we started reusing the graphics context that we set up behind the scenes.

Credits

We’d like to thank everyone who contributed code this month:

Ali Mohammad Pur, Aliaksandr Kalenik, Andreas Kling, Andrew Kaster, aplefull, Arhcout, devgianlu, Feng Yu, Gingeh, InvalidUsernameException, Ivan Zuzak, Jaycadox, Jelle Raaijmakers, Lucas CHOLLET, Luke Warlow, Luke Wilde, matan-h, mikiubo, Nicolas Ramz, Noah Bright, Pavel Shliak, Psychpsyo, rmg-x, Rok Povsic, Ryan Liptak, Sam Atkins, Shannon Booth, sideshowbarker, stasoid, stelar7, Tim Ledbetter, Timothy Flynn, Tyler Dence