backgroundColor: 'var(--blue)' doesn't render on Chrome

[Fish1]

CSS variables should be rendered to the background color.

Current Behavior

Chrome doesn't render backgroundColor when it is set to a variable. Firefox renders it properly.

Possible Solution

Not sure at the moment.

Steps To Reproduce

  it('should render backgroundColor with variable', (done) => {
    bootstrap(
      'bgcolor-variable/node.html',
      'bgcolor-variable/style.css',
      'bgcolor-variable/image',
    )
      .then((node) => {
        return toPng(node, {
          backgroundColor: 'var(--blue)',
        })
      })
      .then((res) => {
        console.log(res)
        check(res)
      })
      .then(done)
      .catch(done)
  })

:root {
  --blue: #1e90ff;
}

#dom-node {
  height: 100px;
  width: 100px;
}

#content {
  height: 50px;
  width: 50px;
}

Error Message & Stack Trace

<!-- Provide a log message if relevant -->

Additional Context

Your Environment

Chrome

[biiibooo[bot]]

👋 @Fish1

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[Justineo]

AFAIK CSS custom properties are not iterable from CSSStyleDeclaration (returned from getComputedStyle) so in current implementation they won't be reflected in the snapshot image.

I made a PR (https://github.com/bubkoo/html-to-image/pull/436) which added a includeStyleProperties option which allow users to manually specify the included properties. Though I added it for performance reasons, I believe it's also helpful in the custom properties' case.