Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

If multiple custom property fallbacks occur, getPropertyValue returns an empty string #1308

Closed
odanado opened this issue Mar 14, 2024 · 0 comments · Fixed by #1309 or #1312
Closed
Labels
bug Something isn't working

Comments

@odanado
Copy link
Contributor

odanado commented Mar 14, 2024

Describe the bug
If multiple custom property (CSS Variables) fallbacks occur, getPropertyValue returns an empty string.
var() falls back to the second argument's value if no custom property is defined.

.one {
  /* Red if --my-var is not defined */
  color: var(--my-var, red);
}
.two {
  /* pink if --my-var and --my-background are not defined */
  color: var(--my-var, var(--my-background, pink));
}

https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#defining_fallbacks_in_the_var_function

If the fallback is one time, getPropertyValue works correctly, but if it is two or more times, it returns an empty string.
ref: https://github.com/odan-sandbox/happy-dom-getComputedStyle-with-css-variables-sandbox/blob/bcffcab32a5c6299ea41535bcfd9cb7659df3354/src/index.js#L26-L30

To Reproduce
Steps to reproduce the behavior:

  1. Go to https://github.com/odan-sandbox/happy-dom-getComputedStyle-with-css-variables-sandbox
  2. Clone this repository
  3. run npm i
  4. run node src/index.js

Expected behavior
This case returns "pink"
https://github.com/odan-sandbox/happy-dom-getComputedStyle-with-css-variables-sandbox/blob/bcffcab32a5c6299ea41535bcfd9cb7659df3354/src/index.js#L26-L27

This case returns "blue"
https://github.com/odan-sandbox/happy-dom-getComputedStyle-with-css-variables-sandbox/blob/bcffcab32a5c6299ea41535bcfd9cb7659df3354/src/index.js#L29-L30

Device:

  • Node: v18.12.1
  • Version: 13.8.4
@odanado odanado added the bug Something isn't working label Mar 14, 2024
odanado added a commit to odanado/happy-dom that referenced this issue Mar 14, 2024
odanado added a commit to odanado/happy-dom that referenced this issue Mar 14, 2024
capricorn86 added a commit to odanado/happy-dom that referenced this issue Mar 14, 2024
capricorn86 added a commit that referenced this issue Mar 14, 2024
… being set incorrectly (#1309)

* fix: [#1308] Fix a bug of multiple fallbacks of custom property

* fix: [#1308] Remove unnecessary check

* chore: [#1308] Fixes while loop in CSSStyleDeclarationElementStyle

---------

Co-authored-by: David Ortner <david@ortner.se>
@capricorn86 capricorn86 reopened this Mar 14, 2024
capricorn86 added a commit that referenced this issue Mar 14, 2024
…perty-fallbacks-occur-getpropertyvalue-returns-an-empty-string

chore: [#1308] Fixes problem with last implementation for parsing CSS…
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
2 participants