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;

    ...