86 lines
3.6 KiB
Markdown
86 lines
3.6 KiB
Markdown
|
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;
|
|||
|
};
|
|||
|
|