TypeError: value.match is not a function

[smarlhens]

Hi there 👋🏻

Describe the bug
I'm getting value as number instead of string in getTop (and I guess I can also get number in other functions like getLeft, getRight, etc).

It's maybe because property value I get from headlessui hidden fragment are not valid values (e.g. top: 1) but we should replace them by 0px I guess (that's what I get when I try using jsdom, all the values are replace with 0px).

Maybe we should return 0px if value is not a string as expected ?
Only 0 is a valid numeric for top and is equal to 0px;

References:

• https://developer.mozilla.org/en-US/docs/Web/CSS/length#syntax

To Reproduce
Reproduction repo: https://github.com/smarlhens/happy-dom-value-match-is-not-a-function

Expected behavior
Not getting error in unit test 😄

Device:

  System:
    OS: Linux 5.15 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish)
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11800H @ 2.30GHz
    Memory: 17.63 GB / 31.08 GB
    Container: Yes
    Shell: 5.8.1 - /usr/bin/zsh
  Binaries:
    Node: 16.17.1 - /usr/bin/node
    npm: 8.15.0 - /usr/bin/npm
  Browsers:
    Chrome: 106.0.5249.103
    Firefox: 105.0.2
  npmPackages:
    happy-dom: 7.5.6 => 7.5.6
    @vitejs/plugin-vue: 3.1.2 => 3.1.2 
    vite: 3.1.7 => 3.1.7 
    vitest: 0.24.1 => 0.24.1

[kalvenschraut]

Receiving similar errors with value.trim is not a function.

It appears quasar is setting opacity to the number 0.2 which is then causing the error.

[capricorn86]

Thank you for reporting @smarlhens and @kalvenschraut! 🙂

I have fixed the problem now.

You can read more about the release here:
https://github.com/capricorn86/happy-dom/releases/tag/v7.5.7

[capricorn86]

What should happen in the browser is the following (this is also what you will get in Happy DOM):

var element = document.createElement('div');
element.style.top = 2;
element.style.opacity = 0.2;

// Outputs "" (empty string)
console.log(element.style.top);

// Outputs "0.2"
console.log(element.style.opacity);