ladybird/Tests/LibWeb/Text/input/css/CSSStyleDeclaration-custom-properties.html

<!DOCTYPE html>
<script src="../include.js"></script>
<body></body>
<script>
    test(() => {
        const div = document.createElement('div');
        div.style.setProperty("--redcolor", "red");
        println(`style.getPropertyValue(--redcolor)=${div.style.getPropertyValue("--redcolor")}`);
        println(`style.getPropertyPriority(--redcolor)=${div.style.getPropertyPriority("--redcolor")}`);

        const nested = document.createElement('div');
        nested.style["backgroundColor"] = "var(--redcolor)";
        nested.style["width"] = "100px";
        nested.style["height"] = "100px";
        div.appendChild(nested);

        document.body.appendChild(div);

        println(getComputedStyle(nested).backgroundColor);

        div.style.removeProperty("--redcolor");
        println(getComputedStyle(nested).backgroundColor);
    });
</script>
LibWeb: Allow custom properties in CSSStyleDeclaration.setProperty() This change fixes unhoverable toolbar on https://excalidraw.com/ The problem was that React.js uses setProperty() to add style properties specified in the "style" attribute in the virtual DOM, and we were failing to add the CSS variable used to set the "pointer-events" value to "all". 2024-11-20 15:48:04 +01:00			`<!DOCTYPE html>`
			`<script src="../include.js"></script>`
			`<body></body>`
			`<script>`
			`test(() => {`
			`const div = document.createElement('div');`
			`div.style.setProperty("--redcolor", "red");`
LibWeb: Allow custom properties in CSSStyleDeclaration.getPropertyValue 2024-11-20 17:21:22 +01:00			println(`style.getPropertyValue(--redcolor)=${div.style.getPropertyValue("--redcolor")}`);
LibWeb: Allow custom properties in getPropertyPriority() 2024-11-20 18:11:47 +01:00			println(`style.getPropertyPriority(--redcolor)=${div.style.getPropertyPriority("--redcolor")}`);
LibWeb: Allow custom properties in CSSStyleDeclaration.setProperty() This change fixes unhoverable toolbar on https://excalidraw.com/ The problem was that React.js uses setProperty() to add style properties specified in the "style" attribute in the virtual DOM, and we were failing to add the CSS variable used to set the "pointer-events" value to "all". 2024-11-20 15:48:04 +01:00
			`const nested = document.createElement('div');`
			`nested.style["backgroundColor"] = "var(--redcolor)";`
			`nested.style["width"] = "100px";`
			`nested.style["height"] = "100px";`
			`div.appendChild(nested);`

			`document.body.appendChild(div);`

			`println(getComputedStyle(nested).backgroundColor);`
LibWeb: Allow custom properties in CSSStyleDeclaration.removeProperty() 2024-11-20 17:48:35 +01:00
			`div.style.removeProperty("--redcolor");`
			`println(getComputedStyle(nested).backgroundColor);`
LibWeb: Allow custom properties in CSSStyleDeclaration.setProperty() This change fixes unhoverable toolbar on https://excalidraw.com/ The problem was that React.js uses setProperty() to add style properties specified in the "style" attribute in the virtual DOM, and we were failing to add the CSS variable used to set the "pointer-events" value to "all". 2024-11-20 15:48:04 +01:00			`});`
			`</script>`