ladybird/Tests/LibWeb/Text/input/css/CSSStyleProperties-all-supported-properties-and-default-values.html

<!DOCTYPE html>
<script src="../include.js"></script>
<script>
    test(() => {
        const defaultStyleIframe = document.createElement("iframe");
        document.body.appendChild(defaultStyleIframe);

        const defaultStyle = getComputedStyle(defaultStyleIframe.contentDocument.body);

        const stylePrototype = Object.getPrototypeOf(defaultStyle);
        const supportedProperties = Object.getOwnPropertyNames(stylePrototype);

        println("All supported properties and their default values exposed from CSSStyleProperties from getComputedStyle:");
        for (const supportedProperty of supportedProperties) {
            println(`'${supportedProperty}': '${defaultStyle[supportedProperty]}'`);
        }
    });
</script>
LibWeb: Generate IDL attributes for all supported CSS properties The CSSOM spec tells us to potentially add up to three different IDL attributes to CSSStyleDeclaration for every CSS property we support: - A camelCased attribute, where a dash indicates the next character should be uppercase - A camelCased attribute for every -webkit- prefixed property, with the first letter always being lowercase - A dashed-attribute for every property with a dash in it. Additionally, every attribute must have the CEReactions and LegacyNullToEmptyString extended attributes specified on it. Since we specify every property we support with Properties.json, we can use that file to generate the IDL file and it's implementation. We import it from the Build directory with the help of multiple import base paths. Then, we add it to CSSStyleDeclaration via the mixin functionality and inheriting the generated class in CSSStyleDeclaration. 2024-11-14 16:57:14 +00:00			`<!DOCTYPE html>`
			`<script src="../include.js"></script>`
			`<script>`
			`test(() => {`
			`const defaultStyleIframe = document.createElement("iframe");`
			`document.body.appendChild(defaultStyleIframe);`

			`const defaultStyle = getComputedStyle(defaultStyleIframe.contentDocument.body);`

			`const stylePrototype = Object.getPrototypeOf(defaultStyle);`
			`const supportedProperties = Object.getOwnPropertyNames(stylePrototype);`

LibWeb/CSS: Move property code from CSSStyleDeclaration to *Properties CSSStyleDeclaration is a base class that's used by various collections of style properties or descriptors. This commit moves all style-property-related code into CSSStyleProperties, where it belongs. As noted in the previous commit, we also apply the CSSStyleProperties prototype now. 2025-03-18 14:07:08 +00:00			`println("All supported properties and their default values exposed from CSSStyleProperties from getComputedStyle:");`
LibWeb: Generate IDL attributes for all supported CSS properties The CSSOM spec tells us to potentially add up to three different IDL attributes to CSSStyleDeclaration for every CSS property we support: - A camelCased attribute, where a dash indicates the next character should be uppercase - A camelCased attribute for every -webkit- prefixed property, with the first letter always being lowercase - A dashed-attribute for every property with a dash in it. Additionally, every attribute must have the CEReactions and LegacyNullToEmptyString extended attributes specified on it. Since we specify every property we support with Properties.json, we can use that file to generate the IDL file and it's implementation. We import it from the Build directory with the help of multiple import base paths. Then, we add it to CSSStyleDeclaration via the mixin functionality and inheriting the generated class in CSSStyleDeclaration. 2024-11-14 16:57:14 +00:00			`for (const supportedProperty of supportedProperties) {`
			println(`'${supportedProperty}': '${defaultStyle[supportedProperty]}'`);
			`}`
			`});`
			`</script>`