v2.2.10 Breaks CSS text in happy-dom/vitest?

thequailman commented 5 days ago

Is there an existing issue for this?

[X] I have searched the existing issues

Mithril.js Version

2.2.10

Browser and OS

Vitest

Project

No response

Code

Checking the value of `style.cssText` for any element returns an empty string as of 2.2.10.  Prior to this (2.2.9), the value showed the actual CSS text.  This was immensely helpful for testing CSS values with vitest/happy-dom.

Steps to Reproduce

Using vitest or happy-dom, getElement and check the style.cssText value.

Expected Behavior

It should return the CSS values, I think.

Observed Behavior

Empty string is always returned.

Context

Breaks a bunch of my tests.

dead-claudia commented 4 days ago

Could you provide code to reproduce your error? Your "Code" section just contains error info, which isn't the purpose of the section.

thequailman commented 2 days ago

It's a bit complicated as you need to have vitest and happy dom setup, something like this might work:

import { GlobalRegistrator } from "@happy-dom/global-registrator";
import m from "mithril";

GlobalRegistrator.register();
m.mount(document.body, {
  view: () => {
    return m("button", {
      style: {
        color: "blue",
      },
    }
  }
})
console.log(document.querySelector("button").style.cssText) // should return "color: blue"

dead-claudia commented 2 days ago

@thequailman Could you slap together a repo with instructions?

Was hoping for something self-contained.

kfule commented 19 hours ago

It seems that happy-dom does not support the setting to style dashed-properties unlike other real browsers and jsdom. With #2985 , the settings to the dashed-properties are now used more aggressively.

happy-dom example (can not set via dashed-property)

// happy-dom
const { Window } = require('happy-dom');
const window = new Window();

window.document.body.innerHTML = '<p>Hello world</p>';
const element = window.document.querySelector("p");
console.log(element.textContent) // Hello world

// not supported (against spec.)
element.style["font-size"] = "10px"

// supported
// element.style.fontSize = "10px"
// element.style["fontSize"] = "10px"
// element.style.setProperty("font-size","10px")

// unintended support (cssText is "fontSize: 10px;")
// element.style.setProperty("fontSize","10px")

console.log(element.style.cssText); // no prints

jsdom example (can set via dashed-property)

// jsdom
const jsdom = require("jsdom");
const { JSDOM } = jsdom;

const dom = new JSDOM(`<!DOCTYPE html><p>Hello world</p>`);
const element = dom.window.document.querySelector("p");
console.log(element.textContent) // Hello world

// supported
element.style["font-size"] = "10px"
// element.style.fontSize = "10px"
// element.style["fontSize"] = "10px"
// element.style.setProperty("font-size","10px")

// not supported (No problem, as it behaves according to the spec.)
// element.style.setProperty("fontSize","10px")

console.log(element.style.cssText); // prints "font-size: 10px;"

@dead-claudia It might be better to change to a variation using includes() or indexOf(), as the old proposal in #2985.

dead-claudia commented 13 hours ago

Reported that happy-dom example in https://github.com/capricorn86/happy-dom/issues/1613 as they claim to (be trying to) implement a full headless web browser. I'm still open to a fix for this, but do note that our internal mocks are not supported for general use (and haven't been for a long time).

MithrilJS / mithril.js