This Week in Ladybird #3

Overview of changes across the Ladybird Browser project in the week from April 3 to April 9 (plus everything merged Sunday evening) :^)

Summary

In chronological order:

• AK+LibWeb: Port {HTML,UIEvents,XHR}::EventNames to new FlyString
• LibWeb: Introduce CustomElementRegistry and creating custom elements
• LibWeb: Add borders functionality to CSS Grid
• LibWeb: Implement background-position-x and background-position-y longhand longhands
• LibWeb: Fix background-position for multi-layer backgrounds
• LibWeb: Implement multipart/form-data encoding algorithm
• LibWeb: Use intrinsic aspect ratio when calculating max content height
• LibWeb: Add WritableStream and WritableStreamDefaultWriter interfaces
• LibWeb: A couple of error handling improvements
• LibWeb: Begin support for videos with LibVideo
• LibJS: Update spec numbers for the Intl Enumeration proposal
• LibWeb: Use max-width when present in TableFormattingContext
• LibWeb: Port a few IDL implementations to new String
• LibWeb: Ignore preferred width when calculating intrinsic width of block
• LibWeb: Transform the default path in CRC2D#fill(CanvasFillRule)
• LibWeb: Don't put abspos grid/flex items in anonymous wrapper
• LibWeb: Add an initial implementation of CRC2D.clip()
• LibWeb: Port {Custom,Mouse,UI,Wheel,}Event to new String
• LibWeb: Add the WritableStreamDefaultController
• LibWeb: Implement HTMLVideoElement load, play, pause and draw some basic controls
• webp lossless: Implement pixel bundling for color indexing transform
• LibWeb/Fetch: Use a basic filtered response for redirect navigations
• LibWeb: Port rest of event system-related in LibWeb to new {Fly}String
• LibWeb: Implement WritableStream.close()

AK+LibWeb: Port {HTML,UIEvents,XHR}::EventNames to new FlyString

#17825 by @kennethmyhra

This ports various event name enumerations (think mouseup, pageshow, …) from DeprecatedFlyString to FlyString.

LibWeb: Introduce CustomElementRegistry and creating custom elements

#18092 by @Lubrsi

This implements the CustomElementRegistry interface along with the underlying infrastructure required to create custom elements, the [CEReactions] IDL extended attribute, and the :defined CSS pseudo class!

LibWeb: Add borders functionality to CSS Grid

#18148 by @martinfalisse

Borders affect layout, and were previously not considered in a Grid Formatting Context. Now they are:

LibWeb: Implement background-position-x and background-position-y longhand longhands

#18157 by @MacDue

On a more serious note, the background-position-x and background-position-y longhands of the background-position property, which itself is a longhand of background have been widely supported in other engines for well over a decade (at least the single-value syntax), and are used on many websites, despite being part of a CSS spec that claims to be Not Ready For Implementation yet.

One such website is Steam (notice the left carousel button), before and after:

LibWeb: Fix background-position for multi-layer backgrounds

#18167 by @MacDue

This fixes a regression of multiple backgrounds rendering caused by the previous feature:

LibWeb: Implement multipart/form-data encoding algorithm

#18169 by @kennethmyhra

This implements the multipart/form-data encoding algorithm from the HTML spec, allowing us to use XMLHttpRequest.send() with FormData objects!

LibWeb: Use intrinsic aspect ratio when calculating max content height

#18173 by @matcool

This fixes images in a flex container with row direction being stretched when given a specific width, but auto height.

Before and after:

LibWeb: Add WritableStream and WritableStreamDefaultWriter interfaces

#18174 by @mattco98

Matthew is continuing his work on bringing the Streams API to LibWeb! This implements the following APIs:

• WritableStream:
  • The WritableStream() constructor
  • WritableStream.locked
• WritableStreamDefaultWriter:
  • The WritableStreamDefaultWriter() constructor
  • WritableStreamDefaultWriter.closed
  • WritableStreamDefaultWriter.desiredSize
  • WritableStreamDefaultWriter.ready

LibWeb: A couple of error handling improvements

#18181 by @trflynn89

This is preparation for…

LibWeb: Begin support for videos with LibVideo

#18183 by @trflynn89

We finally have an initial implementation of video playback in LibWeb, thanks to Tim and everyone who previously worked on LibVideo for general video support in SerenityOS!

There's still a fair number of limitations (decodes within the page's WebContent process, no audio, hardcoded to use a Matroska demuxer and VP9 decoder, i.e. WebM) but at the same time it's of course 100% more functional than what we had before :^)

