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.

Sign up for GitHub

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

Jump to bottom

Improve support for CSS colors #3657

Open
asamuzaK opened this issue Jan 7, 2024 · 5 comments
Open

Improve support for CSS colors #3657

asamuzaK opened this issue Jan 7, 2024 · 5 comments

Comments

@asamuzaK
Copy link
Contributor

asamuzaK commented Jan 7, 2024

Basic info:

  • Node.js version: v20.10.0
  • jsdom version: 23.1.0

Minimal reproduction case

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

const domstr = `<!DOCTYPE html>
<html>
  <head>
    <style>
      #target1 {
        color: green;
      }
      #target2 {
        color: hsl(120 100% 25%);
      }
    </style>
  </head>
  <body>
    <div id="target1"></div>
    <div id="target2"></div>
  </body>
</html>
`;

const options = {
  runScripts: 'dangerously',
  url: 'http://localhost/'
};

const dom = new JSDOM(domstr, options);
const window = dom.window;
const document = dom.window.document;

const target1 = document.getElementById('target1');
console.log(window.getComputedStyle(target1).color; // 'rgb(0, 128, 0)'

const target2 = document.getElementById('target2');
console.log(window.getComputedStyle(target2).color; // fails, empty string  returned

How does similar code behave in browsers?

'rgb(0, 128, 0)' is returned as expected.

Proposal

I took a look at jsdom/lib/jsdom/living/helpers/colors.js and found that CSS color support of jsdom is quite limited.
In another project of mine, I am using an internal module that can parse / convert colors defined in CSS Color Module Level 4.
sidebarTabs/src/mjs/color.js
If you are interested in using it with jsdom, I will publish it as a public module on npm.
How about that?
@domenic
Copy link
Member

domenic commented Jan 7, 2024

That would be great!

The hardest part seems like figuring out the right integration points. Do you think it will be easy to slot into jsdom's getComputedOrUsedColor and getSpecifiedColor, and that will give all the benefits? Or will we need something more complicated?

Ultimately, we want to have jsdom code match the spec as much as possible. Although I find that with CSS specs that is not very easy.

I guess the question is, which parts of https://drafts.csswg.org/css-color-4/#resolving-color-values should be handled by jsdom, and which parts by your module? And what will the interface look like? Currently the code that tries to implement that section is

jsdom/lib/jsdom/living/helpers/style-rules.js

Lines 213 to 229 in cf8b707

} else if (computedValue === "computed-color") {
const specifiedValue = getSpecifiedValue(element, property);
// https://drafts.csswg.org/css-color-4/#resolving-other-colors
if (specifiedValue === "currentcolor") {
if (property === "color") {
if (element.parentElement !== null) {
return getComputedValue(element.parentElement, "color");
}
return initial;
}
return getComputedValue(element, "color");
}
return getComputedOrUsedColor(specifiedValue);
}
plus the file you mention.

@asamuzaK
Copy link
Contributor Author

asamuzaK commented Jan 7, 2024

I am planning to add a new function to the module something like:

export const getColorInComputedStyle = (color, option = {}) => {
  let computedStyle;
  // convert given `color` to `rgb(r, g, b)` / `rgba(r, g, b, a)`
  return computedStyle;
};

@domenic
Copy link
Member

domenic commented Jan 7, 2024 •
edited

I think that will mostly work. Two minor notes:

@asamuzaK
Copy link
Contributor Author

asamuzaK commented Jan 7, 2024

Thanks!
I'll use getColorInGetComputedStyle.

system colors, transparent, or currentcolor

  • system colors: No.
  • transparent: Yes.
  • currentcolor: It depends. It complements currentcolor as a missing color by default. If you could know what currentcolor is and pass that color as an option, e.g. getColorInGetComputedStyle('color-mix(currentcolor, green)', { currentColor: 'blue' }), then it uses that given color blue for currentcolor in process.

@asamuzaK
Copy link
Contributor Author

Published on npm @asamuzakjp/css-color

This was referenced Jan 27, 2024
Closed
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Use css-color module asamuzaK/jsdom
Use css-color module asamuzaK/jsdom
2 participants
@domenic @asamuzaK