blog/posts/ladybird_attempt.md

Title: Trying out a Ladybird Browser contribution Date: 2024-11-09T14:46:36-04:00 Draft: 1

CSSKeywordValue

WPT tests

https://wpt.fyi/results/css/css-typed-om/the-stylepropertymap/properties/all.html?product=ladybird&product=chromium&product=firefox%5Bstable%5D

Error:

ERROR message: Binding gCssWideKeywordsExamples is not initialized

Then open the test in ladybird:

http://wpt.live/css/css-typed-om/the-stylepropertymap/properties/all.html

Error in logs:

[408/411] Linking CXX executable bin/Ladybird
148800.761 WebContent(457739): Unhandled JavaScript exception: [ReferenceError] 'CSSKeywordValue' is not defined
148800.761 WebContent(457739):     at <unknown>

148800.761 WebContent(457739): Unhandled JavaScript exception: [ReferenceError] Binding gCssWideKeywordsExamples is not initialized
148800.761 WebContent(457739):     at runPropertyTests (http://wpt.live/css/css-typed-om/the-stylepropertymap/properties/resources/testsuite.js:420:22)
    at http://wpt.live/css/css-typed-om/the-stylepropertymap/properties/all.html:4:17

Fixing it

CSSKeywordValue needs to be avail from window/global context as a native function.

Adding a new IDL file: https://github.com/LadybirdBrowser/ladybird/blob/master/Documentation/AddNewIDLFile.md

Which then looks like it generates things like:

./Build/release/Lagom/Userland/Libraries/LibWeb/Bindings/CSSKeywordValuePrototype.h
./Build/release/Lagom/Userland/Libraries/LibWeb/Bindings/CSSKeywordValueConstructor.h
./Build/release/Lagom/Userland/Libraries/LibWeb/Bindings/CSSKeywordValueConstructor.cpp

Next is making it actually work in the JS engine

Pattern matching candidates:

    ❯ rg -l JS_DEFINE_ALLOCATOR | grep -i css | xargs wc -l | sort -n
    35 Userland/Libraries/LibWeb/CSS/MediaQueryListEvent.cpp
    39 Userland/Libraries/LibWeb/CSS/AnimationEvent.cpp
    48 Userland/Libraries/LibWeb/CSS/CSSKeyframeRule.cpp
    57 Userland/Libraries/LibWeb/CSS/CSSLayerStatementRule.cpp
    60 Userland/Libraries/LibWeb/CSS/CSSNamespaceRule.cpp
    61 Userland/Libraries/LibWeb/CSS/CSSKeyframesRule.cpp
    61 Userland/Libraries/LibWeb/CSS/CSSSupportsRule.cpp
    70 Userland/Libraries/LibWeb/CSS/ScreenOrientation.cpp
    76 Userland/Libraries/LibWeb/CSS/CSSPropertyRule.cpp
    77 Userland/Libraries/LibWeb/CSS/CSSNestedDeclarations.cpp
    78 Userland/Libraries/LibWeb/CSS/CSSMediaRule.cpp
    80 Userland/Libraries/LibWeb/CSS/CSSLayerBlockRule.cpp
    80 Userland/Libraries/LibWeb/CSS/Screen.cpp
    82 Userland/Libraries/LibWeb/CSS/CSSAnimation.cpp
   115 Userland/Libraries/LibWeb/CSS/MediaQueryList.cpp
   120 Userland/Libraries/LibWeb/CSS/MediaList.cpp
   131 Userland/Libraries/LibWeb/CSS/CSSImportRule.cpp
   154 Userland/Libraries/LibWeb/CSS/VisualViewport.cpp
   158 Userland/Libraries/LibWeb/CSS/CSSTransition.cpp
   175 Userland/Libraries/LibWeb/CSS/StyleSheetList.cpp
   205 Userland/Libraries/LibWeb/CSS/CSSFontFaceRule.cpp
   217 Userland/Libraries/LibWeb/CSS/CSSStyleRule.cpp
   219 Userland/Libraries/LibWeb/CSS/CSSRuleList.cpp
   295 Userland/Libraries/LibWeb/CSS/FontFaceSet.cpp
   417 Userland/Libraries/LibWeb/CSS/FontFace.cpp
   419 Userland/Libraries/LibWeb/CSS/CSSStyleSheet.cpp
   541 Userland/Libraries/LibWeb/CSS/CSSStyleDeclaration.cpp
   659 Userland/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp
  4729 total

Userland/Libraries/LibWeb/CSS/CSSAnimation.idl looks very good

#import <Animations/Animation.idl>

// https://www.w3.org/TR/css-animations-2/#cssanimation
[Exposed=Window]
interface CSSAnimation : Animation {
    readonly attribute CSSOMString animationName;
};

Or Userland/Libraries/LibWeb/DOMURL/DOMURL.idl that has an example of a constructor value.

#import <FileAPI/Blob.idl>
#import <DOMURL/URLSearchParams.idl>

// https://url.spec.whatwg.org/#url
[Exposed=*, LegacyWindowAlias=webkitURL, ImplementedAs=DOMURL]
interface URL {
    constructor(USVString url, optional USVString base);

    [ImplementedAs=parse_for_bindings] static DOMURL? parse(USVString url, optional USVString base);
    static boolean canParse(USVString url, optional USVString base);

    stringifier attribute USVString href;
    readonly attribute USVString origin;
    attribute USVString protocol;
    attribute USVString username;

...