See (and I highly suggest trying, too!) for yourself:

LibJS: Update spec numbers for the Intl Enumeration proposal

#18194 by @trflynn89

The Intl Enumeration API (i.e Intl.supportedValuesOf() function) reached stage 4 and was merged into the main ECMA-402 spec, so we had to update some references.

LibWeb: Use max-width when present in TableFormattingContext

#18195 by @martinfalisse

Elements with display: table now respect max-width if given. Previously the created Table Formatting Context would take up the full available width.

LibWeb: Port a few IDL implementations to new String

#18197 by @kennethmyhra

This ports the following interfaces from DeprecatedString to String:

• FocusEvent
• KeyboardEvent

…as well as an internal class (AbstractBrowsingContext).

LibWeb: Ignore preferred width when calculating intrinsic width of block

#18204 by @awesomekling

Another week went by without me having any clue about layout stuff, so I'll let Andreas explain

When calculating the intrinsic width of a block-level box, we now ignore the preferred width entirely, and not just when the preferred width should be treated as auto.

The condition for this was both confused and wrong, as it looked at the available width around the box, but didn't check for a width constraint on the box itself.

Just because the available width has an intrinsic sizing constraint doesn't mean that the box is undergoing intrinsic sizing. It could also be the box's containing block!

LibWeb: Transform the default path in CRC2D#fill(CanvasFillRule)

#18206 by @Lubrsi

This fixes a bug where we didn't apply the canvas's current transform in CanvasRenderingContext2D.fill() when called with a fill rule, resulting in incorrect placement of the filled path.

LibWeb: Don't put abspos grid/flex items in anonymous wrapper

#18208 by @awesomekling

Grid and flex containers have their own rules for abspos items, so we shouldn't try to be clever and put them in the "current" anonymous wrapper block. That behavior is primarily for the benefit of block & inline layout.

LibWeb: Add an initial implementation of CRC2D.clip()

#18212 by @MacDue

This implements the CanvasRenderingContext2D.clip() API, resulting in major rendering improvements on Google Street View!

And even those little missing sections got fixed in the end:

LibWeb: Port {Custom,Mouse,UI,Wheel,}Event to new String

#18215 by @kennethmyhra

This ports the following classes from DeprecatedString to String:

• CustomEvent
• MouseEvent
• UIEvent
• WheelEvent

LibWeb: Add the WritableStreamDefaultController

#18223 by @mattco98

This implements WritableStreamDefaultController with its two APIs:

• WritableStreamDefaultController.signal
• WritableStreamDefaultController.error()

LibWeb: Implement HTMLVideoElement load, play, pause and draw some basic controls

#18233 by @trflynn89

After video playback was initially implemented to start automatically and with no way of manually or programmatically controlling it, our implementation of the <video> element now gains play/pause controls, as well as the following APIs:

• HTMLMediaElement.load()
• HTMLMediaElement.play()
• HTMLMediaElement.pause()
• HTMLMediaElement.paused

webp lossless: Implement pixel bundling for color indexing transform

#18235 by @nico

Nico has been (incrementally! ) writing a WebP decoder in LibGfx, which means it not only adds support for that format to virtually anything using images in SerenityOS, but also LibWeb!

With this, the webp lossless decoder is feature complete :^)

LibWeb/Fetch: Use a basic filtered response for redirect navigations

#18248 by @kalenikaliaksandr

This implements an upstream fix in the Fetch spec, which we need for Alexander's ongoing work on implementing the massive navigables refactor!

LibWeb: Port rest of event system-related in LibWeb to new {Fly}String

#18255 by @kennethmyhra

This ports the EventTarget interface from Deprecated{Fly,}String to {Fly,}String, as well as various internal classes and functions:

• DOMEventListener
• fire_progress_event()
• fire_a_page_transition_event()
• fire_a_synthetic_pointer_event()
• fire_keyboard_event()
• fire_webgl_context_event()

LibWeb: Implement WritableStream.close()

#18263 by @mattco98

This implements the WritableStream.close() API.

Screenshots

MacDue and Lubrsi spent some time visually debugging Google Maps, so here are some fun screenshots from that :^)

Even the smallest bug in an image decoder can yield images that are way off from the intended results, and Nico shared some wrongly decoded WebP images, too!

And that's all for week 3! I hope you're just as excited about the new video support as I am, more work for abstracting the specific codec away, as well as buffering are already in progress :^)