This Month in Ladybird: August 2024
August 2024 has come to an end, and it's been another solid month for the Ladybird project. We've merged 231 PRs from 38 contributors, and made progress on many different fronts.
Welcoming new sponsors
Ladybird is funded entirely by sponsorships and donations from companies and individuals who care about the open web.
In August, we've welcomed the following new sponsors:
Please contact us if you are interested in sponsoring the project.
Web Platform Tests
This month saw substantial progress on Web Platform Tests (WPT)!
We now have a dedicated server that runs the tests nightly, with results published to the main wpt.fyi dashboard. You can view our latest results here.
Developers can now run WPT locally as well, using the WPT.sh script, to catch regressions before they happen. Documentation for this script is available here.
Our WPT compliance improved significantly this month. We've made significant progress in multi-byte legacy text encodings (thanks to BenJilks) and URL parsing support (thanks to shannonbooth.)
At the time of writing, we're passing 205,399 more subtests than last month, bringing the total to 921,633!
Sticky positioning
We now support CSS position: sticky!
This is implemented by giving sticky-positioned elements their own scroll frame, which is then updated independently of regular scroll boxes.
Drag and drop
Tim Flynn implemented large parts of the HTML drag and drop specification, allowing us to use the drag and drop features of many websites, such as GitHub, Imgur, and Google Lens.
Skia now powers SVG and 2D canvas
Last month, we adopted the third-party library Skia as our default rasterizer for high-performance 2D graphics. This month, we've expanded Skia's role beyond HTML document rendering. It now powers the <canvas> element and SVG content, and also improves the speed and accuracy of CSS border rendering.
(The Figma home page uses a 2D canvas to render a big demo.)
We've implemented our use of Skia as a pluggable graphics backend, to leave the door open for future experiments with other graphics libraries.
The next major task is enabling Skia's GPU acceleration support for 2D canvas graphics.
HarfBuzz for text layout and RTL support
Our text layout system takes a Unicode string and set of fonts as input and returns a list of positioned glyphs.
We previously used a basic algorithm (inherited from SerenityOS) that worked for simple scripts like Latin and Cyrillic. This month, BenJilks helped us adopt the third-party HarfBuzz text shaping library. BenJilks added support for the direction attribute as well. As a result, Ladybird can now render more complex scripts like Hebrew and Arabic.
There are still many issues to be fixed, but adopting HarfBuzz is a major milestone and unlocks all kinds of improvements!
Retained display lists
We've made significant progress in scrolling performance this month, thanks to an optimization in display list usage.
Our painting process is divided into two stages: First, we build a display list of draw commands. Then, we rasterize the commands, ignoring anything that would fall outside the visible viewport.
Until this month, a new display list was built from scratch for every frame painted, causing noticeable slowdown when repainting very large pages.
We've now taken a first step towards optimizing this by reusing the display list across repaints when only scroll offsets change.
This involves separating the display list into two parts: the draw commands (each linked to a "scroll frame ID") and the scroll frames (each with an ID and scroll offset). Before repainting, the display list is combined with the scroll offsets to produce the final draw commands, ready for rasterization.
Some examples of the scrolling frame rate improvement:
| Page | Before | After |
|---|---|---|
| Zig Documentation | 25 fps | 120 fps |
| CSS Grid specification | 60 fps | 150 fps |
Towards CSS Typed OM
We've started aligning our internal "style value" classes with the CSS Typed OM spec, which gives JavaScript access to style information as objects rather than strings.
A key change is that colors are now stored in their original form, rather than being converted to a 32-bit RGBA value during parsing. This allows calc() inside color functions (like background-color: hsl(calc(15deg * 8) 50% 80%)) to work correctly, resolving a long-standing issue.
Alpha premultiplication
We encountered issues with blending partially transparent bitmaps like PNG images or <canvas> targets. This was due to always assuming that bitmap data was unpremultiplied, causing blending artifacts.
We now track the alpha type for each bitmap and pass this metadata to Skia, which resolves these artifacts!
Input selection API
Text input elements like <input type="text"> and <textarea> have a DOM API to interact with their selection
state. With properties like .selectionStart and .selectionEnd or methods like .select(), you can programmatically control the selection.
Ladybird now implements these APIs almost fully according to spec and keeps the UI selection and element selection state in sync!
console.table()
We've implemented console.table(), a developer API that prints data formatted as a table in the developer console.
Since the spec doesn't define an algorithm for this function, Gasim developed one and implemented it in Ladybird. We hope this algorithm will become part of the official spec, ensuring consistent behavior across browsers!
New Security Policy
This month, we've updated our security policy to better handle vulnerabilities as Ladybird moves towards an alpha release.
Previously, we treated security vulnerabilities as regular issues due to the project's pre-alpha status, directing reports through our GitHub issue tracker. However, as we integrate more third-party libraries and engage more with the broader browser ecosystem, it became clear that a more formal approach is necessary.
We've now enabled GitHub's private vulnerability reporting feature, allowing researchers to report issues directly and securely. We've also published a SECURITY.md file in our repository, which outlines our guidelines for reporting vulnerabilities and specifies what we consider in-scope.
While we're not offering bug bounties at this stage, we are committed to transparency and will publish repository security advisories for valid vulnerabilities. For more details, see our SECURITY.md file. We welcome feedback to help us improve our security processes as we continue to develop.
Credits
We thank the following people who contributed code to Ladybird in August 2024:
Adam Harald Jørgensen, Alec Murphy, Ali Mohammad Pur, Aliaksandr Kalenik, Alisson Lauffer, Andreas Kling, Andrew Kaster, Bastiaan van der Plaat, bbb651, BenJilks, Bram Otte, Braydn, circl, Colin Reeder, Diego Frias, Francesco Gazzetta, Gasim Gasimzada, Jamie Mansfield, Jelle Raaijmakers, Kenneth Myhra, Khaled Lakehal, Maks Verver, mrdcbrush, Onorio Catenacci, Sam Atkins, Samuel Fry, Sebastian-Webster, Shannon Booth, sideshowbarker, Sidicer, simonkrauter, Tim Ledbetter, Timothy Flynn, Tobias Christiansen, Will Hawkins
We also thank all the companies and individuals who sponsor Ladybird!